@charset "UTF-8";
/* ==========================================================================
   page-top-new.php dedicated stylesheet
   root font-size: 100px (PC) / 26.67vw (SP, base 375px) -- inherited from default.css
   ========================================================================== */

.tn-page {
  --tn-teal: #7cc3ce;
  --tn-teal-dark: #5aa8b6;
  --tn-teal-pale: #eaf5f7;
  --tn-bg-soft: #f4f8f9;
  --tn-ink: #1f2328;
  --tn-text: #3a3d42;
  --tn-text-soft: #7a7e85;
  --tn-line: #e2e7e9;
  --tn-white: #fff;
  /* The comps are set in mincho end to end. This is the same stack the rest
     of the theme already uses, so it costs no extra web-font request. */
  --tn-mincho: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "Noto Serif JP", serif;
  /* Shared vertical rhythm. Every section pads by these two values so the gaps
     between sections read the same all the way down the page; sections that
     need to sit tighter against their neighbour override just one side. */
  --tn-sec-top: .8rem;
  --tn-sec-bottom: .8rem;
  overflow: hidden;
  /* .cmn_header (header-new02.php) is position:fixed and 170px tall on PC /
     61px on SP, and this template drops the under_mv block that used to push
     the content down. Reserve exactly that much room; top-new.js re-measures
     the real header height on load/resize so a wrapped nav can't overlap. */
  padding-top: 1.7rem;
  background: var(--tn-white);
  color: var(--tn-text);
  font-family: var(--tn-mincho);
  letter-spacing: .06em;
  -webkit-font-smoothing: antialiased;
}

.tn-page img { max-width: 100%; }
.tn-page a { text-decoration: none; color: inherit; }
.tn-page li { list-style: none; }
.tn-page section { position: relative; }
.tn-page h1, .tn-page h2, .tn-page h3, .tn-page h4 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
/* NOTE: the reset above is (0,1,1), so a bare `.tn-head { margin-bottom }`
   (0,1,0) loses to it and silently does nothing. Every rule in this file that
   puts a margin on a heading is therefore scoped with .tn-page to match. */

.tn-container {
  /* matches header-new02.php's .cmn_header-top / .nav_lists_pc max-width:1440px,
     so section edges line up with the logo/nav above */
  max-width: 14.4rem;
  padding: 0 .3rem;
  margin: 0 auto;
}

.tn-soft { background: var(--tn-bg-soft); }

/* ---------- section heading (title image + jp lead) ---------- */
.tn-page .tn-head { margin-bottom: .4rem; }
.tn-page .tn-head--flush { margin-bottom: 0; }
.tn-head__img { display: block; height: .62rem; width: auto; }
.tn-head--center { text-align: center; }
.tn-head--center .tn-head__img { margin-left: auto; margin-right: auto; }
.tn-head__lead { font-size: .16rem; color: var(--tn-text-soft); letter-spacing: .02em; }
/* The section titles are set as artwork (*-ttl.webp), so the image is marked
   decorative (alt="") and the wording lives here as real text instead -- the
   headings stay machine-readable without printing the same words twice. */
