@charset "utf -8";
:root {
    /* color */
    --color-primary: #4a5445;    /* モスグリーン（元のグリーンをダーク化） */
    --color-primary-light: #7a8a77;    /* プライマリーライター */
    --color-primary-lightest: #b5c4b2;    /* プライマリーライテスト */
    --color-secondary: #FBF7F0;    /* サブカラー */
    --color-accent: #b6b6a3;    /* 強調部分 */
    --color-text: #e8dfd5;       /* 明るいベージュ（ダーク背景用） */
    --color-text-dark: #89684a;  /* 濃い茶色（明るい背景用） */
    --color-white: #ffffff;

    /* レイアウト */
    --width-content: 100%;
    --width-narrow: 770px;
    --space-unit: 15px;
    --space-section: 60px;

    /* その他 */
    --flex-gap: 30px;
    --duration: .7s;
}

/* 共通設定 */

html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",sans-serif;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-primary);
}
a {
    text-decoration: none
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
section {
    padding: 60px 0 0;
}

.sec-ttl {
    font-family: "Yusei Magic", sans-serif;
    font-size: 2.5rem;
    text-align: center;
    color: var(--color-primary-lightest);
    margin-bottom: 30px;
}

/* エレガントな見出し（GSAPアニメーション用） */
.elegant-ttl {
    display: inline-block;
    font-family: "Yusei Magic", sans-serif;
    font-size: 1.5rem;
    color: var(--color-primary-lightest);
    margin-bottom: 40px;
}

.elegant-ttl span {
    display: inline-block;
    opacity: 0;
}

.lead {
    font-size: 14px;
    line-height: calc(26 / 14);
    text-align: center;
    padding-bottom: var(--space-section);
}

/* ボタン共通 */
.btn {
    display: block;
    text-align: center;
    font-weight: bold;
    transition: all var(--duration);
    margin: 0 auto;
}

/* プライマリーボタン */
.btn-primary {
    width: 290px;
    height: 55px;
    line-height: 55px;
    background: #8f9f84;
    color: var(--color-white);
    border-radius: 5px;
}

/* ページトップボタン */
.pagetop {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    background-color: #8f9f84;
    border-radius: 50%;
    opacity: 1;                     /* ← 透明度 １＝完全に不透明（しっかり見える） */
}

.pagetop:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-top: 3px solid var(--color-white);     /* 上に線 */
    border-right: 3px solid var(--color-white);   /* 右に線 */
    translate: 0 20%;
    rotate: -45deg;                 /* ４５度傾ける */
    top: calc(50% - 5px);
    left: calc(50% - 5px);
}

.pagetop:hover {
    transition: all var(--duration);
}

/* ホバー制御 */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover,
    .btn-secondary:hover,
    .pagetop a:hover {
        opacity: 0.7;
    }
}

@media (hover: none) or (pointer: coarse) {
    /* タッチデバイスでの即時反応 */
    .btn-primary:active,
    .btn-secondary:active,
    .pagetop a:hover {
        opacity: 1;
    }
}

/* レイアウト用の共通ラッパー */
.wrapper {
    width: var(--width-content);
    margin: 0 auto;
    position: relative;
    padding: 0 var(--space-unit);
    box-sizing: border-box;
}
.wrapper-inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 var(--space-unit);
    box-sizing: border-box;
}
.flex-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 共通グリッドレイアウト */
.col-grid {
    display: grid;
    gap: var(--flex-gap);
}
.col-grid.col-1 {
    grid-template-columns: 1fr;
}
.col-grid.col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.col-grid.col-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 共通フレックスレイアウト */
.col-flex {
    display: flex;
    gap: var(--flex-gap);
    flex-wrap: wrap;
}
.col-flex.col-1 > * {
    flex: 0 0 100%;
}
.col-flex.col-2 > * {
    flex: 0 0 calc(50% - var(--flex-gap) / 2);
}
.col-flex.col-3 > * {
    flex: 0 0 calc(33.333% - var(--flex-gap) * 2 / 3);
}

/* 見出し */
.font-english {
    font-family: 'Philosopher',sans-serif;
    font-weight: normal;
}

/* ----------------------------------------ヘッダー---------------------------------------- */

.page-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: var(--color-primary);
    z-index: 9998;
    padding: 0;
}

/* ハンバーガーメニュー（タブレット・スマホ用）*/
.hamburger {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: var(--color-primary);
    border-radius: 8px;
    padding: 0;
    transition: all 0.3s ease;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--color-primary-lightest);
    transition: all 0.3s ease;
    border-radius: 2px;
}

/* ハンバーガーメニュー開いた時の×印 */
.hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* メニューオーバーレイ */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9996;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    display: block;
}

/* ----------------------------------------スプリッドレイアウト（ページ全体）---------------------------------------- */

