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

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

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

html { scroll-behavior: smooth;}

body {
	margin: 0;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans",sans-serif;
	font-weight: 400;
	font-size: 0.95em;
	line-height: 1.6;
	color:#333;
	width:100%;
	-webkit-text-size-adjust: 100%;
	
	background-image: linear-gradient(0deg, rgba(224, 250, 253, 1), rgba(239, 237, 253, 1) 30%, rgba(247, 234, 243, 1) 81%, rgba(255, 253, 239, 1));
}

/*----ページ内リンクのターゲットが固定ヘッダーに重なるのを対処----*/
:target::before {
  content: "";
  display: block;
  height: 70px; /* ずらしたい高さ */
  margin-top: -70px; /* heightに対するネガティブマージン */
  visibility: hidden,
}

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

/*----文字の装飾・マージン等----*/
.font-60 { font-size:60% !important;}
.font-70 { font-size:70% !important;}
.font-80 { font-size:80% !important;}
.font-90 { font-size:90% !important;}
.font-110 { font-size:110% !important;}
.font-120 { font-size:120% !important;}
.font-130 { font-size:130% !important;}
.font-140 { font-size:140% !important;}
.font-160 { font-size:160% !important;}
.font-180 { font-size:180% !important;}
.font-200 { font-size:200% !important;}
.bold {font-weight: bold;}

