/*
 * =========================================================
 *  Route Designer Service Theme (v2.0 - Section Layout)
 *  Owner: POPO
 * =========================================================
 */

/* --- ① テーマカラーの定義 --- */
:root {
  --theme-accent-primary: #ff7a5c;   /* POPO様のオレンジ */
  --theme-accent-secondary: #0b27ff; /* POPO様のエメラルド */
  --theme-deep: #233347;
  
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);

  --bg-base: #121922;
  --bg-surface-primary: rgba(22, 35, 48, 0.75);
  --bg-surface-secondary: rgba(255, 180, 90, 0.08);

  --border-primary: 1px solid rgba(255, 255, 255, 0.16);
  --border-secondary: 1px solid rgba(255, 255, 255, 0.08);

  /* セクションごとの背景オーバーレイ */
  --overlay-section1: rgba(18, 25, 34, 0.7);
  --overlay-section2: rgba(14, 22, 32, 0.8);
  --overlay-section3: rgba(9, 28, 40, 0.85);
  --overlay-section4: rgba(12, 24, 32, 0.88);
  --overlay-section5: rgba(10, 18, 28, 0.9);
  --overlay-section6: rgba(6, 16, 22, 0.92);
}

/* --- ② PC専用レイアウトのテーマカラー適用 --- */
@media (min-width: 1024px) {
  /* 左側メニュー */
  body[data-owner="popo"] #pc-nav nav li a.active,
  body[data-owner="popo"] #pc-nav nav li a:hover {
    background: linear-gradient(90deg, var(--theme-accent-primary), var(--theme-accent-secondary));
    color: #1a232f;
    font-weight: bold;
    box-shadow: 0 5px 20px rgba(48, 196, 168, 0.2);
  }
  /* 左上ロゴ */
  body[data-owner="popo"] #pc-nav .brand-logo a {
    text-shadow: 0 0 10px var(--theme-accent-secondary);
    font-size: 1.5rem; 
  }
}

/* --- ③ 共通コンポーネントのデザイン適用 --- */

/* 見出しの下線 */
.section-title::after {
  background: linear-gradient(90deg, var(--theme-accent-primary), var(--theme-accent-secondary));
}

/* --- ④ POPO様オリジナルのコンポーネントスタイル --- */
/* (新しいレイアウト構造に合わせてセレクタを調整) */

