/* ========================================
   YOICHI CRAFT CHU-HI - Luxury Hero Styles
   ========================================

   Design Philosophy:
   - Cinematic, full-bleed imagery inspired by premium beverage brands
   - The pouring moment as the hero - capturing craftsmanship in motion
   - Elegant restraint in typography and layout
   - 北海道の自然美と余市の果樹園を想起させる洗練されたパレット

   ======================================== */

/* ----------------------------------------
   CSS Custom Properties (Design Tokens)
   ---------------------------------------- */
:root {
    /* Color Palette - 北海道の自然を表現 */
    --color-primary: #2c3e2d;        /* 深い森の緑 - 信頼と自然 */
    --color-secondary: #8b7355;      /* 温かみのあるブラウン - クラフト感 */
    --color-accent-apple: #c4a77d;   /* りんごのゴールド */
    --color-accent-grape: #6b5b7a;   /* ぶどうの紫 */
    --color-accent-pear: #a8b89c;    /* 洋なしのグリーン */

    /* Neutral Palette */
    --color-cream: #f8f6f1;          /* 温かみのあるオフホワイト */
    --color-ivory: #efe9df;          /* アイボリー */
    --color-warm-gray: #9a928a;      /* ウォームグレー */
    --color-charcoal: #3a3632;       /* チャコール */
    --color-black: #1a1816;          /* ソフトブラック */

    /* Typography */
    --font-serif-en: 'Cormorant Garamond', 'Times New Roman', serif;
    --font-serif-jp: 'Noto Serif JP', 'Yu Mincho', '游明朝', serif;

    /* Spacing Scale (8px base) */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-2xl: 4rem;     /* 64px */
    --space-3xl: 6rem;     /* 96px */
    --space-4xl: 8rem;     /* 128px */

    /* Animation Timings - ゆったりとした高級感 */
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 600ms;
    --duration-slower: 800ms;
    --duration-slowest: 1200ms;

    /* Easing Curves - 洗練された動き */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --container-max: 1400px;
    --container-padding: clamp(1.5rem, 5vw, 4rem);
}

/* ----------------------------------------
   Reset & Base Styles
   ---------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------
   Age Gate Modal - 年齢確認ポップアップ
   ---------------------------------------- */
.age-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                visibility var(--duration-slow) var(--ease-out-expo);
}

.age-gate--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.age-gate__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.age-gate__modal {
    position: relative;
    z-index: 1;
    max-width: 700px;
    width: 90%;
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: ageGateModalReveal 0.5s var(--ease-out-expo) both;
}

@keyframes ageGateModalReveal {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Warning Text */
.age-gate__warning {
    margin-bottom: var(--space-lg);
}

.age-gate__warning-text {
    font-family: var(--font-serif-jp);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 2;
    color: #1a1a1a;
    margin-bottom: var(--space-sm);
}

.age-gate__warning-text--en {
    font-family: var(--font-serif-en);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.8;
    color: #666;
    letter-spacing: 0.02em;
}

/* Question */
.age-gate__question {
    margin-bottom: var(--space-xl);
}

.age-gate__question-text {
    font-family: var(--font-serif-jp);
    font-size: 1.5rem;
    font-weight: 500;
    color: #c9d100;
    margin-bottom: var(--space-xs);
}

.age-gate__question-text--en {
    font-family: var(--font-serif-en);
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    color: #888;
    letter-spacing: 0.05em;
}

/* Buttons */
.age-gate__buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.age-gate__button {
    flex: 1;
    max-width: 280px;
    padding: var(--space-md) var(--space-lg);
    border: none;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}

.age-gate__button:hover {
    transform: translateY(-2px);
}

.age-gate__button--yes {
    background: #4b69af;
    color: #fff;
}

.age-gate__button--yes:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.age-gate__button--no {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.age-gate__button--no:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.age-gate__button-main {
    display: block;
    font-family: var(--font-serif-jp);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: var(--space-xs);
}

.age-gate__button-sub {
    display: block;
    font-family: var(--font-serif-jp);
    font-size: 0.8rem;
    font-weight: 300;
    opacity: 0.8;
}

.age-gate__button-sub--en {
    display: block;
    font-family: var(--font-serif-en);
    font-size: 0.75rem;
    font-weight: 300;
    opacity: 0.7;
    letter-spacing: 0.03em;
}

/* Remember Checkbox */
.age-gate__remember {
    padding: var(--space-lg);
    background: rgba(75, 105, 175, 0.08);
    border: 1px solid rgba(75, 105, 175, 0.2);
}

.age-gate__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    margin-bottom: var(--space-sm);
}

.age-gate__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.age-gate__checkbox-custom {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #4b69af;
    background: #fff;
    position: relative;
    transition: background var(--duration-fast) var(--ease-gentle);
}

.age-gate__checkbox:checked + .age-gate__checkbox-custom {
    background: #4b69af;
}

.age-gate__checkbox:checked + .age-gate__checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.age-gate__checkbox-text {
    font-family: var(--font-serif-jp);
    font-size: 0.95rem;
    font-weight: 400;
    color: #1a1a1a;
}

.age-gate__remember-note {
    font-family: var(--font-serif-en);
    font-size: 0.8rem;
    color: #666;
    margin-bottom: var(--space-md);
    letter-spacing: 0.02em;
}

.age-gate__remember-warning {
    font-family: var(--font-serif-jp);
    font-size: 0.75rem;
    font-weight: 300;
    color: #888;
    line-height: 1.8;
    margin-bottom: var(--space-xs);
}

.age-gate__remember-warning--en {
    font-family: var(--font-serif-en);
    font-size: 0.7rem;
    font-weight: 300;
    color: #888;
    letter-spacing: 0.02em;
}

/* Age Gate - Responsive */
@media screen and (max-width: 780px) {
    .age-gate__modal {
        padding: var(--space-lg) var(--space-md);
        width: 95%;
    }

    .age-gate__warning-text {
        font-size: 0.95rem;
    }

    .age-gate__warning-text--en {
        font-size: 0.8rem;
    }

    .age-gate__question-text {
        font-size: 1.25rem;
    }

    .age-gate__buttons {
        flex-direction: column;
        align-items: center;
    }

    .age-gate__button {
        max-width: 100%;
        width: 100%;
    }

    .age-gate__button-main {
        font-size: 1rem;
    }

    .age-gate__button-sub {
        font-size: 0.7rem;
    }

    .age-gate__remember {
        padding: var(--space-md);
    }

    .age-gate__remember-warning {
        font-size: 0.75rem;
    }
}

/* Small Mobile Devices (480px以下) */
@media screen and (max-width: 480px) {
    .age-gate__modal {
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        border-radius: 0;
        padding: var(--space-md) var(--space-sm);
    }

    .age-gate__warning-text {
        font-size: 0.85rem;
    }

    .age-gate__question-text {
        font-size: 1.1rem;
    }

    .age-gate__button-main {
        font-size: 0.95rem;
    }

    .age-gate__button-sub {
        font-size: 0.65rem;
    }

    .age-gate__checkbox-text {
        font-size: 0.85rem;
    }

    .age-gate__remember-warning {
        font-size: 0.7rem;
    }

    .age-gate__remember {
        padding: var(--space-sm);
    }
}

body {
    font-family: var(--font-serif-jp);
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-charcoal);
    background-color: var(--color-cream);
    overflow-x: hidden;
}

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

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

/* ========================================
   SITE HEADER - サツドラ共通ヘッダー
   ======================================== */
:root {
    --header-primary: 62, 95, 170;
    --header-text: 0, 0, 0;
    --header-secondary-text: 44, 44, 44;
    --header-secondary-button: 239, 239, 239;
    --header-horizontal-line: 235, 235, 235;
    --header-background-color: 255, 255, 255;
}

/* Header sticky styles */
#header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
}

/* Mobile menu styles */
.mobile-menu-overlay.active {
    pointer-events: auto;
    opacity: 1;
}

.mobile-menu-overlay.active .mobile-menu-content {
    right: 0;
    opacity: 1;
}

/* ========================================
   SITE FOOTER - サツドラ共通フッター
   ======================================== */
.satudora-footer {
    font-family: 'Noto Sans JP', sans-serif;
}

/* ========================================
   HERO SECTION - Cinematic Full-Screen
   ======================================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* ----------------------------------------
   Background Image Layer
   ----------------------------------------
   The hero image becomes the cinematic focal point.
   Ken Burns effect adds subtle life without distraction.
   ---------------------------------------- */
.hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__image-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Subtle Ken Burns effect - slow zoom for cinematic feel */
    animation: heroImageReveal 1.8s var(--ease-out-expo) forwards,
               heroKenBurns 25s ease-in-out infinite 1.8s;
    transform-origin: center center;
}

