/* Sleep LP 実サイト忠実版（実測= measurements.md・全値Sleepページ再実測） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #444;
  background: #fff;
}
a { text-decoration: none; color: inherit; }
img { display: block; }
button { font: inherit; border: none; background: none; cursor: pointer; }

/* ===== 固定ヘッダー ===== */
#scroll_header {
  position: fixed; top: 0; left: 0; width: 100%;
  background: #fff; padding: 15px 80px; z-index: -1; opacity: 0;
  transition: opacity .3s;
}
#scroll_header.shown { opacity: 1; z-index: 9999; }
.header-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.header-inner nav { display: flex; gap: 40px; }
.header-inner nav a {
  font-family: Roboto, sans-serif; font-size: 16px; font-weight: 500;
  line-height: 16px; color: #444; padding: 5px 0;
}
.header-contact {
  background: #ff7a00; color: #fff; border-radius: 43px;
  padding: 8px 60px; font-family: Roboto, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 16px;
  display: flex; align-items: center; gap: 8px;
}

/* ===== main 全体グラデーション ===== */
main {
  position: relative;
  background: linear-gradient(180deg, #000 9.58%, #2137aa 34.51%, #fff 67.82%, #fff3b5 79.5%, #ffd058 100%);
  overflow: clip;
}

/* ===== ヒーロー ===== */
.hero {
  position: relative; height: 100vh; z-index: 5;
  background-image: url("assets/s-2400x1190_v-frms_webp_c3d2986f-2adf-4233-bdf8-fd9d2bb7cd46.webp");
  background-size: cover; background-position: 50% 50%;
}
.hero-logo { position: absolute; left: 43px; top: 0; padding: 10px; display: block; }
.hero h1 {
  position: absolute; top: 100px; left: 0; width: 100%;
  text-align: center; color: #fff;
  font-family: Roboto, sans-serif; font-size: 8.75vw; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; white-space: nowrap;
}
.hero-nav { position: absolute; left: 80px; top: calc(50vh - 146px); }
.hero-nav a {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 5px;
  width: 204px; height: 23px; color: #fff;
  font-family: Roboto, sans-serif; font-size: 20px; font-weight: 500; line-height: 20px;
  border-bottom: 1px solid #fff;
  margin-bottom: 31px;
}
.hero-nav a img { margin-top: 0; opacity: 0; }
.hero-nav a:hover img { opacity: 1; }
.hero-contact {
  position: absolute; left: 80px; top: calc(50vh + 250px);
  width: 204px; height: 55px; background: #fff; border-radius: 43px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #444; font-family: Roboto, sans-serif; font-size: 20px; font-weight: 500;
  transition: background .3s cubic-bezier(.4,.4,0,1), color .3s cubic-bezier(.4,.4,0,1);
}
.hero-contact .plane-white { display: none; }
.hero-contact:hover { background: #ff7a00; color: #fff; }
.hero-contact:hover .plane-dark { display: none; }
.hero-contact:hover .plane-white { display: block; }
.hero-tagline {
  position: absolute; top: calc(100vh - 88px); left: 0; width: 100%;
  text-align: center; color: #fff;
  font-size: 30px; letter-spacing: 1.5px; line-height: 60px;
}

/* ===== 共通: セクションラベル・見出し ===== */
.sec-label {
  font-size: 25px; font-weight: 400; letter-spacing: 1.25px; line-height: 25px; color: #fff;
}
.sec-title {
  font-family: Roboto, sans-serif; font-size: 115.2px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 115.2px; color: #fff;
  margin-top: 3px;
}
.sec-label.dark, .sec-title.dark { color: #444; }

/* ===== About / Value / Services コンテナ ===== */
.avs { position: relative; }

/* --- About --- */
.about { padding-top: 190px; }
.about > .sec-label, .about > .sec-title { margin-left: 126px; }
.about-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-top: 17px; /* 見出し下端1233→video1250 */
  margin-bottom: 166px;
}
.about-video { position: relative; width: calc(100vw - 735px); flex: none; border-radius: 0 32px 32px 0; overflow: hidden; }
.about-gif { position: relative; width: 100%; height: auto; }
.about-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.about-text { width: 568px; margin-right: 80px; flex: none; }
.about-text > p { font-size: 15px; line-height: 30px; color: #fff; margin-bottom: 38px; }
.about-text > p:nth-child(3) { margin-bottom: 95px; }
.about-pill {
  position: relative;
  width: 523px; height: 60px;
  background: #fff; border-radius: 60px;
  padding: 6px 70px;
  display: flex; align-items: center; justify-content: flex-start;
  font-size: 24px; font-weight: 700; color: #444; line-height: 48px;
  margin-bottom: 23px;
}
.about-pill .pill-note { font-size: 10px; font-weight: 700; align-self: flex-start; margin-top: 8px; }
.about-pill img { position: absolute; right: 70px; top: 11px; transition: opacity .16s cubic-bezier(.4,.4,0,1); }
.about-pill { transition: background .16s cubic-bezier(.4,.4,0,1); }
.about-pill img.pill-ico-hover { opacity: 0; }
.about-pill:hover { background: #ff7a00; color: #fff; }
.about-pill:hover img.pill-ico-normal { opacity: 0; }
.about-pill:hover img.pill-ico-hover { opacity: 1; }
.about-text > p.about-notes { font-size: 12px; line-height: 24px; color: #fff; margin-bottom: 0; }

/* --- Value --- */
.value > .sec-label, .value > .sec-title { margin-left: 126px; }
.value-row { position: relative; margin-top: 33px; /* 見出し下端2155→body2188 */ }
.value-text { margin-left: 126px; width: 478px; }
.value-text p { font-size: 15px; line-height: 30px; color: #fff; }
.value-text p:nth-child(1) { margin-bottom: 38px; }
.value-text p:nth-child(2) { margin-bottom: 38px; }
.value-illust {
  position: absolute; left: 704px; top: -103px; /* y2085 (body2188基準) */
  width: calc(51.96vw - 154.6px); height: auto;
}

/* --- Services --- */
.services { position: relative; padding-top: 214px; /* value body下端2534→label2749 */ }
.services-head { margin-left: calc(100vw - 713px); }
.svc { position: relative; }
.svc-num {
  font-family: Roboto, sans-serif; font-size: 130px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 130px; color: rgba(255, 255, 255, .3);
}
.svc-body h3 { font-size: 40px; font-weight: 700; letter-spacing: 2px; line-height: 56px; color: #fff; }
.svc-en { font-family: Roboto, sans-serif; font-size: 25px; letter-spacing: -1px; line-height: 35px; color: #fff; margin-top: 10px; }
.svc-desc { font-size: 15px; line-height: 30px; color: #fff; text-align: justify; width: 461px; margin-top: 25px; }
.svc-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 233px; height: 52px; background: #fff; border-radius: 60px;
  font-size: 20px; font-weight: 700; color: #444; line-height: 40px;
}
.svc-btn img:last-child { transition: translate .16s cubic-bezier(.4,.4,0,1); }
.svc-btn:hover img:last-child { translate: 10px 0; }
/* 右レイアウト(01/03): 番号+本文は右列・ボタン右端127px */
.svc-r .svc-num { margin-left: calc(100vw - 783px); }
.svc-r .svc-body { margin-left: calc(100vw - 713px); margin-top: -44px; /* 番号h130と重なる: num y2910+130=3040 → title 2996 */ }
.svc-r .svc-btn { position: absolute; right: 127px; }
/* 左レイアウト(02/04) */
.svc-l .svc-num { margin-left: 56px; }
.svc-l .svc-body { margin-left: 126px; margin-top: -44px; }

/* 01 */
#svc1 { padding-top: 18px; /* 見出し下端2892→num2910 */ }
#svc1 .svc-btn { top: 400px; /* num2910基準 y3292 → 2910+18?… 実座標: 3292-2892=400 */ }
.svc-img-left {
  position: absolute; right: 812px; top: -1px; /* y2891 */
  width: calc(50vw - 153px); height: auto;
}
#svc1 .svc-star { position: absolute; left: calc(50vw - 215px); top: 384px; /* y3276 */ }
/* 02 */
#svc2 { margin-top: 250px; /* 01 btn下端3344→02 num3492…相対で調整 */ }
#svc2 .svc-btn { margin-left: 354px; margin-top: 30px; }
.svc-img-right {
  position: absolute; left: 687px; top: 108px; /* y3600 vs num3492 */
  width: calc(50vw - 153px); height: auto;
}
#svc2 .svc-star { position: absolute; left: calc(50vw - 215px); top: 426px; /* y3918 vs 3492 */ }
/* 03 */
#svc3 { margin-top: 248px; /* 02終端→03 num4154 */ }
#svc3 .svc-num { margin-left: calc(100vw - 823px); }
#svc3 .svc-body { margin-left: calc(100vw - 753px); }
#svc3 .svc-btn { top: 412px; /* 4566-4154 */ }
.svc-img-left3 {
  position: absolute; right: 854px; top: 110px; /* y4264 vs 4154 */
  width: calc(46vw - 149px); height: auto;
}
#svc3 .svc-star { position: absolute; left: calc(50vw - 215px); top: 396px; /* y4550 vs 4154 */ }
/* 04 */
#svc4 { margin-top: 250px; /* 03終端→04 num4766 */ padding-bottom: 133px; /* buttons下端5208→sec end 5340 */ }
.svc-img-zakone {
  position: absolute; right: 127px; top: 86px; /* y4852 vs 4766 */
  width: calc(45vw - 130px); height: auto;
}
.svc4-btns { display: flex; gap: 24px; margin-left: 126px; margin-top: 120px; /* body下端5038→btn5158 */ }
.svc-btn-static { width: auto; padding: 5px 28px; height: 50px; }

/* ===== 中間CTA ===== */
.midcta {
  position: relative; height: 365px;
  border-top: 1px solid #444; border-bottom: 1px solid #444;
}
.midcta-inner {
  position: relative; height: calc(100% - 4px); margin: 2px 0;
  border-top: 1px solid #444; border-bottom: 1px solid #444;
}
.midcta-lead {
  position: absolute; top: 119px; left: calc(50vw - 354px);
  font-size: 20px; line-height: 28px; color: #333;
}
.midcta-word {
  position: absolute; top: 159px; left: calc(50vw - 336px);
  width: 301px; height: 88px; background: #fff; border-radius: 44px;
  font-family: "Noto Sans JP", sans-serif; font-size: 40px; font-weight: 900;
  line-height: 56px; color: #ff7a00;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: background .3s cubic-bezier(.4,.4,0,1), color .3s cubic-bezier(.4,.4,0,1);
}
.midcta-word .plane-white, .cta-btn .plane-white { display: none; }
.midcta-word:hover, .cta-btn:hover { background: #ff7a00; color: #fff; }
.midcta-word:hover .plane-orange, .cta-btn:hover .plane-orange { display: none; }
.midcta-word:hover .plane-white, .cta-btn:hover .plane-white { display: block; }
.midcta-sheep {
  position: absolute; top: 64px; left: calc(50vw + 179px); transform: translateX(-50%);
  width: calc(25vw - 10px); height: auto;
}

/* ===== カルーセル共通 ===== */
.carousel { position: relative; }
.car-viewport { overflow: hidden; width: 100%; }
.car-track { display: flex; transition: transform .45s ease; will-change: transform; }
.car-arrow {
  position: absolute; width: 80px; height: 80px; border-radius: 50%;
  background: #777; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s;
}
.car-arrow:hover { background: #ff7a00; }
.car-prev { left: 100px; }
.car-next { right: 100px; }

/* ===== Case Study ===== */
.casestudy { padding-top: 90px; padding-bottom: 90px; /* 5705→label5795 */ }
.casestudy > .sec-label, .casestudy > .sec-title { margin-left: 126px; }
.cs-carousel { margin-top: 45px; /* 見出し下端5938→cards5983 */ }
.cs-carousel .car-arrow { top: 314px; }
.cs-track-pad { flex: none; }
.cs-card {
  flex: none; width: 494px; margin-right: 100px;
  background: #fff; border-radius: 30px; height: 649px;
  position: relative; overflow: hidden;
}
.cs-card img.cs-photo { width: 494px; height: 297px; object-fit: cover; }
.cs-card .cs-pad { padding: 47px 50px 0 50px; }
.cs-label { font-family: Roboto, sans-serif; font-size: 15px; letter-spacing: 1.5px; line-height: 15px; color: #444; }
.cs-title { font-size: 20px; font-weight: 700; line-height: 28px; color: #444; margin-top: 3px; }
.cs-body { font-size: 15px; line-height: 30px; color: #444; margin-top: 9px; }
.cs-more {
  position: absolute; right: 40px; bottom: 30px;
  display: flex; align-items: center; gap: 5px;
  font-size: 15px; line-height: 15px; color: #444;
  border: 1px solid #444; border-radius: 17px; padding: 8px 14px;
}

/* ===== Members ===== */
.members { padding-top: 90px; padding-bottom: 95px; }
.members > .sec-label, .members > .sec-title { margin-left: 100px; }
.mem-grid {
  display: grid; grid-template-columns: repeat(4, 220px);
  column-gap: 100px; row-gap: 52px;
  justify-content: center;
  margin-top: 24px; /* 見出し下端6956→photos6980 */
}
.mem-cell { width: 220px; text-align: center; }
.mem-cell > img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; }
.mem-role {
  font-family: Roboto, sans-serif; font-size: 18px; font-weight: 700; line-height: 18px;
  color: #444; margin-top: 16px; min-height: 36px;
  display: flex; align-items: flex-start; justify-content: center;
}
.mem-romaji { font-size: 10px; letter-spacing: .5px; line-height: 10px; color: #444; margin-top: 8px; }
.mem-name { font-size: 26px; line-height: 52px; color: #444; margin-top: -4px; }
.mem-more {
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; line-height: 19.6px; color: #333; margin-top: 12px;
  border: 1px solid #444; border-radius: 16px; padding: 3px 18px; min-width: 128px; box-sizing: border-box;
}

/* ===== News ===== */
.news { padding-top: 93px; padding-bottom: 90px; }
.news > .sec-label, .news > .sec-title { margin-left: 126px; }
.news-carousel { margin-top: 45px; /* 見出し下端8118→cards8163 */ }
.news-carousel .car-arrow { top: 161px; }
.news-card {
  flex: none; width: 320px; height: 421px; margin-right: 40px;
  border: 4px solid #ff7a00; border-radius: 25px;
  padding: 70px 43px 21px; position: relative;
}
.news-title { font-size: 20px; font-weight: 700; line-height: 28px; color: #444; }
.news-date {
  position: absolute; left: 47px; top: 311px;
  font-family: Roboto, sans-serif; font-size: 15px; letter-spacing: 2.25px; line-height: 15px; color: #444;
}
.news-more {
  position: absolute; left: 185px; top: 366px;
  display: flex; align-items: center; gap: 3px;
  font-size: 15px; line-height: 30px; color: #444;
}
.news-more img:last-child { transition: translate .3s cubic-bezier(.4,.4,0,1); }
.news-more:hover img:last-child { translate: 8px 0; }

/* ===== FAQ ===== */
.faq { padding-top: 80px; padding-bottom: 80px; /* 8674→label8754 */ }
.faq > .sec-label, .faq > .sec-title { margin-left: 125px; }
.faq > .sec-title { margin-top: 22px; /* label下端8779→title8801 */ }
.faq-grid {
  margin: 23px 125px 0; /* 見出し下端8916→cards8939・左右125で折り返し（実測: 1000=2列/1440=3列/1920=4列） */
  display: flex; flex-wrap: wrap;
  gap: 95px;
}
.faq-card {
  display: block; flex: none;
  width: 320px; height: 400px; background: #fff; border-radius: 25px;
  padding: 9px 26px; position: relative; text-align: left;
  transition: background .3s;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .2);
}
.faq-q {
  font-family: Roboto, sans-serif; font-size: 130px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 130px; color: rgba(68, 68, 68, .2);
}
.faq-question { position: absolute; left: 26px; width: 268px; bottom: 258px; font-size: 15px; line-height: 30px; color: #444; }
.faq-arrow { position: absolute; right: 26px; bottom: 9px; }
.faq-a, .faq-answer { display: none; }
.faq-card.open { background: #ff7a00; }
.faq-card.open .faq-q, .faq-card.open .faq-question, .faq-card.open .faq-arrow { display: none; }
.faq-card.open .faq-a {
  display: block;
  font-family: Roboto, sans-serif; font-size: 130px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 130px; color: rgba(255, 255, 255, .2);
}
.faq-card.open .faq-answer { display: block; font-size: 15px; line-height: 30px; color: #fff; margin-top: -70px; }

/* ===== 下部CTA ===== */
.cta { position: relative; height: 882px; }
.cta-sheep { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); }
.cta-lead {
  position: absolute; top: 524px; width: 100%; text-align: center;
  font-size: 30px; letter-spacing: 1.5px; line-height: 60px; color: #444;
}
.cta-btn {
  position: absolute; top: 614px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 110px; background: #fff; border-radius: 120px;
  display: flex; align-items: center; justify-content: center; gap: 24px;
  font-family: Roboto, sans-serif; font-size: 70px; font-weight: 900; color: #ff7a00;
  transition: background .3s cubic-bezier(.4,.4,0,1), color .3s cubic-bezier(.4,.4,0,1);
}

/* ===== フッター ===== */
footer { background: #fff; height: 170px; padding-top: 43px; }
.foot-links { display: flex; justify-content: center; align-items: center; }
.foot-links a {
  font-size: 15px; line-height: 30px; color: #444; padding: 0 70px;
  border-right: 1px solid #444;
  text-decoration: underline; text-underline-offset: 3px;
}
.foot-links a:last-child { border-right: none; }
.foot-copy { text-align: center; font-size: 15px; line-height: 30px; color: #444; margin-top: 32px; }


/* ===== ヒーロー出現アニメーション（実サイトappearルール実測値） ===== */
.hero h1 {
  opacity: 0;
  transition: opacity 2000ms cubic-bezier(0.4, 0.4, 0, 1) 800ms;
}
.hero-nav, .hero-contact {
  opacity: 0; translate: -200px 0;
  transition: opacity 1600ms cubic-bezier(0.4, 0.4, 0, 1) 2500ms, translate 1600ms cubic-bezier(0.4, 0.4, 0, 1) 2500ms;
}
.hero-tagline {
  opacity: 0;
  transition: opacity 2000ms cubic-bezier(0.4, 0.4, 0, 1) 1900ms;
}
body.loaded .hero h1, body.loaded .hero-tagline { opacity: 1; }
body.loaded .hero-nav, body.loaded .hero-contact { opacity: 1; translate: 0 0; }

/* ===== モーダル（日本は睡眠の質、世界最下位?） ===== */
.about-pill { cursor: pointer; }
.modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, .2);
  display: flex; align-items: center; justify-content: center;
}
.modal[hidden] { display: none; }
.modal-card {
  position: relative; width: 1092px; max-width: calc(100vw - 60px);
  background: #fff; border-radius: 20px;
  padding: 70px 51px 60px;
}
.modal-close { position: absolute; top: 29px; right: 30px; cursor: pointer; }
.modal-card h2 {
  font-size: 50px; font-weight: 700; line-height: 70px; letter-spacing: 1px;
  color: #444; text-align: center;
}
.modal-row { display: flex; gap: 40px; margin-top: 77px; align-items: flex-start; justify-content: center; }
.modal-row img { width: 454px; height: auto; }
.modal-row p { width: 444px; font-size: 15px; line-height: 30px; color: #000; text-align: justify; }


/* ===== メンバーモーダル（実測: カード1092x631 br30・写真左480・テキストx=+580） ===== */
.mem-modal-card {
  position: relative; width: 1092px; max-width: calc(100vw - 60px);
  height: 631px; background: #fff; border-radius: 30px;
  display: flex; overflow: hidden;
}
.mem-modal-card > img.mem-photo { width: 480px; height: 631px; object-fit: cover; flex: none; }
.mem-modal-body { padding: 107px 60px 0 100px; width: 612px; }
.mem-modal-role { font-size: 40px; font-weight: 400; line-height: 46px; color: #444; }
.mem-modal-romaji { font-size: 25px; letter-spacing: 1.25px; line-height: 25px; color: #444; margin-top: 46px; }
.mem-modal-name { font-size: 58px; font-weight: 700; letter-spacing: 8.7px; line-height: 70px; color: #444; margin-top: 6px; }
.mem-modal-bio { font-size: 15px; line-height: 30px; color: #444; margin-top: 85px; }
.mem-modal-close { position: absolute; top: 20px; right: 20px; cursor: pointer; }

/* ============================================================
   SPレイアウト（≤540px・全値480幅で実測: capture/sp-extract.json）
   実測BP: SP≤540 / タブレット541-840 / PC≥841（タブレットは未実装=PC縮小）
   ============================================================ */
.sp-header, .sp-menu, .sp-ctabar { display: none; }

@media (max-width: 840px) {
  /* --- SPヘッダー＋メニュー --- */
  .sp-header {
    display: flex; justify-content: space-between; align-items: center;
    position: absolute; top: 0; left: 0; width: 100%; z-index: 20;
    padding: 11px 20px 0 0;
  }
  .sp-header > a img { width: 160px; height: 38px; }
  .sp-burger img { width: 20px; height: 20px; }
  .sp-menu {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(0, 0, 0, .88); padding-top: 218px;
    visibility: hidden; opacity: 0; translate: 10% 0;
    transition: opacity .4s cubic-bezier(.4,.4,0,1), translate .4s cubic-bezier(.4,.4,0,1), visibility 0s .4s;
  }
  .sp-menu.open { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
  .sp-menu-close { position: absolute; top: 20px; right: 20px; padding: 4px; }
  .sp-menu nav { width: 204px; margin: 0 auto; }
  .sp-menu nav a {
    display: block; width: 204px; height: 23px; color: #fff;
    font-family: Roboto, sans-serif; font-size: 20px; font-weight: 500; line-height: 20px;
    border-bottom: 1px solid #fff; margin-bottom: 31px;
  }
  .sp-menu-contact {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 204px; height: 55px; margin: 11px auto 0;
    background: #ff7a00; border-radius: 43px;
    color: #fff; font-size: 24px; font-weight: 500; font-family: Roboto, sans-serif;
  }

  /* --- PC専用要素を隠す --- */
  #scroll_header, .hero-nav, .hero-contact, .hero-logo, .midcta, .car-arrow { display: none; }

  /* --- ヒーロー（実測: h400固定・h1 40px@81・タグライン15px@347） --- */
  .hero { height: 400px; }
  .hero h1 { top: 81px; font-size: 40px; letter-spacing: -1.6px; line-height: 40px; }
  .hero-tagline { top: 347px; font-size: 15px; letter-spacing: .75px; line-height: 30px; }

  /* --- 共通ラベル・見出し --- */
  .sec-label { font-size: 12px; letter-spacing: .6px; line-height: 12px; }
  .about > .sec-label { font-size: 25px; letter-spacing: 1.25px; line-height: 25px; } /* 実測: aboutのみ25px */
  .sec-title { font-size: 40px; letter-spacing: -1.6px; line-height: 40px; }
  .about > .sec-title { font-size: 38.4px; letter-spacing: -1.536px; line-height: 38.4px; }

  /* --- About（実測: label@455 video@541 w=100vw-50 本文12px@813〜） --- */
  .about { padding-top: 55px; }
  .about > .sec-label, .about > .sec-title { margin-left: 25px; }
  .about-row { display: block; margin-top: 20px; margin-bottom: calc(24.76vw + 34.2px); } /* 480:153/375:127実測 */
  .about-video { width: calc(100vw - 50px); margin-left: 25px; border-radius: 20px; }
  .about-play { width: 34px; height: 34px; }
  .about-text { width: calc(100vw - 50px); margin: 30px 25px 0; }
  .about-text > p { font-size: 12px; font-weight: 300; line-height: 24px; margin-bottom: 20px; }
  .about-text > p:nth-child(3) { margin-bottom: 17px; }
  .about-pill {
    width: 250px; height: 40px; padding: 6px 20px; margin-left: 0;
    font-size: 12px; line-height: 24px; margin-bottom: 3px;
  }
  .about-pill .pill-note { font-size: 8px; margin-top: 4px; }
  .about-pill img { width: 22px; height: 23px; right: 14px; top: 8px; }
  .about-text > p.about-notes { font-size: 8px; line-height: 16px; }

  /* --- Value（実測: イラスト右上231x146・本文12px全幅） --- */
  .value > .sec-label, .value > .sec-title { margin-left: 25px; }
  .value-row { margin-top: calc(39.05vw - 122.4px); } /* 480:65/375:24実測 */
  .value-text { margin-left: 25px; width: calc(100vw - 50px); }
  .value-text p { font-size: 12px; font-weight: 300; line-height: 24px; }
  .value-text p:nth-child(1), .value-text p:nth-child(2) { margin-bottom: 15px; }
  .value-illust { left: auto; right: 10px; top: -132px; width: 231px; }

  /* --- Services（実測: 番号50px・タイトル20px・本文12px・羊180左・ボタン114x25右） --- */
  .services { padding-top: 50px; }
  .services-head { margin-left: 25px; }
  .svc-num { font-size: 50px; letter-spacing: -2px; line-height: 50px; }
  .svc-r .svc-num, .svc-l .svc-num, #svc3 .svc-num { margin-left: 25px; }
  .svc-r .svc-body, .svc-l .svc-body, #svc3 .svc-body { margin-left: 25px; margin-top: -26px; }
  .svc-body h3 { font-size: 20px; letter-spacing: 1px; line-height: 28px; }
  .svc-en { font-size: 15px; font-weight: 300; letter-spacing: -.6px; line-height: 21px; margin-top: 0; }
  .svc-desc { width: calc(100vw - 50px); font-size: 12px; line-height: 24px; margin-top: 25px; }
  .svc-btn { width: 114px; height: 25px; font-size: 12px; line-height: 24px; gap: 4px; border-radius: 30px; }
  .svc-btn img { width: 13px; height: 12px; }
  .svc-btn img:last-child { display: none; } /* SPは矢印なし(実測: moonのみ) */
  .svc-r .svc-btn { right: 25px; }
  #svc1 { padding-top: 22px; }
  #svc1 .svc-btn { top: 227px; }
  .svc-img-left { position: absolute; left: 25px; right: auto; top: 200px; width: 180px; }
  #svc1 .svc-star, #svc2 .svc-star, #svc3 .svc-star { display: none; }
  #svc2 { margin-top: 196px; }
  #svc2 .svc-btn { margin-left: calc(100vw - 139px); margin-top: 26px; }
  .svc-img-right { position: absolute; left: 25px; top: 200px; width: 180px; }
  #svc3 { margin-top: 118px; }
  #svc3 .svc-btn { top: 233px; }
  .svc-img-left3 { position: absolute; left: 25px; right: auto; top: 200px; width: 180px; }
  #svc4 { margin-top: 188px; padding-bottom: calc(25.7vw - 55.3px); } /* 480:68/375:41実測 */
  .svc-img-zakone { right: 25px; top: 159px; width: 108px; }
  .svc4-btns { flex-direction: column; gap: 12px; margin-left: 25px; margin-top: 20px; }
  .svc-btn-static { width: 301px; height: 29px; font-size: 9.6px; line-height: 19.2px; padding: 5px 14px; }
  .svc-btn-static img { width: 13px; height: 12px; }
  .svc-btn-static img:last-child { display: none; }

  /* --- Case Study（実測: カードw=100vw-84 step=100vw-64 img高比例 title15px 本文12px） --- */
  .casestudy { padding-top: 45px; padding-bottom: 6px; }
  .casestudy > .sec-label, .casestudy > .sec-title { margin-left: 23px; }
  .cs-carousel { margin-top: 37px; }
  .cs-card { width: calc(100vw - 84px); height: 493px; margin-right: 20px; border-radius: 20px; }
  .cs-card img.cs-photo { width: 100%; height: auto; }
  .cs-card .cs-pad { padding: 22px 22px 0; }
  .cs-label { font-size: 10px; letter-spacing: 1px; line-height: 10px; }
  .cs-title { font-size: 15px; line-height: 21px; margin-top: 3px; }
  .cs-body { font-size: 12px; line-height: 24px; margin-top: 9px; }
  .cs-more { right: 22px; bottom: 18px; font-size: 10px; line-height: 10px; padding: 6px 10px; border-radius: 12px; }
  .cs-more img { width: 7px; height: 7px; }

  /* --- Members（実測: 写真180・2列・行ピッチ354） --- */
  .members { padding-top: 45px; padding-bottom: max(0px, 28.6vw - 114.2px); } /* 480:23/375:0実測 */
  .members > .sec-label, .members > .sec-title { margin-left: 25px; }
  /* 行ピッチ実測: 354/373/372=自然セル高+gap41（role行数で行高が変わる） */
  .mem-grid { grid-template-columns: repeat(2, 180px); column-gap: 39px; grid-auto-rows: auto; row-gap: 41px; margin-top: 24px; }
  .mem-cell { width: 180px; }
  .mem-cell > img { width: 180px; height: 180px; }
  .mem-role { margin-top: 4px; min-height: auto; align-items: flex-end; }
  .mem-name { margin-top: -3px; }
  .mem-more { margin-top: 17px; }

  /* --- News（実測: カードw=100vw-164 h300 step=100vw-144 title15px 日付11px） --- */
  .news { padding-top: 40px; padding-bottom: 10px; }
  .news > .sec-label, .news > .sec-title { margin-left: 25px; }
  .news-carousel { margin-top: 45px; }
  .news-card { width: calc(100vw - 164px); height: 300px; margin-right: 20px; padding: 40px 29px 20px; border-radius: 20px; }
  .news-title { font-size: 15px; line-height: 21px; }
  .news-date { left: 33px; top: 210px; font-size: 11px; letter-spacing: 1.65px; line-height: 11px; }
  .news-more { left: auto; right: 20px; top: 258px; font-size: 10px; line-height: 20px; }
  .news-more img:first-child { width: 11px; height: 12px; }
  .news-more img:last-child { width: 7px; height: 6px; }

  /* --- FAQ（実測: カードw=100vw-50 h65 Q40px 質問12px 開閉同型） --- */
  .faq { padding-top: 40px; padding-bottom: 0; }
  .faq > .sec-label, .faq > .sec-title { margin-left: 25px; }
  .faq > .sec-title { margin-top: 3px; }
  .faq-grid { margin: 18px 25px 0; gap: 16px; }
  .faq-card { width: calc(100vw - 50px); height: 65px; border-radius: 15px; padding: 12px 9px; box-shadow: 2px 2px 0 rgba(0,0,0,.2); }
  .faq-q { font-size: 40px; letter-spacing: -1.6px; line-height: 40px; position: absolute; left: 9px; top: 12px; }
  .faq-question { position: static; width: auto; margin-left: 26px; font-size: 12px; font-weight: 300; line-height: 16.8px; display: flex; align-items: center; min-height: 40px; }
  .faq-arrow { display: none; }
  .faq-card.open { height: auto; min-height: 65px; }
  .faq-card.open .faq-a { font-size: 40px; letter-spacing: -1.6px; line-height: 40px; position: absolute; left: 9px; top: 12px; }
  .faq-card.open .faq-answer { margin: 0 0 0 35px; font-size: 12px; font-weight: 300; line-height: 16.8px; min-height: 40px; display: flex; align-items: center; }

  /* --- CTA（実測: 羊258x156・テキスト13px・Contact40px/ボタンw=100vw-80） --- */
  .cta { height: 370px; }
  .cta-sheep { top: 28px; width: 258px; height: 156px; }
  .cta-lead { top: 234px; font-size: 13px; letter-spacing: .65px; line-height: 26px; }
  .cta-btn { top: 279px; width: calc(100vw - 80px); height: 60px; border-radius: 30px; font-size: 40px; gap: 12px; }
  .cta-btn img { width: 34px; height: 27px; }

  /* --- フッター --- */
  footer { height: 82px; padding-top: 16px; }
  .foot-links a { font-size: 10px; font-weight: 300; line-height: 20px; padding: 0 14px; }
  .foot-copy { font-size: 11px; font-weight: 300; line-height: 22px; margin-top: 8px; }

  /* --- モーダル(SP幅対応・簡易) --- */
  .modal-card { padding: 40px 20px 30px; }
  .modal-card h2 { font-size: 24px; line-height: 34px; }
  .modal-row { flex-direction: column; align-items: center; gap: 20px; margin-top: 30px; }
  .modal-row img { width: 100%; }
  .modal-row p { width: 100%; font-size: 12px; line-height: 24px; }
  .mem-modal-card { height: auto; flex-direction: column; width: calc(100vw - 40px); }
  .mem-modal-card > img.mem-photo { width: 100%; height: 300px; object-fit: cover; }
  .mem-modal-body { padding: 30px 25px 40px; width: 100%; }
  .mem-modal-role { font-size: 24px; line-height: 30px; }
  .mem-modal-romaji { font-size: 15px; margin-top: 16px; }
  .mem-modal-name { font-size: 34px; letter-spacing: 5px; line-height: 44px; margin-top: 4px; }
  .mem-modal-bio { font-size: 12px; line-height: 24px; margin-top: 24px; }
}


/* ===== モバイル帯(541-840)のタイポ拡大（実測: h1=8.75vw・svcタイトル=5vw・本文15px） ===== */
@media (max-width: 840px) and (min-width: 541px) {
  .hero h1 { font-size: 8.75vw; letter-spacing: -0.04em; line-height: 1; }
  .about-text > p, .value-text p, .svc-desc, .cs-body, .faq-question, .faq-card.open .faq-answer { font-size: 15px; line-height: 30px; }
  .svc-body h3 { font-size: 5vw; line-height: 1.4; }
  .about > .sec-title { font-size: 48px; letter-spacing: -1.9px; line-height: 48px; }
  .sec-title { font-size: 48px; letter-spacing: -1.9px; line-height: 48px; }
  .cs-title { font-size: 17px; line-height: 24px; }
  .news-title { font-size: 20px; line-height: 28px; }

  /* 寸法の線形則（480/700の2点実測から補間） */
  .svc-img-left, .svc-img-right { width: calc(65.9vw - 136.3px); top: calc(27.3vw + 69px); }
  .svc-img-left3 { width: calc(54.1vw - 79.7px); top: calc(27.3vw + 69px); }
  .svc-img-zakone { width: calc(69.1vw - 223.6px); top: calc(13.2vw + 95.6px); }
  .value-illust { width: 48.2vw; top: calc(-30vw - 24px); }
  .cs-card { width: calc(100vw - 210px); margin-right: 50px; }
  .news-card { width: calc(50vw - 20px); margin-right: 20px; padding: 70px 43px 21px; }
  .mem-grid { grid-template-columns: repeat(2, min(220px, calc(18.2vw + 92.7px))); column-gap: calc(31.8vw - 113.6px); }
  .mem-cell, .mem-cell > img { width: min(220px, calc(18.2vw + 92.7px)); }
  .mem-cell > img { height: auto; aspect-ratio: 1; }
  .cta-sheep { width: calc(30.5vw + 111.9px); height: auto; }
  #svc1 .svc-btn { top: calc(17.7vw + 142px); }
  #svc3 .svc-btn { top: calc(28.6vw + 95.7px); }
  /* FAQ: Q130px・カード181・質問15px（700実測） */
  .faq-card { height: 181px; }
  .faq-q { font-size: 130px; letter-spacing: -5.2px; line-height: 130px; }
  .faq-question { margin-left: 90px; font-size: 15px; line-height: 30px; }
  .faq-card.open .faq-a { font-size: 130px; letter-spacing: -5.2px; line-height: 130px; }
  .faq-card.open .faq-answer { margin-left: 90px; font-size: 15px; line-height: 30px; }

  /* セクション余白の線形則（480/700の2点実測） */
  .about-row { margin-bottom: calc(42vw - 48.6px); }
  #svc1 { padding-top: calc(9.5vw - 23.6px); }
  #svc2 { margin-top: calc(56.8vw - 76.7px); }
  #svc3 { margin-top: calc(55.9vw - 150.3px); }
  #svc4 { margin-top: calc(55.5vw - 78.4px); padding-bottom: calc(39.8vw - 123px); }
  .cs-card { height: calc(11.4vw + 438.5px); }
  .cs-more { bottom: 18px; }
  .casestudy { padding-bottom: calc(78.2vw - 369.4px); }
  .members { padding-bottom: max(0px, 53.6px - 6.4vw); }
  .mem-grid { margin-top: calc(9.5vw - 21.8px); }
  .news-card { height: 421px; }
  .news-date { top: 315px; font-size: 15px; left: 47px; letter-spacing: 2.25px; }
  .news-more { left: auto; right: 20px; top: auto; bottom: 25px; font-size: 15px; }
  .news { padding-bottom: calc(5.5vw - 24.4px); }
  .faq-grid { margin-top: calc(41.3vw - 180.3px); }
  .cta { height: calc(63.5vw + 65.2px); }
  .cta-lead { top: calc(246px - 2.5vw); }
  .cta-btn { top: calc(291px - 2.5vw); }
}

/* ===== SP/モバイル共通: 固定ヘッダー・下部追従CTAバー ===== */
@media (max-width: 840px) {
  .sp-header { position: fixed; z-index: 20; }
  .sp-burger { position: relative; z-index: 40; }
  .sp-menu-contact { height: 68px; font-size: 24px; }
  .sp-ctabar {
    display: flex; position: fixed; left: 0; bottom: 0; width: 100%; height: 100px;
    background: #ff7a00; z-index: 22;
    align-items: center; justify-content: space-between;
    padding: 0 25px 0 36px;
    transform: translateY(100%); transition: transform .3s cubic-bezier(.4,.4,0,1);
  }
  .sp-ctabar.shown { transform: translateY(0); }
  .sp-ctabar p { color: #fff; font-size: 18px; line-height: 25.2px; width: 216px; }
  .sp-ctabar a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 173px; height: 40px; flex: none;
    border: 2px solid #fff; border-radius: 48px;
    color: #fff; font-size: 14px; font-weight: 700;
  }
  /* メンバーモーダル: 写真フルワイド上部 */
  .mem-modal-card > img.mem-photo { width: 100%; height: auto; aspect-ratio: 640 / 610; object-fit: cover; object-position: top; }
  .mem-modal-body { padding: 24px 24px 36px; width: 100%; }
  .mem-modal-role { font-size: 20px; line-height: 26px; }
  .mem-modal-romaji { font-size: 13px; margin-top: 10px; }
  .mem-modal-name { font-size: 30px; letter-spacing: 6px; line-height: 40px; margin-top: 2px; }
  .mem-modal-bio { font-size: 13px; line-height: 26px; margin-top: 16px; }
}
@media (max-width: 540px) {
  .hero h1 { font-size: 40px; letter-spacing: -1.6px; line-height: 40px; }
}