@charset "UTF-8";

/* =========================================
   0. Font Definition (Added)
   ========================================= */
@font-face {
    font-family: 'Corporate Logo Rounded';
    /* CSSファイル(assets/css/)から見て ../fonts/ にあると仮定 */
    src: url('../fonts/Corporate-Logo-Rounded-Bold-ver3.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   1. Base & Variables (Ref: common.css)
   ========================================= */
:root {
    /* Brand Colors */
    --color-orange: #C6502D;
    --color-blue: #2C466F;
    --color-green: #3E5C45;
    --color-brown: #4B3E35;
    --color-beige: #F2EEE5;
    --color-bright-red: #E65540; /* Added Bright Red */
    
    --bg-color: #F2EEE5; /* Default Background */
    --text-color: #111111;
    --text-white: #ffffff;
    
    --font-main: 'Noto Sans JP', sans-serif;
    --font-eng: 'Oswald', sans-serif;
    /* Added Custom Title Font */
    --font-title: 'Corporate Logo Rounded', 'Noto Sans JP', sans-serif;

    --container-width: 1100px;
    --header-height: 80px;
}

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.8;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}
a:hover { opacity: 0.7; }

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

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; list-style: none; }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 80px 0; }

/* Utilities */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   2. Header
   ========================================= */
header {
    position: absolute; /* stickyから変更して重ねる */
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* 背景を透明に */
    z-index: 100;
    height: var(--header-height);
    display: flex;
    align-items: center;
    border-bottom: none; /* ボーダー削除 */
}

.header-inner {
    display: flex;
    justify-content: center; /* 中央寄せに変更 */
    align-items: center;
    width: 100%;
}

/* Header Logo Hidden as requested */
.logo {
    display: none;
}

.nav-list {
    display: flex;
    gap: 30px;
    margin: 0; /* 右寄せ(margin-left: auto)を削除して中央配置へ */
}
.nav-list li a {
    font-family: var(--font-eng);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff; /* 背景が重なるため白に変更 */
}

/* Hamburger (Mobile) */
.hamburger {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 200;
    margin-left: auto; /* スマホ時は右端に配置するため維持 */
}
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff; /* 背景が重なるため白に変更 */
    transition: 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }

.hamburger.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* =========================================
   3. Hero Section
   ========================================= */
.hero {
    display: flex;
    /* Fix 100vh issue on mobile
       JSで計算した --vh を使用して高さを固定する
       フォールバックとして 100vh も残しておく
       【修正】min-height から height に変更して、スクロール時の拡大（ジャンピング）を防止
    */
    height: 100vh; 
    height: calc(var(--vh, 1vh) * 100);
    
    background-color: var(--color-orange);
    padding-top: var(--header-height); /* コンテンツ位置調整 */
}

.hero__text-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #fff;
    position: relative;
    z-index: 10; /* 画像の上に表示 */
}

.hero__content {
    max-width: 500px; /* スタックロゴが大きいため少し幅を広げる */
}

.hero__sub {
    font-family: var(--font-eng);
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    opacity: 0.9;
}

/* .hero__title is removed and replaced by .stacked */

/* Text Info Decoration and Styling */
.hero__info {
    position: relative;
    padding-left: 24px; /* Space for the border */
    border-left: 6px double #fff; /* Double border for a classic look */
}

.hero__info p {
    font-family: var(--font-main); /* Changed to Japanese Font */
    font-size: 1.15rem; /* Increased size */
    margin-bottom: 0; /* Remove bottom margin for alignment */
    letter-spacing: 0.1em;
    line-height: 2.2; /* Increased line-height */
    font-weight: 700; /* Made bolder */
}

/* Stacked Typography Styles
   Ref: Provided Design
*/
.stacked {
    --font-size: clamp(3rem, 8vw, 8rem);
    --row-height: 0.9em;

    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃え */
    font-family: "Google Sans Flex", sans-serif;
    font-size: var(--font-size);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 40px;
}

.stackedItem {
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    line-height: 0.8;
}

.stackedItem em {
    white-space: nowrap;
    display: block;
    font-style: normal;
}

