@charset "UTF-8";
/* --- Variables & Reset --- */
:root {
    --color-accent: #191970;
    --color-accent-light: #6BCDF8;
    --color-timeline-line: #6BCDF8;
    --box-bg-color: #ffffff;
    --font-main: "Zen Maru Gothic", "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    --radius-md: 12px;
    --radius-lg: 24px;
    --sidebar-width-pc: 240px;
    --sidebar-width-pc-collapsed: 72px;
    --header-height: 60px;
    --content-max-width: 1000px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: var(--font-main);
    /* 背景画像設定（管理画面の設定がない場合のデフォルト） */
    background-image: url("./background.png");
    background-size: cover;
    background-position: center;
    background-color: #F0FFFF;
    color: var(--color-accent);
    line-height: 1.8;
    font-size: 16px;
    overflow-x: hidden;
    background-attachment: scroll; /* モバイルでの不具合を避けるためscroll推奨 */
}
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: opacity 0.3s;
}
a:hover {
    opacity: 0.7;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
/* --- Snow Animation --- */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.snowflake {
    position: absolute;
    top: -20px;
    color: #fff;
    opacity: 0.8;
    animation: fall linear infinite;
    text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
@keyframes fall {
    0% {
        top: -10%;     /* 画面より少し上からスタート */
        opacity: 0;    /* 待機中は見えないようにする */
    }
    1% {
        opacity: 1;    /* 動き出した瞬間に表示する */
    }
    100% {
        top: 100%;
        opacity: 0.3;
    }
}
/* --- Layout Structure --- */
.app-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
    overflow-x: clip; /* 横方向のはみ出しだけを確実にカットし、縦スワイプを絶対に邪魔しない */
}
/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;  /* フォールバック：dvhが効かないブラウザ用 */
    height: 100dvh; /* 上書き：最新ブラウザ用 */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: width 0.3s, transform 0.3s;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    width: 280px;
    transform: translateX(-100%);
    
    /* スワイプの感触を良くする設定 */
    -webkit-overflow-scrolling: touch;
}
.sidebar.mobile-active {
    transform: translateX(0);
}
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}
.sidebar-overlay.active {
    display: block;
}
@media (min-width: 1024px) {
    body {
        background-attachment: fixed;
    }
    .sidebar {
        transform: translateX(0);
        width: var(--sidebar-width-pc);
    }
    .sidebar.collapsed {
        width: var(--sidebar-width-pc-collapsed);
    }
    .sidebar-overlay {
        display: none !important;
    }
}
.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    color: var(--color-accent);
}
.sidebar-logo {
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar.collapsed .sidebar-logo {
    display: none;
}
.nav-list-container {
    flex: 1;           /* 余ったスペースを全部使う */
    overflow-y: auto;  /* 縦方向のスクロールを明示 */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを強制 */
}
.nav-list {
    list-style: none;
    padding: 10px 0 100px; /* 3つ目の値を 0 から 100px 程度に増やす */
    flex: 1;
}
.nav-item {
    display: block;
    padding: 0;
    color: var(--color-accent);
    transition: background 0.2s;
    white-space: nowrap;
    overflow: hidden;
}
.nav-item.home-item>a {
    font-size: 1.1rem;
    font-weight: 700;
    padding-top: 16px;
    padding-bottom: 16px;
}
.nav-item.home-item .nav-icon {
    font-size: 28px;
}
.nav-item.indented>a {
    padding-left: 36px;
}
.nav-item.indented.child>a {
    padding-left: 50px;
}
.sidebar.collapsed .nav-item.indented>a,
.sidebar.collapsed .nav-item.indented.child>a {
    padding-left: 0;
    justify-content: center;
}
.nav-item>a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 24px;
    width: 100%;
    height: 100%;
    color: inherit;
}
.nav-item:hover {
    background-color: rgba(135, 206, 235, 0.2);
}
.nav-item.active {
    background-color: rgba(135, 206, 235, 0.3);
    font-weight: 700;
    border-right: 3px solid var(--color-accent);
}
.nav-item.child>a {
    padding-left: 68px;
    font-size: 0.9rem;
    gap: 10px;
}
.sidebar.collapsed .nav-item.child {
    display: none;
}
.nav-icon {
    font-size: 24px;
    min-width: 24px;
}
.nav-text {
    font-size: 0.95rem;
}
.sidebar.collapsed .nav-text {
    display: none;
}
.sidebar.collapsed .nav-item>a {
    padding: 12px 0;
    justify-content: center;
}
.sidebar-footer {
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    gap: 15px;
}
.sidebar.collapsed .sidebar-footer {
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
}
.sns-icon {
    width: 24px;
    height: 24px;
    fill: var(--color-accent);
    transition: opacity 0.3s;
    display: block;
}
.sns-icon:hover {
    opacity: 0.7;
}
/* Mobile Header */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 900;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    justify-content: space-between;
}
.mobile-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mobile-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
@media (min-width: 1024px) {
    .mobile-header {
        display: none;
    }
}
/* --- Components --- */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 60px;
}
.hero-header {
    width: 100%;
    max-height: 250px;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .hero-header {
        height: 350px;
    }
}
.page-title-section {
    text-align: center;
    padding: 40px 20px 20px;
}
.page-title {
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;

    /* 文字サイズはスマホでもしっかり大きく「1.5rem〜1.8rem」を維持 */
    font-size: clamp(1.4rem, 8.5cqw, 1.8rem);
    line-height: 1.3; /* 2行になった時につまりすぎないように調整 */

    /* 英語の長い単語が来ても、枠を突き抜けずに端で綺麗に折り返す設定 */
    word-break: normal;
    overflow-wrap: break-word; 
}

