/* --- Base Reset & Global Styles --- */
body {
    margin: 0; /* ブラウザ標準の余白を消去 */
    padding: 0;
    background-color: #fff; /* 左右の余白がグレーにならないよう白に修正 */
    overflow-x: hidden; /* 横スクロールの発生を防止 */
}

/* PC/スマホ 表示切り替えユーティリティ */
.sp-only {
    display: none !important;
}
.pc-only {
    display: block !important;
}

/* --- Header Styles --- */
.site-header {
    width: 100%;
    background-color: #fff;
    padding: 30px 0; /* ヘッダーの上下余白を半分に調整 */
    position: relative; /* ロゴの基準点 */
    z-index: 100; /* メインビジュアルより上に表示 */
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center; /* ナビゲーションを中央に配置 */
    align-items: center;
}

/* ロゴを左端に固定し、大きくして下にはみ出させる */
.header-logo {
    position: absolute;
    left: 20px; /* 左端からの距離 */
    top: 15px;  /* ヘッダーの縮小に合わせて調整 */
}

.header-logo img {
    height: 120px; /* ロゴを大きく設定（デザインに合わせて調整してください） */
    width: auto;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); /* 重なった時に見やすくする影（任意） */
}

.header-nav {
    display: flex;
    justify-content: center;
}

.nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.1em; /* 少し広げてアーティスト感を */
    padding: 10px 20px;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.nav-list li a:hover {
    color: #888;
    opacity: 0.8;
}

/* 縦線の調整 */
.nav-list li.divider {
    width: 1px;
    height: 18px;
    background-color: #333;
    margin: 0;
}

/* PCではハンバーガーボタンとスマホ用ナビを隠す */
.menu-trigger,
#spNav {
    display: none;
}

/* スマホ時のハンバーガー表示設定 */
@media (max-width: 768px) {
    /* 表示切り替えのレスポンシブ対応 */
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: block !important;
    }

    .menu-trigger {
        display: block !important; /* 強制的に表示 */
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 1001; /* メニュー(999)より上に */
        width: 30px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
    }
    .menu-trigger span {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: all 0.4s;
    }
    .menu-trigger span:nth-child(1) { top: 0; }
    .menu-trigger span:nth-child(2) { top: 11px; }
    .menu-trigger span:nth-child(3) { bottom: 0; }

    /* オープン時のアニメーション（バツ印に変形） */
    .menu-trigger.is-active span:nth-child(1) { transform: translateY(11px) rotate(-45deg); }
    .menu-trigger.is-active span:nth-child(2) { opacity: 0; }
    .menu-trigger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(45deg); }

    /* PC用ナビゲーションを隠す */
    .header-nav:not(#spNav) {
        display: none !important;
    }

    /* スマホ用ナビゲーションのベース（初期は非表示） */
    #spNav {
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #E9E4E4;
        z-index: 999;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 開いた時の表示（IDセレクタ＋クラスで優先順位を上げる） */
    #spNav.is-open {
        display: flex !important;
    }

    #spNav .nav-list {
        flex-direction: column;
        gap: 20px; /* メニュー項目間の余白 */
    }

    #spNav .nav-list li a {
        font-size: 1.2rem; /* PC版の20pxに近いサイズに調整 */
        padding: 4.5px 0; /* 上下のパディングを少し狭く */
        display: inline-block; /* アニメーションが効くように変更 */
        text-align: center;
        color: #333;
        font-weight: 300; 
        letter-spacing: 0.1em; /* HOMEページと同じレタースペーシングを適用 */
        text-decoration: none;
        transition: color 0.3s ease, opacity 0.3s ease;
    }

    /* ホバー時の色変化 */
    #spNav .nav-list li a:hover {
        color: #888;
        opacity: 0.8;
    }
}

