/* =========================================================
   オトノキワミ レンタル案内（レビュー記事用）
   .oklp-inline … 冒頭・各H2の末尾の一文
   .oklp-card   … 記事の最後のカード
   置かれた場所の幅で並びが変わるので、PC用・SP用を分ける必要はありません。
   ========================================================= */
.oklp-inline,.oklp-card{
  --oc-ink:#1b2330;--oc-text:#4f5a68;--oc-sub:#6a7480;--oc-navy:#142a47;--oc-accent:#2b4a70;
  --oc-line:rgba(20,42,71,.14);--oc-pale:#f3f5f8;--oc-gold:#8a6b3d;--oc-gold-pale:#f6efe3;
  --oc-serif:"Noto Serif JP","Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  box-sizing:border-box
}
.oklp-inline *,.oklp-card *,.oklp-card *::before,.oklp-card *::after{box-sizing:border-box}

/* ---------- one line (top / end of each H2) ---------- */
.oklp-inline{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:1.8em 0;padding:12px 16px;
  border:0;border-left:3px solid var(--oc-accent);border-radius:0 6px 6px 0;background:var(--oc-pale);
  color:var(--oc-ink);font-size:15px;line-height:1.7;text-align:left}
.oklp-inline .oklp-inline__text{font-weight:700}
.oklp-inline .oklp-inline__price{color:var(--oc-text);font-size:14px;font-variant-numeric:tabular-nums}
.oklp-inline .oklp-inline__link{margin-left:auto;color:var(--oc-accent);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.oklp-inline .oklp-inline__link::after{content:" ›"}
.oklp-inline .oklp-inline__link::before{content:"";position:absolute;inset:0}
.oklp-inline .oklp-inline__link:focus-visible{outline:none}
.oklp-inline:has(.oklp-inline__link:focus-visible){outline:2px solid var(--oc-accent);outline-offset:2px}

/* ---------- card (end of the article) ---------- */
.oklp-card{container:oklp-card/inline-size;position:relative;width:100%;max-width:100%;margin:2.5em 0;padding:0;overflow:hidden;
  border:1px solid var(--oc-line);border-radius:10px;background:#fff;color:var(--oc-ink);font-size:16px;line-height:1.7;text-align:left;overflow-wrap:anywhere}
.oklp-card .oklp-card__main{position:relative;padding:24px 20px 22px}
.oklp-card :is(p,figure){margin:0;padding:0;border:0;background:none;box-shadow:none;text-indent:0}
.oklp-card .oklp-card__lead{font-family:var(--oc-serif);font-size:15px;font-size:min(16px,calc((100cqi - 40px) / 19.6));font-weight:500;line-height:1.7;letter-spacing:0;line-break:strict}
.oklp-card .oklp-card__body{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:center;margin-top:18px}
.oklp-card .oklp-card__photo{position:relative;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--oc-pale)}
/* !important: some themes write an inline width/height onto images with a script */
.oklp-card .oklp-card__photo img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;margin:0;border:0;border-radius:0;
  object-fit:cover;object-position:var(--oc-focus,50% 50%);transform:scale(var(--oc-zoom,1));transform-origin:var(--oc-focus,50% 50%);transition:transform .45s ease}
