/* 扉（土台だけ・後でJSで動かす） */
/* ===== Intro  ====================================================================== */


/* 3枚とも同じルールで敷く（背景＆左右扉） */
/* 背景と同じサイズ＆位置に配置 */
/* ===== intro本体 ===== */

/* イントロ再生中はページ側の変形・余白・ナビを無効化 */
html.intro-playing, body.intro-playing {
  overflow: hidden;
}

/* ナビやサイドバー等を不可視＆クリック無効に */
.intro-playing .site-nav,
.intro-playing .global-nav,
.intro-playing .sidebar,
.intro-playing .drawer,
.intro-playing .hamburger,
.intro-playing .site-header {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* オフキャンバスで body / ラッパに transform を当てている場合の保険 */
.intro-playing body,
.intro-playing .site-wrap,
.intro-playing .page-wrap,
.intro-playing main {
  transform: none !important;
  translate: none !important; /* 近年のプロパティ対策 */
  margin-left: 0 !important;
  padding-left: 0 !important; /* 左メニューで body にパディング付ける系の対策 */
}


#intro { background:#fff; }

body:not(.intro-ready) #intro {
  opacity: 0;
  visibility: hidden;
}
body.intro-ready #intro {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  background:transparent;
  
}
#intro{ 
    --zoom-delay: 400ms;           
    --zoom-time:  2200ms;     
    --cut-left: 36.5%;
    --cut-right: 62.8%;
    --zoom-oy: 70%; 
}
#intro.zoom-start .intro-scene{ /* ズームはjsで付与されたクラスで発火するようにする */
  animation: introZoom 4000ms cubic-bezier(1,.11,.83,.67) forwards;
  transform-origin: var(--zoom-ox, 50%) var(--zoom-oy, 70%);
}
/* ===== ズーム対象となる全体ラッパ ===== */
.intro-scene {
    position: absolute;
    inset: 0;
    transform: none;
    opacity: 1; 
}  

/* 3:2の固定キャンバス（常に同じ座標系）を作って画像が同じ拡大縮小率で動く”状態に */
.intro-canvas{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  aspect-ratio: 3 / 2;
  /* ビューポート内に最大で収まるように拡大縮小 */
  width: max(100vw, calc(100vh * 3 / 2));
  height: auto;
  z-index: 1;
}


/* キャンバス内のレイヤは、％がすべてこの箱基準になる */
.intro-canvas .intro-bg,
.intro-canvas .door-slot{
  position:absolute;
  inset:0;
}

.intro-canvas img{
  position:absolute; inset:0;
  width:100%;
  height:auto;           /* ここ重要：比率維持 */
  object-fit: contain;   /* なくてもOK。containのままでズレないはず */
  display:block;
}

.intro-canvas > .door-slot-right { position:absolute; inset:0; z-index: 10; }
.intro-canvas > .intro-bg       { position:absolute; inset:0; z-index: 20; }
.intro-canvas > .door-slot-left { position:absolute; inset:0; z-index: 10; }

@keyframes introZoom {
  0%   { transform: scale(1);   opacity: 1; }   /* ← 0から見せたいなら opacity:1 に */
  12%  { opacity: 1; }                          /* （0→1 のフェードをやめる） */
  100% { transform: scale(6.5); opacity: 1; }   /* ← 拡大率を調整 */
}

#intro .intro__overlay{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  background: #fff;
  transition: opacity 3000ms cubic-bezier(1,.11,.83,.67);
}

#intro.afterglow .intro__overlay{
  opacity: 1;
}

 退場時に overlay を戻す（任意：fade-out時に薄くする/消す） */
#intro.fade-out .intro__overlay {
  transition: opacity 420ms ease;
  opacity: 0;
}

#intro.afterglow .intro__overlay { background:#fff;  opacity:.1; }

/* 初期は非表示（必要なら） */
#intro .intro__overlay { opacity:0; transition: opacity .6s ease; z-index: 3;}

/* ===== 背景 ===== */
.intro-bg, .door-slot {
  position: absolute;
  inset: 0;
  /*z-index:1;*/
}
.intro-bg img,
.door-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;          /* ← 絶対に auto に */
  object-fit: contain;   /* ← 初期は contain で中央に収める */
  display: block;
  opacity: 1;
  transform: none;
  filter: none;
}

/*--seam: 左右の戸が閉じた時の“合わせ目”のx位置（%）*/
.door-slot { pointer-events:none; }
.door-slot-left{
  pointer-events:none;
  clip-path: inset(0 0 0 var(--seam-left) );
  -webkit-clip-path: inset(0 0 0 var(--cut-left) );
  /* Safari古め対策するなら -webkit-clip-path も同じ値で */
}

/* 右側は seam〜100% までが“見える窓” */
.door-slot-right{
   pointer-events:none;
  clip-path:inset(0 calc(100% - var(--cut-right)) 0 0 );
  /*-webkit-clip-path:inset(0 var(--seam-right) 0 0 );*/
}

