@charset "UTF-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}
button {
  color: inherit;
}

.forum #pageTop {
  z-index: 99;
}

/* 変数 */
:root {
  --global-brown: #af8f68;
  --global-brown-light: #efe8e1;
  --global-brown-pale: #f7f4f0;
  --global-brown-dark: #80684c;
  --global-brown-mist: #fbf9f7;

  --font-size-base: 16px;

  --contact-bg: #f7f3ec;
  --contact-panel: #fff;
  --contact-line: #ddcfbb;
  --contact-main: #6f5334;
  --contact-accent: #cf6a2c;
  --contact-text: #34302b;
  --contact-danger: #bc2e2e;
}
@media screen and (max-width: 375px) {
  :root {
    --font-size-base: 4.25vw;
  }
}

/* ベースフォント */
.contact {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: #3c3c43;
}

/* 従来型要素 */
.common_heading {
  font-size: var(--font-size-base);
  margin: 2em 0 0;
  padding-bottom: 1.375em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4em;
}
.common_heading h3 {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.2;
  padding: 0 0 0 0.25em;
  border-left: 6px solid currentColor;
}
.common_heading.tsubasa h3 {
  border-color: var(--tsubasa-base-color);
}
.common_heading .link {
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}
.common_heading .link::before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  left: -1.25em;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--tsubasa-base-color);
  -webkit-mask: url("../images/icon_arrow.svg") center center / 1em 1em
    no-repeat;
  mask: url("../images/icon_arrow.svg") center center / 1em 1em no-repeat;
}
.news_area .common_heading {
  margin: 2em 0 0.5em;
  border-bottom: 1px solid #c0c0c0;
}
@media screen and (max-width: 600px) {
  .common_heading h3 {
    font-size: calc(var(--font-size-base) * 1.25);
    line-height: 1.25;
  }
}
@media screen and (max-width: 400px) {
  .common_heading {
    gap: 2.5em;
  }
}

/* 下線リンク */
.inline_link {
  text-decoration: underline;
  font-weight: 500;
}

/* コンテンツエリア */
.content_area {
  /* inner の設定
  width: 94%;
  */
  width: calc(100% - 5em);
  max-width: 1120px;
  margin-inline: auto;
  line-height: 1;
}
.contact .content_area{
  max-width: 960px;
}
@media screen and (max-width: 720px) {
  .content_area {
    width: calc(100% - 3em);
  }
}
@media screen and (max-width: 620px) {
  .content_area {
    /* inner の設定
    width: 92%;
    */
    width: calc(100% - 2em);
  }
}
@media screen and (max-width: 600px) {
  .content_area {
    /* inner の設定
    width: 92%;
    */
    width: calc(100% - 1em);
  }
}

