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

/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
body { background:#F0F0F1;}
#wrap { width:960px; margin:0 auto;  position:relative;}


/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea { position:relative; width:680px;}
.headerAreaTitle { height:70px; border-bottom:#CCC solid 1px; margin-bottom:14px;}
.headerAreaTitle h1{ padding-top:15px;}
#breadcrumbArea	{position: absolute;width: 300px;top: 45px;left: 345px;}
#breadcrumbArea li{ float:left; margin-right:10px; font-size:90%;}
#breadcrumbArea li a{ display:block; background:url(/img/common/ico_contents01.png) right 2px no-repeat; padding-right:20px;}


/*----------------------------------------------------------------------------
 ***                                                       Header - gNavi
----------------------------------------------------------------------------*/
#gnavi{}
#gnavi li{ float:left;width: 16.66%;}
#gnavi li img{width: 100%;}


/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea {}
.contentsLeft{ float:left; width:670px; margin-bottom:30px; padding-left: 10px;}


/*----------------------------------------------------------------------------
 ***                                                              mainsection
----------------------------------------------------------------------------*/
.mainSection {width:670px;}

/* メインの表示領域 */
.infoSec{ padding-bottom:18px; margin-bottom:22px; background-color:#FFF;}
.infoSec .mainSectionInner{ width:634px; padding:20px 23px 0 23px;}
.titleBoxCH2{ border-bottom:#eee solid 4px; margin-bottom:15px; padding-bottom:0.2em;}
.infoSec h2{ float:left; border-left:#EC1E79 solid 6px; padding-left:10px; line-height:1.2emx; font-size:140%; font-weight:normal;}
.titleBoxCSele{ float:right; line-height:1.8em; padding:0 10px; font-size:120%}

/* 会員向けサービスのBOX */
.pickBox{ margin-bottom:20px;}
.pickBox li{ float:left;}
.pickBox li img{ margin-right:8px;}
.pickBox li.lastCha img{ margin-right:0;}
.svsBox{ border:#000 solid 3px; border-radius:10px; height:105px; background:url(/img/back_contents02.png) left top no-repeat; padding-top:15px;}
.svsBox h2{ float:left; padding:30px 0 0 115px; font-size:14px; line-height:1.2em;}
.svsBox .sectionInner{ float:right; width:420px;}
.svsBox li{ float:left;}
.svsBox li img{ margin:0 0 0 30px;}
.sideBox2{display:none;}


/* 表示領域パターン TOP用*/
.topInfo{}
.topInfo h3{ font-size:120%; font-weight:normal; line-height:1.2em; margin-bottom:0.6em;}
.topInfo .section{ margin-bottom:15px; padding-bottom:10px; border-bottom:#ddd solid 1px; position: relative; padding-bottom: 3rem; height: 125px; overflow: hidden;}
.topInfo .section.openBox{height: auto;}
.topInfo .sectionInner{ width:480px; float:right;}
.topInfo .topInfoImg{ width:150px; margin:0; float:left;}
.topInfo .topInfoH3Span{ display:block; line-height:1.5em; background:#333; font-size:80%; width:70px; padding:2px 0 0 0; float:left; color:#FFF; margin-right:10px; text-align:center;}
.topInfo .pullBtn{display:none;}
.udSection{ background: #fff; margin-bottom: 1rem; padding: 1.4rem;}
.udSection .titleBoxCH2 {font-size: 1.1rem;}
.topicSec{}
.topicSec .topicList{}
.topicSec .topicList li{ width: 48%; background: rgba(0, 0, 0, 0.7); position: relative; z-index: 0; border-radius: 1em; transition: .3s;}
.topicSec .topicList li:hover{opacity: 0.8; }
.topicSec .topicList li::before{ width: 100%; height: 100%; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.7; z-index: -1;background: url(/img/bnr_cpn210922.png) top center no-repeat; background-size: cover; border-radius: 1em;}
.topicSec .topicList li::after{ content: ""; position: absolute; width: 0; height: 0; bottom: 1em; right: 1em; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 0 0 1em 1em; z-index: 1;}
.topicSec .topicList li a{ width: 100%; height: 5rem; padding: 1rem 0; text-align: center; font-size: 1.1rem; font-weight: 600;  text-decoration: none; color: #fff;}
.supportSec{}
.supportSec .supportList{}
.supportSec .supportList li{width: 23%; margin-right: 2%; margin-bottom: 1em; transition: .3s;}
.supportSec .supportList li:hover{opacity: 0.6;}
.supportSec .supportList li:last-child{ margin-right: 0;}
.supportSec .supportList li.text_btn a{color: #F93; width: 100%; height: 2rem; padding: 1rem 0; text-align: center; background: #FCEDE1; font-size: 1rem; font-weight: 600; border: 2px dotted #F93; text-decoration: none; border-radius: 0.5em;}
.supportSec .supportList li.text_btn:nth-child(odd) a{color: #F99; border: 2px dotted #F99; }
.openBtnArea{position: absolute; bottom: 0; background: #fff; width: 100%; height: 3rem;display: flex; justify-content: center; align-items: center;}
.openBtnArea .wrapOpenBtn{ background: #999; color: #fff; padding: 0.4em 1em;cursor: pointer;}
.openBtnArea .wrapOpenBtn input{display: none; }

/* 表示領域パターン 海外情報用*/
.worldInfo{height: 240px; overflow-y: scroll;}
.worldInfo .ttl{color: #EC1E79; font-size: 1.1rem; font-weight: 600;}
.worldInfo .fwBold{font-weight: 600;}

/* 表示領域パターン ワーホリ情報用*/
.workingHolidey .topTxt{ background: url(/img/under/hs/ico_contents01.png) no-repeat; font-size: 1rem; padding: 0.6em 4rem 1.2em; border-bottom: dashed 1px #999; margin-bottom: 1em; position: relative}
.workingHolidey ul .btn:hover{opacity: 0.7;}
.workingHolidey ul .btn.nonActive{opacity: 0.7;}
.workingHolidey ul li{display: flex; width: 30%; align-items: center; background: #333; color: #fff; margin: 0 1% 1em;padding: 0.8em 1em; position: relative;}
.workingHolidey ul li img{width: 14px; margin-right: 0.5em;}
.wrapWhList{overflow-y: scroll; max-height: 710px;}
.whList{margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: dashed 1px #999;}
.whList .imgBox_main{width: 30%; height: 130px;}
.whList .imgBox img{width: 100%; height: auto;}
.whList .imgBox_main img{object-fit: cover; height: 100%;}
.whList .txtBox{margin-left: 1rem; width: 65%;}
.whList .txtBox .whListTtl{font-size: 1.1rem; font-weight: 600;}
.whList .txtBox .whListTtl .fs_s{font-size: 0.7em;}
.whList .txtBox .whListTtl .imgBox{margin-right: 0.5em; width: 30px; display: inline-block;}
.whList .txtBox .whListTtl .ico_rank{}
.whList .otherList{margin-bottom: 0.5em;}
.whList .otherList dt{display: inline-block; background: #999; color: #fff; padding: 0.4em 0.2em 0.2em; font-size: 0.8rem; border: solid 1px #999;}
.whList .otherList dd{display: inline-block;padding: 0.4em 0.2em; font-size: 0.8rem; margin-right: 0.5rem;}

/* 表示領域パターン ホームステイ用*/
.countryList .topTxt{ background: url(/img/under/hs/ico_contents01.png) no-repeat; font-size: 1rem; padding: 0.6em 4rem 1.2em; border-bottom: dashed 1px #999; margin-bottom: 1em; position: relative}
.countryList ul .btn{cursor: pointer; transition: .3s;}
.countryList ul .btn a{color: #fff; text-decoration: none; width: 100%; height: 100%;}
.countryList ul .btn:hover{opacity: 0.7;}
.countryList ul .btn.nonActive{opacity: 0.7;}
.countryList ul li{display: flex; width: 30%; align-items: center; background: #333; color: #fff; margin: 0 1% 1em;}
.countryList ul li img{width: 50px; margin-right: 0.5em;}
.countryList .topTxt_au{background: unset;}
.countryList .topTxt_au:before{ background: url(/img/under/hs/AU.png) no-repeat; content: ""; width: 50px; height: 30px; position: absolute; top: 5px; left: 0.5em; background-size: contain;}
.countryList .backBtn{ width: 130px; display: inline-block; position: absolute; right: 0;}
.countryList .backBtn img{ width: 100%;}
.countryList_under ul li{padding: 0.8em 1em; position: relative;}
.countryList_under ul li img{ width: 14px; margin-right: 0.5em;}
.countryList_under ul li .backBtn_ico{position: absolute; right: 0;}
.wrapHsList{max-height: 640px; overflow-y:scroll; width: 90%; margin: 0 auto;}
.hsList{margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: dashed 1px #999;}
.hsList .imgBox{width: 25%;}
.hsList .imgBox img{width: 100%;}
.hsList .txtBox{margin-left: 1rem;}
.hsList .txtBox .hsListTtl{font-size: 1.1rem; font-weight: 600;}
.hsList .otherList{margin-bottom: 0.5em;}
.hsList .otherList dt{display: inline-block; background: #999; color: #fff; padding: 0.4em 0.2em 0.2em; font-size: 0.8rem; border: solid 1px #999;}
.hsList .otherList dd{display: inline-block;padding: 0.4em 0.2em; font-size: 0.8rem; }

/* その他コンテンツページ汎用パーツ */
.otherContentsSec{}
.otherContentsSec .btn{transition: .3s;}
.otherContentsSec .btn:hover{cursor: pointer; opacity: 0.7;}
.otherContentsSec .otherContentsBox{ border-bottom: solid 1px #999; padding: 1rem 0;}
.otherContentsSec .otherContentsBox.borderNone{border: none;}
.otherContentsSec .topTtl{width: 100%; border: none; text-align: center; margin-bottom: 1rem;}
.otherContentsSec .topTxt{text-align: center; font-size: 1.1rem; font-weight: 600;}
.otherContentsSec .topTxt .pinkTxt{color: #ed1e79;}
.otherContentsSec .topTxt .sTxt{font-size: 0.6em;}


/*----------------------------------------------------------------------------
 ***                                                              rightsection
----------------------------------------------------------------------------*/
.rightSection { width:260px; float:right; background:#FFF;}
.rightSectionInner { padding:0 10px 10px 10px;}
.prfUl{ background:url(/img/common/back_contents03.png) center top repeat-y; background-color:#58595B; margin-bottom:13px;}
.prfUl li{ width:50%; float:left; text-align:center; color:#FFF;}
.prfUl li a{ color:#FFF; line-height:30px; font-size:90%; width:100%; display:block;}
.welBox{ padding-bottom:12px;}
.welBox h2{ text-align:right; font-weight:normal; line-height:1.2em; font-size:160%;}
.welBox p{ font-size:90%; line-heigh:1.4em; vertical-align:bottom;}
.udBar{ border-bottom:#CCC dotted 2px; margin-bottom:0;}
.sideBox{ padding-bottom:14px; margin-top:20px;}
.sideBox h2{ color:#EC1E79; border-left:#EC1E79 solid 4px; padding:2px 0 0 6px; font-size:100%; line-height:1.1em; font-weight:normal; margin-bottom:10px;}
.sideBox .sectionInner{ margin:0 12px;}
.sideBox .aboutTxt{margin-bottom: 0.3em; font-weight: 600; color:red;}
.sideBox .memoBox{text-align: left;}
.sideBox p{ margin:0; text-align:center;}
.sideBox .rightSecText{margin-top:8px;}
.tanBox{ margin-top:25px; padding-bottom:14px;}
.tanBox .section{ padding-bottom:14px;}
.tanBox h2{ padding:8px 0 4px 10px; line-height:1.2em; background:#403F41; color:#FFF;  margin-bottom:8px; font-weight:normal; font-size:120%;}
.tanBox dt,
.tanBox dd{ display:inline-block;}
.tanBox dt{ width:55px; text-align:center;}
.tanBox .nameDd{ vertical-align:middle; width:120px;}
.tanBox .mailDd{ width:50px; text-align:center;}
.rBnrBox{ padding-bottom:15px;}
.rBnrBox li{ margin-top:1em;}

/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{ background:#666666; padding-top:30px;}
#footerAreaInner { width:95%; max-width: 920px; margin:0 auto 20px auto;}
.footerAreaLink{ float:left; background:url(/img/back_contents09.png) right top repeat-y; /*width:555px;*/}
.footerAreaLink .udLink1{ float:left; width:155px;}
.footerAreaLink .udLink2{ float:left; width:185px;}
.footerAreaLink .udLink3{ float:left; width:400px;}
.footerAreaLink .udLink3 .btnBox{ margin: 0 0 0 auto; font-weight: 600; font-size: 1rem;}
.footerAreaLink .udLink3 .btnBox a{ max-width: 220px; width: 100%; font-size: 74%; padding: 0.6em 5px;}
.footerAreaLink li{margin-bottom:3px;}
.footerAreaLink a{ font-size:90%; color:#FFF; display:block; background:url(/img/common/ico_contents08.png) left 3px no-repeat; padding-left:10px;}
.footerAreaTxt{ float:right; }
.footerAreaTxt li{ float:left;}
.footerCopyright{ border-top:#ccc dotted 1px; padding:10px 0; clear:both;}
.footerCopyright p{ width:95%; max-width: 920px; margin:0 auto; text-align:right; color:#FFF;}



/*----------------------------------------------------------------------------
 ***                                                                   btn
----------------------------------------------------------------------------*/
.hoverBtn{transition: .3s;}
.hoverBtn:hover{opacity: 0.8;}
.gBtn{opacity: 0.7; }
.gBtn:hover{opacity: 1;}
.activeBtn{opacity: 1; }
a.pinkBtn{background: #EC1E79; color: #fff; padding: 0.6em 0; width:180px; border-radius: 5px; display: inline-block; transition: .3s;}
a.pinkBtn:hover{opacity: 0.7;}
.pinkBtn:link{color: #fff; text-decoration: none;}
.udBar_bottomBnr .bnr{width: 100%; background: rgba(0,0,0,0.3); display: inline-block; text-align: center; padding: 1rem 0; color: #fff; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; z-index: 0; text-decoration: none;}
.udBar_bottomBnr .bnr .ico{position: absolute; left: 2em; top: 50%; transform: translateY(-50%);}
.udBar_bottomBnr .bnr::before{width: 100%; background: rgba(0,0,0,0.3); position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; transition: .3s;}
.udBar_bottomBnr .bnr_fb::before,
.udBar_bottomBnr .bnr_ig::before,
.udBar_bottomBnr .bnr_tw::before{background: unset;}
.udBar_bottomBnr .bnr :link{color: #fff;}
.udBar_bottomBnr .bnr:hover::before{background: rgba(0,0,0,0.6); cursor: pointer;}
.udBar_bottomBnr .bnr_karte{ background-image: url(/img/bnr_karte.jpg);}
.udBar_bottomBnr .bnr_questionnaire{ background-image: url(/img/bnr_questionnaire.jpg);}
.udBar_bottomBnr .bnr_fb{ background: #1877f2;}
.udBar_bottomBnr .bnr_fb .ico{ margin-left: 0.5em;}
.udBar_bottomBnr .bnr_ig{ background: #333;}
.udBar_bottomBnr .bnr_tw{ background: #00acee;}
.udBar_bottomBnr .bnr_x{ background: #666666;}
.udBar_bottomBnr .bnr_faq{ background-image: url(/img/temp02.jpg);}
.udBar_bottomBnr .bnr_movie{ background-image: url(/img/temp03.jpg);}
.aboutBtn{display: inline-block; float: right;padding: 0.3em 1em 0.2em 1em; background:#F93; border-radius:5px; margin-top: -0.3em; text-decoration: none; font-size:90%;transition: .3s}
.aboutBtn:link{color:#FFF;  text-decoration: none; }
.aboutBtn:hover{opacity: 0.7;}
#scLink li{transition: .3s;}
#scLink li:hover{opacity: 0.8;}

/*20210907修正*/
.pinkBtnW{background: #EC1E79; color: #fff; padding: 1.4em 0; width:180px; border-radius: 5px; display: inline-block; transition: .3s; border:none; text-align:center;}
.pinkBtnW:hover{opacity: 0.7;}
.pinkBtnW:link{color: #fff; text-decoration: none;}

.pinkBtnWDis{background: #ccc; color: #fff; padding: 1.4em 0; width:180px; border-radius: 5px; display: inline-block; border:none; text-align:center;}




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

	body{
		display: grid;
	}
}