@charset "utf-8";

/************************************************
reset
************************************************ */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
 
body {
    line-height:1;
}
 
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
 
nav ul {
    list-style:none;
}
 
blockquote, q {
    quotes:none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
 
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
 
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
 
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
 
del {
    text-decoration: line-through;
}
 
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
 
table {
    border-collapse:collapse;
    border-spacing:0;
}
 
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
 
input, select {
    vertical-align:middle;
}

/************************************************
 共通設定
************************************************ */
body {
    font-size: 18px;
    color:#000;
    background: #fff;
    font-family:Meiryo,"メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",verdana,arial,"lucida grande",sans-serif;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    line-height: 1.7;
}

li{
    list-style-type: none;
}
table th,
table td{
    font-weight: normal;
    text-align: left;
    vertical-align: top;
}
* { box-sizing: border-box; }

/* ==============================================
 フレーム
=============================================== */
/* コンテンツ */
#container {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    background: #fff;
    text-align: left;
}

#content{
    position: relative;
    width: 100%;
    margin:0 auto;
}
#content-inner{
    position: relative;
    width: 100%;
    margin:0 auto;
}
.contentInner {
    position: relative;
    max-width:1300px;
    margin: 0 auto;
}
.oh { overflow: hidden;}
.fl { display:inline-block;}
.fr {float:right;}
.txt-r {text-align:right;}
.fl2 {float:left;}

/* ==============================================
オブジェクト設定
=============================================== */
embed,
iframe,
object{
	max-width: 100%;
}

/* ==============================================
 Margin Padding
=============================================== */
/* Margin
---------------------*/
.ma00{ margin:0  !important; }

/*** Margin - Top ***/
.mt00 { margin-top:0px   !important; }
.mt05 { margin-top:5px   !important; }
.mt10 { margin-top:10px  !important; }
.mt15 { margin-top:15px  !important; }
.mt20 { margin-top:20px  !important; }
.mt25 { margin-top:25px  !important; }
.mt30 { margin-top:30px  !important; }
.mt35 { margin-top:35px  !important; }
.mt40 { margin-top:40px  !important; }
.mt45 { margin-top:45px  !important; }
.mt50 { margin-top:50px  !important; }
.mt60 { margin-top:60px  !important; }
.mt100{ margin-top:100px !important; }
.mt200{ margin-top:200px !important; }
.mt300{ margin-top:300px !important; }

/*** Margin - Bottom ***/
.mb00 { margin-bottom:0px   !important; }
.mb05 { margin-bottom:5px   !important; }
.mb10 { margin-bottom:10px  !important; }
.mb15 { margin-bottom:15px  !important; }
.mb20 { margin-bottom:20px  !important; }
.mb25 { margin-bottom:25px  !important; }
.mb30 { margin-bottom:30px  !important; }
.mb35 { margin-bottom:35px  !important; }
.mb40 { margin-bottom:40px  !important; }
.mb45 { margin-bottom:45px  !important; }
.mb50 { margin-bottom:50px  !important; }
.mb60 { margin-bottom:60px  !important; }
.mb80 { margin-bottom:80px  !important; }
.mb100{ margin-bottom:100px !important; }
.mb200{ margin-bottom:200px !important; }
.mb300{ margin-bottom:300px !important; }

/*** Margin - Left ***/
.ml00{ margin-left:0px  !important; }
.ml05{ margin-left:5px  !important; }
.ml10{ margin-left:10px !important; }
.ml15{ margin-left:15px !important; }
.ml20{ margin-left:20px !important; }
.ml25{ margin-left:25px !important; }
.ml30{ margin-left:30px !important; }
.ml35{ margin-left:35px !important; }
.ml40{ margin-left:40px !important; }
.ml45{ margin-left:45px !important; }
.ml50{ margin-left:50px !important; }

/*** Margin - Right ***/
.mr00{ margin-right:0px  !important; }
.mr05{ margin-right:5px  !important; }
.mr10{ margin-right:10px !important; }
.mr15{ margin-right:15px !important; }
.mr20{ margin-right:20px !important; }
.mr25{ margin-right:25px !important; }
.mr30{ margin-right:30px !important; }
.mr35{ margin-right:35px !important; }
.mr40{ margin-right:40px !important; }
.mr45{ margin-right:45px !important; }
.mr50{ margin-right:50px !important; }

/* Padding
---------------------*/
.pa00{ margin:0  !important; }

/*** Padding - Top ***/
.pt00{ padding-top:0px  !important; }
.pt05{ padding-top:5px  !important; }
.pt10{ padding-top:10px !important; }
.pt15{ padding-top:15px !important; }
.pt20{ padding-top:20px !important; }
.pt25{ padding-top:25px !important; }
.pt30{ padding-top:30px !important; }
.pt35{ padding-top:35px !important; }
.pt40{ padding-top:40px !important; }
.pt45{ padding-top:45px !important; }
.pt50{ padding-top:50px !important; }
.pt80{ padding-top:80px !important; }

/*** Padding - Bottom ***/
.pb00{ padding-bottom:0px  !important; }
.pb05{ padding-bottom:5px  !important; }
.pb10{ padding-bottom:10px !important; }
.pb15{ padding-bottom:15px !important; }
.pb20{ padding-bottom:20px !important; }
.pb25{ padding-bottom:25px !important; }
.pb30{ padding-bottom:30px !important; }
.pb35{ padding-bottom:35px !important; }
.pb40{ padding-bottom:40px !important; }
.pb45{ padding-bottom:45px !important; }
.pb50{ padding-bottom:50px !important; }
.pb60{ padding-bottom:60px !important; }
.pb80{ padding-bottom:80px !important; }
.pb100{ padding-bottom:100px !important; }

