@charset "utf-8";
html {
    font-size: 62.5%;
}

body {
 font-family: "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
 color: #240e00;
/* background: #fff;*/
 line-height: 2;
 outline: 0;
 font-size: 1.4rem;
 overflow-x: hidden;
}

/*ページ内リンクの移動位置を調整*/
a.anchor {
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}

/* ヘッダー内のスタイル
---------------------------------------------------- */
header {
 width: 100%;
 background-color: #240e00;
    top: 0;
    position: fixed;
    z-index: 999;
}

.header-wrap {
 width: 980px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
    flex-wrap: wrap;
 align-items: center;  
}

.logo-wrap {
 display: flex;
 align-items: center;
}

.logomark {
 width: 15%;
 height: 15%;
 padding: 18px 0;
}

h1{
 margin-left: 10px;
}

.g-nav {
 color: #d4c1ac;  
}

.g-nav ul li {
 display: inline;
 margin: 0 10px;
}

/*--- リンクの下線が中心からするする出てくる　参考サイト　https://kuzlog.com/2018/01/17/2341/ ---*/
.g-nav ul li a {
 color: #d4c1ac;
 display: inline-block;
 position: relative;
 text-decoration: none;
}

.g-nav ul li a:hover {
   color: #fd8104; 
/* color: #b6855a;*/
 transition-duration: 0.5s;
}

.g-nav ul li a:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 3px;
	background: #fd8104;
	transform: scale(0, 1);
	transition: 0.4s;
}

.g-nav ul li a:hover:before {
	transform: scale(1);
}

/* コンテンツエリアのスタイル
---------------------------------------------------- */
.main-visual-cover {
    padding-top: 94px;
    padding-bottom: 50px;
    background-color: #bd8b5e;
}

#main-visual {
    width: 960px;
    height: auto;
    margin: 0 auto;
    border: solid 10px #d4c1ac;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
}

#main-visual p {
    color: #fff; /* color: #cba466;*/
    font-size: 4.5rem;
    font-family:  "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-shadow: 3px 3px 3px #240e00;
/* line-height: 2;*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    height: 50%;
    margin: auto; 
    animation-name: fadein;
    animation-duration: 20s;
}

/*---　↑と↓　メインビジュアル文字のフェードイン　参考サイト　 https://web-ashibi.net/archives/1952 ---*/

@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

#main-visual img {
/* width: 100%;*/
}

/*-----------------------------------
文章が長い場合、中心に来るが左右が空きすぎる
#main-visual {
 width: 960px;
 margin: 20px auto 50px;
 border: solid 10px #d4c1ac;
 position: relative;
}

#main-visual p {
color: #fff;  color: #cba466;
 font-size: 42px;
 font-family:  "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 text-align: center;
text-shadow: 3px 3px 3px #240e00;
 line-height: 2;
 position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
 margin:0;
 padding:0;
 animation-name: fadein;
 animation-duration: 20s;
}
*/

h2 {
 position: relative;
 line-height: 1;
 padding: 10px 20px 5px;
 border-left: 6px solid #fd8104;/*#6d5f55*/
 font-size: 22px;
 font-weight: normal;
 margin-bottom: 30px;
}

h2::after {
 position: absolute;
 left: 0;
 bottom: 0;
 content: '';
 width: 100%;
 height: 0;
 border-bottom: 1px solid #cba466;
}

/* greetingのスタイル
---------------------------------------------------- */
#contents-greeting { 
 background-color: #d4c1ac;
}

.area-greeting {
 width: 980px;
 margin: 0 auto;
 padding: 50px 0;
/* color: #240e00;*/
}

.inner-greeting {
 display: flex;
 justify-content: space-between;
    flex-wrap: wrap;
}

.inner-greeting p {
 width: 590px;
    margin-bottom: 20px;
}

.inner-greeting .info {
    color: darkred;
    font-weight: 800;
}

/* insistenceのスタイル
---------------------------------------------------- */
#contents-insistence {
 background-color: #3a2314;
}

.area-insistence {
 width: 980px;
 margin: 0 auto;
 padding: 50px 0;
 color: #fff;
}

.inner-insistence {
 display: flex;
 justify-content: space-between;
    flex-wrap: wrap;
}

.inner-insistence img {
    margin-bottom: 20px;
}

.inner-insistence p {
/* margin-left: 80px;*/
    width: 590px;
}

.inner-insistence .info {
    color: lightpink;
    font-weight: 800;
}

/* itemのスタイル
---------------------------------------------------- */
#contents-item {
    background-color: #bd8b5e;
}

.area-item {
 width: 980px;
 margin: 0 auto;
 padding: 50px 0;
}

.inner-item01,
.inner-item02 { 
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap; 
}

.inner-item01 {
  margin-bottom: 50px;  
}

.inner-item01 h3,
.inner-item02 h3 {
 font-size: 22px;
 font-weight: normal;
 width: 980px; 
}

.inner-item01 h3 span,
.inner-item02 h3 span {
 font-size: 16px;
 color: aquamarine;
}
.inner-item01 figure,
.inner-item02 figure {
 width: 300px;
 background-color: #d4c1ac;
}

/*上の段　指定の大きさにトリミング*/
.inner-item01 img {
 width: 300px;
 height: 300px;
 object-fit: cover; /*指定の大きさにトリミング*/
}

