@charset "UTF-8";

/* ===================================
   コミック × アミスタホテル LP

   Concept — "泊まれる一冊"
   The page is not a hotel page decorated with comic motifs.
   The page IS a comic volume: a cover, chapters (話), panels
   with ink gutters, speech bubbles, sound effects in the
   margins, and a dog-eared corner on every page.

   TYPE RULE — read this before changing a font-family.
   Dela Gothic One is a poster face. Japanese glyphs in it fill
   in solid below roughly 28px, so it is used ONLY for display
   sizes and for text that carries an outline or drop shadow.
   Every smaller heading uses Noto Sans JP 700/900, which stays
   legible while still reading as bold.
=================================== */

:root {

    /* Manga is printed in ink on paper — so the base is
       near-black and warm paper-white, not gray-on-white.
       Green stays as the Amistad anchor (it is still a hotel),
       orange drives every CTA, yellow is the pop of a
       cover-blurb starburst. */
    --ink:         #14120f;
    --ink-soft:    #55524a;
    --paper:       #fffdf6;
    --paper-2:     #f5efe0;
    --paper-3:     #ebe4d3;

    --green:       #1f3d2e;
    --green-deep:  #10221a;
    --orange:      #ff6a1a;
    --orange-deep: #d64d06;
    --yellow:      #ffd21f;
    --wood:        #a9773f;

    --display: "Dela Gothic One", sans-serif;   /* >= 28px only */
    --hand:    "Yusei Magic", sans-serif;
    --sans:    "Noto Sans JP", sans-serif;
    --serif:   "Noto Serif JP", serif;

    /* one ink weight, used everywhere, so panels read as a set */
    --rule: 3px;
}


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.95;
    letter-spacing: .02em;
    background: var(--paper);
    overflow-x: hidden;
    /* wrap Japanese at phrase (文節) boundaries, so a line never
       breaks inside a word like 急かされ／ない. Browsers without
       support fall back to normal wrapping. */
    word-break: auto-phrase;
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}


a {
    color: inherit;
    text-decoration: none;
}


h1, h2, h3 {
    margin: 0;
    line-height: 1.35;
}


/* Short blocks get their lines evened out, so a narrow card never
   ends on a stranded 1–2 character line (…ご利用／可). */
h1, h2, h3,
.koma-cell p,
.drink-card p,
.story-koma p,
.service-item p,
.rank-item .title {
    text-wrap: balance;
}


p {
    margin: 0;
}


ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

}


:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
}


/* Small bold headings — the workhorse. Bold enough to sit next to
   the poster face without closing up. */
.h-bold {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: .01em;
}


/* ===================================
   Manga primitives
=================================== */


/* --- 1. インパクト文字 — white fill, thick ink outline, hard
   offset shadow. paint-order keeps the stroke behind the fill so
   heavy Japanese glyphs stay legible at display size. --- */
.impact {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.005em;
    color: var(--paper);
    -webkit-text-stroke: 4px var(--ink);
    paint-order: stroke fill;
    text-shadow: 7px 7px 0 var(--ink);
}


