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


/* 基本設定： ページ全体 */

img[src$=".svg"] {
    width: 100%;
	line-height: 0;
	font-size: 0;
}

* {-webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
  }
  
html {
  scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans",sans-serif;
	font-weight: 500;
	line-height: 30px;
	font-size:0.9em;
	line-height: normal;
	color:#333;
	width:100%;
	background-color:#eeebe5;/*象牙色*/
	-webkit-text-size-adjust: 100%;
}
body#top-page{
	display: none;
}

.mincho { font-family: 'Shippori Mincho', serif;}

.bnr {
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

/*----文字の装飾・マージン・色等----*/
.font-60 { font-size:60%;}
.font-70 { font-size:70%;}
.font-80 { font-size:80%;}
.font-90 { font-size:90%;}
.font-110 { font-size:110%;}
.font-120 { font-size:120%;}
.font-130 { font-size:130%;}
.font-140 { font-size:140%;}
.font-160 { font-size:160%;}
.margintop-1 { margin-top: 1% !important;}
.margintop-2 { margin-top: 2% !important;}
.margintop-3 { margin-top: 3% !important;}
.margintop-4 { margin-top: 4% !important;}
.margintop-5 { margin-top: 5% !important;}
.marginbottom-1 { margin-bottom: 1% !important;}
.marginbottom-2 { margin-bottom: 2% !important;}
.marginbottom-3 { margin-bottom: 3% !important;}
.marginbottom-4 { margin-bottom: 4% !important;}
.marginbottom-5 { margin-bottom: 5% !important;}

.redText{color: #880000;}
.blueText{color: #0169ae;}
.whiteText{color:#fff;}
.redBoxborder{width:20%; display: block; border:1px solid #880000; color: #880000; text-align:center;}

.captionL{padding:0 0 0 0.5em;}
.captionR{padding:0 0.5em 0 0;}
.captionC{display: block; text-align: center;}
.textLeft{text-align: left;}
.textRight{text-align: center; padding-right: 0%;}



/*----文字の装飾・マージン等----*/
/*ホバーエフェクト*/
.bnr img , .bnr-wrap img {
  transform: scale(1);
  transition: .4s ease-in-out;
}
.bnr:hover img , .bnr-wrap:hover img {
  transform: scale(1.05);
}
.underline:hover{
	border-bottom: 1px solid #333;
}
.underlineW:hover{
	border-bottom: 1px solid #fff;
}

/* java： fadeInUp fadeInDown */

.js-anim {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
	visibility:hidden;
}
.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}

@-webkit-keyframes fadeInUp {
 0% {  opacity: 0; -webkit-transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



a.anchor{ display: block; padding-top: 200px; margin-top: -200px;}

/*----clearfix----*/

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.clearfix {
	display: inline-table;
	min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/*table*/
.table { font-size: 95%;}
.table li { width: 100% !important; margin: 0 !important;} 
.table dl { display:flex; width: 100%; align-items: stretch; } 
.table dl.tableline { display:flex; width: 100%; align-items: stretch; } 
.table dt { width: 20%; text-align:center; display:inline-block; vertical-align: middle; }
.table dd { width: 80%;background: #fbf0e0;}
.table dt , .table dd { margin-bottom: 1px; padding: 1.5%; }
.table dt { background:#92817a; color:#fff;}

/*table ページ下の概要*/
.table02 { font-size: 95%;}
.table02 dl { display:flex; width: 100%; align-items: stretch; } 
.table02 dt { width: 20%; text-align:center; display:inline-block; vertical-align: middle; }
.table02 dd { width: 80%;background: #fbf0e0;}
.table02 dt , .table02 dd { margin-bottom: 1px; padding: 1.5%;}
.table02 dt { color:#fff; background:#92817a;}
.table2box dt{width:35%;}
.table2box dd{width:15%;}

/*table 約款ページの表*/
.table03 { font-size: 95%;}
.table03 dl  { display:flex; width: 100%; align-items: stretch; } 
.table03 dt  { width: 30%; text-align:center; display:inline-block; vertical-align: middle;
color:#fff; background:#92817a;}
.table03 dd { width: 35%;background: #fbf0e0;text-align:center;margin-bottom: 1px;}
.table03 .row{width: 70%;background: #fbf0e0;text-align:center;margin-bottom: 1px;}
.table03 .l-txt{text-align:left;}
.table03 dt , .table03 dd {  padding: 1.5%;}
.table03 dd:not(:last-child) {border-right: #fff 1px solid;}

.table04 { font-size: 95%;}
.table04 dl { display:flex; width: 100%; align-items: stretch; } 
.table04 dt { width: 25%; text-align:center; display:inline-block; vertical-align: middle; color:#fff; background:#92817a;}
.table04 dd { width: 15%;background: #fbf0e0;text-align:center;}
.table04 dt , .table04 dd { margin-bottom: 1px; padding: 1.5%;}
.table04 dd:not(:last-child) {border-right: #fff 1px solid;}


/*dtとddの調整*/
.twoPiece .table dt , .separate-box .table dt { width: 30% !important;}
.twoPiece .table dt , .separate-box .table dd { width: 70% !important;}
.w30 { width: 30% !important;}
.w70 { width: 70% !important;}
.w15 { width: 15% !important;}
.w85 { width: 85% !important;}

/*tableここまで*/

/* margin打消し */

.noMargin dl.table {
	margin: 0 !important;
	}
	
.noMargin dl {
	margin: 0 !important;
	}
	
.noMargin-bottom {
	margin-bottom: 0 !important;
	}

/* --------------------------------------------------- btn */
	
#mainContainer {
	scroll-snap-type: y mandatory;
	position: relative;
	width: 100%;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color:#eeebe5;	
}

header {
	width: 100%;
	height: auto;
	background-image:url(../img/top/bg.svg);
	background-color: #fff;
	background-repeat: repeat;
	}

.header-inner {
	max-width: 100%;
	display: flex;
	justify-content:space-between;
	padding: 1% 10% 1% 2%;/*ハンバーガーが端におさまらないので10％指定*/
}
#header-logo { margin-top: 12px; width: 100%; }
#header-logo img {max-width: 230px;}

#header-HMI-logoBox { 
	background-color: #0169AE; 
	z-index: 3;/*トップページ固定部分との関係でz-index調整*/
	box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.1); }
.header-HMI-logo { max-width: 1200px; margin: 0 auto; padding: 2px 10px 0 ; }
.header-HMI-logo a{color: #fff;}
.header-HMI-logo a { margin-left: 5px; font-size: 110%; color: white; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; transition: color .3s;}
.header-HMI-logo a:hover { color:rgb(218, 231, 240);}
.header-HMI-logo a::before{
	display: inline-block;
	content:"";
	background-image:url(../img/logo/headerHMIlogo.svg);
	background-size: contain;
    background-repeat: no-repeat;
	width:15px;	
	height: 15px;
	margin-right: 6px;
	margin-bottom: -2px;
}

/*---------------
headerGnavi---------------*/
header {
	postion: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 3;
}
header nav#headerGnavi { width: 100%; display: none;}
.headerGnavi {
    position: relative;
    width: 100%;
	margin: 0 auto;
    height: 70px;
	display:flex;
	justify-content: space-between;
	color:#666;
}
.headerGnavi > li {
	flex: auto;
    height:100%;
    padding: 20px 0;
	text-align:center;
	font-weight:500;
}

.headerGnavi > li a {
	color:#FFF;
	font-size: 0.9em;
	text-decoration:none;
	font-weight:400;
	position: relative;
	display: inline-block;
	transition: .3s;
}
.headerGnavi > li a::after{
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #fff;
	transition: .3s;
	transform: translateX(-50%);
}
.headerGnavi .menu__second-level > li a::after{
	position: absolute;
	bottom: initial;
	left: initial;
	content: initial;
	width: initial;
	height: initial;
	background-color: initial;
	transition: initial;
	transform: initial;
}
.headerGnavi > li a:hover::after{
	width: 100%;
}
ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 3;
	line-height: 170%;
	font-size: 100%;
	font-weight:500;
}
.menu__second-level li {
	margin-bottom: 20px;
	text-align: left;
}

/*下線が動く*/
.headerGnavi .menu__second-level a {
	padding:0 0 5px 15px;
	line-height: 150%;
	color:#555;
	position: relative;
	display: inline-block;
	transition: .3s;
	font-weight:500 ;
}

.headerGnavi .menu__second-level a::before {
	content:"";
	position: absolute;
	left: 0px;
	top: 8px;
	width: 4px;
	height: 4px;
	border-top: 2px solid #0169ae;
	border-right: 2px solid #0169ae;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    -o-transition: left 0.2s ease;
    transition: left 0.2s ease;
}

.headerGnavi .menu__second-level a:hover::before{
	left: 3px;
}
/*グロナビの最後のメニューの下層部分の位置*/
li.menu__single:last-child ul.menu__second-level {
	right:0;
}
li.menu__single:last-child i{font-size:120%;}

/* floatクリア */
.headerGnavi:before,
.headerGnavi:after {
    content: " ";
    display: table;
}

.headerGnavi:after {
    clear: both;
}

.headerGnavi {
    *zoom: 1;
}
/* mega */
li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 70px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
	margin-top: -1px;
    padding: 40px 2% 20px;
	background-color:#fff;
}

li.menu__mega:hover ul.menu__second-level {
    top: 70px;
    visibility: visible;
    opacity: 1;
	z-index:99;
}

li.menu__mega ul.menu__second-level > li {
    float: left;
    width: 32%;
    border: none;
}

li.menu__mega ul.menu__second-level > li {
    float: left;
    width: 32%;
    border: none;
}

li.menu__mega ul.menu__second-level > li:nth-child(3n+2) {
    margin: 0 1%;
}

/* single */

.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
	position: absolute;
    top: 70px;
    box-sizing: border-box;
    width: auto;
	min-width: 150px;
    padding: 30px 2% 10px;
    /*-webkit-transition: all .2s ease;
    transition: all .2s ease;*/
	background-color:#fff;
}

li.menu__single:hover ul.menu__second-level {
    top: 70px;
    visibility: visible;
    opacity: 1;
}
/*---------------
ここまでheaderGnavi---------------*/
/*---------------------------------
	ヘッダ（ハンバーガーメニュー）
---------------------------------*/
#hamburgermenu { 
	position: relative;
	display: flex; 
	z-index: 1000;
	background: transparent;
	top: 35px;
	}

/* チェックボックスを非表示にする */
.drawer_hidden {
	display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 0;/* #hamburgermenuで位置調整 */
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
	mix-blend-mode: difference;/* 背景色にあわせて文字色変更 */
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background: #fff;/* 三本線の色 */
	transition: 0.5s;
	position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
	bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#hamburger:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#hamburger:checked ~ .drawer_open span::before {
	bottom: 0;
	transform: rotate(45deg);
	background: #fff;/*　×の色*/
}

#hamburger:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
	background: #fff;/*　×の色*/
}
.hgBox01{ padding: 5%;}
.hg_reserve,.hg_inquiry{width: 100%; position: relative;}
.hg_reserve a,.hg_inquiry a {
	display: block;text-align: center; 
	padding: 0.5em; color: #fff;
	background: #0c032b;
	}
.hg_inquiry a {
	background: #7e655a;
	}
.hg_reserve a:hover,.hg_inquiry a:hover{
	opacity: 0.5;
	}
.hgBox02_inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	margin: 5% 0 0;
}
.hgBox02_inner li.hgmenu {
	width: 90%;
	margin: 0 5% 0 ;
}
/*---------------------------------
	ハンバーガーメニュー（別ウインドウ）
---------------------------------*/
.drawer_list {
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 100%;
	left: 0%; /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: #eeebe5;
	transition: .5s;
	padding-top: 10px;
	overflow: hidden scroll;
}

/* メニュー黒ポチを消す */
.navigation {
	list-style: none;
}
.navigation a {
	color: #333;
	text-decoration: none;
}

/* アイコンがクリックされたらメニューを表示 */
#hamburger:checked ~ .drawer_list {
	bottom: 0;/* メニューを画面に入れる */
}

p.hgmtitle {
	text-align: center; 
	margin: 12% 10% 5% ;
}

.accordion_menu {
	margin: 0 auto;
}
.toggle {
	display: none;
}
.menubox {
	position: relative;
	margin-top: 0.3em;
}
.menubox:last-child {
	margin-bottom: 1.2em;
}
.menu_title,
.menu_content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.menu_title{
	padding: 0.8em 1em 0.1em 2.5em;
	display: block;
	color: #333;
	font-size: 1.1em;
	border-bottom: 1px solid #c09c3b;
}
.menu_title02{
	padding: 0.8em 1em 0.1em 2.5em;
	display: block;
	color: #333;
	font-size: 1.1em;
	border-bottom: 1px solid #c09c3b;
	position: relative;
}
.menu_title02::before{
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 900; 
	display: inline-block;
	position: absolute;
	left: 1.25em;
	top: 1.25em;
	width: 2px;
	height: 0.6em;
	color: #c09c3b;
}
.menu_title02 a:hover{color:#0169ae;}
.menu_title::after,
.menu_title::before {
	content: "";
	position: absolute;
	left: 1.25em;
	top: 1.25em;
	width: 2px;
	height: 0.6em;
	background-color: #c09c3b;
	transition: all 0.3s;
}
.menu_title::after {
	transform: rotate(90deg);
}

.menu_content {
	max-height: 0;
	overflow: hidden;
}
.menu_content p {
	margin: 0;
	padding: 0.8em;
	font-size: 0.9em;
	line-height: 1.5;
}
.menu_content p:hover{
	color: #0169ae;
}
.menu_content p.dwline {
	border-bottom: solid 1px #c09c3b;
	margin: 0;
	padding: 0.8em;
	font-size: 0.9em;
	line-height: 1.5;
}
.menu_content p.dwline a:hover{color: #0169ae;}
.menu_content {
	display:none;
}
.toggle:checked + .menu_title::before {
	transform: rotate(90deg) !important;
}
.toggle:checked + .menu_title + .menu_content {
	display: block;
	max-height: 500px;
	transition: all 1.5s;
}
.menu_content p a{
	display: block;
	position: relative;
}
.menu_content p a::after{
	content:"";
	position: absolute;
	left: auto;
	bottom: 7px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #c3983a;
	border-right: 2px solid #c3983a;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*----
	ヘッダ（ハンバーガーメニュー）ここまで
-----*/


main { 
	width:100%;
	background: #eeebe5;/*象牙色*/
	z-index: 1; 
	overflow: hidden;
}

article #mainImage {
	display: flex;
	justify-content: center;
	align-items: end;
	overflow: hidden;
	height: 40vh;
	margin: 0 auto 0;
}

article #mainImage img { 
	width: 100%; height:40vh; object-fit: cover; object-position: 50% 50%;}

h1 { margin: 15% 0 8% ; font-size: 160%; letter-spacing: 0.1em;}
#h1-text { font-size: 110%; margin: -2% 0 5% 2%; line-height: 150%;}
/*トップページのみ　ヘッダー内ロゴがh1*/
#top-page h1 { margin: 12px 0 0% ;width: 100%; }
#top-page h1 img {max-width: 230px;}
.h1-short{font-size: 80%; letter-spacing:-0.05em;}
h2 { font-size: 140%; line-height: 150%; letter-spacing: 0.05em;}
h3 { font-size: 135%; line-height: 140%; letter-spacing: 0.05em;}
.h2-title{
margin: 10% 5% 5%; font-size: 160%;letter-spacing: 0.1em;
padding-left: 15px; color:#0c032b;
position: relative;
	}
.h2-title:before{
	content: "";
	display:block;
    position: absolute;
	top:0;
	left: 0;
	border-left:5px solid #92817a ;
	height: 100%;
	}
.h2-title:after{
	content: "";
	display:block;
    position: absolute;
	bottom:0;
	left: 15px;
	border-bottom:1px solid #0c032b ;
	width:95%;
	}

.h2-titleBlue{
	color:#0060b7;
	font-size:140%;
	margin:0 0 0 0;
	font-family: 'Shippori Mincho', serif;
	position: relative;
	}

.h3-title{
	color:#0060b7;
	line-height: 1.5;
	font-size:140%;
	margin:0 0 3%;
	font-family: 'Shippori Mincho', serif;
	position: relative;
}
.h3-titleBlack{
	margin:0 0 0.5em 0;
	font-size:140%;font-family: 'Shippori Mincho', serif;
}

section.sec01{
	position:relative;
	width:100vw;
	margin:0 0 10%;
	padding:0;
	max-width:none;
}
section.sec02 { height:auto; margin: 0% 0% 5%; padding: 0 5%; }
section.sec_bnr { height:auto; margin: 0% 0% 5%; padding: 0 0; }
figure{display:block;
margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

h2 {
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

style attribute {
    visibility: visible;
    height: auto;
}


/* ダイレクトインボタンここから*/
.directinBtn {
	width:120px;
	height:60px;
	border-radius: 100px 100px 0 0;
	background:#dd0000;
	margin: 0 auto ;
	padding: 20px 10px 0;
	color:#FFF;
	text-align:center;
	font-size: 120%;
    display: block;
}

/* ダイレクトインボタンここまで*/

footer { 
	background-image:linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)) ,url(../img/top/bg.svg); 
	position:relative;
}

.editorial2 {
  display: block;
  width: 100%;
  height: 200px;
  margin: 0 0 ;
  z-index:5;
  position:absolute;
  left:0px;
  float:left;
}

#footer-box { width: 90%; margin: 0 auto 0;}
#hmiLogo { width: 80%; margin-bottom: 0%;}
#footerLogo { width: 100%; margin-bottom: 0%;}
#footerLogo img{width: 100%; max-width: 572px;}
#hmiLogo img { width: 100%; max-width: 400px;}
#footerEnglish{color: #fff; font-size:120%; margin-bottom: 0.5em;}

address dl { color:#0169ae; }
address dl dt { font-size: 120%; margin: 0 0 1%; color:#0c032b;}
address dl dd#add { font-size: 110%; color:#fff;}
address dl dd#tel { font-size: 160%; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 1px;padding-bottom: 5%;}
address dl dd#tel a{ color:#fff;}
address dl dd#tel i{font-size:80%;}
#sns-btn { float:right; display: flex; margin-top: 20px;}
#sns-btn li { width: 30px; margin-right: 10px;}
#sns-btn li img { width: 100%;}
#sns-btn:after { clear:both;}

/*フッターナビ非表示*/
#siteMap ,#footerNabi{ display: none;}

#Copyright { color:#fff; font-size: 70%; text-align:center; background:#0C032B;}

.pc-view { display:none !important;}
.pc-view-inline { display: none !important;}
.sp-view { display: block;}
.sp-view-inline { display: inline;}
.pc-view1000 { display: none;}

/* タイトルなど装飾 */
.bigTitle{
	position:relative;
	padding:0 30px 0;
	margin: 5% 0% 5%;
	font-size:2.4em ;
}
.bigTitle:before{
	content: "";
	position: absolute;
	left:10px;
	bottom:25px;
	width:20px;
	height:20px;
	border-radius:50%;
	border: 2px solid #01436f;
}

.CircleDecoT1{
	position: absolute;
	left:0px;
	top:9px;
	width: 25px;
	height:25px;
	z-index: 1;
	border-radius:50%;
	border:2px solid #01436f;
}

.CircleDecoT2{
	position: absolute;
	left:0px;
	top:9px;
	width: 25px;
	height:25px;
	z-index: 1;
	border-radius:50%;
	border:2px solid #01436f;
}

/*各ページタイトルｈ1*/
.CircleDeco01{
	position: absolute;
	left:0px;
	top:16px;
	width: 25px;
	height:25px;
	z-index: 1;
	border-radius:50%;
	border:2px solid #01436f;	
}

 /* タイトル装飾ここまで */

.area01{
	position:relative;
	top:0;
	list-style:none;
	width:100%;
	margin:0 0 10%;
	display:flex;
	flex-direction:column;
}
.area02{
	position:relative;
	top:0;
	list-style:none;
	width:100%;
	margin:0 0 10%;
	display:flex;
	flex-direction:column-reverse;
}
.area04-inner{position:relative;
	width:100%;
	margin: 0 0;
	display:flex;
	flex-direction:column-reverse;
	justify-content: center;
	}
.area-S{
	margin:0 5% 10%;
	padding-bottom: 2%;
}
.boxImg01,.boxImg02,.boxImg03{
	display:flex;
	width:100%;
	margin:0 0 5%;
	padding:0;
}
.boxImg01 img,.boxImg02 img,.boxImg03 img{
	width:100%;
	height:100%;
	object-fit: cover;
}

.boxText01,.boxText02{
	position:relative;
	display:flex;
	flex-direction:column;
	width:90%;
	margin: 0 auto;
	padding: 30px 0 ;
}
.boxText01 dl,.boxText02 dl{
	display:block;
	position:relative;
}
.boxTitle01{
	position:relative;
	display:flex;
	flex-direction:column;
	width:90%;
	margin: 0 auto;
	padding: 0 0 ;
}

.boxText03{
	width: 100%;
	display:flex;
	flex-direction:column;
}
.boxText03,.boxText04{padding: 0 5% 30px;}
.boxLong01{margin: 0 5%;}
.boxLong02{margin: 0 5%;}
.boxLong03{margin: 0 5%;}
.boxLong03-inner01{ 
	display: block; width: 100%;padding:0 0; margin-bottom: 0%;visibility:hidden;
}
.boxLong03-innerR01{ 
	display: block; width: 100%;padding:0 0; margin-top: 0%; visibility:hidden;
}
.boxLong03-inner01 img,.boxLong03-innerR01 img{ width: 100%; height: 100%; object-fit: contain;}
.areaRoom{
	position:relative;
	list-style:none;
	width:100%;
	margin:0 0 100px;
	display:flex;
	flex-direction:column;
}
.areaRoom-inner{
	position:relative;
	width:100%;
	margin: 0 0;
	display: flex;
	flex-direction: column;
	}
.boxTextRoomR{
	width: 95%;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	margin: -5% 5% 0 0;
	padding: 10% 10% 7%;
	background: #d9dde1;
}
.boxTextRoomL{
	width: 95%;
	display:flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	margin: -5% 0 0 5%;
	padding: 10% 10% 7%;
	background: #d9dde1;
}
.boxTextRoomR_inner,.boxTextRoomL_inner{
	margin-right: 0;
	margin-bottom: 5%;
	width: 100%;
	font-size: 120%;
	}
.boxImgRoomR{
	width:90%;
	/*height: 30vh;*/
	margin:0 0 0 10%;
	padding:0;
	visibility:hidden;
	}
.boxImgRoomR img,.boxImgRoomL img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.boxImgRoomL{
	width:90%;
	/*height: 30vh;*/
	margin:0 10% 0 0;
	padding:0;
	visibility:hidden;
	}

/*右から客室・レストランスライドイン*/
.rightin01{
 visibility: visible !important;
 animation: slideR 1.5s cubic-bezier(.35,.45,.55,1) 1 forwards;
 z-index: 1;
}
 @keyframes slideR {
  0% {
    transform: translateX(500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}
/*左から客室・レストランスライドイン*/
.leftin01{
 visibility: visible !important;
 animation: slideL 1.5s cubic-bezier(.35,.45,.55,1) 1 forwards;
 z-index: 1;
}
 @keyframes slideL {
  0% {
    transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}

.roomDetail{width: 100%; }
.roomDetail dt{padding:1% 2% 1% 1%; display: inline-block; width: 35%; border-bottom: 2px solid #dae7f0;box-sizing: border-box;
}
.roomDetail dd{padding:1% 1% 1% 0; display: inline-block; width: 65%; border-bottom: 2px solid #dae7f0;box-sizing: border-box;
}

/*客室ページのアコーディオン
背景水色なのでうすいベージュボタン*/
.accordionRoom {display:block;width:100%;margin: 0 auto; padding: 0;}
.acContentRoom {margin: 0 ;}
.toggleRoom {
	display: none;
}
.label-Room {		/*タイトル*/
	 display: block;background: #eeebe5;cursor: pointer;padding: 0.5em; color:#0c032b; text-align:center;
}
.label-Room::before{ /*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	border-top: 1px solid #0c032b;
	border-right: 1px solid #0c032b;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 8px );
	right: 20px;
	transform: rotate(135deg);
}
.label-Room,
.acContentRoom {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
} 
.ac-contRoom {		/*本文*/
	height: 0;overflow: hidden; background: #fff;padding: 0 10px; color:#333; margin: 0 0 5%;	
}
.toggleRoom:checked + .label-Room + .ac-contRoom {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggleRoom:checked + .label-Room::before {
	transform: rotate(-45deg) !important;
}

/*レストランページのアコーディオン*/
.accordionRest {display:block;width:100%;margin: 0 auto 3%; padding: 0 0 ;}
.acContentR {margin: 0 ;}
.toggleR{display: none;}
.label-R {		/*タイトル*/
	display: block;
	background: #e2ded6;cursor: pointer;padding: 0.5em; color:#0c032b; text-align:center;	
}
.label-R::before{		/*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	border-top: 1px solid #0c032b;
	border-right: 1px solid #0c032b;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 8px );
	right: 20px;
	transform: rotate(135deg);
}
.label-R,
.ac-contR {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.ac-contR{height: 0;overflow: hidden; background: #fff;padding: 0 10px; color:#333; margin: 0 0 5%;}
.toggleR:checked + .label-R + .ac-contR {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggleR:checked + .label-R::before {
	transform: rotate(-45deg) !important;
}
.accordionRest label:hover {background: #fff;}
.accordionRest dl{width: 100%; }
.accordionRest dt{padding:1% 2% 1% 1%; display: inline-block; width: 33%; border-bottom: 2px solid #dae7f0;box-sizing: border-box;
}
.accordionRest dd{padding:1% 1% 1% 0; display: inline-block; width: 65%; border-bottom: 2px solid #dae7f0;box-sizing: border-box;
}
/*濃いベージュ色のアコーディオン　会議ページとか*/
.accordionAreaB {display:block;width:100%;margin: 0 auto; padding: 0;}
.acContentB {margin: 0 ;}
.toggleB {
	display: none;
}
.label-B {		/*タイトル*/
	 display: block;background: #e2ded6;cursor: pointer;padding: 0.5em; color:#0c032b; text-align:center;
}
.label-B::before{ /*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	border-top: 1px solid #0c032b;
	border-right: 1px solid #0c032b;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 8px );
	right: 20px;
	transform: rotate(135deg);
}
.label-B,
.ac-contB {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
} 
.ac-contB {		/*本文*/
	height: 0;overflow: hidden; background: #fff;padding: 0 10px; color:#333; margin: 0 0 5%;	
}
.toggleB:checked + .label-B + .ac-contB {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggleB:checked + .label-B::before {
	transform: rotate(-45deg) !important;
}
.accordionAreaB dl{width: 100%; }
.accordionAreaB dt{padding:1% 2% 1% 1%; display: inline-block; width: 33%; border-bottom: 2px solid #dae7f0;box-sizing: border-box;
}
.accordionAreaB dd{padding:1% 1% 1% 0; display: inline-block; width: 65%; border-bottom: 2px solid #dae7f0;box-sizing: border-box;
}
/**うすいベージュのアコーディオン　ページ下の概要**/
.accordionSummary{
	width: 100%;
    /*max-width: 1000px;*/
    margin: 0 auto;
}
.item-title {
	width: 90%;
    margin: 0;
}

.item-jp {
	font-size: 87%;
	color: #0c032b;
    display: block;
	line-height: 1.5rem;
    letter-spacing: 0.13em;
}
.item-en {
	font-size: 80%;
	color: #0169ae;
	font-family: 'Inter', sans-serif;
}
.summary-content span {
	font-size: 81%;
    padding-top: 1.2rem;
    display: inline-block;
}
/*ベース*/
.toggle-s {
	display: none;
}
.summary-label {		/*タイトル*/
	padding: 0.6rem 1em;
	display: block;
	color: #fff;
	background: #eeebe5;
	cursor: pointer;
}
.summary-label::before{		/*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	border-top: 2px solid #0c032b;
	border-right: 2px solid #0c032b;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 6px );
	right: 20px;
	transform: rotate(135deg);
}
.summary-label,
.summary-content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.summary-content {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
	background: #f5f3f0;
}
.toggle-s:checked + .summary-label + .summary-content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle-s:checked + .summary-label::before {
	transform: rotate(-45deg) !important;
}
.card-detail{display: flex;flex-direction: row;
align-items: center;}
.card-detail li{width: 60px;padding-right: 2px;}
.card-detail li img{width:100%; height: 100%; object-fit: contain;}

.boxLong04-inner{display: flex;flex-direction: column;
	justify-content :center;margin: 0 5% 5%; background:#e2ded6;}
.boxLong04-innerR{display: flex;flex-direction: column-reverse;
	justify-content :center;margin: 0 5% 5%; background:#e2ded6;}
.boxLong04Img img{ width: 100%; height: 100%; object-fit: cover;}
.boxLong04Txt01,.boxLong04Txt02{
	padding: 5%;
}
.boxLong04Txt01 p,.boxLong04Txt02 p{
	line-height: 1.8;	
	}

.titleEnglish{
    display: block;
	position:relative;
	width:100%;
	color:#0c032b;
	font-size:3em;
	font-family: 'Inter', sans-serif;
	letter-spacing:-0.01em;
	line-height: 1;
	margin: 0 0 0.1em;
}

.titleEnglishTop{
    display: block;
	position:relative;
	color:#0c032b;
	font-size:3em;
	font-family: 'Inter', sans-serif;
	letter-spacing:-0.01em;
	line-height: 1em;
	margin: 0 10% 5%;
	padding: 0 0 0 30px;
	line-height: 1;
}
.titleEnglishTop a{color:#0c032b;}
.titleEnglishTop02{
    display: block;
	position:relative;
	width:100%;
	color:#0c032b;
	font-size:3em;
	font-family: 'Inter', sans-serif;
	letter-spacing:-0.01em;
	padding: 0 0 0 30px;
	line-height: 1;
}

.titleJa{
	color:#01436f;
	line-height: 1;
	position: relative;
}

.titleJa02{
	color:#01436f;
	line-height: 1;
	position: relative;
}
.titleJa02 h2{
	margin:0 0 30px;
	padding-left: 25px;
	line-height:1;
	font-size:140%;
	font-family: 'Shippori Mincho', serif;
	position: relative;
}
.titleJa02:before{
	content: "";
	position: absolute;
	left:0px;
	top:50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius:50%;
	background: #0169ae;
	display: inline-block;
	transition: 1s;
	animation: blinking03 4s ease-out infinite alternate;
}
@keyframes blinking03 {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.1;
	}
	100% {
		opacity: 1;
	}
}
.titleJa02:hover:before{
	background: #fff;
    transform: scale(5);
	transition-duration: 0.3s;
	}
.titleJa03{
	display: block;
	font-size:0.5em;
	font-family: 'Shippori Mincho', serif;
}
.titleJa03 a{color: #333;}
/*textBox01 トップページ内の説明文*/
.textBox01{margin-bottom:10%; font-size:120%; line-height: 1.6;}
/*textBox02 ご案内　背景白*/
.textBox02{margin:3% 0 5%; width:100%; padding: 3%; background: #fff;}
.textBox02 dt{ font-size: 1.2em; margin-bottom: 3%; width: 100%; padding: 0 20px; border-bottom: 2px solid #0169ae; }
.textBox02 dd{margin-bottom: 5%;}
.textBox02 dd.photo{display: inline-block; width:50%; margin: 0% 25% 0%;}
.textBox02 dd.photo img{width: 100%; height: 100%; object-fit: cover;}
/*textBox03 ご案内　背景なし*/
.textBox03{margin:0% 0 3%; width:100%; padding: 1.5% 0 3%;}
.textBox03 a{color:#0169ae; }

/*textLine01 一行文章*/
.textLine01{margin-bottom:5%; font-size:120%; line-height: 1.6;}

.route01{	
	background: #0060b7;
	color:#fff;
	text-align: left;
	padding:0.2em 1em 0.2em 1em;
	margin: 0 0 0.5em;
}
.route01 i{padding-right: 0.5em;}

/*詳細を見る群青色ボタン（PCサイズで横配置）*/
.linkBtn01,.linkBtn01Long{
	width:100%;
	margin:0 0;
	padding: 1em;
	background:#01436f;
	text-align:center;
	position:relative;
}
/*プラン一覧を見るボタンは青色*/
.linkBtn01Long{
	background: #0169ae;
	margin-bottom: 10%;
}
.linkBtn01inner a,
.linkBtn01Long_inner a{ 
	display: block; width:100%; color:#fff;
}
.linkBtn01inner:after,
.linkBtn01Long_inner:after{
	content: "\f105";
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; 
	display: block;
	width: 20px;
	height: 20px;
	position:absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
}

/*観光ページこの施設の公式サイト青ボタン（PCサイズも青ボタン）*/
.linkBtn02{
	padding:1em;
	margin: 1em 0;
	background: #0060B7;
	text-align:center;
	position:relative;
}
.linkBtn02inner a{
	display: block;
	width: 100%;
	color:#fff;}
.linkBtn02inner:before,
.linkBtn02inner:after{
	content:"";
	display:block;
	position:absolute;
}
.linkBtn02inner:before{
	border-right:1px solid #fff;
	border-top:1px solid #fff;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	width:8px;height:8px;
	right:25%;top:50%;
	margin-top:-4px;
}
/*青ボタン（予約システムリンク・PCサイズでページの中央配置）*/
.linkBtn03{
	padding:1em;
	margin: 1em 0;
	background: #0060B7;
	text-align:center;
	position:relative;
}
.linkBtn03inner a{
	display: block;
	width: 100%;
	color:#fff;}
.linkBtn03inner:after{
	content: "\f105";
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; 
	display: block;
	width: 20px;
	height: 20px;
	position:absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
}
/*群青色ボタン（内部リンク・PCサイズでページの中央配置）*/
.linkBtn04{
	padding:1em;
	margin: 1em 0;
	background: #01436f;
	text-align:center;
	position:relative;
}
.linkBtn04inner a{
	display: block;
	width: 100%;
	color:#fff;}
.linkBtn04inner:after{
	content: "\f105";
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-weight: 900; 
	display: block;
	width: 20px;
	height: 20px;
	position:absolute;
	top: 50%;
	right: 25px;
	transform: translateY(-50%);
}

.spaceImage {
	width:100%;
}
.spaceImage img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.image3block {
	width:100%;
}
.image3block img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.mapBox{width: 100%;background: #dae7f0;
	padding: 5% 0; margin: 0 0 5%;
	display: flex; justify-content: center;}
.map01{width:100%; padding:0 5%;}

#footer-inner { 
background:#01436f;
border-top:10px #ccc solid;
}

#siteMap { 
	display: block;
	padding: 1% 0 5%;
	margin-top: 20px;
}
address.box2{
	display:flex;
	flex-direction:column-reverse;
	width:100%;
	padding:20px ;
	margin:0 0 20px;
}
.ad01{
	display:flex;
	flex-direction:column;
	width:100%;
	margin:10% 0 0;
}
.ad01-inner{
	padding-top:0%;
	margin:0 0 0;
}

/*ページ内ナビ*/
.pageNavi{background:#dae7f0;padding:5%; margin: 0 0 10%;}
.pageNaviinner{display: flex;flex-direction: column;justify-content: center;}
.pageNaviinner li{background:#f5f3f0; margin:0 1% 3%;text-align: center;}
.pageNaviinner li a{display:block; width:100%;padding:3%;}
.pageNaviinner li:nth-child(even){background:#dcd5d7;}
.pageNaviinner li:last-child{margin:0 1% 0;}
.pageNaviinner li:hover{background:#eeebe5;}
.pageNaviinner li.emptyBox{display: none;}
#faq-page .pageNavi{display: none;}

.tableBox,.tableBox02{
	width: 100%;
} 
.tableBox tr,.tableBox02 tr{
	width:100%;
}
.tableBox th.tableBox02 th{
	width:50%;
	background:#777;
	color:#fff;
}
.tableBox td,.tableBox02 td{
	width:50%;
}

.titleJapan{
	letter-spacing: -0.03em;
	position: relative;
	padding-left: 20px;
}
.titleJapan:before{
	content: "";
	position: absolute;
	left:0px;
	top:50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius:50%;
	background: #0169ae;
	display: inline-block;
}


#bg-gry {display:flex; flex-direction: column; justify-content: center;
	width:100%; background: #e2ded6; padding:0 0;margin: 40% 0 0; position:relative;
z-index: 0;}
.CircleGry{
	position:absolute;
	top:-5%;
	left:5%;
	width: 250px;
	height:250px;
	background: #e2ded6;
	border-radius:50%;
	z-index:-1;
}
.CircleGryTop{
	position:absolute;
	top:-2%;
	left:5%;
	width: 250px;
	height:250px;
	background: #e2ded6;
	border-radius:50%;
	z-index:-1;
}
/*ページ下の概要*/
.detailBox {
	margin: 0;
	color: #000;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.6;
	text-size-adjust: none;
	-webkit-text-size-adjust: 100%;
	font-family: '游明朝','Yu Mincho','YuMincho','Shippori Mincho','Hiragino Mincho Pro', serif;
}
* {-webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
  }
.detailBox .D-inner {
	width: 100%;
	margin: 0 auto 0;
	background: #FFF;
}
 
.detailBox .D-inner .link {
	cursor: pointer;
	display: block;
	padding: 15px 15px 15px 42px;
	color: #4D4D4D;
 	font-size: 14px;
 	font-weight: 700;
 	border-bottom: 1px solid #CCC;
 	position: relative;
 	-webkit-transition: all 0.4s ease;
 	-o-transition: all 0.4s ease;
 	transition: all 0.4s ease;
}

.detailBox .D-inner li i {
	position: absolute;
	top: 16px;
	left: 12px;
	font-size: 18px;
	color: #595959;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.detailBox .D-inner li i.fa-chevron-down {
	right: 12px;
	left: auto;
	font-size: 16px;
}

.detailBox .D-inner li.open .link {
	color:#fff;
}

.detailBox .D-inner li.open i {
	color:#fff;
}
.detailBox .D-inner li.open i.fa-chevron-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.detailBox .D-inner li.default .submenu { display: block; }

.detailBox .submenu {
	display: none;
	background: #777; 
	background-image: linear-gradient(45deg, rgba(90,90,90,0.25) 25%, transparent 25%, transparent 75%, rgba(90,90,90,0.25) 75%, rgba(90,90,90,0.25)), linear-gradient(-45deg, rgba(90,90,90,0.25) 25%, transparent 25%, transparent 75%, rgba(90,90,90,0.25) 75%, rgba(100,100,100,0.25));
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
	font-size: 14px;
}

.detailBox .submenu li {
	border-bottom: 1px solid #4b4a5e;
}

.detailBox .submenu a {
	display: block;
	text-decoration: none;
	color: #fff;
	padding: 12px;
	padding-left: 42px;
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.detailBox .submenu a:hover {
	background: #94bbd4;/*ホバー時背景色*/
	color: #FFF;
}
 
.detailBox .submenu li i {
	display: none;
}
.detailInner { width: 100%; margin: 0 auto 0; padding: 8% 0 0;
}
.detailInner dt { margin: 0 0 0;}
.detailInnerList  { margin: 20px 0 0;}
.detailInnerList .list { display:flex; flex-direction: column;}
.detailInner h2 , .detailInner h3 , .detailInner h4 { font-family: 'Shippori Mincho', serif;}
.detailInner h2 { font-size: 130%; display: inline;}
.detailInner h3 { font-size: 120%; margin: 3% 0 0;}
.detailInner a { color:#FFF;}
.detailInner .accordion {
	background: none;
}
.detailInner .accordion .link {
	color: #fff;
	border-bottom: 1px solid #999;
	padding: 15px 15px 15px 10px;
} 
.detailInner .accordion li i {
	color: #fff;
}
/*アクセスページダイナミックパッケージ*/
.dp-bnrArea { display: flex; flex-wrap: wrap;  margin-left: 2%; }
.dp-bnrArea li {width: 48%; margin-right: 2%; margin-bottom: 30px;}

.footer-img{
	width:100%;
	padding:45px 0 0;
}
.footer-img img{
	width:100%;
}

/*ページトップへあがるボタン*/
.pagetop {
  height: 55px;
  width: 55px;
  position: fixed;
  right: 10px;
  bottom: 70px;
  background: #01436f;
  border: none;/*線なし*/
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  opacity: 0.6;
}
.pagetop__arrow {
  display: block;
  height: 15px;
  width: 15px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: translateY(20%) rotate(-45deg);
}

/*予約追従ボタン*/
.folliwing01 {
  height: 55px;
  width: 55px;
  position: fixed;
  right: 10px;
  bottom: 15px;
  background: #0c032b;
  border: none;/*線なし*/
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  opacity: 0.8;
}
.folliwing01Inner{
  display: block;
}
.folliwing01Inner a{
  color:#fff;
  font-size:16px;
  font-weight: 600;
}
/*スライドインする写真が複数枚の時
　スライダーで複数表示させる*/
.box-manyImgR{
	width:90%;
	/*height: 30vh;*/
	margin:0 0 0 10%;
	padding:0;
	visibility:hidden;
	}
.box-manyImgR img,.box-manyImgL img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.box-manyImgL{
	width:90%;
	/*height: 30vh;*/
	margin:0 10% 0 0;
	padding:0;
	visibility:hidden;
	}

/* プラン一覧ページ--------------------------------------------------------------------------------------------------------------------- */
#stayplan section h2 { margin: 10% 0 3% ; z-index: 2;}
#stayplan .planBox .imgBox{display:flex; width:100%;margin: 0 0 0 0; padding: 0 2% 0 0; flex-direction: column;justify-content: center;align-items: flex-start;}
#stayplan .planBox .imgBox img { width: 100%; }
#stayplan .planBox ul.planInner{ width: 100%; display: flex; flex-direction: column; align-items: stretch;}
#stayplan .planBox ul.planInner li{ width: 100%; height: auto!important; display: flex; flex-direction: row; align-items:flex-start; background:#fff; color:#333; overflow: hidden; margin: 0 0 5%; }
#stayplan .planBox ul.planInner li a.planPhoto{display: block; width:34%; margin-right: 3%;}
#stayplan .planBox ul.planInner a.planWord {display: block; width: 61%;}
#stayplan .planBox ul.planInner .planTitle { display: flex; justify-content: start; width:100%; margin: 0 0 0; padding: 3%; margin-bottom: 0%; color:#333; font-weight: 700;}
#stayplan .planLead{margin: 0 0 3% ; }

/*最初のいちおしプラン3つ */
#stayplan .planBox ul.recommendP{ width: 100%; display: flex; flex-direction: column; align-items: stretch;}
#stayplan .planBox ul.recommendP li{ width: 100%; height: auto!important; display: flex; flex-direction: row; align-items:flex-start; background:#fff;color:#333; overflow: hidden; margin: 0 0 5%;}
#stayplan .planBox ul.recommendP li a.planPhoto{width:34%; margin-right: 3%;}
#stayplan .planBox ul.recommendP .imgBox {display:flex; width:100%;margin: 0 0 0 0; padding: 0 0 0 0; flex-direction: column;justify-content: center;align-items: flex-start;}
#stayplan .planBox ul.recommendP .imgBox img { width: 100%; }
#stayplan .planBox ul.recommendP a.planWord {display: block; width: 61%;}
#stayplan .planBox ul.recommendP .planTitle{  display:block; width:100%; padding: 3% 0; color:#333; }
.osusume { font-size: 115%; font-weight: 700; line-height: 1.4;}
.food-type01,.food-type02,.food-type03,.food-type04,.food-type05{width:100%;background: #0C032B; padding: 1% ;text-align: center;color: #fff;}/*2食付き　紺*/
.food-type02{background: #0169AE;}/*朝食付き　青*/
.food-type03{background: #099dc8;}/*素泊り　水色*/
.food-type04{background: #fd8740;}/*予備の色 オレンジ色*/
.food-type05{background: #c5e6fb; color:#0C032B;}/*予備の色　背景水色紺文字*/

/*★★★★★★★768からはここから*/
@media (min-width: 768px) {

body {
	font-size:1.05em;
	letter-spacing: 0.05em;
}
.pc-view { display: block !important;}
.pc-view-inline { display: inline-block !important;}
.sp-view { display: none !important;}
.sp-view-inline { display: none !important;}
.header-inner {
	max-width: 1200px;
	margin: 0 auto ;
	display: flex;
	justify-content: space-between;
  	align-items: center;
	padding: 0 20px;
	position: relative;
}
#header-logo { 
	width:100%; 
	margin-top: 5px;
	}
#header-logo img {max-width: 300px;	}

.header-HMI-logo { max-width: 1200px; margin: 0 auto; padding: 2px 20px 0 ; }
.header-HMI-logo a::before{margin-bottom: 0;}

#hamburgermenu	{position: relative;
	display: flex; 
	z-index: 1000;
	background: transparent;
	top: 0px;
	}
	
article #mainImage { 
	height: 50vh; position: relative; overflow: hidden; }
article #mainImage img { 
	width: 100%; height:50vh; object-fit: cover; object-position: 50% 50%; max-width: 1200px; }

h1 { margin: 10% 0 3%; font-size: 160%;letter-spacing: 0.1em;}
#h1-text { font-size: 125%; margin: -2% 0% 2% 0%;}
/*トップページのみ　ヘッダー内ロゴがh1*/
#top-page h1{ 
	width:100%; 
	margin: 5px 0 0;
	}
#top-page h1 img{max-width: 300px;	}
.h1-short{font-size: 100%; letter-spacing:0em;}
h2 { font-size: 150%; line-height: 150%;}
h3 { font-size: 140%; line-height: 140%;}

.h2-title{
margin: 5% 10% 1%; font-size: 140%;letter-spacing: 0.1em;
padding-left: 15px; color:#0c032b;
position: relative;
	}
.h2-title:before{
	content: "";
	display:block;
    position: absolute;
	top:0;
	left: 0;
	border-left:5px solid #92817a ;
	height: 100%;
	}
.h2-title:after{
	content: "";
	display:block;
    position: absolute;
	bottom:0;
	left: 15px;
	border-bottom:1px solid #0c032b ;
	width:100%;
	}

.h3-title{
	margin:0 0 1%;
	}

#onePoint-back img {
	width: 7%;
    top: -20px;
    left: -20px;
}

#hmiLogo { width: 70%; margin-bottom: 0%;}
#footer-inner { width: 100%;}
#footer-box { margin: 0 auto 0;padding: 0 5%;}
#footerLogo { width: 90%;}
address dl dt { font-size: 110%; color: #0c032b;}
address dl dd#add { font-size: 110%;}
address dl dd#tel i{font-size:70%;}

/*フッターナビ　サイトマップ*/
#footer-inner #siteMap ul.pc-ul li.pc-li a {
	color:#fff;
	text-decoration:none;
	position: relative;
	display: inline-block;
	transition: .3s;
	}
	
#footer-inner #siteMap ul.pc-ul li.pc-li a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 1px;
  background-color: #fff;
  transition: .3s;
  transform: translateX(-50%);
}

#footer-inner #siteMap { display:flex; flex-direction: column; width: 100%; margin: 0% 0 0%; padding:0 0 0;}
#footer-inner #siteMap ul.pc-ul li.pc-li { border: none; padding: 2% 2%; }
#footer-inner #siteMap ul.pc-ul li.pc-li:hover { background-color:rgba(250, 250, 250, 0);}
#footer-inner #siteMap ul.pc-ul li.pc-li a:hover::after{ width: 100%;}
#footer-inner .list-inner { padding-left: 15px !important;}
#footerNabi{
	width: 100%; display: flex; flex-direction: row; flex-wrap:wrap;
	justify-content: center; 
	}
#siteMap #footerNabi li i{padding: 0 10px 0 0; color:#fff; }


.sp-view .fa, .sp-view .fab, .sp-view .fal, .sp-view .far, .sp-view .fas { display:none !important; line-height: 0 !important;}

section.sec01{
	position:relative;
	width:100%;
	margin:0 0 5%;
	padding:0;
	max-width:none;
}
section.sec02 { 
	height:auto; 
	margin: 0% 0% 5%; 
	padding: 0 10%; 
}
.area01,.area02{
	position:relative;
	top:0;
	list-style:none;
	width:100%;
	margin:0 0 100px;
	display:flex;
	flex-direction:row;
}
.areaRoom{
	position:relative;
	list-style:none;
	width:100%;
	margin:0 0 100px;
	display:flex;
	flex-direction:column;
}
.areaRoom-inner{
	position:relative;
	width:100%;
	margin: 0 0;
	display: flex;
	flex-direction: column;
	}
.area04-inner{
	position:relative;
	width:100%;
	margin: 0 0;
	display:flex;
	flex-direction:row;
	justify-content: center;
	}
.area05{position:relative;
	list-style:none;
	width:100%;
	margin:0 0 1%;
	display:flex;
	flex-direction:column;
	}

.area-S{
	position:relative;
	list-style:none;
	margin:4% 10% 2%;
	padding-bottom: 2%;
	display:flex;
	flex-direction:column;
	}
.borderB{display: block;border-bottom: 1px dotted #0169ae; }

.longTitle{	width:90%;
	margin: 0 5%;}

.boxText03{
	width: 45%;
	display:flex;
	flex-direction:column;
	padding: 0px 5% 0px 10%;
}
.boxText04{
	width: 45%;
	display:flex;
	flex-direction:column;
	padding: 0px 10% 0px 5%;
}
.boxTextRoomR{
	align-items: flex-start;
	}
.boxTextRoomL{
	align-items:flex-end;
	}

.boxImgRoomR{
	width:90%;
	/*min-height: 500px;
	max-height: 675px;*/
	margin:0 0 0 10%;
	padding:0;
	visibility:hidden;
	}
.boxImgRoomL{
	width:90%;
	/*min-height: 500px;
	max-height: 675px;*/
	margin:0 10% 0 0;
	padding:0;
	visibility:hidden;
	}
.boxImgRoomR img,.boxImgRoomL img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
/*写真を左下からトリミングする場合*/
.fitbottomL{object-position: 0 100%;}
/*写真を右下からトリミングする場合*/
.fitbottomR{object-position: 100% 100%;}

.cont:before, .cont:after{
  content: "";
  clear: both;
  display: block;
}
.boxImg01,.boxImg02,.boxImg03{
	display:flex;
	width:55%;
	margin:0;
	padding:0;
	max-height: 500px;
}
.boxImg01 img,.boxImg02 img,.boxImg03 img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.boxText01{
	position:relative;
	display:flex;
	flex-direction:column;
	width:45%;
	margin: 0 auto;
}
.boxText01{
	padding: 0px 5% 0px 10%;
}
.boxText02{
	width:45%;
	padding: 0px 10% 0px 5%;
}
.boxText01 dl,.boxText02 dl{
	display:block;
	position:relative;
}
.boxLong01{margin: 1% 10%;}
.boxLong02{margin: 0 10%;}
.boxLong02-inner{
	display: flex;
	flex-direction: row;
	}
.boxLong03{
	display: flex;
	flex-direction: row;
	justify-content :center;
	margin:0 0;
	}
.boxLong04{
	display: block;
	width: 100%;
	margin:0 0;
	}
.boxLong04-inner,.boxLong04-innerR{
	width: 80%;
	margin: 0% 10%;
	display: flex;
	flex-direction: row;
	justify-content :center;
	}
.boxLong04Img{width: 50%;}
.boxLong04Img img{width: 100%; height: 100%; object-fit: cover;}
.boxLong04Txt01,.boxLong04Txt02{width: 50%;padding:5% ;display: flex;flex-direction: column; justify-content: center;}

.tableBox02{
	width: 42%;
	margin-right: 3%;
} 
.titleEnglish{
    display: block;
	position:relative;
	width:100%;
	color:#0c032b;
	font-size:3em;
	font-family: 'Inter', sans-serif;
	letter-spacing:-0.01em;
}

.titleEnglishTop02{
    display: block;
	position:relative;
	width:100%;
	color:#0c032b;
	font-size:3em;
	font-family: 'Inter', sans-serif;
	letter-spacing:-0.01em;
}
.bigTitle{
	position:relative;
	padding:0 60px 0;
	margin: 5% 0% 5%;
	font-size:2.4em ;
}
.bigTitle:before{
	display: none;
	}
.bigTitle.isActive:before{
	display: block;
	content: "";
	position: absolute;
	left:20px;
	bottom:-110px;
	width:200px;
	height:200px;
	border-radius:50%;
	border: 4px solid #01436f;
    animation:circledeco 3s alternate forwards;	
}

.CircleDecoT1{
	position: absolute;
	left:-10px;
	top:-35px;
	width: 250px;
	height:250px;
	z-index: 1;
}
.CircleDecoT1.isActive{
	border-radius:50%;
	border:4px solid #01436f;
    animation:circledeco 2s alternate forwards;
}
.CircleDecoT2{
	position: absolute;
	left:-10px;
	top:-20px;
	top:-35px;
	width: 250px;
	height:250px;
	z-index: 1;
}
.CircleDecoT2.isActive{
	border-radius:50%;
	border:4px solid #01436f;
    animation:circledeco 2s alternate forwards;
}
@keyframes circledeco{
  0%{
    transform: scale(1);    
	transform-origin:5% 20%;
  }

  100%{
    transform: scale(0.1);    
	transform-origin:5% 20%;
  }
}
.CircleDeco01{
display: none;
}
.CircleDeco01.isActive{
	display: block;
	position: absolute;
	left:-10px;
	top:-50px;
	width: 350px;
	height:350px;
	z-index: 1;
	border-radius:50%;
	border:4px solid #01436f;
    animation:circledeco 2s alternate forwards;
}
@keyframes circledeco{
  0%{
    transform: scale(1);    
	transform-origin:5% 20%;
  }

  100%{
    transform: scale(0.1);    
	transform-origin:5% 20%;
  }
}

.titleJa{
	color:#0c032b;
	line-height: 1;
	position: relative;
}
.titleJa h2{
	margin:0 0 30px;
	padding-left: 22px;
	line-height:1;
	font-size:140%;
	font-family: 'Shippori Mincho', serif;
	position: relative;
}


/*textBox01 トップページ内の説明文*/
.textBox01{margin-bottom:2%; }
/*textBox02 ご案内　背景白*/
.textBox02 dt{ margin-bottom: 2%; padding: 0 20px; }
.textBox02 dd.photo{display: inline-block; width:30%; margin: 0% 0% 0%;}
.textBox02 dd.text{display: inline-block; width:65%; margin-bottom: 8%; }
/*textBox03 ご案内　背景なし*/
.textBox03{margin:3% 0; width:100%; padding: 3% 0;}
/*.textBox03 dt{ margin-bottom: 2%; padding: 0 10px; }*/
	
/*textLine01 一行文章*/
.textLine01{margin-bottom:1%;}
	
/*詳細を見るホバーで青線のびる（スマホサイズ群青色ボタン）*/
.linkBtn01,.linkBtn01Long{
	background:none;
	display:flex;
	flex-direction:row;
	justify-content: flex-end;
	width:100%;
}
.linkBtn01Long{padding-right: 0em;}
.linkBtn01inner,.linkBtn01Long_inner{
	display:block;
	position: relative;
	padding:0 0 0 0;
	border-bottom:2px solid #ccc ;
	background-color: transparent;
	width:60%;
	color:#01436f;
	text-align:center;
}
.linkBtn01Long_inner{width:30%;}
.linkBtn01inner a,.linkBtn01Long_inner a{color:#01436f; }
.linkBtn01inner:after,
.linkBtn01Long_inner:after{
  content: '';
  display:block;
  position: absolute;
  padding-bottom:0.2px;
  bottom:0;
  left:0;
  top:100%;/*768以下で50％指定したのでここは100％*/
  width: 100%;
  height: 2px;
  background: #0169ae;
  transition: all 0.5s;
  transform: scale(0,0);
  transform-origin: left;
}
.linkBtn01inner:hover::after, 
.linkBtn01Long_inner:hover::after{
  transform: scale(1,1);
}
.linkBtn01inner:before,
.linkBtn01Long_inner:before{
	display:none;
}
/*詳細を見るホバーで青線のびる
（PCサイズでページの中央配置/スマホで青色ボタン・予約システムリンク）*/
.linkBtn03{
	background:none;
	display:flex;
	flex-direction:row;
	justify-content: center;
	width:100%;
}
.linkBtn03inner{
	display:block;
	position: relative;
	padding:0 0 0 0;
	border-bottom:2px solid #ccc ;
	background-color: transparent;
	width:30%;
	color:#01436f;
	text-align:center;
}
.linkBtn03inner a{color:#01436f; }
.linkBtn03inner:after {
  content: '';
  display:block;
  position: absolute;
  padding-bottom:0.2px;
  bottom:0;
  left:0;
  top:100%;/*768以下で50％指定したのでここは100％*/
  width: 100%;
  height: 2px;
  background: #0169ae;
  transition: all 0.5s;
  transform: scale(0,0);
  transform-origin: left;

}
.linkBtn03inner:hover::after {
  transform: scale(1,1);
}
.linkBtn03inner:before{
	display:none;
}
/*詳細を見るホバーで青線のびる
（PCサイズでページの中央配置/スマホで群青色ボタン・内部リンク）*/
.linkBtn04{
	background:none;
	display:flex;
	flex-direction:row;
	justify-content: center;
	width:100%;
}
.linkBtn04inner{
	display:block;
	position: relative;
	padding:0 0 0 0;
	border-bottom:2px solid #ccc ;
	background-color: transparent;
	width:30%;
	color:#01436f;
	text-align:center;
}
.linkBtn04inner a{color:#01436f; }
.linkBtn04inner:after {
  content: '';
  display:block;
  position: absolute;
  padding-bottom:0.2px;
  bottom:0;
  left:0;
  top:100%;/*768以下で50％指定したのでここは100％*/
  width: 100%;
  height: 2px;
  background: #0169ae;
  transition: all 0.5s;
  transform: scale(0,0);
  transform-origin: left;

}
.linkBtn04inner:hover::after {
  transform: scale(1,1);
}
.linkBtn04inner:before{
	display:none;
}
.spaceImage {
	width:100%;
	margin-bottom: 2%;
}
.spaceImage img{
	width:100%;
	height: 100%;
	object-fit: cover;
}
.image3block{
	width:100%;
	margin-bottom: 2%;
	padding: 0 0 3%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.image3block li{
	width: 33%;
	}
/*アクセスページダイナミックパッケージ*/
.dp-bnrArea li {width: 31%;}
.dp-bnrArea { margin-left: 1%;}
.dp-bnrArea li {width: 31%; margin-right: 1%;}
	
/*ページ内ナビ*/
.pageNavi{background:#dae7f0;padding:2% 10%; margin: 0 0 5%;}
.pageNaviinner{display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;}
.pageNaviinner li{width:28%;background:#f5f3f0; margin:2% 0% 2% 0;text-align: center;}
.pageNaviinner li a{display:block; width:100%;padding:3%;}
.pageNaviinner li:last-child{margin:2% 0 2% 0;}
.pageNaviinner li.emptyBox{display: block; visibility: hidden;}
#faq-page .pageNavi{display: block;}
	
/*ページ下の背景色のところ*/
#bg-gry {display:flex; flex-direction: column; justify-content: center;
	width:100%; background: #e2ded6; padding:0 0;margin: 10% 0 0; position:relative;
	z-index: 0;
}
.CircleGry,.CircleGryTop{
	position:absolute;top:-65px;left:5%;width: 250px;height:250px;
	background: #e2ded6;border-radius:50%;z-index:-1;
}
.textLeft{text-align: left;}
.textRight{text-align: right; padding-right: 10%;}
.textCenter{text-align: center;}
.map01{width:100%; padding:0 10%;}	
/*===footer==================*/
address.box2{
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	width:100%;
	padding:5% 0px ;
	margin: 0 0 0;
	border-bottom:1px solid #fff;
}
	address.box_lan{	
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	width:100%;
	padding:20px ;
	border-bottom:1px solid #fff;
	}
.ad01{
	display:flex;
	flex-direction:column;
	width:50%;
	margin-top:0;
}
.ad02{
	display:flex;
	flex-direction:column;
	width:50%;
	padding-top:0;
}

.footer-img{
	width:100%;
	padding:0 0 0 0;
}
.footer-img img{
	width:100%;
}
#Copyright{ color:#fff; font-size: 90%; text-align:center; background:#0C032B;}
	
/*スライドインする写真が複数枚の時
　スライダーで複数表示させる*/
.box-manyImgR{
	width:90%;
	/*min-height: 500px;
	max-height: 675px;*/
	margin:0 0 0 10%;
	padding:0;
	visibility:hidden;
	}
.box-manyImgL{
	width:90%;
	/*min-height: 500px;
	max-height: 675px;*/
	margin:0 10% 0 0;
	padding:0;
	visibility:hidden;
	}
.box-manyImgR img,.box-manyImgL img{
	width:100%;
	height: 100%;
	object-fit: cover;
}

/* プラン一覧ページ-------------------------------------------------------------------------------------------------- */
/* #planBox .planTitle { height: 120px; padding: 5%;} 
#planBox ul { width: 100%;}
*/
/*↓パールシティ追記*/
#stayplan .planBox{justify-content: center;}
#stayplan .planBox .imgBox{display:flex; width:100%;margin: 0 0 0 0;  padding: 0 0% 0 0;flex-direction: column;justify-content: center;align-items: center;}
/*↑パールシティ追記*/
#stayplan .planBox .imgBox img { width: 100%; height: 100%; object-fit: cover;}
#stayplan .planBox ul { width: 100%;}
/* プラン一覧ページ プラン数が少ない時　flex-startさせる */
#stayplan .planBox ul.planInner{ width: 100%; display: flex; flex-direction: row; align-items: stretch;justify-content: flex-start; flex-wrap: wrap;}
#stayplan .planBox ul.planInner li{ width: 24%; height: auto!important; display: flex; flex-direction: column; align-items:flex-start; background: #fff; color:#333; overflow: hidden; margin: 0 1% 5% 0; /*border-radius:10px; */}
#stayplan .planBox ul.planInner li a.planPhoto{ width:100%; margin-right: 0%;}
#stayplan .planBox ul.planInner a.planWord { width: 100%; }
#stayplan .planBox ul.planInner .planTitle { display: flex; justify-content: start;  margin: 0 0 0; color:#333; width:100%; padding: 5%; height: 120px;}

/*最初のいちおしプラン3つスマホでは写真と文章縦配置*/
#stayplan .planBox ul.recommendP{ flex-direction: row; justify-content: center;}
#stayplan .planBox ul.recommendP li{ width:32%; margin: 1% 1% 1%; flex-direction:column; /*border-radius:10px;*/}
#stayplan .planBox ul.recommendP li:first-child { width:32%; margin: 1% 1% 1% 0%; flex-direction:column;}
#stayplan .planBox ul.recommendP li:last-child { width:32%; margin: 1% 0% 1% 1%; flex-direction:column;}
#stayplan .planBox ul.recommendP li a.planPhoto{width:100%;margin-right: 0%;}
#stayplan .planBox ul.recommendP .imgBox {width:100%; height: auto; display: flex;justify-content: center;align-items: center;padding: 0 0 0 0;}
#stayplan .planBox ul.recommendP .imgBox img { width: 100%; height: 100%; object-fit: cover; }
#stayplan .planBox ul.recommendP a.planWord{width:100%;}
#stayplan .planBox ul.recommendP .planTitle {width:100%; padding: 3% 3%; text-align: center;}
.osusume { font-size: 120%; font-weight: 700; padding: 3%;}	
	
	
	
}
/*　★1000からはここから*/
@media (min-width: 1000px) {
#hamburgermenu { display: none;}
header nav#headerGnavi { display: block;}
.header-inner {
	justify-content: center;
	align-items: center;
}
#header-logo { 
	width:70%; 
	}
.pc-view1000 { display: block;}
#h1-back img{ left: -60px; top: 40px;}
#h2-back img{ left: -60px; top: -10px;}


}
/*★1150からはここから*/
@media (min-width: 1150px) {

.CircleGry,.CircleGryTop{
	position:absolute;top:-65px;left:7%;/*左から7％*/
}

}
/*　★1300からはここから*/
@media (min-width: 1300px) {
.CircleGry,.CircleGryTop{
	position:absolute;top:-65px;left:10%;/*左から10％*/
}

.boxImgRoomR{
	width:90%;
	min-height: 700px;
	max-height: 1000px;
	}
.boxImgRoomL{
	width:90%;
	min-height: 700px;
	max-height: 1000px;
	}
/*スライドインする写真が複数枚の時
　スライダーで複数表示させる*/
.box-manyImgR{
	width:90%;
	min-height: 700px;
	max-height: 1000px;
	}
.box-manyImgL{
	width:90%;
	min-height: 700px;
	max-height: 1000px;
	}


	

}
/*　★1600からはここから*/
@media (min-width: 1600px) {
.CircleGry,.CircleGryTop{
	position:absolute;top:-65px;left:18%;/*左から18％*/
}
/*プラン一覧-------------------------------------------------*/
#stayplan .planBox{max-width: 1600px;}
	

}