@charset "utf-8";
body{
    margin: 0;
    padding: 0;
}
body, 
input, 
textarea, 
button, 
select {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
#wrapper{
    /*max-width: 1400px;*/
    margin: auto;
}
#wrapper img{
    width: 100%;
    vertical-align: middle;
}

@media only screen and (max-width: 839px){
#wrapper{
    max-width: 700px;
    margin: auto;
}
}

@media only screen and (min-width: 640px){
    #wrapper{
        max-width: 1920px;
        margin: auto;
    }
}


h1 {
    margin: 0;
}
h2 {
    margin: 0 auto;
}
.re {
    position: relative;
}
.ab {
    position: absolute;
}

/*---------- ヘッダー ---------- */
.site-header {
  width: 100%;
  background-color: #fcfef1;
  box-sizing: border-box;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 12px;
}
.logo-img,.btn-img {
  display: block;
  width: 100%;
  height: auto;
}

.header-inner {
  padding: 10px 12px;
}
.header-logo {
  width: 100px; /* SP時のロゴ幅 */
}
.header-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: auto;
  width: 225px;
}
.header-btn a {
  display: block;
  height: 100%; /* 親の高さ（42px）に100%合わせる */
}
.btn-img {
  display: block;
  height: 100%;  /* 高さを100%にして縦幅を揃える */
  width: auto;   /* 横幅は比率を保って自動伸縮 */
}

@media screen and (min-width: 768px) {
  .header-inner {
    max-width: var(--header-max-width);
    padding: 1% 5%; /* PC時は上下左右に程よいゆとりを持たせる */
  }

  .header-logo {
    width: 160px; /* PC時のロゴ幅 */
  }
  .header-btn {
    gap: 12px;
    height: auto;
    width: 355px;
  }
  .header-btn a {
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
  }
  .header-btn a:hover {
    opacity: 0.85;
    transform: translateY(-2px); /* わずかに上に浮くアニメーション */
  }
}


/*---------- CTA ---------- */
.cta {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; /* 背景画像を領域いっぱいにフィットさせる */
  background-image: url('../img/cta_bg_sp.jpg'); 
  padding: 40px 15px;
}
.cta .btn-area {
  display: flex;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  /*flex-direction: column;*/ /* SP時はボタンを縦並びにする */
  align-items: center;
  gap: 12px; /* ボタン同士の縦方向の隙間 */
  max-width: 400px;
}
.cta_tel{
    width: 100%;
    max-width: 800px;
    display:block;
    margin:auto;
}
/* ボタン内の画像をコンテナ幅いっぱいに伸縮させる基本設定 */
.cta .btn-area a {
  display: block;
  text-decoration: none;
  width: 100%;
}
.cta .btn-area img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .cta {
    /* PC用の背景画像とパディング */
    background-image: url('../img/cta_bg_pc.jpg');
    padding: 60px 24px; /* PC向けに上下の余白を少し広げる */
  }
  .cta .btn-area {
    flex-direction: row; /* PC時はボタンを横並びにする */
    justify-content: center;
    align-items: center;
    gap: 0px; /* ボタン同士の横方向の隙間 */
    max-width: 1000px; /* PC時の2つのボタンを合わせた最大表示幅 */
  }
  .cta .btn-area a {
    /* PC時は均等に横幅を分配（最大460px〜480px程度を狙う） */
    width: calc(50% - 12px); /* gap(24px)の半分を引いて均等配置 */
    max-width: 400px; /* PCボタンが大きくなりすぎないように制限 */
  }
  /* PCのみ：ボタンホバー時の優しいアニメーション */
  .cta .btn-area a {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .cta .btn-area a:hover {
    opacity: 0.9;
    transform: scale(1.02); /* わずかにボタンが拡大する演出でクリックを促す */
  }
}


