@charset "UTF-8";
/* 共通SP（ヘッダー/フッター/ボトム）. FTP配信しindex.htmlで<link>。直書き回避。
   規則: 375基準の完全比例ズーム＝元px値を (px*100/375)vw に自動変換（tools/gen_sp.py）。
   デスクトップ優先で max-width767 上書き。画像は既存FTPホスト画像を流用。 */

/* PCではSP専用バーを隠す（追加ブロック） */
.sp-bar {
    display: none;
}

@media screen and (max-width: 767px) {
    /* ===== ヘッダー: 黒1帯60px（XD SP-TOP実測: ロゴx20 h40 / 検索アイコン+x147 w20+商品検索12px / カートx254 w20+数14px / ハンバーガーx317 w38）
     検索は入力欄でなくラベル＝タップでgmenu。要素間は実測固定マージン(51/29/29px)で座標再現 ===== */
    .l-header .ph-header,
    .l-header .cat-bar {
        display: none !important;
    }
    .sp-bar,
    .sp-bar *,
    .sp-bar *::before,
    .sp-bar *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .sp-bar {
        position: relative;
        display: flex;
        align-items: center;
        height: 16vw;
        padding: 0 5.333vw;
        background: var(--c-ink);
        color: var(--c-white);
        font-family: var(--font-body);
        letter-spacing: 0.03em;
        transition: background 0.25s;
    }
    /* 透過オーバーレイ: ヒーロー有ページは:hasで初期状態から透過(JS適用前のグレー一瞬を排除)。
     スクロールでメイン画像を過ぎたらJSが.l-header--solidを付与して塗り(#272727)に戻る */
    body:has(.top-page .hero, .page-hero, .gd-hero, .about-hero) .l-header:not(.l-header--solid) {
        background: transparent;
        box-shadow: none;
		border-bottom: 1px solid #ffff;
    }
    body:has(.top-page .hero, .page-hero, .gd-hero, .about-hero) .l-header:not(.l-header--solid) .sp-bar {
        background: transparent;
    }
    /* 白フラッシュ回避: solid時の.l-header背景を白(#fff)でなくバーと同じ#272727へ。
       背後の白が.sp-barの半透明遷移中に透ける→透過⇔塗りの両方向でチラつく原因を断つ */
    body:has(.top-page .hero, .page-hero, .gd-hero, .about-hero) .l-header.l-header--solid {
        background: var(--c-ink);
    }
    .sp-bar a {
        color: inherit;
        text-decoration: none;
    }
    .sp-bar__logo {
        display: flex;
        align-items: center;
        height: 100%;
        flex: none;
    }
    .sp-bar__logo img {
        height: 10.667vw;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
    }
    .sp-bar__search {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 2.4vw;
        background: none;
        border: 0;
        color: #fff;
        cursor: pointer;
        white-space: nowrap;
    }
    .sp-bar__search-ic {
        width: 5.333vw;
        height: auto;
        flex: none;
        display: block;
        filter: brightness(0) invert(1);
    }
    .sp-bar__search span {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 3.2vw;
        letter-spacing: 0.08em;
        line-height: 1;
    }
    .sp-bar__cart {
        position: relative;
        display: flex;
        align-items: center;
        flex: none;
        margin-left: auto;
    }
    .sp-bar__cart-ic {
        width: 5.333vw;
        height: auto;
        display: block;
    }
    .sp-bar__cart-count {
        margin-left: 2.4vw;
        font-family: var(--font-num);
        font-weight: 500;
        font-size: 3.733vw;
        line-height: 1;
        color: #fff;
    }
    .sp-bar__menu {
        flex: none;
        display: flex;
        align-items: center;
        margin-left: 7.733vw;
        background: none;
        border: 0;
        cursor: pointer;
        color: #fff; /* buttonはUA既定色(黒)で継承しない→線のcurrentColor用に明示 */
    }
    .sp-bar__menu-ic {
        width: 10.133vw;
        height: auto;
        stroke: #fff;
        stroke-width: 1.6;
        fill: none;
    }
    .sp-bar__menu-ic line {
        stroke: #fff;
    } /* line側のstroke="currentColor"属性より優先させ確実に白へ */

    /* ===== 共通 見出し（ガイド/カレンダー用） ===== */
    .guide .sec-heading__en {
        font-size: 5.867vw;
    }
    .calendar .sec-heading__en {
        font-size: 6.933vw;
    }

    /* ===== ボトム: ガイド帯 ===== */
    .guide {
        margin-top: 0;
        height: auto;
        padding: 21.333vw 0 23.467vw;
    }
    .guide img.bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .guide__inner {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0 5.333vw;
    }
    .guide__buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3.467vw;
        margin-top: 10.667vw;
    }
    .guide__buttons a,
    .guide__faq {
        height: 16vw;
        font-size: 3.733vw;
        font-weight: 400;
    }
    .guide__faq {
        margin-top: 3.467vw;
    }

    /* ===== ボトム: カレンダー ===== */
    .calendar {
        margin-top: 0;
        padding: 14.933vw 0 16vw;
    }
    .calendar__inner {
        width: 100%;
        margin: 0;
        padding: 0 5.333vw;
        display: block;
        text-align: center;
    }
    .calendar__info {
        padding: 0;
        text-align: center;
    }
    .calendar__info .sec-heading {
        text-align: center !important;
    }
    .calendar__hours {
        margin-top: 4.267vw;
        font-size: 3.733vw;
    }
    .calendar__cmscal {
        margin: 6.4vw auto 0;
        padding: 2.133vw;
        max-width: 85.333vw;
    }
    .calendar__cmscal table {
        width: 100%;
    }
    /* 月送り矢印: SPは中央の月表示(caption)行の左右端に置く（PCのcalc(50%±px)はSP幅で崩れるため上書き） */
    .calendar__nav {
    }
    .calendar__nav--prev {
        left: -18px;
    }
    .calendar__nav--next {
        right: -18px;
    }
    .calendar__memo {
        margin-top: 3.2vw;
        font-size: 3.467vw;
    }

    /* ===== フッター ===== */
    .site-footer {
        padding-top: 12.8vw;
        text-align: center;
    }
    .site-footer__inner {
        width: 100%;
        margin: 0;
        padding: 0 5.333vw;
        display: block;
    }
    .site-footer__brand {
        text-align: center;
    }
    .site-footer__brand img {
        height: 11.733vw;
        margin: 0 auto;
    }
    .site-footer__brand .shop-name {
        margin-top: 4.267vw;
        font-size: 3.2vw;
    }
    .site-footer__external {
        margin-top: 8.533vw;
        display: flex;
        flex-direction: column;
        gap: 0;
        font-size: 3.733vw;
    }
    .site-footer__external a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        text-align: left;
        padding: 6vw 0 2.5vw;
        border-bottom: 0.267vw solid rgba(255, 255, 255, 0.4);
    }
    .site-footer__external a::after {
        position: relative;
    }
    .site-footer__nav {
        margin-top: 13.333vw;
        margin-bottom: 23vw;
        display: flex;
        gap: 0;
        padding-top: 0;
        justify-content: space-between;
        text-align: left;
    }
    .site-footer__nav ul {
        display: flex;
        flex-direction: column;
        gap: 10.667vw;
        width: 47%;
        font-size: 3.2vw; /* 12px相当（PC継承の--fs-body:14px→SP実測12pxへ補正） */
    }
    .site-footer__pagetop {
        position: absolute;
        right: 5.333vw;
        bottom: 16.533vw;
    }
    .site-footer__bottom {
        margin-top: 14.933vw;
        height: 12vw;
        font-size: 2.933vw;
    }
    /* 行頭マーカー分割行(u-hang-line): SPは直前の<br>数(--gap)ぶん空行（br1=1行／br2=2行…）。先頭行(--gap無)は0 */
    .u-hang-line {
        margin-top: calc(var(--gap, 0) * 0.5lh);
    }
    /* 支払い注記(#s-pay)の「※ キャンセル料金」行だけSPで上余白を確保(design 20px=5.333vw)。u-hang-lineはhang()のJS生成のためCSSで当てる(ユーティリティ不可) */
    #s-pay .gd-notes--md .u-hang-line:nth-child(2) {
        margin-top: 5.333vw;
    }
}