@charset "utf-8";

@media screen and (min-width:768px){
/*pc・タブレットcss*/

#top #wrapper{
	position:relative;
	z-index:2;
}
#top-bg-video{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	overflow:hidden;
	padding-bottom:5vw;
	background-color:#000;
}
#top-bg-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}

/* +++++++++++++++++++++++++　ttl */

.top-ttl01{
	text-align:center;
}
.top-ttl01 .en{
	position:relative;
	display:block;
	font-size:11vw;
	line-height:1;
	color:#00398D;
	font-family: "Oswald", serif;
	font-weight:500;
	padding-bottom:1vw;
	margin-bottom:1vw;
}
.top-ttl01 .en:before{
	position: absolute;
	left:50%;
	content: '';
	width: 5vw;
	height: 3px;
	margin-left:-2.5vw;
	background: #88DD00;
	bottom: -1px;
}
.top-ttl01 .jp{
	position:relative;
	display:block;
	font-size:1.3vw;
	line-height:1;
	color:#000000;
	font-weight:700;
}

/* ++++++++++ */

.top-ttl01.c-w{
	text-align:center;
}
.top-ttl01.c-w .en{
	color:#fff;
}
.top-ttl01.c-w .jp{
	color:#fff;
}


/* +++++++++++++++++++++++++　popup */

.mfp-wrap{
	top:20%;
	left:50%;
	width:100%;
	height:100%;
	margin-left:-20%;
	width:36%;
}
.mfp-container {
    padding: 0px;
}
.mfp-close,
.mfp-close:active {
	top:2vw;
}
button.mfp-close, button.mfp-arrow{
	font-size:4vw;
}
.mfp-content{
	top:10%;
	width:36%;
	vertical-align:top;
}
.popup-box{
	background-color:#fff;
	color:#000;
    padding: 2vw 5vw;
}
.popup-box:before,
.popup-box:after,
.popup-box .inner:before,
.popup-box .inner:after{
	content:"";
	position:absolute;
	width:1.8vw;
	height:1.8vw;
}
.popup-box:before{ top:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko01.svg) no-repeat top left / 100% 100%;}
.popup-box:after{ top:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko02.svg) no-repeat top left / 100% 100%;}
.popup-box .inner:before{ bottom:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko03.svg) no-repeat top left / 100% 100%;}
.popup-box .inner:after{ bottom:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko04.svg) no-repeat top left / 100% 100%;}


.popup-box .inner{
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; 
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
.popup-box .char-ph{
	width:40%;
}
.popup-box .txt-box{
	width:55%;
	padding:0 3%;
}
.popup-box .txt-box .char-name{
	position:relative;
	display:block;
	font-size:2vw;
	line-height:1;
	color:#00398D;
	font-weight:700;
	margin-bottom:1.2vw;
}
.popup-box .txt-box .char-name .age{
	font-size:1vw;
}


/* +++++++++++++++++++++++++ */

#mv-header{
	position:relative;
	z-index:10;
	z-index:100;
	width:100%;
	padding:0.7vw 1vw;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; 
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#mv-header .logo{
	width:5.5vw;
}
#mv-header .mv-navi-child{
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; 
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#mv-header .mv-gnavi{
	margin-left:auto;
	margin-right:1vw;
}
#mv-header .mv-gnavi{
}
#mv-header .mv-gnavi > li{
	position:relative;
	font-size:0.8vw;
	line-height:1;
	color:#fff;
}
#mv-header .mv-gnavi > li > a{
	position:relative;
	display:block;
	color:#fff;
	text-decoration:none;
	margin:0.2vw 0.8vw;
	height:100%;
}
#mv-header .mv-gnavi > li > a:after{
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #fff;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform 0.3s;
}
#mv-header .mv-gnavi > li > a:hover {
	opacity:1;
}
#mv-header .mv-gnavi > li > a:hover:after {
	transform: scale(1, 1);
}

#mv-header .contact-btn{
	font-size:0.8vw;
}
#mv-header .contact-btn a{
	display:block;
	padding:10px 1vw;
	color:#fff;
	border: solid 1px #fff;
	border-radius:1000px;
	line-height:1;
	text-decoration:none;
	text-align:center;
}
#mv-header .contact-btn a:hover {
	opacity:1;
	background-color:#fff;
	color:#00398D;
}

/* ドロップダウン++++++++ */

#mv-header .mv-gnavi .dropdwn{
	cursor:pointer;
	display:block;
}
#mv-header .mv-gnavi .dropdwn > span{
	position:relative;
	display:block;
	margin:0.2vw 0.8vw;
	height:100%;
	color:#fff;
}
#mv-header .mv-gnavi .dropdwn > span a{
	position:relative;
	color:#fff;
}
#mv-header .mv-gnavi .dropdwn > span a:after{
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #fff;
	bottom: -0.2vw;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform 0.3s;
}
#mv-header .mv-gnavi .dropdwn > span a:hover {
	opacity:1;
}
#mv-header .mv-gnavi .dropdwn > span a:hover:after {
	transform: scale(1, 1);
}
#mv-header .mv-gnavi .dropdwn_menu{
	display:none;
    position: absolute;
	left:0vw;
    width:15em;
	padding-top:1vw;
}
#mv-header .mv-gnavi .dropdwn_menu li{
	position:relative;
}
#mv-header .mv-gnavi .dropdwn_menu li a{
    display: block;
    color: #fff;
	text-decoration:none;
	background-color:#00398D;
	padding:1vw;
	border-bottom: solid 1px #fff;
}
#mv-header .mv-gnavi .dropdwn_menu li:last-child a{
	border-bottom:none;
}

/* +++++++++++++++++++++++++ */

#mv{
	position:relative;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; 
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#mv:before{
	content:"";
	position:absolute;
	z-index:4;
	bottom:0;
	left:0;
	width:100%;
	padding-top:15%;
	background:url(../img/top/deco_cloud01.png) no-repeat left top / cover;
}
#mv:after{
	content:"";
	position:absolute;
	z-index:2;
	bottom:-1px;
	left:0;
	width:100%;
	padding-top:60%;
	background:url(../img/top/mv_bg.png) no-repeat bottom center / 100% auto;
}

/* +++++++++++++++++++++++++ */


#mv .mikiya{
	position:relative;
	z-index:3;
	width:46vw;
	padding-top:70%;
	overflow: hidden;
}
#mv .mikiya:before{
	content: '';
	animation: dmikiya_anime 3s steps(4) infinite; 
	position:absolute;
	top:0;
	left: 0;
	background: url("../img/top/mikiya.png") no-repeat top left;
	background-size: 400% auto;/*4コマなので400%*/
	width:100%;
	height:100%;
}
@keyframes dmikiya_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:133.33333%; 
  }
}