.tn-head__txt {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- reveal-on-scroll animation ---------- */
.tn-reveal {
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity 1s cubic-bezier(.19, 1, .22, 1), transform 1.1s cubic-bezier(.19, 1, .22, 1);
  will-change: opacity, transform;
}
.tn-reveal.is-in { opacity: 1; transform: translateY(0); }
.tn-reveal-zoom { opacity: 0; transform: scale(.94); transition: opacity 1.2s ease, transform 1.2s ease; }
.tn-reveal-zoom.is-in { opacity: 1; transform: scale(1); }
.tn-stagger > * { opacity: 0; transform: translateY(.3rem); transition: opacity .8s ease, transform .8s ease; }
.tn-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.tn-stagger.is-in > *:nth-child(1) { transition-delay: .05s; }
.tn-stagger.is-in > *:nth-child(2) { transition-delay: .15s; }
.tn-stagger.is-in > *:nth-child(3) { transition-delay: .25s; }
.tn-stagger.is-in > *:nth-child(4) { transition-delay: .35s; }
.tn-stagger.is-in > *:nth-child(5) { transition-delay: .45s; }
.tn-stagger.is-in > *:nth-child(6) { transition-delay: .55s; }
.tn-stagger.is-in > *:nth-child(7) { transition-delay: .65s; }
.tn-stagger.is-in > *:nth-child(8) { transition-delay: .75s; }
.tn-stagger.is-in > *:nth-child(9) { transition-delay: .85s; }
.tn-stagger.is-in > *:nth-child(10) { transition-delay: .95s; }

@media (prefers-reduced-motion: reduce) {
  .tn-reveal, .tn-reveal-zoom, .tn-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- corner-cut decoration (diagonal fold, bottom-right) ---------- */
/* Corner fold -- the same outlined triangle as the MORE mark, at card size.
   Used on the MENU cards, the Before After cards and the column cards so the
   whole page carries one motif. */
/* Right angle at the bottom-right, white fill, hairline rule -- the same
   shape as the MORE fold, sitting flush on the card's corner. */
.tn-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: .56rem;
  height: .56rem;
  pointer-events: none;
}
.tn-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='99.4,0.6 99.4,99.4 0.6,99.4' fill='%23ffffff' stroke='%231f2328' stroke-width='1.2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* The arrow: a 1px bar with a chevron head, anchored at its right end so it
   overhangs the card edge. Two background layers on one box -- the bar is a
   gradient sized to the box, so widening the box on hover lengthens the bar
   while the head stays put. */
.tn-corner::after {
  content: "";
  position: absolute;
  left: .1rem;          /* anchored at the left end, so growth pushes the head outward */
  bottom: .2rem;
  width: .3rem;
  height: .12rem;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 1l6 5-6 5' fill='none' stroke='%231f2328' stroke-width='1.2'/%3E%3C/svg%3E") right center / .08rem .12rem no-repeat,
    linear-gradient(#1f2328, #1f2328) left center / calc(100% - .04rem) 1px no-repeat;
  transition: width .4s cubic-bezier(.19, 1, .22, 1);
}
.tn-corner-link:hover .tn-corner::after,
.tn-ba__card:hover .tn-corner::after { width: .46rem; }

/* header-new02.php already skips the under_mv/breadcrumb block for this
   template (it also rendered a page-title <h2> that landed above this page's
   <h1>); this is the fallback so the FV always starts right under the header
   even if that check is bypassed. */
.top-new_page .under_mv { display: none !important; }

/* This page ships its own wide logo (img/top-new/logo.webp, 4:1) on PC and SP
   alike -- header-new02.php swaps the src, these keep it at the same optical
   height as the standard 3.64:1 header logo (300px/160px wide) rather than
   letting it be clamped by whatever room the flex row happens to leave. */
.cmn_header--top-new .logo img { width: 3.1rem; }
@media screen and (max-width: 767px) {
  /* 176px at 4:1 is 44px tall -- the same height as the standard logo at
     160px, so it still clears the 61px SP header. */
  .cmn_header--top-new .logo img { width: 176px; }
}

/* The PC header for this page (.tnh) is styled inline in header-new02.php,
   next to its markup, so the fixed header can never render unstyled if this
   stylesheet is served stale by a cache. Nothing for it lives here. */

/* ==========================================================================
   FV
   ========================================================================== */
.tn-fv {
  /* top offset lives on .tn-page (see above) so the hero starts flush under
     the fixed header -- no stray gap between the nav and the FV image.
     Nothing below either: the Scroll cue and ABOUT close up against the FV. */
  padding-bottom: 0;
}
.tn-fv__media {
  position: relative;
  line-height: 0;
  /* fv-pc.webp / fv-sp.webp have a transparent diagonal cut in the top-left
     corner by design, meant to show a solid navy backdrop through it —
     matches the brand navy used in the header/CTAs elsewhere on the site. */
  background: #30325f;
}
.tn-fv__media img { width: 100%; display: block; }
.tn-fv-anim { animation: tnFvIn 1.6s cubic-bezier(.19, 1, .22, 1) both; }
@keyframes tnFvIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }

/* The two appeal badges are one supplied graphic (fv-icon.webp, transparent
   ground) rather than CSS circles, and it runs on PC and SP alike. It is held
   clear of the navy diagonal cut in the FV's bottom-right corner. */
.tn-fv__icon {
  position: absolute;
  right: 12%;
  bottom: 8%;
  width: 2.7rem;
  margin: 0;
  z-index: 3;
  line-height: 0;
  opacity: 0;
  animation: tnBadgeIn .9s cubic-bezier(.34, 1.56, .64, 1) 1.1s forwards, tnFloat 3.6s ease-in-out 2s infinite;
}
.tn-fv__icon img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 .06rem .2rem rgba(31, 35, 40, .22));
}
@keyframes tnBadgeIn { from { opacity: 0; transform: translateY(.25rem) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.08rem); } }

/* The Scroll cue is overlaid on the FV rather than stacked under it, so it
   costs no vertical space between the hero and ABOUT. It sits in the quiet
   left margin of both crops, clear of the catch copy. */
.tn-scroll {
  position: absolute;
  left: .3rem;
  bottom: .26rem;
  text-shadow: 0 0 .08rem rgba(255, 255, 255, .95);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  color: var(--tn-text-soft);
  font-size: .13rem;
  letter-spacing: .1em;
  line-height: 1.4;
  z-index: 2;
}
.tn-scroll span { writing-mode: vertical-rl; margin-bottom: .08rem; }
.tn-scroll i { width: 1px; height: .42rem; background: rgba(31, 35, 40, .25); position: relative; overflow: hidden; }
.tn-scroll i::after {
  content: "";
  position: absolute;
  left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--tn-teal);
  animation: tnScrollLine 1.8s ease-in-out infinite;
}
@keyframes tnScrollLine { 0% { top: -50%; } 100% { top: 100%; } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
/* ABOUT butts up against the FV -- only the Scroll cue separates them. */
.tn-about { padding: .5rem 0 var(--tn-sec-bottom); }
.tn-about__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.tn-about__catch {
  font-size: .23rem;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--tn-ink);
  text-align: right;
}
/* Copy on the left, photo on the right (the photo carries the MORE fold). */
.tn-about__body { display: grid; grid-template-columns: 1fr 5.6rem; gap: .8rem; align-items: start; }
.tn-about__figure { position: relative; display: block; }
.tn-about__crop { display: block; overflow: hidden; }
.tn-about__crop img { width: 100%; display: block; transition: transform 1.4s cubic-bezier(.19, 1, .22, 1); }
.tn-about__figure:hover .tn-about__crop img { transform: scale(1.06); }
.tn-more {
  position: absolute;
  right: 0; bottom: 0;
  width: 1.7rem; height: 1.7rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 .16rem .26rem 0;
  box-sizing: border-box;
}
/* Outlined corner-fold: a white triangle with a hairline rule on all three
   sides, drawn as one SVG so the diagonal gets a real stroke (clip-path
   alone can't be bordered). The polygon is inset by half the stroke so the
   right and bottom rules don't render at half width against the box edge. */
