/* RESET */
html{color:rgba(0,0,0,0.9);}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}.cf:before, .cf:after {content:""; display:table; } .cf:after {clear:both; } .cf {zoom:1; }

/* =========================================

COMMON
font-family: 'Montserrat', sans-serif;


============================================ */
body, html { width: 100%; height: 100%; font-family: 'bebas', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #000; }
.table { display: table; width: 100%; }
.cell { display: table-cell; vertical-align: middle; }
img { vertical-align: bottom; }
.in { height: 100%; width: 100%; position: relative; }
a { text-decoration: none; }
.gr-orange { background: rgba(233, 73, 8, 0.8); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, rgba(233, 73, 8, 0.97) 0%, rgba(224, 179, 21, 0.98) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e94908', endColorstr='#e0b315', GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
/*.gr-orange { background: rgba(0,100,90,0.9); background: linear-gradient(45deg, rgba(0,100,90, 0.95) 0%, rgba(45, 110, 35, 0.97) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e94908', endColorstr='#e0b315', GradientType=1); /* IE6-9 fallback on horizontal gradient  }*/
.none { display: none !important; }
.clear { clear: both }
.sp { display: none !important; }
.pc { display: block !important; }
.contact a.mail { color: rgba(0, 0, 0, 0.8); }
div.contact { display: none; }

/* =========================================

SPLASH


============================================ */
.load-prev { opacity: 0; transition: opacity 0.7s; }
.s2 .load-prev { opacity: 1; }
.loader { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
.loader span { transition: all 0.7s 0.2s cubic-bezier(0.585, -0.005, 0.290, 0.945); position: absolute; top: 0; left: -101%; width: 100%; height: 100%; z-index: 100; background: #eb5d01; }
.loader span.l { background: rgba(233, 73, 8, 0.8); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, rgba(233, 73, 8, 0.97) 0%, rgba(224, 179, 21, 0.98) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e94908', endColorstr='#e0b315', GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
/*.loader span.l { background: rgba(0,100,90,0.7); background: linear-gradient(45deg, rgba(0,100,90, 0.7) 0%, rgba(45, 110, 35, 0.7) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e94908', endColorstr='#e0b315', GradientType=1); /* IE6-9 fallback on horizontal gradient  }*/
.s1 .loader span { transform: translate(101%, 0); }
.loader span.s { transition: all 0.7s .35s cubic-bezier(0.585, -0.005, 0.290, 0.945); margin-left: -90px; z-index: 101; background: #000; }

/* =========================================


HEADER


============================================ */
.header { position: relative; top: 20px; left: 50.1%; z-index: 99; width: 1000px; margin: 0 0 0 -500px; height: 28px; background: #010000; }
/*.header > .in { background: #0e0e0e; }*/
/*.header h1 { position: absolute; left: 0px; top: 16px; z-index: 103; }*/
.header a { color: #fff; font-size: 12px; }
.img-logo { position: absolute; left: 0px; top: 15px; width: 315px; height: 45px; margin-bottom: 30px; text-indent: -9999px; display: block; background-size: 235px; background-image: url(../img/JPLS_wlogo.png); background-repeat: no-repeat; }
.sub-title { position: relative; top: 55px; left: 24px; width: 300px; font-size: 10.5px; color: #fff; }
.nav { font-size: 0; position: absolute; right: 0; top: 0; z-index: 102; }
.nav li { display: inline-block; vertical-align: top; }
.nav a { transition: all 0.5s; height: 90px; padding: 0 30px; box-sizing: border-box; text-align: center; font-family: 'Montserrat'; font-weight: lighter; text-transform: uppercase;}
.nav a.link-contact { display: block; height: 90px; width: 90px; padding: 0; }
.nav a.link-contact span { position: absolute; top: 0; left: 0; }
.nav a.link-contact .img-mail { height: 90px; width: 90px; z-index: 2; background-image: url(../img/icon_mail.png); background-position: center; background-repeat: no-repeat; background-size: 90px; }
.nav .gr-orange { display: block; height: 90px; width: 90px; }
.nav a.pulldown1 { background: #070707; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: center top; transform-origin: center top; opacity: 0; transition: all 0.4s 0.15s; }
.nav a.pulldown2 { background: #070707; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: center top; transform-origin: center top; opacity: 0; transition: all 0.3s; }
.hidden { width: 125px; perspective: 500; -moz-perspective: 500; -webkit-perspective: 500; -o-perspective: 500; -ms-perspective: 500; }
.nav .pulldown { width: 125px; height: 90px; overflow: hidden; margin-right: 10px; }
.nav .pulldown a{padding:0 23px; }
.nav .gr-orange, .nav a.link-contact .img-mail, .nav .pulldown, .header, .nav a, .logotitle { transition: all 0.5s; }
.nav #direct_shop { font-size: 11px; }
.is_scrolled .nav .gr-orange, .is_scrolled .nav a.link-contact .img-mail, .is_scrolled .nav .pulldown, .is_scrolled .header, .is_scrolled .nav a { height: 60px; transition: all 0.3s; }
.is_scrolled .header{top: 0;}
.is_scrolled .header h1 { top: 0px; transition: all 0.3s; }
.is_scrolled .header .in { background: #000; transition: all 0.3s; }

/* ========================================= 

FIRST VIEW

============================================ */
.scroll { position: absolute; width: 100%; height: 100%; }
.scroll_inner { background: #000; max-width: 1500px; margin: 0 auto; width: 100%; position: relative; overflow: hidden; }
#firstview { min-height: 480px; }
#firstview > .in { overflow: hidden; min-height: 480px; min-width: 566px; display:block;}
.plx { position: absolute; height: 100%;  z-index: 1; background-color: rgba(0,0,0,0.85); top: 0; left: 0; }
.mask { position: absolute; bottom: -1px; left: 0; width: 100%; }
.mask img { width: 100%; height: auto; }

/* TITLE */
.title { position: absolute; width: 100%; z-index: 10; top: 50%; margin: -150px 0 0 0; }
.title h2, .title h3 { text-align: center; color: #fff; width: 100%; }
.title h2 { opacity: 0.9; font-size: 15px; letter-spacing: 2px; margin-bottom: 25px; overflow: hidden; }
.title h2 span { display: block; transition: all 1s; -webkit-transform: translate(0px, 30px); transform: translate(0px, 30px); }
.title h3 { font-size: 36px; line-height: 38px; letter-spacing: 7px; margin-left: 0.5%; }
/*.title h3 { font-size: 50px; line-height: 46px; letter-spacing: 8px; } */
.title .o { display: inline-block; vertical-align: top; overflow: hidden; }
.title .o span { display: block; transition: all 0.7s; -webkit-transform: translate(0px, 90px); transform: translate(0px, 90px); }
.is_loaded .title h2 span, .is_loaded .title .o span { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }

/* WIRED3D */
#wired3d {
	float: right; 
	width: 85%;
	min-height: 480px;
}

/* top store */
.gotostore {
	max-width: 1280px;
	margin: 10px auto;
  }

.store_guide {
	display: block;
	height: auto;
	width: 30%;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.7);
	background-image: url(../img/bgvideo/raster.png);
	 -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.store_guide::after {
	content: "";
	display: block;
	clear: both;
}

#jpn_store {
	display: block;
	text-align: center;
	font-size: 16px;
	margin: 5px auto 0;
}

#jpn_store a {
	color: black;
}

#jpn_store a:hover {
    color: blue;
    text-decoration: none;
}

/* NEWS */
.newsspace {
  max-width: 1280px;
  margin: 0 auto;
}
.news {
	display: block;
	height: auto;
	margin: 30px 1% 25px;
	background-color: rgba(255,255,255,0.7);
	background-image: url(../img/bgvideo/raster.png);
	 -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.news::after {
	content: "";
	display: block;
	clear: both;
}

#newstitle {
	float: left;
	display: block;
	padding-left: 40px;
	font-size: 30px;
	margin: 20px auto 0;
}
.newslist {
	float: left;
	display: block;
	padding-top: 25px;
	padding-left: 45px;
	overflow-y: scroll;
	max-height: 110px;
}
ul.newslist::-webkit-scrollbar {
	visibility: hidden;
}

.news li { margin-bottom: 5px; }
.news li .cell { text-align: left; }
.news li .cell.date { width: 120px; vertical-align: top; }
.news li .cell.date span { font-size: 10.5px; color: rgba(0, 0, 0, 0.7); width: 85px; display: block; text-align: center; line-height: 20px; height: 20px; }
.news li .cell.bd,.news li .cell.bd a { font-size: 14px; color: rgba(0, 0, 0, 0.9); text-align: left; }


.plx {
	float: left;
	width: 40%;
	display: block;
	opacity: 0.9;
	min-height: 480px;
	padding-right: 5px;
}
.middle-wrapper {
	display: block;
	background-image: url(../img/bedge_grunge.png);
	margin: 0 auto;
}
.blk_to_white {
	height: 53px;
	background-image: url(../img/blktowhi_t.png);
	background-repeat: repeat-x;
	/*background-color: #eee;*/
}

.table { transition: 0.7s; }
.pulldown:hover{ background-color: #0e0e0e; opacity: 1; }


/*-----------------
container
------------------*/
.container {
	max-width: 1280px;
	margin: 40px auto;
}
.concept {
	margin: 0 1%;
	opacity: 0.96;
	background-color: rgba(250,250,250,0.8);
	background-image: url(../img/bgvideo/raster.png);
	border-radius: 8px;
}
.concept:after {
	content: "";
	display: block;
	clear: both;
}
.concept img{
	float: left;
	padding: 2%;
	width: 40%;
	margin-bottom: 4px;
	border-radius: 8px;
}
.textconcept{
	float: right;
	width: 52%;
	margin: auto auto;
	padding: 1%;
}
h3.theme {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	padding-bottom: .4em;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 2px 0 rgba(44,44,44,0.8)
}
p.comment {
	font-size: 18px;
	text-align: center;
	line-height: 200%;
}


.media-content {
	max-width: 1280px;
	margin: 0 auto;
}
.media-content:after {
	display: block;
	content: "";
	clear: both;
}

.sub-content:after {
	display: block;
	content: "";
	clear: both;
}
.sub-content {
	float: left;
	width: 65%;
}

/*-----------------
TopMovie
------------------*/
.exampleBox {
	display: block;
	clear: both;
	float: left;
	width: 100%;
	background-color: rgba(250,250,250,0.8);
	background-image: url(../img/bgvideo/raster.png);
	margin: 5px 1.4% 5px 1.4%;
	border-radius: 8px;
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}
.movie-banner {
	max-width: 170px;
	width: 90%;
	height: auto;
}
.youtube04Wrap {
	max-width: 100%;
	margin: 5px 5px;
	padding-right: 5px;
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}
.youtube04Wrap:after {
	display: block;
	content: "";
	clear: both;
}
.video-explanation {
	float: left;
	width: 30%;
}
.videotext {
	padding: 7px 3px;
	margin-right: 3px;
	font-size: 14px;
}
.youtube04Wrap .inner {
	float: left;
	position: relative;
	padding-top: 46%;
	width: 70%;
	opacity: 0.95;
}

#youtube04 {
	position: absolute;
	top: 0;
	right: 0;
	max-width: 100% !important;
	max-height: 100% !important;
}

/*-----------------
Twitter
------------------*/
.tweet {
	float: right;
	width: 35%;
}

.tweetlist {
	margin: 5px 2.8% 5px 30px;
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
	background-color: rgba(250,250,250,0.95);
	background-image: url(../img/bgvideo/raster.png);
	border-radius: 8px;
}
/*-----------------
SNS
------------------*/
.SNS {
  clear: both;
}
.SNS:after{
	content: "";
	display: block;
	clear: both;
}
.SNS-logos {
	min-height: 60px;
	width: 100%;
	float: left;
	display: block;
	clear: both;
	margin: 5px auto 0px;
}
.logos li {
	float: left;
	width: 33%;
	padding: 10px 30px;
	-webkit-box-sizing: border-box;
		 -moz-box-sizing: border-box;
					box-sizing: border-box;
}

.logos li img {
	display: block;
	max-width: 180px;
	height: auto;
	margin: auto auto;
	width: 100%;
}


/*-----------------
about us
------------------*/
.head-space {
  display: block;
  height: 80px;
}
.content-first, .content-second {
  background-color: rgba(70, 80, 80, 0.0);
  border-radius: 8px;
  margin: 10px;
}
.content-first:after, .content-second:after {
  display: block;
  content: "";
  clear: both;
}
.express1 {
  position: absolute;
  float: left;
  width: 45%;
  background-color: rgba(10, 128, 110, 0.13);
  margin: 4% 2%;
  padding-bottom: 2%;
}
.express1 h3, .express2 h3{
  font-size: 24px;
  color: silver;
  font-weight: bold;
  text-align: center;
  margin: 4px 3% 5px;
  padding-bottom: .4em;
	border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 0 rgba(44,44,44,0.8)
}
.express1 p, .express2 p{
  color: silver;
  font-size: 16px;
  text-align: center;
  line-height: 200%;
  margin: 0 5%;
}
.about-img1 {
  float: right;
  width: 58%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: -1%;
}
.express2 {
  float: right;
  width: 46%;
  background-color: rgba(10, 128, 110, 0.12);
  margin: 4% 2%;
  padding-bottom: 2%;
}
.about-img2 {
  position: absolute;
  float: left;
  width: 57%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin-left: -1%;
}

/*image animation */
#three-container {
  width: 100%;
  height: 430px;
  min-width: 560px;
}

#three-container canvas {
    background-color: rgba(30,30,30,0.0);
}

#three-container2 {
  width: 100%;
  height: 430px;
  min-width: 560px;
}

#three-container2 canvas {
    background-color: rgba(30,30,30,0.0);
}

@media screen and (max-width:980px) {
#three-container {
  width: 100%;
  height: 350px;
  min-width: 440px;
}
.express1 p, .express2 p{
  font-size: 14px;
  line-height: 190%;
}
}
@media screen and (max-width:768px) {
#three-container {
  width: 100%;
  height: 280px;
  min-width: 340px;
}
.head-space { height: 10px;}
.express1 h3, .express2 h3{ font-size: 20px; }
.express1 p, .express2 p{
  font-size: 12px;
  line-height: 170%;
}

}
@media screen and (max-width:567px) {
#three-container, #three-container2 {
  width: 100%;
  height: 240px;
  min-width: 280px;
}
.express1, .express2, .about-img1, .about-img2 {
  position: static;
  float: none;
  width: 100%;
	margin: auto auto;
}
}

/*-----------------
Products
------------------*/
.product-wrapper {
	float: right;
	width: 80%;
	min-height: 500px;
	margin-right: 5%;
}

.product-wrapper h3 {
	position: relative;
	padding-top: 25px;
	left: -4%;
  	font-size: 18px;
  	font-weight: bold;
	color: silver;
	text-align: left;
}

ul.imgList {
	padding: 2% 2% 2% 0;
}
ul.imgList:after {
  	display: table;
  	content: "";
  	clear: both;
}
ul.imgList li {
  	float: left;
  	width: 27.33%;
  	margin: 1% 3%;
	color: silver;
}

#guide {
	width: 240px;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	background-color: rgba(250, 200, 210, 0.8);
	padding: 12px;
	position: fixed;
	right: 5%;
	bottom: 70px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* --colorbox design  --*/
.inline_content:after {
	content: "";
	display: block;
	clear: both;
}
.left_inline {
	float: left;
	width: 44%;
	margin: 0 1% 0 2%;
}
.boxedimg {
	width: 88%;
	margin-left: 5%;
}
.boxedtext {
	float: right;
	width: 51%;
	text-align: center;
	margin: 1%;
	padding-top: 1%;
}
.boxedtext h3 {
	font-size: 4.1vh;
	margin-bottom: 2%;
	padding-bottom: 0.2em;
}
.boxedtext p { font-size: 2.5vh; }
.property { margin-top: 1%; padding-top:1%; }
.boxedline {
	content: "";
	display: block;
	clear: both;
}
.boxedline p {
	float:left;
	width: 48%;
	text-align: center;
	font-size: 2.2vh;
}
p.boxbold { font-weight: bold; }

@media screen and (orientation: portrait) {
.left_inline {
	float: none;
	width: 100%;
}
.left_inline:after {
	content: "";
	display: block;
	clear: both;
}
.boxedimg {
	float: left;
	width: 49%;
	margin: 0 auto;
}
.property { float: right; width: 51%; padding-top: 8%; }
.boxedtext {
	float: none;
	width: 98%;
}
.boxedtext h3 { font-size: 4.1vw; }
.boxedtext p{ font-size: 2.3vw; }
.boxedline p { font-size: 2.0vw; }
}

/*---------------*/
/***** Sarah *****/
/*---------------*/
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}
/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	/*min-width: 130px;*/
	max-width: 480px;
	max-height: 360px;
	width: 100%;
	background: #4095b3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	/*min-height: 100%;*/
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 8%;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.7vw;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 50;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


figure.effect-sarah {
	background: #07110a;
}

figure.effect-sarah img {
	max-width: none;
	width: -webkit-calc(100% + 20px);
	width: calc(100% + 20px);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-10px,0,0);
	transform: translate3d(-10px,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-sarah:hover img {
	opacity: 0.4;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
	text-align: left;
}

figure.effect-sarah h2 {
	position: relative;
	overflow: hidden;
	padding: 0.1em 0 0.5em;
}

figure.effect-sarah h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-sarah p {
	padding: 1em 0;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

figure.effect-sarah:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

@media screen and (max-width:567px) {
ul.imgList li { width: 43.5%; }
.grid figure figcaption { font-size: 2.4vw; }
}

/*--------------------
Investigation
---------------------*/
.survey {
	padding-bottom: 30px;
	clear: both;
}
.survey form {display:none;margin:8px 0 0 8px}
form.selected {display:block}
.survey p, #complete p {margin:20px 0 16px 8px;font-size:120%; color: silver;}

.survey input[type=radio] { display: none }
.survey label {width:180px;margin:0 16px 16px 0;
	padding:8px 20px;border:1px solid #ddd;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;background:#eee;color:#666;font-size:80%;font-weight:bold}
.survey label:hover{border:1px solid #ccc;background:#fff;color:#000;cursor:pointer}
.survey input[type="radio"]:checked + label {border:1px solid #ccc;background:#6c6;color:#fff}
/*.survey input[type=button]{width:180px;margin:0 16px 16px 0;
	padding:8px 20px;border:1px solid #ddd;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;background:#eee;color:#666;font-size:80%;font-weight:bold}
.survey input[type=button]:hover{border:1px solid #ccc;background:#fff;color:#000;cursor:pointer}*/
.survey input[type=button]:focus{border:1px solid #ccc;background:#6c6;color:#fff}
#complete{display:none}
#complete.selected{display:block}
#comment{font-size:108%}
p#cooperation {
	color: silver;
	font-size: 16px;
}
.result {
	position: relative;
	top: 40px;
	height: 600px;
}
.result:after {
	content: "";
	display: block;
	clear: both;
}
.sum_result {
	float: left;
	width: 46%;
	height: 200px;
	margin: 10px 10px;
}
.ifmini { display: none; }

@media screen and (max-width:768px) { .ifmini { display: block; } }
@media screen and (max-width:567px) {
.survey label {margin: 1px 5px; width:130px; padding: 6px 15px; font-size: 55%;}
.result { padding-bottom: 70px;}
.sum_result { float: none; width: 90%; }
}

/*-----------------
Video
------------------*/
.video-wrapper {
	float: right;
	width: 80%;
	margin-right: 5%;
}
.video-wrapper h3 {
	position: relative;
	padding-top: 25px;
	left: -4%;
  	font-size: 18px;
  	font-weight: bold;
	color: silver;
	text-align: left;
}
ul.video_img {
	padding: 2% 2% 2% 0;
}
ul.video_img:after {
  	display: block;
  	content: "";
  	clear: both;
}
.video_img li {
	float: left;
	width: 27.333%;
	padding: 2%;
	margin: 1%;
	background-color: rgba(153,71,51,0.1);
}
.video_img li img {
	width: 100%;
}
.video_img li:hover {
	opacity: 0.8;
}
@media screen and (max-width:567px) {
.video_img li { width: 44%; }
}

/*-----------------
Stores
------------------*/

/* Retailers  */
.retailers-wrapper {
	float: right;
	width: 80%;
	margin-right: 5%;
}
.retailers-wrapper h3 {
	position: relative;
	padding-top: 25px;
	left: -4%;
  	font-size: 18px;
  	font-weight: bold;
	color: silver;
	text-align: left;
}

.retailers-wrapper h4 {
	color: silver;
	height: auto;
	margin-top: 8px;
}

.retailers-wrapper section {
	margin-bottom: 10px;
}

.retailers-wrapper .store_img {
	float: left;
	width: 25%;
}

.retailers-wrapper .descript {
	color: silver;
	margin-top: 5px;
	font-size: 12px;
}

.descript a {
	color: silver;
	font-weight: bold;
	font-size: 16px;
}

.store::after {
	display: block;
  	content: "";
  	clear: both;
}

.store_li li {
  float: left;
  width: 94%;
  margin: 1%;
}



/*-----------------
Contact
------------------*/
#inquiry-form {
	padding-top: 5px;
	margin: 4% auto;
	color: silver;
}
.mail-img {
	width: 8%;
	height: 8%;
	margin: -2.5% -2.4%;
	
}
.attention {
	font-size: 1vw;
	color: orange;
}
.form-text:after {
	content: "";
	display: block;
	clear: both;
}
.form-explain {
	float: left;
	width: 25%;
	text-align: center;
	padding: 1% 0;
	font-size: 1.5vw;
}
.form-content {
	float: left;
	width: 55%;
	padding: 1%;
	font-size: 1.5vw;
}
.product-wrapper h4 {
	color: silver;
	font-size: 1.3vw;
}
.submit {
	text-align: center;
}
.form-explain span {
		color: orange;
}
tr span {
	color: #F30;
}
.err, .err input {
	background: #f60;
}
.after.err {
	border-color: #f60;
}

/*modal*/
table {
	border-collapse:collapse;
	border:1px solid #ccc;
	margin-bottom:10px;
}
table th {
	background-color:#efefef;
	width:30%;
}
table td, table th {
	border:1px solid #ccc;
	padding:10px;
}
.error,.red {
	font-size:10px;
	color:red;
}
.confirm_table{
	width:100%;
}
.confirm_table th, .confirm_table td {
	padding:5px;
}
#mailform{
	display:block;
	width:640px;
	margin:20px auto;
}
#mailcomplete {
	position: relative;
	top: 35px;
	min-height: 300px;
}
#mailcomplete p {
	color: silver;
}
.product-wrapper h5 {
	color: silver;
	font-weight: bolder;
}

@media screen and (max-width:567px) {
.attention { font-size: 1.5vw; }
.form-explain { font-size: 2.1vw; }
.form-content { font-size: 2.1vw; }
.product-wrapper h4 { font-size: 2.2vw; }
.mail-img {
	width: 14%;
	height: 14%;
	margin: -4.7% -3.9%;
}
}


/*-----------------
Footer
------------------*/
footer { clear: both; display: block; background: #0d0d0d; }
.footer-logo {
  width: 230px;
  height: 48px;
  background-image: url(../img/JPLS_wlogo.png);
  background-repeat: no-repeat;
  background-size: 230px;
  margin: 0 auto;
}
.makername { padding-top: 42px; padding-left: 35px; margin: 0 auto; font-size: 10px; color: #fff; }
.address { height: 36px; line-height: 36px; }
address { font-size: 10px; color: #fff; text-align: center; font-family: 'Montserrat'; }

.pagetop {
	position: fixed;
	bottom: 20px;
	right: 17px;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	-ms-transform: scale(0.3);
	-o-transform: scale(0.3);
	transform: scale(0.3);
	-webkit-transition: all .4s;
	-moz-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #333;
	text-align: center;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	line-height: 50px;
	border-radius: 50px;
}
.pagetop.show {
	opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	z-index: 108;
}


@media screen and (min-width:768px) {
	.nav a:hover { background: #0e0e0e; }
	.nav .pulldown:hover { height: 270px; }
	.is_scrolled .nav .pulldown:hover { height: 180px; }
	.nav .pulldown:hover a.pulldown1 { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; transition: all 0.3s; }
	.nav .pulldown:hover a.pulldown2 { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; transition: all 0.3s 0.1s; }
}

@media screen and (max-width:1200px) {
/*	.title h3 { font-size: 50px; line-height: 46px; letter-spacing: 8px; }
	.title { margin: -125px 0 0 0; }
	.slide-in .thumb { padding: 0 50px;}*/
}

@media screen and (max-width:768px) {
	body { -webkit-text-size-adjust: 100%; }
	.sp { display: block !important; }
	.pc { display: none !important; }
	.header { margin: 0; top: -26px; left: auto; width: auto; height: 52px !important; }
	.loader span.l { background: rgba(233, 73, 8, 0.8); /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, rgba(233, 73, 8, 0.05) 0%, rgba(224, 179, 21, 0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e94908', endColorstr='#e0b315', GradientType=1); /* IE6-9 fallback on horizontal gradient */ }
	.nav { overflow: auto; -webkit-overflow-scrolling: touch; background: #0e0e0e; position: fixed; top: 0; width: 100%; height: 100%; z-index: 100000; -webkit-transform: translate(100%, 0); transform: translate(100%, 0); transition: all 0.5s; }
	.is_openside .nav { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
	.open-toggle, .scroll { transition: all 0.5s; }
	.is_openside .scroll { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
	.nav li { width: 100%; }
	.nav a { transition: all 0.5s; height: 52px; padding: 0 15px; font-size: 12px; text-align: left; border-bottom: 1px solid #161616; }
	.nav .pulldown { width: 100%; height: auto; overflow: visible; }
	.nav a.pulldown2, .nav a.pulldown1 { background: #0e0e0e; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }
	.nav .hidden { width: 100%; }
	.nav .hidden br { display: none; }
	.nav a.link-contact .img-mail { height: 52px; width: 100%; }
	.nav a.link-contact { display: none !important; }
	.open-toggle { position: fixed; top: 0; right: 0; margin-right: 0px; z-index: 1000001; }
	.open-toggle .in { padding: 12px 9px; } /*padding: 19px 18px;*/
	.open-toggle span { display: block; height: 2px; width: 16px; background: #fff; transition: all 0.5s; }
	.open-toggle span.t2 { margin: 4px 0; }
	.burger { height: 16px; padding: 6px 4px 4px 4px; border: solid 1px white; border-radius: 6px;}
	.is_openside .open-toggle span.t1 { -webkit-transform: rotate(90deg) translate(6px, 0); transform: rotate(90deg) translate(6px, 0); }
	.is_openside .open-toggle span.t2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
	.is_openside .open-toggle span.t3 { -webkit-transform: rotate(90deg) translate(-6px, 0); transform: rotate(90deg) translate(-6px, 0); }
	p.t4 { color: white; position:relative; top: -19px; padding-left: 20px;}
	.img-logo { top: 10px; width: 160px; height: 40px; background-size: 160px; z-index: 1000002; background-color: rgba(15,15,15,0.92); -webkit-transform: translate(0px, -6px); transform: translate(0px, -6px); }
	.logotitle { height: 52px; position: fixed; left: 0; top: 0; z-index: 1000000; width: 100%; background-color: rgba(15,15,15,0.92); padding: 9px 15px 0px 15px; box-sizing: border-box; }
	.title h3 { font-size: 32px; line-height: 1.1; letter-spacing: 3px; }
	.title h2 { opacity: 1; font-size: 12px; letter-spacing: 0px; margin-bottom: 15px; overflow: hidden; }
	.title { margin: -96px 0 0 0; }
	.scroll { position: absolute; width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
	h3 { font-size: 20px; letter-spacing: 3px; }
	.in { width: 100%; box-sizing: border-box; padding: 0 10px 0 2px; text-align: justify; height: 100%; max-width: 740px;}
	.news li .cell { display: block; }
	.news li .cell.bd a { font-size: 13px; }
	.news li .cell.date { margin-bottom: 10px; }
	.sitemap ul { float: left; width: 50%; }
	.scrollbar { height: 200px; overflow: scroll; }
	.thumb { height: 130px; width: 130px; margin: 0 auto 10px auto; }
	/*.slide-in p { font-size: 13px; line-height: 1.5; letter-spacing: 1px; text-align: justify; }*/
	.title h2 { margin: 0 0 0 0; }
	.inputs { margin-right: 0; margin-bottom: 15px; }
	.window, .scroll { position: static; }
	.nav .pulldown a { padding: 0 15px;}
	.title { top: 190px; }
	.sub-title { position: relative; top: 22px; left: 1px; width: 190px; font-size: 8px; color: #fff; z-index: 1000003; }
  	.in.pulldown .topPulldown { display: none; }
 	.sub-content { width: 97%; }
 	.tweet { float: none; width: 74%; clear: left; min-width: 340px; margin: auto; }
	div.contact { display: block; }
	h3.theme {
	margin-bottom: 7px;
	padding-bottom: .3em;
	}
	
.concept img{
  float: none;
  padding: 5%;
  width: 90%;
  margin-bottom: 10px;
  border-radius: 8px;
}
.textconcept{
  float: none;
  width: 95%;
  margin: auto auto;
  padding: 2%;
}
a.player {
	display: none;
	background-image: none;
}
}
@media screen and (max-width:567px) {
.title { margin: -59px 0 0 0; top: 170px;}
.title h3 { font-size: 21px; line-height: 1.2; letter-spacing: 3px; }
	/*ul.imgList li {
		float: none;
		width: 96%;
		margin: 10px auto;
	}*/
#wired3d { 
	position: relative;
	top: -30px;
	max-width: 440px;
	min-height: 440px;
}
.tweet { padding-bottom: 10px; }
.exampleBox { width: 95%; }
.videotext { font-size: 11px; }
.newslist { padding-top: 10px; max-height: 200px;}
.news li .cell.date { margin-bottom: 5px; }
p.comment { font-size: 17px; line-height: 170%; }
.logos li { padding: 8px 12px; }
.textconcept { width: 90%; }
.subMiddleWrapper {
	display: block;
	background-color: rgba(100, 100, 100, 0.5);
	margin: 0 auto;
}
.exampleBox { width: 100%; }
.plx { width: 30%; min-height: 420px; }
}