@charset "UTF-8";
/* ******************************
 *
 * RESPONSIVE MIXIN
 *
 * ****************************** */
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
@font-face {
  font-family: "tsukuhou";
  src: url("../font/Tsukuhou-35Point-Gothic.ttf") format("truetype");
}
/* ******************************
 *
 * FONT SETTINGS
 *
 * ****************************** */
@-webkit-keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@keyframes loopCl {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes loopClRv {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes loopClRv {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.cForm__body {
  background: #f7f7f7;
}
@media screen and (min-width: 320px) {
  .cForm__body {
    padding: 0 0 48px;
  }
}
@media screen and (min-width: 600px) {
  .cForm__body {
    padding: 0 0 64px;
  }
}

[data-theme=dark] .cForm__body {
  background: transparent;
}

/* ===== Contact Form (CF7) ===== */
.cForm {
  color: var(--color-main);
  font-family: var(--font-main);
  display: grid;
  /* CF7の余計な余白を抑える */
}
.cForm p {
  margin: 0;
}

.cForm_row {
  display: grid;
  border-top: solid 1px rgba(0, 0, 0, 0.16);
}
@media screen and (min-width: 320px) {
  .cForm_row {
    padding: 0;
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 600px) {
  .cForm_row {
    padding: 0 0 0 15%;
    grid-template-columns: 20% 80%;
  }
}

[data-theme=dark] .cForm_row {
  border-top: solid 1px rgba(236, 171, 191, 0.16);
}

.cForm_label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: 6px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
@media screen and (min-width: 320px) {
  .cForm_label {
    font-size: 1.4rem;
    padding: 8px 2.5%;
  }
}
@media screen and (min-width: 600px) {
  .cForm_label {
    font-size: 2.2rem;
    padding: 16px 0 0;
  }
}

@media screen and (min-width: 320px) {
  .wpcf7-list-item-label {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 600px) {
  .wpcf7-list-item-label {
    font-size: 1.8rem;
  }
}

.cForm_req {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 80%;
  letter-spacing: 0.04em;
  background: var(--color-accent);
  color: var(--color-white);
}

.cForm_field .wpcf7-form-control-wrap {
  display: block;
}

/* SwiftUIっぽい入力 */
.cForm input[type=text],
.cForm input[type=email],
.cForm input[type=tel],
.cForm input[type=url],
.cForm select,
.cForm textarea {
  width: 100%;
  border: 1px solid transparent;
  background: var(--color-white);
  color: var(--color-main);
  font-size: 16px;
  line-height: 1.6;
  outline: none;
  -webkit-transition: border-color 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
  transition: border-color 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease, -webkit-transform 0.25s ease;
}
@media screen and (min-width: 320px) {
  .cForm input[type=text],
  .cForm input[type=email],
  .cForm input[type=tel],
  .cForm input[type=url],
  .cForm select,
  .cForm textarea {
    padding: 16px 24px;
  }
}
@media screen and (min-width: 600px) {
  .cForm input[type=text],
  .cForm input[type=email],
  .cForm input[type=tel],
  .cForm input[type=url],
  .cForm select,
  .cForm textarea {
    padding: 24px 32px;
  }
}

[data-theme=dark] .cForm input[type=text],
[data-theme=dark] .cForm input[type=email],
[data-theme=dark] .cForm input[type=tel],
[data-theme=dark] .cForm input[type=url],
[data-theme=dark] .cForm select,
[data-theme=dark] .cForm textarea {
  background: color-mix(in oklab, var(--color-white), transparent 86%);
  border-color: color-mix(in oklab, var(--color-main), transparent 70%);
}

.cForm textarea {
  min-height: 180px;
  resize: vertical;
}

.cForm input::-webkit-input-placeholder, .cForm textarea::-webkit-input-placeholder {
  color: color-mix(in oklab, var(--color-main), transparent 55%);
}

.cForm input::-moz-placeholder, .cForm textarea::-moz-placeholder {
  color: color-mix(in oklab, var(--color-main), transparent 55%);
}

.cForm input:-ms-input-placeholder, .cForm textarea:-ms-input-placeholder {
  color: color-mix(in oklab, var(--color-main), transparent 55%);
}

.cForm input::-ms-input-placeholder, .cForm textarea::-ms-input-placeholder {
  color: color-mix(in oklab, var(--color-main), transparent 55%);
}

.cForm input::placeholder,
.cForm textarea::placeholder {
  color: color-mix(in oklab, var(--color-main), transparent 55%);
}

.cForm input:focus,
.cForm select:focus,
.cForm textarea:focus {
  border-color: color-mix(in oklab, var(--color-accent), transparent 0%);
  -webkit-box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent), transparent 78%), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 16px 44px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent), transparent 78%), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 16px 44px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

/* ラジオグループ（Lusion/SwiftUI寄りにピル化） */
.cForm_radioGroup {
  display: grid;
  gap: 10px;
  /* checked時のハイライト */
  /* label:has() が使える環境ならこれが綺麗（Safari 16.4+） */
}
@media screen and (min-width: 320px) {
  .cForm_radioGroup {
    padding: 0 2.5vw 16px;
  }
}
@media screen and (min-width: 600px) {
  .cForm_radioGroup {
    padding: 16px 0;
  }
}
.cForm_radioGroup .wpcf7-list-item {
  margin: 0; /* CF7のデフォ余白を消す */
}
.cForm_radioGroup label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--color-main), transparent 84%);
  background: color-mix(in oklab, var(--color-gray), transparent 35%);
  cursor: pointer;
  -webkit-transition: border-color 0.25s ease, background-color 0.25s ease, -webkit-transform 0.25s ease;
  transition: border-color 0.25s ease, background-color 0.25s ease, -webkit-transform 0.25s ease;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, -webkit-transform 0.25s ease;
}
.cForm_radioGroup input[type=radio] {
  display: none;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}