/*---------- CTA02 ---------- */
.cta-area02 {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-image: url('../img/cta_area02_sp.jpg');
}
.cta02-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* ★ここでアスペクト比を固定（背景画像と同じ大きさの箱を作ります） */
  padding-top: 120%; 
  overflow: hidden; /* 万が一のはみ出しを防止 */
}
.cta02-limit, .cta02-status {
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  margin: 0;
}
/* 「○月限定！」のテキストデザイン */
.cta02-limit-area {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  top: 8%; 
  pointer-events: none;
  z-index: 5;
}
.cta02-limit {
  color: #f36c21;
  font-size: 5.5vw;
}
/* 「〇〇現在、お電話が〜」のテキストデザイン */
.cta02-status-area {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  top: 60%;
  pointer-events: none;
  z-index: 5;
}
.cta02-status {
  color: #4c4c4c;
  font-size: 3.5vw;
  white-space: nowrap;
}
/* --- ボタンエリア --- */
.cta02{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    bottom: 3%; 
    z-index: 10;
}
.cta02 .cta02-btn-area {
  display: flex;
  margin: 0 auto;
  box-sizing: border-box;
  width: 100%;
  /*flex-direction: column;*/ /* SP時はボタンを縦並びにする */
  align-items: center;
  gap: 5px; /* ボタン同士の縦方向の隙間 */
  max-width: 400px;
}
.cta02_tel{
    width: 100%;
    max-width: 800px;
    display:block;
    margin:auto;
}
/* ボタン内の画像をコンテナ幅いっぱいに伸縮させる基本設定 */
.cta02 .cta02-btn-area a {
  display: block;
  text-decoration: none;
  width: 100%;
}
.cta02 .cta02-btn-area img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .cta-area02 {
    /* PC用の背景画像とアスペクト比に差し替え */
    background-image: url('../img/cta_area02_pc.jpg');
    margin: 0 auto;
  }
  .cta02-inner {
    padding-top: 50%; 
  }
  /* PC時のテキスト配置上書き */
  .cta02-text-group {
    top: 10%;
  }
  .cta02-limit-area {
    top: 11%;
  }
  .cta02-limit {
    font-size: 2.2vw;
  }
  .cta02-status-area {
    top: 58%;
    width: 100%;
  }
  .cta02-status {
    font-size: 1.5vw;
  }
  /* PC時のボタン配置上書き（横並びに変更） */
  .cta02{
    bottom: 2%;
    width: 60%;
  }
  .cta02 .cta02-btn-area {
    flex-direction: row; /* PC時はボタンを横並びにする */
    justify-content: center;
    align-items: center;
    gap: 0px; /* ボタン同士の横方向の隙間 */
    max-width: 1000px; /* PC時の2つのボタンを合わせた最大表示幅 */
  }
  .cta02 .cta02-btn-area a {
    /* PC時は均等に横幅を分配（最大460px〜480px程度を狙う） */
    width: calc(50% - 12px); /* gap(24px)の半分を引いて均等配置 */
    max-width: 400px; /* PCボタンが大きくなりすぎないように制限 */
  }
  /* PCのみ：ボタンホバー時の優しいアニメーション */
  .cta02 .cta02-btn-area a {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .cta02 .cta02-btn-area a:hover {
    opacity: 0.9;
    transform: scale(1.02); /* わずかにボタンが拡大する演出でクリックを促す */
  }
}


/*---------- お悩み ---------- */
.worry {
    height: 205vw;
}
.worry .ttl{
    width: 65%;
}
@media screen and (min-width: 768px) {
    .worry {
        height: 57vw;
    }
    .worry .ttl{
        width: 40%;
    }
}


/*---------- 価格 ---------- */
.price {
    background-color: #e1f4e1;
    padding: 30px;
}
.price_inner img {
    display: block;
    max-width: 950px;
    margin: 0 auto;

}

.achievements {
    margin: 10vw auto 0;
}
.achievements_ttl {
    width: 100%;
}
.achievements_slide.splide {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 5px 35px;
  box-sizing: border-box;
}
.achievements_slide .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.achievements_slide .splide__arrow {
    background: #f77508;
    opacity: 1;
}
.splide__arrow svg {
    fill: #fff !important;
}
.achievements_slide .splide__pagination__page.is-active {
  background: #f36c21; /* アクティブなドットの色 */
}
.splide__arrow {
    top: 47% !important;
}
.achievements_slide .splide__arrow--prev {
  left: -10px; 
}
.achievements_slide .splide__arrow--next {
  right: -10px;
}
.voice_slider .splide__pagination__page.is-active {
  background: #ffffff;
  opacity: 1;
}

@media screen and (min-width: 768px) {
    .achievements {
        margin: 4vw auto 0;
    }
    .achievements_ttl {
        max-width: 500px;
        display: block;
        margin: 0 auto;
    }
    .achievements_slide.splide {
      margin-bottom: 40px;
    }
}


/*---------- ポイント ---------- */
.point {
    width: 100%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto;
    background-image: url('../img/point_bg_sp.jpg');
}
.point_inner {
  padding-bottom: 10%;
}
.point .ttl {
    width: 68%;
    margin-bottom: 5%;
}

