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

/* h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,dl,dt,dd,form,pre,input,textarea{border:1px solid #ccc} */


.secBox > .sectionInner{
    max-width: initial;
    width: 100%;
    margin: auto;
    padding: 0;
}
.contentsBox{margin: 0;width: 100%;}
.courceBoxInner{white-space:normal}


.contentBox{width: 960px;max-width: 95%;margin: 1em auto;padding: 3em 0;}


#wrap .sectionInner dt{/* font-size: 2em; */}
#wrap .sectionInner dd{font-size: 1.2em;}

/* ------------------------------------------------------
    基本情報 
--------------------------------------------------------*/
#basicinfo{}
#basicinfo .titleBox{
    text-align: center;
    padding: 0;
    margin: 3em auto 0;
}
#basicinfo .titleBox h2{
    text-align: center;
    /* font-size: 2.8em; */
    font-weight: bold;
    color: #39bac3;
    line-height: 1;
}
#basicinfo .titleBox p{
    text-align: center;
    font-size: 1.35em;
    font-weight: bold;
    color: #b3b3b3;
}
#basicinfo .timetagBox{width: 100%;max-width: 960px;margin: 0px auto 0.5em;display: flex;justify-content: space-between;}
#basicinfo .timetagBox .optiontagBox{display:flex;gap:0.5em;flex-wrap:wrap;align-items: center;}
#basicinfo .timetagBox .optiontagBox li{border: 1px solid rgba(57 ,186, 195,1);color: #666;/* background: rgba(57 ,186, 195,0.6); */padding: 2px 9px;border-radius: 1em;font-size: 80%;}
#basicinfo .timetagBox .timetag{text-align:right;color: #b3b3b3;}

/* slick */
.slickslider{}
.slickslider {
    display: flex;
    gap: 2px;
}
.slickslider.slick-initialized{display: block;}
.slickslider li.slide-item{aspect-ratio: 4/2.7;width: 640px;background-repeat: no-repeat;background-size: cover;background-clip: content-box;background-position: center;opacity: 0.55;transition: ease-in-out .5s;overflow: hidden;border-left: 0.5em solid transparent;border-right: 0.5em solid transparent;}
.slickslider li.slide-item.slick-current{opacity: 1;}
.slick-dots{bottom: -2.4em;}
.slick-dots li button:before{font-size: 12px;}
.slick-dots li.slick-active button:before{color:#0072c5;}
.slick-dotted.slick-slider{margin-bottom: 3em;}



/* ------------------------------------------------------
    プロフィール 
--------------------------------------------------------*/
#profile{}
#profile.profileBox{}
#profile.profileBox .contentBox{
    gap: 2em;
    padding-bottom: 1em;
}

#profile.profileBox .contentBox .content_img{
    width: 160px;
    height: 160px;
    /* background: #ccc; */
    background-size: cover;
    background-position: center;
    border-radius: 10em;
    overflow: hidden;
    background-repeat: no-repeat;
}
#profile.profileBox .contentBox .content_img img{
    object-fit: cover;
}

#profile.profileBox .contentBox .content_profile{
    font-size: 2em;
    line-height: 1;
}

.content_profile {}
#profile.profileBox .contentBox .courceTxt{
    line-height: 1.4;
}

p.courceTxt {}
#profile.profileBox .contentBox .countryName{
    position: relative;
    line-height: 1.4;
    display: inline-block;
    padding-right: 2em;
}
#profile.profileBox .contentBox .countryName:after{content:"";display: inline-block;position:absolute;height: 1.1em;width: 1.76em;/* background:#ccc; */background-size: cover;background-repeat:no-repeat;filter: drop-shadow(2px 2px 2px #aaa9);top: 0;bottom: 0;right: 0;margin: auto;}

#profile.profileBox .contentBox .nameTxt{line-height: 1.4;}
#profile.profileBox .contentBox .travelPeriod {
    line-height: 2;
}
#profile.profileBox .contentBox .travelPeriod span{
    background: #666666;
    color: #fff;
    padding: 3px 6px;
    margin-right: 0.4em;
}

