@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

html,body {
	font-size: 100%;
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
	height: 100%;
}
.minchou{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;}

p {
	font-size: 90%;
	line-height: 200%;
	margin:30px 0px;
}
.text_en {
	font-family: 'Shadows Into Light', cursive;
}
h3.ttl{
	font-weight: 400;
	font-size: 36px;
	color: #514a47;
}
p.ttl{
	font-weight: 400;
	line-height: 1em;
	font-size:20px;
}
ul li,ol li {
	font-size: 14px;
	line-height: 200%;
}

dt,dd {
	font-size: 14px;
	line-height: 200%;
}

table {
	font-size: 14px;
	line-height: 120%;
}

hr {
	margin: 100px 0;
}

	
img {
	vertical-align: bottom;
	max-width:100%;
	height:auto;
}

.center {
	text-align: center;
}
.right {
	text-align: right;
}
.left {
	text-align: left;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
}
.header{
	width: 100%;
	box-shadow: 0 0 6px #333;
}
.contents {
	width: 100%;
	margin: 0 auto;
	padding: 100px 0px;
	text-align: center;
	overflow: hidden;
}
.grey{
	background-color: #E7E7E7;
}
.contents_wrap{
	padding: 20px;
	box-sizing: border-box;
	margin: 50px auto;
	overflow: hidden;
}
.flexbox{
	 display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
h1{
	width: 150px;
	height: 50px;
	margin: 0px;
	padding: 0px;
	margin: 10px auto;
}

h1 a{
	width: 150px;
	height: 50px;
	background-image: url(../image/logo1.png);
	background-size: 150px 50px;
	display: block;
	font-size: 0.1em;
	text-indent: -1000em;
}
h2{
	font-size:14px;
}
h3{
	font-size:20px;
}
h4{
	font-size:18px;
}
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 400ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
.skrollable {
	position:fixed;
	z-index:100;
}
.parallax-window {
	padding: 200px 0px;
	background-size:cover;
	margin: 0px;
}
.parallax-window h3{
	color:#FFF;
	text-shadow: 1px 1px 1px #000;
}
.flexbox{
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	width:100%;
	float:left;
}
.grid{
	width:48%;
	margin:10px 1%;
	float:left;
	border:1px solid #ccc;
	padding:5px;
	box-sizing:border-box;
}
.grid .name{
	width:100%;
	padding:10px;
	box-sizing:border-box;
	text-align:center;
	margin:0px;
	color:#FFF;
	text-shadow: 1px 1px 5px #000;
}
.grid .name i{
	margin-right:10px;
}
.grid .name,.grid a span{
	background: url(../image/color7.jpg) repeat-x;
}

.grid .desc{
	font-size: 90%;
	line-height: 150%;
	width: 90%;
	margin: 5%;
	height: auto;
}
.grid a span{
	padding: 5px 10px;
	width: auto;
	color: #FFF;
	float: right;
}	

table{
	width:90%;
	margin:0px 5%;
	text-align:left;
}

tr td,tr th{
	padding:10px;
}
th{
	font-weight:normal;
}
.grid th{
	width:20%;
	font-size:70%;
	color:#999;
}
.info p.date{
	width:15%;
	float:left;
}
.info p.desc{
	float: left;
	width: 85%;
}
.archive p.date{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.archive p.brand a{
	background-color:#000;
	color:#FFF;
	padding:5px;
}
p.border{
	border:1px solid #ccc;
	width: auto!important;
	display:inline-block;
	padding:20px;
	max-width:700px;
}
.border_button{
	margin:10px auto;
}
.border_button a{
	color:#FFF;
	background-color:#766e6a;
	padding:20px 50px;
    outline: 2px solid #fff;
    outline-offset: -10px;
	margin:0px auto;
	display:inline-block;
}
.contents h3{
	padding: 20px 0px;
	float: left;
	text-align: center;
	width: 100%;
}
.margin{
	margin:100px 0px!important;
}

.pagetop {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
	z-index: 9999
}
.pagetop a {
    display: block;
    background-color: #514a47;
    text-align: center;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    padding: 14px 20px;
	outline: 2px solid #fff;
    outline-offset: -10px;
}


.navPage{
	width: 100%;
	clear:both;
}
.navPage .prev{
	float:left;
}
.navPage .next{
	float:right;
}
.navPage a{
background-color:#000;
	color:#FFF;
	padding:5px;
}
footer {
	width: 100%;
	height: auto;
	z-index: 9999;
	clear: both;
	margin: 0px;
	 background: linear-gradient(-45deg, rgba(246, 255, 0, .8), rgba(255, 0, 161, .8)),
  url(../image/bumboo.jpg);
  background-size: cover;
	box-shadow: 0 0 6px #ccc;
	color: #FFFFFF;
	overflow: hidden;
	padding:100px 0px;
}


footer h3{
	width: 150px;
	height: 50px;
	margin: 0px;
	padding: 0px;
	margin: 10px auto 10px;
}

footer h3 a{
	width: 150px;
	height: 50px;
	background-image: url(../image/logo_w.png);
	background-size: 150px 50px;
	display: block;
	font-size: 0.1em;
	text-indent: -1000em;
}
footer p{
	font-size:80%;
}
copy {
	text-align: center;
	font-size: 70%;
}
.column100{
	width: 98%;
	margin: 1%;
	float: left;
}
.column50{
	width:48%;
	margin:1%;
	float:left;
}
.column33{
	width:31.333%;
	margin:1%;
}
.column25{
	width:23%;
	margin:1%;
	float:left;
}
.column80{
	width: 80%;
	margin:0px 10%;
	float: left;
}
.column50 ul{
	padding:0px 10px;
}

.entry{
	font-size:100%;
}
.entry a.detailOn img{
	display: block!important;
 margin: 50px auto!important;
}

a.btn {
display: block;
margin:0px auto;
position: relative;
width: 240px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #fff;
border:1px solid #afc86c;
background: #afc86c;
overflow: hidden;
z-index: 1 !important;
}
a.btn:after {
content:"";
position: absolute;
top: 50%;
left: 50%;
height: 0;
width: 100%;
background : #fff;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: 0.3s;
z-index: -1;
}
a.btn:hover {
color: #da3c41;
}
a.btn:hover:after {
height: 350%;
opacity: 1;
}
a.btn:active:after {
height: 350%;
opacity: 1;
}
.btn .fa{
	margin:0px 10px 0px 0px;
}
span.title{
	width:100%;
	display:block;
}
span.left_text{
	padding:2px 1%;
	width:18%;
	background-color:#514a47;
	color:#FFF;
	display:block;
	float:left;
	margin-bottom:10px;
	text-align:center;
}
span.right_text{
	padding:2px 1%;
	width:78%;
	display:block;
	float:left;
	margin-bottom:10px;
}
.map{
	width:100%;
	height:500px;
}
@media (max-width: 980px) {

.header{
	position:fixed;
	z-index:9999;
	background-color:#fff;
}
}
@media (max-width: 767px) {

.forsp_margin{
	height: 70px;
}


.wrapper {
	width:100%;
}

footer ul li a span{
	display:none;
}

.column50,.column80,.column100{
	width:98%;
	margin:1%;
	float:left;
}
.column33,.column25{
	width:46%;
	margin:2%;
	float:left;
}
table{
	width:90%;
	margin:0px 5%;
}
.youtube{
	height:300px;
}
.btn,button[type="submit"]{
	width:80%;
	margin:20px 10%;
}
.grid{
	width:98%;
}
}
@media (min-width: 768px) and (max-width: 980px) {
.forsp_margin{
	height: 100px;
}
.wrapper {
	width:100%;
}

table{
	width:90%;
	margin:0px 1%;
}
.br-sp { display:none; }

}
@media (max-width: 980px) {


#navTgl {
	display: none;
}

label.close {
  	background-color: rgba(0,0,0,0);
}

label.open,
label.close {
  	cursor: pointer;
  	position: fixed;
  	top: 0;
  	right: 0;
}
 
.open {
  	z-index: 2;
	margin-top:10px;
 	width: 50px;
  	height: 50px;
  	color: #de5f0f;
  	font-size: 2em;
  	line-height: 50px;
  	text-align: center;
  	-webkit-transition: background-color .6s, -webkit-transform .6s;
  	transition: background-color .6s, transform .6s;
}
 
#navTgl:checked + .open {
  	-webkit-transform: translateX(-240px);
  	transform: translateX(-240px);
}
 
.close {
  	pointer-events: none;
  	z-index: 1;
  	width: 100%;
  	height: 100%;
  	transition: background-color .6s;
}
 
#navTgl:checked ~ .close {
  	pointer-events: auto;
  	background-color: rgba(0,0,0,0.6);
}
 