/* トップページのキャッチコピー */
.hero-catchphrase .eyebrow {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(48, 196, 168, 0.18);
  color: #d4fff5;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 動画セクションの文字サイズ */
.video-section-content h2 { font-size: 1.5rem; margin-bottom: 20px; text-align:center; }
.video-section-content .note { line-height: 1.8; }

/* コンセプトセクション */
.problem-image-container { margin: 20px 0; }
.problem-image-container img { max-width: 100%; height: auto; border-radius: 12px; }
.balloons { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.balloon { padding: 10px 20px; border-radius: 20px; max-width: 80%; }
.balloon.yellow { background: #ffb347; color: #1a232f; }
.balloon.green { background: #30c4a8; color: #1a232f; }
.solution-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 30px; }
.solution-image img { border-radius: 12px; }

/* プランカード */
.plan-card {
  background: linear-gradient(160deg, rgba(20, 34, 48, 0.8), rgba(12, 22, 30, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  margin-bottom: 24px;
  padding: 24px;
}
.plan-head { border-bottom: var(--border-secondary); padding-bottom: 12px; margin-bottom: 12px; }
.plan-spec { list-style: none; padding: 0; margin-bottom: 20px; }
.plan-spec strong { color: #ffe6c4; }
.plan-card .cols { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .plan-card .cols { grid-template-columns: 1fr 1fr; }
}

/* 比較表 */
.compare-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.compare-table th, .compare-table td { background: rgba(12, 24, 32, 0.7); border: var(--border-secondary); padding: 18px; text-align: left; }
.compare-table th { font-weight: 800; color: #ffe6c4; }

/* チェックリスト */
.check, .proof-list { list-style: none; padding-left: 0; }
.check li, .proof-list li { padding-left: 1.5em; position: relative; margin-bottom: 8px; }
.check li::before { content: '✔'; color: var(--theme-accent-secondary); position: absolute; left: 0; }
.proof-list li::before { content: '◆'; color: var(--theme-accent-primary); position: absolute; left: 0; }

/* FAQリスト */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: var(--border-secondary); border-radius: 12px; overflow: hidden; }
.faq-item dt { font-weight: bold; padding: 15px 40px 15px 20px; cursor: pointer; position: relative; }
.faq-item dt::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5em; transition: transform 0.3s; }
.faq-item.is-open dt::after { transform: translateY(-50%) rotate(45deg); }
/* FAQリスト */
/* ... */
.faq-item dd {
  max-height: 0;
  overflow: hidden;
  /* ★ paddingのアニメーションを削除し、max-heightのみに絞る */
  transition: max-height 0.35s ease-in-out; 
  color: var(--text-secondary);
  
  /* ★ paddingは常に設定しておく */
  padding: 0 20px;
}

.faq-item.is-open dd {
  /* ★ is-openでは、max-heightの計算に必要なpadding-bottomだけを追加する */
  padding-bottom: 20px;
}

/* お問い合わせフォーム */
.cta-box { background-color: var(--bg-surface-secondary); padding: 20px; border-radius: 12px; margin-bottom: 20px; text-align: center; }
.cta-final-lead, .contact-description { text-align: center; margin: 20px 0; }
textarea.input { background-color: rgba(0,0,0,0.3); border: var(--border-secondary); color: white; border-radius: 12px; }
.copy-btn {
  display: block; width: 100%; margin-top: 16px;
  background: linear-gradient(90deg, var(--theme-accent-primary), var(--theme-accent-secondary));
  border: none; color: #1a232f; font-weight: 800; padding: 14px 20px;
  border-radius: 999px; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease;
}
.copy-btn:hover { transform: scale(1.05); filter: brightness(1.05); }
#copy-alert { background-color: var(--theme-accent-secondary); color: #1a232f; font-weight: bold; padding: 12px; border-radius: 8px; text-align: center; margin-top: 16px; }

/* プロフィールカード */
.profile-contact-card { margin-top: 40px; }
.profile-contact-card .icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.profile-contact-card .icon-link {
  background: rgba(14, 26, 36, 0.85); border: var(--border-secondary); border-radius: 14px;
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.profile-contact-card .icon-link:hover { transform: translateY(-2px); border-color: rgba(255, 180, 90, 0.6); }
.profile-contact-card .icon-link img { width: 28px; height: 28px; }

/* フッター */
#footer .footer-nav { display: flex; justify-content: center; gap: 20px; margin: 10px 0; }
/* ------------------------------
   11) Utilities (必要時のみ)
---------------------------------*/
.u-text-center { text-align: center; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-sm { margin-bottom: 8px; }
.u-mb-md { margin-bottom: 16px; }
.u-mb-lg { margin-bottom: 24px; }

/* ------------------------------
   12) Focus visibility (アクセシビリティ)
---------------------------------*/
:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid var(--route-emerald);
  outline-offset: 2px;
  border-radius: 8px;
}
/* dl.faq-list > div.faq-item > dt + dd 用 */
.faq-list { display: grid; gap: 20px; border-top: var(--border-secondary); }
.faq-item { padding: 16px 0; border-bottom: var(--border-secondary); overflow: hidden; }

.faq-item dt{
  font-size:1.1rem; font-weight:800; margin:0; cursor:pointer;
  position:relative; padding:16px 42px 16px 0; transition:color .3s;
}
.faq-item dt::before, .faq-item dt::after{
  content:''; position:absolute; right:10px; top:50%; width:16px; height:2px;
  background-color: var(--text-primary); transform: translateY(-50%);
  transition: transform .3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.faq-item dt::after{ transform: translateY(-50%) rotate(90deg); }
.faq-item.is-open dt::before{ transform: translateY(-50%) rotate(45deg); }
.faq-item.is-open dt::after{  transform: translateY(-50%) rotate(-45deg); }

.faq-item dd{
  margin:0; padding-top:0; color:var(--text-secondary); line-height:1.8;
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .45s ease, opacity .35s ease, padding-top .45s ease;
}
.faq-item.is-open dd{ opacity:1; padding-top:12px; } /* 高さはJSがpxで入れる */

/* お問い合わせフォームの横幅を調整 */
.textarea-container {
  width: 100%;
  box-sizing: border-box; /* パディングやボーダーを幅の内側に含めるための推奨設定 */
}

/* 「電車に例えると…」のセクションのレイアウト調整 */

/* 画像のコンテナ設定 */
.problem-image-container {
  margin-bottom: 32px; /* 画像と下のテキストの間に余白を追加 */
  text-align: center;  /* キャプションを中央揃えに */
}

/* 画像自体の設定 */
.problem-image-container img {
  width: 100%; /* 横幅いっぱいに表示 */
  max-width: 500px; /* ただし、PCで見たときに大きくなりすぎないように最大幅を指定 */
  height: auto; /* 高さは自動調整して、画像の比率を保つ */
  display: block; /* 画像の下にできる余計な隙間をなくす */
  margin: 0 auto; /* 中央に配置 */
  border-radius: 12px; /* 角を少し丸めるとデザインに馴染みます */
}

/* キャプション（「電車に例えると…」の文字）の設定 */
.problem-image-container figcaption {
  margin-bottom: 12px; /* 画像とキャプションの間に余白 */
  font-size: 1.1rem;
  font-weight: bold;
}

/* ========================================================= */
/*  動画下のSNSリンクを、プロフィールカードと同じデザインに修正  */
/* ========================================================= */

/* リンクボタンを囲むコンテナのスタイル */
#video-hero .sns-links {
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 画面幅に応じて列数を自動調整 */
  gap: 16px; /* ボタン間の隙間 */
  margin-top: 32px; /* 上の文章との余白 */
}

/* 個別のリンクボタンのスタイル */
#video-hero .sns-links a {
  /* --- 基本的なデザイン (profile-contact-cardから流用) --- */
  background: rgba(14, 26, 36, 0.85); /* 背景色 */
  border: 1px solid rgba(255, 255, 255, 0.12); /* 枠線 */
  border-radius: 14px; /* 角の丸み */
  padding: 16px 20px; /* 内側の余白 */
  
  /* --- テキストと配置の調整 --- */
  display: block; /* paddingなどを有効にするため */
  text-align: center; /* 文字を中央揃え */
  color: #ffffff; /* 文字色 */
  font-weight: bold; /* 文字を太字に */
  text-decoration: none; /* 下線を削除 */
  
  /* --- アニメーションの設定 (profile-contact-cardから流用) --- */
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* マウスを乗せた時のスタイル */
#video-hero .sns-links a:hover {
  transform: translateY(-2px); /* 少し上に浮かび上がる */
  border-color: rgba(255, 180, 90, 0.6); /* 枠線の色をアクセントカラーに変更 */
  background-color: rgba(40, 58, 74, 0.85); /* 背景色を少し明るく */
}
/*
 * =========================================================
 *  ⑤ トップページのキャッチコピー スタイル調整 (レスポンシブ対応)
 * =========================================================
 */

/* --- キャッチコピー全体の基本設定 --- */
.hero-catchphrase {
  position: absolute; /* 親セクション(section1)を基準に位置を決めます */
  width: 90%; /* 横幅は画面の90% */
  z-index: 3; /* 他の要素より手前に表示 */
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* --- モバイル表示 (画面幅が768px以下の場合) のスタイル --- */
@media (max-width: 768px) {
  .hero-catchphrase {
    bottom: 120px; /* 画面下からの位置 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center; /* 文字を中央揃えに */
    max-width: 500px;
  }
  .hero-catchphrase .main-line {
    font-size: 2.0rem; /* メインの文字サイズ */
  }
  .hero-catchphrase .sub-line {
    font-size: 0.9rem; /* サブの文字サイズ */
  }
}

/* --- PC表示 (画面幅が1024px以上の場合) のスタイル --- */
@media (min-width: 1024px) {
  body[data-owner="popo"] .hero-catchphrase {
    top: 45%; /* 画面上から45%の位置 (少し上め) */
    left: 50%;
    transform: translate(-50%, -50%); /* 上下左右中央揃え */
    text-align: center;
    max-width: 800px; /* PCでは横幅を広く */
  }
  body[data-owner="popo"] .hero-catchphrase .main-line {
    font-size: 3.0rem; /* PCでは文字を大きく */
  }
  body[data-owner="popo"] .hero-catchphrase .sub-line {
    font-size: 1.1rem; /* PCでは文字を大きく */
  }
}
/*
 * =========================================================
 *  ⑥ モバイルヘッダーのデザインを刷新 (改訂版)
 *  - タイトルの背景色は削除し、ハンバーガーメニューのデザインを適用
 * =========================================================
 */
@media (max-width: 1023px) {

  /* --- ヘッダーの高さを揃えるための調整 --- */
  body[data-owner="popo"] #header {
    align-items: center; /* ロゴとメニューを垂直方向に中央揃え */
  }

  /* --- ロゴ/タイトルのスタイル (背景をなくし、シンプルに) --- */
  body[data-owner="popo"] #header .logo a {
    background-color: transparent; /* 背景色を削除 */
    padding: 0; /* 余白を削除 */
    font-size: 1.0rem; /* スマホで見やすいサイズに調整 */
    text-shadow: 0 1px 4px rgba(0,0,0,0.5); /* 読みやすさのための影 */
    max-width: none; /* 幅の制限を解除 */
  }

  body[data-owner="popo"] #header .logo a span {
    background-color: transparent; /* 背景色を削除 */
    padding: 0;
    text-align: left; /* 左揃えに戻す */
  }

  /* --- ハンバーガーメニューアイコンのスタイリング (こちらをメインに変更) --- */
  body[data-owner="popo"] #header .nav-toggle {
    width: 44px;
    height: 44px;
    background-color: var(--theme-accent-primary); /* POPO様のテーマカラー(オレンジ)を適用 */
    border-radius: 8px; /* 少し角を丸める */
    transition: background-color 0.3s ease;
  }
  
  /* スクロールしても背景色が変わらないように、共通CSSを上書き */
  body[data-owner="popo"] #header.scrolled .nav-toggle,
  body[data-owner="popo"] #header:not(.scrolled) .nav-toggle {
      background-color: var(--theme-accent-primary); /* 常にオレンジ色を維持 */
  }

  /* アイコン内の3本線の位置を中央に調整 */
  body[data-owner="popo"] #header .nav-toggle span {
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
  }
  body[data-owner="popo"] #header .nav-toggle span:nth-child(1) { top: 12px; }
  body[data-owner="popo"] #header .nav-toggle span:nth-child(2) { top: 21px; }
  body[data-owner="popo"] #header .nav-toggle span:nth-child(3) { top: 30px; }

}
/*
 * =========================================================
 *  ⑦ トップセクション(section1)の中央揃えを修正
 * =========================================================
 */

