@charset "utf-8";

/* ------------------------------
  Base: 色・余白・タイポ
------------------------------ */
:root {

    --mv: #101619;
    --bg: #f5ecdf;
    --orange: #E6A68A;
    --blue: #bfe2f4;
    --yellow: #F3ED9A;
    --pink: #f8cfd7;
    --ink: #222;
    --gray: #D9D9D9;
    --card-stroke: #4a4d50;
    --sk: transparent;

    --radius: 18px;
    --header-h: 80px;

    --step-x: clamp(12px, 3vw, 48px);
    --offset-y: clamp(-280px, -20vw, -160px);
    --lift-x: clamp(-8px, -1.5vw, -20px);
    --lift-y: clamp(-40px, -7vw, -100px);
    --list-drop: clamp(10px, 2vw, 24px);

    /* fluid type */
    --fz-xs: clamp(10px, .75vw, 12px);
    --fz-sm: clamp(12px, 1vw, 14px);
    --fz-md: clamp(14px, 1.2vw, 16px);
    --fz-lg: clamp(18px, 1.8vw, 22px);
    --fz-xl: clamp(24px, 3.4vw, 40px);

    /* 装飾的要素 */
    --easing: cubic-bezier(.22, .72, .16, 1);
    --upDur: 1.1s;
    --leftDur: .95s;
    --start: .45s;
    --gap: .80s;
    --snsStart: 1.75s;
    --snsStep: .28s;
}



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

html {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}


body.no-scroll {
    overflow: hidden;
}


body {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    background-color: var(--ink);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-top: 75px;
}

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

h1,
h2 {
    margin: 0;
}

h3 {
    font-weight: 700;
    line-height: 1.3;
    font-size: 1rem;
}

p {
    font-size: 0.9rem;
}


small {
    font-size: var(--fz-xs);
    color: var(--muted);
}

/* レイアウトの共通ラッパー */
.container {
    max-width: 1300px;
    width: min(1200px, 92%);
    margin-inline: auto;
}

/* 余白ユーティリティ */
.section {
    padding: clamp(32px, 6vw, 80px) 0;
}

.stack>*+* {
    margin-top: clamp(12px, 2.2vw, 20px);
}

/* ------------------------------
  ページトップ
------------------------------ */

/* 外側：表示/非表示＆画面右下の固定だけ担当（見た目は持たせない） */
.pagetop {
    position: fixed;
    right: 25px;
    bottom: 32px;
    z-index: 900;
    display: grid;
    place-items: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
}

.pagetop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .4s ease, transform .4s ease, visibility 0s;
}

/* 内側：ここに“丸の見た目”を全部移す → この要素をアニメ */
.pagetop__float {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--bg);
    border: 2px solid var(--card-stroke);

    display: grid;
    place-items: center;
    will-change: transform;
}

/* .active の間だけ、丸ごと（ドット本体）をふわふわ */
.pagetop.active .pagetop__float {
    animation: pt-float 6s ease-in-out infinite;
}

/* アイコンは中央のまま */
.pagetop i {
    font-size: 2rem;
    color: var(--card-stroke);
    line-height: 1;
}

/* ふわふわ（上下±6px＋微回転） */
@keyframes pt-float {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-6px) rotate(1deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(6px) rotate(-1deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 触感：ホバーで気持ち持ち上げる（外側じゃなく“浮いてる本体”に効かせる） */
.pagetop:hover .pagetop__float {
    transform: translateY(-1px);
    transition: transform .25s ease;
}

/* 動きを減らす設定のユーザーはアニメ無効 */
@media (prefers-reduced-motion: reduce) {
    .pagetop.active .pagetop__float {
        animation: none !important;
    }
}

/* ------------------------------
  ヘッダースクロール
------------------------------ */

/* アンカー先のズレ防止 */
#our-policy,
#art-work,
#lineups,
#access {
    scroll-margin-top: var(--header-h);
}

/* ブラウザ対応が十分ならこれでネイティブ滑らかスクロールも有効に */
html {
    scroll-behavior: smooth;
}

/* ------------------------------
  コラムカード
------------------------------ */
.column-card {

    position: relative;
    max-width: 350px;
    width: max(250px, 55%);
    /* お好みで */
    /* margin-inline: auto; */
    border-radius: 30px;
    background: var(--gray);
    border: 3px solid var(--card-stroke);
    /* box-shadow: var(--card-shadow); */
    overflow: hidden;
    z-index: 1;


    @media(width >=768px) {
        min-width: 250px;
    }
}

h3 {
    padding: 16px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    /* 画像は白文字 */
    border-bottom: 3px solid var(--card-stroke);
    /* 細い黒線 */
    letter-spacing: .04em;
}

.column-card__body {
    /* padding: clamp(24px, 3.2vw, 40px) 28px clamp(32px, 4vw, 48px); */
    padding: 16px;
}

.column-card__body p {

    margin: 0 0 24px;
    font-weight: 800;
    color: #fff;
}

.column-card__body p:last-child {
    margin-bottom: 1rem;
}

@media (min-width: 600px) {
    .column-card {
        min-height: 250px;
    }
}




/* コラムカードの装飾 */

/* 共通 */
.column-card {
    opacity: 0;
    transform: translate(var(--x, 0), var(--y, 0)) scale(.97);
    filter: blur(6px);
    transition: opacity 1.2s ease, transform 1.2s ease, filter 1s ease;
}

.column-card.is-inview {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
}

/* 方向ユーティリティ（親セレクタで一括適用） */

.section[data-from="left"] .column-card {
    --x: -40px;
    --y: 0px;
}

.section[data-from="right"] .column-card {
    --x: 40px;
    --y: 0px;
}

/* 上から */
.section[data-from="top"] .column-card {
    --x: 0px;
    --y: -40px;
}

/* 下から */
.section[data-from="bottom"] .column-card {
    --x: 0px;
    --y: 40px;
}

/* 斜め（対角） */

/* 左上→中心へ */
.section[data-from="lt"] .column-card {
    --x: -40px;
    --y: -40px;
}

/* 右上→中心へ ←これが「右上から左下」感 */
.section[data-from="rt"] .column-card {
    --x: 40px;
    --y: -40px;
}

/* 左下→中心へ */
.section[data-from="lb"] .column-card {
    --x: -40px;
    --y: 40px;
}

/* 右下→中心へ */
.section[data-from="rb"] .column-card {
    --x: 40px;
    --y: 40px;
}




/* コラムドット */

.text-dot {
    background-color: var(--gray);
    padding: 0;
    box-sizing: border-box;
    width: min(200px, 87%);
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 3px solid var(--card-stroke);
    margin-inline: auto;
    display: grid;
    place-items: center;
    align-self: center;

    @media(width <=440px) {
        aspect-ratio: 1/1;
    }
}

.text-dot__inner {
    width: 100%;
    height: 100%;
    padding: 10%;
    /* 従来の padding をこちらへ */
    box-sizing: border-box;
    border-radius: inherit;
    /* テキストが丸に沿うように */
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    /* 必要なら */
}

.text-dot span {
    display: block;
    line-height: 1.5;
    color: #fff;
    font-weight: bold;
}

/* ヴィジュアルカード */
/* カード本体：レイアウトの土台だけ。比率はここで決めない */
.visual-card {
    position: relative;
    max-width: 344px;
    width: max(290px, 75%);
    margin-inline: auto;
    padding: 3px;
    background: var(--bg);
    border-radius: var(--radius);
    border: 2px solid var(--card-stroke);
}

/* a をブロック化（inline のままだと比率が崩れやすい） */
.visual-card>a {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* 比率は「メディア枠」で決める！ */
.visual-card__media {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 6px 6px;
    border: 1.5px solid var(--card-stroke);
    aspect-ratio: 2.5 / 1;

    @media(width >=600px) {
        aspect-ratio: 2.3/ 1;
    }

    /* ← 好みの比率 */
}


@media (width >=600px) {
    .visual-card__media {
        aspect-ratio: 4 / 3;
    }
}

/* 画像は絶対配置 + cover（枠の比率に必ずフィット） */
.visual-card__media>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    /* ホバー拡大用 */
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* 拡大は img だけに効かせる */
.visual-card:hover .visual-card__media>img,
.visual-card:focus-within .visual-card__media>img {
    transform: scale(1.06);
}

/* タイトルの余白を明示（margin の相殺対策） */
.visual-card h3 {
    margin: 10px 6px 0;
}

.visual-card h3 {
    border-bottom: none;
    margin: 0;
    padding: 6px 6px;
    text-align: center;
    line-height: 1.1;
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--card-stroke);
}

/* ------------------------------
  ホバー要素
------------------------------ */

.visual-card:is(:hover, :focus-within) {
    /* ほんの少しだけ浮かせる */
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    border-color: color-mix(in oklab, var(--card-stroke) 85%, white);
}

/* 2) 画像用のクリップ枠を作る（overflow: hidden） */
.visual-card__media {
    position: relative;
    overflow: hidden;
    /* ← これで拡大はみ出しを隠す */
    border-radius: 16px 16px 6px 6px;
    /* 角丸は“枠”へ移すと綺麗 */

    /*  aspect-ratio: 3 / 1; */
}

@media (width >=600px) {
    .visual-card__media {
        aspect-ratio: 4 / 3;
    }
}

/* 3) 中の img を拡大アニメだけ担当させる */
.visual-card__media>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transform-origin: 50% 50%;
    transform: scale(1);
    transition: transform .6s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
    /* 過剰多用はNGだがここはOK */
}

