/* base */
@charset "utf-8";

/* CSS Document */
html {
  scroll-behavior: smooth;
}

.hero_ {
  background: #FFFFFF;
  position: relative;
}

.hero__container_ {
  aspect-ratio: 529 / 543;
}

.hero__mask {
  bottom: 40px;
  position: absolute;
  width: 100%;
}

h1.tittle {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-weight: 500;
  font-size: 3.2rem;
  text-align: center;
  text-shadow: 0 0 4px #3b3b3b,
    0 0 8px #3b3b3b,
    0 0 12px #3b3b3b;
  width: 100%;
}

.mb40 {
  margin-bottom: 40px;
}

.mb30 {
  margin-bottom: 30px;
}

/* パンくずナビ全体 */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #cccccc;
  /* 下のライン */
  margin-bottom: 24px;
  width: 100%;
}

/* リストリセット */
.breadcrumb ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

/* セパレータ */
.breadcrumb li+li::before {
  content: "―";
  margin: 0 8px;
  color: #bbbbbb;
}

/* リンク */
.breadcrumb a {
  color: #bbbbbb;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* 現在ページ */
.breadcrumb .current {
  color: #e07f81;
  font-weight: bold;
}

/* contact */

/* Logo switching for dual-logo header */
.header__logo-img--normal {
  display: none;
}

.header__logo.is-visible .header__logo-img--white {
  display: none;
}

.header__logo.is-visible .header__logo-img--normal {
  display: block;
}

.hero_ {
  margin-bottom: 80px;
}

.contact-stepper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e5e5e5;
}

.stepper-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stepper-number {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c2c2c2;
  margin-bottom: 12px;
  z-index: 1;
}

.stepper-item.active .stepper-number {
  background: #e07f81;
}

.stepper-item.active .stepper-label {
  color: #e07f81;
}

.stepper-label {
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 1.2;
  font-weight: 600;
}

.stepper-line {
  flex: 1;
  max-width: 100px;
  height: 2px;
  background: #c2c2c2;
  margin-top: 9px;
  margin-left: -80px;
  margin-right: -80px;
}

.form-group {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e5e5;
}

.form-label {
  display: block;
  font-weight: 500;
  font-size: 17px;
  margin-bottom: 20px;
}

.required {
  color: #dd1010;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: none;
  font-size: 15px;
  background: #f3f3f3;
  margin-bottom: 16px;
  height: 45px;
}

textarea.form-control {
  height: 135px;
  resize: vertical;
}

select.form-control {
  background-color: transparent;
  background-image:
    url("../../images/contact/arrow.png"),
    linear-gradient(to right, #dfdfdf, #dfdfdf);
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, right 42px center;
  background-size: auto, 1px calc(100% - 8px);
  border: 1px solid #dfdfdf;
}

.privacy-check {
  text-align: center;
  margin-bottom: 40px;
}

.privacy-check label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #191e1f;
}

.privacy-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border: 2.5px solid #f1f1f1;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  position: relative;
}

.privacy-check input[type="checkbox"]:focus-visible {
  outline: 2px solid #e07f81;
  outline-offset: 2px;
}

.privacy-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #e07f81;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.privacy-check a {
  text-decoration: underline;
  text-underline-offset: 8px;
}

.privacy-check img {
  height: 1em;
  vertical-align: -1.2px;
}

.submit-btn {
  width: 100%;
  max-width: 400px;
  padding: 0;
  border: none;
  cursor: pointer;

  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 60px;
}

.form-example {
  font-size: 15px;
  color: #cccccc;
  font-weight: 300;
}

.contact-section {
  margin-top: 70px;
  margin-bottom: 30px;
}

