input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    color: #646464;
  font-size: 1.6rem;
}

.contact__form {
  padding: 0 0rem 0;
}

@media(max-width:1334px) {
  .contact__form {
    background-color: #fff;
    border-radius: 0px;
    padding: 0 0rem 0;
    margin: 8rem 0;
  }
}

@media(max-width:834px) {
  .contact__form {
    padding: 0 0rem 0px;
    margin: 50px 0 20px;
  }
}

.contact__table {
  font-size: 1.8rem;
  font-weight: 300;
}

.contact__table-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}

.contact__table-label {
  /* width: 260px; */
  width: 100%px;
  font-size: 2rem;
  color: #084E9F;
  font-weight: bold;
  align-items: center;
  margin: 0;
  /* align-items: start; */
  /* margin: 1rem 0 2rem; */
}

.contact__table-label .contact-caution{
    font-size: 12px;
    font-weight: 500;
    color: #000;
  }

.contact__table-region .contact__table-label,
.contact__table-comment .contact__table-label {
  /* margin: 1rem 0; */
  margin: 0;
}

.contact__table-parts {
  /* width: calc(100% - 260px); */
  width: 100%;
  margin-left: 0;
}

@media(max-width:1000px) {
  .contact__table-item {
    display: flex;
    flex-direction: column;
  }

  .contact__table-label {
    width: 100%;
    font-size: 1.8rem;
    /* margin: 1rem 0 1rem; */
  }

  .contact__table-parts {
    width: 100%;
  }
}

.contact__table-region .contact__table-parts__inner {
  position: relative;
  width: fit-content;
}

.contact__table-region .contact__table-parts__inner::after {
  font-size: 3rem;
  content: "\e313";
  position: absolute;
  right: 0.6em;
  /* top: 50%; */
  top: 25px;
  transform: translateY(-50%);
  pointer-events: none;
  /* クリックを無効化 */
  font-size: 1em;
  /* color: #333; */
  font-family: "Material Symbols Outlined";
}

.contact__table-parts__region {
  -webkit-appearance: none;
  /* Safari, Chrome */
  -moz-appearance: none;
  /* Firefox */
  appearance: none;
  /* 標準 */
  background: #fff;
  border: 1px solid #646464;

  height: 50px;
  width: 300px;
  padding: 15px;
  border-radius: 0;
}

.contact__table .require-txt {
  /* font-size: 1.6rem;
  border-radius: 3px;
  color: #fff;
  background-color: #cc5637;
  padding: 4px 10px 4px; */
  font-size: 1.4rem;
  border-radius: 50px;
  color: #fff;
  background-color: #EA3E83;
  padding: 2px 13px;
  line-height: 1.3;
}

.contact__table .option-txt {
  background-color: transparent;
  padding: 2px 24px 0px;
}

@media(max-width:1000px) {
  .contact__table .option-txt {
    display: none;
    padding: 0px;
  }
}

.contact__table textarea {
  border-radius: 0px;
  height: 220px;
  word-break: break-word;
  line-height: 1.5;
  margin-top: 1rem;
  border: 2px solid #ccc;
  border-radius: 7px;
}

.contact__table input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=text]) {
  /* background-color: #ffffff;
  border: 1px solid #646464;
  border-radius: 0px;
  height: 50px;
  width: 100%;
  padding: 15px;
  margin-top: 1rem; */
  background-color: #ffffff;
  border: 2px solid #C4C4C4;
  height: 50px;
  width: 100%;
  padding: 1em;
  margin-top: 1rem;
  font-size: 16px;
  border-radius: 7px;
}

@media(max-width:610px) {
  .contact__table input:not([type=submit]):not([type=radio]):not([type=checkbox]) {
    margin-top: 0rem;
  }
}

/* TEL */
.tel-split {
  /* display: flex;
  flex-wrap: wrap;
  align-items: baseline; */
}

/* .contact__table .tel-split input:not([type=submit]):not([type=radio]):not([type=checkbox]) {
  height: 50px;
  max-width: 160px;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
} */

.contact__table .tel-split input:not([type=submit]):not([type=radio]):not([type=checkbox]).contact__table-parts__tel01 {
  margin-left: 0;
}

.contact__table .tel-split input:not([type=submit]):not([type=radio]):not([type=checkbox]).contact__table-parts__tel03 {
  margin-right: 0;
}

@media(max-width:610px) {
  .contact__table .tel-split input:not([type=submit]):not([type=radio]):not([type=checkbox]) {
    /* max-width: 80px; */
    margin-top: 0;
  }
}

