/* とやま古民家ステイ — 写真主役のモダン設計。
   参考トーン: notahotel.com（フルブリードの写真、黒セクション、
   太いサンセリフ＋コンデンス英字、白地の余白、青のハイライト）。 */

:root{
  --black:#0b0b0c;        /* 黒セクションの地 */
  --ink:#111113;          /* 本文 */
  --gray:#6e6e73;         /* 補助文字 */
  --hair:#e7e7ea;         /* 罫線 */
  --paper:#f5f5f7;        /* 薄グレー地 */
  --blue:#0171e3;         /* ハイライト */
  --blue-d:#0055b2;
  --line:#06C755;         /* LINEグリーン */
  --maxw:1160px;
  --radius:14px;
  --pad:max(20px,4vw);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#fff;color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.9;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

h1,h2,h3{font-weight:700;line-height:1.35;letter-spacing:.005em}
h1{font-size:clamp(30px,6vw,54px);font-weight:900}
h2{font-size:clamp(22px,3.6vw,34px);font-weight:900;margin:0 0 20px}
h3{font-size:17px}

/* コンデンス英字（見出しのアクセント） */
.eng{font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.03em;line-height:1}
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--gray);
  text-transform:uppercase;font-weight:500;margin:0 0 14px}
.lead{color:var(--gray);max-width:38em;font-size:15px}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--black);color:#fff;padding:8px 16px;z-index:100}
.skip:focus{left:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:8px;max-width:none;padding:0 max(16px,2.5vw)}
.logo{font-weight:900;font-size:16px;letter-spacing:.02em;white-space:nowrap}
.logo em{font-style:normal}
.nav ul{display:flex;list-style:none;gap:2px;align-items:center}
.nav .n{display:block;padding:16px 10px;font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;opacity:.85}
.nav .n:hover{opacity:1}
.nav .n[aria-current="page"]{opacity:1;box-shadow:inset 0 -2px 0 var(--ink)}
.nav .keisai-n{background:var(--ink);color:#fff;border-radius:999px;
  padding:7px 16px;margin-left:8px;opacity:1}