/*中の段　ホバーでふわっと拡大する*/
.item-img-wrap {
 width: 300px;
 height: 300px;
 background: #000;
 overflow: hidden;
}

.item-img-wrap img {
 display: block;
 transition-duration: 0.3s;	/*変化に掛かる時間*/
}

.item-img-wrap img:hover {
 transform: scale(1.1);	/*画像の拡大率*/
 transition-duration: 0.5s;	/*変化に掛かる時間*/
 opacity: 0.6;
}

.inner-item01 figcaption,
.inner-item02 figcaption {
 padding: 5px 10px;
 line-height: 1.6;
}

.inner-item01 figure,
.inner-item02 figure {
    margin-bottom: 20px;
}

/* shopのスタイル
---------------------------------------------------- */
#contents-shop { 
 background-color: #d4c1ac; 
}

.area-shop {
 width: 980px;
 margin: 0 auto;
 padding: 50px 0;
/* color: #240e00;*/
}

.inner-shop {
 padding: 40px 0;
 display: flex;
 justify-content: space-between;
    flex-wrap: wrap;
 border-bottom: solid 1px #40210f;
}

.inner-shop-wrap {
 width: 350px;
}

.inner-shop h3 {
 font-size: 22px;
 font-weight: normal;
/* color: #240e00;*/
}

.head-inner-shop {
 font-weight: bold;
 margin: 10px 0 0;
}

/* contactのスタイル
---------------------------------------------------- */
#contents-contact {
 background-color: beige;
}

.area-contact {
 width: 980px;
 margin: 0 auto;
 padding: 50px 0;
}

#entry dl {
 background: #d4c1ac;
 border-bottom: 1px solid #6d5f55;
 border-top: 0;
}

#entry dl dt,
#entry dl dd {
 padding: 10px;
 border-top: 1px solid #6d5f55;
}

#entry dl dt {
 width: 16em;
 float: left;
 clear: both;
}

#entry dl dd {
 background: beige;
/* border-left: 1px solid #6d5f55;*/
 margin-left: 16em;
}

#entry .must {
 color: red;
 margin-left: 1em;
}

#entry #name {
 width: 15em;
 padding: 3px;
}

#entry #email {
 width: 30em;
 padding: 3px;
}

#entry #phone {
 width: 15em;
 padding: 3px;
}

#entry #detail {
 width: 50em;
 height: 15em;
}

#entry #submit_button_cover {
 text-align: center;
}

#entry #submit_button {
 background-color: beige;
 border: 1px solid #240e00;
 padding: 15px 50px;
 font-size: 16px;
 margin-top: 30px;
 cursor: pointer;
 transition: background-color 0.2s linear;
}

#entry #submit_button:hover {
 background-color: #40210f;
 color: #fff;
}

/* ページトップのスタイル
---------------------------------------------------- */
#page-top {
 width: 60px;
 height: 60px;
 background-color: rgba(36,14,0,0.4); 
 line-height: 60px;
 position: fixed;
 right: 0;
 bottom: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 999;
}

#page-top .top-i { 
 font-size: 24px;
 color: #fff;
}

/* フッターのスタイル
---------------------------------------------------- */
footer { 
 background: #240e00; 
 text-align: center;
}

.footer-wrap img {
 opacity: 0.2;
 width: 100%;
 height: auto; 
}

.footer-wrap {
 position: relative;
}

.footer-wrap p {
 color: #fff;
 font-size: 18px;
 font-family:  "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 text-align: center;
 line-height: 3;
 position: absolute;
 top: 50%;
 left: 50%;
 -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
/*
 margin:0;
 padding:0;
*/
}

footer small { 
 color: #d4c1ac;
 position: absolute;
 bottom: 0;
 left: 50%;
 -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
/*
 margin:0;
 padding:0;
*/
}

/*メディアクエリ　画面980px以下*/
@media screen and (max-width: 980px) {
    
    .header-wrap {
        width: 100%;
        
    }

    #main-visual {
        width: 92%;
        height: auto;
        
    }
    
    #main-visual img {
        width: 100%;
        height: auto;
    }
    
    #main-visual p {
        font-size: 3rem;
    }
    
    .area-greeting,
    .area-insistence,
    .area-item,
    .area-shop,
    .area-contact,
    .footer-wrap {
        width: 96%;
    }
    .inner-greeting img,
    .inner-insistence img {
        width: 310px;
        height: auto;
    }
    
    #entry #detail {
        width: 100%;
    }
    
    .footer-wrap p {
        display: none;
    }
}

/*メディアクエリ　画面768px以下*/
@media screen and (max-width: 767px) {
    .logo-wrap,
    .g-nav {
        width: 100%;
        font-size: 1rem;
    }
    
    .logo-wrap {
/*
        width: 60%;
        height: auto;
*/
    }
    .logomark {
        width: 40px;
        padding-left: 1rem;
    }
    
    #main-visual p span {
        display: none;
    }
    
    #entry,
    {
        width: 100%;
        
    }
    
    .area-contact,
     {
        width: 96%;
        margin: 0 auto;
    }
    #entry dl dt,
    #entry dl dd {
        width: 100%;
        margin-left: 0;
    }
    #entry #name,
#entry #email,
#entry #phone,
    #entry #title,
    #entry #detail {
       width: 94%; 
    }

}