/* ==========================================================
   「ビア怪談と未来亭WOWWOW in 岡山」特設ページ専用スタイル
   - .bhn-page（bodyのクラス）配下だけに効くので、通常ページには影響しない
   - フライヤーに合わせた白黒・明朝のデザイン
   ========================================================== */

.bhn-page {
    /* 色と書体はここだけ直せば全体が変わる */
    --bhn-ink: #16161a;
    --bhn-paper: #f4f3f0;
    --bhn-tile: #c9c9c6;          /* 敷き詰める「恐」の色（仮の灰色） */
    --bhn-mincho: 'Zen Old Mincho', 'Shippori Mincho', serif;

    background: var(--bhn-paper);
    color: var(--bhn-ink);

    /* ヘッダーを使わないため、通常サイトの上部余白（ヘッダーの高さぶん）は不要 */
    padding-top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bhn {
    font-family: var(--bhn-mincho);
}

.bhn section {
    padding: 4rem 1.25rem;
}
@media (min-width: 768px) {
    .bhn section { padding: 5.5rem 2.5rem; }
}

/* ---------- 「恐」の敷き詰め ----------
   タイル1個分の実際のピクセルサイズは script.js が実測して mask-size に直接設定する
   （文字のように小さく、かつ要素の幅いっぱいに欠けることなく収まるようにするため）。
   ここでは敷き詰める「枠」の大きさだけを決める。
   色はマスクで塗っているため --bhn-tile だけで変更できる。 */
.bhn-tiles {
    background-color: var(--bhn-tile);
    -webkit-mask-image: url('images/tile.svg');
            mask-image: url('images/tile.svg');
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
    -webkit-mask-position: top left;
            mask-position: top left;
}

.bhn-hero__tiles {
    width: 100%;
    height: 2.25rem;
}
@media (min-width: 768px) {
    .bhn-hero__tiles { height: 3rem; }
}

/* 縦書きセクションの左右いっぱいに敷き詰める帯（テキストと同じ高さに揃える） */
.bhn-tiles--column {
    width: 100%;
    height: 100%;
}

/* セクションの区切り */
.bhn-tiles--divider {
    width: 100%;
    max-width: 1000px;
    height: 1.25rem;
    margin: 0 auto 3rem;
}

@media (max-width: 639px) {
    .bhn-hero__tiles { height: 1.75rem; }
    .bhn-tiles--divider { height: 1rem; margin-bottom: 2rem; }
}

/* ---------- ヒーローエリア ----------
   ヘッダーを使わないため上端は詰めているが、天辺ベタだと見切れて見える・窮屈なため少しだけ空ける
   （`.bhn section`の一般ルールより詳細度を上げて上書きする必要があるため、sectionを付けている） */
.bhn section.bhn-hero {
    padding-top: 1.25rem;
}
@media (min-width: 768px) {
    .bhn section.bhn-hero { padding-top: 1.75rem; }
}
.bhn-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
@media (min-width: 768px) {
    .bhn-hero { gap: 3.5rem; }
}

.bhn-hero__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    width: 100%;
}

.bhn-hero__logo {
    margin: 0;
    width: min(460px, 76vw);
}

.bhn-hero__lead {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
}

.bhn-hero__info {
    display: block;
    width: min(560px, 90vw);
    height: auto;
}

/* ---------- ヒーローエリア2（縦書きのコンセプト） ---------- */
/* 左右のタイルを 1fr にして、テキストの左右をページの端まで敷き詰める */
.bhn-concept {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .bhn-concept { gap: 2.5rem; }
}

/* 縦書き。要素は右から左へ並ぶので、見出しの「次の要素側（＝左）」に余白を取る */
.bhn-concept__body {
    writing-mode: vertical-rl;
    height: 30rem;
}
@media (max-width: 639px) {
    .bhn-concept__body { height: 22rem; }
}

.bhn-concept__title {
    margin: 0;
    margin-block-end: 2.5rem;
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.2;
}
@media (max-width: 639px) {
    .bhn-concept__title { font-size: 1.6rem; margin-block-end: 1.75rem; }
}

