@charset "utf-8";

/*COMMON*/

section{
	padding: 8% 0;
}

#product .util_ttl,
#access .util_ttl,
#product .lead,
#access .lead{
	text-align: center;
}


main .element {
	width: 45%;
	position: relative;
}

main .element img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/*MV*/

#mv{
	position: relative;
	padding: 0;
}

#mv .mv_slider {
	display: flex;
	width: 100%;
	overflow: hidden;
}

main .slick-vertical .slick-slide{
	border: none;
}

#mv .mv_slider ul {
	width: 50%;
	height: 100vh;
	list-style: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

#mv .mv_slider li {
	height: 100vh;
}

#mv .mv_slider img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: right center;
	display: block;
}

#mv .mv_slider .slide_r img{
	object-position: left center;

}

#mv .slide_r {
	transform: rotate(180deg);
	overflow: hidden;
}

#mv .slide_r .slick-slide {
	transform: rotate(180deg);
}

#mv .txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-size: 24px;
	letter-spacing: 2px;
	font-weight: 700;
	width: 80%;
	text-align: center;
}

#mv .txt .movie_wrap{
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

#mv .txt .movie_wrap .movie{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

#mv .news_latest{
	display: flex;
	width: 30%;
	gap: 0 10px;
	align-items: center;
	position: absolute;
	bottom: 6%;
	left: 4%;
	background-color: #ba913c;
	padding: 1% 4%;
	clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}

#mv .news_slide{
	overflow: hidden;
	white-space: nowrap;
}

#mv .news_slide .wrapper{
	display: inline-block;
	padding-left: 50%;
	animation: marquee 20s linear infinite;
}

#mv .news_slide .wrapper span{
	display: inline-block;
	padding-right: 10%;
}

#mv h1{
	width: 40%;
	margin: 0 auto;
	max-width: 600px;
}

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

#mv .news_latest time{
	letter-spacing: -0.4px;
	font-weight: 700;
}

/*ABOUT*/

#about{
	position: relative;
	background-color: #e9eced;
}

#about .txt_wrap{
	width: 56%;
}

#about .catch{
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 4%;
}

#about .img1,
#about .img2{
	width: 30%;
	position: absolute;
	top: 0;
	right: 0;
	clip-path: polygon(30% 0, 100% 0%, 70% 100%, 0% 100%);
}

#about .img1{
	right: 10%;
}

#about .img2{
	top: 20%;
}

#about .element{
	position: absolute;
	right: 0;
	bottom: 20%;
}





/*PRODUCT*/

#product{
	overflow: clip;
	background: url(../img/top/product_el_top.png) no-repeat left top / 20%;
}

#product ul.cards {
	display: flex;
	flex-direction: column;
}


#product ul.cards li.card {
	position: sticky;
	top:18%;
	transition: transform 0.6s ease;
	width: 80%;
	margin: 0 auto;
}

#product ul.cards li.card:nth-of-type(1) .card_content,
#product ul.cards li.card:nth-of-type(5) .card_content{
	background: url(../img/top/product_card1.png) no-repeat center center / 100% 100%;
}

#product ul.cards li.card:nth-of-type(2) .card_content,
#product ul.cards li.card:nth-of-type(6) .card_content{
	background: url(../img/top/product_card2.png) no-repeat center center / 100% 100%;
}

#product ul.cards li.card:nth-of-type(3) .card_content{
	background: url(../img/top/product_card3.png) no-repeat center center / 100% 100%;
}

#product ul.cards li.card:nth-of-type(4) .card_content{
	background: url(../img/top/product_card4.png) no-repeat center center / 100% 100%;
}

#product ul.cards li.card .card_content {
	display: flex;
	justify-content: space-between;
	box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.4);
	padding: 6% 2% 4%;
	color: #fff;
	position: relative;
	margin: 0 0 8%;
}

#product ul.cards li.card .card_content a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

