/* ひものや臼井 共通スタイル（旧サイトの配色を踏襲） */
:root{
  --teal:#006666; --red:#cc334c; --plum:#880066; --navy:#003366;
  --butter:#ffe599; --brown:#993300; --wine:#660000; --notice:#ffffcc;
  --ink:#222; --paper:#fff; --line:#e3dcc4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  font-size:15px;line-height:1.75}
img{max-width:100%;height:auto;vertical-align:top}
a{color:var(--navy)}
a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.wrap{max-width:828px;margin:0 auto;padding:0 12px}

/* ヘッダー */
.site-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:6px}
.site-head .logo img{width:260px}
.gnav{display:flex;flex-wrap:wrap;gap:3px;margin:0;padding:0;list-style:none}
.gnav a{display:block;color:#fff;text-decoration:none;font-size:13px;padding:5px 14px;background:var(--plum)}
.gnav a.n-menu{background:var(--teal)}
.gnav a.n-top{background:#555}
.gnav a[aria-current]{box-shadow:inset 0 -4px 0 rgba(255,255,255,.55)}

/* ページタイトル帯（旧タイトル画像を再現） */
.titlebar{margin:6px 0 0;color:#fff;padding:6px 12px;border-top:4px solid rgba(0,0,0,.25);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.titlebar h1{margin:0;font-size:22px;font-weight:normal;letter-spacing:.05em}
.titlebar span{font-size:12px}
.t-teal{background:var(--teal)} .t-red{background:var(--red)} .t-plum{background:var(--plum)} .t-gray{background:#999}

/* 本文 */
.lead{color:var(--wine);margin:22px 0 10px;padding:0 6px}
.note{font-size:13px;margin:0 0 28px;padding:0 6px}
.note strong{color:#ff6699}
.callout{background:var(--navy);color:#fff;padding:14px 20px;margin:0 0 34px;box-shadow:0 6px 0 #d8d8d8}
.callout h2{margin:0 0 4px;font-size:15px}
.callout p{margin:0}
.callout a{color:#fff}
.tel{font-size:18px;letter-spacing:.04em;white-space:nowrap}
.tel a{text-decoration:none}

/* お品書きテーブル */
.tab{margin:34px 0 0}
.tab img{display:block}
.menu{width:100%;max-width:680px;border-collapse:collapse;font-size:14px}
.menu td{border-top:1px solid #fff;padding:7px;vertical-align:top}
.menu td.ph{background:var(--teal);width:166px}
.menu td.nm{background:var(--teal);color:#fff;border-left:1px solid #fff}
.menu td.cl,.menu td.pr{background:var(--butter);color:var(--brown);text-align:right;border-left:1px solid #fff;white-space:nowrap}
.menu td.cl{width:96px}
.menu td.pr{width:150px;letter-spacing:.05em}
.menu tbody+tbody td{border-top:3px solid #fff}
.st{display:inline-block;margin-top:4px;font-size:12px;color:#cc0000;background:#ffcccc;padding:1px 10px;line-height:1.7}

/* つめあわせ */
.sets-head{margin:56px 0 0}
.sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin:22px 0 10px}
.set h3{margin:10px 0 2px;color:var(--red);font-size:18px;font-weight:normal;border-bottom:1px solid var(--red)}
.set h4{margin:6px 0;font-size:13px;color:#666;font-weight:normal}
.set table{border-collapse:collapse;width:100%;font-size:14px}
.set td{padding:4px 8px;background:#fdeef0;border-bottom:2px solid #fff}
.set td+td{text-align:right;width:6em}

/* ご注文方法・店舗 */
.sec{margin:30px 0}
.sec>h2{background:#333;color:#fff;font-size:16px;font-weight:normal;padding:3px 10px;margin:0 0 12px}
.sec p,.sec ul{margin:0 0 10px;padding-left:6px}
.sec ul{padding-left:1.4em}
.box{border:1px solid var(--plum);padding:14px 18px;margin:0 0 12px}
.box .tel{font-size:22px}
.data{border-collapse:collapse;width:100%;font-size:14px}
.data th,.data td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.data th{background:#f6f2e4;width:11em;font-weight:normal}
.scroll{overflow-x:auto}
.shop{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.shop img{width:241px;flex:none}
.shop p{margin:0;flex:1 1 220px}
.map{background:#ececec;padding:8px;text-align:center;margin:30px 0}

/* トップ */
.top-hero{display:grid;grid-template-columns:523fr 305fr;margin-top:10px}
.top-hero .illust img{width:100%;display:block}
.top-side{display:flex;flex-direction:column}
.top-side .bigbtn,.top-side .smallbtns{flex:1 1 auto}
.top-side .smallbtns a{display:flex;align-items:center;justify-content:center}
.top-side .photo{width:100%}
.bigbtn{display:flex;flex-direction:column;justify-content:center;color:#fff;text-decoration:none;padding:6px 16px;font-size:18px;letter-spacing:.06em;border-top:1px solid #fff}
.bigbtn small{display:block;font-size:12px;letter-spacing:0}
.bigbtn.b-menu{background:var(--teal)}
.bigbtn.b-order{background:var(--red)}
.smallbtns{display:flex;border-top:1px solid #fff}
.smallbtns a{flex:1;background:var(--plum);color:#fff;text-decoration:none;text-align:center;padding:5px;font-size:14px}
.credit{text-align:right;font-size:12px;padding:8px 4px}
.notice{background:var(--notice);margin-bottom:10px}
.notice h2{margin:0;background:#cc0000;color:#fff;font-size:14px;font-weight:normal;letter-spacing:.2em;padding:6px 10px}
.notice ul{margin:0;padding:18px 20px 18px 40px}

/* フッター */
.site-foot{margin-top:50px;border-top:1px solid #ccc;padding:10px 0 30px;font-size:12px;color:#555}

@media (max-width:600px){
  .top-hero{grid-template-columns:1fr}
  .top-side{order:-1}
  body{font-size:14px}
  .menu,.menu tbody,.menu tr,.menu td{display:block;width:auto}
  .menu tr{display:grid;grid-template-columns:1fr 5.5em 8.5em}
  .menu td.ph{grid-column:1/-1;text-align:center;width:auto}
  .menu td.cl,.menu td.pr{white-space:normal}
  .menu td.ph:empty{display:none}
  .menu td.cl{width:auto}
  .menu td.pr{width:auto}
  .data th{width:7.5em}
  .site-head .logo img{width:210px}
}