a {
  text-decoration: none;
}

/* General Styles */
body {
  font-family: Arial, sans-serif;
}

/* Header */
header {
  background-color: #FFF;
  color: #333;
  text-align: center;
  padding: 1em;
  padding-bottom: 0;
}

/* Main Visual */
#main-visual {
  height: 300px;
  background-color: #ccc;

}

/* Strengths */
#strengths {
  background-color: #eee;
  padding: 1em;
}

/* CTA */
#cta {
  text-align: center;
  margin: 2em 0;
}

/* Footer */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background-color: #333;
  color: white;
  z-index: 1000;
}

.footer-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer-button {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  width: 100%;
  /* 2つのボタンとギャップの合計で100%になるように調整 */
  border: 1px solid white;
  text-decoration: none;
  font-weight: bold;
  gap: 10px;
  transition: background-color 0.3s;
}

.footer-button:hover {
  background-color: #e60000;
}

.footer-icon {
  font-size: 1.2em;
}

.copyright {
  text-align: center;
  margin-top: 10px;
  font-size: 0.8em;
}

/* ボタンをPCで非表示 */
@media (min-width: 992px) {
  .footer-buttons {
    display: none;
  }
}


/* General styles */
header .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 14px;
}

.content-container p {
  line-height: 1.4em;

}


.logo img {
  max-width: 64%;
  height: auto;
}

.contact-info {
  display: none;
  /* Initially hidden for mobile */
}

/* For PC (Desktop) screens */
@media (min-width: 768px) {
  .contact-info {
    display: block;
  }

  .phone-number {
    font-size: 24px;
    display: block;
    color: red;
  }

  .reception-time {
    font-size: 14px;
  }
}

/* For SP (Mobile) screens */
@media (max-width: 767px) {
  .container {
    flex-direction: column;
    align-items: center;
  }

  .logo {
    margin-bottom: 10px;
  }
}

/* メインビジュアルの共通スタイル */
.main-visual {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  /* 画像がコンテナをはみ出さないように */
  margin-bottom: 2em;
}

.main-visual-img {
  display: block;
  /* 余白の削除 */
  width: 100%;
  /* コンテナに合わせてスケール */
}

/* SP (Mobile) スタイル */
@media (max-width: 767px) {
  .main-visual-img {
    content: url('img/fv-sp.jpg?20250627');
  }
}

/* PC (Desktop) スタイル */
@media (min-width: 768px) {
  .main-visual-img {
    content: url('img/fv-pc.jpg?20250627');
  }
}

/* おそうじ革命とは？セクション */
.about-section {
  text-align: center;
  /* 中央寄せ */
}

/* 中央のボタン */
.center-button {
  margin-bottom: 20px;
  /* 余白を調整 */
}

.menu-button {
  background-color: red;
  color: white;
  padding: 15px 30px;
  /* ボタンのパディング */
  border: none;
  /* ボーダーを消去 */
  border-radius: 8px;
  /* 角を丸める */
  font-size: 16px;
  /* テキストのサイズ */
  cursor: pointer;
  /* ホバー時にカーソルをポインタに */
  transition: background-color 0.3s;
  /* 色の変化を滑らかに */
  font-weight: bold;
}

/* ボタンのアイコンスタイル */
.menu-button i {
  margin-right: 10px;
  /* アイコンとテキストの間の余白 */
}

/* ホバー時のボタンの背景色 */
.menu-button:hover {
  background-color: #e60000;
}

/* SP (Mobile) スタイル */
@media (max-width: 767px) {
  .about-section {
    text-align: left;
    /* 左寄せ */
  }

  .about-section h2 {
    text-align: center;
    /* h2だけ中央寄せを維持 */
  }

  .center-button {
    text-align: center;
    /* ボタンだけ中央寄せを維持 */
  }
}

/* 中央の画像スタイル */
.center-image {
  text-align: center;
  margin-top: 20px;
  /* 画像の上に余白を追加 */
  width: 100%;
}

