:root {
  --font-primary: 'Roboto', 'Open Sans', sans-serif;
  --nav-width: 280px;
  --header-height: 70px;
  --transition-duration: 0.35s;
  --color-text-primary: #333;
  --color-text-secondary: #666;
  --color-accent: #c94c4c;
  --color-background-light: #f0f0f0;
  --color-background-dark: #1a1a1a;
}

/* サイト全体にスムーズスクロールを適用 */
html {
  scroll-behavior: smooth;
}

/* Lenis smooth scroll */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: 300; /* 標準のフォントウェイト */
}

/* body全体スタイル (no-scrollクラスを追加する場合) */
body.no-scroll {
  overflow: hidden;
}

/* --- ヘッダー基本構造 --- */
.header {
  background-color: #fff;
  box-sizing: border-box;
  min-height: var(--header-height);
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center; /* ロゴを中央に配置 */

  /* ヘッダー固定のためのスタイル */
  position: fixed; /* ビューポートに対して位置を固定 */
  top: 0;          /* 画面上部に配置 */
  left: 0;         /* 画面左端に配置 */
  width: 100%;     /* 幅を画面全体に広げる */
  z-index: 999;  /* 他の要素より手前に表示 (グローバルナビゲーションよりは奥) */

  /* メニュー展開時のスライドアニメーション設定 */
  transition: transform var(--transition-duration) ease-in-out;
}

/* --- 固定ヘッダーオフセットのためのページコンテナ --- */
.page-container {
  /* ヘッダーがfixedで固定されたため、その高さ分だけコンテンツ表示領域を押し下げる */
  padding-top: var(--header-height);
  box-sizing: border-box;
  /* メニュー展開時のスライドアニメーション設定 */
  transition: transform var(--transition-duration) ease-in-out;
}
.page-container.page-shifted { /* メインコンテンツもスライドさせる */
  transform: translateX(var(--nav-width));
}

/* --- ナビゲーション開閉時のヘッダー/ページへのエフェクト関連スタイル --- */
.header.header-shifted .header-logo-link {
  transform: translateX(calc(-1 * var(--nav-width)));
}
.header.header-shifted {
  transform: translateX(var(--nav-width));
}

/* --- グローバルナビゲーション基本構造 --- */
.global-nav {
  position: fixed; /* 画面固定 */
  top: 0;
  left: 0;
  width: var(--nav-width); /* メニューの幅 */
  height: 100vh; /* 画面の高さ一杯に */
  background-color: var(--color-background-dark); /* 黒背景 */
  z-index: 1000; /* ハンバーガーアイコンの奥、他のコンテンツより手前 */
  box-sizing: border-box;
  overflow-y: auto; /* メニュー項目が多い場合にスクロール可能に */
  
  transform: translateX(-100%); /* 初期状態では画面左外に隠す */
  visibility: hidden; /* 初期状態では非表示（アクセシビリティのためJSでも制御） */
  transition: transform var(--transition-duration) ease-in-out, visibility 0s var(--transition-duration); /* visibilityは遅延させる */
}

.global-nav.is-open {
  transform: translateX(0); /* 画面内にスライドイン */
  visibility: visible;
  transition: transform var(--transition-duration) ease-in-out;
}

/* General style for top-level navigation links */
.global-nav > ul > li > a {
  display: block; /* Ensures padding and width are respected */
  padding: 10px 25px; /* Consistent padding for all top-level items */
  color: #fff;
  text-decoration: none;
  box-sizing: border-box; /* Recommended for layout consistency */
}

/* アコーディオンメニュースタイル (グローバルナビゲーション内) */
.global-nav .has-submenu > .accordion-toggle { /* 修正: .nav-item を削除 */
    display: flex; /* アイコンを横並びにするため */
    justify-content: space-between; /* テキストとアイコンを両端に */
    align-items: center;
    /* padding, color, text-decoration are now inherited from the general '.global-nav > ul > li > a' rule */
    /* Ensure this rule still has higher specificity or is placed after the general rule if overriding display property */
}

.global-nav .accordion-icon {
    display: inline-block;
    display: flex; /* 中央揃えのためのFlexbox */
    align-items: center; /* 内容を垂直方向に中央揃え */
    justify-content: center; /* 内容を水平方向に中央揃え (単一文字の場合はそれほど重要ではない) */
    margin-left: 8px;
    font-weight: normal;
    font-size: 1.6em;
    transition: transform 0.3s ease; /* アイコン回転用 */
    transform-origin: center; /* 回転の中心を要素の中央に設定 */
    line-height: 1; /* アイコンの垂直位置を安定させるため */
    position: relative; /* top プロパティを有効にするため */
    top: 0;
}

.global-nav .has-submenu.active > .accordion-toggle .accordion-icon { /* 修正: .nav-item を削除 */
    transform: rotate(-180deg); /* 下向き矢印を180度回転させて上向きにする */
}

.global-nav .submenu {
    list-style: none;
    padding-left: 20px; /* サブメニューのインデント */
    max-height: 0; /* 初期状態では高さを0に */
    overflow: hidden; /* 高さが0のとき内容を隠す */
    transition: max-height 0.5s linear;
    background-color: rgba(0,0,0,0.2);
}

