@charset "UTF-8";
.fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-up.is-animated {
  opacity: 1;
  transform: translateY(0);
}

@keyframes lineFadeIn {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.text-fade,
.text-fade-sp {
  opacity: 0;
  transform: translateY(20px);
}
.text-fade.is-visible,
.text-fade-sp.is-visible {
  animation: textFadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* お問い合わせページ専用の調整CSS */
/* 固定ヘッダーの下に本文が隠れないよう、他の下層ページと同じ考え方で上部に余白を確保する。
   padding-top/bottom のみを指定し、.wrapper が持つ左右 padding（40px / モバイル20px）を
   ショートハンドの padding で消してしまわないようにする。 */
.contact-page-wrap {
  padding-top: 12rem;
  padding-bottom: 6rem;
}

@media screen and (max-width: 768px) {
  .contact-page-wrap {
    padding-top: 10rem;
    padding-bottom: 4rem;
  }
}
/* スマホで文字・入力欄が画面端まで広がらないよう、内側の要素は常にコンテナ幅に収める */
.contact-page-wrap * {
  max-width: 100%;
  box-sizing: border-box;
}

.contact-page-wrap h1,
.contact-page-wrap h2 {
  margin-bottom: 1.5rem;
}

.contact-page-wrap > p {
  margin-bottom: 0.75rem;
  line-height: 1.8;
}

/* MW WP Form が出力する項目（見出し dt / 入力欄 dd）の間隔をあける */
.contact-page-wrap dl {
  margin: 2.5rem 0 0;
}

.contact-page-wrap dl dt {
  font-weight: 500;
  background: #f2f2f2;
  padding: 8px 16px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.contact-page-wrap dl dd {
  margin: 0 0 2.5rem;
}

.contact-page-wrap dl dd > span {
  display: block;
  margin-bottom: 8px;
}

/* style.scss の input[type=...] { border: none; } を上書きし、
   フォームプラグイン（MW WP Form）が出力する入力欄に枠線を戻す */
.contact-page-wrap input[type=text],
.contact-page-wrap input[type=email],
.contact-page-wrap input[type=tel],
.contact-page-wrap input[type=password],
.contact-page-wrap input[type=number],
.contact-page-wrap textarea,
.contact-page-wrap select {
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px 10px;
  width: 100%;
  background-color: #FFFFFF;
}

.contact-page-wrap textarea {
  min-height: 8rem;
}

/* 郵便番号・電話番号のような複数分割された入力欄（幅がHTML側で指定されている想定）は
   横並びのまま、間隔だけを空ける */
.contact-page-wrap dd input[type=text][size],
.contact-page-wrap dd input[type=tel][size] {
  width: auto;
  display: inline-block;
}

.contact-page-wrap dd > *:not(:last-child) {
  margin-right: 6px;
}

/* サイトを知ったきっかけ等、チェックボックス／ラジオボタンの選択肢一覧 */
.contact-page-wrap ul,
.contact-page-wrap .horizontal-item-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-page-wrap ul li,
.contact-page-wrap .horizontal-item {
  margin: 0;
}

.contact-page-wrap ul li label,
.contact-page-wrap .horizontal-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.contact-page-wrap table {
  border-collapse: collapse;
  width: 100%;
}

.contact-page-wrap th,
.contact-page-wrap td {
  border-bottom: 1px solid #cccccc;
  padding: 12px 10px;
  text-align: left;
}

.contact-page-wrap button,
.contact-page-wrap input[type=submit] {
  cursor: pointer;
  border: 1px solid #12B8D7;
  border-radius: 4px;
  padding: 10px 30px;
  background-color: #12B8D7;
  color: #ffffff;
}

.contact-page-wrap input[type=reset],
.contact-page-wrap input[type=button] {
  cursor: pointer;
  border: 1px solid #999999;
  border-radius: 4px;
  padding: 10px 30px;
  background-color: #ffffff;
  color: #666666;
}

/* 送信・リセット・確認画面へ・戻る等のボタン行を中央揃えにする */
.contact-page-wrap p:has(button),
.contact-page-wrap p:has(input[type=submit]),
.contact-page-wrap p:has(input[type=reset]),
.contact-page-wrap p:has(input[type=button]),
.contact-page-wrap div:has(> button),
.contact-page-wrap div:has(> input[type=submit]),
.contact-page-wrap div:has(> input[type=reset]),
.contact-page-wrap div:has(> input[type=button]) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 2rem;
}

/*# sourceMappingURL=contact.css.map */