@charset "UTF-8";
/* auther: cee; */

article a:not(article #information a) {color: #fff;}
article h2:not(article #information h2) {
padding: 10px;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.button:not(.s) {
max-width: 280px;
margin: 20px auto 0;
}
.button:not(.s) a {
height: 50px;
line-height: 50px;
}
.button:not(.s) a:hover {line-height: 52px;}
.button:not(.s) a::before {height: 49px;}
.button:not(.s) span {display: block;}
.pickup {
overflow: hidden;
position: relative;
color: #fff;
}
.pickup::before {
height: 100%;
content: '';
display: block;
position: absolute;
top: 0;
}
.pickup > p:nth-of-type(1) {
width: 488px;
font-family: 'Roboto', sans-serif;
font-style: italic;
font-size: 67px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 8px;
transform: rotate(-90deg) translate(0, -468px);
transform-origin: right top;
z-index: 1;
position: absolute;
left: 0;
top: 0;
}
.pickup .box h2 {
margin: 0 -30px;
text-align: center;
z-index: 3;
position: relative;
}
.pickup .box p:nth-of-type(1) {
max-width: 360px;
margin: 1em auto;
line-height: 2em;
text-align: justify;
letter-spacing: 1px;
z-index: 3;
position: relative;
}
#products {
background: rgba(0,0,0,0.65) url(/jpn/images/top/products.jpg) no-repeat center 0;
background-size: cover;
}
#products > p:nth-of-type(1) {
opacity: 1;
transform-origin: right top;
}
#products .box h2,
#products .box h2::before {
font-family: 'Roboto', sans-serif;
font-weight: 700;
opacity: 0;
position: relative;
}
#products.active .box  h2 {
margin: 0 -80px;
padding-left: 0;
padding-right: 0;
opacity: 0;
transform: none;
animation-name: productsIn01;
animation-timing-function: linear;
animation-duration: 1s;
animation-delay: .1s;
animation-fill-mode: forwards;
}
#products .box h2::before {
width: 100%;
height: 100%;
content: "RX-7X RC";
display: block;
position: absolute;
left: 0;
}
#products.active .box h2::before {
opacity: 1;
visibility: hidden;
transform: none;
animation-name: productsIn02;
animation-timing-function: linear;
animation-duration: 1s;
animation-delay: .1s;
animation-fill-mode: forwards;
}
@keyframes productsIn01 {
0% {opacity: 0;}
10% {transform: translate3d(-200px, 0, 0);}
30% {transform: translate3d(100px, 0, 0);}
50% {transform: translate3d(-60px, 0, 0);}
60% {transform: translate3d(40px, 0, 0);}
70% {transform: translate3d(-20px, 0, 0);}
90% {opacity: .3;}
90% {transform: none;}
100% {opacity: 1;}
}
@keyframes productsIn02 {
0% {visibility: visible;}
10% {transform: translate3d(400px, 0, 0);}
30% {transform: translate3d(-200px, 0, 0);}
50% {transform: translate3d(120px, 0, 0);}
60% {transform: translate3d(-80px, 0, 0);}
70% {transform: translate3d(40px, 0, 0);}
90% {transform: none;}
100% {visibility: hidden;}
}
#products .box img {
width: 100%;
margin: auto;
opacity: 0;
position: relative;
z-index: 2;
}
#products.active .box img {
opacity: 0;
animation-name: productsimgIn;
animation-duration: .7s;
animation-delay: .1s;
animation-fill-mode: forwards;
}
@keyframes productsimgIn {
0% {animation-timing-function: linear;}
0% {opacity: 0;transform: rotate(30deg);}
90% {transform: rotate(10deg);}
100% {opacity: 1;transform: none;}
}
#products .box p {
opacity: 0;
transition: .5s ease-in;
animation-delay: .1s;
transition-delay: .7s;
}
#products.active .box p {opacity: 1;}
#products ul {
max-width: 995px;
width: 100%;
margin: auto;
display: block;
position: relative;
}
#products ul::before {
width: 100%;
height: 100%;
content: "";
visibility: visible;
background: linear-gradient(90deg,rgba(73,190,226,1),rgba(44,177,231,1));
display: block;
z-index: 1;
position: absolute;
right: 0;
top: 0;
}
#products ul li {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 16px;
text-transform: uppercase;
display: block;
z-index: 1;
position: relative;
}
#products ul li:nth-of-type(1) {background: rgba(73,190,226,1);}
#products ul li:nth-of-type(2) {background: rgba(65,187,228,1);}
#products ul li:nth-of-type(3) {background: rgba(58,184,229,1);}
#products ul li:nth-of-type(4) {background: rgba(51,180,230,1);}
#products ul li:nth-of-type(5) {background: rgba(44,177,231,1);}
#products ul a {
padding: 9px 20px 20px;
display: block;
z-index: 3;
position: relative;
}
#products ul a::before,
#products ul a::after {
margin: auto;
content: "";
display: block;
z-index: -1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#products ul a::before {
width: 70%;
height: 70%;
background: #fff;
border-radius: 70%;
box-shadow: 0 0 15px 10px #fff;
opacity: .2;
transition: .2s linear;
}
#products ul a:hover::before {
width: 60%;
height: 60%;
border-radius: 60%;
opacity: .9;
}
#products ul a:hover::after {
box-shadow: 0 0 5px 1px #fff;
animation-name: productsSpotlight;
animation-duration: .5s;
animation-fill-mode: forwards;
}
@keyframes productsSpotlight {
0% {width: 30%;height: 30%;border-radius: 30%;opacity: 1;}
100% {width: 100%;height: 100%;border-radius: 100%;opacity: 0;}
}
#products ul img {
width: 100%;
margin-bottom: -5px;
display: block;
clear: both;
transform:rotate(0deg);
transition: .1s ease-out;
}
#products ul a:hover img {transform:rotate(30deg);}

