/*
 * assets/css/style.css
 * サイトの装飾、色、タイポグラフィ、コンポーネントの見た目を定義するファイル
 */

:root {
    /* ====================================
       1. カラーパレット定義 (Color Palette)
       ==================================== */
    
    /* ベースカラー */
    --color-base-1: #F0F6FB; /* 淡い背景色 */
    --color-base-2: #FFFFFF; /* 白背景 */
    --color-base-3: #0A3A5F; /* 濃い背景/主要要素 */

    /* テキストカラー */
    --color-text-primary: #2B2B2B; /* メインの文字色 */
    --color-sub-1: #4D4D4D;      /* サブテキスト/濃いグレー */
    --color-sub-2: #6F6F6F;      /* サブテキスト/薄いグレー */

    /* アクセントカラー (Action, Highlight) */
    --color-accent-1: #0B4A7B; /* プライマリアクション/リンク */
    --color-accent-2: #368AA4; /* セカンダリアクション */
    --color-accent-3: #32B7B7; /* ハイライト/強調 */


    /* ====================================
       2. ブレークポイント定義 (Breakpoints)
       ==================================== */
    
    /* layout.css のメディアクエリで使用 */
    --breakpoint-pc: 1025px; 
    --breakpoint-tablet: 769px; 
    --breakpoint-sp-max: 768px; 
}


/* ====================================
   3. フォント定義 (fonts)
   ==================================== */
        
html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 100%;
    line-height: 1.6;
    color: var(--color-text-primary);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-base-2);
    -webkit-font-smoothing: antialiased;
}

/* 簡単なリセット */
*, *::before, *::after {
    box-sizing: border-box;
}


/* ====================================
   リンクの装飾
   ==================================== */
a {
    color: var(--color-accent-2);
    font-weight: bold;
    text-decoration: underline;
}

a:hover {
    font-weight: auto;
    text-decoration: underline;
}
/* ====================================
   画像の装飾
   ==================================== */
img {
    max-width: 100%;
    height: auto;
}

/* ====================================
   見出しの装飾
   ==================================== */
/* サイトの主要な見出し */
h1 {
    font-size: 2.2em;
    text-align:center; 
    background-color: var(--color-base-1);
    color: var(--color-accent-1);
}

h2 {
    font-size: 2.2em; /* 大きさ */
    padding-bottom: 0.2em; /* ボーダー上の余白 */
    border-bottom: 3px solid var(--color-accent-3); /* ボーダーの装飾 */
    color: var(--color-accent-1); /* 文字色 */
    text-align: center; /* 中央揃え */
}

/* セクション内の小見出し */
h3 {
    font-size: 1.5em; /* 変更なし */
    font-weight: bold; /* 変更なし */
    margin-top: 30px; /* 変更なし */
    margin-bottom: 20px; /* 変更なし */
    color: var(--color-accent-1); /* 文字色 */
    text-align: center; /* 中央揃えの装飾を追加 */
}

/* --- ドキュメントページでは見出しを左寄せする --- */
.document-page h2,
.document-page h3,
.document-page h4 {
    text-align: left;
}

/* ====================================
   ボタンの装飾
   ==================================== */
.btn {
    display: block;
    width: fit-content;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, opacity 0.3s;
    cursor: pointer;
    border: none;
    text-decoration: none !important;
}

/* プライマリーボタン */
.btn-primary {
    background-color: var( --color-base-3);
    color: var(--color-base-2);
    text-align:center;
}
.btn-primary:hover {
    background-color: var(--color-accent-1);
    opacity: 0.9;
}

/* セカンダリーボタン */
.btn-secondary {
    background-color: var(--color-sub-2);
    color: var(--color-base-2);
    text-align:center;
}
.btn-secondary:hover {
    background-color: var(--color-sub-1);
    opacity: 0.9;
}

