/* ベーススタイル設定 */
:root {
--primary-purple: #9b51e0; 
--primary-blue: #2d9cdb; 
--accent-red: #ff2a2a; 
--bg-dark: #111111;
--bg-section: #1a1a1a; 
--text-main: #ffffff;
--text-sub: #cccccc;
--border-color: #333333;
}

section {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: var(--text-main);
margin: 0;
padding: 0;
line-height: 1.8;
font-size: 16px;
}

h1, h2, h3, h4 {
margin: 0 0 1rem 0;
font-weight: 700;
line-height: 1.4;
text-wrap: wrap;
}

p {
margin: 0 0 1.5rem 0;
color: var(--text-sub);
}

/* 共通ユーティリティ */
.text-center { text-align: center; }
.text-left { text-align: left; }

.text-gradient {
background: linear-gradient(90deg, var(--primary-purple), var(--primary-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.btn {
display: inline-block;
padding: 15px 50px;
background: linear-gradient(45deg, var(--primary-purple), var(--primary-blue));
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 30px;
margin-top: 20px;
transition: opacity 0.3s;
}
.btn:hover { opacity: 0.9; }

/* 特殊テキストスタイル */
.highlight-catch {
font-size: 1.8rem;
text-align: center;
color: var(--accent-red);
font-weight: 900;
margin: 50px 0;
line-height: 1.3;
text-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}
@media (max-width: 768px) {
.highlight-catch { font-size: 1.5rem; }
}

/* 画像プレースホルダー */
.img-box {
color: #777;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.img-box span { z-index: 1; padding: 10px; text-align: center; }

/* ヒーローセクション */
.hero {
position: relative;
padding: 80px 0;
background: radial-gradient(circle at center, #2a1a35 0%, #000 100%);
border-bottom: 1px solid var(--border-color);
}
.hero-date {
font-size: 3rem;
font-weight: 800;
text-shadow: 0 0 20px rgba(45, 156, 219, 0.5);
margin: 20px 0;
color: #fff;
}
.hero-catch {
font-size: 1.2rem;
color: var(--text-main);
font-style: italic;
opacity: 0.9;
}

/* セクション共通 */
section {
padding: 80px 0;
border-bottom: 1px solid var(--border-color);
}
.section-title {
font-size: 2.2rem;
text-align: center;
display: inline-block;
}
.section-header-wrapper {
text-align: center;
margin-bottom: 60px;
}

/* 2カラムレイアウト */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
@media (max-width: 768px) {
.grid-2 { grid-template-columns: 1fr; }
}

.img-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
width: auto;
height: auto; 
}

/* イントロダクション */
.intro-box {
padding: 40px;
border-radius: 12px;
margin-bottom: 40px;
}

/* カード紹介 */
.card-showcase {
display: grid;
grid-template-columns: 1fr 1fr; /* 強制的に2列 */
gap: 30px;
}
@media (max-width: 768px) {
.card-showcase { grid-template-columns: 1fr; } /* スマホでは1列 */
}

.card-detail {
padding: 25px;
border-radius: 12px;
border: 1px solid #333;
height: 100%;
box-sizing: border-box;
}
.card-detail h3 {
color: var(--primary-blue);
font-size: 1.4rem;
margin-bottom: 5px;
}
.card-detail h4 {
font-size: 1rem;
color: var(--text-main);
margin-bottom: 15px;
border-bottom: 1px solid #444;
padding-bottom: 10px;
display: inline-block;
}

/* 付属品 */
.accessory-box {
padding: 25px;
border-radius: 12px;
}

/* 戦術ステップ */
.strategy-step {
margin-bottom: 60px;
padding: 40px;
border-radius: 15px;
border: 1px solid #333;
}
.step-label {
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 20px;
display: block;
}
.card-ref {
font-size: 0.85rem;
color: #888;
margin-top: 10px;
display: block;
}

/* アコーディオン (Details/Summary) スタイル */
details {
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid #333;
overflow: hidden;
transition: all 0.3s;
}
details[open] {
border-color: var(--primary-blue);
background: transparent;
}

summary {
cursor: pointer;
list-style: none; /* デフォルトの三角を消す */
text-align: center;
padding: 30px;
position: relative;
outline: none;
}
summary::-webkit-details-marker {
display: none;
}
summary:hover {
background: rgba(255, 255, 255, 0.05);
}

/* 開閉インジケーター（矢印） */
summary::after {
content: "▼ 詳細を見る";
display: block;
margin-top: 15px;
color: var(--primary-blue);
font-size: 0.9rem;
font-weight: bold;
transition: transform 0.3s;
}
details[open] summary::after {
content: "▲ 閉じる";
color: var(--text-sub);
}

.accordion-content {
padding: 0 20px 40px 20px;
animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

/* 画像とキャプションをまとめる箱 */
.img-item-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%; 
width: 30%; 
}

/* ラッパーの中の画像調整 */
.img-item-wrap img {
width: auto;
height: auto;
max-width: 100%;
max-height: 80%;
object-fit: contain;
margin-bottom: 8px;
}

/* キャプションの文字設定 */
.img-caption {
font-size: 0.75rem;
line-height: 1.4;
text-align: center;
color: #cccccc;
}

/* マーカー画像のレスポンシブ設定 */
.marker-gallery {
display: flex; /* 横並びにする基本設定 */
justify-content: center;   /* 中央寄せ */
gap: 20px; /* 画像同士の隙間 */
margin-top: 20px;
}

.marker-gallery img {
max-width: 48%;/* PCでは2枚並ぶので幅を半分弱に */
height: auto;
border-radius: 4px;
}

/* スマホ用の設定（画面幅768px以下） */
@media (max-width: 768px) {
.marker-gallery {
flex-direction: column; /* 縦並びに変更 */
align-items: center;/* 中央揃え */
}

.marker-gallery img {
max-width: 100%;/* スマホでは幅いっぱいに表示 */
}
}

.img-box a {
    display: flex;           /* リンク自体も配置用の箱にする */
    width: 100%;             /* 横幅いっぱいに */
    height: 100%;            /* 高さもいっぱいに */
    align-items: center;     /* 中身（画像）を上下中央に */
    justify-content: center; /* 中身（画像）を左右中央に */
    text-decoration: none;   /* 余計な下線を消す */
}

/* === 画像が2枚縦に並ぶ時の特別ルール === */

/* 1. 画像リンク（aタグ）の高さを制限する */
.img-item-wrap.double-item > a {
    height: 42%;      /* 2枚入るように高さを40%弱に抑える */
    margin-bottom: 5px; /* 画像同士の隙間 */
}

/* 2. キャプション内の文字リンクを普通に戻す */
/* （さっきの .img-box a の設定で文字までボタン化するのを防ぐ） */
.img-caption a {
    display: inline;  /* インライン要素に戻す */
    width: auto;      /* 幅の制限を解除 */
    height: auto;     /* 高さの制限を解除 */
    color: inherit;   /* 文字色を親に合わせる */
    text-decoration: none;   /* 余計な下線を消す */
    font-size: inherit;
}

.img-caption a:hover {
    color: #fff;      /* ホバー時に少し明るく */
    opacity: 1;
}

/* リンク統合による追加スタイル */
a.img-item-wrap {
    text-decoration: none; /* 下線を消す */
    color: inherit;        /* 文字色を引き継ぐ */
    transition: opacity 0.3s;
}
a.img-item-wrap:hover {
    opacity: 0.8;          /* ホバー時に少し薄くする */
}
/* 以前の修正との競合を防ぐリセット */
a.img-item-wrap .img-caption {
    text-decoration: none;
}

/* --- 汎用ユーティリティ（高さ・余白） --- */
.h-250 { height: 250px; }
.h-300 { height: 300px; }
.h-350 { height: 350px; }
.mb-40 { margin-bottom: 40px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }

/* --- セクションヘッダー周り --- */
.header-lg {
  margin-bottom: 40px;
  font-size: 1.5rem;
}
.section-title-inverse {
  color: #fff;
  border-color: #fff;
  margin: 0;
}
.section-title-plain {
  margin: 0;
  border: none;
}
.marker-note {
  margin-top: 40px;
  padding: 20px;
  border-radius: 8px;
}
.text-main {
  color: var(--text-main);
}
.text-bold-red {
  font-weight: bold;
  color: #f00;
  margin-top: 20px;
}

/* --- 画像配置・ステップ用レイアウト --- */
/* ステップ1・3などのカード並び（下揃え・均等配置） */
.img-box-step {
  height: 400px;
  justify-content: space-evenly;
  align-items: flex-end;
  padding-bottom: 20px;
}
/* ステップ2の右側画像群（中央揃え・縦並び） */
.img-box-step-col {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}
.step2-right-top {
  height: 40%;
  margin-bottom: 5px;
}
.step2-right-bottom {
  height: 40%;
  margin-bottom: 10px;
}

/* --- グリッドレイアウト（ステップ2用） --- */
.step2-image-grid {
  display: grid;
  grid-template-columns: 3fr 1.2fr; /* PC: 左3つ分と右1つ分の比率 */
  gap: 15px;
}
@media (max-width: 768px) {
  .step2-image-grid {
    grid-template-columns: 1fr; /* スマホ: 縦一列に変更 */
  }
}