@charset "UTF-8";

/*-----------------------------------------------
__Header
-----------------------------------------------*/
header{
	height: 100px;
}
#nav-toggle, #nav-bg{
	display: none;
}
#top-head-inner{
	width: 96%;
	height: 100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1;
}
#head-logo{
	width: 20%;
	min-width: 330px;
	padding-bottom: 10px;
}
#head-logo a{
	display: block;
}
#global-nav {
	width: 80%;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

#global-nav p{
	color: #0e8efb;
	font-size: 90%;
	width: 30%;
	margin-bottom: 0;
}
#global-nav .pc_no{
	display: none;
}
#gl_nv{
	width: 50%;
}
#gl_nv.demo{
	justify-content: flex-end;
}
#gl_nv.demo > li{
	min-width: 150px;
	text-align: right;
}


#tr_nv{
	width: 5%;
	min-width: 60px;
}

#gl_nv, #tr_nv{
	display: flex;
	justify-content: space-between;
}
#gl_nv li a,
#tr_nv li a.current{
	color: #333;
}
#gl_nv li a:hover,
#tr_nv li a:hover{
	color: #0e8efb;
}
#tr_nv li a{
	color: #ccc;
	padding:5px;
	text-align: center;
}
#tr_nv li a.current{
	border: 7px solid #fde800;
	border-radius: 100%;
}

/*-----------------------------------------------
__Top_img
-----------------------------------------------*/
#top_img{
	position: relative;
	padding-right: 26%;
}
#top_img figure{
	width: 100%;
	height: 760px;
	border-radius: 0 0 130px 0;
	overflow: hidden;
}
#top_img img{
	width: 100%;
	height: 100%;
}
#top_img dl{
	position: absolute;
	right: 5%;
	bottom: 10%;
	z-index: 10;
	font-weight: bold;
}
#top_img dl::before{
	content: "";
	position: absolute;
	width: 160px;
	height: 160px;
	border: 60px solid #fde800;
	border-radius: 100%;
	right: -160px;
	top: -130px;
	z-index: -1;
}
#top_img dt{
	font-size: 3.5em;
	line-height: 1.2;
	color: #0e8efb;
}
#top_img dd{
	margin-top: 1em;
	line-height: 2;
	font-size: 110%;
	color: #354E60;
}

/*-----------------------------------------------
__Main
-----------------------------------------------*/
#service{
	position: relative;
	padding:80px 0;
}
#service > p{
	position: absolute;
	z-index: -2;
	font-weight: bold;
	font-size: 9vw;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: #f1f5f8;
	left: 0;
	top: 0.5em;
	-webkit-transition: all 5s ease;/*アニメーションの変化*/
    -moz-transition: all 5s ease;
    -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
    transition: all 5s ease;
}
.scroll01{
	transform: translateX(0);
}
.scroll02{
	transform: translateX(-10%);
}
.scroll03,.scroll04{
	transform: translateX(-20%);
}
#service h2{
	width: 25%;
	min-width: 300px;
}

#service article{
	font-weight: bold;
	font-size: 110%;
	max-width: 1180px;
}
#service article p{
	margin-bottom: 3em;
}
#service article .fl_box{
	flex-wrap: wrap;
	margin-bottom: 30px;
}
#service article .fl_box > li{
	width: 28%;
	margin-bottom: 60px;
	padding:50px 30px 80px 30px;
	box-sizing: border-box;
	border-radius: 0 0 30px 0;
	border: 1px solid #f5f5f5;
	background: #fff;
	box-shadow: 0 0 30px 0 rgba(0,0,0,0.05);
}
#service article .fl_box > li:not(:nth-of-type(3)){
	margin-right: 5%;
}
#service article img{
	display: block;
	margin: 0 auto 20px auto;
}

