/* ===========================================================
   Aifit — components: header, rail, hero, platform
   =========================================================== */

/* ---------- font-size toggle ---------- */
.fz { display: inline-flex; align-items: center; gap: 0.5em; }
.fz-cap { font-size: 0.66rem; color: var(--muted); letter-spacing: .06em; white-space: nowrap; }
.fz-btns { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.fz-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; border: 0; background: transparent; color: var(--purple-deep);
  padding: 0.28em 0.6em; line-height: 1; border-right: 1px solid var(--line-soft);
  transition: background .2s, color .2s;
}
.fz-btn:last-child { border-right: 0; }
.fz-a { font-family: var(--mincho); }
.fz-l { font-size: 0.54rem; font-weight: 700; }
.fz-btn.is-on { background: var(--purple); color: #fff; }
.fz-btn:hover:not(.is-on) { background: var(--lav-2); }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.7em; }
.brand-logo { width: 5.44rem; height: 2.05rem; object-fit: contain; flex: 0 0 auto; display: block; }
.tel-ruby { ruby-position: over; }
.tel-ruby rt { font-size: 0.42em; color: var(--gold-deep); letter-spacing: .08em; font-weight: 700; font-family: var(--gothic); }
.brand-tag { font-size: 0.62rem; color: var(--muted); letter-spacing: .06em; white-space: nowrap; padding-left: 0.7em; border-left: 1px solid var(--line); line-height: 1.3; }
.brand--light .brand-tag { color: rgba(255,255,255,.7); border-left-color: rgba(255,255,255,.25); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 100; transition: box-shadow .35s; }
/* blur lives on a pseudo so .hdr itself has no backdrop-filter — otherwise it
   becomes the containing block for the fixed-position drawer and clips it */
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px -22px rgba(60,48,96,.4); }
.hdr-inner { display: flex; align-items: center; gap: 1.2rem; height: 4.8rem; }
.hdr-nav { display: flex; gap: clamp(0.4rem, 1.3vw, 1.3rem); margin-left: auto; }
.hdr-link { font-size: 0.92rem; font-weight: 600; color: var(--ink); padding: 0.35em 0.1em; position: relative; white-space: nowrap; }
.hdr-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.hdr-link:hover { color: var(--purple); }
.hdr-link:hover::after { transform: scaleX(1); }
.hdr-drop { position: relative; display: inline-flex; align-items: center; }
.hdr-drop::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 0.7rem; }
.hdr-drop-toggle { font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--ink); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3em; padding: 0.35em 0.1em; white-space: nowrap; }
.hdr-drop-toggle:hover { color: var(--purple); }
.hdr-caret { font-size: 0.68em; transition: transform .25s; }
.hdr-drop:hover .hdr-caret, .hdr-drop:focus-within .hdr-caret { transform: rotate(180deg); }
.hdr-drop-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 12.5rem; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 20px 44px -18px rgba(60,48,96,.42); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.hdr-drop:hover .hdr-drop-menu, .hdr-drop:focus-within .hdr-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hdr-drop-item { font-size: 0.88rem; font-weight: 600; color: var(--ink); padding: 0.62em 0.85em; border-radius: 8px; white-space: nowrap; }
.hdr-drop-item:hover { background: var(--lav); color: var(--purple-deep); }
.drawer-group { display: flex; flex-direction: column; }
.drawer-grouplabel { padding: 0.95em 0.2em 0.45em; font-weight: 700; color: var(--purple-deep); font-size: 0.82rem; letter-spacing: .05em; }
.drawer-sub { padding-left: 1.1rem; font-size: 0.94rem; }
.hdr-right { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }
.hdr-tel { display: inline-flex; align-items: center; gap: 0.5em; color: var(--purple-deep); }
.hdr-tel .ic { width: 1.3em; height: 1.3em; color: var(--purple); }
.hdr-tel-tx { display: flex; flex-direction: column; line-height: 1.1; }
.hdr-tel-num { font-family: var(--mincho); font-weight: 700; font-size: 1.18rem; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.hdr-tel-hours { font-size: 0.6rem; color: var(--muted); letter-spacing: .04em; }
.hdr-burger { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 0; border-radius: 12px; background: linear-gradient(140deg, var(--purple), var(--purple-deep)); color: #fff; box-shadow: 0 10px 22px -12px rgba(87,72,120,.8); }
.hdr-burger .ic { width: 1.4em; height: 1.4em; }
.hdr-burger:hover { filter: brightness(1.06); }

@media (max-width: 1080px) { .hdr-nav { display: none; } .hdr-tel-tx { display: none; } }
/* header keeps just the logo — tagline lives in footer/drawer to avoid crowding the nav */
.hdr-inner .brand-tag { display: none; }
@media (max-width: 560px) { .fz-cap { display: none; } .brand-tag { display: none; } }
html[data-fz="large"] .hdr-nav, html[data-fz="xlarge"] .hdr-nav { display: none; }
html[data-fz] .hdr-tel-tx { display: none; }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; visibility: hidden; transition: visibility 0s .45s; }
.drawer.is-open { pointer-events: auto; visibility: visible; transition: visibility 0s; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(47,41,66,0.45); opacity: 0; transition: opacity .35s; }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px); background: var(--lav); box-shadow: -20px 0 50px -20px rgba(47,41,66,.5); transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); display: flex; flex-direction: column; padding: 1.5rem 1.4rem; gap: 1.2rem; overflow-y: auto; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; }
.drawer-close { width: 2.6rem; height: 2.6rem; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.drawer-close .ic { width: 1.2em; height: 1.2em; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 0.95em 0.2em; border-bottom: 1px solid var(--line-soft); font-weight: 600; color: var(--ink); }
.drawer-link .ic { width: 1.1em; height: 1.1em; color: var(--purple); }
.drawer-ai { justify-content: center; }
.drawer-tel { display: flex; align-items: center; gap: 0.7em; padding: 0.9em 1em; background: #fff; border-radius: 14px; color: var(--ink); }
.drawer-tel .ic { width: 1.5em; height: 1.5em; color: var(--purple); }
.drawer-tel b { font-family: var(--mincho); font-size: 1.2rem; display: block; }
.drawer-tel small { font-size: 0.66rem; color: var(--muted); }

/* ---------- side rail ---------- */
.rail { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; border-radius: 16px 0 0 16px; overflow: hidden; box-shadow: -8px 12px 30px -16px rgba(60,48,96,.5); }
.rail a, .rail button { width: 74px; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0.85em 0.4em; font-size: 0.62rem; font-weight: 700; line-height: 1.3; text-align: center; transition: filter .2s, background .2s; }
.rail .ic { width: 1.5em; height: 1.5em; }
.rail-ai { background: linear-gradient(140deg, #EFE2BC, var(--gold) 60%, var(--gold-deep)); color: var(--purple-ink); }
.rail-ai .ic { color: #fff; }
.rail-urgent { background: linear-gradient(140deg, var(--purple), var(--purple-deep)); color: #fff; }
.rail-urgent b { font-size: 0.68rem; }
.rail-line { background: #06C755; color: #fff; }
.rail-line .ic { color: #fff; }
.rail-item { background: #fff; color: var(--purple-deep); }
.rail-item .ic { color: var(--purple); }
.rail-item:hover, .rail-ai:hover, .rail-urgent:hover { filter: brightness(1.05); }
.rail-top { background: var(--purple-ink); color: #fff; cursor: pointer; }
@media (max-width: 1180px) {
  /* auto-hide header while idle / scrolling up (mobile) */
  .hdr::before { transition: opacity .28s ease; }
  .hdr .hdr-inner { transition: transform .28s ease, opacity .28s ease; }
  .hdr--hidden::before { opacity: 0; }
  .hdr--hidden .hdr-inner { transform: translateY(-110%); opacity: 0; pointer-events: none; }
  /* mobile: rail becomes a fixed bottom action bar */
  .rail { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; align-items: stretch; gap: 1px; border-radius: 0; background: #fff; box-shadow: 0 -10px 26px -14px rgba(60,48,96,.5); padding-bottom: env(safe-area-inset-bottom); }
  .rail a, .rail button { flex: 1 1 0; width: auto; min-width: 0; padding: 0.55em 0.15em; font-size: 0.55rem; gap: 3px; justify-content: flex-start; }
  .rail .ic { width: 1.35em; height: 1.35em; }
  .rail-urgent b { font-size: 0.58rem; }
  body:has(.rail) { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(560px, 86vh, 820px); display: flex; align-items: center; overflow: hidden; background: var(--lav-2); }
.hero-photo { object-fit: cover; }
.hero-photo::part(empty) { background: linear-gradient(135deg, #E7DEF1, #D9CBE8 60%, #C9D2E2); color: var(--purple-deep); }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.86) 30%, rgba(255,255,255,0.45) 52%, rgba(255,255,255,0.08) 72%); }
.hero-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; width: 100%; padding-block: clamp(2.5rem, 6vh, 4rem); }
.hero-copy { max-width: 32rem; }
.hero-copy .eyebrow { font-size: 1.02rem; letter-spacing: .14em; align-items: flex-start; line-height: 1.65; }
.hero-copy .eyebrow::before { flex: none; margin-top: 0.82em; }
.hero-copy .eyebrow em { font-style: normal; font-size: 1.22em; font-weight: 700; }
.hero-copy .eyebrow .eb-kaicho { color: var(--gold-deep); white-space: nowrap; }
.hero-copy .eyebrow .eb-shoji { color: var(--purple-deep); }
.hero-copy .eyebrow .eb-nowrap { white-space: nowrap; }
@media (max-width: 700px) { .hero-copy .eyebrow { font-size: 0.82rem; letter-spacing: .1em; } }
.hero-h1 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.24; letter-spacing: .04em; margin: 1rem 0 1.1rem; color: var(--ink); }
.hero-h1 .hl-1 { display: block; }
.hero-h1 .hl-2 { display: block; font-size: 0.8em; line-height: 1.3; margin-top: 0.18em; color: var(--purple); text-wrap: pretty; }
.hero-h1 em { font-style: normal; color: var(--purple); }
.hero-sub { font-size: clamp(0.96rem, 1.4vw, 1.08rem); color: var(--text); max-width: 26rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.8rem 0 1rem; }
.hero-ai { margin-top: 0.3rem; }

/* ---- hero statement (text-focused) ---- */
.hero-copy--statement { max-width: 34rem; }
.hero-since {
  display: inline-flex; align-items: center; gap: 0.65em;
  font-family: var(--gothic); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.32em; color: var(--gold-deep); text-transform: uppercase;
}
.hero-since::before { content: ""; width: 1.9em; height: 1px; background: var(--gold-deep); opacity: .7; }
.hero-statement {
  font-family: var(--mincho); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.5; letter-spacing: .04em;
  color: var(--ink); margin-top: 1.05rem; text-wrap: pretty;
}
.hero-statement em { font-style: normal; }
.hero-statement .hs-gold { color: var(--gold-deep); }
.hero-statement .hs-purple { color: var(--purple-deep); }
.hero-statement .hs-pop {
  color: #8a2c40;
  font-size: 1.32em;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(transparent 58%, rgba(138,44,64,.14) 58%);
  padding: 0 .1em;
  border-radius: 2px;
}
@media (max-width: 700px) {
  .hero-statement { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.55; }
  .hero-since { font-size: 0.72rem; letter-spacing: .26em; }
}

/* ---- hero chat-invite card ---- */
.hero-invite {
  margin-top: 1.5rem; max-width: 25.5rem;
  background: rgba(255,255,255,0.74);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(124,107,166,0.18); border-radius: 22px;
  padding: 1.25rem 1.3rem 1.05rem;
  box-shadow: 0 26px 55px -30px rgba(43,37,54,0.55);
}
.hi-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.hi-ava {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
  box-shadow: 0 8px 18px -7px rgba(124,107,166,.85);
}
.hi-ava svg { width: 1.35rem; height: 1.35rem; }
.hi-name { font-family: var(--mincho); font-weight: 700; font-size: 1.04rem; color: var(--ink); letter-spacing: .03em; }
.hi-status { font-size: 0.74rem; color: var(--purple-deep); display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.15em; }
.hi-status i { width: 0.5em; height: 0.5em; border-radius: 50%; background: #46a877; box-shadow: 0 0 0 3px rgba(70,168,119,.22); }
.hi-bubble {
  font-size: 1.0rem; line-height: 1.72; color: var(--ink);
  background: #fff; border: 1px solid rgba(124,107,166,.14);
  border-radius: 4px 16px 16px 16px; padding: 0.8rem 1rem; margin-bottom: 0.9rem;
}
.hi-input {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: #fff; border: 1.5px solid var(--purple); border-radius: 999px;
  padding: 0.5rem 0.55rem 0.5rem 1.15rem; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.hi-ph { font-size: 0.95rem; color: #8a8294; }
.hi-send {
  width: 2.15rem; height: 2.15rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
}
.hi-send svg { width: 1.1rem; height: 1.1rem; }
.hi-input:hover { box-shadow: 0 12px 26px -12px rgba(124,107,166,.7); transform: translateY(-1px); }
.hi-foot {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.85rem; padding-top: 0.8rem;
  border-top: 1px solid rgba(124,107,166,.14); font-size: 0.84rem;
}
.hi-foot a { display: inline-flex; align-items: center; gap: 0.4em; color: var(--purple-deep); text-decoration: none; font-weight: 600; }
.hi-foot a svg { width: 1.05em; height: 1.05em; }
.hi-foot a:hover { color: var(--purple); text-decoration: underline; }
@media (max-width: 1080px) { .hero-invite { margin-inline: auto; } }
@media (max-width: 700px) { .hero-invite { padding: 1.05rem 1.05rem 0.9rem; } .hi-bubble { font-size: 0.94rem; } }

.hero-plat { display: flex; justify-content: center; }

/* ---------- platform ---------- */
.plat { position: relative; width: min(100%, 560px); aspect-ratio: 1; }
.plat-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plat-ring { fill: none; stroke: var(--purple); stroke-width: 0.4; opacity: .45; stroke-dashoffset: 0; }
@keyframes plat-draw { from { stroke-dashoffset: var(--circ, 245); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .plat.is-drawn .plat-ring { animation: plat-draw 1.3s cubic-bezier(.4,.7,.2,1); }
}
.plat-spoke { stroke-width: 0.7; stroke-linecap: round; opacity: .8; stroke-dashoffset: 0; }
@keyframes plat-spoke { from { stroke-dashoffset: var(--len, 100); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) { .plat-spoke { animation: plat-spoke .5s ease; } }

/* center core */
.plat-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff, #F3EFFA);
  border: 1px solid var(--line); box-shadow: 0 18px 44px -20px rgba(87,72,120,.5), inset 0 0 0 6px rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; text-align: center; z-index: 4; padding: 6%;
}
.plat-core.has-sel { border-color: var(--node); box-shadow: 0 22px 50px -20px color-mix(in srgb, var(--node) 50%, transparent), inset 0 0 0 6px rgba(255,255,255,.7); }
.pc-brand { display: flex; flex-direction: column; align-items: center; gap: 0.1em; }
.pc-brand-logo { width: clamp(4.2rem, 11vw, 6rem); height: auto; display: block; margin-bottom: 0.15em; }
.pc-brand-en { font-size: 0.6rem; letter-spacing: .26em; color: var(--purple); text-transform: uppercase; margin-top: 2px; }
.pc-brand-jp { font-family: var(--mincho); font-size: 0.74rem; color: var(--muted); margin-top: 0.5em; line-height: 1.5; }
.pc-detail { display: flex; flex-direction: column; align-items: center; gap: 0.25em; animation: pc-in .4s cubic-bezier(.2,.7,.2,1); }
@keyframes pc-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.pc-detail-ic { width: 1.7rem; height: 1.7rem; color: var(--node); }
.pc-detail-label { font-family: var(--mincho); font-weight: 700; font-size: clamp(0.95rem, 2.1vw, 1.18rem); color: var(--node); }
.pc-detail-body { font-size: clamp(0.62rem, 1.15vw, 0.74rem); color: var(--text); line-height: 1.7; max-width: 16em; }
.pc-detail-more { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.66rem; font-weight: 700; color: var(--node, var(--purple-deep)); margin-top: 0.45em; background: color-mix(in srgb, var(--node, var(--purple)) 10%, #fff); border: 1px solid color-mix(in srgb, var(--node, var(--purple)) 45%, transparent); border-radius: 999px; padding: 0.5em 1.2em; transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.pc-detail-more:hover { background: var(--node, var(--purple)); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--node, var(--purple)) 70%, transparent); }
.pc-detail-more .ic { width: 1em; height: 1em; transition: transform .25s; }
.pc-detail-more:hover .ic { transform: translateX(3px); }
.plat-core { cursor: pointer; }

/* nodes */
.plat-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.35em;
  border: 0; background: transparent; width: 23%; z-index: 5;
  transition: opacity .3s, transform .3s;
}
.plat-node-disc {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 10px 24px -12px rgba(87,72,120,.45);
  display: flex; align-items: center; justify-content: center;
  transition: scale .45s cubic-bezier(.34,1.56,.64,1), translate .45s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s, background .3s;
}
.plat-node-disc .ic { width: 1.7rem; height: 1.7rem; color: var(--node); }
.plat-node-label { font-size: 0.72rem; font-weight: 700; color: var(--ink); white-space: nowrap; line-height: 1.2; }
.plat-node-label i { font-style: normal; font-size: 0.82em; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .plat.is-drawn .plat-node { animation: plat-node-in .5s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
  .plat.is-drawn .plat-node-disc { animation: plat-float 4.6s ease-in-out calc(var(--d, 0s) * 4) infinite; }
  .plat-node:hover .plat-node-disc, .plat-node.is-selected .plat-node-disc { animation-play-state: paused; }
}
@keyframes plat-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@keyframes plat-node-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.plat-node:hover .plat-node-disc, .plat-node:focus-visible .plat-node-disc { scale: 1.25; translate: 0 -4px; border-color: var(--node); background: color-mix(in srgb, var(--node) 7%, #fff); box-shadow: 0 22px 40px -14px color-mix(in srgb, var(--node) 60%, transparent); }
.plat-node:hover .plat-node-label, .plat-node:focus-visible .plat-node-label { color: var(--node); }
.plat-node-label { transition: color .25s; }
.plat-node.is-selected .plat-node-disc { background: var(--node); border-color: var(--node); scale: 1.18; box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--node) 60%, transparent); }
.plat-node.is-selected .plat-node-disc .ic { color: #fff; }
.plat-node.is-selected .plat-node-label { color: var(--node); }
.plat-node.is-dim { opacity: .5; }
.plat-node:focus-visible { outline: none; }

@media (max-width: 560px) {
  .plat-node-disc { width: 2.6rem; height: 2.6rem; }
  .plat-node-disc .ic { width: 1.25rem; height: 1.25rem; }
  .plat-node { width: 26%; }
  .plat-node-label { font-size: 0.6rem; white-space: normal; max-width: 9em; text-align: center; }
  .plat-core { width: 42%; }
  .pc-brand-logo { width: 3.6rem; }
  .pc-brand-en { font-size: 0.52rem; letter-spacing: .18em; }
  .pc-brand-jp { font-size: 0.64rem; }
  .pc-detail-ic { width: 1.3rem; height: 1.3rem; }
  .pc-detail-body { font-size: 0.6rem; line-height: 1.55; }
}