@keyframes heroImageReveal {
    from {
        opacity: 0;
        transform: scale(1.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroKenBurns {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ----------------------------------------
   Gradient Overlay
   ----------------------------------------
   Multi-layer gradient for text readability
   while preserving image beauty.
   Left side darker for text placement.
   ---------------------------------------- */
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        /* Left side gradient for text readability */
        linear-gradient(
            90deg,
            rgba(26, 24, 22, 0.75) 0%,
            rgba(26, 24, 22, 0.55) 30%,
            rgba(26, 24, 22, 0.25) 50%,
            rgba(26, 24, 22, 0.15) 70%,
            rgba(26, 24, 22, 0.20) 100%
        ),
        /* Bottom gradient for depth */
        linear-gradient(
            180deg,
            rgba(26, 24, 22, 0.1) 0%,
            rgba(26, 24, 22, 0.0) 40%,
            rgba(26, 24, 22, 0.3) 100%
        ),
        /* Top subtle gradient */
        linear-gradient(
            0deg,
            transparent 70%,
            rgba(26, 24, 22, 0.2) 100%
        );
    animation: overlayFadeIn 2s var(--ease-gentle) forwards;
}

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

/* ----------------------------------------
   Vignette Effect
   ----------------------------------------
   Subtle darkening at edges for
   focus and cinematic quality.
   ---------------------------------------- */
.hero__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        transparent 30%,
        rgba(26, 24, 22, 0.3) 100%
    );
    pointer-events: none;
}

/* ----------------------------------------
   Logo
   ---------------------------------------- */
.hero__logo {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    z-index: 10;
    display: block;
    width: clamp(80px, 12vw, 120px);
    transition: opacity var(--duration-normal) var(--ease-gentle),
                transform var(--duration-normal) var(--ease-out-expo);
    animation: fadeIn 1s var(--ease-out-expo) 0.5s both;
}

.hero__logo:hover {
    opacity: 0.85;
    transform: scale(1.02);
}

.hero__logo-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* ----------------------------------------
   Corner Accents
   ----------------------------------------
   Subtle framing elements that add
   sophistication and structure.
   ---------------------------------------- */
.hero__corner {
    position: absolute;
    width: clamp(60px, 8vw, 100px);
    height: clamp(60px, 8vw, 100px);
    pointer-events: none;
    z-index: 3;
}

.hero__corner::before,
.hero__corner::after {
    content: '';
    position: absolute;
    background: rgba(248, 246, 241, 0.25);
}

.hero__corner--top-left {
    top: var(--space-lg);
    left: var(--space-lg);
    animation: cornerReveal 1s var(--ease-out-expo) 1.5s both;
}

.hero__corner--top-left::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

.hero__corner--top-left::after {
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
}

.hero__corner--bottom-right {
    bottom: var(--space-lg);
    right: var(--space-lg);
    animation: cornerReveal 1s var(--ease-out-expo) 1.7s both;
}

.hero__corner--bottom-right::before {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
}

.hero__corner--bottom-right::after {
    bottom: 0;
    right: 0;
    width: 1px;
    height: 100%;
}

@keyframes cornerReveal {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ----------------------------------------
   Content Layer
   ---------------------------------------- */
.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

/* ----------------------------------------
   Text Block - Left Aligned
   ----------------------------------------
   Asymmetric layout places text on left,
   allowing the pouring action to breathe.
   ---------------------------------------- */
.hero__text-block {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ----------------------------------------
   Brand Mark
   ---------------------------------------- */
.hero__brand {
    animation: fadeInUp 1s var(--ease-out-expo) 0.8s both;
}

.hero__brand-text {
    display: inline-block;
    font-family: var(--font-serif-en);
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(248, 246, 241, 0.7);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid rgba(248, 246, 241, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ----------------------------------------
   Title Area
   ---------------------------------------- */
.hero__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hero__title {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.hero__title-ja {
    display: flex;
    flex-direction: column;
    font-family: var(--font-serif-jp);
    font-size: clamp(2.2rem, 5.5vw, 3.8rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.4;
    color: var(--color-cream);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}

.hero__title-ja-line {
    display: block;
}

.hero__title-ja .char {
    --base-delay: 0.8s;
    --char-delay: 0.08s;
}

.hero__title-en {
    display: block;
    font-family: var(--font-serif-en);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 300;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(248, 246, 241, 0.6);
}

.hero__title-en .char {
    --base-delay: 1.8s;
    --char-delay: 0.04s;
}

/* Character-by-character animation */
.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
    animation: charReveal 0.8s var(--ease-out-expo) forwards;
    animation-delay: calc(var(--base-delay, 0.8s) + var(--i, 0) * var(--char-delay, 0.06s));
}

@keyframes charReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ----------------------------------------
   Tagline
   ---------------------------------------- */
.hero__tagline {
    overflow: hidden;
}

.hero__tagline-text {
    display: inline-block;
    font-family: var(--font-serif-jp);
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--color-cream);
    opacity: 0.9;
}

.hero__tagline-text .char {
    --base-delay: 2.6s;
    --char-delay: 0.05s;
}

/* ----------------------------------------
   Decorative Accent Line
   ---------------------------------------- */
.hero__accent-line {
    position: absolute;
    left: calc(520px + var(--container-padding) + var(--space-xl));
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 200px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(248, 246, 241, 0.4) 20%,
        rgba(248, 246, 241, 0.4) 80%,
        transparent 100%
    );
    animation: lineReveal 1.5s var(--ease-out-expo) 1.6s both;
}

@keyframes lineReveal {
    from {
        transform: translateY(-50%) scaleY(0);
        transform-origin: center;
    }
    to {
        transform: translateY(-50%) scaleY(1);
        transform-origin: center;
    }
}

/* ----------------------------------------
   CTA Button
   ----------------------------------------
   Refined button with sophisticated
   hover state animation.
   ---------------------------------------- */
.hero__cta {
    animation: fadeInUp 0.8s var(--ease-out-expo) 1.6s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-serif-jp);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--color-cream);
    background: transparent;
    border: 1px solid rgba(248, 246, 241, 0.5);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        color var(--duration-normal) var(--ease-gentle),
        border-color var(--duration-normal) var(--ease-gentle),
        background-color var(--duration-normal) var(--ease-gentle);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Button background animation */
.hero__button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-cream);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-slow) var(--ease-out-expo);
    z-index: -1;
}

.hero__button:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.hero__button:hover {
    color: var(--color-charcoal);
    border-color: var(--color-cream);
}

.hero__button-text {
    position: relative;
    z-index: 1;
}

.hero__button-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    transition: transform var(--duration-normal) var(--ease-out-expo);
}

.hero__button:hover .hero__button-icon {
    transform: translateX(4px);
}

.hero__button-icon svg {
    width: 20px;
    height: 20px;
}

/* Focus state for accessibility */
.hero__button:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 4px;
}

/* ----------------------------------------
   Scroll Indicator
   ---------------------------------------- */
.hero__scroll {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    z-index: 3;
    animation: fadeIn 1s var(--ease-gentle) 2.2s both;
}

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

.hero__scroll-text {
    font-family: var(--font-serif-en);
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(248, 246, 241, 0.6);
}

.hero__scroll-line {
    width: 1px;
    height: 50px;
    position: relative;
    overflow: hidden;
}

.hero__scroll-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(248, 246, 241, 0.6) 0%,
        transparent 100%
    );
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0% {
        transform: translateY(-100%);
    }
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

/* ========================================
   MESSAGE SECTION - Brand Philosophy
   ========================================

   Design Philosophy:
   - Typography-focused manifesto statement
   - Warm, refined aesthetic contrasting the dark hero
   - Subtle decorative elements evoke Japanese craftsmanship
   - Generous whitespace allows the message to breathe
   - Scroll-triggered animations using animation-timeline

   ======================================== */
.message {
    position: relative;
    padding: var(--space-4xl) var(--container-padding);
    background: var(--color-cream);
    overflow: hidden;
}

.message__container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

/* ----------------------------------------
   Background Pattern
   ----------------------------------------
   Subtle paper texture effect using
   radial gradient pattern.
   ---------------------------------------- */
.message__bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image:
        radial-gradient(
            circle at 20% 30%,
            var(--color-secondary) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 80% 70%,
            var(--color-secondary) 1px,
            transparent 1px
        );
    background-size: 60px 60px;
    pointer-events: none;
}

/* ----------------------------------------
   Decorative Ornaments
   ----------------------------------------
   Refined line elements with diamond
   accents inspired by Japanese design.
   ---------------------------------------- */
.message__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 300px;
}

.message__ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-secondary) 50%,
        transparent 100%
    );
    opacity: 0.4;
}

.message__ornament-diamond {
    width: 6px;
    height: 6px;
    background: var(--color-secondary);
    transform: rotate(45deg);
    opacity: 0.5;
}

/* Animation for ornaments */
.message__ornament--top {
    animation: ornamentRevealTop 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
}

.message__ornament--bottom {
    animation: ornamentRevealBottom 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 20% entry 60%;
}