/* 高さ & 透明度 */
.stackedItem:nth-child(1) { height: var(--row-height); opacity: 1; }
.stackedItem:nth-child(2) { height: calc(var(--row-height) * 0.667); opacity: 0.8; }
.stackedItem:nth-child(3) { height: calc(var(--row-height) * 0.444); opacity: 0.6; }
.stackedItem:nth-child(4) { height: calc(var(--row-height) * 0.296); opacity: 0.4; }
.stackedItem:nth-child(5) { height: calc(var(--row-height) * 0.198); opacity: 0.2; }


.hero__image-area {
    flex: 1.2;
    background-color: #eee;
    position: relative; /* スライダー用に相対配置 */
    overflow: hidden; /* はみ出し防止 */
    border-radius: 40px 0 0 40px; /* PC向け角丸修正（左側のみ） */
}

.hero__image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 10px solid var(--color-beige); /* Cream border added */
    border-radius: 40px 0 0 40px; /* PC向け角丸修正（左側のみ） */
}

/* スライダー設定 */
.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 1.5s ease-in-out; /* クロスフェード時間 */
}

.slide.active {
    opacity: 1; /* activeクラスがつくと表示 */
}

/* =========================================
   4. Intro & Concept
   ========================================= */
.intro {
    background-color: var(--bg-color);
    text-align: center;
    /* overflow-x: hidden; added to prevent scrollbar during marquee */
    overflow-x: hidden;
}

/* コンテナ幅をリセットするユーティリティ（スライダー用） */
.container-fluid {
    width: 100%;
    padding: 0;
}

.intro__title {
    font-family: var(--font-title); /* Modified: Use custom font */
    font-size: clamp(3rem, 7vw, 6.5rem); /* 1.5remから大幅に拡大 */
    font-weight: 700;
    color: transparent; /* 文字色を透明に変更 */
    -webkit-text-stroke: 2px var(--color-blue); /* 枠線を2pxに太く変更 */
    line-height: 1.1;
    margin-bottom: 40px;
    padding: 0 20px;
}

/* タイピングアニメーション用スタイル (Added) */
.intro__title.typing-target span {
    opacity: 0; /* 初期状態は非表示 */
    display: inline-block; /* インラインブロックで並べる */
    /* opacityのトランジションは設定せず、animationで制御 */
}

.intro__title.typing-target.is-visible span {
    animation: typingOn 0.1s forwards; /* 素早く表示 */
}

@keyframes typingOn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* New Marquee Styles (Replaces Grid) */
.marquee-wrapper {
    width: 100%;
    padding: 20px 0;
}

.marquee-row {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden; /* コンテナからはみ出した分を隠す */
}

/* * 【重要】画像の形が崩れないようにスタイルを強化
 * max-content: 中身がどれだけ増えても折り返さず、1行に並べる
 */
.marquee-track {
    display: flex;
    gap: 20px; /* 画像間のスペース */
    width: max-content; 
    will-change: transform; /* アニメーションの最適化 */
    /* animation-duration はJSで計算してインラインで適用されます */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* スクロールアニメーションの定義 */
.marquee-row[data-direction="left"] .marquee-track {
    animation-name: marquee-left;
}

.marquee-row[data-direction="right"] .marquee-track {
    animation-name: marquee-right;
}

@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 全体の半分（1セット分）移動 */
}

@keyframes marquee-right {
    0% { transform: translateX(-50%); } /* 初期位置を半分ずらした状態から開始 */
    100% { transform: translateX(0); } /* 0に戻ることで右へ流れるように見せる */
}

/* * 【重要】スライダー内の画像設定
 * 幅と高さを両方指定し、flex-shrink: 0 で縮小を阻止
 */
.marquee-track img {
    width: 250px;       /* 幅を固定 */
    height: 250px;      /* 高さを固定 */
    aspect-ratio: 1 / 1; /* 正方形を強制 */
    object-fit: cover;  /* トリミングして埋める */
    border-radius: 16px;
    flex-shrink: 0;     /* 親の幅が足りなくても絶対に縮まない */
}

/* .intro__grid styles are kept but not used anymore for safety */
.intro__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.intro__img { aspect-ratio: 1; overflow: hidden; }
.intro__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.intro__img:hover img { transform: scale(1.05); }