/* 念のため、親要素（白いボックス等）がコンテナとして動くよう明示 */
.page-title-section {
    container-type: inline-size;
    width: 100%;
}

.page-subtitle {
    color: var(--color-accent);
    /* 1. 中央揃えを絶対死守 */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;

    /* 2. 文字サイズはスマホでもしっかり読める大きさをキープ */
    /* 日本語の時は 0.95rem（約15px）付近の程よい大きさで表示される */
    font-size: clamp(13px, 5.5cqw, 0.95rem);
    
    /* 3. 2行以上になった時の行の間隔（行高）をゆったり広げる */
    line-height: 1.6; 

    /* 4. 英語の単語が変な途中でちぎれないようにするお守り */
    word-break: normal;
    overflow-wrap: break-word; 
    letter-spacing: normal;
}
/* Concept Section */
.concept-section {
    text-align: center;
    padding: 20px 20px;
    max-width: 700px;
    margin: 0 auto;
}
.concept-text {
    line-height: 2;
    margin: 20px 0;
    font-weight: 500;
    color: var(--color-accent);
}

/* スマホ表示（767px以下）での微調整 */
@media (max-width: 767px) {
    .concept-text {
        font-size: 0.9rem;  /* 小さめの画面でも収まりよく */
        line-height: 1.7;    /* スマホでは行間を少し詰め、まとまり感を出す */
        padding: 0 15px;
        margin: 25px 0;
    }
}

.divider-svg {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
    color: var(--color-accent-light);
    opacity: 0.8;
}
.section-title {
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    
    /* 1. スマホでの基本サイズ（日本語ならこれで1行に収まりやすい） */
    font-size: 1.35rem; 

    /* 2. 最強の中央揃えを維持 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    /* 3. 【ここを修正】過剰なロックを解除し、長い単語の破綻だけを防ぐ */
    white-space: normal !important;     /* 改行を許可する */
    word-break: normal;                 /* 英語の単語が途中でブチッと切れるのを防ぐ */
    overflow-wrap: break-word;          /* 枠をどうしても超える超長文は端で折り返す */
    line-height: 1.4;                   /* 2行になったときに文字が重ならないよう隙間を作る */
}