/* --- section1内のコンテンツを上下左右中央に配置 --- */
section#section1 .section-content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向の中央揃え */
  align-items: center;   /* 水平方向の中央揃え */
  gap: 25px; /* 各要素間の隙間 */
  text-align: center; /* テキストも中央揃えに */
}

/* --- キャッチコピーの位置指定をリセット --- */
section#section1 .hero-catchphrase {
  position: static; /* absolute指定を解除し、通常の配置に戻す */
  transform: none;  /* transform指定を解除 */
  width: 100%;
}

/* --- 動画の最大幅を指定して、大きくなりすぎるのを防ぐ --- */
section#section1 .video-frame {
  width: 100%;
  max-width: 640px; /* 動画の最大幅（お好みで調整可） */
  border-radius: 12px;
  overflow: hidden; /* 角丸をビデオに適用 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
section#section1 .video-frame video {
  width: 100%;
  display: block;
}

/* --- 説明文の最大幅を指定 --- */
section#section1 .note {
  max-width: 640px; /* 動画の幅と合わせると綺麗です */
  text-align: left; /* 長文なので左揃えの方が見やすい */
  line-height: 1.8;
}
/*
 * =========================================================
 *  ⑧ コンセプトセクションの画像が収まるようにレスポンシブ対応
 * =========================================================
 */