.nav .keisai-n:hover{background:#333}
.nav .keisai-n[aria-current="page"]{box-shadow:none}
.nav .lg{display:none}
.nav .sm{display:inline}
@media(min-width:761px){.nav .lg{display:inline}.nav .sm{display:none}.nav .n{padding:18px 14px}}

/* ---------- ボタン ---------- */
.btn{display:inline-block;padding:12px 26px;border-radius:999px;font-size:14px;
  font-weight:700;line-height:1.6;border:1px solid var(--ink);color:var(--ink);
  transition:opacity .15s,background .15s,color .15s}
.btn:hover{opacity:.75}
.btn.solid{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.solid:hover{background:var(--blue-d);border-color:var(--blue-d);opacity:1}
.btn.line{background:var(--line);border-color:var(--line);color:#fff}
.btn.line:hover{background:#05B04C;border-color:#05B04C;opacity:1}
.btn.ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12);opacity:1}
.tlink{color:var(--blue);font-weight:500;font-size:14px}
.tlink:hover{text-decoration:underline}

/* 本文リンク */
.prose a,.fnote a,.cta-pending a,.more a,.links a{color:var(--blue)}
.prose a:hover,.more a:hover,.links a:hover{text-decoration:underline}

/* ---------- hero（トップ） ---------- */
.hero{position:relative;height:min(92svh,860px);min-height:540px;overflow:hidden;
  display:flex;align-items:flex-end;background:var(--black)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 88%)}
.hero .wrap{position:relative;z-index:2;color:#fff;width:100%;
  padding-bottom:clamp(36px,7vw,72px)}
.hero .eng-t{font-size:clamp(13px,1.6vw,15px);letter-spacing:.22em;opacity:.85;margin:0 0 10px}
.hero h1{color:#fff;margin:0 0 14px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .lead{color:rgba(255,255,255,.88);margin:0 0 26px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero .imgnote{position:absolute;right:12px;bottom:10px;z-index:2;font-size:10px;color:rgba(255,255,255,.5)}

/* ---------- セクション共通 ---------- */
main section{padding:clamp(56px,9vw,110px) 0}
section.tight{padding-top:clamp(36px,5vw,60px)}

/* ---------- ラインナップ（施設カード） ----------
   参考: LOOF の宿一覧。コンパクトカードの密なグリッド。 */
.cards{display:grid;gap:24px 20px;margin-top:8px;grid-template-columns:1fr}
@media(min-width:600px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{display:block;color:var(--ink)}
.card .ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;
  background:var(--paper);position:relative}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .body{display:block;padding:10px 2px 0}
.card .tag{display:block;font-size:11px;letter-spacing:.08em;color:var(--gray)}
.card .t{display:block;font-size:16px;font-weight:700;margin-top:2px}
.card:hover .t{color:var(--blue)}
.card .feat{display:block;font-size:12px;color:var(--gray);margin-top:2px}
.card-recruit .ph{border:1px dashed #c9c9cf;background:#fafafa;
  display:flex;align-items:center;justify-content:center}
.card-recruit .plus{font-size:34px;color:#c2c2c8;line-height:1}
.card-recruit:hover .t{color:var(--blue)}
.empty{color:var(--gray);border:1px dashed var(--hair);padding:28px;border-radius:var(--radius)}

/* ---------- Experience（泊まり方から選ぶ） ---------- */
.exp{background:var(--paper)}
.exp .wrap{position:relative}
.exp-cards .card{background:#fff;border-radius:12px;overflow:hidden}
.exp-cards .card .ph{border-radius:0}
.exp-cards .card .body{padding:14px 18px 18px}
.tate{position:absolute;right:var(--pad);top:6px;writing-mode:vertical-rl;
  font-family:"Noto Sans JP",serif;font-weight:700;font-size:13px;
  letter-spacing:.42em;color:var(--gray);opacity:.55;pointer-events:none}
@media(max-width:760px){.tate{display:none}}

/* ---------- News ---------- */
.news-list li a,.news-list .nrow{display:flex;gap:14px;padding:16px 4px;align-items:baseline;color:var(--ink)}
.news-list .d{color:var(--gray);font-size:12px;flex:0 0 6.5em}
.ntag{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.08em;
  border:1px solid var(--hair);border-radius:999px;padding:2px 10px;color:var(--gray)}
.news-list .nt{font-size:14px;font-weight:500}
.news-list li a:hover .nt{color:var(--blue)}

/* 絞り込みチップ（一覧見出しの下） */
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.fchip{display:inline-block;border:1px solid var(--hair);border-radius:999px;
  padding:6px 16px;font-size:12px;font-weight:500;color:var(--ink);background:#fff}
.fchip:hover{border-color:var(--ink)}

/* ---------- 黒セクション（特徴） ---------- */
.dark{background:var(--black);color:#fff}
.dark h2{color:#fff}
.dark .eyebrow{color:rgba(255,255,255,.5)}
.feats{display:grid;gap:1px;background:rgba(255,255,255,.14);margin-top:32px;
  border-radius:var(--radius);overflow:hidden}
@media(min-width:761px){.feats{grid-template-columns:repeat(3,1fr)}}
.feat-i{background:var(--black);padding:28px 24px 30px}
.feat-i .num{font-family:"Anton",sans-serif;font-size:clamp(34px,4vw,48px);
  line-height:1.1;letter-spacing:.02em}
.feat-i .num small{font-size:.45em;margin-left:2px;letter-spacing:.06em}
.feat-i .l{font-size:13px;font-weight:700;margin-top:8px}
.feat-i .d{font-size:12px;color:rgba(255,255,255,.55);margin-top:4px;line-height:1.7}

/* ---------- フルブリードメッセージ ---------- */
.message{position:relative;overflow:hidden;background:var(--black);
  min-height:min(72svh,640px);display:flex;align-items:center;text-align:center;color:#fff}
.message .bg{position:absolute;inset:0}
.message .bg img{width:100%;height:100%;object-fit:cover;opacity:.85}
.message::after{content:"";position:absolute;inset:0;background:rgba(4,8,20,.35)}
.message .wrap{position:relative;z-index:2;width:100%}
.message h2{font-size:clamp(26px,5vw,46px);margin:0 0 18px}
.message p{max-width:34em;margin:0 auto 26px;color:rgba(255,255,255,.85)}

/* ---------- エリア・読みもの導線 ---------- */
.tiles{display:grid;gap:20px;margin-top:8px}
@media(min-width:761px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:block;border:1px solid var(--hair);border-radius:var(--radius);
  padding:26px 26px 24px;color:var(--ink);transition:box-shadow .2s,transform .2s;background:#fff}
.tile:hover{box-shadow:0 10px 34px rgba(0,0,0,.08);transform:translateY(-2px)}
.tile .eng{font-size:12px;letter-spacing:.16em;color:var(--gray);font-family:inherit;font-weight:500}
.tile h3{margin:6px 0 8px;font-size:18px;font-weight:900}
.tile p{font-size:13px;color:var(--gray)}
.tile .go{display:block;margin-top:14px;font-size:13px;font-weight:700;color:var(--blue)}

/* ---------- 掲載CTA ---------- */
.keisai-teaser{background:var(--paper);text-align:center}
.keisai-teaser p{max-width:34em;margin:0 auto 22px;color:var(--gray)}

/* ---------- ページ見出し（下層） ---------- */
.pagehead{padding:clamp(48px,8vw,88px) 0 clamp(20px,3vw,36px)}
.pagehead h1{margin:0 0 14px}
.pagehead .lead{margin:0}
.crumb{font-size:12px;color:var(--gray);margin:0 0 18px}
.stayhead .sub{color:var(--gray);font-size:14px}
.date{font-size:13px;color:var(--gray);margin:0 0 8px}

/* ---------- 施設ページ ---------- */
.gallery{padding-top:0;padding-bottom:0}
.gallery .wrap{display:grid;gap:14px}
@media(min-width:761px){.gallery .wrap{grid-template-columns:1fr 1fr}}
.gallery .ph{border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.gallery .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gallery figcaption{font-size:12px;color:var(--gray);padding:8px 12px 10px;background:#fff}
.stay-body .lead{font-size:16px;color:var(--ink);margin:0 0 32px;max-width:42em}
.facts{border-top:1px solid var(--hair);max-width:640px}
.facts .row{display:flex;border-bottom:1px solid var(--hair);padding:14px 4px;gap:16px}
.facts dt{flex:0 0 6em;color:var(--gray);font-size:13px;padding-top:3px}
.facts dd{flex:1;font-weight:500}
.facts dd a{color:var(--blue)}
.chips{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;background:var(--paper);border-radius:999px;
  padding:5px 15px;font-size:12px;color:var(--ink);font-weight:500}

.cta{background:var(--black);color:#fff;text-align:center}
.cta h2{color:#fff;margin-bottom:24px}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-btns .btn{padding:14px 34px;font-size:15px}
.cta .btn:not(.solid):not(.line){border-color:rgba(255,255,255,.7);color:#fff}
.cta-pending{color:rgba(255,255,255,.75);max-width:34em;margin:0 auto}
.cta-pending a{color:#fff;text-decoration:underline}
.backlinks{padding-top:28px;padding-bottom:56px;font-size:13px}
.backlinks a{color:var(--blue);font-weight:500}

/* ---------- 一覧・読みもの ---------- */
.list{padding-top:clamp(24px,4vw,40px)}
.list .more{margin-top:36px;font-size:13px}
.articles{list-style:none}
.articles li{border-bottom:1px solid var(--hair)}
.articles a{display:flex;gap:16px;padding:16px 4px}
.articles a:hover{color:var(--blue)}
.articles .d{color:var(--gray);font-size:13px;flex:0 0 7em;padding-top:2px}
.more{color:var(--gray)}

/* ---------- 記事・文章ページ ---------- */
.prose h2{margin:40px 0 14px;font-size:20px;font-weight:900}
.prose h3{margin:28px 0 10px;font-size:16px;font-weight:700}
.prose p{margin:0 0 16px;max-width:40em;color:#333}
.prose ul,.prose ol{margin:0 0 16px 1.4em;max-width:38em;color:#333}
.prose .btn{margin-top:6px}
.prose-sec{padding-top:clamp(16px,3vw,28px)}
.article .prose{padding-top:8px}

.artfig{margin:20px 0 8px}
.artfig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.artfig figcaption{font-size:12px;color:var(--gray);margin-top:6px}

/* 関連する読みもの（記事末尾・build.py が自動生成）。.articles の行スタイルを踏襲 */
.related{margin:44px 0 0}
.related .t{font-size:15px;font-weight:900;margin:0 0 6px}
.related ul{list-style:none}
.related li{border-bottom:1px solid var(--hair)}
.related a{display:block;padding:14px 4px}
.related a:hover{color:var(--blue)}

.stay-cta{background:var(--paper);border-radius:var(--radius);
  padding:32px 24px;margin:48px 0 8px;text-align:center}
.stay-cta .t{font-size:18px;font-weight:900;margin:0 0 8px}
.stay-cta p{margin:0 0 16px;color:var(--gray)}

/* ---------- フォーム ---------- */
.form-sec{background:var(--paper)}
form{max-width:560px}
form p{margin:0 0 16px}
form label{display:block;font-size:13px;color:var(--gray);font-weight:500}
form input,form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid var(--hair);border-radius:10px;background:#fff;
  font:inherit;color:var(--ink)}
form input:focus,form textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.hp{position:absolute;left:-9999px}

/* ---------- フッター ---------- */
footer{background:var(--black);color:rgba(255,255,255,.85);
  padding:clamp(56px,8vw,88px) 0 36px}
footer a:hover{color:#fff}
.fown{font-weight:900;font-size:clamp(22px,3.4vw,30px);color:#fff;letter-spacing:.01em}
.fown em{font-style:normal}
.fnote{font-size:12px;color:rgba(255,255,255,.45);margin:8px 0 0}
.fcards{display:grid;gap:28px;margin:40px 0}
@media(min-width:761px){.fcards{grid-template-columns:1fr 1fr}}
.fcard-t{font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.4);margin:0 0 12px;text-transform:uppercase}
.fbtns{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fbtn{font-size:13px;color:rgba(255,255,255,.75)}
.fbtn:hover{color:#fff}
.fkeisai{border-top:1px solid rgba(255,255,255,.14);padding-top:26px;font-size:14px;font-weight:700}
.fkeisai a{color:#fff}
.fnav{margin-top:18px;font-size:12px;color:rgba(255,255,255,.5)}
.fnav a{color:rgba(255,255,255,.6)}
.fnav span{margin:0 .6em;opacity:.35}
.copy{margin-top:22px;font-size:11px;color:rgba(255,255,255,.35)}

/* ---------- reveal ----------
   JSが動く環境（html.js）でだけ隠す。JS無効でも本文が消えないように。 */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- 印刷用 ---------- */
@media print{
  .nav,footer,.skip,.hero-cta,.cta,.form-sec{display:none}
  body{background:#fff;color:#000}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- 町ページの写真（/yatsuo/ ほか）2026-09-05 風の宿の実写真を転用 ---------- */
.townlead{padding-top:0;padding-bottom:0}
.townlead figure,.figgrid figure,.figone{margin:0}
.townlead img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--radius)}
.figgrid{display:grid;gap:14px;margin:26px 0 30px;grid-template-columns:1fr}
@media(min-width:600px){.figgrid{grid-template-columns:1fr 1fr}}
.figgrid img,.figone img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius)}
.figone{margin:26px 0 30px;max-width:560px}
.townlead figcaption,.figgrid figcaption,.figone figcaption{font-size:12px;color:var(--gray);margin-top:6px}
.imgcredit{font-size:12px;color:var(--gray);margin-top:34px}
.imgcredit a{color:var(--gray);text-decoration:underline}