/*---------------------------------------------------------zindex--*/
		
		html{
			z-index:1;
		}
		body{
			z-index:2;
		}
		.main_visual{
			z-index:3;
		}f
		.main_visual video{
			z-index:4;
		}
		
		.container{
			z-index:100;
		}
		header{
			z-index:1000;
		}
		nav{
			z-index:2000;	
		}	
		.nbtn{
			z-index:3000;
		}
		footer{
			z-index:101;	
		}
		
		html{
			position: relative;
			display: block;
			width:100%;
			height: 100%;
			/*background:linear-gradient(#fefeff,#D3D0C6);*/
			
		}
	
		body{
			position: relative;
			display: block;
			width:100%;
			height: auto;
			font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
			font-feature-settings: 'palt';
			text-align: justify;
			text-align-last: left;
			word-wrap:normal;
			word-break:break-all;
			line-break:strict;
			line-height: 1.8em;
			z-index:10;
			font-size:min(16px,3vw);
		}
		
		header{
			position: fixed;
			display: block;
			width:100%;
			height: 4vw;
			background: #fefeff;
			top:0;
			left:0;
			overflow: hidden;
			text-align: center;
			text-align-last: center;
		}
		
		header .logo{
			position: relative;
			display: inline-block;
			margin: .5vw auto;
			height: 3vw;
			width: auto;

		}
		
		.nbtn{
			position: fixed;
			display: block;
			width:3vw;
			height: 3vw;
			top:.5vw;
			right:.5vw;
		}
		
		.nbtn span{
			position: absolute;
			display: block;
			width:75%;
			height: 2px;
			background: #000;
			margin: auto;
			top:50%;
			bottom: 50%;
			left:0;
			right:0;
			transition: 0.5s;
		}
		
		.nbtn span:first-child{
			top:0%;
		}

		.nbtn span:last-child{
			bottom:0%;
		}
		
		.nbton span:first-child{
			transform: rotate(45deg);
			top:50%;
		}
		
		.nbton span:last-child{
			transform: rotate(-45deg);
			bottom:50%;
		}
		
		.nbton span:nth-child(2){
			opacity: 0;
		}
		
		nav{
			position: fixed;
			display: block;
			width:38vw;
			min-width: 300px;
			height: 90vh;
			padding:10vh 1vw 0 4vw;
			background: #fff;
			top:0;
			right:-100vw;
			box-shadow: 0 0 32px #eee;
			transition-timing-function: ease-in-out;
			transition: 0.5s;
			text-align: left;
			text-align-last: left;
		}
		
		nav a{
			position: relative;
			display: block;
			width: 100%;
			height: 4vh;
			padding:4vh 1vw 0 1vw;
			text-align: left;
			font-size:1rem;
			color:#111;
			text-decoration: none;
			border-bottom: 1px solid #111;
		}
		
		.navon{
			right:0;
		}
		
		
		.container{
			position: relative;
			display: block;
			background: #fff;
			width:100%;
			margin: 0 auto;

			top:0;
		}
		
		section{
			position: relative;
			display: block;
			width:92vw;
			max-width: 80rem;
			margin:4vw auto;
	

		}

		.main_visual{
			position: sticky;
			display: block;
			width:92vw;
			aspect-ratio:21.5/9;
			margin:0vw auto -4vw;
			padding:4rem 0;
			overflow: hidden;
			top:0;
		}
		
		.main_visual .video{
			position: absolute;
			display: block;
			width:100%;
			asprct-raito:16/9;
			margin:auto;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			transition: 0.5s;
		}


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


		.section_title{
			position: relative;
			display: inline-block;
			margin:1rem 0 2rem 0;
			font-size:1.4rem;
			text-align: center;
			text-align-last: center;
			font-weight: bold;
		}

		.main_visual2{
			position: sticky;
			display: block;
			width:88vw;
			max-width:1134px;
			aspect-ratio:21.5/9;
			margin:4rem auto -4vw;
			padding:4rem 0;
			overflow: hidden;
			top:4rem;
		}
		
		.main_visual2 .video{
			position: absolute;
			display: block;
			width:100%;
			asprct-raito:16/9;
			margin:auto;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}


		.section2{
			position: relative;
			display: block;
			width:88vw;
			max-width:1134px;
			margin:4vw auto;
			font-size:1.1rem;
	

		}
		
		
		footer{
			display: block;
			position: relative;
			width:100%;
			min-height: 320px;
			background: #9a9d9c;
			font-size:1rem;
			padding: 2rem 0;
			text-align: center;
			text-align-last: center;
		}
			
		