/* アクセントボタン */
.btn-accent {
    background-color: var(--color-accent-3);
    color: var(--color-base-2);
    text-align:center;
}
.btn-accent:hover {
    background-color: var(--color-accent-2);
    opacity: 0.9;
}

/* ドキュメントページのボタン位置 */
.document-page .btn{
    display: inline-block;
}
/* ====================================
   リストの装飾
   ==================================== */
/* お知らせリスト */
.news-list {
    border-top: 1px solid var(--color-base-1);
}
.news-list li {
    border-bottom: 1px solid var(--color-base-1);
}
.news-list time {
    color: var(--color-sub-2);
}
.news-list a {
    color: var(--color-text-primary);
}
.news-list a:hover {
    color: var(--color-accent-1);
}

/* ====================================
   表の装飾
   ==================================== */
/* --------------------
   table
   -------------------- */
/* 料金テーブル */
table {
    border: 1px solid var(--color-base-3);
    border-collapse: collapse; /* セルの境界線を結合 */
}

/* --------------------
   caption
   -------------------- */
table caption {
    font-weight: bold;
    font-size: 1.2em;
}
   
/* --------------------
   th
   -------------------- */
table th {
    background-color: var(--color-base-3);
    font-weight: bold;
    color: var(--color-base-2);
    text-align: center;
}
/* --------------------
   td
   -------------------- */
table td {
    background-color: var(--color-base-2); 
}

table td li{
    text-align:left; 
}

/* =========================================================
   全ページ共通 - 強調表示
   ========================================================= */

.highlight {
    font-weight: bold; /* テキストを太字にする */
    color: var(--color-accent-1);
}
/* =========================================================
   ヘッダーの装飾
   ========================================================= */
header a {
    color: var(--color-accent-1);
    font-weight: normal;
    text-decoration: none;
}

/* ヘッダー内アイコンの調整 */
.header-nav .main-menu i {
    margin-right: 5px;   /* アイコンと文字の間の隙間 */
    font-size: 0.9em;    /* アイコンを文字より少しだけ小さくするとバランスが良い */
    color: var(--color-base-3); /* 任意：アイコンの色を少し変える場合 */
}

/* =========================================================
   ハンバーガーメニュー本体の装飾
   ========================================================= */