#profile.profileBox .profileInfoBox{
    text-align: center;
    padding-top: 0;
}
#profile.profileBox .profileInfoBox .profileMainText{
    text-align: center;
    font-size: 2.2em;
    font-weight: bold;
    margin-bottom: 3em;
    padding: 0 4px 2px 4px;
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(255, 255, 102, 1);
    text-underline-offset: -0.2em;
    text-decoration-skip-ink: none;
}
#profile.profileBox .profileInfoBox .profileMainText +  dl.profileQA{margin-top: 7em;}

#profile.profileBox dl.profileQA{
    margin-bottom: 5em;
}
#profile.profileBox dl.profileQA .question{
    position: relative;
    font-size: 2em;
    font-weight: 500;
    color: #39bac3;
    margin-left: 2em;
    margin-bottom: 1em;
}
#profile.profileBox dl.profileQA .question:before{content:"";position:absolute;width: 1.3em;height:4px;background: #39bac3;left: -1.8em;top: 0.8em;/* bottom: 0; */margin: auto;}

#profile.profileBox dl.profileQA .question:before{}
#profile.profileBox dl.profileQA .answer{
    /* font-size: 1.325em; */
}

/* ------------------------------------------------------
    生活
--------------------------------------------------------*/
#life{}
#life.lifeBox{width: 100%;max-width: 100%;/* max-width: initial; */background:#fef9f5;/* padding-top: 3em; */}

#life .titleBox{margin: 2em auto;}

#life .slickslider{
    width: 100%;
    margin: auto;
}
#life.lifeBox .lifeInfoBox{}

#life.lifeBox .lifeInfoBox:has(:not(dl.lifeQA)){
    /* display: none; */
}
#life.lifeBox .lifeInfoBox dl.lifeQA{
    margin-bottom: 5em;
}
#life.lifeBox .lifeInfoBox dl.lifeQA .question{
    position: relative;
    font-size: 2.2em;
    font-weight: 500;
    color: #e18e14;
    margin-bottom: 0.5em;
    padding-left: 1.5em;
}
#life.lifeBox .lifeInfoBox dl.lifeQA .question:before{content:"Q.";left: 0;top: -0.1em;position: absolute;font-size: 120%;margin-right:0.25em}
#life.lifeBox .lifeInfoBox dl.lifeQA .answer{
    /* font-size: 1.325em; */
}


#life.lifeBox .lifeFreeArea{
    font-size: 125%;
}

#life.lifeBox .lifeFreeArea:has(.lifeQA){margin: 2em auto;}

#life.lifeBox .lifeFreeArea table{
    margin: 0;
    background: #fff;
}
#life.lifeBox .lifeFreeArea table tr{
}
#life.lifeBox .lifeFreeArea table th{}
#life.lifeBox .lifeFreeArea table td{
    padding: 0.5em 1em;
    vertical-align: inherit;
    line-height: 1.4;
    font-size: 16px;
}
#life.lifeBox .lifeFreeArea table td.ntlExp {background-color:#e18e14;height: auto;color: #FFFFFF;text-align: left;border-top: 1px #9f9fa0 solid;border-bottom: 1px #9f9fa0 solid;margin: 2px 0px 2px 0px;padding: 8px 10px 8px 24px;width: 10em;max-width: 30%;}
#life.lifeBox .lifeFreeArea table td.ntlExp~td{
    padding: 8px 8px 8px 16px;
}

/* slick */
#life .slickslider{}
#life .slickslider {}
#life .slickslider.slick-initialized{}
#life .slickslider li.slide-item{
    max-width: 320px;
    aspect-ratio: 4/3;
    background-position: center;
    width: 32%;
    height: calc(960px * 2 / 9);
    opacity: 1;
}
#life .slick-prev{left: -45px;}
#life .slick-next{right: -25px;}
#life .slick-prev,
#life .slick-next{height:auto;width:auto;z-index:999}
#life .slick-prev:before,
#life .slick-next:before{content: '';position:absolute;background-image: url("/users_voice/wp-content/themes/maintheme_users_voice/images/detail/icon_allowR.png");background-size: cover;height: 54px;width: 22px;margin: auto;top: 0;bottom: 0;}
#life .slick-prev:before{background-image: url("/users_voice/wp-content/themes/maintheme_users_voice/images/detail/icon_allowL.png");}
#life .slick-next:before{background-image: url("/users_voice/wp-content/themes/maintheme_users_voice/images/detail/icon_allowR.png");}

/* ------------------------------------------------------
    トピックス
--------------------------------------------------------*/


