@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------------------------------------
PC用レイアウト（768px以上スクリーン）
----------------------------------------------------------------------------------------*/
/* PC版（769px以上） */
@media only screen and (min-width: 769px) {
  /* 画像＋テキストセットを横並び */
  .ccc_inr {
    display: flex;
    gap: 2%; /* 画像とテキストの間 */
    align-items: flex-start;
    margin-bottom: 2em;
  }

  /* 画像の幅を半分 */
  .ccc_inr .right_01 {
    flex: 0 0 48%;
  }

  .ccc_inr .right_01 img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* テキストの幅も半分 */
  .ccc_inr .ccc_text {
    flex: 0 0 48%;
    text-align: left;
  }

  /* 1つ目のタイトル画像はフル幅 */
  .ccc_title img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/*--------------------------------------------------
共通設定(PC)
-----------------------------------------------------*/
/*body全体の初期スタイル調整*/
body {
  font-size: 62.5%; /*emの計算をしやすくするための定番設定*/
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo,
    "sans-serif";
  font-weight: normal;
  color: #000;
}
/*リンク文字の設定*/
a {
  text-decoration: underline;
}
a:link,
a:visited {
  color: #39f;
}
a:hover,
a:active {
  color: #f60;
}
/*ブラウザのCSSをリセット*/
p {
  margin: 0 !important;
  padding: 0 !important;
}
/*セクションエリアの共通設定*/
section {
  clear: both;
  overflow: hidden;
}

/*--------------------------------------------------
見出しタグ設定（PC）
-----------------------------------------------------*/
.parent {
  text-align: center;
}
.child {
  background-color: #ffffff;
  display: static;
  margin: 0em auto;
  padding: 1em 0.6em;
  font-size: 2em;
  color: #141414;
}
.parent02 {
  margin-top: 10em;
  text-align: center;
}

h4 {
  margin: 3em 0em 0.5em;
  padding: 0.3em 0.6em;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
  color: #fc7e51;
}

/*--------------------------------------------------
全体レイアウト／背景設定（PC）
-----------------------------------------------------*/
/*全体エリア（全体背景を設定するにはここ）*/
.main {
  background-color: #fff;
  overflow: hidden;
}
/*記事(ボディ)エリア*/
.article {
  background-color: #fff;
  font-size: 1.6em; /*=16px*/
}
/*記事(ボディ)エリアの行間*/
.article p {
  line-height: 1.6;
}
.article {
  width: 100%;
}
/*カラム全体の幅を変更する*/
.top_image_in,
.section_inr {
  width: 950px;
  margin: 0 auto; /*真ん中に要素を置きたいときに使う*/
  box-sizing: border-box; /* パディング込みで幅計算 */
}

/*--------------------------------------------------
上部固定ヘッダー設定
-----------------------------------------------------*/
/*上部固定ヘッダー全体*/
.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 5000;
  background-color: #000;
  border-bottom: 1px solid #ccc;
  overflow: auto;
}
/*ヘッダー内部をカラム幅にする*/
.header_inr {
  max-width: 950px;
  margin: 0 auto;
  overflow: hidden;
}
/*ヘッダーのロゴ*/
.header_logo {
  width: 10%;
  float: left;
  margin: 0.5em 0 0 0;
}
/*ヘッダーのメニュー*/
.header_menu {
  background-color: #fc7e51;
  margin-top: 0.5em;
  padding: 0.5em 0;
  display: flex;
  justify-content: space-around;
  font-size: 1.7em;
}
.header_menu a {
  text-decoration: none;
  color: #fff;
}
/*--------------------------------------------------
下部固定ヘッダー（PCは非表示）
-----------------------------------------------------*/
.fix_menu_smartphone {
  display: none;
}
/*ヘッダー内の画像が常に幅100%になるように*/
.header_logo img,
.header_mail img,
.header_tel img {
  width: 100%;
}
/*--------------------------------------------------
ファーストビュー設定
-----------------------------------------------------*/
.top_image {
  background-image: url(../images/top-background.webp);
  background-repeat: no-repeat;
  background-position: top center;
  height: auto;
}
.top_image_in img {
  width: 100%;
}
/*--------------------------------------------------
sectionの設定（お悩みから解決策）
-----------------------------------------------------*/
.seciton_01 {
  background-color: #141414;
  font-size: 2em;
  padding: 1.5em 3em;
  margin-bottom: 0em;
}
.section_02 {
  background-color: #141414;
  padding: 1.5em 3em;
  margin-bottom: 8em;
}