/*----------------------------------------------------------------------------text design-----*/
		

		h1{
			position: relative;
			display: inline-block;
			margin: 2rem auto;
			font-size: 2rem;
			text-align: center;
			text-align-last: center;
		}
		
		h2{
			position: relative;
			display: inline-block;
			width:100%;
			margin: 0rem auto 4rem 0;
			font-size: 2rem;
			line-height: 2.5rem;
			text-align: center;
			text-align-last: center;
			font-weight: bold;
		}

		a{
			text-decoration: none;
			color: #224;
			transition: 0.5s;
		}

		a:hover{
			filter: drop-shadow(2px 2px 8px #ccf);
		}

		.button1{
			position: relative;
			display: block;
			font-size:1.1rem;
			font-weight: bold;
			width:240px;
			height: 1.1rem;
			line-height: 1.1em;
			padding:1rem;
			box-shadow: 0 0 12px #eee;
			margin: 2rem auto;
			text-align: center;
			text-align-last: center;
			border:4px solid #aaa;
		}
		
		#hpos{
			position: fixed;
			display: block;
			width:48px;
			height: 48px;
			left:50%;
			transform: translateX(-50%);
			z-index:999999;
			transition: 0.4s;
			bottom:-128px;

		}

		#hpos span{
			position: relative;
			display: block;
			width:20px;
			height: 20px;
			border-top:4px solid #666;
			border-left:4px solid #666;
			transform: rotate(45deg);
			margin: 0 auto;
		}

		#hpos span:first-child{
			margin-top:10px;
		}
		#hpos span:last-child{
			margin-top:-10px;
		}
		
/*---------------------------------------------------------------------------------*/

		.link_area1{
			position: relative;
			display: flex;
			justify-content: space-between;
			width:100%;
			margin: 0;
			padding: 0;
		}
		
		.link_box1{
			position: relative;
			display: block;
			width:calc( 50% - 0.5rem );
			aspect-ratio:1/1.236;
			background: #fff;
			overflow: hidden;
			margin: 0;
			padding: 0;
			box-shadow: 0 0 24px #eee;
			transition: 0.4s;
			color:#555;
		}

		
		.link_box2{
			position: relative;
			display: block;
			width:calc( 50% - 0.5rem );
			aspect-ratio:16/9;
			background: #fff;
			overflow: hidden;
			margin: 0;
			padding: 0;
			box-shadow: 0 0 24px #eee;
			transition: 0.4s;
			color:#555;
			
		}
		
		.link_area3{
			position: relative;
			display: flex;
			justify-content: space-between;
			width:100%;
			margin: 4rem 0;
			padding: 0;

			
		}
				
		.link_box3{
			position: relative;
			display: block;
			width:calc( 50% - 0.5rem );
			height: 4rem;
			font-size: 0.8rem;
			background: #fff;
			overflow: hidden;
			margin: 0;
			padding: 0;
			box-shadow: 0 0 24px #eee;
			transition: 0.4s;
			color:#555;
			white-space: nowrap;
			text-overflow: ellipsis;		
			border:1px solid #eee;
		}
				
		.link_text3{
			position: absolute;
			display: block;
			width:calc( 100% - 2rem );
			padding: 1.1rem;
			text-align: center;
			text-align-last: center;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);			
			text-overflow: ellipsis;
			word-break: keep-all;
		}		


		.link_box1:hover,.link_box2:hover{
			color:#000;
		}
	
			
		.link_box1:hover .link_image1{
			filter: brightness(1);
		}
		
		.link_image1{
			position: relative;
			display: block;
			width:100%;
			aspect-ratio:4/3;
			overflow: hidden;
			filter: brightness(0.5);
			transition: 0.4s;
			background: #000;
		}
		
		.link_image1 img{
			position: relative;
			display: block;
			width:100%;
			height: auto;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
		
		.link_textbox1{
			position: relative;
			display: block;
			width:100%;
			aspect-ratio:1/.486;
		}

		
		.link_text1{
			position: absolute;
			display: block;
			width:calc( 100% - 2rem );
			padding: 1.1rem;
			text-align: center;
			text-align-last: center;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);			
	
		}		
		.link_text1 span{
			position: relative;
			display: block;
			text-align: center;
			text-align-last: center;
			font-size: 1.3rem;
			font-weight: bold;
			margin: 0 auto 1rem auto;
		}
		
		
/*---------------------------------------------------------------------------------*/

		.vtext{
			position:absolute;
			display: block;
			width:100%;
			height: 100%;
			bottom: 0;
			left:0;
		
			color:#fff;
			font-weight: bold;
			font-size:2rem;
			text-shadow: 2px 2px 4px #000;
		}

