@charset "utf-8";


label.input{
width: 100%;
height: 50px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
color: #000
}

input[type="text"],input[type="email"],input[type="tel"]{
width: 100%;
height: 100%;
border:none;
background: transparent;
font-size:15px;
padding-left: 10px;
font-weight: 500
}


select{
width: 100%;
height: 100%;
border:none;
background: #fff;
appearance: none;
padding-left: 10px
}

label.short{
width: 70%!important
}

label.textarea{
width: 100%;
height: 150px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
margin-bottom: 15px;
color: #000;
}

textarea {
font-weight: 500;
width: 100%;
height: 100%;
padding: 10px;
font-size: 15px;
line-height: 1.5;
background: transparent;
resize: vertical; 
border:none;
}

input[type="submit"],input[type="button"]{
width: 80%;
max-width: 300px;
height: 50px;
display: block;

background: #205299;
-webkit-appearance: none;
border:none;
font-weight: 600;
color:#fff;
border-radius: 5px;
}

input[type="submit"]:hover,input[type="button"]:hover{
cursor: pointer;
opacity: 0.7;
}

input[type="checkbox"]{
width: 100%;
height: 100%;
border:none;
box-shadow: none;
border-radius: 0px;
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

a.checkbox{
text-decoration: underline;
font-weight: 500
}

a.checkbox:hover{
text-decoration: none;
}

section.contact-intro{
width: 1000px;
margin: 0px auto 50px auto
}

div.contact-heading{
text-align: center;
margin-bottom: 35px
}

p.contact-heading__english{
color: #073575;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.15em;
margin-bottom: 12px
}

h2.contact-heading__title{
color: #073575;
font-size: 32px;
line-height: 1.5;
margin-bottom: 15px
}

p.contact-heading__description{
color: #444;
font-size: 14px;
line-height: 2
}

div.contact-support{
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
padding: 25px;
background: #f5f7fa
}

div.contact-support__icon{
width: 58px;
height: 58px
}

img.contact-support__image{
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) saturate(100%) invert(17%) sepia(35%) saturate(2927%) hue-rotate(188deg) brightness(91%) contrast(102%)
}

p.contact-support__lead{
color: #333;
font-size: 13px;
margin-bottom: 5px
}

a.contact-support__tel{
color: #073575;
font-size: 27px;
font-weight: 700;
letter-spacing: 0.04em
}

p.contact-support__time{
color: #666;
font-size: 11px;
margin-top: 3px
}

section.contact-form-section{
width: 1000px;
margin: 0px auto 80px auto
}

form.contact-form{
border-top: 1px solid #d9dde2
}

div.contact-form-row{
display: grid;
grid-template-columns: 250px 1fr;
border-bottom: 1px solid #d9dde2;
}

div.contact-form-row__label{
display: flex;
align-items: flex-start;
gap: 12px;
padding: 28px 25px;
background: #f5f7fa
}

label.contact-form-row__label-text{
color: #073575;
font-size: 14px;
font-weight: 700
}

span.contact-form-row__required{
padding: 3px 7px;
background: #dd6601;
color: #fff;
font-size: 10px;
line-height: 1.4
}

span.contact-form-row__optional{
padding: 3px 7px;
background: #8793a3;
color: #fff;
font-size: 10px;
line-height: 1.4
}

div.contact-form-row__field{
padding: 22px 30px
}

input.contact-form-row__input{
width: 100%;
height: 50px;
padding: 0px 14px;
border: 1px solid #cdd2d9;
border-radius: 4px;
background: #fff;
font-size: 15px;
font-weight: 500
}

select.contact-form-row__select{
width: 100%;
height: 50px;
padding: 0px 40px 0px 14px;
border: 1px solid #cdd2d9;
border-radius: 4px;
background: #fff url(../img/icon/under.png) no-repeat right 15px center;
background-size: 13px;
font-size: 15px;
font-weight: 500;
appearance: none
}

textarea.contact-form-row__textarea{
width: 100%;
height: 210px;
min-height: 210px;
padding: 14px;
border: 1px solid #cdd2d9;
border-radius: 4px;
background: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1.8;
resize: vertical
}

p.contact-form-row__help{
color: #777;
font-size: 12px;
margin-top: 7px;

}

p.contact-form-row__error{
color: #c32929;
font-size: 12px;
font-weight: 700;
margin-top: 8px
}

div.contact-form-privacy{
padding: 35px 30px;
background: #f5f7fa;
text-align: center;
margin-top: 35px
}

label.contact-form-privacy__label{
display: inline-flex;
align-items: center;
gap: 12px;
cursor: pointer
}

input.contact-form-privacy__checkbox{
width: 20px;
height: 20px;
accent-color: #073575
}

span.contact-form-privacy__text{
color: #073575;
font-size: 15px;
font-weight: 700
}

a.contact-form-privacy__link{
color: #073575;
text-decoration: underline
}

a.contact-form-privacy__link:hover{
text-decoration: none
}

p.contact-form-privacy__description{
color: #555;
font-size: 12px;
line-height: 1.8;
margin-top: 12px
}

button.contact-form__submit{
position: relative;
display: block;
width: 360px;
height: 64px;
margin: 35px auto 0px auto;
border: none;
border-radius: 4px;
background: #073575;
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.3s ease
}

button.contact-form__submit:hover{
opacity: 0.8
}

