@charset "UTF-8";

/* =============================================================
   Pema Sherpa Site - base.css

   このファイルは次の順番で書かれています。
     1. サイト共通の変数（色・フォント・余白）
     2. ブラウザごとの差を整える基本スタイル
     3. アクセシビリティと動きの設定

   レイアウト・各パーツ・ページ固有の見た目は style.css にあります。

   ★ CSSは「スマホの見た目」を先に書き、
     @media (min-width: 768px) 以降でPC用に上書きしています。

   ★★ このCSS（またはJS）を編集してサーバーにアップロードしたのに、
      ブラウザで見た目が変わらないときは、キャッシュが原因です。
      サーバーは「一度読み込んだCSS/JSは7日間そのまま使い回してよい」
      という設定になっているため、ファイルを差し替えただけでは、
      あなた自身のブラウザも・訪問者のブラウザも、古い方を使い続けます。

      直し方は2つあります。
        1. 自分のブラウザだけ今すぐ確認したい
           → スーパーリロード（Mac: ⌘+Shift+R／Win: Ctrl+Shift+R）
        2. 訪問者にも確実に新しい方を届けたい（本番アップロード時は必須）
           → 全7ページのHTMLで、このファイルを読み込んでいる箇所の
             末尾にある "?v=2" の数字を1つ増やす（例: v=2 → v=3）
             （例：<link rel="stylesheet" href="assets/css/style.css?v=2"> ）
             CSSかJSのどちらかを直したら、両方の番号を一緒に増やせば
             管理がシンプルです。番号を変えるとURLが変わるので、
             ブラウザは「知らないファイルだ」と判断し、必ず新しい方を
             取りに行きます。
   ============================================================= */


/* =============================================================
   1. 変数（カスタムプロパティ）
   ============================================================= */
:root {
  /* --- 色（Figmaのカラーパレットと同じ） --- */
  --color-bg:        #F7F4EE; /* 背景色 */
  --color-heading:   #5C4624; /* 見出し・ボタンの枠線 */
  --color-text:      #4B433B; /* 本文の文字色 */
  --color-line:      #CFC4B8; /* 区切り線・レビューカードの背景 */
  --color-light:     #F7F4EE; /* 写真や濃い背景の上に置く文字色 */
  --color-accent:    #778799; /* サイドCTAのホバー色 */

  /* --- フォント --- */
  --font-base: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-black:   900;

  /* --- 行間・字間 --- */
  --line-height-base: 1.6;
  --letter-spacing-logo: 0.1em;
  --letter-spacing-catch: 0.35em;

  /* --- 余白（スマホの値。PCでは @media で上書き） --- */
  --gutter: 30px;         /* 画面左右の余白 */
  --container: 1200px;    /* コンテンツの最大幅 */
  --section-gap: 150px;   /* セクションとセクションの間 */
  --block-gap: 150px;     /* 見出しブロックと中身の間 */
  --header-space: 235px;  /* ページ上端から最初の区切り線までの高さ */

  /* --- その他 --- */
  --divider-width: 110px;
  --radius-button: 30px;

  /* --- お問い合わせフォーム（Googleフォーム）の高さ --- */
  /* ★ フォーム全体がそのまま収まる高さにしています。
        枠の中ではスクロールさせず、ページごとスクロールしてもらう作りです。
        （枠の中でスクロールできると、指の動きが枠内スクロールに取られて
          入力しづらい、というご指摘をいただいたためです）

        値は実際のフォームを幅ごとに測って決めました（2026年9月時点）。
          枠幅 260px → 2494px ／ 315px → 2302px
          枠幅 354px → 2208px ／ 640px → 2118px
        これに、未入力エラー（必須5項目）が出たとき用の余裕を足しています。

        ★ フォームの質問を増減すると、必要な高さも変わります。
          枠の中に縦スクロールバーが出るようになったら、この値を増やしてください。
        ★ 送信が終わると中身は短いお礼メッセージだけになります。
          そのままでは下に大きな白い余白が残るので、
          assets/js/contact-form.js が送信完了を検知して枠を縮めます。
          （画面幅ごとの上書きは style.css の最後のほうにあります） */
  --contact-form-height: 2620px;   /* 幅の狭いスマホ（〜359px） */
}


/* =============================================================
   2. リセット & ベース
   ============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: var(--weight-regular);
  font-size: 1rem;             /* 16px */
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* 全幅の写真帯がはみ出しても横スクロールさせない */
}

h1, h2, h3, h4, p, figure, dl, dd, blockquote {
  margin: 0;
}

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

img,
svg {
  display: block;
  max-width: 100%;
}

/* 画像はHTMLのwidth/height属性に縛られず、幅に合わせて高さが決まるようにする */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* キーボード操作でフォーカスした要素を必ず見えるようにする */
:focus-visible {
  outline: 2px solid var(--color-heading);
  outline-offset: 3px;
}

/* 画面には出さず、スクリーンリーダーにだけ読ませたいテキスト */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 「本文へ移動」リンク（Tabキーを押したときだけ表示） */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  background-color: var(--color-heading);
  color: var(--color-light);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* -------------------------------------------------------------
   スクロールで「ふわっと」現れるアニメーション
   ・初期状態のクラス js-reveal は JavaScript が付けます。
     （JavaScriptが無効な環境では最初から表示されたままになります）
   ・動きを減らす設定の端末では下の @media でアニメーションを無効化します。
   ------------------------------------------------------------- */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 印刷するときはアニメーション前の状態で消えないようにする */
@media print {
  .js-reveal,
  .js-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
  .drawer,
  .page-header__menu-button,
  .skip-link {
    display: none !important;
  }
}