.center-image img {
  max-width: min(640px, 100%);
  /* 画像の最大幅をコンテナの幅に制限 */
  height: auto;
  /* 高さは自動的にアスペクト比を維持 */
  display: block;
  /* 余白の削除 */
  margin: 0 auto;
  /* 画像を中央寄せ */
}

/* Video styles */
#video .contents-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#video .video-wrapper {
  text-align: center;
  padding: 20px 0;
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9アスペクト比 */
  height: 0;
  max-width: min(100%, 640px);
  margin: 0 auto;
  /* 追加 */
}

#video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* CTA styles */
#cta {
  text-align: center;
  padding: 2em 0;
  background-color: #F5F5F5;
}

.cta-buttons {
  display: flex;
  justify-content: space-around;
  max-width: 500px;
  /* こちらは調整が必要かもしれません */
  margin: 20px auto 0 auto;
}

.cta-button {
  display: flex;
  /* フレックスボックスのレイアウトを適用 */
  align-items: center;
  /* アイコンとテキストを中央に配置 */
  justify-content: center;
  /* コンテンツをボタンの中央に配置 */
  gap: 10px;
  /* アイコンとテキストの間に間隔を設定 */
  background-color: red;
  color: white;
  font-weight: bold;
  border: none;
  padding: 16px 16px;
  border-radius: 10px;
  cursor: pointer;
  flex: 1;
  margin: 0 10px;
  transition: background-color 0.3s;
}

.cta-icon {
  font-size: 1.5em;
  /* アイコンのサイズを調整 */
}

.cta-button:hover {
  background-color: #e60000;
}

/* Popular Menu styles */
.menu-header {
  display: flex;
  align-items: center;
  /* アイコンと見出しを中央揃え */
}

#popular-menu,
#set-menu,
#other-menu,
#faqs,
#guarantee {
  padding-bottom: 1em;
}



#popular-menu .menu-header,
#set-menu .menu-header,
#other-menu .menu-header,
#about-us .menu-header,
#faqs .menu-header,
#guarantee .menu-header,
#precautions .menu-header,
#about-us .menu-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

#popular-menu .menu-icon,
#set-menu .menu-icon,
#other-menu .menu-icon,
#about-us .menu-icon,
#faqs .menu-icon,
#guarantee .menu-icon {
  margin-right: 10px;
  /* アイコンとテキストの間の余白を調整 */
  width: 48px;
  /* アイコンのサイズ */
  height: 48px;
  /* アイコンのサイズ */
}

/* ラッピング要素（例えば、カードを包含するコンテナ）のスタイル */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* カードを中央に配置 */
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  margin-bottom: 2em;
}

/* カード１ */

.card {
  /* border: 1px solid #ccc; */
  padding: 0.8em 0.4em;
  margin: 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: calc(48% - 10px);
  border-radius: 8px;
  max-width: 480px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* ドロップシャドウの追加 */
}


@media (max-width: 768px) {
  .card {
    width: 100%;
    /* margin: 8px; */
  }
}

.menu-image {
  max-width: 120px;
  /* 画像の最大幅を調整。必要に応じて変更してください */
  height: auto;
  margin-right: 10px;
  /* 画像とテキストの間の余白 */
}

.menu-content {
  flex: 1;
  /* 残りのスペースをすべて占有 */
}

.menu-content h3 {
  margin-top: 0;
  margin-bottom: 0.2em;
  font-size: 16px;
}

.catchphrase {
  font-size: 14px;
}

.price {
  color: red;
  font-weight: bold;
  margin: 0 0.2em;
  margin-bottom: 8px;
  font-size: 14px;
}

.price span {
  font-size: 2em;
}

.details-button {
  background-color: red;
  color: white;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s ease;
  margin-left: 2.2em;
}

.details-button:hover {
  background-color: #e60000;
}

/* カード１終了 */

/* カード２ */

