@charset "UTF-8";
/*
変数関係をまとめたファイル
 */
/*
色に関して記述しているファイル
色に関して、ここで宣言をしたものを利用する様にする
*/
:root {
  --color-default: #444444;
  --color-main: #1055A3;
  --color-black: #222222;
  --color-white: #fff;
  --color-gray: #E5E5E5;
  --color-gray2: #666666;
  --color-red: #dc3232;
}

/*
ブレイクポイントに関して記述しているファイル
下のブレイクポイントの設定を変更するときは必ずPMに一声かける
 */
/* ブレイクポイントの設定 min~max */
/* mq-target:指定してメディアクエリのみに適用 */
/* mq:指定より小さい画面に適用 */
/* ==========================================================================
   Contact Page（トップと統一したエディトリアル構成）
   ========================================================================== */
.page-contact {
  /* ---- Form（ブランドカラーに統一） ---- */
}
.page-contact .contact-body {
  background-color: #f4f6f9;
}
.page-contact .contact-body > .container {
  max-width: 900px;
  margin: 0 auto;
}
.page-contact .contact-thumbnail img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(13, 20, 36, 0.1);
  display: block;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-thumbnail img {
    border-radius: 12px;
  }
}
.page-contact .contact-read {
  margin: 48px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 2.1;
  color: #1a2233;
  text-align: center;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-read {
    margin: 32px 0;
    font-size: 14px;
    line-height: 1.9;
  }
}
.page-contact .contact-form form {
  background: #fff;
  padding: 48px;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(13, 20, 36, 0.06);
  border: 1px solid #e2e5ea;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-form form {
    padding: 24px;
    border-radius: 14px;
  }
}
.page-contact .contact-form .form {
  width: 100%;
}
.page-contact .contact-form .form .column {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
  border-bottom: 1px solid #e2e5ea;
  padding-bottom: 32px;
}
.page-contact .contact-form .form .column:last-of-type {
  border-bottom: none;
  margin-bottom: 40px;
  padding-bottom: 0;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-form .form .column {
    display: block;
    margin-bottom: 24px;
    padding-bottom: 24px;
  }
}
.page-contact .contact-form .form .column > .ttl {
  width: 30%;
  padding-top: 12px;
  font-weight: 700;
  color: #4a5568;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-form .form .column > .ttl {
    width: 100%;
    padding-top: 0;
    margin-bottom: 12px;
    font-size: 14px;
  }
}
.page-contact .contact-form .form .column .input {
  width: 70%;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-form .form .column .input {
    width: 100%;
  }
}
.page-contact .contact-form .form .column .input input[type=text],
.page-contact .contact-form .form .column .input input[type=email],
.page-contact .contact-form .form .column .input input[type=tel],
.page-contact .contact-form .form .column .input select,
.page-contact .contact-form .form .column .input textarea {
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid #cbd3de;
  background-color: #f7f9fb;
  font-size: 16px;
  color: #1a2233;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.page-contact .contact-form .form .column .input input[type=text]:focus,
.page-contact .contact-form .form .column .input input[type=email]:focus,
.page-contact .contact-form .form .column .input input[type=tel]:focus,
.page-contact .contact-form .form .column .input select:focus,
.page-contact .contact-form .form .column .input textarea:focus {
  outline: none;
  border-color: var(--color-main);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(16, 85, 163, 0.12);
}
.page-contact .contact-form .form .column .input textarea {
  min-height: 160px;
  resize: vertical;
}
.page-contact .contact-form .form .column .input select {
  padding: 8px;
  width: 100%;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-form .form .column .input select {
    width: calc(100% + 20px);
  }
}
.page-contact .contact-form .submit {
  text-align: center;
}
.page-contact .contact-form .submit .wpcf7-submit {
  position: relative;
  width: 280px;
  max-width: 100%;
  padding: 18px 8px;
  color: var(--color-white);
  background-color: var(--color-main);
  border: 0;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.page-contact .contact-form .submit .wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(16, 85, 163, 0.28);
  opacity: 0.95;
}
@media screen and (max-width: 840px) {
  .page-contact .contact-form .submit .wpcf7-submit {
    width: 100%;
    font-size: 16px;
  }
}
.page-contact .contact-form .wpcf7-response-output {
  text-align: center;
  border-radius: 8px;
}