@charset "utf-8";

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
::-webkit-scrollbar {width: 16px; height: 16px; background: #fff; z-index: 3;}
::-webkit-scrollbar-track {background: #fff;}
::-webkit-scrollbar-thumb {border-radius: 16px; background: #006934; border: 4px solid #fff;}

.no-scroll {overflow: hidden;}

.container {margin: 0 auto;}

.flex {display: flex;}

.tsuku,
.tsuku * {font-family: fot-tsukuardgothic-std,sans-serif; font-weight: 700;}

@media all and (-ms-high-contrast: none) {
	.tsuku,
	.tsuku * {position: relative; top: .15em;}
}

.of {object-fit: cover; object-position: 50%; font-family: "object-fit: cover; object-position: 50%;";}

.paraslimy-body {
	position: relative;
	z-index: 1;
	perspective: 250px;
	transform: translateZ(0);
	transform-style: preserve-3d;
	overflow: hidden;
}
.paraslimy-bg {
	position: absolute;
	z-index: -1;
	top: -60%;
	left: auto;
	right: auto;
	bottom: auto;
	width: 200%;
	height: 200%;
	min-height: 200vh;
	transform: translateZ(-250px);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

/*--------------------------------------------------------------------------
アニメーション
--------------------------------------------------------------------------*/

/* その場でふわっと */
.flow {opacity: 0; transition: opacity .5s ease-in;}
.active .flow {opacity: 1;}

/* 左からカバー外し */
.cover {
	overflow: visible;
	-webkit-mask-size: 300% 300%;
			mask-size: 300% 300%;
	-webkit-mask-position: 100% 100%;
			mask-position: 100% 100%;
	-webkit-mask-image: linear-gradient(90deg, black 0%, black 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
			mask-image: linear-gradient(90deg, black 0%, black 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
	transition: -webkit-mask-position 7.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: mask-position 7.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: mask-position 7.5s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-mask-position 7.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.active .cover {
	-webkit-mask-position: 0% 0%;
			mask-position: 0% 0%;
}

.fade-left {opacity: 0; transform: translateX(-2rem); transition: transform 2s, opacity 2s ease;}
.fade-right {opacity: 0; transform: translateX(2rem); transition: transform 2s, opacity 2s ease;}

.active .fade-left {opacity: 1; transform: translateX(0);}
.active .fade-right {opacity: 1; transform: translateX(0);}

@media all and (-ms-high-contrast: none) {
	.cover {opacity: 0; transition: opacity .5s ease-in;}
	.active .cover {opacity: 1;}
}

/*--------------------------------------------------------------------------
ロード画面
--------------------------------------------------------------------------*/
#load {position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #fff; visibility: visible; opacity: 1; transition: 1s ease; z-index: 9999;}
.logo-anime-out #load {transform: translateY(-100%);}
#load .logo {opacity: 0; visibility: hidden; animation: loadingLogo 3s ease .5s forwards;}
@keyframes loadingLogo {
	0% {opacity: 0; visibility: hidden;}
	35% {opacity: 1; visibility: visible;}
	65% {opacity: 1; visibility: visible;}
	100% {opacity: 0; visibility: hidden;}
}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/
/*------------------------------------
見出し
------------------------------------*/
.g-h {margin: 0 auto;}
.g-h span {display: block; color: #006934; font-weight: 700; text-align: center;}
.g-h .main {line-height: 1; letter-spacing: .02em; text-indent: .02em; background: url("../img/common/g-h.svg") bottom center/100% auto no-repeat;}
.g-h .sub {line-height: 1.5; text-indent: .04em; text-indent: .04em;}

/*------------------------------------
バックグラウンド
------------------------------------*/
.bg {background: #efe6d5 center/auto repeat;}

/*------------------------------------
NEWS
------------------------------------*/
.news-list .entry {background: url("../img/common/dotted-line.svg") bottom center/100% auto repeat-x;}
.news-list .entry dl dt .cate {display: block; color: #fff; font-weight: 700; line-height: 1.5; text-align: center; background: #006934;}
.news-list .entry dl dt time {display: block; line-height: 1; letter-spacing: 0; text-align: center;}
.news-list .entry dl dd {line-height: 1.5;}

/*------------------------------------
サイドナビ
------------------------------------*/
.side-nav {position: fixed; background: rgba(24,24,24, .15); z-index: 8000;}

/*------------------------------------
トップへ戻る
------------------------------------*/
.page-top {position: fixed; transform: translateY(150%); z-index: 8001;}
.page-top.active {transform: translateY(0);}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header .navi-list {position: fixed; top: 0; z-index: 9000;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
.footer .footer-img img {mix-blend-mode: color-burn;}
.footer .copyright {text-align: center;}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/

/*----------------------------------------
メインビジュアル
----------------------------------------*/
#front .mv {display: flex; justify-content: center; position: relative;}

#front .mv .bg-top-img {width: auto; height: auto; opacity: 0; animation: mv-fadein 3s ease forwards; animation-delay: 4s;}

#front .mv .cloud {position: absolute; height: auto; opacity: 0; animation: fuwafuwa 17s ease-in-out infinite;}
#front .mv .cloud.cloud-left {right: 50%; animation-delay: 4s;}
#front .mv .cloud.cloud-right {left: 50%; animation-delay: 5s;}

#front .mv .arrow-under {position: absolute;}

#front .mv .main-img {width: 100%; height: 31.875vw;}
#front .mv .main-img div {background-image: url("../img/common/exterior.jpg"); background-size: contain; background-repeat: no-repeat;}

#front .mv .branding h1 img {height: auto; margin: 0 auto;}
#front .mv .branding .intro {color: #006934; text-align: center; line-height: 2; text-indent: .08em;}

@keyframes mv-fadein {100% {opacity: 1;}}
@keyframes fuwafuwa {
	0% {transform: translate(0em, -1em); opacity: 0.01;}
	25% {transform: translate(0em, 1em); opacity: 1;}
	50% {transform: translate(0em, -1em); opacity: 1;}
	75% {transform: translate(0em, 1em); opacity: 1;}
	100% {transform: translate(0em, -1em); opacity: 0.01;}
}

/*----------------------------------------
ごあいさつ
----------------------------------------*/
#front .greeting,
#front .greeting .message {position: relative;}
#front .greeting .message p {transition-duration: 10s!important;}

#front .greeting .owner .owner-img img,
#front .greeting .owner .logo img {margin: 0 auto;}

#front .greeting .circle {animation: circle 17s ease-in-out infinite;}
#front .greeting .circle.left_01 {animation-delay: 0s;}
#front .greeting .circle.left_02 {animation-delay: -5s;}
#front .greeting .circle.left_03 {animation-delay: -3s;}
#front .greeting .circle.right_01 {animation-delay: -2s;}
#front .greeting .circle.right_02 {animation-delay: -4s;}
#front .greeting .circle.right_03 {animation-delay: -1s;}

@keyframes circle {
	0% {transform:translate(-2em, -1em);}
	25% {transform:translate(2em, 1em);}
	50% {transform:translate(2em, -1em);}
	75% {transform:translate(-2em, 1em);}
	100% {transform:translate(-2em, -1em);}
}

@media all and (-ms-high-contrast: none) {
	#front .greeting .message p {transition-duration: 1s!important;}
	#front .greeting .circle {animation: none;}
}

/*----------------------------------------
お知らせ・新着情報
----------------------------------------*/
#front .info .news {box-sizing: border-box;}

#front .info .sns .fb .fb-page {display: block;}
#front .info .sns .fb .fb-page span {display: block; margin: 0 auto;}
#front .info .sns .insta h3 img {height: 35.6px; margin: 0 auto;}
#front .info .sns .insta .timeline-list {flex-wrap: wrap; margin-bottom: -10px;}
#front .info .sns .insta .timeline-list .entry {margin: 0 10px 10px 0; border-radius: 5px; overflow: hidden;}
#front .info .sns .insta .timeline-list .entry a,
#front .info .sns .insta .timeline-list .entry a .img,
#front .info .sns .insta .timeline-list .entry a .img img {width: 100%; height: 100%;}
#front .info .sns .insta .timeline-list .entry a {position: relative;}
#front .info .sns .insta .timeline-list .entry a .img {position: absolute; top: 0; left: 0; z-index: 2;}

/*----------------------------------------
メニュー
----------------------------------------*/
#front .menu .kv {position: relative;}
#front .menu .kv .img {position: relative; width: 100%; z-index: 1;}
#front .menu .kv .img:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); z-index: 2;}
#front .menu .kv .img .paraslimy-bg {}
#front .menu .kv .txt {position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; z-index: 3;}
#front .menu .kv .txt .icon {height: auto; filter: drop-shadow(0 0 .25rem rgba(128,128,128, .5));}
#front .menu .kv .txt p {color: #fff; text-shadow: 0 0 .0625em rgba(128,128,128, .5);}

#front .menu .choose {margin: 0 auto;}
#front .menu .choose h3 img {width: auto;}
#front .menu .choose .choose-list .entry {position: relative;}
#front .menu .choose .choose-list .entry:after {content: ''; position: absolute; display: block; background-color: #fff; background-image: url(../img/menu/icon_or.svg); background-repeat: no-repeat; background-position: center; border-radius: 50%; z-index: 5;}
#front .menu .choose .choose-list .entry .img {position: relative; z-index: 1; overflow: hidden;}
#front .menu .choose .choose-list .entry .img img {width: 100%; height: 100%;}
#front .menu .choose .choose-list .entry .txt dt {margin-bottom: .325em;}
#front .menu .choose .choose-list .entry .txt dd {margin-left: .16em; line-height: 1.5;}
#front .menu .choose .choose-list .entry p.txt {margin-bottom: .325em;}
#front .menu .choose .choose-list .entry .txt span {margin-left: .16em; line-height: 1.5;}

#front .menu .choose.many .choose-list .entry:after {background-image: url(../img/menu/icon_plus.svg);}

#front .menu .plus img {height: auto;}

/*----------------------------------------
心地庵のもと
----------------------------------------*/
#front .vegetable .vege-intro li {justify-content: center; align-items: center;}
#front .vegetable .vege-intro li .txt h3 span {display: block; font-weight: 700; color: #006934; line-height: 1.5;}

/*#front .vegetable {position: relative;}

#front .vegetable .vege-intro li {justify-content: center; align-items: center;}
#front .vegetable .vege-intro li .txt h3 {position: relative;}
#front .vegetable .vege-intro li .txt h3 span {display: block; font-weight: 700; color: #006934; line-height: 1.5;}
#front .vegetable .vege-intro li .txt h3 .icon {position: absolute;}
#front .vegetable .vege-intro li .txt h3 .icon img,
#front .vegetable .vege-intro li .img img {width: 100%; height: auto;}*/

/*----------------------------------------
お料理のこと
----------------------------------------*/
#front .dish .menu-list .entry {position: relative;}
#front .dish .menu-list .entry .img {position: relative; z-index: 1;}
#front .dish .menu-list .entry .img img {width: 100%; height: 100%;}
#front .dish .menu-list .entry .txt {background-color: rgba(255,255,255, .75); box-shadow: 0 0 8px rgba(0,0,0, .5); box-sizing: border-box; z-index: 2;}
#front .dish .menu-list .entry .txt h3 {color: #006934; letter-spacing: 0;}
#front .dish .menu-list .entry .txt p {line-height: 1.5;}

/*#front .dish .menu-list .entry .img img {width: 100%; height: 100%;}
#front .dish .menu-list .entry .image-text .text h3,
#front .dish .menu-list .entry .image-text .text-r h3 {font-size: 30px; color: #006934; display: inline;}
#front .dish .menu-list .entry .image-text .text p ,
#front .dish .menu-list .entry .image-text .text-r p {font-size: 15px;}

/*#front .dish .menu-list .entry .img {overflow: hidden;}
#front .dish .menu-list .entry .img img {width: 100%; height: 100%;}
#front .dish .menu-list .entry .txt h3 {color: #006934; line-height: 1.25; margin-bottom: .825em;}
#front .dish .menu-list .entry .txt p:not(:last-child) {margin-bottom: .75em;}*/

/*----------------------------------------
ウェブショップ
----------------------------------------*/
#front .webshop .item-list .img {overflow: hidden;}
#front .webshop .item-list .img img {width: 100%; height: 100%;}
#front .webshop .item-list .txt h3 {color: #006934; font-weight: 700; line-height: 1.625;}
#front .webshop .item-list .txt .desc {margin-bottom: 2em;}
#front .webshop .item-list .txt .desc p {margin-bottom: 1em;}
#front .webshop .item-list .txt .label {justify-content: flex-end; align-items: baseline;}
#front .webshop .item-list .txt .label dt {color: #006934; line-height: 1; letter-spacing: 0;}
#front .webshop .item-list .txt .label dd * {color: #646464; font-weight: 700; line-height: 1; letter-spacing: 0;}
#front .webshop .item-list .txt .label dd .unit {flex-direction: column; justify-content: center; align-items: center;}
#front .webshop .item-list .txt .btn {display: flex; justify-content: center; align-items: center; background: #9a0202;}
#front .webshop .item-list .txt .btn span {color: #fff; font-weight: 700; line-height: 1;}
#front .webshop .item-list .txt .btn .icon {height: auto;}

/*----------------------------------------
アクセス
----------------------------------------*/
#front .access .date .hours .flex {align-items: center;}
#front .access .date .hours > dl.open > dd > dl > dd > dl > dt {min-width: 5em; margin-right: 1em;}
#front .access .date .hours > dl.close dt {margin-right: .75em;}
#front .access .date .hours > dl.open > dd > dl > dd > dl > dd {letter-spacing: 0;}
#front .access .date .address * {letter-spacing: 0;}
#front .access .date .address dl dt {margin-right: .75em;}

#front .access .google-map {position: relative; overflow: hidden;}
#front .access .google-map iframe {position: absolute; left: 0; top: 0; height: 100%; width: 100%;}

#front .access .related-site .link-list .entry a {display: inline-block;}
#front .access .related-site .link-list dl * {line-height: 1.5; letter-spacing: 0;}
#front .access .related-site .link-list dl dd:before {content: '...'}

#front .access .icon_star:before {content: ''; display: inline-block; background: url(../img/access/icon_star.svg) 0/contain no-repeat; vertical-align: middle; margin-right: 3px;}