/* 初期はピッタリ重なる（閉じている見た目） */
.door-img-left, .door-img-right{ transform: translateX(0); }

/* 開くアニメーション：窓（クリップ）から外に出て見えなくなる */
#intro.doors-open .door-img-left{
  animation: doorLeft 4000ms cubic-bezier(.93,.07,.93,.74)forwards;
}
#intro.doors-open .door-img-right{
  animation: doorRight 4000ms cubic-bezier(.93,.07,.93,.74)forwards;
}

/* ===== キーフレーム ===== */
@keyframes doorLeft  { to { transform: translateX(-115%); } }
@keyframes doorRight { to { transform: translateX(115%); } }


/* アニメ後にフェードアウトして本編へ */
#intro.fade-out {
  opacity: 0;
  transition: opacity var(--intro-fade-ms, 2400ms) ease;
  pointer-events: none;    /* クリック吸いを防止 */
}

/* 発火トリガー：body に .is-hero-bg が付いたら、背景が“ふわっ”と現れる */
body.is-hero-bg .hero-stage{
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.hero-stage{
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: scale(1.03);
    filter: blur(6px);
    transition:
        opacity 1200ms cubic-bezier(.22,.61,.36,1),
        transform 1200ms cubic-bezier(.22,.61,.36,1),
        filter 1200ms cubic-bezier(.22,.61,.36,1);
}

/* 0) 初期は見えない */
.hero { position:relative; }
.hero-bg    { opacity:0; transform: scale(1.03); filter: blur(6px); }
.hero-piece { 
    opacity:0; 
    transform: translateY(18px) scale(.96); 
    filter: blur(6px); 
}

/* 1) 背景を先にふわっと */
@keyframes bgFade {
  0%   { opacity:0; transform: scale(1.03); filter: blur(6px); }
  60%  { opacity:1; }
  100% { opacity:1; transform: scale(1); filter: blur(0); }
}

/* 2) 各要素を「フワッ」：不透明化＋拡大＋少し持ち上がる（行き過ぎなし） */
@keyframes piecePop {
  0%   { opacity:0; transform: translateY(18px) scale(.96); filter: blur(6px); }
  55%  { opacity:1; }
  100% { opacity:1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

/* 3) トリガー：bodyに .hero-seq が付いたら再生 */
body.is-hero-bg   .hero-bg {
  animation: bgFade 1200ms cubic-bezier(.22,.61,.36,1) forwards;
}
body.is-hero-pieces .hero-piece {
  animation: piecePop 900ms cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(800ms + var(--i) * 180ms); /* 背景→0.4s後に順次 */
}

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-piece { animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
  .door-img-left, .door-img-right{ animation: none !important; transform: translateX(0) !important; }
}


/* ==========================
   1) CSS — add to the END of front.css (or tablet.css)
   ========================== */
/* 初期は必ず不可視（幅共通） */
.hero .hero-piece {
  opacity: 0;
  transform: translateY(18px) scale(.96);
  filter: blur(6px);
}
/* 再生トリガー（順番表示） */
body.is-hero-pieces .hero .hero-piece {
  animation: piecePop 900ms cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(800ms + var(--i, 0) * 180ms);
}
/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .hero .hero-piece { animation: none !important; opacity: 1 !important; transform:none !important; filter:none !important; }
}

#intro { position: fixed; inset: 0; z-index: 9999; }
/* フェードアウト（既にあればそのままでOK） */
#intro.fade-out{
  opacity: 0;
  transition: opacity var(--intro-fade-ms, 420ms) ease;
  pointer-events: none; /* 消えかけ時の誤クリック防止 */
}

/*イントロアニメここまで=====================================================================================================*/



h2:lang(en){   

  font-weight: 400;
  font-size: 2.5rem;
  font-style: normal;
}

h2:lang(ja) {
  font-weight: 300;
  font-family:  'Noto Sans JP', system-ui, sans-serif;
  font-size: var(--fz-300);
  font-style: normal; /* ←英語より一段階小さめ */
  line-height: 2.0;
  letter-spacing: 0.01em; /* 日本語は詰め気味でも可 */
}

p{
    color:#5C4444;
}
.band{
        background-image:url("../img/bg/bg.png") ;
        
}
.container{
    z-index: 0;
    max-width:1200px;
    width:100%;
    min-width: none;
    margin-inline:auto;
    padding-inline:16px;
}
/* セクション全体を画面端まで（背景用） */
.full-bleed{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    box-sizing:border-box;
    }
/* 子要素だけを“画面端まで”にブレイクアウト */
.bleed{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
}
.hero-breakout{
  width: 100vw;
  margin-inline: calc(50% - 50vw);  /* containerの中央寄せを打ち消す */
}
.hero-inner{
  width: clamp(1200px, 95vw, 1600px);
  margin-inline: auto;
  padding-inline: 2rem;
}
.hero{
    padding: clamp(2rem, 5vw, 4rem) 0;
    text-align:center;
    position: relative; 
}

/*本番でリロードが早すぎても、アニメーションが確実に動かす*/
.hero-stage {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
body.is-hero-bg .hero-stage {
  opacity: 1;
  transform: none;
}



.hero_message{

    display:grid;
    width: 100%; 
    padding-inline: 2rem;
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-template-rows: repeat(12, 1fr);
    min-height: clamp(40px, 10vh, 70px); 
    align-content: start; 
}

.hero_logo{
    width: 70%;
    height: auto;
    grid-column: 4 / 8; 
    grid-row: 1 / 3;
    z-index: 5;
}

.hero .catch{
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: .02em;

    font-family: var(--ff-h1);
    line-height: 5rem;
    width: 600px;
    height: auto;
    text-align: left;
    grid-column: 7 / 12; 
    grid-row: 5/ 7;
    z-index: 5;
    color: #5C4444;    
}

.hero-blob { 
    margin: 0 auto;
    grid-column: 7 / 12; 
    grid-row: 1 / 4;
    width:90%;
    align-self: self-end;   
}
.blob-svg { 
    width: 110%; 
    height: auto; 
    display: block; 
}
.hero-blob { 
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.12));
 } /* 影が欲しければ */
