@charset "UTF-8";
/* CSS Document */



/* ================= font ====================== */

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700);

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


/* =======================================================================
                                    RESET
======================================================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}

ol, ul, li {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline: none;
	vertical-align: top;
	font-size:0;
	line-height: 0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
a {
	overflow:hidden;
}






/* =======================================================================
                           jquery.onepage-scroll
======================================================================= */

body, html {
  margin: 0;
  overflow: hidden;
  -webkit-transition: opacity 400ms;
  -moz-transition: opacity 400ms;
  transition: opacity 400ms;
}

body, .onepage-wrapper, html {
  display: block;
  position: static;
  padding: 0;
  width: 100%;
  height: 100%;
}

.onepage-wrapper {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  padding: 0;
  -webkit-transform-style: preserve-3d;
}
.disabled-onepage-scroll .onepage-wrapper {
	height:auto !important;
}


.onepage-wrapper .section {
  width: 100%;
  height: 100%;
}
.disabled-onepage-scroll .onepage-wrapper .section {
	height:auto !important;
}





.onepage-pagination {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 0;
}
.onepage-pagination li {
  padding: 0;
  text-align: center;
}
.onepage-pagination li a{
  padding: 10px;
  width: 4px;
  height: 4px;
  display: block;
  position:relative;
  overflow:visible;
  color:#000;
  -webkit-transition:color 0.3s;
	 -moz-transition:color 0.3s;
	      transition:color 0.3s;
}
.onepage-pagination li a:hover{
	color:#014715;
}

.onepage-pagination li a:before{
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(0,0,0,0.85);
  border-radius: 10px;
  -webkit-border-radius:10px;
  -moz-border-radius: 10px;
  -webkit-transition:-webkit-transform 0.35s;
	-moz-transition:-webkit-transform 0.35s;
	transition:transform 0.35s;
}
.onepage-pagination li a:hover:before{
	background:#014715;
}
	
.onepage-pagination li:first-child a:after{
	content:"TOP";
	display:block;
	left:-4.6em;
	width:5.0em;
	text-align:right;
	top:0.3em;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.0em;
	font-weight:500;
	position:absolute;
}
.onepage-pagination li:nth-child(2) a:after{
	content:"ABOUT";
	display:block;
	left:-4.6em;
	width:5.0em;
	text-align:right;
	top:0.3em;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.0em;
	font-weight:500;
	position:absolute;
}
.onepage-pagination li:nth-child(3) a:after{
	content:"HISTORY";
	display:block;
	left:-4.6em;
	width:5.0em;
	text-align:right;
	top:0.3em;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.0em;
	font-weight:500;
	position:absolute;
}
.onepage-pagination li:nth-child(4) a:after{
	content:"PRODUCTS";
	display:block;
	left:-4.6em;
	width:5.0em;
	text-align:right;
	top:0.3em;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.0em;
	font-weight:500;
	position:absolute;
}


.onepage-pagination li a.active{
	color:#014715;
}

.onepage-pagination li a.active:before{
  width: 8px;
  height: 8px;
  background: none;
  border: 1px solid #014715;
  margin-top: -2px;
  left: 10px;
  -webkit-transform: scale(1.2);

}




.disabled-onepage-scroll{
}
.disabled-onepage-scroll .wrapper {
  overflow: auto;
}

.disabled-onepage-scroll .onepage-wrapper .section {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}
.disabled-onepage-scroll .onepage-wrapper {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  transform: none !important;
  -ms-transform: none !important;
  min-height: 100%;
}

.disabled-onepage-scroll .onepage-pagination {
  display: none;
}

body.disabled-onepage-scroll, .disabled-onepage-scroll .onepage-wrapper, html {
  position: inherit;
}







/* =======================================================================
                                    CONTENTS
======================================================================= */


