@charset "UTF-8";
/* CSS Document */
/*============================================================================================
↓共通========================================================================================
============================================================================================*/
html {
	font-size : 62.5%; /*←全体の文字サイズの基準を10pxにセット*/
	line-height: 1em; /*←全体の行間を1emにセット*/
} 
.ie p{
	display:none;}
/* clearfix */
#header:after,
#container:after,
#contents:after,
.clearfix:after{
	content:" ";
	display:block;
	height:0;
	line-height:0;
	clear:both;
	visibility:hidden;
}
#header,
#container,
#contents,
.clearfix{
	display:inline-block;
	min-height:1%;
}
/* Hides from IE-mac */
* html #header,
* html #container,
* html #contents,
* html .clearfix{height:1%;}
#header,
#container,
#contents,
.clearfix{display:block;}
/* リンクテキスト */
a:link,a:visited {
	
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a.over,.over {cursor: pointer;}
/* 画像 */
img.width-max{
     width: 100%;
	 max-width: 1080px; 
/*←幅いっぱいの画像の最大サイズを指定*/
     height: auto;
	 margin: 0 auto;
     display:block;
}
/* ページトップボタン */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 0.8em;
	z-index:99999;
}
#page-top img{
	width:20px;
	height:14px}
#page-top a {
    background: #fff;
    text-decoration: none;
    color: #E83E0B;
	opacity: 0.8;  
   
    padding: 5px 5px;
    text-align: center;
    display: block;
    border-radius: 2px;
}
#page-top a:hover {
    text-decoration: none;
    background: #fff;
}
/* 余白/フロート */
.clear{clear:both;}
.left{ float:left;  }
.right{ float:right; }
.align-c{ text-align:center; }
.align-r{ text-align:right; }
.align-l{ text-align:left; }
.mgB0{   margin-bottom:0px;  }
.mgB5{   margin-bottom:5px;  }
.mgB10{  margin-bottom:10px; }
.mgB15{  margin-bottom:15px; }
.mgB20{  margin-bottom:20px; }
.mgB30{  margin-bottom:30px; }
.mgB40{  margin-bottom:40px; }
.mgB50{  margin-bottom:50px; }
.mgB60{  margin-bottom:60px; }
.mgT0{   margin-top:0px;  }
.mgT5{   margin-top:5px;  }
.mgT10{  margin-top:10px; }
.mgT15{  margin-top:15px; }
.mgT20{  margin-top:20px; }
.mgT25{  margin-top:25px; }
.mgT30{  margin-top:30px; }
.mgT40{  margin-top:40px; }
.mgT50{  margin-top:50px; }
.mgT80{  margin-top:80px; }
.mgR0{   margin-right:0px;  }
.mgR5{   margin-right:5px;  }
.mgR10{  margin-right:10px; }
.mgR15{  margin-right:15px; }
.mgR20{  margin-right:20px; }
.mgR30{  margin-right:30px; }
.mgR40{  margin-right:40px; }
.mgR50{  margin-right:50px; }
.mgL0{   margin-left:0px;  }
.mgL5{   margin-left:5px;  }
.mgL10{  margin-left:10px; }
.mgL15{  margin-left:15px; }
.mgL20{  margin-left:20px; }
.mgL30{  margin-left:30px; }
.mgL40{  margin-left:40px; }
.mgL50{  margin-left:50px; }
.pdgB0{   padding-bottom:0px;  }
.pdgB5{   padding-bottom:5px;  }
.pdgB10{  padding-bottom:10px; }
.pdgB15{  padding-bottom:15px; }
.pdgB20{  padding-bottom:20px; }
.pdgB30{  padding-bottom:30px; }
.pdgB40{  padding-bottom:40px; }
.pdgB50{  padding-bottom:50px; }
.pdgB50{  padding-bottom:60px; }
.pdgT0{   padding-top:0px;  }
.pdgT5{   padding-top:5px;  }
.pdgT10{  padding-top:10px; }
.pdgT15{  padding-top:15px; }
.pdgT20{  padding-top:20px; }
.pdgT30{  padding-top:30px; }
.pdgT40{  padding-top:40px; }
.pdgT50{  padding-top:50px; }
.pdgR0{   padding-right:0px;  }
.pdgR5{   padding-right:5px;  }
.pdgR10{  padding-right:10px; }
.pdgR15{  padding-right:15px; }
.pdgR20{  padding-right:20px; }
.pdgR30{  padding-right:30px; }
.pdgR40{  padding-right:40px; }
.pdgR50{  padding-right:50px; }
.pdgL0{   padding-left:0px;  }
.pdgL5{   padding-left:5px;  }
.pdgL10{  padding-left:10px; }
.pdgL15{  padding-left:15px; }
.pdgL20{  padding-left:20px; }
.pdgL30{  padding-left:30px; }
.pdgL40{  padding-left:40px; }
.pdgL50{  padding-left:50px; }
/*============================================================================================
↓フォント====================================================================================
============================================================================================*/
/*フォントサイズ*/
.font6{font-size: 60%;}
.font8{font-size: 80%;}
.font10{font-size: 100%;}
.font12{font-size: 120%; line-height:1.2em;}
.font14{font-size: 140%; line-height:1.4em;}
.font16{font-size: 160%; line-height:1.6em;}
.font18{font-size: 180%; line-height:1.8em;}
.font20{font-size: 200%; line-height:2em;}
/*注釈*/
small	{
font-size:0.8em;
	}	
