@charset "UTF-8";
/* 商品詳細ページ専用。TOPのCSSとは独立しています。 */
:root { --pd-ink:#211815; --pd-blue:#536b7d; --pd-paper:#f2f2f2; --pd-line:#536b7d55; }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; color:var(--pd-ink); background:var(--pd-paper); font-family:"dnp-shuei-gothic-gin-std","Yu Gothic",Meiryo,sans-serif; font-weight:400; line-height:1.95; letter-spacing:.035em; }
/* 共通素材がある本体フォルダへ移した際に、和紙を読み込みます。 */
body { background-image:linear-gradient(#f2f2f2d9,#f2f2f2d9),url("../images/common/bg-texture.svg"); background-size:auto,320px auto; background-repeat:no-repeat,repeat; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
figure,p,h1,h2,h3,ul,dl,dd { margin:0; }
ul { list-style:none; padding:0; }
a:focus-visible { outline:3px solid var(--pd-blue); outline-offset:6px; }
main h1,main h2,main h3 { font-weight:600; }
main h2 { font-size:clamp(27px,2.7vw,38px); line-height:1.65; letter-spacing:.055em; }
main h3 { font-size:21px; line-height:1.7; }
p+p { margin-top:20px; }
.pd-container { width:min(100% - 80px,1160px); margin-inline:auto; }
.pd-section { padding-block:110px; }
.pd-eyebrow { color:var(--pd-blue); font-size:14px; letter-spacing:.075em; margin-bottom:18px; }
.pd-small { font-size:13px; line-height:1.85; }
.pd-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:92px; padding:14px max(32px,calc((100% - 1400px)/2)); border-bottom:1px solid var(--pd-line); background:#f2f2f2f5; }
.pd-brand { display:inline-flex; flex-direction:column; font-size:25px; font-weight:600; line-height:1.55; letter-spacing:.08em; }
.pd-brand span { font-size:10px; font-weight:400; letter-spacing:.15em; text-align:center; }
.pd-header nav { display:flex; align-items:center; gap:32px; font-size:14px; }
.pd-header nav a:hover { color:var(--pd-blue); }
.pd-header__shop { border-bottom:1px solid var(--pd-blue); padding-block:10px; }
.pd-header__shop span { margin-left:20px; }
.pd-breadcrumb { width:min(100% - 80px,1400px); margin:24px auto 30px; display:flex; gap:15px; font-size:12px; }
.pd-breadcrumb a { color:var(--pd-blue); }
.pd-hero { width:min(100% - 80px,1400px); margin-inline:auto; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:70px; padding-bottom:70px; }
.pd-hero__photo { position:relative; }
.pd-hero__photo::after { content:""; position:absolute; inset:16px -16px -16px 16px; border:1px solid var(--pd-blue); z-index:-1; }
.pd-hero__photo img { width:100%; aspect-ratio:1/1.04; object-fit:cover; }
.pd-title-row { position:relative; padding-right:85px; }
main h1 { font-size:clamp(28px,3vw,43px); letter-spacing:.025em; white-space:nowrap; line-height:1.5; }
.pd-stamp { position:absolute; right:0; top:-9px; display:grid; place-content:center; width:74px; height:90px; border:1px solid var(--pd-blue); border-radius:48% 52% 47% 53%; color:var(--pd-blue); font-size:11px; line-height:1.65; text-align:center; transform:rotate(7deg); }
.pd-stamp strong { font-size:13px; }
.pd-hero__lead { margin-top:35px; margin-bottom:22px; font-size:25px; line-height:1.7; }
.pd-hero__copy > p:not([class]) { font-size:15px; }
.pd-tags { display:flex; flex-wrap:wrap; gap:8px; margin-block:25px; }
.pd-tags li { padding:2px 10px; border:1px solid var(--pd-line); color:var(--pd-blue); font-size:12px; }
.pd-button { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:60px; padding:14px 24px; background:var(--pd-blue); border:1px solid var(--pd-blue); color:#fff; font-size:15px; transition:background-color .2s,color .2s; }
.pd-button:hover { background:#fff; color:var(--pd-blue); }
.pd-hero .pd-button { max-width:360px; margin-bottom:12px; }
.pd-index { display:flex; flex-wrap:wrap; justify-content:center; gap:0; padding:25px 20px; border-block:1px solid var(--pd-line); }
.pd-index a { padding:3px 32px; color:var(--pd-blue); font-size:14px; border-right:1px solid var(--pd-line); }
.pd-index a:last-child { border:0; }
.pd-index a:hover { text-decoration:underline; text-underline-offset:6px; }
.pd-about { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.pd-about h2 { margin-bottom:30px; }
.pd-text-link { display:inline-flex; justify-content:space-between; align-items:center; gap:35px; border-bottom:1px solid var(--pd-blue); color:var(--pd-blue); padding-block:10px; margin-top:24px; font-size:14px; }
.pd-text-link:hover { opacity:.7; }
.pd-framed img { aspect-ratio:1/1.07; object-fit:cover; width:100%; }
figcaption { color:var(--pd-blue); font-size:12px; margin-top:15px; }
.pd-information { background:#e4eaee; }
.pd-section-heading { margin-bottom:55px; text-align:center; }
.pd-info-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:80px; }
.pd-spec > div { display:grid; grid-template-columns:105px 1fr; gap:20px; padding:19px 0; border-bottom:1px solid var(--pd-line); font-size:15px; }
.pd-spec > div:first-child { border-top:1px solid var(--pd-line); }
.pd-spec dt { font-weight:600; color:var(--pd-blue); }
.pd-spec small { font-size:12px; }
.pd-nutrition { border:1px solid var(--pd-blue); padding:30px; align-self:start; }
.pd-nutrition .pd-eyebrow { margin-bottom:5px; }
.pd-nutrition h3 { margin-bottom:24px; font-size:18px; }
.pd-nutrition dl > div { display:flex; justify-content:space-between; align-items:center; gap:15px; padding-block:14px; border-top:1px solid var(--pd-line); }
.pd-nutrition dt { font-size:14px; }
.pd-nutrition dd { color:var(--pd-blue); font-size:14px; }
.pd-nutrition strong { font-size:32px; font-weight:400; line-height:1; }
.pd-nutrition .pd-small { margin-top:18px; font-size:11px; }
.pd-note { border-top:1px solid var(--pd-line); padding-top:20px; margin-top:40px; font-size:14px; }
.pd-howto__grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.pd-howto__photo img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.pd-steps article { display:flex; gap:23px; padding-block:25px; border-top:1px solid var(--pd-line); }
.pd-steps article > span { color:var(--pd-blue); font-size:25px; line-height:1.6; }
.pd-steps h3 { font-size:20px; margin-bottom:12px; }
.pd-steps article p { font-size:15px; }
.pd-steps > .pd-small { margin-top:15px; }
.pd-arrange { background:#e4eaee66; border-block:1px solid var(--pd-line); }
.pd-arrange__grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.pd-arrange__grid img { width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:26px; }
.pd-arrange__grid .pd-eyebrow { margin-bottom:10px; }
.pd-arrange__grid h3 { margin-bottom:15px; }
.pd-arrange__grid article > p:last-child { font-size:15px; }
.pd-arrange__caption { margin-top:32px; color:var(--pd-blue); }
.pd-order__grid { display:grid; grid-template-columns:1fr 1.15fr; gap:85px; align-items:center; }
.pd-order__visual { position:relative; padding:25px 35px 100px 0; }
.pd-order__portion { width:100%; }
.pd-order__visual > p { text-align:center; color:var(--pd-blue); font-size:17px; margin-top:20px; }
.pd-order__visual > p span { font-size:13px; }
.pd-order__dog { position:absolute; right:-12px; bottom:-10px; width:110px; }
.pd-sets article { padding-block:30px; border-top:1px solid var(--pd-blue); }
.pd-sets article:last-child { border-bottom:1px solid var(--pd-blue); }
.pd-sets .pd-eyebrow { margin-bottom:12px; }
.pd-set-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.pd-set-heading h3 { font-size:24px; }
.pd-set-heading small { font-size:13px; font-weight:400; display:block; }
.pd-set-heading > p { font-size:32px; color:var(--pd-blue); }
.pd-set-heading > p span { font-size:15px; margin-left:4px; }
.pd-sets .pd-small { margin-block:12px 20px; }
.pd-delivery { margin-top:70px; border-top:1px solid var(--pd-line); padding-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.pd-delivery h3 { color:var(--pd-blue); font-size:16px; margin-bottom:12px; }
.pd-delivery p { font-size:14px; }
.pd-contact { padding:55px 24px; text-align:center; border-top:1px solid var(--pd-line); }
.pd-contact .pd-text-link { min-width:210px; margin-top:15px; }
.pd-footer { padding:55px max(32px,calc((100% - 1400px)/2)) 25px; background:var(--pd-blue); color:#fff; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:center; }
.pd-footer nav { display:flex; flex-wrap:wrap; gap:25px; font-size:13px; }
.pd-footer > small { flex-basis:100%; font-size:11px; margin-top:15px; }
.sp-only { display:none; }
@media (max-width:1050px) { .pd-hero { gap:35px; } .pd-hero h1 { font-size:31px; } .pd-title-row { padding-right:70px; } .pd-stamp { width:63px; height:80px; } .pd-about,.pd-howto__grid,.pd-info-grid,.pd-order__grid { gap:45px; } .pd-index a { padding-inline:20px; } }
@media (max-width:767px) {
 html { scroll-padding-top:90px; } body { font-size:15px; letter-spacing:.025em; }
 .pd-header { min-height:78px; padding:14px 20px; gap:15px; } .pd-brand { font-size:20px; } .pd-brand span { font-size:9px; }
 .pd-header nav { gap:0; font-size:11px; } .pd-header nav > a:first-child { display:none; } .pd-header__shop span { margin-left:6px; }
 .pd-container,.pd-hero,.pd-breadcrumb { width:calc(100% - 40px); } .pd-section { padding-block:65px; }
 .pd-breadcrumb { margin-block:18px 24px; font-size:11px; }
 .pd-hero { grid-template-columns:1fr; gap:45px; padding-bottom:40px; }
 .pd-hero__photo { margin-right:10px; } .pd-hero__photo img { aspect-ratio:4/3; } .pd-hero__photo::after { inset:10px -10px -10px 10px; }
 .pd-hero h1 { font-size:clamp(25px,7vw,35px); } .pd-title-row { padding-right:75px; } .pd-stamp { top:-12px; }
 .pd-eyebrow { font-size:12px; margin-bottom:14px; } .pd-hero__lead { font-size:23px; margin-top:30px; }
 .pd-hero__copy > p:not([class]) { font-size:14px; } .pd-hero .pd-button { max-width:none; }
 .pd-index { gap:12px 0; padding:20px 10px; } .pd-index a { font-size:12px; padding:0 13px; }
 .pd-about,.pd-info-grid,.pd-howto__grid,.pd-arrange__grid,.pd-order__grid { grid-template-columns:1fr; gap:35px; }
 .pd-about h2 { margin-bottom:23px; } .pd-framed img { aspect-ratio:4/3; }
 .pd-text-link { font-size:13px; gap:20px; } .pd-section-heading { margin-bottom:35px; } h2 { font-size:27px; }
 .pd-spec > div { grid-template-columns:77px 1fr; gap:16px; font-size:14px; padding-block:16px; } .pd-nutrition { padding:24px; }
 .pd-note { font-size:13px; margin-top:30px; } .pd-howto__photo img { aspect-ratio:4/3; }
 .pd-steps h3 { font-size:18px; } .pd-steps article { gap:18px; padding-block:22px; } .pd-steps article p { font-size:14px; }
 .pd-arrange__grid { gap:40px; } .pd-arrange__grid h3 { font-size:19px; } .pd-arrange__caption { font-size:11px; }
 .pd-order__visual { max-width:380px; margin:auto; padding:5px 35px 40px 0; } .pd-order__dog { width:90px; bottom:0; right:0; }
 .pd-set-heading h3 { font-size:22px; } .pd-set-heading > p { font-size:29px; } .pd-button { padding-inline:18px; font-size:14px; }
 .pd-delivery { grid-template-columns:1fr; gap:25px; margin-top:40px; } .pd-contact { font-size:14px; }
 .pd-footer { padding:40px 20px 22px; gap:25px; } .pd-footer nav { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:15px; font-size:12px; }
 .pc-only { display:none; } .sp-only { display:block; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .pd-button { transition:none; } }

/* 写真付き3ステップ */
.pd-serving-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:55px; margin:0; padding:0; list-style:none; }
.pd-serving-steps li { position:relative; min-width:0; }
.pd-serving-steps li:not(:last-child)::after { content:"→"; position:absolute; right:-38px; top:48%; color:var(--pd-blue); font-size:25px; }
.pd-serving-steps__heading { display:flex; gap:20px; align-items:flex-start; }
.pd-serving-steps__heading > span { font-size:32px; color:var(--pd-blue); font-weight:400; line-height:1.4; }
.pd-serving-steps__heading h3 { font-size:18px; }
.pd-serving-steps img { width:100%; height:230px; object-fit:contain; margin-block:15px; }
.pd-serving-steps li > p { font-size:14px; }
.pd-serving-note { text-align:center; margin-top:35px; color:var(--pd-blue); }
.pd-storage { display:grid; grid-template-columns:200px 1fr; gap:30px; align-items:center; border-top:1px solid var(--pd-line); padding-top:30px; margin-top:45px; }
.pd-storage img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.pd-storage h3 { margin-bottom:10px; }
.pd-storage p:not([class]) { font-size:14px; }
.pd-storage .pd-eyebrow { margin-bottom:6px; }
@media(max-width:767px) {
 .pd-serving-steps { grid-template-columns:1fr; gap:48px; }
 .pd-serving-steps li { max-width:370px; width:100%; margin-inline:auto; }
 .pd-serving-steps li:not(:last-child)::after { content:"↓"; top:auto; bottom:-41px; right:calc(50% - 10px); }
 .pd-serving-steps img { height:200px; margin-block:8px; }
 .pd-serving-note { text-align:left; }
 .pd-storage { grid-template-columns:1fr; gap:22px; }
 .pd-storage img { max-width:370px; margin-inline:auto; }
}

/* 器と6個入りパックを全体表示 */
.pd-hero__photo img { aspect-ratio:auto; height:auto; object-fit:contain; }

/* バッジ：改行タグによる余白をなくし、3行を中央へ */
.pd-stamp {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  padding:8px;
  line-height:1.4;
  width:86px;
  height:96px;
}
.pd-stamp > span,.pd-stamp > strong { display:block; margin:0; white-space:nowrap; }
.pd-title-row { padding-right:105px; }
/* 6個入り商品の左下に添えるキューブ */
.pd-order__cube {
  position:absolute;
  left:-20px;
  bottom:0;
  width:110px;
  height:auto;
  pointer-events:none;
  animation:pd-cube-sway 2.8s ease-in-out infinite;
  transform-origin:50% 75%;
}
@keyframes pd-cube-sway {
  0%,100% { transform:translateY(0) rotate(-5deg); }
  50% { transform:translateY(-7px) rotate(5deg); }
}
@media(max-width:767px) {
  .pd-stamp { width:68px; height:80px; font-size:10px; gap:2px; }
  .pd-stamp strong { font-size:11px; }
  .pd-title-row { padding-right:78px; }
  .pd-order__cube { left:-5px; bottom:0; width:75px; }
}
@media(prefers-reduced-motion:reduce) {
  .pd-order__cube { animation:none; }
}

/* TOPのヘッダー・フッターはstyle.cssの見た目を使用 */
.header,.footer { font-family:var(--font-base,"dnp-shuei-gothic-gin-std",sans-serif); font-weight:600; line-height:1.8; }
.header a,.footer a { color:inherit; }
.header .header__cta { color:#fff; }
/* 下層本文の見出しサイズがフッターへ影響しないようにする */
.footer .footer__copyright { font-weight:600; }
/* 見出しのすぐ右に、丸いバッジを添える */
.pd-title-row { display:flex; align-items:center; gap:22px; padding-right:0; }
.pd-title-row .pd-stamp { position:relative; inset:auto; flex:0 0 88px; width:88px; height:88px; border-radius:50%; padding:8px; }
@media(max-width:767px) {
 .pd-title-row { gap:12px; }
 .pd-title-row h1 { font-size:clamp(23px,6.2vw,32px); }
 .pd-title-row .pd-stamp { flex-basis:65px; width:65px; height:65px; }
}