@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　index
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
#Header .logo,
#Header > div{
	opacity: 0;
	transition-delay: 2.5s;
	transition-duration: 1s;	
}
#Header.loaded .logo,
#Header.loaded > div{
	opacity: 1;	
}
#Gnav .gnav > li > p a,
#Gnav .gnav > li > p span{
  color: #333;
}
#Gnav .gnav > li > p span{
   background-image: url(../img/common/arw_down.svg); 
}
.content{
  background: #FFF;
  padding-bottom: 0;  
}

/*--------------------------------------------------------------------------
   Mv
---------------------------------------------------------------------------*/
#Mv{
	position: relative;
	overflow:hidden;
	height: 685px;
	background:url(../img/home/bg_mv_pc.jpg) no-repeat center center;
	background-size: cover;
}

#Mv .txt-area{
  position: absolute;
  left: 40px;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  color: #FFF;
  text-shadow: 0 0 20px rgba(0,0,0,.6);  
}
#Mv .txt-area h1{
  margin-bottom: 25px;
  font-size: 4.6rem;
  font-weight: normal;
  line-height: 1;  
}
#Mv .txt-area .txt{
  font-size: 2rem;
  line-height: 2; 
}

.prologue-screen01,
.prologue-screen02{
	position: absolute;
	left: -16vh;
	width: calc(100% + 32vh);
	height: 100%;
	transition: all 1s cubic-bezier(.04, .65, .08, 1) 1s;
	transform: skewX(18deg);
	transform-origin: right center;
}

.prologue-screen01{
    z-index: 2;
    background-color: rgba(0, 119, 211, .76);
		transition-delay: .5s;
}
.prologue-screen02{
	z-index: 3;
	background-color: rgba(0, 119, 211, .76);
}