.impact-ink {
    font-family: var(--display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
    text-shadow: 5px 5px 0 var(--yellow);
}


.impact-yellow {
    color: var(--yellow);
    -webkit-text-stroke: 4px var(--ink);
    paint-order: stroke fill;
    text-shadow: 7px 7px 0 var(--ink);
}


/* --- 2. 集中線 — lines dense at the edge, clear in the middle,
   so a headline can sit inside the burst and still be read. --- */
.speedlines {
    position: absolute;
    inset: -25%;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 50% 50%,
        var(--ink) 0deg 1.1deg, transparent 1.1deg 6.5deg);
    opacity: .13;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 14%, #000 52%, #000 100%);
    mask-image: radial-gradient(circle at 50% 50%, transparent 14%, #000 52%, #000 100%);
}


.speedlines.on-dark {
    background: repeating-conic-gradient(from 0deg at 50% 50%,
        var(--paper) 0deg 1.1deg, transparent 1.1deg 6.5deg);
    opacity: .16;
}


/* --- 3. コマ — every content block is a panel: thick ink border,
   hard shadow, no rounding. --- */
.koma {
    position: relative;
    background: var(--paper);
    border: var(--rule) solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}


/* --- 4. 吹き出し — the tail is a paper square turned 45°, inked
   on its two lower edges only. Its centre sits on the bubble's
   bottom rule, so the upper half paints over that stretch of
   border and the two inked edges meet the rule exactly where it
   is interrupted — one continuous outline, no gaps. --- */
.bubble {
    position: relative;
    background: var(--paper);
    border: var(--rule) solid var(--ink);
    border-radius: 34px;
    padding: 34px 40px;
}


.bubble::after {
    content: "";
    position: absolute;
    left: 60px;
    bottom: calc(-16px - var(--rule) / 2);
    width: 32px;
    height: 32px;
    background: var(--paper);
    border-right: var(--rule) solid var(--ink);
    border-bottom: var(--rule) solid var(--ink);
    transform: rotate(45deg);
}


/* --- 5. 擬音 — sound effects live in the margins, tilted, always
   outlined so they read on top of anything. Decorative only. --- */
.sfx {
    position: absolute;
    z-index: 6;
    font-family: var(--display);
    font-size: clamp(26px, 4vw, 54px);
    line-height: 1;
    white-space: nowrap;
    color: var(--paper);
    -webkit-text-stroke: 3.5px var(--ink);
    paint-order: stroke fill;
    text-shadow: 4px 4px 0 var(--ink);
    pointer-events: none;
    user-select: none;
}


.sfx.yellow { color: var(--yellow); }
.sfx.orange { color: var(--orange); }


/* 爆発マーク — the spiky cover-blurb sticker. */
.burst {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--yellow);
    clip-path: polygon(50% 0%, 58% 15%, 74% 7%, 74% 25%, 91% 22%, 83% 38%,
        100% 45%, 86% 54%, 98% 68%, 81% 69%, 88% 86%, 70% 81%, 68% 99%,
        54% 87%, 43% 100%, 36% 83%, 20% 92%, 21% 73%, 3% 74%, 14% 59%,
        0% 50%, 15% 40%, 2% 26%, 20% 25%, 15% 8%, 33% 14%, 36% 0%, 47% 12%);
}


/* 話数 — chapter tab. Black slab, tilted, like a hand-lettered
   chapter heading pasted onto the page. */
.chapter {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 26px 9px 22px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .08em;
    transform: rotate(-1.6deg);
}


.chapter .no {
    color: var(--yellow);
    font-size: 16px;
}


/* 手書きの書き込み — margin scribbles. */
.scribble {
    font-family: var(--hand);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
    letter-spacing: 0;
}


/* 縦書き */
.tate {
    writing-mode: vertical-rl;
    text-orientation: upright;
}


/* ===================================
   Layout
=================================== */


.section {
    position: relative;
    padding: 110px 24px;
    overflow: hidden;
}


.inner {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}


.bg-paper2 { background: var(--paper-2); }
.bg-green  { background: var(--green); }


.section-head {
    position: relative;
    margin-bottom: 60px;
}


.section-head.center {
    text-align: center;
}


.section-head h2 {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    font-size: clamp(32px, 5.6vw, 62px);
}


/* .shout marks a shouted chapter headline. It deliberately draws
   no ＼ ／ marks: both the drawn and the glyph versions read as
   stray specks beside the poster face, and the speed-lines behind
   every section head already carry the shout. */
.shout {
    display: inline-block;
}


/* ===================================
   Photo panels
   No photography yet — each photo slot is drawn as an un-inked
   panel: screentone, a camera mark, and a caption saying what
   belongs there. Swap the inner div for an <img>.
=================================== */


.photo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    aspect-ratio: var(--ph, 4/3);
    background: var(--paper-2);
    background-image: radial-gradient(rgba(20,18,15,.16) 1.5px, transparent 1.6px);
    background-size: 10px 10px;
    overflow: hidden;
    text-align: center;
}


/* a real photo sits on top of the placeholder and hides its hints */
.photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.photo > img ~ .ph-icon,
.photo > img ~ .ph-label {
    display: none;
}


.photo .ph-icon {
    width: 40px;
    height: 40px;
    color: var(--ink);
    opacity: .5;
}


.photo .ph-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.photo .ph-label {
    font-family: var(--hand);
    font-size: 14px;
    letter-spacing: 0;
    color: var(--ink-soft);
    padding: 0 18px;
}


/* ===================================
   Header
=================================== */


.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 40px;
}


.header-logo a {
    display: flex;
    align-items: center;
    gap: 14px;
}


.header-logo img {
    height: 26px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}


.header-logo .sub {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--paper);
    text-shadow: 0 2px 6px rgba(0,0,0,.9);
}