/*リスト設定*/
ul {
  padding: 0;
  margin: 0;
}

ul li {
  display: flex;
  align-items: center; /* ← ココを flex-start から center に変更 */
  color: rgb(66, 66, 66);
  background: #d2cfcf;
  line-height: 1.5;
  padding: 0.5em;
  border-bottom: 2px solid #353535;
  list-style: none !important;
  font-weight: bold;
  font-size: 1.5em;
}

ul li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  color: rgb(40, 39, 39);
  margin-right: 0.5em;
  flex-shrink: 0;
  display: flex; /* ← アイコン自体も中央揃え */
  align-items: center; /* ← 上下中央 */
  justify-content: center;
  font-size: 1em; /* 必要に応じて微調整 */
  height: 1.2em; /* 行間とバランスを取る */
}

/*--------------------------------------------------
3つのポイント
-----------------------------------------------------*/
.ccc_title {
  margin: 2em 6em;
}
.checklist_title {
  font-size: 1.4em;
  text-align: center;
  color: #fff;
  margin-top: 5em;
}
.checklist_innr {
  background-color: #fff;
}
.ccc_inr {
  margin: 2em 1em;
}
.ccc_inr img {
  width: 100%;
}
.ccc_text {
  font-size: 2.5em;
  padding-top: 2em;
  color: #fff;
}
ul.checklist {
  list-style: none;
  padding: 1em;
}
ul.checklist img {
  padding-top: 1em;
  padding-right: 0.5em;
}
ul.checklist li {
  background-image: url("../images/checkbox_01.png");
  background-repeat: no-repeat;
  background-size: 3.5%;
  padding-left: 2em;
  padding-bottom: 0.2em;
  margin: 1em;
  font-size: 1.3em;
}

/*--------------------------------------------------
お客様の声
-----------------------------------------------------*/
/* タイトル画像中央 */
.voice-title {
  text-align: center;
  margin-bottom: 2em;
}
.voice-title img {
  max-width: 100%;
  height: auto;
}

.customer-voices {
  background-color: #f7f7f7;
  padding: 4em 2em;
  margin-top: 4em; /* 上の余白 */
  margin-bottom: 0em; /* 下の余白 */
  text-align: center;
}

/* お客様の声リスト */
.voice-list {
  display: flex;
  flex-wrap: wrap; /* 横並び＆折り返し */
  justify-content: space-between; /* 横並びの間隔調整 */
  gap: 1em; /* 各アイテムの隙間 */
}

/* 各お客様の声 */
.voice-item {
  flex: 0 0 49%; /* PCで横2列 */
  text-align: center;
}
.voice-item img {
  width: 100%;
  height: auto;
  display: block;
}
.customer-voices {
  background-color: #141414; /* 薄いグレー背景例 */
  padding: 4em 2em; /* 上下左右の余白調整 */
}

/* スマホ（768px以下）は縦並び */
@media screen and (max-width: 768px) {
  .voice-list {
    flex-direction: column;
    gap: 1.5em;
  }
  .voice-item {
    flex: 0 0 100%;
  }
}

/*--------------------------------------------------
スライダー
-----------------------------------------------------*/
/* スライダーの親要素 */
.slider-wrapper {
  max-width: 950px; /* PCではこれ以上広がらない */
  margin: 0 auto; /* 中央寄せ */
  overflow: hidden;
}

/* Swiper本体 */
.swiper {
  width: 100%; /* 親に合わせる */
}

.swiper-slide img {
  width: 100%; /* スライド画像は親幅いっぱい */
  display: block;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .slider-wrapper {
    max-width: 100%; /* スマホではフル幅 */
    padding: 0 10px; /* 任意で左右少し余白 */
  }
}
/* ナビ矢印の色変更 */
.swiper {
  --swiper-navigation-color: #fc7e51; /* ここで色指定（オレンジ） */
}

