/* ===========================================
   SERVICE PAGE - レスポンシブCSS
   =========================================== */

/* --- タブレット / スマートフォン --- */
@media (max-width: 768px) {

  /* ページヒーロー */
  .page-hero {
    min-height: 55vh;
    padding: 0 1.5rem 3rem;
  }

  /* セクション共通 */
  .sec,
  .sec-dark {
    padding: 5rem 1.5rem;
  }

  /* OVERVIEW: 1カラム化 */
  .overview-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* SERVICE CARDS: 1カラム化 */
  .service-list {
    grid-template-columns: 1fr;
  }

  /* WORKFLOW: 1カラム化 + 罫線方向変更 */
  .workflow {
    grid-template-columns: 1fr;
  }
  .workflow-step {
    border-right: none;
    border-bottom: 1px solid rgba(10,10,10,0.1);
  }
  .workflow-step:last-child {
    border-bottom: none;
  }
  .workflow-arrow {
    display: none;
  }

  /* GALLERY: 1カラム化 + モバイルではカラー表示 */
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-item img {
    filter: grayscale(0) brightness(1) contrast(1);
  }

  /* NAV BAND */
  .nav-band {
    padding: 1.2rem 1.5rem;
  }

  /* CTA BAND */
  .cta-band {
    padding: 4rem 1.5rem;
  }
}


/* --- スマートフォン（小型） --- */
@media (max-width: 480px) {

  /* ベースフォントサイズ微調整 */
  body {
    font-size: 17px;
  }

  /* OVERVIEW テキスト */
  .overview-lead {
    font-size: 1.05rem;
  }

  /* 実績数値カード: 1カラム化 */
  .overview-stats {
    grid-template-columns: 1fr;
  }

  /* SERVICE CARD: パディング調整 */
  .service-card {
    padding: 2rem 1.5rem;
  }
  .service-card p,
  .service-card ul li,
  .workflow-step p {
    font-size: 0.95rem;
  }

  /* h2 */
  .sec-body h2 {
    font-size: 1.55rem;
    line-height: 1.35;
  }
}

/* ===========================================
   追記分 ─ service-page-responsive.css 末尾に追加してください
   =========================================== */


/* --- タブレット / スマートフォン --- */
@media (max-width: 768px) {

  /* SEC-ACCENT: パディング縮小 */
  .sec-accent {
    padding: 5rem 1.5rem;
  }

  /* STRENGTH CARDS: そのまま（元々1カラム縦並びなので変更不要） */

  /* EVENT SHOWCASE: 1カラム化 */
  .event-showcase {
    grid-template-columns: 1fr;
  }
  /* モバイルではカラー表示（タッチ端末でhoverが効かないため） */
  .event-card-image img {
    filter: grayscale(0) brightness(1) contrast(1);
  }

  /* OPERATION GRID: 1カラム化 */
  .operation-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .operation-item {
    padding: 1.5rem 0;
  }
}


/* --- スマートフォン（小型） --- */
@media (max-width: 480px) {

  /* STRENGTH CARD: テキスト微調整 */
  .strength-card p {
    font-size: 0.9rem;
  }

  /* EVENT CARD: パディング縮小 */
  .event-card-body {
    padding: 1.4rem 1.2rem;
  }
  .event-card-title {
    font-size: 1.5rem;
  }
  .event-card-body p {
    font-size: 0.88rem;
  }

  /* OPERATION GRID: テキスト微調整 */
  .operation-item p {
    font-size: 0.9rem;
  }
}

/* ===========================================
   追記分（003 SYSTEM） ─ service-page-responsive.css 末尾に追加
   前回 002 で追記した sec-accent / event-showcase /
   operation-grid の後に続けてください
   =========================================== */


/* --- タブレット / スマートフォン --- */
@media (max-width: 768px) {

  /* PRINCIPLE LIST: 番号セルを非表示にして1カラム化 */
  .principle-item {
    grid-template-columns: 1fr;
  }
  .principle-item-num {
    border-right: none;
    border-bottom: 1px solid rgba(10, 10, 10, 0.1);
    padding: 0.8rem 1.5rem;
    justify-content: flex-start;
  }
  .sec-dark .principle-item-num {
    border-bottom-color: rgba(245, 245, 240, 0.1);
  }

  /* SERVICE LIST 3カラム → 1カラム化 */
  .service-list.service-list--cols {
    grid-template-columns: 1fr;
  }
  .service-list--cols .service-card {
    border-right: none;
    border-bottom: 1px solid rgba(245, 245, 240, 0.1);
  }
  .service-list--cols .service-card:last-child {
    border-bottom: none;
  }

  /* TECH STACK: 2カラム化 */
  .stack-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* CASE STUDY: 1カラム化 */
  .case-grid {
    grid-template-columns: 1fr;
  }

  /* WORKFLOW 暗背景: 矢印非表示（縦並びになるため） */
  .sec-dark .workflow-step {
    border-right: none;
    border-bottom: 1px solid rgba(245, 245, 240, 0.1);
  }
  .sec-dark .workflow-step:last-child {
    border-bottom: none;
  }
}