#Mv.loaded .prologue-screen01{
	left: calc(-98% - 32vh);
}
#Mv.loaded .prologue-screen02{
	left: calc(-60% - 32vh);
}

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* concept
-----------------------------------------------------------------*/
.concept{
  padding: 105px 0 115px;
  background:url(../img/home/bg_concept.png) no-repeat center top #f4f7f8;
  background-size: 100% auto;
  position: relative;
}
.concept .inner{
  position: relative;
  z-index: 1;
}
.concept h2{
	margin-bottom: 45px;	
}
.concept h2 + .txt{
	margin-bottom: 45px;
	text-align: center;
	font-size: 1.5rem;
	line-height: 2.1;
}
.concept .concept-list{
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto 50px;	
}
.concept .concept-list li{
	max-width: 320px;
	width: calc((100% - 20px)/3);
	padding: 40px 15px;
	text-align: center;	
}
.concept .concept-list .num{
	margin-bottom: 10px;
	line-height: 1;
	font-size: 3.5rem;
}
.concept .concept-list .ico{
	position: relative;
	margin-bottom: 20px;
	line-height: 0;	
}
.concept .concept-list .ico .pict{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.concept .concept-list h3{
	margin-bottom: 10px;
	line-height: 1.5;	
}
.concept .concept-list h3 .ja{
	display: block;
	font-size: 2.2rem;
	letter-spacing: .3em;
}
.concept .concept-list h3 .en{
	font-size: 1.3rem;
	letter-spacing: .08em;
}
.concept .concept-list .txt{
	font-size: 1.4rem;
	line-height: 1.9;	
}
.concept .bnr-lisence{
	text-align: center;	
}
.concept .bnr-lisence img{
	display: inline-block;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	transition: .3s;	
}
.concept .bnr-lisence a:hover{
	opacity: .7;	
}
.concept .bg-polygon{
  width: 100%;
  height: 30vw;
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: 0;
}
.concept .bg-polygon div{
  width: 100%;
  height: 100%;
}


@keyframes rotate-y {
  0%  {transform: rotateY(0);}
  100%  {transform: rotateY(180deg);}
}

@media screen and (min-width: 769px) {
	.concept .concept-list li:nth-child(2) .ico .bg img{
		animation-delay: 0.3s;
	}
	.concept .concept-list li:nth-child(3) .ico .bg img{
		animation-delay: 0.6s;
	}
	.concept .concept-list .mv .ico .bg img{
		animation: rotate-y 1s linear 2;
		animation-play-state: running;
	}
	.concept .concept-list .ico .pict img{
		display: inline-block;
		transform: translate(0,50px);
		opacity: 0;
		transition-duration: 1s;
		transition-delay: .8s;
	}
	.concept .concept-list .mv .ico .pict img{
		transform: translate(0,0);
		opacity: 1;
	}
	.concept .concept-list li:nth-child(2) .ico .pict img{
		transition-delay: 1.1s;
	}
	.concept .concept-list li:nth-child(3) .ico .pict img{
		transition-delay: 1.4s;
	}
}



/* topics
-----------------------------------------------------------------*/
.topics{
	padding: 55px 0;
	background:url(../img/home/bg_topics.png) no-repeat right top;	
}
.topics .layout-box{
	justify-content: flex-start;
	align-items: center;	
}
.topics .ttl-area{
	padding: 25px 8% 35px 0;
	border-right: 1px solid #333;
}
.topics h2{
	margin-bottom: 40px;
}
.topics h2 .en{
	margin-bottom: 10px;
}
.topics .ttl-area .btn{
	width: 315px;
}
.topic-list{
	padding-left: 8%;
}

/* service
-----------------------------------------------------------------*/
.service{
	padding: 100px 0 80px;
	background: url(../img/home/bg_service_pc.jpg) no-repeat center center;
	background-size: cover;	
}
.service h2{
	margin-bottom: 40px;	
}
.service .service-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.service .service-list .card::before {
    left: 13%;
    width: 76%;
}
.service .service-list li{
	max-width: 380px;
	width: calc((100% - 60px)/3);
	padding: 35px 2.5% 45px;
    border-radius: 3px;
}
.service .service-list li:nth-child(n+2){
	margin-left: 30px;
}
.service .service-list li:nth-child(n+4){
	margin-top: 30px;
}
.service .service-list .ophover{
	display: inline-block;	
}
.service .service-list h3{
	margin-bottom: 25px;
	text-align: center;
	font-size: 2rem;
	line-height: 1;
}
.service .service-list h3 span{
	padding: 0 25px;
	/*background: url(../img/common/arw_box.svg) no-repeat right center;*/
	/*background-size: 12px auto;	*/
}
.service .service-list .pic{
	margin-bottom: 5px;
}
.service .service-list .txt-link{
	border-bottom: 1px solid #d9d9d9;
}
.service .service-list .txt-link a{
	position: relative;
	display: block;
	padding: 20px 0;
	line-height: 1.4;
	font-size: 1.4rem;	
}
.service .service-list .txt-link a::after{
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 17px;
	height: 5px;
	content: "";
	background:url(../img/common/arw_btn.svg) no-repeat;
	background-size: 100% auto;
	transition: .3s;	
}
.service .service-list .txt-link a:hover::after{
	right: 4px;
}

/* access
-----------------------------------------------------------------*/
.access{
	padding: 90px 0 0;	
}
.access h2{
	margin-bottom: 25px;	
}
.access .address{
	width: 70%;
    max-width: 1000px;
    border: 1px solid #d9d9d9;
	margin: 35px auto;
    padding: 1.2rem 1.5rem;
    text-align: center;
}
.access .address span{
	font-size: 120%;
}
.access #gmap_area{
	height: 420px;
}























/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#Header > div{
		opacity: 1;
	}
	#Header.loaded .logo{
		opacity: 1;	
	}
  #Header .logo .original{
		opacity: 1;  
	}
	#Header .logo .white{
		opacity: 0;
	}
	#Gnav .gnav > li > p span{
		 background-image: none; 
	}
	#Gnav .gnav > li > p a,
	#Gnav .gnav > li > p span{
		color: #fff;
	}
	
	
