@charset "utf-8";

/* 矢印 */
#top .arrow{height: 260px;padding-top: 115px;}
#top .arrow h2{font-size: 75px;color:#0086d9;font-weight: 500;}
#top .arrow h2 small{font-size: 45px;margin-left: 100px;font-weight: 500;}

#top .a_right{background: url("../img/arrow_r.png") no-repeat;background-position: top right 300px;}
#top .a_left{background: url("../img/arrow_l.png") no-repeat;background-position: top left 200px;}
#top .a_left h2{margin-left: 30%;}

@media only screen and (max-width: 1200px) {
#top .a_right{background: url("../img/arrow_r.png") no-repeat;background-position: top right 100px;}
#top .a_left{background: url("../img/arrow_l.png") no-repeat;background-position: top left 70px;}
#top .arrow h2 small{margin-left: 50px;}
#top .a_left h2{margin-left: 180px;}
}

@media only screen and (max-width: 768px) {
#top .arrow{height: 167px;padding-top: 75px;}
#top .arrow h2{font-size: 9vw;color:#0086d9;line-height: 1.2;}
#top .arrow h2 small{font-size: 6vw;margin-left: 0;display: block;}

#top .a_right{background: url("../img/arrow_r_sp.png") no-repeat;background-position: top right;}
#top .a_left{background: url("../img/arrow_l_sp.png") no-repeat;background-position: top left 0;}
#top .a_left h2{margin-left: 0;padding-left: 30%;}
}

/* 見出し・リード */
#top .bk_blue h3{line-height: 1.2;}
#top .bk_blue h3 span{font-size: 60px;color: #fff;font-family: 'Roboto', sans-serif;font-weight: 500;display: block;}
#top .bk_blue h3 small{font-size: 26px;font-weight: 500;}

#top .bk_white h3{line-height: 1.2;}
#top .bk_white h3 span{font-size: 60px;color: #0086d9;font-family: 'Roboto', sans-serif;font-weight: 500;display: block;}
#top .bk_white h3 small{font-size: 26px;}
#top .bk_blue p.lead{margin-top: 45px;color: #fff;line-height: 1.8;}
#top .bk_white p.lead{margin-top: 45px;line-height: 1.8;}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 768px) {
#top .bk_blue h3 span{font-size: 35px;color: #fff;font-family: 'Roboto', sans-serif;font-weight: 500;display: block;line-height: 1.2;}
#top .bk_blue h3 small{font-size: 18px;}

#top .bk_white h3 span{font-size: 35px;color: #0086d9;font-family: 'Roboto', sans-serif;font-weight: 500;display: block;line-height: 1.2;}
#top .bk_white h3 small{font-size: 18px;}
#top .bk_blue p.lead{margin-top: 20px;color: #fff;}
#top .bk_white p.lead{margin-top: 20px;}
}

/* READ MOREボタン */
#top .bk_white .readmore_btn,
#top .bk_blue .readmore_btn{display: block;width: 280px;padding: 10px 15px;font-size: 20px;font-family: 'Roboto', 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic",sans-serif;font-weight: 500;letter-spacing: 1px;margin-top: 50px;transition: 0.5s all;}
#top .bk_white .readmore_btn{border: 3px solid #000;color:#000;}
#top .bk_blue .readmore_btn{border: 3px solid #fff;color:#fff;}

#top .bk_white .readmore_btn::after,
#top .bk_blue .readmore_btn::after{content: "";width: 25px;height: 15px;display: inline-block;position: absolute;right: 20px;top:50%;transform: translateY(-50%);}
#top .bk_white .readmore_btn::after{background: url("../common/img/readmore_bk.png") no-repeat;background-size: contain;}
#top .bk_blue .readmore_btn::after{background: url("../common/img/readmore_wh.png") no-repeat;background-size: contain;}

#top .bk_white .readmore_btn:hover,
#top .bk_blue .readmore_btn:hover{opacity: 0.6;}

@media only screen and (max-width: 768px) {
#top .bk_white .readmore_btn,
#top .bk_blue .readmore_btn{display: block;width: 260px;padding: 7px 12px;font-size: 18px;}
#top .bk_white .readmore_btn{border: 2px solid #000;}
#top .bk_blue .readmore_btn{border: 2px solid #fff;}

#top .bk_white .readmore_btn::after,
#top .bk_blue .readmore_btn::after{content: "";width: 25px;height: 15px;display: inline-block;margin-left: 95px;}
}

