/* ============================================================
   responsive.css — メディアクエリ一括（最後に読み込む）
   ・base: 1024/768/480 + 1600以上（全ページ共通）
   ・下層/一覧/運営 各ページのレスポンシブ追補
   競合する余白は特異度で解決:
     .page-body #footer-cta → var(--side-pad)（indexは素の#footer-cta=24pxを維持）
     .page-listing .page-hero-ja → 一覧用の大きめサイズ
   ============================================================ */

/* ========== 共通レスポンシブ（トップ基準 1024/768/480/1600+） ========== */
@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .focus-inner{grid-template-columns:clamp(220px,28vw,300px) 1fr}
  .news-inner{grid-template-columns:clamp(220px,28vw,300px) 1fr}
  .solution-layout{grid-template-columns:clamp(220px,28vw,300px) 1fr;gap:48px}
  .solution-item-name{font-size:16px}
  .solution-item-desc{font-size:12px}
  .case-layout{grid-template-columns:220px 1fr;gap:48px}
  .case-band-title{font-size:clamp(16px,2vw,22px)}
  /* #contents .case-layout はCASEより広い左カラム(clamp 430-600px)をPC専用に
     個別上書きしていたが、1024px用のオーバーライドが無く取り残されていた */
  #contents .case-layout{grid-template-columns:220px 1fr;gap:48px}

  /* タブレット以下では左サイド見出しの追従（sticky）を全セクション共通で無効化 */
  .focus-head,
  .solution-sticky,
  .case-sticky{
    position:static;
  }

  /* セクションpadding統一（#newsをベースに #focus/#solution/#case/#contents を揃える）
     左右はvar(--side-pad)を参照（variables.cssで1024px時に40pxへ再定義済み） */
  #news,#focus,#solution,#case,#contents{padding:64px var(--side-pad)}

  /* NEWS: タブレット幅では日付・ラベルを固定90px/104pxではなく内容に応じたautoに */
  .news-item{
    grid-template-columns:auto auto 1fr;
    gap:12px;
    padding:16px 0;
  }
  .news-date{font-size:12px;white-space:nowrap}
  .news-cat{font-size:11px;padding:2px 8px;white-space:nowrap}
  .news-title{font-size:14px}
}

