/* 仕上げ（モック editorial.css + finish.css）。ページ別CSSのあとに読み込む */
/* Base design is inherited unchanged from style.css and each page. */
.cat__ico svg { width:47px; height:47px; stroke:#5c5853; stroke-width:.85; fill:#fffdfa; }
.room__hd { display:flex; align-items:center; gap:10px; }
.room-icon { width:32px; height:32px; flex:none; }
.p-card .p-card__name { font-size:11px; line-height:1.65; font-weight:400; }
.p-card__brand { font-size:10px; }
.j-card__img,.card__img,.art__hero { position:relative; container-type:inline-size; overflow:hidden; background:#e8dddF; }
.j-card__img img,.card__img img,.art__hero img { width:100%; height:100%; object-fit:cover; }
.editorial-caption { position:absolute; inset:10px 10px 10px auto; display:flex; flex-direction:row-reverse; gap:5px; align-items:flex-start; pointer-events:none; }
.editorial-caption span { writing-mode:vertical-rl; text-orientation:upright; background:#fffdf5f2; color:#544a50; padding:9px 5px; font-family:'Yu Mincho','Hiragino Mincho ProN',serif; font-weight:500; font-size:clamp(11px,4.6cqw,26px); letter-spacing:.06em; line-height:1.35; white-space:nowrap; }
.editorial-caption span:first-child { background:#816984ed; color:white; }
.seo .editorial-caption span:first-child { background:#697c61ed; }
.j-card__img .note { left:10px; bottom:10px; font-size:10px; }
.art__hero { aspect-ratio:16/9; }
.art__hero .editorial-caption { inset:20px 20px 20px auto; gap:8px; }
.art__hero .editorial-caption span { padding:14px 9px; }
@media(max-width:860px) {
 .cat__ico svg { width:38px; height:38px; }
 .p-card .p-card__name { font-size:10px; }
 .j-card { grid-template-columns:150px minmax(0,1fr); gap:12px; }
 .j-card__img { aspect-ratio:4/3; }
 .card { grid-template-columns:145px minmax(0,1fr); gap:12px; }
 .card__img { min-height:155px; }
 .editorial-caption { inset:7px 7px 7px auto; gap:3px; }
 .editorial-caption span { font-size:11px; padding:6px 3px; letter-spacing:0; }
 .art__hero .editorial-caption { inset:12px 12px 12px auto; }
 .art__hero .editorial-caption span { font-size:16px; padding:8px 5px; }
 .quick__form input { min-width:0; }
}
@media(max-width:860px) { .j-card__img .editorial-caption span { font-size:10px; } }

/* Screenshot from the actual checklist mock, captured with its sample data. */
.stock-preview { position:relative; z-index:1; margin:0; min-width:0; }
.phone.phone--capture { display:block; width:min(310px,100%); margin:0 auto; padding:0; border:8px solid #fff; border-radius:34px; overflow:hidden; background:var(--cream); }
.phone--capture img { display:block; width:100%; height:auto; }
.stock-preview figcaption { margin-top:14px; font-size:11px; line-height:1.7; text-align:center; color:#5f6b58; }
.phone--capture:focus-visible { outline:3px solid var(--clover-deep); outline-offset:5px; }
@media(max-width:860px) { .phone.phone--capture { width:min(300px,100%); } }

/* Protect the header's intrinsic widths before switching layouts. */
.header .logo,.header .logo img,.header__tools,.gnav a { flex-shrink:0; }
.header .logo,.gnav a { white-space:nowrap; }
.header__in { gap:20px; }
.header .gnav { gap:20px; margin-left:0; flex-shrink:0; }
.header__search { width:210px; min-width:0; }
.header__search input { min-width:0; }
.fv__badge { padding:12px; }
.fv__badge [data-monthly-title],.fv__badge [data-monthly-line1],.fv__badge [data-monthly-line2] { white-space:nowrap; }
.fv__badge [data-monthly-title] { font-size:.9rem; }
@media(max-width:1199px) { .header__search { display:none; } }
@media(min-width:861px) and (max-width:1023px) {
 .header__in { flex-wrap:wrap; height:auto; min-height:74px; padding-block:12px; gap:12px; }
 .header .gnav { order:3; width:100%; justify-content:center; gap:24px; font-size:.82rem; }
}
@media(max-width:860px) { .fv__badge { padding:7px; } .fv__badge [data-monthly-title] { font-size:.72rem; } }
@media(max-width:380px) {
 .header__in { gap:8px; }
 .header .logo { font-size:.95rem; gap:6px; }
 .header .logo img { width:34px; height:34px; }
 .header__tools { gap:0; }
 .header__tools .icon-btn { width:36px; }
 .fv__copy { padding:20px 14px; gap:12px; }
 .fv__catch { font-size:1.5rem; }
 .fv__lead { min-width:0; }
 .fv__cta .btn { white-space:normal; font-size:.75rem; padding:.8em 1em; }
 .sec__head { flex-wrap:wrap; gap:12px; }
 .quick__form .btn { padding-inline:16px; }
 .j-card { grid-template-columns:125px minmax(0,1fr); }
 .promo { padding-inline:16px; }
}
/* Keep the offscreen cart panel within the viewport during resize transitions. */
.drawer { overflow:hidden; }
/* Animate hover effects only, so breakpoint size changes happen immediately. */
.cat__ico { transition:background-color .3s,transform .3s; }
.btn { transition:background-color .25s,color .25s,box-shadow .25s,transform .25s; }
.icon-btn { transition:background-color .2s,color .2s; }
@media(max-width:860px) {
 .cats { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .cat { min-width:0; }
 .cat__ico { width:min(66px,100%); height:auto; aspect-ratio:1; flex:none; }
}

/* Compact article ranking, using the existing view-count order. */
.column-ranking { margin-top:32px; padding:26px 28px; background:var(--paper); border-radius:26px; }
.column-ranking__head { margin-bottom:12px; }
.column-ranking__head .en { color:var(--rose); font-size:.95rem; }
.column-ranking__head h3 { margin:2px 0 0; font-size:1.08rem; font-weight:500; }
.column-ranking__list { list-style:none; padding:0; margin:0; }
.column-ranking__list li+li { border-top:1px solid var(--beige); }
.column-ranking__link { display:grid; grid-template-columns:30px 88px minmax(0,1fr) 16px; align-items:center; gap:16px; padding:14px 0; border-radius:8px; }
.column-ranking__number { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:var(--ink-soft); font-family:var(--en); font-size:1.25rem; font-weight:500; line-height:1; }
.column-ranking__list li:nth-child(1) .column-ranking__number { background:#b39a61; color:#fff; }
.column-ranking__list li:nth-child(2) .column-ranking__number { background:#929b96; color:#fff; }
.column-ranking__list li:nth-child(3) .column-ranking__number { background:#b58f79; color:#fff; }
.column-ranking__thumb { width:88px; height:62px; object-fit:cover; border-radius:9px; }
.column-ranking__text { min-width:0; }
.column-ranking__category { display:block; font-size:10px; color:var(--ink-soft); margin-bottom:3px; }
.column-ranking__title { display:block; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.column-ranking__arrow { color:var(--clover-deep); font-size:24px; }
.column-ranking__link:hover { background:var(--cream); }
.column-ranking__link:focus-visible { outline:2px solid var(--clover-deep); outline-offset:3px; }
@media(max-width:600px) {
 .column-ranking { padding:20px 16px; }
 .column-ranking__head h3 { font-size:1rem; }
 .column-ranking__link { grid-template-columns:24px 64px minmax(0,1fr); gap:10px; padding:13px 0; }
 .column-ranking__number { width:23px; height:23px; font-size:1.1rem; }
 .column-ranking__thumb { width:64px; height:48px; border-radius:7px; }
 .column-ranking__title { font-size:12px; line-height:1.7; }
 .column-ranking__category { font-size:9px; }
 .column-ranking__arrow { display:none; }
}

/* Plain, consistent numerals for the article ranking. */
.column-ranking__number { font-family:Arial,"Helvetica Neue",sans-serif; font-style:normal; font-size:14px; font-weight:600; font-variant-numeric:lining-nums tabular-nums; letter-spacing:0; }
@media(max-width:600px) { .column-ranking__number { font-size:12px; } }

/* Home icon uses the brand clover green on every page. */
.bnav a[href="index.html"] svg { stroke:var(--clover); }

/* La plus's existing 3D robot, with a PNG fallback. */
.bot__fab { padding:5px 18px 5px 6px; }
.laplus-robot-avatar { position:relative; display:block; flex:none; width:72px; height:88px; font-style:normal; }
.bot__fab .laplus-robot-avatar img { display:block; width:100%; height:100%; object-fit:contain; border-radius:0; background:none; padding:0; }
.laplus-robot-avatar .idea-bot-3d { display:block; width:100%; height:100%; }
.laplus-robot-avatar.has-3d img,.laplus-character.has-3d img { display:none; }
.laplus-character { width:min(260px,100%); aspect-ratio:552/720; }
.laplus-character img,.laplus-character .idea-bot-3d { width:100%; height:100%; object-fit:contain; }
@media(max-width:860px) {
 .bot__fab { padding:3px; }
 .laplus-robot-avatar { width:64px; height:78px; }
}

.bot__idle-speech { position:absolute; right:0; bottom:calc(100% + 12px); width:228px; max-width:calc(100vw - 36px); background:var(--paper); border:1px solid #d4dfcd; border-radius:18px; box-shadow:0 5px 18px #4a403810; padding:13px 30px 13px 15px; }
.bot__idle-speech::after { content:""; position:absolute; right:36px; bottom:-7px; width:12px; height:12px; background:var(--paper); border-right:1px solid #d4dfcd; border-bottom:1px solid #d4dfcd; transform:rotate(45deg); }
.bot__idle-speech p { margin:0; font-size:12px; line-height:1.8; color:var(--clover-deep); font-weight:500; overflow-wrap:anywhere; }
.bot__idle-speech button { position:absolute; right:3px; top:3px; border:0; background:none; width:28px; height:28px; font-size:17px; color:var(--ink-soft); }
.bot.is-open .bot__idle-speech { display:none; }
@media(max-width:860px) { .bot__idle-speech { width:204px; bottom:calc(100% + 9px); } }
/* Keep the seasonal introduction's paragraph styling out of product cards. */
.p-card .p-card__brand { margin:0 0 4px; font-size:9px; line-height:1.5; font-weight:400; color:var(--ink-soft); }
.p-card__foot { gap:6px; flex-wrap:wrap; }
.p-card__price { display:inline-flex; align-items:baseline; white-space:nowrap; }
.p-card__price small { white-space:nowrap; }
.p-card__foot .btn-cart { flex-shrink:0; margin-left:auto; }
@media(max-width:860px) {
 .p-card__body { padding:12px 10px; }
 .scroll-x { grid-auto-columns:minmax(145px,46%); }
 .p-card__price { font-size:.95rem; }
 .p-card__price small { font-size:9px; }
 .p-card__foot .btn-cart { width:34px; height:34px; }
}

/* 商品名と画像は同じSKUの商品詳細へ。 */
.p-card__name a { color: inherit; text-decoration: none; }
.p-card__name a:hover { text-decoration: underline; }
.p-card__no-image { display: grid; place-items: center; width: 100%; aspect-ratio: 1; color: #80796d; font-size: 12px; }
/* 商品リンクと代替テキストを追加してもグリッドの最小幅を押し広げない。 */
.season__box > *, .p-card, .p-card__img, .p-card__body { min-width: 0; }
.p-card__name { overflow-wrap: anywhere; }
/* Final refinement: the approved cream, sage and rounded shapes remain the base. */
:root {
  --ink: #49433a;
  --ink-soft: #756e63;
  --shadow: 0 12px 32px rgba(67,57,39,.055);
  --heading: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
html { scroll-padding-top: 98px; }
::selection { background: #dbe5d2; color: #354c31; }
:focus-visible { outline: 2px solid #557d50; outline-offset: 5px; }
.skip-link { position: fixed; z-index: 150; top: 10px; left: 16px; padding: 10px 18px; border-radius: 8px; background: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.notice { margin: 0; font-size: 11px; letter-spacing: .08em; padding-block: 8px; }
.header { background: rgba(250,246,238,.96); border-bottom-color: #e7e1d6; }
.header__search { transition: border-color .2s, box-shadow .2s; }
.header__search:focus-within { border-color: var(--clover-deep); box-shadow: 0 0 0 3px #dfe8d677; }
.header__search input:focus-visible { outline: none; }
.btn { font-weight: 500; }
.btn--primary { background: #55764e; box-shadow: 0 4px 12px #55764e12; }
.btn--primary:hover { background: #42633c; box-shadow: 0 6px 16px #55764e20; }
.btn--ghost { border-width: 1px; border-color: #a7a394; }
.fv { padding-top: 48px; }
.fv__catch { font-family: var(--heading); letter-spacing: .13em; font-weight: 500; line-height: 1.8; }
.fv__lead .en { color: #92755e; }
.fv__lead p:not(.en) { line-height: 2.2; }
.fv__slides { animation: none; box-shadow: 0 18px 50px #74644810; }
.fv__badge { animation: none; border: 1px solid #e9e5db; box-shadow: 0 6px 20px #50453508; }
.fv__leaf { box-shadow: 0 4px 16px #5045350b; }
.fv__dots { align-items: center; gap: 2px; bottom: -34px; }
.fv__dots button { display: grid; place-items: center; width: 32px; height: 36px; background: transparent; border-radius: 6px; }
.fv__dots button::before { content: ""; display:block; width:6px; height:6px; border-radius:999px; background:#c8c5b8; transition: width .2s,background .2s; }
.fv__dots button.is-on { width:32px; border-radius:6px; background:transparent; }
.fv__dots button.is-on::before { width:20px; background:var(--clover-deep); }
.fv__dots .fv__pause { width:36px; margin-left:4px; border:1px solid #d6d9cd; border-radius:50%; color:var(--clover-deep); font:12px Arial,sans-serif; }
.fv__dots .fv__pause::before { content:none; }
.quick__box { border:1px solid #ebe5da; box-shadow:0 10px 28px #544b3b05; }
.quick__label { font-weight:500; }
.quick__tags a { background:#f3eee4; }
.sec__head { margin-bottom:30px; }
.sec__title { font-family:var(--heading); font-weight:500; letter-spacing:.055em; }
.sec__title .en { font-size:15px; color:#947b66; margin-bottom:8px; }
.sec__more { font-size:12px; border-color:#b8bbaa; padding-bottom:5px; transition:color .2s; }
.sec__more:hover { color:var(--clover-deep); }
.cat__ico { border:1px solid #ece6da; box-shadow:none; }
.cat { color:#625d53; }
.season__box { background:#eee8dc; gap:32px; }
.season__txt > h3 { font-family:var(--heading); font-size:clamp(18px,1.8vw,23px); line-height:1.85; }
.season__txt > p { font-size:12px; line-height:1.9; }
.season__intro .tag { letter-spacing:.06em; color:#786c59; border:1px solid #ece6da; }
.season__chips button { border-width:1px; padding:7px 16px; font-size:11px; }
.season__chips button.is-on { background:#5b6651; border-color:#5b6651; }
.p-card { border:1px solid #eee9df; box-shadow:none; transition:box-shadow .25s,transform .25s,border-color .25s; }
.p-card:hover { transform:translateY(-3px); border-color:#d7dece; box-shadow:0 8px 24px #49433a08; }
.p-card__body { gap:0; }
.p-card__price { font-family:Arial,"Hiragino Sans",sans-serif; letter-spacing:.015em; }
.p-card__badge { font-size:10px; font-weight:500; padding:4px 10px; }
.p-card__foot { padding-top:6px; }
.p-card:focus-within { border-color:#90a285; }
.p-card__name a:focus-visible { outline-offset:-1px; }
.rank .p-card::before { display:grid; place-items:center; min-width:28px; height:28px; padding-inline:6px; top:10px; right:10px; border:1px solid #e5dfd1; border-radius:50%; background:#fffdf8f5; color:#766b52; font:500 13px Arial,sans-serif; }
.promo { background:#e0e8d8; box-shadow:inset 0 0 0 1px #d6e0cd; }
.promo h2,.concept h2 { font-family:var(--heading); line-height:1.85; }
.phone.phone--capture { box-shadow:0 18px 42px #46563c12; }
.j-card__img { border:1px solid #e7e0d7; }
.j-card__cat { color:#7b836c; font-size:11px; letter-spacing:.06em; }
.j-card__ttl { line-height:1.85; }
.j-card__meta { font-size:10px; color:#81796d; }
.column-ranking { border:1px solid #ebe5db; box-shadow:none; }
.column-ranking__head { display:flex; align-items:baseline; gap:16px; padding-bottom:12px; border-bottom:1px solid #eee8de; }
.column-ranking__head .en { color:#947b66; }
.column-ranking__head h3 { font-family:var(--heading); }
.column-ranking__link { transition:background-color .2s; }
.concept { padding-block:110px; }
.concept p { font-size:13px; line-height:2.2; }
.footer { background:#454a3f; }
.footer .logo small { color:#c8d0bd; }
.footer ul a:hover { text-decoration:underline; text-underline-offset:4px; }
.bnav { padding-bottom:env(safe-area-inset-bottom,0px); }
.bot__idle-speech { box-shadow:0 5px 18px #4a403808; }
@media(hover:none) { .p-card:hover,.cat:hover .cat__ico { transform:none; } }
@media(min-width:861px) and (max-width:1023px) { html { scroll-padding-top:132px; } }
@media(max-width:860px) {
 html { scroll-padding-top:80px; }
 .notice { font-size:10px; padding:7px 12px; }
 .fv { padding-top:20px; }
 .fv__copy { border:1px solid #eae4d9; box-shadow:0 8px 28px #60513705; }
 .fv__dots { bottom:48px; right:20px; }
 .sec__head { margin-bottom:24px; }
 .sec__title .en { font-size:14px; margin-bottom:6px; }
 .sec__more { font-size:11px; }
 .season__box { gap:24px; padding:20px; }
 .season__txt > h3 { font-size:18px; }
 .season__txt > p { font-size:11px; }
 .p-card__img { padding:12px; }
 .p-card__badge { font-size:9px; padding:3px 8px; left:8px; top:8px; }
 .rank .p-card::before { min-width:24px; height:24px; font-size:12px; right:8px; top:8px; }
 .column-ranking__head { display:block; }
 .column-ranking__head h3 { margin-top:4px; }
 .concept { padding-block:76px; }
 .concept p { font-size:12px; }
 .footer { padding-bottom:calc(40px + env(safe-area-inset-bottom,0px)); }
}
@media(max-width:380px) {
 .season__box { padding:16px; }
 .fv__copy { margin-inline:0; }
 .sec__title { font-size:1.3rem; }
 .season__txt > h3 { font-size:16px; }
 .season__txt > h3 br { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
 .rv { opacity:1; transform:none; }
}
/* Allow the hero's text and visual columns to shrink at every breakpoint. */
.fv__in { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
.fv__in > *, .fv__lead { min-width:0; }
.fv__catch { flex-shrink:0; }
@media(max-width:860px) {
 .fv__in { grid-template-columns:minmax(0,1fr); }
 .fv__lead { flex:1; }
 .fv__cta .btn { max-width:100%; white-space:normal; padding:10px 16px; font-size:12px; }
 .fv__cta .btn--sm { font-size:10px; line-height:1.7; }
}
/* On phones, keep the greeting alongside the helper instead of above the CTA. */
@media(max-width:860px) {
 .bot__idle-speech { right:calc(100% + 9px); bottom:18px; width:190px; padding:12px 27px 12px 13px; }
 .bot__idle-speech p { font-size:11px; }
 .bot__idle-speech::after { right:-7px; bottom:20px; transform:rotate(-45deg); }
}