@charset "utf-8";

.main-inner.contact>p {
  width: 80%;
  margin: 0 auto;
  margin-bottom: var(--margin-m);
}

.link-list.ol {
  height: 100dvh;
}

@media (min-width:1000px) {

  .main-inner.contact>p {
    text-align: center;
  }

  .link-list.ol {
    height: 50dvh;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: var(--margin-l);
  }

}

/* 受付に関するお知らせ */

section.contact-caution {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;
  z-index: 100;
}

.contact-caution-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-deep);
  opacity: 0.6;
}

article.caution {
  background-color: var(--color-light);
  padding-top: var(--margin-l);
  padding-bottom: var(--margin-m);
  padding-left: var(--margin-m);
  padding-right: var(--margin-m);
  border-radius: 5px;
  z-index: 110;
}

@media (min-width:1000px) {

  article.caution {
    width: 50%;
    padding-top: var(--margin-l);
    padding-bottom: var(--margin-l);
    padding-left: var(--margin-l);
    padding-right: var(--margin-l);
  }

}

.caution-inner>p {
  line-height: var(--fs-xl);
}

@media (min-width:1000px) {

  .caution-inner>p {
    text-align: center;
  }

}

.caution-inner>p>a {
  font-weight: var(--font-weight-b);
  color: var(--color-accent);
}

.caution-close-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 15px;
  margin: 0 auto;
}

.caution-close-btn>span {
  width: 100%;
  height: 1px;
  background-color: var(--color-accent);
}

.caution-close-btn>span:nth-child(1) {
  transform: translateY(1px) rotate(-30deg);
}

.caution-close-btn>span:nth-child(2) {
  transform: rotate(30deg);
}

/* SMF */
.snow-monkey-form {
  width: 80%;
  margin: 0 auto;
}

/* =========================
   SMF 共通スタイル（input/confirm/complete 共通）
   ※ 色・枠線・ボタン等の見た目はここ
========================= */

.smf-control-legend,
.smf-item__label__text{
  display: inline-block;
  margin-top: var(--margin-xs);
  margin-bottom: var(--margin-xs);
  font-weight: var(--font-weight-b);
}

.smf-radio-button-control{
  margin-bottom: var(--margin-s);
}

input.smf-text-control__control,
textarea.smf-textarea-control__control{
  border: 1px solid var(--color-accent) !important;
  background-color: transparent !important;
  border-radius: 5px !important;
}

input.smf-text-control__control{
  width: 100%;
}

input.smf-text-control__control::placeholder{
  color: var(--color-accent);
  opacity: 0.3;
}

textarea.smf-textarea-control__control{
  margin-bottom: var(--margin-m);
  min-height: 250px;
}

.form-pp-link{
  display: inline-block;
  color: var(--color-accent);
  margin-right: 5px;
  margin-left: 5px;
}

.smf-checkbox-control{
  margin-bottom: var(--margin-m);
}

button.smf-button-control__control{
  position: relative;
  appearance: none !important;
  -webkit-appearance: none !important; /* Safari */
  background-color: transparent !important;
  border-radius: 5px !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
  background-image: none !important;
  overflow: hidden;
  transition: var(--trans-slow) !important;
  z-index: 10;
}

button.smf-button-control__control::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--color-accent);
  transform: translateX(-100%);
  transition: var(--trans-slow);
  z-index: -1;
}

button.smf-button-control__control:hover{
  color: var(--color-light) !important;
}

button.smf-button-control__control:hover::before{
  transform: translateX(0%);
}

.smf-form .smf-radio-button-control,
.smf-form .smf-checkbox-control{
  align-items: flex-end !important;
}