/* スマホのみカルーセル構造を解除 */
@media (max-width: 768px) {
    .section-container {
        padding: 0 20px !important; /* 余白を減らして横幅を広く確保 */
    }

    .nav-panels {
        padding: 60px 60px !important; /* EVENTセクションと左右の余白を合わせる */
    }

    .event-carousel-wrapper {
        padding: 0 !important;
        display: block !important;
    }

    .event-carousel {
        display: flex !important;
        flex-direction: column !important; /* 縦並びを強制 */
        overflow: visible !important;
        height: auto !important; /* 高さを自動調整に強制 */
        gap: 30px !important; /* 記事間の余白 */
    }

    .event-card {
        display: block !important; /* 全て一旦表示 */
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        opacity: 1 !important; /* アニメーション待ちを解除 */
        visibility: visible !important;
        transform: none !important;
    }

    /* 4件目以降を非表示にする（最新3件のみ残す） */
    .event-carousel .event-card:nth-child(n+4) {
        display: none !important;
    }

    /* 矢印ボタンを隠す */
    .carousel-prev, .carousel-next {
        display: none;
    }

    .site-header {
        background-color: transparent !important;
        position: absolute !important;
        width: 100%;
        top: 0;
        left: 0;
        padding: 0 !important;
        z-index: 1000;
    }

    .header-logo {
        position: absolute !important;
        top: 20px !important; /* 25pxから20pxに修正。!importantを忘れずに */
        left: 20px !important;
        z-index: 1001;
    }
    .header-logo img {
        height: 60px !important; /* スマホ版のロゴを80pxから60pxに縮小 */
    }
    .header-container {
        flex-direction: column !important;
    }
    .nav-list li.divider {
        display: none !important;
    }
}

/* --- Main Visual --- */
.main-visual {
    width: 100%;
    overflow: hidden;
    line-height: 0; /* 画像下の謎の隙間を消す */
}

.mv-container {
    width: 100%;
}

.mv-image {
    width: 100%;
    height: auto;
    object-fit: cover; /* 画面サイズが変わっても比率を維持して埋める */
    display: block;
}

/* 少し動きを出すなら：ふわっと表示させるアニメーション */
.mv-image {
    animation: fadeIn 1.5s ease-out;
}

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

/* --- Home EVENT Section --- */
.home-event {
    padding: 60px 0;
    background-color: #fff;
}

.section-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* タイトルとMORE */
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #333; /* 2pxから1pxに変更 */
    margin-bottom: 40px;           /* 余白をpage-titleに合わせる */
    padding-bottom: 20px;          /* 下線までの距離を調整 */
}

.section-title {
    font-size: 3rem;               /* 2.5remから3remに拡大 */
    font-style: italic;
    margin: 0;
    font-weight: 200;              /* normalから200(細身)に変更 */
}

.more-link {
    text-decoration: none;
    color: #333;
    font-size: 1.2rem; /* 文字サイズはお好みで調整してください */
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* 文字と丸の間の距離 */
    transition: opacity 0.3s ease;
}

/* 丸と矢印のデザイン */
.more-link::after {
    content: '';
    display: inline-block;
    width: 30px;  /* 丸のサイズ */
    height: 30px; /* 丸のサイズ */
    border: 1px solid #333; /* 丸の線 */
    border-radius: 50%; /* 正円にする */
    position: relative;
    
    /* 矢印（＞）を背景画像として配置 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px; /* 矢印の大きさ */
}

/* ホバー時の演出（少し薄くする） */
.more-link:hover {
    opacity: 0.7;
}

/* カルーセルレイアウト */
.event-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 50px; /* 矢印のスペース */
}

.event-carousel {
    display: flex;
    overflow-x: hidden; /* はみ出た分を隠す（これで3枚だけ見える） */
    scroll-behavior: smooth;
    gap: 20px; /* カード同士の隙間 */
    width: 100%;
}

/* カルーセル内のカードサイズ調整 */
.event-slider {
    padding: 20px 50px; /* 矢印ボタンが重ならないための余白 */
    overflow: hidden;
}

.event-slider .event-thumbnail {
    width: 100%;
    height: 250px; /* Figmaの比率に合わせて調整 */
}

/* 矢印の位置調整（お好みで） */
.swiper-button-prev, .swiper-button-next {
    color: #333;
    top: 60%; /* 画像の中央あたりに来るように調整 */
}

