/* 1336pxの場合　フォントサイズ以外
 min(1rem,calc(10vw/13.66)) */



#wrapper {
 background-color: #e3e9f3;
 position: relative;
 z-index: 1;
 min-height: 100dvh;
}
#wrapper::after {
 content: "";
 width: 100%;
 height: 100%;
 background: url(../images/bg.webp);
 background-size: contain;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 pointer-events: none;
}

/*                        contact                        */
.contact_inner {
 width: min(90rem, calc(900vw / 13.66));
 margin: 0 auto;
 position: relative;
 padding: min(20rem, calc(200vw / 13.66)) 0 min(12rem, calc(120vw / 13.66));
 z-index: 1;
}
.contact_ttl {
 font-size: 4rem;
 color: #082275;
 letter-spacing: 0.13em;
 font-weight: 600;
}
.contact_bg_txt {
 font-size: 15.1rem;
 font-weight: 900;
 letter-spacing: 0.05em;
 background: #004685;
 background: linear-gradient(180deg, rgba(0, 70, 133, 0.15) 0%, rgba(0, 70, 133, 0) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto;
 top: min(10rem, calc(100vw / 13.66));
 line-height: 1;
 z-index: -1;
}

form {
 margin-top: min(7.5rem, calc(75vw / 13.66));
}

.contact_item {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-bottom: min(2.5rem, calc(25vw / 13.66));
}
.flex_st {
 align-items: flex-start;
}
.contact_item > label {
 width: min(26rem, calc(260vw / 13.66));
 font-size: 1.6rem;
 color: #082275;
 letter-spacing: 0.12em;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 0 min(1.5rem, calc(15vw / 13.66));
 line-height: 1.87;
 text-align: left;
}
.contact_item > label .require {
 width: min(3.6rem, calc(36vw / 13.66));
 font-size: 1.2rem;
 color: #082275;
 letter-spacing: 0.12em;
 font-weight: 600;
 text-align: center;
 background: #0059a8;
 background: linear-gradient(267deg, rgba(0, 89, 168, 1) 0%, rgba(8, 34, 117, 1) 100%);
 color: #fff;
 display: inline-block;
 border-radius: min(0.1rem, calc(1vw / 13.66));
 line-height: 1.4;
}
.contact_item > input,
.contact_item textarea,
.contact_item p  {
 width: min(61rem, calc(610vw / 13.66));
 border: none;
 font-size: 1.4rem;
 font-weight: 600;
 letter-spacing: 0.12em;
 box-sizing: border-box;
 padding: min(1.7rem, calc(17vw / 13.66)) min(1.5rem, calc(15vw / 13.66));
 border-radius: min(0.3rem, calc(3vw / 13.66));
 text-align: left;
}
.contact_item textarea {
 resize: none;
 height: min(25rem, calc(250vw / 13.66));
}
.contact_item input::placeholder {
 color: #dde3ea;
}
.contact_radio {
 width: min(61rem, calc(610vw / 13.66));
 display: flex;
 align-items: center;
 gap: 0 min(4rem, calc(40vw / 13.66));
}
.contact_radio li {
 display: flex;
 align-items: center;
 position: relative;
}

.contact_radio input {
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
 box-sizing: border-box;
 position: relative;
 margin: 0;
 width: 100%;
 height: 100%;
 position: absolute;
}
.contact_radio label {
 font-size: 1.4rem;
 font-weight: 600;
 color: #082275;
 letter-spacing: 0.12em;
 position: relative;
 display: flex;
 align-items: center;
  gap:0 min(0.5rem, calc(5vw / 13.66));
  cursor: pointer;
}

.contact_radio span {
 display: block;
  content: "";
 width: min(2.5rem, calc(25vw / 13.66));
 height: min(2.5rem, calc(25vw / 13.66));
 border-radius: 50%;
 background-color: #fff;
 position: relative;
 box-sizing: border-box;
}
.contact_radio span::after {
 content: "";
 width: min(1.8rem, calc(18vw / 13.66));
 height: min(1.8rem, calc(18vw / 13.66));
 border-radius: 50%;
 background-color: #fff;
 background: #0059a8;
 background: linear-gradient(45deg, rgba(0, 89, 168, 1) 0%, rgba(8, 34, 117, 1) 100%);
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
 opacity: 0;
 box-sizing: border-box;
}
.contact_radio input:checked + label span::after {
 opacity: 1;
}

.contact_item:nth-of-type(10) .require {
 margin-top: min(3rem, calc(30vw / 13.66));
}
.contact_item:nth-of-type(10) .contact_radio {
 flex-direction: column;
 align-items: flex-start;
  gap:  min(2.5rem, calc(25vw / 13.66)) 0;
  margin-bottom: min(2.5rem, calc(25vw / 13.66));
}

.contact_item p  {
 color: #082275;
 padding: 0;
}
.contact_item p  a{
 color: #082275;
 text-decoration: underline;
}

@media (hover: hover)  and (pointer: fine){
.contact_item a:where(:any-link, :enabled, summary):hover {
text-decoration: none;
 }

}


.contact_check {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: min(11rem, calc(110vw / 13.66));
 position: relative;
}
.contact_check input {
 appearance: none;
 -moz-appearance: none;
 -webkit-appearance: none;
 box-sizing: border-box;
 position: relative;
 margin: 0;
 width: 0;
 height: 0;
 position: absolute;
}
.contact_check label {
 font-size: 1.4rem;
 font-weight: 600;
 color: #082275;
 letter-spacing: 0.12em;
 position: relative;
 display: flex;
 align-items: center;
 cursor: pointer;
 gap: 0 min(0.5rem, calc(5vw / 13.66));
}
.contact_check label::before {
 content: "";
 width: min(2.5rem, calc(25vw / 13.66));
 height: min(2.5rem, calc(25vw / 13.66));
 border-radius: min(.2rem, calc(2vw / 13.66));
 background-color: #fff;
}
.contact_check label::after {
 content: "";
 width: min(1.8rem, calc(18vw / 13.66));
 height: min(1.3rem, calc(13vw / 13.66));
 border-radius: 50%;
background: url(../images/check_icon.svg) no-repeat;
background-size: cover;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: min(0.35rem, calc(3.5vw / 13.66));
 opacity: 0;
}
.contact_check input:checked + label::before {
 background: #0059a8;
 background: linear-gradient(45deg, rgba(0, 89, 168, 1) 0%, rgba(8, 34, 117, 1) 100%);
}
.contact_check input:checked + label::after {
 opacity: 1;
}

.contact_btn {
 width: 100%;
 position: relative;
 background: #0059A8;
 background: linear-gradient(90deg, rgba(0, 89, 168, 1) 0%, rgba(8, 34, 117, 1) 100%);
 margin-top: min(4rem, calc(40vw / 13.66));
 border-radius: min(3rem, calc(30vw / 13.66));
 z-index: 1;
}
.contact_btn::before {
 content: '';
 width: 99%;
 height: 90%;
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: -1;
 border-radius: min(3rem, calc(30vw / 13.66));
 background-color: #fff;
 opacity: 0;
 transition: .4s;
}
input[type="submit"] ,
input[type="button"],
.contact_btn a{
 color: #fff;
 background-color: transparent;
 width: 100%;
 font-size: 1.6rem;
 letter-spacing: 0.12em;
 font-weight: 600;
 border: none;
box-sizing: border-box;
padding:min(1.8rem, calc(18vw / 13.66)) 0;
cursor: pointer;
transition: .4s;
}
.contact_btn:hover::before {
opacity: 1;
}
input[type="submit"]:hover,
input[type="button"]:hover,
.contact_btn a:hover {
color: #004685;
}

footer {
 padding: min(5.5rem, calc(55vw / 13.66)) 0 min(2.5rem, calc(25vw / 13.66));
 background-color: #ffff;
}
.footer_logo {
 width: min(50rem, calc(500vw / 13.66));
 margin: 0 auto min(5rem, calc(50vw / 13.66));

}
.copy {
 font-size: 1.2rem;
 letter-spacing: 0.1em;
 color: #082275;
 font-weight: 600;

}





@media screen and (max-width: 767px) {

.contact_inner {
 width:32.5rem;
 padding:10rem 0;
}
.contact_ttl {
 font-size: 2.4rem;
 line-height: 1.6;
}
.contact_bg_txt {
 font-size: 6rem;
 top: 6rem;

}

form {
 margin-top: 5rem;
}

.contact_item {
 flex-direction: column;
 margin-bottom: 2rem;
 gap: .5rem 0;
}
.flex_st {
 align-items: flex-start;
}
.contact_item > label {
 width: 100%;
 font-size: 1.6rem;
 gap: 0 .5rem;
}
.contact_item > label .require {
 width:3rem;
 font-size: 1rem;
 border-radius: .1rem;
}
.contact_item > input,
.contact_item textarea,
.contact_item p  {
 width:100%;
 font-size: 1.6rem;
 padding: 1.2rem 1rem;
 border-radius: .2rem;
}
.contact_item textarea {
 resize: none;
 height: 18rem;
}
.contact_radio {
 gap: 0 1.5rem;
 flex-direction: column;
 align-items: flex-start;
}

.contact_radio label {
 font-size: 1.6rem;
 gap: 0 .5rem;
}
.contact_radio span {
 width: 1.8rem;
 height: 1.8rem;
}
.contact_radio span::after {
 width: 1.4rem;
 height: 1.4rem;
}

.contact_item:nth-of-type(10) .require {
 margin-top:3rem;
}
.contact_item:nth-of-type(10) .contact_radio {
 width: 100%;
  gap: .5rem 0;
  margin-bottom: 3rem;
}

.contact_item p  {
 color: #082275;
 padding: 0;
 font-size: 1.4rem;
}

.contact_check {
 margin-top:5rem;
}
.contact_check label {
 font-size: 1.2rem;
 gap: 0 .5rem;
}
.contact_check label::before {
 content: "";
 width: 2rem;
 height: 2rem;
 border-radius: .2rem;
}
.contact_check label::after {
 width: 1.2rem;
 height:.9rem;
 left: .4rem;
}

.contact_btn {
 margin-top: 3rem;
 border-radius: 2.5rem;
}
.contact_btn::before {
 border-radius: 2.5rem;
}
input[type="submit"],
input[type="button"] {
padding:1rem 0;
}

footer {
 padding: 3.3rem 0 1rem;
}
.footer_logo {
 width: 25rem;
 margin: 0 auto 1.5rem;

}
.copy {
 font-size: 1rem;

}


}



/*                        confirm                        */
#confirm .contact_item p {
border-bottom: #082275  min(.1rem, calc(1vw / 13.66)) solid;
border-radius: 0;
padding-left: min(2rem, calc(20vw / 13.66));
padding-bottom: min(1rem, calc(10vw / 13.66));
box-sizing: border-box;
}

