/* LP用 */

/* =========================================================
   基本設定（モバイル基準）
========================================================= */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  background-color: #fff;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

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

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* 共通初期値 */
.sp-hidden {
  display: block; /* PCでは表示 */
}
.pc-hidden {
  display: none;  /* PCでは非表示 */
}

/* SP用切り替え */
@media screen and (max-width: 768px) {
  .sp-hidden {
    display: none; /* SPでは非表示 */
  }
  .pc-hidden {
    display: block; /* SPでは表示 */
  }
}




/* =========================================================
   ヘッダー・ロゴ
========================================================= */
.heading-logo {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.heading-logo img {
  width: 30px;
  height: auto;
}



/* =========================================================
   メインビジュアル（縦動画）
========================================================= */
.mv-l {
  position: relative;
  width: 100%;
  height: 100vh; /* 画面いっぱい */
  overflow: hidden;
  background: #000;
}

.mv-l video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画面全体をカバーし、切れを防ぐ */
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}


/* ===============================
   メインビジュアル（PC）
=============================== */

@media screen and (min-width: 769px) {
  .mv-l-pc {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5F5F5;
    padding: 60px 0;
  }

  .mv-l-pc_inner {
    display: flex;
    flex-direction: row; /* 横並び */
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1000px; /* ✅ 全体幅の上限を設定 */
    margin: 0 auto;
  }

  /* 画像・動画のコンテナ */
  .mv-i-pc_img,
  .mv-l-pc_movie {
    flex: 1 1 50%;
    max-width: 480px; /* ✅ 各ブロックの最大幅を制限 */
  }

  /* 中の画像・動画 */
  .mv-i-pc_img img,
  .mv-l-pc_movie video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 8px;
  }
}


/* =========================================================
   セクション（共通）
========================================================= */
.section-l {
  padding: 80px 20px;
  text-align: center;
}

.heading-l {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 40px;
  letter-spacing: 0.2em;
}

.subheading-l {
  position: relative;
  display: inline-block;
  font-size: 14px;
  margin-bottom: 8px;
}

.subheading-l::before,
.subheading-l::after {
  font-size: 14px;
  position: relative;
  top: 0;
}

.subheading-l::before {
  content: "\\";
  margin-right: 10px;
}

.subheading-l::after {
  content: "/";
  margin-left: 10px;
}

.section-gray {
  background: #F5F5F5;
}

@media screen and (min-width: 769px) {
  .section-l {
    padding: 100px 60px; /* 上下100px、左右60px */
    text-align: center;
  }
}