#araiRD {
background: url(/jpn/images/top/araiRD.jpg) no-repeat left bottom;
background-size: cover;
}
#araiRD > p:nth-of-type(1) {color: #000;}
#araiRD .box h2 {
padding-bottom: 0;
overflow: hidden;
}
#araiRD .box h2 span {
font-size: 72px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
line-height: 1.15em;
display: inline;
opacity: 0;
transition: .1s ease;
}
@media all and (-ms-high-contrast: none) {
	#araiRD .box h2 span {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}
#araiRD .box h2 span:nth-of-type(1) {transition-delay: 0s;}
#araiRD .box h2 span:nth-of-type(2) {transition-delay: .3s;}
#araiRD .box h2 span:nth-of-type(3) {transition-delay: .6s;}
#araiRD .box h2 span:nth-of-type(4) {transition-delay: .9s;}
#araiRD .box h2 span:nth-of-type(5) {transition-delay: 1.2s;}
#araiRD.active .box h2 span {opacity: 1;}
#araiRD .box p {
opacity: 0;
transition: 1.5s ease;
transition-delay: 1.2s;
}
#araiRD.active .box p {opacity: 1;}

#since1950 {
overflow-x: hidden;
background: url(/jpn/images/top/since1950.jpg) no-repeat right top;
background-size: cover;
}
#since1950::after {
width: 100vw;
height: 100%;
content: "";
visibility: visible;
background: #333 url(/jpn/images/top/since1950_bg.jpg) repeat-x right top;
background-size: cover;
display: block;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#since1950 .box {transform: translate3d(-100vw, 0, 0);}
#since1950.active .box {
transform: translate3d(-100vw, 0, 0);
animation-name: since1950In;
animation-duration: .5s;
animation-delay: .1s;
animation-fill-mode: forwards;
}
@keyframes since1950In {
0% {transform: translate3d(-100vw, 0, 0);}
60% {transform: translate3d(15px, 0, 0);}
70% {transform: translate3d(-3px, 0, 0);}
100% {opacity: 1;transform: none;}
}
#since1950 .box h2 {
font-size: 60px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 900;
}
@media all and (-ms-high-contrast: none) {
	#since1950 .box h2 {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}

#sns {
margin: 0 auto;
max-width: 995px;
}
#sns::before {
width: 100vw;
height: 100%;
content: "";
visibility: visible;
background: rgba(242,242,242,1);
display: block;
z-index: -1;
position: absolute;
right: 0;
top: 0;
}
#sns .container {padding: 0;}
#sns .box {
background: #fff;
overflow: hidden;
position: relative;
}
#sns .box:nth-of-type(1) {border: 20px solid #0070BF;}
#sns .box:nth-of-type(1) #plugin_facebook {
max-width: 500px;
width: calc(100% - 1px);
margin: 0 0 0 1px;
box-sizing: content-box;
}
#sns .box:nth-of-type(1) #plugin_facebook > .fb-page {width: 100%;}
#sns .box:nth-of-type(1) #plugin_facebook > .fb-page > span,
#sns .box:nth-of-type(1) #plugin_facebook iframe {width: 100% !important;}
#sns .box:nth-of-type(2) {border: 20px solid #3FA9FF;}
#sns .box:nth-of-type(2) #plugin_twitter {
width: 100%;
height: 400px;
overflow-y: scroll;
box-sizing: content-box;
}
#sns .box:nth-of-type(3) {border: 20px solid #808080;}
#sns .box:nth-of-type(3) iframe {
width: 100%;
margin-bottom: -2px;
}
#sns .box:nth-of-type(3) .sns_youtube {
margin: 0 0 -1.5px;
cursor: pointer;
overflow: hidden;
}
#sns .box:nth-of-type(3) .sns_youtube:nth-of-type(1) {
background: url(/jpn/images/top/sns_youtube01_bg.jpg) no-repeat top center;
background-size: contain;
}
#sns .box:nth-of-type(3) .sns_youtube:nth-of-type(2) {
background: url(/jpn/images/top/sns_youtube02_bg.jpg) no-repeat top center;
background-size: contain;
}
#sns .box:nth-of-type(3) .sns_youtube img {width: 100%;}
#sns .box:nth-of-type(3) .sns_youtube:hover img {visibility: hidden;}
#sns .grobal {
width: 100%;
margin: 20px 0;
}
#sns .grobal li {
border: 5px solid rgba(255,255,255,1);
box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2);
overflow: hidden;
display: block;
z-index: 1;
position:relative;
}
#sns .grobal li::before {
width: 100%;
height: 300%;
content:"";
display: block;
z-index: -1;
position: absolute;
transform: translate(0,0);
transition: .5s ease-in-out;
}
#sns .grobal li:nth-of-type(1)::before {background: url(/jpn/images/top/grobal_uk.jpg) no-repeat center top;}
#sns .grobal li:nth-of-type(2)::before {background: url(/jpn/images/top/grobal_eu.jpg) no-repeat center 20%;}
#sns .grobal li:hover::before {transform: translate(0,-180px);}
#sns .grobal a {
width: 100%;
font-family: 'Roboto', sans-serif;
font-size: 38px;
text-align: center;
background: rgba(0,95,171,0.7);
border: 5px solid rgba(255,255,255,0.8);
display: block;
box-sizing: border-box;
}
#sns .grobal a:hover {
color: #fff;
opacity: .5;
}
#sns .grobal a::before {
width: 190px;
height: 61px;
content: "";
visibility: visible;
background: url(/jpn/images/top/logo_facebook_text.png) no-repeat left bottom;
background-size: auto 27px;
display: inline-block;
}

