@charset "UTF-8";
:root {--mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;--gothic: 'Noto Sans Japanese', 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;;}

/* common
---------------------- */
#container { overflow: hidden; }
#container section { padding: 100px 80px; max-width: 1200px; margin: auto; }
#container .learning ul { list-style: none; padding-left: 0; }
#container .learning li { padding-left: 14px; font-size: 16px; position:  relative; }
#container .learning li::before { content: ""; width: 6.5px; height: 6.5px; background: #b59f74; border-radius: 50px; position: absolute;top: 10px; left: 0; }

/* hero
---------------------- */
#container .follow-hero { position: relative; background: url(../images/follow/visible-bg.jpg)no-repeat center; background-size: cover; text-align: center; padding: 100px 5%; overflow: hidden; }
#container .follow-hero h1 { color: #fff; font-size: 36px; font-family: var(--gothic); font-weight: bold; line-height: 1.3; }
#container .follow-hero p { color: #fff; font-size: 18px; margin-top: 16px; }

.intro, .learning, .message, .close-up {width: 960px;display: flex;flex-wrap: nowrap;gap: 40px;align-items: center;justify-content: space-between;flex-wrap: nowrap;position: relative;z-index: -1;overflow: hidden;}
.intro {background: url(../images/follow/deco03.jpg)no-repeat left 340px bottom 60px;background-size: 15%;}
.intro::before {content: '';width: 100%;height: 100%;background: url(../images/follow/deco01-left.png)no-repeat center;background-size: 60%;position: absolute;top: -190px;left: -190px;}
.intro img, .message img {width: 100%;max-width: 390px;}
.intro .text, .message div { width: 38%; text-align: justify; }
.intro h2 { margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: left; position: relative; }
.intro h2::after {content: '';width: 80px;height: 120px;background: url(../images/follow/finger-deco.png)no-repeat center;background-size: 40%;position: absolute;top: -56px;left: 85%;transform: scaleX(-1);}
.intro .text { position: relative; }
.intro .text::after {content: '';width: 420px;height: 430px;background: url(../images/follow/deco02.png)no-repeat center;background-size: 100%;position: absolute;top: -28px;right: -530px;z-index: -1;}

