@charset "utf-8";

/* ==========================================================================
   PR1MEPICK — レスポンシブ調整（タブレット / スマートフォン）
   PC の構図・装飾・アニメーションはそのまま残し、余白・文字サイズ・
   段組みだけを画面幅に合わせて詰める。読み込み順は必ず最後。
   ========================================================================== */

/* --------------------------------------------------- 1. 余白と縦リズム --- */

@media (max-width:1023px){
  :root{--gutter:32px}

  .section{padding:96px var(--gutter)}
  .section--tall{padding-bottom:112px}
  .page-hero{padding:88px var(--gutter) 112px}
  .panel{padding:88px 40px;border-radius:40px}
  .sec-head{margin-bottom:44px}
}

@media (max-width:639px){
  :root{--gutter:24px}

  .section{padding:72px var(--gutter)}
  .section--tall{padding-bottom:84px}
  .page-hero{padding:64px var(--gutter) 88px}
  .round-top{margin-top:-40px;border-radius:32px 32px 0 0}
  .sec-head{margin-bottom:36px}
  .page-hero__lead{margin-top:28px}
  .page-hero__glow{width:220px;height:220px;right:-70px;bottom:-70px}
}

@media (max-width:400px){
  :root{--gutter:20px}
}

/* --------------------------------------------- 2. ヘッダー / メニュー --- */

@media (max-width:639px){
  .site-header__inner{padding:16px var(--gutter)}
  :root{--header-h:69px}
  .logo img{height:30px}
  .logo__word{font-size:17px}
  .menu__primary a{line-height:1.7}
  .menu__cta{align-items:stretch}
  .menu__cta .btn{text-align:center}
}

/* ------------------------------------------- 3. TOP：ファーストビュー --- */
/* 1150px 以下でリングと弧を display:none にしていたためアニメーションが消えていた。
   縦を詰めるため、PC と同じく装飾を本文の背面に重ねる（本文は z-index:2 で常に前面）。
   高さは「本文＋装飾の余白」だけにして、余分な縦の帯を作らない。 */

