/* ==========================================================
   MEGURU コミュニティLP — 色と数値（2026-11-09 試作で確定）
   ・親サイト（eqlabounity.jp / site-unity）の変数とぶつからないよう
     :root ではなく .mg の中だけに置く
   ・ページ側（page.css）は必ずこの変数を使う。直値は書かない
   ・既存の値は変えない（追加のみ可）
   ========================================================== */
.mg{
  /* ── 地の色 ── */
  --mg-white:#ffffff;
  --mg-cream:#faf1e4;          /* ③⑥⑩ */
  --mg-sage:#c8d4be;           /* ⑤⑧⑨ */
  --mg-bar:#f7f6f3;            /* ⑪ 白い帯 */

  /* ── 文字の色 ── */
  --mg-ink:#3d3a36;            /* 本文・見出し */
  --mg-ink-soft:#5f5a54;       /* 補足（白・クリーム地） */
  --mg-ink-on-sage:#55504a;    /* 補足（セージ地。4.5:1 を確保） */
  --mg-ink-item:#4a4540;       /* ⑥ 2STEP の項目説明 */
  --mg-brown:#7a5c43;          /* 茶の文字（白・クリーム地）。セージ地では 3.96:1 なので --mg-brown-on-sage を使う */
  --mg-brown-on-sage:#6b4f38;  /* 11/10 追加：セージ地（⑤⑧⑨）の茶の文字すべて。4.86:1 */
  --mg-brown-display:#9a7a5e;  /* 茶の大見出し。白・クリーム地だけ。セージ地では使わない */
  --mg-on-photo:#ffffff;       /* 写真の上の文字（④⑦帯） */

  /* ── CTA（LINE） ── */
  --mg-cta:#5e7a5a;            /* B案：MEGURUの緑（白文字 4.75:1） */
  --mg-cta-hover:#4a6347;
  --mg-cta-text:#ffffff;
  --mg-line-mark:#06C755;      /* LINE の丸マーク。文字の背景には使わない */
  --mg-line-mark-ring:rgba(255,255,255,.85);

  /* ── 線・面 ── */
  --mg-card:rgba(255,255,255,.55);     /* ⑧ 声のカード */
  --mg-card-faq:rgba(255,255,255,.6);  /* ⑨ */
  --mg-card-check:rgba(255,255,255,.65);/* ③ チェックの枠 */
  --mg-faq-border:#6b655e;
  --mg-sns-border:#b9b2a8;
  --mg-loop:#d8cec2;                   /* ⑥ 中央の円 */
  --mg-band-veil:rgba(36,62,58,.32);   /* ④⑦ 写真を暗くする幕 */
  --mg-band-text-shadow:rgba(20,40,38,.45);
  --mg-photo-shadow:rgba(40,50,55,.12);/* ⑪ 写真4枚の影（ここだけ影を許可） */
  --mg-profile-fade:#ffffff;           /* ② 写真の左端を白くぼかす */
  /* ⑪ 帯の光（ぼかし） */
  --mg-foot-a:#cfdfe6; --mg-foot-b:#e9f0f2; --mg-foot-c:#c3d6dd;
  --mg-foot-glow-1:rgba(255,255,255,.9); --mg-foot-glow-2:rgba(255,255,255,.75);
  --mg-foot-glow-3:rgba(214,228,236,.9); --mg-foot-glow-4:rgba(200,218,226,.9);

  /* ── 書体（判断待ち：site.config.json todo 参照） ── */
  --mg-font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --mg-font-maru:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --mg-font-en:"Cormorant Garamond","Times New Roman",serif;

  /* ── 文字の大きさ（PC） ── */
  --mg-fs-en-title:44px;       /* セクションの英字見出し */
  --mg-fs-ja-sub:16px;         /* その下の副見出し */
  --mg-fs-lead:30px;           /* ⑤⑥ 中央の大見出し */
  --mg-fs-body:15px;
  --mg-fs-small:14.5px;
  --mg-fs-band:30px;           /* ④⑦ */
  --mg-fs-loop:22px;           /* ⑥ 中央の円の中 */
  --mg-fs-cta:17px;
  --mg-fs-cta-top:15px;

  /* ── 文字の大きさ（SP ≤760px） ── */
  --mg-fs-en-title-sp:32px;
  --mg-fs-lead-sp:21px;
  --mg-fs-band-sp:21px;
  --mg-fs-loop-sp:18px;

  /* ── 字間・行間・幅 ── */
  --mg-tracking:.06em;
  --mg-tracking-head:.12em;
  --mg-leading:2;
  --mg-measure:27em;           /* 本文の1行の最大幅（約25字） */

  /* ── 余白 ── */
  --mg-sec-pad-y:88px;
  --mg-sec-pad-y-bottom:100px;
  --mg-sec-pad-x:6%;
  --mg-sec-pad-y-sp:56px;
  --mg-sec-pad-x-sp:22px;
  --mg-radius-card:14px;
  --mg-radius-faq:10px;

  /* ── 寸法 ── */
  --mg-top-logo-w:34%;         /* ① ロゴ（PC） */
  --mg-loop-size:340px;        /* ⑥ 中央の円 */
  --mg-loop-size-sp:280px;
  --mg-band-h:440px;
  --mg-band-h-sp:320px;
  --mg-bp:760px;               /* 参考：SP の切り替え幅 */

  /* ── 動き ── */
  --mg-ease:cubic-bezier(.22,.61,.36,1);
  --mg-dur-fade:.9s;
  --mg-dur-hover:.3s;
}