#work{
	position: relative;
	padding: 80px 0;
}
#work::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 75%;
	background: #F4F9FF;
	left: 0;
	top: 0;
}
#work section.wrap{
	width: 100%;
}
#work h2{
	text-align: center;
	margin-bottom: 0.7em;
}
#work dl{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-weight: bold;
	text-align:center;
	padding: 30px 40px;
	box-sizing: border-box;
	border: 8px solid #fff;
	border-radius: 0 0 30px 0;
	transition: all ease .3s;
}
#work dl::before{
	counter-increment:count;
	content:"0"counter(count);
	position: absolute;
	right: -30px;
	top: -30px;
	line-height: 30px;
	width: 30px;
	height: 30px;
	font-size: 1.2em;
	letter-spacing: 0.05em;
	padding: 8px;
	border-radius: 100%;
	background: #fff;
	border: 8px solid #fff;
	color: #212121;
	transition: all ease .3s;
}
#work dt{
	font-size: 1.2em;
}
#work dl:hover{
	color:#fde800 ;
	border-color: #fde800;
}
#work dl:hover::before{
	border: 8px solid #fde800;
}

#work a:-webkit-any-link{
	cursor:none;
}

/* swiper */
.swiper-wrapper{
	padding: 0 400px 0 30% ;
	padding-bottom: 100px ;
	box-sizing: border-box;
	counter-reset:count;
}
.swiper-slide{
	height:auto !important;
	width: 800px !important;
	position: relative;
}

.swiper-scrollbar{
	background: #fff !important;
	border: 2px solid #333;
	border-radius: 20px !important;
}
.swiper-container-horizontal>.swiper-scrollbar{
	height: 10px !important;
	left: 0 !important;
	width: 80% !important;
}
.swiper-scrollbar-drag{
	background: #de1819 !important;
}

.swiper-pagination{
	counter-reset:num;
}
.swiper-pagination-bullet{
	margin: 0 auto !important;
	width: 40px !important;
	height: 40px !important;
	opacity: 1 !important;
	background: none !important;
	transition: all ease .3s;
	border: 10px solid #fff;
}
.swiper-pagination-bullet:nth-of-type(n+4){
	display: none !important;
}

.swiper-pagination-bullet-active{
	border-color:#fde800;
}
.swiper-pagination-bullet::before{
	counter-increment:num;
	content:"0"counter(num);
	font-weight: bold;
	line-height: 40px;
	color: #212121;
}

/*modal*/
.modal-inner h3{
	font-size: 1.8em;
	border-bottom: 3px solid #eee;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.modal-inner h3 small{
	display: block;
	margin-top: 0.3em;
	font-size: 0.6em;
}
.modal-inner a{
	font-weight: bold;
	color: #0e8efb;
	transition: all ease .3s;
	display: inline-block;
	border-bottom: 2px solid #0e8cfb00;
}
.modal-inner a:hover{
	border-color: #0e8efb;
}

#company{
	background: #0e8efb;
	padding: 20px 20% 20px 0;
}
#company section.fl_box{
	padding: 60px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 0 0 100px 0;
	margin-bottom: 20px;
}
#company h2{
	width: 30%;
	min-width: 300px;
}
#company tr:not(:last-child){
	border-bottom: 1px solid #ddd;
}
#company th,#company td{
	padding: 30px 10px;
}
#company th{
	width: 25%;
}
#company td ul.fl_box > li:last-of-type{
	margin-left: 30px;
}
#company td a{
	display: block;
	text-align: center;
	transition: all ease .3s;
}
#company td a:hover{
	transform: translateY(-10px);
}
#company td a img{
	display: block;
	padding-bottom: 20px;
	margin:0 auto 10px auto;
	border-bottom: 2px solid #fff;
	transition: all ease .3s;
}
#company td a:hover img{
	border-color: #0e8efb;
}
#company td a span{
	display: block;
	font-weight: bold;
	color: #fff;
	transition: all ease .3s;
}
#company td li:last-of-type a span{
	font-size: 0.8em;
}
#company td a:hover span{
	color: #354E60;
}


#contact a{
	position: relative;
	display: block;
	padding: 60px 50px;
	margin-left:10px;
	box-sizing: border-box;
	border-radius: 40px;
	color: #fff;

	font-size: 2.4em;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.06em;
	transition: all ease .3s;
}
#contact a:hover{
	color: #fde800;
	background: #0b77d6;
}
#contact a small{
	display: block;
	font-size: 0.4em;
}
#contact a::before,
#contact a::after{
	content: "";
	position: absolute;
	top: 50%;
	transition: all ease .3s;
}
#contact a::before{
	top: 49%;
	right: 100px;
	width: 20px;
	height: 20px;
	border-right: 8px solid #fde800;
	border-top: 8px solid #fde800;

	transform: rotate(45deg) translateY(-50%);
}
#contact a::after{
	right: 50px;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	border: 15px solid #fde800;

	transform: translateY(-50%);
}
#contact a:hover::before{
	right: 90px;
	border-color: #fff;
	opacity: 0.5;
}
#contact a:hover::after{
	transform: translateY(-50%) translateX(10px);
	border-color: #fff;
	opacity: 0.5;
}