/* =========================================================
  セクション装飾
========================================================= */
.under-line{
  background: linear-gradient(transparent 70%, #FFF000 50%);
}

.text-green{
  color: #349599;
}


/* =========================================================
  セクション装飾：波線・強調文字
========================================================= */
.text-deco {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: #349599;
}

.text-deco::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5em;
  height: 0.4em;
  background:
    radial-gradient(circle, #000 40%, transparent 41%) 0% 50%,
    radial-gradient(circle, #000 40%, transparent 41%) 50% 50%,
    radial-gradient(circle, #000 40%, transparent 41%) 100% 50%;
  background-size: 0.4em 0.4em;
  background-repeat: no-repeat;
}

.text-deco::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 100%;
  height: 14px;
  background: url("./img/lp-img/wave.png") no-repeat center center;
  background-size: contain;
}


/* =========================================================
  お悩みセクション（.section-problem-l）
========================================================= */

/* ---------------------------------
   セクション全体
--------------------------------- */
.section-problem-l .heading-l .subheading-l {
  display: inline-block;
  margin-bottom: 20px;
}

.section-problem-l .problem-img {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  display: block;
}

/* ---------------------------------
   ラッパー構造
--------------------------------- */
.problem-wrapper {
  margin-top: 30px;
}

/* ---------------------------------
   丸リスト（全体）
--------------------------------- */
.problem-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 📱 スマホ：縦並び */
  gap: 20px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* ---------------------------------
   各アイテム（丸1つ）
--------------------------------- */
.problem-item {
  aspect-ratio: 1 / 1;
  border: 2px solid #349599;
  border-radius: 50%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ---------------------------------
   丸内部構造（カード内要素）
--------------------------------- */
.problem-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
  padding: 20px;
  gap: 20px;
}

/* 番号バッジ */
.problem-num {
  display: inline-block;
  background: #349599;
  color: #fff;
  font-size: 12px;
  padding-block: 5px;
  padding-inline: 15px;
  border-radius: 20px;
}

/* テキスト（メイン・サブ） */
.problem-main {
  font-size: 14px;
  color: #333;
}

.problem-sub {
  font-size: 12px;
}

/* アイコン画像 */
.problem-icon {
  width: 33%;
}

/* =========================================================
  PC版レイアウト調整（769px以上）
========================================================= */
@media (min-width: 769px) {
  .problem-list {
    flex-direction: row; /* 💻 横並びに変更 */
    gap: 40px; /* 横間隔を広めに */
  }

  .problem-card {
    gap: 20px;
    width: 90%;
  }

  .problem-num {
    font-size: 12px;
    padding-block: 4px;
    padding-inline: 20px;
  }

  .problem-main {
    font-size: 14px;
    line-height: 1.6;
  }

  .problem-icon {
    width: 35%;
    max-width: 80px;
  }
}




/* =========================================================
  解決セクション（.section-solution-l）
========================================================= */

/* --- 全体ラッパー --- */
.solution-wrapper {
  width: 100%;
  max-width: 1200px; /* PC時の幅制限に備えて先に定義 */
  margin: 0 auto;
  padding-inline: 20px;
}

/* --- 解決リスト全体 --- */
.solution-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 60px;
  margin: 0 auto;
}

/* --- 各解決アイテム --- */
.solution-item {
  flex: 1 1 280px;
  text-align: center;
  max-width: 360px;
}

/* --- 各解決アイテム内の構造 --- */
.solution-inner img {
  margin-top: 30px;
  width: 90%;
}

/* --- テキストブロック（Check!＋番号＋タイトル） --- */
.solution-text {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

/* --- 丸い番号エリア --- */
.solution-num {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #349599;
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 50px;
  font-size: 10px;
  line-height: 1;
}

/* --- Check! テキスト --- */
.solution-num span:first-child {
  font-size: 8px;
  line-height: 1;
}

/* --- 解決タイトル --- */
.solution-title {
  font-size: 14px;
  text-align: left;
  line-height: 1.5;
  width: 100%;
}

/* --- 下部メッセージ --- */
.solution-message {
  font-size: 14px;
  margin-top: 30px;
  text-align: center;
}

/* --- メッセージ内の強調テキスト --- */
.solution-message span {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3rem;
}

/* =========================================================
  PC版レイアウト調整（769px以上）
========================================================= */
@media screen and (min-width: 769px) {
  /* --- リスト配置 --- */
  .solution-list {
    gap: 40px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin: 0 auto;
  }

  /* --- 各アイテム --- */
  .solution-item {
    max-width: 300px;
  }

  /* --- 丸番号エリア --- */
  .solution-num {
    width: 40px;
    font-size: 10px;
  }

  .solution-num span:first-child {
    font-size: 6px;
  }

  /* --- タイトル --- */
  .solution-title {
    font-size: 12px;
  }

  /* --- メッセージ --- */
  .solution-message {
    font-size: 14px;
    margin-top: 40px;
  }

  .solution-message span {
    font-size: 22px;
  }

  .solution-inner img {
  width: 90%;
  height: auto;
}

}

/* =========================================================
  特徴セクション（.section-feature-l）
========================================================= */

/* --- 全体ラッパー --- */
.feature-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 特徴リスト --- */
.feature-list {
  display: flex;
  flex-direction: column; /* モバイルでは縦並び */
  gap: 40px;
  margin: 0 auto;
}

/* --- 各特徴アイテム --- */
.feature-item {
  display: flex;
  flex-direction: column; /* モバイル基準：縦 */
  align-items: center;
  text-align: center;
  gap: 20px;
}

/* --- コンテンツ（テキスト部分） --- */
.feature-content {
  width: 100%;
}

.feature-heading{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* --- 見出し（画像） --- */
.feature-heading-img {
  width: 40px;
}

/* --- タイトル --- */
.feature-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

/* --- テキスト --- */
.feature-text {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  text-align: left;
}


/* =========================================================
  PC版レイアウト調整（769px以上）
========================================================= */
@media screen and (min-width: 769px) {

  .feature-list{
    width: 90%;
    margin: 0 auto;
  }

  /* --- 横並びレイアウト --- */
  .feature-item {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 80px;
    text-align: left;
  }

  /* 偶数行は反転配置 */
  .feature-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  /* --- テキストエリア --- */
  .feature-content {
    flex: 1 1 50%;
  }

  /* --- 画像エリア --- */
  .feature-image {
    flex: 1 1 50%;
    text-align: center;
  }

  /* --- タイトル・テキスト --- */
  .feature-title {
    font-size: 18px;
  }

  .feature-text {
    font-size: 14px;
    line-height: 1.8;
  }
}


/* =========================================================
   おうち見学会情報セクション
========================================================= */
.section-info-l{

}

.info-icon{
  width: 10%;
}

/* --- メインビジュアル --- */
.info-main {
  width: 100%;
  aspect-ratio: 16 / 9;  
  overflow: hidden;       
  background: #000;      
}

.info-main .info-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;   
  display: block;
}


/* --- 概要エリア --- */
.info-summary {
  margin-top: 50px;
}
.info-heading {
  max-width: 30%;
}
.info-title {
  margin-top: 16px;
  font-size: 16px;
}
.info-lead {
  margin-top: 30px;
  font-size: 12px;
}
.info-img {
  margin-top: 30px;
  width: 80%;
  aspect-ratio: 3 / 2;
}

/* --- 開催情報エリア --- */
.info-data {
    margin-top: 30px;
    font-size: 14px;
}
.info-data dt {
  margin-top: 20px;
  font-weight: bold;
}
.info-data dd {
  margin-top: 10px;
}

/* --- ご来場特典 --- */
.info-present-text {
  margin-top: 30px;
  font-size: 14px;
}



/* PC専用セクション全体に適用 */
.pc-only .info-wrapper {
  display: flex;
  justify-content: center;   /* 左右中央寄せ */
  align-items: center;  
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 40px;
  box-sizing: border-box;
}

/* 左右カラム */
.pc-only .info-visual,
.pc-only .info-summary {
  width: 50%;
  box-sizing: border-box;
}

.pc-only .info-summary {
  margin-top: 0;
}

/* ギャラリー画像群 */
.pc-only .info-gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;                 /* 画像間の余白 */
  width: 100%;
  flex-wrap: wrap;           /* 画像が多くても折り返す */
  box-sizing: border-box;
}

.pc-only .info-gallery img {
  width: calc(50% - 5px);    /* 2枚並びで余白を均等に */
  object-fit: cover;
}

.pc-only .info-data dt {
  margin-top: 10px;
}

.pc-only .info-icon{
  width: 3%;
  max-width: 30px;
}


/* =========================================================
  CTAボタン（上下グラデーション＋右アイコンPNG／ホバーなし）
========================================================= */

/* --- ボタン --- */
.btn-cta {
  display: inline-flex;
  flex-direction: column;       /* 2行テキストを縦並びに */
  justify-content: center;
  align-items: center;
  position: relative;
  background: linear-gradient(to bottom, #F6A129, #EF6728); /* 上下グラデーション */
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  padding: 14px 48px 14px 32px; /* 右に余白多め（アイコン分） */
  text-align: center;
  width: 300px;
  height: 70px;
  line-height: 0.6;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  font-size: 20px;
  margin-top: 50px;
}

@media screen and (max-width: 393px) {
  .btn-cta {
    width: 250px;
  }
}


/* --- 上段テキスト --- */
.btn-cta span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  font-weight: bold;
}

.btn-cta span::before,
.btn-cta span::after {
  font-size: 12px;
  position: relative;
  top: 0;
}

.btn-cta span::before{
  content: "\\";
  margin-right: 10px;
}

.btn-cta span::after{
  content: "/";
  margin-left: 10px;
}


/* --- 右側アイコン（PNG画像） --- */
.btn-cta::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: url("./img/lp-img/icon-arrow.png") no-repeat center center;
  background-size: contain;
}