@keyframes ornamentRevealTop {
    from {
        opacity: 0;
        transform: translateY(20px) scaleX(0.5);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
}

@keyframes ornamentRevealBottom {
    from {
        opacity: 0;
        transform: translateY(-20px) scaleX(0.5);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
}

/* ----------------------------------------
   Main Message Content
   ---------------------------------------- */
.message__content {
    position: relative;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
}

/* ----------------------------------------
   Quote Marks
   ----------------------------------------
   Elegant typographic quote marks
   as decorative framing elements.
   ---------------------------------------- */
.message__quote {
    position: absolute;
    font-family: var(--font-serif-en);
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    color: var(--color-secondary);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
}

.message__quote--open {
    top: -0.2em;
    left: -0.1em;
    animation: quoteReveal 1.2s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
}

.message__quote--open::before {
    content: '\201C'; /* Left double quotation mark */
}

.message__quote--close {
    bottom: -0.5em;
    right: -0.1em;
    animation: quoteReveal 1.2s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 10% entry 45%;
}

.message__quote--close::before {
    content: '\201D'; /* Right double quotation mark */
}

@keyframes quoteReveal {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 0.12;
        transform: scale(1);
    }
}

/* ----------------------------------------
   Main Heading
   ----------------------------------------
   Typography is the hero here.
   Generous letter-spacing and line-height
   allow each character to breathe.
   ---------------------------------------- */
.message__heading {
    font-family: var(--font-serif-jp);
    font-size: clamp(1.6rem, 4.5vw, 2.8rem);
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.message__heading-line {
    display: block;
    animation: headingLineReveal 1s var(--ease-out-expo) both;
    animation-timeline: view();
}

.message__heading-line:nth-child(1) {
    animation-range: entry 5% entry 40%;
}

.message__heading-line:nth-child(2) {
    animation-range: entry 10% entry 45%;
}

.message__heading-line:nth-child(3) {
    animation-range: entry 15% entry 50%;
}

@keyframes headingLineReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ----------------------------------------
   Exclusive Badge
   ----------------------------------------
   Secondary information presented as
   an elegant horizontal accent.
   ---------------------------------------- */
.message__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    animation: badgeReveal 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 25% entry 60%;
}

@keyframes badgeReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message__badge-line {
    width: 60px;
    height: 2px;
    background: var(--color-accent-apple);
    opacity: 0.8;
}

.message__badge-line--left {
    background: linear-gradient(90deg, transparent, var(--color-accent-apple));
}

.message__badge-line--right {
    background: linear-gradient(90deg, var(--color-accent-apple), transparent);
}

.message__badge-text {
    font-family: var(--font-serif-jp);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    color: var(--color-cream);
    padding: var(--space-sm) var(--space-lg);
    background: #4b69af;
    box-shadow: 0 4px 20px rgba(75, 105, 175, 0.3);
}

/* ----------------------------------------
   Fallback for browsers without
   animation-timeline support
   ----------------------------------------
   Uses simple fade-in animation
   triggered on load.
   ---------------------------------------- */
@supports not (animation-timeline: view()) {
    .message__ornament--top,
    .message__ornament--bottom,
    .message__quote--open,
    .message__quote--close,
    .message__heading-line,
    .message__badge {
        animation-timeline: auto;
        animation-range: initial;
    }

    .message__ornament--top {
        animation: ornamentRevealTopFallback 1s var(--ease-out-expo) 0.2s both;
    }

    .message__ornament--bottom {
        animation: ornamentRevealBottomFallback 1s var(--ease-out-expo) 1s both;
    }

    .message__quote--open {
        animation: quoteRevealFallback 1.2s var(--ease-out-expo) 0.3s both;
    }

    .message__quote--close {
        animation: quoteRevealFallback 1.2s var(--ease-out-expo) 0.5s both;
    }

    .message__heading-line:nth-child(1) {
        animation: headingLineRevealFallback 1s var(--ease-out-expo) 0.4s both;
    }

    .message__heading-line:nth-child(2) {
        animation: headingLineRevealFallback 1s var(--ease-out-expo) 0.55s both;
    }

    .message__heading-line:nth-child(3) {
        animation: headingLineRevealFallback 1s var(--ease-out-expo) 0.7s both;
    }

    .message__badge {
        animation: badgeRevealFallback 1s var(--ease-out-expo) 0.85s both;
    }

    @keyframes ornamentRevealTopFallback {
        from {
            opacity: 0;
            transform: translateY(20px) scaleX(0.5);
        }
        to {
            opacity: 1;
            transform: translateY(0) scaleX(1);
        }
    }

    @keyframes ornamentRevealBottomFallback {
        from {
            opacity: 0;
            transform: translateY(-20px) scaleX(0.5);
        }
        to {
            opacity: 1;
            transform: translateY(0) scaleX(1);
        }
    }

    @keyframes quoteRevealFallback {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 0.12;
            transform: scale(1);
        }
    }

    @keyframes headingLineRevealFallback {
        from {
            opacity: 0;
            transform: translateY(30px);
            filter: blur(4px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @keyframes badgeRevealFallback {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ========================================
   PRODUCTS INTRO SECTION
   ======================================== */
.products-intro {
    background: var(--color-cream);
}

.products-intro__image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
}

.products-intro__image {
    width: 100%;
    height: auto;
    display: block;
}

.products-intro__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        180deg,
        rgba(26, 24, 22, 0.3) 0%,
        rgba(26, 24, 22, 0.4) 100%
    );
}

.products-intro__message {
    font-family: var(--font-serif-jp);
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0.1em;
    color: var(--color-cream);
    text-align: center;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    padding: var(--space-lg);
}

.products-intro__title-wrapper {
    padding: var(--space-xl) var(--container-padding);
    text-align: center;
    background: var(--color-cream);
}

.products-intro__title {
    font-family: var(--font-serif-jp);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.products-intro__title-en {
    display: block;
    font-family: var(--font-serif-en);
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
}

/* ========================================
   PRODUCT DETAIL SECTION
   ========================================

   Design Philosophy:
   - Generous whitespace allowing products to breathe
   - Side-by-side layout on desktop, stacked on mobile
   - Subtle accent colors derived from each fruit
   - Refined typography hierarchy
   - Decorative elements that echo brand motifs
   - Reusable structure for Apple, Grape, and Pear variants

   ======================================== */

/* ----------------------------------------
   Base Product Detail Styles
   ---------------------------------------- */
.product-detail {
    position: relative;
    padding: var(--space-4xl) var(--container-padding);
    background: var(--color-cream);
    overflow: hidden;
}

/* CSS Custom Properties for variant theming
   Each product variant overrides these properties */
.product-detail {
    --product-accent: var(--color-accent-apple);
    --product-accent-soft: rgba(196, 167, 125, 0.15);
    --product-accent-medium: rgba(196, 167, 125, 0.4);
}

/* Apple Variant */
.product-detail--apple {
    --product-accent: #c4a77d;
    --product-accent-soft: rgba(196, 167, 125, 0.12);
    --product-accent-medium: rgba(196, 167, 125, 0.35);
}

/* Grape Variant */
.product-detail--grape {
    --product-accent: #6b5b7a;
    --product-accent-soft: rgba(107, 91, 122, 0.12);
    --product-accent-medium: rgba(107, 91, 122, 0.35);
}

.product-detail--grape .product-detail__image {
    object-position: center center;
}

/* Pear Variant */
.product-detail--pear {
    --product-accent: #a8b89c;
    --product-accent-soft: rgba(168, 184, 156, 0.12);
    --product-accent-medium: rgba(168, 184, 156, 0.35);
}

/* ----------------------------------------
   Product-Only Image Styling
   ----------------------------------------
   Special treatment for PNG product shots
   with transparent backgrounds. Creates an
   elegant studio-style presentation with
   subtle gradient backdrop.
   ---------------------------------------- */
.product-detail__image-wrapper--product-shot {
    /* 他の商品画像と同じスタイル */
}

.product-detail__image--product-shot {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform var(--duration-slowest) var(--ease-out-expo);
}

/* Refined hover effect for product shot */
@media (hover: hover) {
    .product-detail__image-wrapper--product-shot:hover .product-detail__image--product-shot {
        transform: scale(1.03);
    }
}

/* Decorative frame positioning for product shot */
.product-detail__image-wrapper--product-shot .product-detail__image-frame {
    inset: var(--space-md);
    border-color: var(--product-accent-medium);
}

/* ----------------------------------------
   Reversed Layout Modifier
   ----------------------------------------
   Flips the two-column layout so image
   appears on the right, content on left.
   Creates visual alternation between
   product sections for elegant rhythm.
   On mobile, maintains standard stacking
   (image on top, content below).
   ---------------------------------------- */
.product-detail--reverse .product-detail__container {
    direction: rtl;
}

.product-detail--reverse .product-detail__container > * {
    direction: ltr;
}

/* Background accent flips to right side */
.product-detail--reverse .product-detail__bg-accent {
    left: auto;
    right: 0;
    background: linear-gradient(
        -135deg,
        var(--product-accent-soft) 0%,
        transparent 60%
    );
}

/* Ornament alignment adjusts for reversed content */
.product-detail--reverse .product-detail__ornament {
    justify-content: flex-end;
}

.product-detail--reverse .product-detail__ornament-line:first-child {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--product-accent-medium) 100%
    );
}

.product-detail--reverse .product-detail__ornament-line:last-child {
    background: linear-gradient(
        90deg,
        var(--product-accent-medium) 0%,
        transparent 100%
    );
}

/* Reversed animations for visual interest */
.product-detail--reverse .product-detail__image-column {
    animation-name: productImageRevealReverse;
}

.product-detail--reverse .product-detail__content-column {
    animation-name: productContentRevealReverse;
}

@keyframes productImageRevealReverse {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes productContentRevealReverse {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ----------------------------------------
   Background Accent
   ----------------------------------------
   Subtle gradient accent that provides
   visual interest without overwhelming.
   ---------------------------------------- */
.product-detail__bg-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--product-accent-soft) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

/* ----------------------------------------
   Container Layout
   ----------------------------------------
   Two-column grid on desktop,
   single column stack on mobile.
   ---------------------------------------- */
.product-detail__container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

/* ----------------------------------------
   Image Column
   ---------------------------------------- */
.product-detail__image-column {
    position: relative;
}

.product-detail__image-wrapper {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.product-detail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--duration-slowest) var(--ease-out-expo);
}

/* Subtle zoom on hover for desktop */
@media (hover: hover) {
    .product-detail__image-wrapper:hover .product-detail__image {
        transform: scale(1.03);
    }
}

/* Decorative Frame - Elegant corner accents */
.product-detail__image-frame {
    position: absolute;
    inset: var(--space-md);
    border: 1px solid var(--product-accent-medium);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity var(--duration-slow) var(--ease-gentle),
        transform var(--duration-slow) var(--ease-out-expo);
}

.product-detail__image-wrapper:hover .product-detail__image-frame {
    opacity: 1;
    transform: scale(1);
}

/* ----------------------------------------
   Content Column
   ---------------------------------------- */
.product-detail__content-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
}

