/* ============================================================
   column.css  —  ココトモ SEO記事 共通スタイル
   サイト共通 base.css / load-head.css の影響を受ける前提で
   .cc-article スコープでリセット＆上書きしている
   キーカラー：#FF8800（#f80）
   ============================================================ */

/* ---------- CSS変数（.cc-article 配下に適用） ---------- */
.cc-article {
  --cc-primary:        #FF8800;   /* ココトモ キーカラー */
  --cc-primary-dark:   #E66E00;   /* テキスト・濃いめのアクセント */
  --cc-primary-light:  #FFF1DC;   /* 背景・淡い面 */
  --cc-primary-soft:   #FFE3BD;   /* やや濃いめの面 */
  --cc-accent:         #2DA88E;   /* 差し色（ティール） */
  --cc-accent-light:   #E5F5F1;
  --cc-yellow:         #FFC844;
  --cc-yellow-light:   #FFFBEE;
  --cc-yellow-text:    #8B6914;
  --cc-red:            #FC8181;
  --cc-red-dark:       #C53030;
  --cc-red-light:      #FFF5F5;
  --cc-text:           #2D3748;
  --cc-muted:          #718096;
  --cc-border:         #E2E8F0;
  --cc-bg:             #FFFFFF;
  --cc-white:          #FFFFFF;
  --cc-radius:         12px;
  --cc-radius-sm:      8px;
  --cc-shadow-card:    0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   ★★★ グローバルCSSリセット（最優先） ★★★
   サイト共通 base.css の .article ol li:before / .article ul > li:before
   が .cc-article 内のリストに干渉するのを無効化する。
   :where() で特異度を 0 に保ち、コンポーネント側が自然に勝つ設計。
   ============================================================ */

/* グローバルの疑似要素バッジ・丸点を全消し
   ::before は :where() の外側に置く（中に入れるとブラウザが解釈しない場合あり）
   特異度 = .cc-article(1) + :where(0) + ::before(1) = (0,1,1)
   → コンポーネント側の li::before（例：.cc-check-list li::before = 0,1,2）が勝つ */
.cc-article :where(ol > li, ul > li)::before,
.cc-article :where(ol > li, ul > li):before {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  counter-increment: none !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
}

/* グローバルが付ける li の余白・position をリセット（特異度 0,1,0 ＝ コンポーネントクラスと同じ）
   → 後方に書くコンポーネント側のクラスが source order で勝つ */
.cc-article :where(ol > li, ul > li) {
  padding-left: 0 !important;
  position: static !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.cc-article :where(ol, ul) {
  counter-reset: none !important;
  margin-left: 0 !important;
}

/* dl も干渉を受けるので一応リセット */
.cc-article dl {
  margin: 0 0 1.1em !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* デフォルトの装飾あり通常リスト（コンポーネントで自由に上書き可） */
.cc-article ol,
.cc-article ul {
  margin: 0 0 1.1em;
  padding-left: 1.6em;
  list-style: revert;
}
.cc-article ol > li,
.cc-article ul > li {
  margin-bottom: 0.45em;
}

/* ---------- ベース ---------- */
.cc-article {
  font-size: 16px;
  line-height: 1.85;
  color: var(--cc-text);
  max-width: 800px;
  margin: 0 auto 50px;
}

.cc-article p  { margin: 0 0 1.1em; }
.cc-article a  { color: var(--cc-primary-dark); }
.cc-article strong { color: var(--cc-text); font-weight: 700; }

/* ---------- 見出し ---------- */
.cc-article h2 {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--cc-text);
  background: var(--cc-primary-light);
  border-left: 5px solid var(--cc-primary);
  border-radius: 0 var(--cc-radius-sm) var(--cc-radius-sm) 0;
  padding: 0.55em 1em;
  margin: 2.4em 0 1em;
  line-height: 1.5;
}

.cc-article h3 {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--cc-primary-dark);
  border-bottom: 2px solid var(--cc-primary-light);
  padding-bottom: 0.35em;
  margin: 1.8em 0 0.7em;
}

/* ---------- リード文 ---------- */
.cc-lead {
  font-size: 1.02em;
  line-height: 2;
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  padding: 1.2em 1.5em;
  margin-bottom: 2em !important;
}

/* ---------- サマリーボックス ---------- */
.cc-summary {
  background: var(--cc-primary-light);
  border: 2px solid var(--cc-primary);
  border-radius: var(--cc-radius);
  padding: 1.2em 1.4em;
  margin: 0 0 2em;
}

.cc-summary__title {
  font-weight: 700;
  font-size: 1em;
  color: var(--cc-primary-dark);
  margin: 0 0 0.6em !important;
}

.cc-summary__list {
  margin: 0 !important;
  padding-left: 1.4em !important;
  list-style: disc !important;
}

.cc-summary__list li { margin-bottom: 0.4em !important; }

/* ---------- インフォボックス 3種 ---------- */
.cc-box {
  border-radius: var(--cc-radius);
  padding: 1.1em 1.4em;
  margin: 1.5em 0;
  background-color: var(--cc-white);
}

.cc-box__title {
  font-weight: 700;
  margin: 0 0 0.5em !important;
}

.cc-box ul {
  list-style: disc !important;
  padding-left: 1.4em !important;
}
.cc-box ul:last-child,
.cc-box p:last-child { margin-bottom: 0 !important; }

/* 💡 info — オレンジ */
.cc-box--info {
  background: var(--cc-primary-light);
  border-left: 4px solid var(--cc-primary);
}
.cc-box--info .cc-box__title { color: var(--cc-primary-dark); }

/* 🙋 tip — イエロー */
.cc-box--tip {
  background: var(--cc-yellow-light);
  border-left: 4px solid var(--cc-yellow);
}
.cc-box--tip .cc-box__title { color: var(--cc-yellow-text); }

/* ⚠️ warn — レッド */
.cc-box--warn {
  background: var(--cc-red-light);
  border-left: 4px solid var(--cc-red);
}
.cc-box--warn .cc-box__title { color: var(--cc-red-dark); }

/* ---------- テーブル ---------- */
.cc-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
  border-radius: var(--cc-radius-sm);
}

