/*
Theme Name: a Tempo Theme
Description: a Tempo Sumiyoshi Kobe Original Theme
Author: hirasawaharuka
Version: 1.0
*/

:root {
    --primary-color: #0b3d25;
    --text-color: #0b3d25;
    --bg-color: #ffffff;
    --accent-color: #c9a063;
    --font-serif: "BIZ UD Mincho", serif;
    --font-sans: "BIZ UD Mincho", serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 0.6802721088vw;
    scroll-padding-top: 100px; /* 固定ヘッダー分、アンカー先が隠れないように */
}

@media (max-width: 768px) { 
    html {
        font-size: 2.5641025641vw;
    }
}

body {
    font-family: var(--font-serif);
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

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

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* 出現アニメーション（ヘッダー・フッター以外） */
/* JS が有効な場合のみ初期状態を非表示に（ノースクリプト時はそのまま表示） */
/* 初期状態は transition なしで一瞬で適用し、「下から上に」のアニメーションは .is-visible 時のみ */
/* 未表示時は pointer-events: none でタッチを透過し、スマホでスクロール不能になるのを防ぐ */
.js-reveal .fade-in-up {
    opacity: 0;
    transform: translateY(4.8rem);
    transition: none;
    pointer-events: none;
}

.js-reveal .fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.65s ease-out, transform 0.65s ease-out;
    pointer-events: auto;
}

/* 子要素のスタッガー用（オプション） */
.fade-in-up.stagger-children > * {
    opacity: 0;
    transform: translateY(3.6rem);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    pointer-events: none;
}

.fade-in-up.stagger-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.fade-in-up.stagger-children > *:nth-child(1) { transition-delay: 0.05s; }
.fade-in-up.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.fade-in-up.stagger-children > *:nth-child(3) { transition-delay: 0.15s; }
.fade-in-up.stagger-children > *:nth-child(4) { transition-delay: 0.2s; }
.fade-in-up.stagger-children > *:nth-child(5) { transition-delay: 0.25s; }
.fade-in-up.stagger-children > *:nth-child(6) { transition-delay: 0.3s; }
.fade-in-up.stagger-children > *:nth-child(7) { transition-delay: 0.35s; }
.fade-in-up.stagger-children > *:nth-child(8) { transition-delay: 0.4s; }

@media (max-width: 768px) {
    .js-reveal .fade-in-up {
        transform: translateY(2.8rem);
    }
    .fade-in-up.stagger-children > * {
        transform: translateY(2rem);
    }
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 3rem 4rem 3rem 5.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background-color: transparent;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* フッターが全画面表示のときはヘッダーを非表示 */
.header.header-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
}

.header .logo a {
    position: relative;
    display: block;
}

.header .logo img {
    height: 11.5rem;
    width: auto;
    display: block;
}

.header .logo .logo-default {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: 0.5s;
}

.header .logo .logo-scroll {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    position: absolute;
    left: 0;
    top: 0;
}

.header .header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 6.3rem;
}

.header .nav-links {
    display: flex;
    gap: 3.6rem;
}

.header .nav-links li a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: 1.8rem;
    font-family: var(--font-sans);
    letter-spacing: 0.11em;
    color: #fff;
}

/* nav-links と Reservation 共通：テキストホバー（上に消えて下から出現・1文字ずつスタッガー） */
.header .nav-links li a .nav-link-inner,
.header .nav-links li a .nav-link-clone,
.header .btn-reservation .nav-link-inner,
.header .btn-reservation .nav-link-clone,
.button-wave .nav-link-inner,
.button-wave .nav-link-clone,
.link-wave .nav-link-inner,
.link-wave .nav-link-clone {
    display: block;
    line-height: 1.5;
}

.header .nav-links li a .nav-char,
.header .btn-reservation .nav-char,
.button-wave .nav-char,
.link-wave .nav-char {
    display: inline-block;
    transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
    transition-delay: calc(var(--char-index) * 0.04s);
}

.header .nav-links li a .nav-link-inner .nav-char,
.header .btn-reservation .nav-link-inner .nav-char,
.button-wave .nav-link-inner .nav-char,
.link-wave .nav-link-inner .nav-char {
    transform: translateY(0);
}

@media (hover: hover) {
    .header .nav-links li a:hover .nav-link-inner .nav-char,
    .header .btn-reservation:hover .nav-link-inner .nav-char,
    .button-wave:hover .nav-link-inner .nav-char,
    .link-wave:hover .nav-link-inner .nav-char {
        transform: translateY(-180%);
    }
}

.header .nav-links li a .nav-link-clone,
.header .btn-reservation .nav-link-clone,
.button-wave .nav-link-clone,
.link-wave .nav-link-clone {
    position: absolute;
    left: 0;
    top: 110%;
    width: 100%;
    box-sizing: border-box;
}

/* Reservation・VIEW MORE：テキストだけのラップで overflow を切り、nav-links と同じ可動域にする */
.header .btn-reservation .btn-reservation-text-wrap,
.button-wave .btn-reservation-text-wrap {
    display: block;
    overflow: hidden;
    position: relative;
}

.header .nav-links li a .nav-link-clone .nav-char,
.header .btn-reservation .nav-link-clone .nav-char,
.button-wave .nav-link-clone .nav-char,
.link-wave .nav-link-clone .nav-char {
    transform: translateY(0);
}

@media (hover: hover) {
    .header .nav-links li a:hover .nav-link-clone .nav-char,
    .header .btn-reservation:hover .nav-link-clone .nav-char,
    .button-wave:hover .nav-link-clone .nav-char,
    .link-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-120%);
    }
}

/* nav-links のみ：下から出現するテキストを元のテキストと同一位置に */
.header .nav-links li a .nav-link-clone {
    top: 100%;
}
@media (hover: hover) {
    .header .nav-links li a:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

/* btn-reservation：下から出現するテキストを元のテキストと同一位置に */
.header .btn-reservation .nav-link-clone {
    top: 100%;
}
@media (hover: hover) {
    .header .btn-reservation:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

.link-wave {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.button-wave {
    position: relative;
    overflow: hidden;
    border: none;
}

/* VIEW MORE：Reservation同様、ホバーで枠だけ小さく見せる（テキストサイズは不変） */
.button-wave::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--primary-color);
    border-radius: 4.2rem;
    pointer-events: none;
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
    z-index: -1;
}

@media (hover: hover) {
    .button-wave:hover::after {
        transform: scale(0.95);
    }
}

/* Access「インターネット予約」：塗りつぶしボタンなので背景も::afterで描き、ホバーで一緒に縮む */
.access .button-wave {
    background-color: transparent;
}

.access .button-wave::after {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

@media (hover: hover) {
    .access .button-wave:hover::after {
        transform: scale(0.95);
    }
}

.header .header-actions {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.header .btn-reservation {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: none;
    padding: 0.9rem 2.25rem;
    font-size: 1.8rem;
    letter-spacing: 0.11em;
    color: #fff;
    background-color: transparent;
}

/* 枠だけ::afterで描画し、ホバーで枠だけscale(0.9)。テキストは一切変えない */
.header .btn-reservation::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #fff;
    border-radius: 0;
    pointer-events: none;
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
    z-index: -1;
}

@media (hover: hover) {
    .header .btn-reservation:hover::after {
        transform: scale(0.95);
    }

    .header .btn-reservation:hover {
        color: #fff;
        background-color: transparent;
    }
}

.header .link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
}

@media (hover: hover) {
    .header .link:hover {
        opacity: 0.5;
    }
}

.header .link svg {
    width: 4.5rem;
    height: 4.5rem;
}

.header .link svg path,
.header .link svg .cls-1 {
    fill: #fff;
    transition: fill 0.5s ease;
}

/* スクロール時のヘッダー内の要素 */
.header.scrolled:not(.has-drawer-open) .logo .logo-default {
    opacity: 0;
    visibility: hidden;
}

.header.scrolled:not(.has-drawer-open) .logo .logo-scroll {
    opacity: 1;
    visibility: visible;
}

.header.scrolled:not(.has-drawer-open) .nav-overlay ul li a {
    color: #0b3d25;
}

.header.scrolled:not(.has-drawer-open) .btn-reservation {
    color: #0b3d25;
    background-color: transparent;
}

.header.scrolled:not(.has-drawer-open) .btn-reservation::after {
    border-color: #0b3d25;
}

@media (hover: hover) {
    .header.scrolled:not(.has-drawer-open) .btn-reservation:hover {
        color: #0b3d25;
        background-color: transparent;
        border-color: #0b3d25;
    }
}

.header.scrolled:not(.has-drawer-open) .link svg path,
.header.scrolled:not(.has-drawer-open) .link svg .cls-1 {
    fill: #0b3d25;
}

/* ハンバーガー（デスクトップでは非表示） */
.hamburger-wrap {
    display: none;
}
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    width: 3.7rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 1002;
    transition: opacity 0.3s ease;
}
@media (hover: hover) {
    .hamburger-btn:hover {
        opacity: 0.8;
    }
}
.hamburger-line {
    display: block;
    width: 3.7rem;
    height: 0.3rem;
    border-radius: 0.3rem;
    background-color: #fff;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    transform-origin: center center;
}
.header.scrolled:not(.has-drawer-open) .hamburger-line {
    background-color: #0b3d25;
}
/* 閉じるボタン：2本の線が中央で交差する×に */
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(1.1rem) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-1.1rem) rotate(-45deg);
}

