/* ===================================================
   CCC FRONTIER FESTIVAL - TOPページ専用（p-top-）
   =================================================== */

.p-top-hero {
    position: relative;
    background: var(--teal);
    padding: 80px 0 0;
    overflow: hidden;
}

.p-top-hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.16) 2px, transparent 2px);
    background-size: 28px 28px;
    pointer-events: none;
}

.p-top-hero-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 70px;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
    align-items: center;
}

.p-top-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--lime);
    font-family: 'Bebas Neue', 'Archivo Black', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.2rem);
    letter-spacing: 0.12em;
    padding: 5px 16px;
    border-radius: 40px;
    margin-bottom: 22px;
    animation: pop-in 0.7s ease both;
}

.p-top-blink-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--pink);
    animation: blink 1.2s infinite;
}

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }

@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.p-top-hero-title { color: var(--ink); }

.p-top-hero-title-en {
    display: block;
    font-family: 'Archivo Black', 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin-bottom: 14px;
}

.p-top-hero-title-en strong { color: var(--white); }

.p-top-hero-title-ja {
    display: inline-block;
    background: var(--white);
    color: var(--orange);
    font-size: clamp(1.4rem, 3.2vw, 2.2rem);
    font-weight: 900;
    padding: 6px 18px;
    box-shadow: 6px 6px 0 var(--ink);
    margin-bottom: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.p-top-hero-title-small { font-size: 0.65em; font-weight: 700; }

.p-top-hero-catch {
    font-size: clamp(0.95rem, 1.8vw, 1.1rem);
    font-weight: 700;
    color: var(--ink);
    margin: 18px 0 26px;
}

.p-top-hero-meta {
    display: flex;
    flex-wrap: wrap; /* 画面幅に応じて自動で折り返し */
    gap: 12px;       /* 各項目の間隔 */
    margin-bottom: 30px;
}

/* hero-meta 内のテキストリンク用スタイル */
.p-top-hero-meta-link {
    color: inherit;         /* 親要素の黒文字をそのまま継承 */
    text-decoration: none;  /* 下線を消去 */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s ease;
}

.p-top-hero-meta-link:hover {
    opacity: 0.6; /* ホバー時は色を変えずに自然な透け感（タップ感）のみ付与 */
}

.p-top-hero-meta-link i {
    font-size: 0.75em; /* 外部リンクアイコンをひとまわり小ぶりに */
}

.p-top-hero-meta-item {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.p-top-hero-meta-group {
    display: flex;
    gap: 12px;
}

.p-top-hero-meta-label {
    background: var(--ink);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.p-top-hero-meta-value {
    font-weight: 900;
    font-size: 1.05rem;
    white-space: nowrap;
}

.p-top-hero-meta-value small { font-size: 0.7em; }

.p-top-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--pink);
    color: var(--white);
    text-decoration: none;
    font-weight: 900;
    font-size: 1.15rem;
    padding: 16px 38px;
    border-radius: 50px;
    box-shadow: 0 10px 26px rgba(255, 51, 102, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.p-top-hero-title-ja:hover {
    transform: translateY(-3px);
    background: var(--orange);
    color:var(--white);
}

.p-top-hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(255, 51, 102, 0.55);
}

.p-top-hero-cta i { animation: bounce-y 1.4s infinite; }

@keyframes bounce-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.p-top-hero-visual { text-align: center; }

.p-top-hero-symbol {
    width: min(320px, 70%);
    margin: 0 auto 14px;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18));
    animation: float 4s ease-in-out infinite;
}

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

.p-top-hero-visual-copy {
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.3rem;
    color: var(--ink);
    line-height: 1.4;
}