/*--------------------------------------------------------------------------
   Mv
---------------------------------------------------------------------------*/
	#Mv{
		height: 117.19vw;
		background-image:url(../img/home/bg_mv_sp.jpg);
	}
	
	#Mv .txt-area{
		left: 3.26vw;
		top: auto;
		bottom: 4.56vw;
		transform: none;
	}
	#Mv .txt-area h1{
		margin-bottom: 10px;
		font-size: 2.6rem;
	}
	#Mv .txt-area .txt{
		font-size: 1.2rem;
		line-height: 1.8; 
	}
	
	.prologue-screen01,
	.prologue-screen02{
		position: absolute;
		left: 0;
		top: auto;
		width: 100%;
		height: calc(117.19vw + 26.79vw);
		transition: all 1s cubic-bezier(.04, .65, .08, 1) 1s;
		transform: translateY(-15%) skewY(12deg);
		transform-origin: left bottom;
	}
	
	#Mv .prologue-screen01{
			transition-delay: 0;
	}
	#Mv .prologue-screen02{
			transition-delay: 1.5s;
	}
	#Mv.loaded .prologue-screen01{
		left: 0;
		transform: translateY(55%) skewY(12deg);
	}
	#Mv.loaded .prologue-screen02{
		left: 0;
		transform: translateY(50%) skewY(12deg);
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* concept
-----------------------------------------------------------------*/
	.concept{
		padding: 40px 0 55px;
		background-position: center top -5vw;
		background-size: 180% auto;   
	}
	.concept h2{
		margin-bottom: 30px;	
	}
	.concept h2 + .txt{
		margin-bottom: 25px;
		font-size: 1.4rem;
		line-height: 2.0;
		text-align: justify;
	}
	.concept .concept-list{
		display: block;
        width: 94%;
		max-width: 460px;
		margin: 0 auto 40px;	
	}
	.concept .concept-list li{
		max-width: 100%;
		width: 100%;
		padding: 30px 25px;
		text-align: left;	
	}
	.concept .concept-list li::before{
		left: 0;
		top: 15px;
		display: block;
		width: 4px;
		height: calc(100% - 30px);
		clip-path: polygon( 0% 0%, 100% 3px, 100% calc(100% - 3px) , 0% 100% );
		content: "";
		background: #237ac5;			
	}
	.concept .concept-list li:nth-child(n+2){
		margin-top: 20px;
	}
	.concept .concept-list .ttl{
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	.concept .concept-list .num{
		margin: 0 10px 0 0;
		line-height: 1;
		font-size: 4rem;
	}
	.concept .concept-list .ico{
		position: absolute;
		right: 5%;
		top: 50%;
		transform: translateY(-50%);
		margin-bottom: 0;
		width: 80px;
		opacity: .2;
	}
	.concept .concept-list .ico .pict{
		padding: 0 3px;
	}
	.concept .concept-list h3{
		margin-bottom: 0;
		line-height: 1.5;	
	}
	.concept .concept-list h3 .ja{
		display: inline-block;
		vertical-align: middle;
		padding-right: 5px;
	}
	.concept .concept-list h3 .en{
		padding-top: 0.5em;
	}
	.concept .concept-list .txt{
		font-size: 1.4rem;
		line-height: 1.8;	
	}
	.concept .bnr-lisence{
		text-align: center;	
	}
	.concept .bnr-lisence img{
		display: inline-block;
		box-shadow: 0 0 10px rgba(0,0,0,.1);
		transition: .3s;	
	}
	.concept .bnr-lisence a:hover{
		opacity: .7;	
	}
    .concept .bg-polygon{
        height: 50vw;
    }


/* topics
-----------------------------------------------------------------*/
	.topics{
		padding: 50px 0 55px;
		background:url(../img/home/bg_topics.png) no-repeat right bottom;
		background-size: 100% auto;	
	}
	.topics .layout-box{
		display: block;
	}
	.topics .ttl-area{
		padding: 0;
		margin-bottom: 20px;
		border-right: none;
	}
	.topics h2{
		margin-bottom: 0;
	}
	.topics .btn{
		width: 100%;
	}
	.topic-list{
		margin-bottom: 20px;
    padding-left: 0;
  }



/* service
-----------------------------------------------------------------*/
	.service{
		padding: 60px 0 50px;
		background-image: url(../img/home/bg_service_sp.jpg);
	}
	.service h2{
		margin-bottom: 40px;	
	}
	.service .service-list{
		display: block;
	}
	.service .service-list .card::before {
			left: 20px;
			width: calc(100% - 40px);
	}
	.service .service-list li{
		max-width: 540px;
		width: 100%;
		margin: 0 auto;
		padding: 30px 20px;
	}
	.service .service-list li:nth-child(n+2){
		margin: 20px auto 0;
	}
	.service .service-list li:nth-child(n+4){
		margin-top: 20px;
	}
	.service .service-list h3{
		margin-bottom: 15px;
	}
	.service .service-list h3 span{
		padding: 0 20px;
	}
	.service .service-list .txt-link a{
		padding: 15px 0;
	}
	.service .service-list .txt-link a:hover::after{
		right: 9px;
	}

/* access
-----------------------------------------------------------------*/
	.access{
		padding: 40px 0 0;	
	}
	.access h2{
		margin-bottom: 15px;	
	}
	.access .address{
		width: 90%;
		border: 1px solid #d9d9d9;
		margin: 25px auto 15px;
        line-height: 1.5;
	}
	


}