/* --- 「全媒体を“直通”にする」の画像コンテナのスタイル --- */
.solution-wrap .solution-image {
  width: 100%; /* コンテナの幅いっぱいに広がる */
  margin-top: 24px; /* 上の吹き出しとの間に余白を追加 */
}

/* --- 画像自体のスタイル --- */
.solution-wrap .solution-image img {
  max-width: 100%;  /* ★最重要：画像の幅をコンテナの100%までに制限 */
  height: auto;     /* ★最重要：画像の縦横比を維持する */
  display: block;   /* 画像の下にできる余計な隙間をなくす */
  margin: 0 auto;   /* 中央に配置 */
  border-radius: 18px; /* 他の要素と合わせて角を丸める */
}
/*
 * =========================================================
 *  ⑨ トップセクションの文章ブロックの視認性向上
 * =========================================================
 */

section#section1 .note {
  /* 1. カードのような背景と枠線を追加 */
  background-color: rgba(22, 35, 48, 0.6); /* 半透明の背景を追加 */
  backdrop-filter: blur(5px); /* 背景を少しぼかして、すりガラスのような質感に */
  border: 1px solid rgba(255, 255, 255, 0.1); /* うっすらとした枠線 */
  border-radius: 12px; /* 角を丸める */
  padding: 25px 30px; /* 内側に十分な余白を持たせる */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* 影をつけて立体感を出す */

  /* 2. 左側にアクセントラインを追加して視線を誘導 */
  border-left: 4px solid var(--theme-accent-secondary); /* テーマカラーのエメラルドを使用 */

  /* 3. 文字の読みやすさを向上 */
  line-height: 1.9; /* 行間を広げて読みやすく */
  color: var(--text-secondary); /* 純白より少しだけ落ち着いた白に */
  
  /* 4. レイアウトの最終調整 */
  margin-top: 25px; /* 動画との間に少しスペースを確保 */
}
/*
 * =========================================================
 *  【最終修正】モバイル表示を完全なLPスクロールに変更 (POPO様専用)
 * =========================================================
 */