/* 4) ホバー／フォーカスで「中央から拡大」 */
.visual-card:is(:hover, :focus-within) .visual-card__media>img {
    transform: scale(1.06);
    /* 6% くらいが上品。好みで 1.04–1.08 */
}

/* 5) キーボード操作でも反応（アクセシビリティ） */
.visual-card a:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--blue) 60%, white);
    outline-offset: 4px;
    border-radius: 12px;
}

/* 6) 省エネ設定の配慮 */
@media (prefers-reduced-motion: reduce) {
    .visual-card__media>img {
        transition: none;
    }

    .visual-card {
        transition: border-color .2s linear;
    }
}

/* ------------------------------
  ビジュアルカードの出現
------------------------------ */

/* 出現アニメ用の変数（ベース位置 bx/by と、出現オフセット ax/ay） */
.visual-card {
    /* 常時の微調整が欲しい時用。不要なら0でOK */
    --bx: 0px;
    --by: 0px;
    /* 出現方向（初期ズレ） */
    --ax: 0px;
    --ay: 0px;
    --sc: .97;

    opacity: 0;
    transform: translate(calc(var(--bx) + var(--ax)),
            calc(var(--by) + var(--ay))) scale(var(--sc));
    filter: blur(6px);
    transition:
        opacity .9s ease,
        transform .9s ease,
        filter .7s ease;
}



/* 交差したら出現（オフセットだけ0に戻す） */
.visual-card.is-inview {
    opacity: 1;
    --ax: 0px;
    --ay: 0px;
    --sc: 1;
    filter: blur(0);
}

/* 方向ユーティリティ（セクションに付ければ中の .visual-card/.column-card 両方に効かせられる） */
.from-left .visual-card,
.from-left .column-card {
    --ax: -40px;
    --ay: 0px;
}

.from-right .visual-card,
.from-right .column-card {
    --ax: 40px;
    --ay: 0px;
}

.from-top .visual-card,
.from-top .column-card {
    --ax: 0px;
    --ay: -40px;
}

.from-bottom .visual-card,
.from-bottom .column-card {
    --ax: 0px;
    --ay: 40px;
}

/* 斜め（対角） */

/* 左上→中心 */
.from-lt .visual-card,
.from-lt .column-card {
    --ax: -40px;
    --ay: -40px;
}

/* 右上→中心 */
.from-rt .visual-card,
.from-rt .column-card {
    --ax: 40px;
    --ay: -40px;
}

/* 左下→中心 */
.from-lb .visual-card,
.from-lb .column-card {
    --ax: -40px;
    --ay: 40px;
}

/* 右下→中心 */
.from-rb .visual-card,
.from-rb .column-card {
    --ax: 40px;
    --ay: 40px;
}

/* モーション控えめ設定 */
@media (prefers-reduced-motion: reduce) {
    .visual-card {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

/* ヴィジュアルドット */

.visual-dot {
    background-color: var(--gray);
    padding: 10px;
    max-width: 328Px;
    width: max(200px, 87%);
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 2px solid var(--card-stroke);
    margin: 0 auto;
}

.visual-dot img {

    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 1.5px solid var(--card-stroke);
    margin: 0 auto;
}



/* ------------------------------
  Header / GNav
------------------------------ */
/* ヘッダーを常に最上部に固定 */
header {
    display: flex;
    justify-content: space-between;
    height: var(--header-h);
    top: 0;
    left: 0;
    right: 0;
    background: #f8efe3;
    border: 3px solid var(--card-stroke);
    z-index: 1000;
    position: fixed;
    width: 100%;
    max-width: 100%;

}



.inner-logo {
    max-width: 150px;
    width: max(100px, 20%);
    margin-left: 1rem;
    margin-top: 20px;
}

.hamburger-btn {
    display: none;
    width: 45px;
    height: 45px;
    border: none;
    background-color: transparent;
    position: fixed;
    margin-top: 20px;
    right: 10rem;
    z-index: 100;
}

.hamburger-btn span,
.hamburger-btn::before,
.hamburger-btn::after {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #333;
    position: absolute;
    transition: 0.5s;
}

.hamburger-btn::before,
.hamburger-btn::after {
    content: "";
}

.hamburger-btn::before {
    top: 30%;
}

.hamburger-btn span {
    top: 50%;
}

.hamburger-btn::after {
    top: 70%;
}

.hamburger-btn.active::before {
    top: 50%;
    rotate: 45deg;
}

.hamburger-btn.active span {
    opacity: 0;
}

.hamburger-btn.active::after {
    top: 50%;
    rotate: -45deg;
}

header nav {
    width: 60%;
    margin-right: 32px;
    margin-top: auto;


}

header ul {

    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
}

header ul li {
    font-size: 14px;
    width: 20%;
    text-align: center;
}

header ul li a {
    display: inline-block;
    width: 100%;
    padding: 1rem;
}

@media screen and (max-width: 768px) {


    .hamburger-btn {
        display: block;
        position: fixed;
        right: 1rem;
        top: 0px;
        z-index: 1200;
    }

    header nav {
        border-bottom: 1px solid #000;
        background-color: rgba(255, 255, 255, 0.9);
        display: none;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }

    header nav.is-open {
        display: block;
    }

    header ul {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        z-index: 1000;
    }
}

/* ------------------------------
  MV（ヒーロー）
------------------------------ */


.main-visual {
    background: var(--ink);
    color: #fff;
    padding-bottom: 64px;
    padding-top: 80px;

}





.mv-slideshow {
    position: relative;
    display: grid;
    width: clamp(200px, 64%, 235px);
    margin-inline: auto;
}

.mv-title-logo {
    max-width: 516px;
    width: max(350px, 92%);
    margin: 0 auto;
}

.kissa {
    width: clamp(80px, 25%, 100px);
    margin-inline: auto;
}

.amemoyou {
    width: clamp(260px, 80%, 400px);
    margin-inline: auto;
}

.sns {

    width: clamp(60px, 23%, 115px);
    margin-inline: auto;
}

/* SNSアイコン */
.main-visual nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 20px);
}

.main-visual nav img {
    width: 28px;
}

.mv-title-inner {
    max-width: 650px;
    margin-inline: auto;
}

/* MVドット（演出は後述のJSで） */


.mv-dot {
    position: relative;
    width: 100%;
    margin-bottom: 128px;
}

.mv-dot ul {
    position: relative;
    display: flex;
    margin-inline: auto;
}

.mv-dot li {
    list-style: none;
}

.mv-dot img {
    max-width: 300px;
    width: max(250px, 76%);
    margin-inline: auto;

}






.mv-dot ul li:nth-of-type(1) {

    transform: translate(25%, -5%);

}

.mv-dot ul li:nth-of-type(2) {

    transform: translate(-10%, 35%);

}

.mv-dot ul li:nth-of-type(3) {
    transform: translate(-30%, -15%);
}

/* タブ */

.tab {
    width: clamp(290px, 38%, 430px);
    margin-inline: auto;
    margin-bottom: 64px;
}

.tab-list {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    margin-right: 1rem;
    list-style: none;
}



.tab-list li:nth-of-type(1) {
    color: #fff;
    background-color: #fff;
    display: block;
    padding: 0.5rem 1.2rem 1rem;
    border-radius: 5px 5px 0 0;
}

#tab1 h3 {
    background-color: #fff;
    color: var(--card-stroke);
}

.tab-list li:nth-of-type(2) {
    color: #fff;
    background-color: var(--yellow);
    display: block;
    padding: 0.5rem 1.2rem 1rem;
    border-radius: 5px 5px 0 0;
}

#tab2 h3 {
    background-color: var(--yellow);
    color: var(--card-stroke);
}

.tab-list li:nth-of-type(3) {
    color: #fff;
    background-color: var(--blue);
    display: block;
    padding: 0.5rem 1.2rem 1rem;
    border-radius: 5px 5px 0 0;
}

#tab3 h3 {
    background-color: var(--blue);
    color: var(--card-stroke);
}

.tab-list li:nth-of-type(4) {
    color: #fff;
    background-color: var(--pink);
    display: block;
    padding: 0.5rem 1.2rem 1rem;
    border-radius: 5px 5px 0 0;
}

#tab4 h3 {
    background-color: var(--pink);
    color: var(--card-stroke);
}

.tab-list li a:hover {
    background: #aaa;
}

.tab-list li.selected a {
    background-color: var(--bg);
}

.tab-panel {
    margin-inline: auto;
    position: relative;
    /* お好みで */
    /* margin-inline: auto; */
    border-radius: 40px 16px 40px 40px;
    background: var(--gray);
    border: 3px solid var(--card-stroke);
    /* box-shadow: var(--card-shadow); */
    overflow: hidden;
    z-index: 1;
}