@media screen and (min-width: 768px) {
    .point {
        background-image: url('../img/point_bg_pc.jpg');
        padding-bottom: 3%;
    }
    .point .ttl {
      width: 55%;
      margin-bottom: 0;
    }
    .point_inner {
      padding: 0 22%;
    }
}


/*---------- 比較 ---------- */
.comparison {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url('../img/comparison_bg_sp.jpg');
  padding: 0 0 3%; /* 💡 画像がはみ出るため、左右パディングは「0」にします */
}
.comparison_ttl {
  width: 100%;
  margin: 0 auto 7%;
}
.comparison_inner {
  width: 100%;
  overflow-x: auto; /* 💡 横方向のはみ出しをスクロール可能にする */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* 💡 iOS（Safari）で滑らかに慣性スクロールさせる */
  padding: 0 15px 15px 15px; /* 💡 スクロールバーが画像に被らないよう下に少し余白、左右にも余白 */
  box-sizing: border-box;
}
.comparison .comparison_inner img {
  display: block;
  width: 575px;
  min-width: 575px;
  max-width: none;
  height: auto;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .comparison {
    background-image: url('../img/comparison_bg_pc.jpg');
  }
  .comparison_ttl {
    width: 45%;
    margin-bottom: 2%;
  }
  .comparison_inner {
    max-width: 900px; /* 💡 コンテンツ全体の最大表示幅 */
    margin: 0 auto;
    overflow-x: visible; /* 💡 スクロールバーを非表示にする */
    padding: 0 24px;
  }
  .comparison_inner img {
    width: 100%;      /* 💡 PC時は最大幅に追従して伸縮させる */
    max-width: 100%;  /* 💡 縮小制限を戻す */
  }
}



/*---------- サービス一覧 ---------- */
.service {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url('../img/service_bg_sp.jpg');
}
.service_ttl {
  width: 80%;
  margin-bottom: 7%;
}
.service_inner {
  padding: 0 7% 12%;
}

@media screen and (min-width: 768px) {
  .service_ttl {
    width: 35%;
    margin-bottom: 4%;
  }
  .service_inner {
    padding: 0 24% 4%;
  }
}



/*---------- お客様の声 ---------- */
.voice {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url('../img/voice_bg_sp.jpg');
}
.voice_ttl {
  width: 60%;
  margin-bottom: 7%;
}
.voice_inner {
  padding: 0 7% 12%;
}
.voice_txt {
  width: 85%;
  margin: 0 auto 4%;
}
.voice_slider.splide {
  position: relative;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0px 10px 25px 10px;
  box-sizing: border-box;
}
.voice_slider .voice_slider_item.splide__slide {
  opacity: 1;          /* SP時は常にくっきり */
  transform: scale(1); /* SP時は常に等倍サイズ */
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.voice_slider .voice_slider_item.splide__slide.is-active {
  opacity: 1; /* くっきり見せる */
  transform: scale(1); /* 本来のサイズに戻す */
}
.voice_slider .voice_slider_item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 左矢印の位置 */
.voice_slider .splide__arrow--prev {
  left: -10px;
}
/* 右矢印の位置 */
.voice_slider .splide__arrow--next {
  right: -10px;
}
/* 矢印共通のデザイン */
.voice_slider .splide__arrow {
  background: none;
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .voice {
    background-image: url('../img/voice_bg_pc.jpg');
  }
  .voice_ttl {
    width: 28%;
    margin-bottom: 3%;
  }
  .voice_txt {
    width: 44%;
    margin: 0px auto 3%;
  }
  .voice_inner {
    padding: 0 7% 5%;
  }
  .voice_slider.splide {
    padding: 0px 30px 40px 0px;
  }
  .voice_slider .voice_slider_item.splide__slide {
    opacity: 0.4;         /* 中央以外を薄く */
    transform: scale(0.9); /* 中央以外を小さく */
  }
  .voice_slider .voice_slider_item.splide__slide.is-active {
    opacity: 1;
    transform: scale(1);
  }
  
}




/*---------- エリア ---------- */
.area {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url('../img/area_bg_sp.jpg');
}
.area_ttl {
  width: 57%;
  margin-bottom: 7%;
}
.area_inner {
  padding: 0 7% 12%;
}
.area_inner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media screen and (min-width: 768px) {
  .area {
    background-image: url('../img/area_bg_pc.jpg');
  }
  .area_ttl {
    width: 23%;
    margin-bottom: 2%;
}
  .area_inner {
    padding: 0 37% 3%;
  }
}




/*---------- よくある質問 ---------- */
.faq {
  background-color: #e4f7e4;
}
.faq_ttl {
  width: 65%;
  margin-bottom: 2%;
}

.faq-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* セクションタイトル */
.faq-ttl {
  text-align: center;
  margin-bottom: 30px;
  font-family: sans-serif;
  font-weight: bold;
}
.faq-ttl-en {
  display: block;
  font-size: 36px;
  color: #a3d9a5; /* 薄いグリーンのFAQテキスト */
  line-height: 1;
  margin-bottom: 5px;
}
.faq-ttl-ja {
  display: block;
  font-size: 24px;
  color: #2ca23b; /* 濃いグリーンのメインタイトル */
}

/* アコーディオンリスト */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px; /* リスト同士の隙間 */
  padding: 5% 5% 15%;
}