.oklp-card .oklp-card__same{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:3px 6px;background:rgba(20,42,71,.82);color:#fff;font-size:10px;font-weight:500;line-height:1.5;letter-spacing:.04em;text-align:center}
.oklp-card .oklp-card__model{color:var(--oc-text);font-size:13px;line-height:1.5}
.oklp-card .oklp-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin-top:2px}
.oklp-card .oklp-card__price strong{font-family:var(--oc-serif);font-size:28px;font-weight:500;line-height:1.3;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.oklp-card .oklp-card__price strong span{font-size:.6em;margin-left:1px}
.oklp-card .oklp-card__price small{color:var(--oc-text);font-size:12.5px}
.oklp-card .oklp-card__new{margin-top:2px;color:var(--oc-sub);font-size:12.5px}
.oklp-card .oklp-card__photo-note{margin-top:2px;color:var(--oc-sub);font-size:11.5px;line-height:1.5}
/* gear needed to listen (dedicated driver, DAC …), each with a link to its rental page; above the card-wide tap area */
.oklp-card .oklp-card__req{position:relative;z-index:3;margin-top:18px}
.oklp-card .oklp-card__req-title{margin-bottom:8px;color:var(--oc-text);font-size:12.5px;font-weight:700;line-height:1.5;text-align:center}
.oklp-card .oklp-card__req-list{display:grid;gap:8px}
.oklp-card .oklp-card__req-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;
  border:1px solid var(--oc-line);border-radius:8px;background:#fff;box-shadow:none;color:var(--oc-ink);font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease}
.oklp-card a.oklp-card__req-item:visited,.oklp-card a.oklp-card__req-item:hover{color:var(--oc-ink);text-decoration:none;opacity:1}
.oklp-card a.oklp-card__req-item::after{content:"›";color:var(--oc-accent);font-size:18px;font-weight:400;line-height:1}
.oklp-card .oklp-card__req-img{position:relative;display:block;width:44px;height:44px;overflow:hidden;border-radius:5px;background:var(--oc-pale)}
.oklp-card .oklp-card__req-img img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;margin:0;border:0;border-radius:0;object-fit:cover}
.oklp-card .oklp-card__req-img:empty{display:none}
.oklp-card .oklp-card__req-item:has(.oklp-card__req-img:empty){grid-template-columns:minmax(0,1fr) auto;padding-left:14px}
.oklp-card .oklp-card__req-text>span{white-space:nowrap}
.oklp-card .oklp-card__req-text small{display:block;color:var(--oc-sub);font-size:11px;font-weight:500;line-height:1.4}
.oklp-card a.oklp-card__req-item:focus-visible{outline:2px solid var(--oc-accent);outline-offset:2px}
.oklp-card .oklp-card__badge{display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;max-width:100%;margin:18px auto 0;padding:7px 14px;
  border-radius:999px;background:var(--oc-gold-pale);color:#6f5226;font-size:13px;font-weight:700;line-height:1.5}
.oklp-card .oklp-card__badge b{flex:none;padding:1px 7px;border-radius:999px;background:var(--oc-gold);color:#fff;font-size:10.5px;letter-spacing:.08em}
.oklp-card .oklp-card__button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;margin:14px 0 0;padding:12px 20px;
  border:0;border-radius:6px;background:var(--oc-navy);box-shadow:none;color:#fff;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.06em;
  text-align:center;text-decoration:none;transition:background-color .2s ease}
.oklp-card .oklp-card__button:visited,.oklp-card .oklp-card__button:hover{color:#fff;text-decoration:none;opacity:1}
.oklp-card .oklp-card__button::after{content:"";flex:0 0 18px;width:18px;height:18px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.3'/%3E%3Cpath d='M9.5 7.5 14 12l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10.3'/%3E%3Cpath d='M9.5 7.5 14 12l-4.5 4.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* the whole card is the tap area of its one link */
.oklp-card .oklp-card__button::before{content:"";position:absolute;inset:0;z-index:2}
.oklp-card .oklp-card__button:focus-visible{outline:none}
.oklp-card .oklp-card__main:has(.oklp-card__button:focus-visible){outline:2px solid var(--oc-accent);outline-offset:-4px}
/* second step: corporate customer, short quote, text link (logo is the same one as on the LPs) */
.oklp-card .oklp-card__more{padding:16px 20px 18px;border-top:1px solid var(--oc-line);background:#f7f8fa;text-align:center}
.oklp-card .oklp-card__proof{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--oc-text);font-size:12.5px;line-height:1.5}
.oklp-card .oklp-card__proof-logo{flex:none;display:block;width:64px;aspect-ratio:419.72/125;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MTkuNzIiIGhlaWdodD0iMTI1IiB2aWV3Qm94PSIwIDAgNDE5LjcyIDEyNSI+DQoJPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTE5LjQsMTIwLjgyVjg3LjVsLS4wNi0uNzUtLjIzLS42OS0uMzMtLjYyLS40NS0uNTgtLjU2LS40Ni0uNjUtLjMzLS42OS0uMjMtLjcyLS4wNkg4MS45NGwtLjcxLjA2LS42OS4yMy0uNjUuMzMtLjU2LjQ2LS40Ni41OC0uMzYuNjItLjE5LjY5LS4wNy43NXYzMy43NWwuMDcuNzIuMTkuNzEuMzYuNjIuNDYuNTYuNTYuNDYuNjUuMzYuNjkuMTkuNzEuMWgzMy43N2wuNzItLjEuNjktLjE5LjY1LS4zNi41Ni0uNDYuNDUtLjU2LjMzLS42Mi4yMy0uNzEuMDYtLjcyWiIgZmlsbD0iI2Y1YWIxOCIvPg0KCTxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTMuNzQsMTI1SDQzLjE1bC43My0uMDcuNjktLjE5LjY2LS4zNy41Ni0uNDcuNDctLjU2LjM2LS42Ni4yLS43LjA3LS43M1Y2Ni40M2wtLjA3LS42Ny0uMTctLjY2LS4yOS0uNkw0Niw2NGwtLjUtLjQ2LS41Ni0uNC0uNi0uMjctLjY2LS4xMy0uNjYsMC0uNjkuMS0uNjMuMi0uNi4zMy0uNTMuNDMtLjQzLjUtLjI0LjM0TC43NCwxMTlsLS4wNS4wNy0uMzMuNi0uMjMuNjNMMCwxMjFsMCwuNjYuMTMuNy4yNy42My4zNi41Ni40Ni41LjUzLjQzLjYzLjMuNjYuMloiIGZpbGw9IiMwZjM2N2EiLz4NCgk8cGF0aCBkPSJNMTIxLjM4LDBIODJMODEuMjQuMWwtLjY5LjItLjY3LjM2LS41Ni40Ny0uNDYuNTctLjM3LjY2LS4xOS43LS4wNy43M3Y1NWwuMDcuNjcuMTYuNjYuMy42LjQuNTMuNDkuNDcuNTYuNC42LjI3LjY2LjEzLjY2LDAsLjctLjEuNjMtLjIuNTktLjMzLjUzLS40M0w4NSw2MWwuMjUtLjM1LDM5LjExLTU0LjYsMC0uMDcuMzMtLjYuMjQtLjYzLjEzLS43LDAtLjY3LS4xMy0uNy0uMjYtLjYzLS4zNy0uNTYtLjQ2LS41LS41My0uNDQtLjYzLS4zTDEyMiwuMDZaIiBmaWxsPSIjMDAwIi8+DQoJPHBhdGggY2xhc3M9ImNscy0zIiBkPSJNNDcuMDcsMjMuNDMsNDcsMjEuNzVsLS4xNy0xLjY5LS4zLTEuNjYtLjQzLTEuNjUtLjUzLTEuNTktLjY2LTEuNTYtLjc2LTEuNTItLjg5LTEuNDYtMS0xLjM5TDQxLjIyLDcuOTQsNDAuMDYsNi43MiwzOC44LDUuNTYsMzcuNDgsNC41bC0xLjM5LS45My0xLjQ2LS44NkwzMy4wOCwybC0xLjU2LS42M0wyOS45LjgzLDI4LjI0LjQzLDI2LjU5LjE3LDI0LjksMCwyMy4yMSwwLDIxLjUzLjA3LDE5Ljg0LjMsMTguMTkuNjNsLTEuNjMuNDYtMS42Mi41Ny0xLjUyLjY5LTEuNTIuNzZMMTAuNDgsNCw5LjEyLDUsNy44Myw2LjEyLDYuNiw3LjMxLDUuNDgsOC41N2wtMSwxLjM2LS45MiwxLjQyLS44LDEuNDlMMiwxNC4zNiwxLjQxLDE2LDEsMTcuNTcuNTgsMTkuMjMuMzIsMjAuOTIuMTgsMjIuNnYxLjY5TC4zMiwyNmwuMjYsMS42NkwxLDI5LjI5bC40NiwxLjYyTDIsMzIuNWwuNzMsMS41Ni44LDEuNDkuOTIsMS4zOSwxLDEuMzVMNi42LDM5LjU1bDEuMjMsMS4xOSwxLjI5LDEuMSwxLjM2LDEsMS40Mi44OSwxLjUyLjgsMS41Mi42NiwxLjYyLjYsMS42My40MywxLjY1LjMzLDEuNjkuMjMsMS42OC4xLDEuNjksMCwxLjY5LS4xNywxLjY1LS4yNkwyOS45LDQ2bDEuNjItLjUsMS41Ni0uNjMsMS41NS0uNzYsMS40Ni0uODMsMS4zOS0xLDEuMzItMSwxLjI2LTEuMTNMNDEuMjIsMzlsMS4wOS0xLjMzLDEtMS4zOS44OS0xLjQ2Ljc2LTEuNDguNjYtMS41Ni41My0xLjYyLjQzLTEuNjIuMy0xLjY5TDQ3LDI1LjEyWiIgZmlsbD0iI2M3MTYxZCIvPg0KCTxwYXRoIGQ9Ik0xOTYuMTIsNDIuODFIMTY5VjMxLjI0aDQyLjg1VjQyLjExTDE4Myw4Mi4yNmgyOC45MVY5My44M0gxNjcuMlY4M1oiIGZpbGw9IiMwMDAiLz4NCgk8cGF0aCBkPSJNMjU0Ljc3LDI4Ljc2QTMzLjc0LDMzLjc0LDAsMSwwLDI4OC41LDYyLjUxaDBhMzMuNzQsMzMuNzQsMCwwLDAtMzMuNzMtMzMuNzRtMCw1NC44M2EyMS4xLDIxLjEsMCwxLDEsMjEuMDktMjEuMTF2MGEyMS4wOSwyMS4wOSwwLDAsMS0yMS4wOSwyMS4wOSIgZmlsbD0iIzAwMCIvPg0KCTxwYXRoIGQ9Ik0zMjcuMzQsNDIuODFIMzAwLjI3VjMxLjI0aDQyLjg1VjQyLjExTDMxNC4yLDgyLjI2aDI4LjkyVjkzLjgzaC00NC43VjgzWiIgZmlsbD0iIzAwMCIvPg0KCTxwYXRoIGQ9Ik0zODYsMjguNzZhMzMuNzQsMzMuNzQsMCwxLDAsMzMuNzMsMzMuNzVoMEEzMy43MywzMy43MywwLDAsMCwzODYsMjguNzZoMG0wLDU0LjgzYTIxLjEsMjEuMSwwLDEsMSwyMS4wOS0yMS4xMXYwQTIxLjA5LDIxLjA5LDAsMCwxLDM4Niw4My41OSIgZmlsbD0iIzAwMCIvPg0KPC9zdmc+DQo=") center / contain no-repeat}
/* phones: logo and sentence on one line (the text scales with the card width) */
@container oklp-card (max-width:340px){
  .oklp-card .oklp-card__proof{gap:8px;font-size:min(12.5px,3.6cqi);white-space:nowrap}
  .oklp-card .oklp-card__proof-logo{width:52px}
}
/* very small phones: logo above the sentence */
@container oklp-card (max-width:260px){
  .oklp-card .oklp-card__proof{flex-direction:column;gap:6px;font-size:11px;white-space:normal}
}
.oklp-card .oklp-card__quote{margin-top:6px;color:var(--oc-sub);font-size:12px;line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
.oklp-card .oklp-card__quote mark{padding:0 2px;background:linear-gradient(transparent 62%,#f3ead9 62%);color:var(--oc-ink);font-weight:500}
.oklp-card .oklp-card__more-link{display:inline-block;margin-top:6px;padding:4px 0;color:var(--oc-accent);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.oklp-card .oklp-card__more-link::after{content:" ›"}
.oklp-card .oklp-card__more-link:visited{color:var(--oc-accent)}
.oklp-card .oklp-card__note{margin-top:10px;color:var(--oc-text);font-size:12px;line-height:1.6;text-align:center}

/* ---------- compact card (end of each H2): no lead, smaller photo, no quote/link ---------- */
.oklp-card.oklp-card--compact .oklp-card__main{padding:16px 16px 16px}
.oklp-card.oklp-card--compact .oklp-card__body{grid-template-columns:76px minmax(0,1fr);gap:14px;margin-top:0}
.oklp-card.oklp-card--compact .oklp-card__price strong{font-size:24px}
.oklp-card.oklp-card--compact .oklp-card__badge{margin-top:12px;padding:5px 12px;font-size:12px}
.oklp-card.oklp-card--compact .oklp-card__button{min-height:46px;margin-top:10px;font-size:15px}
.oklp-card.oklp-card--compact .oklp-card__more{padding:9px 16px 10px}

/* wide (article column on PC) */
@container oklp-card (min-width:480px){
  .oklp-card .oklp-card__lead{font-size:21px;letter-spacing:.03em}
  .oklp-card .oklp-card__body{grid-template-columns:200px minmax(0,1fr);gap:26px;margin-top:22px}
  .oklp-card .oklp-card__photo{aspect-ratio:4/3}
  .oklp-card .oklp-card__same{font-size:11px;padding:4px 8px}
  .oklp-card .oklp-card__price strong{font-size:32px}
  .oklp-card .oklp-card__badge{margin-top:22px}
  .oklp-card .oklp-card__req{margin-top:22px}
  .oklp-card .oklp-card__req-list{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
/* very small phones (about 320px wide) */
@container oklp-card (max-width:300px){
  .oklp-card .oklp-card__body{grid-template-columns:88px minmax(0,1fr);gap:12px}
  .oklp-card .oklp-card__same{font-size:8.5px;padding:2px 2px;letter-spacing:0}
  .oklp-card .oklp-card__price strong{font-size:24px}
  .oklp-card .oklp-card__badge{gap:6px;padding:6px 10px;font-size:12px}
}
@container oklp-card (min-width:480px){
  .oklp-card.oklp-card--compact .oklp-card__main{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"body button" "badge button" "note note";column-gap:24px;align-items:center;padding:18px 22px}
  .oklp-card.oklp-card--compact .oklp-card__body{grid-area:body;grid-template-columns:96px minmax(0,1fr);gap:16px;margin:0}
  .oklp-card.oklp-card--compact .oklp-card__photo{aspect-ratio:4/3}
  .oklp-card.oklp-card--compact .oklp-card__price strong{font-size:24px}
  .oklp-card.oklp-card--compact .oklp-card__badge{grid-area:badge;margin:12px 0 0;white-space:nowrap}
  .oklp-card.oklp-card--compact .oklp-card__button{grid-area:button;margin:0}
  .oklp-card.oklp-card--compact .oklp-card__note{grid-area:note}
  .oklp-card.oklp-card--compact .oklp-card__more{padding:9px 22px 10px}
}
@supports not (container-type:inline-size){
  @media (min-width:768px){
    .oklp-card .oklp-card__body{grid-template-columns:200px minmax(0,1fr);gap:26px}
    .oklp-card .oklp-card__photo{aspect-ratio:4/3}
  }
}
@media (min-width:768px){.oklp-card:not(.oklp-card--compact) .oklp-card__main{padding:30px 32px 28px}.oklp-card:not(.oklp-card--compact) .oklp-card__more{padding:18px 32px 20px}}
@media (hover:hover) and (pointer:fine){
  .oklp-card__main:hover .oklp-card__button{background:var(--oc-accent)}
  .oklp-card__main:has(.oklp-card__req-item:hover) .oklp-card__button{background:var(--oc-navy)}
  .oklp-card a.oklp-card__req-item:hover{border-color:var(--oc-accent);background:var(--oc-pale)}
  .oklp-card__main:hover .oklp-card__photo img{transform:scale(calc(var(--oc-zoom,1) * 1.03))}
  .oklp-inline:hover{background:#ebeff4}
}
@media (prefers-reduced-motion:reduce){
  .oklp-card .oklp-card__photo img,.oklp-card .oklp-card__button{transition:none}
  .oklp-card__main:hover .oklp-card__photo img{transform:scale(var(--oc-zoom,1))}
}