/* 郵便番号 */
.contact__table input:not([type=submit]):not([type=radio]):not([type=checkbox]).p-postal-code {
  max-width: 160px;
  margin-bottom: 0;
  margin-left: 0.3rem;
}

.contact__table input:not([type=submit]):not([type=radio]):not([type=checkbox]).p-postal-code.p-postal-code01 {
  margin-right: 0.6rem;
  margin-left: 0rem;
}

@media(max-width:610px) {
  .contact__table input:not([type=submit]):not([type=radio]):not([type=checkbox]).p-postal-code {
    max-width: 80px;
  }
}


/* エラー↓ */

.contact__table .error {
  font-size: 1.6rem;
}

@media(max-width:834px) {
  .contact__table .error {
    font-size: 1.4rem;
  }
}

.contact__table-region .error {
  display: block;
}

/* .contact__table-tel .error,
.contact__table-fax .error,
.contact__table-yubin .error {
  display: inline-block;
  width: 180px;
}

@media(max-width:610px) {

  .contact__table-tel .error,
  .contact__table-fax .error,
  .contact__table-yubin .error {
    display: inline-block;
    width: 100px;
  }
} */

.contact__form-controller-checkbox .error {
  display: block;
  margin-top: .5em;
  color: #d00;
  font-size: 0.9em;
}

/* エラー↑ */

/* 同意 */

.contact__form-controller {
  font-size: 1.8rem;
  font-weight: 300;
  margin-top: 30px;
}

.contact__form-controller .agree-check {
  border-radius: 0;
  border: 1px solid #646464;
  background-color: #fff;
}

.contact__form-controller .agree-check:checked::after {
  border-bottom: 3px solid #008bd5;
  border-left: 3px solid #008bd5;
  transform: rotate(-45deg);
}

/* 送信ボタン */

/* .contact__form-controller-submit {
  display: flex;
  justify-content: center;
  margin: 0px auto 0;
} */

