/* =============================================================================
   services.css — Services（#services）
   セクション見出し、コンサルティングサービス（展開する行）と 2 枚のイノベーションカード、
   Why Activarch、ピン留めされた Projects のレールとその結びの一文。
   ============================================================================= */

/* 前後のセクションより静かに。オレンジは句読点のように要所だけ。 */
.services {
  padding-top: 118px;
  background: #fff;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  align-items: start;
  margin-bottom: 76px;
}

.section-heading > p {
  line-height: 1.9;
  padding-top: 10px;
}

.section-heading > p > span {
  display: block;
  margin-top: 22px;
  color: var(--text-muted);
  line-height: 2;
}

.service-family + .service-family {
  margin-top: 64px;
}

.service-family-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.service-family-head > p {
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}

.official-service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 56px;
}

.official-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 0 30px;
}

.official-service-top {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 24px;
  padding-right: 20px;
}

.official-service-icon {
  width: 67px;
  height: 67px;
}

.official-service-heading h4 {
  line-height: 1.5;
  letter-spacing: -.03em;
}

.official-service-copy {
  color: var(--text-muted);
  line-height: 2;
  margin-bottom: 24px;
  flex: 1;
}

.official-service-card > .text-link {
  align-self: flex-start;
}

.official-service-card--innovation {
  padding: 22px 34px;
  background: linear-gradient(125deg,#edf7fc,#f6f9fe);
  border-radius: 16px;
}

.why {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 80px calc(var(--gutter)*-1) 0;
  padding: 70px var(--gutter);
  color: #fff;
  background: linear-gradient(110deg,#1b4eb7,#226aad 80%,#2374b2);
  display: grid;
  grid-template-columns: .95fr 2.3fr;
  gap: 40px;
}

.why-heading h2 {
  color: #fff;
  letter-spacing: -.05em;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
}

.why-diagram {
  width: 130px;
  height: 86px;
  margin: 8px 0 12px;
}

/* 各理由：英語の名前、それが導く日本語の見出し、そのあとに本文。 */
.why-grid .title-feature {
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}

.why-grid h3 {
  line-height: 1.5;
  margin-bottom: 12px;
}

/* 特徴ブロックが中央揃えでも本文は左揃えで読ませる：複数行の段落を中央揃えにすると
   行頭が不揃いになり、目で追いにくいため。 */
.why-grid p:not(.title-feature) {
  line-height: 1.9;
  color: #e8f5ff;
  text-align: left;
}

/* Projects：ネイティブスクロールのレール。下の 2 つのコントロールでカード 1 枚ずつ送る。 */
.case-scroll-shell {
  background: #f2f8fc;
  padding: 36px 0;
}

.case-wrap {
  padding: 36px 0 24px;
  overflow-x: clip;
  overflow-y: visible;
}

.case-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}

.case-heading > span {
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}

.case-heading p {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-left: auto;   /* ラベルは右側を保ち、2 つのコントロールがそれに続く */
}

.case-heading i {
  color: var(--c-orange);
}

/* レールの下の丸いコントロール 2 つでカード 1 枚ずつ送る（矢印キーと同じ刻み）。
   横スクロールだけが後ろの事例に辿り着く手段にならないように。 */
.case-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.case-count {
  min-width: 4.2em;
  text-align: center;
  color: var(--accent);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.case-nav-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .55);
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  color: var(--accent);
  cursor: pointer;
  transition: background-color .3s var(--motion-ease), border-color .3s var(--motion-ease);
}

@media (hover: hover) {
  .case-nav-btn:hover {
    background: rgb(255 255 255 / .22);
    border-color: #fff;
  }
}

.case-nav-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.case-track {
  position: relative;
  display: flex;
  width: 100%;
  gap: 28px;
  padding: 0 5vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 5vw;
  /* 位置はスクロールバーではなく、コントロールの間のカウンターで読み取る。 */
  scrollbar-width: none;
  align-items: stretch;
}

.case-track::-webkit-scrollbar {
  display: none;
}

