/* =========================================================
   tone トップページ（PC 1920px 版・試作）
   座標は Figma 41:3（1920×8747）の値。コメントの y は各セクション上端からの距離。
   ========================================================= */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ja);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.page {
  position: relative;
  max-width: var(--page-width);
  margin-inline: auto;
  overflow-x: clip;
}
.inner { width: var(--inner-width); margin-left: 207px; position: relative; }
.sp-menu, .sp-only { display: none; }

/* 波形の飾り: 位置と大きさは各セクションのクラス。
   SVG 1 枚の幅は --wave-w（箱の幅とは別）。::before は箱より 1 枚分長く、--wave-w ごとに繰り返す。
   motion.css は --wave-w 1 枚分だけ流すので、箱がどの幅でも継ぎ目が合う。
   --wave-x は繰り返しの位相（Figma 上の左端の位置）。箱の左端を動かしても絵の位置を保つ */
.wave { display: block; overflow: hidden; pointer-events: none; }
.wave::before {
  content: ""; position: absolute; top: 0; left: 0; width: calc(100% + var(--wave-w)); height: 100%;
  background: var(--wave-x, 0) 0 / var(--wave-w) 100% repeat-x;
}
.wave--lg::before { background-image: url("../assets/img/wave-lg.svg"); }
.wave--md-dark::before { background-image: url("../assets/img/wave-md-dark.svg"); }
.wave--md-footer::before { background-image: url("../assets/img/wave-md-footer.svg"); }
/* CONTACT の o: 文字色（currentColor）に合わせて色が変わるよう、SVG を HTML に直接書いている */
.contact__o { display: block; flex: none; }

/* ナビ・ボタンの文字: ホバーで下から同じ文字が入れ替わる（動きは motion.css） */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll > span { display: block; }
.roll::after {
  content: attr(data-label); content: attr(data-label) / "";
  position: absolute; left: 0; top: 100%; white-space: nowrap;
}

/* =========================================================
   PC（1024px 以上）
   1920px のデザインをそのまま組み、画面幅に合わせて .page を
   等倍縮小する（--pc-zoom は js/main.js が設定。1920px 以上は 1）
   ========================================================= */
@media (min-width: 1024px) {
.page { zoom: var(--pc-zoom, 1); }

/* ---------- Shared parts ---------- */
.label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 130px; height: 42.5px;
  border: 2.31px solid var(--color-theme); border-radius: 64px;
  font: 600 20.6px/1 var(--font-en); letter-spacing: 0;
  color: var(--color-theme);
}
.label--beige { border-color: var(--color-beige); color: var(--color-beige); }

.sec-head { display: flex; align-items: center; gap: 40px; }
.sec-head__title {
  font: 700 var(--fs-h2)/var(--lh-h2) var(--font-ja);
  letter-spacing: var(--ls-ja); color: var(--color-theme);
}

.btn-more {
  display: inline-flex; align-items: center; gap: 6px;
  width: 149px; height: 37.7px; padding-left: 17.5px;
  background: var(--color-theme); border-radius: 56px;
  font: 600 17.3px/1 var(--font-en); color: var(--color-beige); letter-spacing: 0;
}
.btn-more img { width: 10.5px; height: 14.9px; transform: rotate(-90deg); }
.btn-more--lg {
  width: 209px; height: 52.9px; padding-left: 28.6px; gap: 14px;
  border-radius: 79px; font-size: 22.87px;
}
.btn-more--lg img { width: 14.75px; height: 20.9px; }

.pill-photo { position: absolute; overflow: hidden; display: block; }

.pill-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tab {
  position: absolute; width: 275px; height: 71px; border-radius: 10px;
  font: 600 14px/1 var(--font-en); letter-spacing: 0;
}

/* ---------- Header ---------- */
.header { position: absolute; inset: 0 0 auto 0; height: 200px; z-index: 10; }
.header__brand { position: absolute; left: 52px; top: 46px; display: flex; gap: 26px; }
.header__logo { width: 184.87px; height: 42.44px; }
.header__sub { width: 252.84px; height: 24.32px; margin-top: 22px; }

