@charset "UTF-8";

:root {
    /* ==========================================================================
        1. デザイン基準値 (計算用)
    ========================================================================== */
    --width-pc: 1440;    /* PCデザイン幅 (単位なし) */
    --width-sp: 375;     /* SPデザイン幅 (単位なし) */

    /* ==========================================================================
        2. カラーパレット (サイト内の色を一元管理)
    ========================================================================== */
    --black: #000000;
    --white: #ffffff;
    --gray: #e6e5e5;
    --gray2: #616568;
    --gray3: #999999;
    --gray4: #f2f2f2;
    --gray5: #333333;
    --yellow: #ffff00;
    --blue: #003d73;
    --blue2: #004098;
    --blue3: #082f4e;
    --red: #c1272d;
    --color-main: var(--blue);    /* 伸栄工業ブルー (ボタン、見出しなど) */
    --color-accent: var(--red);  /* アクセントレッド (PDFタグ、注意書きなど) */
    --color-text: var(--black);    /* 基本テキスト色 */
    --color-bg: var(--white); /* セクション背景用グレー */
    --color-bg-sub: var(var(--blue)); /* ヘッダー背景などの濃い色 */

    /* ==========================================================================
        3. フォント設定
    ========================================================================== */
    --font-base: "Noto Sans JP", sans-serif;
    --font-oswald: "Oswald", sans-serif;
    
    --font-weight__regular: 400;
    --font-weight__medium: 500;
    --font-weight__semibold: 600;
    --font-weight__bold: 700;
    --font-weight__black: 900;
    
    /* ==========================================================================
        4. Z-index階層管理 (重なり順)
    ========================================================================== */
    --z-back: -1;      /* 背景装飾 */
    --z-base: 1;       /* 通常コンテンツ */
    --z-header: 100;   /* ヘッダー固定時 */
    --z-modal: 500;    /* モーダル・ポップアップ */
    --z-bot: 9999;     /* チャットボット (最前面) */

    /* ==========================================================================
        5. レイアウト・サイズ
    ========================================================================== */
    --header-height: 87px; /* ヘッダーの高さ (追従メニュー等で使う場合) */
    --width-inner: 100rem; /* コンテンツ幅 (例: 1000px相当) */
}

/* ========================================================================== */
/* 基本設定 (public.cssの内容を継承 + フルード化)
/* ========================================================================== */
html {
    /* * PCのフォントサイズ計算
     * 計算式: 100vw / (基準幅 / 10)
     * 例: 1440pxのとき 1rem = 10px
     */
    font-size: calc(100vw / (var(--width-pc) / 10));
    scroll-behavior: smooth;
    overflow-y: scroll; /* スクロールバーによるガタつき防止 */
}

body {
    margin: 0;
    padding: 0;
    /* * 基準文字サイズ
     * 1rem = 10px計算なので、1.6rem = 16px相当
     */
    font-size: 1.6rem;
    font-family: var(--font-base);
    line-height: 1.75;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    position: relative;
    width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 画像設定 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像下の隙間リセット */
}

/* リンク画像のホバー */
a:hover img {
    opacity: 0.7;
    transition: opacity 0.3s;
}

/* ボタンリセット */
button {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* ========================================================================== */
/* ユーティリティ (PC/SP 表示切り替え)
/* ========================================================================== */
.pc_only   { display: block !important;  }
.pc_flex   { display: flex !important;  }
.pc_inline { display: inline !important; }
.sp_only   { display: none !important;   }

/* ========================================================================== */
/* レイアウト共通
/* ========================================================================== */
.lp-wrapper {
    position: relative;
    z-index: var(--z-base);
    overflow-x: hidden; /* 横スクロール防止 */
    width: 100%;
}

/* コンテンツ幅を制限したい場合に使用 */
.inner {
    width: 100%;
    max-width: 1000px; /* 必要に応じて 100rem 等に変更 */
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========================================================================== */
/* レスポンシブ設定 (SP: 768px以下)
/* ========================================================================== */
@media screen and (max-width: 768px) {
    html {
        /* * SPのフォントサイズ計算
         * 計算式: 100vw / (基準幅 / 10)
         * 例: 375pxのとき 1rem = 10px
         */
        font-size: calc(100vw / (var(--width-sp) / 10));
    }

    /* 表示切り替えクラスの挙動反転 */
    .pc_only   { display: none !important;  }
    .pc_flex   { display: none !important;  }
    .pc_inline { display: none !important;  }
    .sp_only   { display: block !important; }

}