/* ページタイトル */
.page_title {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact .page_title {
  background-color: var(--global-brown-pale);
}
.page_title h2 {
  font-size: 1.375em;
  font-weight: 500;
}
.page_title.for_contact h2 {
  text-align: center;
}

/* 導入文　*/
.contact .intro_area {
  margin-inline: auto;
  padding: 2em 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact .intro_area p {
  font-size: 1em;
  line-height: 1.75;
}

/* フォームのグリッド */
.form_area {
  padding: 2em 0;
  border-top: 1px solid var(--global-brown-dark);
  border-bottom: 1px solid var(--global-brown-dark);
  margin-inline: auto;
}
.contact .form_grid {
  display: grid;
  /* max-contentを使うと、ラベルの長さに応じて列幅が変わるので入力欄の位置が揃わない。
  grid-template-columns: max-content 1.875em 1fr;
  */
  grid-template-columns: max-content 1.875em 1fr;
  column-gap: 0.5em;
  row-gap: 1.25em;
}

.form_grid label {
  color: #666;
  padding-left: 0.125em;
  text-align: right;
}
.form_grid .musts,
.form_grid .mays {
  font-size: 0.75em;
  width: 2.5em;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form_grid .musts {
  color: red;
  background-color: rgba(255, 0, 0, 0.1);
}
.form_grid .mays {
  color: black;
  background-color: rgba(0, 0, 0, 0.1);
}
/* テキストフィールド */
.form_area input[type="text"],
.form_area input[type="email"],
.form_area input[type="tel"],
.form_area input[type="date"],
.form_area textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 0 0.25em;
  font-size: calc(var(--font-size-base) * 0.875);
  line-height: 1.5;
}
.form_area input[type="date"] {
  width: 7em;
  /*
  width: calc((100% - 2em) / 2);
  */
}
.form_area textarea {
  min-height: 6em;
  resize: vertical;
}
.form_area input.p-postal-code {
  width: 8em;
}
.form_area input[required],
.form_area textarea[required] {
  background-color: var(--kenpon-mist-color);
}
.address_inputs {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}
.form_area input[inputmode="numeric"] {
  width: 7em;
  padding-right: 0.25em;
  display: inline-block;
}
.form_area .unit {
  display: inline-block;
  width: 1.5em;
  text-align: left;
  font-size: calc(var(--font-size-base) * 0.875);
}

/* エラーメッセージ */
.with_error {
  position: relative;
}
.error_message {
  font-size: calc(var(--font-size-base) * 0.75);
  color: red;
  position: absolute;
  left: 0;
  bottom: calc(var(--font-size-base) * -1);
  display: none;
}
.checkbox_group.with_error .error_message {
  left: calc(var(--font-size-base) * 0.75);
  bottom: calc(var(--font-size-base) * -0.875);
}
.textarea_item.with_error .error_message {
  left: 0;
  bottom: calc(var(--font-size-base) * -0.75);
}
.with_error.is_error .error_message {
  display: block;
}
.form_area input[required],
.form_area textarea[required] {
  background-color: var(--global-brown-mist);
}

.contact2026 {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--contact-text);
  background: radial-gradient(
    circle at 20% 0%,
    #fff9ef 0,
    var(--contact-bg) 42%,
    #f1ebe2 100%
  );
}

.check_item,
.privacy_check_area {
  display: flex;
  align-items: center;
  gap: 0.125em;
  margin-inline: 0.75em;
  position: relative;
  /*
  background-color: yellow;
  */
}
.check_item label,
.privacy_check_area label {
  position: relative;
  top: -0px;
}
.check_item input[type="checkbox"],
.privacy_check_area input[type="checkbox"] {
  appearance: none;
  width: calc(var(--font-size-base) * 0.875);
  height: calc(var(--font-size-base) * 0.875);
  margin: 0;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 0;
}
.check_item input[type="checkbox"]::before,
.privacy_check_area input[type="checkbox"]::before {
  content: "✔︎";
  position: relative;
  font-size: calc(var(--font-size-base) * 1);
  left: 1px;
  top: -0.25em;
  display: none;
}
.check_item input[type="checkbox"]:checked::before,
.privacy_check_area input[type="checkbox"]:checked::before {
  display: block;
}

/* 個人情報フィールド｜purchase.cssから移植して調整 */
#privacy_policy {
  margin: 3em auto 0;
}
#privacy_policy h3 {
  font-size: calc(var(--font-size-base) * 0.875);
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.5em;
}
#privacy_policy .privacy {
  font-size: calc(var(--font-size-base) * 0.75);
  height: 15em;
  margin: 1em auto;
  display: block;
  overflow: auto;
  border: 2px solid #e6e6e2;
  padding: 1em 1em 1em 2em;
}
/* 個人情報の取り扱いについての同意チェックボックス：残りは上方 */
.privacy_check_area {
  font-size: calc(var(--font-size-base) * 0.875);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  padding: 1em;
  text-align: center;
}
.privacy_check_area .with_error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.125em;
}

