/*
Theme Name: ranaho_theme
Template: twentytwentyfive
*/

/* ======================================================= */
/* 1. リスト項目 (ul.toppage-evevt) の基本スタイルとホバー効果 */
/* ======================================================= */

/* リスト全体の設定 */
ul.toppage-evevt {
    list-style: none;
    /* デフォルトのマーカーを非表示 */
    padding: 0;
    /* 左側のパディングをリセット */
    margin: 20px 0;
}

/* リスト項目（li）の共通スタイル */
ul.toppage-evevt li {
    position: relative;
    /* 子要素の絶対配置の基準 */

    /* デザイン */
    padding: 15px 25px 15px 40px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #F9F7F2;
    font-size: 16px;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* アニメーション */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* リスト項目ホバー時のスタイル */
ul.toppage-evevt li:hover {
    background-color: #B5B0A6;
    border-color: #405E26;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
}


/* ======================================================= */
/* 2. リスト項目全体をクリック可能にするための絶対配置リンク */
/* ======================================================= */

/* li 要素内の最初の a タグを絶対配置で全体に広げる */
ul.toppage-evevt li a:first-child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 10;
    /* 他のコンテンツの上位に配置 */
    opacity: 0;
    /* リンク自体は透明にする */
    text-decoration: none;
    /* 下線を非表示 */
    cursor: pointer;
    /* カーソルをポインターにする */
}


/* ======================================================= */
/* 3. .about-artisan 要素へのスタイル適用と全体クリック可能化 */
/* ======================================================= */

/* .about-artisan の共通スタイルとホバー効果 */
.about-artisan {
    position: relative;

    /* リスト項目 li のデザインを適用 */
    padding: 15px 25px 15px 40px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #F9F7F2;
    font-size: 16px;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* アニメーション */
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* .about-artisan ホバー時のスタイル */
.about-artisan:hover {
    background-color: #B5B0A6;
    border-color: #405E26;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: scale(1.02);
}

/* .about-artisan 要素全体をクリック可能にするための絶対配置リンク */
.about-artisan a:first-child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 10;
    /* 他のコンテンツの上位に配置 */
    opacity: 0;
    /* リンク自体は透明にする */
    text-decoration: none;
    /* 下線を非表示 */
    cursor: pointer;
    /* カーソルをポインターにする */
}

/* ======================================================= */
/* 4. 関連商品一覧 (related-products-list) のスタイル */
/* ======================================================= */

.related_products_title {
    font-size: 2rem;
    /* タイトルを少し大きめに */
    font-weight: bold;
    color: #405E26;
    padding-bottom: 10px;
    margin-bottom: 20px;
    /* 下の要素との間隔 */
    border-bottom: 1px solid #eeeeee;
    /* 区切り線 */
}

/* リスト全体の設定 (横並びの土台) */
ul.related-products-list {
    list-style: none;
    /* リストの点（・）を削除 */
    padding: 0;
    margin: 20px 0;

    /* Flexboxで横並びを実現 */
    display: flex;
    flex-wrap: wrap;
    /* 画面幅が狭くなったら折り返す */
    gap: 20px;
    /* アイテム間の隙間 */
}

/* 個別商品カードの設定 (li要素) */
.related-products-list .related-product-item {
    position: relative;
    /* 3つ横並びになるように幅を計算 */
    flex: 1 1 calc(33.333% - 14px);
    /* 3つ並びと隙間 (20px) を考慮 */
    min-width: 250px;
    /* 狭くなりすぎないように最小幅を設定 */

    /* アニメーションの基本設定 */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s;
}

/* 商品全体を囲むリンク要素 (カード本体) */
.related-products-list .product-card-link {
    display: block;
    text-decoration: none;
    /* リンクの下線を削除 */
    color: #333;
    /* テキスト色 */

    /* 画像のデザインを再現 (画像と類似した背景色と角丸、影) */
    border: 1px solid #ddd;
    /* 枠線 */
    border-radius: 8px;
    /* 角丸 */
    background-color: #fff;
    /* 背景色 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* 影 */
    overflow: hidden;
    /* 角丸からはみ出さないように設定 */
    height: 100%;
    /* 親要素（li）に合わせて高さを調整 */
}

/* ---------------------------------------------------- */
/* ホバーエフェクト */
/* ---------------------------------------------------- */
.related-products-list .related-product-item:hover {
    transform: scale(1.02);
    /* ホバー時に102%に拡大 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    /* 影を強調 */
    cursor: pointer;
    z-index: 10;
}


