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

/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body{}
body{ border:none;}
#wrap{width: 100%; font-size: 16px; font-weight: 500;}

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:#4D4D4D;
	line-height:1em;
  font-family:"游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea{height: auto;padding: 10px 0 10px;border-bottom: 3px solid #171c61;border-top: 20px solid #171c61;position: sticky;top: -20px;background-color: #fff;z-index: 999;}
#headerAreaInner{height: auto;position: relative;max-width: 950px;margin: 0 auto;}
#headerArea h1{position:initial;}
#headerArea #headerLink{position: static;width: 248px;top: 0;right: 0;padding: 0;}
#headerArea .logoTxt{font-size: 42px; vertical-align: middle;}
#headerArea .ttlTxt{font-size: 11px; color: #fff; font-weight: normal; position: absolute; top: -28px; line-height: 1.6; margin: 0; padding: 0;}
#headerArea .ttlSub{position: absolute; top: -28px;  right: 0; color: #fff; font-size: 11px; text-align: right; width: 400px; line-height: 1.6; margin: 0; padding: 0;}
#headerArea .moushikomiTopBtn a{display: block;background-color: #e85f2d;padding: 1em;font-size: 150%;border-radius: 10px;text-align: center;color: #fff;font-weight: bold;}
#headerArea .moushikomiTopBtn a:hover{text-decoration: none;}
#headerArea .moushikomiTopBtn .moushikomiEnd{display: block;background-color: #aaa;padding: 1em;font-size: 150%;border-radius: 10px;text-align: center;color: #fff;font-weight: bold;}

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

/*----------------------------------------------------------------------------
 ***                                                            mainViewArea
----------------------------------------------------------------------------*/
#mainViewArea{width: 100%;}
#mainViewArea .mainViewInner{width: 100%; max-width: 950px; margin: 0 auto;}
#mainViewArea #intro{margin-top: 20px;}
#mainViewArea #intro strong{color: #e85f2d;}
#mainViewArea #intro .introBox{position: relative; margin-bottom: 36px; border: #171c61 solid 10px;}
#mainViewArea #intro .introBox::after{content: ""; position: absolute; transform: translate(-50%,100%); bottom: 0; left: 50%; border-top: #171c61 solid 30px; border-right: transparent solid 30px; border-left: transparent solid 30px;}
#mainViewArea #intro .introBox .introUl{padding-left: 2em;}
#mainViewArea #intro .introBox .introUl li{background: url(../images/ico_img01.png) top left no-repeat; padding-left: 35px; font-size: 20px; line-height: 1.2;}
#mainViewArea #intro .introBox .introUl li:not(:last-of-type){margin-bottom: 30px;}
#mainViewArea #intro .introBox .introImg{margin: 0; padding: 0;}
#mainViewArea #intro .introTxt{width: fit-content; margin: 0 auto;}
#mainViewArea #intro .introTxt span{font-size: 32px; font-weight: 700; color: #171c61; background: linear-gradient(transparent 70%, #ffef2b 70%);}


/*----------------------------------------------------------------------------
 ***                                                            contentsArea
----------------------------------------------------------------------------*/
#contentsArea{margin-bottom: 100px;}
#contentsArea .section{width: 100%; margin: 60px auto; box-sizing: border-box;}
#contentsArea .sectionInner{width: 100%; max-width: 840px; margin: 0 auto;}
#contentsArea .secTtl{display: flex; font-size: 34px; font-weight: 700; color: #333; line-height: 1.1;}
#contentsArea .secTtl .num{font-size: 250%; padding-right: 18px;}
#contentsArea .secTtl strong{font-size: 140%;}
#contentsArea .secTxt{max-width: 804px; margin: 20px auto 30px; line-height: 1.4;}

/* セクション01 */
#contentsArea #sec01 strong{color: #db2873;}
#contentsArea #sec01 .secTtl .num{color: #db2873;}
#contentsArea #sec01 .secTxt{margin-bottom: 0;}

