/* =========================================================
   SP（1023px 以下）
   Figma 166:331（390×8927）を基準に組む。
   390px より広い画面では 390px の列を中央に置き、背景は全幅に広げる。
   --c = 中央の 390px 列の左端（390px 未満の画面では 0）
   コメントの y は各セクション上端からの距離。
   ========================================================= */
@media (max-width: 1023px) {
.page { --c: max(0px, 50% - 195px); }
.sp-only { display: revert; }
.pc-only { display: none; }
/* PC 専用の要素（後続の display 指定に負けないよう .page を付けて優先度を上げる） */
.page .mv__scroll, .page .mv__o, .page .about__venn-img, .page .about__sign, .page .about__pic,
.page .service__pic, .page .service__wave--l, .page .footer__wave--r { display: none; }

/* ---------- 共通部品 ---------- */
.label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 79.8px; height: 26.1px;
  border: 1.42px solid var(--color-theme); border-radius: 39.4px;
  font: 600 13px/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; flex-direction: column; align-items: flex-start; gap: 4px; }
.sec-head__title { font: 700 17px/46px var(--font-ja); letter-spacing: var(--ls-ja); color: var(--color-theme); }
.btn-more {
  display: inline-flex; align-items: center; gap: 4px;
  width: 110.5px; height: 27.9px; padding-left: 13px;
  background: var(--color-theme); border-radius: 41.7px;
  font: 600 13px/1 var(--font-en); letter-spacing: 0; color: var(--color-beige);
}
.btn-more img { width: 7.8px; height: 11px; transform: rotate(-90deg); }
.pill-photo { position: absolute; overflow: hidden; display: block; z-index: 2; }
.pill-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tab { position: absolute; width: 178px; height: 52px; border-radius: 7.4px; font: 600 10px/1 var(--font-en); letter-spacing: 0; }

/* ---------- Header / メニュー ---------- */
.header { position: absolute; inset: 0 0 auto 0; height: 70px; z-index: 20; }
.header__brand { position: absolute; left: calc(var(--c) + 17px); top: 17px; display: flex; flex-direction: column; gap: 6px; }
.header__logo { width: 93.07px; height: 21.37px; }
.header__sub { width: 93px; height: 8.95px; }
.sp-menu {
  display: block; position: absolute; right: calc(var(--c) + 17px); top: 12px; z-index: 2;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 12px/34px var(--font-en); letter-spacing: 0.05em; color: var(--color-theme);
}
/* ドロワーのデザイン（328:2530）は未取得のため、仮のシンプルな全画面メニュー */
.gnav {
  display: flex; visibility: hidden; position: fixed; inset: 0; z-index: 1;
  flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  background: var(--color-theme);
}
.header.is-open .gnav { visibility: visible; }
.header.is-open .sp-menu { position: fixed; color: var(--color-beige); }
/* ( menu ) と ( close ) を縦に並べ、開いたら 1 行分上げて切り替える */
.sp-menu__roll { display: block; height: 34px; overflow: hidden; }
.sp-menu__roll > span { display: block; }
.header.is-open .sp-menu__roll > span { translate: 0 -100%; }
.gnav__list { display: flex; flex-direction: column; align-items: center; gap: 24px; font: 600 22px/1.3 var(--font-en); letter-spacing: 0.05em; color: var(--color-beige); text-align: center; }
.gnav__plus { display: none; }
.gnav__sub { margin-top: 12px; font-size: 15px; display: flex; flex-direction: column; gap: 10px; }
.btn-contact {
  display: flex; align-items: center; gap: 10px; padding: 12px 28px;
  border: 1.5px solid var(--color-beige); border-radius: 60px;
  font: 600 18px/1 var(--font-en); color: var(--color-beige);
}