#mv .copy{
	position:relative;
	z-index:3;
	margin-top:5vw;
	margin-left:5vw;
	width:46vw;
	font-size:6vw;
	line-height:1.3;
	color:#fff;
	font-weight:700;
	letter-spacing:-0.1em;
}
#mv .copy .txt01{
	font-size:13vw;
	letter-spacing:0em;
}
#mv .copy .txt02{
	font-size:7vw;
}
#mv .copy .txt03{
	font-size:9vw;
	letter-spacing:0em;
}

/* ++++++++++ */

.scroll-down-box{
	position:absolute;
	z-index:3;
	top:0;
	left:0;
	width:100%;
	height:100vh;
}
.scroll-down{
	position:absolute;
	bottom:3vw;
	right:50%;
	animation: arrowscroll_move 1s ease-in-out infinite;
}
.scroll-down a{
	position: absolute;
	left: -34px;
	bottom: 30px;
	color: #fff;
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	width: 34px;
	height: 24px;
	text-decoration: none;
}
.scroll-down .text {
	display: block;
	margin-top: 50px;
	margin-left: -10px;
	font-size: 12px;
	color: #fff;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: 2px;
}
.scroll-down .arrow {
	position: absolute;
	width: 38px;
	height: 3px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: scroll_move 3s ease-out infinite;
}
.scroll-down .arrow:first-child { animation: scroll_move 3s ease-out 1s infinite; }
.scroll-down .arrow:nth-child(2) {  animation: scroll_move 3s ease-out 2s infinite; }

.scroll-down .arrow:before,
.scroll-down .arrow:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #fff;
}
.scroll-down .arrow:before {
	left: 0;
	transform: skew(0deg, 30deg);
}
.scroll-down .arrow:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -30deg);
}
@keyframes scroll_move {
	25% { opacity: 1; }
	33% { opacity: 1; transform: translateY(30px); }
	67% { opacity: 1; transform: translateY(40px); }
	100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
}





/* +++++++++++++++++++++++++ */


#hilosophy{
	position:relative;
	padding-top:20vw;
	padding-bottom:5vw;
	color:#fff;
	font-size:1.2vw;
	line-height:2.5;
	background-color:#5598FF;
}
#hilosophy:before{
	content:"";
	position:absolute;
	z-index:2;
	top:30%;
	left:0;
	width:100%;
	padding-top:40%;
	background:url(../img/top/deco_cloud02.png) no-repeat left top / 100% auto;
}
#hilosophy:after{
	content:"";
	position:absolute;
	z-index:2;
	bottom:0;
	left:0;
	width:100%;
	padding-top:50%;
	background:url(../img/top/deco_cloud03.png) no-repeat left bottom / 100% auto;
}

#hilosophy p{
	margin-bottom:3vw;
	text-align:center;
}
#hilosophy .txt01{
	position:relative;
	z-index:5;
	margin-bottom:22vw;
}
#hilosophy .txt02{
	position:relative;
	z-index:5;
	margin-bottom:22vw;
}
#hilosophy .txt03{
	position:relative;
	z-index:5;
	margin-bottom:10vw;
	font-size:2.5vw;
	line-height:2;
}
#hilosophy .txt04{
	position:relative;
	z-index:5;
	font-size:2.5vw;
	line-height:2;
	margin-bottom:5vw;
}
#hilosophy .txt-name{
	position:relative;
	z-index:5;
	line-height:1.3;
}
#hilosophy .txt-name p{
	margin-bottom:0vw;
}
#hilosophy .txt-name .ttl{
	font-size:1vw;
	margin-bottom:1vw;
}
#hilosophy .txt-name .name{
	font-size:1.5vw;
}
#hilosophy .txt-name .sign-name{
	width:10vw;
	margin: 0 auto;
}



/* ++++++++++ */

#hilosophy .ron{
	position:absolute;
	top:-15vw;
	left:1.7vw;
	z-index:4;
	width:51vw;
	padding-top:44%;
	overflow: hidden;
}
#hilosophy .ron:before{
	content: '';
	position:absolute;
	top:0;
	left: 0;
	background: url("../img/top/ron.png") no-repeat top left;
	background-size: 100% auto;/*4コマなので400%*/
	width:100%;
	height:100%;
}

/* ++++++++++ */

#hilosophy #drone-pipe-box{
	position:absolute;
	top:2vw;
	z-index:3;
	right:10.5vw;
	width:23vw;
}
#hilosophy #drone-pipe-box .floating{
	animation: drone_pipe_floating_y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes drone_pipe_floating_y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}
#drone-pipe{
	position:relative;
	width:100%;
	padding-top:120%;
	overflow: hidden;
}
#drone-pipe:before{
	content: '';
	animation: drone_pipe_anime 0.2s steps(4) infinite; 
	position:absolute;
	top:0;
	left: 0;
	background-image: url("../img/top/drone_pipe.png");
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 400% auto;/*4コマなので400%*/
}

@keyframes drone_pipe_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:133.33333%; 
  }
}


/* ++++++++++ */

#hilosophy #drone-box-box{
	position:absolute;
	top:100vw;
	right:9vw;
	width:11vw;
	z-index:3;
}
#hilosophy #drone-box-box .floating{
	animation: drone_box_floating_y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes drone_box_floating_y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}
#drone-box{
	position:relative;
	width:100%;
	padding-top:46%;
	overflow: hidden;
}
#drone-box:before{
	content: '';
	animation: drone_pipe_anime 0.2s steps(4) infinite; 
	position:absolute;
	top:0;
	left: 0;
	background-image: url("../img/top/drone_box.png");
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 400% auto;/*4コマなので400%*/
}

@keyframes drone_box_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:133.33333%; 
  }
}


/* ++++++++++ */

#hilosophy #drone-string-box{
	position:absolute;
	top:42vw;
	left:5.5vw;
	width:14vw;
	z-index:3;
}
#hilosophy #drone-string-box .floating{
	animation: drone_string_floating_y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes drone_string_floating_y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}
#drone-string{
	position:relative;
	width:100%;
	padding-top:52%;
	overflow: hidden;
}
#drone-string:before{
	content: '';
	animation: drone_pipe_anime 0.2s steps(4) infinite; 
	position:absolute;
	top:0;
	left: 0;
	background-image: url("../img/top/drone_string.png");
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 400% auto;/*4コマなので400%*/
}

@keyframes drone_string_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:133.33333%; 
  }
}

/* ++++++++++ */