#topic{}
#topic .topicBox{
    margin: 5em auto 1em;
}
#topic .topicInfoBox{
    border: solid 1.3px #39bac3;
    padding: 3em 2.5%;
}
#topic .topicInfoBox.special{
    border: solid 6px #39bac377;
    }
#topic .topicInfoBox .topicTitle{
    position: relative;
    font-size: 2em;
    font-weight: 500;
    color: #39bac3;
    padding: 0 4px 2px 4px;
    margin-left: 2em;
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-color: rgba(255, 255, 102,1);
    text-underline-offset: -0.2em;
    text-decoration-skip-ink: none;
}
#topic .topicInfoBox .topicTitle:before{content:"";position:absolute;width: 1.3em;height:4px;background: #39bac3;left: -1.8em;top: 0.8em;/* bottom: 0; */margin: auto;}
#topic .topicInfoBox .topicMainText{
    /* font-size: 1.2em; */
    margin-top: 1em;
}
#topic .topicInfoBox .topicFreeArea{
    /* font-size:125%; */
    overflow-x: scroll;
}

#topic .topicInfoBox .topicFreeArea table{min-width: 610px;}
#topic .topicInfoBox .topicFreeArea table .exp{ border-collapse: collapse; margin-top:0px;}
#topic .topicInfoBox .topicFreeArea .box1expT img{ padding-right:7px;}
#topic .topicInfoBox .topicFreeArea .box1expT { color:#FFF; padding-left: 10px; line-height: 2.2em; text-align:left;}
#topic .topicInfoBox .topicFreeArea .box1InnerL { padding:15px;}

#topic .topicInfoBox .topicFreeArea th,
#topic .topicInfoBox .topicFreeArea td{border:none;min-width: 5em;}

#topic .topicInfoBox .topicFreeArea td.ntlExp { padding: 8px 10px 8px 24px; background-color:#e18e14; border: 1px #9f9fa0 solid;}
#topic .topicInfoBox .topicFreeArea td.s3,
#topic .topicInfoBox .topicFreeArea td.s2{ padding: 8px 10px 8px 24px; border: 1px #9f9fa0 solid;}

#topic .topicInfoBox .topicFreeArea th.expL {
    padding: 1px 0px 1px 0px;
    background-color: #e18e14;
    font-weight: bold;
    color: #FFFFFF;
    border-top: 1px #9f9fa0 solid;
    border-bottom: 1px #9f9fa0 solid;
    padding: 1px 3px 1px 3px;
    line-height: 2em;}
	
#topic .topicInfoBox .topicFreeArea th.expM {
    background-color: #f0d5b1;
    font-weight: normal;
    color: #3B3B3B;
    border-bottom: 1px #9f9fa0 solid;
    padding: 1px 3px 1px 3px;
    line-height: 2em;
    min-width: 6em;
    }
	
#topic .topicInfoBox .topicFreeArea td.exp_yes {
    color: #3B3B3B;
    padding: 1px 3px 1px 20px;
    border-top: 1px #9f9fa0 solid;
    border-bottom: 1px #9f9fa0 solid;
	border-left: 1px #9f9fa0 solid;
}

#topic .topicInfoBox .topicFreeArea td.exp_no {
    color: #3B3B3B;
    background-color: #eeeeee;
    padding: 1px 3px 1px 3px;
    border-top: 1px #9f9fa0 solid;
    border-bottom: 1px #9f9fa0 solid;
    border-left: 1px #9f9fa0 solid;
}

#topic .topicInfoBox .topicFreeArea td.ptl {
    color: #3B3B3B;
    padding: 2px 5px 2px 5px;
    border-top: 1px #9f9fa0 solid;
    border-bottom: 1px #9f9fa0 solid;
    border-left: 1px #9f9fa0 solid;
}

#topic .topicInfoBox .topicFreeArea .expDetail { background-color:#e18e14; color:#FFF; padding:2px 10px; line-height: 2.2em; clear: both;  margin: 20px 0px 10px 0px;}

#topic .topicInfoBox .topicFreeArea .padTB15{ margin-top:20px;}

