/* ====================================
   1. ベースのスタイル（リセット）
   ==================================== */
html {
    scroll-behavior: smooth; /* ← この1行を追加するだけ！ */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height: 1.6;
    color: #333; /* 文字の色：濃いグレー */
}

a {
    text-decoration: none; /* リンクの下線を消す */
}

li {
    list-style: none; /* リストの・を消す */
}

/* ====================================
   2. ヘッダーのデザイン
   ==================================== */
header {
    background-color: #2c3e50; /* 背景色：落ち着いた紺色 */
    color: #fff;               /* 文字色：白 */
    display: flex;             /* 横並びにする魔法 */
    justify-content: space-between; /* 両端に配置 */
    align-items: center;       /* 上下の中心を揃える */
    padding: 10px 40px;        /* 内側の余白 */
    position: fixed;           /* 画面上部に固定 */
    width: 100%;               /* 横幅いっぱい */
    top: 0;
    z-index: 100;              /* 一番手前に表示 */
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

nav ul {
    display: flex; /* メニューを横並びに */
}

nav li {
    margin-left: 30px; /* メニュー同士の間隔 */
}

nav a {
    color: #fff; /* リンクの文字色を白に */
    font-weight: bold;
    transition: color 0.3s; /* 色が変わる時のアニメーション時間 */
}

nav a:hover {
    color: #f1c40f; /* マウスを乗せた時の色：黄色 */
}

/* ====================================
   3. メインビジュアルのデザイン
   ==================================== */
#main-visual {
    width: 100%;
    height: 100vh; /* 画面の高さ100%にする（Viewport Height） */
    
    /* 背景画像の設定（フィルター＋画像URL） */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1352&q=80');
    background-size: cover;    /* 画像を隙間なく埋める */
    background-position: center; /* 画像の中心を表示 */
    
    display: flex;             /* 中身を並べる魔法 */
    flex-direction: column;    /* 縦並びにする */
    justify-content: center;   /* 上下の中心 */
    align-items: center;       /* 左右の中心 */
    
    color: #fff;               /* 文字は白 */
    text-align: center;        /* 文章を中央揃え */
    padding-top: 60px;         /* ヘッダーの高さ分だけ余白を空ける */
}

#main-visual h1 {
    font-size: 48px;           /* タイトルを大きく */
    margin-bottom: 20px;       /* 下に余白 */
    letter-spacing: 0.1em;     /* 文字の間隔を少し広げて上品に */
    text-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 文字に影をつけて読みやすく */
}

#main-visual p {
    font-size: 20px;
    font-weight: bold;
}

/* スマホ用の調整（レスポンシブ） */
@media screen and (max-width: 768px) {
    #main-visual h1 {
        font-size: 28px; /* スマホでは文字を小さく */
        padding: 0 20px;
    }
    #main-visual p {
        font-size: 16px;
        padding: 0 20px;
    }
}

/* ====================================
   4. 全セクション共通のデザイン
   ==================================== */
section {
    padding: 80px 20px; /* 上下にたっぷり余白を取る */
    text-align: center; /* 中身を中央揃えに */
}

.section-title {
    font-size: 36px;       /* タイトルを大きく */
    margin-bottom: 60px;   /* 下に余白 */
    display: inline-block;
    border-bottom: 2px solid #f1c40f; /* 黄色の下線 */
    padding-bottom: 10px;
}

/* ====================================
   5. Aboutエリアのデザイン
   ==================================== */
.about-content p {
    max-width: 800px;  /* 文字が横に広がりすぎないように制限 */
    margin: 0 auto 30px; /* 中央揃え + 下に余白 */
    text-align: left;    /* 文章自体は左揃えで読みやすく */
    line-height: 2;      /* 行間を広めに */
}

/* ====================================
   6. Skillsエリアのデザイン
   ==================================== */
.skill-list {
    display: flex;         /* 横並びにする */
    justify-content: center;
    flex-wrap: wrap;       /* 画面が狭いときは折り返す */
    gap: 30px;             /* カード同士の間隔 */
}

.skill-list li {
    width: 300px;          /* カードの幅 */
    background-color: #f9f9f9; /* 薄いグレーの背景 */
    padding: 30px;         /* 内側の余白 */
    border-radius: 10px;   /* 角を丸く */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* ほんのり影をつける */
    transition: transform 0.3s; /* 動く時間を設定 */
}

/* マウスが乗った時に浮き上がる演出 */
.skill-list li:hover {
    transform: translateY(-5px); /* ちょっと上に動く */
}

.skill-list h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #2c3e50;
}
/* ====================================
   7. Worksエリアのデザイン
   ==================================== */
#works {
    background-color: #f0f4f8; /* 背景を薄い水色にして区切りをつける */
}

.works-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