.contact-intro-text {
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.privacy-link-wrapper {
  margin-bottom: 36px;
  line-height: 32px;
}

.privacy-link-text {
  color: #e07f81;
}

.privacy-link-icon {
  display: inline-block;
  height: 1em;
  vertical-align: -1.2px;
  margin-right: 8px;
}

.privacy-instruction {
  margin-bottom: 40px;
}

h1.tittle {
  font-size: 27px;
}

/* タイトルスタイル（全ページ共通） */
.section__title .title__lang {
  display: block;
}

.section__title .title__lang--en {
  color: #e07f81;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.section__title .title__lang--jp {
  font-size: 2.3rem;
  font-weight: 500;
}

.section__title .title--center {
  text-align: center;
}

.section__title .title--left .title__lang--en {
  margin-bottom: 10px;
}

[data-page=top] .section__title .title__lang--jp {
  font-size: 23px;
}

/* ========================================
   Contact Form 7 用スタイル
   CF7のHTML構造（dl/dt/dd）に対応
   ======================================== */

#formBox {
  margin-bottom: 40px;
}

#formBox dl {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e5e5;
}

#formBox dt {
  margin-bottom: 20px;
}

#formBox dt label {
  display: block;
  font-weight: 500;
  font-size: 17px;
  color: #191e1f;
}

/* 必須項目（spanで囲まれた項目名） */
#formBox dt label span {
  color: inherit;
}

/* 必須マーク - 項目名の後ろに追加 */
#formBox dt label span::after {
  content: "（必須）";
  color: #dd1010;
  font-size: 14px;
  margin-left: 8px;
}

#formBox dd {
  margin: 0;
}

#formBox input[type="text"],
#formBox input[type="email"],
#formBox input[type="tel"],
#formBox select,
#formBox textarea {
  width: 100%;
  padding: 12px 16px;
  border: none;
  font-size: 15px;
  background: #f3f3f3;
  height: 45px;
  box-sizing: border-box;
}

#formBox textarea {
  height: 135px;
  resize: vertical;
}

#formBox select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image:
    url("../../images/contact/arrow.png"),
    linear-gradient(to right, #dfdfdf, #dfdfdf);
  background-repeat: no-repeat, no-repeat;
  background-position: right 10px center, right 42px center;
  background-size: auto, 1px calc(100% - 8px);
  border: 1px solid #dfdfdf;
  cursor: pointer;
}

/* CF7のラッパー要素 */
#formBox .wpcf7-form-control-wrap {
  display: block;
}

/* プレースホルダー外出し表示用 */
#formBox .form-example {
  font-size: 15px;
  color: #cccccc;
  font-weight: 300;
  margin-top: 8px;
}

/* ボタンエリア */
#btnBox {
  text-align: center;
  margin-bottom: 32px;
}

.submit-btn-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 400px;
}

#btnBox .btn,
#btnBox .btn01,
#btnBox input[type="submit"] {
  display: block;
  width: 100%;
  padding: 13px 32px;
  background: #e07f81;
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  transition: opacity 0.3s;
}

#btnBox .btn:hover,
#btnBox .btn01:hover,
#btnBox input[type="submit"]:hover {
  opacity: 0.8;
}

.submit-btn-arrow1 {
  background: #fff;
  top: 27px;
  content: "";
  height: 1px;
  position: absolute;
  right: 15px;
  width: 20px;
  z-index: 2;
}

.submit-btn-arrow2 {
  background: #fff;
  top: 27px;
  content: "";
  height: 1px;
  position: absolute;
  right: 15px;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  width: 8px;
  z-index: 2;
}

/* プレースホルダー */
#formBox input::placeholder,
#formBox textarea::placeholder {
  color: #cccccc;
  font-weight: 300;
}

/* バリデーションエラー */
#formBox .wpcf7-not-valid-tip,
.wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  color: #dd1010;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  line-height: 1.5;
}

/* 未入力フィールドのハイライト */
#formBox .wpcf7-not-valid {
  border: 1px solid #e07f81 !important;
}

/* 送信中・完了メッセージ */
.wpcf7-response-output {
  margin: 20px auto;
  padding: 15px 20px;
  border: 1px solid;
  text-align: center;
  max-width: 400px;
}

.wpcf7-form.sent .wpcf7-response-output {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
  background: #fff;
  border-color: #e07f81;
  color: #e07f81;
}

/* 個人情報同意エラー */
.privacy-check .privacy-error {
  color: #dd1010;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  display: none;
}

.privacy-check.has-error .privacy-error {
  display: block;
}

