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

#categorySec .sectionInner{display:flex;justify-content: space-between;width: 95%;}
#categorySec .sideBox{/* width:30%; */}
#categorySec .contentsBox{width: calc(100% - 250px - 50px);}
#coursesSec > .sectionInner > .contentsBox{width: calc(100% - 250px - 50px);}

/* 左の要素*/
.countryBox {
    /* width: 750px; */
    background: #f9f9f9;
    border: 1px solid #f2f2f2;
    border-top: 2px solid #16b9c4;
    margin: 0 0 3em;
    /* padding: 1.7em; */
}
.countryBox  .countryBoxInner{
    padding: 1.7em;
}
.countryBox  .countryBoxInner .titleBox{
	margin: 0.5em 0 1em;
}
.countryBox  .titleBox .ttl .txtTop{
    padding: 0 0 0  calc(60px + 0.5em);
    font-size: 1.8em;
    position: relative;
}
.countryBox  .titleBox .flag_s:before{
    content:"";
    position: absolute;
	width:60px;
	height:40px;
	background:#ccc;
	left:0
	
}

	/*各コースの一覧*/
.courceBox{
    padding: 1.5em 1.5em 3em;
    margin: 0 0 2em;
    background: #fff;
    text-align: center;
}
.courceBox .courceBoxinner {
	position: relative;
	margin-bottom: 0.7em;
	flex-wrap: wrap;
	gap: 0.25em 0;
}
.courceBox .courceBoxinner .flag_s{
    padding: 0 0.2em 0 calc(30px + 0.5em);
    font-size: 0.8em;
    position: relative;
}
.courceBox .courceBoxinner .flag_s:before{
    content: "";
    position: absolute;
    width: 30px;
    height: 20px;
    background: #ccc;
    left: 0;
}
.countryBox  .btnBox{
    position: relative;
    text-decoration: none;
    font-weight: bold;▶
    border-radius: 2em;
    border-radius: 21em;
}
.countryBox  .btnBox:after{content:"▶";position:absolute;\: inline-block;/* height: 1em; */font-size: 0.8em;align-content: center;top: 0;bottom: 0;right: 5%;margin: auto;/* transform: translate(0, -0.2em); */}
.gradeBox{
    display: inline-block;
    margin: 0 0 0 auto;
}
.gradeBox ul{
    min-width: 100px;
}
.gradeInner li{display: inline-flex;justify-content: center;align-items: center;background:#aaa;padding: .2em .5em;color:#fff;font-weight:700;border-radius:1em;line-height: 1;width: 2em;height: 2em;}
.gradeInner .Elem.focus{background:#cf544b;}
.gradeInner .Midd.focus{background:#94689a;}
.gradeInner .High.focus{background:#00a0ad;}
.gradeInner .Univ.focus{background:#4252b4;}
.gradeInner .Work.focus{background:#54a850;}
.gradeInner .Family.focus{background:#e59e42;}
.gradeInner .Family .moji2{font-size: 0.8em;display: block;min-width: 2em;}

.courceBox .courceBoxinner .states{
	padding: 0.3em 0.5em;
	margin: 0 0 0 0.5em;
	text-align: center;
	font-weight: bold;
}
.courceBox .courceBoxinner .states.contactUs{
	content: "";
	background: #ff0000;
	color: #fff;
}


	/*コースタイトル*/
	.courceBox .courceTtl{
    background: #1e6166;
    color: #fff;
    padding: 0.2em 0.5em 0.2em;
    margin-bottom: 0.7em;
}
	.courceBox .tagBox{
    margin-bottom: 1.6em;
    /* display: flex; */
    flex-wrap: wrap;
}
	.courceBox .tagBox li{
	    display: inline-block;
	    font-size: 12px;
	    color: #333333;
	    border: 1px solid #333333;
	    padding: 0.2em 1.2em 0.2em;
	    margin: 0.2em 0.2em;
	    border-radius: 1em;
	}
	.courceBox .tagBox li.attention{
		color: #ff5959;
	    border: 1px solid #ff5959;
	}

	.courceBox .detailBox {
    /* margin: 1em auto 2em; */
    width: calc(100% - 200px - 2%);
}
	.courceBox .detailBox div.dispFlex:has(.spot){display:block;}
	.courceBox .detailBox div.dispFlex:has(.spot) dl{width:100%;margin-left: 0;}

	.courceBox .detailBox dl{display:flex;/* margin-bottom: 0.5em; */}

	.courceBox .detailBox dl.spot div,
	.courceBox .detailBox dl.capacity div,
	.courceBox .detailBox dl{display:flex;flex-wrap: wrap;width: 100%;}

	.courceBox .detailBox dt{
    /* background: #000; */
    color: #000;
    width: 100%;
    /* padding: 0.5em 1em; */
    /* width: 7em; */
    /* height: 2.5em; */*
    text-align: center; */
    text-align-last: justify;
    /* text-align: justify; */
    /* text-align-last: justify; */
 }
	.courceBox .detailBox dt.arrival_point{/* width: 10em; */height: 3.6em;line-height: 1.3em;}
	.courceBox .detailBox dt.arrival_point + dd{width: calc(100% - 7em);}

	.courceBox .detailBox dd{
    /* font-size: 16px; */
    /* padding: 0.4em 0 0.4em 1.1em; */
    width: 100%;
 }
	.courceBox .detailBox dd p:first-child{
		width:100%;
		/* border-bottom:1px solid; */
		font-size: min(3.4vw,1.2em);
	}
	.courceBox .priceTxt{
	    font-size: 2em;
	    line-height: 1.2em;
	    font-weight: bold;
	    margin: 0.25em 0;
	    color: #e05a24;
	}
	.courceBox .priceTxt.nmlP {
	    font-size: 1.6em;
	    line-height: 1.2em;
	    color: #646470;
	}
	/*.priceInfo{text-decoration: line-through;}*/



	.courceBox .priceTxt .txtSizeS{display:block}
	.courceBox .detailBox dd .priceTxt 
	.courceBox .detailBox dd{}
	.courceBox .detailBox .capacity{
    margin-left: 2em;
}
	.courceBox .detail{background: #31b3bd;color: #fff;padding: 0.5em 3em;}

a.detail.btnBox {display: inline-block;/* width: 70%; */margin: 0.75em auto 0;}
.courceBox .infoBox{
    margin: 1em auto 0em;
    justify-content: space-between;
}
.courceBox .infoBox .txt{
    width: calc(100% - 200px);
    margin-left: 1.5em;
    line-height:1.6em;
    order:2;
}
.courceBox .infoBox .img{
	width:200px;
	height: 100px;
	/* order:1; */
}
.courceBox .infoBox .img img{
	object-fit:cover;
	width:100%;
	height:100%;
}
	

/*国旗*/
.countryBox.country_usa .flag_s:before{background: url(../images/flag/icon_usa.jpg) no-repeat center / cover;}
.countryBox.country_aus .flag_s:before{background: url(../images/flag/icon_aus.jpg) no-repeat center / cover;}
.countryBox.country_nzl .flag_s:before{background: url(../images/flag/icon_nzl.jpg) no-repeat center / cover;}
.countryBox.country_can .flag_s:before{background: url(../images/flag/icon_can.jpg) no-repeat center / cover;}

.countryBox.country_kr .flag_s:before{background: url(../images/flag/icon_kr.jpg) no-repeat center / cover;}
.countryBox.country_gbr .flag_s:before{background: url(../images/flag/icon_gbr.jpg) no-repeat center / cover;}
.countryBox.country_phi .flag_s:before{background: url(../images/flag/icon_phi.jpg) no-repeat center / cover;}
	
.linkBox{
    text-align: center;
    justify-content: space-evenly;
    width: 100%;
    margin: 2em auto;
}
.linkBox .contact,
.linkBox .request{
    width: 40%;
    font-size: 1.2em;
    border: 2px solid;
    padding: 0.4em 0em 0.4em;
    align-content: center;
}
.linkBox .contact{background: #ff9752;color: #fff;border: 2px solid;border-color: #f47505;}
.linkBox .request{
    background: #fff;
    color: #000;
}

/*料金*/
#categorySec .countryBox .nmlP{position: relative;}
#categorySec .countryBox .nmlP .priceInfo{text-decoration-line: line-through ;text-decoration-color:  #666; text-decoration-style: solid; text-decoration-thickness: 3px;  color: #999; position: relative;}
#categorySec .countryBox  .nmlP .txtSizeS{color: #999;}



#categorySec .countryBox .espP{margin-top: 0.5em;}
#categorySec .countryBox .espP .txtSizeS{font-size: 1em;}
#categorySec .countryBox .espP .priceInfo{font-size: 1.5em; font-weight: bolder;}


@media screen and (max-width: 1100px){
	#categorySec .sectionInner{
    padding: 30px 0 60px;
}
	#categorySec .sideBox{
    width: 30%;
}
	#categorySec .contentsBox{
    width: calc(100% - 32%);
}
	#coursesSec > .sectionInner > .contentsBox{}
	.courceBox .infoBox .img{width:30%;}
	.courceBox .detailBox {width:68%}
}
@media screen and (max-width: 800px){
/*内容*/
    #categorySec .contentsBox{width: 100%;}
	#categorySec .sideBox{width:100%;}
    .courceBox{padding: 1em 2.5% 1.5em;margin-bottom: 1em;}
    .countryBox .titleBox .ttl .txtTop{font-size: min(6vw,1.4em);font-weight: bold;}
    .countryBox .titleBox .description{margin: 0.5em 0 1em;}
    
    
    .gradeBox li{font-size: 90%;padding: 0em 0em;width: 3e;}
	.countryBox  .countryBoxInner{padding: 2.5%;}
    .courceBox .courceBoxinner .states.contactUs{font-size: 80%;}
    .courceBox .courceTtl{line-height: 1.2;padding: 0.5em;}
    
    .courceBox .detailBox {margin: 1em auto 0em;width: 66%;margin: 0em 0 0;} 
    .courceBox .detailBox dl.spot div, 
    .courceBox .detailBox dl.capacity div, 
    .courceBox .detailBox dl{display: block;}
    .courceBox .detailBox dd{width: 100%;/* padding: 0.4em 0 0.4em 0.1em; */}
    .courceBox .detailBox dd .priceTxt{font-size: min(5vw,1.7em);line-height: 1em;}

	.courceBox .detailBox dt.arrival_point{
}
	.courceBox .detailBox dt.arrival_point + dd{width: auto;}

    .courceBox .infoBox{display: flex;justify-content: space-between;margin-top: 0em;}
    .courceBox .infoBox .txt{width: 100%;margin: 0;}
    .courceBox .infoBox .img{width: 32%;aspect-ratio: 5/4;height: auto;margin-top: 0em;order: 0;}
    
    .linkBox{flex-wrap: wrap;justify-content: space-between;margin: 1em auto;}
    .linkBox .contact, 
    .linkBox .request{width: 48%;font-size: min(4.1vw,20px);margin-bottom: 0.5em;}
    .linkBox .contact{/* margin-bottom: 0.5em; *//* font-size: 4.1vw; */}
	.countryBox .contact.btnBox{
    font-size: min(4.1vw,20px);
}
	.countryBox .detail.btnBox{
    /* font-size: 3vw; */
}
    .courceBox .detail.btnBox{padding: 0.5em 2em;line-height: 1.2;/* width: 62%; */text-align: center;font-size: min(4.2vw,20px);}
    
    
    
/*国旗*/
    .courceBox .courceBoxinner{flex-wrap: wrap;margin-bottom: 0.5em;/* gap: 0.25em 0; */}
    .courceBox .courceBoxinner .flag_s{padding: 0 0.2em 0 calc(30px + 0.5em);font-size: 1.2em;line-height: 1.2em;margin: 0;}
    .countryBox.country_aus .flag_s:before{top: 0; bottom: 0;margin: auto;}


    #categorySec .countryBox .nmlP .priceInfo::before { width: 56%;}
    #categorySec .countryBox .espP .priceInfo {font-size: 1.8em; line-height: 1;}
    
}