@charset "utf-8";
/* CSS Document */

p{
	margin:0;
	}

p.items{
	margin:0 auto;
	width:100%;
	background:rgba(1,1,1,.2);
	line-height:180%;
	text-align:center;
	font-size:0.9em;
	position: absolute;
	bottom:0;
	}

a{
	text-decoration:none;
	color:#fff;
	}

body{
	margin:0;
	padding:0;
	color:#fff;
	background-color:#000;
	background-position:center center;
	background-attachment:fixed;
	font-family: 'Varela Round', sans-serif;
	}

@media (max-width: 768px) {
	body{
		font-size:16px;
		}

	a.anchor{
	    display: block;
	    padding-top: 70px;
	    margin-top: -70px;
	}
	}

@media (min-width: 769px) and (max-width: 1920px) {
	body{
		font-size:20px;
		}

	a.anchor{
	    display: block;
	    padding-top: 150px;
	    margin-top: -150px;
	}
	}

@media (min-width: 1921px) {
	body{
		font-size:24px;
		}

	a.anchor{
	    display: block;
	    padding-top: 180px;
	    margin-top: -180px;
	}
	}

ul{
	margin:0;
	}

/* 補足 */

#hosoku{
	margin:0 auto;
	display:block;
	position:fixed;
	text-align:center;
	bottom:0;
	width:100vw;
	height:auto;
	padding:0.5em;
	background-color:rgba(100,170,240,.5);
	z-index:999;
	}

.notes{
	margin:0 auto;
	margin-top:20px;
	margin-bottom:20px;
	width:50%;
	font-size:0.8em;
	text-align:center;
	background-color:rgba(255,255,255,.1);
	border-radius:10px;
	border:dashed 2px #fff;
	padding:10px;
	box-sizing:border-box;
	}

.notes.js-active{
	display:none;
	}

.karispace{
	height:400px;
	width:100%;
	}

/* 文字装飾 */

.bold{
	font-weight:bold;
	}

@media (max-width: 768px) {

	.S{
		font-size:.8em;
	}

	.L{
		font-size:1.5em;
	}

	.LL{
		font-size:3em;
	}
}

@media (min-width: 769px) {

	.S{
		font-size:.8em;
	}

	.L{
		font-size:2em;
	}
	.LL{
		font-size:2.5em;
	}
}

