@charset "UTF-8";

/* ====================
    ★★ BASE ★★
====================*/
html {
    font-size: 62.5%;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--ff-sans);
    font-size: var(--fz-16-18);
    line-height: var(--lh-base);
    font-weight: 400;

}

html,
body {
    overflow-x: clip;
}

@supports not (overflow: clip) {

    html,
    body {
        overflow-x: hidden;
    }
}

[hidden] {
    display: none !important;
}

/* skip link */
.skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateY(-140%);
    transition: transform .2s;
    z-index: 9999;
}

.skip-link:focus {
    transform: translateY(0);
}

/* screen reader only */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.u-br-sp {
    display: none;
}

@media (max-width: 480px) {
    .u-br-sp {
        display: inline;
    }
}

.u-br-pc {
    display: inline;
}

@media (max-width: 1040px) {
    .u-br-pc {
        display: none;
    }
}

@media (min-width: 1041px) {
    .u-br-pchd {
        display: none;
    }
}


/* 共通設定 */
/* ====================
    Button Component
==================== */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-block-size: var(--btn-h);
    padding-inline: var(--btn-pad-x);
    border-radius: var(--btn-radius);
    text-decoration: none;
    background: var(--btn-bg, #63b0b8);
    color: var(--btn-fg);
    letter-spacing: var(--btn-letter-spacing);
    font-family: var(--ff-sans, inherit);
    white-space: nowrap;
    box-shadow: var(--btn-shadow);
    transition: transform .12s ease, filter .12s ease;
    line-height: 1;
}

.c-btn--w {
    inline-size: clamp(0px, 100%, var(--btn-w));
}

/* hover/active */
.c-btn:hover {
    transform: translateY(var(--btn-hover-lift));
    filter: brightness(var(--btn-hover-brightness));
}

.c-btn:active {
    transform: translateY(var(--btn-active-lift));
    filter: brightness(var(--btn-active-brightness));
}

.c-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ========== Arrow (⇀) ボタン内矢印========== */
.c-btn__arrow {
    position: relative;
    flex: 0 0 auto;
    flex-shrink: 0;
    inline-size: var(--btn-arrow-w);
    block-size: var(--btn-arrow-stroke);
    border-radius: 999px;
    background: currentColor;
    transform: translateY(var(--btn-arrow-translate-y));
}

.c-btn__arrow::before {
    content: "";
    position: absolute;
    top: calc(50% - (var(--btn-arrow-stroke) / 2));
    right: 0;
    inline-size: var(--btn-arrow-head-w);
    block-size: var(--btn-arrow-stroke);
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: calc(100% - 1px) 50%;
}

@media (max-width: 480px) {
    .c-btn--w {
        inline-size: 100%;
    }
}


/* ====================
    ★ HEADER ★
==================== */
.header {
    /* ===== ★運用変数★ ===== */
    --header-marble-opacity: .4;
    --header-panel-logo-h: clamp(60px, 14vw, 110px);

    --header-inner-pad-x: 36px;
    --header-inner-gap: 24px;
    --header-nav-gap: 50px;

    --header-panel-padding: 56px 20px 40px;
    --header-panel-row-gap: 20px;
    --header-panel-head-w: 100%;
    --header-panel-cta-mt: 40px;

    /* ===== ★骨格★ ===== */
    --header-nav-display: block;
    --header-cta-display: inline-flex;
    --header-menu-display: none;
    --header-inner-justify: flex-start;
    --header-panel-top: var(--header-h);

    position: sticky;
    top: 0;
    z-index: 2100;
    background: var(--color-bg);
    isolation: isolate;

    --marble-img: var(--tex-marble-img);
    --marble-repeat: var(--tex-marble-repeat);
    --marble-size: var(--tex-marble-size);
    --marble-position: var(--tex-marble-position);
    --marble-opacity: var(--header-marble-opacity);
}

.header::before,
.header__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        var(--marble-img) var(--marble-position) / var(--marble-size) var(--marble-repeat);
    opacity: var(--marble-opacity);
}

/* inner */
.header__inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: var(--header-inner-justify);
    gap: var(--header-inner-gap);
    padding-inline: var(--header-inner-pad-x);
    position: relative;
    z-index: 1;
}

.header__logo img {
    display: block;
    height: clamp(69px, 10vw, 94px);
    width: auto;
}

/* PC nav */
.header__nav {
    display: var(--header-nav-display);
    margin-left: auto;
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap);
    list-style: none;
    padding: 0;
    margin: 0;
}

.header__nav-link {
    display: grid;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    justify-items: center;
}

.header__nav-link:hover {
    opacity: .8;
}

.header__nav-en {
    font-family: var(--ff-serif);
    font-size: var(--fz-16-18);
    letter-spacing: .12em;
    color: var(--color-primary);
}

.header__nav-ja {
    font-family: var(--ff-sans);
    font-size: calc(var(--fz-16-18) - .3rem);
    opacity: .9;
}

/* CTA */
.header__cta {
    display: var(--header-cta-display);
    margin-left: 30px;
    align-items: center;
    justify-content: center;
    width: var(--header-cta-w-pc);
    height: var(--header-cta-h-pc);
    padding-inline: var(--header-cta-pad-x-pc);
    border-radius: var(--header-cta-radius);
    background: var(--header-cta-bg);
    color: var(--header-cta-fg);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

.header__cta:hover {
    filter: brightness(.97);
}

.header__cta:active {
    filter: brightness(.93);
}

/* Hamburger */
.header__menu-btn {
    display: var(--header-menu-display);
    flex-direction: column;
    align-items: flex-end;
    width: 60px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-primary);
    position: relative;
    z-index: 2300;
}

.header__menu-text {
    font-family: var(--ff-display);
    font-size: var(--fz-15-16);
    letter-spacing: .02em;
    line-height: 1;
    margin-top: 6px;
}

.header__menu-icon {
    display: block;
    width: 48px;
    height: 14px;
    position: relative;
}

.header__menu-icon::before,
.header__menu-icon::after {
    content: "";
    position: absolute;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    transition: transform .2s, top .2s, width .2s;
}

.header__menu-icon::before {
    top: 0;
    left: 0;
    width: 48px;
}

.header__menu-icon::after {
    top: 12px;
    right: 0;
    width: 36px;
}

/* open：× */
.header__menu-btn[aria-expanded="true"] .header__menu-icon::before {
    top: 6px;
    width: 48px;
    transform: rotate(45deg);
    transform-origin: center;
}

.header__menu-btn[aria-expanded="true"] .header__menu-icon::after {
    top: 6px;
    width: 48px;
    transform: rotate(-45deg);
    transform-origin: center;
}

.header__menu-btn[aria-expanded="true"] .header__menu-text {
    display: none;
}

/* Panel */
.header__panel {
    position: fixed;
    inset-inline: 0;
    top: var(--header-panel-top);
    bottom: 0;
    z-index: 2000;
    background: var(--color-bg);
    padding: var(--header-panel-padding);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    justify-items: center;
    align-content: start;
    row-gap: var(--header-panel-row-gap);
    isolation: isolate;
}

.header__panel>* {
    position: relative;
    z-index: 1;
}

.header__panel-head {
    width: var(--header-panel-head-w);
    display: flex;
    justify-content: center;
    padding-bottom: 24px;
}

.header__panel-head .header__logo img {
    height: var(--header-panel-logo-h);
    width: auto;
    max-width: min(72vw, 360px);
}

.header__panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    row-gap: 28px;
}

.header__panel-link {
    display: grid;
    justify-items: center;
    row-gap: 6px;
    text-decoration: none;
    color: var(--color-text);
}

.header__panel-link span:first-child {
    font-family: var(--ff-display);
    font-size: var(--fz-20-26);
    letter-spacing: .12em;
    color: var(--color-primary);
}

.header__panel-link span:last-child {
    font-family: var(--ff-sans);
    font-size: 1.4rem;
    opacity: .9;
}

.header__panel-cta {
    justify-self: center;
    align-self: start;
    width: var(--header-panel-cta-w);
    height: var(--header-panel-cta-h);
    display: grid;
    place-items: center;
    border-radius: var(--header-cta-radius);
    background: var(--header-cta-bg);
    color: var(--header-cta-fg);
    text-decoration: none;
    margin-top: var(--header-panel-cta-mt);
    line-height: 1;
}