.smf-form .smf-radio-button-control__control:checked,
.smf-form .smf-checkbox-control__control:checked{
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

.smf-form .smf-radio-button-control__control,
.smf-form .smf-checkbox-control__control{
  background-color: transparent;
  border: 1px solid var(--color-accent) !important;
}


/* =========================
   SMF 入力画面だけのレイアウト（PC）
   ※ grid配置・中央寄せ等は input に限定
========================= */


/* ========== PC：入力画面レイアウト ========== */
@media (min-width: 1000px) {

  .snow-monkey-form[data-screen="input"] .smf-form,
  .snow-monkey-form[data-screen="invalid"] .smf-form{
    display: grid;
    grid-template-columns: 1fr 1.4fr; /* 左：右 */
    column-gap: 48px;
    row-gap: 24px;
    align-items: start;
    grid-auto-rows: auto;
  }

  /* ① 追加した「ご相談テーマ」ラベル（先頭の smf-item）を左上へ */
  .snow-monkey-form[data-screen="input"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(1),
  .snow-monkey-form[data-screen="invalid"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(1){
    grid-column: 1;
    grid-row: 1;
  }


  /* ② ラジオはその下（2行目〜4行目にまたがせる） */
  .snow-monkey-form[data-screen="input"] .smf-form
  > .smf-placeholder[data-name^="radio-buttons"],
  .snow-monkey-form[data-screen="invalid"] .smf-form
  > .smf-placeholder[data-name^="radio-buttons"]{
    grid-column: 1;
    grid-row: 2 / 5;
    transform: translateY(-50px);
  }


  /* ③ 右上：各項目を別rowに固定（※1つ後ろにズレたので 3〜5 に変更） */
  .snow-monkey-form[data-screen="input"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(3),
  .snow-monkey-form[data-screen="invalid"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(3){
    grid-column: 2;
    grid-row: 1;
  }

  .snow-monkey-form[data-screen="input"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(4),
  .snow-monkey-form[data-screen="invalid"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(4){
    grid-column: 2;
    grid-row: 2;
  }

  .snow-monkey-form[data-screen="input"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(5),
  .snow-monkey-form[data-screen="invalid"] .smf-form
  > .wp-block-snow-monkey-forms-item.smf-item:nth-child(5){
    grid-column: 2;
    grid-row: 3;
  }

  /* ④ 下：注意文（p）とチェック（全幅） */
  .snow-monkey-form[data-screen="input"] .smf-form > p,
  .snow-monkey-form[data-screen="invalid"] .smf-form > p{
    grid-column: 1 / -1;
  }

  .snow-monkey-form[data-screen="input"] .smf-form
  > .smf-placeholder[data-name^="checkboxes"],
  .snow-monkey-form[data-screen="invalid"] .smf-form
  > .smf-placeholder[data-name^="checkboxes"]{
    grid-column: 1 / -1;
  }

  /* ⑤ チェック文言＆注意文の中央寄せ（入力画面だけ） */
  .snow-monkey-form[data-screen="input"] .smf-checkboxes-control__control div.smf-label,
  .snow-monkey-form[data-screen="invalid"] .smf-checkboxes-control__control div.smf-label{
    text-align: center;
  }

  .snow-monkey-form[data-screen="input"] .check-box-p,
  .snow-monkey-form[data-screen="invalid"] .check-box-p{
    text-align: center;
  }

}




/* =========================
   入力画面だけ：アクションボタンの中央寄せ
   ※ confirm/complete 側のボタン配置を崩さないため限定
========================= */

.snow-monkey-form[data-screen="input"] .smf-action,
.snow-monkey-form[data-screen="invalid"] .smf-action{
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 確認画面 */

.snow-monkey-form[data-screen="confirm"]{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--margin-m);
}

.snow-monkey-form[data-screen="confirm"] div{
  text-align: center;
}

.snow-monkey-form[data-screen="confirm"] .smf-item__label__text{
  text-align: center;
  color: var(--color-accent);
}

@media (min-width:1000px) {
  .snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="message"]{
    width: 50%;
    margin: 0 auto;
    text-align: left;
  }
}


.snow-monkey-form[data-screen="confirm"] .check-box-p{
  display: none;
}
.snow-monkey-form[data-screen="confirm"] .smf-placeholder[data-name="checkboxes-1jcl0avhv"]{
  display: none;
}