@charset "utf-8";
body,ul,ol,li{padding:0; margin:0;}
*,
*:before,
*:after{box-sizing:border-box;}

body{
    min-height:90em; font-family:"Spoqa Han Sans Neo"; font-size:10px;
    background-image:url(../images/bg-spring.jpg); background-repeat:no-repeat; background-position:center; background-size:cover;
    background-attachment:fixed;
}

#wrap{position:relative; height:100%;}
#wrap > .layout{
    position:relative; margin:0 auto;left:0; top:0; max-width:130em;min-width:800px;}

/* logo */
h1{position:absolute; left:5em; top:4em; height:4.7em; font-size:1em;}
h1>a{display:block; height:100%;}
h1>a:before,
h1>a:after{content:""; float:left; display:block; background-repeat:no-repeat; background-position:left center; background-size:contain;}
h1>a:before{width:15.5em; height:4.2em; margin-right:4.1em; background-image:url(../images/logo.svg);}
h1>a:after{width:11em; height:4.2em; background-image:url(../images/logo_text.svg);}
h1>a>span{
    overflow:hidden; display:block; position:absolute; left:17.7em; top:50%; width:1px; height:60%; text-indent:-1000px; background-color:rgba(255,255,255,0.5);
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}

/* header */
#header{position:relative; height:19.8em;}
#header > strong{
    overflow:hidden; display:block; position:absolute; left:calc(50% - 13em); bottom:0; width:26em; height:19.8em; text-indent:-1000px; background-repeat:no-repeat; background-position:left center; background-size:contain;
    background-image:url(../images/logo_2.svg);
}
#header > ul{position:absolute; bottom:2em;}
#header > ul:after{content:""; display:block; clear:both;}
#header > ul > li{float:left;}
#header > ul:nth-of-type(1){left:0;}
#header > ul:nth-of-type(1)>li:not(:last-child){margin-right:1.4em;}
#header > ul:nth-of-type(1)>li>a{
    display:block; position:relative; height:6em; line-height:1; padding:2em 6.8em 0 2.8em; /*border:1px solid rgba(255,255,255,0.3);*/ color:#fff; background-color:rgba(28,40,82,.6);
    -webkit-border-radius:2.7em;
    border-radius:2.7em;
    -webkit-transition:background-color 0.3s linear;
    transition:background-color 0.3s linear;
}
#header > ul:nth-of-type(1)>li>a:after{
    content:""; display:block; position:absolute; right:2em; top:calc(50% - 1.2em); width:3.5em; height:2.4em; background-repeat:no-repeat; background-position:center center; background-size:contain;
    background-image:url(../images/arrow.svg);
}
#header > ul:nth-of-type(1)>li>a>span{font-family:"s-core-dream"; font-weight:500; font-size:2.2em;}
#header > ul:nth-of-type(1)>li>a:hover{background-color:rgba(28,40,82,.8);}

.sns{right:0;padding-bottom:15px;}
.sns>li:not(:last-child){margin-right:2em;}
.sns>li>a{display:block; position:relative; padding:0.8em 0 0 4.5em;}
.sns>li>a:before{
    content:""; display:block; position:absolute; left:0; top:0; z-index:0; width:3.5em; height:3.5em; background-color:rgba(28,40,82,.7); background-repeat:no-repeat; background-position:left center; background-size:contain;
    -webkit-border-radius:50%;
    border-radius:50%;
    -webkit-transition:background-color 0.2s linear;
    transition:background-color 0.2s linear;
}
.sns>li:nth-child(1)>a:before{background-image:url(../images/sns_f.svg);}
.sns>li:nth-child(2)>a:before{background-image:url(../images/sns_u.svg);}
.sns>li:nth-child(3)>a:before{background-image:url(../images/sns_i.svg);}
.sns>li:nth-child(1)>a:hover:before{background-image:url(../images/sns_f_ov.svg);}
.sns>li:nth-child(2)>a:hover:before{background-image:url(../images/sns_u_ov.svg);}
.sns>li:nth-child(3)>a:hover:before{background-image:url(../images/sns_i_ov.svg);}
.sns>li>a>span{
    position:relative; z-index:20; font-weight:400; font-size:1.7em; color:#fff;
}
.sns>li>a:hover:before{background-color:rgba(255,255,255,1);}