.gnav__list {
  position: absolute; left: 1030px; top: 66px;
  display: flex;
  font: 600 22px/27px var(--font-en); letter-spacing: 0; color: var(--color-theme);
}
.gnav__list > li:nth-child(1) { margin-right: 64px; }
.gnav__list > li:nth-child(2) { margin-right: 52px; }
.gnav__list > li:nth-child(3) { margin-right: 58px; }
.gnav__has-sub { position: relative; }
.gnav__plus { position: relative; display: inline-block; width: 9.75px; height: 9.75px; margin-left: 9px; vertical-align: 2px; }
.gnav__plus::before, .gnav__plus::after {
  content: ""; position: absolute; background: var(--color-theme);
}
.gnav__plus::before { left: 0; top: 4.25px; width: 9.75px; height: 1.25px; }
.gnav__plus::after { left: 4.25px; top: 0; width: 1.25px; height: 9.75px; }
.gnav__sub { position: absolute; left: 0; top: 65px; white-space: nowrap; }
.gnav__sub::before { content: ""; position: absolute; left: 1px; top: -22px; width: 10px; height: 1px; background: var(--color-theme); }
.gnav__sub li + li { margin-top: 10px; }
/* サブメニュー: SERVICE にマウスを乗せる／キーボードで入ると開き、＋ が − になる。
   マウスのない端末（タブレット横向きなど）では最初から開いておく */
.gnav__sub { visibility: hidden; opacity: 0; }
.gnav__has-sub::after { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 48px; } /* 下へ移る間に閉じないための通り道 */
.gnav__has-sub:hover .gnav__sub, .gnav__has-sub:focus-within .gnav__sub { visibility: visible; opacity: 1; }
.gnav__has-sub:hover .gnav__plus::after, .gnav__has-sub:focus-within .gnav__plus::after { rotate: 90deg; }
@media (hover: none) {
  .gnav__sub { visibility: visible; opacity: 1; }
  .gnav__has-sub .gnav__plus::after { rotate: 90deg; }
}

.btn-contact {
  position: absolute; left: 1628px; top: 54px;
  display: flex; align-items: center; gap: 10px;
  width: 235px; height: 53px; padding-left: 30px;
  background: var(--color-theme); border-radius: 60px;
  font: 600 24px/1 var(--font-en); letter-spacing: 0; color: var(--color-white);
}

/* ---------- MV（0〜1080） ---------- */
.mv { position: relative; height: 1080px; }
.mv__logo { position: absolute; left: 269px; top: 417.14px; width: 1350px; height: 255.34px; z-index: 1; }
.mv__logo > img, .mv__photo { position: absolute; display: block; }
.mv__heart { left: 0; top: 0.06px; width: 514.33px; height: 152.08px; }
.mv__and { left: 545.7px; top: 97.16px; width: 106.43px; height: 48.62px; }
.mv__m { left: 692.7px; top: 35.06px; width: 162.17px; height: 110.28px; }
.mv__photo { left: 872.13px; top: 35.32px; width: 271.73px; height: 118.93px; border-radius: 59.46px; overflow: hidden; }
.mv__photo img { position: absolute; left: -3.13%; top: -34.85%; width: 107.04%; height: 163.05%; }
.mv__o { left: 874.1px; top: 36.96px; width: 268.44px; height: 113.48px; }
.mv__r { left: 1163.3px; top: 35.06px; width: 63.43px; height: 110.28px; }
.mv__e { left: 1237.6px; top: 35.06px; width: 112.44px; height: 116.77px; }
.mv__tagline { left: 358.1px; top: 208.3px; width: 640.08px; height: 47.48px; }
.mv__wave { position: absolute; left: 0; top: 546px; width: 100%; height: 251.88px; --wave-w: 1515.25px; --wave-x: -80px; }