/* Blue Message Area -> Concept Image Area */
.concept-msg {
    background-color: var(--color-blue); /* 画像読み込み前のフォールバック */
    /* 推奨サイズ: 1920x1280px */
    background-image: url('../img/concept-msg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    color: #fff;
    text-align: center;
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* オーバーレイの基準点 */
}

/* 文字の可読性を高めるオーバーレイ（青色の半透明レイヤー） */
.concept-msg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 70, 111, 0.85); /* ブランドカラーの透過 */
    z-index: 1;
}

/* コンテンツをオーバーレイの上に表示 */
.concept-msg .container {
    position: relative;
    z-index: 2;
}

.concept-msg p {
    font-size: 1rem;
    line-height: 2;
}

/* =========================================
   5. Menu Sections (Shared)
   ========================================= */
.menu-sec {
    padding: 100px 0;
    color: #fff;
    position: relative;
    border-radius: 20px; /* Slight rounded corners as per modern design trends or image look */
    margin: 20px; /* Spacing from screen edge */
}

/* Section Colors */
.menu-sec--orange { background-color: var(--color-orange); }
.menu-sec--blue   { background-color: var(--color-blue); }
.menu-sec--red    { background-color: var(--color-bright-red); }
.menu-sec--green  { background-color: var(--color-green); }
.menu-sec--brown  { background-color: var(--color-brown); }

.section-header { text-align: center; margin-bottom: 50px; }
.menu-sec__title {
    font-family: var(--font-title); /* Modified: Use custom font */
    font-size: clamp(4rem, 8vw, 6rem); /* 3remから大幅に拡大 */
    text-transform: capitalize; /* "Main Food" */
}

/* Grid Layout */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* Swiper Settings for Food Sliders (Main & Side) */
/* .main-food-slider selector is kept for backward compat if needed, but .food-slider is primary */
.food-slider,
.main-food-slider {
    width: 100%;
    margin-bottom: 50px;
    padding-bottom: 40px; /* Pagination space */
}

/* Custom Swiper Navigation */
.food-slider .swiper-button-next,
.food-slider .swiper-button-prev,
.main-food-slider .swiper-button-next,
.main-food-slider .swiper-button-prev {
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}
.food-slider .swiper-button-next::after,
.food-slider .swiper-button-prev::after,
.main-food-slider .swiper-button-next::after,
.main-food-slider .swiper-button-prev::after {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Custom Pagination */
.food-slider .swiper-pagination-bullet,
.main-food-slider .swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.5;
}
.food-slider .swiper-pagination-bullet-active,
.main-food-slider .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Card Design */
.menu-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    color: var(--text-color);
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* Swiper slide内で高さを揃える */
    height: 100%;
}

.menu-card__img {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4/3;
    margin-bottom: 15px;
}
.menu-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.menu-card__name {
    font-family: var(--font-eng);
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--color-orange); /* Accent color for titles */
}
.menu-sec--blue .menu-card__name { color: var(--color-blue); }
.menu-sec--red .menu-card__name { color: var(--color-bright-red); }
.menu-sec--green .menu-card__name { color: var(--color-green); }

.menu-card__desc {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 10px;
    flex-grow: 1;
}

.menu-card__price {
    font-family: var(--font-eng);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Drink List Design */
.drink-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    color: var(--text-color);
}
.drink-cat {
    font-family: var(--font-eng);
    color: var(--color-brown);
    border-bottom: 2px solid var(--color-brown);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.2rem;
}
.drink-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #ddd;
    padding: 8px 0;
    font-size: 0.9rem;
}
.drink-note {
    text-align: center;
    margin-bottom: 20px;
    font-family: var(--font-eng);
}