/* カードのデザイン */
.event-card {
    flex: 0 0 calc(33.333% - 14px); /* 3枚並べて隙間を引いたサイズ */
    min-width: calc(33.333% - 14px);
    box-sizing: border-box;
}

.event-card a { text-decoration: none; color: inherit; }

.event-date-box {
    background-color: #ccc; /* グレー背景 */
    padding: 5px 10px;
    width: 100%;           /* カードの幅に合わせる */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
    display: block;
    margin-bottom: 5px;    /* 下のタイトルとの隙間 */
}

.day-text { color: #f00; } /* 日曜などで色を変える場合はここ */

.event-item-title {
    font-size: 0.9rem;
    margin: 10px 0;
    line-height: 1.4;
    height: 2.8em; /* 2行分確保 */
    overflow: hidden;
}

.event-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* 矢印ボタン */
.carousel-prev, .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
}

.carousel-prev { left: -60px; }
.carousel-next { right: -60px; }


/* --- Navigation Panels --- */
.nav-panels {
    padding: 60px 30px;
    background-color: #e6e4e2; /* 画像の背景色に近いグレー */
    background-color: #E9E4E4; /* 背景色を統一 */
}

.panels-container {
    max-width: 1000px; /* デザインに合わせて調整 */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 15px; /* パネル間の隙間 */
}

.panel-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    overflow: hidden;
    text-decoration: none;
}

.panel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease; /* ホバー時のズーム用 */
}

.panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 初期状態の暗さ */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.panel-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    border-bottom: 3px solid #fff; /* 下線 */
    padding-bottom: 5px;
    margin: 0;
    letter-spacing: 0.05em;
}

/* --- SNS Section --- */
.sns-section {
    padding: 80px 0;
    background-color: #e6e4e2; /* ナビゲーションパネルと同じ背景色 */
    background-color: #E9E4E4; /* 背景色を統一 */
    text-align: center;
}

/* アニメーション用ベースクラス */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 追加：テキストを遅れて表示させるためのディレイ */
.reveal-delay {
    transition-delay: 0.4s;
}

.sns-message {
    font-size: 2rem;
    font-style: italic;
    font-weight: 200; /* ABOUTヘッダーと統一 */
    color: #333;
    margin-bottom: 30px;
}

.sns-icons {
    display: flex;
    justify-content: center;
    gap: 40px; /* アイコン同士の間隔 */
    align-items: center;
}

