@charset "UTF-8";

/* ========= Tokens ========= */
:root{
  --firstViewSlideHeight: 100vh;
  --topNewsHeight: 70px;
  --ink: #333;
  --bg: #F9F5F0;
  --card: #fff;
  --accent: #C94F4F;
  --border: #eadfda;
  --muted: #666;
  --head: "Yu Mincho","Hiragino Mincho ProN",serif;
  --body: "Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
}

/* ========= Base ========= */
html,body{margin:0;padding:0}
body{ font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.75; }
.section{ padding:3rem 1rem; max-width:1200px; margin:0 auto; }
.section-title,.c-sectionTitle{
  font-family:var(--head); font-size:1.8rem; color:var(--accent);
  text-align:center; margin:0 0 1.5rem;
}
.section-description{
  background: rgba(255,255,255,.8); border-left:4px solid var(--accent); padding:1.5rem; margin:0 auto 2rem;
  font-size:1rem; line-height:1.9; color:#5A4A42; max-width:800px; font-family:var(--head);
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}

/* ========= A11y & Motion ========= */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ========= Scroll fade ========= */
.scroll-fade{ opacity:0; transform: translateY(40px); transition: opacity .8s, transform .8s; will-change: opacity, transform; }
.scroll-fade.is-visible{ opacity:1; transform:none; }

/* ========= Global Nav ========= */
.top-nav{ position:sticky; top:0; z-index:1000; background:rgba(249,245,240,.95); border-bottom:1px solid rgba(0,0,0,.05); backdrop-filter: blur(6px); }
.c-globalNavWrapper{ position:relative; overflow:hidden; }
.c-globalNav{ display:flex; gap:1rem; padding:.75rem 1rem; margin:0; list-style:none; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; white-space:nowrap; }
.c-globalNav li{ scroll-snap-align:start; flex:0 0 auto; }
.c-globalNav a{
  display:inline-block; padding:.5rem .9rem; border-radius:999px; text-decoration:none;
  color:#333; background:rgba(255,255,255,.9); border:1px solid #e5ddd7;
  transition:background-color .2s, color .2s, box-shadow .2s;
}
.c-globalNav a:hover{ background:#fff; color:var(--accent); }
.c-globalNav a[aria-current="page"]{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 3px 10px rgba(201,79,79,.18); }

@media (max-width:768px){
  .c-globalNav{ gap:.6rem; padding:.35rem .6rem; }
  .c-globalNav a{ font-size:.9rem; padding:.36rem .78rem; }
}

/* ========= HERO ========= */
.yuuwa-hero{ position:relative; min-height:86vh; overflow:hidden; }
.yuuwa-hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.yuuwa-hero__overlay{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.35) 65%, rgba(0,0,0,.55)); }
.yuuwa-hero__content{
  position:absolute; left:50%; bottom:max(3%, env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:.9rem; text-align:center; color:#fff; width:100%; padding:0 1rem;
}
.yuuwa-hero__title{
  margin:0 0 .5rem; font-family:var(--head); font-weight:800;
  font-size:clamp(24px, 4vw, 42px); line-height:1.2; letter-spacing:.08em;
  text-shadow:0 2px 4px rgba(0,0,0,.35);
}
.yuuwa-hero__sub{
  margin:0 0 .6rem; font-family:var(--head);
  font-size:clamp(14px, 1.6vw, 18px); line-height:1.6; opacity:.95;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.yuuwa-btn--glass{
  padding:.9rem 1.4rem; border-radius:16px; color:#fff;
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease, background .2s ease;
}
.yuuwa-btn--glass:hover{ transform:translateY(-1px); background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.12)); }