/* ----------------------------------------
   Product Header
   ---------------------------------------- */
.product-detail__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Flavor Badge */
.product-detail__flavor-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    align-self: flex-start;
}

.product-detail__flavor-icon {
    width: 8px;
    height: 8px;
    background: var(--product-accent);
    border-radius: 50%;
    animation: flavorPulse 3s ease-in-out infinite;
}

@keyframes flavorPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.product-detail__flavor-text {
    font-family: var(--font-serif-en);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--product-accent);
}

/* Product Title */
.product-detail__title {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.product-detail__title-ja {
    font-family: var(--font-serif-jp);
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: var(--color-primary);
}

.product-detail__title-en {
    font-family: var(--font-serif-en);
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
}

/* Price Display - 差別化要因として目立たせる */
.product-detail__price {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--product-accent-soft);
    border-left: 3px solid var(--product-accent);
    border-radius: 0 4px 4px 0;
}

.product-detail__price-main {
    font-family: var(--font-serif-en);
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    line-height: 1;
}

.product-detail__price-yen {
    font-size: 0.6em;
    font-weight: 300;
    margin-right: 0.05em;
}

.product-detail__price-tax {
    font-family: var(--font-serif-jp);
    font-size: 0.35em;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-warm-gray);
    margin-left: 0.2em;
    vertical-align: middle;
}

.product-detail__price-divider {
    font-family: var(--font-serif-en);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--product-accent);
    opacity: 0.6;
}

.product-detail__price-inclusive {
    font-family: var(--font-serif-en);
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-charcoal);
}

/* ----------------------------------------
   Product Description
   ---------------------------------------- */
.product-detail__description {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--product-accent-soft);
    border-bottom: 1px solid var(--product-accent-soft);
}

.product-detail__description-text {
    font-family: var(--font-serif-jp);
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    font-weight: 300;
    line-height: 2;
    letter-spacing: 0.05em;
    color: var(--color-charcoal);
}

/* ----------------------------------------
   Product Features
   ---------------------------------------- */
.product-detail__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.product-detail__feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: var(--product-accent-soft);
    border-radius: 2px;
    transition: background var(--duration-normal) var(--ease-gentle);
}

.product-detail__feature:hover {
    background: rgba(196, 167, 125, 0.18);
}

.product-detail__feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--product-accent);
    opacity: 0.8;
}

.product-detail__feature-icon svg {
    width: 20px;
    height: 20px;
}

.product-detail__feature-text {
    font-family: var(--font-serif-jp);
    font-size: clamp(0.85rem, 1.3vw, 0.95rem);
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.03em;
    color: var(--color-charcoal);
    padding-top: 0.35em;
}

.product-detail__feature-text strong {
    font-weight: 500;
    color: var(--color-primary);
}

.product-detail__feature-br {
    display: none;
}

/* Product Specifications - フルワイド成分表 */
.product-spec {
    width: 100%;
    padding: var(--space-lg) var(--container-padding);
    background: rgba(58, 54, 50, 0.03);
    border-top: 1px solid rgba(58, 54, 50, 0.08);
}

.product-spec__container {
    max-width: 900px;
    margin: 0 auto;
}

.product-spec__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-md);
}

.product-spec__item {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.product-spec__label {
    font-family: var(--font-serif-jp);
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-warm-gray);
    letter-spacing: 0.05em;
}

.product-spec__value {
    font-family: var(--font-serif-jp);
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--color-charcoal);
}

.product-spec__nutrition {
    padding: var(--space-sm);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(58, 54, 50, 0.1);
    text-align: center;
}

.product-spec__nutrition-title {
    font-family: var(--font-serif-jp);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-bottom: 0.5em;
}

.product-spec__nutrition-content {
    font-family: var(--font-serif-jp);
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--color-charcoal);
    line-height: 1.6;
}

.product-spec__alcohol {
    font-family: var(--font-serif-jp);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-charcoal);
    margin-top: var(--space-xs);
}

/* Product Spec - Responsive */
@media screen and (max-width: 780px) {
    .product-spec {
        padding: var(--space-md) var(--space-md);
    }

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

    .product-spec__item:first-child {
        grid-column: 1 / -1;
    }
}

/* ----------------------------------------
   Decorative Ornament
   ----------------------------------------
   Echoes the ornaments used in the
   message section for brand consistency.
   ---------------------------------------- */
.product-detail__ornament {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    width: 100%;
    max-width: 180px;
    margin-top: var(--space-md);
}

.product-detail__ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--product-accent-medium) 0%,
        transparent 100%
    );
}

.product-detail__ornament-line:last-child {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--product-accent-medium) 100%
    );
}

.product-detail__ornament-diamond {
    width: 6px;
    height: 6px;
    background: var(--product-accent);
    transform: rotate(45deg);
    opacity: 0.6;
}

/* ----------------------------------------
   Scroll-Driven Animations
   ----------------------------------------
   Elegant reveal animations as the
   product section enters the viewport.
   ---------------------------------------- */
.product-detail__image-column {
    animation: productImageReveal 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
}

.product-detail__content-column {
    animation: productContentReveal 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 5% entry 45%;
}