.menu {
  	z-index: 9999;
  	position: fixed;
  	top: 0;
  	right: 0;
  	width: 240px;
  	height: 100%;
  	background-color: #514a47;
  	-webkit-transform: translateX(100%);
  	transform: translateX(100%);
  	-webkit-transition: -webkit-transform .6s;
  	transition: transform .6s;
}
 
#navTgl:checked ~ .menu {
  	-webkit-transform: translateX(0);
  	transform: translateX(0);
}
 
.menu p,
.menu li a {
  	color: #fff;
}
 
.menu p {
  	text-align: left;
}
 
.menu ul {
  	padding: 0;
  	list-style-type:none;
	float:left;
	width:100%;
}
 
.menu li {
  	border-bottom: 1px solid rgba(255,255,255,.6);
  	line-height: 2.9;
} 
.menu li a {
  	font-size: 14px;
  	display: block;
  	text-align: left;
  	padding: 0.2em 2em;/*1em 2em*/
  	text-decoration: none;
  	transition: background-color .6s;
}

.menu li a:hover {
  	background-color: rgba(255,255,255,0.6);
}

.menu ul.sns{
	border-bottom: 1px solid rgba(255,255,255,.6);
	float:left;
}
.menu ul.sns li{
	border: none;
	width:50%;
	text-align:center;
	box-sizing:border-box;
	float:left;
}
.menu ul.sns li a{
	text-align:center;
}
.menu ul.sns li:nth-child(1){
	border-right: 1px solid rgba(255,255,255,.6);
}


