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

/* リンクボタン */
.btn-auto{
	color: #444444;
	padding:8px;
	display: flex;
	align-items: center;
	aspect-ratio: 1 / 1;
	background: url("../image/top/btn.png") no-repeat center /cover;
}

.arrow::before, .arrow::after{
	background-color: #8C8C8C;
	height:0.5px;
}

/*===================================================
				fv
===================================================*/
/* ヘッダー分の余白 */
.fv{
	padding-top: var(--brand-icon);
	
}

.fv::before{
	content: "";
	position: absolute;
	top:-30px;
	left: 0;
	width:clamp(150px, 23vw, 400px);
	aspect-ratio: 473 / 642;
	background: url("../image/common/decoration/leaf-left.png") top right / contain no-repeat;
	pointer-events: none;
    z-index: 1; 
}

.fv-img {
  align-items: flex-end; /* 下揃え */
}

.fv-img1, .fv-img2 {
  overflow: hidden; /* 中の画像がはみ出さないように */
  position: relative;
  animation: morph 12s ease-in-out infinite alternate; /* 図形の変形アニメ */
}

/* サイズ指定 */
.fv-img1 {
  width: clamp(300px, 90vw, 800px);
  height: clamp(250px, 90vw, 600px);
}
.fv-img2 {
  width: clamp(230px, 60vw, 500px);
  height: clamp(150px, 60vw, 400px);
}

/* 中のslick画像 */
.ellipse img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* slick一族に明示的な高さを渡す */
.ellipse .slick,
.ellipse .slick-list,
.ellipse .slick-track,
.ellipse .slick-slide{
  height: 100%;
}

.ellipse .slick-slide > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;       /* 画像の下の隙間対策 */
}

.ellipse .slick-slide{ display: block; }

/* 変形アニメーション */
@keyframes morph {
  0% {
    border-radius: 37% 63% 60% 40% / 30% 34% 66% 70%;
  }
  50% {
    border-radius: 63% 37% 45% 55% / 45% 55% 45% 55%;
  }
  100% {
    border-radius: 37% 63% 60% 40% / 30% 34% 66% 70%;
  }
}

.catchcopy{
	font-family: ta-koigokoro, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: clamp(20px, 3.5vw, 40px) ;
	padding: 10px;
	border-radius: 10px;
	text-shadow:
    1px 1px 0 #fff,  -1px 1px 0 #fff,
    1px -1px 0 #fff, -1px -1px 0 #fff,
    0 1px 0 #fff,    1px 0 0 #fff,
    0 -1px 0 #fff,   -1px 0 0 #fff;
	transform: rotate(-15deg);
	
	top:50%;
	right:0;
}

@media (min-width:760px){
	.catchcopy{
		top:10%;
		right:15%;
	}
}

/*===================================================
				Concept
===================================================*/
/* 背景 */
.concept{
	background: url("../image/common/bg/bg-restrant.jpeg") no-repeat center / cover;
	position: relative;
}

/* 半透明枠 */
.concept::before{
	content: "";
  	position: absolute;
  	inset: 0;
 	background: rgba(255, 255, 255, 0.8);
  	z-index: 0;
}

.concept > .inner{
  position:relative;
  z-index:1;
}


/* オーナーメッセージ */
.owner-message{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap:20px;
	max-width:500px;
	width:100%;
	padding:20px;
	border:1px solid var(--main);
	 --stripe: clamp(8px, 1.2vw, 14px); /* 縞の太さを可変に */
  background:
    /* 上層：斜めストライプ（↘=135deg） */
    repeating-linear-gradient(
      135deg,
      rgba(239, 237, 228, 0.55) 0 var(--stripe),
      rgba(255, 255, 255, 0.15) var(--stripe) calc(var(--stripe) * 2)
    ),
    /* 下層：ベース塗り（元の半透明に近い） */
    rgba(255, 255, 255, 0.40);
}

