/* 宿坊ページ(TEMPLE-PAGE.md)— build/ に HTML が無いブロック。値は tokens.css だけ。
   和紙と白を交互: 03 和紙 / 04 白 / 05 和紙 / 06 白 / 07 和紙 / 08 写真 / 09 白 / 10 深緑 / 11 和紙 / 12 若苔 / 13 白 */

/* 02 HERO — パンくず・寺号・ローマ字・所在地(すべて項目から) */
.t-crumb{font-size:var(--t-note);margin:0 0 var(--sp-sm);display:flex;gap:var(--sp-xs);justify-content:center;flex-wrap:wrap}
.t-crumb a{color:var(--white)}
.t-name{font-family:var(--font-mincho);font-weight:600;font-size:calc(var(--t-h1) * 2);line-height:var(--lh-title);margin:0}
.t-romaji{font-family:var(--font-latin);font-size:var(--t-lead);letter-spacing:.06em;margin:var(--sp-xs) 0 0}
.t-loc{font-family:var(--font-mincho);font-size:var(--t-h4);margin:var(--sp-md) 0 0;padding-top:var(--sp-sm);position:relative}
.t-loc::before{content:"";position:absolute;top:0;left:50%;width:var(--sp-xl);height:2px;background:var(--white);transform:translateX(-50%)}

/* 共通: 見出しの組 */
.t-head .o-title{margin-top:var(--sp-xs)}
.t-head{margin-bottom:var(--sp-md)}
.t-center{text-align:center}
.t-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-xl);align-items:start}
.t-body p{margin:0 0 var(--sp-sm)}
.t-btns{display:flex;flex-wrap:wrap;gap:var(--sp-sm);margin-top:var(--sp-lg)}
.t-center .t-btns{justify-content:center}

/* 03 ABOUT — 文章と縦写真3枚(真ん中を上にずらす) */
.t-about{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.t-about__photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-sm);align-items:start}
.t-about__photos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);display:block}
.t-about__photos img:nth-child(1),.t-about__photos img:nth-child(3){margin-top:var(--sp-xl)}
.t-more{display:flex;justify-content:flex-end}
.t-more button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-xs);font-size:var(--t-body);color:var(--fukamidori)}
.t-more button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* 項目の一覧(施設・客室)— 見出しと本文の2列、行のあいだに線 */
.t-dl{margin:0}
.t-dl > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-sm);
  padding-block:var(--sp-sm);border-bottom:1px solid var(--kawaishi)}