@media(max-width:768px){
  /* NAV */
  #header-nav{padding:0 20px}
  .nav-links{display:none}
  .burger{display:flex}

  /* HERO */
  .hero-content{padding:0 24px}
  .hero-scroll{display:none}

  /* セクション見出し（NEWS/FOCUS/ABOUT/SOLUTION/CASE/CONTENTS）— sec-enサイズを統一 */
  .news-head .sec-en,
  .focus-head .sec-en,
  .about-label,
  .solution-sticky .sec-en,
  .case-sticky .sec-en{font-size:clamp(40px,10vw,64px)}

  /* NEWS — 縦積み1カラムに */
  #news{padding:64px var(--side-pad)}
  .news-inner{grid-template-columns:1fr;gap:28px}
  .news-item{
    grid-template-columns:1fr;
    gap:4px;
  }
  .news-cat{justify-self:start}

  /* FOCUS — 1行目:バッジ+矢印、2行目:本文（縦積み） */
  #focus{padding:64px var(--side-pad)}
  .focus-inner{grid-template-columns:1fr}
  .focus-head{margin-bottom:32px}
  .focus-item{flex-wrap:wrap;align-items:flex-start;gap:8px 14px;padding:22px 0}
  .focus-badge{order:1}
  .focus-item-arrow{order:2;margin-left:auto}
  .focus-item-body{order:3;flex-basis:100%}
  .focus-item-name{font-size:16px}

  /* ABOUT — canvas moves to section background */
  #about{
    padding:80px var(--side-pad);
    grid-template-columns:1fr;gap:0;
    position:relative;overflow:hidden;
  }
  .about-graphic{display:none}
  #about-net-bg{display:block!important}
  .about-text{position:relative;z-index:1;align-items:flex-start;text-align:left}
  .about-quote{text-align:left}
  .about-btn-wrap{justify-content:flex-end}

  /* SOLUTION */
  #solution{padding:64px var(--side-pad)}
  .solution-layout{grid-template-columns:1fr;gap:40px}
  .solution-layout > div:last-child{padding-top:0}
  .solution-item{padding:16px 0}
  .solution-item-name{font-size:16px}
  /* サイト内リンクボタン（一覧を見る 等）を右寄せ。見出し・本文は左揃えのまま */
  .solution-sticky,.case-sticky{display:flex;flex-direction:column}
  .solution-sticky .btn-ghost,.case-sticky .btn-ghost{align-self:flex-end}

  /* CASE */
  #case{padding:64px var(--side-pad)}
  .case-layout{grid-template-columns:1fr;gap:40px}
  .case-layout > div:last-child{padding-top:0}
  .case-band{grid-template-columns:1fr auto;gap:20px;padding:24px 0}
  .case-band-num{font-size:clamp(28px,8vw,48px)}
  .case-band-title{font-size:clamp(14px,3.5vw,18px)}

  /* CONTENTS */
  #contents{padding:64px var(--side-pad)}
  #contents .case-layout{grid-template-columns:1fr;gap:40px}
  .case-sticky .sec-ja{text-align:left}
  .contents-item{gap:16px;padding:20px 0}
  .contents-item-title{font-size:14px}

  /* AIMention desc — 2 lines max on mobile */
  .solution-item-body .solution-item-desc{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* CTA */
  #footer-cta{padding:56px 24px}
  .cta-inner{grid-template-columns:1fr;gap:32px}
  .cta-eyebrow{font-size:clamp(40px,10vw,64px)}
  .cta-actions{align-items:flex-end}
  /* btn-contact-whiteをbtn-ghost（支援実績一覧・コンテンツ一覧等）とサイズ統一 */
  .btn-contact-white{font-size:13px;padding:12px 28px}
  /* FOOTERはlayout.cssに一本化（全ページ共通のためページ種別ごとの重複指定は不要） */
}

@media(max-width:480px){
  /* HERO */
  .hero-title{font-size:clamp(30px,9.5vw,48px)}

  /* NEWS */
  .news-head .sec-en{font-size:clamp(36px,11vw,52px)}

  /* FOCUS */
  .focus-head .sec-en{font-size:clamp(36px,11vw,52px)}

  /* ABOUT */
  .about-label{font-size:clamp(36px,11vw,52px)}
  .about-quote{font-size:clamp(18px,5vw,24px)}

  /* SOLUTION */
  .solution-sticky .sec-en{font-size:clamp(36px,11vw,52px)}
  .solution-item-left{gap:10px}
  .solution-item-num{width:44px;font-size:9px}
  .solution-item-name{font-size:15px}
  .solution-item-arrow{font-size:14px}

  /* CASE */
  .case-sticky .sec-en{font-size:clamp(36px,11vw,52px)}
  .case-band{gap:12px;padding:20px 0}
  .case-band-title{font-size:clamp(13px,3.5vw,16px)}
  .case-band-num{font-size:clamp(26px,8vw,40px)}

  /* CONTENTS */
  .contents-card{padding:28px 20px}

  /* CTA */
  .cta-eyebrow{font-size:clamp(36px,11vw,52px)}
  .cta-actions{align-items:stretch}
}

/* =====================
   LARGE SCREEN 1600px+
   ===================== */
