/*
 * assets/css/layout.css
 * サイト全体の構造、配置、レスポンシブレイアウトを定義するファイル
 */

/* =========================================================
   コンテナの定義（Container Class Definition）
   ========================================================= */

.container {
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

.container-small {
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    max-width: 900px;
}
/* =========================================================
   セクションの定義
   ========================================================= */
section {
    padding-top: 45px;
    padding-bottom: 45px;
}

section.small {
    padding-top: 1px;
    padding-bottom: 1px;
}
/* ---------------------------------------------------------
   メディアクエリ (Media Queries)
   --------------------------------------------------------- */

/* タブレットサイズ (769px 以上 1024px 以下) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* PCサイズ (1025px 以上) */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px; 
        padding-right: 0;
        padding-left: 0;
    }
}


/* =========================================================
   共通ヘッダーのレイアウト
   ========================================================= */

/* ---------------------------------------------------------
   ヘッダーの外枠 (.site-header)
   --------------------------------------------------------- */
.site-header {
    /* 装飾（background-color, box-shadow）は style.css へ移動 */
    padding: 15px 0;
    z-index: 100;
}

/* ---------------------------------------------------------
   ヘッダーロゴ
   --------------------------------------------------------- */
.header-logo {
    width:150px;
}

/* ---------------------------------------------------------
   ヘッダー内部の配置 (.header-inner)
   --------------------------------------------------------- */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --------------------
   モバイル時の設定 (デフォルト)
   -------------------- */
.header-nav,
.header-actions {
    display: none; 
}

.menu-toggle {
    display: block; 
}

/* --------------------
   PC時の設定 (1025px 以上)
   -------------------- */
@media (min-width: 1025px) {
    .header-inner {
        gap: 30px;
    }

    .header-nav,
    .header-actions {
        display: flex;
        align-items: center;
    }

    .header-nav {
        flex-grow: 1; 
    }

    .header-actions {
        flex-grow: 0;
        gap: 10px; /* ボタン間の隙間 */
    }

    .menu-toggle {
        display: none;
    }

    /* ---------------------------------------------------------
       ナビゲーションの基本構造
       --------------------------------------------------------- */
    .header-nav > ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 20px;
        justify-content: center;
        width: 100%;
    }
    
    .header-nav .main-menu li {
        position: relative;
    }

    .header-nav .sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 200;
        min-width: 180px;
    }
    .has-submenu:hover .sub-menu {
        display: block;
    }
}
    
/* =========================================================
   モバイルナビゲーション (ハンバーガーメニュー)
   - 配置、サイズ、アニメーションの制御
   ========================================================= */

/* メニューオープン時、背景のスクロールを無効にする */
body.menu-open {
    overflow: hidden;
    position: fixed; 
    width: 100%;
}


@media (max-width: 1024px) {
    /* メニュー本体の基本配置 (style.cssから移動) */
    .header-nav {
        position: fixed;
        top: 60px; /* ヘッダーの高さに応じて調整 */
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        z-index: 999;

    /* ハンバーガーメニュー表示のための設定 */
        display: block; /* display: none; の定義を上書きし、要素を表示可能にする */
        transform: translateX(100%); /* 画面外に隠す */
        visibility: hidden;
        opacity: 0;
        transition: transform 0.3s ease-out, opacity 0.3s, visibility 0.3s;
        /* ------------------------------------------------- */
    }

    /* 開いた状態: JSで is-active クラスが付与される */
    .header-nav.is-active {
        transform: translateX(0); /* 画面内にスライドイン */
        visibility: visible;
        opacity: 1;
    }
}

@media (max-width: 1024px) {
  .header-nav .main-menu a {
    display: block;
    padding: 6px;
    line-height: 1.6;
  }
}

    /* -------サブサブメニュー（モバイル版でのみ表示）-------- */
    
    /* sub-sub-menuは常に閉じる（全環境） */
.sub-sub-menu {
  display: none;
}

/* モバイル時：is-open が付いた時だけ開く */
@media (max-width: 1024px) {
  .sub-sub-menu.is-open {
    display: block;
    margin-left: 1em;
    margin-top: 0.25em;
  }

  .sub-sub-menu li a {
    font-size: 0.9em;
    display: block;
  }
}

