@charset "utf-8";

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

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.ttl-top-sec{
	line-height: 1.2;
	font-weight: normal;
}
.ttl-top-sec .en{
	display: block;
	font-size: 10rem;
	letter-spacing: .04em;
}
.ttl-top-sec .ja{
	display: block;
	font-size: 1.6rem;
	letter-spacing: .02em;
}


/* Mv
-----------------------------------------------------------------*/
#Mv{
	position: relative;
	color: var(--light);
	line-height: 0;
}
#Mv::before {
    position: absolute;
    left: 0;
    top: 0;
		z-index: 100;
    display: block;
    width: 100%;
    height: 400px;
    content: "";
		background: linear-gradient(180deg,rgba(97, 47, 49, .6) 0%, rgba(97, 47, 49, 0) 80%);
    transition: .5s;
}
#Mv h1{
	position: absolute;
	left: 4vw;
	bottom: 50px;
	line-height: 1;	
}
#Mv h1 .ja{
	display: block;
	margin-bottom: 20px;
	font-size: 3rem;
	letter-spacing: .3em;
}
#Mv h1 .en{
	display: block;
	font-size: 15.6rem;
	letter-spacing: .06em;
}
.mv-slider .slider-item{
	position: relative;
	line-height: 0;
}
.mv-slider .slider-item img{
	width: 100%;
	height: 100vh;
	height: 100dvh;
	object-fit: cover;
}
.mv-slider .slider-item .caption{
	position: absolute;
	right: 10px;
	bottom: 10px;
	line-height: 1.4;
}
.slider-dots {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 500;
  width: 100%;
	height: 5px;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
}
.slider-dots li{
	position: absolute;
	display: block;
	width: 100%;
	height: 5px;
}
.slider-dots button{
	position: relative;
	width: 100%;
	height: 5px;
	border: 0;
	background: transparent;
	text-indent: -9999px;
}
.slider-dots button::after{
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	display: block;
	width: 0%;
	height: 100%;
	background: var(--gold);
	opacity: 0;
}
.slider-dots .slick-active button::after{
	opacity: 1;
	animation: progress 5s linear forwards;
}

@keyframes progress {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}


/* sec-information
-----------------------------------------------------------------*/
.sec-information{
  scroll-margin-top: 95px;
	padding: 160px 0 0;
}
.sec-information .ttl-top-sec{
	flex-shrink: 0;
	margin: 0 20px 20px 0;
}
.sec-information .ttl-top-sec .en{
	font-size: 4.6rem;
}
.sec-information .ttl-top-sec .ja{
	font-size: 1.6rem;
}
.sec-information .information-list{
	max-width: 724px;
	width: 65%;
	border-top: 1px solid #E2E2E2;
}
.sec-information .information-list > div{
	padding: 25px 0;
	border-bottom: 1px solid #E2E2E2;
	letter-spacing: .05em;
}
.sec-information .information-list dt{
	font-size: 1.4rem;
}
.sec-information .information-list dd{
	font-size: 1.6rem;
}
.sec-information .information-list dd a{
  text-decoration: underline;  
}
.sec-information .information-list dd a:hover{
  text-decoration: none;  
}


/* intro
-----------------------------------------------------------------*/
.contents-scroll-area{
	position: relative;
}
.logo-k{
	position: sticky;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	pointer-events: none;
}
.logo-k.on{
	opacity: .5;
}
.intro{
	position: relative;	
	z-index: 1200;
	padding: 100px 0 200px;
	text-align: center;
}
.intro .inner{
	background: rgba(255,255,255,.5);	
}
.intro  h2{
	margin-bottom: 100px;
	font-size: 3.6rem;
	letter-spacing: .5em;
	line-height: 1.7;
}
.intro .txt{
	font-size: 2rem;
	letter-spacing: .4em;
	line-height: 2.2;
}
.intro .txt + .txt{
	margin-top: 50px;
}


