@charset "utf-8";

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

body {
  margin: 0;
  font-family: Arial, sans-serif, "メイリオ", Meiryo, "ヒラギノ角ゴシック",
    "Hiragino Sans", "Meiryo UI", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", "Yu Gothic UI",
    "ＭＳ ゴシック", "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN",
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ＭＳ Ｐゴシック", "MS PGothic";
  font-size: 16px;
  background-color: #fffbee;
  line-height: 1;
  color: #333;
  overflow-x: hidden; /* 追加: 横スクロールを防ぐ */
  height: auto; /* ページ全体の高さを設定 */
}
header {
  background-color: #a6e3e9;
  overflow: hidden;
  background-image: none;
  position: fixed; /* 画面上部に固定 */
  top: 0; /* 上端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 画面幅全体に広げる */
  z-index: 400; /* 他の要素より上に配置 */
  height: 160px; /* ヘッダーの高さを固定 */
}
#header_logo {
  float: left;
  margin-top: 36px;
}
#header_logo img {
  width: clamp(315px, 50%, 300px);
  height: auto; /* アスペクト比を保持 */
  max-width: 100%; /* 親要素の幅を超えないよう制限 */
}
#header_inner {
  width: 90%;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin-top: 6px;
  display: inline-flex;
  gap: 60px;
}

nav ul li {
  font-size: 24px;
  font-family: "Kiwi Maru", serif;
  color: #5c4d24;
}

header nav ul li a {
  color: #5c4d24; /* リンクのテキストカラーを設定 */
  text-decoration: none; /* 下線を削除 */
}
header nav ul li a:hover {
  color: #ff6f91; /* ホバー時の色（任意で変更） */
}

main {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上に揃える */
  min-height: 80vh;
  padding-top: 100px; /* ヘッダーとのスペース */
  padding-bottom: 100px; /* フッターとのスペース */
  box-sizing: border-box;
}

.contact-form {
  margin-top: 90px;
  width: 1160px; /* フォームの幅を縮小 */
  padding: 20px;
  background-color: #fdfdf9;
  border: 1px solid #a6e3e9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(5, 95, 251, 0.1);
  font-family: Arial, sans-serif;
  text-align: center;
}

.contact-form h2 {
  text-align: center;
  font-size: 2em;
  color: #49454f;
  margin-bottom: 10px;
  border-bottom: 4px solid #ffc75f; /* 太さと色を指定 */
  display: inline-block; /* 要素の幅に下線を合わせる */
}

.contact-form p {
  text-align: center;
  font-size: 16px;
  color: #5c4d24;
  margin-bottom: 20px;
  line-height: 1.2;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}
.form-group2 {
  display: block;
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px; /* space below label */
  text-align: left; /* or center if preferred */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-group2 label {
  display: block;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
  text-align: left;
}
.form-group2 textarea {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.required {
  color: red;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  width: 98%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.checkbox-group {
  display: flex;
  gap: 10px;
}

.checkbox-group label {
  font-size: 16px;
  color: #333;
}

.submit-button {
  display: inline-block;
  width: 15%;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background-color: #ff6f91;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  text-align: center;
  margin: 25px 0;
}

.submit-button:hover {
  background-color: #ff4b4b;
}

footer {
  font-family: "Kiwi Maru", serif;
  background-image: none;
}

.footer-bottom {
  background-color: #a6e3e9;
  padding: 15px 30px;
  color: #ffffff;
  height: 100%;
}
#footer-inner {
  width: 1200px;
  height: 160px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
}

/* ロゴのスタイル */
.footer-bottom .logo {
  width: 524px; /* ロゴの幅 */
  height: 123px; /* ロゴの高さ */
  display: block;
  margin-bottom: 12px; /* ロゴとspanの間にスペースを追加 */
}

#footer-inner span {
  margin-left: -462px;
  margin-top: 119px;
  color: #5c4d24;
  font-size: 1em;
}
/* フッター右側のスタイル */
.footer-right {
  text-align: center;
  margin-top: 67px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5em;
  color: #271d0f;
}

/* SNSアイコンのスタイル */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0 auto 16px;
}
.social-icons a {
  margin: 0 5px;
  display: inline-block;
}
.social-icons img {
  width: 80px;
  height: 80px;
}
#menu-toggle {
  display: none;
}