/* Backdrop */
.header__backdrop {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    z-index: 1900;
    background: rgba(0, 0, 0, .08);
}

/* open時：header内ロゴだけ非表示 */
.header:has(.header__menu-btn[aria-expanded="true"]) .header__inner>.header__logo,
.header.is-open .header__inner>.header__logo {
    visibility: hidden;
}

/* ===== HEADER（media queries） ===== */
@media (max-width:1040px) {
    .header {
        --header-inner-pad-x: 18px;
        --header-inner-justify: space-between;
        --header-nav-display: none;
        --header-cta-display: none;
        --header-menu-display: flex;

        --header-panel-padding: min(calc(var(--header-h) + 16px), 96px) 20px 40px;
        --header-panel-head-w: fit-content;
        --header-panel-cta-w: clamp(260px, 76vw, 340px);
        --header-panel-cta-mt: 40px;
    }
}

@media (max-width:480px) {
    .header {
        --header-panel-logo-h: clamp(72px, 22vw, 96px);
        --header-panel-padding: 24px 20px 40px;
        --header-panel-cta-w: clamp(240px, 72vw, 320px);
        --header-panel-cta-mt: 30px;
    }

    .header__panel-link span:first-child {
        font-size: var(--fz-16-18);
    }
}

/* no-js フォールバック */
.no-js .header__menu-btn {
    display: none;
}

@media (max-width:1040px) {

    .no-js .header__nav,
    .no-js .header__cta {
        display: block;
    }
}


/* ====================
    ★ HERO ★
==================== */
.hero {
    /* ===== ★運用変数★ ===== */
    --marble-img: var(--tex-marble-img);
    --marble-repeat: var(--tex-marble-repeat);
    --marble-size: var(--tex-marble-size);
    --marble-position: var(--tex-marble-position);
    --marble-opacity: .4;

    --hero-inline-pad: clamp(16px, 4vw, 64px);
    --hero-left: clamp(280px, 30vw, 520px);
    --hero-gap: clamp(16px, 2.8vw, 44px);
    --hero-row-gap: clamp(10px, 2.2vw, 24px);

    --hero-media-inset: 0px;
    --hero-slider-overlap: clamp(16px, 1.6vw, 34px);
    --hero-after-space: clamp(90px, 6vw, 120px);
    --hero-copy-top: clamp(8px, 6vw, 60px);
    --hero-copy-overlap: clamp(24px, 4vw, 56px);
    --hero-lead-tracking: .06em;
    --hero-marquee-duration: 60s;

    --hero-grid-cols: var(--hero-left) 1fr;
    --hero-slider-reserve: clamp(260px, 24vw, 340px);
    --hero-slider-img-w: clamp(220px, 20vw, 320px);
    --hero-slider-left: calc(-1 *(var(--hero-left) + var(--hero-gap)));
    --hero-slider-right: auto;
    --hero-slider-width: calc(100% + var(--hero-left) + var(--hero-gap));

    /* ===== ★骨格★ ===== */
    background: var(--color-bg);
    position: relative;
    isolation: isolate;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--marble-img) var(--marble-position) / var(--marble-size) var(--marble-repeat);
    opacity: var(--marble-opacity);
}

.hero__inner {
    width: 100%;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 56px) var(--hero-inline-pad);
    display: grid;
    grid-template-columns: var(--hero-grid-cols);
    column-gap: var(--hero-gap);
    row-gap: var(--hero-row-gap);
    align-items: start;
    position: relative;
    z-index: 1;
}

.hero__copy {
    position: relative;
    z-index: 2;
}

.hero__copy--col {
    margin-top: var(--hero-copy-top);
    margin-right: calc(-1 *var(--hero-copy-overlap));
}

.hero__title {
    margin: 0;
    color: #57849f;
    font: 500 var(--fz-20-26)/1.35 var(--ff-serif);
    white-space: nowrap;
}

.hero__catch {
    position: relative;
    z-index: 2;
}

.hero__lead,
.hero__brand {
    margin: 0;
}

.hero__lead {
    margin-top: clamp(14px, 1.8vw, 18px);
    color: #57849f;
    font-family: var(--ff-serif);
    font-size: var(--fz-26-40);
    font-weight: 500;
    white-space: nowrap;
    line-height: var(--lh-tight);
    letter-spacing: var(--hero-lead-tracking);
}

.hero__brand {
    margin-top: clamp(10px, 1.4vw, 14px);
    color: #fff;
    font-family: var(--ff-display);
    font-size: var(--fz-32-52);
    letter-spacing: .08em;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* main画像 */
.hero__media {
    position: relative;
    margin-right: calc(-1 *var(--hero-inline-pad));
    padding-bottom: calc(var(--hero-after-space) + var(--hero-slider-reserve));
    z-index: 1;
}

.hero__media-main {
    position: relative;
    overflow: hidden;
    border-top-left-radius: clamp(30px, 6vw, 50px);
    padding-left: var(--hero-media-inset);
}

.hero__media-main picture {
    display: block;
    border-top-left-radius: inherit;
}

.hero__media-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-top-left-radius: inherit;
}

.hero-slider {
    position: absolute;
    bottom: var(--hero-after-space);
    z-index: 2;
    left: var(--hero-slider-left);
    right: var(--hero-slider-right);
    width: var(--hero-slider-width);
    transform: translateY(calc(-1 *var(--hero-slider-overlap)));
    overflow: hidden;

    --hero-slider-fade: clamp(24px, 6vw, 72px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hero-slider-fade), #000 calc(100% - var(--hero-slider-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--hero-slider-fade), #000 calc(100% - var(--hero-slider-fade)), transparent);
}

.hero-slider__marquee {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: hero-marquee-left var(--hero-marquee-duration) linear infinite;
}

.hero-slider__list {
    display: flex;
    gap: clamp(30px, 4vw, 80px);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    width: max-content;
}

.hero-slider__item {
    flex: 0 0 auto;
}

.hero-slider__img {
    display: block;
    width: var(--hero-slider-img-w);
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 45px 0 45px 0;
}

