/* ==========================================================================
   基本のレイアウトと文字組（元サイトの構成）。色は tokens.css の変数を参照します。
   ========================================================================== */
:root {
  --nav-height:70px;
  color-scheme:light;
  font-family:var(--font);
  font-feature-settings:"palt";
  letter-spacing:var(--tracking);
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-height) + 24px);
}

body {
  margin:0;
}

/* 日本語は文節の切れ目で折り返す（対応ブラウザのみ。非対応ではふつうの折り返し） */
main {
  word-break:auto-phrase;
}

body, button, a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  cursor:pointer;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

p, h1, h2, h3, figure {
  margin:0;
}

button, a {
  touch-action:manipulation;
}

a:focus-visible, button:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px;
}

a:hover {
  text-decoration:none;
}

button:disabled {
  cursor:default;
}

.wrap {
  width:min(1120px,calc(100% - 96px));
  margin-inline:auto;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--paper);
  padding:15px;
}

.skip-link:focus {
  top:12px;
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--header-glass);
  border-bottom:1px solid var(--hairline);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.nav {
  height:var(--nav-height);
  display:flex;
  align-items:center;
  gap:36px;
}

.brand {
  font-size:25px;
  font-weight:680;
  letter-spacing:-1px;
  white-space:nowrap;
}

.brand span:not(.sr-only) {
  font-weight:450;
}

.nav-links {
  display:flex;
  margin-left:auto;
  align-items:center;
  gap:24px;
  font-size:14px;
  color:var(--ink-soft);
}

.nav-links a:hover, .footer-main a:hover {
  color:var(--accent-strong);
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--on-ink);
  border-radius:999px;
  font-size:16px;
  font-weight:500;
  padding:15px 28px;
  min-height:50px;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:var(--ink-soft);
  transform:translateY(-1px);
}

.button-small {
  font-size:14px;
  min-height:36px;
  padding:8px 20px;
}

.eyebrow {
  font-size:14px;
  font-weight:600;
  letter-spacing:.13em;
  margin-bottom:25px;
}

.section-space {
  padding-block:96px;
}

.display {
  font-size:clamp(36px,4vw,56px);
  line-height:1.25;
  letter-spacing:-.03em;
  font-weight:700;
}

.section-intro {
  font-size:18px;
  line-height:var(--leading);
  font-weight:var(--weight-body);
  color:var(--muted);
  margin-top:28px;
}

.tech-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px;
  margin-top:76px;
}

.tech-item {
  border-top:1px solid var(--line);
  padding-top:25px;
}

.index {
  font-size:14px;
  color:var(--faint);
  letter-spacing:.08em;
}

.tech-item h3 {
  font-size:24px;
  line-height:1.4;
  margin:26px 0 18px;
  letter-spacing:-.02em;
}

.tech-item p, .everyday-bottom p {
  font-size:16px;
  line-height:var(--leading);
  color:var(--muted);
}

.section-heading {
  margin-bottom:65px;
}

.connection {
  text-align:center;
}

.fine-print {
  font-size:13px;
  line-height:var(--leading-note);
  color:var(--muted);
  margin-top:18px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:16px;
  font-weight:500;
  margin-top:28px;
  color:var(--accent-strong);
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.portability {
  background:var(--soft);
}

.portability-grid {
  display:grid;
  grid-template-columns:.85fr 1fr;
  gap:95px;
  align-items:center;
}

.portability-image {
  height:620px;
  border-radius:20px;
  overflow:hidden;
}

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

.portability .display {
  font-size:58px;
}

.portability .section-intro {
  font-size:17px;
}

.spec-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px 30px;
  margin:45px 0 0;
}

.spec-grid>div {
  border-top:1px solid var(--line);
  padding-top:18px;
}

.spec-grid dt {
  font-size:14px;
  color:var(--muted);
  margin-bottom:12px;
}

.spec-grid dd {
  font-size:16px;
  margin:0;
  white-space:nowrap;
}

.spec-grid dd span {
  font-size:39px;
  font-weight:650;
  letter-spacing:-.05em;
}

.spec-grid .dimensions {
  font-size:21px;
  font-weight:600;
  letter-spacing:-.04em;
  line-height:48px;
}

.spec-grid small {
  font-size:14px;
  font-weight:400;
}

.spec-grid sup {
  font-size:11px;
  vertical-align:super;
  margin-left:3px;
}

.purchase {
  text-align:center;
}

