:root {

    --ink: #202741;
    --ink-soft: #586077;
    --paper: #f7f8f4;
    --white: #ffffff;
    --line: rgba(32, 39, 65, 0.14);
    --line-strong: rgba(32, 39, 65, 0.24);
    --hikari: #b9e78b;
    --hikari-deep: #67964f;
    --hikari-soft: #eef8df;
    --nozomi: #87b377;
    --nozomi-deep: #557d49;
    --nozomi-soft: #e8f1e3;
    --aoba: #efc46e;
    --aoba-deep: #a87427;
    --aoba-soft: #fbf0d8;
    --price: #4f873f;
    --limit-red: #cb4545;
    --shadow: 0 18px 48px rgba(32, 39, 65, 0.08);
    --shadow-card: 0 12px 30px rgba(32, 39, 65, 0.08);
    --radius-large: 30px;
    --radius-card: 22px;
    --max-width: 1380px;

    /* component sizing */
    --product-title-height: 120px;
    --product-gap: 20px;
    --main-set-x: var(--product-gap);
    --character-frame-padding: calc(var(--main-set-x) / 2);
    --character-control-gap: calc(var(--main-set-x) / 2);
    --character-price-gap: calc(var(--main-set-x) * 3);
    --character-button-height: 58px;
    --character-note-height: 34px;
    --product-price-gap: 9px;
    --product-media-padding: 16px;
    --product-media-panel-radius: 14px;
    --choice-card-start: rgba(247, 252, 237, 0.98);
    --choice-card-end: rgba(230, 245, 207, 0.96);
    --choice-image-start: rgba(185, 231, 139, 0.28);
    --choice-image-end: rgba(103, 150, 79, 0.10);
    --character-header-height: calc(
        var(--character-frame-padding)
        + var(--character-button-height)
        + var(--character-control-gap)
        + var(--character-note-height)
        + var(--character-control-gap)
    );
    --main-image-height: 340px;
    --main-card-height: calc(var(--main-image-height) + var(--product-title-height));
    --limited-large-image-height: 600px;
    --limited-sketch-image-height: 440px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 10%, rgba(185, 231, 139, 0.15), transparent 24rem),
        radial-gradient(circle at 93% 16%, rgba(239, 196, 110, 0.10), transparent 22rem),
        var(--paper);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Sans",
        "Noto Sans JP",
        "Yu Gothic",
        "Meiryo",
        Arial,
        sans-serif;
    font-synthesis: weight style;
    letter-spacing: -0.02em;
}

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

button,
a {
    font: inherit;
}

button {
    color: inherit;
}

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

.container {
    width: min(calc(100% - 64px), var(--max-width));
    margin: 0 auto;
}