.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93em;
  margin: 0;
  min-width: 420px;
  background: var(--cc-white);
}

.cc-table th,
.cc-table td {
  border: 1px solid var(--cc-border);
  padding: 0.7em 0.9em;
  vertical-align: middle;
  text-align: left;
}

.cc-table thead th {
  background: var(--cc-primary);
  color: var(--cc-white);
  font-weight: 700;
  white-space: nowrap;
}

.cc-table tbody tr:nth-child(even) td { background: var(--cc-bg); }
.cc-table tbody tr:hover td { background: var(--cc-primary-light); }

.cc-table--compare .cc-table--highlight { background: var(--cc-primary-light) !important; }
.cc-table--compare thead .cc-table--highlight {
  background: var(--cc-primary-dark) !important;
  color: var(--cc-white);
}

/* ---------- バッジ ---------- */
.cc-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  font-size: 0.83em;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
  color: var(--cc-white);
}
/* セマンティックな色（HTML側は変更せずに済むよう既存名を維持） */
.cc-badge--green  { background: #38A169; }                    /* yes / 肯定 */
.cc-badge--gray   { background: var(--cc-border); color: var(--cc-muted); }
.cc-badge--orange { background: var(--cc-primary); }
.cc-badge--red    { background: var(--cc-red-dark); }

/* ---------- ハイライト数値ボックス ---------- */
.cc-highlight-box {
  text-align: center;
  background: linear-gradient(135deg, #FF7A00 0%, #FFA040 100%);
  color: var(--cc-white);
  border-radius: var(--cc-radius);
  padding: 1.6em 1em;
  margin: 1.5em 0;
  box-shadow: 0 4px 14px rgba(255, 136, 0, 0.18);
}

.cc-highlight-box__label {
  font-size: 0.88em;
  opacity: 0.95;
  margin: 0 0 0.3em !important;
}

.cc-highlight-box__value {
  font-size: 1.1em;
  font-weight: 700;
  margin: 0 0 0.3em !important;
  line-height: 1.3;
}

.cc-highlight-box__value span {
  font-size: 2.4em;
  display: inline-block;
  line-height: 1;
}

.cc-highlight-box__note {
  font-size: 0.78em;
  opacity: 0.85;
  margin: 0 !important;
}

/* ---------- 出典注釈 ---------- */
.cc-source {
  font-size: 0.8em !important;
  color: var(--cc-muted) !important;
  line-height: 1.7 !important;
  margin: -0.5em 0 1.5em !important;
  padding-left: 1em;
  border-left: 2px solid var(--cc-border);
}
.cc-source a {
  color: var(--cc-muted) !important;
  text-decoration: underline;
}
.cc-source a:hover { color: var(--cc-primary-dark) !important; }

/* ---------- カードグリッド ---------- */
.cc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin: 1.5em 0;
}

.cc-card {
  background: var(--cc-white);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  padding: 1.1em 0.9em;
  text-align: center;
  box-shadow: var(--cc-shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(255, 136, 0, 0.15);
  border-color: var(--cc-primary-soft);
}

.cc-card__icon  { font-size: 2em; line-height: 1; margin: 0 0 0.3em !important; }
.cc-card__title { font-weight: 700; font-size: 0.93em; color: var(--cc-primary-dark); margin: 0 0 0.3em !important; }
.cc-card__desc  { font-size: 0.8em; color: var(--cc-muted); margin: 0 !important; line-height: 1.55; }

/* ---------- 2カラム（メリット／デメリット） ---------- */
.cc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.5em 0;
}

@media (max-width: 560px) {
  .cc-two-col { grid-template-columns: 1fr; }
}

.cc-merit, .cc-demerit {
  border-radius: var(--cc-radius);
  padding: 1.1em 1.2em;
}

.cc-merit {
  background: var(--cc-primary-light);
  border: 1px solid var(--cc-primary);
}

.cc-demerit {
  background: var(--cc-red-light);
  border: 1px solid var(--cc-red);
}

.cc-merit__title, .cc-demerit__title {
  font-weight: 700;
  font-size: 1em;
  margin: 0 0 0.7em !important;
}

.cc-merit__title   { color: var(--cc-primary-dark); }
.cc-demerit__title { color: var(--cc-red-dark); }

.cc-merit__list, .cc-demerit__list {
  margin: 0 !important;
  padding-left: 1.3em !important;
  list-style: disc !important;
}
.cc-merit__list li, .cc-demerit__list li { margin-bottom: 0.4em !important; }

/* ---------- チェックリスト ---------- */
.cc-check-list {
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  padding: 0.5em 1em;
  margin: 1.5em 0;
  border: 1px solid var(--cc-border);
}

.cc-check-list ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.cc-check-list li {
  padding: 0.7em 0.5em 0.7em 2.2em !important;
  position: relative !important;
  border-bottom: 1px solid var(--cc-border);
  margin: 0 !important;
}

.cc-check-list li:last-child { border-bottom: none; }

.cc-check-list li::before {
  content: '✔' !important;
  display: block !important;
  color: var(--cc-primary) !important;
  font-weight: 700;
  position: absolute !important;
  left: 0.5em !important;
  top: 0.7em !important;
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* ---------- ステップリスト ---------- */
.cc-steps {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 1.5em 0 !important;
  position: relative;
  counter-reset: none !important;
}

/* 縦線：カード内の番号バッジ中央を縦に貫く
   位置 = カード padding-left (1.2em) + バッジ半径 (18px) - 線の半分 (1px) */
.cc-steps::before {
  content: '';
  position: absolute;
  left: calc(1.2em + 17px);
  top: calc(1.15em + 18px);
  bottom: calc(1.15em + 18px);
  width: 2px;
  background: var(--cc-primary-soft);
  z-index: 0;
}

.cc-step {
  display: flex !important;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px !important;
  padding: 1.15em 1.2em !important;
  background: var(--cc-white);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow-card);
  position: relative !important;
  z-index: 1;
}

/* グローバル ol li:before の番号は無効化済（上のリセットで） */
.cc-step__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--cc-primary);
  color: var(--cc-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
}

