@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------
 ***                                                                		共通
----------------------------------------------------------------------------*/
body{border:none;}
body *{box-sizing: border-box;}
body,h1,h2,h3,h4,h5,h6,td,th,div,p,input,textarea,pre,ul,ol,li,address,header,footer,nav,article,section,aside{color:#333; line-height:1;}
#wrap{width: 100%; font-size: 20px; font-weight: 500;}
#wrap *{font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; margin: 0; padding: 0;}
#wrap .txtRed{color: #d11921;}
#wrap .bgGray{background-color: #f5f5f5;}

:root {
  --series01: #305581;
  --series02: #767d3d;
  --series03: #00a2c9;
  --series04: #b82329;
  --series05: #5e578c;
}


/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
#headerArea{position: sticky; top: -23px; border-top: 23px solid #00a1bf; height: auto; margin: 0; padding: 0; background: #fff; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); z-index: 9999;}
#headerAreaInner{position: relative; max-width: 900px; margin: 0 auto; padding: 10px 0;}
#headerArea #headerTitle h1{position:initial;}
#headerArea #headerTitle .ttlTxt{position: absolute; top: -23px; left:  0; margin: 0; padding: 0; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.6;}
#headerArea #headerTitle .ttlSub{position: absolute; top: -23px; right: 0; margin: 0; padding: 0; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.6; text-align: right; width: 400px;}
#headerArea #headerLink{position: static; width: fit-content;}
#headerArea #headerLink .trialBtn a{position: relative; display: flex; align-items: center; justify-content: center; width: 12em; padding: 0.6em 0.5em 0.7em 0; font-size: 21px; color: #fff; border-radius: 5px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); background-color: #ee8822; text-decoration: none;}
#headerArea #headerLink .trialBtn a::after{content: ""; position: absolute; transform: translateY(-50%); top: 50%; right: 1em; border-left: 0.7em solid #fff; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent;}
#headerArea #headerLink .trialBtn a:hover{text-decoration: none;}


/*----------------------------------------------------------------------------
 ***                                                            mainViewArea
----------------------------------------------------------------------------*/
#mainViewArea{width: 100%; height: 280px; display: flex; align-items: center; justify-content: center; background: url(../images/bg_main.jpg) center no-repeat;}
#mainViewAreaInner{max-width: 900px; width: 100%; margin: 0 auto;}
#mainViewAreaInner .pageTtl{font-size: 74px; position: relative; width: fit-content; margin: 0 auto;}
#mainViewAreaInner .pageTtl .new{position: absolute; top: -0.5em; left: 0;}
#mainViewAreaInner .pageTtl .new img{filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));}
#mainViewAreaInner .pageTtl .subTxt {font-size:  45%; font-weight: 600; display: block; width: fit-content; margin: 0 auto; padding: 0.2em 0.4em 0.3em; color: #333; background-color: #fff; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);}
#mainViewAreaInner .pageTtl .mainTxt{font-size: 100%; font-weight: 800; display: block; width: fit-content; margin: 0.1em auto 0; color: #fff; letter-spacing: 0.02em; text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);}


/*----------------------------------------------------------------------------
***                                                            breadcrumbArea
----------------------------------------------------------------------------*/
#breadcrumbArea{width: 100%; margin: 0 auto;}
#breadcrumbArea ul{display: flex; max-width: 900px; width: 100%; margin: 0 auto; padding: 1em 0;}
#breadcrumbArea li{font-size:12px;}
#breadcrumbArea li a{display:block; background:url(/common_images/icon_list03.gif) right 50% no-repeat; padding-right:20px;}


/*----------------------------------------------------------------------------
 ***                                                            contentsArea
----------------------------------------------------------------------------*/
#contentsArea a{color: initial; text-decoration: none;}
#contentsArea a:hover{color: initial; text-decoration: none;}
#contentsArea .sectionInner{max-width: 900px; width: 100%; margin: 0 auto;}

/* 体験レッスン・資料請求 */
#contentsArea .btnBox{display: flex; justify-content: center; gap: 1em; margin: 30px auto;}
#contentsArea .btnBox .btn a{position: relative; display: flex; align-items: center; justify-content: center; width: 12em; padding: 0.5em 0.5em 0.7em 0; font-size: 21px; color: #fff; border-radius: 5px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); text-decoration: none;}
#contentsArea .btnBox .btn a::after{content: ""; position: absolute; transform: translateY(-50%); top: 50%; right: 1em; border-left: 0.7em solid #fff; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent;}
#contentsArea .btnBox .btn a:hover{text-decoration: none;}
#contentsArea .btnBox .btn.trial a{background-color: #ee8822;}
#contentsArea .btnBox .btn.request a{background-color: #4eced9;}

/* leadSec */
#contentsArea #leadSec .sectionInner{padding: 30px 0 40px;}
#contentsArea #leadSec .mainTxt{width: fit-content; margin: 0 auto; font-size: 36px; font-weight: 700; line-height: 1.5; background: linear-gradient(transparent 50%, #ffff66 0);}
#contentsArea #leadSec .subTxt {text-align: center; font-size: 24px; font-weight: 600; line-height: 1.5;}
#contentsArea #leadSec .textList{display: flex; justify-content: center; gap: 2em; margin: 2em auto;}
#contentsArea #leadSec .textList .textImg a{display: flex; flex-direction: column; align-items: center; gap: 0.5em; font-weight: 600;}
#contentsArea #leadSec .textList .textImg a img{filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));}
#contentsArea #leadSec .textList .textImg:nth-child(1) a{color: var(--series01);}
#contentsArea #leadSec .textList .textImg:nth-child(2) a{color: var(--series02);}
#contentsArea #leadSec .textList .textImg:nth-child(3) a{color: var(--series03);}
#contentsArea #leadSec .textList .textImg:nth-child(4) a{color: var(--series04);}
#contentsArea #leadSec .textList .textImg:nth-child(5) a{color: var(--series05);}

/* series共通 */
#contentsArea .series{margin: 80px auto;}
#contentsArea .series .sectionInner{display: flex; align-items: center; justify-content: space-between;}
#contentsArea .series .ttl{position: relative; display: flex; gap: 0.2em; align-items: end; padding-left: 1.4em; font-size: 38px; font-weight: 700;}
#contentsArea .series .ttl .en{font-size: 70%;}
#contentsArea .series .ttl::before{content: ""; position: absolute; transform: translateY(-50%); top: 50%; left: 0; width: 1.1em; height: 1.1em;}
#contentsArea .series .txt{font-weight: 600; margin: 1em 0 0.8em;}
#contentsArea .series .list li{line-height: 1.5;}

/* series個別 */
#contentsArea #series01 .ttl{color: var(--series01);}
#contentsArea #series02 .ttl{color: var(--series02);}
#contentsArea #series03 .ttl{color: var(--series03);}
#contentsArea #series04 .ttl{color: var(--series04);}
#contentsArea #series05 .ttl{color: var(--series05);}
#contentsArea #series01 .ttl::before{background: url(../images/icon_series01.png) center / contain no-repeat;}
#contentsArea #series02 .ttl::before{background: url(../images/icon_series02.png) center / contain no-repeat;}
#contentsArea #series03 .ttl::before{background: url(../images/icon_series03.png) center / contain no-repeat;}
#contentsArea #series04 .ttl::before{background: url(../images/icon_series04.png) center / contain no-repeat;}
#contentsArea #series05 .ttl::before{background: url(../images/icon_series05.png) center / contain no-repeat;}

/* lastSec */
#contentsArea #lastSec .sectionInner{padding: 50px 0;}
#contentsArea #lastSec .ttl{position: relative; width: fit-content; margin: 0 auto; color: #00a1bf; font-size: 46px; font-weight: 700; line-height: 1.5; font-feature-settings: "palt"; letter-spacing: 0.1em; background: linear-gradient(transparent 50%, #ffff66 0);}
#contentsArea #lastSec .ttl::before{content: ""; position: absolute; transform: translateX(-100%); bottom: -26%;  left: -6%; background: url(../images/deco_usagi.png) center / contain no-repeat; max-width: 68px; width: 100%; height: auto; aspect-ratio: 68 / 125;}
#contentsArea #lastSec .ttl::after {content: ""; position: absolute; transform: translateX( 100%); bottom: -26%; right: -5%; background: url(../images/deco_panda.png) center / contain no-repeat; max-width: 77px; width: 100%; height: auto; aspect-ratio: 77 / 102;}
#contentsArea #lastSec .txt{text-align: center; font-size: 24px; font-weight: 700; line-height: 1.6; margin: 30px auto;}
#contentsArea #lastSec .imgBox{display: flex;}


/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{}
#footerAreaInner{max-width: 950px;margin: 0 auto;}
#totp{position: fixed;bottom: 5px;right: 10px;z-index:999;}