.header-logo .link-icon {
    margin-left: -6px;
    color: var(--paper);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.9));
}


/* 巻数 — a volume marker, as printed on a spine */
.volume {
    padding: 5px 16px;
    background: var(--ink);
    border: 2px solid var(--paper);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    transform: rotate(2deg);
}


@media (max-width: 700px) {

    .header {
        padding: 16px 18px;
    }

    .volume {
        display: none;
    }

}


/* ===================================
   表紙 — Hero as a comic cover
=================================== */


.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--green-deep);
}


/* opacity defaults to 1 — the reveal is an enhancement, never the
   thing that makes the cover visible in the first place */
.hero-photo {
    position: absolute;
    inset: 0;
    animation: cover-in 1.6s cubic-bezier(.16,.7,.24,1);
}


.hero-photo .photo {
    height: 100%;
    aspect-ratio: auto;
    background: var(--green-deep);
    background-image: radial-gradient(rgba(255,253,246,.13) 1.6px, transparent 1.7px);
    background-size: 11px 11px;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 34px 30px 0;
}


.hero-photo .ph-icon {
    display: none;
}


.hero-photo .ph-label {
    color: rgba(255,253,246,.5);
}


@keyframes cover-in {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
}


.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(16,34,26,.82) 0%, rgba(16,34,26,.5) 30%,
        rgba(16,34,26,.55) 60%, rgba(16,34,26,.9) 100%);
}


.hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 130px 40px 190px;
}


.hero-titles {
    position: relative;
}


.hero-titles .speedlines {
    inset: -60% -40%;
}


.hero-catch {
    position: relative;
    z-index: 2;
    font-size: clamp(46px, 11vw, 132px);
    max-width: 12em;
}


.hero-catch .l2 {
    display: block;
    margin-left: 1.1em;
}


.hero-catch .l3 {
    display: block;
    margin-left: 2.2em;
}


.hero-sub {
    position: relative;
    z-index: 2;
    max-width: 30em;
    margin-top: 34px;
    font-size: 16px;
    line-height: 2;
    color: var(--paper);
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}


/* cover blurb sticker */
.hero-burst {
    position: absolute;
    top: 96px;
    right: 30px;
    z-index: 5;
    width: 168px;
    height: 168px;
    transform: rotate(-11deg);
    animation: burst-pop .7s cubic-bezier(.2,1.5,.4,1) .9s backwards;
}


.hero-burst span {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    transform: rotate(11deg);
}


/* the weight goes on 無料 — the claim — not on either item */
.hero-burst span em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-weight: 900;
    font-size: 31px;
    line-height: 1.1;
}


@keyframes burst-pop {
    from { opacity: 0; transform: rotate(-11deg) scale(.3); }
    to   { opacity: 1; transform: rotate(-11deg) scale(1); }
}


/* 縦書きの背表紙 — a vertical spine label down the right edge */
.hero-spine {
    position: absolute;
    top: 50%;
    right: 26px;
    z-index: 4;
    transform: translateY(-50%);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .28em;
    color: rgba(255,253,246,.55);
}


/* 帯 — the belly band wrapped round a Japanese book, carrying the
   sales copy and, here, the two calls to action. */
.obi {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    padding: 20px 40px;
    background: var(--yellow);
    border-top: var(--rule) solid var(--ink);
}


/* 4,000 → 冊 → copy step down in size as one run, with no gaps
   between them. 冊 sits between the number and the copy in size so
   it reads as part of the number, not as a footnote. */
.obi-copy {
    display: flex;
    align-items: baseline;
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(16px, 2vw, 23px);
    color: var(--ink);
}


.obi-copy .num {
    font-family: var(--display);
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1;
    margin-right: .08em;
}


.obi-copy .unit {
    font-weight: 900;
    font-size: 1.35em;
}


.obi-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}


@media (max-width: 900px) {

    .hero-inner {
        padding: 120px 22px 230px;
    }

    .hero-burst {
        width: 122px;
        height: 122px;
        top: 74px;
        right: 12px;
    }

    .hero-burst span {
        font-size: 11px;
    }

    .hero-burst span em {
        font-size: 23px;
    }

    .hero-spine {
        display: none;
    }

    .hero-catch .l2 { margin-left: .5em; }
    .hero-catch .l3 { margin-left: 1em; }

    .obi {
        padding: 16px 20px;
        justify-content: center;
        text-align: center;
    }

    .obi-copy {
        justify-content: center;
    }

}