#container section.theme { padding: 120px 80px 80px; margin-top: 20px; background: url(../images/follow/theme-bg.jpg)no-repeat center; background-size: cover; }
.theme h2 { margin-bottom: 20px; color: #fff; font-size: 32px; font-weight: bold; text-align: center; position: relative; }
.theme h2::before { content: '';width: 100%;height: 100%;background: url(../images/follow/theme-deco.png)no-repeat center;background-size: 16%;position: absolute;top: -63px;left: 50%;transform: translateX(-50%);}
.theme h2::after {content: '';width: 100px;height: 120px;background: url(../images/follow/finger-deco.png)no-repeat center;background-size: 40%;position: absolute;top: -104px;left: 58%; transform: scaleX(-1);}
.theme p { color: #fff; text-align: center; }

#container .learning { margin-bottom: 60px; padding: 60px 0; border-bottom: 4px double; align-items: flex-start; }
.learning h2 { padding: 10px 20px; color: #fff; font-size: 20px; font-weight: bold; text-align: center; background: #000; }
.learning div { width: 46%; }
.learning div img { width: 100%; margin-bottom: 10px; }

#container .quote {width: 950px;background: #fff7ea;padding: 100px 80px 60px;font-size: 24px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;-webkit-flex-wrap: wrap;flex-wrap: wrap;position: relative;}
.quote::before {content: '';width: 100%;height: 100%;background: url(../images/follow/growup-deco.png)no-repeat center;background-size: 22%;position: absolute;top: -168px;left: -292px;}
.quote h2 { margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: left; position: relative; }
.quote h2::after {content: '';width: 100px;height: 120px;background: url(../images/follow/finger-deco.png)no-repeat center;background-size: 40%;position: absolute;top: -34px;left: 60%;transform: scaleX(-1);}
.quote div {width: 380px;}
.quote p {font-size: 14px;text-align: justify;line-height: 1.8;}
.quote img {width: 370px;}

.gallery { position: relative; margin-bottom: 50px; }
.gallery .bx-wrapper { max-width: 100% !important; }
.gallery .line { display: none; }
.gallery .line:before,.gallery .line:after { content: ""; height: 1px; background: #000; display: block; flex-grow: 1; }

#container .voice{width: 960px; margin: 0 auto; padding: 70px 50px 80px;}
.voice h2{ margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: center; position: relative;}
.voice h2::after{content: ''; width: 100px; height: 120px; background: url(../images/follow/finger-deco.png) no-repeat center; background-size: 40%; position: absolute; top: -30px; left: 58%; transform: scaleX(-1);}
.voice h2::before {content: '';width: 100%;height: 100%;background: url(../images/follow/voice-deco.png) no-repeat top 18px center;background-size: 16%;padding: 35px;}
.voice .voice_box{width: 100%; min-height: 0; border:none;}
.voice .voice_box li{background-color: #fff7ea; width: 100%; padding: 24px 30px 24px; text-align: justify; margin-bottom: 20px;}
.voice .voice_box li .voice_title{ font-size: 20px; vertical-align: baseline; font-weight: bold; margin-bottom: 15px; border-left: #635215 4px solid; border-bottom: #635215 1px solid; padding: 4px 8px;}
.voice .voice_box li .voice_content{ font-size: 14px; line-height: 1.6;}

#container .message {padding: 140px 80px 60px;position: relative;}
.message div { width: 480px; position: relative; }
.message div::after {content: '';width: 420px;height: 430px;background: url(../images/follow/deco02.png)no-repeat center;background-size: 100%;position: absolute;top: -88px;right: 320px;z-index: -1;}
.message::before {content: '';width: 100%;height: 100%;background: url(../images/follow/followup-deco.png)no-repeat center;background-size: 24%;position: absolute;top: -124px;right: -150px;}
.message h2 { margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: left; position: relative; }
.message h2::after {content: '';width: 100px;height: 120px;background: url(../images/follow/finger-deco.png)no-repeat center;background-size: 40%;position: absolute;top: -29px;left: 50%;transform: scaleX(-1);}
.message p { font-size: 14px; }

#container .close-up { padding: 80px 80px 60px; position: relative; }
.close-up div { width: 480px; position: relative; }
.close-up div::after {content: '';width: 420px;height: 430px;background: url(../images/follow/deco02.png)no-repeat center;background-size: 100%;position: absolute;top: 30px;right: -340px;z-index: -1;}
.close-up::before {content: '';width: 100%;height: 100%;background: url(../images/follow/closeup-deco.png)no-repeat center;background-size: 24%;position: absolute;top: -196px;left: -286px;}
.close-up h2 { margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: left; position: relative; }
.close-up h2::after {content: '';width: 100px;height: 120px;background: url(../images/follow/finger-deco.png)no-repeat center;background-size: 40%;position: absolute;top: 0;left: 58%;transform: scaleX(-1);}
.close-up p { font-size: 14px; text-align: justify; }

#container .philosophy { padding: 100px 80px 60px; background: linear-gradient(to bottom, #fff7ea, #ffffff); text-align: center; position: relative; overflow: hidden; }
.philosophy:before { content: ''; width: 100%; height: 100%; background: url(../images/follow/deco01-right.png)no-repeat center; background-size: 60%; position: absolute; top: -120px; right: -280px; }
.philosophy h2 { margin-bottom: 20px; font-size: 32px; font-weight: bold; }
.philosophy p { font-size: 18px; line-height: 2; }
.philosophy .particles { opacity: 0.4; }

#container section.tel { margin-bottom: 80px; padding: 60px 80px; border: 1px solid #000; }
.tel .tit { margin-bottom: 10px; font-size: 32px; line-height: 1.4; }
.tel .sub { font-size: 18px; font-weight: bold; }

.contact-info { margin: 40px auto 110px; }
.contact-info .inner { width: 100%; max-width: 960px; margin: auto; }
.contact-info .info-title { display: block; position: relative; margin-bottom: 60px; }
.contact-info .info-title .jp { font-family: var(--gothic); font-weight: bold; }
.contact-info .inner .flex { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.contact-info .info-text { width: 70%; margin-bottom: 20px; padding-left: 0; }
.contact-info .info-text li { width: 70%; margin-bottom: 8px; padding: 12px 10px 10px 47px; text-indent: -15px; }
.contact-info .info-text li:first-of-type { width: 70%; }
.contact-info ul.btn { margin: 0!important; }
.contact-info ul.btn li a { background-position: top 29px right 20px; }

/* =========================
    sp
========================== */

@media (max-width: 768px) {
/* common
---------------------- */
#container #bread { margin: 0 auto; }
#container section {padding: 20vw 5vw;}
#container .learning li { padding-left: 3vw; font-size: 3.5vw; }
#container .learning li::before { width: 1.5vw; height: 1.5vw; top: 10px; left: 0; }

/* hero
---------------------- */
#container .follow-hero {padding: 15vw 5%;}
#container .follow-hero h1 { font-size: 5.4vw; }
#container .follow-hero p { font-size: 4vw; margin-top: 3.5vw; }

.intro, .learning, .message { display: block; gap: 40px; align-items: center; justify-content: space-between; position: relative; z-index: -1; }
.intro {width: 100%;padding: 27vw 5vw 0!important;background: none;}
.intro::before {content: '';width: 100%;height: 100%;background: url(../images/follow/deco01-left.png)no-repeat center;background-size: 100%;position: absolute;top: -253px;left: -10px;}
.intro img, .message img { width: 100%; max-width: 500px; margin-bottom: 20vw;}
.intro .text{ width: 100%; margin-bottom: 4vw; }
.intro h2 { margin-bottom: 8vw; font-size: 6vw; }
.intro h2::after {width: 80px;height: 120px;background-size: 40%;position: absolute;top: -26px;left: 60%;}
.intro .text { position: relative; }
.intro .text::after {width: 360px;height: 370px;background-size: 100%;position: absolute;top: 18px;right: -170px;}

#container section.theme {padding: 25vw 12vw 18vw;margin-top: 10vw;}
.theme h2 {margin-bottom: 4vw;color: #fff;font-size: 5.4vw;font-weight: bold;text-align: center;position: relative;}
.theme h2::before { width: 100%;height: 100%;background: url(../images/follow/theme-deco.png)no-repeat center;background-size: 40%;position: absolute;top: -80px;left: 50%;transform: translateX(-50%);}
.theme h2::after { width: 80px;height: 120px;background: url(../images/follow/finger-deco.png)no-repeat center;background-size: 40%;position: absolute;top: -96px;left: 67%;}
.theme p { text-align: left; }

#container .learning { width: 100%; margin-bottom: 0; padding: 15vw 5vw 0; border-bottom: 4px double; }
.learning h2 { padding: 10px 20px; color: #fff; font-size: 20px; font-weight: bold; text-align: center; background: #000; }
.learning div { width: 100%; margin-bottom: 10vw; }
.learning div img { width: 100%; margin-bottom: 10px; }

#container .quote {width: 100%;background: #fff7ea;padding: 24vw 5vw 20vw;font-size: 24px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;-webkit-flex-wrap: wrap;flex-wrap: wrap;position: relative;}
.quote::before {background-size: 52%;top: -80vw;left: -19%;}
.quote h2 { margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: left; position: relative; }
.quote h2::after {width: 100px;height: 120px;background-size: 40%;top: -10vw;left: 66%;}
.quote div { width: 100%; }
.quote p { margin-bottom: 4vw; font-size: 3.5vw; }
.quote img { width: 100%; }

.gallery { position: relative; margin-bottom: 0; }
.gallery .bx-wrapper { max-width: 100% !important; }
.gallery .line { display: none; }
.gallery .line:before,.gallery .line:after { content: ""; height: 1px; background: #000; display: block; flex-grow: 1; }

#container .message { width: 100%; padding: 20vw 5vw; }
.message div { width: 480px; }
.message div::after { background-size: 100%;position: absolute;top: -88px;right: 320px; }
.message::before {background-size: 52%;position: absolute;top: -8vw;left: -19vw;}
.message h2 { margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: left; position: relative; }
.message h2::after { background-size: 40%;position: absolute;top: -29px;left: 38%;}
.message p { width: 70%; font-size: 3.5vw; }

#container .close-up { width: 100%; display: block; padding: 20vw 5vw; }
.close-up div { width: 100%; }
.close-up div::after {background-size: 100%;position: absolute;top: 60vw;right: -74vw;}
.close-up::before {background-size: 52%;position: absolute;top: -112vw;left: -19vw;}
.close-up h2 { margin-bottom: 20px; font-size: 20px; font-weight: bold; text-align: left; }
.close-up h2::after {background-size: 40%;position: absolute;top: 0;left: 67%;}
.close-up p { width: 100%; margin-bottom: 10vw; font-size: 3.5vw; }

#container .voice{padding: 0vw 5vw 20vw; width: 100%;}
.voice .voice_box{margin-bottom: 0vw;}
.voice h2::after{width: 80px;height: 120px;background: url(../images/follow/finger-deco.png) no-repeat center;background-size: 40%;position: absolute;top: -20px;left: 63%;}
.voice h2::before{background: url(../images/follow/voice-deco.png) no-repeat top 8vw center;background-size: 34%;}
.voice .voice_box li{padding: 6vw 3vw; margin-bottom: 4vw;}
.voice .voice_box li .voice_title{ font-size: 4.3vw; margin-bottom: 4vw; padding: 1vw 2vw;}
.voice .voice_box li .voice_content{ font-size: 3.4vw;}

#container .philosophy { margin-bottom: 0; padding: 20vw 5vw 10vw; background: linear-gradient(to bottom, #fff7ea, #ffffff); text-align: center; position: relative; overflow: hidden; }
.philosophy:before {background-size: 100%;top: -200px;right: -40px;}
.philosophy h2 {margin-bottom: 4vw;font-size: 8vw;text-align: left;}
.philosophy p {font-size: 3.5vw;text-align: left;}
.philosophy .particles { opacity: 0.4; }

#container section.tel { width: 90%; margin: auto; padding: 8vw 5vw; }
.tel .tit { margin-bottom: 2vw; font-size: 5vw; }
.tel .sub { font-size: 4.8vw; }

.contact-info { padding: 15vw 10vw; margin: 15vw 0 0; }
.contact-info .inner { width: 100%; }
.contact-info .info-title { margin-bottom: 12vw; }
.contact-info .info-title .jp { font-size: 5.4vw; letter-spacing: 0.01rem; }
.contact-info .inner .flex { display: block; }
.contact-info .info-text { width: 100%; margin-bottom: 4vw;  }
.contact-info .info-text li { width: 100%; margin-bottom: 2vw; padding: 12px 10px 10px 47px; font-size: 3.8vw; text-indent: -15px; }
.contact-info .info-text li::before { text-indent: -5vw; }
.contact-info .info-text li:first-of-type { width: 100%;padding: 12px 10px 10px 47px; }
.contact-info ul.btn { margin: 0!important; }
.contact-info ul.btn li a { background-position: top 29px right 20px; }
}