.sns-link {
    font-size: 3rem; /* アイコンの大きさ */
    color: #000;
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sns-link:hover {
    transform: translateY(-5px); /* ホバー時に少し浮かす */
    opacity: 0.7;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .sns-message {
        font-size: 1.5rem;
    }
    .sns-icons {
        gap: 25px;
    }
    .sns-link {
        font-size: 2.2rem;
    }
}

/* --- Footer Styles --- */
.site-footer {
    padding: 60px 0 20px;
    background-color: #e6e4e2; /* SNSセクションと同じ背景色 */
    background-color: #E9E4E4; /* 背景色を統一 */
    border-top: 1px solid #ccc; /* 上部の区切り線 */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* すべての要素を右側に寄せる */
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.footer-menu li {
    margin-bottom: 8px; /* メニュー間の上下余白 */
}

.footer-menu li a {
    text-decoration: none;
    color: #333;
    font-size: 1.5rem;
    font-weight: 300; /* 細身のフォント */
    font-style: italic; /* 斜体 */
    letter-spacing: 0.05em;
    transition: color 0.3s ease, opacity 0.3s ease;
    display: inline-block; /* アニメーションを有効にする */
}

/* フッターリンクのホバー時色変化 */
.footer-menu li a:hover {
    color: #888;
    opacity: 0.8;
}

.copyright {
    margin-top: 40px;
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 0.1em;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .footer-container {
        align-items: flex-end; /* 右寄せに修正 */
    }
    .footer-menu {
        text-align: right;
    }
}

/* --- Fixed Online Shop Banner --- */
.fixed-online-shop {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* 画面の上下中央に配置 */
    background-color: #FFA657; /* スクショに近い水色（好みに合わせて調整してください） */
    color: #333;
    text-decoration: none;
    padding: 28px 12px; /* 上下の余白で長さを調整 */
    z-index: 9999; /* 他の要素より最前面に */
    border-radius: 5px 0 0 5px; /* 左側だけ少し角を丸める */
    box-shadow: -2px 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.fixed-online-shop .vertical-text {
    writing-mode: vertical-rl; /* 縦書き（右から左） */
    text-orientation: mixed;   /* 英字を正立させる */
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    display: block;
    white-space: nowrap;
}

/* ホバー時の演出：少し左に飛び出す */
.fixed-online-shop:hover {
    padding-right: 30px;
    background-color: #FF902D;
}

/* スマホでは邪魔になる場合があるので少し小さくするか非表示に */
@media (max-width: 768px) {
    .fixed-online-shop {
        padding: 10px 5px; /* タップしやすいように上下左右の余白を確保 */
        min-width: 15px;    /* バナーが細く潰れすぎないように最小幅を固定 */
        display: flex;      /* 内部の配置を安定させる */
        justify-content: center;
    }
    .fixed-online-shop .vertical-text {
        font-size: 0.9rem;  /* 文字が小さすぎて読めない・潰れるのを防ぐ */
    }
}

/* --- Hover Effects --- */
.panel-item:hover .panel-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* ホバー時にさらに暗く */
}

.panel-item:hover .panel-image {
    transform: scale(1.05); /* 控えめにズーム */
}

/* スマホ対応 */
@media (max-width: 600px) {
    .panels-container {
        grid-template-columns: 1fr; /* 1列にする */
    }
    .panel-title {
        font-size: 1.8rem;
    }
}

/* --- ABOUT --- */
/* アーティストヘッダー全体の調整 */
.about-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 30px;
    font-weight: 200;
    font-style: italic;
}

/* 背景色の設定と全体の余白 */
.about-container {
    background-color: #fff; /* 背景色を白に修正 */
    padding: 80px 0;
    width: 100%;
}

/* 画面全体の右側にコンテンツを寄せる */
.about-inner {
    max-width: 1200px; /* 全体の最大幅 */
    margin-left: auto; /* 左側に大きな余白を作る */
    margin-right: 20%;  /* 右側の微調整 */
    padding: 0 20px;
    max-width: 1100px; /* コンテンツ全体の最大幅 */
    margin: 0 auto;
    padding: 0 40px;
}

/* 本文の流し込み（横並びの維持） */
.about-flex {
    display: flex;
    justify-content: center; /* 中央付近に配置 */
    align-items: flex-start;
    gap: 60px; /* 画像とテキストの間の距離 */
}

.about-image {
    flex: 0 0 450px; /* 画像の横幅を指定（Figmaのサイズに合わせて調整してください） */
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 80px 0 80px;
    box-shadow: -15px 15px 0 0 #444;
    margin-left: 15px; 
    margin-bottom: 15px;
}

.about-text-content {
    flex: 1;
    max-width: 650px; /* テキストが広がりすぎないように制限 */
    flex: 0 0 800px; /* テキストボックスの横幅を固定(PC版) */
    max-width: 100%;
    text-align: left; /* テキスト全体の基本配置（left / center / right） */
}

/* アーティストヘッダー（Artist HAYATO 部分） */
.about-header {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 30px;
    font-weight: 200;
    font-style: italic;
    justify-content: flex-start; /* ヘッダー内の配置（flex-start / center / flex-end） */
    justify-content: flex-start; /* ヘッダー内の配置を左寄せに */
}

.header-Artist {
    font-size: 40px; /* Artist のサイズ */
    color: #666;
}

.header-HAYATO {
    font-size: 80px; /* HAYATO のサイズ */
    color: #333;
}

/* ABOUT本文 */
.about-body {
    font-size: 20px; /* 本文のフォントサイズ */
    line-height: 2;   /* 行間 */
    color: #333;
    text-align: justify; /* 両端揃え（left / center / right / justify） */
}

/* YouTubeセクション全体の余白 */
.about-video {
    margin: 80px auto;
    display: flex;
    justify-content: center; /* 中央配置 */
}

/* 白い外枠のデザイン */
.video-outer-frame {
    background-color: #fff; /* 白枠 */
    padding: 10px;          /* 枠の太さ */
    border-radius: 15px;    /* 角丸 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* 軽い影（お好みで） */
    max-width: 700px;       /* 動画の最大サイズ */
    width: 90%;
}

/* 動画自体のレスポンシブ対応 */
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 の比率を確保 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

/* iframeだけでなく、WPが生成するラッパーdiv等も対象にする */
.video-container iframe,
.video-container object,
.video-container embed,
.video-container > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* 横幅を親いっぱいに */
    height: 100% !important; /* 高さを親いっぱいに */
    border: 0;
}