/* features
-----------------------------------------------------------------*/
.features{
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	background: no-repeat center center;
	background-size: cover;
	color:  var(--light);
}
.features .ttl-area{
	position: absolute;
	left: 4.4vw;
	bottom: 90px;	
}
.features .ttl-cont{
	margin-bottom: 80px;
}
.ttl-cont{
	line-height: 1;
}
.ttl-cont .en{
	display: block;
	margin-bottom: 25px;
	font-size: 10rem;
	letter-spacing: .04em;
}
.ttl-cont .ja{
	display: block;
	font-size: 1.6rem;
	letter-spacing: .2em;
}
.features .ttl-area .btn-more a {
    display: flex;
    align-items: center;
    padding: 20px 0;
    color: var(--light);
    line-height: 1;
    font-size: 1.8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.features .ttl-area .btn-more .ttl {
    width: 8em;
}
.features .ttl-area .btn-more .arw {
    width: 124px;
    overflow: hidden;
}
.features .ttl-area .btn-more .arw img{
   display: block; 
}
.features .ttl-area .btn-more a:hover .arw img{
  animation: 1s ease 0s 1 normal none running arwmove;  
}

@keyframes arwmove {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}


/* brand -----------------------------*/
.brand{
	background-image: url(../img/top/img_brand.jpg);	
}

/* property -----------------------------*/
.property{
	background-image: url(../img/top/img_property.jpg);
}

/* after service -----------------------------*/
.after-service{
	background-image: url(../img/top/img_support.jpg);	
}


/* company
-----------------------------------------------------------------*/
.company{
	padding: 90px 0 180px;
}
.company .inner{
	max-width: 1460px;
}
.company .layout-box{
	align-items: center;
}
.company .txt-area{
	max-width: 481px;
	margin-right: 20px;
	text-align: center;
}
.company h2{
	margin-bottom: 65px;
}
.company .ttl-cont .en{
	font-size: 7.5rem;
}
.company .txt{
	margin-bottom: 40px;
}
.company .btn-base a:hover strong{
	background: url(../img/common/ft-logo.svg) no-repeat center center;
	background-size: 100% auto;
}
.company .btn-base a strong img{
	transition: .3s;
}
.company .btn-base a:hover strong img{
	opacity: 0;
}
.company .pic{
	max-width: 793px;
}
















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	
	.ttl-top-sec .en{
		font-size: 5.7rem;
	}
	.ttl-top-sec .ja{
		margin-top: 3px;
		font-size: 1.4rem;
	}
	

/* Mv
-----------------------------------------------------------------*/
#Mv::before {
    height: 200px;
}
	#Mv h1{
		left: 20px;
		bottom: 50px;
	}
	#Mv h1 .ja{
		margin-bottom: 15px;
		font-size: 1.6rem;
	}
	#Mv h1 .en{
		font-size: 6.8rem;
	}
	.mv-slider .slider-item .caption{
		right: 10px;
		bottom: 15px;
		line-height: 1.4;
	}



/* sec-information
-----------------------------------------------------------------*/
	.sec-information{
    scroll-margin-top: 95px;
		padding: 40px 0;
	}
	.sec-information .layout-box{
		display: block;
	}
	.sec-information .ttl-top-sec{
		margin: 0 0 30px;
	}
	.sec-information .ttl-top-sec .en{
		font-size: 3.6rem;
	}
	.sec-information .ttl-top-sec .ja{
		font-size: 1.4rem;
	}
	.sec-information .information-list{
		max-width: none;
		width: 100%;
	}
	.sec-information .information-list > div{
		padding: 15px 0;
	}
	.sec-information .information-list dd{
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.sec-information .information-list dd a{
		text-decoration: underline;  
	}
	.sec-information .information-list dd a:hover{
		text-decoration: none;  
	}


/* intro
-----------------------------------------------------------------*/
	.logo-k img{
		width: 80px;
	}
	.intro{
		padding: 50px 0 100px;
	}
	.intro  h2{
		margin-bottom: 50px;
		font-size: 2rem;
		letter-spacing: .5em;
		line-height: 1.7;
	}
	.intro  h2 > span + span{
		margin-top: 10px;
		padding-left: .8em;
	}
	.intro .txt{
		font-size: 1.5rem;
		letter-spacing: .3em;
		line-height: 2.2;
	}
	.intro .txt + .txt{
		margin-top: 50px;
	}


/* features
-----------------------------------------------------------------*/
	.features .ttl-area{
		left: 30px;
		bottom: 60px;	
	}
	.features .ttl-cont{
		margin-bottom: 40px;
	}
	.ttl-cont{
		line-height: 1;
	}
	.ttl-cont .en{
		display: block;
		margin-bottom: 10px;
		font-size: 5.4rem;
		letter-spacing: .04em;
		line-height: 1.1;
	}
	.ttl-cont .ja{
		font-size: 1.2rem;
	}
	.features .ttl-area .btn-more a {
		font-size: 1.5rem;
	}
	.features .ttl-area .btn-more a:hover .arw img{
		animation: none;  
	}


/* brand -----------------------------*/
	.brand{
		background-image: url(../img/top/img_brand.jpg);	
	}

/* property -----------------------------*/
	.property{
		background-image: url(../img/top/img_property.jpg);
	}

/* after service -----------------------------*/
	.after-service{
		background-image: url(../img/top/img_support.jpg);	
	}


/* company
-----------------------------------------------------------------*/
	.company{
		padding: 60px 0;
	}
	.company .layout-box{
		display: block;
	}
	.company .txt-area{
		max-width: none;
		margin: 0 0 30px;
	}
	.company h2{
		margin-bottom: 40px;
	}
	.company .ttl-cont .en{
		font-size: 4rem;
	}
	.company .txt{
		margin-bottom: 40px;
	}
	.company .btn-base a:hover strong{
		background: none;
	}
	.company .btn-base a:hover strong img{
		opacity: 1;
	}



}