/* 
Theme Name: Arkhe Child
Template: arkhe
Description: Arkheの子テーマです。
Version: 3.12.0
*/
/* =========================================
    共通
========================================= */
/* 1. HTMLとBODYの制約を完全にリセット */

body {
    font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', 'sans-serif';
    overflow-x: hidden;
    margin: 0;
}

/* flex */
.flex {
    display: flex;
    align-items: center;
}

/* PCのみ表示 */
@media (min-width: 1001px) {
    .pc {
        display: block;
    }

    .sp {
        display: none;
    }
}

/* SPのみ表示 */
@media (max-width: 1000px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}

/* 改行 */
span.word {
    display: inline-block;
}


/* body余白 */
.l-content__body {
    margin: 0 auto;
}

/* ボタン */
.btn-wrap {
    text-align: center;
}

.s-top-button,
.s-button {
    background-color: #CF1F1F;
    color: #fff;
    border: 2px solid #CF1F1F;
    box-shadow: inset 0 0 0 2px #fff;
    padding: 12px 24px;
    font-weight: 700;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;

}

.s-top-button {
    min-width: 300px;
}

.s-top-button:hover,
.s-button:hover {
    background-color: #fff;
    color: #CF1F1F;
    box-shadow: inset 0 0 0 2px #CF1F1F;
}

/* スペーサー */
.spacer5-10 {
    margin-top: 5%;
}

@media screen and (max-width: 480px) {
    .spacer5-10 {
        margin-top: 10%;
    }
}

/* =========================================
    ヘッダー
========================================= */
/* ヘッダーの下線とシャドウボックス */
.l-header {
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
    border-bottom: solid 2px #ff0000;
}

/* ナビゲーションメニューのメインテキストを強調 */
.c-gnav .__mainText {
    font-weight: bold;
    font-size: 16px;
}

/* ナビゲーションのリストアイテムのデザイン */
.c-gnav li {
    list-style: none;
    padding: 0.5em 0;
}

/* リストアイテムの区切り線（最後の要素以外に適用） */
.c-gnav li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    width: 1px;
    height: 60%;
    background-color: #DEDDDD;
}

/* ナビゲーションリンクの下線（ホバー時にアニメーション） */
.c-gnav__a::after {
    position: absolute;
    left: 10%;
    content: '';
    width: 80%;
    height: 2px;
    background: #FF0000;
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.3s;
}

/* ホバー時に下線を表示 */
.c-gnav__a:hover::after {
    transform: scale(1, 1);
}

/* 現在のページのリンクに下線を適用 */
.c-gnav__a.current::after,
.c-gnav__li.current-menu-item>.c-gnav__a::after {
    transform: scale(1, 1);
}

/* ホームページでは現在のページの下線を非表示 */
.home .c-gnav__a.current::after,
.home .c-gnav__li.current-menu-item>.c-gnav__a::after {
    transform: scale(0, 1) !important;
}

/* 現在のページ、フォーカス時、ホバー時の文字色変更 */
.c-gnav__li.-current,
.c-gnav__li.focus,
.c-gnav__li:hover {
    color: #ff0000;
}

/* サブメニューでは下線をなくす */
.sub-menu .c-gnav__a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    transform: none !important;
    transition: none !important;
}

/* ハンバーガーアイコン */
.c-iconBtn {
    background: #FF0000;
    color: #FFF;
}

/* ドロワー追加メニュー */
.p-drawer {
    background: #FFF;
    color: #000;

}

.drawer-img-wrap {
    text-align: left;
    padding: 20px 0;
}

.drawer-img-wrap img {
    width: 100px;
    height: auto;
}

.drawer-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
}

/* ===== スマホ ===== */
@media (max-width: 1000px) {

    .l-header__center {
        grid-area: left;
    }

    /* まず全ナビを非表示 */
    .l-header__right {
        display: block;
    }

    /* sp-none が付いたものだけ非表示 */
    .l-header__right .sp-none {
        display: none;
    }

    /* 横並びにする */
    .l-header__right ul {
        display: flex;
        gap: 12px;
    }

    .c-gnav li {
        padding: 0;
    }

    .c-gnav__a::after {
        bottom: 10px;
        width: 90%;
    }
}

/* =========================================
    パンくずリスト
========================================= */

.p-breadcrumb {
    background: #FEF0BD;
    color: #595757;
}

/* =========================================
    TOPページ
========================================= */

/* 共通 タイトル設定 */
.top-title {
    font-size: 30px;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.3em;
    flex-wrap: wrap;
    margin: 0 0 3%;
}