.project-card {
  flex: 0 0 clamp(290px,32vw,480px);
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.project-card figure {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-card img {
  width: 100%;
  aspect-ratio: 1.75;
  object-fit: cover;
  transition: transform .5s;
}

.project-card figcaption {
  padding: 22px 26px 27px;
  min-height: 138px;
  background: #fff;
  position: relative;
}

.project-card figcaption > span {
  color: var(--text-muted);
  display: block;
  margin-bottom: 9px;
}

.project-card h3 {
  line-height: 1.65;
  color: var(--text);
}

.project-card-detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1.75;
  background: linear-gradient(125deg,#1445aedf,#278ecee8);
  color: white;
  display: flex;
  align-items: center;
  padding: 20px 25px;
  opacity: 0;
  transition: opacity .25s;
  line-height: 1.8;
}

.project-card-detail ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.project-card:hover .project-card-detail,
.project-card:focus-visible .project-card-detail {
  opacity: 1;
}

.align-right {
  text-align: right;
  margin-top: 26px;
}

.variant-motion .why-grid > article:nth-child(2) {
  transition-delay: .1s;
}

.variant-motion .why-grid > article:nth-child(3) {
  transition-delay: .2s;
}

@media (min-width:1600px) {
  .why {
    margin-inline: -5vw;
    padding-inline: 5vw;
  }
}

@media (max-width:1100px) {
  .why {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .why-heading {
    display: flex;
    align-items: baseline;
    gap: 30px;
  }

  .why-grid {
    gap: 50px;
  }

  .section-heading {
    gap: 6%;
  }

  .official-service-top {
    gap: 16px;
  }

  .official-service-icon {
    width: 56px;
    height: 56px;
  }
}

@media (max-width:900px) {
  .section-heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section-heading > p {
    max-width: 660px;
  }

  .official-service-grid {
    gap: 24px;
  }

  .official-service-card--innovation {
    padding: 26px;
  }

  #services .section-heading {
    grid-template-columns: 1fr;
  }

  #services .official-service-card:not(.official-service-card--innovation) {
    grid-template-columns: 32px 1fr 40px;
    column-gap: 12px;
  }
}

@media (max-width:760px) {
  .services {
    padding-top: 66px;
  }

  .section-heading {
    gap: 20px;
    margin-bottom: 40px;
  }

  .section-heading > p {
    padding: 0;
  }

  .section-heading > p > span {
    margin-top: 15px;
  }

  .service-family-head {
    display: block;
  }

  .service-family-head h3 {
    margin-top: 10px;
  }

  .official-service-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .official-service-card {
    padding: 8px 0 25px;
  }

  .official-service-card:not(.official-service-card--innovation) {
    border-bottom: 1px solid #dfebf4;
  }

  .official-service-top {
    margin-bottom: 15px;
    gap: 15px;
  }

  .official-service-icon {
    width: 52px;
    height: 52px;
  }

  .official-service-copy {
    line-height: 2;
    margin-bottom: 18px;
  }

  .service-family + .service-family {
    margin-top: 34px;
  }

  .official-service-card--innovation {
    padding: 18px 25px;
  }

  .why {
    margin-top: 48px;
    padding-top: 45px;
    padding-bottom: 44px;
    gap: 30px;
  }

  .why-heading {
    display: block;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .why-grid article {
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 20px;
    position: relative;
  }

  .why-diagram {
    width: 100px;
    height: 70px;
    margin: 13px 0 0;
  }

  .why-grid .title-feature {
    margin: 0 0 6px;
  }

  .why-grid h3 {
    margin: 0 0 8px;
  }

  .case-scroll-shell {
    padding: 22px 0 20px;
  }

  .case-wrap {
    padding-top: 24px;
  }

  .case-heading {
    margin-bottom: 24px;
  }

  .case-heading p {
    gap: 12px;
  }

  .case-track {
    gap: 16px;
    padding-inline: 6vw;
  }

  .project-card {
    flex-basis: 80vw;
  }

  .project-card figcaption {
    padding: 18px 22px;
    min-height: 138px;
  }

  .project-card-detail {
    padding: 15px 22px;
  }

  .align-right {
    margin-top: 22px;
  }
}

.why-diagram > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scroll-choreography .why-diagram[data-motion="media"] {
  clip-path: inset(-12% -12% calc((1 - var(--enter)) * 100%) -12%);
}

.scroll-choreography .official-service-icon[data-motion] {
  transform: translateY(calc((1 - var(--enter)) * 16px))
    scale(calc(.88 + var(--enter) * .12));
}

#services {
  background: transparent;
  color: #fff;
  --text: #fff;
  --accent: #fff;
  --accent-deep: #fff;
  --text-muted: #e0f2ff;
  --rule: #ffffff40;
}

#services :is(.section-title h2,.section-title p,.section-heading > p,.section-heading > p > span,.service-family-head > p,.service-family-head h3,.official-service-heading h4,.official-service-copy,.case-heading > span,.case-heading p,.text-link,.project-card h3,.project-card figcaption > span) {
  color: #fff;
}

