@charset "utf-8";

.title{display:table; width:100%; height:280px; background:url(/cmn/img/studio/title.jpg) no-repeat center top / cover;}
.title h1{display:table-cell; vertical-align:middle; font-size:56px; color:#fff; font-weight:900; font-style:italic;}
.title h1 span{display:block; margin-top:16px; font-size:18px; font-weight:bold; font-style:normal;}

main section .wrap{position:relative; width:1140px; margin:0 auto; text-align:left; z-index:1;}

/*first*/
#first{padding:80px 0 80px;}
#first .wrap h2{margin-bottom:60px; padding-bottom:24px; font-size:36px; font-weight:900; border-bottom:1px solid #333;}
#first .wrap h2:first-letter{color:#e72f29;}
#first .wrap figure{float:right; width:540px;}
#first .wrap dl{margin:-10px 600px 0 0;}
#first .wrap dt{position:relative; margin-bottom:68px; line-height:43px; font-size:24px; font-weight:bold;}
#first .wrap dt::before{content:''; position:absolute; bottom:-36px; left:0; width:40px; height:4px; background:#e72f29;}
#first .wrap dd{font-size:18px; line-height:32px; font-weight:500;}
#first .freettrial a{color:#e72f29;}
#first .freettrial a:hover {color:#e72f29; text-decoration:underline;}

/*tour*/
#tour{position:relative; padding:78px 0 80px; color:#fff; background:#e72f29;}
#tour::after{content:''; position:absolute; top:-20px; left:50%; width:611px; height:1025px; margin-left:280px; background:url(/cmn/img/trial/bg-tour.png) no-repeat left top / 100% auto;}
#tour .wrap{padding-bottom:294px;}
#tour .wrap::after{content:''; position:absolute; bottom:0; left:0; width:1140px; height:240px; background:url(/esg/cmn/img/trial/img-tour.png) no-repeat left top / 100% auto;}
#tour h2{width:1140px; margin:0 auto 52px; padding-bottom:25px; font-size:36px; font-weight:bold; border-bottom:1px solid #fff;}
#tour p{font-size:18px; line-height:32px;}

/*cancellation*/
#cancellation{padding:80px 0;}
#cancellation .wrap h2{margin-bottom:60px; padding-bottom:23px; font-size:36px; font-weight:700; border-bottom:1px solid #333;}
#cancellation .wrap h2:first-letter{color:#e72f29;}
#cancellation .wrap figure{float:left; width:420px;}
#cancellation .wrap ul{margin:0 0 16px 480px;}
#cancellation .wrap ul li{position:relative; margin-left:40px; font-weight:bold; font-size:20px; line-height:45px;}
#cancellation .wrap ul li::before{content:''; position:absolute; top:10px; left:-40px; width:30px; height:30px; background:url(/cmn/img/trial/icon.png) no-repeat left top / 100% auto;}
/* IE11 */_:-ms-lang(x)::-ms-backdrop,#cancellation .wrap ul li::before{top:2px}
#cancellation .wrap p{margin-left:480px; font-size:18px; line-height:32px; font-weight:500;}

/*experience*/
#experience{position:relative; padding:78px 0 80px; color:#fff; background:#e72f29;}
#experience::after{content:''; position:absolute; top:-20px; left:50%; width:610px; height:1025px; margin-left:-890px; background:url(/cmn/img/trial/bg-experience.png) no-repeat left top / 100% auto;}
#experience .wrap{padding-bottom:294px;}
#experience .wrap::after{content:''; position:absolute; bottom:0; left:0; width:1140px; height:240px; background:url(/cmn/img/trial/img-experience.png) no-repeat left top / 100% auto;}
#experience h2{width:1140px; margin:0 auto 52px; padding-bottom:25px; font-size:36px; font-weight:bold; border-bottom:1px solid #fff;}
#experience p{font-size:18px; line-height:32px;}

/*step*/
#step{position:relative; padding:78px 0 80px; background:#faeae9;}
#step h2{margin-bottom:90px; padding-bottom:25px; font-size:36px; font-weight:bold; border-bottom:1px solid #333;}
#step .wrap h2:first-letter{color:#e72f29;}
#step ol{display:flex; flex-wrap:wrap; margin:0 -30px;}
#step ol li{position:relative; width:calc(33.333333% - 60px); height:510px; list-style:none; margin:0 30px; padding:55px 30px 30px; background:#fff; border-radius:7px;}
#step ol li i{position:absolute; top:-30px; right:0; left:0; width:160px; margin:auto; font-size:26px; line-height:60px; color:#fff; font-weight:700; text-align:center; background:#e72f29; border-radius:7px;}
/* IE11 */_:-ms-lang(x)::-ms-backdrop,#step ol li i{padding-top:10px;line-height:54px}
#step ol li dt{position:relative; margin-bottom:22px; padding-bottom:233px; text-align:center; font-size:22px; font-weight:bold; color:#0e0509;}
#step ol li dt::after{content:''; position:absolute; left:0; bottom:0; width:280px; height:210px; background:url(/cmn/img/trial/img-step01.png) no-repeat left top / 100% auto;}
#step ol li:nth-child(2) dt::after{background-image:url(/cmn/img/trial/img-step02.png);}
#step ol li:nth-child(3) dt::after{background-image:url(/cmn/img/trial/img-step03.png);}
#step ol li dd{font-size:16px; line-height:28px; color:#000; font-weight:500;}
#step ol li dd a{color:#e72f29;}

/*attention*/
#attention{padding:78px 0 94px; background:#fff;}
#attention h2{margin-bottom:48px; padding-bottom:25px; font-size:36px; font-weight:bold; border-bottom:1px solid #333;}
#attention .wrap h2:first-letter{color:#e72f29;}
#attention ol{margin-bottom:14px;}
#attention ol li{margin-left:18px; font-size:18px; line-height:40px; font-weight:500;}
#attention ul li{position:relative; margin-left:20px; font-size:16px; line-height:28px; font-weight:500;}
#attention ul li::before{content:''; position:absolute; top:11px; left:-20px; width:10px; height:10px; border-radius:50%; background:#555;}

/*group-lesson*/
#group-lesson{padding:80px 0 80px;}
#group-lesson .wrap h2{margin-bottom:60px; padding-bottom:24px; font-size:36px; font-weight:900; border-bottom:1px solid #333;}
#group-lesson .wrap h2:first-letter{color:#e72f29;}
#group-lesson .wrap figure{float:left; width:540px;}
#group-lesson .wrap dl{margin-left:600px;}
#group-lesson .wrap dt{position:relative; margin-bottom:68px; line-height:43px; font-size:24px; font-weight:bold;}
#group-lesson .wrap dt::before{content:''; position:absolute; bottom:-36px; left:0; width:40px; height:4px; background:#e72f29;}
#group-lesson .wrap dd{font-size:18px; line-height:32px; font-weight:500;}
#group-lesson .freettrial a{color:#e72f29;}
#group-lesson .freettrial a:hover {color:#e72f29; text-decoration:underline;}
#group-lesson .announce {color:#e72f29;}


/**

    SP

**********************************************************************/

@media screen and (max-width:750px){

.title{height:33.333vw;}
.title h1{font-size:8vw;}
.title h1 span{margin-top:2.667vw; font-size:3.2vw;}

main section .wrap{width:100%;}

/*first*/
#first{padding:9.333vw 5.333vw;}
#first .wrap h2{margin-bottom:5.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#first .wrap figure{float:none; width:72vw; margin:0 auto 5.333vw;}
#first .wrap dl{margin:0;}
#first .wrap dt{margin-bottom:8vw; font-size:4vw; line-height:5.733vw;}
#first .wrap dt::before{bottom:-4vw; width:5.333vw; height:0.533vw;}
#first .wrap dd{font-size:3.2vw; line-height:5.733vw;}

/*tour*/
#tour{padding:9.333vw 5.333vw;}
#tour::after{top:-2.667vw; left:34.667vw; width:81.467vw; height:136.667vw; margin-left:0;}
#tour .wrap{padding-bottom:24vw;}
#tour .wrap::after{width:100%; height:21.067vw;}
#tour h2{width:auto; margin-bottom:5.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#tour p{font-size:3.2vw; line-height:5.733vw;}

/*cancellation*/
#cancellation{padding:9.333vw 5.333vw;}
#cancellation .wrap h2{width:auto; margin-bottom:5.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#cancellation .wrap figure{float:none; width:72vw; margin:0 auto 5.333vw;}
#cancellation .wrap ul{margin:0 0 5.333vw 0;}
#cancellation .wrap ul li{margin-left:5.333vw; font-size:3.733vw; line-height:5.733vw;}
#cancellation .wrap ul li::before{top:1.067vw; left:-5.333vw; width:4vw; height:4vw; background-size:98% auto;}
#cancellation .wrap ul li + li{margin-top:2vw;}
#cancellation .wrap p{margin-left:0; font-size:3.2vw; line-height:5.733vw;}

/*experience*/
#experience{padding:9.333vw 5.333vw;}
#experience::after{top:-2.667vw; left:0; width:81.333vw; height:136.667vw; margin-left:0;}
#experience .wrap{padding-bottom:24vw;}
#experience .wrap::after{width:100%; height:21.067vw;}
#experience h2{width:auto; margin-bottom:5.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#experience p{font-size:3.2vw; line-height:5.733vw;}

/*step*/
#step{padding:9.333vw 5.333vw;}
#step h2{margin-bottom:9.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#step ol{margin:0;}
#step ol li{width:100%; height:auto; margin:0; padding:6.667vw 5.333vw 5.333vw; border-radius:0.933vw;}
#step ol li + li{margin-top:8vw;}
#step ol li i{top:-4vw; left:-4vw; right:auto; width:20vw; height:20vw; font-size:3.733vw; line-height:20vw; border-radius:50%;}
#step ol li dt{margin-bottom:5.333vw; padding-bottom:40vw; font-size:3.733vw;}
#step ol li dt::after{right:0; left:0; width:46.667vw; height:35.067vw; margin:auto;}
#step ol li dd{font-size:3.2vw; line-height:5.733vw;}

/*attention*/
#attention{padding:9.333vw 5.333vw;}
#attention h2{margin-bottom:5.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#attention ol{margin-bottom:4vw;}
#attention ol li{margin-left:2.667vw; font-size:3.2vw; line-height:5.733vw;}
#attention ol li + li{margin-top:2vw;}
#attention ul li{margin-left:2.667vw; font-size:3.2vw; line-height:5.733vw;}
#attention ul li::before{top:2.4vw; left:-2.667vw; width:1.333vw; height:1.333vw;}
	
/*group-lesson*/
#group-lesson{padding:9.333vw 5.333vw;}
#group-lesson .wrap h2{margin-bottom:5.333vw; padding-bottom:3.333vw; line-height:6.933vw; font-size:5.333vw;}
#group-lesson .wrap figure{float:none; width:72vw; margin:0 auto 5.333vw;}
#group-lesson .wrap dl{margin:0;}
#group-lesson .wrap dt{margin-bottom:8vw; font-size:4vw; line-height:5.733vw;}
#group-lesson .wrap dt::before{bottom:-4vw; width:5.333vw; height:0.533vw;}
#group-lesson .wrap dd{font-size:3.2vw; line-height:5.733vw;}

}