/* Fanbook誘導文のスタイル */
.about-fanbook {
    text-align: center;
    margin-bottom: 100px;
}

.fanbook-lead {
    font-size: 20px; /* Fanbookテキストのサイズ */
    text-align: center;
    color: #333;
    margin-bottom: 10px;
}

.fanbook-link {
    color: #333; /* 元の色に戻す */
    text-decoration: none;
    font-size: 1.2rem;
    display: inline-block;
}

.fanbook-link:hover {
    opacity: 0.7;
}

/* スマホ対応：縦に並べる */
/* ==========================================
   --- ABOUT (スマホ版設定) ---
========================================== */
@media (max-width: 768px) {
    .about-flex {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .about-text-content {
        flex: 1;
        flex: 1; /* 横幅いっぱいに */
        width: 100%;
        text-align: center; /* スマホでは中央寄せが綺麗です */
    }

    .about-header {
        justify-content: center; /* ヘッダーも中央寄せ */
        margin-bottom: 20px;
    }

    .header-HAYATO {
        font-size: 48px; /* スマホ版HAYATOサイズ */
    }
    .header-Artist {
        font-size: 24px; /* スマホ版Artistサイズ */
    }

    .about-body {
        font-size: 14px; /* スマホ版本文サイズ */
        text-align: left; /* スマホ本文は左寄せの方が見やすい場合が多いです */
    }

    .fanbook-lead {
        font-size: 12px; /* スマホ版Fanbookテキストのサイズ */
        text-align: center;
    }
}

/* --- WORKS --- */
.works-container {
    width: 100%;
    background-color: #fff;
    padding: 80px 0 20px; /* 上部余白を80pxに増やしてロゴ被りを防止 */
    box-sizing: border-box;
    overflow: visible;
}

.works-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.page-title {
    font-size: 3rem;
    font-weight: 200;
    font-style: italic;
    margin-bottom: 80px;      /* 線から下の要素（最初の作品）までの余白 */
    padding-bottom: 20px;    /* 文字から線までの余白 */
    border-bottom: 1px solid #333; /* アンダーライン（太さと色） */
    width: 100%;             /* 画面端まで伸ばす */
}

/* 共通のレイアウト（基本は画像が左） */
.works-item {
    display: flex;
    align-items: center;
    margin-bottom: 150px;
    gap: 8%;
}

/* 偶数番目（2, 4, ...）を反転させる */
.works-item.is-reverse {
    flex-direction: row-reverse;
}

.works-image {
    flex: 0 0 50%;
}

.works-image img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: 0 80px 0 80px;
    box-shadow: -15px 15px 0 0 #444;
    
    margin-left: 15px; 
    margin-bottom: 15px;
}

.works-content {
    flex: 1;
    text-align: center; /* テキストを中央揃え */
}

/* テキストの個別サイズ指定 */
.works-title {
    font-size: 48px; /* 指定サイズ */
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1.2;
}

.works-subtitle {
    font-size: 18px; /* 指定サイズ */
    color: #333;
    margin-bottom: 40px;
}