/* U0: 共通部品に必要な追加トークン。既存トークンは変更しない。 */
.mg {
  --mg-zero: 0;
  --mg-full: 100%;
  --mg-weight-normal: 400;
  --mg-weight-medium: 500;
  --mg-leading-en-title: 1.1;
  --mg-heading-gap: 10px;
  --mg-cta-gap: 14px;
  --mg-cta-pad-y: 17px;
  --mg-cta-pad-right: 38px;
  --mg-cta-pad-left: 18px;
  --mg-radius-pill: 999px;
  --mg-radius-circle: 50%;
  --mg-mark-size: 36px;
  --mg-mark-ring-width: 2px;
  --mg-fs-mark: 10px;
  --mg-focus-width: 2px;
  --mg-focus-offset: 4px;
  --mg-vh-size: 1px;
  --mg-fs-cta-sp: 16px;
  --mg-cta-pad-y-sp: 16px;
  --mg-cta-pad-right-sp: 28px;
  --mg-cta-pad-left-sp: 16px;
}

/* U1: TOPの位置・比率・ロゴの余白と小さいCTA（見本どおり）。 */
.mg {
  --mg-top-ratio: 3 / 2;
  --mg-top-left: 53%;
  --mg-top-center: 50%;
  --mg-top-center-shift: -50%;
  --mg-top-logo-trim-start: -7%;
  --mg-top-logo-trim-end: -9%;
  --mg-top-cta-gap: 22px;
  --mg-top-cta-pad-y: 14px;
  --mg-top-cta-pad-right: 30px;
  --mg-top-cta-pad-left: 14px;
  --mg-top-mark-size: 30px;
  --mg-top-fs-mark: 9px;
}

/* U1手直し: SP・A案（11/10）。 */
.mg {
  --mg-top-a-photo-ratio: 3 / 2;
  --mg-top-a-bg-x: 15%;
  --mg-top-a-logo-w: 86%;
  --mg-top-a-photo-gap: 30px;
  --mg-top-a-cta-gap: 20px;
  --mg-top-a-pad-bottom: 40px;
}

