@charset "utf-8";

/*全体の設定
---------------------------------------------------------------------------*/
body {
  background: #fff;
  color: #6d6d6d;
  font-size: 16px;
  line-height:1.5;
  font-family:"Noto Sans JP","メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100%;
  margin: 0;
}

h2 {
  font-size: 120%;
}

h1 {
  text-align: center;
  color: #fff;
  font-size: 150%;
  line-height: 1.5;
  padding: 5px;
}

p{
  line-height: 1.8;
}
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
  h1 {
    text-align: center;
    color: #fff;
    font-size: 42px;
    line-height: 1.2;
    padding: 0.5em;
  }

p {
  line-height: 1.8;
  margin-bottom: 10px;
}
}/* ▲PCメディアクエリ終了▲ */




img {
  max-width: 100%;
  height: auto;
  display: block;
}





.wrapper {
  padding-top: 20px;
  padding-bottom: 20px;
}

.wrapper p {
  font-size: 16px;
  margin-bottom: 30px;
}
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.wrapper {
  padding-top: 20px;
  padding-bottom: 45px;
}

.wrapper p {
  font-size: 18px;
  margin-bottom: 30px;
}
}/* ▲PCメディアクエリ終了▲ */






/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
  color: #555; /*リンクテキストの色*/
  text-decoration: none;
}

a:hover {
  color: #006ddc; /*マウスオン時の文字色（全体）*/
}

a:hover .btn {
  position: relative;
  top: 3pt;
  left: 3pt;
}

a:hover img{
  opacity:0.8;filter:alpha(opacity=80); /* ホバー時に80%の濃さになる */
}



/*---------- PC・スマホの非表示指定 ----------*/
@media screen and (max-width:768px){.spnone{display:none;}}
@media screen and (min-width:768px){.pcnone{display:none;}}




/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
  width: 100%;
}

/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
#container {
  width: 768px;
  /*コンテナー幅*/
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin: 0 auto;
}
}/* ▲PCメディアクエリ終了▲ */








/*メインコンテンツ
---------------------------------------------------------------------------*/

#main {
  clear: both;
  margin: 0;
  flex: 1;
}


.fv{
  margin:0 0 -0px 0
}


/*ボタン設定
---------------------------------------------------------------------------*/
.btn_box-01 {
  width: 100%; /* 親要素の幅にフィット */
 text-align: center;
  margin: 0;

 }

 
 .btn_box-01 a img {
     width: 90%; /* ボタン画像のサイズを調整 */
     height: auto; /* 縦横比を維持 */
     animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
     display: block;
     margin: 30px auto 5px;
 }
 
.btn_txt{
     margin: 0px 30px 30px 30px;
    }

.red{
  color:#d67685;
  font-weight: 700;
}



 .btn_box-02 {
   width: 100%; /* 親要素の幅にフィット */
      position: relative; /* 子要素を絶対配置するために必要 */
      padding-top: 90.36%; /* アスペクト比を保持 (アスペクト比＝縦÷横)*/
      background-image: url('img/img/spi-02.webp'); /* 背景画像を指定 */
      background-size: contain; /* 背景画像を全体にフィット */
      background-position: center; /* 背景画像を中央に配置 */
      background-repeat: no-repeat; /* 繰り返しを防ぐ */
      margin:30px 0 0px 0;
  }
  
  .btn_box-02 a {
      position: absolute; /* 背景画像の上に重ねるために絶対配置 */
      top: 50%; /* 上下中央に配置 */
      left: 50%; /* 左右中央に配置 */
      transform: translate(-83%, 30%); /* 中央揃え調整 */
  }
  
  .btn_box-02 a img {
      width: 170%; /* ボタン画像のサイズを調整 */
      height: auto; /* 縦横比を維持 */
      margin: 0px 0 0 0;
      animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
  }
  



  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.07);
    }
    100% {
      transform: scale(1);
    }
  }
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.btn_box-01 {
      width: 100%; /* 親要素の幅にフィット */
      text-align: center;
}

.btn_box-01 a img {
    width: 620px; /* ボタン画像のサイズを調整 */
    height: auto; /* 縦横比を維持 */
    animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
    display: block;
    margin: 60px auto 10px;
}

.btn_txt{
     margin: 0px 0 60px 0;
     font-size:20px;
    }

.red{
  color:#d67685;
  font-weight: 700;
}