#services .official-service-card {
  border-color: #ffffff35;
}

#services .official-service-icon {
  filter: brightness(0) invert(1);
  opacity: .95;
}

#services .case-scroll-shell {
  background: transparent;
}

#services .project-card {
  background: #ffffff12;
  border: 1px solid #ffffff35;
}

#services .project-card figcaption {
  background: transparent;
}

#services .text-link {
  border-color: #ffffff70;
}

/* 2 つのグループは同じ形で始まる：英語タイトル、その日本語の行、グループのボタン、そして罫線。
   罫線は見出し側に属するので、最初のグループのリストの下だけでなくどちらのグループでも
   同じ位置に落ち、ボタンの上下の余白も等しくなる。 */
#services .service-family-head {
  justify-content: flex-start;
  gap: 24px;
  border: 0;
  border-bottom: 1px solid #ffffff45;
  margin-bottom: 40px;
  padding-bottom: 34px;
  display: block;
}

/* グループ自身のボタンは、タイトル 2 行の下に座る。 */
#services .service-family-head .btn {
  margin-top: 34px;
}

#services .service-family:first-child .official-service-grid {
  display: block;
}

#services .official-service-card:not(.official-service-card--innovation) .official-service-top {
  display: contents;
}

#services .official-service-card:not(.official-service-card--innovation) .official-service-icon {
  grid-row: 1;
  width: 56px;
  height: 56px;
  justify-self: end;
  grid-column: 2;
  filter: none;
}

#services .official-service-card:not(.official-service-card--innovation) .official-service-copy {
  max-width: 65em;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height .6s,opacity .4s,margin .4s;
}

#services .official-service-card:not(.official-service-card--innovation) > .text-link {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding-block: 0;
  border: 0;
  transition: max-height .5s,opacity .4s,margin .4s;
}

#services .official-service-card:not(.official-service-card--innovation):is(:hover,:focus-within) .official-service-copy {
  max-height: 300px;
  opacity: 1;
  margin-top: 18px;
}

#services .official-service-card:not(.official-service-card--innovation):is(:hover,:focus-within) > .text-link {
  max-height: 60px;
  opacity: 1;
  margin-top: 18px;
}

#services .official-service-card:not(.official-service-card--innovation):hover .official-service-heading {
  transform: translateX(10px);
}

#services .service-family + .service-family {
  margin-top: clamp(56px,7vw,96px);
}

#services .official-service-card--innovation .official-service-top {
  flex-direction: row-reverse;
  justify-content: space-between;
}

#services .why {
  background: transparent;
  border-top: 1px solid #ffffff40;
  border-bottom: 1px solid #ffffff40;
  display: block;
}

#services .why-heading {
  margin-bottom: 44px;
}

#services .why-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5vw;
}

@media (max-width:900px) {
  #services .service-family-head {
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  #services .official-service-card:not(.official-service-card--innovation) .official-service-icon {
    width: 40px;
    height: 40px;
  }

  #services .official-service-card:not(.official-service-card--innovation) .official-service-copy,
  #services .official-service-card:not(.official-service-card--innovation) > .text-link {
    max-height: none;
    opacity: 1;
    margin-top: 14px;
  }

  /* 3 つの特徴はスマホ手前まで横並びを保つ（クライアントはタブレット幅でも横並びを希望）。
     ここでは間隔を詰めるだけ。1 カラムでアイコンをテキスト横に置くレイアウトは、
     下の 760px から始まる。 */
  #services .why-grid {
    gap: 3vw;
  }
}

@media (max-width:760px) {
  #services .why-grid {
    grid-template-columns: 1fr;
  }

  /* 縦積みの行：アートを左に置いてテキスト 2 行分にまたがらせ、見出しと本文が
     右カラムをまとめて流れ下るようにする。 */
  #services .why-grid article {
    display: grid;
    grid-template-columns: 130px 1fr;
    column-gap: 24px;
  }

  #services .why-grid article .why-diagram {
    grid-row: 1 / 4;
    align-self: start;
    margin: 0;
  }
}

@media (hover:none) {
  #services .official-service-card:not(.official-service-card--innovation) .official-service-copy,
  #services .official-service-card:not(.official-service-card--innovation) > .text-link {
    max-height: none;
    opacity: 1;
    margin-top: 14px;
  }
}