@media(min-width:1600px){
  /* Body text */
  body{font-size:18px}

  /* Section headings */
  .sec-en{font-size:clamp(90px,8vw,160px)}
  .solution-sticky .sec-en,
  .case-sticky .sec-en{font-size:clamp(60px,5vw,100px)}
  .about-label{font-size:clamp(60px,5vw,100px)}
  .news-head .sec-en,
  .focus-head .sec-en{font-size:clamp(60px,5vw,100px)}
  .cta-eyebrow{font-size:clamp(60px,5vw,100px)}

  /* Hero */
  .hero-title{font-size:clamp(80px,9vw,150px)}

  /* About */
  .about-quote{font-size:clamp(22px,2vw,32px)}
  .about-body{font-size:18px}

  /* Solution */
  .solution-item-name{font-size:24px}
  .solution-item-desc{font-size:15px}
  .solution-item-num{font-size:12px}
  .solution-sticky-desc{font-size:16px}

  /* Case */
  .case-band-title{font-size:clamp(22px,2vw,32px)}
  .case-band-num{font-size:clamp(56px,6vw,88px)}

  /* Contents */
  .contents-item-title{font-size:18px}
  .contents-item-cat{font-size:12px}
  .contents-item-date{font-size:14px}

  /* News */
  .news-title{font-size:17px}
  .news-date{font-size:14px}

  /* CTA */
  .cta-title{font-size:clamp(22px,2vw,30px)}

  /* Buttons */
  .btn-ghost{font-size:15px;padding:14px 32px}
  .btn-contact-white{font-size:17px;padding:18px 64px}
}

/* ========== 下層詳細ページ レスポンシブ ========== */
@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .intro,.overview,.layers,.strengths,.lineup,.related-cases{padding:64px var(--side-pad)}
  .intro-meta,.overview-meta,.layers-meta,.strengths-meta,.lineup-meta,.related-cases-meta{
    position:static;
  }
  .intro-body,.overview-body,.layers-body,.strengths-body,.lineup-body{
    padding-left:0;padding-top:32px;
  }
  .related-cases .related-cases-body{padding-left:0;padding-top:32px}
  .intro-inner,.overview-inner,.layers-inner,.strengths-inner,.lineup-inner,.related-cases-inner{
    grid-template-columns:1fr;
  }
  .related-cases-body{grid-template-columns:repeat(2,1fr)}
  .related-cases-body>a:nth-child(3){
    grid-column:1/-1;max-width:calc(50% - 12px);margin:0 auto;
  }
  .layers-grid{grid-template-columns:1fr;padding:40px 10px}
  /* .pyramid-wrap svg{width:100%}（本ブロック内の別ルール）が.pyramid-svgより
     詳細度で勝ち、ピラミッドが画面幅いっぱいに広がっていたため、
     .pyramid-wrap .pyramid-svgで詳細度を上げてmax-width:400pxに制御する */
  .pyramid-wrap .pyramid-svg{width:100%;max-width:400px;margin:0 auto;display:block}
  /* ピラミッドを中央寄せで縮小した後、下のテキストリストだけ全幅のままだと
     不釣り合いになるため、同じ800px幅で中央寄せに揃える */
  .layers-content,.layers-list{
    padding-left:0;padding-right:0;
    max-width:800px;margin:0 auto;
  }
  .layers-list li{grid-template-columns:120px 1fr;gap:20px;text-align:left}
  .strengths-grid{grid-template-columns:1fr}
  /* LINEUP: 1行目=num+name（全幅）、2行目=desc + 矢印（右端） */
  .lineup-item{grid-template-columns:1fr auto;gap:6px 16px;padding:16px 0}
  .lineup-meta-num{grid-column:1/3;min-width:0}
  .lineup-desc{grid-column:1;padding-right:0}
  .lineup-arrow{grid-column:2;align-self:center}
  .page-hero-inner{grid-template-columns:1fr}
  .page-hero-right,.intro-body,.strengths-header-right,.lineup-header-right{padding-left:0;padding-top:32px}
  .lineup-meta{padding-right:0}
  /* BtoB Journey / 開発フロー / ピラミッド SVG：タブレット以下は画面幅に縮小し、
     タップで拡大表示（lightbox）できるようにする。min-width:0 は維持
     （Safari系ブラウザのflexアイテム自動最小幅バグ対策のため auto にはしない） */
  .journey-svg-wrap svg,
  .pyramid-wrap svg{
    width:100%;height:auto;min-width:0;
  }
  .journey-svg-wrap,
  .pyramid-wrap{
    overflow:hidden;cursor:pointer;
  }
}
@media(max-width:768px){
  #header-nav{padding:0 20px}
  .page-hero{padding:48px var(--side-pad) 0}
  .page-hero-left,.page-hero-right{padding-bottom:32px}
  .page-hero-ja{font-size:clamp(28px,7vw,44px)}
  .intro,.overview,.layers,.strengths,.lineup,.related-cases{padding:64px var(--side-pad)}
  .strengths-grid{grid-template-columns:1fr}
  .strength-card{padding:36px 28px}
  .lineup-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .journey-svg-wrap{padding:16px}
  /* pyramid-wrap svg（≤1024pxで既にwidth:100%指定済み）が優先されるため
     ここではlayers-gridの上下paddingのみ調整し左右は0に */
  .layers-grid{padding:24px 10px}
  /* 768px時も1024pxと同じ400px上限を維持する（100%解除だと画面幅いっぱいに
     広がって圧迫感が出るため、Round3時点の判断を修正） */
  .pyramid-wrap .pyramid-svg{max-width:400px;margin:0 auto;display:block}
  .layers-content{padding-left:5px;padding-right:5px}
  .layers-list{padding-left:0}
  /* CMO等の役職名+説明文を2カラム→段落表示（縦積み）に */
  .layers-list li{grid-template-columns:1fr;gap:4px}
  .layers-role{font-size:15px;font-weight:900}
  .layers-desc{font-size:13px}
  .breadcrumb{padding:12px var(--side-pad)}
  .page-body #footer-cta{padding:56px var(--side-pad)}
  .cta-inner{grid-template-columns:1fr;gap:32px}
  .cta-eyebrow{font-size:clamp(40px,10vw,64px)}
  .cta-actions{align-items:flex-end}
  /* FOOTERはlayout.cssに一本化（全ページ共通のためページ種別ごとの重複指定は不要） */
}
@media(max-width:480px){
  .page-hero-ja{font-size:clamp(24px,8vw,36px)}
  .lineup-name{font-size:17px}
  .cta-eyebrow{font-size:clamp(36px,11vw,52px)}
  .pyramid-wrap .pyramid-svg{max-width:320px}
}