.btn_box-02 {
  width: 100%; /* 親要素の幅にフィット */
     position: relative; /* 子要素を絶対配置するために必要 */
     padding-top: 90.36%; /* アスペクト比を保持 (アスペクト比＝縦÷横)*/
     background-image: url('img/spi-.webp'); /* 背景画像を指定 */
     background-size: contain; /* 背景画像を全体にフィット */
     background-position: center; /* 背景画像を中央に配置 */
     background-repeat: no-repeat; /* 繰り返しを防ぐ */
     margin:40px 0 0px 0;
 }
 
 .btn_box-02 a {
     position: absolute; /* 背景画像の上に重ねるために絶対配置 */
     top: 50%; /* 上下中央に配置 */
     left: 50%; /* 左右中央に配置 */
     transform: translate(-50%, -50%); /* 中央揃え調整 */
 }
 
 .btn_box-02 a img {
     width: 620px; /* ボタン画像のサイズを調整 */
     height: auto; /* 縦横比を維持 */
     margin: 300px 0 0 0;
     animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
 }

}/* ▲PCメディアクエリ終了▲ */





/*選ばれる理由
---------------------------------------------------------------------------*/
.reason {
  position: relative;

}

.reason__bg {
  
  width: 100%;
  display: block;
  
}

.reason__media {
  position: absolute;
  top: 43%;
  right: 0; 
  width: 87vw;
  height: calc(87vw * 467 / 667); /* 元比率を維持 */



/* ===== マスク設定 ===== */

  /* Safari用 */
  -webkit-mask-image: url("img/mask-square.png");
  -webkit-mask-repeat: no-repeat;
 
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;

  /* 標準 */
  mask-image: url("img/mask-square.png");
  mask-repeat: no-repeat;
 
  mask-position: center;
  mask-size: 100% 100%; 

}

.reason__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reason__label {
  position: absolute;
  top: 43%;
  left: 12%;
  transform: translateX(-50%);
  width: 16vw;

}


/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.reason {
  position: relative;

}

.reason__bg {
  
  width: 100%;
  display: block;
  
}

.reason__media {
  position: absolute;
  top: 43%;
  right: 0; 
  width: 667px;
  height: 467px;



/* ===== マスク設定 ===== */

  /* Safari用 */
  -webkit-mask-image: url("img/mask-square.png");
  -webkit-mask-repeat: no-repeat;
 
  -webkit-mask-position: center;


  /* 標準 */
  mask-image: url("img/mask-square.png");
  mask-repeat: no-repeat;
 
  mask-position: center;


}

.reason__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reason__label {
  position: absolute;
  top: 43%;
  left: 12%;
  transform: translateX(-50%);
  width: 117px;

}
}




/*限定性
---------------------------------------------------------------------------*/
.limit{

}

.limit-txt{
  font-size:18px;
  background-color: #f2f2f2;
  padding:30px 30px 0 30px;
  font-weight:400 ;
}

/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.limit{

}

.limit-txt{
  font-size:28px;
  background-color: #f2f2f2;
  padding:60px 60px 0 60px;
 font-weight:400 ;
}
}




/*youtbe
---------------------------------------------------------------------------*/
.video-section {
  background-color: #8c7a6b; /* 背景を全面に */
  padding:30px 30px 15px 30px;
  text-align: center;         /* 中央寄せの補助 */
}

.youtube{
margin: 0 auto; 
width: 100%;

}

.youtube iframe,
.youtube video {
  width: 100%;
  aspect-ratio: 16 / 9; 
  display: block; 
  object-fit: contain; 
  background-color: #000; 
}

.youtube-txt{
background-color: #8c7a6b;
color:#fff;
font-size:14px;
font-weight: 300;
padding:0 0 45px 30px;

}

/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.video-section {
  background-color: #8c7a6b; /* 背景を全面に */
  padding:40px 60px 15px 60px;
  text-align: center;         /* 中央寄せの補助 */
}

.youtube{
margin: 0 auto; 
max-width: 640px;
width: 100%;

}

.youtube iframe,
.youtube video {
  width: 100%;
  aspect-ratio: 16 / 9; 
  display: block;  
  object-fit: contain; 
  background-color: #000;
}

.youtube-txt{
background-color: #8c7a6b;
color:#fff;
font-size:16px;
font-weight: 300;
padding:0 0 90px 60px;

}
}


/*他社との比較
---------------------------------------------------------------------------*/
.comparison-box{
  padding:0 5.33vw 45px 5.33vw;
  background-color: #edeae3;
}

.comparison-table{
  padding:30px 0 10px 0
}

table {
  border-collapse: collapse; /* 枠線を統一する */
  width: 100%;
}

.comparison-table td {
  border: 1px solid #6d6d6d;
  
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  font-size: 18px;
  color:#4d4d4d;
}

.white-bg {
  background-color: white;
  font-weight: 300;
}

.pink-bg{
  background-color:#d67685;
}

.blue-bg{
  background-color:#2357b0;
}

.gray-bg{
  background-color:#e7e7e7;
}

.pale-pink-bg{
  background-color:#fbf1f3;
}

.yellow-bg{
  background-color:#fcfbe9;
}

.white-text{
  color: #fff;
}

.brown-text{
  color:#5b4c3e;
}

.font18-text{font-size:16px;}

.font-weight400{
font-weight: 400;
}

.font-weight300{
font-weight: 300;
}



