/*====================================================================================*/
/* Common
/*====================================================================================*/

/*====================================================================================*/
/* PC 
/*====================================================================================*/
html,body {
    height: 100%;
}
.pageWrapper{
	/* animation */	
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;	
}
.pageWrapper .sideMenu{
	position: fixed;
    z-index: 20;
	top: 50%;
	right: 10px;
	transform-origin: right top;
	transform: rotate(90deg) translateX(50%);
	opacity:0;
	
	/* animation */	
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;	
}
.sideMenu.nonTopPosition{
	opacity:1;
}

.pageWrapper .sideMenu .listWrapper{
	
}
.pageWrapper .sideMenu .listWrapper .list{
	display:inline-block;
	margin: 10px;
	cursor:pointer;
}
.contents{
    margin-bottom: 150px;
}
#top{
	position:relative;
	margin-bottom: 80px;
    width: calc(100vw );
}
#top .slideWrapper {
    position: relative;
    width: 100%;
    height: calc(100vh);
    background: #000; /* 切り替え時に背景が透けないように黒を敷くのがおすすめ */
}

/* すべてのスライドの基本状態（非表示・ぼかしあり） */
#top .slideWrapper .slideContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    
	transition: opacity 2s ease-in-out, filter 3s ease-in-out;
	
    pointer-events: none; /* 非表示中のスライドがクリックを邪魔しないように */
}

/* 表示中のスライド（表示・ぼかしなし） */
#top .slideWrapper .slideContent.active {
	opacity: 1;
	z-index: 1;
}
#top .slideWrapper .slideContent .video{
}
#top .slideWrapper .slideContent .gradMaskBlack{
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
	position: absolute;
	overflow:hidden;
}
#top .slideWrapper .slideContent .gradMaskBlack img{
	object-fit:cover;
    height: 100vh;

}
#top .slideWrapper .slideContent .video video{
	width:100%;
	height:100vh;
	object-fit:cover;
}
#top .conceptArea{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	
}
#concept1{
	z-index:10;
}
#top .conceptArea .title{
	color:white;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: inline-block;
    font-size: 120%;
	vertical-align: top;
	width: 1.2em;
}
#top .conceptArea .title > .textEN{
	padding:38px 10px;
}
#top .conceptArea .logo{
    vertical-align: top;
    display: inline-block;
    margin-right: 20px;
}
#top .conceptArea .logo img{
	width:50px;
}


#top .slideWrapper .captionArea{
	
	position:absolute;
	z-index:5;
	bottom: -10px;
	left: 30px;
	color: white;
	transform: translateY(calc(-100% - 35px));
	


}

#top .slideWrapper .captionArea .caption{
	opacity:0;	
	overflow:hidden;
	transition: opacity 1s ease-in-out, filter 3s ease-in-out;
	position:absolute;
	width:500px;
}
#top .slideWrapper .captionArea .caption .text{	

}

#top .slideWrapper .captionArea > #news1{
	z-index:10;
}
#top .slideWrapper .captionArea a{
	color:white;
}

#top .slideWrapper .slideContent .captionArea .title{
	display: inline-block;
    font-size: 120%;
	vertical-align: top;
	margin-bottom:10px;
    border-bottom: solid 1px;
    padding-bottom: 8px;
}
#top .slideWrapper .slideContent .captionArea .caption{
    font-size: 80%;
    line-height: 2em;
}
#top .stateInfo{
	position: absolute;
	z-index: 20;
    bottom: 25px;
    right: 40px;
}
#top .stateInfo .indicator{
	display:inline-block;
	width:100px;
	height:1px;

}
#top .stateInfo .indicator .progressBar{
	width:1%;
	height:1px;
	background:white;
	transition: width 0.1s linear; /* 動きを滑らかにする */
}

#top .stateInfo .number{
	display:inline-block;
	color:white;
}
#top .stateInfo .number .Numerator{
	display:inline-block;
}
#top .stateInfo .number .Denominator{
	display:inline-block;
}