/* Scroll hint */
.y-scrollhint{
  position:absolute; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:.35rem .6rem; border-radius:999px;
  background:rgba(0,0,0,.28); color:#fff; text-decoration:none; opacity:.95; z-index:2; backdrop-filter:saturate(1.1) blur(2px);
}
.y-scrollhint:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.y-scrollhint__txt{ font-size:.85rem; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.y-scrollhint__chev{ font-size:1.4rem; line-height:1; animation:y-bounce 1.6s ease-in-out infinite; text-shadow:0 1px 2px rgba(0,0,0,.35); }
@keyframes y-bounce{ 0%,100%{ transform:translateY(0); opacity:.95;} 50%{ transform:translateY(6px); opacity:.7;} }
@media (prefers-reduced-motion: reduce){ .y-scrollhint__chev{ animation:none; } }
@media (max-width:768px){ .yuuwa-hero__title{ font-size:clamp(20px, 6vw, 28px); } .yuuwa-hero__sub{ font-size:clamp(13px, 4vw, 15px); } }

/* ========= CTA / 安心ストリップ ========= */
.y-hero-cta{ --bg:#F9F5F0; --ink:#333; --accent:#C94F4F; --card:#fff; background:var(--bg); padding:1.2rem 0 1rem; border-bottom:1px solid #eee; }
.l-content{ max-width:1200px; margin:0 auto; padding:0 1rem; }
.y-cta-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:.8rem 0 1rem; }
.y-cta{
  display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:92px;
  border-radius:14px; background:var(--card); border:1px solid var(--border); text-decoration:none; color:#222;
  box-shadow:0 2px 8px rgba(0,0,0,.04); transition:.2s ease;
}
.y-cta:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.06); }
.y-cta__eyebrow{ font-size:.78rem; color:var(--accent); letter-spacing:.05em; }
.y-cta__title{ font-size:1.05rem; font-weight:700; margin-top:.2rem; }

.y-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.y-trust__item{
  display:flex; gap:.6rem; align-items:center; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:.6rem .7rem; box-shadow:0 1px 6px rgba(0,0,0,.04); cursor:pointer;
}
.y-trust__item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.y-trust__btn{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; }
.y-ico{ font-size:1.25rem; line-height:1; }