#confirm .contact_btn_flex {
 display: flex;
 justify-content: space-between;
 margin-top:  min(10rem, calc(100vw / 13.66));
}
#confirm .contact_btn  {
 margin: 0;
 width:  min(42rem, calc(420vw / 13.66));
}


@media screen and (max-width: 767px) {
#confirm .contact_item p {
 border-bottom: #082275  .1rem solid;
 border-radius: 0;
 padding-left: 0;
 padding-bottom: .5rem;
 }

 #confirm .contact_btn_flex {
  flex-direction: column;
  gap: 1.5rem 0;
  margin-top: 5rem;
 }
 #confirm .contact_btn  {
  margin: 0;
  width:  100%;
 }
}



/*                        thanks                        */
.thanks_txt {
 font-size: 1.6rem;
 font-weight: 500;
 letter-spacing: 0.1em;
 color: #333333;
 margin-top: min(8rem, calc(80vw / 13.66));
}
.thanks_txt span {
 display: block;
 font-size: 2rem;
 font-weight: 600;
 color: #082275;
 margin-bottom:  min(1rem, calc(10vw / 13.66));
}
#thanks .contact_btn {
 width:  min(42rem, calc(420vw / 13.66));
 margin: min(9rem, calc(90vw / 13.66)) auto 0;
}
#thanks .contact_btn  a {
 display: block;
 width: 100%;
 color: #fff;
 padding: min(1.4rem, calc(14vw / 13.66)) 0;
}
#thanks .contact_btn  a:hover {
 color: #004685;
}


@media screen and (max-width: 767px) {
 .thanks_txt {
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin-top: 3rem;
 }
 .thanks_txt span {
  font-size: 1.6rem;
  margin-bottom:  1rem;
 }
 #thanks .contact_btn {
  width:  32.5rem;
  margin:5rem auto 0;
 }
 #thanks .contact_btn  a {
  padding: .6rem 0;
 }
}





/*                        error                        */
.error-message {
 width: min(61rem, calc(610vw / 13.66));
 margin-left: auto;
 text-align: left;
 font-size: 1.4rem;
 color: #ff0000;
}
.contact_check {
 display: flex;
 flex-direction: column;
}
.contact_check .error-message{
width: 100%;
text-align: center;
}
@media screen and (max-width: 767px) {
 .error-message {
  width: 100%;
 }

}