/* U2: プロフィール（確定見本の数値）。 */
.mg {
  --mg-profile-columns: 55% 45%;
  --mg-profile-base-size: 16px;
  --mg-profile-pad-top: 72px;
  --mg-profile-pad-right: 4%;
  --mg-profile-pad-bottom: 64px;
  --mg-profile-photo-position: 70% 30%;
  --mg-profile-fade-angle: 90deg;
  --mg-profile-fade-clear: rgba(255,255,255,0);
  --mg-profile-fade-end: 18%;
  --mg-profile-paragraph-gap: 1.1em;
  --mg-profile-label-gap: 4px;
  --mg-profile-label-size: 12px;
  --mg-profile-label-tracking: .18em;
  --mg-profile-name-gap: 20px;
  --mg-profile-name-size: 22px;
  --mg-profile-name-tracking: .14em;
  --mg-profile-motto-size: 14px;
  --mg-profile-motto-tracking: .1em;
  --mg-profile-single-column: 1fr;
  --mg-profile-photo-order-sp: -1;
  --mg-profile-photo-ratio-sp: 4 / 3;
  --mg-profile-pad-y-sp: 28px;
  --mg-profile-body-size-sp: 14px;
}

/* U3: OUR PROBLEMと帯（確定見本の数値）。 */
.mg {
  --mg-problem-base-size: 16px;
  --mg-problem-pad-x: 7%;
  --mg-problem-pad-bottom: 96px;
  --mg-problem-columns: 44% 56%;
  --mg-problem-body-gap: 48px;
  --mg-problem-illust-max: 440px;
  --mg-problem-question-size: 21px;
  --mg-problem-question-tracking: .08em;
  --mg-problem-question-leading: 1.7;
  --mg-problem-question-gap: 22px;
  --mg-problem-lead-gap: 30px;
  --mg-problem-check-gap: 36px;
  --mg-problem-check-pad-y: 20px;
  --mg-problem-check-pad-x: 24px;
  --mg-problem-check-indent: 1.6em;
  --mg-problem-turn-size: 19px;
  --mg-problem-turn-gap: 18px;
  --mg-problem-note-gap: 26px;
  --mg-problem-end-size: 17px;
  --mg-problem-end-tracking: .1em;
  --mg-problem-pad-bottom-sp: 64px;
  --mg-problem-single-column: 1fr;
  --mg-problem-body-gap-sp: 28px;
  --mg-problem-illust-max-sp: 260px;
  --mg-problem-question-size-sp: 18px;
  --mg-band-leading: 1.9;
  --mg-band-tracking: .16em;
  --mg-band-shadow-y: 1px;
  --mg-band-shadow-blur: 12px;
}

/* U4: ABOUT COMMUNITY（確定見本の寸法）。 */
.mg {
  --mg-about-base-size: 16px;
  --mg-about-pad-x: 7%;
  --mg-about-lead-leading: 1.8;
  --mg-about-lead-top: 56px;
  --mg-about-lead-bottom: 52px;
  --mg-about-columns: repeat(3, 1fr);
  --mg-about-pillar-gap: 32px;
  --mg-about-pillars-max: 980px;
  --mg-about-icon-size: 150px;
  --mg-about-icon-gap: 18px;
  --mg-about-copy-tracking: .08em;
  --mg-about-concept-tracking: .32em;
  --mg-about-concept-top: 84px;
  --mg-about-concept-bottom: 26px;
  --mg-about-message-leading: 2.1;
  --mg-about-pad-bottom-sp: 64px;
  --mg-about-lead-gap-sp: 36px;
  --mg-about-single-column: 1fr;
  --mg-about-pillar-gap-sp: 36px;
  --mg-about-icon-size-sp: 120px;
  --mg-about-concept-size-sp: 22px;
  --mg-about-concept-tracking-sp: .2em;
  --mg-about-concept-top-sp: 56px;
}