#contact_form .modal-inner{
	max-width: 600px;
}
#contact_form table{
	width: 100%;
	background: #fafafa;
	border-radius: 7px;
}
#contact_form tr{
	display: block;
	padding: 20px;
	box-sizing: border-box;
}
#contact_form td{
	display: block;
	box-sizing: border-box;
}
#contact_form th{
	display: block;
	margin-bottom: 10px;
}
#contact_form td img{
	margin-bottom: 10px;
}
#contact_form input,
#contact_form textarea{
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	box-sizing: border-box;
	background: #fff;
	border:2px solid #fff;
}
#contact_form textarea{
	resize: vertical;
	min-height: 100px;
}
#contact_form input:focus,
#contact_form textarea:focus{
	border-color: #555;
}
#contact_form input:focus::placeholder{
	color: #fff;
}
#contact_form button{
	display: block;
	border-radius: 10px;
	padding: 15px 10px;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	width: 80%;
	background: #fff;
	border: 3px solid #0e8efb;
	color:#0e8efb;
	margin: 30px auto 60px auto;
	transition: all ease .3s;
}
#contact_form button:hover,
#contact_form button:active{
	color: #fff;
	background:#0e8efb;
	transform: translateY(10px);
}

#policy dt{
	font-weight: bold;
}
#policy dd{
	padding: 0.5em 0 2em 0;
}
#policy dd ul > li{
	margin-left: 10px;
	position: relative;
	padding-left: 20px;
}
#policy dd ul > li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	border-radius: 100%;
	width: 6px;
	height: 6px;
	border: 3px solid #677d8b;
}

footer{
	box-sizing: border-box;
	padding: 50px 60px;
	font-weight: bold;
	color: #0e8efb;
}
footer a{
	float: right;
	color: #0e8efb;
	font-size: 90%;
	border-bottom: 2px solid #fff;
}
footer a:hover{
	border-color: #0e8efb;
}

/*-----------------------------------------------
__Common
-----------------------------------------------*/
h2{
	padding-top: 26px;
	color: #0e8efb;
	font-size: 2.4em;
	line-height: 1.4;
}
h2 span{
	display: inline-block;
	position: relative;
	z-index: 2;
}
h2 small{
	display: block;
	font-size: 0.4em;
}
h2 span::before{
	content: "";
	position: absolute;
	width: 34px;
	height: 34px;
	border: 14px solid #fde800;
	border-radius: 100%;
	right: -45px;
	top: -25px;
	z-index: -1;
}

.fl_box{
	display: flex;
}

ul.list > li{
	position: relative;
	padding-left: 25px;
	margin-bottom: 0.25em;
}
ul.list > li::before{
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background: #354E60;
	position: absolute;
	left: 0;
	top: 0.7em;
}



.cursor,
.follower {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0; 
  cursor: none;
  pointer-events: none;
}
 
.cursor {
  width: 8px;
  height: 8px;
  background-color: #0e8efb;
  z-index: 1001;
  transition: transform ease .1s;
}
 
.follower {
  width: 30px;
  height: 30px;
  border:8px solid #fde800;
  opacity: 0.7;
  z-index: 1000;
  transition: transform ease .15s;
}

.follower.is-active{
	transform: scale(2);
}

.follower.is-work{
	border: none;
	opacity: 1;
	transform: scale(1);

	width: 90px;
	height: 90px;
	background: url(../common_images/bg-drag.png) no-repeat center #0e8efb;
}
.follower.is-link{
	border: none;
	opacity: 1;
	transform: scale(1);

	width: 90px;
	height: 90px;
	background: url(../common_images/bg-check.png) no-repeat center #fde800;
}

 

.cursor.is-link,
.cursor.is-work,
.cursor.is-form,
.follower.is-form{
	display: none;
}

@media print{
	body{
		max-width: 1280px;
	}
	.cursor,
	.follower{
		display: none;
	}

}