/* ---------- MV（0〜845） ---------- */
.mv { position: relative; height: 845px; overflow: hidden; }
.mv__logo { position: absolute; left: calc(var(--c) + 45.9px); top: 225.9px; width: 307.6px; height: 226.7px; z-index: 1; }
.mv__logo > img, .mv__photo { position: absolute; display: block; }
.mv__heart { left: 27.1px; top: 0; width: 240.26px; height: 71.04px; }
.mv__and { left: 127.1px; top: 83.9px; width: 49.72px; height: 22.71px; }
.mv__m { left: 0; top: 125.8px; width: 75.76px; height: 51.51px; }
.mv__photo { left: 83.1px; top: 125.1px; width: 129px; height: 56.46px; border-radius: 28.23px; overflow: hidden; }
.mv__photo img { position: absolute; left: -3.13%; top: -34.85%; width: 107.04%; height: 163.05%; }
.mv__r { left: 219.9px; top: 125.8px; width: 29.63px; height: 51.51px; }
.mv__e { left: 254.6px; top: 125.8px; width: 52.52px; height: 54.54px; }
.mv__tagline { left: 7.1px; top: 206.2px; width: 283px; height: 20.99px; }
/* --wave-x は --c と同じ列の位置を vw で書く（background-position の % は別の意味になるため） */
.mv__wave { position: absolute; left: 0; top: 391px; width: 100%; height: 130px; --wave-w: 782px; --wave-x: calc(max(0px, 50vw - 195px) - 270px); }
.mv__intro { position: absolute; left: calc(var(--c) + 26px); top: 623px; width: 340px; }
.mv__intro-ja { font-size: 11px; line-height: 21.7px; color: #000; }
.mv__intro-en { margin: 5.2px 0 0 -2px; width: 356px; max-width: calc(100vw - 30px); font: 600 10px/16.4px var(--font-en); letter-spacing: 0.09em; color: var(--color-theme); }
.mv__contact {
  position: absolute; left: calc(var(--c) + 257.5px); top: 777px;
  display: flex; align-items: center; gap: 6px;
  width: 149.6px; height: 35.5px; padding-left: 16.4px;
  background: var(--color-white); border: 1.27px solid var(--color-theme); border-radius: 76px;
  font: 600 15.2px/1 var(--font-en); letter-spacing: 0; color: var(--color-theme);
}

/* ---------- About（845〜2003） ---------- */
.about { position: relative; height: 1158px; background: var(--color-theme); color: var(--color-beige); }
.about__label { position: absolute; left: calc(var(--c) + 35px); top: 76px; }
.about__venn { position: absolute; left: calc(var(--c) + 3.1px); top: 93.2px; width: 362.2px; height: 365.1px; }
.about__venn-img-sp { position: absolute; left: 45.6px; top: 50.8px; width: 271.05px; height: 263.42px; transform: rotate(60deg); }
.venn-word {
  position: absolute; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font: 600 19px/23px var(--font-en); letter-spacing: 0; white-space: nowrap;
}
.venn-word small { font: 700 8px/15.84px var(--font-ja); letter-spacing: 0.18em; margin-top: -3px; }
.venn-word--discern { left: 203.4px; top: 90.6px; font-size: 19.33px; }
.venn-word--discern small { letter-spacing: 0.29em; }
.venn-word--design { left: 138.8px; top: 195.2px; }
.venn-word--convey { left: 263.5px; top: 195.2px; }
.venn-icon--convey { position: absolute; left: 242.7px; top: 177.8px; width: 28.73px; height: 20.52px; }
.venn-icon--cloud { position: absolute; left: 188.8px; top: 75.2px; width: 22.06px; height: 13.85px; }
.venn-icon--star { position: absolute; left: 129.3px; top: 177.8px; width: 13.85px; height: 16.42px; }
.about__body { position: absolute; left: calc(var(--c) + 35px); top: 446px; width: 319px; font-weight: 700; font-size: 12px; line-height: 25px; }
.about__lead { font: 700 14px/27px var(--font-ja); letter-spacing: var(--ls-ja); margin-bottom: 27px; }
.about__body p + p { margin-top: 25px; }
.boxed { display: inline-block; border: 1px solid var(--color-beige); line-height: 18px; padding: 0 3px; margin: 0 6px 0 0; }
.about__body p:last-of-type .boxed { margin-left: 4px; }
.about__pic-sp { width: 249px; height: 93px; border-radius: 53.86px; }
.about__pic-sp--1 { left: calc(var(--c) + 171px); top: 1106px; }
.about__pic-sp--2 { left: calc(var(--c) + 49px); top: 1210px; }

/* ---------- Service（2003〜4330） ---------- */
.service { position: relative; padding: 295px 0 137px; }
.service .inner { width: 318px; margin: 0 0 0 calc(var(--c) + 36px); }
.service .sec-head .label { margin-left: -4px; }
.service .sec-head__title { margin-left: -2px; }
.service__desc { margin-top: 3px; font-size: 12px; line-height: 23px; color: #000; }
.service__wave--r { position: absolute; left: calc(var(--c) + 142px); top: 2166px; width: 660px; height: 109.7px; --wave-w: 660px; }

.svc { display: flex; flex-direction: column; padding: 32px 0 64px; border-top: 2px solid var(--color-theme); }
.service__desc + .svc { margin-top: 61px; }
.svc + .svc { padding: 32px 0 0; }
.svc__img { position: relative; display: block; width: 316px; height: 306px; margin-left: -2px; border-radius: 8.2px; overflow: hidden; }
.svc__img img { position: absolute; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__img--web img { left: -19.74%; top: -1.39%; width: 153.07%; height: 117.92%; }
.svc + .svc .svc__img { width: 314.3px; margin-left: 2px; border-radius: 5.67px; }
.svc + .svc .svc__img img { left: -21.26%; top: -0.09%; width: 145.71%; height: 99.88%; }
.svc__body { display: flex; flex-direction: column; padding-left: 1px; }
.svc__num { order: -1; align-self: flex-end; margin: 7px -4px 0 0; font: 600 11px/23.4px var(--font-en); letter-spacing: 0.09em; color: var(--color-theme); }
.svc__en { margin-top: 17px; font: 600 12px/15px var(--font-en); letter-spacing: 0; color: var(--color-theme); }
.svc__title { margin-top: -11px; font: 700 19px/46px var(--font-ja); letter-spacing: var(--ls-ja); color: var(--color-theme); }
.svc__text { margin-top: 12px; width: 297px; font-size: 12px; line-height: 23px; color: #000; }
.svc__text br { display: none; }
.svc__text--graphic { width: 303px; }
.tags { display: grid; grid-template-columns: repeat(2, 151px); gap: 12px 9px; margin: 27px 0 0 -3px; }
.tags li {
  height: 32px; border-radius: 48.8px; background: var(--color-beige-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 24.4px; color: var(--color-theme);
}
.svc__etc { margin-top: 9px; font-size: 11px; line-height: 28px; color: var(--color-theme); }
.svc__more { align-self: flex-end; margin: 29px 9px 0 0; }
.svc + .svc .svc__more { margin-top: 14px; }

/* ---------- Works（4330〜5248） ---------- */
.works { position: relative; height: 918px; background: var(--color-black); color: var(--color-beige); overflow: hidden; }
.works__head { position: absolute; left: calc(var(--c) + 35px); top: 110.4px; z-index: 1; }
.works__label { font: 600 12px/26.3px var(--font-en); letter-spacing: 0; white-space: pre; }
.works__sub { margin: -1.6px 0 0 1.3px; font: 500 11px/20.2px var(--font-en); letter-spacing: 0.09em; }
.works__big {
  position: absolute; left: calc(var(--c) + 75px); top: 145px; width: 320px; height: 95px;
  font: 700 77.88px/normal var(--font-en); letter-spacing: 0;
}
.works__big > * { position: absolute; }
.works__o { left: 80.2px; top: 32.8px; width: 99.7px; height: 42.65px; }
.works__r { left: 186.7px; top: 33.1px; width: 24.55px; height: 42.68px; }
.works__k { left: 215px; top: 0; font-weight: 600; }
.works__s { left: 266px; top: 0; }
/* 実績は横スクロール（SP デザインは 1 枚表示） */
.works__list {
  position: absolute; left: 0; right: 0; top: 216px; z-index: 1;
  display: flex; gap: 16px; padding: 0 35px 0 calc(var(--c) + 35px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.work { flex: 0 0 286px; scroll-snap-align: start; }
.work img { width: 286px; height: 286px; border-radius: 6.95px; object-fit: cover; display: block; }
.work__client, .work__title, .work__tags { margin-left: 2.5px; line-height: normal; }
.work__client { margin-top: 12.4px; font-size: 11px; color: var(--color-beige-light); }
.work__title { margin-top: 2px; font: 700 14px/20px var(--font-ja); letter-spacing: var(--ls-ja); color: var(--color-beige-light); }
.work__tags { margin-top: 3px; font-size: 11px; color: var(--color-theme); }
.works__wave { position: absolute; left: 0; top: 600.4px; width: 100%; height: 105.9px; --wave-w: 637px; --wave-x: calc(max(0px, 50vw - 195px) - 246px); }
.works__more { position: absolute; left: calc(var(--c) + 36px); top: 617px; }

/* ---------- Strengths（5248〜6352） ---------- */
.strengths { position: relative; height: 1104.5px; }
.strengths__pic { width: 112.98px; height: 301.28px; border-radius: 62.08px; }
.strengths__pic--1 { left: calc(var(--c) - 3px); top: -45.3px; }
.strengths__pic--2 { left: calc(var(--c) + 122.66px); top: -185px; }
.strengths__pic--2 img { position: absolute; left: -132.9%; top: -1.91%; width: 433.5%; height: 108.12%; object-fit: fill; }
.strengths__body { position: absolute; left: calc(var(--c) + 41px); top: 271px; width: 318px; }
.strengths__head { display: flex; align-items: flex-end; margin-right: 16px; }
.strengths__head .label { width: 99px; height: 26px; }
.strengths__lead { margin: 0 -5px 0 0; text-align: right; font-size: 12px; line-height: 23px; color: var(--color-black); }
.points { margin-top: 14px; }
.point { position: relative; display: flex; flex-direction: column; min-height: 148px; padding: 27px 40px 0 13px; color: var(--color-theme); }
.point:nth-child(3) { min-height: 157px; padding-top: 39px; }
.point::after {
  content: ""; position: absolute; right: 17.3px; top: 71px; width: 15.71px; height: 15.71px;
  background: url("../assets/img/icon-plus.svg") center / contain no-repeat;
}
.point--alt { background: var(--color-beige-light); border-top: 2px solid var(--color-theme); }
.point--line { border-bottom: 2px solid var(--color-theme); }
.point__num { font: 600 10.2px/21.8px var(--font-en); letter-spacing: 0.09em; }
.point__title { margin-top: 9px; font: 700 13px/19.63px var(--font-ja); letter-spacing: var(--ls-ja); }

/* ---------- Marquee（6352〜6391） ---------- */
.marquee { position: relative; height: 38px; z-index: 1; overflow: hidden; }
.marquee__track { position: absolute; top: 0; left: 4px; display: flex; height: 100%; }
.mq-unit { position: relative; flex: none; width: 380.9px; height: 38px; }
.mq-unit > img { position: absolute; display: block; }
.mq-heart { left: 0; top: 0; width: 128.39px; height: 37.96px; }
.mq-and { left: 136.2px; top: 24.1px; width: 26.57px; height: 12.14px; }
.mq-m { left: 172.9px; top: 8.9px; width: 40.48px; height: 27.53px; }
.mq-o { left: 217.6px; top: 9px; width: 67.94px; height: 29.06px; }
.mq-r { left: 292.9px; top: 8.9px; width: 15.83px; height: 27.53px; }
.mq-e { left: 311.4px; top: 8.9px; width: 28.07px; height: 29.15px; }
.mq-icon { left: 352.2px; top: 14.5px; width: 14.04px; height: 17.03px; }
.mq-icon--2 { left: 352.8px; top: 12.8px; width: 17.33px; height: 17.62px; }

/* ---------- News（6391〜7936） ---------- */
.news { position: relative; padding: 83.8px 0 165px; }
.news::before {
  content: ""; position: absolute; z-index: -1; left: calc(var(--c) + 3px); top: -17px; width: 388px; height: 1690px;
  background: url("../assets/img/news-grid-sp.svg") 0 0 / 388px 845px repeat-y; opacity: 0.5;
}
.news__inner { position: relative; padding-left: calc(var(--c) + 57px); }
.news .sec-head { flex-direction: row; align-items: center; gap: 37px; }
.news .label { width: auto; height: auto; border: 0; }
.news__list { display: flex; flex-direction: column; gap: 52.6px; margin: 19.2px 0 0 4px; }
.news-card { position: relative; width: 280px; }
.news-card__date {
  position: absolute; left: -27px; top: 8px; width: 24px;
  writing-mode: vertical-rl;
  font: 600 11px/23.6px var(--font-en); letter-spacing: 0.09em; color: var(--color-theme);
}
.news-card__thumb {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 280px; padding-top: 106px; border-radius: 6.6px;
  font: 600 14px/18px var(--font-en); letter-spacing: 0;
}
.news-card__thumb img { width: 35px; height: 31px; }
.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: block; margin-top: 11px; width: 278px; font-size: 14.17px; line-height: 20.46px; color: var(--color-black); }
.news__more { margin: 34px 0 0 90px; }

/* ---------- Contact（7936〜8420） ---------- */
.contact { position: relative; height: 484px; background: var(--color-black); color: var(--color-beige); }
.contact__tab { left: calc(var(--c) - 5px); top: -26px; padding: 10.3px 0 0 18px; background: var(--color-black); color: var(--color-beige); }
.contact__title {
  position: absolute; left: calc(var(--c) - 53px); top: 82px; width: 282px; height: 61px;
  border: 3.34px solid var(--color-beige); border-radius: 93px;
}
.contact__title > span[aria-hidden] {
  position: absolute; left: 72px; top: 9.2px; display: flex; align-items: flex-start;
  font: 600 29.82px/36px var(--font-en); letter-spacing: 0;
}
.contact__o { width: 47.75px; height: 22.26px; margin: 6.7px 0.9px 0 2.5px; }
.contact__text {
  position: absolute; left: calc(var(--c) + 45px); top: 181px; width: 330px;
  font: 700 13px/23.9px var(--font-ja); letter-spacing: var(--ls-ja);
}
.contact__text img { width: 23px; height: 21px; vertical-align: -4px; }
.contact__go {
  position: absolute; left: calc(var(--c) + 297px); top: 331px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 600 11.53px/1.2 var(--font-en); letter-spacing: 0;
}
.contact__go img { width: 23.53px; height: 33.33px; transform: rotate(-90deg); margin: -4.6px 0; }
.contact__top {
  left: calc(var(--c) + 222px); top: 455px; z-index: 1;
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 0 0 51px;
  background: var(--color-beige); color: var(--color-black); font-size: 14px;
}
.contact__top img { transform: rotate(180deg); }

/* ---------- Footer（8420〜8927） ---------- */
.footer { position: relative; height: 507px; background: var(--color-beige); overflow: hidden; }
.footer__tagline { position: absolute; left: 50%; top: 223px; width: 304px; height: 16.6px; transform: translateX(-50%); }
.footer__wave--l { position: absolute; left: calc(var(--c) - 172px); top: 412.4px; width: 693px; height: 115.2px; --wave-w: 693px; }
.footer__brand { position: absolute; left: 0; right: 0; top: 400px; display: flex; flex-direction: column; align-items: center; }
.footer__brand > img { width: 101.63px; height: 23.33px; }
.footer__brand > div { margin-top: 8px; display: flex; flex-direction: column; align-items: center; }
.footer__brand > div img { width: 139px; height: 13.37px; }
.footer__copy { display: block; margin-top: 7.3px; font: 600 10px/12px var(--font-en); letter-spacing: 0; color: var(--color-theme); }

} /* end SP */