@charset "utf-8";



section{}
section.secBox{}
.sectionInner{}

#contentsArea{}
#contentsArea .contentsInner{}

.sectionInner .titleBox{
    margin: 0.5rem auto 1rem;
}
.titleBox h2{}
.titleBox h3{
    font-size: 2rem;
    color: #fff;
    max-width: 450px;
    margin: auto;
    padding: 0.25em;
    background: var(--lr-color-orange);
    text-align: center;
}
.titleBox h4,
h4.subTitle{
    font-size: 1.8rem;
    color: #ef8346;
    margin-bottom: 0.5em;
}
.titleBox p{}
ul:has(.tags){gap: 0.05em 0.5em;}



/* mainContents */
#mainContents{}


/* fvSec */
#fvSec{
    margin-bottom: 1rem;
}
#fvSec #mainSlide{
    min-width: 320px;
}
#fvSec #mainSlide .slideImgBox{width: 100vw;max-width: min(480px,90vw);height: 270px;background:#ccc;}
#fvSec #mainSlide .slideImgBox img{
    object-fit: cover;
    height: 100%;
    width: 100%;
}
#fvSec #mainSlide .slick-dots{
 display: inline-flex;
 bottom:10px;
 width: fit-content;
 overflow: scroll;/* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: none;
 max-width: 90vw;
 right: 0;
 left: 0;
 margin: auto;
 padding: 0.5rem 2rem;
 background: rgba(235, 235, 235, 0.9);
 border-radius: 2rem;
 }
#fvSec #mainSlide .slick-dots li{
    width: 1.6rem;
    height: auto;
}
#fvSec #mainSlide .slick-dots li button{
    width: 1.6rem;
    height: 1.2rem;
    padding: 0 0.3rem;
}
#fvSec #mainSlide .slick-dots li button:before{font-size: 1.2rem;position: initial;line-height: 1rem;}
#fvSec #mainSlide .slick-dots li.slick-active button:before{opacity: 1;color: white;}


/* ホバー時の演出（任意） */
.slick-dots li button:hover {
    background: #bbb;
}

#fvSec .sectionInner{}
#fvSec .sectionInner .titleBox{
    display: flex;
    flex-wrap: wrap;
}
#fvSec .sectionInner .titleBox .schoolNames{
    width: 100%;
    max-width: calc(100% - 30px);
}
#fvSec .sectionInner .titleBox .lang_jpn{
    font-size: 1.2rem;
    color: #6a99ab;
    /* width: 100%; */
}
#fvSec .sectionInner .titleBox .lang_eng{
    font-size: 2.0rem;
    font-weight: bold;
}
#fvSec .sectionInner .titleBox .btn-like{
    width: 28px;
    height: 28px;
    margin: auto;}

#fvSec .sectionInner .description{
    margin: 0.75em auto;
    /* font-size: 1.4rem; */
    align-content: center;
    line-height: 1;
}
#fvSec .sectionInner .description .location{
    font-size: 1.4rem;
*/
    line-height: 1;
}
#fvSec .sectionInner .description .postalCode{
    font-style: initial;
    font-size: 1.4rem;
}
#fvSec .sectionInner .description .location:before,
#fvSec .sectionInner .description .postalCode:before{content:"";display: inline-block;background-repeat: no-repeat;background-position: center;background-size: contain;height: 16px;width: 16px;margin-right: 0.25em;vertical-align: sub;}
#fvSec .sectionInner .description .location:before{background-image: url(../images/detail/icon_location.png);}
#fvSec .sectionInner .description .postalCode:before{background-image:url(../images/detail/icon_map.png);}



#fvSec .sectionInner .tagLists{}
#fvSec .sectionInner .tagLists .listItems{
    display: inline-block;
    background: #fce6da;
    font-size: 1.3rem;
    color: #808080;
    padding: 0.15em 0.5em;
    border-radius: 1em;
}
#fvSec .sectionInner .tagLists .listItems:before{content:"#"}


