/* ====================================================================
   【固定ページ専用】白背景・実用性重視のクリーンなCSS（page.css）
   ※トップページのstyle.cssとは完全に独立しているため、他が崩れるリスクは0です。
   ==================================================================== */

/* 1. 基本リセット -------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff; /* 👈 完全な白背景 */
  color: #334155;            /* 読みやすいダークグレー文字 */
  font-family: sans-serif;
  overflow-y: auto;          /* 通常の快適な縦スクロールを許可 */
}

/* 2. 共通ヘッダー（白背景用にカラーを最適化） ----- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  background-color: rgba(255, 255, 255, 0.9); /* 白い半透明ヘッダー */
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 110 !important; 
  transition: height 0.3s;
}

.header-logo img {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* 💻 パソコン用メニューの設定 */
.nav-desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nav-desktop a {
  color: #334155; /* メニューの文字を濃いグレーに */
  text-decoration: none;
  margin-left: 25px;
  font-size: 0.9rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 8px;
  transition: color 0.3s ease;
}

.nav-desktop a:hover {
  color: #0284c7; /* ホバー時は鮮やかな青 */
}

/* 中央からシュッと伸びる上品な青い下線（発光はオフ） */
.nav-desktop a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background-color: #0284c7;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-desktop a:hover::after {
  width: 100%;
}

/* 🍔 スマホ用ハンバーガーボタン（パソコン時は絶対に非表示） */
.burger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
  z-index: 120 !important; 
}
.burger-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #0f172a; /* 👈 三本線の色を【黒】に変更して視認性を確保 */
  position: absolute;
  left: 0;
  transition: transform 0.4s ease, top 0.4s ease, background-color 0.3s;
}
.burger-btn span:first-child { top: 4px; }
.burger-btn span:last-child { top: 18px; }
.burger-btn span:first-child::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0f172a;
}

/* ボタンが押されてバツ印になった時 */
.burger-btn.is-active span:first-child::after { opacity: 0; }
.burger-btn.is-active span:first-child { top: 11px; transform: rotate(45deg); background-color: #38bdf8; }
.burger-btn.is-active span:last-child { top: 11px; transform: rotate(-45deg); background-color: #38bdf8; }


/* 3. 📱 スマホ用・乳白色のすりガラスメニュー ------ */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.85); /* 👈 背景を【白透過】にして乳白色ガラスに */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
  z-index: 105;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.nav-mobile a {
  font-family: 'Montserrat', sans-serif;
  color: #0f172a; /* 文字を黒に */
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; }
.nav-mobile a:hover, .nav-mobile a:active { color: #0284c7; }


/* 4. <main> コンテンツエリア（実用性重視） -------- */
.fixed-page-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 20px 80px 20px; /* ヘッダーを避ける上部余白 */
}

.page-header {
  margin-bottom: 60px;
  text-align: center;
}
.page-header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: #0f172a; /* 濃紺 */
  margin-bottom: 10px;
}
.page-header p {
  font-size: 0.95rem;
  color: #64748b;
}


