@charset "utf-8";

/* =========================================================
   おおぼし 公式サイト  共通スタイル
   Design: 方向A スター・ポップ ／ 動画ヒーロー案1
   ========================================================= */

:root{
  --yellow:      #FFD400;
  --yellow-dark: #E8BE00;
  --ink:         #1a1612;
  --ink-soft:    #4a423a;
  --red:         #E8362D;
  --white:       #ffffff;
  --cream:       #FFF7DA;
  --shadow:      0 10px 28px rgba(90,70,0,.18);
  --shadow-lg:   0 24px 48px rgba(90,70,0,.28);
  --radius:      24px;
  --radius-s:    16px;
  --gutter:      18px;
  --header-h:    64px;
}

@media (min-width: 900px){
  :root{ --gutter: 40px; --header-h: 88px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body{
  margin:0;
  background:var(--yellow);
  color:var(--ink);
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:500;
  line-height:1.8;
  font-size:15px;
  overflow-wrap:anywhere;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:#7a5c00; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }

.disp{ font-family:"Mochiy Pop One","Hiragino Maru Gothic ProN",sans-serif; font-weight:400; line-height:1.45; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:44px; }
@media (min-width: 900px){ .section{ padding-block:72px; } }
.section--white{ background:var(--white); }
.section--ink{ background:var(--ink); color:var(--white); }
.section--cream{ background:var(--cream); }

.stars{
  background-image:radial-gradient(circle at 16px 16px, rgba(255,255,255,.35) 2.5px, transparent 3px);
  background-size:64px 64px;
}
@media (min-width: 900px){
  .stars{
    background-image:radial-gradient(circle at 20px 20px, rgba(255,255,255,.35) 3px, transparent 3.5px);
    background-size:80px 80px;
  }
}

/* ---------- section heading ---------- */
.sec-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.sec-head__ja{ font-size:26px; }
.sec-head__en{ font-size:11px; font-weight:800; letter-spacing:.2em; opacity:.65; }
@media (min-width: 900px){
  .sec-head{ gap:18px; margin-bottom:30px; }
  .sec-head__ja{ font-size:40px; }
  .sec-head__en{ font-size:13px; }
}
.section--ink .sec-head__ja{ color:var(--yellow); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:"Mochiy Pop One","Hiragino Maru Gothic ProN",sans-serif;
  padding:14px 28px; border-radius:999px; font-size:15px; line-height:1.4;
  border:3px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--ink); color:var(--yellow); }
.btn--primary:hover{ color:var(--yellow); box-shadow:0 8px 18px rgba(0,0,0,.25); }
.btn--outline{ background:var(--white); color:var(--ink); border-color:var(--ink); }
.btn--outline:hover{ color:var(--ink); box-shadow:var(--shadow); }
.btn--yellow{ background:var(--yellow); color:var(--ink); }
.btn--yellow:hover{ color:var(--ink); }
.btn--ghost{ background:rgba(255,255,255,.12); color:var(--white); border-color:var(--white); }
.btn--ghost:hover{ color:var(--white); }
@media (min-width: 900px){
  .btn{ padding:17px 34px; font-size:18px; }
}
.btn-center{ display:flex; justify-content:center; margin-top:28px; }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--ink); color:var(--white);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:var(--header-h); padding-inline:var(--gutter);
  max-width:1440px; margin-inline:auto;
}
.header__logo img{ height:34px; width:auto; }
@media (min-width: 900px){ .header__logo img{ height:52px; } }

.gnav{ display:none; }
@media (min-width: 1000px){
  .gnav{ display:flex; align-items:center; gap:26px; font-weight:800; font-size:15px; }
  .gnav a{ color:var(--white); white-space:nowrap; }
  .gnav a:hover{ color:var(--yellow); }
  .gnav .btn{ padding:11px 20px; font-size:15px; border-width:0; }
  .gnav .btn:hover{ color:var(--ink); }
}