/* --- スマートフォン（小型） --- */
@media (max-width: 480px) {

  /* PRINCIPLE: テキスト微調整 */
  .principle-item p {
    font-size: 0.88rem;
  }

  /* TECH STACK: 1カラム化 */
  .stack-grid {
    grid-template-columns: 1fr;
  }

  /* SERVICE CARD 3カラム変形: パディング縮小 */
  .service-list--cols .service-card {
    padding: 2rem 1.5rem;
  }

  /* CASE CARD: パディング縮小 */
  .case-card-header {
    padding: 1.5rem 1.5rem 0;
  }
  .case-card-body {
    padding: 1rem 1.5rem 1.5rem;
  }
  .case-card-body p {
    font-size: 0.88rem;
  }
}

/* ===========================================
   追記分（004 CREATIVE） ─ service-page-responsive.css 末尾に追加
   前回 003 で追記した principle-list / service-list--cols /
   stack-grid / case-grid の後に続けてください
   =========================================== */


/* --- タブレット / スマートフォン --- */
@media (max-width: 768px) {

  /* SEC-GREEN: パディング縮小 */
  .sec-green {
    padding: 5rem 1.5rem;
  }

  /* OVERVIEW VISUAL: モバイルではカラー表示 */
  .overview-visual img {
    filter: grayscale(0) brightness(1) contrast(1);
  }

  /* FEATURED WORK: 1カラム化 */
  .featured-work {
    grid-template-columns: 1fr;
  }
  .featured-work-visual {
    aspect-ratio: 16 / 9;
  }
  /* モバイルではカラー表示 */
  .featured-work-visual img {
    filter: grayscale(0) brightness(1) contrast(1);
  }

  /* SERVICE LIST VISUAL: 1カラム化 */
  .service-list.service-list--visual {
    grid-template-columns: 1fr;
  }
  /* モバイルではカラー表示 */
  .service-list--visual .service-card-image img {
    filter: grayscale(0) brightness(1) contrast(1);
  }

  /* PROCESS GRID: 1カラム化 */
  .process-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* USE CASE GRID: 1カラム化 */
  .usecase-grid {
    grid-template-columns: 1fr;
  }
}


/* --- スマートフォン（小型） --- */
@media (max-width: 480px) {

  /* FEATURED WORK: パディング縮小 */
  .featured-work-body {
    padding: 2rem 1.5rem;
  }
  .featured-work-body p {
    font-size: 0.95rem;
  }

  /* SERVICE CARD VISUAL: テキスト微調整 */
  .service-list--visual .service-card-body {
    padding: 1.4rem 1.2rem;
  }
  .service-list--visual .service-card p {
    font-size: 0.95rem;
  }

  /* PROCESS STEP: 番号セル縮小 */
  .process-step {
    grid-template-columns: 3.5rem 1fr;
  }
  .process-step p {
    font-size: 0.95rem;
  }

  /* USE CASE: テキスト微調整 */
  .usecase-item p {
    font-size: 0.9rem;
  }
}
/* ===========================================
   追記分（005 NEXT） ─ service-page-responsive.css 末尾に追加
   前回 004 で追記した featured-work / service-list--visual /
   process-grid / usecase-grid の後に続けてください
   =========================================== */