/* 申請ボタン */
.submit_button_area {
  margin-top: 2em;
  margin-bottom: 3em;
  display: flex;
  justify-content: center;
  gap: 1em;
}
.submit_button {
  width: 12.5em;
  height: 2.625em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.5em;
  border: 2px solid var(--global-brown);
  color: var(--global-brown);
  background-color: white;
  font-size: var(--font-size-base);
  font-weight: 700;
  cursor: pointer;
}
.submit_button.back {
  border: 2px solid #999;
  color: #999;
}

/* 戻るボタン */
.back_button_area {
  margin-top: 3em;
  margin-bottom: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back_button_area a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--global-brown-dark);
  border-radius: 1.5em;
  border: 1px solid var(--global-brown-dark);
  padding: 0.25em 1.5em;
}
.back_button_area a::before {
  content: "";
  display: inline-block;
  width: 1.625em;
  height: 1.625em;
  margin-right: 0.5em;
  flex: 0 0 auto;
  background-color: var(--global-brown-dark);
  -webkit-mask: url("../images/icon_back.svg") no-repeat center / contain;
  mask: url("../images/icon_back.svg") no-repeat center / contain;
}

/* 申請フォームのレスポンシブ対応 */
@media screen and (max-width: 600px) {
  .contact .form_grid {
    display: block;
  }
  .form_grid > label,
  .form_grid > .musts,
  .form_grid > .mays {
    display: inline-flex;
  }
  .form_grid > :nth-child(3n):not(.checkbox_group) {
    display: block;
  }
  .form_grid > label {
    line-height: 1.5;
  }
  .form_grid > label:not(:first-of-type) {
    margin-top: 1.5em;
  }

  .form_grid label {
    padding-left: 0;
    text-align: left;
  }
  .form_grid > .musts,
  .form_grid > .mays {
    position: relative;
    top: -0.125em;
    height: 1.5em;
  }
  .form_grid select {
    width: 100%;
  }
  .form_grid input[type="date"] {
    width: 100%;
  }
  .form_grid .number_inputs input[type="text"] {
    width: calc(100% - 2em);
  }
  .form_grid textarea {
    width: 100%;
  }
  .privacy_check_area {
    display: flex;
    align-items: center;
    gap: 0.125em;
    margin-inline: 0.75em;
  }
  #privacy_policy .privacy {
    padding: 0.75em 1em 1em 1em;
  }
}

/* 詳細情報 */
.detail_area {
  margin: 3em auto;
  line-height: 1.75;
  box-sizing: border-box;
  border-radius: 0.5em;
  background-color: #ccc; /* これが表の罫線になる */
  padding: 1px;
}
.detail_grid {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 1px;
}
.detail_grid dt,
.detail_grid dd {
  padding: 0.5em 1em;
  box-sizing: border-box;
}
.detail_grid dt {
  font-weight: 700;
  background-color: #f2f2f2;
  color: var(--kenpon-dark-color);
  text-align: center;
}
.detail_grid dt:first-of-type {
  border-top-left-radius: 0.5em;
}
.detail_grid dt:last-of-type {
  border-bottom-left-radius: 0.5em;
}
.detail_grid dd {
  background-color: white;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.detail_grid dd:first-of-type {
  border-top-right-radius: 0.5em;
}
.detail_grid dd:last-of-type {
  border-bottom-right-radius: 0.5em;
}
.detail_grid dd a {
  word-break: break-all;
  color: var(--kenpon-dark-color);
  text-decoration: underline;
}
.contact_heading {
  margin-top: 3em;
  margin-bottom: 1em;
}
.contact_heading h3 {
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .detail_area {
    line-height: 1.5;
    border-radius: 0.5em;
  }
  .detail_grid {
    grid-template-columns: 5em 1fr;
  }
  .detail_grid dt,
  .detail_grid dd {
    padding: 0.25em 0.25em;
  }
}

/* reCAPTCHA widget (共通ライブラリ recaptcha_widget() の出力) */
.recaptcha_area {
  display: flex;
  justify-content: center;
  margin-top: 1.5em;
}
.recaptcha_area .error_message {
  left: auto;
  bottom: calc(var(--font-size-base) * -1.25);
}