/*** Padding - Left ***/
.pl00{ padding-left:0px  !important; }
.pl05{ padding-left:5px  !important; }
.pl10{ padding-left:10px !important; }
.pl15{ padding-left:15px !important; }
.pl20{ padding-left:20px !important; }
.pl25{ padding-left:25px !important; }
.pl30{ padding-left:30px !important; }
.pl35{ padding-left:35px !important; }
.pl40{ padding-left:40px !important; }
.pl45{ padding-left:45px !important; }
.pl50{ padding-left:50px !important; }

/*** Padding - Right ***/
.pr00{ padding-right:0px  !important; }
.pr05{ padding-right:5px  !important; }
.pr10{ padding-right:10px !important; }
.pr15{ padding-right:15px !important; }
.pr20{ padding-right:20px !important; }
.pr25{ padding-right:25px !important; }
.pr30{ padding-right:30px !important; }
.pr35{ padding-right:35px !important; }
.pr40{ padding-right:40px !important; }
.pr45{ padding-right:45px !important; }
.pr50{ padding-right:50px !important; }

/* フォントサイズ
----------------------------------------------- */
.fs12{ font-size: 12px; }
.fs14{ font-size: 14px; }
.fs16{ font-size: 16px; }
.fs18{ font-size: 100%; }
.fs19{ font-size: 19px; }
.fs20{ font-size: 20px; }
.fs22{ font-size: 22px; }
.fs24{ font-size: 24px; }
.fs30{ font-size: 30px; }
.fs34{ font-size: 34px; }
.fs36{ font-size: 36px; }
.fs48{ font-size: 48px; }
.fs52{ font-size: 52px; }

.bold{ font-weight:bold; }
.strong{ font-weight: bold;}
.textUnder{ text-decoration: underline;}

.white{ color:#fff;}

.mincho{
    font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
@font-face {
	font-family: 'trajan';
	src: url('../font/Trajan Pro.ttf');
}
@font-face{
    font-family: 'utsukushi';
    src: url('../font/UtsukushiFONT.otf');
}
.utsukushi{
    font-family: 'utsukushi';
}
@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);
body.cn .utsukushi{
    font-family: 'cwTeXFangSong', serif;
}

/* フロート
----------------------------------------------- */
.over-f { overflow: hidden;}
.floatL { float: left;}
.floatR { float: right;}
.clearB { clear: both; }

/* 行揃え
----------------------------------------------- */
.textC { text-align: center;}
.textL { text-align: left;}
.textR { text-align: right;}

.w-100 { width: 100px;}
.w-120 { width: 120px;}
.w-300 { width: 300px;}

.w_auto img, 
.w_auto_s img {
    width: auto;
}

/* フロート回り込み解除
----------------------------------------------- */
.clear {
    clear: both;
}

/* Micro Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* リンク指定
----------------------------------------------- */
a:link,
a:visited {
    color: #000;
    text-decoration: none;
}
a:link:hover,
a[href]:hover {
    color: #34af91;
    text-decoration: none;
}

a:hover img {
    opacity: 0.7;
}

/* h1
----------------------------------------------- */
h1,
h2,
h3,
h4,
h5 {
    font-size: 100%;
    line-height: 150%;
}

h3 img{
    width:auto;
}

h4 img{
    width:auto;
}

h3.title{
    max-width:375px;
    margin:0 auto 40px;
    text-align: center;
}

img{
    width:100%;
    margin:0;
    padding:0;
}

/* ==============================================
 ヘッダー
=============================================== */
#header{
    position: relative;
    top:0;
    width:100%;
    margin:auto;
    color: #49486a;
    background: url(../img/header/bgHeader.png) repeat-x bottom;
    z-index: 50;
}
.top #header{
    height:128px;
}
.detail #header{
    height:165px;
}
#header .inner{
    position: relative;
    max-width:1300px;
    width:100%;
    margin:auto;
    font-size:20px;
}
#header h1{
    padding-top:8px;
}
#header #changeLang{
    position: absolute;
    right:0;
    line-height: 1;
}
.top #header #changeLang{
    top:8px;
}
.detail #header #changeLang{
    top:50px;
}
#header #changeLang li{
    display: inline-block;
}
#header #changeLang li{
    padding-right: 8px;
    border-right: 1px solid #49486a;
}
#header #changeLang li:last-child{
    padding-right: 8px;
    border-right: none;
}
.jp #changeLang li:first-child{
	font-weight: bold;
}
.eng #changeLang li:nth-child(2){
	font-weight: bold;
}
.cn #changeLang li:nth-child(3){
	font-weight: bold;
}
.top .hdLogo{
    position: absolute;
    top:40px;
    left:0;
    width:246px;
    height:246px;
    z-index: 60;
}
.detail .hdLogo{
    position: absolute;
    top:50px;
    left:0;
    width:246px;
    height:111px;
    z-index: 60;
}
.detail .hdLogo .smp{
    display: none;
}
.hdLogo a:hover{
    opacity: 1;
}
.hdLogo .smt{
    display: none;
}
nav{}
.top nav ul{
    margin-top:2px;
}
.detail nav ul{
    margin-top:39px;
} 
nav ul{
    width:1054px;
    margin-left: 246px;
    background:linear-gradient(#fdfdfd, #d7d7d7);
}
nav li{
    position: relative;
    float:left;
    width:calc(100% / 4);
    height:70px;
    padding-top:13px;
    text-align: center;
    border-right:1px solid #cbc5c5;
    line-height: 1.2;
    font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.top.eng nav li,
.detail.eng nav li{
    padding-top:20px;
}
nav li span{
    display: block;
}
nav li .en{
    font-size:12px;
}
nav li a{
    position: absolute;
    top:0;
    left: 0;
    width:100%;
    height: 100%;
}
nav li:nth-child(1){
    padding-top:20px;
    border-top:5px solid #49486a;
    background: url(../img/header/iconHome.png) no-repeat 25% 46%;
}
nav li:nth-child(2){
    border-top:5px solid #126a23;
}
nav li:nth-child(3){
    border-top:5px solid #5190bd;
}
nav li:nth-child(4){
    border-top:5px solid #bd516f;
}
nav li:nth-child(5){
    border-top:5px solid #ff9c00;
}
nav li a:hover{
    transition: ease-in-out 0.1s;
}
nav li:nth-child(1) a:hover,
nav li.current:nth-child(1) a{
    border-top:6px solid #49486a;
}
nav li:nth-child(2) a:hover,
nav li.current:nth-child(2) a{
    border-top:6px solid #126a23;
}
nav li:nth-child(3) a:hover,
nav li.current:nth-child(3) a{
    border-top:6px solid #5190bd;
}
nav li:nth-child(4) a:hover,
nav li.current:nth-child(4) a{
    border-top:6px solid #bd516f;
}
nav li:nth-child(5) a:hover{
    border-top:6px solid #ff9c00;
}

/* en */
.en nav li{
    padding-top:20px;
}

.show-on-mobile{
  display:none;
}

/* ==============================================
 メインイメージ
=============================================== */
#mainImage{
    position: relative;
    width:100%;
    z-index: 1;
}
.top #mainImage{
    height:668px;
    background: url(../img/top/topMainImg.jpg) no-repeat center;
    background-size: cover;
}
.top #mainImage .title{
    position: absolute;
    top:40%;
    left:0;
    right:0;
    max-width:874px;
    width:80%;
    margin:auto;
    text-align: center;
}
.top #mainImage .title span{
    font-weight: bold;
    text-shadow: 
        0 2px 3px #49486a,
        2px 0 3px #49486a,
        0 -2px 3px #49486a,
        -2px 0 3px #49486a,
        -2px -2px 3px #49486a,
        2px -2px 3px #49486a,
        -2px 2px 3px #49486a,
        2px 2px 3px #49486a;
}
.detail #mainImage{
    height:650px;
}
.detail #mainImage .titleBg{
    position: absolute;
    top:18%;
    display: inline-block;
    width:auto;
    height:120px;
    padding:20px 5% 30px;
    background:#fff;
    opacity: 0.8;
    font-weight: bold;
}
.detail.eng #mainImage .titleBg{
    padding:20px 5% 30px;
}
.detail #mainImage .titleBg span{
    /*display: none;*/
}
.detail #mainImage .title{
    position: relative;
    top:18%;
    width:100%;
    height:120px;
    padding:20px 0 30px 2%;
    opacity: 0.8;
    font-weight: bold;
}
.detail.yumoto #mainImage{
    background: url(../img/yumoto/mainYumoto.jpg) no-repeat center;
    background-size: cover;
}