.purchase .eyebrow {
  color:var(--muted);
}

.purchase-image {
  width:490px;
  margin:20px auto 0;
}

.colors {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:14px;
  color:var(--muted);
  margin:4px 0 29px;
}

.color-dot {
  display:inline-block;
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid var(--line-strong);
}

.color-dot.white {
  background:var(--pave-white);
}

.color-dot.black {
  background:var(--pave-black);
  margin-left:14px;
  border-color:var(--pave-black);
}

.purchase .fine-print {
  margin-top:20px;
}

.site-footer {
  background:var(--soft);
  padding:38px 0 25px;
  font-size:13px;
  color:var(--muted);
}

.footnotes {
  padding-left:20px;
  margin:0;
  line-height:var(--leading-note);
}

.footnote-note {
  line-height:var(--leading-note);
  margin-top:8px;
}

.footer-main {
  display:flex;
  align-items:center;
  gap:36px;
  border-top:1px solid var(--line);
  margin-top:28px;
  padding:29px 0;
}

.footer-main .brand {
  color:var(--ink);
  font-size:28px;
}

.footer-main p {
  font-size:12px;
}

.footer-main>a:last-child {
  margin-left:auto;
  font-size:14px;
}

.footer-bottom {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:12px;
}

.footer-bottom a {
  margin-left:auto;
}

.footer-bottom button {
  padding:8px 0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
}

#motion-toggle {
  display:none;
}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .section-space {
    padding-block:100px;
  }
  .tech-grid {
    gap:28px;
  }
  .tech-item h3 {
    font-size:21px;
  }
  .tech-item p {
    font-size:16px;
  }
  .portability-grid {
    gap:42px;
  }
  .portability .display {
    font-size:46px;
  }
  .portability-image {
    height:600px;
  }
  .spec-grid dd span {
    font-size:33px;
  }
  .spec-grid .dimensions {
    font-size:17px;
  }
  .footer-main {
    gap:24px;
  }
  .footer-main p {
    max-width:220px;
  }
}

