/* Js Custom Design — readable layout, revision 2.
   Loaded after the page styles. Sizes are CSS pixels, independent of display density. */
:root {
  --jsc-content: min(90%, 2560px);
  --jsc-type-body: clamp(20px, 1.15vw, 28px);
  --jsc-type-small: clamp(16px, .9vw, 21px);
  --jsc-type-label: clamp(14px, .8vw, 19px);
  --jsc-type-display: clamp(80px, 8vw, 176px);
  --jsc-type-section: clamp(40px, 3.8vw, 76px);
  --jsc-leading-body: 1.9;
}
body {font-size:var(--jsc-type-body);line-height:1.9}
.wrap, .jsc-catalog .wrap, .story-head, .story-layout, .future-copy,
.hero-copy, .phero-copy, .audio-page .phero-copy {
  width:var(--jsc-content)!important;max-width:none!important;
  margin-inline:auto!important;padding-inline:0!important;
}
/* Flexible children must be allowed to shrink before Japanese text wraps. */
.catalog-intro>*, .catalog-group-head>*, .st-row>*, .intro-cols>*,
.story-head>*, .story-layout>*, .card>*, .outline-layout>*, .outline-row>*,
.statement-head>*, .value-item>*, .contact-inner>*, .footer-grid>*, .fgrid>* {min-width:0}
.site-header {height:90px!important;padding-inline:32px!important;gap:28px!important}
.site-header .logo {font-size:clamp(22px,1.4vw,32px)!important;line-height:1.3!important}
.site-header .logo small {font-size:clamp(11px,.65vw,15px)!important;letter-spacing:.13em!important}
.site-header .gnav {gap:clamp(20px,1.8vw,48px)!important}
.site-header .gnav a {font-size:clamp(17px,1vw,24px)!important;letter-spacing:.045em!important;color:#e2e2e2}
.site-header .header-cta {font-size:clamp(17px,1vw,23px)!important;padding:15px 25px!important;white-space:nowrap}
.eyebrow, .label, .intro-label, .catalog-eyebrow, .catalog-brand, .hero-copy h1 small, .phero-copy h1 small, .event-calendar__eyebrow {font-size:var(--jsc-type-label)!important;line-height:1.65!important}
.hero-copy, .phero-copy {padding-block:170px 130px!important}
.hero-lead, .phero-catch {font-size:clamp(28px,1.8vw,46px)!important;line-height:1.65!important}
.phero-description {max-width:46em}
.phero-description, .phero-alert, .st-bd p, .svc-lead, .intro-copy p.body, .intro-body>p:not(.eyebrow), .story-head>p:last-child, .statement-copy, .value-text p, .future-copy p:last-child, .ch-bd p, .form-lead, .v-item blockquote, .wv-quote, .catalog-intro-copy, .catalog-description, .catalog-group-note, .catalog-footer p:not(.catalog-eyebrow), .security-brand p, .values-head>p:last-child, .rep-body>p:not(.eyebrow), .privacy-hero p:last-child, .policy-list p, .contact p:not(.eyebrow) {
  font-size:var(--jsc-type-body)!important;line-height:var(--jsc-leading-body)!important;
}
.st-bd p, .svc-lead, .form-lead, .statement-copy, .rep-body>p, .values-head>p:last-child {max-width:42em}
.catalog-small, .catalog-source, .catalog-prices dt, .catalog-price-note dd, .v-item .meta, .v-item .spec, .wv-spec, .wv-meta, .intro-note, .svc-bd .jp, .outline-row dt, .outline-row dd, .identity dt, .identity small, .rep-name small, .rep-link, .map-open, .event-calendar__empty, .event-calendar__item p, .event-calendar__contact, .fstep p, footer, .fgrid a, .footer-grid a {
  font-size:var(--jsc-type-small)!important;line-height:1.8!important;
}
.outline-row dd {overflow-wrap:anywhere}
.outline .brand {font-size:var(--jsc-type-label)}
.bc, .phero-breadcrumb, .st-no, .fstep .stp, .story-rail p, .card-no small, .hero-meta, .phero-meta, .hero-scroll, .phero-scroll {font-size:14px!important}
.btn-oval, .contact-btn {font-size:var(--jsc-type-body);line-height:1.6}
.catalog-nav a, .catalog-consult, .catalog-footer-cta, .security-brand .catalog-consult {
  font-size:clamp(18px,1vw,24px)!important;min-height:64px;line-height:1.6;
}
.catalog-nav {display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.catalog-nav a {padding:22px 14px;white-space:normal}
.catalog-nav a span {font-size:var(--jsc-type-label)}
.catalog-grid {gap:56px 32px}
.catalog-product h4 {font-size:clamp(26px,1.65vw,42px)}
.catalog-description {max-width:38em}
.catalog-prices dd {font-size:var(--jsc-type-body)}
.catalog-prices .catalog-price-main dd {font-size:clamp(32px,2vw,48px)}
.catalog-prices dt span {font-size:var(--jsc-type-label)}
.audio-page .catalog-intro {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,4vw,100px)}
.audio-page .catalog-intro h2 {font-size:clamp(30px,2.2vw,56px);line-height:1.6;text-wrap:initial;word-break:normal}
.catalog-group-head {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.catalog-group-head h3 {font-size:clamp(32px,2vw,48px)}
.catalog-tagline, .audio-page .catalog-tagline {font-size:clamp(22px,1.3vw,32px)!important;max-width:32em}
.catalog-footer {padding:clamp(36px,4vw,84px);gap:40px}
.catalog-footer>div {min-width:0}
.catalog-footer p:not(.catalog-eyebrow) {max-width:48em!important}
.catalog-footer h3, .audio-page .catalog-footer h3 {font-size:clamp(28px,2vw,44px);max-width:28em}
.catalog-footer-cta {border-radius:999px;white-space:normal;max-width:100%}
.st-row {grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:clamp(36px,5vw,120px)}
.st-bd h3 {font-size:clamp(26px,1.8vw,42px);line-height:1.65}
.flow-panel {grid-template-columns:minmax(220px,.7fr) minmax(0,2fr);gap:40px;padding:clamp(32px,4vw,76px)}
.flow-steps {grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.fstep .cir {width:64px;height:64px;font-size:22px}
.intro-cols {grid-template-columns:minmax(140px,.4fr) minmax(0,1fr);gap:32px}
/* Narrative panels use natural document flow at every screen size.
   This supersedes the old sticky cards and their separately scrolling text. */
.story .stage {position:relative!important;top:auto!important;height:auto!important;min-height:0!important;margin-bottom:64px!important;scroll-margin-top:130px}
.story .stage:last-child {margin-bottom:0!important}
.story .card {height:auto!important;min-height:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto!important;transform:none!important;filter:none!important;will-change:auto}
.story .card-photo {min-height:480px}
.story .card-photo img {position:absolute;inset:0}
.story .card-body {padding:clamp(32px,3.5vw,80px)!important;overflow:visible!important;justify-content:center!important}
.story .card-body>p:not(.card-no):not(.sign) {font-size:var(--jsc-type-body)!important;line-height:1.9!important}
.story .card h3 {font-size:clamp(28px,2vw,46px)!important;line-height:1.6!important}
.story .sign, .story .story-rail a {font-size:var(--jsc-type-small)!important;line-height:1.8!important}
.story .story-layout {grid-template-columns:180px minmax(0,1fr);gap:40px}
.story-head>p:last-child {max-width:48em}
.future-copy p:last-child {max-width:46em}
form {max-width:1100px}
form label, form input, form textarea, form select, form button {font-size:var(--jsc-type-body)!important}
form label b {font-size:16px}
.policy-list {max-width:1400px}
.profile-link__arrow svg {width:24px;height:24px;flex:none}
.mcta a, .mobile-cta a {font-size:17px!important;min-height:54px!important}
.event-calendar__date {font-size:18px}
.event-calendar__weekdays {font-size:16px}
.event-calendar__event-mark, .event-calendar__item-type {font-size:14px}
.event-calendar__item h4 {font-size:20px}
.event-calendar__day {min-height:110px}
.event-calendar__controls .event-calendar__today {font-size:16px}
@media (min-width:2000px) {
  .site-header {height:108px!important;padding-inline:44px!important}
  .catalog-photo img {padding:36px}
  .catalog-photo--work img {padding:0}
  .mcta, .mobile-cta {width:440px!important}
  .mcta a, .mobile-cta a {font-size:20px!important;min-height:60px!important}
}
@media (max-width:1200px) {
  .site-header {gap:20px!important;padding-inline:24px!important}
  .site-header .gnav {gap:16px!important}
  .site-header .gnav a {font-size:16px!important}
  .site-header .logo {font-size:20px!important}
  .site-header .header-cta {font-size:16px!important;padding:14px 20px!important}
  .intro-cols {grid-template-columns:1fr}
  .intro-portrait {max-width:240px;aspect-ratio:4/3}
  .flow-panel {grid-template-columns:1fr}
  .story .story-layout {grid-template-columns:140px minmax(0,1fr);gap:24px}
  .story .card {grid-template-columns:1fr!important}
  .story .card-photo, .story .card--reverse .card-photo {order:0;height:380px;min-height:0}
}
@media (max-width:1000px) {
  :root {--jsc-type-body:19px;--jsc-type-small:16px;--jsc-type-label:14px}
  .catalog-intro, .audio-page .catalog-intro {grid-template-columns:1fr;gap:28px}
  .catalog-intro-copy {max-width:46em}
  .catalog-grid {gap:40px 24px}
  .catalog-nav {grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-nav a:last-child {grid-column:1/-1}
  .catalog-footer {align-items:flex-start;flex-direction:column}
  .st-row {grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr);gap:28px}
  .story .story-layout {display:block}
  .story .story-rail {display:none}
}
@media (max-width:760px) {
  .st-row {grid-template-columns:1fr}
  .st-ph {max-height:380px}
  .catalog-group-head {grid-template-columns:1fr;gap:20px}
  .security-brand-grid {grid-template-columns:1fr;gap:40px}
  .flow-steps {grid-template-columns:1fr}
  .fstep {display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 18px;text-align:left;align-items:center;padding-block:16px;border-bottom:1px solid rgba(255,255,255,.12)}
  .fstep:last-child {border:0}
  .fstep .cir {grid-column:1;grid-row:1/3;margin:0}
  .fstep .stp {grid-column:2;margin:0;align-self:end}
  .fstep p {grid-column:2;align-self:start}
  .fstep+.fstep::before {display:none}
}
@media (max-width:640px) {
  :root {--jsc-content:calc(100% - 40px);--jsc-type-body:17px;--jsc-type-small:15px;--jsc-type-label:13px;--jsc-type-display:clamp(48px,14vw,72px);--jsc-type-section:clamp(32px,8.8vw,42px)}
  .site-header {height:64px!important;padding-inline:18px!important}
  .site-header .logo {font-size:18px!important}
  .hero-copy, .phero-copy, .audio-page .phero-copy {padding-block:130px 110px!important}
  .hero-lead, .phero-catch {font-size:24px!important}
  .hero-meta, .phero-meta {display:none!important}
  .phero-breadcrumb {font-size:13px!important}
  .catalog-nav a {font-size:15px!important;padding:18px 12px;min-height:60px}
  .catalog-consult, .catalog-footer-cta {font-size:16px!important;min-height:58px}
  .catalog-grid {gap:40px}
  .catalog-product h4 {font-size:26px}
  .catalog-prices .catalog-price-main dd {font-size:32px}
  .audio-page .catalog-intro h2 {font-size:27px}
  .catalog-group-head h3 {font-size:30px}
  .catalog-tagline, .audio-page .catalog-tagline {font-size:21px!important}
  .catalog-footer {padding:30px 22px;gap:28px}
  .catalog-footer h3, .audio-page .catalog-footer h3 {font-size:25px}
  .intro-portrait {width:100%;max-width:280px;margin-left:0;background-size:contain}
  .intro-left {padding-inline:20px}
  .intro-title {font-size:40px}
  .intro-copy .catch {font-size:26px}
  .story .card-photo, .story .card--reverse .card-photo {height:260px}
  .story .card-body {padding:28px 22px!important}
  .story .card h3 {font-size:25px!important}
  .story .stage {margin-bottom:32px!important;scroll-margin-top:90px}
  .flow-panel {padding:28px 22px}
  .mcta a, .mobile-cta a {font-size:15px!important}
  .outline-row {grid-template-columns:90px minmax(0,1fr);gap:14px}
  .contact-inner {gap:28px}
  .contact-btn {white-space:normal;gap:22px;padding:16px 24px;max-width:100%}
  .event-calendar__day {min-height:58px}
  .event-calendar__date {font-size:15px}
  .event-calendar__weekdays {font-size:13px}
  .event-calendar__toolbar {flex-wrap:wrap;gap:14px}
}

/* Requested header scale: 1.5 × the preceding published header. */
.site-header {height:132px!important;padding-inline:48px!important;gap:40px!important}
.site-header .logo {font-size:33px!important}
.site-header .logo small {font-size:16.5px!important;letter-spacing:.16em!important}
.site-header .gnav {gap:clamp(30px,3vw,66px)!important}
.site-header .gnav a {font-size:clamp(24px,1.275vw,28.5px)!important;letter-spacing:.06em!important}
.site-header .header-cta {font-size:24px!important;padding:22px 37px!important}
.hero-copy, .phero-copy, .audio-page .phero-copy {padding-top:210px!important}
.contact-page .phero, .privacy-hero {padding-top:210px!important}
.catalog-group, .jsc-catalog, #form {scroll-margin-top:170px}
@media(min-width:2000px) {
 .site-header {height:156px!important;padding-inline:69px!important}
 .site-header .logo {font-size:40.5px!important}
 .site-header .header-cta {font-size:27px!important}
 .hero-copy, .phero-copy, .audio-page .phero-copy {padding-top:240px!important}
 .catalog-group, .jsc-catalog, #form {scroll-margin-top:200px}
}
@media(max-width:1599px) {
 .site-header {height:112px!important;padding-inline:32px!important}
 .site-header .gnav, .site-header .header-cta {display:none!important}
 .site-header .hamburger {display:block!important;flex-basis:66px;width:66px;height:66px}
 .site-header .hamburger span {width:27px;height:1.5px}
 .site-header .hamburger span:first-child {transform:translate(-50%,-6px)}
 .site-header .hamburger span:last-child {transform:translate(-50%,6px)}
 .drawer a {font-size:24px!important;width:min(100%,420px);padding-block:15px!important}
}
@media(max-width:640px) {
 .site-header {height:84px!important;display:grid!important;grid-template-columns:minmax(0,1fr) 56px;align-items:center;padding-left:0!important;padding-right:18px!important;gap:0!important}
 .site-header .logo {font-size:clamp(20px,6.1vw,25px)!important;letter-spacing:.025em!important;justify-self:center}
 .site-header .logo small {display:none!important}
 .site-header .hamburger {flex-basis:56px;width:56px;height:56px;margin-left:0!important}
 .hero-copy, .phero-copy, .audio-page .phero-copy {padding-top:155px!important}
 .contact-page .phero, .privacy-hero {padding-top:155px!important}
 .drawer {padding-top:120px!important}
 .drawer a {font-size:22px!important;padding-block:13px!important}
 .catalog-group, .jsc-catalog, #form {scroll-margin-top:125px}
}
/* Keep long profile text and its link within the narrowest phone viewport. */
.rep-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.rep-body {min-width:0}
.rep-link {max-width:100%;white-space:normal;gap:20px}
@media(max-width:980px) {.rep-grid {grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px) {.story .stage {scroll-margin-top:125px}}
/* Keep the homepage title clear of the enlarged fixed header. */
.sp-logo {top:clamp(190px,20vh,240px)}
@media(max-width:640px) {.sp-logo {top:140px}}
/* Desktop introduction: dedicate the left panel to readable copy. */
@media(min-width:981px) {
 #intro .intro-portrait {display:none}
 #intro .intro-cols {grid-template-columns:minmax(0,1fr)}
 #intro .intro-copy {width:100%;max-width:none}
 #intro .intro-copy .body {max-width:none}
}

@media(max-width:370px) {.site-header {padding-left:0!important;padding-right:14px!important}}

/* Brand logo (logo/JSlogo.pdf → /assets/brand/jsc-logo.svg, 2026-11).
   Height follows the header's existing logo font-size at every breakpoint. */
.site-header .logo img {display:block;width:auto;height:1.7em}
@media(max-width:640px) {.site-header .logo img {height:1.3em}}

/* PC / tablet header at 70% of the r2 size (2026-11-02 request): bar height, padding,
   logo, menu text, contact button and menu button. Smartphones (≤640px) keep their own sizes. */
@media(min-width:641px) {
 .site-header {height:78.4px!important;padding-inline:22.4px!important;gap:28px!important}
 .site-header .logo {font-size:23.1px!important}
 .site-header .hamburger {flex-basis:46.2px;width:46.2px;height:46.2px}
 .site-header .hamburger span {width:18.9px;height:1px}
 .site-header .hamburger span:first-child {transform:translate(-50%,-4.2px)}
 .site-header .hamburger span:last-child {transform:translate(-50%,4.2px)}
}
@media(min-width:1600px) {
 .site-header {height:92.4px!important;padding-inline:33.6px!important}
 .site-header .gnav {gap:clamp(21px,2.1vw,46.2px)!important}
 .site-header .gnav a {font-size:clamp(16.8px,.8925vw,19.95px)!important}
 .site-header .header-cta {font-size:16.8px!important;padding:15.4px 25.9px!important}
}
@media(min-width:2000px) {
 .site-header {height:109.2px!important;padding-inline:48.3px!important}
 .site-header .logo {font-size:28.35px!important}
 .site-header .header-cta {font-size:18.9px!important}
}

/* Instagram (2026-11-11 client request).
   PC (1600px+, where the header shows its menu): an outlined button left of お問い合わせ, same size as that button,
   and the fixed bottom bar keeps only LINE (the mail-form button was removed).
   Below 1600px the header collapses to the menu button, so the bottom bar shows LINE + Instagram instead. */
.site-header .header-ig {display:none}
@media(min-width:1600px) {
 .site-header .header-ig {
  display:inline-flex;align-items:center;justify-content:center;margin-right:-14px;
  padding:14.4px 24.9px;border:1px solid rgba(255,255,255,.6);border-radius:99px;
  color:#fff;font-size:16.8px;font-weight:800;letter-spacing:.04em;white-space:nowrap;
  transition:background-color .3s,color .3s,border-color .3s;
 }
 .site-header .header-ig:hover, .site-header .header-ig:focus-visible {background:#fff;border-color:#fff;color:#111}
 .mcta .ig, .mobile-cta .ig {display:none!important}
 .mcta, .mobile-cta {width:220px!important}
}
@media(min-width:2000px) {
 .site-header .header-ig {font-size:18.9px}
 .mcta, .mobile-cta {width:260px!important}
}