/* ==========================================================================
   concept-page.css — LIVE CONCEPT ページ専用
   ※ style.css → header.css の「後に」読み込むこと
   ※ Q&Aページ（faq-addon.css）／お知らせ一覧とトンマナを揃えています
   ========================================================================== */

/* --------------------------------------------------------------------------
   トークン：faq-addon.css / news-page.css と同一
   -------------------------------------------------------------------------- */
:root {
    --font-latin: "Avenir Next", Avenir, "Century Gothic";
    --font-jp: "Zen Kaku Gothic New",
               "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
               "Yu Gothic", "游ゴシック",
               "Hiragino Sans", "ヒラギノ角ゴシック",
               sans-serif;
    --font-base: var(--font-latin), var(--font-jp);

    --cp-ink:   #3c3518;
    --cp-text:  #6b6459;
    --cp-muted: #8a857c;
    --cp-faint: #aaa59e;
    --cp-navy:  #1e1b4b;
    --cp-plum:  #311042;
    --cp-gold:  #a8842e;
    --cp-line:  rgba(60, 53, 24, 0.12);
    --cp-card:  #fffdfa;
    --cp-grad:  linear-gradient(150deg, #1e1b4b 0%, #311042 100%);
    --cp-ease:  cubic-bezier(0.22, 0.9, 0.3, 1);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-base);
}

body {
    font-weight: 400;
    letter-spacing: 0.04em;
}

.site-header-nav a,
.gnav-toggle,
.gnav-toggle-label,
.gnav-group-label,
.gnav-entry-num,
.cp-page-label,
.cp-sec-label,
.cp-slot-num,
.cp-step-num,
.cp-contact-label,
.cp-copyright {
    font-family: var(--font-latin), sans-serif;
}

/* ==========================================================================
   ページ見出し
   トップページのセクションタイトルと同じ構造：
   大きな英字 ＋ 小さな日本語 ＋ 中央の区切り線。
   ページ見出しなので、セクションより一段大きくしています。
   ========================================================================== */
.cp-page-head {
    margin-bottom: 34px;
    text-align: center;
}

.cp-page-en {
    display: block;
    font-family: var(--font-latin), sans-serif;
    font-size: clamp(32px, 10vw, 46px);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    line-height: 1.15;
    color: var(--cp-navy);
}

.cp-page-ja {
    display: block;
    margin-top: 10px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    color: var(--cp-muted);
}

.cp-page-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    line-height: inherit;
    color: inherit;
}

/* 区切り線。イラストの下・リード文の上に置くため、擬似要素ではなく実要素。 */
.cp-page-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 24px auto 22px;
    background-color: var(--cp-line);
}

.cp-page-lead {
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--cp-text);
    text-align: left;
}

/* ==========================================================================
   ページ見出しの文字の中を流れるグラデーション
   文字そのものを窓にして、その奥の色を動かします（background-clip: text）。
   紫の濃淡の中を、金色の光が一度だけ横切ります。画像は読み込みません。
   background-clip: text が使えない環境では、単色のまま表示されます。

   ■ GIFや画像に差し替えるとき
     このページの <h1> に style="--title-art: url('../img/xxx.gif')" を足すか、
     下の --title-art を書き換えてください。画像のときは
     --title-art-size: cover; --title-art-motion: none; も一緒に指定します。

   ■ 画像を用意しない場合（初期値）
     紫の濃淡がゆっくり流れます。読み込むファイルは増えません。
   ========================================================================== */
.cp-page-en {
    --title-art: linear-gradient(100deg,
        #1e1b4b 0%, #311042 26%, #6f5aa8 44%, #a8842e 52%, #6f5aa8 60%, #311042 76%, #1e1b4b 100%);
    --title-art-size: 300% 100%;
    --title-art-motion: titleArt 9s linear infinite;
}

/* background-clip: text が使えない環境では、単色のまま表示されます */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cp-page-en {
        background-image: var(--title-art);
        background-size: var(--title-art-size);
        background-position: 0 50%;
        background-repeat: repeat-x;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: var(--title-art-motion);
    }
}

