/*
@include css3(transform, translate(-50%, -50%));
@include css3(transition, 0.3s ease-in-out);  
transform: rotate(0.03deg);
*/
header .logo { width: 400px; }
@media screen and (max-width: 1360px) { header .logo { width: 30%; } }
@media screen and (max-width: 1080px) { header .logo { width: 15%; } }
@media screen and (max-width: 768px) { header .logo { width: 40%; } }
header .rBox { width: 70%; }
@media screen and (max-width: 1360px) { header .rBox { width: 70%; } }
@media screen and (max-width: 1080px) { header .rBox { width: 85%; } }

.nav ul li { font-size: 15px; padding: 0 20px 0 0; }
@media screen and (max-width: 1360px) { .nav ul li { padding: 0 10px 0 0; } }
@media screen and (max-width: 1210px) { .nav ul li { font-size: 13px; } }

/* === B-2 施設紹介→店舗選択（トップ専用・hover/focusで展開・JSなし） === */
.top .top_Box2 .top-store-select{position:relative;width:fit-content;margin-left:auto}
.top .top_Box2 .top-store-select .link a{cursor:pointer}
.top .top_Box2 .store-panel{
    transition:.3s;opacity:0;visibility:hidden;
    position:absolute;top:100%;right:100px;z-index:10;
    background:rgba(11,46,88,.9);border:1px solid #FFF;
    padding:10px 20px;min-width:220px
}
.top .top_Box2 .top-store-select:hover .store-panel,
.top .top_Box2 .top-store-select:focus-within .store-panel{opacity:1;visibility:visible}
.top .top_Box2 .store-panel a{display:flex;align-items:center;color:#FFF;font-size:16px;font-weight:600;padding:8px 0;white-space:nowrap}
.top .top_Box2 .store-panel a:before{content:"";display:block;width:16px;height:16px;flex-shrink:0;background:url(../images/common/arrow.svg) no-repeat center;background-size:100%;margin:0 8px 0 0}
@media (max-width:768px){
    .top .top_Box2 .store-panel{
        opacity:1;visibility:visible;position:relative;top:auto;right:auto;
        background:transparent;border:none;padding:10px 0 0;min-width:0;text-align:right
    }
    .top .top_Box2 .store-panel a{justify-content:flex-end}
    .top .top_Box2 .inner .link a:before{display:none}
}

/* === B-3 予約ボタンを店舗別（高島平／和光）の2つに（新規クラス .mdg-rsv のみ対象） === */
/* PCヘッダー右上（header .rBox 直下の .link だけ。スマホメニュー内の .link には効かない） */
header .rBox > .link > .con.mdg-rsv{width:auto;display:flex;margin-left:2px}
header .rBox > .link > .con.mdg-rsv a{flex:1;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:5px 12px}
/* スマホメニュー内：縦並びのまま、2つの間に余白 */
@media (max-width:768px){
    .nav .inBox .link .con.mdg-rsv + .con.mdg-rsv{margin-top:10px}
}
/* 追従ボタン（PCのみ表示）：縦書きのため2つは横並び（高島平が右）。間に細い区切り線 */
.cta a.mdg-rsv + a.mdg-rsv{border-right:1px solid rgba(255,255,255,.5)}

/* === B-4 トップ：カード6枚（.box2）を Concept の上へ移動（新規クラス .mdg-box2-first のみ対象） === */
/* 余白：上端は .top_Box3 の padding だけにする（PC 100px／SP 50px）。SP はカードと Concept の間を 50px に */
.top .top_Box3 .box2.mdg-box2-first{padding-top:0}
@media (max-width:768px){
    .top .top_Box3 .box2.mdg-box2-first{padding-bottom:50px}
}
/* 同じ行のカードで見出しの行数が違っても、アイコンと本文の高さをそろえる（subgrid 対応ブラウザのみ。非対応なら従来の flex のまま） */
@supports (grid-template-rows:subgrid){
    .top .top_Box3 .box2.mdg-box2-first{display:grid;grid-template-columns:repeat(3,1fr)}
    .top .top_Box3 .box2.mdg-box2-first .inBox{width:auto;display:grid;grid-template-rows:subgrid;grid-row:span 3}
    @media (max-width:768px){
        .top .top_Box3 .box2.mdg-box2-first{grid-template-columns:repeat(2,1fr)}
    }
}
/* 工房カードの見出し：狭い SP（〜374px）で「工／房」が分かれないよう、字間だけ詰める */
@media (max-width:374px){
    .top .top_Box3 .box2.mdg-box2-first .title.mdg-title-long{letter-spacing:-.06em}
}

/* === B-3b スマホ用の予約バー（新規クラス .mdg-spbar のみ対象） === */
/* 表示の切り替えは、既存の script.js が .cta に付け外しする .hidden を兄弟セレクタで読む（JS は変更なし） */
.mdg-spbar{display:none}
@media (max-width:768px){
    .mdg-spbar{
        display:flex;position:fixed;bottom:0;left:0;width:100%;z-index:997;
        padding-bottom:env(safe-area-inset-bottom);background:#C0A351;
        transition:0.3s ease-in-out
    }
    .mdg-spbar a{flex:1;display:flex;align-items:center;justify-content:center;height:50px;padding:0 4px;color:#FFF;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap}
    .mdg-spbar a + a{border-left:1px solid #FFF}
    /* 読み込み直後・フッター付近（.cta.hidden）：画面の外へ下げ、タップできないようにする */
    .cta.hidden ~ .mdg-spbar{transform:translateY(100%);visibility:hidden;pointer-events:none}
    /* スマホのメニューを開いている間は隠す */
    body:has(.nav .menus.active) .mdg-spbar{display:none}
    /* バーが出ている間だけ、#page-top をバーの高さ分上へ（バーを出力しないページでは効かない） */
    body:has(.mdg-spbar) #page-top{transition:transform 0.3s ease-in-out}
    body:has(.mdg-spbar):has(.cta:not(.hidden)) #page-top{transform:translateY(-50px)}
}