/* ============================================================
   components.css  —  部品
   ボタンは3種＋バリアント／サイズ違いは作らない（幅は親が決める）
   ============================================================ */
@layer components {

/* 矢印アイコン（mask-image 用・色は文字色に追従） */
:root {
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* ============================================================
   ボタン：c-btn ＋ --primary / --secondary / --text ＋ wide / invert
   ============================================================ */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1em 2.1em;
  font-family: var(--ff-sans);
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Primary：主要CTA（ここだけ青緑グラデを許可） */
.c-btn--primary {
  background: var(--c-brand-grad);
  color: var(--c-text-invert);
}
.c-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.03); }

/* Secondary：枠線 */
.c-btn--secondary {
  background: transparent;
  border-color: var(--c-brand-800);
  color: var(--c-brand-800);
}
.c-btn--secondary:hover { background: var(--c-brand-50); }

/* Text：カード内・リスト内のリンク */
.c-btn--text {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--c-brand-800);
  font-weight: var(--fw-semibold);
}
.c-btn--text:hover { color: var(--c-brand-900); }

/* 幅いっぱい */
.c-btn--wide { width: 100%; }

/* 濃色背景の上に置く白ボタン */
.c-btn--invert {
  background: var(--c-bg);
  color: var(--c-brand-800);
}
.c-btn--invert:hover { background: var(--c-brand-50); }

/* 矢印付き（HTMLに<svg>を書かず、疑似要素で付与） */
.c-btn--arrow::after {
  content: "";
  width: 1.1em; height: 1.1em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow-right);
          mask-image: var(--icon-arrow-right);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: transform var(--dur) var(--ease);
}
.c-btn--arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   カード
   ============================================================ */
.c-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.c-card--link:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.c-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.c-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.c-card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.c-card__text  { color: var(--c-text-muted); font-size: var(--fs-small); flex: 1; }

/* ============================================================
   タグ／バッジ（CASE 01 など）
   ============================================================ */
.c-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-num);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  color: var(--c-text-invert);
  background: var(--c-brand-800);
  padding: 0.5em 1.1em;
  border-radius: var(--r-pill);
}
.c-tag--soft { background: var(--c-brand-50); color: var(--c-brand-800); }

/* ============================================================
   指標（数値カード）— 数字だけを並べる。語句は入れない
   ============================================================ */
.c-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-7); align-items: baseline; }
.c-metric__value {
  font-family: var(--ff-num);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: var(--fw-bold);
  color: var(--c-brand-800);
  line-height: 1.21;
}
.c-metric__unit { font-size: 0.5em; font-weight: var(--fw-semibold); margin-left: 0.1em; }
.c-metric__label { font-size: var(--fs-small); color: var(--c-text-muted); margin-top: var(--sp-2); }

/* ============================================================
   アイコン（Lucide 統一・stroke 1.75・round）
   ============================================================ */
.c-icon {
  width: var(--icon-md); height: var(--icon-md);
  stroke: currentColor; fill: none;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; vertical-align: middle;
}
.c-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.c-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* 箇条書きの頭アイコン（◆や✓の文字記号を置換） */
.c-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.c-list__item { display: flex; gap: 0.6em; align-items: flex-start; }
.c-list__item .c-icon { color: var(--c-brand-800); margin-top: 0.15em; }

/* ============================================================
   BEFORE / AFTER 比較
   ============================================================ */
.c-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.c-compare__col {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.c-compare__col--after { border-color: var(--c-accent-green); background: #f4f9ee; }
.c-compare__label {
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide); color: var(--c-text-subtle);
  margin-bottom: var(--sp-4);
}
.c-compare__col--after .c-compare__label {
  display: inline-block; color: var(--c-text-invert);
  background: var(--c-accent-green); padding: 0.3em 0.9em; border-radius: var(--r-sm);
}
@media (max-width: 860px) { .c-compare { grid-template-columns: 1fr; } }

/* ============================================================
   図版キャプション
   ============================================================ */
.c-figure { margin: var(--sp-6) 0; }
.c-figure img { border-radius: var(--r-lg); border: 1px solid var(--c-line); }
.c-figure figcaption {
  margin-top: var(--sp-3); text-align: center;
  font-size: var(--fs-caption); color: var(--c-text-subtle);
}
}

/* ---------- Contact modal（全ページ共通：お問い合わせ同意モーダル） ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:500;letter-spacing:.04em;padding:17px 38px;border-radius:50px;transition:.35s}
.btn.primary{background:var(--grad);color:#fff;font-weight:700}
.btn.primary:hover{transform:translateY(-2px)}
.btn.ghost{border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--cyan);color:var(--text)}
.contact-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.contact-modal.on{display:flex}
.cm-overlay{position:absolute;inset:0;background:rgba(16,32,52,.45);backdrop-filter:blur(3px)}
.cm-box{position:relative;z-index:2;background:#fff;border:1px solid var(--line);border-radius:18px;max-width:560px;width:100%;max-height:86vh;display:flex;flex-direction:column;padding:34px 36px;box-shadow:0 40px 90px -30px rgba(16,32,52,.4)}
.cm-box h3{font-family:var(--serif);font-weight:700;font-size:21px;margin-bottom:16px;color:var(--text)}
.cm-body{overflow-y:auto;padding-right:6px}
.cm-box p{color:var(--text-2);font-size:16px;line-height:1.7;margin-bottom:12px}
.cm-box a{color:var(--cyan-bright);text-decoration:underline}
.cm-box .cm-sub{font-weight:700;color:var(--text);margin-bottom:6px;font-size:16px}
.cm-box .cm-list{margin:0 0 14px;padding-left:1.3em;color:var(--text-2);font-size:16px;line-height:1.7}
.cm-box .cm-list li{list-style:disc;margin-bottom:4px}
.cm-box .cm-note{font-size:16px;color:var(--text-3);line-height:1.8;margin-bottom:0}
.cm-actions{display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.cm-actions .btn{padding:13px 26px;font-size:16px}
@media(max-width:520px){.cm-actions{justify-content:stretch}.cm-actions .btn{flex:1;justify-content:center}}