.card-3col {
  padding: 0.8em 0.4em;
  margin: 0 8px;
  display: flex;
  flex-direction: column;
  /* 縦方向に要素を配置 */
  align-items: center;
  width: calc(33.33% - 10px);
  /* 3カラムのための変更 */
  border-radius: 8px;
  max-width: 310px;
  /* 必要に応じて調整 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  /* ボタンの位置調整のため */
  padding-bottom: 40px;
  background-color: #FFF;
}

.card-3col .details-button {
  width: 100%;
  background-color: red;
  color: white;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  /* 下の角を丸く */
  cursor: pointer;
  transition: 0.3s ease;
  position: absolute;
  /* 絶対位置指定 */
  bottom: 0;
  /* カードの下部に配置 */
  left: 0;
  right: 0;
  /* カードの両端に合わせる */
  text-align: center;
  margin-left: 0;
}

.card-3col .menu-content {
  margin-top: 1em;
}

.card-3col .price {
  /* color:black; */
  font-size: 12px;
}

@media (max-width: 768px) {
  .card-3col {
    width: calc(50% - 40px);
    /* 2カラムのための変更とマージンの調整 */
    margin-bottom: 0;
    /* モーダルボタンとの間のスペースを大きく取る */
  }
  .card-3col .price {
    font-size: 11px;
  }
  .price span {
    font-size: 1.5em;
  }
}


/* カード２終了 */

.modal {
  display: none;
  /* 初期状態ではモーダルを非表示に */
  position: fixed;
  /* 画面全体に固定 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /* 背景に半透明の黒を使用 */
  z-index: 1001;
  /* 最前面に */
  align-items: center;
  justify-content: center;
  /* display: flex;  */
}

/* モーダルを開いている際に背後をスクロールさせない */
.modal {
  overscroll-behavior: contain;
  overflow-y: scroll;
  scrollbar-width: none;
  touch-action: none;
}
.modal::-webkit-scrollbar {
  display: none;
}
.modal::before,
.modal::after {
  content: "";
  width: 1px;
  height: calc(100vh + 1px);
  display: flex;
}

.modal-content {
  background-color: #ffffff;
  border: 5px solid red;
  /* 赤の太線でボーダー */
  padding: 16px;
  width: 80%;
  /* 画面の80%の幅 */
  max-width: 600px;
  /* 600pxを超えないように */
  position: relative;
  max-height: 80vh;
  /* ビューポートの高さの80%に制限する。この値は調整しても良い。 */
  overflow-y: auto;
  /* 垂直方向にスクロールを可能にする */
  padding-right: 15px;
  /* スクロールバーの分のスペースを確保。デザインに合わせて調整してください。 */
  border-radius: 8px;
}

.modal .price{
  margin:0px;
}

/* 任意: スクロールバーのデザインを調整したい場合 */
.modal-content::-webkit-scrollbar {
  width: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* スクロールバーの色 */
  border-radius: 5px;
}

.modal-content::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  /* スクロールバーの背景色 */
  border-radius: 5px;
}

.modal-content img {
  max-width: 100%;
  /* 画像の横幅がモーダルの横幅を超えないように */
  height: auto;
  /* 画像の縦のアスペクト比を保持する */
  display: block;
  /* ブロックレベル要素として表示（余計なマージンを排除） */
  margin: 0 auto;
  /* 画像をモーダルの中央に配置 */
}

.modal h4,
.modal h5 {
  text-align: center;
  /* テキストを中央寄せ */
  font-weight: bold;
  /* テキストを太字に */
  font-size: 18px;
}


.close-button {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: red;
  /* 背景を赤に */
  color: #ffffff;
  /* バツ記号を白に */
  border: none;
  cursor: pointer;
  /* ホバー時のカーソルを指のアイコンに */
  font-size: 24px;
  border-radius: 50%;
  /* 円形に */
  width: 30px;
  height: 30px;
  line-height: 30px;
  /* 縦方向の中央寄せのための指定 */
  text-align: center;
  /* バツ記号をボタンの中央に配置 */
}