/* 5. 共通フッター -------------------------------- */
.footer {
  width: 100%;
  padding: 40px 60px;
  background-color: #0f172a; /* ミッドナイトネイビーの美しい帯 */
  position: relative;
  z-index: 10;
}
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; }
.footer-logo { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.1rem; letter-spacing: 2px; color: #ffffff; margin-bottom: 8px; }
.footer-address { font-size: 0.8rem; color: #94a3b8; }
.footer-links { text-align: right; }
.footer-nav { margin-bottom: 12px; }
.footer-nav a { color: #cbd5e1; text-decoration: none; font-size: 0.8rem; margin-left: 20px; transition: color 0.3s; }
.footer-nav a:hover { color: #38bdf8; }
.copyright { font-size: 0.75rem; color: #64748b; letter-spacing: 0.05em; }


/* ====================================================================
   📱 スマホ画面（768px以下）の完全レスポンシブ
   ==================================================================== */
@media (max-width: 768px) {
  .header { padding: 0 24px; height: 70px; }
  .nav-desktop { display: none; } /* 👈 PC用メニューを一発で非表示 */
  .burger-btn { display: block; }   /* 👈 ハンバーガーボタンを一発で大復活 */
  
  .fixed-page-content { padding-top: 110px; }
  .page-header h1 { font-size: 2rem; }
  
  .footer { padding: 30px 24px; }
  .footer-inner { flex-direction: column; align-items: center; gap: 25px; text-align: center; }
  .footer-links { text-align: center; }
  .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 15px; }
  .footer-nav a { margin-left: 0; }
}

/* ==================================================
   【新設】白背景ページ専用：モダンメールフォームCSS
   ================================================== */
.contact-form {
  max-width: 680px; /* 👈 フォームが横に広がりすぎず、最も入力しやすいプロ推奨の横幅 */
  margin: 0 auto;
  text-align: left;
}

.form-group {
  margin-bottom: 28px; /* 入力欄同士の縦の間隔 */
}

/* ラベル（項目名）の文字 */
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  color: #0f172a; /* 濃紺 */
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}

/* 「必須」の赤いバッジ */
.badge-required {
  font-size: 0.75rem;
  background-color: #ef4444; /* パキッとした赤 */
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* 入力ボックス（文字入力・メール入力・メッセージ本文）の通常時 */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1; /* 通常時は上品なライトグレーのフチ */
  border-radius: 6px;
  color: #0f172a;
  font-size: 1rem;
  outline: none; /* ブラウザ標準の青い太枠線を消去 */
  
  /* フチの色と影が変化するときのなめらかなスピード設定 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  
  /* 文字の入力感を滑らかにするため、iOSなどのデフォルトの立体影を消去 */
  -webkit-appearance: none;
  appearance: none;
}

/* 
  💡【フォーカス時のリッチな発光演出】
  ユーザーが入力欄をクリックした瞬間、トップページの世界観を彷彿とさせる
  鮮やかな「シアンブルー（#38bdf8）」の細い枠線とグロウの光がフワーッと灯ります！
*/
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
  background-color: #fcfdfe; /* 👈 入力中のボックスをほんのり明るくして、どこに入力しているか分かりやすくします */
}

/* 選択ボックス（セレクト）専用の矢印用ラッパー */
.select-wrapper {
  position: relative;
  width: 100%;
}
/* セレクトボックスの右側に下向きのシンプルな矢印（ ⌄ ）を自作します */
.select-wrapper::after {
  content: "⌄";
  font-size: 1.2rem;
  color: #64748b;
  position: absolute;
  right: 18px;
  top: 45%;
  transform: translateY(-50%);
  pointer-events: none; /* 矢印の上をクリックしてもセレクトが開くようにするお守り */
}

/* テキストエリア（本文）の最低限の高さと、ユーザーが自由に縦に伸ばせるようにする設定 */
.form-group textarea {
  resize: vertical;
  min-height: 160px;
}

/* 薄いグレーのプレースホルダー（ヒント文字） */
::placeholder {
  color: #94a3b8;
}

/* ==================================================
   フォーム専用：洗練された送信ボタン
   ================================================== */
.form-submit-container {
  text-align: center;
  margin-top: 40px;
}

.form-glow-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 16px 60px; /* 少し大きめで押しやすいサイズ */
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  
  /* 
    白背景に完璧に映える「ロイヤルブルー（#0284c7）」の輪郭。
    中身を透明にすることで、ミニマルモダンな高級感を出します。
  */
  color: #0284c7;
  background-color: transparent;
  border: 1px solid rgba(2, 132, 199, 0.4);
  border-radius: 4px;
  cursor: pointer;
  
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.form-glow-btn .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 送信ボタンにマウスをのせたとき（ホバー時） */
.form-glow-btn:hover {
  background-color: rgba(56, 189, 248, 0.08); /* うっすら青いシースルー背景 */
  border-color: #0284c7;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.2);
}

/* ホバー時に矢印が右にシュッと動く演出（トップページのボタンから完全継承） */
.form-glow-btn:hover .arrow {
  transform: translateX(6px);
}

/* ==================================================
   【新設】白背景ページ専用：商品詳細（2カラム）CSS
   ================================================== */
.detail-wrapper {
  display: flex;
  gap: 50px; /* 左の写真と右の文章の間の十分な隙間 */
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

/* --- 左側：フォトギャラリー --- */
.detail-gallery {
  flex: 1.1; /* 写真側を気持ち少しだけ広くします */
  width: 100%;
}

.main-visual {
  width: 100%;
  height: 450px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

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

/* サムネイル（複数枚写真）の並び */
.thumb-list {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.thumb-item {
  flex: 1;
  height: 80px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s, border-color 0.3s;
}

.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-item:hover,
.thumb-item.active {
  opacity: 1;
  border-color: #0284c7; /* アクティブな写真は青枠に */
}

/* --- 右側：製品解説コンテンツ --- */
.detail-content {
  flex: 1;
  width: 100%;
}

.category-tag {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  color: #0284c7;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.product-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #0f172a !important;
  line-height: 1.2;
  margin-bottom: 12px;
  text-shadow: none !important;
}

.product-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  color: #1e293b;
  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.product-price .tax-in {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: normal;
}

/* トップページのinfo-boxの遺伝子を引き継いだ解説の箱 */
.product-description-box {
  background-color: #f8fafc;
  border-top: 1px solid rgba(2, 132, 199, 0.2);
  border-bottom: 1px solid rgba(2, 132, 199, 0.2);
  padding: 30px 20px;
  margin-bottom: 35px;
}

.product-description-box p {
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}

/* ==================================================
   🛒 各種ボタン（移動・SOLDOUT・受付停止）の設定
   ================================================== */
.action-buttons-group {
  display: flex;
  flex-direction: column;
  gap: 15px; /* ボタンを複数並べた時の隙間 */
  width: 100%;
}

/* パターンA：ショッピングサイトへの移動ボタン（最優先で目立たせる） */
.shop-move-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #ffffff !important;
  background-color: #0f172a; /* 👈 高級感のある濃紺ソリッド背景 */
  border: 1px solid #0f172a;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.shop-move-btn .arrow { display: inline-block; transition: transform 0.3s; }

.shop-move-btn:hover {
  background-color: #0284c7; /* 👈 ホバー時は鮮やかなロイヤルブルーに変色してクリックを誘発 */
  border-color: #0284c7;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.3);
  transform: translateY(-2px);
}
.shop-move-btn:hover .arrow { transform: translateX(6px); }


/* パターンB・C：ステータスボタン共通（売り切れ、受付停止などクリックできないボタン） */
.status-btn {
  display: block;
  width: 100%;
  padding: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  text-align: center;
  border-radius: 6px;
  cursor: not-allowed; /* マウスをのせた時に「禁止マーク」にするプロの技 */
  border: none;
}

/* SOLDOUT：グレーアウトして完全に売り切れであることを明示 */
.status-btn.sold-out {
  background-color: #e2e8f0 !important; /* 薄いグレー */
  color: #94a3b8 !important;            /* くすんだ文字色 */
}

/* OUT OF ORDER：注意を促すために、少し落ち着いたダークトーンのグレーに */
.status-btn.out-of-order {
  background-color: #cbd5e1 !important;
  color: #64748b !important;
}


/* ==================================================
   📱 スマホ画面（768px以下）での商品詳細レイアウト調整
   ================================================== */
@media (max-width: 768px) {
  .detail-wrapper {
    flex-direction: column; /* スマホ時は「写真 ➔ 下に文章」の縦1列に */
    gap: 35px;
  }
  
  .main-visual {
    height: 300px; /* スマホ用に写真の高さをスマートに */
  }
  
  .thumb-list {
    gap: 8px;
  }
  .thumb-item {
    height: 60px;
  }
  
  .product-title {
    font-size: 1.75rem;
  }
}

/* ==================================================
   【新設】白背景ページ専用：商品名一覧（リスト）CSS
   ================================================== */
.product-index-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top: 2px solid #0f172a; /* リストの始まりを示す引き締まった濃紺の線 */
  margin-top: 20px;
}

/* 一行ごとの基本設定 */
.product-index-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 24px 15px;
  border-bottom: 1px solid #e2e8f0; /* 行を区切る上品なライトグレーの線 */
  background-color: #ffffff;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 💡 マウスをのせたときに行全体が優雅にハイライトする演出 */
.product-index-row:hover {
  background-color: #f8fafc; /* ごく薄いグレー */
  box-shadow: inset 4px 0 0 #0284c7; /* 左端にアクセントとして鮮やかな青いラインを出現させます */
}

/* 各列の横幅（比率）を美しく振り分ける */
.prod-col {
  padding: 0 10px;
}
.cell-name     { flex: 2.5; text-align: left; } /* 商品名エリアを一番広く */
.cell-category { flex: 1.2; text-align: left; }
.cell-desc     { flex: 3.5; text-align: left; } /* 説明文 */
.cell-action   { flex: 1.5; text-align: right; } /* ボタン・ラベル */

/* --- 商品名リンクと型番 --- */
.prod-title-link {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  color: #0f172a;
  text-decoration: none;
  transition: color 0.2s;
  margin-bottom: 4px;
}
.prod-title-link:hover {
  color: #0284c7; /* 👈 商品名自体にマウスをのせても綺麗に青く反応します */
}

.prod-id {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  font-family: 'Montserrat', sans-serif;
}

/* --- カテゴリータグのカラーバリエーション --- */
.type-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.type-tag.blue   { background-color: #e0f2fe; color: #0369a1; }
.type-tag.green  { background-color: #dcfce7; color: #15803d; }
.type-tag.orange { background-color: #ffedd5; color: #c2410c; }

/* --- 説明文の文字 --- */
.cell-desc p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #475569;
}

/* --- 一覧用の小さな操作ボタン --- */
.index-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  color: #0284c7;
  text-decoration: none;
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: 4px;
  transition: all 0.3s;
}
.index-view-btn .arrow { display: inline-block; transition: transform 0.3s; }
.index-view-btn:hover {
  background-color: #0284c7;
  color: #ffffff; /* ホバー時は青地白文字に反転 */
  border-color: #0284c7;
}
.index-view-btn:hover .arrow { transform: translateX(4px); }

/* --- 一覧用の売切・受付停止ステータスラベル --- */
.index-status-label {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.index-status-label.sold { background-color: #f1f5f9; color: #94a3b8; }
.index-status-label.ooo  { background-color: #f1f5f9; color: #64748b; }


/* ====================================================================
   📱 スマホ画面（768px以下）での「縦並びカード」へのトランスフォーム調整
   ==================================================================== */
@media (max-width: 768px) {
  
  /* 
    👇【ここがプロのレスポンシブ】
    スマホの狭い幅では「横長の表」は絶対に潰れて読めなくなります。
    そのため、1行の命令（column）で、各行を丸ごと「独立したスッキリしたカード」にトランスフォームさせます！
  */
  .product-index-row {
    flex-direction: column; /* 横並びから縦一列に変換 */
    align-items: flex-start; /* 左詰めに統一 */
    gap: 12px;
    padding: 20px 15px;
    margin-bottom: 15px;
    border: 1px solid #e2e8f0; /* スマホではカードを囲う枠線にします */
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  }
  
  /* スマホ時はすべての列の幅の均等制限をリセット（none）します */
  .prod-col {
    padding: 0;
    width: 100%;
  }
  
  .cell-action {
    text-align: left; /* ボタンの位置もスマホでは自然な左側に変更 */
    margin-top: 5px;
  }
  
  .index-view-btn {
    width: 100%; /* スマホではボタンを横いっぱいに広げて押しやすくします */
    justify-content: center;
    padding: 12px;
  }
  
  .index-status-label {
    width: 100%;
    text-align: center;
    padding: 12px;
  }
}
/* ==================================================
   【新設】白背景ページ専用：パンくずリスト（Breadcrumbs）CSS
   ================================================== */
.breadcrumbs {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 35px auto; /* 👈 下の見出し（H1）との間に美しい35pxの隙間を作ります */
  text-align: left; /* 左詰めに配置 */
}

/* 階層を横一列に並べるための設定 */
.breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none; /* リストの「・」を消去 */
  padding: 0;
  margin: 0;
}

.breadcrumbs-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem; /* 👈 主張しすぎない繊細な小さめの文字サイズ */
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #64748b; /* 通常の文字は落ち着いたミディアムグレー */
  display: flex;
  align-items: center;
}

/* 過去のページ（HOMEなど）へのリンクの文字 */
.breadcrumbs-item a {
  color: #94a3b8; /* 現在地より一回り薄いグレーにして遠近感を出します */
  text-decoration: none;
  transition: color 0.2s ease;
}

/* 過去のリンクにマウスをのせたとき（ホバー時） */
.breadcrumbs-item a:hover {
  color: #0284c7; /* 👈 トップのメニューと同じ美しい上品な青に反応します */
}

/* 💡【仕切り文字の自動挿入】
   階層と階層の間のスラッシュ（ / ）を、HTML側を汚さずにCSSで自動で挟み込みます */
.breadcrumbs-item + .breadcrumbs-item::before {
  content: "/";
  font-size: 0.7rem;
  color: #cbd5e1; /* スラッシュはさらに薄い上品なグレーに */
  margin: 0 10px; /* スラッシュの左右に10pxずつの綺麗な隙間を確保 */
  pointer-events: none;
}

/* ==================================================
   📱 スマホ画面（768px以下）でのパンくずリスト調整
   ================================================== */
@media (max-width: 768px) {
  .breadcrumbs {
    margin-bottom: 25px; /* スマホ画面では下との隙間を25pxに少し詰めます */
    padding: 0 5px;      /* 画面の端に文字がくっつかないように安全な左右の隙間を確保 */
  }
}

/* ==================================================
   【新設】サブページ専用：カード型レイアウトCSS
   ================================================== */
/* カードを並べる親の箱（自動折り返しグリッド） */
.sub-card-container {
  display: flex;
  flex-wrap: wrap; /* 👈 4個目以降のカードが自動で2行目、3行目へと綺麗に折り返します */
  justify-content: flex-start; /* 左詰めで整列 */
  gap: 30px; /* カード同士の縦・横の隙間を30pxに統一 */
  width: 100%;
  margin-top: 20px;
}

/* カード全体のデザイン（通常時） */
.sub-glow-card {
  /* 
    👇【計算ルール】PC時は「3列」で綺麗に並ぶように幅を均等分配します。
    (100% - 隙間2つ分の60px) ÷ 3 ＝ 1列の幅
  */
  width: calc((100% - 60px) / 3); 
  
  background-color: #f8fafc; /* 清潔感のある極薄のグレー */
  border: 1px solid #e2e8f0; /* 上品なライトグレーの細いフチ線 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05); /* 優しい薄い影 */
  
  /* 👈 トップページの不透明度0や待ち時間バグを完全リセット。最初から100%クッキリ表示させます */
  opacity: 1 !important;
  transform: none !important;
  
  /* ホバー時に滑らかに変化させる設定 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* カード全体のリンク化設定 */
.sub-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* カード内の画像エリア */
.sub-card-img {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f1f5f9;
}
.sub-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を崩さずに綺麗に切り抜いて収める */
  transition: transform 0.5s ease; /* ホバー時のじわっとズーム用 */
}

/* カード内のテキストエリア */
.sub-card-body {
  padding: 24px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sub-card-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: #0f172a !important; /* ディープネイビー */
  margin-bottom: 10px;
  text-shadow: none !important; /* 発光は完全に引き算 */
}

.sub-card-body p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #475569; /* 読みやすいグレー */
  margin-bottom: 20px;
}

/* 右下の「VIEW DETAIL」という誘導文字 */
.sub-card-more {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  color: #0284c7; /* 上品なロイヤルブルー */
  margin-top: auto; /* 👈 テキストの長さがバラバラでも、必ずカードの一番下に綺麗に揃えます */
  transition: color 0.2s ease;
}

/* ==================================================
   【ホバー時】マウスをのせたときのリッチモダンな演出
   ================================================== */
.sub-glow-card:hover {
  border-color: #0284c7 !important; /* 👈 フチが鮮やかなロイヤルブルーに変色 */
  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.12) !important; /* 青い優しい後光を漏らす */
  transform: translateY(-5px) !important; /* カード全体が上に5px品よく浮き上がる */
}

/* マウスホバー時に、中の写真だけが奥から手前に「はじわっ」とズームインする演出（トップと統一） */
.sub-glow-card:hover .sub-card-img img {
  transform: scale(1.05);
}

/* ホバー時に右下のテキストカラーを少し濃くする */
.sub-glow-card:hover .sub-card-more {
  color: #0369a1;
}


/* ====================================================================
   📱 スマホ画面（768px以下）での「縦1列」自動組み替え設定
   ==================================================================== */
@media (max-width: 768px) {
  .sub-card-container {
    flex-direction: column; /* 横並びから縦一列に変換 */
    gap: 20px; /* スマホ時は隙間を少しコンパクトな20pxに */
  }
  
  .sub-glow-card {
    width: 100% !important; /* スマホ画面いっぱいに横幅を広げます */
  }
  
  .sub-card-img {
    height: 160px; /* スマホ用に画像の高さを少しスマートに */
  }
}
/* ==================================================
   【新設】白背景ページ専用：シンプルな文字リンク一覧CSS
   ================================================== */
.links-page-container {
  max-width: 800px; /* 👈 テキストメインのため、視線が泳がないよう少しスリムな横幅に絞ります */
  margin: 0 auto;
  text-align: left;
}

.links-section {
  margin-bottom: 50px; /* カテゴリー（グループ）同士の縦の間隔 */
}

/* 💡 小見出し（カテゴリータイトル）のデザイン */
.links-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: bold;
  color: #0f172a; /* 濃紺 */
  border-left: 4px solid #0284c7; /* 左側に鮮やかな青いアクセント線を引きます */
  padding-left: 12px;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

/* リンクを並べる箇条書き（ul）の設定 */
.text-link-list {
  list-style: none; /* デフォルトの「・」を消去 */
  padding: 0;
  margin: 0;
  border-top: 1px solid #e2e8f0; /* リストの最上部をライトグレーの線で締める */
}

.text-link-list li {
  border-bottom: 1px solid #e2e8f0; /* リンクごとの区切り線 */
}

/* リンクボタンの通常時（マウスをのせる前） */
.text-link-item {
  display: flex;
  align-items: center;
  padding: 18px 10px;
  text-decoration: none;
  color: #334155; /* 読みやすいリッチグレー */
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

/* リンク全体の文字を配置するラベル */
.link-label {
  font-size: 0.95rem;
  font-weight: bold;
  flex-grow: 1; /* 👈 ラベル部分が横幅を目一杯使うようにし、矢印を右端に追いやります */
  text-align: left;
}

/* PDFの容量を表示する文字色 */
.link-size {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-right: 15px;
  font-family: 'Montserrat', sans-serif;
}

/* 外部サイトのURLを表示する文字色 */
.link-url {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-right: 15px;
  font-family: 'Montserrat', sans-serif;
}

/* 右端の矢印（ → ） */
.link-arrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  color: #cbd5e1; /* 通常時は薄いグレー */
  transition: transform 0.2s ease, color 0.2s ease;
}

/* 💡【ホバー演出】マウスをのせた時の上品なインタラクティブ */
.text-link-item:hover {
  background-color: #f8fafc; /* 行の背景をごく薄いグレーにして視線を誘導 */
  padding-left: 16px;       /* 👈 行全体が右に向かって「スッ」と4px優雅にスライドします */
}

.text-link-item:hover .link-label {
  color: #0284c7; /* マウスをのせた行の文字だけ鮮やかな青に染まります */
}

.text-link-item:hover .link-arrow {
  color: #0284c7; /* 右端の矢印も青くなり、さらに右側へ3pxシュッと飛び出します */
  transform: translateX(3px);
}

/* ====================================================================
   📱 スマホ画面（768px以下）での文字リンク一覧調整
   ==================================================================== */
@media (max-width: 768px) {
  .text-link-item {
    flex-wrap: wrap; /* スマホの狭い幅では、はみ出た要素（URL等）を自動で2行目へ折り返します */
    padding: 16px 5px;
  }
  
  .link-label {
    width: 100%; /* スマホ時はラベル（商品名）を100%にして1行目を独占 */
    font-size: 0.9rem;
    margin-bottom: 4px;
  }
  
  .link-size,
  .link-url {
    font-size: 0.75rem;
    margin-top: 2px;
  }
  
  /* スマホ時は横ズームのアニメーションを少し優しくリセットします */
  .text-link-item:hover {
    padding-left: 8px;
  }
}

/* ==================================================
   【新設】白背景ページ専用：企業情報テーブルCSS
   ================================================== */
.company-table-wrapper {
  max-width: 850px; /* 👈 表が横に広がりすぎず、最も美しく見えるプロ推奨の横幅 */
  margin: 0 auto;
  width: 100%;
}

.company-table {
  width: 100%;
  border-collapse: collapse; /* 隣り合う境界線を1本にまとめる */
  border-top: 2px solid #0f172a; /* 表の始まりを示す引き締まった濃紺の太線 */
  text-align: left;
}

/* 共通のセル設定 */
.company-table th,
.company-table td {
  padding: 22px 24px; /* 上下にゆったりとした余白を確保 */
  font-size: 0.95rem;
  line-height: 1.7;
  border-bottom: 1px solid #e2e8f0; /* 行を区切る上品なライトグレーの線 */
}

/* 💡 左側：項目名（th）のデザイン */
.company-table th {
  width: 25%; /* 👈 パソコン画面での項目名の横幅を「25%」にがっちり固定 */
  font-weight: bold;
  color: #0f172a; /* 濃紺 */
  background-color: #f8fafc; /* 清潔感のある薄いグレー背景を敷いて見やすくします */
  white-space: nowrap; /* 項目名が途中で不自然に改行されるのを防止 */
}

/* 右側：内容（td）のデザイン */
.company-table td {
  color: #334155; /* 読みやすいリッチグレー */
}


/* ====================================================================
   📱 スマホ画面（768px以下）での「縦並びリスト」への自動組み替え設定
   ==================================================================== */
@media (max-width: 768px) {
  
  /* 
    👇【ここがプロのレスポンシブ】
    スマホの狭い画面で「横長の表」をそのまま見せると、
    右側がはみ出すか、文字が極端に縦長に潰れて崩壊してしまいます。
    
    ブラウザの標準的なテーブル構造をCSSで強制解除（block化）し、
    スマホの時は自動で「項目名 ➔ 下に内容」の超見やすい縦並びに変身させます！
  */
  .company-table,
  .company-table tbody,
  .company-table tr,
  .company-table th,
  .company-table td {
    display: block !important;
    width: 100% !important;
  }
  
  .company-table tr {
    border-bottom: 1px solid #cbd5e1; /* 行ごとの区切りを少しクッキリ化 */
    padding: 10px 0;
  }
  
  /* スマホ時の左側（項目名） */
  .company-table th {
    background-color: transparent !important; /* スマホ時は背景のグレーを消してすっきり */
    padding: 10px 10px 4px 10px !important;    /* 下側の余白を詰めます */
    font-size: 0.9rem;
    color: #0284c7; /* 👈 スマホの時は、項目名がパッと引き立つようにロイヤルブルーに変色 */
  }
  
  /* スマホ時の右側（内容） */
  .company-table td {
    padding: 0 10px 10px 10px !important; /* 上側の余白を詰めて項目名と密着させます */
    font-size: 0.95rem;
  }
}

/* ==================================================
   【新設】白背景ページ専用：免責事項（リーガル）CSS
   ================================================== */
.legal-page-container {
  max-width: 780px; /* 👈 長文が横に広がりすぎず、最も視線移動がスムーズな理想の横幅 */
  margin: 0 auto;
  text-align: left;
}

.legal-block {
  margin-bottom: 40px; /* 章（ブロック）ごとの縦の間隔 */
}

/* 小見出し（章タイトル）のデザイン */
.legal-subtitle {
  font-size: 1.2rem;
  font-weight: bold;
  color: #0f172a; /* 濃紺 */
  margin-bottom: 15px;
  border-bottom: 2px solid #f1f5f9; /* 下側に上品な薄い境界線を引きます */
  padding-bottom: 8px;
}

/* 本文テキスト */
.legal-text {
  font-size: 0.95rem;
  line-height: 1.8; /* 👈 行間を広めにとることで、細かい規約文章でも目が滑らず読めます */
  color: #334155;
  margin-bottom: 15px;
}

/* 箇条書き（ul / li）の設定 */
.legal-list {
  padding-left: 20px; /* 行頭を少し右に下げます */
  margin-bottom: 15px;
}

.legal-list li {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 8px;
  list-style-type: square; /* 箇条書きの点を上品な「小さな四角」に変更 */
}

/* ==================================================
   👇 最下部：PDF・関連リンクボタンエリア
   ================================================== */
.legal-action-area {
  display: flex;
  flex-direction: row; /* パソコン時は美しい横並び */
  justify-content: center;
  gap: 20px; /* ボタンとボタンの横の隙間 */
  margin-top: 60px; /* 規約文章が終わったあとの十分な広めの空き地 */
  padding-top: 30px;
  border-top: 1px dashed #cbd5e1; /* 上側に上品な点線を引いて境界を明示 */
}

/* ボタン共通の基本デザイン */
.legal-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 28px;
  font-size: 0.88rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* パターンA：PDFダウンロード（誠実なダークグレーのボタン） */
.pdf-btn {
  background-color: #334155;
  color: #ffffff !important;
  border: 1px solid #334155;
}
.pdf-btn:hover {
  background-color: #0f172a; /* ホバー時はさらに深い紺色に変化 */
  border-color: #0f172a;
}
.pdf-btn .size-info {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-left: 8px;
}

/* パターンB：通常のテキストリンクボタン（これまでのひな型と調和する上品な枠線青ボタン） */
.link-btn {
  background-color: transparent;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.4);
}
.link-btn .arrow { display: inline-block; transition: transform 0.3s; }
.link-btn:hover {
  background-color: rgba(56, 189, 248, 0.08);
  border-color: #0284c7;
}
.link-btn:hover .arrow { transform: translateX(4px); }


/* ====================================================================
   📱 スマホ画面（768px以下）でのボタン縦並び調整
   ==================================================================== */
@media (max-width: 768px) {
  .legal-action-area {
    flex-direction: column; /* スマホの狭い幅では、押しやすいように「縦並び」に変換 */
    gap: 15px;
    margin-top: 40px;
  }
  
  .legal-btn {
    width: 100% !important; /* スマホではボタンを横いっぱいに広げて誤タップをガード */
    text-align: center;
    padding: 16px; /* 指で押しやすいように厚みをアップ */
  }
}