#hilosophy #drone-usually-box{
	position:absolute;
	top:52vw;
	left:18vw;
	width:9vw;
	z-index:3;
}
#hilosophy #drone-usually-box .floating{
	animation: drone_usually_floating_y 1.4s ease-in-out infinite alternate-reverse;
}
@keyframes drone_usually_floating_y {
  0% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(-3%);
  }
}
#drone-usually{
	position:relative;
	width:100%;
	padding-top:52%;
	overflow: hidden;
}
#drone-usually:before{
	content: '';
	animation: drone_usually_anime 0.2s steps(4) infinite; 
	position:absolute;
	top:0;
	left: 0;
	background-image: url("../img/top/drone_usually.png");
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 400% auto;/*4コマなので400%*/
}

@keyframes drone_usually_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:133.33333%; 
  }
}

/* ++++++++++ */

#hilosophy #aragaki-box{
	position:absolute;
	top:40vw;
	z-index:3;
	right:1vw;
	width:42vw;
}
#hilosophy #aragaki-box .floating{
	animation: aragaki_floating_y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes aragaki_floating_y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}
#aragaki{
	position:relative;
	width:100%;
	padding-top:120%;
	overflow: hidden;
}
#aragaki:before{
	content: '';
	animation: aragaki_anime 0.4s steps(6) infinite; 
	position:absolute;
	top:0;
	left: 0;
	background-image: url("../img/top/aragaki.png");
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 600% auto;/*6コマなので600%*/
}

@keyframes aragaki_anime {
from { 
    background-position:0; 
  }
  to { 
    background-position:120%; 
  }
}
/*100 - 600% ＝ -500% →ここから600にするための％を記載*/



/* ++++++++++ */

#hilosophy .kengo{
	position:absolute;
	top:65vw;
	left:15vw;
	z-index:3;
	width:14vw;
	padding-top:44%;
	overflow: hidden;
}
#hilosophy .kengo:before{
	content: '';
	position:absolute;
	top:0;
	left: 0;
	background: url("../img/top/kengo.png") no-repeat top left;
	background-size: 100% auto;/*4コマなので400%*/
	width:100%;
	height:100%;
}

/* ++++++++++ */

#souta{
	position:absolute;
	bottom:0vw;
	right:1vw;
	z-index:3;
	width:40vw;
	padding-top:27.5vw;
	overflow: hidden;
}
#souta:before{
	content: '';
	position:absolute;
	top:0;
	left: 0;
	background-image: url("../img/top/souta.png");
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 500% auto;/*5コマなので500%*/
}

#souta.ori-anime.active:before{
	content: '';
	animation: souta_anime 0.6s steps(5) 1s forwards; 
	position:absolute;
	top:0;
	left: 0;
	background-image: url("../img/top/souta.png");
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position:0 0; 
	background-size: 500% auto;/*5コマなので500%*/
}


@keyframes souta_anime {
0% { 
    background-position:0; 
  }
  99% { 
    background-position:125%; 
  }
  100% { 
    background-position:100%; 
  }
}
/*100 - 500% ＝ -400% →ここから500にするための％を記載*/



/* +++++++++++++++++++++++++ */

#aggregation{
	position:relative;
	padding-top:6vw;
	background:url(../img/top/aggregation_bg.jpg) no-repeat center center / cover;
}
#aggregation .copy{
	margin-bottom:2vw;
	color:#88DD00;
	font-size:3.6vw;
	text-align:center;
	font-weight:700;
	line-height:1.4;
}
#aggregation .copy .bar{
	position:relative;
}
#aggregation .copy .bar:before{
	content:"";
	position:absolute;
	background-color:#00398D;
	height:100%;
	width:100%;
}
#aggregation .copy .inner{
	position:relative;
	z-index:2;
	padding: 0 1em;
}
#aggregation .character-set{
	position:relative;
	width:80vw;
	margin:0 auto;
}
#aggregation .character-img{
}
#aggregation .character-link-popup{
}
#aggregation .character-link-popup li a{
	position:absolute;
	display:block;
}
#aggregation .character-link-popup li.kengo a{
	top:0;
	left:9vw;
	width:12vw;
	padding-top:34vw;
}
#aggregation .character-link-popup li.ron a{
	top:5vw;
	left:22vw;
	width:11vw;
	padding-top:29vw;
}
#aggregation .character-link-popup li.mikiya a{
	top:0;
	left:34vw;
	width:12.5vw;
	padding-top:34vw;
}
#aggregation .character-link-popup li.aragaki a{
	top:6vw;
	left:47vw;
	width:10vw;
	padding-top:28vw;
}
#aggregation .character-link-popup li.souta a{
	top:2vw;
	left:57.5vw;
	width:13vw;
	padding-top:32vw;
}

#aggregation .character-icon{
	position:absolute;
	bottom:4vw;
	right:3vw;
	width:11.3vw;
}


/* +++++++++++++++++++++++++ */

#works{
	position:relative;
	background-color:#00398D;
	padding:17vw 0;
}
#works .top-ttl01{
	position:relative;
	top:-5vw;
}
#works .works-list{
	position:relative;
	width:64vw;
	margin:0 auto;
	background-size: auto auto;
	background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(5, 79, 178, 1) 10px, rgba(5, 79, 178, 1) 14px );
}
#works .works-list .inner{
	position:relative;
	width:100%;
	height:100%;
	padding:0 8.5vw 5vw;
}
#works .works-list ul{
	position:relative;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#works .works-list:before,
#works .works-list:after,
#works .works-list .inner:before,
#works .works-list .inner:after{
	content:"";
	position:absolute;
	width:1.8vw;
	height:1.8vw;
}
#works .works-list:before{ top:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko01.svg) no-repeat top left / 100% 100%;}
#works .works-list:after{ top:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko02.svg) no-repeat top left / 100% 100%;}
#works .works-list .inner:before{ bottom:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko03.svg) no-repeat top left / 100% 100%;}
#works .works-list .inner:after{ bottom:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko04.svg) no-repeat top left / 100% 100%;}


#works .works-list li{
	position:relative;
	width:47.5%;
	background-color:#fff;
}
#works .works-list li a{
	display:block;
}
#works .works-list li a:hover{ opacity:1;}
#works .works-list .txt{
}
#works .works-list .no{
	position:absolute;
	width:3vw;
	height:3vw;
	z-index:3;
	color:#88DD00;
	font-size:1.6vw;
	background-color:#00398D;
	font-family: "Oswald", serif;
	font-weight:500;
	line-height:1;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#works .works-list .ttl{
	position:relative;
	top:-0.8em;
	display:inline-block;
	color:#88DD00;
	font-size:1.6vw;
	background-color:#00398D;
	font-weight:700;
	padding:0.2em 0.2em 0.2em 1.5vw;
}
#works .works-list p{
	position:relative;
	top:-0.8em;
	padding:0 5vw 0.5em 1.5vw;
}
#works .works-list p:before{
	content:"";
	position:absolute;
	top:50%;
	right:1vw;
	margin-top:-1.5vw;
	width:3vw;
	height:3vw;
	border-radius:1000px;
	border: solid 1px #00398D;
	-webkit-transition: all .4s;
	transition: all .4s;
}
#works .works-list p:after{
	position:absolute;
	top:50%;
	right:0%;
	content:"";
	width: 0.5vw;
	height: 0.5vw;
	margin-right:2.3vw;
	margin-top:-0.2vw;
	border-top: 2px solid #00398D;
	border-right: 2px solid #00398D;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all .4s;
	transition: all .4s;
}