/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.comparison-box{
  padding:0 60px 0 60px;
  background-color: #edeae3;
 
}

.comparison-table{
  padding:60px 0 90px 0;
  width:648px;
  margin:0 auto;
}

table {
  border-collapse: collapse; /* 枠線を統一する */
  width: 100%;
}

.comparison-table td {
  border: 1px solid #3d3d3d;
  padding: 20px 15px 20px 15px;
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 20px;
  color:#5d5d5d;
}

.white-bg {
  background-color: white;
  font-weight: 500;
}

.pink-bg{
  background-color:#d67685;
}

.brown-bg{
  background-color:#5b4c3e;
}

.gray-bg{
  background-color:#e7e7e7;
}

.pale-pink-bg{
  background-color:#fbf1f3;
}

.white-text{
  color: #fff;
}

.brown-text{
  color:#5b4c3e;
}

.font18-text{font-size:16px;}

.font-weight400{
font-weight: 400;
}

.font-weight300{
font-weight: 300;
}

}
/* ▲PCメディアクエリ終了▲ */




/*------------------------------ よくあるご質問（開閉式） ------------------------------*/
.faq{
padding:0 30px 25px 30px;
}

.faq-box{
  border: 1px solid #5b4c3e;
  border-radius:10px ;
  padding:20px 20px 20px 20px;
  margin:0 0 20px 0;
 
}

.Q-box{
   display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:-o-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content:space-between;
  

}

.Q{
font-size:24px;
  font-weight: 700;
  width:5%;
  margin:-6px 0 0 0;
  color:#d67685;
}

.Q-txt{
  font-size:18px;
  font-weight: 500;
width:90%;
padding:0 20px 0 0;
}

.A-box{
 display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:-o-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:15px 0 0 0;
  border-top:2px dashed #8c7a6b;
  margin:10px 0 0 0;
}

.A{
font-size:24px;
  font-weight: 700;
  width:5%;
  margin:-6px 0 0 0;
}

.A-txt{
  font-size:18px;
  font-weight: 300;
width:90%;
}

/* デフォルト三角を消す */
summary {
  list-style: none;
  cursor: pointer;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

/* ＋マーク */
summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 24px;
  font-weight: 400;
  transition: 0.3s;
}

/* 開いたら − に変える */
details[open] summary::after {
  content: "−";
}


/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.faq{
padding:0 60px 50px 60px;
}

.faq-box{
  border: 1px solid #5b4c3e;
  border-radius:10px ;
  padding:30px 40px 30px 40px;
  margin:0 0 30px 0;
 
}

.Q-box{
   display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:-o-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content:space-between;
  


}

.Q{
font-size:28px;
  font-weight: 700;
  width:5%;
  margin:-4px 0 0 0;
  color:#d67685;
}

.Q-txt{
  font-size:24px;
  font-weight: 500;
width:93%;
}

.A-box{
 display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:-o-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:15px 0 0 0;
  border-top:2px dashed #8c7a6b;
    margin:15px 0 0 0;
}

.A{
font-size:28px;
  font-weight: 700;
  width:5%;
  margin:-2px 0 0 0;
  color:#8c7a6b;
  
}

.A-txt{
  font-size:24px;
  font-weight: 300;
width:93%;
}

/* デフォルト三角を消す */
summary {
  list-style: none;
  cursor: pointer;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

/* ＋マーク */
summary::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 24px;
  font-weight: 400;
  transition: 0.3s;
}

/* 開いたら − に変える */
details[open] summary::after {
  content: "−";
}
}







/*フォーム設定
---------------------------------------------------------------------------*/

#form-big{
    background-color: ;
    padding:0px 0px 0px 0px;
    
  }


.form-title{
  font-size:30px;
  color:#5b4c3e;
  font-weight: 500;
}

.form-txt{
  font-size:18px;
  color:#4d4d4d;
   font-weight: 300;
   padding:10px 0px 10px 0px;
}


table.form {
  width: 100%;
  border-collapse: collapse;
}

/* 左：項目名 */
table.form th {
  width: 24vw;
  background-color: #f9fafb;
  font-weight: 400;
  font-size: 14px;
  color:#4d4d4d;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  display: table-cell;   /* ← 最重要 */
  vertical-align: top;
  padding: 15px 15px;
}

/* 右：入力欄 */
table.form td {
  border-bottom: 1px solid #e5e7eb;
  display: table-cell;   /* ← 最重要 */
  vertical-align: top;
  padding: 16px 0px 16px 12px;
}

/* フォームの一番上の行だけ、上にも線を引く */
table.form tr:first-child th,
table.form tr:first-child td {
  border-top: 1px solid #e5e7eb;
}