.contact__form-controller-submit .contact-form-submit-btn {
  color: #fff;
  /* background-color: #008bd5;
  border: 2px solid #008bd5; */
  font-size: 1.8rem;
  font-weight: 600;
  width: 414px;
  aspect-ratio: 414/87;
  max-width: 100%;
  /* height: 56px; */
  /* line-height: 56px; */
  border-radius: 100px;
  margin: 4rem auto 1.5rem;
  background-image: url(../img/send-btn.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  display: block;
  opacity: 1;
  color: transparent;
  box-shadow: 0 12px 0 #000A57;

  /* 背景に矢印を追加 */
  /* background-image: url("../../img/common/right_w.svg");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 0.6em auto; */
  /* padding-right: 3rem; */

  transition: all .3s ease;
}

.contact__form-controller-submit .contact-form-submit-btn:hover {
  box-shadow: 0 6px 0 #000A57;
  transform: translateY(6px);
}

.contact__form-controller-submit .contact-form-submit-btn:disabled {
  /* background-color: #008bd5; */
  /* margin-top: 6rem; */
}

.contact__form-controller-submit .contact-form-submit-btn:disabled:hover{
  box-shadow: 0 12px 0 #000A57;
  transform: translateY(0);
}

.contact__form-controller-submit .contact-form-submit-btn[aria-disabled="true"] {
  /* background-color: #bbb;
  border-color: #bbb; */
  opacity: 0.8;
  cursor: not-allowed;
  box-shadow: 0 12px 0 #000A57;
  transform: translateY(0);
  /* クリック自体は許可する（バリデーションで止めるため） */
}

.contact__table-parts-radio,
.contact__table-parts-check {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 1rem;
}

.contact__table-parts-radio .item-label,
.contact__table-parts-check .item-label{
  font-size: 16px;
}

/* チェックボタンデザイン */
/* ===============================
   Custom Checkbox Chips
   対象HTML: <label class="item-label"><input type="checkbox"> テキスト</label>
   ラッパー: .contact__table-parts-check
   色は --c を変更してください
   =============================== */
.contact__table-parts-check{
  --c: #084E9F;  /* ブランド色 */
  --bd: #D6DEE6; /* 枠線色 */
  --bg: #fff;    /* 背景 */
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; */
}

/* ラベルを“ボタン/チップ”化 */
.contact__table-parts-check .item-label{
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0 0 0 34px; /* 左にアイコン分の余白 */
  /* border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--bg); */
  line-height: 1.4;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* 入力は視覚的に隠す（フォーカスは拾える） */
.contact__table-parts-check .item-label input[type="checkbox"]{
  position: absolute;
  inset: 0;           /* ラベル全体をクリック可能に */
  opacity: 0;
  pointer-events: none;
}

/* チェックボックスの見た目（□） */
.contact__table-parts-check .item-label::before{
  content: "";
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border: 2px solid var(--bd);
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
  transition: all .2s ease;
}

/* ✓ マーク（初期は非表示） */
.contact__table-parts-check .item-label::after{
  content: "";
  position: absolute;
  left: calc(.6rem + 6px);
  top: 50%;
  transform: translateY(-68%) rotate(45deg);
  width: 6px; height: 11px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}

/* hover/focus 表現 */
/* .contact__table-parts-check .item-label:hover{
  border-color: var(--c);
}
.contact__table-parts-check .item-label:has(input:focus-visible){
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent);
} */

/* チェック時の見た目 */
/* .contact__table-parts-check .item-label:has(input:checked){
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, #fff);
} */
.contact__table-parts-check .item-label:has(input:checked)::before{
  background: var(--c);
  border-color: var(--c);
}
.contact__table-parts-check .item-label:has(input:checked)::after{
  border-color: #fff; /* ✓ */
}

/* disabled 時（必要なら） */
.contact__table-parts-check .item-label:has(input:disabled){
  opacity: .5;
  cursor: not-allowed;
}

/* ---- :has() 非対応ブラウザのフォールバック ---- */
/* デザインは簡易化してデフォルトチェックを使う */
@supports not selector(.item-label:has(input:checked)){
  .contact__table-parts-check .item-label{
    padding: 0;
    border: 0;
    background: transparent;
  }
  .contact__table-parts-check .item-label::before,
  .contact__table-parts-check .item-label::after{ display:none; }
  .contact__table-parts-check .item-label input[type="checkbox"]{
    position: static;
    opacity: 1;
    pointer-events: auto;
    margin-right: .4rem;
    accent-color: var(--c);
  }
}


/*同意ボタン*/
.contact__form-controller{
  margin-top: 100px;
}
/* 変数（色など）を両方のラッパーで共有 */
.contact__table-parts-check,
.contact__form-controller-checkbox{
  --c: #084E9F;   /* ブランド色 */
  --bd: #D6DEE6;  /* 枠線色 */
  --bg: #fff;     /* 背景 */
}

/* ラベル本体：既存(item-label)と同意欄(label)の両対応 */
.contact__table-parts-check .item-label,
.contact__form-controller-checkbox label{
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0 0 0 34px; /* 左のボックス分の余白 */
  line-height: 1.4;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* 入力そのものは見えなくする（ラベル全体をクリック可能に） */
.contact__table-parts-check .item-label input[type="checkbox"],
.contact__form-controller-checkbox label input[type="checkbox"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* □ ボックス */
.contact__table-parts-check .item-label::before,
.contact__form-controller-checkbox label::before{
  content: "";
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border: 2px solid var(--bd);
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
  transition: all .2s ease;
}

/* ✓ */
.contact__table-parts-check .item-label::after,
.contact__form-controller-checkbox label::after{
  content: "";
  position: absolute;
  left: calc(.6rem + 6px);
  top: 50%;
  transform: translateY(-68%) rotate(45deg);
  width: 6px; height: 11px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease;
}

/* フォーカス可視化（キーボード操作時） */
.contact__table-parts-check .item-label:has(input:focus-visible)::before,
.contact__form-controller-checkbox label:has(input:focus-visible)::before{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent);
  border-color: var(--c);
}

/* チェック時（□を塗りつぶし＆✓を白で） */
.contact__table-parts-check .item-label:has(input:checked)::before,
.contact__form-controller-checkbox label:has(input:checked)::before{
  background: var(--c);
  border-color: var(--c);
}
.contact__table-parts-check .item-label:has(input:checked)::after,
.contact__form-controller-checkbox label:has(input:checked)::after{
  border-color: #fff;
}

/* disabled（必要なら） */
.contact__table-parts-check .item-label:has(input:disabled),
.contact__form-controller-checkbox label:has(input:disabled){
  opacity: .5;
  cursor: not-allowed;
}

/* ========= エラー表示を“下に・1行で”出す ========= */
/* dd[data-label] 直下に差し込まれたエラーをブロック化して改行 */
dd[data-label] > .error-msg,
dd[data-label] > .form-error,
dd[data-label] > .error,
dd[data-label] > .c-error,
dd[data-label] > .u-error{
  display: block !important;
  clear: both;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #d24b58;           /* 赤系（必要なら調整） */
  /* グリッドやフレックス環境でも幅いっぱいに */
  grid-column: 1 / -1;
}

/* “チェックボックス群”でも必ず改行されるように */
dd.contact__table-parts-check > .error-msg,
dd.contact__table-parts-check > .form-error,
dd.contact__table-parts-check > .error,
dd.contact__table-parts-check > .c-error,
dd.contact__table-parts-check > .u-error{
  margin-left: 0;           /* 余計な押し出しを防止 */
}

/* ========= 入力欄の赤枠（元の雰囲気に寄せる） ========= */
dd.is-invalid input[type="text"],
dd.is-invalid input[type="email"],
dd.is-invalid input[type="tel"],
dd.is-invalid input[type="number"],
dd.is-invalid textarea,
dd.is-invalid select{
  border-color: #e05a6b !important;
  background: #fff7f8;           /* ごく薄い赤背景 */
  outline: none;
}
dd.is-invalid input:focus,
dd.is-invalid textarea:focus,
dd.is-invalid select:focus{
  box-shadow: 0 0 0 2px rgba(224,90,107,.2);
}

/* ========= チェックボックス群の“未選択”視覚キュー ========= */
/* ユウキさんのカスタムチェックと連動して□の枠だけ赤に */
dd.contact__table-parts-check.is-invalid .item-label::before{
  border-color: #e05a6b !important;
}

/* :has() 非対応ブラウザでも最低限崩れないよう保険 */
@supports not (selector(:has(*))){
  dd.contact__table-parts-check.is-invalid{
    outline: 1px solid #e05a6b;
    outline-offset: 4px;
  }
}

/* ---- :has() 非対応ブラウザのフォールバック ---- */
@supports not selector(.item-label:has(input:checked)){
  .contact__form-controller-checkbox label{
    padding: 0;
    background: transparent;
  }
  .contact__form-controller-checkbox label::before,
  .contact__form-controller-checkbox label::after{ display:none; }
  .contact__form-controller-checkbox label input[type="checkbox"]{
    position: static;
    opacity: 1;
    pointer-events: auto;
    margin-right: .4rem;
    accent-color: var(--c);
  }
}

.contact__form-controller-checkbox label{
  color: #084E9F;
  font-weight: bold;
}

/* エラーメッセージを「下に・左寄せ」で固定表示 */
form[name="contactForm"] dd[data-label] > .error-msg,
form[name="contactForm"] dd[data-label] > .form-error,
form[name="contactForm"] dd[data-label] > .error,
form[name="contactForm"] dd[data-label] > .c-error,
form[name="contactForm"] dd[data-label] > .u-error{
  position: static !important;   /* 絶対配置を無効化 */
  display: block !important;     /* 改行させる */
  float: none !important;        /* 浮動解除（念のため） */
  clear: both !important;        /* 隣の要素から独立 */
  margin: 8px 0 0 !important;    /* 入力欄との間隔 */
  text-align: left !important;
  font-size: 13px;
  line-height: 1.6;
  color: #d24b58;
  grid-column: 1 / -1;           /* 親がgridでも全幅で */
  flex: 0 0 100%;                /* 親がflexでも改行 */
}

/* 入力欄の赤枠・薄ピンク背景（既に当たっている見た目を維持） */
form[name="contactForm"] dd.is-invalid input[type="text"],
form[name="contactForm"] dd.is-invalid input[type="email"],
form[name="contactForm"] dd.is-invalid input[type="tel"],
form[name="contactForm"] dd.is-invalid input[type="url"],
form[name="contactForm"] dd.is-invalid textarea,
form[name="contactForm"] dd.is-invalid select{
  border-color:#e05a6b !important;
  background:#fff7f8 !important;
}
form[name="contactForm"] dd.is-invalid input:focus,
form[name="contactForm"] dd.is-invalid textarea:focus,
form[name="contactForm"] dd.is-invalid select:focus{
  box-shadow:0 0 0 2px rgba(224,90,107,.2);
}

/* チェックボックス群も未選択時に枠だけ赤く（任意） */
form[name="contactForm"] dd.contact__table-parts-check.is-invalid .item-label::before{
  border-color:#e05a6b !important;
}

.contact__table-parts-radio{
  display: flex!important;
}

.contact__table-parts-radio .error{
  width: 100%!important;
  gap: 0.5rem 2.5rem;
}

.confirm-body .contact__form-controller-submit .contact-form-submit-btn{
  background-image: url(../img/send-btn.webp);
}

/* 完了　TOPへボタン */
.thanks .contact__form-controller-submit .contact-form-submit-btn {
  background-color: transparent;
  border: none;
  color: #008bd5;
  font-size: 1.8rem;
  font-weight: 300;
  width: fit-content;
  height: 1.8rem;
  line-height: 1.8rem;
  border-radius: 0;
  margin: 3rem auto 1.5rem;
  text-decoration: underline 1px currentColor;
}

/* 確認　送信するボタン */
.confirm .contact__form-controller-submit .contact-form-submit-btn {
  margin: 5rem auto 1.5rem 52%;
}

@media(max-width:1000px) {
  .confirm .contact__form-controller-submit .contact-form-submit-btn {
    margin: 5rem auto 1.5rem;
  }
}

/* 確認　戻るボタン */

.contact__form-controller-submit__back {
  width: fit-content;
  margin: 40px auto 0;
}

.contact__form-controller-submit a {
  display: block;
  width: fit-content;
}

.contact__form-controller-submit .contact-form-submit-btn.--back {
  background-color: #fff;
  color: #008bd5;
  border: 2px solid #008bd5;
  margin-top: 1rem;

  background-image: url("../../img/common/right_b.svg");

  margin: 0;
}

@media(max-width:1000px) {
  .contact__form-controller-submit__back {
    width: 70%;
    margin: 0 auto;
  }

  .contact__form-controller-submit .contact-form-submit-btn.--back {
    margin: 5vw auto 0;
  }
}

/* @media(max-width:400px) {
  .contact__form-controller-submit__back {
    width: 100%;
  }
} */

/* 確認 */

.contact__ttl {
  max-width: 900px;
}

.confirm__content {
  font-size: 1.8rem;
  font-weight: 300;
}

.confirm__content-group {
  border-bottom: none;
}

.confirm__content-txt {
  word-break: break-word;
}

.under-link{
  border-bottom: 1px solid currentColor;
}

/* 完了 */
.thanks-txt{
  width: 590px;
  max-width: 100%;
  margin: 70px auto 30px;
  font-size: 20px;
}

.thanks-body .contact__form-controller-submit a {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.thanks-body main{
  height: calc(100vh - 60px);
}

.top-return-link{
    font-size: 16px;
    display: block;
    width: fit-content;
    border-bottom: #084E9F 1px solid;
    margin: 0 auto;
    color: #084E9F;
  }

@media(max-width:1334px) {
  .contact__table-label {
    font-size: 1.9rem;
  }
}


@media(max-width:1000px) {
  .confirm__content-group {
    display: flex;
    flex-direction: column;
  }

  .confirm__content-head {
    width: 100%;
    max-width: 100%;
  }
}

@media(max-width:834px) {
  .contact__table-label {
    font-size: 1.8rem;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
  }

  .contact__table .require-txt {
    font-size: 1.4rem;
    padding: 2px 10px 2px;
  }

  .contact__form-controller-submit .contact-form-submit-btn{
    background-image: url(../img/send-btn-sp.webp);
    width: 70%;
    aspect-ratio: 257/63;
    box-shadow: 0 2vw 0 #000A57;
    height: auto;
  }

  .contact__form-controller-submit .contact-form-submit-btn:hover {
    box-shadow: 0 1vw 0 #000A57;
    transform: translateY(1vw);
  }

  .contact__form-controller {
    margin-top: 50px;
}

.contact__form-controller-submit .contact-form-submit-btn {
    margin: 2rem auto 1.5rem;
}

.contact__form-controller-submit .contact-form-submit-btn:disabled{
  margin: 2rem auto 1.5rem;
}

.contact__form-controller-submit .contact-form-submit-btn[aria-disabled="true"]{
  box-shadow: 0 2vw 0 #000A57;
  transform: translateY(0);
}

.contact__form-controller-checkbox label{
  font-size: 15px;
  gap: 0;
}

.confirm-body .contact__form-controller-submit .contact-form-submit-btn{
  background-image: url(../img/send-btn-sp.webp);
}
}

@media(max-width:834px) {
  .confirm__content-head{
    font-size: 16px;
    flex-wrap: wrap;
    gap: 5px 20px;
  }

  .confirm-body .contact__form-controller-submit .contact-form-submit-btn{
    width: 70%;
  }

  .confirm-body .contact__form-controller-submit .contact-form-submit-btn.--back{
    width: 100%;
    background-image: none;
  }

  .thanks-txt{
  font-size: 16px;
  margin: 40px auto 30px;
}
}


@media(max-width:500px) {}

/* 完了 */
.contact.thanks .contact__form-controller-submit {
  margin: 12rem auto;
  width: fit-content;
}

@media screen and (max-width: 1024px) {
  .contact.thanks .contact__form-controller-submit {
    margin: 8rem auto;
    width: fit-content;
  }
}

@media screen and (max-width: 500px) {
  .contact.thanks .contact__form-controller-submit {
    margin: 5rem auto;
    width: fit-content;
  }
}