.marker{
	background:linear-gradient(transparent 60%, rgba(100, 255, 60,.8) 60%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 1s;
}

.marker.on{
	background-size:100% 100%;
}

.marker_news{
	background:linear-gradient(transparent 60%, rgba(30, 130, 220,.8) 60%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 1s;
}

.marker_news.on{
	background-size:100% 100%;
}

.marker_amazon{
	background:linear-gradient(transparent 40%, rgba(237, 175, 40,1) 40%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 1s;
}

.marker_amazon.on{
	background-size:100% 100%;
}

.marker_agent{
	background:linear-gradient(transparent 40%, rgba(200, 25, 25,.5) 40%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 1s;
}

.marker_agent2{
	background:linear-gradient(transparent 40%, rgba(30, 130, 220,.5) 40%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 1s;
}

.marker_agent.on , .marker_agent2.on{
	background-size:100% 100%;
}

.nametag{
	padding:5px 10px 15px 10px;
	font-size:1em;
	font-weight:bold;
	line-height:150%;
}

/* トップバー */

@media (max-width: 768px) {

	.top-bar{
		position:fixed;
		width:100%;
		height:50px;
		background-color:#fff;
		margin:0;
		padding:10px 10px 0px 10px;
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index:9900;
		}

	.toplogo{
		width:240px;
		height:30px;
	}

	.sns-box{
		width:100%;
		height:20px;
		margin:0;
		padding-top:5px;
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.sns-logo{
		height:20px;
		width:auto;
	}

	.return{
		position:fixed;
		top:57px;
		right:7px;
		background-color:#fff;
		background-image:url(../img/return.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:60%;
		width:40px;
		height:40px;
		border-radius:20px;
		z-index:9999;
	}

	.mail{
		position:fixed;
		top:57px;
		right:7px;
		background-color:#fff;
		background-image:url(../img/mail.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:60%;
		width:40px;
		height:40px;
		border-radius:20px;
		z-index:9999;
	}

}

@media (min-width: 769px) {
	.top-bar{
		position:fixed;
		width:100%;
		height:4em;
		background-color:#fff;
		margin:0;
		padding:30px 30px 0px 30px;
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index:9999;
		}

	.toplogo{
		height:50px;
	}
	.sns-box{
		width:140px;
		height:30px;
		margin:0;
		box-sizing:border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.sns-logo{
		height:30px;
		width:auto;
	}

	.return{
		position:fixed;
		top:100px;
		right:10px;
		background-color:#fff;
		background-image:url(../img/return.png);
		background-position:center;
		background-repeat:no-repeat;
		width:60px;
		height:60px;
		border-radius:30px;
		z-index:9999;
	}

	.mail{
		position:fixed;
		top:100px;
		right:10px;
		background-color:#fff;
		background-image:url(../img/mail.png);
		background-position:center;
		background-repeat:no-repeat;
		width:60px;
		height:60px;
		border-radius:30px;
		z-index:9999;
	}

}

/* 見出し */

h1{
	line-height:150%;
	font-size:1.5em;
	font-weight:bold;
	text-decoration:underline dotted;
	margin:0;
	padding:0;
	}

h2{
	margin:0;
	padding:0;
	font-size:1.1em;
	font-weight:bold;
	}

h3{
	margin:0;
	padding:.5em 1.4em .5em 1.4em;
	line-height:100%;
	border:solid 1px #fff;
	background-color:rgba(0,0,0,.6);
	line-height:140%;
	font-size:1.4em;
	}

h4{
	margin:0;
	padding:2px;
	font-size:1.3em;
	font-weight:bold;
}

h5{
	margin:0;
	padding:2px;
	font-size:1.2em;
	font-weight:bold;
}

/* タイトル */

.title00{
	opacity:0;
	filter:blur(5em);
	transition-duration: .8s;
	margin-bottom:30px;
}

.title00.on{
	opacity:1;
	filter:blur(0);
	width:auto;
}

.title01{
	opacity:0;
	filter:blur(5em);
	transition-duration: .8s;
}

.title01.on{
	opacity:1;
	filter:blur(0);
	width:auto;
}

.title02{
	opacity:0;
	filter:blur(5em);
	transition-duration: .8s;
}

.title02.on{
	opacity:1;
	filter:blur(0);
	width:auto;
}

.title03{
	opacity:0;
	filter:blur(5em);
	transition-duration: .8s;
}

.title03.on{
	opacity:1;
	filter:blur(0);
	width:auto;
}

/* 販売中アイテム */
.onsale{
	width:230px;
	height:auto;
	margin:5px;
	box-sizing:border-box;
	background-color:#606060;
}
.onsale_lineup{
	width:100%;
	height:auto;
	display:flex;
	text-align:center;
	justify-content:space-evenly;
	flex-wrap:wrap;
	}

/* agent */
@media (max-width: 768px) {
	.agent{
		margin:0 auto;
		width:80%;
		max-width:400px;
		height:auto;
		background-color:#fff;
		color:#303030;
		margin-bottom:60px;
		box-sizing:border-box;
	}

	.agent_img{
		width:100%;
		height:auto;
	}
}

@media (min-width: 769px) {
	.agent{
		margin:0 auto;
		display:flex;
		width:80%;
		max-width:800px;
		height:auto;
		background-color:#fff;
		color:#303030;
		margin-bottom:90px;
		border:solid 1px #fff;
		box-sizing:border-box;
	}

	.agent_img{
		width:auto;
		height:300px;
	}
}

.agent_text{
	padding:10px;
}

/* amazon */
@media (max-width: 768px) {
	.amazon_parts{
		width:150px;
		height:150px;
		aspect-ratio:1/1;
		background-image:url(../img/amazon01.jpg),url(../img/amazon02.jpg),url(../img/amazon03.jpg);
		background-size:cover,cover,cover;
		background-position:0px 0px,0px -150px,0px 150px;
		background-repeat:no-repeat;
		border-radius:75px;
		animation:amazon_sp 6s ease 0s infinite;
	}

	.amazon_ad{
		margin:0 auto;
		margin-bottom:80px;
		width:90%;
		height:170px;
		border:solid 5px #e6960a;
		background-color:#fff;
		color:#303030;
		padding:5px;
		border-radius:85px;
		display: flex;
		align-items: left;
		justify-content: left; 
		box-sizing:border-box;
	}
	.amazon_text{
		width:100%;
		height:auto;
		padding-left:5px;
		padding-right:30px;
		font-size:.9em;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.amazon_ad{
		margin:0 auto;
		margin-bottom:80px;
		width:90%;
		height:170px;
		border:solid 5px #e6960a;
		background-color:#fff;
		color:#303030;
		font-size:13px;
		padding:5px;
		border-radius:85px;
		display: flex;
		align-items: left;
		justify-content: left; 
		box-sizing:border-box;
	}
}

@media (min-width: 769px){
	.amazon_parts{
		width:200px;
		height:200px;
		aspect-ratio:1/1;
		background-image:url(../img/amazon01.jpg),url(../img/amazon02.jpg),url(../img/amazon03.jpg);
		background-size:cover,cover,cover;
		background-position:0px 0px,0px -200px,0px 200px;
		background-repeat:no-repeat;
		border-radius:100px;
		animation:amazon 6s ease 0s infinite;
	}

	.amazon_ad{
		margin:0 auto;
		margin-bottom:80px;
		width:60%;
		min-width:600px;
		height:220px;
		border:solid 5px #e6960a;
		background-color:#fff;
		color:#303030;
		padding:5px;
		border-radius:110px;
		display: flex;
		align-items: left;
		justify-content: left; 
		box-sizing:border-box;
	}
	.amazon_text{
		width:100%;
		height:auto;
		padding-left:20px;
		padding-right:50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* 各タイトルバック */

.flexcontact{
	margin:0 auto;
	width:100%;
	height: auto;
	aspect-ratio:16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:url(../img/contact.jpg);
	background-positon:center;
	background-size:cover;
}

.news{
	margin:0 auto;
	margin-top:80px;
	margin-bottom:50px;
	padding:0 3em 0 3em;
	width:100%;
	height: auto;
	line-height:180%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing:border-box;
}

.flexparts{
	margin:0 auto;
	width:100%;
	height: auto;
	aspect-ratio:16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:url(../img/parts.jpg);
	background-positon:center;
	background-size:cover;
}

.flexmazak{
	margin:0 auto;
	width:100%;
	height: auto;
	aspect-ratio:16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:url(../img/mazak.jpg);
	background-positon:center;
	background-size:cover;
}

.flexcustom{
	margin:0 auto;
	width:100%;
	height: auto;
	aspect-ratio:16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:url(../img/custom.jpg);
	background-positon:center;
	background-size:cover;
}

.flexcatalog{
	margin:0 auto;
	width:100%;
	height: auto;
	aspect-ratio:16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:url(../img/parts.jpg);
	background-positon:center;
	background-size:cover;
}

/* リンク */

.link-banner{
	margin:10px 0px 10px 0px;
	padding:5px 0px 5px 10px;
	width:100%;
	line-height:200%;
	background: linear-gradient(to right,#83b84b 10%,#4ead56 40%,#2774b8 50%,#224fc9 99%);
	background-position: 80% 99%;
	background-size: 400% auto;
	transition: all 0.3s ease-out;
	box-sizing:border-box;
	}
.link-banner:hover{
	background-position: 1% 30%;
	}

.page-link{
	margin:0 auto;
	margin-top:2em;
	text-align: center;
	width:fit-content;
	padding:0px 2em 0px 2em;
	line-height:200%;
	color:#fff;
	border:solid 1px #fff;
	background: linear-gradient(to right,#fff 0%,#fff 50%,#000 51%,#000 100%);
	background-position: 80% 99%;
	background-size: 400% auto;
	transition: all 0.3s ease-out;
	box-sizing:border-box;
	}
.page-link:hover{
	color:#303030;
	background-position: 1% 30%;
	border:solid 1px #303030;
	}

.page-link2{
	margin:0 auto;
	margin-top:2em;
	text-align: center;
	width:fit-content;
	padding:0px 2em 0px 2em;
	line-height:200%;
	color:#303030;
	border:solid 1px #303030;
	background: linear-gradient(to right,#303030 0%,#303030 50%,#fff 51%,#fff 100%);
	background-position: 80% 99%;
	background-size: 400% auto;
	transition: all 0.3s ease-out;
	box-sizing:border-box;
	}
.page-link2:hover{
	color:#fff;
	background-position: 1% 30%;
	}
	
/* ＳＰナビ */

	/*開閉用ボタン（ハンバーガーボタン）*/
	.menu-btn {
		position: fixed;
		top: 0;
		right: 0;
		margin:0;
		width: 30px;
		height: 30px;
		cursor: pointer;
		z-index: 9999;
		transition: all .3s ease-in-out;
		}
	.menu-btn-line {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: 2px;
		width: 40%;
		background: #303030;
		transition: all .3s ease-in-out;
	}
	.menu-btn-line::before,
	.menu-btn-line::after {
		content: "";
		height: 2px;
		width: 100%;
		background: #303030;
		position: absolute;
		right: 0;
		transition: inherit;
		}
	.menu-btn-line::before{
		top: -5px;
		}
	.menu-btn-line::after{
		top: 5px;
		}

	/* 開閉用ボタンがクリックされた時のスタイル */
	.open .menu {
		transition: all .6s ease-in-out;
		top:0;
		width:100%;
		height:calc(100% - 2em);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color:rgba(0,0,0,.3);
		opacity:1;
		}
	.open .menu-btn {
		border-color: #000;
		}
	.open .menu-btn-line{
		background-color: transparent;
		}
	.open .menu-btn-line::before,
	.open .menu-btn-line::after {
		top: 0;
		}
	.open .menu-btn-line::before {
		transform: rotate(45deg);
		}
	.open .menu-btn-line::after {
		transform: rotate(-45deg);
		}

	/*開いたメニュー*/

	.menu-bar{
		width:100%;
		height:2em;
		background:#fff;
		position:fixed;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index:9998;
		}

	.menu {
		margin:0 auto;
		padding-top:2em;
		position: fixed;
		top:-100vw;
		left:0px;
		right:0px;
		width: 100%;
		height: 0px;
		opacity:0;
		transition: all .6s ease-in-out;
		z-index: 9997;
	}
	.menu ul {
		margin:0 auto;
		padding-left:0;
		padding-top:2em;
		text-align:center;
		background-color:#606060;
		list-style-type: none;
		}
	.menu li {
		padding-top:1.5em;
		width: 100%;
		height: 3em;
		line-height:200%;
		}
	.menu li li{
		display:block;
		border:none;
		padding-left:2em;
		background-color:#606060;
		width: 100%;
		height: auto;
		font-size:.8em;
		line-height:200%;
		box-sizing:border-box;
		}
	.menu li a {
		color: #fff;
		text-decoration: none;
		}

/* ＰＣナビ */

.icons{
	display:flex;
	justify-content:space-around;
	width:10em;
	height:auto;
	margin-top:.25em;
	align-items: center;
	vertical-align:middle;
	box-sizing:border-box;
}
.pc-nav{
	top:4em;
	background-color:#303030;
	display:flex;
	justify-content:space-evenly;
	line-height:200%;
	height:2em;
	width:100%;
	margin:0 auto;
	position:fixed;
	z-index:10000;
	padding:0;
	text-align:center;
}

@media (max-width: 768px) {
	.pc-nav{
		max-width:600px;
	}
}

@media (min-width: 769px){
	.pc-nav{
		max-width:100%;
	}
}

.pc-nav > li{
	width:auto;
	color:#fff;
	box-sizing:border-box;
}

.pc-nav li{
	list-style:none;
	position:relative;
}

.pc-nav li ul{
	width:100%;
	margin:0;
	padding:0;
	z-index:10000;
	font-size:0.8em;
}

.pc-nav li ul li ul{
	position: absolute;
	left: 100%;
	top:25%;
	width:100%;
	right:100%;
	margin:0;
	padding:0;
	z-index:10000;
	font-size:1em;
}

.pc-nav li a{
	color:#fff;
	display:block;
	text-decoration:none;
	width:100%;
	height: 2em;
	vertical-align:middle;
	box-sizing:border-box;
	justify-content: center;
}

.pc-nav li a:hover,.pc-nav li li a:hover,.pc-nav li li lia:hover{
	transition-duration:.5s;
	color:#fff1a3;
}

.pc-nav li li {
	margin:0;
	display:none;
}

.pc-nav li li a {
	border-top: 1px solid #ddd;
	border-right:0px;
	box-sizing:border-box;
	background-color:#4b4b4b;
	box-sizing:border-box;
}

.pc-nav li li li a {
	border-top: 1px solid #ddd;
	border-right:0px;
	box-sizing:border-box;
	background-color:#6b6b6b;
	box-sizing:border-box;
}

.pc-nav li:hover > ul > li {
	height: 2em;
	display:block;
}

.pc-nav li.langage{
	background-color:#fff;
	color:#2b2b2b;
	}

@media (max-width: 768px) {
	.nav-wrapper{
		height:30px;
	}
}

@media (min-width: 768px) {
	.nav-wrapper{
		height:6em;
	}
}

/* コンセプトコラム */

@media (max-width: 768px) {

	.column-left-img{
		margin:0 auto;
		width:100%;
		height:auto;
	}

	.column-right-img{
		margin:0 auto;
		width:100%;
		height:auto;
	}
	.column-text1{
		width:auto;
		padding:3em 1em 3em 1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;
	}
	.column-text1.move{
		transition-duration:1s;
		opacity:1;
	}

	.column-text2{
		width:auto;
		padding:3em 1em 3em 1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;
	}
	.column-text2.move{
		transition-duration:1s;
		opacity:1;
	}

	.column-text3{
		width:auto;
		padding:3em 1em 3em 1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;
	}
	.column-text3.move{
		transition-duration:1s;
		opacity:1;
	}

	.column-text4{
		width:auto;
		padding:3em 1em 3em 1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;
	}
	.column-text4.move{
		transition-duration:1s;
		opacity:1;
	}
}
@media (min-width: 769px){

	.block1{
		clear:both;
		position:relative;
		left:30%;
		margin:0 auto;
		width:100%;
		height:auto;
		opacity:0;
	}

	.block1.move{
		transition-delay:.3s;
		transition-duration:1.2s;
		left:0%;
		opacity:1;
	}

	.block2{
		clear:both;
		position:relative;
		right:30%;
		margin:0 auto;
		width:100%;
		height:auto;
		opacity:0;
	}

	.block2.move{
		transition-delay:.3s;
		transition-duration:1.2s;
		right:0%;
		opacity:1;
	}

	.block3{
		clear:both;
		position:relative;
		left:30%;
		margin:0 auto;
		width:100%;
		height:auto;
		opacity:0;
	}

	.block3.move{
		transition-delay:.3s;
		transition-duration:1.2s;
		left:0%;
		opacity:1;
	}

	.block4{
		clear:both;
		position:relative;
		right:30%;
		margin:0 auto;
		width:100%;
		height:auto;
		opacity:0;
	}

	.block4.move{
		transition-delay:.3s;
		transition-duration:1.2s;
		right:0%;
		opacity:1;
	}

	.column-left-img{
		width:40%;
		min-width:376px;
		height:auto;
		float: left;
		margin-right:10px;
		box-sizing:border-box;
	}

	.column-right-img{
		width:40%;
		min-width:376px;
		height:auto;
		float: right;
		margin-left:10px;
		box-sizing:border-box;
	}

	.column-text1{
		width:auto;
		padding:1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;
	}

	.column-text1.move{
		transition-delay:1.5s;
		transition-duration:1s;
		opacity:1;
	}

	.column-text2{
		width:auto;
		padding:1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;
	}

	.column-text2.move{
		transition-delay:1.5s;
		transition-duration:1s;
		opacity:1;
	}

	.column-text3{
		width:auto;
		padding:1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;

	}
	.column-text3.move{
		transition-delay:1.5s;
		transition-duration:1s;
		opacity:1;
	}

	.column-text4{
		width:auto;
		padding:1em;
		box-sizing:border-box;
		overflow: hidden;
		opacity:0;

	}
	.column-text4.move{
		transition-delay:1.5s;
		transition-duration:1s;
		opacity:1;
	}
}

.column-area{
	margin:0 auto;
	width:100%;
	height:auto;
	overflow:hidden;
	z-index:1;
	}

/* モデル
.jb-photo1{
	margin:0 auto;
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	background-image:url(img/photo1-1.jpg);
	background-size:cover;
	z-index:2;
	}

.jb-move1{
	margin:0 auto;
	margin-top:10px;
	background:gray;
	aspect-ratio:16/9;
	display: flex;
	align-items: center;
	justify-content: center;
	color:#fff;
	}

.parts{
	width:10em;
	height:10em;
	font-size:0.8em;
	background-color:#1b1b1b;
	color:#fff;
	margin:10px;
	border-radius:10%;
	text-align:center;
	padding:5px;
	box-sizing:border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	}

.spec-area{
	width:50%;
	height:100%;
	padding:15px;
	box-sizing:border-box;
	vertical-align:top;
	}

.slider-container{
	margin:0 auto;
	width:50%;
	}

.slider-container{
	margin:0 auto;
	width:50%;
	}

.jb-thumb-container{
	margin:0 auto;
	width:60%;
	}

.slider-jb-thumb1 .slick-track {
	transform: unset !important;
	}

.jb{
	margin:0 auto;
	padding:15px 15px 0px 15px;
	width:100%;
	box-sizing:border-box;
	overflow:hidden;
	}

.jb-thumb{
	padding:15px;
	width:100%;
	box-sizing:border-box;
	overflow:hidden;
	}

.w-flex-parts{
	margin:0 auto;
	width:100%;
	height:auto;
	background-color:#fff;
	display:flex;
	justify-content: space-evenly;
	flex-wrap:wrap;
	color: #1b1b1b;
	}

.b-bar{
	margin:0 auto;
	line-height:200%;
	width:calc(100% - 30px);
	padding-left:10px;
	background-color:#224fc9;
	color:#fff;
	box-sizing:border-box;
	}

@media (min-width: 769px){

	.jb-thumb:hover{
		transform:scale(1.05);
		transition: .3s;
		}

	.parts:hover{
		transform:scale(1.05);
		transition: .3s;
		}
	}


@media (max-width: 768px){

	.spec-area{
		margin:0 auto;
		width:100%;
		height:100%;
		padding:15px;
		box-sizing:border-box;
		vertical-align:top;
		overflow-wrap: normal;
		}

	.slider-container{
		margin:0 auto;
		width:100%;
		}
}*/


/* パーツページ */

.slider-container{
	margin:0 auto;
	width:40%;
	}

.parts-thumb-container-2p{
	margin:0 auto;
	width:40%;
	}

.parts-thumb-container-3p{
	margin:0 auto;
	width:60%;
	}

.parts-thumb-container-4p{
	margin:0 auto;
	width:80%;
	}

.slider-parts-thumb01 .slick-track {
	transform: unset !important;
	}

.parts-img{
	margin:0 auto;
	width:100%;
	box-sizing:border-box;
	overflow:hidden;
	}

.parts-thumb{
	padding:.5em;
	box-sizing:border-box;
	overflow:hidden;
	}

.w-flex-parts{
	margin:0 auto;
	width:100%;
	height:auto;
	background-color:#fff;
	display:flex;
	justify-content: space-evenly;
	flex-wrap:wrap;
	color: #1b1b1b;
	}

.b-bar{
	margin:0 auto;
	line-height:200%;
	width:calc(100% - 30px);
	padding-left:10px;
	background-color:#224fc9;
	color:#fff;
	box-sizing:border-box;
	}

@media (min-width: 769px){

	.spec-area{
		width:60%;
		height:100%;
		padding:0em 1em 0em 1em;
		box-sizing:border-box;
		vertical-align:top;
	}

	.parts-area{
		margin:0 auto;
		width:80%;
		height:auto;
		margin-top:2em;
		display:flex;
		padding:10px 0px 10px 0px;
	}
	.jb-thumb:hover{
		transform:scale(1.05);
		transition: .3s;
		}

	.parts:hover{
		transform:scale(1.05);
		transition: .3s;
		}
	}


@media (max-width: 768px){

	.parts-area{
		margin:0 auto;
		width:100%;
		height:auto;
		margin-top:2em;
		padding:1em 0 1em 0;
	}

	.spec-area{
		margin:0 auto;
		width:100%;
		height:100%;
		padding:1em 1em 0 1em;
		box-sizing:border-box;
		vertical-align:top;
		overflow-wrap: normal;
		}

	.slider-container{
		margin:0 auto;
		width:100%;
		padding:0 1em;
		box-sizing:border-box;
		}
}

/* パーツテーブル */

table.spec{
	border-collapse:collapse;
	background-color:#fff;
	line-height:150%;
	font-size:.8em;
	min-width:100%;
}

table.spec tr:nth-child(odd) {
	background-color:#ddd;
}

table.spec th{
	width:auto;
	font-weight:bold;
	padding:1em 0 0 1em;
	box-sizing:border-box;
}
table.spec td{
	width:auto;
	padding:1em;
	box-sizing:border-box;
}
table.spec th,td {
	color:#303030;
	vertical-align:top;
	text-align:left;
	display:block;
}

/* カテゴリ一覧 */

.category{
	margin:0;
	padding:0;
	width:100%;
	border-top:solid 1px #fff;
}

.category > li{
	color:#fff;
	margin:0 auto;
	padding-left:.5em;
	padding-bottom:1em;
	}

.category li a{
	text-decoration:none;
	color:#fff;
	line-height:200%;
	display:block;
	}

.category li{
	list-style:none;
	background-color:#4b4b4b;
}

.category >li ul li{
	border-top:solid 1px #fff;
}
.category li ul li{
	background-color:#5b5b5b;
	font-size:0.9em;
	padding-left:.5em;
}

.category li ul li ul li{
	background-color:#6b6b6b;
	padding:0em .5em 0em .5em;
}

/* ホーム画面トップのスライダー */

.slider{
	margin: 0 auto;
	width:100%;
	height: 100%;
	background-color:#1b1b1b;
}

.slide-flame{
	margin:0 auto;
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	overflow:hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flexparts_move{
	margin:0 auto;
	width:100%;
	height: auto;
	aspect-ratio:16/9;
	display: flex;
	align-items: center;
	justify-content: center;
}


img.anime1{
	animation: zoom2 4s ease-out both;
}

img.anime2{
	animation: zoom2 4s ease-out 14.2s both;
}

.textblur1{
	animation: blur1 4s ease-out 3.2s both;
}

.textblur2{
	animation: blur1 4s ease-out 10.8s both;
}

.textblur3{
	animation: blur1 4s ease-out 18.2s both;
}

.textblur4{
	animation: blur2 4s ease-out 18.2s both;
}
.imgopa1{
	animation: opa 1s ease-out 7.7s both;
}

.imgopa2{
	animation: opa 1s ease-out 8.6s both;
}

/* ジェットスキーモデル選択のスライダー */

.slick-next{ right:40px!important; }
.slick-prev{ left:40px!important; }
.slick-arrow{ z-index:2!important; }

.slider-item{
	margin: 0 auto;
	width:100%
	height: 100%;
}

.slide-flame2{
	margin:0 auto;
	margin:1.5em;
	width:100%;
	height:auto;
	border-radius:10px;
	overflow:hidden;
}

.item1{
	width:100%;
	height:auto;
	aspect-ratio:5/4;
	background-color:#1b1b1b;
	background-image:url(../img/jb1.jpg);
	background-size:cover;
	overflow:hidden;
	position: relative;
}

.item2{
	width:100%;
	height:auto;
	aspect-ratio:5/4;
	background-color:#1b1b1b;
	background-image:url(../img/jb2.jpg);
	background-size:cover;
	overflow:hidden;
	position: relative;
}

.item3{
	width:100%;
	height:auto;
	aspect-ratio:5/4;
	background-color:#1b1b1b;
	background-image:url(../img/jb3.jpg);
	background-size:cover;
	overflow:hidden;
	position: relative;
}

.item4{
	width:100%;
	height:auto;
	aspect-ratio:5/4;
	background-color:#1b1b1b;
	background-image:url(../img/jb4.jpg);
	background-size:cover;
	overflow:hidden;
	position: relative;
}

.item5{
	width:100%;
	height:auto;
	aspect-ratio:5/4;
	background-color:#1b1b1b;
	background-image:url(../img/jb5.jpg);
	background-size:cover;
	overflow:hidden;
	position: relative;
}

@media (min-width: 769px){
.slide-flame2:hover{
		transition-duration: .3s;
		transform:scale(1.1);
		border-radius:30px;
	}
}

/* アニメーション */

@keyframes kaimen{
	100%{
	background-size:60%,120%;
	}
}

@keyframes amazon{
	22%{
	background-position:0px 0px,0px -200px,0px 200px;
	}
	33%{
	background-position:0px 200px,0px 0px,0px 200px;
	}
	55%{
	background-position:0px 200px,0px 0px,0px 200px;
	}
	66%{
	background-position:200px 200px,0px -200px,0px 0px;
	}
	88%{
	background-position:200px 0px,200px -200px,0px 0px;
	}
	100%{
	background-position:0px 0px,0px 200px,-200px 0px;
	}
}

@keyframes amazon_sp{
	22%{
	background-position:0px 0px,0px -150px,0px 150px;
	}
	33%{
	background-position:0px 150px,0px 0px,0px 150px;
	}
	55%{
	background-position:0px 150px,0px 0px,0px 150px;
	}
	66%{
	background-position:150px 150px,0px -150px,0px 0px;
	}
	88%{
	background-position:150px 0px,150px -150px,0px 0px;
	}
	100%{
	background-position:0px 0px,0px 150px,-150px 0px;
	}
}

@keyframes wave{
	0%{
	background-position:100% 90%,30% 30%;
	background-repeat: no-repeat, no-repeat;
	}
	50%{
	background-position:100% 90%,80% 80%;
	background-repeat: no-repeat, no-repeat;
	}
	100%{
	background-position:100% 90%,30% 30%;
	background-repeat: no-repeat, no-repeat;
	}
}

@keyframes opa{
	0%{
	opacity:0;
	}
	100%{
	opacity:1;
	}
}

@keyframes zoom{
	0%{
	transform: scale(1);
	}
	100%{
	transform: scale(1.2);
	}
}

@keyframes zoom2{
	0%{
	transform: scale(1);
	}
	100%{
	transform: scale(1.05);
	}
}

@keyframes blur1{
	0%{
	filter: blur(5px);
	}
	20%{
	filter: blur(0px);
	}
}

@keyframes blur2{
	0%{
	filter: blur(10px);
	}
	50%{
	filter: blur(0px);
	}
}

/* セクション */

.information{
	margin:0 auto;
	width:100%;
	padding:20px;
	text-align:center;
	background-color:#fff;
	color:#303030;
	box-sizing:border-box;
}

.mc_logo{
	width:100%;
	height:auto;
	aspect-ratio:16/9;
	background-image:url(../img/mc_logo.png),url(../img/kaimen.jpg);
	background-size:60%,100%;
	background-position:center,center;
	background-repeat:no-repeat,no-repeat;
}

.mc_logo.on{
	animation:kaimen 6s ease both;
	}

@media (min-width: 769px){
	.title{
		margin:0 auto;
		width:100%;
		font-size:1.2em;
		width:100%;
		line-height:300%;
		background-image:url(../img/logo-mini.png),url(../img/kaimen.jpg);
		background-size:30%,150%;
		animation-name: wave;
		animation-duration: 15s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		box-sizing:border-box;
		}
	}

@media (max-width: 768px){
	.title{
		margin:0 auto;
		width:100%;
		font-size:1.2em;
		width:100%;
		line-height:300%;
		background-image:url(../img/logo-mini2.png),url(../img/kaimen.jpg);
		background-size:20%,150%;
		animation-name: wave;
		animation-duration: 15s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		box-sizing:border-box;
		}
	}

.blend__over1{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	mix-blend-mode:hard-light;
	background-image:url(../img/texture1.png);
	background-position:center center;
	background-size:cover;
	z-index:1;
	}

.blend__over2{
	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	margin: auto;
    	mix-blend-mode:hard-light;
	background-image:url(../img/texture2.png);
	background-position:center center;
	background-size:cover;
	}

@media (max-width: 768px) {
	.body_flame{
		margin:0 auto;
		max-width:600px;
		height:auto;
		background-color:rgba(0,0,0,.6);
		z-index:1;
	}

	.textblock{
		width:100%;
		height: auto;
		aspect-ratio:16/9;
		display:grid;
		place-items:center;
		line-height:100%;
	}

	.flex_top{
		margin:0 auto;
		height:auto;
	}

	.message{
		width:100%;
		padding:2em;
		line-height:150%;
		box-sizing:border-box;
	}

	.private{
		width:90%;
		padding:2em;
		line-height:150%;
		box-sizing:border-box;
	}

	.flex_message{
		width:100%;
		padding:2em;
		line-height:150%;
		box-sizing:border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#x{
		margin:0 auto;
		width:100%;
		max-width:400px;
		height:100%;
		max-height:400px;
		padding:0em 2em 2em 2em;
		box-sizing:border-box;
		over-flow:hidden;
	}

	.b-flex{
		margin:0 auto;
		width:100%;
		height:auto;
	}

	.w-flex{
		margin:0 auto;
		max-width:600px;
		height:auto;
		background-color:#fff;
		color:#1b1b1b;
	}
}

@media (min-width: 769px){

	.textblock{
		width:100%;
		height:auto;
		aspect-ratio:16/9;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex_top{
		margin:0 auto;
		height:auto;
		display:flex;
		align-items: center;
		justify-content: center;
	}

	.message{
		width:60%;
		padding:1em;
		margin:2em;
		line-height:150%;
	}

	.private{
		width:60%;
		padding:1em;
		margin:2em;
		line-height:150%;
	}

	.flex_message{
		width:80%;
		padding:1em;
		margin:2em;
		line-height:150%;
		box-sizing:border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#x{
		width:40%;
		height:100%;
		max-height:400px;
		margin:3em 2em 2em 0em;
		box-sizing:border-box;
		over-flow:hidden;
	}

	.b-flex{
		margin:0 auto;
		width:100%;
		height:auto;
		display:flex;
	}

	.w-flex{
		margin:0 auto;
		width:100%;
		height:auto;
		background-color:#fff;
		color:#1b1b1b;
		display:flex;
	}
}


@media (min-width: 769px) and (max-width: 1920px) {
	.body_flame{
		margin:0 auto;
		max-width:1200px;
		height:auto;
		background-color:rgba(0,0,0,.6);
		z-index:1;
	}
}

@media (min-width: 1921px) {
	.body_flame{
		margin:0 auto;
		max-width:1600px;
		height:auto;
		background-color:rgba(0,0,0,.6);
		z-index:1;
	}
}

/*　トピック　*/

.topic{
	margin:0 auto;
	width:auto;
	max-width:600px;
	min-width:400px;
	height:auto;
	padding:0px 15px 15px 15px;
	text-shadow:none;
	background:rgba(255,255,255,0.5);
	}

.topic1{
	margin:0 auto;
	width:auto;
	max-width:600px;
	min-width:400px;
	height:auto;
	padding:15px;
	text-shadow:none;
	background:rgba(255,255,255,0.5);
	}

.topic2{
	width:400px;
	height:auto;
	padding:15px 15px 15px 15px;
	margin:50px;
	text-shadow:none;
	background:rgba(255,255,255,0.5);
	overflow:auto;
	}

.menulist{
	margin:0 auto;
	width:60%;
	max-width:600px;
	min-width:400px;
	height:auto;
	padding:0px 20px 40px 20px;
	color:#6e6357;
	text-shadow:none;
	background:rgba(255,255,255,0.5);
	outline:dashed 2px #968777;
	 outline-offset : -10px;
	}

/* 写真 */


/*　フッター */

.footer{
	margin:0 auto;
	clear:both;
	background: #543543;
	margin-top:0px;
	height:auto;
	font-size:16px;
	color: #fff;
	text-align:right;
	padding:20px;
	}

.shop-info{
	width:400px;
	margin-top:20px;
	margin-bottom:20px;
	margin-right:20px;
	padding:10px 20px 30px 20px;
	width:auto;
	height:auto;
	min-height:150px;
	color:#fff;
	}

.map{
	float:right;
	width:400px;
	height:400px;
	}

.copy{
	background: #543543;
	line-height:150%;
	font-size:16px;
	color: #fff;	
	padding:10px 40px 10px 10px;
	text-align:right;
	min-width:1000px;
	box-sizing:border-box;
	}

/* その他 */

@media (min-width: 769px){
	.pc-none{
		display:none;
		}
	}

@media (max-width: 768px){
	.sp-none{
		display:none;
		}
	}

.of{
	overflow: auto;
	}
.cb{
	clear:both;
}	
.fr{
	float:right;
	}
.fl{
	float:left;
	}

/*メールフォーム*/

table.formTable{
	margin:0 auto;
	margin-top:2em;
	margin-bottom:2em;
	width:80%;
	max-width:800px;
	border-collapse:collapse;
	box-sizing:border-box;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
	box-sizing:border-box;
}
table.formTable th{
	width:30%;
	min-width:80px;
	font-weight:normal;
	background:#efefef;
	color:#303030;
	text-align:left;
	box-sizing:border-box;
}
table.formTable td{
	min-width:70%;
}


@media (max-width: 768px){
	table.formTable {
		margin:0 auto;
		width:95%;
		max-width:600px;
		margin-bottom:2em;
	}
	table.formTable th, table.formTable td {
		margin:0 auto;
		width:95%;
		display:block;
	}
	table.formTable th {
		margin-top:10px;
		border-bottom:0;
		text-align:left;
	}
}

/*スライダー*/
.bg-slider {
    	width: 100%;
    	height: 100vh;
    	background-position:center center;
    	background-size: cover;
    	display: flex;
    	align-items: center;
    	justify-content: center;
	background-attachment:fixed;
}
.bg-slider2 {
    	width: 100%;
    	height: 40vh;
    	background-position:center center;
    	background-size: cover;
    	display: flex;
    	align-items: center;
    	justify-content: center;
	background-attachment:fixed;
}
.bg-slider_title{
    	color: #fff;
    	font-size: 48px;
    	line-height: 1.5;
    	font-weight: bold;
    	text-align:center;
    	text-shadow: 1px 1px 1px #000;
}
.spacer{
	height:50px;
}

/* ページトップへ */

#pageTop {
	position: fixed;
	bottom: 20px;
	right: 0px;
	z-index:9996;
}
#pageTop a {
	display: block;
	font-size:12px;
	border-radius: 30px 0px 0px 30px;
	padding-top:6px;
	padding-left:6px;
	padding-right:6px;
	width: 40px;
	height: 30px;
	opacity:.7;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#606060;
	color: #fff;
	font-weight: bold;
	text-decoration: bold;
	text-align: center;
	transition-duration: .3s;
}
#pageTop a:hover {
	transition-duration: .3s;
	text-decoration: none;
	opacity:1;

}