/*強調*/
strong{
	font-size:1.2em;
	line-height:1.6em;
	font-weight:400;
	}
	
/*英語表記*/
@font-face {
font-family: "bebas1";
src:url("../font/bebasneuebook-webfont.eot") ;
src:url("../font/bebasneuebook-webfont.eot?iefix") format('eot'),
url("../font/bebasneuebook-webfont.woff") format('woff'),
url("../font/bebasneuebook-webfont.ttf") format('truetype'),
url("../font/bebasneuebook-webfont.otf") format('opentype');
font-style: normal;
}
@font-face {
font-family: "bebas2";
src:url("../font/bebasneueregular-webfont.eot") ;
src:url("../font/bebasneueregular-webfont.eot?iefix") format('eot'),
url("../font/bebasneueregular-webfont.woff") format('woff'),
url("../font/bebasneueregular-webfont.ttf") format('truetype'),
url("../font/bebasneueregular-webfont.otf") format('opentype');
font-style: normal;
}
@font-face {
font-family: "bebas2";
src:url("../font/bebasneueregular-webfont.eot") ;
src:url("../font/bebasneueregular-webfont.eot?iefix") format('eot'),
url("../font/bebasneueregular-webfont.woff") format('woff'),
url("../font/bebasneueregular-webfont.ttf") format('truetype'),
url("../font/bebasneueregular-webfont.otf") format('opentype');
font-style: normal;
}
@font-face {
font-family: "bebas3";
src:url("../font/bebasneuebold-webfont.eot") ;
src:url("../font/bebasneuebold-webfont.eot?iefix") format('eot'),
url("../font/bebasneuebold-webfont.woff") format('woff'),
url("../font/bebasneuebold-webfont.ttf") format('truetype'),
url("../font/bebasneuebold-webfont.otf") format('opentype');
font-style: normal;
}
.en {
  font-family: "bebas1";
}
.en2 {
  font-family: "bebas2";
}
.en3 {
  font-family: "bebas3";
}
/*============================================================================================
↓各デバイスでの表示切り替え===========================================================
============================================================================================*/
.sp, .tab {display: none;}/*only SP&TAB*/
.pc {display: block;}/*only PC*/
@media screen and (max-width: 1080px) {
.sp, .tab {display: none;}
.pc {display: block;}
}
@media screen and (max-width:  768px) {
.sp, .pc {display: none;}
.tab {display: block;}
}
@media screen and (max-width: 640px) {
.pc, .tab {display: none;}
.sp {display: block;}
}
/*============================================================================================
↓＜レイアウト＞全体============================================================================
============================================================================================*/
html {
	width: 100%;
	height: 100%;
}
body {
	font-size : 1.4em; /*←サイト全体の文字サイズの基準*/
	font-family: 'Noto Sans Japanese', serif,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 100;
	color: #362a2a;
	background-color: #fff; 
	width: 100%;
	height:100%;
	-webkit-text-size-adjust: 100%;/*←iOS、Safari向け。PC向けサイトをスマートフォンで閲覧した時に文字サイズが大きくならないようにする。*/
}
#wrapper {
border-top:solid 1px #362a2a;
text-align:center;
}
#contents-area {
	width: 100%;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}