#product ul.cards li.card .card_content:hover .util_btn{
	color: #fff;
}
#product ul.cards li.card .card_content:hover .util_btn::before {
	width: 100%;
	right: 0;
	left: auto;
}
#product ul.cards li.card .card_content:hover .util_btn::after {
	width: 100%;
	left: 0;
	right: auto;
}
#product ul.cards li.card .card_content:hover .util_btn span {
	transition: color 0.3s ease;
	color: #fff;
}
#product ul.cards li.card .card_content:hover .util_btn em {
	background: #fff;
	transform: scaleX(1);
}

#product ul.cards li.card .content_l,
#product ul.cards li.card .content_r{
	width: 45%;
}

#product ul.cards li.card .content_r{
	width: 35%;
}



#product ul.cards li.card .content_r .bland{
	background: linear-gradient(90deg, #be821f 0%, #d6b554 100%);
	background-size: 200%;
	background-position: center;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 700;
	font-size: 32px;
}

#product ul.cards li.card .content_r .bland span.ja{
	background: #fff;
	background-clip: text;
	font-size: 16px;
	margin-left: 4px;
}

#product ul.cards li.card ul{
	overflow: hidden;
}

#product ul.cards li.card ul li{
	float: left;
	padding: 6px 10px;
	border: 1px solid #fff;
	margin: 10px 4px 4px 0;
}

#product ul.cards li.card ul li:nth-of-type(n + 5){
	display: none;
}

#product ul.cards li.card .content_l .img img{
	height: 400px;
	object-fit: cover;
}

#product ul.cards li p{
	font-size:15px;
}

#product .inner .util_btn{
	margin: 4% 16% 10% auto;
}

#product_link {
	height: 200vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: visible;
	position: relative;
	padding: 0 0 40%;
	font-weight: 700;
	background: url(../img/top/product_el_bottom.png) no-repeat right bottom / 20%;

}

#product_link .element{
	bottom: 20%;
	position: absolute;
	left: 0;
}

#product_link .flip-container {
	position: sticky;
	top: 30%;
	height: 300px;
	text-align: center;
	width: 50%;
}

#product_link .flip-card {
	position: absolute;
	width: 50%;
	height: auto;
	border-radius: 16px;
	box-shadow: 20px 20px 25px rgba(0,0,0,0.3);
	will-change: transform, opacity;
	border:4px solid transparent;
}

#product_link .flip-card:hover{
	border:4px solid #be811e;
	transition:all .3s;
}

#product_link .flip-card a{
	display:block;
	padding:6% 2%;
}

#product_link .flip-card.card1 {
	left: 0;
	transform: rotate(0deg);
	z-index: 2;
	background: #14476b;
}

#product_link .flip-card.card2 {
	left: 40%;
	transform: rotate(0deg);
	z-index: 1;
	opacity: 0.8;
	background: #486673;
	box-shadow: -10px 20px 25px rgba(0,0,0,0.3);
}

#product_link .flip-card span{
	font-size: 24px;
	color: #fff;
	display: block;
	padding: 6% 0;
}

#product_link .flip-card .img{
	width: 80%;
	margin: 0 auto;
}

#product_link .link_wrap{
	position: absolute;
	bottom: 20%;
}

#product ul.cards li.card ul li{
	font-size: 12px;
}

#column{
	background: url(../img/top/column_bg.png) no-repeat center center / 100% 100%;
}


#column .column_slider_wrap {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 4% 0;
}

#column .column_slider_inner{
	width: 100%;
	margin: 0 auto;
}

#column .column_slider_container{
	position: relative;
	width: 100%;
	padding-left: 13%;
}

#column .column_slider li{
	position: relative;
	pointer-events: none;
	border: 3px solid transparent;
}

#column .column_slider li:hover .column_head .thum{
	transform: scale(1.2);
	transition: all .3s;
}

