/* CSS Document */ @charset "utf-8"; /*---------------------------------------------------------------------------- *** Container ----------------------------------------------------------------------------*/ body {font-size: 18px;} #wrap {} .section{} .sectionInner{max-width: 1200px;margin: auto;width: 90%;padding: 80px 0;} h3{font-size: 45px;font-weight: bold;margin-bottom: 0.5em;line-height: 1.5;} h4{font-size: 40px;font-weight: bold;margin-bottom: 0.5em;line-height: 1.5;} a:hover{opacity: 0.8;} /*---------------------------------------------------------------------------- *** Header ----------------------------------------------------------------------------*/ #headerArea {} #headerAreaInner {padding: 0;} #headerAreaInner .leftBox .logo{gap: 1em;} #headerAreaInner .leftBox .logo a{display: block;} #headerAreaInner .leftBox .logo img{width: auto;display: block;} #headerAreaInner .leftBox .logo .logoTxt{font-size: 36px; vertical-align: middle;} #headerAreaInner .rightBox .moushikomiBtn{color: #fff;} /*---------------------------------------------------------------------------- *** contentsArea ----------------------------------------------------------------------------*/ #mainViewArea {background-image: url("../images/img_main_fv01.jpg"), url("../images/img_main_fv02.jpg");background-repeat: no-repeat, no-repeat;background-size: auto 100%;background-position: left top, right top;width: 100%; border-bottom: 5px solid #000;} #mainViewAreaInner {margin: 0 auto;position: relative;padding: 0em 0 0;} #mainViewAreaInner .mainTtl {position: relative;width: 35%;max-width: 750px;margin: 0em auto 0;text-align: center;} #mainViewAreaInner .mainTtl span.date{position: absolute;right: -1em;top: 2em;width: 25%;} #mainViewAreaInner .logobox{background: #ff6600;z-index: -1;padding: 0.5em 0em; width: 100%;text-align: center;font-size: 1.5vw;display: flex;justify-content: center;align-items: center;color: #fff;font-weight: bold;} #mainViewAreaInner .logobox .novalogo{width: 10%;margin-top: -0.2em;} #mainViewAreaInner .logobox .nlslogo{width: 12%;margin: -0.1em 0 0 0.3em;} #mainViewAreaInner .subTtl{font-size:33px;font-weight: bold;color: #ff6600;background: #ffffffbd;padding: 0.2em;} #mainViewAreaInner .txt{font-size:28px;font-weight: bold;line-height: 1.2; background: #ffffffbd;padding: 0.2em;} #mainViewAreaInner .txt span.ss_font{font-size: 75%; } #mainViewAreaInner .txt span.underline{font-size: 125%;background:linear-gradient(transparent 60% , #a2edeb 0%); } #mainViewAreaInner .btn{margin: 0.5em 0 1em;} .btn{filter: drop-shadow(0px 0px 5px #666);} /*---------------------------------------------------------------------------- *** nlsSec ----------------------------------------------------------------------------*/ #nlsSec h3{font-size:26px;text-align: center; } #nlsSec .flex{border-bottom: 1px solid #e38ea6;padding-bottom: 3em;} #nlsSec .TxtBox{margin-left: 1em;} #nlsSec .TxtBox .pinkTxt{color: #e38ea6;font-weight: bold;font-size:25px; } #nlsSec .TxtBox .nlslink{font-size:16px;} #nlsSec .TxtBox .nlslink a{color: #000;position:relative;border-bottom: 1px solid #000;padding: 0 1em 0 0;display: inline-block;} #nlsSec .TxtBox .nlslink a::after{content: "";display: block;width: 0.5em;height: 0.5em;position: absolute;top: calc(50% - 0.35em);right: 0em;border-top: 1px solid #000;border-right: 1px solid #000;transform: rotate(45deg);} /*---------------------------------------------------------------------------- *** fesSec ----------------------------------------------------------------------------*/ #fesSec{background-image:url("../images/img_bg02.png"),linear-gradient(180deg,#fff 0%,#f9e0cf 100%);background-repeat: no-repeat;background-position: top 5% center;} #fesSec .TtlBox{max-width:710px;margin: auto;} #fesSec .TtlBox .order01 .txt{font-size: 32px;font-weight: bold;} #fesSec .TtlBox .order01 .txt .orangeTxt{color: #ff6600;font-size: 125%;} #fesSec .TtlBox .order01 .txt .date{font-size: 125%;background: url("../images/img_deco01.png")no-repeat;background-size: 100% auto;background-position: bottom center;} #fesSec .TtlBox .order01 .txt .ss_font{font-size: 60%;} #fesSec .InnerlinkBox ul{max-width: 650px;margin: auto;} #fesSec .InnerlinkBox ul li{border-bottom: 2px solid #ff6600;width: 25%;padding-bottom: 0.2em;position: relative;font-size:25px;text-align: center;} #fesSec .InnerlinkBox ul li::before{content: "";display: block;position: absolute;left: 0;right: 0;bottom: -1.5em;width: 0;height: 0;border-style: solid;border-right: 18px solid transparent;border-left: 18px solid transparent;border-top: 20px solid #ff6600;border-bottom: 0;margin: auto;} #fesSec .InnerlinkBox ul li a{color: #000;} #fesSec #fesBox{margin: 4em 0 2em;background: #ffffffe8;padding: 2em 4em;} #fesSec #fesBox h4{text-align: center;} #fesSec #fesBox h4 span{background: url("../images/img_deco03.png")no-repeat;display: block;font-size: 65%;color: #fff;height: 70px;padding-top: 10px;background-position: center;font-weight: bold;} #fesSec #fesBox .charmBox{margin-top: 2em;} #fesSec #fesBox .charmBox .blueTxt{padding-left: 0px;position: relative;color: #2cb4ad;font-weight: bold;border-bottom: 1px solid #2cb4ad;width: 100%;font-size: 28px;} #fesSec #fesBox .charmBox .blueTxt::before{content: "■";color: #2cb4ad;font-size: 22px;} #fesSec #fesBox .charm01 .lessonBox{margin-top: 2em;} #fesSec #fesBox .charm01 .lessonBox .lessonTtlBox .lessonTtl span{background: url("../images/img_deco04.png")no-repeat;display: block;font-size: 24px;color: #ff6600;height: 70px;padding-top: 18px;background-position: center;font-weight: bold;} #fesSec #fesBox .charm01 .lessonBox .lessonTtlBox .aten{color: #808080;font-size: 15px;} #fesSec #fesBox .charm01 .lessonBox .lessonPik{display: flex;justify-content: space-around;flex-wrap: nowrap;} #fesSec #fesBox .charm01 .lessonBox .lessonPik.pcNone{display: none!important;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson{filter: drop-shadow(0px 0px 7px #ccc);opacity: 0;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson01{margin-top: -3em;position: relative;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson01::before{content: "";display: block;background: url("../images/img_deco06.png")no-repeat;width: 77px;height: 77px;position: absolute;right: -1em;top: 4em;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson02{margin-top: 2em;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson03{margin-top: -1em;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson04{margin-top: -2em;margin-left: 7em;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson05{margin-top: -3em;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson01.is-animated{animation: slideIn-bottom 1.5s cubic-bezier(0.15, 0.61, 0.71, 0.94) 1 forwards;animation-delay: 1.0s;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson02.is-animated{animation: slideIn-bottom 1.5s cubic-bezier(0.15, 0.61, 0.71, 0.94) 1 forwards;animation-delay: 1.2s;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson03.is-animated{animation: slideIn-bottom 1.5s cubic-bezier(0.15, 0.61, 0.71, 0.94) 1 forwards;animation-delay: 1.0s;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson04.is-animated{animation: slideIn-bottom 1.5s cubic-bezier(0.15, 0.61, 0.71, 0.94) 1 forwards;animation-delay: 1.2s;} #fesSec #fesBox .charm01 .lessonBox .lessonPik .lesson.lesson05.is-animated{animation: slideIn-bottom 1.5s cubic-bezier(0.15, 0.61, 0.71, 0.94) 1 forwards;animation-delay: 1.4s;} @keyframes slideIn-bottom { 0% { transform: translateY(100px); opacity: 0; } 100% { transform: translateY(0); } 60%,100% { opacity: 1; } } #fesSec #fesBox .charm02 .txtBox{width: 48%;} #fesSec #fesBox .charm03 .txtBox{width: 48%;} #fesSec .btnBox .btnTxt{font-size:35px;font-weight: bold;} #fesSec .nls_loop {width: 100%;overflow: hidden;white-space: nowrap;} #fesSec .loopimgBox {display: inline-flex;animation: loop-scroll 30s linear infinite; } #fesSec .loopimg {width: 2779px;height: auto; padding: 0 1em;} @keyframes loop-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-2779px); } } /*---------------------------------------------------------------------------- *** faqSec ----------------------------------------------------------------------------*/ #faqSec{background: url("../images/img_bg01.jpg")no-repeat;background-size: cover;background-position: top left;} #faqSec .faqBox{max-width:1000px;width: 90%;margin: auto;} #faqSec .faqBox dl{margin:1em 0em;background: #fff;border: 3px solid #0cbfbf;border-radius: 10px;padding: 1em 1.5em;} #faqSec .faqBox dl dt{font-size:25px;font-weight: bold;color: #0cbfbf;margin-bottom: 0.2em;} /*---------------------------------------------------------------------------- *** faqSec ----------------------------------------------------------------------------*/ #priceSec{background:linear-gradient(180deg,#fff 0%,#f9e0cf 100%); } #priceSec .sectionInner{padding:80px 0 150px; } #priceSec h3 span{font-size: 75%;display: block;} #priceSec table{max-width:650px;margin: auto;width: 90%;background: #fff;} #priceSec table th{font-weight: bold;font-size:20px;text-align: center;border:2px solid #ff6600;} #priceSec table td{font-size:30px;text-align: center;padding: 0.5em 0;border:2px solid #ff6600; line-height: 1;vertical-align: middle;font-weight: 600} #priceSec table .price{width: 70%;} #priceSec table .price .tax{font-size: 65%;} #priceSec table .price .novaprice{font-size: 58%;} #priceSec .price_fuki span{background:#ff6600;font-size: 20px;color: #fff;font-weight: bold;border-radius: 50vw;padding: 0.5em 1.5em;display: inline-block;margin-top: 0.5em;position: relative;} #priceSec .price_fuki span::before{content: "";display: block;position: absolute;left: 0;right: 0;bottom: 2.5em;width: 0;height: 0;border-style: solid;border-right: 15px solid transparent;border-left: 15px solid transparent;border-bottom: 25px solid #ff6600;border-top: 0;margin: auto;} #priceSec .price_lessen{font-size:30px;font-weight: bold;margin-top: 0.5em;line-height: 1.5;} #priceSec .price_lessen span{background:linear-gradient(transparent 60% , #a2edeb 0%); } /*---------------------------------------------------------------------------- *** lastSec ----------------------------------------------------------------------------*/ #lastSec{background: #0cbfbf;position: relative;} #lastSec .sectionInner{padding: 80px 0 40px;} #lastSec .feslogo{position: absolute;left: 0;right: 0;top: -7em;} #lastSec .lastTxt{font-size:40px;color: #fff;font-weight: bold;line-height: 1.5;margin: 1.5em 0 0.5em;} #footerArea{background: #000;} #footerArea .sectionInner{margin: 0;} #footerArea p{color: #fff;margin: auto;} #footerArea #footerAreaInner{padding: 0;} @media (min-width:768px) and (max-width:1300px) { #mainViewArea{background-position: calc(50% - 40vw) center, calc(50% + 40vw) center;} #mainViewAreaInner .subTtl{font-size:26px; } #mainViewAreaInner .txt{font-size: 26px;} #fesSec #fesBox .charm02 .txtBox{width: 100%;} #fesSec #fesBox .charm02 .imgBox{margin: auto;} }