@media (max-width: 1024px) {
    /* メニュー本体の装飾 (layout.cssから移動) */
    .header-nav {
        background-color: var(--color-base-3);
        color: var(--color-base-2);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* メニュー内のリンクの装飾 */
    .header-nav a {
        color: var(--color-base-2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* メニュー内のアイコンの装飾 */
    .header-nav i::before {
        color: var(--color-base-2);
    }
}

/* --------------------
   ハンバーガーボタン (.menu-toggle) の装飾
   -------------------- */
.menu-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-text-primary);
    margin: 5px 0;
    transition: transform 0.3s, opacity 0.3s;
}
/* --------------------
   メニューOPEN時（×アイコン）
   -------------------- */
.menu-toggle.is-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* =========================================================
   PCプルダウンメニューの装飾
   ========================================================= */

@media (min-width: 1025px) {
    /* サブメニューの具体的な見た目 */
    .header-nav .sub-menu {
        background-color: var(--color-base-2);
        border: 1px solid var(--color-base-1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* サブメニュー内のリンク */
    .header-nav .sub-menu a {
        color: var(--color-base-3);
    }
    .header-nav .sub-menu a:hover {
        background-color: var(--color-base-1);
        text-decoration: none;
    }
}

/* =========================================================
   共通フッターの装飾
   ========================================================= */
.site-footer {
    background-color: var(--color-base-3);
    color: var(--color-base-2);
    font-size: 0.85em;
}

.footer-section h3 {
    color: var(--color-base-2);
    font-size: 1.1em;
}

/* フッターナビゲーションの構造と装飾 */
.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section a {
    color: var(--color-base-2);
    display: block;
    padding: 5px 0; /* layout.css に移動しても良いプロパティ */
}

.footer-section a:hover {
    color: var(--color-accent-3);
}

/* コピーライト部分の装飾 */
.footer-info {
    font-size: 0.85em;
    opacity: 0.8;
}


/* =========================================================
   その他ユーティリティの装飾
   ========================================================= */
.background-base-1 {
    background-color: var(--color-base-1);
}
.background-accent-1 {
    background-color: var(--color-accent-1);
    color: var(--color-base-2);
}
.background-accent-3 {
    background-color: var(--color-accent-3);
    color: var(--color-base-2);
}

/* =========================================================
   メインビジュアル (Hero Section) 装飾
   ========================================================= */
.hero-section {
    /* 背景画像の設定 */
    background-image: url('/img/firstview-1920x480-3.webp'); 
    background-size: cover;        /* 隙間なく全体を覆う */
    background-position: center;   /* 中央を基準に配置 */
    background-repeat: no-repeat;  /* 繰り返し禁止 */
    
    /* 背景画像の上に薄いフィルターを重ねて文字を読みやすくする場合（任意） */
    /* background-color: rgba(255, 255, 255, 0.6); 
       background-blend-mode: overlay; */

    padding-top: 60px;
    padding-bottom: 60px;
}

.hero-content h1 {
    font-size: 2.8em;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-base-2);
    margin-top: 0;
    margin-bottom: 20px;
    background-color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

.hero-content p {
    font-size: 1.2em;
    color: var(--color-base-2);
    margin-bottom: 30px;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

.hero-visual img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

/* ボタンをおくエリア*/
.hero-cta {
    margin-top: 20px;
}

/* ヒーローエリアのボタン位置 */
.hero-cta .btn {
    display: block;
    width: fit-content;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

/* ヒーローエリアのボタンは幅100%に */
@media (max-width: 768px) {
    .hero-cta .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================================
   初めての方へ / 参加の流れ・出品物 (style.css)
   ========================================================= */

.section-intro {
    background-color: var(--color-base-1); 
}

/* --------------------
   参加の流れ (intro-process)
   -------------------- */
.process-step {
    /* background-base-2 は HTML で適用 */
    /* 8px角丸を維持 */
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    background:#ffffff;
}

.step-visual {
    border-radius: 4px;
}

.step-label {
    /* STEP n の装飾 */
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.9em;
    font-weight: bold;
    color: var(--color-base-2); /* 白文字 */
    border-radius: 4px;
    margin-bottom: 10px;
}

.process-step p {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-text-primary);
    margin-top: 0;
    margin-bottom: 5px;
}

/* --------------------
   主な取り扱い商材と相場 (intro-items)
   -------------------- */
.grid-items {
    /* 必要であれば grid-items 全体のマージンを調整 */
}

.item-block {
    /* 参加の流れカードと見た目を合わせる */
    background-color: var(--color-base-2);
    padding: 20px; /* process-stepと統一 */
    border-radius: 8px; /* 統一 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* 統一 */
    text-align: center;
}

.item-visual {
    /* layout.cssで定義済み */
    border-radius: 4px; /* 統一 */
    margin-bottom: 10px;
}

.item-label {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-base-3); 
    margin-bottom: 0px;
}

.item-block p {
    display: block;
    font-size: 1em;
    color: var(--color-text-primary); 
    margin-bottom: 2px;
}

.item-block p.item-price {
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    color: var(--color-accent-3);
    margin-top: 0;
    margin-bottom: 5px;
}


/* =========================================================
   バッタヤの特徴 (Section Features) 装飾
   ========================================================= */

.section-features {
    /* 必要に応じて背景色を設定 */
    background-color: var(--color-base-1); 
}

.feature-block {
    /* 角丸と影 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background:#ffffff
}

.feature-icon img {
    border-radius: 50%; /* アイコンを丸く */
    /* アクセントカラーで枠線 */
    border: 3px solid var(--color-accent-2); 
}

.feature-content h4 {
    /* 上段: タイトル */
    font-size: 1.3em;
    font-weight: bold;
    color: var(--color-accent-1);
    margin-top: 0;
    margin-bottom: 5px;
}

.feature-content p {
    /* 下段: 説明 */
    font-size: 0.95em;
    color: var(--color-sub-1);
    margin-top: 0;
    margin-bottom: 0;
}

/* =========================================================
   バッタヤの実績 (Section Result) 装飾
   ========================================================= */

.section-result {
    background-color: var(--color-base-1); 
}
.result-item {
    text-align:center;
}

.result-item img {
    border-radius: 50%;
}

/* =========================================================
   会場紹介セクション (style.css)
   ========================================================= */

/* 会場カード (参加の流れカード .process-step と同等のデザイン) */
.place-block {
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    background-color: var(--color-base-2);
}

.place-visual {
    border-radius: 4px;
}

.place-name {
    /* 会場名 (太字、目立つ色) */
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-accent-1);
    margin-top: 10px;
    margin-bottom: 5px;
}

.place-address {
    /* 住所 (控えめな色) */
    font-size: 0.9em;
    color: var(--color-sub-1);
    margin-top: 0;
    margin-bottom: 5px;
}


/* =========================================================
   ご利用料金セクション (style.css)
   ========================================================= */

.section-fee {
    background-color: var(--color-base-1); /* 料金セクション全体の背景 */
}

/* =========================================================
   よくある質問（FAQ）セクション (style.css)
   ========================================================= */

.section-faq {
    background-color: var(--color-base-2);
}

.faq-item {
    border: 1px solid var(--color-base-1);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 質問 (dt) の装飾 */
.faq-item dt {
    background-color: var(--color-base-1); /* 少し濃い背景色 */
    color: var(--color-text-primary);
    font-weight: bold;
    border-radius: 6px 6px 0 0; 
    padding-left: 50px; /* Qマーク分のスペース */
}

/* 質問の Q: マークの装飾 */
.faq-item dt::before {
    content: "Q";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: 800;
    color: var(--color-accent-1);
}

/* 回答 (dd) の装飾 */
.faq-item dd {
    background-color: var(--color-base-2);
    color: var(--color-sub-1);
    padding-left: 50px; /* Aマーク分のスペース */
    border-radius: 0 0 6px 6px; 
}

/* 回答の A: マークの装飾 */
.faq-item dd::before {
    content: "A";
    position: absolute;
    left: 15px;
    font-size: 1.4em;
    font-weight: 800;
    color: var(--color-accent-3); /* Qとは違う色 */
}

/* =========================================================
   CTA  (style.css)
   ========================================================= */

section.section-cta .cta-message {
    color: var(--color-base-2);
    font-size: 2em; /* h2と同一 */
    font-weight: bold; /* h2と同一 */
    margin-bottom: 30px;
    margin-top: 0; /* pタグ特有のデフォルトマージンをリセット */
}

.btn-cta-form {
    /* ボタンの装飾 (水色の部分) */
    color: var(--color-base-2);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
}

.btn-cta-form:hover {
    background-color: var(--color-accent-2); /* ホバーで少し濃い色に */
}

.btn-cta-form i {
    /* アイコンとテキストの間隔 */
    margin-right: 8px;
}

/* =========================================================
   スケジュールページ (style.css)
   ========================================================= */

/* 土曜日を青に */
.saturday {
    color: #0d6efd; 
}

/* 日曜日を赤に */
.sunday {
    color: red;
}

/* 開催日（バッジ）の装飾 */
.badge-circle {
    border-radius: 50%;
    padding: 10px;
    font-size: 14px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


/* レーン名のバッジの余白 */
.badge-lane {
    margin-right: 5px;
}

/* カレンダーのヘッダー/セルのフォント太さ */
.calendar-container th, .calendar-container td {
    font-weight: bold;
}


/* =========================================================
   会場紹介ページ (place.html) 装飾
   ========================================================= */
.place-image {
    /* 会場画像 */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.place-details dl {
    /* 定義リスト全体の調整 */
    margin-bottom: 30px;
}

.place-details dt {
    /* 見出し（所在地、電話番号など） */
    font-weight: bold;
    color: var(--color-base-3); /* 濃い背景色 */
    padding-top: 5px;
    border-left: 4px solid var(--color-accent-3); /* 水色のアクセント */
    padding-left: 10px;
    margin-top: 15px;
}

.place-details dd {
    /* 詳細情報 */
    margin-left: 15px;
    margin-bottom: 10px;
    color: var(--color-sub-1); /* サブテキストの色 */
}

.access-info {
    /* アクセス情報のテキスト */
    font-size: 0.95em;
    line-height: 1.8;
    background-color: var(--color-base-1); /* 淡い背景色 */
    padding: 20px;
    border-radius: 6px;
}

.place-map-container {
    /* Google Map のコンテナ */
    border: 1px solid var(--color-base-1);
    border-radius: 8px;
    overflow: hidden; /* 角丸対応 */
}

.place-map-container iframe {
    display: block; /* iframeの下の余白を削除 */
}
/* =========================================================
   クリックできるカードデザイン (style.css)
   ========================================================= */

/* --- リンク全体 --- */
.clickable-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* サイト全体のホバー設定による下線を確実に消す */
.clickable-card-link:hover {
    text-decoration: none;
}

/* --- カード本体 --- */
.clickable-card {
    display: flex;
    flex-direction: column;
    height: 100%; 
    
    background-color: var(--color-base-2); 
    
    /* 枠線を削除 */
    border: none; 
    
    border-radius: 8px;
    overflow: hidden; 
    
    /* 影のみでカードの境界を表現 */
    box-shadow: 0 4px 12px rgba(10, 58, 95, 0.08); 
    /* transitionからtransformを削除し、影の変化のみに限定 */
    transition: box-shadow 0.3s ease;
}

/* ホバーエフェクト：動き（translate）を削除 */
.clickable-card-link:hover {
    /* 移動させず、影を少し深くするのみ */
    box-shadow: 0 8px 24px rgba(10, 58, 95, 0.15);
    text-decoration: none;
}

/* --- 画像 --- */
.clickable-card-image {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: cover;
}

/* --- テキストコンテンツ部分 --- */
.clickable-card .clickable-card-title,
.clickable-card .clickable-card-description {
    padding: 0 20px;
}

.clickable-card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--color-base-3); 
    margin-top: 20px;
    margin-bottom: 10px;
    transition: color 0.3s ease;
    /* タイトルの下線も出ないように固定 */
    text-decoration: none; 
}

.clickable-card-description {
    font-size: 0.95rem;
    color: var(--color-sub-1); 
    margin-bottom: 25px;
    line-height: 1.6;
    flex-grow: 1;
}

/* --- 背景色クラス --- */
.background-base-2 {
    background-color: var(--color-base-2);
}

/* =========================================================
   guide ページ内目次（デザイン）
   ========================================================= */

.toc-details {
    background-color: var(--color-base-3);
    border: 1px solid rgba(255,255,255,0.15);
}

/* summary */
.toc-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: var(--color-base-2);
}

/* アイコン回転 */
.toc-summary i {
    transition: transform 0.25s ease;
    color: var(--color-accent-2);
}

.toc-details[open] .toc-summary i {
    transform: rotate(90deg);
}

/* リンク */
.page-toc a {
    color: var(--color-base-2);
    text-decoration: none;
}

.page-toc a:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* h3相当 */
.toc-list ul a {
    font-size: 0.95em;
    color: rgba(255,255,255,0.85);
}

/* h3相当（2階層目）の丸の色 */
.page-toc ul ul li::marker {
    color: var(--color-base-2); /* 好きな色に */
}