/* ==========================================================================
   Contact Form Styles
   ========================================================================== */

.contactform,
.contactform-confirm {
  margin-top: var(--spacing-vertical);
}

.contactform-bundle {
  margin-bottom: 1.5em;
  position: relative;
  word-break: break-all;
}

.contactform-bundle label {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 0.5em;
}

.contactform-input,
.contactform-textarea {
  display: block;
  width: 100%;
  padding: 0.8em 1em;
  font-size: 16px;
  font-family: inherit;
  color: var(--color-primary);
  background-color: transparent;
  border: 0 none;
  border-radius: 8px;
  outline: none;
  filter: grayscale(0.8);
  appearance: none;
  transition: box-shadow 0.2s ease;
  outline: none 0 transparent;
  -webkit-tap-highlight-color: transparent;
}

.contactform-input:focus,
.contactform-textarea:focus {
  box-shadow: 0 0 0 3px rgba(255, 16, 16, 0.1);
  filter: grayscale(0.8);
}

.contactform-input {
  background: transparent url(../images/bg_input1.svg) no-repeat 0 0;
  background-size: contain;
  aspect-ratio: 336 / 53;
}

.contactform-textarea {
  resize: none;
  background: transparent url(../images/bg_textarea1.svg) no-repeat 0 0;
  background-size: contain;
  aspect-ratio: 336 / 163;
}

/* エラー状態のスタイル */
.contactform-input.is-invalid,
.contactform-textarea.is-invalid {
  filter: grayscale(0);
}


.contactform-input {
  background: transparent url(../images/bg_input1.svg) no-repeat 0 0;
  background-size: contain;
  aspect-ratio: 336 / 53;
}

.contactform-input.is-invalid:focus,
.contactform-textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(255, 16, 16, 0.15);
  filter: grayscale(0.8);
}

/* エラーメッセージ */
.error-message {
  display: none;
  font-size: 12px;
  color: var(--color-accent);
  margin-top: 0.25em;
  padding-left: 0.2em;
  position: absolute;
  top: 100%;
  left: 0;
}

.error-message.is-visible {
  display: block;
}

/* 確認ボタン */
.contactform-bundle .btn-styled {
  background-image: url(../images/bg_btn2.svg);
  transition: opacity 0.2s ease;
  margin-top: var(--spacing-md);
}
.contactform-bundle .btn-styled:nth-child(1) {
  margin-top: calc(var(--spacing-md) * 2);
}

.contactform-bundle .btn-styled:hover {
  opacity: 0.8;
}

.contactform-bundle .btn-styled:active {
  opacity: 0.6;
}

.contactform-bundle .btn-styled > span {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 17px;
  position: relative;
  top: 0.1em;
}

.btn-confirm > span::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  background: transparent url(../images/arrow_left1.svg) no-repeat center center;
  background-size: contain;
  transform: rotate(180deg) translate(0, 10%);
  vertical-align: middle;
}

.contactform-bundle .btn-styled.btn-cancel {
  background-image: url(../images/bg_btn3.svg);
}

.btn-cancel > span::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  background: transparent url(../images/arrow_left1.svg) no-repeat center center;
  background-size: contain;
  transform: translate(0, -10%);
  vertical-align: middle;
}

.btn-sendform > span::after {
  content: '';
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .5em;
  background: transparent url(../images/arrow_outerlink1.svg) no-repeat center center;
  background-size: contain;
  transform: translate(0, -10%);
  vertical-align: middle;
}


/* ==========================================================================
   Snow Monkey Forms カスタムスタイル
   ========================================================================== */

/* フォーム全体 */
.snow-monkey-form {
  margin-top: var(--spacing-vertical);
}

/* 画面別コンテンツ表示切替 */
/* 確認画面では入力用メッセージを非表示 */
[data-screen="confirm"] .smf-message-input {
  display: none;
}

/* 入力画面・エラー画面では確認用メッセージを非表示 */
[data-screen="input"] .smf-message-confirm,
[data-screen="invalid"] .smf-message-confirm {
  display: none;
}

/* 確認用メッセージのスタイル */
.smf-message-confirm {
  margin-bottom: 1.5em;
}

.smf-message-confirm-title {
  font-size: 17px;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 0.5em;
}

.smf-message-confirm-text {
  font-size: 15px;
  line-height: 1.8;
}

/* プログレスバー非表示（任意） */
.smf-progress-tracker {
  display: none;
}

/* 各フィールドグループ */
.smf-item {
  margin-bottom: 1.5em;
  position: relative;
}

/* ラベル */
.smf-item__col--label {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 0.5em;
}

/* 必須マーク */
.smf-item__label .smf-item__required {
  color: var(--color-accent);
  font-size: 12px;
  margin-left: 0.5em;
}

/* コントロール部分 */
.smf-item__col--controls {
  width: 100%;
}