/*必須*/
.req{
  margin:3px 0 0 0;
  padding:0;
  float:;
  text-align:;
  }
  .req span{
  margin:0;
  padding:1px 3px 2px 3px;
  font-size:10px;
  font-weight:normal;
  line-height:100%;
  color:#fff;
  background:#d67685; 
  border-radius: 3px; 
  }

  /*任意*/
  .any{
  margin:0;
  padding:0;
  float:;
  text-align:;
  }
  .any span{
  margin:0;
  padding:1px 3px 2px 3px;
  font-size:10px;
  font-weight:normal;
  line-height:100%;
  color:#999;
  background:#eeeeee;
  border-radius: 3px; 
  }



/* 入力欄を横いっぱいに */
table.form input[type="text"],
table.form input[type="email"],
table.form textarea,
table.form select {
  width: 100%;
  box-sizing: border-box;
}

/* 入力欄を薄い黄色にする（PC版） */
table.form input[type="text"],
table.form input[type="email"],
table.form textarea {
  background-color: #fffbe6;
}

/* フォーカス時も同じ色にする */
table.form input[type="text"]:focus,
table.form input[type="email"]:focus,
table.form textarea:focus {
  background-color: #fffbe6;
}

table.form input[type="text"],
table.form input[type="email"],
table.form textarea,
table.form select{
  width: 100%;
  font-size: 16px;
  color:#3d3d3d;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fffbe6;
  box-sizing: border-box;

}

/* チェックボックスの位置を微調整（□を少し上へ） */
table.form input[type="checkbox"] {
  margin-top: 3px;
}

/*チェックボックス用エラー表示*/
.error {
  color: #e53935;
  font-size: 14px;
  margin-top: 4px;
}

/* ラジオボタンを拡大 */
table.form input[type="radio"] {
  transform: scale(1.3);
  margin-right: 6px;
  margin-top: -2px;
  
}

/* ラジオボタンの項目の文字色は常に同じ */
table.form label:has(input[type="radio"]) {
  color: #4d4d4d;
  font-size:18px
}

.zoom-option {
  color: #4d4d4d;
  font-size:18px
}


/* 通常のチェックボックス（カードUI以外）だけ拡大 */
table.form td > label > input[type="checkbox"] {
  width: 17px;        /* □の大きさ */
  height: 17px;       /* □の大きさ */
  margin-top: 1px;   /* □を少し上へ */
}

/* ZOOM面談チェックボックスの縦ズレ修正 */
table.form td > label {
  display: inline-flex;
  align-items: center;   /* ← 高さを中央揃え */
  gap: 10px;
}


/* Chrome自動入力（オートフィル）の背景色対策 */
table.form input:-webkit-autofill,
table.form textarea:-webkit-autofill,
table.form select:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fffbe6 inset;
  -webkit-text-fill-color: #3d3d3d;
  transition: background-color 9999s ease-in-out 0s;
}

/*プレイスホルダー/*
/* Chrome / Edge / Firefox */
table.form ::placeholder {
  color: #999;
  opacity: 1; /* Firefox対策 */
  font-size: 16px;
}

/* Safari */
::-webkit-input-placeholder {
  color: #999;
}

/* Internet Explorer（ほぼ不要だが念のため） */
:-ms-input-placeholder {
  color: #999;
}


/* =====================================================
   ここから：チェックボックスをカードUIにするCSS（追加）
   ※HTML側で <div class="plan-cards"> と <label class="plan-card"> を使う前提
   ===================================================== */

/* プランカード全体（カードの並び） */
.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* カード1枚 */
.plan-card {
  display: flex;
  align-items: flex-start; 
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* カード内の見出し（プラン名） */
.plan-title {
  display: block;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 4px;
  color: #4d4d4d;
}

/* カード内の説明文（サブコピー） */
.plan-desc {
  display: block;
  font-size: 14px;
  color: #555;
}

/* チェックボックス本体（見せる・カードと一体化） */
/* ここから「チェックボックスだけ薄黄色」にするため、ブラウザ標準を消して自前で描画します */
.plan-card input[type="checkbox"] {
  appearance: none;              /* ← ブラウザ標準の四角を消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #767676;
  border-radius: 4px;            /* ← 四角の角を少し丸める */
  background-color: #fff;     /* ← ★薄黄色（ここが「チェックボックスだけ黄色」） */
  pointer-events: none;;
  flex-shrink: 0;
  margin-top: 5px;/* 文字との位置合わせ（あなたは 6px が良かったのでそれを維持） */
}

/* チェックが入ったときの見た目（✓を描画） */
.plan-card input[type="checkbox"]:checked {
  border-color: #0078D7;
  background-color: #0078D7;     /* ← 選択時は少し濃い黄色 */
}

/* ✓マークを擬似要素で描画 */
.plan-card input[type="checkbox"]:checked::after {
  content: '';
  display: block;

  /* ✓の形 */
  width: 6px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;

  /* 中央に配置して回転 */
  transform: translate(6px, 2px) rotate(45deg);
}

/* 選択中のカード（チェックされたらカード全体も反応） */
/*
.plan-card input[type="checkbox"]:checked ~ div .plan-title,
.plan-card input[type="checkbox"]:checked ~ div .plan-desc {
  color: #d35400;
}
*/ 

/* チェックされたらカードの枠線だけ色を変える */
.plan-card:has(input[type="checkbox"]:checked) {
  border: 2px solid #0078D7;
}

/* ホバー時（PCで押せる感） */
.plan-card:hover {
  border-color: #777;
}

/* エラー時：カード全体を赤系に（JSで .plan-cards に error クラスを付ける想定） */
.plan-cards.error .plan-card {
  border-color: #e53935;
  background-color: #fff5f5;
}




/*フォームのボタン　*/
.submit {
  text-align: center;
  margin:40px 0 0 0 ;
}

#confirmBtn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: #f0a500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* マウスを乗せたとき */
#confirmBtn:hover {
  background-color: #FBB417;
}