/* PCなどの大画面（1024px以上）では、本来の大きさに戻す */
@media (min-width: 1024px) {
    .section-title {
        font-size: 1.8rem; 
    }
}
.section-title::before,
.section-title::after {
    content: '❄';
    color: var(--color-accent-light);
    margin: 0 10px;
    font-size: 0.8em;
}
/* --- Timeline (More Compact) --- */
.timeline-container {
    position: relative;
    padding-left: 20px;
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    width: 2px;
    background-color: var(--color-timeline-line);
}
.timeline-item {
    position: relative;
    margin-bottom: 60px;
    padding-left: 30px;
}
.timeline-year-marker {
    position: absolute;
    left: -20px;
    top: -30px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-timeline-line);
    z-index: 2;
}
.timeline-year-text {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-accent);
}
/* Grid with smaller cards */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}
/* --- Compact Card Style --- */
.img-card {
    display: block;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s, transform 0.3s;
    border: 1px solid #eee;
}

.img-card:hover {
    box-shadow: 0 10px 25px rgba(25, 25, 112, 0.15);
    transform: translateY(-2px);
}

/* 【枠の役割】箱としての設定 */
.img-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden; /* 中の画像がはみ出さないようにする */
    line-height: 0;
    background-color: #eee; /* 画像読み込み前の色 */
}

/* 【中身の役割】画像そのものの設定 */
.img-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* ズームの滑らかさ */
}

/* ホバー時に「画像だけ」をズーム */
.img-card:hover .img-card-thumb img {
    transform: scale(1.05);
}

/* --- 以下、bodyやtitleなどは既存のまま --- */
.img-card-body {
    padding: 16px;
}
.img-card-tag {
    display: inline-block;
    background: #f0f8ff;
    color: var(--color-accent);
    font-size: 12px; /* 0.7rem から 12px に変更 */
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.img-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--color-accent);
    
    /* 改行と文字の振る舞いを調整 */
    line-height: 1.4;
    word-break: normal;       /* 単語の途中で切らない */
    overflow-wrap: break-word; /* 枠を超える場合は適切に改行 */
}

/* 塊（スパン）ごとの制御 */
.img-card-title span {
    display: inline-block;
    white-space: normal;
}

/* ハイフンが中国語フォントで横長になるのを防ぐ */
.img-card-title .hyphen {
    /* 欧文フォントを優先指定して幅を固定 */
    font-family: "Helvetica Neue", Arial, sans-serif; 
    margin: 0 2px;
    vertical-align: middle;
}
/* 既存のメディアクエリ内、またはCSSの下部に追加 */
@media (max-width: 767px) {
    .img-card-title {
        /* 現在の 0.95rem から 0.85rem（約13.6px）へ微調整 */
        font-size: 0.85rem; 
        
        /* 文字の間隔をわずかに詰めると収まりが良くなります */
        letter-spacing: -0.02em; 
    }

    /* タイトル内のスパンも念のためブロック化を継承 */
    .img-card-title span {
        display: inline-block;
    }
}

/* --- 再生アイコン関連（video-style） --- */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px !important;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 2;
}

.img-card.video-style:hover .play-icon {
    color: #ff0000;
    transform: translate(-50%, -50%) scale(1.1);
}

/* ==========================================
   【修正箇所】画像を最初から明るくする対応
   ========================================== */
.img-card-thumb::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0); /* 完全に透明（明るい状態）に変更 */
    border-radius: inherit;
    transition: background 0.3s;
}

/* ホバーした時に少し暗くするようなエフェクトを入れたい場合は以下を有効に（不要なら丸ごと削除してOK） */
.img-card:hover .img-card-thumb::after {
    background: rgba(0, 0, 0, 0.05); 
}

.img-card.video-style:hover .img-card-thumb::after {
    background: rgba(0, 0, 0, 0);
}
/* ========================================== */