.p-top-hero-visual-copy small {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Marquee */
.p-top-hero-marquee {
    background: var(--ink);
    color: var(--lime);
    overflow: hidden;
    padding: 12px 0;
}

.p-top-marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marquee 22s linear infinite;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.p-top-about { background: var(--paper); }

.p-top-about-lead {
    text-align: center;
    margin-bottom: 46px;
}

.p-top-about-copy {
    font-size: clamp(1.4rem, 3.4vw, 2rem);
    font-weight: 900;
    margin-bottom: 18px;
}

.p-top-about-copy .p-top-accent {
    color: var(--pink);
    background: linear-gradient(transparent 65%, rgba(182, 199, 46, 0.55) 65%);
    padding: 0 4px;
}

.p-top-about-banner {
    max-width: 900px;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.16);
}

.p-top-digest {
    background: var(--ink);
    color: var(--white);
}

.p-top-digest-note {
    text-align: center;
    margin-top: 28px;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
}

.p-top-digest-note a {
    color: var(--lime);
    font-weight: 700;
}

.p-top-digest-note a i { font-size: 0.75em; margin-left: 3px; }

.p-top-opencall { background: var(--paper); }

@media (max-width: 900px) {
    .p-top-hero-inner { grid-template-columns: 1fr; text-align: center; }
    .p-top-hero-meta { justify-content: center; }
    .p-top-hero-visual { order: -1; }
    .p-top-hero-symbol { width: min(220px, 55%); }
}

/* ===================================================
   参加アーティスト：解放区カード
   =================================================== */
/* 10組の写真（5列×2段）は横長なので、共通バナーの比率を上書き */
.p-top-kaihouku-banner img {
    height: auto;
    aspect-ratio: 1516 / 604;
}

/* 見出し下の一文 */
.p-top-program-lead {
    margin-top: 18px;
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    font-weight: 900;
    color: var(--white);
}

/* スマホでは区切りのいい位置で改行する */
.p-top-program-lead span { display: inline-block; }

/* 準備中のプログラム（解放区カードの横） */
.p-top-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    padding: 32px 24px;
    border: 2px dashed rgba(255, 255, 255, 0.7);
    border-radius: var(--radius);
    text-align: center;
    color: var(--white);
}

.p-top-coming-soon-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    letter-spacing: 0.08em;
    line-height: 1;
}

.p-top-coming-soon-text {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.8;
}

/* セクション境界の飾りの色（各セクションの背景色） */
.p-top-digest   { --edge-color: var(--ink); }
.p-top-opencall { --edge-color: var(--paper); }
.l-section-teal { --edge-color: var(--teal); }

/* 募集中カード */
.p-top-opencall-now { margin-bottom: 56px; }

/* ヒーローからのリンクで飛んだとき、固定ナビに隠れないようにする */
#frontier-rondo { scroll-margin-top: 90px; }

/* タイトルを1行で見せる（3列表示でも収まる大きさに） */
#frontier-rondo .c-card-name {
    font-size: 1.05rem;
    white-space: nowrap;
}

.p-top-opencall-roles {
    display: block;
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--paper);
    border-radius: 10px;
    text-align: left;
    font-weight: 700;
    line-height: 1.8;
}

.p-top-opencall-roles small { font-weight: 400; padding-left: 1.2em; }

@media (max-width: 360px) {
    #frontier-rondo .c-card-name { font-size: 0.92rem; }
}

/* ヒーロー what's new：見出しと各リンクの上の小さな一文 */
.p-top-hero-catch { margin-bottom: 0; }

.p-top-hero-lead {
    margin: 14px 0 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink);
}

/* 「募集要項・応募フォームはこちら」をスマホでも1行に収める */
@media (max-width: 768px) {
    #frontier-rondo .c-btn { font-size: 0.88rem; padding-left: 16px; padding-right: 16px; }
}

