/*
  CARMAX's additions to the copied theme.

  Everything here is prefixed cmx_ and only ever adds; nothing overrides a the original theme rule, so
  re-running the mirror cannot leave a half-applied style behind.
*/

/* ── one rule about underlines ────────────────────────────────────────────────
   The theme opens with `a, a:link, a:active, a:visited { text-decoration: underline }`,
   which is (0,1,1) - and a component rule written the obvious way, `.cmx_thing { text-
   decoration: none }`, is (0,1,0) and quietly loses to it. That has now happened to the
   home page's contact button, the 一覧 button on the news strip, the two buttons on
   /cars/, the diagnosis link on /about_loan/ and every link in the new footer: each of
   them was styled as a button and drawn with a line under its words.

   Rather than fix it a seventh time: an <a> that carries a cmx_ class is a component we
   drew, and a component we drew decides its own decoration. Prose keeps its underlines -
   nothing inside the shop's own rich text has one of these classes.

   ⚠ Written with `:link` in it on purpose. Without the pseudo-class this is (0,1,1) and
   only ties with the theme, which then comes down to which stylesheet loads last - a thing
   that has already changed once. */
a[class*="cmx_"],
a[class*="cmx_"]:link,
a[class*="cmx_"]:visited,
a[class*="cmx_"]:active,
a[class*="cmx_"]:hover {
  text-decoration: none;
}

/* ── the term picker on 毎月支払額で探す ──────────────────────────────────────
   It sits on the same line as the heading, to the right of it, where the employer marked
   it. The theme's heading is a full-width block whose icon span is 75px tall inside a 50px
   box, so a picker placed after it landed 12px inside the icon and printed the buttons
   over 毎月支払額で探す. Letting the heading shrink to its text leaves the picker beside
   it with the whole rest of the line to itself. */