/* 破線のスラッシュ */
.top-title .slash {
    height: 30px;
    position: relative;
}

.top-title .jp {
    white-space: nowrap;
}

.top-title .slash::before {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 2px dashed #FE726F;
    transform: rotate(20deg);
    transform-origin: center;
}

.top-title .en {
    font-size: 14px;
    color: #CF1F1F;
    font-family: "Noto Serif JP", "游明朝", serif;
    white-space: wrap;
}

@media (max-width: 480px) {
    .top-title {
        font-size: 24px;
    }

    .top-title .en {
        font-size: 12px;
        letter-spacing: 0.15em;
    }
}

/* --- メインビジュアルエリア --- */

.mv-wrap {
    position: relative;
    width: 100%;
    height: calc(100svh - 64px);
    overflow: hidden;
}

.mv-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mv-text {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    z-index: 3;
    pointer-events: none;
}

.mv-text-inner {
    width: 100%;
    padding: 8% 5% 3%;
    text-align: left;
    color: #fff;
    background: url("/saloon/wp-content/uploads/2026/01/mv-overlay.png") no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
}

/* --- ここから：弾むアニメーション設定 --- */
.mv-text h1 {
    margin: 0;
    font-size: clamp(1.5rem, 5vw, 4rem);
    line-height: 1.2;
}

