/* ==========================================================================
   common.css - CSS変数・基本タイポグラフィ・共通ユーティリティ
   ========================================================================== */

:root {
    /* Colors (デザインガイドライン準拠)
       #195DD9: ブランドアイデンティティカラー。カテゴリ表示、記事一覧ホバー時のタイトル、ヘッダーの「お問い合わせ」ボタン、SPハンバーガーメニューの3本線 等
       #343434: 本文・見出し等の一般テキスト、共通フッター下部の背景
       #F2F7FF: トップページの各セクション、コラム一覧PICK UP背景等、ゆるく区分けしたい背景
       #E82929: ヘッダー「お申し込み」ボタン、トップページ「重要なお知らせ」、フォームのエラー表示
       #FFFFFF: サイト背景
       #D9D9D9 / #BFBFBF: 区分けが必要な箇所で使う明るめ/中間のグレー(主にボーダー・仕切り線用) */
    --color-primary: #195dd9;
    --color-primary-light: #5F96FC;
    --color-primary-medium: #1754C4;
    --color-primary-dark: #123f97;
    --color-accent: #e82929;
    --color-accent-dark: #b71f1f;
    --color-text: #343434;
    --color-text-sub: #666666;
    --color-bg: #ffffff;
    --color-bg-sub: #f2f7ff;
    --color-bg-lightgray: #F8F8F8;
    --color-border: #d9d9d9;
    --color-border-strong: #bfbfbf;
    --color-highlight: #F3FE96;

    /* #0454D7 〜 #0688D7 の線形グラデーション: 遷移系ボタン・共通フッターCTA部分の背景 */
    --gradient-primary: linear-gradient(135deg, #0688d7, #0454d7);
    --gradient-primary-btn: linear-gradient(90deg, #0688d7, #0454d7, #0688d7);

    /* Layout */
    --container-width: 1200px;
    --header-height: 88px;
    --header-height-sp: 60px;

    /* Font: 日本語=Noto Sans CJK JP */
    --font-base: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --fz-base: 16px;

    /* 行間: 見出し1.5 / 地の文1.8 */
    --lh-heading: 1.5;
    --lh-body: 1.8;

    /* 文字間: 日本語0.06em(60/1000em) / 欧文(Poppins)は0 */
    --ls-jp: 0.06em;
}

/* ページ内ジャンプリンク(#で始まるアンカー)をスムーズスクロールにし、
   sticky/fixedなヘッダーの高さ分を自動でオフセットする(FAQカテゴリジャンプナビ等で使用) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}
@media (max-width: 992px) {
    html {
        scroll-padding-top: var(--header-height-sp);
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--font-base);
    font-size: var(--fz-base);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-jp);
    color: var(--color-text);
    background: var(--color-bg);
    /* 全幅セクション(.alignfull、page.css)で使う100vwは、
       縦スクロールバーの分だけ実際の表示幅より広く計算されるブラウザの仕様上、
       わずかに横スクロールが発生することがあるため、常に隠しておく */
    overflow-x: hidden;
    /* コンテンツ量が少ないページでもフッターが画面下端に張り付くように、
       header/.l-main/footerを縦積みのフレックスにし、.l-main側を可変で伸ばす
       (.l-main側のflexはlayout.cssで指定) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-heading);
}

/* 英数字のみのラベル・ロゴタイプ等、Poppins表示部分は文字間を0にする */
.u-en {
    letter-spacing: 0;
}

a {
    transition: opacity 0.2s ease;
}
a:hover {
    opacity: 0.7;
}

.container {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: 24px;
}

.u-tag {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    padding: 3px 14px 4px;
    line-height: 1.25;
    border-radius: 1rem;
}

.u-tag--outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.u-highlight {
    background: linear-gradient(transparent 60%, var(--color-highlight) 60%);
    color: var(--color-primary);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.t-al--left {
    text-align: left !important;
}
.t-al--center {
    text-align: center !important;
}
.t-al--right {
    text-align: right !important;
}
.c-bg--wh {
    background: var(--color-bg);
}
.c-bg--sb {
    background: var(--color-bg-sub);
}
.pc-block {display: block !important;}
.pc-inline {display: inline !important;}
.pc-inline-block {display: inline-block !important;}
.pc-flex {display: flex !important;}
.pc-grid {display: grid !important;}
.sp-block {display: none !important;}
.sp-inline {display: none !important;}
.sp-inline-block {display: none !important;}
.sp-flex {display: none !important;}
.sp-grid {display: none !important;}

@media (max-width: 768px) {
    .pc-block {display: none !important;}
    .pc-inline {display: none !important;}
    .pc-inline-block {display: none !important;}
    .pc-flex {display: none !important;}
    .pc-grid {display: none !important;}
    .sp-block {display: block !important;}
    .sp-inline {display: inline !important;}
    .sp-inline-block {display: inline-block !important;}
    .sp-flex {display: flex !important;}
    .sp-grid {display: grid !important;}
    .container {
        padding-inline: 16px;
    }
    .t-al-sp--left {
        text-align: left !important;
    }
    .t-al-sp--center {
        text-align: center !important;
    }
    .t-al-sp--right {
        text-align: right !important;
    }
}

/* reCAPTCHA v3のバッジ(右下固定)はCF7の仕様上、フォームを設置していない
   ページも含め全ページに読み込まれてしまうため、フォームがあるページ
   (お問い合わせ/資料請求関連。判定はinc/helpers.phpのmovfax_should_show_recaptcha_badge()
   がbody_classにhas-grecaptcha-badgeを付与する形で行う)以外では非表示にする。
   フォームがあるページでは表示したままにしておくことで、非表示時に必要な
   Google所定の同意文言をフォーム側に別途表示せずに済む */
.grecaptcha-badge {
    visibility: hidden;
}
body.has-grecaptcha-badge .grecaptcha-badge {
    visibility: visible;
    z-index: 1;
}