.tn-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='99.5,0.5 99.5,99.5 0.5,99.5' fill='%23ffffff' stroke='%231f2328' stroke-width='0.7'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transition: opacity .35s ease;
}
/* Teal fill for hover, cross-faded over the outlined version. */
.tn-more::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='99.5,0.5 99.5,99.5 0.5,99.5' fill='%237cc3ce' stroke='%237cc3ce' stroke-width='0.7'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
}
.tn-more span {
  position: relative;
  z-index: 1;
  color: var(--tn-ink);
  font-size: .11rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.5;
  white-space: nowrap;
  transition: color .35s ease;
}
.tn-more span strong {
  display: block;
  font-family: 'Cormorant Garamond', 'Noto Sans JP', serif;
  font-size: .19rem;
  letter-spacing: .14em;
  font-weight: 500;
  margin-bottom: .02rem;
}
/* the small rule-and-arrow that trails 詳細を見る in the reference */
.tn-more span::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: .16rem;
  height: 1px;
  margin-left: .05rem;
  background: currentColor;
  position: relative;
}
.tn-more:hover::after { opacity: 1; }
.tn-more:hover span { color: var(--tn-white); }
.tn-about__text { padding-top: .12rem; }
.tn-about__text p {
  font-size: .155rem;
  line-height: 2;
  letter-spacing: .1em;
  margin-bottom: .26rem;
  color: var(--tn-ink);
}
.tn-about__text p:last-child { margin-bottom: 0; }

/* ==========================================================================
   ANALYSIS (VISIA / InBody, shared)
   ========================================================================== */
.tn-analysis { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
/* VISIA and InBody share one tinted band, so they meet on a single gap
   instead of stacking two full section paddings. */
.tn-analysis + .tn-analysis { padding-top: .4rem; }
/* The section title sits at the top of the copy column, not above the whole
   section -- VISIA runs photo-left, InBody mirrors it. */
.tn-analysis__body { display: grid; grid-template-columns: 5.4rem 1fr; gap: .7rem; align-items: center; margin-bottom: .5rem; }
.tn-analysis__body.tn-analysis--rev { grid-template-columns: 1fr 5.4rem; }
.tn-analysis--rev .tn-analysis__figure { order: 2; }
.tn-analysis__figure img { width: 100%; display: block; filter: drop-shadow(0 .12rem .3rem rgba(0, 0, 0, .12)); }
.tn-analysis__text .tn-head { margin-bottom: .3rem; }
.tn-analysis__text p { font-size: .15rem; line-height: 2; letter-spacing: .1em; color: var(--tn-ink); }
.tn-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tn-analysis__checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .14rem; }
.tn-analysis__checks--5 { grid-template-columns: repeat(5, 1fr); }
/* Square corners, hairline rule. The tick is pinned to the left edge of the
   box and the label is centred in the box, as in the comp. */
.tn-analysis__checks li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tn-line);
  background: var(--tn-white);
  padding: .16rem .16rem .16rem .38rem;
  font-size: .14rem;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--tn-ink);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.tn-analysis__checks li:hover { box-shadow: 0 .06rem .18rem rgba(124, 195, 206, .22); border-color: var(--tn-teal); }
.tn-analysis__checks .tn-check-tx { text-align: center; }
.tn-analysis__checks .tn-check-ic {
  position: absolute;
  left: .16rem;
  top: 50%;
  transform: translateY(-50%);
  width: .15rem; height: .15rem;
  background-color: var(--tn-teal);
  -webkit-mask: url(../img/top-new/check.webp) center/contain no-repeat;
  mask: url(../img/top-new/check.webp) center/contain no-repeat;
}

/* ==========================================================================
   MENU
   ========================================================================== */
