@charset "UTF-8";

/* ===================================================================
   2026 renewal - store detail pages
   -------------------------------------------------------------------
   Shared by the three store templates:
     page-rokkoudou.php  (六甲院)   /location/rokkoumichi/
     page-sannomiya.php  (三ノ宮院) /location/sannomiya/
     page-akashi.php     (明石院)   /location/akashi/

   Conventions, kept in step with css/2026-renewal.css:
   - Class names are store-agnostic (`renewal-tenpo__*`) so one rule set
     serves all three pages. Anything genuinely per-store goes on a
     modifier such as `.renewal-tenpo--akashi`.
   - Sections are appended in page order, each under its own
     `===== <name> =====` banner.
   - Values come from the Figma nodes at 1x. SP overrides live in
     `@media screen and (max-width: 767.98px)` at the end of each block,
     with the content column at `calc(100vw - 32px)` / `max-width: 370px`.
   - Selectors are scoped twice (e.g. `.renewal-tenpo .renewal-tenpo__x p`)
     where the theme's `body section p` rules would otherwise win.
   =================================================================== */


/* ===== main visual (Figma PC 12:77 / SP 69:425) ===== */

.renewal-tenpo-mv,
.renewal-tenpo-mv * {
  box-sizing: border-box;
}

.home main section.renewal-tenpo-mv,
main.access section.renewal-tenpo-mv {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 64px 16px;
  overflow: hidden;
  background: #f6fbf5;
  color: #233128;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

/* the tilted pale square in the bottom-right corner */
main.access section.renewal-tenpo-mv::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -287px;
  bottom: -295px;
  width: 560px;
  height: 560px;
  background: rgba(79, 171, 99, 0.1);
  transform: rotate(12deg);
  pointer-events: none;
}

.renewal-tenpo-mv__inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 40.28px;
  align-items: flex-start;
  width: 1224.8px;
  max-width: 100%;
  margin: 0 auto;
}

.renewal-tenpo-mv__body {
  display: flex;
  flex: 0 1 512.55px;
  flex-direction: column;
  align-items: flex-start;
  width: 512.55px;
  min-width: 0;
}

/* ---- copy ---- */

.renewal-tenpo-mv .renewal-tenpo-mv__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 7px 16px;
  border-radius: 4px;
  background: #4fab63;
  color: #fff;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}

.renewal-tenpo-mv .renewal-tenpo-mv__title {
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #233128;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 46.4px;
  text-align: left;
}

.renewal-tenpo-mv .renewal-tenpo-mv__lead {
  width: 100%;
  margin: 22px 0 0;
  color: #34443a;
  font-size: 17px;
  font-weight: 700;
  line-height: 32.3px;
  text-align: left;
}

/* ---- credibility badges (reused from the top page FV) ---- */

.renewal-tenpo-mv__badges {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.renewal-tenpo-mv__badges li {
  flex: 0 0 106.76px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.renewal-tenpo-mv__badges img {
  display: block;
  width: 106.76px;
  height: 100.2px !important;
  object-fit: contain;
}

/* ---- action buttons ---- */

.renewal-tenpo-mv__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

.renewal-tenpo-mv__action {
  display: flex;
  flex: 0 0 138px;
  align-items: center;
  justify-content: center;
  width: 138px;
  height: 49.59px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 21.6px;
  text-align: center;
  text-decoration: none;
}

/* The theme's `a:hover { color: #000 }` outranks a single-class colour, which
   turned these labels black on hover. Each variant restates its colour for the
   interactive states so it stays put. */

.renewal-tenpo-mv__action--line,
.renewal-tenpo-mv__action--line:link,
.renewal-tenpo-mv__action--line:visited,
.renewal-tenpo-mv__action--line:hover,
.renewal-tenpo-mv__action--line:focus,
.renewal-tenpo-mv__action--line:active {
  background: #10ad5a;
  color: #fff;
}

.renewal-tenpo-mv__action--tel,
.renewal-tenpo-mv__action--tel:link,
.renewal-tenpo-mv__action--tel:visited,
.renewal-tenpo-mv__action--tel:hover,
.renewal-tenpo-mv__action--tel:focus,
.renewal-tenpo-mv__action--tel:active {
  background: #f39800;
  color: #fff;
}

.renewal-tenpo-mv__action--access,
.renewal-tenpo-mv__action--access:link,
.renewal-tenpo-mv__action--access:visited,
.renewal-tenpo-mv__action--access:hover,
.renewal-tenpo-mv__action--access:focus,
.renewal-tenpo-mv__action--access:active {
  border-color: #4fab63;
  background: #fff;
  color: #3f8b50;
}

/* ---- photo ---- */

.renewal-tenpo-mv__visual {
  flex: 0 1 672px;
  width: 672px;
  min-width: 0;
  margin-top: 30.5px;
  aspect-ratio: 672 / 420;
  overflow: hidden;
  box-shadow: -18px 18px 0 0 rgba(79, 171, 99, 0.14);
}

.renewal-tenpo-mv__visual img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.renewal-tenpo-mv {
    padding: 40px 0;
  }

  main.access section.renewal-tenpo-mv::after {
    content: none;
  }

  .renewal-tenpo-mv__inner {
    flex-direction: column;
    gap: 31px;
    align-items: center;
    width: 100%;
  }

  /* the node puts the photo above the copy on SP, inset 15px each side */
  .renewal-tenpo-mv__visual {
    order: -1;
    flex: 0 0 auto;
    width: calc(100% - 30px);
    margin-top: 0;
    aspect-ratio: 375 / 281.25;
    box-shadow: none;
  }

  .renewal-tenpo-mv__body {
    flex: 0 0 auto;
    width: calc(100vw - 36px);
    max-width: 339px;
  }

  .renewal-tenpo-mv .renewal-tenpo-mv__eyebrow {
    padding: 5px 11px;
    font-size: 13px;
    line-height: 19.5px;
  }

  /* SP de-emphasises the headline and leans on the lead line instead.
     The node specifies 13px; raised to the 15px store-page minimum. */
  .renewal-tenpo-mv .renewal-tenpo-mv__title {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
  }

  .renewal-tenpo-mv .renewal-tenpo-mv__lead {
    margin-top: 10px;
    font-size: 15px;
    line-height: 22.5px;
  }

  .renewal-tenpo-mv__badges {
    justify-content: space-between;
    gap: 0;
    margin-top: 20px;
  }

  .renewal-tenpo-mv__actions {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
  }

  /* the node specifies 13px; raised to the 15px store-page minimum */
  .renewal-tenpo-mv__action {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
    font-size: 15px;
    line-height: 21px;
  }
}


/* ===== clinic features (Figma PC 12:142 / SP 12:1176) ===== */

.renewal-tenpo-feature,
.renewal-tenpo-feature * {
  box-sizing: border-box;
}

main.access section.renewal-tenpo-feature {
  width: 100%;
  margin: 0;
  padding: 60px 16px;
  background: #fff;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-feature__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

/* the theme's `.leaf` heading component supplies the leaf icon */
main.access .renewal-tenpo-feature__heading {
  margin: 0;
}

/* ---- intro ---- */

.renewal-tenpo-feature__intro {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-top: 16.19px;
}

.renewal-tenpo-feature .renewal-tenpo-feature__intro-title {
  display: flex;
  align-items: center;
  min-height: 28.79px;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 6px solid #10ad5a;
  background: none;
  color: #24342a;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
}

.renewal-tenpo-feature .renewal-tenpo-feature__intro-copy {
  margin: 0;
  color: #3d493f;
  font-size: 15px;
  font-weight: 400;
  line-height: 28.5px;
}

/* ---- tag pills ---- */

.renewal-tenpo-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.renewal-tenpo-feature__tags li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #d5ead8;
  border-radius: 999px;
  background: #fff;
  color: #3f8b50;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.2px;
  list-style: none;
  white-space: nowrap;
}

.renewal-tenpo-feature__tags li::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f39800;
}

