@charset "utf-8";

body {
 font-family: sans-serif;
 position: relative;
 background-color: #f8f8f6;
 margin: 0;
}

body::before {
 content: "";
 position: fixed;
 top: 0;
 bottom: 0;
 left: 111px;
 width: 1px;
 background: #000;
 pointer-events: none;
}

@media only screen and (max-width: 1200px) {
 body::before {
  left: 50px;
 }
}

@media only screen and (max-width: 800px) {
 body::before {
  content: none;
 }
}

.content__container {
 padding-left: 221px;
 /* 左線との間隔 */
 padding: 3.3rem 3.3rem 3.3rem 221px;
}

@media only screen and (max-width: 1200px) {
 .content__container {
  padding: 2rem 2rem 2rem 111px;
 }
}

@media only screen and (max-width: 800px) {
 .content__container {
  padding: 0;
  max-width: 90%;
  margin: 0 auto;
 }
}

.contact__top h1 {
 font-size: clamp(30px, 3.4375vw, 55px);
 line-height: 1.5em;
 margin-bottom: 1em;
}

.contact__form__inner {
 border-top: 1px solid #969696;
 border-bottom: 1px solid #969696;
 padding-bottom: 3em;
 margin: 3em 0;
}

.contact__ttl {
 font-size: clamp(22px, 2.5vw, 30px);
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 3em;
 padding: 2.5em 0 1.5em;
}

.contact__kinds__box {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 2em;
 position: relative;
}

@media only screen and (max-width: 800px) {
 .contact__kinds__box {
  grid-template-columns: repeat(1, 1fr);
 }

 .contact__kinds__box img {
  width: 10%;
 }

 .contact__ttl {
  gap: 1em;
 }
}

@media only screen and (max-width: 475px) {
 .contact__kinds__box img {
  width: 20%;
 }

}

.contact__kinds__box label {
 appearance: none;
 background-color: #fff;
 border: 1px solid #969696;
 padding: 1em 2em;
 display: flex;
 align-items: center;
 gap: 2em;
 cursor: pointer;
}

.contact__kinds__btn {
 appearance: none;
 -webkit-appearance: none;
 width: 22px;
 height: 22px;
 margin: 0;
 border: 2px solid #969696;
 border-radius: 50%;
 background: #fff;
 display: grid;
 place-content: center;
 cursor: pointer;
}

/* 中の黒い丸 */
.contact__kinds__btn::before {
 content: "";
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: #222;
 transform: scale(0);
 transition: transform 0.15s ease;
}

/* 選択されたときに丸を表示 */
.contact__kinds__btn:checked::before {
 transform: scale(1);
}

/* キーボード操作時のフォーカス表示 */
.contact__kinds__btn:focus-visible {
 outline: 2px solid #93c5fd;
 outline-offset: 2px;
}


.contact__info li {
 font-size: clamp(20px, 2.5vw, 28px);
 display: grid;
 grid-template-columns: 2.5fr .5fr 7fr;
 align-items: center;
 padding-bottom: 1em;
 white-space: nowrap;
 gap: 2em;
 position: relative;
}

.contact__info li:nth-of-type(4),
.contact__info li:nth-of-type(5) {
 grid-template-columns: 2fr .5fr 2.75fr 2.75fr;
}

.contact__info li input {
 width: 100%;
 height: 70px;
 padding: 1em;
 font-size: clamp(16px, 2.5vw, 24px);
}

.contact__info li textarea {
 width: 100%;
 height: 300px;
 padding: 1em;
 line-height: 1.8;
 font-size: clamp(16px, 2.5vw, 24px);
 resize: none;
}

@media only screen and (max-width: 800px) {
 .contact__kinds__box label {
  padding: 1em;
  gap: 1em;
 }

 .contact__info li {
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  padding-bottom: 2em;
 }

 .contact__info li:nth-of-type(4),
 .contact__info li:nth-of-type(5) {
  grid-template-columns: repeat(2, 1fr);
 }

 .contact__info li input,
 .contact__info li textarea {
  padding: 1em;
  grid-column: 1 / 3;
 }
}

.required__txt {
 width: fit-content;
 font-size: clamp(16px, 2.5vw, 20px);
 font-weight: 500;
 background-color: #d2d2d2;
 border-radius: 5px;
 padding: 3px 5px;
 margin: .5em;
 white-space: nowrap;
}

.privacy-policy__link a {
 text-decoration: underline;
}

.privacy-policy__link a::after {
 content: "";
 display: inline-block;
 width: 1em;
 height: 1em;
 margin-left: 4px;
 vertical-align: -0.1em;
 background: url("../images/contact_file_link.png") no-repeat center / contain;
}

.contact__btn__box {
 display: grid;
 grid-template-columns: 1fr 3fr;
 gap: 1em;
 align-items: center;
 padding: 2em 0;
}

.arrow-back img {
 padding-right: .5em;
 width: fit-content;
}

.contact__submit__btn {
 appearance: none;
 -webkit-appearance: none;
 display: block;
 width: 100%;
 max-width: 600px;
 padding: 20px 56px;
 border: none;
 border-radius: 0;
 background-color: #000;
 background-image: url("../images/contact_white_btn.png");
 background-repeat: no-repeat;
 background-position: right 24px center;
 background-size: 24px auto;
 color: #fff;
 font-family: inherit;
 font-size: 1rem;
 font-weight: bold;
 text-align: center;
 cursor: pointer;
 transition: opacity 0.2s;
}

.contact__submit__btn:hover {
 opacity: 0.8;
}

p.error {
 position: absolute;
 right: 15px;
 top: -15px;
 color: #FFF;
 background: #F00;
 padding: 3px 10px;
 font-size: clamp(14px, 2vw, 20px);
 font-weight: bold;
}
.contact__privacy-policy{
 position: relative;
}
.contact__privacy-policy p.error { 
 position: absolute;
 bottom: 0;
 top: auto;
}
.contact__info .f_check li {
 font-size: clamp(20px, 2.5vw, 28px);
 display: grid;
 grid-template-columns: 2.5fr 7fr;
 align-items: center;
 padding-bottom: 1em;
 white-space: nowrap;
 gap: 2em;
 position: relative;
 text-align: left;
}
@media only screen and (max-width: 800px) {
 .contact__info .f_check li {
  grid-template-columns: repeat(1, 1fr);
  gap: 1em;
  padding-bottom: 2em;
 }
 .contact__info .f_check li span {
  font-weight: bold;
 }

}
p.contact__ctxt {
 font-size: clamp(20px, 2.5vw, 28px);
 padding-top: 1.5em;
 text-align: left;
}
p.contact__ctxt:last-of-type {
 padding-top: 3em;
 text-align: right;
}