.cForm_radioGroup label:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--color-accent), transparent 60%);
}
.cForm_radioGroup input[type=radio]:checked + span,
.cForm_radioGroup input[type=radio]:checked {
  /* CF7のuse_label_elementは構造が変わるので、見た目はlabel側で寄せる */
}
.cForm_radioGroup label:has(input[type=radio]:checked) {
  background: color-mix(in oklab, var(--color-accent), transparent 86%);
  border-color: color-mix(in oklab, var(--color-accent), transparent 45%);
}

[data-theme=dark] .cForm_radioGroup label {
  background: color-mix(in oklab, var(--color-black), transparent 78%);
}

/* 「その他」入力欄 */
.cForm_other {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid color-mix(in oklab, var(--color-main), transparent 86%);
  background: color-mix(in oklab, var(--color-gray), transparent 35%);
  margin-bottom: 16px;
}

[data-theme=dark] .cForm_other {
  background: color-mix(in oklab, var(--color-black), transparent 78%);
}

.cForm_otherTitle {
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  color: color-mix(in oklab, var(--color-main), transparent 20%);
}
@media screen and (min-width: 320px) {
  .cForm_otherTitle {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 600px) {
  .cForm_otherTitle {
    font-size: 1.8rem;
  }
}

.cForm_note {
  margin-top: 8px;
  font-size: 1.2rem;
  color: color-mix(in oklab, var(--color-main), transparent 35%);
}

/* 同意欄 */
.cForm_row--accept {
  text-align: center;
}
@media screen and (min-width: 600px) {
  .cForm_row--accept {
    grid-template-columns: 1fr;
  }
}

.cForm_row--accept .wpcf7-form-control.wpcf7-acceptance {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in oklab, var(--color-main), transparent 86%);
  background: color-mix(in oklab, var(--color-gray), transparent 35%);
}

[data-theme=dark] .cForm_row--accept .wpcf7-form-control.wpcf7-acceptance {
  background: color-mix(in oklab, var(--color-black), transparent 78%);
}

.cForm_row--accept input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