.hero-blob2 { 
    margin: 0 auto;
    grid-column: 1 / 6; 
    grid-row: 3 /5;
    justify-self: self-end;
    width: 80%;
}
.blob-svg2 { 
    width: 100%; 
    height: auto; 
    display: block; 
}
.hero-blob2 { 
    filter: drop-shadow(0 4px 14px rgba(6, 6, 6, 0.259));
 } /* 影が欲しければ */
.hero-blob3 { 
    margin: 0 auto;
    grid-column: 8 / 12; 
    grid-row: 7 / 9;
    width: min(100%, 500px);    
}
.blob-svg3 { 
    width: 100%; 
    height: auto; 
    display: block; 
}
.hero-blob3 { 
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.12));
 } /* 影が欲しければ */
.message{
    width: 500px;
    height: auto;
    font-size: var(--fz-300);
    text-align: left;
    line-height: 3.5rem;
    grid-column: 2 / 6; 
    grid-row: 8 /12;
    z-index: 5;    
}
.hero_gallery{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: space-between ;
    gap:100px;
}
.hero_gallery_img1{
    width: 30%;
    height: auto;
    margin-left: 15%;
    box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}

/* コンテナ（お好みのアスペクトでOK。例：横長） */
.fade-rotator{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;       /* 固定したくない場合は消してOK */
  overflow: hidden;
  background: transparent;           /* 読み込み時の下地（任意） */
}

/* 個別サイズ：幅は「箱」に指定する */
.rotator-a{ 
    width: 50%;
    height: auto;
    margin-left: 15%;
    box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}  /* 幅70% 相当 */
.rotator-b{ 
    width: 60%;
    height: auto;
    margin-right: 10%;
    align-self: flex-end;
    box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}  /* 幅30% 相当 */

/* 画像は全て重ねる */
.fade-rotator  img{
  position: absolute;
  inset: 0;
  width: 100% !important;   /* 一時的に強制上書き */
  height: 100% !important;  /* ← これが無いと object-fit が効きません */
  object-fit: cover !important;
  object-position: 50% 50% !important;
  display: block;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 2000ms cubic-bezier(.53,.13,.55,.94),
    transform 2500ms cubic-bezier(.53,.13,.55,.94);
}

/* 表示中 */
.fade-rotator > img.is-active{
  opacity: 1;
  transform: scale(1);
}

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .fade-rotator > img{ transition: none !important; transform: none !important; }
}

.hero_gallery_img2{
    width: 50%;
    height: auto;
    margin-right: 10%;
    align-self: flex-end;
    box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}

/* 最新のお知らせ */
.reveal-up{
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity   700ms cubic-bezier(.22,.61,.36,1),
    transform 700ms cubic-bezier(.22,.61,.36,1),
    filter    700ms cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 120ms); /* 連番でステップ表示 */
  will-change: opacity, transform, filter;
}

/* 画面内に入ったら“ふわっ” */
.reveal-up.is-inview{
  opacity: 1;
  transform: none;
  filter: none;
}

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

.event{ 
    padding: 3rem 0;
    width: 100%; 
}
.event_title,.products_title,.recipe-column_title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 150px 0 100px 0;

}
.event h2,.products h2,.recipe-column h2{ 

    color:  var(--fg);
    text-align: center;
}

.event-list{ 
    margin: 100px 0;
    display:flex; 
    flex-direction: row;
    justify-content: center;
    gap: 2.0rem;
 }
.event-list-each{

    width: 40%;
    height: 500px;
    display: flex;
    flex-direction: column;

} 
.event_text{
    margin-top: 10px;
}
.event_text p {
  white-space: pre-line;
}

.event_kind{
    display: inline;
}


.event-list-each img{
    width: 100%;
    height: 200px;
    min-height: 200px;
    object-fit:cover;

}

