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

    #categorySec .sectionInner{display:flex;justify-content: space-between;padding: 30px 0 60px;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: #f5f5f5;
    /* border: 1px solid #f2f2f2; */
    border-top: 2px solid #ea8046;
    margin: 0 0 3em;
    /* padding: 1.7em; */
}
.countryBox  .countryBoxInner{
    padding: 1.7em;
}
.countryBox  .countryBoxInner .titleBox{
	margin: 0.5em 0 1em;
}
.countryBox  .countryBoxInner .titleBox .description{
    margin: 0.3em auto;
}
.countryBox  .titleBox .ttl .txtTop{
    padding: 1em 2em 1em  calc(60px + 0.5em);
    font-size: 1.8em;
    position: relative;
}
.countryBox  .titleBox .flag_s:before{
    content:"";
    position: absolute;
    width: 1.8em;
    height: 1.2em;
    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: 0em;
}
.courceBox .courceBoxinner .flag_s{
    padding: 0.25em 2em 0.25em calc(30px + 0.5em);
    margin: 0;
    font-size: 1.4em;
    position: relative;
}
.courceBox .courceBoxinner .flag_s:before{
    content: "";
    position: absolute;
    width: 30px;
    height: 20px;
    background: #ccc;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.courceBox .courceDetailTxt{
    text-align: center;
}
.courceBox .courceImg{
    overflow-y: hidden;
    aspect-ratio: 16 / 6;
    display: flex;
    align-items: center;
}
.courceBox .leadSentence{margin: 0.5em auto 1.25em;}
.courceBox .courceImg img{
    max-height: fit-content;
    max-height: fit-content;
    width: 100%;
}