@media (max-width: 1023px) { /* スマホとタブレットに適用 */

  /* --- 1. TikTok風のスクロールを無効化 --- */
  html {
    scroll-snap-type: none !important;
  }

  /* --- 2. 各セクションの基本スタイル --- */
  .full-screen {
    height: auto !important;
    min-height: auto !important;
    padding: 80px 20px; /* セクション間の余白 */
  }

  /* ★★★ ここからが今回の修正の核心です ★★★ */

  /* ★特別ルール①：新しいトップ(section0)を画面いっぱいに表示 */
  /*
 * =========================================================
 *  【改訂版】トップ(section0)のレイアウトと文字スタイル調整
 * =========================================================
 */
@media (max-width: 1023px) {

  /* --- トップセクション(section0)の全体設定 --- */
  #section0.full-screen {
    min-height: 100vh !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: flex-end !important; /* コンテンツを下揃えに */
    justify-content: center !important;
    padding-bottom: 1px !important; /* ← ★現在の値 */
  }

  /* --- キャッチコピー(.hero-catchphrase)全体の調整 --- */
  #section0 .hero-catchphrase {
      position: static !important;
      transform: none !important;
      text-align: center; /* ★ご要望通り、中央揃えに戻しました */
      width: 100%;
  }

  /* --- (1) 「現場即戦力〜」タグのスタイル --- */
  #section0 .hero-catchphrase .eyebrow {
    /* ★レイヤー問題を解決し、視認性を向上させるスタイル */
    background-color: rgba(48, 196, 168, 0.8) !important; /* 半透明度を上げて色を濃く */
    color: #ffffff !important; /* 文字色を白に */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 文字に少し影を追加 */
    backdrop-filter: blur(4px); /* 背景を少しぼかす */
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 18px; /* 少し大きめに調整 */
  }

  /* --- (2) メインタイトル「お店のめんどくさいこと全部お任せ」のスタイル --- */
  #section0 .hero-catchphrase .main-line {
    color: #ffffff;
    /* ★視認性向上のための強力なテキストシャドウ */
    text-shadow: 0 0 15px rgba(0,0,0,0.8), 0 2px 5px rgba(0,0,0,0.9);
    
    /* ★★★ ここで文字サイズを自由に調整できます ★★★ */
    font-size: 1.8rem; 
  }

  /* --- (3) 説明文のスタイル --- */
  #section0 .hero-catchphrase .sub-line {
    color: #f0f0f0; /* 純白より少しだけ落ち着いた色に */
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    
    /* ★★★ ここで文字サイズを自由に調整できます ★★★ */
    font-size: 1.0rem;
    line-height: 1.8;
  }
}

  

  /* --- 3. セクション内のスクロールを無効化 (変更なし) --- */
  .section-content {
    overflow-y: visible !important;
    flex-grow: 1;
  }
}

