/* ============================================================
   OUR SERVICE page — css/page-ourservice.css
   AI: ourservice.ai (1920pt artboard → 1440px, scale 0.75)
   Container: max-width 1440px, padding 40px → content 1360px
   Header overrides → page-common.css (is-subpage)
   ============================================================ */

/* ----------------------------------------------------------
   Prevent horizontal scroll
   ---------------------------------------------------------- */
html,
.is-subpage {
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   Page background
   ---------------------------------------------------------- */
.p-os-page {
  background: #fb9516;
}

.p-ourservice {
  padding: 0;
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   Hub — Orange bg + single white arch (top + bottom radius)
   ---------------------------------------------------------- */
.p-os-hub {
  position: relative;
  z-index: 3;
  background: #fb9516;
  padding-top: 86px;
}

.p-os-hub__arch {
  width: 100%;
  padding: clamp(70px, 7.1vw, 102px) 0 clamp(200px, 22vw, 320px);
  background: linear-gradient(to bottom, #ffffff 0%, #f2f8f7 45%, #e3f3f1 70%, #f2f8f7 100%);
  border-top-left-radius: 50% clamp(300px, 40vw, 580px);
  border-top-right-radius: 50% clamp(300px, 40vw, 580px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CTA Grid wrapper inside arch — reduced size */
.p-os-cta-wrap {
  width: min(960px, 88vw);
  margin-top: 60px;
}

.p-os-cta-wrap .p-cta-grid__box {
  width: 100%;
}

.p-os-cta-wrap .p-cta-grid__title {
  height: 36px;
}

.p-os-cta-wrap .p-cta-grid__arrow {
  width: 30px;
}

.p-os-hero {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.p-os-hero__title {
  margin: 0;
}

.p-os-hero__title-img {
  width: min(566px, 50vw);
  height: auto;
}

.p-os-hero__illust-img {
  width: min(313px, 28vw);
  height: auto;
}

/* ----------------------------------------------------------
   Service Sections — common base
   ---------------------------------------------------------- */
.p-os-section {
  position: relative;
}

/* --- Two-column flex: イラスト幅に合わせてテキスト列が自動拡張 --- */
.p-os-section__inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.p-os-section__content {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}

/* --- Reverse: text RIGHT, illust LEFT --- */
.p-os-section--reverse .p-os-section__inner {
  flex-direction: row-reverse;
}

/* ----------------------------------------------------------
   Service logo SVG
   ---------------------------------------------------------- */
.p-os-section__logo {
  margin-bottom: 36px;
}

.p-os-section__logo-img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* ----------------------------------------------------------
   Catchcopy SVG
   ---------------------------------------------------------- */
.p-os-section__catch {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 48px;
}

.p-os-section__catch-img {
  position: relative;
  z-index: 1;
  display: block;
  height: clamp(90px, 9.17vw, 132px);
  width: auto;
  max-width: 100%;
}

/* Yellow marker behind catchcopy (全セクション共通)
   各セクションの catch-img 幅 × テキスト行比率で幅を算出 */
.p-os-section__catch::before,
.p-os-section__catch::after {
  content: '';
  position: absolute;
  left: -4px;
  max-width: calc(100% + 4px);
  transform-origin: left center;
  transform: scaleX(0) skewX(-4deg);
  background-color: var(--color-marker-yellow);
  pointer-events: none;
  z-index: 0;
}

/* Line 1 marker (::before) */
.p-os-section__catch::before {
  top: 12%;
  height: 36%;
  border-radius: 6px 8px 5px 7px;
  animation: hero-marker-swipe 0.37s cubic-bezier(0.18, 0.75, 0.22, 1) 0.3s forwards;
}

/* Line 2 marker (::after) */
.p-os-section__catch::after {
  top: 60%;
  height: 36%;
  border-radius: 5px 7px 6px 8px;
  animation: hero-marker-swipe 0.32s cubic-bezier(0.22, 0.7, 0.28, 1) 0.6s forwards;
}

/* マーカー幅: %ベース（コンテナwidth:fit-contentで画像幅に追従） */
#talent-partners .p-os-section__catch::before { width: 79%; }
#talent-partners .p-os-section__catch::after  { width: 101%; }

#research-development .p-os-section__catch::before { width: 94%; }
#research-development .p-os-section__catch::after  { width: 101%; }

#legal-office .p-os-section__catch::before { width: 42%; }
#legal-office .p-os-section__catch::after  { width: 99%; }

/* SMH: 1行テキスト — ::after 非表示 */
#marketing-house .p-os-section__catch::before { top: 5%; width: 101%; height: 80%; }
#marketing-house .p-os-section__catch::after  { display: none; }

#deeptech-lab .p-os-section__catch::before { width: 63%; }
#deeptech-lab .p-os-section__catch::after  { width: 101%; }

/* ----------------------------------------------------------
   Per-section logo sizes
   ---------------------------------------------------------- */
.p-os-section__logo-img--stp {
  width: min(100%, 991px);
}

.p-os-section__logo-img--srd {
  width: min(100%, 729px);
}

.p-os-section__logo-img--slp {
  width: min(100%, 810px);
}

.p-os-section__logo-img--smh {
  width: min(100%, 709px);
}

.p-os-section__logo-img--sdl {
  width: min(100%, 845px);
}

/* ----------------------------------------------------------
   Per-section catchcopy sizes — height統一（viewBox高さ≈172-176で揃い）
   SRD基準: 646px幅時の高さ = 646×172.29/843.38 = 132px
   SMH: 1行テキスト（viewBox高さ71.33）→ 比率維持で55px
   ---------------------------------------------------------- */
.p-os-section__catch-img--smh {
  height: clamp(38px, 3.82vw, 55px);
}

/* ----------------------------------------------------------
   Service title (AI: 40px, W8, #4d4d4d)
   ---------------------------------------------------------- */
.p-os-section__title {
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 900;
  color: #4d4d4d;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  margin-bottom: 24px;
  -webkit-text-stroke: 0.5px #4d4d4d;
}

/* ----------------------------------------------------------
   Per-section vertical spacing (geometricBounds実測)
   各セクションで logo→catch→title の gap が異なる
   + セクション間の間隔 (padding-top/bottom) も実測値
   ---------------------------------------------------------- */

/* Section 1: STP — padding-top: 60px (hero直下) */
#talent-partners {
  padding: 60px 0 61px;
}
#talent-partners .p-os-section__logo   { margin-bottom: 60px; }
#talent-partners .p-os-section__catch  { margin-bottom: 65px; }
#talent-partners .p-os-section__title  { margin-bottom: 24px; }

/* Section 2: R&D — gap from STP: 122px → pt=61px (STPのpb=61) */
#research-development {
  padding: 61px 0 105px;
}
#research-development .p-os-section__logo   { margin-bottom: 72px; }
#research-development .p-os-section__catch  { margin-bottom: 74px; }
#research-development .p-os-section__title  { margin-bottom: 24px; }

/* Section 3: SLP — gap from R&D: 210px → pt=105px (R&DのPb=105) */
#legal-office {
  padding: 105px 0 64px;
}
#legal-office .p-os-section__logo   { margin-bottom: 59px; }
#legal-office .p-os-section__catch  { margin-bottom: 95px; }
#legal-office .p-os-section__title  { margin-bottom: 24px; }

/* Section 4: SMH — gap from SLP: 128px → pt=64px (SLPのpb=64) */
#marketing-house {
  padding: 64px 0 102px;
}
#marketing-house .p-os-section__logo   { margin-bottom: 64px; }
#marketing-house .p-os-section__catch  { margin-bottom: 71px; }
#marketing-house .p-os-section__title  { margin-bottom: 24px; }

/* Section 5: SDL — gap from SMH: 204px → pt=102px (SMHのpb=102) */
#deeptech-lab {
  padding: 102px 0 60px;
}
#deeptech-lab .p-os-section__logo   { margin-bottom: 42px; }
#deeptech-lab .p-os-section__catch  { margin-bottom: 71px; }
#deeptech-lab .p-os-section__title  { margin-bottom: 24px; }

/* ----------------------------------------------------------
   Description container
   ---------------------------------------------------------- */
.p-os-section__desc {
  margin-bottom: 8px;
}

/* ----------------------------------------------------------
   Body text (AI: 20px, W6, #4d4d4d)
   ---------------------------------------------------------- */
.p-os-section__text {
  font-size: clamp(14px, 1.35vw, 19.5px);
  font-weight: 600;
  color: #4d4d4d;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}

.p-os-section__text--second {
  margin-top: 10px;
}

/* ----------------------------------------------------------
   Sub-text (AI: 15px, W8, #4d4d4d)
   ---------------------------------------------------------- */
.p-os-section__subtext {
  font-size: clamp(12px, 1.04vw, 15px);
  font-weight: 800;
  color: #4d4d4d;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  margin-top: 16px;
  margin-bottom: 8px;
}

/* ----------------------------------------------------------
   Bullet list (AI: 18px, W6, #000)
   ---------------------------------------------------------- */
.p-os-section__bullets {
  list-style: disc;
  padding-left: 1.5em;
  margin-top: 12px;
  font-size: clamp(14px, 1.27vw, 18.3px);
  font-weight: 600;
  color: #000000;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}

.p-os-section__bullets li::marker {
  color: var(--color-primary);
}

/* ----------------------------------------------------------
   Numbered list (AI: 20px, W6, #4d4d4d)
   ---------------------------------------------------------- */
.p-os-section__numbered {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
  counter-reset: os-num;
}

.p-os-section__numbered li {
  counter-increment: os-num;
  font-size: clamp(14px, 1.35vw, 19.5px);
  font-weight: 600;
  color: #4d4d4d;
  line-height: 1.5;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  margin-bottom: 28px;
}

.p-os-section__numbered li:last-child {
  margin-bottom: 0;
}

.p-os-section__numbered li::before {
  content: counter(os-num) ". ";
  font-weight: 900;
  color: var(--color-primary);
}

.p-os-section__numbered li strong {
  font-weight: 900;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}


/* ----------------------------------------------------------
   Illustration area
   flex: 0 0 auto → イラスト画像サイズに基づいて列幅を決定
   テキスト列が残りスペースを取る (flex: 1 1 0%)
   ---------------------------------------------------------- */
.p-os-section__illust {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-end;
}

.p-os-section--reverse .p-os-section__illust {
  justify-content: flex-start;
}

.p-os-section__illust-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ----------------------------------------------------------
   Per-section illustration sizes & vertical offsets
   offset = illust_top - logo_top (geometricBounds実測)
   ---------------------------------------------------------- */

/* STP: illust(717) - logo(528) = 189px */
#talent-partners .p-os-section__illust-img {
  width: min(533px, 37vw);
}
#talent-partners .p-os-section__illust {
  margin-top: min(189px, 13.1vw);
}

/* R&D: イラスト上端 = キャッチ上端に揃える
   logo_h(143px) + logo_mb(72px) = 215px */
#research-development .p-os-section__illust-img {
  width: min(640px, 44.4vw);
}
#research-development .p-os-section__illust {
  margin-top: min(215px, 14.9vw);
}