@keyframes hero-marquee-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (hover:hover) {
    .hero-slider:hover .hero-slider__marquee {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion:reduce) {
    .hero-slider__marquee {
        animation: none;
    }
}

/* ===== HERO（media queries） ===== */
@media (max-width:1040px) {
    .hero {
        --hero-media-inset: clamp(16px, 5vw, 56px);
        --hero-after-space: clamp(80px, 7vw, 110px);
        --hero-slider-overlap: clamp(6px, .9vw, 14px);
        --hero-copy-top: clamp(8px, 3vw, 28px);
        --hero-copy-overlap: 0px;

        --hero-catch-overlap-y: clamp(40px, 7vw, 110px);
        --hero-media-shift-mul: 3;

        --hero-slider-reserve: clamp(240px, 28vw, 330px);
        --hero-slider-img-w: clamp(170px, 28vw, 280px);
        --hero-grid-cols: 1fr;
        --hero-slider-left: 0;
        --hero-slider-right: 0;
        --hero-slider-width: auto;
    }

    .hero__media-main {
        margin-top: calc(-1 *var(--hero-media-shift-mul)*var(--hero-catch-overlap-y));
    }

    .hero__catch {
        margin-bottom: calc(-1 *var(--hero-catch-overlap-y));
        padding-bottom: var(--hero-catch-overlap-y);
    }

    .hero__lead {
        font-size: var(--fz-24-32);
    }

    .hero-slider__list {
        gap: clamp(22px, 4vw, 56px);
    }
}

@media (max-width:480px) {
    .hero {
        --hero-media-inset: clamp(24px, 10vw, 72px);
        --hero-after-space: 40px;
        --hero-slider-overlap: clamp(18px, 4vw, 32px);

        --hero-catch-overlap-y: clamp(44px, 12vw, 120px);
        --hero-media-shift-mul: 3;

        --hero-slider-reserve: clamp(80px, 28vw, 140px);
        --hero-slider-img-w: clamp(120px, 38vw, 170px);
    }

    .hero__media-main {
        margin-top: calc(-1 *var(--hero-media-shift-mul)*var(--hero-catch-overlap-y));
        aspect-ratio: 4/5;
    }

    .hero__catch {
        margin-bottom: calc(-1 *var(--hero-catch-overlap-y));
        padding-bottom: var(--hero-catch-overlap-y);
    }

    .hero__media-img {
        width: 100%;
        height: 100%;
        object-position: center bottom;
    }

    .hero-slider__list {
        gap: clamp(18px, 5vw, 30px);
    }
}


/* ====================
  ★ c-arc ★ MESSAGE/PRODUCT（共通コンポーネント：半円タイトル）
==================== */
.c-arc {
    /* ===== 運用変数 ===== */
    --arc-fill: #dde3eb;
    --arc-pad-x: clamp(16px, 4vw, 40px);
    --arc-pad-y: clamp(14px, 2.4vw, 26px);
    --arc-rise: min(-12vw + 50px, -75px);

    /* ===== 骨格 ===== */
    position: relative;
    isolation: isolate;
    display: grid;
}

.c-arc__bg {
    grid-row: 1;
    position: relative;
    overflow: hidden;
}

.c-arc__bg img {
    width: 100%;
    height: auto;
    display: block;
    min-height: 130px;
    object-fit: cover;
    object-position: top center;
}

.c-arc__main {
    background-color: var(--arc-fill);
    padding-top: 1px;
    position: relative;
    z-index: 10;
}

.c-arc__inner {
    grid-row: 2;
    grid-column: 1;
    justify-self: center;
    align-self: start;
    z-index: 2;
    width: min(92%, 720px);
    margin-inline: auto;
    margin-top: var(--arc-rise);
    padding-inline: var(--arc-pad-x);
    padding-block: 0 var(--arc-pad-y);
    text-align: center;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.c-arc__lead,
.c-arc__brand,
.c-arc__catch {
    margin: 0;
}

.c-arc__lead {
    font-family: var(--ff-serif);
    font-size: var(--fz-15-16);
    color: #c49e4f;
}

.c-arc__brand {
    margin-top: clamp(8px, 1.2vw, 12px);
    font-family: var(--ff-display);
    font-size: var(--fz-32-52);
    letter-spacing: .06em;
    color: #8094ad;
}

.c-arc__catch {
    margin-top: clamp(6px, 1vw, 10px);
    font-family: var(--ff-serif);
    font-size: var(--fz-20-26);
    line-height: var(--lh-tight, 1.25);
}

.c-arc--mist {
    --arc-fill: #dde3eb;
}

@media (max-width:480px) {
    .c-arc__inner {
        width: min(92%, 520px);
    }
}


/* ====================
  ★ MESSAGE ★
==================== */
.message {
    /* ===== 運用変数 ===== */
    --message-pad-top: clamp(56px, 8vw, 120px);
    --message-pad-bottom: 0;
    --message-gap-grid-arc: clamp(120px, 10vw, 160px);
    --message-content-shift: -20px;

    --feather-safe: clamp(120px, 12vw, 260px);
    --message-inner-max: clamp(960px, 92vw, 1720px);
    --message-inner-pad-x: clamp(16px, 4vw, 48px);
    --message-img-w: clamp(280px, 32vw, 520px);

    padding-block-start: var(--message-pad-top);
    padding-block-end: var(--message-pad-bottom);
    background: url(../img/silk-bg.jpg) center/cover no-repeat;

    position: relative;
    isolation: isolate;
}

.message__inner {
    position: relative;
    max-inline-size: var(--message-inner-max);
    margin-inline: auto;
    z-index: 2;
}

.message__grid {
    position: relative;
    display: grid;
    grid-template-areas: "media content";
    grid-template-columns: minmax(420px, 560px) 1fr;
    padding-inline: var(--message-inner-pad-x);
    column-gap: clamp(16px, 3vw, 48px);
    align-items: center;
    overflow: visible;
}

.message__media {
    grid-area: media;
    position: relative;
    overflow: visible;
    padding-bottom: var(--feather-safe);
}

.message__content {
    grid-area: content;
    position: relative;
    transform: translateY(var(--message-content-shift));
    z-index: 2;
}

.message__ornaments {
    grid-area: media;
    position: relative;
    justify-self: stretch;
    align-self: stretch;
    pointer-events: none;
    z-index: 3;
}

.message__photo {
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.message__img {
    display: block;
    inline-size: var(--message-img-w);
    block-size: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
}

/* feather */
.message__feather {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: var(--w, clamp(60px, 8vw, 120px));
    aspect-ratio: 1/1;
    background: var(--img) no-repeat center/contain;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    animation: feather-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
    will-change: transform;
}

.message__feather--1 {
    --img: url("../img/feather-1.svg");
    --x: 50;
    --y: 5;
    --w: clamp(56px, 7vw, 110px);
    --rot: -10deg;
    --dur: 6.5s;
    --delay: -1s;
    --amp: 10px;
}

.message__feather--2 {
    --img: url("../img/feather-2.svg");
    --x: 25;
    --y: 100;
    --w: clamp(56px, 7vw, 110px);
    --rot: 12deg;
    --dur: 7.2s;
    --delay: -2s;
    --amp: 12px;
}

.message__feather--3 {
    --img: url("../img/feather-3.svg");
    --x: 95;
    --y: 40;
    --w: clamp(56px, 7vw, 110px);
    --rot: -8deg;
    --dur: 5.8s;
    --delay: -.5s;
    --amp: 9px;
}

.message__feather--4 {
    --img: url("../img/feather-4.svg");
    --x: 70;
    --y: 80;
    --w: clamp(56px, 10vw, 120px);
    --rot: 18deg;
    --dur: 7.8s;
    --delay: -3s;
    --amp: 14px;
}

@keyframes feather-float {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(var(--rot));
    }

    50% {
        transform: translate(-50%, calc(-50% - var(--amp))) rotate(var(--rot));
    }
}

.message__label {
    margin: 0 0 clamp(20px, 3vw, 40px);
    font-family: var(--ff-display);
    letter-spacing: .08em;
    color: #fff;
    font-size: var(--fz-18-22);
}

.message__title {
    margin: 0 0 clamp(20px, 3vw, 40px);
    font-family: var(--ff-serif);
    letter-spacing: .02em;
    line-height: var(--lh-tight);
    font-size: var(--fz-20-26);
}

.message__title-em {
    color: #fff;
    font-size: var(--fz-32-52);
    line-height: 1;
    display: inline-block;
}

.message__text {
    margin: 0 0 24px;
    font-family: var(--ff-serif);
    font-size: var(--fz-20-26);
    line-height: var(--lh-tight);
}

.message__footnote {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: var(--fz-16-18);
    line-height: var(--lh-base);
}

.message__btn {
    margin-top: clamp(30px, 3vw, 50px);
    --btn-bg: #63636b;
    box-shadow: none;
    font: var(--fz-16-18) / 1 var(--ff-display, inherit);
}

/* bottom (arc) */
.message__bottom {
    inline-size: 100dvw;
    margin-inline: calc(50% - 50dvw);
    margin-top: var(--message-gap-grid-arc);
    overflow-x: clip;
}

.message__bottom .c-arc {
    inline-size: 100%;
    max-inline-size: none;
}

/* ===== MESSAGE（media queries） ===== */
@media (max-width:1040px) {
    .message {
        --message-content-shift: -24px;
    }

    .message__grid {
        grid-template-columns: 1fr;
        row-gap: 28px;
        grid-template-areas:
            "label"
            "media"
            "title"
            "text"
            "footnote"
            "btn";
        justify-items: center;
        align-items: start;
    }

    .message__media {
        padding-bottom: clamp(80px, 18vw, 180px);
    }

    .message__photo {
        width: clamp(260px, 68vw, 540px);
        aspect-ratio: 1/1;
    }

    .message__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .message__feather {
        --amp: 8px;
    }

    .message__feather--1 {
        --x: 60;
        --y: 0;
        --w: clamp(80px, 20vw, 170px);
        --rot: -10deg;
    }

    .message__feather--2 {
        --x: 30;
        --y: 86;
        --w: clamp(60px, 14vw, 140px);
        --rot: 12deg;
    }

    .message__feather--3 {
        display: none;
    }

    .message__feather--4 {
        --x: 70;
        --y: 76;
        --w: clamp(80px, 20vw, 170px);
        --rot: 10deg;
    }

    .message__content {
        display: contents;
        transform: none;
    }

    .message__label {
        grid-area: label;
        margin: 0 0 12px;
        justify-self: start;
        text-align: left;
        position: relative;
        z-index: 2;
    }

    .message__title {
        grid-area: title;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .message__text {
        grid-area: text;
        text-align: center;
        position: relative;
        z-index: 2;
    }

    .message__footnote {
        grid-area: footnote;
        text-align: left;
        max-width: 34em;
        margin-inline: auto;
        position: relative;
        z-index: 2;
    }

    .message__btn {
        grid-area: btn;
        margin-inline: auto;
        position: relative;
        z-index: 2;
    }
}


/* ====================
    ★ FEATURE ★
==================== */
.feature {
    --feature-product-size: clamp(450px * 0.6, 100vw * 450 / 1440, 450px * 1);

    /* 帯色 */
    --feature-band-a: #f3f0ea;
    --feature-band-b: #dde3eb;

    position: relative;

    overflow-x: clip;
}

.feature__inner {
    position: relative;
    margin-inline: auto;
    background: transparent;
    background-color: var(--feature-band-a);
}

.feature__note {
    margin-block-start: clamp(18px, 3vw, 28px);
    margin-inline-start: auto;
    width: fit-content;
    padding-inline: clamp(16px, 4vw, 64px);
    padding-bottom: 20px;
    font-family: var(--ff-sans);
    font-size: var(--fz-15-16);
    line-height: var(--lh-base);
    text-align: left;
    opacity: 0.85;
}

.feature-product {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.feature-product__figure {
    inline-size: var(--feature-product-size);
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: 0;
    overflow: visible;
}

.feature-product__img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
    object-fit: contain;
}

.feature-points__list {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
    max-width: 1440px;
    margin: auto;
}

.feature-row {
    position: relative;
    isolation: isolate;
}

/* 100vw帯 */
.feature-row::before {
    content: "";
    position: absolute;
    inset: 0;
    inline-size: 100dvw;
    margin-inline: calc(50% - 50dvw);
    background: var(--feature-row-bg, transparent);
    z-index: -1;
}

.feature-row__in {
    display: grid;
    align-items: center;
    justify-items: stretch;

    --feature-center-gap: calc(var(--feature-product-size) + clamp(40px, 6vw, 96px));
    grid-template-columns: minmax(0, 1fr) var(--feature-center-gap) minmax(0, 1fr);

    padding-inline: clamp(16px, 3vw, 48px);
    padding-block: clamp(28px, 4vw, 56px);
    min-block-size: clamp(140px, 14vw, 200px);

    position: relative;
    z-index: 1;
}

.feature-row--a {
    --feature-row-bg: var(--feature-band-a);
}

.feature-row--b {
    --feature-row-bg: var(--feature-band-b);
}

.feature-row--c {
    --feature-row-bg: var(--feature-band-a);
}

.feature-point {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: clamp(14px, 2vw, 22px);
    row-gap: 8px;

    inline-size: min(100%, clamp(34rem, 38vw, 56rem));

    max-width: 1440px;
    margin: auto;
}

.feature-point__badge {
    inline-size: clamp(72px, 7vw, 120px);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}

.feature-point__badge-img {
    inline-size: 100%;
    block-size: 100%;
    display: block;
}

.feature-point__title {
    margin: 0;
    font-family: var(--ff-serif);
    font-size: var(--fz-20-26);
    line-height: var(--lh-tight);
}

.feature-point__text {
    margin: 0;
    grid-column: span 2;
    font-family: var(--ff-sans);
    font-size: var(--fz-16-18);
    line-height: var(--lh-base);
    opacity: 0.9;
}

/* Row内の配置（左右） */
.feature-row__in>.feature-point:first-child {
    grid-column: 1;
    justify-self: stretch;
}

.feature-row__in>.feature-point:last-child {
    grid-column: 3;
    justify-self: stretch;
    text-align: left;
    grid-template-columns: 1fr auto;
}

.feature-row__in>.feature-point:last-child .feature-point__badge {
    grid-column: 2;
    order: 2;
}

.feature-row__in>.feature-point:last-child .feature-point__title {
    grid-column: 1;
    order: 1;
}

.feature-row__in>.feature-point:last-child .feature-point__text {
    order: 3;
}

/* ===== FEATURE（media queries） ===== */
@media (max-width: 1040px) {
    .feature {
        --feature-product-size: clamp(240px, 46vw, 380px);

        --feature-point-content-max: min(100%, 1040px);
        --feature-point-content-pad: clamp(16px, 4vw, 40px);

        padding-block: clamp(56px, 6vw, 96px);
        background: var(--feature-band-a);
    }

    .feature-product {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        inline-size: 100%;
        margin-block-end: clamp(24px, 5vw, 40px);
        pointer-events: auto;
    }

    .feature-product__figure {
        inline-size: var(--feature-product-size);
        aspect-ratio: 1 / 1;
    }

    .feature-product__img {
        object-fit: contain;
    }

    .feature-point__badge {
        inline-size: clamp(88px, 10vw, 140px);
    }

    .feature-points__list {
        display: flex;
        flex-direction: column;
        max-width: 600px;
    }

    .feature-row,
    .feature-row__in {
        display: contents;
    }

    .feature-point {
        position: relative;
        z-index: 0;
        inline-size: var(--feature-point-content-max);
        margin-inline: auto;
        padding: clamp(18px, 4.5vw, 26px);
        padding-inline: var(--feature-point-content-pad);
        max-inline-size: none;
    }

    .feature-point::before {
        content: "";
        position: absolute;
        inset: 0;
        left: 50%;
        inline-size: 100dvw;
        transform: translateX(-50%);
        background: var(--feature-point-bg, transparent);
        z-index: -1;
    }

    .feature-point--01 {
        order: 1;
    }

    .feature-point--02 {
        order: 2;
    }

    .feature-point--03 {
        order: 3;
    }

    .feature-point--04 {
        order: 4;
    }

    .feature-point--05 {
        order: 5;
    }

    .feature-point--06 {
        order: 6;
    }

    .feature-point--01,
    .feature-point--03,
    .feature-point--05 {
        --feature-point-bg: var(--feature-band-b);
    }

    .feature-point--02,
    .feature-point--04,
    .feature-point--06 {
        --feature-point-bg: var(--feature-band-a);
    }

    .feature__note {
        padding-inline: clamp(16px, 5vw, 24px);
        padding-bottom: 0;
    }

    .feature-row__in>.feature-point:last-child {
        grid-template-columns: auto 1fr;
    }

    .feature-row__in>.feature-point:last-child .feature-point__badge {
        grid-column: 1;
        order: 1;
    }

    .feature-row__in>.feature-point:last-child .feature-point__title {
        grid-column: 2;
        order: 2;
    }
}

@media (max-width: 480px) {
    .feature {
        --feature-product-size: clamp(260px, 86vw, 380px);
        --feature-point-content-max: min(100%, 740px);
        --feature-point-content-pad: clamp(16px, 6vw, 24px);
    }

    .feature-product {
        transform: translateY(-10px);
        margin-block-end: clamp(18px, 5vw, 34px);
    }

    .feature-point {
        inline-size: var(--feature-point-content-max);
        margin-inline: auto;
        padding: clamp(18px, 5vw, 28px);
        padding-inline: var(--feature-point-content-pad);
    }

    .feature__note {
        padding-inline: clamp(16px, 5vw, 24px);
    }
}


/* ====================
   ★ PURCHASE ★
==================== */
.purchase {
    /* ===== ★運用変数★ ===== */
    --purchase-pad-y: clamp(56px, 6vw, 96px);
    --purchase-pad-x: clamp(16px, 4vw, 64px);

    --purchase-bg: url("../img/purchase-bg.jpg");
    --purchase-bg-pos: center;
    --purchase-bg-size: cover;

    --purchase-min-h: clamp(680px, 62vw, 940px);

    position: relative;
    padding-block: var(--purchase-pad-y);
    padding-inline: var(--purchase-pad-x);
    background: var(--purchase-bg) var(--purchase-bg-pos) / var(--purchase-bg-size) no-repeat;

    display: grid;
    place-items: center;
    min-block-size: var(--purchase-min-h);
}

.purchase__inner {
    width: 100%;
    display: grid;
    place-items: center;
}

.purchase-card {
    /* ===== ★運用変数★ ===== */
    --purchase-card-max: min(1180px, 100%);
    --purchase-card-radius: clamp(18px, 2vw, 28px);

    --purchase-card-pad: clamp(28px, 3.2vw, 52px);
    --purchase-card-min-h: clamp(400px * 0.6, 100vw * 400 / 1440, 300px * 1);

    --purchase-card-gap: clamp(18px, 3vw, 40px);

    --purchase-deco-w: clamp(240px, 26vw, 420px);

    --purchase-img-max: clamp(240px, 18vw, 320px);

    /* ===== ★骨格★ ===== */
    position: relative;
    width: var(--purchase-card-max);
    margin-inline: auto;

    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(340px, 1fr);
    gap: var(--purchase-card-gap);

    padding: var(--purchase-card-pad);
    min-block-size: var(--purchase-card-min-h);

    border-radius: var(--purchase-card-radius);
    background: #fff;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .08),
        10px 10px 26px -12px rgba(79, 148, 155, .35);

    overflow: visible;
    isolation: isolate;
    align-items: center;
}

.purchase-card__deco {
    position: absolute;
    top: clamp(-96px, -4.4vw, -28px);
    left: clamp(-64px, -4.4vw, -28px);
    z-index: 3;
    pointer-events: none;
}

.purchase-card__deco-img {
    display: block;
    width: var(--purchase-deco-w);
    height: auto;
}

.purchase-card__media {
    display: grid;
    place-items: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.purchase-card__img {
    width: 100%;
    height: auto;
    max-width: var(--purchase-img-max);
    display: block;
}

.purchase-card__body {
    display: grid;
    align-content: center;
    row-gap: clamp(14px, 2vw, 18px);
    min-width: 0;
    position: relative;
    z-index: 1;
}

.purchase-card__name {
    margin: 0;
    font-family: var(--ff-sans, inherit);
    font-size: var(--fz-18-22, clamp(18px, 2vw, 22px));
    letter-spacing: .08em;
}

.purchase-card__meta {
    display: grid;
    row-gap: clamp(16px, 2vw, 20px);
}

.purchase-card__price {
    margin: 0;
    font-family: var(--ff-sans, inherit);
    font-size: var(--fz-20-26, clamp(20px, 2.4vw, 30px));
    letter-spacing: .06em;
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    white-space: nowrap;
}

.purchase-card__tax {
    font-size: var(--fz-15-16, clamp(14px, 1.2vw, 16px));
    opacity: .8;
}

.purchase-card__spec {
    margin: 0;
    display: grid;
    row-gap: clamp(10px, 1.4vw, 12px);
}

.purchase-card__spec-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(12px, 2vw, 18px);
    align-items: center;
}

.purchase-card__spec-label {
    margin: 0;
    font-family: var(--ff-sans, inherit);
    letter-spacing: .08em;
    opacity: .9;
    white-space: nowrap;
}

.purchase-card__spec-value {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    min-width: 0;
}

.purchase-card__color-chip {
    display: inline-flex;
    align-items: center;
}

.purchase-card__swatch {
    inline-size: clamp(14px, 1.6vw, 20px);
    block-size: clamp(14px, 1.6vw, 20px);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
    background: #000;
}

.purchase-card__color-name {
    font-family: var(--ff-sans, inherit);
    letter-spacing: .06em;
}

.purchase-card__cta {
    box-shadow: var(--btn-shadow, 8px 8px 16px 0 rgba(59, 129, 136, .2));
}

/* ===== PURCHASE（media queries） ===== */
@media (max-width: 1040px) {
    .purchase {
        --purchase-min-h: clamp(760px, 92vw, 1020px);
        min-block-size: var(--purchase-min-h);
    }

    .purchase-card {
        grid-template-columns: 1fr;
        text-align: center;

        --purchase-deco-w: clamp(240px, 40vw, 360px);
    }

    .purchase-card__body,
    .purchase-card__meta {
        justify-items: center;
    }

    .purchase-card__spec-row {
        grid-template-columns: auto auto;
        justify-content: center;
    }

    .purchase-card__deco {
        top: clamp(-78px, -12vw, -44px);
        left: clamp(-18px, -2vw, 10px);
    }
}

@media (max-width: 480px) {
    .purchase {
        padding-inline: clamp(14px, 4vw, 18px);
        padding-block: clamp(48px, 8vw, 72px);
        --purchase-min-h: clamp(820px, 150vw, 1040px);
        min-block-size: var(--purchase-min-h);
    }

    .purchase-card {
        width: 100%;
        --purchase-card-min-h: clamp(560px, 160vw, 720px);
        min-block-size: var(--purchase-card-min-h);

        --purchase-deco-w: clamp(220px, 78vw, 340px);
        padding: clamp(18px, 5vw, 26px);

        --purchase-card-gap: clamp(10px, 3.6vw, 18px);
        gap: var(--purchase-card-gap);
    }

    .purchase-card__deco {
        top: clamp(-70px, -16vw, -42px);
        left: clamp(-10px, -2vw, 8px);
    }

    .purchase-card__media {
        margin-top: clamp(10px, 4.5vw, 22px);
    }

    .purchase-card__img {
        transform: translateY(clamp(22px, 6.5vw, 38px));
        margin-bottom: clamp(-16px, -4vw, -6px);
    }
}


/* ====================
    ★ VOICE ★
==================== */
.voice {
    /* ===== 運用変数 ===== */
    --voice-pad-y: clamp(56px, 6vw, 96px);
    --voice-pad-x: clamp(16px, 4vw, 64px);
    --voice-bg: var(--bg-ivory, #f4f2f0);

    --voice-nav-size: clamp(44px, 5vw, 56px);
    --voice-nav-offset: clamp(12px, 2vw, 18px);

    --voice-card-radius: clamp(18px, 2.2vw, 28px);
    --voice-card-gap: clamp(14px, 2vw, 18px);

    /* ===== 骨格 ===== */
    --voice-gap: clamp(24px, 4vw, 56px);

    --voice-slide-w: calc((100dvw - (var(--voice-gap) * 2)) / 2);
    --voice-viewport-w: 100%;

    --voice-media-ratio-w: 16;
    --voice-media-ratio-h: 9;

    position: relative;
    padding-block: var(--voice-pad-y);
    padding-inline: var(--voice-pad-x);
    background-color: var(--voice-bg);
    overflow: clip;
}

.voice__inner {
    max-width: 1440px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.voice__head {
    margin-bottom: clamp(20px, 4vw, 60px);
    position: relative;
    width: fit-content;
    text-align: right;

    display: block;
    grid-template-areas: none;
    justify-items: normal;
    align-items: normal;
}

.voice__head .section-head__en {
    margin: 0;
    font-family: var(--ff-display);
    font-size: clamp(72px, 6.5vw, 160px);
    line-height: 1.45;
    letter-spacing: .02em;
    color: #cfb278;

    grid-area: auto;
}

.voice__head .section-head__ja {
    margin: 0;
    font-family: var(--ff-serif);
    font-size: clamp(20px, 1.9vw, 34px);
    letter-spacing: .06em;
    line-height: 1;
    position: absolute;
    right: 0;
    bottom: 1.6rem;
    grid-area: auto;
    transform: none;
}

.voice__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.voice__deco-top {
    position: absolute;
    top: 0;
    right: clamp(18px, 2.6vw, 32px);
    width: clamp(240px, 40vw, 660px);
    height: auto;
    display: block;
    opacity: .9;
}

.voice__deco-bottom {
    position: absolute;
    left: clamp(18px, 2.6vw, 32px);
    bottom: 0;
    width: clamp(240px, 40vw, 660px);
    height: auto;
    display: block;
    opacity: .9;
}

.voice__slider {
    position: relative;
    inline-size: 100dvw;
    margin-inline: calc(50% - 50dvw);
    display: grid;
    place-items: center;
}

.voice__viewport {
    position: relative;
    inline-size: var(--voice-viewport-w);
    overflow: hidden;
    outline: none;
}

.voice__track {
    display: flex;
    gap: var(--voice-gap);
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
    list-style: none;
    will-change: transform;
    transform: translateX(0);
}

.voice__slide {
    flex: 0 0 var(--voice-slide-w);
}

.voice-nav {
    position: absolute;

    top: calc((var(--voice-slide-w) * var(--voice-media-ratio-h) / var(--voice-media-ratio-w)) / 2);
    transform: translateY(-50%);

    z-index: 3;
    inline-size: var(--voice-nav-size);
    block-size: var(--voice-nav-size);
    border-radius: 999px;

    border: 2px solid #CFB278;
    background: #fff;

    display: grid;
    place-items: center;
    cursor: pointer;

    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.voice-nav:hover {
    filter: brightness(1.03);
    box-shadow: 0 8px 18px rgba(207, 178, 120, .18);
}

.voice-nav:active {
    filter: brightness(.98);
}

.voice-nav:focus-visible {
    outline: 2px solid rgba(207, 178, 120, .7);
    outline-offset: 3px;
}

.voice-nav__icon {
    position: relative;
    display: block;
    inline-size: clamp(22px, 2.8vw, 30px);
    block-size: 2px;
    border-radius: 999px;
    background: #Cfb278;
}

.voice-nav__icon::before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    inline-size: clamp(10px, 1.4vw, 14px);
    block-size: 2px;
    border-radius: 999px;
    background: #cfb278;
    transform: rotate(45deg);
    transform-origin: calc(100% - 1px) 50%;
}

.voice-nav--prev {
    left: calc(50% - (var(--voice-slide-w) / 2) - var(--voice-nav-size) - var(--voice-nav-offset));
}

.voice-nav--next {
    left: calc(50% + (var(--voice-slide-w) / 2) + var(--voice-nav-offset));
}

/* prevは右矢印を左右反転でミラー */
.voice-nav--prev .voice-nav__icon {
    transform: scaleX(-1);
}

.voice-card {
    display: grid;
    row-gap: var(--voice-card-gap);
}

.voice-card__media {
    margin: 0;
    border-radius: var(--voice-card-radius);
    overflow: hidden;
}

.voice-card__img {
    inline-size: 100%;
    block-size: auto;
    display: block;

    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.voice-card__meta {
    margin: 0;
    font-family: var(--ff-sans, inherit);
    font-size: var(--fz-14-15, clamp(13px, 1.2vw, 15px));
    opacity: .8;
    letter-spacing: .06em;
    text-align: center;
}

.voice-card__title {
    margin: 0;
    font-family: var(--ff-serif, inherit);
    font-size: var(--fz-18-22, clamp(18px, 2vw, 22px));
    line-height: var(--lh-tight, 1.3);
    letter-spacing: .04em;
    text-align: center;
}

.voice-card__text {
    margin: 0;
    font-family: var(--ff-sans, inherit);
    font-size: var(--fz-14-16, clamp(14px, 1.4vw, 16px));
    line-height: var(--lh-base, 1.8);
    opacity: .9;
    text-align: left;
}

/* ===== VOICE（media queries） ===== */
@media (max-width: 1040px) {

    .voice__deco-top,
    .voice__deco-bottom {
        width: clamp(200px, 46vw, 460px);
        opacity: .75;
    }
}

@media (max-width: 480px) {
    .voice {
        padding-inline: clamp(14px, 4vw, 18px);
        padding-block: clamp(48px, 8vw, 72px);

        --voice-slide-w: 100%;
        --voice-viewport-w: 100%;
        --voice-gap: clamp(14px, 4vw, 18px);

        --voice-nav-size: clamp(56px, 14vw, 68px);
        --voice-nav-offset-sp: -13px;
    }

    .voice__head {
        display: grid;
        width: fit-content;
        margin-inline: auto;
        text-align: right;
        justify-items: end;
        align-items: end;
        padding-top: 20px;
    }

    .voice__deco-top {
        width: clamp(320px, 86vw, 660px);
    }

    .voice__deco-bottom {
        width: clamp(320px, 86vw, 660px);
    }

    .voice__slider {
        inline-size: 100%;
        margin-inline: 0;
    }

    .voice-card__img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .voice__viewport {
        inline-size: 100%;
    }

    .voice-nav--prev {
        left: calc(var(--voice-pad-x) + var(--voice-nav-offset-sp));
    }

    .voice-nav--next {
        left: auto;
        right: calc(var(--voice-pad-x) + var(--voice-nav-offset-sp));
    }

    .voice-nav__icon {
        inline-size: clamp(28px, 8vw, 34px);
    }

    .voice-nav__icon::before {
        inline-size: clamp(12px, 3.6vw, 16px);
    }
}


/* ====================
   ★ STORY ★
==================== */
.story {
    /* ===== 運用変数 ===== */
    --story-pad-y: clamp(56px, 6vw, 96px) clamp(220px * 0.6 + 12vw, 220px + 12vw, 220px * 2 + 12vw);
    --story-frame-max: clamp(960px, 92vw, 1560px);

    --story-bg: url("../img/marble-bg.jpg");
    --story-bg-pos: center;
    --story-bg-size: cover;

    --story-head-gap: clamp(20px, 4vw, 60px);
    --story-radius: clamp(20px, 3vw, 50px);

    position: relative;
    padding-block: var(--story-pad-y);
    background: var(--story-bg) var(--story-bg-pos) / var(--story-bg-size) no-repeat;
    overflow-x: clip;
}

.story__inner {
    max-width: 1440px;
    padding-inline: clamp(16px, 4vw, 64px);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

.story__head {
    margin-bottom: var(--story-head-gap);
    width: fit-content;
    text-align: right;
    position: relative;
}

.story__head .section-head__en {
    margin: 0;
    font-family: var(--ff-display);
    font-size: clamp(72px, 6.5vw, 160px);
    line-height: 1.45;
    color: #d4deeb;
}

.story__head .section-head__ja {
    margin: 0;
    font-family: var(--ff-serif);
    font-size: clamp(20px, 1.9vw, 34px);
    letter-spacing: .06em;
    line-height: 1;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: none;
}

.story__main {
    overflow: hidden;
}

.story__item {
    max-width: 1065px;
    width: 90%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(145px * 0.6, 100vw * 145 / 1280, 145px);
    align-items: center;
    position: relative;
}

.story__item+.story__item {
    margin-top: 72px;
}

.story__image {
    position: relative;
    z-index: 20;
}

.story__info {
    position: relative;
    z-index: 10;
    padding: calc((65px + 103px) / 2) 0;
}

.story__info::before {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 500%;
    max-width: 920px;
    background-color: #d4deeb;

    left: clamp(-145px * 1.4, -100vw * 145 * 1.4 / 1280, -145px * 0.6 * 1.4);

    border-top-left-radius: var(--story-radius);
}

.story__item.--reverse .story__info::before {
    left: auto;
    right: clamp(-145px * 1.4, -100vw * 145 * 1.4 / 1280, -145px * 0.6 * 1.4);

    border-top-left-radius: 0;
    border-top-right-radius: var(--story-radius);
}

.story-top__title {
    font-family: var(--ff-serif);
    font-weight: 600;
    font-size: var(--fz-24-32);
}

.story-top__title-em {
    color: #84a7d6;
}

.story-caption {
    font-family: var(--ff-serif);
    line-height: 1.4;
    letter-spacing: .03em;
}

.story-caption__name,
.story-caption__name-en {
    display: block;
    margin-top: .2em;
}

.story-caption__name-en {
    color: #84a7d6;
}

.story__info p,
.story__info h3 {
    position: relative;
    z-index: 10;
}

.story__photo,
.story-bottom__photo {
    margin: 0;
    overflow: hidden;
}

.story__photo {
    border-radius: var(--story-radius) 0 var(--story-radius) 0;
}

.story-bottom__photo {
    border-radius: 0 var(--story-radius) 0 var(--story-radius);
}

.story__photo img,
.story-bottom__photo img {
    display: block;
    width: 100%;
    height: auto;
}

.story-marquee {
    margin-top: clamp(26px, 5vw, 70px);
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.story-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.story-marquee__img {
    display: block;
    height: clamp(36px, 6vw, 70px);
    width: auto;
    opacity: 0.9;
    animation: story-marquee 22s linear infinite;
}

@keyframes story-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.story__copy {
    margin: 45px 0 0;
    text-align: center;
    font-family: var(--ff-serif, inherit);
    font-size: var(--fz-18-22);
    font-weight: 600;
    line-height: var(--lh-base, 1.7);
    letter-spacing: 0.06em;

    background: linear-gradient(90deg, #e2c892 0%, #cfb278 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    position: relative;
    z-index: 1;
}

.story__copy-feathers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

.story__copy-feather {
    position: absolute;
    inline-size: clamp(60px, 5vw, 90px);
    aspect-ratio: 1 / 1;
    background: center / contain no-repeat;
    animation: story-feather-float var(--float-dur, 4.8s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}

@keyframes story-feather-float {

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

    50% {
        transform: translateY(var(--float-y, -10px));
    }
}

.story__copy-feather--1 {
    top: 10%;
    left: 20%;
    background-image: url("../img/story-feather-1.svg");
    --float-y: -10px;
    --float-dur: 4.6s;
    --float-delay: 0s;
}

.story__copy-feather--2 {
    top: 100%;
    left: 30%;
    background-image: url("../img/story-feather-2.svg");
    --float-y: -14px;
    --float-dur: 5.4s;
    --float-delay: -1.2s;
}

.story__copy-feather--3 {
    top: 20%;
    right: 30%;
    background-image: url("../img/story-feather-3.svg");
    --float-y: -9px;
    --float-dur: 4.9s;
    --float-delay: -2s;
}

.story__copy-feather--4 {
    top: 60%;
    right: 20%;
    background-image: url("../img/story-feather-4.svg");
    --float-y: -12px;
    --float-dur: 6s;
    --float-delay: -0.6s;
}

.story__item.--aife {
    align-items: flex-end;
}

.story__item.--reverse .story__image {
    order: 2;
}

.story__item.--reverse .story__info {
    order: 1;
}

/* ===== STORY（media queries） ===== */
@media (max-width: 1040px) {
    /* .story {
        padding-bottom: 250px;
    } */

    .story__item {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 700px;
    }

    .story__item::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 220px);
        background-color: #d4deeb;
        border-radius: 0;
    }

    .story__item:not(.--reverse)::before {
        border-top-right-radius: var(--story-radius);
        border-bottom-left-radius: var(--story-radius);
    }

    .story__item.--reverse::before {
        border-top-left-radius: var(--story-radius);
        border-bottom-right-radius: var(--story-radius);
    }

    .story-top__title {
        font-size: var(--fz-18-22);
    }

    .story__image {
        order: 1 !important;
        width: clamp(300px, 100vw * 300 / 375, 300px * 1.3);
        margin-inline: auto;
    }

    .story__info {
        order: 2 !important;
        padding: 0 clamp((100% - 300px * 2) / 2, (100% - 100vw * 300 / 375) / 2, (100% - 300px) / 2) 64px;
    }

    .story__info::before {
        display: none;
    }

    .story__copy-feather--1 {
        display: none;
    }

    .story__copy-feather--2 {
        top: 80%;
        left: 18%;
    }

    .story__copy-feather--3 {
        top: 0%;
        right: 18%;
    }

    .story__copy-feather--4 {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .story-marquee__img {
        animation: none;
    }

    .story__copy-feather {
        animation: none;
    }
}

@media (max-width: 480px) {
    .story {
        padding-inline: 0;
        padding-block: clamp(48px, 8vw, 72px);
    }

    .story__head {
        display: grid;
        width: fit-content;
        margin-inline: auto;
    }

    .story-marquee__img {
        animation-duration: 26s;
    }

    .story__copy-feather--1 {
        display: none;
    }

    .story__copy-feather--2 {
        top: 120%;
        left: 10%;
        width: clamp(40px, 5vw, 60px);
    }

    .story__copy-feather--3 {
        top: -20%;
        right: 10%;
        width: clamp(30px, 5vw, 50px);
    }

    .story__copy-feather--4 {
        display: none;
    }
}


/* ====================
    ★ PRODUCT ★
   ==================== */
.product-area {
    position: relative;
    overflow: hidden;
    background: transparent;
    isolation: isolate;

    --product-arc-h: clamp(180px, 28vw, 360px);
    --product-arc-cut: calc(var(--product-arc-h) - 60px);

    margin-top: -12vw;
}

.product-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../img/product-bg.png");
    background-repeat: repeat;
    background-position: center top;
    background-size: cover;
}

.product-title {
    width: fit-content;
    padding-top: 5vw;
    margin: auto;
    position: relative;
    z-index: 10;
}

.product-hero__en {
    font-size: clamp(72px, 6.5vw, 160px);
    font-family: var(--ff-display);
    color: #fff;
    line-height: 1.45;
}

.product-hero__ja {
    font-family: var(--ff-serif);
    font-size: clamp(20px, 1.9vw, 34px);
    color: #63636b;
    letter-spacing: .06em;
    position: absolute;
    bottom: 0;
    right: 0;
    line-height: 1;
}

.product {
    --product-text: #63636b;
    --product-accent: #ad8b44;
    --product-table-line: #9e9ea6;
    --product-table-fill: rgba(255, 255, 255, 0.4);
    --product-circle-size: clamp(220px, 26vw, 360px);

    color: var(--product-text);
    position: relative;
    overflow: hidden;
    background: transparent;
}

.product__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-inline: auto;
    background: transparent;
    padding-inline: clamp(16px, 6vw, 120px);
    padding-block: clamp(56px, 6vw, 96px);
}

.product-top,
.product-bottom {
    width: min(100%, 1100px);
    margin-inline: auto;
}

.product-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.product-top__media {
    display: grid;
    place-items: center;
}

.product-top__figure--circle {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
}

.product-top__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-top__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6em 1.2em;
    border: 1px solid var(--product-accent);
    color: var(--product-accent);
    letter-spacing: 0.08em;
    font-size: clamp(12px, 1.05vw, 14px);
    background: transparent;
    margin: 0 0 clamp(14px, 1.8vw, 18px);
}

.product-top__brand {
    margin: 0;
    font-family: var(--ff-display);
    letter-spacing: 0.04em;
    font-size: var(--fz-18-22);
    color: #fff;
}

.product-top__name {
    margin: 0.2em 0 0;
    font-family: var(--ff-sans);
    font-weight: 400;
    font-size: var(--fz-24-32);
}

.product-top__price {
    margin: clamp(10px, 1.4vw, 14px) 0 0;
    font-family: var(--ff-sans);
    letter-spacing: 0.06em;
    font-size: var(--fz-18-22);
}

.product-top__tax {
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}

.product-top__desc {
    margin: clamp(14px, 2vw, 18px) 0 0;
    line-height: 1.9;
    font-size: var(--fz-16-18);
}

.product-bottom {
    margin-top: clamp(28px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

.product-bottom__media {
    display: grid;
    place-items: center;
}

.product-bottom__figure--circle {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
}

.product-bottom__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-spec {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2rem;
    align-items: start;
}

.product-spec__title {
    margin: 0;
    padding-left: 0;
    font-family: var(--ff-sans);
    font-weight: 300;
    letter-spacing: 0.06em;
    font-size: var(--fz-15-16);
    white-space: nowrap;
}

.product-spec__list {
    margin: 0;
    display: grid;
    row-gap: 12px;
}

.product-spec__row {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0;
    align-items: baseline;
    padding: 0;
}

.product-spec__term,
.product-spec__desc {
    margin: 0;
    font-size: var(--fz-15-16);
    font-weight: 300;
    line-height: 1.6;
    white-space: nowrap;
}

.product-spec__term::after {
    content: "／";
    margin-left: 0.1em;
}

.product-spec__desc {
    padding-left: 0.25em;
}

.product-size {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2rem;
    align-items: start;
    margin-top: clamp(16px, 2.6vw, 24px);
}

.product-size__title {
    margin: 0;
    padding-left: 0;
    font-family: var(--ff-sans);
    font-weight: 300;
    letter-spacing: 0.06em;
    font-size: var(--fz-15-16);
    white-space: nowrap;
}

.product-size__caption {
    font-size: var(--fz-15-16);
    letter-spacing: 0.04em;
}

.product-size__table-wrap {
    margin-top: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.product-size__table {
    width: min(100%, 460px);
    margin-inline: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--product-table-fill);
    border: 1px solid var(--product-table-line);
}

.product-size__table tbody th,
.product-size__table tbody td {
    font-family: var(--ff-sans);
    font-size: var(--fz-15-16);
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    border: 1px solid var(--product-table-line);
    padding: 0.6em 0.8em;
}

.product-size__table tbody th[scope="row"] {
    font-weight: 300;
}

.product-size__table thead th {
    font-family: var(--ff-sans);
    font-size: var(--fz-15-16);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    border: 1px solid var(--product-table-line);
    padding: 0.7em 0.8em;
}

.product-size__table thead th:nth-child(1),
.product-size__table tbody th[scope="row"] {
    width: 28%;
}

.product-size__table thead th:nth-child(2),
.product-size__table tbody td:nth-child(1) {
    width: 36%;
}

.product-size__table thead th:nth-child(3),
.product-size__table tbody td:nth-child(2) {
    width: 36%;
}

.product__cta {
    margin-top: clamp(28px, 6vw, 72px);
    display: grid;
    place-items: center;
}

.product__btn {
    --btn-bg: #63b0b8;
}

/* ===== PRODUCT（media queries） ===== */
@media (max-width: 480px) {
    .product-area::before {
        background-image: url("../img/product-bg-sp.png");
        background-repeat: repeat;
        background-position: center top;
        background-size: cover;
    }
}

@media (max-width: 1040px) {
    .product-top {
        grid-template-columns: 1fr;
        row-gap: 24px;
        justify-items: center;
        text-align: center;
    }

    .product-top__media {
        width: clamp(300px * 0.6, 100vw * 300 / 375, 300px * 1.5);
    }

    .product-bottom {
        grid-template-columns: 1fr;
        row-gap: 24px;
        justify-items: center;
    }

    .product-bottom__body {
        width: min(100%, 720px);
        margin-inline: auto;
        text-align: left;
    }

    .product-spec,
    .product-size {
        width: min(100%, 450px);
        margin-inline: auto;
        grid-template-columns: 1fr;
        row-gap: 12px;
        justify-items: start;
        text-align: left;
    }

    .product-bottom__media {
        order: -1;
        width: clamp(300px * 0.6, 100vw * 300 / 375, 300px * 1.5);
    }
}

@media (max-width: 480px) {
    .product__inner {
        padding-inline: clamp(14px, 4vw, 18px);
    }

    .product {
        --product-circle-size: clamp(200px, 66vw, 300px);
    }

    .product-top__desc {
        text-align: left;
    }

    .product-bottom__body {
        order: 0;
        width: min(100%, 560px);
    }

    .story__copy {
        margin-bottom: clamp(48px, 14vw, 96px);
    }
}


/* ====================
    ★ FOOTER ★
==================== */
.footer {
    /* ===== 運用変数 ===== */
    --footer-bg: #ece9e7;

    --footer-pad-y: clamp(56px, 6vw, 96px);
    --footer-pad-x: clamp(16px, 4vw, 64px);

    --footer-gap-x: clamp(24px, 5vw, 96px);
    --footer-gap-y: clamp(18px, 3vw, 32px);

    --footer-ink: #63636B;
    --footer-accent: #8ba3b2;

    --footer-nav-gap: clamp(18px, 3vw, 44px);
    --footer-nav-en: clamp(14px, 1.1vw, 16px);
    --footer-nav-ja: clamp(12px, .95vw, 13px);

    --footer-nav-area-gap: clamp(22px, 3.2vw, 34px);

    --footer-btn-h: clamp(44px, 4vw, 52px);
    --footer-btn-pad-x: clamp(18px, 2.2vw, 26px);
    --footer-btn-radius: 999px;

    background: var(--footer-bg);
    color: var(--footer-ink);
    padding-block: var(--footer-pad-y);

    display: flex;
    flex-direction: column;
    min-block-size: 100svh;
}

.footer__inner {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--footer-pad-x);
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--footer-gap-x);
    row-gap: var(--footer-gap-y);
    align-items: start;
}

.footer__brand {
    min-inline-size: 0;
}

.footer .header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer .header__logo img {
    display: block;
    inline-size: clamp(72px, 7.5vw, 104px);
    block-size: auto;
}

.footer__company {
    margin: clamp(22px, 3vw, 36px) 0 0;
    font-family: var(--ff-serif, inherit);
    font-size: var(--fz-16-18, clamp(16px, 1.4vw, 18px));
    letter-spacing: .04em;
}

.footer__contact {
    margin: clamp(18px, 2.6vw, 28px) 0 0;
    font-style: normal;
    font-family: var(--ff-serif, inherit);
}

.footer__address {
    margin: 0;
    line-height: 1.9;
    font-size: var(--fz-14-16, clamp(14px, 1.2vw, 16px));
}

.footer__inquiry {
    margin: clamp(14px, 2vw, 18px) 0 0;
    font-size: var(--fz-14-16, clamp(14px, 1.2vw, 16px));
}

.footer__email {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: .1em;
}

.footer__email:hover {
    border-bottom-color: rgba(99, 99, 107, .7);
}

.footer__sns {
    margin-top: clamp(22px, 3vw, 36px);
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 18px);
}

.footer__sns-title {
    margin: 0;
    font-family: var(--ff-serif, inherit);
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: .06em;
}

.footer__sns-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: clamp(10px, 1.4vw, 14px);
}

.footer__sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(30px, 3vw, 36px);
    block-size: clamp(30px, 3vw, 36px);
    border-radius: 12px;
    text-decoration: none;
}

.footer__sns-icon {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.footer__nav-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--footer-nav-area-gap);
}

.footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    align-items: flex-start;
    gap: var(--footer-nav-gap);
}

.footer__nav-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.footer__nav-link:hover {
    filter: brightness(0.95);
}

.footer__nav-en {
    font-family: var(--ff-display, inherit);
    letter-spacing: .18em;
    font-size: var(--footer-nav-en);
    color: var(--footer-accent);
}

.footer__nav-ja {
    font-family: var(--ff-sans, inherit);
    font-size: var(--footer-nav-ja);
}

.footer__other {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.footer__other-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--footer-btn-h);
    padding-inline: var(--footer-btn-pad-x);
    border: 1px solid var(--footer-accent);
    border-radius: var(--footer-btn-radius);
    color: var(--footer-accent);
    text-decoration: none;
    font-family: var(--ff-sans, inherit);
    font-size: var(--fz-14-16, clamp(14px, 1.2vw, 16px));
    letter-spacing: .04em;
    white-space: nowrap;
}