.works-text {
    font-size: 18px; /* 指定サイズ */
    line-height: 1.6;
    color: #333;
    margin-bottom: 55px;
    white-space: pre-wrap; /* 管理画面の改行を反映 */
}

/* モバイル対応（スマホでは全部縦に並べる） */
@media (max-width: 768px) {
    .works-item, .works-item.is-reverse {
        flex-direction: column;
        margin-bottom: 80px;
    }
    .works-image {
        width: 100%;
        margin-bottom: 30px;
        width: 85%; /* 影(box-shadow)が画面外にはみ出さないよう少し幅を絞る */
        margin: 0 auto 30px; /* 画像エリア全体を中央に配置 */
    }
    .works-image img {
        margin-left: 0; /* PC版の左オフセットをリセットして中央寄せを正しく反映 */
    }
    .works-title { font-size: 32px; }
    .works-subtitle, .works-text { font-size: 18px; }
    .works-subtitle { font-size: 18px; }
    .works-text { font-size: 14px; } /* スマホ版のテキストサイズを14pxに変更 */
}

/* --- FANBOOK --- */
.fanbook-container {
    width: 100%;
    background-color: #fff; /* 背景色を全幅で白色に */
    padding: 80px 0 20px; /* page-works.phpに合わせて40pxに統一 */
    box-sizing: border-box;
    overflow: visible;
}

.fanbook-inner {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px; 
    box-sizing: border-box;
}

/* 上部レイアウト */
.fb-intro-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 100px;
}

.fb-intro-text { flex: 1; text-align: center; }
.fb-intro-image { flex: 1; }
.fb-intro-image img { width: 100%; height: auto; }
.fb-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 80px 0 80px;
    box-shadow: -15px 15px 0 0 #444;
    margin-left: 15px;
    margin-bottom: 15px;
}