.event_detail {
  display: flex;
  flex-direction: column;
  justify-content:center ;
  align-items:flex-start;
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
  font-size: 1.2em;
  line-height: 1.6;
}
.event_detail .label {
  display: inline-block;
  color: #888;
}
.event-desc {
  margin-top: 0.5em;
}

.label{
  color:#ffffff; 
  font-size: 0.9em;
  width: auto;
  height: 30px;
  border-radius: 15px;
  padding: 0px 10px;
  line-height: 30px;
  display: inline-block;
  margin: 5px ;
}

.marche, .recipe{
    background:var(--brand); 
}
.lesson, .story{
    background:var(--accent);   
}
.event time{ margin-left:auto; font-size:.9rem; color:#666; }

/* 商品紹介 */

.products{
    margin-top: rem;
    padding: 3rem 0;
}
.cards{
    display:flex;
    flex-direction: column;
}
.card{height:fit-content}
/*===============sticky=============*/
.card{
  position: sticky;  /* ← これ！ */
  --card-h: 45vh;
  --title-h: 56px;
  height: var(--card-h);
  top: calc(50vh - var(--card-h) / 2);           
  /* 1画面サイズ（任意で120vh等もOK） */

    display:grid;
    grid-template-rows: repeat(2, 1fr);
    gap:.0rem;
    box-shadow: 
    var(--shadow-1);
}
.card-1 { z-index: 1;  }
.card-2 { z-index: 2;  }
.card-3 { z-index: 3;  }
.card img{ width:100%; height:auto; display:block;  }
.card h3{ 
    font-size:var(--fz-400);
 }
.card_wrapper{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}


.products_title{
  position: -webkit-sticky;
  position: sticky;
  top: 10vh;


}

.products .card-title{
    background-color: var(--accent);
    block-size: var(--title-h);
    display: flex;
    align-items: center;
    padding-left: 10px;
    justify-content: center;
}

.decoration{
  width:300px ;
  color: rgb(249, 248, 248);
  font-size: var(--fz-300);
  text-align: center;

}

.card_content{
  block-size: calc(var(--card-h) - var(--title-h));
  display:grid;
  grid-template-columns: 1fr 2fr;
}

.card_img{
  width: 100%;
  aspect-ratio: 1 / 1;
}
.card_img img{
  inline-size: 100%;             /* (= width) */
  block-size: 100%;              /* (= height) */
  object-fit: cover;
  object-position: 50% 50% !important;           
}
.card-text{
    padding: 80px;
    line-height: 2.6rem;
    background-color: #DEDBD4;
    width: auto;
    overflow: auto;   
}

.card-text p{
    font-size: var(--fz-200);
}



/* レシピ＆コラム */
.recipe-column{ 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}

.recipe-column_introduce{
    margin: 50px;
    line-height: 2.0rem;
}
.rc_cards{
    display: flex;
    flex-direction: row;
    gap: 50px;
    margin: 100px 0;
}
.rc_card{
    width: 300px;
    background-color: #DEDBD4;

}
.rc_card img{
    width: 100%;
    height:170px ;
    object-fit: cover;
    margin-bottom: 10px;
}
.rc_card h3{
    margin: 15px;
}
.rc_card_text{
    padding: 0px 15px;
}
.rc_card_text p{
    font-size: 0.9rem;
}
.event-time_wrapper{
    text-align: right;
}

.contact .btn{ font-size:1.05rem; padding:.7rem 1.2rem; }

/* 1024px 以下：カード2列に */
@media (max-width: 1024px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
}

/* 768px 以下：カード1列、ニュース行を縦積み */
@media (max-width: 768px){
  .news li{ flex-direction: column; align-items:flex-start; }
  .news time{ margin-left:0; }
  .cards{ grid-template-columns: 1fr; }
  #intro{ height: 32vh; }
}
 main > section.band.closing {
  padding: 100px 0 300px 0;
  display: block;
  width:fit-content;
  margin-inline: auto;
  min-width:400px;
}

#content > section > main > section.band.closing > div > h2{
  font-size: 1.4rem;
}
.closing__title{
  text-align: center;
}
.closing__lead{
  margin: 50px 0 ;
  line-height: 40px;
  font-size: var(--fz-300);
}

.link_IG_BOX{
  text-align: center;
  font-size: var(--fz-300);

}

