/* =========================================================
   Home Story
   Main Stylesheet
========================================================= */


/* =========================================================
   1. Design Tokens
========================================================= */

:root {

    /* -------------------------
       Colors
    ------------------------- */

    /* Home Story メインカラー */
    --color-primary: #ff8a2a;

    /* オレンジ：ホバー時 */
    --color-primary-hover: #f27614;

    /* サブカラー：グリーン */
    --color-secondary: #3f5d4a;

    /* 基本文字色 */
    --color-text: #333333;

    /* 薄めの文字色 */
    --color-text-light: #666666;

    /* 背景 */
    --color-white: #ffffff;
    --color-bg: #ffffff;
    --color-bg-light: #f8f7f3;

    /* 境界線 */
    --color-border: #e5e5e5;


    /* -------------------------
       Font Size
    ------------------------- */

    --font-size-small: 14px;
    --font-size-base: 16px;
    --font-size-large: 20px;

    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;


    /* -------------------------
       Layout
    ------------------------- */

    --container-width: 1200px;

    /* セクション上下余白 */
    --section-space: 100px;


    /* -------------------------
       Border Radius
    ------------------------- */

    --radius-small: 6px;
    --radius-medium: 12px;
    --radius-large: 20px;


    /* -------------------------
       Shadow
    ------------------------- */

    --shadow-card:
        0 4px 20px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   2. Reset / Base
========================================================= */

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


html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    font-size: var(--font-size-base);
    line-height: 1.8;

    color: var(--color-text);
    background: var(--color-bg);

    -webkit-font-smoothing: antialiased;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.4;
}


p {
    margin-bottom: 1.5em;
}


a {
    color: inherit;
    text-decoration: none;
}


a:hover {
    text-decoration: none;
}


img {
    display: block;

    max-width: 100%;
    height: auto;
}


ul,
ol {
    margin: 0;
    padding: 0;
}


li {
    list-style: none;
}


button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   3. Common Layout
========================================================= */

.container {
    width: min(
        var(--container-width),
        calc(100% - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}


/* 各セクション共通 */

.section {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}


/* セクションタイトル */

.section-title {
    margin-bottom: 50px;

    font-size: var(--font-size-h2);
    font-weight: 700;
    text-align: center;

    color: var(--color-text);
}


/* =========================================================
   4. Header
========================================================= */

.site-header {
    position: relative;
    z-index: 100;

    width: 100%;

    background: var(--color-white);

    border-bottom:
        1px solid var(--color-border);
}


.site-header .container {
    display: flex;

    align-items: center;
    justify-content: space-between;

    min-height: 80px;
}


/* ロゴ */

.site-logo {
    display: inline-block;

    font-size: 24px;
    font-weight: 700;
    line-height: 1;

    color: var(--color-secondary);
}


/* =========================================================
   5. Global Navigation
========================================================= */

.global-nav ul {
    display: flex;

    align-items: center;

    gap: 32px;
}


.global-nav a {
    position: relative;

    display: block;

    padding: 10px 0;

    font-size: 15px;
    font-weight: 500;

    transition:
        color 0.3s ease;
}


.global-nav a:hover {
    color: var(--color-primary);
}


/* メニュー下線 */

.global-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 3px;

    width: 0;
    height: 2px;

    background: var(--color-primary);

    transition:
        width 0.3s ease;
}


.global-nav a:hover::after {
    width: 100%;
}


/* =========================================================
   6. Hero / First View
========================================================= */

.hero {
    display: flex;

    align-items: center;

    min-height: 600px;

    background: var(--color-bg-light);
}


.hero h1 {
    margin-bottom: 20px;

    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 0.03em;
}


.hero p {
    margin-bottom: 0;

    font-size: 18px;

    color: var(--color-text-light);
}


/* =========================================================
   7. Button
========================================================= */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 12px 30px;

    border: 0;

    border-radius: var(--radius-medium);

    cursor: pointer;

    font-weight: 600;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* メインボタン */

.button-primary {
    color: var(--color-white);

    background: var(--color-primary);
}


.button-primary:hover {
    color: var(--color-white);

    background: var(--color-primary-hover);

    transform: translateY(-2px);
}


/* =========================================================
   8. Card
========================================================= */

.card {
    overflow: hidden;

    background: var(--color-white);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-card);
}


/* =========================================================
   9. Footer
========================================================= */

.site-footer {
    padding: 50px 0;

    color: var(--color-white);

    background: var(--color-secondary);
}


.site-footer p {
    margin: 0;

    font-size: var(--font-size-small);
    text-align: center;
}


/* =========================================================
   10. Tablet
========================================================= */

@media (max-width: 1023px) {

    :root {
        --font-size-h1: 40px;
        --font-size-h2: 32px;

        --section-space: 80px;
    }


    .global-nav ul {
        gap: 20px;
    }


    .global-nav a {
        font-size: 14px;
    }


    .hero {
        min-height: 550px;
    }

}


/* =========================================================
   11. Smartphone
========================================================= */

@media (max-width: 767px) {

    :root {

        --font-size-base: 15px;

        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --font-size-h3: 22px;

        --section-space: 64px;
    }


    /* -------------------------
       Layout
    ------------------------- */

    .container {
        width: calc(100% - 32px);
    }


    /* -------------------------
       Header
    ------------------------- */

    .site-header .container {
        min-height: 70px;
    }


    .site-logo {
        font-size: 21px;
    }


    /*
     * 現在はスマホメニュー未実装のため
     * 一旦ナビゲーションを非表示。
     *
     * 次の工程でハンバーガーメニューへ変更します。
     */

    .global-nav {
        display: none;
    }


    /* -------------------------
       Hero
    ------------------------- */

    .hero {
        min-height: 500px;
    }


    .hero h1 {
        margin-bottom: 16px;

        line-height: 1.45;
    }


    .hero p {
        font-size: 16px;
    }


    /* -------------------------
       Section
    ------------------------- */

    .section-title {
        margin-bottom: 32px;
    }


    /* -------------------------
       Button
    ------------------------- */

    .button {
        min-height: 48px;

        padding: 12px 24px;
    }


    /* -------------------------
       Footer
    ------------------------- */

    .site-footer {
        padding: 40px 0;
    }


/* =========================================================
   Services
========================================================= */


/* =========================================================
   Floor Map
========================================================= */


/* =========================================================
   Works
========================================================= */





}