/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* ヘッダービルダー使用時: header_placeholder による白い空白を除去 */
@media (max-width: 768px) {
    body.mfn-header-template #Header {
        min-height: 0 !important;
        padding-top: 0 !important;
        height: 0 !important;
    }

    [id] {
        scroll-margin-top: 0 !important;
    }
}

/* ヘッダーメニュー モバイル: エリアから探す・ジャンルから探すを縦2行に */
@media (max-width: 768px) {
    #menu-maps-1.mfn-header-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* トップページ ジャンルから探す モバイル: 3列表示 */
@media (max-width: 768px) {
    .genre-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* トップページ エリアから探す モバイル: サイドバー+リストを縦積みに */
@media (max-width: 768px) {
    .area-container {
        flex-direction: column !important;
    }

    .area-container {
        border: none !important;
    }

    .area-sidebar {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        background-color: transparent !important;
        border-right: none !important;
        border-bottom: 1px solid #ccc !important;
        justify-content: flex-start !important;
    }

    .area-content-list li {
        flex: 0 0 25% !important;
        /* 4列に */
    }
}

/* トップページ 検索フォーム モバイル: エリア・ジャンルを縦2行に */
@media (max-width: 768px) {
    .search_criteria {
        flex-direction: column !important;
        width: 90% !important;
        padding: 15px !important;
    }

    .select_box {
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    .select_box select {
        width: 100% !important;
        box-sizing: border-box;
    }

    .search_button {
        width: 90% !important;
        padding: 15px 15px 30px !important;
    }
}

/* 地図ページ モバイル: ヘッダー・フッター非表示・全画面マップ */
@media (max-width: 768px) {

    body.page-id-63387 #mfn-header-template,
    body.page-id-63387 #mfn-page-header,
    body.page-id-63387 #Footer,
    body.page-id-63387 #mfn-footer-template,
    body.page-id-63387 #Subheader,
    body.page-id-63387 .mfn-main-slider {
        display: none !important;
    }

    body.page-id-63387,
    html.page-id-63387 {
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-id-63387 #Wrapper,
    body.page-id-63387 #Content,
    body.page-id-63387 .mfn-content-wrap,
    body.page-id-63387 .container,
    body.page-id-63387 .column_container,
    body.page-id-63387 #content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body.page-id-63387 #map-area-header {
        display: none !important;
    }
}

/* 2026-04-07 */
/* Google Maps */
/* スタイル部分を以下のように修正 */
/* 地図全体を囲むコンテナ */

/* 2026-02-28 */
/* エリアから探す */
.area-container {
    display: flex;
    border: 1px solid #666;
    /* max-width: 600px; */
    margin: 20px auto;
    font-family: sans-serif;
}

/* 1列目: 北陸・中部 */
/* 1列目: 北陸・中部 */
.area-sidebar {
    background-color: #f0f4f8;
    /* 上下のパディングを10pxに合わせる（左右は任意） */
    padding: 15px 20px 10px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-right: none;
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: 120px;
    /*     font-weight: bold; */
    /* ベースラインを合わせるための保険 */
    line-height: 1.5;
}

/* 2列目: 都道府県リスト */
.area-content-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* 上詰めに変更 */
    margin: 0 !important;
    /* 1列目と同じ上下パディング（10px）に設定 */
    padding: 15px 0 10px 0;
    list-style: none !important;
}

.area-content-list li {
    flex: 0 0 10%;
    /* 1行に10個並べる場合 (100% / 5) */
    /* flex: 0 0 25%; */
    /* 1行に4個並べるならこちら */
    text-align: center;
    /* 文字を各枠の中央に寄せる */
    box-sizing: border-box;
    /* liの中のパディングも、1列目の文字の高さと合うように調整 */
    padding: 0 15px;
    line-height: 1.5;
    /* 1列目と同じ行高にする */
    margin-bottom: 5px;
    /* 必要なら行間を調整 */
}

.area-content-list li:last-child {
    border-bottom: none;
}

/* 2026-02-24 */
/* ジャンルから探す */
.genre-container {
    width: 100%;
    display: grid;
    /* 5列固定 */
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.genre-item {
    border: 1px solid #666;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    /* ここから下の3行で中身を縦に並べ、高さを揃える */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.genre-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形 */
    object-fit: cover;
}

.genre-item p {
    margin: 0;
    padding: 10px;
    /* 必要に応じて文字を中央寄せにするなら以下を解除 */
    /* text-align: center; */
}

/* 特集 */

.feature-container {
    width: 100%;
    display: grid;
    /* 3列固定 */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.feature-item {
    border: 1px solid #666;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    /* ここから下の3行で中身を縦に並べ、高さを揃える */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.feature-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* 正方形 */
    object-fit: cover;
}

.feature-item p {
    margin: 0;
    padding: 10px;
    /* 必要に応じて文字を中央寄せにするなら以下を解除 */
    text-align: left;
}

/* お店 */

.shop-container {
    width: 100%;
    display: grid;
    /* 3列固定 */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.shop-item {
    border: 1px solid #666;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
    /* ここから下の3行で中身を縦に並べ、高さを揃える */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shop-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形 */
    object-fit: cover;
}

.shop-item p {
    margin: 0;
    padding: 10px;
    /* 必要に応じて文字を中央寄せにするなら以下を解除 */
    text-align: center;
}

.wrap-btn-more {
    display: block;
    width: 100%;
    margin: 20px 0;
    text-align: center;
}

.btn-more {
    display: inline-block;
    width: 36%;
    height: 60px;
    padding: 12px 30px;
    background-color: #EFB43F;
    /* ボタンの色（お好みで変更してください） */
    color: #fff;
    text-decoration: none;
    color: #333;
    border-radius: 10px;
    /* 丸み */
    transition: all 0.3s ease;
    /*   font-weight: bold; */
    /* 	text-align: center; */
    font-size: 14px;
}

/* ホバー（マウスを乗せた時）の動き */
.btn-more:hover {
    background-color: #EFB43F;
    transform: translateY(-2px);
    /* 少し浮き上がる */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 2026-02-13 */
/* HOME */
.search_criteria,
.search_button {
    margin: 0 auto;
    width: 60%;
    background-color: #fff;
    padding: 30px;
    display: flex;
    justify-content: center;
    /* 中央揃え */
    /* 他にも↓ */
    /* justify-content: space-between; 端に振り分け */
    /* justify-content: space-around; 均等配置 */
}

.search_criteria {
    padding-bottom: 0px;
}

.search_button {
    padding-top: 0px;
    padding-bottom: 40px;
}

.search_button button {
    width: 60%;
    height: 60px;
    background-color: #EFB43F;
    border-radius: 10px;
}

.select_box {
    flex: 1;
    /* ← これで等幅 */
    padding: 0 20px;
    border: 1px solid #ccc;
    text-align: center;
}

.select_wrap {
    position: relative;
}

.select_area {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: rgba(44, 204, 211, 0.3);
    width: 100%;
    padding: 10px 44px 10px 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.mfn-form select,
.mfn-form .select_area {

    -webkit-appearance: none !important;
    appearance: none !important;

    background-image: none !important;
    background: rgba(44, 204, 211, 0.3) !important;
}


/* 古いEdge対策 */
.mfn-form select::-ms-expand {
    display: none;
}


/* ▲▼を縦並びにする */
.select_wrap::after {
    content: "▲\A▼";
    white-space: pre;
    /* 改行を有効にする */
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    line-height: 8px;
    text-align: center;
    pointer-events: none;
    color: #333;
}

/* 2026-02-06 */
/* 新着お店レポート css */
/* をココに書く */




/* 人気レポート css */
/* をココに書く */





/* PC（例：1024px以上） */
@media (min-width: 1024px) {
    [id] {
        scroll-margin-top: 440px;
        /* ヘッダーの高さに合わせる */
    }

    /* 	html {
		scroll-padding-top: 480px;
	} */
}

@media (max-width: 768px) {
    /* 		html {
		scroll-padding-top: 400px;
	}
 */

    [id] {
        scroll-margin-top: 440px;
        /* ヘッダーの高さに合わせる */
    }

    /* 	#_top {
		height: 1px;
		scroll-margin-top: 200px;
		scroll-padding-top: 480px; 
	} */
}


h2,
h3 {
    margin-top: 20px;
}

.tab a:visited {
    color: #fff;
}

.tab a {
    color: #fff;
}


p.breadcrumb {
    margin-top: 20px;
    color: #666;
    line-height: 20px;
}

p.header {
    margin: 10px 0 0 0;
}

h1.header {
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    h1.header {
        font-size: 1.1rem;
    }
}

.img-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* PCは4列 */
    gap: 10px;
}

.img-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* モバイル（768px以下）は2列 */
@media (max-width: 768px) {
    .img-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* SP：2列 */
    width: 150%;
    row-gap: 5px;
    padding-bottom: 10px;
}

/* PC（例：1024px以上） */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns:
            minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
        /* ← ここで4列 */
    }

    .item p {
        margin: 0px !important;
    }

    .item {
        margin-bottom: 0px;
    }
}


/* モバイルでは全幅100% */
@media (max-width: 768px) {
    #Content {
        /* 		padding-top: 440px; */
    }

    /* Grid自体も縮められるように（重要） */
    .grid {
        display: grid !important;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
        width: 90%;
        row-gap: 5px;
        /*   padding-bottom: 10px; */
    }

    /* Gridの子が内容で広がらないように */
    .grid>.item {
        min-width: 0;
    }

    .grid .item p {
        margin: 0px !important;
    }

    /* ジャンルを包む item：折り返しOKにする */
    .item:has(.cf-item) {
        display: flex;
        flex-wrap: wrap;
        /* ← nowrap禁止を解除 */
        align-items: center;
        min-width: 0;
    }

    /* ジャンル（cf-item）：途中でも折る */
    .item .cf-item {
        display: inline-block;
        margin-right: 6px;
        white-space: normal !important;
        /* ← nowrapを強制解除 */
        overflow-wrap: anywhere;
        /* ← 途中でも折る（最強） */
        word-break: break-word;
        /* ← 保険 */
        max-width: 100%;
    }

    .tab {
        padding: 10px 0 20px 0;
    }
}

.tab a {
    color: #fff;
    font-weight: bolder;
}

.two-col,
.two-col-info-1 {
    display: flex;
    justify-content: space-between;
}

.two-col .name {
    text-align: left;
    padding-left: 20px;
}

.two-col .price {
    text-align: right;
    padding-right: 20px;
}

/* 全体の外枠 */
.two-col-table {
    border: 1px solid #333;
    border-radius: 5px;
    /* ← 外側だけ角丸 */
    overflow: hidden;
    /* ← 内部の線を角丸内に収める */
}

/* 各行 */
.two-col-info-1 {
    display: grid;
    grid-template-columns: 30% 70%;
    border-bottom: 1px solid #333;
}

/* 最後の行だけ下線なし */
.two-col-info-1:last-child {
    border-bottom: none;
}

/* セル共通 */
.two-col-info-1 .left,
.two-col-info-1 .right {
    padding: 10px 12px;
}

/* 中央の2本線 */
.two-col-info-1 .left {
    border-right: 3px double #333;
    font-weight: 400;
    letter-spacing: 0.5rem;
}

@media (max-width: 768px) {
    .two-col-info-1 .left {
        letter-spacing: 0rem;
    }

    /* 右で、横並びに表示 */
    .two-col-info-1 .right {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .cf-item {
        padding: 0 10px 0 0;
        /* padding: 4px 10px; */
        /* 見た目調整（任意） */
        /* border: 1px solid #ccc; */
        /* border-radius: 4px; */
        /* font-size: 14px; */
    }

    /* 親ラッパー（2つのdivを囲む要素） */
    .footer_mcb {
        display: flex;
        gap: 20px;
    }
}

/* PC：横並び */
@media (min-width: 769px) {
    .footer_mcb {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.mfn-footer-menu {
    flex-direction: row;
    gap: 20px;

}


/* モバイル：縦並び + 順番入れ替え */
@media (max-width: 768px) {
    .footer_mcb {
        flex-direction: column;
    }

    /* 最初のdiv（画像）を下へ */
    .footer_mcb .mcb-wrap:first-child {
        order: 2;
    }

    /* 2番目のdiv（UL）を上へ */
    .footer_mcb .mcb-wrap:last-child {
        order: 1;
    }

    .column_footer_logo .logo-wrapper img {
        display: block;
        margin: 0 auto;
    }

    .mfn-footer-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .mfn-footer-menu li {
        width: 30.0%;
    }
}

/* Google Maps */
.acf-map {
    width: 100%;
    height: 420px;
    border-radius: 12px;
}