/* セクション02 */
#contentsArea #sec02 strong{color: #00a0ae;}
#contentsArea #sec02 .secTtl{align-items: center;}
#contentsArea #sec02 .secTtl .num{color: #00a0ae;}
#contentsArea #sec02 dl{position: relative;}
#contentsArea #sec02 .stepList{padding: 2em 3em 2.5em; border: 1px solid #00A0AE; border-radius: 15px;}
#contentsArea #sec02 .stepList .list_box{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2em;}
#contentsArea #sec02 .stepList .list_box li{width: 340px;}
#contentsArea #sec02 .stepList .ttl-dt{padding: 14px 0 0 65px; color: #00a0ae; font-size: 13px; line-height: 1.2;}
#contentsArea #sec02 .stepList .ttl-dt.step01{padding-top: 5px;}
#contentsArea #sec02 .stepList .ttl-dt:before{position: absolute; content: ""; top: 0; left: 0; display: block; width: 57px; height: 57px;}
#contentsArea #sec02 .stepList .ttl-dt.step01:before{background: url(../images/ico_business_stage01.png) no-repeat center/cover;}
#contentsArea #sec02 .stepList .ttl-dt.step02:before{background: url(../images/ico_business_stage02.png) no-repeat center/cover;}
#contentsArea #sec02 .stepList .ttl-dt.step03:before{background: url(../images/ico_business_stage03.png) no-repeat center/cover;}
#contentsArea #sec02 .stepList .ttl-dt.step04:before{background: url(../images/ico_business_stage04.png) no-repeat center/cover;}
#contentsArea #sec02 .stepList .txtBox{padding-left: 65px; font-size: 11px;}
#contentsArea #sec02 .stepList .imgBox{margin-top: 1em;}
#contentsArea #sec02 .aboutCourse{margin-top: 50px;}
#contentsArea #sec02 .aboutCourse h4{position: relative; width: fit-content; margin: 0 auto 1em; color: #00a0ae; font-size: 30px;}
#contentsArea #sec02 .aboutCourse h4::after{position: absolute; content: ""; top: 50%; left: -2.5em; width: 2em; height: 2px; background: #00a0ae;}
#contentsArea #sec02 .aboutCourse h4::before{position: absolute; content: ""; top: 50%; right: -2.5em; width: 2em; height: 2px; background: #00a0ae;}
#contentsArea #sec02 .aboutCourse .courseBox{max-width: 400px; width: 100%;}
#contentsArea #sec02 .aboutCourse .courseBox dt{color: #fff; font-size: 30px; line-height: 1; padding: 0.4em 0;}
#contentsArea #sec02 .aboutCourse .courseBox dd{position: relative; padding: 20px 30px;}
#contentsArea #sec02 .aboutCourse .courseBox dd::after{position: absolute; content: "＋"; transform: translateX(-50%); top: 47%; left: 50%; text-align: center; line-height: 1; font-size: 38px; font-weight: 700; padding: 0.1em; color: #fff; border-radius: 2em; border: #fff solid 2px;}
#contentsArea #sec02 .aboutCourse .courseBox.beginner dt{background: #00913a;}
#contentsArea #sec02 .aboutCourse .courseBox.beginner dd{background: #e7f7f0;}
#contentsArea #sec02 .aboutCourse .courseBox.beginner dd::after{background: #00913a;}
#contentsArea #sec02 .aboutCourse .courseBox.beginner .topBox p{background: #00913a;}
#contentsArea #sec02 .aboutCourse .courseBox.beginner .underBox p{border-bottom: #00913a dotted 2px;}
#contentsArea #sec02 .aboutCourse .courseBox.advanced dt{background: #d5373a;}
#contentsArea #sec02 .aboutCourse .courseBox.advanced dd{background: #fdf0f1;}
#contentsArea #sec02 .aboutCourse .courseBox.advanced dd::after{background: #d5373a;}
#contentsArea #sec02 .aboutCourse .courseBox.advanced .topBox p{background: #d5373a;}
#contentsArea #sec02 .aboutCourse .courseBox.advanced .underBox p{border-bottom: #d5373a dotted 2px;}
#contentsArea #sec02 .aboutCourse .courseBox .topBox p{display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; width: calc(95% / 2); padding: 15px; font-size: 64px; font-weight: 700;}
#contentsArea #sec02 .aboutCourse .courseBox .topBox p .white{color: #fff; font-size: 20px; line-height: 1; flex: 1; display: flex; justify-content: center; align-items: center;}
#contentsArea #sec02 .aboutCourse .courseBox .topBox p .yellow{color: #fff000; line-height: 1;}
#contentsArea #sec02 .aboutCourse .courseBox .topBox p .yellow .txtSizeSS{font-size: 50%;}
#contentsArea #sec02 .aboutCourse .courseBox .underBox{background: #fff; margin: 14px 0 0 0; padding: 14px 20px;}
#contentsArea #sec02 .aboutCourse .courseBox .underBox p{font-size: 32px; font-weight: 700; align-items: baseline; padding: 0 10px;}
#contentsArea #sec02 .aboutCourse .courseBox .underBox p:last-child{margin-top: 10px;}
#contentsArea #sec02 .aboutCourse .courseBox .underBox p .ttl{font-size: 18px; }
#contentsArea #sec02 .aboutCourse .courseBox .underBox p .orange{color: #e95513;}
#contentsArea #sec02 .aboutCourse .courseBox .underBox p .orange .txtSizeSS{color: #4D4D4D; font-size: 16px; padding-left: 2px;}