/* ======================================================
   お客様の声セクション（モバイル1列 → PC2列）
====================================================== */

/* --- ラッパー --- */
.review-wrapper {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* --- レビューリスト --- */
.review-list {
  display: grid;
  grid-template-columns: 1fr; /* 📱 モバイル：1列 */
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  justify-items: center; /* ✅ アイテムを中央寄せ */
}

/* 💻 タブレット以上（768px〜）：2列 */
@media (min-width: 768px) {
  .review-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* --- 各レビューアイテム --- */
.review-item {
  width: 100%;
  max-width: 520px; /* ✅ 最大幅を指定して整列 */
  box-sizing: border-box;
}




/* ======================================================
   施工事例セクション（スマホ：縦並び → PC：横並び）
====================================================== */

/* --- 全体ラッパー --- */
.construction-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 100px;
  box-sizing: border-box;
}

/* --- 各施工事例ブロック --- */
.construction-item {
  display: flex;
  flex-direction: column; /* 📱 モバイル：縦並び */
  align-items: center;
  gap: 24px;
}

/* 💻 PCでは横並びに変更 */
@media (min-width: 1024px) {
  .construction-item {
    flex-direction: row;       /* ✅ 横並び */
    justify-content: space-between;
    gap: 40px;
  }

  /* 偶数行反転 */
  .construction-item:nth-child(even) {
    flex-direction: row-reverse;
  }
}

/* --- 左側：画像ブロック --- */
.construction-image {
  width: 100%;            /* 📱スマホでは画面幅いっぱい */
  max-width: none;        /* 📱スマホでは上限なし */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 💻 PCでは横幅を制限してバランスを取る */
@media (min-width: 1024px) {
  .construction-image {
    flex: 0 0 55%;        /* ✅ 画像を55%に固定 */
    max-width: 500px;     /* ✅ PC時のみ上限を設定 */
  }
}


.construction-main {
  width: 100%;
}

.construction-main img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- 右側：テキストブロック --- */
.construction-content {
  max-width: 480px;
}

.construction-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.construction-content p {
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
}

/* =========================================================
   Swiper（施工事例セクション）
========================================================= */

/* --- スライダー共通構造 --- */
.construction-main,
.construction-gallery {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* --- Swiperスライド設定 --- */
.construction-main .swiper-wrapper,
.construction-gallery .swiper-wrapper {
  display: flex !important;
  align-items: center;
}

.construction-main .swiper-slide,
.construction-gallery .swiper-slide {
  flex-shrink: 0;
  width: auto;
}

/* --- メイン画像 --- */
.construction-main .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- サムネイルスライダー --- */
.construction-gallery {
  margin-top: 10px;
  padding: 4px 0;
}

.construction-gallery .swiper-slide {
  width: calc(33.333% - 8px); /* ✅ 常に3枚表示 */
  opacity: 0.5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.construction-gallery .swiper-slide-thumb-active {
  opacity: 1;
  transform: scale(1.05);
}

.construction-gallery .swiper-slide img {
  width: 100%;
  aspect-ratio: 3 / 2;     
  object-fit: cover;    
}

/* --- PC時：少し余白を調整 --- */
@media (min-width: 768px) {
  .construction-gallery .swiper-slide {
    width: calc(33.333% - 10px);
  }
}


/* =========================================================
  よくある質問セクション
========================================================= */
.faq-l-list {
  width: min(90%, 800px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- 各項目 --- */
.faq-l-item {
  background: #F7F7F7;
  overflow: hidden;
  text-align: left;
}

/* --- 質問部分 --- */
.faq-l-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 20px;
}

.faq-l-q {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  margin: 0;
}

.faq-l-q-icon {
  display: flex; /* ✅ flexで中央寄せ */
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #000;
  color: #fff;
  font-weight: 700;
  border-radius: 50%; /* ✅ 完全な正円 */
  font-size: 12px;
  margin-right: 8px;
  flex-shrink: 0; /* ✅ 親要素の影響で潰れないよう固定 */
}

/* --- 矢印アイコン --- */
.faq-l-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

/* --- 回答部分 --- */
.faq-l-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
  padding: 0 20px;
}

.faq-l-a {
  font-size: 12px;
  line-height: 1.8;
  color: #333;
  margin: 12px 0;
  display: flex;
  align-items: flex-start;
}

.faq-l-a-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #0099a8;
  color: #fff;
  font-weight: 700;
  border-radius: 50%; /* ✅ 完全な円形に */
  font-size: 12px;
  margin-right: 8px;
  flex-shrink: 0; /* ✅ 行の高さに潰されないよう固定 */
}


/* --- 開いたときの状態 --- */
.faq-l-item.active .faq-l-answer {
  max-height: 1000px;
  padding: 16px 20px;
}

.faq-l-item.active .faq-l-icon {
  transform: rotate(180deg);
}


@media (min-width: 1024px) {
  .faq-l-q{
    font-size: 14px;
  }
  .faq-l-a {
    font-size: 14px;
  }
}

/* =========================================================
  Contact Form
========================================================= */


.contact-l-lead{
  font-size: 12px;
  margin-bottom: 40px;
}


.contact-wrapper {
  width: min(90%, 700px);
  margin: 0 auto;
  border: 1px solid #e5e5e5;
  padding: 40px;
  border-radius: 8px;
}

.contact-form{
  max-width: 768px;
  margin: 0 auto;
}

/* --- 各項目 --- */
.form-group {
  margin-bottom: 30px;
}

label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 12px;
  text-align: left;
}

label small {
  font-weight: 400;
  font-size: 10px;
  color: #666;
  margin-left: 4px;
}

.required {
  color: #e60012;
  margin-left: 4px;
}

/* --- テキスト入力・セレクト・テキストエリア --- */
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  font-size: 15px;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}

/* --- プレースホルダーの色 --- */
input::placeholder,
textarea::placeholder {
  color: #bbb;
  font-size: 12px;
}

/* --- ラジオボタン --- */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.radio-group label {
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  margin-right: 6px;
}

/* --- プルダウン --- */
/* 通常状態 */
select {
  display: block;
  width: 100%;
  height: 42px;
  padding: 6px 12px; /* ← 上に寄せる */
  line-height: 1.1;         /* ← 行間を狭く */
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  appearance: auto;          /* iOS用：ネイティブUIを維持 */
  -webkit-appearance: menulist; /* Safariで自然な表示に */
}

/* 未選択（placeholder表示時）だけ色変更 */
select:invalid {
  color: #bbb; /* ← デフォルト文字の色を変更 */
}


/* --- ボタン --- */
.form-submit {
  text-align: center;
  margin-top: 40px;
}

.form-submit{
  width: 100%;
  background: #0099a8;
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.form-submit button:hover {
  background: #007a89;
}




.footer-l{
  display: flex;
  justify-content: center;   /* 横中央 */
  align-items: flex-end;     /* 縦下揃え */
  height: 50px;
  font-size: 8px;
  padding-bottom: 10px;      /* 下に少し余白 */
  text-align: center;
  padding-left: 0;
}


@media (min-width: 1024px) {
  label{
    font-size: 14px;
  }
  input::placeholder,
  textarea::placeholder {
  font-size: 14px;
}
}

/* =========================================================
  ページトップボタン（モバイル用・フェード＋スライド付き）
========================================================= */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 70px;
  height: 70px;
  background-color: #349599;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  opacity: 0;                 /* 初期は透明 */
  transform: translateY(20px); /* 下から少しスライドして出現 */
  pointer-events: none;       /* 非表示時クリック無効 */
  transition: opacity 0.6s ease, transform 0.6s ease; /* フェード＆スライド */
  z-index: 999;
  line-height: 1.5;
}

/* アイコン画像 */
.back-to-top img {
  width: 20px;
  display: block;
}

/* 表示状態（ふんわり＋上がる） */
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);   /* 元の位置へスライドイン */
  pointer-events: auto;
}