.searchTerm_ttl {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

/* Its own row, under the heading.
   It used to be `inline-flex` with a left margin, which tucked it into the space beside
   the heading on a wide screen - the shop read that as the filter belonging to the title
   rather than to the list it controls. Now the block reads top to bottom in the order the
   shop asked for: heading, then the filter, then the line explaining it, then the prices.
   The old rule only stacked it below 900px; now it stacks everywhere and that breakpoint
   is left with the sizing it still needs. */
.cmx_years {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
}

.cmx_years__label {
  font-size: 15px;
  font-weight: 700;
  color: #555;
}

.cmx_years__opts {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
}

.cmx_years__opts button {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #555;
  padding: 9px 16px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.cmx_years__opts button:hover { background: #f3f3f3; }

.cmx_years__opts button[aria-pressed="true"] {
  /* The chosen term. The colour is one of two the shop picks in the panel.
     ⚠ The fallback is the seeded choice, not the theme's own #E20A17: it is what paints
     until the answer arrives, so a third red here would mean every load began with a colour
     the shop never picked. With blue chosen there is still a brief red before the swap -
     the page is static and the choice is not, so something has to paint first. */
  background: var(--cmx-accent, #CA0404);
  color: #fff;
}

/* The line under the filter that says what it does. It was 15px against an 18px price
   list, so the explanation read as smaller than the thing it explains. */
.searchTerm_summary { font-size: 17px; line-height: 1.8; }

@media screen and (max-width: 900px) {
  /* Under the heading rather than beside it - there is no corner to spare on a phone. */
  .cmx_years {
    position: static;
    margin: 0 0 14px;
    flex-wrap: wrap;
  }

  .cmx_years__opts {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .cmx_years__opts button {
    flex: 1 1 auto;
    padding: 8px 4px;
    text-align: center;
  }
}

/* ── the opening statement ────────────────────────────────────────────────────
   the original theme set their slogan as an SVG. Ours is text, so it can be changed without a
   designer - these rules give it the weight the image had. */
.cmx_intro__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.cmx_intro__lead {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
}

.cmx_intro__sub {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (max-width: 900px) {
  .cmx_intro__lead { font-size: 30px; }
  .cmx_intro__sub { font-size: 16px; }
}

@media screen and (max-width: 600px) {
  .cmx_intro__lead { font-size: 25px; }
  .cmx_intro__sub { font-size: 14px; }
}

/* ── the diagnosis banner ─────────────────────────────────────────────────── */
/* Full-bleed, the way the original theme runs their diagnosis banner. The earlier max-width left ours
   floating in the middle of the page while theirs reached both edges. */
/* the original theme's version of this band is a composed block - an illustration either side of the
   title - so its height is set by its content and barely moves: 442px at 1280, and still
   442px at 1920, because the inner is capped at 980px and only the band either side of it
   grows.

   Ours is one picture, so `width: 100%` made the height follow the viewport instead - 442px
   at 1280 but 663px at 1920, which is the extra height the shop was looking at.

   So the picture is capped at the original theme's own 980px and centred, and the band behind it is
   painted the red the picture's own edge already is, so the two read as one strip. At that
   cap the picture stands 440.7px tall; the original theme stands 442. */
.cmx_diagHead {
  width: 100%;
  margin: 0 0 28px;
  padding: 0 5%;
  background: #BB0202;
}

.cmx_diagHead img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
}

/* On a phone there is no room to give away: the picture goes back to edge to edge, which is
   what it already did, so nothing about the small screen changes. */
@media screen and (max-width: 767px) {
  .cmx_diagHead { padding: 0; }
}

/* ── the five menu icons ──────────────────────────────────────────────────────
   The shop drew its own set and sent them as one strip; they are traced to SVG and cut
   one per file. The colour is painted into each file rather than left to currentColor
   (they are our red, #E20A17, since the recolour on 27 August): the theme draws these as
   background-image on a ::before, and an external SVG loaded that way has no element to
   inherit a colour from.

   Each viewBox is tight to its artwork so the drawing fills the slot instead of filling it
   with padding.

   Class ties with the theme's own rules (both are two classes), and this file is linked
   after theirs, so these win on order. Checked in the browser rather than assumed.

   ⚠ Each one is a custom property with the built-in drawing as its fallback, not a plain
   url(). The shop can replace any of them from the panel, and carmax/site.js sets the
   property when it has been. Written this way the page has its icons on the first paint and
   the upload only ever *replaces* one - an empty panel, an app that is down or a script that
   never ran all leave the built-in drawing in place rather than an empty square.

   ⚠ The class is written twice on purpose. Every one of these spans also carries a theme
   class - `md_icon store cmx_ic_cars` - and deploy/recolour.py writes a `.md_icon.store`
   rule into the generated block at the foot of this file. Two classes each, so the two
   rules tie on specificity and the later one wins, and the generated block is always
   later. These rules had been losing that tie silently: the bar was showing the original theme's
   recoloured theme icons and the shop's own five were never drawn at all. Doubling the
   class settles it on specificity instead of on position, which is the only thing that
   still holds after recolour.py regenerates the block. */
.md_icon.cmx_ic_cars.cmx_ic_cars::before         { background-image: var(--cmx-icon-cars, url(/carmax/icon-cars.svg?v=5f65de55)); }
.md_icon.cmx_ic_monthly.cmx_ic_monthly::before   { background-image: var(--cmx-icon-monthly, url(/carmax/icon-monthly.svg?v=fd6482f2)); }
.md_icon.cmx_ic_bodytype.cmx_ic_bodytype::before { background-image: var(--cmx-icon-bodytype, url(/carmax/icon-bodytype.svg?v=c71f9f10)); }
.md_icon.cmx_ic_about.cmx_ic_about::before       { background-image: var(--cmx-icon-about, url(/carmax/icon-about.svg?v=aeec6696)); }
.md_icon.cmx_ic_store.cmx_ic_store::before       { background-image: var(--cmx-icon-store, url(/carmax/icon-store.svg?v=ea66df36)); }

/* One size for all of them, whatever was uploaded.
   `contain` fits the drawing inside the slot by whichever side runs out first, so a tall
   icon and a wide one both land inside the same box; centred, so what is left over is even
   on both sides; and never tiled, which is what a small drawing would otherwise do. The
   shop can upload five files at five sizes and the bar still reads as one set. */
.md_icon.cmx_ic_cars::before,
.md_icon.cmx_ic_monthly::before,
.md_icon.cmx_ic_bodytype::before,
.md_icon.cmx_ic_about::before,
.md_icon.cmx_ic_store::before {
  background-repeat: no-repeat;
  background-position: center;
}

/* `contain`, not the theme's `auto 100%`.
   ⚠ This is the bug the shop caught. The ::before is 2.5em wide by 1.75em tall - a 1.43
   box - and `auto 100%` sizes the picture by HEIGHT alone. Anything wider than 1.43 then
   runs past the right edge and is cut off. The car icon is the wide one, and it was
   arriving with its nose missing. The theme knew this and set `auto 85%` on its own two
   wide icons; forcing 100% on all five is what broke it.
   `contain` fits inside both dimensions, so it holds whatever aspect ratio the shop's
   next icon happens to have. */
.md_icon.cmx_ic_cars::before,
.md_icon.cmx_ic_monthly::before,
.md_icon.cmx_ic_bodytype::before,
.md_icon.cmx_ic_about::before,
.md_icon.cmx_ic_store::before { background-size: contain; }

/* ── tightening the bar below 1100 ────────────────────────────────────────────
   Space bought back so the full menu survives further down the range before the
   all-or-nothing rule above hides it. Each item carried 14px of padding on the li and
   another 14px inside the icon span - 28px between items, 140px across the row; at 5px
   each that is 90px back, and 10px between one label and the next icon still reads as two
   items. A point off the type takes labels, padding and icons down together, because the
   icon box and its offset are both in em. Together they are what moves the last width
   that fits from about 1000px to about 862px.

   ⚠ This block used to hide the second half of the two long labels here as well
   (自社ローン|について, 店舗|情報 - that split in the markup is the original theme's, for exactly
   that trick). That line is gone: a menu item that says 自社ローン when the page it opens
   is 自社ローンについて is the "items get cut" the shop reported, and the rule above now
   forces both halves visible at every width. Nothing here shortens a label any more; it
   only makes the spacing tighter. */
@media screen and (max-width: 1100px) {
  .md_header__nav > ul > li { padding-right: 5px; }
  .md_header__nav > ul > li .md_icon { padding-right: 5px; }
  .md_header__nav { font-size: 13px; }
}

/* ── the wide icon and its label ──────────────────────────────────────────────
   The ::before is 2.5em wide by 1.75em tall and the text begins at 2.5em, so an icon that
   fills the box touches the word next to it. `contain` scales by whichever side runs out
   first: art narrower than the box keeps a gap on the right for free, art wider than it
   spans the full 2.5em and leaves none. The car is the wide one - it was the only one
   without the gap the others had.

   Narrowing the box to 2.15em, without touching the 2.5em padding, gives every icon at
   least 0.35em of air. The four narrow ones are unaffected: they are limited by height,
   not width, so they draw exactly as before. Any future wide icon gets the gap too. */
.md_icon.cmx_ic_cars::before,
.md_icon.cmx_ic_monthly::before,
.md_icon.cmx_ic_bodytype::before,
.md_icon.cmx_ic_about::before,
.md_icon.cmx_ic_store::before { width: 2.15em; }

/* ── the page's own ground ────────────────────────────────────────────────────
   ⚠ Nothing on this site ever painted a background. Not the original theme's stylesheet, not ours -
   the pages have always sat on whatever the browser puts behind them, which is white by
   default and therefore looked fine.

   It is not white for a reader whose browser is in dark mode. There the page has no ground
   of its own, so it composites onto the browser's dark canvas and the whole site turns
   black behind text that was drawn to sit on white. That is what the shop was looking at,
   and every visitor with dark mode on sees the same thing.

   So the ground is declared rather than borrowed. The site is a light design and says so;
   it no longer depends on a default it does not control. */
html { background: #ffffff; }

body {
  background: #ffffff;
  color: #131313;
}

/* ── the CARMAX wordmark ──────────────────────────────────────────────────────
   The theme sized its own logo as an SVG; ours is a bitmap of a different shape, so it is
   given an explicit height and left to work out its own width. */
.md_header__logo {
  height: auto;
  max-height: 46px;
  width: auto;
}

@media screen and (max-width: 900px) {
  .md_header__logo { max-height: 36px; }
}

/* ── 選ばれる理由 cards ────────────────────────────────────────────────────────
   the original theme's three titles each fit on one line. The employer's first one
   ("自社ローン・自社リース・信用回復ローン完備！") runs to two, which pushed that card's
   icon and text 30px below the other two. Reserving two lines on all three lines them up
   again; it is a floor, so a title that wraps further on a phone still grows. */
.pTop_strength__list .title {
  min-height: 3em;
}

@media screen and (max-width: 900px) {
  /* Stacked on a phone, so there is no row to line up - let each title take what it needs. */
  .pTop_strength__list .title { min-height: 0; }
}

/* ── car card contact ─────────────────────────────────────────────────────────
   The employer asked for LINE and the phone number on every card. They sit below the
   card's own link, because a link inside a link is invalid HTML and the browser throws
   the inner one away. */
/* ── the car card ─────────────────────────────────────────────────────────────
   The employer asked for LINE beside the year / mileage / shaken line rather than at the
   foot of the card. That row is in the middle of the card, and the card used to be one
   big <a> - a link inside a link is invalid and the browser discards the inner one, so
   the button would simply have stopped working there.

   So the card is no longer wrapped in an anchor. Instead the anchor is the last child and
   covers the whole card, and anything that is itself a link is lifted above it. The card
   stays clickable everywhere, LINE and the phone number still work, and the markup is
   valid. */
/* ⚠ A column, not just a positioning context. The cards are all the same height (the grid
   stretches them), so on a card whose details run short the contact strip stopped wherever
   the body ended and the phone button floated in the middle of the card. `margin-top:auto`
   on the strip pushes it to the foot of every card, whatever is above it.

   ⚠ And NO `height:100%`. The list is a wrapping flex container, so a percentage height on
   an item resolves against the whole container rather than its own row - which stopped
   `align-items:stretch` doing its job and left one card in a row 22px shorter than its
   neighbours. Left at `auto`, stretch gives every card its row's height, which is exactly
   the spare space `margin-top:auto` then eats. */
.cmx_card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.cmx_card__body {
  flex: 1 1 auto;
}

.cmx_card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Readable by a screen reader, invisible on screen: the overlay would otherwise be a link
   with no words in it. */
.cmx_card__linkLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The photo used to grow on hover through `li a:hover .mdCars_eyecatch img`, which no
   longer matches now that the anchor is not an ancestor. Same effect, from the card. */
.cmx_card:hover .mdCars_eyecatch img { transform: scale(1.05); }

.cmx_card__contact,
.cmx_card__lineCell,
.cmx_card__line,
.cmx_card__tel a {
  position: relative;
  z-index: 2;
}

/* The facts row becomes the button's row. margin-left:auto rather than
   justify-content:space-between, so the three facts keep sitting together on the left
   whatever their length. */
.mdCars_meta { align-items: center; }

.cmx_card__lineCell {
  margin-left: auto;
  padding-left: 8px;
}

.cmx_card__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 12px;
  flex-wrap: wrap;
  /* The foot of the card, on every card - see the note on .cmx_card. */
  margin-top: auto;
}

/* Both pills are written parent-then-child rather than as a bare class, and that is not
   decoration. the original theme's stylesheet carries `.md_cars__entry > li a { color: #131313 }`,
   which is two elements and a class - more specific than one class of ours - so a plain
   `.cmx_card__line { color:#fff }` lost, and the LINE pill had been rendering near-black
   text on its green ever since it was moved. Nothing looked broken enough to notice: the
   pill was the right size in the right place, and only its contrast was wrong.

   Two classes beat one class and two elements, so scoping each pill under the cell it
   sits in wins without an !important and without touching the original theme's file. */
.cmx_card__lineCell .cmx_card__line {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #06c755;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.cmx_card__tel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.cmx_card__telNote {
  /* 10px grey was a caption for the button under it and read as fine print nobody follows.
     It is the line that tells a customer what to do next, so it carries its own weight. */
  font-size: 13px;
  font-weight: 700;
  color: #444;
  text-align: center;
  margin-bottom: 6px;
}

/* The number used to sit here as a line of red text under the note. On a phone that reads
   as a caption, not as something to press - and pressing it is the whole point of the card,
   because this shop sells on the phone and on LINE and nowhere else.

   So it is a filled button now, the width of the card, matching the LINE pill's shape
   (same 99px radius, same weight) in the shop's red rather than LINE's green. The two then
   read as a pair: LINE up in the facts row, the call down here. */
.cmx_card__contact .cmx_card__telBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #d81f26;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.cmx_card__contact .cmx_card__telBtn i { font-size: 13px; }

.cmx_card__contact .cmx_card__telBtn:hover,
.cmx_card__contact .cmx_card__telBtn:focus {
  background: #b3151b;
  color: #fff;
}

@media screen and (max-width: 600px) {
  .cmx_card__contact { padding: 8px 10px 10px; }
  .cmx_card__lineCell .cmx_card__line { font-size: 12px; padding: 6px 10px; }
  .cmx_card__lineCell { padding-left: 6px; }
  .cmx_card__contact .cmx_card__telBtn { font-size: 14px; padding: 9px 10px; }
}

/* The three sentences under the red heading arrived from the shop separated by blank
   lines, and they are three separate statements - what the loan is, how it is judged, who
   it is for. Set as bare paragraphs they came out 30px apart in a 30px line, which reads
   as one paragraph wrapped over three lines. `p + p` so the gap falls between them and
   never above the first. */
.pLoan_about__summary p + p { margin-top: 0.9em; }

/* ── about_loan ───────────────────────────────────────────────────────────────
   The employer's replacement panels are flat pictures where the original theme used SVG, so they
   need an explicit max width or they run to the full column. */
.cmx_loanHero,
.strength_cars.cmx_hasImg img {
  display: block;
  width: 100%;
  height: auto;
}

.pLoan_issue figure img { width: 100%; height: auto; }

/* ── payment band counts ──────────────────────────────────────────────────────
   The number of cars each band holds at the chosen term. Needed because 8- and 10-year
   terms exist only above ¥2,000,000, so the lower bands are legitimately empty at those
   terms - and an empty result with no explanation reads as a broken filter. */
.searchTerm_list.loan .searchTerm_submit__label { position: relative; }

.cmx_bandCount {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  /* #d81f26 on this pink measured 4.44:1 - just under the 4.5 a 12px label needs. */
  color: #b3161d;
  background: #fdeced;
  border-radius: 99px;
  padding: 2px 9px;
  vertical-align: middle;
}

.searchTerm_list.loan .searchTerm_submit__label.is-empty { opacity: .45; }
.searchTerm_list.loan .searchTerm_submit__label.is-empty .cmx_bandCount {
  color: #888;
  background: #eee;
}

@media screen and (max-width: 900px) {
  .cmx_years { display: flex; margin: 10px 0 14px; }
}

/* ── pictures that carry their own words ───────────────────────────────────────
   the original theme clips every picture in these two sections to a circle, and for the original theme that
   works: theirs are wordless icons drawn well inside the circle. The shop's are posters -
   each one has its caption set across the bottom - and a circle cut all of it off.

   The shop has since sent every one of them again with the background taken out, so
   there is no longer a card here to shape at all: no radius to round, and no shadow,
   because a drop shadow on a cut-out paints the rectangle straight back in behind the
   drawing. They sit directly on the panel, which is what the transparency is for.

   This is the one place the page deliberately parts company with the original theme, at the
   employer's word: گرد نکن، محتوی داخلش دیده نمیشه. */
.pLoan_intro .intro_infograf img,
.pLoan_intro__list .intro_infograf img,
.pLoan_issue__list .issue_image img,
.pLoan_issue figure img {
  border-radius: 0;
  box-shadow: none;
  background: none;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* the original theme sets the word "Assurance" behind this panel's picture - a 160px #eee ::after,
   tilted, as a watermark. The shop asked for it gone. Killing the content rather than
   hiding the element, so nothing is left occupying space.

   Written with one class more than the theme's own selector. Ours loads after theirs so a
   tie would win on order alone, but this file has already been bitten once by relying on
   that, and a rule that cannot lose is worth two extra characters. */
.pLoan_strength .pLoan_strength__list .strength_assurance::after {
  content: none;
}

/* A cut-out on a transparent background. It has no field to mask, so a circle only
   clips the hands and the shadow only draws a grey disc behind them. */
.pLoan_strength__list .strength_assurance img {
  border-radius: 0;
  box-shadow: none;
}

/* Same on the four step drawings on ご購入の流れ. Measured against the inscribed circle:
   the handshake loses 12% of its ink - both men's outer shoulders and one whole hand -
   and the man with the magnifying glass loses 6%. These are cut-outs on transparent
   backgrounds sitting on a white page, so with no mask and no shadow there is nothing
   left to see except the drawing, whole. */
.pFlow_steps .l_figure img {
  border-radius: 0;
  box-shadow: none;
}

.pLoan_intro__list .intro_list__wrap .intro_title,
.pLoan_intro__list .intro_title {
  /* The ONLY thing overridden here. The theme sets white-space: nowrap because the original theme's
     titles are five characters; ours are longer and an unwrappable heading walks out of
     the column. Everything else - 42px, the line-height, the 52.5px indent - is left to
     the theme, so the type matches the original theme exactly and simply wraps to another line.
     An earlier attempt also shrank the font to 30px, which made it stop matching. */
  white-space: normal;
}

/* Their copy is two lines; ours runs to five. Any fixed height clips it. */
.pLoan_intro .intro_txt,
.pLoan_intro .intro_summary,
.pLoan_intro .intro_list__wrap,
.pLoan_intro .intro_list__column {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* No line-height override. the original theme runs 25.6px on 16px (1.6); an earlier 1.9 here made
   every card about a fifth taller than theirs for no reason. */

/* ── 選ばれる理由 cards 2 and 3, side by side ─────────────────────────────────
   The list already stretches both cards to a common height, but inside each one the
   title, the copy and the picture stack in normal flow - so the picture starts wherever
   that card's copy happens to stop. Card 2's copy runs a line longer than card 3's, which
   stepped its picture down by a line. That is what the employer sent back.

   Cutting a sentence out of card 2 would line them up at one window width and break again
   at the next, because how many lines a paragraph takes depends on the width it is given.
   So the copy is left as written and the card becomes a column that pushes its picture to
   the bottom instead. Both pictures are 500x500 and both cap at 240px, so bottom-aligned
   means level tops as well.

   Only above the theme's own 768px breakpoint: below it the theme lays the same card out
   as a row, and a column here would fight it. */
@media screen and (min-width: 769px) {
  .pLoan_intro__list li:nth-child(2),
  .pLoan_intro__list li:nth-child(3) {
    display: flex;
  }

  .pLoan_intro__list .intro_list__column {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .pLoan_intro__list .intro_list__column .intro_infograf {
    margin-top: auto;
  }
}

/* ── the row of cars in 強み2 ─────────────────────────────────────────────────
   Two things sit here now, one above the other.

   The employer's 7,000台 picture goes in a block of its own. It was inside the original theme's
   animated figure before, which is an 80px box - a 226px picture in it ran across the
   paragraph underneath, and the theme's own cars kept scrolling behind it, so two rows
   of cars overlapped and the caption was unreadable.

   Underneath it, the original theme's figure is left exactly as it is: empty, 80px, with the row of
   cars scrolling across it on a twenty-second loop. Nothing here touches it. */
.cmx_carsBanner {
  margin: 0 0 8px;
}

.cmx_carsBanner img {
  display: block;
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}

/* ── the red statement block on the home page ─────────────────────────────────
   Two things differ from the original theme here and both had to be answered.

   1. Their headline is one SVG; ours is live text, so the <h2> no longer needs the box the
      theme sizes for a picture.
   2. The theme sets `white-space: nowrap` on the paragraph beside it. That is safe for
      the original theme because their copy is five short lines with explicit <br>. Ours is one long
      sentence, and an unwrappable sentence cannot shrink - so the flex row gave it all the
      width and squeezed the headline column down to a single character, which is why the
      words came out stacked one per line. */
.pTop_innovation__block .innovation_read p { white-space: normal; }

.pTop_innovation__block .innovation_read {
  flex: 1 1 52%;
  min-width: 0;
}

.pTop_innovation__block .cmx_intro__copy {
  flex: 1 1 44%;
  min-width: 0;
}

.pTop_innovation__block .cmx_intro__copy {
  height: auto;
  min-height: 0;
  padding: 0;
  text-align: left;
}

.pTop_innovation__block .cmx_intro__copy img { display: none; }

.pTop_innovation__block .innovation_read { height: auto; min-height: 0; }
.pTop_innovation__block .innovation_read .innr p { line-height: 2; }

@media screen and (max-width: 900px) {
  .pTop_innovation__block .cmx_intro__copy { text-align: center; }
}

/* ── car page ─────────────────────────────────────────────────────────────────
   基本情報 and 基本スペック sit side by side on the original theme; ours stacked because the theme's
   rule for that pair does not reach our markup. Stated explicitly here. */
.sCars_details__baseinfo {
  display: flex;
  flex-wrap: wrap;
  gap: 0 40px;
}

.sCars_details__baseinfo > li {
  flex: 1 1 calc(50% - 20px);
  min-width: 0;
}

@media screen and (max-width: 900px) {
  .sCars_details__baseinfo > li { flex: 1 1 100%; }
}

/* The four contact cards, in one row as the original theme has them. */
.sCars_cv {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.sCars_cv > li {
  flex: 1 1 calc(25% - 12px);
  min-width: 200px;
  background: #f4f4f4;
  border-radius: 10px;
  padding: 20px 18px;
  box-sizing: border-box;
}

.sCars_cv .cv_summary p { line-height: 1.7; margin: 8px 0 14px; }

.sCars_cv .cv_btn a {
  display: block;
  text-align: center;
  background: #d81f26;
  color: #fff;
  text-decoration: none;
  border-radius: 99px;
  padding: 12px 10px;
}

.sCars_cv > li .innr.line .cv_btn a { background: #06c755; }

@media screen and (max-width: 900px) {
  .sCars_cv > li { flex: 1 1 calc(50% - 8px); }
}

@media screen and (max-width: 600px) {
  .sCars_cv { padding: 0 12px; }
  .sCars_cv > li { flex: 1 1 100%; }
}

/* ボーナス払いOK, the note the original theme closes the plan box with. */
.sCars_bounus {
  margin-top: 10px;
  text-align: center;
  color: #d81f26;
}

.sCars_bounus em { font-style: normal; font-weight: 700; margin-right: 8px; }
.sCars_bounus span { color: #666; }

/* ── section headings on the loan page ────────────────────────────────────────
   The theme puts white-space: nowrap on every .ttl in these headings. the original theme's fit
   because they are short; ours are longer sentences and walked straight out of the box.
   This is the third place that same rule has bitten - worth remembering. */
.pLoan .ttl,
.pLoan_about__copy .ttl,
.pLoan_issue__ttl .ttl,
.pLoan h2 .ttl,
.pLoan h3 .ttl {
  white-space: normal;
}

/* The employer's wordmark replaces one of those headings outright. */
.cmx_aboutCopy img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
}

/* ── the employer's own icons ─────────────────────────────────────────────────
   The theme draws these as a ::before background image. Swapping the class alone did
   nothing visible - the icon has to be pointed at the new file here. */
.md_icon.cmx_icon_form::before {
  background-image: url(/carmax/icon-form.png);
}

.md_icon.cmx_icon_steps::before {
  background-image: url(/carmax/icon-steps.png);
}

/* The warranty mark in 強み3 on the loan page. */
.cmx_warrantyIcon img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 20px;
}

/* ── ab1: the wordmark sits centred in its red panel ──────────────────────────
   The <em> is the red panel and its padding is equal top and bottom, but the span
   holding the picture was inline-block, so it sat on a text baseline and left about
   16px of red underneath that was not there above. Making it a block takes the baseline
   out of it, and the equal padding then does centre the picture. */
.pLoan_hero__ttl em > span { display: block; }

/* ── ab3: the 悩み tiles ──────────────────────────────────────────────────────
   Each cell is 302px wide and the picture drew at 240, so a fifth of the cell sat empty
   and the caption set into the artwork came out too small to read comfortably. The
   captions are part of the picture, so the only way to enlarge them is to give the
   picture more of the cell it already has.

   The cap is on the *figure*, not the picture: the theme has
   `.issue_image { max-width: 240px }` and the picture inside is `width: 100%`, so raising
   the picture's own max-width alone changed nothing at all - 100% of 240 is still 240. */
.pLoan_issue__list .issue_image {
  max-width: 288px;
}

.pLoan_issue__list .issue_image img,
.pLoan_issue figure img {
  max-width: 288px;
}

/* ── ab4: 強み1 is the picture ────────────────────────────────────────────────
   With the theme's heading and list removed, the panel is a frame around one picture.
   The picture carries its own red border, so the panel's padding is trimmed to sit
   evenly around it rather than leaving the deep gap the heading used to fill. */
.pLoan_strength__list > li:first-child .strength_image {
  margin: 0 auto;
}

/* ── the header menu ──────────────────────────────────────────────────────────
   The theme makes the bar fit narrow screens by taking it apart, in three steps as the
   window shrinks: under 1100px it drops any .pri3 item, under 980px it hides the second
   half of a label (自社ローンについて becomes 自社ローン, 店舗情報 becomes 店舗), and
   under 860px it drops every .pri2 item outright. Below 600px the bar goes and the
   drawer takes over.

   So between 601 and 860 the shop's own site quietly stopped offering two of its four
   pages, and between 861 and 980 it offered them under half a name. On top of that the
   list is `flex-wrap: wrap`, so at any width where the items do not fit on one line they
   fall onto a second one inside a 60px bar and the header visibly breaks.

   None of that is wanted here. Every one of these items is in the drawer, and the drawer
   button is on screen at every width, so the honest behaviour is all or nothing: show the
   whole menu, or show none of it and let the drawer do its job. Nothing is ever truncated,
   dropped, or wrapped.

   The breakpoint below is measured, not guessed: it is the width at which the full menu
   plus the logo, the LINE button and the drawer button stop fitting on one line. */
/* ⚠ `> ul`, the top row only - never `ul`, which would reach the dropdowns as well.
   Every list inside this nav is a flex row, including the panel that drops out of the
   price menu and the one beside it. Those stack into a column *because* the row wraps:
   each of their items is min-width:100%, so wrapping is what puts them one per line.
   Turning wrapping off for all of them laid the submenus out sideways. */
.md_header__nav > ul {
  flex-wrap: nowrap;
}

/* Items keep their own width instead of being squeezed. As flex children they were free to
   shrink below their text, and since the labels are `white-space: nowrap` the text did not
   reflow - it simply ran past the box it was given and into the neighbour. That is the
   "it suddenly breaks" the shop was seeing at some widths and not others. */
.md_header__nav > ul > li {
  flex-shrink: 0;
}

.md_header__nav ul > li.pri2,
.md_header__nav ul > li.pri3 {
  display: block;
}

.md_header__nav ul > li a.headNav_link .flex,
.md_header__nav ul > li .headNav_link .flex {
  display: inline;
}

/* Measured, not guessed. The four items need 531px once the theme drops the bar to 14px
   below 1200px, and the nav is handed (window - 331px) after the logo, the LINE button and
   the drawer button have taken theirs - so the last width that genuinely fits is about
   862px. Hiding below 940 leaves ~78px of slack there, which is the room a fallback font
   needs on a machine that has not loaded the webfont yet. Below this the drawer has all of
   it, and the drawer button is on screen at every width. */
@media screen and (max-width: 939px) {
  .md_header__nav {
    display: none;
  }
}

/* The new dropdown holds links where the price menu holds forms, so the theme's styling
   for its <label> is repeated here for an <a>. Same padding, same red chevron, same
   refusal to wrap - it should be impossible to tell which of the two was in the theme. */
.md_header__nav ul > li > .headNav_term > li a {
  padding: 0.5em 1em 0.5em 1.5em;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  color: #131313;
}

.md_header__nav ul > li > .headNav_term > li a:hover {
  color: #E20A17;
}

.md_header__nav ul > li > .headNav_term > li a i {
  color: #E20A17;
  padding-right: 0.5em;
}

/* ── uploaded menu icons ──────────────────────────────────────────────────────
   An entry whose icon the shop replaced from the panel. Same shape as the contact cards:
   the class is only added when there is an upload, so an entry still using one of the
   theme's own icons is left alone rather than being blanked by a `none` fallback. Doubled
   for the same tie against recolour.py's generated block. */
.md_icon.cmx_menuIcon--custom.cmx_menuIcon--custom::before {
  background-image: var(--cmx-menu-icon);
}

/* ── the four contact cards ───────────────────────────────────────────────────
   Drawn by carmax/site.js from the panel, into the theme's own markup, so the styling is
   the theme's. Two rules only.

   ⚠ The class is doubled here for the same reason the menu icons double theirs: the heading
   also carries the theme's own icon class (phone / store / comment / line) and recolour.py
   writes rules for those into the generated block at the foot of this file. Two classes each
   is a tie, and the generated block always wins a tie by being later. */
   ⚠ And the rule keys off a class the script only adds when a picture was actually uploaded.
   Writing it as `var(--cmx-cv-icon, none)` on every card looked tidier and was wrong: a card
   with no upload would resolve to `none` and lose the theme icon it should have kept. No
   upload, no class, no rule - the theme draws it. */
.md_icon.cmx_cvIcon--custom.cmx_cvIcon--custom::before {
  background-image: var(--cmx-cv-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* The wording is a <div> of paragraphs now rather than a single <p>, so it needs the spacing
   the theme gave its <p>. Rich text from the panel can be several paragraphs. */
.cmx_cvBody p {
  margin: 0 0 0.4em;
}

.cmx_cvBody p:last-child {
  margin-bottom: 0;
}

/* ── カーマックスが選ばれる理由 ────────────────────────────────────────────────
   Three wide cards, shaped like the four step cards on /flow/: a red panel on the left with
   the picture on it, the words on the white beside it, and the number in the corner.

   The theme's version was three columns of picture-over-text with a 5px salmon rule under the
   whole section - and that rule is CarLife's, so it goes.

   ⚠ The pictures are line art in the shop's red on a transparent ground. On a red panel they
   all but disappear; the map of Japan vanished outright. `filter: brightness(0) invert(1)`
   renders them white instead, which works here because every internal detail in these three
   is a hole in the alpha channel rather than a lighter colour - the ¥ in the coin, the cross
   in the heart, the car windows. The holes stay red and the ink goes white.

   It also keeps working for whatever the shop uploads next, with no file to prepare first. */
section.pTop_strength {
  border-bottom: 0;
}

.cmx_reasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The heading is the first child and belongs across the whole row, not in a column. */
.cmx_reasons .cmx_reasons__head {
  width: auto;
  margin-bottom: 4px;
}

.cmx_reasons .cmx_reasons__card {
  /* ⚠ position: relative here and NOT on the figure - the badge is placed against the card,
     so that `right: 0` means the right edge of the card rather than of the red panel. */
  position: relative;
  /* ⚠ And width:auto, because the theme puts `width: 31%` on these list items for its own
     flex row. In a grid cell 31% is 31% of the CELL, so the card came out 374px wide inside a
     1207px column and its text column was squeezed to 72px - 2000px of stacked characters.
     The same trap as the last time this block was rebuilt. */
  width: auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e6e8;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  transition: box-shadow .2s ease;
}

.cmx_reasons .cmx_reasons__card:hover {
  box-shadow: 0 10px 26px rgba(0, 43, 128, .1);
}

.cmx_reasons .cmx_reasons__figure {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 26px;
  background: var(--cmx-accent, #CA0404);
}

.cmx_reasons .cmx_reasons__figure img {
  width: 100%;
  max-width: 150px;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Top right, in the corner of the card. */
.cmx_reasons .cmx_reasons__no {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  min-width: 46px;
  padding: 6px 14px 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border-radius: 0 0 0 14px;
}

.cmx_reasons .cmx_reasons__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 32px;
}

.cmx_reasons .cmx_reasons__title {
  /* Clear of the badge, which sits in this corner. */
  margin: 0 0 12px;
  padding-right: 72px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: #002b80;
}

.cmx_reasons .cmx_reasons__text {
  font-size: 15px;
  line-height: 1.9;
  color: #3a4150;
}

.cmx_reasons .cmx_reasons__text p { margin: 0 0 .6em; }
.cmx_reasons .cmx_reasons__text p:last-child { margin-bottom: 0; }

.cmx_reasons .cmx_reasons__btn {
  margin-top: 18px;
}

.cmx_reasons .cmx_reasons__btn a,
.cmx_reasons .cmx_reasons__btn a:link,
.cmx_reasons .cmx_reasons__btn a:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: #002b80;
  border-radius: 999px;
  transition: filter .15s;
}

.cmx_reasons .cmx_reasons__btn a::after {
  content: "\203a";
  font-weight: 700;
  line-height: 1;
}

.cmx_reasons .cmx_reasons__btn a:hover {
  filter: brightness(1.15);
}

@media screen and (max-width: 767px) {
  .cmx_reasons {
    gap: 14px;
  }

  /* The panel goes over the words rather than beside them - 240px of picture and a Japanese
     paragraph do not both fit across a phone. */
  .cmx_reasons .cmx_reasons__card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 14px;
  }

  .cmx_reasons .cmx_reasons__figure {
    padding: 22px;
  }

  .cmx_reasons .cmx_reasons__figure img {
    max-width: 118px;
    max-height: 118px;
  }

  .cmx_reasons .cmx_reasons__body {
    padding: 20px;
  }

  .cmx_reasons .cmx_reasons__title {
    font-size: 18px;
    /* Nothing to clear here: the badge is over the picture panel above, not this. */
    padding-right: 0;
  }

  .cmx_reasons .cmx_reasons__text { font-size: 14px; line-height: 1.85; }

  .cmx_reasons .cmx_reasons__card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  }
}

/* ── the slide-out menu ───────────────────────────────────────────────────────
   The drawer was mostly air. Measured on a 375px phone before touching it: a 75px empty
   band above the first row, then every group separated by 40px - 20px of padding inside the
   group and 20px of margin outside it, which is the same gap paid for twice - and the whole
   thing 1370px tall on an 812px screen.

   ⚠ What is NOT changed: the height of a row. Each link is a 47-50px target, and that is
   the one number in here worth keeping - it is the size a thumb needs. Tightening rows would
   have made the menu look neater in a screenshot and worse in a hand. The space taken back
   is the space between groups and above the first one, which nobody taps. */
.md_drawer__contents {
  /* The frame the search and the close button share. sidr clones this element into its own
     container, and both sit at the top of it, so one positioning context does for both. */
  position: relative;
  /* Clears the top band, which now holds the search rather than standing empty: the button
     is at top:20px and 40px tall, so 68px is the band plus 8px of air. */
  padding-top: 68px;
  padding-bottom: 24px;
}

/* ⚠ No `.md_drawer__menu` ancestor on any of these, and that is the whole trick.
   sidr does not open the element in the page - it *clones* its contents into a container of
   its own (`div.sidr`), and that container has none of the drawer's classes. Rules written
   as `.md_drawer__menu .sidr_column` match the copy that is never displayed and miss the one
   that is; the first version of this block did exactly that and changed nothing on screen.
   `.sidr_column` is unique to this menu anyway, and this file loads after the theme's, so
   these win on order without needing a parent. */

/* One gap between groups, not two: 20px of padding inside plus 20px of margin outside was
   the same space paid for twice. The rule that separates them stays. */
.sidr_column {
  margin-bottom: 0;
  padding-bottom: 10px;
}

.sidr_column + .sidr_column {
  padding-top: 10px;
}

/* The TOP row is a 14px line of text that was carrying 20px under it. */
.sidr_column.top {
  padding-bottom: 4px;
  padding-top: 0;
}

/* ── the search, beside the close button ──────────────────────────────────────
   Moved to the top of the drawer by deploy/carmax.py, and lifted out of the flow to here.

   ⚠ The band above the first link existed only to clear the close button - 64px of nothing
   over a 40px button - while the search sat underneath it taking another 52px. One band now
   holds both: the search on the left, the button on the right, and the 52px comes back.
   `right` clears the button (40px) plus a 16px gap. */
.sidr_column.cmx_drawerSearch {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 76px;
  padding: 0;
  z-index: 2;
}

.cmx_drawerSearch .md_search_itemnum {
  margin: 0;
}

/* ── the カーマックスへようこそ block ──────────────────────────────────────────
   Heading and paragraph from the panel. Hidden until filled, so clearing the wording takes
   the block off the page instead of leaving its background band behind. */
.pTop_innovation__block.cmx_intro {
  display: none;
}

.pTop_innovation__block.cmx_intro.is-ready {
  display: block;
}

/* ── よくある質問 ─────────────────────────────────────────────────────────────
   The questions are drawn by carmax/site.js from the panel, into the theme's own markup, so
   there is nothing to restyle. Only the heading needs a rule: its icon can be replaced from
   the panel, and like the menu icons it is a ::before that has to read a property from the
   element rather than take an inline background.

   ⚠ The class is doubled, for the same reason the menu icons double theirs: the heading also
   carries the theme's `faq` class, and recolour.py writes a `.md_icon.faq` rule into the
   generated block at the foot of this file. Two classes each is a tie, and the generated
   block is always later. The recoloured icon is the fallback, so a panel that has set
   nothing still gets the shop's red one. */
.md_icon.cmx_faqTtl.cmx_faqTtl::before {
  background-image: var(--cmx-faq-icon, url(/carmax/md_icon__faq.svg));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── 車種で探す ────────────────────────────────────────────────────────────────
   One box: a coloured band across the top with the heading on it, and the buttons under it.

   The theme's version was a heading with a drawing beside it and then a bare grid - the same
   shape as every other block on the page and the same shape as the site this was copied from.

   ⚠ Everything the band shows comes from the panel: the wording, the line under it and the
   colour. The colour arrives as `--cmx-cat-band` on the element, so this rule keeps the last
   word - an unset or refused value falls back to the brand navy rather than to no background,
   which would leave white words on a white box. */
.cmx_catrow {
  display: none;
}

.cmx_catrow.is-ready {
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 43, 128, .07);
}

/* ⚠ No margin and no radius of its own: the band is the top of the box, not a panel inside
   it. The rounded corners come from the box clipping it. */
.cmx_catHead {
  display: none;
}

.cmx_catHead.is-ready {
  display: block;
  margin: 0;
  padding: 28px 24px 26px;
  text-align: center;
  background: var(--cmx-cat-band, #002b80);
}

.cmx_catHead__ttl {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #fff;
}

.cmx_catHead__sub {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  /* ⚠ Pure white, not 86%. The shop said white, and has said more than once that pale text
     is the thing they dislike about this design language. The heading stays the louder of
     the two on size and weight instead of on opacity. */
  color: #fff;
}

.searchTerm_list.car {
  display: grid;
  /* Auto-fill rather than a column count declared twice in two media queries: two on a
     phone, eight on a desktop, and nothing to keep in step by hand.

     ⚠ 132, not 150. The grid holds sixteen buttons and the row is 1204px wide; at 150 it
     came out seven across, so fifteen cards drew as 7 + 7 + 1 with one button alone on the
     last row. At 132 it is eight across and sixteen is two full rows. */
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 22px;
}

.searchTerm_list.car > li {
  margin: 0;
  padding: 0;
  width: auto;
  list-style: none;
}

/* ⚠ Two things the theme does to this grid that overriding `grid-template-columns` does not
   undo, and both of them were visible on the live site.

   1. It places every button by NAME:

        .searchTerm_list.car { grid-template-areas: "type_1 type_2 type_3 type_4 type_5" … }
        .searchTerm_list.car > li:nth-child(7) { grid-area: type_7 }

      The areas describe five columns. Asking for eight tracks changes the tracks and leaves
      the placements alone, so the buttons went on filling five of the eight and the right
      third of the box was empty. The areas have to be cleared and each item let go back to
      auto-placement - and `:nth-child(n)` is here to beat the theme's own (0,3,1).

   2. It draws its own icon on a ::before - the CarLife SVGs, `md_caricon__truck.svg` and the
      rest. The pictures are the shop's own uploads now, drawn as <img>, so the theme's one
      was painting the old drawing over the new one. `content: none` removes the box
      altogether rather than blanking its background, so it cannot take a click either.

   ⚠ And that ::before is what put the icons outside their cards in the first place. It
   carries `transform: translateX(-50%)`, which the old rule here never overrode: the box was
   given `left: 0; right: 0` and then moved half a card to the left by the theme's transform.
   getComputedStyle reported `left: 0px` and looked correct - the transform is a separate
   property and is not in that number. The screenshots were right and the measurement was
   reading the wrong thing. */
.cmx_catrow .searchTerm_list.car {
  grid-template-areas: none;
}

.cmx_catrow .searchTerm_list.car > li:nth-child(n) {
  grid-area: auto;
}

.searchTerm_list > li .searchTerm_submit__label.car.cmx_cat::before {
  content: none;
}

.searchTerm_list > li .searchTerm_submit__label.car.cmx_cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 134px;
  padding: 14px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #1b2434;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 14px;
  transition: border-color .15s, box-shadow .15s, transform .15s, color .15s;
}

/* The picture's own box. Fixed height so every card's words start on the same line, full
   width so a long low body has room to be long. */
.cmx_cat__art {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 54px;
}

.cmx_cat__art img {
  display: block;
  width: 100%;
  height: 100%;
  /* ⚠ contain, not `auto 100%`. The sixteen drawings are meant to be one shape but three of
     the files are not, and `contain` fits each one inside the box on whichever side is
     longer instead of letting a taller file grow wider than its card. */
  object-fit: contain;
}

/* The words take what is left, and sit in the middle of it - so a one-line label and a
   two-line label leave the cards the same height. */
.cmx_cat__label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.searchTerm_list > li .searchTerm_submit__label.car.cmx_cat:hover,
.searchTerm_list > li .searchTerm_submit__label.car.cmx_cat:focus-visible {
  border-color: var(--cmx-accent, #CA0404);
  box-shadow: 0 8px 20px rgba(202, 4, 4, .12);
  transform: translateY(-2px);
  color: var(--cmx-accent, #CA0404);
}

/* These are links now rather than a label wired to a hidden submit button, so they need the
   things the theme's label got for free. */
.searchTerm_list > li a.searchTerm_submit__label {
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 767px) {
  .cmx_catrow.is-ready {
    border-radius: 14px;
  }

  .cmx_catHead.is-ready {
    padding: 20px 16px 18px;
  }

  .cmx_catHead__ttl { font-size: 21px; }
  .cmx_catHead__sub { margin-top: 7px; font-size: 13px; line-height: 1.65; }

  .searchTerm_list.car {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 14px;
  }

  .searchTerm_list > li .searchTerm_submit__label.car.cmx_cat {
    min-height: 118px;
    padding: 12px 6px;
    font-size: 13px;
    border-radius: 12px;
  }

  .cmx_cat__art { height: 44px; }

  /* A card lifts under a pointer, not under a thumb. */
  .searchTerm_list > li .searchTerm_submit__label.car.cmx_cat:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ── the four picture tiles ───────────────────────────────────────────────────
   The row under the banner. Its contents are rows in the admin panel now, fetched by
   carmax/site.js, so the same rule as the banner applies: with nothing set there is no row.

   ⚠ The whole <section> is hidden, not just the list. The section carries the padding that
   separates it from the blocks above and below, so hiding only the list would leave a band
   of empty space where the tiles used to be - which is not "nothing shown", it is a gap. */
.pTop_banner.cmx_tilerow {
  display: none;
}

.pTop_banner.cmx_tilerow.is-ready {
  display: block;
}

/* ── the home page banner slider ──────────────────────────────────────────────
   The strip the page opens with. The shop uploads banners in the admin panel and this
   draws whichever of them are live today; carmax/site.js fills it.

   ⚠ Hidden until the script marks it ready. The rule the shop gave is that nothing
   uploaded means nothing shown, and a slot that is visible by default breaks that rule in
   every case where the answer never arrives - the app down, the script blocked, an empty
   panel. Hidden by default, shown on an answer, means the page can only ever err towards
   the shop's own instruction.

   Full width is deliberate too: the theme boxes the hero inside a 1366px row with 3% side
   padding, and the shop asked for the banner edge to edge. Both are undone here, on our
   own class rather than on the theme's, so nothing else that uses .l_row moves. */
.pTop_hero.cmx_hero {
  display: none;
  padding: 0;
}

.pTop_hero.cmx_hero.is-ready {
  display: block;
}

.cmx_hero .l_row {
  max-width: none;
  padding: 0;
}

/* ── the inset layout ─────────────────────────────────────────────────────────
   The other half of the choice made on the banner screen: instead of edge to edge, the
   strip sits inside the page's own width with space above, below and to the sides.

   Desktop and phone are separate switches because they are separate pictures. The
   breakpoint is the same 600px the <picture> uses to choose between them, so the layout a
   setting controls and the artwork it applies to always change over together.

   The desktop numbers are the theme's own - 1366px wide, 3% either side - so an inset
   banner lines up with every other block on the page rather than being merely narrower. */
@media screen and (min-width: 601px) {
  .cmx_hero.is-inset-desktop {
    padding: 40px 3%;
  }

  .cmx_hero.is-inset-desktop .l_row.mx_1366 {
    max-width: 1366px;
  }

  .cmx_hero.is-inset-desktop .l_row.pd_side3 {
    padding: 0 3%;
  }
}

@media screen and (max-width: 600px) {
  .cmx_hero.is-inset-mobile {
    padding: 16px 4%;
  }
}

.cmx_slider {
  position: relative;
}

/* The box the banners sit in. Its shape is the first banner's, sent by the app as pixel
   sizes and set here as a custom property by the script, so the space is reserved before
   the artwork lands and the page below it never jumps. With no sizes to go on it falls
   back to the picture's own shape, which is right but arrives late. */
.cmx_slider__view {
  overflow: hidden;
  aspect-ratio: var(--cmx-banner-ar, auto);
  /* ⚠ The swipe handler in site.js has always been there and never fired on a phone. With
     touch-action at its default the browser claims the gesture, reads any vertical component
     as a scroll and sends pointercancel, so the drag never reached us and the banners moved
     only by their arrows. `pan-y` keeps vertical scrolling with the browser and gives us the
     horizontal drag. */
  touch-action: pan-y;
}

@media screen and (max-width: 600px) {
  .cmx_slider__view {
    aspect-ratio: var(--cmx-banner-ar-mobile, var(--cmx-banner-ar, auto));
  }
}

.cmx_slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cmx_slider__track {
    transition: none;
  }
}

.cmx_slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.cmx_slider__slide a,
.cmx_slider__slide picture {
  display: block;
  height: 100%;
}

/* contain, not cover: a banner is artwork with the offer written into it, so an odd-sized
   one sits whole inside the strip rather than having its wording cropped off at the edges. */
.cmx_slider__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.cmx_slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
}

.cmx_slider__arrow:hover,
.cmx_slider__arrow:focus-visible {
  background: rgba(0, 0, 0, 0.65);
}

/* The chevron is drawn rather than loaded: two borders on a rotated square. One more file
   for two arrows would be one more request on the largest block of the page. */
.cmx_slider__arrow::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.cmx_slider__arrow--prev {
  left: 16px;
}

.cmx_slider__arrow--prev::before {
  transform: translateX(2px) rotate(-135deg);
}

.cmx_slider__arrow--next {
  right: 16px;
}

.cmx_slider__arrow--next::before {
  transform: translateX(-2px) rotate(45deg);
}

/* Under the picture, not on it.
   ⚠ They used to sit inside the strip, 12px up from the bottom edge. The shop's artwork
   carries its wording right down to that edge - the phone banner ends on a line of text -
   so three dots landed on top of it and covered part of what the banner says. A banner is
   the one picture on the site whose content is the point of it; the indicator moves out of
   its way rather than the other way about. */
.cmx_slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 2px;
}

/* Grey on white, now that they sit on the page rather than over the picture - the old
   translucent white was for a dark banner behind them and is invisible here. */
.cmx_slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #C9CDD3;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cmx_slider__dot[aria-current="true"] {
  background: #E20A17;
}

/* On a phone the arrows cover a third of a portrait banner, so they go and the dots stay:
   swiping is what a visitor does there anyway. */
@media screen and (max-width: 600px) {
  .cmx_slider__arrow {
    display: none;
  }
}

/* ── 毎月支払額で探す ─────────────────────────────────────────────────────────
   The heading and the line under the filter come from the panel; the filter and the five
   bands are the theme's own and are never emptied. Both shells are hidden until filled, so
   an empty heading with a lone icon is never on screen - and clearing the wording in the
   panel takes it off the page rather than leaving a gap.

   The icon override doubles its class for the same reason as the menu icons: recolour.py
   writes a generated block at the foot of this file, and a tie is won by whichever rule
   comes last. */
.searchTerm_ttl [data-cmx-price-title]:not(.is-ready),
[data-cmx-price-text]:not(.is-ready) {
  display: none;
}

[data-cmx-price-title].cmx_menuIcon--custom.cmx_menuIcon--custom::before {
  background-image: var(--cmx-menu-icon);
}

/* ── 全車両一覧: the head, the search, the filters and the view switch ────────
   The top of this page had grown to 422px before a single car: a title, a line, a count, a
   search box, six filter chips, five sort buttons on two rows, and a view switch. Every one
   of them shouted at the same volume.

   Three rows now. What the page is, one bar of controls, and the filters. Sorting moved into
   a picker because it is a small choice made once - it does not deserve five buttons. */
.cmx_listHead {
  text-align: center;
}

.cmx_listHead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 14px;
}

.cmx_listHead .md_searchHead__count {
  margin: 0;
  color: #666;
}

.cmx_listHead__sub {
  margin: 6px auto 0;
  max-width: 42em;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

/* ── one bar: search, sort, view ──────────────────────────────────────────── */
.cmx_listBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px auto 0;
}

.cmx_listSearch {
  display: flex;
  align-items: stretch;
  flex: 1 1 360px;
  max-width: 460px;
}

.cmx_listSearch__field {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
}

.cmx_listSearch__field input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 14px;
  color: #131313;
  background: #fff;
  border: 1px solid #ddd;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  appearance: none;
}

.cmx_listSearch__field input:focus {
  outline: 2px solid var(--cmx-accent, #CA0404);
  outline-offset: -2px;
}

.cmx_listSearch__go {
  flex: 0 0 auto;
  height: 42px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border: 0;
  border-radius: 0 9px 9px 0;
  cursor: pointer;
}

/* The theme has no visually-hidden of its own, so a label carrying one was simply printed
   above the search box. */
.cmx_srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cmx_sortPick {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cmx_sortPick__label {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  white-space: nowrap;
}

.cmx_sortPick__select {
  height: 42px;
  padding: 0 34px 0 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #131313;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/11px 7px;
  border: 1px solid #ddd;
  border-radius: 9px;
  appearance: none;
  cursor: pointer;
}

/* Shown only where there is no script to submit the picker on change - site.js adds is-auto
   and takes it away. A picker that cannot be submitted is worse than an extra button. */
.cmx_sortPick__go {
  height: 42px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  background: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 9px;
  cursor: pointer;
}

.cmx_sortPick.is-auto .cmx_sortPick__go {
  display: none;
}

/* The count picker is narrower than the sort one - it holds "60 台", not a sentence. */
.cmx_sortPick__select--per {
  padding-right: 30px;
}

.cmx_view {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #f2f2f2;
  border-radius: 9px;
}

.cmx_view__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #666;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.cmx_view__btn[aria-pressed="true"] {
  color: #131313;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Drawn rather than fetched: two tiny shapes are not worth two more requests. */
.cmx_view__ico {
  width: 13px;
  height: 13px;
}

.cmx_view__ico--grid {
  background:
    linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 8px 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 8px / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 8px 8px / 5px 5px no-repeat;
}

.cmx_view__ico--list {
  background:
    linear-gradient(currentColor 0 0) 0 1px / 13px 3px no-repeat,
    linear-gradient(currentColor 0 0) 0 6px / 13px 3px no-repeat,
    linear-gradient(currentColor 0 0) 0 11px / 13px 3px no-repeat;
}

/* ── the shop's own shortcuts ─────────────────────────────────────────────── */
.cmx_chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 14px auto 0;
  max-width: 900px;
}

/* ⚠ Scoped by the parent, not written bare: the theme underlines every <a> in the page body,
   and a bare .cmx_chip loses that tie on specificity. */
.cmx_chips .cmx_chip {
  display: inline-block;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #444;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}

.cmx_chips .cmx_chip:hover {
  border-color: var(--cmx-accent, #CA0404);
  color: var(--cmx-accent, #CA0404);
}

.cmx_chips .cmx_chip.is-on {
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border-color: var(--cmx-accent, #CA0404);
}

.cmx_chips .cmx_chip--clear {
  color: #888;
  border-style: dashed;
}

/* ── list view ────────────────────────────────────────────────────────────────
   The card body holds exactly three things - the New! flag, the picture and the details - so
   the row is those placed by hand rather than a flex line that would give the flag a column
   of its own. The contact strip stays under both, full width. */
.md_cars__entry.is-list > li {
  width: 100%;
  max-width: none;
}

@media (min-width: 768px) {
  .md_cars__entry.is-list > li .cmx_card__body {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .md_cars__entry.is-list > li .cmx_card__body > .mdCars_eyecatch {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .md_cars__entry.is-list > li .cmx_card__body > .mdCars_details {
    grid-column: 2;
    grid-row: 1;
  }

  /* Defensive: if the theme ever stops positioning the flag absolutely, it still sits over
     the picture instead of claiming a cell and pushing the row out of shape. */
  .md_cars__entry.is-list > li .cmx_card__body > .mdCars_newIcon {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
  }
}

/* ── "cannot find it? just ask" ───────────────────────────────────────────────
   Words on the left, the two ways to ask on the right. The buttons sat under the paragraph
   before, which read as a footnote rather than as the point of the block. */
.cmx_listHelp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin: 46px 0 10px;
  padding: 30px 32px;
  text-align: left;
  background: #f7f7f8;
  border: 1px solid #ececee;
  border-radius: 16px;
}

.cmx_listHelp__words {
  flex: 1 1 360px;
  min-width: 0;
}

.cmx_listHelp__ttl {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: #131313;
}

.cmx_listHelp__body {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.cmx_listHelp__body p {
  margin: 0 0 .5em;
}

.cmx_listHelp__btns {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cmx_listHelp__line,
.cmx_listHelp__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
}

/* LINE's own green, kept deliberately: Japanese customers recognise the colour and would not
   recognise a red button as LINE. */
.cmx_listHelp__line { background: #06c755; }
.cmx_listHelp__tel { background: var(--cmx-accent, #CA0404); }

@media (max-width: 900px) {
  .cmx_listSearch { flex: 1 1 100%; max-width: none; }
}

@media (max-width: 767px) {
  .cmx_listHead__top { gap: 4px 10px; }

  .cmx_listBar { padding: 0 16px; }

  .cmx_sortPick { flex: 1 1 auto; }
  .cmx_sortPick__select { flex: 1 1 auto; width: 100%; }

  .cmx_view__txt { display: none; }

  .cmx_chips {
    /* One line that scrolls, rather than four rows of chips pushing the cars off screen. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 16px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cmx_chips::-webkit-scrollbar { display: none; }
  .cmx_chips .cmx_chip { flex: 0 0 auto; }

  .cmx_listHelp {
    margin: 34px 0 6px;
    padding: 24px 18px;
  }

  .cmx_listHelp__ttl { font-size: 19px; }

  .cmx_listHelp__btns { width: 100%; }

  .cmx_listHelp__line,
  .cmx_listHelp__tel {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ── the car page ────────────────────────────────────────────────────────────
   ⚠ The panel beside the photo was invisible: the theme writes white text on it and paints
   its background with `.sCars_head::after { z-index: -1 }` - a full-bleed band drawn behind
   everything. On a page whose wrapper carries its own background, that band never surfaces,
   so white text sat on white. It was the car's own name and the shop's headline offer.

   Fixed by painting the panel itself and retiring the band. It also becomes the one place on
   the page that carries the shop's colour, which is what a Japanese used-car page does with
   the name of the car. */
.sCars_head {
  background: var(--cmx-accent, #CA0404);
  color: #fff;
  padding: 18px 22px 20px;
  border-radius: 12px;
  margin-bottom: 4px;
}

.sCars_head::after {
  display: none;
}

.sCars_head__ttl {
  color: #fff;
  line-height: 1.45;
}

.sCar_salespoint {
  margin: 8px 0 0;
  color: #fff;
  line-height: 1.7;
  opacity: .95;
}

/* The bubble is the car's own words. Its icon slot never had a picture, so it was a 60px
   gap opening every bubble - the view no longer prints it and this keeps any that survive
   in a cached page from reserving the space. */
.sCars_comment .comment_icon:empty {
  display: none;
}

.sCars_comment .comment_summary {
  border-radius: 12px;
}

/* 物件番号 reads as a label, not a heading. */
.sCars_itemNum span {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  color: #555;
  background: #f2f2f4;
  border-radius: 6px;
}

/* The four facts under the panel: a row of cells rather than four floating pairs. */
.sCars_baseInfo {
  gap: 8px;
  margin-top: 14px;
}

.sCars_baseInfo .dWrap {
  flex: 1 1 0;
  padding: 10px 6px;
  text-align: center;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
}

.sCars_baseInfo dt {
  font-size: 12px;
  color: #5f5f5f;
}

.sCars_baseInfo dd {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #131313;
}

/* The purchase plan is the reason the page exists - a 5px grey frame is not that. */
.sCars_plan {
  border: 1px solid #e6e6e8;
  border-radius: 14px;
  padding: 4px 16px 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.sCars_plan__ttl {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cmx-accent, #CA0404);
}

/* ⚠ The equipment a car does NOT have was #ccc on #f9f9f9 - 1.53:1, which is not "muted",
   it is unreadable. Kept clearly secondary, but legible. */
.sCars_equip li span,
.sCars_equipment li span {
  color: #8a8a8a;
}

.sCars_equip li.is-active span,
.sCars_equip li.active span,
.sCars_equipment li.is-active span,
.sCars_equipment li.active span {
  color: #131313;
}

@media (max-width: 767px) {
  .sCars_head {
    padding: 16px 16px 18px;
    border-radius: 10px;
  }

  .sCars_baseInfo {
    flex-wrap: wrap;
  }

  .sCars_baseInfo .dWrap {
    flex: 1 1 calc(50% - 8px);
  }
}


/* ── the strip under the slider ──────────────────────────────────────────────
   It was one grey line - a label, a number, a unit, a date - set in 13px at the far left of
   a 1049px bar, which is a lot of empty space for four words. The count is the one live
   figure on the page, so it is given the size of a figure; the space beside it goes back to
   what the original theme had there, a notice, rolling.

   The two are separated by a rule rather than left floating in the same band, so it reads as
   two things and not as one sentence that ran on. */
.pTop_info {
  /* A ground for the card to sit on, so the strip is a thing on the page rather than a rule
     drawn across it. Pale enough that the white card reads as raised. */
  background: #f1f5fd;
  border-bottom: 0;
  padding: 18px 0 22px;
}

.pTop_info__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 43, 128, .06), 0 10px 26px rgba(0, 43, 128, .07);
  overflow: hidden;
}

/* ── the count ────────────────────────────────────────────────────────────────
   Label above, figure below - the figure is the point, and it was competing with its own
   label for the same line. */
.pTop_published {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* ⚠ Named, not left to the theme. Its rule says `align-items: center`, which meant
     "centre vertically" while this was a row and means "centre horizontally" now that it is a
     column - the figure ended up in the middle of its half with the notice left-aligned
     beside it. */
  align-items: flex-start;
  gap: 3px;
  margin: 0;
  padding: 16px 30px;
  border-right: 1px solid #eaeff8;
  flex: 0 0 auto;
}

.pTop_published dt .title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #4a5a75;
}

.pTop_published dd {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}

.pTop_published .published_count {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
}

.pTop_published .count {
  font-size: 32px;
  line-height: 1;
  color: var(--cmx-accent, #CA0404);
  letter-spacing: -.02em;
}

.pTop_published .unit {
  font-size: 17px;
  font-weight: 700;
  color: #333;
}

.pTop_published .date {
  font-size: 14px;
  font-weight: 500;
  color: #5a6473;
}

/* ── the notice ticker ────────────────────────────────────────────────────────
   Hidden until it has something in it, so a shop with no notices keeps the plain strip. */
.cmx_ticker {
  display: none;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 340px;
  padding: 0 22px;
}

.cmx_ticker.is-ready {
  display: flex;
}

/* What the strip is, said once and quietly. This used to be a black pill reading お知らせ一覧
   in front of the headline - black appears nowhere else on this site, and it made the way out
   of the strip the loudest thing in it. */
.cmx_ticker__tag {
  flex: 0 0 auto;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border-radius: 999px;
}

/* The way to the archive. A button, because it is the one thing in this strip a visitor can
   act on and it was set as a 12px text link - the quietest thing in a strip whose whole job
   is to be noticed. */
.cmx_ticker__all {
  flex: 0 0 auto;
  align-self: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #002b80;
  background: #eef2fb;
  border: 1px solid #d5deef;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}

.cmx_ticker__all::after {
  content: " \203a";
  font-weight: 700;
}

.cmx_ticker__all:hover,
.cmx_ticker__all:focus-visible {
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border-color: var(--cmx-accent, #CA0404);
}

/* One row tall. The list inside is taller and slides up a row at a time; this window is what
   makes only one of them visible. */
.cmx_ticker__view {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  overflow: hidden;
}

.cmx_ticker__list {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.cmx_ticker__list > li {
  height: 44px;
}

/* ⚠ The whole row is the link, not just the words. It measured 201px wide in a 1000px strip
   before, so most of the notice was not clickable and it did not read as a link at all. */
.cmx_ticker__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 0 12px;
  min-width: 0;
  font-size: 16px;
  color: #222;
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s;
}

.cmx_ticker__list a:hover,
.cmx_ticker__list a:focus-visible {
  background: #f5f5f6;
}

.cmx_ticker__list time {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: #7b8494;
  font-variant-numeric: tabular-nums;
}

/* One line, cut with an ellipsis: a long headline must not push the date off the strip or
   make the row two lines tall, which would show half of the next notice under it. */
.cmx_ticker__ttl {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}

.cmx_ticker__list a:hover .cmx_ticker__ttl {
  color: var(--cmx-accent, #CA0404);
}

/* A chevron, so the row says "this goes somewhere" without a word for it. */
.cmx_ticker__go {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-top: 2px solid #bbb;
  border-right: 2px solid #bbb;
  transform: rotate(45deg);
}

.cmx_ticker__list a:hover .cmx_ticker__go {
  border-color: var(--cmx-accent, #CA0404);
}

@media (max-width: 767px) {
  /* The card carries no padding of its own - each half has its own, so the divider between
     them can run the full width. */
  .pTop_info__wrap {
    padding: 0;
    gap: 0;
  }

  .pTop_published {
    width: 100%;
    padding: 13px 18px 12px;
    border-right: 0;
    border-bottom: 1px solid #eaeff8;
  }

  .pTop_published .count { font-size: 26px; }

  .cmx_ticker {
    flex: 1 1 100%;
    gap: 10px;
    padding: 4px 18px 6px;
  }

  .cmx_ticker__view { height: 36px; }
  .cmx_ticker__list > li { height: 36px; }
  .cmx_ticker__list a { padding: 0 6px; gap: 10px; }
}

/* ⚠ On a phone the row is ~197px and the chip and the date took half of it, leaving 99px for
   a headline that needed 126 - so every notice arrived already cut off. The date goes; it is
   on the notice itself, and a headline nobody can read is worth less than a date. */
/* ⚠ At 375px the row is 338 wide and its furniture was taking 208 of that: the tag 72, the
   chevron and its gap 24, 一覧を見る 88. The notice itself got 130 and arrived cut off
   mid-word. The link is shorter everywhere now; here the date and the chevron go too - the
   chevron says the row is a link, which is worth less than being able to read the row. */
@media (max-width: 640px) {
  .cmx_ticker__list time { display: none; }
  .cmx_ticker__go { display: none; }

  .cmx_ticker { gap: 9px; }
  .cmx_ticker__all { font-size: 11px; }
  .cmx_ticker__tag { padding: 3px 9px; font-size: 10px; }
}

/* ── よくある質問: a heading's own icon ───────────────────────────────────────
   Only on headings the shop gave a picture to - the class is added by the script, so a
   heading without one is not left with an empty box in front of it. */
.aFaq_list__ttl .cmx_faqSec--icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.aFaq_list__ttl .cmx_faqSec--icon::before {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 26px;
  background-image: var(--cmx-faqsec-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ── ご購入の流れ ─────────────────────────────────────────────────────────────
   Every part of this page comes from the panel now. The shells are empty until the answer
   arrives, so each one stays off the page until it has something in it - an empty banner
   should look like a page that never had one. */

/* The banner. Full width like 簡単診断's, and capped in height so a tall picture cannot
   push the page's own heading below the fold: the artwork is cropped, not scaled. */



/* ── the introduction ─────────────────────────────────────────────────────────
   Words and picture side by side, in a soft panel. They were a heading, a line of text and
   a drawing stacked one under the other down the left, which read as three loose things. */
.cmx_flowHero {
  display: none;
}

.cmx_flowHero.is-ready {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px 36px;
  align-items: center;
  padding: 28px 32px;
  background: #f7f7f8;
  border: 1px solid #ececee;
  border-radius: 18px;
}

.cmx_flowHero__ttl {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  color: #131313;
}

/* The rule under the heading, in the shop's colour rather than the theme's flat black. */
.cmx_flowHero__ttl::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 12px;
  background: var(--cmx-accent, #CA0404);
  border-radius: 2px;
}

.cmx_flowHero__read {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.9;
  color: #444;
}

.cmx_flowHero__read p { margin: 0 0 .5em; }

.cmx_flowHero__fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── the steps ────────────────────────────────────────────────────────────────
   ⚠ No connector between the boxes. There used to be a triangle under each one but the last,
   which only works while the number of steps is fixed - and the shop adds and deletes steps
   now. The numbers carry the order instead. */
.cmx_flowSteps {
  display: none;
}

.cmx_flowSteps.is-ready {
  /* ⚠ A grid, not a flex column, and `1fr` rows on purpose: in a single-column grid that
     makes every row as tall as the tallest, so the boxes are the same size however much is
     written in each. The picture is centred inside its box, so the extra space is shared
     rather than dumped at the bottom. */
  display: grid;
  grid-auto-rows: 1fr;
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

/* ⚠ The theme still owns this <ol>. `.pFlow_steps > li` carries 30px of padding-bottom to
   make room for the connector triangle, which is why the number band stopped 31px short of
   the bottom of its box - and the triangle itself is drawn by `.step_wrap::after`, which we
   no longer render. Both are turned off here rather than by dropping the theme class, which
   the rest of the page's spacing still relies on. */
.cmx_flowSteps > li {
  padding: 0;
  margin: 0;
}

/* The number band down the left, then everything else. */
.cmx_step {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: stretch;
  min-height: 210px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6e6e8;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.cmx_step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cmx-accent, #CA0404);
  color: #fff;
}

.cmx_step__num span {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Picture and words. `center` is what puts the drawing level with the middle of the text
   rather than pinned to the top of the box. */
.cmx_step__main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
}

.cmx_step__main.is-noFigure {
  grid-template-columns: minmax(0, 1fr);
}

.cmx_step__fig img {
  display: block;
  width: 100%;
  height: auto;
}

.cmx_step__ttl {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: #131313;
}

.cmx_step__text {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}

.cmx_step__text p { margin: 0 0 .6em; }
.cmx_step__text p:last-child { margin-bottom: 0; }

/* The grey bar. Optional, per box - drawn only where the shop wrote one. */
.cmx_step__note p {
  margin: 0;
}

.cmx_step__note p + p {
  margin-top: .4em;
}

.cmx_step__note {
  margin: 14px 0 0;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  background: #f0f0f2;
  border-left: 4px solid #c9c9ce;
  border-radius: 0 8px 8px 0;
}

/* The buttons always sit here, at the foot of the words - the same place in every box that
   has any, so a page of boxes still lines up when only some of them offer one. */
.cmx_step__cv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 18px;
}

.cmx_step__form,
.cmx_step__line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
}

.cmx_step__form { background: var(--cmx-accent, #CA0404); }

/* LINE's own green, kept deliberately: Japanese customers recognise the colour. */
.cmx_step__line { background: #06c755; }

.cmx_step__tel {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  color: #131313;
  text-decoration: none;
}

/* ⚠ The theme underlines every <a> in the page body and turns it blue on hover - its own
   default, inherited from the browser's. On these three that read as broken links rather
   than as buttons. Every state is stated here, including :visited, which is where the blue
   was coming from after the first click. */
.cmx_step__cv a,
.cmx_step__cv a:link,
.cmx_step__cv a:visited,
.cmx_step__cv a:hover,
.cmx_step__cv a:focus,
.cmx_step__cv a:active {
  text-decoration: none;
}

.cmx_step__form,
.cmx_step__form:link,
.cmx_step__form:visited,
.cmx_step__form:hover,
.cmx_step__form:focus,
.cmx_step__form:active,
.cmx_step__line,
.cmx_step__line:link,
.cmx_step__line:visited,
.cmx_step__line:hover,
.cmx_step__line:focus,
.cmx_step__line:active {
  color: #fff;
}

.cmx_step__tel,
.cmx_step__tel:link,
.cmx_step__tel:visited,
.cmx_step__tel:hover,
.cmx_step__tel:focus,
.cmx_step__tel:active {
  color: #131313;
}

.cmx_step__hours,
.cmx_step__tel:hover .cmx_step__hours {
  color: #5f5f5f;
}

/* A press still has to feel like a press - it just does it by dimming, not by turning blue. */
.cmx_step__form:hover,
.cmx_step__line:hover {
  opacity: .88;
}

.cmx_step__tel:hover {
  text-decoration: none;
  opacity: .75;
}

.cmx_step__hours {
  font-size: 12px;
  font-weight: 500;
  color: #5f5f5f;
}

/* ── the notes ────────────────────────────────────────────────────────────────
   <details> panels, so they open with a keyboard and need no script of ours. */
.cmx_flowNotes {
  display: none;
}

.cmx_flowNotes.is-ready {
  display: block;
  margin: 44px 0 0;
}

.cmx_flowNote {
  border: 1px solid #e6e6e8;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
}

.cmx_flowNote__ttl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #131313;
  cursor: pointer;
  list-style: none;
}

/* The default marker, gone in both dialects, replaced by one that turns. */
.cmx_flowNote__ttl::-webkit-details-marker { display: none; }

.cmx_flowNote__ttl::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cmx-accent, #CA0404);
  border-bottom: 2px solid var(--cmx-accent, #CA0404);
  transform: rotate(-45deg);
  transition: transform .2s;
}

.cmx_flowNote[open] > .cmx_flowNote__ttl::before {
  transform: rotate(45deg);
}

.cmx_flowNote__body {
  padding: 0 20px 18px 40px;
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}

.cmx_flowNote__body p { margin: 0 0 .7em; }
.cmx_flowNote__body ul { margin: 0; padding-left: 1.2em; }
.cmx_flowNote__body li { margin-bottom: .4em; list-style: disc; }

@media (max-width: 900px) {
  .cmx_flowHero.is-ready {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 20px;
  }

  .cmx_flowHero__fig {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {

  .cmx_step {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 0;
  }

  .cmx_step__num span { font-size: 28px; }

  /* The picture goes above the words rather than beside them: at this width a two-column
     row leaves both halves too narrow to read. */
  .cmx_step__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px 16px;
  }

  .cmx_step__fig {
    max-width: 200px;
    margin: 0 auto;
  }

  .cmx_step__ttl { font-size: 20px; }

  .cmx_step__form,
  .cmx_step__line {
    flex: 1 1 100%;
    min-width: 0;
  }

  .cmx_step__tel { font-size: 21px; }

  .cmx_flowNote__body { padding-left: 20px; }
}


/* ── お問い合わせ ─────────────────────────────────────────────────────────────
   One page where there were two. /contact/ carried a heading and nothing else; the words,
   the cards and the form were on /contact/inquiry/, whose form did not work at all.

   Laid out to be read without scrolling to the bottom: the ways to reach the shop are a row
   of cards, and the form is a grid rather than twelve stacked fields. */



.cmx_contact {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

.cmx_contact__lead {
  display: none;
}

.cmx_contact__lead.is-ready {
  display: block;
  max-width: 44em;
  margin: 0 auto 30px;
  font-size: 15px;
  line-height: 1.95;
  color: #555;
  text-align: center;
}

.cmx_contact__lead p { margin: 0 0 .6em; }

/* ── the four ways to reach the shop, on almost every page ───────────────────
   お電話でのお問い合わせ / ご来店 / 仮審査申し込みフォーム / LINE, at the foot of nearly every
   page - so this is the most repeated design on the site, and it was still the copied one:
   flat grey boxes two across, the icon as a glyph beside the heading, and a 300px salmon
   pill floating in the middle of each card.

   ⚠ Four across, not two. The column count is the first thing anyone reads as different,
   and these four are short enough to take it. Two across on a tablet, one on a phone.

   ⚠ `grid-auto-rows: 1fr` stays. The theme's wrapping flex row equalised each ROW on its
   own, so the top two came out 307px and the bottom two 227px - two pairs rather than one
   set of four. */
.md_cv__wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
  /* ⚠ The bottom margin the theme put on every item was also what held the last row off the
     footer. Zeroing it for the grid left the boxes flush against the footer on every page
     that carries them, so the space comes back here - once, under the block. */
  margin-bottom: 34px;
}

.md_cv__wrap > li {
  width: auto;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 43, 128, .06);
  transition: border-color .15s, box-shadow .15s;
}

.md_cv__wrap > li:hover {
  border-color: #cfdaf0;
  box-shadow: 0 14px 32px rgba(0, 43, 128, .11);
}

/* Equal boxes only help if what is inside them lines up too: the button goes to the foot of
   every box rather than following however much text is above it. */
.md_cv__wrap > li > .innr {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  padding: 26px 20px 22px;
}

/* ── the heading, with its icon above it ─────────────────────────────────────
   The theme's `.md_icon` is one element carrying both: the words, and the drawing in a
   ::before pinned to its left. Making the element a block with room at the top and moving
   the ::before to the top centre turns the same one element into two stacked rows - no
   change to what the script builds.

   ⚠ The disc is `background-color` on that same ::before, under the drawing it already
   carries, with `background-size: auto 46%` to leave a margin inside the circle. Pale blue
   rather than a brand fill: these icons are drawn in the shop's red and navy, and on a
   navy disc half of each one would disappear. */
.md_cv__wrap > li .md_cv__ttl {
  margin: 0 0 14px;
  text-align: center;
}

.md_cv__wrap > li .md_cv__ttl .md_icon {
  display: block;
  padding: 62px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #002b80;
}

.md_cv__wrap > li .md_cv__ttl .md_icon::before {
  top: 0;
  left: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #eef2fb;
  background-size: auto 46%;
  background-position: center center;
  transform: translateX(-50%);
}

/* Left-aligned: two of the four are an address and a list of hours, and centred prose is
   harder to read than a centred label. */
.md_cv__wrap > li .summary {
  padding-top: 0;
  font-size: 14px;
  line-height: 1.85;
  color: #3a4150;
  text-align: left;
}

.md_cv__wrap > li .summary p { margin: 0 0 .5em; }
.md_cv__wrap > li .summary p:last-child { margin-bottom: 0; }

/* ── the button ──────────────────────────────────────────────────────────────
   Across the foot of the card rather than a pill in the middle of it. */
.md_cv__wrap > li .md_cv__btn {
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
}

.md_cv__wrap > li .md_cv__btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: none;
  min-height: 50px;
  margin: 0;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: var(--cmx-accent, #CA0404);
  border-radius: 10px;
  transition: filter .15s;
}

.md_cv__wrap > li .md_cv__btn a::after {
  content: "\203a";
  font-weight: 700;
  line-height: 1;
}

.md_cv__wrap > li .md_cv__btn a:hover,
.md_cv__wrap > li .md_cv__btn a:focus-visible {
  filter: brightness(1.12);
}

/* The map is a place, not an offer - navy keeps the one red button per card the one that
   asks for something. */
.md_cv__wrap > li .md_cv__btn.googlemap a {
  background: #002b80;
}

/* LINE's own green, and the current one: the theme still carried #00b900 from years ago. */
.md_cv__wrap > li .md_cv__btn.line a {
  background: #06c755;
}

@media screen and (max-width: 1180px) {
  .md_cv__wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media screen and (max-width: 660px) {
  .md_cv__wrap {
    grid-template-columns: minmax(0, 1fr);
    /* ⚠ Equal rows are switched off here. They exist so the buttons of cards standing side
       by side line up; one card to a row has nothing to line up with, and all it did was
       stretch the shortest card - お電話でのお問い合わせ - to the height of the tallest and
       leave a hand's width of nothing above its button. */
    grid-auto-rows: auto;
    gap: 14px;
    margin-bottom: 22px;
  }

  .md_cv__wrap > li > .innr {
    padding: 22px 18px 20px;
  }

  .md_cv__wrap > li .md_cv__ttl .md_icon {
    padding-top: 54px;
    font-size: 16px;
  }

  .md_cv__wrap > li .md_cv__ttl .md_icon::before {
    width: 46px;
    height: 46px;
  }

  .md_cv__wrap > li:hover {
    border-color: #e4eaf4;
    box-shadow: 0 10px 26px rgba(0, 43, 128, .06);
  }
}

/* ── the form ─────────────────────────────────────────────────────────────── */
.cmx_contact__form {
  display: none;
}

.cmx_contact__form.is-ready {
  display: block;
  padding: 30px 32px;
  background: #f7f7f8;
  border: 1px solid #ececee;
  border-radius: 18px;
}

.cmx_cForm__ttl {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #131313;
  text-align: center;
}

.cmx_cForm__lead {
  margin: 10px auto 24px;
  max-width: 42em;
  font-size: 14px;
  line-height: 1.9;
  color: #555;
  text-align: center;
}

.cmx_cForm__lead p { margin: 0; }

/* Two, three or four across depending on the field - the address block is what made the old
   form a single column twelve rows long. */
.cmx_cForm__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.cmx_cField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cmx_cField--full { grid-column: span 12; }
.cmx_cField--half { grid-column: span 6; }
.cmx_cField--third { grid-column: span 4; }
.cmx_cField--quarter { grid-column: span 3; }

.cmx_cField__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #444;
}

.cmx_cField__must {
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border-radius: 4px;
}

.cmx_cField input,
.cmx_cField select,
.cmx_cField textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
  color: #131313;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 9px;
  appearance: none;
}

.cmx_cField select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
  padding-right: 32px;
}

.cmx_cField textarea {
  resize: vertical;
  line-height: 1.7;
}

.cmx_cField input:focus,
.cmx_cField select:focus,
.cmx_cField textarea:focus {
  outline: 2px solid var(--cmx-accent, #CA0404);
  outline-offset: -2px;
  border-color: transparent;
}

/* ⚠ The honeypot, hidden from people without display:none - some bots skip fields that are
   display:none, and this one has to look fillable to them. */
.cmx_cForm__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cmx_cForm__note {
  margin: 16px 0 0;
  font-size: 13px;
  color: #5f5f5f;
}

.cmx_cForm__send {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 18px auto 0;
  padding: 15px 24px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.cmx_cForm__send:hover { opacity: .9; }
.cmx_cForm__send:disabled { opacity: .55; cursor: default; }

.cmx_cForm__says {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.cmx_cForm__says.is-ok { color: #07783a; }
.cmx_cForm__says.is-bad { color: #c8000f; }

@media (max-width: 767px) {

  .cmx_contact { padding: 0 16px 16px; }

  .cmx_contact__form.is-ready { padding: 22px 16px; }

  /* One column: at this width a half-width field is too narrow to type an address into. */
  .cmx_cField--half,
  .cmx_cField--third { grid-column: span 12; }
  .cmx_cField--quarter { grid-column: span 6; }

  .cmx_cForm__ttl { font-size: 19px; }
}


/* ── カーマックスの強み ───────────────────────────────────────────────────────
   These were three flat 4:3 pictures with every word baked into them. Rebuilt as markup, so
   the boxes grow with whatever the shop writes and the text stays sharp on a phone.

   The look is kept: white panel, thin accent frame, a big number, a drawing in the middle,
   speech bubbles, and a grey box of ticked rows. */
.cmx_strengths {
  display: none;
}

.cmx_strengths.is-ready {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 0;
  /* ⚠ The theme carried its 60px of breathing room in an `l_pt60` class on this <ul>, and the
     build step that emptied the list did not carry that class over - so the section heading
     sat flush against the top of panel 1. The space belongs here rather than in a class the
     transform has to remember. */
  padding: 54px 0 0;
  list-style: none;
}

/* ── the section heading ──────────────────────────────────────────────────────
   Scoped to this section: the theme's own heading is a left-aligned line with an animated
   bar sliding in from the left, which read as unfinished rather than as a title. Centred,
   with a short rule under it - the shape a Japanese page uses for a section title. */
.pLoan_strength .pLoan_sec__ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.4;
  color: #131313;
  text-align: center;
}

.pLoan_strength .pLoan_sec__ttl::after {
  content: "";
  width: 60px;
  height: 4px;
  background: var(--cmx-accent, #CA0404);
  border-radius: 2px;
}

/* The theme's sliding bar belonged to the old left-aligned treatment. */
.pLoan_strength .pLoan_sec__ttl .slide_in__bars {
  display: none;
}

.cmx_str {
  padding: 34px 38px 32px;
  background: #fff;
  border: 2px solid var(--cmx-accent, #CA0404);
  border-radius: 6px;
}

/* ── the heading ──────────────────────────────────────────────────────────── */
.cmx_str__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.cmx_str__num {
  flex: 0 0 auto;
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
  color: var(--cmx-accent, #CA0404);
  font-variant-numeric: tabular-nums;
}

.cmx_str__headWords {
  min-width: 0;
}

.cmx_str__ttl {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.35;
  color: #131313;
}

/* The pale highlight behind the sub-line, as the picture had it. */
.cmx_str__sub {
  display: inline-block;
  margin: 10px 0 0;
  padding: 2px 10px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  color: #131313;
  background: #fdeaea;
  border-radius: 4px;
}

/* ── the drawing and its bubbles ──────────────────────────────────────────────
   ⚠ A row, not absolute positions. In the picture the bubbles floated around the drawing at
   fixed points, which is exactly what breaks the moment a line gets longer - the whole
   reason these stopped being pictures. */
.cmx_str__stage {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: center;
  margin-top: 26px;
}

.cmx_str__art {
  position: relative;
  color: var(--cmx-accent, #CA0404);
}

.cmx_str__art svg,
.cmx_str__art img {
  display: block;
  width: 100%;
  height: auto;
}

/* The drawing and the caption under it: one column of the panel. */
.cmx_str__side {
  min-width: 0;
}

/* The figure sits in the middle of the drawing - inside the ring, over the bars.
   ⚠ 30%, and the number is worked out rather than guessed: the ring's hole is 57% of the
   box, so its radius is 28.5%, and the largest square that fits inside a circle is the
   radius times √2 - about 40% of the box. Centred, that leaves 30% of padding on each
   side. Anything inside this box is inside the ring, by construction and not by luck.
   Two earlier values (18%, then 21%) were eyeballed, and both let the text's corners cross
   the ring while looking fine with the short caption that happened to be there. */
.cmx_str__centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
  padding: 30%;
}

/* The caption. It lives under the drawing, not in it, so the shop can write as much as it
   likes: a longer line wraps and makes the panel taller, which is what every other part of
   these panels already does. */
.cmx_str__note {
  margin: 14px 0 0;
  font-size: clamp(13px, 1.7vw, 17px);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: var(--cmx-accent, #CA0404);
}

/* The bar chart has no hole to write in - the bars fill the middle. So its figure sits above
   the drawing instead of over it, which is also how the picture had it. */
.cmx_str__art--chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cmx_str__art--chart .cmx_str__centre {
  position: static;
  order: -1;
  padding: 0;
}

.cmx_str__figure {
  font-size: clamp(30px, 5.4vw, 56px);
  font-weight: 900;
  line-height: 1;
  color: var(--cmx-accent, #CA0404);
}

/* ⚠ This was briefly `font-size: 17cqw` with `container-type: inline-size` on the drawing,
   to tie the number to the ring rather than to the window. It cost more than it bought: an
   element with inline-size containment contributes nothing to a parent that sizes to its
   contents, and the drawing's column does exactly that on a phone - so all three drawings
   collapsed to the width of their caption. If it is ever worth doing again, the column needs
   a definite width first. */

.cmx_str__bubbles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each bubble grows with its own line, and the tail is drawn rather than baked in. */
.cmx_str__bubbles > li {
  position: relative;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #131313;
  background: #fff;
  border: 2px solid var(--cmx-accent, #CA0404);
  border-radius: 14px;
}

.cmx_str__bubbles > li::before,
.cmx_str__bubbles > li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  transform: translateY(-50%);
}

.cmx_str__bubbles > li::before {
  border-right-color: var(--cmx-accent, #CA0404);
  margin-right: -1px;
}

.cmx_str__bubbles > li::after {
  border-right-color: #fff;
  margin-right: -4px;
}

/* ── the paragraph ────────────────────────────────────────────────────────── */
.cmx_str__body {
  margin-top: 26px;
  font-size: 16px;
  line-height: 2;
  color: #444;
}

.cmx_str__body p { margin: 0 0 .7em; }
.cmx_str__body p:last-child { margin-bottom: 0; }

/* ── the ticked rows ──────────────────────────────────────────────────────── */
.cmx_str__box {
  margin-top: 26px;
  padding: 22px 24px;
  background: #f4f4f5;
  border-radius: 14px;
}

.cmx_str__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmx_str__items > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #222;
  background: #fff;
  border-radius: 9px;
}

/* The tick, drawn: a filled circle with a check cut into it. */
.cmx_str__items > li::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--cmx-accent, #CA0404) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6 L4.6 8 L11 1.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 9px no-repeat;
}

.cmx_str__foot {
  margin: 16px 0 0;
  padding-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #444;
  text-align: center;
  border-top: 1px solid #e2e2e4;
}

@media (max-width: 900px) {
  .cmx_str { padding: 26px 22px 24px; }

  .cmx_str__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  /* A definite width, then capped and centred: an `auto` margin on a grid item with no
     width of its own makes the box shrink to fit its contents, which is a quiet dependency
     on what happens to be inside it. */
  .cmx_str__side {
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
  }

  /* The tail points up at the drawing once the bubbles sit under it. */
  .cmx_str__bubbles > li::before,
  .cmx_str__bubbles > li::after {
    top: auto;
    bottom: 100%;
    left: 28px;
    right: auto;
    transform: none;
    border-right-color: transparent;
  }

  .cmx_str__bubbles > li::before {
    border-bottom-color: var(--cmx-accent, #CA0404);
    margin: 0 0 -1px;
  }

  .cmx_str__bubbles > li::after {
    border-bottom-color: #fff;
    margin: 0 0 -4px;
  }
}

@media (max-width: 600px) {
  .cmx_str { padding: 20px 16px 18px; }
  .cmx_str__num { font-size: 40px; }
  .cmx_str__ttl { font-size: 24px; }
  .cmx_str__sub { font-size: 17px; }
  .cmx_str__bubbles > li { font-size: 15px; padding: 11px 16px; }
  .cmx_str__items > li { font-size: 15px; }
  .cmx_str__box { padding: 16px 14px; }
}


/* ── 自社ローンについて: the rest of the page ─────────────────────────────────
   Every section here now comes from the panel. Each shell stays off the page until it has
   something in it, so clearing a section removes it rather than leaving a gap. */
/* ⚠ `overflow-anchor: none` on every shell this script fills. Without it the browser keeps
   what is on screen in place as content is inserted above it, which on a page built this way
   drags the view down section by section. Belt and braces with the scroll handling in
   site.js. */
.cmx_loanHeroWrap,
.cmx_loanPoints,
.cmx_loanWorries,
.cmx_loanAbout,
.cmx_strengths,
.cmx_contact,
.pFlow,
.md_cars__entry {
  overflow-anchor: none;
}

.cmx_loanHeroWrap,
.cmx_loanPoints,
.cmx_loanWorries,
.cmx_loanAbout {
  display: none;
}

.cmx_loanHeroWrap.is-ready,
.cmx_loanPoints.is-ready,
.cmx_loanWorries.is-ready,
.cmx_loanAbout.is-ready {
  display: block;
}

.cmx_loanHeroWrap.is-ready {
  margin-bottom: 8px;
}

.cmx_loanHeroWrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── the banner, set in type ──────────────────────────────────────────────────
   It was a picture of two lines and a badge. In type it is sharp at any size, readable by a
   search engine, and the shop edits the words.

   The sizes are in `clamp` so the two lines fill the width the picture used to fill, on a
   phone and on a desktop, without a media query for every step between. */
.cmx_loanBand {
  padding: 26px 20px 30px;
  text-align: center;
}

.cmx_loanBand__l1,
.cmx_loanBand__l2 {
  margin: 0;
  font-weight: 900;
  line-height: 1.32;
  color: #131313;
  letter-spacing: -.01em;
  /* On a phone the second line cannot hold 14 characters at a readable size, so it wraps.
     Balanced, it wraps into two even rows rather than thirteen characters and a stray one.
     Ignored by browsers that do not know it, which simply wrap as before. */
  text-wrap: balance;
}

/* ⚠ The second line is 14 full-width characters. Sized so it stays on one line: at 6vw it
   was wrapping a single character onto a row of its own, which a picture of the same words
   never did and which reads as broken. */
.cmx_loanBand__l1 {
  font-size: clamp(22px, 4.6vw, 54px);
}

.cmx_loanBand__l2 {
  margin-top: 4px;
  font-size: clamp(24px, 5vw, 60px);
}

/* The shop underlines a word in the editor and gets the accent rule the picture had - drawn
   under the text rather than through it, which is what a browser's own underline does. */
.cmx_loanBand u {
  text-decoration: none;
  border-bottom: .1em solid currentColor;
  padding-bottom: .04em;
}

/* The little outlined bubble, with a tail pointing up at the line above it. */
.cmx_loanBand__badge {
  position: relative;
  display: inline-block;
  margin: 26px 0 0;
  padding: 9px 22px;
  font-size: clamp(13px, 1.9vw, 20px);
  font-weight: 900;
  line-height: 1.5;
  color: #131313;
  background: #fff;
  border: 2px solid var(--cmx-accent, #CA0404);
  border-radius: 999px;
}

.cmx_loanBand__badge::before,
.cmx_loanBand__badge::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: 100%;
  border: 9px solid transparent;
}

.cmx_loanBand__badge::before {
  border-bottom-color: var(--cmx-accent, #CA0404);
  margin-bottom: -1px;
}

.cmx_loanBand__badge::after {
  border-bottom-color: #fff;
  margin-bottom: -4px;
}

@media (max-width: 600px) {
  .cmx_loanBand {
    padding: 18px 14px 22px;
  }

  .cmx_loanBand__badge {
    margin-top: 18px;
    padding: 8px 16px;
  }

  .cmx_loanBand__badge::before,
  .cmx_loanBand__badge::after {
    left: 22px;
  }
}

/* The section headings, in one shape across the page. */
/* ⚠ The class is doubled. recolour.py writes `.pLoan_sec__ttl { color: #E20A17 }` into the
   generated block at the foot of this file, and these headings carry that class too - so a
   single `.cmx_loanSecTtl` ties on specificity and loses on position. Doubling wins the tie
   wherever the generated block ends up. */
.cmx_loanSecTtl.cmx_loanSecTtl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 34px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
  color: #131313;
  text-align: center;
}

.cmx_loanSecTtl::after {
  content: "";
  width: 60px;
  height: 4px;
  background: var(--cmx-accent, #CA0404);
  border-radius: 2px;
}

/* ── why the shop is chosen ───────────────────────────────────────────────────
   Picture on one side, words on the other, alternating - the shape a Japanese landing page
   uses for a run of reasons, and it keeps a long paragraph readable. */
/* A grid with `1fr` rows rather than a flex column: in a single-column grid every row takes
   the height of the tallest, so the three boxes match however much is written in each. The
   coloured panel then runs the full height of all three equally. */
.cmx_loanPoints__list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 34px;
}

/* The picture sits in a filled panel down the left, the way the numbered steps on
   ご購入の流れ carry their number - about a fifth of the box, full height, drawing centred.
   `overflow:hidden` is what lets the panel take the box's rounded corner. */
.cmx_loanPoint {
  display: grid;
  grid-template-columns: 21% minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ececee;
  border-radius: 16px;
}

.cmx_loanPoint__fig {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: var(--cmx-accent, #CA0404);
  /* The drawings are white on the panel; `currentColor` carries that into the SVG. */
  color: #fff;
}

.cmx_loanPoint__fig svg,
.cmx_loanPoint__fig img {
  display: block;
  width: 100%;
  max-width: 108px;
  height: auto;
}

.cmx_loanPoint__words {
  padding: 26px 28px;
}

.cmx_loanPoint__ttl {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: #131313;
}

/* The rule under a reason's heading, in the shop's colour. */
.cmx_loanPoint__ttl::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  background: var(--cmx-accent, #CA0404);
  border-radius: 2px;
}

.cmx_loanPoint__body {
  font-size: 15px;
  line-height: 2;
  color: #444;
}

.cmx_loanPoint__body p { margin: 0 0 .7em; }
.cmx_loanPoint__body p:last-child { margin-bottom: 0; }

/* ── the worries ──────────────────────────────────────────────────────────────
   However many there are: the grid fits as many across as the width allows rather than
   assuming six. */
/* ⚠ The theme paints a decorative white-to-grey panel over this whole section with
   `.pLoan_issue::after` - 885x824, absolutely positioned. Its own markup escaped that by
   sitting in wrappers the theme had already given `z-index: 2`; ours did not, so the panel
   covered the pictures and only the heading showed (the heading carries `.pLoan_sec__ttl`,
   which the theme stacks at 2). Everything we put in this section has to be lifted too. */
.cmx_loanWorries > * {
  position: relative;
  z-index: 2;
}

/* ⚠ Three a row, stated. `auto-fit` with a 180px minimum fitted five across at this width and
   left the sixth alone on a row of its own, which read as broken rather than as a grid. */
.cmx_loanWorries__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmx_loanWorries__grid > li {
  text-align: center;
}

.cmx_loanWorries__grid img {
  display: block;
  width: 100%;
  height: auto;
}

.cmx_loanWorries__cap {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: #444;
}

.cmx_loanWorries__closing {
  margin: 30px auto 0;
  max-width: 40em;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.8;
  color: #131313;
  text-align: center;
}

/* ── how it works ─────────────────────────────────────────────────────────── */
.cmx_loanAbout.is-ready {
  padding: 54px 0 0;
}

.cmx_loanAbout__lead {
  margin: 0 auto;
  max-width: 40em;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.7;
  color: #131313;
  text-align: center;
}

.cmx_loanAbout__body {
  margin: 16px auto 0;
  max-width: 44em;
  font-size: 15px;
  line-height: 2;
  color: #444;
  text-align: center;
}

.cmx_loanAbout__body p { margin: 0 0 .6em; }

.cmx_loanAbout__diagram,
.cmx_loanAbout__copy {
  margin: 30px 0 0;
}

.cmx_loanAbout__diagram img,
.cmx_loanAbout__copy img,
.cmx_loanAbout__diagnose img {
  display: block;
  width: 100%;
  height: auto;
}

/* The band the 簡単診断 banner sits on.
   ⚠ This is the one thing the page asks for, and it used to be a picture floating after the
   diagram with nothing around it - and the same picture again a few hundred pixels below,
   from the theme's own markup. The duplicate is gone; this gives the survivor a place. */
.cmx_loanCta {
  margin: 46px auto 0;
  max-width: 760px;
  padding: 30px 28px 32px;
  border: 2px solid var(--cmx-accent, #CA0404);
  border-radius: 16px;
  /* ⚠ White, not the pale red band it used to have. The artwork inside has a white ground
     of its own, so on a colour it read as a screenshot pasted onto the page rather than as
     something the page was offering. */
  background: #fff;
  box-shadow: 0 10px 30px rgba(202, 4, 4, .08);
  text-align: center;
}

.cmx_loanCta__ttl {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--cmx-accent, #CA0404);
}

.cmx_loanCta__text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}

@media (max-width: 767px) {
  .cmx_loanCta__ttl { font-size: 18px; }
  .cmx_loanCta__text { margin-bottom: 16px; font-size: 14px; }
}

/* With no picture uploaded the wording and the button are the whole block, so the button is
   shown at every width rather than only on a phone. */
.cmx_loanCta__go--solo,
.cmx_loanCta__go--solo:link,
.cmx_loanCta__go--solo:visited,
.cmx_loanCta__go--solo:hover,
.cmx_loanCta__go--solo:active {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--cmx-accent, #CA0404);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.cmx_loanAbout__diagnose {
  display: block;
  margin: 0 auto;
  max-width: 680px;
  border-radius: 12px;
  /* The artwork's own card has a white ground, so a shadow reads as the card lifting
     rather than as a box around a picture. */
  transition: transform .18s ease, box-shadow .18s ease;
}

.cmx_loanAbout__diagnose:hover,
.cmx_loanAbout__diagnose:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(202, 4, 4, .2);
}

/* The artwork says this itself at desktop size, so the button is not drawn there. */
.cmx_loanCta__go {
  display: none;
}

@media (max-width: 767px) {
  .cmx_loanCta {
    margin-top: 32px;
    padding: 20px 14px;
    border-radius: 10px;
  }

  /* ⚠ At 287px wide the picture's own bottom line is about six pixels tall. This is the
     same sentence at a size somebody can read and a target a thumb can hit. */
  .cmx_loanCta__go {
    display: block;
    margin: 14px auto 0;
    max-width: 320px;
    padding: 13px 18px;
    border-radius: 999px;
    background: var(--cmx-accent, #CA0404);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
  }

  .cmx_loanCta__go::after {
    content: ' ›';
    font-weight: 700;
  }

  /* A lift is a pointer's feedback. A phone gets a press instead. */
  .cmx_loanAbout__diagnose:hover,
  .cmx_loanAbout__diagnose:focus-visible {
    transform: none;
    box-shadow: none;
  }

  .cmx_loanAbout__diagnose:active { opacity: .85; }
}

@media (max-width: 767px) {
  .cmx_loanSecTtl {
    font-size: 23px;
    margin-bottom: 26px;
  }

  /* The panel keeps its side but narrows: a fifth of a phone is too little to draw in. */
  .cmx_loanPoint {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .cmx_loanPoint__fig {
    padding: 14px 10px;
  }

  .cmx_loanPoint__fig svg,
  .cmx_loanPoint__fig img {
    max-width: 60px;
  }

  .cmx_loanPoint__words {
    padding: 18px 16px;
  }

  .cmx_loanPoint__ttl { font-size: 19px; }

  .cmx_loanWorries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .cmx_loanWorries__closing { font-size: 16px; }
  .cmx_loanAbout__lead { font-size: 17px; }
  .cmx_loanAbout.is-ready { padding-top: 40px; }
}


/* ── 私たちについて ───────────────────────────────────────────────────────────
   The page was a heading over nothing. Each shell stays off the page until it is filled, so
   clearing a section in the panel removes it rather than leaving a gap. */




.cmx_about {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

.cmx_about__lead.is-ready {
  max-width: 40em;
  margin: 0 auto 8px;
  font-size: 17px;
  line-height: 2;
  color: #444;
  text-align: center;
}

.cmx_about__lead p { margin: 0 0 .6em; }

.cmx_about__message.is-ready,
.cmx_about__promises.is-ready,
.cmx_about__profile.is-ready,
.cmx_about__listings.is-ready {
  padding-top: 50px;
}

.cmx_about__words {
  max-width: 42em;
  margin: 0 auto;
  font-size: 16px;
  line-height: 2.1;
  color: #444;
}

.cmx_about__words p { margin: 0 0 1em; }
.cmx_about__words p:last-child { margin-bottom: 0; }

/* ── the three promises ───────────────────────────────────────────────────── */
.cmx_about__promiseList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
}

.cmx_promise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 22px;
  text-align: center;
  background: #fff;
  border: 1px solid #ececee;
  border-radius: 16px;
}

/* The same filled disc the loan page's reasons use, so the two pages read as one site. */
.cmx_promise__fig {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--cmx-accent, #CA0404);
  color: #fff;
}

.cmx_promise__fig svg,
.cmx_promise__fig img {
  display: block;
  width: 46px;
  height: 46px;
}

.cmx_promise__ttl {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  color: #131313;
}

.cmx_promise__body {
  font-size: 15px;
  line-height: 1.95;
  color: #555;
  text-align: left;
}

.cmx_promise__body p { margin: 0; }

/* ── 会社概要 ─────────────────────────────────────────────────────────────────
   A description list, which is what a label-and-value table is. Two columns on a desktop,
   stacked on a phone - a 10em label column leaves nothing for an address at 375px. */
.cmx_about__facts {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid #ececee;
}

.cmx_about__facts dt,
.cmx_about__facts dd {
  margin: 0;
  padding: 15px 16px;
  border-bottom: 1px solid #ececee;
  font-size: 15px;
  line-height: 1.8;
}

.cmx_about__facts dt {
  font-weight: 700;
  color: #333;
  background: #fafafa;
}

.cmx_about__facts dd {
  color: #444;
}

.cmx_about__facts dd p { margin: 0; }

/* ── the outside listings ─────────────────────────────────────────────────── */
.cmx_about__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.cmx_about__link,
.cmx_about__link:link,
.cmx_about__link:visited,
.cmx_about__link:hover,
.cmx_about__link:focus,
.cmx_about__link:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 700;
  color: #131313;
  background: #fff;
  border: 2px solid var(--cmx-accent, #CA0404);
  border-radius: 999px;
  text-decoration: none;
}

.cmx_about__link:hover {
  color: #fff;
  background: var(--cmx-accent, #CA0404);
}

@media (max-width: 767px) {

  .cmx_about { padding: 0 16px 16px; }

  .cmx_about__lead.is-ready { font-size: 15px; }

  .cmx_about__message.is-ready,
  .cmx_about__promises.is-ready,
  .cmx_about__profile.is-ready,
  .cmx_about__listings.is-ready {
    padding-top: 36px;
  }

  .cmx_about__promiseList {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked: an 11em label column leaves an address nowhere to go at this width. */
  .cmx_about__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmx_about__facts dt {
    padding-bottom: 4px;
    border-bottom: 0;
  }

  .cmx_about__link {
    min-width: 0;
    flex: 1 1 100%;
  }
}


/* ── the simple pages ────────────────────────────────────────────────────────
   The two LINE landing pages and the privacy policy: a heading, an optional banner and a
   body of text, all from the panel. */




.cmx_simple {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 20px 30px;
}

.cmx_simple__body {
  font-size: 16px;
  line-height: 2.1;
  color: #444;
}

.cmx_simple__body p { margin: 0 0 1.1em; }
.cmx_simple__body p:last-child { margin-bottom: 0; }

.cmx_simple__body h3 {
  margin: 1.8em 0 .6em;
  padding-bottom: .4em;
  font-size: 19px;
  font-weight: 700;
  color: #131313;
  border-bottom: 2px solid var(--cmx-accent, #CA0404);
}

.cmx_simple__body ul,
.cmx_simple__body ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.cmx_simple__body li {
  margin-bottom: .5em;
  list-style: disc;
}

.cmx_simple__body a {
  color: var(--cmx-accent, #CA0404);
  font-weight: 700;
}

@media (max-width: 767px) {
  .cmx_simple { padding: 8px 16px 24px; }
  .cmx_simple__body { font-size: 15px; }
}


/* ── カーマックスだけの無料保証 ────────────────────────────────────────────────
   The page's six sections come from the panel. The theme's own class stays on each section
   and does all the styling; these rules only decide when a section is on the page.

   :empty rather than an is-ready class, because that is exactly the question being asked -
   a section the shop has cleared has nothing in it and should take its padding with it,
   and a section that has not been filled in yet should not leave a gap while it waits. */
section[data-cmx-care]:empty {
  display: none;
}

/* ⚠ Without this the browser holds what is on screen in place as each section lands above
   it, which walks the view down the page. Same reason as the loan page. */
.pCare section[data-cmx-care],
.md_page.care .md_page__ttl {
  overflow-anchor: none;
}

/* The footnotes are a list the shop writes in the editor; the theme only ever expected its
   own <ul>, so the editor's paragraphs are given the same shape. */
.pCare_annotations p {
  margin: 0 0 .6em;
  text-indent: -1em;
  padding-left: 1em;
}

.pCare_annotations p:last-child {
  margin-bottom: 0;
}


/* A photograph of the shop under the greeting. Wide and shallow: it is there to show the
   place is real, not to be looked at closely, and it must not push the company details off
   the first screenful. */
.cmx_about__photo {
  margin: 28px 0 0;
}

.cmx_about__photo img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

.cmx_about__photo figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

@media (max-width: 767px) {
  .cmx_about__photo { margin-top: 20px; }
  .cmx_about__photo img { max-height: 240px; }
}


/* ── the strip at the top of a page ──────────────────────────────────────────
   ⚠ The picture is centred at its own size and never cropped, and the band behind it is
   painted the colour the picture's own edge is - the two then read as one strip across the
   page. This is how 簡単診断's banner has worked since the site was built; it is the reason
   a banner here needs no fixed ratio, no safe area, and no separate answer for every screen
   width. An earlier attempt fixed the box at 5:1 with object-fit: cover, and every screen
   cropped it somewhere different.

   The background colour is set on the element by site.js, from the row. */
.cmx_pageBnr {
  display: none;
}

.cmx_pageBnr.is-ready {
  display: block;
  width: 100%;
  margin: 0 0 28px;
  padding: 0 5%;
}

.cmx_pageBnr picture {
  display: block;
}

.cmx_pageBnr img {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
}

/* On a phone there is no room to give away: the picture goes edge to edge. */
@media screen and (max-width: 767px) {
  .cmx_pageBnr.is-ready { padding: 0; margin-bottom: 20px; }
}


/* ── the news and articles section ───────────────────────────────────────────
   The list was a row of dates and headlines - right for five campaign notices, wrong for a
   section that has to carry articles somebody arrives on from a search. A card with the
   section, the date and the first two lines tells a reader what they are about to open. */
.cmx_news__lede {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

.cmx_news__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}

.cmx_news__tabs a {
  padding: 7px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  background: #fff;
}

.cmx_news__tabs a:link,
.cmx_news__tabs a:visited { color: #444; text-decoration: none; }

.cmx_news__tabs a:hover,
.cmx_news__tabs a:focus {
  border-color: var(--cmx-accent, #CA0404);
  color: var(--cmx-accent, #CA0404);
  text-decoration: none;
}

.cmx_news__tabs a.is-on {
  background: var(--cmx-accent, #CA0404);
  border-color: var(--cmx-accent, #CA0404);
  color: #fff;
}

.cmx_news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.cmx_news__grid > li {
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  /* Equal height whatever the headline runs to, so the row does not step. */
  display: flex;
}

.cmx_news__grid > li > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 18px;
}

.cmx_news__grid > li > a:link,
.cmx_news__grid > li > a:visited { color: inherit; text-decoration: none; }

.cmx_news__grid > li > a:hover .cmx_news__ttl,
.cmx_news__grid > li > a:focus .cmx_news__ttl { color: var(--cmx-accent, #CA0404); }

.cmx_news__shot {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4f4f4;
}

.cmx_news__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cmx_news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 18px 0;
  font-size: 13px;
  color: #888;
}

.cmx_news__tag {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  background: #fdecec;
  color: var(--cmx-accent, #CA0404);
}

a.cmx_news__tag:link,
a.cmx_news__tag:visited { color: var(--cmx-accent, #CA0404); text-decoration: none; }

.cmx_news__ttl {
  margin: 8px 18px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #131313;
}

.cmx_news__sum {
  margin: 8px 18px 0;
  font-size: 13px;
  line-height: 1.8;
  color: #666;
}

.cmx_news__empty {
  margin: 30px 0;
  color: #5f5f5f;
}

.cmx_news__pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 36px 0 0;
}

.cmx_news__pager a {
  min-width: 40px;
  padding: 8px 0;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
}

.cmx_news__pager a:link,
.cmx_news__pager a:visited { color: #444; text-decoration: none; }

.cmx_news__pager a.is-on {
  background: var(--cmx-accent, #CA0404);
  border-color: var(--cmx-accent, #CA0404);
  color: #fff;
}

/* ── one article ──────────────────────────────────────────────────────────── */
.cmx_news__crumbs {
  margin: 18px 0 0;
  font-size: 13px;
  color: #999;
}

.cmx_news__crumbs a:link,
.cmx_news__crumbs a:visited { color: #666; text-decoration: none; }
.cmx_news__crumbs a:hover { text-decoration: underline; }
.cmx_news__crumbs span { margin: 0 6px; }

.cmx_post {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 20px;
}

.cmx_post__head { margin: 22px 0 0; }

.cmx_post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: #888;
}

.cmx_post__ttl {
  margin: 12px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  color: #131313;
}

.cmx_post__lede {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.95;
  color: #555;
  padding: 14px 16px;
  background: #fafafa;
  border-left: 3px solid var(--cmx-accent, #CA0404);
}

.cmx_post__shot { margin: 24px 0 0; }

.cmx_post__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* The body is the reason the page exists, so it gets the measure and the leading of
   something meant to be read to the end. */
.cmx_post__body {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 2.05;
  color: #333;
}

.cmx_post__body p { margin: 0 0 1.4em; }
.cmx_post__body p:last-child { margin-bottom: 0; }

.cmx_post__body h3 {
  margin: 2em 0 .8em;
  padding-bottom: .45em;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: #131313;
  border-bottom: 2px solid var(--cmx-accent, #CA0404);
}

.cmx_post__body ul,
.cmx_post__body ol {
  margin: 0 0 1.4em;
  padding-left: 1.6em;
}

.cmx_post__body li { margin-bottom: .6em; }
.cmx_post__body ul > li { list-style: disc; }
.cmx_post__body ol > li { list-style: decimal; }

.cmx_post__body a {
  color: var(--cmx-accent, #CA0404);
  font-weight: 700;
}

.cmx_post__cta {
  margin: 40px 0 0;
  padding: 24px 22px;
  border-radius: 10px;
  background: #fdecec;
}

.cmx_post__ctaTtl {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--cmx-accent, #CA0404);
}

.cmx_post__ctaTxt {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #444;
}

.cmx_post__ctaBtns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
}

.cmx_post__btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--cmx-accent, #CA0404);
  font-size: 15px;
  font-weight: 700;
  background: #fff;
}

.cmx_post__btn:link,
.cmx_post__btn:visited { color: var(--cmx-accent, #CA0404); text-decoration: none; }

.cmx_post__btn--go { background: var(--cmx-accent, #CA0404); }
.cmx_post__btn--go:link,
.cmx_post__btn--go:visited { color: #fff; }

.cmx_post__more {
  max-width: 760px;
  margin: 44px auto 0;
}

.cmx_post__moreTtl {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #131313;
}

.cmx_post__more .cmx_news__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.cmx_post__back {
  margin: 34px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.cmx_post__back a:link,
.cmx_post__back a:visited { color: var(--cmx-accent, #CA0404); }

@media screen and (max-width: 1023px) {
  .cmx_news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
  .cmx_news__grid,
  .cmx_post__more .cmx_news__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cmx_post__ttl { font-size: 21px; }
  .cmx_post__body { font-size: 15px; line-height: 1.95; }
  .cmx_post__cta { padding: 20px 16px; }
  .cmx_post__btn { width: 100%; text-align: center; }
}


/* ── the drawer ──────────────────────────────────────────────────────────────
   It was thirteen entries in one column, in the order the rows happened to be added, with
   icons at whatever size each one came out of its file. The list is three named groups now,
   and every icon sits in a chip of the same size so the column of them reads as a column.

   ⚠ Everything here has to match the copy sidr shows, not the one in the page - sidr clones
   the drawer into a container of its own. These selectors are on the classes themselves for
   that reason; see the note by .sidr_column above. */
/* ⚠ 12px in #9a9a9a. Small and pale is the wrong register for a menu in Japanese, and it did
   not read as a heading at all against 15px links directly under it. Same size as the links,
   heavier, and in the brand navy so the eye can find the top of each group. */
.cmx_drawerGroup {
  margin: 0 0 6px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #002b80;
}

.sidr_column.border { padding-top: 12px; }

/* A row a thumb can hit without aiming - 54px of it, which is above the 44px anyone needs.

   ⚠ The list item's own padding is taken off here. The theme gives it 11.25px in one group,
   7px in the next and 3.5px in the third, and every one of those sat on top of this padding
   and the 38px disc: rows of 86 to 94px for one line of text, no two groups agreeing. */
/* ⚠ Named group by group. The theme writes `.sidr_nav.secondary > li` and
   `.sidr_nav.thirdry > li` - two classes each - so a one-class rule here loses to them, which
   is why the first attempt at this changed almost nothing and the three groups still
   disagreed about their own row height. */
.sidr_nav > li,
.sidr_nav.secondary > li,
.sidr_nav.thirdry > li {
  padding-top: 0;
  padding-bottom: 0;
}

/* ⚠ And the span inside the link carries the theme's own .md_icon padding - 0.75em above and
   below, 11.25px, on every row, inside the link's own padding. The horizontal padding is what
   holds the disc's place and stays. */
.sidr_nav .md_icon {
  padding-top: 0;
  padding-bottom: 0;
}

.sidr_nav > li > a,
.sidr_nav > li > .sidr_nav__ttl {
  display: block;
  /* 11px either side of a 24px line is a 46px row, with the 38px disc inside it. */
  padding: 11px 20px;
  /* One size for all three groups - the theme sets 15px, 14px and 14px through fz_ classes
     it puts on the lists, which is a difference nothing means. */
  font-size: 16px;
  line-height: 1.5;
}

.sidr_nav > li > a:link,
.sidr_nav > li > a:visited {
  color: #131313;
  text-decoration: none;
}

.sidr_nav > li + li { border-top: 1px solid #f2f2f2; }

.sidr_nav > li > a:hover,
.sidr_nav > li > a:focus { background: #fbf4f4; }

/* The icon: one size, one place, one tint behind it, whatever the file it came from. */
.sidr_nav .md_icon {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 700;
}

.sidr_nav .md_icon::before {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-repeat: no-repeat;
  /* The disc's colour, its ring and the size of the drawing inside it are set together with
     the other two contexts, further down - see "how big an icon is drawn, and where". */
}

.sidr_nav__child {
  margin: 0 0 10px;
  padding: 2px 20px 0 72px;
}

.sidr_nav__child > li + li { margin-top: 2px; }

.sidr_nav__child label,
.sidr_nav__child a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: #555;
}

/* The stock-number box reads as a search, not as the first menu entry. */

/* ⚠ Every rule below names .md_search_itemnum as well as the element’s own class, and that
   is the whole point of them. The theme writes `.md_search_itemnum input[type=text]` - one
   class, one attribute selector, one type, (0,2,1) - and an attribute selector counts as a
   class, so two classes of mine came to (0,2,0) and lost by a point. What showed was the
   theme’s grey 2em pill sitting inside my 8px bordered box, and a 24px button floating in a
   42px row because `align-self` means nothing to an absolutely positioned element. */
.cmx_drawerSearch .md_search_itemnum {
  padding: 0;
}

.cmx_drawerSearch .md_search_itemnum .searchform__itemnum {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: none;
  height: 42px;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.cmx_drawerSearch .md_search_itemnum .searchform__itemnum:focus-within {
  border-color: var(--cmx-accent, #CA0404);
}

.cmx_drawerSearch .md_search_itemnum input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-sizing: border-box;
  font-size: 15px;
  color: #131313;
}

.cmx_drawerSearch .md_search_itemnum input[type="text"]::placeholder {
  color: #98a2b3;
  font-size: 15px;
}

/* ⚠ position: static. The theme takes this out of the flow and pins it to the right of the
   input; in a flex row that is what kept it 24px tall in a 42px box. */
.cmx_drawerSearch .md_search_itemnum button {
  position: static;
  transform: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 0;
  border: 0;
  background: var(--cmx-accent, #CA0404);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
}

.cmx_drawerSearch .md_search_itemnum button:hover,
.cmx_drawerSearch .md_search_itemnum button:focus-visible {
  background: #a80303;
}

.sidr_column__ttl.top a {
  display: block;
  padding: 14px 20px;
  font-size: 16px;
}


/* The home page's heading. Clipped out of the layout, not removed from the page: a
   screen reader still reads it, and display:none would not be read at all. */
.cmx_pageH1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ── the page that is not there ──────────────────────────────────────────────
   Somebody lands here from a search result or an old LINE message. The most useful thing
   this page can do is carry them on to whatever they were actually after. */
.cmx_404 {
  max-width: 640px;
  margin: 0 auto;
  padding: 50px 0 60px;
  text-align: center;
}

.cmx_404__code {
  margin: 0;
  font-size: 60px;
  font-weight: 900;
  line-height: 1;
  color: var(--cmx-accent, #CA0404);
}

.cmx_404__ttl {
  margin: 14px 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #131313;
}

.cmx_404__txt {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 2;
  color: #666;
}

.cmx_404__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cmx_404__links a {
  display: block;
  padding: 15px 18px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
}

.cmx_404__links a:link,
.cmx_404__links a:visited { color: #131313; text-decoration: none; }

.cmx_404__links a:hover,
.cmx_404__links a:focus {
  border-color: var(--cmx-accent, #CA0404);
  color: var(--cmx-accent, #CA0404);
}

.cmx_404__home {
  margin: 26px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.cmx_404__home a:link,
.cmx_404__home a:visited { color: var(--cmx-accent, #CA0404); }

@media screen and (max-width: 767px) {
  .cmx_404 { padding: 34px 0 40px; }
  .cmx_404__code { font-size: 46px; }
  .cmx_404__ttl { font-size: 18px; }
  .cmx_404__links { grid-template-columns: minmax(0, 1fr); }
}


/* The repair-cost rows on /care/.

   The theme paints the icon with a ::before and carries a rule for rows one, two and three -
   the drawings being the copied theme's own. A row that brings its own picture uses it and
   turns that off; a row past the third with no picture keeps neither, so the gutter goes
   rather than standing empty. */
.pCare_trouble__list > li.cmx_careCost--img::before,
.pCare_trouble__list > li.cmx_careCost--bare::before {
  display: none;
}

.pCare_trouble__list > li.cmx_careCost--bare {
  padding-left: 0;
}

.cmx_careCost__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  /* The gutter is a fixed 80px against a row whose height follows its own text, so the
     drawing is fitted rather than stretched to it. */
  object-fit: contain;
  object-position: left center;
}

@media screen and (max-width: 700px) {
  .cmx_careCost__icon {
    width: 50px;
  }
}

/* ── the heading and drawer icons ───────────────────────────────────────
   The shop’s own drawings for the icons the copied theme still supplied - the shield beside
   無料保証, the bubble beside お問い合わせ, the clipboard in the drawer.

   ⚠ The class is doubled on purpose. deploy/recolour.py regenerates a block at the foot of
   this file pointing every one of these classes back at the theme’s drawing, and that block
   is always later, so an equal-specificity rule here would lose the tie. Doubling settles it
   on specificity, which survives regeneration. Same reason as the five bar icons above.

   ⚠ These say WHICH picture and nothing else. They used to set background-size too, and that
   was two bugs: `contain` overrode the drawer circle’s inset so an uploaded drawing touched the
   ring, and the rules as a whole outranked the uploaded-icon rule so half the panel’s changes
   never appeared. How big and where now belongs to the place the icon is drawn - see the three
   context blocks further down.

   ⚠ :not(.cmx_menuIcon--custom) - these are the fallback. Anything the shop uploads wins.

   ⚠ :not([class*="cmx_ic_"]) - the top bar’s items carry a theme class AND a class naming
   the shop’s own drawing (`md_icon store cmx_ic_cars`). Without this, these rules matched
   those too and beat the shop’s five on position, so 全車両一覧 and 当社について both showed
   the same shop front. Stepping aside is better than winning that tie. */
/* 無料保証 - a shield with a check */
.md_icon.care.care:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-care.webp);
}

/* お問い合わせ - a speech bubble */
.md_icon.comment.comment:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-comment.webp);
}

/* 簡単診断 - a clipboard and a magnifier */
.md_icon.diagnosis.diagnosis:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-diagnosis.webp);
}

/* よくある質問 - a question mark in a rounded square */
.md_icon.faq.faq:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-faq.webp);
}

/* お電話 - a handset */
.md_icon.phone.phone:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-phone.webp);
}

/* ご来店 - a shop front */
.md_icon.store.store:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-store.webp);
}

/* 私たちについて - a question mark in a circle */
.md_icon.about_loan.about_loan:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-about_loan.webp);
}

/* the same drawing, for the theme class of the same meaning */
.md_icon.question.question:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-about_loan.webp);
}

/* the top bar has the shop’s own; this is the fallback elsewhere */
.md_icon.car.car:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-car.webp);
}

/* likewise */
.md_icon.loan.loan:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-loan.webp);
}

/* likewise */
.md_icon.yen.yen:not([class*="cmx_ic_"]):not(.cmx_menuIcon--custom)::before {
  background-image: url(/carmax/hi-yen.webp);
}

/* ⚠ news, article and company are drawn by the theme as a FONT GLYPH, not a picture:

     .md_icon.news::before { font-family:"Font Awesome 5 Free"; content:"\f09e"; font-size:28px }

   Reading `background-image` on them returns none, which is what led me to call the slot empty
   and collapse it. It was never empty - that is the red RSS mark.

   It matters once one of them carries an uploaded picture. The picture lands behind the glyph,
   so both draw; and the slot is 2.5em by 1.75em against the ::before’s own font-size, which is
   28px here and not the menu’s 15px - the uploaded megaphone came out 70px wide and lay across
   its own label.

   So an entry with a picture drops the glyph and the 28px with it. One without keeps the
   theme’s mark, untouched. */
.md_icon.news.cmx_menuIcon--custom::before,
.md_icon.article.cmx_menuIcon--custom::before,
.md_icon.company.cmx_menuIcon--custom::before {
  content: "";
  font-size: inherit;
  left: 0;
}

/* ── the badges on a car card ─────────────────────────────────────────────
   The shop’s own 360 and video marks. Doubled class for the same reason as the icons above:
   recolour.py regenerates a rule for each of these pointing at the theme’s drawing, later in
   the file. The slot already sizes with `contain`, so neither shape can be clipped. */
.sCars_img3d a.dview.dview span::before {
  background-image: url(/carmax/icon_360v.png);
}

.sCars_img3d a.movie.movie span::before {
  background-image: url(/carmax/icon_movie.png);
}

/* ── the banner band with nothing in it ───────────────────────────────────────
   ⚠ Measured with the banner removed: the slot renders nothing and collapses to 0, but the
   band around it keeps the theme’s 40px of padding top and bottom. A shop that never uploads
   a banner gets 80 empty pixels between the header and the first thing on the page.

   So the padding belongs to the banner, not to the band: site.js adds this class when it has
   actually drawn one. Written this way round on purpose - the empty case then has no padding
   to take away later, so nothing moves after the fetch answers. */
.pTop_hero.cmx_hero {
  padding-top: 0;
  padding-bottom: 0;
}

.pTop_hero.cmx_hero.cmx_hero--filled {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .pTop_hero.cmx_hero.cmx_hero--filled {
    padding-top: 18px;
    padding-bottom: 18px;
  }
}

/* ── how big an icon is drawn, and where ───────────────────────────────────
   Kept apart from which picture is drawn, deliberately. Every rule naming a file used to carry
   its own size, so three sources of pictures - the shop’s uploads, the shop’s five bar icons,
   our fallbacks - each fought for the size as well, and the winner was whichever had the most
   classes in front of it rather than whichever knew where the icon was going.

   ⚠ `contain` everywhere by default, not the theme’s `auto 100%`. `auto 100%` sizes by height
   alone, so anything wider than the box’s 1.43:1 is cut off at the right - the bug the shop
   found on the car icon in the bar. Every theme icon is inside that ratio, so this changes
   nothing for them and stops the next wide upload being clipped. */
.md_icon::before {
  background-size: contain;
  background-repeat: no-repeat;
}

/* The bar. ⚠ The box was 2.5em by 1.75em - wider than tall - so a square icon was sized by
   the 1.75em and came out 24.5px beside 14px text, which the shop read as small. Squaring it
   at 2.45em makes the same drawing 34px, a little over 40% bigger.

   The height cannot change the bar: this is an absolutely positioned ::before, so it has no
   say in the row’s height, which comes from the link’s own padding. Measured at 1120px - the
   narrowest the full bar is ever drawn - the five items use 749px of 789px, so the 0.3em of
   extra padding-left each costs 21px of the 40px spare. */
.md_header__nav .md_icon {
  padding-left: 2.8em;
}

.md_header__nav .md_icon::before {
  width: 2.45em;
  height: 2.45em;
  background-position: center;
}

/* The drawer. A white disc with a dark ring, and the drawing held away from that ring: at 38px
   across, a 21px drawing leaves 8.5px of white all round it, whatever shape it is and however
   large the file. box-sizing so the ring is drawn inside the 38px rather than growing it. */
.sidr_nav .md_icon::before {
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #131313;
  background-size: 21px 21px;
  background-position: center;
}

/* ── the contact block under 車種で探す ─────────────────────────────────
   Words on one side, a picture on the other, and a button that is the point of the block.

   ⚠ Hidden until the script has filled it. The shell ships empty, so without this rule a shop
   that clears the heading would get a blank band with padding rather than nothing at all. */
.cmx_homeContact {
  display: none;
  padding: 54px 0;
  background: #f1f5fd;
}

.cmx_homeContact.is-ready {
  display: block;
}

.cmx_homeContact__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 34px 38px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 43, 128, .06), 0 12px 30px rgba(0, 43, 128, .07);
}

.cmx_homeContact__words {
  flex: 1 1 auto;
  min-width: 0;
}

.cmx_homeContact__ttl {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.5;
  color: #002b80;
}

.cmx_homeContact__body {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 2;
  color: #333;
}

.cmx_homeContact__body p { margin: 0 0 .6em; }
.cmx_homeContact__body p:last-child { margin-bottom: 0; }

/* ⚠ Every state named. The theme writes `a, a:link, a:active, a:visited { text-decoration:
   underline }` - (0,1,1) - and a single class here is (0,1,0), so the button kept its
   underline and would have taken the visited blue on top of the red. A link drawn as a button
   has to say so for each state. */
.cmx_homeContact__go,
.cmx_homeContact__go:link,
.cmx_homeContact__go:visited,
.cmx_homeContact__go:hover,
.cmx_homeContact__go:active,
.cmx_homeContact__go:focus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 999px;
  background: var(--cmx-accent, #CA0404);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, transform .15s;
}

.cmx_homeContact__go::after {
  content: "\203a";
  font-size: 20px;
  line-height: 1;
}

.cmx_homeContact__go:hover,
.cmx_homeContact__go:focus-visible {
  background: #a80303;
  transform: translateY(-2px);
}

/* Two parts picture to eight parts words, as the shop asked - the wording here is short, and
   at a third of the band the picture was the loudest thing in a block whose point is the
   button. */
.cmx_homeContact__art {
  flex: 0 0 auto;
  width: 20%;
  max-width: 220px;
}

.cmx_homeContact__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* With no picture the words take the whole width instead of leaving half of it empty. */
.cmx_homeContact__inner.is-wordsOnly {
  text-align: center;
}

.cmx_homeContact__inner.is-wordsOnly .cmx_homeContact__words {
  max-width: 720px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .cmx_homeContact {
    padding: 32px 0;
  }

  .cmx_homeContact__inner {
    flex-direction: column;
    gap: 22px;
    padding: 24px 20px 28px;
    border-radius: 14px;
    text-align: center;
  }

  /* The picture goes above the words on a phone: it is the thing that says what the block is
     about, and a reader meets it before the sentence rather than after the button. */
  /* Stacked here, so there is no ratio to keep - but the picture was still louder than the
     few lines beside it, which is the thing being fixed. */
  .cmx_homeContact__art {
    order: -1;
    width: 40%;
    max-width: 170px;
  }

  .cmx_homeContact__ttl { font-size: 22px; }
  .cmx_homeContact__body { margin-bottom: 20px; font-size: 15px; line-height: 1.9; }
  .cmx_homeContact__go { width: 100%; justify-content: center; padding: 15px 20px; }
}

/* ── a floor under the type on a phone ───────────────────────────────────
   Measured at 390px, the site was drawing body text at 9.4px, 10px and 11px in places. None
   of those is a size to read Japanese at, and the shop said so. Nothing here changes a
   layout; each one is a size that was set below what it needed to be. */
@media screen and (max-width: 767px) {
  /* The footer: nav items, the company, the address, the policy link and the copyright were
     all coming out at 10 or 11px. */
  .md_footer__navItem,
  .md_footer__navItem a,
  .md_footer__company,
  .md_footer .company_group,
  .md_footer .company_address,
  .md_footer .policy_wrap,
  .md_footer .policy_wrap a,
  .md_footer .privacy,
  .md_footer .privacy a,
  .md_footer .copyright {
    font-size: 13px;
    line-height: 1.8;
  }

  /* The theme takes .fz_12 down to 10px below 600. Twelve is already the smallest thing on
     the page; there is nowhere below it to go. */
  .fz_12 {
    font-size: 12px;
  }

  /* Mine, from this morning - the strip's notice tag. */
  .cmx_ticker__tag {
    font-size: 12px;
  }

  /* The two footer wrappers the text inherits from, and the spec lines on a car card -
     year, mileage, inspection - which were 11px against a 16px price. */
  .md_footer .fz_15,
  .md_footer__column {
    font-size: 13px;
  }

  .cmx_card__line,
  .cmx_card__lineCell {
    font-size: 12px;
  }
}

/* ── 無料でここまでついてくる: the disc belongs to the icon ──────────────────────
   The theme makes the list item itself the pink disc and then absolutely positions the label
   inside it at 100% of the square's width:

     > li      { width:22%; padding-top:22%; border-radius:50%; background:pink }
     > li .innr { position:absolute; top:15%; width:100% }

   A circle is narrowest at the top and bottom, and the label sits near the bottom. At 160px
   across it lands where the disc is 87-124px wide while the label needs about 104px, so it
   spills past the curve - and バッテリージャンピング, which takes two lines, finished below the
   disc entirely.

   ⚠ The theme's own answer was `font-size: 2.5vw` - shrink the type until it fits the narrow
   part. That is where the 9.4px labels came from. Raising them to a readable size is what
   made the overflow visible; both are the same mistake, which is that the label was ever
   inside the circle.

   So: the disc is the icon's, and the label sits under it in normal flow. Nothing can
   overflow a shape it is not inside, at any length or size. */
.pLoan_service__list > li {
  padding-top: 0;
  background-color: transparent;
  border-radius: 0;
}

.pLoan_service__list > li .innr {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
}

.pLoan_service__list > li .icon {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  /* Room inside the disc so the drawing never touches the ring. */
  padding: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #feebea;
  border-radius: 50%;
}

.pLoan_service__list > li .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pLoan_service__list > li .ttl {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

/* The span carries `white-space: nowrap` from the theme, which is what forced the shrinking
   in the first place. Below the disc there is room for a second line. */
.pLoan_service__list > li .ttl span {
  white-space: normal;
}

@media screen and (max-width: 767px) {
  .pLoan_service__list > li .icon {
    padding: 15%;
  }

  .pLoan_service__list > li .ttl {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* ── カーマックスへようこそ ──────────────────────────────────────────────
   A navy panel, white words in six parts of it, the picture in two.

   ⚠ The picture sits on a white card, not straight on the navy. The drawings for this block
   are flat vector on a WHITE ground rather than a transparent one, and on navy that reads as a
   white block pasted onto the page. On a card it reads as a card - and a transparent PNG is
   equally at home on it, so the block does not depend on which kind is uploaded.

   The words had nothing between them and the edge before this. */
.pTop_innovation__block.cmx_intro.is-ready {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 52px 56px;
  background: linear-gradient(135deg, #002b80 0%, #00205f 100%);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(0, 43, 128, .18);
}

/* Six parts to two.

   ⚠ Asked for as widths, not as `flex: 6` and `flex: 2`. Those grow whatever is left after
   the gap and after each item's own padding, so the card's 36px and the 48px gap came out of
   the share and the result was 2.59 : 1. Half the gap off each side gives exactly 75 / 25. */
.cmx_intro__words {
  flex: 0 0 auto;
  width: calc(75% - 36px);
  min-width: 0;
}

.cmx_intro__art {
  flex: 0 0 auto;
  width: calc(25% - 12px);
  min-width: 0;
  align-self: center;
  padding: 18px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.cmx_intro__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* カーマックスへようこそ is the label above the message, not the message. */
.cmx_intro__copy {
  display: block;
  margin: 0 0 20px;
}

.cmx_intro__lead {
  display: block;
  margin: 0 0 14px;
  padding: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #ffd9d9;
  position: relative;
}

.cmx_intro__lead::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: #ff5b5b;
}

.cmx_intro__sub {
  display: block;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.55;
  color: #fff;
}

.cmx_intro .innovation_read {
  margin: 0;
}

.cmx_intro .innovation_read .innr {
  font-size: 16px;
  font-weight: 500;
  line-height: 2.1;
  /* Not pure white: at this size a long paragraph in #fff on navy vibrates. */
  color: #e6ecfa;
}

.cmx_intro .innovation_read .innr p { margin: 0 0 1em; }
.cmx_intro .innovation_read .innr p:last-child { margin-bottom: 0; }

/* Nothing reserved for a picture that was never uploaded. */
.pTop_innovation__block.cmx_intro.is-wordsOnly {
  max-width: 900px;
}

@media screen and (max-width: 900px) {
  .pTop_innovation__block.cmx_intro.is-ready {
    flex-direction: column;
    gap: 26px;
    padding: 30px 26px 34px;
    border-radius: 16px;
    text-align: center;
  }

  /* The picture leads on a phone: it says what the block is about before the sentence does. */
  .cmx_intro__art {
    order: -1;
    flex: 0 0 auto;
    width: 58%;
    max-width: 230px;
    padding: 12px;
    border-radius: 14px;
  }

  .cmx_intro__lead::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .cmx_intro__sub { font-size: 23px; line-height: 1.6; }

  .cmx_intro .innovation_read .innr {
    font-size: 15px;
    line-height: 1.95;
    text-align: left;
  }
}

/* The one action on the 404 page. It was a bare <a> in a <p> - underlined, 20px tall, and
   the only way back to the shop from a mistyped address. `.cmx_404__links a` next to it had
   been given `:link` and this had not, which is the same (0,1,1) trap as everywhere else. */
.cmx_404__home a,
.cmx_404__home a:link,
.cmx_404__home a:visited {
  display: inline-block;
  padding: 13px 30px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border-radius: 999px;
  text-decoration: none;
  transition: filter .15s;
}

.cmx_404__home a:hover,
.cmx_404__home a:focus-visible {
  filter: brightness(1.1);
}

/* ⚠ The four cards under a car - 診断, 仮審査, お電話, LINE - carry the theme's `fz_13`,
   which the theme itself takes to 12px under 600px and something takes to 11 below that.
   Eleven-pixel Japanese body text is the complaint the shop has made more than once. */
@media screen and (max-width: 767px) {
  .sCars_cv .cv_summary p,
  .sCars_cv__fixed .cv_summary p {
    font-size: 13px;
    line-height: 1.8;
  }
}

/* ── things too small to hit with a thumb ─────────────────────────────────────────────────
   Measured on a 375px screen: the banner dots are 10px tall, the LINE pill on a car card is
   24, the list/grid switch is 27, and the two portal badges in the footer are 26. A finger
   pad is about 9mm, which is 44px at this density - so all of these are targets you aim at
   rather than press.

   ⚠ The fix is an invisible area around each one, not a bigger control. Growing the LINE
   pill would push the row of facts on all thirty-six cards taller, and growing the dots
   would space them out; a pseudo-element takes the taps without moving a pixel of the
   design. */
.cmx_slider__dot {
  position: relative;
}

/* ⚠ 18px wide, not 34. The dots are 18px apart centre to centre, and a 34px area would
   reach halfway across its neighbours - where the later dot in the markup wins, so the left
   half of every dot would select the one after it. Width is limited by the pitch; height is
   free. */
.cmx_slider__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 30px;
  transform: translate(-50%, -50%);
}

.cmx_card__lineCell .cmx_card__line {
  position: relative;
}

/* 32, not 44: the area sits over the card's own overlay link, and every pixel it takes is
   a pixel that stops opening the car. Four each side is the trade. */
.cmx_card__lineCell .cmx_card__line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 32px;
  transform: translateY(-50%);
}

.cmx_view__btn {
  min-height: 34px;
}

/* These two are links round a picture, so the picture's own height is the target. A little
   padding costs nothing here - the row already has a gap. */
.cmx_foot__portals a {
  display: block;
  padding: 5px 0;
}

.cmx_foot__addr a {
  display: inline-block;
  padding: 3px 0;
}

/* ── 充実の保証部位: the documents ────────────────────────────────────────────
   Two charts of covered parts and the warranty brochure. The copied page put the charts
   side by side as pictures with a small "click to enlarge" under each - a gallery, when the
   question a visitor actually has is "is my part covered, and can I keep a copy of this".

   So: one row per document, each with a thumbnail, a name, a line about it, and one button.
   The brochure sits in the same list as the charts instead of being an afterthought. */
.cmx_docs__lead {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.9;
  color: #3a4150;
}

.cmx_docs {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmx_docs__row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 43, 128, .05);
  transition: border-color .15s, box-shadow .15s;
}

.cmx_docs__row:hover {
  border-color: #cfdaf0;
  box-shadow: 0 12px 28px rgba(0, 43, 128, .1);
}

/* ⚠ contain, not cover. These are 2080x1440 sheets of small print; a cover crop shows one
   corner of a diagram and says nothing about which of the two charts it is. */
.cmx_docs__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 88px;
  padding: 6px;
  box-sizing: border-box;
  background: #f4f7fc;
  border-radius: 10px;
  overflow: hidden;
}

.cmx_docs__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* A document with no picture of its own says what it is instead. */
.cmx_docs__thumb.is-pdf {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .08em;
  color: #CA0404;
  background: #fdeced;
}

.cmx_docs__words {
  display: block;
  min-width: 0;
}

.cmx_docs__ttl {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #002b80;
}

.cmx_docs__body {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  color: #3a4150;
}

.cmx_docs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 190px;
  min-height: 48px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #002b80;
  border-radius: 10px;
  transition: filter .15s;
}

.cmx_docs__btn::after {
  content: "\203a";
  font-weight: 700;
  line-height: 1;
}

/* The brochure is the one thing on this page a visitor takes away with them, so it is the
   one button in the shop's red. */
.cmx_docs__btn.is-pdf {
  background: var(--cmx-accent, #CA0404);
}

.cmx_docs__btn.is-pdf::after {
  /* Downwards arrow: this one saves a file rather than opening a view. */
  content: "\2193";
}

.cmx_docs__btn:hover,
.cmx_docs__btn:focus-visible {
  filter: brightness(1.12);
}

@media screen and (max-width: 860px) {
  .cmx_docs__row {
    /* The button goes full width under the words rather than squeezing the middle column
       to nothing - at this width there is not room for three columns and a readable line. */
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px 16px;
    padding: 16px;
  }

  .cmx_docs__thumb { width: 104px; height: 72px; }
  .cmx_docs__ttl { font-size: 16px; }
  .cmx_docs__body { font-size: 13px; }

  .cmx_docs__btn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .cmx_docs__row:hover {
    border-color: #e4eaf4;
    box-shadow: 0 8px 22px rgba(0, 43, 128, .05);
  }
}

/* ── よくある質問 ─────────────────────────────────────────────────────────────
   The theme's version is a flat list: no card, no rule, a bold line of text with a marker
   before it, and the answer indented underneath. On both the home page and /faq/.

   Cards now, each question its own, with a red Q in the corner of it, a chevron that turns
   when the answer opens, and the answer set off by a hairline under a navy A.

   ⚠ The open/closed behaviour is the theme's jQuery, which puts `active` on the <dt> and an
   inline `display: block` on the <dd>. Nothing here changes that; `dt.active` is only read. */
.md_faq .block {
  margin: 0 0 12px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.md_faq .block:hover {
  border-color: #cfdaf0;
  box-shadow: 0 6px 18px rgba(0, 43, 128, .06);
}

.md_faq .block dt {
  position: relative;
  padding: 17px 54px 17px 60px;
  cursor: pointer;
}

.md_faq .block dt.active {
  background: #f4f7fc;
}

.md_faq .block dt .md_faq__question {
  /* ⚠ static, not the theme's relative. The Q badge is a ::before on this paragraph and is
     placed at left:18px - against the nearest positioned ancestor. With the paragraph
     positioned that is the paragraph itself, which starts after the <dt>'s 60px of padding,
     so the badge landed 78px in, on top of the words. Static hands it to the <dt>. */
  position: static;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
  color: #1b2434;
}

/* The Q badge. ⚠ Three classes and a pseudo, to beat the generated `.md_faq__question::before
   { color: #E20A17 }` that would otherwise paint this red on red. */
.md_faq .block dt .md_faq__question::before {
  content: "Q";
  position: absolute;
  left: 18px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--cmx-accent, #CA0404);
  border-radius: 8px;
}

.md_faq .block dt .md_faq__question::after {
  content: none;
}

/* The chevron, on the <dt> rather than on the question, so it turns with the row. */
.md_faq .block dt::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid #7d8899;
  border-bottom: 2px solid #7d8899;
  transform: rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}

.md_faq .block dt.active::after {
  margin-top: -2px;
  border-color: var(--cmx-accent, #CA0404);
  transform: rotate(-135deg);
}

.md_faq .block dd {
  margin: 0;
  padding: 0 22px 18px 60px;
}

.md_faq .block dd .md_faq__answer {
  position: relative;
  padding: 16px 0 0;
  border-top: 1px solid #eef2f8;
  font-size: 15px;
  line-height: 1.95;
  color: #3a4150;
}

.md_faq .block dd .md_faq__answer::before {
  content: "A";
  position: absolute;
  left: -42px;
  top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #002b80;
  border-radius: 8px;
}

.md_faq .block dd .md_faq__answer p { margin: 0 0 .7em; }
.md_faq .block dd .md_faq__answer p:last-child { margin-bottom: 0; }

/* The group headings on /faq/ - ローン・支払いについて and the rest. */
.aFaq_list > li .aFaq_list__ttl {
  margin: 0 0 16px;
  padding: 0 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #002b80;
  border-left: 4px solid var(--cmx-accent, #CA0404);
}

.aFaq_list > li + li {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .md_faq .block dt {
    padding: 14px 44px 14px 52px;
  }

  .md_faq .block dt .md_faq__question { font-size: 15px; }

  .md_faq .block dt .md_faq__question::before {
    left: 14px;
    top: 13px;
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .md_faq .block dt::after { right: 18px; }

  .md_faq .block dd { padding: 0 16px 16px 52px; }
  .md_faq .block dd .md_faq__answer { font-size: 14px; line-height: 1.9; }

  .md_faq .block dd .md_faq__answer::before {
    left: -38px;
    width: 26px;
    height: 26px;
    font-size: 14px;
  }

  .md_faq .block:hover {
    border-color: #e4eaf4;
    box-shadow: none;
  }
}

/* ── /care/: the six things the warranty gives you ────────────────────────────
   The theme draws each as a rectangle outlined in 3px of red with the icon centred above the
   words - six red boxes in a row, which is the loudest thing on the page and says nothing.

   White cards with a hairline instead, and the icon moved to the left on a pale red disc so
   the heading starts at the top of the card and the six read as one set rather than six
   frames. ⚠ `.pCare_feature` in front of every selector: the generated block at the end of
   this file sets both the border and the heading colour and would otherwise win. */
.pCare_feature .pLoan_feature__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pCare_feature .pLoan_feature__list > li {
  display: grid;
  /* ⚠ Three children - figure, h4, p - in two columns, so each is placed by hand. Left to
     auto-flow the paragraph would drop under the icon instead of under its own heading. */
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 6px 16px;
  align-content: start;
  width: auto;
  margin: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 43, 128, .05);
}

.pCare_feature .pLoan_feature__list > li .icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  margin: 0;
  padding: 15px;
  background: #fdeced;
  border-radius: 50%;
}

.pCare_feature .pLoan_feature__list > li .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pCare_feature .pLoan_feature__list > li .ttl {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  /* The theme centres these, which was right when the icon was above the words and the card
     was a symmetrical box. Beside an icon, a centred heading over left-aligned prose reads as
     a mistake. */
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #002b80;
}

.pCare_feature .pLoan_feature__list > li p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.85;
  color: #3a4150;
}

/* ── /care/: 保証の特徴, the gap under the heading ────────────────────────────
   40px of padding on top of the heading's own trailing space put 74px between 保証の特徴 and
   the line under it - enough that they read as two separate things. */
.pCare_feature .pLoan_feature__head {
  padding-top: 10px;
  /* ⚠ The 74px the shop saw was mostly not padding. The head is a flex row and the picture
     beside the headline is 202px tall against the headline's 134, so `align-items: center`
     pushed the words 44px down from 保証の特徴 while the padding above them was already 0.
     Aligning to the top puts the headline under the heading, where it belongs. */
  align-items: flex-start;
}

/* 1.6 on 42px type is 67px a line; two lines of it is a paragraph's worth of air inside a
   headline. */
.pCare_feature .pLoan_feature__head .pLoan_feature__ttl {
  line-height: 1.45;
}

/* ── /care/: 無料でここまでついてくる ─────────────────────────────────────────
   Eight pale discs 222px across in a plain flex row, with a 15px label under each. The discs
   are the largest circles on the site and the labels the smallest words in the section, which
   is the wrong way round: the label is the thing being read.

   A four-column grid of cards now, the disc down to a size that suits an icon, and the label
   in the shop's navy at a size worth reading. */
.pCare_service .pLoan_service__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pCare_service .pLoan_service__list > li {
  width: auto;
  margin: 0;
  padding: 0;
}

.pCare_service .pLoan_service__list > li .innr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  padding: 24px 14px 20px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 43, 128, .05);
}

.pCare_service .pLoan_service__list > li .icon {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  aspect-ratio: auto;
  padding: 21px;
}

.pCare_service .pLoan_service__list > li .ttl {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: #002b80;
  text-align: center;
}

@media screen and (max-width: 900px) {
  .pCare_feature .pLoan_feature__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .pCare_feature .pLoan_feature__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .pCare_feature .pLoan_feature__list > li {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 16px;
  }

  .pCare_feature .pLoan_feature__list > li .icon {
    width: 64px;
    height: 64px;
    padding: 13px;
  }

  .pCare_feature .pLoan_feature__list > li .ttl { font-size: 16px; }
  .pCare_feature .pLoan_feature__list > li p { font-size: 13.5px; }

  .pCare_feature .pLoan_feature__head { padding-top: 6px; }

  .pCare_service .pLoan_service__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .pCare_service .pLoan_service__list > li .innr {
    gap: 10px;
    padding: 18px 10px 16px;
  }

  .pCare_service .pLoan_service__list > li .icon {
    width: 74px;
    height: 74px;
    padding: 16px;
  }

  .pCare_service .pLoan_service__list > li .ttl { font-size: 14px; }
}

/* ── the footer ───────────────────────────────────────────────────────────────────────────
   CarLife's footer was a cream panel, three equal columns of 13px links with red chevrons,
   the shop's details as the third of them, and a cream bar underneath. It was the one part
   of the page that had never been touched, and it was the fastest way to recognise where
   the design came from.

   Ours is a navy panel - the brand colour, and the colour of nothing else this large on the
   site - with the shop on a white card of its own to the left and the links to the right of
   it. The card is white rather than another shade of navy for a plain reason: the logo is a
   transparent drawing in red and near-black, and on navy the black half of it disappears.

   The words are 15px and up, and white on navy rather than grey on cream. 「フォントが
   小さくて薄い」was the note that started this. */
.cmx_foot {
  position: relative;
  z-index: 5;
}

/* ⚠ Once, for the whole footer, with `:link` in it.
   The theme says `a, a:link, a:active, a:visited { text-decoration: underline }`, which is
   (0,1,1). A rule like `.cmx_foot__tel { text-decoration: none }` is (0,1,0) and loses, so
   the number, the LINE button and 「ページ上部へ」 all came out underlined - the same defect
   the contact button on the home page had. Two classes and a pseudo-class beat it. */
.cmx_foot a,
.cmx_foot a:link,
.cmx_foot a:visited,
.cmx_foot a:active,
.cmx_foot a:hover {
  text-decoration: none;
}

.cmx_foot__main {
  background: linear-gradient(170deg, #012a7a 0%, #001a4f 100%);
  color: #fff;
}

.cmx_foot__inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 56px 24px 48px;
  display: grid;
  grid-template-columns: minmax(280px, 350px) 1fr;
  gap: 46px;
  align-items: start;
}

/* ── the shop card ───────────────────────────────────────────────────────────────────── */
.cmx_foot__shop {
  background: #fff;
  color: #17203a;
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

/* Nothing is drawn until /cars/footer answers, so an unreachable app leaves a plain footer
   rather than an empty white slab with a border round it. */
.cmx_foot__shop:empty {
  display: none;
}

.cmx_foot__logo {
  display: block;
  margin: 0 0 14px;
}

.cmx_foot__logo img {
  display: block;
  width: 176px;
  max-width: 100%;
  height: auto;
}

.cmx_foot__company {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: #5b6480;
}

.cmx_foot__shopName {
  margin: 2px 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #0d1730;
}

.cmx_foot__addr {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

.cmx_foot__addr a {
  color: #17203a;
  text-decoration: none;
}

.cmx_foot__addr a:hover {
  color: var(--cmx-accent, #CA0404);
}

.cmx_foot__addr i {
  margin-left: .4em;
  color: var(--cmx-accent, #CA0404);
}

.cmx_foot__facts {
  margin: 0 0 16px;
  padding: 14px 0 0;
  border-top: 1px solid #e6eaf3;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 14px;
  line-height: 1.6;
}

.cmx_foot__facts dt {
  font-weight: 700;
  color: #5b6480;
  white-space: nowrap;
}

.cmx_foot__facts dd {
  margin: 0;
  font-weight: 500;
  color: #17203a;
}

/* The number is the reason a shop puts a footer on a page at all, so it is the largest
   thing in the card and the whole block is the tap target, not just the digits. */
.cmx_foot__tel {
  display: block;
  text-align: center;
  padding: 10px 12px;
  margin: 0 0 10px;
  border: 2px solid var(--cmx-accent, #CA0404);
  border-radius: 12px;
  text-decoration: none;
  transition: background-color .15s;
}

.cmx_foot__tel span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #5b6480;
}

.cmx_foot__tel strong {
  display: block;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--cmx-accent, #CA0404);
}

.cmx_foot__tel:hover {
  background: #fff5f5;
}

.cmx_foot__line {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: #06c755;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: filter .15s;
}

.cmx_foot__line:hover {
  filter: brightness(1.08);
}

.cmx_foot__portals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e6eaf3;
}

.cmx_foot__portals img {
  display: block;
  height: auto;
}

.cmx_foot__licence {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b7490;
}

.cmx_foot__social {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.cmx_foot__social a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1f4fb;
  color: #17203a;
  font-size: 16px;
  text-decoration: none;
}

.cmx_foot__social a:hover {
  background: var(--cmx-accent, #CA0404);
  color: #fff;
}

/* ── the links ───────────────────────────────────────────────────────────────────────── */
.cmx_foot__nav {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 34px 30px;
}

.cmx_foot__h {
  margin: 0 0 14px;
  padding: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  position: relative;
}

.cmx_foot__h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: #ff4d4d;
}

.cmx_foot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmx_foot__list li {
  margin: 0 0 2px;
}

.cmx_foot__list a {
  display: block;
  padding: 6px 0 6px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  color: #d5dff4;
  text-decoration: none;
  position: relative;
  transition: color .15s;
}

/* A small square rather than the theme's chevron glyph: the chevron is a Font Awesome
   character, and every one of these rows was paying for it. */
.cmx_foot__list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 1px;
  background: #ff4d4d;
  transition: transform .15s;
}

.cmx_foot__list a:hover {
  color: #fff;
}

.cmx_foot__list a:hover::before {
  transform: scale(1.5);
}

.cmx_foot__sub {
  /* ⚠ display:block, because one of the two elements wearing this class is a <label>, and a
     label is inline - so its top and bottom margins were being dropped and 物件番号で探す sat
     against the row of pills above it. */
  display: block;
  margin: 22px 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.cmx_foot__pills {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cmx_foot__pills form {
  margin: 0;
}

.cmx_foot__pill {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07);
  color: #eaf0fb;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}

.cmx_foot__pill:hover,
.cmx_foot__pill:focus-visible {
  background: var(--cmx-accent, #CA0404);
  border-color: var(--cmx-accent, #CA0404);
  color: #fff;
}

/* ⚠ The theme's own `.md_search_itemnum input[type=text]` is (0,2,1) and beat every single
   class written here, which is why the search box in the drawer looked the way it did for a
   week. This markup deliberately uses none of the theme's class names, so the box is styled
   by these rules alone. */
.cmx_foot__num {
  margin: 0;
}

.cmx_foot__numRow {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  max-width: 320px;
}

.cmx_foot__numRow input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: #17203a;
  padding: 11px 8px 11px 18px;
}

.cmx_foot__numRow input[type="text"]::placeholder {
  color: #9aa3bb;
}

.cmx_foot__numRow button {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  width: 48px;
  background: var(--cmx-accent, #CA0404);
  color: #fff;
  font-size: 16px;
  transition: filter .15s;
}

.cmx_foot__numRow button:hover {
  filter: brightness(1.1);
}

/* ── the bar under it ────────────────────────────────────────────────────────────────── */
.cmx_foot__bar {
  background: #00113a;
  color: #b9c4de;
}

.cmx_foot__barInner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.cmx_foot__cr {
  font-size: 13px;
  line-height: 1.6;
}

.cmx_foot__up {
  font-size: 13px;
  font-weight: 700;
  color: #b9c4de;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  transition: background-color .15s, color .15s;
}

.cmx_foot__up:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

@media screen and (max-width: 1024px) {
  .cmx_foot__inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 42px 20px 36px;
  }

  .cmx_foot__shop {
    max-width: 520px;
  }
}

@media screen and (max-width: 767px) {
  .cmx_foot__nav {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }

  /* 在庫を探す carries the bands and the box, so it takes the whole row rather than half
     of one with five pills wrapping inside 160px. */
  .cmx_foot__group--find {
    grid-column: 1 / -1;
  }

  .cmx_foot__shop {
    max-width: none;
    padding: 22px 18px 18px;
  }

  .cmx_foot__barInner {
    justify-content: center;
    text-align: center;
  }
}

/* ⚠ The theme parks a fixed call bar over the bottom of the page under 540px, and the old
   footer paid for it with 80px of padding on its copyright strip. Same debt, new bar. */
@media screen and (max-width: 540px) {
  .cmx_foot__bar {
    padding-bottom: 76px;
  }
}

/* ===== generated by deploy/recolour.py - do not edit below ===== */
/* the original theme paint their red into these rules; the shop uses a different one.
   Same selectors, same properties, our colours. Regenerate with
   `python deploy/recolour.py` - every line below is machine written. */
a.md_header__headLogo { color: #E20A17; }
.md_header__nav ul > li > .headNav_term > li label i { color: #E20A17; }
.md_header__trigger span::before { background: #E20A17; }
.md_footer__navItem a i { color: #E20A17; }
.md_footer__company .company_address i { color: #C0212B; }
#contactform input[type=submit] { background-color: #E20A17; }
#contactform input[type=text]:focus, #contactform input[type=email]:focus, #contactform input[type=tel]:focus, #contactform textarea:focus { border-color: #E20A17; }
#contactform .input_head.required:after { color: #E20A17; }
#contactform .input_note { color: #E20A17; }
#contactform .input_section__ttl::after { background-color: #E20A17; }
#contactform .input_section__ttl span em { color: #E20A17; }
#contactform .sub_wrap::before { background-color: #E20A17; }
#contactform .chk_target.c_on:before { border-right-color: #E20A17; }
#contactform .chk_target.c_on:before { border-bottom-color: #E20A17; }
#contactform .select_wrap .wpcf7-form-control-wrap::before { color: #E20A17; }
#contactform .radio_wrapper .wpcf7-form-control-wrap label input[type=radio]:checked + span::after { background: #E20A17; }
#contactform .chkbox_nochk__wrapper .wpcf7-form-control-wrap label input[type=checkbox]:checked + span::before { border-right-color: #E20A17; }
#contactform .chkbox_nochk__wrapper .wpcf7-form-control-wrap label input[type=checkbox]:checked + span::before { border-bottom-color: #E20A17; }
.sidr_slide__close::before, .sidr_slide__close::after { background: #E20A17; }
.sidr_column__ttl a i { color: #E20A17; }
.sidr_nav.thirdry > li a i { color: #E20A17; }
.sidr_nav .sidr_nav__child > li label i { color: #E20A17; }
.sidr_company .company_address i { color: #C0212B; }
.sidr_company .company_phone a { background: #E20A17; }
#pagenavi a.page-numbers, #pagenavi span.page-numbers { border: 1px solid #F2545F; }
#pagenavi a.page-numbers, #pagenavi span.page-numbers { color: #F2545F; }
#pagenavi a.page-numbers.current, #pagenavi span.page-numbers.current { background: #F2545F; }
#pagenavi a.page-numbers.current, #pagenavi span.page-numbers.current { border-color: #F2545F; }
#pagenavi a.page-numbers:hover { color: #F2545F; }
#pagenavi a.page-numbers:hover { border-color: #F2545F; }
.md_icon.news::before { color: #E20A17; }
.md_icon.article::before { color: #E20A17; }
.md_icon.company::before { color: #E20A17; }
.md_faq__more a { color: #E20A17; }
.md_faq__more a { border-bottom: 2px solid #E20A17; }
.pTop_newsPickup .pickup_ttl a { color: #E20A17; }
.pTop_innovation__block { background: #E20A17; }
.pTop_strength { border-bottom: 5px solid #F2545F; }
.pTop_strength__list .link_button a { background-color: #E20A17; }
.md_article__more a { color: #E20A17; }
.md_article__more a { border-bottom: 2px solid #E20A17; }
.md_faq__question::before { color: #E20A17; }
.md_faq__question::after { color: #E20A17; }
.md_faq__answer::before { color: #E20A17; }
.md_cv__btn a { background: #F2545F; }
.md_searchHead__price .price { border: 3px solid #E20A17; }
.md_searchHead__price .price { color: #E20A17; }
.md_searchHead__sortWrap .price_sort__label.current { border-bottom-color: #F2545F; }
.md_cars__entry.soldout > li .mdCars_eyecatch::before { border: 2px solid #E20A17; }
.md_cars__entry.soldout > li .mdCars_eyecatch::before { color: #E20A17; }
.mdCars_newIcon { background-color: #F2545F; }
.mdCars_afterOp .care { background-color: #F2545F; }
.sCars_img3d a:hover { color: #E20A17; }
.sCars_head::after { background-color: #E20A17; }
.sCars_care__contents .care { background: #F2545F; }
a.sCars_care__link { color: #F2545F; }
.sCars_bounus em { color: #F2545F; }
.sCars_cv > li .innr .cv_btn a { background: #F2545F; }
.sCars_cvColumn__fixed .cvColumn__trigger i { color: #E20A17; }
.sCars_cv__fixed > li .cv_btn a { background: #F2545F; }
.sCars_details__eq > li.active { border-color: #F2545F; }
.sCars_details__eq > li.active { color: #F2545F; }
.sCars_related::after { background: #E20A17; }
.pInruiry_btn a { background: #F2545F; }
.sNews_share .snsbtn a { color: #F2545F; }
.sNews_link a { color: #F2545F; }
.sNews_link a { border-bottom: 2px solid #F2545F; }
.md_news__list > li { border-bottom: 1px dashed #F2545F; }
.md_news__list > li a::after { color: #F2545F; }
.aFaq_list__ttl span { border-bottom: 2px solid #E20A17; }
.pDiag_contact__cv .btn a { background-color: #E20A17; }
.pDiag_contact__cv .price_btn { border: 2px solid #E20A17; }
.pDiag_contact__cv .cat_btn__wrap a { border: 2px solid #E20A17; }
.pDiag_form .input_submit .shindan_submit input[type=submit] { background-color: #E20A17; }
.pDiag_nav > li label i { color: #E20A17; }
.pFlow_hero .hero_tagline { border-bottom: 5px solid #E20A17; }
.pFlow_steps .step_wrap { border: 3px solid #E20A17; }
.pFlow_steps .step_wrap::after { border-top: 30px solid #E20A17; }
.pFlow_steps .num { color: #E20A17; }
.pFlow_steps .ann { color: #E20A17; }
.pFlow_steps .step_cv .form a { background-color: #E20A17; }
.pFlow_annotations > ul > li { border-bottom: 1px dashed #E20A17; }
.pFlow_annotations > ul > li::before { color: #E20A17; }
.pLoan_strength__list > li { border: 3px solid #E20A17; }
.pLoan_strength__list .strength_ttl::before { color: #E20A17; }
.pLoan_strength__list .strength_cont__list > li::before { color: #E20A17; }
.pLoan_strength__list .strength_summary p strong { color: #E20A17; }
.pStore_info .dl_wrap dd .fa-map-marker-alt { color: #C0212B; }
.pStore_info .dl_wrap dd a.phone { color: #E20A17; }
.pStore_mutualLink a { border: 2px solid #F2545F; }
.pStore_mutualLink a { color: #F2545F; }
.pCare_hero .hero_tagline { border-bottom: 5px solid #E20A17; }
.pCare_hero .hero_ttl strong { color: #E20A17; }
.pCare_trouble__list .price { color: #E20A17; }
.pLoan_feature__summary p strong { color: #E20A17; }
.pLoan_feature__list > li { border: 3px solid #E20A17; }
.pLoan_feature__list > li .ttl { color: #E20A17; }
.pLoan_feature__list > li .link_btn a { background-color: #E20A17; }
.pLoan_service__copy .ttl::before, .pLoan_service__copy .ttl::after { background-color: #E20A17; }
.pCare_part__details > li a .link { color: #E20A17; }
.pCare_part__details > li a .link::after { background-color: #E20A17; }
/*--------
__pLoan
-----------------------------------------------*/
.pLoan_hero__ttl em { background: #E20A17; }
.pLoan_hero__copy strong { color: #E20A17; }
.pLoan_intro__ttl { background: #E20A17; }
.pLoan_intro__list li:nth-child(1) { background-color: #E20A17; }
.pLoan_intro__list li:nth-child(2) { border: 3px solid #E20A17; }
.pLoan_intro__list li:nth-child(3) { border: 3px solid #E20A17; }
.pLoan_intro__list .intro_title { color: #E20A17; }
.pLoan_intro__list .intro_summary { color: #E20A17; }
.pLoan_sec__ttl { color: #E20A17; }
.slide_in__bars { background-color: #E20A17; }
.pLoan_about__copy .ttl::before, .pLoan_about__copy .ttl::after { background-color: #E20A17; }
.pLoan_about__copy .copy { border: 7px solid #E20A17; }
.pLoan_about__copy .copy strong { color: #E20A17; }
.pLoan_about__ttl { color: #E20A17; }
a.md_linkbtn__arrow { background-color: #E20A17; }
a.md_linkbtn__arrow:hover span::before { color: #E20A17; }
@media screen and (max-width: 820px) {
  .sCars_cv__fixed > li .cv_ttl a::after { color: #F2545F; }
}
/* The same icons, served from carmax/ instead of the theme, in the
   shop's colours. 保証 icons are blue; the rest take the brand red. */
.md_icon.yen::before { background-image: url(/carmax/md_icon__yen.svg?v=9ffdab1e); }
.md_icon.car::before { background-image: url(/carmax/md_icon__car.svg?v=d82ad48f); }
.md_icon.loan::before { background-image: url(/carmax/md_icon__loan.svg?v=d1d396ae); }
.md_icon.flow::before { background-image: url(/carmax/md_icon__flow.svg?v=25a095a4); }
.md_icon.diagnosis::before { background-image: url(/carmax/md_icon__diag.svg?v=e030af11); }
.md_icon.care::before { background-image: url(/carmax/md_icon__care.svg?v=f0b4722b); }
.md_icon.question::before { background-image: url(/carmax/md_icon__question.svg?v=1145351e); }
.md_icon.about_loan::before { background-image: url(/carmax/md_icon__question.svg?v=1145351e); }
.md_icon.store::before { background-image: url(/carmax/md_icon__store.svg?v=05b44599); }
.md_icon.faq::before { background-image: url(/carmax/md_icon__faq.svg?v=69d15a1b); }
.md_icon.phone::before { background-image: url(/carmax/md_icon__phone.svg?v=ac07bf94); }
.md_icon.comment::before, .md_icon.contact::before, .md_icon.inquiry::before { background-image: url(/carmax/md_icon__comment.svg?v=e997b310); }
.searchTerm_list > li .searchTerm_submit__label.car.dressup::before { background-image: url(/carmax/pTop_dressUpcar.svg?v=43833b62); }
.searchTerm_list > li .searchTerm_submit__label.car.gogo::before { background-image: url(/carmax/pTop_GogoCar.svg?v=116cdafd); }
.sCars_img3d a.dview span::before { background-image: url(/carmax/icon_360v.svg?v=75c0f97b); }
.sCars_img3d a.movie span::before { background-image: url(/carmax/icon_movie.svg?v=69ad7c92); }
/* ===== end generated ===== */