/*赤くする*/
.red{
	color:#E83E0B;}
/*アコーディオン*/
dt h3{
	background-image: url(../../shop-info/img/arr-white-down.png);
	background-position:right center;
	background-repeat:no-repeat;
	color:#fff;
	background-color:#E83E0B;
	font-size:1.2em;
	padding:16px 0;
	}
dt h3 img{
	width:41px;
	height:24px;
	vertical-align:middle;
	margin-right:20px;}
dd{
	border:1px solid #E83E0B;
	display:none;
	padding:40px 40px;
	text-align:left
	}
	
		
@media screen and (max-width: 768px) {
#contents-area {
	width: 100%;
	margin:0 auto;
	margin-top:30px;
	margin-bottom:30px;
}
}
@media screen and (max-width: 640px) {
#contents-area {
	width: 100%;
	margin:0 auto;
	margin-top:40px;
	margin-bottom:20px;
}
}
}
@media screen and (max-width: 1080px) {
body {
/* background-color:#ffff00;  きいろ　←メディアクエリの状態の確認用。最後には無効に！*/
  
}
}
@media screen and (max-width: 768px) {
body {
/* background-color:#6C3;  きみどり　←メディアクエリの状態の確認用。最後には無効に！*/
  font-size : 1.2em;
}
}
@media screen and (max-width: 640px) {
body {
 /* background-color:#41C9FB; みずいろ　←メディアクエリの状態の確認用。最後には無効に！*/
}
}
/*============================================================================================
↓＜レイアウト＞レスポンシブ対応（上下余白・サイド余白）======================================
============================================================================================*/
.inner-wrap { /*可変幅*/
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	
}
.ajs-mg { /*可変マージン*/
	margin-bottom: 3em;
	overflow: hidden;
}
}
@media screen and (max-width: 640px) {
.inner-wrap {
	padding-left: 1.5em;
	padding-right: 1.5em;
}
}
/*============================================================================================
↓ヘッダー================================================================================
============================================================================================*/
#header {
	width: 100%;
	background-color:#362a2a;
	border-top:solid 3px #E83E0B;
	text-align:center;
	position:relative;
	height:60px;
	padding:5px 0;
}
#header .inner{
	vertical-align:middle;
	}
@media screen and (max-width:768px) {
#header .inner{
	margin: 0 auto;
	}
	}
@media screen and (max-width:640px) {
#header {
	   position: fixed;
	   z-index:1000;
	   height:40px;
	}
#contents-area {
/*	margin-top:40px;*/
	margin-top:52px;
	}
	}
/*============================================================================================
↓ヘッダー左側================================================================================
============================================================================================*/
#header .inner .left-cont {
	padding-left:20px;}
/*--左サイドサイトロゴ--*/
#header .inner .left-cont .site-logo {
	width:660px;
	vertical-align: middle;
}
#header .inner .left-cont .site-logo  a{
	height: 45px;
	margin-top:5px;
	display: block;
}
#header .inner .left-cont .site-logo-sp a{
	display:none;}
@media screen and (max-width:768px) {
#header .inner .left-cont .site-logo-sp a{
	display:block;
	margin-top:10px;
	height: 45px;
	background-image: url(../img/logo-yamakishi-top-sp.png) ;
	 background-size: contain;
	 	 background-repeat:no-repeat;
	text-indent: -9999px;
	}
#header .inner .left-cont .site-logo  a{
	display:none;
}
}
@media screen and (max-width: 640px) {
#header .inner .left-cont .site-logo-sp a{
	margin-top:2px;
	display:block;
	height:35px;
	}
}
/*============================================================================================
↓ヘッダー右側================================================================================
============================================================================================*/
#header .inner .right-cont {
	position: absolute;
	right:0;
	top:0;
	padding-top:15px;
	padding-right:20px;
	}
#btn-contact img  {
height:40px;
vertical-align:middle;
	}