/* テキスト入力・メール入力 */
.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-email-control__control,
.smf-text-control__control.contactform-input,
.smf-email-control__control.contactform-input {
  display: block !important;
  width: 100% !important;
  padding: 0.8em 1em !important;
  font-size: 16px !important;
  font-family: inherit !important;
  color: var(--color-primary) !important;
  background: transparent url(../images/bg_input1.svg) no-repeat 0 0 !important;
  background-size: contain !important;
  aspect-ratio: 336 / 53 !important;
  border: 0 none !important;
  border-radius: 8px !important;
  outline: none !important;
  filter: grayscale(0.8);
  appearance: none !important;
  transition: box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}

/* テキストエリア */
.snow-monkey-form .smf-textarea-control__control,
.smf-textarea-control__control.contactform-textarea {
  display: block !important;
  width: 100% !important;
  padding: 0.8em 1em !important;
  font-size: 16px !important;
  font-family: inherit !important;
  color: var(--color-primary) !important;
  background: transparent url(../images/bg_textarea1.svg) no-repeat 0 0 !important;
  background-size: contain !important;
  aspect-ratio: 336 / 163 !important;
  border: 0 none !important;
  border-radius: 8px !important;
  outline: none !important;
  filter: grayscale(0.8);
  resize: none !important;
  appearance: none !important;
  transition: box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}

/* フォーカス時 */
.smf-text-control__control:focus,
.smf-email-control__control:focus,
.smf-textarea-control__control:focus {
  box-shadow: 0 0 0 3px rgba(255, 16, 16, 0.1);
  filter: grayscale(0.8);
}

/* エラー時 */
.smf-item--error .smf-text-control__control,
.smf-item--error .smf-email-control__control,
.smf-item--error .smf-textarea-control__control {
  filter: grayscale(0);
}

/* エラーメッセージ */
.smf-error-messages {
  font-size: 12px;
  color: var(--color-accent);
  margin-top: 0.25em;
  padding-left: 0.2em;
}

/* ボタンエリア */
.smf-action {
  margin-top: calc(var(--spacing-md) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* 確認画面：ボタン順序を逆に（送信を上、戻るを下） */
[data-screen="confirm"] .smf-action {
  flex-direction: column-reverse;
}

/* ボタンラッパーのリセット */
.smf-action .smf-button-control {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 隣接ボタンのマージンリセット */
.smf-action .smf-button-control + .smf-button-control {
  margin-left: 0;
}

/* ボタン共通スタイル */
.snow-monkey-form .smf-button-control__control,
.smf-action .smf-button-control__control {
  display: flex !important;
  appearance: none !important;
  width: 100% !important;
  aspect-ratio: 331 / 72 !important;
  background: transparent url(../images/bg_btn3.svg) no-repeat center center !important;
  background-size: 100% 100% !important;
  justify-content: center !important;
  align-items: center !important;
  color: var(--color-accent) !important;
  border: 0 none !important;
  outline: 0 !important;
  cursor: pointer !important;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}

.smf-button-control__control:hover {
  opacity: 0.8;
}

.smf-button-control__control:active {
  opacity: 0.6;
}

/* 確認ボタン（入力画面→確認画面）：bg_btn1 + 右矢印アイコン */
.smf-button-control__control[data-action="confirm"] {
  background: transparent url(../images/bg_btn1.svg) no-repeat center center !important;
  background-size: 100% 100% !important;
}

.smf-button-control__control[data-action="confirm"]::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: .5em;
  background: transparent url(../images/arrow_left1.svg) no-repeat center center;
  background-size: contain;
  transform: rotate(180deg) translate(0, 10%);
  vertical-align: middle;
}

/* 送信ボタン：bg_btn2 + 外部リンクアイコン */
.smf-button-control__control[data-action="complete"] {
  background: transparent url(../images/bg_btn2.svg) no-repeat center center !important;
  background-size: 100% 100% !important;
}

.smf-button-control__control[data-action="complete"]::after {
  content: '';
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .5em;
  background: transparent url(../images/arrow_outerlink1.svg) no-repeat center center;
  background-size: contain;
  transform: translate(0, -10%);
  vertical-align: middle;
}

/* 戻るボタン：左矢印アイコン */
.smf-button-control__control[data-action="back"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  background: transparent url(../images/arrow_left1.svg) no-repeat center center;
  background-size: contain;
  transform: translate(0, -10%);
  vertical-align: middle;
}

/* 確認画面のラベル */
.smf-form--confirm .smf-item__col--label {
  font-weight: 500;
  margin-bottom: 0.3em;
}

/* 確認画面の表示値 */
.smf-item__col--controls--confirm,
.smf-item__value {
  font-size: 16px;
  color: var(--color-primary);
  word-break: break-all;
  line-height: 1.8;
}

/* 完了画面 */
.smf-complete-content {
  text-align: center;
  padding: var(--spacing-md) 0;
}

.smf-complete-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1em;
}

.smf-complete-content p {
  line-height: 1.8;
}