@charset "UTF-8";
/* CSS Document */
nav ul li,nav ul li a{
font-family: kinuta-maruminfuji-stdn, serif;
}

/*ハンバーガーメニュークリック前*/
/* クリックエリアと位置を指定  */
.btnHamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px; /* クリックエリアの横幅*/
  height: 20px; /* クリックエリアの高さ*/
  cursor: pointer;
  z-index: 20;
}

/* 3本線の1本ごとに共通するスタイルを指定  */
.btnHamburger .line {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px; /* 横幅 */
  height: 2px; /* 1本辺りの高さ */
  background: #000; /* 線の色 */

  /* 適用するプロパティ、変化する時間、変化する速度 */
  -webkit-transition: 0.3s;
  transition: 0.3s;
 }

/* 3本線の各線の位置を指定  */
.btnHamburger .line_01 { top: 0; }
.btnHamburger .line_02 { top: 8px; }
.btnHamburger .line_03 { top: 16px; }

/*#coverlayerクリック前*/
#coverlayer{
  width: 1px;
/*  生成り色*/
  background:#fbfaf3;
  position: fixed;
  top: 0;
  left:0;
  bottom: 0;
  opacity: 0;
  transition: 0.5s;
  z-index: 4;
}

/*navクリック前*/
nav{
  width: 300px;
  position: fixed;
  top:0px;
  left: -300px;
  opacity: 0;
  transition: 0.5s;
}


/*ハンバーガーメニュークリック後*/
/* 最上部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_01 {
  top: 8px; /* 上から2番目の線の位置に変更 */

  /* 線を45度回転 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #000;
}

/* 上から2番目の線のスタイル ---------------------- */
.btnHamburger.is-active .line_02 {
  opacity: 0; /* 不透明度を下げて線を消す */
}

/* 最下部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_03 {
  top: 8px; /* 上から2番目の線の位置に変更 */

  /* 線を135度回転 */
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  background: #000;
}

/*#coverlayerクリック後*/
#coverlayer.is-active{
  width: 100%;
  opacity: 0.8;
}

/*navクリック後*/
nav.is-active{
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  z-index: 4;
}



/*-------------アコーディオン-----------*/
.accordion-area{
list-style: none;
width: 96%;
max-width: 900px;
margin:0 auto;
}

.accordion-area li{
margin: 10px 0;
}

.accordion-area section {
border: 1px solid #ccc;
}

.box a{
height: 18px;
font-size: 13px;
}
.box p{
text-align: center;
font-family: kinuta-maruminfuji-stdn, serif;
margin-bottom: 0;
height: 35px;

}
.box p:last-child{
border-bottom: none;
}
/*アコーディオンタイトル*/
.shop-link {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size:23px;
color: #000;
font-weight: normal;
padding: 5px 0 5px 50px;
transition: all .5s ease;
}

/*アイコンの＋と×*/
.shop-link::before,
.shop-link::after{
position: absolute;
    content: '';
    width: 10px;
    height: 1px;
    background-color: #000000;
		    transition: 0.3s;
}
.shop-link::before{
    top: 57%;
    left: 190px;
    transform: rotate(45deg)
}
.shop-link::after{    
    top: 57%;
    left: 197px;
    transform: rotate(-45deg)
}

/*　closeというクラスがついたら形状変化　*/
.shop-link.close::before{
	transform: rotate(135deg);
}

.shop-link.close::after{
	transform: rotate(45deg);
}

/*アコーディオンで現れるエリア*/
.box {
display: none;/*はじめは非表示*/
margin:0 0 0 13%;
width: 200px
}
nav ul li a .subname{
color:#000;
}
/*------------------------------------------*/



/*PC*/
@media screen and (min-width:960px){

.btnHamburger{
display:none;
}

nav ul li a .subname:hover{
color: #B6B6B6;
}
.subname{
font-size: 12px;
}

 nav{
z-index: 2;
opacity:1;
}

nav ul{
width: 100%;
margin-left:95%;
margin-top: 55px;
position:relative;
}

h1{
display: none;
}
nav ul li{
width:200px;
}

nav ul li a{
color: #000;
font-size: 22px;
}

nav ul li a:hover{
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
 color:#B7B7B7;
}

nav ul li a{
color: #000;
  text-decoration: none;
font-family: kinuta-maruminfuji-stdn, serif;
}

.shop-link{
color: #000;
}

.btnHamburger{
display:none;
}



}