#contentsArea .contentsInner .schoolStatisticsBox{
    margin: 1em auto 0.5em;
    padding: 0.5em 2.5%;
    background: #f3f3f3;
}
#contentsArea .contentsInner .schoolStatistics{
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    column-gap: 1rem;
    row-gap: 0.4rem;
    flex-wrap: wrap;
    list-style: none;
    max-width:95%;
    margin: auto;
}
#contentsArea .contentsInner .schoolStatistics div{width:50%;display: contents;align-items: center;}
#contentsArea .contentsInner .schoolStatistics div dt{
    font-size: 1.4rem;
    font-weight: bold;
    /* line-height: 1; */
    display: flex;
    gap: 0.5em;
    align-items: center;
    white-space: nowrap;
}
#contentsArea .contentsInner .schoolStatistics div dt.students{}
#contentsArea .contentsInner .schoolStatistics div dt.staff{}
#contentsArea .contentsInner .schoolStatistics div dt.japanese{}
#contentsArea .contentsInner .schoolStatistics div dt.age{}
#contentsArea .contentsInner .schoolStatistics div dt.students:before,
#contentsArea .contentsInner .schoolStatistics div dt.staff:before,
#contentsArea .contentsInner .schoolStatistics div dt.japanese:before,
#contentsArea .contentsInner .schoolStatistics div dt.age:before{content:"";display: inline-block;width: 20px;height: 20px;}
#contentsArea .contentsInner .schoolStatistics div dt.students:before{background-image: url(../images/detail/icon_info_students.png);}
#contentsArea .contentsInner .schoolStatistics div dt.staff:before{background-image: url(../images/detail/icon_info_staff.png);}
#contentsArea .contentsInner .schoolStatistics div dt.japanese:before{background-image: url(../images/detail/icon_info_japanese.png);}
#contentsArea .contentsInner .schoolStatistics div dt.age:before{background-image: url(../images/detail/icon_info_age.png);}
#contentsArea .contentsInner .schoolStatistics div dd{
    font-size: 1.4rem;
    align-content: center;
}


/* navSec */
input.radioTabs{
    display: none;
}
#navSec{
    margin-bottom: 1rem;
    border-bottom: 1px solid #f2f2f2;
}
#navSec .navLists{
    display: flex;
    min-width: 320px;
}
#navSec .navLists li{
    width: 25%;
    /* aspect-ratio: 1/1; */
    /* max-width: 44px; */
    text-align: center;
}
#navSec .navLists li label{
    width: 100%;
    background-size: 44px;
    max-width:74px;
    height: calc(44px + 0.5em + 4px);
    aspect-ratio: 1/1;
    display: inline-block;
    padding-bottom: calc(0.5em + 4px);
    border-bottom: 4px solid transparent;
    background-repeat: no-repeat;
    background-position: center;
}
#navSec .navLists li label.photos{background-image: url(../images/detail/icon_schoolPhotos_off.png);}
#navSec .navLists li label.introduce{background-image: url(../images/detail/icon_schoolIntroduce_off.png);}
#navSec .navLists li label.fees{background-image: url(../images/detail/icon_schoolFees_off.png);}
#navSec .navLists li label.others{background-image: url(../images/detail/icon_schoolOthers_off.png);/* background-size: 44px; */}

input[name="school-info"]#tab-photos:checked ~ #navSec label.photos,
input[name="school-info"]#tab-introduce:checked ~ #navSec label.introduce,
input[name="school-info"]#tab-fees:checked ~ #navSec label.fees,
input[name="school-info"]#tab-others:checked ~ #navSec label.others{border-bottom: 4px solid #ef8346; padding-bottom: 0.5em;}

input[name="school-info"]#tab-photos:checked ~ #navSec label.photos{background-image: url(../images/detail/icon_schoolPhotos_on.png);}
input[name="school-info"]#tab-introduce:checked ~ #navSec label.introduce{background-image: url(../images/detail/icon_schoolIntroduce_on.png);}
input[name="school-info"]#tab-fees:checked ~ #navSec label.fees{background-image: url(../images/detail/icon_schoolFees_on.png);}
input[name="school-info"]#tab-others:checked ~ #navSec label.others{background-image: url(../images/detail/icon_schoolOthers_on.png);}

.panel{
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transition: 0.3s ease;
    padding: 0;
    margin: 0;
    max-height: max-content;
    background: none;
}
input[name="school-info"]#tab-photos:checked ~ #photoSec.panel,
input[name="school-info"]#tab-introduce:checked ~ #descriptionSec.panel,
input[name="school-info"]#tab-fees:checked ~ #feesSec.panel,
input[name="school-info"]#tab-others:checked ~ #otherSec.panel{
    opacity: 1;
    visibility: visible;
    height: auto;
}