/* Buttons */
.menu-sec__action { text-align: center; }
.btn {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid currentColor;
    border-radius: 50px;
    text-transform: uppercase;
    font-family: var(--font-eng);
    letter-spacing: 0.1em;
    font-size: 0.9rem;
}
.btn--outline-white { color: #fff; border-color: #fff; }
.btn--outline-white:hover { background: #fff; color: var(--text-color); }
.btn--outline-dark { color: var(--text-color); border-color: var(--text-color); }
.btn--outline-dark:hover { background: var(--text-color); color: #fff; }

/* =========================================
   6. Footer
   ========================================= */
footer {
    background-color: var(--bg-color);
    position: relative;
    padding-bottom: 40px;
    text-align: center;
}

.footer-wave {
    line-height: 0;
    transform: translateY(-50%);
    color: var(--bg-color); /* Match background */
}
.footer-wave svg {
    width: 100%;
    height: 50px;
}

.footer-content {
    margin-top: -20px;
}

.footer-logo {
    /* Font styles are no longer needed for image, but kept for fallback or container layout */
    margin-bottom: 20px;
    display: flex; /* 追加: 画像を中央揃えしやすくする */
    justify-content: center;
}

/* Added: Control footer logo image size */
.footer-logo img {
    width: 100%;
    max-width: 180px; /* 推奨サイズに合わせて制限 */
    height: auto;
    display: block;
}

.footer-info {
    margin-bottom: 40px;
}
.footer-info p { margin-bottom: 15px; font-size: 0.9rem; }

.footer-maps {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}
.map-box {
    border: 1px solid var(--color-blue);
    padding: 15px 30px;
    border-radius: 8px;
    min-width: 160px;
    color: var(--color-blue);
}
.map-box p {
    font-family: var(--font-eng);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    background: var(--color-blue);
    color: #fff;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
}
.map-box a, .map-box span {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}

.copyright {
    font-size: 0.7rem;
    color: #999;
}

/* =========================================
   7. Responsive (Tablet & Mobile)
   ========================================= */
@media (max-width: 1024px) {
    :root { --container-width: 100%; }
    /* タブレット向けフォントサイズ調整 */
    .hero__title { font-size: 3rem; }
    .stacked { --font-size: clamp(3rem, 6vw, 6rem); } 
    .menu-grid { gap: 20px; }
}

/* Tablet Specific (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        min-height: 60vh; /* 高さを少し抑える */
        align-items: stretch;
    }
    .hero__text-area {
        flex: 1; /* 比率を1:1に */
        padding: 30px;
    }
    .hero__image-area {
        flex: 1; /* 比率を1:1に */
        /* 参考画像の雰囲気に合わせて左上に角丸を追加 */
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px; 
    }
    .hero__image-area img {
        border-top-left-radius: 40px;
        border-bottom-left-radius: 40px;
    }
    .hero-slider {
        position: absolute; /* 親に合わせる */
        height: 100%;
    }
    
    /* タブレット専用：フォントサイズを大きく調整 */
    .stacked {
        --font-size: clamp(4.5rem, 10vw, 8rem);
    }
}

/* Mobile (Under 768px) */
@media (max-width: 767px) { /* 768pxを含まないように変更 */
    /* Header */
    .hamburger { display: block; }

    /* ロゴ設定を削除（非表示に戻す） */

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        /* Mobile 100vh fix */
        height: calc(var(--vh, 1vh) * 100);
        background: rgba(255, 255, 255, 0.98);
        z-index: 150;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: right 0.4s ease;
    }
    .nav-menu.active { right: 0; }
    .nav-list { flex-direction: column; text-align: center; gap: 40px; margin-left: 0; }
    
    /* スマホメニュー展開時は背景が白なので文字色を黒に戻す */
    .nav-list li a { font-size: 1.5rem; color: var(--text-color); }

    /* Hero Section: Layout Change for Mobile using display: contents to reorder */
    .hero { 
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        /* Mobile height fix for address bar expanding issue */
        min-height: calc(var(--vh, 1vh) * 100);
        height: auto; /* Allow growth */
        padding-top: calc(var(--header-height) + 20px);
        padding-bottom: 60px;
        overflow: hidden;
    }

    /* Flatten the structure visually so we can reorder children with flexbox */
    .hero__text-area,
    .hero__content {
        display: contents;
    }

    /* 1. Subtitle (Top) */
    .hero__sub {
        order: 1;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        color: #fff; /* Ensure color visibility */
    }

    /* 2. Stacked Logo (Overlapping Image) */
    .stacked {
        order: 2;
        --font-size: clamp(5rem, 18vw, 8rem);
        align-items: center;
        margin-top: 0;
        margin-bottom: -50px; /* Pull image up to overlap */
        position: relative;
        z-index: 20; /* Above image */
        width: 100%;
    }

    /* 3. Main Image (Middle) */
    .hero__image-area { 
        order: 3;
        position: relative; /* Reset from absolute */
        top: auto;
        left: auto;
        transform: none;
        width: 90%;
        /* Mobile 50vh fix */
        height: calc(var(--vh, 1vh) * 50);
        flex: none;
        margin-bottom: 30px; /* Space between image and info */
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        z-index: 1;
    }
    .hero__image-area img {
        border-radius: 20px;
        /* Keep other image styles */
    }

    /* 4. Info Message (Bottom) */
    .hero__info {
        order: 4;
        margin-top: 0;
        padding-bottom: 0;
        text-align: center;
        text-shadow: none;
        
        border-left: none;
        padding-left: 0;
        padding-top: 0;
        
        width: 100%;
        padding: 0 20px;
        color: #fff; /* Ensure color visibility */
    }
    
    /* Decoration Line */
    .hero__info::before {
        content: '';
        display: block;
        width: 40px;
        height: 3px;
        background-color: #fff;
        margin: 0 auto 20px auto;
    }
    
    /* Grids */
    .intro__grid { grid-template-columns: repeat(2, 1fr); }
    .menu-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 40px; }
    .drink-container { grid-template-columns: 1fr; padding: 20px; }
    
    /* Layout Adjustments */
    .menu-sec { margin: 20px 10px; border-radius: 10px; padding: 60px 0; }
    .footer-maps { flex-direction: column; align-items: center; }
    .map-box { width: 100%; max-width: 300px; }

    /* Mobile adjustments for Marquee */
    .marquee-track img {
        width: 150px;
        height: 150px; /* Smaller images on mobile */
    }

    /* Intro Title Adjustment for Mobile (Added) */
    .intro__title {
        font-size: 2rem; /* スマホのみサイズを小さく (3rem -> 2rem) */
        line-height: 1.2; /* 行間も少し調整 */
    }
}

