/* ============================================================
   小松旅館 base.css
   rem全体スケール / 色トークン / フォント / 18カラムgrid / 縦書き / 共通部品
   前提: head内JSが --vw(画面幅px) と --fvh(1vhのpx) をセット済み
   ============================================================ */

/* ---------- トークン ---------- */
:root {
  /* 色: bgとcolorは必ずペアで使う */
  --dark: #241d17;            /* 焦げ茶の闇(HERO/口上/CTAの地) */
  --dark-2: #1b1511;          /* さらに深い闇(オーバーレイ下地) */
  --kinari: #efe9dd;          /* 生成り(明部の地) */
  --kinari-2: #e7dfd0;        /* 生成りの影(区切り・淡い面) */
  --sumi: #322a23;            /* 墨文字(生成り地の文字) */
  --sumi-soft: #6f6357;       /* 補助文字(生成り地・AA確保済) */
  --shiro: #f4efe6;           /* 闇の上の文字(温かみのある白) */
  --shiro-soft: rgba(244, 239, 230, 0.78); /* 闇の上の補助文字 */
  --akari: #d9852e;           /* 提灯の暖色(闇の上のアクセント専用) */
  --akari-deep: #8a4d15;      /* 暖色の濃色(生成り地で文字に使う時のみ) */
  --line-dark: rgba(50, 42, 35, 0.28);   /* 生成り地の罫線 */
  --line-light: rgba(244, 239, 230, 0.32); /* 闇地の罫線 */

  /* フォント */
  --font-ja: "Zen Old Mincho", "Yu Mincho", "游明朝体", "Hiragino Mincho ProN", serif;
  --font-en: "Crimson Pro", serif;

  /* 動き */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-clip: cubic-bezier(0, 0.67, 0.07, 1);

  /* 余白の基準 */
  --gutter: 9.5vw;
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, li, figure, figcaption, blockquote, address {
  margin: 0;
  padding: 0;
}
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; object-fit: cover; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }

/* ---------- rem全体スケール(1rem = 画面幅/144。1440pxで1rem=10px) ---------- */
html {
  font-size: calc(var(--vw, 100vw) / 144);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media screen and (min-width: 1700px) {
  html { font-size: 73.6%; } /* 約11.8pxでロック */
}
@media screen and (max-width: 1150px) {
  html { font-size: 49.9%; } /* 約8pxでロック */
}
@media screen and (max-width: 819px) {
  html { font-size: 62.5%; } /* SPは固定10px基準 */
  :root { --gutter: 6.6666vw; }
}

/* ---------- body: 生成り地+紙テクスチャ(SVGノイズ・画像タイル不使用) ---------- */
body {
  background-color: var(--kinari);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  color: var(--sumi);
  font-family: var(--font-ja);
  font-weight: 600;
  font-size: max(11.5px, 1.5rem);
  line-height: 2;
  letter-spacing: 0.05em;
  overflow-x: clip;
}
@media screen and (max-width: 819px) {
  body { font-size: max(11.5px, 1.3rem); line-height: 1.9; }
}

/* ---------- 欧文 ---------- */
.en {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---------- 縦書き(flex禁止・writing-modeで実装) ---------- */
.tate {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.tate .en {
  text-orientation: sideways;
}

/* ---------- 18カラムgrid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 0;
  align-items: start;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

@media screen and (max-width: 819px) {
  .grid { display: block; }
}

/* ---------- sticky追従テキスト ---------- */
.sticky-box {
  position: sticky;
  top: 10rem;
}
@media screen and (max-width: 819px) {
  .sticky-box { position: static; }
}

/* ---------- 見出し(日英併記) ---------- */
.sec-ttl {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: max(22px, 4.6rem);
  line-height: 1.2;
  letter-spacing: 0.08em;
  display: inline-block;
  transform: scaleY(0.92);
  transform-origin: bottom;
}
.sec-ttl__en {
  display: block;
  font-size: max(11.5px, 1.6rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 1.2rem;
  opacity: 0.62;
}
@media screen and (max-width: 819px) {
  .sec-ttl { font-size: max(20px, 3.4rem); }
}

/* ---------- 本文 ---------- */
.txt {
  font-size: max(11.5px, 1.5rem);
  text-align: justify;
}
@media screen and (max-width: 819px) {
  .txt { font-size: max(11.5px, 1.3rem); }
}

/* ---------- テキストリンク(点線下線+矢印) ---------- */
.text-link {
  display: inline-block;
  padding-bottom: 0.4rem;
  font-size: max(11.5px, 1.4rem);
  color: var(--sumi);
  border-bottom: 1px dotted var(--sumi);
  transition: opacity 0.25s ease-out;
}
.text-link::after {
  content: " →"; /* → 矢印(技術仕様の例外) */
  font-family: var(--font-en);
}
.text-link:hover { opacity: 0.6; }

/* ---------- 視覚非表示(読み上げ用) ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- スクロール演出 ----------
   JS工程への申し送り:
   1. 起動時に document.documentElement.classList.add('js') を必ず実行
      (jsクラスが無い時は全要素表示のまま = JS死亡時の保険)
   2. IntersectionObserverで [data-reveal] に .is-inview を付与(once相当・外さない) */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}
html.js [data-reveal].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html.js [data-reveal="clip"] {
  transform: none;
  clip-path: inset(0 0 100% 0); /* 上から下へ幕が開く */
  transition:
    opacity 0.6s var(--ease-out),
    clip-path 1.2s var(--ease-clip);
}
html.js [data-reveal="clip"].is-inview {
  clip-path: inset(0 0 0 0);
}

/* アプリ内ブラウザでは、全要素の上下移動と幕開きを重ねず、
   一度だけのフェードへ統一する。スクロール中の視覚ノイズと再描画を減らす */
@media screen and (max-width: 819px) {
  html.js [data-reveal],
  html.js [data-reveal="clip"] {
    opacity: 0;
    transform: none;
    clip-path: none;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js [data-reveal].is-inview,
  html.js [data-reveal="clip"].is-inview {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* ---------- 動きを減らす設定の尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal],
  html.js [data-reveal="clip"] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}