/*
 * Service price board — 2026-10-08 A v2 working implementation.
 * Standalone: no normal site header/footer. Missing official images are omitted.
 */
body.kt-service-price-board-page{
  --kt-bg:var(--kt-ink-900);
  --kt-text-heading:#fff;
  --sd-gutter:88px;
  --pz-bg:#F2F4F7;
  --pz-bg2:#fff;
  --pz-ink:#0C1219;
  --pz-sub:rgba(12,18,25,.66);
  --pz-meta:rgba(12,18,25,.52);
  --pz-line:rgba(12,18,25,.12);
  --pr:var(--kt-accent-fill);
  margin:0;
  background:var(--kt-bg);
  color:#fff;
  font-family:var(--kt-font-jp);
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.kt-service-price-board-page *{box-sizing:border-box}
body.kt-service-price-board-page a{color:inherit;text-decoration:none}
body.kt-service-price-board-page img{display:block;max-width:100%}
body.kt-service-price-board-page .pr{display:inline-flex;align-items:baseline;white-space:nowrap;color:var(--pr)}
body.kt-service-price-board-page .pr b{font-family:var(--kt-font-en);font-weight:600;font-size:28px;letter-spacing:.01em;line-height:1}
body.kt-service-price-board-page .pr small{margin-left:3px;font-size:16px;font-weight:var(--kt-w-bold);line-height:1}
body.kt-service-price-board-page .pr .sx{margin-left:4px;font-size:13px;font-weight:500;color:var(--pz-meta)}
body.kt-service-price-board-page .notes{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
body.kt-service-price-board-page .notes li{position:relative;padding-left:1.2em;font-size:16px;line-height:1.85;color:var(--kt-text-55)}
body.kt-service-price-board-page .notes li::before{content:"※";position:absolute;left:0}

body.kt-service-price-board-page main.solo{position:relative;padding:40px var(--sd-gutter) 0;min-height:100vh;background:var(--kt-bg)}
body.kt-service-price-board-page .lh{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:1px solid var(--kt-line)}
body.kt-service-price-board-page .lh-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 24px}
body.kt-service-price-board-page .lh-en{display:flex;align-items:center;gap:14px;font-family:var(--kt-font-en);font-size:12px;font-weight:500;letter-spacing:.32em;color:var(--kt-accent-text)}
body.kt-service-price-board-page .lh-en::before{content:"";width:40px;height:1px;background:var(--kt-accent-base)}
body.kt-service-price-board-page .lh h1{margin:0;font-size:30px;font-weight:var(--kt-w-black);letter-spacing:.04em;color:var(--kt-text-heading);line-height:1.3}
body.kt-service-price-board-page .lh-brand img{height:30px;width:auto;filter:brightness(0) invert(1)}
body.kt-service-price-board-page .lh-brand:hover{opacity:.75}

body.kt-service-price-board-page .lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
body.kt-service-price-board-page .lc{display:flex;flex-direction:column;color:inherit;background:var(--pz-bg);min-width:0}
body.kt-service-price-board-page .lc:hover{color:inherit}
body.kt-service-price-board-page .lc:focus-visible{outline:2px solid var(--kt-accent-base);outline-offset:3px}
body.kt-service-price-board-page .lc.is-disabled{pointer-events:none;opacity:.62}
body.kt-service-price-board-page .lc-hd{position:relative;display:flex;align-items:center;height:76px;background:var(--kt-ink-800);overflow:hidden;transition:background .3s var(--kt-ease)}
body.kt-service-price-board-page .lc:hover .lc-hd{background:var(--kt-ink-700)}
body.kt-service-price-board-page .lc-tx{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:0 20px;width:64%;min-width:0}
body.kt-service-price-board-page .lc--no-photo .lc-tx{width:100%;padding-right:54px}
body.kt-service-price-board-page .lc-no{font-family:var(--kt-font-en);font-weight:300;font-size:22px;letter-spacing:.04em;color:var(--kt-accent-base);line-height:1}
body.kt-service-price-board-page .lc-nm{margin:0;font-size:20px;font-weight:var(--kt-w-bold);line-height:1.35;color:#fff}
body.kt-service-price-board-page .lc-ph{position:absolute;top:0;right:0;bottom:0;width:38%;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);overflow:hidden}
body.kt-service-price-board-page .lc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--kt-ease);transform-origin:center center}
body.kt-service-price-board-page .lc--no-photo .lc-hd::after{content:"";position:absolute;right:0;top:0;width:28%;height:100%;background:linear-gradient(145deg,transparent 48%,rgba(47,128,237,.12) 49%);pointer-events:none}