.closing__cta{
  display: flex;
  flex-direction: row;
  gap: 100px;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
.btn{
  width: 250px;
  height: 50px;
  font-size: 14px;
  background-color: var(--accent);
  text-align: center;
  line-height: 50px;
  color: var(--fg);
  padding: 2px;
  box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}

.btn:hover{
  background-color: #f0e8cd;
    color: var(--fg);
}


/* ====== レスポンシブ ================================================================ */
/*タブレットサイズ&スマホのイントロ*/

@media(max-width:1200px) {
  #intro .intro-scene{
    position: absolute; inset: 0;
    display: grid; place-items: center;
    transform: none;                 /* 初期は素のまま */     /* ズーム焦点：扉に合わせてやや下 */
  }

  /* 子キャンバス：座標リセット＋小さめ中央 */
  #intro .intro-canvas{
    position: relative;              /* absolute/translate を無効化 */
    left: auto; top: auto; right: auto; bottom: auto;
    transform: none; margin: 0;

    aspect-ratio: 3 / 2;
    width: clamp(320px, 92svw, 1100px);  /* はみ出さず、小さすぎない */
    height: auto;

    /* 上下を白に馴染ませる（必要なければ下2行を削除） 
    --edge-fade: 22vh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0,
      #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0,
      #000 var(--edge-fade), #000 calc(100% - var(--edge-fade)), transparent 100%);*/
  }


  /* 画像は必ず “中央 contain” */
  #intro .intro-bg img,
  #intro .door-slot img{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: 50% 50%;
    display: block;
  }

  #intro{ --zoom-oy: 60%; }
  #intro.zoom-start .intro-scene{
    animation: introZoom 4000ms cubic-bezier(1,.11,.83,.67) forwards;
  }

/*マスク*/
/* WebKit/Chromium で四辺フェード（1枚のマスク合成） */
@supports (-webkit-mask-composite: source-in) {
  #intro .intro-bg img{
    --fade-x: 24px;
    --fade-y: 40px;
    width:100%; height:100%;
    object-fit:contain; object-position:50% 50%; display:block;

    -webkit-mask-image:
      /* 上下 */
      linear-gradient(to bottom, transparent, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), transparent),
      /* 左右 */
      linear-gradient(to right,  transparent, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent);
    -webkit-mask-composite: source-in; /* 二枚の交差 */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
  }
}
/* Firefox など：上下フェードだけ確実に */
@supports not (-webkit-mask-composite: source-in) {
  #intro .intro-bg img{
    --fade-y: 40px;
    width:100%; height:100%;
    object-fit:contain; object-position:50% 50%; display:block;

    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--fade-y),
      #000 calc(100% - var(--fade-y)),
      transparent 100%
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
  }
}

/* イントロを画面にぴったり固定 */
#intro{
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 2147483647;
  overflow: hidden;
  background: #fff;
}

/* 再生中は、#intro の兄弟（ナビやラッパ）に掛かった transform / 左余白をゼロ化 */
html.intro-playing body {
  overflow: hidden;
  padding-left: 0 !important;
}

html.intro-playing body > *:not(#intro){
  transform: none !important;
  translate: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* ありがちなクラス名も保険で潰す（存在するものだけ効く） */
html.intro-playing .site,
html.intro-playing .site-wrap,
html.intro-playing .l-wrapper,
html.intro-playing #page,
html.intro-playing main,
html.intro-playing header,
html.intro-playing .global-nav,
html.intro-playing .drawer,
html.intro-playing .sidebar {
  transform: none !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  visibility: hidden;   /* 見せたくなければ */
  opacity: 0;
  pointer-events: none;
}

@keyframes introZoom {
  0%   { transform: scale(1);   opacity: 1; }   /* ← 0から見せたいなら opacity:1 に */
  12%  { opacity: 1; }                          /* （0→1 のフェードをやめる） */
  100% { transform: scale(10.0); opacity: 1; }   /* ← 拡大率を調整 */
}



}

/*タブレットサイズ*/
@media (min-width: 768px) and (max-width:1200px){

  .container{
    z-index: 0;
    width:100%;


    height: auto;
    min-width:76
    8px; 
}
h2:lang(en) {   

  font-weight: 400;
  font-size: 2.0rem;
  font-style: normal;
}

.hero-inner{
  width: clamp(480px, 95vw, 1200px);
  margin-inline: auto;

}
.hero{
    padding: clamp(4rem, 6vw, 7rem) 0;
    text-align:center;
    position: relative; 
}

/*本番でリロードが早すぎても、アニメーションが確実に動かす*/
.hero-stage {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}
body.is-hero-bg .hero-stage {
  opacity: 1;
  transform: none;
}

.hero_message{

    display:grid;
    width: 100%; 
    padding-inline: 0rem;
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-template-rows: repeat(13, 1fr);
    min-height: clamp(40px, 10vh, 70px); 
    align-content: start; 
}

.hero_logo{
    width: 100%;
    height: auto;
    grid-column: 4 / 8; 
    grid-row: 2 / 4;
    z-index: 5;
}

.hero .catch{
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: .02em;
    font-family: var(--ff-h1);
    line-height: 5rem;
    width: 400px;
    height: auto;
    text-align: left;
    grid-column: 5 / 11; 
    grid-row: 7/ 9;
    z-index: 5;
    color: #5C4444;    
}

.hero-blob { 
    margin: 0 auto;
    grid-column: 7 / 12; 
    grid-row: 3 / 6;
    width:110%;
    align-self: self-start;   
}
.blob-svg { 
    width: 110%; 
    height: auto; 
    display: block; 
}
.hero-blob { 
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.12));
 } /* 影が欲しければ */
