@charset "UTF-8";
/* CSS Document */

html{
	width: 100%;
	height: 100%;
	font-size: clamp(15px, 1.1vw, 17px);
}

body{
	-webkit-text-size-adjust: 100%;
	font-style: normal;
	color:#FFF;
	line-height: 1;
	font-weight: 500;
	background: #FFF;
	font-family: "Zen Kaku Gothic New", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "verdana", sans-serif;
}



#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    top:0;
    left:0;
	bottom: 0;
	right: 0;
	height: 100vh;
    z-index:9999;
	background: #FFF;
    overflow:hidden;
}


/*-------------------------------------------------------------*/


.wrapper{
	width: 100%;
	position: relative;
}


/*
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end {
  opacity: 0.0 !important;
}
*/
.gsap-marker-start{color: aqua !important;}

/*-------------------------------------------------------------*/


.header{
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 60;
}




.topMovie{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}


.vol{
	position: absolute;
	z-index: 10000;
	bottom:0.8em;
	right:1em;
	width: 2.5em;
	cursor: pointer;
}
.vol .on{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
}
.vol.oon .on{opacity: 1;}
.vol .off{opacity: 1;}

.vol.oon .off{opacity: 0;}




.topMovie .video-box{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100vh;
}
.topMovie .video-box video{
	/*
	min-width: 100%;
	min-height: 100vh;
	position: absolute;
	*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
	height: 100%;
}
video::-webkit-media-controls {
	display: none !important;
}



/*-----------*/

.header .contentsTop{
	position:fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 20;
	background: url("../images/main_pc.webp") center center;
	background-size: cover;
}




.header .scroll{
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	z-index: 200;
	opacity: 0;
	font-family: "DINPro-Medium";
	font-size: 1.6em;
	letter-spacing: 0.05em;
}
.header .scroll span{
	position: relative;
	display: block;
	width: 0.6em;
	height: 0.6em;
	margin: 0.3em auto 0;
	border-left: 0.1em solid #FFF;
	border-bottom: 0.1em solid #FFF;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.header .scroll span::before{
	content: '';
	position: absolute;
	top: 0.4em;
	left: -0.5em;
	width: 100%;
	height: 100%;
	border-left: 0.1em solid #FFF;
	border-bottom: 0.1em solid #FFF;
}
.header .scroll span::after{
	content: '';
	position: absolute;
	top: 0.8em;
	left: -0.9em;
	width: 100%;
	height: 100%;
	border-left: 0.1em solid #FFF;
	border-bottom: 0.1em solid #FFF;
}


.header .hhlogo{
    position:fixed;
    top: 2.0em;
    left: 3.2em;
    width: 8.0em;
	 z-index: 400;
     opacity: 0;
    -webkit-transition: opacity 1.4s;
    transition: opacity 1.4s;
}
.header.start .hhlogo{opacity: 1;}


.header .titlecopy .mainTitle{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: space-between;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	opacity: 0;
   /* -webkit-transition: opacity 1.4s;
    transition: opacity 1.4s;
	/*background: rgba(0,0,0,0.1);*/
}

.header .contentsTop .mainTitle{color:#E41919 }

.header.start .titlecopy .mainTitle{opacity: 1;}

.header .titlecopy .mainTitle h1{
	width: calc(50% - 9.4em);
	font-family: "DINPro-Medium";
	font-size: 1.5em;
	text-align: center;
	line-height: 1.3;
	/*background: rgba(0,0,0,0.3);*/
}
.header .titlecopy .mainTitle h1 em{
	display: block;
	font-size: 1.75em;
	margin-bottom: 0.8em;
}
.header .titlecopy .mainTitle h1 span{display: block;}


.header .titlecopy .mainTitle h2{
	width: calc(50% - 14em);
	font-size: 1.0em;
	line-height: 1.8;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	letter-spacing: 0.07em;
	/*background: rgba(0,0,0,0.3);*/
}


/*------*/


.header .titleBk{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 30;
	opacity: 0;
}

/*---------------------------------*/


.inWidth{
	width: 100%;
	max-width: 28em;
	margin: 0 auto;
}

.null{
	width: 100%;
	position: relative;
	top: 0;
	height: 400vh;
	z-index: 50;
}




/*---------------------------------*/


.lead{
	position:relative;
	width: 100%;
	height: 100vh;
	z-index: 100;
	pointer-events: none;
	background: rgba(255,255,255,0);
}


.lead .leadInner{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.38);
/*	opacity: 0;*/
}

.lead .box{
	position: absolute;
	top: 2em;
	bottom: 2em;
	left: 2em;
	right: 2em;
	background: rgba(0,0,0,0.38);
	display: flex;
	align-items: center;
	justify-content: center;
}

.lead .box .detail{
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.lead .box .detail h2{
	font-family: "DINPro-Medium";
	font-size: 3.2em;
	letter-spacing: 0.03em;
	white-space:nowrap;
}

.lead .box .detail h3{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	font-size: 1.4em;
	line-height: 1.6;
	letter-spacing: 0.07em;
	margin-top: 1.7em;
}
.lead .box .detail h3 span{
	display: block;
	width: 100%;
}
.lead .box .detail h3 span:first-child{text-align: left;}
.lead .box .detail h3 span:last-child{text-align: right;}

.lead .box .detail p{
	font-size: 1.15em;
	line-height: 1.75;
	letter-spacing: 0.05em;
	margin-top: 1.7em;
}

.lead .box .detail .lifaLogo{
	width: 8em;
	margin: 2em auto 0;
}

/*---------------------------------*/

.benefits{
	position:relative;
	width: 100%;
	z-index: 150;
	background: #000;
}
.benefits .beneSet{
	width: 100%;
	padding-top: 163%;
	position: relative;
	text-align: center;
	background-position: center center;
	background-size: cover;
}
.benefits .beneSet.fun01{background-image: url("../images/function01.webp");z-index: 5;}
.benefits .beneSet.fun02{background-image: url("../images/function02.webp");z-index: 10;}
.benefits .beneSet.fun03{background-image: url("../images/function03.webp");z-index: 15;}
.benefits .beneSet.fun04{background-image: url("../images/function04.webp");z-index: 20;}


.benefits .beneSet .beneTitle{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.benefits .beneSet .beneTitle h2{
	font-family: "DINPro-Medium";
	font-size: 3.1em;
	letter-spacing: 0.02em;
	margin-top: 1em;
	white-space:nowrap;
}
.benefits .beneSet .beneTitle .function{
	font-family: "DINPro-Medium";
	font-size: 1.4em;
	letter-spacing: 0.03em;
	margin-top: 1.2em;
}



.benefits .beneSet .beneBody{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.benefits .beneSet .beneBody h3{
	font-size: 2.65em;
	font-weight: 900;
	font-style: normal;
	text-align: center;
}
.benefits .beneSet .beneBody h3 span{
	display: inline-block;
	margin: 0 0.4em;
}
.benefits .beneSet .beneBody h4{
	font-family: "DINPro-Medium";
	font-size: 1.55em;
	letter-spacing: 0.03em;
	margin-top: 0.8em;
}
.benefits .beneSet .beneBody p{
	font-size: 0.92em;
	margin-top: 2em;
	letter-spacing: 0.05em;
}


.benefits .beneSet .lifaLogo{
	position: absolute;
	bottom: 3em;
	left: 0;
	right: 0;
	width: 8em;
	margin: 0 auto;
}

/*-----------*/


.styleLook{
	position:relative;
	width: 100%;
	z-index: 500;
	pointer-events: auto;
}
.styleLook .style{
	width: 100%;
	padding-top: 163%;
	position: relative;
	text-align: center;
	background-position: center center;
	background-size: cover;
}

.styleLook .style.ocean{background-image: url("../images/style_ocean.webp");}
.styleLook .style.life{background-image: url("../images/style_life.webp");}

.styleLook .style .styleBody{
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
}

.styleLook .style .styleBody h2{
	width: 100%;
	line-height: 1;
	font-family: "DINPro-Medium";
	font-size: 1.25em;
	letter-spacing: 0.03em;
	padding: 0.3em 0 0.5em;
	margin-bottom: 1.8em;
}
.styleLook .style.ocean .styleBody h2{background:rgba(206,92,61,0.6);}
.styleLook .style.ocean .styleBody h2 em{letter-spacing: 0.3em;padding-left: 0.3em;}
.styleLook .style.life .styleBody h2{background:rgba(15,43,93,0.6);}
.styleLook .style.life .styleBody h2 em{letter-spacing: 0.15em;padding-left: 0.15em;}
.styleLook .style .styleBody h2 em{
	display: block;
	font-size: 2.7em;
	margin-bottom: 0.2em;
}
.styleLook .style.ocean .styleBody p{font-size: 0.89em;letter-spacing: 0.15em;}
.styleLook .style.life .styleBody p{font-size: 1.06em;letter-spacing: 0.15em;}

.styleLook .style .styleBody .linkBT{
	margin: 3.5em auto 0;
	width: 15em;
}
.styleLook .style .styleBody .linkBT a{
	color: #FFF;
	display: block;
	font-family: "DINPro-Medium";
	font-size: 1em;
	line-height: 1;
	padding: 0.8em 0;
	border-radius: 2em;
	letter-spacing: 0.05em;
}
.styleLook .style.ocean .styleBody .linkBT a{background: #C84D36;}
.styleLook .style.life .styleBody .linkBT a{background: #0F2B5D;}

@media(min-width: 769px) {
.styleLook .style .styleBody .linkBT a{
-webkit-transition: background 0.4s, color 0.4s;
transition: background 0.4s, color 0.4s;
}
.styleLook .style.ocean .styleBody .linkBT a:hover{background: #FFF;color: #C84D36;}
.styleLook .style.life .styleBody .linkBT a:hover{background: #FFF;color: #0F2B5D;}
}



/*-----------*/

.technology{
	position:relative;
	width: 100%;
	z-index: 500;
}
.technology .swiperBox{
    width: 100%;
	overflow: hidden;
}
.technology .swiper-slide{
	background: #000;
	transform-style: preserve-3d;
}
.technology figure{
	position: relative;
	width: 100%;
}
.technology figure .num{
	position: absolute;
	top: 0.2em;
	right: 0.2em;
	z-index: 5;
	text-align: right;
	font-family: "DINPro-Medium";
	font-size: 5.6em;
	line-height: 1;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.technology .detail{
	width: 100%;
	height: 25em;
	text-align: center;
}
.technology .detail .the6{
	font-family: "DINPro-Medium";
	letter-spacing: 0.15em;
	margin-top: 2.2em;
}
.technology .detail .copy{
	font-size: 0.92em;
	letter-spacing: 0;
	line-height: 1.5;
	margin-top: 1.8em;
	height: 6em;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
}
.technology .detail .logo{
	width: 16em;
	margin: 0 auto;
}
.technology .detail .icon{
	width: 20em;
	margin: 1em auto 0;
}


.button-next{
	position: absolute;
	top: 23%;
	right: 0;
	width: 3em;
	height: 3em;
	z-index: 100;
	cursor: pointer;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.button-next::before{
	content: '';
	display: block;
	position: absolute;
	top: 25%;
	left: 5%;
	width: 40%;
	height: 40%;
	border-top: 0.28em solid #FFF;
	border-right: 0.28em solid #FFF;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.button-prev{
	position: absolute;
	top: 23%;
	left: 0;
	width: 3em;
	height: 3em;
	z-index: 100;
	cursor: pointer;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}
.button-prev::before{
	content: '';
	display: block;
	position: absolute;
	top: 25%;
	right: 5%;
	width: 40%;
	height: 40%;
	border-bottom: 0.3em solid #FFF;
	border-left: 0.3em solid #FFF;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.button-prev.swiper-button-disabled{opacity: 0;cursor: auto;}
.button-next.swiper-button-disabled{opacity: 0;cursor: auto;}

/*-----------*/

.products{
	position:relative;
	width: 100%;
	z-index: 500;
	text-align: center;
	overflow: hidden;
	color: #000;
	pointer-events: auto;
}
.products .prudctsInner{
	width: 100%;
	background:  #FFF;
	padding: 4.5em 0 6em;
}


.products h2{
	font-family: "DINPro-Medium";
	letter-spacing: 0.15em;
	font-size: 2.4em;
}
.products .proBody{
	width: 80%;
	margin: 3em auto 0;
}

.products .proBody .banner{
	width: 100%;
	margin-top: 2em;
}
.products .proBody .banner figure{}

.products .proBody .banner a{
	display: block;
	width: 100%;
	overflow: hidden;
}
@media(min-width: 769px) {
.products .proBody .banner a img{transition:  transform 0.4s;}
.products .proBody .banner a:hover img{transform: scale(1.15);}
}


.products .proBody .banner p{
	font-family: "DINPro-Medium";
	letter-spacing: 0.15em;
	font-size: 1em;
	padding-left: 0.1em;
	margin-top: 0.8em;
}

.wide{display: block;}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


@media(max-width: 960px) {
html{font-size:1.55vw;}
}

/*-------------------------*/

@media(max-width: 768px) {

html{font-size: min(18px, 3.6vw);}

.wide{display: none;}

/*
.topMovie{height: 100dvh;}
.header .contentsTop{height: 100dvh;}
*/
.header .contentsTop{background-image: url("../images/main_sp.webp");}

.header .scroll{display: none;}



.header .hhlogo{top: 1.5em;left: 0;right: 0;margin: 0 auto;width: 8.8em;}
.header .titlecopy .mainTitle{
	top:auto;
	bottom: 5em;
	display: block;
	-webkit-transform:none;
	transform:none;
}
.header .titlecopy .mainTitle h1{width: 100%;font-size: 1.58em;}
.header .titlecopy .mainTitle h2{width: 100%;margin-top: 2em;}

/*-----*/

.header .hhlogo{z-index: 25;}
.header .titleBk .mainTitle{display: none;}

/*.inWidth{max-width:none;}*/

/*-----*/

.lead .box{top: 2.5em;bottom: 2.5em;left: 1.8em;right: 1.8em;}
.lead .box .detail h2{font-size: 3.0em;}
.lead .box .detail h3{width: 92%;margin: 2.5em auto 0;max-width: 15em;}
.lead .box .detail p{
	font-size: 1.12em;
	margin: 2.5em auto 0;
	width: 98%;
}
.lead .box .detail .lifaLogo{margin-top: 2.5em;}

/*-----*/

.benefits .beneSet{padding-top: 0;height: 100vh;}
.benefits .beneSet .beneTitle h2{margin-top: 1.2em;}
.benefits .beneSet .beneBody p{font-size: 0.95em;}
.benefits .beneSet .lifaLogo{bottom: 4em;}

/*-----*/

.technology .swiper-slide{background: #000;height: 100vh;}
.technology .detail{
	height:auto;
}

/*-----*/

.products{padding-top: 40vh;}
.products .prudctsInner{padding: 4.5em 0 6em;}


}


/*--------------------------------------------*/


@media(max-width: 560px) {
.inWidth{max-width:none;}
}