/*
font-family: "Noto Sans JP", sans-serif;
font-family: "Tomorrow", sans-serif;
*/
/*******************************************************************************
header
********************************************************************************/
#header{
    position: relative;
    background-color: #FFF;
    width:100%;
    padding-left: calc((100% - 1000px) / 2);
    padding-right: calc((100% - 1000px) / 2);
    border-bottom: 1px solid #CCC;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 10;  
}
#header.fixed{
    position: fixed;
    left: 0;
    top: 0;
}
#header #logo{
    width: 18em;
    margin: 5px ;
}
#header #logo img{
    width: 100%;
}
#header .navi{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
#header .navi li a{
    display: block;
    padding: 0.5em 1em;
    font-weight: 500;
}
/*PC非表示*/
#navi-cat,#navi-new,#navi-sch{
    display: none;
}
#header #h-hamburger{
    display: none;
}



/*--1000px以下------------------------------------*/
@media only screen and (max-width: 1000px) {
/*hamburgerMenu*/
header{
    height: 50px;
}
#header #logo{
    width: 58vw;
    max-width: 16em;
    margin: 5px ;
}
#header #h-hamburger{
    display: block;
    width: 64px;
    height: 64px;
    padding: 20px 18px 14px 14px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    top: -9px;
    right: -9px;
    background-color: #66ccff;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 2px 2px #999;
    z-index: 2;
}
#header #h-hamburger span{
    display:block;
    width: 25px;
    height: 3px;
    background-color: #FFF;
    margin: 0 auto;
    transition: 0.2s;
    transform-origin: center center;
}
#header #h-hamburger span:nth-of-type(2){
    margin-top: 3px;
}
#header #h-hamburger span:nth-of-type(3){
    margin-top: 3px;
}
#header #h-hamburger span:nth-of-type(4){
    background-color: transparent;
    font-size: 12px;
    color: #FFF;
    height: auto;
    width: auto;
}
#header #h-hamburger.open span:nth-of-type(2){
    transform: rotate(45deg) translateX(7px) translateY(7px);
}
#header #h-hamburger.open span:nth-of-type(3){
    transform: rotate(-45deg) translateX(-3px) translateY(3px);
}

#header #h-hamburger.open span:nth-of-type(1),
#header #h-hamburger.open span:nth-of-type(4){
    display: none;
}
/*header-navi*/
#header #header-navi{
    display: block;
    position: absolute;
    top: 50px;
    right: -100%;
    height: calc(100vh - 50px);
    width: 330px;
    z-index: 1;
    background-color: #FFF;
    box-shadow: -1px 0 3px rgba(0,0,0,0.1);
    transition: 0.4s;
}
#header #header-navi.open{
    right: 0;
}
#navi-cat,#navi-new,#navi-sch{
    display: block;
}
#header .navi{
    display: flex;
}
#header .navi > li{
    flex-basis: 100%;
}
#header .navi > li a{
    padding: 1em 1em 1em 2em;
}
[id^="navi-"] > a::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-top: -2px;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}
#navi-cat a::before{
    background-image: url("../img/navi_icon_cat.svg") ;
    background-size: contain;
}
#navi-new a::before{
    background-image: url("../img/navi_icon_new.svg") ;
}
#navi-prg a::before{
    background-image: url("../img/navi_icon_prg.svg") ;
}
#navi-clm a::before{
    background-image: url("../img/navi_icon_clm.svg") ;
}
#navi-rep a::before{
    background-image: url("../img/navi_icon_rep.svg") ;
}
#navi-sch a::before{
    background-image: url("../img/navi_icon_sch.svg") ;
}
#navi-inq a::before{
    background-image: url("../img/navi_icon_inq.svg") ;
    background-size: contain;
}




/*sub-nav*/
#header #navi-cat-sub{
    width:calc(100% - 4em);
    background-color: #FFF;
    margin-left: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#header #navi-cat-sub li{
    flex-basis: 100%;
    border-radius: 8px;
    margin-bottom: 3%;
    box-shadow: 1px 2px 2px #CCC;
    border: 2px solid #FFF;
}
#header #navi-cat-sub li a{
    color: #FFF;
    padding: 1em 0.5em;
    line-height: 1.4;
    font-size: 0.9em;
    text-align: center;
}
#header #navi-cat-sub li a br{
    display: none;
}