.bhn-concept__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 2.1;
    letter-spacing: 0.06em;
}
@media (max-width: 639px) {
    .bhn-concept__text { font-size: 0.85rem; line-height: 1.95; }
}

/* ---------- 見出し（フライヤーの黒帯に合わせる） ---------- */
.bhn-heading {
    display: table;
    margin: 0 auto 3rem;
    padding: 0.35rem 1.75rem;
    background: var(--bhn-ink);
    color: var(--bhn-paper);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
}

/* ---------- 出演者紹介 ---------- */
.bhn-act {
    display: grid;
    gap: 1.75rem;
    max-width: 1000px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .bhn-act {
        grid-template-columns: 1fr 1.15fr;
        gap: 3rem;
        align-items: start;
    }
}

.bhn-act + .bhn-tiles--divider { margin-top: 3.5rem; }

.bhn-act__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* フライヤーと同じ白黒の質感に揃える */
    filter: grayscale(1) contrast(1.08);
}
.bhn-act__photo--wowwow {
    object-position: center 15%;
}
/* 元画像が16:9のため、箱の比率も合わせて見切れないようにする */
.bhn-act__photo--biakaidan {
    aspect-ratio: 16 / 9;
}

.bhn-act__name {
    display: table;
    margin: 0 0 1.25rem;
    padding: 0.25rem 1.25rem;
    background: var(--bhn-ink);
    color: var(--bhn-paper);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
}
.bhn-act__name-sub {
    margin-left: 0.9rem;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    opacity: 0.85;
}

.bhn-act__text {
    margin: 0 0 2rem;
    font-size: 0.9rem;
    line-height: 2.05;
    letter-spacing: 0.04em;
}

/* ---------- メンバーのSNS誘導 ---------- */
.bhn-members {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.5rem 1.75rem;
}

.bhn-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 5.5rem;
}
.bhn-members--single .bhn-member { width: auto; align-items: flex-start; }

.bhn-member__face {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08);
    border: 1px solid var(--bhn-ink);
}

.bhn-member__name {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
}
.bhn-members--single .bhn-member__name { font-size: 0.8rem; letter-spacing: 0.1em; }

/* 名前が2行になる人がいても、アイコンの高さが揃うよう下端に寄せる */
.bhn-member__sns {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
}
.bhn-member__sns a {
    display: block;
    width: 1.05rem;
    color: var(--bhn-ink);
    transition: opacity 0.2s;
}
.bhn-member__sns a:hover { opacity: 0.55; }
.bhn-member__sns svg { width: 100%; height: auto; display: block; }

/* ---------- 予約フォーム ---------- */
.bhn-reserve__lead {
    max-width: 560px;
    margin: 0 auto 2.5rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 2;
}

.bhn-reserve__notice {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.25rem;
    border: 1px solid var(--bhn-ink);
    text-align: center;
    font-size: 0.9rem;
}

.bhn-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 560px;
    margin: 0 auto;
}

.bhn-form__field {
    display: flex;
    flex-direction: column;
}