#topic .topicInfoBox .topicFreeArea .txtOrg {color:#e18e14;}
/* ------------------------------------------------------
    CTA
--------------------------------------------------------*/
.ctaCource{}
.ctaCource .courceBtn{
    text-align: center;
}
.ctaCource .courceAnker{
    position: relative;
    font-size: clamp(16px,3vw, 20px);
    background: #39bac3;
    color: #fff;
    padding: 1.5em min(7vw,4em);
    display: inline-block;
    white-space: nowrap;
}




.ctaBnr ul.onlineSeminrBox{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	margin:30px auto 0;
}

.ctaBnr .onlineSeminrBox li{text-align: center;width: 50%;}
.ctaBnr .onlineSeminrBox li:first-child{margin-top: -4px;}
.ctaBnr .onlineSeminrBox li img{width: 100%;}

@media screen and (max-width:1100px){
    #life .slick-prev{left: 25px;}
    #life .slick-next{right: 45px;}
}


@media screen and (max-width:800px){

    
}

@media screen and (max-width: 480px){

    .contentBox{}

    #wrap .sectionInner dt{font-size: clamp(20px,5.5vw, 22px);}
    #wrap .sectionInner dd{font-size: clamp(14px,4vw, 16px);}
	/* ------------------------------------------------------
	    基本情報 
	--------------------------------------------------------*/
	#basicinfo{}
	#basicinfo .titleBox{
    }
	#basicinfo .titleBox h2{
        /* font-size: clamp(1.7em, 9.6vw, 2em); */
    }
	#basicinfo .titleBox p{
        font-size: clamp(1em, 3vw, 1.35em);
    }
	#basicinfo .timetagBox{
        flex-wrap: wrap;
        width: 95%;
    }
	#basicinfo .timetagBox .timetag{
        width: auto;
        margin: 0;
        display: inline-block;
    }
	
	/* slick */
	.slickslider{}
	.slickslider {}
	.slickslider.slick-initialized{}
	.slickslider li.slide-item{width: 100vw;/* max-width: 232px; */}
	.slickslider li.slide-item.slick-current{}
	.slick-dots{}
	.slick-dots li button:before{}
	.slick-dots li.slick-active button:before{}
	.slick-dotted.slick-slider{}
	
	
	
	/* ------------------------------------------------------
	    プロフィール 
	--------------------------------------------------------*/
	#profile{}
	#profile.profileBox{}
	#profile.profileBox .contentBox{
    max-width: 90%;
    gap: 2vw;
    justify-content: space-between;
}
	
	#profile.profileBox .contentBox .content_img{
        width: 28vw;
        height: 28vh;
        aspect-ratio: 1/1;
        max-height: 28vw;
    }
	#profile.profileBox .contentBox .content_img img{
	    object-fit: cover;
	}
	
	#profile.profileBox .contentBox .content_profile{
        width: 60vw;
        font-size: clamp(4vw, 18px, 5vw);
        font-weight: bold;
    }
        
	#profile .content_profile {}
	#profile.profileBox .contentBox .courceTxt{}
	
	#profile p.courceTxt {}
	#profile.profileBox .contentBox .countryName{}
	#profile.profileBox .contentBox .countryName .cityName{font-size:75%}
	#profile.profileBox .contentBox .nameTxt{}
	#profile.profileBox .contentBox .travelPeriod{
        font-size: 85%;
        margin-top: 0.5em;
    }
	#profile.profileBox .contentBox .travelPeriod span{padding: 1px 6px;}
	
	#profile.profileBox .profileInfoBox{}
	#profile.profileBox .profileInfoBox .profileMainText{
        text-align: left;
        font-size: clamp(20px,9.6vw,24px);
        margin-bottom: 1em;
    }
	#profile.profileBox .profileInfoBox .profileMainText +  dl.profileQA{margin-top: 4em;}
	
	#profile.profileBox dl.profileQA{
        margin-bottom: 2.5em;
    }
	#profile.profileBox dl.profileQA .question{
        font-weight: bold;
        font-size: clamp(22px, 5.7vw, 26px);
        line-height: 1.4;
        margin-left: 1.2em;
        margin-bottom: 0.6em;
    }
	#profile.profileBox dl.profileQA .question:before{
        width: 0.7em;
        left: -1em;
        height: 2px;
    }
	
	#profile.profileBox dl.profileQA .question:before{}
	#profile.profileBox dl.profileQA .answer{
        /* font-size: clamp(14px, 9.6vw, 16px); */
    }
	
	/* ------------------------------------------------------
	    生活
	--------------------------------------------------------*/
	#life{}
	#life.lifeBox{
    text-align: center;
}
	#life .slickslider{}
	#life.lifeBox .lifeInfoBox{
        padding: 0 0 3em;
        padding: 0;
        max-width: 90%;
        display: inline-block;
    }
	#life.lifeBox .lifeInfoBox dl.lifeQA{
    margin-bottom: 2em;
}
	#life.lifeBox .lifeInfoBox dl.lifeQA .question{
        font-size: clamp(22px, 5.7vw, 26px);
        font-weight: bold;
        line-height: 1.4;
    }
	#life.lifeBox .lifeInfoBox dl.lifeQA .question:before{
        top: -0.2em;
    }
	#life.lifeBox .lifeInfoBox dl.lifeQA .answer{
        /* font-size: clamp(14px, 9.6vw, 16px); */
    }
	#life.lifeBox .lifeFreeArea{
        max-width: 100%;
    }
	/* slick */
	#life .slickslider{}
	#life .slickslider {}
	#life .slickslider.slick-initialized{}
	#life .slickslider li.slide-item{opacity: 0.5;}
	#life .slickslider li.slide-item{
	    height: calc(100vw * 2.5 / 9);
	    width: 42vw;
	}
	#life .slickslider li.slide-item.slick-current{
	    opacity: 1;
	}
	#life .slickslider li.slide-item{}
	#life .slick-prev{
        left: 15px;
    }
	#life .slick-next{
        right: 35px;    
    }
	#life .slick-prev,
	#life .slick-next{
        z-index: 999;
    }
	#life .slick-prev:before,
	#life .slick-next:before{}
	#life .slick-prev:before{}
	#life .slick-next:before{}
	
	
	/* ------------------------------------------------------
	    トピックス
	--------------------------------------------------------*/
	
	
	#topic{}
	#topic .topicInfoBox{
	    max-width: 95%;
	    padding: 2em 3.5%;
	}
	.topicInfoBox.special{}
	#topic .topicInfoBox .topicTitle{font-size: clamp(22px, 5.7vw, 26px);line-height: 1.4;margin-left: 1em;}
	#topic .topicInfoBox .topicTitle:before{
        width: 0.7em;
        left: -1em;
        height: 2px;
    }
	#topic .topicInfoBox .topicMainText{
        /* font-size: clamp(14px, 9.6vw, 16px); */
    }
	#topic .topicInfoBox .topicFreeArea{
    }
	
	/* ------------------------------------------------------
	    CTA
	--------------------------------------------------------*/
	.ctaCource{}
	.ctaCource .courceBtn{}
	.ctaCource .courceAnker{
	    font-size: clamp(16px, 4.5vw, 20px);
	    line-height: 1.6;
	    white-space: pre-wrap;
	    padding: 0.8em min(10vw,4em);
	    display: inline-block;
	}
	
	
        
        
    .ctaBnr ul.onlineSeminrBox{
        flex-wrap: wrap;
    }
        
    .ctaBnr .onlineSeminrBox li{
        width: 90%;
    }
    .ctaBnr .onlineSeminrBox li:first-child{
        /* width: 80%; */
    }
    .ctaBnr .onlineSeminrBox li img{}

    
}




/* ------------------------------------------------

--------------------------------------------------*/

.v01 {}

.v01 .detailslider{max-width: 1500px;margin: auto;}



/* slick */
.v01 .slickslider{}
.v01 .slickslider.slick-initialized{}
.v01 .slickslider li.slide-item{
    aspect-ratio: 4 / 2.7;
    width: 280px;
}
.v01 .slickslider li.slide-item.slick-current{}
.v01 .slick-dots{}
.v01 .slick-dots li button:before{}
.v01 .slick-dots li.slick-active button:before{}
.v01 .slick-dotted.slick-slider{}

/* ------------------------------------------------------
    プロフィール 
--------------------------------------------------------*/
.v01 #profile{}
.v01 #profile.profileBox{}
.v01 #profile.profileBox .contentBox{}

.v01 #profile.profileBox .contentBox .content_img{
    width: 100px;
    height: 100px;
}
@media screen and (max-width: 480px){
    .v01 .slickslider li.slide-item {
        width: 100vw;
        max-width: 232px;
    }
}