@charset "utf-8";

/* ----------------------------------------------
 ! general-treatment
 ---------------------------------------------- */

#btn-sub-gt { display:flex; flex-flow:row wrap; justify-content:space-between; margin:0 4.1vw; }
#btn-sub-gt li { display:flex; justify-content:center; align-items:center; width:48%; height:12.82vw; background:#fff; border-radius:2.05vw; border:1px #E5E5E5 solid; margin:0 0 2.56vw; padding:0 0 2.1vw; font-size:3.59vw; color:#384658; list-style:none; position:relative; }
#btn-sub-gt li:after { content:""; position:absolute; bottom:1.28vw; left:calc(50% - 0.89vw); width:0; height:0; border-style:solid; border-width:1.54vw 0.89vw 0 0.89vw; border-color:#2971A9 transparent transparent transparent; }
.btn-sub-gt-on { background:#2971A9 !important; color:#fff!important; }
.btn-sub-gt-on:after { border-color:#fff transparent transparent transparent !important; }
#sub-gt-tab-wrap {}
.sub-gt-tab { display:none!important; }
.sub-gt-tab-on { display:block!important; }
.sub-gt-tit { line-height:1.45; text-align:center; padding:19.23vw 0; font-size:5.64vw; font-weight:500; letter-spacing:0.21vw; position:relative; }
.sub-gt-tit:after { content:""; position:absolute; bottom:12.82vw; left:50%; width:15.38vw; height:1px; background:#2971A9; margin:0 0 0 -7.69vw; }

@media screen and (max-width:899px){
#btn-sub-gt li:nth-of-type(5) { width:100%; }
}
@media screen and (min-width:900px){
#btn-sub-gt { border-bottom:0.21vw #2971A9 solid; margin:0; }
#btn-sub-gt li { width:10.86vw; height:5.8vw; border-radius:0.58vw 0.58vw 0 0; margin:0; padding:0 0 1.45vw; font-size:1.01vw; }
#btn-sub-gt li:after { bottom:0.87vw; left:calc(50% - 0.29vw); border-width:0.51vw 0.29vw 0 0.29vw; }
#btn-sub-gt li:hover { background:#2971A9; color:#fff; transition:1s ease; cursor:pointer; }
#btn-sub-gt li:hover::after { border-color:#fff transparent transparent transparent !important; }
#sub-gt-tab-wrap {}
.sub-gt-tab {}
.sub-gt-tit { padding:6.52vw 0 5.07vw; font-size:1.81vw; letter-spacing:0.14vw; }
.sub-gt-tit:after { bottom:2.9vw; width:4.35vw; margin:0 0 0 -2.17vw; }
}
@media screen and (min-width:1380px){
#btn-sub-gt { border-bottom:3px #2971A9 solid; }
#btn-sub-gt li { width:150px; height:80px; border-radius:8px 8px 0 0; padding:0 0 20px; font-size:14px; }
#btn-sub-gt li:after { bottom:12px; left:calc(50% - 4px); border-width:7px 4px 0 4px; }
#sub-gt-tab-wrap {}
.sub-gt-tab {}
.sub-gt-tit { padding:90px 0 70px; font-size:25px; letter-spacing:2px; }
.sub-gt-tit:after { bottom:40px; width:60px; margin:0 0 0 -30px; }
}




/* ----------------------------------------------
 ! main-nav-box
 ---------------------------------------------- */

.main-nav-box { height:68.46vw; overflow:hidden; background:#EEF8FD; margin:0 0 10.25vw; padding:0 0 10.25vw; position:relative; z-index:2; }
.main-nav-tit { text-align:center; padding:6.15vw 0 3.85vw 0; font-size:4.1vw; color:#2971A9; font-weight:600; z-index:2; position:relative; }
.main-nav-box ul { border-top:1px #384658 solid; margin:0 10.25vw; }
.main-nav-box li { border-bottom:0.5px #384658 dotted; list-style:none; }
.main-nav-box li a { display:flex; flex-flow:column nowrap; justify-content:center; align-items:start; min-height:14.1vw; line-height:1.4; padding:2.56vw 4.61vw 2.56vw 4.61vw; font-size:3.59vw; color:#384658; font-weight:500; text-decoration:none; position:relative; }
.main-nav-box li a:before { content:""; position:absolute; top:calc(50% + 0.77vw); left:0; width:0; height:0; border-style:solid; border-width:0.77vw 0 0.77vw 1.54vw; border-color:transparent transparent transparent #2971A9; }
.btn-main-nav { position:absolute; bottom:0; left:0; display:flex; justify-content:center; align-items:flex-end; width:100%; height:40vw; background:linear-gradient(to bottom, rgba(238,248,253,0) 0%,rgba(238,248,253,1) 50%,rgba(238,248,253,1) 100%); padding:0 0 10vw; }
.btn-main-nav p { font-size:3.07vw; color:#2971A9; font-weight:600; }
.btn-main-nav-open {}
.btn-main-nav-close { display:none; }
.main-nav-box:before { content:""; position:absolute; top:6.15vw; left:5.13vw; width:2.05vw; height:2.05vw; background:#FF8B7E; border-radius:0.51vw; }
.main-nav-tit:before { content:""; position:absolute; top:9.74vw; left:5.13vw; width:2.05vw; height:2.05vw; background:#FF8B7E; border-radius:0.51vw; }
.main-nav-tit:after { content:""; position:absolute; top:13.33vw; left:5.13vw; width:2.05vw; height:2.05vw; background:#FF8B7E; border-radius:0.51vw; }
.btn-main-nav:before { content:""; position:absolute; bottom:6.15vw; right:5.13vw; width:2.05vw; height:2.05vw; background:#58B3F8; border-radius:0.51vw; }
.btn-main-nav:after { content:""; position:absolute; bottom:9.74vw; right:5.13vw; width:2.05vw; height:2.05vw; background:#58B3F8; border-radius:0.51vw; }
.main-nav-box:after { content:""; position:absolute; bottom:13.33vw; right:5.13vw; width:2.05vw; height:2.05vw; background:#58B3F8; border-radius:0.51vw; }
.btn-main-nav-on { height:auto !important; overflow:visible !important; padding-bottom:20vw !important; }
.btn-main-nav-on .btn-main-nav { height:20vw; }

@media screen and (min-width:900px){
.main-nav-box { height:auto; overflow:visible; margin:0 0 2.9vw; padding:0 0 3.62vw; }
.don { position:absolute !important; transition:1s ease; }
.main-nav-tit { padding:2.17vw 0; font-size:1.59vw; }
.main-nav-box ul { display:flex; flex-flow:row wrap; justify-content:space-between; margin:0 5.8vw; }
.main-nav-box li { width:22.46vw; }
.main-nav-box li a { min-height:4.05vw; padding:0 1.45vw; font-size:1.09vw; }
.main-nav-box li a:before { top:calc(50% + 0.21vw); border-width:0.21vw 0 0.21vw 0.43vw; }
.main-nav-box li a:hover { opacity:0.7; text-decoration:underline; transition:1s ease; }
.btn-main-nav { height:1.45vw; padding:0 0 0.72vw; }
.btn-main-nav-open { display:none; }
.btn-main-nav-close {}
.main-nav-box:before { top:1.74vw; left:1.74vw; width:0.87vw; height:0.87vw; border-radius:0.14vw; }
.main-nav-tit:before { top:3.26vw; left:1.74vw; width:0.87vw; height:0.87vw; border-radius:0.14vw; }
.main-nav-tit:after { top:4.78vw; left:1.74vw; width:0.87vw; height:0.87vw; border-radius:0.14vw; }
.btn-main-nav:before { bottom:1.74vw; right:1.74vw; width:0.87vw; height:0.87vw; border-radius:0.14vw; }
.btn-main-nav:after { bottom:3.26vw; right:1.74vw; width:0.87vw; height:0.87vw; border-radius:0.14vw; }
.main-nav-box:after { bottom:4.78vw; right:1.74vw; width:0.87vw; height:0.87vw; border-radius:0.14vw; }
}
@media screen and (min-width:1380px){
.main-nav-box { margin:0 0 40px; padding:0 0 50px; }
.main-nav-tit { padding:30px 0; font-size:22px; }
.main-nav-box ul { margin:0 80px; }
.main-nav-box li { width:310px; }
.main-nav-box li a { min-height:56px; padding:0 20px; font-size:15px; }
.main-nav-box li a:before { top:calc(50% + 3px); border-width:3px 0 3px 6px; }
.btn-main-nav { height:20px; padding:0 0 10px; }
.main-nav-box:before { top:24px; left:24px; width:12px; height:12px; border-radius:2px; }
.main-nav-tit:before { top:45px; left:24px; width:12px; height:12px; border-radius:2px; }
.main-nav-tit:after { top:66px; left:24px; width:12px; height:12px; border-radius:2px; }
.btn-main-nav:before { bottom:24px; right:24px; width:12px; height:12px; border-radius:2px; }
.btn-main-nav:after { bottom:45px; right:24px; width:12px; height:12px; border-radius:2px; }
.main-nav-box:after { bottom:66px; right:24px; width:12px; height:12px; border-radius:2px; }
}