.bhn-form__label {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

.bhn-form__input,
.bhn-form__textarea {
    width: 100%;
    padding: 0.6rem 0;
    border: none;
    border-bottom: 1px solid var(--bhn-ink);
    border-radius: 0;
    background: transparent;
    font-family: var(--bhn-mincho);
    font-size: 1rem;
    color: var(--bhn-ink);
    outline: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.bhn-form__textarea { resize: none; min-height: 6rem; }

/* プルダウンであることが分かるよう、右端に下向きの三角を置く */
select.bhn-form__input {
    background-image: linear-gradient(45deg, transparent 50%, var(--bhn-ink) 50%), linear-gradient(135deg, var(--bhn-ink) 50%, transparent 50%);
    background-position: right 0.75rem center, right 0.4rem center;
    background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 1.5rem;
}

.bhn-form__button {
    padding: 0.85rem 3rem;
    background: var(--bhn-ink);
    color: var(--bhn-paper);
    font-family: var(--bhn-mincho);
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    transition: opacity 0.2s;
}
.bhn-form__button:hover { opacity: 0.8; }
.bhn-form__button:disabled { opacity: 0.5; cursor: not-allowed; }

.bhn-form__message {
    margin: 0;
    padding: 0.875rem 1.125rem;
    border: 1px solid var(--bhn-ink);
    font-size: 0.9rem;
}

/* ---------- 公式サイトを見るボタン（ヘッダーを使わない代わりにSNS欄に置く） ---------- */
.bhn-site-link {
    display: inline-flex;
    align-items: center;
    margin-top: 1.25rem;
    padding: 0.7rem 2rem;
    border: 1px solid var(--bhn-ink);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    transition: background 0.2s, color 0.2s;
}
.bhn-site-link:hover {
    background: var(--bhn-ink);
    color: var(--bhn-paper);
}

/* ---------- フッター（独自。共通ヘッダー・グローバルメニューは使わない） ----------
   これまでの共通フッターと同じ、濃色に白っぽい配色に揃える。 */
.bhn-footer {
    padding: 3rem 1.25rem;
    text-align: center;
    background: var(--bhn-ink);
    color: var(--bhn-paper);
}
@media (min-width: 768px) {
    .bhn-footer { padding: 3.5rem 2.5rem; }
}

.bhn-footer__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.75rem;
    margin-bottom: 1.25rem;
}

/* logos.svg（未来亭WOWWOWの家紋ロゴ＋ビア怪談のロゴが1枚に並んだ素材、線の色は#231815）から
   それぞれの部分だけを、色付きの版として切り出す（マスクなので背景が濃色でも白く抜ける）。
   viewBoxは 0 0 256.3 109.72、家紋部分は x:20.5-68.9 y:30.66-79.06、
   ビア怪談ロゴ部分は x:109.26-235.8 y:42.37-67.35 の範囲。見切れないよう窓のサイズをその実寸に合わせている。 */
.bhn-footer-logo {
    --bhn-logo-scale: 0.062rem; /* SVGの1ユニットあたりの表示サイズ。ここだけで両方のロゴサイズを変更できる */
    display: block;
    background-color: var(--bhn-paper);
    -webkit-mask-image: url('images/logos.svg');
            mask-image: url('images/logos.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: calc(256.3 * var(--bhn-logo-scale)) calc(109.72 * var(--bhn-logo-scale));
            mask-size: calc(256.3 * var(--bhn-logo-scale)) calc(109.72 * var(--bhn-logo-scale));
}

.bhn-footer-logo--emblem {
    width: calc(48.4 * var(--bhn-logo-scale));
    height: calc(48.4 * var(--bhn-logo-scale));
    -webkit-mask-position: calc(-20.5 * var(--bhn-logo-scale)) calc(-30.66 * var(--bhn-logo-scale));
            mask-position: calc(-20.5 * var(--bhn-logo-scale)) calc(-30.66 * var(--bhn-logo-scale));
}

.bhn-footer-logo--text {
    width: calc(126.54 * var(--bhn-logo-scale));
    height: calc(24.98 * var(--bhn-logo-scale));
    -webkit-mask-position: calc(-109.26 * var(--bhn-logo-scale)) calc(-42.37 * var(--bhn-logo-scale));
            mask-position: calc(-109.26 * var(--bhn-logo-scale)) calc(-42.37 * var(--bhn-logo-scale));
}

.bhn-footer__copyright {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--bhn-paper);
    opacity: 0.7;
}

/* ---------- トップに戻るボタン（ヘッダーを使わない代わり） ---------- */
.bhn-totop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bhn-ink);
    color: var(--bhn-paper);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 500;
}
.bhn-totop svg {
    width: 1.25rem;
    height: 1.25rem;
}
.bhn-totop.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.bhn-totop:hover {
    opacity: 0.85;
}