@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/*-----------------------------------------------------------------------------------------------

  共 通

-----------------------------------------------------------------------------------------------*/
body {
    font-family: "Noto Sans JP", "游ゴシック","ヒラギノ角ゴシック", sans-serif;
    font-size: 14px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    overflow-x: hidden;
    color: #404040;
    background: #ffffff;
}

/* Link */
a{
	text-decoration: none;
}


/* 見出し */
h1 {
    font-size: 22px;
}

.title-h2 {
    font-size: 1.6rem;	
	text-align: center;
	position: relative;
	letter-spacing: 0.3em;
	padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.title-h2 span {
    display: block;
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: normal;
	font-size: 0.5em;
	opacity: 0.5;	
	padding-top: 0.3rem;
}

.title-h3 {
	font-size: 1.4rem;	
	letter-spacing: 0.1em;	
    padding: 1.5rem 1rem;
}

.title-h3 span {
	display: block;
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: normal;
	font-size: 0.5em;		/*文字サイズ。見出しの50%*/
	opacity: 0.5;			/*透明度。色を50%だけ出す。*/
	padding-top: 0.3rem;
}

.title-h4 {
	font-weight: bold; 
	letter-spacing: 0.1em;
    padding: 1rem 1rem;
}

/* 本文 */
.text-large-center {
    font-size: 1.1em;
    text-align: center;
    margin-left: 2%;
    margin-right: 2%;
}

/* 装飾 */
.span_line {
    text-decoration: underline;
}
.span_red {
    color:#8b0000;
}
.span_redline {
    color:#8b0000;
    text-decoration: underline;
}
.span_bold {
    font-weight: bold;
}
.span_redbold {
    color:#8b0000;
    font-weight: bold;
}
.span_blue {
    color: #2864ac;
}
.span_bluebold {
    color: #2864ac;
    font-weight: bold;
}
.span_green {
    color: #849c40;
}
.span_greenbold {
    color: #849c40;
    font-weight: bold;
}

.span_boldline {
    font-weight: bold;
    text-decoration: underline;
}
.span_small {
    font-size: 0.8rem;
}
.span_small_center {
    font-size: 0.8rem;
    text-align: center;
}
.span_small_right {
    font-size: 0.8rem;
    text-align: right;
}
.span_redsmall {
    font-size: 0.8rem;
    color:#8b0000;
}
.span_en {
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: normal;
	font-size: 0.8em;		/*文字サイズ。見出しの50%*/
}
.span_en_bold {
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: bold;
	font-size: 0.8em;		/*文字サイズ。見出しの50%*/
}
.span_en_red {
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: normal;
	font-size: 0.8em;		/*文字サイズ。見出しの50%*/
    color:#8b0000;
}
.span_en_red_bold {
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: bold;
	font-size: 0.8em;		/*文字サイズ。見出しの50%*/
    color:#8b0000;
}
.span_en_blue {
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: normal;
	font-size: 0.8em;		/*文字サイズ。見出しの50%*/
    color: #2864ac;
}





/* ボーダー */
hr {
    margin: 3rem auto;
    border-top: 5px solid #eee;
    width: 5%;
    border-radius: 5%;
}

/* ボタン */
.btn-p1-right {
    margin-right: 8%;
    display: flex;
    justify-content: flex-end;
	letter-spacing: 0.1em;
	font-weight: bold;
	font-size: 0.85rem;
}
.btn-p1-right img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    padding-left: 2px;
}

.btn-p1-right-white {
    margin-right: 8%;
    display: flex;
    justify-content: flex-end;
	letter-spacing: 0.1em;
	font-weight: bold;
	font-size: 0.85rem;
}

.btn-p1-right-white img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    padding-left: 2px;
}

/* mask キーフレーム (画像用) */
@keyframes mask1 {  
0%, 100% {border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;}
50% {border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;}
}
@keyframes mask2 {  
0%, 100% {border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;}
50% {border-radius: 41% 59% 38% 62% / 62% 41% 59% 38%;}
}
@keyframes mask3 {  
0%, 100% {border-radius: 56% 44% 47% 53% / 55% 37% 63% 45%;}
50% {border-radius: 45% 55% 40% 60% / 44% 63% 37% 56%;}
}
/*mask1*/
.mask1 {
	animation: mask1 12s linear infinite;
}
/*mask2*/
.mask2 {
	animation: mask2 8s linear infinite;
}
/*mask3*/
.mask3 {
	animation: mask3 10s linear infinite;
}



/*-----------------------------------------------------------------------------------------------

  ヘ ッ ダ ー

-----------------------------------------------------------------------------------------------*/

/* カバーイメージ（大）*/
.header_cover img {
    position: relative;
    top: 0;
    width:100%;
    height:auto;
    z-index: 1;
}

/* カバーイメージ（小-パターン1）*/
.header_cover_small-1 img {
    position: relative;
    top: 0;
    width:100%;
    height: 250px;
    object-fit: cover;
    object-position: 50% 55%;
    z-index: 1;
}

/* カバーイメージ（小-パターン2）*/
.header_cover_small-2 img {
    position: relative;
    top: 0;
    width:100%;
    height: 250px;
    object-fit: cover;
    object-position: 50% 72%;
    z-index: 1;
}


/* カバーロゴ（トップ） */
.header_logo img {
    position: absolute;
    top: 45vh;
    left: 40vw; 
    margin: auto;
    z-index: 2;
}

/* カバーロゴ（温泉ページ） */
.header_logo_hotspring img {
    position: absolute;
    top: 25vh;
    left: 40vw;
    margin: auto;
    z-index: 2;
}

/* カバーテキスト */
.header_intro {
    font-size: 1.05rem;
    line-height: 2rem;
    text-align: center;
    margin: 1rem 4%;
}



/*-----------------------------------------------------------------------------------------------

  セ ク シ ョ ン 個 別

-----------------------------------------------------------------------------------------------*/

/*-----------------------------------------------
  1-1 ( Index - News )  ** お知らせ **
-----------------------------------------------*/
/* A区画 サムネイルあり */
.sec1-1-news-list-A {
    margin: 1rem 8%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
    font-size: 1.1em;
}
.sec1-1-news-A {
    display: grid;
	grid-template-columns: 200px 1fr;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}
.sec1-1-news-A img {
    width: 100%;
    height: auto;
}
.sec1-1-news-A h4 {
    padding: 0.3rem 0;
}
.sec1-1-news-A p {
    font-size: 0.85rem;
	line-height: 1.5;
}

/* B区画 サムネイルなし */
.sec1-1-news-list-B {
    margin: 2rem 8%;
    display: grid;
    grid-template-columns: auto 1fr;
    font-size: 1.1em;
}
.sec1-1-news-list-B dd {
    padding-bottom: 1.5rem;
}
.sec1-1-news-list-B dt {
    margin-right: 2rem;
}