/* photoSec */
#photoSec{}
#photoSec .sectionInner{
    max-width: 720px;
    width: 100%;
}
#photoSec .titleBox{max-width:90%}
#photoSec .photoBox{
    justify-content: flex-start;
    gap: 0.25rem 0.5%;
}
#photoSec .photoBox .schoolPhotos{
    width: 33%;
    aspect-ratio: 1/1;
}
#photoSec .photoBox .schoolPhotos a{
    padding: 0;
    height: 100%;
}
#photoSec .photoBox .schoolPhotos img{
    object-fit: cover;
    height: 100%;
    width: auto;
    background: #ccc;
}
#photoSec .photoBox .schoolPhotos img:hover{}

/* lity */
body .lity{background:rgba(0,0,0,0.3)}
body .lity .lity-container {max-width: 90%;}
body .lity .lity-container img{margin:auto;width:100%;}

/* descriptionSec */
#descriptionSec{}
#descriptionSec .sectionInner{}
#descriptionSec .sectionInner .titleBox{}
#descriptionSec .sectionInner .titleBox h3.lang_jpn{}

#descriptionSec .sectionInner .featuresLists{
    margin: 2rem auto;
}
#descriptionSec .sectionInner .featuresLists .listInfo{
    position: relative;
    font-size: 1.5rem;
    white-space: pre-wrap;
    padding-left: 3rem;
    margin-bottom: 0.75rem;
}
#descriptionSec .sectionInner .featuresLists .listInfo::before{content:"";position:absolute;width:20px;height:20px;background:url(../images/detail/icon_features.png);left: 0.25rem;}

#descriptionSec .sectionInner .iframeBox,
#descriptionSec .sectionInner .recommendationInfo{
    margin: 2rem auto;
    /* display: grid; */
}
#descriptionSec .sectionInner .iframeBox h4{
}
#descriptionSec .sectionInner .iframeBox iframe{
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16/9;
}
#descriptionSec .sectionInner .iframeBox .order2{
    margin-bottom: 1em;
}
#descriptionSec .sectionInner .iframeBox .order2:has(.hidden){display:none}
#descriptionSec .sectionInner .iframeBox .order3{}
#descriptionSec .sectionInner .iframeBox p{font-size: 1.4rem;/* margin-top: 1em; */white-space: pre-wrap;}

#descriptionSec .sectionInner .recommendationInfo{}

#descriptionSec .sectionInner .dataBox{}
#descriptionSec .sectionInner .dataBox h4{
    /* color: #ef8346; */
}

#descriptionSec .sectionInner .dataBox .dataLists{}
#descriptionSec .sectionInner .dataBox .dataLists .dataInfo{
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1em;
}
#descriptionSec .sectionInner .dataBox .dataLists .dataInfo dt{
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.25em;
}
#descriptionSec .sectionInner .dataBox .dataLists .dataInfo dt:before{content:"";position:absolute;width: 18px;height: 18px;background:url(../images/detail/icon_checkmark.png);left: 0.25rem;}
#descriptionSec .sectionInner .dataBox .dataLists .dataInfo dd{
    font-size: 1.4rem;
    white-space: pre-wrap;
}


/* feesSec */
#feesSec{}
#feesSec .sectionInner{}
#feesSec .sectionInner .titleBox{}
#feesSec .sectionInner .titleBox h3{
}

#feesSec .sectionInner .tableBox{}
#feesSec .sectionInner .tableBox table{
    border: none;
    max-width: 600px;
    margin: auto;
}
#feesSec .sectionInner .tableBox table thead{}
#feesSec .sectionInner .tableBox table tr{
    border-bottom: 1px dashed #e6e6e6;
}
#feesSec .sectionInner .tableBox table th{
    border: none;
}
#feesSec .sectionInner .tableBox table td{
    border: none;
    font-size: 1.9rem;
    font-weight: bold;
}

#feesSec .sectionInner .tableBox table td span{width: 1.8em;display: inline-block;}
#feesSec .sectionInner .tableBox table tr th:first-child,
#feesSec .sectionInner .tableBox table tr td:first-child{text-align:center;/* width: calc(1em + -1%); */*/padding-right: 15%;padding-left: 7%;}
#feesSec .sectionInner .tableBox table tr td:last-child{text-align:right;/* width: calc(60% - 7em); */padding-right: 15%;}

