@charset "utf-8";
/* CSS Document */
/* メディアクエリー関係
------------------------------------------------------------ */
body{-webkit-text-size-adjust:100%; display: block;}
html { font-size: 140%;}
img{ width:100%; height:auto;}
@media screen and (min-width: 320px) {html { font-size: 100%;} body{}}
@media screen and (orientation:portrait){html { font-size: 100%;}body{}}
@media screen and (orientation:landscape){html { font-size: 100%;}body{}}


/*----------------------------------------------------------------------------
 ***                                                                Container
----------------------------------------------------------------------------*/
html{width:100%;}
body {width:100%; overflow-x:hidden;}
#wrap {width:95%; margin:0 auto;}


/*----------------------------------------------------------------------------
 ***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea {width:100%;}
#headerAreaInner{padding-top:5em;}
.headerAreaTitle{width:95%; padding:0 1em; margin-bottom:0.5em; position:fixed; top:0; left:0; background-color:#F0F0F1; z-index:999; height:auto;}
.headerAreaTitle h1{width:80%; display:inline-block; line-height: 1em; padding: 0.6em 0 0.6em 0; font-size:100%; line-height:3em;}
.headerAreaTitle h1 img{width:100%; height:auto;}
#breadcrumbArea{width:100%; top:5rem; left:0; overflow:hidden; overflow-x:auto;}
#breadcrumbArea ul{display:table;}
#breadcrumbArea li{font-size:85%; margin-right:0.5em; display:table-cell; white-space:nowrap; float:none; }
#breadcrumbArea li a{background:none; padding-right:0;}
#breadcrumbArea li a::after{content:">"; font-size: 100%; display:inline; padding-left:0.5em;}
#breadcrumbArea::-webkit-scrollbar{ height: 5px; margin-bottom:10px;}
#breadcrumbArea::-webkit-scrollbar-track { border-radius: 5px; background: #eee; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
#breadcrumbArea::-webkit-scrollbar-thumb { border-radius: 10px; background: #666; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}


/*----------------------------------------------------------------------------
 ***                                                       Header - gNavi
----------------------------------------------------------------------------*/
#gnavi{ margin-bottom:0.8em;}
#gnavi li{width:24.6%; background-color:#555; margin:0.2%;}
#gnavi li img{width:100%; height:auto;}
#gnavi li:nth-of-type(n+4){}
#gnavi li:nth-of-type(3n){}
#gnavi .yoyaku input{width:100%; height:auto;}
#gnavi li.activePage{background:#222;}
#gnavi li:hover{background:#222;}


/*----------------------------------------------------------------------------
 ***                                                              contentsArea
----------------------------------------------------------------------------*/
#contentsArea { width:100%; margin:0 auto;}
.contentsLeft{ float:none; width:auto; margin-bottom:0; padding: 0;}