/*-----------------------------------------------
  1-2 ( Index - Contents ) ** コンテンツリンク **
-----------------------------------------------*/
.sec1-2-ConList-list.image1 {
    background: url("../image/spa_main_overall_d2.webp") no-repeat center center / cover;
}
.sec1-2-ConList-list.image2 {
    background: url("../image/ondol-moegi_space_d1.webp") no-repeat 60% 82% / cover;
}
.sec1-2-ConList-list.image3 {
    background: url("../image/room_hon8t_d1.webp") no-repeat 50% 50% / cover;
}
.sec1-2-ConList-list.image4 {
    background: url("../image/restaurant_space_d2.webp") no-repeat 50% 40% / cover;
}
.sec1-2-ConList-list.image5 {
    background: url("../image/cafe_inside_d5.webp") no-repeat 50% 68% / cover;
}
.sec1-2-ConList-list.image6 {
    background: url("../image/road_aspite-line_d1.webp") no-repeat 30% 75% / cover;
}
.sec1-2-ConList-list.image7 {
    background: url("../image/facilities_shin-front_d1.webp") no-repeat 50% 75% / cover;
}

.sec1-2-ConList-list {
	position: relative;
	overflow-x: hidden;
	margin-bottom: 3vw;
	padding: 5vw;
}

.sec1-2-ConList-text {
    display: flex;
    justify-content: flex-start; 
    margin-left: 4%;
    margin-bottom: 2rem;
}
.sec1-2-ConList-text h3 {
    padding: 0 0;
    text-shadow: 2px 2px 7px #dddddd, -2px 2px 7px #dddddd ,2px -2px 7px #dddddd,-2px -2px 7px #dddddd ;
    letter-spacing: 0.4rem;
}
.sec1-2-ConList-text span {
    text-shadow: 2px 2px 5px #dddddd, -2px 2px 5px #dddddd ,2px -2px 5px #dddddd,-2px -2px 5px #dddddd ;
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
    font-size: 12px;
    font-weight: bold;
    opacity: 1;
}

.sec1-2-ConList-btn {
    display: flex;
    justify-content: flex-start; 
	letter-spacing: 0.1em;
	font-weight: bold;
	font-size: 0.85rem;
    color: #dddddd;
    margin-left: 4%;
}
.sec1-2-ConList-btn img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    padding-left: 2px;
}


/*-----------------------------------------------
  2-1 ( Hotspring - Main spa ) ** 大浴場 **
-----------------------------------------------*/

/* 大浴場＆小浴場 見出し (2-1,2-2共通) */
.sec2-1-head-wrap {
	display: flex;
    justify-content: space-between;
	flex-direction: row;
	align-items: center;
	margin-bottom: 3rem;
    margin-left: 2%;
    margin-right: 2%;
}
.sec2-1-head-image {
    width: 50%;
}
.sec2-1-head-image img {
    width: 100%;
}

.sec2-1-head-text {
    padding-left: 2%;
    padding-right: 2%;
	text-align: center;
    flex: 1;
}
.sec2-1-head-text h3 {
    font-size: 1.1rem;
    line-height: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}
.sec2-1-head-text p {
    font-size: 1.05rem;
    line-height: 2rem;
    margin-bottom: 0.8rem;
}
.sec2-1-head-text img {
    width: 50%;
}

/* 大浴場 七湯案内 */
.sec2-1-list-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 1rem 2%;
}

.sec2-1-list {
	display: grid;
    grid-template-rows: auto 1fr;
	text-align: center;
	margin-bottom: 1rem;
}
.sec2-1-list figure {
    margin-bottom: 0.5rem;
}
.sec2-1-list img {
	overflow: hidden;
    width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sec2-1-list-text p {
	font-size: 1.1em;
	line-height: 1.5;
}
.sec2-1-list-text img {
    width: 45%;
}


/*-----------------------------------------------
  2-2 ( Hotspring - Buna-no-yu ) ** 小浴場 **
-----------------------------------------------*/

/* ぶなの湯 不定形イメージブロック */
.sec2-2-list-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 1rem 2%;
}

.sec2-2-list-image-wrap {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    grid-template-rows: repeat(2, 2fr);
}

#sec2-2-list-image1 {
    grid-column: 1;
    grid-row: 1;
}
#sec2-2-list-image1 img {
    width: 100%;
}

#sec2-2-list-image2 {
    grid-column: 2;
    grid-row: 2;
}
#sec2-2-list-image2 img {
    width: 100%;
}


/* ぶなの湯 貸切案内 */
.sec2-2-list-table-text {
    text-align: center;
    margin-left: 2%;
    margin-right: 2%;
}
.sec2-2-list-table-text h3 {
    font-size: 1.2rem;
    padding: 1.5rem 1rem;
}
.sec2-2-list-table-text img {
    widht: 24px;
    height: 24px;
}
.sec2-2-list-table-text p {
    font-size: 1.01rem;
    line-height: 1.7rem;
}
.sec2-2-list-table-text span {
    font-weight: bold;
}

.sec2-2-list-table {
	table-layout: fixed;
	width: 85%;
    margin: 2rem auto;
	background: #fff;	
	color: #555;
}
.sec2-2-list-table th {
    padding: 0.5rem;
	border: 2px double #999;
    width: 20%;	
	text-align: left;
    vertical-align: middle;
	background: #eee;
    font-size: 1.1em;
}
.sec2-2-list-table td {
    padding: 0.5rem;
	border: 2px double #999;
    line-height: 1.5rem;
    font-size: 1.1em;
}


/*-----------------------------------------------
  2-3 ( Hotspring - Quality ) ** 泉質 **
-----------------------------------------------*/
.sec2-3-quality-table {
	table-layout: fixed;
	width: 80%;
    margin: 2.5rem auto;
	background: #fff;	
	color: #555;
}
.sec2-3-quality-table th {
    padding: 1rem;	
	border: 2px double #999;
    width: 20%;	
	text-align: left;
    vertical-align: middle;
	background: #eee;
}
.sec2-3-quality-table td {
    padding: 1rem;	
	border: 2px double #999;
    line-height: 1.3rem;
}


/*-----------------------------------------------
  3-1 ( Ondol - Moegi ) ** オンドルもえぎ **
-----------------------------------------------*/

/* オンドル 見出し */
.sec3-1-head-text {
    padding-left: 2%;
    padding-right: 2%;
	text-align: center;
}
.sec3-1-head-text p {
    font-size: 1.05rem;
    line-height: 2rem;
    margin-bottom: 0.8rem;
}
.sec3-1-head-text h3 {
    font-size: 1.2rem;
}

.sec3-1-head-image {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.5rem 2%;
}
.sec3-1-head-image img {
    width: 100%;
}

/* オンドル 利用イメージ */
.sec3-1-usecase-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin: 2rem 10%;
}
.sec3-1-usecase-image {
    width: 450px;
}
.sec3-1-usecase-image img {
    width: 100%;
}

.sec3-1-usecase-text {
    margin: 0rem 1.5rem;
    line-height: 1.8rem;
}
.sec3-1-usecase-text h4 {
    font-size: 15px;
    font-weight: bold;
}
.sec3-1-usecase-text p {
    font-size: 15px;
}
.sec3-1-usecase-text span {
    color: #8b0000;
}

/* オンドル 旅館宿泊者体験案内 */
.sec3-1-trial-text {
    margin: 1rem 10%;
    text-align: center;
    line-height: 1.8rem;
    font-size: 1.01rem;
}
.sec3-1-trial-text h3 {
    font-size: 1.4rem;
}
.sec3-1-trial-text img {
    width: 24px;
    height: 24px;
}