.detail.yumotoriverside #mainImage{
    background: url(../img/yumotoriverside/mainYumotoriverside.jpg) no-repeat center;
    background-size: cover;
}

.detail.miyanoshita #mainImage{
    background: url(../img/miyanoshita/mainMiyanoshita.jpg) no-repeat center;
    background-size: cover;
}

/* en */
.detail.eng #mainImage .titleBg{
    /*width:60%;*/
    width:auto;
}
.detail.eng #mainImage .titleBg span{
    /*display: block;*/
}


/* ==============================================
トップ
=============================================== */
.top #content{
    padding-top:130px;
}
#topGuestVilla{
    background: url(../img/top/bgTopGuestVilla.png) no-repeat bottom;
    background-size:100% 800px;
}
#topGuestVilla h3{
}
#topGuestVilla h2.title .jp{
    width:250px;
}
#topGuestVilla h2.title .jp span{
    width:200px;
}
#topGuestVilla h3{
    margin-bottom: 35px;
}
#topGuestVilla p{
    line-height: 2.5;
}
#topGuestVilla .box{
    position: relative;
}
#topGuestVilla01 .floatL,
#topGuestVilla02 .floatR{
    max-width:666px;
    width:52%;
}
#topGuestVilla01 .floatR,
#topGuestVilla02 .floatL{
    position: relative;
    max-width:590px;
    width:46%;
    height:590px;
    margin-top:120px;
    padding:40px;
    background: #fff;
}
.top.eng #topGuestVilla01 .floatR,
.top.eng #topGuestVilla02 .floatL{
    height:630px;
}
#topGuestVilla02 .floatR{
    margin-left:20px;
}
#topGuestVilla02 .floatL{
    margin-right:20px;
}
.top.eng #topGuestVilla01 .floatR p{
    height: auto;
}
#topGuestVilla .btn{
    position: absolute;
    bottom:40px;
    left:0;
    right:0;
    max-width:290px;
    width:80%;
    margin:auto;
}
#topAccess h2.title{
    margin-bottom:50px;
}
#topAccess h2.title .jp{
    width:185px;
}
#topAccess h2.title .jp span{
    width: 120px;
}
#topAccess .map{
    max-width:1230px;
    margin:auto;
}
#topAccess .map .smp{
    display: none;
}
#topContact{}
#topContact h2{
    margin-bottom:40px;
}
.booking h2.title .jp{
    width:180px;
}
#topContact p.textC{
    width:96%;
    margin: auto;
    color: #fff;
}
#topContact .wrap{
    position: relative;
    height:500px;
    background: url(../img/common/bgGreen.png);
}
#topContact .wrap:before{
    content:"";
    position: absolute;
    top:0;
    left:50%;
    width:50%;
    height: 100%;
    background: url(../img/common/bgRed.png);
}

.booking h2.title .jp span{
    width: 120px;
}
#topContact .box{
    position: relative;
    font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#topContact h3{
    text-align: center;
    color:#fff;
}
#topContact .floatL,
#topContact .floatR{
    /*width:50%;*/
    width:33%;
    padding:20px 0;
}
#topContact h4{
    width:96%;
    margin:0 auto 10px;
    text-align: center;
    color:#fff;
    background: url(../img/top/bgTitFloor.png) no-repeat center;
}
#topContact .box ul{
    max-width:520px;
    width:100%;
    padding:10;
}
#topContact .box li{
    float:left;
    max-width:240px;
    width:40%;
    margin:0 10px 15px;
}