/* カラーメモ
	main:#34624B (239, 237, 228)
	base:#EFEDE4 (52, 98, 75)
	accent1:#61654D (97, 101 , 77)
	accent2:#ADE4C6 (173, 228, 198)
*/

.owner-message img{
	border-radius: 50%;
	width:clamp(100px, 32vw, 150px);
	aspect-ratio:1 / 1;
}

.owner-message h3{
	display: inline-block;
	padding:0 20px;
	max-width: 350px;
	width: 100%;
	border-radius:999px;
	color:var(--white);
	background-color: var(--main);
	font-weight: lighter;
	margin-bottom:0;
}


/*===================================================
                News
===================================================*/
.news .flex { max-width: 550px; width: 100%; }
.news a { font-size: clamp(14px, 3.5vw, 16px); }

/* 1行（タイトル＋詳細）で下線 */
.news-item { border-bottom: 1px dotted #444; padding-bottom: 5px; }

/* 記事行（下線は .news-item が担当） */
article {
  padding: 0 10px 5px 10px;
  display: flex;
  flex-direction: column;
}
@media (min-width:760px){
  article { 
	  flex-direction: row; 
	  align-items: center; 
	  gap: 20px; 
	  cursor: pointer;
	
	}
}
article time { color: var(--main); font-weight: 600; }

.tag{
  display: inline-block;
  border-radius: 999px;
  text-align: center;
  padding: 0 10px;
  background-color: #fff;
  margin-left: 10px;
  width: 90px;
}

.tag-restrant{
	background-color: #FFEDED;
}

.tag-dogrun{
	background-color: #E3FBFF;
}

.tag-topic{
	background-color: #FFF2DA;
}

.tag-other{
	background-color: #E9E9E9;
}

/* 背景デコ（そのまま） */
.news-bg{ 
	width: clamp(70%, 30vw, 75%); 
	height: 100%; 
	background-color: var(--base); 
	top: 0; 
	right: 0; 
	z-index: -1; 
}

..news .inner{
	overflow: hidden;
}

/*.news .inner::before{
	position: absolute; 
	content: ""; 
	top: -10px; 
	right: 0;
	transform: translateX(20px);
  	width: clamp(100px, 30vw, 200px); 
	aspect-ratio: 1 / 1;
  	background: url("../image/common/decoration/leaf-right2.png") no-repeat center / cover;
	pointer-events: none; 
}*/

/*==================  アコーディオン ==================*/
/* パネル：表示・非表示は jQuery に任せる */
.accordion-panel{
  display: none;                 /* 初期は閉じる */
  padding: 10px;
  background-color: rgba(255,255,255,.5);
  border-radius: 10px;
}
.accordion-panel p { font-size: .9em; }
.accordion-panel a { font-size: inherit; text-decoration: underline; }

.accordion-header.is-open { cursor: default; }

/* 開閉ボタン（右端固定）＋アイコン中央合わせ */
.accordion-header{
  --btn: 1.5em;   /* 丸ボタン直径 */
  --icon: 0.6em;  /* アイコンサイズ */
  position: relative;
  padding-right: calc(var(--btn) + 10px);
  overflow: visible;
  z-index: 1;
}
/* 丸い台座 */
.accordion-header::after{
  content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: var(--btn); height: var(--btn); border-radius: 999px; background-color: var(--main);
  display: grid; place-items: center; transition: transform .3s; z-index: 2;
}
/* 矢印（直線2本） */
.accordion-header::before{
  content: ""; position: absolute; top: 50%;
  right: calc((var(--btn) - var(--icon)) / 2);
  transform: translateY(-50%) rotate(45deg);
  width: var(--icon); height: var(--icon);
  border-right: 1px solid #fff; border-top: 1px solid #fff;
  transition: transform .3s; z-index: 3;
}
/* 開いたら「∨」に回転 */
.accordion-header.is-open::before{ transform: translateY(-50%) rotate(135deg); }

/* ニュース外の汎用 .btn-auto .arrow へ干渉しない */
.news .accordion-header::before,
.news .accordion-header::after { pointer-events: none; }
/*===================================================
				Instagram
===================================================*/
.insta-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
	font-family: var(--font-ja);
}