@media (max-width: 1024px) {
  /* sub-sub-menu を持つリンク */
  .has-submenu .sub-menu > li > a {
    position: relative;
    padding-right: 1.8em; /* アイコン分の余白 */
  }

  /* ▶ アイコン */
  .has-submenu .sub-menu > li > a::after {
    content: "▶";
    position: absolute;
    right: 0.6em;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 0.8em;
    transition: transform 0.25s ease;
  }

  /* 開いた状態：▼ */
  .has-submenu .sub-menu > li > a.is-open::after {
    transform: translateY(-50%) rotate(90deg);
  }
}


/* =========================================================
   共通フッターのレイアウト
   ========================================================= */

.site-footer {
    padding: 40px 0;
    margin-top: 40px;
}

/* フッター内の見出し（h2）の非表示設定 */
.site-footer h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* フッター内の見出し（h3）のレイアウト設定 */
.site-footer h3 {
    text-align: left;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0; 
    margin-bottom: 15px;
}

/* ---------------------------
   フッターナビゲーションのグリッド設定（新設）
   --------------------------- */
.footer-nav-grid {
    display: grid;
    /* SPデフォルト: 2列表示 (2x2) */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; /* セクション間の隙間 */
    margin-bottom: 30px; /* コピーライトとの間に余白を確保 */
}

/* ---------------------------
   情報/コピーライト (.footer-info) の配置
   --------------------------- */
.footer-info {
    text-align: center;  /* style.css で装飾は定義 */
}

/* --------------------
   タブレット・PC共通の設定 (1025px 未満)
   -------------------- */
@media (max-width: 1024px) {
    /* タブレットも2x2を維持 (デフォルトの grid-template-columns: repeat(2, 1fr) を適用) */
    /* 特に修正は不要 */
}

/* --------------------
   PC時の設定 (1025px 以上)
   -------------------- */
@media (min-width: 1025px) {
    .footer-nav-grid {
        /* PC: 4列表示 */
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
    }
}


/* =========================================================
   Grid & Flex Utilities Layout
   - トップページで使用するレスポンシブな横並びレイアウト
   ========================================================= */

/* -------------------- Flex Row (横並び) -------------------- */
.flex-row {
    display: flex;
    flex-direction: column; 
    gap: 20px;
}

/* -------------------- Grid Layout (標準) -------------------- */
[class*="grid-"] {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px;
}

/* -------------------- レスポンシブグリッド -------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-4-col { grid-template-columns: repeat(2, 1fr); }
    .grid-3x2 { grid-template-columns: repeat(3, 1fr); }
    .grid-2-col { grid-template-columns: repeat(2, 1fr); }
    .grid-3-col { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
    .grid-4-col { grid-template-columns: repeat(4, 1fr); }
    .grid-3x2 { grid-template-columns: repeat(3, 1fr); }
    .grid-2-col { grid-template-columns: repeat(2, 1fr); }
    .grid-3-col { grid-template-columns: repeat(3, 1fr); }
}
/* =========================================================
   セクショングリッド (Grid Layout)
   ========================================================= */

/* ... (既存の .grid-flow, .grid-items, .grid-features, .result-grid, .place-grid の定義) ... */

/* --------------------
   3列グリッド (リスト用)
   -------------------- */
.grid-col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3つの列を均等に作成 */
    gap: 20px;
    padding: 0 40px; /* 左右に少しパディングを設け、リストが端に寄りすぎないようにする */
}
/* スマートフォンでの表示調整 */
@media (max-width: 768px) {
    .grid-col-3 {
        grid-template-columns: repeat(2, 1fr); /* SPでは2列に */
        padding: 0 15px;
    }
}
/* さらに小さい画面での調整 */
@media (max-width: 480px) {
    .grid-col-3 {
        grid-template-columns: 1fr; /* 非常に狭い画面では1列に */
    }
}
/* =========================================================
   見出しの共通レイアウト
   ========================================================= */
/* h1見出しの共通レイアウト */
h1 {
    display: block; /* ブロック要素であることを明確化 */
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top:0px;
    margin-bottom:40px;
}

/* h2見出しの共通レイアウト */
h2 {
    /* 中央揃えの機能（装飾のstyle.cssにある text-align: center を機能させるための記述） */
    display: block; /* ブロック要素であることを明確化 */
    width: fit-content; /* コンテンツの幅に合わせる */
    margin-right: auto;
    margin-left: auto;
    
    /* 上下のマージン */
    margin-top: 0px;
    margin-bottom: 40px;
    scroll-margin-top: 80px; /* ヘッダー高さに合わせて調整 */
}