/* =========================================
   8. Animation (New Addition)
   ========================================= */

/* スタックロゴ用のポップアニメーション */
@keyframes stackPop {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    100% {
        opacity: var(--final-op);
        transform: translateY(0) scale(1);
    }
}

/* 通常テキスト用のフェードアップ */
@keyframes simpleFadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* カーテンアニメーション */
@keyframes curtainReveal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

/* 画像のズームインアニメーション */
@keyframes imageZoom {
    0% {
        transform: scale(1.1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ロゴのアニメーション適用（is-loadedクラスが付いたら開始） */
body.is-loaded .stackedItem {
    /* ショートハンドだとdelayがリセットされるため、個別指定に変更 */
    animation-name: stackPop;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: forwards;
}

/* 各行の透明度を変数で再定義し、遅延を設定 */
.stackedItem { opacity: 0; } /* 初期状態非表示 */
.stackedItem:nth-child(1) { --final-op: 1;   animation-delay: 0.2s; }
.stackedItem:nth-child(2) { --final-op: 0.8; animation-delay: 0.3s; }
.stackedItem:nth-child(3) { --final-op: 0.6; animation-delay: 0.4s; }
.stackedItem:nth-child(4) { --final-op: 0.4; animation-delay: 0.5s; }
.stackedItem:nth-child(5) { --final-op: 0.2; animation-delay: 0.6s; }

/* サブタイトルのアニメーション */
.hero__sub { opacity: 0; }
body.is-loaded .hero__sub {
    animation: simpleFadeUp 0.8s ease-out forwards;
    animation-delay: 0.1s; /* 一番最初に表示 */
}

/* インフォメーションのアニメーション */
.hero__info { opacity: 0; }
body.is-loaded .hero__info {
    animation: simpleFadeUp 0.8s ease-out forwards;
    animation-delay: 1.0s; /* ロゴが出きった後にゆっくり表示 */
}

/* メインビジュアルのカーテンエフェクト */
.hero__image-area {
    position: relative; /* 擬似要素の基準 */
}

/* カーテン（マスク） */
.hero__image-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-orange); /* ブランドカラーを使用 */
    z-index: 5; /* 画像の上に配置 */
    transform: translateX(0); /* 初期位置 */
}

body.is-loaded .hero__image-area::after {
    animation: curtainReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation-delay: 0.2s; /* 少し待ってから開始 */
}

/* 画像のアニメーション連携 */
/* .active クラスがついている画像のみにアニメーションを適用する (修正箇所) */
/* 修正: ズームアニメーションを無効化し、単純なフェード表示にする */
body.is-loaded .hero__image-area img.active {
    /* animation: imageZoom 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; */
    opacity: 1;
}

/* 補足: スライダーのJSによる切り替え（opacity）と競合しないよう調整 */
.slide {
    /* JSでopacity制御しているため、imageZoomのopacity操作と競合注意。
       ここでは初期表示の演出を優先し、JSの動作は維持する */
    transition: opacity 1.5s ease-in-out;
}

/* =========================================
   9. PC Specific Customization
   ========================================= */
@media (min-width: 1025px) {
    /* Main Foodのスライダーを大きく表示するためにコンテナ幅を拡張 */
    /* Side Food, Sweets, Drinkも同様に拡張 */
    #main-food .container,
    #side-food .container,
    #sweets .container,
    #drink .container {
        max-width: 1400px; /* デフォルトの1100pxから拡大 */
    }
}