.insta-icon::before {
  content: "";
  display: inline-block;
  width: 2em;
  aspect-ratio: 1 / 1;
  background: url("../image/common/logo/logo-White.png") no-repeat center / contain;
}

.timeline li{
	width: clamp(150px, 8vw,100px);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background-color: #ccc;
}

.timeline img{
	width: 100%;
}

.insta-bg{
	width: clamp(70%, 30vw, 75%);
	height:100%;
	background-color: var(--base);
	top: 20px;
	left:0;
	z-index: -1;
}
/*===================================================
				Store Info
===================================================*/
.info-txt p{
	padding: 0 0 10px 10px;
	border-bottom:1px dotted #444444;
}

.storeInfo img{
	border: 2px solid var(--main);
}

.storeInfo .contents{
	font-family: var(--font-ja);
}

table{
	
	margin:0 10px;
}

th{
	padding: 0 8px;
	font-weight: 400;
}

th::before{
	content:"[";
	margin-right:0.25em;
		
}

th::after{
	content:"]";
	margin-right:0.25em;
}


/*===================================================
				ローディング、オープニングアニメーション
===================================================*/
/*===== 背景 =====*/
/* レイヤー全体（最前面固定・全画面覆う） */
#opening-layer{
  position: fixed;
  inset: 0;
  background: var(--main);
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* 背景画像エリア（左右2枚を内包） */
.opening-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: top center; /* 縦縮小は上基準 */
  transition: transform 1s ease;
}

/* 画像の共通 */
.bg-img{
  position: absolute;
  object-fit: contain;
  /* スマホ／タブレット：画面幅100%にフィット */
  width: 100vw;
  height: auto;
}

/* 右上画像 */
.bg-right{
	top: 0;
	right: 0; 
}

/* 左下画像 */
.bg-left{
    left: 0;
	bottom:0;
    transform: rotate(180deg);
}

/* PC（1280px〜）：縦100%・左右端配置 */
@media (min-width: 1280px){
  .bg-img{
    width: auto;
    height: 100vh; /* 縦幅100% */
  }
  .bg-right{ 
	  right: 0; 
	}
  .bg-left{
    left: 0;
    transform: rotate(180deg);
  }
}

/*===== ローディング =====*/
#loader{
    position: relative;
    display: grid;
	gap:8px;
    justify-items: center;
    text-align: center;
    color: #fff;
}

#loader .loading-label{
  font-family: var(--font-en);
  letter-spacing: .08em;
  font-size: clamp(24px, 2.8vw, 30px);
}

/* 白いアウトライン（線） */
.slide-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.slide-bar {
  width: 4px;
  height: 2em;
  background: var(--white);
  border-radius: 2px;
  animation: slide 1.2s ease-in-out infinite;
}

.slide-bar:nth-child(1) {
  animation-delay: -0.24s;
}

.slide-bar:nth-child(2) {
  animation-delay: -0.12s;
}

.slide-bar:nth-child(3) {
  animation-delay: 0s;
}

/* スライドアニメーション */
@keyframes slide {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* パーセンテージ */
#loader .loading{
	font-family: var(--font-en);
	font-size: clamp(24px, 2.8vw, 30px);
}

/* 画面全体を上方向にフェードアウト（小さくなった状態を維持） */
#opening-layer.is-fadeout{
  animation: slideFadeUp 600ms ease forwards;
}
@keyframes slideFadeUp{
  to{
    opacity: 0;
    transform: translateY(-8%);
    visibility: hidden;
  }
}

/* オープニング中はスクロール固定（任意） */
html.is-opening-active, html.is-opening-active body{ overflow: hidden; }

/* モーション削減 */
@media (prefers-reduced-motion: reduce){
  #opening-layer, .opening-logo, #loading, .bg-img{
    transition: none !important;
    animation: none !important;
  }
}