/* 必要ならホバー時も同じ色にしたい場合は追加 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #fc7e51;
}

.sale-title-wrapper {
  text-align: center; /* 中央寄せ */
  float: none !important; /* floatをリセット */
  margin-bottom: 1em;
}
.sale-title-wrapper img {
  max-width: 100%;
  height: auto;
}
/*--------------------------------------------------
ステップの構成
-----------------------------------------------------*/
/* ===== ステップセクション ===== */
/* セクション全体 */
/* ===== ステップセクション ===== */
.step-section {
  background: linear-gradient(to bottom, #646464 30%, #141414 100%);
  padding: 30px 20px;
}

/* タイトル画像 */
.step-title {
  max-width: 950px;
  margin: 0 0px;
}

/* ステップ全体 */

/* カード内タイトル（囲い線） */
.step-name {
  display: inline-block; /* テキスト幅に合わせたボックスに */
  padding: 8px 14px; /* 内側余白 */
  border: 2px solid #ffffff; /* ← ここが枠線（紺色） */
  border-radius: 8px; /* 角丸 */
  background: #fff; /* 背景色（必要なら変更） */
  color: #141414; /* 文字色も合わせたいなら */
  font-size: 1.12rem;
  line-height: 1;
}

.step-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  max-width: 950px;
  margin: 0 auto;
}

/* 各カード */
.step-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: calc(50% - 15px);
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.3s;
}

.step-card:hover {
  transform: translateY(-5px);
}

/* ヘッダー部分（アイコン + STEP + タイトル） */
.step-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.step-icon {
  width: 60px;
  height: 60px;
}

.step-texts {
  display: flex;
  flex-direction: column;
}

.step-number {
  font-weight: bold;
  font-size: 1.1rem;
  color: #fc7e51;
}

.step-name {
  font-size: 1.7rem;
  margin: 2px 0 0;
  color: #333;
}

/* 説明文 */
.step-desc {
  font-size: 1.4rem;
  color: #555;
  line-height: 1.6;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .step-card {
    width: 100%;
  }
  .step-header {
    gap: 10px;
  }
  .step-icon {
    width: 50px;
    height: 50px;
  }
}
/* 小さめデバイスの微調整（文字が窮屈なら詰める） */
@media screen and (max-width: 480px) {
  .step-name {
    padding: 6px 10px;
    font-size: 2.2em;
    border-radius: 6px;
  }
  .step-desc {
    font-size: 2em;
  }
}
/*--------------------------------------------------
必要書類パート
-----------------------------------------------------*/
/* 必要書類パート */
.section_documents {
  background-color: #141414; /* ←背景色を変更（例：薄いグレー） */
  padding: 60px 0; /* 上下の余白 */
}

.section_documents .section_inr {
  max-width: 950px; /* 他セクションと合わせる */
  margin: 0 auto;
  text-align: center;
}

.section_documents .documents_image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .section_documents {
    padding: 40px 0;
  }
}
/*--------------------------------------------------
落とし穴のパート
-----------------------------------------------------*/
/* ===== よくある落とし穴 ===== */
.trap-section {
  text-align: center;
  margin: 0;
  padding: 0;
}

/* タイトル画像の背景色追加 */
.trap-title {
  background-color: #141414; /* ←ここが新しい背景 */
  padding: 20px 10px; /* 余白をつけて窮屈に見せない */
}

/* タイトル画像 */
.trap-title img {
  max-width: 950px;
  margin: 0 auto 0px;
  display: block;
}

/* 背景画像設定 */
.trap-bg {
  background-image: url("../images/attention-background.webp"); /* ←背景画像を設定 */
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
  position: relative;
}