/* ========== 事業紹介一覧（service.html） レスポンシブ ========== */
@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .page-hero-inner{grid-template-columns:1fr}
  .page-listing .page-hero-right{padding-left:0;padding-top:32px;border-top:1px solid var(--border-light)}
  .svc-block{padding:64px var(--side-pad)}
  .svc-block-inner{grid-template-columns:1fr;gap:40px}
  .svc-block-meta{position:static}
  .svc-block-num{font-size:clamp(96px,18vw,140px)}
}
@media(max-width:768px){
  #header-nav{padding:0 20px}
  .page-hero{padding:48px var(--side-pad) 0}
  .page-hero-left{padding-bottom:32px}
  .page-hero-right{padding-bottom:32px}
  .page-listing .page-hero-ja{font-size:clamp(40px,12vw,64px)}
  /* PCのwhite-space:nowrapのままだとgrid item(.page-hero-right)がnowrap分の
     min-content幅まで広がり、.page-hero-innerのoverflow:hiddenで見切れるため解除 */
  .page-listing .page-hero-lead{white-space:normal}
  #svc-blocks{padding:0 0 64px}
  .svc-block-name{font-size:24px}
  .svc-block-desc{font-size:14px;line-height:1.9;margin-bottom:32px}
  .svc-block-num{font-size:clamp(80px,22vw,120px)}
  .svc-block-tags{margin-bottom:32px}
  .svc-tag{font-size:12px;padding:8px 14px}
  .svc-block-btn{padding:14px 28px;font-size:12px;width:auto}
  .breadcrumb{padding:12px var(--side-pad)}
  .page-body #footer-cta{padding:56px var(--side-pad)}
  .cta-inner{grid-template-columns:1fr;gap:32px}
  .cta-eyebrow{font-size:clamp(40px,10vw,64px)}
  .cta-actions{align-items:flex-end}
  /* FOOTERはlayout.cssに一本化（全ページ共通のためページ種別ごとの重複指定は不要） */
}
@media(max-width:480px){
  .page-listing .page-hero-ja{font-size:clamp(36px,12vw,56px)}
  .svc-block-name{font-size:21px}
  .svc-block-inner{padding:48px 20px}
  .cta-eyebrow{font-size:clamp(36px,11vw,52px)}
}