.hero-blob2 { 
    margin: 0 auto;
    grid-column: 1 / 6; 
    grid-row: 5 /7;
    justify-self: self-end;
    width: 80%;
}
.blob-svg2 { 
    width: 100%; 
    height: auto; 
    display: block; 
}
.hero-blob2 { 
    filter: drop-shadow(0 4px 14px rgba(6, 6, 6, 0.259));
 } /* 影が欲しければ */
.hero-blob3 { 
    margin: 0 auto;
    grid-column: 8 / 12; 
    grid-row: 9 / 11;
    width: min(100%, 500px);    
}
.blob-svg3 { 
    width: 100%; 
    height: auto; 
    display: block; 
}
.hero-blob3 { 
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.12));
 } /* 影が欲しければ */
.message{
    width: 500px;
    height: auto;
    font-size: var(--fz-200);
    text-align: left;
    line-height: 2.6rem;
    grid-column: 3 / 6; 
    grid-row: 11 /14;
    z-index: 5;    
}

.hero_gallery_img1{
    width: 55%;
    height: auto;
    margin-left: 5%;
    box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}

.hero_gallery_img2{
    width: 75%;
    height: auto;
    margin-right: 5%;
    align-self: flex-end;
    box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}

/* 発火トリガー：body に .is-hero-bg が付いたら、背景が“ふわっ”と現れる */
body.is-hero-bg .hero-stage{
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.hero-stage{
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: scale(1.03);
    filter: blur(6px);
    transition:
        opacity 1200ms cubic-bezier(.22,.61,.36,1),
        transform 1200ms cubic-bezier(.22,.61,.36,1),
        filter 1200ms cubic-bezier(.22,.61,.36,1);
}

/* 0) 初期は見えない */
.hero { position:relative; }
.hero-bg    { opacity:0; transform: scale(1.03); filter: blur(6px); }
.hero-piece { 
    opacity:0; 
    transform: translateY(18px) scale(.96); 
    filter: blur(6px); 
}

/* 1) 背景を先にふわっと */
@keyframes bgFade {
  0%   { opacity:0; transform: scale(1.03); filter: blur(6px); }
  60%  { opacity:1; }
  100% { opacity:1; transform: scale(1); filter: blur(0); }
}

/* 2) 各要素を「フワッ」：不透明化＋拡大＋少し持ち上がる（行き過ぎなし） */
@keyframes piecePop {
  0%   { opacity:0; transform: translateY(18px) scale(.96); filter: blur(6px); }
  55%  { opacity:1; }
  100% { opacity:1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

.card{
  position: sticky;  /* ← これ！ */
  --card-h: 50vw;
  top: calc(40vh - var(--card-h) / 2);           
  /* 1画面サイズ（任意で120vh等もOK） */
    overflow:hidden;
    display:grid;
    gap:.0rem;
    box-shadow: 
    var(--shadow-1);
  margin: 0 10px;
}

.card_wrapper{
  width: 100%;
}

.card_content{
  block-size: calc(var(--card-h) - var(--title-h));
  display:grid;
  grid-template-columns: 1fr 3fr;
}

.card_img{
  width: 100%;
  aspect-ratio: 1 / 1;
}
.card_img img{
  inline-size: 100%;             /* (= width) */
  block-size: 100%;              /* (= height) */
  object-fit: cover;
  object-position: 50% 50% !important;           
}
.card-text{
    padding: 30px;
    line-height: 3.0rem;
    background-color: #DEDBD4;
    width: auto;
    overflow: auto;   
}

.card-text p{
    font-size: var(--fz-100);
}

@keyframes piecePopTb{ 0%{opacity:0;transform:translateY(28px) scale(.90);filter:blur(10px);}55%{opacity:1;}100%{opacity:1;transform:none;filter:none;} }
body.is-hero-pieces .hero .hero-piece{
animation-name: piecePopTb !important;
animation-duration: 1200ms !important;
animation-timing-function: cubic-bezier(.20,.70,.20,1) !important;
animation-fill-mode: forwards !important;
animation-delay: calc(900ms + var(--i,0) * 220ms) !important;
}

/* 背景は .hero-stage にある（.band.full-bleed.hero-stage） */
.hero-stage{
  opacity: 0;
  transform: scale(1.03);
  filter: blur(6px);
  transition: none !important;      /* ← タブレットの即表示transitionを無効化 */
  position: relative;
  z-index: 1;                        /* 背景は下 */
}

/* is-hero-bg が付いたら “bgFade” でふわっと */
body.is-hero-bg .hero-stage{
  animation: bgFade 1200ms cubic-bezier(.22,.61,.36,1) forwards !important;
}

/* ピースは背景より前（念のため） */
.hero .hero-piece{ position: relative; z-index: 2; }

/* 未定義なら */
@keyframes bgFade{
  0%   { opacity:0; transform: scale(1.03); filter: blur(6px); }
  60%  { opacity:1; }
  100% { opacity:1; transform: scale(1); filter: blur(0); }
}


.band.closing .wrap .closing__lead { font-size: var(--fz-200); }

br.br--sm { display: none; }

#content > section > main > section.band.closing {
  padding: 100px 0 300px 0;
  min-width:500px;
  width: 70vw;
  margin-left:calc(50% - 35vw);
  margin-right:calc(50% - 35vw);
}
.band.closing {
  font-size: 18px;
}
.closing__title{text-align: center;}
.closing__textbox{
  margin: 50px 0 150px 0;
  line-height: 40px;
}
.closing__cta{
  display: flex;
  flex-direction: row;
  gap: 100px;
  justify-content: center;
  align-items: center;
}
.btn{
  width: 200px;
  height: 50px;
  font-size: 14px;
  background-color: var(--accent);
  text-align: center;
  line-height: 50px;
  color: var(--fg);
  padding: 2px;
  box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}
}




/*タブレット横向き*/
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
 
.rc_card{
 width:350px;

}

.rc_card_text p{
    font-size: 1.0rem;
}



}






