@charset "utf-8";
/* アンパンマンのふわふわねつききゅう　あそべるお店（設置店舗ページ） */

/*
  トンマナは 参考デザイン/Web 1366 – 1.svg に合わせる（ギンガム背景・こげ茶枠のパネル・フチ付き見出し）。
  ボタン（.btn）・コピーライト帯（p.copy）は style.css を共用し、寸法係数 --u もトップと同じ考え方で定義する。
  パネル内の文字組みは読みやすさを優先して px 指定（PC は幅 930px 固定、狭い画面では可変）。
*/
#fuwafuwaShop {
    --brown: #5c3c32;
    --cream: #f8efa2;
    --yellow: #fed30f;
    --red: #e8452c;
    --orange: #f0832b;
    --blue: #51b8ea;
    --navy: #434879;
    --gray: #b5b5b5;      /* 店舗がない県・地方のグレーアウト */
    --gray-bg: #eee;

    container-type: inline-size;
    padding-top: 60px;
    background: #fff url(../img/shop/bg_check.png) repeat;
    color: var(--brown);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 500;
    overflow: hidden;
}
#fuwafuwaShop > * { --u: min(1px, 100cqw / 1366); }

/* こげ茶枠のパネル */
.panel {
    width: min(930px, 100% - 32px);
    margin: 0 auto;
    box-sizing: border-box;
    border: 3px solid var(--brown);
    border-radius: 10px;
}
.panel + .panel { margin-top: 20px; }

/* 読み上げ専用テキスト（画面には表示しない） */
.u-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ヘッダー（空・雲・ロゴ・虹） */
.shopHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 930 / 290;
    padding-bottom: 21px;
    overflow: hidden;
    background:
        url(../img/shop/kumo.png) left 1.6% top 8% / 45.5% auto repeat-x,
        linear-gradient(#51b8ea, #c6e5f7);
}
/* 虹の3本線（カンプ：各 7px） */
.shopHeader::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 21px;
    background: linear-gradient(#e94e63 0 33.333%, #f39945 33.333% 66.666%, #fff338 66.666%);
}
.shopHeader__logo { display: block; width: 47%; }
.shopHeader__logo img { display: block; width: 100%; height: auto; }

/* 本文パネル */
.shopMain {
    padding: 36px 40px 50px;
    background-color: var(--cream);
}

/* ページタイトル：カンプの見出しと同じ「色文字＋こげ茶のフチ＋影」 */
.pageTtl {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .03em;
    -webkit-text-stroke: 8px var(--brown);
    paint-order: stroke fill;
    /*
      filter: drop-shadow だとルビにも影が付くため text-shadow で付け、rt で打ち消す。
      text-shadow は塗りの形にしか付かずフチ（外側 4px）に隠れるので、7px まで段階的に重ねてフチの外へ 3px 出す。
    */
    text-shadow: 2px 2px 0 var(--brown), 4px 4px 0 var(--brown), 6px 6px 0 var(--brown), 7px 7px 0 var(--brown);
}
.pageTtl__red  { color: var(--red); }
.pageTtl__blue { color: var(--blue); }
.pageTtl rt {
    color: var(--brown);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .1em;
    -webkit-text-stroke: 0;
    text-shadow: none;
}

/* 都道府県ナビ：PC は左にリスト・右に地図 */
.shopNav {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-top: 30px;
}
.shopNav__list { flex: 1; min-width: 0; }
.shopNav__map  { flex: 0 0 560px; }