/* ---- feature cards ---- */

.renewal-tenpo-feature__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  margin-top: 28px;
}

.renewal-tenpo-feature__card {
  display: flex;
  flex: 0 0 243px;
  flex-direction: column;
  width: 243px;
  min-height: 435px;
  margin: 0;
  padding: 0 1px 32px;
  overflow: hidden;
  border: 1px solid #dfe8df;
  border-radius: 8px;
  background: #fff;
}

.renewal-tenpo-feature__photo {
  width: calc(100% + 2px);
  margin: -1px -1px 0;
  aspect-ratio: 241.67 / 181.25;
  overflow: hidden;
}

.renewal-tenpo-feature__photo img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.renewal-tenpo-feature__body {
  width: 210.2px;
  max-width: calc(100% - 28px);
  margin: 15px auto 0;
}

/* the node sets 12px; raised to 14px per the client's instruction (this is a
   deliberate exception to the 15px store-page minimum) */
.renewal-tenpo-feature .renewal-tenpo-feature__label {
  margin: 0;
  color: #3f8b50;
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;
}

.renewal-tenpo-feature .renewal-tenpo-feature__name {
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 23.2px;
  text-align: left;
}

.renewal-tenpo-feature .renewal-tenpo-feature__desc {
  margin: 11px 0 0;
  color: #444;
  font-size: 14px;
  font-weight: 400;
  line-height: 24.5px;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.renewal-tenpo-feature {
    padding: 20px 0 40px;
  }

  .renewal-tenpo-feature__inner {
    width: calc(100vw - 16px);
    max-width: 370px;
  }

  .renewal-tenpo-feature__intro {
    gap: 10px;
    margin-top: 14px;
  }

  .renewal-tenpo-feature .renewal-tenpo-feature__intro-title {
    align-items: flex-start;
    padding-left: 18px;
    font-size: 16px;
    line-height: 24.4px;
  }

  .renewal-tenpo-feature .renewal-tenpo-feature__intro-copy {
    font-size: 15px;
    line-height: 24.59px;
  }

  /* the pills stack one per row on SP */
  .renewal-tenpo-feature__tags {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin-top: 15.23px;
  }

  .renewal-tenpo-feature__tags li {
    justify-content: flex-start;
    padding: 6px 12px;
    white-space: normal;
  }

  .renewal-tenpo-feature__cards {
    flex-direction: column;
    gap: 13px;
    margin-top: 40.68px;
  }

  .renewal-tenpo-feature__card {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding-bottom: 18px;
  }

  .renewal-tenpo-feature__photo {
    aspect-ratio: 329.25 / 185.2;
  }

  .renewal-tenpo-feature__body {
    width: 300px;
    max-width: calc(100% - 30px);
    margin-top: 12px;
  }

  .renewal-tenpo-feature .renewal-tenpo-feature__name {
    margin-top: 10px;
    font-size: 15px;
    line-height: 21.75px;
  }

  .renewal-tenpo-feature .renewal-tenpo-feature__desc {
    margin-top: 10px;
    font-size: 14px;
    line-height: 21.38px;
  }
}


/* ===== store-page minimum font size =====
   Sections reused from the top page keep their own sizes in
   css/2026-renewal.css. That file is shared with the top page and must not
   change, so the store-page 15px floor is applied here, scoped to
   `main.access`, leaving the top page untouched. */

@media screen and (max-width: 767.98px) {
  /* node: 14px */
  main.access .renewal-voices__lead {
    font-size: 15px;
  }

  /* node: 13px */
  main.access .renewal-voices__date {
    font-size: 15px;
  }
}


/* ===== practitioners (Figma 218:218) ===== */

.renewal-tenpo-staff,
.renewal-tenpo-staff * {
  box-sizing: border-box;
}

main.access section.renewal-tenpo-staff {
  width: 100%;
  margin: 0;
  padding: 0 16px 60px;
  background: #fff;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-staff__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

main.access .renewal-tenpo-staff__heading {
  margin: 0;
}

/* ---- intro ---- */

.renewal-tenpo-staff__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.renewal-tenpo-staff .renewal-tenpo-staff__intro-title {
  display: flex;
  align-items: center;
  min-height: 28.79px;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 6px solid #10ad5a;
  background: none;
  color: #24342a;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
}

.renewal-tenpo-staff .renewal-tenpo-staff__intro-copy {
  margin: 0;
  color: #3d493f;
  font-size: 15px;
  font-weight: 400;
  line-height: 28.5px;
}

/* ---- cards ---- */

.renewal-tenpo-staff__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
  margin-top: 28px;
}