.tn-menu { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
.tn-menu__tabs { display: flex; gap: .16rem; margin-bottom: .5rem; }
.tn-menu__tab {
  flex: 1;
  text-align: center;
  padding: .18rem 0;
  font-size: .19rem;
  font-weight: 600;
  border-radius: .08rem;
  border: 1px solid var(--tn-teal);
  color: var(--tn-teal-dark);
  background: var(--tn-white);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.tn-menu__tab.is-active { background: var(--tn-teal); color: var(--tn-white); box-shadow: 0 .1rem .24rem rgba(124, 195, 206, .4); }
.tn-menu__tab:hover { box-shadow: 0 .08rem .2rem rgba(124, 195, 206, .3); }

.tn-menu__panel { display: none; }
.tn-menu__panel.is-active { display: block; animation: tnFade .5s ease both; }
@keyframes tnFade { from { opacity: 0; } to { opacity: 1; } }

.tn-cat {
  border-bottom: 1px solid var(--tn-line);
}
.tn-cat__head {
  display: flex;
  align-items: center;
  gap: .12rem;
  padding: .26rem 0;
  cursor: pointer;
  font-size: .19rem;
  font-weight: 600;
  color: var(--tn-ink);
}
.tn-cat__head::before { content: ""; width: .1rem; height: .1rem; border-radius: 50%; background: var(--tn-teal); flex: none; }
.tn-cat__head .tn-cat__arrow { margin-left: auto; width: .16rem; height: .16rem; position: relative; transition: transform .35s ease; }
.tn-cat__head .tn-cat__arrow::before, .tn-cat__head .tn-cat__arrow::after {
  content: ""; position: absolute; width: .09rem; height: 1.5px; background: var(--tn-ink); top: 50%;
}
.tn-cat__head .tn-cat__arrow::before { left: 0; transform: rotate(45deg); }
.tn-cat__head .tn-cat__arrow::after { right: 0; transform: rotate(-45deg); }
.tn-cat__head.is-open .tn-cat__arrow { transform: rotate(180deg); }
.tn-cat__body { overflow: hidden; max-height: 0; transition: max-height .5s cubic-bezier(.65, 0, .35, 1); }
.tn-cat__body-inner { padding-bottom: .2rem; }

.tn-cat__simple { padding: .1rem 0; color: var(--tn-text-soft); font-size: .15rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .16rem; }
.tn-cat__more {
  display: inline-flex; align-items: center; gap: .08rem;
  padding: .12rem .26rem; border-radius: 999px; border: 1px solid var(--tn-ink);
  font-size: .14rem; font-weight: 600; color: var(--tn-ink); transition: background .3s ease, color .3s ease;
}
.tn-cat__more:hover { background: var(--tn-ink); color: var(--tn-white); }

.tn-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem .24rem; }
.tn-card { display: block; }
.tn-card__figure { position: relative; margin-bottom: .18rem; aspect-ratio: 4/3; }
.tn-card__figure > img { overflow: hidden; }
.tn-card__figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.19, 1, .22, 1); }
.tn-card:hover .tn-card__figure img { transform: scale(1.08); }
.tn-card__figure .tn-corner { width: .44rem; height: .44rem; }
.tn-card__figure .tn-corner::after { left: .08rem; bottom: .15rem; width: .24rem; }
.tn-card:hover .tn-card__figure .tn-corner::after { width: .36rem; }
.tn-page .tn-card__name { font-size: .16rem; font-weight: 400; letter-spacing: .08em; color: var(--tn-ink); text-align: center; margin-bottom: .16rem; }
.tn-card__prices { display: flex; flex-direction: column; gap: .07rem; }
.tn-card__price { display: flex; align-items: center; gap: .1rem; font-size: .14rem; }
/* Both labels are outlined boxes with square corners -- no filled variant. */
.tn-card__price span:first-child {
  flex: none;
  width: .72rem;
  text-align: center;
  padding: .04rem .06rem;
  border: 1px solid var(--tn-ink);
  font-size: .11rem;
  letter-spacing: .04em;
  color: var(--tn-ink);
}
.tn-card__price strong { font-weight: 400; font-size: .15rem; letter-spacing: .04em; color: var(--tn-ink); }

.tn-menu__note { margin-top: .3rem; font-size: .12rem; line-height: 1.8; color: var(--tn-text-soft); }
.tn-menu__cats { margin-top: .2rem; }

/* --- "お悩みからさがす" panel ---
   The worry terms used to be pills in a space-between flex row, which left
   ragged gaps and pills of different widths on each line. An even grid of
   equal-width buttons keeps the two tabs' panels visually the same weight. */
.tn-worry__lead {
  font-size: .15rem;
  line-height: 1.9;
  color: var(--tn-text-soft);
  margin: 0 0 .32rem;
}
.tn-worry__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .16rem;
  margin: 0;
  padding: 0;
}
.tn-worry__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: .62rem;
  padding: .14rem .2rem;
  box-sizing: border-box;
  border: 1px solid var(--tn-line);
  border-radius: .06rem;
  background: var(--tn-white);
  font-size: .16rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--tn-ink);
  transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.tn-worry__item::after {
  content: "";
  flex: none;
  width: .07rem;
  height: .07rem;
  border-top: 1.5px solid var(--tn-teal);
  border-right: 1.5px solid var(--tn-teal);
  transform: rotate(45deg);
  transition: transform .3s ease, border-color .3s ease;
}
.tn-worry__item:hover {
  background: var(--tn-teal);
  border-color: var(--tn-teal);
  color: var(--tn-white);
  box-shadow: 0 .1rem .24rem rgba(124, 195, 206, .35);
  transform: translateY(-.03rem);
}
.tn-worry__item:hover::after { border-color: var(--tn-white); transform: rotate(45deg) translate(.02rem, -.02rem); }
.tn-worry__all { margin: .4rem 0 0; text-align: center; }
/* One group per worry category, mirroring /worry/: a small teal-dot heading
   (same mark as the treatment category rows above) over the button grid. */
.tn-worry__group + .tn-worry__group { margin-top: .4rem; }
.tn-page .tn-worry__cat {
  display: flex;
  align-items: center;
  gap: .12rem;
  font-size: .18rem;
  font-weight: 600;
  color: var(--tn-ink);
  margin-bottom: .16rem;
}
.tn-worry__cat::before { content: ""; width: .1rem; height: .1rem; border-radius: 50%; background: var(--tn-teal); flex: none; }

/* ==========================================================================
   REASONS
   ========================================================================== */
.tn-reasons { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
.tn-reasons__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; }
/* Number badge and title share a row; the photo and body copy run full width
   underneath. Same arrangement on PC and SP -- only the sizes differ. */
.tn-reason__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num   title"
    "fig   fig"
    "text  text";
  align-items: center;
  column-gap: .2rem;
}
.tn-reason__num { grid-area: num; position: relative; display: block; width: .8rem; margin-bottom: 0; }
.tn-reason__num img { display: block; width: 100%; }
.tn-page .tn-reason__title { grid-area: title; font-size: .2rem; font-weight: 700; color: var(--tn-ink); margin-bottom: 0; line-height: 1.6; }
.tn-reason__figure { grid-area: fig; overflow: hidden; margin: .26rem 0 .2rem; }
.tn-reason__figure img { width: 100%; display: block; transition: transform .8s cubic-bezier(.19, 1, .22, 1); }
.tn-reason__item:hover .tn-reason__figure img { transform: scale(1.06); }
.tn-reason__item p { grid-area: text; font-size: .14rem; line-height: 1.85; color: var(--tn-text); }

/* ==========================================================================
   PROMISE
   ========================================================================== */