:is(#story, #scene).contents{
    padding: 60px 70px;
    margin-bottom: 50px;
}
:is(#story, #scene).contents > .title{
	width:170px;
    font-size: 130%;
	display:inline-block;
	margin-bottom:10px;
	vertical-align:top;
}
:is(#story, #scene).contents > .body{
	display:inline-block;
    margin-bottom: 0;
}
:is(#story).contents > .body > .wrapper{
	margin:0 -30px;
}
:is(#story, #scene).contents > .body > .wrapper .parts{


    
    width: calc(100vw - 140px);
	margin: 70px 0;
	
    /* margin: 0 30px;*/
	color:black;
	display: flex;
	vertical-align: top;
    background: #eeeeee;
}
.parts > .image > .cover{
	opacity:0;
	
}

#scene > .body > .wrapper .parts{
	
}
#scene > .body > .wrapper .parts > .caption{
	/* animation */	
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	position:relative;
}
#scene > .body > .wrapper .parts > .caption > .wrapper{
	width: calc(100% - 0);
	padding-top: 60px;

}

#scene > .body > .wrapper .parts > .caption > .wrapper > .title{
	font-size: 180%;
    margin-bottom: 50px;
    line-height: 1.6;
}
#scene > .body > .wrapper .parts > .caption > .wrapper > .title > .textJP{
}
#scene > .body > .wrapper .parts > .caption > .wrapper > .title > .textEN{
	
}
#scene > .body > .wrapper .parts > .caption > .wrapper > .textJP{
	margin-bottom:30px;
}
#scene > .body > .wrapper .parts > .caption > .wrapper > .textEN{
	margin-bottom:30px;
}
#scene > .body > .wrapper .parts > .caption > .wrapper > .subTitle{
	font-size: 80%;
	margin-bottom:-10px;
}
#scene > .body > .wrapper .parts > .caption  > .title{
	font-size: 80%;
}

.parts.hoverLink{
	/* animation */	
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.parts.hoverLink > .caption{
	background-color:#bbbbbb;
	color:white;
}
:is(#story, #scene).contents > .body > .wrapper .parts > .image{
	width:50%;
	aspect-ratio:3/2;
	position:relative;
}

:is(#story, #scene).contents > .body > .wrapper .parts > .image img{
	width:100%;
	aspect-ratio:3/2;
	object-fit: cover;
	display: block;
	position:absolute;
	top:0;
	left:0;
}
:is(#story, #scene).contents > .body > .wrapper .parts > .image > .cover{
	opacity:0;
	/* animation */	
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

:is(#story, #scene).contents > .body > .wrapper .parts > .title{
	margin-bottom:10px;
}
:is(#story, #scene).contents > .body > .wrapper .parts > .caption{
}
.parts.leftImageLayout{
}
.parts.leftImageLayout > .image{
}
.parts.leftImageLayout > .caption{
	padding-left:60px;
	padding-right:30px;
	width: calc(50% - 90px);
}
.parts.rightImageLayout{
	
}
.parts.rightImageLayout > .image{
}
.parts.rightImageLayout > .caption{
	padding-right:60px;
    width: calc(50% - 120px);
    padding-left: 60px;
}

#concept{

    height: calc(100vh + 150px);
    margin-bottom: 0;
    position: relative;
    font-size: 120%;
    line-height: 2.15;
}
#concept > .contentsWrapper{
	position: sticky;
    height: 100vh;
    width: 100%;
    top: 0;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    display: inline-block;
    text-align: center;
}
#concept > .contentsWrapper > .captionArea{
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 50vh;
    top: 50vh;
    transform: translate(-200px, -50%);
}
#concept > .contentsWrapper > .captionArea > .description{
	margin-bottom:30px;
}
#concept > .contentsWrapper > .captionArea > .description .copy{
	font-size:140%;
	margin-bottom:50px;
}
#howToUse{
	text-align: center;
	padding:40px;
}