.sec3-1-trial-table {
	table-layout: fixed;
	width: 80%;
    margin: 2rem auto;
	background: #fff;	
	color: #555;
}
.sec3-1-trial-table caption {
    line-height: 2rem;
    caption-side: bottom;
}
.sec3-1-trial-table th {
    padding: 0.5rem;	
	border: 2px double #999;
    width: 20%;	
	text-align: left;
    vertical-align: middle;
	background: #eee;
}
.sec3-1-trial-table td {
    padding: 0.5rem;	
	border: 2px double #999;
    line-height: 1.5rem;
}


/*-----------------------------------------------
  4-1 ( Guestroom ) ** 客室 **
-----------------------------------------------*/
/* 客室 見出し（新館・本館共通） */
.sec4-1-head {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    width: 100%;
    padding: 0 2%;
}

.sec4-1-head-txt {
    grid-column: 1;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}
.sec4-1-head-txt p {
    font-size: 1.05rem;
    line-height: 2rem;
    margin-bottom: 0.8rem;
}

.sec4-1-head-img1 {
    grid-column: 2;
    /* height: auto; */
    position: relative;
    z-index: 1;
}
.sec4-1-head-img1 img {
    position: relative;
    width: 100%; 
    /* height: auto; */
    z-index: -1;
}
.sec4-1-head-shadow1 {
    width: 100%; 
    height: auto;
    box-shadow: inset 10px 10px 15px #fff, inset 10px -10px 15px #fff, inset -10px 10px 15px #fff, inset -10px -10px 15px #fff;
}

.sec4-1-head-img2 {
    grid-column: 3;
    /* height: auto; */
    position: relative;
    z-index: 2;
}
.sec4-1-head-img2 img {
    position: relative;
    width: 100%; 
    height: auto;
    z-index: -2;
}
.sec4-1-head-shadow2 {
    width: 100%; 
    height: auto;
    box-shadow: inset 10px 10px 15px #fff, inset 10px -10px 15px #fff, inset -10px 10px 15px #fff, inset -10px -10px 15px #fff;
}

/* 客室詳細(タイトル) */
.sec4-1-roominfo-text h3 {
    font-size: 1.2rem;
    letter-spacing: 0.4rem;
    line-height: 2rem;
    text-align: center;
    background-color: #eee;
    margin: 1rem 2%;
}
.sec4-1-roominfo-text p {
    font-size: 1.01rem;
    margin: 0.5rem 2%;
    text-align: center;
}

/* ↓ ----- 客室ギャラリー 表示設定 ------ ↓ */
.sec4-1-roominfo-image-wrap {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    width: 100%;
    padding: 1rem 2rem;
}
.sec4-1-roominfo-image-wrap figcaption {
    text-align: center;
    font-size: 0.7rem;
    background-color: #eee;
    letter-spacing: 0.1rem;
    line-height: 1.2rem;
}

.sec4-1-roominfo-gallery {
    display: grid;
    grid-template-columns: repeat(2, 2fr);
    grid-template-rows: repeat(2, 2fr);
    gap: 0.8rem;
}
#shin15-image1 { grid-row: 1; grid-column: 1; }
#shin15-image1 img { width: 100%; }
#shin15-image2 { grid-row: 1; grid-column: 2; }
#shin15-image2 img { width: 100%; }
#shin810-image1 { grid-row: 2; grid-column: 1; }
#shin810-image1 img { width: 100%; }
#shin810-image2 { grid-row: 2; grid-column: 2; }
#shin810-image2 img { width: 100%; }

#shin10t-image1 { grid-row: 1; grid-column: 1; }
#shin10t-image1 img { width: 100%; }
#shin10t-image2 { grid-row: 1; grid-column: 2; }
#shin10t-image2 img { width: 100%; }
#shin10t-image3 { grid-row: 2; grid-column: 1; }
#shin10t-image3 img { width: 100%; }

#hon8t-image1 { grid-row: 1; grid-column: 1; }
#hon8t-image1 img { width: 100%; }
#hon8t-image2 { grid-row: 1; grid-column: 2; }
#hon8t-image2 img { width: 100%; }
#hon8t-image3 { grid-row: 2; grid-column: 1; }
#hon8t-image3 img { width: 100%; }

#hon6a-image1 { grid-row: 1; grid-column: 1; }
#hon6a-image1 img { width: 100%; }
#hon7a-image1 { grid-row: 1; grid-column: 2; }
#hon7a-image1 img { width: 100%; }
#hon8a-image1 { grid-row: 2; grid-column: 1; }
#hon8a-image1 img { width: 100%; }
#hon12a-image1 { grid-row: 2; grid-column: 2; }
#hon12a-image1 img { width: 100%; }

#hon3t-image1 { grid-row: 1; grid-column: 1; }
#hon3t-image1 img { width: 100%; }
#hon3t-image2 { grid-row: 1; grid-column: 2; }
#hon3t-image2 img { width: 100%; }
#hon3t-image3 { grid-row: 2; grid-column: 1; }
#hon3t-image3 img { width: 100%; }
#hon3t-image4 { grid-row: 2; grid-column: 2; }
#hon3t-image4 img { width: 100%; }

#hon8b-image1 { grid-row: 1; grid-column: 1; }
#hon8b-image1 img { width: 100%; }
#hon8b-image2 { grid-row: 1; grid-column: 2; }
#hon8b-image2 img { width: 100%; }
#hon8b-image3 { grid-row: 2; grid-column: 1; }
#hon8b-image3 img { width: 100%; }

#honSb-image1 { grid-row: 1; grid-column: 1; }
#honSb-image1 img { width: 100%; }
#honSb-image2 { grid-row: 1; grid-column: 2; }
#honSb-image2 img { width: 100%; }
#honSb-image3 { grid-row: 2; grid-column: 1; }
#honSb-image3 img { width: 100%; }

/* 客室ギャラリー拡大用 */
.lightbox-overlay {
    visibility: hidden; /* 初期状態では非表示 */
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s; /* フェードイン・アウトのアニメーション */

    /* オーバーレイの基本スタイル */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 半透明の背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* :target擬似クラスで表示状態を切り替える */
.lightbox-overlay:target {
    visibility: visible;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.8); /* ポップアップ時の初期サイズ */
    transition: transform 0.3s ease-out;
}

.lightbox-overlay:target .lightbox-content {
    transform: scale(1); /* ポップアップ時に元のサイズに */
}

.lightbox-content img {
    display: block; 
    max-width: 100%;
    height: 90%;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 40px;
    text-decoration: none;
    line-height: 1;
    z-index: 1001; /* 画像より手前に表示 */
}
.lightbox-close:hover {
    color: #ccc;
}

