@charset "UTF-8";

/* ======================================
   Clinic Match 共通基盤（部品だけ）
====================================== */

/* ======================
   トークン
====================== */
:root {
  --cm-brand-blue:#2F86E6;
  --cm-brand-coral:#F08A82;
  --cm-brand-ink:#223243;

  --cm-color-bg:#f7f7f7;
  --cm-color-surface:#fff;
  --cm-color-border:#ddd;
  --cm-color-border-soft:#eee;
  --cm-color-text:#333;
  --cm-color-text-muted:#777;

  --cm-color-primary:var(--cm-brand-blue);
  --cm-color-accent:var(--cm-brand-coral);

  --cm-color-success:#2e7d32;
  --cm-color-danger:#d32f2f;

  --cm-radius-sm:6px;
  --cm-radius-md:10px;
  --cm-radius-lg:16px;

  --cm-shadow-soft:0 2px 6px rgba(0,0,0,.06);
  --cm-shadow-card:0 4px 14px rgba(0,0,0,.08);
}

/* ======================
   reset / base
====================== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: system-ui,-apple-system,"Noto Sans JP",sans-serif;
  background:var(--cm-color-bg);
  color:var(--cm-color-text);
  line-height:1.6;
}

/* ======================
   layout
====================== */
.page-wrapper{
  max-width:960px;
  margin:0 auto;
  padding:16px;
}

/* ======================
   typography
====================== */
h1,h2,h3{
  font-weight:700;
  margin:0 0 .75em;
}

a{
  color:var(--cm-color-primary);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

.small-note{
  font-size:.85rem;
  color:var(--cm-color-text-muted);
}

/* ======================
   card
====================== */
.card{
  background:#fff;
  border:1px solid var(--cm-color-border-soft);
  border-radius:var(--cm-radius-md);
  box-shadow:var(--cm-shadow-soft);
  padding:14px 16px;
}

/* ======================
   button
====================== */
.btn{
  padding:10px 12px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  text-decoration:none;
}

.btn-primary{
  background:var(--cm-color-primary);
  color:#fff;
}

.btn-secondary{
  background:var(--cm-color-accent);
  color:#fff;
}

.btn-danger{
  background:var(--cm-color-danger);
  color:#fff;
}

/* ======================
   badge
====================== */
.badge{
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
	border: 1px solid #aaa;
	background: var(--cm-brand-coral);
	color: #fff;
}

.badge--public{
  background:#e8f5e9;
  color:#2e7d32;
}

.badge--private{
  background:#eee;
  color:#666;
}
.badge--type-feature { /* 特集 */ background-color: #E85C5C}
.badge--type-station { /* エリア別 */ background-color: #3A78C2}
.badge--type-ranking { /* ランキング */ background-color: #D98C1A}
.badge--type-column  { /* コラム */ background-color: #A07ED6}
.badge--type-unknown { /* 想定外 */ }
/* ======================
   form
====================== */
input,textarea,select{
  width:100%;
  padding:8px 10px;
  border:1px solid #ccc;
  border-radius:8px;
}

/* ======================
   alert
====================== */
.alert{
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
}

.alert--danger{
  background:#ffebee;
  color:#c62828;
}

/* ======================
   util
====================== */
.text-center{text-align:center;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}


/* ------------------------------
   ヘッダー（common.css）
------------------------------ */
.site-header {
  background: var(--cm-color-surface);
  box-shadow: var(--cm-shadow-soft);
}

.site-header__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-header__logo {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--cm-color-text);
  text-decoration: none;
  display: inline-block;
}

.site-header__logo img{
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
}

.site-header__nav {
  font-size: 0.9rem;
}

.site-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--cm-color-text);
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--cm-color-primary-soft);
  color: var(--cm-color-primary-dark);
}

/* ------------------------------
   フッター（共通）
------------------------------ */
.site-footer {
  border-top: 1px solid var(--cm-color-border-soft);
  background: #fafafa;
  padding: 14px 10px 20px;
}

.site-footer__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--cm-color-text-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.site-footer__links a {
  color: var(--cm-color-text-muted);
}

.site-footer__links a:hover {
  color: var(--cm-color-primary);
}

.site-footer__copy {
  opacity: 0.9;
}