/* ===== サイト共通モーション ===== */

/* 1. スクロールでふわっと表示（motion.js が .rv を付与） */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.rv.rv-in{opacity:1;transform:none}

/* 2. スクロール後のヘッダー（半透明＋ぼかし＋細く） */
.navbar.sticky-navigation{transition:background-color .35s ease,box-shadow .35s ease,padding .35s ease}
.navbar.sticky-navigation.is-scrolled{
  background-color:rgba(255,255,255,.88)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 14px rgba(22,34,29,.08);
  padding-top:.3rem;padding-bottom:.3rem;
}
.navbar.sticky-navigation .navbar-brand img{transition:height .35s ease,max-height .35s ease}
.navbar.sticky-navigation.is-scrolled .navbar-brand img{max-height:40px}

/* 5・6. 写真カードのホバー（半透明→ほんの少し拡大＋影） */
.hover-img a img,
#pickup a img,
.item-list-area a img,
.item-list-area-d a img{
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s ease,opacity .3s ease;
}
.hover-img a:hover img,
#pickup a:hover img,
.item-list-area a:hover img,
.item-list-area-d a:hover img{
  opacity:1;
  transform:scale(1.03);
  box-shadow:0 10px 28px rgba(22,34,29,.14);
}

/* 3. ページ切り替え: 入るときはふわっと、出るときは白くフェード */
/* フェードインはサイト内リンクで移動してきたときだけ(html.pf は layout 冒頭のスクリプトが付与)。
   初回アクセスや検索ロボットには最初から表示する */