/* U5: COMMUNITY ACTIVITY（見本の寸法・配置）。 */
.mg {
  --mg-act-base-size: 16px;
  --mg-act-pad-bottom: 104px;
  --mg-act-heading-leading: 1.75;
  --mg-act-heading-tracking: .1em;
  --mg-act-heading-top: 60px;
  --mg-act-heading-bottom: 48px;
  --mg-act-step-size: 1.7em;
  --mg-act-step-tracking: .02em;
  --mg-act-step-leading: 1;
  --mg-act-step-left: .2em;
  --mg-act-step-top: 96px;
  --mg-act-card-columns: repeat(3, 1fr);
  --mg-act-card-gap: 28px;
  --mg-act-cards-max: 1040px;
  --mg-act-card-title-size: 25px;
  --mg-act-card-title-tracking: .2em;
  --mg-act-card-title-gap: 16px;
  --mg-act-description-size: 14px;
  --mg-act-copy-tracking: .08em;
  --mg-act-description-gap: 18px;
  --mg-act-check-leading: 2.1;
  --mg-act-check-indent: 1.4em;
  --mg-act-card-image-max: 240px;
  --mg-act-card-image-top: 20px;
  --mg-act-side-column: 1fr;
  --mg-act-two-gap: 24px;
  --mg-act-two-max: 1180px;
  --mg-act-items-flex: 1;
  --mg-act-item-gap: 20px;
  --mg-act-items-max: 340px;
  --mg-act-head-gap: 30px;
  --mg-act-head-image-height: 130px;
  --mg-act-head-image-gap: 10px;
  --mg-act-name-size: 38px;
  --mg-act-name-tracking: .14em;
  --mg-act-sub-size: 13px;
  --mg-act-item-icon-column: 52px;
  --mg-act-item-icon-gap: 14px;
  --mg-act-item-icon-size: 44px;
  --mg-act-item-title-size: 16px;
  --mg-act-item-description-size: 13.5px;
  --mg-act-item-leading: 1.9;
  --mg-act-loop-stroke: 7;
  --mg-act-pad-bottom-sp: 64px;
  --mg-act-heading-size-sp: 20px;
  --mg-act-heading-gap-sp: 36px;
  --mg-act-cards-gap-sp: 48px;
  --mg-act-two-gap-sp: 36px;
}

/* U6: MEMBER VOICE（見本のカード寸法）。 */
.mg {
  --mg-voice-base-size: 16px;
  --mg-voice-card-gap: 28px;
  --mg-voice-cards-max: 1080px;
  --mg-voice-cards-top: 56px;
  --mg-voice-card-width: calc((100% - 56px) / 3);
  --mg-voice-card-min: 260px;
  --mg-voice-card-pad-top: 32px;
  --mg-voice-card-pad-x: 26px;
  --mg-voice-card-pad-bottom: 30px;
  --mg-voice-avatar-size: 104px;
  --mg-voice-avatar-gap: 16px;
  --mg-voice-attribute-size: 17px;
  --mg-voice-attribute-tracking: .08em;
  --mg-voice-area-size: 12.5px;
  --mg-voice-area-top: 4px;
  --mg-voice-area-bottom: 16px;
  --mg-voice-copy-tracking: .05em;
  --mg-voice-paragraph-gap: .9em;
  --mg-voice-pad-bottom-sp: 64px;
  --mg-voice-card-gap-sp: 20px;
  --mg-voice-cards-top-sp: 32px;
}

/* U7: FAQとLINE（見本の寸法）。 */
.mg {
  --mg-faq-base-size: 16px;
  --mg-faq-list-max: 760px;
  --mg-faq-list-top: 48px;
  --mg-faq-list-gap: 16px;
  --mg-faq-border-width: 1px;
  --mg-faq-text-column: 1fr;
  --mg-faq-arrow-column: 20px;
  --mg-faq-summary-pad-y: 22px;
  --mg-faq-summary-pad-x: 24px;
  --mg-faq-question-size: 16px;
  --mg-faq-question-leading: 1.7;
  --mg-faq-number-size: 22px;
  --mg-faq-arrow-size: 10px;
  --mg-faq-arrow-border: 2px;
  --mg-faq-arrow-angle: 45deg;
  --mg-faq-answer-padding: 0 24px 24px calc(24px + 2.2em);
  --mg-faq-answer-tracking: .05em;
  --mg-faq-pad-bottom-sp: 64px;
  --mg-faq-summary-pad-y-sp: 18px;
  --mg-faq-summary-pad-x-sp: 16px;
  --mg-faq-question-size-sp: 15px;
  --mg-faq-answer-padding-sp: 0 16px 20px;
  --mg-line-base-size: 16px;
  --mg-line-pad-top: 96px;
  --mg-line-pad-bottom: 104px;
  --mg-line-en-tracking: .08em;
  --mg-line-title-size: 26px;
  --mg-line-title-top: 14px;
  --mg-line-title-bottom: 24px;
  --mg-line-message-leading: 2.1;
  --mg-line-message-max: 30em;
  --mg-line-message-bottom: 36px;
  --mg-line-id-size: 13px;
  --mg-line-id-tracking: .1em;
  --mg-line-id-top: 16px;
  --mg-line-pad-top-sp: 64px;
  --mg-line-pad-bottom-sp: 72px;
  --mg-line-en-size-sp: 34px;
  --mg-line-title-size-sp: 20px;
}

