@font-face {
    font-family: "WingdingsSubset";
    src: url("../fonts/wingdings-regular-2-2_ufonts.com.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --gallery-width: 960px;
    --gallery-accent: #000;
    --gallery-paper: #fff;
    --gallery-ink: #111;
    --gallery-ease: cubic-bezier(.2, .72, .2, 1);
}

html,
body {
    overflow-x: clip;
}

body.gallery-detail-open {
    --active-model-color: #7018b6;
    background: #fff;
}




.gallery-page {
    width: min(100%, var(--gallery-width));
    min-height: 100vh;
    margin-inline: auto;
    overflow-x: clip;
    color: var(--gallery-ink);
    background: var(--gallery-paper);
    container-type: inline-size;
    container-name: gallery-page;
}

/* =========================================================
   Category tabs
   ========================================================= */

.gallery-tabs {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.55cqw;
    width: calc(100% - 6cqw);
    margin: 9.4cqw auto 0;
    padding: 0 6.3cqw 1.35cqw;
    border-bottom: 0.45cqw solid var(--gallery-accent);
}

.gallery-tabs__button {
    padding: 0.55cqw 2.4cqw;
    color: var(--gallery-accent);
    background: transparent;
    border: 0;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-weight:600;
    font-size: 5cqw;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform-origin: center bottom;
    transition: color 160ms ease, background-color 160ms ease, transform 90ms ease, box-shadow 90ms ease;
}

.gallery-tabs__button:active {
    transform: translateY(0.55cqw) scale(0.95);
    box-shadow: inset 0 0 0 0.35cqw currentColor;
}

.gallery-tabs__button.is-active:active {
    box-shadow: inset 0 0 0 0.35cqw #fff;
}

.gallery-tabs__button.is-pending {
    transform: translateY(0.35cqw) scale(0.97);
    box-shadow: inset 0 0 0 0.3cqw currentColor;
}

.gallery-tabs__button.is-active {
    color: #fff;
    background: var(--gallery-accent);
}

.gallery-tabs__button:focus-visible {
    outline: 0.45cqw solid var(--gallery-accent);
    outline-offset: 0.45cqw;
}

.gallery-tabs__divider {
    width: 0.25cqw;
    height: 5.2cqw;
    background: var(--gallery-accent);
}

/* =========================================================
   Category loading feedback
   ========================================================= */

.gallery-category-loader {
    display: none;
    place-items: center;
    align-content: center;
    gap: 2.2cqw;
    min-height: 86cqw;
    color: var(--gallery-accent);
    background: var(--gallery-paper);
}

.gallery-category-loader__mark {
    width: 7.2cqw;
    aspect-ratio: 1;
    border: 0.75cqw solid color-mix(in srgb, currentColor 24%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: galleryCategoryLoadingSpin 760ms linear infinite;
}

.gallery-category-loader__text {
    font-family: "PixelMplus10Subset", "Yu Gothic UI", sans-serif;
    font-size: 3.4cqw;
    letter-spacing: 0.16em;
}

html[data-gallery-initial-category="illustration"],
html[data-gallery-initial-category="illustration"] body {
    --site-theme-color: #fff;
    --site-theme-contrast: #000;
    background: #000;
}

html[data-gallery-initial-category="illustration"] .gallery-page {
    color: #fff;
    background: #000;
}

.gallery-page.is-category-loading .gallery-category-loader,
html[data-gallery-initial-category="illustration"] .gallery-category-loader,
html[data-gallery-initial-category="works"] .gallery-category-loader {
    display: grid;
}

.gallery-page.is-category-loading > .live2d-gallery,
.gallery-page.is-category-loading > .illustration-gallery,
.gallery-page.is-category-loading > .works-gallery,
.gallery-page.is-category-loading > .gallery-empty,
html[data-gallery-initial-category="illustration"] .gallery-page > .live2d-gallery,
html[data-gallery-initial-category="illustration"] .gallery-page > .illustration-gallery,
html[data-gallery-initial-category="illustration"] .gallery-page > .works-gallery,
html[data-gallery-initial-category="works"] .gallery-page > .live2d-gallery,
html[data-gallery-initial-category="works"] .gallery-page > .illustration-gallery,
html[data-gallery-initial-category="works"] .gallery-page > .works-gallery {
    display: none !important;
}

html[data-gallery-initial-category="illustration"] .gallery-tabs__button[data-gallery-tab="live2d"],
html[data-gallery-initial-category="works"] .gallery-tabs__button[data-gallery-tab="live2d"] {
    color: var(--gallery-accent);
    background: transparent;
}

html[data-gallery-initial-category="illustration"] .gallery-tabs__button[data-gallery-tab="illustration"],
html[data-gallery-initial-category="works"] .gallery-tabs__button[data-gallery-tab="works"] {
    color: #fff;
    background: var(--gallery-accent);
}

@keyframes galleryCategoryLoadingSpin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   Models heading
   ========================================================= */

.models-heading {
    position: relative;
    z-index: 40;
    display: flex;
    justify-content: center;
    margin-top: 6.4cqw;
}

.models-heading__button {
    padding: 0;
    color: #2a2a2a;
    background: transparent;
    border: 0;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 9cqw;
    font-weight: 600;
    line-height: 1;
    cursor: default;
}

.gallery-page[data-gallery-view="detail"] .models-heading__button {
    cursor: pointer;
}

/* =========================================================
   Model list cards

   960pxカンプを基準に、カード全体を単一の座標系で管理する。
   各UIは文字量や画像サイズから位置を決めず、Unknownカードから
   取得した固定座標へ配置する。
   ========================================================= */

.model-grid {
    --model-column-count: 3;

    display: grid;
    grid-template-columns: repeat(var(--model-column-count), 31.1cqw);
    column-gap: 0.26cqw;
    row-gap: 4.17cqw;
    padding: 5.5cqw 0 2cqw 4.58cqw;
}

.model-grid[hidden] {
    display: none;
}

.model-grid__loading {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2.2cqw;
    min-height: 72cqw;
    color: var(--gallery-accent);
}

.model-grid__loading-mark {
    width: 7.2cqw;
    aspect-ratio: 1;
    border: 0.75cqw solid color-mix(in srgb, currentColor 24%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: modelGridLoadingSpin 760ms linear infinite;
}

.model-grid__loading-text {
    font-family: "PixelMplus10Subset", "Yu Gothic UI", sans-serif;
    font-size: 3.4cqw;
    letter-spacing: 0.16em;
}

@keyframes modelGridLoadingSpin {
    to { transform: rotate(360deg); }
}

.model-card {
    --model-color: #a1a1a1;

    /* カンプ上のカード外形 */
    --card-width: 31.1cqw;
    --card-height: 81.7cqw;

    /* Unknownカードから取得したUI座標 */
    --card-axis-width: 1.48cqw;
    --card-axis-height: 39.1cqw;
    --card-lower-top: 39.05cqw;
    --card-name-height: 4.85cqw;

    /* 四角エリアに対する名前ボックスの右方向へのずれ */

    --card-name-shift-x: 1.54cqw;
    --card-name-left: calc(
        var(--card-axis-width) + var(--card-name-shift-x)
    );

    --card-surname-left: 0.4cqw;
    --card-surname-top: 0.85cqw;
    --card-surname-size: 9cqw;

    --card-given-left: 1.9cqw;
    --card-given-top: 39.25cqw;
    --card-given-size: 9cqw;

    /*
       face/body共通の基準値。
       まずここで全モデルを大まかに合わせ、JS側は差分だけを上乗せする。
    */
    --card-media-base-width: 350%;
    --card-media-base-left: -115%;
    --card-media-base-top: -2%;
    --card-media-adjust-width: 0%;
    --card-media-adjust-left: 0%;
    --card-media-adjust-top: 0%;
    --card-media-width: calc(var(--card-media-base-width) + var(--card-media-adjust-width));
    --card-media-left: calc(var(--card-media-base-left) + var(--card-media-adjust-left));
    --card-media-top: calc(var(--card-media-base-top) + var(--card-media-adjust-top));
    --card-filter: grayscale(1) contrast(1.08);
    /* 人物をカード上端より上へ見せる共通クリップ余白 */
    --card-media-overflow-top: 15cqw;
    --card-media-overflow-left: 1.2cqw;

    --card-face-open-top: 80cqw;
    --card-face-open-left: 80cqw;

    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    min-width: 0;
    padding: 0;
    overflow: visible;
    color: var(--model-color);
    background: transparent;
    border: 0;
    cursor: pointer;
    isolation: isolate;
}

.model-card:focus-visible {
    outline: 0.5cqw solid var(--model-color);
    outline-offset: 0.8cqw;
}

.model-card.is-character-exiting {
    pointer-events: none;
}

.model-card.is-coming-soon,
.model-card.is-unknown {
    cursor: default;
}

/* 姓の左線。文字要素から分離し、文字幅が変わっても動かさない */
.model-card__surname-line {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--card-axis-width);
    height: var(--card-axis-height);
    background: var(--model-color);
}

/* Latin文字を縦組みせず、横組みの単語全体を90度回転する */
.model-card__surname,
.model-card__given-name {
    position: absolute;
    margin: 0;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(90deg);
    transform-origin: 0 0;
    pointer-events: none;
}

.model-card__surname {
    z-index: 0;
    top: var(--card-surname-top);
    left: calc(var(--card-surname-left) + var(--card-surname-size));
    color: var(--model-color);
    font-size: var(--card-surname-size);
}

.model-card__color-block {
    position: absolute;
    z-index: 0;
    top: var(--card-lower-top);
    right: var(--card-name-shift-x);
    bottom: var(--card-name-height);
    left: var(--card-axis-width);
    background: var(--model-color);
}

/*
   右端・下端のクリップ領域は固定し、人物だけを内部で移動する。
   これによりホバー・一覧→詳細遷移中も右端の切り位置が動かない。
*/
.model-card__media-viewport {
    position: absolute;
    z-index: 2;
    top: calc(var(--card-media-overflow-top) * -1);
    right: var(--card-name-shift-x);
    bottom: var(--card-name-height);
    left: calc(var(--card-media-overflow-left) * -1);
    overflow: visible;
    clip-path: none;
    contain: none;
    pointer-events: none;
}

.model-card__media-set {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.model-card.is-media-ready .model-card__media-set {
    opacity: 1;
}

.model-card__media-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.model-card__media-layer--body {
    z-index: 1;
    clip-path: inset(
        0
        0
        0
        calc(var(--card-name-left) + var(--card-media-overflow-left))
    );
}

.model-card__media-layer--face {
    z-index: 2;
    overflow: visible;

    /*
       顔だけ上・左を開放。
       右・下はmedia-layerの境界でクリップする。
    */
    clip-path: inset(
        calc(var(--card-face-open-top) * -1)
        0
        0
        calc(var(--card-face-open-left) * -1)
    );
}

.model-card__media-layer img {
    position: absolute;
    top: var(--card-media-top);
    left: var(--card-media-left);
    width: var(--card-media-width);
    max-width: none;
    height: auto;
    opacity: 1;
    filter: var(--card-filter);
    transform: translateX(0);
    transition:
        opacity 420ms ease,
        transform 820ms var(--gallery-ease);
    will-change: opacity, transform;
}

/* クリップ領域は固定し、face/body画像だけを同じ距離だけ動かす */
.model-card:hover .model-card__media-layer img,
.model-card:focus-visible .model-card__media-layer img {
    transform: translateX(-1.2cqw);
}

.model-card.is-character-exiting .model-card__media-layer img {
    opacity: 0;
    transform: translateX(165%);
}

.model-card.is-coming-soon .model-card__media-layer img {
    filter: brightness(0);
}

.model-card__given-name {
    z-index: 4;
    top: var(--card-given-top);
    left: calc(var(--card-given-left) + var(--card-given-size));
    color: #fff;
    font-size: var(--card-given-size);
}

.model-card__name-box {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: var(--card-name-left);
    display: flex;
    align-items: center;
    height: var(--card-name-height);
    padding: 0.32cqw 1.3cqw 0.12cqw;
    color: #fff;
    background: var(--model-color);
    font-family: "Yu Gothic UI", "Yu Gothic", sans-serif;
    font-size: 3.08cqw;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.model-card.is-unknown .model-card__name-box,
.model-card.is-unknown .model-card__given-name,
.model-card.is-unknown .model-card__media-viewport {
    display: none;
}

.model-card.is-unknown .model-card__surname,
.model-card.is-unknown .model-card__surname-line {
    color: #a1a1a1;
}

.model-card.is-unknown .model-card__surname-line,
.model-card.is-unknown .model-card__color-block {
    background: #a1a1a1;
}

.model-card.is-unknown .model-card__color-block {
    bottom: 0;
}

/* =========================================================
   Mini cards
   ========================================================= */

.model-detail {
    position: relative;
    margin-top: -1.7cqw;
}

.model-mini-grid {
    position: relative;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15cqw;
    padding: 3.2cqw 4cqw 0;
}

.model-mini-card {
    --model-color: #a1a1a1;

    /* ミニカードも共通基準＋モデル別差分で調整する */
    --mini-media-base-width: 245%;
    /* 右端基準ではなく、素材の正中線をカード中央へ合わせる */
    --mini-media-base-x: 0cqw;
    --mini-media-base-top: -32cqw;
    --mini-media-adjust-width: 0%;
    --mini-media-adjust-x: 0cqw;
    --mini-media-adjust-y: 0cqw;

    position: relative;
    height: 15cqw;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 1.8cqw;
    cursor: pointer;
    isolation: isolate;
}

.model-mini-card::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    background: var(--model-color);
    border-radius: inherit;
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}

.model-mini-card:focus-visible {
    outline: 0.45cqw solid #000;
    outline-offset: 0.35cqw;
}

/*
   各文字を90度回転し、正位置では姓を上詰め、名を下詰めにする。
   姓は人物の奥、名は人物の手前へ分ける。
*/
.model-mini-card__initials {
    display: contents;
}

.model-mini-card__initial-surname,
.model-mini-card__initial-given {
    position: absolute;
    left: 3.2cqw;
    display: block;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 6cqw;
    font-weight: 600;
    line-height: 0.8;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    pointer-events: none;
}

.model-mini-card__initial-surname {
    z-index: 1;
    top: 3.3cqw;
    color: var(--model-color);
}

.model-mini-card__initial-given {
    z-index: 4;
    top: 11.7cqw;
    color: #fff;
}

/*
   カード自体は固定された「窓」。
   人物素材は窓より大きいまま保持し、media-setだけを左右へ移動する。
   そのため、通常時に窓外へ隠れている人物部分もスライド中に窓内へ現れる。
*/
.model-mini-card__media-motion {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.model-mini-card__media-set {
    --mini-slide-distance: 190%;

    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(0);
    will-change: transform;
    pointer-events: none;
}

.model-mini-card.is-media-ready .model-mini-card__media-set {
    opacity: 1;
}

.model-mini-card__media-layer {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.model-mini-card__media-layer--body {
    z-index: 1;
}

.model-mini-card__media-layer--face {
    z-index: 2;
}

.model-mini-card__media-layer img {
    position: absolute;
    top: calc(var(--mini-media-base-top) + var(--mini-media-adjust-y));
    left: calc(50% + var(--mini-media-base-x) + var(--mini-media-adjust-x));
    width: calc(var(--mini-media-base-width) + var(--mini-media-adjust-width));
    max-width: none;
    height: auto;
    filter: grayscale(1) contrast(1.08);
    transform: translateX(-50%);
    transform-origin: 50% 0;
    pointer-events: none;
}

/* 選択中の人物は、最後に退出した側の窓外へ完全に待機させる。 */
.model-mini-card.is-active.is-parked-left .model-mini-card__media-set {
    transform: translateX(calc(var(--mini-slide-distance) * -1));
}

.model-mini-card.is-active.is-parked-right .model-mini-card__media-set {
    transform: translateX(var(--mini-slide-distance));
}

.model-mini-card.is-exiting-left .model-mini-card__media-set {
    animation: miniPersonExitLeft 780ms var(--gallery-ease) both;
}

.model-mini-card.is-exiting-right .model-mini-card__media-set {
    animation: miniPersonExitRight 780ms var(--gallery-ease) both;
}

.model-mini-card.is-returning-from-left .model-mini-card__media-set {
    animation: miniPersonReturnLeft 780ms var(--gallery-ease) both;
}

.model-mini-card.is-returning-from-right .model-mini-card__media-set {
    animation: miniPersonReturnRight 780ms var(--gallery-ease) both;
}

@keyframes miniPersonExitLeft {
    from { transform: translateX(0); }
    to { transform: translateX(calc(var(--mini-slide-distance) * -1)); }
}

@keyframes miniPersonExitRight {
    from { transform: translateX(0); }
    to { transform: translateX(var(--mini-slide-distance)); }
}

@keyframes miniPersonReturnLeft {
    from { transform: translateX(calc(var(--mini-slide-distance) * -1)); }
    to { transform: translateX(0); }
}

@keyframes miniPersonReturnRight {
    from { transform: translateX(var(--mini-slide-distance)); }
    to { transform: translateX(0); }
}

.model-detail.is-ui-counter-left .model-controls,
.model-detail.is-ui-counter-left .model-profile {
    animation: uiCounterLeft 340ms ease both;
}

.model-detail.is-ui-counter-right .model-controls,
.model-detail.is-ui-counter-right .model-profile {
    animation: uiCounterRight 340ms ease both;
}

@keyframes uiCounterLeft {
    0%, 100% { opacity: 1; transform: translateX(0); }
    46% { opacity: 0.82; transform: translateX(-0.75cqw); }
}

@keyframes uiCounterRight {
    0%, 100% { opacity: 1; transform: translateX(0); }
    46% { opacity: 0.82; transform: translateX(0.75cqw); }
}

/* =========================================================
   Detail stage and shared layers
   ========================================================= */

.model-detail__body {
    --model-color: #7018b6;
    --model-rgb: 112 24 182;
    position: relative;
    min-height: 150cqw;
    margin-top: 7.2cqw;
    /* 詳細メディアだけ上方向へはみ出せるようにする */
    overflow: visible;
    color: #fff;
    background: #fff;
}

/* 画像要素より手前、プロフィールUIより奥。
   prof-cover画像は使わず、モデル色からCSSで生成する。 */
.model-detail__profile-gradient {
    position: absolute;
    z-index: 12;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgb(var(--model-rgb) / 0) 0,
            rgb(var(--model-rgb) / 0.04) 85cqw,
            rgb(var(--model-rgb) / 0.28) 100cqw,
            rgb(var(--model-rgb) / 0.88) 120cqw,
            var(--model-color) 177cqw,
            var(--model-color) 100%
        );
    pointer-events: none;
}

.model-detail__side-bands {
    position: fixed;
    z-index: 16;
    top: var(--detail-side-band-top, 0px);
    right: max(0px, calc((100vw - min(100vw, var(--gallery-width))) / 2));
    bottom: 0;
    left: max(0px, calc((100vw - min(100vw, var(--gallery-width))) / 2));
    background:
        linear-gradient(
            to right,
            rgb(255 255 255 / 20%) 0 3.5%,
            transparent 3.5% 96.5%,
            rgb(255 255 255 / 20%) 96.5% 100%
        );
    pointer-events: none;
}

.model-media-stage {
    /*
       詳細メディア共通基準。
       ここを直すと全モデルが同時に動き、各モデルの差分はgallery.jsの
       mediaAdjustだけで上乗せされる。
    */
    /* 上側へ90cqw延長したクリップ領域。セクション境界では切らない。 */
    --detail-media-overflow-top: 90cqw;
    --detail-media-visible-height: 190cqw;
    --detail-media-origin-y: var(--detail-media-overflow-top);

    /*
       model素材は全モデル共通の縮尺・上端・正中線で作られている。
       横幅指定ではなく自然サイズへのscaleで揃え、キャンバス幅差の影響を受けない。
    */
    /*
       960pxカンプ時の基準倍率。実表示ではgallery.jsがコンテナ幅比を掛け、
       --model-*-responsive-scaleへ反映する。位置・倍率とも同じコンテナに追従する。
    */
    --model-close-base-scale: 1.25;
    --model-close-responsive-scale: var(--model-close-base-scale);
    --model-close-base-x: 0cqw;
    --model-close-base-y: -48cqw;
    --model-close-adjust-scale: 0;
    --model-close-adjust-x: 0cqw;
    --model-close-adjust-y: 0cqw;

    --model-full-base-scale: 0.6;
    --model-full-responsive-scale: var(--model-full-base-scale);
    --model-full-base-x: 0cqw;
    --model-full-base-y: -20cqw;
    --model-full-adjust-scale: 0;
    --model-full-adjust-x: 0cqw;
    --model-full-adjust-y: 0cqw;


    --logo-bg-base-width: 200cqw;
    --logo-bg-base-x: -90cqw;
    --logo-bg-base-y: -40cqw;
    --logo-bg-adjust-width: 0cqw;
    --logo-bg-adjust-x: 0cqw;
    --logo-bg-adjust-y: 0cqw;

    --logo-focus-base-width: 100cqw;
    --logo-focus-base-x: 0cqw;
    --logo-focus-base-y: 0cqw;
    --logo-focus-adjust-width: 0cqw;
    --logo-focus-adjust-x: 0cqw;
    --logo-focus-adjust-y: 0cqw;

    /* ロゴ再生のタップ領域。ロゴ画像全体より狭くし、個別差分もCSSで追加できる。 */
    --logo-replay-hit-width: 54%;
    --logo-replay-hit-height: 54%;
    --logo-replay-hit-x: 50%;
    --logo-replay-hit-y: 50%;

    --kv-close-base-width: 440cqw;
    --kv-close-base-x: 5cqw;
    --kv-close-base-y: -80cqw;
    --kv-close-adjust-width: 0cqw;
    --kv-close-adjust-x: 0cqw;
    --kv-close-adjust-y: 0cqw;

    --kv-full-base-width: 100cqw;
    --kv-full-base-x: 0cqw;
    --kv-full-base-y: 1cqw;
    --kv-full-adjust-width: 0cqw;
    --kv-full-adjust-x: 0cqw;
    --kv-full-adjust-y: 0cqw;

    --view-close-base-width: 153cqw;
    --view-close-base-x: 0cqw;
    --view-close-base-y: 9cqw;
    --view-close-adjust-width: 0cqw;
    --view-close-adjust-x: 0cqw;
    --view-close-adjust-y: 0cqw;

    --view-full-base-width: 84cqw;
    --view-full-base-x: 5cqw;
    --view-full-base-y: 18cqw;
    --view-full-adjust-width: 0cqw;
    --view-full-adjust-x: 0cqw;
    --view-full-adjust-y: 0cqw;

    position: absolute;
    z-index: auto;
    top: calc(var(--detail-media-overflow-top) * -1);
    right: 0;
    left: 0;
    height: calc(var(--detail-media-visible-height) + var(--detail-media-overflow-top));
    /* 上へ延長した箱の内部で左右・上下をクリップする */
    overflow: hidden;
    overflow: clip;
    pointer-events: none;
}

.model-media__scene-host {
    position: absolute;
    z-index: auto;
    inset: 0;
    overflow: hidden;
    overflow: clip;
}

.model-media__scene {
    position: absolute;
    z-index: 3;
    inset: 0;
    overflow: hidden;
    overflow: clip;
    opacity: 1;
}

/* model全体表示だけをグラデーション(z-index:12)より手前へ出す。 */
.model-media__scene[data-content="model"].is-full {
    z-index: 13;
}

.model-media__moving,
.model-media__ambient {
    will-change: auto;
}

.model-media__scene.is-entering-from-right .model-media__moving,
.model-media__scene.is-entering-from-left .model-media__moving,
.model-media__scene.is-exiting-left .model-media__moving,
.model-media__scene.is-exiting-right .model-media__moving,
.model-media__scene.is-entering-from-right .model-media__ambient,
.model-media__scene.is-entering-from-left .model-media__ambient,
.model-media__scene.is-exiting-left .model-media__ambient,
.model-media__scene.is-exiting-right .model-media__ambient {
    will-change: opacity, transform;
}

.model-media__moving--model,
.model-media__moving--kv,
.model-media__moving--logo {
    position: absolute;
    inset: 0;
}

.model-media__scene.is-entering-from-right .model-media__moving {
    animation: mediaEnterRight 520ms var(--gallery-ease) both;
}

.model-media__scene.is-entering-from-left .model-media__moving {
    animation: mediaEnterLeft 520ms var(--gallery-ease) both;
}

.model-media__scene.is-exiting-left .model-media__moving {
    opacity: 0;
    transform: translateX(-165%);
    transition: opacity 260ms ease, transform 360ms var(--gallery-ease);
}

.model-media__scene.is-exiting-right .model-media__moving {
    opacity: 0;
    transform: translateX(165%);
    transition: opacity 260ms ease, transform 360ms var(--gallery-ease);
}

/* 背景ロゴ・カバー等は人物と同じ距離を移動させず、
   逆方向へわずかに動かしながらフェードする。 */
.model-media__scene.is-entering-from-right .model-media__ambient {
    animation: ambientEnterLeft 320ms ease both;
}

.model-media__scene.is-entering-from-left .model-media__ambient {
    animation: ambientEnterRight 320ms ease both;
}

.model-media__scene.is-exiting-left .model-media__ambient {
    opacity: 0;
    transform: translateX(1.1cqw);
    transition: opacity 180ms ease, transform 260ms ease;
}

.model-media__scene.is-exiting-right .model-media__ambient {
    opacity: 0;
    transform: translateX(-1.1cqw);
    transition: opacity 180ms ease, transform 260ms ease;
}

@keyframes mediaEnterRight {
    from { opacity: 0; transform: translateX(165%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes mediaEnterLeft {
    from { opacity: 0; transform: translateX(-165%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes ambientEnterLeft {
    from { opacity: 0; transform: translateX(-1.1cqw); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes ambientEnterRight {
    from { opacity: 0; transform: translateX(1.1cqw); }
    to { opacity: 1; transform: translateX(0); }
}

.model-media__kv-layer,
.model-media__view-image {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    transform-origin: center;
}

/*
   modelは「配置・倍率」と「画像中央合わせ」を別要素へ分離する。

   anchor:
   - 詳細ステージ内のX/Y座標
   - 960pxカンプ基準の倍率
   - Gallery幅に連動するレスポンシブ倍率

   image:
   - 元画像の正中線をanchorへ合わせるtranslateX(-50%)だけ

   これにより、現在調整済みのbase/adjust値を維持したまま、
   画面幅変更時にもmodel・logo・coverが同じcqw座標系で追従する。
*/
.model-media__model-anchor {
    position: absolute;
    top: calc(
        var(--detail-media-origin-y) +
        var(--model-close-base-y) +
        var(--model-close-adjust-y)
    );
    left: calc(50% + var(--model-close-base-x) + var(--model-close-adjust-x));
    width: 0;
    height: 0;
    transform: scale(var(--model-close-responsive-scale));
    transform-origin: 0 0;
}

.model-media__model-anchor--main {
    z-index: 2;
}

.model-media__scene.is-full .model-media__model-anchor {
    top: calc(
        var(--detail-media-origin-y) +
        var(--model-full-base-y) +
        var(--model-full-adjust-y)
    );
    left: calc(50% + var(--model-full-base-x) + var(--model-full-adjust-x));
    transform: scale(var(--model-full-responsive-scale));
}

.model-media__model {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    transform: translate3d(-50%, 0, 0);
    transform-origin: 50% 0;
}

.model-media__model-layer {
    opacity: 0;
    transition: opacity 110ms linear;
    pointer-events: none;
}

.model-media__model-layer.is-active {
    opacity: 1;
}

.model-media__persistent-logo {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: visible;
    opacity: 1;
    transform: translateX(0);
    pointer-events: none;
    transition: opacity 280ms ease, transform 520ms var(--gallery-ease);
}

.model-media-stage.is-logo-focused .model-media__persistent-logo {
    z-index: 5;
    pointer-events: auto;
}

.model-media__persistent-logo[hidden] {
    display: none;
}

/* KV・設定画では左へはける。model／logo間では同じ要素を移動する。 */
.model-media-stage.is-content-kv .model-media__persistent-logo,
.model-media-stage.is-content-view .model-media__persistent-logo {
    opacity: 0;
    transform: translateX(-18cqw);
}

.model-media__logo-anchor {
    position: absolute;
    z-index: 0;
    top: calc(
        var(--detail-media-origin-y) +
        var(--logo-bg-base-y) +
        var(--logo-bg-adjust-y)
    );
    left: calc(var(--logo-bg-base-x) + var(--logo-bg-adjust-x));
    display: block;
    width: calc(var(--logo-bg-base-width) + var(--logo-bg-adjust-width));
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: visible;
    appearance: none;
    background: transparent;
    border: 0;
    transform: translateX(0);
    transform-origin: center;
    pointer-events: none;
    transition:
        top 520ms var(--gallery-ease),
        left 520ms var(--gallery-ease),
        width 520ms var(--gallery-ease),
        transform 520ms var(--gallery-ease);
    will-change: top, left, width, transform;
}

.model-media__logo-anchor.is-transition-measure {
    top: calc(
        var(--detail-media-origin-y) +
        var(--logo-bg-base-y) +
        var(--logo-bg-adjust-y)
    ) !important;
    left: calc(var(--logo-bg-base-x) + var(--logo-bg-adjust-x)) !important;
    width: calc(var(--logo-bg-base-width) + var(--logo-bg-adjust-width)) !important;
    visibility: hidden !important;
    transform: none !important;
    transition: none !important;
    pointer-events: none !important;
}

.model-media__logo-tint,
.model-media__logo-original {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 260ms ease;
}

.model-media__logo-tint {
    background: var(--model-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    opacity: 0.95;
}

.model-media__logo-original {
    opacity: 0;
}

.model-media-stage.is-logo-focused .model-media__logo-anchor {
    top: calc(
        var(--detail-media-origin-y) +
        var(--logo-focus-base-y) +
        var(--logo-focus-adjust-y)
    );
    left: calc(50% + var(--logo-focus-base-x) + var(--logo-focus-adjust-x));
    width: calc(var(--logo-focus-base-width) + var(--logo-focus-adjust-width));
    transform: translateX(-52%);
}

.model-media__logo-replay-hit {
    position: absolute;
    z-index: 3;
    top: var(--logo-replay-hit-y);
    left: var(--logo-replay-hit-x);
    width: var(--logo-replay-hit-width);
    height: var(--logo-replay-hit-height);
    padding: 0;
    background: transparent;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    cursor: pointer;
}

.model-media__logo-replay-hit:focus-visible {
    outline: 0.45cqw solid var(--model-color);
    outline-offset: 0.45cqw;
}

.model-media-stage.is-logo-focused .model-media__logo-replay-hit:not(:disabled) {
    pointer-events: auto;
}

.model-media-stage.is-logo-focused .model-media__logo-tint {
    opacity: 0;
}

.model-media-stage.is-logo-focused .model-media__logo-original {
    opacity: 1;
}

.model-media-stage.is-media-full:not(.is-logo-focused) .model-media__logo-anchor {
    animation: mediaBreath 5.2s ease-in-out infinite;
}

.model-media__logo-cover {
    /* 背景ロゴとは独立し、同じ詳細ステージ座標内でミニカード下端付近へ配置する */
    position: absolute;
    z-index: 2;
    top: calc(var(--detail-media-origin-y) - 2.5cqw);
    left: 50%;
    width: 100%;
    height: 66cqw;
    background: url("../images/gallery/live2d/common/logo-cover.webp") center / contain no-repeat;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 220ms ease;
}

.model-media-stage.is-logo-focused .model-media__logo-cover,
.model-media-stage.is-content-kv .model-media__logo-cover,
.model-media-stage.is-content-view .model-media__logo-cover {
    opacity: 0;
}

.model-media__kv-layer--bg { z-index: 0; }
.model-media__kv-layer--main { z-index: 1; }
.model-media__kv-layer--fg { z-index: 2; }

.model-media__kv-layer--bg,
.model-media__kv-layer--fg {
    opacity: 1;
    transition: opacity 360ms ease;
}

.model-media__kv-group.is-background-hidden .model-media__kv-layer--bg,
.model-media__kv-group.is-background-hidden .model-media__kv-layer--fg {
    opacity: 0;
}

.model-media__kv-layer {
    top: calc(
        var(--detail-media-origin-y) +
        var(--kv-close-base-y) +
        var(--kv-close-adjust-y)
    );
    left: calc(50% + var(--kv-close-base-x) + var(--kv-close-adjust-x));
    width: calc(var(--kv-close-base-width) + var(--kv-close-adjust-width));
    transform: translateX(-50%);
    image-rendering: auto;
}

.model-media__scene.is-full .model-media__kv-layer {
    top: calc(
        var(--detail-media-origin-y) +
        var(--kv-full-base-y) +
        var(--kv-full-adjust-y)
    );
    left: calc(50% + var(--kv-full-base-x) + var(--kv-full-adjust-x));
    width: calc(var(--kv-full-base-width) + var(--kv-full-adjust-width));
}

.model-media__scene:not(.is-full) .model-media__kv-group {
    animation: kvBreath 5.4s ease-in-out infinite;
}

.model-media__kv-group {
    position: absolute;
    inset: 0;
}

@keyframes kvBreath {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -1.15cqw; }
}

.model-media__view-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    cursor: default;
    pointer-events: auto;
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-y: auto;
}

.model-media__view-viewport.is-draggable {
    cursor: grab;
    touch-action: none;
    overscroll-behavior: contain;
}

.model-media__view-viewport.is-dragging {
    cursor: grabbing;
}

.model-media__view-image {
    user-select: none;
    -webkit-user-drag: none;
}

.model-media__view-image {
    top: calc(
        var(--detail-media-origin-y) +
        var(--view-close-base-y) +
        var(--view-close-adjust-y)
    );
    left: calc(var(--view-close-base-x) + var(--view-close-adjust-x));
    width: calc(var(--view-close-base-width) + var(--view-close-adjust-width));
    transform-origin: center;
    will-change: transform;
}

.model-media__scene.is-full .model-media__view-image {
    top: calc(
        var(--detail-media-origin-y) +
        var(--view-full-base-y) +
        var(--view-full-adjust-y)
    );
    left: calc(var(--view-full-base-x) + var(--view-full-adjust-x));
    width: calc(var(--view-full-base-width) + var(--view-full-adjust-width));
}

.model-media__view-tools {
    position: absolute;
    z-index: 8;
    top: calc(var(--detail-media-origin-y) + 0.5cqw);
    right: 15cqw;
    bottom: auto;
    left: 5cqw;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8cqw;
    align-items: center;
    gap: 2cqw;
    pointer-events: auto;
}

.model-media__view-range {
    width: 100%;
    accent-color: var(--model-color);
}

.model-media__magnify {
    position: relative;
    width: 7.2cqw;
    aspect-ratio: 1 / 1;
    padding: 0;
    color: var(--model-color);
    background: #fff;
    border: 0.55cqw solid currentColor;
    border-radius: 50%;
    cursor: pointer;
}

.model-media__magnify::before {
    position: absolute;
    top: 1.35cqw;
    left: 1.35cqw;
    width: 2.7cqw;
    aspect-ratio: 1 / 1;
    content: "";
    border: 0.5cqw solid currentColor;
    border-radius: 50%;
}

.model-media__magnify::after {
    position: absolute;
    top: 4.1cqw;
    left: 4.25cqw;
    width: 2.1cqw;
    height: 0.5cqw;
    content: "";
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}

.model-media__magnify.is-active {
    color: #fff;
    background: var(--model-color);
    border-color: #fff;
}

@keyframes mediaBreath {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -1.15cqw; }
}

/* =========================================================
   Control rail
   ========================================================= */

.model-controls {
    position: absolute;
    z-index: 30;
    top: 8.3cqw;
    right: 0;
    width: 13.5cqw;
    color: var(--model-color);
    transition: transform 420ms var(--gallery-ease);
}

.model-controls.is-collapsed {
    transform: translateX(calc(100% - 4.2cqw));
}

.model-controls__handle {
    display: flex;
    align-items: center;
    width: 100%;
    height: 4.1cqw;
    padding: 0 0.8cqw;
    color: #fff;
    background: var(--model-color);
    border: 0;
    font-family: sans-serif;
    font-size: 2.8cqw;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.model-controls.is-collapsed .model-controls__handle {
    justify-content: flex-start;
}

.model-controls__groups {
    position: relative;
    padding: 1.6cqw 1.35cqw 2cqw;
    background: transparent;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 260ms ease, transform 420ms var(--gallery-ease);
}

.model-controls.is-collapsed .model-controls__groups {
    opacity: 0;
    transform: translateX(1.8cqw);
    pointer-events: none;
}

.model-controls__group {
    display: grid;
    gap: 1.7cqw;
}

.model-controls__group + .model-controls__group {
    margin-top: 8.5cqw;
}

.model-controls__group:empty {
    display: none;
}

.model-controls__group--operation:empty + .model-controls__group--selection {
    margin-top: 0;
}

.model-control-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    color: var(--model-color);
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.model-control-button:focus-visible {
    outline: 0.45cqw solid currentColor;
    outline-offset: 0.35cqw;
}

.model-control-button:focus:not(:focus-visible) {
    outline: 0;
}

.model-control-button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.model-control-button__bg,
.model-control-button__icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.model-control-button__bg {
    object-fit: contain;
    opacity: 0.7;
}

/*
   前景SVGだけをマスクとして使用し、テーマ色そのものを描画する。
   mask-imageのURLはgallery.jsから各要素へ直接指定する。
*/
.model-control-button__icon {
    z-index: 1;
    display: block;
    background-color: var(--model-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.model-control-button[data-control="change"] .model-control-button__icon {
    transform: rotate(var(--change-rotation, 0deg));
    transition: transform 420ms var(--gallery-ease);
}

.model-control-button.is-selected {
    filter: drop-shadow(0 0 0.8cqw rgb(var(--model-rgb) / 45%));
}

.model-mini-grid.is-action-busy .model-mini-card,
.model-controls.is-action-busy .model-control-button:not(.model-controls__handle) {
    pointer-events: none;
}

.model-mini-card.is-pending::after,
.model-control-button.is-pending::after {
    position: absolute;
    z-index: 12;
    content: "";
    width: 3.4cqw;
    aspect-ratio: 1;
    border: 0.55cqw solid rgb(255 255 255 / 42%);
    border-top-color: #fff;
    border-radius: 50%;
    animation: modelActionSpin 620ms linear infinite;
    pointer-events: none;
}

.model-mini-card.is-pending::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.model-control-button.is-pending::after {
    top: 50%;
    left: 50%;
    width: 3cqw;
    transform: translate(-50%, -50%);
}

.model-mini-card.is-pending {
    filter: brightness(0.92);
}

.model-control-button.is-pending .model-control-button__icon,
.model-control-button.is-pending .model-control-button__bg {
    opacity: 0.45;
}

@keyframes modelActionSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =========================================================
   Profile
   ========================================================= */

.model-profile {
    /* プロフィール全体の縦位置と、名前だけの横移動を分離する。 */
    --profile-start-y: 112cqw;
    --profile-full-start-y: 184cqw;
    --profile-side-padding: 5.6cqw;
    --profile-name-shift-x: 3cqw;
    --profile-rule-thickness: 2px;

    position: relative;
    z-index: 22;
    padding: var(--profile-start-y) var(--profile-side-padding) 10cqw;
    color: #fff;
    pointer-events: none;
    transition: padding-top 620ms var(--gallery-ease);
}

.model-profile > * {
    pointer-events: auto;
}

.model-detail__body.is-model-full .model-profile {
    padding-top: var(--profile-full-start-y);
}

.model-profile__name-block {
    margin-right: 2cqw;
}

.model-profile__name {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0.6cqw var(--profile-name-shift-x);
    border-bottom: 0;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 10cqw;
    font-weight: 600;
    line-height: 0.8;
}

/* 下線は固定。名前のpadding-leftを変えても始点・終点は動かさない。 */
.model-profile__name::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: calc(var(--profile-side-padding) * -1);
    height: var(--profile-rule-thickness);
    content: "";
    background: #fff;
}

.model-profile__reading {
    box-sizing: border-box;
    margin: 0.4cqw 0 0;
    padding-left: var(--profile-name-shift-x);
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 3cqw;
    font-weight: 250;
    letter-spacing: 0.06em;
}

.model-profile__facts {
    /* 項目名／短い罫線／内容を固定幅で分離する。 */
    --fact-block-width: 60cqw;
    --fact-label-width: 11cqw;
    --fact-line-width: 9cqw;
    --fact-value-width: 30cqw;
    --fact-column-gap: 2.5cqw;

    width: var(--fact-block-width);
    margin: 10cqw auto 0;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 3.4cqw;
    font-weight: 600;
    white-space: nowrap;
}

.model-profile__fact {
    display: grid;
    grid-template-columns:
        var(--fact-label-width)
        var(--fact-line-width)
        var(--fact-value-width);
    justify-content: center;
    align-items: center;
    column-gap: var(--fact-column-gap);
    min-height: 5.7cqw;
    white-space: nowrap;
}

.model-profile__fact > span:first-child,
.model-profile__fact > span:last-child {
    justify-self: stretch;
    text-align: right;
    white-space: nowrap;
}

.model-profile__fact-line {
    width: 100%;
    height: var(--profile-rule-thickness);
    margin: 0;
    background: rgb(255 255 255 / 74%);
}

.model-profile__details-toggle {
    margin-top: 1.2cqw;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    font-size: 3.4cqw;
    cursor: pointer;
}

.model-profile__details-shell {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-1cqw);
    transition:
        grid-template-rows 420ms var(--gallery-ease),
        margin-top 420ms var(--gallery-ease),
        opacity 220ms ease,
        transform 420ms var(--gallery-ease);
}

.model-profile__details-shell.is-open {
    grid-template-rows: 1fr;
    margin-top: 2.6cqw;
    opacity: 1;
    transform: translateY(0);
}

.model-profile__details {
    display: grid;
    min-height: 0;
    overflow: hidden;
    gap: 1.2cqw;
}

.model-profile__detail-row {
    display: grid;
    grid-template-columns: 18cqw minmax(0, 1fr);
    gap: 2cqw;
    font-size: 2.8cqw;
    line-height: 1.45;
}

.model-profile__detail-value {
    overflow-wrap: anywhere;
}

.model-profile__social {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 2.3cqw;
    margin-top: 5.6cqw;
    padding: 0 4.3cqw 1.3cqw 0;
    border-bottom: 0;
}

.model-profile__social::after {
    position: absolute;
    right: -5.6cqw;
    bottom: 0;
    left: 0;
    height: var(--profile-rule-thickness);
    content: "";
    background: #fff;
}

.model-profile__social a {
    display: block;
    width: 9cqw;
}

.model-profile__social img {
    width: 100%;
    filter: brightness(0) invert(1);
}

.model-profile__flavor {
    position: relative;
    width: max-content;
    max-width: 90%;
    margin: 5cqw auto 0;
    color: #000;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 6cqw;
    font-weight:600;
    line-height: 0.7;
}

.model-profile__flavor::after {
    position: absolute;
    top: calc(100% + 1.2cqw);
    left: 0.5em;
    width: calc(100cqw - 1em);
    max-width: 88cqw;
    height: 0.6cqw;
    content: "";
    background: #000;
}

.model-profile__video {
    width: 75cqw;
    margin: 3cqw auto 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

.model-profile__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.model-profile__intro {
    width: fit-content;
    max-width: 77cqw;
    margin: 8.5cqw auto 0;
    color: #fff;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-size: 3cqw;
    font-weight: 600;
    line-height: 1.62;
    text-align: left;
}

.model-profile__intro p {
    margin: 0 0 3.8cqw;
}

.model-profile__intro .is-meta {
    font-family: "Yu Gothic", YuGothic, sans-serif;
    font-weight: 500;
}

.model-profile__intro .is-dot {
    font-family: "DotGothic16", sans-serif;
    font-weight: 400;
}

.model-profile__intro .is-closing {
    font-family: Meiryo, sans-serif;
    font-size: 4cqw;
    font-weight: 700;
}

.model-profile__empty {
    min-height: 42.2cqw;
    background: #000;
}

.secret-name-value {
    font-family: "WingdingsSubset", "Yu Gothic", sans-serif;
    letter-spacing: 0.1em;
}

/* =========================================================
   Empty category / footer behavior
   ========================================================= */

.gallery-empty {
    display: grid;
    place-items: center;
    min-height: 150cqw;
    font-family: "Yu Mincho", "游明朝", YuMincho, serif;
    font-weight:600;
    font-size: 7cqw;
}

.gallery-empty[hidden] {
    display: none;
}

.gallery-detail-open .site-footer__inner {
    margin-top: 0;
    background: var(--active-model-color);
}

.gallery-detail-open .site-footer__back,
.gallery-detail-open .site-footer__front {
    opacity: 0;
    transition: opacity 420ms ease;
}

.gallery-detail-open .site-footer__copyright {
    color: #fff;
}

/* =========================================================
   Full-screen model transition
   ========================================================= */

.gallery-transition {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.gallery-transition[hidden] {
    display: none;
}

/* 幕はモデル色に連動させず、常に黒。
   大きな斜め面を平行移動させ、引きでも四角形の輪郭を見せない。 */
.gallery-transition__fill {
    position: absolute;
    z-index: 1;
    top: -35vh;
    left: -50vw;
    width: 200vw;
    height: 170vh;
    background: #000;
    transform: translate3d(-135%, 0, 0) skewX(-16deg);
    transform-origin: center;
    will-change: transform;
}

.gallery-transition.is-wiping-in .gallery-transition__fill {
    animation: transitionWipeIn 360ms cubic-bezier(.28, .72, .2, 1) forwards;
}

.gallery-transition.is-wiping-out .gallery-transition__fill {
    animation: transitionWipeOut 420ms cubic-bezier(.45, 0, .72, .28) forwards;
}

.gallery-transition--lite.is-wiping-in .gallery-transition__fill {
    animation-duration: 170ms;
}

.gallery-transition--lite.is-wiping-out .gallery-transition__fill {
    animation-duration: 220ms;
}

.gallery-transition--lite .gallery-transition__anime-logo,
.gallery-transition--lite .gallery-transition__static-logo {
    display: none !important;
}

.gallery-transition__loading {
    position: fixed;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    justify-items: center;
    gap: 2.2cqw;
    color: #fff;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 120ms ease;
}

.gallery-transition.is-loading .gallery-transition__loading {
    opacity: 1;
}

.gallery-transition__loading-mark {
    width: 7cqw;
    aspect-ratio: 1;
    border: max(1px, 0.45cqw) solid rgba(255, 255, 255, 0.32);
    border-top-color: #fff;
    border-radius: 50%;
    animation: galleryTransitionLoading 720ms linear infinite;
}

.gallery-transition__loading-text {
    font-family: "PixelMplus10", monospace;
    font-size: 2.4cqw;
    letter-spacing: 0.32em;
    white-space: nowrap;
}

@keyframes galleryTransitionLoading {
    to { transform: rotate(360deg); }
}

.gallery-transition__anime-logo,
.gallery-transition__static-logo {
    position: fixed;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: min(92vw, 960px);
    height: min(78vh, 960px);
    max-width: none;
    max-height: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.gallery-transition__anime-logo {
    object-fit: contain;
}

/*
   アニメ終了時は、読み込み・decode済みの実imgを先に同位置へ重ねる。
   その描画を1フレーム確認してからアニメWebPを停止し、
   移動中に元画像からテーマ色マスクへ重ね替える。
*/
.gallery-transition__static-logo {
    display: block;
    background: transparent;
}

.gallery-transition__static-logo-original,
.gallery-transition__static-logo-tint {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-transition__static-logo-original {
    max-width: none;
    max-height: none;
    object-fit: contain;
    opacity: 1;
}

.gallery-transition__static-logo-tint {
    background: var(--transition-model-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    opacity: 0;
}

.gallery-transition.is-logo-playing .gallery-transition__anime-logo {
    opacity: 1;
}

.gallery-transition.is-logo-final .gallery-transition__anime-logo,
.gallery-transition.is-logo-settling .gallery-transition__anime-logo,
.gallery-transition.is-logo-disappearing .gallery-transition__anime-logo {
    display: none;
    opacity: 0;
    transition: none;
}

.gallery-transition.is-logo-final .gallery-transition__static-logo {
    opacity: 1;
}

.gallery-transition.is-logo-settling .gallery-transition__static-logo {
    animation: transitionLogoSettle 380ms var(--gallery-ease) forwards;
}

.gallery-transition.is-logo-settling .gallery-transition__static-logo-original {
    animation: transitionLogoOriginalFade 380ms var(--gallery-ease) forwards;
}

.gallery-transition.is-logo-settling .gallery-transition__static-logo-tint {
    animation: transitionLogoTintFade 380ms var(--gallery-ease) forwards;
}

/* 人物を見せる前に、前景側の遷移ロゴだけを一度消す。 */
.gallery-transition.is-logo-disappearing .gallery-transition__static-logo {
    opacity: 0;
    transition: opacity 180ms ease;
}

.model-media__scene.is-transition-reveal-pending .model-media__model-anchor--main {
    opacity: 0;
}

.model-media__scene.is-transition-revealing .model-media__model-anchor--main {
    animation: transitionModelFadeIn 420ms ease both;
}

@keyframes transitionWipeIn {
    from { transform: translate3d(-135%, 0, 0) skewX(-16deg); }
    to { transform: translate3d(0, 0, 0) skewX(-16deg); }
}

@keyframes transitionWipeOut {
    from { transform: translate3d(0, 0, 0) skewX(-16deg); }
    to { transform: translate3d(135%, 0, 0) skewX(-16deg); }
}

@keyframes transitionLogoSettle {
    from {
        top: 50%;
        left: 50%;
        width: min(92vw, 960px);
        height: min(78vh, 960px);
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        top: var(--logo-target-top, 22vh);
        left: var(--logo-target-left, 18vw);
        width: var(--logo-target-width, min(34vw, 340px));
        height: var(--logo-target-height, var(--logo-target-width, min(34vw, 340px)));
        opacity: 1;
        transform: none;
    }
}


@keyframes transitionLogoOriginalFade {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes transitionLogoTintFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes transitionModelFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


@media (prefers-reduced-motion: reduce) {
    .model-media__scene,
    .model-media__model,
    .model-media__kv-group,
    .model-media__logo-anchor,
    .model-media__model-anchor--main,
    .model-mini-card__media-set {
        animation: none !important;
    }
}

@media (min-width: 1100px) {
    .gallery-page,
    .site-header__frame,
    .site-footer__frame {
        max-width: var(--gallery-width);
    }
}

/* =========================================================
   Illustration / 色かさね
   ========================================================= */

body.gallery-illustration-open .gallery-page {
    min-height: 0;
}

body.gallery-illustration-open .site-footer__inner {
    height: 12cqw;
    margin-top: 0;
    background: #000;
}

body.gallery-illustration-open .site-footer__back,
body.gallery-illustration-open .site-footer__front {
    display: none;
}

body.gallery-illustration-open .site-footer__copyright {
    bottom: 1.8cqw;
    color: #fff;
    transition: color 420ms ease;
}

/* 作品画像が現れた時点でだけ、共通UIを作品色へ変える。 */
body.gallery-illustration-themed {
    --site-theme-color: var(--iro-ui-color);
    --site-theme-contrast: #000;
    background: #000;
}

/*
 * 選択前はcommon.cssのheader-bg.webpをそのまま使う。
 * 作品表示後だけ元画像を外し、同じアルファ形状を黒で描画する。
 * site-header / site-header__innerには下地色を追加しない。
 */
body.gallery-illustration-themed .site-header {
    background-image: none;
}

body.gallery-illustration-themed .site-header::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    background-color: #000;
    mask-image: url("../images/common/header-bg.webp");
    mask-repeat: repeat-x;
    mask-position: top center;
    mask-size: auto 100%;
    -webkit-mask-image: url("../images/common/header-bg.webp");
    -webkit-mask-repeat: repeat-x;
    -webkit-mask-position: top center;
    -webkit-mask-size: auto 100%;
    pointer-events: none;
}

body.gallery-illustration-themed .site-header__frame {
    position: relative;
    z-index: 1;
}

body.gallery-illustration-themed .site-nav__current-label {
    color: #000;
}

body.gallery-illustration-themed .site-nav__current-label::after {
    background: var(--iro-ui-color);
}

body.gallery-illustration-themed .gallery-page {
    color: var(--iro-ui-color);
    background: #000;
}

body.gallery-illustration-themed .gallery-tabs {
    border-color: var(--iro-ui-color);
}

body.gallery-illustration-themed .gallery-tabs__button {
    color: var(--iro-ui-color);
}

body.gallery-illustration-themed .gallery-tabs__divider {
    background: var(--iro-ui-color);
}

body.gallery-illustration-themed .gallery-tabs__button.is-active {
    color: #000;
    background: var(--iro-ui-color);
}

body.gallery-illustration-themed .site-footer__copyright {
    color: var(--iro-ui-color);
}

.illustration-gallery[hidden],
.iro-intro[hidden],
.iro-intro__fluid[hidden],
.iro-work[hidden] {
    display: none !important;
}

.illustration-gallery {
    --theme-color: #fff;
    --transition-color: #fff;
    --iro-work-title-top: 4.8cqw;
    --iro-kanji-block-height: 24cqw;
    --iro-reveal-kanji-height: 38cqw;
    --iro-reveal-roman-top: 99cqw;
    --iro-reveal-palette-top: 106cqw;
    --iro-work-roman-top: 30cqw;
    --iro-work-arrow-top: 13.4cqw;
    --iro-work-tools-top: 29.2cqw;
    --iro-work-visual-top: 42cqw;
    --iro-work-visual-height: 198cqw;
    --iro-work-stage-width: 100%;
    --iro-work-zoom-scale: 1;
    --iro-work-zoomed-height: 198cqw;
    --iro-work-current-visual-height: var(--iro-work-visual-height);
    --iro-canvas-height: 116cqw;
    --iro-intro-idle-height: var(--iro-canvas-height);
    --iro-transition-height: 244cqw;
    position: relative;
    min-height: 0;
    overflow: hidden;
    color: var(--theme-color);
    background: #000;
    font-family: "Hina Mincho", serif;
    isolation: isolate;
    border-top: 4cqw solid #fff;
}

body.gallery-illustration-themed .illustration-gallery {
    border-top-color: #000;
}

.illustration-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =========================================================
   Intro / ink selection
   ========================================================= */

.iro-intro {
    --iro-waterline-y: 96cqw;
    --iro-waterline-width: 65cqw;
    --iro-waterline-height: 0.45cqw;
    position: relative;
    height: var(--iro-intro-idle-height, var(--iro-canvas-height, 116cqw));
    min-height: 0;
    overflow: hidden;
    overscroll-behavior-y: auto;
    background: #000;
    isolation: isolate;
}

/* 選択前だけ黒背景を延長。PCでもホイールで移動できる余白を確保する。 */
.illustration-gallery:not(.is-selecting):not(.is-revealing):not(.is-work-open) {
    --iro-intro-idle-height: min(260cqw, calc(var(--iro-canvas-height, 116cqw) + 72cqw));
}

.illustration-gallery.is-selecting .iro-intro,
.illustration-gallery.is-revealing .iro-intro {
    height: var(--iro-transition-height, 244cqw);
}

.iro-intro__canvas {
    position: absolute;
    z-index: 3;
    inset: 0 0 auto;
    width: 100%;
    height: var(--iro-canvas-height, 116cqw);
    cursor: default;
    filter: url("#illustration-goo");
    pointer-events: none;
    touch-action: auto;
}

.iro-intro__hit-layer {
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    width: 100%;
    height: var(--iro-canvas-height, 116cqw);
    pointer-events: none;
}

.iro-intro__hit-layer[hidden] {
    display: none;
}

.iro-intro__hit-target {
    position: absolute;
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translate(-50%, -50%);
}

.iro-intro__hit-target:active {
    cursor: grabbing;
}

@media (max-width: 1099px), (hover: none), (pointer: coarse) {
    .illustration-gallery:not(.is-selecting):not(.is-revealing):not(.is-work-open) {
        /* モバイルは下端誤操作を避けるため、黒背景をさらに長くする。 */
        --iro-intro-idle-height: min(260cqw, calc(var(--iro-canvas-height, 116cqw) + 100cqw));
    }
}

.iro-intro__center {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.iro-intro__code {
    position: absolute;
    z-index: 1;
    top: 54cqw;
    left: 50%;
    display: inline-block;
    color: var(--transition-color);
    font-family: "Hina Mincho", serif;
    font-size: 5.2cqw;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: translateX(-50%);
}

.iro-intro__code-char {
    display: inline;
    opacity: 1;
    transition: color 180ms ease, opacity 120ms linear, transform 160ms ease;
}

.iro-intro__code-char--hash {
    color: #fff;
}

.iro-intro__code-char--digit {
    color: #000;
}

.iro-intro__code-char--digit.is-visible {
    color: var(--transition-color);
}

.iro-intro__code-char.is-vanished {
    opacity: 0;
}

.iro-intro__title-ja {
    position: absolute;
    z-index: 4;
    top: 58cqw;
    left: 50%;
    color: #fff;
    font-size: 4.5cqw;
    line-height: 1.32;
    letter-spacing: 0.25em;
    writing-mode: vertical-rl;
    transform: translateX(-50%);
    transition: opacity 220ms ease, transform 420ms var(--gallery-ease);
}

.iro-intro__title-ja.is-hidden {
    opacity: 0;
    transform: translate(-50%, -1.2cqw);
}

.iro-intro__fluid {
    position: absolute;
    z-index: 8;
    overflow: hidden;
    background: var(--transition-color);
    pointer-events: none;
    will-change: left, top, width, height, border-radius;
}

.iro-image-layer {
    position: absolute;
    top: 0;
    max-width: none;
    opacity: 0;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 720ms ease;
}

.iro-image-layer--background {
    z-index: 1;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.iro-image-layer--character {
    z-index: 2;
    left: 50%;
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    transform: translateX(-50%);
    transition: opacity 720ms ease, transform 720ms var(--gallery-ease);
}

.iro-intro__fluid.is-background-visible .iro-image-layer--background,
.iro-work__image-host.is-background-visible > .iro-image-layer--background {
    opacity: 1;
}

.iro-intro__fluid.is-character-visible .iro-image-layer--character,
.iro-work__image-host.is-character-visible > .iro-image-layer--character {
    opacity: 1;
}

/* =========================================================
   Introから作品表示へ移動する共通文字
   ========================================================= */

.iro-shared-copy {
    position: absolute;
    z-index: 20;
    inset: 0;
    pointer-events: none;
}

.iro-shared-copy__kanji-clip {
    position: absolute;
    top: var(--iro-reveal-title-top, 58cqw);
    left: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 40cqw;
    height: var(--iro-reveal-kanji-height);
    overflow: hidden;
    opacity: 0;
    transform: translateX(-50%);
    transition:
        top var(--iro-roman-top-duration, 860ms) var(--gallery-ease),
        width 860ms var(--gallery-ease),
        height 860ms var(--gallery-ease),
        opacity 180ms ease;
}

.iro-shared-copy__kanji {
    display: flex;
    flex-direction: column;
    align-items: center;
    direction: ltr;
    writing-mode: horizontal-tb;
    color: var(--transition-color);
    font-size: 20cqw;
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(112%);
    transition:
        color 420ms ease,
        font-size 860ms var(--gallery-ease),
        line-height 860ms var(--gallery-ease),
        transform 760ms var(--gallery-ease),
        opacity 180ms ease;
}

.iro-shared-copy__kanji > span {
    display: block;
}

.iro-shared-copy__roman {
    position: absolute;
    top: 90cqw;
    left: 50%;
    width: auto;
    margin: 0;
    padding: 0;
    color: #c8c8c8;
    border-bottom: 0 solid transparent;
    font-size: 3cqw;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-50%);
    transition:
        top 860ms var(--gallery-ease),
        width 860ms var(--gallery-ease),
        padding 860ms var(--gallery-ease),
        color 420ms ease,
        border-color 420ms ease,
        border-width 420ms ease,
        font-size 860ms var(--gallery-ease),
        letter-spacing 240ms ease;
}

/* インクボール落下中、ローマ字を水面予定位置の下へ移動 */
.illustration-gallery.is-roman-dropping .iro-shared-copy__roman {
    --iro-roman-top-duration: 760ms;
    top: var(--iro-reveal-roman-top);
    color: var(--transition-color);
}

.illustration-gallery.is-revealing .iro-shared-copy__kanji-clip,
.illustration-gallery.is-work-open .iro-shared-copy__kanji-clip {
    opacity: 1;
}

.illustration-gallery.is-revealing .iro-shared-copy__kanji,
.illustration-gallery.is-work-open .iro-shared-copy__kanji {
    opacity: 1;
    transform: translateY(0);
}

.illustration-gallery.is-revealing:not(.is-work-open) .iro-shared-copy__roman {
    top: var(--iro-reveal-roman-top);
}

.illustration-gallery.is-work-open .iro-shared-copy__kanji-clip {
    top: var(--iro-work-title-top);
    width: 28cqw;
    height: var(--iro-kanji-block-height);
    overflow: visible;
}

.illustration-gallery.is-work-open .iro-shared-copy__kanji {
    color: var(--theme-color);
    font-size: 12.5cqw;
    line-height: 0.94;
}

.illustration-gallery.is-work-open .iro-shared-copy__roman {
    top: var(--iro-work-roman-top);
    width: 65cqw;
    padding-bottom: 1.35cqw;
    color: var(--theme-color);
    border-bottom-width: 0.4cqw;
    border-bottom-color: var(--theme-color);
    font-size: 4cqw;
}

.iro-shared-copy__roman.is-morphing {
    letter-spacing: 0.08em;
}

/* =========================================================
   Introから作品下へ移動する共通カラーバー
   ========================================================= */

.iro-shared-palette {
    position: absolute;
    z-index: 35;
    top: var(--iro-reveal-palette-top, 106cqw);
    right: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.65cqw;
    min-height: 8.5cqw;
    padding-inline: 6cqw;
    opacity: 0;
    pointer-events: none;
    cursor: default;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    transition: top 980ms var(--gallery-ease), opacity 180ms ease;
}

.iro-shared-palette * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.illustration-gallery.is-palette-visible .iro-shared-palette {
    opacity: 1;
    pointer-events: auto;
}

.illustration-gallery.is-work-open .iro-shared-palette {
    top: calc(var(--iro-work-visual-top) + var(--iro-work-current-visual-height) + 4.8cqw);
}

.illustration-gallery.is-zoomed-out {
    --iro-work-current-visual-height: var(--iro-work-zoomed-height);
}

.iro-palette__bar {
    position: relative;
    z-index: 1;
    flex: 0 0 2.2cqw;
    width: 2.2cqw;
    height: 5.8cqw;
    padding: 0;
    background: var(--bar-color);
    border: 0;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition:
        flex-basis 220ms ease,
        width 220ms ease,
        background-color 460ms ease,
        transform 220ms var(--gallery-ease),
        opacity 220ms ease;
    will-change: transform;
}

.iro-palette__bar.is-expanded {
    flex-basis: 5.3cqw;
    width: 5.3cqw;
}

.iro-palette__bar.is-stacking {
    animation: iroBarStack 380ms var(--bar-delay, 0ms) cubic-bezier(.18,.72,.2,1) both;
}

.iro-palette__bar.is-joining {
    animation: iroBarJoin 520ms var(--bar-delay, 0ms) var(--gallery-ease) both;
}

.iro-palette__bar.is-leaving {
    transform: translateX(105vw);
    opacity: 0;
}

.iro-palette__placeholder {
    flex: 0 0 var(--placeholder-width);
    width: var(--placeholder-width);
    height: 5.8cqw;
    opacity: 0;
    pointer-events: none;
}

.iro-palette__bar.is-dragging {
    position: fixed !important;
    z-index: 5000;
    flex: none !important;
    margin: 0 !important;
    cursor: grabbing;
    pointer-events: none;
    box-shadow: 0 0 0 0.25cqw rgb(255 255 255 / 48%);
    transition: none !important;
}

body.is-iro-palette-dragging,
body.is-iro-palette-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

.iro-shared-palette.is-drag-active {
    touch-action: none;
}

@keyframes iroBarStack {
    from {
        opacity: 0;
        transform: translateX(-3cqw) scaleY(0.12);
        transform-origin: left bottom;
    }
    to {
        opacity: 1;
        transform: translateX(0) scaleY(1);
        transform-origin: left bottom;
    }
}

@keyframes iroBarJoin {
    from {
        opacity: 0;
        transform: translateX(105vw);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================================================
   Open work
   ========================================================= */

.iro-work {
    position: relative;
    min-height: 284cqw;
    overflow: hidden;
    color: var(--theme-color);
    background: #000;
}

.iro-work__header {
    position: relative;
    height: var(--iro-work-visual-top);
}

.iro-work__arrow {
    position: absolute;
    z-index: 42;
    top: var(--iro-work-arrow-top);
    width: 0;
    height: 0;
    padding: 0;
    background: transparent;
    border-top: 1.9cqw solid transparent;
    border-bottom: 1.9cqw solid transparent;
    cursor: pointer;
}

.iro-work__arrow--prev {
    left: 1.2cqw;
    border-right: 2.2cqw solid var(--theme-color);
    border-left: 0;
}

.iro-work__arrow--next {
    right: 1.2cqw;
    border-right: 0;
    border-left: 2.2cqw solid var(--theme-color);
}

.iro-work__tools {
    position: absolute;
    z-index: 43;
    top: var(--iro-work-tools-top);
    right: 2.8cqw;
    left: 2.8cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.iro-work__tools > * {
    pointer-events: auto;
}

.iro-mask-button {
    display: inline-grid;
    width: 5.5cqw;
    height: 5.5cqw;
    padding: 0;
    place-items: center;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.iro-mask-button__icon,
.iro-diary__pic,
.iro-diary__word {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--theme-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: background-color 420ms ease, transform 220ms ease;
}

.iro-mask-button[aria-disabled="true"],
.iro-mask-button.is-disabled {
    opacity: 0.32;
    pointer-events: none;
}

.iro-mask-button:disabled {
    color: inherit;
    opacity: 1;
    cursor: wait;
    -webkit-text-fill-color: currentColor;
}

.iro-mask-button.is-syncing .iro-mask-button__icon {
    opacity: 0.55;
}

.iro-mask-button.is-pending .iro-mask-button__icon {
    animation: gallery-action-pending 520ms ease-in-out infinite alternate;
}

.iro-work__swipe-zone {
    position: relative;
    touch-action: pan-y;
}

.iro-work__visual {
    position: relative;
    width: 100%;
    height: var(--iro-work-current-visual-height);
    margin: 0;
    overflow: hidden;
    background: #000;
    cursor: ew-resize;
    touch-action: pan-y;
    transition: height 620ms var(--gallery-ease);
}

.iro-work__image-host {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--iro-work-stage-width);
    height: var(--iro-work-visual-height);
    overflow: visible;
    transform: translateX(-50%) scale(1);
    transform-origin: 50% 0;
    transition: transform 620ms var(--gallery-ease);
    will-change: transform;
}

.iro-work__image-host > .iro-image-layer {
    opacity: 1;
}

/* 作品切替中はWAAPIだけを描画源にし、CSS transitionとの競合を止める。 */
.iro-work__image-host.is-switching > .iro-image-layer {
    transition: none !important;
}

.iro-image-layer.is-crossfade-old {
    opacity: 0 !important;
}

.iro-image-layer.is-crossfade-new {
    opacity: 0;
}

.iro-image-layer.is-crossfade-new.is-visible {
    opacity: 1;
}

.iro-work.is-zoomed-out .iro-work__visual {
    cursor: default;
    touch-action: pan-y;
}

.iro-work.is-zoomed-out .iro-work__image-host {
    transform: translateX(-50%) scale(var(--iro-work-zoom-scale));
}

.iro-work__palette-space {
    height: 14.5cqw;
}

.iro-work__lower {
    position: relative;
    min-height: 30cqw;
}

.iro-work__meta {
    position: absolute;
    top: 3.2cqw;
    left: 3cqw;
    color: var(--theme-color);
    font-size: 2.5cqw;
    line-height: 1.28;
    transition: color 420ms ease;
}

.iro-work__meta p {
    margin: 0;
}

.iro-work__actions {
    position: absolute;
    top: 12cqw;
    right: 3.2cqw;
    display: flex;
    align-items: center;
    gap: 1.8cqw;
}

.iro-mask-button--fav.is-favored .iro-mask-button__icon {
    transform: scale(1.08);
}

/* =========================================================
   Inline comment area
   ========================================================= */

.iro-comment-panel {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    opacity: 0;
    scroll-margin-top: 30cqw;
    transition:
        grid-template-rows 780ms var(--gallery-ease),
        opacity 360ms ease,
        border-color 420ms ease;
}

.iro-comment-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    border-top: 0.35cqw solid var(--theme-color);
    transition-duration: 520ms, 320ms, 420ms;
}

.iro-comment-panel__clip {
    min-height: 0;
    overflow: hidden;
}

.iro-comment {
    position: relative;
    margin: 0;
    padding: 7cqw 6cqw 8cqw;
    color: var(--theme-color);
    background: #000;
    font-family: "Mochiy Pop One", sans-serif;
}

.iro-comment__close {
    position: absolute;
    top: 1.4cqw;
    right: 2.2cqw;
    padding: 0;
    color: var(--theme-color);
    background: transparent;
    border: 0;
    font-size: 6cqw;
    line-height: 1;
    cursor: pointer;
}

.iro-comment__lead {
    margin: 0;
    font-size: 4cqw;
    font-weight: 400;
    line-height: 1.75;
    text-align: center;
}

.iro-comment__lead,
.iro-comment__label,
.iro-comment__count,
.iro-comment__message,
.iro-comment__buttons {
    opacity: 0;
    transform: translateY(1.2cqw);
    transition:
        opacity 260ms ease,
        transform 460ms var(--gallery-ease);
}

.iro-comment-panel.is-open .iro-comment__lead,
.iro-comment-panel.is-open .iro-comment__label,
.iro-comment-panel.is-open .iro-comment__count,
.iro-comment-panel.is-open .iro-comment__message,
.iro-comment-panel.is-open .iro-comment__buttons {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 180ms;
}

.iro-comment__label {
    display: grid;
    gap: 1cqw;
    margin-bottom: 3cqw;
    font-size: 2.8cqw;
}

.iro-comment input,
.iro-comment textarea {
    width: 100%;
    padding: 1.8cqw;
    color: #fff;
    background: #111;
    border: 0.25cqw solid var(--theme-color);
    border-radius: 0;
    outline: none;
    font-family: inherit;
}

.iro-comment input:focus,
.iro-comment textarea:focus {
    box-shadow: 0 0 0 0.45cqw rgb(255 255 255 / 18%);
}

.iro-comment textarea::placeholder {
    color: rgb(255 255 255 / 48%);
    opacity: 1;
}

.iro-comment__count,
.iro-comment__message {
    margin: 0;
    font-size: 2.3cqw;
}

.iro-comment__count {
    text-align: right;
}

.iro-comment__message {
    min-height: 2em;
    margin-top: 2cqw;
    white-space: pre-line;
}

.iro-comment__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 2cqw;
    margin-top: 2cqw;
}

.iro-comment__buttons button {
    padding: 1.4cqw 3cqw;
    color: #000;
    background: var(--theme-color);
    border: 0;
    cursor: pointer;
}

/* =========================================================
   Diary dialog
   ========================================================= */

.iro-diary {
    position: fixed;
    z-index: 2990;
    top: 50%;
    left: 50%;
    width: min(88vw, 820px);
    max-width: calc(100vw - 8cqw);
    max-height: calc(100dvh - 8cqw);
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--theme-color);
    background: rgb(0 0 0 / 80%);
    border: 0.35cqw solid var(--theme-color);
    font-family: "Hina Mincho", serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.985);
    transition:
        opacity 240ms ease,
        transform 240ms var(--gallery-ease),
        visibility 0s linear 240ms;
}

.iro-diary[open] {
    visibility: visible;
}

.iro-diary.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: 0s;
}

.iro-diary__panel {
    position: relative;
    max-height: calc(100dvh - 8.7cqw);
    padding: 7cqw 6cqw;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.iro-diary__panel::-webkit-scrollbar {
    display: none;
}

.iro-diary__close {
    position: absolute;
    z-index: 2;
    top: 2cqw;
    right: 2.5cqw;
    color: var(--theme-color);
    background: transparent;
    border: 0;
    font-size: 6cqw;
    cursor: pointer;
}

.iro-diary__heading {
    position: relative;
    display: block;
    width: 22cqw;
    height: 12cqw;
    margin: 0 auto 4cqw;
    color: var(--theme-color);
    text-decoration: none;
    cursor: pointer;
}

.iro-diary__pic,
.iro-diary__word {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.iro-diary h2,
.iro-diary__date {
    margin: 0;
    text-align: center;
}

.iro-diary h2 {
    font-size: 6cqw;
    font-weight: 400;
}

.iro-diary__date {
    margin-top: 1cqw;
    font-size: 2.5cqw;
}

.iro-diary__body {
    margin-top: 5cqw;
    color: #fff;
    font-size: 3cqw;
    line-height: 1.9;
    white-space: pre-line;
}

.iro-diary__more {
    display: block;
    width: max-content;
    margin: 5cqw 0 0 auto;
    color: var(--theme-color);
    font-size: 3.2cqw;
    text-decoration: none;
    border-bottom: 0.25cqw solid currentColor;
}

.iro-diary__heading[hidden],
.iro-diary__more[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .iro-intro__canvas {
        filter: none;
    }

    .iro-palette__bar.is-stacking,
    .iro-palette__bar.is-joining {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
    }
}

/* =========================================================
   Works
   ========================================================= */

.works-gallery[hidden],
.works-empty[hidden] {
    display: none !important;
}

.works-gallery {
    --works-all-color: #C3A4DB;
    --works-commission-color: #A4B0DB;
    --works-personal-color: #DBA4A8;
    --works-inactive-color: #B1B1B1;
    position: relative;
    min-height: 100cqw;
    color: #111;
    background: #fff;
    font-family: "Noto Sans JP", sans-serif;
}

.works-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqw;
    width: calc(100% - 6cqw);
    margin: 2.9cqw auto 0;
    padding: 0 1.4cqw;
}

.works-sort {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2.1cqw;
    padding: 0;
    color: #111;
    background: transparent;
    border: 0;
    font-size: 2.75cqw;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.works-sort__icon {
    display: block;
    width: 5.2cqw;
    height: 5.2cqw;
    background-color: #111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    transition: transform 320ms var(--gallery-ease);
}

.works-sort[data-sort="popular"] .works-sort__icon {
    transform: rotate(180deg);
}

.works-filters {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65cqw;
    min-width: 0;
}

.works-filter {
    min-width: 0;
    padding: 0.12cqw 2.15cqw 0.12cqw;
    overflow: hidden;
    color: #fff;
    background: var(--works-inactive-color);
    border: 0;
    border-radius: 999px;
    font-size: 2.2cqw;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 220ms ease, transform 220ms ease;
}

.works-filter--all.is-active {
    background: var(--works-all-color);
}

.works-filter--commission.is-active {
    background: var(--works-commission-color);
}

.works-filter--personal.is-active {
    background: var(--works-personal-color);
}

.works-sort:focus-visible,
.works-filter:focus-visible,
.works-action:focus-visible,
.works-card__external:focus-visible {
    outline: 0.4cqw solid #111;
    outline-offset: 0.45cqw;
}

.works-list {
    display: grid;
    gap: 16cqw;
    margin-top: 10.5cqw;
    padding: 0 2.1cqw 2cqw;
}

.works-card {
    min-width: 0;
}

.works-card__figure {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: transparent;
}

.works-card__image {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    opacity: 1;
    transition: opacity 240ms ease;
    user-select: none;
    -webkit-user-drag: none;
}

.works-card__image--incoming {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.works-card__image.is-fading-out {
    opacity: 0;
}

.works-card__image--incoming.is-visible {
    opacity: 1;
}

.works-card__image.is-no-transition {
    transition: none;
}

.works-card__caption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2.5cqw;
    margin-top: 1.15cqw;
}

.works-card__copy {
    min-width: 0;
    font-size: 2.45cqw;
    line-height: 1.3;
}

.works-card__title-line {
    display: flex;
    align-items: center;
    gap: 0.8cqw;
    min-width: 0;
    margin: 0;
}

.works-card__category {
    flex: 0 0 auto;
    min-width: 16.5cqw;
    padding: 0.1cqw 1.3cqw 0.2cqw;
    color: #fff;
    border-radius: 999px;
    font-size: 2.05cqw;
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
}

.works-card__category--commission {
    background: var(--works-commission-color);
}

.works-card__category--personal {
    background: var(--works-personal-color);
}

.works-card__title {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4cqw;
    min-width: 0;
    font-weight:500;
}

.works-card__title-part {
    flex: 0 0 auto;
    white-space: nowrap;
}

.works-card__meta {
    margin: 0.45cqw 0 0;
    padding-left: 3.2cqw;
    font-size: 2.25cqw;
    line-height: 1.25;
}

.works-card__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2.45cqw;
    padding: 0 1.3cqw 0.1cqw 0;
}

.works-action,
.works-card__external {
    display: inline-grid;
    place-items: center;
    width: 6.4cqw;
    height: 6.4cqw;
    padding: 0;
    color: #111;
    background: transparent;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}

.works-action:disabled {
    color: inherit;
    opacity: 1;
    cursor: wait;
    -webkit-text-fill-color: currentColor;
}

.works-action.is-pending .works-action__icon {
    animation: gallery-action-pending 520ms ease-in-out infinite alternate;
}

.works-action--fav.is-pending .works-action__icon {
    opacity: 1;
    animation: none;
}

.works-action--fav.is-unsynced .works-action__icon {
    opacity: 1;
    animation: none;
}

.works-action__icon {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.works-action--change .works-action__icon {
    transform: rotate(var(--works-change-rotation, 0deg));
    transition: transform 420ms var(--gallery-ease);
}

.works-action--fav .works-action__icon {
    transition: transform 180ms ease;
}

.works-action--fav.is-favored .works-action__icon {
    transform: scale(1.08);
}

.works-empty {
    margin: 18cqw 0 30cqw;
    font-size: 3cqw;
    text-align: center;
}

@keyframes gallery-action-pending {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .iro-mask-button.is-pending .iro-mask-button__icon,
    .works-action.is-pending .works-action__icon {
        animation: none !important;
        opacity: 0.72;
    }

    .works-card__image,
    .works-sort__icon,
    .works-filter,
    .works-action__icon {
        transition: none !important;
    }
}


/* =========================================================
   Illustration fav: both states are preloaded; visual state stays fixed
   during synchronization so the selected icon never blinks.
   ========================================================= */

.iro-mask-button--fav {
    position: relative;
}

.iro-mask-button--fav .iro-mask-button__icon {
    position: absolute;
    inset: 0;
    opacity: 1;
    animation: none !important;
    transition: background-color 420ms ease, transform 220ms ease;
}

.iro-mask-button--fav .iro-mask-button__icon--fav-on {
    opacity: 0;
}

.iro-mask-button--fav.is-favored .iro-mask-button__icon--fav-off {
    opacity: 0;
}

.iro-mask-button--fav.is-favored .iro-mask-button__icon--fav-on {
    opacity: 1;
    transform: scale(1.08);
}

.iro-mask-button--fav.is-pending.is-favored .iro-mask-button__icon--fav-on,
.iro-mask-button--fav.is-syncing.is-favored .iro-mask-button__icon--fav-on,
.iro-mask-button--fav.is-unsynced.is-favored .iro-mask-button__icon--fav-on {
    opacity: 1;
}

.iro-mask-button--fav.is-pending:not(.is-favored) .iro-mask-button__icon--fav-off,
.iro-mask-button--fav.is-syncing:not(.is-favored) .iro-mask-button__icon--fav-off,
.iro-mask-button--fav.is-unsynced:not(.is-favored) .iro-mask-button__icon--fav-off {
    opacity: 1;
}

.iro-mask-button--fav.is-pending.is-favored .iro-mask-button__icon--fav-off,
.iro-mask-button--fav.is-syncing.is-favored .iro-mask-button__icon--fav-off,
.iro-mask-button--fav.is-unsynced.is-favored .iro-mask-button__icon--fav-off,
.iro-mask-button--fav.is-pending:not(.is-favored) .iro-mask-button__icon--fav-on,
.iro-mask-button--fav.is-syncing:not(.is-favored) .iro-mask-button__icon--fav-on,
.iro-mask-button--fav.is-unsynced:not(.is-favored) .iro-mask-button__icon--fav-on {
    opacity: 0;
}


.model-control-button[hidden],
.model-controls__group[hidden] {
    display: none !important;
}

.model-control-button:disabled {
    pointer-events: none;
}

.model-controls__group[hidden] + .model-controls__group--selection {
    margin-top: 0;
}