/* アコーディオン外枠（影付き） */
.faq-item {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* ふわっと浮き上がるシャドウ */
  transition: all 0.3s ease;
}

/* `<summary>`タグ標準の矢印（三角）マークを消す */
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; /* 標準の矢印を消す */
  cursor: pointer;
  padding: 15px 20px;
  /* 緑色のグラデーション背景 */
  background: linear-gradient(135deg, #48b84b 0%, #34a838 100%);
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  user-select: none;
  box-sizing: border-box;
}

/* Qアイコンの並び */
.faq-question .q-icon {
  font-size: 24px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.5); /* カンプにある縦の区切り線 */
  padding-right: 12px;
  line-height: 1;
}

.faq-question .q-text-wrap {
  display: flex;
  align-items: center;
  width: calc(100% - 30px);
}

.faq-question .q-text {
  flex: 1;
  line-height: 1.4;
}

/* カスタム矢印アイコン（擬似要素で作る、白の下向き矢印） */
.faq-question .arrow-icon {
  position: relative;
  width: 16px;
  height: 10px;
  transition: transform 0.3s ease;
}
.faq-question .arrow-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px; /* 下向き三角 */
  border-color: #ffffff transparent transparent transparent;
}

/* ★開いている時（open時）の矢印の回転と、角丸の解除 */
.faq-item[open] .faq-question .arrow-icon {
  transform: rotate(180deg); /* 180度回転させて上向き矢印に */
}

/* 回答エリア（標準では非表示、アコーディオンで開閉） */
.faq-answer {
  padding: 20px;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
}

.faq-answer .a-text {
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .faq_ttl {
    width: 23%;
    margin-bottom: 0%;
  }
  .faq-inner {
    padding: 0 20px;
  }
  .faq-list {
    padding: 2% 0 4%;
    max-width: 700px;
    margin: 0px auto;
  }
}



/*---------- お問い合わせ ---------- */
.site-form {
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image: url('../img/form_bg_sp.jpg');
  padding: 0% 0 10%;
}

.form-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* タイトルエリア */
.form-ttl {
  margin-bottom: 30px;
  width: 75%;
}
.form-ttl-en {
  display: block;
  font-size: 36px;
  color: #a3d9a5; /* 薄いグリーンのFORMテキスト */
  line-height: 1;
  margin-bottom: 5px;
}
.form-ttl-ja {
  display: block;
  font-size: 24px;
  color: #2ca23b; /* 濃いグリーンのメインタイトル */
}

/* 緑枠のフォームコンテナ */
.form-container {
  width: 100%;
  background-color: #fff;
  border: 2px solid #a3d9a5; /* 薄グリーンのボーダー */
  border-radius: 12px;
  padding: 30px 15px;
  box-sizing: border-box;
}

/* 入力行（SP時は縦並び） */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px; /* 各項目間の隙間 */
}

/* ラベル＋必須マークエリア */
.form-label-area {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.form-label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

/* 必須・任意バッジ */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  color: #fff;
}
.badge-required {
  background-color: #f36c21; /* オレンジ（必須） */
}
.badge-optional {
  background-color: #a0a0a0; /* グレー（任意：カンプお問合せ内容は任意） */
}

/* 各入力ボックス共通デザイン */
.form-input-area input[type="text"],
.form-input-area input[type="tel"],
.form-input-area input[type="email"],
.form-input-area textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: #eeeeee; /* カンプのグレー背景 */
  border: none;
  border-radius: 4px;
  padding: 14px 16px;
  font-size: 15px;
  color: #333;
  outline: none;
  transition: background-color 0.3s ease;
}