#services .why-grid .title-feature {
  line-height: 1.3;
}

#services .why-diagram {
  width: 169px;
  height: 112px;
}

@media (max-width:900px) {
  #services .why-diagram {
    width: 130px;
    height: 91px;
  }
}

/* スマホでは縦積み：アートの下にテキスト、特徴ブロック全体を中央揃え。 */
@media (max-width:420px) {
  #services .why-grid article {
    grid-template-columns: 1fr;
    text-align: center;
  }

  #services .why-grid article .why-diagram {
    grid-row: auto;
    margin-inline: auto;
  }

  #services .why-diagram {
    margin-bottom: 18px;
  }
}

/* サービスカード：選択状態、写真の処理、セクション登場時の光。 */
#services .official-service-card:not(.official-service-card--innovation) {
  display: grid;
  padding: 30px 0;
  border-bottom: 1px solid #ffffff45;
  grid-template-columns: minmax(0,1fr) 64px;
  column-gap: 24px;
  position: relative;
  isolation: isolate;
}

#services .official-service-card:not(.official-service-card--innovation) .official-service-heading {
  grid-row: 1;
  transition: transform .45s;
  grid-column: 1;
}

#services .official-service-card--innovation .official-service-icon {
  filter: none;
}

#services .service-family-head > p {
  margin-bottom: 12px;
}

#services .service-family-head h3 {
  line-height: 1.6;
}

@media (max-width:760px) {
  #services .official-service-card:not(.official-service-card--innovation) {
    grid-template-columns: minmax(0,1fr) 40px;
    column-gap: 12px;
  }
}

/* Projects は見出しと同じガターを共有する。 */
#services .case-track {
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}


/* Services の導入文は About の導入文と同じサイズで読ませる。 */
#services .section-heading > p > span {
  display: block;
  line-height: 2;
  margin-top: 24px;
}

@media (max-width:760px) {
  #services .section-heading > p > span {
    line-height: 1.9;
  }

  #services .projects-closing p br {
    display: none;
  }
}

/* Projects は相談への誘いで締めくくる。 */
#services .projects-closing {
  text-align: center;
  padding-block: clamp(64px,7vw,120px);
  color: #fff;
}

#services .projects-closing p {
  line-height: 1.95;
  margin: 0 0 32px;
}

#services .projects-closing .btn {
  min-width: 240px;
}

@media (max-width:760px) {
  #services .projects-closing {
    padding-block: 60px;
  }
}

#services .projects-closing h3 {
  line-height: 1.6;
  margin: 0 0 22px;
  background: linear-gradient(105deg,#fff 0%,#fff 40%,#ffb26c 45%,var(--c-orange) 49%,#ffe0b7 52%,#ff8738 55%,#fff 61%,#fff 100%);
  background-size: 300% 100%;
  background-position: var(--flash-position,140%) 50%;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion:reduce) {
  #services .projects-closing h3 {
    background: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
  }
}

/* コンサルティングサービスは展開する全幅の行として並べ、そのあとに 2 枚のイノベーションカード。 */
#services .section-heading {
  gap: 6vw;
  align-items: start;
}

#services .section-heading > p {
  padding-top: 0;
  margin-top: 0;
}

/* ホバーした行には、イノベーションカードと同じ半透明の濃い青が静かに載る
   （以前のオレンジ → 水色のワイプは他で使われなくなったので外した。2026-10-30 レビュー）。 */
#services .official-service-card:not(.official-service-card--innovation)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8,47,126,.42);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

#services .official-service-card:not(.official-service-card--innovation):is(:hover,:focus-within)::before {
  opacity: 1;
}

/* 展開したサービスの中身は、動く見出しと揃ったまま動く。 */
#services .official-service-card:not(.official-service-card--innovation) .official-service-copy,
#services .official-service-card:not(.official-service-card--innovation) > .text-link {
  grid-column: 1/3;
  translate: 0;
  transition: max-height .6s,opacity .4s,margin .4s,translate .45s;
}

#services .official-service-card:not(.official-service-card--innovation):is(:hover,:focus-within) .official-service-heading {
  transform: translateX(10px);
}

#services .official-service-card:not(.official-service-card--innovation):is(:hover,:focus-within) .official-service-copy,
#services .official-service-card:not(.official-service-card--innovation):is(:hover,:focus-within) > .text-link {
  translate: 10px 0;
}