.whiteText { color: #fff;}
.redText { color: #C00;}
.blueText { color: #336699;}
.blueTextlink { color: #257a8a;}

.yellowBack { background-color: #fffde8;}
.blueBack { background-color: #edf7fc;}
.blueBack_m { background-color: #336699;}
.whiteBack { background-color: #fff;}
.whiteBack_bk { background-color: #fff; width:100%; padding: 1% 0 0 0;}
.rgbaBack { background: rgba(255, 255, 255, 0.6);}

.txtalnL { text-align: left;}
.txtalnR { text-align: right;}

.margintop-u3 { margin-top: -3% !important;}
.margintop-0 { margin-top: 0 !important;}
.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;}
.margintop-10 { margin-top: 10% !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;}
.marginbottom-10 { margin-bottom: 10% !important;}
.marginbottom-15 { margin-bottom: 15% !important;}

#short5m { margin: -5% auto 10% ;}
#short10m { margin: -10% auto 10% ;}

/*----ホバーエフェクト----*/
.bnr , .bnr-wrap {
	margin: 0;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
}
.bnr img , .bnr-wrap img {
	transform: scale(1);
	transition: .4s ease-in-out;
}
.bnr:hover img , .bnr-wrap:hover img {
	transform: scale(1.05);
}

/*---- java：fadeInUp fadeInDown アニメーション animation.js ----*/
.animation {
	-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: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
 0% {  opacity: 0; -webkit-transform: translateY(40px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 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); }
}
/*---- java： fadeInUp fadeInDown アニメーションここまで ----*/


/*----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 */

/* アコーディオン共通 */
.accordion-item {
	margin-bottom: 30px;
}
.accordion-check {
	display: none;
}
.accordion-label {
	position: relative;
	display: block;
	cursor: pointer;
	padding: 5px 35px 8px 8px;
	border-bottom: 1px solid #969696;
	line-height: 2;
}
.accordion-label::after {
	position: absolute;
	top: 50%;
	right: 0px;
	width: 40px;
	transform: translateY(-50%);
	color: #969696;
	text-align: center;
	font-size: 1.3em;
	content: '+';
	vertical-align: middle;
}
.accordion-check:checked~.accordion-box {
	height: auto;
	opacity: 1;
	padding: 1rem 0.5rem;
}
.accordion-check:checked+.accordion-label:after {
	content: '－';
}

.accordion-box {
	height: 0;
	overflow: hidden;
	overflow-y:auto;
	max-height: 500px;
	opacity: 0;
	transition: all .5s;
	color:#333;
}
.accordion-box p {
	line-height: 1.5;
}
.accordion-box a { color: #257a8a;}
.accordion-box a:hover { opacity: 0.8;}

/* 各ページ詳細 */
.infoBox_detail { padding: 0 0 3% 0;}
.infoBox_detail input[type=checkbox] { display: none;}
.infoBox_detail label { font-size: 1.2em;}
.infoBox_detail:last-child { margin: 0;}

.infoBox_detaillink { padding: 2% 0 1% 1%; width:100%; font-size: 1.3em;}
.infoBox_detailh2 {
	padding: 0 0 1% 1%;
	width:100%;
	border-bottom: dotted 1px #336699;
	color: #003366;
	font-size: 1.1em;
}
.detailtexth2 { padding: 2% 1%; font-size: 0.95em; width: 100%; line-height: 150%; color: #003366;}
.detaillist { padding: 0 1%; width: 100%;}
.detaillist dt::after{ content: ""}
.detaillist p { line-height: 1.7;}

.timetable li { border-top:#999 1px solid; margin-top: -1px; padding: 1.5%; }

/* アコーディオン内のテーブル共通 */
.list_table,
.list_table > dt,
.list_table > dd {
	box-sizing: border-box;
}

.list_table > dt,
.list_table > dd {
	padding: 0.5em;
	margin: 0px;
	text-align: left;
	border-bottom: dotted #ccc 1px;
}

.list_table {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2%;
}
.list_table > dt,
.list_table > dd {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.list_table > dt {
	width: 40%;
}
.list_table > dd {
	width: 60%;
}
.wid10 > dt  {
	width: 25%;
	padding: 0.5em;
}
.wid10 > dd  {
	width: 75%;
	padding: 0.5em;
}
.wid15 > dt  {
	width: 30%;
	padding: 0.5em;
}
.wid15 > dd  {
	width: 60%;
	padding: 0.5em;
}
	
.list_table dt {
	font-weight: normal;
}


@media (min-width: 768px) {
	.list_table > dt {
		width: 20%;
	}
	.list_table > dd {
		width: 80%;
	}
	.wid10 > dt  {
		width: 12%;
		padding: 0.5em;
	}
	.wid10 > dd  {
		width: 88%;
		padding: 0.5em;
	}
	.wid15 > dt  {
		width: 20%;
		padding: 0.5em;
	}
	.wid15 > dd  {
		width: 80%;
		padding: 0.5em;
	}
	.wid25 > dt  {
		width: 25%;
		padding: 0.5em;
	}
	.wid25 > dd  {
		width: 75%;
		padding: 0.5em;
	}
	.wid30 > dt  {
		width: 30%;
		padding: 0.5em;
	}
	.wid30 > dd  {
		width: 70%;
		padding: 0.5em;
	}
}


/*---------------------------------
	コンテンツ sp
---------------------------------*/
#mainContainer {
	scroll-snap-type: y mandatory;
	position: relative;
	width: 100%;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* HMIロゴ*/
#header-HMI-logoBox { 
	background-color: #6ec3d4;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.header-HMI-logo { padding: 1.5% 0 0.5% 2%; color: #fff; border-bottom: #9edae6 solid 1px;}
.header-HMI-logo a { color: #fff;}
.header-HMI-logo a:hover { color:#c1ebee;}

.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;
}

/* ヘッダ*/
header {
	postion: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 3;
}
.header-inner {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-image: linear-gradient(0deg, rgba(7, 52, 86, 1), rgba(51, 102, 153, 1) 30%, rgba(83, 176, 194, 1));
}
#header-logo { margin: 0 0 0 2%; width: 100%;}
#header-logo img { max-width: 290px; vertical-align: middle;}

/* グローバルナビ */
header nav#headerGnavi { width: 100%; display: none;}


/* メインコンテンツ*/
main { width:100%;}

/* スタイル */
article #mainImage {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 40vh;
	margin: 0 auto 0;
}
article #mainImage img { width: 100%; height:auto; min-width: 530px;}

#h1-back { position: relative; max-width: 1000px; margin: 0 auto;}
#h1-back img{ width: 30%; position:absolute; top: 20px; left: 10px; z-index: -1; aspect-ratio: 1 / 1;}
#h1box { margin: 0 auto 10%; font-family: 'Shippori Mincho', serif;}
#h1box h1 { margin: 15% 0 8%; font-size: 200%; letter-spacing: 0.1em;}
#h1box .h1-text { font-size: 140%; margin: 0 0 2% 0;}
#h1box .h1-textsmall { font-size: 110%; line-height: 160%;}

h1 { margin: 15% 0 8% ; font-size: 200%; letter-spacing: 0.1em;}
h2 { font-size: 160%; line-height: 150%; letter-spacing: 0.05em;}
h3 { font-size: 145%; line-height: 145%; letter-spacing: 0.05em;}

section h2 { margin: 2% 0 3%;}
section { width: 90%; height:auto; margin: 0 auto 15%;}
section:last-child { margin: 0 auto 10%;}


#nami {
	width: 100%;
	height: 50px;
	padding-top: 30%;
	background:url(../img/svg/nami.svg) center center no-repeat;
	background-size: cover;
}

#bg-blue { background-color: #edf7fc; margin-top: -2%; padding-bottom: 1%;}

/* フッタ */
footer { background: #edf7fc; position: relative;}
footer { margin-top: auto;}

#footer-top {
	background:url(../img/svg/footerBg.svg) center center no-repeat;
    background-size: cover;
    width: 100%;
    height: 80px;
}
#footer-inner{ background-image: linear-gradient(0deg, rgba(83, 176, 194, 1), rgba(51, 102, 153, 1));}
#footer-box { width: 90%; margin: 0 auto 0;}

address { display: flex; flex-direction: column;}
address .leftCont { width: 100%; margin: 0 0 3%;}
address .rightCont { width: 100%; margin: 0 0 10%;}
address .rightCont #footerImage {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	width: 100%;
}
address .rightCont #footerImage img {
	width: 100%;
	height: auto;
}
address dl { color:#fff; }
address dl dt#hmiLogo { width: 60%; margin-bottom: 2%;}
address dl dd#footerLogo { width: 100%; margin-bottom: 1.5%;}
address dl dd#eng { font-size: 95%; margin-bottom: 2.5%;}
address dl dd#add { font-size: 110%;line-height: 1.5em;}
address dl dd#tel { font-size: 160%; font-weight:bold; line-height: 1.5em;}
address dl dd#tel a { color:#fff;}

#sns-btn { float:left; display: flex; margin: 20px 0;}
#sns-btn li { width: 30px; margin-right: 10px;}
#sns-btn li img { width: 100%;}
#sns-btn:after { clear:both;}

#siteMap { display: none;}

/* コピーライト */
#Copyright { color:#e0e0e0;
	font-size: 90%;
	text-align: center;
	background-color: #073456;
	padding: 0.5% 2%;
}

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


/*---------------------------------
	ヘッダ（ハンバーガーメニュー）sp
---------------------------------*/
#hamburgermenu {
	position: relative;
	width: 70px;
	height: 70px;
	display: flex; 
	z-index: 1000;
	background: transparent;
}

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

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	position: absolute;
	top:12px;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
	mix-blend-mode: normal;/* 背景色にあわせて文字色変更 */
	/*background: #073456;*/
	width: 45px;
	height: 45px;
	border-radius: 5px;
	opacity: 0.6;
}

/* ハンバーガーメニューのアイコン */
.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: #333;/*　×の色*/
}

#hamburger:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
	background: #333;/*　×の色*/
}

/*宿泊予約とお問合せ*/
.hgBox01{ padding: 2%; width:100%;}
.hgBox01_inner{
	display: flex;flex-direction: row;
	justify-content: space-between;
}
.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: #257a8a;
}
.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: 0 0 5% 0;
}
.hgBox02_inner li.hgmenu {
	width: 90%;
	margin: 0 5% 0;
}

/*---------------------------------
	ハンバーガーメニュー sp（別ウインドウ）sp
---------------------------------*/
.drawer_list {
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 100%;
	left: 0%; /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: #edf7fc;
	transition: .5s;
	padding-top: 5px;
	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; 
	width: 75%;
	margin: 5% 10% 0 9%;
}

p.hgmtitle img {
	width: 100%;
}

.accordion_menu {
	margin: 0 auto;
}
.toggle {
	display: none;
}
.menubox {
	position: relative;
	margin-top: 0.3em;
}

.menu_title,
.menu_content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.menu_title {
	padding: 0.5em 1em 0.5em 2.5em;
	display: block;
	color: #333;
	font-size: 1.1em;
	border-bottom: solid 1px #83ccd2;
}
.menu_title::after,
.menu_title::before {
	content: "";
	position: absolute;
	left: 1em;
	top: 1.25em;
	width: 2px;
	height: 0.6em;
	top: 1.0em;
	background-color: #257a8a;
	transition: all 0.3s;
}
.menu_title::after {
	transform: rotate(90deg);
}
.menu_title02 {
	padding: 0.5em 1em 0.5em 2.5em;
	display: block;
	color: #333;
	font-size: 1.1em;
	border-bottom: 1px solid #83ccd2;
	position: relative;
}
/*.menu_title02::before {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 600; 
	display: inline-block;
	position: absolute;
	left: 1.0em;
	top: 0.5em;
	color: #83ccd2;
}*/
.menu_title02 a:hover{ color:#83ccd2;}

.menu_content {
	max-height: 0;
	overflow: hidden;
}
.menu_title{
	border-bottom: solid 1px #83ccd2;
}
.toggle:checked + .menu_title + .menu_content {
	display: block;
	max-height: 500px;
	transition: all 1.5s;
}
.toggle:checked + .menu_title::before {
	transform: rotate(90deg) !important;
}
.menu_content {
	margin-left: 20px;
	font-size: 0.9em;
	line-height: 1.5;
}
.menu_content p {
	display: block;
	position: relative;
	/*padding: 0.6em 1em 0.6em 2.5em;*/
	margin: 0;
	padding: 0.8em 0 0.8em 2.5em;
}

/*プルダウン下のくの字*/
.menu_content p ::before {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 600; 
	display: inline-block;
	position: absolute;
	left: 1.0em;
	top: 0.7em;
	color: #83ccd2;
}
.menu_content p a:hover{ color:#83ccd2;}

.menu_content p.dwline {
	border-bottom: solid 1px #83ccd2;
}

/*-- ヘッダ（ハンバーガーメニュー）sp ここまで --*/

/*----------------------
	トップへ戻るボタン sp animation.js内
----------------------*/
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 10px;
	bottom: 70px;
	/*right: 60px;
	bottom: 5px; チャットボットが付く場合は左にずれる */
	background: #999999;
	opacity: 0.6;
	border-radius: 50%;
	z-index: 3;
}
#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}
#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f106';
	font-size: 20px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 9px;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}


/* ------ 2026.06.29追加 スマホ固定予約ボタン ------------------------ */
/* 背景土台 */
.sp-reserve-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background-color: #fffcfa;
	background-image: linear-gradient(0deg, rgba(224, 250, 253, 1), rgba(239, 237, 253, 1) 30%, rgba(247, 234, 243, 1) 81%, rgba(255, 253, 239, 1));
	padding:10px 14px; /* ← 上下の白余白を作る */
	box-shadow:0 -4px 16px rgba(0,0,0,0.15);
}
/* 赤いボタン */
.sp-reserve-btn {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	height:38px;
	border-radius:19px;
	background:#06b6d4;
	color:#fff;
	font-weight:700;
	font-size:16px;
	text-decoration:none;
	box-shadow:none; /* ← 右の黒い影を消す */
}
.sp-reserve-btn span,
.side-reserve span {
	font-family: source-han-serif-japanese, 'Shippori Mincho', serif;
    font-weight: 600;
    font-style: normal;
}
/* アイコン */
.sp-reserve-btn i {
	font-size:20px;
}
/* 押した時 */
.sp-reserve-btn:active {
	transform: translateY(1px);
	filter:brightness(.95);
}


/*---------------------------------
	PC指定
---------------------------------*/
@media (min-width: 680px) {
	.pc-view680 { display: block;}
}

/* 追尾CTAとコピーライトが被って隠れてしまう現象修正 */
@media (max-width: 767px) {
  footer { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) {

/* 基本設定： ページ全体 */
body {
	font-size:1.05em;
	letter-spacing: 0.05em;
	font-weight: 500;
}

/*---------------------------------
	コンテンツ pc
---------------------------------*/
/* PC・スマホ */
.pc-view { display: block !important;}
.pc-view-inline { display: inline-block !important;}
.sp-view { display: none !important;}
.sp-view-inline { display: none !important;}

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

.marginbottom-1s { margin-bottom: 0% !important;}

/* HMIロゴ*/
.header-HMI-logo { max-width: 1200px; margin: 0 auto; padding: 0.5% 0 0 2%;}
.header-HMI-logo a::before{ margin-bottom: 0;}


/* ヘッダ*/
header {
	background-image: linear-gradient(0deg, rgba(7, 52, 86, 1), rgba(51, 102, 153, 1) 30%, rgba(83, 176, 194, 1));
}
.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 3% 0 2%;/* pc時のnavの右スクロールが出ないように3％ */
	display: flex;
}
#header-logo { margin: 0; width: 70%;}
#header-logo img { max-width: 350px; vertical-align: middle;}

/* グローバルナビ pcのみ */
.headerGnavi {
    position: relative;
    width: 100%;
	margin: 0 auto;
    height: 70px;
	display: flex;
	justify-content: space-between;
	color:#666;
	font-size: 0.95em;
	padding-top: 2px;
}
.headerGnavi > li {
	flex: auto;
    height: 100%;
    padding: 20px 0;
	text-align:center;
	font-weight:500;
}
.headerGnavi > li:hover {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
}
/*.headerGnavi > li.on a {
	font-weight: bold;
}*/
.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 #53b0c2;
	border-right: 2px solid #53b0c2;
	-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;
}
/* floatクリア */
.headerGnavi:before,
.headerGnavi:after {
    content: " ";
    display: table;
}
.headerGnavi:after {
    clear: both;
}
.headerGnavi {
    *zoom: 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: 130px;
    padding: 30px 1% 0 2%;
    -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;
}

/* スタイル */
article #mainImage {
	height: 50vh;
	margin: 0 auto 0;
	align-items: center;
}
section { margin: 0 auto 10%;}
section:last-child { margin: 0 auto 5%;}

#h1box { margin: 0 auto 5%; font-family: 'Shippori Mincho', serif;}
#h1box h1 { margin: 10% 0 3%  ; font-size: 200%;}

h1 { margin: 10% 0 5%; font-size: 200%;}
h3 { font-size: 160%; line-height: 160%;}

#short5m { margin: -5% auto 5% ;}
#short5ms { margin: -5% auto 0 ;}

/* フッタ */
#footer-top {
	background:url(../img/svg/footerBg.svg) center center no-repeat;
	background-size: cover;
	width: 100%;
	height: auto;
	padding-top: 15%; /*波が切れるので15％以下にしない*/
}
#footer-inner { width: 100%;}
#footer-box { max-width: 1000px; margin: 0 auto 0;}