/* ハンバーガーメニュー用ボタン（モバイルでのみ表示） */
#overlay-button {
  position: absolute;
  top: 50%;
  right: 2em;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1000;
}

/* 3本線 (中央線) */
#overlay-button span {
  display: block;
  width: 35px;
  height: 2px;
  background-color: white; /* ← ここが重要。中央線を可視化するため */
  /* position: relative; */
  transition: all 0.2s ease-in-out;
  border-radius: 2px;
}

/* 上下の線 */
#overlay-button span:before,
#overlay-button span:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 6px;
  background-color: white;
  transition: all 0.2s ease-in-out;
  border-radius: 2px;
}
#overlay-button span:before {
  top: -10px;
}
#overlay-button span:after {
  top: 10px;
}

/* チェックONで「×」に変化 */
input[type="checkbox"]:checked ~ #overlay-button span {
  background: transparent;
}
input[type="checkbox"]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
}
input[type="checkbox"]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* オーバーレイ本体 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #a6e3e9;
  visibility: hidden;
  opacity: 0;
  z-index: 500;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

input[type="checkbox"]:checked ~ #overlay {
  visibility: visible;
  opacity: 1;
}

/* オーバーレイのメニュー */
#overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Kiwi Maru", serif;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  text-decoration: none;
  color: white;
  font-size: 2em;
  transition: color 0.2s ease;
}
#overlay ul li a:hover {
  color: #ff6f91;
}
/* ヘッダー内ロゴと検索ボックス */
#header_inner {
  flex-direction: column;
  align-items: center;
  height: auto;
  /* padding: 10px; */
}

#header_logo {
  margin: 0 auto 10px;
  float: none;
}

.search-box {
  float: none;
  margin: 10px auto;
  text-align: center;
}

#search-input {
  width: 70%;
  margin-bottom: 10px;
}

#search-button {
  width: auto;
  padding: 0 15px;
}

/* ナビゲーションメニュー */
nav ul {
  flex-direction: column;
  gap: 15px;
}

nav ul li {
  text-align: center;
}

/* =================================
  PCサイズ (最小幅769px)
  メニューを常時表示
================================= */
@media (min-width: 769px) {
  /* .nav-menu {
    display: flex;
  } */
  /* #overlay {
    display: none;
  } */
  .cta-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 16px;
  }
}

/* -------------------------------------------------- */
/* レスポンシブ対応: スマートフォン・タブレット向け */
/* -------------------------------------------------- */
@media (max-width: 1024px) {
  #menu-toggle {
    display: none;
  }
  #footer-inner {
    width: 90%;
    max-width: none;
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .footer-right {
    margin: 0;
    width: auto;
    text-align: center;
    font-size: 1em;
  }
  .social-icons {
    width: auto;
    justify-content: flex-end;
  }
  .social-icons img {
    width: 50px;
    height: 50px;
  }
  .footer-bottom .logo {
    max-width: 400px;
    width: auto;
    height: auto;
  }
}

/* #overlay-button の位置調整（モバイル） */
#overlay-button {
  position: absolute;
  top: 4.5em;
  right: 2em;
  cursor: pointer;
  z-index: 1000;
}

/* 3本線 (中央線) */
#overlay-button span {
  display: block;
  width: 35px;
  height: 2px;
  background-color: white; /* ← ここが重要。中央線を可視化するため */
  /* position: relative; */
  transition: all 0.2s ease-in-out;
  border-radius: 2px;
}

/* 上下の線 */
#overlay-button span:before,
#overlay-button span:after {
  content: "";
  position: absolute;
  width: 35px;
  height: 6px;
  background-color: white;
  transition: all 0.2s ease-in-out;
  border-radius: 2px;
}
#overlay-button span:before {
  top: -10px;
}
#overlay-button span:after {
  top: 10px;
}