/* クリック中 */
#confirmBtn:active {
  transform: translateY(5px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
}




/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
#form-big{
    background-color: ;
    padding:0px 60px 0px 60px;
    
  }


.form-title{
  font-size:60px;
  color:#5b4c3e;
  font-weight: 500;
}

.form-txt{
  font-size:20px;
  color:#4d4d4d;
   font-weight: 300;
}


table.form {
  width: 100%;
  border-collapse: collapse;
}

/* 左：項目名 */
table.form th {
  width: 180px;
  background-color: #f9fafb;
  font-weight: 500;
  font-size: 16px;
  color:#4d4d4d;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  display: table-cell;   /* ← 最重要 */
  vertical-align: top;
  padding: 18px 18px;
}

/* 右：入力欄 */
table.form td {
  border-bottom: 1px solid #e5e7eb;
  display: table-cell;   /* ← 最重要 */
  vertical-align: top;
  padding: 16px 12px;
}

/* フォームの一番上の行だけ、上にも線を引く */
table.form tr:first-child th,
table.form tr:first-child td {
  border-top: 1px solid #e5e7eb;
}


/*必須*/
.req{
  margin:-2px 0 0 0;
  padding:0;
  float:right;
  text-align:right;
  }
  .req span{
  margin:0;
  padding:1px 3px 2px 3px;
  font-size:10px;
  font-weight:normal;
  line-height:100%;
  color:#fff;
  background:#d67685; 
  border-radius: 3px; 
  }

  /*任意*/
  .any{
  margin:-2px 0 0 0;
  padding:0;
  float:right;
  text-align:right;
  }
  .any span{
  margin:0;
  padding:1px 3px 2px 3px;
  font-size:10px;
  font-weight:normal;
  line-height:100%;
  color:#999;
  background:#eeeeee;
  border-radius: 3px; 
  }



/* 入力欄を横いっぱいに */
table.form input[type="text"],
table.form input[type="email"],
table.form textarea,
table.form select {
  width: 100%;
  box-sizing: border-box;
}

/* 入力欄を薄い黄色にする（PC版） */
table.form input[type="text"],
table.form input[type="email"],
table.form textarea {
  background-color: #fffbe6;
}

/* フォーカス時も同じ色にする */
table.form input[type="text"]:focus,
table.form input[type="email"]:focus,
table.form textarea:focus {
  background-color: #fffbe6;
}

table.form input[type="text"],
table.form input[type="email"],
table.form textarea,
table.form select{
  width: 100%;
  font-size: 16px;
  color:#3d3d3d;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fffbe6;
  box-sizing: border-box;

}

/* チェックボックスの位置を微調整（□を少し上へ） */
table.form input[type="checkbox"] {
  margin-top: 3px;
}

/*チェックボックス用エラー表示*/
.error {
  color: #e53935;
  font-size: 14px;
  margin-top: 4px;
}

/* ラジオボタンを拡大 */
table.form input[type="radio"] {
  transform: scale(1.3);
  margin-right: 6px;
  margin-top: -2px;
}

/* ラジオボタンの項目の文字色は常に同じ */
table.form label:has(input[type="radio"]) {
  color: #4d4d4d;
  font-size:16px;
}

.zoom-option {
  color: #4d4d4d;
  font-size:16px;
}


/* 通常のチェックボックス（カードUI以外）だけ拡大 */
table.form td > label > input[type="checkbox"] {
  width: 17px;        /* □の大きさ */
  height: 17px;       /* □の大きさ */
  margin-top: 1px;   /* □を少し上へ */
}

/* ZOOM面談チェックボックスの縦ズレ修正 */
table.form td > label {
  display: inline-flex;
  align-items: center;   /* ← 高さを中央揃え */
  gap: 10px;
}


/* Chrome自動入力（オートフィル）の背景色対策 */
table.form input:-webkit-autofill,
table.form textarea:-webkit-autofill,
table.form select:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fffbe6 inset;
  -webkit-text-fill-color: #3d3d3d;
  transition: background-color 9999s ease-in-out 0s;
}