.fb-title {
    font-size: 48px;
    font-weight: bold;
    margin-top: 0;      /* PC版の上余白 */
    margin-bottom: 5px; /* PC版の下余白 */
}
.fb-subtitle { font-size: 18px; color: #666; margin-bottom: 40px; }
.fb-text-1 { font-size: 20px; white-space: pre-wrap; margin-bottom: 30px; }
.fb-text-2 { font-size: 18px; line-height: 1.8; white-space: pre-wrap; margin-bottom: 20px; display: inline-block; text-align: left; }
.fb-text-3 { font-size: 20px; }

/* 特典セクション */
.fb-benefits {
    text-align: center;
    margin-bottom: 100px;
}

.fb-benefits-lead { font-size: 24px; margin-bottom: 40px; line-height: 1.6; }

.fb-benefits-box {
    background-color: #E9E4E4;
    padding: 0px 25px 25px 25px; /* 上部の余白を小さく調整 (例: 15px) */
    border-radius: 20px;
    display: inline-block;
    width: 100%;
    max-width: 700px;
    margin-bottom: 40px;
    box-sizing: border-box; /* パディングによる横幅の突き抜けを防止 */
}

.fb-benefits-title { font-size: 38px; margin-bottom: 20px; }
.fb-benefits-content { font-size: 20px; line-height: 1.0; white-space: pre-wrap; text-align: left; display: inline-block; }

.fb-benefits-note { font-size: 20px; margin-bottom: 20px; line-height: 1.6; }
.fb-benefits-next { font-size: 24px; color: #002AFF; margin-bottom: 50px; }

.fb-buy-btn .more-link {
    font-size: 20px;
}

/* 下部ギャラリー */
.fb-gallery-flex {
    display: flex;
    gap: 30px;
    margin-bottom: 100px;
}

.fb-gallery-image { flex: 1; }
.fb-gallery-image img {
    width: 100%;
    height: auto;
    /* Worksと同じ画像加工を適用する場合 */
    display: block;
    border-radius: 0 80px 0 80px;
    box-shadow: -15px 15px 0 0 #444;
    margin-left: 15px;
    margin-bottom: 15px;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .fb-intro-flex, .fb-gallery-flex { flex-direction: column; }
    .fb-title { font-size: 32px; }
    .fb-benefits-box { padding: 5px 20px 20px 20px; }
    .fb-benefits-lead { font-size: 16px; }
    .fb-benefits-title { font-size: 24px; }
    .fb-benefits-note { font-size: 16px; }
    .fb-benefits-next { font-size: 18px; }

    /* fb-intro-image を画面中央に配置 */
    .fb-intro-image {
        flex: none; /* flex: 1; をリセットして幅を制御可能にする */
        width: 90%; /* 適度な幅に調整 */
        max-width: 400px; /* 最大幅を設定 */
        margin: 0 auto; /* 中央寄せ */
    }

    /* テキストサイズをスマホだけ14pxとする */
    .fb-text-1,
    .fb-text-2,
    .fb-text-3 {
        font-size: 14px;
    }
    /* --- FANBOOK スマホ版並び順制御 --- */
    .fanbook-container {
        display: flex;
        flex-direction: column;
        padding: 80px 20px 60px; /* page-works.phpの40pxに合わせる */
        box-sizing: border-box; /* 横幅計算を正確にする */
        overflow: visible; /* 固定要素（オーバーレイ）の表示を妨げない */
    }

    /* 中間のラッパーをレイアウトから除外し、子要素を直接並べる */
    .fanbook-inner, .fb-intro, .fb-intro-flex, .fb-intro-text, .fb-description,
    .fb-benefits, .fb-gallery, .fb-gallery-flex {
        display: contents;
    }

    /* 各要素の順序指定 */
    .fb-title {
        order: 1;
        margin-top: 0px;    /* スマホ版の上余白 */
        margin-bottom: 10px; /* スマホ版の下余白 */
    }
    .fb-subtitle { order: 2; margin-bottom: 30px; padding-top: 0px; padding-bottom: 15px; }
    .fb-intro-image { order: 3; margin: 0 auto 50px; width: 90%; max-width: 400px; } /* fb_image_1 */
    .fb-text-1 { order: 4; margin-bottom: 20px; }
    .fb-text-2 { order: 5; margin-bottom: 20px; text-align: left; display: block; max-width: 400px; margin-left: auto; margin-right: auto; white-space: pre-wrap; }
    .fb-text-3 { order: 6; margin-bottom: 60px; }
    .fb-img-2 { order: 7; margin: 0 auto 40px; width: 90%; max-width: 400px; } /* fb_image_2 */
    .fb-benefits-lead { order: 8; margin-bottom: 30px; }
    .fb-benefits-box { order: 9; margin: 0 auto 30px; display: block; }
    .fb-benefits-content { font-size: 14px; line-height: 1.4; white-space: normal; display: block; text-align: left; }
    .fb-benefits-note { order: 10; margin-bottom: 20px; }
    .fb-benefits-next { order: 11; margin-bottom: 40px; }
    .fb-buy-btn { order: 12; margin-bottom: 60px; }
    .fb-img-3 { order: 13; margin: 0 auto 40px; width: 90%; max-width: 400px; } /* fb_image_3 */

    /* 中央寄せの強制 */
    .fb-intro-image img, .fb-gallery-image img {
        margin: 0 auto;
        margin-left: 0;
        margin-right: auto;
        display: block;
    }

    /* 不要になった箇所のクリア */
    .fb-intro-image {
        width: 90%;
        max-width: 400px;
        margin: 0 auto 30px;
    }
}

/* --- Archive EVENT --- */
.archive-event {
    padding: 112px 20px 100px !important;
    background-color: #fff; /* 背景を白に統一 */
    max-width: 1200px; /* Works, Fan Bookのコンテンツ幅に合わせる */
    margin: 0 auto;
    box-sizing: border-box;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* ★ここ！カード同士の左右・上下の余白を広げます */
    margin-top: 40px;
}

/* ページネーションのデザイン */
.pagination {
    text-align: center;
    margin-top: 60px;
}

.pagination .page-numbers {
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    margin: 0 5px;
}

.pagination .current {
    background-color: #333;
    color: #fff;
}

.event-thumbnail {
    width: 100%;
    height: 200px; /* 高さを固定 */
    overflow: hidden;
}

.event-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保って切り抜き */
    transition: transform 0.3s ease; /* ★追加：ホバー時の動きを滑らかに */
}

.event-card:hover .event-thumbnail img {
    transform: scale(1.1); /* ホバー時に少しズームする演出 */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .archive-event {
        padding: 110px 20px 60px !important; /* page-works.phpの40pxに合わせる */
    }

    .event-grid {
        grid-template-columns: repeat(1, 1fr); /* スマホは1枚 */
        gap: 40px; /* 縦に並んだカード同士の余白を少し広げる */
    }

    /* 投稿詳細ページのスマホ用余白調整 */
    .post-detail {
        padding: 40px 20px 40px !important; /* page-works.phpの40pxに合わせる */
    }
}

/* 詳細ページ全体のレイアウト */
.post-detail {
    max-width: 800px; /* 本文を読みやすくするために幅を制限 */
    margin: 0 auto;
    padding: 80px 20px 60px !important; /* PC版ロゴ被り防止 */
    background-color: #fff; /* 背景を白に統一 */
}

.post-header {
    margin-bottom: 30px;
}

.post-meta {
    font-size: 0.9rem;
    color: #888;
}

.post-footer {
    margin-top: 80px;
    margin-bottom: 60px;
    text-align: center;
}

.post-title {
    font-size: 2rem;
    margin-top: 10px;
}

/* 本文内の画像がはみ出さないように設定 */
.post-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* 記事本文のテキスト調整 */
.post-content {
    line-height: 1.8;
    letter-spacing: 0.05em;
    font-size: 1.1rem;
}

/* ナビゲーション（前後の記事） */
.post-navigation {
    margin-bottom: 40px;
}

.nav-links {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center;
    gap: 40px;
    min-height: 1.5em; /* リンクが片方消えても高さが維持されるように */
}

/* リンクがない時もスペースを確保したい場合、aタグに幅を持たせるのも手です */
.nav-previous,
.nav-next {
    flex: 1; 
}

.nav-links a {
    text-decoration: none;
    color: #888;
    text-align: center;
}

.nav-links a:hover {
    color: #333; /* ホバーで少し濃く */
}

.nav-arrow {
    font-family: serif; /* 矢印を少しオシャレな形に */
    font-size: 1.4rem;
}

/* Back to LIST ボタン */
.back-to-list-container {
    display: flex;
    justify-content: center;
}

.btn-back {
    display: inline-block;
    padding: 8px 40px; /* 全体的に余白を削ってコンパクトに */
    border: 1px solid #333; /* 細い黒枠 */
    border-radius: 50px; /* カプセル型 */
    text-decoration: none;
    color: #333;
    font-size: 0.9rem; /* 文字サイズを少し小さく調整 */
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background-color: #333;
    color: #fff; /* ホバーで反転 */
}

/* CONTACT */
.contact-container {
    width: 100%;
    background-color: #fff; /* 背景色を全幅で白色に */
    padding: 80px 0;
    box-sizing: border-box;
    overflow: visible;
}

.contact-inner {
    max-width: 800px; /* コンテンツの最大幅 */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-lead {
    text-align: center;
    font-size: 18px;
    margin-bottom: 60px;
    line-height: 1.8;
}

/* フォームの各項目 */
.contact-form-item {
    margin-bottom: 30px;
}

.contact-form-item label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}

.contact-form-item label span {
    background: #ff0000;
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}

/* 入力欄のデザイン */
.wpcf7-form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* テキストエリアの高さ */
textarea.wpcf7-form-control {
    height: 200px;
}

/* 送信ボタン（more-linkを継承） */
.contact-form-submit {
    text-align: center;
    margin-top: 50px;
}

.contact-form-submit .more-link {
    border: 1px solid #333;
    background: #fff;
    cursor: pointer;
    padding: 15px 60px;
    transition: all 0.3s;
}

.contact-form-submit .more-link:hover {
    background: #333;
    color: #fff;
}