/* 共通の変数定義 */
:root {
  --pale-marron: #f2ede9; /* 背景：薄い栗色 */
  --accent-marron: #715b4f; /* アクセント */
  --text-main: #d25b3f; /* テキスト：Newsと統一したカラー */
  --text-sub: #888; /* サブテキスト用 */
  --important-color: #e63946; /* 重要事項やアクセント用 */
  --accent-hover: #5a493f; /* アクセントカラーのホバー時 */
  --card-bg: #ffffff; /* カードや情報の背景色（白） */
  --app-height: 100vh; /* iOS Safari向けのビューポート高さ */

  /* タグ用カラー：全体のトーンに合わせた、少しくすんだ色味 */
  --tag-holiday: #8da750;   /* 落ち着いたオリーブ（休日・休業） */
  --tag-delivery: #5b85a0;  /* 信頼感のあるブルーグレー（配送・事務） */
  --tag-other: #a69586;     /* 馴染みの良いグレージュ（その他） */

  --side-gutter: 120px; /* PC表示での基準余白 */
  --page-title-size: 48px;
  --page-title-mobile-size: 36px;
  --page-title-line-width: 10vw;
  --page-title-margin-top: 12vh;

  /* 全セクション共通の余白設定 */
  --section-bottom-padding: 100px;
  --section-top-padding: 1vh;
}

/* スムーズスクロールを有効化 */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* サイト全体のベース設定 */
body {
  font-family: 'Kaisei Tokumin', serif;
  background-color: var(--pale-marron);
  color: var(--text-main);
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

body.nav-open {
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Page Title Common Styles */
h2 {
  width: 100%;
  max-width: 1200px;
  font-size: var(--page-title-size);
  margin: var(--page-title-margin-top) auto 20px auto;
  display: flex;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
  text-align: left;
  padding: 0 var(--side-gutter);
  position: relative;
  z-index: 10;
  text-transform: none;
  letter-spacing: 0.1em;
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* サブタイトル(h6)の初期状態：h2と同様に隠しておく */
section:not(.hero-section) h6 {
  width: 100%;
  opacity: 0;
  transform: translateY(30px);
  margin: 0 auto 40px auto; /* h2の下に配置し、下部に余白 */
  max-width: 1200px; /* h2と横幅を揃える */
  text-align: left;
  padding: 0 var(--side-gutter);
  /* 調整場所：h2のテキスト開始位置に合わせる計算式 */
  /* 計算内訳：基準余白 + 線の幅(10vw) + 隙間(15px) */
  padding-left: calc(var(--side-gutter) + var(--page-title-line-width) + 15px);
  color: var(--text-sub);
  font-size: 16px; /* PC版のサイズ：この数値を変更して調整してください */
  will-change: transform, opacity;
}

h2::before {
  content: "";
  width: var(--page-title-line-width);
  height: 2px;
  background-color: var(--text-main);
  flex-shrink: 0;
}

/* レスポンシブ：画面幅が狭い場合は余白を自動調整 */
@media (max-width: 1024px) {
  :root {
    --side-gutter: 20px; /* スマホ・タブレットでは20pxに切り替え */
  }
}

@media (max-width: 788px) {
  h2 {
    width: 80%;
    font-size: var(--page-title-mobile-size);
    padding: 0;
  }
  h2::before {
    width: 15vw;
  }
  /* h6もレスポンシブで調整 */
  section:not(.hero-section) h6 {
    width: 80%; /* h2と横幅を揃える */
    /* モバイル用の調整場所 */
    /* モバイルはh2のpaddingが0なので、線の幅(15vw) + 隙間(15px)で計算 */
    padding-left: calc(15vw + 15px);
    font-size: 16px; /* モバイル版のサイズ：この数値を変更して調整してください */
  }
}