/* ---------------------------------------------------- */
/* 画像部分のスタイル */
/* ---------------------------------------------------- */
.related-products-list .product-thumbnail-wrapper {
    line-height: 0;
    /* 画像上部の余白を削除 */
    margin-bottom: 5px;
}

.related-products-list .product-thumbnail-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------------------------------------------------- */
/* 画像がない場合のプレースホルダーのスタイル (PHPから分離) */
/* ---------------------------------------------------- */
.related-products-list .no-thumbnail-placeholder {
    background-color: #eee;
    height: 200px;
    /* 画像がない場合の高さ */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    /* テキスト色 */
    font-size: 14px;
}


/* ---------------------------------------------------- */
/* 価格とタイトルの情報部分 */
/* ---------------------------------------------------- */
.related-products-list .product-info {
    padding: 10px 15px 15px;
    /* 上:10, 左右:15, 下:15 */
}

.related-products-list .product-price {
    font-size: 14px;
    color: #333;
    /* 価格の色 */
    margin: 0 0 8px 0;
    /* タイトルとの間に少しスペース */
    font-weight: normal;
}

.related-products-list .product-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    /* タイトルの色 */
    margin: 0;
    line-height: 1.4;
}

/* ---------------------------------------------------- */
/* スマートフォンでの表示 (1列) */
/* ---------------------------------------------------- */
@media (max-width: 767px) {
    .related-products-list {
        gap: 15px;
    }

    .related-products-list .related-product-item {
        flex: 1 1 100%;
        /* 1列で表示 */
        min-width: unset;
    }

    .related-products-list .product-info {
        padding: 15px;
    }
}

/* 関連商品リストのスタイル (例としてFlexboxを使用) */
.related-products-list {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; /* アイテムを左右に均等配置 */
    list-style: none;
    padding: 0;
}

/* ダミーアイテム（レイアウト調整用）のスタイル */
.related-product-item.dummy-item {
    /* * visibility: hidden; は、要素を非表示にしますが、
     * Flexboxのアイテムとしての幅と高さを保持し、レイアウトを崩しません。
     * これにより、残りのアイテムが均等に配置されます。
     */
    visibility: hidden; 
    
    /* 非表示にした要素が誤ってクリックされないようにします */
    pointer-events: none; 
}

/* ====================================================================== */
/* イベント詳細情報セクション (.event_detail_info) のスタイル */
/* 添付画像のデザインに近づけるためのCSS */
/* ====================================================================== */

/* 親要素のコンテナ */
.event_detail_info {
    /* 背景色を白、角丸を設定 */
    background-color: #ffffff;
    border-radius: 8px;
    /* 例として8pxの角丸を設定 */
    padding: 20px;
    /* 内側の余白 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    /* 薄い影 */
    margin: 20px 0;
    /* 上下の外側余白 */
}

/* 開催概要のタイトル (h2) */
.event_detail_info .wp-block-heading {
    font-size: 2rem;
    /* タイトルを少し大きめに */
    font-weight: bold;
    color: #405E26;
    padding-bottom: 10px;
    margin-bottom: 20px;
    /* 下の要素との間隔 */
    border-bottom: 1px solid #eeeeee;
    /* 区切り線 */
}

/* 各情報行のコンテナ (.wp-block-group.is-nowrap.is-layout-flex) */
.event_detail_info .wp-block-group.is-layout-flex:not(:first-of-type) {
    display: flex;
    /* flexレイアウトを明示 */
    flex-wrap: nowrap;
    align-items: flex-start;
    /* 項目を上揃え */
    padding: 10px 0;
    /* 上下の余白 */
    border-top: 1px solid #f0f0f0;
    /* 各行の区切り線 */
}

/* 最初の情報行は区切り線が不要なため、上のスタイルを打ち消し */
.event_detail_info .wp-block-group.is-layout-flex:first-of-type {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-top: 10px;
    /* 最初の行の上余白 */
    padding-bottom: 10px;
    border-top: none;
}

/* 項目名 (pタグ) */
.event_detail_info .wp-block-group.is-layout-flex p:first-child {
    font-weight: bold;
    /* 項目名を太字に */
    color: #555555;
    flex: 0 0 120px;
    /* 項目名の幅を固定 (画像で見た感じ約100px) */
    text-align: left;
    /* ★ここを左寄せに修正・追加 */
    margin: 0;
    /* WordPressのデフォルトマージンをリセット */
    padding: 0;
    /* WordPressのデフォルトパディングをリセット */
    line-height: 1.5;
    /* 行の高さを調整 */
}