.privacy-check.has-error input[type="checkbox"] {
  border-color: #e07f81;
}

/* ========================================
   確認ページ用ボタンスタイル
   ======================================== */

/* 確認ページ共通 */
.contact-stepper.-complete .stepper-item .stepper-number {
  background: #e07f81;
}

.contact-stepper.-complete .stepper-item .stepper-label {
  color: #e07f81;
}

/* 確認ページのボタンエリア */
.confirm-section {
  text-align: center;
  margin-bottom: 40px;
}

.confirm-text {
  text-align: center;
  line-height: 2.2;
}

/* ボタン間隔（確認ページ専用） */
#btnBox.btnConfirm .btn-spacing {
  margin-bottom: 20px !important;
}

#btnBox.btnConfirm .submit-btn-wrapper+.submit-btn-wrapper {
  margin-top: 20px;
}

/* 修正ボタン（白背景・コーラルボーダー） */
.btn-inverted,
.btn-inverted input[type="submit"],
.btn-inverted input[type="button"],
.btn-inverted button,
.submit-btn-wrapper.btn-inverted input[type="submit"],
.submit-btn-wrapper.btn-inverted input[type="button"],
.submit-btn-wrapper.btn-inverted button {
  background: white !important;
  color: #e07f81 !important;
  border: 1px solid #e07f81 !important;
  border-radius: 50px !important;
}

.btn-inverted:hover,
.btn-inverted input[type="submit"]:hover,
.btn-inverted input[type="button"]:hover,
.btn-inverted button:hover {
  background: #fdf5f5 !important;
}

/* 修正ボタンの矢印（コーラル色） */
.btn-inverted .submit-btn-arrow1,
.submit-btn-wrapper.btn-inverted .submit-btn-arrow1 {
  background: #e07f81;
}

.btn-inverted .submit-btn-arrow2,
.submit-btn-wrapper.btn-inverted .submit-btn-arrow2 {
  background: #e07f81;
}

/* 確認ページ: 不要な要素を非表示 */
.wpcf7-response-output[aria-hidden="true"],
.akismet-fields-container {
  display: none !important;
}

/* CF7レスポンスメッセージを表示（エラー時など） */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output {
  display: block !important;
}

/* 確認ページのボタン基本スタイル（確認ページ専用） */
#btnBox.btnConfirm {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  max-width: 400px;
  margin: 0 auto 60px;
  width: 100%;
}

/* CF7の中間ラッパーも横幅100%に */
#btnBox.btnConfirm>*,
#btnBox.btnConfirm .wpcf7-form-control-wrap,
#btnBox.btnConfirm span:not(.submit-btn-arrow1):not(.submit-btn-arrow2):not(.wpcf7-spinner) {
  display: block;
  width: 100%;
}

#btnBox.btnConfirm .submit-btn-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}

#btnBox.btnConfirm .submit-btn-wrapper input[type="submit"],
#btnBox.btnConfirm .submit-btn-wrapper input[type="button"],
#btnBox.btnConfirm .submit-btn-wrapper button {
  display: block;
  width: 100%;
  padding: 13px 32px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  transition: opacity 0.3s;
  border-radius: 50px;
  background: #e07f81;
  color: #fff;
  border: none;
}

/* CF7送信ボタン（確認画面）のスタイル強化 */
#btnBox.btnConfirm .wpcf7-submit,
#btnBox.btnConfirm input.wpcf7-form-control.wpcf7-submit {
  display: block;
  width: 100%;
  padding: 13px 32px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  transition: opacity 0.3s;
  border-radius: 50px;
  background: #e07f81;
  color: #fff;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

#btnBox.btnConfirm .wpcf7-submit:hover {
  opacity: 0.8;
}

/* CF7スピナーを非表示 */
#btnBox.btnConfirm .wpcf7-spinner {
  display: none;
}

/* 完了ページ用スタイル */
.complete-container {
  text-align: center;
  padding: 60px 20px;
}

.complete-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 1.6;
}

.complete-text {
  font-size: 14px;
  line-height: 2;
  color: #666;
}