/* ===================================
   Buttons
=================================== */


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 30px;
    border: var(--rule) solid var(--ink);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    white-space: nowrap;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform .12s ease, box-shadow .12s ease;
}


.btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ink);
}


.btn-cta {
    background: var(--orange);
    color: var(--paper);
}


.btn-green {
    background: var(--green);
    color: var(--paper);
}


.btn-lg {
    padding: 20px 44px;
    font-size: 18px;
    box-shadow: 7px 7px 0 var(--ink);
}


.link-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 108px;
    z-index: 5;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--paper);
}


.scroll-cue::after {
    content: "";
    width: 2px;
    height: 40px;
    background: var(--paper);
    animation: cue 2.2s ease-in-out infinite;
}


@keyframes cue {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
    40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


@media (max-width: 900px) {

    .scroll-cue {
        display: none;
    }

}


/* ===================================
   まえがき — intro spread
=================================== */


.prologue {
    padding: 96px 24px;
    background: var(--paper-2);
    border-bottom: var(--rule) solid var(--ink);
}


.prologue .inner {
    max-width: 860px;
}


.prologue .bubble {
    text-align: center;
}


.prologue h2 {
    font-family: var(--sans);
    font-weight: 900;
    font-size: clamp(20px, 3vw, 31px);
    line-height: 1.6;
    letter-spacing: .02em;
    margin-bottom: 22px;
}


.prologue p {
    color: var(--ink-soft);
    font-size: 15px;
}


.prologue .scribble {
    margin-top: 30px;
    text-align: right;
}


/* ===================================
   第1話 — コマ割りグリッド (amenities)
=================================== */


.koma-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rule);
    background: var(--ink);
    border: var(--rule) solid var(--ink);
    box-shadow: 10px 10px 0 var(--ink);
}


.koma-cell {
    position: relative;
    background: var(--paper);
    padding: 38px 22px 34px;
    text-align: center;
    transition: background .25s ease;
}


.koma-cell:hover {
    background: var(--yellow);
}


/* every panel is numbered, as a manga page numbers its koma */
.koma-cell .n {
    position: absolute;
    top: 8px;
    left: 10px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
    opacity: .32;
}


.koma-cell .icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    color: var(--ink);
}


.koma-cell .icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.koma-cell h3 {
    font-family: var(--sans);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: .01em;
    margin-bottom: 8px;
}


.koma-cell p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-soft);
}


/* 無料 / 有料 tag — a small hand-stamped sticker */
.tag {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 14px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    transform: rotate(-2.5deg);
}


.tag-free {
    background: var(--green);
    color: var(--paper);
}


.tag-paid {
    background: var(--orange);
    color: var(--paper);
}


@media (max-width: 900px) {

    .koma-grid {
        grid-template-columns: repeat(2, 1fr);
        box-shadow: 7px 7px 0 var(--ink);
    }

}


/* ===================================
   見開き — feature spread (photo + text)
=================================== */


.spread {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: center;
}


.spread.reverse .spread-photo {
    order: 2;
}


.spread-photo {
    position: relative;
}


.spread-photo .photo {
    --ph: 4/3;
}


/* anchors the chapter's sound effect to the text block, so it never
   lands on the photo when the spread stacks on narrow screens */
.spread-text {
    position: relative;
}


.spread-text h2 {
    font-size: clamp(28px, 4.4vw, 50px);
    margin-bottom: 26px;
}


.spread-text p {
    margin: 18px 0;
    color: var(--ink-soft);
    font-size: 15px;
}


.spread .chapter {
    margin-bottom: 18px;
}


/* the checklist reads as hand-ticked lines */
.tick-list {
    margin-top: 28px;
    display: grid;
    gap: 14px;
}


.tick-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font-size: 14px;
    box-shadow: 4px 4px 0 var(--ink);
}


.tick-list li .tick {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--orange-deep);
}


.tick-list li .tick svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.spread-actions {
    margin-top: 30px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}


/* 3秒 — a rubber stamp, rotated hard. Belongs only where the
   checkout actually happens: taking a volume up to the room. */
.stamp {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border: 4px double var(--orange-deep);
    border-radius: 50%;
    background: rgba(255,253,246,.94);
    color: var(--orange-deep);
    font-family: var(--sans);
    font-weight: 900;
    line-height: 1.15;
    transform: rotate(-14deg);
}