.mv__intro { position: absolute; left: 56px; top: 891px; }
.mv__intro-ja { line-height: 29.7px; }
.mv__intro-en {
  margin: 10.9px 0 0 -3px;
  font: 600 14px/26.4px var(--font-en); letter-spacing: 0.09em; color: var(--color-theme);
}
.mv__scroll {
  position: absolute; left: 1695px; top: 1009px;
  display: flex; align-items: center; gap: 4px;
  font: 600 14.15px/34.2px var(--font-en); letter-spacing: 0.09em; color: var(--color-theme);
}
.mv__scroll .paren { font-size: 18.15px; }
.mv__scroll .paren:first-child { margin-right: 6px; }
.mv__scroll img { margin-left: 2px; }

/* ---------- About（1080〜2067） ---------- */
.about { position: relative; height: 987px; background: var(--color-theme); color: var(--color-beige); }
.about__label { position: absolute; left: 219px; top: 174px; }
.about__venn { position: absolute; left: 146px; top: 206.1px; width: 706px; height: 711.44px; }
.about__venn-img {
  position: absolute; left: 88.84px; top: 99.0px; width: 528.32px; height: 513.45px;
  transform: rotate(60deg);
}
.venn-word {
  position: absolute; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font: 600 37px/45px var(--font-en); letter-spacing: 0; white-space: nowrap;
}
.venn-word small { font: 700 15.57px/30.87px var(--font-ja); letter-spacing: 0.18em; margin-top: -4px; }
.venn-word--discern { left: 396px; top: 177px; font-size: 37.67px; }
.venn-word--discern small { letter-spacing: 0.29em; margin-top: -6px; }
.venn-word--design { left: 270px; top: 381px; }
.venn-word--convey { left: 513px; top: 381px; }
.venn-icon--convey { position: absolute; left: 473px; top: 347px; }

.about__body { position: absolute; left: 910px; top: 257px; width: 803px; font-weight: 700; }
.about__lead { font: 700 23px/46px var(--font-ja); letter-spacing: var(--ls-ja); margin-bottom: 53px; }
.about__body p + p { margin-top: 31px; }
.boxed { display: inline-block; border: 1.5px solid var(--color-beige); line-height: 23px; padding: 0 3px 0 4px; margin: 0 9px 0 5px; }
.about__body p:first-of-type .boxed { margin-left: 0; }
.about__sign { position: absolute; left: 664px; top: 477px; }
.about__pic { left: 1148px; top: 871px; width: 644px; height: 241px; border-radius: 150px; z-index: 2; }
/* Figma の切り抜き値が壊れていたため、スクリーンショットに合わせて目視で調整 */
.about__pic > img { position: absolute; left: -10.2%; top: -68.5%; width: 110%; height: 196%; object-fit: fill; }

/* ---------- Service（2067〜4103） ---------- */
.service { position: relative; height: 2036px; }
.service__pic { left: 892px; top: 164px; width: 645.26px; height: 241px; border-radius: 139.58px; }
.service__wave { position: absolute; width: 1515.25px; height: 251.88px; --wave-w: 1515.25px; }
.service__wave--l { left: -1129px; top: 232.6px; }
.service__wave--r { left: 1221px; top: 1710.8px; }
.service .inner { padding-top: 359px; }
.service .sec-head .label { margin-left: -4px; }
.service__desc { margin: 22px 0 0 -2px; line-height: 31px; }

