/* PC TOP */ .site-content { padding-left: 250px; } .mainv { position: relative; .mainvImg { img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } } .catchcopy { position: absolute; top: 34%; left: 60px; .imgBox { width: 400px; height: 133px; margin-bottom: 40px; } } .mainvBtn { .btn-bgwhite { padding: 0 50px 0 26px; font-weight: $fwB; letter-spacing: 1px; } } } .top { &Sec { &_info { padding-top: 40px; margin-top: 0; h2 { text-align: left; font-size: 16px; &:before { content: none; } &:after { right: -10%; } } p { min-width: 670px; margin-right: 20px; } li { display: flex; justify-content: space-between; } .btn { width: 110px; margin: 0; font-size: 12px; } } &_about { padding: 160px 0; .tr_h2 { font-size: 25px; } .inner { position: relative; } p { margin: 40px 0; letter-spacing: 2px; font-size: 19px; line-height: 36px; } span.bold { font-size: 22px; } .imgBox { width: 257px; position: absolute; top: -45px; right: 80px; } } &_feature { padding: 90px 0 110px; background-color: $bgColor; ul { display: flex; justify-content: space-between; } li { width: 225px; margin-bottom: 0; } h3 { font-size: 15px; margin-bottom: 25px; line-height: 1.3; height: 38px; display: flex; flex-direction: column; justify-content: center; span { display: block; } } .imgBox { height: 132px; } } &_chidouiku{ padding: 180px 0 150px; .tr_h2 { position: relative; &:after { top: -44px; right: -30px; } } .lead { padding: 40px 0 50px; p { padding: 0 40px; font-size: 14px; font-weight: $fwB; background: url(./img/top/comma.svg) 0 4px no-repeat; } } } &_School { padding: 90px 0 100px; background-color: $bgColor; .lead { position: relative; margin-bottom: 73px; p { width: 440px; line-height: 1.8; } .imgBox { width: 256px; position: absolute; right: 0; top: -90px; } } .point { &Box { ul { margin-bottom: 20px; } li { display: flex; margin: 0; &:nth-child(1) { flex-direction: row-reverse; .pointTtl { padding: 30px 0 0 40px; h3 { margin-bottom: 20px; } } } > div { width: 50%; } } } &Ttl { padding: 30px 40px 0 0; .imgBox { width: 178px; margin-bottom: 20px; } h3 { margin-bottom: 17px; font-size: 14px; } p { margin: 0; line-height: 20px; } } } } &_achievements { padding: 140px 0; .lead { margin-top: 30px; } &List { display: flex; justify-content: space-between; li { width: 240px; .graduate { margin-bottom: 15px; font-size: 13px; } .accepted { margin-bottom: 15px; font-size: 13px; span { font-size: 15px; } } .results { margin-bottom: 15px; font-size: 13px; span { font-size: 12px; } } .imgBox { padding: 0 10px; } } } .linkBox { ul { width: 660px; margin: auto; display: flex; justify-content: space-between; } li { width: 300px; margin-top: 10px; } } } } } .SchoolCalender { padding: 33px 0 20px; // background: url(./img/top/app_bk.svg) 0 0 no-repeat; background: url(./img/top/app_top_bk_pc.jpg) 0 0/100% no-repeat,url(./img/top/app_bottom_bk_pc.jpg) 0 bottom/100% no-repeat; &_inner { // background: none; background: url(./img/top/app_mid_bk_pc.jpg) 0 0/100% repeat; position: relative; padding: 10px 20px 14px; } h4 { width: 189px; margin: 0 0 12px; font-size: 13px; padding: 7px 0 5px 29px; text-align: left; background: url(./img/top/top_arrow_pc.svg) 0 0 no-repeat; &:after { content: none; } } p { font-size: 12px; } dl { margin-top: 20px; } dt { width: 100px; margin: 0 0 7px; font-size: 12px; line-height: 18px; } dd { font-size: 12px; } &Ttl, &Txt { padding-left: 396px; } &Img { position: absolute; top: 30px; left: 20px; } } .linkSec_price { padding: 50px 0 10px; background-color: $bgColor; .inner { padding-top: 0; position: relative; &:before { width: 230px; background: url(./img/top/top_img03_pc.jpg) center 0 / cover no-repeat; right: 50px; left: auto; padding-top: 400px; } } p { margin: 20px 0 30px; } .priceBox, .trialBox { width: 520px; } .priceBox { .linkBox { li { display: inline-block; margin-right: 15px; } a { margin-top: 0; } .btn-shadow-color { width: 250px; } .btn-shadow-white { width: 150px; } } } .trialBox { .linkBox { .btn-shadow-color { width: 250px; margin-bottom: 0; } } ul { display: flex; align-items: center; } .telNumber, .openDays { flex-direction: column; } .telNumber { margin: 0 5px 0 25px; padding-right: 5px; font-weight: $fwB; color: $site-blue; line-height: 1.2; border-right: 1px solid #afafaf; font-size: 12px; letter-spacing: .7px; span { display: inline-block; color: $textColorDark; font-size: 16px; transform: translateY(1px); margin-left: 4px; } } .openDays { li { font-size: 12px; line-height: 1.5; &:nth-child(1) { &:after { content: none; } } } } } } .linkSec_eiken { padding: 120px 0; a { @include hv-op; } } .linkSec_rooms { padding: 0; background-color: $bgColor; position: relative; .inner { } .tr_h2 { font-size: 20px; } p { margin: 25px 0 30px; } li { display: flex; margin-bottom: 0; height: 280px; >div { width: 50%; } &:nth-child(2) { flex-direction: row-reverse; .imgBox { img { left: 0; } } .linkTxt { padding: 50px 0 0 47px; } } } .imgBox { margin-bottom: 0; img { object-fit: cover; width: 50%; height: 280px; position: absolute; right: 0; } } .linkTxt { padding: 60px 47px 0 0; } .btn-shadow-color { width: 250px; margin-left: 0; } } .linkSec_company { padding: 110px 0; ul { display: flex; justify-content: space-between; } li { width: 370px; margin-bottom: 0; } a { @include hv-op; } }