#howToUse .title{
	position: relative;
	vertical-align: top;
	top: 70px;
	width:100%;
    text-align: center;
	display: inline-block;
	margin-bottom:50px;
}
#howToUse .title .line{
	display:inline-block;
	position: absolute; /* ★絶対配置にする */
	top: -90px;
    left: 50%;;
    width: 1px;
    height: 80px;
	background:black;
	content:" ";
}
#howToUse .title .textJP{
	/* 縦書きの指定：右から左へ */
    writing-mode: vertical-rl;
    
    /* 古いブラウザ（IE/旧Edge）への対応 */
	-ms-writing-mode: tb-rl;
	font-size: 150%;
    display: inline-block;
    letter-spacing: 0.3em;
}
#howToUse .title .textEN{
}

#howToUse .contentsWrapper{
    display: inline-block;
    padding-top: 50px;
	vertical-align: top;
	width:100%;
    text-align: left;
}

#howToUse .contentsWrapper .aLink{
	color:black;
	
}
#howToUse .contentsWrapper .aLink .parts{
	width: calc((100% - 140px)/3);
    display: inline-block;
	margin: 30px;
    position: relative;
	font-size: 85%;
	cursor:pointer;
	
	
}
#howToUse .contentsWrapper .aLink .parts .image{
	position:relative;
	aspect-ratio:3/2;
}
#howToUse .contentsWrapper .aLink .parts .image img{

}
#howToUse .contentsWrapper .aLink .parts .image{
}
#howToUse .contentsWrapper .aLink .parts .image{
}

#howToUse .contentsWrapper .aLink .parts .info .useName{
	width:100%;
	display:inline-block;
	position: relative;
}
#howToUse .contentsWrapper .aLink .parts .info .pMeta{
	width:calc(100% - 10px);
	display:inline-block;
	text-align: right;
}
#howToUse .contentsWrapper .aLink .parts .info .pMeta .useProduct{
}

#company{
	padding: 60px 120px;
	text-align: center;
}

#company .title{
	position: relative;
	vertical-align: top;
	top: 70px;
	width:100%;
    text-align: center;
	display: inline-block;
	margin-bottom:90px;
}
#company .title .line{
	display:inline-block;
	position: absolute; /* ★絶対配置にする */
	top: -90px;
    left: 50%;;
    width: 1px;
    height: 80px;
	background:black;
	content:" ";
}
#company .title .textJP{
	/* 縦書きの指定：右から左へ */
    writing-mode: vertical-rl;
    
    /* 古いブラウザ（IE/旧Edge）への対応 */
	-ms-writing-mode: tb-rl;
	font-size: 150%;
    display: inline-block;
    letter-spacing: 0.3em;
}

#lineup > .title{
	position: relative;
	vertical-align: top;
	top: 70px;
	width:100%;
    text-align: center !important;
	display: inline-block;
	margin-bottom:90px;
}
#lineup > .title .line{
	display:inline-block;
	position: absolute; /* ★絶対配置にする */
	top: -90px;
    left: 50%;;
    width: 1px;
    height: 80px;
	background:black;
	content:" ";
}
#lineup > .title .textJP{
	/* 縦書きの指定：右から左へ */
    writing-mode: vertical-rl;
    
    /* 古いブラウザ（IE/旧Edge）への対応 */
	-ms-writing-mode: tb-rl;
	font-size: 150%;
    display: inline-block;
    letter-spacing: 0.3em;
}

#lineup .title .textEN{
}