/* ヒーロー：Frontier Rondo のリンクは募集カード（ローズ）と同じ色 */
.p-top-hero-title-rose { color: #c25378; }
.p-top-hero-title-rose:hover { background: #a93c63; color: var(--white); }

/* Frontier Rondo：バナーと写真のクロスフェード
   写真をバナーの上に重ね、写真の透明度だけを変えて切り替える。
   1周 10秒（それぞれ約4秒表示・約1秒かけて切り替え） */
.p-top-rondo-media a { position: relative; }

.p-top-rondo-media .p-top-rondo-photo {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: center top; /* 頭が切れないよう上寄せ */
    opacity: 0;
    animation: rondo-crossfade 10s ease-in-out infinite;
}

@keyframes rondo-crossfade {
    0%, 40%  { opacity: 0; }
    50%, 90% { opacity: 1; }
    100%     { opacity: 0; }
}

/* 動きを減らす設定の端末ではバナーのみ表示 */
@media (prefers-reduced-motion: reduce) {
    .p-top-rondo-media .p-top-rondo-photo { animation: none; }
}

/* 締切（全画面共通） */
.p-top-rondo-foot { display: flex; flex-direction: column; gap: 12px; }

.p-top-rondo-deadline {
    font-size: 0.85rem;
    color: #555;
}

.p-top-rondo-deadline strong {
    margin-left: 8px;
    font-size: 1.05rem;
    color: #a93c63;
}

/* PC（1100px以上）：1カラムの横長レイアウト。
   左：バナー／写真、右：本文。本文を画像（16:9）の高さに収まる量・サイズにそろえ、
   わずかに本文が高くなる場合は画像側を枠いっぱいに広げて高さをそろえる */
@media (min-width: 1100px) {
    #frontier-rondo {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        align-items: stretch;
    }
    #frontier-rondo .c-card-banner {
        position: relative;
        grid-column: 1;
        grid-row: 1;
    }
    #frontier-rondo .c-card-banner a {
        position: static;
        width: 100%;
        height: 100%;
    }
    #frontier-rondo .c-card-banner::before {
        content: "";
        display: block;
        aspect-ratio: 16 / 9; /* 画像本来の高さを確保 */
    }
    #frontier-rondo .c-card-banner img {
        position: absolute;
        inset: 0;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }
    #frontier-rondo .c-card-body {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        padding: 14px 28px 14px 26px;
        border-top: none;
        border-left: 6px solid #c25378;
    }
    #frontier-rondo .c-card-tag { margin-bottom: 4px; font-size: 0.7rem; }
    #frontier-rondo .c-card-name { font-size: 1.2rem; margin-bottom: 4px; }
    #frontier-rondo .c-card-desc {
        flex: none;
        margin-bottom: 10px;
        font-size: 0.82rem;
        line-height: 1.6;
    }
    #frontier-rondo .p-top-opencall-roles {
        margin: 6px 0 0;
        padding: 6px 12px;
        font-size: 0.8rem;
        line-height: 1.5;
    }
    /* 締切とボタンを横に並べる */
    #frontier-rondo .p-top-rondo-foot {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    #frontier-rondo .p-top-rondo-deadline { font-size: 0.78rem; line-height: 1.4; }
    #frontier-rondo .p-top-rondo-deadline strong { display: block; margin-left: 0; font-size: 1rem; white-space: nowrap; }
    #frontier-rondo .p-top-rondo-foot .c-btn {
        flex: none;
        width: auto;
        margin: 0;
        padding: 10px 18px;
        font-size: 0.84rem;
    }
}

/* 横長レイアウトにならない幅（1099px以下）では、縦並びのカードを大きくしすぎない */
@media (max-width: 1099px) {
    #frontier-rondo { max-width: 560px; margin: 0 auto; }
}

/* ヒーロー：交感区のリンクはテーマ色（グリーン） */
.p-top-hero-title-green { color: #8fa021; }
.p-top-hero-title-green:hover { background: #8fa021; color: var(--white); }

/* 交感区カードへのリンクで飛んだとき、固定ナビに隠れないようにする */
#koukanku { scroll-margin-top: 90px; }

/* Coming soon を横幅いっぱいの帯で表示（カードが2枚並んだ下） */
.p-top-coming-soon-wide {
    grid-column: 1 / -1;
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 24px;
}

.p-top-coming-soon-wide .p-top-coming-soon-title { font-size: clamp(1.8rem, 4vw, 2.4rem); }