#feesSec .sectionInner .campaignBox{
    max-width: max-content;
    margin: 2em auto;
    border-radius: 1.3rem;
    overflow: hidden;
}
#feesSec .sectionInner .campaignBox a{
    padding: initial;
}
#feesSec .sectionInner .campaignBox a:hover{}
#feesSec .sectionInner .campaignBox .campaignInner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ed1c24;
    border: 2px solid #ed1c24;
    flex-wrap: wrap;
}
#feesSec .sectionInner .campaignBox .campaignInner .campaignTitle{
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.75em 1em;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#feesSec .sectionInner .campaignBox .campaignInner .campaignTitle:before{content:"";display: inline-block;width: 2.6rem;height: 2.4rem;background: url(../images/detail/icon_campaign.png);background-size: cover;margin-right: 0.5rem;}
#feesSec .sectionInner .campaignBox .campaignInner .campaigninfo{
    background: #fff;
    color: #ed1c24;
    text-align: center;
    border-radius: 1rem 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.75em 2em;
    /* margin-right: 0.2rem; */
    width: 95%;
    margin: 0 auto 0.6em;
    word-break: break-all;
}

/* otherSec */
#otherSec{}
#otherSec .sectionInner{}
#otherSec .sectionInner .titleBox{}
#otherSec .sectionInner .titleBox h3{
    /* color: #ef8346; */
}

#otherSec .sectionInner .iframeBox{}
#otherSec .sectionInner .iframeBox h4{
}
#otherSec .sectionInner .iframeBox iframe{
    width: 100%;
    aspect-ratio: 4/3;
}
#otherSec .sectionInner .iframeBox .mapLinkTxt{
    /* display: inline-block; */
    text-align: center;
}
#otherSec .sectionInner .iframeBox .mapLinkTxt a{
    position: relative;
    font-size: 1.2rem;
    text-decoration: none;
    line-height: 1.8rem;
    border: none;
    border-radius: 15px;
    padding: 0.8rem 4rem;
    width: auto;
    display: inline-block;
    background: #4285F4;
    color: #fff;
    transition:ease-in-out .2s;
}
#otherSec .sectionInner .iframeBox .mapLinkTxt a:hover{opacity:0.8;}
#otherSec .sectionInner .iframeBox .mapLinkTxt a:after{content:"▶";position:absolute;font-size: 85%;right: 1.5rem;}

#otherSec .sectionInner .schoolInfoBox{
    margin: 2rem auto;
}
#otherSec .sectionInner .schoolInfoBox h4{
}
#otherSec .sectionInner .schoolInfoBox p{
    font-size: 1.4rem;
    white-space: pre-wrap;
}
#otherSec .sectionInner .schoolInfoBox dl{
    display: flex;
    margin-bottom: 1rem;
}
#otherSec .sectionInner .schoolInfoBox dt{
    width: 9rem;
    font-size: 1.4rem;
}
#otherSec .sectionInner .schoolInfoBox dd{
    font-size: 1.4rem;
    width: calc(100% - 7rem);
    white-space: pre-wrap;
}



/* ctaBox */
.ctaBox{
    text-align: center;
    min-width: 320px;
    margin: 1em auto 0;
    padding: 1.5em 2.5% 1.5em;
    background: #f3f3f3;
}
.ctaBox .lang_jpn{
    font-size: 1.2rem;
    color: #6a99ab;
}
.ctaBox .lang_eng{
    color: #303030;
    font-weight: bold;
    font-size: 2.0rem;
}
.ctaBox .ctaTxt{
    font-size: 1.8rem;
}

.ctaBox .ctaBtnBox{
    justify-content: center;
    gap: 1em;
    margin: 2em auto 0;
}
.ctaBox .ctaBtnBox .lintTxts {/* margin:2em auto; */}
.ctaBox .ctaBtnBox .lintTxts a{
    font-size: clamp(1.2rem,4vw,1.6rem);
    font-weight: bold;
    padding: 0.75em 2em;
    color:#fff;
    border-radius:10px;
}
.ctaBox .ctaBtnBox .lintTxts a:hover{}
.ctaBox .ctaBtnBox .requestLink{}
.ctaBox .ctaBtnBox .requestLink a{background:#6a99ab;border-bottom:4px solid #2c5c73}
.ctaBox .ctaBtnBox .counselingLink{}
.ctaBox .ctaBtnBox .counselingLink a{background:#ef8346;border-bottom:4px solid #c34a14}

#searchSchoolBox .searchList .listItem.sorting{display:none;}

/* 校舎がない場合 */
#NoneSec{margin:3rem auto 5rem}
#NoneSec .sectionInner{}
#NoneSec .sectionInner p{text-align:center}
#NoneSec .sectionInner p a{}