/* 一文字ずつの設定 */
.mv-text h1 span {
    display: inline-block;
    opacity: 0;
    transform: scale(0.3) translateY(20px);
    animation: stampPush 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 「と」だけ少し小さくする場合 */
.mv-text h1 span.small-char {
    font-size: 0.7em;
    vertical-align: middle;
    margin: 0 0.2em;
}

/* 順番に出現 */
.mv-text h1 span:nth-child(1) {
    animation-delay: 0.2s;
}

.mv-text h1 span:nth-child(2) {
    animation-delay: 0.3s;
}

.mv-text h1 span:nth-child(3) {
    animation-delay: 0.4s;
}

.mv-text h1 span:nth-child(4) {
    animation-delay: 0.5s;
}

.mv-text h1 span:nth-child(5) {
    animation-delay: 0.6s;
}

.mv-text h1 span:nth-child(6) {
    animation-delay: 0.7s;
}

.mv-text h1 span:nth-child(7) {
    animation-delay: 0.8s;
}

.mv-text h1 span:nth-child(8) {
    animation-delay: 0.9s;
}

@keyframes stampPush {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }

    70% {
        transform: scale(1.1) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- ここまで：アニメーション --- */

.mv-text p {
    margin: 8px 0 0;
    font-size: clamp(0.9rem, 2vw, 1.5rem);
}

/* スマホ用レスポンシブ */
@media screen and (max-width: 768px) {
    .mv-wrap {
        height: auto;
    }

    .mv-video {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .mv-text-inner {
        padding: 8% 5% 5% 5%;
        background-size: 100% 100%;
    }

    .mv-text h1 {
        font-size: clamp(1.2rem, 5vw, 4rem);
    }

    .mv-text p {
        font-size: clamp(0.8rem, 2vw, 1.5rem);
        margin-top: 4px;
    }
}

/* スライダー・その他パーツ */
.slider {
    padding-left: 0;
    width: 100%;
    display: flex;
    max-width: 1400px;
    margin: auto;
}

.slider li {
    height: auto;
    margin-right: 10px;
    margin-left: 10px;
}

.slide-arrow.slick-arrow {
    bottom: 0;
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    z-index: 999;
}

.prev-arrow {
    left: -1vw;
}

.next-arrow {
    right: -1vw;
}

@media screen and (max-width: 480px) {
    .slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .3;
        transform: scale(.9);
        transition: opacity .5s, transform .5s;
    }

    .slick-center img {
        opacity: 1;
        transform: scale(1);
    }

    .slider li {
        margin-right: 3px;
        margin-left: 3px;
    }

    .slide-arrow.slick-arrow {
        width: 25px;
        height: 25px;
        opacity: 1;
    }

    .prev-arrow {
        left: 10vw;
    }

    .next-arrow {
        right: 10vw;
    }
}

.slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
    opacity: 0;
}

.slider.slick-initialized {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.hours {
    max-width: 300px;
    margin: 0 auto;
}

/* メニュー */
.top-menu-inner {
    gap: 50px;
}

@media screen and (max-width: 768px) {
    .top-menu-inner {
        gap: 5px;
 max-width: 80%;
    margin: 0 auto;
    }
}

.top-menu-pickup {
    position: relative !important;
    overflow: visible !important;
}


.pickup-text {
    position: absolute !important;
    top: 0;
    left: -20px;
    z-index: 10;
    margin: 0 !important;
    width: 100px !important;
    height: auto !important;
}

@media screen and (max-width: 768px) {
    .pickup-text {
        left: -5px;
        width: 80px !important;
    }
}

.top-menu-pickup img:not(.pickup-text) {
    display: block;
    position: relative;
    z-index: 1;
}


/* --- コンテナ設定 --- */
.menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- カードリンク（PC: 4列） --- */
.menu-card-link {
    display: block;
    text-decoration: none;
    /* (100% - gap 20px*3) / 4 = 23.5% */
    width: calc(25% - 15px);
    max-width: 249px;
    transition: transform 0.25s ease;
}

.menu-card-link:hover {
    opacity: 0.75;
}

/* PC・SP共通設定 */
.menu-card {
    aspect-ratio: 1 / 1;
    /* カード全体を正方形に固定 */
    display: flex;
    flex-direction: column;
}

/* 画像部分：全体の 80% くらいを占める設定 */
.menu-image-container {
    flex: 0 0 80%;
    /* 高さを割合（80%）で指定 */
    width: 100%;
    overflow: hidden;
}

/* 文字部分：残りの 20% */
.menu-text-box {
    flex: 1;
    /* 残りのスペースをすべて使う */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 画像自体のズーム設定（以前のまま） */
.menu-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

/* --- 個別の拡大率設定 --- */

/* 1枚目：グランド */
/* .menu-card-link:nth-child(1) .menu-image-container img {
    transform: scale(1.3);

    object-position: 65% 20%;
} */

/* 2枚目：ランチ（ */
/* .menu-card-link:nth-child(2) .menu-image-container img {
    transform: scale(1.5);
    object-position: 70% 20%;
} */

/* 3枚目：お子様 */
/* .menu-card-link:nth-child(3) .menu-image-container img {
    transform: scale(1.2);
    object-position: center center;/
} */

/* 4枚目：デザート */
/* .menu-card-link:nth-child(4) .menu-image-container img {
    transform: scale(1.1);
    object-position: 50% -72%;
} */

/* --- カード本体（ここが白い四角） --- */
.menu-card {
    background-color: #fff;
    border-radius: 30px;
    /* 角丸36px */
    overflow: hidden;
    /* はみ出た画像をカット */
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- 画像エリア（221*180の比率を維持） --- */
.menu-image-container {
    width: 100%;
    height: 180px;
    /* 指定の高さ */
    overflow: hidden;
}

.menu-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 商品画像を大きく表示してカット */
    display: block;
    /* transform: scale(1.3); */
    /* 1.3倍にズーム（数値はお好みで） */
    /* transform-origin: center; */
    /* 中央を中心に拡大 */
}

/* --- テキストエリア（残り部分） --- */
.menu-text-box {
    height: 41px;
    /* 221 - 180 = 41px */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.menu-card-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    letter-spacing: 0.05em;
}

/* --- スマホ・タブレット（SP: 2列固定） --- */
@media (max-width: 999px) {
    .menu-container {
        gap: 15px 10px;
        /* 上下15px、左右10px */
        padding: 10px;
        /* 1つ落ちを防ぐため、親の幅を制限 */
        max-width: 520px;
    }

    .menu-card-link {
        /* 1つ落ちさせないための計算設定 */
        width: calc(50% - 5px);
        flex: 0 0 calc(50% - 5px);
        max-width: 249px;
    }

    .menu-image-container {
        /* スマホ時、カード幅に合わせて高さを微調整したい場合はここ */
        height: 150px;
    }

    .menu-text-box {
        height: 45px;
    }
}

/* さらに小さい画面での調整 */
@media (max-width: 480px) {
    .menu-card {
        border-radius: 20px;
        /* 小さい画面では角丸を少し抑えると綺麗です */
    }

    .menu-card-title {
        font-size: 14px;
    }
}

/* --- こだわりセクション設定 --- */
/* --- 変数設定（管理しやすくするため） --- */
:root {
    --pc-header-h: 64px;
    --sp-header-h: 56px;
}

/* --- コンテナ設定 --- */
.entry-content,
.post-content {
    overflow: visible !important;
}

.top-point-outer {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    height: 300vh;
}

/* --- 1. 固定表示レイヤー（PC基準） --- */
.fixed-content-layer {
    position: sticky;
    top: var(--pc-header-h);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--pc-header-h));
    height: calc(100svh - var(--pc-header-h));
    overflow: hidden;
    z-index: 1;
}

/* --- 2. 各パネル（動画・画像） --- */
.content-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.content-panel.active {
    transform: translateY(0);
    z-index: 2;
}

.content-panel.exit {
    transform: translateY(-30%);
    z-index: 1;
}

.video-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.video-wrap video {
    width: 100.5%;
    height: 100.5%;
    object-fit: cover;
}

/* 中央キャプション（画像） */
.top-point-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 800px;
    z-index: 10;
}