/* スプリッドレイアウト（50%/50%） */
.split-layout {
    display: flex;
    gap: 40px;
    min-height: 100vh;
}

/* 左エリア（PC固定表示） */
.left-area {
    flex: 0 0 calc(50% - 20px);
    position: sticky;
    top: 0px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 45px 0;
    overflow: hidden;
}

/* モバイル用left-areaはデフォルトで非表示 */
.left-area-mobile {
    display: none;
}

/* 右エリア（スクロール） */
.right-area {
    flex: 0 0 calc(50% - 20px);
    background: var(--color-primary);
    transition: .3s;
}

/* -----------section 01---------- */

/* 背景 */
.sec-01 {
    background-position: center;
    background-color: var(--color-primary);
}
/* 目安のご案内 */

.lead {
    position: relative;
    font-size: 1rem;
    text-align: center;
    color: var(--color-text);
    padding-bottom: 60px;
}

/* コンテンツエリア */
.content-area {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 動画エリア */
.video-area {
    width: 100%;
    height: 50vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

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

/* 情報エリア */
.info-area {
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 50vh;
}

/* 情報エリア：左カラム（営業状況のみ） */
.info-left {
    flex: 0 0 calc(50% - 10px);
    display: flex;
    flex-direction: column;
}

/* 情報エリア：右カラム（カレンダー） */
.info-right {
    flex: 0 0 calc(50% - 10px);
    display: flex;
    flex-direction: column;
}

/* 営業状況 */
.today-status {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: var(--color-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.today-status h3 {
    margin-bottom: 20px;
    color: #7a5c3e;
    font-size: 1.3rem;
    text-align: center;
}

.status-box {
    background: #d8d3cd;
    color: #5f4b3a;
    text-align: center;
    padding: 40px 0;
    border-radius: 8px;
    font-weight: 800;
    font-size: 2.2rem;
}

.today-nomo {
    text-align: center;
}

.today-nomo .nomo-status {
    display: none;
    padding-top: 30px;
}

.today-nomo.open .nomo-status.open {
    display: block;
}

.today-nomo.close .nomo-status.close {
    display: block;
}

.nomo-status img {
    width: 100px;
    animation: float 3s ease-in-out infinite;
}

.nomo-status.open img {
    animation-duration: 2.5s;
}

.nomo-status.close img {
    animation-duration: 4s;
    opacity: 0.85;
}

.nomo-text {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #6b4e3d;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

/* カレンダー */
.monthly-calendar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.monthly-calendar iframe {
    flex: 1;
    min-height: 0;
}

/* 定休日 */
.holiday-info {
    width: 100%;
    background: var(--color-white);
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.holiday-info h3 {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 10px;
    color: #7a5c3e;
}

.holiday-info ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.holiday-info li {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.holiday-note{
    font-size: 0.85rem;
    color: var(--color-text);
}

/* 右エリアのスライダー */
.content-slider {
    width: 100%;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.content-slider .slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.content-slider .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.content-slider .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Ken Burns効果 - 画像を大きくして横移動 */
.content-slider .swiper-slide img {
    width: 110%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    transform: scale(1.15) translateX(-5%);
}

/* アクティブなスライドのアニメーション */
.content-slider .swiper-slide-active img.ken-burns {
    animation: kenBurns 6s linear forwards;
}

/* Ken Burnsアニメーション本体（右から左へゆっくり移動+ズーム） */
@keyframes kenBurns {
    0% {
        transform: scale(1.1) translateX(5%);
    }
    100% {
        transform: scale(1.15) translateX(-5%);
    }
}

/* スライダー内：左上の波型 */
.content-slider .p-front__heroWaveImg--top {
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    z-index: 10;
}

/* スライダー内：ロゴ */
.content-slider .header-top {
    position: absolute;
    top: 2%;
    left: 2rem;
    filter: drop-shadow(0 0 8px #fff);
    width: 80px;
    text-align: left;
    z-index: 10;
}

/* スライダー内：右下の波型 */
.content-slider .p-front__heroWaveImg--bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70%;
    pointer-events: none;
    z-index: 10;
}

/* グローバルナビゲーション */
.global-nav {
    position: sticky;
    top: 0;
    padding: 15px 0;
    z-index: 100;
}

.global-nav .main-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.global-nav .main-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.global-nav .main-nav a:hover {
    opacity: 0.8;
}

/* ノモちゃん付きメニュー */
.global-nav .main-nav li.has-nomo a {
    display: flex;
    align-items: center;
    gap: 7px;
}

.global-nav .main-nav li.has-nomo a::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("../img/favicon.svg") no-repeat center / contain;
    flex-shrink: 0;
}

/* ノモちゃん hoverでぴょこん */
.global-nav .main-nav li.has-nomo a:hover::before {
    animation: nomo-bounce 0.6s ease;
}

@keyframes nomo-bounce {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-6px);
    }
    60% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-2px);
    }
}


/* 売り切れ目安 */


/* 焼き上がり */

.bake-schedule table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}

.bake-schedule th {
    background: #f6e7d8;
    color: #7a5c3e;
    font-weight: 600;
    padding: 16px;
    text-align: center;
    font-size: 0.95rem;
}

.bake-schedule td {
    padding: 14px 16px;
    font-size: 0.95rem;
    color: #5f4b3a;
    line-height: 1.6;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.bake-schedule tr:last-child td {
    border-bottom: none;
}

.bake-schedule tr:nth-child(even) td {
    background: #fff6ec;
}

.bake-schedule td:first-child {
    font-weight: 600;
    white-space: nowrap;
    color: #8b6a4a;
}

/* 参考にして */
.today-note {
    text-align: center;
}


/* インスタストーリー誘導 */
.insta-btn, .sp-tel-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background-color: #8f9f84;
    color: #fff;
    border-radius: 999px;
    font-size: 1rem;
    text-decoration: none;
    margin-bottom: 15px;
}

/* ノモちゃん本体 */
.nomo-wave {
    width: 40px;
    height: 40px;
    background: url("../img/favicon.svg") no-repeat center / contain;
    transform-origin: 70% 70%;
    animation: nomo-hand 1.6s infinite ease-in-out;
}

/* 動き */
@keyframes nomo-hand {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(10deg); }
    40%  { transform: rotate(-10deg); }
    60%  { transform: rotate(10deg); }
    80%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* .nomo-wave {
    animation: none;
} */

.insta-btn:hover .nomo-wave {
    animation: nomo-hand 1.2s infinite ease-in-out;
}

.insta-btn, .sp-tel-btn {
    transition:
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* ホバー時 */
.insta-btn:hover,.sp-tel-btn:hover {
    background-color: #7f8f74;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ニュース */
.content-area .news {
    width: 100%;
}


/* Instagram埋め込み */
.content-area .insta-sec {
    width: 100%;
    overflow: hidden;
}

.insta-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    width: 100%;
}

.insta-grid .instagram-media {
    margin: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* レスポンシブ対応 */

/* タブレット（1399px以下）：古い設定は削除済み - 新しいレスポンシブCSSを使用 */


/* スマホ（767px以下）：古い設定は削除済み - 新しいレスポンシブCSSを使用 */


/* 背景 */
.sec-02 {
    background-position: center;
}

/* 上段 */
.concept-hero {
    background-image: url('../img/sec-02-01.webp');
    background-size: cover;
    background-position: center;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concept-hero-text {
    color: #fff;
    line-height: 1.5;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 800px;
}

/* 下段 */

.concept-points {
    /* margin-top: 120px; */
    margin: 0 auto;
}

/* concept-container共通スタイル */
[class*="concept-container"] {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* 最初のコンテナだけ順序を反転 */
.concept-container-01 {
    flex-direction: row-reverse;
}

.concept-image img {
    max-width: 300px;
    object-fit: cover;
    filter: drop-shadow(8px 8px 0px var(--color-primary-lightest));
}

.concept-image {
    display: flex;
    align-items: center;
    gap: 24px;
}

.concept-text {
    border-radius: 50;
    padding: 40px;
}

.concept-text p {
    margin: 0;
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* フェードアップアニメーション（繰り返し可能） */
.f-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.f-up.fadeup {
    opacity: 1;
    transform: translateY(0);
}

/* -----------section 03---------- */

.sec-03 {
    background: var(--color-primary);
    padding: 60px 0;
}


.card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--flex-gap);
    align-items: flex-start;
    padding-bottom: var(--space-section);
}

.card {
    width: calc(33.333% - var(--flex-gap) * 2 / 3);
    box-sizing: border-box;
}

.card figure {
    margin: 0;
    line-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card figure::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.card-list:hover .card figure::before {
    background: rgba(0, 0, 0, 0.4);
}

.card:hover figure::before {
    background: rgba(0, 0, 0, 0) !important;
}

.card:hover figure {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover img {
    transform: scale(1.15);
}

.card-ttl { 
    font-size: 18px;
    line-height: calc(30 / 18);
    font-weight: bold;
    text-align: center;
    padding: var(--space-unit);
    
}

.card-txt {
    font-size: 14px;
    line-height: calc(26 / 14);
}

/* -----------section4 アクセス---------- */
.sec-04 {
    padding: 120px 0;
    background-color: var(--color-secondary)
}

.sec-04 .wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

  /* 見出し */
.sec-04 .sec-ttl {
    font-size: 1.8rem;
    margin-bottom: 40px;
    color: var(--color-text-dark);
}

  /* 店名 */
.sec-04 h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: #7a5c3e;
    letter-spacing: 0.05em;
}

  /* 住所・電話・営業時間 */
.sec-04 p {
    font-size: 0.95rem;
    line-height: 2;
    color: #555;
    margin-bottom: 30px;
}

  /* 地図 */
.sec-04 img {
    display: block;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

/* -----------フッター---------- */
/* フッター中身を横並び */
.footer-inner {
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 30px 0;
}

  /* ロゴ */
.footer-logo {
    width: 100px;
    display: block;
}

  /* 右側テキスト */
.footer-info {
    text-align: center;
}

.footer-info h2 {
    font-size: 1.8rem;
    color: var(--color-primary-lightest);
    display: block;
    margin-bottom: 5px;
}

.footer-info h3 {
    font-size: 1rem;
    color: var(--color-primary-lightest);
    display: block;
}

.footer-info p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-text);
    left:80%;
    margin: 0;
}

.copyright {
    text-align: center;
    background-color: var(--color-accent);
    font-size: 12px;
    padding: 20px;

}



/* チェックリスト */
.checklist {
    list-style: none;
    padding: 0;
    width: 100%;
    max-width: 600px;
}

.checklist li {
    position: relative;
    padding: 18px 0 18px 45px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #5f4b3a;
    border-bottom: 1px dashed #d8d3cd;
    transition: all 0.3s ease;
}

.checklist li:last-child {
    border-bottom: none;
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 28px;
    height: 28px;
    background: var(--color-primary-light);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.checklist li.show::before {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.checklist li:hover {
    padding-left: 50px;
    color: var(--color-primary);
}

/* ================================================================================
   アコーディオン
   ================================================================================ */

/* アコーディオンヘッダー */
.accordion-header {
    position: relative;
    font-size: 1.4rem;
    text-align: left;
    padding: 20px 60px 20px 25px;
    color: var(--color-text-dark);
    background: linear-gradient(135deg, #f9f5f0 0%, #fff 100%);
    border-left: 5px solid var(--color-primary-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.accordion-header:hover {
    background: linear-gradient(135deg, #f5f0e8 0%, #faf7f3 100%);
    border-left-color: #c1a858;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateX(3px);
}

.accordion-header.active {
    background: linear-gradient(135deg, #fef9e7 0%, #f9f4e8 100%);
    color: var(--color-primary);
    border-left-color: #c1a858;
}

/* アコーディオンアイコン */
.accordion-icon {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-60%);
    width: 35px;
    height: 35px;
    background: var(--color-primary-light);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-size: 0;
}

.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    background: white;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.accordion-icon::before {
    width: 16px;
    height: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.accordion-icon::after {
    width: 3px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.accordion-header:hover .accordion-icon {
    background: var(--color-primary);
    transform: translateY(-60%) scale(1.1);
}

.accordion-header.active .accordion-icon {
    background: var(--color-primary);
}

.accordion-header.active .accordion-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.accordion-header.active .accordion-icon::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* アコーディオンコンテンツ */
.accordion-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 25px;
    background-color: var(--color-white);
    border-radius: 8px;
    margin-top: 10px;
}

.accordion-content.active {
    padding: 25px;
}

/* ガイドライン内のチェックリスト調整 */
.accordion-item .checklist {
    margin: 0 auto;
}

/* ベイクスケジュール内のテーブル調整 */
.accordion-item table {
    margin-top: 0;
}

/* 注意ボックス */
.notice-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff9e6 0%, #fef5e7 100%);
    border-left: 4px solid #f39c12;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.1);
}

.notice-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #f39c12;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    align-self: flex-start;
}

.notice-text {
    flex: 1;
}

.notice-box p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #7d6608;
}

.notice-box p:first-child {
    margin-bottom: 8px;
}

.notice-sub {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* アコーディオン内のテーブル行を初期状態で非表示 */
.accordion-content table tr:not(:first-child) {
    opacity: 0;
    transform: translateX(-20px);
}


/* ニュースセクション - スタイリッシュバージョン */
.news {
    width: 100%;
}

.news-title {
    font-family: "Yusei Magic", sans-serif;
    font-size: 1.8rem;
    text-align: left;
    color: var(--color-primary-lightest);
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.news-list {
    list-style: none;
    padding: 0;
}

.news-item {
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}


.news-item:last-child {
    border-bottom: none;
}

.news-item:hover {
    transform: translateX(15px);
    border-bottom-color: rgba(193, 168, 88, 0.3);
}

.news-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, transparent 0%, #c1a858 50%, transparent 100%);
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-item:hover::before {
    height: 70%;
    transform: translate(-15px, -50%);
}

/* 左カラム：日付とカテゴリ */
.news-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 120px;
}

/* 日付 */
.news-date {
    font-size: 0.8rem;
    color: rgba(232, 223, 213, 0.5);
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.05em;
    font-weight: 300;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* カテゴリタグ */
.news-category {
    display: inline-block;
    padding: 4px 0;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(232, 223, 213, 0.6);
    border-bottom: 1px solid rgba(232, 223, 213, 0.2);
    width: fit-content;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-category.info {
    color: #8ab4d5;
    border-bottom-color: rgba(138, 180, 213, 0.3);
}

.news-category.product {
    color: #c597d8;
    border-bottom-color: rgba(197, 151, 216, 0.3);
}

.news-category.event {
    color: #e8a87c;
    border-bottom-color: rgba(232, 168, 124, 0.3);
}

/* 右カラム：コンテンツ */
.news-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* NEWバッジ */
.news-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 2px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: fit-content;
}

.news-badge.new {
    background: rgba(193, 168, 88, 0.15);
    color: #c1a858;
    border: 1px solid rgba(193, 168, 88, 0.3);
}

/* ニューステキスト */
.news-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text);
    font-weight: 300;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-item:hover .news-text {
    color: rgba(232, 223, 213, 0.9);
}

/* ニュースセクション（独立） */
.news-section {
    background: var(--color-primary);
    padding-top: 80px;
}

/* インスタグラムセクション（独立） */
.insta-sec {
    padding-top: 80px;
}

/* インスタセクションのタイトル */
.insta-sec .sec-ttl {
    color: var(--color-primary-lightest);
}

/* ニュースセクションのタイトル */
.news-section .news-title {
    color: var(--color-primary-lightest);
}
/* ================================================================================
   Instagramグリッド - ホバーエフェクト
   ================================================================================ */

.insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.insta-grid a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.insta-grid a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.insta-grid:hover a::before {
    background: rgba(0, 0, 0, 0.4);
}

.insta-grid a:hover::before {
    background: rgba(0, 0, 0, 0) !important;
}

.insta-grid a:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px);
}

.insta-grid figure {
    margin: 0;
    line-height: 0;
}

.insta-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.insta-grid a:hover img {
    transform: scale(1.15);
}


/* about section */

/* ノモベーカリーについて */

.about {
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 20px;
    line-height: 1.9;
}


  /* 上部2カラム */
.about-intro {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-bottom: 120px;
}

.intro-block {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.intro-block img {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-block img:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px) scale(1.02);
}

.intro-text {
    flex: 1;
}

.intro-text h2 {
    font-size: 1.5rem;
}

.intro-block.reverse {
    flex-direction: row-reverse;
}

  /* 波型スライダー */
.wave-slider {
    overflow: hidden;
}

.wave-swiper {
    width: 100%;
    overflow: visible;
    position: relative;
    margin-bottom: 30px;
}

.wave-swiper .swiper-slide {
    width: 600px;
}

.wave-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.wave-slider p {
    display: flex;
    margin: 0;
}
/* 波型画像（波型スライダー専用） */

/* 左上枠 */
.wave-swiper .wave-overlay-top {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 120px;
    pointer-events: none;
    z-index: 2;
}
/* 右下枠 */
.wave-swiper .wave-overlay-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 2;
}

  /* コンセプト */

.concept-container-01,.concept-container-02 {
    margin-top: 20px;
}

  .concept {
    text-align: center;
    padding-bottom: 120px;
}

.concept-images {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    padding-bottom: 60px;
}

.concept-images img {
    width: calc(100% / 3);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.concept-images img:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-4px) scale(1.02);
}

  /* こだわり */
.commitment {
    text-align: center;
}

.commitment h2 {
    font-size: 1.5rem;
}

.commitment p {
    max-width: 700px;
    margin: 0 auto;
}

/* ================================================================================
   lineup.html 専用CSS - 商品カードレイアウト
   ================================================================================ */

/* ラインナップセクション */
.lineup-sec {
    padding: 60px 0;
}

/* lineupページのアコーディオンアイテム */
.lineup-sec .accordion-item {
    margin-bottom: 20px;
}

/* パンレイアウト（左：写真1枚、右：商品リスト） */
.bread-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* パン写真 */
.bread-image {
    flex: 0 0 300px;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.bread-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* パンリスト */
.bread-list {
    flex: 1;
}

.bread-list .list-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bread-list .list-item:last-child {
    border-bottom: none;
}

.bread-list dt {
    font-size: 1rem;
    color: var(--color-text-dark);
    font-weight: 500;
}

.bread-list dd {
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: bold;
    white-space: nowrap;
}

.bread-list .note-text {
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.6;
}

/* 商品グリッド */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* 商品カード */
.product-card {
    background: var(--color-secondary);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 商品画像 */
.product-image {
    width: 100%;
    height: 180px;
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* 商品名 */
.product-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-text-dark);
    margin-bottom: 10px;
    line-height: 1.4;
    min-height: 42px;
}

.product-sub {
    font-size: 0.85rem;
    font-weight: normal;
    color: #999;
}

/* 価格 */
.product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
}

/* 注意書き */
.product-note {
    font-size: 0.8rem;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
}

/* コーヒー情報 */
.coffee-info {
    margin-top: 60px;
    padding: 40px 0;
    border-top: 2px solid var(--color-primary-lightest);
}

.coffee-info .intro-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.coffee-info .intro-block img {
    flex: 0 0 400px;
    width: 400px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.coffee-info .intro-text {
    flex: 1;
}

.coffee-info .intro-text h3 {
    margin-bottom: 15px;
}

.coffee-info .intro-text p {
    font-size: 1.1rem;
    color: var(--color-text);
    line-height: 1.8;
}

.price-note {
    text-align: right;
    margin-bottom: 30px;
}

/* ================================================================================
    info.html & access.html 専用CSS
   ================================================================================ */

/* info.html - 利用案内ページ */
.isec-01 {
    padding: 60px 0;
}

.isec-02, .isec-03 {
    padding: 0 0 60px 0;
}

.isec-04 {
    padding: 0;
    background: none;
}

.info-hero {
    text-align: center;
    margin-bottom: 40px;
}

.info-hero p {
    padding-bottom: 40px;
}

/* 利用案内・イベントのレイアウト */
.isec-01 .intro-block,
.isec-02 .intro-block {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.isec-01 .intro-block:last-child,
.isec-02 .intro-block:last-child {
    margin-bottom: 0;
}

.isec-01 .intro-block img,
.isec-02 .intro-block img {
    flex: 1;
    max-width: 50%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.isec-01 .intro-block .intro-text,
.isec-02 .intro-block .intro-text {
    flex: 1;
}

.isec-01 .intro-block.reverse,
.isec-02 .intro-block.reverse {
    flex-direction: row-reverse;
}

/* ANOTHERセクション */
.isec-03 .wrapper > p {
    padding-bottom: 40px;
}

/* ANOTHERセクションのカードリスト */
.isec-03 .card-list {
    padding-bottom: 0;
    text-align: center;
}

/* 営業時間・お取り置き */
.open-close,
.reserve {
    margin-bottom: 30px;
    text-align: center;
}

.open-close h2,
.reserve h2 {
    margin-bottom: 20px;
}

.open-close p,
.reserve p {
    line-height: 1.8;
    white-space: pre-line;
}

.sp-tel-btn {
    display: none;
}

/* access.html - アクセスページ */
.sec-04 {
    padding: 60px 0;
}

.sec-04 h3 {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 20px;
    font-weight: bold;
}

.sec-04 p {
    line-height: 1.8;
    margin-bottom: 30px;
    white-space: pre-line;
}

.sec-04 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 20px;
}

/* 駐車場写真セクション */
.shop-p {
    padding: 60px 0;
    background: var(--color-bg-light);
}

.shop-p img {
    width: 100%;
    height: auto;
    margin: 30px 0;
    border-radius: 8px;
}

.shop-p p {
    line-height: 1.8;
    white-space: pre-line;
}

/* ================================================================================
   レスポンシブデザイン
   ================================================================================ */

/* ----------------------------------------
   タブレット（768px - 1399px）
   ---------------------------------------- */
@media (max-width: 1399px) and (min-width: 768px) {
    /* 情報エリアの高さ調整 */
    .info-area {
        flex-direction: column; /* 縦並びに変更 */
        height: auto;
    }

    .info-left,
    .info-right {
        width: 100%; /* 横幅をいっぱいに広げる */
        flex: none;
    }

    .info-right {
        height: 400px; /* カレンダーが表示されるための高さを確保 */
    }

    /* カレンダー */
    .monthly-calendar {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .monthly-calendar iframe {
        flex: 1;
        width: 100%;
        height: 100%;
    }

    /* ハンバーガーメニュー表示 */
    .hamburger {
        display: flex;
    }

    /* PC用left-areaを非表示 */
    .left-area-pc {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
    }

    /* モバイル用left-areaを表示 */
    .left-area-mobile {
        display: flex !important;
    }

    /* スプリットレイアウトを1列に */
    .split-layout {
        flex-direction: column;
        gap: 0;
    }

    /* 左エリアを通常フローに */
    .left-area {
        position: static;
        width: 100%;
        height: auto;
        flex: none;
        padding: 20px 0;
        display: flex; /* 明示的に表示 */
    }

    /* 右エリア */
    .right-area {
        width: 100% !important;
        flex: 1 !important;
        max-width: 100% !important;
    }

    /* 動画エリア */
    .video-area {
        height: 300px;
        margin-bottom: 20px;
    }

    /* グローバルナビ */
    .global-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: var(--color-primary);
        padding: 80px 20px 20px;
        transition: right 0.3s ease;
        z-index: 9997;
        overflow-y: auto;
    }

    .global-nav.active {
        right: 0;
    }

    .global-nav .main-nav {
        flex-direction: column;
        gap: 0;
    }

    .global-nav .main-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .global-nav .main-nav a {
        display: block;
        padding: 15px 20px;
        text-align: left;
    }

    /* aboutページのintro-block */
    .intro-block,
    .intro-block.reverse {
        flex-direction: column;
        gap: 30px;
    }

    .intro-block img,
    .intro-text {
        width: 100%;
    }

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

    /* 波型スライダー */
    .wave-swiper .swiper-slide {
        width: 500px;
    }

    .about-intro {
        padding-bottom: 80px;
    }
    
    /* lineup.html */
    .bread-image {
        flex: 0 0 250px;
        height: 250px;
    }
    
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    /* info.html */
    .isec-01 .intro-block,
    .isec-02 .intro-block {
        flex-direction: row;
        gap: 30px;
    }
    
    .isec-01 .intro-block.reverse,
    .isec-02 .intro-block.reverse {
        flex-direction: row-reverse;
    }
    
    .isec-01 .intro-block img,
    .isec-02 .intro-block img {
        max-width: 45%;
    }

    .sp-tel-btn {
        display: none;
    }
}

/* ----------------------------------------
   スマホ（767px以下）
   ---------------------------------------- */
@media (max-width: 767px) {
    /* ハンバーガーメニュー */
    .hamburger {
        display: flex;
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
        gap: 4px;
    }
    
    .hamburger span {
        width: 24px;
    }
    
    /* スマホ用の×印調整 */
    .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* PC用left-areaを非表示 */
    .left-area-pc {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
    }

    /* モバイル用left-areaを表示 */
    .left-area-mobile {
        display: flex !important;
    }

    /* left-areaのsticky解除 */
    .left-area {
        position: static;
        height: auto;
    }

    /* グローバルナビ */
    .global-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: var(--color-primary);
        padding: 80px 20px 20px;
        transition: right 0.3s ease;
        z-index: 9997;
        overflow-y: auto;
    }

    .global-nav.active {
        right: 0;
    }

    .global-nav .main-nav {
        flex-direction: column;
        gap: 0;
    }

    .global-nav .main-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .global-nav .main-nav a {
        display: block;
        padding: 15px 20px;
        text-align: left;
    }

    /* 右エリア */
    .right-area {
        width: 100% !important;
        flex: 1 !important;
        max-width: 100% !important;
    }

    /* 動画エリア */
    .video-area {
        height: 200px;
    }

    /* 情報エリア */
    .info-area {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .info-left,
    .info-right {
        flex: none;
        width: 100%;
    }

    .info-right {
        height: auto; /* 固定350pxから変更 */
    }

    .monthly-calendar {
        width: 100%;
        height: 350px; /* 明示的に高さ設定 */
        display: flex;
        flex-direction: column;
    }

    .monthly-calendar iframe {
        flex: 1;
        min-height: 350px;
        min-width: auto; /* autoに変更して親要素に合わせる */
        width: 100%;
    }

    /* インスタグラム */
    .insta-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* カード（人気商品） */
    .card-list {
        flex-direction: column;
    }

    .card {
        width: 100%;
    }

    /* コンセプト */
    .concept-images {
        flex-direction: column;
    }

    .concept-images img {
        width: 100%;
    }

    .concept-points {
        padding-top: 40px;
    }

    .concept-text {
        padding: 20px;
    }

    [class*="concept-container"] {
        flex-direction: column;
    }

    .concept-container-01 {
        flex-direction: column;
    }

    .concept-image img {
        max-width: 100%;
    }

    /* ニュース */
    .news-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .news-meta {
        min-width: auto;
    }

    /* フッター */
    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-logo-wrap {
        margin: 0 auto;
    }

    /* ボタン */
    .btn-primary {
        width: 100%;
        max-width: 290px;
    }

    /* セクションタイトル */
    .sec-ttl {
        font-size: 2rem;
    }

    /* aboutページ */

   
    .intro-block,
    .intro-block.reverse {
        flex-direction: column; /* 縦並びにする */
        gap: 30px;
    }

    .intro-block img,
    .intro-text {
        width: 100%; /* 幅をいっぱいにする */
    }


    
    .about-intro {
        padding-bottom: 60px;
    }

    .intro-text h2 {
        font-size: 1.3rem;
    }

    .intro-text p {
        font-size: 0.9rem;
    }

    .commitment h2 {
        font-size: 1.3rem;
    }

    .commitment p {
        font-size: 0.9rem;
        padding: 0 20px;
    }

    /* aboutページ - 波型スライダー */
    .wave-swiper .swiper-slide {
        width: 400px;
    }

    .wave-slider p {
        margin: 0 20px;
        font-size: 0.9rem;
    }
    
    /* lineup.html */
    .bread-layout {
        flex-direction: column;
        gap: 20px;
    }
    
    .bread-image {
        flex: none;
        width: 100%;
        height: 180px;  /* スマホサイズ */
    }
    
    .bread-list {
        width: 100%;
    }
    
    .bread-list .list-item {
        padding: 15px 0;
    }
    
    .bread-list dt {
        font-size: 1rem;
        flex: 1;
        padding-right: 10px;
    }
    
    .bread-list dd {
        font-size: 1.1rem;
    }
    
    .coffee-info .intro-block {
        flex-direction: column;
    }
    
    .coffee-info .intro-block img {
        flex: none;
        width: 100%;
        height: auto;
    }
    
    .coffee-info .intro-text {
        text-align: center;
    }
    
    .product-grid {
        grid-template-columns: 1fr;  /* 曜日限定を1列に */
        gap: 15px;
    }
    
    .product-image {
        height: 150px;
    }
    
    .product-name {
        font-size: 0.9rem;
        min-height: auto;
    }
    
    .product-price {
        font-size: 1.1rem;
    }

    
    /* info.html */
    .isec-01 {
        padding: 40px 0;
    }
    
    .isec-02, .isec-03 {
        padding: 0 0 40px 0;
    }
    
    .isec-04 {
        padding: 0;
    }
    
    .sec-04, .shop-p {
        padding: 40px 0;
    }
    
    .isec-01 .intro-block,
    .isec-02 .intro-block {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .isec-01 .intro-block.reverse,
    .isec-02 .intro-block.reverse {
        flex-direction: column;
    }
    
    .isec-01 .intro-block img,
    .isec-02 .intro-block img {
        max-width: 100%;
    }
    
    .sec-04 h3 {
        font-size: 1.3rem;
    }

    .sp-tel-btn {
        display: inline-flex;
    }
}/* ================================================================================
   シングルニュースページ用CSS
   ================================================================================ */

/* シングルニュースページのセクション */
.single-news {
    background: var(--color-primary);
    padding: 80px 0 60px;
}

/* シングル記事全体 */
.single-article {
    max-width: 800px;
    margin: 0 auto;
}

/* シングル記事ヘッダー */
.single-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.single-header .news-meta {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.single-header .news-date {
    font-size: 0.9rem;
    color: rgba(232, 223, 213, 0.6);
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.05em;
}

.single-header .news-category {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
}

.single-header .news-category.info {
    color: #8ab4d5;
    background: rgba(138, 180, 213, 0.15);
    border: 1px solid rgba(138, 180, 213, 0.3);
}

.single-header .news-category.product {
    color: #c597d8;
    background: rgba(197, 151, 216, 0.15);
    border: 1px solid rgba(197, 151, 216, 0.3);
}

.single-header .news-category.event {
    color: #e8a87c;
    background: rgba(232, 168, 124, 0.15);
    border: 1px solid rgba(232, 168, 124, 0.3);
}

.single-header .news-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.single-header .news-badge.new {
    background: rgba(193, 168, 88, 0.15);
    color: #c1a858;
    border: 1px solid rgba(193, 168, 88, 0.3);
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 3px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: fit-content;
}

/* シングルタイトル */
.single-title {
    font-family: "Yusei Magic", sans-serif;
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--color-primary-lightest);
    margin: 0;
    letter-spacing: 0.05em;
}

/* アイキャッチ画像 */
.single-thumbnail {
    margin: 0 auto 40px;
    max-width: 600px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.single-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* シングル記事本文 */
.single-content {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.9;
    margin-bottom: 60px;
}

.single-content p {
    margin-bottom: 1.5em;
}

.single-content h2 {
    font-family: "Yusei Magic", sans-serif;
    font-size: 1.5rem;
    color: var(--color-primary-lightest);
    margin: 2em 0 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.single-content h3 {
    font-family: "Yusei Magic", sans-serif;
    font-size: 1.3rem;
    color: var(--color-primary-lightest);
    margin: 1.8em 0 0.8em;
}

.single-content ul,
.single-content ol {
    margin: 1.5em 0 1.5em 2em;
}

.single-content li {
    margin-bottom: 0.5em;
}

.single-content a {
    color: #c1a858;
    text-decoration: underline;
    transition: color 0.3s;
}

.single-content a:hover {
    color: rgba(193, 168, 88, 0.8);
}

/* シングルフッター */
.single-footer {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .single-news {
        padding: 60px 0 40px;
    }
    
    .single-title {
        font-size: 1.5rem;
    }
    
    .single-content {
        font-size: 0.95rem;
    }
    
    .single-header .news-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}