@charset "UTF-8";
/* Scss Document */
/* Scss Document */
.contactPage {
  background: #FFF;
}

.contactHero {
  height: 400px;
  position: relative;
}
.contactHero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contactHero__title {
  width: 1em;
  margin: 0;
  padding: 0;
  font-size: 2.5rem;
  font-family: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 500;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.contactHero__title span {
  display: block;
  padding: 2px 0;
  color: #8373f3;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  background-image: linear-gradient(180deg, #e877ae, #8373f3);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contactHero__title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.85);
}
.contactHero__cloud01 {
  position: absolute;
  top: 30px;
  left: -10px;
}
.contactHero__cloud02 {
  position: absolute;
  bottom: -14px;
  right: 30px;
}

.contactContents {
  padding: 100px 0 200px;
  padding-right: 80px;
  padding-left: 80px;
  padding-right: max(80px, calc((100% - 1000px) / 2));
  padding-left: max(80px, calc((100% - 1000px) / 2));
  color: #666;
  background-image: url("../img/common/bg01.jpg");
  background-position: bottom 100px right;
  background-repeat: no-repeat;
}

.contactHeading {
  margin: 0 0 70px;
  padding: 0;
  text-align: center;
  font-size: 2.25rem;
  font-family: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 500;
  line-height: 1.4;
}
.contactHeading span {
  display: inline-block;
  padding: 2px 30px;
  color: #FFF;
  background: linear-gradient(90deg, #e877ae, #8373f3);
}

.contactLabel {
  margin: 0 0 30px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}
.contactLabel span {
  padding: 2px 10px;
  color: #FFF;
  background-color: #333;
}

.contactText {
  margin: 0;
  color: #666;
  font-size: 1.125rem;
  line-height: 2;
  overflow-wrap: anywhere;
}

.contactLead {
  margin: 0 0 35px;
  padding: 0;
  color: #666;
  font-size: 2rem;
  font-family: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 500;
  line-height: 1.6;
}

.contactTable {
  width: 100%;
  border-collapse: collapse;
  color: #666;
  font-size: 1.125rem;
  line-height: 1.8;
  table-layout: fixed;
}
.contactTable th, .contactTable td {
  padding: 25px 30px;
  border: 1px solid #999;
  text-align: left;
  overflow-wrap: anywhere;
}
.contactTable th {
  width: 30%;
  box-sizing: border-box;
  background-color: #eae6e3;
  font-weight: 400;
}

@media (max-width: 1200px) {
  .contactContents {
    padding-right: 40px;
    padding-left: 40px;
    padding-right: max(40px, calc((100% - 1000px) / 2));
    padding-left: max(40px, calc((100% - 1000px) / 2));
  }
}
@media (max-width: 700px) {
  .contactHero {
    height: 340px;
  }
  .contactHero__title {
    font-size: 2rem;
  }
  .contactHero__cloud01 {
    width: 150px;
    height: auto;
  }
  .contactHero__cloud02 {
    width: 210px;
    height: auto;
    right: 15px;
  }

  .contactContents {
    padding: 60px 0 100px;
    padding-right: 20px;
    padding-left: 20px;
    padding-right: max(20px, calc((100% - 1000px) / 2));
    padding-left: max(20px, calc((100% - 1000px) / 2));
    background-position: bottom 50px right;
    background-size: 100% auto;
  }

  .contactHeading {
    margin-bottom: 40px;
    font-size: 1.75rem;
  }
  .contactHeading span {
    padding-right: 20px;
    padding-left: 20px;
  }

  .contactLabel {
    margin-bottom: 25px;
    font-size: 1.25rem;
  }

  .contactText {
    font-size: 1rem;
  }

  .contactLead {
    font-size: 1.5rem;
  }

  .contactTable {
    font-size: 0.875rem;
  }
  .contactTable th, .contactTable td {
    padding: 15px 12px;
  }
  .contactTable th {
    width: 35%;
  }
}
.contactNote {
  margin: 15px 0 35px;
  color: #666;
  font-size: 1rem;
  line-height: 1.8;
}

.contactRequired {
  display: inline-block;
  margin-left: 12px;
  padding: 1px 5px;
  color: #FFF;
  background-color: #e60012;
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
}

.contactForm__row {
  display: flex;
  border: 1px solid #999;
}
.contactForm__row + .contactForm__row {
  border-top: 0;
}
.contactForm__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 5px;
  flex: 0 0 30%;
  box-sizing: border-box;
  padding: 30px;
  background-color: #eae6e3;
  color: #666;
  font-size: 1.125rem;
  line-height: 1.7;
}
.contactForm__field {
  flex: 1;
  min-width: 0;
  padding: 30px;
  box-sizing: border-box;
}
.contactForm__field input[type='text'], .contactForm__field input[type='tel'], .contactForm__field input[type='email'], .contactForm__field textarea {
  display: block;
  width: 100%;
  min-height: 60px;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: #f3f3f3;
  color: #333;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
.contactForm__field textarea {
  min-height: 340px;
  resize: vertical;
}
.contactForm__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0;
  padding: 0;
  border: 0;
}
.contactForm__radios label {
  color: #666;
  font-size: 1.125rem;
}
.contactForm input[type='radio'], .contactForm input[type='checkbox'] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  accent-color: #8373f3;
}
.contactForm input:focus-visible, .contactForm textarea:focus-visible, .contactForm button:focus-visible {
  outline: 2px solid #8373f3;
  outline-offset: 3px;
}
.contactForm__contractNote {
  margin: 25px -30px;
  padding: 10px 15px;
  color: #FFF;
  background-color: #333;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
}
.contactForm__contract {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.contactForm__contract label {
  color: #666;
  font-size: 1rem;
}
.contactForm__contract input[type='text'] {
  min-height: 50px;
}
.contactForm__actions {
  margin-top: 50px;
  text-align: center;
}
.contactForm__consent {
  display: block;
  margin-bottom: 45px;
  color: #666;
  font-size: 1.125rem;
  line-height: 1.8;
}
.contactForm__button {
  width: 500px;
  max-width: 100%;
  min-height: 60px;
  padding: 15px 30px;
  border: 0;
  border-radius: 40px;
  color: #FFF;
  background-color: #8373f3;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  font-size: 1.125rem;
  cursor: pointer;
}
.contactForm__status {
  margin: 25px 0 0;
  color: #666;
  font-size: 1rem;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .contactForm__label {
    padding: 20px;
  }
}
@media (max-width: 700px) {
  .contactNote {
    font-size: 0.875rem;
  }

  .contactForm__row {
    flex-direction: column;
  }
  .contactForm__label {
    flex-basis: auto;
    padding: 15px;
    font-size: 1rem;
  }
  .contactForm__field {
    padding: 20px 15px;
  }
  .contactForm__field input[type='text'], .contactForm__field input[type='tel'], .contactForm__field input[type='email'], .contactForm__field textarea {
    font-size: 1rem;
    min-height: 48px;
  }
  .contactForm__field textarea {
    min-height: 240px;
  }
  .contactForm__radios {
    gap: 20px;
  }
  .contactForm__radios label {
    font-size: 1rem;
  }
  .contactForm__contractNote {
    margin: 20px -15px;
    font-size: 0.875rem;
  }
  .contactForm__contract {
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .contactForm__contract label {
    font-size: 0.875rem;
  }
  .contactForm__consent {
    font-size: 1rem;
  }
  .contactForm__button {
    font-size: 1rem;
  }
}
.contactForm__button {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  border: 1px solid #8373f3;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.contactForm__button:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(131, 115, 243, 0.2);
}
@media (hover: hover) and (pointer: fine) {
  .contactForm__button:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(131, 115, 243, 0.2);
  }
}
.contactForm__button:active {
  transform: translateY(0);
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .contactForm__button {
    transition: none;
  }
  .contactForm__button:hover, .contactForm__button:focus-visible, .contactForm__button:active {
    transform: none;
  }
}
.contactForm__button:focus-visible {
  background-color: #FFF;
  color: #8373f3;
  border-color: #8373f3;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .contactForm__button:hover {
    background-color: #FFF;
    color: #8373f3;
    border-color: #8373f3;
    text-decoration: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contactForm__button {
    transition: none;
  }
}