@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Noto+Sans+JP:wght@300;500;700&display=swap');

/* ==========================================================================
   ZOOM説明会 アーカイブ 共通スタイル（全アーカイブページで共通）
   配置先: /ast/css/14/zoom-archive-common.css
   ========================================================================== */


/* ================================================
   live_seminar.css
   ================================================ */
/* ==========================================================================
   live_seminar.css — 製品説明会 共通 + 一覧 + 個別 スタイル
   archive-live_seminar.php / single-live_seminar.php 用
   ========================================================================== */

body {
    margin: 0; padding: 0;
    background-color: #f5f5f0;
    color: #2d2d2d;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    position: relative;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 9998;
}

.upper-white-area {
    background-color: #ffffff;
    width: 100%;
    position: relative;
    padding-bottom: 20px;
}

.main-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 50px;
}

/* --- ヘッダー画像 --- */
.wp-header-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    line-height: 0;
    position: relative;
    overflow: hidden;
}
.wp-header-image picture {
    display: block;
    width: 100%;
    line-height: 0;
}
.wp-header-image img {
    width: 100%;
    height: auto;
    display: block;
}
.wp-header-image .is-pc { display: none; }

@media (min-width: 768px) {
    .wp-header-image .is-sp { display: none; }
    .wp-header-image .is-pc { display: block; }
}

.wp-header-kin-wrap {
    position: absolute;
    bottom: 0;
    right: 20px;
    transform: translateY(100%);
    animation: kinPopUp 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}
.wp-header-kin {
    display: block;
    width: 13vw;
    max-width: 50px;
}
@keyframes kinPopUp {
    to { transform: translateY(0); }
}
/* PCのみ（タブレット768〜1024pxは対象外）：きんちゃんを2倍サイズに */
@media (min-width: 1025px) {
    .wp-header-kin {
        width: 26vw;
        max-width: 100px;
    }
}
/* きんちゃん左上の吹き出し（スマホ・タブレット・PC共通） */
.kin-speech-bubble {
    position: absolute;
    top: -6px;
    left: 0;
    opacity: 0;
    transform: translate(-85%, -100%) scale(0.85);
    background: #ffffff;
    color: #1a2a40;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(26, 42, 64, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 3;
    /* きんちゃんのポップアップ完了(遅延0.6s+0.75s=1.35s)後にフェードイン */
    animation: kinBubbleIn 0.35s ease-out 1.35s forwards;
}
@keyframes kinBubbleIn {
    to {
        opacity: 1;
        transform: translate(-85%, -100%) scale(1);
    }
}
.kin-speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -5px;
    right: 16px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #ffffff;
}
/* タブレットのみ（768〜1024px）：スマホより大きく、PCよりは控えめなサイズ */
@media (min-width: 768px) and (max-width: 1024px) {
    .kin-speech-bubble {
        font-size: 16px;
        padding: 9px 18px;
    }
    .kin-speech-bubble::after {
        right: 24px;
        bottom: -8px;
        border-left-width: 8px;
        border-right-width: 8px;
        border-top-width: 9px;
    }
}
/* PCのみ（1025px以上）：吹き出しを2倍サイズに */
@media (min-width: 1025px) {
    .kin-speech-bubble {
        font-size: 22px;
        padding: 12px 24px;
    }
    .kin-speech-bubble::after {
        right: 32px;
        bottom: -10px;
        border-left-width: 10px;
        border-right-width: 10px;
        border-top-width: 12px;
    }
}

/* --- 記事コンテナ --- */
.article-container {
    background-color: #ffffff;
    width: 100%;
    margin: 0;
    padding: 20px 0 0;
    z-index: 5;
}
.article-inner {
    width: 100%;
    box-sizing: border-box;
}

/* --- セクション見出し（一覧） --- */
.section-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a2a40;
    letter-spacing: 0.08em;
    margin: 40px 0 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
@media (min-width: 768px) {
    .section-heading {
        font-size: 20px;
    }
}
.section-heading::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: rgba(26, 42, 64, 0.08);
}