/* --- Video Box (More Space) --- */
.video-box {
    background: #000;
    background-size: cover;      /* 画像を枠いっぱいに広げる */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;
    width: 100%;                 /* 親要素の幅に合わせる */
    aspect-ratio: 16/9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.video-box span.material-symbols-outlined {
    font-size: 64px;
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    user-select: none; /* アイコンが選択されないように */
}

/* ホバー時にアイコンの色を変える */
.video-link:hover .video-box span {
    color: #ff0000; /* YouTube風の赤 */
    transform: scale(1.1);
    transition: all 0.3s ease;
}
/* --- Contact Section --- */
.contact-box {
    margin-top: 80px;
    padding: 40px;
    background: #f9fbfd;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}
/* --- お問い合わせ詳細テキストの調整（左寄せ・多言語対応版） --- */
.contact-description {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #555;
    margin: 0 auto 20px;
    text-align: left; /* ここを左寄せに修正 */
    max-width: max-content; /* 中身の長さに合わせて枠をピタッと縮める */
}

/* テキスト本体：日本語時は1行、翻訳時は安全に自動改行 */
.contact-description p {
    margin: 0;
    display: block; /* インラインブロックをやめて通常のブロックに */
    text-align: left; /* ここも左寄せ */
    word-break: normal;
    overflow-wrap: break-word;
    
    /* 画面幅に合わせて文字サイズを流動的に最適化（2行化を防止） */
    font-size: clamp(11px, 3.8vw, 15px);
}

/* スマホ表示（767px以下）の設定 */
@media (max-width: 767px) {
    .contact-description {
        padding-left: 20px !important;
        padding-right: 20px !important;
        line-height: 1.8;
        max-width: 100%; /* スマホでは画面いっぱいに広げる */
    }
    .contact-description br.pc-only {
        display: none;
    }
}

/* PC大画面（1024px以上）では、文字を本来の適切な大きさに戻す */
@media (min-width: 1024px) {
    .contact-description p {
        font-size: 16px;
    }
}
.contact-btn {
    background: #000;
    color: #fff;
    padding: 14px 36px;
    border-radius: 50px;
    font-size: 1rem;
    white-space: nowrap;
    align-self: center;
    transition: opacity 0.3s;
}
.contact-btn:hover {
    opacity: 0.8;
}
@media (min-width: 768px) {
    .contact-box {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }
}
/* スマホ表示（767px以下）の設定 */
@media (max-width: 767px) {
    .contact-box h3 {
        /* 1.1remだと折り返しやすいので、スマホだけ1rem（16px）に */
        font-size: 1rem !important; 
        
        /* 絶対に折り返さない */
        white-space: nowrap;
        
        /* 文字間をわずかに詰めて収まりを良くする */
        letter-spacing: -0.01em;
        
        /* 中央揃えを維持 */
        text-align: center;
        
        /* 余計な改行ルールをリセット */
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}

/* --- Auto Slider (純粋な無限ループ版) --- */
.auto-slider-container {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    /* 念のため、コンテナ全体でマウスイベントを無視させたい場合は以下を追加
       ただし、クリックイベントなども消えるため、通常は不要 */
}

.auto-slider-track {
    display: flex;
    width: max-content;
    animation: infinity-scroll 200s linear infinite;
}

@keyframes infinity-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.slide-item {
    flex: 0 0 260px;
    margin-right: 24px;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.slide-img {
    width: 100%;
    height: 180px;
    background: #eee;
    object-fit: cover;
    display: block;
    /* 画像自体のホバー効果も無効化 */
    pointer-events: none; 
}

.slide-caption {
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-accent);
    white-space: normal;
    line-height: 1.4;
}
/* --- Credits --- */
.credits-section {
    background: #f9fbfd;
    padding: 30px 20px; /* 余白を少し調整 */
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.creator-list {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 全体を中央に */
}

.creator-item {
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--color-accent);
    width: 100%;
    max-width: 400px; /* 広がりすぎ防止 */
    display: flex;
    justify-content: center; /* 中身を中央寄せ */
    flex-wrap: wrap; /* スマホで入り切らない時に改行を許可 */
    gap: 5px;
}

.creator-link {
    font-weight: 700;
    text-decoration: underline;
    color: var(--color-accent-light);
}
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* --- チーム・クレジットの見出し --- */
.team-col h4 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--color-accent);
    text-align: center;
    /* 1. スマホ表示（初期状態）のサイズをここに集約 */
    font-size: 12px;
    line-height: 1.6; 
}

/* 2. PC版（1024px以上）での上書き設定もここに近くに配置 */
@media (min-width: 1024px) {
    .team-col h4 {
        font-size: 15px; 
        line-height: 1.8; 
    }
}
.team-members {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    font-size: 0.95rem;
    color: #555;
    text-align: center;
}
@media (min-width: 768px) {
    .team-members {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* --- スマホ専用の微調整 --- */
@media (max-width: 767px) {
    .creator-item {
        width: auto;           /* 幅を中身（文字）に合わせる */
        max-width: 100%;       /* 画面からはみ出さない */
        font-size: 0.8rem;     /* さらに少しだけ小さく */
        justify-content: center;
        gap: 6px;              /* 役職と名前の隙間を最小限に */
        border-bottom: none;
        margin: 0 auto 4px;    /* 左右中央に配置し、下の隙間を調整 */
        flex-wrap: nowrap;     /* 絶対に改行させない */
        display: flex;         /* flexの状態を維持 */
    }
    
    .creator-item span, 
    .creator-item a {
        white-space: nowrap;
        flex-shrink: 0; /* 絶対に文字自体を押し潰させない */
    }
}
/* --- Page: Recipe List --- */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (min-width: 768px) {
    .recipe-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.recipe-card {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: box-shadow 0.3s;
    display: block;
}
.recipe-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.recipe-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.recipe-card:hover .recipe-thumb {
    transform: scale(1.05);
}
.recipe-info {
    padding: 12px;
    position: relative;
    z-index: 1;
    background: #fff;
}
.recipe-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-accent);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* 標準プロパティの定義 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
    line-height: 1.4;
}
/* --- Page: Recipe Detail --- */
.detail-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 30px;
}
.nav-arrow-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #eee;
    padding: 10px 24px;
    border-radius: 50px;
    color: var(--color-accent);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-main);
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.nav-arrow-btn:hover {
    background: var(--color-accent);
    color: #fff;
}
.detail-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
@media (min-width: 900px) {
    .detail-container {
        flex-direction: row;
        align-items: flex-start;
    }
}
.detail-main {
    flex: 1;
    width: 100%;
}
.detail-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: #eee;
    border-radius: var(--radius-md);
    object-fit: cover;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.detail-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
    color: var(--color-accent);
}
/* PC・スマホ共通：作者枠をフレックスボックス化 */
.detail-author-flex {
    display: flex;
    align-items: flex-start;   /* 上揃え */
    font-weight: 700;
    margin-bottom: 30px;
    opacity: 0.8;
}