/* オーバーレイクリックで閉じるための設定 (HTMLのa href="#_") */
.lightbox-overlay .lightbox-close-area { /* オーバーレイ全体をクリックで閉じるための要素を別途用意する場合 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

/* キャプション */
.lightbox-caption {
    text-align: center;
    margin-top: 10px;
    letter-spacing: 0.2rem;
    line-height: 1.2rem;
}
/* ↑ ----- 客室ギャラリー 表示設定 ----- ↑ */


/* 客室 詳細情報 アメニティ */
.sec4-1-roominfo-amenity {
    margin-left: 1rem;
    padding: 1rem 1rem;
    border: #eee double 5px;
    border-radius: 5px;
}
.sec4-1-roominfo-amenity h4 {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.sec4-1-roominfo-amenity p {
    font-size: 1.1em;
    line-height: 1.5rem;
    margin-bottom: 0.4rem;
}
.sec4-1-roominfo-amenity span {
    text-decoration: underline;
}
.sec4-1-roominfo-amenity img {
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
}


/*-----------------------------------------------
  5-1 ( Dining - Space ) ** 食事処りんどう **
-----------------------------------------------*/
/* 食事処 見出し */
.sec5-1-head-txt {
    font-size: 1.05rem;
    line-height: 2rem;
    margin: 1rem 2%;
    text-align: center;
}

/* 食事処ギャラリー */
.sec5-1-rindo-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    padding: 0 2%;
    gap: 0.2rem;
    margin-bottom: 2rem;
}
.sec5-1-rindo-gallery img {
    width: 100%;
}
#sec5-1-rindo-gallery-img1 { grid-row: 1/3; grid-column: 1/3;}
#sec5-1-rindo-gallery-img2 { grid-row: 1; grid-column: 3;}
#sec5-1-rindo-gallery-img3 { grid-row: 1; grid-column: 4;}
#sec5-1-rindo-gallery-img4 { grid-row: 2; grid-column: 3;}
#sec5-1-rindo-gallery-img5 { grid-row: 2; grid-column: 4;}

/* 席についてのお知らせ */
.sec5-1-rindo-notes-tab {
    margin: 1rem 2%;
    table-layout: fixed;
    width: 96%;
    background-color: #f5f5f5;
    border-spacing: 1px 1px;
}
.sec5-1-rindo-notes-tab th {
    padding: 0.5rem 0.5rem;	
    width: 35px;	
	text-align: center;
    vertical-align: top;
}
.sec5-1-rindo-notes-tab td {
    font-size: 15px;
    line-height: 1.5rem;
    padding: 0.3rem 0.3rem;	
	text-align: left;
    vertical-align: middle;
    width: auto;
}
.sec5-1-rindo-notes-tab img {
    width: 24px;
    height: 24px;
}
.sec5-1-rindo-notes-tab span {
    text-decoration: underline;
}
#sec5-1-rindo-notes-tab_notice {
    color:#8b0000;
}


/*-----------------------------------------------
  5-2 ( Dining - Dinner ) ** 夕食 **
-----------------------------------------------*/
/* 夕食／朝食共通 見出し */
.sec5-2-head-text {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec5-2-head-text h2 {
    margin-right: 1.5rem;
    /* width: 150px; */
}
.sec5-2-head-text p {
    font-size: 1.4rem;
    letter-spacing: 0.4rem;
    text-align: center;
}
.sec5-2-head-text img {
    width: 24px;
    height: 24px;
    margin-right: 0.8rem;
}

/* 夕食 ギャラリー */
.sec5-2-dinner-wrap {
    margin-left: 2%;
    margin-right: 2%;
    display: flex;
    flex-wrap: wrap;
}
.sec5-2-dinner-gallery {
    width: 47%;
    display: grid;
    grid-template-columns: (2, 1fr);
    grid-template-rows: (2, 1fr);
    gap: 0.2rem;
}
.sec5-2-dinner-gallery img {
    width: 100%;
}
#sec5-2-dinner-img1 { grid-row: 1; grid-column: 1/3; }
#sec5-2-dinner-img2 { grid-row: 2; grid-column: 1; }
#sec5-2-dinner-img3 { grid-row: 2; grid-column: 2; }

.sec5-2-dinner-text {
    margin-left: 2%;
    width: 47%;
}
.sec5-2-dinner-text h3{
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin-bottom: 2rem;
    letter-spacing: 0.1rem;
    text-align: center;
}
.sec5-2-dinner-text p{
    font-size: 1.1rem;
    line-height: 2rem;
    text-align: center;
    letter-spacing: 0.1rem;
}

/* 夕食 別注料理 */
.sec5-2-dinner-append-title h3 {
    padding: 0 0;
    margin-left: 2%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.sec5-2-dinner-append {
    display: grid;
    grid-template-columns: (4, 1fr);
    gap: 1rem;
    margin: 1rem 2%;
}
.sec5-2-dinner-append img {
    width: 100%;
}
.sec5-2-dinner-append h3 {
    padding: 0 0;
    margin-top: 1rem;
    margin-left: 2%;
    margin-bottom: 1rem;
}
.sec5-2-dinner-append h4 {
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.sec5-2-dinner-append p {
    margin-bottom: 1.5rem;
    line-height: 1.5rem;
}
#sec5-2-dinner-beef-img { grid-row:1; grid-column:1; }
#sec5-2-dinner-beef-txt { grid-row:1; grid-column:2; }
#sec5-2-dinner-kotsuzake-img { grid-row:1; grid-column: 3;}
#sec5-2-dinner-kotsuzake-txt { grid-row:1; grid-column: 4;}


/*-----------------------------------------------
  5-3 ( Dining - Breakfast ) ** 朝食 **
-----------------------------------------------*/
.sec5-3-breakfast-wrap {
    margin-left: 2%;
    margin-right: 2%;
    display: flex;
    flex-wrap: wrap;
}
.sec5-3-breakfast-gallery {
    width: 47%;
    display: grid;
    grid-template-columns: (2, 1fr);
    grid-template-rows: (2, 1fr);
    gap: 0.2rem;
}
.sec5-3-breakfast-gallery img {
    width: 100%;
}
#sec5-3-breakfast-img1 { grid-row: 1; grid-column: 1/3; }
#sec5-3-breakfast-img2 { grid-row: 2; grid-column: 1; }
#sec5-3-breakfast-img3 { grid-row: 2; grid-column: 2; }

.sec5-3-breakfast-text {
    margin-left: 2%;
    width: 47%;
}
.sec5-3-breakfast-text h3  {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    letter-spacing: 0.1rem;
    text-align: center;
}
.sec5-3-breakfast-text p {
    font-size: 1.1rem;
    line-height: 2rem;
    letter-spacing: 0.1rem;
    text-align: center;
}


/*-----------------------------------------------
  5-4 ( Dining - Allergy ) ** アレルギー等 **
-----------------------------------------------*/
.sec5-4-allergy-head h3 {
    font-size: 1.4rem;
    margin-left: 2%;
    margin-bottom: 2rem;
}

.sec5-4-allergy-tab {
    margin: 1rem 2%;
    table-layout: fixed;
    width: 96%;
    background-color: #f5f5f5;
    border-spacing: 1px 1px;
}
.sec5-4-allergy-tab th {
    padding: 0.5rem 0.5rem;	
    width: 35px;	
	text-align: center;
    vertical-align: top;
}
.sec5-4-allergy-tab td {
    font-size: 15px;
    line-height: 1.5rem;
    padding: 0.3rem 0.3rem;	
	text-align: left;
    vertical-align: middle;
    width: auto;
}
.sec5-4-allergy-tab img {
    width: 24px;
    height: 24px;
}
.sec5-4-allergy-tab h4 {
    font-weight: bold;
}
.sec5-4-allergy-tab caption {
    caption-side: bottom;
    font-size: 0.8rem;
    line-height: 1.2rem;
    margin-top: 0.7rem;
}

#sec5-4-notice-line {
    text-decoration: underline;
}
#sec5-4-notice-red {
    color:#8b0000;
}
#sec5-4-notice-bold {
    font-weight: bold;
}