/* ==============================================
詳細
=============================================== */
.detail .titArea{
    padding:50px 0 70px;
    color:#fff;
}
.detail .titArea h2.title{
    line-height: 1.2;
}
.detail .titArea h2.title .jp span{
    top:-10px;
    width: 220px;
}
.detail .titArea h2.title .jp {
    top:135px;
    width: 270px;
}
.detail .titArea p{
    max-width:1200px;
    width:100%;
    margin:auto;
    line-height: 2.1;
}
.detailArea{
    padding:50px 0;
}
.detailArea .border{
    display: table-cell;
    width:1%;
    height: auto;
    background:#49486a;
}
.detailArea h3{
    display: table-cell;
    width:95%;
    height:auto;
    padding-left:2%;
    line-height: 1.5;
}
.detailArea.en h3 span.bottom{
    display: block;
    margin-left:10%;
}
.detailArea h3 span.bottom{
    display: block;
    margin-left:5%;
}
.detailArea .contentInner p{
    padding-top:5px;
}
.contactArea{
    padding:50px 0;
    color:#fff;
}
.contactArea h2.title .jp span{
    width: 120px;
}
.contactArea h2.title .jp {
    width: 180px;
}
.booking{
    color:#fff;
}
.booking ul{
    max-width:850px;
    width:100%;
    margin-left:auto;
}
.booking ul li{
    float:left;
    max-width:195px;
    width:23%;
    margin:0 1%;
}
#shopInfo h2.title,
#facility h2.title,
#access h2.title{
    color:#000;
}
#facility h2.title .jp,
#access h2.title .jp{
    width:160px;
    border-bottom:1px solid #000;
}
#facility h2.title .jp span,
#access h2.title .jp span{
    width:110px;
}
#map {
    width: 100%;
    height: 500px;
}
#shopInfo h2.title .jp{
    width:290px;
    border-bottom:1px solid #000;
}
#shopInfo h2.title .jp span{
    width:230px;
}
#facility dl{
    display: none;
}
#facility table{
    max-width:1200px;
    width:100%;
    margin:auto;
}
#facility table th,
#facility table td{
    padding:30px 0;
    border-bottom:1px dotted #000;
}
#facility table th{
    width:26%;
}
#facility table td{
    width:74%;
}
#facility table td .floatL{
    width:60%;
    padding-right: 2%;
}
#facility table td .floatR{
    width:40%;
}
#facility table td li{
    margin-left:1.5em;
    margin-bottom:8px;
    list-style-type: disc;
    list-style-position: outside;
    line-height: 1.2;
}
#access .link{
    max-width:950px;
    width: 100%;
    margin:auto;
}
#access .link a{
    text-decoration: underline;
}
#access #map2{
    max-width:720px;
    margin:auto;
    border:1px solid #000;
}
.detail.miyanoshita #access br.brNone{
    display: none;
}
#shopInfo .infoList > li{
    float:left;
    width:25%;
    padding:2%;
    font-size:16px;
}
.detail.eng #shopInfo .infoList > li{
    word-wrap: break-word;
    overflow: hidden;
}
#shopInfo .infoList > li h4{
    margin-bottom:15px;
    text-align: center;
}
.detail.eng #shopInfo .infoList > li h4{
    margin-bottom:10px;
    text-align: center;
}
.detail.eng #shopInfo .infoList > li h4.fs24{
    font-size: 18px;
}
#shopInfo .infoList > li .photo{
    margin-bottom:20px;
}
#shopInfo .infoList > li > ul > li{
    margin-bottom:6px;
    padding-left:1em;
    text-indent: -1.2em;
    line-height: 1.4;
}
#shopInfo .infoList > li > ul > li:before{
    content:"□";
    margin-right:5px;
}
#shopInfo .infoList > li.shop12 ul > li span.time{
    margin-left:32px;
}
#guidemap{
    padding:20px 0 30px;
}
#guidemap h2.title .jp {
    width: 260px;
}
#guidemap h2.title .jp span{
    width: 200px;
}
#guidemap .ilustmap{
    max-width:1200px;
    width:100%;
    margin:auto;
}

#btContact{
    padding:15px 0 60px;
}
#btContact h4 {
    width: 50%;
    margin: 0 auto 10px;
    text-align: center;
    color: #fff;
    background: url(../img/top/bgTitFloor.png) no-repeat center;
}

/*slider*/
.photoArea .bgGray{
    position: relative;
    width:100%;
    margin:auto;
    padding:50px 0;
    background:#f6f6f6;
}
.photoArea .plus{
    position: absolute;
    top:40%;
    left:0;
    right: 0;
    width:102px;
    margin:auto;
    z-index:100;
    opacity: 0.8;
}
.photoArea .bx-wrapper {
    position: relative;
    /*width: 800px;*/
    width:78%;
    max-width:1030px;
    margin: 0 auto;
    padding: 0;
}
.photoArea .bx-wrapper .bx-viewport {
	margin: 0 auto;
}

.photoArea .bx-wrapper .bx-viewport li{
    /*margin:0;*/
}
.photoArea .bx-wrapper .bx-viewport li a img{
    max-width:1000px;
}
.photoArea .bx-wrapper .bx-viewport li .expanding{
    position: absolute;
    top:40%;
    right:40%;
    width:102px;
    z-index: 200;
}
.photoArea .bx-wrapper .bx-pager.bx-default-pager a:hover,
.photoArea .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

.photoArea .custom-control a{
    position: absolute;
    top: 40%;
    width: 100px;
    height: 100px;
    outline: 0 none;
    text-indent: -9999px;
    z-index: 50;
}
.photoArea .custom-prev1 a,
.photoArea .custom-prev2 a,
.photoArea .custom-prev3 a,
.photoArea .custom-prev4 a{
    left: 10px;
    background: url("../img/btn/btnNext.png") no-repeat 0 0;
}
.photoArea .custom-next1 a,
.photoArea .custom-next2 a,
.photoArea .custom-next3 a,
.photoArea .custom-next4 a{
    right: 10px;
    background: url("../img/btn/btnPrev.png") no-repeat 0 0;
}

