@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* HTML版デザインの反映：書体の読み込み（2026-09-11 追加。@import はファイルの先頭に置く決まりのためここに置く） */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@1,6..96,400;1,6..96,500&family=Zen+Old+Mincho:wght@500;700&display=swap");


.grecaptcha-badge {
 bottom: 10px;
 right: 10px;
 transform: scale(0.85);
 opacity: 0.6;
}

/* ===================================================
   宿泊施設（hotel）基本情報＆マップコンポーコント
   =================================================== */
.c-hotelSpec {
	margin-top: 32px;
	margin-bottom: 48px;
}

.c-hotelSpec__grid {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

@media screen and (min-width: 768px) {
	.c-hotelSpec__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: start;
	}
}

/* テーブルスタイル */
.c-hotelSpec__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 24px;
}

.c-hotelSpec__table th,
.c-hotelSpec__table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e5e5e5;
	text-align: left;
	vertical-align: top;
}

.c-hotelSpec__table th {
	width: 110px;
	font-weight: bold;
	color: #333;
	background-color: #fafafa;
	white-space: nowrap;
}

.c-hotelSpec__table td {
	color: #555;
	word-break: break-word;
}

/* ボタンスタイル（角丸を完全に直角化） */
.c-hotelSpec__btnWrap {
	text-align: center;
	margin-top: 16px;
}

.c-hotelSpec__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	min-height: 44px;
	padding: 10px 24px;
	border-radius: 0 !important; /* 角丸廃止 */
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	transition: none !important; /* アニメーション廃止 */
	box-sizing: border-box;
}

.c-hotelSpec__btn:hover {
	opacity: 0.85;
}

.c-hotelSpec__btn--official {
	background-color: #1e73be;
	color: #fff !important;
}

.c-hotelSpec__btn--map {
	background-color: #f5f5f5;
	color: #333 !important;
	border: 1px solid #ddd;
	flex: 1;
}

.c-hotelSpec__btn--map:hover {
	background-color: #eee;
}

/* SWELLのボタンの角は、SWELL設定 > エディター設定 > ボタンの丸み で「0px」にしている（2026-09-15 CSSから設定へ移行） */

/* マップエリア */
.c-hotelSpec__colMap {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.c-hotelSpec__mapFrame {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* 4:3比率 */
	border-radius: 0 !important; /* マップ枠の角丸も廃止 */
	overflow: hidden;
	background-color: #f0f0f0;
}

.c-hotelSpec__mapFrame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

.c-hotelSpec__mapButtons {
	display: flex;
	gap: 16px;
}

/* ===================================================
   宿泊施設（hotel）特長セクションカード（角丸・ホバーアニメ廃止）
   =================================================== */
.c-hotelFeature {
	gap: 24px;
}

.c-hotelFeature__col {
	margin-bottom: 24px;
}

.c-hotelFeature__card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 0 !important; /* 角丸廃止 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	text-decoration: none !important;
	transition: none !important; /* アニメーション廃止 */
}

