@charset "UTF-8";

/*
 * 2026 ととのい夏！万葉でサ活
 *
 * ページの見た目はすべてインラインSVGが担う。CSSの役割は
 *   1. SVGを隙間なく敷き詰めること
 *   2. その上にクリック領域（.hotspot）とタブ（.tab）を重ねること
 * の2つだけ。
 *
 * オーバーレイの位置はSVGのviewBoxに対する % なので、SVGが拡大縮小しても
 * ずれない。文字サイズや枠線もブロック幅 --u を基準に比率で指定している。
 */

/* ------------------------------------------------------------------ base */

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
    -webkit-text-size-adjust: 100%;
}

svg {
    display: block;
    width: 100%;
    height: auto;
}

img {
    max-width: 100%;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------- layout */

.lp {
    margin: 0 auto;
}

/*
 * --u はブロックの実描画幅。デザイン上の N px は calc(var(--u) * N / 設計幅)
 * で表現でき、SVGの拡大率とオーバーレイの拡大率が常に一致する。
 */
/*
 * PC も SP も、旧実装（Bootstrap の container-fluid で幅100%）と同じく
 * ビューポート幅いっぱいに拡大する。1200px で頭打ちにすると左右に白帯が出て
 * 現行サイトと見た目が変わってしまうため。
 */
.lp--pc {
    --u: 100vw;
    --design-w: 1200;
}

.lp--sp {
    --u: 100vw;
    --design-w: 376;
}

/* 各SVGブロック。オーバーレイの位置決めの基準になる */
.lp__block {
    position: relative;
}

.lp__panels {
    position: relative;
}

/* --------------------------------------------------------- クリック領域 */

/*
 * SVGに描かれているボタンの上に透明な <a> を重ねるだけ。
 * 見た目はSVG側のまま、当たり判定だけをHTMLで持つ。
 */
.hotspot {
    position: absolute;
    display: block;
    background: transparent;
    border-radius: calc(var(--u) * 10 / var(--design-w));
    -webkit-tap-highlight-color: transparent;
}

.hotspot:focus-visible {
    outline: 3px solid #0b57d0;
    outline-offset: 2px;
}

@media (hover: hover) {
    .hotspot:hover {
        background: rgba(255, 255, 255, 0.18);
    }
}

/* --------------------------------------------------------------- タブ */

/*
 * SVG側のボタンを覆い隠して描き直す。非選択は白背景＋赤文字＋赤枠、
 * 選択中は赤背景＋白文字。SVGには小田原が選択済みとして焼き込まれているため、
 * 10個すべてを不透明に覆う必要がある。
 */
.tab {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-family: "HiraginoSans-W6", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "Yu Gothic", sans-serif;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    background: #fff;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tab__label {
    display: block;
}

.tab:focus-visible {
    outline: 3px solid #0b57d0;
    outline-offset: 2px;
}

/* 選択中 —— 赤背景＋白文字 */
.tab.is-active {
    background: #e60012;
    color: #fff;
}

.lp--pc .tab {
    /* デザイン: 192×114 / 角丸18 / 枠線6 / 文字25px */
    border: calc(var(--u) * 6 / 1200) solid #e60d12;
    border-radius: calc(var(--u) * 18 / 1200);
    font-size: calc(var(--u) * 25 / 1200);
    color: #e60d12;
}

.lp--sp .tab {
    /* デザイン: 105×65 / 角丸10 / 枠線3 / 文字16px */
    border: calc(var(--u) * 3 / 376) solid #de1111;
    border-radius: calc(var(--u) * 10 / 376);
    font-size: calc(var(--u) * 16 / 376);
    color: #de1111;
}

.lp--pc .tab.is-active,
.lp--sp .tab.is-active {
    color: #fff;
}

@media (hover: hover) {
    .tab:not(.is-active):hover {
        background: #ffeaea;
    }
}

/* ------------------------------------------------------------- パネル */

/*
 * JavaScriptが動かない環境では10館すべてが縦に並ぶ。情報は失われない。
 * .js が付いて初めて1館だけの表示になる。
 */
.panel[hidden] {
    display: none;
}