address { display: flex; flex-direction: row; width: 100%; padding: 2% 0;}
address .leftCont { width: 55%; float:left;}
address .rightCont #footerImage { width: 45%; float: right;}
address .rightCont #footerImage img {width: 100%; height: auto;}

address dl dt#hmiLogo { width: 50%; margin-bottom: 3%;}
address dl dd#footerLogo { width: 90%; margin-bottom: 1.5%;}

/* サイトマップ　pcのみ */
#siteMap { 
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
	border-top: #b9e8ff 1px solid;
	border-bottom: #b9e8ff 1px solid;
	width: 100%;
	margin: 1% 0 3%;
	padding: 1% 1%;
}
#siteMap ul {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #fff;
}
#siteMap ul li a {
	color: #fff;
	text-decoration: none;
	font-weight: 300;
	position: relative;
	display: inline-block;
	transition: .3s;
	margin: 0 25px 0 6px;
}
#siteMap ul li a::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background-color: #fff;
	transition: .3s;
	transform: translateX(-50%);
}
#siteMap ul li a:hover::after{ width: 100%;}


/*---------------------------------
	ヘッダ（ハンバーガーメニュー）pc
---------------------------------*/
#hamburgermenu { 
	display: flex; 
	z-index: 1000;
	background: transparent;
}

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

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	mix-blend-mode: normal;/* 背景色にあわせて文字色変更 */
	/*background: #073456;*/
	width: 45px;
	height: 45px;
	border-radius: 5px;
	opacity: 0.6;
}