/* --- 3. UIオーバーレイ --- */
.top-point-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
}

.top-point-fixed-logo {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    max-width: 400px;
}

.top-point-fixed-logo img {
    width: 100%;
    height: auto;
aspect-ratio: 443 / 120;
}

.top-point-side-nav {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: auto;
}

.top-point-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
}

.top-point-dot.active {
    background: #ff0000;
    transform: scale(1.5);
}

.top-point-fixed-button {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
}



/* --- 4. スクロール検知レイヤー --- */
.scroll-trigger-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.step-section {
    height: calc(100vh - var(--pc-header-h));
    height: calc(100svh - var(--pc-header-h));
}

/* --- スマホ対応（999px以下） --- */
@media screen and (max-width: 999px) {

    /* 固定レイヤーの高さを 56px ベースに変更 */
    .fixed-content-layer {
        top: var(--sp-header-h);
        height: calc(100vh - var(--sp-header-h));
        height: calc(100svh - var(--sp-header-h));
    }

    /* 判定セクションも同様に変更 */
    .step-section {
        height: calc(100vh - var(--sp-header-h));
        height: calc(100svh - var(--sp-header-h));
    }

    .top-point-fixed-logo {
        width: 60%;
        top: 20px;
    }

    .top-point-caption {
        width: 95%;
    }

    .top-point-side-nav {
        right: 15px;
    }

    .top-point-fixed-button {
        bottom: 30px;
    }
}

/* RP動画 */
.movie-title {
    background-color: #CF1F1F;
    color: #FFF;
    padding: 10px;
    font-size: clamp(10px, 1.5vw, 14px);
    width: 100%;
    text-align: center;

}

/* TOP新着情報 */

.news-wrapper-title {
    position: relative;
    font-size: clamp(20px, 4vw, 28px);
}

/* NEWSリスト コンテナ */
.news_contents {
    width: 100%;
    border-bottom: 1px dotted #696969;
    display: flex;
    height: auto;
    padding-bottom: 10px;
}

/* サムネイル */
.news_contents .thumb {
    width: 100px;
    height: 100px;
    margin: 10px;
}

.news_contents .thumb img {
    width: 100%;
    height: auto;
}

/* 右側コンテンツ */
.news_contents .news_right {
    flex: 1;
    margin: 10px 0 0 0;
}

.news_contents .news_title a {
    color: #000;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
}

.news_right p.post_contets {
    width: 100%;
    font-size: 14px;
}

/* NEWラベル */
.news_new {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    background: red;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
}


/* PR動画　インスタ */
.pr-instagram-wrap {
    max-width: 1200px;
    margin: 30px auto;
    gap: 30px;
}

.instagram-container {
    max-width: 400px;
}

.instagram-container img {
    width: 29px;
    height: 29px
}

/* インスタ背景 */
.instagram {
    background-color: #f8f8f8;
    border: 5px solid;
    border-image-source: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    border-image-slice: 1;
}

@media screen and (max-width: 768px) {

    .pr-instagram-wrap,
    .pr-wrap {
        flex-direction: column;
    }
}

/* キッズサービス */
.top-kids-wrap {
    background: url("/saloon/wp-content/uploads/2026/02/top-kids-bg.png") center bottom / cover no-repeat;
}

.top-kids-img {
    margin-top: 0 !important;
}

/* お助けカード */

.top-help-containe {
    max-width: 1200px;
    margin: 0 auto !important;
}

.top-help-text-wrap {
    margin-top: 0 !important;
}

.top-help-text {
    gap: 10px !important;
}

.top-help-jyoji {
    width: 450px;
    margin: 0 auto;
}

/* top-help-wrap セクション内限定で margin-top を 0 に上書き */
.top-help-wrap :is(.wp-block-column, .wp-block-group__inner-container, .wp-block-cover__inner-container)> :not(:first-child) {
    margin-top: 0 !important;
}

@media screen and (max-width: 768px) {
    .top-help-jyoji {
        width: 100%;
        max-width: 450px
    }
}