.photoArea ul.custom-thumb{
    padding: 30px 0;
}
.photoArea ul.custom-thumb li{
    float:left;
    max-width:217px;
    width:calc(100% / 6);
    margin-bottom:10px;
    padding:0 5px;
}
.photoArea ul.custom-thumb li a{
    display: block;
}
.photoArea ul.custom-thumb li a.active{
    background: #000;
    opacity:0.5;
}

@supports (-ms-ime-align:auto) {
.photoArea ul.custom-thumb li {
    width:16.6%;
  }
}
@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .photoArea ul.custom-thumb li {
    width:16.6%;
  }
}

/* ==============================================
共通
=============================================== */
h2.title{
    position: relative;
    margin-bottom:60px;
    color:#fff;
    text-align: center;
    line-height: 1.5;
}
h2.title span{
    display: block;
}
h2.title .en{
    font-family: 'trajan';
}
h2.title .jp{
    font-weight: normal;
    font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
h2.title .jp{
    position: absolute;
    top:80px;
    left:0;
    right: 0;
    margin: auto;
    border-bottom:1px solid #fff;
    z-index:1;
}
h2.title .jp span{
    position: absolute;
    top:-13px;
    left:0;
    right: 0;
    margin: auto;
    padding:0 10px;
    z-index:2;
}

#bdContact{
    padding:40px;
    background: #005310;
}
#bdLink{}
#bdLink .title{
    position: relative;
    height: 100px;
    padding:10px 0;
    background: #49486a;
}
#bdLink h2{
    height:80px;
    text-align: center;
    background: url(../img/common/bgTitBtLink.png) repeat-x;
}
#bdLink h2 img{
    position: absolute;
    top:15px;
    left:0;
    right:0;
    margin:auto;
    width:220px;
}
#bdLink p.catch{
    padding:10px;
    text-align: center;
}
#bdLink ul{
    max-width: 1230px;
    width:98%;
    margin:0 auto 45px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#bdLink ul li{
    position: relative;
    max-width:580px;
    width:48%;
    /*padding:12px 12px 2px;*/
    margin: 12px 12px 2px;
    border:1px solid #49486a;
}
#bdLink ul li .photo{
    display: inline-block;
    max-width:166px;
    width:29%;
    margin-right: 3%;
}
#bdLink ul li .listDetail{
    display: inline-block;
    width:66%;
    max-width:380px;
    vertical-align: top;
}
#bdLink ul li h3{
    border-bottom:1px solid #49486a;
}
#bdLink .box .link a{
    color:#49486a;
}
#bdLink .box .link:hover{
    text-decoration: underline;
}
#bdLink .box .link:after{
    content:"▶";
}
.en #bdLink .box .link:after{
    content:"▶";
    margin-left:5px;
}
.btn{
    position: relative;
    padding:25px;
    text-align: center;
    color:#49486a;
    background: #fff;
    border:2px solid #49486a;
    line-height: 1;
}
.btn a{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
}
.btn:hover{
    color:#fff;
    background: #49486a;
    transition: all 0.3s;
}
.bgGreen{
    background: url(../img/common/bgGreen.png);
}
.bgRed{
    background: url(../img/common/bgRed.png);
}
.bgPurple{
    background: #49486a;
}
.bgBlue{
    background: url(../img/common/bgblue.png);
}
.bgWhite{
    background:#fff;
}
#access h2.title,
#shopInfo h2.title{
    margin-bottom: 50px;
}

/* ==============================================
 フッター
=============================================== */
footer {
    position: relative;
    width: 100%;
    padding:15px 0 10px;
    color: #fff;
    background: #49486a;
}
footer ul{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 15px;
}
footer ul li{
    display: inline-block;
    padding: 0 6px;
}
footer ul li a{
	color: #ffffff;
}
footer a:link,
footer a:visited {
	color: #ffffff;
    text-decoration: none;
    opacity: 0.7;
}
footer a:link:hover,
footer a[href]:hover {
	color: #ffffff;
    text-decoration: none;
    opacity: 1.0;
}
footer p{
	margin-bottom: 10px;
}
/* 法人概要 */
#outline{
	display: flex;
	align-items: center;
	flex-direction: row;
	margin-top: 138px;
}
#outline .table_box{
	width: 50%;
	margin-right: 10%;
	display: table;
	padding-left: 20px;
}
#outline table th,
#outline table td{
	padding: 10px 0;
	color: #49486a;
	border-bottom: 1px solid #49486a;
}
#outline table tr:last-child th,
#outline table tr:last-child td{
	border-bottom: none;
}

#outline table th{
	width: 5em;
}
#outline .photo{
	width: 32%;
}

/* ==============================================
 レスポンシブ
=============================================== */
@media screen and (max-width: 1299px) {
    .contentInner{
        width:96%;
        margin:auto;
    }
    .fs24{ font-size:22px; }
    .fs34{ font-size:32px; }
    .fs36{ font-size:30px; }
    .fs48{ font-size:44px; }
    .fs52{ font-size:48px; }
    .detail #header{
        height:130px;
    }
    #header .inner{
        font-size:18px;
    }
    #header h1{
        margin-left:1%;
    }
    .top #header #changeLang,
    .detail #header #changeLang{
        top:10px;
        right:1%;
    }
    .top .hdLogo,
    .detail .hdLogo{
        width:19%;
    }
    .detail .hdLogo{
        top:40px;
    }
    nav ul{
        width:81%;
        margin-left: 19%;
    }
    .top nav ul{
        margin-top:5px;
    }
    .detail nav ul{
        margin-top:5px;
    }
    .detail.eng nav ul{
        margin-top:10px;
    }
    nav li:nth-child(1){
        padding-top:21px;
        padding-left:5px;
        background-position: 25% 46%;
    }
    #mainImage{
        position: relative;
        width:100%;
        background-size: 100%;
        z-index: 1;
    }
    .top #mainImage,
    .detail #mainImage{
        height:auto;
    }
    #mainImage:before {
        content: "";
        display: block;
        padding-top: 36.9%;
    }
    .top #mainImage .title{
        top:30%;
        left:0;
        right:0;
    }
    .detail #mainImage .titleBg{
        top:15%;
        padding: 25px 0 30px 5%;
    }
    .detail #mainImage .titleBg span{
        /*display: block;*/
    }
    .detail #mainImage .title{
        display: none;
    }
    .top #content{
        padding-top:100px;
    }
    #topGuestVilla01 .floatL, #topGuestVilla02 .floatR,
    #topGuestVilla01 .floatR, #topGuestVilla02 .floatL{
        max-width: inherit;
    }
    #topGuestVilla01 .floatR, #topGuestVilla02 .floatL{
        width:45%;
        margin-top:100px;
    }
    #topGuestVilla02 .floatL{
        margin-right: 1%;
    }
    #topGuestVilla02 .floatR{
        margin-left:1%;
    }
    .photoArea.contentInner,
    #shopInfo .contentInner{
        width:100%;
    }
    
}