.stamp .big {
    font-size: 30px;
}


.stamp .small {
    font-size: 11px;
    letter-spacing: .02em;
}


@media (max-width: 900px) {

    .spread {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .spread.reverse .spread-photo {
        order: 0;
    }

    /* once the photo runs edge to edge there is no room to hang the
       stamp off the corner — the section would clip it — so it is
       pulled back inside the frame. !important beats the desktop
       offset that is set inline on the element. */
    .stamp {
        width: 90px;
        height: 90px;
        right: 12px !important;
        bottom: -22px !important;
    }

    .stamp .big { font-size: 24px; }
    .stamp .small { font-size: 10px; }

}


/* ===================================
   第3話 — ドリンク / スープ
=================================== */


.drink-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
}


.drink-card {
    position: relative;
    text-align: center;
    padding-bottom: 28px;
}


.drink-card .photo {
    --ph: 1/1;
    border-bottom: var(--rule) solid var(--ink);
}


.drink-card .body {
    padding: 22px 20px 0;
}


.drink-card h3 {
    font-family: var(--sans);
    font-weight: 900;
    font-size: 19px;
    margin-bottom: 8px;
}


.drink-card p {
    font-size: 13.5px;
    color: var(--ink-soft);
}


/* tilt the panels alternately so the row reads as pasted-down
   photos rather than a tidy CSS grid */
.drink-card:nth-child(1) { transform: rotate(-1.2deg); }
.drink-card:nth-child(2) { transform: rotate(.7deg); }
.drink-card:nth-child(3) { transform: rotate(-.6deg); }


/* Three across holds down to tablet width. Only on a phone do the
   cards stack — and then the photo goes landscape, otherwise three
   full-width squares make a wall of photo taller than the screen. */
@media (max-width: 900px) {

    .drink-grid {
        gap: 18px;
    }

    .drink-card .body {
        padding: 16px 12px 0;
    }

    .drink-card h3 {
        font-size: 16px;
    }

}


@media (max-width: 640px) {

    .drink-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .drink-card .photo {
        --ph: 3/2;
    }

    .drink-card:nth-child(n) {
        transform: none;
    }

}


/* ===================================
   第4話 — 人気作品ランキング TOP5
=================================== */


/* Five rows, straight down the page. The left padding is deliberate
   dead space — it is the runway the rank markers hang out into.
   It stays on paper so the titles read cleanly; the colour comes
   from the medals and the 1位 highlight instead. */
.rank-board {
    position: relative;
    max-width: 580px;
    margin: 0 auto;
    padding: 34px 40px 30px 92px;
    overflow: visible;
}


.rank-item {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 15px 0;
    border-bottom: 2px dashed rgba(20,18,15,.22);
}


.rank-item:last-child {
    border-bottom: none;
}


/* The marker breaks out through the panel's left border — a sticker
   slapped onto the page, not a tidy table cell. The layout slot is
   the same width for every row so the titles still line up; the
   size differences are done with transform, which costs no layout. */
.rank-item .pos {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-left: -108px;
    line-height: 1;
    color: var(--ink);
}


.rank-item .pos .num {
    font-family: var(--display);
    font-size: 27px;
}


.rank-item .pos .suf {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    margin-left: 1px;
}


/* top three get the yellow burst, the rest a plain inked disc */
.rank-item .pos.disc {
    border: var(--rule) solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
}


.rank-item:nth-child(1) .pos { transform: rotate(-8deg) scale(1.3); }
.rank-item:nth-child(2) .pos { transform: rotate(6deg)  scale(1.12); }
.rank-item:nth-child(3) .pos { transform: rotate(-5deg) scale(1.04); }
.rank-item:nth-child(4) .pos { transform: rotate(4deg)  scale(.9); }
.rank-item:nth-child(5) .pos { transform: rotate(-3deg) scale(.9); }


.rank-item .title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .02em;
}


/* 1位 is the headline: gold, larger, crowned */
.rank-item:nth-child(1) {
    padding: 22px 0;
}


.rank-item:nth-child(1) .title {
    font-weight: 900;
    font-size: 26px;
    color: var(--ink);
    background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%);
    padding: 0 4px;
}


