/* v1.73.1：移植元は白地前提の opacity:.05 だった。面を tint に戻したので
   他セクション（STRENGTH/SERVICE ほか）と同じ扱いにし、reveal に任せる。 */
.pm-mock .concept .sec-bg-word{top:6px}
.pm-mock .concept .container{position:relative;z-index:2}
/* 見出し */
.pm-mock .concept .sec-eyebrow{
  display:block;font-family:"Inter",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--blue,#1B7FD4);margin:0 0 14px
}

@media(max-width:900px){
.pm-mock .concept .sec-eyebrow{font-size:10px;margin-bottom:10px}

}
.pm-mock .concept-head{position:relative;z-index:2;max-width:920px;margin:0 0 46px}
.pm-mock .concept .cc-logo{
  font-family:"Inter","Helvetica Neue",sans-serif;
  margin:0 0 22px;line-height:1.15;text-transform:none;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.28em;
}
.pm-mock .concept .cc-logo-sm{
  font-size:20px;font-weight:400;color:var(--blue,#1B7FD4);
  letter-spacing:.02em;position:relative;top:-.12em
}
.pm-mock .concept .cc-logo-lg{
  font-size:44px;font-weight:700;color:var(--navy,#0F2C52);
  letter-spacing:-.018em
}
.pm-mock .concept .cc-logo-amp{
  font-size:34px;font-weight:300;color:var(--blue,#1B7FD4);
  letter-spacing:0;font-style:italic;padding:0 .04em
}
.pm-mock .concept .cc-title{
  font-size:30px;font-weight:700;color:var(--navy,#0F2C52);
  line-height:1.6;margin:0 0 18px;text-transform:none
}
.pm-mock .concept .cc-lead{font-size:15px;color:var(--gy,#5A6B80);line-height:2;margin:0}
.pm-mock .concept .cc-lead b{color:var(--navy,#0F2C52);font-weight:700}
/* 2軸 */
.pm-mock .cc-axis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:52px}
.pm-mock .cc-axis-item{
  position:relative;background:var(--bg,#F5F8FB);border:1px solid var(--bd,#DFE5EC);
  border-radius:2px;padding:26px 22px 22px
}
.pm-mock .cc-axis-item:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--blue,#1B7FD4)}
.pm-mock .cc-ax-no{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--blue,#1B7FD4);background:#fff;border:1px solid #BFD6EC;
  padding:3px 10px;border-radius:2px;margin-bottom:14px
}
.pm-mock .cc-axis-item h3{font-size:16.5px;font-weight:700;color:var(--navy,#0F2C52);line-height:1.6;margin:0 0 12px}
.pm-mock .cc-axis-item p{font-size:12.5px;color:var(--gy,#5A6B80);line-height:1.9;margin:0 0 14px}
.pm-mock .cc-axis-item p b{color:var(--navy,#0F2C52);font-weight:700}
.pm-mock .cc-ax-tags{display:flex;flex-wrap:wrap;gap:6px}
.pm-mock .cc-ax-tags span{
  font-size:10.5px;font-weight:700;color:#12325C;background:#EEF4FA;
  border:1px solid #BFD6EC;padding:4px 10px;border-radius:2px
}
/* フェーズ遷移（下層ページ用に保持） */
.pm-mock .cc-phase{margin-bottom:32px}
.pm-mock .cc-phase-note{font-size:12px;color:var(--mu,#8090A2);line-height:1.7;margin:14px 0 0}
.pm-mock .cc-phase-note b{color:var(--navy,#0F2C52);font-weight:700}
.pm-mock .cc-phase-lead{
  font-size:13px;font-weight:700;color:var(--blue,#1B7FD4);
  margin:0 0 14px;letter-spacing:.02em
}
.pm-mock .cc-phase-row{display:flex;align-items:stretch;gap:0}
.pm-mock .cc-ph{
  flex:1;background:#fff;border:1px solid var(--bd,#DFE5EC);border-radius:2px;
  padding:16px 14px 14px;display:flex;flex-direction:column;min-width:0
}
.pm-mock .cc-ph-label{
  font-family:"Inter",sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.08em;
  color:var(--blue,#1B7FD4);margin-bottom:8px
}
.pm-mock .cc-ph b{font-size:13px;font-weight:700;color:var(--navy,#0F2C52);line-height:1.5;margin-bottom:6px}
.pm-mock .cc-ph small{font-size:11px;color:var(--mu,#8090A2);line-height:1.55;margin-bottom:auto;padding-bottom:12px}
.pm-mock .cc-ph-sol{
  font-size:11px;font-weight:700;color:#12325C;background:#EEF4FA;
  padding:6px 8px;border-radius:2px;line-height:1.4;text-align:center
}
.pm-mock .cc-arr{
  flex:0 0 22px;display:flex;align-items:center;justify-content:center;
  color:var(--blue,#1B7FD4);font-size:13px;font-weight:700
}
/* 締め */
.pm-mock .cc-close{
  background:var(--navy,#0F2C52);border-radius:2px;padding:22px 28px;
  position:relative;overflow:hidden
}
.pm-mock .cc-close:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--blue,#1B7FD4)}
.pm-mock .cc-close p{font-size:14px;color:#D6E4F2;line-height:1.9;margin:0}
.pm-mock .cc-close b{color:#fff;font-weight:700}
@media(max-width:900px){
.pm-mock .concept .cc-logo{gap:.22em;margin-bottom:16px}
.pm-mock .concept .cc-logo-lg{font-size:26px;letter-spacing:-.015em}
.pm-mock .concept .cc-logo-sm{font-size:14px}
.pm-mock .concept .cc-logo-amp{font-size:21px}
.pm-mock .concept .cc-title{font-size:21px;line-height:1.65}
.pm-mock .concept .cc-lead{font-size:13.5px;line-height:1.9}
.pm-mock .concept-head{margin-bottom:32px}
.pm-mock .cc-axis{grid-template-columns:1fr;gap:14px;margin-bottom:36px}
.pm-mock .cc-axis-item h3{font-size:16px}
.pm-mock .cc-axis-item p{font-size:13px}
.pm-mock .cc-axis-item{padding:22px 18px 20px}
.pm-mock .cc-axis-item h3{font-size:16px}
.pm-mock .cc-axis-item p{font-size:13px}
.pm-mock .cc-phase-row{flex-direction:column;gap:0}
.pm-mock .cc-ph{padding:14px 16px 12px}
.pm-mock .cc-ph small{padding-bottom:10px}
.pm-mock .cc-arr{flex:0 0 20px;transform:rotate(90deg);padding:2px 0}
.pm-mock .cc-close{padding:18px 20px}
.pm-mock .cc-close p{font-size:13px}
}


/* ===========================================
   独自資産バナー（METHOD / AI）
   =========================================== */
.pm-mock .asset-banners{padding:0 0 88px;background:#fff}
.pm-mock .ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pm-mock .ab-card{
  display:flex;flex-direction:column;
  background:var(--navy,#0F2C52);border-radius:2px;
  padding:32px 30px 28px;text-decoration:none;position:relative;overflow:hidden;
  transition:.2s
}
.pm-mock .ab-card:before{
  content:"";position:absolute;left:0;top:0;width:4px;height:100%;
  background:var(--blue,#1B7FD4)
}
.pm-mock .ab-card--ai{background:#12325C}
.pm-mock .ab-card:hover{background:#1A4172}
.pm-mock .ab-label{
  display:block;font-family:"Inter",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:#9FC6EA;margin-bottom:12px
}
.pm-mock .ab-title{
  font-size:21px;font-weight:700;color:#fff;margin:0 0 12px;line-height:1.5
}
.pm-mock .ab-title .en{font-family:"Inter",sans-serif;letter-spacing:.02em}
.pm-mock .ab-lead{font-size:13px;color:#D6E4F2;line-height:1.9;margin:0 0 18px}
.pm-mock .ab-lead b{color:#fff;font-weight:700}
.pm-mock .ab-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:auto;padding-bottom:18px}
.pm-mock .ab-tags span{
  font-size:11px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  padding:5px 10px;border-radius:2px
}
.pm-mock .ab-more{font-size:13px;font-weight:700;color:#9FC6EA}
.pm-mock .ab-card:hover .ab-more{color:#fff}

@media(max-width:900px){
.pm-mock .asset-banners{padding:0 0 52px}
.pm-mock .ab-grid{grid-template-columns:1fr;gap:14px}
.pm-mock .ab-card{padding:24px 20px 22px}
.pm-mock .ab-title{font-size:18px}
.pm-mock .ab-lead{font-size:12.5px}
.pm-mock .ab-tags span{font-size:10.5px;padding:4px 9px}

}

@media(max-width:900px){

}
/* サービスカテゴリ導線 */
.pm-mock .svc-entry{margin-top:26px}
.pm-mock .svc-entry .sc-lead{font-size:13px;color:var(--gy,#5A6B80);margin:0 0 12px}
.pm-mock .sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pm-mock .sc-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--bd,#DFE5EC);border-radius:2px;
  padding:18px 18px 16px;text-decoration:none;transition:.15s
}
.pm-mock .sc-card:hover{border-color:var(--blue,#1B7FD4);box-shadow:0 2px 12px rgba(27,127,212,.10)}
.pm-mock .sc-tag{
  display:inline-block;align-self:flex-start;font-family:"Inter",sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--blue,#1B7FD4);
  background:#EEF4FA;padding:3px 9px;border-radius:2px;margin-bottom:10px
}
.pm-mock .sc-card b{font-size:14px;font-weight:700;color:var(--navy,#0F2C52);line-height:1.5;margin-bottom:6px}
.pm-mock .sc-card p{font-size:11.5px;color:var(--gy,#5A6B80);line-height:1.7;margin:0}
.pm-mock .sc-more{
  display:block;margin-top:auto;padding-top:12px;
  font-size:11.5px;font-weight:700;color:var(--blue,#1B7FD4)
}
.pm-mock .sc-card:hover .sc-more{text-decoration:underline}

@media(max-width:900px){
.pm-mock .svc-entry{margin-top:20px}
.pm-mock .sc-grid{grid-template-columns:1fr 1fr;gap:8px}
.pm-mock .sc-card{padding:14px 14px 12px}
.pm-mock .sc-card b{font-size:13px}
.pm-mock .sc-card p{font-size:11px}

}
/* Challenge セクションのリード文 */
.pm-mock .challenge .challenge-lead{
  font-size:14px;color:var(--gy,#5A6B80);line-height:1.95;
  margin:0 0 28px;max-width:940px
}

@media(max-width:900px){
.pm-mock .challenge .challenge-lead{font-size:13px;line-height:1.85;margin-bottom:20px}

}

/* PC では改行用の <br> を消す（プレビューHTML由来） */
@media(min-width:901px){.pm-mock .concept .sp-only,.pm-mock .concept .sp-br{display:none}}

/* =============================================================
 * v1.73.0  CONCEPT の見直し（長谷川さんレビュー）
 * -------------------------------------------------------------
 *  ・背景の英字を他セクションと同じように出す
 *  ・STRENGTH と地続きに見えたので、面の色を変えて区切る
 *  ・「For Business Development & Growth」を Poppins に
 *  ・見出しとリード文が2行に折り返していたので、版面を広げる
 *  ・01/02/03 を STRENGTH と同じ大きな数字に（小さな枠をやめる）
 *  ・締めの帯を作り直す
 * ============================================================= */

/* ---- 面（tint）と上下ラインは solution-map.css の .pm-mock .concept 側で指定 ---- */

/* ---- 見出しまわり：折り返さない幅に ---- */
.pm-mock .concept-head{ max-width:1240px; }
.pm-mock .concept .cc-title,
.pm-mock .concept .cc-lead{ max-width:none; }

/* ---- ロゴタイプ：サイト共通の Poppins に揃える ---- */
.pm-mock .concept .cc-logo{
  font-family:'Poppins','Noto Sans JP',sans-serif;
  gap:.3em;
}
.pm-mock .concept .cc-logo-sm{
  font-family:'Poppins',sans-serif; font-weight:500;
  font-size:22px; color:var(--sky,#1C93D2); top:-.18em;
}
.pm-mock .concept .cc-logo-lg{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:46px; letter-spacing:-.022em; color:var(--navy,#1B224C);
}
.pm-mock .concept .cc-logo-amp{
  font-family:'Poppins',sans-serif; font-weight:400; font-style:normal;
  font-size:30px; color:var(--sky,#1C93D2); opacity:.85;
}

/* ---- カード：STRENGTH と同じ語り口に ---- */
.pm-mock .cc-axis-item{
  background:#fff; border:1px solid var(--line,#E2E8F1); border-radius:6px;
  padding:30px 28px 26px;
  transition:border-color .18s, box-shadow .18s;
}
.pm-mock .cc-axis-item:before{ display:none; }
.pm-mock .cc-axis-item:hover{
  border-color:var(--sky,#1C93D2);
  box-shadow:0 4px 12px rgba(15,30,55,.07);
}
.pm-mock .cc-ax-no{
  display:block; margin:0 0 12px; padding:0;
  background:none; border:0; border-radius:0;
  font-family:'Poppins',sans-serif; font-size:34px; font-weight:700;
  line-height:1; letter-spacing:-.02em; color:var(--sky,#1C93D2);
}
.pm-mock .cc-axis-item h3{
  font-size:18px; font-weight:900; line-height:1.55; margin:0 0 12px;
  padding:0 0 12px; border-bottom:1px solid var(--line,#E2E8F1);
}

/* ---- 締めの帯は v1.72.0 の見た目のまま（左に青ライン／濃紺の帯）---- */

@media (max-width:900px){
  .pm-mock .concept-head{ max-width:none; }
  .pm-mock .cc-axis-item{ padding:22px 18px 20px; }
  .pm-mock .cc-ax-no{ font-size:27px; margin-bottom:8px; }
  .pm-mock .cc-axis-item h3{ font-size:16px; padding-bottom:10px; }
}


/* =============================================================
   v1.74.0  TOP：CASE STUDY をクライアントインタビューの横一列に
   -------------------------------------------------------------
   カード自体は /works/ や課題ページと同じ .ccx-card
   （assets/css/case-cards.css）をそのまま使う。
   ここで足しているのは「横一列に並べて、はみ出した分を
   横スクロールさせる」ための器だけ。
   左右の余白は .container に合わせている（PC 60px／1060px以下 32px／640px以下 20px）。
   ============================================================= */
.pm-mock .cases .cs-swipe{
  margin:18px 0 6px; font-size:13px; font-weight:700;
  color:var(--sky-dark,#14719F);
}
.pm-mock .cases .cs-scroll{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  margin:0 -60px; padding:4px 60px 16px;
}
.pm-mock .cases .cs-row{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:300px; gap:18px; align-items:stretch;
}
.pm-mock .cases .cs-row .ccx-card{ scroll-snap-align:start; }
/* 横一列だと文字量の差で高さが揃わないので、タイトルは2行までに */
.pm-mock .cases .cs-row .ccx-ttl{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
@media(max-width:1060px){
  .pm-mock .cases .cs-scroll{ margin:0 -32px; padding:4px 32px 16px; }
}
@media(max-width:640px){
  .pm-mock .cases .cs-swipe{ font-size:12px; margin:14px 0 6px; }
  .pm-mock .cases .cs-scroll{ margin:0 -20px; padding:4px 20px 14px; }
  .pm-mock .cases .cs-row{ grid-auto-columns:250px; gap:12px; }
  /* case-cards.css はスマホで「写真を左・文字を右」の横組みにしている。
     ここは横スクロールの縦長カードなので、PCと同じ縦組みに戻す。 */
  .pm-mock .cases .cs-row .ccx-card{ flex-direction:column; }
  .pm-mock .cases .cs-row .ccx-thumb{
    flex:none; aspect-ratio:16/9;
    border-right:0; border-bottom:1px solid var(--line,#E2E8F1);
  }
  .pm-mock .cases .cs-row .ccx-body{ padding:12px 13px 11px; }
  .pm-mock .cases .cs-row .ccx-ttl{ font-size:14.5px; }
}

/* =============================================================
   v1.81.0  TOP：文字サイズの統一（長谷川さんレビュー）
   -------------------------------------------------------------
   TOP には body.is-top-mock で全体を 1.25 倍にする調整（v0.99.10）が
   入っているが、クラス名を1つずつ列挙する方式のため、あとから足した
   CONCEPT（.cc-*）と SERVICE のカテゴリ導線（.sc-*）が登録されず、
   そこだけ旧スケールのまま取り残されていた（本文 12.5px 対 20px）。

   ここで基準を1つに揃える。
     ブロック見出し      21px
     小見出し・カテゴリ  19.5px
     本文・リスト項目    18px
     リード文            19.5px
     タグ・キャプション  16px
   「課題から探す」だけ本文 20px と大きかったので、あわせて 18px に
   下げて同じ基準に乗せている。
   セレクタに body.is-top-mock を付けているのは、v0.99.10 の一括指定
   （詳細度 0,3,0）を確実に上書きするため。
   ============================================================= */

/* ---- CONCEPT ---- */
body.is-top-mock .pm-mock .concept .cc-lead{font-size:19.5px;line-height:1.95}
body.is-top-mock .pm-mock .cc-axis-item h3{font-size:21px}
body.is-top-mock .pm-mock .cc-axis-item p{font-size:18px;line-height:1.85}
body.is-top-mock .pm-mock .cc-ax-tags span{font-size:16px;padding:5px 12px}
body.is-top-mock .pm-mock .cc-close p{font-size:18px;line-height:1.9}

/* ---- SERVICE：カテゴリ導線の4枚 ---- */
body.is-top-mock .pm-mock .svc-entry .sc-lead{font-size:19.5px;margin-bottom:16px}
body.is-top-mock .pm-mock .sc-tag{font-size:16px;padding:4px 11px;margin-bottom:12px}
body.is-top-mock .pm-mock .sc-card b{font-size:21px;line-height:1.45;margin-bottom:8px}
body.is-top-mock .pm-mock .sc-card p{font-size:18px;line-height:1.7}
body.is-top-mock .pm-mock .sc-more{font-size:17px;padding-top:14px}
body.is-top-mock .pm-mock .sc-card{padding:22px 20px 18px}

/* ---- 課題から探す：大きかったぶんを基準に寄せる ---- */
body.is-top-mock .pm-mock .challenge .challenge-lead{font-size:19.5px;line-height:1.95}
body.is-top-mock .pm-mock .ch-col .ch-cat{font-size:19.5px}
body.is-top-mock .pm-mock .ch-col .ch-cat .no{font-size:17px}
body.is-top-mock .pm-mock .ch-item{font-size:18px}

@media (max-width:900px){
  body.is-top-mock .pm-mock .concept .cc-lead{font-size:16.5px}
  body.is-top-mock .pm-mock .cc-axis-item h3{font-size:19px}
  body.is-top-mock .pm-mock .cc-axis-item p{font-size:16.5px}
  body.is-top-mock .pm-mock .cc-ax-tags span{font-size:14.5px;padding:4px 10px}
  body.is-top-mock .pm-mock .cc-close p{font-size:16.5px}

  body.is-top-mock .pm-mock .svc-entry .sc-lead{font-size:16.5px}
  body.is-top-mock .pm-mock .sc-tag{font-size:14.5px}
  body.is-top-mock .pm-mock .sc-card b{font-size:18px}
  body.is-top-mock .pm-mock .sc-card p{font-size:15.5px}
  body.is-top-mock .pm-mock .sc-more{font-size:15px}
  body.is-top-mock .pm-mock .sc-card{padding:16px 15px 14px}

  body.is-top-mock .pm-mock .challenge .challenge-lead{font-size:16.5px}
}

@media (max-width:640px){
  body.is-top-mock .pm-mock .ch-col .ch-cat{font-size:17.5px}
  body.is-top-mock .pm-mock .ch-item{font-size:16.5px}
}

/* =============================================================
   v1.83.0  TOP：独自資産バナー（METHOD / AI）の文字サイズ
   -------------------------------------------------------------
   v1.81.0 で CONCEPT と SERVICE カードを基準に揃えたとき、
   .asset-banners（.ab-*）を拾い漏らしていた。ここだけ
   リード文 13px・タグ 11px と旧スケールのままだったので合わせる。
   ============================================================= */
body.is-top-mock .pm-mock .ab-label{font-size:14px;margin-bottom:14px}
body.is-top-mock .pm-mock .ab-title{font-size:22px;margin-bottom:14px}
body.is-top-mock .pm-mock .ab-lead{font-size:18px;line-height:1.85;margin-bottom:20px}
body.is-top-mock .pm-mock .ab-tags span{font-size:15px;padding:6px 12px}
body.is-top-mock .pm-mock .ab-more{font-size:17px}

@media (max-width:900px){
  body.is-top-mock .pm-mock .ab-label{font-size:12.5px}
  body.is-top-mock .pm-mock .ab-title{font-size:19px}
  body.is-top-mock .pm-mock .ab-lead{font-size:16px}
  body.is-top-mock .pm-mock .ab-tags span{font-size:13.5px}
  body.is-top-mock .pm-mock .ab-more{font-size:15px}
}