/* --- 受付ステータスセクション見出し --- */
.status-section {
    margin-bottom: 44px;
}
.status-section:last-child {
    margin-bottom: 0;
}
.status-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0 0 16px;
}
.status-heading::before,
.status-heading::after {
    content: "";
    flex: 1;
    height: 1px;
}
.status-heading.is-open {
    color: #1a2a40;
}
.status-heading.is-open::before,
.status-heading.is-open::after {
    background: rgba(26, 42, 64, 0.25);
}
.status-heading.is-closed {
    color: #aaa;
}
.status-heading.is-closed::before,
.status-heading.is-closed::after {
    background: rgba(150, 150, 150, 0.3);
}
/* 「受付中」の文字部分は single ページの signup-status.open バッジを踏襲 */
.status-heading .signup-status {
    margin: 0;
}

/* --- 開催一覧に戻るボタン（taxonomy ページ） --- */
.back-to-archive-wrap {
    text-align: center;
    margin-top: 44px;
    padding-bottom: 8px;
}
.back-to-archive-btn {
    display: inline-block;
    background: #1a2a40;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 13px 36px;
    border-radius: 999px;
    transition: background 0.3s, transform 0.3s;
}
.back-to-archive-btn:hover {
    background: #2d4060;
    transform: translateY(-2px);
}

/* --- 受付終了ページネーション --- */
.closed-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 32px;
    margin-bottom: 25px;
}
.cpag-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #1a2a40;
    text-decoration: none;
    transition: opacity 0.3s;
}
.cpag-link:hover { opacity: 0.5; }
.cpag-link.is-disabled {
    color: #ccc;
    pointer-events: none;
}
.cpag-numbers {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cpag-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    color: #1a2a40;
    text-decoration: none;
    border-radius: 50%;
    transition: background 0.3s, color 0.3s;
}
.cpag-num:hover {
    background: rgba(26, 42, 64, 0.08);
}
.cpag-num.is-current {
    background: #1a2a40;
    color: #ffffff;
    font-weight: 700;
}

/* --- 一覧リスト --- */
.article-list-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.article-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.article-list-item a {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    text-decoration: none;
    border-radius: 10px;
    border: 0.5px solid #1a2a40;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: background 0.3s, box-shadow 0.3s;
    position: relative;
}
.article-list-item a:hover {
    background: #fcfcf9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* --- アーカイブ誘導バナー（受付中セクション内・記事カードと同サイズ） --- */
.article-list-item.is-archive-banner a {
    display: block;
    padding: 0;
}
/* 受付中の点滅ライト（記事カード・アーカイブバナー共通／画像に重なってOK）：ネイビー円の中で光らせる */
.list-status-light {
    position: absolute;
    top: 12px;
    left: 7px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1a2a40;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.list-status-light::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6ee7b7;
    box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.3);
    animation: pulse 1.8s ease-in-out infinite;
}