.svc {
  display: grid; grid-template-columns: 493px 1fr; column-gap: 96px;
  padding: 62px 0 90px 8px;
  border-top: 2px solid var(--color-theme);
}
.service__desc + .svc { margin-top: 47px; }
.svc + .svc { padding: 75px 0 73px 7px; border-bottom: 2px solid var(--color-theme); }
.svc__img { position: relative; display: block; width: 493px; height: 480px; border-radius: 8.89px; overflow: hidden; }
.svc__img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__img--web > img { position: absolute; left: -13.09%; top: 1.9%; width: 144.54%; height: 111.34%; }
.svc__body { position: relative; }
.svc__num { position: absolute; right: 47px; top: 12px; font: 600 18.87px/40.4px var(--font-en); letter-spacing: 0.09em; color: var(--color-theme); }
.svc__en { padding-top: 55px; font: 600 15px/18px var(--font-en); letter-spacing: 0; color: var(--color-theme); }
.svc__title { margin-top: 9px; font: 700 var(--fs-h2)/var(--lh-h2) var(--font-ja); letter-spacing: var(--ls-ja); color: var(--color-theme); }
.svc__text { margin-top: 14px; width: 671px; line-height: 30px; }
.svc__text--graphic { width: 698px; }
.tags { display: grid; grid-template-columns: repeat(3, 167px); gap: 17px 17px; margin-top: 34px; }
.tags li {
  height: 39px; border-radius: 60px; background: var(--color-beige-light);
  display: flex; align-items: center; justify-content: center;
  line-height: 30px; color: var(--color-theme);
}
.svc__more { position: absolute; right: 47px; top: 427px; }
/* グラフィック（2枚目）は Figma 上の余白が異なる */
.svc + .svc .svc__en { padding-top: 38px; }
.svc + .svc .svc__title { margin-top: 11px; }
.svc + .svc .svc__text { margin-top: 19px; }
.svc + .svc .tags { margin-top: 38px; }
.svc + .svc .svc__more { top: 383px; }
.svc + .svc .svc__num { top: 8px; }

/* ---------- Works（4103〜5440） ---------- */
.works { position: relative; height: 1337px; background: var(--color-black); color: var(--color-beige); }
.works__big {
  position: absolute; left: 1043px; top: 139px; width: 877px; height: 260px;
  font: 700 212.6px/normal var(--font-en); letter-spacing: 0; color: var(--color-beige);
}
.works__big > * { position: absolute; }
.works__o { left: 218.7px; top: 90.4px; width: 272.15px; height: 116.43px; }
.works__r { left: 509.7px; top: 90.4px; width: 67.01px; height: 116.51px; }
.works__k { left: 586.8px; top: 0; font-weight: 600; }
.works__s { left: 728px; top: 0; }
.works__head { position: absolute; left: 220px; top: 232px; }
.works__label { font: 600 15.76px/40.4px var(--font-en); letter-spacing: 0; white-space: pre; }
.works__sub { margin: -3px 0 0 2px; font: 500 16px/31px var(--font-en); letter-spacing: 0.09em; }
.works__list { position: absolute; left: 214px; top: 314px; display: flex; gap: 42px; }
.work { width: 576px; }
.work img { width: 576px; height: 576px; border-radius: 14px; object-fit: cover; display: block; }
.work__client, .work__title, .work__tags { margin-left: 11px; line-height: normal; }
.work__client { margin-top: 27px; font-size: 12px; color: var(--color-beige-light); }
.work__title { margin-top: 2px; font: 700 20px/29px var(--font-ja); letter-spacing: var(--ls-ja); color: var(--color-beige-light); }
.work__tags { margin-top: 10px; color: var(--color-theme); }
.works__wave { position: absolute; left: 0; top: 1019.2px; width: 100%; height: 175px; --wave-w: 1052.75px; --wave-x: -122px; }
.works__more { position: absolute; left: 221px; top: 1054px; }

/* ---------- Strengths（5440〜6475） ---------- */
.strengths { position: relative; height: 1035.4px; }
.strengths__pic { width: 231.27px; height: 616.71px; border-radius: 127.07px; z-index: 2; }
.strengths__pic > img { position: absolute; object-fit: fill; }
.strengths__pic--1 { left: 54px; top: 171px; }
.strengths__pic--1 > img { left: -13.51%; top: 0; width: 177.78%; height: 100%; }
.strengths__pic--2 { left: 311.22px; top: -115px; }
.strengths__pic--2 > img { left: -83.18%; top: -40.03%; width: 284.84%; height: 160.22%; }
.strengths__body { position: absolute; left: 695px; top: 296px; width: 940px; }
.strengths__lead { text-align: right; margin-right: -6px; line-height: 31px; }
.points { margin-top: 5px; }
.point {
  position: relative; display: flex; flex-direction: column;
  height: 125px; padding: 25px 0 0 29px; color: var(--color-theme);
}
.point:nth-child(3) { height: 129px; }
.point::after {
  content: ""; position: absolute; right: 35.5px; top: 52px; width: 21.5px; height: 21.5px;
  background: url("../assets/img/icon-plus.svg") center / contain no-repeat;
}
.point--alt { background: var(--color-beige-light); }
.point--line { border-bottom: 2px solid var(--color-theme); }
.point__num { font: 600 13.95px/29.84px var(--font-en); letter-spacing: 0.09em; }
.point__title { margin-top: 3px; font: 700 var(--fs-lead)/var(--lh-lead) var(--font-ja); letter-spacing: var(--ls-ja); }