/* =========================================
   10. Hanging Info Cards (New Section)
   Note: Scoped within .hanging to prevent conflicts
   ========================================= */
.hanging {
    /* Define variables locally within this section */
    --ink: #2c476f;     /* ネイビー */
    --paper: #f3eee5;   /* アイボリー */
    --shadow: rgba(44, 71, 111, .18);
    --shadow-2: rgba(44, 71, 111, .26);
    --accent: #C6502D;  /* テラコッタ色（ブランドカラーのオレンジを使用） */

    --radius: 18px;
    --ring: 14px;
    --line: 3px;
    --max: 1180px;

    width: 100%;
    /* Modified: Increased vertical padding to make the section taller */
    padding: clamp(60px, 10vw, 120px) 16px;
    color: var(--ink);
    background: var(--paper); /* Ensure background matches design */
}

.hanging__inner {
    width: min(var(--max), 100%);
    margin: 0 auto;
}

.hanging__header {
    margin-bottom: clamp(18px, 3.2vw, 28px);
    text-align: center; /* Center align for consistency with other sections */
}

.hanging__eyebrow {
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
    font-family: var(--font-eng); /* Use site's English font */
}

.hanging__title {
    margin: 0;
    font-size: clamp(4rem, 8vw, 6rem); /* Infoセクションも同様に拡大 */
    line-height: 1.1;
    font-family: var(--font-title); /* Modified: Use custom font */
    color: var(--color-orange); /* Match site accent */
}

.hanging__lead {
    margin: 10px auto 0; /* Center align */
    max-width: 52ch;
    opacity: .86;
}

/* ===== Hanger / String ===== */
.hanger {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: clamp(18px, 2.6vw, 28px);
    align-items: start;

    padding-top: 72px; /* 紐からカードまでの余白 */
    perspective: 1000px;
}

/* 横の紐 */
.hanger::before {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    top: 26px;
    height: var(--line);
    border-radius: 999px;
    background: var(--ink);
    opacity: .92;
    box-shadow: 0 10px 24px var(--shadow);
}

/* ちょい弛みを表現する薄い影 */
.hanger::after {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    top: 33px;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(44, 71, 111, .18), transparent 70%);
    opacity: .7;
    filter: blur(0.2px);
}

/* ===== Card ===== */
.card {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    outline: none;

    /* JSから入る値 */
    --sway: 0deg;
    --tiltX: 0deg;
    --tiltY: 0deg;
    --lift: 0px;

    /* 吊り下げ位置 */
    translate: 0 var(--drop, 20px);

    transform:
        translateY(var(--lift)) rotateZ(calc(var(--rot, 0deg) + var(--sway))) rotateX(var(--tiltX)) rotateY(var(--tiltY));
    transition:
        box-shadow .25s ease,
        transform .18s ease;
}