.shop-recruit-wrap img {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

/* =========================================
    固定ページ共通
========================================= */

/* 個別ページタイトル */
.page-title {
    color: #FFF;
    padding: .5em .75em;
    overflow: hidden;
    background-size: cover;
     background: linear-gradient(
        to right,
        #CF1F1F 0%,
        #CF1F1F 40%,
        #D53D30 50%,
        #DF614A 60%,
        #E68163 70%,
        #ED9A78 80%,
        #F0B48F 90%,
        #F2C8A0 100%
    );
    position: relative;
}
.page-title::before {
    content: "";
    position: absolute;
    left: .75em;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;  /* アイコンの実サイズに合わせる */
    height: 50px;
    background-image: url(/saloon/wp-content/uploads/2026/06/fire-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}

 .c-pageTitle__main {
    color: #FFF;
    padding: .5em .75em;
    text-align: center;
    overflow: hidden;
    background-size: cover;
     background: linear-gradient(
        to right,
        #CF1F1F 0%,
        #CF1F1F 40%,
        #D53D30 50%,
        #DF614A 60%,
        #E68163 70%,
        #ED9A78 80%,
        #F0B48F 90%,
        #F2C8A0 100%
    );
    position: relative;
    z-index: -2;
} 
.c-pageTitle__main::before {
    content: "";
    position: absolute;
    left: .75em;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;  /* アイコンの実サイズに合わせる */
    height: 50px;
    background-image: url(/saloon/wp-content/uploads/2026/06/fire-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}


@media screen and (max-width: 768px) {
    .c-pageTitle__main {
        font-size: 18px;
    }

    .c-pageTitle__main::after {
        right: -350px;
    }
}

/* =========================================
    メニュー一覧.おすすめページ
========================================= */
/* メニュー、オススメページタイトル */
.menu-title {
    font-size: clamp(1.25rem, 6vw, 2.5rem);
    position: relative;
    padding: 1rem;
    text-align: center;
}


.menu-title span {
    font-size: clamp(0.875rem, 3vw, 1.2rem);
    display: block;
    color: #696969;
    margin-top: 0.25rem;
}

.menu-title:first-letter {
    font-size: clamp(2rem, 8vw, 3.5rem);
    color: #fa4141;
}

.menu-title:before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(50px, 10vw, 100px);
    height: 2px;
    content: '';
    background: #fa4141;
}

.menu-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    background-color: #FFF;
}

.menu_img {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 30px;
}

.menu_img a {
    max-width: 23.875%;
    margin-left: 1.5%;
    margin-bottom: 1.5%;
    overflow: hidden;
}
.menu-kids_img a {
    max-width: 47.75%;
}

.menu_img a:nth-child(4n+1) {
    margin-left: 0px;
}

.menu_img img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- スマホ用の調整 --- */
@media screen and (max-width: 768px) {
    .menu-wrap {
        padding: 0;

    }

    .menu_img {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .menu_img a {
        flex: 0 1 100%;
        max-width: 500px;
        margin-left: 0;
    }

    /* .group1, .group2 ... .group6 すべてのクリックを無効化 */
    .group1,
    .group2,
    .group3,
    .group4,
    .group5,
    .group6 {
        pointer-events: none !important;
        cursor: default !important;
        text-decoration: none !important;
    }
}


/* 読み込み中のぐるぐるなどの位置調整（必要に応じて） */
#colorbox {
    outline: none !important;
}

/* モーダルアイコンの位置調整 */
#cboxLoadedContent {
    background: #000 !important;
}

#cboxPreviou {
    left: 4px !important;
}

#cboxNext {
    right: 4px !important;
}

#cboxClose {
    top: 4px !important;
}

/* =========================================
    店舗一覧ページ
========================================= */
/*1. 共通設定（営業時間・地域ボタン・アイコン）*/
/* 営業時間、県名タイトルh2 */
.store-page-title {
    font-size: clamp(20px, 4vw, 28px);
    color: #FFF;
    background-color: #E60012;
    font-weight: 500;
    padding: 10px;
}

.store-page-title span {
    font-size: clamp(12px, 4vw, 16px);
}

/* 地域選択ボタン */
.store-btn-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 600px;
    margin: 20px auto !important;
}

/* 住所・TEL */
.address,
.tell {
    align-items: flex-start;
}

/* 住所アイコン */
.store-icon {
    flex: 0 0 25px !important;
    /* 伸びない、縮まない、25px固定 */
    width: 25px !important;
    min-width: 25px !important;
    /* 最小幅を25pxで死守 */
    margin: 0 8px 0 0 !important;
}