/* メイン画像 */
#top #top_main .main_img{width: 100%;}
#top #top_main p{font-size: 6.5vw;position: absolute;left: 0;bottom: 20%;width: 63.5%;font-family: 'Roboto', sans-serif;font-weight: 600;text-align: center;z-index: 2;}
#top #top_main p span{font-family: 'Roboto', sans-serif;font-weight: 600;}
#top #top_main p::before{content: "";position: absolute;display: block;bottom: 0;left: 0;width: 100%;height: 4vw;background: #0086d9;z-index: -1;}
#top #top_main .scroll{position: absolute;right: 2.75%;top: 45%;}
#top #top_main .scroll::after{content: "";width: 2px;height: 3vw;background: #0086d9;margin: 0.2vw auto 0;display: block;animation: scroll 1.5s infinite}
@keyframes scroll {
  0% {transform: translateY(0);opacity: 0;}
  50% {opacity: 1;}
  100% {transform: translateY(0.8vw);opacity: 0;}
}
@keyframes scrollsp {
  0% {transform: translateY(0);opacity: 0;}
  50% {opacity: 1;}
  100% {transform: translateY(4vw);opacity: 0;}
}

@media only screen and (max-width: 768px) {
#top #top_main p{font-size: 15vw;position: absolute;left: 0;bottom: 38%;width: 95%;text-align: left;z-index: 2;padding-left: 5vw;line-height: 1.11;}
#top #top_main p span::before{content:"";bottom: 0vw;left: -5vw;background: #0086d9;z-index: -1;display: inline-block;height: 7vw;width: 118%;position: absolute;}
#top #top_main p::before{bottom: 0vw;left: 0;width: 100%;height: 7vw;background: #0086d9;z-index: -1;}
#top #top_main .scroll{position: absolute;right: 2.75%;top: 30%;width: 3.5vw;display: inline-block;}
#top #top_main .scroll::after{width: 2px;height: 10vw;animation: scrollsp 1.5s infinite}
}


/* NEXT SOLUTIONS */
#top #solution{background: url("../img/top_u_bk.png") no-repeat;background-position: top center;background-color: #0086d9;padding: 90px 0 80px 0;}
#top #solution p.lead{width: 600px;color: #000;}
#top #solution .present{margin-top: 150px;}
#top #solution .interview{margin-top: 130px;}
#top #solution .interview_item{margin-top: 50px;justify-content: space-evenly;}
#top #solution .interview h3 span{background: #0086d9;padding: 4px 10px 1px;margin-left: -10px;display: inline-block;margin-bottom: 5px;}
#top #solution .btn_z_j{display: flex;justify-content: center;margin-top: 50px;}
#top #solution .btn_z_j a{font-weight: 500;}
#top #solution .btn_z_j a:nth-of-type(n+2){margin-left: 50px;}


@media only screen and (max-width: 1200px) {
#top #solution p.lead{width: 50%;}
#top #solution .present{margin-top: 70px;}
}

@media only screen and (max-width: 768px) {
#top #solution{background: url("../img/top_u_bk_sp.png") no-repeat;background-position: top center;background-color: #0086d9;padding: 40px 0 60px 0;}
#top #solution .midashi{font-size: 15vw;line-height: 1.2;font-family: 'Roboto', sans-serif;font-weight: 600;}
#top #solution p.lead{width: 100%;}
#top #solution .present{margin-top: 15px;}
#top #solution .interview{margin-top: 15px;}
#top #solution .interview h3 span{padding: 3px 7px 0px;margin-left: -7px;margin-bottom: 5px;}
#top #solution .btn_z_j{flex-wrap: wrap; margin-top:20px;}
#top #solution .btn_z_j a:nth-of-type(n+2){margin-left: 0;margin-top: 15px;}
#top #solution .present{margin-top: 30px;}
}


/* INFOGRAPHICS */
#top #infographics{padding-bottom: 150px;}
#top #infographics::after{content: "";display: block;clear: both;}
#top #infographics h3{padding-top: 110px;}

#top #infographics .infographics_item{float: right;flex-wrap: wrap;width: 760px;}