#header #navi-cat-sub li.sub-ca01{
    background-color: #33c3a7;
}
#header #navi-cat-sub li.sub-ca02{
    background-color: #f3b100;
}
#header #navi-cat-sub li.sub-ca03{
    background-color: #39a5db;
}
#header #navi-cat-sub li.sub-ca04{
    background-color: #f5756e;
}

}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
html.is-fixed{
    height: 100%;
    overflow: hidden;
}

.navi-bg{
    width: 100%;
    height: calc(100vh - 50px);
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 50px;
    right: -100%;
}
.navi-bg.open{
    right: 0;
}

}

/*--460px以下------------------------------------*/
@media screen and (max-width: 460px)  {

header{
    font-size: 3.8vw;
}
/*header-navi*/
#header #header-navi{
    width: 84%;
    padding-bottom: 3em;
}
#header .navi > li a{
    padding-left: 1.5em;
}
/*sub-nav*/
#header #navi-cat-sub {
    width: calc(100% - 3em);
    margin-left: 1.5em;
}
#header #navi-cat-sub li{
    flex-basis: 49%;
}
#header #navi-cat-sub li a br {
    display: block;
}
}
/*******************************************************************************
breadcrumbs
********************************************************************************/
.breadcrumbs {
    background-color: #FFF; 
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #DDD;
}
.breadcrumbs ul{
    display: flex;
    font-size: 0.9em;
    padding: 0.3em 0;

}
.breadcrumbs ul li{
    margin-right: 1em;
    position: relative;
    color: #333;
}
.breadcrumbs ul li::after{
    content: ">";
    display: inline-block;
    position: relative;
    right: -0.5em;
    color: #999;
}
.breadcrumbs ul li:last-child::after{
    display: none;
}
.breadcrumbs ul li a{
    color: #999;
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.breadcrumbs {display: none;}
}

/*******************************************************************************
section common
********************************************************************************/
.sectionCommon{
    padding-top: 7%;
    padding-bottom:10%;
    position: relative;
}
.sectionCommon h3{
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: 500;
    margin-bottom: 3%;
    line-height: 1.4;
}
.sectionCommon h3 strong {
    font-size: 1.8em;
    order: 2;
    flex-basis: 100%;
    color: #333;
}
.sectionCommon h3 strong::before{
    content: "";
    display: inline-block;
    vertical-align:middle;
    width: 1em;
    height: 1em;
    line-height: 1;
    margin-right: 0.2em;
    margin-bottom: 0.3em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sectionCommon h3 span{
    font-family: "Tomorrow", sans-serif;
    font-weight: 400;
    margin-right: 0.5em;
    order: 1;
    flex-basis: 100%;
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.sectionCommon h3{
    font-size: 3.3vw;
}
}

/*******************************************************************************
Category
********************************************************************************/
#category{
    background: url("../img/category_bg.webp");
}
#category::before{
    content: "";
    display: block;
    width: 11em;
    padding-top: 7.3em;
    background: url("../img/illust01.webp") no-repeat left top /contain;
    position: absolute;
    left: 50%;
    top: -2em;
    transform: translateX(230%);
}
#category h3 span{
    color: #f5756e;
}
#category h3 strong::before{
    background-image: url("../img/title_icon_lamp.webp");
}
.caWrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.caBox{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: stretch;
    flex-basis: calc(100% / 2 - 0.7em);
    max-width:  calc(100% / 2 - 0.7em);
    margin-bottom: 1.5em;
    border: 10px solid #FFF;
    background-color: #FFF;
    border-radius: 5px;
}
.caBox::before{
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 4em;
    height: 2.5em;
    background: linear-gradient(to right bottom, transparent 50%,#65e297 51%) no-repeat top left/100% 100%;
}
.caBox::after{
    content: "Go";
    display: inline-block;
    position: absolute;
    right: 0em;
    bottom: 0em;
    color: #FFF;
    font-size: 1.2em;
    line-height: 1.4;
    font-weight: 600;
    padding: 0 0.3em;
    background: url("../img/ca_arrow.png") no-repeat right bottom / contain;
}
.caBox h4{
    display: block;
    position: relative;
    flex-basis: 100%;
    margin:0;
    color: #FFF;
    font-size: 1.5em;
    line-height: 1.2;
    padding:0.2em 0 0.6em 2.8em;
}
.caBox h4 br{display: none;}
.caBox h4::before{
    content: "";
    display: inline-block;
    vertical-align: bottom;
    width: 2.4em;
    height: 2em;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
}
.caBox .caPhoto{
    flex-basis: 34%;
    max-width:34%;
    position: relative;
    padding-top: 34%;
    overflow: hidden;
}
.caBox .caPhoto img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
}
.caBox .caPhoto + p{
    flex-basis: 66%;
    max-width:66%;
    padding:1em;
    font-size: 0.95em;
}
#studyTour.caBox {border-color: #33c3a7;}
#studyTour.caBox::before {background: linear-gradient(to right bottom, transparent 50%,#33c3a7 51%) no-repeat top left/100% 100%;}
#studyTour h4{background-color: #33c3a7;}
#studyTour h4::before {background-image: url("../img/ca_icon_01.webp");}
#familyTour.caBox { border-color: #f3b100;}
#familyTour.caBox::before {background: linear-gradient(to right bottom, transparent 50%,#f3b100 51%) no-repeat top left/100% 100%;}
#familyTour h4{background-color: #f3b100;}
#familyTour h4::before {background-image: url("../img/ca_icon_02.webp");}
#overseasPrograms.caBox {border-color: #39a5db;}
#overseasPrograms.caBox::before {background: linear-gradient(to right bottom, transparent 50%,#39a5db 51%) no-repeat top left/100% 100%;}
#overseasPrograms h4{background-color: #39a5db;}
#overseasPrograms h4::before {background-image: url("../img/ca_icon_03.webp");}
#explorationProgram.caBox {border-color: #f5756e;}
#explorationProgram.caBox::before {background: linear-gradient(to right bottom, transparent 50%,#f5756e 51%) no-repeat top left/100% 100%;}
#explorationProgram h4{background-color: #f5756e;}
#explorationProgram h4::before {background-image: url("../img/ca_icon_04.webp");}