/* ---------- Marquee（6475〜6578） ---------- */
.marquee { position: relative; height: 103.2px; z-index: 1; overflow: hidden; }
.marquee__track { position: absolute; top: 0; left: 0; display: flex; height: 100%; }
.mq-unit { position: relative; flex: none; width: 1033.6px; height: 103.2px; }
.mq-unit > img { position: absolute; display: block; }
.mq-heart { left: 0; top: 0; width: 348.4px; height: 103.02px; }
.mq-and { left: 369.6px; top: 66.5px; width: 72.1px; height: 32.94px; }
.mq-m { left: 469.2px; top: 24.5px; width: 109.86px; height: 74.7px; }
.mq-o { left: 590.4px; top: 24.4px; width: 184.36px; height: 78.87px; }
.mq-r { left: 794.9px; top: 24.5px; width: 42.97px; height: 74.7px; }
.mq-e { left: 845.2px; top: 24.5px; width: 76.17px; height: 79.1px; }
.mq-icon { left: 955.8px; top: 40px; width: 38.1px; height: 46.21px; }
.mq-icon--2 { left: 957.4px; top: 35.1px; width: 47.02px; height: 47.83px; }

/* ---------- News（6578〜7697） ---------- */
.news { position: relative; height: 1118.4px; }
.news::before {
  content: ""; position: absolute; left: -114px; top: -41.4px; width: 2336px; height: 1206px;
  background: url("../assets/img/news-grid.svg") 0 0 / 100% 100% no-repeat; opacity: 0.5;
}
.news__inner { position: relative; padding: 237.4px 0 0 238px; }
.news .label { width: 149px; height: 43px; }
.news .sec-head { gap: 27px; }
.news__list { display: flex; gap: 92px; margin: 41px 0 0 38px; }
.news-card { position: relative; width: 400px; }
.news-card__date {
  position: absolute; left: -45px; top: 3px; width: 32px;
  writing-mode: vertical-rl;
  font: 600 14.49px/31px var(--font-en); letter-spacing: 0.09em; color: var(--color-theme);
}
.news-card__thumb {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  height: 400px; padding-top: 152px; border-radius: 10px;
  font: 600 20.6px/25px var(--font-en); letter-spacing: 0;
}
.news-card__thumb--green { background: var(--color-theme); color: var(--color-beige); }
.news-card__thumb--beige { background: var(--color-beige); color: var(--color-theme); }
.news-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: 17px; width: 392px;
  font-size: var(--fs-lead); line-height: var(--lh-lead);
}
.news__more { margin: 78px 0 0 657px; }

