/*
  Skin Name: きのこむら 深山テンプレート
  Description: きのこむら深山専用スキンです。
  Author: やんちゃ堂
  Author URI: https://www.yanchado.com/
  Screenshot URI: 
  Version: 0.0.1
  Priority: 123456789
*/
/*以下にスタイルシートを記入してください*/

body { background-color: #ffffff; }
.home .article-header { display: none; }
.home .author-info { display: none; }

.home .main a { color: #333; }

/************************
ヘッダー・グローバルナビ
/************************/
.header-container { background-color: #708641; }
.header-container a { color: #ffffff; }
.header-container .navi {
  background: #708641;
}
/* .navi{
  border: 0;
  background-color: transparent;
}*/
#navi .navi-in a {
color: #fff; font-size: 14px;
}
#navi .navi-in>.menu-header .sub-menu {
background:#708641;
}
#navi .navi-in a:hover {
background-color:#004F28;
}
.header-container{
color: #fff;
}
.header{
background-color:#708641;
}
/************************
ヘッダーロゴ
/************************/
.logo-header img {
 max-height: 315px;
}


/* アピールエリア背景色v */
.appeal-content { background-color:rgba(255,255,255,0.0); border-radius: 30px; }
.appeal-content { max-width: 100%; }
.appeal-box{
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #fff;
    border-top: solid 5px #708641;
    border-bottom: solid 5px #708641;
	background: rgba(255, 255, 255, 0.7);
}
.appeal-box p { margin: 0; padding: 0; }

.kadomaru {
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
    padding:3px 20px 0px 20px;
    color:#fff;
	background:#c6001c;
    border-radius:10px;
}
/*834px以下*/
@media screen and (max-width: 834px){
.kadomaru { font-size:14px; }
}




/************************
 見出し
/************************/
.article h2 {
  background: #ffffff;
  border-bottom: 3px solid #708641;
  border-top: 3px solid #708641;
}

.article h3 {
  border: none;
  border-left: solid 5px #708641;
}

.article h4 {
  border: none;
  border-bottom: 6px solid #708641;
}

.article h5,
.article h6 {
  border: none;
}

/************************
 アイキャッチバナー
/************************/
.menu-box {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
	margin-bottom: 50px
}

.menu-box .menu-icatch { width:65%; }
.menu-icatch .i-catch {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.menu-icatch .i-catch .example { width: 50%; }
.menu-icatch .i-catch .example img { margin:0px 0 10px 0; padding:0; }

.menu-box .menu-icatch .example { position: relative; margin: 0px; padding: 0px; }
.menu-box .menu-icatch .example a { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; font-size: 24px; border: solid #708641 1px; padding: 12px 20px; color: #fff; text-decoration: none; font-weight: 900; line-height: 100%; text-align: center; }
.menu-box .menu-icatch .example a { background: rgba(255, 255, 255, 0.8); color: #708641; border-radius:10px; }
.menu-box .menu-icatch .example a:hover{ background: rgba(255, 255, 255, 0.9); color: #708641; }
.menu-box .menu-icatch .example img { width: 100%; margin:0 0 0px 0; padding:0 0 0 0; }


.menu-box .menu-info { width:35%; padding: 0 0 0 10px; }
.menu-box .menu-info h3 { margin:0; }


/*834px以下*/
@media screen and (max-width: 834px){
.menu-box .menu-icatch { width:100%; }
.menu-icatch .i-catch .example { width: 100%; }
.menu-icatch .i-catch .i-fbox { width: 100%; }
.menu-icatch .i-catch .example a { font-size: 20px; }
.menu-box .menu-info { width:100%;  padding: 0 0 0 0px; }
}

.i-catch {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.i-catch .example { width: 50%; position: relative; margin: 0px; padding: 0px; }
.i-catch .example img { margin:0px 0 0px 0; padding:0; }
.i-catch .example a { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; font-size: 21px; border: solid #708641 1px; padding: 12px 20px; color: #fff; text-decoration: none; font-weight: 900; line-height: 100%; text-align: center; }
.i-catch .example a { background: rgba(255, 255, 255, 0.6); color: #708641; border-radius:10px; }
.i-catch .example a:hover{ background: rgba(255, 255, 255, 0.9); color: #708641; }
.i-catch .example img { width: 100%; margin:0 0 0px 0; padding:0 0 0 0; }

/*834px以下*/
@media screen and (max-width: 834px){
.i-fbox { width: 100%; }
.i-catch .example a { font-size: 18px; }
}

/*****************************************
  New Toppege News 201902
*****************************************/
/* お知らせブロック */
.newsgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  margin: 0 0 2em;
	margin-top: 20px
}

.newsgrid > div {
  overflow: hidden;
  min-width: 0;
  padding: 0em;
  border-bottom: 1px dotted #ccc;
	margin-bottom: -5px;
}
.newsgrid > div:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); box-shadow:5px 5px 10px #ccc; border: 1px solid #ccc; }

.newsgrid > div h4 { font-size: 16px; margin: 0px 0px 0px 0px; padding: 0px; border: none; font-weight: 300; }
.newsgrid > div img { float: left; margin: 0 10px 0 0; width: auto; height: 83px; }
.newsgrid > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 300; }
.newsgrid > div p { margin: 0; padding: 0; line-height: 130%; }
.newsgrid > div .mday { font-size: 12px; margin: 5px 0 5px 0; line-height: 120%; }

/*834px以下*/
@media screen and (max-width: 834px){
	.newsgrid > div h4 { font-size: 16px; }
	.newsgrid > div a { font-weight: 900; }
	.newsgrid > div .mday { font-size: 12px; }
	
}

/* 周辺情報ブロック */
.suburbs-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
	margin: 0 10px;
}

.suburbs { background:#eee; }
.suburbs-info > div {
  min-width: 0;
  padding: 0em;
  border-bottom: 1px dotted #ccc;
}

.suburbs-info > div h4 { font-size: 16px; margin: 0px 0px 0px 0px; padding: 0px; border: none; font-weight: 300; }
.suburbs-info > div img { float: left; margin: 0 10px 0 0; width: auto; height: 80px; }
.suburbs-info > div a { line-height: 10px; text-decoration: none; text-align: left; font-weight: 300; }
.suburbs-info > div p { margin: 0; padding: 0; line-height: 130%; }
.suburbs-info > div .mday { font-size: 12px; margin: 5px 0 5px 0; line-height: 120%; }

.suburbs-info a {
	position: relative;
	display: inline-block;
	transition: .3s;
	color: #AB47BC;
}
.suburbs-info a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background-color: #AB47BC;
	transition: .3s;
}
.suburbs-info a:hover::after {
	width: 100%;
}



/*834px以下*/
@media screen and (max-width: 834px){
	.suburbs-info { margin: 0 0 2em; }
	.suburbs-info > div h4 { font-size: 16px; }
	.suburbs-info > div a { font-weight: 900; }
	.suburbs-info > div .mday { font-size: 12px; }
	
}

#sb_instagram .sb_instagram_header a { color: #ccc: }
#sb_instagram .sb_instagram_header .sbi_header_text h3 { border: 0px; }



/************************************
** 全幅
************************************/

body {
	overflow-x: hidden;
}
.haikei-top {
    margin-left: calc((50vw - 50%) * -1);
    margin-right: calc((50vw - 50%) * -1);
	padding: 0;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
}
/************** 640pxまでの幅の場合に適応される **************/
@media screen and (max-width: 640px) {
.haikei-top { padding: 0 0px 0em; }
	.haikei-top { height: 300px; }
}

.tellink a { color: #ffffff: }

/************************************
** 周辺リンク
************************************/
.blogcard-title { font-size: 18px; }
.external-blogcard-title { font-size: 16px; line-height: 100%; }
.external-blogcard-snippet { font-size: 12px; line-height: 120%; }

/************************
 施設概要
************************/
.page-id-10 h4 { border-bottom: 0px; }

/************************
 お品書き
************************/
.page-id-949 .article-header .date-tags { display: none; }
.page-id-949 h3 { clear:left; }
.page-id-949 .su-spoiler .su-spoiler-title { font-size:20px }
.page-id-949 .su-spoiler-icon { color:red; }

.page-id-949 .post-949 figure {
  position: relative;
  overflow: hidden;
  width: 800px;
	max-width: 100%;
}
.page-id-949 .post-949 figcaption {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background:rgba(255,255,255,0.7);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 1;
}
.page-id-949 .post-949 figure:hover figcaption {
  top: 0;
  left: 0;
}
.page-id-949 figcaption h4 { font-size:80%; color: #455227; padding-left: 20px; padding-right: 20px; text-align:right;  }
.page-id-949 figcaption p { font-size:80%; color: #455227; padding-left: 20px; padding-right: 20px;  }


/************************
 まつたけ料理
************************/
.page-id-8 .article-header .date-tags { display: none; }




.page-id-8 h3 { clear:left; }

.page-id-8 .su-spoiler .su-spoiler-title { font-size:20px }
.page-id-8 .su-spoiler-icon { color:red; }

/************************
 きのこ料理
************************/
.page-id-710 .article-header .date-tags { display: none; }

.page-id-710 h3 { clear:left; }

/************************
 ランチメニュー
************************/
.page-id-813 .article-header .date-tags { display: none; }

.page-id-813 h3 { clear:left; }

/************************
 団体様メニュー
************************/
.page-id-1252 .article-header .date-tags { display: none; }

/************************
 館内案内
************************/
.page-id-10 .article-header .date-tags { display: none; }
.page-id-10 h3 { clear:left; }

/************************
 きのこむらの売店
************************/
.page-id-1222 .article-header .date-tags { display: none; }
.page-id-1222 h3 { clear:left; }

/************************
 交通の案内
************************/
.page-id-56 .article-header .date-tags { display: none; }
.page-id-56 h3 { clear:left; }

/************************
 会社概要
************************/
.page-id-13 .article-header .date-tags { display: none; }
.page-id-13 h3 { clear:left; }
.company th  { width: 20%; text-align: right; margin: 10px; }
 
@media only screen and (max-width:480px){
    .company { margin: 0 -0px; }
    .company th,
    .company td{
    width: 100%;
    display: block;
    border-top: none;
    }
	.company th  { text-align: left; margin:0; }
  .company tr:first-child th { border-top: 1px solid #ddd; }
}
/************************
 お問合せ
************************/
.page-id-14 .article-header .date-tags { display: none; }
.page-id-14 h3 { clear:left; }


/************************
フッター
************************/
#footer {
  color: white;
  background-color: #708641;
}
#footer .site-name-text {
  color: white;
}
#footer #navi-footer a {
  color: white;
  background-color: #708641;
}
#footer #navi-footer a:hover {
  background-color: white;
  color: #708641;
}