/* セクション03 */
#contentsArea #sec03{margin-top: 90px;}
#contentsArea #sec03 strong{color: #f29600;}
#contentsArea #sec03 .secTtl .num{color: #f29600;}

/* キャンペーン */
#contentsArea .campaignSec{background: #d9f5ff; padding: 30px 0 40px;}
#contentsArea .campaignSec strong{color: #db2873;}
#contentsArea .campaignSec .secTtl{display: flex; justify-content: center; align-items: center;}
#contentsArea .campaignSec .secTtl .hukidashi{position: relative; display: block; margin-right: 0.8em; padding: 0.3em 0.7em; font-size: 80%; color: #fff; background: #db2873; border-radius: 2em;}
#contentsArea .campaignSec .secTtl .hukidashi::after{content: ""; position: absolute; transform: translate(90%,-50%); top: 50%; right: 0; border-left: #db2873 solid 14px; border-top: transparent solid 7px; border-bottom: transparent solid 7px;}
#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{max-width: 950px; margin: 0 auto;}
#contentsArea #menuBox .menuList{display: flex;}
#contentsArea #menuBox .menuList li{width: calc(100% / 3); font-size: 36px; font-weight: 700;}
#contentsArea #menuBox .menuList li a{display: block; width: 100%; padding: 16px; color: #fff; box-sizing: border-box; text-decoration: none;}
#contentsArea #menuBox .menuList li a .num{display: block; margin-bottom: 20px;}
#contentsArea #menuBox .menuList li a .ttl{display: block; font-size: 65%; line-height: 1.3;}
#contentsArea #menuBox .menuList li a:hover{text-decoration: none; opacity: 0.7;}
#contentsArea #menuBox .menuList li:nth-child(1) a{background: #db2873; background-image: url(../images/ico_img02.png); background-repeat: no-repeat; background-position: top 12px right 16px;}
#contentsArea #menuBox .menuList li:nth-child(2) a{background: #00a0ae; background-image: url(../images/ico_img03.png); background-repeat: no-repeat; background-position: top 12px right 16px;}
#contentsArea #menuBox .menuList li:nth-child(3) a{background: #f29600; background-image: url(../images/ico_img04.png); background-repeat: no-repeat; background-position: top 12px right 16px;}

/* CTA */
#contentsArea #ctaSec .secTtl{display: block; color: #db2873; font-size: 26px; line-height: 1;}
#contentsArea #ctaSec .secTxt{margin: 10px auto 20px;}
#contentsArea .formBox{max-width: 840px; margin: 0 auto; padding: 10px 0 13px 0; background: #fff; border: 3px solid #00A2AF; border-radius: 10px;}

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