/*-----------------------------------------------
  6-1 ( Cafe ) ** ごしょカフェ **
-----------------------------------------------*/
.sec6-1-cafe-gallery {
    display: grid;
    grid-template-columns: (4, 1fr);
    grid-template-rows: (3, 1fr);
    gap: 0.8rem;
    margin: 1rem 2%;
}
.sec6-1-cafe-gallery img {
    width: 100%;
}
#sec6-1-cafe-gallery-img1 { grid-row: 1; grid-column: 1; }
#sec6-1-cafe-gallery-img2 { grid-row: 2; grid-column: 1; }
#sec6-1-cafe-gallery-img3 { grid-row: 3; grid-column: 1; }
#sec6-1-cafe-gallery-img4 { grid-row: 1; grid-column: 2; }
#sec6-1-cafe-gallery-img5 { grid-row: 1; grid-column: 3; }
#sec6-1-cafe-gallery-img6 { grid-row: 2/4; grid-column: 2/4; }

.sec6-1-cafe-txt {
    font-size: 1.1rem;
    line-height: 1.7rem;
    margin: 1rem 2%;
    text-align: center;
}

#sec6-1-cafe-menu-tab-title {
    font-weight: bold;
    letter-spacing: 0.1rem;
    line-height: 2rem;
    text-align: center;
}
#sec6-1-cafe-menu-tab-title span {
    font-weight: normal;
    font-size: 0.7rem;
}

.sec6-1-cafe-menu-tab {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 2rem;
}
.sec6-1-cafe-menu-tab th {
    font-weight: normal;
    width: 130px;
	/* border: 1px solid #eee; */
	border: 4px double #eee;
    padding: 0.5rem 1rem;
	text-align: left;
    vertical-align: middle;
}
.sec6-1-cafe-menu-tab td {
	/* border: 1px solid #eee; */
	border: 4px double #eee;
    padding: 0.5rem 1rem;
    line-height: 1.1rem;
}


/* アフタヌーンドリンク */ 
.sec6-1-cafe-afternoon-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 4rem;
    margin-left: 2%;
    margin-right: 2%;
}

.sec6-1-cafe-afternoon-img img {
    width: 100%;
}

.sec6-1-cafe-afternoon-txt {
    margin: 1rem 7%;
    text-align: center;
}
.sec6-1-cafe-afternoon-txt h3 {
    font-size: 1.4rem;
}
.sec6-1-cafe-afternoon-txt p {
    font-size: 1.01rem;
    line-height: 1.8rem;
}
#sec6-1-cafe-afternoon-txt-small {
    font-size: 0.8rem;
    line-height: 1rem;
}

.sec6-1-cafe-afternoon-txt img {
    width: 24px;
    height: 24px;
}


/*-----------------------------------------------
  6-2 ( Shop ) ** 売店 **
-----------------------------------------------*/
.sec6-2-shop-gallery {
    display: grid;
    grid-template-columns: (3, 1fr);
    grid-template-rows: (3, 1fr);
    gap: 0.8rem;
    margin: 1rem 2%;
}
.sec6-2-shop-gallery img {
    width: 100%;
}
#sec6-2-shop-gallery-img1 { grid-row: 1/3; grid-column: 1/3; }
#sec6-2-shop-gallery-img2 { grid-row: 3; grid-column: 1; }
#sec6-2-shop-gallery-img3 { grid-row: 3; grid-column: 2; }
#sec6-2-shop-gallery-img4 { grid-row: 1; grid-column: 3; }
#sec6-2-shop-gallery-img5 { grid-row: 2; grid-column: 3; }
#sec6-2-shop-gallery-img6 { grid-row: 3; grid-column: 3; }

.sec6-2-shop-txt {
    font-size: 1.1rem;
    line-height: 1.7rem;
    margin: 1rem 2%;
    text-align: center;
}

#sec6-2-shop-tab-title {
    font-weight: bold;
    letter-spacing: 0.1rem;
    line-height: 2rem;
    text-align: center;
}
.sec6-2-shop-tab {
    display: flex;
    justify-content: center;
    margin: 0.2rem 2%;
}
.sec6-2-shop-tab td {
    min-width: 170px;
	/* border: 1px double #eee; */
	border: 4px double #eee;
    padding: 0.5rem 1rem;
    line-height: 1.1rem;
}

.sec6-2-eshop {
    margin: 1rem 2%;
    text-align: center;
}


/*-----------------------------------------------
  7-1 ( Access ) ** 交通 - 地図 **
-----------------------------------------------*/
.sec7-1-access-map {
    display: flex;
    justify-content: center;
    margin: 1rem 2%;
}

.sec7-1-access-detail-wrap p {
    font-size: 1.1em;
    line-height: 1.5rem;
}
.sec7-1-access-detail-wrap ul {
    list-style-type: disc;
    margin-left: 2%;
}