.rank-item:nth-child(1) .title::before {
    content: "";
    display: inline-block;
    width: 36px;
    height: 28px;
    margin-right: 8px;
    vertical-align: -4px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Cpath d='M2 6l6 6 6-10 6 10 6-6-3 14H5z' fill='%23ffd21f' stroke='%2314120f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}


.rank-item:nth-child(2) .title,
.rank-item:nth-child(3) .title {
    font-size: 19px;
}


/* gold, silver, bronze */
.rank-item:nth-child(2) .pos.burst { background: #dfe4ea; }
.rank-item:nth-child(3) .pos.burst { background: #e9a565; }


/* rows pop in from 5位 up to 1位 once the board scrolls into view
   (main.js adds .is-live); 1位 waits a beat longer for the reveal */
.rank-list .rank-item {
    opacity: 0;
}


.rank-list.is-live .rank-item {
    animation: rank-pop .55s cubic-bezier(.2,1.5,.4,1) forwards;
}


.rank-list.is-live .rank-item:nth-child(5) { animation-delay: .05s; }
.rank-list.is-live .rank-item:nth-child(4) { animation-delay: .25s; }
.rank-list.is-live .rank-item:nth-child(3) { animation-delay: .45s; }
.rank-list.is-live .rank-item:nth-child(2) { animation-delay: .65s; }
.rank-list.is-live .rank-item:nth-child(1) { animation-delay: 1s; }


@keyframes rank-pop {
    from { opacity: 0; transform: translateX(-24px) scale(.85); }
    to   { opacity: 1; transform: none; }
}


.rank-note {
    max-width: 540px;
    margin: 30px auto 0;
    text-align: center;
}


/* the date is its own line and never splits (…10月／4日…) */
#rank-generated {
    display: block;
    white-space: nowrap;
}


.rank-more {
    margin-top: 30px;
    text-align: center;
}


/* Held back until the lending API answers, so a guest never sees
   the ○○○○ skeleton. If the request fails the section simply
   never appears — better than showing a broken ranking. */
.ranking-section.is-pending {
    display: none;
}


@media (max-width: 700px) {

    /* The section clips its own overflow, so it has to carry enough
       side padding for the number that hangs outside the panel.
       Doubled-up selector so it outranks the shared `.section`
       padding shorthand set further down the sheet. */
    .section.ranking-section {
        padding-left: 34px;
        padding-right: 34px;
    }

    .rank-board {
        padding: 26px 18px 22px 56px;
    }

    .rank-item {
        gap: 16px;
    }

    .rank-item .pos {
        width: 54px;
        height: 54px;
        margin-left: -70px;
    }

    .rank-item .pos .num {
        font-size: 21px;
    }

    .rank-item .pos .suf {
        font-size: 10px;
    }

    .rank-item .title {
        font-size: 15px;
    }

    .rank-item:nth-child(1) .title {
        font-size: 20px;
    }

    .rank-item:nth-child(1) .title::before {
        width: 28px;
        height: 22px;
        margin-right: 6px;
        vertical-align: -3px;
    }

    .rank-item:nth-child(2) .title,
    .rank-item:nth-child(3) .title {
        font-size: 16px;
    }

}


/* ===================================
   第5話 — 一日の流れを漫画のコマで読む
=================================== */


.story {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px 22px;
}


.story-note {
    margin-top: 24px;
    text-align: right;
}


.story-koma {
    position: relative;
    background: var(--paper);
    border: var(--rule) solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
}


.story-koma .photo {
    --ph: 4/3;
    border-bottom: var(--rule) solid var(--ink);
}


.story-koma .body {
    padding: 16px 18px 20px;
}


.story-koma .time {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 12px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .06em;
}


.story-koma.is-paid .time {
    background: var(--orange);
}


.story-koma h3 {
    font-family: var(--sans);
    font-weight: 900;
    font-size: 17px;
    margin-bottom: 6px;
}


.story-koma p {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-soft);
}


/* Each beat of the day is a panel that is *typographic*, not drawn:
   screentone, radiating lines, and a shouted sound effect. This is
   deliberate — hand-coded vector figures read as clip-art, and a
   bad drawing is worse than no drawing. When real manga artwork
   arrives, drop an <img> in as the first child; it covers the
   placeholder and the sound effect sits on top of it. */
.manga-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 4/3;
    background: var(--paper-2);
    background-image: radial-gradient(rgba(20,18,15,.16) 1.5px, transparent 1.6px);
    background-size: 10px 10px;
    border-bottom: var(--rule) solid var(--ink);
    overflow: hidden;
    text-align: center;
}