.footer__other-link:hover {
    filter: brightness(0.95);
}

.footer__bottom {
    margin-top: auto;
    padding-top: clamp(22px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.footer__pagetop {
    display: flex;
    justify-content: center;
}

.footer__pagetop-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.footer__pagetop-arrow {
    position: relative;
    display: block;
    inline-size: 22px;
    block-size: clamp(28px, 3vw, 44px);
}

.footer__pagetop-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background: currentColor;
    border-radius: 999px;
}

.footer__pagetop-arrow::before {
    content: "";
    position: absolute;
    left: calc(50% - 0.5px - 14px);
    top: 0px;
    left: calc(50% - 0.5px - 8px);
    width: 8px;
    height: 1px;
    background: currentColor;
    border-radius: 999px;
    transform: rotate(-55deg);
    transform-origin: 100% 50%;
}

.footer__pagetop-text {
    font-family: var(--ff-serif, inherit);
    font-size: clamp(12px, .95vw, 13px);
    letter-spacing: .08em;
}

.footer__copyright {
    display: block;
    margin: 0;
    text-align: center;
    font-size: clamp(12px, .95vw, 13px);
    letter-spacing: .04em;
}

/* ===== FOOTER（media queries） ===== */
@media (max-width: 1040px) {
    .footer {
        min-block-size: auto;
    }

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

    .footer__nav-area {
        align-items: flex-start;
    }

    .footer__nav-list {
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: clamp(18px, 3vw, 28px);
        row-gap: clamp(14px, 2vw, 18px);
    }

    .footer__nav-link {
        text-align: center;
        align-items: center;
    }

    .footer__other {
        justify-content: flex-start;
        margin-bottom: clamp(18px, 3vw, 28px);
    }

    .footer__other-link {
        min-block-size: clamp(52px, 6vw, 60px);
        padding-inline: clamp(22px, 3.2vw, 34px);
        font-size: clamp(15px, 1.6vw, 18px);
    }

    .footer .header__logo img {
        inline-size: clamp(96px, 14vw, 120px);
    }

}

@media (max-width: 480px) {
    .footer__inner {
        padding-inline: clamp(14px, 4vw, 18px);
    }

    .footer .header__logo img {
        inline-size: clamp(72px, 16vw, 86px);
    }

    .footer__nav-list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 16px;
    }

    .footer__nav-link {
        text-align: left;
        align-items: flex-start;
    }

    .footer__other-link {
        min-block-size: 44px;
        padding-inline: 18px;
        font-size: 14px;
        letter-spacing: .03em;
    }

    .footer__other {
        justify-content: center;
    }
}