/* ============================================
   Page-specific styles — sub pages
   ============================================ */

/* Page hero (breadcrumb + title) */
.page-hero {
  background: linear-gradient(180deg, #F7FAFC 0%, #E6F2FA 100%);
  padding: clamp(72px, 10vw, 120px) var(--pad) clamp(56px, 7vw, 80px);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px;
  background: radial-gradient(circle at center, rgba(95,179,230,0.16), transparent 65%);
  pointer-events: none;
}
.page-hero-inner {
  max-width: var(--max); margin: 0 auto;
  position: relative;
}
.breadcrumb {
  display: flex; gap: 8px; font-family: var(--sans); font-size: 12px; color: var(--ink-sub);
  margin-bottom: 24px; letter-spacing: 0.05em;
}
.breadcrumb a { color: var(--ink-sub); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb span { color: var(--blue); }
.page-eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--blue); margin-bottom: 16px;
}
.page-title {
  font-size: clamp(32px, 5vw, 56px);
  color: var(--blue-deep); line-height: 1.35;
  margin-bottom: 20px;
}
.page-lede {
  font-size: clamp(15px, 1.2vw, 17px); color: var(--ink);
  line-height: 2; max-width: 720px;
}

/* Content sections */
.content-section { padding: var(--section-y) var(--pad); }
.content-inner { max-width: var(--max); margin: 0 auto; }
.content-inner.narrow { max-width: 800px; }

/* Service detail: flow */
.flow-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative;
}
.flow-item {
  padding: 32px 24px;
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
}
.flow-step {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--blue); letter-spacing: 0.15em; margin-bottom: 8px;
}
.flow-num {
  font-family: var(--sans); font-weight: 700; font-size: 40px;
  color: var(--blue-light); line-height: 1; margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.flow-item h3 { font-size: 16px; color: var(--blue-deep); margin-bottom: 10px; }
.flow-item p { font-size: 13px; color: var(--ink-sub); line-height: 1.8; }

/* Pricing */
.price-table {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.price-card {
  padding: 40px 32px; background: #fff;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.price-card.featured { border-color: var(--blue); border-width: 2px; position: relative; }
.price-card.featured::before {
  content: "おすすめ"; position: absolute; top: -12px; right: 20px;
  background: var(--blue); color: #fff;
  padding: 4px 12px; font-size: 11px; letter-spacing: 0.1em;
}
.price-plan {
  font-family: var(--sans); font-size: 12px; color: var(--blue);
  font-weight: 600; letter-spacing: 0.15em; margin-bottom: 12px;
}
.price-name { font-size: 22px; color: var(--blue-deep); margin-bottom: 16px; }
.price-amount {
  font-family: var(--sans); font-weight: 700;
  font-size: 40px; color: var(--blue-dark); letter-spacing: -0.02em;
  line-height: 1; margin-bottom: 6px;
}
.price-amount small { font-size: 14px; color: var(--ink-sub); font-weight: 500; margin-left: 6px; }
.price-note { font-size: 12px; color: var(--ink-sub); margin-bottom: 24px; }
.price-features {
  border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 24px; flex: 1;
}
.price-features li {
  padding: 8px 0 8px 24px; position: relative;
  font-size: 13px;
}
.price-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--blue);
  font-weight: 700;
}

/* Members (team) */
.member-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.member-card {
  border: 1px solid var(--line);
  background: #fff;
}
.member-photo {
  aspect-ratio: 1/1;
  background: repeating-linear-gradient(45deg, rgba(27,60,122,0.06) 0 10px, rgba(95,179,230,0.08) 10px 20px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.member-photo span {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink-sub);
  background: rgba(255,255,255,0.85); padding: 4px 10px;
}
.member-body { padding: 24px; }
.member-role {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  color: var(--blue); letter-spacing: 0.15em; margin-bottom: 8px;
}
.member-name {
  font-size: 20px; color: var(--blue-deep); margin-bottom: 4px;
}
.member-name-en {
  font-family: var(--sans); font-size: 12px; color: var(--ink-sub); margin-bottom: 16px;
}
.member-bio { font-size: 13px; color: var(--ink-sub); line-height: 1.9; }

/* Company info table */
.company-table {
  width: 100%;
  border-collapse: collapse;
}
.company-table tr { border-bottom: 1px solid var(--line); }
.company-table th, .company-table td {
  padding: 20px 0; vertical-align: top; text-align: left;
  font-size: 14px;
}
.company-table th {
  width: 180px; color: var(--blue); font-weight: 600;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em;
  padding-right: 24px;
}
.company-table td { color: var(--ink); line-height: 1.9; }

/* Cases list */
.case-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.case-list-card {
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.3s, box-shadow 0.3s;
  display: block;
}
.case-list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10,36,86,0.08);
}

