/*
 * base.css — リセット、デザイントークン、タイポグラフィ
 * 全ページで読み込む。他のCSSはすべてこれに依存する。
 */

/* ----------------------------------------
 * デザイントークン
 *
 * 値は Figma の Variables 共有後に確定する。
 * 旧テーマにはカスタムプロパティが0個で、色・余白が各所にベタ書きされていた
 * (docs/04-tech-findings.md)。本テーマでは必ずここを経由させる。
 * ---------------------------------------- */
:root {
    /* ================================================
     * カラー (Figma node 117:1190 / 1:45 確定 2026-09-16)
     * ================================================ */

    /* テキスト */
    --color-text:        #212121;   /* black.main */
    --color-text-sub:    #474747;   /* black.sub */
    --color-bg:          #ffffff;   /* white */

    /* グレースケール */
    --color-gray:        #7A7A7A;   /* gray.main */
    --color-gray-sub:    #cccccc;   /* gray.sub */
    --color-gray-light:  #ebebeb;   /* gray.light */

    /* ブランドカラー (Figma node 1:45) */
    --color-brand-sky:         #92C5E2;   /* Miraillu Sky */
    --color-brand-magenta:     #E51284;   /* Miraillu Magenta */
    --color-brand-blue:        #4B7FC0;   /* Miraillu Blue */
    --color-brand-blue-light:  #F2F8FF;   /* Miraillu Blue light */
    --color-brand-rose:        #E61357;   /* Miraillu Rose */
    --color-brand-rose-light:  #FDFAFB;   /* Miraillu Rose light */
    --color-brand-violet:      #8C1988;   /* Miraillu Violet */
    --color-brand-teal:        #1A9F88;   /* Miraillu Teal */
    --color-brand-lavender:    #BBAAD1;   /* Miraillu Lavender */
    --color-brand-amber:       #FBCA72;   /* Miraillu Amber */
    --color-brand-amber-light: #FEF7EA;   /* Miraillu Amber light */

    /* セマンティック (用途別エイリアス) */
    --color-tob: var(--color-brand-blue);   /* toB側アクセント(仮) */
    --color-toc: var(--color-brand-teal);   /* toC側アクセント(仮) */

    /* ================================================
     * タイポグラフィ (Figma node 117:1013 確定 2026-09-16)
     * 日本語: Noto Sans JP / 欧文・数字: Roboto
     * ================================================ */
    --font-base:    "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-en:      "Inter", sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.75;


    /* ================================================
     * 余白 / レイアウト
     * ================================================ */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;

    --radius-sm: 4px;
    --radius-md: 8px;

    /* シャドウ (FloatShadow: node 117:1190) */
    --shadow-float: 0 3px 16px 0 rgba(144, 164, 174, 0.30);

    --container-max: 1440px;
}

/* ----------------------------------------
 * リセット
 * ---------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 80px;
}

@media (max-width: 769px) {
    [id] {
        scroll-margin-top: 60px;
    }
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    color: inherit;
}

.b-contact-cta__heading-line { display: inline; }
@media (max-width: 769px) {
    .b-contact-cta__heading-line { display: block; }
}

.br-sp { display: none; }
.br-pc { display: inline; }
@media (max-width: 768px) {
    .br-sp { display: inline; }
    .br-pc { display: none; }
}