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

    #categorySec .sectionInner{display:flex; justify-content: space-between;}
    #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 #ea8046;
    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: 1em 2em 1em  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: 1em;
}
.courceBox .courceBoxinner .flag_s{
    padding: 1em 2em 1em 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;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 0 auto;
}
.gradeBox ul{}
.gradeBox li{display:inline-block;background: #aaaaaa;padding: 0.3em 0.5em;color: #fff;font-weight: bold;border-radius: 1em;}
.gradeBox .Elem.focus{background:#cf544b;}
.gradeBox .Midd.focus{background:#94689a;}
.gradeBox .High.focus{background:#00a0ad;}

.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: #ea8046;
    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;
}
	.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;}

	.courceBox .detailBox dt{
    background: #000;
    color: #fff;
    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: 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: 0.8em;
	    font-weight: bold;
	    margin-top: 0.5em;
	    color: #e05a24;
	}
	.courceBox .detailBox dd .priceTxt 
	.courceBox .detailBox dd{}
	.courceBox .detailBox .capacity{
    margin-left: 2em;
}
	.courceBox .detail{background: #ee141e;color: #fff;padding: 1em 4em;}

a.detail.btnBox {}
.courceBox .infoBox{
    margin: 1em auto 2em;
}
.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.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 .contentsBox{width: 100%;}
    .courceBox{padding:1em 1em 2em; }
    .countryBox .titleBox .ttl .txtTop{padding: 1em 0.2em 1em  calc(50px + 0.5em);font-size: 1.5em;}
    .countryBox .titleBox .description{margin: 0.5em 0 1em;}
    
    
    .gradeBox li{font-size: 80%;}
	.countryBox  .countryBoxInner{padding: 5%;}
    .courceBox .courceBoxinner .states.contactUs{font-size: 80%;}
    .courceBox .courceTtl{line-height: 1.2;padding: 0.5em;}
    
    .courceBox .detailBox {margin: 1em auto 0em;} 
    .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: 1.8em;line-height: 1em;}

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

    .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;}
    
    
    
/*国旗*/
    .courceBox .courceBoxinner{flex-wrap: wrap;}
    .courceBox .courceBoxinner .flag_s{padding: 0.5em 0.2em 0.5em calc(30px + 0.5em);font-size: 1.2em;}
    .countryBox.country_aus .flag_s:before{top: 0; bottom: 0;margin: auto;}

    
}