/* h3見出し全体を中央に配置する設定 */
h3 {
    display: block; /* ブロック要素であることを明確化 */
    width: fit-content; /* コンテンツの幅に合わせる */
    margin-right: auto;
    margin-left: auto;
    scroll-margin-top: 80px; /* ヘッダー高さに合わせて調整 */
}

@media (max-width: 768px) {
    h2, h3 {
        max-width: 100%;
        text-align: center;
    }
}

/* --- ドキュメントページ用のレイアウト上書き --- */
.document-page h2,
.document-page h3 {
    /* 1. 箱の横幅を100%に戻す（これで左寄せが効くようになる） */
    width: 100%;
    
    /* 2. 中央寄せ用のマージンを解除して左に寄せる */
    margin-left: 0;
    margin-right: 0;
    
    /* 3. 文字を左寄せにする */
    text-align: left;
}

/* =========================================================
   テーブルのレイアウト
   ========================================================= */
/* --------------------
   テーブル本体
   -------------------- */
table {
    /* テーブルは常に親コンテナいっぱいに広げる */
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 列幅を固定しやすくする */
    margin-top: 30px;
    margin-bottom: 30px;
}

table th,
table td {
    padding: 15px 10px;
}

/* =========================================================
   画像のレイアウト
   ========================================================= */
/* 特に指定のない画像（<img>）を中央に寄せるための共通ルール */
img:not([class*="hero-visual"] img):not([class*="logo"]):not(.header-logo img) {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    max-width: 100%; /* 親要素からはみ出さないようにする */
}

/* =========================================================
   埋め込み動画のレイアウト
   ========================================================= */
/* 動画（iframe, video要素）を中央に寄せるための共通ルール */
iframe, video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
/* --------------------
   その他の出品アイテムリスト (.other-items-list)
   -------------------- */
.other-items-list {
    margin: 40px 0; /* 上下の余白 */
    /* リストを中央に配置する親要素には幅を指定することが望ましいが、今回はグリッドの子要素を調整 */
}

.other-items-list h4 {
    /* 見出しを中央揃えにし、グリッドと区別するための装飾 */
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}

.other-items-list ul {
    /* リストの装飾をリセットし、見やすくする */
    list-style: disc; /* 黒丸を適用 */
    padding-left: 20px;
    margin: 0;
}

.other-items-list li {
    line-height: 2; /* 行間を広げて見やすく */
}
/* =========================================================
   メインビジュアル (Hero Section) レイアウト
   ========================================================= */

.hero-section {
    padding-top: 50px; /* ヘッダーとの間に余白 */
    padding-bottom: 50px;
}

.hero-inner {
    /* SPでは縦並び、PCでは横並びにするためのFlexbox */
    display: flex;
    flex-direction: column; /* SPデフォルト: 縦並び */
    gap: 30px; /* 要素間の隙間 */
}

.hero-cta {
    /* SPでは縦並び */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* ボタン間の隙間 */
    margin-top: 20px;
}

/* --------------------
   PC時の設定 (1025px 以上)
   -------------------- */
@media (min-width: 1025px) {
    /* PCでは横並び */
    .hero-cta {
        flex-direction: row;
        align-items: flex-start;
    }

    .hero-inner {
        flex-direction: row; /* PC: 横並び */
        align-items: center; /* 垂直中央揃え */
    }

    .hero-content {
        /* テキストエリアを左側の広いスペースに配置 */
        flex: 1.0; /* 1.0の比率 */
    }

    .hero-visual {
        /* 画像エリアを右側の狭いスペースに配置 */
        flex: 1.0; /* 1の比率 */
    }
}

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

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

/* --------------------
   参加の流れ (intro-process)
   -------------------- */
.intro-process {
    margin-bottom: 60px;
}

.grid-flow {
    display: grid;
    grid-template-columns: repeat(2, 2fr); 
    gap: 30px;
}

/* フロー図のステップ */
.process-step {
    text-align: center;
    padding: 20px;
}

.step-visual {
    width: 100%;
    height: auto;
    max-width: none; 
    margin: 0 auto 10px auto;
}