/* Form */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px;
}
.contact-info {
  background: var(--blue-deep); color: #fff;
  padding: 40px 32px;
  align-self: start;
}
.contact-info h3 { color: #fff; font-size: 22px; margin-bottom: 20px; }
.contact-info p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 2; margin-bottom: 20px; }
.contact-info dl {
  margin: 24px 0 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.contact-info dt {
  font-family: var(--sans); font-size: 11px;
  color: var(--blue-light); letter-spacing: 0.1em; margin-bottom: 6px;
}
.contact-info dd { margin: 0 0 16px; font-size: 14px; }
.contact-info dd strong { font-weight: 500; }

.form label {
  display: block; margin-bottom: 24px;
}
.form .label-text {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--blue-deep);
  margin-bottom: 8px;
}
.form .required {
  background: var(--blue); color: #fff;
  font-size: 10px; padding: 2px 6px;
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.1em;
}
.form .optional {
  background: rgba(10,36,86,0.08); color: var(--ink-sub);
  font-size: 10px; padding: 2px 6px;
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.1em;
}
.form input, .form textarea, .form select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--jp); font-size: 15px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.2s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--blue);
}
.form textarea { min-height: 140px; resize: vertical; }
.form-actions { margin-top: 32px; }
.form-note { font-size: 12px; color: var(--ink-sub); margin-bottom: 16px; }

/* Column list */
.column-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.column-list-card {
  display: block;
  transition: transform 0.3s;
}
.column-list-card:hover { transform: translateY(-4px); }
.column-list-card .media-placeholder { aspect-ratio: 3/2; margin-bottom: 16px; }
.column-list-card .column-title {
  font-size: 16px; color: var(--blue-deep); margin: 10px 0;
  line-height: 1.6;
}

/* Filter pills */
.filter-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.pill {
  padding: 8px 16px; border: 1px solid var(--line);
  font-size: 13px; color: var(--ink);
  background: #fff; cursor: pointer;
  transition: all 0.2s;
}
.pill:hover, .pill.active {
  background: var(--blue); color: #fff; border-color: var(--blue);
}