@media (max-width:1024px){ .y-cta-row{ grid-template-columns:1fr 1fr; } .y-trust{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .y-cta-row{ grid-template-columns:1fr; } .y-trust{ grid-template-columns:1fr; } .y-cta{ min-height:84px; } }

/* ========= Top News ========= */
.c-top-news{
  width:100%; min-height: var(--topNewsHeight);
  background:url("https://img21.shop-pro.jp/PA01501/743/etc_base64/pMSk3qTfutm5qaTOxbnNpc7YaGVybw.jpg") center/cover no-repeat;
  color:#fff; position:relative; z-index:2; display:flex; align-items:center; overflow-x:hidden;
}
.c-top-news::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:0; }
.c-top-news .l-content{ position:relative; z-index:1; width:100%; }
.c-top-newsList a, .c-top-newsList span{
  font-size:1rem; font-weight:500; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  color:#fff; text-decoration:none; padding:.6rem 1rem; border-left:4px solid #fff;
  background:rgba(255,255,255,.1); margin-bottom:.6rem; transition: background .3s; overflow:hidden;
}
.c-top-newsList a:hover{ background:rgba(255,255,255,.2); }
.c-top-newsListNext, .c-top-newsListPrev{
  width:44px; height:44px; position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; z-index:3;
  border:1px solid rgba(255,255,255,.6); border-radius:50%;
}
.c-top-newsListPrev{ right:56px; }
.c-top-newsListNext{ right:8px; }
.c-top-newsListNext::after, .c-top-newsListPrev::after{
  content:""; width:10px; height:10px; position:absolute; top:50%; transform:translateY(-50%);
  border-top:1px solid #fff;
}
.c-top-newsListPrev::after{ right:14px; border-left:1px solid #fff; transform: translateY(-50%) rotate(-45deg); }
.c-top-newsListNext::after{ left:14px; border-right:1px solid #fff; transform: translateY(-50%) rotate(45deg); }

@media (max-width: 768px){
  .c-top-news .l-content{ padding:0 1rem; }
  .c-top-newsList a, .c-top-newsList span{
    background:rgba(0,0,0,.5); font-size:.9rem; line-height:1.6; padding:.4rem .8rem; border-left:3px solid #fff; border-radius:4px; margin-bottom:.4rem;
  }
}

/* ========= Brand Intro ========= */
.brand-bg{ background:#f9f5f0 url("/assets/images/pattern.svg") repeat; background-size:120px 120px; }
.brand-logo{ text-align:center; margin-bottom:1.5rem; }
.brand-logo img{ max-width:220px; width:100%; height:auto; }
.brand-text{
  text-align:left; background:rgba(255,255,255,.9); padding:1.5rem; border-radius:8px;
  font-size:1rem; line-height:1.9; max-width:960px; margin:0 auto;
}

/* ========= Highlight Items ========= */
.c-highlight-block{
  margin:3rem 0; background:#fff9f5; padding:2.5rem 1rem; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.c-items{ display:flex; gap:1.2rem; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; }
.c-item{ width:200px; text-align:center; text-decoration:none; color:#333; scroll-snap-align:start; flex-shrink:0; }
.c-items-image{ position:relative; }
.c-items-image img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:8px; transition: transform .3s, box-shadow .3s; }
.c-item:hover img{ transform:scale(1.03); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.c-items-name{ margin-top:.5rem; font-size:.95rem; line-height:1.4; height:2.8em; overflow:hidden; }
.c-items-price{ color:var(--accent); font-weight:bold; font-size:.95rem; margin-top:.3rem; }
.c-rankingIndicator{
  border-radius:50%; width:1.6rem; height:1.6rem; display:flex; justify-content:center; align-items:center;
  font-size:.8rem; background:var(--accent); color:#fff; position:absolute; top:.5rem; left:.5rem; z-index:10;
}

/* ========= Season Cards ========= */
#feature-season .season-grid{ display:grid; gap:1.2rem; grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ #feature-season .season-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #feature-season .season-grid{ grid-template-columns:1fr; } }
.season-card{ background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.season-banner{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; }
.season-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.season-badge{ position:absolute; left:.8rem; top:.8rem; z-index:1; background:var(--accent); color:#fff; font-weight:700; font-size:.82rem; padding:.35rem .65rem; border-radius:999px; }
.season-cardTitle{ margin:.9rem 1rem .3rem; font-size:1.1rem; }
.season-description{ margin:0 1rem .9rem; color:#555; line-height:1.7; }
.season-cta-wrap{ margin:0 1rem 1.1rem; }
.season-cta{ display:inline-block; padding:.6rem .95rem; border-radius:10px; background:#fff; border:1px solid #ddd; text-decoration:none; font-weight:700; color:#333; }
.season-cta:hover{ border-color:#ccc; }

/* ========= Tsumami Dayori ========= */
.tb-section{ margin:2.5rem 0 0; }
.tb-head{ text-align:center; margin-bottom:1.2rem; }
.tb-box{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.25rem; margin-top:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.tb-box-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }
.tb-subtitle{ font-size:1.15rem; margin:0; }
.tb-more{ font-size:.92rem; color:var(--accent); text-decoration:none; border:1px solid #f0d9d6; padding:.35rem .6rem; border-radius:999px; }
.tb-more:hover{ background:#fff5f5; }
.tb-grid{ display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.tb-grid--single{ grid-template-columns:1fr; }
.tb-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.tb-thumb{ aspect-ratio:4/3; overflow:hidden; background:#faf7f4; }
.tb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tb-body{ padding:.8rem .9rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
.tb-name{ font-size:1.05rem; margin:0; color:var(--accent); }
.tb-desc{ margin:0; color:#444; font-size:.94rem; line-height:1.55; }
.tb-btn{ align-self:flex-start; text-decoration:none; padding:.45rem .8rem; border-radius:10px; font-weight:700; font-size:.92rem; }
.tb-btn--primary{ background:var(--accent); color:#fff; }
.tb-btn--primary:hover{ filter:brightness(.95); }
.tb-btn--ghost{ background:#fff; border:1px solid var(--border); color:#333; }
.tb-btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.tb-archive{ margin-top:1rem; }
.tb-archive__summary{ cursor:pointer; list-style:none; padding:.65rem 1rem; border:1px solid var(--border); border-radius:12px; background:#fff; }
.tb-archive__summary::marker{ content:""; }
.tb-archive[open] .tb-archive__summary{ background:#fff5f5; border-color:#f0d9d6; }

@media (max-width:768px){
  .section{ padding:2rem 1rem; }
  .c-sectionTitle{ font-size:1.5rem; }
  .tb-grid{ grid-template-columns:1fr; }
  .tb-box{ padding:1rem; }
}

/* ========= Modal ========= */
.y-modal[aria-hidden="false"]{ display:block; }
.y-modal{ position:fixed; inset:0; display:none; z-index:10000; }
.y-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.38); }
.y-modal__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,560px); background:#fff; border-radius:14px; padding:1rem 1rem 1.2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.y-modal__close{ position:absolute; right:.6rem; top:.5rem; background:none; border:none; font-size:1.4rem; cursor:pointer; }
.y-modal__list{ margin:.5rem 0 1rem; padding-left:1.1rem; line-height:1.65; }
.y-btn{ display:inline-block; padding:.6rem 1rem; border-radius:10px; background:var(--accent); color:#fff; text-decoration:none; }