/* ---------- Contact（7697〜8203） ---------- */
.contact { position: relative; height: 506px; background: var(--color-black); color: var(--color-beige); }
.contact__tab { left: 181px; top: -36px; padding: 14px 0 0 39px; background: var(--color-black); color: var(--color-beige); }
.contact__title {
  position: absolute; left: 192px; top: 198.8px; width: 421.12px; height: 110.17px;
  border: 6px solid var(--color-beige); border-radius: 166.55px;
}
.contact__title > span[aria-hidden] {
  position: absolute; left: 44.7px; top: 18.3px; display: flex; align-items: flex-start;
  font: 600 53.43px/65px var(--font-en); letter-spacing: 0;
}
.contact__o { width: 85.57px; height: 39.88px; margin: 12.8px 1.6px 0 4.5px; }
.contact__text {
  position: absolute; left: 679px; top: 219px; width: 812px;
  font: 700 var(--fs-lead)/23.9px var(--font-ja); letter-spacing: var(--ls-ja);
}
.contact__text img { vertical-align: -8px; margin-left: 12px; }
.contact__go {
  position: absolute; left: 1522px; top: 239.2px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 600 17.3px/1.2 var(--font-en); letter-spacing: 0;
}
.contact__go img { width: 35.29px; height: 50px; transform: rotate(-90deg); margin: -7.5px 0; }
.contact__top {
  left: 1557px; top: 461px; z-index: 1;
  display: flex; align-items: flex-start; gap: 11px; padding: 22px 0 0 105px;
  background: var(--color-beige); color: var(--color-black);
}
.contact__top img { transform: rotate(180deg); margin-top: 1px; }

/* ---------- Footer（8203〜8747） ---------- */
.footer { position: relative; height: 544px; background: var(--color-beige); overflow: hidden; }
.footer__tagline { position: absolute; left: 766px; top: 236px; }
.footer__wave { position: absolute; width: 1052.75px; height: 175px; --wave-w: 1052.75px; }
.footer__wave--l { left: -763px; top: 440.8px; }
.footer__wave--r { left: 284.9px; top: 388.3px; }
.footer__brand { position: absolute; left: 1410px; top: 430px; display: flex; gap: 26px; }
.footer__brand > div { margin-top: 22px; }
.footer__brand img { display: block; }
.footer__copy {
  display: block; margin-top: 12px; text-align: right;
  font: 600 12px/15px var(--font-en); letter-spacing: 0; color: var(--color-theme);
}

/* SP 専用の要素は PC では必ず隠す（.pill-photo などの display 指定に負けないように） */
.page .sp-only { display: none !important; }

} /* end PC */

/* =========================================================
   1920px を超える画面（zoom は 1 のままなので vw をそのまま使える）
   本文は 1920 の列に置いたまま、背景と帯だけを画面の端まで広げる。
   箱は margin で 100vw に広げ、広がった分を透明な border で受ける。
   border の内側（padding box）は 1920 の列のままなので、abs の left や本文の位置は変わらない。
   背景は border の下まで塗られるので、色面が画面の端まで届く。
   ========================================================= */
@media (min-width: 1921px) {
  html { overflow-x: clip; } /* 広がった帯のはみ出しは画面の外で切る（.page では切らない） */
  .page { overflow-x: visible; }

  .mv, .about, .service, .works, .strengths, .news, .contact, .footer {
    margin-inline: calc(50% - 50vw);
    border-inline: calc(50vw - 960px) solid transparent;
  }
  /* ロゴ帯は border を付けない。track は箱の左端から始まるので、列の外まで埋まる */
  .marquee { margin-inline: calc(50% - 50vw); }
  /* 波の両端を画面の外まで見せ、上下だけ切る（overflow: hidden だと列の端で切れてしまう） */
  .footer { overflow-x: visible; overflow-y: clip; }

  .mv__wave, .works__wave { left: calc(50% - 50vw); width: 100vw; }
  /* 右の波は元の位置（列の 285px）から画面の右端まで伸ばす。絵の大きさは --wave-w のまま */
  .footer__wave--r { width: calc(50vw + 675px); }
  .mv__wave { --wave-x: calc(50vw - 1040px); }   /* 列の左から -80px の位相を保つ */
  .works__wave { --wave-x: calc(50vw - 1082px); } /* 同 -122px */

  /* 格子は元の大きさのまま横に繰り返す（2336px で継ぎ目が合う）。拡大すると線が太る */
  .news::before {
    left: calc(50% - 50vw); width: 100vw;
    background: url("../assets/img/news-grid.svg") calc(50vw - 1074px) 0 / 2336px 1206px repeat-x;
  }
}