/*プレイスホルダー/*
/* Chrome / Edge / Firefox */
table.form ::placeholder {
  color: #999;
  opacity: 1; /* Firefox対策 */
  font-size: 14px;
}

/* Safari */
::-webkit-input-placeholder {
  color: #999;
}

/* Internet Explorer（ほぼ不要だが念のため） */
:-ms-input-placeholder {
  color: #999;
}




/* =====================================================
   ここから：チェックボックスをカードUIにするCSS（追加）
   ※HTML側で <div class="plan-cards"> と <label class="plan-card"> を使う前提
   ===================================================== */

/* プランカード全体（カードの並び） */
.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* カード1枚 */
.plan-card {
  display: flex;
  align-items: flex-start; 
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* カード内の見出し（プラン名） */
.plan-title {
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 4px;
  color: #4d4d4d;
}

/* カード内の説明文（サブコピー） */
.plan-desc {
  display: block;
  font-size: 14px;
  color: #555;
}

/* チェックボックス本体（見せる・カードと一体化） */
/* ここから「チェックボックスだけ薄黄色」にするため、ブラウザ標準を消して自前で描画します */
.plan-card input[type="checkbox"] {
  appearance: none;              /* ← ブラウザ標準の四角を消す */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid #767676;
  border-radius: 4px;            /* ← 四角の角を少し丸める */
  background-color: #fff;     /* ← ★薄黄色（ここが「チェックボックスだけ黄色」） */
  pointer-events: none;;
  flex-shrink: 0;
  margin-top: 5px;/* 文字との位置合わせ（あなたは 6px が良かったのでそれを維持） */
}

/* チェックが入ったときの見た目（✓を描画） */
.plan-card input[type="checkbox"]:checked {
  border-color: #0078D7;
  background-color: #0078D7;     /* ← 選択時は少し濃い黄色 */
}

/* ✓マークを擬似要素で描画 */
.plan-card input[type="checkbox"]:checked::after {
  content: '';
  display: block;

  /* ✓の形 */
  width: 6px;
  height: 12px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;

  /* 中央に配置して回転 */
  transform: translate(6px, 2px) rotate(45deg);
}

/* 選択中のカード（チェックされたらカード全体も反応） */
/*
.plan-card input[type="checkbox"]:checked ~ div .plan-title,
.plan-card input[type="checkbox"]:checked ~ div .plan-desc {
  color: #d35400;
}
*/ 

/* チェックされたらカードの枠線だけ色を変える */
.plan-card:has(input[type="checkbox"]:checked) {
  border: 2px solid #0078D7;
}

/* ホバー時（PCで押せる感） */
.plan-card:hover {
  border-color: #777;
}

/* エラー時：カード全体を赤系に（JSで .plan-cards に error クラスを付ける想定） */
.plan-cards.error .plan-card {
  border-color: #e53935;
  background-color: #fff5f5;
}




/*フォームのボタン　*/
.submit {
  text-align: center;
  margin:40px 0 0 0 ;
}

#confirmBtn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: #f0a500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* マウスを乗せたとき */
#confirmBtn:hover {
  background-color: #FBB417;
}

/* クリック中 */
#confirmBtn:active {
  transform: translateY(5px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
}
}



/*確認画面全体
---------------------------------------------------------------------------*/
/* 確認画面全体 */
#confirm {
  max-width: 720px;
  margin: 60px auto;
  padding: 32px 28px;
  background-color: #f9fafb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  font-size: 15px;
  color: #3d3d3d;
}

.confirm-lead {
  margin-bottom: 24px;
  font-size: 14px;
  color: #555;
}


/* 確認画面の各行 */
#confirm p {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
  margin: 0;
  line-height: 1.6;
  font-weight: 600;
}

#confirm p span {
  font-weight: 400;
}

/* 最後の行は線なし */
#confirm p:last-of-type {
  border-bottom: none;
}


/* ボタン全体配置 */
#confirm button {
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

/* 「戻る」ボタン */
#backBtn {
  background-color: #e5e7eb;
  color: #333;
  margin-right: 12px;
}

/* 「送信する」ボタン */
#submitBtn {
  background-color: #0078D7;
  color: #fff;
  font-weight: 600;
}

#submitBtn:hover {
  background-color: #1a86e5;
}













/*fixed ボタン設定
---------------------------------------------------------------------------*/
.floating {
  display:block;
  width:100%;
  position:fixed;
  left:0;
  bottom:0;
  z-index:9999;
  text-align:center;
  margin:0;
  padding:5px 0 0px 0 ;
  background:rgba(0,0,0,0.3);
  }
  

  .fixed-btn_box{
    width:100%;
    margin:6px auto 0px auto;
    padding:0;
  }

  .fixed-btn_box img{
    width:93%;
    margin:0px auto 0px auto;
    padding:0;
    transition:0.3s ease-in-out;
    animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
  }