/*スマホサイズ*/

@media (max-width: 767.98px) {

#intro{ --zoom-oy: 58%; }  
#intro.zoom-start .intro-scene{
    animation: introZoom 4000ms cubic-bezier(1,.11,.83,.67) forwards;
  }


@keyframes introZoom {
  0%   { transform: scale(1);   opacity: 1; }   /* ← 0から見せたいなら opacity:1 に */
  12%  { opacity: 1; }                          /* （0→1 のフェードをやめる） */
  100% { transform: scale(15.0); opacity: 1; }   /* ← 拡大率を調整 */
}

  
  #site-header{
    display: none !important;
  }

  .container{
   width:100%;
}

h2{   

  font-weight: 400;
  font-size: 1.6rem;
  font-style: normal;
}
.hero-inner{
  width: clamp(300px, 95vw, 480px);
  margin-inline: auto;
  padding-inline: 0.5rem;
}
.hero_message{
    width: 100%;
    height: auto !important;
    min-height: 1260px !important; 
    position: relative;
    display:grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-template-rows: repeat(18, 70px);
    align-content: start;
    padding: 0;
    margin-bottom: 200px;
}

.hero_logo{
    width: 90%;
    height: auto;
    grid-column: 2 / 10; 
    grid-row: 1 / 4;
    z-index: 5;
}
.hero .catch{
  font-size: clamp(1.4rem, 5.0vw, 2rem); 
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: var(--space-4);
  font-family: var(--ff-h1);
  line-height: 3rem;
  width: 100%;
  height: auto;
  text-align: left;
  grid-column: 2 / 12; 
  grid-row: 7/ 10;
  z-index: 5;
  color: #5C4444;    
}

.hero-blob { 
    margin: 0 auto;
    grid-column:  3/11; 
    grid-row: 3 / 6;
    width:110%;
    align-self: self-start;   
}
.blob-svg { 
    width: 110%; 
    height: auto; 
    display: block; 
}
.hero-blob { 
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.12));
 } /* 影が欲しければ */
.hero-blob2 { 
    margin: 0 auto;
    grid-column: 1 / 8; 
    grid-row: 10 /12;
    justify-self: self-end;
    width: 80%;
}
.blob-svg2 { 
    width: 100%; 
    height: auto; 
    display: block; 
}
.hero-blob2 { 
    filter: drop-shadow(0 4px 14px rgba(6, 6, 6, 0.259));
 } /* 影が欲しければ */
.hero-blob3 { 
    margin: 0 auto;
    grid-column: 6 / 12; 
    grid-row: 12 / 14;
    width: min(100%, 500px);    
}
.blob-svg3 { 
    width: 100%; 
    height: auto; 
    display: block; 
}
.hero-blob3 { 
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.12));
 } /* 影が欲しければ */
.message{
    width: 80vw;
    height: auto;
    text-align: left;
    line-height: 2.6rem;
    grid-column: 2 / 5; 
    grid-row: 16 /25;
    z-index: 5;    
}
.hero_gallery{
  position: relative;
}
.hero_gallery_img1{
    width: 80%;
    height: auto;
    margin-left: 0%;
}

.hero_gallery_img2{
    width:90%;
    height: auto;
    margin-right: 0%;
}
.event_title,.products_title,.recipe-column_title{
  position: relative;
    margin: 80px 0 30px 0;
}

.products .card-title{
    height:50px;
    padding-left: 10px;
}
.event{
  padding: 0 20px;;
}

.label{
  color:#ffffff; 
  font-size: 0.9em;
  width: auto;
  height: 30px;
  border-radius: 15px;
  padding: 0px 10px;
  line-height: 30px;
  display: inline-block;
  margin: 5px ;
}

.event-list{ 
    margin: 100px 0;
    display:flex; 
    flex-direction: column;
    justify-content: center;
    gap: 6.0rem;
 }

.event-list-each {
  width:100%;
}
.products{
  padding: 0;
}

.products_title{
  top: 10px;
}
.card{
  position:relative;
  --card-h: 100vh;;           
  /* 1画面サイズ（任意で120vh等もOK） */
  overflow:hidden;
  display:flex;
  flex-direction: column;
  margin:  20px;
  height: fit-content;
}