/* SLP: illust(2734) - logo(2449) = 285px */
#legal-office .p-os-section__illust-img {
  width: min(570px, 39.6vw);
}
#legal-office .p-os-section__illust {
  margin-top: min(285px, 19.8vw);
}

/* SMH: illust(3830) - logo(3579) = 251px */
#marketing-house .p-os-section__illust-img {
  width: min(657px, 45.6vw);
}
#marketing-house .p-os-section__illust {
  margin-top: min(251px, 17.4vw);
}

/* SDL: illust(4766) - logo(4601) = 165px */
#deeptech-lab .p-os-section__illust-img {
  width: min(635px, 44.1vw);
}
#deeptech-lab .p-os-section__illust {
  margin-top: min(165px, 11.5vw);
}

/* ----------------------------------------------------------
   Service cards (Talent Partners section)
   ---------------------------------------------------------- */
.p-os-section__service-cards {
  display: flex;
  gap: min(55px, 3.8vw);
  margin-top: min(35px, 2.4vw);
  margin-bottom: min(53px, 3.7vw);
}

.p-os-section__service-card {
  position: relative;
  display: grid;
  place-content: center;
  place-items: center;
  width: min(262px, 18.2vw);
  height: min(93px, 6.5vw);
  padding: 0;
  border: none;
  border-radius: min(12px, 0.83vw);
  background: #ffffff;
  box-shadow: 4px 5px 14px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: box-shadow 0.2s;
  overflow: hidden;
}