html.pf body{animation:pageIn .45s ease both}
body.page-leave{opacity:0;transition:opacity .22s ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

/* 4. トップのメイン画像: 表示中の写真をゆっくりズーム(切り替えは既存のクロスフェード) */
.slider .slick-slide{overflow:hidden}
.slider .slick-slide img{transform:scale(1);transform-origin:50% 50%}
.slider .slick-active img{animation:kenBurns 8s ease-out both}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* 5. 画像は読み込みが終わってからふわっと表示(motion.js が未読込の画像にだけ付与) */
img.img-wait{opacity:0}
img.img-ready{transition:opacity .6s ease}

/* 6. 「〜一覧 >」などの文字リンク: 下線が伸び、矢印が右に動く */
.cmn-btn-R a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s ease;text-decoration:none;padding-bottom:2px;
}
.cmn-btn-R a:hover{background-size:100% 1px;text-decoration:none}
.cmn-btn-R a span{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.cmn-btn-R a:hover span{transform:translateX(5px)}

/* 7. 商品詳細の写真: マウス位置を中心に拡大(マウス操作の端末だけ) */
@media (hover:hover) and (pointer:fine){
  #item-slider .slick-slide{overflow:hidden}
  #item-slider img{transition:transform .25s ease;cursor:zoom-in}
  #item-slider img.zooming{transform:scale(1.9)}
}

/* 3. コンセプト: 写真と文章を左右交互に並べた読み物レイアウト */
.concept-story{align-items:center;margin-bottom:72px}
.concept-story .story-img{overflow:hidden;border-radius:2px}
.concept-story .story-img img{width:100%;height:420px;object-fit:cover;transform:scale(1.12);will-change:transform}
.concept-story .story-no{font-family:"Shippori Mincho B1",serif;font-size:3.2rem;line-height:1;color:#d3dccd;margin-bottom:8px}
.concept-story h3{margin-top:4px}
.concept-story .story-name{font-size:1.15rem;margin:14px 0 10px}
.concept-story .story-name a{color:#16221d}
.concept-story .story-text{color:#4a5a53;line-height:2}
.concept-story .story-more{display:inline-block;margin-top:14px}
@media (min-width:768px){.concept-story .story-body{padding:0 32px}}
@media (max-width:767px){.concept-story .story-img img{height:260px}.concept-story .story-body{margin-top:20px}}
.lifestyle-visual{overflow:hidden}
.lifestyle-visual img{transform:scale(1.1);will-change:transform}

/* 1. ワークショップ: 開催日のカレンダー風バッジと「受付中」ラベル */
.ws-thumb{position:relative}
.ws-date{
  position:absolute;left:12px;bottom:12px;z-index:2;width:58px;text-align:center;
  background:#fff;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.18);overflow:hidden;line-height:1.1;
}
.ws-date .m{display:block;background:#4fa383;color:#fff;font-size:11px;padding:3px 0;letter-spacing:.08em}
.ws-date .d{display:block;font-size:24px;font-weight:700;color:#16221d;padding-top:4px}
.ws-date .w{display:block;font-size:10.5px;color:#7d8b84;padding:1px 0 5px}
.ws-date.ws-date-range{width:auto;min-width:78px}
.ws-date-range .d{font-size:20px;padding:4px 8px 1px;white-space:nowrap}
.ws-open{
  position:absolute;right:12px;top:12px;z-index:2;background:#d2557b;color:#fff;
  font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;letter-spacing:.06em;
  animation:wsPulse 2.2s ease-in-out infinite;
}
@keyframes wsPulse{0%,100%{box-shadow:0 0 0 0 rgba(210,85,123,.55)}60%{box-shadow:0 0 0 9px rgba(210,85,123,0)}}

/* 2. 法人ページ: 店内写真に重ねた募集バナー */
.biz-hero{
  position:relative;overflow:hidden;border-radius:6px;color:#fff;text-align:center;
  padding:88px 24px;background:#16221d;
}
.biz-hero::before{
  content:"";position:absolute;inset:0;background:var(--biz-img) center/cover no-repeat;
  transform:scale(1.06);animation:kenBurns 14s ease-out both;opacity:.9;
}
.biz-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,34,29,.35),rgba(22,34,29,.68))}
.biz-hero>*{position:relative;z-index:1}
.biz-hero .biz-kicker{font-size:1.05rem;letter-spacing:.2em;color:#cfe9dc;margin-bottom:10px}
.biz-hero h3{color:#fff;letter-spacing:.05em;margin-bottom:18px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.biz-hero .lead{color:#f1f5ef;margin:0 auto;max-width:44em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.biz-hero .biz-cta{display:inline-block;margin-top:26px;background:#fff;color:#2f7d61;font-weight:700;padding:12px 34px;border-radius:99px;transition:transform .2s,box-shadow .2s}
.biz-hero .biz-cta:hover{color:#2f7d61;text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.25)}
@media (max-width:767px){.biz-hero{padding:56px 18px}}

/* イベント集客 1: トップの「次回のイベント」帯 */
.next-event{background:#16221d;padding:0}
.next-event-inner{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 4px;color:#fff;
}
.next-event-inner:hover{color:#fff;text-decoration:none}
.next-event-label{font-size:.78rem;letter-spacing:.18em;color:#9fd3bd;border:1px solid #4fa383;border-radius:99px;padding:3px 12px}
.next-event-date{display:flex;align-items:baseline;gap:2px;font-family:"Shippori Mincho B1",serif}
.next-event-date .m{font-size:1rem}
.next-event-date .d{font-size:2rem;line-height:1;font-weight:700}
.next-event-date .w{font-size:.85rem;color:#c9d3cc}
.next-event-title{flex:1;min-width:14em;font-weight:600;line-height:1.5}
.next-event-days{background:#d2557b;color:#fff;font-weight:700;font-size:.85rem;padding:4px 12px;border-radius:99px;animation:wsPulse 2.2s ease-in-out infinite}
.next-event-cta{font-size:.9rem;color:#fff;white-space:nowrap}
.next-event-cta i{margin-left:6px;transition:transform .3s}
.next-event-inner:hover .next-event-cta i{transform:translateX(5px)}
@media (max-width:767px){.next-event-inner{gap:10px 14px}.next-event-title{min-width:100%;order:5}.next-event-cta{order:6}}

/* イベント集客 2: イベント詳細の開催日カウントダウンと固定の申し込みバー */
.ws-countdown{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-8px 0 24px}
.ws-countdown-date{font-weight:700;color:#16221d}
.ws-countdown-days{background:#d2557b;color:#fff;font-weight:700;font-size:.85rem;padding:3px 12px;border-radius:99px}
.ws-apply-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:1030;
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:12px max(16px,calc((100vw - 1100px)/2));
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 -6px 20px rgba(22,34,29,.10);
  animation:barUp .5s .4s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes barUp{from{transform:translateY(110%)}to{transform:none}}
.ws-apply-info{min-width:0;display:flex;align-items:center;gap:10px}
.ws-apply-days{flex:none;color:#d2557b;font-weight:700;font-size:.9rem}
.ws-apply-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem;color:#4a5a53}
.ws-apply-btn{
  flex:none;background:#4fa383;color:#fff;font-weight:700;padding:11px 26px;border-radius:99px;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.ws-apply-btn:hover{color:#fff;text-decoration:none;background:#3f8e70;transform:translateY(-2px);box-shadow:0 8px 18px rgba(79,163,131,.35)}
body:has(.ws-apply-bar){padding-bottom:76px}
body:has(.ws-apply-bar) .scroll-top{bottom:92px}
@media (max-width:575px){.ws-apply-title{display:none}.ws-apply-btn{padding:11px 20px}}

/* イベント集客 4: 開催レポート */
.report-card{align-items:flex-start;margin-top:8px}
.report-main{display:block;overflow:hidden;border-radius:4px}
.report-main img{width:100%;display:block;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.report-main:hover img{transform:scale(1.03)}
.report-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.report-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.report-meta{font-size:.85rem;color:#4fa383;letter-spacing:.06em;margin-bottom:6px}
.report-title{font-size:1.35rem;line-height:1.6;margin-bottom:14px}
.report-text{color:#4a5a53;line-height:2}
.report-voices-ttl{font-weight:700;margin:20px 0 10px}
.report-voices{list-style:none;padding:0;margin:0 0 18px}
.report-voices li{
  position:relative;background:#f3f6f0;border-radius:14px;padding:10px 16px;margin-bottom:10px;
  color:#16221d;line-height:1.7;
}
.report-voices li::before{content:"“";font-family:"Shippori Mincho B1",serif;color:#4fa383;font-size:1.4rem;margin-right:6px;vertical-align:-4px}

/* 動きを減らす設定の端末ではすべて止める */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  html.pf body,.slider .slick-active img,.ws-open,.biz-hero::before,.next-event-days,.ws-apply-bar{animation:none}
  img.img-wait{opacity:1}
  .cmn-btn-R a span,#item-slider img{transition:none}
  .concept-story .story-img img,.lifestyle-visual img{transform:none}
  body.page-leave{opacity:1;transition:none}
  .navbar.sticky-navigation,
  .hover-img a img,#pickup a img,.item-list-area a img,.item-list-area-d a img{transition:none}
  .hover-img a:hover img,#pickup a:hover img,.item-list-area a:hover img,.item-list-area-d a:hover img{transform:none}
}

/* お知らせの「New」バッジを点滅させる */
.badge-new{animation:newBlink 1.4s ease-in-out infinite}
@keyframes newBlink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.badge-new{animation:none}}

/* イベントが無い時期の案内(Coming Soon) */
.event-empty{
  text-align:center;background:#f3f6f0;border:1px solid #d3dccd;border-radius:6px;
  padding:44px 20px;margin-bottom:24px;
}
.event-empty-kicker{font-family:"Shippori Mincho B1",serif;letter-spacing:.2em;color:#4fa383;margin-bottom:6px}
.event-empty-title{font-size:1.3rem;font-weight:700;color:#16221d;margin-bottom:10px}
.event-empty-text{color:#4a5a53;line-height:1.9;margin-bottom:22px}
.event-empty-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ee-btn{
  display:inline-block;padding:11px 22px;border-radius:99px;color:#fff;font-weight:700;font-size:.92rem;
  transition:transform .2s,box-shadow .2s;
}
.ee-btn:hover{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.15)}
.ee-line{background:#06c755}
.ee-ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.ee-peatix{background:#eb5842}

/* スマホ・タブレットのメニュー: 画面いっぱいの白い背景に、項目が順に現れる */
@media (max-width:1199.98px){
  .sticky-navigation .navbar-collapse{
    position:absolute;top:100%;left:0;right:0;
    height:var(--menu-h,80vh);overflow-y:auto;
    background:#fff;padding:18px 28px 40px;
    border-top:1px solid #e6ebe2;
  }
  .sticky-navigation .navbar-collapse.collapsing{
    height:var(--menu-h,80vh)!important;transition:opacity .28s ease;opacity:0;
  }
  .sticky-navigation .navbar-collapse.show{opacity:1}
  .sticky-navigation .navbar-collapse .nav-item{border-bottom:1px solid #eef2eb}
  .sticky-navigation .navbar-collapse .nav-link{font-size:1.15rem;padding:14px 4px}
  .sticky-navigation .navbar-collapse.show .nav-item,
  .sticky-navigation .navbar-collapse.show .header-sns{animation:menuIn .45s cubic-bezier(.2,.8,.3,1) both}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(2){animation-delay:.04s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(3){animation-delay:.08s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(4){animation-delay:.12s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(5){animation-delay:.16s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(6){animation-delay:.20s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(7){animation-delay:.24s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(8){animation-delay:.28s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(9){animation-delay:.32s}
  .sticky-navigation .navbar-collapse.show .nav-item:nth-child(10){animation-delay:.36s}
  .sticky-navigation .navbar-collapse.show .header-sns{animation-delay:.42s;margin-top:22px}
  body.menu-open{overflow:hidden}
  body.menu-open .navbar.navbar-transparent{opacity:1;background-color:#fff!important}
}
@keyframes menuIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sticky-navigation .navbar-collapse.show .nav-item,.sticky-navigation .navbar-collapse.show .header-sns{animation:none}
}

/* 商品一覧: 写真を正方形の枠にそろえ、新着・在庫のバッジを重ねる */
.item-list-card .item-photo{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:#f6f7f4;border-radius:4px;margin-bottom:10px;
}
.item-list-card .item-photo .item-list-img{
  width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:8px;display:block;
}
.item-list-card .item-photo.is-sold-out .item-list-img{opacity:.45;filter:grayscale(.6)}
.item-badges{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:2}
.item-badge{font-size:11px;font-weight:700;line-height:1;padding:5px 9px;border-radius:99px;color:#fff;letter-spacing:.04em}
.item-badge--new{background:#1b5618;animation:newBlink 1.4s ease-in-out infinite}
.item-badge--low{background:#d98639}
.item-badge--sold{background:#7d8b84}
@media (prefers-reduced-motion:reduce){.item-badge--new{animation:none}}

/* 開催レポート: 3件を横並びのカードで */
.report-grid{margin-top:8px}
.report-item{display:flex;flex-direction:column}
.report-item .report-thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.report-item .report-meta{margin-top:16px}
.report-item .report-title{font-size:1.1rem;line-height:1.6;margin-bottom:10px}
.report-item .report-text{font-size:.92rem;line-height:1.9}
.report-item .report-voices li{font-size:.9rem;padding:8px 14px}
.report-item .cmn-btn-R{margin-top:auto}

/* 「受付中」の文字を点滅させる(背景の脈動はそのまま) */
.ws-open{animation:wsPulse 2.2s ease-in-out infinite,textBlink 1.4s ease-in-out infinite}
@keyframes textBlink{0%,100%{color:#fff}50%{color:rgba(255,255,255,.2)}}
@media (prefers-reduced-motion:reduce){.ws-open{animation:none}}

/* News product video: preserve portrait framing on every screen. */
.home-product-video{display:block;width:100%;max-width:225px;height:auto;aspect-ratio:9/16;object-fit:contain;margin:0 auto;background:#000;border-radius:8px}
@media(max-width:767px){.home-product-video{margin-top:24px}}

/* Let news expand with its content, keeping the more button in view. */
#features .news-area{height:auto;overflow:visible}
#features #js-news-more-btn-wrap{margin-top:24px}

.home-product-video-heading{text-align:center;margin:0 0 20px}