.tab-panel h3 {
    color: #fff;
    padding: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--card-stroke);
    letter-spacing: .04em;
}

.tab-panel__body {
    padding: 0 16px;
}

.tab-panel__body>p {


    font-weight: 800;
    color: var(--card-stroke);
}

.tab-panel__body>p:last-of-type {

    margin: 0 0 2rem;
    font-weight: 800;
    color: var(--card-stroke);
}

.main-visual .tab-panel {
    box-shadow: 15px 15px 0 0 #fff
}



@media(width >=600px) {

    .mv-slideshow {
        width: clamp(320px, 92%, 400px);
        margin-inline: auto;
    }

    .main-visual .column-card {
        max-width: 600px;
        aspect-ratio: 8/5;
        margin-bottom: 200px;

    }

    .main-visual .column-card__h3 {
        font-size: 32px;
    }

    .main-visual .tab-panel {
        padding-bottom: 64px;
        box-shadow:
            20px 25px 0 0 #fff;
    }


}

@media screen and (min-width: 1024px) {


    .main-visual {

        padding-bottom: 128px;
        padding-top: 32px;
    }


    .mv-slideshow {
        width: clamp(450px, 34vw, 530px);
        margin-left: auto;
        /* margin: auto 0; */
        margin-right: auto;
        margin-left: auto;
        top: 8%;
    }

    .mv-title {
        display: grid;
        grid-template-columns: 1fr 1fr;


    }

    .mv-title-inner {
        max-width: 600px;
        min-width: 500px;
        margin-bottom: 100px;
        margin-top: 100px;
    }

    .mv-dot {
        position: relative;
        width: 100%;
        margin-bottom: 128px;
    }


    .mv-title {
        max-width: 1300px;
        width: min(1200px, 92%);
        margin-inline: auto;
    }

    .mv-dot img {

        max-width: 240px;
        width: max(160px, 53%);
    }

    .mv-title-logo {
        max-width: 516px;
        width: max(400px, 92%);
        margin: 0 auto;
    }

    .kissa {
        width: clamp(100px, 25%, 164px);
        margin-inline: auto;
    }

    .amemoyou {
        width: clamp(400px, 90%, 510px);
        margin-inline: auto;
    }

    .main-visual .tab-panel {
        max-width: 500px;
        aspect-ratio: 8/5;

    }

    .main-visual .tab-panel h3 {
        font-size: 20px;
    }

    .main-visual .tab-panel__body>p {
        font-size: 18px;
    }


}

/* ------------------------------
  装飾的要素
------------------------------ */


/* メインビジュアルのスライド */


/* 全スライド共通：重ねて不透明度だけアニメ */
.mv-slideshow .slide {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    will-change: opacity;

    /* ←これだけ！ 60秒でゆっくり1周 */
    animation: mvCross 60s cubic-bezier(.22, 1, .36, 1) infinite both;
}

/* 4枚なら15秒刻みで遅延 */
.mv-slideshow .s1 {
    animation-delay: 0s;
}

.mv-slideshow .s2 {
    animation-delay: 15s;
}

.mv-slideshow .s3 {
    animation-delay: 30s;
}

.mv-slideshow .s4 {
    animation-delay: 45s;
}

/* クロスフェード（ゆっくり） */
@keyframes mvCross {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    14.999% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }



    100% {
        opacity: 0;
    }
}

/* 動きに弱い環境 */
@media (prefers-reduced-motion: reduce) {
    .mv-slideshow .slide {
        animation: none !important;
    }

    .mv-slideshow .s1 {
        opacity: 1;
    }
}







/*タイトルロゴ まずは初期状態を透明＆少し下/左にズラす */
/* タイミングをまとめて管理（ここだけ触れば全体が変わる） */
.main-visual.is-ready {
    --easing: cubic-bezier(.22, .72, .16, 1);
    --upDur: 1.1s;
    /* kissa / amemoyou の再生時間 */
    --upDur: 2.5s;
    /* さらにゆっくり */
    --gap: 1.5s;
    /* kissa→amemoyou 間隔を少し広げる */
    --start: 1s;
    /* 最初の開始ディレイ            */
    --snsStart: 2.75s;
    /* SNSの開始時刻                  */
    --snsStep: .28s;
    --leftDur: .95s;
    /* SNSアイコンの再生時間        */
    /* SNSのスタッガー刻み            */
}


.kissa,
.amemoyou,
.sns li img {
    opacity: 0;
    transform: translateY(12px);
    will-change: opacity, transform;
    display: block;
}

/* 左から出すやつはX方向にズラす */
.sns li img {
    transform: translateX(-18px);
}