@keyframes productImageReveal {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes productContentReveal {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ----------------------------------------
   Fallback for browsers without
   animation-timeline support
   ---------------------------------------- */
@supports not (animation-timeline: view()) {
    .product-detail__image-column,
    .product-detail__content-column {
        animation-timeline: auto;
        animation-range: initial;
    }

    .product-detail__image-column {
        animation: productImageRevealFallback 1s var(--ease-out-expo) 0.2s both;
    }

    .product-detail__content-column {
        animation: productContentRevealFallback 1s var(--ease-out-expo) 0.4s both;
    }

    @keyframes productImageRevealFallback {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes productContentRevealFallback {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Reversed layout fallback animations */
    .product-detail--reverse .product-detail__image-column {
        animation: productImageRevealReverseFallback 1s var(--ease-out-expo) 0.2s both;
    }

    .product-detail--reverse .product-detail__content-column {
        animation: productContentRevealReverseFallback 1s var(--ease-out-expo) 0.4s both;
    }

    @keyframes productImageRevealReverseFallback {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes productContentRevealReverseFallback {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Large Desktop */
@media screen and (min-width: 1600px) {
    .hero__text-block {
        max-width: 580px;
    }

    .hero__accent-line {
        left: calc(580px + var(--container-padding) + var(--space-xl));
        height: 250px;
    }
}

/* Tablet Landscape */
@media screen and (max-width: 1200px) {
    .hero__accent-line {
        display: none;
    }

    .hero__text-block {
        max-width: 480px;
    }
}

/* Tablet Portrait */
@media screen and (max-width: 1024px) {
    .hero__content {
        padding: 0 var(--space-xl);
    }

    .hero__text-block {
        max-width: 450px;
    }

    .hero__corner {
        width: 50px;
        height: 50px;
    }

    .hero__corner--top-left {
        top: var(--space-md);
        left: var(--space-md);
    }

    .hero__corner--bottom-right {
        bottom: var(--space-md);
        right: var(--space-md);
    }
}

/* SP (Mobile) */
@media screen and (max-width: 780px) {
    .hero {
        align-items: flex-end;
    }

    .hero__content {
        padding: 0 var(--space-lg);
        padding-bottom: calc(var(--space-4xl) + var(--space-xl));
    }

    .hero__text-block {
        max-width: 100%;
        gap: var(--space-md);
    }

    .hero__overlay {
        background:
            /* Stronger bottom gradient for mobile text placement */
            linear-gradient(
                180deg,
                rgba(26, 24, 22, 0.2) 0%,
                rgba(26, 24, 22, 0.3) 40%,
                rgba(26, 24, 22, 0.7) 70%,
                rgba(26, 24, 22, 0.85) 100%
            );
    }

    /* 注ぎシーンが切れないよう左寄せ */
    .hero__image {
        object-position: 35% center;
    }

    .hero__corner {
        width: 40px;
        height: 40px;
    }

    .hero__corner--top-left {
        top: var(--space-sm);
        left: var(--space-sm);
    }

    .hero__corner--bottom-right {
        display: none;
    }

    .hero__scroll {
        bottom: var(--space-lg);
    }

    .hero__logo {
        top: var(--space-md);
        left: var(--space-md);
        width: clamp(60px, 18vw, 90px);
    }

    /* Message Section - SP */
    .message {
        padding: var(--space-3xl) var(--space-lg);
    }

    .message__container {
        gap: var(--space-lg);
    }

    .message__content {
        padding: var(--space-lg) var(--space-sm);
    }

    .message__ornament {
        max-width: 200px;
    }

    .message__quote {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .message__quote--open {
        top: -0.1em;
        left: -0.05em;
    }

    .message__quote--close {
        bottom: -0.4em;
        right: -0.05em;
    }

    .message__heading {
        line-height: 1.8;
        letter-spacing: 0.15em;
    }

    .message__badge-line {
        width: 25px;
    }

    .message__badge-text {
        letter-spacing: 0.2em;
        padding: 6px var(--space-sm);
    }

    /* Products Intro - SP */
    .products-intro__message {
        font-size: clamp(0.85rem, 3.5vw, 1.1rem);
        line-height: 2;
        padding: var(--space-md);
    }

    .products-intro__title-wrapper {
        padding: var(--space-lg) var(--space-lg);
    }

    /* Product Detail - SP */
    .product-detail {
        padding: var(--space-2xl) var(--space-lg);
    }

    .product-detail__bg-accent {
        width: 100%;
        height: 40%;
        background: linear-gradient(
            180deg,
            var(--product-accent-soft) 0%,
            transparent 100%
        );
    }

    .product-detail__container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .product-detail__image-wrapper {
        aspect-ratio: 1 / 1;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Product-only image adjustments for mobile */
    .product-detail__image-wrapper--product-shot {
        padding: 0;
    }

    .product-detail__image--product-shot {
        width: 100%;
    }

    .product-detail__image-frame {
        inset: var(--space-sm);
    }

    .product-detail__content-column {
        padding: 0;
        gap: var(--space-md);
        text-align: center;
    }

    .product-detail__header {
        align-items: center;
    }

    .product-detail__flavor-badge {
        align-self: center;
    }

    .product-detail__title {
        align-items: center;
    }

    .product-detail__price {
        justify-content: center;
        padding: var(--space-sm) var(--space-lg);
        border-left: none;
        border-top: 3px solid var(--product-accent);
        border-radius: 4px 4px 0 0;
    }

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

    .product-detail__features {
        gap: var(--space-sm);
    }

    .product-detail__feature {
        padding: var(--space-sm) var(--space-md);
    }

    .product-detail__feature-br {
        display: inline;
    }

    .product-detail__ornament {
        justify-content: center;
        margin: var(--space-md) auto 0;
    }

    /* Animation adjustments for mobile - vertical reveal */
    .product-detail__image-column {
        animation: productImageRevealMobile 1s var(--ease-out-expo) both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    .product-detail__content-column {
        animation: productContentRevealMobile 1s var(--ease-out-expo) both;
        animation-timeline: view();
        animation-range: entry 10% entry 40%;
    }

    @keyframes productImageRevealMobile {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes productContentRevealMobile {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Reversed layout - Reset to normal stacking on mobile */
    .product-detail--reverse .product-detail__container {
        direction: ltr;
    }

    .product-detail--reverse .product-detail__bg-accent {
        left: 0;
        right: auto;
        background: linear-gradient(
            180deg,
            var(--product-accent-soft) 0%,
            transparent 100%
        );
    }

    .product-detail--reverse .product-detail__ornament {
        justify-content: center;
    }

    /* Reset animations to vertical for mobile */
    .product-detail--reverse .product-detail__image-column {
        animation-name: productImageRevealMobile;
    }

    .product-detail--reverse .product-detail__content-column {
        animation-name: productContentRevealMobile;
    }

    /* Omoi Section - SP */
    .omoi__header {
        padding: var(--space-2xl) var(--space-lg) var(--space-xl);
    }

    .omoi__header-inner {
        gap: var(--space-md);
    }

    .omoi__title-ornament {
        max-width: 180px;
        gap: var(--space-sm);
    }

    .omoi__title-ornament-diamond {
        width: 5px;
        height: 5px;
    }

    .omoi__story {
        padding: var(--space-xl) var(--space-lg);
    }

    .omoi__story--first {
        padding-top: 0;
    }

    .omoi__story--second {
        padding-bottom: var(--space-2xl);
    }

    .omoi__story-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg);
    }

    .omoi__story-image-wrapper {
        aspect-ratio: 16 / 10;
        max-width: 500px;
        margin: 0 auto;
    }

    .omoi__story-image-frame {
        inset: var(--space-sm);
    }

    .omoi__story-content-column {
        padding: 0;
        gap: var(--space-md);
        text-align: center;
    }

    .omoi__story-label {
        align-self: center;
    }

    .omoi__quote {
        padding: var(--space-md) var(--space-lg);
        border-left: none;
        border-top: 3px solid var(--color-secondary);
        border-radius: 4px 4px 0 0;
        text-align: left;
    }

    .omoi__quote-text {
        line-height: 2;
    }

    .omoi__quote-mark {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
    }

    .omoi__quote-mark--open {
        top: -0.05em;
        left: var(--space-xs);
    }

    .omoi__quote-mark--close {
        bottom: -0.25em;
        right: var(--space-xs);
    }

    .omoi__story-ornament {
        margin: 0 auto;
    }

    .omoi__story--reverse .omoi__story-ornament {
        margin: 0 auto;
    }

    /* Reversed layout - Reset to normal stacking on mobile */
    .omoi__story--reverse .omoi__story-container {
        direction: ltr;
    }

    /* Mobile animations - vertical reveal */
    .omoi__story-image-column {
        animation: omoiImageRevealMobile 1s var(--ease-out-expo) both;
        animation-timeline: view();
        animation-range: entry 0% entry 30%;
    }

    .omoi__story-content-column {
        animation: omoiContentRevealMobile 1s var(--ease-out-expo) both;
        animation-timeline: view();
        animation-range: entry 10% entry 40%;
    }

    .omoi__story--reverse .omoi__story-image-column {
        animation-name: omoiImageRevealMobile;
    }

    .omoi__story--reverse .omoi__story-content-column {
        animation-name: omoiContentRevealMobile;
    }

    @keyframes omoiImageRevealMobile {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes omoiContentRevealMobile {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Mobile Portrait */
@media screen and (max-width: 480px) {
    :root {
        --space-xl: 2.5rem;
        --space-2xl: 3rem;
        --space-3xl: 4rem;
    }

    .hero__content {
        padding: 0 var(--space-md);
        padding-bottom: calc(var(--space-3xl) + var(--space-xl));
    }

    .hero__brand-text {
        padding: 6px var(--space-sm);
        letter-spacing: 0.25em;
        font-size: 0.55rem;
    }

    .hero__title-ja {
        letter-spacing: 0.08em;
    }

    .hero__title-en {
        letter-spacing: 0.25em;
    }

    .hero__tagline-text {
        letter-spacing: 0.08em;
    }

    .hero__button {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.85rem;
        letter-spacing: 0.1em;
    }

    .hero__corner {
        width: 30px;
        height: 30px;
    }

    .hero__scroll {
        bottom: var(--space-md);
    }

    .hero__scroll-line {
        height: 35px;
    }

    /* Message Section - Mobile Portrait */
    .message {
        padding: var(--space-2xl) var(--space-md);
    }

    .message__content {
        padding: var(--space-md) var(--space-xs);
    }

    .message__ornament {
        max-width: 150px;
        gap: var(--space-sm);
    }

    .message__ornament-diamond {
        width: 4px;
        height: 4px;
    }

    .message__heading {
        letter-spacing: 0.1em;
        line-height: 1.7;
    }

    .message__badge {
        gap: var(--space-sm);
    }

    .message__badge-line {
        width: 20px;
    }

    .message__badge-text {
        letter-spacing: 0.15em;
        font-size: 0.7rem;
    }

    /* Product Detail - Mobile Portrait */
    .product-detail {
        padding: var(--space-xl) var(--space-md);
    }

    .product-detail__image-wrapper {
        max-width: 320px;
    }

    /* Product-only image - smaller mobile */
    .product-detail__image-wrapper--product-shot {
        padding: 0;
    }

    .product-detail__image--product-shot {
        width: 100%;
    }

    .product-detail__flavor-icon {
        width: 6px;
        height: 6px;
    }

    .product-detail__flavor-text {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
    }

    .product-detail__title-ja {
        font-size: 1.3rem;
        letter-spacing: 0.05em;
    }

    .product-detail__title-en {
        font-size: 0.6rem;
        letter-spacing: 0.2em;
    }

    .product-detail__price {
        padding: var(--space-sm) var(--space-md);
    }

    .product-detail__price-main {
        font-size: 2rem;
    }

    .product-detail__price-inclusive {
        font-size: 1.1rem;
    }

    .product-detail__description-text {
        font-size: 0.85rem;
        line-height: 1.9;
    }

    .product-detail__feature {
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .product-detail__feature-icon {
        width: 30px;
        height: 30px;
    }

    .product-detail__feature-icon svg {
        width: 16px;
        height: 16px;
    }

    .product-detail__feature-text {
        font-size: 0.8rem;
        line-height: 1.7;
    }

    .product-detail__ornament {
        max-width: 140px;
    }

    .product-detail__ornament-diamond {
        width: 4px;
        height: 4px;
    }

    /* Omoi Section - Mobile Portrait */
    .omoi__header {
        padding: var(--space-xl) var(--space-md) var(--space-lg);
    }

    .omoi__title-ja {
        font-size: 1.5rem;
        letter-spacing: 0.1em;
    }

    .omoi__title-en {
        font-size: 0.65rem;
        letter-spacing: 0.25em;
    }

    .omoi__title-ornament {
        max-width: 140px;
    }

    .omoi__title-ornament-diamond {
        width: 4px;
        height: 4px;
    }

    .omoi__story {
        padding: var(--space-lg) var(--space-md);
    }

    .omoi__story--second {
        padding-bottom: var(--space-xl);
    }

    .omoi__story-container {
        gap: var(--space-md);
    }

    .omoi__story-image-wrapper {
        max-width: 100%;
    }

    .omoi__story-label-text {
        font-size: 0.75rem;
        letter-spacing: 0.08em;
    }

    .omoi__quote {
        padding: var(--space-sm) var(--space-md);
    }

    .omoi__quote-text {
        font-size: 0.85rem;
        line-height: 1.9;
    }

    .omoi__quote-mark {
        font-size: 2.5rem;
    }

    .omoi__story-ornament {
        max-width: 100px;
    }
}

/* Extra Small Devices */
@media screen and (max-width: 360px) {
    .hero__title-ja {
        font-size: 1.8rem;
    }

    .hero__tagline-text {
        font-size: 0.9rem;
    }
}

/* Tall Mobile Devices */
@media screen and (max-width: 480px) and (min-height: 700px) {
    .hero {
        align-items: center;
    }

    .hero__content {
        padding-bottom: var(--space-xl);
    }

    .hero__overlay {
        background:
            /* Left side gradient for text readability */
            linear-gradient(
                90deg,
                rgba(26, 24, 22, 0.8) 0%,
                rgba(26, 24, 22, 0.5) 40%,
                rgba(26, 24, 22, 0.25) 100%
            ),
            /* Bottom gradient for scroll indicator */
            linear-gradient(
                180deg,
                transparent 70%,
                rgba(26, 24, 22, 0.4) 100%
            );
    }
}

/* Landscape Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero__content {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .hero__text-block {
        gap: var(--space-sm);
    }

    .hero__title-ja {
        font-size: 1.8rem;
    }

    .hero__tagline-text {
        font-size: 0.9rem;
    }

    .hero__scroll {
        display: none;
    }

    .hero__corner {
        display: none;
    }
}

/* ----------------------------------------
   Reduced Motion - Accessibility
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .hero__image {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    .char {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
        animation: none;
    }

    .hero__scroll-line::before {
        animation: none;
        transform: translateY(0);
    }

    /* Message Section - Reduced Motion */
    .message__ornament--top,
    .message__ornament--bottom,
    .message__quote,
    .message__heading-line,
    .message__badge {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .message__quote {
        opacity: 0.12;
    }

    /* Product Detail - Reduced Motion */
    .product-detail__image-column,
    .product-detail__content-column {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .product-detail__flavor-icon {
        animation: none;
    }

    .product-detail__image {
        transition: none;
    }

    .product-detail__image-frame {
        transition: none;
    }

    .product-detail__image--product-shot {
        transition: none;
    }

    /* Omoi Section - Reduced Motion */
    .omoi__header,
    .omoi__story-image-column,
    .omoi__story-content-column {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .omoi__story-image {
        transition: none;
    }

    .omoi__story-image-frame {
        transition: none;
    }
}

/* ----------------------------------------
   High Contrast Mode
   ---------------------------------------- */
@media (prefers-contrast: high) {
    .hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.4) 100%
            );
    }

    .hero__title-ja,
    .hero__tagline-text {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }

    .hero__brand-text {
        border-color: rgba(248, 246, 241, 0.6);
    }

    .hero__button {
        border-width: 2px;
    }

    .hero__corner::before,
    .hero__corner::after {
        background: rgba(248, 246, 241, 0.5);
    }

    /* Message Section - High Contrast */
    .message__heading {
        color: var(--color-black);
    }

    .message__quote {
        opacity: 0.25;
    }

    .message__badge-text {
        /* border removed */
    }

    .message__ornament-line {
        opacity: 0.7;
    }

    .message__ornament-diamond {
        opacity: 0.8;
    }

    /* Product Detail - High Contrast */
    .product-detail__title-ja {
        color: var(--color-black);
    }

    .product-detail__description {
        border-color: var(--color-charcoal);
    }

    .product-detail__feature {
        background: rgba(196, 167, 125, 0.25);
        border: 1px solid var(--product-accent);
    }

    .product-detail__image-frame {
        border-width: 2px;
        opacity: 1;
    }

    /* Omoi Section - High Contrast */
    .omoi__title-ja {
        color: var(--color-black);
    }

    .omoi__quote {
        border-width: 4px;
        background: rgba(248, 246, 241, 0.9);
    }

    .omoi__quote-text {
        color: var(--color-black);
    }

    .omoi__quote-mark {
        opacity: 0.25;
    }

    .omoi__story-label-text {
        border-width: 2px;
    }

    .omoi__story-image-frame {
        border-width: 2px;
        opacity: 1;
    }

    .omoi__title-ornament-line,
    .omoi__story-ornament-line {
        opacity: 0.7;
    }

    .omoi__title-ornament-diamond {
        opacity: 0.8;
    }
}

/* ----------------------------------------
   Print Styles
   ---------------------------------------- */
@media print {
    .hero {
        height: auto;
        min-height: auto;
        page-break-inside: avoid;
        background: white;
    }

    .hero__background,
    .hero__scroll,
    .hero__corner,
    .hero__accent-line {
        display: none;
    }

    .hero__content {
        position: static;
        padding: 2rem;
    }

    .hero__title-ja,
    .hero__title-en,
    .hero__tagline-text,
    .hero__brand-text {
        color: #1a1816;
        text-shadow: none;
    }

    .hero__button {
        border-color: #1a1816;
        color: #1a1816;
    }

    /* Message Section - Print */
    .message {
        padding: 3rem 2rem;
        page-break-inside: avoid;
    }

    .message__bg-pattern {
        display: none;
    }

    .message__quote {
        opacity: 0.08;
    }

    .message__heading {
        color: #1a1816;
    }

    .message__badge-text {
        color: #3a3632;
        background: transparent;
    }

    .message__ornament-line,
    .message__ornament-diamond,
    .message__badge-line {
        background: #3a3632;
    }

    /* Product Detail - Print */
    .product-detail {
        padding: 3rem 2rem;
        page-break-inside: avoid;
    }

    .product-detail__bg-accent {
        display: none;
    }

    .product-detail__container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .product-detail__image-wrapper {
        aspect-ratio: 4 / 5;
    }

    .product-detail__image-frame {
        display: none;
    }

    .product-detail__flavor-icon {
        background: #3a3632;
    }

    .product-detail__flavor-text {
        color: #3a3632;
    }

    .product-detail__title-ja {
        color: #1a1816;
    }

    .product-detail__title-en {
        color: #3a3632;
    }

    .product-detail__price-main,
    .product-detail__price-inclusive {
        color: #1a1816;
    }

    .product-detail__description {
        border-color: #3a3632;
    }

    .product-detail__description-text {
        color: #1a1816;
    }

    .product-detail__feature {
        background: transparent;
        border: 1px solid #3a3632;
    }

    .product-detail__feature-icon {
        color: #3a3632;
    }

    .product-detail__feature-text {
        color: #1a1816;
    }

    .product-detail__ornament-line {
        background: #3a3632;
    }

    .product-detail__ornament-diamond {
        background: #3a3632;
    }

    /* Product-only image - print */
    .product-detail__image--product-shot {
        /* 他の画像と同じ */
    }

    /* Omoi Section - Print */
    .omoi {
        background: white;
        page-break-inside: avoid;
    }

    .omoi__bg-pattern {
        display: none;
    }

    .omoi__header {
        padding: 2rem;
    }

    .omoi__title-ja {
        color: #1a1816;
    }

    .omoi__title-en {
        color: #3a3632;
    }

    .omoi__title-ornament-line,
    .omoi__story-ornament-line {
        background: #3a3632;
    }

    .omoi__title-ornament-diamond {
        background: #3a3632;
    }

    .omoi__story {
        padding: 2rem;
    }

    .omoi__story-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .omoi__story-image-frame {
        display: none;
    }

    .omoi__story-label-text {
        color: #3a3632;
        border-color: #3a3632;
    }

    .omoi__quote {
        background: transparent;
        border-color: #3a3632;
    }

    .omoi__quote-text {
        color: #1a1816;
    }

    .omoi__quote-mark {
        opacity: 0.1;
        color: #3a3632;
    }
}

/* ========================================
   OMOI SECTION - Thoughts on the Product
   ========================================

   Design Philosophy:
   - Warm, editorial storytelling layout
   - Personal testimonial presentation
   - Typography-forward with generous whitespace
   - Alternating image/text layout for visual rhythm
   - Quotation styling evokes authenticity and intimacy
   - Connection to Hokkaido's artisan craft culture
   - Magazine-style editorial aesthetic

   ======================================== */

.omoi {
    position: relative;
    background: var(--color-ivory);
    overflow: hidden;
}

/* ----------------------------------------
   Background Pattern
   ----------------------------------------
   Subtle texture that adds warmth without
   competing with content.
   ---------------------------------------- */
.omoi__bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image:
        radial-gradient(
            circle at 15% 25%,
            var(--color-secondary) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 85% 75%,
            var(--color-secondary) 1px,
            transparent 1px
        );
    background-size: 80px 80px;
    pointer-events: none;
}

/* ----------------------------------------
   Section Header
   ----------------------------------------
   Centered, elegant title presentation
   with decorative ornaments.
   ---------------------------------------- */
.omoi__header {
    position: relative;
    z-index: 1;
    padding: var(--space-4xl) var(--container-padding) var(--space-2xl);
    text-align: center;
}

.omoi__header-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.omoi__title {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.omoi__title-ja {
    font-family: var(--font-serif-jp);
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    line-height: 1.4;
}

.omoi__title-en {
    font-family: var(--font-serif-en);
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-warm-gray);
}

/* Title Ornament */
.omoi__title-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 250px;
}

.omoi__title-ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-secondary) 50%,
        transparent 100%
    );
    opacity: 0.4;
}

.omoi__title-ornament-diamond {
    width: 6px;
    height: 6px;
    background: var(--color-secondary);
    transform: rotate(45deg);
    opacity: 0.5;
}

/* ----------------------------------------
   Story Block - Base Styles
   ----------------------------------------
   Editorial two-column layout for each
   story with image and quote content.
   ---------------------------------------- */
.omoi__story {
    position: relative;
    z-index: 1;
    padding: var(--space-2xl) var(--container-padding);
}

.omoi__story--first {
    padding-top: 0;
}

.omoi__story--second {
    padding-bottom: var(--space-4xl);
}

.omoi__story-container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

/* ----------------------------------------
   Reversed Layout
   ----------------------------------------
   Image on right, content on left for
   visual alternation.
   ---------------------------------------- */
.omoi__story--reverse .omoi__story-container {
    direction: rtl;
}

.omoi__story--reverse .omoi__story-container > * {
    direction: ltr;
}

/* ----------------------------------------
   Image Column
   ---------------------------------------- */
.omoi__story-image-column {
    position: relative;
}

.omoi__story-image-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.omoi__story-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--duration-slowest) var(--ease-out-expo);
}

/* Subtle hover zoom */
@media (hover: hover) {
    .omoi__story-image-wrapper:hover .omoi__story-image {
        transform: scale(1.03);
    }
}

/* Decorative Frame */
.omoi__story-image-frame {
    position: absolute;
    inset: var(--space-md);
    border: 1px solid rgba(139, 115, 85, 0.3);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity var(--duration-slow) var(--ease-gentle),
        transform var(--duration-slow) var(--ease-out-expo);
}

.omoi__story-image-wrapper:hover .omoi__story-image-frame {
    opacity: 1;
    transform: scale(1);
}

/* ----------------------------------------
   Content Column
   ---------------------------------------- */
.omoi__story-content-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
}

/* Story Label - Source attribution */
.omoi__story-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    align-self: flex-start;
}

.omoi__story-label-icon {
    width: 8px;
    height: 8px;
    background: var(--color-secondary);
    border-radius: 50%;
    opacity: 0.7;
}

.omoi__story-label-text {
    font-family: var(--font-serif-jp);
    font-size: clamp(0.8rem, 1.3vw, 0.95rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-secondary);
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(139, 115, 85, 0.3);
}

/* ----------------------------------------
   Quote Block
   ----------------------------------------
   Testimonial-style presentation with
   elegant quotation marks.
   ---------------------------------------- */
.omoi__quote {
    position: relative;
    margin: 0;
    padding: var(--space-lg) var(--space-xl);
    background: rgba(248, 246, 241, 0.6);
    border-left: 3px solid var(--color-secondary);
    border-radius: 0 4px 4px 0;
}

.omoi__quote-text {
    font-family: var(--font-serif-jp);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 300;
    line-height: 2.2;
    letter-spacing: 0.04em;
    color: var(--color-charcoal);
}

.omoi__quote-text + .omoi__quote-text {
    margin-top: var(--space-md);
}

/* Quotation Marks */
.omoi__quote-mark {
    position: absolute;
    font-family: var(--font-serif-en);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1;
    color: var(--color-secondary);
    opacity: 0.15;
    pointer-events: none;
    user-select: none;
}

.omoi__quote-mark--open {
    top: -0.1em;
    left: var(--space-sm);
}

.omoi__quote-mark--open::before {
    content: '\201C';
}

.omoi__quote-mark--close {
    bottom: -0.3em;
    right: var(--space-sm);
}

.omoi__quote-mark--close::before {
    content: '\201D';
}

/* Story Ornament */
.omoi__story-ornament {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 120px;
}

.omoi__story-ornament-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--color-secondary) 0%,
        transparent 100%
    );
    opacity: 0.4;
}

/* Reversed story ornament alignment */
.omoi__story--reverse .omoi__story-ornament {
    margin-left: auto;
}

.omoi__story--reverse .omoi__story-ornament-line {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-secondary) 100%
    );
}