@media screen and (max-width: 1199px) {
    .detail #mainImage .titleBg{
        width:auto;
        padding: 25px 5% 30px;
    }
    #topContact .contentInner{
        width:100%;
    }
    #topContact .box{
        max-width: 100%;
    }
    #topContact .box li{
        width:48%;
        margin:0 1% 15px;
    }
    #topGuestVilla01 .floatL, #topGuestVilla02 .floatR,
    #topGuestVilla01 .floatR, #topGuestVilla02 .floatL{
        width:49%;
    }
    #topGuestVilla01 .floatR, #topGuestVilla02 .floatL{
        margin-top:80px;
        padding:30px;
    }
    .photoArea .custom-control a{
        width:90px;
        height: 90px;
    }
    .photoArea .custom-prev1 a, 
    .photoArea .custom-prev2 a, 
    .photoArea .custom-prev3 a, 
    .photoArea .custom-prev4 a,
    .photoArea .custom-next1 a, 
    .photoArea .custom-next2 a, 
    .photoArea .custom-next3 a, 
    .photoArea .custom-next4 a{
        background-size: 100%;
    }
    .photoArea .bx-wrapper .bx-viewport li .expanding{
        top:38%;
        right:45%;
        width:90px;
    }
}
@media screen and (max-width: 1100px) {
    .top.eng #topGuestVilla01 .floatR{
        height: 650px;
    }
}

@media screen and (max-width: 999px) {
    body{
        font-size:16px;
    }
    .fs19{ font-size:20px; }
    .fs20{ font-size:18px; }
    .fs22{ font-size:20px; }
    .fs24{ font-size:20px; }
    .fs34{ font-size:28px; }
    .fs36{ font-size:28px; }
    .fs48{ font-size:36px; }
    .fs52{ font-size:40px; }
    .mb100{ margin-bottom: 80px !important; }
    h2.title .jp{
        top:65px;
    }
    .eng #header h1{
        font-size:15px;
    }
    .detail .hdLogo{
        height:85px;
        background: #49486a;
    }
    nav li:nth-child(1){
        background-position: 20% 46%;
    }
    .detail #mainImage .titleBg,
    .detail.eng #mainImage .titleBg{
        top: 20%;
        width:auto;
        height:auto;
        padding: 20px 5%;
    }
    .top #content{
        padding-top:80px;
    }
    #topGuestVilla01 .floatR, 
    #topGuestVilla02 .floatL,
    .top.eng #topGuestVilla01 .floatR,
    .top.eng #topGuestVilla02 .floatL{
        height:auto;
        margin-top:0;
        padding:20px;
    }
    #topGuestVilla p{
        margin-bottom: 15px;
    }
    #topGuestVilla .btn{
        position: relative;
        bottom:inherit;
    }
    #topContact .wrap{
        height: auto;
        background: url(../img/common/bgContact.png);
    }
    #topContact .wrap:before{
        content: "";
        display: block;
        height:auto;
        padding-top: 80%;
        background-image: none;
    }
    #topContact .floatR{
        background: url(../img/common/bgRed.png);
    }
    .detail .titArea h2.title .jp{
        top:105px;
    }
    .detailArea h3 span.t2{
        display: block;
    }
    .detailArea h3 span.bottom{
        margin-left:0;
    }
    .detailArea h3 span.bottom .fs22{
        display:block;
    }
    .detailArea p.textC{
        margin-top:10px;
        padding:0 15px;
        text-align: left;
    }
    .photoArea .custom-control a{
        width:80px;
        height: 80px;
    }
    .photoArea .bx-wrapper .bx-viewport li .expanding{
        width:80px;
    }
    #shopInfo .infoList > li h4{
        text-align: left;
    }
    #shopInfo .infoList > li{
        font-size:100%;
    }
	footer ul li{
	    display: inline;
	    padding: 0 0;
	}
	footer ul li a{
	    display: block;
	    padding: 4px 6px;
	    border: 1px solid #ffffff;
	    margin: 10px 20px;
	}
}

