/* リセットCSS: すべての要素のマージンとパディングをリセットし、ボックスモデルを統一 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全体のフォント設定 */
body {
    font-family: "Kiwi Maru",'Arial', sans-serif; /* 使用するフォント */
    line-height: 1.6; /* 行間 */
    color: #333; /* 文字色 */
    background-color: #f4f4f4; /* 背景色 */
}

/* ヘッダー（ナビゲーションバー） */
header {
    background-color: #333; /* ヘッダーの背景色 */
    color: white; /* ヘッダー内の文字色 */
    padding: 20px 0; /* 上下の余白 */
    position: fixed; /* スクロールしてもヘッダーが固定される */
    width: 100%; /* 横幅を100%に設定 */
    top: 0; /* 画面上部に固定 */
    z-index: 100; /* 他の要素の上に表示される */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 下にシャドウを追加して浮き上がる効果 */
}

header .container {
    display: flex; /* Flexboxで横並びに */
    justify-content: space-between; /* 左右にスペースを開ける */
    align-items: center; /* 垂直方向に中央揃え */
    width: 80%; /* コンテナの幅を80%に設定 */
    margin: 0 auto; /* 横中央揃え */
}

/* ロゴ */
header .logo a {
    text-decoration: none; /* リンクの下線を消す */
    color: white; /* ロゴ文字の色 */
    font-size: 24px; /* ロゴの文字サイズ */
    font-weight: bold; /* ロゴを太字に */
}

/* ナビゲーションメニュー */
header nav ul {
    list-style: none; /* リストの点を消す */
    display: flex; /* 横並びにする */
}

header nav ul li {
    margin-left: 30px; /* リストアイテムの間隔 */
}

header nav ul li a {
    color: white; /* ナビゲーションリンクの文字色 */
    text-decoration: none; /* 下線を消す */
    font-size: 16px; /* 文字サイズ */
    font-weight: 500; /* 太さ */
}

/* ナビゲーションリンクのホバー効果 */
header nav ul li a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* ヒーローセクション（大きな背景画像） */
.hero {
    background-image: url('./image/background.jpg'); /* 背景画像（仮） */
    background-size: cover; /* 背景画像を要素のサイズに合わせて拡大 */
    background-position: center; /* 背景画像を中央に配置 */
    padding: 150px 0; /* 上下に十分なスペースを確保 */
    text-align: center; /* テキストを中央揃え */
    color: white; /* テキスト色 */
}

/* ヒーローセクションの見出し */
.hero h2 {
    font-size: 48px; /* 大きな文字サイズ */
    margin-bottom: 20px; /* 下にスペースを追加 */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.7), /* 横2px、縦2px、ぼかし4pxの黒い影 */
        -2px -2px 4px rgba(0, 0, 0, 0.7), /* 横-2px、縦-2px、ぼかし4pxの黒い影 */
        2px -2px 4px rgba(0, 0, 0, 0.7), /* 横2px、縦-2px、ぼかし4pxの黒い影 */
        -2px 2px 4px rgba(0, 0, 0, 0.7); /* 横-2px、縦2px、ぼかし4pxの黒い影 */
}

/* ヒーローセクションの説明文 */
.hero p {
    font-size: 20px; /* 文字サイズ */
    margin-bottom: 30px; /* 下にスペースを追加 */
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.7), /* 横2px、縦2px、ぼかし4pxの黒い影 */
        -2px -2px 4px rgba(0, 0, 0, 0.7), /* 横-2px、縦-2px、ぼかし4pxの黒い影 */
        2px -2px 4px rgba(0, 0, 0, 0.7), /* 横2px、縦-2px、ぼかし4pxの黒い影 */
        -2px 2px 4px rgba(0, 0, 0, 0.7); /* 横-2px、縦2px、ぼかし4pxの黒い影 */
}

/* ヒーローセクションのCTAボタン */
.hero .cta-button {
    padding: 15px 30px; /* ボタンの内側の余白 */
    background-color: #4CAF50; /* ボタンの背景色 */
    color: white; /* ボタン文字色 */
    text-decoration: none; /* 下線を消す */
    font-size: 18px; /* 文字サイズ */
    border-radius: 5px; /* 丸みをつける */
    transition: background-color 0.3s ease; /* 背景色の変更にスムーズなトランジションを追加 */
}

/* ボタンにホバー時の効果 */
.hero .cta-button:hover {
    background-color: #45a049; /* ホバー時に色を少し変える */
}

/* サービスセクション */
.services {
    background-color: #fff; /* 背景色 */
    padding: 80px 0; /* 上下に余白を設定 */
    text-align: center; /* テキストを中央揃え */
}

/* サービスセクションの見出し */
.services h2 {
    font-size: 32px; /* 文字サイズ */
    margin-bottom: 40px; /* 下にスペースを追加 */
}

/* サービスカードのコンテナ */
.service-cards {
    display: flex; /* サービスカードを横並びに */
    justify-content: space-around; /* カード間にスペースを確保 */
}

/* サービスカード */
.service-card {
    background-color: #f9f9f9; /* カード背景色 */
    width: 30%; /* カードの幅を30%に設定 */
    padding: 30px; /* カード内の余白 */
    margin: 10px; /* カード間の余白 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* シャドウ効果 */
    text-align: left; /* テキストを左寄せ */
}

/* サービスカードの見出し */
.service-card h3 {
    font-size: 20px; /* 見出しの文字サイズ */
    margin-bottom: 20px; /* 下にスペースを追加 */
}

/* サービスカードの説明文 */
.service-card p {
    font-size: 16px; /* 文字サイズ */
    margin-bottom: 10px;
}

/* サービスセクションのCTAボタン */
.service-card .cta-button {
    padding: 5px 15px; /* ボタンの内側の余白 */
    background-color: #4CAF50; /* ボタンの背景色 */
    color: white; /* ボタン文字色 */
    text-decoration: none; /* 下線を消す */
    font-size: 12px; /* 文字サイズ */
    border-radius: 5px; /* 丸みをつける */
    transition: background-color 0.3s ease; /* 背景色の変更にスムーズなトランジションを追加 */
}

/* フッター */
footer {
    background-color: #333; /* 背景色 */
    color: white; /* 文字色 */
    /*padding: 20px 0;*/ /* 上下に余白を設定 */
    text-align: center; /* テキストを中央揃え */
}

.gaminglight {
    /* 横長で虹色を作る */
    background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%;
    animation: gaminglight 2s linear infinite;
  }
  @keyframes gaminglight {
    /* backgroundを移動させる */
    100% { background-position-x: 200%; }
  }

.gaminglight:hover {
    /* 横長で虹色を作る */
    background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%;
    animation: gaminglight 0.5s linear infinite;
  }
  @keyframes gaminglight {
    /* backgroundを移動させる */
    100% { background-position-x: 200%; }
  }