/* the whole card is the link */
.renewal-tenpo-staff__card,
.renewal-tenpo-staff__card:link,
.renewal-tenpo-staff__card:visited,
.renewal-tenpo-staff__card:hover,
.renewal-tenpo-staff__card:focus,
.renewal-tenpo-staff__card:active {
  display: flex;
  flex: 0 0 192.79px;
  flex-direction: column;
  width: 192.79px;
  overflow: hidden;
  border: 1px solid #dfe8df;
  border-radius: 8px;
  background: #fff;
  color: #27332b;
  text-decoration: none;
}

.renewal-tenpo-staff__photo {
  display: block;
  width: calc(100% + 2px);
  margin: -1px -1px 0;
  aspect-ratio: 191.46 / 239.32;
  overflow: hidden;
  background: #f6fbf6;
}

.renewal-tenpo-staff__photo img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center top;
}

.renewal-tenpo-staff__body {
  display: block;
  padding: 12px 11.67px 11.67px;
}

.renewal-tenpo-staff__name {
  display: block;
  color: #27332b;
  font-size: 17px;
  font-weight: 700;
  line-height: 23.8px;
}

/* node: 12px, raised to the 15px store-page minimum */
.renewal-tenpo-staff__kana {
  display: block;
  margin-top: 2px;
  color: #667066;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}

/* node: 12px, raised to the 15px store-page minimum */
.renewal-tenpo-staff__role {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.667px solid #edf3ed;
  color: #3f8b50;
  font-size: 15px;
  font-weight: 700;
  line-height: 21.75px;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.renewal-tenpo-staff {
    padding: 0 0 40px;
  }

  .renewal-tenpo-staff__inner {
    width: calc(100vw - 16px);
    max-width: 370px;
  }

  .renewal-tenpo-staff__head {
    gap: 10px;
  }

  .renewal-tenpo-staff .renewal-tenpo-staff__intro-title {
    align-items: flex-start;
    padding-left: 18px;
    font-size: 16px;
    line-height: 24.4px;
  }

  .renewal-tenpo-staff .renewal-tenpo-staff__intro-copy {
    line-height: 24.59px;
  }

  /* two per row on SP */
  .renewal-tenpo-staff__cards {
    gap: 12px;
    margin-top: 20px;
  }

  .renewal-tenpo-staff__card,
  .renewal-tenpo-staff__card:link,
  .renewal-tenpo-staff__card:visited,
  .renewal-tenpo-staff__card:hover,
  .renewal-tenpo-staff__card:focus,
  .renewal-tenpo-staff__card:active {
    flex: 0 0 calc(50% - 6px);
    width: calc(50% - 6px);
  }

  .renewal-tenpo-staff__body {
    padding: 10px;
  }

  .renewal-tenpo-staff__name {
    font-size: 16px;
    line-height: 22.4px;
  }

}


/* ===== price menu (Figma PC 218:220 / SP 69:428) =====
   Every table cell is 15px: the nodes specify 16px on PC and 13.9px on SP,
   and the SP value is raised to the store-page minimum. */

.renewal-tenpo-price,
.renewal-tenpo-price * {
  box-sizing: border-box;
}

main.access section.renewal-tenpo-price {
  width: 100%;
  margin: 0;
  padding: 40px 16px;
  background: #fff;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-price__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

main.access .renewal-tenpo-price__heading {
  margin: 0;
}

/* ---- intro ---- */

.renewal-tenpo-price__head {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.renewal-tenpo-price .renewal-tenpo-price__intro-title {
  display: flex;
  align-items: center;
  min-height: 28.79px;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 6px solid #10ad5a;
  background: none;
  color: #24342a;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
}

.renewal-tenpo-price .renewal-tenpo-price__intro-copy {
  margin: 0;
  color: #3d493f;
  font-size: 15px;
  font-weight: 400;
  line-height: 28.5px;
}

/* ---- boxed table ---- */

.renewal-tenpo-price__box {
  width: 100%;
  margin-top: 32px;
  padding: 32px 60px;
  background-image: url("../img/renewal/tenpo/price-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.renewal-tenpo-price .renewal-tenpo-price__caption {
  margin: 0 0 21px;
  color: #444;
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
  text-align: center;
}

.renewal-tenpo-price__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}

.renewal-tenpo-price__table th,
.renewal-tenpo-price__table td {
  height: 57.86px;
  padding: 0 17.33px;
  border: 1px solid #dfe8df;
  color: #000;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 27.2px;
  text-align: left;
  vertical-align: middle;
}

.renewal-tenpo-price__table th {
  width: 26%;
  background: #f6fbf6;
  color: #3f8b50;
  font-weight: 700;
}

.renewal-tenpo-price__fee {
  width: 28%;
  font-weight: 700;
}

.renewal-tenpo-price__note {
  width: 46%;
  font-weight: 400;
}

.renewal-tenpo-price__more {
  margin-top: 32px !important;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.renewal-tenpo-price {
    padding: 40px 0;
  }

  .renewal-tenpo-price__inner {
    width: calc(100vw - 16px);
    max-width: 370px;
  }

  .renewal-tenpo-price__head {
    gap: 10px;
  }

  .renewal-tenpo-price .renewal-tenpo-price__intro-title {
    align-items: flex-start;
    padding-left: 18px;
    font-size: 16px;
    line-height: 24.4px;
  }

  .renewal-tenpo-price .renewal-tenpo-price__intro-copy {
    line-height: 24.59px;
  }

  .renewal-tenpo-price__box {
    margin-top: 19px;
    padding: 18px 16px 26px;
    background-image: url("../img/renewal/tenpo/price-bg-sp.jpg");
  }

  .renewal-tenpo-price .renewal-tenpo-price__caption {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 25.2px;
    text-align: left;
  }

  /* each row stacks: label, fee, then the note */
  .renewal-tenpo-price__table,
  .renewal-tenpo-price__table tbody,
  .renewal-tenpo-price__table tr,
  .renewal-tenpo-price__table th,
  .renewal-tenpo-price__table td {
    display: block;
    width: 100%;
  }

  .renewal-tenpo-price__table tr {
    border: 0.667px solid #dfe8df;
    border-bottom: 0;
  }

  .renewal-tenpo-price__table tr:last-child {
    border-bottom: 0.667px solid #dfe8df;
  }

  .renewal-tenpo-price__table th,
  .renewal-tenpo-price__table td {
    height: auto;
    min-height: 46.25px;
    padding: 11px 12px;
    border: 0;
    border-bottom: 0.667px solid #edf3ed;
    font-size: 15px;
    line-height: 23.59px;
  }

  .renewal-tenpo-price__note {
    border-bottom: 0;
  }

  .renewal-tenpo-price__more {
    margin-top: 32px !important;
  }
}


/* ===== FAQ (Figma 219:236) =====
   The node reuses two theme components verbatim, so they are kept rather
   than rebuilt: `h2.ttl_cv` (32px + the 77px clover, 2022-style.css) and the
   `.faq` accordion (`.block` / `.q` / `.a .inner`, tenpo.css) together with
   the page's existing jQuery toggle. Only the wrapper rhythm, the intro pair
   and the closing note/button are new here.
   Q and A text is 14px in the node; both are raised to the 15px store-page
   minimum, so the rows are ~2px taller than the node's 49.06px. */

.renewal-tenpo-faq,
.renewal-tenpo-faq * {
  box-sizing: border-box;
}

/* no background-color: `.ttl_cv .icon` sits at z-index -1 and would be
   painted over by one set on this section */
main.access section.renewal-tenpo-faq {
  width: 100%;
  margin: 0;
  padding: 40px 16px;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-faq__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

/* ---- intro ---- */

.renewal-tenpo-faq__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

main.access .renewal-tenpo-faq__heading {
  margin: 0;
  line-height: 46.4px;
}

.renewal-tenpo-faq .renewal-tenpo-faq__intro-title {
  display: flex;
  align-items: center;
  min-height: 28.79px;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 6px solid #10ad5a;
  background: none;
  color: #24342a;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
}

/* Two-line variant (三ノ宮 69:706): a small store label sits above the
   sentence. The node sets the label at 14px; raised to the 15px minimum. */
.renewal-tenpo-faq .renewal-tenpo-faq__intro-title--stacked {
  flex-direction: column;
  align-items: flex-start;
  min-height: 49.58px;
}

.renewal-tenpo-faq__intro-eyebrow {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 24.8px;
}

.renewal-tenpo-faq .renewal-tenpo-faq__intro-title--stacked {
  font-size: 16px;
  line-height: 24.8px;
}

.renewal-tenpo-faq .renewal-tenpo-faq__intro-copy {
  margin: 0;
  color: #3d493f;
  font-size: 15px;
  font-weight: 400;
  line-height: 28.5px;
}

/* ---- accordion ---- */

/* tenpo.css ships `.faq { margin: 0 0 100px }`; the gap is owned by this
   section instead */
.renewal-tenpo-faq .renewal-tenpo-faq__list {
  width: 100%;
  margin: 36px 0 0;
}

.renewal-tenpo-faq .renewal-tenpo-faq__list .block {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}

.renewal-tenpo-faq .renewal-tenpo-faq__list .q {
  padding: 13px 40px 13px 15px;
  font-size: 15px;
  line-height: 24px;
}

.renewal-tenpo-faq .renewal-tenpo-faq__list .a .inner {
  padding: 19px 15px;
  font-size: 15px;
  line-height: 27px;
}

.renewal-tenpo-faq .renewal-tenpo-faq__list .a .inner p {
  margin: 0;
  font-weight: 400;
}

/* ---- closing note + button ---- */

.renewal-tenpo-faq .renewal-tenpo-faq__note {
  margin: 36px 0 0;
  color: #333;
  font-size: 15px;
  font-weight: 400;
  line-height: 28.5px;
  text-align: center;
}

/* `main.access` is needed to outrank style.css's
   `body.page-template-page-rokkoudou .btn-item`, which already pins 355px on
   this template; the rule is kept so the width survives the roll-out to the
   other two store templates */
main.access .renewal-tenpo-faq .renewal-tenpo-faq__more {
  width: 355px;
  max-width: 100%;
  margin: 36px auto 0 !important;
}

/* the theme turns every hovered link black; the label stays white */
.renewal-tenpo-faq__more a,
.renewal-tenpo-faq__more a:link,
.renewal-tenpo-faq__more a:visited,
.renewal-tenpo-faq__more a:hover,
.renewal-tenpo-faq__more a:focus,
.renewal-tenpo-faq__more a:active {
  background-color: #10ad5a;
  color: #fff;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.renewal-tenpo-faq {
    padding: 40px 0;
  }

  .renewal-tenpo-faq__inner {
    width: calc(100vw - 16px);
    max-width: 370px;
  }

  .renewal-tenpo-faq__head {
    gap: 10px;
  }

  /* no SP node was supplied for this section, so `h2.ttl_cv` keeps the
     theme's own SP scale (2022-style.css: 16px + a 37x36 clover) — the same
     way sec15 already renders on the top page */
  main.access .renewal-tenpo-faq__heading {
    line-height: 1.4;
  }

  .renewal-tenpo-faq .renewal-tenpo-faq__intro-title {
    align-items: flex-start;
    padding-left: 18px;
    font-size: 16px;
    line-height: 24.4px;
  }

  .renewal-tenpo-faq .renewal-tenpo-faq__intro-copy {
    line-height: 24.59px;
  }

  .renewal-tenpo-faq .renewal-tenpo-faq__list {
    margin-top: 24px;
  }

  .renewal-tenpo-faq .renewal-tenpo-faq__list .q {
    padding: 12px 44px 12px 12px;
    line-height: 23.59px;
  }

  .renewal-tenpo-faq .renewal-tenpo-faq__list .a .inner {
    padding: 15px 12px;
    line-height: 25.2px;
  }

  .renewal-tenpo-faq .renewal-tenpo-faq__note {
    margin-top: 24px;
    line-height: 25.2px;
    text-align: left;
  }

  /* 355px is the width every button on these templates already uses */
  main.access .renewal-tenpo-faq .renewal-tenpo-faq__more {
    margin-top: 24px !important;
  }
}


/* ===== patient voices (Figma SP 69:431 / PC = the current cont09.tenpo-v-area) =====
   One flat grid per card, re-arranged per breakpoint:

     PC   "title title"   |  SP   "photo title"
          "photo body"    |       "meta  meta"
          "meta  more"    |       "body  body"
                          |       "more  more"

   The SP node sets 14px body / title and 11.1px for the profile line; all of
   them are raised to the 15px store-page minimum.
   The photo is a full 200px portrait on PC and a 99x101 crop on SP — the crop
   geometry comes from the node and rides on the `--voice-*` custom properties
   set per card in the template, so this block stays store-agnostic. */

.renewal-tenpo-voice,
.renewal-tenpo-voice * {
  box-sizing: border-box;
}

/* no background-color: `.ttl_cv .icon` sits at z-index -1 */
main.access section.renewal-tenpo-voice {
  width: 100%;
  margin: 0;
  padding: 40px 16px;
  color: #000;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-voice__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

main.access .renewal-tenpo-voice__heading {
  margin: 0;
  line-height: 46.4px;
}

/* ---- list ---- */

.renewal-tenpo-voice__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.renewal-tenpo-voice__item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "photo text"
    "meta  text";
  grid-template-rows: auto auto 1fr;
  column-gap: 10px;
  width: calc(50% - 20px);
  margin: 0 0 30px;
  list-style: none;
}

.renewal-tenpo-voice__item::marker {
  content: none;
}

/* ---- photo ---- */

/* the photos are exported as 200x200 squares, so PC shows them whole */
.renewal-tenpo-voice__photo {
  display: block;
  grid-area: photo;
  width: 200px;
  height: 200px;
  margin-bottom: 5px;
  overflow: hidden;
  border: 2px solid #10ad5a;
  border-radius: 5px;
}

.renewal-tenpo-voice__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- title bar ---- */

.renewal-tenpo-voice .renewal-tenpo-voice__title {
  display: flex;
  align-items: center;
  grid-area: title;
  margin: 0 0 15px;
  padding: 12px;
  border: 0;
  border-left: 3px solid #2eb76e;
  background: #eaf8d8;
  color: #000;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 22.2px;
  text-align: left;
}

/* ---- profile line ---- */

.renewal-tenpo-voice .renewal-tenpo-voice__meta {
  grid-area: meta;
  align-self: start;
  margin: 0;
  color: #4f4f4f;
  font-size: 15px;
  font-weight: 700;
  line-height: 22.2px;
}

/* ---- body + "続きを見る" ---- */

.renewal-tenpo-voice__text {
  display: flex;
  flex-direction: column;
  grid-area: text;
  min-width: 0;
}

.renewal-tenpo-voice .renewal-tenpo-voice__body p {
  margin: 0;
  color: #000;
  font-size: 15px;
  font-weight: 400;
  line-height: 22.2px;
}

.renewal-tenpo-voice .renewal-tenpo-voice__body .renewal-tenpo-voice__q {
  font-weight: 700;
}

.renewal-tenpo-voice .renewal-tenpo-voice__more {
  margin: 12px 0 0;
  text-align: right;
}

/* the theme turns every hovered link black */
.renewal-tenpo-voice__more a,
.renewal-tenpo-voice__more a:link,
.renewal-tenpo-voice__more a:visited,
.renewal-tenpo-voice__more a:hover,
.renewal-tenpo-voice__more a:focus,
.renewal-tenpo-voice__more a:active {
  color: #e86b18;
  font-size: 15px;
  font-weight: 700;
  line-height: 22.2px;
  text-decoration: underline;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.renewal-tenpo-voice {
    padding: 40px 0;
  }

  .renewal-tenpo-voice__inner {
    width: calc(100vw - 16px);
    max-width: 370px;
  }

  /* no SP node scale for `h2.ttl_cv`, so the theme's own 16px + 37x36 clover
     stands, matching the FAQ heading above */
  main.access .renewal-tenpo-voice__heading {
    line-height: 1.4;
  }

  .renewal-tenpo-voice__list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 9px;
  }

  .renewal-tenpo-voice__item {
    grid-template-columns: 99px minmax(0, 1fr);
    grid-template-areas:
      "photo title"
      "meta  meta"
      "text  text";
    grid-template-rows: auto auto auto;
    column-gap: 13px;
    row-gap: 6px;
    width: 100%;
    margin: 0;
    padding: 12px 7px;
    border-bottom: 1px solid #d9d9d9;
  }

  /* 99x101 crop; `--voice-*` carries the node's zoom and offset per card */
  .renewal-tenpo-voice__photo {
    position: relative;
    width: 99px;
    height: 101px;
    margin-bottom: 0;
  }

  .renewal-tenpo-voice__photo img {
    position: absolute;
    top: var(--voice-y, 0);
    left: var(--voice-x, 0);
    width: var(--voice-w, 100%);
    height: var(--voice-h, 100%);
    max-width: none;
    object-fit: cover;
  }

  /* the title box matches the photo's height and sits beside it */
  .renewal-tenpo-voice .renewal-tenpo-voice__title {
    height: 101px;
    margin: 0;
  }
}


/* ===== symptom menu (Figma PC 221:259 / SP 69:484) =====
   Both nodes were captured from the page's existing `.fmenu1#symptom`
   accordion, so the component itself is kept: the boxes, the 2-column PC /
   1-column SP `.wrap`, the orange chevron and the jQuery toggle already match
   the nodes to within a pixel. What the nodes do change is the vertical
   rhythm — the theme's margins are roughly twice the designed gaps — so only
   those are restated, scoped to this section so `.rink_box` and `.fmenu1`
   keep their appearance on every other page.
   `id="symptom"` is preserved: the in-page nav links to it. */

main.access .renewal-tenpo-symptom h4.leaf {
  margin-bottom: 0;
}

main.access .renewal-tenpo-symptom .txtbox {
  margin: 0;
}

main.access .renewal-tenpo-symptom .txtbox .txt {
  margin: 0;
}

/* the node centres both 820px blocks inside the 1020px column; the leaf
   heading and the intro copy stay full width */
main.access .renewal-tenpo-symptom .rink_box {
  margin: 14px auto 0;
}

main.access .renewal-tenpo-symptom .rink_box .rink_box_ttl {
  margin: 0 0 11px;
}

main.access .renewal-tenpo-symptom .wrap {
  margin: 14px auto 0;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  /* the node stacks these on a flat 24px rhythm */
  main.access .renewal-tenpo-symptom .txtbox,
  main.access .renewal-tenpo-symptom .rink_box {
    margin-top: 24px;
  }

  main.access .renewal-tenpo-symptom .rink_box .rink_box_ttl {
    margin-bottom: 7px;
  }

  /* the node renders these at 13.9px; raised to the 15px store-page minimum */
  main.access .renewal-tenpo-symptom .wrap h3,
  main.access .renewal-tenpo-symptom .wrap h4 a,
  main.access .renewal-tenpo-symptom .rink_box ul li a {
    font-size: 15px;
  }
}


/* ===== clinic hours + interior gallery (Figma PC 221:273 / SP 221:274) =====
   The nodes put the existing `.cont12` popup gallery and the `.shinryoujikan`
   block under one heading, on a 34px rhythm (PC) / 16px (SP). The components
   themselves already match the nodes to the pixel — PC tiles 194x194 with
   12.5/10.83 gaps, the schedule image 509.97x179.51 beside its notes at a 45px
   gap — so only the section spacing is restated here.
   The gallery ships as two sections because PC and SP link different popup
   sizes; `.vpc` / `.vsp` keep doing the switching. */

main.access section.cont12.renewal-tenpo-clinic,
main.access section.shinryoujikan.renewal-tenpo-clinic {
  margin: 0 auto;
}

main.access section.cont12.renewal-tenpo-clinic--gallery {
  padding: 40px 0 0;
}

main.access .renewal-tenpo-clinic--gallery h4.leaf {
  margin: 0 0 34px;
}

main.access .renewal-tenpo-clinic--gallery ul {
  margin: 0;
}

main.access section.shinryoujikan.renewal-tenpo-clinic--hours {
  width: 100%;
  padding: 34px 0 40px;
}

/* the schedule image ships with its own 15px margin; the section owns the gap */
main.access .renewal-tenpo-clinic--hours .wrap .img {
  margin: 0;
}

main.access .renewal-tenpo-clinic--hours .wrap p {
  margin: 0;
}

@media screen and (max-width: 767.98px) {
  main.access section.cont12.renewal-tenpo-clinic--gallery {
    padding-top: 40px;
  }

  main.access .renewal-tenpo-clinic--gallery h4.leaf {
    margin-bottom: 16px;
  }

  /* The theme lays the tiles out with `justify-content: space-between`, which
     splits a partial last row to the outer edges (三ノ宮 has 11 photos, so the
     final two sat in columns 1 and 3 with a hole between). A 3-column grid
     keeps the same tile size and gaps but packs the last row from the left. */
  main.access .renewal-tenpo-clinic--gallery ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6.95px;
  }

  main.access .renewal-tenpo-clinic--gallery ul li {
    width: auto;
    margin-bottom: 0;
  }

  main.access .renewal-tenpo-clinic--gallery ul li.click {
    grid-column: 1 / -1;
  }

  main.access section.shinryoujikan.renewal-tenpo-clinic--hours {
    padding: 16px 0 40px;
  }

  /* SP stacks the schedule image above its notes */
  main.access .renewal-tenpo-clinic--hours .wrap .img {
    margin-bottom: 15.67px;
  }

  /* the node renders the notes at 13.8px; raised to the 15px store minimum */
  main.access .renewal-tenpo-clinic--hours .wrap p {
    font-size: 15px;
    line-height: 24px;
  }
}


/* ===== store info + access (Figma PC 221:273 / SP 221:274) =====
   PC lays the table and the map side by side (472.43 + 24 + 500); SP stacks
   every row of the table full width on a 6px rhythm, with a 260px map.
   `id="tenpo-j"` is kept for the in-page nav and `id="access"` is added for
   the main-visual アクセス button, which had no target until now. */

.renewal-tenpo-access,
.renewal-tenpo-access * {
  box-sizing: border-box;
}

main.access section.renewal-tenpo-access {
  width: 100%;
  margin: 0;
  padding: 40px 16px;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-access__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

main.access .renewal-tenpo-access__heading {
  margin: 0 0 14px;
}

.renewal-tenpo-access .renewal-tenpo-access__intro-title {
  display: flex;
  align-items: center;
  min-height: 28.79px;
  margin: 0 0 14px;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 6px solid #10ad5a;
  background: none;
  color: #24342a;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
}

.renewal-tenpo-access .renewal-tenpo-access__intro-copy {
  margin: 0;
  color: #3d493f;
  font-size: 15px;
  font-weight: 400;
  line-height: 28.5px;
}

/* ---- table + map ---- */

.renewal-tenpo-access__row {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 28px;
}

/* the theme pins `.cont01 table` to min-width 60% / max-width 500px */
main.access table.renewal-tenpo-access__table {
  flex: 0 0 472.43px;
  width: 472.43px;
  min-width: 0;
  max-width: none;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

main.access table.renewal-tenpo-access__table th,
main.access table.renewal-tenpo-access__table td {
  padding: 19.2px 8.79px;
  border: 1px solid rgba(238, 238, 238, 0.93);
  color: #000;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  vertical-align: middle;
}

main.access table.renewal-tenpo-access__table th {
  width: 143.03px;
  background: #eee;
  text-align: center;
}

main.access table.renewal-tenpo-access__table td {
  text-align: left;
}

/* the theme turns every hovered link black */
.renewal-tenpo-access__table a,
.renewal-tenpo-access__table a:link,
.renewal-tenpo-access__table a:visited,
.renewal-tenpo-access__table a:hover,
.renewal-tenpo-access__table a:focus,
.renewal-tenpo-access__table a:active {
  color: #10ad5a;
  text-decoration: underline;
}

.renewal-tenpo-access__map {
  flex: 0 0 500px;
  width: 500px;
  height: 360px;
}

.renewal-tenpo-access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.renewal-tenpo-access {
    padding: 40px 0;
  }

  .renewal-tenpo-access__inner {
    width: calc(100vw - 16px);
    max-width: 370px;
  }

  main.access .renewal-tenpo-access__heading {
    margin-bottom: 6px;
  }

  .renewal-tenpo-access .renewal-tenpo-access__intro-title {
    align-items: flex-start;
    min-height: 49.58px;
    margin-bottom: 6px;
    padding-left: 12px;
    font-size: 16px;
    line-height: 24.8px;
  }

  /* the node renders this at 14px; raised to the 15px store minimum */
  .renewal-tenpo-access .renewal-tenpo-access__intro-copy {
    font-size: 15px;
    line-height: 25.9px;
  }

  /* every cell becomes its own full-width row on a 6px rhythm */
  .renewal-tenpo-access__row {
    display: block;
    margin-top: 6px;
  }

  main.access table.renewal-tenpo-access__table,
  main.access table.renewal-tenpo-access__table tbody,
  main.access table.renewal-tenpo-access__table tr,
  main.access table.renewal-tenpo-access__table th,
  main.access table.renewal-tenpo-access__table td {
    display: block;
    width: 100%;
  }

  main.access table.renewal-tenpo-access__table th,
  main.access table.renewal-tenpo-access__table td {
    margin-bottom: 6px;
    padding: 10.5px 13.67px;
    font-size: 15px;
    line-height: 22.2px;
    text-align: left;
  }

  main.access table.renewal-tenpo-access__table td {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .renewal-tenpo-access__map {
    width: 100%;
    height: 260px;
  }
}


/* ===== route from the station (Figma PC 221:290 / SP 225:291) =====
   The node rebuilds `.access-block` as a bordered card: a numbered pill and
   the step name on one row, a 4:3 photo, then the description. The photos are
   400x250 (1.6) and the node crops them to 4:3 by trimming 10% off each side,
   which is what `aspect-ratio` + `object-fit: cover` reproduces.
   PC lays the cards out three-up (328px, 18px gaps); SP stacks them.
   The node sets the step number at 12px, the fact pills at 13px and the card
   text at 14px / 13.9px — all raised to the 15px store-page minimum, so the
   pills and the number badge are a few px taller than the node. */

.renewal-tenpo-route,
.renewal-tenpo-route *,
.renewal-tenpo-route-car,
.renewal-tenpo-route-car * {
  box-sizing: border-box;
}

main.access section.cont02.renewal-tenpo-route {
  width: 100%;
  margin: 0 auto;
  padding: 40px 16px 0;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-route__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

main.access .renewal-tenpo-route__heading {
  margin: 0 0 14px;
}

/* ---- intro ---- */

.renewal-tenpo-route .renewal-tenpo-route__intro-title {
  display: flex;
  align-items: center;
  min-height: 28.79px;
  margin: 0 0 14px;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 6px solid #10ad5a;
  background: none;
  color: #24342a;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28.8px;
  text-align: left;
}

.renewal-tenpo-route .renewal-tenpo-route__intro-copy {
  margin: 0;
  color: #3d493f;
  font-size: 15px;
  font-weight: 400;
  line-height: 28.5px;
}

/* ---- fact pills ---- */

.renewal-tenpo-route__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

.renewal-tenpo-route .renewal-tenpo-route__tags li {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 6px 14px 6px 25.67px;
  border: 1px solid #d5ead8;
  border-radius: 999px;
  background: #fff;
  color: #3f8b50;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  list-style: none;
}

.renewal-tenpo-route__tags li {
  position: relative;
}

.renewal-tenpo-route__tags li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10.67px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #f39800;
  transform: translateY(-50%);
}

/* ---- step cards ---- */

.renewal-tenpo-route__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 21px;
}

main.access .renewal-tenpo-route__step {
  display: flex;
  flex: 0 0 328px;
  flex-direction: column;
  gap: 11px;
  width: 328px;
  margin: 0;
  padding: 13.42px 11.67px 16px;
  overflow: hidden;
  border: 1px solid #e1e7e1;
  background: #fff;
}

main.access .renewal-tenpo-route__step-head {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #333;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.renewal-tenpo-route__step-num {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 25px;
  border-radius: 999px;
  background: #4fab63;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
}

main.access .renewal-tenpo-route__step .image {
  width: 100%;
  margin: 0;
  aspect-ratio: 302.67 / 227;
  overflow: hidden;
}

main.access .renewal-tenpo-route__step .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.access .renewal-tenpo-route__step .desc {
  margin: 0;
  padding: 0;
  color: #444;
  font-size: 15px;
  font-weight: 400;
  line-height: 25.2px;
}

/* ---- "車で来院される場合" ---- */

main.access section.cont03.renewal-tenpo-route-car {
  width: 100%;
  margin: 0 auto;
  padding: 32px 16px 40px;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-route-car__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

main.access .renewal-tenpo-route-car__heading {
  margin: 0 0 21px;
}

main.access .renewal-tenpo-route-car .text-block {
  margin: 0;
}

main.access .renewal-tenpo-route-car .text-block p {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.cont02.renewal-tenpo-route {
    padding: 40px 15px 0;
  }

  .renewal-tenpo-route__inner,
  .renewal-tenpo-route-car__inner {
    width: 100%;
  }

  main.access .renewal-tenpo-route__heading {
    margin-bottom: 13.88px;
  }

  .renewal-tenpo-route .renewal-tenpo-route__intro-title {
    align-items: flex-start;
    min-height: 49.58px;
    margin-bottom: 10px;
    padding-left: 12px;
    font-size: 16px;
    line-height: 24.8px;
  }

  .renewal-tenpo-route .renewal-tenpo-route__intro-copy {
    line-height: 25.9px;
  }

  /* the pills stack one per row on SP and square off to a 6px radius */
  .renewal-tenpo-route__tags {
    flex-direction: column;
    gap: 7px;
    margin-top: 17px;
  }

  .renewal-tenpo-route .renewal-tenpo-route__tags li {
    border-radius: 6px;
  }

  .renewal-tenpo-route__steps {
    flex-direction: column;
    gap: 14px;
    margin-top: 17px;
  }

  main.access .renewal-tenpo-route__step {
    flex: 0 0 auto;
    width: 100%;
    padding: 8px 11px;
  }

  main.access .renewal-tenpo-route__step-head {
    gap: 8px;
    font-size: 15px;
    line-height: 22.5px;
  }

  .renewal-tenpo-route__step-num {
    flex: 0 0 34px;
    width: 34px;
  }

  main.access .renewal-tenpo-route__step .image {
    aspect-ratio: 308.25 / 231.19;
  }

  main.access section.cont03.renewal-tenpo-route-car {
    padding: 30px 15px 40px;
  }

  main.access .renewal-tenpo-route-car__heading {
    margin-bottom: 15px;
  }

  /* the node renders this at 13.9px; raised to the 15px store minimum */
  main.access .renewal-tenpo-route-car .text-block p {
    font-size: 15px;
    line-height: 22.2px;
  }
}


/* ===== reservation lead-ins (Figma PC 226:309 / SP 69:500) =====
   The nodes keep the existing `#line` / `#tel` banner stacks untouched and add
   a coloured heading bar plus a tinted intro box above each one. The bars are
   inserted into the current markup — inside the `#line` list, before the
   banners in `#tel` — so nothing about the banners or their links changes.
   The SP node sets the intro copy at 14px; raised to the 15px store minimum. */

.renewal-tenpo-reserve,
.renewal-tenpo-reserve * {
  box-sizing: border-box;
}

main.access li.renewal-tenpo-reserve,
main.access div.renewal-tenpo-reserve {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

/* ---- heading bar ---- */

main.access .renewal-tenpo-reserve__heading {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  margin: 0;
  padding: 0 20px 0 41px;
  border: 0;
  border-radius: 6px;
  background: #4fab63;
  color: #fff;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  text-align: left;
}

/* the white dot with its soft ring */
main.access .renewal-tenpo-reserve__heading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.26);
  transform: translateY(-50%);
}

main.access .renewal-tenpo-reserve--tel .renewal-tenpo-reserve__heading {
  background: #f39800;
}

/* ---- intro box ---- */

main.access .renewal-tenpo-reserve__intro {
  display: flex;
  align-items: center;
  min-height: 56.33px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid #4fab63;
  border-left-width: 4.667px;
  background: #f7fcf7;
  color: #34443a;
  font-size: 15px;
  font-weight: 700;
  line-height: 27px;
}

main.access .renewal-tenpo-reserve--tel .renewal-tenpo-reserve__intro {
  border-color: #f39800;
  background: #fff9ef;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access .renewal-tenpo-reserve__heading {
    height: 51.5px;
    padding: 0 15px 0 36px;
    font-size: 17px;
    line-height: 25.5px;
  }

  main.access .renewal-tenpo-reserve__heading::before {
    left: 15px;
  }

  main.access .renewal-tenpo-reserve__intro {
    min-height: 98.83px;
    margin: 10px 0 8px;
    padding: 14px 13px;
    line-height: 24.5px;
  }

  /* the node softens the intro border on SP */
  main.access .renewal-tenpo-reserve--line .renewal-tenpo-reserve__intro {
    border-color: #d9eadb;
  }

  main.access .renewal-tenpo-reserve--tel .renewal-tenpo-reserve__intro {
    border-color: #f4d39a;
  }
}


/* ===== "動画でみる…からのアクセス" (Figma 226:389) =====
   The node replaces the `h5.arrow` captions with the same green-bar intro
   title used elsewhere and stacks the three clips. The players themselves are
   the page's existing `lite-youtube` embeds inside `.sannomiya-access-mv`, so
   the PC sizing that block already had is left untouched; only the caption and
   the rhythm change. SP drops the fixed height for a 16:9 box. */

.renewal-tenpo-movie,
.renewal-tenpo-movie * {
  box-sizing: border-box;
}

main.access section.cont03.renewal-tenpo-movie {
  width: 100%;
  margin: 0 auto;
  padding: 32px 16px 0;
  color: #27332b;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
}

.renewal-tenpo-movie__inner {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}

main.access .renewal-tenpo-movie__heading {
  margin: 0 0 21px;
}

.renewal-tenpo-movie__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

main.access .renewal-tenpo-movie__item {
  width: 100%;
  margin: 0;
}

/* the caption bar, matching `p.lp-section-intro-title` */
.renewal-tenpo-movie .renewal-tenpo-movie__title {
  display: flex;
  align-items: center;
  min-height: 37px;
  margin: 0 0 7px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 6px solid #10ad5a;
  background: none;
  color: #24342a;
  font-family: Meiryo, "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24.8px;
  text-align: left;
}

main.access .renewal-tenpo-movie__item .iframe {
  margin: 0;
}

/* ---- SP ---- */

@media screen and (max-width: 767.98px) {
  main.access section.cont03.renewal-tenpo-movie {
    padding: 30px 15px 0;
  }

  .renewal-tenpo-movie__inner {
    width: 100%;
  }

  main.access .renewal-tenpo-movie__heading {
    margin-bottom: 21px;
  }

  /* the node shows the clips at the full content width, 16:9 */
  main.access .renewal-tenpo-movie__item lite-youtube {
    width: 100%;
    max-width: none !important;
  }

  main.access .renewal-tenpo-movie__item .iframe iframe,
  main.access .renewal-tenpo-movie__item lite-youtube {
    height: auto;
    aspect-ratio: 329 / 187;
  }
}


/* ===== reservation section background =====
   `.footer-banner` ships a cream `#fffff6` panel (style.css / 2021-home.css).
   The store pages run it on white. */

main.access section.footer-banner#line {
  background: #fff;
}