/* ハンバーガーメニューのアイコン */
.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: #333;/*　×の色*/
}

#hamburger:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
	background: #333;/*　×の色*/
}
.hgBox01{ width:100%;}
.hgBox01_inner{
	display: flex;flex-direction: row;
	justify-content: space-between;}

.hgBox01_inner{
	display: flex;flex-direction: row;
	justify-content: space-between;
}

.hg_reserve,.hg_inquiry{width: 49%;}
.hg_reserve a,.hg_inquiry a {
	display: block;text-align: center; 
	padding: 0.5em; color: #fff;
	background: #257a8a;
	}
.hg_inquiry a {
	background: #7e655a;
	}
.hg_reserve a:hover,.hg_inquiry a:hover{
	opacity: 0.5;
	}
	
.hgBox02_inner  {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	}
.hgBox02_inner li.hgmenu {
		width: 49%;
		margin: 1% 0.2% 1%;
	}

/*---------------------------------
	ハンバーガーメニュー pc（別ウインドウ）
---------------------------------*
.drawer_list {
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 100%;
	left: 0%; /* メニューを画面の外に飛ばす *
	z-index: 99;
	background: #edf7fc;
	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 {
	width: 50%;
	text-align: center; 
	margin: 0 auto 10px;
}

.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;
}

.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{
	background-color: #efe3c5;
}
.menu_content p.dwline {
	border-bottom: solid 1px #c09c3b;
	margin: 0;
	padding: 0.8em;
	font-size: 0.9em;
	line-height: 1.5;
}

.toggle:checked + label{
	border-bottom: solid 1px #c09c3b;
}

.menu_content p a{
	display: block;
	position: relative;
}
	
.menu_content p a::after{
	content:"";
	position: absolute;
	left: auto;
	top: 7px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #c3983a;
	border-right: 2px solid #c3983a;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
*/
/*-- ヘッダ（ハンバーガーメニュー）PC ここまで --*/