.manga-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* radiating lines, clear in the middle so the word stays readable */
.manga-panel::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: repeating-conic-gradient(from 0deg at 50% 50%,
        var(--ink) 0deg 1.2deg, transparent 1.2deg 7deg);
    opacity: .1;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 20%, #000 60%);
    mask-image: radial-gradient(circle at 50% 50%, transparent 20%, #000 60%);
    pointer-events: none;
}


.manga-panel .word {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-size: clamp(24px, 3.2vw, 38px);
    line-height: 1.12;
    color: var(--paper);
    -webkit-text-stroke: 3.5px var(--ink);
    paint-order: stroke fill;
    text-shadow: 4px 4px 0 var(--ink);
    transform: rotate(-6deg);
}


/* once the artwork is in, the sound effect steps aside to a corner
   so it reads as an accent instead of covering the drawing */
.manga-panel > img ~ .word {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: clamp(16px, 1.6vw, 22px);
    -webkit-text-stroke: 3px var(--ink);
    text-shadow: 2px 2px 0 var(--ink);
}


.manga-panel > img ~ .word.is-left {
    right: auto;
    left: 10px;
}


/* what belongs here once the artwork is commissioned */
.manga-panel .slot {
    position: relative;
    z-index: 2;
    font-family: var(--hand);
    font-size: 12px;
    letter-spacing: 0;
    color: var(--ink-soft);
    padding: 0 14px;
}


.manga-panel > img ~ .slot {
    display: none;
}


/* the koma number, printed in the corner like a page reference */
.story-koma .n {
    position: absolute;
    top: -14px;
    left: -14px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    border: var(--rule) solid var(--ink);
    border-radius: 50%;
    font-family: var(--display);
    font-size: 14px;
}


.story-koma .tag {
    margin-top: 10px;
}


@media (max-width: 900px) {

    .story {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 16px;
    }

}


@media (max-width: 520px) {

    .story {
        grid-template-columns: 1fr;
    }

}


/* ===================================
   第7話 — その他無料サービス
=================================== */


.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}


.service-item .photo {
    --ph: 4/3;
    border-bottom: var(--rule) solid var(--ink);
}


.service-item .body {
    padding: 16px 14px 18px;
    text-align: center;
}


.service-item h3 {
    font-family: var(--sans);
    font-weight: 900;
    font-size: 16px;
    line-height: 1.5;
}


.service-item p {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--ink-soft);
}


@media (max-width: 900px) {

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}


/* ===================================
   最終話 — アクセス
=================================== */


.access-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 44px;
    align-items: start;
}


.access-card {
    padding: 34px 32px;
}


.access-name {
    font-family: var(--sans);
    font-weight: 900;
    font-size: 24px;
    letter-spacing: .02em;
    margin-bottom: 10px;
}


.access-card address {
    display: block;
    font-style: normal;
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 22px;
}


.info-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-top: 2px dashed rgba(20,18,15,.22);
    font-size: 14.5px;
}


.info-row:last-child {
    border-bottom: 2px dashed rgba(20,18,15,.22);
}


.info-row dt {
    flex-shrink: 0;
    width: 128px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
}


.info-row dd {
    margin: 0;
    color: var(--ink-soft);
}


.map-frame {
    height: 380px;
    border: var(--rule) solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    overflow: hidden;
}


.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.35) contrast(1.05);
}


.map-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--ink);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
}


@media (max-width: 900px) {

    .access-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .map-frame {
        height: 300px;
    }

}


/* ===================================
   次巻 — final CTA
=================================== */


.finale {
    position: relative;
    padding: 130px 24px 120px;
    background: var(--green);
    color: var(--paper);
    text-align: center;
    overflow: hidden;
}


.finale .inner {
    max-width: 900px;
}


.finale .chapter {
    background: var(--paper);
    color: var(--ink);
    margin-bottom: 26px;
}


.finale .chapter .no {
    color: var(--orange-deep);
}


.finale h2 {
    position: relative;
    z-index: 2;
    font-size: clamp(31px, 6.2vw, 74px);
}


.finale p {
    position: relative;
    z-index: 2;
    margin-top: 30px;
    font-size: 15px;
    color: rgba(255,253,246,.82);
}


.finale-actions {
    position: relative;
    z-index: 2;
    margin-top: 44px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}


/* つづく — the "to be continued" mark that hands the next volume to the reader */
.fin {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 22px;
    color: rgba(255,253,246,.72);
}


/* ===================================
   Footer
=================================== */