/* フォーカス時のわずかな色変化 */
.form-input-area input:focus,
.form-input-area textarea:focus {
  background-color: #e5e5e5;
}

/* プレースホルダー（薄い文字） */
::placeholder {
  color: #a0a0a0;
}

/* ラジオボタンエリア（プラン） */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.radio-label input[type="radio"] {
  margin: 0 8px 0 0;
  width: 18px;
  height: 18px;
  accent-color: #2ca23b; /* チェック時の色をグリーンに */
}

.radio-text {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

/* テキストエリア個別設定 */
.form-input-area textarea {
  resize: vertical; /* 縦方向のみリサイズ可能に */
}

/* 送信ボタンエリア */
.form-submit-area {
  text-align: center;
  margin-top: 40px;
}

.form-submit-btn {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.form-submit-btn img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none; /* クリック時の誤動作防止 */
}

.form-submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.form-submit-btn:active {
  transform: translateY(1px);
}

.privacy-back-area {
  text-align: center;
  margin-top: 40px; /* 白枠コンテンツからの適度な隙間 */
}
.privacy-back-btn {
  display: inline-block;
  width: 100%;
  max-width: 150px;
  text-decoration: none;
  outline: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.privacy-back-btn img {
  display: block;
  width: 100%;
  height: auto;
}
.privacy-back-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px); /* わずかに浮き上がる */
}
.privacy-back-btn:active {
  transform: translateY(1px); /* クリック時に少し沈む */
}

@media screen and (min-width: 768px) {
  .site-form {
    background-image: url('../img/form_bg_pc.jpg');
  }
  .form-ttl {
    width: 32%;
}

  /* PC時はコンテンツ幅を少し狭めて見やすく */
  .form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 60px;
  }

  /* PC時はラベルと入力を綺麗な「横並び」に変形 */
  .form-row {
    flex-direction: row;
    align-items: center;
    margin-bottom: 28px;
  }

  /* 料金プランやtextareaなど、上部揃えにする項目用 */
  .form-row.align-start {
    align-items: flex-start;
  }

  /* PC用：左側のラベルエリアの幅を固定 */
  .form-label-area {
    width: 240px;
    flex-shrink: 0;
    gap: 12px;
  }
  .form-label {
    display: inline-block;
    width: 180px;
  }

  /* PC用：右側の入力エリアが残りの幅をすべて埋める */
  .form-input-area {
    flex-grow: 1;
  }

  .form-submit-btn {
    max-width: 400px; /* PC時はボタンを少し広くする */
  }
  .privacy-back-area {
    margin-top: 50px; /* PCでは少し余白を広げます */
  }
}




/*---------- フッター ---------- */
.footer {
  background-color: #4c4c4c;
  padding: 5% 0;
}
.footer_inner {
  margin: 0 auto;
  padding: 0 15px;
  text-align: center;
  line-height: 0.7;
  font-size: 12px;
}
.footer_inner img {
  max-width: 250px;
  margin: 2% auto 3%;
}
.footer_link {
  color: #fff;
}
.footer_copy {
  color: #fff !important;
}

@media screen and (min-width: 768px) {
  .footer {
    padding: 2% 0;
  }
  .footer_inner {
    line-height: 0.8;
    font-size: 14px;
  }
}




/*---------- 追従ボタン ---------- */
.follow_btn {
  display: none;
}

@media screen and (max-width: 767px) {
  .follow_btn {
    display: flex; /* 横並びにする */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* 他の要素の上に重ねる */
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9); /* ボタンの背景を少し半透明の白にして見やすく */
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.08); /* 上方向に少しシャドウを落とす */
    gap: 8px; /* ボタン同士の間隔 */
    
    /* 💡 フェード用の初期設定（最初は非表示） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* 少し下からフワッと浮き上がらせる */
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  }

  /* 💡 JSでこのクラスがついたらフェードインする */
  .follow_btn.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 2つのリンク（ボタン）を均等幅にする */
  .follow_btn_link {
    display: flex;
    align-items: center;
}

  .follow_btn_link img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* 電話 */
    .follow_btn_link:first-child {
        flex: 5;
    }
    
    /* メール・LINE */
    .follow_btn_link:nth-child(2),
    .follow_btn_link:nth-child(3) {
        flex: 1;
    }
}