/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.floating {
  display:block;
  width:100%;
  position:fixed;
  left:0;
  bottom:0;
  z-index:9999;
  text-align:center;
  margin:0;
  padding:15px 0 10px 0 ;
  background:rgba(0,0,0,0.3);
  }
  
  
  
  .fixed-btn_box{
    width:768px;
    margin:0px auto 0px auto;
    padding:0;
  }

  .fixed-btn_box img{
    width:648px;
    margin:0px auto 0px auto;
    padding:0;
    transition:0.3s ease-in-out;
    animation: pulse 2s infinite; /* 2秒ごとにパルス効果を繰り返す */
  }
}












/*フッター設定
---------------------------------------------------------------------------*/
#footer {
  width: 100%;
  min-width: 100%;
  font-size:75%;
  margin:auto auto 0;
  padding:20px 20px 20px 20px;
  background-color:#5B4C3E;
  color: #fff;
  text-align: center;
}

#footer a {
  color: #fff;
  margin: 10px 0;
}

#footer p {
  margin: 10px 0;
}

/* ▼TLメディアクエリ */
@media screen and (min-width:768px){
  #footer {
    width: 100%;
    margin: auto auto 0;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5%;
    color: #fff;
    position: relative;
    background-color: #5B4C3E;
    font-size: 100%;
  }
  
  #footer a {
    color: #fff;
    margin: 10px 0;
  }
  
  #footer p {
    margin: 10px 0;
  }
}
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){

#footer {
  width: 100%;
  margin: auto auto 0;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 40px;
  color: #fff;
  position: relative;
  background-color: #5B4C3E;
  font-size: 100%;
}

#footer a {
  color: #fff;
  margin: 10px 0;
}

#footer p {
  margin: 10px 0;
}
}/* ▲PCメディアクエリ終了▲ */





/*---------- 特商法・プライバシーポリシー----------*/
table.info{
  width:100%;
  border-collapse:separate;
  margin:20px 0;
  font-family:  'Noto Sans JP';
  }
  table.info th{
  padding:10px 0;
  font-size:90%;
  line-height:150%;
  text-align:left; /* thのデフォルトはセンター揃えのため */
  border-bottom:solid 1px #666;
  display:block;
  font-family:  'Noto Sans JP';
  }
  table.info td{
  padding:10px 0 20px 0;
  font-size:90%;
  line-height:150%;
  display:block;
  font-family:  'Noto Sans JP';
  }

 /* ▼PCメディアクエリ */
 @media screen and (min-width:769px){

  table.info{
  width:100%;
  border-collapse:separate;
  margin:20px 0;
  font-family:  'Noto Sans JP';
  }
  table.info th{
  width:180px;
  padding:10px 0;
  font-size:14px;
  line-height:150%;
  text-align:left; /* thのデフォルトはセンター揃えのため */
  letter-spacing:1px;
  border-bottom:solid 1px #666;
  display:table-cell;
  font-family:  'Noto Sans JP';
  }
  table.info td{
  padding:10px;
  font-size:14px;
  line-height:150%;
  letter-spacing:1px;
  border-bottom:dotted 1px #ccc;
  display:table-cell;
  font-family:  'Noto Sans JP';
  }
}/* ▲PCメディアクエリ終了▲ */





/*------------------------------ ページ一番上へ ------------------------------*/

#pagetop {
  position:fixed;
  bottom:5%; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
  right:20px;
  }
  #pagetop i {
  padding-top:6px
  }
  #pagetop a {
  display:block;
  z-index:9999;
  padding:3px 4px 3px 4px;
  border-radius:50%;
  width:45px;
  height:45px;
  background-color:#ccc;
  color:#fff;
  text-decoration:none;
  text-align:center;
  font-size:20px;
  }
  #pagetop a:hover {
  text-decoration:none;
  opacity:0.7;
  }
  

 /* ▼TLメディアクエリ */
 @media screen and (min-width:768px){
  #pagetop {
    position:fixed;
    bottom:5%; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
    right:20px;
    }
    #pagetop i {
    padding-top:6px
    }
    #pagetop a {
    display:block;
    z-index:9999;
    padding:10px 4px 3px 4px;/* 内側の余白 */
    border-radius:50%;       /* 角丸度（丸さ） */
    width:60px;              /* 横幅 */
    height:60px;             /* 高さ */
    background-color:#ccc;
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-size:20px;
    }
    #pagetop a:hover {
    text-decoration:none;
    opacity:0.7;
    }
  }


  /* ▼PCメディアクエリ */
  @media screen and (min-width:1024px){
  #pagetop {
  position:fixed;
  bottom:20px; /* 下からの位置／今回はフローティングがあるため高めに設定。通常は20～30 */
  right:20px;
  }
  #pagetop i {
  padding-top:6px
  }
  #pagetop a {
  display:block;
  z-index:9999;
  padding:7px 4px 8px 4px;/* 内側の余白 */
  border-radius:50%;   /* 角丸度（丸さ） */
  width:60px;             /* 横幅 */
  height:60px;            /* 高さ */
  background-color:#ccc;
  color:#fff;
  text-decoration:none;
  text-align:center;
  font-size:23px;
  }
  #pagetop a:hover {
  text-decoration:none;
  opacity:0.7;
  }
  } /* ▲PCメディアクエリ終了▲ */