/*----------------------------------------------------------------------------
 ***                                                              mainsection
----------------------------------------------------------------------------*/
.mainSection { width:100%;}
.infoSec .mainSectionInner{width:96%; padding:20px 2% 0 2%;}
.svsBox{height:auto; background-color:#fff; background-position:left top 5%; padding-top:5%; margin-bottom: 3rem;}
.svsBox h2{width:100%; padding:1.5em 0 0.6em 0; text-align:center; margin-bottom:0; line-height:1.2em; float:none; font-size:140%;}
.svsBox .sectionInner{width:90%; margin:0 auto; float:none; padding:1em 0 1.4em;}
.svsBox li{width:33%; padding:0 3%; text-align:center; box-sizing:border-box;}
.svsBox li img{width:100%; height:auto; margin:0;}
.pickBox ul{padding:0;}
.pickBox li{float:none; margin-bottom:15px;}
.pickBox li img{width:100%; height:auto; margin-right:0;}

/* 表示領域パターン TOP用*/
.topInfo{}
.topInfo h3{ font-size:120%; font-weight:normal; line-height:1.2em; margin-bottom:0.6em;}
.topInfo .section{ margin-bottom:1.5em; padding-bottom:4.2em; border-bottom:#ddd solid 1px;}
.topInfo .sectionInner{ width:auto; float:none;}
.topInfo .icoTitle{ width:40%; padding:0 10px; float:none; color:#FFF; margin-right:0;}
.topInfo .topInfoImg{ width:30%; margin:0 0 0 2%; float:right;}
.topicSec .topicList li{width: 100%;}
.supportSec .supportList li{width: 48%;}
.udBar_bottomBnr .bnr .ico{width: auto; height: 1.3rem;}

/* 表示領域パターン ワーホリ情報用*/
.workingHoliday ul{justify-content: center;}
.workingHoliday ul li{width: 90%;}
.workingHoliday ul li img{width: 65px;}
.wrapWhList{max-height: 480px;}
.whList .otherList{margin-bottom: 0;}
.whList .otherList dt{width: 25%; text-align: center; margin-bottom: 0.5em;}
.whList .otherList dd{ width: 65%; margin-bottom: 0.5em;}
.whList .imgBox{margin: 0 auto;}
.whList .imgBox_main{margin-bottom: 1rem; height: 12rem; width: 100%;}
.whList .txtBox{width: 100%; margin: 0 auto;}
.whList .txtBox .whListTtl .ico_rank{display: inline-block; width: 70px;}
.whList .txtBox .whListTtl .ico_rank img{width: 100%;}

/* 表示領域パターン ホームステイ用 */
.countryList ul{justify-content: center;}
.countryList ul li{width: 90%;}
.countryList ul li img{width: 65px;}
.countryList_under ul li img{ width: 20px;}
.countryList .topTxt_au{padding-bottom: 2.2em;}
.countryList .topTxt_au .backBtn{bottom: 0.5em}
.hsList .otherList dt{width: 25%; text-align: center;}
.hsList .otherList dd{ width: 100%;}
.hsList .imgBox{width: 75%; margin: 0 auto;}

/* その他コンテンツページ汎用パーツ */
.otherContentsSec .topTtl img{width: 80%;}
.otherContentsSec .btn img{width: 80%;}


/*----------------------------------------------------------------------------
 ***                                                              rightsection
----------------------------------------------------------------------------*/
#rightSec{width:85%; position:absolute; top:60px; right:0; display:none; transition:right 0.5s ease; z-index:99; border:5px solid #bbb; border-right:none; overflow:hidden;}
.tanBox .section h2{font-size:110%; line-height:1; padding:0.5em 0 0.5em 0.2em; margin-bottom:10px;}
.tanBox .sectionInner{width:100%;}
.tanBox .sectionInner dt{width:90px;}
.tanBox .sectionInner dt img{width:100%; height:auto;}
.tanBox .sectionInner dd.nameDd{width:250px; padding:0 10px;}
.tanBox .sectionInner dd.mailDd{width:90px;}
.tanBox .sectionInner dd.mailDd img{width:100%; height:auto;}
.prfUl{background:#58595B;}
.prfUl li{width:100%; float:none; border-bottom:1px solid #fff;}
.prfUl li a{line-height:1; padding:5% 0; font-size:100%;}
.welBox h2{font-size:110%; line-height:1;}
.welBox p{float:none; font-size:80%; line-height:1;}
.sideBox h2{font-size:95%; text-align:center;}
.sideBox input{width:75%; height:auto;}
.sideBox .rightSecText{font-size:70%; margin-top:8px;}
.rBnrBox img{width:100%; height:auto;}
.logo_lrc{height:auto; margin:-10px 0 10px;}
.logo_lrc img{width:100%; height:auto;}


/*TOPのみ予約するボタン*/
.pickBox ul{width:50%; float:right;}
.sideBox2{ display:block; padding-bottom:14px; margin:4% 0 0; width:45%; float:left; border:none;}
.sideBox2 h2{ color:#EC1E79; border-bottom:#EC1E79 solid 4px; font-weight:normal; margin-bottom:10%; line-height:1.3; text-align:center;}
.sideBox2 p{ margin:0; text-align:center;}
.sideBox2 input{width:100%; height:auto;}
.sideBox2 .rightSecText{ margin-top:10%;}


/*----------------------------------------------------------------------------
 ***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{width:100%;}
#footerAreaInner {width:90%;}
.footerCopyright{width:100%;}
.footerCopyright p{width:100%; text-align: center;}
.footerAreaLink{width:100%; float:none; margin:0 auto 2%;}
.footerAreaLink li{}
.footerAreaLink .udLink1,
.footerAreaLink .udLink2,
.footerAreaLink .udLink3,
.footerAreaLink .udLink4{width:100%; float:none;}
.footerAreaLink li a{ padding-left:1em; background-size:0.5em; background-position:left center;}
.footerAreaTxt{width:100%; margin:0 auto; float:none;}
.footerAreaTxt li{ width: 50%; max-width: 115px;}
.footerAreaTxt li:first-child{margin-right: 5%;}
.footerAreaTxt .telLink01 img{width:100%; height:auto;}
.footerAreaTxt .telLink02 img{width:100%; height:auto;}


/*----------------------------------------------------------------------------
 ***                                                                   btn
----------------------------------------------------------------------------*/
#sldButton{width:30px; height:30px; display:inline-block; /*background:#fff;*/ position:relative; margin-top:17px; padding:0 2% 0 0; float:right;}
#sldButton #burger{width:30px; height:6px; position:absolute; top:calc(50% - 3px); left:0; background:#666; opacity:1; transition:all 0.5s ease; border-radius:10px;}
#sldButton #batch {width:30px; height:6px; position:absolute; top:0; left:0; }
.exist_unread_msg #sldButton #batch::before {
    content: "●";
    color: red;
    top: -0.4em;
    right: -0.4em;
    position: absolute;
    font-size: 1.5em;
}

#sldButton::before,
#sldButton::after{
    content:"";
    display:block;
    width:30px;
    height:6px;
    position:absolute;
    background: #666;
    border-radius:10px;
    transition: all 0.5s ease;
    transform-origin:left center;
}
#sldButton::before{top:0; left:0;}
#sldButton::after{bottom:0; left:0;}
#sldButton.open #burger{opacity:0;}
#sldButton.open::before{transform:rotate(45deg) translate(11px, -9px);}
#sldButton.open::after{transform:rotate(-45deg) translate(11px, 9px);}
.pinkBtn{width: 290px;}
.aboutBtn{font-size:180%; margin-top: -0.4em;}
.udBar_bottomBnr .bnr{font-size: 140%;}