/* 送信ボタン */
.cForm_actions {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.cForm_actions p {
  width: 100%;
}
@media screen and (min-width: 320px) {
  .cForm_actions .cBtn {
    width: 90%;
  }
}
@media screen and (min-width: 600px) {
  .cForm_actions .cBtn {
    width: 70%;
  }
}

.cBtn {
  border: 1px solid color-mix(in oklab, var(--color-main), transparent 80%);
  padding: 12px 18px;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: transparent;
  font-weight: 400;
  color: var(--color-main);
  -webkit-transition: background-color 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: background-color 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s ease, -webkit-box-shadow 0.25s ease;
}

.cBtn--primary {
  border-color: color-mix(in oklab, var(--color-accent), transparent 30%);
  background: color-mix(in oklab, var(--color-accent), transparent 0%);
  color: var(--color-white);
  -webkit-box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  font-weight: 700;
}
@media screen and (min-width: 320px) {
  .cBtn--primary {
    font-size: 1.6rem;
    padding: 16px 48px;
  }
}
@media screen and (min-width: 600px) {
  .cBtn--primary {
    font-size: 2.6rem;
    padding: 24px 64px;
  }
}

.cBtn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.cBtn:active {
  -webkit-transform: translateY(0) scale(0.98);
          transform: translateY(0) scale(0.98);
}

/* disabled（同意前） */
.cBtn.is-disabled,
.cBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/* CF7 バリデーション */
.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 1.2rem;
  color: color-mix(in oklab, #d24b4b, transparent 0%);
}

.wpcf7 form .wpcf7-response-output {
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--color-main), transparent 82%);
  background: color-mix(in oklab, var(--color-gray), transparent 35%);
}
@media screen and (min-width: 320px) {
  .wpcf7 form .wpcf7-response-output {
    margin: 48px 15% 0;
    font-size: 1.3rem !important;
  }
}
@media screen and (min-width: 600px) {
  .wpcf7 form .wpcf7-response-output {
    margin: 48px 15% 0;
    font-size: 1.8rem !important;
  }
}

.wpcf7-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
}
/* ===== CF7 Response Message (Success / Error etc.) ===== */
.wpcf7 form .wpcf7-response-output {
  padding: 14px 14px;
  /* “そのまま感”を消す */
  border: 1px solid transparent;
  background: color-mix(in oklab, var(--color-gray), transparent 20%);
  color: var(--color-main);
  font-family: var(--font-main);
  font-size: 1.35rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  /* SwiftUIっぽい浮き */
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 16px 40px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 16px 40px rgba(0, 0, 0, 0.1);
  /* すっと出る */
  -webkit-animation: cf7ToastIn 0.35s ease both;
          animation: cf7ToastIn 0.35s ease both;
}
@media screen and (min-width: 320px) {
  .wpcf7 form .wpcf7-response-output {
    padding: 24px 32px;
  }
}
@media screen and (min-width: 600px) {
  .wpcf7 form .wpcf7-response-output {
    padding: 24px 32px;
  }
}

@-webkit-keyframes cf7ToastIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes cf7ToastIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* ダーク */
[data-theme=dark] .wpcf7 form .wpcf7-response-output {
  background: color-mix(in oklab, var(--color-black), transparent 78%);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 60px rgba(0, 0, 0, 0.38);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 60px rgba(0, 0, 0, 0.38);
}

/* ===== 状態別カラー（控えめ・上品） ===== */
/* 成功 */
.wpcf7 form.sent .wpcf7-response-output {
  border-color: color-mix(in oklab, var(--color-accent), transparent 55%);
  background: color-mix(in oklab, var(--color-accent), transparent 90%);
}

/* エラー（送信失敗・中断など） */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: color-mix(in oklab, #d24b4b, transparent 55%);
  background: color-mix(in oklab, #d24b4b, transparent 92%);
}

/* 入力不備（必須未入力など） */
.wpcf7 form.invalid .wpcf7-response-output {
  border-color: color-mix(in oklab, #e3a400, transparent 45%);
  background: color-mix(in oklab, #e3a400, transparent 92%);
}

/* スパム扱い */
.wpcf7 form.spam .wpcf7-response-output {
  border-color: color-mix(in oklab, #6b6b6b, transparent 55%);
  background: color-mix(in oklab, #6b6b6b, transparent 93%);
}

/* ===== “左に細いアクセントライン”で更に洗練させる（任意） ===== */
.wpcf7 form .wpcf7-response-output {
  position: relative;
  padding-left: 16px;
}
@media screen and (min-width: 600px) {
  .wpcf7 form .wpcf7-response-output {
    padding-left: 18px;
  }
}

.wpcf7 form .wpcf7-response-output::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-main), transparent 70%);
}

.wpcf7 form.sent .wpcf7-response-output::before {
  background: color-mix(in oklab, var(--color-accent), transparent 15%);
}

.wpcf7 form.invalid .wpcf7-response-output::before {
  background: color-mix(in oklab, #e3a400, transparent 15%);
}

.wpcf7 form.failed .wpcf7-response-output::before,
.wpcf7 form.aborted .wpcf7-response-output::before {
  background: color-mix(in oklab, #d24b4b, transparent 10%);
}

.wpcf7 form.spam .wpcf7-response-output::before {
  background: color-mix(in oklab, #6b6b6b, transparent 10%);
}/*# sourceMappingURL=contact.css.map */