/*マウスオーバーで薄くなる*/
.permeation :hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: “alpha( opacity=80 )”;
}
.menu-btn {
	position:fixed;
	top:15px;
	right:20px;
	width:30px;
	height:30px;}
@media screen and (max-width: 640px) {
/*--サイトコピー（PC）-*/
.inner .right-cont #btn-contact{
	display:none;
}
}
	
/*============================================================================================
↓グランドメニュー============================================================================
============================================================================================*/
#gnav {
	font-size: 1em;
	margin: 0 auto;
	position: relative;
	padding:0 40px;
	}
	
#gnav ul {
	width: 100%;
	display: table;
	margin: 0 auto;
	}
#gnav ul li {
	display: table-cell;
	text-align:center;
	width: 14.28571428571429%;
	vertical-align: middle;
	border-right:1px solid #362a2a;
	transform: skew(-30deg);
    -o-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
	}
	
#gnav ul li a{
	display:block;
	vertical-align: middle;
	padding:12px 0px;
	font-weight:500;
	z-index:100;
	letter-spacing:0.1em
	}
	
#gnav ul li .en3 {
	font-size: 0.8em;
	display: block;
	color:#E83E0B;
	letter-spacing:0.08em;
	margin-top:6px;
}
#gnav ul li p{
	transform: skew(30deg);
	-o-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -webkit-transform: skew(30deg);
	}
		
#gnav ul li:hover{
	background: #00ff00;
   background: url(../img/back-dot.png) repeat;}
	
#gnav ul li:first-child {
	border-left:1px solid #362a2a;
	display: table-cell;
	}
@media screen and (max-width: 768px) {
#gnav {
	font-size: 1em;
	line-height: 1em;
	margin: 0 auto;
	position: relative;
	padding:0 0px;
	}
#gnav ul {
	width: 90%;
	display: table;
	margin: 0 auto;
	
	
}
#gnav ul li {
	width: auto;
	}
#gnav ul li a{
	display:block;
	height:30px;
	}
	
#gnav ul li .en {
	font-size: 0.6em;
	}
		}
@media screen and (max-width: 640px) {
#gnav {
	display:none;
	}
}
/*============================================================================================
↓ページ内リンク================================================================================
============================================================================================*/	
#page-link {
	margin: 0 auto;
	position: relative;
	width:40%;
	}
#page-link ul {
	width: 100%;
	display: table;
	margin: 0 auto;
}
#page-link ul li {
	display: table-cell;
	text-align:center;
	width:25%;
	line-height: 1.3em;
	vertical-align: middle;
	border-right:1px solid #E83E0B;
	border-top:1px solid #E83E0B;
	border-bottom:1px solid #E83E0B;
	font-weight:500;
	}
#page-link ul li a{
	display:block;
	line-height: 1.3em;
	vertical-align: middle;
	padding:10px 0px;
	letter-spacing:0.1em;
	z-index:100;
	color:#E83E0B;
	font-size: 0.9em;
	line-height: 1em;
	}
#page-link ul li a:link,
#page-link ul li a:visited {
	/*↓グラデ*/
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 49%, #f5f5f5 50%, #f5f5f5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#ffffff), color-stop(50%,#f5f5f5), color-stop(100%,#f5f5f5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 49%,#f5f5f5 50%,#f5f5f5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#ffffff 49%,#f5f5f5 50%,#f5f5f5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 49%,#f5f5f5 50%,#f5f5f5 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 49%,#f5f5f5 50%,#f5f5f5 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.bladient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
	}
#page-link ul li a:hover{
	background-color: #fbd6bf;
	background-image: none;
	}
#page-link ul li:first-child {
	border-left:1px solid #E83E0B;
	display: table-cell;
	}
@media screen and (max-width:768px) {
#page-link {
	width:90%;
	margin: 0 auto 50px auto;
	}
	
	}
/*============================================================================================
↓中身====================================================================================
============================================================================================*/
/*でかいタイトル*/
.big-title{
	position:relative;
	max-width:1080px;
	margin:0 auto;
	margin-bottom:0px;
	
	}
.big-title h1{
	text-align:left;
	font-size:2.5em;
	font-weight:300;
	letter-spacing:0.2em;
	position:absolute;
	float:left;
	line-height:1em;
	padding-top:6%;
	padding-left:3%;
	}
	