/* 背景にオーバーレイ（文字を読みやすくする） */
.trap-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* コンテンツ部分 */
.trap-content {
  position: relative;
  z-index: 2;
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 各項目 */
.trap-item {
  display: flex;
  align-items: flex-start;
  padding: 15px 20px;
  border-radius: 10px;
  text-align: left;
  font-size: 3em;
  color: #fff;
}

/* アイコン */
.trap-icon {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  flex-shrink: 0;
}

/*--------------------------------------------------
解決パート
-----------------------------------------------------*/
/* ===== 解決パート ===== */
.solution-section {
  background-color: #ffffff; /* 好きな背景色に変更可能 */
  text-align: center;
  padding: 0px 20px; /* 上下の余白 */
}

.solution-inr img {
  max-width: 950px;
  width: 100%;
  display: block;
  margin: 0 auto;
}
/*--------------------------------------------------
CTAエリア 完全版
-----------------------------------------------------*/

/* CTA全体 */
.cta-section {
  text-align: center;
}

/* ------------------------------
  タイトル画像のセクション
------------------------------- */
.cta-title-section {
  background-color: #141414;
  padding: 30px 0;
  text-align: center;
}

.cta-title-section img {
  max-width: 95%; /* スマホでもはみ出さない */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ------------------------------
  ボタンパート
------------------------------- */
.cta-btn-section {
  background-color: #fc7e51; /* 背景色 */
  padding: 0px 20px; /* PCでの上下余白 */
  text-align: center;
}

.cta-btn01 {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin-top: 2em; /* タイトル画像との余白 */

  /* アニメーション */
  animation-name: yureru-v;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.cta-btn01 a img {
  display: block;
  margin: 0 auto;
  width: auto;
  max-width: 950px; /* PCでの最大幅 */
  height: auto;
}

/* 
  アニメーション
 */
@keyframes yureru-v {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 
  スマホ対応 */
@media screen and (max-width: 768px) {
  /* タイトル画像の幅を調整 */
  .cta-title-section img {
    max-width: 100%; /* 画面幅に合わせる */
  }

  /* ボタンパートの上下余白を狭く */
  .cta-btn-section {
    padding: 3px 3px;
  }

  /* ボタン画像の幅をスマホ用に調整 */
  .cta-btn01 a img {
    max-width: 100%;
  }

  /* CTA全体の内部幅調整 */
  .cta-section .section_inr {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
}

/* ------------------------------
  FAQ
------------------------------- */
.faq-section {
  background-color: #141414;
  padding: 50px 20px;
  text-align: center;
}

.faq-title-img img {
  max-width: 950px;
  width: 100%;
  height: auto;
  margin: 0 auto 30px;
}

.faq-item {
  margin-bottom: 15px;
  border-radius: 0px;
  overflow: hidden;
  text-align: left;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

/* Qの画像 */
.faq-q-img {
  display: inline-block;
  width: 36px; /* アイコンのサイズ */
  height: 36px;
  background-image: url("../images/faq-q-image.webp"); /* Qの画像パス */
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px; /* 文字との隙間 */
}

/* Aのアイコン画像 */
.faq-a-img {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("../images/faq-a-image.webp"); /* Aの画像パス */
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  font-size: 2.5em;
  background-color: #fc7e51;
  color: #ffffff; /* 文字色を白に */
  font-weight: bold;
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
}

/* アイコン部分 */
.faq-question::after {
  content: "▸";
  font-size: 1.5rem;
  margin-left: 15px; /* 余白を開けてテキストと被らないように */
  flex-shrink: 0; /* アイコンが縮まないようにする */
}

/* アコーディオン開いたときのアイコン */
.faq-question.active::after {
  content: "▾";
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 20px; /* 開くときの中身の余白 */
  background-color: #f1f1f1;
  font-size: 1.6rem;
  line-height: 1.5;
}

/* 開いた状態 */
.faq-item.open .faq-answer {
  max-height: 500px; /* 開いた時の高さ */
  padding: 12px 15px; /* 開いた時だけpaddingを付与 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .faq-section {
    padding: 30px 10px;
  }

  .faq-question {
    font-size: 1.7em;
    padding: 12px 15px;
  }

  .faq-answer {
    font-size: 1.8em;
    padding: 0 15px; /* 初期状態はpadding 0にする */
    max-height: 0; /* 閉じた状態を明示 */
    overflow: hidden;
  }
  .faq-question::after {
    right: 35px; /* スマホではテキストからもう少し離す */
    font-size: 1rem; /* サイズも少し小さくできる */
  }
  .faq-question::before,
  .faq-answer::before {
    width: 30px; /* モバイルでも少し大きめ */
    height: 30px;
    margin-right: 10px;
  }
}

/* ------------------------------
  追従バナー
------------------------------- */
/* デフォルトはPC（769px以上）は非表示） */
.fix_menu_smartphone {
  display: none;
}

/* スマホ（768px以下）だけ表示 */
@media screen and (max-width: 768px) {
  .fix_menu_smartphone {
    display: flex; /* 必要に応じてflexやblock */
    position: fixed; /* 画面下に追従 */
    bottom: 0;
    left: 0; /* 左端に固定 */
    width: 100%;
    z-index: 9999; /* ヘッダーより前面 */
  }
}

/*--------------------------------------------------
会社概要
-----------------------------------------------------*/
/* 会社概要の背景を白に */

.company_title {
  margin-top: 5em;
}
.company table {
  margin: 2em auto;
}
.company th {
  width: 30%;
  background-color: #fc7e51;
  color: #fff;
  padding: 1em;
  font-size: 1.2em;
}
.company td {
  font-weight: normal !important;
  padding-left: 2em;
  font-size: 1.2em;
  background-color: #ffffff;
  color: #141414;
}

/*--------------------------------------------------
許可
-----------------------------------------------------*/
.license_title {
  margin-top: 5em;
}
.license table {
  margin: 2em auto;
}
.license th {
  width: 30%;
  background-color: #fc7e51;
  color: #fff;
  padding: 1em;
  font-size: 1.2em;
}
.license td {
  font-weight: normal !important;
  padding-left: 2em;
  font-size: 1.2em;
  background-color: #ffffff;
  color: #141414;
}

/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
/* プライバシーポリシー専用 */
.privacy-policy {
  background-color: #ffffff;
  padding: 2em 1em; /* 余白も追加すると読みやすくなる */
}
/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
  background-color: #000;
  padding: 0em;
  text-align: center;
  font-size: 1.6em;
  color: #fff;
}
.footer a {
  color: #fff;
}

/*--------------------------------------------------
スムーズスクロール
-----------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

/*--------------------------------------------------
お問い合わせフォーム
-----------------------------------------------------*/
@layer settings {
  :root {
    --torem: 0.0625rem;
    --base-font-family: var(--font-sans-ja);
  }
  @media (max-width: 48rem) {
    :root {
      --viewport: var(--design-width-md, var(--design-width-sm));
    }
  }
}

input,
button,
select,
textarea {
  font: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: 0 0;
  border: none;
  border-radius: 0;
  outline: none;
}
input[type="checkbox"],
input[type="radio"] {
  opacity: 0;
}
label,
button {
  cursor: pointer;
}
.c-error {
  display: block;
  font-size: calc(14 * var(--torem));
  color: #e74c3c;
  animation: 0.3s ease-in-out fadeIn;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact {
  padding-block-start: calc(38 * var(--torem));
  padding-block-end: calc(76 * var(--torem));
}
.contact__inner {
  inline-size: min(100%, 770px);
  padding-inline: calc(10 * var(--torem));
  margin-inline: auto;
}

.conatct__fotm {
  margin-block-start: calc(24 * var(--torem));
}

.contact__caption {
  text-align: center;
  font-size: calc(20 * var(--torem));
  font-weight: 700;
  letter-spacing: 0.025em;
  color: #cfa456;
  line-height: calc(30 / 15);
  @media (max-width: 48rem) {
    font-size: calc(20 * var(--torem));
  }
}

.contact__title-main {
  font-size: calc(35 * var(--torem));
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: calc(30 / 24);
  color: #141414;
  text-align: center;
  margin-block-end: 0;
  margin-block-start: calc(12 * var(--torem));
  @media (max-width: 48rem) {
    font-size: calc(24 * var(--torem));
  }
}

.contact__title-sub {
  color: #fc7e51;
  font-size: calc(30 * var(--torem));
  margin-block-start: calc(30 * var(--torem));
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: calc(27 * var(--torem)) !important;
  @media (max-width: 48rem) {
    font-size: calc(20 * var(--torem));
  }
}
.contact__title-sub::before {
  content: "";
  display: block;
  inline-size: calc(30 * var(--torem));
  background-color: #fc7e51;
  transform: translateX(4px) rotate(70deg);
  block-size: calc(2 * var(--torem));
  @media (max-width: 48rem) {
    inline-size: calc(20 * var(--torem));
  }
}
.contact__title-sub::after {
  content: "";
  display: block;
  inline-size: calc(30 * var(--torem));
  block-size: calc(2 * var(--torem));
  background-color: #fc7e51;
  transform: translateX(-8px) rotate(-70deg);
  @media (max-width: 48rem) {
    inline-size: calc(20 * var(--torem));
  }
}

.contact__title-read {
  font-size: calc(25 * var(--torem));
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  margin-block-start: calc(10 * var(--torem)) !important;
  @media (max-width: 48rem) {
    font-size: calc(20 * var(--torem));
  }
}

.form__inner {
  display: grid;
  gap: calc(30 * var(--torem));
}

.form__label {
  display: grid;
  inline-size: 100%;
}
.form__text {
  display: flex;
  align-items: center;
  font-size: calc(18 * var(--torem));
  font-weight: 700;
  letter-spacing: 0.025em;
}
.form__text:after {
  transform: translateY(2px);
  display: inline-block;
  inline-size: calc(48 * var(--torem));
  padding: calc(3 * var(--torem));
  font-size: calc(12 * var(--torem));
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  content: "必須";
  background-color: #fc7e51;
  border-radius: calc(16 * var(--torem));
  margin-inline-start: calc(10 * var(--torem));
}
.form__text--time::after {
  content: "任意";
  background-color: #ffffff;
  border: 1px solid #fc7e51;
  color: #141414;
}
.form__input {
  display: block;
  font-size: 16px;
  inline-size: 100%;
  block-size: calc(49 * var(--torem));
  margin-block-start: calc(10 * var(--torem));
  border: 1px solid #141414;
  padding-inline: calc(10 * var(--torem));
  padding-block: calc(16 * var(--torem));
}
::placeholder {
  color: #636363;
  font-size: 15px;
  font-weight: 400;
}
.form__checkbox-group-inner {
  display: grid;
  gap: calc(25 * var(--torem));
  align-items: center;
  margin-block-start: calc(10 * var(--torem));
  padding: calc(18 * var(--torem)) calc(10 * var(--torem));
  border: 1px solid #141414;
}
.form__checkbox-group {
  display: grid;
}
.form__checkbox {
  display: flex;
  justify-content: flex-start;
  inline-size: 100%;
}
.form__checkbox-text {
  position: relative;
  display: flex;
  gap: calc(13 * var(--torem));
  align-items: center;
  font-size: calc(18 * var(--torem));
  font-weight: 700;
  transform: translateY(2px);
  letter-spacing: 0.025em;
  inline-size: 100%;
}
.form__checkbox-text:before {
  display: block;
  inline-size: calc(18 * var(--torem));
  block-size: calc(18 * var(--torem));
  content: "";
  border: 1px solid #141414;
}
.form__checkbox-text:after {
  position: absolute;
  top: 45%;
  left: 3px;
  display: block;
  inline-size: calc(12 * var(--torem));
  block-size: calc(8 * var(--torem));
  content: "";
  border-bottom: 2px solid #fe6f6e;
  border-left: 2px solid #fe6f6e;
  opacity: 0;
  transition: all 0.3s;
  transform: translateY(-50%) rotate(-45deg);
}
.form__checkbox-input:checked + .form__checkbox-text:after {
  opacity: 1;
}
.form__checkbox-input{
  display: none;
}
.form__text-link {
  text-decoration: none;
  color: #141414;
  font-size: calc(18 * var(--torem));
  font-weight: 700;
  letter-spacing: 0.025em;
  text-decoration: underline;
}
.form__button {
  inline-size: calc(286 * var(--torem));
  padding: calc(11 * var(--torem)) calc(10 * var(--torem));
  margin-inline: auto;
  font-size: calc(19 * var(--torem));
  font-weight: 700;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: #33c92b;
  border: none;
  border-radius: calc(50 * var(--torem));
  transition: all 0.3s;
  border: 1px solid #33c92b;
  box-shadow: 0 4px 4px rgba(20, 20, 20, 0.27);
}
.form__button:hover {
  background-color: #ffffff;
  color: #33c92b;
}
.form__checkbox-text--privacy {
  font-size: calc(14 * var(--torem));
  padding-block: calc(17 * var(--torem));
  padding-inline: calc(10 * var(--torem));
  gap: calc(20 * var(--torem));
  margin-block-start: calc(10 * var(--torem));
  border: 1px solid #141414;
  width: 100%;
  display: inline-flex;
}
.form__checkbox-text--privacy::after {
  left: 13px;
  top: 46%;
}

.form__text-link {
  color: #141414 !important;
  text-decoration: underline;
}

/* ==========================================
   タブレット対応（769px〜1024px）
========================================== */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .section_inr,
  .top_image_in {
    width: 95%;
    max-width: 950px;
    margin: 0 auto;
  }

  .ccc_inr {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ccc_text {
    font-size: 1.8em;
    padding-top: 1em;
  }

  .step-card {
    width: 80%;
  }

  .voice-item {
    flex: 0 0 100%;
  }
}