.cc-step__body  { flex: 1; min-width: 0; }
.cc-step__title { font-weight: 700; margin: 0 0 0.25em !important; color: var(--cc-primary-dark); }
.cc-step__desc  { font-size: 0.93em; margin: 0 !important; color: var(--cc-text); line-height: 1.75; }

/* ---------- FAQアコーディオン（<details>/<summary> ベース） ---------- */
.cc-faq {
  margin: 1.5em 0;
}

/* 各QAをカード化して間にしっかり余白を入れる */
.cc-faq__item {
  background: var(--cc-white);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-sm);
  margin-bottom: 10px;
  box-shadow: var(--cc-shadow-card);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cc-faq__item:last-child { margin-bottom: 0; }

.cc-faq__item[open] {
  border-color: var(--cc-primary-soft);
  box-shadow: 0 3px 10px rgba(255, 136, 0, 0.10);
}

/* デフォルトの ▶ マーカーを消す */
.cc-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 1.05em 1.1em;
  font-size: 0.97em;
  font-weight: 600;
  color: var(--cc-text);
  line-height: 1.55;
  transition: color 0.15s, background 0.15s;
}
.cc-faq__item > summary::-webkit-details-marker { display: none; }
.cc-faq__item > summary::marker { display: none; content: ''; }

.cc-faq__item > summary:hover {
  color: var(--cc-primary-dark);
  background: var(--cc-primary-light);
}
.cc-faq__item[open] > summary {
  color: var(--cc-primary-dark);
  border-bottom: 1px solid var(--cc-primary-light);
}