/* 予約ボタン */
.reserve-btn {
    background-color: #CF1F1F;
    border: 2px solid #CF1F1F;
}

.reserve-btn:hover {
    color: #CF1F1F;
    box-shadow: inset 0 0 0 2px #CF1F1F;
}

@media screen and (min-width: 1001px) {
    .store-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 30px 10px;
    }

    .store-wrap {
        margin-top: 0 !important;
    }

    .store-img {
        flex: 0 0 290px !important;
        width: 290px !important;
        min-width: 290px !important;
        max-width: 290px !important;
        height: 180px !important;
        margin: 0 !important;
        overflow: hidden;
    }

    .store-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .store-text {
        flex: 1 1 0% !important;
        /* ★ 0%ベースにすることで、中身の長さに左右されず「余白」として計算される */
        min-width: 0;
        padding: 0 15px !important;
        display: flex;
        flex-direction: column;
        gap: 5px;
        text-align: left;
    }

    /* 地図、LINE、EPARKの塊（2段構成） */
    .btn-epark-wrap {
        flex: 0 0 auto;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start;
        gap: 15px;
        flex-shrink: 0;
    }

    /* 地図とLINE（横並び） */
    .map-line-button {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px;
        flex-shrink: 0;
    }

    .eparkwrap {
        flex-shrink: 0 !important;
        width: 100%;
        max-width: 300px;
    }
}

@media screen and (max-width: 1000px) {
    .store-btn-wrap {
        grid-template-columns: repeat(3, 1fr);
        max-width: 400px;
    }

    .store-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        padding-bottom: 60px;
    }

    .store-img {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        margin: 0 auto 20px !important;
    }

    .store-img img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    .btn-epark-wrap {
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: 20px;
    }

    .store-text {
        width: auto;
        max-width: 350px;
        margin: 0 auto 20px;
        text-align: left;
        padding: 0;
    }

    .btn-epark-wrap {
        flex-direction: column !important;
        align-items: center !important;
    }

    .address,
    .tell {
        justify-content: center;
    }
}

/* =========================================
 キッズサービスページ
========================================= */
/* 各外枠 */
.kidspage-title1,
.kidspage-title2,
.kidspage-title3 {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* 枠線の設定*/
.kidspage-title1::before,
.kidspage-title2::before,
.kidspage-title3::before {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: -1;
    background-color: #F18D00;
}

.kidspage-title2::before {
    background-color: #639AFF;
}

.kidspage-title3::before {
    background-color: #FFD83D;
}

.kidspage-wrap,
.kidspage-title-img {
    max-width: 1200px;
    margin: 0 auto;
}

.kidspage-wrap {
    display: flex !important;
    flex-wrap: nowrap;
    background-color: #FAF3E8;
    border-radius: 20px;
    border: #FAF3E8 solid 5px;
    overflow: hidden;
    align-items: stretch;
    padding: 0 !important;

}

/* 左側の画像エリア */
.kidspage-img {
    flex: 0 0 50% !important;
    margin: 0 !important;
    line-height: 0;
}

.kidspage-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block !important;
}

/* 右側のテキストエリア */
.kidspage-text {
    flex: 0 0 50% !important;
    margin: 0 !important;
    padding: 20px;
    display: flex;
    align-items: center;
    color: #333;
    font-size: 20px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .kidspage-wrap {
        flex-direction: column !important;
    }

    /* 画像エリアを横いっぱい */
    .kidspage-img {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: 200px;
    }

    /* テキストエリアを横いっぱい */
    .kidspage-text {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 20px;
    }

    .kidspage-img img {
        border-radius: 18px 18px 0 0;
    }
}


/* =========================================
  こだわりページ
========================================= */
.page-id-71 .wp-block-cover {
  position: relative;
  isolation: isolate;
}

.page-id-71 .wp-block-cover .wp-block-cover__image-background {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: scroll !important;
  z-index: -1;
}

.page-id-71 .wp-block-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
}

.about-wrap {
    padding: 30px 0; 
}

.about-wrap .wp-block-columns {
    display: flex !important;
    align-items: stretch !important;
}