/* Recruit */
.recruit-card {
  padding: 32px; background: #fff; border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: center; margin-bottom: 16px;
  transition: border-color 0.2s;
}
.recruit-card:hover { border-color: var(--blue); }
.recruit-card h3 { font-size: 20px; color: var(--blue-deep); margin-bottom: 8px; }
.recruit-meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-sub);
}
.recruit-meta span { display: flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  .flow-list { grid-template-columns: repeat(2, 1fr); }
  .price-table { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: 1fr; }
  .case-list { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .column-list { grid-template-columns: 1fr; }
  .company-table th { width: 120px; font-size: 11px; }
  .recruit-card { grid-template-columns: 1fr; }
}


/* Editorial cover thumbnails — column & case media */
.media-placeholder.cv{position:relative;border:none;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0A2456 0%,#16356e 55%,#1f5fa6 100%);}
.media-placeholder.cv::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 12%,rgba(95,179,230,.30),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px);pointer-events:none;}
.cv-ico{position:relative;width:54px;height:54px;color:#fff;opacity:.96;z-index:1;}
.cv-wm{position:absolute;right:-22px;bottom:-26px;width:165px;height:165px;color:#fff;opacity:.08;}
.cv-cap{position:absolute;left:16px;bottom:13px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;font-weight:600;color:rgba(255,255,255,.92);z-index:1;}
.case-list .case-list-card:nth-child(3n+2) .cv:not(.cv--logo){background:linear-gradient(135deg,#0e2e63 0%,#1B3C7A 50%,#3b82c4 100%);}
.case-list .case-list-card:nth-child(3n) .cv:not(.cv--logo){background:linear-gradient(135deg,#0A2456 0%,#123a63 60%,#2a6b9e 100%);}
.column-list .column-list-card:nth-child(3n+2) .cv:not(.cv--logo){background:linear-gradient(135deg,#0e2e63 0%,#1B3C7A 50%,#3b82c4 100%);}
.column-list .column-list-card:nth-child(3n) .cv:not(.cv--logo){background:linear-gradient(135deg,#0A2456 0%,#123a63 60%,#2a6b9e 100%);}
.case-tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);color:#fff;padding:5px 11px;font-family:var(--sans);font-size:10px;letter-spacing:.12em;font-weight:600;z-index:2;}

.media-placeholder.cv--logo{background:#fff;border-bottom:1px solid var(--line);}
.media-placeholder.cv--logo::before{display:none;}
.cv-logo{position:relative;z-index:1;width:92%;max-height:84%;object-fit:contain;}
.cv-logo[src*="logo-real"]{transform:translateY(7%);}
.media-placeholder.cv--logo .case-tag,.cv--logo + .case-tag{background:var(--blue-dark);border-color:transparent;}

/* ===== editorial / photo covers for cases & columns (2026-06-30) ===== */
.cv--case .cv-ico{ position:absolute !important; left:18px; bottom:54px; top:auto; right:auto; width:40px; height:40px; color:#fff; opacity:.95; z-index:2; }
.cv--case .cv-stat{ position:absolute; left:18px; bottom:15px; z-index:2; color:#fff; font-family:var(--serif); font-weight:700; font-size:15px; letter-spacing:.02em; line-height:1.2; }
.cv--case .cv-stat b{ color:var(--gold); font-size:30px; font-weight:700; line-height:1; }
.cv--case .cv-mark{ position:absolute; right:13px; bottom:6px; z-index:1; font-family:var(--serif); font-weight:700; font-size:34px; color:rgba(255,255,255,.10); letter-spacing:1px; pointer-events:none; }
.media-placeholder.cv--photo{ background:#0A2456; }
.cv--photo .cv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cv--photo::before{ display:none !important; }
.cv--photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,36,86,0) 38%,rgba(10,36,86,.55) 100%); z-index:1; }
.cv--photo .cv-cap{ z-index:2; }
.cv--col .cv-ico{ position:absolute; left:18px; top:42%; transform:translateY(-50%); width:42px; height:42px; color:#fff; opacity:.92; z-index:2; }
.cv--col .cv-cap{ z-index:2; }
.cv--col .cv-soon{ position:absolute; top:12px; right:12px; z-index:2; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.08em; color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.30); padding:4px 9px; }
.cv--col .cv-mark{ position:absolute; right:13px; bottom:6px; z-index:1; font-family:var(--serif); font-weight:700; font-size:30px; color:rgba(255,255,255,.10); letter-spacing:1px; pointer-events:none; }

/* dialog logo badge (white chip + real blue logo) 2026-06-30 */
.cv--case .cv-mark, .cv--col .cv-mark{ right:12px !important; bottom:11px !important; left:auto !important; top:auto !important; width:66px !important; height:26px !important; padding:0 !important; background:#fff url("logo.png") center / 48px auto no-repeat !important; border-radius:4px !important; box-shadow:0 2px 9px rgba(10,36,86,.22) !important; font-size:0 !important; color:transparent !important; letter-spacing:0 !important; overflow:hidden !important; border:0 !important; }
.cv--case .cv-stat, .cv--col .cv-stat, .cv .cv-cap{ background:transparent !important; }

/* logo badge size bump v2 (bigger logo) 2026-06-30 */
.cv--case .cv-mark, .cv--col .cv-mark{ width:86px !important; height:34px !important; background-size:64px auto !important; border-radius:5px !important; }