@charset "UTF-8";
body {min-width: auto;}
article {position: relative;}
article::after,
article .ditail::before {
width: 100%;
height: 50px;
content: '';
visibility: visible;
background: rgba(35,24,21,.9) url(../images/logo.png) no-repeat right 20px center;
display: block;
clear: both;
position: absolute;
left: 0;
}
article .ditail::before {top: 0;}
article::after {bottom: 0;}
article .ditail {
background-repeat: repeat-y;
background-position: center top;
background-size: cover;
background-attachment: fixed;
position: relative;
}
article .ditail h4,
article .headline {font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;}
article .ditail .headline {
margin-bottom: 60px;
padding-bottom: 60px;
color: #fff;
text-align: center;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
article .ditail .headline h3 {
margin-bottom: .2em;
font-weight: 400;
line-height: 1.15em;
}
article .ditail .headline h3 span {
margin-bottom: .4em;
color: #F39800;
font-family: 'Bodoni', 'Sylfaen', serif;
font-weight: 400;
line-height: 1em;
text-transform: capitalize;
letter-spacing: .7em;
background: rgba(0,0,0,.5);
border-bottom: 1px solid #fff;
display: block;
}
article .ditail .headline p {
margin-bottom: 1em;
line-height: 1.25em;
}
article .ditail .headline img {
max-width: 200px;
width: 100%;
}
article .ditail .box {
max-width: 820px;
min-height: 260px;
margin: 20px auto 60px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
background: rgba(35,24,21,.6);
position: relative;
}
article .ditail .box h4 {
color: rgb(212,171,77);
line-height: 1.25em;
border-bottom: 1px solid rgb(212,171,77);
}
article #safety .box img,
article #fitting .box img,
article #comfort .box figure {
max-width: 300px;
width: 100%;
margin: auto;
}
article #comfort .box figure img {width: 100%;}
article .ditail .box figcaption {
width: 100%;
padding: 5px;
color: #fff;
font-size: 12px;
line-height: 1.5em;
text-align: center;
background: rgba(212, 171, 77,.6);
display: block;
}
article .ditail .box p {
color: #fff;
font-size: 14px;
line-height: 1.75em;
text-align: justify;
}
article #safety.ditail {background-image: url(../images/safety_bg.jpg);}
article #safety.ditail .headline {background-image: url(../images/safety_headline.jpg);}
article #fitting.ditail {background-image: url(../images/fitting_bg.jpg);}
article #fitting.ditail .headline {background-image: url(../images/fitting_headline.jpg);}
article #comfort.ditail {background-image: url(../images/comfort_bg.jpg);}
article #comfort.ditail .headline {background-image: url(../images/comfort_headline.jpg);}
article #list .headline {
height: 100vh;
margin-bottom: 60px;
background: rgba(35,24,21,.6) url(../images/list_headline.jpg);
background-blend-mode: overlay;
background-repeat: repeat-x;
background-position: center top;
background-size: auto 100%;
position: relative;
}
article #list .headline h3 {
max-width: 820px;
width: 100%;
height: 4em;
margin: auto;
padding: 0 20px;
color: rgb(212,171,77);
line-height: 2em;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,1);
letter-spacing: 3px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
article #list ul {
max-width: 515px;
margin: 0 auto 10px;
list-style: none;
}
article #list li {
margin-top: 25px;
margin-bottom: 40px;
position: relative;
}
article #list li:nth-of-type(odd)::before {margin: 0 auto 10px 50px;}
article #list li:nth-of-type(even)::before {margin: 0 50px 10px auto;}
article #list li:nth-of-type(1)::before {background: linear-gradient(-90deg, rgba(255,255,255,.0) 70%, rgba(255,255,255,1) 100%), url(../images/list01_bg.jpg);}
article #list li:nth-of-type(2)::before {background: linear-gradient(90deg, rgba(255,255,255,.0) 70%, rgba(255,255,255,1) 100%), url(../images/list02_bg.jpg);}
article #list li:nth-of-type(3)::before {background: linear-gradient(-90deg, rgba(255,255,255,.0) 70%, rgba(255,255,255,1) 100%), url(../images/list03_bg.jpg);}
article #list li:nth-of-type(4)::before {background: linear-gradient(90deg, rgba(255,255,255,.0) 70%, rgba(255,255,255,1) 100%), url(../images/list04_bg.jpg);}
article #list li:nth-of-type(n+1)::before {
width: 320px;
height: 100px;
content: '';
background-repeat: repeat-y;
background-position: center top;
background-size: cover;
display: block;
z-index: 1;
}
article #list li::after {
width: 18px;
height: 18px;
content: '';
visibility: visible;
background: url(../images/icon_arrowleft.png) no-repeat center center;
background-size: contain;
display: block;
position: absolute;
bottom: 5px;
z-index: 1;
opacity: .1;
transition: all .5s ease;
}
article #list li:nth-of-type(odd)::after {right: 10px;}
article #list li:nth-of-type(even)::after {left: 10px;}
article #list li:hover::after {
transform: rotateX(360deg);
opacity: 1;
}
article #list li a {
width: 100%;
height: 100%;
font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
font-size: 14px;
line-height: 27px;
color: #F39800;
display: block;
box-sizing: border-box;
}
article #list li:nth-of-type(odd) a {text-align: left;}
article #list li:nth-of-type(even) a {text-align: right;}
article #list li a::after {
width: 280px;
height: 170px;
content: '';
visibility: visible;
background-size: contain;
background-repeat: no-repeat;
display: block;
position: absolute;
top: -25px;
}
article #list li:nth-of-type(odd) a::after {
right: 20px;
background-position: right center;
}
article #list li:nth-of-type(even) a::after {
left: 20px;
background-position: left center;
}
article #list li:nth-of-type(1) a::after {background-image: url(../images/list01.png);}
article #list li:nth-of-type(2) a::after {background-image: url(../images/list02.png);}
article #list li:nth-of-type(3) a::after {background-image: url(../images/list03.png);}
article #list li:nth-of-type(4) a::after {background-image: url(../images/list04.png);}
article #list li a span {
padding: 0 10px;
color: #000;
font-family: 'Bodoni', 'Sylfaen', serif;
font-weight: 700;
font-size: 27px;
line-height: 1em;
}
article #list li:nth-of-type(odd) a span {float: left;}
article #list li:nth-of-type(even) a span {float: right;}
article #list li a span::after {
width: 100%;
height: 100px;
border-bottom: 1px solid rgba(35,24,21,1);
content: '';
visibility: visible;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
#products_xseries .back_top {
width: 50px;
height: 50px;
background: rgba(35,24,21,.9);
right: 20px;
z-index: 1;
position: fixed;
right: 20px;
bottom: 20px;
}
#products_xseries .back_top a {display: block;}
#products_xseries .back_top a::before {
width: 50px;
height: 50px;
content: '';
background: url(../images/icon_arrowup.png) no-repeat center center;
background-size: 50%;
display: block;
position: relative;
z-index: 2;
transition: all .5s ease;
}
#products_xseries .back_top a:hover::before {transform: rotateY(360deg);}
@media screen and (min-width: 920px) {
	article {padding-bottom: 50px;}
	article::after,
	article .ditail::before {background-size: auto 30px;}
	article .ditail .headline h3 {font-size: 60px;}
	article .ditail .headline h3 span {
	padding-top: 110px;
	font-size: 40px;
	}
	article .ditail .headline p {font-size: 23px;}
	article .ditail .box:nth-of-type(odd) {padding-right: 340px;}
	article .ditail .box:nth-of-type(even) {padding-left: 340px;}
	article #safety .box img,
	article #fitting .box img,
	article #comfort .box figure {
	position: absolute;
	top: 0;
	bottom: 0;
	}
	article #safety .box:nth-of-type(odd) img,
	article #fitting .box:nth-of-type(odd) img,
	article #comfort .box:nth-of-type(odd) figure {right: 40px;}
	article #safety .box:nth-of-type(even) img,
	article #fitting .box:nth-of-type(even) img,
	article #comfort .box:nth-of-type(even) figure {left: 40px;}
	article #comfort .box figure {height: 300px;}
	article .ditail .box figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	}
	article .ditail .box h4 {
	margin-bottom: .5em;
	font-size: 18px;
	}
	article .ditail .box:nth-of-type(odd) h4 {padding: 0 10px .5em 30px;}
	article .ditail .box:nth-of-type(even) h4 {padding: 0 30px .5em 10px;}
	article .ditail .box:nth-of-type(odd) p,
	article .ditail .box:nth-of-type(odd) small {padding: 0 20px 0 40px;}
	article .ditail .box:nth-of-type(even) p,
	article .ditail .box:nth-of-type(even) small {padding: 0 40px 0 20px;}
	article #list .headline h3 {font-size: 25px;}
}
@media screen and (max-width: 919px) {
	article {padding-bottom: 100px;}
	article::after,
	article .ditail::before {background-size: auto 20px;}
	article .ditail {background-size: 100% auto;}
	article .ditail .headline h3 {font-size: 30px;}
	article .ditail .headline h3 span {
	padding-top: 90px;
	font-size: 25px;
	}
	article .ditail .headline p {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 18px;
	text-align: justify;
	}
	article .ditail .headline p br {display: none;}
	article .ditail .box h4 {
	margin-bottom: 20px;
	padding: 0 20px .5em;
	font-size: 18px;
	text-align: justify;
	}
	article #safety .box img,
	article #fitting .box img,
	article #comfort .box figure {
	width: calc(100% - 40px);
	margin-bottom: 20px;
	}
	article .ditail .box p,
	article .ditail .box small {padding: 0 20px;}
	article #list .headline h3 {font-size: 18px;}
}
@media screen and (max-width: 515px) {
	article #list .headline h3 {
	height: 6em;
	text-align: justify;
	}
	article #list .headline h3 br {display: none;}
	article #list li:nth-of-type(1)::before {background-image: url(../images/list01_bg.jpg);}
	article #list li:nth-of-type(2)::before {background-image: url(../images/list02_bg.jpg);}
	article #list li:nth-of-type(3)::before {background-image: url(../images/list03_bg.jpg);}
	article #list li:nth-of-type(4)::before {background-image: url(../images/list04_bg.jpg);}
	article #list li:nth-of-type(n+1)::before {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	}
	article #list li:nth-of-type(n+1) a {padding: 0 10px;}
	article #list li:nth-of-type(n+1) a span {
	padding: 0;
	float: none;
	display: block;
	}
	article #list li:nth-of-type(odd) a::after {right: 0;}
	article #list li:nth-of-type(even) a::after {left: 0;}
	article .ditail .box h4 br {display: none;}
}