/*

		.news_title{
			position: absolute;
			display: inline-block;
			margin: auto;
			width:40rem;
			top:50%;
			left:50%;
			line-break:strict;
			transform: translate(-50%,-50%);
			line-height: 1.7em;
			text-align: justify;
			text-align-last: left;
			font-weight: bold;
		}

		.news_title span{
			position: relative;
			display: block;
			font-size:1.0rem;
			padding-top:1rem;
		}

*/
		.news_box1{
			position: relative;
		}
		
		.news_list1{
			position: relative;
			display: block;
			width:100%;
			height: 10rem;
			border-top: 1px solid #333;
		}
		
		.news_image1{
			position: relative;
			display: block;
			width:9rem;
			height: 9rem;
			background: #eee;
			float: left;
			margin:0.5rem;
			overflow: hidden;
		}
		
		.news_image1 img{
			position: absolute;
			width:9rem;
			height: auto;
			margin: auto;
			top:0;
			bottom: 0;
		}
		
		.news_date1{
			position: relative;
			display: block;
			margin:0.5rem;
			font-size:1rem;
		}
		
		.news_text1{
			position: relative;
			display: block;
			margin:0.5rem;
			font-size:1.1rem;
		}
			

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


			
		@media(max-width:1023px){

		header{
			position: fixed;
			display: block;
			width:100%;
			height: 4rem;
			background: #fefeff;
			top:0;
			left:0;
			overflow: hidden;
			text-align: center;
		}
		
		header .logo{
			position: relative;
			display: inline-block;
			margin: 1rem auto;
			height: 2rem;
			width: auto;

		}
		
		.nbtn{
			position: fixed;
			display: block;
			width:3rem;
			height: 3rem;
			top:.5rem;
			right:.5rem;
		}
		
		.nbtn span{
			position: absolute;
			display: block;
			width:75%;
			height: 2px;
			background: #000;
			margin: auto;
			top:50%;
			bottom: 50%;
			left:0;
			right:0;
			transition: 0.5s;
		}
		
		.nbtn span:first-child{
			top:0%;
		}

		.nbtn span:last-child{
			bottom:0%;
		}
		
		.nbton span:first-child{
			transform: rotate(45deg);
			top:50%;
		}
		
		.nbton span:last-child{
			transform: rotate(-45deg);
			bottom:50%;
		}
		
		.nbton span:nth-child(2){
			opacity: 0;
		}
		
		nav{
			position: fixed;
			display: block;
			width:38vw;
			min-width: 300px;
			height: 90vh;
			padding:10vh 1vw 0 4vw;
			background: #fff;
			top:0;
			right:-100vw;
			box-shadow: 0 0 32px #eee;
			transition-timing-function: ease-in-out;
			transition: 0.5s;
		}
		
		nav a{
			position: relative;
			display: block;
			width: 100%;
			height: 4vh;
			padding:4vh 1vw 0 1vw;
			text-align: left;
			font-size:1rem;
			color:#111;
			text-decoration: none;
			border-bottom: 1px solid #111;
		}
		
		.navon{
			right:0;
		}
		
		.main_visual{
			position: sticky;
			display: block;
			width:92vw;
			aspect-ratio:21.5/9;
			margin:4rem auto 4vw;
			overflow: hidden;
			top:0;
		}
		
		.main_visual video{
			position: absolute;
			display: block;
			width:100%;
			asprct-raito:16/9;
			margin:auto;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			transition: 0.3s;
			}
					

		}
		
		@media(max-width:767px){
			
			
				
		
		.main_visual{
			position: sticky;
			display: block;
			width:100%;
			height: calc( 95vh - 6rem );
			margin:4rem auto 4vw;
			overflow: hidden;
			top:0;
		}
		
		.main_visual .video{
			position: absolute;
			display: block;
			height:100vh;
			width:auto;
			margin:auto;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
					


		.main_visual2,.mv_change{
			position: sticky;
			display: block;
			width:100%;
			height: auto;
			max-width:1134px;
			aspect-ratio:21.5/9;
			margin:2.5rem auto 0;
			padding:4rem 0;
			overflow: hidden;
			top:2.5rem;
		}
		
		.main_visual2 .video ,.mv_change .video{
			position: absolute;
			display: block;
			width:100%;
			asprct-raito:16/9;
			margin:auto;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
			
			
		
		section{
			position: relative;
			display: block;
			width:92vw;
			max-width: 80rem;
			margin:1rem auto;
			font-size: 0.8rem;
	

		}			
			
		
/*----------------------------------------------------------------------------text design-----*/
		

		h1{
			position: relative;
			display: inline-block;
			margin: 2rem auto;
			font-size: 2rem;
			text-align: center;
			text-align-last: center;
		}
		
		h2{
			position: relative;
			display: inline-block;
			width:100%;
			margin: 2rem auto 2rem 0;
			font-size: 2rem;
			line-height: 1.5rem;
			text-align: center;
			text-align-last: center;
			font-weight: bold;
		}			
			
			
		
/*----------------------------------------------------------------------------text design-----*/
			
		.link_area1{
			position: relative;
			display: block;
			width:100%;
			margin: 0;
			padding: 0;
		}
		
		.link_box1{
			position: relative;
			display: block;
			width:100%;
			aspect-ratio:1/1.236;
			background: #fff;
			overflow: hidden;
			margin: 1rem auto;
			padding: 0;
			box-shadow: 0 0 24px #eee;
			transition: 0.4s;
			border:1px solid #ccc;
		}
		
				
		.link_box2{
			position: relative;
			display: block;
			width:100%;
			aspect-ratio:16/9;
			background: #fff;
			overflow: hidden;
			margin: 0;
			padding: 0;
			box-shadow: 0 0 24px #eee;
			transition: 0.4s;
		}	
			
	
		
		.link_image1{
			position: relative;
			display: block;
			width:100%;
			aspect-ratio:4/3;
			overflow: hidden;
			filter: brightness(0.5);
			transition: 0.4s;
			background: #000;
		}
		
		.link_image1 img{
			position: absolute;
			display: block;
			width:100%;
			height: auto;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
		}
		
		.link_textbox1{
			position: relative;
			display: block;
			width:100%;
			aspect-ratio:1/.486;
		}

		
		.link_text1{
			position: absolute;
			display: block;
			width:calc( 100% - 2rem );
			padding: 1.1rem;
			text-align: center;
			text-align-last: center;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);			
	
		}		
		.link_text1 span{
			position: relative;
			display: block;
			text-align: center;
			text-align-last: center;
			font-size: 1.3rem;
			font-weight: bold;
			margin: 0 auto 1rem auto;
		}
				
		
/*---------------------------------------------------------------------------------*/

	}	


		.vtext{
			position:absolute;
			display: block;
			width:100%;
			height: 100%;
			bottom: 0;
			left:0;
			vertical-align: middle;
			background: linear-gradient(rgba(0,0,0,0.0) ,rgba(0,0,0.6));
			color:#fff;
			font-weight: bold;
			font-size:2rem;
			text-shadow: 2px 2px 4px #000;
			
		}


		.news_title{
			position: absolute;
			display: inline;
			width:88%;
			top:calc( 50% - 1.8em );
			margin:auto;
			line-break:strict;
			left:0;
			right: 0;
			line-height: 1.8em;
			font-weight: bold;
		}

		.news_title span{
			position: relative;
			display: block;
			font-size:1rem;
		}



		.item_name{
			position: absolute;
			display: inline;
			width:88%;
			top:calc( 50% - 1.8em );
			margin:auto;
			line-break:strict;
			left:0;
			right: 0;
			line-height: 1.8em;
			font-weight: bold;
			font-size:1.8rem;
		}

		.item_lead{
			position: relative;
			display: block;
			font-size:1.2rem;
			line-break:strict;
			word-break: keep-all;
		}


 

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




/* iPad専用スタイル（768px〜1023px） */
@media(min-width:768px) and (max-width:1023px){
	
	/* メインビジュアル修正 */
	.main_visual{
		position: sticky;
		display: block;
		width:92vw;
		height: calc(92vw * 9 / 21.5); /* aspect-ratio:21.5/9の代替 */
		margin:4rem auto 4vw;
		overflow: hidden;
		top:0;
	}
	
	.main_visual video{
		position: absolute;
		display: block;
		width:100%;
		height: 100%;
		object-fit: cover; /* 画像ずれ防止 */
		margin:auto;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	
	/* 製品画像修正 */
	.link_image1{
		position: relative;
		display: block;
		width:100%;
		height: calc(100% * 3 / 4); /* aspect-ratio:4/3の代替 */
		overflow: hidden;
		filter: brightness(0.5);
		transition: 0.4s;
		background: #000;
	}
	
	.link_image1 img{
		position: absolute;
		display: block;
		width:100%;
		height: 100%;
		object-fit: cover; /* 画像ずれ防止 */
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	
	/* ニュース画像修正 */
	.news_image1{
		position: relative;
		display: block;
		width:100%;
		height: 200px; /* 固定高さでずれ防止 */
		overflow: hidden;
		background: #000;
	}
	
	.news_image1 img{
		position: absolute;
		display: block;
		width:100%;
		height: 100%;
		object-fit: cover; /* 画像ずれ防止 */
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
	}
	
}