/* ========== プロダクト運営 レスポンシブ（LINEUP等 詳細と共通 + 差分） ========== */
@media(max-width:1024px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .intro,.overview,.layers,.strengths,.lineup,.related-cases{padding:64px var(--side-pad)}
  .intro-meta,.overview-meta,.layers-meta,.strengths-meta,.lineup-meta,.related-cases-meta{
    position:static;
  }
  .intro-body,.overview-body,.layers-body,.strengths-body,.lineup-body{
    padding-left:0;padding-top:32px;
  }
  .related-cases .related-cases-body{padding-left:0;padding-top:32px}
  .intro-inner,.overview-inner,.layers-inner,.strengths-inner,.lineup-inner,.related-cases-inner{
    grid-template-columns:1fr;
  }
  .related-cases-body{grid-template-columns:repeat(2,1fr)}
  .related-cases-body>a:nth-child(3){
    grid-column:1/-1;max-width:calc(50% - 12px);margin:0 auto;
  }
  /* .layers-grid/.pyramid-svgはservice-digital-marketing.htmlのみで使用する
     ため、この（product-development系ページ用）ブロックでの重複指定は削除。
     下の共通ブロックの指定と衝突していたため整理。 */
  .strengths-grid{grid-template-columns:1fr}
  /* LINEUP: 1行目=num+name（全幅）、2行目=desc + 矢印（右端） */
  .lineup-item{grid-template-columns:1fr auto;gap:6px 16px;padding:16px 0}
  .lineup-meta-num{grid-column:1/3;min-width:0}
  .lineup-desc{grid-column:1;padding-right:0}
  .lineup-arrow{grid-column:2;align-self:center}
  .page-hero-inner{grid-template-columns:1fr}
  .page-hero-right,.intro-body,.strengths-header-right,.lineup-header-right{padding-left:0;padding-top:32px}
  .lineup-meta{padding-right:0}
}
@media(max-width:768px){
  #header-nav{padding:0 20px}
  .page-hero{padding:48px var(--side-pad) 0}
  .page-hero-left,.page-hero-right{padding-bottom:32px}
  .page-hero-ja{font-size:clamp(28px,7vw,44px)}
  .intro,.overview,.layers,.strengths,.lineup,.related-cases{padding:64px var(--side-pad)}
  .strengths-grid{grid-template-columns:1fr}
  .strength-card{padding:36px 28px}
  .lineup-meta{flex-direction:column;align-items:flex-start;gap:8px}
  .breadcrumb{padding:12px var(--side-pad)}
  .page-body #footer-cta{padding:56px var(--side-pad)}
  .cta-inner{grid-template-columns:1fr;gap:32px}
  .cta-eyebrow{font-size:clamp(40px,10vw,64px)}
  .cta-actions{align-items:flex-end}
  /* FOOTERはlayout.cssに一本化（全ページ共通のためページ種別ごとの重複指定は不要） */
}
@media(max-width:480px){
  .page-hero-ja{font-size:clamp(24px,8vw,36px)}
  .lineup-name{font-size:17px}
  .cta-eyebrow{font-size:clamp(36px,11vw,52px)}
  .pyramid-wrap .pyramid-svg{max-width:320px}
}

/* ========== PRODUCTS カード レスポンシブ ==========
   ヘッダー行(.product-header)は縦積みにせず横一列のまま維持し、
   サムネイル＋本文の.product-contentのみ1カラムに切り替える。 */