/* 再生ボタン付近：右向きシェブロン3本が順番に点灯する演出（配置は仮） */
.archive-banner-chevrons {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
}
.archive-banner-chevrons .chevron {
    width: 12px;
    height: 12px;
    border-top: 3px solid rgba(26, 42, 64, 0.15);
    border-right: 3px solid rgba(26, 42, 64, 0.15);
    transform: rotate(45deg);
    animation: chevronLight 1.2s ease-in-out infinite;
}
/* 左から右に向かって、点灯時の色がだんだん濃くなり最終的に#1a2a40になる */
.archive-banner-chevrons .chevron:nth-child(1) { animation-delay: 0s;    --chevron-lit: #96a0ae; }
.archive-banner-chevrons .chevron:nth-child(2) { animation-delay: 0.15s; --chevron-lit: #56637a; }
.archive-banner-chevrons .chevron:nth-child(3) { animation-delay: 0.3s;  --chevron-lit: #1a2a40; }
@keyframes chevronLight {
    0%, 70%, 100% { border-color: rgba(26, 42, 64, 0.15); }
    35% { border-color: var(--chevron-lit); }
}
/* スマホ版のみ：点滅ライトは5px上へ（サイズは元のまま）／シェブロンを右端ギリギリ＆詰め気味に */
@media (max-width: 767px) {
    .list-status-light {
        top: 7px;
    }
    .archive-banner-chevrons {
        right: 3%;
        gap: 0px;
    }
}
.archive-banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 9px; /* 親のborder-radius:10pxとoverflow:hiddenで角丸が揃う */
}
.archive-banner-img.is-pc { display: none; }
@media (min-width: 768px) {
    .archive-banner-img.is-sp { display: none; }
    .archive-banner-img.is-pc { display: block; }
}
.list-thumb {
    width: 130px;
    flex-shrink: 0;
    padding: 8px;
    background: rgba(26, 42, 64, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-thumb img {
    max-width: 108px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
}
.list-thumb-empty {
    width: 108px;
    aspect-ratio: 1 / 1;
    background: rgba(26, 42, 64, 0.06);
    border-radius: 4px;
}
.list-body {
    flex: 1;
    min-width: 0;
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
/* 受付中カード（点滅ライトあり）だけ、ライトと画像が重ならないようアイキャッチを右へ。受付終了カードは元のまま */
.list-status-light + .list-thumb {
    margin-left: 24px;
}
.list-status-light ~ .list-body {
    padding: 14px 24px 14px 14px;
}
.article-list-empty {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(26, 42, 64, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 60px 24px;
    text-align: center;
}
.article-list-empty p {
    margin: 0;
    font-size: 14px;
    color: #999;
    letter-spacing: 0.05em;
}
.list-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #1a2a40;
}
.list-date {
    font-size: 11px;
    color: #888;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.list-tags {
    display: flex;
    gap: 6px;
}
.list-status {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    align-self: flex-start;   /* カード外・上部に左揃えで表示 */
}
.list-status.open {
    background: #1a2a40;
    color: #ffffff;
}
.list-status.closed {
    background: rgba(150, 150, 150, 0.15);
    color: #999;
    border: 1px solid rgba(150, 150, 150, 0.25);
}

.list-event-date {
    font-size: 11px;
    color: #555;
    letter-spacing: 0.08em;
    margin: 0;
}
.list-title {
    font-size: 15px;
    font-weight: 500;
    color: #1a2a40;
    margin: 0;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

/* --- タグ --- */
.tag {
    font-size: 10px;
    color: #1a2a40;
    background: rgba(26, 42, 64, 0.06);
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 15px;
}

/* --- 個別：日付・タグ 横並び --- */
.article-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    margin-bottom: 15px;
}
.article-meta .article-tags {
    margin: 0;
}

/* --- 個別：日付・タイトル --- */
.article-date {
    font-size: 11px;
    color: #888;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0;
    white-space: nowrap;
}
.article-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 30px 0;
    color: #1a2a40;
    border-bottom: 1px solid rgba(26, 42, 64, 0.08);
    padding-bottom: 30px;
}

/* --- アイキャッチ画像 --- */
.article-eyecatch {
    width: 100%;
    padding-top: 30px;
    margin-bottom: 32px;
    border-radius: 6px;
    overflow: hidden;
}
.article-eyecatch img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 受付ステータスバッジ --- */
.signup-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.signup-status.open {
    background: #1a2a40;
    color: #ffffff;
}
.signup-status.open::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6ee7b7;
    box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.3);
    animation: pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
.signup-status.closed {
    background: rgba(150, 150, 150, 0.12);
    color: #999;
    border: 1px solid rgba(150, 150, 150, 0.2);
}
.signup-status.closed::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bbb;
    flex-shrink: 0;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.3); }
    50%       { box-shadow: 0 0 0 6px rgba(110, 231, 183, 0); }
}