/* ====== keyframes ====== */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatY {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ====== 出現トリガー（.main-visual に is-ready が付いたら開始） ====== */



/* ① kissa をゆっくりめに */
.main-visual.is-ready .kissa {
    animation: fadeUp var(--upDur) var(--easing) var(--start) both;
}

/* ② 少し間を空けて amemoyou */
.main-visual.is-ready .amemoyou {
    animation: fadeUp var(--upDur) var(--easing) calc(var(--start) + var(--gap)) both;
}

/* ③ SNSアイコン（左→右へ順番に、ゆっくり） */
.main-visual.is-ready .sns li {
    list-style: none;
}

.main-visual.is-ready .sns li img {
    animation: fadeLeft var(--leftDur) var(--easing) both;
}

/* スタッガー（calcで遅延を段階付け） */
.main-visual.is-ready .sns li:nth-child(1) img {
    animation-delay: var(--snsStart);
}

.main-visual.is-ready .sns li:nth-child(2) img {
    animation-delay: calc(var(--snsStart) + var(--snsStep));
}

.main-visual.is-ready .sns li:nth-child(3) img {
    animation-delay: calc(var(--snsStart) + var(--snsStep) * 2);
}

/* やさしめのキーフレーム（必要に応じて差し替えOK） */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-14px);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {

    .main-visual.is-ready .kissa,
    .main-visual.is-ready .amemoyou,
    .main-visual.is-ready .sns li img {
        animation: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ====== ドットの浮遊 ====== */





.mv-dot img {
    /* デフォ（個別に上書き可） */
    /* 上下の振幅 */
    --ad-amp: 10px;
    /* 上下の周期 */
    --ad-dur: 9s;
    /* 回転の振幅 */
    --ad-rot: 1.2deg;
    /* 回転の周期 */
    --ad-rot-dur: 16s;
    /* 開始ディレイ（片方に少しずらすと自然） */
    --ad-delay: 100s;

    transform: translateY(var(--ad-fy)) rotate(var(--ad-r));
    transform-origin: center;
    will-change: transform;

    /* 常時ふわふわ */
    animation:
        adFloatY var(--ad-dur) ease-in-out var(--ad-delay) infinite alternate,
        adRotDrift var(--ad-rot-dur) ease-in-out var(--ad-delay) infinite alternate;
    animation-fill-mode: both;
}

/* 片方だけフェーズをずらすと“掛け合い”っぽく見える（任意） */
.sd-dot img {
    --ad-amp: 4px;
    --ad-dur: 5s;
    --ad-delay: 7.15s;
    --ad-rot: 12.2deg;
}

.re-dot img {
    --ad-amp: 18px;
    --ad-dur: 10s;
    --ad-delay: 4s;
    --ad-rot: -7.2deg;

}

/* 中身の見た目はそのまま（必要なら） */
.mv-dot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* transform影響の意図せぬ横幅変化防止 */
.mv-dot img {
    display: inline-block;
}




/* ====== コラムカードの出現 ====== */

/* 初期状態：少し右下＆少し小さく＆ぼかし */
.tab {
    --shift: 6px;
    /* 進入距離（対角方向） */
    --dur: 1700ms;
    /* 再生時間 */
    --easing: cubic-bezier(.25, .82, .25, 1);
    /* しっとり系 */
    opacity: 0;
    transform: translate(var(--shift), var(--shift)) scale(.985);
    filter: blur(6px);
    will-change: transform, opacity, filter;
}

/* 出現トリガーが付いたら再生 */
.tab.is-inview {
    animation: diagIn var(--dur) var(--easing) both;
    animation-delay: 1s;
}

/* 軽いバウンスで止まる */
@keyframes diagIn {
    0% {
        opacity: 0;
        transform: translate(var(--shift), var(--shift)) scale(.985);
        filter: blur(6px);
    }

    60% {
        opacity: 1;
        transform: translate(-3px, -3px) scale(1.01);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0);
    }
}


/* ------------------------------
  Section: Policy
------------------------------ */


.our-policy {

    background: var(--bg) calc(50% + 143px) calc(50% + 317px) / contain no-repeat url(../img/photo/austria2.png);
    background-size: clamp(1126px, 220vw, 1500px) auto;
    padding-top: 50px;
    padding-bottom: 128px;
    border-radius: 45px;
    /* transform: translate(0%, 15%); */
}



.policy-title {
    position: relative;
    margin-inline: auto;
    margin-bottom: 32px;
    max-width: 1300px;
}

.policy-title-logo {
    max-width: 305px;
    width: max(194px, 60%);
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.policy-title-logo h2:last-child {
    position: relative;
    max-width: 280px;
    width: max(144px, 74%);
    margin: 0 auto;
    z-index: 10;
}



.policy-dots {
    position: absolute;
    max-width: 1300px;
    min-width: 800px;
    margin: 0 auto;
    margin-inline: auto;
    pointer-events: none;
    top: -30%;
}

.policy-dots ul {
    position: relative;

    display: flex;
    width: 100%;
}



.policy-dots ul li:nth-of-type(1) {

    max-width: 350px;
    min-width: 300px;
    transform: translate(-10%, 10%);
}


.policy-dots ul li:nth-of-type(2) {
    min-width: 280px;
    max-width: 250px;
    transform: translate(-33%, -30%);
}

.policy-dots ul li:nth-of-type(3) {

    min-width: 300px;
    max-width: 350px;
    transform: translate(15%, 31%);
    display: none;
}

.policy-dots ul li:nth-of-type(4) {
    max-width: 350px;
    min-width: 341px;
    transform: translate(7%, -48%);
}



.policy-dots ul li:nth-of-type(5) {
    max-width: 280px;
    min-width: 250px;
    transform: translate(-167%, 10%);
    display: none;
}



/* .our-policy .container */

.our-policy .container {
    position: relative;
    max-width: 945px;
    display: grid;
    gap: 32px;
    z-index: 10;
    /* margin-bottom: 200px; */


}

.policy-visual {
    margin-inline: auto;
    max-width: 469px;
    width: max(300px, 89%);
    aspect-ratio: 5 / 4;
    padding: 10px;
    background-color: var(--gray);
    border-radius: var(--radius);
    border: 3px solid var(--card-stroke);
    box-shadow: -15px -10px 0 0 var(--orange);
}

.policy-visual img {
    aspect-ratio: 5/4;
    border-radius: var(--radius);
    border: 3px solid var(--card-stroke);

}

.our-policy .column-card {
    --x: 20px;
    --y: -20px;
    margin-inline: auto;
    box-shadow: 15px -15px 0 0 var(--orange);
}

@media screen and (min-width: 600px) {

    .our-policy {

        background: var(--bg) calc(50% + 265px) calc(50% + 216px) / contain no-repeat url(../img/photo/austria2.png);
        background-size: clamp(1126px, 220vw, 1500px) auto;
        padding-top: 50px;
        padding-bottom: 300px;
        border-radius: 45px;
        /* transform: translate(0%, 15%); */
    }


    .policy-dots ul li:nth-of-type(4),
    .policy-dots ul li:nth-of-type(5) {
        display: block;
    }

    .austria img {
        width: 100vw;
        object-position: top center;
    }

    .austria {
        transform: translate(-50%, 80%);

    }

    .our-policy .container {
        position: relative;
        max-width: 945px;
        display: grid;
        gap: 32px;
        z-index: 10;
        /* margin-bottom: 200px; */


    }
}

@media screen and (min-width: 1024px) {

    .our-policy {
        background: var(--bg) calc(50% + 61px) calc(50% + 162px) / contain no-repeat url(../img/photo/austria2.png);
        background-size: clamp(1126px, 220vw, 1500px) auto;
        padding-bottom: 300px;
        margin-inline: auto;
        width: 95vw;
        max-width: 1300px;
    }

    /* .policy-dots */

    .or-p-dot {
        max-width: 350px;
        min-width: 300px;
        /* transform: translate(-10%, 10%); */
    }


    .policy-dots ul li:nth-of-type(2) {
        min-width: 280px;
        max-width: 250px;
        transform: translate(-33%, -30%);
    }

    .policy-dots ul li:nth-of-type(3) {
        display: block;
        min-width: 300px;
        max-width: 350px;
        transform: translate(-35%, 13%);

    }

    .policy-dots ul li:nth-of-type(4) {
        max-width: 350px;
        min-width: 341px;
        transform: translate(-5%, -48%);
    }



    .policy-dots ul li:nth-of-type(5) {
        max-width: 280px;
        min-width: 250px;
        transform: translate(-82%, 10%);

    }

    /* .our-policy .container */

    .our-policy .container {
        grid-template-columns: 1fr 1fr;
        /* margin-bottom: 400px; */
    }


    .our-policy .column-card {
        max-width: 400px;
        width: max(300px, 75%);



    }

}

/* ------------------------------
  装飾的要素、ドットの挙動
------------------------------ */

/* 変数とキーフレーム（必ず定義） */
@property --fy {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 0px;
}

@property --r {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes dotFloatY {
    0% {
        --fy: 0px;
    }

    50% {
        --fy: var(--float-amp, 10px);
    }

    100% {
        --fy: calc(var(--float-amp, 6px) * -5.66);
    }
}

@keyframes dotRotDrift {
    0% {
        --r: calc(var(--rot-amp, 1.2deg) * -1);
    }

    50% {
        --r: 0deg;
    }

    100% {
        --r: var(--rot-amp, 1.2deg);
    }
}

/* 出現前 */
.policy-dots li img {
    --drop-dur: 10.6s;
    /* 出現にかける時間 */
    --appear-delay: 3.2s;
    /* 出現を始める前の“溜め” */
    --drop-ease: cubic-bezier(.2, .8, .2, 1);

    --baseY: -26px;
    /* 下から出す（上からなら -16px） */
    --fy: 0px;
    --r: 0deg;

    opacity: 0;
    transform: translateY(calc(var(--baseY) + var(--fy))) rotate(var(--r));
    transition:
        opacity .42s ease var(--appear-delay),
        transform var(--drop-dur) var(--drop-ease) var(--appear-delay);
}

/* 出現後：出現完了の直後にゆれ開始（=スムーズ） */
.policy-dots li.is-inview img {
    opacity: 1;
    --baseY: 0px;
    /* 出現完了(appear-delay + drop-dur)の直後から常時ゆれ開始 */
    --start-float: calc(var(--appear-delay) + var(--drop-dur) + .06s);

    animation:
        dotFloatY var(--float-dur, 8s) ease-in-out var(--start-float) infinite alternate,
        dotRotDrift var(--rot-dur, 14s) ease-in-out var(--start-float) infinite alternate;
}

/* 動きを抑制する環境配慮 */
@media (prefers-reduced-motion: reduce) {
    .policy-dots li img {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .policy-dots li.is-inview img {
        animation: none !important;
    }
}



/* ------------------------------
  Section: Art-work
------------------------------ */

.art-work {
    position: relative;
    background-color: var(--blue);
    padding-top: 50px;
    padding-bottom: 278px;
    border: 6px solid var(--card-stroke);
    border-radius: 60px 60px 0 0;
    transform: translate(0%, 10%);

}

/* .art-work-title  */

.art-work-title {
    position: relative;
    max-width: 1300px;
    margin-inline: auto;
    margin-bottom: 32px;
}

.art-work-title-logo {
    position: relative;
    width: clamp(200px, 53%, 390px);
    margin-inline: auto;
}


.art-work-title-logo h2:first-child {
    position: relative;
    width: clamp(120px, 60%, 200px);
    z-index: 2;
}

.art-work-title-logo h2:last-child {
    position: relative;
    top: 80%;
    left: 52%;
    width: clamp(130px, 65%, 310px);
    z-index: 1;
    opacity: 0.9;

}

/* .art-work-dots*/


.art-work-dots {
    position: absolute;
    max-width: 1300px;
    min-width: 800px;
    margin: 0 auto;
    margin-inline: auto;
    pointer-events: none;
    top: -30%;
}

.art-work-dots ul {
    position: relative;

    display: flex;
    width: 100%;
}




.art-work-dots ul li:nth-of-type(1) {
    width: 310px;


    transform: translate(-10%, -70%);
}

.art-work-dots ul li:nth-of-type(2) {
    width: 250px;

    transform: translate(-40%, -30%);

}

.art-work-dots ul li:nth-of-type(3),
.art-work-dots ul li:nth-of-type(4),
.art-work-dots ul li:nth-of-type(5),
.art-work-dots ul li:nth-of-type(6),
.art-work-dots ul li:nth-of-type(7),
.art-work-dots ul li:nth-of-type(8),
.art-work-dots ul li:nth-of-type(9),
.art-work-dots ul li:nth-of-type(10),
.art-work-dots ul li:nth-of-type(11),
.art-work-dots ul li:nth-of-type(12),
.art-work-dots ul li:nth-of-type(13),
.art-work-dots ul li:nth-of-type(14) {
    display: none;
}


/* .art-work .container */

.art-work .container {
    max-width: 1000px;
    display: grid;
    align-items: start;
    position: relative;
    overflow: visible;
    /* ずらし分が切れないように */
    isolation: isolate;
}


/* .art-work-list*/

.art-work-list {
    margin-inline: auto;
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / 3;
    grid-column: 1;
    grid-auto-flow: row dense;
    max-width: 320px;
    min-width: 0;
    padding: 0;
    gap: 16px;
    align-items: start;
}

/* .art-work-late */

.art-work-late {
    display: grid;
    gap: 6px;
}

/* .art-work .column-card */

art-work .column-card-wrapper {
    margin-left: auto;
}

.art-work .column-card {
    position: relative;
    --x: 30px;
    --y: 30px;
    margin-bottom: 32px;
    margin-inline: auto;
    box-shadow: 16px 16px 0 0 var(--yellow);
    z-index: 3;
}

/* .art-work .visual-card */

.art-work .visual-card {
    max-width: 160px;
    position: relative;
    box-shadow: -16px 13px 0 0 var(--pink);
}

.art-work .visual-card__media {
    aspect-ratio: 1/0.8;
}

.art-work .visual-card h3 {
    border-bottom: none;
    margin: 0;
    padding: 2px 6px;
    text-align: center;
    line-height: 1.1;
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--card-stroke);
}

/* .art-work .visual-card-tall */

.art-work .visual-card-tall {
    position: relative;
    z-index: 3;
}

.art-work .visual-card-tall .visual-card__media {
    aspect-ratio: 1/1.8;

}

/* .art-work .visual-card-small */

.art-work .visual-card-small {
    max-width: 155px;
}

.art-work .visual-card-small img {
    object-position: top center;
}

.art-work-late .visual-card-small:nth-of-type(1) {
    position: relative;
    z-index: 1;
}

.art-work-late .visual-card-small:nth-of-type(2) {
    position: relative;
    z-index: 2;
}



@media screen and (min-width:600px) {

    /*  Section: Art-work */

    .art-work {
        padding-bottom: 128px;
        padding-top: 100px;
        padding-bottom: 290px;
        border-radius: 100px 100px 0 0;
        overflow: clip;
    }

    /* .art-work-dots */

    .art-work-dots ul li img {


        max-width: 200px;
        width: 20vw;

    }

    .art-work-dots ul li:nth-of-type(1) {
        max-width: 200px;
        width: 20vw;
        transform: translate(4%, -69%);
    }

    .art-work-dots ul li:nth-of-type(2) {
        max-width: 200px;
        width: 20vw;

        transform: translate(-1%, 186%);
    }


    .art-work-dots ul li:nth-of-type(3) {
        display: block;
        transform: translate(62%, 45%);
    }

    .art-work-dots ul li:nth-of-type(4) {
        display: block;
        transform: translate(296%, -79%);
    }


    .art-work-dots ul li:nth-of-type(5) {
        display: block;
        transform: translate(706%, 174%);
    }

    .art-work-dots ul li:nth-of-type(6) {
        display: block;
        transform: translate(351%, 48%);
    }

    .art-work-dots ul li:nth-of-type(7) {
        display: block;
        transform: translate(624%, -11%);
    }

    .art-work-dots ul li:nth-of-type(8) {
        display: block;
        transform: translate(-850%, 313%);
    }

    .art-work-dots ul li:nth-of-type(9) {
        display: block;
        transform: translate(-491%, 362%);
    }

    .art-work-dots ul li:nth-of-type(10) {
        display: block;

        transform: translate(269%, 364%);
    }

    .art-work-dots ul li:nth-of-type(11) {
        display: block;


        transform: translate(-962%, 571%);
    }

    .art-work-dots ul li:nth-of-type(12) {
        display: block;
        transform: translate(-745%, 529%);
    }

    .art-work-dots ul li:nth-of-type(13) {
        display: block;
        transform: translate(-450%, 318%);
    }

    .art-work-dots ul li:nth-of-type(14) {
        display: block;
        transform: translate(-542%, 569%);
    }




    /*  .art-work-list */

    .art-work-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: 1;
        grid-auto-flow: row dense;
        align-items: start;
        gap: 6px;
        max-width: 600px;
        min-width: 0;
        position: relative;
        z-index: 10;
    }

    /* .art-work .column-card */

    .art-work .column-card {
        margin-left: auto;
        grid-column: 2;
        min-width: 300px;
    }



    .art-work .column-card {
        grid-column: 2;
        min-width: 300px;
    }

    /*  .art-work.visual-card  */

    .art-work .visual-card {

        max-width: 344px;
        width: max(290px, 75%);
        margin-inline: auto;
        padding: 3px;
    }

    .art-work .visual-card h3 {
        padding: 6px 6px;
        font-size: 16px;
    }

    /* .art-work .visual-card -tall */

    .art-work.visual-card-tall {
        box-shadow:
            -25px 25px 0 0 var(--pink);
    }

    .visual-card-tall .visual-card__media {
        aspect-ratio: 1/1.8;
    }
}

/* .art-work .visual-card -small */



@media screen and (min-width:1024px) {


    /* .art-work */

    .art-work {
        margin-inline: auto;
        width: 95vw;
        max-width: 1300px;
    }



    /*  .art-work .container */

    .art-work .container {
        grid-template-columns: 1fr 1fr 320px;
    }

    /*   .art-work-list-wrapper  */

    .art-work-list-wrapper {

        grid-template-columns: 1fr 1fr;
        grid-column: 1 / 3;
        transform: translate(calc(var(--step-x) * -1), var(--step-y));
    }

    /* .art-work-late  */

    .art-work-late {
        grid-template-rows: 1fr 1fr;
    }

    /* .art-work .column-card  */

    .art-work .column-card-wrapper {
        grid-column: 3;
        /* 右端の列へ */
        grid-row: 1 / 3;
        transform: translate(20px, calc(-140px * -1));
    }

    .art-work .column-card {
        position: relative;
        --x: 30px;
        --y: 30px;
        margin-bottom: 32px;
        margin-inline: auto;
        box-shadow:
            25px 25px 0 0 var(--yellow);
        z-index: 3
    }







}







/* ------------------------------
  装飾的要素　ドットの挙動
------------------------------ */
/* 変数をトランジション可能に */
@property --aw-baseY {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 164px;
}

@property --aw-fy {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 164px;
}

@property --aw-r {
    syntax: '<angle>';
    inherits: false;
    initial-value: 16deg;
}

/* ふわふわ用キーフレーム（art-work 専用名） */
@keyframes awDotFloatY {
    0% {
        --aw-fy: 0px;
    }

    50% {
        --aw-fy: var(--aw-float-amp, 64px);
    }

    100% {
        --aw-fy: calc(var(--aw-float-amp, 80px) * -0.66);
    }
}

@keyframes awDotRotDrift {
    0% {
        --aw-r: calc(var(--aw-rot-amp, 1.2deg) * -1);
    }

    50% {
        --aw-r: 0deg;
    }

    100% {
        --aw-r: var(--aw-rot-amp, 1.2deg);
    }
}

/* 出現前のベース（li 内の img にだけ適用） */
.art-work-dots li img {
    /* 調整用（ul や section の style= で上書き可） */
    --aw-drop-dur: 0.4s;
    /* 出現の所要時間 */
    --aw-appear-delay: .30s;
    /* 出現開始前の“溜め” */
    --aw-drop-ease: cubic-bezier(.22, 1, .36, 1);
    /* やさしく収束 */

    /* 方向はクラス/データ属性で上書き（下にユーティリティあり） */
    --aw-baseY: 14px;
    /* 下から出す。上からなら -14px */
    --aw-fy: 0px;
    /* ふわふわ(出現中は0) */
    --aw-r: 0deg;

    opacity: 0;
    transform: translateY(calc(var(--aw-baseY) + var(--aw-fy))) rotate(var(--aw-r));
    transition:
        opacity .40s ease var(--aw-appear-delay),
        /* transform 自体を可変時間でトランジション */
        transform var(--aw-drop-dur) var(--aw-drop-ease) var(--aw-appear-delay);
    will-change: transform, opacity;
}

/* 表示状態：baseY→0 に。出現直後に常時アニメ開始 */
.art-work-dots li.is-inview img {
    opacity: 1;
    --aw-baseY: 0px;
    --aw-start-float: calc(var(--aw-appear-delay) + var(--aw-drop-dur) + .04s);
    animation:
        awDotFloatY var(--aw-float-dur, .1s) ease-in-out var(--aw-start-float) infinite alternate,
        awDotRotDrift var(--aw-rot-dur, .3s) ease-in-out var(--aw-start-float) infinite alternate;
    /* 常時は aw-fy/aw-r を合成してスムーズ継続 */
    transform: translateY(calc(var(--aw-baseY) + var(--aw-fy))) rotate(var(--aw-r));
}

/* 方向ユーティリティ（li に付ける） */
.aw-from-top {
    --aw-baseY: 128px;
}

.aw-from-bottom {
    --aw-baseY: 128px;
}

/* 斜めにしたい場合はX方向も併用したいですが、今回はYのみでOK */

/* 動きを抑える環境 */
@media (prefers-reduced-motion: reduce) {
    .art-work-dots li img {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .art-work-dots li.is-inview img {
        animation: none !important;
    }
}


/* ------------------------------
  Section: Lineups
------------------------------ */
.lineups {
    /* background-color: var(--yellow);
    background-image: url(../img/dot/dot@4x.png); */
    background: url(../img/dot/dot@4x.png) 0 0 / 1px 1px repeat var(--yellow);
    padding-top: 32px;
    padding-bottom: 128px;
    border: 6px solid var(--card-stroke);
    border-radius: 60px;
    position: relative;
}

/* .lineups-title  */

.lineups-title {
    position: relative;
    margin-inline: auto;
    margin-bottom: 32px;
    max-width: 1300px;
}

.lineups-title-logo {
    position: relative;
    max-width: 450px;
    width: max(228px, 64%);
    margin: 0 auto;
    z-index: 10;
}

.lineups-title-logo h2:first-child {

    left: 0;
    bottom: 0;
    max-width: 480px;
    width: max(173px, 75%);
    z-index: 2;
}

.lineups-title-logo h2:last-child {
    position: absolute;
    top: 70%;
    left: 58%;
    max-width: 300px;
    width: max(105px, 45%);
    z-index: 1;
}

/* .lineups-dots */

.lineups-dots {
    position: absolute;
    max-width: 1300px;
    min-width: 800px;
    margin: 0 auto;
    margin-inline: auto;
    pointer-events: none;
    top: -30%;
}

.lineups-dots ul {
    position: relative;

    display: flex;
    width: 100%;
}


.lineups-dots ul li {

    max-width: 200px;

}

.lineups-dots ul li:nth-of-type(1),
.lineups-dots ul li:nth-of-type(2),
.lineups-dots ul li:nth-of-type(3),
.lineups-dots ul li:nth-of-type(6) {
    display: none;

}


.lineups-dots ul li:nth-of-type(4) {

    min-width: 250px;
    transition: transform .25s ease;
    transform: translate(53%, -39%) rotate(-10deg);
    transform-origin: center;
}

.lineups-dots ul li:nth-of-type(5) {

    max-width: 130px;
    min-width: 170px;
    transition: transform .25s ease;
    transform: translate(-123%, -60%) rotate(-20deg);
    transform-origin: center;
}



/* .lineups .container  */

.lineups .container {
    display: grid;

    gap: 16px;
    align-items: start;
    position: relative;
    overflow: visible;
    isolation: isolate;
}


/* .lineups-list */

.lineups-list {
    margin-inline: auto;
    display: grid;
    max-width: 320px;
    padding: 0;
    /* モバイルは1列 */
    gap: 6px;
    align-items: start;
    z-index: 3;
}

/* recordgoods の子を親グリッドへ“直参”させる(余計な入れ子をなくす) */
.lineups .recordgoods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    gap: 6px;
}

/* .lineups .column-card  */

.lineups .column-card {
    --x: -30px;
    --y: -30px;
    margin-inline: auto;
    margin-bottom: 32px;
    box-shadow: -16px -16px 0 0 var(--blue);
}

/* .lineups .visual-card */

/* カード影などは既存通り */
.lineups .visual-card {
    box-shadow: 16px 13px 0 0 var(--blue);
    max-width: 155px;
}

.lineups .visual-card h3 {
    padding: 2px 6px;
    font-size: 0.8rem;
}

/* .lineups .visual-card-wide */

.lineups .visual-card-wide {
    min-width: 320px;
}

.lineups .visual-card-wide .visual-card__media {
    aspect-ratio: 2.3/1;
}


/* .lineups .visual-card-small */

.lineups .visual-card-small .visual-card__media {
    aspect-ratio: 1/0.8;
}









.lineups .container {
    overflow: visible;
}



/* ============== Tablet (≥600px) ============== */
@media (min-width: 600px) {

    .lineups {
        background-color: var(--yellow);
        border-radius: 60px;
    }


    /* lineups-dots */


    .lineups-dots ul li:nth-of-type(4) {
        max-width: 310px;
        min-width: 280px;
        transform: translate(110%, -20%) rotate(20deg);
    }

    .lineups-dots ul li:nth-of-type(5) {
        max-width: 210px;
        min-width: 171px;
        transition: transform .25s ease;
        transform: translate(-45%, -41%) rotate(-20deg);
        transform-origin: center;
    }




    .lineups .column-card-wrapper {
        grid-column: 1;
        transform: translate(-110px, 20px);
    }

    .lineups .column-card {
        min-width: 300px;
    }

    .lineups-list {
        margin-inline: auto;
        display: grid;
        max-width: 600px;
        padding: 0;
        /* モバイルは1列 */
        gap: 6px;
        align-items: start;
        z-index: 3;
    }



    .lineups .visual-card {
        box-shadow: 20px 20px 0 0 var(--blue);
    }

    .lineups .visual-card h3 {
        padding: 6px 6px;
        font-size: 16px;
    }

    .lineups .visual-card-small {

        max-width: 300px;
    }

    .lineups-list>.visual-card:first-child {

        grid-column: 1 / -1;
        /* 2カラムぶち抜き */
        max-width: none;
        /* ← 固定上限を解除 */
        width: 100%;
        /* ← トラック幅いっぱいに */
        margin-inline: 0;
        /* ← autoで中央寄せを解除 */
        justify-self: stretch;
        /* 念のため */
    }

    .lineups-list>.visual-card {
        max-width: none;

        width: 100%;
        margin-inline: 0;
    }

    .lineups-list>.visual-card>a>.visual-card__media:first-child {
        aspect-ratio: 4/1.6;
    }
}

@media (min-width: 800px) {

    /* lineups-dots */

    .lineups-dots ul li:nth-of-type(1) {
        display: block;
        /* max-width: 300px; */
        min-width: 300px;
        /* width: 30vw; */
        /* height: 30vh; */
        aspect-ratio: 1 / 1;
        /* width: 97vw; */
        transition: transform .25s ease;
        transform: translate(181%, 99%);
    }

    .lineups-dots ul li:nth-of-type(2) {
        display: block;
        max-width: 300px;
        min-width: 300px;
        width: 97vw;
        transition: transform .25s ease;
        transform: translate(-103%, 208%);
    }

    .lineups-dots ul li:nth-of-type(3) {
        display: block;
        max-width: 300px;
        min-width: 300px;
        width: 97vw;
        transition: transform .25s ease;
        transform: translate(-3%, 256%);
    }

    .lineups-dots ul li:nth-of-type(4) {
        max-width: 310px;
        min-width: 280px;
        transition: transform .25s ease;
        transform: translate(-179%, -20%) rotate(20deg);

    }

    .lineups-dots ul li:nth-of-type(5) {
        max-width: 210px;
        min-width: 200px;
        transition: transform .25s ease;
        transform: translate(-448%, -41%) rotate(-20deg);
        transform-origin: center;
    }

    /* .lineups .visual-card */

    .lineups .visual-card {
        box-shadow: 20px 20px 0 0 var(--blue);
    }

}


@media (min-width: 1024px) {

    /* .lineups */

    .lineups {
        max-width: 1300px;
        margin-inline: auto;
        width: 95vw;
        border-radius: 100px;
    }

    /* .lineups-dots */

    .lineups-dots ul li:nth-of-type(1) {
        display: block;
        max-width: 300px;
        min-width: 278px;
        transform: translate(35%, -17%);
    }

    .lineups-dots ul li:nth-of-type(2) {
        display: block;
        max-width: 300px;
        min-width: 300px;
        width: 97vw;
        transform: translate(-96%, 108%);
    }

    .lineups-dots ul li:nth-of-type(3) {
        display: block;
        position: absolute;
        max-width: 300px;
        min-width: 300px;
        width: 97vw;
        transform: translate(25%, 196%);
    }

    .lineups-dots ul li:nth-of-type(4) {
        max-width: 310px;
        min-width: 300px;
        transform: translate(6%, -4%);
    }


    .lineups-dots ul li:nth-of-type(5) {
        max-width: 210px;
        min-width: 220px;
        transition: transform .25s ease;
        transform: translate(-173%, -38%) rotate(-20deg);
        transform-origin: center;
    }

    /* .lineups .container  */

    .lineups .container {
        grid-template-columns: 300px 600px;
        /* 左サイド/右コンテンツ */

        align-items: start;
    }

    .lineups .column-card-wrapper {
        min-width: 300px;
        transform: translate(10px, 0px);
    }

    /* .lineups .visual-card */

    .lineups .visual-card {
        box-shadow: 5px 20px 0 0 var(--blue);
    }
}

@media screen and (min-width: 1280px) {

    .lineups-dots ul li:nth-of-type(4) {

        transform: translate(89%, -4%);
    }


    .lineups-dots ul li:nth-of-type(5) {

        transform: translate(-43%, -38%) rotate(-20deg);

    }


    .lineups-dots ul li:nth-of-type(6) {
        display: block;
        max-width: 335px;
        min-width: 393px;
        transition: transform .25s ease;
        transform: translate(-68%, 120%);
    }

      /* .lineups .visual-card */

    .lineups .visual-card {
        box-shadow: 20px 20px 0 0 var(--blue);
    }
}











/* ------------------------------
  装飾的要素　ドットの挙動
------------------------------ */

/* 変数（出現用・常時ゆれ用） */
@property --lu-baseY {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 0px;
}

@property --lu-fy {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 0px;
}

@property --lu-r {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --lu-spin-r {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* 常時ゆれ（lineups専用のキー名） */
@keyframes luDotFloatY {
    0% {
        --lu-fy: 0px;
    }

    50% {
        --lu-fy: var(--lu-float-amp, 6px);
    }

    100% {
        --lu-fy: calc(var(--lu-float-amp, 6px) * -0.66);
    }
}

@keyframes luDotRotDrift {
    0% {
        --lu-r: calc(var(--lu-rot-amp, 1.2deg) * -1);
    }

    50% {
        --lu-r: 0deg;
    }

    100% {
        --lu-r: var(--lu-rot-amp, 1.2deg);
    }
}

/* ドットの回転（lineups専用のキー名） */
@keyframes luDotSpin {
    0% {
        --lu-spin-r: 0deg;
    }

    100% {
        --lu-spin-r: 360deg;
    }
}

@keyframes luDotSpinReverse {
    0% {
        --lu-spin-r: 0deg;
    }

    100% {
        --lu-spin-r: -360deg;
        /* 反時計回り */
    }
}


/* 出現前（li > img に適用） */
.lineups-dots li img {
    /* 好みのデフォルト（上書き可） */
    --lu-drop-dur: 1.0s;
    /* 出現時間 */
    --lu-appear-delay: .10s;
    /* 出現前の“溜め” */
    --lu-drop-ease: cubic-bezier(.22, 1, .36, 1);
    /* やさしく収束 */

    /* 方向（下から）。上からなら .lu-from-top を li に付与 */
    --lu-baseY: 14px;
    --lu-fy: 0px;
    --lu-r: 0deg;

    opacity: 0;
    transform:
        translateY(calc(var(--lu-baseY) + var(--lu-fy))) rotate(calc(var(--lu-r) + var(--lu-spin-r, 0deg)));
    transition:
        opacity .38s ease var(--lu-appear-delay),
        transform var(--lu-drop-dur) var(--lu-drop-ease) var(--lu-appear-delay);
    will-change: transform, opacity;
}

/* 出現後：baseY→0、直後に常時ゆれ開始 */
.lineups-dots li.is-inview img {
    opacity: 1;
    --lu-baseY: 10px;
    --lu-start-float: calc(var(--lu-appear-delay) + var(--lu-drop-dur) + .04s);

    animation:
        luDotFloatY var(--lu-float-dur, 5s) ease-in-out var(--lu-start-float) infinite alternate;
}

/* 方向ユーティリティ（必要な li に付与） */
.lu-from-top {
    --lu-baseY: -16px;
}

.lu-from-bottom {
    --lu-baseY: 16px;
}



/* 出現後：ふわふわ＋ぐるぐる回転 */
.lineups-dots li.lu-spin.is-inview img {
    animation:
        luDotFloatY var(--lu-float-dur, 8s) ease-in-out var(--lu-start-float) infinite alternate,
        luDotSpin 30s linear var(--lu-start-float) infinite;
    /* ★追加 */
}

.lineups-dots li.lu-counter.is-inview img {
    animation:
        luDotFloatY var(--lu-float-dur, 8s) ease-in-out var(--lu-start-float) infinite alternate,
        luDotSpinReverse 26s linear var(--lu-start-float) infinite;
}



/* デフォルト相当 */

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
    .lineups-dots li img {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .lineups-dots li.is-inview img {
        animation: none !important;
    }
}





/* ------------------------------
  Section: Access
------------------------------ */

.access {
    position: relative;
    overflow: clip;
    padding-top: 80px;
    padding-bottom: 32px;
    margin-top: 64px;
    background-color: #fff;
}

.access-title {
    text-align: center;
    margin-bottom: 64px;
}

.access-title-logo {
    position: relative;
    max-width: 765px;
    width: max(288px, 77%);
    margin: 0 auto;
    z-index: 100;
}

.access-title-logo-text {
    display: flex;
    max-width: 765px;
    width: max(288px, 77%);
    margin: 0 auto;
    z-index: 100;
}

.access-title-logo-text h2 {
    z-index: 100;
    margin: 0;
}

.access-title-logo-text h2:first-child {
    max-width: 248px;
    width: max(100px, 30%);
    z-index: 100;
}

.access-title-logo-text h2:last-child {
    max-width: 522px;
    width: max(203px, 70%);
    z-index: 100;
}

.access-title-dots {
    position: absolute;
    max-width: 293px;
    width: max(111px, 38%);
    pointer-events: none;
    z-index: 10;
    left: 25%;
    top: 120%;

}

.access-title-dots ul {
    position: relative;
    /*     display: flex; */
    width: 100%;
}

.access-title-dots ul li {
    background-color: #fff;
    aspect-ratio: 1/1;
    border: 1px solid var(--ink);
    border-radius: 50%;
}

.access-title-dots ul li:nth-of-type(1) {
    position: absolute;
    max-width: 90px;
    width: 10vw;
    aspect-ratio: 1/1;
    border: 1px solid var(--ink);
    border-radius: 50%;
    left: 20%;
    bottom: 1%;
    z-index: 1;
}

.access-title-dots ul li:nth-of-type(2) {
    position: absolute;
    max-width: 115px;
    width: 12vw;
    left: 45%;
    bottom: 1%;
    z-index: 2;
}

.access-title-dots ul li:nth-of-type(3) {
    position: absolute;
    max-width: 134px;
    width: 14vw;
    left: 70%;
    bottom: 1%;
    z-index: 3;

}


.access .container {
    display: grid;
    align-items: start;
    margin-bottom: 32px;
}

.access .column-card {
    --x: 30px;
    --y: 30px;
    margin-bottom: 32px;
    margin-inline: auto;
    box-shadow:
        25px 20px 0 0 var(--ink);
    margin-bottom: 64px;
    text-align: center;


}

.access-dot {
    max-width: 700px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
    margin-bottom: 32px;

    /* @media (width >=600px) {
        display: flex;
    } */

}

.access-slider-wrapper {
    max-width: 800px;
    margin-inline: auto;
}

.access-slider {
    display: flex;

}

/* .access-slider-dot{
   
    min-width: 100px;
    max-width: 120px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 10px solid var(--card-stroke);
} */

.access-slider img {
    margin: 30px 140px;
    min-width: 100px;
    max-width: 120px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    /*  border: 10px solid var(--card-stroke); */
}


.access-slider {
    visibility: hidden;
}

.access-slider.slick-initialized {
    visibility: visible;
}

/* slick を flex で横一列に（wrapさせない） */
.access-slider .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* ← 2段化の主因を封じる */
    align-items: stretch;
}

/* 各スライドは float 解除＋縮み可＋はみ出し抑制 */
.access-slider .slick-slide {
    float: none !important;
    height: auto;
    flex: 0 0 auto;
    /* 幅はJSで設定されるので“固定”扱い */
    min-width: 0;
    /* コンテンツ最小幅のせいで折返さない */
    box-sizing: border-box;
}

/* 画像は事前に縦比率を予約（高さのガタつき＝再レイアウトを防ぐ） */
.access-slider img.prot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/ 1;
    /* 実画像に合わせて変更 */
    object-fit: cover;
}

/* slick-listははみ出しを隠す */
.access-slider .slick-list {
    overflow: hidden;
}

/* スライド間の余白：gapは.trackでは使わず、スライド内paddingで作るのが安定 */
.access-slider .slick-slide>* {
    padding: 0 8px;
}

/* 例：左右8px */



@media screen and (min-width:600px) {

    .access {
        padding-top: 128px;
    }

    .access-dot {
        grid-template-columns: 1fr 1fr;
    }

    .access .column-card {
        grid-column: 1;
        text-align: center;
    }



}

@media screen and (min-width:1024px) {

    /* .access */

    .access {
        margin-top: 100px;
    }

    .access .container {
        grid-template-columns: 1fr 1fr 1fr;

    }

    .access .column-card {
        min-width: 300px;
        grid-column: 3;
        grid-row: 1 / 2;
        text-align: left;
    }

    .access-dot {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        gap: 32px;
    }


}

/* ------------------------------
  装飾的要素　ドットの挙動
------------------------------ */

/* 追加：ポップ用のスケール変数（アニメ可能に） */
@property --ac-pop-s {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

/* 初期：ちょい小さく＆透明（既存）→ is-inview で scale(1) へ */
.access-title-dots li {
    --ac-pop-ease: cubic-bezier(.25, 1, .35, 1);
    --ac-s: 1;
    /* 脈動用（既存） */
    --ac-pop-s: .8;
    /* ★ ポップ用（初期は小さめ） */
    opacity: 0;
    filter: blur(1.5px);

    /* ★ 変換は “脈動 × ポップ” の合成。どちらかゼロでもガクッなし */
    transform: scale(calc(var(--ac-s) * var(--ac-pop-s)));

    transition:
        opacity .38s var(--ac-pop-ease),
        transform .38s var(--ac-pop-ease),
        filter .32s ease;
}

/* ===== 出現（ポン・ポン・ポン） ===== */
.access-title-dots li {
    --ac-pop-ease: cubic-bezier(.25, 1, .35, 1);
    opacity: 0;
    transform: scale(.8);
    filter: blur(1.5px);
    transition:
        opacity .38s var(--ac-pop-ease),
        transform .38s var(--ac-pop-ease),
        filter .32s ease;
}

/* ul に is-inview が付いたら順に“ポン” */
.access-title-dots ul.is-inview li {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.access-title-dots ul.is-inview li:nth-child(1) {
    transition-delay: 1000ms;
}

.access-title-dots ul.is-inview li:nth-child(2) {
    transition-delay: 1400ms;
}

.access-title-dots ul.is-inview li:nth-child(3) {
    transition-delay: 1800ms;
}

/* ===== 出現後の“ときどき脈動” ===== */
/* 変数をアニメ可能に（ズーム量） */
@property --ac-s {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

/* 合成は scale(var(--ac-s))。初期は1 */
.access-title-dots li {
    --ac-s: 1;
}

.access-title-dots li {
    transform: scale(var(--ac-s));
}

/* キーフレーム：左・中・右で役割を変える */
@keyframes acPulseL {

    0%,
    18% {
        --ac-s: 1;
    }

    /* 平常 */
    22% {
        --ac-s: 1.16;
    }

    /* 左が大きく */
    32% {
        --ac-s: 1;
    }

    48% {
        --ac-s: .92;
    }

    /* 左が小さく */
    58% {
        --ac-s: 1;
    }

    100% {
        --ac-s: 1;
    }
}

@keyframes acPulseC {

    0%,
    18% {
        --ac-s: 1;
    }

    22% {
        --ac-s: 1.06;
    }

    /* ほんのり追随 */
    32% {
        --ac-s: 1;
    }

    48% {
        --ac-s: .97;
    }

    58% {
        --ac-s: 1;
    }

    100% {
        --ac-s: 1;
    }
}

@keyframes acPulseR {

    0%,
    18% {
        --ac-s: 1;
    }

    28% {
        --ac-s: 1.14;
    }

    /* 右が大きく（左の直後）*/
    38% {
        --ac-s: 1;
    }

    68% {
        --ac-s: 1.18;
    }

    /* 再び右が大きく */
    78% {
        --ac-s: 1;
    }

    /* そして縮む（平常へ）*/
    100% {
        --ac-s: 1;
    }
}

/* 出現完了の少し後に脈動をスタート（ul に .is-ready を付与） */
.access-title-dots ul.is-ready li:nth-child(1) {
    animation: acPulseL 10s ease-in-out .25s infinite;
}

.access-title-dots ul.is-ready li:nth-child(2) {
    animation: acPulseC 10s ease-in-out .25s infinite;
}

.access-title-dots ul.is-ready li:nth-child(3) {
    animation: acPulseR 10s ease-in-out .25s infinite;
}

/* モーション控えめ環境 */
@media (prefers-reduced-motion: reduce) {
    .access-title-dots li {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    .access-title-dots ul.is-ready li {
        animation: none !important;
    }
}

/* ヴィジュアルドット，テキストドット */

/* アクセス専用の揺れ用プロパティ */
@property --ad-fy {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 0px;
}

@property --ad-r {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* ふわふわのキー（上下／回転） */
@keyframes adFloatY {
    0% {
        --ad-fy: 0px;
    }

    50% {
        --ad-fy: var(--ad-amp, 8px);
    }

    100% {
        --ad-fy: calc(var(--ad-amp, 8px) * -0.66);
    }
}

@keyframes adRotDrift {
    0% {
        --ad-r: calc(var(--ad-rot, 1.2deg) * -1);
    }

    50% {
        --ad-r: 0deg;
    }

    100% {
        --ad-r: var(--ad-rot, 1.2deg);
    }
}

/* 対象：.visual-dot と .text-dot（ブロックごとゆらす） */

.access-dot .visual-dot,
.access-dot .text-dot {
    /* デフォ（個別に上書き可） */
    /* 上下の振幅 */
    --ad-amp: 8px;
    /* 上下の周期 */
    --ad-dur: 9s;
    /* 回転の振幅 */
    --ad-rot: 1.2deg;
    /* 回転の周期 */
    --ad-rot-dur: 16s;
    /* 開始ディレイ（片方に少しずらすと自然） */
    --ad-delay: .0s;

    transform: translateY(var(--ad-fy)) rotate(var(--ad-r));
    transform-origin: center;
    will-change: transform;

    /* 常時ふわふわ */
    animation:
        adFloatY var(--ad-dur) ease-in-out var(--ad-delay) infinite alternate,
        adRotDrift var(--ad-rot-dur) ease-in-out var(--ad-delay) infinite alternate;
    animation-fill-mode: both;
}

/* 片方だけフェーズをずらすと“掛け合い”っぽく見える（任意） */
.access-dot .visual-dot {
    --ad-delay: 2.15s;
    --ad-rot: 12.2deg;
}

.access-dot .text-dot {
    --ad-amp: 16px;
    --ad-delay: .35s;
    --ad-r: calc(var(--ad-rot) * -1);
    --ad-fy: 0px;
}

/* 中身の見た目はそのまま（必要なら） */
.access-dot .visual-dot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

/* transform影響の意図せぬ横幅変化防止 */
.access-dot .text-dot {
    display: inline-block;
}

/* モーション控えめ環境の配慮 */
@media (prefers-reduced-motion: reduce) {

    .access-dot .visual-dot,
    .access-dot .text-dot {
        animation: none !important;
        transform: none !important;
    }

}



/* ------------------------------
スリックスライダーの浮遊
------------------------------ */

/* ふわふわ用 */
.access-slider img {
    display: block;
    will-change: transform;
    transform-origin: center center;

    /* デフォルト（JSで上書きされる） */
    --ampX: 0px;
    --ampY: .6px;
    --rot: 0deg;
    --dur: 8s;
    --delay: 1s;

    animation: float var(--dur) ease-in-out var(--delay) infinite alternate;
}

/* 1本のキーフレームで X/Y/回転 をまとめて揺らす */
@keyframes float {
    0% {
        transform: translate(calc(var(--ampX) * 0), calc(var(--ampY) * -1)) rotate(calc(var(--rot) * -1));
    }

    25% {
        transform: translate(calc(var(--ampX) * .1), calc(var(--ampY) * -0.2)) rotate(calc(var(--rot) * .4));
    }

    50% {
        transform: translate(calc(var(--ampX) * 0), calc(var(--ampY) * 0.3)) rotate(calc(var(--rot) * -0.2));
    }

    75% {
        transform: translate(calc(var(--ampX) * 0), calc(var(--ampY) * 0.4)) rotate(calc(var(--rot) * .6));
    }

    100% {
        transform: translate(var(--ampX), var(--ampY)) rotate(var(--rot));
    }
}

/* ユーザーが低速アニメを望む場合の配慮 */
@media (prefers-reduced-motion: reduce) {
    .prot {
        animation: none !important;
    }
}

/* お店リンクのホバー要素 */
/* 好みで微調整 */
:root {
    --zoom-dur: .28s;
    --zoom-ease: cubic-bezier(.2, .9, .2, 1);
    --hover-scale: 1.03;
    --backdrop: rgba(10, 10, 10, .55);
}

#zoom-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--zoom-dur) linear;
    z-index: 9999;
}

#zoom-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

#zoom-modal .zoom-backdrop {
    position: absolute;
    inset: 0;
    background: var(--backdrop);
    border: 0;
    padding: 0;
    margin: 0;
}

#zoom-modal .zoom-body {
    position: relative;
    margin: 0;
    padding: 0;
    max-width: min(92vw, 1200px);
    max-height: 92vh;
    display: grid;
    place-items: center;
    transform: scale(.96);
    opacity: 0;
    transition:
        transform var(--zoom-dur) var(--zoom-ease),
        opacity var(--zoom-dur) linear;
    will-change: transform, opacity;
}

#zoom-modal.is-open .zoom-body {
    transform: scale(1);
    opacity: 1;
}

#zoom-modal img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    /* 透過PNGの下に白を敷きたい場合 */
    box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
    transition: transform .18s ease-out;
}

@media (hover:hover) {
    #zoom-modal img:hover {
        transform: scale(var(--hover-scale));
    }

    #zoom-modal {
        cursor: zoom-out;
    }
}