/* 縦の紐（カードごと） */
.card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -58px; /* 横の紐から降りる長さ */
    width: 2px;
    height: 58px;
    background: var(--ink);
    opacity: .82;
    transform: translateX(-50%);
}

/* 縦紐の“結び目” */
.card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--paper);
    outline: 2px solid var(--ink);
    transform: translateX(-50%);
    box-shadow: 0 10px 18px var(--shadow);
}

/* クリップ（リング＋挟み） */
.card__clip {
    position: absolute;
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    gap: 6px;
    pointer-events: none;
}

.card__ring {
    width: calc(var(--ring) * 1.55);
    height: calc(var(--ring) * 1.55);
    border-radius: 999px;
    border: 3px solid var(--ink);
    background: transparent;
    box-shadow: 0 10px 18px var(--shadow);
}

.card__clamp {
    width: 44px;
    height: 18px;
    border-radius: 10px;
    background: var(--ink);
    opacity: .92;
    box-shadow: 0 10px 18px var(--shadow);
}

/* 本体 */
.card__body {
    background: var(--paper);
    border: 2px solid rgba(44, 71, 111, .88);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    min-height: 320px; /* “大きめ” */
    box-shadow:
        0 26px 40px var(--shadow),
        0 10px 18px rgba(44, 71, 111, .10);
    position: relative;
    overflow: hidden;
    text-align: left; /* Align text left within cards */
}

/* うっすら内側の紙感 */
.card__body::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: calc(var(--radius) - 10px);
    border: 1px solid rgba(44, 71, 111, .18);
    pointer-events: none;
}

/* タイポ */
.card__step {
    margin: 0 0 8px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .62;
    font-family: var(--font-eng);
    font-size: 0.8rem;
    color: var(--accent); /* アクセントカラーに変更 */
}

.card__title {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink); /* Force ink color */
}

.card__text {
    margin: 0 0 14px;
    opacity: .9;
}

/* DL */
.card__dl {
    margin: 0;
    display: grid;
    gap: 10px;
}

.card__row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(44, 71, 111, .25);
}

.card__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.card__row dt {
    font-weight: 800;
    opacity: .85;
}

.card__row dd {
    margin: 0;
    opacity: .92;
}

/* Hours */
.hours {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.hours__item {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(44, 71, 111, .18);
    background: rgba(44, 71, 111, .06);
}

.hours__day {
    font-weight: 800;
    color: var(--accent); /* アクセントカラーに変更 */
}

.hours__time {
    opacity: .9;
}

.note {
    margin: 12px 0 0;
    font-size: 13px;
    opacity: .75;
}

/* Instagram */
.ig {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(44, 71, 111, .18);
    background: rgba(44, 71, 111, .06);
}

.ig__badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 2px solid rgba(44, 71, 111, .7);
    display: grid;
    place-items: center;
    position: relative;
}

.ig__dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--accent); /* アクセントカラーに変更 */
    opacity: .9;
}

.ig__handle {
    margin: 0;
    font-weight: 900;
}

.ig__sub {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: .78;
}

/* Buttons / Links */
.card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.link {
    color: var(--accent); /* アクセントカラーに変更 */
    font-weight: 800;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Scoped .btn to avoid conflict with main site button styles */
.hanging .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    border: 2px solid var(--accent); /* アクセントカラーに変更 */
    background: var(--accent);       /* アクセントカラーに変更 */
    color: var(--paper);
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 14px 24px var(--shadow-2);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    text-transform: none; /* Reset uppercase if inherited */
    font-size: 0.9rem; /* Match base */
}

.hanging .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 30px var(--shadow-2);
    background: var(--accent); /* Ensure background stays */
    color: var(--paper);
}

.hanging .btn--ghost {
    background: transparent;
    color: var(--accent); /* アクセントカラーに変更 */
    box-shadow: none;
    border-color: var(--accent); /* アクセントカラーに変更 */
}
.hanging .btn--ghost:hover {
    background: rgba(198, 80, 45, 0.05); /* テラコッタの薄い色 */
    color: var(--accent);
}