.big-title	{
	width:100%;}  
.big-title h1 span{
	font-size:0.8em;
	color:#E83E0B;
	letter-spacing:0.08em;
	}  
	
.big-title .top-title{
	background-image:url(../img/back-dot.png);
	padding-right:0px;
	} 
.big-title .top-title img	{
	width:65%;
	float:right;
	} 
.big-title p{text-align:left;
font-size:1em;
	line-height:1.8em;
	margin-top:10px;
	font-weight:400;
	}
	
@media screen and (max-width:768px) {
.big-title p{
	padding:0 20px;
}
	}
@media screen and (max-width:640px) {
.big-title{
	margin-bottom:20px;
	}
.big-title  h1{
	font-weight:500;
	font-size:1.6em;
	letter-spacing:0.1em;
	line-height:1em;
	}
	}
	
/*背景に赤線のあるタイトル*/
.vision-title{
	max-width:1080px;
	background-image:url(../img/back-border.png);
	background-repeat:repeat-x;
	background-position:0px 80px;
	margin:50px auto 80px;}
.sub-title{
	background-repeat:no-repeat;
	background-position:center top;
	background-size: 40px;
	letter-spacing:0.15em;
	background-color:#fff;
	display: inline-block;
	padding:50px 20px 4px 20px;
	font-size:1.6em;
	color:#E83E0B;
	font-weight:300;
	line-height:1em;
	margin:20px auto 0px auto;
	
} 
.sub-title span{
	font-size:0.6em;
	letter-spacing:0.08em;} 
@media screen and (max-width:640px) {
.vision-title{
	margin:20px auto 30px;}
	}
	
/*============================================================================================
↓フッター====================================================================================
============================================================================================*/
#footer {
	background-color:#362a2a;
	border-bottom:solid 3px #E83E0B;
	padding-bottom:30px;
	padding-top:20px;
	text-align:center;
	position:relative;
	}
#footer .inner{
	font-size: 0.9em;
	line-height:1.4em;
	color:#FFF;
	box-sizing: border-box;
		max-width:1080px;
		margin:0 auto;
	}
	
@media screen and (max-width: 1080px){
#footer .inner{
		padding:0 10px;
	}
	 }
/*サイトマップボタン*/
#footer  .footer-menu{
	margin-bottom:20px;
	display:table;
	width:100%;
	box-sizing: border-box;
	}
	
	
#footer  .footer-menu li {
	width:12.5%;
	display:table-cell;
	border-left:solid 1px #fff;
	text-align:center;
	vertical-align:middle;
	}
#footer  .footer-menu li a{
	color:#FFF;
	display:block;
	padding:5px 0;
	}	
#footer  .footer-menu li:last-child {
	border-right:solid 1px #fff;
	
	}
	
#footer .footer-menu li a:hover{
	color: #E83E0B;
	}
/*下のボタンなど*/
.etc{
	margin:0;
	}
.etc .bnr-recruit {
	float:left;
	
	height:40px;
}
.etc .btn-contact {
	float:right;
	
	height:40px;
}
.etc .bnr-recruit a,
.etc .btn-contact a {
	display:block;
	width:100%;
	height:100%;
}
.etc .bnr-recruit img,
.etc .btn-contact img {
	width:auto;
	height:100%;
}
.etc ul {
	float:left;
	display:table;
	text-align:left;
  }
.etc li{
	height:40px;
	display:table-cell;
	vertical-align:middle;
	}	
.etc li.logo img {
	width:auto;
	height:100%;
	margin:0 10px;
}
/*コピーライト*/
#footer .copyright{
	font-size:0.6em;
	text-align:center;
	color:#FFF;
	display: block;
	}	
@media screen and (max-width: 768px) {
.etc .bnr-recruit {
	float:inherit;
	margin:10px auto;
}
.etc li.logo img {
	width:auto;
	height:100%;
	margin:0 10px 0 0;
}
}
@media screen and (max-width: 640px) {
#footer  .footer-menu{
	display:none;
	}
.etc ul {
	float:inherit;
	margin:0 auto;
  }
.etc .btn-contact {
	float:inherit;
	margin:10px auto;
}
}