.infographics_item{flex-wrap: wrap;background: #0086d9;}
.infographics_item li{border: 5px solid #0086d9;width: 380px;height: 340px;color: #0086d9;text-align: center;background: #fff;}
.infographics_item li:nth-of-type(1){border-top:none;border-left-width:10px;}
.infographics_item li:nth-of-type(2){border-top:none;border-right-width:10px;animation-delay: 0.2s;}
.infographics_item li:nth-of-type(3){border-left-width:10px;border-bottom-width:10px;}
.infographics_item li:nth-of-type(4){border-right-width:10px;border-bottom-width:10px;animation-delay: 0.2s;}
.infographics_item li h4{margin-top: 20px;font-size: 30px;line-height: 1.2;font-weight: 500;}
.infographics_item li h4.second{margin-top: 0;}
.infographics_item li h4 strong{font-size: 87px;font-family: 'Roboto', sans-serif;font-weight: 600;}
.infographics_item li h4 big{font-size: 50px;font-weight: 500;}
.infographics_item li h4 .sub{font-size: 20px;}
.infographics_item li .note{position: absolute;bottom: 10px;left: 10px;}

@media only screen and (max-width: 1200px) {
#top #infographics .infographics_item{width: 55%;}
#top #infographics .infographics_item li{width: 50%;}
#top #infographics .infographics_item li h4 .sub {font-size: 12px;}
}

@media only screen and (max-width: 1024px) {
#top #infographics{padding-bottom: 100px;display: flex;flex-wrap: wrap;}
#top #infographics::after{content: "";display: block;clear: both;}
#top #infographics h3{padding-top: 40px;}

#top #infographics .infographics_item{float: none;flex-wrap: wrap;width: 100%;order: 2;border: 10px solid #0086d9;margin-top: 30px;}
.infographics_item{width: 100%;border: 10px solid #0086d9;margin-top: 30px;}
.infographics_item li{border: 5px solid #0086d9;width: 50%;height: auto;color: #0086d9;text-align: center;padding: 8px 5px 5px 5px;}
.infographics_item li:nth-of-type(1){border-top:none;border-left-width:10px;}
.infographics_item li:nth-of-type(2){border-top:none;border-right-width:10px;}
.infographics_item li:nth-of-type(3){border-left-width:10px;border-bottom-width:0;}
.infographics_item li:nth-of-type(4){border-right-width:10px;border-bottom-width:0;}
.infographics_item li h4{margin-top: 0;font-size: 18px;line-height: 1.2;}
.infographics_item li h4 strong{font-size: 50px;}
.infographics_item li h4 big{font-size: 27px;}
.infographics_item li h4 .sub {font-size: 12px;}
.infographics_item li .note{position: static;text-align: left;margin-top: 5px;}
}


/* WORKS */
#top #works{padding-bottom: 150px;}
#top #works .arrow{position: absolute;top:-150px;left: 0;width: 100%;} 
#top #works ul.wrap1200{padding-top: 200px;}

@media only screen and (max-width: 768px) {
#top #works{padding-bottom: 40px;}
#top #works .arrow{top:-80px;} 
#top #works ul.wrap1200{padding-top: 110px;}
#top #works li:nth-of-type(n+2){margin-top: 30px;}
}


/* EXPAND */
#top #expand{padding-bottom: 150px;}
#top #expand{background: url("../img/expand_bk.png") no-repeat;background-position: bottom center;background-color: #0086d9;}
#top #expand .arrow{margin-top: 90px;}
#top #expand ul.wrap1200{margin-top: 90px;}

@media only screen and (max-width: 768px) {
#top #expand{padding-bottom: 40px;}
#top #expand{background: url("../img/expand_bk.png") no-repeat;background-position: bottom center;}
#top #expand .arrow{margin-top: 30px;}
#top #expand ul.wrap1200{margin-top: 20px;}
#top #expand li:nth-of-type(n+2){margin-top: 30px;}
}


/* 251121 Add */
#top #top_main p.wow.fadeInLeft {
	color: #0086d9;
}
#top #top_main p.wow.fadeInLeft::before {
	background: #fcff00;
}
#top .philosoph {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width: 768px) {
	#top #top_main p.wow.fadeInLeft span::before {
		background: #fcff00;
	}
	#top .philosoph {
		margin-top: 1em;
	}
}
@media only screen and (min-width: 769px) {
	#top .philosoph {
		max-width: 700px;
		margin-top: 3em;
	}
}