.tn-promise { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
.tn-promise__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; align-items: start; }
.tn-promise__lead { font-size: .17rem; line-height: 1.9; letter-spacing: .1em; color: var(--tn-ink); }
.tn-promise__list { display: grid; grid-template-columns: 1fr 1fr; gap: .16rem; }
.tn-promise__list li {
  display: flex; align-items: flex-start; gap: .14rem;
  background: var(--tn-white); border: 1px solid var(--tn-line);
  padding: .2rem .22rem; font-size: .15rem; line-height: 1.6; letter-spacing: .06em; color: var(--tn-ink);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.tn-promise__list li:hover { box-shadow: 0 .06rem .18rem rgba(124, 195, 206, .22); border-color: var(--tn-teal); }
.tn-promise__list .tn-check-ic { width: .18rem; height: .18rem; margin-top: .02rem; flex: none; background-color: var(--tn-teal); -webkit-mask: url(../img/top-new/check.webp) center/contain no-repeat; mask: url(../img/top-new/check.webp) center/contain no-repeat; }

/* ==========================================================================
   BEFORE / AFTER + COLUMNS (slick carousels)
   ========================================================================== */
.tn-ba { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
.tn-ba__slide { padding: 0 .12rem; }
.tn-ba__pair { position: relative; display: flex; margin-bottom: .24rem; }
.tn-ba__pair img { width: 50%; display: block; object-fit: cover; aspect-ratio: 4/5; }
/* A flat teal caret between the two frames -- no disc, no shadow. */
.tn-ba__arrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-top: .1rem solid transparent;
  border-bottom: .1rem solid transparent;
  border-left: .14rem solid var(--tn-teal);
  z-index: 2;
}
/* Card sits on the page tint with square corners, as in the comp. */
.tn-ba__card {
  position: relative;
  background: var(--tn-bg-soft);
  height: 100%;
  box-sizing: border-box;
  padding: .2rem .2rem .6rem;
}
.tn-page .tn-ba__name { font-size: .17rem; font-weight: 400; letter-spacing: .08em; text-align: center; color: var(--tn-ink); margin-bottom: .2rem; }
.tn-ba__rows { display: flex; flex-direction: column; gap: .12rem; }
.tn-ba__row { display: flex; align-items: flex-start; gap: .14rem; font-size: .14rem; line-height: 1.7; }
.tn-ba__row span:first-child {
  flex: none; width: 1.06rem; text-align: center; white-space: nowrap;
  padding: .04rem .04rem; border: 1px solid var(--tn-ink);
  background: var(--tn-white); color: var(--tn-ink); font-size: .11rem; letter-spacing: .02em;
}
.tn-ba__row span:last-child { color: var(--tn-ink); letter-spacing: .04em; }
.tn-ba__row:last-child span:last-child { font-size: .12rem; line-height: 1.8; }
/* The card links to its treatment page (as the old top's もっと見る did): a
   transparent <a> over the whole card, plus a small label in the bottom
   padding opposite the corner fold so the link is visible, not just implied.
   The fold's arrow already lengthens on .tn-ba__card:hover. */
.tn-ba__link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; display: block; }
.tn-ba__link:hover { opacity: 1; }
.tn-ba__more {
  position: absolute; left: .2rem; bottom: .22rem;
  font-size: .12rem; letter-spacing: .08em; color: var(--tn-text-soft);
  transition: color .3s ease;
}
.tn-ba__card:hover .tn-ba__more { color: var(--tn-teal-dark); }

.tn-cols { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
.tn-col__slide { padding: 0 .12rem; }
.tn-col-card {
  position: relative;
  display: block;
  height: 100%;
  box-sizing: border-box;
  background: var(--tn-bg-soft);
  padding: .2rem .2rem .6rem;
}
/* Column thumbnails come from the editor at whatever aspect the author
   uploaded. The box stays 4:3 so the carousel rows line up, but the image is
   fitted inside it rather than cropped to fill -- nothing gets cut off. */
.tn-col-card__figure { position: relative; overflow: hidden; margin-bottom: .2rem; aspect-ratio: 4/3; background: var(--tn-white); }
.tn-col-card__figure img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .6s ease; }
.tn-col-card:hover .tn-col-card__figure img { transform: scale(1.04); }
.tn-col-card__date { font-size: .13rem; color: var(--tn-text-soft); letter-spacing: .1em; margin-bottom: .12rem; }
.tn-col-card__title { font-size: .155rem; line-height: 1.75; letter-spacing: .08em; color: var(--tn-ink); }

/* NOTE: an earlier version forced `.slick-track{display:flex}` here to equalize
   row heights, but that fights Slick's own float/width-based slide positioning
   and made the whole carousel collapse to roughly half width. Do not re-add
   that; row-height evenness is handled in JS instead (see top-new.js). */

/* Defensive: several footer/page stylesheets carry an unscoped
   `.slick-initialized, .slick-slider, .slick-dotted { width: 50% }` (it was in
   footer-new02A.css, which this page loads, and is still in subscription.css).
   Pin this page's carousels back to their natural width so a stray copy of that
   rule can't halve them again. */
.tn-page .slick-slider,
.tn-page .slick-dotted,
.tn-page .slick-initialized { width: auto; }

/* Hard guarantee that a slide can never paint outside its slider. slick.css
   sets this on .slick-list, but it is loaded from a CDN and sits below several
   of this page's other stylesheets, so it is restated here: without it a track
   left on a fractional offset shows sliced cards at both edges. */
.tn-page .slick-list { overflow: hidden; }
.tn-page .slick-track { display: block; }

/* The peek itself comes from slick's centerMode/centerPadding (see
   top-new.js); the slider stays on the container's own width. */