#works .works-list li a .character-img{
	overflow:hidden;
}
#works .works-list li a .character-img img{
    transition: all .2s ease-out;
}
#works .works-list li a:hover .character-img img{
    transform: scale(1.05);
}

#works .works-list a:hover p:before{
	background-color:#00398D;
}
#works .works-list a:hover p:after{
	margin-right:2vw;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}


/* +++++++++++++++++++++++++ */

#mind{
	position:relative;
	background-color:#fff;
	padding:14vw 0;
	background: url(../img/top/plus_one_bg.svg) no-repeat top right / auto 100% #fff;
}
#mind .top-ttl01{
	margin-bottom:5vw;
}
#mind .mind-box{
	width:47vw;
	margin:0 auto;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; 
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#mind .mind-box .img{
	width:30%;
}
#mind .mind-box .txt{
	width:65%;
}
#mind .mind-box .ttl{
	font-size:2.5vw;
	line-height:1;
	margin-bottom:1.5vw;
	color:#00398D;
	font-weight:700;
}


/* +++++++++++++++++++++++++ */

#about{
	position:relative;
	background-size: auto auto;
	background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(5, 79, 178, .3) 10px, rgba(5, 79, 178, .3) 14px );
	padding:14vw 0;
}
#about .top-ttl01{
	margin-bottom:4vw;
}
#about .txt-slider{
	position:absolute;
	top:-5.5vw;
	left:0;
	width:100%;
	color:#fff;
	color:#88DD00;
	font-size:6.5vw;
	font-family: "Oswald", serif;
	font-weight:500;
	line-height:1.4;
}
#about .about-list{
	position:relative;
	width:64vw;
	margin:0 auto;
	background-color:#00398D;
	padding-top:5vw;
}
#about .about-list .inner{
	position:relative;
	width:100%;
	height:100%;
	padding:0 10vw 5vw;
}
#about .about-list ul{
	position:relative;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#about .about-list:before,
#about .about-list:after,
#about .about-list .inner:before,
#about .about-list .inner:after{
	content:"";
	position:absolute;
	width:1.8vw;
	height:1.8vw;
}
#about .about-list:before{ top:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko01.svg) no-repeat top left / 100% 100%;}
#about .about-list:after{ top:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko02.svg) no-repeat top left / 100% 100%;}
#about .about-list .inner:before{ bottom:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko03.svg) no-repeat top left / 100% 100%;}
#about .about-list .inner:after{ bottom:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko04.svg) no-repeat top left / 100% 100%;}


#about .about-list li{
	position:relative;
	width:42%;
}
#about .about-list li:first-child:before{
	position: absolute;
	content:"";
	top:0;
	right:-15%;
	width:1px;
	height:100%;
	background:#fff;
	transform:rotate(25deg);
}
#about .about-list li a{
	display:block;
	position:relative;
}

#about .about-list li a:before{
	content:"";
	position:absolute;
	top:50%;
	right:1vw;
	margin-top:-1.8vw;
	width:3.6vw;
	height:3.6vw;
	border-radius:1000px;
	border: solid 1px #88DD00;
	-webkit-transition: all .4s;
	transition: all .4s;
}
#about .about-list li a:after{
	position:absolute;
	top:50%;
	right:0%;
	content:"";
	width: 0.5vw;
	height: 0.5vw;
	margin-right:2.6vw;
	margin-top:-0.3vw;
	border-top: 2px solid #88DD00;
	border-right: 2px solid #88DD00;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all .4s;
	transition: all .4s;
}

#about .about-list a:hover{ opacity:1;}

#about .about-list a:hover:before{
	background-color:#88DD00;
}
#about .about-list a:hover:after{
	margin-right:2vw;
	border-top: 2px solid #00398D;
	border-right: 2px solid #00398D;
}


#about .about-list li a .en{
	position:relative;
	display:block;
	font-size:4.5vw;
	line-height:1;
	color:#fff;
	font-family: "Oswald", serif;
	font-weight:500;
	margin-bottom:1vw;
}
#about .about-list li a .jp{
	position:relative;
	display:block;
	font-size:1.2vw;
	line-height:1;
	color:#fff;
	font-weight:700;
}


/* +++++++++++++++++++++++++ */

#contact{
	position:relative;
	background-color:#E5EBF3;
	padding:14vw 0;
}
#contact .top-ttl01{
	position:relative;
	top:-5vw;
}
#contact .contact-box{
	position:relative;
	width:64vw;
	margin:0 auto;
	background:#fff;
}
#contact .contact-box .inner{
	position:relative;
	width:100%;
	height:100%;
	padding:0 8.5vw 5vw;
}
#contact #contact-list{
	width:100%;
}
#contact #contact-list th,
#contact #contact-list td{
	padding:10px;
	vertical-align:top;
}
#contact-list .required-icon{
	display: inline-block;
	padding: 3px 15px;
	margin-left:1em;
	background-color:#FF0000;
	color: #fff;
	font-size: 12px;
	line-height:1;
	border-radius:1000px;
}
#contact-list input,
#contact-list textarea,
#contact-list select {
    border: solid 1px #707070;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 15px;
    box-shadow: none;
    border-radius: 0;
    background: #fff;
	font-size:16px;
	border-radius:10px;
}
#contact-list input[type="radio"]{
	transform:scale(1.5);
	border: solid 1px #707070;
	margin-right:0.5em;
}
#contact-list textarea {
	width:100% !important;
    height: 200px !important;
}
#contact-list input::placeholder,
#contact-list textarea::placeholder {
    color: rgba(0,0,0,.3);
}
.privacy-policy-box{
	height:240px;
	overflow-y:scroll;
	margin-bottom:10px;
	padding:1vw;
	border: solid 1px #000000;
	border-radius:10px;
}
#contact .submit-btn{
	text-align:center;
	margin-top: 50px;
}
#contact .submit-btn{
	display:inline-block;
	background-color:#00398D;
	color:#fff;
	border-radius:10000px;
	font-size:16px;
	cursor:pointer;
	height:50px;
	line-height:50px;
	vertical-align:top;
	width:210px;
	border:none;
}







}