@media (max-width:1150px){
  .hero{height:auto;min-height:0;padding-bottom:150px;overflow:hidden}
  .hero__inner{padding:64px var(--gutter) 0}
  .hero h1{max-width:100%}
  .hero__en{max-width:100%;color:#3A3A3A}

  .hero__circle{
    display:block;
    right:-120px;top:8%;bottom:auto;
    width:340px;height:340px;border-width:78px;
  }
  .hero__arc{display:block;right:-40px;top:0;bottom:0;height:100%;width:min(40%,300px)}
  .hero__sweep{top:auto;bottom:0;height:52%}
  .hero__scroll{left:auto;right:var(--gutter);bottom:20px}
  .hero__scroll .bar{height:40px}
}

@media (max-width:767px){
  .hero{padding-bottom:92px}
  .hero__inner{padding:44px var(--gutter) 0}
  .hero h1{font-size:min(7.1vw,2.5rem);line-height:1.4}
  .hero__en{margin-top:20px;font-size:13px;line-height:1.8}
  .hero__en p + p{margin-top:4px}
  .hero__circle{right:-78px;top:7%;width:212px;height:212px;border-width:48px}
  .hero__arc{right:-34px;width:min(54%,200px)}
  .hero__sweep{height:44%}
  .hero__scroll{right:14px;bottom:14px;gap:6px}
  .hero__scroll .bar{height:28px}
}

@media (max-width:400px){
  .hero{padding-bottom:82px}
  .hero__circle{right:-72px;width:190px;height:190px;border-width:44px}
  .hero__arc{right:-30px;width:min(54%,180px)}
}

/* ------------------------------------------------ 4. TOP：各セクション --- */
/* 横方向のパディング（--gutter）は触らず、縦方向だけ詰める。 */

@media (max-width:1023px){
  .pickup{padding-top:96px;padding-bottom:104px}
  .statement{padding-top:104px;padding-bottom:112px}
  .service{padding-top:96px;padding-bottom:104px}
  .strengths{padding-top:96px;padding-bottom:96px}
  .members{padding-top:96px;padding-bottom:104px}
  .news{padding-top:96px;padding-bottom:104px}
  .recruit{padding-bottom:104px}
  .service__mock{margin-top:40px}
}

@media (max-width:767px){
  /* Strengths：巨大な連番が画面外にはみ出していた */
  .str-grid{gap:32px 0}
  .str{padding:0}
  .str__no{left:0;top:-10px;font-size:66px}
  .str--low{padding-top:0}
  .str--low .str__no{top:-10px}
  .str__dot,
  .str--low .str__dot{margin-top:30px}
  .str__desc{padding-right:0}
  .strengths__lede{margin-bottom:40px}

  /* Service：番号と矢印の固定幅で本文がつぶれていた */
  .svc-row__inner{grid-template-columns:34px 1fr 20px;gap:12px;padding:28px 0 30px}
  .svc-row__no{font-size:12px;letter-spacing:.1em}
  .svc-row__arrow{font-size:20px}
  .svc-row__name{font-size:1.25rem}
}

@media (max-width:639px){
  .pickup{padding-top:72px;padding-bottom:80px}
  .statement{padding-top:80px;padding-bottom:88px}
  .service{padding-top:72px;padding-bottom:80px}
  .strengths{padding-top:72px;padding-bottom:72px}
  .members{padding-top:72px;padding-bottom:80px}
  .news{padding-top:72px;padding-bottom:80px}
  .recruit{padding-bottom:80px}
  .marquee{padding:16px 0}
  .marquee__track{gap:40px;font-size:20px}
  .section-lede{flex-direction:column;align-items:flex-start;gap:16px}
  .rule{margin:24px 0 32px}
  .statement h2{line-height:1.9}
}

/* ------------------------------------------------------- 5. 下層ページ --- */

@media (max-width:639px){
  /* 実績モーダルの仕様表：値の列が潰れていた */
  .wcard__spec > div{grid-template-columns:1fr;gap:4px;padding:14px 0}

  .mode-grid{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .route-grid{grid-template-columns:1fr}
  .field-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:32px}
  .rc-photos{grid-template-columns:1fr;margin-top:40px}
  .price-row{grid-template-columns:1fr;gap:6px}
  .office{padding:28px 24px}
  .support{padding:32px 24px}
  .route{padding:32px 24px}
  .faq__item{padding:24px 0}
  .wcard__detail-inner{padding:32px 20px 40px}
  .mcard__detail-inner{padding:36px 20px 36px}
  .cm-close{margin:12px 12px 0 0}
}

/* ---------------------------------------------- 6. PR1ME AI CAMPS --- */
/* 原本の data 属性ベースの指定を補い、狭い画面で 2 段組が潰れないようにする。 */

@media (max-width:639px){
  #main [data-split],
  #main [data-grid-2col],
  #main [data-herogrid],
  #main [data-viz],
  #main [data-spec]{grid-template-columns:1fr !important}
  .aic-promo,
  .works-cta{text-align:left}
}

/* ------------------------------------------------------ 7. フォーム --- */

@media (max-width:639px){
  .form__row{margin-bottom:24px}
  .choice{padding:10px 16px;font-size:14px}
  .submit{width:100%}
}

/* ------------------------------------- 8. 極小幅（320px 前後）への保険 --- */
/* auto-fit の minmax() は最小値が画面より広いとはみ出す。min() で頭打ちにする。 */

.cta-duo{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.task-grid{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.dl-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.check-grid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.curriculum{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.issue-grid,
.person-grid,
.tile-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.issue-grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}

/* 長い見出しが折り返せずにはみ出すのを防ぐ */
.other-item__name,
.svc-row__name,
.mcard__name,
.wcard__title{overflow-wrap:anywhere}

/* --------------------------------------------- 9. CTA / フッター / 細部 --- */

@media (max-width:1023px){
  .cta-duo__item{padding:80px 48px}
  .site-footer{padding-top:80px}
}

@media (max-width:639px){
  .cta-duo__item{padding:56px var(--gutter)}
  .cta-duo__item h2{font-size:clamp(2rem,9vw,3rem)}
  .cta-duo__ja{margin-bottom:20px}
  .cta-duo__lead{margin-bottom:28px}
  .cta-duo__arrow{width:48px;height:48px}
  .site-footer{padding-top:64px}
  .site-footer__grid{gap:40px}
}

@media (max-width:400px){
  .cta-duo__item h2{font-size:2.25rem}
  .other-item__name,
  .svc-item__name{font-size:1.125rem}
}

/* 電話番号・住所など、和文の禁則で折り返せない行の保険 */
.site-footer__tel p,
.site-footer__address p,
.office__address{overflow-wrap:anywhere}

/* タブレットのフッターは2列。ブランド列が狭すぎて電話番号が折り返せなかった */
@media (max-width:1023px){
  .site-footer__grid{grid-template-columns:1.45fr 1fr}
}

/* ------------------------------------ 10. スマホの縦の長さを詰める --- */
/* 1画面あたりの情報量を上げ、スクロール量を減らすための圧縮。 */

@media (max-width:767px){
  /* PickUp / 実績カード */
  .card-grid{gap:20px;padding-bottom:24px}
  .wcard{border-radius:16px}
  .wcard__media{aspect-ratio:16 / 9}
  .wcard__body{padding:16px 18px 18px;gap:10px}
  .wcard__title{font-size:17px;line-height:1.5}
  .wcard__lead{font-size:13px;line-height:1.7}
  .wcard__tag{padding:4px 12px;font-size:12px}

  /* Statement */
  .statement h2{font-size:1.125rem;line-height:1.85;margin-bottom:24px}
  .statement p.body{font-size:14.5px;line-height:1.85}
  .statement p.body:last-of-type{margin-bottom:32px}
  .statement__ja{margin:12px 0 28px}

  /* Strengths */
  .str-grid{gap:22px 0}
  .strengths__headline{margin-bottom:14px}
  .strengths__lede{margin-bottom:32px;font-size:14.5px;line-height:1.85}
  .str__no{font-size:58px}
  .str__dot,
  .str--low .str__dot{margin-top:26px}
  .str{gap:12px}
  .str__desc{font-size:12.5px;line-height:1.8}

  /* Service */
  .svc-row__inner{padding:22px 0 24px;gap:10px}
  .svc-row__main{gap:8px}
  .svc-row__desc{font-size:13px;line-height:1.75}
  .svc-row__tags{gap:6px;margin-top:2px}
  .svc-row__tags span{padding:4px 10px;font-size:11px}
  .service__mock{margin-top:28px}
  .service__aside .lede{margin-bottom:28px;font-size:14px;line-height:1.85}
  .service__aside .ja{margin:14px 0 22px}
  .service__wrap{gap:36px}

  /* News */
  .news-entry,
  .news-row{padding-top:16px;padding-bottom:16px}

  /* Recruit */
  .recruit__card{padding:56px 24px;border-radius:28px}
  .recruit__lede{margin-bottom:32px;font-size:14.5px;line-height:1.85}

  /* Members */
  .members__cta{margin-top:32px}

  /* フッター：リンクを2列にして縦を半分に */
  .site-footer{padding-top:56px;padding-bottom:32px}
  .site-footer__grid{gap:32px}
  /* メニューはラベルが短いので2列。事業一覧は名称が長いので1列のまま。 */
  .site-footer__links{font-size:14px}
  .site-footer__links[aria-label="フッターメニュー"]{
    display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;
  }
  .site-footer__label{margin-bottom:16px}
  .site-footer__tagline{margin:14px 0 24px;font-size:14px}
  .site-footer__tel{margin-top:20px}
  .site-footer__bottom{margin-top:36px;padding-top:20px}
  .footer-brand img{height:36px}
  .footer-brand__word{font-size:19px}
}

/* -------------------------------- 11. TOP の PickUp は横スワイプに --- */
/* 3枚を縦に積むと画面 3 つ分になるため、スマホでは横スクロール（スナップ付き）
   に切り替えて 1 枚分の高さに収める。実績一覧ページ（works）は従来どおり縦積み。 */

@media (max-width:767px){
  .pickup .card-grid{
    display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    padding:0 var(--gutter) 18px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .pickup .card-grid::-webkit-scrollbar{display:none}
  .pickup .card-grid > .wcard{
    flex:0 0 82%;scroll-snap-align:start;
  }
  .pickup .card-grid > .wcard:last-child{margin-right:var(--gutter)}
  .pickup__head .section-lede{margin-bottom:12px}
}

/* -------------------- 12. TOP Service のモックアップ画像（白背景対策） --- */
/* 素材が白背景のため、黄色いグラデーションの上に置くと白い四角が浮いて見える。
   乗算合成にすると白が背景に溶け、機器の影もそのまま自然に馴染む。
   （1024px 以上は .service__aside が position:sticky で合成が分離されるため、
     デザイン原本どおりそのまま。その幅では背景がほぼ白で目立たない） */

@media (max-width:1023px){
  .service__wrap{z-index:auto}
  .service__mock{z-index:auto;mix-blend-mode:multiply}
  .service__mock img{width:100%;max-width:460px}
}

@media (max-width:767px){
  /* スマホでは Service セクションの黄色いグラデーション（blob）自体を外す。
     背景が白になるので、モックアップの白背景も自然に消える。 */
  .service > span.blob:first-of-type{display:none}
  .service__mock{margin-top:24px}
  .service__mock img{max-width:100%}
}

/* ------------------------- 13. スマホの文字サイズを一段下げる（TOP） --- */
/* PC の値がそのまま効いていて、スマホでは見出しが大きく「文字が多い」印象に
   なっていたため、表示スケールを一段小さくして余白を効かせる。 */

@media (max-width:767px){
  /* 背景の巨大なゴースト文字（PickUp / Service / Members …）*/
  .deco-word{font-size:clamp(3rem,13vw,5rem)}

  /* ファーストビュー */
  .hero h1{font-size:min(6.4vw,2.5rem)}

  /* マーキー */
  .marquee__track{font-size:17px;gap:36px}

  /* セクション見出し（英字の大見出し）*/
  .pickup h2,
  .members h2,
  .news h2,
  .service__aside h2,
  .section-lede h2{font-size:1.875rem;line-height:1.15}
  .strengths .sec-head h2{font-size:1.625rem}
  .recruit h2{font-size:1.5rem;line-height:1.5}
  .cta-duo__item h2{font-size:1.75rem}

  /* 小見出し・ラベル */
  .section-lede__ja,
  .cta-duo__ja,
  .statement__ja{font-size:13px}
  .strengths__headline{font-size:1.1875rem;line-height:1.6}
  .statement h2{font-size:1rem;line-height:1.9}
  .svc-row__name{font-size:1.0625rem}
  .str__title{font-size:15px}
  .wcard__title{font-size:16px}

  /* 本文 */
  .strengths__lede,
  .statement p.body,
  .recruit__lede,
  .service__aside .lede,
  .cta-duo__lead,
  .members__lede{font-size:13.5px;line-height:1.85}
  .news-row{font-size:14px}
  .site-footer__tagline{font-size:13px}
  .site-footer__address,
  .site-footer__tel{font-size:13px}

  /* ボタン */
  .pill-link__label{padding:12px 22px;font-size:14px}
  .pill-link__arrow{width:40px;height:40px}
  .text-link{font-size:14px}
}

/* ------------------- 14. CTA（資料ダウンロード / お問い合わせ）を左右2枚に --- */
/* スマホでも PC と同じ「左右セパレート」の見え方にする。
   1カラム幅が狭くなるぶん、見出し・本文・矢印を縮めて収める。 */

@media (max-width:767px){
  .cta-duo{grid-template-columns:1fr 1fr}
  .cta-duo__item{padding:36px 18px 30px}
  .cta-duo__item h2{font-size:clamp(1.0625rem,5.4vw,1.75rem);line-height:1.1}
  .cta-duo__ja{margin:8px 0 14px;font-size:12px}
  .cta-duo__lead{margin-bottom:20px;font-size:12.5px;line-height:1.8}
  .cta-duo__arrow{width:40px;height:40px;font-size:16px}
}

@media (max-width:400px){
  .cta-duo__item{padding:30px 14px 26px}
  .cta-duo__lead{font-size:12px;line-height:1.75}
}

/* フッター：狭い画面ではブランド／メニュー／事業の3ブロックを縦積みに戻す。
   （タブレット用の 1.45fr 1fr が 639px 以下にも効いてしまい、2列のまま
     はみ出していた）リンク名は途中で折り返さない。 */
@media (max-width:639px){
  .site-footer__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .site-footer__links[aria-label="フッターメニュー"] a{white-space:nowrap}
}

/* ---------------------------- 15. TOP 採用情報のボリュームを抑える --- */

@media (max-width:767px){
  .recruit{padding-bottom:48px}
  .recruit__card{padding:36px 22px;border-radius:24px}
  .recruit .badge{padding:7px 18px;font-size:11px}
  .recruit__ja{margin:10px 0 20px}
  .recruit h2{margin-bottom:18px;font-size:1.3125rem;line-height:1.45}
  .recruit__lede{margin-bottom:22px;line-height:1.75}
}

@media (max-width:400px){
  .recruit__card{padding:32px 18px}
  .recruit h2{font-size:1.25rem}
}

/* -------------------- 16. TOP Service / Strengths の縦を詰める --- */

@media (max-width:767px){
  /* --- Service --- */
  /* タグは3行に折り返して1行あたり約90pxを占めていた。
     横スクロール1行に変えて内容は残したまま高さを 1/3 に。 */
  .svc-row__tags{
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  .svc-row__tags::-webkit-scrollbar{display:none}
  /* 右端をフェードさせて「まだ続く」ことを示す */
  .svc-row__tags{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
  .svc-row__tags span{flex:0 0 auto}

  .svc-row__inner{padding:16px 0 18px}
  .svc-row__main{gap:6px}
  .svc-row__desc{line-height:1.7}
  .service__mock img{max-width:290px}
  .service__aside .lede{margin-bottom:22px}
  .service__aside .ja{margin:12px 0 18px}

  /* --- Strengths --- */
  .strengths .sec-head{margin-bottom:24px}
  .strengths__headline{margin-bottom:12px}
  .strengths__lede{margin-bottom:22px;line-height:1.75}
  .str-grid{gap:16px 0}
  .str{gap:8px}
  .str__no{font-size:46px;top:-8px}
  .str--low .str__no{top:-8px}
  .str__dot,
  .str--low .str__dot{margin-top:14px}
  .str__title{margin-top:8px}
  .str__desc{line-height:1.7}
}

/* --------------- 17. TOP メンバー集合写真の白背景を背景に馴染ませる --- */
/* 素材が白背景のため、セクションの青い（ターコイズ）グラデーションの上で
   白い長方形の境界がくっきり出てしまう。スマホ・タブレットでは乗算合成にして、
   白い部分も背景のグラデーションを拾うようにする。PC（1024px 以上）は変更なし。 */

@media (max-width:1023px){
  .members__inner{z-index:auto}
  .members__strip{mix-blend-mode:multiply}
}

/* ------- 18. PickUp / 理念のグラデーションをアクセント程度に抑える --- */
/* blob は px 固定サイズ（620px 等）のため、390px 幅では画面全体を覆って
   文字の上にまで色がかかっていた。スマホでは縮小＋端寄せ＋減光して、
   四隅のアクセントとして効く程度にする。PC・タブレットは変更なし。 */

@media (max-width:767px){
  /* PickUp：右上の黄色 ＋ 左下のオレンジ */
  .pickup span.blob:nth-of-type(1){
    --r:-90px !important;--t:-70px !important;
    width:300px;height:300px;opacity:.32;
  }
  .pickup span.blob:nth-of-type(2){
    --l:-110px !important;--b:20px !important;
    width:260px;height:260px;opacity:.24;
  }

  /* 理念（Statement）：右上・左中・右下の3点 */
  .statement span.blob:nth-of-type(1){
    --r:-100px !important;--t:-80px !important;
    width:280px;height:280px;opacity:.28;
  }
  .statement span.blob:nth-of-type(2){
    --l:-140px !important;--t:40px !important;
    width:320px;height:320px;opacity:.24;
  }
  .statement span.blob:nth-of-type(3){
    --r:-120px !important;--b:-20px !important;
    width:300px;height:300px;opacity:.18;
  }
}

/* ==========================================================================
   19. 下層ページ（TOP 以外）の見直し
   TOP で行った調整（文字スケール／余白／背景グラデーションの抑制）を
   下層15ページにも適用する。デザイン原本から移植したインラインの
   padding・font-size は !important で上書きしている。
   ========================================================================== */

/* ---------------------------------------- 19-1 見出し・本文のスケール --- */

@media (max-width:1023px){
  .page-hero h1{font-size:clamp(2.5rem,7vw,4.5rem)}
}

@media (max-width:767px){
  .page-hero h1{font-size:clamp(2rem,9.4vw,2.75rem)}
  .page-hero__ja{margin-top:18px;font-size:13px}
  .page-hero__lead{margin-top:22px;font-size:14px;line-height:1.85}
  .page-hero__lead .en{font-size:13px}

  .sec-head h2{font-size:1.625rem}
  .sec-head p{font-size:13px}

  .prose p{font-size:14px;line-height:1.85}
  .grid-2col h2{font-size:1.1875rem;line-height:1.6}
  .spec dt,
  .spec dd{font-size:14px}
  .office__address,
  .office__stations{font-size:13.5px}
  .chip{padding:6px 16px;font-size:13px}
}

@media (max-width:400px){
  .page-hero h1{font-size:clamp(1.875rem,9.4vw,2.5rem)}
}

/* ------------------- 19-2 セクション余白（原本のインライン指定を上書き） --- */

@media (max-width:1023px){
  #main [style*="padding:120px 48px"],
  #main [style*="padding:130px 48px"],
  #main [style*="padding:110px 48px"],
  #main [style*="padding:60px 48px"]{
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important;
    padding-top:88px !important;
    padding-bottom:88px !important;
  }
  #main [style*="padding:0 24px 120px"]{
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important;
    padding-bottom:88px !important;
  }
  #main [style*="padding:100px 64px"]{padding:72px 32px !important}
}

@media (max-width:767px){
  #main [style*="padding:120px 48px"],
  #main [style*="padding:130px 48px"],
  #main [style*="padding:110px 48px"],
  #main [style*="padding:60px 48px"]{
    padding-top:64px !important;
    padding-bottom:64px !important;
  }
  #main [style*="padding:0 24px 120px"]{padding-bottom:64px !important}
  #main [style*="padding:100px 64px"]{padding:52px 22px !important}
}

/* --------------------------------------------- 19-3 カードの内側余白 --- */

@media (max-width:767px){
  #main [style*="padding:44px 40px"]{padding:26px 20px !important}
  #main [style*="padding:36px 32px"]{padding:24px 20px !important}
  #main [style*="padding:36px 28px"]{padding:24px 20px !important}
  #main [style*="padding:32px 28px"]{padding:22px 18px !important}
  #main [style*="padding:32px 26px"]{padding:22px 18px !important}
  #main [style*="padding:28px 26px"]{padding:20px 16px !important}
}

/* ------------------------------- 19-4 原本インラインの文字サイズ --- */

@media (max-width:767px){
  #main [style*="clamp(2rem,3.6vw,3rem)"],
  #main [style*="clamp(2rem,3.4vw,2.75rem)"],
  #main [style*="clamp(2rem,4vw,3.25rem)"],
  #main [style*="clamp(1.75rem,4vw,3.25rem)"]{font-size:1.625rem !important}

  #main [style*="clamp(1.5rem,3vw,2.5rem)"]{font-size:1.375rem !important}

  #main [style*="clamp(1.375rem,2.4vw,2rem)"],
  #main [style*="clamp(1.375rem,2.6vw,2.125rem)"],
  #main [style*="clamp(1.25rem,2vw,1.625rem)"]{font-size:1.1875rem !important}

  #main [style*="font-size:16px"]{font-size:14px !important}
  #main [style*="font-size:15px"]{font-size:13.5px !important}
}

/* --------------------- 19-5 背景グラデーションをアクセント程度に --- */
/* px 固定サイズのため、スマホでは画面全体を覆って本文に色がかかっていた。 */

@media (max-width:767px){
  .blob{
    width:calc(var(--size) * .72);
    height:calc(var(--size) * .72);
    opacity:calc(var(--op, .4) * .5);
  }
  #main [aria-hidden="true"][style*="radial-gradient"]{opacity:.18 !important}
}

/* 320px 幅で折り返せずはみ出す長い項目名の保険 */
@media (max-width:400px){
  .task,
  .issue__title,
  .check-grid li,
  .flow__title{overflow-wrap:anywhere}
}

/* ==========================================================================
   20. 下層ページのスマホ表示を TOP のトンマナに合わせる
   TOP のスマホ基準：大見出し 26〜30 / 中見出し 15〜17 / 本文 13〜13.5 /
   注釈 12〜12.5 / 行間 1.7〜1.85。下層ページも同じ階段に揃える。
   ========================================================================== */

@media (max-width:767px){

  /* ---------------------------------------------- 大見出し --- */
  .page-hero h1{font-size:clamp(1.75rem,7.2vw,2.25rem);line-height:1.05}
  .svc-hero__grid h1{font-size:clamp(1.5rem,6.4vw,2rem) !important;line-height:1.4}
  .sec-head h2{font-size:1.625rem}
  .statement-block h2,
  .rule-head h2,
  .svc-intro__head,
  .rc-close{font-size:1.25rem !important;line-height:1.6}
  .plan-lede-a,
  .aic-lead{font-size:1.0625rem !important;line-height:1.7}

  /* ------------------------------------------ 大きな連番・数値 --- */
  .vcard__no,
  .strength__no,
  .flow__no,
  .sup__no{font-size:22px}
  .svc-item__num{font-size:52px}
  .viz__op{font-size:18px}
  .onestop__no{font-size:16px}
  .stat__value{font-size:1.625rem !important}

  /* ---------------------------------------------- 中見出し --- */
  .strength__title,
  .works-cta__title,
  .other-item__name,
  .svc-item__name,
  .svc-banner__name,
  .aic-promo__name,
  .vcard__title,
  .value__name,
  .mode__title,
  .onestop__title,
  .tile--tool h3,
  .step h3,
  .cur h3,
  .sup__title,
  .dl-card__title,
  .mcard__name,
  .thanks__title,
  .sim__total,
  .price-row dd{font-size:16px !important;line-height:1.5}

  .faq__q,
  .issue__text,
  .flow__title,
  .office__name,
  .tile h3,
  .viz__name,
  .policy-item h2,
  .value-grid--3 .value__name{font-size:14.5px !important;line-height:1.65}

  /* -------------------------------------------------- 本文 --- */
  .company-info__eyebrow,
  .field-foot p,
  .message__body p,
  .svc-intro__lede,
  .svc-hero__lead,
  .check,
  .plan-lede-b,
  .plan-note,
  .aic-body,
  .eyebrow-dot,
  .stat__label,
  .sim__name,
  .pill-link--primary .pill-link__label{font-size:13.5px;line-height:1.8}

  .spec__row dt,
  .spec__row dd,
  .office__address,
  .message__name,
  .svc-banner__desc,
  .vcard__desc,
  .task,
  .strength__body p,
  .strength__metric,
  .flow__desc,
  .aic-promo__desc,
  .faq__a,
  .works-cta__desc,
  .dl-card__desc,
  .policy-item p,
  .thanks__note,
  .price-row dt{font-size:13px;line-height:1.8}

  .office__stations li,
  .value__desc,
  .svc-item__desc,
  .plan__desc,
  .plan__list span,
  .mode__desc,
  .onestop__desc,
  .other-item__desc,
  .tile p,
  .step p,
  .sup__body p,
  .comp-table,
  .cur li,
  .svc-item__badge{font-size:12.5px;line-height:1.75}

  /* ------------------------------------------------ 余白 --- */
  .sec-head{margin-bottom:28px}
  .vcard{padding:22px 18px}
  .issue{padding:22px 18px}
  .flow{gap:6px}
  .faq__item{padding:20px 0}
  .spec__row{padding:14px 0}
  .strength{gap:14px 16px}
  .plan{padding:26px 20px}
  .mode{padding:26px 20px}
  .dl-card{padding:24px 20px}
  .route{padding:26px 20px}
  .support{padding:26px 20px}
  .office{padding:24px 20px}

  /* -------------------- 原本インライン（AI CAMPS / 各事業）--- */
  #main [style*="font-size:30px"]{font-size:22px !important}
  #main [style*="font-size:22px"]{font-size:17px !important}
  #main [style*="font-size:20px"]{font-size:16px !important}
  #main [style*="font-size:18px"]{font-size:15px !important}
  #main [style*="font-size:17px"]{font-size:14.5px !important}
  #main [style*="font-size:16px"]{font-size:13.5px !important}
  #main [style*="font-size:15px"]{font-size:13px !important}
  #main [style*="font-size:14px"]{font-size:12.5px !important}
}

@media (max-width:400px){
  .page-hero h1{font-size:clamp(1.625rem,7.2vw,2rem)}
}

/* 強み（黄色パネル）の本文幅が狭すぎたので、番号列と余白を詰める */
@media (max-width:767px){
  .panel{padding:52px 20px;border-radius:28px}
  .strength{grid-template-columns:34px 1fr;gap:10px 12px}
  .strength__no{font-size:20px;line-height:1.2}
}

/* ==========================================================================
   21. 下層ページの「大きすぎる／縦に伸びる」パーツを整える
   ========================================================================== */

/* --------- 21-1 理念 Field の関係図：円から文字がはみ出す＋縦積み --- */
/* 900px 以下で 1 カラム＋justify-items:center にしていたため、円が文字幅まで
   縮んで中身がはみ出していた。横 3 つ並びに戻し、英字と補足は円の外に置く。 */

@media (max-width:900px){
  .viz{
    grid-template-columns:1fr auto 1fr auto 1fr;
    justify-items:stretch;align-items:start;gap:6px;
  }
  .viz__op{font-size:14px;align-self:center;margin-top:24px}
  .viz__cell{position:relative;padding:16px 0 32px}
  .viz__circle{
    position:relative;overflow:visible;
    width:100%;max-width:none;gap:0;padding:8px;
  }
  .viz__en{
    position:absolute;top:-15px;left:50%;transform:translateX(-50%);
    font-size:10px;letter-spacing:.05em;white-space:nowrap;
  }
  .viz__name{font-size:12px;line-height:1.35;text-align:center}
  .viz__sub{
    position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
    width:118%;font-size:10px;line-height:1.4;text-align:center;
  }
  .field-foot{margin-top:44px}
  .field-foot p{margin-top:28px}
}

/* ------------------- 21-2 理念 Value（黄色パネル）を 2 列に --- */

@media (max-width:767px){
  .value-grid,
  .value-grid--3{grid-template-columns:1fr 1fr;gap:26px 12px;margin-top:28px}
  .value{padding:0 4px}
  .value__no{margin-bottom:8px;font-size:11px}
  .value__name{margin-bottom:8px;font-size:13.5px !important;line-height:1.5}
  .value__desc{font-size:11.5px !important;line-height:1.7}
  .value__desc br{display:none}
  .value__x{display:none}
}

/* ------------- 21-3 各事業 Issues の円を 2 列に（1 列だと巨大） --- */

@media (max-width:767px){
  .issue-grid,
  .issue-grid--wide{grid-template-columns:1fr 1fr;gap:12px}
  .issue{padding:14px 12px;gap:5px}
  .issue__no{font-size:11px}
  .issue__text{font-size:12px !important;line-height:1.5}
}

/* ------------------- 21-4 各事業ページのファーストビューを短く --- */

@media (max-width:767px){
  .svc-hero{padding-top:48px;padding-bottom:52px}
  .svc-hero__grid{gap:14px}
  .svc-hero__grid h1{margin-bottom:16px}
  .svc-hero__lead{margin-bottom:22px}
  .blob-figure{max-width:190px;justify-self:end;margin-right:-6px}
  .btn-row{gap:10px}
  .btn-row .btn{padding:11px 16px;font-size:13px}
  .btn-row .pill-link__label{padding:11px 16px;font-size:13px}
  .btn-row .pill-link__arrow{width:36px;height:36px;font-size:14px}
  .btn-row .pill-link{gap:8px}
}

/* ------------- 21-5 1列で縦に伸びていたカード群を2列に／余白を圧縮 --- */

@media (max-width:767px){
  /* 実績・メンバーのカード（TOP の PickUp は横スワイプなので対象外） */
  .card-grid{grid-template-columns:1fr 1fr;gap:12px}
  .wcard{border-radius:14px}
  .wcard__body{padding:12px 12px 14px;gap:7px}
  .wcard__title{font-size:14px !important;line-height:1.5}
  .wcard__lead{font-size:11.5px;line-height:1.6}
  .wcard__tag{padding:3px 10px;font-size:10.5px}
  .wcard__more{font-size:11px;gap:6px}
  .wcard__more i{width:18px;height:18px;font-size:10px}

  .mcard{padding:16px 14px 14px;border-radius:18px}
  .mcard__name{font-size:14px !important}
  .mcard__role{font-size:11px}
  .mcard__banner span{font-size:10.5px}

  /* 採用ページのカード群 */
  .person-grid{grid-template-columns:1fr 1fr;gap:16px}
  .field-grid{gap:14px}
  .field{padding:22px 18px;gap:10px;border-radius:40px 16px 40px 16px}
  .field:nth-child(2),
  .field:nth-child(3){border-radius:16px 40px 16px 40px}
  .field__name{font-size:15px !important;line-height:1.5}
  .field__desc{font-size:12.5px !important;line-height:1.75}
  .route-grid,
  .support-grid{gap:14px}
  .route{padding:22px 18px;gap:14px}
  .support{padding:22px 18px}

  /* 各事業ページのプラン */
  .plan-grid{gap:14px}
  .plan{padding:22px 18px}
}

/* メンバーカードの「プロフィールを見る」を1行に収める */
@media (max-width:767px){
  .mcard__more{font-size:11px;gap:6px;white-space:nowrap}
  .mcard__more i{width:18px;height:18px;font-size:11px;flex:none}
}

/* 実績カードのタグを1行に収める */
@media (max-width:767px){
  .wcard__tag{padding:3px 9px;font-size:10px;white-space:nowrap}
}

/* 資料ダウンロード：スマホの調整 */
@media (max-width:767px){
  .dl-card{padding:24px 20px;gap:12px}
  .dl-card__title{font-size:16px !important;line-height:1.55}
  .dl-card__desc{font-size:13px;line-height:1.8}
  .dl-card__meta{font-size:11.5px}
  .thanks__dl{margin-top:20px}
}