/* 情報値 (pタグ内のspan) */
.event_detail_info .wp-block-group.is-layout-flex p:last-child {
    flex-grow: 1;
    /* 残りのスペースを情報値に割り当てる */
    color: #333333;
    margin: 0;
    padding: 0 0 0 20px;
    /* 項目名との間に左側の余白 */
    line-height: 1.5;
}

/* ====================================================================== */
/* 会場アクセス */
/* ====================================================================== */
/* マップ全体を囲むコンテナに背景と枠線を適用 */
.map-access-container {
    margin: 20px auto;
    background-color: #ffffff;
    /* 明るいグレーの背景 */
    border: 1px solid #ddd;
    /* 薄いグレーの枠線 */
    border-radius: 4px;
    /* 角を少し丸める */
    /* ★★★ ここまで変更 ★★★ */

    padding: 0;
    overflow: hidden;
    /* 子要素がはみ出さないように */
}

/* 埋め込みエリア（内側のパディングと中央揃えを制御） */
.google-map-embed-area {
    /* ★★★ ここを変更（背景と枠線を削除） ★★★ */
    background-color: transparent;
    /* 背景を透明に */
    border: none;
    /* 枠線を削除 */
    /* ★★★ ここまで変更 ★★★ */

    padding: 20px;
    /* 外側のコンテナ（map-access-container）との間に余白を作成 */
    text-align: center;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ボタンとの間のスペースはボタンのmargin-topで調整するか、下記のようにpaddingで調整 */
    padding-bottom: 5px;
    /* ボタンとの間を少し狭くするために調整 */
}

/* 埋め込まれたiframeの調整（レスポンシブ対応） */
.google-map-embed-area iframe {
    width: 100%;
    border: none;
    min-height: 250px;
}

/* データがない場合のテキストスタイル */
.google-map-embed-area p {
    color: #999;
    font-size: 1.1em;
}

/* 「Google Mapで開く」ボタンのスタイル */
.google-map-button {
    display: block;
    width: 100%;
    padding: 15px 20px;
    background-color: #7AA85E;
    color: white !important;
    text-align: center;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 0 0 4px 4px;
    /* 下の角だけ丸くする */
    transition: background-color 0.3s ease;

    /* ★★★ ここを追加（内側の余白を確保しつつ、コンテナの端まで広げる） ★★★ */
    margin: 0;
}

.google-map-button:hover {
    background-color: #6a9551;
}

/* =======================================
   ACFカスタムギャラリー CSS
   ======================================= */

/* --- ギャラリー全体 --- */
.product-gallery-wrapper {
    max-width: 600px; /* ギャラリー全体の最大幅を設定 (適宜調整) */
    margin: 0 auto;
    margin-bottom: 30px; /* 他のコンテンツとの間隔 */
}

/* ---------------------------------------
   1. メイン画像エリア (スライダー表示)
   --------------------------------------- */

.main-image-area {
    width: 100%;
    /* 高さを幅と同じにし、正方形 (1:1) に固定 */
    aspect-ratio: 3 / 4; 
    
    border-radius: 8px;
    /* 例として8pxの角丸を設定 */
    padding: 20px;
    /* 内側の余白 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    /* 薄い影 */
    margin: 20px 0;
    overflow: hidden; /* 画像が領域外に出ないように隠す */
}

/* 画像を固定されたエリア内に収める */
.main-image-area .main-product-image {
    width: 100%;
    height: 100%; 
    display: block;
    /* 画像をトリミングして領域全体をカバーし、見た目のサイズを固定 */
    object-fit: cover; 
}


/* ---------------------------------------
   2. サムネイル表示エリア (切り替えボタン)
   --------------------------------------- */

.thumbnail-area {
    display: flex;
    justify-content: flex-start; /* 左寄せ */
    gap: 10px; /* サムネイル間の間隔 */
}

.thumbnail-item {
    width: 80px; /* サムネイルの幅を固定 */
    height: 80px; /* サムネイルの高さを固定 */
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    
    /* 背景画像（サムネイル画像）の設定 */
    background-size: cover; /* 画像をトリミングして領域全体をカバー */
    background-position: center;
    background-repeat: no-repeat;
    
    background-color: #fff; /* 画像が読み込まれるまでの背景 */
    transition: border-color 0.2s;
}