/* --- 本文 --- */
.article-body {
    font-size: 15px;
    line-height: 2.0;
    color: #2d2d2d;
    letter-spacing: 0.02em;
}
.article-body p { margin-bottom: 1.5em; }
.article-body ul {
    padding-left: 0;
    list-style: none;
    margin: 1.5em 0;
}
.article-body ul li {
    padding: 8px 0 8px 8px;
    border-bottom: 1px solid rgba(26, 42, 64, 0.05);
    font-size: 15px;
    line-height: 1.8;
}
.article-body ul li:last-child { border-bottom: none; }

/* --- イベント詳細ボックス --- */
.event-info-box {
    background: rgba(26, 42, 64, 0.03);
    border: 1px solid rgba(26, 42, 64, 0.1);
    border-radius: 8px;
    padding: 28px 32px;
    margin: 40px 0;
}
.event-info-box dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
}
.event-info-box dt {
    font-size: 14px;
    font-weight: 700;
    color: #1a2a40;
    letter-spacing: 0.08em;
    padding: 12px 20px 12px 0;
    border-bottom: 1px solid rgba(26, 42, 64, 0.06);
    white-space: nowrap;
}
.event-info-box dd {
    font-size: 16px;
    color: #2d2d2d;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(26, 42, 64, 0.06);
    line-height: 1.7;
}
.event-info-box dt:last-of-type,
.event-info-box dd:last-of-type { border-bottom: none; }

/* --- CTAボタン --- */
.cta-wrapper {
    text-align: center;
    margin: 40px 0;
}
.cta-button {
    display: inline-block;
    background: #1a2a40;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 18px 52px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
}
.cta-button::after {
    content: " →";
    opacity: 0.7;
}
.cta-button:hover {
    background: #2d4060;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 42, 64, 0.2);
}
/* 締め切り後：グレーアウト */
.cta-button.is-closed {
    background: rgba(150, 150, 150, 0.15);
    color: #aaa;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}
.cta-button.is-closed::after {
    content: " →";
    opacity: 0.4;
}

/* --- 申込後案内 --- */
.post-signup-note {
    font-size: 14px;
    color: #555;
    line-height: 2.0;
    margin: 24px 0 0;
    padding: 20px 24px;
    background: #fafaf7;
    border-left: 3px solid rgba(26, 42, 64, 0.15);
    border-radius: 0 4px 4px 0;
}
.contact-block {
    margin-top: 10px;
    font-size: 13px;
    color: #555;
    line-height: 2.2;
}
.contact-block a {
    color: #1a2a40;
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 42, 64, 0.2);
}

/* --- ページネーション --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 80px 0 60px;
}
.pagination a,
.pagination span {
    text-decoration: none;
    color: #2d2d2d;
    font-size: 14px;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.pagination a:hover { opacity: 0.8; }
.pagination .current,
.pagination a.active { opacity: 1; font-weight: bold; }

/* --- カテゴリーセクション --- */
.category-section {
    margin-top: 80px;
    padding-bottom: 60px;
}
.category-heading {
    font-size: 13px;
    font-weight: 700;
    color: #1a2a40;
    letter-spacing: 0.2em;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.category-heading::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: rgba(26, 42, 64, 0.08);
}
.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(26, 42, 64, 0.05);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(26, 42, 64, 0.05);
}
.category-list li { margin: 0; }
.category-list a {
    text-decoration: none;
    color: #2d2d2d;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #ffffff;
    transition: all 0.3s ease;
}
.category-list a:hover {
    background: #fcfcf9;
    padding-left: 25px;
    color: #1a2a40;
}
.category-list .count {
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    color: #1a2a40;
    opacity: 0.4;
    font-weight: 400;
}