.p-os-section__service-card:hover {
  box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.25);
}

.p-os-section__card-subtext {
  font-size: min(15px, 1.04vw);
  font-weight: 900;
  color: #222222;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  margin-bottom: min(4px, 0.3vw);
  white-space: nowrap;
}

.p-os-section__saiyou-logo {
  width: min(156px, 10.8vw);
  height: auto;
}

.p-os-section__card-partner-img {
  width: min(195px, 13.5vw);
  height: auto;
}

/* SDL card */
.p-os-section__service-card--sdl {
  padding: 0 min(16px, 1.1vw);
}

.p-os-section__card-sdl-logo {
  width: min(195px, 13.5vw);
  height: auto;
}

.p-os-section__card-link-icon {
  position: absolute;
  bottom: min(8px, 0.56vw);
  right: min(8px, 0.56vw);
  width: min(14px, 0.97vw);
  height: auto;
  opacity: 0.6;
}

/* ----------------------------------------------------------
   CTA / Footer overrides
   ---------------------------------------------------------- */
.p-ourservice .p-cta-grid {
  background-color: transparent;
}

/* Footer — curve fill color only (override handled by .has-footer-arch) */
.has-footer-arch.p-ourservice + .l-footer .l-footer__curve-path {
  fill: #f2f8f7;
}