body.kt-service-price-board-page .lc-pz{flex:1;display:flex;flex-direction:column;padding:4px 20px 0;color:var(--pz-ink)}
body.kt-service-price-board-page .lr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;min-height:72px;padding:10px 0;border-bottom:1px solid var(--pz-line)}
body.kt-service-price-board-page .lr>span:first-child{min-width:0}
body.kt-service-price-board-page .lr .t{display:block;font-size:17px;font-weight:var(--kt-w-bold);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.kt-service-price-board-page .lr .s{display:block;margin-top:3px;font-size:12px;font-weight:400;line-height:1.45;letter-spacing:.04em;color:var(--pz-meta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.kt-service-price-board-page .lr .pr b{font-size:26px}
body.kt-service-price-board-page .lc-more{margin-top:auto;display:flex;align-items:center;gap:12px;padding:16px 0 18px;font-size:16px;font-weight:var(--kt-w-bold);color:var(--pz-ink)}
body.kt-service-price-board-page .lc-more .en{font-family:var(--kt-font-en);font-size:11px;font-weight:500;letter-spacing:.24em;color:var(--kt-accent-fill)}
body.kt-service-price-board-page .lc-more i{margin-left:auto;width:34px;height:1px;background:var(--kt-accent-fill);transition:width .35s var(--kt-ease)}
body.kt-service-price-board-page .lc:hover .lc-more i{width:58px}

body.kt-service-price-board-page .lf{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 40px;margin-top:28px;padding:20px 0 40px;border-top:1px solid var(--kt-line)}
body.kt-service-price-board-page .lf .notes li{font-size:13px}
body.kt-service-price-board-page .lf-back{flex:none;display:inline-flex;align-items:center;gap:14px;font-size:16px;font-weight:var(--kt-w-bold);color:var(--kt-text-heading)}
body.kt-service-price-board-page .lf-back::after{content:"";width:34px;height:1px;background:var(--kt-accent-base)}

@media (hover:hover) and (pointer:fine){body.kt-service-price-board-page .lc:hover .lc-ph img{transform:scale(1.06)}}

@media (max-width:1365px){
  body.kt-service-price-board-page .lg{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.kt-service-price-board-page .lr .t{font-size:18px}
}
@media (max-width:1199px){
  body.kt-service-price-board-page{--sd-gutter:40px}
  body.kt-service-price-board-page main.solo{padding-top:32px}
  body.kt-service-price-board-page .lg{gap:20px}
  body.kt-service-price-board-page .lc-tx{padding:0 16px;gap:12px}
  body.kt-service-price-board-page .lc-nm{font-size:18px}
  body.kt-service-price-board-page .lc-pz{padding:4px 16px 0}
  body.kt-service-price-board-page .lr .pr b{font-size:24px}
}
@media (min-width:768px) and (max-width:1023px){
  body.kt-service-price-board-page .lr{min-height:84px;gap:4px 10px}
  body.kt-service-price-board-page .lr .t{font-size:18px;white-space:normal;overflow:visible;text-overflow:clip}
  body.kt-service-price-board-page .lr .s{font-size:11.5px;white-space:normal;overflow:visible;text-overflow:clip}
}
@media (max-width:767px){
  body.kt-service-price-board-page{--sd-gutter:22px}
  body.kt-service-price-board-page main.solo{padding-top:22px}
  body.kt-service-price-board-page .lh{padding-bottom:16px}
  body.kt-service-price-board-page .lh-t{flex-direction:column;gap:8px}
  body.kt-service-price-board-page .lh-en{font-size:10px;letter-spacing:.28em;gap:10px}
  body.kt-service-price-board-page .lh-en::before{width:26px}
  body.kt-service-price-board-page .lh h1{font-size:22px}
  body.kt-service-price-board-page .lh-brand img{height:22px}
  body.kt-service-price-board-page .lg{grid-template-columns:1fr;gap:16px;margin-top:20px}
  body.kt-service-price-board-page .lc-hd{height:60px}
  body.kt-service-price-board-page .lc-tx{padding:0 16px;gap:12px}
  body.kt-service-price-board-page .lc-no{font-size:18px}
  body.kt-service-price-board-page .lc-nm{font-size:17px}
  body.kt-service-price-board-page .lc-ph{width:34%}
  body.kt-service-price-board-page .lr{min-height:62px;padding:8px 0}
  body.kt-service-price-board-page .lr .t{font-size:18px;white-space:normal;overflow:visible;text-overflow:clip}
  body.kt-service-price-board-page .lr .s{font-size:11.5px;white-space:normal;overflow:visible;text-overflow:clip}
  body.kt-service-price-board-page .lr .pr b{font-size:23px}
  body.kt-service-price-board-page .lc-more{padding:13px 0 14px}
  body.kt-service-price-board-page .lf{flex-direction:column;margin-top:22px;padding-bottom:32px}
}


/* 2026-10-17: port of the 10/14 dark A customer-review DETAIL layout. */
body.kt-service-price-board-page main.solo .lc-pz>.lc-more{
  align-self:flex-start;justify-content:flex-start;width:max-content;max-width:100%;
  margin-left:0;text-align:left;gap:14px;transition:color .34s ease,transform .42s cubic-bezier(.22,1,.36,1)
}
body.kt-service-price-board-page main.solo .lc-pz>.lc-more .en{font-size:12px;font-weight:600;letter-spacing:.22em}
body.kt-service-price-board-page main.solo .lc-pz>.lc-more i{
  flex:0 0 36px;width:36px;height:1px;margin-left:0;
  transition:flex-basis .44s cubic-bezier(.22,1,.36,1),background-color .34s ease
}
@media(hover:hover) and (pointer:fine){
  body.kt-service-price-board-page main.solo .lc:hover .lc-more{color:var(--kt-accent-fill)}
  body.kt-service-price-board-page main.solo .lc:hover .lc-more i{width:36px;flex-basis:58px}
}
@media(prefers-reduced-motion:reduce){
  body.kt-service-price-board-page main.solo .lc .lc-more,
  body.kt-service-price-board-page main.solo .lc .lc-more i{transition:none!important}
}

/* 2026-10-18 / pricing index: align the confirmed dark-A review, without changing detail pages. */
/* The label ("円 / L〜", "円 / 1本") now lives in a single small element with the price. */
body.kt-service-price-board-page .lc .pr small{
  color:var(--pr);
  font-size:16px;
  white-space:nowrap;
}
@media(max-width:767px){
  /* Avoid a lone final character in the premium-oil sublabel, as in the confirmed HTML. */
  body.kt-service-price-board-page .lc .lr .s{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Allow the battery label to use a smaller type size instead of leaving "用" on a new line. */
  body.kt-service-price-board-page .lc[data-service="battery"] .lr:nth-child(2) .t{
    font-size:16px;
    letter-spacing:-.015em;
    white-space:nowrap;
  }
}
/* At particularly narrow widths, prioritize full text and readable pricing over two-line orphaning. */
@media(max-width:359px){
  body.kt-service-price-board-page .lc[data-service="battery"] .lr:nth-child(2){
    grid-template-columns:minmax(0,1fr);
    gap:3px;
  }
  body.kt-service-price-board-page .lc[data-service="battery"] .lr:nth-child(2) .pr{
    justify-self:end;
  }
  /* Preserve a single-line page title and keep narrow-screen Japanese labels balanced. */
  body.kt-service-price-board-page .lh{position:relative;}
  body.kt-service-price-board-page .lh-brand{position:absolute;top:0;right:0;}
  body.kt-service-price-board-page .lh h1{font-size:20px;white-space:nowrap;margin-top:15px;}
  body.kt-service-price-board-page .lc[data-service="oil"] .lc-nm,
  body.kt-service-price-board-page .lc[data-service="battery"] .lc-nm,
  body.kt-service-price-board-page .lc[data-service="shaken"] .lr:nth-child(3) .t{
    word-break:keep-all;overflow-wrap:normal;
  }
}