/*
 * =========================================================
 *  【最重要】トップセクションの背景画像を強制的に指定
 * =========================================================
 */

/*
 * JavaScriptによる動的な画像設定を上書きし、
 * POPO様のページでは常に指定の画像が表示されるようにします。
 */
body[data-owner="popo"] #section0.full-screen {
  background-image: url('/players/popo/img_1.jpg') !important;
}

/*
 * =========================================================
 *  【追加】section1内の横スクロール画像スライダー
 * =========================================================
 */

/* スライダー全体を囲むコンテナ（見える範囲を定義） */
.image-slider-container {
  width: 100%;
  max-width: 800px;
  margin: 40px auto 0 auto;
  position: relative;
  /* 左右の端をグラデーションで少し隠して、スライドできることを示唆 */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 実際にスクロールするトラック部分 */
.image-slider-track {
  display: flex; /* ★最重要：中のアイテムを横一列に並べる */
  overflow-x: auto; /* ★最重要：横方向のスクロールを有効にする */
  scroll-snap-type: x mandatory; /* ★スワイプした時にアイテム単位でピタッと止まる魔法 */
  -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを滑らかに */
  
  /* 最初と最後のアイテムが中央に来るように余白を設定 */
  padding: 0 10%; 

  /* 見た目を綺麗にするため、スクロールバーを非表示に */
  scrollbar-width: none; /* Firefox */
}
.image-slider-track::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* スライダー内の各画像アイテム */
.slider-item {
  flex: 0 0 75%; /* アイテムの幅をコンテナの75%に固定。隣の画像が少し見えるように */
  scroll-snap-align: center; /* アイテムがコンテナの中央でスナップするように */
  margin: 0 10px; /* アイテム間の隙間 */
}

/* 画像自体のスタイル */
.slider-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* PC表示ではアイテムの幅を少し狭くする */
@media (min-width: 768px) {
  .slider-item {
    flex-basis: 60%;
  }
}
/*
 * =========================================================
 *  【修正】画像スライダーのナビゲーション矢印 (モバイルでも表示)
 * =========================================================
 */

/* 矢印ボタンの基本スタイル */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  
  width: 44px;
  height: 44px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: white;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  
  cursor: pointer;
  transition: background-color 0.2s ease;
  
  /* ★★★ display: none; の行を削除しました ★★★ */
  /* これで、どの画面サイズでも常に表示されるようになります */
  display: block; 
}