/* 端と端が同じ色なので、1周ぶん動かすと継ぎ目が出ません */
@keyframes titleArt {
    from { background-position:    0 50%; }
    to   { background-position: -300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-page-en { --title-art-motion: none; }
}

/* ==========================================================================
   見出しの下のイラスト
   BRUTUS の「考える人」と同じ位置づけ。ページの顔になる絵を置いて、
   ごく小さく動かします。

   絵は GIF を入れる前提なので、CSS 側では動かしません（is-still）。
   GIF 自体が動いているところに CSS の変形を重ねると、
   コマ送りと変形がずれてちらついて見えます。

   ■ 絵の差し替え
     <img> の src を変えるだけです。

   ■ 静止画に変えて CSS で動かしたい場合だけ、クラスを差し替えます
     is-squash … 縦に伸び縮み
     is-bob    … ゆっくり上下に浮く
     is-sway   … 左右にゆらぐ
   ========================================================================== */
.cp-page-art {
    /* 絵ごとに変えたいときは、この1行を上書きしてください
       例）<div class="cp-page-art is-still" style="--art-w:120px"> */
    width: var(--art-w, 60px);
    max-width: 62%;
    margin: 22px auto 0;
    line-height: 0;
}

.cp-page-art img {
    display: block;
    width: 100%;
    height: auto;
    /* 下端を軸にすると、地面に立ったまま伸び縮みして見えます */
    transform-origin: 50% 100%;
}

.cp-page-art.is-squash img { animation: artSquash 2.6s ease-in-out infinite; }
.cp-page-art.is-bob    img { animation: artBob    3.4s ease-in-out infinite; }
.cp-page-art.is-sway   img { animation: artSway   4.2s ease-in-out infinite; }
.cp-page-art.is-still  img { animation: none; }

/* 縦に伸びたぶん横を縮める。体積が保たれて生き物っぽく見えます */
@keyframes artSquash {
    0%, 100% { transform: scale(1, 1); }
    30%      { transform: scale(0.965, 1.055); }
    62%      { transform: scale(1.03, 0.965); }
}

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

@keyframes artSway {
    0%, 100% { transform: rotate(-2.5deg); }
    50%      { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cp-page-art img { animation: none; }
}


/* ==========================================================================
   セクション共通
   ========================================================================== */
.cp-sec {
    margin: 60px 0;
}

.cp-sec-label {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.26em;
    color: var(--cp-faint);
    text-align: center;
}

.cp-sec-title {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--cp-navy);
    text-align: center;
}

.cp-body {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 2.05;
    letter-spacing: 0.04em;
    color: var(--cp-text);
}

.cp-body:last-child {
    margin-bottom: 0;
}

.cp-body b {
    color: var(--cp-ink);
    font-weight: 700;
}

/* ==========================================================================
   語源：ロゴと由来
   ========================================================================== */
.cp-origin {
    padding: 34px 16px 30px;
    background: var(--cp-card);
    border: 1px solid var(--cp-line);
    border-radius: 14px;
    text-align: center;
}

.cp-origin-logo {
    width: 74%;
    max-width: 260px;
    margin: 0 auto 22px;
}

.cp-origin-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* トップページの .intro-lead と同じ見え方に揃える */
.cp-origin-lead {
    margin: 0;
    font-size: 14.5px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--cp-text);
    text-align: center;
}

.cp-origin-bridge {
    margin-top: 30px;
}

/* 手書き風バッジは style.css の .concept-badge-* をそのまま使います。
   登場アニメーションは main.js が .scroll-section に付ける
   .is-visible が引き金なので、親に scroll-section が必要です。 */
.cp-origin .concept-badge-container {
    margin: 15px auto 24px;
}

/* ==========================================================================
   2つの出演枠
   ========================================================================== */
.cp-slots {
    display: grid;
    gap: 14px;
}

.cp-slot {
    position: relative;
    display: block;
    padding: 22px 20px 20px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--cp-grad);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(49, 16, 66, 0.2);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cp-slot:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(49, 16, 66, 0.3);
}

.cp-slot-art {
    position: absolute;
    right: -16px;
    bottom: -20px;
    width: 104px;
    opacity: 0.16;
    pointer-events: none;
}

.cp-slot-art img {
    display: block;
    width: 100%;
    height: auto;
}

.cp-slot-num {
    position: relative;
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #ffff00;
}

.cp-slot-title {
    position: relative;
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.cp-slot-text {
    position: relative;
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.78);
}

.cp-slot-go {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffff00;
}

/* ==========================================================================
   次のアクション
   ========================================================================== */
.cp-next {
    display: grid;
    gap: 10px;
    margin-top: 34px;
}

.cp-next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 20px;
    border: 1px solid rgba(49, 16, 66, 0.3);
    border-radius: 52px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--cp-plum);
    text-decoration: none;
    touch-action: manipulation;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cp-next-btn:hover {
    background-color: var(--cp-plum);
    border-color: var(--cp-plum);
    color: #ffffff;
}

.cp-next-btn.is-primary {
    background: var(--cp-grad);
    border-color: transparent;
    color: #ffff00;
}

.cp-next-btn.is-primary:hover {
    opacity: 0.92;
    color: #ffff00;
}

/* ==========================================================================
   フッター（お知らせ一覧・Q&A と同じ組み）
   ========================================================================== */
.cp-contact {
    max-width: 380px;
    margin: 58px auto 34px;
    padding-top: 34px;
    border-top: 1px solid var(--cp-line);
    text-align: center;
}

.cp-contact-label {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--cp-faint);
}

.cp-contact-text {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--cp-text);
}

.cp-line-btn {
    display: flex;
    width: 70%;
    margin: 26px auto 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background-color: #06C755;
    border-radius: 999px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.cp-back-home {
    margin: 26px 0 0;
    text-align: center;
}

.cp-link {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #7b2cbf;
    text-decoration: none;
}

.cp-link:hover {
    text-decoration: underline;
}

.cp-copyright {
    margin-top: 30px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--cp-faint);
}

/* ==========================================================================
   スマホ調整
   ========================================================================== */
@media (max-width: 480px) {
    .cp-page-title { font-size: 23px; }
    .cp-quote p    { font-size: 15.5px; }
    .cp-sec        { margin: 48px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-slot { transition: none; }
}