@media screen and (max-width: 798px) {
    body{
        font-size:15px;
    }
    .fs16{ font-size:14px; }
    .fs19{ font-size:18px; }
    .fs20{ font-size:16px; }
    .fs22{ font-size:16px; }
    .fs24{ font-size:18px; }
    .fs34{ font-size:23px; }
    .fs36{ font-size:24px; }
    .fs48{ font-size:30px; }
    .fs52{ font-size:30px; }
    .mb30{ margin-bottom: 15px !important; }
    .mb50{ margin-bottom: 30px !important; }
    .mb60{ margin-bottom: 40px !important; }
    .mb80{ margin-bottom: 50px !important; }
    .mb100{ margin-bottom: 60px !important; }
    #header .inner{
        font-size:16px;
    }
    h2.title .jp{
        top:55px;
    }
    .eng #header h1{
        padding-top:5px;
        font-size:12px;
    }
    .eng h2.title{
        margin-bottom:30px;
    }
    #header h1,
    #header #changeLang{
        font-size:12px;
    }
    .top #header #changeLang,
    .detail #header #changeLang{
        top:22px;
    }
    .top .hdLogo,
    .detail .hdLogo{
        width:25%;
    }
    .top .hdLogo,
    .detail .hdLogo{
        top:43px;
    }
    nav ul {
        width: 75%;
        margin-left: 25%;
    }
    .top nav ul,
    .detail nav ul{
        margin-top:17px;
    }
    .top.eng nav ul,
    .detail.eng nav ul{
        margin-top:20px;
    }
    .top.eng nav li, 
    .detail.eng nav li{
        padding-top:8px;
    }
    nav li{
        width:50%;
        height:35px;
        padding-top:8px;
    }
    .en nav li{
        padding-top:8px;
    }
    nav li:nth-child(1){
        padding-top:5px;
        background-image: none;
    }
    
    nav li:nth-child(1) a:hover, nav li.current:nth-child(1) a {
        border-top: 3px solid #49486a;
    }
    nav li:nth-child(2) a:hover, nav li.current:nth-child(2) a{
        border-top: 3px solid #126a23;
    }
    nav li:nth-child(3) a:hover, nav li.current:nth-child(3) a{
        border-top: 3px solid #5190bd;
    }
    nav li:nth-child(4) a:hover, nav li.current:nth-child(4) a {
        border-top: 3px solid #bd516f;
    }
    nav li .en{
        display: none;
    }
    
    .detail #mainImage .titleBg{
        height:auto;
    }
    #bdLink ul{
        display: block;
    }
    #bdLink ul li{
        width:100%;
        max-width:inherit;
        margin-bottom:10px;
    }
    h2.title .jp span{
        top:-11px;
    }
    #topAccess h2.title{
        margin-bottom:45px;
    }
    #topAccess h2.title .jp{
        width:170px;
    }
    #topAccess h2.title .jp span{
        width:110px;
    }
    .top #content{
        padding-top:40px;
    }
    
    .detail .titArea{
        padding:20px 0 30px;
    }
    .detail .titArea h2.title .jp {
        top: 95px;
    }
    .detailArea,
    .contactArea{
        padding:25px 0;
    }
    #facility table th, #facility table td{
        padding:20px 0;
    }
    .photoArea .bgGray{
        padding:30px 0;
    }
    .photoArea .bx-wrapper {
        width: 96%;
    }
    .photoArea .custom-control a{
        width:60px;
        height: 60px;
    }
    .photoArea .custom-prev1 a, 
    .photoArea .custom-prev2 a, 
    .photoArea .custom-prev3 a, 
    .photoArea .custom-prev4 a{
        left:20px;
    }
    .photoArea .custom-next1 a, 
    .photoArea .custom-next2 a, 
    .photoArea .custom-next3 a, 
    .photoArea .custom-next4 a{
        right:20px;
    }
    .photoArea .bx-wrapper .bx-viewport li .expanding{
        width:60px;
    }
    .photoArea ul.custom-thumb{
        padding:20px 0 0;
    }
    #shopInfo .infoList > li{
        width:calc(100% / 3);
        padding:10px 1%
    }
    #btContact {
        padding: 15px 0 30px;
    }
    .booking.mb60{
        margin-bottom:30px !important;
    }
    .contactArea h2.title .jp{
        width:150px;
    }
    .contactArea h2.title .jp span{
        width:100px;
    }
    #access h2.title,
    #shopInfo h2.title{
        margin-bottom: 45px;
    }
    #shopInfo h2.title .jp{
        width:260px;
    }
    #shopInfo h2.title .jp span{
        width:200px;
    }
    #guidemap h2.title .jp{
        width:240px;
    }
    #guidemap h2.title .jp span{
        width:180px;
    }
	/* outline */
	#outline{
		margin-top: 30px;
		align-items: center;
		flex-direction: column;
	}
	#outline .table_box{
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
		padding-right: 20px;
	}
	#outline .table_box table{
		width: 100%;
	}
	#outline table th{
		width: 8em;
		padding-left: 2em;
	}
	#outline .photo{
		width: 80%;
	}
}

@media screen and (max-width: 695px) {
    #topGuestVilla{
        background-image: none;
    }
    #topGuestVilla01 .floatL, #topGuestVilla02 .floatR, #topGuestVilla01 .floatR, #topGuestVilla02 .floatL{
        float:none;
        width:100%;
    }
    #topGuestVilla h3{
        margin-bottom:20px;
    }
}