/* グリーンシーズン 見出し */
.sec7-1-access-green-title {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec7-1-access-green-title h3 {
    font-size: 1.3rem;
    font-weight: bold;
    color: #a4b814;
    padding: 0 0;
    margin-right: 0.3rem;
}
.sec7-1-access-green-title span {
    text-align: center;
}
.sec7-1-access-green-title p {
    font-size: 1.0rem;
    color: #a4b814;
    text-align: center;
}
.sec7-1-access-green-title img {
    width: 32px;
    height: 32px;
    margin-right: 0.8rem;
}

/* グリーンシーズン アコーディオン */
/*ベース*/
.toggle {
	display: none;
}
.Label {		/*タイトル*/
    margin-left: 2%;
    margin-right: 2%;
	padding: 1em;
	display: block;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
	color: #fff;
    background: #a4b814;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 7px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
    margin-left: 2%;
    margin-right: 2%;
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}


/* ホワイトシーズン 見出し */
.sec7-1-access-white-title {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec7-1-access-white-title h3 {
    font-size: 1.3rem;
    font-weight: bold;
	color: #9c9c9c;
    padding: 0 0;
    margin-right: 0.3rem;
}
.sec7-1-access-white-title span {
    text-align: center;
}
.sec7-1-access-white-title p {
    font-size: 1.0rem;
	color: #9c9c9c;
    text-align: center;
}
.sec7-1-access-white-title img {
    width: 36px;
    height: 36px;
    margin-right: 0.5rem;
}

/* ホワイトシーズン アコーディオン */
/*ベース*/
.toggle_w {
	display: none;
}
.Label_w {		/*タイトル*/
    margin-left: 2%;
    margin-right: 2%;
	padding: 1em;
	display: block;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
	/* color: #9c9c9c; */
	color: #666666;
    /* background: #d6dce0; */
    /* background: #b0e0e6; */
    background: #f0f8ff;
}
.Label_w::before{		/*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	/* border-top: 2px solid #fff; */
	/* border-right: 2px solid #fff; */
	border-top: 2px solid #666666;
	border-right: 2px solid #666666;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 7px );
	right: 20px;
	transform: rotate(135deg);
}
.Label_w,
.content_w {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content_w {		/*本文*/
    margin-left: 2%;
    margin-right: 2%;
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle_w:checked + .Label_w + .content_w {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle_w:checked + .Label_w::before {
	transform: rotate(-45deg) !important;
}



/* 車用アクセスマップ */
.sec7-1-access-map-image img {
    width: 400px;
    height: auto;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

/* 交通リンク用バナー */
.sec7-1-access-banner img {
    width: 240px;
    height: auto;
    margin-top: 0.5rem;
}

/* 交通リンク */
.sec7-1-access-link {
    margin-top: 1.5rem;
    font-size: 16px;
}
.sec7-1-access-link img {
    width: 20px;
    height: 20px;
    margin-right: 0.6rem;
}

/* 経路例 見出し */
.sec7-1-access-example-title {
    display: flex;
    align-items: center;
    /* margin-left: 0.7rem; */
}
.sec7-1-access-example-title img {
    width: 28px;
    height: 28px;
    margin-left: 0.1rem;
    margin-right: 0.4rem;
}
.sec7-1-access-example-title h4 {
    font-size: 16px;
    font-weight: bold;
    line-height: 2rem;
    padding: 0.3rem 0.1rem;
}

/* 経路例 経路別詳細 */
.sec7-1-access-example {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 1.3rem;
}
.sec7-1-access-example img {
    width: 28px;
    height: 28px;
    padding-top: 0.1rem;
    /* padding-left: 0.1rem; */
    padding-right: 0.2rem;
    padding-bottom: 0.3rem;
}
.sec7-1-access-example p {
    line-height: 2rem;
}
.sec7-1-access-example span {
    background-color: #f0f0f0;
    padding: 0.3rem 0.3rem;
}

/* 後生掛自然研究路 */
.sec7-2-around-gnrr {
    margin-left: 2%;
    margin-right: 2%;
}
.sec7-2-around-gnrr p {
    font-size: 1.1rem;
    line-height: 1.7rem;
    text-align: center;
}

.sec7-2-around-gnrr-gallery {
    display: grid;
    grid-template-rows: (3, 1fr);
    grid-template-columns: (4, 1fr);
    gap: 0.8rem;
}
.sec7-2-around-gnrr-gallery img {
    width: 100%;
}
#sec7-2-around-gnrr-img1 { grid-row: 1; grid-column: 1; }
#sec7-2-around-gnrr-img2 { grid-row: 1; grid-column: 2; }
#sec7-2-around-gnrr-img3 { grid-row: 2/4; grid-column: 1/3; }
#sec7-2-around-gnrr-img4 { grid-row: 1/3; grid-column: 3/5; }
#sec7-2-around-gnrr-img5 { grid-row: 3; grid-column: 3; }
#sec7-2-around-gnrr-img6 { grid-row: 3; grid-column: 4; }

.sec7-2-around-gnrr-notice {
    border: #eee double 5px;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}
.sec7-2-around-gnrr-notice h4 {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.sec7-2-around-gnrr-notice p {
    font-size: 1.1em;
    line-height: 1.5rem;
    margin-bottom: 0.4rem;
    text-align: left;
}
.sec7-2-around-gnrr-notice ul {
    list-style-type: disc;
    margin-left: 1.5rem;
}
.sec7-2-around-gnrr-notice li {
    line-height: 1.5rem;
    color:#8b0000;

}

/* 周辺 & アクティビティ */
.sec7-2-around-other {
    margin-left: 2%;
    margin-right: 2%;
}
.sec7-2-around-other-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}
.sec7-2-around-other-img {
    grid-column: 1;
}
.sec7-2-around-other-img img {
    width: 100%;
}
.sec7-2-around-other-txt {
    grid-column: 2;
    font-size: 1.1rem;
    line-height: 1.5rem;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 2rem;
}
.sec7-2-around-other-txt img {
    width: 200px;
    height: auto;
    margin-top: 0.5rem;
}

/* 八幡平温泉郷 */
.sec7-2-around-onsen {
    margin-left: 2%;
    margin-right: 2%;
}
.sec7-2-around-onsen-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.sec7-2-around-onsen-gallery {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}
.sec7-2-around-onsen-gallery img {
    width: 100%;
}
#sec7-2-around-onsen-img1 { grid-row: 1; grid-column: 1; }
#sec7-2-around-onsen-img2 { grid-row: 1; grid-column: 2; }
#sec7-2-around-onsen-img3 { grid-row: 2; grid-column: 1; }
#sec7-2-around-onsen-img4 { grid-row: 2; grid-column: 2; }
.sec7-2-around-onsen-gallery p {
    text-align: center;
}



/*-----------------------------------------------
  8-1 ( FAQ ) ** FAQ **
-----------------------------------------------*/


.sec8-1-faq-wrap h3 {
    font-size: 1.2rem;
    font-weight: 500;
    /* letter-spacing: 0.1rem; */
    padding-left: 2%;
    padding-bottom: 1rem;
}


.sec8-1-faq-wrap p {
    font-size: 1.01rem;
    line-height: 1.6rem;
}

/* ホワイトシーズン アコーディオン */
/*ベース*/
.toggle_faq {
	display: none;
}
.Label_faq {		/*タイトル*/
    margin-left: 2%;
    margin-right: 2%;
	padding: 1em;
	display: block;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1rem;
	/* color: #9c9c9c; */
	color: #666666;
    /* background: #d6dce0; */
    /* background: #b0e0e6; */
    background: #f5f5f5;
}
.Label_faq::before{		/*タイトル横の矢印*/
	content:"";
	width: 12px;
	height: 12px;
	/* border-top: 2px solid #fff; */
	/* border-right: 2px solid #fff; */
	border-top: 2px solid #666666;
	border-right: 2px solid #666666;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 7px );
	right: 20px;
	transform: rotate(135deg);
}
.Label_faq,
.content_faq {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content_faq {		/*本文*/
    margin-left: 2%;
    margin-right: 2%;
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle_faq:checked + .Label_faq + .content_faq {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle_faq:checked + .Label_faq::before {
	transform: rotate(-45deg) !important;
}

.sec8-1-faq-wrap table {
	table-layout: fixed;
	width: 100%;
}
.sec8-1-faq-wrap th {
    padding: 0.2rem 0.2rem;
	border: 1px solid #999;
	text-align: center;
    vertical-align: middle;
	background: #eee;
}
.sec8-1-faq-wrap td {
    /* padding: 0.2rem 0.2rem;	 */
	border: 1px solid #999;
	text-align: center;
    vertical-align: middle;
    line-height: 1.5rem;
}


/*-----------------------------------------------
  9-1 ( Reserve ) ** 予約 **
-----------------------------------------------*/
.sec9-1-reserv-head p {
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
    text-align: center;
    padding-left: 2%;
    padding-right: 2%;
}

.sec9-1-reserv-online {
    display: block;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #ece0d4;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    padding-left: 1.5rem;
}
.sec9-1-reserv-online img {
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
}
.sec9-1-reserv-online p {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    font-weight: 400;
}
.sec9-1-reserv-online span {
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: normal;
	font-size: 0.8rem;
	opacity: 0.8;
}

.sec9-1-reserv-tel {
    display: block;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #bdcfc3;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
}
.sec9-1-reserv-tel img {
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
}
.sec9-1-reserv-tel p {
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    font-weight: 400;
}
.sec9-1-reserv-tel span {
    /* font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif; */
	font-weight: normal;
	font-size: 0.9rem;
	/* opacity: 0.8; */
}



/*-----------------------------------------------
  X-1 ( News ) ** お知らせ **
-----------------------------------------------*/
.secX-1-news-title-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
}

.secX-1-news-img img {
    width: 300px;
}

.secX-1-news-title {
    width: 80%;
    margin-bottom: 1.5rem;
}
.secX-1-news-title h2 {
    font-size: 1.3em;
    letter-spacing: 0.1rem;
    text-align: center;
    margin-top: 1rem;
    border-top: 1px dashed #666666;
    border-bottom: 1px dashed #666666;
    padding: 0.5rem 1rem;
}
.secX-1-news-title span {
	display: block;
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
	font-weight: normal;
	font-size: 0.8em;	
	opacity: 0.5;
	padding-top: 0.5rem;
}

.secX-1-news-txt {
    width: 80%;
    word-break: break-all;
    font-size: 1.1em;
    line-height: 1.8rem;
}

.secX-1-news-txt h3 {
    font-size: 1.2em;
    letter-spacing: 0.1rem;
    line-height: 1.8rem;
}

.secX-1-news-table_noborder td {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-right: 1rem;
}




/*-----------------------------------------------------------------------------------------------

  フ ッ タ ー

-----------------------------------------------------------------------------------------------*/
/* フッター 背景 */
.footer {
    background-color: #eee;
    width: 100%;
    height: 200px;
    color: #404040;
	display: flex;
    padding-top: 15px;
    padding-left: 10px;
    line-height: 28px;
}

/* フッター ロゴ＆ＴＥＬ */
.footer-wrapper1 {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
	width: 40%;
    margin-left: 1rem;
}

.footer_call_wrapper {
    font-size: 17px;
}
.footer_call_wrapper img {
    width: 24px;
    height: 24px;
}

#footer_call_time {
    font-size: 12px;
}

/* フッター メニューブロック */
.footer-wrapper2 {
    flex: 1;
	font-size: 0.85rem;
    display: flex;
    gap: 4rem;
	margin-bottom: 1rem;
    padding-right: 30px;
	justify-content: flex-end;
	margin-bottom: 0;
}

/* フッター Copyright */
#footer1-parts small {
	display: block;
}

/* フッター SNSアイコン */
.footer-sns {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;	
}



/*-----------------------------------------------------------------------------------------------

　レ ス ポ ン シ ブ 設 定

  850↑  Wide   (for PC)
  849↓  Narrow (for TAB/SP)

-----------------------------------------------------------------------------------------------*/

/*-----------------------------------------------
  ナビゲーション切替 ( Narrow → Wide ) *Default
-----------------------------------------------*/
/* Narrow Nav 非表示 */
.narrow-nav-wrapper {
    display: none;
} 

/* ↓ -- Wide Nav 表示設定 -- ↓ */
.wide-nav { 
    position: absolute;
    top: 15px;
    width: 100%;
    z-index: 3;
}
.wide-nav ul {
    display: flex;
    justify-content: center;
}
.wide-nav li {
    font-size: 20px;
    margin-left: 30px;
    text-align: center;
    text-shadow: 2px 2px 5px #ffffff, -2px 2px 5px #ffffff ,2px -2px 5px #ffffff,-2px -2px 5px #ffffff ;
}
.wide-nav img {
    width: 24px;
    height: 24px;
    filter:drop-shadow(0px 0px 7px #ffffff);
}
.wide-nav a {
    display: block;
    width: 100%;
    text-decoration: none;
    padding-bottom: 5px;
}
.wide-nav span {  /* for English */
    font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
    font-size: 11px;
    font-weight: 400;
    color: #000000;
}
.wide-nav li:hover {
    color: #000000;
    transition: 0.4s;
}
/* ↑ -- Wide Nav 表示設定 -- ↑ */


/* ホームヘッダー用 ロゴ位置調整 
----------------------------------------*/ 
@media only screen and (max-width: 1349px) {
    .header_logo img {
        top: 38vh;
        left: 40vw;
    }
}

@media only screen and (max-width: 1249px) {
    .header_logo img {
        top: 34vh;
        left: 40vw;
    }
}

@media only screen and (max-width: 1149px) {
    .header_logo img {
        top: 30vh;
        left: 40vw;
    }
    .header_logo_hotspring img {
        top: 19vh;
        left: 35vw;
    }
}

@media only screen and (max-width: 1049px) {
    .header_logo img {
        top: 28vh;
        left: 40vw;
    }
    .header_logo_hotspring img {
        top: 15vh;
        left: 34vw;
    }

    .sec2-1-head-wrap {
        flex-direction: column;
    }
    .sec2-1-head-image {
        width: 98%;
        margin-left: 0px;
    } 
    .sec2-1-head-text img {
        width: 35%;
    }

    .sec2-1-list-wrap {
        grid-template-columns: repeat(2, 1fr);
        margin: 1rem 2%;
    }
    .sec2-1-list-text img {
        width: 40%;
    }

    .sec4-1-roominfo-image-wrap{
        display: block;
    }
    .sec4-1-roominfo-amenity {
        margin-top: 1rem;
        margin-left: 0;
    }
}

@media only screen and (max-width: 949px) {
    .header_logo img {
        top: 25vh;
        left: 38vw;
    }
    .header_logo_hotspring img {
        top: 10vh;
        left: 32vw;
    }
}

@media only screen and (max-width: 849px) {
    .header_logo img {
        top: 23vh;
        left: 35vw;
    }

    .header_logo_hotspring img {
        width: 35%;
        height: auto;
        top: 10vh
        left: 28vw;
    }

}



/*-----------------------------------------------
  ナビゲーション切替 ( Wide → Narrow )
-----------------------------------------------*/
@media only screen and (max-width: 767px) {

    /* カバーイメージ調整 */
    .header_cover img {
        top: 0;
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    .header_cover_small-1 img {
        height: 100px;
    }
    .header_cover_small-2 img {
        height: 100px;
    }

    /* ロゴ位置調整 */
    .header_logo img {
        top: 30vh;
        left: 30vw; 
        margin: auto;
    }
    .header_logo_hotspring img {
        width: 40%;
        height: auto;
        top: 7vh;
        left: 30vw;
    }

    /* Wide Nav 非表示 */
    .wide-nav {
        display: none;
    }

    /* ↓ -- Narrow Nav 表示設定 -- ↓ */
    .narrow-nav-wrapper {
        display: block !important;
        position: relative;
    }

    .narrow-nav-icon { /* Menu Iconの "□" 設定 */ 
        width: 50px;
        height: 36px;
        position: fixed; /* ← fixedにして常に左上固定 */
        top: 10px;
        left: 10px;
        cursor: pointer;
        z-index: 13;
        display: inline-block;
        background-color: rgba(255,255,255,0.5);
    }
    .narrow-nav-icon span {  /* Menu Iconの "－” 設定 */
        display: block;
        height: 4px;
        margin: 6px 0;
        background: #333;
        border-radius: 2px;
        transition: 0.4s;
    }
    /* ハンバーガーの変形 ("－" のTransform) */
    #narrow-nav-toggle:checked + .narrow-nav-icon span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    #narrow-nav-toggle:checked + .narrow-nav-icon span:nth-child(2) {
        opacity: 0;
    }
    #narrow-nav-toggle:checked + .narrow-nav-icon span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }


    .nnav-overlay { /* 背景オーバーレイ(暗くする) */ 
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        pointer-events: none;
        transition: 0.4s;
        z-index: 11;
    }
    #narrow-nav-toggle:checked ~ .nnav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .narrow-nav { /*メニュー本体 (左から出す) */
        position: fixed;
        top: 0;
        left: -250px; /* ← 初期位置を左へ */
        width: 250px;
        height: 100%;
        background: #fff;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        transition: left 0.4s ease;
        z-index: 12;
    }
    #narrow-nav-toggle:checked ~ .narrow-nav {
        left: 0; /* ← 開いたときは左0へ */
    }

    .narrow-nav ul {
        list-style: none;
        padding: 60px 20px;
    }
    .narrow-nav li {
        margin: 20px 0;
        line-height:1.1em;
    }
    .narrow-nav a {
        text-decoration: none;
        color: #333;
        font-size: 1.2rem;
        transition: color 0.3s;
    }

    .narrow-nav span {  /* for English */
        font-family: "Noto Serif JP","游明朝","ヒラギノ明朝 ProN", serif;
        font-size: 11px;
        font-weight: 400;
        color: #000000;
    }

    .narrow-nav a:hover {
        color: #6b8e23;
        transition: 0.4s;
    }
    /* ↑ -- Narrow Nav 表示設定 -- ↑ */


    /* ↓ -- Footer 表示設定 -- ↓ */
    .footer-wrapper2 {
        display: none;
    }
    .footer-wrapper1 {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    /* SNSリンク */
    .footer-sns{
        justify-content:center;
    }
    /* ↑ -- Footer 表示設定 -- ↑ */


    /* ↓ -- Section 表示設定 -- ↓ */

    /* 1-1 Top - News */
    .sec1-1-news-list-A {
        display: block;
    }
    .sec1-1-news-list-B {
        display: block;
    }

    /* 2-1 Hotspring - Main Spa */
    .sec2-1-head-text img {
        width: 55%;
    }
    .sec2-1-list-wrap {
        grid-template-columns: repeat(1, 1fr);
        margin: 1rem 2%;
    }
    .sec2-1-list-text img {
        width: 35%;
    }

    /* 2-2 Hotspring - Buna-no-yu */
    .sec2-2-list-wrap {
        display: block;
    }
    .sec2-2-list-image-wrap {
        display: none;
    }
    .sec2-2-list-table {
	    width: 96%;
    }

    /* 2-3 Hotspring - Quality */
    .sec2-3-quality-table {
        width: 96%;
    }

    /* 3-1 Ondol - Moegi */
    .sec3-1-usecase-wrap {
        display: block;
        margin: 1rem 2%;
    }
    .sec3-1-usecase-image {
        margin: 1rem 2%;
    }
    .sec3-1-trial-text {
        margin: 1rem 2%;
    }
    .sec3-1-trial-table {
        width: 95%;
    }

    /* 4-1 Guestrooms */
    .sec4-1-head {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 1fr;
    }
    .sec4-1-head-txt {
        grid-row: 1;
        grid-column: 1/3;
    }
    .sec4-1-head-img1 {
        grid-row: 2;
        grid-column: 1;
    }
    .sec4-1-head-img2 {
        grid-row: 2;
        grid-column: 2;
    }
    .sec4-1-roominfo-text h3 {
        letter-spacing: 0.1rem;
    }

    /* 5-1 Dining - Space */
    .sec5-1-rindo-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    #sec5-1-rindo-gallery-img1 { grid-row: 1/3; grid-column: 1/3;}
    #sec5-1-rindo-gallery-img2 { grid-row: 3; grid-column: 1;}
    #sec5-1-rindo-gallery-img3 { grid-row: 3; grid-column: 2;}
    #sec5-1-rindo-gallery-img4 { grid-row: 4; grid-column: 1;}
    #sec5-1-rindo-gallery-img5 { grid-row: 4; grid-column: 2;} 

    /* 5-2 Dining - Dinner */
    .sec5-2-dinner-gallery {
        width: 100%;
    }
    .sec5-2-dinner-text {
        width: 100%;
        margin-top: 2rem;
    }
    .sec5-2-dinner-text h3 {
        text-align: center;
    }
    .sec5-2-dinner-append {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    #sec5-2-dinner-beef-img { grid-row:1; grid-column:1; }
    #sec5-2-dinner-beef-txt { grid-row:1; grid-column:2; }
    #sec5-2-dinner-kotsuzake-img { grid-row:2; grid-column: 1;}
    #sec5-2-dinner-kotsuzake-txt { grid-row:2; grid-column: 2;}

    /* 5-3 Dining - Breakfast */
    .sec5-3-breakfast-wrap {
        display: block;
    }
    .sec5-3-breakfast-gallery {
        width: 100%;
    }
    .sec5-3-breakfast-text {
        width: 100%;
        margin-top: 1rem;
        margin-left: 0;
    }
    .sec5-3-breakfast-text h3 {
        text-align: center;
    }


    /* 6-1 Cafe */
    .sec6-1-cafe-afternoon-wrap {
        display: block;
    }
    .sec6-1-cafe-afternoon-txt {
        margin: 1rem 2%;
    }

    /* 7-2 Around */
    .sec7-2-around-other-wrap {
        display: block;
    }
    .sec7-2-around-onsen-wrap {
        display: block;
    }

    /* X-1 News */
    .secX-1-news-title {
        width: 95%;
    }
    .secX-1-news-txt {
        width: 95%;
    }

    /* ↑ -- Section 表示設定 -- ↑ */

}


/* ホームヘッダー用 画像＋ロゴ位置調整 
----------------------------------------*/ 
@media only screen and (max-width: 749px) {
    .header_logo_hotspring img {
        width: 36%;
        height: auto;
        top: 10vh;
        left: 33vw;
    }
}

@media only screen and (max-width: 649px) {
    .header_logo img {
        top: 32vh;
        left: 26vw; 
    }
    .header_logo_hotspring img {
        width: 45%;
        height: auto;
        top: 12vh;
        left: 25vw;
    }
}

@media only screen and (max-width: 549px) {
    .header_logo img {
        top: 29vh;
        left: 22vw; 
    }