/* 地方の開閉メニュー */
.region__item + .region__item { margin-top: 8px; }
.region__btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 11px 44px 11px 16px;
    border: 3px solid var(--navy);
    border-radius: 10px;
    background: linear-gradient(#4fb8ee 0 50%, #2a9fd9 50%);
    box-shadow: 2px 2px 0 var(--navy);
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.region__btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .3s;
}
.region__btn[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
/* 店舗がない地方：グレーアウトして開けなくする */
.region__btn:disabled {
    border-color: var(--gray);
    background: var(--gray-bg);
    box-shadow: 2px 2px 0 var(--gray);
    color: var(--gray);
    cursor: default;
}
.region__btn:disabled::after { border-color: var(--gray); }

/* 開閉は grid の 0fr ⇔ 1fr で高さをアニメーションさせる */
.region__body {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    transition: grid-template-rows .4s ease-out, visibility .4s;
}
.is-ready .region__body:not(.is-open) { grid-template-rows: 0fr; visibility: hidden; }
.region__inner { min-height: 0; }

.pref {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 6px;
    overflow: hidden;
    border: 3px solid var(--brown);
    border-radius: 10px;
    background-color: #fff;
}
/* 右端列・最終行の罫線はマイナスマージンではみ出させて隠す */
.pref__item {
    margin: 0 -2px -2px 0;
    border-right: 2px solid #ede3b0;
    border-bottom: 2px solid #ede3b0;
}
.pref__item a {
    display: block;
    padding: 11px 0;
    color: var(--brown);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
.pref__item a:hover { background-color: #fff7c2; color: var(--red); }
/* 店舗がない県 */
.pref__item a.is-disabled { background-color: var(--gray-bg); color: var(--gray); cursor: default; }

/* 日本地図（座標は 948×727 の座標系。inc/config.php 参照） */
.map {
    position: relative;
    aspect-ratio: 948 / 727;
    container-type: inline-size;
}
.map__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    stroke: #cdbf8a;
    stroke-width: 3;
}
.map__item {
    position: absolute;
    left:   calc(var(--x) / 948 * 100%);
    top:    calc(var(--y) / 727 * 100%);
    width:  calc(var(--w) / 948 * 100%);
    height: calc(var(--h) / 727 * 100%);
}
.map__item a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 縦書き時は横幅が文字幅まで縮むため、幅・高さとも明示する */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: max(2px, 4 / 948 * 100cqw) solid var(--brown);
    border-radius: calc(10 / 948 * 100cqw);
    background-color: var(--yellow);
    color: var(--brown);
    font-size: calc(30 / 948 * 100cqw);
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    transition: background-color .2s, transform .2s;
}
.map__item--v a { writing-mode: vertical-rl; letter-spacing: .08em; }
.map__item a:hover { background-color: var(--orange); transform: scale(1.06); }
/* 店舗がない県 */
.map__item a.is-disabled { border-color: var(--gray); background-color: var(--gray-bg); color: var(--gray); cursor: default; transform: none; }

/* 店舗一覧 */
.shopDetail__note {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.8;
}
.shopDetail__ttl {
    margin-top: 30px;
    padding: 10px 20px;
    border: 3px solid var(--brown);
    border-radius: 10px;
    background-color: var(--orange);
    box-shadow: 2px 2px 0 var(--brown);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}
.shopList {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.shopCard {
    padding: 18px 24px;
    border: 3px solid var(--brown);
    border-radius: 10px;
    background-color: #fff;
}
.shopCard__name {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}
.shopCard__address {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.6;
}
.shopMsg {
    margin-top: 16px;
    padding: 30px 16px;
    border: 3px dashed #cdbf8a;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .6);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.shopDetail__back { margin-top: 40px; }
.shopDetail__back .btn { width: calc(320 * var(--u)); }

/* ボタンのバリエーション（.btn 本体は style.css） */
.btn--blue {
    border-color: var(--navy);
    background: linear-gradient(#4fb8ee 0 50%, #2a9fd9 50%);
    box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 var(--navy);
}
.btn--back::after {
    right: auto;
    left: calc(27 * var(--u));
    transform: translateY(-50%) scaleX(-1);
}
#fuwafuwaShop .btn__label { transform: none; }

/* TOPにもどる */
.shopTop { padding: 50px 0 60px; }

/* お知らせ（ページ表示時に出す） */
.notice {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(92, 60, 50, .45);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    cursor: pointer;
}
.notice.is-closed { display: none; }
.notice__box {
    position: relative;
    width: min(640px, 100%);
    box-sizing: border-box;
    padding: 50px 32px 44px;
    border: 3px solid var(--brown, #5c3c32);
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 4px 4px 0 #5c3c32;
}
.notice__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 3px solid #5c3c32;
    border-radius: 50%;
    background-color: #e83421;
    cursor: pointer;
}
.notice__close::before,
.notice__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}
.notice__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.notice__txt {
    color: #5c3c32;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
}

/* SP（トップと同じく 812px 以下） */
@media screen and (max-width: 812px) {
    #fuwafuwaShop { padding-top: 24px; }
    #fuwafuwaShop > * { --u: calc(100cqw / 430); }

    .panel { width: calc(100% - 24px); }
    .panel + .panel { margin-top: 12px; }

    .shopHeader { aspect-ratio: 930 / 360; padding-bottom: 12px; }
    .shopHeader::after { height: 12px; }
    .shopHeader__logo { width: 64%; }

    .shopMain { padding: 24px 16px 32px; }

    .pageTtl { font-size: clamp(30px, 9cqw, 40px); -webkit-text-stroke-width: 6px; }
    .pageTtl rt { font-size: 12px; }

    .shopNav { display: block; margin-top: 20px; }
    .shopNav__map { display: none; }

    .region__btn { padding: 14px 44px 14px 16px; }
    .pref__item a { padding: 14px 0; }

    .shopDetail__note { margin-top: 20px; font-size: 13px; }
    .shopDetail__ttl { margin-top: 20px; font-size: 22px; }
    .shopCard { padding: 14px 16px; }
    .shopCard__name { font-size: 16px; line-height: 1.4; }
    .shopDetail__back { margin-top: 28px; }
    .shopDetail__back .btn { width: calc(240 * var(--u)); }

    .shopTop { padding: 32px 0 40px; }

    .notice__box { padding: 48px 20px 32px; }
    .notice__txt { font-size: 15px; }
}