/* =========================================================
  Contact Form 7 対応：ラジオボタン カスタマイズ（#349599）
========================================================= */

/* --- ラッパー全体（.radio-group） --- */
.radio-group {
  width: 100%;
  margin-top: 8px;
}

/* --- Contact Form 7 ラジオボタン出力本体 --- */
.radio-group .wpcf7-form-control.wpcf7-radio {
  display: grid !important;                  /* ✅ 明示的にブロック化してグリッド有効化 */
  grid-template-columns: repeat(3, 1fr);     /* 横3列に均等配置 */
  gap: 10px 20px;                            /* 縦・横の余白 */
  justify-items: start;                      /* 各項目を左寄せ（右寄せしたい場合は end） */
  align-items: center;
  width: 100%;
}

@media screen and (min-width: 480px) {
  .radio-group .wpcf7-form-control.wpcf7-radio {
    grid-template-columns: repeat(4, 1fr);   /* スマホ時は2列 */
    gap: 20px 40px; 
  }
}

/* --- 各項目（wpcf7-list-item） --- */
.radio-group .wpcf7-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}

/* --- ラベル全体 --- */
.radio-group .wpcf7-list-item label {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}

/* --- ラジオボタン本体 --- */
.radio-group .wpcf7-list-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #fff;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* --- ホバー時 --- */
.radio-group .wpcf7-list-item input[type="radio"]:hover {
  border-color: #349599;
}

/* ✅ 選択時：外枠だけ色変更 */
.radio-group .wpcf7-list-item input[type="radio"]:checked {
  border-color: #349599;
  background-color: #fff;
}

/* ✅ 真ん中の円（選択状態） */
.radio-group .wpcf7-list-item input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: #349599;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* --- フォーカス時（アクセシビリティ対応） --- */
.radio-group .wpcf7-list-item input[type="radio"]:focus-visible {
  outline: 2px solid rgba(52, 149, 153, 0.4);
  outline-offset: 2px;
}