/* Services の見出しは、セクション引き継ぎの間にひとつの構成として到着する。 */
.scroll-choreography #services > .wrap > .section-heading [data-motion],
.scroll-choreography #services > .wrap > .section-heading {
  transform: none;
  translate: none;
  clip-path: none;
  opacity: 1;
}

/* イノベーションカード（AI 事業・量子 事業）：PC では説明を開いたまま、末尾のテキストリンクで
   それぞれのサービスページへ。カード全体はリンクにせず、ホバーのワイプも付けない
   （2026-10-29 レビュー）。スマホでは見出しをタップして開くアコーディオン（js/motion.js）。 */
#services .official-service-card--innovation {
  display: flex;
  flex-direction: column;
  padding: 24px 36px;
  border-radius: 18px;
  background: rgba(8,47,126,.42);
  border: 0;
  box-shadow: none;
  color: inherit;
}

/* 「詳しく見る」はボタン（ゴースト・小）。カードの下端に左寄せで置く（2026-10-29 レビュー）。 */
#services .official-service-card--innovation > .btn {
  align-self: flex-start;
  margin-top: auto;
}

#services .official-service-card--innovation > .official-service-copy {
  margin-bottom: 22px;
}

@media (max-width: 760px) {
  #services .official-service-card--innovation .official-service-top {
    margin-bottom: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* 開閉の印：カードの右端（アイコンのさらに右）の ＋ が、開くと − になる。
     見出し → アイコン → 印 の順に左から並べる。 */
  #services .official-service-card--innovation {
    padding-inline: 24px 20px;
  }

  #services .official-service-card--innovation .official-service-top {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding-right: 0;
  }

  #services .official-service-card--innovation .official-service-heading {
    order: -1;
  }

  /* アイコンと印はカードの右端に寄せる。 */
  #services .official-service-card--innovation .official-service-icon {
    margin-left: auto;
  }

  #services .official-service-card--innovation .official-service-top::after {
    content: '+';
    width: 18px;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    opacity: .85;
  }

  #services .official-service-card--innovation.is-open .official-service-top::after {
    content: '−';
  }

  #services .official-service-card--innovation:not(.is-open) > .official-service-copy,
  #services .official-service-card--innovation:not(.is-open) > .btn {
    display: none;
  }

  #services .official-service-card--innovation.is-open > .official-service-copy {
    margin-top: 16px;
  }
}

/* =============================================================================
   Services の見出しの状態はちょうど 2 つ。それを決めるのはここだけで、他の場所では決めない。

   縦積み（1100px 未満、スマホ含む）：タイトル、次に全幅のヘッドライン、その下に全幅の
   補足コピー。ヘッドラインの手動改行（「〜コンサルティングで、」の後の <br>）は広い構成
   専用のもの——この幅では最初の節が 1 行に収まらず、強制改行すると「で、」だけが
   取り残されてしまう——ので、レイアウトと一緒に改行も切る。

   2 カラム（1100px 以上）：タイトルは単独の行、次にヘッドラインを左、補足コピーを右に置く。
   ヘッドラインのカラムは手動改行した長い方の行にぴったり寄せる（fit-content、上限 72%）。
   fr 単位のカラムだと、clamp で止まるテキストに対してワイド画面でカラムだけ広がり続けて
   しまうため。コピーは残りを取り、そのカラムは読みやすい行長（300px）を下回らない——
   この最小値が 1100px での切り替えを決めている：それより狭いと両方を置く余地がない。
   ============================================================================= */
@media (min-width: 761px) {
  #services > .wrap > .section-heading {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #services > .wrap > .section-heading > p {
    margin: 4.5vw 0 0;
  }
}

@media (max-width: 1099px) {
  #services .section-heading > p > br {
    display: none;
  }
}

@media (min-width: 1100px) {
  #services > .wrap > .section-heading > p {
    display: grid;
    grid-template-columns: fit-content(72%) minmax(300px, 1fr);
    column-gap: clamp(36px,3vw,68px);
    align-items: start;
  }

  #services > .wrap > .section-heading > p > span {
    margin-top: .35em;
    /* 超ワイド画面ではカラムが読みやすい行長を超えてしまう（1 行に全角 50 文字以上）。
       コピーは約 38 文字で上限を設け、そこで折り返す。約 1800px 未満ではカラムがもともと
       これより狭いので、何も変わらない。 */
    max-width: 38em;
  }
}

/* About のリードと同じ行送り。 */
#services .section-heading > p {
  line-height: 1.6;
}