#column .column_slider li:hover{
	border: 3px solid #00367d;
	transition: all .3s;
}

#column .column_slider li:hover h3{
	color: #00367d;
	transition: all .3s;
}

#column .column_slider a,
#news .content_r ul li a{
	display: block;
	pointer-events: auto;
}


#column .column_slider .column_head {
	overflow: hidden;
	border-bottom: 2px solid #ddd;
}

#column .column_slider .column_head .thum{
	width: 350px;
	height: 200px;
}
#column .column_slider time{
	font-size:14px;
}


#column .column_slider .slick-track {
	display: flex !important;
}
#column .column_slider .slick-slide {
	height: auto !important;
	margin: 0 10px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.1);
	padding: 20px 20px 60px;
}

#column .column_slider_nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
	max-width: 1520px;
	padding: 0 4%;
	margin: 5% auto 0;
}


#column .btn_inner{
	display: flex;
	gap: 10px;
	width:fit-content;
	margin-right: 20px;
}

#column .slick-prev,
#column .slick-next {
	background: linear-gradient(to right,#c08623,#d3b04e);
	color: #fff;
	border: none;
	width: 64px;
	height: 64px;
	cursor: pointer;
	transition: 0.3s;
	position: relative;
	transform: none;
	left: 0;
}

#column .slick-prev.slick-disabled:before,#column .slick-next.slick-disabled:before{
	opacity: 1;
}

#column .slick-dots{
	position: static;
	display: flex;
}

#column .slick-dots li{
	width: 80px;
	height: 6px;
}

#column .slick-dots li button{
	padding: 2px;
}

#column .slick-prev::before,
#column .slick-next:before{
	content: '';
	position: absolute;
	top: 56%;
	width: 18px;
	height: 18px;
	transform: rotate(45deg) translate(-50%,-50%);
}

#column .slick-prev::before{
	border-left: 4px solid #000;
	border-bottom: 4px solid #000;
	left: 43%;
}
#column .slick-next:before{
	border-top: 4px solid #000;
	border-right: 4px solid #000;
	left: 36%;
}

#column .slick-prev:hover,
#column .slick-next:hover {
	opacity: 0.8;
}

#column .column_slider_nav .slick-dots button {
	width: 80px;
	height: 6px;
	background: #ccc;
	border: none;

}

#column .slick-dots li button:before{
	display: none;
}

#column .column_slider_nav .slick-dots .slick-active button {
	background: linear-gradient(to right,#c08623,#d3b04e);
}

#column .abs{
	position: absolute;
	bottom: 8%;
	right: 10%;
	max-width: 300px;
	width: 100%;
}



#news{
	background: url(../img/top/news_bg.png) no-repeat center center / cover;
}

#news .inner{
	background: #fff;
	padding: 4%;
}

#news .util_btn{
	margin: 6% 10% 0 auto;
}

#news .content_l{
	width: 40%;
	margin-right: 2%;
}

#news .content_r{
	width:58%;
}

#access .element{
	position: relative;
	height: 40vh;
	margin: 0 0 0 auto;
}

#access{
	padding: 0 0 8%;
	background: url(../img/top/access_el.png) no-repeat left top / 20%;
}

#access .content_wrap{
	width: 90%;
	margin: 0 auto 0;
}

#access .content_wrap .content_r{
	width: 60%;
	margin-left: 10%;
}

#access .content_wrap .content_r iframe{
	width: 100%;
	height: 400px;
}

#access address{
	font-size: 18px;
	margin-top: 4%;
}

#access a{
	margin: 6% 0 0 auto;
}

#line{
	padding:2% 0;
}

#line .inner{
    margin: 0 auto;
	max-width:1020px;
}

#line a:hover{
	opacity:0.8;
	transition:all .3s;
}






@media screen and (min-width: 1759px){

}