/* アクティブなサムネイルのデザイン (緑色の枠線) */
.thumbnail-item.active {
    border-color: #4caf50; 
    border-width: 3px;
}

/* ---------------------------------------
   3. 以前の3カラム表示用CSS (必要であれば残す)
   --------------------------------------- */

.post-custom-gallery-three {
    display: flex; /* Flexboxでアイテムを横並びにする */
    flex-wrap: wrap; 
    gap: 20px; 
    margin-bottom: 30px;
}

.post-custom-gallery-three .gallery-item {
    /* 3分割して、ギャップ分を引く */
    width: calc(33.333% - 13.333px); 
    margin: 0;
    box-sizing: border-box; 
}

.post-custom-gallery-three .gallery-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; 
}

.post-custom-gallery-three .gallery-caption {
    text-align: center;
    font-size: 0.9em;
    padding: 5px 0;
    color: #666;
}

/* スマートフォンでの表示 (1カラムにする) */
@media (max-width: 768px) {
    .post-custom-gallery-three {
        flex-direction: column; 
        gap: 15px;
    }
    .post-custom-gallery-three .gallery-item {
        width: 100%; 
    }
}


/*
 * クラス: .about-creator
 * 目的: 添付画像のような「作り手の紹介」セクションのスタイルを設定
 * 対応HTML構造: WordPressの標準ブロック（グループ、見出し、画像）
 */
.about-creator {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    border-radius: 12px;       /* 角丸 */
    padding: 30px;             /* 内側の余白 */
    max-width: 900px;          /* 最大幅を設定 (適宜調整してください) */
    margin-left: auto;         /* 中央寄せ */
    margin-right: auto;        /* 中央寄せ */
}

/* メインの見出し（作り手の紹介） */
.about-creator > .wp-block-heading {
    font-size: 1.8em;
    font-weight: 600;
    margin-bottom: 25px;
}

/* 画像とテキストの横並びコンテナ (wp-block-group is-layout-flex) */
.about-creator > .wp-block-group.is-layout-flex {
    /* is-layout-flexが既にdisplay:flexを設定しているはずですが、念のため中央揃え */
    align-items: center; /* 垂直方向中央寄せ */
    justify-content: center; /* 水平方向中央寄せ */
    gap: 30px; /* 画像とテキスト間のスペース */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* プロフィール画像 (サイトロゴブロック) */
.about-creator .wp-block-site-logo {
    position: relative;
    overflow: hidden; /* 画像を円形に切り取る */
}

/* サイトロゴのリンクタグと画像自体 */
.about-creator .wp-block-site-logo .custom-logo-link,
.about-creator .wp-block-site-logo .custom-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をボックスに収める */
    border-radius: 50%; /* 画像自体も円形に */
    /* 以前の `opacity: 0;` の設定は削除しています */
}


/* テキスト部分のグループ */
.about-creator .wp-block-group.is-layout-constrained:not(.about-creator) {
    /* 画像の隣のテキストコンテナ */
    flex-grow: 1; /* スペースを埋める */
}

/* 名前（山田太郎 / Taro Yamada） */
.about-creator .wp-block-group:not(.about-creator) > .wp-block-heading {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

/* キャッチフレーズ（「安らぎの創造者」）を想定した次の段落 */
.about-creator .wp-block-group:not(.about-creator) > .wp-block-heading + p:first-of-type {
    color: #555;
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 15px;
    /* HTMLにキャッチフレーズがないため、最初の段落をそのように扱います */
}

/* プロフィール本文 */
.about-creator .wp-block-group p {
    color: #666;
    font-size: 0.95em;
    line-height: 1.8;
}

.about-creator .wp-block-group p:last-child {
    margin-bottom: 0;
}


/* レスポンシブ対応: 画面幅が狭い場合は縦並びにする */
@media (max-width: 600px) {
    .about-creator > .wp-block-group.is-layout-flex {
        flex-direction: column; /* 縦並び */
        text-align: center;     /* テキストを中央寄せ */
        gap: 20px;
    }
    .about-creator .wp-block-group:not(.about-creator) > .wp-block-heading,
    .about-creator .wp-block-group:not(.about-creator) > .wp-block-heading + p {
        text-align: center;
    }
}