#message {
background: #eee;
z-index: 1;
}
#message .container {position: relative;}
#message .container::after {
max-width: 870px;
width: auto;
height: auto;
margin: 25px auto;
content: '';
visibility: visible;
border: 1px solid #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#message .box {
width: 50%;
margin: 0 50% 0 0;
padding: 100px 20px 100px 45px;
position: relative;
}
#message .box::before {
width: 100%;
height: 100%;
content: '';
background: url(/jpn/images/top/message.jpg) no-repeat center center;
background-size: cover;
display: block;
position: absolute;
top: 0;
right: -100%;
}
#message .box h2,
#message .box p:nth-of-type(1),
#messagePopup.magnificPopup h3 {color: #916F50;}
#message .box h2 {
padding: 0 0 20px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 700;
text-align: left;
}
@media all and (-ms-high-contrast: none) {
	#message .box h2 {font-family: 'メイリオ', 'Meiryo', 'MS PGothic', 'Hiragino Kaku Gothic ProN', sans-serif;}
}
#message .box p:nth-of-type(1),
#messagePopup.magnificPopup h3 {
margin: 30px 0 20px;
padding: 0 0 5px;
font-weight: 600;
line-height: 1.5em;
border-bottom: 1px solid #916F50;
}
#message .box p:nth-of-type(1) {margin: 30px 0 20px;}
#messagePopup.magnificPopup h3 {
margin: 0 0 30px;
background: none;
}
#message .box p:nth-of-type(2) {
margin: 20px 0 40px;
text-align: left;
}
#message .box p:nth-of-type(2)::after,
#messagePopup.magnificPopup p:last-of-type::after {
width: 240px;
height: 70px;
margin: 0 0 0 20px;
content: '';
vertical-align: top;
visibility: visible;
background: url(/jpn/images/top/message_signature.png) no-repeat center top;
background-size: contain;
display: inline-block;
}
#messagePopup.magnificPopup {padding: 20px;}
#messagePopup.magnificPopup p:last-of-type {margin: 40px 0 20px;}
#messagePopup.magnificPopup h4 {
font-size: 100%;
margin: 0 0 20px;
}
#messagePopup.magnificPopup p {
margin: 0 0 20px;
line-height: 1.75em;
}
#messagePopup.magnificPopup p:last-of-type {text-align: right;}
#messagePopup.magnificPopup p:last-of-type::after {
width: 200px;
height: 60px;
margin: 0;
vertical-align: middle;
}
#supportRD {
width: 100%;
color: #fff;
background: url(/jpn/images/top/supportRD.jpg) no-repeat center top;
background-size: cover;
overflow: hidden;
z-index: 1;
position: relative;
}
#supportRD::before {
width: 100%;
height: 100%;
content: "";
background: rgba(0,0,0,0.2);
z-index: -1;
position: absolute;
top: 0;
left: 0;
}
#supportRD ul {
margin: 10px 60px 0;
list-style: none;
}
#supportRD li {
width: 20%;
height: 85px;
float: left;
position: relative;
}
#supportRD img,
#supportRD svg {
max-width: calc(100% - 10px);
max-height: calc(100% - 10px);
margin: auto;
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
}
#supportRD svg path {
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 3000;
stroke-dashoffset: 3000;
transition: .5s linear;
transition-delay: 5s;
}
#supportRD.active svg path {
stroke-dashoffset: 0;
animation: supportRDSVG 5s linear;
animation-fill-mode: forwards;
}
#supportRD.active svg path:nth-of-type(1) {animation-delay: 0;}
#supportRD.active svg path:nth-of-type(2) {animation-delay: 1s;}
#supportRD.active svg path:nth-of-type(3) {animation-delay: 2s;}
#supportRD.active svg path:nth-of-type(4) {animation-delay: 3s;}
#supportRD.active svg path:nth-of-type(5) {animation-delay: 3.25s;}
#supportRD.active svg path:nth-of-type(6) {animation-delay: 3.5s;}
#supportRD.active svg path:nth-of-type(7) {animation-delay: 3.75s;}
@keyframes supportRDSVG {
0% {stroke-dashoffset: 3000;}
100% {stroke-dashoffset: 0;}
}
#supportRD .button {margin: 20px auto 10px;}
#supportRD::after {
width: auto;
height: auto;
content: "";
border: 1px solid #fff;
visibility: visible;
z-index: -1;
position: absolute;
left: 25px;
right: 25px;
top: 25px;
bottom: 25px;
}