.t-dl dt{font-family:var(--font-mincho);font-weight:600;font-size:var(--t-body)}
.t-dl dd{margin:0;font-size:var(--t-note);line-height:var(--lh-body);white-space:pre-line}
.t-facility{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

/* ギャラリー — 全部同じ部品・左右の矢印だけ(TEMPLE-PAGE「Galleries」) */
.o-gallery{position:relative}
.o-gallery__track{display:flex;gap:var(--sp-xs);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-behavior:smooth}
.o-gallery__track::-webkit-scrollbar{display:none}
.o-gallery__track img{flex:0 0 auto;scroll-snap-align:start;border-radius:var(--radius);object-fit:cover;display:block}
.o-gallery--card .o-gallery__track img{width:min(28%,480px);aspect-ratio:8/5}
.o-gallery--wide .o-gallery__track img{width:100%;aspect-ratio:8/5}
.o-gallery__nav{display:flex;justify-content:center;align-items:center;gap:var(--sp-sm);margin-top:var(--sp-sm);
  font-family:var(--font-latin);font-size:var(--t-note)}
.o-gallery__nav button{all:unset;cursor:pointer;display:grid;place-items:center;width:var(--sp-md);height:var(--sp-md)}
.o-gallery__nav button[disabled]{opacity:.3;cursor:default}
.o-gallery__nav button:focus-visible{outline:2px solid currentColor}
.o-gallery__nav img{width:11px;height:12px}
.o-gallery__nav .prev img{transform:scaleX(-1)}
.t-band-gallery{padding-top:var(--sp-xl)}
.t-band-gallery .o-gallery__track{padding-inline:var(--gutter)}

/* 05 LODGING / 06 MEALS */
.t-rows{list-style:none;margin:var(--sp-md) 0 0;padding:0}
.t-rows li{display:flex;justify-content:space-between;gap:var(--sp-sm);font-size:var(--t-note);padding-block:var(--sp-xs)}

/* 07 ACTIVITIES — 2列固定・写真は120pxの丸(TEMPLE-PAGE 07) */
.t-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-xl) var(--sp-sm);margin-top:var(--sp-xl)}
.t-act{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--sp-sm);align-items:start}
.t-act img{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block}
.t-act h3{font-size:var(--t-h4);font-weight:500;margin:0 0 var(--sp-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-act p{font-size:var(--t-note);line-height:var(--lh-body);margin:0;min-height:calc(var(--t-note) * 2 * 2)}
.t-act .meta{display:flex;gap:var(--sp-sm);flex-wrap:wrap;margin-top:var(--sp-xs);font-size:var(--t-note)}
.t-act .meta span{display:inline-flex;align-items:center;gap:var(--sp-xs)}
.t-act .meta img{width:18px;height:18px;border-radius:0}

/* 08 IMAGE — 写真だけの帯。膜なし・中央で切る(TEMPLE-PAGE 08) */
.t-divider{aspect-ratio:1440/400;background-position:center;background-size:cover;background-repeat:no-repeat}

/* 09 ACCESS */
.t-addr{text-align:center;font-size:var(--t-body);margin:0}
.t-addr a{color:var(--kakishibu);text-decoration:none}
.t-addr a:hover{text-decoration:underline}
.t-access{margin-top:var(--sp-xl)}
.t-access h3{margin-bottom:var(--sp-md)}
.t-access .lead{font-size:var(--t-note);line-height:var(--lh-body);margin:0 0 var(--sp-md)}
.t-route{padding-block:var(--sp-sm);border-bottom:1px solid var(--kawaishi)}
.t-route b{display:block;font-size:var(--t-note);font-weight:700}
.t-route p{margin:var(--sp-xs) 0;font-size:var(--t-note)}
.t-route .tm{display:inline-flex;align-items:center;gap:var(--sp-xs);font-size:var(--t-note)}
.t-route .tm img{width:18px;height:18px}
.o-map{position:relative;overflow:hidden;height:520px;background:var(--washi);margin-top:var(--sp-xl)}
.o-map iframe{width:100%;height:100%;border:0;display:block;
  filter:grayscale(.72) sepia(.14) saturate(.78) contrast(.94) brightness(1.03)}
.t-access-sec{padding-bottom:0}

/* ポップアップ(お寺の由緒 / もっと読む)— 文だけ・約720px・×・背景・Esc で閉じる */
.o-popup{border:0;padding:0;max-width:min(720px,calc(100vw - 2 * var(--gutter)));max-height:calc(100vh - 2 * var(--sp-xl));
  border-radius:var(--radius);background:var(--white);color:var(--fukamidori)}
.o-popup::backdrop{background:rgba(0,0,0,.4)}
.o-popup__in{padding:var(--sp-xl) var(--sp-lg);overflow:auto;max-height:inherit;box-sizing:border-box}
.o-popup h2{margin:0 0 var(--sp-md)}
.o-popup p{margin:0 0 var(--sp-sm);font-size:var(--t-body);line-height:var(--lh-body)}
.o-popup__x{position:absolute;top:var(--sp-sm);right:var(--sp-sm);all:unset;cursor:pointer;width:var(--sp-lg);height:var(--sp-lg);
  display:grid;place-items:center}
.o-popup__x::before{content:"";width:16px;height:16px;background:var(--fukamidori);-webkit-mask:var(--src-icon-close) center/contain no-repeat;mask:var(--src-icon-close) center/contain no-repeat}
.o-popup__x{position:absolute}
html.is-popup{overflow:hidden}

/* 12 RESERVE — スマホでは画面下に固定(このページでこれだけ) */
.t-reserve{text-align:center}
.t-reserve .o-body{margin-top:var(--sp-sm)}
.t-reserve-fixed{display:none}

@media (max-width:1024px){
  .t-two,.t-about,.t-facility{grid-template-columns:minmax(0,1fr);gap:var(--sp-lg)}
  .o-gallery--card .o-gallery__track img{width:min(80%,480px)}
}
@media (max-width:768px){
  .t-name{font-size:calc(var(--t-h1) * 1.6)}
  .t-acts{grid-template-columns:minmax(0,1fr)}
  .t-act{grid-template-columns:90px minmax(0,1fr)}
  .t-act img{width:90px;height:90px}
  .t-act h3{white-space:normal}
  .t-divider{aspect-ratio:4/3}
  .t-dl > div{grid-template-columns:minmax(0,1fr)}
  .o-map{height:360px}
  .t-reserve-fixed{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;justify-content:center;
    padding:var(--sp-xs) var(--gutter) calc(var(--sp-xs) + env(safe-area-inset-bottom,0px));background:var(--wakagoke)}
  .t-reserve-fixed .o-btn{width:100%}
  body[data-section="stay"] .o-footer{padding-bottom:calc(var(--sp-2xl) + var(--sp-lg))}
}
/* width/height 属性を入れた <img> は、高さを比率に任せる(属性の高さが残ると縦に伸びる・2026-10-26 実測) */
.t-about__photos img,.o-gallery__track img,.blog-card img{height:auto}