#company > .image{
	margin-bottom: 30px;
    width: 100%;
	display: inline-block;
	vertical-align: top;
}
#company > .caption{
	padding: 30px;
	text-align:left;
}
#company > .caption > .text{
	margin-bottom:60px;
}
#company > .caption > .text a{
	color:black;
	border-bottom:solid 1px;
    padding-bottom: 5px;
}
#company > .caption > .parts{
	margin-bottom:16px;
}
#company > .caption > .parts > .title{
	width:120px;
	display:inline-block;
    line-height: 1.6em;
}
#company > .caption > .parts > .data{
	width:calc(100% - 150px);
	display:inline-block;
    line-height: 1.6em;
}

/*====================================================================================*/
/* スマフォ縦表示
/*====================================================================================*/
/* ipad pro? */
@media only screen and (max-width: 1024px) and (orientation:portrait){
	
	#top .stateInfo {
		right: 20px;
	}
	#top .stateInfo .indicator {
		display: initial;
		width: 1px;
		height: 100px;
	}
	#top .stateInfo .indicator .progressBar{
		transform:translateY(35px);
	}
	#top .slideWrapper .captionArea{
		bottom:-10px;
		left:20px;
	}
	#top .slideWrapper .captionArea .caption{
		width:350px;
	}

	#top .conceptArea {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(calc(-50% + 30px), -50%);
	}
	#top .conceptArea .logo img {
		width: 40px;
	}
	#concept{
		font-size:100%;
	}
	#concept > .contentsWrapper{
		position:initial;
	}
	#concept > .contentsWrapper > .captionArea{
        left: 0;
        top: 0;
        transform: initial;
        width: calc(100% - 80px);
        padding: 0 40px;
	}
	#concept {
		 height: auto;
	}
	:is(#story, #scene).contents {
		padding: 0 30px;
	}
	
	:is(#story, #scene).contents > .body {
		width: 100%;
	}
	:is(#story, #scene).contents > .body > .wrapper .parts {
		padding: 30px;
		padding-bottom: 50px;
		width: calc(100% - 60px);
		display: block;
	}
	

	.parts.rightImageLayout > .caption {
		padding: 0;
		width: 100%;
	}
	#scene > .body > .wrapper .parts > .caption > .wrapper
	{
		width: 100%;
        padding-top: 0;
	}
	#scene > .body > .wrapper .parts > .caption > .wrapper > .title{
        margin-bottom: 30px;
	}
	:is(#story, #scene).contents > .body > .wrapper .parts > .image {
		width: 100%;
        margin-bottom: 30px;
	}

	.parts.leftImageLayout > .caption {
		padding: 0;
		width: 100%;
	}
	#lineup{
		padding: 0 40px;
	}
	#lineup .menu {
		vertical-align: top;
		position: initial;
		top: 0px;
		display:inline-block;
		padding-left: 0;
		padding-top: 0px;
		width: 100%;
	}

	#concept .contentsWrapper {
		padding: 10px;
        box-sizing: border-box;
	}
	#concept .contentsWrapper .slide .captionArea {
		padding: 10px;
        margin-bottom: 60px;
	}
	#concept > .contentsWrapper > .captionArea > .description .copy {
		font-size: 130%;
		
	}
	#concept .contentsWrapper .slide .imageArea .image {
		width: calc(33% - 24px);	
	}
	#concept .contentsWrapper .slide .captionArea .title {
		font-size: 130%;
		margin-bottom: 30px;
	}
	#slideConcept2 {
		top: 170px;
        padding-top: 20px;
	}
	#slideConcept3 {
		top: 255px;
        padding-top: 20px;
	}
	#howToUse{
		padding: 80px 10px 0 10px;
	}
	#howToUse .contentsWrapper .aLink .parts {
		width: calc(50% - 20px);
        margin: 10px;
	}
	#company{
		padding: 60px 30px;
        margin-bottom: 0px;
	}
	#company > .caption {
		padding: 0 20px;
	}
	.pageFooterWrapper{
        padding: 0 40px !important;
	}

}
/*====================================================================================*/
/* スマフォ　横表示
/*====================================================================================*/
@media only screen and (max-width: 1024px) and (orientation:landscape){
}