/* --- タブレット / スマートフォン --- */
@media (max-width: 768px) {

  /* MANIFESTO GRID: 1カラム化 */
  .manifesto-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* PILLAR CARD: 1カラム化（反転も解除） */
  .pillar-card,
  .pillar-card.reversed {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .pillar-card-visual {
    aspect-ratio: 16 / 9;
  }

  /* COMPARISON: 横スクロール許容 */
  .comparison {
    overflow-x: auto;
  }
  .comparison-header,
  .comparison-row {
    min-width: 600px;
  }

  /* MODEL GRID: 1カラム化 + 罫線方向変更 */
  .model-grid {
    grid-template-columns: 1fr;
  }
  .model-card {
    border-right: none;
    border-bottom: 1px solid rgba(245, 245, 240, 0.1);
  }
  .model-card:last-child {
    border-bottom: none;
  }

  /* WHY GRID: 1カラム化 */
  .why-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* --- スマートフォン（小型） --- */
@media (max-width: 480px) {

  /* MANIFESTO: テキスト微調整 */
  .manifesto-lead {
    font-size: 1.05rem;
  }

  /* WHY: テキスト微調整 */
  .why-lead {
    font-size: 1.05rem;
  }

  /* PILLAR CARD: パディング縮小 */
  .pillar-card-body {
    padding: 2rem 1.5rem;
  }
  .pillar-card-body p {
    font-size: 0.95rem;
  }

  /* PILLAR ITEM: 番号セル縮小 */
  .pillar-item {
    grid-template-columns: 3.5rem 1fr;
  }
  .pillar-item p {
    font-size: 0.95rem;
  }

  /* WHY POINT: アイコンセル縮小 */
  .why-point {
    grid-template-columns: 3.5rem 1fr;
  }
  .why-point p {
    font-size: 0.95rem;
  }

  /* MODEL CARD: パディング縮小 */
  .model-card {
    padding: 2rem 1.5rem;
  }
  .model-card p {
    font-size: 0.95rem;
  }
}
/* ===========================================
   追記分（COMPANY） ─ service-page-responsive.css 末尾に追加
   前回 005 で追記した manifesto-grid / pillar-card /
   model-grid / why-grid の後に続けてください
   =========================================== */


/* --- タブレット / スマートフォン --- */
@media (max-width: 768px) {

  /* PAGE HERO COMPACT: 高さ縮小 */
  .page-hero--compact {
    min-height: 40vh;
    padding: 0 1.5rem 3rem;
  }

  /* INFO TABLE: 1カラム化（ラベルと値を縦積み） */
  .info-row {
    grid-template-columns: 1fr;
  }
  .info-label {
    border-right: none;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
    padding: 0.8rem 1.2rem;
  }
  .info-value {
    padding: 0.8rem 1.2rem;
  }

  /* PROGRAM GRID: 1カラム化 + 罫線方向変更 */
  .program-grid {
    grid-template-columns: 1fr;
  }
  .program-card {
    border-right: none;
    border-bottom: 1px solid rgba(245, 245, 240, 0.1);
  }
  .program-card:last-child {
    border-bottom: none;
  }

  /* ACCESS GRID: 1カラム化 + 地図アスペクト比変更 */
  .access-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .access-map {
    aspect-ratio: 16 / 9;
  }

  /* RELATED GRID: 1カラム化 */
  .related-grid {
    grid-template-columns: 1fr;
  }
}


/* --- スマートフォン（小型） --- */
@media (max-width: 480px) {

  /* テキスト微調整 */
  .info-value,
  .access-info {
    font-size: 0.95rem;
  }
  .program-card p,
  .related-card p {
    font-size: 0.95rem;
  }

  /* PROGRAM CARD: パディング縮小 */
  .program-card {
    padding: 2rem 1.5rem;
  }

  /* RELATED CARD: パディング縮小 */
  .related-card {
    padding: 1.5rem 1.3rem;
  }

  /* PRIVACY POLICY */
  .policy-intro {
    font-size: 0.98rem;
  }
  .policy-wrap p,
  .policy-wrap li {
    font-size: 0.9rem;
  }
  .policy-block-title {
    font-size: 1.05rem;
  }
}


/* --- タブレット / スマートフォン --- */
@media (max-width: 768px) {

  /* PRIVACY POLICY */
  .policy-wrap {
    margin-top: 2rem;
  }
  .policy-contact {
    padding: 1.8rem 1.5rem;
  }

  /* RECRUIT PAGE */
  .recruit-stats {
    grid-template-columns: 1fr 1fr;
  }
  .recruit-stat-card:nth-child(2n) {
    border-right: none;
  }
  .recruit-stat-card:nth-child(n + 3) {
    border-top: 1px solid rgba(245, 245, 240, 0.08);
  }
  .recruit-data-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .recruit-data-label {
    padding-top: 0;
  }
  .recruit-flow {
    grid-template-columns: 1fr 1fr;
  }
  .recruit-flow-step:nth-child(2n) {
    border-right: none;
  }
  .recruit-flow-step:nth-child(n + 3) {
    border-top: 1px solid rgba(245, 245, 240, 0.08);
  }
  .recruit-works {
    grid-template-columns: 1fr;
  }
  .recruit-apply-panel {
    padding: 2rem 1.6rem;
  }

  /* TOPICS ARCHIVE */
  .topics-archive-link {
    padding: 1.5rem;
  }
  .topics-pagination {
    gap: 0.4rem;
  }
}


/* --- スマートフォン（小型） --- */
@media (max-width: 480px) {

  /* PRIVACY POLICY */
  .policy-contact {
    padding: 1.5rem 1.2rem;
  }

  /* RECRUIT PAGE */
  .recruit-message p,
  .recruit-intro-dark,
  .recruit-data-value,
  .persona-tag,
  .recruit-apply-panel p {
    font-size: 0.92rem;
  }
  .recruit-stats {
    grid-template-columns: 1fr;
  }
  .recruit-stat-card {
    border-right: none;
    border-top: 1px solid rgba(245, 245, 240, 0.08);
  }
  .recruit-stat-card:first-child {
    border-top: none;
  }
  .recruit-flow {
    grid-template-columns: 1fr;
  }
  .recruit-flow-step {
    border-right: none;
    border-top: 1px solid rgba(245, 245, 240, 0.08);
  }
  .recruit-flow-step:first-child {
    border-top: none;
  }
  .recruit-apply-panel {
    padding: 1.6rem 1.2rem;
  }

  /* TOPICS ARCHIVE */
  .topics-archive-title {
    font-size: 1rem;
  }
  .topics-archive-excerpt,
  .topics-empty p {
    font-size: 0.9rem;
  }
  .topics-pagination-item a,
  .topics-pagination-item span {
    min-width: 2.3rem;
    height: 2.3rem;
    padding: 0 0.7rem;
    font-size: 0.68rem;
  }
}