.tn-js-ba-slider.slick-slider,
.tn-js-col-slider.slick-slider { width: auto; margin: 0; }
/* centerMode dims the off-centre cards by default in some themes; keep every
   card at full strength -- the comp shows them all equally weighted. */
.tn-page .slick-slide { opacity: 1; }
.tn-page .slick-dots { position: static; margin-top: .3rem; display: flex !important; justify-content: center; gap: .1rem; }
.tn-page .slick-dots li { width: auto; height: auto; margin: 0; }
.tn-page .slick-dots li button { width: .1rem; height: .1rem; padding: 0; border-radius: 50%; background: var(--tn-line); }
.tn-page .slick-dots li button::before { display: none; }
.tn-page .slick-dots li.slick-active button { background: var(--tn-teal); }
/* Prev/next: a hairline ring with a thin chevron, in the same key as the
   corner folds. slick-theme's font glyph is dropped (it painted a heavy black
   disc), and the chevron is drawn with borders so it stays crisp. */
.tn-page .slick-prev, .tn-page .slick-next {
  width: .5rem; height: .5rem; z-index: 5;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--tn-ink);
  border-radius: 50%;
  box-shadow: none;
  transition: background .3s ease, border-color .3s ease;
}
.tn-page .slick-prev { left: -.1rem; }
.tn-page .slick-next { right: -.1rem; }
.tn-page .slick-prev::before, .tn-page .slick-next::before { content: none; }
.tn-page .slick-prev::after, .tn-page .slick-next::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .11rem; height: .11rem;
  border-top: 1px solid var(--tn-ink);
  border-right: 1px solid var(--tn-ink);
  transition: border-color .3s ease;
}
.tn-page .slick-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.tn-page .slick-next::after { transform: translate(-70%, -50%) rotate(45deg); }
.tn-page .slick-prev:hover, .tn-page .slick-next:hover,
.tn-page .slick-prev:focus, .tn-page .slick-next:focus { background: var(--tn-ink); border-color: var(--tn-ink); }
.tn-page .slick-prev:hover::after, .tn-page .slick-next:hover::after,
.tn-page .slick-prev:focus::after, .tn-page .slick-next:focus::after { border-color: var(--tn-white); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.tn-faq { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
.tn-faq__item { border-bottom: 1px solid var(--tn-line); }
.tn-faq__q {
  display: flex; align-items: center; gap: .14rem; padding: .26rem 0;
  cursor: pointer; font-size: .16rem; font-weight: 600; color: var(--tn-ink);
}
.tn-faq__q::before { content: ""; width: .1rem; height: .1rem; border-radius: 50%; background: var(--tn-teal); flex: none; }
.tn-faq__q .tn-cat__arrow { margin-left: auto; width: .16rem; height: .16rem; position: relative; transition: transform .35s ease; flex: none; }
.tn-faq__q .tn-cat__arrow::before, .tn-faq__q .tn-cat__arrow::after {
  content: ""; position: absolute; width: .09rem; height: 1.5px; background: var(--tn-ink); top: 50%;
}
.tn-faq__q .tn-cat__arrow::before { left: 0; transform: rotate(45deg); }
.tn-faq__q .tn-cat__arrow::after { right: 0; transform: rotate(-45deg); }
.tn-faq__q.is-open .tn-cat__arrow { transform: rotate(180deg); }
.tn-faq__a { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.65, 0, .35, 1); }
.tn-faq__a-inner { padding: 0 0 .24rem .24rem; font-size: .14rem; line-height: 1.8; color: var(--tn-text); }

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.tn-insta { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
.tn-insta__embed {
  min-height: 2rem;
  /* EmbedSocial builds the feed inside a shadow root, so its internals can't
     be reached from this stylesheet -- only the host element can be moved.
     It insets its content a fixed 30px from the host, so the host is pulled
     out by exactly that much and the feed lands on the same left/right
     reference line as every other section. .tn-page clips the overhang. */
  margin-left: -30px;
  margin-right: -30px;
}

/* ---------- SHORT MOVIE (TikTok) ----------
   Three 9:16 clips under the Instagram feed. PC: a 3-up grid, hover to play.
   SP: top-new.js turns .tn-video__list into a slick slider (centerMode, so a
   sliver of the neighbouring clip peeks in on either side). Every <video> is
   muted and inline; the src is assigned lazily by JS (see data-src). */
.tn-video { margin-top: .6rem; }
/* Same treatment as the *-ttl.webp section titles: a large, widely tracked
   serif English word with a small grey gothic line underneath -- set as live
   text here (Cormorant Garamond + Noto Sans JP are already loaded by the
   header) rather than in mincho, which read as body copy. */
.tn-video__lead {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .12rem;
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1.6;
  color: var(--tn-text-soft);
  margin-bottom: .34rem;
}
.tn-video__lead-en {
  display: block;
  font-family: 'Cormorant Garamond', 'Noto Sans JP', serif;
  font-size: .34rem;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1.2;
  color: var(--tn-ink);
  margin-bottom: .08rem;
}
.tn-video__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .3rem;
  max-width: 9.6rem;
  margin: 0 auto;
}
.tn-video__card {
  display: block;
  position: relative;
  z-index: 0;
  /* 9:16 box via padding so the card keeps its shape before the video has a
     frame to size itself with (and in browsers without aspect-ratio). */
  padding-top: 177.78%;
  border-radius: .12rem;
  overflow: hidden;
  background: var(--tn-teal-pale);
  cursor: pointer;
  /* Safari: without this the rounded corners are lost while the video paints */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}
.tn-video__media {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.tn-video__card.is-ready .tn-video__media { opacity: 1; }

/* skeleton: a slow shimmer on the pale-teal card until the first frame lands.
   The mp4s are big, so on a slow line this is what the user looks at for a
   while -- keep it calm rather than a spinner. */
.tn-video__skel {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(100deg, #e6eff1 25%, #f6fafb 50%, #e6eff1 75%);
  background-size: 200% 100%;
  animation: tn-skel 1.6s ease-in-out infinite;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.tn-video__skel::after {
  /* faint TikTok-ish play mark so the box reads as "a video is coming" */
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: .5rem; height: .5rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(124, 195, 206, .5);
}
.tn-video__card.is-ready .tn-video__skel { opacity: 0; visibility: hidden; }
@keyframes tn-skel {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* PC: play mark, shown while the clip is idle; hover starts the clip and the
   mark fades out. A click goes to the TikTok post (the card is an <a>). */
.tn-video__play {
  position: absolute; left: 50%; top: 50%;
  width: .64rem; height: .64rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85);
  background: rgba(31, 35, 40, .28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 1;
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.tn-video__play::after {
  content: "";
  position: absolute; left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .1rem 0 .1rem .17rem;
  border-color: transparent transparent transparent var(--tn-white);
}
.tn-video__card.is-ready .tn-video__play { opacity: 1; }
.tn-video__card.is-ready:hover .tn-video__play,
.tn-video__card.is-playing .tn-video__play { opacity: 0; transform: translate(-50%, -50%) scale(.8); }

/* the click target: a transparent link over the whole card. default.css dims
   every a:hover to .7 -- irrelevant here since the link has no paint of its
   own, and the hover-play is bound on the card, not on this link. */
.tn-video__tap {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: block;
}
.tn-video__tap:hover { opacity: 1; }

.tn-video__cta { text-align: center; margin-top: .4rem; }
.tn-video__link {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .14rem .32rem;
  border-radius: 999px;
  border: 1px solid var(--tn-ink);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .13rem; font-weight: 500; letter-spacing: .1em;
  color: var(--tn-ink);
  background: var(--tn-white);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.tn-video__link:hover { background: var(--tn-ink); color: var(--tn-white); box-shadow: 0 .08rem .2rem rgba(31, 35, 40, .18); }
.tn-video__tiktok { width: .18rem; height: .18rem; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .tn-video__skel { animation: none; }
}

/* ==========================================================================
   NEWS
   ========================================================================== */
.tn-news { padding: var(--tn-sec-top) 0 1.2rem; }
.tn-news__item {
  display: flex; gap: .3rem; align-items: baseline; padding: .24rem 0; border-bottom: 1px solid var(--tn-line);
  transition: opacity .3s ease;
}
.tn-news__item:hover { opacity: .6; }
.tn-news__date { flex: none; font-size: .14rem; color: var(--tn-text-soft); letter-spacing: .04em; }
.tn-news__excerpt { font-size: .14rem; line-height: 1.8; color: var(--tn-text); }
.tn-news__empty { padding: .4rem 0; color: var(--tn-text-soft); font-size: .14rem; }

/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* SP header (.cmn_header) is 61px tall */
  .tn-page {
    padding-top: .61rem;
    --tn-sec-top: .5rem;
    --tn-sec-bottom: .5rem;
  }

  .tn-container { padding: 0 .24rem; }
  .tn-page .tn-head { margin-bottom: .28rem; }
  .tn-page .tn-head--flush { margin-bottom: 0; }
  .tn-head__img { height: .5rem; }
  .tn-head__lead { font-size: .13rem; }

  /* SP crop is portrait, so the appeal graphic runs across the bottom rather
     than tucking into a corner. */
  .tn-fv__icon { right: .14rem; bottom: .2rem; width: 52%; }
  .tn-fv__icon img { filter: drop-shadow(0 .04rem .14rem rgba(31, 35, 40, .25)); }
  .tn-scroll { left: .22rem; bottom: .16rem; font-size: .11rem; }
  .tn-scroll i { height: .28rem; }

  .tn-about { padding: .34rem 0 var(--tn-sec-bottom); }

  .tn-about__head { flex-direction: column; align-items: flex-start; margin-bottom: .34rem; }
  /* The head's copy is .pconly; the one inside the text column carries it at
     this width, left aligned above the body copy. */
  .tn-about__text .tn-about__catch {
    text-align: left;
    font-size: .185rem;
    line-height: 1.7;
    letter-spacing: .08em;
    margin-bottom: .24rem;
  }
  .tn-about__body { grid-template-columns: 1fr; gap: .34rem; }
  .tn-more { width: 1.3rem; height: 1.3rem; padding: 0 .12rem .2rem 0; }
  .tn-more span { font-size: .09rem; }
  .tn-more span strong { font-size: .14rem; }
  .tn-more span::after { width: .12rem; }
  .tn-about__text p { font-size: .14rem; line-height: 1.9; margin-bottom: .2rem; }

  .tn-analysis { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
  .tn-analysis + .tn-analysis { padding-top: .36rem; }
  .tn-analysis__body,
  .tn-analysis__body.tn-analysis--rev { grid-template-columns: 1fr; gap: .3rem; margin-bottom: .34rem; }
  .tn-analysis--rev .tn-analysis__figure { order: 0; }
  /* Two columns at this width leave roughly 1.1rem of text per cell, so the
     padding is tightened and the long labels carry an explicit <br class="sponly">
     at a natural point -- no more single trailing character on its own line. */
  .tn-analysis__checks { grid-template-columns: 1fr 1fr; gap: .1rem; }
  /* Keep the left padding clear of the tick: the earlier shorthand here reset
     it to .1rem and long labels ran underneath the mark. */
  .tn-analysis__checks li { font-size: .125rem; padding: .13rem .1rem .13rem .32rem; }
  .tn-analysis__checks .tn-check-ic { left: .1rem; width: .13rem; height: .13rem; }
  .tn-analysis__checks-wide { grid-column: 1 / -1; }

  .tn-menu { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
  .tn-menu__tabs { gap: .1rem; margin-bottom: .3rem; }
  .tn-menu__tab { font-size: .15rem; padding: .14rem 0; }
  .tn-menu__grid { grid-template-columns: 1fr 1fr; gap: .24rem .14rem; }
  .tn-card__name { font-size: .14rem; }
  .tn-card__price { font-size: .12rem; }
  .tn-cat__head { font-size: .16rem; padding: .2rem 0; }

  .tn-worry__lead { font-size: .13rem; margin-bottom: .24rem; }
  .tn-worry__list { grid-template-columns: 1fr 1fr; gap: .12rem; }
  .tn-worry__item { min-height: .52rem; font-size: .13rem; padding: .12rem .1rem; }
  .tn-worry__group + .tn-worry__group { margin-top: .3rem; }
  .tn-page .tn-worry__cat { font-size: .16rem; margin-bottom: .12rem; }
  .tn-worry__all { margin-top: .3rem; }

  .tn-reasons { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
  .tn-reasons__grid { grid-template-columns: 1fr; gap: .5rem; }
  .tn-reason__item { column-gap: .16rem; }
  .tn-reason__num { width: .62rem; }
  .tn-reason__title { font-size: .17rem; }
  .tn-reason__figure { margin: .2rem 0; }

  .tn-promise { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
  .tn-promise__inner { grid-template-columns: 1fr; gap: .26rem; }
  .tn-promise__list { grid-template-columns: 1fr; gap: .1rem; }
  .tn-promise__list li { padding: .16rem .16rem; font-size: .14rem; }

  .tn-ba { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
  /* A 1.06rem label beside the value leaves too little room for the figures at
     this width, so the label sits above its value instead. */
  .tn-ba__slide { padding: 0 .07rem; }
  .tn-ba__card { padding: .16rem .16rem .5rem; }
  .tn-ba__more { left: .16rem; bottom: .18rem; font-size: .11rem; }
  .tn-ba__rows { gap: .16rem; }
  .tn-ba__row { flex-direction: column; align-items: flex-start; gap: .07rem; }
  .tn-ba__row span:first-child { width: auto; padding: .04rem .12rem; }
  .tn-ba__row span:last-child { font-size: .135rem; }
  .tn-page .tn-ba__name { font-size: .155rem; margin-bottom: .18rem; }

  .tn-col__slide { padding: 0 .07rem; }
  .tn-col-card { padding: .16rem .16rem .5rem; }

  .tn-cols { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }

  /* The corner fold now sits in the card's own bottom padding rather than on
     top of the artwork, so it can stay at this width too -- just smaller. */
  .tn-ba__card > .tn-corner,
  .tn-col-card > .tn-corner { width: .44rem; height: .44rem; }
  .tn-ba__card > .tn-corner::after,
  .tn-col-card > .tn-corner::after { left: .08rem; bottom: .15rem; width: .24rem; }

  .tn-faq { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }
  .tn-faq__q { font-size: .145rem; padding: .2rem 0; }
  .tn-faq__a-inner { font-size: .13rem; padding-left: .16rem; }

  .tn-insta { padding: var(--tn-sec-top) 0 var(--tn-sec-bottom); }

  /* SHORT MOVIE on SP: one clip at a time, neighbours peeking (slick
     centerMode). The list runs full-bleed so the peeks reach the screen edge.
     Until slick has initialised, only the first card shows, centred at the
     same width slick will give it, so the block doesn't flash three stacked
     portrait cards on a slow script load. */
  .tn-video { margin-top: .5rem; }
  .tn-video__lead { font-size: .11rem; margin-bottom: .26rem; }
  .tn-video__lead-en { font-size: .28rem; }
  .tn-video__list { display: block; max-width: none; margin: 0 -.3rem; }
  .tn-video__slide { padding: 0 .06rem; }
  .tn-video__list:not(.slick-initialized) .tn-video__slide { width: 70%; margin: 0 auto; }
  .tn-video__list:not(.slick-initialized) .tn-video__slide + .tn-video__slide { display: none; }
  .tn-video__card { border-radius: .1rem; }
  /* SP autoplays, so no play mark */
  .tn-video__play { display: none; }
  .tn-video__cta { margin-top: .3rem; }
  .tn-video__link { font-size: .12rem; padding: .13rem .28rem; }

  .tn-news { padding: var(--tn-sec-top) 0 .8rem; }
  .tn-news__item { flex-direction: column; gap: .06rem; padding: .2rem 0; }

  /* SP: no prev/next arrows on the Before After / COLUMNS carousels -- they sit
     on top of the cards at this width. Swipe + dots only. (top-new.js also
     passes arrows:false below 768px; this is the belt-and-braces half.) */
  .tn-page .slick-prev,
  .tn-page .slick-next { display: none !important; }
}


/* ==========================================================================
   BudouX (Japanese phrase-based line breaking, this page only)
   js/top-new-budoux.js inserts zero-width spaces at phrase boundaries in the
   target elements and tags them .tn-budoux. ZWSP breaks the same way on iOS,
   Windows and Android, unlike <wbr>. keep-all so the browser breaks only
   where the script allows; overflow-wrap so an unbreakable run can never
   overflow. (The script also sets these inline; this is the CSS half.)
   ========================================================================== */
.tn-page .tn-budoux { word-break: keep-all; overflow-wrap: anywhere; }