@media screen and (min-width: 768px) and (max-width: 1279px) {
	#product ul.cards li.card:nth-of-type(2) .card_content, #product ul.cards li.card:nth-of-type(6) .card_content{
		background: url(../img/top/product_card2.png) no-repeat center right / 180%
	}

	#product ul.cards li.card:nth-of-type(1) .card_content, #product ul.cards li.card:nth-of-type(5) .card_content{
		background: url(../img/top/product_card1.png) no-repeat center right / 180%;

	}

	#product ul.cards li.card:nth-of-type(3) .card_content {
		background: url(../img/top/product_card3.png) no-repeat center right / 180%;
	}

	#column .abs{
		bottom: 2%;
		right: 4%;
	}
	#column .column_slider_wrap{
		padding: 6% 0 16%;
	}

	#column .slick-dots-wrap{
		margin-top: 20px;
	}
}

@media screen and (max-width: 1279px){
	h2 {
		font-size: 18px;
	}

	h3{
		font-size: 20px;
	}

	#about .catch {
		font-size: 24px;
	}

	#about .img2 {
		top: 10%;
	}

	#product ul.cards p{
		font-size: 15px;
	}

	#product ul.cards li.card .content_r {
		width: 54%;
	}

	#product ul.cards li.card .content_l{
		width: 46%;
	}

	#product ul.cards li.card .card_content{
		gap: 0 40px;
	}
	#product ul.cards li.card .content_l .img img {
		height: 300px;
	}

	#mv .txt{
		width: 92%;
		font-size: 18px;
		text-align: center;
	}

	#mv .news_latest{
		width: 50%;
		clip-path: polygon(4% 0, 100% 0%, 96% 100%, 0% 100%);
	}

	#product_link .flip-card span {
		font-size: 21px;
	}

	#column .column_slider .column_head .thum {
		width: 300px;
		height: 180px;
	}

	#column .column_slider_container{
		padding-left:3%;		
	}

	#column .column_slider .slick-slide{
		padding: 10px 10px 40px;
	}

}

@media screen and (max-width: 1023px){
	#product ul.cards li.card .content_l .img img {
		height: 250px;
	}
}

