/*====================================================
------------------------------------------------------
    contact.css
------------------------------------------------------
====================================================*/
/* --------------------------------------------------
    titleAre
-------------------------------------------------- */
.contact .titleArea { background: var(--color_white);}
.contact .titleArea > .inner { display: flex; align-items: center; padding: 80px 0 60px; margin: 0 auto;}
.contact .titleArea h1 { font-size: 8rem; font-weight: 600; margin-right: 45px; font-family: "Inter", sans-serif;}
.contact .titleArea span { font-size: 4rem; font-weight: 600; margin-bottom: -0.5em;}

@media screen and (max-width: 1200px){
.contact .titleArea > .inner { padding: 80px 30px 60px;}
}

@media screen and (max-width: 767px){
.contact .titleArea > .inner { padding: 50px 15px 0;}
.contact .titleArea h1 { font-size: 4rem;}
.contact .titleArea span { font-size: 2rem;}
}

.contact main .inner { padding: 0 0 30px;}

@media screen and (max-width: 1200px){
.contact main .inner { padding: 50px 30px 0;}
}

@media screen and (max-width: 767px){
.contact main .inner { padding: 50px 15px 0;}
}

.contact .headLine { display: flex; justify-content: space-between;}
.contact .headLine a { display: flex; align-items: center; justify-content: center; color: var(--color_white); width: 400px; height: 60px; background: var(--color_main_red); border-radius: 8px; position: relative;}
.contact .headLine a:after { content: ""; width: 12px; height: 12px; background: url(../images/share/icon_arrow_r_white.svg); position: absolute; top: calc(50% - 6px); right: 20px;}
.contact .headLine a:hover {text-decoration: none; opacity: .8; transition: .3s;}
.contact .headLine p { width: calc(100% - 420px)}

@media screen and (max-width: 850px){
.contact .headLine { flex-direction: column;}
.contact .headLine a { width: 100%; height: 60px;}
.contact .headLine p { width: 100%; margin-bottom: 30px;}
}
    


.contact form { padding-top: 50px;}

.contact .btArea { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.contact .btArea button:hover { opacity: .8; transition: .3s;}
.contact .btArea button[type="submit"],
.contact .btArea button[type="reset"] 
{ width: 375px; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 500; color: var(--color_white); border: none; border-radius: 10px; margin: 15px; position: relative; cursor: pointer;}
.contact .btArea button[type="submit"] { background: var(--color_main_red);}
.contact .btArea button[type="reset"] { background: var(--color_darkbluegray);}
.contact .btArea button[type="submit"]:after,
.contact .btArea button[type="reset"]:after { content: ""; width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); right: 30px}
.contact .btArea button[type="submit"]:after { background: url(../images/share/icon_arrow_r_white.svg);}
.contact .btArea button[type="reset"]:after { background: url(../images/share/icon_reset_white.svg);}
.contact form dl { margin-bottom: 50px;}
.contact form dt { margin-bottom: 10px;}
.contact form dt p { margin-left: 10px;}
.contact form dt span { color: var(--color_white); background: var(--color_red); border-radius: 5px; padding: 0 5px; margin-right: 10px;}
.contact form dl:last-of-type dt span { background: var(--color_gray);}
.contact form dd { width: 100%;}

.contact form input,
.contact form textarea { width: 100%;
-moz-appearance: none;
-webkit-appearance: none; appearance: none; background: #fff; background-image: none; 
border: 1px solid var(--color_gray); color: inherit; font-family: inherit; padding: 0.8em; border-radius: 5px;}
.contact form input:focus,
.contact form input textarea:focus { border: 1px solid var(--color_darkgray); box-shadow: none; outline: none;}
.contact form input.w50 { width: 50%;}
.contact label { display: flex; align-items: center; margin-right: 15px;}

.contact .radioBt label { display: inline-flex; align-items: center; column-gap: 4px; line-height: 1; cursor: pointer;}
.contact .radioBt label:not(:last-of-type) { margin-right: 20px;}
.contact .radioBt input { width: 20px; height: 20px; border: 1px solid var(--color_main_red); border-radius: 9999px; position: relative; appearance: none; cursor: pointer;}
.contact .radioBt input:checked::after { content: ""; width: 12px; height: 12px; background-color: var(--color_main_red); border-radius: 9999px; position: absolute; inset: 0; margin: auto;}
.contact textarea { width: 100%; height: 150px;}

.contact .privacypolicy { width: 80%; margin: 50px auto 90px; text-align: center;}
.contact .privacypolicy h2 { font-size: 2rem; font-weight: 400; margin: 20px;}
.contact .privacypolicy p { font-size: 1.5rem;}

@media screen and (max-width: 767px){
.contact form input.w50 { width: 100%!important;}
.contact form dt p { font-size: 1.2rem;}
.contact .privacypolicy { width: 100%; margin: 30px auto;}
.contact .privacypolicy p { text-align: left;}
}