@charset "UTF-8";


/*  共通
------------------------------------------------------------------------------ */

#first_contents{
	position:relative;
	top:0;
	z-index:0;
	width: 100vw;
	height: auto;
	min-height: 100vh;
	}

.first_svg_area{
	position: absolute;
	width:100%;
	max-width:600px;
	padding:0 20px;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
	}


#first_border{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 10px;
    background: #838cd5;
}


#main{
    position:relative;
	display: block;
	height:1200px;
	height: 100vh;
	background: url(../img/top/main_01.jpg) no-repeat;
	background-position:  center center;
	background-size: cover;
	overflow:hidden;
}


@media screen and (max-width:640px){
#main{
	height:600px;
	height: 100vh;
}
}


.bg_c{
    position: absolute;
	bottom:70px;
	right:0px;
	left:0px;
	margin:auto auto;
	width:100%;
	max-width:1343px;
	height:236px;
	background: url(../img/top/main_bg_c.png) no-repeat;
	background-position:  center center;
	background-size: cover;
	z-index:0;
}

.bg_l{
    position: absolute;
	bottom:0;
	left:10px;
	width:280px;
	height:139px;
	background: url(../img/top/main_bg_l.png) no-repeat center top;
}

.bg_r{
    position: absolute;
	bottom:0;
	right:10px;
	width:237px;
	height:247px;
	background: url(../img/top/main_bg_r.png) no-repeat center top;
}


.motion_bg{
    position: absolute;
	bottom:98px;
	right:0px;
	left:0px;
	margin:auto auto;
	width:100%;
	max-width:1343px;
	height:236px;
	overflow:hidden;
}


.car_bus{
    position: absolute;
    bottom:0;
    right:-200px;
	width:114px;
	height:47px;
	background: url(../img/top/bus.png) no-repeat center top;
	z-index:1;
}

.car_1{
    position: absolute;
    bottom:0;
    right:-67px;
	width:67px;
	height:31px;
	background: url(../img/top/car1.png) no-repeat center top;
	z-index:1;
}


.car_2{
    position: absolute;
    bottom:0;
    right:-63px;
	width:63px;
	height:43px;
	background: url(../img/top/car2.png) no-repeat center top;
	z-index:1;
}

.car_3{
    position: absolute;
    bottom:0;
    right:-81px;
	width:81px;
	height:34px;
	background: url(../img/top/car3.png) no-repeat center top;
	z-index:1;
}

.plane{
    position: absolute;
    bottom:-500px;
    left:-2000px;
	width:79px;
	height:20px;
	background: url(../img/top/plane.png) no-repeat center top;
	z-index:1;
}

@media screen and (max-width:640px){
.plane{ display:none;}
}

@media screen and (max-width:1326px){
    .bg_l{display:none;}
    .bg_r{display:none;}
    }


.svg_area{
	position:relative;
	margin:0 auto;
	max-width:600px;
	padding:0 20px;
	top:46%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
}

.cls-1,
.cls-2{
	fill: #FFF;
	stroke-dasharray: 2000;
    stroke-dashoffset: 0;
	fill-rule: evenodd;
	}


.cls-1{
	fill: #838cd5;
	stroke: #838cd5;
	stroke-width: 1;
	-webkit-animation: unionstar 4s ease-in 0s;
	animation: unionstar 4s ease-in 0s;
}

  @keyframes unionstar {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#838cd5;
      }
    }

    
#business{
	padding:4rem 7rem;
	transition-delay: .4s;
	transition: opacity 1.s;
	-moz-transition: opacity 0.4s;
	-webkit-transition: opacity 0.4s;
	-o-transition: opacity 0.4s;
}

@media screen and (max-width:768px) {
#business {padding: 3rem 3rem 0;}
}

@media screen and (max-width:460px) {
#business {padding: 6rem 2rem 0;}
}


.business_inn{
	position: relative;
	width:100%;
	padding-top:2rem;
	padding-bottom: 60px;
	align-items: center;
}

.bus_txt{
	width:50%;
	padding-right:2rem;
	padding-left:1rem;
	padding-top:20px;
	color:#222;
	line-height:2.6rem;
	font-size:1.4rem;
}

.bus_p01{
	width:50%;
	max-width:640px;
}

.bus_p01 img{
	width:100%;
}

.hn_wrap{
	width:90%;
	font-size:1.4rem;
	padding: 10% 4% 0 0;
}

.hn_wrap img{
	width:100%;
	margin-top: 2%;
}
.hn_wrap a{
	display: block;
	transition: .3s;
}
.hn_wrap a:hover{
	opacity: .8;
				filter:  contrast(105%) brightness(102%);
				-webkit-filter: contrast(105%) brightness(102%);
}


@media screen and (max-width:768px) {

.bus_txt{
	width:100%;
	float: none;
	padding-right:0;
	padding-top:20px;
	padding-bottom:2rem;
	line-height:2.4rem;
	padding-left:0;
}

.bus_p01{
	float: none;
	width:100%;
	max-width:640px;
	margin:0 auto;
}
.hn_wrap{
	width:100%;
	padding: 7% 0 0 0;
}


}

.slide1 { max-width:640px; margin:0 auto 15px; }
.slide1 .itemDisplay { background:#FFF}
.slide1 img { width:100%；}

.swiper-container{
	height: 100%;
	overflow: visible;
}

.swiper-button-prev{
background-image: url("../img/top/arrow_l.png");
left: -18px;
}

.swiper-button-next{
background-image: url("../img/top/arrow_r.png");
right: -18px;
}
.swiper-pagination-bullet {
	top: 10%;
	background: #6c6c6c;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{

	bottom: -20px !important;
}

.swiper-pagination-bullet-active {
  background: #3455e5;
}

.swiper-button-next, .swiper-button-prev{
	width: 44px;
  height: 44px;
	top:60%;
	background-size: 44px 44px;
	-webkit-transform: translateY(-60%);
	-moz-transform: translateY(-60%);
	-ms-transform: translateY(-60%);
	transform: translateY(-60%);

}