/* U7手直し: 番号の間隔・PC回答の字下げ・内側のフォーカス枠。 */
.mg {
  --mg-faq-number-gap: .6em;
  --mg-faq-number-column-pc: calc(2.2 * var(--mg-faq-question-size));
  --mg-faq-number-column-sp: calc(2.2 * var(--mg-faq-question-size-sp));
  --mg-faq-answer-left-pc: calc(var(--mg-faq-summary-pad-x) + var(--mg-faq-number-column-pc) + .6 * var(--mg-faq-question-size));
  --mg-faq-focus-inset: -3px;
}

/* U8: 静止した光の帯・写真・白い帯（見本どおり）。 */
.mg {
  --mg-foot-base-size: 16px;
  --mg-foot-band-h: 440px;
  --mg-foot-band-h-sp: 300px;
  --mg-foot-glow-clear-white: rgba(255,255,255,0);
  --mg-foot-glow-clear-3: rgba(214,228,236,0);
  --mg-foot-glow-clear-4: rgba(200,218,226,0);
  --mg-foot-background:
    radial-gradient(circle at 18% 30%,var(--mg-foot-glow-1) 0,var(--mg-foot-glow-clear-white) 22%),
    radial-gradient(circle at 70% 22%,var(--mg-foot-glow-2) 0,var(--mg-foot-glow-clear-white) 18%),
    radial-gradient(circle at 40% 75%,var(--mg-foot-glow-3) 0,var(--mg-foot-glow-clear-3) 30%),
    radial-gradient(circle at 85% 70%,var(--mg-foot-glow-4) 0,var(--mg-foot-glow-clear-4) 26%),
    linear-gradient(160deg,var(--mg-foot-a),var(--mg-foot-b) 55%,var(--mg-foot-c));
  --mg-foot-logo-width: min(380px,70%);
  --mg-foot-photo-overlap: -120px;
  --mg-foot-photo-pad-x: 4%;
  --mg-foot-photo-ratio: 3 / 2;
  --mg-foot-photo-small-width: 16%;
  --mg-foot-photo-large-width: 32%;
  --mg-foot-photo-medium-width: 24%;
  --mg-foot-photo-small-bottom: 56px;
  --mg-foot-photo-medium-bottom: 28px;
  --mg-foot-shadow-y: 6px;
  --mg-foot-shadow-blur: 24px;
  --mg-foot-bar-top: 72px;
  --mg-foot-bar-bottom: 44px;
  --mg-foot-sns-gap: 22px;
  --mg-foot-sns-size: 40px;
  --mg-foot-sns-border-width: 1px;
  --mg-foot-sns-font-size: 13px;
  --mg-foot-copy-size: 12.5px;
  --mg-foot-photo-overlap-sp: -60px;
  --mg-foot-photo-large-width-sp: 58%;
  --mg-foot-photo-medium-width-sp: 42%;
  --mg-foot-photo-medium-bottom-sp: 18px;
}

/* M: フェード距離・ホバーの移動量・開いた矢印。 */
.mg {
  --mg-fade-distance: 16px;
  --mg-fade-visible: 1;
  --mg-cta-hover-rise: -2px;
  --mg-faq-arrow-open-angle: 225deg;
}