.countryBox  .btnBox{
    position: relative;
    text-decoration: none;
    font-weight: bold;▶
    border-radius: 2em;
    border-radius: 21em;
}
.countryBox  .btnBox:after{content:"▶";position:absolute;display: inline-block;height: 1em;font-size: 0.8em;top: 0;bottom: 0;right: 10%;margin: auto;transform: translate(0, -0.2em);}
.gradeBox{
    display: inline-block;
    margin: 0 0.5em 0 auto;
}
.gradeBox ul{
}
.gradeBox li{display:inline-block;background: #ddd;padding: 0.5em;color: #fff;font-weight: bold;border-radius: 1em;line-height: 1;}
.gradeBox .Elem.focus{background:#cf544b;}
.gradeBox .Midd.focus{background:#94689a;}
.gradeBox .High.focus{background:#00a0ad;}

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


	/*コースタイトル*/
	.courceBox .courceTtl{
    background: #ea8046;
    color: #fff;
    padding: 0.2em 0.5em 0.2em;
    margin-bottom: 0.7em;
    font-weight: bold;
    font-size: 130%;
}
	.courceBox .tagBox{
    margin-bottom: 0.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2em;
}
	.courceBox .tagBox li{
	    display: inline-block;
	    font-size: 10px;
	    color: #777;
	    border: 1px solid #777;
	    padding: 0.1em 1em 0.1em;
	    border-radius: 1em;
	}
	.courceBox .tagBox li.attention{
		color: #ff5959;
	    border: 1px solid #ff5959;
	}

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

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

	.courceBox .detailBox dl.spot div,
	.courceBox .detailBox dl.capacity div,
	.courceBox .detailBox dl{display:flex;justify-content: flex-start;align-items: center;gap: 2%;gap: 1em;}
	
	.courceBox .detailBox dl.spot .spot-capacity,
	.courceBox .detailBox dl.capacity .spot-capacity{
	    align-items: center;
	}
	.courceBox .detailBox dl.target,
	.courceBox .detailBox dl.price{align-items: baseline;}

	.courceBox .detailBox dt{
    background: #777;
    color: #fff;
    padding: 0.5em 1em;
    width: 7em;
    height: max-content;*
    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: 5px 0 5px 10px; */
    width: calc(100% - 7em);
 }
	.courceBox .detailBox dd p:first-child{
		width:100%;border-bottom:1px solid;
	}
	.courceBox .detailBox dd.priceTxt{
	    font-size: 2.4em;
	    line-height: 1em;
	    font-weight: bold;
	    /* margin-top: 0.5em; */
	    color: #e05a24;
	    width: calc(100% - 3.9em - 2%);
	}
	.courceBox .detailBox dd{}
	.courceBox .detailBox .capacity{
    margin-left: 2em;
}
	.courceBox .detail{background: #ee141e;color: #fff;padding: 1em 4em;}

a.detail.btnBox {
    margin: 1em auto;
    display: inline-block;
}
.courceBox .infoBox{
    margin: 1em auto 1em;
}
.courceBox .infoBox .txt{
    /* width: calc(100% - 200px); */
    /* margin-left: 1.5em; */
    line-height:1.6em;
    order:2;
    font-size: 110%;
    text-align: justify;
}
.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.5em;
    border: 2px solid;
    padding: 0.4em 0em 0.4em;
}
.linkBox .contact{background: #ff9752;color: #fff;border: 2px solid;border-color: #f47505;}
.linkBox .request{
    background: #fff;
    color: #000;
}


@media screen and (max-width:800px){
/*内容*/
	#categorySec .sectionInner{padding-top:0}
    #categorySec .contentsBox{width: 100%;}
    .courceBox{padding:1em 1em 2em;border: 1px solid #f2f2f2;border-top: 1px solid #6799ab;}
    .countryBox .titleBox .ttl .txtTop{padding: 0em 0.2em 0em 2em;font-size: 1.5em;}
    .countryBox .titleBox .description{margin: 1em 0 1em;}
	
    
    .gradeBox li{font-size: 80%;}
	.countryBox  .countryBoxInner{padding: 2.5%;}
    #categorySec .courceBox .courceImg{
	    /* overflow-y: hidden; */
	    aspect-ratio: 16/9;
	    /* display: flex; */
	    /* align-items: center; */
	}
    #categorySec .courceBox .courceImg img{/* height:auto; *//* max-height: fit-content; */}
	.courceBox .tagBox{
    margin: 0.8em auto 0.5em;
    gap: 0.2em;
}
	.courceBox .courceBoxinner .states.contactUs{font-size: 80%;}
    .courceBox .courceTtl{line-height: 1.2;padding: 0.5em;}
    
    .courceBox .detailBox {margin: 1.5em auto;} 
    .courceBox .detailBox dl.spot div, 
    .courceBox .detailBox dl.capacity div, 
    .courceBox .detailBox dl{
    gap: 2%;
}
    .courceBox .detailBox dd{width: calc(100% - 7em - 2%);padding: 0em 0 0em 0.1em;}
    .courceBox .detailBox dd.priceTxt{font-size: 1.8em;line-height: 1em;}
	.courceBox .detailBox dt{
    padding: 0.25em 1em;
}
	.courceBox .detailBox dt.arrival_point{
}
	.courceBox .detailBox dt.arrival_point + dd{/* width: auto; */align-items: center;}

    .courceBox .infoBox{display: block;}
    .courceBox .infoBox .txt{width: 100%;margin: 0;}
    .courceBox .infoBox .img{width: 100%;margin-top: 1em;}
    
    .linkBox{flex-wrap: wrap;}
    .linkBox .contact, 
    .linkBox .request{width: 100%;}
    .linkBox .contact{margin-bottom: 0.5em;}
    .courceBox .detail{padding: 1em 3em;line-height: 1.2;display: inline-block;}
    
    
    
/*国旗*/
    .courceBox .courceBoxinner{flex-wrap: wrap;}
    .courceBox .courceBoxinner .flag_s{padding: 0em 0.2em 0em calc(30px + 0.5em);font-size: 1.2em;}
    .countryBox.country_aus .flag_s:before{top: 0; bottom: 0;margin: auto;}

    
}