/* ----------------------------------------
   Scroll-Driven Animations
   ---------------------------------------- */
.omoi__header {
    animation: omoiHeaderReveal 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.omoi__story-image-column {
    animation: omoiImageReveal 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
}

.omoi__story-content-column {
    animation: omoiContentReveal 1s var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 5% entry 40%;
}

.omoi__story--reverse .omoi__story-image-column {
    animation-name: omoiImageRevealReverse;
}

.omoi__story--reverse .omoi__story-content-column {
    animation-name: omoiContentRevealReverse;
}

@keyframes omoiHeaderReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes omoiImageReveal {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes omoiContentReveal {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes omoiImageRevealReverse {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes omoiContentRevealReverse {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ----------------------------------------
   Fallback for browsers without
   animation-timeline support
   ---------------------------------------- */
@supports not (animation-timeline: view()) {
    .omoi__header,
    .omoi__story-image-column,
    .omoi__story-content-column {
        animation-timeline: auto;
        animation-range: initial;
    }

    .omoi__header {
        animation: omoiHeaderRevealFallback 1s var(--ease-out-expo) 0.2s both;
    }

    .omoi__story-image-column {
        animation: omoiImageRevealFallback 1s var(--ease-out-expo) 0.3s both;
    }

    .omoi__story-content-column {
        animation: omoiContentRevealFallback 1s var(--ease-out-expo) 0.5s both;
    }

    .omoi__story--reverse .omoi__story-image-column {
        animation: omoiImageRevealReverseFallback 1s var(--ease-out-expo) 0.3s both;
    }

    .omoi__story--reverse .omoi__story-content-column {
        animation: omoiContentRevealReverseFallback 1s var(--ease-out-expo) 0.5s both;
    }

    @keyframes omoiHeaderRevealFallback {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes omoiImageRevealFallback {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes omoiContentRevealFallback {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes omoiImageRevealReverseFallback {
        from {
            opacity: 0;
            transform: translateX(40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes omoiContentRevealReverseFallback {
        from {
            opacity: 0;
            transform: translateX(-40px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* ========================================
   AGE GATE REMINDER
   ========================================

   Design Philosophy:
   - Fixed position element providing persistent
     legal compliance visibility
   - Subtle yet clearly readable presentation
   - Sophisticated styling that respects the
     luxury aesthetic while fulfilling legal duty
   - Position at bottom-right for unobtrusive presence

   ======================================== */
.age-gate-reminder {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 100;
    pointer-events: auto;
}

.age-gate-reminder__content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(44, 62, 45, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(196, 167, 125, 0.3);
    border-radius: 2px;
    box-shadow:
        0 4px 20px rgba(26, 24, 22, 0.15),
        0 1px 4px rgba(26, 24, 22, 0.1);
    animation: ageGateReveal 0.8s var(--ease-out-expo) 2.5s both;
}

@keyframes ageGateReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.age-gate-reminder__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-serif-en);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-cream);
    border: 1.5px solid var(--color-accent-apple);
    border-radius: 50%;
    flex-shrink: 0;
}

.age-gate-reminder__text {
    font-family: var(--font-serif-jp);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-cream);
    white-space: nowrap;
}

/* ========================================
   SITE FOOTER - Legal Compliance
   ========================================

   Design Philosophy:
   - Clean, dignified presentation of legal notices
   - Clear hierarchy with primary warning prominent
   - Elegant integration with overall site aesthetic
   - Generous padding for comfortable reading
   - Refined decorative elements echo site motifs

   ======================================== */
.site-footer {
    background: var(--color-primary);
    color: var(--color-cream);
    padding: var(--space-xl) var(--container-padding);
}

.site-footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

/* ----------------------------------------
   Warnings Section
   ---------------------------------------- */
.site-footer__warnings {
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.site-footer__warnings-title {
    font-family: var(--font-serif-jp);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: var(--color-accent-apple);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
}

.site-footer__warnings-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.site-footer__warning-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
}

.site-footer__warning-item:first-child {
    padding: var(--space-sm);
    background: rgba(248, 246, 241, 0.05);
    border: 1px solid rgba(196, 167, 125, 0.2);
    border-radius: 2px;
}

.site-footer__warning-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: var(--font-serif-en);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-cream);
    border: 2px solid var(--color-accent-apple);
    border-radius: 50%;
    flex-shrink: 0;
}

.site-footer__warning-text {
    font-family: var(--font-serif-jp);
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    line-height: 1.8;
    color: rgba(248, 246, 241, 0.9);
    text-align: left;
}

.site-footer__warning-item:first-child .site-footer__warning-text {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-cream);
}

/* ----------------------------------------
   Decorative Divider
   ---------------------------------------- */
.site-footer__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 300px;
    padding: var(--space-md) 0;
}

.site-footer__divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(196, 167, 125, 0.4) 50%,
        transparent 100%
    );
}

.site-footer__divider-diamond {
    width: 6px;
    height: 6px;
    background: var(--color-accent-apple);
    transform: rotate(45deg);
    opacity: 0.6;
}

/* ----------------------------------------
   Copyright
   ---------------------------------------- */
.site-footer__copyright {
    text-align: center;
}

.site-footer__copyright-text {
    font-family: var(--font-serif-en);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: rgba(248, 246, 241, 0.6);
}

/* ========================================
   RESPONSIVE - Age Gate & Footer
   ======================================== */

/* Tablet Portrait */
@media screen and (max-width: 1024px) {
    .site-footer {
        padding: var(--space-2xl) var(--space-xl);
    }
}

/* SP (Mobile) */
@media screen and (max-width: 780px) {
    /* Age Gate Reminder - SP */
    .age-gate-reminder {
        bottom: var(--space-md);
        right: var(--space-md);
        left: var(--space-md);
    }

    .age-gate-reminder__content {
        justify-content: center;
        padding: var(--space-sm) var(--space-md);
    }

    .age-gate-reminder__icon {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    .age-gate-reminder__text {
        font-size: 0.75rem;
    }

    /* Footer - SP */
    .site-footer {
        padding: var(--space-2xl) var(--space-lg);
    }

    .site-footer__container {
        gap: var(--space-lg);
    }

    .site-footer__warnings-title {
        font-size: 0.75rem;
        letter-spacing: 0.25em;
        margin-bottom: var(--space-md);
    }

    .site-footer__warnings-list {
        gap: var(--space-sm);
    }

    .site-footer__warning-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-xs);
        padding: var(--space-xs) 0;
    }

    .site-footer__warning-item:first-child {
        padding: var(--space-md) var(--space-sm);
    }

    .site-footer__warning-text {
        font-size: 0.8rem;
        text-align: center;
        line-height: 1.7;
    }

    .site-footer__warning-item:first-child .site-footer__warning-text {
        font-size: 0.9rem;
    }

    .site-footer__divider {
        max-width: 200px;
        padding: var(--space-sm) 0;
    }

    .site-footer__copyright-text {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }
}

/* Mobile Portrait */
@media screen and (max-width: 480px) {
    /* Age Gate Reminder - Mobile Portrait */
    .age-gate-reminder {
        bottom: var(--space-sm);
        right: var(--space-sm);
        left: var(--space-sm);
    }

    .age-gate-reminder__content {
        padding: var(--space-xs) var(--space-sm);
        gap: var(--space-xs);
    }

    .age-gate-reminder__icon {
        width: 22px;
        height: 22px;
        font-size: 0.6rem;
        border-width: 1px;
    }

    .age-gate-reminder__text {
        font-size: 0.7rem;
    }

    /* Footer - Mobile Portrait */
    .site-footer {
        padding: var(--space-xl) var(--space-md);
    }

    .site-footer__warning-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .site-footer__warning-text {
        font-size: 0.75rem;
    }

    .site-footer__warning-item:first-child .site-footer__warning-text {
        font-size: 0.85rem;
    }

    .site-footer__divider-diamond {
        width: 4px;
        height: 4px;
    }
}

/* ----------------------------------------
   Reduced Motion - Age Gate & Footer
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .age-gate-reminder__content {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ----------------------------------------
   High Contrast - Age Gate & Footer
   ---------------------------------------- */
@media (prefers-contrast: high) {
    .age-gate-reminder__content {
        background: rgba(44, 62, 45, 1);
        border-color: var(--color-accent-apple);
    }

    .age-gate-reminder__icon {
        border-width: 2px;
    }

    .site-footer__warning-item:first-child {
        border-width: 2px;
        background: rgba(248, 246, 241, 0.1);
    }

    .site-footer__warning-text {
        color: var(--color-cream);
    }

    .site-footer__copyright-text {
        color: rgba(248, 246, 241, 0.8);
    }
}

/* ----------------------------------------
   Print - Age Gate & Footer
   ---------------------------------------- */
@media print {
    .age-gate-reminder {
        position: static;
        margin: 2rem auto;
    }

    .age-gate-reminder__content {
        background: white;
        border-color: #3a3632;
        box-shadow: none;
    }

    .age-gate-reminder__icon {
        color: #3a3632;
        border-color: #3a3632;
    }

    .age-gate-reminder__text {
        color: #1a1816;
    }

    .site-footer {
        background: white;
        border-top: 1px solid #3a3632;
        page-break-inside: avoid;
    }

    .site-footer__warnings-title {
        color: #3a3632;
    }

    .site-footer__warning-icon {
        color: #3a3632;
        border-color: #3a3632;
    }

    .site-footer__warning-text {
        color: #1a1816;
    }

    .site-footer__warning-item:first-child {
        border-color: #3a3632;
        background: transparent;
    }

    .site-footer__divider-line {
        background: #3a3632;
    }

    .site-footer__divider-diamond {
        background: #3a3632;
    }

    .site-footer__copyright-text {
        color: #3a3632;
    }
}

/* ----------------------------------------
   Limited Notice - 限定販売のお知らせ
   ---------------------------------------- */
.limited-notice {
    background: var(--color-cream);
    padding: 0 var(--container-padding) var(--space-lg);
}

.limited-notice__container {
    max-width: var(--container-max);
    margin: 0 auto;
    text-align: center;
}

.limited-notice__text {
    font-family: var(--font-serif-jp);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-charcoal);
    letter-spacing: 0.05em;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-secondary);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
    display: inline-block;
}

/* Tablet and larger */
@media (min-width: 768px) {
    .limited-notice {
        padding: 0 var(--container-padding) var(--space-xl);
    }

    .limited-notice__text {
        font-size: 1rem;
        padding: var(--space-md) var(--space-xl);
    }
}