/* チェックONで「×」に変化 */
input[type="checkbox"]:checked ~ #overlay-button span {
  background: transparent;
}
input[type="checkbox"]:checked ~ #overlay-button span:before {
  transform: rotate(45deg) translate(7px, 7px);
}
input[type="checkbox"]:checked ~ #overlay-button span:after {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* オーバーレイ本体 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #a6e3e9;
  visibility: hidden;
  opacity: 0;
  z-index: 500;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 表示ON */
input[type="checkbox"]:checked ~ #overlay {
  visibility: visible;
  opacity: 1;
}

/* オーバーレイのメニュー */
#overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Kiwi Maru", serif;
}
#overlay ul li {
  padding: 1em;
}
#overlay ul li a {
  text-decoration: none;
  color: white;
  font-size: 2em;
  transition: color 0.2s ease;
}
#overlay ul li a:hover {
  color: #ff6f91;
}
/* ヘッダー内ロゴと検索ボックス */
#header_inner {
  flex-direction: column;
  align-items: center;
  height: auto;
  /* padding: 10px; */
}

#header_logo {
  margin: 0 auto 10px;
  float: none;
  margin-top: 36px;
}

.search-box {
  float: none;
  margin: 10px auto;
  text-align: center;
}

#search-input {
  width: 70%;
  margin-bottom: 10px;
}

#search-button {
  width: auto;
  padding: 0 15px;
}

/* ナビゲーションメニュー */
nav ul {
  flex-direction: column;
  gap: 15px;
}

nav ul li {
  text-align: center;
}

/* --- スマートフォン向け（768px以下） --- */