@media(max-width:700px) {
  :root {
    --nav-height:62px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .nav {
    gap:14px;
  }
  .brand {
    font-size:22px;
  }
  .nav-links {
    gap:14px;
  }
  .nav-links a {
    font-size:13px;
  }
  .nav-links a:first-child, .nav-links a:nth-child(2) {
    display:none;
  }
  .button-small {
    font-size:13px;
    padding:8px 16px;
    min-height:36px;
  }
  .display, .portability .display {
    font-size:clamp(32px,7.6vw,49px);
    letter-spacing:-.03em;
    line-height:1.3;
  }
  .eyebrow {
    font-size:12px;
    margin-bottom:23px;
    letter-spacing:.12em;
  }
  .section-space {
    padding-block:85px;
  }
  .section-intro {
    font-size:16px;
    line-height:var(--leading);
    margin-top:25px;
  }
  .tech-grid {
    grid-template-columns:1fr;
    gap:34px;
    margin-top:46px;
  }
  .tech-item {
    padding-top:18px;
  }
  .tech-item h3 {
    font-size:23px;
    margin:15px 0 12px;
  }
  .tech-item p {
    font-size:16px;
  }
  .section-heading {
    margin-bottom:38px;
  }
  .connection-heading .section-intro br {
    display:none;
  }
  .portability-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
  .portability-image {
    height:430px;
    order:2;
  }
  .portability-image img {
    object-position:center 52%;
  }
  .portability .section-intro br {
    display:none;
  }
  .spec-grid {
    margin-top:35px;
    gap:28px 20px;
  }
  .spec-grid dd span {
    font-size:37px;
  }
  .spec-grid .dimensions {
    font-size:19px;
  }
  .purchase-image {
    width:min(490px,110%);
    max-width:none;
    margin:12px -5% 0;
  }
  .purchase .display {
    font-size:40px;
  }
  .purchase-inner {
    overflow:hidden;
  }
  .purchase .fine-print {
    font-size:12px;
  }
  .site-footer {
    padding-top:29px;
  }
  .footnotes, .footnote-note {
    font-size:12px;
  }
  .footer-main {
    flex-wrap:wrap;
    gap:18px;
    padding:25px 0;
  }
  .footer-main p {
    order:3;
    max-width:none;
    flex-basis:100%;
    font-size:11px;
  }
  .footer-main>a:last-child {
    font-size:13px;
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:8px 20px;
  }
  .footer-bottom a {
    font-size:12px;
  }
  .footer-bottom button {
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *, *::before, *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media print {
  .site-header {
    position:static;
  }
  .hero-scroll, .hero-note, .footer-bottom {
    display:none;
  }
  .section-space {
    padding-block:40px;
  }
  .reveal {
    opacity:1!important;
    transform:none!important;
  }
}

/* Centered headlines only: trim the space after line-final Japanese punctuation.
   Keep the punctuation in the text; em makes the optical adjustment responsive. */
.heading-end-adjust {
  display:inline-flex;
  margin-inline-end:-.45em;
}

/* Reviews and in-person listening extend the product story before purchase. */
.review-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}

.review-card {
  min-width:0;
}

.review-link {
  display:block;
  height:100%;
  border-radius:16px;
}

.review-image {
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:16px;
  background:var(--surface-2);
}

.review-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.review-play {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  padding-left:3px;
  width:52px;
  height:52px;
  background:var(--ink-glass);
  color:var(--on-ink);
  border-radius:50%;
  font-size:19px;
}

.review-link:hover .review-image img {
  transform:scale(1.035);
}

.review-copy {
  padding-top:24px;
}

.review-author {
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:10px;
}

.review-copy h3 {
  font-size:18px;
  line-height:1.75;
  font-weight:600;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.review-watch {
  display:inline-flex;
  gap:13px;
  font-size:15px;
  color:var(--accent-strong);
  margin-top:18px;
}

.reviews>.wrap>.fine-print {
  margin-top:36px;
}

.showroom {
  background:var(--soft);
  padding-block:80px;
}

.showroom .section-heading {
  margin-bottom:28px;
}

.showroom .eyebrow {
  margin-bottom:12px;
}

.showroom .display {
  font-size:44px;
}

.showroom .section-intro {
  font-size:17px;
  margin-top:14px;
  line-height:1.7;
}

.venue-list {
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.venue-card {
  min-width:0;
  background:var(--paper);
  border-radius:20px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:28px;
  padding:24px;
}

.venue-image {
  height:100%;
  min-height:180px;
  overflow:hidden;
  border-radius:12px;
}

.venue-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.venue-copy {
  min-width:0;
}

.venue-meta {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:8px;
}

.venue-area {
  font-size:14px;
  color:var(--muted);
}

.venue-status {
  font-size:14px;
  line-height:1.5;
  background:var(--soft);
  color:var(--ink-soft);
  padding:4px 10px;
  border-radius:99px;
}

.venue-copy h3 {
  font-size:26px;
  line-height:1.35;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}

.venue-description {
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  margin-top:10px;
}

/* 1文ずつ改行する（狭い画面で「夜の／部」のように語の途中で折り返さない） */
.venue-description span {
  display:inline-block;
  max-width:100%;
}

.venue-facts {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:14px 0 0;
  padding:0;
}

.venue-facts>div {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:15px;
  line-height:1.7;
  min-width:0;
}

.venue-facts dt {
  color:var(--muted);
  flex-shrink:0;
}

.venue-facts dd {
  margin:0;
  overflow-wrap:anywhere;
}

.venue-copy address {
  font-size:16px;
  line-height:1.7;
  font-style:normal;
  margin:12px 0 4px;
  overflow-wrap:anywhere;
}

.venue-copy address span {
  display:inline-block;
  max-width:100%;
}

.venue-actions {
  display:flex;
  align-items:center;
  gap:4px 28px;
  flex-wrap:wrap;
}

.venue-actions .text-link {
  font-size:15px;
  line-height:1.7;
  gap:10px;
  margin:0;
  min-height:44px;
}

@media(max-width:1000px) {
  .nav {
    gap:24px;
  }
  .nav-links {
    gap:20px;
  }
  .review-grid {
    gap:20px;
  }
  .venue-card {
    grid-template-columns:200px minmax(0,1fr);
    gap:24px;
  }
  .venue-copy h3 {
    font-size:24px;
  }
}

@media(max-width:700px) {
  .nav {
    gap:14px;
  }
  .nav-links a:nth-child(3) {
    display:none;
  }
  .nav-links a:last-child {
    display:block;
    white-space:nowrap;
  }
  .review-grid {
    grid-template-columns:1fr;
    gap:38px;
  }
  .review-copy {
    padding-top:19px;
  }
  .review-copy h3 {
    font-size:18px;
  }
  .review-image {
    border-radius:14px;
  }
  .review-author {
    font-size:14px;
  }
  .reviews>.wrap>.fine-print {
    margin-top:30px;
  }
  .showroom {
    padding-block:56px;
  }
  .showroom .section-heading {
    margin-bottom:24px;
  }
  .showroom .display {
    font-size:30px;
  }
  .showroom .section-intro {
    font-size:16px;
    margin-top:10px;
  }
  .venue-list {
    gap:16px;
  }
  .venue-card {
    grid-template-columns:88px minmax(0,1fr);
    gap:12px 14px;
    padding:18px;
    border-radius:16px;
    align-items:start;
  }
  .venue-image {
    grid-column:1;
    grid-row:1;
    height:88px;
    min-height:0;
  }
  .venue-copy {
    display:contents;
  }
  .venue-heading {
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .venue-meta {
    gap:5px 10px;
    margin-bottom:6px;
  }
  .venue-status {
    padding:2px 8px;
  }
  .venue-copy h3 {
    font-size:21px;
  }
  .venue-description, .venue-facts, .venue-copy address, .venue-actions {
    grid-column:1/-1;
    margin:0;
  }
  .venue-actions {
    gap:4px 24px;
  }
}

/* Motion layer: disable with ?motion=off or the footer control. */
html[data-motion="off"] {
  scroll-behavior:auto;
}

html[data-motion="off"] * {
  transition:none!important;
  animation:none!important;
}

html[data-motion="on"] .reveal {
  transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1);
}

html[data-motion="on"] .reveal-pending {
  opacity:0;
  transform:translateY(32px);
}

html[data-motion="on"] .tech-item:nth-child(2) {
  transition-delay:.10s;
}

html[data-motion="on"] .tech-item:nth-child(3) {
  transition-delay:.20s;
}

@keyframes hero-arrive {
  from {
    opacity:0;
    transform:translateY(20px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes product-arrive {
  from {
    opacity:0;
    transform:translateY(25px) scale(.96);
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(prefers-reduced-motion:reduce) {
  html[data-motion="on"] .reveal-pending {
    opacity:1;
    transform:none;
  }
}

/* Keep the products centered inside the wide crop of the original portrait. */
/* Original lifestyle photos form a deliberate four-panel composition. */
/* Optical TV audio reaches pavé through the separate Cear core transmitter. */

/* 試聴の導線：細い青の縁と淡い面で、ナビの中に静かに置く。 */
.nav-links a.nav-listen { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 17px; border: 1px solid #b8cbe5; border-radius: 999px; background: #eef4fc; color: #285b94; font-weight: 600; white-space: nowrap; transition: background .2s, border-color .2s; }
.nav-links a.nav-listen:hover { background: #e1edfc; border-color: #799dce; }
.nav-links a.nav-listen::after { display: none; }
@media (max-width: 700px) { .nav-links a.nav-listen { padding-inline: 13px; font-size: 13px; } }
@media (max-width: 360px) { .nav { gap: 10px; } .nav .brand { font-size: 22px; } .nav .button-small { padding-inline: 13px; } .nav-links a.nav-listen { padding-inline: 10px; } }

/* 製品を支える会社へ。写真も含めてひとつのリンクにする。 */
.company { padding-block: 0 64px; background: var(--paper); }
.company-link { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 6vw, 88px); padding-top: 48px; border-top: 1px solid var(--line); }
.company-copy { max-width: 460px; }
.company .eyebrow { margin-bottom: 16px; color: var(--accent-strong); }
.company .display { font-size: clamp(30px, 3vw, 42px); }
.company-body { margin-top: 24px; font-size: 16px; line-height: var(--leading); color: var(--muted); }
.company .text-link { margin-top: 24px; min-height: 44px; }
.company-photo { width: 100%; max-width: 380px; margin: 0 0 0 auto; overflow: hidden; border-radius: var(--radius-l); }
.company-photo img { display: block; width: 100%; height: auto; }
.company-link:hover .company-link-text { text-decoration: underline; text-underline-offset: .25em; }
.company-link:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 8px; border-radius: var(--radius-s, 12px); }
@media (max-width: 700px) {
  .company { padding-bottom: 48px; }
  .company-link { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; }
  .company-copy { max-width: none; }
  .company .eyebrow { margin-bottom: 12px; }
  .company-body { margin-top: 16px; }
  .company .text-link { margin-top: 16px; }
  .company-photo { max-width: 350px; margin-inline: auto; }
}