/* "Our Projects / 支援事例" は "Business Innovation / 新規事業" と同じ組み方：欧文ラベルの下に
   日本語名、字間とウェイトも同じ（サイズは type.css から来る）。 */
.case-heading > span {
  letter-spacing: -.02em;
}

/* 意味を優先したガラス風イラストは、共通の枠に揃える。 */
#services .why-diagram { width:min(100%,150px); height:auto; aspect-ratio:3/2; }

/* 3 列横並び：各特徴ブロックは自分のカラム内で中央揃え。（421–760px の帯はアート左／
   テキスト右の横並びを保つので左揃えのまま。420px 以下では再び中央揃え。） */
@media (min-width:761px) {
  #services .why-grid article {
    text-align: center;
  }

  #services .why-diagram {
    margin-inline: auto;
  }
}
#services .why-diagram > img { display:block; width:100%; height:100%; object-fit:contain; }
/* タブレットの 3 列横並びではアートを小さくする必要がある。スマホの縦積みでは余裕があるので大きく。 */
@media (min-width:761px) and (max-width:900px) { #services .why-diagram { width: min(100%, 112px); } }
@media (max-width:760px) { #services .why-diagram { width: 130px; } }

/* Why Activarch: 線画のアイコン（静止）。寸法は .why-motion 付きのこの指定が最終 */
#services .why-diagram.why-motion { width: 180px; max-width:100%; aspect-ratio:3/2; }
.why-motion svg { stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.why-line-white { stroke:#fff; }
.why-line-cyan { stroke:#98e2fa; }
.why-line-orange { stroke:#ffad60; }
.why-muted { opacity:.42; }

/* スマホのコンサルティングの 6 枚も、説明を畳んだアコーディオンにする（説明が長いので。
   2026-10-29 実機レビュー）。見出し → アイコン → ＋/− の順に並び、カードをタップして開く
   （js/motion.js）。 */
@media (max-width: 760px) {
  #services .official-service-card:not(.official-service-card--innovation) {
    grid-template-columns: minmax(0, 1fr) 40px 18px;
    column-gap: 16px;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #services .official-service-card:not(.official-service-card--innovation)::after {
    content: '+';
    grid-row: 1;
    grid-column: 3;
    font-size: 24px;
    line-height: 1;
    text-align: center;
    opacity: .85;
  }

  #services .official-service-card:not(.official-service-card--innovation).is-open::after {
    content: '−';
  }

  /* 長い見出し（テクニカル／セキュリティコンサルティング）が 1 字だけ次の行に落ちないように。 */
  #services .official-service-card:not(.official-service-card--innovation) .official-service-heading h4 {
    font-size: min(var(--t-subhead), 4.9vw);
  }

  /* タップでフォーカスが乗ると PC のホバーのワイプ（::before）が出てしまうので、スマホでは出さない。 */
  #services .official-service-card:not(.official-service-card--innovation)::before {
    content: none;
  }

  #services .official-service-card:not(.official-service-card--innovation):is(:hover, :focus-within) .official-service-heading,
  #services .official-service-card:not(.official-service-card--innovation):is(:hover, :focus-within) .official-service-copy {
    transform: none;
    translate: none;
  }

  #services .official-service-card:not(.official-service-card--innovation) .official-service-copy,
  #services .official-service-card:not(.official-service-card--innovation) > .text-link {
    grid-column: 1 / -1;
  }

  #services .official-service-card:not(.official-service-card--innovation):not(.is-open) .official-service-copy,
  #services .official-service-card:not(.official-service-card--innovation):not(.is-open) > .text-link {
    display: none;
  }
}

/* スマホの Why Activarch：3 つの特徴を、アイコン左・テキスト右の 2 カラムにして全体を小さく
   まとめる（2026-10-29 実機レビュー。それまでは 420px 以下で中央揃えの縦積みだった）。 */
@media (max-width: 760px) {
  #services .why-grid {
    gap: 32px;
  }

  #services .why-grid article {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    text-align: left;
  }

  #services .why-grid article .why-diagram,
  #services .why-diagram.why-motion {
    grid-row: 1 / 4;
    width: 72px;
    margin: 4px 0 0;
  }

  #services .why-grid .title-feature {
    font-size: 15px;
    margin-bottom: 4px;
  }

  #services .why-grid h3 {
    font-size: var(--t-title);
    margin-bottom: 8px;
  }

  #services .why-grid p:not(.title-feature) {
    font-size: 14px;
    line-height: 1.8;
  }
}