@media(max-width:900px){
  .product-content{grid-template-columns:1fr;gap:0}
  /* max-height:280pxを撤去: aspect-ratio(1200/630)と競合すると、タブレット幅
     (768px等)でaspect-ratio由来の高さがmax-heightを上回りobject-fit:coverが
     左右をクロップしてしまう(デスクトップ版と同根の問題)。1カラム表示では
     右カラムとの高さ合わせも不要なため、aspect-ratioのみに委ねて整合させる。 */
  /* 1カラム表示でもproduct-body(padding:28px 24px)と左右の余白感を揃えるため、
     上下左右に余白を持たせる。widthはbaseの100%のままだとmargin分だけ右にも
     はみ出してproduct-cardのoverflow:hiddenでクロップされてしまうため、
     margin(左右計48px)を差し引いたwidthに調整して収まりを合わせる。
     max-width:500pxはタブレット幅(calc結果が500pxを超える帯域)でのみ効き、
     スマホ幅ではcalc(100% - 48px)が500px未満になるため実質無効(サイズ据え置き)。
     margin左右をautoにすることで、上限に達した帯域では中央寄せになる。 */
  .product-visual{
    aspect-ratio:1200/630;
    width:calc(100% - 48px);
    max-width:500px;
    margin:20px auto 0;
  }
  .product-body{padding:28px 24px}
}
@media(max-width:480px){
  /* スマホ幅では省略(ellipsis)よりも実機での可読性を優先し、
     product-nameの1行固定を解除して2行までの折り返しを許容する（社長承認のA案）。
     アイコンとは常に横並びのまま（align-items:centerで1行目の高さに揃う）。 */
  .product-header{padding:16px 24px}
  .product-name{white-space:normal;overflow:visible;text-overflow:clip}
  .product-body{padding:24px 20px}
}

/* ========== お知らせ一覧（news.html） レスポンシブ ==========
   ベースの.news-item（グリッド）を継承しつつ1カラム縦積みにする。
   旧: display:flex+orderで組み替えていたが、Round1でベース側をグリッド化
   した後もここだけ取り残されており、.newslist側の特異度がベースの
   .news-item{display:grid}に勝つため実際にはflexで描画され、グリッド
   固定幅(90px/104px/1fr)と噛み合わずタイトルが不自然に折り返る原因に
   なっていた。 */
@media(max-width:768px){
  .newslist .news-item{
    grid-template-columns:1fr;
    gap:4px;
    padding:20px 0;
  }
  .newslist .news-cat{justify-self:start}
}

/* ========== 会社概要（about.html） レスポンシブ ========== */
@media(max-width:768px){
  /* 会社情報テーブル：th固定160pxだと窮屈なため3:7比率に */
  .info-table th{width:30%;white-space:normal}
  .info-table td{width:70%}
  /* 取引先ロゴ：auto-fill(minmax 180px)だと1カラムになるため2カラム固定 */
  .logos-grid{grid-template-columns:repeat(2,1fr)}
}

/* ========== モバイル微調整（Task9：ファイル末尾で既存ルールを上書き） ========== */
@media(max-width:768px){
  /* PAGE HEROの左右余白は他セクションと同じvar(--side-pad)に統一
     （旧: 64px→16pxへ個別に詰めていたため、page-hero だけ左端がズレていた） */
  /* パンくずは横スクロールではなく改行を許容し、見切れを防ぐ */
  .breadcrumb{
    padding:12px var(--side-pad);
    flex-wrap:wrap;
    white-space:normal;
    overflow-x:visible;
    font-size:11px;
    line-height:1.6;
  }
  /* 「支援実績の一覧を見る」ボタンを右寄せ（第3階層・事例詳細で共用） */
  .related-cases-more{text-align:right}
}

/* ========== 関連する支援実績カード：スマホでは縦積み ========== */
@media(max-width:448px){
  .related-cases-body{grid-template-columns:1fr}
  .related-cases-body>a:nth-child(3){
    grid-column:auto;max-width:none;margin:0;
  }
}

/* ========== お問い合わせフォーム（MW WP Form）レスポンシブ ========== */
@media(max-width:768px){
  .thanks-section{padding:48px var(--side-pad)}
  .form-actions{flex-direction:column-reverse}
  .form-submit,.form-back{width:100%;padding:16px 32px}

  /* 電話番号欄（tel[data][0-2]）。3つの.form-inputが個別にwidth:100%を
     持つため、スマホ幅だとハイフン区切りで折り返す。flexで等分し、
     常に1行に収める（PC表示は既存のwidth:100%のまま）。 */
  .mwform-tel-field{
    display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  }
  .mwform-tel-field .form-input{
    width:0;min-width:0;flex:1 1 0;padding-left:8px;padding-right:8px;text-align:center;
  }
}