@media screen and (max-width: 640px) {
    .fs36{ font-size:20px; }
    .fs48{ font-size:23px; }
    .fs52{ font-size:24px; }
    body{
        font-size:14px;
    }
    h2.title .jp {
        top: 45px;
    }
    h2.title .jp span{
        top:-10px;
    }
    .top .hdLogo,
    .detail .hdLogo{
        width:25%;
    }
    .detail .hdLogo .pc{
        display: none;
    }
    .detail .hdLogo .smp{
        display: block;
    }
    nav ul {
        width: 75%;
        margin-left: 25%;
    }
    .detail #mainImage .titleBg,
    .detail.eng #mainImage .titleBg{
        top:50%;
        padding: 15px 5%;
    }
    #topContact .floatL, #topContact .floatR{
        float:none;
        width:100%;
    }
    .photoArea .bgGray{
        padding:20px 0;
    }
    .photoArea ul.custom-thumb li{
        width:calc(100% / 4);
    }
    #shopInfo .infoList > li{
        width: 50%;
        padding:10px 2%;
    }
    .photoArea .custom-control a{
        width:45px;
        height: 45px;
    }
    .photoArea .bx-wrapper .bx-viewport li .expanding{
        top:36%;
        width:45px;
    }.btn{
        padding:20px;
    }
    .detail.miyanoshita #access br.brNone{
        display: block;
    }
    #access h2.title,
    #shopInfo h2.title{
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 478px) {
    body{
        font-size:13px;
    }
    .fs16{ font-size:12px; }
    .fs19{ font-size:17px; }
    .fs20{ font-size:13px; }
    .fs22{ font-size:13px; }
    .fs24{ font-size:17px; }
    .fs34{ font-size:18px; }
    .fs48{ font-size:21px; }
    .fs52{ font-size:21px; }
    .mb60{ margin-bottom: 30px !important; }
    .mb80{ margin-bottom: 30px !important; }
    .mb100{ margin-bottom: 40px !important; }
    
    #header h1{
        font-size:10px;
    }
    .eng #header h1{
        font-size:8px;
    }
    #header .inner{
        font-size:12px;
    }
    .top nav ul,
    .detail nav ul{
        margin-top: 20px;
    }
    .top.eng nav ul,
    .detail.eng nav ul{
        position: absolute;
        top:23px;
        right: 0;
        /*margin-top:25px;*/
    }
    nav li:nth-child(1),
    nav li{
        padding-top:10px;
    }
    .detail #mainImage{
        height: 200px;
    }
    .detail #mainImage .titleBg,
    .detail.eng #mainImage .titleBg{
        top: 35%;
        padding: 10px 5%;
    }
    .top #content {
        padding-top: 30px;
    }
    #topGuestVilla h2.title .jp {
        width: 200px;
    }
    #topGuestVilla h2.title .jp span{
        width:150px;
        top:-10px;
    }
    .top h2.title .jp,
    h2.title .jp{
        top:40px;
    }
    #topGuestVilla h3 {
        margin-bottom: 5px;
    }
    #topGuestVilla p{
        line-height: 2;
    }
    .detailArea h3 span.t1{
        display: block;
    }
    #topAccess .map .smp{
        display: block;
    }
    #topAccess .map .pc{
        display: none;
    }
    #topContact p.textC{
        font-size:12px;
    }
    h2.title{
        margin-bottom:50px;
    }
    .detail .titArea h2.title .jp {
        top: 70px;
    }
    #facility table th,
    #facility table td{
        display: block;
        width:100%;
    }
    #facility table th{
        padding-bottom:8px;
        padding-left:8px;
        border-bottom: 1px dotted #ccc;
    }
    #facility table td{
        padding:20px 8px;
    }
    #access .link{
        text-align: center;
    }
    #access .link .floatL,
    #access .link .floatR{
        float: none;
    }
    #access .link .floatL{
        margin-bottom:10px;
    }
    .photoArea .custom-control a{
        width:30px;
        height: 30px;
    }
    .photoArea .bx-wrapper .bx-viewport li .expanding{
        top:34%;
        width:30px;
    }
    #bdLink .title{
        height: 90px;
    }
    #bdLink h2{
        height:70px;
        border-bottom:2px solid #fff;
    }
    #bdLink h2 img{
        width:180px;
    }
    #shopInfo .infoList > li > ul > li {
        text-indent: -1.3em;
    }
    .contactArea p.mb30{
        font-size:12px;
    }
    #shopInfo h2.title .jp{
        width:230px;
    }
    #shopInfo h2.title .jp span{
        width:170px;
    }
    #guidemap h2.title .jp{
        width:210px;
    }
    #guidemap h2.title .jp span{
        width:150px;
    }
    #topAccess h2.title .jp,
    #facility h2.title .jp, 
    #access h2.title .jp{
        width:140px;
    }
    #topAccess h2.title .jp span,
    #facility h2.title .jp span, 
    #access h2.title .jp span{
        width:90px;
    }
}

@media screen and (max-width: 375px) {
    .fs36{ font-size:20px; }
    .fs52{ font-size:16px; }
    .top .hdLogo, .detail .hdLogo {
        width: 28%;
    }
    .eng #header h1 {
        font-size: 6px;
    }
    nav ul {
        width: 72%;
        margin-left: 28%;
    }
    .detail #mainImage {
        height: 180px;
    }
    .detail.eng #mainImage .titleBg{
        padding: 10px 2%;
    }
    .detail.eng #mainImage .titleBg .fs48{
        font-size:16px !important;
    }
    .booking ul li{
        width:48%;
        margin:0 1% 15px;
    }
    .top #content {
        padding-top: 20px;
    }
    #facility table{
        display: none;
    }
    #facility dl{
        display: block;
        width:100%;
    }
    #facility dt{
        padding:8px;
        border-bottom: 1px dotted #ccc;
    }
    #facility dd{
        padding:8px;
        border-bottom:1px dotted #000;
    }
    #facility dd li {
        margin-left: 1.5em;
        list-style-type: disc;
        list-style-position: outside;
    }
    
}

@media screen and (max-width: 360px) {
    body{
        font-size:12px;
    }
    .fs19{ font-size:16px; }
    .fs20{ font-size:14px; }
    .fs22{ font-size:12px; }
    .fs24{ font-size:16px; }
    .fs34{ font-size:18px; }
    .fs36{ font-size:18px; }
    .fs48{ font-size:20px; }

    .contactArea p.mb30 {
        font-size: 10px;
    }
    #topContact p.textC{
        font-size:10px;
    }
    .show-on-mobile{
    display:block;
  }
    .top #header {
    height: 130px;
    /* text-shadow: 0 0 black; */
}
}

@media screen and (max-width: 330px) {
    .fs22{ font-size:10px; }
    .fs24{ font-size:14px; }
    .fs34{ font-size:16px; }
    #shopInfo .infoList > li{
        font-size:10px;
    }
    #shopInfo .infoList > li h4{
        margin-bottom:8px;
    }
    #facility table td .floatL,
    #facility table td .floatR{
        float: none;
        width:100%;
        padding-right: 0;
    }
    #facility table td .floatL{
        margin-bottom: 10px;
    }
    .show-on-mobile{
    display:block;
  }
    
}