/* 画像が入っているカラム(flex-basis:30%側)の調整 */
.about-wrap .wp-block-column[style*="flex-basis:30%"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* 画像ブロック自体の余白をリセット */
.about-img {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}

@media screen and (max-width: 768px){
.about-bui-chef-wrap{
flex-direction: column !important;
}
} 

@media screen and (max-width: 768px) {
    .about-img {
        width: 100%
    }
    
}
.about-top-title{
    mix-blend-mode: overlay;
}
.about-title{
font-size: 2.5rem;
    font-weight: bold;
    color: #FFF;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 768px) {
.about-title{
font-size: 2rem;}

}
.about-img img {
    display: block;
    width: 100%;
    height: auto;
}
.sauce {
    padding: 10px;
}

.sauce-wrap {
    max-width: 600px;
}

/* 左右2カラム構成（左：縦文字画像 sticky追従、右：通常スクロール） */

.about-wrap-outer {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start; /* stretchだとsticky要素が変な高さになることがあるためflex-startに */
}

.about-side-text-col {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  flex: 0 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 20px);
  box-sizing: border-box;
}
.about-side-text-col .wp-block-image,
.about-side-text-col figure {
  margin: 0;
}
.about-side-text-col img {
  width: 40px;
  height: auto;
  max-height: 80vh;   /* 画面が低い場合、ここで自動的に縮んで見切れを防ぐ */
  max-width: 100%;
  display: block;
}

/* 右カラム：独自スクロールは持たせない。普通に高さは中身に合わせて伸びる */
.about-scroll-col {
  flex: 1 1 auto;
  padding: 0 20px;
  /* height や overflow の指定は削除 */
}