.navtoggle{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:44px; height:44px; margin-right:-8px;
}
@media (min-width: 1000px){ .navtoggle{ display:none; } }
.navtoggle span{ display:block; width:26px; height:3px; background:var(--yellow); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.drawer{
  position:fixed; inset:var(--header-h) 0 0; z-index:99;
  background:var(--ink); color:var(--white);
  padding:24px var(--gutter) 40px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
}
.drawer[hidden]{ display:none; }
@media (min-width: 1000px){ .drawer{ display:none !important; } }
.drawer a{
  color:var(--white); font-family:"Mochiy Pop One",sans-serif; font-size:19px;
  padding:16px 4px; border-bottom:1px solid rgba(255,255,255,.15);
}
.drawer a:hover{ color:var(--yellow); }
.drawer .btn{ margin-top:20px; border-bottom:0; justify-content:center; }
body.is-locked{ overflow:hidden; }

/* ---------- marquee ---------- */
.marquee{ background:var(--ink); color:var(--yellow); padding:11px 0; overflow:hidden; }
.marquee__track{
  display:flex; width:max-content; gap:36px;
  white-space:nowrap; font-size:15px; letter-spacing:.06em;
  animation:marquee 28s linear infinite;
}
@media (min-width: 900px){ .marquee{ padding:14px 0; } .marquee__track{ gap:48px; font-size:21px; } }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; }
.hero__video{ position:relative; background:#000; overflow:hidden; }
.hero__video video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__copy{ display:flex; flex-direction:column; gap:14px; }
.hero__catch em{ font-style:normal; padding:2px 10px; border-radius:8px; }

/* --- SP: 縦動画を全画面、コピーを下部にオーバーレイ --- */
@media (max-width: 899px){
  .hero{ background:#000; }
  .hero__media{ position:relative; height:min(78svh, 620px); }
  .hero__video{ height:100%; }
  .hero::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
    background:linear-gradient(180deg, rgba(26,22,18,0) 38%, rgba(26,22,18,.9) 100%);
  }
  .hero__copy{
    position:absolute; inset:auto 0 0 0; z-index:2;
    padding:0 var(--gutter) 24px; color:var(--white); gap:12px;
  }
  .hero__logo--pc{ display:none; }
  .hero__logo--sp{ width:min(300px, 78%); filter:drop-shadow(0 4px 12px rgba(0,0,0,.55)); }
  .hero__catch{ font-size:17px; }
  .hero__catch em{ background:var(--yellow); color:var(--ink); }
  .hero__lead{ display:none; }
  .hero__actions{ display:flex; gap:10px; }
  .hero__actions .btn{ flex:1; padding:14px 0; font-size:15px; }
  .hero__actions .btn--outline{ background:rgba(255,255,255,.14); color:var(--white); border-color:var(--white); }
  .hero__badge,.hero__mascot{ display:none; }
}

/* --- PC: 2カラム（左コピー／右 縦動画） --- */
@media (min-width: 900px){
  .hero{
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px; align-items:center;
    max-width:1280px; margin-inline:auto; padding:40px var(--gutter) 36px;
  }
  .hero__copy{ order:1; gap:22px; }
  .hero__media{ order:2; position:relative; display:flex; align-items:center; justify-content:center; }
  .hero__logo--sp{ display:none; }
  .hero__logo--pc{ width:min(540px,100%); filter:drop-shadow(6px 6px 0 var(--white)); }
  .hero__catch{ font-size:29px; }
  .hero__catch em{ background:var(--ink); color:var(--yellow); }
  .hero__lead{ font-size:16px; line-height:1.95; max-width:33em; }
  .hero__actions{ display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; }
  .hero__video{
    width:min(400px,100%); aspect-ratio:9/16; border-radius:32px;
    border:6px solid var(--white); box-shadow:var(--shadow-lg);
  }
  .hero__badge{
    position:absolute; left:0; top:20px; z-index:2;
    background:var(--red); color:var(--white); width:92px; height:92px; border-radius:50%;
    display:grid; place-items:center; text-align:center; font-size:16px; line-height:1.25;
    transform:rotate(-12deg); box-shadow:0 6px 14px rgba(0,0,0,.25);
  }
  .hero__mascot{
    position:absolute; right:0; bottom:10px; z-index:2;
    width:120px; height:120px; border-radius:50%; object-fit:contain;
    background:var(--white);  /* マスコットは透過PNGなので円の地色を敷く */
    border:5px solid var(--white); box-shadow:0 8px 18px rgba(0,0,0,.2);
  }
}

/* ---------- page hero (下層) ---------- */
.phero{ background:var(--ink); color:var(--white); padding:26px 0 30px; }
.phero__ja{ font-size:26px; color:var(--yellow); }
.phero__en{ font-size:11px; font-weight:800; letter-spacing:.24em; opacity:.6; }
.phero__lead{ margin-top:10px; font-size:14px; opacity:.9; max-width:44em; }
@media (min-width: 900px){
  .phero{ padding:38px 0 44px; }
  .phero__ja{ font-size:40px; }
  .phero__en{ font-size:13px; }
  .phero__lead{ font-size:15px; }
}
.breadcrumb{ font-size:12px; padding:12px 0; opacity:.8; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:6px; }
.breadcrumb li::after{ content:"›"; margin-left:6px; opacity:.5; }
.breadcrumb li:last-child::after{ content:none; }

/* ---------- cards (共通) ---------- */
.cards{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width: 600px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media (min-width: 900px){ .cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; } }
@media (min-width: 900px){ .cards--5{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }
@media (min-width: 1120px){ .cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width: 1120px){ .cards--5{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; } }
.cards--5 .card{ padding:12px; gap:8px; }
.cards--5 .card__title{ font-size:17px; }
.cards--5 .card__text{ font-size:12.5px; line-height:1.6; }

.card{
  background:var(--white); color:var(--ink); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.card__img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-s); background:#efe6d2; }
.card__ph{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius-s); background:#efe6d2;
  display:grid; place-items:center; color:#8a7a5a; font-weight:800; font-size:13px; text-align:center;
}
.card__title{ font-size:20px; }
.card__text{ font-size:13.5px; line-height:1.7; }
.card__price{ font-size:21px; margin-top:auto; }
.card__price small{ font-size:12px; font-weight:800; }
.card__price .tax{ font-family:"M PLUS Rounded 1c",sans-serif; font-size:12px; font-weight:500; opacity:.7; margin-left:4px; }
.card__row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
a.card{ transition:transform .15s ease, box-shadow .15s ease; }

/* バッジ */
.badge{ display:inline-block; font-weight:800; font-size:11px; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.badge--pop{ background:var(--red); color:var(--white); }
.badge--new{ background:var(--ink); color:var(--yellow); }
.badge--line{ background:var(--white); color:var(--ink); border:2px solid var(--ink); padding:2px 9px; }
.badge--noodle{ background:var(--cream); color:var(--ink-soft); border:1px solid rgba(26,22,18,.2); }

/* ---------- メニュー ---------- */
.menu-note{ font-size:12.5px; line-height:1.8; opacity:.8; margin-top:16px; }
.pricelist{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.pricelist th,.pricelist td{ padding:13px 16px; border-bottom:1px solid rgba(26,22,18,.1); text-align:left; font-size:14px; }
.pricelist tr:last-child th,.pricelist tr:last-child td{ border-bottom:0; }
.pricelist th{ font-weight:800; }
.pricelist td{ text-align:right; white-space:nowrap; font-family:"Mochiy Pop One",sans-serif; font-size:17px; }
.pricelist td .tax{ font-family:"M PLUS Rounded 1c",sans-serif; font-size:12px; font-weight:500; opacity:.7; margin-left:4px; }
.section--ink .pricelist{ background:rgba(255,255,255,.06); box-shadow:none; border:1px solid rgba(255,255,255,.16); }
.section--ink .pricelist th,.section--ink .pricelist td{ border-bottom-color:rgba(255,255,255,.14); }

.topping-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (min-width: 700px){ .topping-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.topping{ text-align:center; }
.topping img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; }
.topping__name{ font-size:12.5px; font-weight:800; margin-top:8px; line-height:1.5; }
.topping__price{ font-family:"Mochiy Pop One",sans-serif; font-size:15px; }
.topping__price .tax{ font-family:"M PLUS Rounded 1c",sans-serif; font-size:11px; font-weight:500; opacity:.7; }

.menusheet{ display:grid; gap:16px; }
@media (min-width: 900px){ .menusheet{ grid-template-columns:1fr 1fr; gap:24px; } }
.menusheet a{ display:block; border-radius:var(--radius-s); overflow:hidden; box-shadow:var(--shadow); background:var(--white); }

/* ---------- 店舗 ---------- */
.shop{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:grid; gap:0;
}
.shop + .shop{ margin-top:24px; }
@media (min-width: 900px){ .shop{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.shop__photo{ width:100%; height:100%; min-height:220px; object-fit:cover; }
.shop__body{ padding:22px; display:flex; flex-direction:column; gap:12px; }
@media (min-width: 900px){ .shop__body{ padding:30px; } }
.shop__name{ font-size:24px; }
.shop__name .sub{ display:block; font-family:"M PLUS Rounded 1c",sans-serif; font-size:12px; font-weight:800; letter-spacing:.16em; opacity:.6; }
.shop__dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; }
.shop__dl dt{ font-weight:800; white-space:nowrap; color:var(--ink-soft); }
.shop__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.shop__actions .btn{ padding:11px 20px; font-size:14px; border-width:2px; }
.shop__map{ width:100%; aspect-ratio:16/9; border:0; display:block; }
@media (min-width: 900px){ .shop__map{ grid-column:1 / -1; aspect-ratio:auto; height:320px; } }

/* ---------- Q&A（こだわり） ---------- */
.qa{ display:grid; gap:14px; }
.qa__item{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; }
.qa__q{ display:flex; gap:10px; font-size:16px; align-items:flex-start; }
.qa__q::before{ content:"Q."; flex:none; color:var(--red); font-family:"Mochiy Pop One",sans-serif; }
.qa__a{ display:flex; gap:10px; margin-top:10px; font-size:14.5px; line-height:1.9; }
.qa__a::before{ content:"A."; flex:none; font-family:"Mochiy Pop One",sans-serif; color:var(--yellow-dark); }

/* ---------- お知らせ ---------- */
.newslist{ display:grid; gap:12px; }
.newsitem{
  background:var(--white); border-radius:var(--radius-s); box-shadow:var(--shadow);
  padding:16px 18px; display:grid; gap:4px;
}
.newsitem__meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.newsitem__date{ font-family:"Mochiy Pop One",sans-serif; font-size:13px; opacity:.7; }
.newsitem__title{ font-size:16px; font-weight:800; }
.newsitem__body{ font-size:14px; line-height:1.85; }
.empty{ background:var(--white); border-radius:var(--radius-s); padding:24px; text-align:center; font-weight:800; opacity:.7; }

/* ---------- 会社概要 ---------- */
.deflist{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.deflist div{ display:grid; grid-template-columns:1fr; gap:2px; padding:16px 20px; border-bottom:1px solid rgba(26,22,18,.1); }
.deflist div:last-child{ border-bottom:0; }
@media (min-width: 700px){ .deflist div{ grid-template-columns:180px 1fr; gap:16px; align-items:baseline; } }
.deflist dt{ font-weight:800; font-size:14px; color:var(--ink-soft); }
.deflist dd{ font-size:15px; }

/* ---------- 本文中のリンク ---------- */
.deflist a, .newsitem__body a, .qa__a a, .menu-note a, .phero__lead a{
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px;
}

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:var(--white); padding:32px 0 24px; }
.footer a{ color:var(--white); }
.footer a:hover{ color:var(--yellow); }
.footer__inner{ display:flex; flex-direction:column; gap:22px; }
@media (min-width: 900px){ .footer__inner{ flex-direction:row; justify-content:space-between; align-items:flex-start; } }
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand img{ height:36px; width:auto; }
.footer__brand span{ font-size:11px; opacity:.6; letter-spacing:.3em; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:14px 24px; font-size:13.5px; }
.footer__copy{ margin-top:24px; font-size:11px; opacity:.55; letter-spacing:.08em; }

.pagetop{
  position:fixed; right:14px; bottom:14px; z-index:90;
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--yellow); box-shadow:0 6px 16px rgba(0,0,0,.3);
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.pagetop.is-visible{ opacity:1; visibility:visible; }
.pagetop:hover{ color:var(--yellow); }

/* ---------- 画像の拡大表示（同じタブ内・ライトボックス） ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; overflow:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px 46px; background:rgba(0,0,0,.86);   /* 下は説明文のぶんを空ける */
  animation:lb-in .16s ease-out;
}
@keyframes lb-in{ from{ opacity:0; } to{ opacity:1; } }
.lightbox__img{
  margin:auto;                       /* はみ出しても端までスクロールできる中央寄せ */
  max-width:100%; max-height:100%;
  border-radius:var(--radius-s); background:var(--white);
  cursor:zoom-in;
}
.lightbox__img.is-fit{ cursor:default; }
.lightbox__img.is-zoomed{
  max-width:none; max-height:none;
  width:var(--lb-zoom-w, 1400px); height:auto;
  cursor:zoom-out;
}
.lightbox__close{
  position:fixed; top:12px; right:12px; z-index:1;
  width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:#000;
  font-size:24px; line-height:1; cursor:pointer;
}
.lightbox__close:hover{ background:#fff; }
.lightbox__hint{
  position:fixed; left:0; right:0; bottom:12px; z-index:1;
  text-align:center; color:#fff; font-size:12px; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.8); pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .lightbox{ animation:none; } }