.caLink a{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    z-index: 2;
}
.prgBox .term,
.prgBox .price{
	position: relative;
	padding-left: 1.5em;
	line-height: 1.3;
	margin-bottom: 0.5em;
}
.prgBox .term::before{
	content: "";
	display:inline-block;
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1em;
	height: 1em;
	background:url("../../common/img/icon_calendar.webp") no-repeat left top;
	background-size: contain;
}
.prgBox .price::before{
	content: "";
	display:inline-block;
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1em;
	height: 1em;
	background:url("../../common/img/icon_en.webp") no-repeat left top;
	background-size: contain;
}
.prgBox .tourLink a[target="_blank"]::before {
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	border-radius: 5px;
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	text-indent: inherit;
	background: url("../../common/img/icon_blanklink.webp") no-repeat center;
	background-size: contain;
}
/*--1000px以下 ------------------------------------*/
@media only screen and (max-width: 1000px) {
.caBox{
}
.caBox h4{
    font-size: 2.2vw;
} 


}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.caBox{
    border-radius: 5px;
    box-shadow: 1px 1px 3px #CCC;
    flex-basis: calc(100% / 2 - 1.5%);
    max-width: calc(100% / 2 - 1.5%);
    margin-bottom: 3%;
}
.caBox .caPhoto {
    flex-basis: 100%;
    max-width: 100%;
    padding-top: 60%;
    border-radius: 5px;
    overflow: hidden;
}
.caBox .caPhoto img{
    width: 100%;
    height: auto;
}
.caBox .caPhoto + p{
    display: none;
}
.caBox h4{
    padding:0.5em 0 0 0;
    font-size: 4vw;
    order: 2;
}
.caBox h4 br{display: block;}
.caBox h4::before{
    display: none;
}
#studyTour.caBox {background-color: #33c3a7;}
#familyTour.caBox { background-color: #f3b100;}
#overseasPrograms.caBox {background-color: #39a5db;}
#explorationProgram.caBox {background-color: #f5756e;}
.caBox::before{
    display: none;
}
.caBox::after{
    content: "";
    z-index: 1;
    width: 1em;
    height: 1em;
    background:url("../img/ca_arrow2.png") no-repeat right bottom;
}
}
/*******************************************************************************
Search for travel
********************************************************************************/
#searchForTravel{
    background: url("../img/searchForTravel_bg.webp") center top;
}
#searchForTravel::before{
    content: "";
    display: block;
    width: 50%;
    padding-top: 50%;
    background: url("../img/searchForTravel_world.webp") no-repeat left top /contain;
    position: absolute;
    left: -11%;
    top: 0;
    opacity: 0.5;
}
#searchForTravel::after{
    content: "";
    display: block;
    width: 14em;
    padding-top: 4.3em;
    background: url("../img/illust02.webp") no-repeat left top /contain;
    position: absolute;
    left: 52%;
    top: -2em;
    transform: translateX(-280%);
}