/* Hover / Focus: “吊るし感”を崩さず少し持ち上げ */
.card:focus-within,
.card:hover {
    --lift: -6px;
}

.card:focus-within .card__body,
.card:hover .card__body {
    box-shadow:
        0 34px 52px var(--shadow-2),
        0 12px 22px rgba(44, 71, 111, .12);
}

.hanging .btn:focus-visible,
.link:focus-visible {
    outline: 3px solid rgba(44, 71, 111, .35);
    outline-offset: 3px;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 980px) {
    .hanger {
        grid-template-columns: 1fr;
        padding-top: 64px;
    }

    .hanger::before,
    .hanger::after {
        left: 8%;
        right: 8%;
    }

    .card {
        max-width: 620px;
        margin-inline: auto;
    }

    .card::before {
        height: 52px;
        top: -52px;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .card {
        transition: none;
        transform: translateY(var(--lift)) rotateZ(var(--rot, 0deg));
    }
}

/* =========================================
   11. Site Loader
   ========================================= */
.site-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-color); /* Use site background */
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility .5s ease;
    /* Local variables for loader to avoid global conflict if needed, or reuse */
    --loader-ink: #2c466f; /* Match site blue */
    --loader-accent: #c6502d; /* Match site orange */
    --loader-shadow: rgba(44, 71, 111, .18);
}

.site-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 360px at 50% 45%, rgba(44, 70, 111, .08), transparent 70%),
        radial-gradient(700px 280px at 50% 65%, rgba(198, 80, 45, .08), transparent 70%);
    pointer-events: none;
}

.site-loader__inner {
    position: relative;
    width: min(520px, 92vw);
    text-align: center;
    color: var(--loader-ink);
}

.site-loader__brand {
    display: grid;
    place-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.site-loader__seal {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    border: 3px solid var(--loader-ink);
    position: relative;
    box-shadow: 0 18px 28px var(--loader-shadow);
    background: linear-gradient(180deg, rgba(44, 70, 111, .04), rgba(44, 70, 111, .02));
}

.site-loader__seal::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 999px;
    border: 2px solid var(--loader-accent);
    opacity: .9;
}

.site-loader__word {
    font-family: var(--font-eng); /* Use site font */
    font-weight: 700;
    letter-spacing: .18em;
    font-size: clamp(22px, 4vw, 34px);
    line-height: 1.1;
}

/* 文字が順に出る（控えめ） */
.site-loader__word span {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: loaderLetters .9s ease forwards;
}

.site-loader__word span:nth-child(1) { animation-delay: .05s; }
.site-loader__word span:nth-child(2) { animation-delay: .12s; }
.site-loader__word span:nth-child(3) { animation-delay: .19s; }
.site-loader__word span:nth-child(4) { animation-delay: .26s; }
.site-loader__word span:nth-child(5) { animation-delay: .33s; }
.site-loader__word span:nth-child(6) { animation-delay: .40s; }

@keyframes loaderLetters {
    to { opacity: 1; transform: translateY(0); }
}

/* バー */
.site-loader__bar {
    height: 10px;
    border-radius: 999px;
    border: 2px solid rgba(44, 70, 111, .55);
    background: rgba(44, 70, 111, .06);
    overflow: hidden;
    box-shadow: 0 14px 24px rgba(44, 70, 111, .10);
    width: 200px; /* Limit width */
    margin: 0 auto;
}

.site-loader__barFill {
    display: block;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, var(--loader-accent), rgba(198, 80, 45, .65));
    border-radius: 999px;
    transform: translateX(-120%);
    animation: loaderBar 1.1s ease-in-out infinite;
}

@keyframes loaderBar {
    0% { transform: translateX(-120%); }
    55% { transform: translateX(180%); }
    100% { transform: translateX(180%); }
}

.site-loader__caption {
    margin: 14px 0 0;
    opacity: .82;
    font-weight: 700;
    letter-spacing: .04em;
    font-family: var(--font-main);
    font-size: 0.9rem;
}

/* 非表示状態 */
.site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* モーション配慮 */
@media (prefers-reduced-motion: reduce) {
    .site-loader__barFill,
    .site-loader__word span {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}