/* ============================================================
   Responsive — Tablet (max-width: 1023px)
   ============================================================ */
/* 1200px footer override → .has-footer-arch に統合済み */

@media (max-width: 1023px) {
  .p-os-hub {
    padding-top: 74px;
  }

  .p-os-hub__arch {
    padding: clamp(50px, 7vw, 70px) 0 clamp(180px, 25vw, 220px);
    border-top-left-radius: 50% clamp(200px, 40vw, 430px);
    border-top-right-radius: 50% clamp(200px, 40vw, 430px);
  }

  .p-os-hero__title-img {
    width: min(400px, 46vw);
  }

  .p-os-hero__illust-img {
    width: min(220px, 24vw);
  }

  .p-os-section {
    padding: 36px 0 32px !important;
  }

  .p-os-section__inner {
    gap: 28px;
  }

  .p-os-section__logo {
    margin-bottom: 24px !important;
  }

  .p-os-section__catch {
    margin-bottom: 32px !important;
  }

  .p-os-section__title {
    margin-bottom: 10px !important;
  }

  .p-os-section__illust-img {
    width: clamp(240px, 36vw, 460px) !important;
  }

  .p-os-section__illust {
    margin-top: clamp(60px, 10vw, 160px) !important;
  }

  .p-os-section__service-cards {
    gap: 28px;
    margin-top: 20px;
    margin-bottom: 28px;
  }

  .p-os-section__service-card {
    width: 220px;
    height: 80px;
    padding: 0 16px 0 28px;
    border-radius: 8px;
  }

  .p-os-section__card-subtext {
    font-size: 12px;
  }

  .p-os-section__saiyou-logo {
    width: 130px;
  }

  .p-os-section__card-partner-img {
    width: 160px;
  }

  .p-os-section__service-card--sdl {
    padding: 0 14px;
  }

  .p-os-section__card-sdl-logo {
    width: 160px;
  }
}

