@charset "utf-8";
/* =========================================================================
   base.css  ―  reset / variables / typography / utilities (u-*)
   里やま工房 satoyama_ver2  TOPリニューアル
   Figma: TOPデザイン(PC 1440) / TOPデザイン(SP 390)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. CSS Variables (:root)  ―  Figmaトークン由来
   ------------------------------------------------------------------------- */
:root {
  /* ----- Color ----- */
  --c-white:      #ffffff;
  --c-black:      #121212;
  --c-brown:      #77252b;   /* アクセント（ブラウン） */
  --c-dark-black: #2d2519;   /* テクスチャ背景等 */
  --c-gray-line:  #888888;   /* 罫線・サブテキスト */
  --c-bg:         #ffffff;
  /* KVグラデーション（Figma: linear-gradient 14.56deg） */
  --c-kv-overlay-1: rgba(134, 94, 61, 0.7);
  --c-kv-overlay-2: rgba(134, 94, 61, 0);

  /* ----- Font family ----- */
  --f-mincho:   YakuHanMP,"Zen Old Mincho", "Yu Mincho", "YuMincho", serif;
  --f-serif-en: "Playfair Display", serif;             /* 英字見出し(Concept等) */
  --f-gothic:   YakuHanMP,"YuGothic", "Yu Gothic", serif;
  --f-base:     var(--f-mincho);

  /* ----- Font size (PC) ----- */
  --fs-title:    32px;   /* セクション見出し */
  --fs-subtitle: 28px;
  --fs-lg:       24px;
  --fs-text:     16px;   /* 本文(PC) */
  --fs-sm:       14px;
  --fs-xs:       13px;

  /* ----- Letter spacing（Figmaの%指定をemへ） ----- */
  --ls-title: 0.08em;   /* 8% */
  --ls-text:  0.05em;   /* 5% */
  --ls-en:    0.10em;

  /* ----- Line height ----- */
  --lh-tight: 1.2;
  --lh-base:  2;
  --lh-quote: 2.6;

  /* ----- Layout ----- */
  --container:      1200px;
  --container-pad:  20px;
  --header-h:       68px;

  /* ----- Spacing scale ----- */
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 120px;

  /* ----- Misc ----- */
  --transition: 0.4s ease;
}

/* -------------------------------------------------------------------------
   2. Reset (modern-normalize ベースの簡易版)
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 { overflow-wrap: break-word; }

ul,
ol { list-style: none; padding: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition);
}
a:hover { opacity: 0.7; }

/* -------------------------------------------------------------------------
   3. Typography（base）
   ------------------------------------------------------------------------- */
body {
  font-family: var(--f-base);
  font-size: var(--fs-text);
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: var(--ls-text);
  background: var(--c-bg);
}

/* 本文の基準サイズはここで一元管理（PC:16px / SP:14px）。
   旧 style-custom.css の `p{font-size:15px}` を上書きして引き継がせない。 */
p {
  font-size: var(--fs-text);
  line-height: var(--lh-base);
}

h1, h2, h3, h4 {
  font-family: var(--f-mincho);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
}

/* -------------------------------------------------------------------------
   4. Utilities (u-*)
   ------------------------------------------------------------------------- */
.u-mincho   { font-family: var(--f-mincho); }
.u-gothic   { font-family: var(--f-gothic); }
.u-en       { font-family: var(--f-serif-en); }

.u-brown    { color: var(--c-brown); }
.u-white    { color: var(--c-white); }
.u-black    { color: var(--c-black); }

.u-center   { text-align: center; }
.u-right    { text-align: right; }

.u-vertical { writing-mode: vertical-rl; }      /* 縦書き */

/* PC/SP 出し分け */
.u-pc { display: block; }
.u-sp { display: none; }

/* スクリーンリーダー専用 */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* テクスチャ全幅背景（茶系和紙）
   付与した要素の領域に、画面幅いっぱい(100vw)で bg-texcha を敷き詰める。
   TOPの施工事例(#case)・コンセプトのパッシブデザイン背景などで共用。 */
.u-bg-texcha { position: relative; z-index: 0; }
.u-bg-texcha::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background: url("../img/top/bg-texcha.webp") repeat;
}

/* スクロールで「ふわっと」表示（JSが .js-reveal を付与した要素のみ対象）。
   下から上へ + フェードイン。.is-revealed が付くと表示される。
   ※ JS未実行/非対応時は素の表示のまま（要素を隠さない）。 */
.js-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media screen and (max-width: 767px) {
  .u-pc { display: none; }
  .u-sp { display: block; }
}

/* 電話番号リンク：PC（768px以上）では発信不可（プレーンテキスト扱い）、スマホでは発信可 */
@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    color: inherit;
  }
}