/* モバイル用予約ボタン（デスクトップでは非表示） */
.btn-reservation-mobile {
    display: none;
}

/* モバイルドロワー・バックドロップ（デスクトップでは非表示） */
.header-mobile-drawer,
.header-mobile-drawer-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .header {
        height: 10.8rem;
        padding: 1.7rem 2.7rem;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 1002;
    }

    .hamburger-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 0;
        flex-shrink: 0;
        position: relative;
        z-index: 10;
    }
    .hamburger-btn {
        display: flex;
    }
    .hamburger-label {
        margin-top: 0.8rem;
        font-size: 1rem;
        letter-spacing: 0.11em;
        color: #fff;
        transition: color 0.45s ease, opacity 0.35s ease;
    }
    .header.scrolled:not(.has-drawer-open) .hamburger-label {
        color: #0b3d25;
    }
    .header.has-drawer-open .hamburger-label {
        color: #fff;
    }

    /* ストーリー見出し（暗い背景）上ではヘッダーを白表示に */
    .header.header-over-story-heading:not(.has-drawer-open) .logo .logo-default {
        opacity: 1;
        visibility: visible;
    }
    .header.header-over-story-heading:not(.has-drawer-open) .logo .logo-scroll {
        opacity: 0;
        visibility: hidden;
    }
    .header.header-over-story-heading:not(.has-drawer-open) .hamburger-line {
        background-color: #fff;
    }
    .header.header-over-story-heading:not(.has-drawer-open) .hamburger-label {
        color: #fff;
    }

    .header .logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        order: 1;
        z-index: 10;
    }
    .header .logo img {
        height: 7.4rem;
    }

    .header .header-content {
        position: relative;
        order: 2;
        margin-left: 0;
        justify-content: flex-end;
        gap: 0;
        z-index: 10;
    }
    .header .header-actions {
        gap: 0;
    }

    .header .header-content .nav-overlay,
    .header .header-content .link,
    .header .header-content .btn-reservation {
        display: none !important;
    }
    .btn-reservation-mobile {
        display: inline-block;
        position: relative;
        font-size: 1.6rem;
        letter-spacing: 0.15em;
        color: #fff;
        background-color: transparent;
        text-align: center;
    }
    .btn-reservation-mobile .btn-reservation-mobile-en {
        font-size: 1rem;
        letter-spacing: 0.11em;
    }
    .btn-reservation-mobile:hover {
        color: #fff;
    }
    .header.scrolled:not(.has-drawer-open) .btn-reservation-mobile {
        color: #0b3d25;
    }
    .header.scrolled:not(.has-drawer-open) .btn-reservation-mobile:hover {
        color: #0b3d25;
    }

    /* ストーリー見出し通過時：予約ボタンも白に（.scrolled より後に書いて上書き） */
    .header.header-over-story-heading:not(.has-drawer-open) .btn-reservation-mobile {
        color: #fff;
    }
    .header.header-over-story-heading:not(.has-drawer-open) .btn-reservation-mobile:hover {
        color: #fff;
    }

    /* モバイルドロワー：画面上部から降りてくる */
    .header-mobile-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    .header-mobile-drawer-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* 閉じる時：要素が消えてから背景が上がるので、背景は delay を持つ */
    .header-mobile-drawer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh; /* 実機スマホ：アドレスバー表示/非表示でビューポートが変わるため */
        background: #072717;
        color: #fff;
        z-index: 2;
        padding: 15.9rem 3.2rem;
        box-sizing: border-box;
        transform: translateY(-100%);
        transition: transform 1.25s cubic-bezier(0.32, 0.72, 0, 1);
        transition-delay: 0.8s; /* 閉じる時：要素が消える 0.8s の後に背景が上がる */
        overflow-y: auto;
    }
    .header-mobile-drawer.is-open {
        transform: translateY(0);
        transition-delay: 0s;
    }

    /* ドロワー表示時：ヘッダーのロゴ・予約はその場に表示（緑背景で見えるよう白に） */
    .header.has-drawer-open .logo .logo-default {
        opacity: 1;
        visibility: visible;
    }
    .header.has-drawer-open .logo .logo-scroll {
        opacity: 0;
        visibility: hidden;
    }
    .header.has-drawer-open .btn-reservation-mobile {
        color: #fff;
    }
    .header.has-drawer-open .btn-reservation-mobile::after {
        border-color: #fff;
    }
    .header.has-drawer-open .btn-reservation-mobile:hover {
        color: #fff;
    }
    .header.has-drawer-open .hamburger-line {
        background-color: #fff;
    }

    /* 開く時：背景降り切ってから要素が出現。閉じる時：要素が先に下へ消え、その後背景が上がる */
    .header-mobile-drawer-nav {
        flex: 1;
        width: 100%;
        opacity: 0;
        transform: translateY(2.4rem);
        transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.32, 0.72, 0, 1);
        transition-delay: 0s;
    }
    .header-mobile-drawer.is-open .header-mobile-drawer-nav {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 1s;
    }

    .header-mobile-drawer-links {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .header-mobile-drawer-links li {
        border-bottom: 1px solid #fff;
    }
    .header-mobile-drawer-links li a {
        display: block;
        padding: 1.8rem 0;
        font-size: 1.8rem;
        letter-spacing: 0.11em;
        color: #fff;
    }
    .header-mobile-drawer-links li a:hover {
        opacity: 0.85;
    }
    /* ドロワー内の要素は全て#fff */
    .header-mobile-drawer a {
        color: #fff;
    }
    .header-mobile-drawer-instagram {
        margin-top: 3.6rem;
        justify-content: flex-start !important;
        opacity: 1 !important;
    }
    .header-mobile-drawer-instagram svg {
        width: 3.6rem !important;
        height: 3.6rem !important;
    }
    .header-mobile-drawer-instagram svg path,
    .header-mobile-drawer-instagram svg .cls-1 {
        fill: #fff;
    }
}

/* Hero：縦スクロールを明示し、ヒーロー→コンセプトへのスクロールをしやすくする */
.hero {
    height: 100vh;
    height: 100dvh; /* 実機スマホ：アドレスバー表示/非表示でビューポートが変わるため */
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

/* テキストの可読性向上：画像全体を少し暗くするオーバーレイ */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1;
}

.hero .element {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slider-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.hero-slider-item.is-active {
    opacity: 1;
}

.hero-slider-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .hero-slider-item img {
        object-position: 55% center;
    }
}