.footer {
    padding: 40px 24px 108px;
    text-align: center;
    background: var(--green-deep);
    color: rgba(255,253,246,.55);
    font-size: 12.5px;
}


.footer-nap {
    display: block;
    font-style: normal;
    margin-bottom: 10px;
    color: rgba(255,253,246,.62);
}


/* ===================================
   Scroll reveal — panels drop in slightly, like a page being laid
   down, rather than a soft corporate fade.
=================================== */


.reveal {
    opacity: 0;
    transform: translateY(26px) rotate(-.6deg);
    transition: opacity .55s cubic-bezier(.16,.7,.24,1),
                transform .55s cubic-bezier(.16,.7,.24,1);
}


.reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* keep the deliberate tilts after reveal */
.drink-card.reveal.is-visible:nth-child(1) { transform: rotate(-1.2deg); }
.drink-card.reveal.is-visible:nth-child(2) { transform: rotate(.7deg); }
.drink-card.reveal.is-visible:nth-child(3) { transform: rotate(-.6deg); }


@media (max-width: 640px) {

    .drink-card.reveal.is-visible:nth-child(n) {
        transform: none;
    }

}


/* ===================================
   Fixed CTA
   The cover already carries its own CTA on the obi, so the
   floating pair stays out of the way until the reader has left
   the cover — otherwise two 宿泊予約 buttons stack on first paint.
=================================== */


.fixed-cta {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 300;
    display: flex;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,1.4,.4,1), visibility .35s;
}


.fixed-cta.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}


.fixed-cta .btn {
    box-shadow: 4px 4px 0 var(--ink);
    font-size: 14px;
}


.btn-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


@media (min-width: 701px) {

    .fixed-cta .tel-call {
        display: none;
    }

}


@media (max-width: 700px) {

    .fixed-cta {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 8px;
    }

    .fixed-cta .btn {
        flex: 1;
        padding: 14px 6px;
        font-size: 13px;
        box-shadow: 3px 3px 0 var(--ink);
    }

    .fixed-cta .tel-display {
        display: none;
    }

}


/* ===================================
   Responsive — global
=================================== */


@media (max-width: 900px) {

    .section {
        padding: 80px 20px;
    }

    .impact {
        -webkit-text-stroke: 3px var(--ink);
        text-shadow: 5px 5px 0 var(--ink);
    }

    .sfx {
        -webkit-text-stroke: 2.5px var(--ink);
        text-shadow: 3px 3px 0 var(--ink);
    }

    .koma,
    .story-koma {
        box-shadow: 6px 6px 0 var(--ink);
    }

}


@media (max-width: 560px) {

    .section-head {
        margin-bottom: 42px;
    }

    .bubble {
        padding: 26px 22px;
        border-radius: 24px;
    }

    .obi-actions {
        width: 100%;
    }

    /* two equal buttons on one row — the padding has to come down
       or "コミックを見る" no longer fits on a single line */
    .obi-actions .btn {
        flex: 1;
        padding: 14px 8px;
        font-size: 14px;
    }

    /* the loudest sound effects get in the way on a phone */
    .sfx.hide-sp {
        display: none;
    }

}


/* ===================================
   番外編 よくある質問
=================================== */

.faq-list {
    max-width: 820px;
    margin: 0 auto;
    padding: 8px 32px;
}


.faq-item {
    border-bottom: 2px dashed rgba(20,18,15,.22);
}


.faq-item:last-child {
    border-bottom: 0;
}


.faq-item summary {
    position: relative;
    padding: 20px 36px 20px 40px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    cursor: pointer;
    list-style: none;
}


.faq-item summary::-webkit-details-marker {
    display: none;
}


.faq-item summary::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 17px;
    font-family: var(--sans);
    font-weight: 900;
    font-size: 22px;
    color: var(--orange);
}


.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 16px;
    font-family: var(--sans);
    font-weight: 900;
    font-size: 22px;
}


.faq-item[open] summary::after {
    content: "−";
}


.faq-item p {
    padding: 0 8px 22px 40px;
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--ink-soft);
}


.faq-item p a {
    color: var(--green);
    font-weight: 700;
    text-decoration: underline;
}


.faq-item p a .link-icon {
    display: inline-block;
    margin-left: 3px;
    vertical-align: -1px;
}


@media (max-width: 640px) {

    .faq-list {
        padding: 4px 18px;
    }

    .faq-item summary {
        font-size: 15px;
    }

}