@charset "UTF-8";
/* general */
body { font-family: 'Pretendard', sans-serif; letter-spacing: -0.02em; --ellipsis:1; }
.inner { width: 100%; margin: auto; max-width: 1200px; }

/* color */
body {
--theme   : #01419a;
--lighter : #C8E5F9;
--light   : #5A9EE0;
--dark    : #00256E;
--darker  : #001249;
--info    : #0090FF; /* blue */
--success : #7CBF1E; /* green */
--danger  : #FF3F4C; /* red */
--warning : #FFD402; /* yellow */

--emph    : #ffea00;
}
.color { color: var(--theme); }
.emph { color: var(--emph); }

/* header */
.header { width: 100%; background-color: #fff; padding: 1em 0; text-align: center; }
.header .logo img { max-width: 141px; width: 25%; }

/* footer */
.footer { padding: 3em 0 4em; background-color: #222; color: #aaa; }
.footer i { margin: 0 0.5em; font-size: 0.875em; }
.footer .inner { display: flex; justify-content: space-between; }
.footer .logo { filter: brightness(0) invert(1); opacity: 0.7; }
.footer .logo img { max-width: 141px; width: 25%; }
.footer address { font-size: 1em; line-height: 1.5; margin-top: 1.5em; }
.footer address span { white-space: nowrap; }
.footer h6 { font-size: 0.875em; margin-top: 2.5em; }
.footer .sns { display: flex; }
.footer .sns a { width: 2.5em; height: 2.5em; border-radius: 5em; text-align: center; display: flex; align-items: center; justify-content: center; background-color: #505050; margin-left: 0.5em; }
.footer .sns img { max-width: 22px; width: 60%; }

/* container */
.container { padding: 6em 0; }
.container-tit { text-align: center; margin-bottom: 3em; }
.container-tit h2 { font-size: 2.25em; font-weight: 700; }

/* page */
.thin { font-weight: 300; }
.mark { background: linear-gradient(to bottom, transparent 40%, var(--mark) 40%); padding-right: 0.2em; padding-left: 0.2em; } 
.ellipsis { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: var(--ellipsis); -webkit-box-orient: vertical; word-break: keep-all; }
.section { padding: 8em 0; }

/* main */
.main h2 { font-size: 3.75em; font-weight: 700; }
.main h5 { font-size: 1.5em; }
.main .flex { display: flex; align-items: center; justify-content: space-between; }
.main .phone { width: 45%; position: relative; }
.main .phone-cover { max-width: 558px; width: 100%; position: relative; }
.main .phone-box { width: 82%; position: absolute; left: 4%; top: 2%; padding-top: 162%; overflow: hidden; border-radius: 3%; }
.main .phone-box img { width: 100%; position: absolute; top: 0; left: 0; }
/*.phone-con { animation: move-img 6s linear 0s infinite alternate forwards;  }
@keyframes move-img {
    0% { top: 0; }
    50% { top: -38%; }
    100% { top: 0; }
}*/

.visual img { max-width: 100%; vertical-align: top; }
.visual .mb { display: none; }

.intro { background: linear-gradient(to bottom, #009fe5, #01409a); color: #fff; }
.intro ul { margin-top: 5em; }
.intro li { font-size: 1.5em; margin-bottom: 1.25em; display: flex; align-items: center; }
.intro li { font-size: 1.5em; margin-bottom: 1.25em; display: flex; align-items: center; }
.intro li:last-child { margin-bottom: 0; }
.intro li i { font-size: 1.3em; margin-right: 0.5em; }

.merit { background-color: #f7faff; text-align: center; }
.merit ul { margin-top: 5em; display: flex; justify-content: space-between; }
.merit li { width: 17%; }
.merit li .icon { width: 90%; background-color: #fff; padding-top: 90%; border-radius: 10em; position: relative; border: 1px solid var(--light); margin: 0 auto; }
.merit li .icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 75px; width: 50%; }
.merit li h5 { font-weight: 700; margin: 0.5em 0; }
.merit li p { font-size: 1.125em; }

.service { background: linear-gradient(to bottom, #014099, #7e4798); color: #fff; }
.service .flex { align-items: stretch; justify-content: start; }
.service .flex > div { padding: 2em 0; }
.service .tab { text-align: center; font-size: 1.25em; }
.service .tab li { width: 5em; height: 5em; border-radius: 10em; display: flex; align-items: center; justify-content: center; margin-bottom: 2em; font-weight: 700; cursor: pointer; }
.service .tab li:hover,
.service .tab li.active { background-color: #fff; color: var(--theme); }
.service .line { margin: 0 5%; width: 2px; background-color: #fff; border: 0; display: block; opacity: 0.1; }
.service .con { flex-grow: 1; }
.service .con li { display: none; }
.service .con li.active { display: block; }
.service .con .txt h2 { margin-bottom: 0.5em; }
.service .con .txt h5 { font-weight: 700; display: inline; border-bottom: 1px solid #fff;}
.service .con .txt p { font-size: 1.25em; margin-top: 0.5em; opacity: 0.6; line-height: 1.5; min-height: 3em; }
.service .con .img { margin-top: 3em; text-align: center; }
.service .con .img img { max-width: 1000px; width: 100%; }

.youtube { padding: 4em 0; }
.youtube .list { display: flex; justify-content: space-around; flex-wrap: wrap; }
.youtube .list li { width: 48%; margin: 1%; }
.youtube .list .video { position: relative; padding-top: 56%; }
.youtube .list iframe { position: absolute; top: 0;left: 0; width: 100%; height: 100%; }

.download { background: url(../img/bg_download.png) no-repeat center/cover; }
.download .emph { color: #9212ff; }
.download h5 { margin: 0.5em 0 2em; }
.download .link img { max-width: 235px; width: 45%; }


/* responsive */
@media screen and (max-width: 1280px){
    .inner { padding-left: 2%; padding-right: 2%; }

    .main .phone { width: 40%; }
    .main h2 { font-size: 3.25em; }
    .merit ul { flex-wrap: wrap; justify-content: center; }
    .merit li { width: 25%; margin: 2%; }

    .service .flex { flex-direction: column; }
    .service .flex > div { padding: 0; margin-bottom: 0; }
    .service .tab ul { display: flex; }
    .service .tab li { margin-bottom: 0; margin-right: 2em; }
    .service .line { width: 100%; height: 2px; margin: 5% 0; }

}
@media screen and (max-width: 768px){
    .main { font-size: 0.875em; word-break: keep-all; }
    .visual .pc { display: none; }
    .visual .mb { display: block; }
    .flex { flex-direction: column; text-align: center; }
    .service .con .txt { padding: 0 4%; }
    .footer { font-size: 0.875em; }
    .footer .inner { flex-direction: column-reverse; }
    .footer .sns { margin-bottom: 2em; }
    .footer .sns a { margin-left: 0; margin-right: 1em; }
}
@media screen and (max-width: 586px){
    .main { font-size: 2.5vw; }  
    .main .phone { width: 60%; } 
    .merit li { width: 40%; margin: 3%; }
    .merit li h5 { font-size: 1.75em; }
    .merit li p { font-size: 1.375em; }

    .service .tab { font-size: 1.375em; }
    .service .tab ul { justify-content: space-between; }
    .service .tab li { margin-right: 0; }

    .youtube .list li { width: 98%; margin: 1%; }
    .footer { font-size: 0.75em; }
}