/* header */
.header-outer {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(32, 39, 65, 0.08);
    background: rgba(247, 248, 244, 0.90);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.header-inner {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text {
    display: grid;
    gap: 2px;
}

.brand-text strong {
    font-size: 1rem;
    font-weight: 900;
}

.brand-text small {
    color: var(--ink-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.nav a {
    padding: 10px 13px;
    border-radius: 12px;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
    transition: 0.2s ease;
}

.nav a:hover {
    color: var(--ink);
    background: rgba(185, 231, 139, 0.18);
}

/* home */
.home-outer {
    position: relative;
    overflow: hidden;
    padding: 64px 0 42px;
}

.home-outer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(32, 39, 65, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 39, 65, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 84%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 84%);
}

.home-inner {
    position: relative;
    min-height: 690px;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    grid-template-rows: 1fr 44px;
    gap: 34px 62px;
    align-items: center;
}

.home-left,
.home-right,
.home-bottom {
    position: relative;
    z-index: 1;
}

.upper {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.home-left > .upper {
    margin-bottom: 14px;
    color: var(--hikari-deep);
    font-size: 0.82rem;
}

.home-left h1,
.home-left h2 {
    margin: 0;
    line-height: 0.88;
    font-weight: 900;
    letter-spacing: -0.07em;
}

.home-left h1 {
    font-size: clamp(4.8rem, 8vw, 8.5rem);
}

.home-left h2 {
    margin-top: 8px;
    color: var(--hikari-deep);
    font-size: clamp(3rem, 5.6vw, 6rem);
}

.home-left .lower {
    margin: 28px 0 30px;
    color: var(--ink-soft);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8;
}

.event-table {
    width: min(100%, 570px);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 30px rgba(32, 39, 65, 0.04);
}

.event-table th,
.event-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.event-table tr:last-child th,
.event-table tr:last-child td {
    border-bottom: 0;
}

.event-table th {
    width: 92px;
    color: var(--ink-soft);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.event-table td {
    font-size: 0.92rem;
    font-weight: 900;
}

.home-right {
    min-height: 610px;
}

.home-right::before {
    content: "";
    position: absolute;
    inset: 42px 0 38px 10%;
    border: 1px solid rgba(32, 39, 65, 0.10);
    border-radius: 44% 56% 46% 54% / 56% 42% 58% 44%;
    background:
        radial-gradient(circle at 20% 28%, rgba(185, 231, 139, 0.34), transparent 33%),
        radial-gradient(circle at 76% 70%, rgba(135, 179, 119, 0.20), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(250, 251, 246, 0.52));
}

.label {
    position: absolute;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(32, 39, 65, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 8px 24px rgba(32, 39, 65, 0.08);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.label span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.label-hikari {
    top: 48px;
    left: 6%;
}

.label-hikari span {
    background: var(--hikari);
}

.label-nozomi {
    top: 93px;
    right: 9%;
}

.label-nozomi span {
    background: var(--nozomi);
}

.label-aoba {
    top: 18px;
    right: 30%;
}

.label-aoba span {
    background: var(--aoba);
}

.book {

    position: absolute;
    border: 1px solid rgba(32, 39, 65, 0.12);
    border-radius: 20px;
    background: white;
    box-shadow: 0 30px 60px rgba(32, 39, 65, 0.18);
    overflow: hidden;
    transform-origin: 50% 50%;
    transition: transform 0.42s cubic-bezier(0.2, 0.75, 0.25, 1), box-shadow 0.42s ease;
    will-change: transform;
}

.book img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.book span {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(32, 39, 65, 0.86);
    color: white;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.book-back {
    width: 44%;
    height: 66%;
    left: 9%;
    top: 22%;
    transform: rotate(-6deg);
}

.book-front {
    width: 48%;
    height: 72%;
    right: 4%;
    top: 14%;
    transform: rotate(5deg);
}



.home-right:hover .book-back {
    transform: translate3d(-8px, 8px, 0) rotate(-9deg) scale(1.012);
    box-shadow: 0 34px 72px rgba(32, 39, 65, 0.19);
}

.home-right:hover .book-front {
    transform: translate3d(9px, -9px, 0) rotate(2deg) scale(1.018);
    box-shadow: 0 38px 78px rgba(32, 39, 65, 0.22);
}

.home-bottom {
    grid-column: 1 / -1;
    height: 44px;
    display: flex;
    align-items: center;
}

.home-bottom::before {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--hikari), var(--nozomi), var(--aoba));
}

.route-start,
.route-end,
.route-stop {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(32, 39, 65, 0.16);
}

.route-start {
    left: 2%;
    background: var(--ink);
}

.route-stop-hikari {
    left: 34%;
    background: var(--hikari);
}

.route-stop-nozomi {
    left: 57%;
    background: var(--nozomi);
}

.route-stop-aoba {
    left: 77%;
    background: var(--aoba);
}

.route-end {
    left: 98%;
    background: var(--ink);
}

/* chapter structure */
.chapter-border {
    padding: 40px 0;
    scroll-margin-top: 86px;
}

.chapter-border > .container {
    position: relative;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-large);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.chapter-border > .container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.38;
    background-image:
        linear-gradient(135deg, rgba(103, 150, 79, 0.05) 25%, transparent 25%),
        linear-gradient(225deg, rgba(85, 125, 73, 0.04) 25%, transparent 25%);
    background-size: 34px 34px;
}

.chapter-main-set > .container::after,
.chapter-acrylic > .container::after,
.chapter-single > .container::after,
.chapter-limited > .container::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -120px;
    top: -150px;
    border-radius: 50%;
    pointer-events: none;
}

.chapter-main-set > .container::after,
.chapter-acrylic > .container::after,
.chapter-single > .container::after,
.chapter-limited > .container::after {
    background: rgba(185, 231, 139, 0.14);
}

.chapter-title {
    position: relative;
    z-index: 1;
    margin-bottom: 26px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.chapter-title > div:first-child {
    min-width: 0;
}

.chapter-title .lower {
    overflow-wrap: anywhere;
}

.chapter-title .upper {
    margin-bottom: 7px;
    color: var(--hikari-deep);
    font-size: 0.84rem;
}

.chapter-title h3 {
    margin: 0;
    font-size: clamp(2.7rem, 4.3vw, 5.1rem);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.065em;
}

.chapter-title .lower {
    max-width: 840px;
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.7;
}


/* chapter meta */
.chapter-meta {
    flex: 0 0 auto;
    min-height: 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(79, 135, 63, 0.28);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(238, 247, 223, 0.96), rgba(255, 255, 255, 0.96));
    box-shadow: 0 10px 24px rgba(32, 39, 65, 0.06);
}

.chapter-price {
    min-width: 170px;
    padding: 13px 20px;
    display: grid;
    place-items: center;
    color: var(--price);
    font-size: clamp(1.75rem, 3vw, 2.7rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.purchase-limit {
    min-width: 184px;
    padding: 8px 18px 8px 20px;
    display: grid;
    place-items: center;
    border-left: 1px solid rgba(203, 69, 69, 0.28);
    color: var(--limit-red);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
}

/* shared product cards */


.product-border {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-card);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.product-border:hover,
.product-border:focus-visible,
.product-border.is-detail-open {
    z-index: 9;
    border-color: rgba(103, 150, 79, 0.42);
    box-shadow: 0 20px 42px rgba(32, 39, 65, 0.13);
    transform: translateY(-4px);
    outline: none;
}

.product-image {
    position: relative;
    height: 330px;
    flex: 0 0 auto;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(circle at 18% 18%, rgba(185, 231, 139, 0.22), transparent 45%),
        #f7f8f4;
}

/*
 * Shared media rule for every product photo.
 * Single-photo cards use only the common image-area padding: there is no
 * extra translucent panel around the image. Multi-photo cards create their
 * translucent panels on the individual variant wrappers instead.
 */
.product-image img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
}

.product-image > img,
.product-flip-face {
    padding: var(--product-media-padding);
}

/* Kept for semantic HTML compatibility; sizing is now shared globally. */
.product-image-contain {
    --product-image-contain: 1;
}

.product-title {
    position: relative;
    width: 100%;
    min-height: var(--product-title-height);
    height: auto;
    flex: 0 0 auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    row-gap: 3px;
    border-top: 0;
}

.product-title .upper {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.16em;
}

.product-title h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.24;
    letter-spacing: -0.02em;
}

.price-single {
    margin: var(--product-price-gap) 0 0;
    align-self: start;
    color: var(--price);
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
}

.new-badge {
    position: absolute;
    z-index: 4;
    top: 12px;
    right: 12px;
    padding: 6px 9px;
    border: 1px solid rgba(103, 150, 79, 0.22);
    border-radius: 999px;
    background: #e3f7b7;
    color: #4f733e;
    box-shadow: 0 6px 16px rgba(79, 135, 63, 0.12);
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.product-number {
    position: absolute;
    z-index: 5;
    left: 10px;
    top: 4px;
    color: var(--ink);
    opacity: 0.14;
    font-size: clamp(2.8rem, 4.2vw, 4.8rem);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.product-size {
    position: absolute;
    z-index: 7;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 13px 14px;
    display: grid;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    background: rgba(32, 39, 65, 0.93);
    color: white;
    box-shadow: 0 10px 28px rgba(32, 39, 65, 0.24);
    opacity: 0;
    transform: translateY(calc(100% + 20px));
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.product-border:hover .product-size,
.product-border:focus-visible .product-size,
.product-border.is-detail-open .product-size {
    opacity: 1;
    transform: translateY(0);
}

.product-size span {
    color: var(--hikari);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.product-size strong {
    font-size: 0.88rem;
    line-height: 1.35;
}

.product-size small {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.66rem;
    font-weight: 700;
}

/* 01 NEW SET */
.main-set-layout {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--character-header-height) + var(--character-price-gap));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
        "new rough choice choice"
        "clear bag ticket ticket";
    gap: var(--main-set-x);
    align-items: stretch;
}

.set-area-new {
    grid-area: new;
}

.set-area-rough {
    grid-area: rough;
}

.set-area-choice {
    grid-area: choice;
}

.set-area-clear {
    grid-area: clear;
}

.set-area-bag {
    grid-area: bag;
}

.set-area-ticket {
    grid-area: ticket;
}

.main-set-layout > .product-border,
.character-products .product-border {
    min-height: var(--main-card-height);
    height: auto;
}

.main-set-layout > .product-border .product-image,
.character-products .product-image {
    height: var(--main-image-height);
    min-height: var(--main-image-height);
}

.character-select-layout {
    position: relative;
    z-index: 2;
    min-height: var(--main-card-height);
    height: auto;
}

.character-select-layout[data-active-character="hikari"] {
    --choice-card-start: rgba(247, 252, 237, 0.98);
    --choice-card-end: rgba(230, 245, 207, 0.96);
    --choice-image-start: rgba(185, 231, 139, 0.30);
    --choice-image-end: rgba(103, 150, 79, 0.10);
}

.character-select-layout[data-active-character="nozomi"] {
    --choice-card-start: rgba(244, 249, 240, 0.98);
    --choice-card-end: rgba(220, 235, 213, 0.96);
    --choice-image-start: rgba(135, 179, 119, 0.30);
    --choice-image-end: rgba(85, 125, 73, 0.11);
}

.character-select-layout[data-active-character="aoba"] {
    --choice-card-start: rgba(255, 250, 240, 0.98);
    --choice-card-end: rgba(248, 233, 201, 0.96);
    --choice-image-start: rgba(239, 196, 110, 0.30);
    --choice-image-end: rgba(168, 116, 39, 0.10);
}

.character-select-layout::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(-1 * var(--character-header-height));
    right: calc(-1 * var(--character-frame-padding));
    bottom: calc(-1 * var(--character-frame-padding));
    left: calc(-1 * var(--character-frame-padding));
    border: 1px solid transparent;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.985), rgba(248, 251, 246, 0.95)) padding-box,
        linear-gradient(125deg, rgba(84, 114, 212, 0.76), rgba(122, 145, 220, 0.54) 42%, rgba(185, 231, 139, 0.62) 74%, rgba(103, 150, 79, 0.68)) border-box;
    box-shadow: 0 14px 34px rgba(65, 88, 153, 0.10);
    pointer-events: none;
}

.character-buttons {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: calc(
        -1 * (
            var(--character-button-height)
            + var(--character-control-gap)
            + var(--character-note-height)
            + var(--character-control-gap)
        )
    );
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--character-control-gap);
}

.character-button {
    position: relative;
    height: var(--character-button-height);
    min-height: var(--character-button-height);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 15px;
    color: var(--ink);
    box-shadow: 0 7px 17px rgba(32, 39, 65, 0.055);
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 900;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.character-button span {
    position: absolute;
    left: 9px;
    top: 50%;
    width: auto;
    height: auto;
    display: block;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    opacity: 0.14;
    transform: translateY(-52%);
    font-size: 2.65rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
}

.character-button[data-character="hikari"] {
    background:
        linear-gradient(145deg, #ffffff, #f2f8e9) padding-box,
        linear-gradient(125deg, rgba(103, 150, 79, 0.40), rgba(185, 231, 139, 0.62)) border-box;
}

.character-button[data-character="nozomi"] {
    background:
        linear-gradient(145deg, #ffffff, #edf5e9) padding-box,
        linear-gradient(125deg, rgba(85, 125, 73, 0.42), rgba(135, 179, 119, 0.60)) border-box;
}

.character-button[data-character="aoba"] {
    background:
        linear-gradient(145deg, #ffffff, #fbf5e8) padding-box,
        linear-gradient(125deg, rgba(168, 116, 39, 0.38), rgba(239, 196, 110, 0.60)) border-box;
}

.character-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(32, 39, 65, 0.09);
}

.character-button.is-active {
    color: var(--ink);
    box-shadow: 0 10px 22px rgba(32, 39, 65, 0.11);
}

.character-button[data-character="hikari"].is-active {
    background:
        linear-gradient(145deg, #f7fce9, #e3f4c8) padding-box,
        linear-gradient(125deg, #67964f, #b9e78b) border-box;
}

.character-button[data-character="nozomi"].is-active {
    background:
        linear-gradient(145deg, #f4f9ef, #dcebd5) padding-box,
        linear-gradient(125deg, #557d49, #87b377) border-box;
}

.character-button[data-character="aoba"].is-active {
    background:
        linear-gradient(145deg, #fffaf0, #f8e9c9) padding-box,
        linear-gradient(125deg, #a87427, #efc46e) border-box;
}

.character-button.is-active span {
    opacity: 0.20;
}

.character-choice-note {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: calc(-1 * (var(--character-note-height) + var(--character-control-gap)));
    height: var(--character-note-height);
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(84, 114, 212, 0.12);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(84, 114, 212, 0.075), rgba(185, 231, 139, 0.10));
    color: #4e638f;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.character-choice-note span {
    color: var(--ink);
    font-weight: 900;
}

.character-products {
    position: relative;
    z-index: 1;
    min-height: var(--main-card-height);
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--main-set-x);
    align-items: stretch;
}

.character-products .product-border {
    background: rgba(255, 255, 255, 0.95);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.character-products .product-image {
    background:
        radial-gradient(circle at 18% 18%, var(--choice-image-start), transparent 48%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.74), var(--choice-image-end));
    transition: background 0.28s ease;
}


.ticket-product {
    display: flex;
    flex-direction: column;
}

.ticket-product .ticket-image {
    width: 100%;
    height: var(--main-image-height);
    min-height: var(--main-image-height);
    border-right: 0;
    border-bottom: 1px solid var(--line);
}

/* 02 ACRYLIC SET */
.acrylic-set-body {
    position: relative;
    z-index: 1;
}

.product-wide {
    display: flex;
    flex-direction: column;
}

.product-wide .product-image {
    width: 100%;
    height: 620px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
}


/* 03 SINGLE ITEMS */
.product-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--product-gap);
}

.product-grid .product-border {
    min-height: 0;
}

.variant-image {
    padding: var(--product-media-padding);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.variant-image > div {
    min-width: 0;
    min-height: 0;
    padding: 9px 8px 7px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--product-media-panel-radius);
    background: rgba(255, 255, 255, 0.58);
}

.variant-image > div img {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.variant-image > div span {
    color: var(--ink-soft);
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: center;
}


/* 04 LIMITED ITEMS */
.limited-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.14fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "dakimakura large"
        "dakimakura sketch";
    gap: var(--product-gap);
    align-items: stretch;
}

.limited-grid .product-border {
    min-height: 0;
}

.limited-card-dakimakura {
    grid-area: dakimakura;
}

.limited-card-large {
    grid-area: large;
}

.limited-card-sketch {
    grid-area: sketch;
}

.limited-card-large .product-image {
    height: var(--limited-large-image-height);
}

.limited-card-sketch .product-image {
    height: var(--limited-sketch-image-height);
}

.product-flip-image {
    perspective: 1600px;
}

.product-flip-stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.72s cubic-bezier(0.2, 0.72, 0.2, 1);
}

.product-flip-stage.is-flipped {
    transform: rotateY(180deg);
}

.product-flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.product-flip-face-back {
    transform: rotateY(180deg);
}


.limited-card-dakimakura .dakimakura-image {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.flip-button {
    position: absolute;
    z-index: 6;
    top: 12px;
    right: 12px;
    min-width: 92px;
    padding: 7px 10px;
    border: 1px solid rgba(32, 39, 65, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    box-shadow: 0 5px 14px rgba(32, 39, 65, 0.07);
    cursor: pointer;
    font-size: 0.64rem;
    font-weight: 900;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.flip-button:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(32, 39, 65, 0.12);
}

.large-stand-image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.large-stand-image > div {
    grid-template-rows: minmax(0, 1fr) auto;
}

.sketch-image {
    display: block;
}

/* 05 GUIDE */
.chapter-guide .chapter-title .lower {
    font-size: 1rem;
    line-height: 1.75;
}

.guide-grid {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    list-style: none;
}

.guide-grid::before {
    content: "";
    position: absolute;
    top: 48px;
    left: 7%;
    right: 7%;
    height: 2px;
    z-index: -1;
    background: linear-gradient(90deg, rgba(103, 150, 79, 0.22), rgba(135, 179, 119, 0.34), rgba(185, 231, 139, 0.22));
}

.guide-grid li {
    position: relative;
    min-height: 232px;
    padding: 24px 22px 22px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background:
        linear-gradient(180deg, rgba(185, 231, 139, 0.11), rgba(255, 255, 255, 0.96) 32%),
        #ffffff;
    box-shadow: var(--shadow-card);
}

.guide-grid li:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 35px;
    right: -25px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103, 150, 79, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: var(--hikari-deep);
    font-size: 0.9rem;
    font-weight: 900;
    box-shadow: 0 5px 14px rgba(32, 39, 65, 0.07);
}

.guide-number {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(103, 150, 79, 0.20);
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(185, 231, 139, 0.72), rgba(255, 255, 255, 0.95));
    color: var(--ink);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(32, 39, 65, 0.07);
}

.guide-grid li div {
    display: grid;
    align-content: start;
    gap: 8px;
}

.guide-grid p {
    margin: 0;
    color: var(--hikari-deep);
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.guide-grid li div > strong {
    font-size: 1.14rem;
    line-height: 1.4;
}

.guide-grid small {
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.68;
}

.guide-grid small strong {
    display: inline-block;
    margin: 0 0.08em;
    padding: 0.08em 0.42em 0.12em;
    border-radius: 7px;
    background: rgba(203, 69, 69, 0.075);
    color: var(--limit-red);
    font-size: 1em;
    font-weight: 900;
    line-height: 1.35;
}

.attention-box {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(32, 39, 65, 0.045);
}

.attention-box > strong {
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.attention-box ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.8;
}

/* 06 QUICK LIST */
.compact-title {
    align-items: center;
}

.price-list-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.price-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
}

.price-group-heading {
    padding: 17px 18px 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(185, 231, 139, 0.12), rgba(255, 255, 255, 0.92));
}

.price-group-heading .upper {
    margin-bottom: 5px;
    color: var(--hikari-deep);
}

.price-group-heading h4 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 900;
}

.price-list-grid dl {
    flex: 1;
    margin: 0;
    padding: 10px 18px;
}

.price-list-grid dl div {
    min-height: 54px;
    padding: 13px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--line);
}

.price-list-grid dl div:last-child {
    border-bottom: 0;
}

.price-list-grid dt {
    font-size: 0.84rem;
    font-weight: 800;
}

.price-list-grid dd {
    margin: 0;
    color: var(--price);
    font-size: 1.06rem;
    font-weight: 900;
}

.price-empty-row dt,
.price-empty-row dd {
    visibility: hidden;
}

/* 07 CREDITS */
.credits-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
}

.credit-card {
    min-width: 0;
    padding: 24px 26px;
    display: grid;
    grid-template-columns: minmax(170px, 0.62fr) minmax(250px, 0.95fr) minmax(280px, 1.3fr);
    align-items: center;
    gap: 26px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background:
        radial-gradient(circle at 88% 18%, rgba(185, 231, 139, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(185, 231, 139, 0.10), rgba(255, 255, 255, 0.96) 46%, rgba(135, 179, 119, 0.08));
    box-shadow: var(--shadow-card);
}

.credit-heading,
.credit-author {
    min-width: 0;
}

.credit-card .upper {
    margin: 0 0 6px;
    color: var(--hikari-deep);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.credit-card h4 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.credit-role {
    margin: 0 0 7px;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.credit-link {
    min-height: 56px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(103, 150, 79, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.90);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.credit-link:hover,
.credit-link:focus-visible {
    border-color: rgba(103, 150, 79, 0.50);
    box-shadow: 0 10px 24px rgba(32, 39, 65, 0.09);
    transform: translateY(-2px);
    outline: none;
}

.credit-link span {
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -0.025em;
}

.credit-link small {
    flex: 0 0 auto;
    color: var(--hikari-deep);
    font-size: 0.72rem;
    font-weight: 900;
}

.credit-description {
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.75;
}

/* responsive */
@media (max-width: 1120px) {
    .nav a {
        padding-inline: 8px;
        font-size: 0.69rem;
    }

    .home-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px 36px;
    }

    .main-set-layout {
        margin-top: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "new rough"
            "choice choice"
            "clear bag"
            "ticket ticket";
    }

    .character-select-layout {
        margin-top: var(--character-header-height);
    }

    .limited-grid {
        grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    }
}

@media (max-width: 1120px) and (min-width: 901px) {
    .guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-grid::before,
    .guide-grid li::after {
        display: none !important;
    }

    .credit-card {
        grid-template-columns: minmax(160px, 0.7fr) minmax(240px, 1fr);
    }

    .credit-description {
        grid-column: 1 / -1;
        padding: 16px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 900px) {
    .header-inner {
        min-height: 68px;
    }

    .nav {
        display: none;
    }

    .home-inner {
        min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 44px;
    }

    .home-right {
        min-height: 570px;
    }

    .chapter-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .chapter-meta {
        align-self: stretch;
    }

    .chapter-price,
    .purchase-limit {
        flex: 1 1 0;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .limited-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "dakimakura"
            "large"
            "sketch";
    }

    .limited-card-dakimakura .dakimakura-image {
        height: 900px;
        min-height: 0;
        flex: 0 0 900px;
    }

    .limited-card-large .product-image {
        height: 560px;
    }

    .limited-card-sketch .product-image {
        height: 430px;
    }

    .price-list-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {
    .container {
        width: min(calc(100% - 28px), var(--max-width));
    }

    .home-outer {
        padding-top: 38px;
    }

    .home-left h1 {
        font-size: clamp(3.9rem, 20vw, 5.5rem);
    }

    .home-left h2 {
        font-size: clamp(2.4rem, 13vw, 3.7rem);
    }

    .home-right {
        min-height: 470px;
    }

    .chapter-border > .container {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .chapter-title h3 {
        font-size: clamp(2.35rem, 13vw, 3.7rem);
    }

    .chapter-meta {
        display: grid;
        grid-template-columns: 1fr;
    }

    .purchase-limit {
        border-left: 0;
        border-top: 1px solid rgba(203, 69, 69, 0.16);
    }

    .main-set-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "new"
            "rough"
            "choice"
            "clear"
            "bag"
            "ticket";
    }

    .character-select-layout {
        height: auto;
        min-height: 0;
    }

    .character-select-layout::before {
        bottom: calc(-1 * var(--character-frame-padding));
    }

    .character-products {
        height: auto;
        grid-template-columns: 1fr;
    }

    .character-products .product-border {
        min-height: var(--main-card-height);
        height: auto;
    }

    .ticket-product {
        min-height: var(--main-card-height);
        height: auto;
    }

    .product-wide .product-image {
        height: 430px;
    }

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

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

    .attention-box {
        grid-template-columns: 1fr;
    }

    .limited-card-dakimakura .dakimakura-image {
        height: 720px;
        min-height: 0;
        flex: 0 0 720px;
    }

    .limited-card-large .product-image {
        height: 500px;
    }

    .limited-card-sketch .product-image {
        height: 400px;
    }
}

@media print {
    .header-outer {
        display: none;
    }
}

/* Interactive button-badge finish ------------------------------------------
 * Restored to the original, simple two-layer interaction model.
 * The square print image is cropped to a circular badge face. The first layer
 * follows the pointer and supplies a restrained local rainbow shimmer; the
 * second layer adds a very soft, broad iridescent wash. No white shine bar,
 * extra hologram DOM layers, or artificial ring effects are used.
 */
.badge-image {
    display: grid;
    place-items: center;
    padding: var(--product-media-padding);
}

.badge-disc {
    --badge-shine-x: 50%;
    --badge-shine-y: 50%;
    --badge-shine-opacity: 0;
    --badge-shine-angle: 135deg;

    position: relative;
    width: min(100%, calc(var(--main-image-height) - (var(--product-media-padding) * 2)));
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    isolation: isolate;
    background: #ffffff;
    box-shadow:
        0 10px 24px rgba(32, 39, 65, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.badge-disc > img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    transition: filter 0.18s ease, transform 0.18s ease;
}

.badge-disc::before,
.badge-disc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--badge-shine-opacity);
    transition: opacity 0.18s ease;
}

/*
 * Local pointer-following shimmer.
 * Unlike the original white radial highlight, the energy is distributed among
 * several low-opacity spectrum colours. A radial mask keeps the effect local
 * without drawing a visible circular ring on the badge.
 */
.badge-disc::before {
    background:
        conic-gradient(
            from var(--badge-shine-angle) at var(--badge-shine-x) var(--badge-shine-y),
            rgba(255, 78, 102, 0.18) 0deg,
            rgba(255, 174, 74, 0.19) 52deg,
            rgba(244, 225, 92, 0.16) 92deg,
            rgba(101, 231, 152, 0.17) 140deg,
            rgba(74, 205, 238, 0.19) 196deg,
            rgba(105, 116, 245, 0.18) 248deg,
            rgba(215, 105, 225, 0.17) 306deg,
            rgba(255, 78, 102, 0.18) 360deg
        );
    -webkit-mask-image: radial-gradient(
        circle at var(--badge-shine-x) var(--badge-shine-y),
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.68) 19%,
        rgba(0, 0, 0, 0.28) 36%,
        transparent 55%
    );
    mask-image: radial-gradient(
        circle at var(--badge-shine-x) var(--badge-shine-y),
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.68) 19%,
        rgba(0, 0, 0, 0.28) 36%,
        transparent 55%
    );
    mix-blend-mode: screen;
    filter: saturate(1.08);
}

/* Broad, subtle iridescence so the local shimmer never looks like a spotlight. */
.badge-disc::after {
    background:
        linear-gradient(
            var(--badge-shine-angle),
            transparent 7%,
            rgba(105, 132, 244, 0.07) 20%,
            rgba(95, 214, 238, 0.10) 32%,
            rgba(109, 229, 163, 0.09) 43%,
            rgba(241, 226, 112, 0.10) 54%,
            rgba(250, 164, 92, 0.10) 65%,
            rgba(223, 111, 202, 0.08) 77%,
            rgba(113, 121, 239, 0.06) 88%,
            transparent 96%
        );
    mix-blend-mode: screen;
    filter: saturate(1.06);
}

.badge-disc:hover > img {
    filter: saturate(1.035) contrast(1.018) brightness(1.012);
}

@media (hover: none) {
    .badge-disc::before,
    .badge-disc::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .badge-disc > img,
    .badge-disc::before,
    .badge-disc::after {
        transition: none;
    }
}


/* v14 responsive refinements */
@media (max-width: 900px) {
    .chapter-meta {
        width: 100%;
    }

    .chapter-price,
    .purchase-limit {
        min-width: 0;
        flex: 1 1 0;
    }

    .guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-grid::before,
    .guide-grid li::after {
        display: none !important;
    }

    .credit-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .credit-description {
        padding: 16px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 620px) {
    .chapter-meta {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .chapter-price {
        min-height: 58px;
    }

    .purchase-limit {
        min-height: 46px;
        border-top: 1px solid rgba(203, 69, 69, 0.22);
        border-left: 0;
    }

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