/* 「作者：」の文字幅を固定 */
.author-label {
    flex: 0 0 auto;
    white-space: nowrap;       /* 「作者：」の中での意図しない改行を防ぐ */
}

/* 名前全体のエリア（残りの横幅をすべて使う） */
.author-name-wrap {
    flex: 1 1 auto;
    word-break: keep-all;      /* 名前の途中での改行を防ぐ */
}

.detail-box {
    background: #fff;
    padding: 30px;
    border-radius: var(--radius-md);
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.detail-heading {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-left: 5px solid var(--color-accent);
    padding-left: 15px;
}
.detail-side {
    width: 100%;
}
@media (min-width: 900px) {
    .detail-side {
        width: 320px;
        position: sticky;
        top: 80px;
    }
}
.ingredients-list {
    list-style: none;
    color: var(--color-accent);
}
.ingredient-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #eee;
    padding: 12px 0;
    font-size: 1rem;
}
.ingredient-item:last-child {
    border-bottom: none;
}
.btn-back {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    border: 1px solid var(--color-accent);
    border-radius: 50px;
    color: var(--color-accent);
    font-weight: 700;
    background: #fff;
    margin-top: 30px;
    transition: all 0.3s;
}
.btn-back:hover {
    background: var(--color-accent);
    color: #fff;
}
/* --- Footer --- */
.site-footer {
    text-align: center;
    padding: 60px 20px;
    font-size: 0.85rem;
    color: #888;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: auto;
}
/* Page Visibility (Animation only) */
.page-section {
    animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* サイドバーの年号見出し用クラス */
.nav-year-label {
    padding: 5px 20px 5px; 
    font-size: 0.8rem;
    color: #999;
    font-weight: bold;
    list-style: none;
}

/* PC表示でのメニューボタン */
.pc-menu-btn {
    display: none; /* 初期は非表示 */
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2000;
    background: rgba(25, 25, 112, 0.8); /* 深青色（アクセントカラー） */
    color: white;
    border: none;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

/* --- PC表示（1024px以上）でのレイアウト微調整 --- */
@media (min-width: 1024px) {
    /* メインメニューとサイドバーの連動設定 */
    .pc-menu-btn { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    .sidebar {
        position: fixed;
        top: 65px; 
        left: 20px;
        width: 320px; /* ここでPC版のサイドバーを広げる */
        height: auto;
        max-height: calc(100vh - 100px); 
        overflow-y: auto; 
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1999;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        scrollbar-width: thin;
    }
    /* 以下、PC版のみ「折り返し」を許可する追記 */
    .sidebar .nav-item, 
    .sidebar .nav-text {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.4 !important;
    }
    .sidebar.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    .main-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .sidebar-header { 
        display: none !important; 
    }

    /* ヘッダー画像エリアのPC調整 */
    .hero-area {
        padding-top: 0;
    }

    /* 白いコンテンツボックスのPC調整 */
    .main-content-box {
        margin-top: 20px !important;
    }
}

/* --- 3. ヘッダー画像エリア (hero-area) --- */
/* 画像を囲むエリアの設定 */
.hero-area {
    width: 100%;
    display: flex;         /* 中央寄せを確実にするためflexを使用 */
    justify-content: center;
    overflow: hidden;
    padding-top: var(--header-height);
    line-height: 0;
}

/* 画像自体の設定 */
.hero-area img {
    width: auto;           /* 画像本来の幅を維持する（引き伸ばさない） */
    max-width: 100%;       /* ウィンドウ幅より大きい場合のみ、100%に縮小する */
    height: auto;          /* 縦横比を絶対に維持する */
    margin: 0 auto;        /* これで小さい画像も中央に配置される */
}

@media (min-width: 1024px) {
    .hero-area {
        padding-top: 0;
    }
}
/* --- 4. 白いコンテンツボックス (main-content-box) --- */
.main-content-box {
    width: 90%;
    max-width: var(--content-max-width); 
    /* 画像との隙間をここで調整（例：20px） */
    margin: 20px auto 40px !important; 
    background-color: var(--box-bg-color);
    /* 再び全方向を角丸にして、柔らかい印象にする */
    border-radius: 24px; 
    position: relative;
    z-index: 10;
    padding: 40px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* スマホ表示（1023px以下）のとき、サイドバー内のSNSアイコンを隠す */
@media (max-width: 1023px) {
    .sidebar-footer {
        display: none !important;
    }
}

/* --- 共存設定 --- */

html, body {
    /* overflow-x: hidden は書かない（スワイプを許可するため） */
    width: 100%;
    position: relative;
}

.main-content-wrapper {
    /* 画面全体ではなく、コンテンツの枠内で微調整 */
    overflow-x: clip; 
    width: 100%;
}

/* スライダーの「はみ出し」は、このコンテナの中だけで解決する */
.auto-slider-container {
    width: 100%;
    max-width: 100vw;
    overflow: hidden; /* ここにhiddenがあれば、画面全体のガタつきは起きない */
    touch-action: pan-y; /* 縦スクロールを優先しつつ、横スワイプをJSに渡す */
}

/* サイドバーのスクロールバーを非表示にする */
.nav-list-container::-webkit-scrollbar {
    display: none;
}
.nav-list-container {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
}

/* ==========================================================================
   メインタイトルの折り返し徹底対策（Le restaurant ＊ Yukimin用）
   ========================================================================== */
.main-title {
    white-space: nowrap !important; /* 絶対に途中で折り返さない命令 */
}

/* 画面幅が480px以下のスマホ向けの調整 */
@media (max-width: 480px) {
    .main-title {
        /* vw（ビューポート幅）を組み合わせることで、
           スマホの画面幅に合わせて文字サイズが自動的に限界まで縮小 */
        font-size: clamp(1.2rem, 6.5vw, 1.8rem) !important;
        letter-spacing: -0.01em !important; /* 文字同士の間隔をほんのわずかに引き締める */
    }
}

/* ==========================================================================
   モバイルヘッダーロゴのサイズ調整（アイコン被り防止）
   ========================================================================== */
/* モバイルヘッダーロゴの調整（2行折り返し許容・サイズ維持版） */
@media (max-width: 480px) {
  .mobile-header {
    /* ヘッダーの高さを少しだけ柔軟にして、2行になっても収まるようにする */
    height: auto !important;
    min-height: var(--header-height);
    padding: 5px 12px !important;
  }

  .mobile-header .sidebar-logo {
    /* フォントサイズを元の 1.1rem 付近に固定 */
    font-size: 1.05rem !important; 
    white-space: normal !important;   /* 改行を許可 */
    line-height: 1.2 !important;      /* 2行になった時の行間をスッキリさせる */
    max-width: 150px;                 /* アイコンにぶつかる前に改行させる */
    word-break: break-word;           /* 英語の単語が長すぎれば途中で切る */
    display: flex;
    align-items: center;
    flex: 1;                          /* ロゴエリアを可能な限り広げる */
  }

  /* アイコンエリアを右端に固定 */
  .mobile-header-right {
    flex-shrink: 0;
    gap: 10px !important;
    margin-left: 5px;
  }
}

/* Zen Old Mincho を適用するクラス */
.font-zen-old-mincho {
  font-family: "Zen Old Mincho", serif;
}

/* PC版のみタイトルを2倍のサイズにする */
@media (min-width: 1024px) {
  .highlight-title {
    font-size: 2em; /* 現行のフォントサイズの2倍 */
    display: inline-block;
    line-height: 1.2; /* サイズが大きくなった分、行間を調整 */
  }
}

/* === ここから新規追加 === */
.concept-lead {
    display: inline-block; /* 綺麗に配置を保つため */
    font-size: 1.15rem;    /* 基本サイズの1.15倍（約18.4px）で「気持ち大きく」 */
    font-weight: 700;      /* 少しだけ太くしてメリハリをつける */
    margin-bottom: 5px;    /* 下の行との間隔をほんの少し広げる */
}

/* スマホ表示（767px以下）での微調整 */
@media (max-width: 767px) {
    .concept-text {
        font-size: 0.9rem;  /* 元々あったスマホ用の指定（約14.4px） */
        line-height: 1.7;    
        padding: 0 15px;
        margin: 25px 0;
    }
    /* スマホでも「周りより一回り大きい状態」を維持させる */
    .concept-lead {
        font-size: 1.05rem; /* スマホのconcept-textに対して「気持ち大きい」サイズ（約16.8px） */
    }
}