/* =============================================================================
   ワンゴウデザイン（株） — site styles
   Built from the Figma file 「公司网站」 (1920px artboards).

   Scaling: 1rem = 100 design px. <html> font-size is 100vw / 19.2, so every
   measurement below is the Figma value divided by 100 and the whole page scales
   with the window. Positions that come straight from Figma are written in the
   markup as design px:  style="--x:414; --y:588; --w:831; --h:868".
   ============================================================================= */

/* Serif text. The design font (Adobe Song Std L) cannot be embedded on the web, so the closest
   open fonts are used: Noto Serif SC ExtraLight for CJK and Latin Modern Roman for Latin/figures.
   Both are subset to this site's own text — see assets/fonts/README.txt. */
@font-face {
  font-family: "Wango Serif";
  src: url("../assets/fonts/wango-serif.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wango Serif";                 /* Regular: lettering of the workflow chart */
  src: url("../assets/fonts/wango-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wango Serif";
  src: url("../assets/fonts/wango-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}

/* Sans text (taglines). The design shows it in Hiragino Kaku Gothic W3; each visitor's own
   Japanese gothic is used. The metric overrides give every one of them the same line box
   (ascent 0.88 / descent 0.12, as Hiragino has), so the text sits at the same height everywhere. */
@font-face {
  font-family: "Wango Sans";
  src: local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN W3"), local("Hiragino Kaku Gothic ProN"),
       local("YuGothic-Medium"), local("Yu Gothic Medium"), local("Meiryo"),
       local("NotoSansCJKjp-Regular"), local("Noto Sans CJK JP"), local("Noto Sans JP");
  font-weight: 400;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Wango Sans";
  src: local("HiraKakuProN-W6"), local("Hiragino Kaku Gothic ProN W6"),
       local("YuGothic-Bold"), local("Yu Gothic Bold"), local("Meiryo Bold"),
       local("NotoSansCJKjp-Bold"), local("Noto Sans CJK JP Bold"), local("Noto Sans JP Bold");
  font-weight: 700;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

/* Gothic text of the price tables and workflow labels (the design shows Microsoft YaHei).
   Simplified-Chinese fonts first: they carry the traditional characters too and keep the
   punctuation at the baseline, as in the design. */
@font-face {
  font-family: "Wango Hei";
  src: local("Microsoft YaHei"), local("MicrosoftYaHei"), local("PingFang SC"), local("PingFangSC-Regular"),
       local("Hiragino Sans GB"), local("NotoSansCJKsc-Regular"), local("Noto Sans CJK SC"), local("Noto Sans SC"),
       local("Source Han Sans SC"), local("PingFang TC"), local("Noto Sans CJK TC"), local("Noto Sans TC");
  font-weight: 400;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Wango Hei";
  src: local("Microsoft YaHei Bold"), local("MicrosoftYaHei-Bold"), local("PingFang SC Semibold"), local("PingFangSC-Semibold"),
       local("Hiragino Sans GB W6"), local("NotoSansCJKsc-Bold"), local("Noto Sans CJK SC Bold"), local("Noto Sans SC Bold"),
       local("Source Han Sans SC Bold"), local("PingFang TC Semibold"), local("Noto Sans CJK TC Bold"), local("Noto Sans TC Bold");
  font-weight: 700;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Wango Hei";
  src: local("NotoSansCJKsc-Black"), local("Noto Sans CJK SC Black"), local("Noto Sans SC Black"), local("Source Han Sans SC Heavy"),
       local("PingFang SC Semibold"), local("PingFangSC-Semibold"), local("Hiragino Sans GB W6"),
       local("Microsoft YaHei Bold"), local("MicrosoftYaHei-Bold");
  font-weight: 900;
  ascent-override: 88%;
  descent-override: 12%;
  line-gap-override: 0%;
}

:root {
  --red: #de5547;      /* text / shapes */
  --red-bg: #d95547;   /* page background */
  --soft: #f7f1f0;
  --serif: "Wango Serif", "Songti SC", "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --hei: "Wango Hei", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "PingFang TC", sans-serif;
  --u: 0.01rem;        /* one design px */
  --sans: "Wango Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: calc(100vw / 19.2);   /* refined by the inline script (excludes the scrollbar) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.theme-red   { --fg: #fff;       --bg: var(--red-bg); --rule: rgba(255, 255, 255, .5); }
.theme-white { --fg: var(--red); --bg: #fff;          --rule: rgba(222, 85, 71, .5); }

h1, h2, h3, p, ul, ol, address { margin: 0; padding: 0; font: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }

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

/* ---------- canvas & Figma-positioned boxes ---------- */

.canvas {
  position: relative;
  width: 19.2rem;
  height: calc(var(--page-h) * 0.01rem);
  margin: 0 auto;
  overflow: hidden;
}

.abs {
  --w: initial; --h: initial;            /* don't inherit a parent's size */
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

/* centred on a given x (Figma: left 50% ± n, translateX(-50%)) */
.cx {
  position: absolute;
  left: calc(var(--cx) * 0.01rem);
  top: calc(var(--y) * 0.01rem);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ---------- header ---------- */

.header { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 10; }

.logo { position: absolute; left: 0.9799rem; top: 0.6813rem; width: 2.85rem; height: 0.65rem; }
.logo img { width: 100%; height: 100%; }

.nav { position: absolute; left: 5.96rem; top: 0.74rem; width: 12.26rem; height: 0.6528rem; }

.nav__item {
  position: absolute;
  top: 0;
  left: calc(var(--x) * 0.01rem);
  width: calc(var(--w) * 0.01rem);
  height: 0.6528rem;
}
.nav__jp, .nav__cn { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.nav__jp { top: 0;    left: calc(var(--c) * 0.01rem);       font-size: 0.16rem; line-height: 0.32rem; }
.nav__cn { top: 0.25rem; left: calc((var(--c) - 2) * 0.01rem); font-size: 0.14rem; line-height: 0.28rem; }

/* underline with the small triangle: current page, and on hover */
.nav__item::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.5939rem;
  width: 1.3607rem;
  height: 0.0589rem;
  margin-left: -0.68035rem;
  background: url("../assets/svg/nav-active-white.svg") 0 0 / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity .25s ease;
}
.theme-white .nav__item::after { background-image: url("../assets/svg/nav-active-red.svg"); }
.nav__item:hover::after,
.nav__item:focus-visible::after,
.nav__item.is-active::after { opacity: 1; }

.nav__sep {
  position: absolute;
  top: 0.03rem;
  left: calc(var(--x) * 0.01rem);
  height: 0.4609rem;
  border-left: 0.00539rem solid currentColor;
}

.nav-toggle { display: none; }

a:focus-visible, button:focus-visible { outline: 0.02rem solid currentColor; outline-offset: 0.03rem; }

/* ---------- type ---------- */

.title { font-size: 0.5rem; line-height: 1rem; }
.title span { display: block; white-space: nowrap; }
.title--soft { color: var(--soft); }
.title--vertical span {
  width: 0.55rem;
  line-height: 0.5rem;
  text-align: center;
  white-space: normal;
  word-break: break-all;
  line-break: anywhere;
}

.tagline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.4rem;
  line-height: 0.6rem;
  white-space: pre;
}
.tagline.cx { text-align: center; }
.tagline .gap { display: inline-block; width: 0.71rem; }   /* the wide gap between the two phrases */
.tagline--light { color: #fefefe; }

.lead { font-size: 0.3rem; line-height: 0.6rem; }
.lead--white { color: #fff; }
.lead--small { font-size: 0.2rem; line-height: 0.4rem; }

/* one glyph per line (Figma: 30px text in a 55px-wide box) */
.vtext {
  width: 0.55rem;
  font-size: 0.3rem;
  line-height: 1;
  text-align: center;
  word-break: break-all;
  line-break: anywhere;
  overflow-wrap: anywhere;
}
.vtext--soft { color: var(--soft); }

/* ---------- 「さらに詳しく」 button ---------- */

.btn {
  width: 1rem;
  height: 0.216rem;
  border-radius: 0.108rem;
  font-size: 0.118rem;
  line-height: 0.15rem;
  z-index: 2;
  transition: transform .25s ease;
}
.btn--red   { background: var(--red); color: #fff; }
.btn--white { background: #fff; color: var(--red); }
.btn--left  { transform-origin: left center; }
.btn__label { position: absolute; left: 0.09rem; top: 0.04rem; white-space: nowrap; }
.btn__arrow { position: absolute; left: 0.8717rem; top: 0.0816rem; width: 0.0378rem; height: 0.061rem; }
.btn:focus-visible { transform: scale(1.5); }

/* ---------- images that enlarge on hover (Figma variants Frame 4 / 5 / 11) ---------- */

.zoom { transition: transform .35s ease; }

@media (hover: hover) and (min-width: 901px) {
  .btn:hover { transform: scale(1.5); }                         /* Figma hover variant: 150 × 32.4 */
  .zoom:hover { transform: scale(1.1932); z-index: 3; }         /* 352 → 420 */
  .zoom--wide:hover { transform: scale(1.1544); }               /* 1101 → 1271 */
}

/* ---------- 首页 ---------- */

.home-hero__title {
  font-size: 0.48rem;
  line-height: 0.96rem;
  letter-spacing: 1.55rem;
  word-spacing: -0.057rem;
  white-space: nowrap;
}
.home-hero__lead { margin-top: 0.212rem; padding-left: 0.02rem; font-size: 0.201rem; line-height: 0.385rem; }

.reveal { animation: reveal 1.4s ease .2s backwards; }               /* Figma component 「文字显现」 */
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }

.home-mascot img { width: 100%; height: 100%; }
.home-address { font-style: normal; font-size: 0.178rem; line-height: 0.229rem; }
.home-address span { display: block; margin-bottom: 0.005rem; white-space: pre; }
.home-address i { font-style: normal; }
.home-address .k { display: inline-block; width: 0.43rem; white-space: nowrap; }      /* labels share one width, so the values line up */
.home-address .k--tel { letter-spacing: .39em; }
.home-address .k--url { letter-spacing: .2em; }
.home-copyright { position: absolute; left: 0; top: 10.85rem; width: 100%; margin: 0; text-align: center; font-family: var(--sans); font-weight: 300; font-size: 0.135rem; line-height: 0.22rem; white-space: nowrap; }
.home-copyright small { font-size: inherit; }

/* ---------- VI设计 ---------- */

.vi-tags li {
  padding: 0.05rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.1rem;
  line-height: 0.1rem;
  white-space: nowrap;
}

/* ---------- 咨询服务二级: photo wall with four text columns ---------- */

.collage__band, .col__bg { background: #fff; }

.col__title {
  padding: 0.05rem 0.11rem 0 0.12rem;
  border-radius: 0.325rem;
  background: var(--red);
  color: #fbfbfb;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.25rem;
  line-height: var(--lh, .95);
  text-align: center;
  word-break: break-all;
  line-break: anywhere;
}
.col__dot { display: block; }
.col__body {
  width: 0.24rem;
  font-size: 0.2rem;
  line-height: .95;
  text-align: center;
  word-break: break-all;
  line-break: anywhere;
}

/* ---------- price tables (all lengths are px of the design image, via --u) ---------- */

.ptable {
  --hy: 110.5;     /* top of the heading row's text */
  --ry: 138.5;     /* bottom of the rule under the headings */
  --py: 25;        /* space above a plan name */
  --cy: 25.5;      /* space above the other cells */
  font-family: var(--hei);
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: calc(26 * var(--u));
  font-feature-settings: "locl" 0;   /* keep one punctuation style whichever CJK font is used */
}

.ptable__title {
  position: absolute;
  left: calc(var(--dx, 0) * var(--u));
  top: calc(-2 * var(--u));
  width: 100%;
  font-weight: 700;
  font-size: calc(27.5 * var(--u));
  line-height: calc(32 * var(--u));
  text-align: center;
  white-space: nowrap;
}

.ptable__grid { position: absolute; left: 0; top: 0; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.ptable__grid th, .ptable__grid td { padding: 0 0 0 calc(var(--pl, 0) * var(--u)); text-align: left; vertical-align: top; font-weight: 400; white-space: nowrap; }

.ptable__grid thead th {
  height: calc(var(--ry) * var(--u));
  padding-top: calc(var(--hy) * var(--u));
  border-bottom: calc(1.5 * var(--u)) solid currentColor;
  font-weight: 700;
  font-size: calc(19 * var(--u));
  line-height: calc(19 * var(--u));
}
.ptable__grid tbody tr { height: calc(214.33 * var(--u)); }
.ptable__grid tbody th, .ptable__grid tbody td { padding-top: calc(var(--cy) * var(--u)); }
.ptable__grid tbody tr + tr th, .ptable__grid tbody tr + tr td { border-top: 1px solid var(--rule); }
.ptable__grid .ptable__plan { padding-top: calc(var(--py) * var(--u)); font-weight: 700; font-size: calc(25 * var(--u)); line-height: calc(30 * var(--u)); }
.ptable__list li::before { content: "- "; }

.ptable__notes { position: absolute; left: 0; top: calc(var(--ny) * var(--u)); width: 100%; }
.ptable__notes h3 {
  height: calc(29.5 * var(--u));
  padding-left: calc(23 * var(--u));
  border-bottom: calc(1.5 * var(--u)) solid currentColor;
  font-weight: 700;
  font-size: calc(19 * var(--u));
  line-height: calc(19 * var(--u));
}
.ptable__notes ul { margin-top: calc(40 * var(--u)); padding-left: calc((4 + var(--dx, 0)) * var(--u)); }
.ptable__notes li { display: flex; align-items: baseline; height: calc(52 * var(--u)); line-height: 1; white-space: nowrap; }
.ptable__notes li::before { content: "•"; flex: none; width: calc(39 * var(--u)); font-weight: 700; font-size: calc(25 * var(--u)); }
.ptable__notes li b { margin-right: calc(15 * var(--u)); font-size: calc(25 * var(--u)); }
.ptable__foot { margin-top: calc(2.5 * var(--u)); padding-left: calc(14 * var(--u)); line-height: calc(26 * var(--u)); white-space: nowrap; }

/* ---------- workflow chart: drawing as an image, lettering as text ---------- */

.fx { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.flow__art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.flow__badge {
  width: calc(127 * var(--u));
  padding-top: calc(4 * var(--u));
  color: var(--bg);
  font-family: var(--hei);
  font-weight: 900;
  font-size: calc(20 * var(--u));
  line-height: calc(20 * var(--u));
  text-align: center;
  white-space: nowrap;
}
.flow__badge span {
  display: block;
  margin-top: calc(6 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(13.3 * var(--u));
  line-height: calc(16 * var(--u));
}
.flow__label { font-family: var(--hei); font-weight: 900; font-size: calc(23.6 * var(--u)); line-height: calc(24 * var(--u)); white-space: nowrap; }
.flow__v {
  margin-top: calc(-0.5 * var(--u));
  writing-mode: vertical-rl;
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: calc(19.5 * var(--u));
  white-space: nowrap;
}
/* columns spread to a common height, as in the design */
.flow__v--fit { height: calc(var(--h) * var(--u)); text-align: justify; text-align-last: justify; }
.flow__v--stretch { transform: scaleY(var(--sy)); transform-origin: left top; }   /* one column is drawn taller in the design */

/* ---------- motion ----------
   All of it is optional polish: the pages are complete without it, and it is switched off
   for visitors who ask their system for reduced motion (see the end of this file). */

/* (1) page change: when a link is followed, a curtain in the next page's background colour rises over the page
   (js/main.js); the new page opens on that same colour and its content fades in. */
.canvas { animation: page-in .5s cubic-bezier(.4, 0, .2, 1) backwards; }      /* "backwards": once it has run, nothing is left applied */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
.is-leaving .canvas { opacity: 0; transition: opacity .35s cubic-bezier(.4, 0, .2, 1); animation: none; }
.page-curtain { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; pointer-events: none; transform: translateY(100%); transition: transform .46s cubic-bezier(.7, 0, .3, 1); }
.page-curtain.is-on { transform: none; }

/* (2) top pages: title, images, tagline and button arrive one after another.
   `translate` (not `transform`) is animated, so hover scaling and centring keep working. */
@keyframes rise { from { opacity: 0; translate: 0 0.18rem; } to { opacity: 1; translate: none; } }
body:not(.page-detail) .page :is(.abs, .cx, .home-copyright):not(.reveal) {
  animation: rise .7s cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: calc(.15s + var(--i, 0) * .09s);       /* --i: order on the page, set by js/main.js */
}
body:not(.page-detail) .page .hero-bg.abs:not(.reveal) { animation: page-in 1s ease backwards; }      /* backgrounds only fade */
body.page-home .page :is(.abs, .home-copyright):not(.reveal) { animation-delay: calc(.75s + var(--i, 0) * .09s); }   /* after the headline */

/* (3) long pages: blocks below the first screen fade up as they are scrolled into view (class added by js/main.js) */
.sr { opacity: 0; translate: 0 0.26rem; }                           /* waiting below the screen: set at once, without a transition */
.sr.is-in { opacity: 1; translate: none; transition: opacity .7s ease var(--d, 0s), translate .7s cubic-bezier(.22, .61, .36, 1) var(--d, 0s); }
.sr--fade { translate: none; }                                   /* fades only: wrappers, and the large lettering whose position (4) drives */
.sr--fade.is-in { transition: opacity .9s ease; }

/* (4) the large decorative lettering drifts slightly against the scroll: js/main.js sets `translate` on .deco */

/* =============================================================================
   Phones and small tablets (<= 900px)
   The Figma file has desktop artboards only, so this is an adaptation: one column,
   same colours and type. Here 1rem = 100 units of a 750-wide canvas (50px on a 375px phone).
   ============================================================================= */

@media (max-width: 900px) {
  html { font-size: calc(100vw / 7.5); }

  .canvas {
    width: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    padding: 1.7rem .4rem 1rem;
    display: flex;
    flex-direction: column;
  }
  .page { flex: 1; display: flex; flex-direction: column; }
  body:not(.page-detail):not(.page-home) .page { justify-content: center; padding-bottom: .6rem; }

  .abs, .cx { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; }
  .pc { display: none; }

  /* header */
  .header { height: 1.4rem; }
  .logo { left: .4rem; top: .36rem; width: 3.2rem; height: .73rem; z-index: 25; }
  .nav-toggle {
    display: block;
    position: absolute;
    right: .22rem;
    top: .3rem;
    width: .86rem;
    height: .86rem;
    padding: .22rem .18rem;
    border: 0;
    background: none;
    color: inherit;
    z-index: 30;
    cursor: pointer;
  }
  .nav-toggle span { display: block; height: .03rem; margin: 0 0 .15rem; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(.18rem) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-.18rem) rotate(-45deg); }

  .nav {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .22rem;
    background: var(--bg);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  .nav-open { overflow: hidden; }
  .nav-open .nav { opacity: 1; visibility: visible; }
  .nav__item { position: relative; left: auto; width: auto; height: auto; padding: .08rem .5rem .24rem; text-align: center; }
  .nav__jp, .nav__cn { position: static; display: block; transform: none; }
  .nav__jp { font-size: .36rem; line-height: 1.5; }
  .nav__cn { font-size: .26rem; line-height: 1.4; }
  .nav__item::after { top: auto; bottom: 0; width: 2.4rem; height: .104rem; margin-left: -1.2rem; }
  .nav__sep { display: none; }

  /* type */
  .title { font-size: .52rem; line-height: 1.45; text-align: center; margin-bottom: .5rem; }
  .title span { white-space: normal; }
  .title--vertical span { width: auto; line-height: 1.45; }
  .tagline { font-size: .34rem; line-height: 1.7; white-space: normal; text-align: center; margin: .5rem 0 0; word-break: auto-phrase; }
  .tagline .gap { display: block; width: 0; height: 0; }
  .lead, .lead--small { font-size: .29rem; line-height: 1.95; margin: 0 0 .5rem; text-align: justify; }
  .vtext { width: auto; font-size: .29rem; line-height: 1.95; text-align: justify; word-break: normal; line-break: auto; margin: .5rem 0; }
  .vtext br { display: none; }
  .vgroup { margin: .5rem 0; font-size: .29rem; line-height: 1.95; text-align: justify; }
  .vgroup .vtext { display: inline; margin: 0; }
  .page-detail h1.sr-only {
    position: static; width: auto; height: auto; margin: 0 0 .5rem; clip-path: none; overflow: visible;
    white-space: normal; font-size: .46rem; line-height: 1.45; text-align: center;
  }
  .page-detail h1.sr-only span { display: block; font-size: .36rem; }

  /* images */
  img.abs { width: 100%; height: auto; margin: .3rem 0; }
  .deco { display: none; }

  /* button */
  .btn { display: block; width: 3rem; height: .76rem; margin: .6rem auto 0; border-radius: .38rem; font-size: .28rem; line-height: .76rem; text-align: center; }
  .btn__label { position: static; }
  .btn__arrow { left: auto; right: .3rem; top: 50%; width: .1rem; height: .16rem; margin-top: -.08rem; }
  .btn:focus-visible { transform: none; }

  /* 首页 */
  .home-hero { margin-top: .9rem; }
  .home-hero__title { font-size: .54rem; line-height: 1.6; letter-spacing: .14rem; text-align: center; margin-right: -.14rem; }
  .home-hero__lead { margin-top: .5rem; font-size: .28rem; line-height: 2.05; text-align: justify; }
  .home-contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .24rem; margin-top: 1rem; }
  .home-mascot { width: 2.46rem; height: 1.6rem; margin-right: .2rem; }
  .home-qr { width: 1.3rem !important; height: 1.6rem !important; margin: 0 !important; }
  .home-address { flex-basis: 100%; font-size: .25rem; line-height: 1.7; text-align: center; }
  .home-address span { white-space: normal; margin: 0; }
  .home-address .k { width: auto; letter-spacing: 0; }
  .home-address .k--tel { letter-spacing: .5em; margin-right: -.5em; }
  .home-copyright { position: static; margin-top: .9rem; font-size: .2rem; line-height: 1.6; }

  /* 标识设计 / 咨询服务: the soft photo band stays behind the text */
  .hero-bg { position: absolute !important; z-index: 0; margin: 0 !important; }
  .page-logo .hero-bg { left: -55%; top: 50%; width: 210% !important; transform: translateY(-50%); }
  .page-consulting .hero-bg { left: -.4rem; top: -1.7rem; width: calc(100% + .8rem) !important; height: calc(100% + 2.7rem) !important; object-fit: cover; }
  .page-consulting .tagline { text-align: left; }
  .page-consulting .tagline br { display: none; }

  /* 广告设计 */
  .ad-posters { display: flex; gap: .2rem; }
  .ad-posters img.abs { width: calc(50% - .1rem); margin: 0; }

  /* VI设计 / 展示设计 */
  .page-vi .title .cx { display: inline-block; margin: 0 .12rem; }
  .vi-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .2rem; }
  .vi-tags li { padding: .04rem 0; font-size: .2rem; line-height: 1.6; }
  .page-vi img.abs, .page-display img.abs { width: calc(100% + .8rem); margin: .2rem -.4rem; }

  /* price tables: one block per plan, with the column heading in front of each value */
  .ptable { margin-top: .7rem; font-size: .27rem; line-height: 1.75; }
  .ptable__title { position: static; width: auto; margin-bottom: .24rem; font-size: .36rem; line-height: 1.5; white-space: normal; }
  .ptable__grid, .ptable__grid tbody, .ptable__grid tr, .ptable__grid th, .ptable__grid td { display: block; }
  .ptable__grid { position: static; }
  .ptable__grid colgroup, .ptable__grid thead { display: none; }
  .ptable__grid tbody tr { height: auto; padding: .3rem 0 .34rem; border-top: 1px solid var(--rule); }
  .ptable__grid tbody tr:first-child { border-top: .03rem solid currentColor; }
  .ptable__grid tbody th, .ptable__grid tbody td { padding: 0; border: 0 !important; white-space: normal; }
  .ptable__grid .ptable__plan { padding: 0 0 .12rem; font-size: .34rem; line-height: 1.5; }
  .ptable__plan br { display: none; }
  .ptable__plan span { margin-left: .12rem; }
  .ptable__grid tbody td { position: relative; min-height: 1.75em; padding-left: 2.6rem; }
  .ptable__grid tbody td::before { content: attr(data-label); position: absolute; left: 0; top: 0; font-weight: 700; }
  .ptable__grid tbody td.ptable__desc { padding: 1.75em 0 .06rem; }      /* the description gets the full width, under its heading */
  .ptable__notes { position: static; margin-top: .4rem; }
  .ptable__notes h3 { height: auto; padding: 0 0 .1rem; border-bottom-width: .03rem; font-size: .3rem; line-height: 1.5; }
  .ptable__notes ul { margin-top: .2rem; padding-left: 0; }
  .ptable__notes li { display: block; position: relative; height: auto; margin-bottom: .12rem; padding-left: .32rem; line-height: 1.75; white-space: normal; }
  .ptable__notes li::before { position: absolute; left: 0; width: auto; font-size: inherit; }
  .ptable__notes li b { margin-right: .1rem; font-size: .29rem; }
  .ptable__foot { margin-top: .2rem; padding-left: 0; line-height: 1.75; white-space: normal; }

  /* workflow chart: a numbered list instead of the drawing */
  .flow { margin-top: .9rem; }
  .flow__art { display: none; }
  .fx { position: static; }
  .flow__badge { width: auto; margin-bottom: .3rem; padding: 0; color: inherit; font-size: .36rem; line-height: 1.5; }
  .flow__badge span { margin: 0; font-size: .26rem; line-height: 1.5; }
  .flow__steps { counter-reset: step; }
  .flow__step { counter-increment: step; position: relative; padding: .24rem 0 .26rem .8rem; border-top: 1px solid var(--rule); }
  .flow__step::before {
    content: counter(step);
    position: absolute; left: 0; top: .28rem;
    width: .5rem; height: .5rem;
    border: .03rem solid currentColor; border-radius: 50%;
    font-family: var(--hei); font-weight: 700; font-size: .26rem; line-height: .44rem; text-align: center;
  }
  .flow__label { font-size: .32rem; line-height: 1.6; white-space: normal; }
  .flow__v, .flow__v--fit, .flow__v--stretch {
    height: auto; margin: .04rem 0 0; transform: none; writing-mode: horizontal-tb;
    font-size: .27rem; line-height: 1.75; white-space: normal; text-align: left; text-align-last: auto;
  }
  .flow__v br { display: none; }

  /* 咨询服务二级 */
  .collage__img { width: calc(100% + .8rem) !important; margin: .3rem -.4rem .5rem !important; }
  .collage__band, .col__bg { display: none; }
  .col { margin: 0 0 .6rem; }
  .col__title { display: inline-block; padding: .06rem .36rem .06rem .28rem; border-radius: .4rem; font-size: .3rem; line-height: 1.7; word-break: normal; line-break: auto; }
  .col__dot { display: inline; margin-right: .08rem; }
  .col__body { width: auto; margin-top: .2rem; font-size: .29rem; line-height: 1.95; text-align: justify; word-break: normal; line-break: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .canvas, body:not(.page-detail) .page :is(.abs, .cx, .home-copyright, .hero-bg) { animation: none; }
  .btn, .zoom, .nav__item::after, .is-leaving .canvas, .page-curtain { transition: none; }
  .sr { opacity: 1; translate: none; transition: none; }
}
@media print {
  .canvas, .page * { animation: none !important; }
  .sr { opacity: 1; translate: none; }
}