/* ============================================================
   Responsive — Mobile (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  .p-os-hub {
    padding-top: 64px;
  }

  .p-os-hub__arch {
    min-height: 300px;
    padding: 100px 20px 180px;
    border-top-left-radius: 50% 280px;
    border-top-right-radius: 50% 280px;
  }

  .p-os-hero__title-img {
    width: min(320px, 70vw);
  }

  .p-os-hero__illust-img {
    width: min(180px, 40vw);
  }

  .p-os-section {
    padding: 28px 0 22px !important;
  }

  .p-os-section__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
  }

  .p-os-section--reverse .p-os-section__inner {
    flex-direction: column;
  }

  .p-os-section__logo {
    margin-bottom: 18px !important;
    display: flex;
    justify-content: center;
  }

  .p-os-section__logo-img {
    width: min(85vw, 460px);
    max-width: 100%;
  }

  .p-os-section__logo-img--stp,
  .p-os-section__logo-img--slp,
  .p-os-section__logo-img--sdl {
    width: min(85vw, 460px);
    max-width: 100%;
  }

  .p-os-section__catch {
    margin-bottom: 24px !important;
  }

  .p-os-section__catch-img {
    height: clamp(64px, 17.5vw, 100px);
    width: auto;
    max-width: 90vw;
  }

  .p-os-section__catch-img.p-os-section__catch-img--smh {
    height: clamp(27px, 7.2vw, 42px);
  }

  .p-os-section__title {
    font-size: clamp(18px, 5vw, 26px);
    margin-bottom: 12px !important;
  }

  .p-os-section__text {
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.75;
  }

  .p-os-section__text br {
    display: none;
  }

  .p-os-section__numbered br {
    display: none;
  }

  .p-os-section__bullets {
    font-size: 14px;
    margin-top: 14px;
    text-align: left;
  }

  .p-os-section__numbered {
    text-align: left;
  }

  .p-os-section__numbered li {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .p-os-section__numbered li strong::after {
    content: "\A";
    white-space: pre;
  }

  /* --- モバイル並び替え: Logo → Illust → Catch → Title → Desc --- */
  .p-os-section__content {
    display: contents;
  }

  .p-os-section__logo  { order: 1; width: 100%; }
  .p-os-section__illust,
  .p-os-section--reverse .p-os-section__illust {
    order: 2;
    align-self: center;
    margin-top: 0 !important;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .p-os-section__catch { order: 3; width: fit-content; max-width: 100%; }
  .p-os-section__title { order: 4; width: 100%; }
  .p-os-section__desc  { order: 5; width: 100%; }

  .p-os-section__illust-img {
    width: min(75vw, 360px) !important;
  }

  .p-os-section__service-cards {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .p-os-section__service-card {
    width: 45%;
    height: 70px;
    padding: 0 12px 0 16px;
    border-radius: 7px;
  }

  .p-os-section__service-card--sdl {
    width: 70%;
    height: 90px;
  }

  .p-os-section__card-sdl-logo {
    width: min(160px, 40vw);
  }

  .p-os-section__card-subtext {
    font-size: 10px;
  }

  .p-os-section__saiyou-logo {
    width: 100px;
  }

  .p-os-section__card-partner-img {
    width: min(120px, 30vw);
  }
}

@media (max-width: 480px) {
  .p-os-hub {
    padding-top: 56px;
  }

  .p-os-hub__arch {
    min-height: 260px;
    padding: 80px 16px 140px;
    border-top-left-radius: 50% 200px;
    border-top-right-radius: 50% 200px;
  }
}