/* =====================================================================
   湯ノ道 main.css
   SP = GEN カンプ（375px 基準）の値をそのまま使う。
   PC = 1024px 以上。W1920 想定・コンテンツ幅 1200px（2026-10-01 GEN 回答）。
   動きは spec の A〜K に対応（各ブロックの見出しに記号を書いた）。
   ===================================================================== */

:root {
	--serif: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--sans: "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic", sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hd: 76px;
	--pad: 24px;
	--max: 1200px;
	--line: #d8d8d8;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: var(--hd); -webkit-text-size-adjust: 100%; }
body {
	background: #fff;
	color: #000;
	font-family: var(--serif);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	padding-top: var(--hd);
	overflow-x: clip;
}
body.is-menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; background: #000; color: #fff; padding: 10px 16px; font-size: 13px; }
.skip:focus { top: 8px; }

.wrap { padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- ブロック（TOP は固定ページ「トップ」の本文で組む）。ブロックの既定 CSS は読み込まないので最小限の初期化だけ ---------- */
.yn-blocks figure { margin: 0; }
.yn-blocks .wp-block-image img { width: 100%; height: auto; }
.yn-blocks .wp-block-buttons, .yn-blocks .wp-block-button { display: block; }

/* ---------- 共通タイプ ---------- */
.t-catch { font-weight: 400; font-size: 40px; line-height: 50px; letter-spacing: -.15em; }
.t-h { font-weight: 400; font-size: 28px; line-height: 36px; letter-spacing: -.1em; }
.t-st { font-weight: 400; font-size: 25px; line-height: 38px; letter-spacing: -.08em; }
.t-body { font-size: 14px; line-height: 2; letter-spacing: .02em; }

/* 罫線に載せる（1行1要素） */
.ruled span { display: block; border-bottom: 1px solid #000; padding-left: 2px; }
/* ブロックスタイル「罫線」: 行の高さごとに下端へ 1px（改行・折り返しどちらでも行ごとに引かれる） */
.is-style-ruled {
	--rule: #000;
	padding-left: 2px;
	background: linear-gradient(to bottom, transparent calc(1lh - 1px), var(--rule) calc(1lh - 1px)) 0 0 / 100% 1lh;
}

/* セクション見出しの行 */
.h { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #000; padding-bottom: 10px; }
.h a { font-size: 12px; margin-bottom: 4px; }

/* ---------- 画像枠 ---------- */
.media { overflow: hidden; position: relative; background: #f4f4f2; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.noimg { display: grid; place-items: center; }
.noimg svg { height: 34%; width: auto; opacity: .16; }

/* ---------- A テキストリンク ---------- */
.ln , .yn-ln a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 2px;
	transition: opacity .1s;
}
@keyframes yn-line { from { background-size: 0 1px; } to { background-size: 100% 1px; } }

/* ---------- B 黒ボタン / C 白ボタン ---------- */
.btn, .yn-btn .wp-block-button__link, .is-style-yn-arrow .wp-block-button__link {
	display: flex; justify-content: space-between; align-items: center;
	height: 60px; padding: 0 22px;
	background: #000; color: #fff;
	font-size: 14.5px; letter-spacing: .02em;
	transition: background-color .25s var(--ease);
}
.btn::after, .yn-btn .wp-block-button__link::after, .is-style-yn-arrow .wp-block-button__link::after { content: ""; flex: 0 0 auto; }
/* 右端が横線 */
.btn-line::after { width: 28px; height: 1px; background: #fff; transition: width .3s var(--ease); }
/* 右端が＞（TOP） */
.btn-arrow, .yn-btn-arrow .wp-block-button__link, .is-style-yn-arrow .wp-block-button__link { height: 76px; }
.btn-arrow::after, .btn-white::after, .yn-btn-arrow .wp-block-button__link::after, .is-style-yn-arrow .wp-block-button__link::after {
	width: 9px; height: 9px; margin-right: 4px;
	border-top: 1px solid currentColor; border-right: 1px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s var(--ease);
}
.btn-white { background: #fff; color: #000; }
.btn:active, .yn-btn .wp-block-button__link:active, .is-style-yn-arrow .wp-block-button__link:active { background: #333; }
.btn-white:active { background: #e6e6e6; }

/* =====================================================================
   I ヘッダー（固定）
   ===================================================================== */
.hd {
	position: fixed; top: 0; left: 0; right: 0; z-index: 60;
	height: var(--hd); background: #fff;
	box-shadow: 0 1px 0 rgba(224, 224, 224, 0);
	transition: box-shadow .2s;
}
.hd.is-scrolled { box-shadow: 0 1px 0 #e0e0e0; }
.is-menu-open .hd { box-shadow: none; }
.admin-bar .hd { top: 32px; }
@media (max-width: 782px) { .admin-bar .hd { top: 46px; } }
.hd-in { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; }
.hd .mk { width: 28px; height: 52px; }
.hd .mk svg { width: 100%; height: 100%; }
.gnav { display: none; }

/* G メニューボタン */
.menu-btn { font-size: 12px; letter-spacing: .12em; display: flex; align-items: center; gap: 10px; height: 44px; }
.menu-btn i { position: relative; width: 22px; height: 7px; }
.menu-btn i::before, .menu-btn i::after {
	content: ""; position: absolute; left: 0; width: 22px; height: 1px; background: #000;
	transition: transform .3s var(--ease), top .3s var(--ease), bottom .3s var(--ease);
}
.menu-btn i::before { top: 0; }
.menu-btn i::after { bottom: 0; }
.menu-btn[aria-expanded="true"] i::before { top: 3px; transform: rotate(20deg); }
.menu-btn[aria-expanded="true"] i::after { bottom: 3px; transform: rotate(-20deg); }

/* =====================================================================
   G メニュー（オーバーレイ）
   ===================================================================== */
.menu {
	position: fixed; inset: 0; z-index: 50;
	background: #fff; overflow-y: auto; overscroll-behavior: contain;
	padding-top: var(--hd);
	opacity: 0; transition: opacity .2s;
}
.admin-bar .menu { top: 32px; }
@media (max-width: 782px) { .admin-bar .menu { top: 46px; } }
/* ログイン中・600px 以下: 管理バーは固定されず流れて消える（WP 標準）。ヘッダーとメニューは
   「46px − スクロール量（下限0）」に追従させる＝JS が --yn-ab-top を更新（2026-10-05 okada 指摘） */
@media (max-width: 600px) { .admin-bar .hd, .admin-bar .menu { top: var(--yn-ab-top, 46px); } }
.menu.is-open { opacity: 1; transition-duration: .3s; }
.menu-in { min-height: calc(100dvh - var(--hd)); display: flex; flex-direction: column; }
.menu-nav { padding: 24px 24px 0; }
.menu-nav a { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #000; padding: 22px 2px 10px; }
.menu-nav b { font-weight: 400; font-size: 30px; line-height: 38px; letter-spacing: -.12em; transition: transform .3s var(--ease); }
.menu-nav small { font-size: 11px; color: #777; padding-bottom: 6px; transition: color .3s; }
.menu-now { margin: 40px 24px 0; display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); }
.menu-now .ph { aspect-ratio: 3124 / 1915; } /* 実績カードと同じ画像（2026-10-07 GEN「メニュー内に画像を反映」）。絵を切らない比率 */
.menu-now span { display: block; font-size: 11px; color: #777; }
.menu-now b { display: block; margin-top: 4px; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -.05em; }
.menu-now em { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; color: #444; }
.menu-sub { margin: 36px 24px 0; display: flex; gap: 28px; font-size: 13px; }
.menu-bt { margin: auto 24px 32px; padding-top: 40px; }
/* 項目が上から順に、下から12px上がりながらフェードイン（0.05s間隔） */
.menu-in > *, .menu-nav a { opacity: 0; transform: translateY(12px); }
.menu.is-open .menu-in > *, .menu.is-open .menu-nav a {
	opacity: 1; transform: none;
	transition: opacity .4s var(--ease), transform .4s var(--ease);
	transition-delay: calc(var(--i, 0) * .05s);
}
.menu.is-open .menu-nav { transition-delay: 0s; }

/* =====================================================================
   スクロール表示（初回のみ）・KV フェードイン
   ===================================================================== */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .kv img { opacity: 0; transition: opacity 1s var(--ease); }
.js .kv.is-loaded img { opacity: 1; }

/* =====================================================================
   TOP
   ===================================================================== */
.kv { width: 100%; aspect-ratio: 1125 / 873; background: #9aa3a8; overflow: hidden; }
.kv img { width: 100%; height: 100%; object-fit: cover; }
.intro { padding: 72px 24px 104px; }
.lead-p { margin-top: 36px; color: #222; }
.lead-p p + p { margin-top: 1.1em; }

.sec { padding-bottom: 104px; }
.news a { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.news time { font-size: 13px; line-height: 1.7; letter-spacing: .02em; color: #555; }
.news .tt { font-size: 14.5px; line-height: 1.7; letter-spacing: -.02em; }
.empty { padding: 24px 0; font-size: 14px; color: #555; }

.work { display: block; margin-top: 40px; }
.work .ph { aspect-ratio: 4 / 3; margin: 0 calc(var(--pad) * -1); }
.work .card-t { font-weight: 500; font-size: 20px; line-height: 30px; letter-spacing: -.06em; margin-top: 20px; transition: opacity .3s; }
.work dl { display: grid; grid-template-columns: 52px 1fr; row-gap: 4px; margin-top: 12px; font-size: 12.5px; line-height: 1.8; }
.work dt { color: #777; }
.work .go { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 13px; letter-spacing: .04em; border-bottom: 1px solid #000; padding-bottom: 3px; }
.work .go::after { content: ""; width: 7px; height: 7px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); margin-right: 2px; transition: transform .3s var(--ease); }

.about { background: #000; color: #fff; padding: 104px 0; }
.about .h { border-color: #fff; }
.about .t-st { margin: 44px 0 28px; }
.about .ruled span { border-color: #555; }
.about .t-body { color: #d6d6d6; }
.mem { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; }
.mem .pt { aspect-ratio: 1; background: #fff; }
.mem .pt svg { width: 100%; height: 100%; }
.mem p { margin-top: 12px; font-size: 11px; line-height: 1.6; color: #aaa; }
.mem b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.04em; color: #fff; }
.credit { margin-top: 44px; font-size: 12.5px; line-height: 1.9; letter-spacing: .02em; color: #ccc; }
.credit .c2 { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.credit .c2 span { color: #999; }
.credit .c2 a { color: #fff; background-image: linear-gradient(#777, #777); }
.cheer { margin-top: 28px; padding-top: 20px; border-top: 1px solid #555; font-size: 16px; line-height: 1.8; letter-spacing: -.04em; color: #fff; }

.top-contact { padding-top: 104px; padding-bottom: 96px; }
.top-contact .t-st { margin: 40px 0 28px; }
.who { margin-bottom: 36px; }
.who li { border-bottom: 1px solid var(--line); padding: 18px 0; font-size: 15px; letter-spacing: -.03em; }
.who small { display: block; font-size: 11.5px; color: #777; letter-spacing: .02em; margin-top: 2px; }

/* =====================================================================
   下層共通
   ===================================================================== */
.crumb { font-size: 11px; color: #777; letter-spacing: .02em; display: flex; flex-wrap: wrap; gap: 0 .2em; }
.crumb a { color: #000; }
.crumb .sep { margin: 0 .9em; }
.pagehead { padding-top: 40px; }
.pagehead > p { margin-top: 20px; font-size: 13px; line-height: 1.9; color: #444; }
.pagehead-404 { padding-bottom: 104px; }

.cta { padding: 96px 0; background: #000; color: #fff; }
.cta .t-st { margin-bottom: 28px; }
.cta .ruled span { border-color: #555; }

.ft { border-top: 1px solid #000; padding: 44px 0 36px; }
.ft-top { display: flex; align-items: center; gap: 18px; }
.ft .mk { width: 40px; height: 75px; flex: 0 0 auto; }
.ft .mk svg { width: 100%; height: 100%; }
.ft-tag { font-size: 13px; line-height: 1.8; letter-spacing: -.02em; }
.ft-sns { display: flex; gap: 22px; margin-top: 28px; font-size: 13px; letter-spacing: .04em; }
.ft-links { margin-top: 16px; font-size: 12px; }
.ft small { display: block; margin-top: 20px; font-size: 10px; color: #777; }

/* ---------- お知らせ一覧 ---------- */
.filter { display: flex; gap: 8px; overflow-x: auto; padding-top: 32px; scrollbar-width: none; }
.filter::-webkit-scrollbar { display: none; }
/* D 枠線ボタン・絞り込み */
.chip, .entry .inl, .entry .link a, .entry .is-style-yn-outline .wp-block-button__link {
	transition: background-color .25s var(--ease), color .25s var(--ease);
}
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid #000; font-size: 13px; }
.chip[aria-current] { background: #000; color: #fff; }

.meta { display: flex; gap: 12px; align-items: center; font-size: 12px; color: #555; }
.meta .cat { border: 1px solid #000; color: #000; padding: 1px 8px; font-size: 11px; }

.pickup { display: block; margin-top: 40px; }
.pickup .ph { aspect-ratio: 4 / 3; margin: 0 calc(var(--pad) * -1); }
.pickup .meta { margin-top: 18px; }
.pickup .card-t { margin-top: 10px; font-weight: 500; font-size: 21px; line-height: 32px; letter-spacing: -.07em; transition: opacity .3s; }
.list { margin-top: 36px; border-top: 1px solid #000; }
.list a { display: grid; grid-template-columns: 1fr 88px; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.list .ph { aspect-ratio: 1; }
.list .tt { margin-top: 8px; font-size: 14.5px; line-height: 1.7; letter-spacing: -.03em; }
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 48px 24px 104px; font-size: 14px; }
.pager .page-numbers { min-width: 40px; height: 40px; display: grid; place-items: center; }
.pager .current { background: #000; color: #fff; }
.pager .nx { min-width: 0; height: auto; padding: 0 0 2px; margin: 0 10px; }
.pager .dots { min-width: 20px; }
.pager-gap { height: 104px; }

/* ---------- お知らせ詳細 ---------- */
.art { padding: 36px var(--pad) 0; }
.art-head .meta { margin-bottom: 16px; }
.art-title { font-weight: 400; font-size: 28px; line-height: 40px; letter-spacing: -.1em; }
/* 改行位置が指定されていない長いタイトルでも、折り返した各行に罫線を引く */
.art-title span {
	border-bottom: 0;
	background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(40px - 1px), #000 calc(40px - 1px), #000 40px);
}
.eye { margin: 32px calc(var(--pad) * -1) 0; }
.eye-img { aspect-ratio: 4 / 3; }
.cap, .entry figcaption { margin-top: 8px; font-size: 11px; color: #777; line-height: 1.7; }
.eye .cap { padding: 0 var(--pad); }

/* 本文（ブロックエディタの出力） */
.entry { color: #222; }
.entry > .lead { margin-top: 36px; font-size: 16px; line-height: 1.9; letter-spacing: -.02em; color: #000; }
.entry > p { margin-top: 20px; font-size: 14px; line-height: 2; letter-spacing: .02em; }
.entry > p:first-child { margin-top: 36px; }
.entry h2 { margin-top: 56px; font-weight: 500; font-size: 20px; line-height: 30px; letter-spacing: -.07em; border-bottom: 1px solid #000; padding-bottom: 8px; color: #000; }
.entry h3 { margin-top: 28px; font-weight: 500; font-size: 15px; letter-spacing: .02em; color: #000; }
.entry h3 small { font-size: 11.5px; color: #777; margin-left: 10px; font-weight: 400; }
.entry a:not([class]) { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.entry ol, .entry ul:not([class*="sp"]):not(.fac) { margin-top: 20px; padding-left: 1.5em; font-size: 14px; line-height: 2; }
.entry ol { list-style: decimal; }
.entry ul { list-style: disc; }
.entry li + li { margin-top: 6px; }
.entry .note { margin-top: 16px; font-size: 12px; line-height: 1.9; color: #666; }
.entry .inl { display: inline-block; font-size: 11.5px; line-height: 1; padding: 8px 12px; border: 1px solid #000; margin-left: 8px; white-space: nowrap; background: none; vertical-align: middle; }

/* 番号つきのポイント（className: pts） */
.entry ol.pts { list-style: none; padding: 0; border-top: 1px solid #000; counter-reset: pt; }
.entry ol.pts li { counter-increment: pt; display: grid; grid-template-columns: 36px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; font-size: 13px; line-height: 1.8; color: #444; }
.entry ol.pts li::before { content: counter(pt); font-size: 22px; line-height: 1.2; letter-spacing: -.04em; color: #000; grid-row: span 2; }
.entry ol.pts strong { display: block; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -.04em; color: #000; margin-bottom: 2px; }

/* 表（core/table）= 項目と内容の2列 */
.entry .wp-block-table { margin-top: 24px; }
.entry table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.7; }
.entry td, .entry th { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.entry tr > :first-child { width: 116px; padding-right: 12px; color: #777; }
.entry td small, .entry td .sub { display: block; color: #777; font-size: 11.5px; }

/* 枠線のリンクボタン（className: link）／黒ボタン（className: btnk）／テキストリンク（className: tl） */
.entry .link, .entry .wp-block-buttons { margin-top: 28px; }
.entry .wp-block-buttons:has(.is-style-yn-black) { margin-top: 24px; }
.entry .wp-block-buttons > .wp-block-button { width: 100%; }
/* 段落ボタン時代は本文の段落（字間 .02em・行の高さ 2）を受け継いでいた。ボタンブロックでも同じにする */
.entry .is-style-yn-outline .wp-block-button__link, .entry .is-style-yn-black .wp-block-button__link { letter-spacing: .02em; line-height: 2; }
.entry .link a, .entry .is-style-yn-outline .wp-block-button__link { display: flex; border-radius: 0; text-decoration: none; color: inherit; width: 100%; justify-content: space-between; align-items: center; height: 56px; padding: 0 20px; border: 1px solid #000; font-size: 14px; background: none; }
.entry .link a::after, .entry .is-style-yn-outline .wp-block-button__link::after { content: ""; width: 22px; height: 1px; background: currentColor; }
.entry .btnk { margin-top: 24px; }
.entry .btnk a, .entry .is-style-yn-black .wp-block-button__link { display: flex; border-radius: 0; text-decoration: none; width: 100%; justify-content: space-between; align-items: center; height: 60px; padding: 0 22px; background: #000; color: #fff; font-size: 14.5px; transition: background-color .25s var(--ease); }
.entry .btnk a::after, .entry .is-style-yn-black .wp-block-button__link::after { content: ""; width: 28px; height: 1px; background: #fff; transition: width .3s var(--ease); }
.entry .tl { margin-top: 14px; }

/* 画像（core/image） */
.entry .wp-block-image { margin: 32px calc(var(--pad) * -1) 0; }
.entry .wp-block-image img { width: 100%; }
.entry .wp-block-image figcaption { padding: 0 var(--pad); }

/* 協賛（HTML ブロック .sp） */
.entry .sp { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; margin-top: 20px; }
.entry .sp li { margin: 0; }
.entry .sp .logo { aspect-ratio: 3 / 2; background: #f0f0ee; display: grid; place-items: center; overflow: hidden; color: #9b9b98; font-family: var(--sans); font-size: 10px; letter-spacing: .08em; }
.entry .sp .logo img { width: 100%; height: 100%; object-fit: contain; }
.entry .sp b { display: block; margin-top: 10px; font-weight: 500; font-size: 13px; color: #000; transition: opacity .3s; }
.entry .sp span { display: block; font-size: 11px; color: #777; margin-top: 2px; word-break: break-all; }

/* 施設リスト（HTML ブロック .fac） */
.entry .fac { list-style: none; padding: 0; margin-top: 8px; border-top: 1px solid #000; }
.entry .fac li { margin: 0; }
.entry .fac a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: background-color .25s var(--ease); }
.entry .fac b { font-weight: 400; font-size: 14px; line-height: 1.6; padding-right: 12px; color: #000; }
.entry .fac span { flex: 0 0 auto; font-size: 11.5px; border-bottom: 1px solid #000; padding-bottom: 1px; }

/* 埋め込みフォーム（Zoho） */
.entry .form-embed { margin-top: 32px; }
.entry .form-embed iframe { width: 100%; border: 0; min-height: 900px; }
.entry .form-pending { margin-top: 32px; padding: 40px 20px; border: 1px dashed #999; text-align: center; font-size: 13px; color: #555; }

/* K シェア */
.share { margin: 56px var(--pad) 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 12px; color: #777; padding-top: 16px; border-top: 1px solid var(--line); }
.share .ln { color: #000; font-size: 12px; }
.share-msg { flex-basis: 100%; min-height: 1em; color: #000; }
.share-msg:empty { display: none; }

.pn { margin: 40px var(--pad) 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.pn > * { padding: 18px 12px 18px 0; font-size: 12.5px; line-height: 1.6; transition: background-color .25s var(--ease); }
.pn > * + * { border-left: 1px solid var(--line); padding: 18px 0 18px 12px; text-align: right; }
.pn small { display: block; color: #777; font-size: 11px; margin-bottom: 4px; }
.back { margin: 28px var(--pad) 96px; text-align: center; font-size: 13px; }
.back-left { margin: 32px 0 0; text-align: left; }

.page-body { padding: 0 var(--pad) 104px; }

/* =====================================================================
   ホバー（PC のマウス操作のときだけ）
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
	/* A */
	.ln:hover, .yn-ln a:hover, .entry a:not([class]):hover, .row:hover .tt { animation: yn-line .3s var(--ease); }
	/* B */
	.btn:not(.btn-white):hover, .entry .btnk a:hover, .entry .is-style-yn-black .wp-block-button__link:hover, .yn-btn .wp-block-button__link:hover, .is-style-yn-arrow .wp-block-button__link:hover { background: #333; }
	.btn-line:hover::after, .entry .btnk a:hover::after, .entry .is-style-yn-black .wp-block-button__link:hover::after { width: 40px; }
	.btn-arrow:hover::after, .btn-white:hover::after, .yn-btn-arrow .wp-block-button__link:hover::after { transform: translateX(4px) rotate(45deg); }
	/* C */
	.btn-white:hover { background: #e6e6e6; }
	/* D */
	.chip:hover, .entry .inl:hover, .entry .link a:hover, .entry .is-style-yn-outline .wp-block-button__link:hover { background: #000; color: #fff; }
	/* E 行 */
	.row, .entry .fac a { transition: background-color .25s var(--ease); }
	.row:hover, .entry .fac a:hover { background: #f4f4f2; }
	.row .tt { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; }
	.row:hover .tt { background-size: 100% 1px; }
	.row .media img { transition: transform .6s var(--ease); }
	.row:hover .media img { transform: scale(1.04); }
	/* F カード */
	.card .media img, .card .ph img, .entry .sp .logo img { transition: transform .8s var(--ease); }
	.card:hover .media img, .card:hover .ph img:not([src$=".svg"]), .entry .sp a:hover .logo img { transform: scale(1.03); }
	.card:hover .card-t, .entry .sp a:hover b { opacity: .7; }
	.work:hover .go::after { transform: translateX(4px) rotate(45deg); }
	/* J メニュー項目 */
	.menu-nav a:hover b { transform: translateX(6px); }
	.menu-nav a:hover small { color: #000; }
	.gnav .ln { background-size: 0 1px; }
	.gnav .ln:hover { background-size: 100% 1px; }
}
/* タップ */
.ln:active , .yn-ln a:active { opacity: .6; }
.row:active, .entry .fac a:active { background: #f4f4f2; }

/* =====================================================================
   PC（1024px〜）
   ===================================================================== */
@media (min-width: 1024px) {
	:root { --pad: 40px; }
	.wrap { max-width: calc(var(--max) + var(--pad) * 2); margin-left: auto; margin-right: auto; }

	.t-h { font-size: 40px; line-height: 52px; }
	.t-st { font-size: 34px; line-height: 52px; }
	.h a { font-size: 13px; }

	/* ヘッダー：横並びナビ */
	.hd-in { max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }
	.menu-btn, .menu { display: none !important; }
	.gnav { display: flex; align-items: center; gap: 40px; }
	.gnav ul { display: flex; gap: 36px; font-size: 14px; letter-spacing: .04em; }
	.gnav-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; background: #000; color: #fff; font-size: 13px; letter-spacing: .04em; transition: background-color .25s var(--ease); }
	.gnav-btn:hover { background: #333; }

	/* TOP：KV を今の比率のまま左、キャッチとリードを右 */
	/* 最初の画面いっぱいに大きく見せる（2026-10-05 GEN 赤字「初回表示が小さめ」）。
	   左端はヘッダー・各節と同じ 1200px 枠に揃えたまま、KV を 60% に（1920px 幅で「お知らせ」の見出しが初回画面に入る）。
	   KV は比率を変えず切らない */
	.top-hero {
		max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 24px var(--pad) 112px;
		display: grid; grid-template-columns: 60% 1fr; gap: 64px; align-items: center;
	}
	/* 画面が低いときは高さに収まる幅まで縮める（比率 1125:873 のまま） */
	.top-hero .kv { width: min(100%, calc((100svh - var(--hd) - 48px) * 1125 / 873)); }
	.intro { padding: 0; }
	.intro .t-catch { font-size: clamp(48px, 4vw, 64px); line-height: 1.3; } /* 右列（最大約416px）に「出会う、巡る、」7文字が1行で収まる上限 */
	.lead-p { margin-top: 44px; font-size: 15px; }

	.sec { padding-bottom: 160px; }
	.news a { grid-template-columns: 160px 1fr; padding: 26px 0; }
	.news time { font-size: 14px; }
	.news .tt { font-size: 16px; }

	.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
	.work { margin-top: 48px; }
	.work .ph { margin: 0; }
	.work .card-t { font-size: 21px; line-height: 32px; }
	.work dl { font-size: 13px; }

	.about { padding: 160px 0; }
	.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 64px; align-items: start; }
	.about .t-st { margin: 0; }
	.about .t-body { font-size: 15px; }
	.mem { grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 88px; }
	.mem p { font-size: 12px; }
	.mem b { font-size: 17px; }
	.about-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 72px; }
	.credit { margin-top: 0; font-size: 13px; }
	.cheer { margin-top: 0; padding-top: 0; border-top: 0; font-size: 20px; text-align: right; }

	.top-contact { padding-top: 160px; padding-bottom: 160px; }
	.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 64px; align-items: start; }
	.top-contact .t-st { margin: 0; }
	.who { margin-bottom: 40px; }
	.who li { font-size: 16px; }

	/* 下層 */
	.crumb { padding-top: 32px; font-size: 12px; }
	.pagehead { padding-top: 48px; }
	.pagehead .t-catch { font-size: 56px; line-height: 70px; }
	.pagehead > p { font-size: 14px; }

	.pickup { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 56px; }
	.pickup .ph { margin: 0; }
	.pickup .meta { margin-top: 0; }
	.pickup .card-t { font-size: 28px; line-height: 42px; margin-top: 16px; }
	.list { margin-top: 56px; }
	.list a { grid-template-columns: 1fr 160px; gap: 40px; padding: 24px 0; align-items: center; }
	.list .tt { font-size: 17px; }
	.pager { margin: 64px auto 160px; }
	.pager-gap { height: 160px; }

	.art, .share, .pn, .back, .page-body .entry, .crumb-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
	.art { padding: 56px 0 0; }
	.art-title { font-size: 36px; line-height: 52px; }
	.art-title span { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(52px - 1px), #000 calc(52px - 1px), #000 52px); }
	.eye { margin: 40px 0 0; }
	.eye .cap { padding: 0; }
	.entry > .lead { font-size: 17px; }
	.entry > p, .entry ol, .entry ul:not([class*="sp"]):not(.fac) { font-size: 15px; }
	.entry h2 { font-size: 22px; line-height: 34px; margin-top: 72px; }
	.entry .wp-block-image { margin: 40px 0 0; }
	.entry .wp-block-image figcaption { padding: 0; }
	.entry .sp { grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
	.entry .link a, .entry .btnk a, .entry .is-style-yn-outline .wp-block-button__link, .entry .is-style-yn-black .wp-block-button__link { max-width: 420px; }
	.share { margin-top: 72px; }
	.back { margin-bottom: 140px; }
	.page-body { padding: 0 var(--pad) 140px; }

	.cta { padding: 120px 0; }
	.cta-in { display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: end; }
	.cta .t-st { margin-bottom: 0; }

	.ft { padding: 64px 0 48px; }
	.ft-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
	.ft .mk { width: 48px; height: 90px; }
	.ft-tag { font-size: 14px; }
	.ft-side { text-align: right; }
	.ft-sns { margin-top: 0; justify-content: flex-end; }
}

/* タブレット（768〜1023）：SP の組みのまま、本文が間延びしないよう幅を絞る */
@media (min-width: 768px) and (max-width: 1023px) {
	:root { --pad: 48px; }
	.works { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
	.work .ph { margin: 0; }
	.mem { grid-template-columns: repeat(4, 1fr); }
	.art, .share, .pn, .back, .page-body .entry { max-width: 640px; margin-left: auto; margin-right: auto; }
	.art { padding-left: 0; padding-right: 0; }
	.eye, .entry .wp-block-image { margin-left: 0; margin-right: 0; }
	.eye .cap, .entry .wp-block-image figcaption { padding: 0; }
	.intro { max-width: 640px; margin: 0 auto; padding-left: 0; padding-right: 0; }
}

/* =====================================================================
   視差効果を減らす：移動と拡大を止め、色の変化だけ残す
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.js .reveal, .js .kv img, .menu-in > *, .menu-nav a { opacity: 1 !important; transform: none !important; transition: none !important; }
	.menu { transition: none; }
	.ln:hover, .yn-ln a:hover, .entry a:not([class]):hover, .row:hover .tt { animation: none !important; }
	.card:hover .media img, .row:hover .media img, .entry .sp a:hover .logo img,
	.menu-nav a:hover b,
	.btn-arrow:hover::after, .btn-white:hover::after, .work:hover .go::after { transform: none; }
	.btn-arrow::after, .btn-white::after, .work .go::after { transform: rotate(45deg) !important; }
	.btn-line:hover::after, .entry .btnk a:hover::after, .entry .is-style-yn-black .wp-block-button__link:hover::after { width: 28px; }
	.menu-btn i::before, .menu-btn i::after { transition: none; }
}

/* =====================================================================
   TOP をブロックで組んだ分（2026-10-05）。PHP 直書き時代のマークアップとの差だけを埋める
   ===================================================================== */
/* 企画と実績: カード全体をリンクにする（タイトルのリンクを全面に広げる） */
.work { position: relative; }
.work .card-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* 画像= GEN 入稿の「企画と実績」画像（3124×1915・2026-10-07 差し替えで縦が少し伸びた）。枠も同じ比率にして絵を切らない */
.work .ph { aspect-ratio: 3124 / 1915; overflow: hidden; background: #f4f4f2; display: grid; place-items: center; }
.work .ph img { width: 100%; height: 100%; object-fit: cover; }
/* 画像が無いときの仮置き（湯道マーク）。枠の高さの 34% ＝ 幅の 9.6%（マークの縦横比 69.6:129.8・枠 1200:630） */
.work .ph img[src$=".svg"] { width: 9.6%; height: auto; object-fit: contain; opacity: .16; }
/* 行ごとに「見出し 52px＋値」。グリッドや display:contents は編集画面（li が入力欄）で効かないので、
   見出しを幅 52px の箱にし、値の折り返しは「ぶら下げ」で値の頭に揃える＝本番と編集画面で同じに組める */
.work .meta { display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.8; color: inherit; } /* 一覧用の .meta（横並び）を打ち消す */
.work .meta li { padding-left: 52px; text-indent: -52px; }
.work .meta li + li { margin-top: 4px; }
.work .meta strong { display: inline-block; width: 52px; text-indent: 0; font-weight: 400; color: #777; }
/* 湯ノ道について */
.about .is-style-ruled { --rule: #555; }
.mem .pt { overflow: hidden; }
.mem .pt img { width: 100%; height: 100%; object-fit: contain; }
.mem strong { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.04em; color: #fff; }
.credit .c2 em { font-style: normal; color: #999; }
.credit .c2 a { color: #fff; background: linear-gradient(#777, #777) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
/* お問い合わせ */
.who em { display: block; font-style: normal; font-size: 11.5px; color: #777; letter-spacing: .02em; margin-top: 2px; }
.yn-blocks .wp-block-button { width: 100%; }
.yn-btn .wp-block-button__link, .is-style-yn-arrow .wp-block-button__link { width: 100%; border-radius: 0; text-decoration: none; }
@media (min-width: 1024px) {
	.work .meta { font-size: 13px; }
	.mem strong { font-size: 17px; }
}


/* =====================================================================
   記事詳細のサイドバー（2026-10-05 okada）
   PC（1024px〜）: 本文を左に寄せ、右に 300px のサイドバー。SP・タブレット: 本文の下に並べる
   ===================================================================== */
.side { padding: 0 var(--pad); margin-bottom: 96px; }
.side-sec + .side-sec { margin-top: 48px; }
.side-h { font-weight: 400; font-size: 18px; line-height: 28px; letter-spacing: -.04em; padding-bottom: 10px; border-bottom: 1px solid #000; }
.side-news a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
.side-news time { display: block; font-size: 12px; line-height: 1.6; letter-spacing: .02em; color: #555; }
.side-news .tt { font-size: 14px; line-height: 1.7; letter-spacing: -.02em; }
.side-more { margin-top: 16px; text-align: right; font-size: 12.5px; }
.side-cats a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.side-cats .n { font-size: 12px; color: #777; }
.side-txt { margin-top: 16px; font-size: 13px; line-height: 1.8; color: #555; }
.side-sns { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: 13px; }
.art-main .back { margin-bottom: 72px; }

@media (min-width: 768px) and (max-width: 1023px) {
	.side { max-width: 640px; margin-left: auto; margin-right: auto; padding: 0; }
}

@media (min-width: 1024px) {
	.art-layout {
		display: grid; grid-template-columns: minmax(0, 760px) 300px; justify-content: space-between; column-gap: 64px; align-items: start;
		max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad);
	}
	/* 中央寄せ（max-width 760px＋左右 auto）をやめて左に寄せる */
	.art-main .art, .art-main .share, .art-main .pn, .art-main .back { max-width: none; margin-left: 0; margin-right: 0; }
	.art-main .back { margin-bottom: 140px; }
	.side { padding: 56px 0 0; margin-bottom: 140px; }
}

/* =====================================================================
   PC の文字を一段大きく（2026-10-07 GEN 最終戻し「PC のテキスト全体 1 段大きく・グローバルメニューは 2 段」）
   本文・一覧・カード・フッターなどの文字を約 1〜2px 上げる。見出し（.t-h・.t-st・キャッチ）は据え置き。
   ===================================================================== */
@media (min-width: 1024px) {
	.gnav ul { font-size: 16px; }
	.gnav-btn { height: 48px; padding: 0 24px; font-size: 15px; }
	.h a { font-size: 14px; }

	.lead-p { font-size: 17px; }
	.news time { font-size: 15px; }
	.news .tt { font-size: 18px; }
	.work .card-t { font-size: 23px; line-height: 34px; }
	.work dl, .work .meta { font-size: 14px; }
	.work .go { font-size: 14px; }
	.about .t-body, .t-body { font-size: 16px; }
	.mem p { font-size: 13px; }
	.mem b, .mem strong { font-size: 18px; }
	.credit { font-size: 14px; }
	.cheer { font-size: 22px; }
	.who li { font-size: 17px; }
	.who small, .who em { font-size: 12.5px; }

	.crumb { font-size: 13px; }
	.pagehead > p { font-size: 15px; }
	.meta { font-size: 13px; }
	.meta .cat { font-size: 12px; }
	.chip { font-size: 14px; }
	.list .tt { font-size: 18px; }
	.pager { font-size: 15px; }

	.entry > .lead { font-size: 18px; }
	.entry > p, .entry ol, .entry ul:not([class*="sp"]):not(.fac) { font-size: 16px; }
	.entry h2 { font-size: 23px; line-height: 36px; }
	.entry h3 { font-size: 16px; }
	.entry table { font-size: 14px; }
	.entry .note { font-size: 13px; }
	.entry .fac a, .entry .fac b { font-size: 15px; }
	.entry .sp b { font-size: 14px; }
	.cap, .entry figcaption { font-size: 12px; }
	.share, .share .ln { font-size: 13px; }
	.pn > * { font-size: 13.5px; }
	.back { font-size: 14px; }

	.side-h { font-size: 19px; }
	.side-news time { font-size: 13px; }
	.side-news .tt, .side-cats a { font-size: 15px; }
	.side-txt, .side-sns { font-size: 14px; }

	.ft-tag { font-size: 15px; }
	.ft-sns { font-size: 14px; }
	.ft-links { font-size: 13px; }
	.ft small { font-size: 11px; }
}