/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce) {

    #zoom-modal,
    #zoom-modal .zoom-body,
    #zoom-modal img {
        transition: none !important;
    }
}




/* ------------------------------
  Footer
------------------------------ */
footer {
    text-align: center;
    padding: 28px 0;
    background: #f8efe3;
    border: 3px solid var(--card-stroke);
}







/* ========== マウスフォロー ========== */
.mouse-follow {
    position: fixed;
    pointer-events: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, .35);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    left: -100px;
    top: -100px;
    z-index: 70
}

/* ////バグ対処//////// */

@media (min-width: 768px) {
    :root {
        --header-h: 80px;
    }
}

/* ハッシュ着地のときにヘッダー高さぶん余白を確保 */
#our-policy,
#art-work,
#lineups,
#access {
    scroll-margin-top: var(--header-h);
}

/* 念のため“滑らかスクロール”を無効化したいなら */
html {
    scroll-behavior: auto;
}

/* 横スクロールさせない要素などに */
.scroll-area {
    touch-action: pan-y;
}

/* バグとり */

html,
body {
    height: 100%;
}

body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* コンテンツ領域が伸びる */
footer {
    margin-top: auto;
}

.access {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* 全“全画面系”セクション */
body {
    min-height: 100dvh;
    /* 100vh → 100dvh に */
}