.hero .catchphrase {
    position: absolute;
    bottom: 4.5rem;
    left: 5.4rem;
    z-index: 3;
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.hero .a-tempo-sumiyoshi {
    font-size: 2.4rem;
    margin-bottom: 2.7rem;
    letter-spacing: 0.11em;
}

.hero .ALL {
    font-size: 4.2rem;
    margin-bottom: 2.4rem;
    letter-spacing: 0.25em;
}

.hero .creative-italian {
    font-size: 2.4rem;
    letter-spacing: 0.11em;
}

@media (max-width: 768px) {
    .hero {
        /* height: 80vh; */
    }

    /* ヒーロー画像：焦点を右にずらす */
    .hero .element {
        object-position: 55% center;
    }

    .hero .catchphrase {
        bottom: 3.8rem;
        left: 2rem;
    }

    .hero .a-tempo-sumiyoshi {
        font-size: 1.4rem;
        margin-bottom: 1.4rem;
    }

    .hero .ALL {
        font-size: 2.4rem;
        margin-bottom: 1.2rem;
    }

    .hero .creative-italian {
        font-size: 1.4rem;
    }
}

/* Concept Section */
.concept {
    padding-top: 16rem;
    display: flex;
    gap: 9rem;
}

.concept .image {
    flex: 1;
    padding-top: 2.1rem;
}

.concept .frame {
    display: flex;
    gap: 6.45rem;
    padding-right: 90px;
}

.concept .heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.concept .section-title-vertical {
    font-size: 9rem;
    line-height: 1;
    letter-spacing: 0.25em;
}

.concept .section-subtitle {
    font-size: 2.4rem;
    letter-spacing: 0.11em;
}

.concept .concept-body {
    display: flex;
    flex-direction: column;
    padding-top: 7.8rem;
}

.concept .a-tempo {
    font-size: 2rem;
    letter-spacing: 0.15em;
}

.concept .spend-time-at-your {
    font-size: 1.2rem;
    letter-spacing: 0.11em;
    padding: 4.5rem 0 7.8rem;
}

.button {
    display: inline-block;
    padding: 1.5rem 2.8rem;
    border: 1px solid var(--primary-color);
    border-radius: 4.2rem;
    font-size: 1.6rem;
    letter-spacing: 0.11em;
    width: fit-content;
}

/* VIEW MORE（.button-wave）は枠を::afterで描くため、本体のborderは消す */
.button.button-wave {
    border: none;
}

/* concept-body 内の button-wave：下から出現するテキストを元のテキストと同一位置に */
.concept .concept-body .button-wave .nav-link-clone {
    top: 100%;
}
@media (hover: hover) {
    .concept .concept-body .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

/* レスポンシブ用 VIEW MORE ラッパー（デスクトップでは非表示） */
.concept-viewmore-wrap,
.concept-viewmore-mobile {
    display: none;
}

@media (max-width: 768px) {
    .concept {
        padding-top: 10rem;
        flex-direction: column;
        gap: 4.3rem;
    }

    .concept .image {
        padding-top: 0;
        padding-right: 3.6rem;
    }

    .concept .frame {
        padding-right: 0;
        margin: 0 auto;
        gap: 2.8rem;
    }

    .concept .heading {
        gap: 0.8rem;
    }

    .concept .section-title-vertical {
        font-size: 4.4rem;
    }

    .concept .section-subtitle {
        font-size: 1.2rem;
    }

    .concept .concept-body {
        padding-top: 0.8rem;
    }

    .concept .a-tempo {
        font-size: 1.5rem;
    }

    .concept .spend-time-at-your {
        font-size: 0.8rem;
        padding: 2.1rem 0 0;
    }

    .button {
        padding: 1.2rem 2.24rem;
        font-size: 1.2rem;
    }

    /* デスクトップ用ボタンは非表示、画面幅中央にモバイル用を表示 */
    .concept .concept-viewmore-desktop {
        display: none;
    }
    .concept-viewmore-wrap {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .concept-viewmore-mobile {
        display: inline-block;
    }
    .concept .concept-viewmore-wrap .button-wave .nav-link-clone {
        top: 100%;
    }
    .concept .concept-viewmore-wrap .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

/* Gallery Section */
.gallery-section {
    position: relative;
    margin-top: 16.2rem;
    min-height: 112.1rem;
}

.gallery-item:nth-child(1) {
    position: absolute;
    top: 37.2rem;
    left: 0;
    width: 59.4rem;
}
.gallery-item:nth-child(2) {
    position: absolute;
    top: 0;
    right: 12rem;
    width: 49.7rem;
}
.gallery-item:nth-child(3) {
    position: absolute;
    top: 85rem;
    right: 33.4rem;
    width: 40.14rem;
}

@media (max-width: 768px) {
    .gallery-section {
        margin-top: 10.6rem;
        min-height: 32.9rem;
    }

    .gallery-item:nth-child(1) {
        top: 9.5rem;
        width: 15.6rem;
    }
    .gallery-item:nth-child(2) {
        top: 0;
        right: 3.9rem;
        width: 15rem;
    }
    .gallery-item:nth-child(3) {
        top: 25.2rem;
        right: 0;
        width: 23rem;
    }
}

/* Story Section */
.story {
    position: relative;
    padding-top: 20rem;
    overflow: visible;
}

/* 手描き線：画面左端から画像左端まで表示（画像手前で止め、画像の下に隠れるように見せる） */
.story .story-hero-line-wrap {
    position: absolute;
    left: 0;
    top: 45rem;
    height: 60rem;
    pointer-events: none;
    color: var(--primary-color);
    z-index: -1;
    overflow: hidden;
    display: block;
    contain: layout paint;
}

/* Canvas：有機的で交差する2本の波（wrap いっぱいに表示）。タッチは透過してスクロール可能に */
.story .story-hero-canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.story .story-intro {
    display: flex;
    gap: 12rem;
    padding-left: 12rem;
    align-items: stretch;
}

.story .heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.story .section-title-vertical {
    font-size: 9rem;
    line-height: 1;
    letter-spacing: 0.25em;
}

.story .section-subtitle {
    font-size: 2.4rem;
    letter-spacing: 0.11em;
}

.story .story-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3.3rem;
}

.story .story-lead {
    display: flex;
    flex-direction: column;
    gap: 1.65rem;
    padding-top: 1.35rem;
    padding-left: 2.4rem;
}

.story .story-heading {
    font-size: 3.6rem;
    letter-spacing: 0.25em;
}

.story .story-lead-en {
    font-size: 1.35rem;
    letter-spacing: 0.11em;
}

.story .items {
    display: flex;
    justify-content: space-between;
    padding: 16.2rem 10rem 7.5rem;
    overflow: hidden;
}

.story .item {
    width: 28rem;
    flex-shrink: 0;
    position: relative;
}

.story .item-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.story .item-title {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    padding-top: 3.3rem;
}

.story .item-more-link {
    margin-top: 1.6rem;
    padding-bottom: 0.15em;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    position: relative;
    z-index: 2;
}

.story .item-more-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

@media (hover: hover) {
    .story .item:hover .item-more-link::after {
        animation: map-underline-redraw 0.7s ease forwards;
    }

    .story .item:hover .item-more-link .nav-link-inner .nav-char {
        transform: translateY(-180%);
    }

    .story .item:hover .item-more-link .nav-link-clone .nav-char {
        transform: translateY(-120%);
    }
}

.story .item-more-link.underline-leave::after {
    animation: map-underline-redraw-leave 0.7s ease forwards;
}

.story .button-wrapper {
    text-align: center;
}

/* story 内の button-wave：下から出現するテキストを元のテキストと同一位置に */
.story .button-wave .nav-link-clone {
    top: 100%;
}
@media (hover: hover) {
    .story .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

@media (max-width: 768px) {
    .story {
        padding-top: 17rem;
    }

    .story .story-hero-line-wrap {
        display: none;
    }

    .story .story-intro {
        flex-direction: column;
        gap: 6.5rem;
        padding-left: 0;
    }

    .story .heading {
        position: relative;
        gap: 0.8rem;
        background-image: var(--story-hero-bg);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        aspect-ratio: 6016 / 3900;
        min-height: 0;
        justify-content: center;
        align-items: center;
    }

    /* テキスト可読性のため背景を暗くするオーバーレイ */
    .story .heading::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.2);
        pointer-events: none;
        z-index: 0;
    }

    .story .heading .section-title-vertical,
    .story .heading .section-subtitle {
        position: relative;
        z-index: 1;
    }

    .story .section-title-vertical {
        font-size: 4.4rem;
        color: #fff;
    }

    .story .section-subtitle {
        font-size: 1.2rem;
        color: #fff;
    }

    .story .story-heading {
        font-size: 2rem;
        text-align: center;
    }

    .story .story-lead {
        padding-top: 0;
        padding-left: 0;
        gap: 1.3rem;
    }

    .story .story-lead-en {
        font-size: 1.1rem;
        text-align: center;
    }

    .story .story-hero-image {
        display: none;
    }

    .story .items {
        padding: 4.2rem 2.4rem 3.7rem;
    }

    .story .item {
        width: 10.5rem;
    }

    .story .item-title {
        font-size: 1.4rem;
        padding-top: 1.2rem;
    }

    .story .item-more-link {
        margin-top: 0.6rem;
        font-size: 1.2rem;
    }

    .story .items .item:nth-child(n+4) {
        display: none;
    }

}

/* Menu Section */
.menu {
    padding-top: 20rem;
}

.menu .menu-inner {
    position: relative;
    padding: 9.6rem 0 10.6rem 18.6rem;
}

.menu .section-title {
    font-size: 4.8rem;
    letter-spacing: 0.11em;
}

.menu .course-list {
    display: flex;
    flex-direction: column;
    gap: 6.5rem;
    padding-top: 7rem;
    width: 56.55rem;
}

.menu .course {
    display: flex;
    justify-content: space-between;
}

.menu .course-heading {
    display: flex;
    flex-direction: column;
    gap: 1.95rem;
}

.menu .course-name {
    font-size: 2.4rem;
    letter-spacing: 0.15em;
}

.menu .course-name .course-name-sub {
    font-size: 1.8rem;
}

.menu .course-description {
    font-size: 1.2rem;
    letter-spacing: 0.11em;
}

.menu .course-price {
    font-size: 2.4rem;
    letter-spacing: 0.11em;
}

.menu img:nth-of-type(1) {
    width: 30rem;
    position: absolute;
    top: 0;
    right: 18.9rem;
}

.menu img:nth-of-type(2) {
    width: 26rem;
    position: absolute;
    top: 25.9rem;
    right: 0;
}

.menu .menu-image-mobile {
    display: none;
}

@media (max-width: 768px) {
    .menu {
        padding-top: 13rem;
    }

    .menu .menu-inner {
        padding: 27rem 2.4rem 0;
    }

    .menu .section-title {
        font-size: 3.2rem;
    }

    .menu .course-list {
        gap: 4.5rem;
        padding-top: 4rem;
        width: 100%;
    }

    .menu .course-heading {
        gap: 1rem;
    }

    .menu .course-name {
        font-size: 1.6rem;
    }

    .menu .course-name .course-name-sub {
        font-size: 1.2rem;
    }

    .menu .course-description {
        font-size: 0.9rem;
    }

    .menu .course-price {
        font-size: 1.6rem;
    }

    .menu img:nth-of-type(1) {
        width: 15.5rem;
        left: 6.5rem;
    }

    .menu .menu-image-desktop {
        display: none;
    }

    .menu .menu-image-mobile {
        display: block;
        position: absolute;
        width: 13rem;
        top: 8rem;
        right: 0;
    }
}

/* News Section */
.news {
    padding: 20rem 18.6rem 0;
}

.news .section-heading {
    text-align: center;
}

.news .section-title {
    font-size: 4.8rem;
    letter-spacing: 0.11em;
}

.news .news-list {
    padding-top: 8.1rem;
}

.news .news-item,
.page-news-list-inner .news-item {
    display: flex;
    gap: 9.15rem;
    padding: 4.2rem 4.5rem;
    border-bottom: 1px solid var(--primary-color);
}

.news .news-item:first-child,
.page-news-list-inner .news-item:first-child {
    border-top: 1px solid var(--primary-color);
}

.news .news-meta,
.page-news-list-inner .news-meta {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}

.news .news-item time.news-meta,
.page-news-list-inner .news-item time.news-meta {
    letter-spacing: 0.11em;
}

.news .news-item .news-meta,
.news .news-item .news-item-categories,
.page-news-list-inner .news-item .news-meta,
.page-news-list-inner .news-item .news-item-categories {
    transition: transform 0.35s ease;
}

@media (hover: hover) {
    .news .news-item:hover .news-meta,
    .news .news-item:hover .news-item-categories,
    .page-news-list-inner .news-item:hover .news-meta,
    .page-news-list-inner .news-item:hover .news-item-categories {
        transform: translateX(2.4rem);
    }
}

.news .button-wrapper {
    text-align: center;
    padding-top: 7.8rem;
}

/* news 内の button-wave：下から出現するテキストを元のテキストと同一位置に */
.news .button-wave .nav-link-clone {
    top: 100%;
}
@media (hover: hover) {
    .news .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

@media (max-width: 768px) {
    .news {
        padding: 13rem 2.4rem 0;
    }

    .news .section-title {
        font-size: 3.2rem;
    }

    .news .news-list {
        padding-top: 4rem;
    }

    .news .news-item,
    .page-news-list-inner .news-item {
        flex-direction: column;
        gap: 0.8rem;
        padding: 2rem 1.4rem;
    }

    .news .news-meta,
    .page-news-list-inner .news-meta {
        font-size: 1.4rem;
    }

    .news .button-wrapper {
        padding-top: 3.7rem;
    }
}

/* Vision Section */
.vision {
    display: flex;
    flex-direction: column;
    padding-top: 20rem;
    color: #fff;
}

.vision .vision-content {
    position: relative;
}

.vision .vision-image-wrap {
    position: relative;
    display: block;
    width: 100%;
}

/* テキスト可読性のため画像を暗くするオーバーレイ */
.vision .vision-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.vision .vision-image-mobile {
    display: none;
}

.vision .vision-catchphrase {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    text-align: center;
    align-items: center;
}

/* vision-catchphrase は中央配置の translate(-50%, -50%) を維持しつつ出現アニメ */
.js-reveal .vision .vision-catchphrase.fade-in-up {
    transform: translate(-50%, -50%) translateY(4.8rem);
}

.js-reveal .vision .vision-catchphrase.fade-in-up.is-visible {
    transform: translate(-50%, -50%) translateY(0);
}

@media (max-width: 768px) {
    .js-reveal .vision .vision-catchphrase.fade-in-up {
        transform: translate(-50%, -50%) translateY(2.4rem);
    }
}

.vision .vision-quote-ja {
    font-size: 3.6rem;
    letter-spacing: 0.25em;
}

.br-mobile {
    display: none;
}

.vision .vision-quote-en {
    font-size: 1.65rem;
    letter-spacing: 0.11em;
}

.vision .vision-slider {
    margin-top: -23rem;
    overflow: hidden;
    z-index: 1;
}

.vision .vision-slider-track {
    display: flex;
    gap: 2.4rem;
    width: max-content;
    /* 位置はJSで --vision-slider-position を更新（0〜1）。向き切り替え時もスムーズに */
    transform: translate3d(calc(-50% + var(--vision-slider-position, 0) * 50%), 0, 0);
    will-change: transform;
    backface-visibility: hidden;
}

/* スマホのみ：JSではなくCSSアニメでループ（コンポジタで処理されカクつき軽減） */
@keyframes vision-slider-mobile {
    0%   { transform: translate3d(-50%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.vision .vision-slider-item {
    width: 46.5rem;
    height: 30.3rem;
    flex-shrink: 0;
}

.vision .vision-slider-img-desktop {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vision .vision-slider-img-mobile {
    display: none;
}

@media (max-width: 768px) {
    .vision {
        padding-top: 13rem;
    }

    .vision .vision-image-desktop {
        display: none;
    }

    .vision .vision-image-mobile {
        display: block;
    }

    .vision .vision-catchphrase {
        top: 35%;
        gap: 1.5rem;
    }

    .vision .vision-quote-ja {
        font-size: 2rem;
    }

    .vision .vision-quote-en {
        font-size: 1rem;
    }

    .br-mobile {
        display: block;
    }

    .vision .vision-slider {
        margin-top: -12rem;
    }

    .vision .vision-slider-track {
        gap: 0.8rem;
        animation: vision-slider-mobile 12s linear infinite;
        transform: none; /* アニメの keyframes で transform を制御 */
    }

    .vision .vision-slider-item {
        width: 12.4rem;
        height: 14.4rem;
    }
    
    .vision .vision-slider-img-desktop {
        display: none;
    }

    .vision .vision-slider-img-mobile {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Access Section */
.access {
    padding: 16rem 11.8rem 0 10.3rem;
}

.access .section-heading {
    text-align: center;
}

.access .section-title {
    font-size: 4.8rem;
    letter-spacing: 0.11em;
}

.access .access-inner {
    display: flex;
    gap: 8.8rem;
    padding-top: 9.9rem;
}

.access .access-image {
    flex: 1;
}

.access .access-info {
    display: flex;
    flex-direction: column;
    padding-top: 2.45rem;
}

.access .access-title {
    font-size: 3.15rem;
    letter-spacing: 0.11em;
}

.access .access-info-list {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 4.65rem;
    row-gap: 1.35rem;
    padding-top: 4.55rem;
    padding-bottom: 3.15rem;
    align-items: baseline;
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}

.access .access-info-item {
    display: contents;
}

/* 6番目はリンク1つのみ → 2列目に表示して縦ラインを揃える */
.access .access-info-item:nth-child(6) .map-link {
    grid-column: 2;
    margin-top: -0.2rem;
    justify-self: end;
    margin-right: 1.5rem;
}

.access .access-info-item .map-link {
    text-decoration: underline;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
}

/* .link-wave は overflow:hidden のため、アンダーラインは ::after で描画。常時は表示し、ホバーで改めて引かれるアニメーション */
.access .access-info-item .map-link.link-wave {
    text-decoration: none;
    padding-bottom: 0.15em;
}

.access .access-info-item .map-link.link-wave::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

@media (hover: hover) {
    .access .access-info-item .map-link.link-wave:hover::after {
        animation: map-underline-redraw 0.7s ease forwards;
    }
}

/* ホバー解除時：逆方向（右→左に消え、右→左に引く）JSで .map-underline-leave を付与 */
.access .access-info-item .map-link.link-wave.map-underline-leave::after {
    animation: map-underline-redraw-leave 0.7s ease forwards;
}

@keyframes map-underline-redraw {
    0% {
        transform: scaleX(1);
        transform-origin: right center;
    }
    40% {
        transform: scaleX(0);
        transform-origin: right center;
    }
    45% {
        transform: scaleX(0);
        transform-origin: left center;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

@keyframes map-underline-redraw-leave {
    0% {
        transform: scaleX(1);
        transform-origin: left center;
    }
    40% {
        transform: scaleX(0);
        transform-origin: left center;
    }
    45% {
        transform: scaleX(0);
        transform-origin: right center;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right center;
    }
}

.access .button {
    padding: 1.8rem 4.86rem;
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    color: #fff;
    background-color: var(--primary-color);
}

/* Access「インターネット予約」：背景を::afterに移すため本体は透明に（.access .buttonより後に書いて上書き） */
.access .button.button-wave {
    background-color: transparent;
}

/* access 内の button-wave：下から出現するテキストを元のテキストと同一位置に */
.access .button-wave .nav-link-clone {
    top: 100%;
}
@media (hover: hover) {
    .access .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

@media (max-width: 768px) {
    .access {
        padding: 10rem 5rem 0;
    }

    .access .section-title {
        font-size: 3.2rem;
    }

    .access .access-inner {
        flex-direction: column;
        gap: 3.2rem;
        padding-top: 4rem;
    }

    .access .access-info {
        padding-top: 0;
    }

    .access .access-title {
        font-size: 2.2rem;
    }

    .access .access-info-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding-top: 3.2rem;
        padding-bottom: 3.8rem;
        font-size: 1.4rem;
    }

    .access .access-info-item {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .access .access-info-list dt::before {
        content: '';
        display: inline-block;
        width: 0.42em;
        height: 0.42em;
        background-color: currentColor;
        vertical-align: middle;
        margin-right: 0.55em;
        margin-bottom: 0.2em;
    }

    .access .access-info-item:nth-child(6) .map-link {
        margin-top: -0.5rem;
        margin-right: 0;
        margin-left: 0;
        justify-self: auto;
    }

    .access .access-info-item .map-link {
        font-size: 1.2rem;
    }

    .access .access-info-item .map-link.link-wave::after {
        bottom: 0.08em;
    }

    .access .button {
        padding: 1.4rem 3.78rem;
        font-size: 1.4rem;
    }

    /* インターネット予約ボタンを画面左右中央に */
    .access .access-info > .button {
        align-self: center;
    }
}

/* Footer */
.footer {
    margin-top: 25.2rem;
    position: relative;
}

/* 背景画像：画面いっぱい。実機スマホは JS で --viewport-height を更新してアドレスバー表示/非表示に対応 */
.footer .footer-bg {
    height: 100vh;
    height: 100dvh;
    height: var(--viewport-height, 100dvh);
    background-color: #0b3d25;
    background-image: url(img/footer.JPG);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer.footer-bg-fixed .footer-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--viewport-height, 100dvh);
    z-index: 0;
    background-color: #0b3d25;
    background-image: url(img/footer.JPG);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

/* 背景固定時のみビューポート高さのスペースを確保（この間スクロールするとコンテンツが背景の上に現れる） */
/* スペーサーにも同じ背景＋フォールバック色を指定し、切り替え時の白フラッシュを防ぐ */
.footer .footer-spacer {
    height: 0;
    background-color: #0b3d25;
    background-image: url(img/footer.JPG);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer.footer-bg-fixed .footer-spacer {
    height: 100vh;
    height: 100dvh;
    height: var(--viewport-height, 100dvh); /* 実機スマホ：JS でアドレスバー表示/非表示に追従 */
}

.footer .footer-content {
    position: relative;
    z-index: 1;
    padding-bottom: 4.2rem;
    transform: translateY(6rem);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    min-height: min-content;
}

.footer.footer-content-visible .footer-content {
    transform: translateY(0);
    opacity: 1;
}

.footer .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 7.8rem 0 9rem;
    min-height: min-content;
}

.footer .footer-inner .footer-nav {
    flex-shrink: 0;
}

.footer .logo img {
    width: 28.5rem;
    display: block;
}

.footer .footer-nav {
    display: flex;
    align-items: center;
    gap: 5.4rem;
    height: 4.5rem;
}

.footer .footer-nav-list {
    display: flex;
    align-items: center;
    gap: 3.75rem;
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: 0.11em;
    height: 4.5rem;
}

.footer .footer-nav-list li {
    height: 1.4em;
}

.footer .footer-nav-list li a {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    height: 100%;
    min-height: 1.4em;
    contain: layout;
}

/* フッター nav：ヘッダーと同じテキストホバー（上に消えて下から出現・1文字ずつスタッガー） */
.footer .footer-nav-list li a .nav-link-inner,
.footer .footer-nav-list li a .nav-link-clone {
    display: block;
    will-change: transform;
}

.footer .footer-nav-list li a .nav-char {
    display: inline-block;
    transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1);
    transition-delay: calc(var(--char-index) * 0.04s);
}

.footer .footer-nav-list li a .nav-link-inner .nav-char {
    transform: translateY(0);
}

@media (hover: hover) {
    .footer .footer-nav-list li a:hover .nav-link-inner .nav-char {
        transform: translateY(-180%);
    }
}

.footer .footer-nav-list li a .nav-link-clone {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    box-sizing: border-box;
}

.footer .footer-nav-list li a .nav-link-clone .nav-char {
    transform: translateY(0);
}

@media (hover: hover) {
    .footer .footer-nav-list li a:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

.footer .link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
}

@media (hover: hover) {
    .footer .link:hover {
        opacity: 0.5;
    }
}

.footer .link svg {
    width: 4.5rem;
    height: 4.5rem;
}

.footer .copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 4.8rem 4.8rem 0 9.75rem;
}

.footer .copyright-address {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}

.footer .copyright-text {
    font-size: 1.05rem;
    letter-spacing: 0.11em;
}

@media (max-width: 768px) {
    .footer {
        margin-top: 14.1rem;
        height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-image: url(img/footer_mobile.JPG);
        background-position: 55% center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* レスポンシブ時のみフッターコンテナ（背景）の高さを 60vh に */
    .footer .footer-bg {
        display: none;
    }

    /* スペーサーは高さだけ確保し、背景は見せない（固定の .footer-bg のみ表示） */
    .footer .footer-spacer {
        display: none;
    }

    .footer .footer-content {
        padding-bottom: 3rem;
        transform: translateY(0);
        opacity: 1;
    }

    .footer .footer-inner {
        padding: 0 1.7rem 0 2rem;
    }

    .footer .logo img {
        width: 16rem;
    }

    .footer .footer-nav {
        flex-direction: column-reverse;
        gap: 2.4rem;
        align-items: flex-end;
        height: auto;
        min-height: min-content;
        margin-bottom: 2.4rem;
    }

    .footer .footer-nav-list {
        flex-direction: column;
        gap: 1.2rem;
        font-size: 1.6rem;
        align-items: flex-end;
        height: auto;
    }

    .footer .link svg {
        width: 3.2rem;
        height: 3.2rem;
    }

    .footer .copyright {
        padding: 0.5rem 1.7rem 0 0;
        justify-content: flex-end;
    }

    .footer .copyright-address {
        display: none;
    }

    .footer .copyright-text {
        font-size: 0.6rem;
    }
}

/* 下層ページ：こだわり（Concept）・食材（Story）ヒーロー */
.page-concept-hero.hero,
.page-story-hero.hero,
.page-news-hero.hero {
    height: auto;
    min-height: 0;
    overflow: visible;
}

.page-concept-hero.hero::before,
.page-story-hero.hero::before,
.page-news-hero.hero::before {
    background: rgba(0, 0, 0, 0.6);
}

.page-concept-hero .page-concept-hero-picture,
.page-story-hero .page-story-hero-picture {
    display: block;
    position: relative;
    width: 100%;
}

.page-concept-hero .page-concept-hero-picture .element,
.page-story-hero .page-story-hero-picture .element {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: unset;
}

.page-news-hero .page-news-hero-picture {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 5383 / 2427;
    overflow: hidden;
}

.page-news-hero .page-news-hero-picture .element {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-concept-hero-text,
.page-story-hero-text,
.page-news-hero-text {
    --page-hero-text-offset: 4.4rem;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transform: translateY(var(--page-hero-text-offset));
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* fade-in-up も transform を使うため、レイアウト用オフセットとアニメを calc で合成 */
.js-reveal .page-concept-hero-text.fade-in-up,
.js-reveal .page-story-hero-text.fade-in-up,
.js-reveal .page-news-hero-text.fade-in-up {
    transform: translateY(calc(var(--page-hero-text-offset) + 4.8rem));
}

.js-reveal .page-concept-hero-text.fade-in-up.is-visible,
.js-reveal .page-story-hero-text.fade-in-up.is-visible,
.js-reveal .page-news-hero-text.fade-in-up.is-visible {
    transform: translateY(var(--page-hero-text-offset));
}

.page-concept-hero-title,
.page-story-hero-title,
.page-news-hero-title {
    font-size: 4.8rem;
    line-height: 1;
    letter-spacing: 0.25em;
}

.page-concept-hero-subtitle,
.page-story-hero-subtitle,
.page-news-hero-subtitle {
    font-size: 1.8rem;
    letter-spacing: 0.11em;
    writing-mode: horizontal-tb;
}

@media (max-width: 768px) {
    .js-reveal .page-concept-hero-text.fade-in-up,
    .js-reveal .page-story-hero-text.fade-in-up,
    .js-reveal .page-news-hero-text.fade-in-up {
        transform: translateY(calc(var(--page-hero-text-offset) + 2.8rem));
    }

    .js-reveal .page-concept-hero-text.fade-in-up.is-visible,
    .js-reveal .page-story-hero-text.fade-in-up.is-visible,
    .js-reveal .page-news-hero-text.fade-in-up.is-visible {
        transform: translateY(var(--page-hero-text-offset));
    }

    .page-concept-hero-title,
    .page-story-hero-title,
    .page-news-hero-title {
        font-size: 2.7rem;
    }

    .page-concept-hero-subtitle,
    .page-story-hero-subtitle,
    .page-news-hero-subtitle {
        font-size: 1rem;
    }

    .page-news-hero .page-news-hero-picture {
        aspect-ratio: 3915 / 3135;
    }
}

/* 下層 Concept：導入 */
.page-concept-intro-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7.3rem;
    padding: 14rem 7.5rem 0 13.2rem;
}

.page-concept-intro-inner:nth-child(2) {
    gap: 9.7rem;
    padding: 14rem 13.2rem 0 0;
}

.page-concept-intro-text {
    max-width: 60rem;
    padding-top: 8.8rem;
}

.page-concept-intro-inner:nth-child(2) .page-concept-intro-text {
    max-width: 53rem;
    padding-top: 9rem;
}

.page-concept-intro-title {
    margin-bottom: 6.4rem;
    font-size: 3.6rem;
    letter-spacing: 0.15em;
}

.page-concept-intro-body p {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    line-height: 2;
}

.page-concept-intro-body p + p {
    margin-top: 2em;
}

.page-concept-intro-media {
    flex: 1;
}

.page-concept-intro-picture {
    display: block;
    width: 100%;
}

@media (max-width: 768px) {
    .page-concept-intro-inner {
        flex-direction: column-reverse;
        gap: 4rem;
        padding: 8rem 2rem 0;
    }

    .page-concept-intro-inner:nth-child(2) {
        flex-direction: column;
        gap: 4rem;
        padding: 8rem 2rem 0;
    }

    .page-concept-intro-text {
        max-width: none;
        padding: 0 2rem;
    }

    .page-concept-intro-inner:nth-child(2) .page-concept-intro-text {
        max-width: none;
        padding: 0 2rem;
    }

    .page-concept-intro-title {
        margin-bottom: 3.6rem;
        font-size: 2rem;
    }
    
    .page-concept-intro-body p {
        font-size: 1.4rem;
    }
    
    .page-concept-intro-media {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .page-concept-intro-inner:nth-child(2) .page-concept-intro-media {
        transform: translateX(-2rem);
    }
}

/* 下層 Concept：オーナー */
.page-concept-owner-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7.3rem;
    padding: 18rem 0 15.4rem 14.7rem;
}

.page-concept-owner-text {
    max-width: 53rem;
    padding-top: 9.3rem;
}

.page-concept-owner-heading-sub-text {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}

.page-concept-owner-heading {
    font-size: 3.6rem;
    letter-spacing: 0.15em;
    margin-top: 2.8rem;
    margin-bottom: 8.4rem;
    display: flex;
    align-items: center;
    gap: 3.3rem;
}

.page-concept-owner-body p {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    line-height: 2;
}

.page-concept-owner-body p + p {
    margin-top: 2em;
}

.page-concept-owner-qualifications {
    padding-top: 14.2rem;
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}

.page-concept-owner-qualifications-list {
    padding-top: 3.7rem;
    padding-left: 2.8rem;
    list-style: disc;
    list-style-position: inside;
}

.page-concept-owner-media {
    flex: 1;
}

.page-concept-owner-picture {
    display: block;
    width: 100%;
}

.page-concept-owner-gallery {
    position: relative;
}

.page-concept-owner-gallery-picture {
    position: absolute;
}

.page-concept-owner-gallery-picture:nth-child(1) {
    top: 12.4rem;
    left: 36.1rem;
    width: 32.6rem;
}

.page-concept-owner-gallery-picture:nth-child(2) {
    top: 20.7rem;
    left: 7.9rem;
    width: 19.6rem;
}

.page-concept-owner-gallery-picture:nth-child(3) {
    top: 41.9rem;
    left: 35.2rem;
    width: 25.5rem;
}

.page-concept-owner-gallery-picture:nth-child(4) {
    top: 66.7rem;
    left: 8.8rem;
    width: 37.3rem;
}

@media (max-width: 768px) {
    .page-concept-owner-inner {
        flex-direction: column-reverse;
        gap: 4rem;
        padding: 11rem 2rem 51rem;
    }

    .page-concept-owner-text {
        max-width: none;
        padding: 0 2rem;
    }

    .page-concept-owner-heading-sub-text {
        font-size: 1rem;
    }

    .page-concept-owner-heading {
        font-size: 2rem;
        margin-top: 1.2rem;
        margin-bottom: 3.6rem;
        gap: 1.4rem;
    }

    .page-concept-owner-body p {
        font-size: 1.4rem;
    }

    .page-concept-owner-qualifications {
        padding-top: 5.3rem;
        font-size: 1.4rem;
    }

    .page-concept-owner-qualifications-list {
        padding-top: 1.6rem;
        padding-left: 1.2rem;
    }

    .page-concept-owner-media {
        flex: none;
        width: 100%;
        max-width: none;
        transform: translateX(2rem);
    }

    .page-concept-owner-gallery-picture:nth-child(1) {
        top: 113.9rem;
        left: auto;
        right: 1.6rem;
        width: 20.1rem;
    }
    
    .page-concept-owner-gallery-picture:nth-child(2) {
        top: 124.4rem;
        left: auto;
        right: 24.8rem;
        width: 10.4rem;
    }

    .page-concept-owner-gallery-picture:nth-child(3) {
        top: 132rem;
        left: auto;
        right: 6.1rem;
        width: 14.1rem;
    }

    .page-concept-owner-gallery-picture:nth-child(4) {
        top: 146.3rem;
        left: auto;
        right: 14.4rem;
        width: 18rem;
    }
}

/* 下層 Concept：お知らせ*/
.page-concept .news {
    padding-top: 18rem;
}

@media (max-width: 768px) {
    .page-concept .news {
        padding-top: 11rem;
    }
}

/* 下層 Story：導入 */
.page-story-intro-inner {
    padding-top: 14rem;
}

.page-story-intro-text {
    text-align: center;
}

.page-story-intro-title {
    margin-bottom: 8rem;
    font-size: 4rem;
    letter-spacing: 0.15em;
}

.page-story-intro-body p {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}

.page-story-intro-body p + p {
    margin-top: 2em;
}

@media (max-width: 768px) {
    .page-story-intro-inner {
        padding: 8rem 2rem 0;
    }

    .page-story-intro-title {
        margin-bottom: 4.8rem;
        font-size: 2.2rem;
    }
    
    .page-story-intro-body p {
        font-size: 1.4rem;
    }
}

/* 下層 Story：食材 */
.page-story-ingredients {
    padding-top: 14rem;
}

.page-story-items {
    display: flex;
    flex-wrap: wrap;
    column-gap: 9.5rem;
    row-gap: 8.5rem;
    padding: 0 16.9rem;
}

.page-story-items .item {
    width: 31.4rem;
    flex-shrink: 0;
    position: relative;
}

.page-story-items .item-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.page-story-items .item-title {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    padding-top: 3.6rem;
}

.page-story-items .item-catchphrase {
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    padding-top: 1.2rem;
}

.page-story-items .item-more-link {
    margin-top: 1.6rem;
    padding-bottom: 0.15em;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    position: relative;
    z-index: 2;
}

.page-story-items .item-more-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

@media (hover: hover) {
    .page-story-items .item:hover .item-more-link::after {
        animation: map-underline-redraw 0.7s ease forwards;
    }

    .page-story-items .item:hover .item-more-link .nav-link-inner .nav-char {
        transform: translateY(-180%);
    }

    .page-story-items .item:hover .item-more-link .nav-link-clone .nav-char {
        transform: translateY(-120%);
    }
}

.page-story-items .item-more-link.underline-leave::after {
    animation: map-underline-redraw-leave 0.7s ease forwards;
}

.page-story-pagination,
.page-news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    padding-top: 10rem;
    font-size: 1.8rem;
    letter-spacing: 0.11em;
}

.page-story-pagination .page-numbers,
.page-news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    transition: background-color 0.25s ease, color 0.25s ease;
}

@media (hover: hover) {
    .page-story-pagination .page-numbers:hover,
    .page-news-pagination .page-numbers:hover {
        background-color: var(--primary-color);
        color: #fff;
    }
}

.page-story-pagination .page-numbers.current,
.page-news-pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: #fff;
}

.page-story-pagination .page-numbers.prev,
.page-story-pagination .page-numbers.next,
.page-news-pagination .page-numbers.prev,
.page-news-pagination .page-numbers.next {
    border: none;
    font-size: 2rem;
}

@media (max-width: 768px) {
    .page-story-ingredients {
        padding-top: 8rem;
    }

    .page-story-items {
        column-gap: 2rem;
        row-gap: 3.5rem;
        padding: 0 2rem;
    }

    .page-story-items .item {
        width: 16.5rem;
    }

    .page-story-items .item-title {
        font-size: 1.4rem;
        padding-top: 1.3rem;
    }

    .page-story-items .item-catchphrase {
        font-size: 1.2rem;
        padding-top: 0.6rem;
    }

    .page-story-items .item-more-link {
        font-size: 1.2rem;
        margin-top: 1rem;
    }

    .page-story-pagination,
    .page-news-pagination {
        gap: 0.5rem;
        padding-top: 5rem;
        font-size: 1.5rem;
    }

    .page-story-pagination .page-numbers,
    .page-news-pagination .page-numbers {
        width: 3.6rem;
        height: 3.6rem;
    }
}

/* 食材一覧 CTA */
.page-story-cta {
    margin-top: 18rem;
    background-color: var(--primary-color);
    color: #fff;
}

.page-story-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14rem 0;
    gap: 0;
    text-align: center;
}

.page-story-cta-en {
    font-size: 1.3rem;
    letter-spacing: 0.4em;
    margin-bottom: 2.8rem;
}

.page-story-cta-divider {
    width: 3.2rem;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    margin-bottom: 4.8rem;
}

.page-story-cta-title {
    font-size: 3.8rem;
    letter-spacing: 0.2em;
    margin-bottom: 3.6rem;
}

.page-story-cta-body {
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    line-height: 2;
    margin-bottom: 6.4rem;
}

.page-story-cta .button-wave::after {
    border-color: #fff;
}

.page-story-cta .button-wave .nav-link-clone {
    top: 100%;
}

.page-story-cta .page-story-cta-btn {
    letter-spacing: 0.15em;
}

@media (hover: hover) {
    .page-story-cta .button-wave:hover::after {
        transform: scale(0.95);
    }

    .page-story-cta .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

/* CTAがフッター直前に来るためフッターのmargin-topを打ち消す */
.page-story .footer,
.page-ingredient .footer {
    margin-top: 0;
}

@media (max-width: 768px) {
    .page-story-cta {
        margin-top: 11rem;
    }

    .page-story-cta-inner {
        padding: 8rem 2rem;
    }

    .page-story-cta-title {
        font-size: 2.4rem;
        margin-bottom: 2.4rem;
    }

    .page-story-cta-body {
        font-size: 1.3rem;
        margin-bottom: 4.8rem;
    }
}

/* ================================================================
   お知らせ一覧ページ (page-news)
================================================================ */
.page-news-list {
    padding: 14rem 16.9rem 0;
}

.page-news-filter {
    position: relative;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 8rem;
}

.page-news-filter-info {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.page-news-filter-category {
    font-size: 2.4rem;
    letter-spacing: 0.2em;
    color: var(--primary-color);
    line-height: 1;
}

.page-news-filter-count {
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    color: var(--primary-color);
    opacity: 0.6;
}

.page-news-filter-count span {
    font-size: 1.2rem;
}

.page-news-filter-dropdown {
    position: relative;
    display: inline-block;
}

.page-news-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    min-width: 18rem;
    padding: 1rem 1.6rem 1rem 1.8rem;
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.page-news-filter-trigger-icon {
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-0.15rem);
    transition: transform 0.25s ease;
}

.page-news-filter-dropdown.is-open .page-news-filter-trigger-icon {
    transform: rotate(-135deg) translateY(-0.15rem);
}

.page-news-filter-list {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    background-color: #fff;
    border: 1px solid var(--primary-color);
    border-top: none;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.page-news-filter-dropdown.is-open .page-news-filter-list {
    opacity: 1;
    visibility: visible;
}

.page-news-filter-item {
    display: block;
    padding: 0.9rem 1.8rem;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    color: var(--primary-color);
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}



@media (hover: hover) {
    .page-news-filter-trigger:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .page-news-filter-item:hover {
        background-color: var(--primary-color);
        color: #fff;
    }
}

.news .news-item .news-item-body,
.page-news-list-inner .news-item-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.news-item-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.news-item-category {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    padding: 0.3rem 1.2rem;
    min-width: 8rem;
    text-align: center;
    box-sizing: border-box;
}

.page-news-list-inner .news-item-excerpt {
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    transition: transform 0.35s ease;
}

@media (hover: hover) {
    .page-news-list-inner .news-item:hover .news-item-excerpt {
        transform: translateX(2.4rem);
    }
}

.page-news-empty {
    padding: 6rem 4.5rem;
    font-size: 1.8rem;
    letter-spacing: 0.11em;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .page-news-list {
        padding: 8rem 2rem 0;
    }

    .page-news-filter {
        align-items: center;
        margin-bottom: 4rem;
    }

    .page-news-filter-category {
        font-size: 1.8rem;
    }

    .page-news-filter-count {
        font-size: 1.2rem;
    }

    .page-news-filter-trigger {
        font-size: 1.2rem;
        padding: 0.8rem 1.2rem 0.8rem 1.4rem;
        min-width: 14rem;
    }

    .page-news-filter-item {
        padding: 0.7rem 1.4rem;
        font-size: 1.2rem;
    }

    .news .news-item .news-item-body,
    .page-news-list-inner .news-item-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }

    .page-news-list-inner .news-item-excerpt {
        font-size: 1.2rem;
    }

    .news-item-category {
        font-size: 1rem;
        padding: 0.25rem 1rem;
        min-width: 6.6rem;
    }
}

/* ================================================================
   食材詳細ページ (single-ingredient)
================================================================ */

/* ヒーロー：concept/story と同じオーバーライドパターン */
.page-ingredient-hero.hero {
    height: auto;
    min-height: 0;
    overflow: visible;
}

.page-ingredient-hero.hero::before {
    background: rgba(0, 0, 0, 0.6);
}

.page-ingredient-hero .page-ingredient-hero-picture {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 5383 / 2427;
    overflow: hidden;
}

.page-ingredient-hero .page-ingredient-hero-picture .element {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-ingredient-hero-text {
    --page-hero-text-offset: 4.4rem;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transform: translateY(var(--page-hero-text-offset));
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.js-reveal .page-ingredient-hero-text.fade-in-up {
    transform: translateY(calc(var(--page-hero-text-offset) + 4.8rem));
}

.js-reveal .page-ingredient-hero-text.fade-in-up.is-visible {
    transform: translateY(var(--page-hero-text-offset));
}

.page-ingredient-hero-title {
    font-size: 4.8rem;
    letter-spacing: 0.25em;
    padding: 0 5.4rem;
    text-align: center;
}

/* キャッチフレーズ＋説明文 */
.page-ingredient-intro-inner {
    padding: 14rem 16.9rem 0;
    text-align: center;
}

.page-ingredient-catchphrase {
    font-size: 4rem;
    letter-spacing: 0.15em;
    margin-bottom: 8rem;
}

.page-ingredient-description p {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
}

/* 本文（テキスト＋画像セクション） */
.page-ingredient-body {
    padding: 14rem 16.9rem 0;
}

.page-ingredient-body-row {
    display: flex;
    align-items: center;
    gap: 9rem;
    margin-bottom: 10rem;
}

.page-ingredient-body-row:last-child {
    margin-bottom: 0;
}

.page-ingredient-body-text {
    flex: 1;
    order: 1;
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    text-align: left;
}

.page-ingredient-body-image {
    width: 40%;
    order: 2;
}

.page-ingredient-body-image img {
    width: 100%;
    height: auto;
}

/* 偶数セクション：画像左・テキスト右 */
.page-ingredient-body-row.is-reverse .page-ingredient-body-text {
    order: 2;
}

.page-ingredient-body-row.is-reverse .page-ingredient-body-image {
    order: 1;
}

/* 生産者情報 */
.page-ingredient-producer {
    padding: 18rem 16.9rem 0;
}

.page-ingredient-producer-inner {
    text-align: center;
}

.page-ingredient-producer-heading {
    font-size: 3.6rem;
    letter-spacing: 0.15em;
    margin-bottom: 10rem;
}

.page-ingredient-producer-info {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 25rem;
    row-gap: 5rem;
    justify-content: center;
}

.page-ingredient-producer-item {
    display: contents;
}

.page-ingredient-producer-item dt {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    text-align: left;
}

.page-ingredient-producer-item dd {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    text-align: left;
}

.page-ingredient-producer-item dd a {
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    .page-ingredient-producer-item dd a:hover {
        opacity: 0.5;
    }
}

.page-ingredient-back {
    display: flex;
    justify-content: center;
    padding: 14rem 0 0;
}

.page-ingredient-back .button-wave {
    letter-spacing: 0.15em;
}

.page-ingredient-back .button-wave .nav-link-clone {
    top: 100%;
}

@media (hover: hover) {
    .page-ingredient-back .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

@media (max-width: 768px) {
    .js-reveal .page-ingredient-hero-text.fade-in-up {
        transform: translateY(calc(var(--page-hero-text-offset) + 2.8rem));
    }

    .js-reveal .page-ingredient-hero-text.fade-in-up.is-visible {
        transform: translateY(var(--page-hero-text-offset));
    }

    .page-ingredient-hero .page-ingredient-hero-picture {
        aspect-ratio: 3915 / 3135;
    }

    .page-ingredient-hero-title {
        font-size: 2.7rem;
        padding: 0 2rem;
    }

    .page-ingredient-intro-inner {
        padding: 8rem 2rem 0;
    }

    .page-ingredient-catchphrase {
        font-size: 2.2rem;
        margin-bottom: 4.8rem;
    }

    .page-ingredient-description p {
        font-size: 1.4rem;
    }

    .page-ingredient-body {
        padding: 8rem 2rem 0;
    }

    .page-ingredient-body-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
        margin-bottom: 6rem;
    }

    .page-ingredient-body-text {
        order: 2;
        font-size: 1.4rem;
    }

    .page-ingredient-body-image {
        order: 1;
        width: 100%;
    }

    .page-ingredient-body-row.is-reverse .page-ingredient-body-text {
        order: 2;
    }

    .page-ingredient-body-row.is-reverse .page-ingredient-body-image {
        order: 1;
    }

    .page-ingredient-producer {
        padding: 11rem 2rem 0;
    }

    .page-ingredient-producer-heading {
        font-size: 2rem;
        margin-bottom: 6rem;
    }

    .page-ingredient-producer-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }

    .page-ingredient-producer-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }

    .page-ingredient-producer-item dt {
        font-size: 1.4rem;
        text-align: center;
    }

    .page-ingredient-producer-item dt::before {
        content: '';
        display: inline-block;
        width: 0.42em;
        height: 0.42em;
        background-color: currentColor;
        vertical-align: middle;
        margin-right: 0.55em;
        margin-bottom: 0.2em;
    }

    .page-ingredient-producer-item dd {
        font-size: 1.4rem;
        text-align: center;
    }

    .page-ingredient-back {
        padding: 8rem 0 0;
    }

}

/* ================================================================
   お知らせ詳細ページ (single post)
================================================================ */
.page-news-single-hero.hero {
    height: auto;
    min-height: 0;
    overflow: visible;
}

.page-news-single-hero.hero::before {
    background: rgba(0, 0, 0, 0.6);
}

.page-news-single-hero .page-news-single-hero-picture {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 5383 / 2427;
    overflow: hidden;
}

.page-news-single-hero .page-news-single-hero-picture .element {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.page-news-single-hero-text {
    --page-hero-text-offset: 4.4rem;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transform: translateY(var(--page-hero-text-offset));
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.js-reveal .page-news-single-hero-text.fade-in-up {
    transform: translateY(calc(var(--page-hero-text-offset) + 4.8rem));
}

.js-reveal .page-news-single-hero-text.fade-in-up.is-visible {
    transform: translateY(var(--page-hero-text-offset));
}

.page-news-single-hero-title {
    font-size: 4.8rem;
    letter-spacing: 0.25em;
    padding: 0 5.4rem;
    text-align: center;
}

.page-news-single-body {
    padding: 14rem 16.9rem 0;
    max-width: 96rem;
    margin: 0 auto;
    box-sizing: content-box;
}

.page-news-single-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.4rem;
    margin-bottom: 6rem;
    border-bottom: 1px solid var(--primary-color);
    font-size: 1.8rem;
    letter-spacing: 0.11em;
    color: var(--primary-color);
}

.page-news-single-content {
    font-size: 1.8rem;
    letter-spacing: 0.15em;
    line-height: 2;
}

.page-news-single-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.page-news-single-content a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    .page-news-single-content a:hover {
        opacity: 0.5;
    }
}

.page-news-single-back {
    display: flex;
    justify-content: center;
    padding: 14rem 0 0;
}

.page-news-single-back .button-wave {
    letter-spacing: 0.15em;
}

.page-news-single-back .button-wave .nav-link-clone {
    top: 100%;
}

@media (hover: hover) {
    .page-news-single-back .button-wave:hover .nav-link-clone .nav-char {
        transform: translateY(-100%);
    }
}

@media (max-width: 768px) {
    .js-reveal .page-news-single-hero-text.fade-in-up {
        transform: translateY(calc(var(--page-hero-text-offset) + 2.8rem));
    }

    .js-reveal .page-news-single-hero-text.fade-in-up.is-visible {
        transform: translateY(var(--page-hero-text-offset));
    }

    .page-news-single-hero .page-news-single-hero-picture {
        aspect-ratio: 3915 / 3135;
    }

    .page-news-single-hero-title {
        font-size: 2.7rem;
        padding: 0 2rem;
    }

    .page-news-single-body {
        padding: 8rem 2rem 0;
    }

    .page-news-single-meta {
        font-size: 1.4rem;
        padding-bottom: 1.6rem;
        margin-bottom: 4rem;
    }

    .page-news-single-content {
        font-size: 1.4rem;
    }

    .page-news-single-back {
        padding: 8rem 0 0;
    }
}