@media (max-width: 768px) {
	

	#top #wrapper{
		position:relative;
		z-index:2;
	}
	#top-bg-video{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height:100%;
		overflow:hidden;
		padding-bottom:5vw;
		background-color:#000;
	}
	#top-bg-video video {
		width: 100%;
	}
	
	/* +++++++++++++++++++++++++　ttl */
	
	.top-ttl01{
		text-align:center;
	}
	.top-ttl01 .en{
		position:relative;
		display:block;
		font-size:14vw;
		line-height:1;
		color:#00398D;
		font-family: "Oswald", serif;
		font-weight:500;
		padding-bottom:3vw;
		margin-bottom:3vw;
	}
	.top-ttl01 .en:before{
		position: absolute;
		left:50%;
		content: '';
		width: 14vw;
		height: 2px;
		margin-left:-6vw;
		background: #88DD00;
		bottom: -1px;
	}
	.top-ttl01 .jp{
		position:relative;
		display:block;
		font-size:4vw;
		line-height:1;
		color:#000000;
		font-weight:700;
	}
	
	/* ++++++++++ */
	
	.top-ttl01.c-w{
		text-align:center;
	}
	.top-ttl01.c-w .en{
		color:#fff;
	}
	.top-ttl01.c-w .jp{
		color:#fff;
	}
	
	/* +++++++++++++++++++++++++　popup */
	
	.mfp-wrap{
		left:50%;
		width:100%;
		margin-left:-45vw;
		max-width:90vw;
	}
	.mfp-container {
		padding: 0px;
	}
	.mfp-close,
	.mfp-close:active {
		top:8%;
	}
	button.mfp-close, button.mfp-arrow{
		font-size:15vw;
	}
	.mfp-content{
		top:15vh;
		width:100%;
		height:70vh;
		vertical-align:top;
	}
	.popup-box{
		position:relative;
		background-color:#fff;
		color:#000;
		padding: 5vw;
		height:70vh;
	}
	.popup-box:before,
	.popup-box:after,
	.popup-box .inner:before,
	.popup-box .inner:after{
		content:"";
		position:absolute;
		width:5vw;
		height:5vw;
	}
	.popup-box:before{ top:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko01.svg) no-repeat top left / 100% 100%;}
	.popup-box:after{ top:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko02.svg) no-repeat top left / 100% 100%;}
	.popup-box .inner:before{ bottom:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko03.svg) no-repeat top left / 100% 100%;}
	.popup-box .inner:after{ bottom:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko04.svg) no-repeat top left / 100% 100%;}
	
	.popup-box .inner{
	}
	.popup-box .char-ph{
		width:40%;
		margin: 0 auto 5vw;
	}
	.popup-box .txt-box{
		width:100%;
	}
	.popup-box .txt-box .char-name{
		position:relative;
		display:block;
		font-size:7vw;
		line-height:1;
		color:#00398D;
		font-weight:700;
		margin-bottom:3vw;
	}
	.popup-box .txt-box .char-name .age{
		font-size:4vw;
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#mv-header{
		display:none;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#mv{
		position:relative;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; 
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	#mv:after{
		content:"";
		position:absolute;
		z-index:2;
		bottom:-1px;
		left:0;
		width:100%;
		padding-top:60%;
		background:url(../img/top/mv_bg_sp.png) no-repeat bottom center / 100% auto;
	}
	
	/* +++++++++++++++++++++++++ */
	
	#mv .mikiya{
		position:relative;
		z-index:3;
		width:90vw;
		padding-top:110%;
		overflow: hidden;
		margin-left:auto;
	}
	#mv .mikiya:before{
		content: '';
		animation: dmikiya_anime 3s steps(4) infinite; 
		position:absolute;
		top:0;
		left: 0;
		background: url("../img/top/mikiya_sp.png") no-repeat top left;
		background-size: 400% auto;/*4コマなので400%*/
		width:100%;
		height:100%;
	}
	@keyframes dmikiya_anime {
	from { 
		background-position:0; 
	  }
	  to { 
		background-position:133.33333%; 
	  }
	}
	
	#mv .copy{
		position:relative;
		z-index:3;
		margin-top:7vw;
		margin-left:10vw;
		width:80vw;
		font-size:9vw;
		line-height:1.3;
		color:#fff;
		font-weight:700;
		letter-spacing:-0.1em;
	}
	#mv .copy .txt01{
		font-size:22vw;
		letter-spacing:0em;
	}
	#mv .copy .txt02{
		font-size:12vw;
	}
	#mv .copy .txt03{
		font-size:16vw;
		letter-spacing:0em;
	}
	
	/* ++++++++++ */
	
	.scroll-down-box{
		position:absolute;
		z-index:5;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	.scroll-down{
		position:absolute;
		bottom:10vw;
		right:50%;
		animation: arrowscroll_move 1s ease-in-out infinite;
	}
	.scroll-down a{
		display: block;
		position: absolute;
		left: -30px;
		bottom: 30px;
		color: #fff;
		font-size: 14px;
		letter-spacing: .2em;
		text-transform: uppercase;
		width: 60px;
		height: 24px;
		text-decoration: none;
	}
	.scroll-down .text {
		display: block;
		margin-top: 50px;
		font-size: 12px;
		color: #fff;
		text-align:center;
		text-transform: uppercase;
		white-space: nowrap;
		letter-spacing: 2px;
	}
	.scroll-down .arrow {
		position: absolute;
		width: 38px;
		left:11px;
		height: 3px;
		opacity: 0;
		transform: scale3d(0.5, 0.5, 0.5);
		animation: scroll_move 3s ease-out infinite;
	}
	.scroll-down .arrow:first-child { animation: scroll_move 3s ease-out 1s infinite; }
	.scroll-down .arrow:nth-child(2) {  animation: scroll_move 3s ease-out 2s infinite; }
	
	.scroll-down .arrow:before,
	.scroll-down .arrow:after {
		content: ' ';
		position: absolute;
		top: 0;
		height: 100%;
		width: 51%;
		background: #fff;
	}
	.scroll-down .arrow:before {
		left: 0;
		transform: skew(0deg, 30deg);
	}
	.scroll-down .arrow:after {
		right: 0;
		width: 50%;
		transform: skew(0deg, -30deg);
	}
	@keyframes scroll_move {
		25% { opacity: 1; }
		33% { opacity: 1; transform: translateY(30px); }
		67% { opacity: 1; transform: translateY(40px); }
		100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); }
	}
	
	
	
	
	
	/* +++++++++++++++++++++++++ */
	
	
	#hilosophy{
		position:relative;
		padding-top:20vw;
		padding-bottom:5vw;
		color:#fff;
		font-size:4.2vw;
		line-height:2.5;
		background-color:#5598FF;
		overflow: hidden;
	}
	#hilosophy:before{
		content:"";
		position:absolute;
		z-index:2;
		top:20%;
		left:0;
		width:100%;
		padding-top:220%;
		background:url(../img/top/deco_cloud02_sp.png) no-repeat left top / 100% auto;
	}
	#hilosophy:after{
		content:"";
		position:absolute;
		z-index:2;
		bottom:0;
		left:0;
		width:100%;
		padding-top:160%;
		background:url(../img/top/deco_cloud03_sp.png) no-repeat left bottom / 100% auto;
	}
	
	#hilosophy p{
		margin-bottom:3vw;
		text-align:center;
	}
	#hilosophy .txt01{
		position:relative;
		z-index:5;
		margin-bottom:260vw;
	}
	#hilosophy .txt02{
		position:relative;
		z-index:5;
		margin-bottom:140vw;
	}
	#hilosophy .txt03{
		position:relative;
		z-index:5;
		margin-bottom:5vw;
		font-size:7vw;
		line-height:2;
	}
	#hilosophy .txt04{
		position:relative;
		z-index:5;
		font-size:7vw;
		line-height:2;
		margin-bottom:5vw;
	}
	#hilosophy .txt-name{
		position:relative;
		z-index:5;
		line-height:1.3;
		margin-bottom:60vw;
	}
	#hilosophy .txt-name p{
		margin-bottom:0vw;
	}
	#hilosophy .txt-name .ttl{
		font-size:4vw;
		margin-bottom:4vw;
	}
	#hilosophy .txt-name .name{
		font-size:6.5vw;
	}
	#hilosophy .txt-name .sign-name{
		width:40vw;
		margin: 0 auto;
	}

	
	/* ++++++++++ */
	
	#hilosophy #drone-pipe-box{
		position:absolute;
		top:90vw;
		z-index:3;
		right:10vw;
		width:54vw;
	}
	#hilosophy #drone-pipe-box .floating{
		animation: drone_pipe_floating_y 1.8s ease-in-out infinite alternate-reverse;
	}
	@keyframes drone_pipe_floating_y {
	  0% {
		transform: translateY(-5%);
	  }
	  100% {
		transform: translateY(5%);
	  }
	}
	#drone-pipe{
		position:relative;
		width:100%;
		padding-top:120%;
		overflow: hidden;
	}
	#drone-pipe:before{
		content: '';
		animation: drone_pipe_anime 0.2s steps(4) infinite; 
		position:absolute;
		top:0;
		left: 0;
		background-image: url("../img/top/drone_pipe.png");
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-position:0 0; 
		background-size: 400% auto;/*4コマなので400%*/
	}
	
	@keyframes drone_pipe_anime {
	from { 
		background-position:0; 
	  }
	  to { 
		background-position:133.33333%; 
	  }
	}
	
	/* ++++++++++ */
	
	#hilosophy .ron{
		position:absolute;
		top:155vw;
		left:-10vw;
		z-index:4;
		width:100vw;
		padding-top:90%;
		overflow: hidden;
	}
	#hilosophy .ron:before{
		content: '';
		position:absolute;
		top:0;
		left: 0;
		background: url("../img/top/ron.png") no-repeat top left;
		background-size: 100% auto;/*4コマなので400%*/
		width:100%;
		height:100%;
	}
	
	/* ++++++++++ */
	
	#hilosophy #aragaki-box{
		position:absolute;
		top:240vw;
		z-index:3;
		right:2vw;
		width:85vw;
	}
	#hilosophy #aragaki-box .floating{
		animation: aragaki_floating_y 1.8s ease-in-out infinite alternate-reverse;
	}
	@keyframes aragaki_floating_y {
	  0% {
		transform: translateY(-5%);
	  }
	  100% {
		transform: translateY(5%);
	  }
	}
	#aragaki{
		position:relative;
		width:100%;
		padding-top:120%;
		overflow: hidden;
	}
	#aragaki:before{
		content: '';
		animation: aragaki_anime 0.4s steps(6) infinite; 
		position:absolute;
		top:0;
		left: 0;
		background-image: url("../img/top/aragaki.png");
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-position:0 0; 
		background-size: 600% auto;/*6コマなので600%*/
	}
	
	@keyframes aragaki_anime {
	from { 
		background-position:0; 
	  }
	  to { 
		background-position:120%; 
	  }
	}
	/*100 - 600% ＝ -500% →ここから600にするための％を記載*/
	
	
	/* ++++++++++ */
	
	#hilosophy .kengo{
		position:absolute;
		top:460vw;
		left:17vw;
		z-index:3;
		width:40vw;
		padding-top:96%;
		overflow: hidden;
	}
	#hilosophy .kengo:before{
		content: '';
		position:absolute;
		top:0;
		left: 0;
		background: url("../img/top/kengo.png") no-repeat top left;
		background-size: 100% auto;/*4コマなので400%*/
		width:100%;
		height:100%;
	}
	
	/* ++++++++++ */
	
	#hilosophy #drone-box-box{
		position:absolute;
		top:490vw;
		right:7vw;
		width:34vw;
		z-index:3;
	}
	#hilosophy #drone-box-box .floating{
		animation: drone_box_floating_y 1.8s ease-in-out infinite alternate-reverse;
	}
	@keyframes drone_box_floating_y {
	  0% {
		transform: translateY(-5%);
	  }
	  100% {
		transform: translateY(5%);
	  }
	}
	#drone-box{
		position:relative;
		width:100%;
		padding-top:46%;
		overflow: hidden;
	}
	#drone-box:before{
		content: '';
		animation: drone_pipe_anime 0.2s steps(4) infinite; 
		position:absolute;
		top:0;
		left: 0;
		background-image: url("../img/top/drone_box.png");
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-position:0 0; 
		background-size: 400% auto;/*4コマなので400%*/
	}
	
	@keyframes drone_box_anime {
	from { 
		background-position:0; 
	  }
	  to { 
		background-position:133.33333%; 
	  }
	}
	
	
	/* ++++++++++ */
	
	#hilosophy #drone-string-box{
		position:absolute;
		top:430vw;
		left:7vw;
		width:34vw;
		z-index:3;
	}
	#hilosophy #drone-string-box .floating{
		animation: drone_string_floating_y 1.8s ease-in-out infinite alternate-reverse;
	}
	@keyframes drone_string_floating_y {
	  0% {
		transform: translateY(-5%);
	  }
	  100% {
		transform: translateY(5%);
	  }
	}
	#drone-string{
		position:relative;
		width:100%;
		padding-top:52%;
		overflow: hidden;
	}
	#drone-string:before{
		content: '';
		animation: drone_pipe_anime 0.2s steps(4) infinite; 
		position:absolute;
		top:0;
		left: 0;
		background-image: url("../img/top/drone_string.png");
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-position:0 0; 
		background-size: 400% auto;/*4コマなので400%*/
	}
	
	@keyframes drone_string_anime {
	from { 
		background-position:0; 
	  }
	  to { 
		background-position:133.33333%; 
	  }
	}
	
	/* ++++++++++ */
	
	#hilosophy #drone-usually-box{
		position:absolute;
		top:440vw;
		left:40vw;
		width:24vw;
		z-index:3;
	}
	#hilosophy #drone-usually-box .floating{
		animation: drone_usually_floating_y 1.4s ease-in-out infinite alternate-reverse;
	}
	@keyframes drone_usually_floating_y {
	  0% {
		transform: translateY(3%);
	  }
	  100% {
		transform: translateY(-3%);
	  }
	}
	#drone-usually{
		position:relative;
		width:100%;
		padding-top:52%;
		overflow: hidden;
	}
	#drone-usually:before{
		content: '';
		animation: drone_usually_anime 0.2s steps(4) infinite; 
		position:absolute;
		top:0;
		left: 0;
		background-image: url("../img/top/drone_usually.png");
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-position:0 0; 
		background-size: 400% auto;/*4コマなので400%*/
	}
	
	@keyframes drone_usually_anime {
	from { 
		background-position:0; 
	  }
	  to { 
		background-position:133.33333%; 
	  }
	}
	
	/* ++++++++++ */
	
	#souta{
		position:absolute;
		bottom:-5vw;
		right:-5vw;
		z-index:3;
		width:80vw;
		padding-top:55vw;
		overflow: hidden;
	}
	#souta:before{
		content: '';
		position:absolute;
		top:0;
		left: 0;
		background-image: url("../img/top/souta.png");
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-position:0 0; 
		background-size: 500% auto;/*5コマなので500%*/
	}
	
	#souta.ori-anime.active:before{
		content: '';
		animation: souta_anime 0.6s steps(5) 0.5s forwards; 
		position:absolute;
		top:0;
		left: 0;
		background-image: url("../img/top/souta.png");
		width:100%;
		height:100%;
		background-repeat: no-repeat;
		background-position:0 0; 
		background-size: 500% auto;/*5コマなので500%*/
	}
	
	
	@keyframes souta_anime {
	0% { 
		background-position:0; 
	  }
	  99% { 
		background-position:125%; 
	  }
	  100% { 
		background-position:100%; 
	  }
	}
	/*100 - 500% ＝ -400% →ここから500にするための％を記載*/
	
	
	
	/* +++++++++++++++++++++++++ */
	
	#aggregation{
		position:relative;
		overflow:hidden;
		padding-top:6vw;
		background:url(../img/top/aggregation_bg_sp.jpg) no-repeat center center / cover;
	}
	#aggregation .copy{
		margin-bottom:30vw;
		color:#88DD00;
		font-size:7vw;
		text-align:center;
		font-weight:700;
		line-height:1.4;
	}
	#aggregation .copy .bar{
		position:relative;
	}
	#aggregation .copy .bar:before{
		content:"";
		position:absolute;
		background-color:#00398D;
		height:100%;
		width:100%;
	}
	#aggregation .copy .inner{
		position:relative;
		z-index:2;
		padding: 0 1em;
	}
	#aggregation .character-set{
		position:relative;
		width:100vw;
		margin:0 auto;
	}
	#aggregation .character-img{
		position:relative;
		left:-10vw;
		width:120vw;
	}
	#aggregation .character-link-popup{
	}
	#aggregation .character-link-popup li a{
		position:absolute;
		display:block;
	}
	#aggregation .character-link-popup li.kengo a{
		bottom:9vw;
		left:7vw;
		width:14vw;
		padding-top:39vw;
	}
	#aggregation .character-link-popup li.ron a{
		bottom:9vw;
		left:26vw;
		width:11vw;
		padding-top:39vw;
	}
	#aggregation .character-link-popup li.mikiya a{
		bottom:9vw;
		left:40vw;
		width:20vw;
		padding-top:38vw;
	}
	#aggregation .character-link-popup li.aragaki a{
		bottom:9vw;
		left:63vw;
		width:11vw;
		padding-top:38vw;
	}
	#aggregation .character-link-popup li.souta a{
		bottom:9vw;
		left:75vw;
		width:18vw;
		padding-top:40vw;
	}
	
	#aggregation .character-icon{
		position:absolute;
		top:29vw;
		right:3vw;
		width:28vw;
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#works{
		position:relative;
		background-color:#00398D;
		padding:5vw;
	}
	#works .top-ttl01{
		margin-bottom:5vw;
	}
	#works .works-list{
		position:relative;
		margin:0 auto;
		background-size: auto auto;
		background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(5, 79, 178, 1) 10px, rgba(5, 79, 178, 1) 14px );
	}
	#works .works-list .inner{
		position:relative;
		width:100%;
		padding:5vw;
	}
	#works .works-list ul{
		position:relative;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	#works .works-list:before,
	#works .works-list:after,
	#works .works-list .inner:before,
	#works .works-list .inner:after{
		content:"";
		position:absolute;
		width:5vw;
		height:5vw;
	}
	#works .works-list:before{ top:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko01.svg) no-repeat top left / 100% 100%;}
	#works .works-list:after{ top:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko02.svg) no-repeat top left / 100% 100%;}
	#works .works-list .inner:before{ bottom:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko03.svg) no-repeat top left / 100% 100%;}
	#works .works-list .inner:after{ bottom:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko04.svg) no-repeat top left / 100% 100%;}
	
	
	#works .works-list li{
		position:relative;
		margin-bottom:10vw;
		background-color:#fff;
	}
	#works .works-list li a{
		display:block;
	}
	#works .works-list li a:hover{ opacity:1;}
	#works .works-list .txt{
	}
	#works .works-list .no{
		position:absolute;
		width:12vw;
		height:12vw;
		z-index:3;
		color:#88DD00;
		font-size:6vw;
		background-color:#00398D;
		font-family: "Oswald", serif;
		font-weight:500;
		line-height:1;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center;
		-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	#works .works-list .ttl{
		position:relative;
		top:-1.2em;
		display:inline-block;
		color:#88DD00;
		font-size:5vw;
		background-color:#00398D;
		font-weight:700;
		padding:0.2em 1em 0.2em 3vw;
	}
	#works .works-list p{
		position:relative;
		top:-0.8em;
		padding:0 15vw 0.5em 3vw;
	}
	#works .works-list p:before{
		content:"";
		position:absolute;
		top:25%;
		right:3vw;
		margin-top:-4vw;
		width:8vw;
		height:8vw;
		border-radius:1000px;
		border: solid 1px #00398D;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	#works .works-list p:after{
		position:absolute;
		top:25%;
		right:0%;
		content:"";
		width: 1.5vw;
		height: 1.5vw;
		margin-right:6.7vw;
		margin-top:-0.6vw;
		border-top: 2px solid #00398D;
		border-right: 2px solid #00398D;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	
	#works .works-list li a .character-img{
		overflow:hidden;
	}
	#works .works-list li a .character-img img{
		transition: all .2s ease-out;
	}
	#works .works-list li a:hover .character-img img{
		transform: scale(1.05);
	}
	
	#works .works-list a:hover p:before{
		background-color:#00398D;
	}
	#works .works-list a:hover p:after{
		margin-right:2vw;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#mind{
		position:relative;
		background-color:#fff;
		padding:14vw 5vw 24vw 5vw;
		background: url(../img/top/plus_one_bg.svg) no-repeat bottom right / 50% auto #fff;
	}
	#mind .top-ttl01{
		margin-bottom:5vw;
	}
	#mind .mind-box{
	}
	#mind .mind-box .img{
		width:50%;
		margin: 0 auto 5vw;
	}
	#mind .mind-box .txt{
	}
	#mind .mind-box .ttl{
		font-size:5vw;
		line-height:1;
		margin-bottom:3vw;
		color:#00398D;
		font-weight:700;
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#about{
		position:relative;
		background-size: auto auto;
		background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(5, 79, 178, .3) 10px, rgba(5, 79, 178, .3) 14px );
		padding:0vw 5vw 15vw;
	}
	#about .top-ttl01{
		margin-bottom:6vw;
	}
	#about .sp-txt-slider-box{
		overflow:hidden;
		top:-8vw;
		left:-5vw;
		z-index:2;
		width:calc(100% + 10vw);
		position:relative;
		
	}
	#about .txt-slider{
		width:200%;
		color:#fff;
		color:#88DD00;
		font-size:11vw;
		font-family: "Oswald", serif;
		font-weight:500;
		line-height:1.4;
		white-space: nowrap;
	}
	#about .about-list{
		position:relative;
		margin:0 auto;
		background-color:#00398D;
		padding-top:5vw ;
	}
	#about .about-list .inner{
		position:relative;
		width:100%;
		height:100%;
		padding:0 10vw 10vw;
	}
	#about .about-list ul{
		position:relative;
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	#about .about-list:before,
	#about .about-list:after,
	#about .about-list .inner:before,
	#about .about-list .inner:after{
		content:"";
		position:absolute;
		width:5vw;
		height:5vw;
	}
	#about .about-list:before{ top:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko01.svg) no-repeat top left / 100% 100%;}
	#about .about-list:after{ top:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko02.svg) no-repeat top left / 100% 100%;}
	#about .about-list .inner:before{ bottom:-0.2vw; left:-0.2vw; background:url(../img/top/work_deco_kakko03.svg) no-repeat top left / 100% 100%;}
	#about .about-list .inner:after{ bottom:-0.2vw; right:-0.2vw; background:url(../img/top/work_deco_kakko04.svg) no-repeat top left / 100% 100%;}
	
	
	#about .about-list li{
		position:relative;
		width:42%;
	}
	#about .about-list li:first-child:before{
		position: absolute;
		content:"";
		top:0;
		right:-15%;
		width:1px;
		height:150%;
		background:#fff;
		transform:rotate(25deg);
	}
	#about .about-list li a{
		display:block;
		position:relative;
	}
	
	#about .about-list li a:before{
		content:"";
		position:absolute;
		top:50%;
		right:1vw;
		margin-top:3vw;
		width:8vw;
		height:8vw;
		border-radius:1000px;
		border: solid 1px #88DD00;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	#about .about-list li a:after{
		position:absolute;
		top:50%;
		right:0%;
		content:"";
		width: 1.5vw;
		height: 1.5vw;
		margin-right:4.5vw;
		margin-top:6vw;
		border-top: 2px solid #88DD00;
		border-right: 2px solid #88DD00;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	
	#about .about-list a:hover{ opacity:1;}
	
	#about .about-list a:hover:before{
		background-color:#88DD00;
	}
	#about .about-list a:hover:after{
		margin-right:2vw;
		border-top: 2px solid #00398D;
		border-right: 2px solid #00398D;
	}
	
	
	#about .about-list li a .en{
		position:relative;
		display:block;
		font-size:9vw;
		line-height:1;
		color:#fff;
		font-family: "Oswald", serif;
		font-weight:500;
		margin-bottom:1vw;
	}
	#about .about-list li a .jp{
		position:relative;
		display:block;
		font-size:4vw;
		line-height:1;
		color:#fff;
		font-weight:700;
	}
	
	
	/* +++++++++++++++++++++++++ */
	
	#contact{
		position:relative;
		background-color:#E5EBF3;
		padding:14vw 5vw;
	}
	#contact .top-ttl01{
		position:relative;
		top:-5vw;
	}
	#contact .contact-box{
		position:relative;
		background:#fff;
	}
	#contact .contact-box .inner{
		position:relative;
		width:100%;
		height:100%;
		padding:0 5vw 5vw;
	}
	#contact #contact-list{
		width:100%;
	}
	#contact #contact-list th,
	#contact #contact-list td{
		display:block;
		width:100%;
		padding:1vw;
		vertical-align:top;
	}
	#contact #contact-list td{
		padding-bottom:5vw;
	}
	#contact-list .required-icon{
		display: inline-block;
		padding: 5px 10px;
		margin-left:0.7em;
		background-color:#FF0000;
		color: #fff;
		font-size: 12px;
		line-height:1;
		border-radius:1000px;
	}
	#contact-list input,
	#contact-list textarea,
	#contact-list select {
		border: solid 1px #707070;
		box-sizing: border-box;
		width: 100%;
		padding:4vw;
		box-shadow: none;
		border-radius: 0;
		background: #fff;
		font-size:16px;
		border-radius:5px;
	}
	#contact-list input[type="radio"]{
		transform:scale(1.5);
		border: solid 1px #707070;
		margin-right:0.5em;
	}
	#contact-list textarea {
		width:100% !important;
		height: 200px !important;
	}
	#contact-list input::placeholder,
	#contact-list textarea::placeholder {
		color: rgba(0,0,0,.3);
	}
	.privacy-policy-box{
		height:240px;
		overflow-y:scroll;
		margin-bottom:3vw;
		padding:5vw;
		border: solid 1px #000000;
		border-radius:10px;
	}
	#contact .submit-btn{
		text-align:center;
		margin-top: 5vw;
	}
	#contact .submit-btn{
		display:inline-block;
		background-color:#00398D;
		color:#fff;
		border-radius:10000px;
		font-size:16px;
		cursor:pointer;
		height:50px;
		line-height:50px;
		vertical-align:top;
		width:70%;
		border:none;
	}
	
	
}