/*サンクスページ
---------------------------------------------------------------------------*/

.thanks-title-big{
  color:#d67685;
  font-size:38px;
  font-weight: 500;
  margin:10px 0 30px 0;
  padding:0 30px 0 30px;
  background-color: ;
}

.thanks-title-middle{
  color:#5b4c3e;
  font-size:20px;
  font-weight: 500;
  margin:40px 0 20px 0;
  padding:20px 0 20px 0;
  background-color:#edeae3 ;
  text-align: center;
}

.thanks-title-small{
  color:#5b4c3e;
  font-size:20px;
  font-weight: 500;
  margin:00px 0 00px 0;
  padding:40px 30px 20px 30px;
  width:100%;
  margin:0 auto;
}

.thanks-txt{
  font-size:18px;
  width:100%;
  padding:0 30px 0 30px;
 margin:0 auto;
}
/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.thanks-title-big{
  color:#d67685;
  font-size:48px;
  font-weight: 500;
  margin:0 0 30px 0;
  padding:0 0px 0 0px;
  background-color: ;
}

.thanks-title-middle{
  color:#5b4c3e;
  font-size:24px;
  font-weight: 500;
  margin:50px 0 30px 0;
  padding:20px 0 20px 0;
  background-color:#edeae3 ;
  text-align: center;
}

.thanks-title-small{
  color:#5b4c3e;
  font-size:20px;
  font-weight: 500;
  margin:00px 0 00px 0;
  padding:40px 0 20px 0;
  width:768px;
  margin:0 auto;
}

.thanks-txt{
  font-size:18px;
  width:768px;
 margin:0 auto;
}
}


/*期間終了ページ
---------------------------------------------------------------------------*/
.limit-finish{
  color:#5b4c3e;
  font-size:24px;
  font-weight: 500;
  margin:60px 0 15px 0;
  padding:00px 0 0px 0;
  width:;
}

.sorry{
margin:0 0 15px 0;
}

.sorry img{
  width:200px;
  margin:0 auto;
}

/* ▼PCメディアクエリ */
@media screen and (min-width:769px){
.limit-finish{
  color:#5b4c3e;
  font-size:48px;
  font-weight: 500;
  margin:90px 0 40px 0;
  padding:00px 0 0px 0;
  width:;
}

.sorry{
margin:0 0 20px 0;
}

.sorry img{
  width:200px;
  margin:0 auto;
}
}






/*---------- プライバシーポリシー・特定商取引法に関する表示・お問い合わせ ----------*/


/*---------- サブページ全体 ----------*/

#subpage{
  margin:0;
  padding:30px 20px 45px 20px;
  font-family:'Noto Sans JP' ;
  }
  #subpage p{
    font-size:80%;
  
  }
  .page_title{
  margin:0 0 30px 0;
  padding:0;
  font-size:120%;
  line-height:150%;
  text-align:center;
 
  }
  
  /* ▼PCメディアクエリ */
  @media screen and (min-width:769px){
  #subpage{
  width:100%;
  margin:0 auto;
  padding:75px 0 90px 0; 
  font-family:'Noto Sans JP';
  
  }
  #subpage p{
    font-size:14px;
   
  }
  .page_title{
  margin:0 0 60px 0;
  padding:0;
  font-size:24px;
  line-height:150%;
  text-align:center;
  letter-spacing:1px;
 
  }
  } /* ▲PCメディアクエリ終了▲ */


/*---------- 会社概要・特商法----------*/

table.info{
  width:100%;
  border-collapse:separate;
  margin:20px 0;
  }
  table.info th{
  padding:10px 0;
  font-size:90%;
  line-height:150%;
  text-align:left; /* thのデフォルトはセンター揃えのため */
  border-bottom:solid 1px #666;
  display:block;
  }
  table.info td{
  padding:10px 0 20px 0;
  font-size:90%;
  line-height:150%;
  display:block;
  }
  /* ▼PCメディアクエリ */
  @media screen and (min-width:769px){
  table.info{
  width:100%;
  border-collapse:separate;
  margin:20px 0;
  }
  table.info th{
  width:180px;
  padding:10px 0;
  font-size:14px;
  line-height:150%;
  text-align:left; /* thのデフォルトはセンター揃えのため */
  letter-spacing:1px;
  border-bottom:solid 1px #666;
  display:table-cell;
  }
  table.info td{
  padding:10px;
  font-size:14px;
  line-height:150%;
  letter-spacing:1px;
  border-bottom:dotted 1px #ccc;
  display:table-cell;
  }
  } /* ▲PCメディアクエリ終了▲ */