@media (max-width: 768px) {
  .about-side-text-col {
    top: 56px;                    /* SPヘッダー(56px)に隠れないように */
    min-height: calc(100vh - 56px);
    padding: 0 5px;
  }
  .about-side-text-col img {
    width: 18px;
    max-height: calc(90vh - 56px); /* SPでもヘッダー分を考慮して見切れ防止 */
  }
  .about-scroll-col {
    padding: 0 10px;
  }
}
/* =========================================
   バースデーページ
========================================= *
* 全体の外枠1 */
.birthday-outer {
    background: url("/saloon/wp-content/uploads/2026/01/birthday-bg1.png") center / cover no-repeat !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 1. 背景を持つ外枠 */
.happy-service-wrap {
    position: relative;
    background-image: url("/saloon/wp-content/uploads/2026/01/birthda-bg2.png") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    padding: 120px 20px 60px !important;
    z-index: 1;
    margin-top: 100px;
}


/* テキストスタイル1 */
.birthday-text1 {
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
    padding: 20px;
    color: #fff;
    margin-top: 0 !important;
    font-size: clamp(1rem, 2vw, 1.5rem);
    -webkit-text-stroke: 4px #9f0810;
    paint-order: stroke fill;
    -webkit-text-stroke-linejoin: round;
}

/* 2. 中間の層：happy-service画像（リボン） */
.happy-service {
    position: relative;
    z-index: 5;
    margin-top: -150px !important;
    margin-bottom: 0 !important;
}

.happy-service img {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    margin: 0 auto !important;
}

/* テキストスタイル2 */
.birthday-text2 {
    position: relative;
    z-index: 20 !important;
    margin-top: 0 !important;
    margin-top: -220px !important;
    text-align: center;
    font-weight: bold;
    line-height: 1.8;
    padding: 20px;
    color: #000;
    font-size: clamp(1rem, 2vw, 1.3rem);
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
    -webkit-text-stroke-linejoin: round;
}

.birthday-text2 span {
    color: #e60012;
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}


/* サービス画像群（service1〜4） */
.softdrink-beer,
.dessert-wine {
    position: relative;
    z-index: 10;
    margin-top: 0px !important;
}

/* スマホ用の位置微調整 */
@media (max-width: 600px) {
    .happy-service {
        margin-top: -130px !important;
    }

    .birthday-text2 {
        margin-top: -90px !important;
        padding: 0;
    }
}

/* 未成年提供禁止文 */
.warning-wrap {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    padding: 10px;
    color: #fff;
    background-color: #db0514;
    font-size: clamp(0.7rem, 3vw, 3rem);
    font-weight: bold;
}

.warning-wrap span {
    font-size: clamp(0.5rem, 2vw, 1.8rem);
}

/* 一番小さい白文字 */
.birthday-text3 {
    margin-bottom: 40px !important;
}

/* =========================================
  お助けカードページ
========================================= */
/* 全体 */
.help-outer {
    background: url("/saloon/wp-content/uploads/2026/01/help-bg.jpeg") center / cover no-repeat !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 0 !important;
}

/* 1. 背景を持つ外枠 */
.help-inner {
    background-image: url("/saloon/wp-content/uploads/2026/01/help-Inner.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 30px 20px;
    z-index: 1;
}

.help-title {
    margin-top: 20px !important;
}

.help-inner-text {
    margin-top: 0 !important;
    font-weight: bold;
    line-height: 1.8;
    color: #ea5504;
    font-size: clamp(0.8rem, 2vw, 2rem);
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
}

/* ガイドキャラクター */
.guide-character {
    position: fixed;
    z-index: 999999 !important;
    width: 150px;
    opacity: 0;
    pointer-events: none;

    /* 出現の初期位置：左側20%の位置に固定 */
    top: -100px;
    left: 20%;
    transform: translateX(-50%);

    /* アニメーション：1.登場 → 2.そのまま浮遊（右移動を削除） */
    animation:
        popOut 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        fuwafuwa 3s infinite 1.2s;
    /* 登場が終わったらすぐ浮遊開始 */
}

/* 1. 画面上から指定位置（left: 20%）へ降臨 */
@keyframes popOut {
    0% {
        transform: translate(-50%, 0) scale(0);
        opacity: 0;
    }

    100% {
        /* 画面上から80pxの位置（top -100px + 180px）でストップ */
        transform: translate(-50%, 180px) scale(1);
        opacity: 1;
    }
}

/* 2. その場でゆらゆら */
@keyframes fuwafuwa {

    0%,
    100% {
        transform: translate(-50%, 180px);
    }

    50% {
        transform: translate(-50%, 190px);
    }
}

/* 追いかけキャラが消える時の設定 */
.guide-character.is-active {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden;
    /* 少しだけ余韻を残して消える（お好みで 0.3s 〜 0.5s） */
    transition: opacity 0.4s ease-out, visibility 0.4s;
}

/* もやもや出現のディレイを、タイトルが消えた瞬間に合わせる */
.moyamoya-section.is-active figure:nth-of-type(1) figure:nth-child(1) {
    transition-delay: 0.2s;
}

/* もやもやセクションの設定 */
/* 1. セクション全体の基準設定 */
.moyamoya-section {
    position: relative;
    overflow: visible;
}

/* 2. 中央のジョージくん（案内役） */
.center-guide-character {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 200px;
    z-index: 5;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* エリアがアクティブになったらキャラが出現 */
.moyamoya-section.is-active .center-guide-character {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 3. もやもや吹き出し（各figure）の調整 */
.moyamoya-section figure {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s ease-out;
    position: relative;
    z-index: 10;
}

/* アクティブ時の表示タイミング（キャラ登場 0.8s を待ってから） */
.moyamoya-section.is-active figure {
    opacity: 1;
    transform: scale(1);
}

/* もやもや出現のディレイをさらに短縮して「即応性」を出す */

.moyamoya-section.is-active .wp-block-group:nth-of-type(1) figure:nth-child(1) {
    transition-delay: 0.1s;
}

.moyamoya-section.is-active .wp-block-group:nth-of-type(1) figure:nth-child(2) {
    transition-delay: 0.3s;
}

.moyamoya-section.is-active .wp-block-group:nth-of-type(2) figure:nth-child(1) {
    transition-delay: 0.5s;
}

.moyamoya-section.is-active .wp-block-group:nth-of-type(2) figure:nth-child(2) {
    transition-delay: 0.7s;
}

/* 4. スマホ・タブレット用調整 */
@media (max-width: 1000px) {
    .center-guide-character {
        width: 120px;
        top: 50%;
        left: 45%;
    }

    .guide-character {
        width: 80px;
        left: 20%;
    }
}


/* =========================================
    投稿ページ
========================================= */
/* 投稿本文内の画像ブロックを親要素(960px)の幅いっぱいに広げる */
.single .p-entry__content .wp-block-image,
.single .p-entry__content .wp-block-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* 投稿ページ（記事詳細）の本文エリアの上下余白を3remにする */
.single .l-content__body {
    margin: 3rem auto;
}

/* 投稿一覧ページ（/news/）と カテゴリー一覧ページ 両方に適用 */
.blog .l-content__body,
.archive .l-content__body {
    margin: 3rem auto !important;
}

/* 投稿ページのタイトル左寄せ */
.single .c-pageTitle__main {
    text-align: left;
}

/* =========================================
    フッター
========================================= */
.bottom_menu {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
}

.l-footer__foot {
    border-top: solid 2px #CF1F1F;
}

.l-footer__foot {
    padding-bottom: 0;
}

.c-copyright {
    padding: 10px 0;
    background: #CF1F1F;
    color: #FFF;
}

/* TOPへ戻るボタン */
.c-fixBtn.-pagetop {
    background: #CF1F1F;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #CF1F1F;
    box-sizing: border-box;
}