#products > div.cards.sticky-stack > article.card> div > div.card-title > h3{
  font-size:0.8rem !important;
}

.card_content{
  height: auto;
  display: flex;
  flex-direction: column;
  /*
  display:grid;
  grid-template-rows: 2fr 3fr;
  grid-template-columns: none;
  */
}

.card_img{
  width: 100%;
  aspect-ratio: 1 / 1;
  /*grid-row: 1 / 2;*/
}
.card_img img{
  inline-size: 100%;             /* (= width) */
  block-size: 100%;              /* (= height) */
  object-fit: cover;
  object-position: 50% 50% !important;           
}
.card-text{
  padding:30px;
  height: auto;
  /*grid-row: 2 / 3;*/
}
.card-text p{
    font-size: var(--fz-100);
    line-height: 1.8rem;
}
#recipe-column > div.recipe-column_introduce{
  font-size: var(--fz-200);
  line-height: 2.0rem;
}
 .rc_cards{
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin: 100px 0;
}

.rc_card_text p{
  font-size: var(--fz-100) !important;
}

br.br--sm { display: inline; }
.closing__title{
  line-height: 4.0rem;
}
#content > section > main > section.band.closing {
  padding: 100px 0 300px 0;
  min-width:300px;
  width: 80vw;
  margin-left:calc(50% - 40vw);
  margin-right:calc(50% - 40vw);
}

.closing__textbox{
  margin: 50px 0 150px 0;
  line-height: 40px;
}
.closing__cta{
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
  align-items: center;
}
.btn{
  width: 220px;
  height: 50px;
  font-size: 12px;
  background-color: var(--accent);
  text-align: center;
  line-height: 50px;
  color: var(--fg);
  padding: 2px;
  box-shadow: 0 0 8px rgba(15, 11, 11, 0.329);
}
main > section.band.closing {
  padding: 100px 10px 300px 10px;
  font-size: 14px;
  display: block;
  width:fit-content;
  margin-inline: auto;
  min-width:300px;
}
}

/*スマホ横向き*/
@media (orientation: landscape) and (max-height: 500px) {
 
  #intro .intro-bg img,
  #intro .door-slot img{
    position: absolute; inset: 0;
    width: auto; height: 100%;
    object-fit: contain; object-position: 50% 50%;
    display: block;
  }

#intro{ --zoom-oy: 65%; } 

.hero-inner{
  width: clamp(667px, 95vw, 1000px);
  margin-inline: auto;
  padding-inline: 2rem;
}

.hero_message{
    width: 100%;
    height: auto !important;
    min-height: 1260px !important; 
    position: relative;
    display:grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-template-rows: repeat(18, 70px);
    align-content: start;
    padding: 0;
    margin-bottom: 20px;
}

.hero_logo{
    width: 90%;
    height: auto;
    grid-column: 1 / 6; 
    grid-row: 1 / 3;
    z-index: 5;
}
.hero .catch{
  font-size: clamp(1.4rem, 4.0vw, 2rem); 
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: var(--space-4);
  font-family: var(--ff-h1);
  line-height: 3rem;
  width: 100%;
  height: auto;
  text-align: left;
  grid-column: 1 / 8; 
  grid-row: 4/ 7;
  z-index: 5;
  color: #5C4444;    
}

.hero-blob { 
    margin: 0 auto;
    grid-column:  6/13; 
    grid-row: 2 / 5;
    width:80%;
    align-self: self-end;   
}

.hero-blob2 { 
    margin: 0 auto;
    grid-column: 1 / 6; 
    grid-row: 6 /9;
    justify-self: self-end;
    align-self:last baseline;
    width: 80%;
}

.hero-blob3 { 
    margin: 0 auto;
    grid-column: 6 / 12; 
    grid-row: 9 / 11;
    width: min(100%, 500px);    
}

.message{
    width: 80vw;
    height: auto;
    text-align: left;
    line-height: 2.6rem;
    grid-column: 2 / 5; 
    grid-row: 14 /16;
    z-index: 5;    
}

.event-list{ 
    margin: 100px 0 200px 0;
    display:flex; 
    flex-direction: row;
    justify-content: center;
    gap: 2.0rem;
 }

 .event_title,.products_title,.recipe-column_title{
    margin: 150px 0 100px 0;
}

.event-list-each{
    width: 40%;
    height: 600px;
    display: flex;
    flex-direction: column;
} 

.card{
  position: sticky;  /* ← これ！ */
  --card-h: 60vh;
  top: calc(50vh - var(--card-h) / 2);           
  /* 1画面サイズ（任意で120vh等もOK） */
  overflow:hidden;
  display:grid;
  grid-template-rows: repeat(2, 1fr);
  box-shadow: none;
}

.card img{ display:block; height:100%; width:auto; aspect-ratio: 3/2; object-fit: cover; }

.rc_cards{
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin: 50px 100px ;
}



}