span.contact-form__arrow{
position: absolute;
right: 25px;
top: 50%;
font-size: 28px;
font-weight: 300;
transform: translateY(-54%)
}

p.contact-form__alert{
padding: 15px 20px;
margin-bottom: 20px;
border: 1px solid #e0a0a0;
background: #fff2f2;
color: #a52222;
font-size: 13px;
font-weight: 700;
line-height: 1.8
}

div.contact-form__honeypot{
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden
}

div.contact-complete{
padding: 70px 40px;
background: #f5f7fa;
text-align: center
}

p.contact-complete__icon{
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin: 0px auto 20px auto;
border-radius: 50%;
background: #073575;
color: #fff;
font-size: 30px
}

h2.contact-complete__title{
color: #073575;
font-size: 27px;
margin-bottom: 18px
}

p.contact-complete__description{
color: #444;
font-size: 14px;
line-height: 2;
margin-bottom: 28px
}

a.contact-complete__link{
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 55px;
margin: 0px auto;
background: #073575;
color: #fff;
font-size: 14px;
font-weight: 700
}

div.contact-confirm{
padding: 50px;
border-top: 4px solid #073575;
background: #f5f7fa
}

p.contact-confirm__english{
color: #073575;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.15em;
text-align: center;
margin-bottom: 10px
}

h2.contact-confirm__title{
color: #073575;
font-size: 28px;
line-height: 1.5;
text-align: center;
margin-bottom: 12px
}

p.contact-confirm__description{
color: #444;
font-size: 13px;
line-height: 1.9;
text-align: center;
margin-bottom: 35px
}

dl.contact-confirm-list{
border-top: 1px solid #d9dde2;
background: #fff
}

div.contact-confirm-list__row{
display: grid;
grid-template-columns: 230px 1fr;
border-bottom: 1px solid #d9dde2
}

dt.contact-confirm-list__label{
padding: 20px 24px;
background: #eef1f5;
color: #073575;
font-size: 13px;
font-weight: 700
}

dd.contact-confirm-list__value{
padding: 20px 25px;
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 1.8;
overflow-wrap: anywhere
}

dd.contact-confirm-list__value--message{
white-space: normal
}

div.contact-confirm-form__buttons{
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 35px
}

button.contact-confirm-form__back{
width: 280px;
height: 60px;
border: 1px solid #073575;
border-radius: 4px;
background: #fff;
color: #073575;
font-size: 14px;
font-weight: 700;
cursor: pointer
}

button.contact-confirm-form__send{
position: relative;
width: 320px;
height: 60px;
border: none;
border-radius: 4px;
background: #073575;
color: #fff;
font-size: 14px;
font-weight: 700;
cursor: pointer
}

button.contact-confirm-form__back:hover,button.contact-confirm-form__send:hover{
opacity: 0.8
}

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

section.contact-intro{
width: 90%;
margin: 0px auto 35px auto
}

div.contact-heading{
margin-bottom: 25px
}

p.contact-heading__english{
font-size: 12px;
letter-spacing: 0.12em;
margin-bottom: 10px
}

h2.contact-heading__title{
font-size: 25px;
margin-bottom: 12px
}

p.contact-heading__description{
font-size: 13px;
line-height: 1.9;
text-align: left
}

div.contact-support{
justify-content: flex-start;
gap: 15px;
padding: 20px
}

div.contact-support__icon{
width: 45px;
height: 45px
}

p.contact-support__lead{
font-size: 11px
}

a.contact-support__tel{
font-size: 22px
}

section.contact-form-section{
width: 90%;
margin: 0px auto 60px auto
}

div.contact-form-row{
display: block
}

div.contact-form-row__label{
align-items: center;
padding: 17px 18px
}

label.contact-form-row__label-text{
font-size: 13px
}

div.contact-form-row__field{
padding: 17px 0px 22px 0px
}

input.contact-form-row__input{
font-size: 16px
}

select.contact-form-row__select{
font-size: 16px
}

textarea.contact-form-row__textarea{
height: 190px;
min-height: 190px;
font-size: 16px
}

div.contact-form-privacy{
padding: 25px 18px;
margin-top: 25px
}

label.contact-form-privacy__label{
align-items: flex-start;
text-align: left
}

span.contact-form-privacy__text{
font-size: 13px;
line-height: 1.6
}

p.contact-form-privacy__description{
font-size: 11px;
text-align: left
}

button.contact-form__submit{
width: 100%;
height: 58px;
margin-top: 25px;
font-size: 14px
}

div.contact-confirm{
padding: 35px 20px
}

h2.contact-confirm__title{
font-size: 23px
}

p.contact-confirm__description{
font-size: 12px;
text-align: left;
margin-bottom: 25px
}

div.contact-confirm-list__row{
display: block
}

dt.contact-confirm-list__label{
padding: 13px 15px
}

dd.contact-confirm-list__value{
padding: 15px;
font-size: 13px
}

div.contact-confirm-form__buttons{
display: grid;
grid-template-columns: 1fr;
justify-content: stretch;
gap: 12px;
margin-top: 25px
}

button.contact-confirm-form__back{
width: 100%;
height: 55px
}

button.contact-confirm-form__send{
width: 100%;
height: 58px
}

div.contact-complete{
padding: 45px 22px
}

h2.contact-complete__title{
font-size: 22px;
line-height: 1.5
}

p.contact-complete__description{
font-size: 13px
}

a.contact-complete__link{
width: 100%
}

}