/* 
 * PC表示用の @media ルールは不要になったため削除しました。
 * display: block; が最初から設定されているためです。
 */

.slider-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 左矢印の位置 */
.slider-arrow-prev {
  left: 15px;
}

/* 右矢印の位置 */
.slider-arrow-next {
  right: 15px;
}
/*
 * =========================================================
 *  【追加】フッター等のプロフィールリンクのスタイル
 * =========================================================
 */

/* リンクボタンのコンテナ */
.profile-contact-card .icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 画面幅に応じて列数を自動調整 */
  gap: 16px;
}

/* 個別のリンクボタン */
.profile-contact-card .icon-link {
  background: rgba(14, 26, 36, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-contact-card .icon-link:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 180, 90, 0.6);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* アイコン画像 */
.profile-contact-card .icon-link img {
  width: 28px;
  height: 28px;
  flex-shrink: 0; /* コンテナが狭くなっても画像が縮まないように */
}

/* テキスト部分 */
.profile-contact-card .icon-link span {
  font-weight: bold;
  line-height: 1.4;
}
/*
 * =========================================================
 *  【追加】プロフィール写真のサイズと形を調整
 * =========================================================
 */

/* 写真とキャプションを囲むコンテナ */
.profile-image-container {
  max-width: 300px; /* ★写真の最大サイズをここで調整できます */
  margin: 40px auto; /* 上下に余白を空けて、左右中央に配置 */
  text-align: center; /* キャプションを中央揃えに */
}

/* 画像の表示領域を正方形にする */
.profile-image-container img {
  width: 100%; /* 親要素の幅いっぱいに広がる */
  aspect-ratio: 1 / 1; /* ★最重要：アスペクト比を1:1(正方形)に固定 */
  
  object-fit: cover; /* ★最重要：比率を保ったまま、領域いっぱいに画像を拡大・トリミング */
  
  border-radius: 18px; /* 角を少し丸める */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* 影をつけて立体感を出す */
}

/* キャプション(figcaption)のスタイル */
.profile-image-container figcaption {
  margin-top: 15px; /* 写真との間に余白 */
  font-weight: bold;
  color: var(--text-secondary);
}
/*
 * =========================================================
 *  【追加】プロフィール内の「お問い合わせへ」リンクをボタン化
 * =========================================================
 */

/* リンクを囲むpタグの調整 */
.cta-final-lead {
  margin-top: 25px; /* 上の文章との間に余白を確保 */
  text-align: center; /* ボタンを中央に配置 */
}

/* 「お問い合わせへ」の a タグをボタンデザインに */
.cta-final-lead a {
  /* 1. ボタンの基本デザインを他のボタンから流用 */
  display: inline-block; /* paddingやwidthを有効にするため */
  background: linear-gradient(90deg, var(--theme-accent-primary), var(--theme-accent-secondary));
  color: #ffffff; /* 暗い文字色でコントラストを確保 */
  font-weight: 800;
  padding: 14px 40px; /* 内側の余白を少し広めに */
  border-radius: 999px; /* 角を丸めてカプセル型に */
  text-decoration: none; /* 下線を削除 */
  
  /* 2. ホバー（マウスを乗せた時）のアニメーション */
  transition: transform 0.2s ease, filter 0.2s ease;
}

.cta-final-lead a:hover {
  transform: scale(1.05); /* 少し拡大 */
  filter: brightness(1.05); /* 少し明るくする */
}