.work-item {
    width: 360px;          /* カードの幅 */
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;      /* 画像が角からはみ出さないように */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.work-item:hover {
    transform: translateY(-5px); /* マウスが乗ると浮く */
}

.work-item img {
    width: 100%;           /* 画像を横幅いっぱいに */
    height: 200px;         /* 高さを固定 */
    object-fit: cover;     /* 画像の比率を保ったままトリミング */
}

.work-info {
    padding: 20px;
    text-align: left;
}

.work-info h3 {
    margin-bottom: 10px;
    font-size: 22px;
}

.work-info p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ボタンのデザイン */
.btn-link {
    display: inline-block;
    background-color: #2c3e50;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s;
}

.btn-link:hover {
    background-color: #f1c40f; /* マウスを乗せると黄色に */
    color: #333;
}
/* ====================================
   8. Blogエリアのデザイン
   ==================================== */
.blog-card {
    background-color: #fff;
    border: 2px solid #f0f4f8; /* 薄い枠線 */
    border-radius: 10px;
    padding: 40px;
    max-width: 600px;      /* 横幅を制限して読みやすく */
    margin: 30px auto 0;   /* 中央揃え */
}

.blog-card h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

.blog-card p {
    margin-bottom: 25px;
    color: #666;
}

/* ====================================
   9. Contactエリアのデザイン
   ==================================== */
#contact {
    background-color: #2c3e50; /* ヘッダーと同じ紺色 */
    color: #fff;               /* 文字は白 */
}

#contact .section-title {
    border-bottom-color: #fff; /* 下線を白に変更 */
}

.contact-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

/* ツイッターボタンの特別色 */
.btn-twitter {
    background-color: #1DA1F2; /* Twitterの公式カラー */
}
.btn-twitter:hover {
    background-color: #0d8bd9;
}

/* メールボタンの特別色 */
.btn-mail {
    background-color: #fff;
    color: #333;
}
.btn-mail:hover {
    background-color: #ddd;
}

/* ====================================
   10. フッターのデザイン
   ==================================== */
footer {
    background-color: #1a252f; /* Contactよりさらに暗い色 */
    color: #7f8c8d;            /* 文字は暗めのグレー */
    text-align: center;
    padding: 20px;
    font-size: 14px;
}
/* ====================================
   11. ハンバーガーメニュー（スマホ用）
   ==================================== */

/* パソコン画面ではハンバーガーボタンを隠す */
.hamburger {
    display: none;
}

/* スマホ画面（幅768px以下）の設定 */
@media screen and (max-width: 768px) {

    /* 1. ハンバーガーボタンの見た目 */
    .hamburger {
        display: block; /* スマホでは表示する */
        position: fixed;
        top: 15px;
        right: 20px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 300; /* メニューよりさらに手前に */
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #fff; /* 線の色 */
        position: absolute;
        transition: transform 0.3s, opacity 0.3s; /* 動くアニメーション */
    }

    /* 3本の線の位置 */
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 12px; }
    .hamburger span:nth-child(3) { top: 24px; }

    /* 2. メニューが開いた時のボタンの変化（×印になる） */
    .hamburger.active span:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0; /* 真ん中の線を消す */
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg);
    }

    /* 3. メニュー本体（最初は隠しておく） */
    .global-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 画面の右外に隠しておく */
        width: 100%;  /* 全画面 */
        height: 100vh;
        background-color: rgba(44, 62, 80, 0.95); /* 紺色の半透明背景 */
        transition: right 0.3s; /* シュッと出てくるアニメーション */
        z-index: 200;
        
        /* 中身をど真ん中にする設定 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* メニューが開いた時（activeクラスがついた時） */
    .global-nav.active {
        right: 0; /* 画面内に出てくる */
    }

    /* スマホメニューの文字設定 */
    .global-nav ul {
        flex-direction: column; /* 縦並びにする */
        text-align: center;
    }

    .global-nav li {
        margin: 20px 0; /* 上下の間隔をあける */
        margin-left: 0; /* パソコン用の設定をリセット */
    }

    .global-nav a {
        font-size: 24px; /* 文字を大きく */
    }
}
/* ====================================
   12. Serviceエリアのデザイン（新規追加）
   ==================================== */
.service-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.service-card {
    width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.05);
    position: relative; /* バッジの位置調整用 */
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card h3 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 18px;
}

.service-price {
    font-size: 24px;
    font-weight: bold;
    color: #f1c40f; /* 金額を黄色に */
    margin-bottom: 15px;
}

.service-desc {
    font-size: 14px;
    text-align: left;
}

/* おすすめプランの特別デザイン */
.service-card.recommended {
    border: 3px solid #f1c40f; /* 枠線を太い黄色に */
    background-color: #fffcf5; /* 背景を薄い黄色に */
}

/* 「おすすめ」バッジ */
.badge {
    position: absolute;
    top: -15px;
    right: 20px;
    background-color: #f1c40f;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}