/* --- 個別ページ：PREV/一覧/NEXT ナビゲーション --- */
.live-seminar-single .pagination-container {
    margin: 44px auto 60px;
    max-width: 700px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 15px;
    box-sizing: border-box;
}
.live-seminar-single .pag-block {
    flex: 1;
    min-width: 0;
}
.live-seminar-single .pag-link-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.4s ease;
}
.live-seminar-single .pag-block a {
    text-decoration: none;
    color: #1a2a40;
}
.live-seminar-single .pag-label {
    display: block;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #1a2a40;
    line-height: 1;
}
.live-seminar-single .pag-title {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: #1a2a40;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.live-seminar-single .is-center {
    flex: 1;
    text-align: center;
    align-self: center;
}
.live-seminar-single .is-center .pag-link-inner { align-items: center; }
.live-seminar-single .is-prev .pag-link-inner { align-items: flex-start; text-align: left; }
.live-seminar-single .is-next .pag-link-inner { align-items: flex-end; text-align: right; }
.live-seminar-single .grid-icon {
    display: grid;
    grid-template-columns: repeat(3, 3px);
    gap: 4px;
}
.live-seminar-single .grid-icon span {
    width: 3px;
    height: 3px;
    background-color: #1a2a40;
}
.live-seminar-single .archive-text {
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #1a2a40;
}
@media (min-width: 768px) {
    .live-seminar-single .pag-title { font-size: 14px; }
    .live-seminar-single .pag-label { font-size: 16px; }
    .live-seminar-single .pag-block a:hover .pag-link-inner { opacity: 0.5; }
    .live-seminar-single .is-prev a:hover .pag-link-inner { transform: translateX(-8px); }
    .live-seminar-single .is-next a:hover .pag-link-inner { transform: translateX(8px); }
}

/* --- スマホ調整 --- */
@media (max-width: 480px) {
    .main-content { padding: 0 20px; }
    .article-title { font-size: 1.25rem; }
    .event-info-box {
        padding: 20px 18px;
    }
    .event-info-box dl { grid-template-columns: 1fr; }
    .event-info-box dt {
        border-bottom: none;
        padding-bottom: 2px;
        padding-top: 14px;
    }
    .event-info-box dd { padding-top: 0; }
    .cta-button { padding: 16px 36px; font-size: 14px; }
}

/* --- タブレット表示（768px〜1024px）：左右のパディングを80pxに拡大 --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .main-content {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* --- 下部リンクボタン（SPACEに戻る / TOPページに戻る） --- */
.hara-bottom-nav-container {
    /* 下の余白は margin ではなく padding で取る。
       margin だと本体部分の外にはみ出し、フッターとの間に body の白色が見えてしまうため */
    margin: 40px 0 0;
    padding-bottom: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.hara-btn-regular-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
    color: #1a2a40;
    border: 1px solid #1a2a40;
    text-decoration: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}
.hara-btn-regular-link-tight {
    letter-spacing: 0.02em;
    background-color: #d3d3d3;
}
.hara-btn-regular-link:hover,
.hara-btn-regular-link:active {
    background-color: #1a2a40;
    color: #fff;
}
@media (min-width: 768px) {
    .hara-bottom-nav-container {
        flex-direction: row;
        justify-content: center;
    }
    .hara-btn-regular-link {
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }
}

/* ================================================
   watch.css
   ================================================ */
/* ==========================================================================
   視聴ページ 専用スタイル
   ========================================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    /* 本体部分と同じ色。#fff だと、本体とフッターの間に白い帯が見えてしまうため */
    background-color: #f5f5f0;
    color: #2d2d2d;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* --- ページTOP画像（画面上部にピッタリくっつける） --- */
.archive-top {
    width: 100%;
    line-height: 0;
    /* 画像の背景と同じ色。大きなモニターで画像の左右に余白ができても、つなぎ目が見えないようにする */
    background-color: #f4f4ef;
}
.archive-top-img {
    width: 100%;
    /* 大きなモニターで画像が大きくなりすぎないよう、最大幅を決めて中央に置く */
    max-width: 1920px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.archive-top-img.is-pc { display: none; }

@media (min-width: 768px) {
    .archive-top-img.is-sp { display: none; }
    .archive-top-img.is-pc { display: block; }
}

/* --- 動画タイトル --- */
.video-title-wrap {
    max-width: 900px;
    margin: 50px auto 0;
    padding: 0 20px;
}
.video-title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a2a40;
    line-height: 1.5;
    margin: 30px 0;
    padding: 16px 20px;
    background-color: rgba(26, 42, 64, 0.04);
}
@media (min-width: 768px) {
    .video-title {
        font-size: 24px;
    }
}