.close-button:hover {
  opacity: 0.8;
  /* ホバー時の透明度 */
}

.close-button-bottom {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: red;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.close-button-bottom:hover {
  background-color: red;
}


.price-list ul {
  list-style-type: none;
  padding: 0;
}

.price-list li {
  margin-bottom: 8px;
  position: relative;
  display: flex;
  justify-content: space-between;
  /* メニュー名と注釈を左側に、価格を右側に配置 */
  align-items: flex-end;
  /* メニュー名と価格を下揃えに */
}

.price-list li::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #333;
}

.menu-description {
  display: flex;
  align-items: flex-end;
  max-width: 50%;
}

/* メニュー名のスタイル */
.menu-name {
  color: #333;
}

/* 価格の全体のスタイル */
.price {
  color: red;
  display: inline-block;
}

/* 価格の数字部分のスタイル */
.price-list li span .amount {
  font-size: 1.8em;
}

/* 特定の注釈のスタイル */
.price-list li .note {
  font-size: 0.8em;
  margin-left: 4px;
  /* 注釈とメニュー名の間に少しスペースを追加 */
}

.faq h5 {
  text-align: center;
  font-weight: bold;
}

.faq .question strong {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 1.1em;
}

.notices h5 {
  text-align: center;
  font-weight: bold;
}

.notices ul {
  list-style-type: none;
  /* リストの前の点を非表示に */
  padding: 0;
  margin: 0;
}

.notices li {
  margin-bottom: 12px;
  /* 余白の調整 */
  font-size: 1em;
}

/* ラッピング要素（例えば、カードを包含するコンテナ）のスタイル */
.faq-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* カードを中央に配置 */
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  margin-bottom: 2em;
  padding: 0 8px;
}

/* FAQ Styles */
.faq-list {
  margin-top: 20px;
}

.faq-item {
  margin-bottom: 20px;
}

.faq-question {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.faq-question .q-icon {
  background-color: darkgray;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.faq-answer {
  margin-top: 10px;
  padding-left: 45px;
  /* width of q-icon + its margin */
}


/* Button Styles */
.centered-btn {
  display: block;
  margin: 0 auto;
  /* Center the button */
  padding: 15px 30px;
  /* Padding around the text */
  background-color: red;
  /* Background color */
  color: white;
  /* Text color */
  font-weight: bold;
  /* Bold text */
  border-radius: 8px;
  /* Rounded corners */
  text-align: center;
  /* Centered text */
  cursor: pointer;
  /* Hand cursor on hover */
  text-decoration: none;
  /* Remove underlines if it's a link */
  transition: background-color 0.3s;
  /* Smooth background color transition */
  max-width: 300px;
}

.centered-btn:hover {
  background-color: darkred;
  /* Darker red on hover */
}

#guarantee {
  background-color: #F5F5F5;
}

.guarantee-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* カードを中央に配置 */
  gap: 20px;
  max-width: 740px;
  margin: 0 auto;
  margin-bottom: 2em;
  padding: 0 8px;
}

.guarantee-item {
  padding: 0 8px;
}

.guarantee-item h3 {
  margin-bottom: 0;
}

.guarantee-item p {
  margin-bottom: 0;
}

#precautions .menu-header,
#about-us .menu-header {
  background-color: #333;
  color: #FFF;
  margin-bottom: 1em;
}

.precaution-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* カードを中央に配置 */
  max-width: 740px;
  margin: 0 auto;
  margin-bottom: 2em;
  padding: 0 8px;
}

.precaution-content p {
  margin: 8px;
}

.about-us-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* カードを中央に配置 */
  max-width: 740px;
  margin: 0 auto;
  margin-bottom: 8em;
  padding: 0 8px;
}

.company-logo {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  /* 画像のサイズに応じて変更してください */
}

.info-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

.info-table td {
  padding: 10px;
  border: 2px solid #333;
}

.info-title {
  font-weight: bold;
}