/*----------------------
	トップへ戻るボタン PC  animation.js内
----------------------*/
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 15px;
	bottom: 73px;
	background: #999999;
	opacity: 0.6;
	border-radius: 50%;
}
	
	/*2026.03.18追加 画面右追従タグ予約ボタン-----------------------------------------*/
	.side-reserve {
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		background: #06b6d4;
		color: #fff;
		text-decoration: none;
		width: 50px;
		padding: 50px 0;
		border-radius: 4px 0 0 4px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.28);
		/* 追加：中央配置 */
		display: flex;
		align-items: center;
		justify-content: center;
		/* ホバー時の動き */
		transition: box-shadow .25s ease, background .25s ease;
	}
	/* ホバー時のスライドする板 */
	.side-reserve::before {
		content:"";
		position:absolute;
		top:0;
		bottom:0;
		right:0;
		width:100%;
		background: #06b6d4;
		border-radius: 4px 0 0 4px;
		z-index:-1;
		/*transform: translateX(0);*/
		transition: transform .25s ease;
	}
	/* ホバー で左に広がる*/
	.side-reserve:hover::before {
		transform: translateX(-4px);/* 文字を1行にする時はこちら*/
		/*transform: translateX(-8px); 文字を2行にする時はこちら*/
	}
	.side-reserve:hover {
		background:#06b6d4;
		box-shadow: 0 10px 20px rgba(0,0,0,0.38);
		filter: brightness(1.08);
		color: #fff;
	}
	/* 縦書き本体 */
	.side-reserve span {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		font-size: 14px;
		line-height: 1.7;
		letter-spacing: 2px;
		font-weight: 700;
		text-align: center;
	}
	/* 文字少し強調 */
	.side-reserve .title {
		font-size: 1.12em;
		font-weight: 800;
		letter-spacing: 3px;
	}
	.side-reserve div {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	

} /*768px end*/


@media (min-width: 1000px) {
	#hamburgermenu { display: none;}
	header nav#headerGnavi { display: block;}
	.header-inner { justify-content: center; align-items: center;}
	.pc-view1000 { display: block;}
	section { max-width: 1000px;}
	/*#nami { padding-top: 20%;}*/
	#bg-blue{ margin: -15% auto 0; padding-bottom: 1%;}
	#h1-back img{ left: -60px; top: 40px;}
	
	/*グロナビの最後のメニューの下層部分の位置*/
	li.menu__single:last-child ul.menu__second-level {right:0;}
	li.menu__single:last-child i{font-size:120%;}
	
}/*1000px end*/