@charset "utf-8";
/* CSS Document */

html{overflow: overlay;}
* html .clearfix {height: 1px;}
.clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}

body{margin:0;font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;overflow: hidden;}
.warp{
    overflow: hidden;
}
.en{font-family: serif;font-size: .8em;letter-spacing: 2px;font-weight: bold;}
h2.title,
h3.title,
h4.title,
h5.title
{font-family: serif;font-weight:normal;margin: 0;font-size: 1.5em;}

a{text-decoration:none;color: #3f3f3f;transition: all .2s linear;}
ul{margin:0;padding:0;list-style: none;}
em{font-weight:bold; font-style:normal;}

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


html::-webkit-scrollbar {overflow:hidden; width: 3px;}
html::-webkit-scrollbar:horizontal{height: 3px}
html::-webkit-scrollbar-button{display:none;}
html::-webkit-scrollbar-thumb{background:#660000;}
html::-webkit-scrollbar-corner{background:#660000;}
html::-webkit-scrollbar-track {background: transparent; }


/* 共通設定 */
@media screen and (min-width: 768px){
.sp{display:none!important;}
.pc{display:block;}
p{line-height: 1.7em;}
}

@media screen and (max-width: 767px){
.pc{display:none!important;}
.sp{display:block;}
p{line-height:2em;}
}


.svg-symbol{display: none;}

.delay-01{animation-delay: 0.05s;}
.delay-02{animation-delay: 0.1s;}
.delay-03{animation-delay: 0.15s;}
.delay-04{animation-delay: 0.2s;}
.delay-05{animation-delay: 0.25s;}
.delay-06{animation-delay: 0.3s;}
.delay-07{animation-delay: 0.35s;}
.delay-08{animation-delay: 0.4s;}
.delay-09{animation-delay: 0.45s;}
.delay-10{animation-delay: 5s;}
.delay-11{animation-delay: 0.05s;}
.delay-12{animation-delay: 0.1s;}
.delay-13{animation-delay: 0.15s;}
.delay-14{animation-delay: 0.2s;}
.delay-15{animation-delay: 0.25s;}
.delay-16{animation-delay: 0.3s;}
.delay-17{animation-delay: 0.35s;}
.delay-18{animation-delay: 0.4s;}
.delay-19{animation-delay: 0.45s;}
.delay-20{animation-delay: 5s;}


/* 縦書き＆アニメーション */
.vertical-field .en {position: absolute;top: 0%;left: 0%;transform: translateY(0%) translateX(-0%);-webkit- transform: translateY(0%) translateX(-0%);font-size: .9em;line-height: 1em;letter-spacing: 0;background: #FFF;z-index: 2;padding-bottom: 5px;}
.vertical-field .en::after {content: "";}
.vertical-field .vetical-border{display:block;width: 1px;margin: 0px auto;height: 100%;border-left: 1px solid #231815;top: 0;left: 7px;position: absolute;opacity: 0;}
.vetical-border.animated {animation: border-down 3s infinite;}

@keyframes border-down {0% {height: 0;opacity: 0;}90% {height: 90%;opacity: 1;}100% {height: 100%;opacity: 0;}}


.vertical-area ul{position:absolute;top:0;right: 0px;display: flex;overflow-x: auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;display: -ms-flexbox;margin: 0 auto;text-align: center;padding-bottom: 20px;}
.vertical-area ul li{box-sizing: border-box;padding: 0;margin: 0 10px;min-width: 200px;}
.vertical-area ul li:nth-child(1){margin-left:0;}
.vertical-area ul li img{border-radius:20px; margin-bottom:10px;}
.vertical-area ul li .date{display:block;font-size:.8em;text-align: center;}

.vertical-area ul li h3{font-size: 1em;margin:5px 0;text-align: center;}
.vertical-area ul li h3 .txt-002{display:block;font-size:.8em;text-overflow: ellipsis;-webkit-text-overflow: ellipsis; width:200px; overflow:hidden; white-space:nowrap;}
.vertical-area ul li h3 .txt-002::before{content:'（';}
.vertical-area ul li h3 .txt-002::after{content:'）';}

.vertical-area ul li h4{font-size: 1em;margin:5px 0;text-align: center;}

.vertical-area ul::-webkit-scrollbar {width: 1px;height: 7px;}
.vertical-area ul::-webkit-scrollbar-track {background: #eee;border: none;border-radius: 10px;}
.vertical-area ul::-webkit-scrollbar-thumb {background: #660000;border-radius: 10px;box-shadow: none;}

@media screen and (min-width: 768px){
.vertical-field {width: 70px;height: 300px;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;text-orientation: mixed;position: relative;}
.vertical-field h2 {position: absolute;top: -5px;left: 30px;font-size: 2em;margin: 0;line-height: 1em;white-space: nowrap;font-weight:normal;font-family:serif;}
.vertical-field h3 {position: absolute;top: -3px;left: 23px;font-size: 1.5em;margin: 0;line-height: 1em;white-space: nowrap;font-weight:normal;font-family:serif;}		
.vertical-area .inner{max-width: 750px;margin: 40px auto;position:relative;height: 350px;} 
.vertical-area ul{width: 660px;}	
.vertical-area .vertical-field{position:absolute;top:0;left: 0%;}
#related.vertical-area .vertical-field{height: 260px;left: 10px;}		
#related.vertical-area .inner{height:250px;}
#related.vertical-area .inner ul li:nth-child(4){display:none;}

#product.vertical-area .vertical-field{height: 260px;left: 10px;}		
#product.vertical-area .vertical-field{height:280px;}	
#product.vertical-area .inner{height: 290px;}

#recipe-list.vertical-area .vertical-field{height: 260px;left: 10px;}		
#recipe-list.vertical-area .inner{height:290px;}
#recipe-list.vertical-area .inner ul li:nth-child(4){display:none;}

	
}

@media screen and (max-width: 767px){
.vertical-field {width: 50px;height: 300px;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;text-orientation: mixed;position: relative;}
.vertical-field h2 {position: absolute;top: -3px;left: 23px;font-size: 1.5em;margin: 0;line-height: 1em;white-space: nowrap;font-weight:normal;font-family:serif;}	
.vertical-field h3 {position: absolute;top: -3px;left: 23px;font-size: 1.5em;margin: 0;line-height: 1em;white-space: nowrap;font-weight:normal;font-family:serif;}	
.vertical-area .inner{max-width: 400px;margin: 30px auto 0;position:relative;height: 290px;}
.vertical-area ul{width: 77%;padding-bottom:0px;}	
.vertical-area .vertical-field{position:absolute;top:0;left: 4%;}
#related.vertical-area .vertical-field{height: 260px;}		
	
#product.vertical-area .inner{height: 250px;}
#product.vertical-area .vertical-field{height:280px;}

#recipe-list.vertical-area .inner{height: 250px;}
#recipe-list.vertical-area .vertical-field{height: 260px;}		
}

@media screen and (max-width: 375px){
.vertical-area .vertical-field{position:absolute;top:0;left: 5%;}

}

@media screen and (min-width: 1023px){
.vertical-area .inner{max-width: 960px;margin: 40px auto 20px auto;position:relative;height: 350px;}
.vertical-area ul{width: 880px;overflow: hidden;}	
.vertical-area .vertical-field{position:absolute;top:0;left: 5px;}
#related.vertical-area .vertical-field{height:250px;}	
#related.vertical-area .inner{height:280px;}
#related.vertical-area .inner ul li:nth-child(4){display:block;}	

#product.vertical-area .vertical-field{height: 280px;}	
#product.vertical-area .inner{height: 300px;}
#product.vertical-area .inner ul li:nth-child(4){display:block;}	
#product.vertical-area .inner ul li:nth-child(5){display:none;}	

#recipe-list.vertical-area .vertical-field{height:250px;}	
#recipe-list.vertical-area .inner{height:280px;}
#recipe-list.vertical-area .inner ul li:nth-child(4){display:block;}	
}




/* サークルアニメーション */

.link-animation{position:relative;display:block;border:2px solid;width: 100px;}

.circle{
	fill:#32373c00;
	stroke:#fff;
	stroke-width:1px;
	width:70px;
	height:70px;
	position: absolute;
}

.circle.animated {
	stroke-dasharray: 200;
  	stroke-dashoffset: 200;
  	animation: circle-border 5s forwards infinite;
  	transform: rotate(-90deg);
  	transform-origin: 50% 50%;	
}

@keyframes circle-border{
	0% {stroke-dashoffset:200;opacity: 0;}
	90% {stroke-dashoffset:0;opacity: 1;}
	100% {stroke-dashoffset:0;opacity: 0;}
}



.arrow{
	width: 30px;
	height:30px;
	fill:#32373c00;
	stroke:#fff;
	stroke-width:1px;
	position:absolute;
	top: -20%;
	right: 2%;
	transform: translateY(0%) translateX(0%);

	-webkit- transform: translateY(0%) translateX(0%);
}

.arrow.animated{
	animation: arrow-boder infinite;
    animation-duration: 2s;
}

@keyframes arrow-boder {
0%  {
    opacity: 0;
    transform: translateX(0);
}
80% {
    opacity: 1;
	transform: translateX(15px);
}
100%  {
    opacity: 0;
    transform: translateX(15px);
}
}

/* フェードアニメーション */

.fadein{opacity:0;}
.fadein.animated{animation-name:fadein; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadein{from {opacity: 0;}to {opacity: 1;}}

/* 下に伸びるボーダーアニメーション */
.hd{height: 75px;width: 1px;margin: 20px auto;}
.stroke {position: relative;}
.stroke .border.bottom {width:100%;}
.stroke .border.down{height: 100%;border-left: 1px solid #000000;left: 0;top: 0;}
.stroke.animated .border.down {animation: stroke-down 1.8s infinite;animation-delay:2s;}
@keyframes stroke-down {0% {height: 0;opacity: 0;}90% {height: 90%;opacity: 1;}100% {height: 100%;opacity: 0;}}

.fade{opacity:0;}
.fade.animated{animation-name:fadein; animation-duration:1s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadein{from {opacity: 0;}to {opacity: 1;}}

.fadeup{opacity:0;}
.fadeup.animated {animation-name:fadeup;animation-duration:0.8s;animation-fill-mode:forwards;opacity: 0;transform: translateY(100px);}
@keyframes fadeup{from {opacity: 0;transform: translateY(100px);}to {opacity: 1;transform: translateY(0);}}

.fadedown{opacity:0;}
.fadedown.animated {animation-name:fadedown;animation-duration:0.8s;animation-fill-mode:forwards;opacity: 0;transform: translateY(-100px);}
@keyframes fadedown{from {opacity: 0;transform: translateY(-100px);}to {opacity: 1;transform: translateY(0);}}

.fadeleft{opacity:0;}
.fadeleft.animated {animation-name:fadeleft;animation-duration:0.5s;animation-fill-mode:forwards;opacity: 0;}
@keyframes fadeleft{from {opacity: 0;transform: translateX(-50px);}to {opacity: 1;transform: translateX(0);}}

.faderight{opacity:0;}
.faderight.animated {animation-name:fadeleft;animation-duration:1s;animation-fill-mode:forwards;opacity: 0;}
@keyframes faderight{from {opacity: 0;transform: translateX(0px);}to {opacity: 1;transform: translateX(-50px);}}

.bg-stroke {display: inline;position: relative;background-image: linear-gradient(90deg, #ffeea8, #ffeea8);background-repeat: no-repeat;background-position: bottom left;background-size: 0 30%;transition: all .9s ease-in-out;}
.bg-stroke.animated {background-size: 100% 50%;}


.stroke {position: relative;}
.stroke .border {content: "";position: absolute;opacity: 0;}
.stroke .border.top,
.stroke .border.bottom {width:100%;}
.stroke .border.top {border-top: 1px solid #9E9E9E;right: 0;top: 0;}
.stroke .border.bottom {border-bottom: 1px solid #9E9E9E;left: 0;bottom: 0;}
.stroke .border.right,.stroke .border.left {height: 100%;}
.stroke .border.right {border-right: 1px solid #9E9E9E;right: 0;top: 0;}
.stroke .border.left {border-left: 1px solid #9E9E9E;left: 0;bottom: 0;}
.stroke.animated .border {opacity: 1;}
.stroke.animated .border.top,.stroke.animated .border.bottom {animation: stroke-width 1.8s ;}
.stroke.animated .border.right,.stroke.animated .border.left {animation: stroke-height 1.8s;}

@keyframes stroke-width {0% {width: 0;opacity: 1;}100% {width:100%;opacity: 1;}}
@keyframes stroke-height {0% {height: 0;opacity: 1;}100% {height: 100%;opacity: 1;}}

.text-smooth {clip-path: inset(0 100% 0 0);display: inline-block;transition: .5s cubic-bezier(0.10, 0, 0.6, 1);transition-property: clip-path;}
.text-smooth.animated {clip-path: inset(0);}

.slidedown{animation: slidedown 1.6s infinite;}
@keyframes slidedown {0% {opacity: 0;transform: translateY(0);}100% {opacity: 1;transform: translateY(15px);}}

.laser {position: relative;overflow: hidden;}
.laser::before {content: "";-webkit-animation: laser 5s cubic-bezier(0.25, 0, 0.25, 1) infinite;animation: laser 5s cubic-bezier(0.25, 0, 0.25, 1) infinite;background-color: #ffffff;width: 100%;height: 100%;-webkit-transform: skewX(-45deg);transform: skewX(-45deg);top: 0;left: -150%;opacity: 0.8;position: absolute;}
@-webkit-keyframes laser {0% {left: -150%;opacity: 0;}70% {left: -150%;opacity: 0.5;}71% {left: -150%;opacity: 1;}100% {left: -20%;opacity: 0;}}
@keyframes laser {0% {left: -150%;opacity: 0;}70% {left: -150%;opacity: 0.5;}71% {left: -150%;opacity: 1;}100% {left: -20%;opacity: 0;}}  

/* リンクボタン */
.btn-link{display:block;width: 250px;color:#FFF;height: 60px;position:relative;margin:0 auto;transition: all .2s linear;text-align: left;}
.btn-link .txt-link{font-family:serif;position:absolute;top:50%;left:50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);/* width: 250px; */text-align: center;}
.arrow-fixed{width: 30px;height:10px;fill:#32373c00;stroke:#fff;stroke-width: 1px;position:absolute;top: 43%;right: 4%;transform: translateY(-50%) translateX(0%);-webkit- transform: translateY(-50%) translateX(0%);transition: all .2s linear;}
.btn-link:hover{opacity:.8;}
.btn-link:hover .arrow-fixed{right:3%;}
.btn-link .circle-box{position:absolute;right: -3%;top: -10%;height: 70px;width: 70px;}
.btn-link .circle-fixed{
	fill:#32373c00;
	stroke:#fff;
	stroke-width: 2px;
	width: 70px;
	height: 70px;
}

.btn-link .circle-box .arrow{top: 39%;left: -5%;width: 28px;height: 10px;stroke: #fff;stroke-width: 2px;}
.btn-link.cl{box-sizing: border-box;border: 1px solid;}
.btn-link.bk{background:#231815;}
.btn-link.red{background:#660000;}
.btn-link.ocher{background:#C38D38;}


/* ヘッダー */
#head{background:#660000;width:100%;padding: 7px 0;z-index: 9998;}
#head .head-wp{margin:0 auto;position: relative;}
#head a{color:#FFF;}
#head h1{margin:0;}
#head .img-logo{width: 150px;}


#drawer-menu {z-index: 9999;top: 0;right: 0;width: 0;}
#drawer-menu .unshown {display:none;}
#drawer-menu #menu-open {position: absolute;z-index: 9999;width: 50px;height:50px;right: 7px;top: 0px;}
#drawer-menu #menu-open span {display: block;background: #FFF;width: 30px;height: 2px;position: absolute;left: 15px;transition: all 0.4s;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;}


#drawer-menu #menu-open span:nth-child(1) {top: 10px;}
#drawer-menu #menu-open span:nth-child(2) {top: 20px;}
#drawer-menu #menu-open span:nth-child(3) {top: 30px;}

#drawer-menu #menu-input:checked ~ #menu-open{position:fixed;}
#drawer-menu #menu-input:checked ~ #menu-open span:nth-child(1) {background: #FFF;top: 13px;-webkit-transform: translateY(8px) rotate(45deg);-moz-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
#drawer-menu #menu-input:checked ~ #menu-open span:nth-child(2) {display: none;}
#drawer-menu #menu-input:checked ~ #menu-open span:nth-child(3) {background: #FFF;top: 30px;-webkit-transform: translateY(-8px) rotate(-45deg);-moz-transform: translateY(-8px) rotate(-45deg);-ms-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) rotate(-45deg);}

#drawer-menu #menu-content{visibility: hidden;overflow: auto;top: 0;right: 0;z-index:-1;max-width: 375px;width: 90%;height: 100%;background-color: #000000e0;transition: .3s ease-in-out;-webkit-transform: translateY(105%);transform: translateY(105%);opacity:0;}
#drawer-menu #menu-input:checked ~ #menu-content {z-index: 9998;opacity: 1;visibility: visible;position: fixed;-webkit-transform: translateX(0%);transform: translateX(0%);box-shadow: 6px 0 25px rgba(0,0,0,.15);z-index: 9997;}

#drawer-menu #menu-content .menu{position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);margin: auto;width: 100%;max-width: 300px;}
#drawer-menu #menu-content .menu .top-menu{margin-bottom: 15px;}
#drawer-menu #menu-content .menu .top-menu li{margin: 3% auto;padding: 1% 0 3% 0;border-bottom: 1px solid #ffffff;text-align: center;}
#drawer-menu #menu-content .menu .top-menu li span{display: block;font-size: 1.3em;font-family: serif;}
#drawer-menu #menu-content .menu .top-menu li a{display: block;}
#drawer-menu #menu-content .menu .top-menu li a:before{content:'■';display:block;float:left;}

#drawer-menu #menu-content .menu .info-box{width: 270px;margin: 14% auto 0 auto;}
#drawer-menu #menu-content .menu .img-001{display:inline-block;width: 27%;vertical-align: middle;}
#drawer-menu #menu-content .menu .sub-menu{display:inline-block;width: 60%;margin-left: 6%;font-size: .9em;vertical-align: middle;}
#drawer-menu #menu-content .menu .sub-menu li a{display:block;}



/* リンクボタン */

a.link-tel{display:block;margin-bottom: 20px;transition: all .2s linear;}
a.link-tel .img-icon{display:inline-block; width:30px; vertical-align:middle;}
a.link-tel .phone-number{display: inline-block;font-size: 2.3em;font-family:serif;vertical-align:middle;}
a.link-tel .reception-time{display: block;text-align:center;font-size: .8em;}
a.link-tel .reception-time:before{content:'営業時間：';}
a.link-tel:hover{opacity:.8;}

a.link-mail{display:block;background:#C38D38;height:50px;width:200px;margin: 0 auto 40px;position:relative;transition: all .2s linear;}
a.link-mail .img-icon{width: 15%;position:absolute;top: 50%;left: 3%;transform: translateY(-50%) translateX(0%);-webkit- transform: translateY(0%) translateX(-50%);}
a.link-mail .mail-form{font-family:serif;width: 50%;display: block;position: absolute;top: 50%;left: 55%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}
a.link-mail:hover{opacity:.8;}


/*** ページネーション　***/
.archives-pagination {margin:50px 0;}
.page-numbers {text-align: center;width: 100%;}
.page-numbers li {display: inline-block;background: #FFF;color: #ffffff;width: 30px;margin: 7px;font-size: 1.3em;/* border: 1px solid #231815; */}
.page-numbers li a {color: #231815; display:block; border:1px solid;}
.page-numbers.dots{color:#000;}

.archives-pagination .current {background: #660000 !important;width: 100%;height: 100%;display: block;color:#FFF;border: 1px solid #660000!important;}


@media screen and (min-width: 767px){


/* インスタエリア（共通あり） */
.instagram-area{background:#000;width: 100%;overflow: hidden;}
.instagram-area .base{position:relative;}
.instagram-area .slide-top{display: flex;width: 200vw;overflow: hidden;}
.instagram-area .slide-top img{width: auto; height: 200px;object-fit: cover;}
.instagram-area .slide-top .first{animation: slide-top01 160s -80s linear infinite;}
.instagram-area .slide-top .last{animation: slide-top02 160s linear infinite;}

@keyframes slide-top01 {0% {transform: translateX(100%);}to {transform: translateX(-100%);}}
@keyframes slide-top02 {0% {transform: translateX(0);}to {transform: translateX(-200%);}}

.instagram-area .slide-mid{display: flex;width: 200vw;overflow: hidden;}
.instagram-area .slide-mid img{width: auto; height: 200px;object-fit: cover;}
.instagram-area .slide-mid .first{animation: slide-mid01 160s -80s linear infinite;}
.instagram-area .slide-mid .last{animation: slide-mid02 160s linear infinite;}

@keyframes slide-mid01 {0% {transform: translateX(-100%);}to {transform: translateX(100%);}}
@keyframes slide-mid02 {0% {transform: translateX(-200%);}to {transform: translateX(0%);}}

.instagram-area .slide-btm{display: flex;width: 200vw;overflow: hidden;}
.instagram-area .slide-btm img{width: auto; height: 200px;object-fit: cover;}
.instagram-area .slide-btm .first{animation: slide-btm01 160s -80s linear infinite;}
.instagram-area .slide-btm .last{animation: slide-btm02 160s linear infinite;}

@keyframes slide-btm01 {0% {transform: translateX(100%);}to {transform: translateX(-100%);}}
@keyframes slide-btm02 {0% {transform: translateX(0);}to {transform: translateX(-200%);}}

.instagram-area img{opacity: .4;}
.instagram-area .box{position:absolute;width: 100%;max-width: 640px;top: 50%;left:50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(50%) translateX(50%);color:#FFF;text-align:center;}
.instagram-area h3{font-size:3em;margin:10px 0;font-family:serif;font-weight: normal;}
.instagram-area p{text-align:justify;}	

.instagram-area .link-box{height:50px;width:250px;}
.instagram-area .link-box.stroke .border.top {border-top: 2px solid #FFF;right: 0;top: 0;}
.instagram-area .link-box.stroke .border.bottom {border-bottom: 2px solid #FFF;left: 0;bottom: 0;}
.instagram-area .link-box.stroke .border.right {border-right: 2px solid #FFF;right: 0;top: 0;}
.instagram-area .link-box.stroke .border.left {border-left: 2px solid #FFF;left: 0;bottom: 0;}
	
.instagram-area a{display:block;height:50px;width:250px;margin: 40px auto;position:relative;}
.instagram-area a img{opacity:1;}
.instagram-area a .img-icon{width: 15%;position:absolute;top: 50%;left: 3%;transform: translateY(-50%) translateX(0%);-webkit- transform: translateY(0%) translateX(-50%);}
.instagram-area a span{font-family:serif;width: 50%;display: block;position: absolute;top: 50%;left: 55%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size: 1.2em;color: #FFF;}


/* バナーエリア（共通あり） */
.bnr-area{}
.bnr-area ul{width: 96%;max-width: 920px;display: flex;flex-wrap: wrap;margin: 0 auto;justify-content: space-between;padding: 10px 0;}		
.bnr-area ul li{max-width: 450px;margin: 10px 0;width: 49%;}		
	

/* お問い合わせエリア（共通あり） */
.contact-area{background: url(../img/bg_bk.jpg);background-attachment: fixed;background-repeat:repeat;color: #FFF;}
.contact-area .inner{width:640px;margin:0px auto;text-align: center;padding: 50px 0;}
.contact-area h2{font-family:serif; margin:0;font-weight:normal;}
.contact-area a {color:#FFF;}
.contact-area a.link-tel .img-icon{display:inline-block;width: 62px;vertical-align:middle;}
.contact-area a.link-tel .phone-number{display: inline-block;font-size: 4em;font-family:serif;vertical-align:middle;padding-right: 29px;}
.contact-area a.link-tel .reception-time{display: block;text-align:center;font-size: 1em;margin-bottom: 30px;}
.contact-area a.link-mail{display:block;background:#C38D38;height: 50px;width:250px;margin: 0 auto 30px;position:relative;}
.contact-area .txt-link{padding-top: 2px;width:100%;font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
.contact-area .btn-link{display:block;width: 190px;color:#FFF;height: 40px;position:relative;margin:0 auto;transition: all .2s linear;}
.contact-area .arrow-fixed{width: 15px;height:15px;stroke-width: 2px;top: 49%;}

.contact-area .stroke .border.down{border-left: 1px solid #ffffff;}
	

	
/* フッターエリア（共通あり） */
.footer-area{background:#660000;padding-top:20px;}
.footer-area .sns-list{width: 100px;margin:0 auto;text-align: center;}
.footer-area .sns-list li{display:inline-block;width:30px;margin: 0 5px;}
.footer-area .page-list{max-width: 400px;margin: 20px auto;column-count: 2;width: 96%;}
.footer-area .page-list li{width: 200px;padding: 10px;}
.footer-area .page-list a{color:#FFF;transition: all .2s linear;}	
.footer-area .page-list a:before{content:'■';display:block;float:left; margin-right:5px;}
.footer-area .page-list a:hover{opacity:.8;}

.copyright{background:#660000;color: #FFF;text-align: center;padding: 20px;}

/* ボトムメニュー（共通あり） */
.c-footer{float: right;max-width: 125px;}
.c-footer .sub-menu ul{list-style:none;margin: 0;}
.c-footer .sub-menu ul li{padding: 8px;margin:10px 0;box-sizing:border-box;text-align: center;transition: all .2s linear;width: 85px;}
.c-footer .sub-menu ul li img{display: block;margin: 0 auto;}
.c-footer .sub-menu ul li a{display:block;text-align:center;color:#FFF; font-size:.7em;}
.c-footer .sub-menu ul li .icon{width: 39px;display: block;margin: 5px auto;}
.c-footer .sub-menu ul li p{margin:0;}
.c-footer .sub-menu ul li .txt-001{font-family:serif;display: b;font-size: .7em;}
.c-footer .sub-menu ul li .txt-002{display: none;font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
.c-footer .sub-menu ul li.back p{display:inline-block;width: 40px;vertical-align:middle;}
.c-footer .sub-menu ul li.back img{display:inline-block;width: 25px;vertical-align:middle;margin: 0;}
	
	
.c-footer .sub-menu ul li:hover{opacity:.8;}

.map{background: #c38d38;}
.online{background: #c38d38;}
.back{background:#231815;}

.headroom {position: fixed;bottom: 0;left: unset;right:-400px;transition: all .2s linear;z-index: 9996;}
.headroom--unpinned {right: 0;}
.headroom--pinned {right: -400px;}
	
	
}

@media screen and (min-width: 1023px){
	
/* フッターエリア（共通あり） */
.footer-area .page-list{max-width: 750px;margin: 20px auto;column-count: 4;width: 96%;}	
}

@media screen and (max-width: 767px){
/* インスタエリア（共通あり） */

.instagram-area{background:#000;width: 100%;overflow: hidden;}
.instagram-area .base{position:relative;}
.instagram-area .slide-top{display: flex;width: 1500px;overflow: hidden;}
.instagram-area .slide-top img{width: auto;height: 140px;object-fit: cover;}
.instagram-area .slide-top .first{animation: slide-top01 160s -80s linear infinite;}
.instagram-area .slide-top .last{animation: slide-top02 160s linear infinite;}

@keyframes slide-top01 {0% {-webkit-transform: translateX(100%);transform: translateX(100%);}to {-webkit-transform: translateX(-100%);transform: translateX(-100%);}}
@keyframes slide-top02 {0% {-webkit-transform: translateX(0%);transform: translateX(0%);}to {-webkit-transform: translateX(-200%);transform: translateX(-200%);}}

.instagram-area .slide-mid{display: flex;width: 1500px;overflow: hidden;}
.instagram-area .slide-mid img{width: auto;height: 140px;object-fit: cover;}
.instagram-area .slide-mid .first{animation: slide-mid01 160s -80s linear infinite;}
.instagram-area .slide-mid .last{animation: slide-mid02 160s linear infinite;}

@keyframes slide-mid01 {0% {-webkit-transform: translateX(-100%);transform: translateX(-100%);}to {-webkit-transform: translateX(100%);transform: translateX(100%);}}
@keyframes slide-mid02 {0% {-webkit-transform: translateX(-200%);transform: translateX(-200%);}to {-webkit-transform: translateX(0%);transform: translateX(0%);}}

.instagram-area .slide-btm{display: flex;width: px;overflow: hidden;width: 1500px;}
.instagram-area .slide-btm img{width: auto;height: 140px;object-fit: cover;}
.instagram-area .slide-btm .first{animation: slide-btm01 160s -80s linear infinite;}
.instagram-area .slide-btm .last{animation: slide-btm02 160s linear infinite;}

@keyframes slide-btm01 {0% {-webkit-transform: translateX(100%);transform: translateX(100%);}to {-webkit-transform: translateX(-100%);transform: translateX(-100%);}}
@keyframes slide-btm02 {0% {-webkit-transform: translateX(0%);transform: translateX(0%);}to {-webkit-transform: translateX(-200%);transform: translateX(-200%);}}

.instagram-area img{opacity: .4;}
.instagram-area .box{position:absolute;top: 50%;left:50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(50%) translateX(50%);color:#FFF;text-align:center;width: 96%;max-width: 400px;}
.instagram-area h3{font-size: 1.7em;margin:10px 0;text-align: center!important;font-family: serif;font-weight: normal;}
.instagram-area p{text-align:justify;max-width: 350px;margin: 0 auto;}	
.instagram-area .en{font-size:.9em;letter-spacing: 1px;}
	
.instagram-area .link-box{height:50px;width:250px;}
.instagram-area .link-box.stroke .border.top {border-top: 2px solid #FFF;right: 0;top: 0;}
.instagram-area .link-box.stroke .border.bottom {border-bottom: 2px solid #FFF;left: 0;bottom: 0;}
.instagram-area .link-box.stroke .border.right {border-right: 2px solid #FFF;right: 0;top: 0;}
.instagram-area .link-box.stroke .border.left {border-left: 2px solid #FFF;left: 0;bottom: 0;}
	
.instagram-area a{display:block;height:50px;width:250px;margin: 40px auto 0 auto;position:relative;}
.instagram-area a img{opacity:1;}
.instagram-area a .img-icon{width: 15%;position:absolute;top: 50%;left: 3%;transform: translateY(-50%) translateX(0%);-webkit- transform: translateY(0%) translateX(-50%);}
.instagram-area a span{font-family:serif;width: 50%;display: block;position: absolute;top: 50%;left: 55%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);font-size: 1.2em;color: #FFF;}


/* バナーエリア（共通あり） */
.bnr-area{}
.bnr-area ul{width: 96%;max-width:400px;margin: 0 auto;}		
.bnr-area ul li{;margin: 10px 0;}		
	
/* お問い合わせエリア（共通あり） */
.contact-area{background: url(../img/bg_bk_sp.jpg);background-attachment: fixed;background-repeat:repeat;color: #FFF;}
.contact-area .inner{width:96%;margin:0px auto;text-align: center;padding: 50px 0; max-width:400px;}
.contact-area h2{font-family:serif; margin:0; font-weight:normal;}
.contact-area a {color:#FFF;}
.contact-area a.link-tel .img-icon{display:inline-block;width: 38px;vertical-align:middle;}
.contact-area a.link-tel .phone-number{display: inline-block;font-size: 2.6em;font-family:serif;vertical-align:middle;}
.contact-area a.link-tel .reception-time{display: block;text-align:center;font-size: 1em;margin-bottom: 30px;}
.contact-area a.link-mail{display:block;background:#C38D38;height: 50px;width:250px;margin: 0 auto 25px;position:relative;}
.contact-area .txt-link{font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;padding-top: 2px;width: 100%;}

.contact-area .btn-link{display:block;width: 190px;color:#FFF;height: 40px;position:relative;margin:0 auto;transition: all .2s linear;}
.contact-area .arrow-fixed{width: 15px;height:15px;stroke-width: 2px;top: 49%;}
.contact-area .stroke .border.down{border-left: 1px solid #ffffff;}

	
/* フッターエリア（共通あり） */
.footer-area{background:#660000;padding-top:20px;}
.footer-area .sns-list{width: 120px;margin:0 auto;text-align: center;}
.footer-area .sns-list li{display:inline-block;width:30px;margin: 0 5px;}
.footer-area .page-list{width: 90%;max-width: 370px;margin: 20px auto;column-count: 2;}
.footer-area .page-list li{padding: 3px 0;}
.footer-area .page-list a{color:#FFF;font-size: .9em;}	
.footer-area .page-list a:before{content:'■';display:block;float:left;margin-right: 3px;padding-top: 2px;}

.copyright{background:#660000;color: #FFF;text-align: center;padding: 20px;font-size:.9em;}
.copyright.menu-on{padding-bottom: 90px;}



/* ボトムメニュー（共通あり） */
.c-footer{width:100%; margin: 0 auto; position:relative;}	
.c-footer .sub-menu ul{list-style:none;margin: 0 auto;background: #c38d38;max-width: 450px;display: flex;}
.c-footer .sub-menu ul li{margin: 0;box-sizing:border-box;text-align: center;transition: all .2s linear;vertical-align:top;padding: 10px 5px 25px 5px;}
.c-footer .sub-menu ul li img{display: inline-block;margin: 0 auto;}
.c-footer .sub-menu ul li a{text-align:center;color:#FFF;font-size:.7em;display: block;}
.c-footer .sub-menu ul li .icon{display: inline-block; vertical-align:middle;}
.c-footer .sub-menu ul li p{margin:0;display:inline-block;vertical-align: middle;line-height: 1.7em;}
.c-footer .sub-menu ul li .txt-001{font-family:serif;display:block;font-size: 1.2em;font-weight: bold;}
.c-footer .sub-menu ul li .txt-002{font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;display:block;font-weight: bold;}

.c-footer .sub-menu ul li.map{width: 32%;}
.c-footer .sub-menu ul li.map .icon{width: 31px;}
.c-footer .sub-menu ul li.map p{width: 75px;}
	
.c-footer .sub-menu ul li.online{width: 45%;}
.c-footer .sub-menu ul li.online .icon{width: 30px;}
.c-footer .sub-menu ul li.online p{width: 110px;}
	
.c-footer .sub-menu ul li.back{height: 72px;width: 23%;}
.c-footer .sub-menu ul li.back .icon{width: 20px;margin-left: 3px;padding-top: 10px;}
.c-footer .sub-menu ul li.back p{width: 25px;padding-top: 10px;}
	

.map{background: #c38d38;}
.online{background: #c38d38;}
.back{background:#231815;}

.headroom {position: fixed;bottom: -200px;left: 0;right: 0;transition: all .2s linear;z-index: 9996;}
.headroom--unpinned {bottom: 0;}
.headroom--pinned {bottom: -200px;}
}