/* --- 共通設定 --- */
:root {
  --hiiragi-gray: rgb(53, 53, 53);
  --hiiragi-green: rgb(0, 147, 98);
  --bg-white: #ffffff;
}

body {
    margin: 0;
    padding: 0;
    color: var(--hiiragi-gray);
    background-color: var(--bg-white);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height: 1.8;
    letter-spacing: 0.05em;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }

.sp-only { 
    display: none; 
}

/* --- コンテナ --- */
.container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* --- ヘッダー --- */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
}

.logo h1 {
    margin: 0;
    margin: 0 0 0 -16px;    /* 一番右の数値をマイナスにすると、ロゴが左に動きます */
    padding: 0;
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--hiiragi-green);
}

.logo a {
    text-decoration: none !important;
    display: inline-block;
}

/* --- 3. ヘッダー（共通設定：PCは横並び） --- */
.global-nav ul {
    display: flex !important;   /* 強制的にFlexboxにする */
    flex-direction: row !important; /* PCでは絶対に「横（row）」 */
    gap: 25px;
    list-style: none !important;
    margin: 0;
    padding: 0;
}

/* --- メインコピー（左端を極限まで揃える） --- */
.hero { 
    padding: 100px 0; 
}

.main-copy {
    font-size: 2.0rem;    /* 読みやすいサイズへ微調整 */
    font-weight: 500;
    line-height: 1.6;
    /* 他のページで揃っているなら、HOMEの文字特性に合わせて左に3px寄せます */
    margin: 0 0 25px 0; 
    padding: 0;
    text-align: left;
}

.sub-copy {
    font-size: 1.1rem;
    color: var(--hiiragi-green);
    margin-left: 0;     /* 英語も揃えます */
}

/* フッター */
footer {
    padding: 60px 0;
    text-align: center;
    font-size: 0.8rem;
    border-top: 1px solid #eee;
}
.naming-origin .section-title {
    font-size: 1.2rem;
    margin-top: 40px;
}

.naming-origin .section-title .title-sub {
    font-size: 0.9rem;   /* 全体(1.2rem)に対して、さらに一回り小さく */
    font-weight: bold; /* 少し細くすると、より「補足」らしくなります */
    margin-left: 2px;    /* 柊との間隔を微調整 */
}

/* --- スマホ用設定（480px以下） --- */
@media screen and (max-width: 480px) {
    .sp-only { display: inline !important; }

    .header-inner { 
        flex-direction: column; 
        gap: 10px;               /* ★ 20px から 10px に縮小（ロゴとメニューの間隔） */
        padding: 20px 0;         /* ★ 追記：上下の余白を半分に削る */
        align-items: flex-start; 
    }

    /* ★ 追記：メインコピーを包む「hero」セクションの余白を大幅に削る */
    .hero { 
        padding: 30px 0;         /* PC版の 100px から 30px に縮小 */
    }

    /* メニュー項目を縦並びにする */
    .global-nav ul { 
        flex-direction: column !important;
        gap: 8px;               /* ★ 15px から 10px に詰めるとさらにコンパクトに */
        padding-left: 0;
    }
    /* ボタン自体の上下の余白も詰めたい場合は以下を追記 */
    .global-nav a {
        padding: 5px 0;        /* 上下に少しだけ余白を持たせると、押しやすさを保てます */
        display: block;        /* タップ範囲を横いっぱいに広げるため */
    }
}

    .main-copy { 
        font-size: 1.5rem !important; 
        margin-left: 0; 
        margin-top: 0;           /* ★ 念のため上マージンをゼロに */
    }
}