.contents{
	width:100%;
	margin:0px auto;
}
}


@media (min-width:981px) {
.is-fixed {
  position: fixed!important;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
#navTgl,label.close,label.open  {
	display: none;
}
.contents,.header{
	width:100%;
	margin:0px auto;
}

.wrapper {
	width:100%;
}
.menu{
	width:100%;
	z-index:99999;
}
.menu ul {
	padding: 5px 0px;
	margin: 0;
	list-style-type: none;
	width: 100%;
	background-color: #a0908c;
	position: relative;
}
.menu ul li{
	 display: inline-block;
	 font-size:90%;
	 margin:0px;
	 padding:5px 30px;	
}
.menu ul li a{
	display: block;
	color:#FFF;
}
.menu ul li i{
	 display:none;
}
.menu ul li:last-child{
	 border:none;
}
.menu ul li ul{
	position: absolute;
	top: 42px;
	z-index: 9999;
	margin-left:-120px;
	width:300px!important;
}
.menu ul li ul li{	
	width:100%!important;
	box-sizing:border-box;
	
}
.menu ul li ul li a{
	
}

.menu ul li ul li a:hover{
	background-color:#afafaf;
	color:#000;
}

.menu ul.sns{
	position:absolute;
	right:10px;
	top:0px;
	width:auto;
	background-color:transparent;
}
.menu ul.sns li{
	padding:0px;
	
	
}
.menu ul.sns li a{
	padding:3px 9px;
	background-color:#ffffff;
	border-radius: 20px;
	margin:2px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	color:#333;
}
.menu ul.sns i{
	display: inline-block;
}


.contents_wrap{
	width:1200px;
}
.br-sp { display:none; }
@media (min-width: 981px) and (max-width: 1200px) {
.contents_wrap{
	width:1000px;
}

}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	
}