/* マウスオーバー時の変形アニメーション・シャドウ変化を廃止 */
.c-hotelFeature__card:hover {
	transform: none !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.c-hotelFeature__img {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover !important;
	border: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important; /* 画像の角丸も廃止 */
}

.c-hotelFeature__body {
	padding: 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.c-hotelFeature__title {
	font-size: 17px !important;
	font-weight: bold !important;
	text-align: center !important;
	margin: 0 0 12px 0 !important;
	color: #333 !important;
}

.c-hotelFeature__desc {
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #555 !important;
	margin: 0 !important;
	text-align: justify;
}

/* ===================================================
   他施設（other_hotels）丸画像ナビゲーション（ホバーアニメ廃止）
   =================================================== */
.c-otherHotels {
	margin-top: 32px;
	margin-bottom: 48px;
	width: 100%;
}

.c-otherHotels__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media screen and (min-width: 768px) {
	.c-otherHotels__grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 20px;
	}
}

.c-otherHotels__item {
	text-align: center;
}

.c-otherHotels__imgWrap {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1; /* 正方形（2026-09-15 依頼者の指定。宿・観光・グルメ・散策マップの「他の〜」共通） */
	margin: 0 auto 8px auto;
	overflow: hidden;
}

.c-otherHotels__img {
	width: 100% !important;
	height: 100% !important;
	border-radius: 0 !important; /* 直角にする */
	object-fit: cover !important;
	border: 1px solid #eee !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: opacity .4s ease !important; /* マウスを乗せたとき、ふわっと薄くする（2026-09-15 依頼者の指定） */
}

/* マウスオーバー時の拡大・ボーダー変更等のアニメーションを廃止 */
.c-otherHotels__img:hover {
	transform: none !important;
	opacity: 0.85;
}

.c-otherHotels__title {
	font-size: 12px !important;
	line-height: 1.4 !important;
	font-weight: bold !important;
	margin: 0 !important;
}

.c-otherHotels__title a {
	color: var(--color_link, #00726e) !important; /* SWELLのリンク色に統一 */
	text-decoration: none !important;
}

.c-otherHotels__title a:hover {
	color: var(--color_link, #00726e) !important;
	text-decoration: underline !important;
}

/* 見出しサイズの調整 */
.c-otherHotels__heading {
	font-size: 24px !important;
	font-weight: bold !important;
	margin-top: 40px !important;
	margin-bottom: 32px !important;
	color: var(--color_text, #333) !important; /* 元の黒系色に戻す */
}

@media screen and (min-width: 768px) {
	.c-otherHotels__heading {
		font-size: 32px !important;
		margin-top: 56px !important;
	}
}

/* 散策マップ用4列レイアウト調整 */
@media screen and (min-width: 768px) {
	.c-otherHotels--col4 .c-otherHotels__grid {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.c-otherHotels--col4 .c-otherHotels__title {
		font-size: 15px !important;
		line-height: 1.5 !important;
	}
}

/* 前後の記事リンクを非表示にする */
body.single-hotel .p-pnLinks,
body.single-guide .p-pnLinks,
body.single-gourmet .p-pnLinks,
body.single-map .p-pnLinks {
	display: none !important;
}


/* ===================================================
   カスタム投稿タイプ詳細ページおよびアーカイブページの共通スタイル制御
   ※ 標準投稿（post）のお知らせ系ページは除外し通常表示
   =================================================== */

/* ── CPT詳細ページ（hotel等）：タイトルエリア・日付・カテゴリーを完全非表示 ── */
/* p-articleHead は c-postTitle クラスも持つため両方指定 */
body.single:not(.single-post) .p-articleHead,
body.single:not(.single-post) .c-postTitle,
body.single:not(.single-post) .p-articleMetas,
body.single:not(.single-post) .p-articleMetas.-top,
body.single:not(.single-post) .p-articleMetas.-bottom,
body.single:not(.single-post) .c-postTimes,
body.single:not(.single-post) .p-articleThumb {
	display: none !important;
}

/* ── 固定ページ（page）、投稿ページ（blog）：ページタイトル・日付を非表示 ── */
.page .p-articleHead,
.page .c-postTitle,
.page .c-pageTitle,
.page .l-topTitleArea,
.page .p-articleMetas,
.blog .p-articleHead,
.blog .c-postTitle,
.blog .c-pageTitle,
.blog .l-topTitleArea,
.blog .p-articleMetas {
	display: none !important;
}

/* ── 固定ページ（page）、投稿ページ（blog）、CPTアーカイブ：パンくずリスト自体の下マージンを0にする ── */
.page .p-breadcrumb,
.blog .p-breadcrumb,
.post-type-archive-hotel .p-breadcrumb,
.post-type-archive-guide .p-breadcrumb,
.post-type-archive-gourmet .p-breadcrumb,
.post-type-archive-map .p-breadcrumb {
	margin-bottom: 0 !important;
}

/* ── 固定ページ（page）、投稿ページ（blog）、CPTアーカイブ：パンくずリストとコンテンツエリアの間の余白を0にする ── */
.page .l-content,
.blog .l-content,
.post-type-archive-hotel .l-content,
.post-type-archive-guide .l-content,
.post-type-archive-gourmet .l-content,
.post-type-archive-map .l-content {
	padding-top: 0 !important;
}

.page .l-mainContent__inner > .post_content,
.blog .l-mainContent__inner > .post_content,
.post-type-archive-hotel .l-mainContent__inner > .post_content,
.post-type-archive-guide .l-mainContent__inner > .post_content,
.post-type-archive-gourmet .l-mainContent__inner > .post_content,
.post-type-archive-map .l-mainContent__inner > .post_content {
	margin-top: 0 !important;
}

/* CPTアーカイブ上部のブログパーツ（FV）および内部要素のマージンを0にする */
.post-type-archive-hotel .l-content > .p-blogParts.post_content,
.post-type-archive-guide .l-content > .p-blogParts.post_content,
.post-type-archive-gourmet .l-content > .p-blogParts.post_content,
.post-type-archive-map .l-content > .p-blogParts.post_content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* ブログパーツ内の最初の要素とそのネストした最初の子要素たちの上部余白を完全に排除 */
.post-type-archive-hotel .l-content > .p-blogParts.post_content > :first-child,
.post-type-archive-guide .l-content > .p-blogParts.post_content > :first-child,
.post-type-archive-gourmet .l-content > .p-blogParts.post_content > :first-child,
.post-type-archive-map .l-content > .p-blogParts.post_content > :first-child,
.post-type-archive-hotel .l-content > .p-blogParts.post_content > :first-child > :first-child,
.post-type-archive-guide .l-content > .p-blogParts.post_content > :first-child > :first-child,
.post-type-archive-gourmet .l-content > .p-blogParts.post_content > :first-child > :first-child,
.post-type-archive-map .l-content > .p-blogParts.post_content > :first-child > :first-child,
.post-type-archive-hotel .l-content > .p-blogParts.post_content > :first-child > :first-child > :first-child,
.post-type-archive-guide .l-content > .p-blogParts.post_content > :first-child > :first-child > :first-child,
.post-type-archive-gourmet .l-content > .p-blogParts.post_content > :first-child > :first-child > :first-child,
.post-type-archive-map .l-content > .p-blogParts.post_content > :first-child > :first-child > :first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.post-type-archive-hotel .l-content > .p-blogParts.post_content .swell-block-fullWide__inner,
.post-type-archive-guide .l-content > .p-blogParts.post_content .swell-block-fullWide__inner,
.post-type-archive-gourmet .l-content > .p-blogParts.post_content .swell-block-fullWide__inner,
.post-type-archive-map .l-content > .p-blogParts.post_content .swell-block-fullWide__inner {
	padding-top: 0 !important;
}

.post-type-archive-hotel .l-content > .p-blogParts.post_content .swell-block-fullWide__inner > p,
.post-type-archive-guide .l-content > .p-blogParts.post_content .swell-block-fullWide__inner > p,
.post-type-archive-gourmet .l-content > .p-blogParts.post_content .swell-block-fullWide__inner > p,
.post-type-archive-map .l-content > .p-blogParts.post_content .swell-block-fullWide__inner > p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
}

/* ── CPTアーカイブ・タクソノミーページ：ページヘッダータイトルを非表示 ── */
/* .post-type-archive-hotel など post-type-archive-* クラスを対象にする */
body.post-type-archive .c-pageTitle,
body.post-type-archive .l-topTitleArea,
body.post-type-archive .c-pageExcerpt,
body.tax-hotel_type .c-pageTitle,
body.tax-hotel_type .l-topTitleArea,
body.tax-hotel_room_bath .c-pageTitle,
body.tax-hotel_room_bath .l-topTitleArea,
body.tax-hotel_meal .c-pageTitle,
body.tax-hotel_meal .l-topTitleArea,
body.tax-hotel_facility .c-pageTitle,
body.tax-hotel_facility .l-topTitleArea,
body.tax-hotel_price .c-pageTitle,
body.tax-hotel_price .l-topTitleArea,
body.tax-hotel_plan .c-pageTitle,
body.tax-hotel_plan .l-topTitleArea {
	display: none !important;
}

/* ── CPTアーカイブの一覧カード内：日付・メタデータを非表示 ── */
body.post-type-archive .p-postList__meta,
body.post-type-archive .c-postTimes {
	display: none !important;
}

/* ── CPT詳細ページ：記事末尾のフットエリア（カテゴリー・タグ）を非表示 ── */
body.single:not(.single-post) .p-articleFoot {
	display: none !important;
}

/* ===================================================
   宿泊施設（hotel）一覧ページ（絞り込み・カード）のスタイル
   =================================================== */

/* ── 絞り込みフィルターエリア ── */
.c-filterArea {
	background-color: #f7f7f7;
	border: 1px solid #e5e5e5;
	padding: 24px;
	margin-bottom: 40px;
	border-radius: 0 !important; /* 角丸なし */
}

.c-filterArea__title {
	font-size: 1.1rem;
	font-weight: bold;
	margin: 0 0 20px 0;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color_main, #9d7a4b);
	color: #333;
}

.c-filterArea__title i {
	margin-right: 6px;
	color: var(--color_main, #9d7a4b);
}

/* アコーディオン */
.c-filterAccordion {
	border-top: 1px solid #e5e5e5;
}

.c-filterAccordion__item {
	border-bottom: 1px solid #e5e5e5;
}

.c-filterAccordion__header {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 16px 8px;
	font-size: 1rem;
	font-weight: bold;
	color: #333;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	outline: none;
}

.c-filterAccordion__icon {
	width: 12px;
	height: 12px;
	position: relative;
}

.c-filterAccordion__icon::before,
.c-filterAccordion__icon::after {
	content: "";
	position: absolute;
	background-color: #666;
	transition: none !important; /* アニメーションなし */
}

/* プラスアイコン */
.c-filterAccordion__icon::before {
	top: 5px;
	left: 0;
	width: 12px;
	height: 2px;
}
.c-filterAccordion__icon::after {
	top: 0;
	left: 5px;
	width: 2px;
	height: 12px;
}

/* マイナスアイコン (開いている時) */
.c-filterAccordion__header[aria-expanded="true"] .c-filterAccordion__icon::after {
	display: none;
}

.c-filterAccordion__content {
	padding: 8px 16px 24px 16px;
	border-top: 1px dashed #e5e5e5;
}

/* フィルターグループ */
.c-filterGroup {
	margin-bottom: 20px;
}
.c-filterGroup:last-child {
	margin-bottom: 0;
}

.c-filterGroup__label {
	display: block;
	font-size: 0.9rem;
	font-weight: bold;
	color: #666;
	margin-bottom: 8px;
}

.c-filterGroup__options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
}

.c-filterOption {
	display: inline-flex;
	align-items: center;
	font-size: 0.9rem;
	color: #333;
	cursor: pointer;
	user-select: none;
}

.c-filterOption input[type="checkbox"] {
	margin-right: 6px;
	width: 16px;
	height: 16px;
	border-radius: 0 !important; /* チェックボックスの角丸なし */
	cursor: pointer;
}

/* リセットフッター */
.c-filterArea__footer {
	text-align: right;
	margin-top: 16px;
}

.c-filterResetBtn {
	background-color: #666;
	color: #fff;
	border: none;
	padding: 8px 16px;
	font-size: 0.85rem;
	cursor: pointer;
	border-radius: 0 !important;
	transition: none !important;
}

/* ── 宿泊施設カードリスト ── */
.c-hotelCardsList {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.c-hotelCardItem {
	width: 100%;
}

.c-hotelCard {
	display: flex;
	border: 1px solid #e5e5e5;
	background-color: #fff;
	border-radius: 0 !important; /* 角丸なし */
	overflow: hidden;
	box-shadow: none !important; /* 影なし */
	transition: none !important; /* アニメーションなし */
}

/* ホバー時の挙動をリセット */
.c-hotelCard:hover {
	transform: none !important;
	box-shadow: none !important;
}

.c-hotelCard__image {
	width: 40%;
	min-width: 250px;
	position: relative;
	overflow: hidden;
}

.c-hotelCard__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.c-hotelCard__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: none !important; /* 画像のズームアニメーション等も完全に無効化 */
}

.c-hotelCard__body {
	width: 60%;
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.c-hotelCard__title {
	font-size: 1.3rem;
	font-weight: bold;
	margin: 0 0 12px 0;
	color: #333;
}

.c-hotelCard__title a {
	color: inherit;
	text-decoration: none;
}

.c-hotelCard__catch {
	font-size: 0.95rem;
	color: var(--color_main, #9d7a4b);
	margin: 0 0 16px 0;
	line-height: 1.4;
}

.c-hotelCard__info {
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 12px 0;
	margin-bottom: 20px;
}

.c-hotelCard__infoRow {
	display: flex;
	margin: 0 0 8px 0;
	font-size: 0.9rem;
	line-height: 1.4;
}
.c-hotelCard__infoRow:last-child {
	margin-bottom: 0;
}

.c-hotelCard__infoLabel {
	width: 80px;
	font-weight: bold;
	color: #666;
}

.c-hotelCard__infoValue {
	color: #333;
	flex: 1;
}

.c-hotelCard__infoValue a {
	color: inherit;
}

/* ボタン */
.c-hotelCard__buttons {
	display: flex;
	gap: 16px;
	margin-top: auto;
}

.c-hotelCard__buttons .swell-block-button {
	flex: 1;
	max-width: 200px;
}

.c-hotelCard__buttons .swell-block-button__link {
	padding: 10px 0;
	text-align: center;
	display: block;
	font-size: 0.9rem;
}

/* 該当なしメッセージ */
.c-hotelListEmpty {
	padding: 40px;
	text-align: center;
	background-color: #f7f7f7;
	border: 1px dashed #ccc;
	color: #666;
	font-size: 1rem;
}

/* ── レスポンシブ (スマホ対応) ── */
@media screen and (max-width: 768px) {
	.c-filterArea {
		padding: 16px;
	}
	
	.c-filterGroup__options {
		gap: 8px 12px;
	}
	
	.c-hotelCard {
		flex-direction: column;
	}
	
	.c-hotelCard__image {
		width: 100%;
		height: 200px;
	}
	
	.c-hotelCard__body {
		width: 100%;
		padding: 16px;
	}
	
	.c-hotelCard__title {
		font-size: 1.15rem;
	}
	
	.c-hotelCard__buttons {
		margin-top: 16px;
	}
}

/* ── Smart Slider 3：スライダー内テキストの視認性向上のための影（シャドウ）設定 ── */
.n2-ss-slider .n2-ss-text,
.n2-ss-slider .n2-ss-layer,
.n2-ss-slider h1,
.n2-ss-slider h2,
.n2-ss-slider h3,
.n2-ss-slider p {
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.5) !important;
}

/* ── Smart Slider 3：ドットナビゲーションの位置を画像の下部外側へ移動 ── */
.n2-ss-slider-controls-absolute-center-bottom {
	bottom: -30px !important;
}

.n2-ss-slider {
	margin-bottom: 40px !important;
	overflow: visible !important;
}

/* ── Smart Slider 3：アクティブ状態およびホバー・フォーカス時のドットナビをオレンジ（メインカラー）に変更 ── */
.n2-ss-slider .n2-bullet.n2-active,
.n2-ss-slider .n2-bullet:hover,
.n2-ss-slider .n2-bullet:focus {
	background: var(--color_main, #ec6902) !important;
}

/* ── Smart Slider 3：非アクティブ状態のドットナビを薄めの灰色に変更 ── */
.n2-ss-slider .n2-bullet {
	background: #cccccc !important;
}

/* ── フッター前ウィジェット：下部マージンおよび内部ブログパーツ直下要素の末尾余白を0にし、著作権の上下余白を均等化 ── */
.w-beforeFooter {
	margin-bottom: 0 !important;
}

.w-beforeFooter .p-blogParts.post_content > * {
	margin-bottom: 0 !important;
}

/* ── 散策マップアーカイブ：スライダー全体およびドットナビを最前面に配置 ── */
.post-type-archive-map .l-content > .p-blogParts.post_content > .swell-block-fullWide:first-child {
	position: relative !important;
	z-index: 10 !important;
}

.post-type-archive-map .n2-ss-slider-controls-absolute-center-bottom {
	z-index: 20 !important;
}

/* ── ヘッダー：サイト名テキストの左側にロゴ画像を追加 ── */
.c-headLogo__link {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	padding-left: 58px; /* 画像の幅(48px) + 余白(10px) = 58px */
	min-height: 40px;   /* 画像が潰れないための最小高 */
}

.c-headLogo__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 40px; /* アスペクト比 6:5 に合わせる (48px : 40px) */
	background-image: url('/wp-content/uploads/2026/08/8_atagawa_header.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center left;
}

/* スマートフォン表示時のサイズ微調整 */
@media screen and (max-width: 959px) {
	.c-headLogo__link {
		padding-left: 46px; /* 画像の幅(36px) + 余白(10px) = 46px */
		min-height: 30px;
	}
	
	.c-headLogo__link::before {
		width: 36px;
		height: 30px; /* 36:30 = 6:5 */
	}
}

/* ── お知らせ（投稿）詳細ページ：SNSシェアボタンの非表示 ── */
.single-post .p-snsShare {
	display: none !important;
}

/* ── スマホ下部固定メニュー：スクロール量に関わらず最初から常時表示する ── */
#fix_bottom_menu {
	bottom: 0 !important;
	z-index: 9999 !important;
}

/* ── スマホ下部固定メニュー：FontAwesomeアイコンのサイズと高さをSWELL標準に統一する ── */
#fix_bottom_menu .menu-item .fa-solid,
#fix_bottom_menu .menu-item svg {
	display: block !important;
	font-size: 23px !important; /* 他のアイコンと視覚的なボリューム感を揃えるために少し拡大 */
	width: 23px !important;     /* SVG置換後の横幅を強制固定 */
	height: 20px !important;    /* 高さを固定 */
	line-height: 23px !important; /* 少し下に沈めて位置を補正 */
	text-align: center !important;
	margin: 0 auto !important;  /* 置換されたSVGを中央に配置 */
}

/* ACCESSのテキスト（span）のベースライン位置微調整 */
#fix_bottom_menu a[href*="access"] span {
	margin-top: 2px !important; /* テキストの位置をTELやトップへ（4px相当）と完全に揃えるための補正 */
}

/* ── 特定固定ページ（熱川温泉について・ACCESS）：フッター上部の余白を削除 ── */
.page-id-2518 .l-content,
.page-id-2532 .l-content {
	margin-bottom: 0 !important;
}

.page-id-2518 .l-mainContent,
.page-id-2532 .l-mainContent {
	padding-bottom: 0 !important;
}

.page-id-2518 .post_content > *:last-child,
.page-id-2532 .post_content > *:last-child {
	margin-bottom: 0 !important;
}

.page-id-2518 .w-beforeFooter,
.page-id-2532 .w-beforeFooter {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ===================================================
   GTranslate（言語切り替えボタン）の配置・スタイル調整
   =================================================== */

/* ── PC版ヘッダー（ナビゲーション） ── */
@media screen and (min-width: 960px) {
	.l-header__gnav .c-gnav,
	.l-fixHeader__gnav .c-gnav {
		display: flex !important;
		align-items: center !important;
		overflow: visible !important;
	}

	.c-gnav .menu-item-gtranslate {
		display: inline-flex !important;
		align-items: center !important;
		align-self: center !important;
		position: relative !important;
		height: auto !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 8px !important;
		padding-right: 12px !important;
	}

	.c-gnav .menu-item-gtranslate > [id*="gtranslate_menu_wrapper"] {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		display: inline-flex !important;
		align-items: center !important;
		align-self: center !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}

	.c-gnav .menu-item-gtranslate .gt_float_switcher,
	.c-gnav .menu-item-gtranslate .gt-selected {
		margin: 0 !important;
		vertical-align: middle !important;
		align-self: center !important;
	}
}

/* ── スマホ版（ハンバーガーメニュー内） ── */
.p-spMenu .menu-item-gtranslate {
	position: relative !important;
	margin-top: 24px !important; /* 「お問い合わせ」ボタンとの間の余白 */
	padding-bottom: 12px !important;
}

.p-spMenu .menu-item-gtranslate > [id*="gtranslate_menu_wrapper"] {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

/* ===================================================
   ヘッダーインナー幅の拡張および左右パディング設定
   =================================================== */
.l-header__inner,
.l-fixHeader__inner {
	max-width: 100% !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* ===================================================
   ヘッダーブレイクポイント変更（1100px以下でスマホヘッダー切替）
   =================================================== */
@media screen and (max-width: 1100px) {
	/* PC用ナビゲーションおよびPC専用要素を非表示 */
	.l-header__gnav,
	.l-fixHeader__gnav,
	.c-gnavWrap,
	.pc_ {
		display: none !important;
	}

	/* スマホ用メニューボタン・カスタムボタンおよびSP専用要素を表示 */
	.l-header__menuBtn,
	.l-header__customBtn,
	.sp_ {
		display: block !important;
	}

	/* 960px〜1100pxの間でもスマホ用ドロワーメニュー（.p-spMenu）の表示制限を解除 */
	.p-spMenu {
		display: block !important;
	}

	/* ハンバーガーボタン等のフレックス・インライン表示補正・縦軸中央揃え */
	.l-header__menuBtn,
	.l-header__customBtn {
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.l-header__menuBtn .c-iconBtn,
	.l-header__customBtn .c-iconBtn {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		align-self: center !important;
	}

	/* ヘッダー内部レイアウトの縦軸中央揃え */
	.l-header__inner,
	.l-fixHeader__inner {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
}
	/* サイト名エリアをdisplay: flex化し、ハンバーガーボタン直前まで幅を確実に拡張 */
	html body .l-header__inner .l-header__logo,
	html body .l-header__logo {
		display: flex !important;
		align-items: center !important;
		flex: 1 1 auto !important;
		width: calc(100% - 56px) !important;
		max-width: calc(100% - 56px) !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	html body .l-header__logo .c-headLogo,
	html body .c-headLogo {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	html body .c-headLogo__link {
		display: inline-flex !important;
		align-items: center !important;
		max-width: 100% !important;
		width: 100% !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	@media screen and (max-width: 480px) {
		html body .c-headLogo__link {
			font-size: 15px !important;
			line-height: 1.3 !important;
			padding-left: 40px !important;
		}
	}

	@media screen and (max-width: 360px) {
		html body .c-headLogo__link {
			font-size: 14px !important;
			padding-left: 36px !important;
		}
	}

/* =====================================================================
   ▼▼▼ HTML版デザインの反映（2026-09-11 追加）ここから ▼▼▼
   子テーマ style.css の末尾に追記。この区切りから最後までを消せば元の見た目に戻る。
   ※Webフォントの読み込み（@import）だけは、ルール上ファイルの先頭に置く必要があるため
     冒頭のテーマ情報コメントの直後に1行入れている（「HTML版デザインの反映：書体の読み込み」）
   色：地＝湯けむりの白／文字＝夜の海／アクセント＝提灯（塗りは濃い提灯色）
   書体：本文・見出しとも Noto Serif JP（明朝。SWELL設定のベースフォント。2026-09-15 現行サイトに合わせて変更）／英字 Bodoni Moda Italic
         セクションタイトル（is-style-section_ttl）の日本語だけ Zen Old Mincho（2026-09-15 依頼者の指定）
   ===================================================================== */

:root {
	--atg-mist: #f2f3f0;        /* 地：湯けむりの白 */
	--atg-paper: #ffffff;
	--atg-ink: #1d2b33;         /* 文字：夜の海 */
	--atg-ink-2: #4a5860;
	--atg-line: #d5d2ca;        /* 罫線：櫓の白木 */
	--atg-lantern: #c8501a;     /* 提灯：大きな文字・線 */
	--atg-lantern-deep: #a8410f;/* 提灯：塗り（白文字で約6:1） */
	--atg-lantern-deeper: #8c360c;
	--atg-glow: #f08a4b;        /* 濃い面の上の提灯色 */
	--atg-night: #1d2b33;
	--atg-night-deep: #152028;
	--atg-on-night: #e4e8e7;
	--atg-on-night-2: #b3bec1;
	--atg-f-display: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--atg-f-latin: "Bodoni Moda", "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif; /* 英字は Bodoni、日本語は Zen Old Mincho */
}

/* ---------- 地の色 ----------
   ページの地の色は 外観 > カスタマイズ の背景色（湯けむりの白 #f2f3f0）で決める。
   フルワイドブロックは「背景色の不透明度 0」で地の色を見せている（2026-09-15 に208か所を設定。以前の「白を湯けむりの白に置き換えるCSS」は廃止）。
   白くしたい帯は、ブロックで背景色を白・不透明度100にすればそのまま白になる */
/* 例外：お問い合わせ（固定ページ2540）は、埋め込みフォームの白に合わせてページ全体を白に（2026-09-15 依頼者の指定） */
#body_wrap.page-id-2540 {
	background-color: #ffffff;
}
/* 薄い灰色の箱は、湯けむりの白の地の上では汚れて見えるので白い面に */
.post_content .has-swl-gray-background-color {
	background-color: var(--atg-paper) !important;
}

/* ---------- 文字組み ---------- */
.post_content {
	letter-spacing: .04em;
}
.post_content p {
	line-height: 1.95;
}
.post_content h1,
.post_content h2,
.post_content h3,
.post_content .swell-block-step__title,
.c-hotelCard__title,
.c-otherHotels__heading,
.c-headLogo__link {
	font-family: var(--atg-f-display);
}

/* ページ名（本文の中の h1。例：モデルコース名）は大見出しとして大きく・明朝で */
.post_content h1.wp-block-heading {
	font-weight: 500 !important;
	font-size: clamp(28px, 4vw, 48px) !important;
	line-height: 1.5 !important;
	letter-spacing: .1em !important;
	color: var(--atg-ink) !important;
	text-wrap: balance;
	word-break: auto-phrase;
}
/* 見出しの下の余白の初期値（2026-09-15 依頼者の指定）。H3＝1.5em／H4〜H6＝1em
   SWELLの初期値（H3＝2em・H4＝1.5em）を変えるだけなので、エディターの「ブロック下の余白量」を指定した見出しは、そちらが優先される */
.post_content h3 {
	margin-bottom: 1.5em;
}
.post_content h4,
.post_content h5,
.post_content h6 {
	margin-bottom: 1em;
}
/* モデルコースの手順の見出し（本文の書体をゴシックにしたので、見出しは明朝に戻す） */
.post_content .swell-block-step__title {
	font-weight: 500 !important;
	letter-spacing: .06em;
}

/* ---------- セクション見出し：英字は Bodoni の斜体、日本語は明朝（斜めにしない）＋湯けむりの縦線 ---------- */
.post_content .is-style-section_ttl {
	font-family: var(--atg-f-latin) !important;
	font-style: italic;
	font-synthesis: none;           /* 日本語は斜体を作らない（まっすぐのまま） */
	font-weight: 500 !important;
	font-size: clamp(28px, 3.8vw, 46px) !important;
	line-height: 1.35 !important;
	letter-spacing: .02em !important;
	/* 文字色は指定しない（ブロックの文字色・フルワイドの文字色がそのまま効くように。2026-09-15） */
	text-wrap: balance;
	word-break: auto-phrase;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
}
.post_content .is-style-section_ttl .swl-fz {
	font-size: inherit !important;  /* 中の「大きい文字」指定で二重に大きくならないように */
}
/* 見出しの中で文字サイズ「極小」「小」を選んだ部分は、英字の下に添える日本語の小見出しにする（例：Gallery＋改行＋フォトギャラリー）（2026-09-15） */
.post_content .is-style-section_ttl .swl-fz.u-fz-xs,
.post_content .is-style-section_ttl .swl-fz.u-fz-s {
	display: inline-block;
	margin-top: 6px;
	font-size: clamp(16px, 1.6vw, 19px) !important;
	letter-spacing: .12em;
	color: var(--atg-ink-2);
}
.post_content .is-style-section_ttl .has-swl-main-color {
	color: var(--atg-lantern) !important;
}
.post_content .is-style-section_ttl::before {
	display: none !important;
}
.post_content .is-style-section_ttl::after {
	content: "" !important;
	display: block !important;
	position: static !important;
	width: 1px !important;
	height: 36px !important;
	margin: 20px auto 0 !important;
	border: 0 !important;
	background: currentColor !important;
	opacity: .45;
	transform: none !important;
}
/* 湯けむりの縦線は、ブロックエディターの「配置」が中央揃え（何も選んでいない＝SWELL標準の中央も含む）のときだけ出す。
   左揃え・右揃えにした見出しには出さない（2026-09-15 依頼者の指定。HTML版の小見出しと同じ） */
.post_content .is-style-section_ttl.has-text-align-left::after,
.post_content .is-style-section_ttl.has-text-align-right::after {
	display: none !important;
}

/* カラム・カードの中の見出しは小さめに（大見出しの大きさにならないように） */
.post_content .swell-block-column .is-style-section_ttl,
.post_content .wp-block-column .is-style-section_ttl,
.post_content .c-card .is-style-section_ttl {
	font-size: clamp(19px, 1.9vw, 23px) !important;
	line-height: 1.6 !important;
}
.post_content .swell-block-column .is-style-section_ttl::after,
.post_content .wp-block-column .is-style-section_ttl::after,
.post_content .c-card .is-style-section_ttl::after {
	height: 20px !important;
	margin-top: 12px !important;
}
/* 見出しの直後にある短い区切り線は、湯けむりの縦線と二重になるので隠す */
.post_content .is-style-section_ttl + .wp-block-separator {
	display: none !important;
}

/* ---------- ヘッダー ---------- */
.l-header,
.l-fixHeader {
	background-color: rgba(242, 243, 240, .92) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
/* ロゴの文字は現行サイト（400・16.5px）に近い標準の太さと大きさ（SWELL本体の文字ロゴは太字700・PC 24px なので、同じ強さの指定で上書き。2026-09-15）
   スマホ幅（480px以下）は元からある指定の 15px／360px以下 14px のまま */
.-txt .c-headLogo__link {
	font-weight: 400;
	font-size: 17px;
}
.c-headLogo__link {
	letter-spacing: .12em;
	color: var(--atg-ink) !important;
}
.c-gnav > .menu-item > a {
	color: var(--atg-ink);
	letter-spacing: .04em;
}

/* ---------- パンくず ----------
   背景なし・ページ下部に表示は、外観 > カスタマイズ > パンくずリスト の設定で指定（2026-09-15） */
.p-breadcrumb__text,
.p-breadcrumb__text a {
	color: var(--atg-ink-2) !important;
	font-size: 13px;
	letter-spacing: .06em;
}
a.p-breadcrumb__text:hover {
	color: var(--atg-lantern-deep) !important;
}

/* ---------- ボタン ----------
   ボタンの色はここでは指定しない（管理画面の設定で決まる）。
   ・塗りのボタン … メインカラー（外観 > カスタマイズ > サイト全体設定 > 基本カラー）
   ・線のボタン（紺）… ボタンを選んで右の設定で「青」を選ぶ。
     「青」の色は SWELL設定 > エディター設定 > ボタン > カラー設定 で #1d2b33（紺）に登録済み。
   ここで指定するのは、設定では変えられない「塗りのボタンの影なし」「文字の間隔」「マウスを乗せたとき少し暗くする」だけ。 */
.swell-block-button .swell-block-button__link {
	letter-spacing: .1em;
}
.swell-block-button.is-style-btn_normal .swell-block-button__link {
	box-shadow: none !important;      /* SWELL標準のうっすらした影を消す（HTML版は平らなデザイン） */
}
.swell-block-button.is-style-btn_normal .swell-block-button__link:hover {
	filter: brightness(.88);          /* 押せる合図。色を決め打ちしないので、メインカラーを変えても追従する */
}

.post_content .is-style-more_btn a {
	color: var(--atg-ink) !important;
	background: transparent !important;
	border: 1px solid var(--atg-ink) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	letter-spacing: .1em;
}
.post_content .is-style-more_btn a:hover {
	color: var(--atg-mist) !important;
	background: var(--atg-ink) !important;
}

/* ---------- お知らせの開閉（掲示板風） ---------- */
.post_content .swell-block-accordion {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	background: var(--atg-paper);
	border: 1px solid var(--atg-line);
}
/* 開閉ブロックが続けて並ぶときは、すき間なく1枚の掲示板に */
.post_content .swell-block-accordion:has(+ .swell-block-accordion) {
	margin-bottom: 0 !important;
	border-bottom: 0 !important;
}
.post_content .swell-block-accordion + .swell-block-accordion {
	margin-top: 0 !important;
}
.post_content .swell-block-accordion__item {
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}
.post_content .swell-block-accordion__item + .swell-block-accordion__item {
	border-top: 1px solid var(--atg-line) !important;
}
.post_content .swell-block-accordion__title {
	padding: 18px 22px !important;
	color: var(--atg-ink) !important;
	background: transparent !important;
	border: 0 !important;
	font-size: 16.5px;
	font-weight: 500;
	line-height: 1.7;
}
.post_content .swell-block-accordion__title:hover .swell-block-accordion__label {
	color: var(--atg-lantern-deep);
}
.post_content .swell-block-accordion__icon {
	color: var(--atg-ink) !important;
}
.post_content .swell-block-accordion__body {
	padding: 0 22px 20px !important;
	color: var(--atg-ink-2);
	background: transparent !important;
	border: 0 !important;
	font-size: 16px;
}

/* ---------- お知らせ・Events のカード（全カード同じ大きさ・影なし） ---------- */
.p-postList.-type-card .p-postList__item {
	display: flex;
}
/* 写真の枠は縦長（1:1.414＝A判のポスターと同じ比率。2026-09-15 依頼者の指定：現行サイトと同じ縦長に）
   SWELLの「カード型リストでの画像比率」（外観 > カスタマイズ > 投稿・記事一覧）には縦長の選択肢がないため、ここだけCSSで指定。
   このCSSがある間は、その設定（今は一眼 3:2）は効かない */
.p-postList.-type-card {
	--card_posts_thumb_ratio: 141.4%;
}
.p-postList.-type-card .p-postList__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--atg-paper);
	box-shadow: none !important;
}
.p-postList.-type-card .p-postList__title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	color: var(--atg-ink);
	text-wrap: balance;
	word-break: auto-phrase;
}
.p-postList.-type-card .p-postList__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 14px 16px 18px !important; /* 白いカードの中で文字が端に付かないように */
}
.p-postList.-type-card .p-postList__meta {
	margin-top: auto;                 /* 題名の行数が違っても日付の位置をそろえる */
}
.p-postList.-type-card .p-postList__link:hover .p-postList__title {
	color: var(--atg-lantern-deep);
}
/* カテゴリーのタグ（お知らせ・イベント）は SWELL標準の「写真の上」。色は 外観 > カスタマイズ > 投稿・記事一覧 の設定で指定（2026-09-15 CSSを削除） */

/* ---------- 情報の表（2列の表は、左の項目名を小さく・罫線だけのすっきりした表に） ----------
   本文エリア（.l-content）の表だけが対象。フッターのブログパーツには効かせない（2026-09-15） */
.l-content .post_content .wp-block-table table {
	border-collapse: collapse;
}
.l-content .post_content .wp-block-table th,
.l-content .post_content .wp-block-table td {
	padding: 14px 8px !important;
	font-size: 16px;
	line-height: 1.9;
	vertical-align: top;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--atg-line) !important;
}
.l-content .post_content .wp-block-table tr:first-child > th,
.l-content .post_content .wp-block-table tr:first-child > td {
	border-top: 1px solid var(--atg-line) !important;
}
.l-content .post_content .wp-block-table tr > :first-child:nth-last-child(2) {
	width: 8.5em;
	white-space: nowrap;              /* 項目名（チェックアウト等）を途中で折らない */
	font-size: 14.5px;
	font-weight: 400;
	letter-spacing: .1em;
	color: var(--atg-ink-2);
}

/* ---------- 宿の詳細：特徴カード（紙の白い面だけに。影は追加CSSから削除済み） ---------- */
.post_content .c-card {
	border: 0 !important;
}

/* ---------- 散策マップ一覧：スライダー下の帯をなくす（2026-09-15） ----------
   スライダーの下には切り替えの点（●●●）用の40pxの余白がある。散策マップはすぐ下の面が背景画像なので、
   湯けむりの白の帯として見えていた。スライダーの面を透明にし、下の面を40px引き上げて点を下の面の上に載せる */
.post-type-archive-map .l-content > .p-blogParts.post_content > .swell-block-fullWide:first-child {
	background-color: transparent !important;
	margin-bottom: 0 !important;
}
.post-type-archive-map .l-content > .p-blogParts.post_content > .swell-block-fullWide:first-child .swell-block-fullWide__inner > * {
	margin-bottom: 0 !important; /* スライダーの下の余白（32px）が枠の外にはみ出して、すき間になるのを防ぐ */
}
.post-type-archive-map .l-content > .p-blogParts.post_content > .swell-block-fullWide:first-child + .swell-block-fullWide {
	margin-top: -40px !important;
}

/* ---------- 泊まる一覧：宿カード（PCは全カード同じ大きさ／スマホは写真の枠だけそろえる） ---------- */
/* 泊まる一覧だけ、中身の幅を現行サイトと同じくらい（サイト幅 1200px）に広げる。
   SWELLの「記事コンテンツ幅」（900px）の設定を変えると、宿の詳細ページなど全ページの文章の幅も広がるため、ここだけCSSで指定。 */
@media screen and (min-width: 769px) {
	.post-type-archive-hotel .l-mainContent.l-article {
		max-width: var(--container_size) !important;
	}
}
.c-hotelCard {
	border: 0 !important;
	background: var(--atg-paper) !important;
}
.c-hotelCard__title {
	font-weight: 500 !important;
	font-size: clamp(19px, 2vw, 23px) !important;
	line-height: 1.5 !important;
	letter-spacing: .06em;
	color: var(--atg-ink) !important;
}
.c-hotelCard__title,
.c-otherHotels__title {
	text-wrap: balance;
	word-break: keep-all;             /* Safari：空白の位置でだけ折る */
	word-break: auto-phrase;          /* Chrome：言葉の切れ目で折る（対応しないブラウザはこの行を無視） */
	overflow-wrap: anywhere;          /* はみ出し防止 */
}
.c-hotelCard__title a:hover {
	color: var(--atg-lantern-deep);
}
.c-hotelCard__catch {
	color: var(--atg-ink) !important;
	line-height: 1.9 !important;
}
.c-hotelCard__info {
	border-color: var(--atg-line) !important;
}
.c-hotelCard__infoLabel {
	font-weight: 400 !important;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--atg-ink-2) !important;
}
@media screen and (min-width: 769px) {
	.c-hotelCardsList {
		display: grid !important;
		grid-auto-rows: 1fr;              /* いちばん高いカードに全カードをそろえる */
		gap: clamp(20px, 2.4vw, 32px) !important;
	}
	.c-hotelCardItem {
		display: grid;
	}
	.c-hotelCard {
		height: 100%;
	}
	.c-hotelCard__image {
		width: 50% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: 4 / 3;              /* 写真の枠は 4:3（2026-09-14 依頼者の指定）。文章が長い宿があるときは、その高さに全カードがそろう */
		align-self: stretch;
	}
	.c-hotelCard__body {
		width: 50% !important;
		padding: clamp(24px, 3vw, 40px) !important;
	}
}
@media screen and (max-width: 768px) {
	.c-hotelCard__image {
		height: auto !important;
		aspect-ratio: 4 / 3;              /* 写真の枠は全カード同じ（文章の長さで高さが変わるのは自然なまま） */
	}
	.c-hotelCard__buttons .swell-block-button {
		max-width: none !important;
	}
}

/* ---------- 泊まる一覧：絞り込み（チェックをボタン風に） ---------- */
.c-filterArea {
	background: var(--atg-paper) !important;
	border: 1px solid var(--atg-line) !important;
}
.c-filterAccordion__header {
	color: var(--atg-ink) !important;
	font-weight: 500 !important;
}
.c-filterAccordion__header:hover {
	color: var(--atg-lantern-deep) !important;
}
.c-filterOption {
	position: relative;
}
.c-filterOption input[type="checkbox"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	margin: 0 !important;
}
.c-filterOption__text {
	display: inline-block;
	padding: 5px 14px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--atg-ink);
	background: var(--atg-mist);
	border: 1px solid var(--atg-line);
	cursor: pointer;
}
.c-filterOption:hover .c-filterOption__text {
	border-color: var(--atg-ink);
}
.c-filterOption input:checked + .c-filterOption__text {
	color: #fff;
	background: var(--atg-lantern-deep);
	border-color: var(--atg-lantern-deep);
}
.c-filterOption input:focus-visible + .c-filterOption__text {
	outline: 2px solid var(--atg-lantern);
	outline-offset: 2px;
}

/* ---------- 他の宿・他のスポット（見出しは英字＋日本語） ---------- */
.c-otherHotels__img {
	border: 0 !important;
	box-shadow: none !important;
}
.c-otherHotels__item {
	text-align: left !important;
}
.c-otherHotels__title {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	text-wrap: balance;
	word-break: auto-phrase;          /* 名前を言葉の切れ目で折る（対応ブラウザ） */
}
.c-otherHotels__title a,
.c-otherHotels__title a:hover {
	color: var(--atg-ink) !important;
	text-decoration: none !important;
}
.c-otherHotels__item:hover .c-otherHotels__title a {
	color: var(--atg-lantern-deep) !important;
}
/* ※この見出しは本文エリアの外（テンプレート側）にあるので .post_content を付けない */
.c-otherHotels__heading {
	font-family: var(--atg-f-display) !important;
	font-style: normal;
	font-weight: 500 !important;
	font-size: clamp(16px, 1.6vw, 19px) !important;
	line-height: 1.6 !important;
	letter-spacing: .12em !important;
	color: var(--atg-ink-2) !important;
	background: none !important;
	border: 0 !important;
}
.c-otherHotels__heading::after {
	content: "" !important;
	display: block !important;
	position: static !important;
	width: 1px !important;
	height: 28px !important;
	margin: 16px auto 0 !important;
	border: 0 !important;
	background: currentColor !important;
	opacity: .45;
	transform: none !important;
}
.single-hotel .c-otherHotels__heading::before,
.single-guide .c-otherHotels__heading::before,
.single-gourmet .c-otherHotels__heading::before,
.single-map .c-otherHotels__heading::before {
	display: block !important;
	margin-bottom: 6px;
	font-family: var(--atg-f-latin);
	font-style: italic;
	font-size: clamp(30px, 3.4vw, 42px);
	letter-spacing: .01em;
	line-height: 1.2;
	color: var(--atg-ink);
}
.single-hotel .c-otherHotels__heading::before { content: "Stay"; }
.single-guide .c-otherHotels__heading::before { content: "Enjoy"; }
.single-gourmet .c-otherHotels__heading::before { content: "Eat"; }
.single-map .c-otherHotels__heading::before { content: "Model course"; }

@media screen and (min-width: 768px) {
	.c-otherHotels--col4 .c-otherHotels__grid {
		grid-template-columns: repeat(auto-fit, minmax(180px, 260px)) !important;
		justify-content: center;
	}
}

/* ---------- 翻訳の切替（JA）をヘッダーになじませる ---------- */
.menu-item-gtranslate .gt_float_switcher {
	box-shadow: none !important;
	background: transparent !important;
}

/* ---------- ページ上部へ戻るボタン ----------
   スマホ下部の固定メニューの色は、外観 > カスタマイズ > フッター の設定で指定（2026-09-15 CSSから設定へ移行） */
#pagetop.c-fixBtn {
	color: #fff !important;
	background: var(--atg-lantern-deep) !important;
	border: 1px solid var(--atg-lantern-deep) !important;
	opacity: 1 !important;
}
#pagetop.c-fixBtn:hover {
	color: var(--atg-lantern-deep) !important;
	background: #fff !important;
	border-color: var(--atg-lantern-deep) !important;
	opacity: 1 !important;
}

/* ---------- フッター（夜の海の濃紺） ----------
   2026-09-15：住所・メニューのブログパーツ（ID 2560）を「フッター直前」から「フッター」のウィジェット枠へ移した
   （パンくずをページ下部に置くと、紺色の部分より上に出るようにするため）。
   色は外観 > カスタマイズ > フッター の設定で指定：ウィジェットエリア背景 #1d2b33・文字 #b3bec1／コピーライト背景 #152028・文字 #b3bec1
   ここでは、ブログパーツを枠いっぱいに広げることと、リンクと罫線の色だけを指定 */
.l-footer__widgetArea {
	padding: 0 !important;
}
.l-footer__widgetArea .w-footer {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.l-footer__widgetArea .w-footer__box {
	width: 100% !important;
	padding: 0 !important;
}
.l-footer__widgetArea .c-widget,
.l-footer__widgetArea .p-blogParts.post_content > * {
	margin-bottom: 0 !important;
}
.l-footer__widgetArea .swell-block-fullWide {
	width: auto !important;
	left: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-color: transparent !important; /* ブログパーツ側の薄い灰色を消し、設定の色を見せる */
	color: var(--atg-on-night);
}
.l-footer__widgetArea .swell-block-fullWide p,
.l-footer__widgetArea .swell-block-fullWide li {
	color: var(--atg-on-night-2);
}
.l-footer__widgetArea .swell-block-fullWide a,
.l-footer__widgetArea .swell-block-fullWide [class*="-color"] {
	color: var(--atg-on-night) !important;
	text-decoration: none;
}
.l-footer__widgetArea .swell-block-fullWide a:hover {
	color: var(--atg-glow) !important;
}
.l-footer__widgetArea .swell-block-fullWide li,
.l-footer__widgetArea .swell-block-fullWide ul,
.l-footer__widgetArea .swell-block-fullWide hr {
	border-color: rgba(228, 232, 231, .18) !important;
}
.l-footer .copyright {
	font-size: 12px;
	letter-spacing: .06em;
}

/* ▲▲▲ HTML版デザインの反映（2026-09-11 追加）ここまで ▲▲▲ */


/* ==========================================================
   一覧ページ（泊まる・楽しむ・食べる・散策マップ）を固定ページ化（2026-09-24）
   ショートコードの見出しに SWELL の h2 デザイン（帯）が当たらないようにする
   ========================================================== */
.post_content .c-filterArea__title,
.post_content .c-guideSection__title,
.post_content .c-gourmetSection__title {
	background: none;
	color: #333;
	border: none;
	border-radius: 0;
	padding: 0;
	text-shadow: none;
	font-weight: bold;
}
.post_content .c-filterArea__title::before,
.post_content .c-filterArea__title::after,
.post_content .c-guideSection__title::before,
.post_content .c-guideSection__title::after,
.post_content .c-gourmetSection__title::before,
.post_content .c-gourmetSection__title::after {
	content: none;
	display: none;
}
.post_content .c-filterArea__title {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color_main, #9d7a4b);
	font-size: 1.1rem;
	text-align: left;
}
.post_content .c-guideSection__title,
.post_content .c-gourmetSection__title {
	margin: 0 0 40px;
	font-size: 1.6rem;
	text-align: center;
}

/* カード内の区切り線に、記事本文用の大きな余白が当たらないようにする */
.post_content .c-guideCard__separator,
.post_content .c-gourmetCard__separator,
.post_content .c-mapCard__separator {
	margin: 0 0 15px;
	border: 0;
	border-top: 1px solid #e5e5e5;
	height: 0;
	background: none;
}

/* 一覧カードの文字も本文に合わせて少し大きく（2026-09-24） */
.post_content .c-guideCard__catch,
.post_content .c-gourmetCard__catch,
.post_content .c-mapCard__catch { font-size: 1.05rem; }
.post_content .c-guideCard__name,
.post_content .c-gourmetCard__name,
.post_content .c-mapCard__name { font-size: 1.15rem; }
.post_content .c-guideCard__info,
.post_content .c-gourmetCard__info { font-size: 0.95rem; }
.post_content .c-guideCard__btn,
.post_content .c-gourmetCard__btn,
.post_content .c-mapCard__btn { font-size: 0.95rem; }
.post_content .c-hotelCard__catch { font-size: 1.05rem; }
.post_content .c-hotelCard__infoValue { font-size: 0.95rem; }

/* 一覧の見出し・カードの太字を、サイト標準（500）にそろえる（2026-09-24） */
.post_content .c-guideSection__title,
.post_content .c-gourmetSection__title,
.post_content .c-filterArea__title,
.post_content .c-filterGroup__label,
.post_content .c-guideCard__catch,
.post_content .c-gourmetCard__catch,
.post_content .c-mapCard__catch,
.post_content .c-guideCard__name,
.post_content .c-gourmetCard__name,
.post_content .c-mapCard__name,
.post_content .c-hotelCard__catch strong,
.post_content .c-hotelCard__catch {
	font-weight: 500;
}

/* 白いボタン（エディターのボタン色「緑」の枠を白ボタンとして使う・2026-09-24）
   背景＝白、文字と枠線＝濃いオレンジ。写真や色の上でも読めるようにする */
.swell-block-button.green_ .swell-block-button__link,
.post_content .swell-block-button.green_ .swell-block-button__link {
	background: #fff !important;
	background-image: none !important;
	color: #a8410f !important;
	border: 1px solid #a8410f !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.swell-block-button.green_ .swell-block-button__link:hover,
.post_content .swell-block-button.green_ .swell-block-button__link:hover {
	background: #fdf1ea !important;
	color: #8e360c !important;
	border-color: #8e360c !important;
}

/* 一覧カード内のボタンをもう少し広く（2026-09-24） */
.post_content .c-guideCard__btn,
.post_content .c-gourmetCard__btn,
.post_content .c-mapCard__btn {
	min-width: 220px;
	max-width: 100%;
	padding-left: 32px;
	padding-right: 32px;
}

/* ボタンの文字も本文まわりと同じ太さ（500）にそろえる（2026-09-24） */
.swell-block-button__link,
.post_content .swell-block-button__link,
.post_content .c-guideCard__btn,
.post_content .c-gourmetCard__btn,
.post_content .c-mapCard__btn,
.c-hotelSpec__btn,
.c-filterResetBtn,
.c-filterAccordion__header {
	font-weight: 500;
}

/* 温泉むすめページ：グッズは画像と文字を1枚の白いカードに（2026-09-25）
   カード＝グッズの入った列そのもの。中に画像のスライダー→文字の順で入る */
.post_content .swell-block-column:has(.c-goodsCardBody) {
	display: flex;
	flex-direction: column;
	background: #fff;
	padding: 12px 12px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.post_content .swell-block-column:has(.c-goodsCardBody) .smb-spider-slider {
	margin-bottom: 0;
}
.post_content .c-goodsCardBody {
	flex: 1;
	background: #fff;
	margin-top: 12px;
	padding: 16px 8px 20px;
	border-top: 1px solid #e3e6e4;
}
.post_content .c-goodsCardBody > :last-child {
	margin-bottom: 0;
}
.post_content .c-goodsShop {
	font-size: 0.95rem;
	line-height: 1.9;
	padding-top: 14px;
	border-top: 1px solid #e3e6e4;
}

/* 温泉むすめページ：グッズのスライダーは高さをそろえる（2026-09-25）
   商品画像の縦横比がばらばらなので、正方形の枠に収める */
.post_content .swell-block-column:has(.c-goodsCardBody) .spider__slide {
	aspect-ratio: 1 / 1;
}
.post_content .swell-block-column:has(.c-goodsCardBody) .spider__slide .smb-spider-slider__figure-wrapper {
	height: 100%;
}
.post_content .swell-block-column:has(.c-goodsCardBody) .spider__figure {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

/* スライダーの左右の矢印をはっきり見せる（2026-09-25） */
.post_content .spider__arrow {
	width: 40px;
	height: 40px;
	background: var(--atg-lantern-deep, #a8410f);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	color: #fff;
	opacity: 1;
	transition: background-color .2s ease;
}
.post_content .spider__arrow:hover {
	background: var(--atg-lantern, #c8501a);
	color: #fff;
}
.post_content .spider__arrow::before {
	width: 10px;
	height: 10px;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	margin: 0;
}
.post_content .spider__arrow[data-direction="prev"]::before {
	border-width: 0 0 1.6px 1.6px;
	transform: translate(-40%, -50%) rotate(45deg);
}
.post_content .spider__arrow[data-direction="next"]::before {
	border-width: 1.6px 1.6px 0 0;
	transform: translate(-60%, -50%) rotate(45deg);
}
.post_content .spider__dots .spider__dot[data-active="true"] {
	background-color: var(--atg-lantern-deep, #a8410f);
}

/* 温泉むすめページ（page-id-3359）はグッズの背景が緑（公式サイトの熱川 灯と同じ #3eb269）なので、差し色をオレンジ→紺にする（2026-09-25） */
.page-id-3359 .post_content .spider__arrow {
	background: var(--atg-ink, #1d2b33);
}
.page-id-3359 .post_content .spider__arrow:hover {
	background: #33454f;
}
.page-id-3359 .post_content .spider__dots .spider__dot[data-active="true"] {
	background-color: var(--atg-ink, #1d2b33);
}
/* グッズカードのリンク（施設名・電話）は白い面の上なので、分かるようにオレンジ＋下線（2026-09-25 依頼者指定） */
.page-id-3359 .post_content .c-goodsCardBody a,
.page-id-3359 .post_content .c-goodsShop a {
	color: var(--atg-lantern-deep, #a8410f);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.page-id-3359 .post_content .c-goodsCardBody a:hover,
.page-id-3359 .post_content .c-goodsShop a:hover {
	color: var(--atg-lantern, #c8501a);
	text-decoration: none;
}
.page-id-3359 .post_content .swell-block-button__link {
	background-color: var(--atg-ink, #1d2b33) !important;
	border-color: var(--atg-ink, #1d2b33) !important;
	color: #fff !important;
}
.page-id-3359 .post_content .swell-block-button__link:hover {
	background-color: #33454f !important;
	border-color: #33454f !important;
}

/* 温泉むすめページ：下部のバナー3つは高さをそろえる（2026-09-25） */
.page-id-3359 .post_content .swell-block-bannerLink .c-bannerLink__figure,
.page-id-3359 .post_content .swell-block-bannerLink .c-bannerLink {
	height: 160px;
}
.page-id-3359 .post_content .swell-block-bannerLink .c-bannerLink__img {
	height: 100%;
	object-fit: cover;
}
@media (max-width: 599px) {
	.page-id-3359 .post_content .swell-block-bannerLink .c-bannerLink__figure,
	.page-id-3359 .post_content .swell-block-bannerLink .c-bannerLink {
		height: 120px;
	}
}