/* middle */
#middle:after{content:""; display:block; clear:both;}
#middle > .item{float:none;}
#middle > .item:nth-child(1){width:calc(100%);}
#middle > .item:nth-child(1)>.bx{
    margin-bottom:10px;width:100%; padding:2.8em; background-color:rgba(28,40,82,.7);
    -webkit-border-radius:1.6em;
    border-radius:1.6em;
}

#middle div.youyou{display:block; width:auto;margin:1em 0;padding:0;height:24.3em;background-image:url(../images/you2.jpg);background-repeat:no-repeat; background-position:center center; background-size:cover;border-radius:8px;}
span.thin{font-weight:200;font-size:90%}
#middle div iframe{margin:1em 0;border-radius:8px;padding:0;}
#middle > .item:nth-child(2)>.bx:nth-child(2){margin-top:0.5em;}
#middle > .item:nth-child(2)>.bx:nth-child(2)>a{
    /*display:table;*/display:block; table-layout:fixed; position:relative; width:100%; height:26.5em; padding:2em 3em; background-color:#EFAC00;background-repeat:no-repeat; background-position:right bottom; background-size:contain;
    -webkit-border-radius:1.6em;
    border-radius:1.6em;
/*    background-image:url(../images/kaka_bg.png);
    -webkit-transition:box-shadow 0.3s linear;
    transition:box-shadow 0.3s linear;*/
}
#middle > .item:nth-child(2)>.bx:nth-child(2)>a:after{
/*    content:""; display:block; position:absolute; right:0; bottom:0; z-index:20; width:16.6em; height:12.2em; background-repeat:no-repeat; background-position:right bottom; background-size:contain;
    background-image:url(../images/kaka_bg2.png);
    -webkit-animation-name:kaka;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;
    -webkit-transform-origin:100% 100%;

    animation-name:kaka;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    transform-origin:100% 100%;*/
}
#middle > .item:nth-child(2)>.bx:nth-child(2)>a>span{/*display:table-cell; */display:block;width:100%; font-family:"s-core-dream"; font-weight:400; font-size:1.6em;text-align:center; vertical-align:middle; color:#111;letter-spacing:-.025em;}
#middle > .item:nth-child(2)>.bx:nth-child(2)>a>span>strong{/*display:block; */font-weight:500; font-size:1.2em;}
#middle > .item:nth-child(2)>.bx:nth-child(2)>a:hover{
 /*   -webkit-box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.2);*/
}
@-webkit-keyframes kaka {
    0%,30%,50%,100%{
        -webkit-transform:rotate(0); transform:rotate(0);
    }
    20%,40%{
        -webkit-transform:rotate(-7deg); transform:rotate(-7deg);
    }
}
@keyframes kaka {
    0%,30%,50%,100%{
        -webkit-transform:rotate(0); transform:rotate(0);
    }
    20%,40%{
        -webkit-transform:rotate(-7deg); transform:rotate(-7deg);
    }
}