#searchForTravel h3 span{
    color: #39a5db;
}
#searchForTravel h3 strong::before{
    background-image: url("../img/title_icon_glass.webp");
}
.search-box{
    display: block;
    position: relative;
    padding: 10px;
    background-color: #FFF;
    margin-bottom:2em;
}
.sort-category{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sort-category::before{
    content: "絞込み";
    display: inline-block;
    background-color: #999;
    color: #FFF;
    text-align: center;
    flex-basis: 4em;
    padding-top: 0.9em;
}
.sort-category li{
    position: relative;
    flex-basis: calc((100% - 4em - 8px) / 4);
    max-width: calc((100% - 4em - 8px) / 4);
    line-height: 1.2;
}
.sort-category li label{
    position: relative;
    text-align: center;
    display: block;
    color: #FFF;
    padding: 0.5em;
    cursor: pointer;
}
.sort-category li input{
    display: none;
}
.sort-category li input + label{
    opacity: 0.5;
}
.sort-category li input:checked + label,
.sort-category li input + label.on{
    opacity: 1;
}

.sort-category li.sort01 label{background-color: #33c3a7;}
.sort-category li.sort02 label{background-color: #f3b100;}
.sort-category li.sort03 label{background-color: #39a5db;}
.sort-category li.sort04 label{background-color: #f5756e;}

.prgBox.is-hide{
    display: none;
}

.programListWrap{
    position: relative;
    z-index: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.programListWrap::before,
.programListWrap::after{
    content: "";
    display: block;
    flex-basis: calc(100% / 3 - 2%);
    max-width:  calc(100% / 3 - 2%);
    order: 1;
}
.prgBox{
    position: relative;
    flex-basis: calc(100% / 3 - 2%);
    max-width:  calc(100% / 3 - 2%);
    margin-bottom: 2em;
    background-color: #FFF;
    box-shadow: 1px 1px 6px rgba(0,0,0,0.3);
}
.prgBox dt img{
    width: 100%;
}
.prgBox dd{
    padding: 4% 4% 5%;
}
.prgBox h4{
    position: relative;
    margin: 1.5em 0 0.5em ;
    font-size: 1.2em;
    line-height: 1.3;
}
.prgBox h4::before{
    display: inline-block;
    padding: 0.2em;
    position: absolute;
    top: -2.2em;
    color: #FFF;
    font-size: 0.7em;
    font-weight: 400;
}
.prgBox[data-category="study"] h4::before{
    content: "中・高・大学生向けスタディーツアー";
    background-color: #33c3a7;
}
.prgBox[data-category="family"] h4::before{
    content: "めいてつ探究クエスト";
    background-color: #f3b100;
}
.prgBox[data-category="abroad"] h4::before{
    content: "小学生向け海外プログラム";
    background-color: #39a5db;
}
.prgBox[data-category="exploration"] h4::before{
    content: "大人のための探究プログラム";
    background-color: #f5756e;
}
.tourLink a{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/*--1000px以下 ------------------------------------*/
@media only screen and (max-width: 1000px) {
.prgBox{
    flex-basis: calc(100% / 2 - 3%);
    max-width:  calc(100% / 2 - 3%);
}
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.search-box{
    padding: 5px;
}
.sort-category::before{display: none;}
.sort-category li {
    flex-basis: calc((100% - 4px) / 2);
    max-width: calc((100% - 4px) / 2);
    margin: 2px 0;
}
.prgBox{
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    max-width:  100%;
    margin-bottom: 0.5em;
}
.prgBox dt{
    flex-basis: 36%;
    max-width: 36%;
    padding-top: 35%;
    position: relative;
    overflow: hidden;
}
.prgBox dt img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
    width: auto;
}
.prgBox dd{
    flex-basis: 64%;
    max-width: 64%;
    padding: 3%;
}
.prgBox h4{
    font-size: 1.1em;
}
.prgBox dd h4 br{
    display: none;
}
}
/*******************************************************************************
bottomBanner
********************************************************************************/
#bottomBanner{
    padding-top: 3%;
    padding-bottom: 3%;
    background-color: #f7f7f7;
}
.bottomBanner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.bottomBanner::before{
    content: "";
    display: block;
    flex-basis: calc(100% / 3 - 2%);
    order: 1;
}
.bottomBanner li{
    flex-basis: calc(100% / 3 - 2%);
    max-width:  calc(100% / 3 - 2%);
    margin: 0.5em 0;
}
.bottomBanner li img{
    width: 100%;
}
/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.bottomBanner{
    width: 86%;
    margin: 0 auto;
}
.bottomBanner li{
    flex-basis:100%;
    max-width: 100%;
}

}

/*******************************************************************************
siteFooter
********************************************************************************/
#siteFooter{
    padding-top: 3em;
    background-color: #e2e2e2;
}
.sitefooterWrap{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3em;
}
.sf-left{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: flex-start;
    max-width:calc(400px + 2%);
    padding-right: 2%;
}
.sf-left h3{
    width: 14em;
    margin-right: 1em;
}
.sf-left h3 img{
    width: 100%;
}
.snsList{
    display: flex;
    flex-wrap: wrap;
}
.snsList li{
    margin-right: 10px;
    flex-basis: 2.6em;
    border-radius: 10px;
    overflow: hidden;
}
.snsList li img{
    width: 100%;
}
.company{
    margin-top: 1em;
}
.company .com-name{
    font-size: 1.3em;
    font-weight: 500;
}
.company .com-address{
    font-size: 0.9em;
}
.company .com-tel a{
    font-weight: 500;
    font-size: 1.1em;
}
.sf-right{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-left: 2%;
    border-left: 1px solid #999;
}
.sf-prog{
    margin: 0 1em;
}
.sf-prog li{
    margin: 0.3em 0; 
}
/*.sf-prog li::before{
    content: "▼";
    display: inline-block;
    font-size: 0.7em;
    line-height: 1;
    transform: rotate(-90deg);
    color: #666;
    margin-right: 0.5em;
}*/
.sf-prog a{
    font-weight: 600;
    line-height: 1.2;
}
.sf-prog li.sf-sub{
    margin-left: 1em;
}
.sf-prog li.sf-sub a{
    font-weight: 400;
}
.copy{
    text-align: center;
    color:#FFF;
    background-color: #676767;
    font-size: 0.8em;
    padding: 0.5em;
}
/*--1000px以下 ------------------------------------*/
@media only screen and (max-width: 1000px) {
.sitefooterWrap{
    justify-content: center;
}
.sf-right{
    flex-basis: 100%;
    max-width: none;
    margin-top: 1em;
    padding: 0;
    border: 0;
    justify-content: center;
}
}


/*--737px以下 ------------------------------------*/
@media only screen and (max-width: 737px) {
.sitefooterWrap{
    margin-bottom: 0;
}

.sf-left{
    padding: 0;
    max-width: none;
    flex-basis: 100%;
    justify-content: center;
}
.sf-prog:nth-of-type(2){
    padding: 0;
    flex-basis: 110%;
    max-width: 110%;
    display: flex;
    flex-wrap: wrap;
    margin: 1em -5% 0;
    
}
.sf-prog:nth-of-type(2) li{
    flex-basis: 50%;
    max-width: 50%;
    text-align: center;
    margin: 0;
    padding: 0.8em 0.5em;
    border: 1px solid #CCC;
    border-bottom: 0;
    border-left: 0;
}
}