/* --- 動画埋め込み（16:9のレスポンシブ枠） --- */
.video-embed-wrap {
    max-width: 900px;
    margin: 16px auto 40px;
    padding: 0 20px;
}
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}
.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- 視聴にあたっての注意事項 --- */
.video-notice-wrap {
    max-width: 900px;
    margin: 0 auto 28px;
    padding: 0 20px;
}
.video-notice-wrap .post-signup-note {
    border-left: none;
    border-radius: 4px;
    line-height: 1.7;
}
@media (min-width: 768px) {
    .video-notice-wrap .post-signup-note {
        font-size: 15px;
    }
}

/* --- チャプター（目次）：クリックで再生位置にジャンプ --- */
.video-chapters-wrap {
    max-width: 900px;
    margin: 0 auto 80px;
    padding: 0 20px;
}
.chapters-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a2a40;
    letter-spacing: 0.08em;
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.chapters-heading::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: rgba(26, 42, 64, 0.08);
}
.chapters-section {
    margin-bottom: 32px;
}
.chapters-section:last-child {
    margin-bottom: 0;
}
.chapters-section-title {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: #1a2a40;
    padding: 4px 16px;
    border-radius: 999px;
    letter-spacing: 0.1em;
    margin: 0 0 12px;
}
.chapters-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.chapters-list li {
    border-bottom: 1px solid rgba(26, 42, 64, 0.06);
}
.chapters-list li:last-child {
    border-bottom: none;
}
.chapter-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 6px;
    text-decoration: none;
    color: #2d2d2d;
    font-size: 15px;
    line-height: 1.6;
    border-radius: 4px;
    transition: background 0.2s;
}
.chapter-link:hover {
    background: rgba(26, 42, 64, 0.05);
}
/* タブレット・PC共通(768px以上)：目次まわりのフォントサイズ */
@media (min-width: 768px) {
    .chapters-heading {
        font-size: 20px;
    }
    .chapters-section-title {
        font-size: 18px;
    }
    .chapter-link {
        font-size: 16px;
    }
}
.chapter-time {
    flex-shrink: 0;
    width: 58px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1a2a40;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.chapter-desc {
    min-width: 0;
}

/* --- 関連商品（目次の下）：見出しは chapters-heading と同じデザイン --- */
.video-related-wrap {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

/* タブレットのみ(768〜1024px)：各セクションの左右パディングを80pxに拡大 */
@media (min-width: 768px) and (max-width: 1024px) {
    .video-title-wrap,
    .video-embed-wrap,
    .video-notice-wrap,
    .video-chapters-wrap,
    .video-related-wrap {
        padding-left: 80px;
        padding-right: 80px;
    }
}
.related-product-block {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.related-product-block:last-child {
    margin-bottom: 0;
}
.related-product-block + .related-product-block {
    padding-top: 32px;
    border-top: 1px solid rgba(26, 42, 64, 0.1);
}

/* PCのみ(1025px以上)：関連商品を2列に */
@media (min-width: 1025px) {
    .video-related-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        row-gap: 32px;
    }
    .video-related-wrap .chapters-heading {
        grid-column: 1 / -1;
    }
    .related-product-block {
        width: 100%;
        margin: 0;
    }
    .related-product-block + .related-product-block {
        padding-top: 0;
        border-top: none;
    }
    /* 2列目・3行目以降（商品3件目以降）の上に、行の区切り線を表示 */
    .related-product-block:nth-child(n+4) {
        padding-top: 32px;
        border-top: 1px solid rgba(26, 42, 64, 0.1);
    }
}
@media (max-width: 767px) {
    .related-product-block {
        width: 100%;
    }
    .related-product-grid {
        width: 100%;
    }
}
.related-product-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a2a40;
    margin: 0 0 20px;
}
@media (min-width: 768px) {
    .related-product-name {
        font-size: 16px;
    }
}
.related-product-grid {
    display: flex;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
}
.related-product-col-a {
    flex: 0 0 auto;
}
.related-product-col-a img {
    width: auto;
    height: 100px;
    display: block;
    border-radius: 4px;
}
@media (min-width: 768px) {
    .related-product-col-a img {
        width: 150px;
        height: auto;
    }
}
.related-product-col-b {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* 肚づくり基本セット：ボタン1つを画像の高さの中央に配置 */
.related-product-col-b.is-single-btn {
    position: relative;
    justify-content: flex-end;
}
.related-product-col-b.is-single-btn .related-product-btn {
    position: relative;
    z-index: 1;
    flex: none;
    height: 50%;
}
/* ボタンの裏からきんちゃんが顔をのぞかせる演出 */
.hara-kin-peek {
    position: absolute;
    left: 50%;
    bottom: calc(50% + 10px);
    width: 44px;
    z-index: 0;
    pointer-events: none;
}
/* PCのみ(1025px以上)：配置とサイズを調整 */
@media (min-width: 1025px) {
    .hara-kin-peek {
        left: 80%;
        bottom: calc(27% + 10px);
        width: 51px;
    }
    .hara-kin-peek.is-left {
        animation-name: haraKinPeekLoopLeftPc;
    }
    .hara-kin-peek.is-right {
        left: 40px;
        animation-name: haraKinPeekLoopRightPc;
    }
    @keyframes haraKinPeekLoopLeftPc {
        0%, 50%, 100% { transform: translate(-75%, 70%); }
        15%, 35% { transform: translate(-75%, -50%); }
    }
    @keyframes haraKinPeekLoopRightPc {
        0%, 50%, 100% { transform: translateY(70%); }
        15%, 35% { transform: translateY(-50%); }
    }
}
.hara-kin-peek img {
    display: block;
    width: 100%;
    height: auto;
}
.hara-kin-peek.is-left {
    animation: haraKinPeekLoopLeft 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.hara-kin-peek.is-right {
    animation: haraKinPeekLoopRight 4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    animation-delay: 2s;
}
@keyframes haraKinPeekLoopLeft {
    0%, 50%, 100% { transform: translate(-75%, 70%); }
    15%, 35% { transform: translate(-75%, -25%); }
}
@keyframes haraKinPeekLoopRight {
    0%, 50%, 100% { transform: translate(-25%, 70%); }
    15%, 35% { transform: translate(-25%, -25%); }
}
@media (min-width: 768px) {
    .related-product-col-b {
        flex: 0 0 320px;
    }
}
/* PCのみ(1025px以上)：2列表示では1列の幅が狭くなるため、ボタン列を固定幅(320px)にせず、
   列の残り幅に合わせて伸縮させる（ボタンが隣の列にはみ出さないようにする） */
@media (min-width: 1025px) {
    .related-product-grid {
        width: 100%;
        justify-content: flex-start;
    }
    .related-product-col-b {
        flex: 1 1 0;
    }
}
.related-product-btn {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 4px;
    padding: 8px;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.related-product-btn.is-single {
    background: #ffffff;
    color: #1a2a40;
    border: 1px solid #1a2a40;
}
.related-product-btn.is-single:hover {
    background: #1a2a40;
    color: #ffffff;
}
.related-product-btn.is-regular {
    background: linear-gradient(135deg, #2d4060 0%, #1a2a40 55%, #0e1826 100%);
    color: #ffffff;
    border: none;
}
.related-product-btn.is-regular:hover {
    transform: translateY(-2px);
}
@media (min-width: 768px) {
    .related-product-btn {
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    .related-product-btn {
        font-size: 16px;
        padding: 6px;
    }
}

/* ボタン内に小さい注記を添えたい場合（例：定期は3本セットのみ販売）：ボタンの高さは他のボタンと同じまま */
.related-product-btn.is-with-subnote {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1.1;
}
.related-product-btn-subnote {
    font-size: 10px;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 1.1;
}

/* タブレットのみ：きんちゃんの飛び出し量を控えめに（体の半分ぐらい）＋左右位置を調整 */
@media (min-width: 768px) and (max-width: 1024px) {
    .hara-kin-peek.is-left {
        left: calc(50% + 70px);
        animation-name: haraKinPeekLoopLeftTab;
    }
    .hara-kin-peek.is-right {
        left: calc(50% - 80px);
        animation-name: haraKinPeekLoopRightTab;
    }
    /* 隠れているとき(0%,50%,100%)は 130% 下げて、ボタンの裏に完全に隠す。
       70% だと、きんちゃんの頭がボタンの上に25pxほど出たままになるため */
    @keyframes haraKinPeekLoopLeftTab {
        0%, 50%, 100% { transform: translate(-75%, 130%); }
        15%, 35% { transform: translate(-75%, 30%); }
    }
    @keyframes haraKinPeekLoopRightTab {
        0%, 50%, 100% { transform: translate(-25%, 130%); }
        15%, 35% { transform: translate(-25%, 30%); }
    }
}

/* スマホのみ：きんちゃんの飛び出し量を控えめに＋ボタンの端からの位置指定 */
@media (max-width: 767px) {
    .hara-kin-peek {
        width: 36px;
    }
    .hara-kin-peek.is-left {
        left: auto;
        right: 20px;
        animation-name: haraKinPeekLoopLeftSp;
    }
    .hara-kin-peek.is-right {
        left: 20px;
        animation-name: haraKinPeekLoopRightSp;
    }
    @keyframes haraKinPeekLoopLeftSp {
        0%, 50%, 100% { transform: translateY(124%); }
        15%, 35% { transform: translateY(25%); }
    }
    @keyframes haraKinPeekLoopRightSp {
        0%, 50%, 100% { transform: translateY(124%); }
        15%, 35% { transform: translateY(25%); }
    }
}
/* ================================================
   ログイン画面（style.css より）
   ================================================ */
/* --- ログイン画面 --- */
.login-section {
    display: flex;
    justify-content: center;
    padding: 60px 20px 80px;
}
.login-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border: 1px solid rgba(26, 42, 64, 0.1);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 40px 32px;
    box-sizing: border-box;
}
/* タブレットのみ(768〜1024px)：画面左右80pxパディングまで枠を広げる */
@media (min-width: 768px) and (max-width: 1024px) {
    .login-section {
        padding-left: 80px;
        padding-right: 80px;
    }
    .login-card {
        max-width: none;
    }
}
/* PCのみ(1025px以上)：ログインを囲む枠を2倍ほどの幅に */
@media (min-width: 1025px) {
    .login-card {
        max-width: 800px;
    }
}
.login-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a2a40;
    text-align: center;
    margin: 0 0 16px;
}
@media (min-width: 768px) {
    .login-heading {
        font-size: 28px;
    }
}
.login-intro {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    text-align: left;
    max-width: 580px;
    margin: 0 auto 16px;
}
.login-intro:last-of-type {
    margin-bottom: 28px;
}
.login-intro a {
    color: #1a2a40;
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 42, 64, 0.3);
}
/* --- ログインボタン／新規会員登録ボタン --- */
.login-below-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}
.login-button,
.login-register-button {
    flex: 1 1 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 16px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, transform 0.3s;
}
.login-button {
    background: #1a2a40;
    color: #ffffff;
    border: none;
}
.login-button:hover {
    background: #2d4060;
    transform: translateY(-2px);
}
.login-register-button {
    background: #ffffff;
    color: #1a2a40;
    border: 1px solid #1a2a40;
}
.login-register-button:hover {
    background: #1a2a40;
    color: #ffffff;
}
/* タブレット・PC共通(768px以上)：ログインボタンと新規会員登録ボタンを横並びに。
   幅580pxの行(本文と同じ左右端)の中で、左端=ログイン／右端=新規登録、間はgapでバランスを取る */
@media (min-width: 768px) {
    .login-below-form {
        max-width: 580px;
        margin-left: max(0px, calc((100% - 580px) / 2));
        margin-right: 0;
    }
    .login-button,
    .login-register-button {
        flex: 1 1 0;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}