/* --------------------
   タブレット・PC時の設定 (768px 以上)
   -------------------- */
@media (min-width: 768px) {
    /* 参加の流れ: PC・タブレットで4列 */
    .grid-flow {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------
   主な取り扱い商材と相場 (intro-items)
   -------------------- */
.intro-items {
    /* intro-processと intro-items の間のマージン */
    padding-top: 30px; 
    padding-bottom: 30px;
}

.grid-items {
    /* SPデフォルト: 2列表示 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.item-block {
    text-align: center;
}

.item-visual {
    width: 100%;
    height: auto;
    max-height: 200px; /* 画像の最大高さを制限 */
    object-fit: cover;
    margin-bottom: 10px;
}

/* --------------------
   PC時の設定 (1025px 以上)
   -------------------- */
@media (min-width: 1025px) {
    /* 参加の流れ: PCで4列 */
    .grid-flow {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ★修正点: 出品物と相場: PCで4列に設定 ★ */
    .grid-items {
        grid-template-columns: repeat(4, 1fr); 
        gap: 30px; /* PCでは隙間を広げる */
    }
}

/* =========================================================
   4つの理由　レイアウト
   ========================================================= */
/* --------------------
   外側グリッド (grid-features)
   -------------------- */
.grid-features {
    /* SPデフォルト: 1列表示 (縦並び) */
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* --------------------
   内側レイアウト (feature-block / feature-inner)
   -------------------- */
.feature-block {
    padding: 20px;
}

.feature-inner {
    /* アイコンとテキストを横並びにするFlexbox */
    display: flex;
    align-items: center;
    gap: 20px; /* アイコンとテキスト間の隙間 */
}

.feature-icon {
    /* アイコンのサイズを固定 */
    flex-shrink: 0; /* 縮まないようにする */
    width: 100px; /* 150pxは大きすぎる可能性があるため、一旦100pxに */
    height: 100px; 
}

.feature-icon img {
    /* 画像をコンテナいっぱいに広げる */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-content {
    /* テキストエリアは残りのスペースを占める */
    flex-grow: 1;
}

/* --------------------
   タブレット・PC時の設定 (768px 以上)
   -------------------- */
@media (min-width: 768px) {
    /* タブレット・PC: 2x2グリッド */
    .grid-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* =========================================================
   会場紹介セクション (layout.css)
   ========================================================= */
/* --------------------
   会場グリッド (place-grid)
   -------------------- */
.place-grid {
    /* SPデフォルト: 1列表示 */
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.place-block {
    text-align: center;
    padding: 20px;
}

.place-visual {
    width: 100%;
    height: auto;
    max-width: none; 
    margin: 0 auto 10px auto;
}

/* --------------------
   タブレット・PC時の設定 
   -------------------- */
@media (min-width: 768px) {
    .place-grid {
        /* タブレット・PCで3列表示 (参加の流れの時とは異なるが、3つのブロックに最適なのは3列) */
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================================
   ご利用料金セクション (layout.css)
   ========================================================= */
.section-fee {
    background-color: var(--color-base-2); 
}

/* =========================================================
   よくある質問（FAQ）セクション (layout.css)
   ========================================================= */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* FAQアイテム間の隙間 */
}

.faq-item dt {
    /* 質問をアイコン付きで横並びにする（装飾はstyle.cssで） */
    padding: 15px;
    position: relative;
    /* フォントサイズの基準 */
    font-size: 1.1em;
}

.faq-item dd {
    /* 回答部分 */
    padding: 15px;
    margin-left: 0; /* dtのデフォルトマージンをリセット */
    border-top: 1px solid var(--color-border);
    font-size: 0.95em;
    line-height: 1.6;
    position: relative;
}


/* =========================================================
   CTA
   ========================================================= */

.section-cta {
    /* ページのコンテンツとフッターの間に配置 */
    padding: 60px 0;
}

.cta-block {
    /* ブロック自体のレイアウト */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    
    /* 最大幅を設定し、PCでの横長デザインを維持 */
    max-width: 900px; 
    margin: 0 auto;
}

.btn-cta-form {
    /* ボタンのサイズ */
    margin-top: 20px;
    padding: 15px 40px;
    font-size: 1.5em;
}

/* =========================================================
   画像バナー
   ========================================================= */
.bannar {
    max-width:600px;
    align-items: center; /* 中央寄せ */
    margin-left:auto;
    margin-right:auto;
}

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

/* カレンダー全体の幅を制限し中央寄せ */
.calendar-container {
    max-width: 900px; 
    margin: auto;
    overflow-x:hidden;
}

/* カレンダーテーブルの基本設定 */
.calendar-container table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    width: 14.28%; /* 7列均等 */
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    box-sizing: border-box;
    font-weight: bold;
}

/* バッジコンテナを中央寄せ */
.badge-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* iframe（グーグルカレンダー）のスクロールラッパー */
.iframe-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.modal-footer {
    border-top: none; /* フッターの上部ボーダーを削除 */
}




/* =========================================================
   会場紹介ページ (place.html) レスポンシブレイアウト
   ========================================================= */

/* --- 1. 建物画像--- */
.place-image-hero {
    max-width: 900px; 
    margin: 0 auto; 
    height: auto; 
    overflow: hidden;
}
.place-image-hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; 
}


/* --- 2. Google Map と詳細情報の分割レイアウト --- */

/* Flexboxコンテナ全体に最大幅と中央寄せを適用 */
.place-content-split {
    /* 中央寄せにするため、左右の余白は auto */
    max-width: 900px; /* ★追加・修正: 最大幅を900pxに設定 */
    margin-left: auto;  /* ★追加: 中央寄せ */
    margin-right: auto; /* ★追加: 中央寄せ */
}

/* PC・タブレット向けのFlexboxレイアウト (769px以上) */
@media (min-width: 769px) {
    .place-content-split {
        display: flex;
        justify-content: space-between;
        gap: 40px; /* 左右の隙間 */
    }
    
    /* 子要素は親要素の900pxの中で均等に分割 */
    .split-left, .split-right {
        /* 親要素の幅に対して、隙間(gap: 40px)を考慮して均等に50%近くに設定 */
        width: calc(50% - 20px); 
    }
    
    /* 地図の高さ調整 (左右の高さが合うように) */
    .place-map-container iframe {
        height: 100% !important; 
        min-height: 450px; 
    }
}

/* スマートフォン向けのレイアウト (768px以下) */
@media (max-width: 768px) {
    .place-content-split {
        display: block;
        padding: 0 15px; /* スマホでは画面端から少し離す */
    }

    .split-left, .split-right {
        width: 100%;
        margin-bottom: 20px; /* 縦積み時の間隔 */
    }
    
    /* スマホでの地図の高さ調整 */
    .place-map-container iframe {
        min-height: 300px; 
    }
}


/* --- 3. 詳細情報（dl）のスタイル (前回の提案を再利用/調整) --- */

.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: 20px;
    color: var(--color-sub-1); 
    /* dl全体で高さを揃えるため、ddのアクセス情報が長くなっても対応できるように */
}

/* --- 4. スケジュールリンク --- */
.place-schedule-link {
    text-align: center;
    margin-top: 40px;
}
/* =========================================================
   クリックできるカードのレイアウト (layout.css)
   ========================================================= */

.clickable-card-grid {
    display: grid;
    gap: 30px; /* カード間の隙間 */
    padding: 20px 0;
    /* 中央寄せにしたい場合は max-width を設定 */
    max-width: 1000px; 
    margin: 0 auto;
}

/* PC・タブレット向けの3列レイアウト (769px以上) */
@media (min-width: 769px) {
    .clickable-card-grid {
        /* 3つの均等な列を作成 */
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* スマートフォン向けの1列レイアウト (480px以下) */
@media (max-width: 480px) {
    .clickable-card-grid {
        /* 1列表示に切り替え */
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   guideページ　ページ内目次（レイアウト）
   ========================================================= */

.page-toc {
    max-width: 900px;
    margin: 20px auto 40px;
}

.toc-details {
    padding: 16px 20px;
    border-radius: 8px;
}

/* summaryのデフォルト矢印を消す */
.toc-summary {
    list-style: none;
    cursor: pointer;
}

/* Safari対策 */
.toc-summary::-webkit-details-marker {
    display: none;
}

/* 目次リスト */
.toc-list {
    margin-top: 16px;
    padding-left: 0;
    list-style: none;
}

.toc-list ul {
    margin-top: 6px;
    margin-left: 1em;
}