@media all and (min-width:995px) {
	.pickup::before {width: 50%;}
	.pickup .box {
	width: 50%;
	padding: 75px 35px;
	}
	.pickup .box > p:nth-of-type(1) {z-index: 2;}
	.pickup .box p:nth-of-type(1) {font-size: 16px;}
	#products::before {
	background: rgba(0,0,0,0.65);
	left: 0;
	}
	#products > p:nth-of-type(1) {
	width: 600px;
	z-index: 2;
	transform: rotate(-90deg) translate(0, -600px);
	}
	#products .box {min-height: 600px;}
	#products .box h2 {font-size: 85px;}
	#products .box img {
	max-width: 576px;
	padding: 0 100px;
	position: absolute;
	left: 100%;
	top: 0;
	bottom: 0;
	}
	#products ul {display: table;}
	#products ul::before {
	width: 100vw;
	right: calc((100vw - 995px) / -2);
	}
	#products ul li {
	width: 20%;
	display: table-cell;
	}
	#araiRD {min-height: 624px;}
	#araiRD::before {
	background: rgba(0,72,117,0.6);
	right: 0;
	}
	#araiRD > p:nth-of-type(1) {
	width: 624px;
	transform: rotate(-90deg) translate(0, -624px);
	}
	#araiRD .box {margin-left: 50%;}
	#since1950 {min-height: 676px;}
	#since1950 .box h2 {font-size: 60px;}
	#since1950 > p:nth-of-type(1) {
	max-width: 100%;
	width: 676px;
	transform: rotate(-90deg) translate(0, -676px);
	}
	#sns {padding: 75px 0;}
	#sns .box:nth-of-type(-n+2) {height: 528px;}
	#sns .box:nth-of-type(1) {
	width: 500px;
	float: left;
	}
	#sns .box:nth-of-type(2) {width: calc(100% - 500px);}
	#sns .box:nth-of-type(2) #plugin_twitter {height:488px;}
	#sns .box:nth-of-type(3) iframe {
	width: 50%;
	float: left;
	}
	#sns .grobal li {width: calc(50% - 4px);}
	#sns .grobal li:nth-of-type(1) {float: left;}
	#sns .grobal li:nth-of-type(2) {float: right;}
	#sns .grobal a {height: 105px;}
	#message .container {
	max-width: 910px;
	padding: 0;
	}
	#message .box h2 {font-size: 28px;}
	#supportRD {
	max-width: 955px;
	margin: 60px auto;
	padding: 35px 35px 45px;
	}
}
@media all and (max-width:994.9px) {
	.pickup::before {
	width: 100%;
	left: 0;
	}
	.pickup > p:nth-of-type(1) {
	opacity: .5;
	transform: rotate(-90deg) translate(0, -499px);
	}
	.pickup .box {
	padding: 75px 20px;
	text-align: center;
	}
	.pickup .box p:nth-of-type(1) {
	max-width: 340px;
	font-size: 14px;
	}
	#products {
	background-repeat: repeat-y;
	background-size: auto 770px;
	}
	#products::before {background: rgba(0,0,0,0.65);}
	#products > p:nth-of-type(1) {
	width: 716px;
	transform: rotate(-90deg) translate(0,-726px);
	}
	#products .box h2 {
	padding-bottom: 15px;
	font-size: 65px;
	}
	#products .box img {max-width: 230px;}
	#products ul::before {background: rgba(44, 177, 231, 1);}
	#products ul li {
	width: 50%;
	float: left;
	}
	#products ul li::before {
	max-width: 320px;
	margin: auto;
	}
	#products ul a {
	max-width: 260px;
	margin: auto;
	z-index: 1;
	position: relative;
	}
	#araiRD::before {background: rgba(0,72,117,0.6);}
	#araiRD > p:nth-of-type(1) {
	width: 570px;
	transform: rotate(-90deg) translate(0, -580px);
	}
	#araiRD .box h2 span {font-size: 55px;}
	#since1950 > p:nth-of-type(1) {
	width: 560px;
	transform: rotate(-90deg) translate(0, -570px);
	}
	#since1950 .box h2 {font-size: 45px;}
	#sns {margin: 20px auto 5px;}
	#sns .box {
	max-width: 550px;
	width: 100%;
	margin: 0 auto;
	float: none;
	}
	#sns .grobal {padding: 0 10px;}
	#sns .grobal li {
	max-width: 450px;
	margin: 0 auto;
	}
	#sns .grobal li + li {margin-top: 20px;}
	#sns .grobal a {
	height: 95px;
	font-size: 25px;
	}
	#sns .grobal a::before {
	width: 145px;
	height: 51px;
	background-size: auto 20px;
	}
	#message .container::after {content: none;}
	#message .box {padding: 50px 20px;}
	#message .box h2 {font-size: 25px;}
	#message .box p:nth-of-type(1) {margin: 0;}
	#message .box p:nth-of-type(2) {margin: 20px 0;}
	#message .box p:nth-of-type(2)::after {
	width: 240px;
	height: 70px;
	margin: 0;
	}
	#supportRD {
	padding: 35px 25px;
	border: 20px solid #fff;
	}
	#supportRD h2 {
	font-size: 25px;
	word-break: break-word;
	}
	#supportRD .button {width: calc(100% - 40px);}
	#info h3 {font-size: 18px;}
	#info h3:nth-of-type(1) a:hover span:nth-of-type(1) {font-size: 18px;}
	#info h3 a:hover span + span {font-size: 18px;}
}
@media all and (max-width:750px) {
	#message {padding: 25px 10px;}
	#message .box {
	max-width: 400px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid #fff;
	position: relative;
	bottom: auto;
	right: auto;
	}
	#message .box::before {content: none;}
	#message .box h2 {padding: 0;}
	#message .box h2::after {
	width: 100%;
	height: 350px;
	margin: 10px 0 0;
	content: '';
	visibility: visible;
	background: url(/jpn/images/top/message.jpg) no-repeat center center;
	background-size: cover;
	display: block;
	}
	#message .box p:nth-of-type(-n+2) {margin: 10px auto;}
}
@media all and (max-width:640px) {
	#supportRD li {width: 50%;}
}
@media all and (max-width:550px) {
	#supportRD li {width: 100%;}
}