/* --------スマートフォン向け（768px以下） -----------------------------------*/
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden; /* 横スクロール禁止 */
  }

  header {
    height: auto;
    padding: 10px;
  }

  #header_inner {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* ロゴと検索ボックスを縦並び */
    align-items: center;
  }

  #header_logo {
    margin: 10px auto;
  }

  .search-box {
    margin: 10px 0;
  }
  #search-button {
    width: 63px;
  }

  /* フォーム全体 */
  .contact-form {
    margin-top: 90px;
    width: 90%; /* 幅を90%に縮小 */
    padding: 15px;
    font-size: 14px; /* テキストサイズを小さく調整 */
  }
  .contact-form p {
    font-size: 14px;
  }

  /* フォームの各要素 */
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="tel"] {
    width: 100%; /* 入力欄を幅100%に変更 */
    padding: 10px;
  }

  .checkbox-group {
    flex-direction: column;
    gap: 5px;
  }

  /* 送信ボタン */
  .submit-button {
    width: 100%; /* ボタンを幅いっぱいに */
    padding: 10px;
    font-size: 16px;
  }
  .footer-bottom {
    background-color: #a6e3e9;
    padding: 0px 30px;
    color: #ffffff;
    height: 100%;
  }

  .footer-right {
    margin-top: 10px; /* SNS部分の間隔を調整 */
    font-size: 14px; /* フォントサイズを縮小 */
  }
  /* ハンバーガーメニューのチェックボックスを非表示 */
  input[type="checkbox"]#menu-toggle {
    display: none;
  }

  /* フォームのチェックボックスは表示 */
  input[type="checkbox"] {
    display: inline-block;
    width: auto;
    height: auto;
    margin-right: 10px; /* ラベルとの余白を調整 */
  }

  /* 小さなスマートフォン向け（480px以下） */
  @media screen and (max-width: 480px) {
    /* フォーム全体 */
    .contact-form {
      margin-top: 124px;
      font-size: 12px; /* 全体のフォントをさらに小さく */
      padding: 10px;
    }

    /* 入力フィールド */
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"] {
      padding: 8px;
      font-size: 12px;
    }

    /* ラベルの調整 */
    .form-group label {
      font-size: 12px;
    }

    /* チェックボックスグループ */
    .checkbox-group label {
      font-size: 12px;
    }

    /* 送信ボタン */
    .submit-button {
      font-size: 14px;
    }

    /* SNSアイコンのサイズ調整 */
    .social-icons img {
      width: 50px;
      height: 50px;
    }

    footer {
      font-size: 14px;
    }

    .footer-top {
      height: auto;
      padding: 20px;
      font-size: 15px;
    }

    #footer-inner {
      width: 100%;
      max-width: 1200px;
      height: auto;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .footer-bottom .logo {
      max-width: 200px; /* 必要に応じて変更 */
      width: 75%;
      height: auto;
      display: block;
      margin: 0 auto 12px;
      margin-top: 12px;
    }

    .footer-right {
      text-align: center;
      margin-top: 20px;
      font-size: 1em;
      color: #271d0f;
    }

    .footer-top {
      height: auto;
      padding: 20px;
      font-size: 15px;
    }

    #footer-inner span {
      margin-left: 0; /* 左のマイナスマージンを打ち消す */
      margin-top: 0; /* 上マージンも調整 */
      display: block; /* インライン要素であればブロック化 */
      text-align: center; /* テキストを中央寄せ */
      font-size: 0.8em;
    }
    .social-icons {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: nowrap;
      width: 100%;
      margin: 0 auto 16px;
    }
    .social-icons a {
      margin: 0 5px;
      display: inline-block;
    }
    .social-icons img {
      width: 40px;
      height: 40px;
    }
    /* 全画面オーバーレイ用のCSS */

    /* チェックボックスの表示 */
    input[type="checkbox"] {
      display: inline-block; /* チェックボックスを表示 */
      width: auto;
      height: auto;
      margin-right: 10px; /* ラベルとの余白を調整 */
    }

    #overlay-button {
      display: block;
      position: absolute;
      top: 50%;
      right: 2em;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 1000;
      user-select: none;
    }

    /* 3本線 (中央線) */
    #overlay-button span {
      display: block;
      width: 35px;
      height: 2px;
      background-color: white; /* ← ここが重要。中央線を可視化するため */
      /* position: relative; */
      transition: all 0.2s ease-in-out;
      border-radius: 2px;
    }

    /* 上下の線 */
    #overlay-button span:before,
    #overlay-button span:after {
      content: "";
      position: absolute;
      width: 35px;
      height: 6px;
      background-color: white;
      transition: all 0.2s ease-in-out;
      border-radius: 2px;
    }
    #overlay-button span:before {
      top: -10px;
    }
    #overlay-button span:after {
      top: 10px;
    }

    /* チェックONで「×」に変化 */
    input[type="checkbox"]:checked ~ #overlay-button span {
      background: transparent;
    }
    input[type="checkbox"]:checked ~ #overlay-button span:before {
      transform: rotate(45deg) translate(7px, 7px);
    }
    input[type="checkbox"]:checked ~ #overlay-button span:after {
      transform: rotate(-45deg) translate(7px, -7px);
    }

    /* オーバーレイ本体 */
    #overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #a6e3e9;
      visibility: hidden;
      opacity: 0;
      z-index: 500;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* 表示ON */
    input[type="checkbox"]:checked ~ #overlay {
      visibility: visible;
      opacity: 1;
    }

    /* オーバーレイのメニュー */
    #overlay ul {
      list-style: none;
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-family: "Kiwi Maru", serif;
    }
    #overlay ul li {
      padding: 1em;
      font-size: 20px;
    }
    #overlay ul li a {
      text-decoration: none;
      color: white;
      font-size: 1.5em;
      transition: color 0.2s ease;
    }
    #overlay ul li a:hover {
      color: #ff6f91;
    }
    /* スマホでは #overlay を表示、.nav-menu は非表示 */
    .nav-menu {
      display: none;
    }
    #overlay-button {
      display: block;
    }
    #overlay {
      display: block;
    }
  }
}