@charset "utf-8";

/* --------------------------- common */

#wrapper { min-width: 1250px; position: relative;}

.s_inner { width: 800px; margin: 0 auto;}
.m_inner { width: 900px; margin: 0 auto;}


.btns { position: relative; display: block; width: 220px; line-height: 40px; text-align: center; border-radius: 50px; font-size: 13px; font-weight: 500;}
.btns:after { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); display: block; content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #fff;}
.btns:hover { transform: scale(1.02); transition: all 0.2s;}
.btns:hover::after { content: none !important; transition: all 0.5s;}
.btns.green { background: background-image: -moz-linear-gradient( 0deg, rgb(61,209,166) 0%, rgb(27,196,149) 100%);  background-image: -webkit-linear-gradient( 0deg, rgb(61,209,166) 0%, rgb(27,196,149) 100%);  background-image: -ms-linear-gradient( 0deg, rgb(61,209,166) 0%, rgb(27,196,149) 100%); color: #fff;}
.btns.yellow { background-image: -moz-linear-gradient( 0deg, rgb(254,215,1) 0%, rgb(254,192,1) 100%);  background-image: -webkit-linear-gradient( 0deg, rgb(254,215,1) 0%, rgb(254,192,1) 100%);  background-image: -ms-linear-gradient( 0deg, rgb(254,215,1) 0%, rgb(254,192,1) 100%); color: #000;}
.btns.yellow:after { background-color: #000;}
.btns.black { background: #000; color: #fff; border: 1px solid #000;}

.btns.blue { background-image: -webkit-linear-gradient( 0deg, rgb(145, 179, 226) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(33, 45, 56) 99%);; color: #fff;}

.bGrad { background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%);}
.bGradTxt { background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent;}

.metroSB { font-family: 'Metropolis-SemiBold', sans-serif; letter-spacing: 0.04em;}
/*  */
/* --------------------------- header */

header { position: fixed; top: 0; left: 0; width: 100%; padding: 28px 20px 20px 35px; background: #fff; z-index: 90;}
header .flex { display: flex; justify-content: space-between; align-items: center;}
header .flex h1 { width: 289px; }
header .flex h1 img { width: 100%; height: auto;}

header .flex .right { width: 800px;}
header .flex .right nav { display: flex; justify-content: flex-end; margin-bottom: 21px;}
header .flex .right nav a { display: inline-block; font-size: 12px; font-weight: 400; margin-left: 40px;}
header .flex .right nav a:hover { color: #004bb6; transition: all 0.2s;}
header .flex .right .btnList { display: flex; justify-content: flex-end;}
header .flex .right .btnList .btns { margin-left: 10px; transition: all 0.2s;}
header .flex .right .btnList .btns:hover { transform: scale(1.02); transition: all 0.2s;}

main { margin-top: 80px;}
#modalArea { display: none;}
/* --------------------------- footer */

footer { padding: 60px 60px 40px 70px;}
footer .flex { display: flex; justify-content: space-between; align-items: flex-start;}

footer .flex .left { }
footer .flex .left .logo { display: inline-block; margin-bottom: 50px;}
footer .flex .left .logo img { }
footer .flex .left nav { display: flex; justify-content: space-between; width: 750px; margin-bottom: 80px;}
footer .flex .left nav a { font-size: 15px; font-weight: 500;}
footer .flex .left nav a:hover { color: #004bb6; transition: all 0.2s;}
footer .flex .left .privacy { margin-bottom: 20px;}
footer .flex .left .privacy a { font-size: 12px; margin-right: 2em;}
footer .flex .left .privacy a:hover { color: #004bb6; transition: all 0.2s;}
footer .flex .left .copy { font-size: 12px;}

footer .flex .right { }
footer .flex .right .btns { width: 300px; line-height: 60px; font-size: 16px; margin-bottom: 20px; transition: all 0.2s;}
footer .flex .right .btns:after { right: 25px; width: 10px; height: 10px;}
footer .flex .right .btns:hover { transform: scale(1.02); transition: all 0.2s;}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {

/* --------------------------- common */

#wrapper { min-width: auto;}

.btns { width: 100%; line-height: 50px; font-weight: 400;}
.btns:after { right: 20px; width: 10px; height: 10px; background-color: #fff;}

.s_inner { width: 80%;}
.m_inner { width: 85%;}


/* --------------------------- header */

header { padding: 12px 12px 9px; background: #fff;}
header .flex { display: flex; justify-content: space-between; align-items: center;}
header .flex h1 { width: 144px; }

header .flex .right { width: 80px;}
header .flex .right .flex { display: flex; justify-content: space-between; align-items: center;}

header .flex .right .contact { display: block; width: 30px; height: 30px; background: url(../images/common/mail.svg) no-repeat center center / 15px #000; border-radius: 50%;}

header .menu { display: inline-block; position: relative; width: 30px; height: 16px; cursor: pointer; z-index: 99;}
header .menu span { position: absolute; display: block; width: 100%; height: 2px; background-color: #000; transition: 0.5s;}
header .menu span:nth-of-type(1) { top: 0;}
header .menu span:nth-of-type(2) { top: 7px;}
header .menu span:nth-of-type(3) { bottom: 0;}

header .menu.close { position: absolute; top: 30px; right: 5%;}
header .menu.close span {}
header .menu.close span:nth-of-type(1) { transform: translate(0%,5px) rotate(45deg); background-color: #fff;}
header .menu.close span:nth-of-type(2) { opacity: 0;}
header .menu.close span:nth-of-type(3) { transform: translate(0%,-10px) rotate(-45deg); background-color: #fff;}


/* --------------------------- modalArea */

#modalArea { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-image: -moz-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -webkit-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); background-image: -ms-linear-gradient( 0deg, rgb(0,75,182) 0%, rgb(0,109,215) 99%); padding: 75px 0 0; z-index: 80;}
#modalArea .modalMenu { width: 90%; margin: 0 auto;}
#modalArea .modalMenu img { display: block; margin-bottom: 30px; background: white; border-radius: 5px;}
#modalArea .modalMenu nav { margin-bottom: 30px;}
#modalArea .modalMenu nav a { display: block; font-size: 15px; color: #fff; padding: 15px 0; border-bottom: 1px solid #fff;}
#modalArea .modalMenu nav a:last-child { border-bottom: 0px;}
#modalArea .modalMenu .btnList { }
#modalArea .modalMenu .btnList .btns { margin-bottom: 15px;}
#modalArea .modalMenu .btnList .white { color: #000; background: #fff;}
#modalArea .modalMenu .btnList .white:after { background-color: #000;}



/* --------------------------- footer */

footer { padding: 50px 0 40px;}
footer .flex { display: block; width: 85%; margin: 0 auto;}

footer .flex .left .logo { margin-bottom: 20px;}

footer .flex .left nav { display: block; width: 100%; margin-bottom: 46px;}
footer .flex .left nav a { display: block; font-size: 15px; padding: 15px 0; border-bottom: 1px solid #d7d7d7;}
footer .flex .left nav a:last-child { border-bottom: 0px;}

footer .flex .right { margin-bottom: 55px;}
footer .flex .right .btns { width: 100%; margin-bottom: 20px;}
footer .flex .right .btns:after { right: 17px; width: 10px; height: 10px;}

footer .flex .privacy { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 50px;}
footer .flex .privacy a { font-size: 13px;}
footer .flex .copy { display: block; font-size: 10px; text-align: center;}

}