body{
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#000;
	font-size:12px;
	line-height:1.6;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#FFF;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.ie8 body{min-width:800px;}
html{height: 100%;}

.wrapper{
	height: 100% !important;
	height: 100%;
	margin: 0 auto; 
	overflow: hidden;
}
.main {
	float: left;
	width: 100%;
	margin: 0 auto;
}

.main section{
	overflow: hidden;
}
body.disabled-onepage-scroll .main section{
	overflow:visible;
}
.main section .page_container{
	position:relative;
	margin:0 auto 0;
	width:90%;
	max-width:1000px;
	z-index:3;
	top:50%;
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}

body.disabled-onepage-scroll .main section .page_container{
	position:static;
	top:0;
	-webkit-transform:translateY(0);
	   -moz-transform:translateY(0);
	    -ms-transform:translateY(0);
	        transform:translateY(0);
}


/* ----- TOP ----- */
.main section.page1 {
}
.page1 h1{
	width:70%;
	max-width:520px;
	margin:0 auto;
}
.page1 h2{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:2.5em;
	font-weight:700;
	padding:0.3em 0 0.1em;
}
.page1 h3{
	font-size:1.2em;
	line-height:1.8;
}

.page1 .mainimg{
	width:80%;
	max-width:520px;
	margin:0 auto;
	padding-top:15px;
}







/* ----- About ----- */
.main section.page2{
}
.page2 h2{
	width:100%;
	text-align:left;
	font-size:1.6em;
	padding-bottom:0.3em;
	font-weight:bold;
}
.page2 h3{
	width:100%;
	text-align:left;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:2.5em;
	font-weight:300;
	padding-bottom:0.2em;
}
.page2 .textBox{
	width:48%;
	float:left;
	text-align:left;
	font-size:1.2em;
}
.page2 .imageBox{
	width:48%;
	float:Right;
}



/* ----- History ----- */
.main section.page3{
	background:url(../images/history_bk.jpg) center center no-repeat;
	background-size:cover;
}
.page3 .page_container{
	background:rgba(255,255,255,0.8);
	padding:2em;
	box-sizing:border-box;
	max-width:800px !important;
	margin:0 auto;
}
.page3 h2{
	width:100%;
	text-align:left;
	font-size:1.6em;
	padding-bottom:0.3em;
	font-weight:bold;
}
.page3 h3{
	width:100%;
	text-align:left;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:2.5em;
	font-weight:300;
	padding-bottom:0.2em;
}
.page3 .textBox{
	text-align:left;
	font-size:1.2em;
}



/* ----- Products ----- */
.main section.page4{
}
.page4 h2{
	width:100%;
	text-align:left;
	font-size:1.6em;
	padding-bottom:0.5em;
	font-weight:bold;
}
.page4 .textBox{
	text-align:left;
	font-size:1.1em;
	width:48%;
	float:left;
}
.page4 .imageBox{
	width:47%;
	float:Right;
}

.page4 h4{
	font-size:1.6em;
	line-height:1.25;
	padding-bottom:0.3em;
}
.page4 h4 span{
	display:block;
	font-size:0.6em;
}

.page4 .imageBoxSP{
	display:none;
}



.itemInfo{
	width:100%;
	padding-top:2em;
}
.spec{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:1.1em;
	font-weight:500;
	line-height:1.4;
	float:left;
	width:210px;
}


.buy{
	float:right;
	width:100%;
	margin-left:-210px;
	
}
.buy a{
	display:block;
	margin-left:210px;
	background:#000;
	font-family:'Roboto Condensed', sans-serif;
	font-size:1.5em;
	font-weight:500;
	color:#FFF;
	line-height:1;
	padding:1em 0;
	text-align:center;
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

.buy a:hover{
	background:#014715;
}


.limited{
	font-size:0.95em;
	text-indent:-0.4em;
}
.care{
}
.care a{
	border:1px solid #014715;
	color:#014715;
	box-sizing:border-box;
	font-family:'Roboto Condensed', sans-serif;
	font-size:1.5em;
	font-weight:500;
	width:100%;
	display:block;
	text-align:center;
	padding:0.5em 0;
	line-height:1;
	margin-top:20px;
	-webkit-transition: background-color 0.3s,color 0.3s;
	-moz-transition: background-color 0.3s,color 0.3s;
	transition: background-color 0.3s,color 0.3s;
}
.care a:hover{
	background:#014715;
	color:#FFF;
}


footer{
	display:none;
}

ul:after,
dl:after,
.clear:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}




@media screen and (max-width: 900px){

.page4 .textBox{width:50%;}
.page4 .imageBox{width:45%;}

.spec{width:180px;}

.buy{margin-left:-180px;}
.buy a{margin-left:180px;}

}





@media screen and (max-width: 769px){

.main section.page1{margin-top:70px;}
.page1 h2{font-size:3.0em;padding:1.5em 0 0.1em;}
.page1 h3{font-size:1.3em;}
.page1 .mainimg{padding-top:40px;}


.main section.page2{margin-top:100px;}

.page2 h2{text-align:center;padding:1.5em 0;}
.page2 h3{text-align:center;}
.page2 .textBox{width:100%;float:none;}
.page2 .imageBox{width:100%;float:none;margin-top:20px;}


.main section.page3{margin-top:5%; padding:45% 0 5%;}

.page3 h2{text-align:center;padding:0.5em 0 0.7em;}
.page3 h3{text-align:center;}


.main section.page4{margin-top:80px; padding-bottom:10%;}
.page4 h2{text-align:center;padding:0 0 1.0em;}

.page4 .imageBox{display:none;}
.page4 .textBox{font-size:1.2em;width:100%;float:none;}

.page4 .imageBoxSP{
	display:block;
	width:80%;
	margin:60px auto 40px;
	float:none;
	max-width:450px;
}

.itemInfo{width:100%;padding-top:0;}
.spec{font-size:1.1em;text-align:center;float:none;width:100%;}
.buy{float:none;margin:1em auto 0;}
.buy a{margin-left:0;padding:0.7em 0;}
.care a{margin-top:10px;}



.limited{
	font-size:0.9em;
	text-indent:0em;
	text-align:center;
	padding:0.5em 0 0.2em;
}


footer{
	width:90%;
	margin:0 auto;
	padding:0em 0 3em;
	font-size:0.9em;
	display:block;
}
footer p{padding:0.2em 0;}
footer a{color:#191919;}
footer a:hover{color:#FECE02;}
footer br{display:none;}


}



@media screen and (max-width:570px){
.main section.page1{margin-top:60px;}
.page1 h1{
	width:80%;
}
.page1 h2{
	font-size:2.3em;
	padding:1.0em 0 0.1em;
}
.page1 h3{
	text-align:left;
	line-height:1.5;
}
.page1 h3 br{
	display:none;
	
}
.page1 .mainimg{
	width:95%;
}

.main section.page2{margin-top:80px;}
.page2 h2{
	font-size:1.5em;
	padding:1.5em 0 1em;
	text-align:left;
}
.page2 h2 br{
	display:none;
}
.page2 h3{
	font-size:2.2em;
}


.main section.page3{margin-top:12%;}

.page3 h2{font-size:1.5em;text-align:left;}
.page3 h2 br{
	display:none;
}
.page3 h3{font-size:2.2em;}

.page4 h2{
	font-size:1.5em;
	padding:1.5em 0 1em;
	text-align:left;
}
.page4 h2 br{
	display:none;
}


.main section.page4{margin-top:30px; padding-bottom:10%;}

.page4 .imageBoxSP{
	width:90%;
}
footer{font-size:0.85em;}
footer br{display:block;}

}