.global-nav .has-submenu.active .submenu { /* 修正: .nav-item を削除 */
    max-height: 500px; /* 十分な高さを指定 (サブメニューの内容に応じて調整) */
}

.global-nav .submenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* ボーダーの色を元の薄い白に戻す */
}
.global-nav .submenu li:first-child {
    border-top: none; /* 最初の項目の上枠線は非表示 */
}
.global-nav .submenu li:last-child {
    border-bottom: none; /* 最後の項目の下枠線は非表示 */
}

.global-nav .submenu li a { /* サブメニューのリンクを具体的にターゲット */
    display: block;
    padding: 8px 25px 8px 15px;
    color: #ccc;
    text-decoration: none;
    font-size: 0.9em; /* 親メニューより少し小さく */
}

.global-nav .submenu li a:hover {
    color: #fff; /* ホバー時の色 */
}

/* --- Swiper 基本構造と上書き --- */
.swiper-button-prev,
.swiper-button-next {
  z-index: 9; /* ハンバーガーメニューより奥に */
}

.swiper {
    height: 70vh !important; /* PC表示時の高さを下層ページに合わせて70vhに強制 */
    position: relative;
}
@media (max-width: 768px) {
    .swiper {
        height: 300px !important; /* スマートフォン表示時の高さを300pxに強制 */
    }
}

.hero-text {
  font-family: var(--font-primary);
  font-weight: 300; /* フォントウェイトを300に指定 */
  color: white;
  text-align: center;
  /* テキストの視認性を上げるためのシャドウ */
  text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.8);
  /* スライダーの中央に固定するためのスタイル */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5; /* スライドより手前に表示 */
  width: 90%; /* 小さな画面でテキストがはみ出ないようにする */
  box-sizing: border-box; /* padding/borderを幅の計算に含める */
}

/* --- ヒーローテキストの端末ごとの統一サイズ --- */

/* PC（タブレット以上） */
.hero-text .hero-text-line1 {
  font-size: 3.2rem;
  line-height: 1.2;
  display: block;
}
.hero-text .hero-text-line2 {
  font-size: 2rem;
  line-height: 1.4;
  display: block;
  margin-top: 8px;
}

/* タブレット */
@media (max-width: 1024px) {
  .swiper {
    height: 40vh !important; /* 1024px以下のスクリーンで高さを80vhに調整 */
  }
  .hero-text .hero-text-line1 {
    font-size: 2.2rem;
  }
  .hero-text .hero-text-line2 {
    font-size: 1.6rem;
  }
}

/* スマートフォン */
@media (max-width: 768px) {
  .hero-text .hero-text-line1 {
    font-size: 1.4rem;
    line-height: 1.1;
  }
  .hero-text .hero-text-line2 {
    font-size: 1rem;
    line-height: 1.2;
    margin-top: 4px;
  }
}

/* --- フッター基本構造 --- */
.footer-section {
  background-color: var(--color-background-light); /* フッターの背景色を薄いグレーに戻す */
  color: var(--color-text-primary); /* フッターの基本テキスト色を濃いグレーに変更 */
  padding: 30px 20px;
  text-align: center;
}
.copyright {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 0.8em;
  color: #555555; /* コピーライトのテキスト色を濃いめのグレーに変更 */
  margin-top: 20px; /* 上の要素との間にマージン */
}

/* --- Smartphone Styles (max-width: 768px) --- */
@media (max-width: 768px) { /* スマートフォンに合わせてブレークポイントを調整 */

  .header {
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .header > * { /* ヘッダーの直接の子要素をターゲット */
    margin-bottom: 10px; /* Add some space between stacked items */
  }
  .header > *:last-child {
    margin-bottom: 0;
  }

  .page-container {
    /*
      モバイル表示でヘッダー要素が縦並びになった結果、ヘッダーの実際の高さが変わります。
      ブラウザの開発者ツールでモバイル表示時の .header の高さを確認し、
      その値をここに設定してください。
      例: ヘッダーの実際の高さが 120px の場合 -> padding-top: 120px;
    */
    padding-top: 120px; /* ← ここの値を実際のヘッダーの高さに置き換えてください */
  }

  .swiper {
    height: 250px; /* スマホ: Swiperの高さをproduct.cssのヒーロー画像高さと合わせる (例: 250px) */
  }

  /* --- モバイルレイアウト用ユーティリティクラス --- */
  /* Flexboxコンテナを縦並びにするユーティリティクラス */
  .flex-column-mobile {
    flex-direction: column !important; /* 必要に応じて !important を使用 */
    align-items: stretch !important;   /* 子要素を幅いっぱいに広げる場合 */
  }
  .flex-column-mobile > * { /* flexアイテムの調整 */
    width: 100% !important;     /* 幅を100%に */
    flex-basis: auto !important; /* flex-basisをリセット/設定 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 15px; /* 積み重なったアイテム間のスペース */
  }
  .flex-column-mobile > *:last-child {
    margin-bottom: 0;
  }

  /* Gridコンテナを1カラムにするユーティリティクラス */
  .grid-1col-mobile {
    grid-template-columns: 1fr !important;
  }
}
/* style.css の終わり */