@media (max-width: 767px) {
	h2 {
		font-size: 14px;
	}
	h3 {
		font-size: 24px;
		line-height: 1.4;
	}
	#column h3{
		font-size:18px;
	}
	section{
		padding: 20% 0;
	}
	section .lead p{
		text-align:left;
	}
	.util_ttl .en {
		font-size: 52px;
	}

	#mv h1{
		width: 100%;
		max-width: 320px;
	}


	#mv .mv_slider{
		height: 80vh;
		margin-top:-20px;
	}

	#mv .mv_slider .slide_r{
		margin:0 0 0 -0.2px;
	}
	#mv .mv_slider .slide_l{
		margin:0 -0.2px 0 0;
	}

	#column .column_slider_nav {
		bottom: -40px;
		left: 10px;
		justify-content: flex-start;
	}


	#mv .news_latest time,
	#mv .news_slide .wrapper span{
		font-size: 14px;
	}
	#about .txt_wrap{
		width: 100%;
	}

	#about .catch {
		font-size: 20px;
	}

	#about .img2{
		top: 6%;
	}

	#about .img1, #about .img2{
		width: 40%;
	}

	#about .element{
		bottom: 4%;
	}

	.element{
		width: 70%;
	}

	#product .inner .util_btn {
		margin: 8% auto 0%;
	}

	#product ul.cards li.card{
		width: 80%;
	}

	#product ul.cards li.card .card_content{
		flex-direction: column;
	}
	#product ul.cards li.card .content_r{
		width: 100%;
	}

	#product ul.cards li.card .content_l{
		width: 70%;
		margin: 0 auto;
	}

	#product ul.cards{
		margin: 12% 0 0;
	}
	#product ul.cards li.card ul li{
		padding: 2px 8px;
	}


	#product ul.cards li.card:nth-of-type(1) .card_content,
	#product ul.cards li.card:nth-of-type(5) .card_content{
		background: url(../img/top/product_card1_sp.png) no-repeat center center / 190% 190%;
	}

	#product ul.cards li.card:nth-of-type(2) .card_content,
	#product ul.cards li.card:nth-of-type(6) .card_content{
		background: url(../img/top/product_card2_sp.png) no-repeat center center / 190% 190%;
	}

	#product ul.cards li.card:nth-of-type(3) .card_content{
		background: url(../img/top/product_card3_sp.png) no-repeat center center / 190% 190%;
	}

	#product ul.cards li.card:nth-of-type(4) .card_content{
		background: url(../img/top/product_card4_sp.png) no-repeat center center / 190% 190%;
	}

	#product ul.cards li.card .util_btn{
		margin: 8% auto ;
	}

	#product ul.cards li.card ul li:nth-of-type(n + 3),
	#column ul.tag li:nth-of-type(n + 3){
		display: none;
	}

	#product ul.cards li p{
		font-size: 14px;
	}

	#product ul.cards li.card{
		top: 12%;
	}

	#product_link .flip-card{
		width: 80%;
		padding: 16% 2%;
	}

	#product_link .flip-card span{
		font-size: 18px;
	}

	#product_link .flip-container{
		width: 60%;
	}

	#product_link .flip-card.card1 {
		left: -20%;
	}

	#product_link .element{
		width: 80%;
		bottom: 10%;
	}

	#column .column_slider_wrap{
		padding: 12% 0;
	}

	#column .abs {
		position: static;
		margin: 0 auto;
	}


	#column .slick-dots li,
	#column .column_slider_nav .slick-dots button{
		width: 30px;
	}

	#column .slick-prev,
	#column .slick-next {
		position: relative;
		width: 60px;
		height: 60px;

	}


	#column .column_slider_nav .slick-dots-wrap {
		position: absolute;
		bottom: 90px;
		left: 10px;
	}
	#column .slick-next:before{
		left: 30%;
	}

	#column .btn_inner{
		margin: 40px 20px 0 0;
	}

	#news .content_l,
	#news .content_r{
		width: 100%;
	}
	#news .inner{
		width: 92%;
		padding: 8% 4%;
	}
	#news .lead{
		margin: 0 0 8%;
	}

	#news .util_btn{
		margin: 10% auto 0;
	}
	#access .element{
		height: 20vh;
	}
	#access .content_wrap .content_r{
		width: 100%;
		margin: 0 0 6%;
	}

	#access .content_wrap .content_r iframe{
		height: 300px;
	}
	#access address{
		margin-top: 10px;
		font-size: 16px;
	}

	#access .content_l{
		margin: 4% 0;
	}

	#access {
		padding: 0 0 20%;
	}
	#product ul.cards li.card .content_r .bland{
		line-height: 1;
		padding: 6% 0 3%;
		font-size: 21px;
	}
	#product ul.cards li.card .content_r .bland span.ja{
		font-size: 12px;
	}
	#news time{
		font-size:14px;
	}
	#news .news_head{
		margin:0 0 4px;
		align-items: flex-end;
	}
	#news h3{
		font-size:18px;
	}
	#news .news_head .cate {
		font-size: 12px;
	}
	#news ul li{
		padding: 6% 0;
	}
	#product ul.cards li p{
		margin-top:4%;
	}
	#line{
	padding:6% 0;
}
}

@media (max-width: 540px) {
	#mv .news_latest{
		width: 92%;
	}



	#column .column_slider .slick-slide{
		padding: 20px 10px 20px;
		margin: 0 6px;
	}
	#column .column_slider_container{
		padding-left:0%;		
	}
	#mv .news_slide .wrapper{
		animation: marquee 40s linear infinite;
	}

}


@media (max-width: 1024px) and (min-height:800px){
	#mv .mv_slider {
		height: 60vh;
	}
}