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


/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body{border:none;}
#wrap{width: 100%;}

/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea{height:auto; padding-bottom:0.2em;border-top: solid 3.5em #171c61;top: -3.5em;padding: 2% 5% 0.2em;}
#headerAreaLogo{display: flex;}

#headerArea #headerLink{padding: 0;margin: 0;width: auto;}

#headerAreaInner .leftBox{width: 55%;}
#headerAreaInner .leftBox .logo{margin-bottom: 3%;}
#headerAreaInner .leftBox .logo img{width: 45%;}
#headerAreaInner .leftBox .logo .logoTxt{font-size: 80%;}
#headerAreaInner .rightBox{width: 45%}
#headerAreaInner .rightBox p{width: 100%;font-size: 100%;}

#headerArea .ttlTxt{font-size: 11px; color: #fff; font-weight: normal; position: absolute; top: -3.6em; left: 0; line-height: 1.6; margin: 0; padding: 0; width: 100%; text-align: center; z-index: 1;}
#headerArea .ttlSub{position: absolute; top: -2.5em; right: 0; color: #fff; font-size: 11px; width: 100%; line-height: 1.6; margin: 0; padding: 0; text-align: center;}
#headerArea h1 a img{width: 100%; height: auto;}
#headerArea .moushikomiTopBtn a{padding: 0.5em 1em; font-size: 116%; text-decoration: none; margin-bottom: 0.6em;}
#headerArea .moushikomiTopBtn .moushikomiEnd{padding: 0.5em; font-size: 120%; text-decoration: none; margin: 0;}

/*----------------------------------------------------------------------------
***                                                            breadcrumbArea
----------------------------------------------------------------------------*/
#breadcrumbArea{width: 94%; margin: 0.5em auto;}
#breadcrumbArea li{float:left; font-size:10px; }
#breadcrumbArea li a{display:block; background:url(../common_images/icon_list03.gif) right 50% no-repeat; padding-right:25px;}

/*----------------------------------------------------------------------------
 ***                                                            mainViewArea
----------------------------------------------------------------------------*/
#mainViewArea{width: 94%; margin: 0 auto;}
#mainViewArea #intro .introBox{flex-direction: column; border: #171c61 solid 5px;}
#mainViewArea #intro .introBox .introUl{padding: 1em 1.5em;}
#mainViewArea #intro .introBox .introUl li{font-size: 3.5vw;}
#mainViewArea #intro .introBox .introUl li:not(:last-of-type){margin-bottom: 1em;}
#mainViewArea #intro .introTxt{text-align: center;}
#mainViewArea #intro .introTxt span{font-size: 6vw; line-height: 1.4;}

/*----------------------------------------------------------------------------
 ***                                                            contentsArea
----------------------------------------------------------------------------*/
#contentsArea{margin-bottom: 50px;}
#contentsArea .section{margin: 40px auto;}
#contentsArea .sectionInner{width: 94%;}
#contentsArea .secTtl{font-size: 4.4vw; align-items: center;}
#contentsArea .secTtl .num{font-size: 260%; padding-right: 0.2em;}
#contentsArea .secTtl strong{font-size: 140%;}
#contentsArea .secTxt{max-width: 96%;}

/* セクション02 */
#contentsArea #sec02 .stepList{width: fit-content; max-width: 94%; margin: 0 auto; padding: 20px;}
#contentsArea #sec02 .stepList .ttl-dt{padding: 0 0 0 12vw;}
#contentsArea #sec02 .stepList .ttl-dt:before{width: 10vw; max-width: 57px; height: 10vw; max-width: 57px;}
#contentsArea #sec02 .stepList .ttl-dt.step01{padding-top: 0;}
#contentsArea #sec02 .stepList .txtBox{padding: 0 0 0 12vw;}
#contentsArea #sec02 .stepList .list_box{flex-direction: column;}
#contentsArea #sec02 .stepList .list_box li{width: 100%; max-width: 340px;}
#contentsArea #sec02 .aboutCourse h4{font-size: 7vw;}
#contentsArea #sec02 .aboutCourse .courseList{flex-direction: column; gap: 2em;}
#contentsArea #sec02 .aboutCourse .courseBox p{margin: 0;}
#contentsArea #sec02 .aboutCourse .courseBox dd::after{top: 43%;}
#contentsArea #sec02 .aboutCourse .courseBox .topBox p{font-size: 15vw;}
#contentsArea #sec02 .aboutCourse .courseBox .topBox p .white{font-size: 4.5vw;}
#contentsArea #sec02 .aboutCourse .courseBox .underBox p{font-size: 8vw;}
#contentsArea #sec02 .aboutCourse .courseBox .underBox p .ttl{font-size: 4.5vw;}

/* セクション03 */
#contentsArea #sec03{margin-top: 60px;}

/* キャンペーン */
#contentsArea .campaignSec{padding: 20px 0;}
#contentsArea .campaignSec .secTtl .hukidashi{padding: 0.4em 0.7em 0.2em;}
#contentsArea .campaignSec .secTtl .hukidashi::after{border-left: #db2873 solid 0.6em; border-top: transparent solid 0.35em; border-bottom: transparent solid 0.35em;}
#contentsArea .campaignSec .secTxt{margin: 10px auto 20px;}
#contentsArea .campaignSec .bnrImg img{box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}
/* キャンペーン（矢印つき） */
#contentsArea .campaignSec.arrow{position: relative; margin-bottom: 70px;}
#contentsArea .campaignSec.arrow::after{content: ""; position: absolute; transform: translate(-50%,100%); bottom: 0; left: 50%; border-top: #d9f5ff solid 50px; border-right: transparent solid 50px; border-left: transparent solid 50px;}

/* メニュー */
#contentsArea #menuBox .menuList{flex-direction: column;}
#contentsArea #menuBox .menuList li{width: 100%; font-size: 40px;}
#contentsArea #menuBox .menuList li a .num{display: inline-block; margin-bottom: 0; margin-right: 0.3em;}
#contentsArea #menuBox .menuList li a .ttl{display: inline-block; font-size: 40%; line-height: 1.3;}
#contentsArea #menuBox .menuList li:nth-child(1) a{background-position: center right 16px;}
#contentsArea #menuBox .menuList li:nth-child(2) a{background-position: center right 16px;}
#contentsArea #menuBox .menuList li:nth-child(3) a{background-position: center right 16px;}

/* CTA */
#contentsArea .formBox{padding: 10px;}