.cc-faq__item > summary > span:first-child { flex: 1; }

.cc-faq__icon {
  flex-shrink: 0;
  color: var(--cc-primary);
  font-size: 0.8em;
  display: inline-block;
  transition: transform 0.2s ease;
}
.cc-faq__item[open] .cc-faq__icon { transform: rotate(180deg); }

.cc-faq__a {
  padding: 1em 1.1em 1.1em;
  background: var(--cc-bg);
  font-size: 0.94em;
  line-height: 1.85;
  color: var(--cc-text);
}
.cc-faq__a p:last-child { margin-bottom: 0 !important; }

/* 旧 button ベースの FAQ も一応動くように残す */
.cc-faq__q {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 1em 0.5em;
  font-size: 0.97em;
  font-weight: 600;
  color: var(--cc-text);
  text-align: left;
  font-family: inherit;
  line-height: 1.55;
}
.cc-faq__q[aria-expanded="true"] { color: var(--cc-primary-dark); }
.cc-faq__q[aria-expanded="true"] .cc-faq__icon { transform: rotate(180deg); }

/* ---------- CTAボックス ---------- */
.cc-cta {
  background: linear-gradient(135deg, #FF7A00 0%, #FFA040 100%);
  border-radius: var(--cc-radius);
  padding: 2em 1.5em;
  text-align: center;
  margin: 2.5em 0 1em;
  color: var(--cc-white);
  box-shadow: 0 6px 20px rgba(255, 136, 0, 0.22);
}

.cc-cta__title {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0 0 0.5em !important;
  line-height: 1.5;
  color: var(--cc-white);
}

.cc-cta__desc {
  font-size: 0.94em;
  opacity: 0.97;
  margin: 0 0 1.3em !important;
  line-height: 1.85;
}

.cc-cta__btn {
  display: inline-block;
  background: var(--cc-white);
  color: var(--cc-primary-dark) !important;
  font-weight: 700;
  font-size: 1em;
  padding: 0.85em 2.4em;
  border-radius: 50px;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transition: opacity 0.15s, transform 0.15s;
}

.cc-cta__btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 600px) {
  .cc-article { font-size: 15px; }
  .cc-article h2 { font-size: 1.18em; }
  .cc-card-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-highlight-box__value span { font-size: 1.9em; }
  .cc-cta { padding: 1.5em 1em; }
  .cc-table { font-size: 0.88em; }
}

@media (max-width: 380px) {
  .cc-card-grid { grid-template-columns: 1fr; }
}