.popupzone{
    float:left;margin-right:2em; width:calc((100% - 4em)/3); height:32.8em; background-color:#1B2678;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
}
.popupzone>a{
    display:block; position:relative; width:100%; height:100%; padding:2.8em 2.3em 2.8em 2.3em; font-family:"s-core-dream";
}
.popupzone>a>strong,
.popupzone>a>span{position:relative; z-index:50;}
.popupzone>a>strong{display:block; line-height:1; color:#fff;text-align:center;}
.popupzone>a>strong>span{display:block; font-weight:200; font-size:3em;}
.popupzone>a>strong>em{display:block; margin-top:0.3em; fo
nt-style:normal; font-weight:600; font-size:3.2em;}
.popupzone>a>span{display:block; margin-top:1.3125em; font-size:1.9em;letter-spacing:-0.04em;line-height:1.5; color:rgba(255,255,255,1);}
.popupzone>a>span.golink{position: relative; padding-left: 1.8em; margin-top: 1em; font-size: 2.4em; color:rgba(255,255,255,1); color: #FFDB00; box-sizing: border-box;}
.popupzone>a>span.golink:before{content:""; position: absolute; left: 0; top: 0.1em; display: inline-block; width:1.4em; height:1em; background-image:url(../images/arrow_2.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;}
.popupzone>a>span.golink i{position: relative; display: inline-block; width: 5.0835em; height: auto; text-indent: -9999px; background-size: contain;}
.popupzone>a>span.golink i:before{
    content: ""; position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 1.375em; background: url(../images/uway_logo.png) no-repeat center center; background-size: contain;
    transform: translateY(-50%); -webkit-transform: translateY(-50%);
}

.popupzone>a>i{position:absolute; right:1em; bottom:0; z-index:30; width:26.2em; height:25.3em; background:url(../images/pz_bg.png) no-repeat right bottom; background-size:contain;}
.popupzone>a>i:before{
    content:""; display:block; position:absolute; left:22%; top:0; width:6.0em; height:6.2em; background-image:url(../images/pz_simbol_2-.svg); background-repeat:no-repeat; background-position:center center; background-size:contain;
    animation-name:pz_2;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}
.popupzone>a>i>span:nth-child(1){
    position:absolute; left:12%; top:22%; width:5.2em; height:10.2em; background:url(../images/pz_simbol_3.png) no-repeat right bottom; background-size:contain;
    animation-name:pz_3;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    transform-origin:100% 60%;

    -webkit-animation-name:pz_3;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    -webkit-transform-origin:100% 60%;
}
.popupzone>a>i>span:nth-child(2),
.popupzone>a>i>span:nth-child(3),
.popupzone>a>i>span:nth-child(4){
    display:block; position:absolute; left:78%; top:3%; width:3.9em; height:3.9em; background-repeat:no-repeat; background-position:center center; background-size:contain;
    background-image:url(../images/pz_simbol_1.svg);
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    -webkit-transform-origin:50% 50%;

    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    transform-origin:50% 50%;
}
.popupzone>a>i>span:nth-child(2){-webkit-animation-name:pz_1_1; -webkit-animation-delay:0.6s; animation-name:pz_1_1; animation-delay:0.6s;}
.popupzone>a>i>span:nth-child(3){left:60%; top:0; -webkit-animation-name:pz_1_2; -webkit-animation-delay:0.3s; animation-name:pz_1_2; animation-delay:0.3s;}
.popupzone>a>i>span:nth-child(4){left:85%; top:25%; -webkit-animation-name:pz_1_3; animation-name:pz_1_3;}

.popupzone>a:hover{
    -webkit-box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.2);
}

@-webkit-keyframes pz_1_1 {
    0%{top:60%; -webkit-transform: scale(0.1); transform: scale(0.1);}
    80%{top:5%; -webkit-transform:scale(0.1); transform:scale(0.1);}
    100%{top:5%; -webkit-transform:scale(1); transform:scale(1);}
}
@-webkit-keyframes pz_1_2 {
    0%{top:60%; -webkit-transform: scale(0.1); transform: scale(0.1);}
    80%{top:0; -webkit-transform:scale(0.1); transform:scale(0.1);}
    100%{top:0; -webkit-transform:scale(1); transform:scale(1);}
}
@-webkit-keyframes pz_1_3 {
    0%{top:60%; -webkit-transform: scale(0.1); transform: scale(0.1);}
    80%{top:25%; -webkit-transform:scale(0.1); transform:scale(0.1);}
    100%{top:25%; -webkit-transform:scale(1); transform:scale(1);}
}
@keyframes pz_1_1 {
    0%{top:60%; -webkit-transform: scale(0.1); transform: scale(0.1);}
    80%{top:5%; -webkit-transform:scale(0.1); transform:scale(0.1);}
    100%{top:5%; -webkit-transform:scale(1); transform:scale(1);}
}
@keyframes pz_1_2 {
    0%{top:60%; -webkit-transform: scale(0.1); transform: scale(0.1);}
    80%{top:0; -webkit-transform:scale(0.1); transform:scale(0.1);}
    100%{top:0; -webkit-transform:scale(1); transform:scale(1);}
}
@keyframes pz_1_3 {
    0%{top:60%; -webkit-transform: scale(0.1); transform: scale(0.1);}
    80%{top:25%; -webkit-transform:scale(0.1); transform:scale(0.1);}
    100%{top:25%; -webkit-transform:scale(1); transform:scale(1);}
}
@keyframes pz_2 {
    0%,100%{opacity:0;}
    50%{opacity:1;}
}
@-webkit-keyframes pz_3 {
    0%,30%,50%,100%{-webkit-transform:scale(1); transform:scale(1);}
    20%,40%{-webkit-transform:scale(0.8); transform:scale(0.8);}
}
@keyframes pz_3 {
    0%,30%,50%,100%{-webkit-transform:scale(1); transform:scale(1);}
    20%,40%{-webkit-transform:scale(0.8); transform:scale(0.8);}
}

.bx h2{float:left; font-family:"s-core-dream";font-size:3.15em;color:#fffcaa;font-weight:500;line-height:1.2;padding-right:30px;}
.bx h2 span{font-weight:200;}
.list>ul:after{content:""; display:block; clear:both;}
.list>ul>li{ float:left;margin-right:2em;text-align:center;width:calc((100% - 2em)/2);vertical-align:middle;display:table;height:5.8em;}
.list>ul.four>li{width:calc((100% - 2em)/2);margin-top:1.3em;}
.list>ul>li:last-child{margin-right:0;}
.list>ul>li>a{
    display:block; position:relative; width:100%; height:100%;line-height:1.3; padding:.5em 1.5em; background-color:#ddd;vertical-align:middle;display:table-cell;
    -webkit-border-radius:0.8em;
    border-radius:0.8em;
    -webkit-transition:background-color 0.3s linear;
    transition:background-color 0.3s linear;
}
.list>ul>li>a:after{
    content:""; display:block; position:absolute; right:3.1em; width:5.4em; height:5.4em; background-repeat:no-repeat; background-position:center center; background-size:contain;
    -webkit-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.list>ul>li:nth-child(3n+1)>a{background-color:#2A3DB9;}
.list>ul>li:nth-child(3n+1)>a:hover{background-color:#344CE7;}
.list>ul>li:nth-child(3n+2)>a{background-color:#0081ab;}
.list>ul>li:nth-child(3n+2)>a:hover{background-color:#00b5f1;}
.list>ul>li:nth-child(3n+3)>a{background-color:#029b6e;}
.list>ul>li:nth-child(3n+3)>a:hover{background-color:#00c377;}


.list>ul>li>a>span{font-family:"s-core-dream"; font-weight:500; font-size:1.8em;letter-spacing:-.04em; color:#fff;}
.list>ul>li>a>span>span{display:block;}
.list>ul>li>a>span.thin{font-weight:300;}

.c>ul>li:nth-child(1), .c>ul>li:nth-child(2), .c>ul>li:nth-child(3), .c>ul>li:nth-child(4), .c>ul>li:nth-child(5), .c>ul>li:nth-child(6), .c>ul>li:nth-child(7), .c>ul>li:nth-child(8){margin-bottom:1.4em;}
/* footer */
#footer{padding:4.6em 0;}
#footer > .sns{display:none; margin-bottom:1em; text-align:center;}
#footer > .sns>li{display:inline-block;}
#footer > .sns>li:not(:last-child){margin-right:0.7em;}
#footer > .sns>li>a{overflow:hidden; width:4.5em; height:4.5em; padding:0;}
#footer > .sns>li>a>span{opacity:0; position:absolute;}
#footer > .sns>li>a:before{position:relative; width:100%; height:100%;}

#footer>address{text-align:center; font-style:normal; font-weight:300; font-size:1.8em; color:#fff;}
.flag{text-align:left;display:block;}
.flag img{width:14%;padding:3% 3% 0 0;}
.flag a{background:none !important;}

#google_translate_element{float:right;padding-top:70px;}
@media screen and (max-width: 1360px) {
    #wrap > .layout{width:100%; max-width:100%; padding:0 3em;}	
    #header > ul{padding:0 3em;}
}
@media screen and (max-width: 1280px) {
    body{font-size:8px;}
}

@media screen and (max-width: 1124px) {
    body{font-size:10px; background-position:left top;}
    #wrap > .layout{
        left:auto; top:auto; padding:0 2em;
        -webkit-transform:translate(0,0);
        transform:translate(0,0);
    }
	
	#header{position:relative; height:13.8em;}
    #header{height:auto; padding:2em 0 2.3em 0;}
    #header:after{content:""; display:block; clear:both;}
    #header > strong{position:relative; left:calc(50% - 10em); width:20em; height:12em; }
	#header > ul > li{float:none;padding-bottom:1em;font-size:90%;}
	#header > ul > li:last-child{float:none;padding-bottom:0;}
    #header>ul:nth-of-type(1){float:none; position:relative; bottom:auto;}
    .sns{display:none;}

    #middle>.item{float:none;}
    #middle>.item:nth-child(1){width:100%; margin-right:0;}
    #middle > .item:nth-child(1)>.bx{padding:2em; }
    #middle > .item:nth-child(2){width:100%; margin-top:3.5em;}
    #middle > .item:nth-child(2)>.bx:nth-child(1){padding:2em;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul:after{content:""; display:block; clear:both;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li{float:left; width:calc((100% - 1px - (1.6em * 3)) / 4); margin-right:1.6em;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li:nth-child(n+2){margin-top:0;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li:last-child{margin-right:0;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li>a>span,
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li>span>span{font-size:1.8em;}

    #footer .sns{display:block;}
#google_translate_element{display:none;}
}

@media screen and (max-width: 1124px) {
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li{width:calc((100% - 1px - (1.6em * 1)) / 2);}
  #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li:nth-child(2n+2){margin-right:0;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li:nth-child(n+3){margin-top:1.4em;}
	#middle > .item:nth-child(2){margin-top:0;}

	 #header > ul{padding:1em 0 0 0;margin:0 auto;text-align:center;width:100%;}
	#header > ul > li{display:inline-block;width:100%;float:none;margin:0;}
	#header > ul:nth-of-type(1){left:auto;}
	#header > ul:nth-of-type(1)>li:not(:last-child){margin-right:1.5em;}
	#header > ul:nth-of-type(1)>li>a{
		display:block; position:relative; height:5.4em; line-height:1; padding:1.5em 7em 0 2em;  color:#fff; background-color:rgba(28,40,82,0.65);
		-webkit-border-radius:2.7em;
		border-radius:2.7em;
		-webkit-transition:background-color 0.3s linear;
		transition:background-color 0.3s linear;
	}
	#header > ul:nth-of-type(1)>li>a:after{
		content:""; display:block; position:absolute; right:2em; top:calc(50% - 1.2em); width:3.5em; height:2.4em; background-repeat:no-repeat; background-position:center center; background-size:contain;
		background-image:url(../images/arrow.svg);
	}
	#header > ul:nth-of-type(1)>li>a>span{font-family:"s-core-dream"; font-weight:500; font-size:2.2em;}
	
	.list>ul>li{height:4em;}
	.list>ul>li>a>span{font-size:1.2em;}
	.list>ul.four>li{margin-top:0.75em;}
}

@media screen and (max-width: 850px) {
    body{text-align:center;}
    h1{display:inline-block; position:relative; left:auto; top:auto; margin:3em 0; font-size:0.8em;text-align:center;}
	h1>a {display:block;width:40em;margin:0 auto;}
	h1>a:before,
	h1>a:after{content:""; float:none; display:inline-block; background-repeat:no-repeat; background-position:center; background-size:contain;}
	h1>a:before{width:16.7em; height:4.7em; margin-right:4.1em; background-image:url(../images/logo.svg);}
	h1>a:after{width:12em; height:4.7em; background-image:url(../images/logo_text.svg);}
	h1>a>span{display:none;}
    #header{padding-top:0; text-align:center;margin:0;}


.popupzone>a>strong,
.popupzone>a>span{text-align:left;}


}
/*
@media screen and (max-width: 750px) {
    .list>ul>li{width:calc((100% - 1px - (1.6em * 1)) / 2) !important; margin-right:1.6em;}
    .list>ul>li:nth-child(2),
    .list>ul>li:nth-child(5){margin-right:0;}
    .list>ul>li:nth-child(3){width:100% !important; margin-right:0;}
    .list>ul>li{height:10em !important;}
    .list>ul>li>a{padding-top:3.5em !important;}
    .list>ul>li.t_line>a{padding: 2.2em 3.5em !important;}
    .list>ul>li>a:after{top:calc(50% - 2.7em) !important;}
    
    .list>ul>li>a>span>span{display:inline;}
    .list>ul>li.t_line>a>span>span{display: block;}
    .list>ul>li>a>span>span:nth-child(n+2){padding-left:0.2em;}
}

@media screen and (max-width: 700px) {
    #header>ul:nth-of-type(1){float:none; width:100%;}
    #header > ul:nth-of-type(1)>li{width:calc((100% - 1px - 1.6em) / 2); margin-right:1.6em;}
    #header > ul:nth-of-type(1)>li:last-child{margin-right:0;}
    .popupzone{height:auto;}
    .popupzone>a{padding-bottom:5em;}
    .popupzone>a>strong{line-height:1.2;}
    .popupzone>a>i{display:none;}
}

@media screen and (max-width: 600px) {
    body{font-size:8px;}
    .list>ul>li{height:8em !important;}
    .list>ul>li>a{display:table; table-layout:fixed; width:100%; padding:1em 5.5em 1em 2em !important;}
    .list>ul>li.t_line>a{padding: 1em 5.5em 1em 2em !important;}
    .list>ul>li>a:after{right:1.5em !important; top:calc(50% - 2em) !important; width:4em; height:4em;}
    .list>ul>li>a>span{display:table-cell; width:100%; vertical-align:middle; font-size:1.8em;}
    .popupzone>a:after{width:25px; height:36px;}
}
@media screen and (max-width: 450px) {
    .popupzone{font-size:0.8em;}
}
@media screen and (max-width: 410px) {
    #header > ul:nth-of-type(1)>li>a{padding:1.8em 4em 0 2em;}
    #header > ul:nth-of-type(1)>li>a:after{width:2em;}
    #header > ul:nth-of-type(1)>li>a>span{font-size:1.6em;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li{float:none; width:100% !important;}
    #middle > .item:nth-child(2)>.bx:nth-child(1)>ul>li:nth-child(n+2){margin-top:1em;}
    #middle > .item:nth-child(2)>.bx:nth-child(2){font-size:0.8em;}
    
    .list>ul>li:nth-child(5)>a{padding: 3.5em 5.5em 3.5em 2em !important;}
    .list>ul>li.t_line>a>span>span{display: inline-block; max-width: 6em;}
}*/
@media screen and (max-width: 360px) {
    .popupzone{font-size:0.6em;}
}/**/