/* ==========================================================================
   negai-page.css — 「あなたの願い叶えます！」ページ専用

   ※ concept-page.css をそのまま土台にしています。共通部分（トークン・
      ページ見出し・cp-sec・cp-next・フッター）は同一なので、
      あとから片方だけ直すとズレます。共通部分を変えるときは両方に反映を。
   ※ 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;
}

/* トップページの .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;
}

/* 番号バッジ */
.ng-num {
    width: 46px;
    margin: 0 auto 20px;
}

.ng-num img {
    display: block;
    width: 100%;
    height: auto;
}

/* ==========================================================================
   次のアクション
   ========================================================================== */
.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; }
}


/* ==========================================================================
   要項の一覧
   ========================================================================== */
.ng-facts {
    margin: 0;
    padding: 0;
}

.ng-facts > div {
    padding: 16px 4px;
    border-bottom: 1px solid var(--cp-line);
}

.ng-facts > div:first-child {
    border-top: 1px solid var(--cp-line);
}

.ng-facts dt {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--cp-ink);
}

.ng-facts dd {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--cp-muted);
}

/* 補足は本文より一段落として、要項そのものを読みやすく保つ */
.ng-note {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cp-text);
}

.ng-note-closed {
    color: var(--cp-muted);
}

.ng-note-closed::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background-color: var(--cp-muted);
    vertical-align: middle;
}

/* ==========================================================================
   エントリー項目
   線ではなく面で区切ります（トップページのお知らせと同じ考え方）
   ========================================================================== */
.ng-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.ng-items li {
    padding: 16px;
    background-color: var(--cp-card);
    border: 1px solid var(--cp-line);
    border-radius: 12px;
}

.ng-item-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cp-ink);
}

.ng-item-text {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--cp-text);
}

/* ==========================================================================
   発表のあとに
   ========================================================================== */
.ng-after + .ng-after {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid var(--cp-line);
}

.ng-after-q {
    position: relative;
    margin: 0 0 12px;
    padding-left: 22px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--cp-plum);
}

.ng-after-q::before {
    content: "Q";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-latin), sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-gold);
}


.mm-list-title {
    line-height: 1.4;
    margin-top: 0px;
    margin-bottom: 24px;
    color: #1e1b4b;
    /* border: solid 1px #eae7e1; */
    border-radius: 12px;
    /* padding: 25px 20px 20px 20px; */
    /* 右上のサークルと衝突しないよう、タイトルの上下余白を微調整 */
    letter-spacing: 0.08em;
    display: flex;
    flex-direction: column; /* 縦に並べることで画像を上に配置 */
    gap: 12px;
    /* background: linear-gradient(135deg, #1e1b4b 0%, #311042 100%); */
    position: relative;
    /* 左側に数字画像が入り込むための余白（60px）を確保 */
    width: 100%;
    margin-bottom: 10px;    /* タイトル下のコンテンツとの余白 */
}

.mm-list-title h3 {
    font-size: 25px;
    font-weight: 700;
    text-align: center;
}

/* キラキラのスタイリング */
/* 左右のキラキラ共通のベース設定 */
.mm-list-kirakira-l,
.mm-list-kirakira-r {
    display: inline-block;
    height: 2em; /* 文字の大きさに合わせる */
    width: auto;
    object-fit: contain;
    
    /* スマホ長押し拡大防止 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* --- ①【位置のズレ】と ②【アニメーション】の個別設定 --- */

/* 左側のキラキラ：ほんの少し「下」にズラし、3秒周期でゆったり浮遊 */
.mm-list-kirakira-l {
    position: absolute;
    top:-30px;
    left:20px;
    transform: translateY(0.1em); 
    animation: floatKirakiraLeft 3s ease-in-out infinite;
}

.mm-list-kirakira-l-2 {
    position: absolute;
    top:-20px;
    left:2px;
    transform: translateY(0.1em); 
    animation: floatKirakiraLeft 3s ease-in-out infinite;
}

/* 右側のキラキラ：ほんの少し「上」にズラし、2.4秒周期で少し早めに浮遊 */
.mm-list-kirakira-r {
    position: absolute;
    bottom:-50px;
    right:5px;
    transform: translateY(-0.2em); 
    animation: floatKirakiraRight 2.4s ease-in-out infinite;
}

.mm-list-kirakira-r-2 {
    position: absolute;
    bottom:-30px;
    right:10px;
    transform: translateY(-0.2em); 
    animation: floatKirakiraRight 2.4s ease-in-out infinite;
}

.mm-list-kirakira-l img {
    display: block;
    height: 20px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}
.mm-list-kirakira-l-2 img {
    display: block;
    height: 30px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}

.mm-list-kirakira-r img {
    display: block;
    height: 20px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}


.mm-list-kirakira-r-2 img {
    display: block;
    height: 30px;           /* デザインに合わせてサイズは自由に調整してください */
    width: auto;
}