/*
 * 悩みスイッチの記事の部品集（2026-10-09。CEO「オウンドメディアは全部この水準をベースに統一しよう」10/8）
 * 上半分は EQUAL DESIGN コラムの部品集 equal-design-column-runtime/scripts/assets/column-rich-parts.css をそのまま写したもの。
 * 部品の見た目を直す時は EQUAL 側の正本を直し、ここへ写し直す（下の「悩みスイッチだけの土台」は残す）。
 * 写す時は、EQUALのサイト専用の上書き（見出しの SECTION 表示・箇条書き・目次・吹き出し）を外す。悩みスイッチの見た目を変えてしまうため。
 */
/*
 * コラムの部品集（2026-10-07 CEO指示「繰り返し使う要素は1つのシリーズのコンポーネントにして、全部に効く作り方に」）
 * 全記事で共通。記事ごとの書き分けはしない。色・大きさ・動きは最初の設定（:root）だけを直せば全部品に効く。
 * いまは確認版（20_work/structure-comparison/build_rewrite_preview.py）が読み込む。サイトへ組み込む時もこのファイルを正にする。
 * 部品：要点（rx-summary）・図解（rx-figure）・横スワイプ（rx-swipe）・ステップ（rx-step）・チェックリスト（rx-check）
 *       ・囲み（article-callout の上書き）・相談ボタン（rx-cta）・ハイライト（rx-mark）・丸数字（rx-num）
 */

/* ---- 設定（ここだけ直せば全部品に効く） ---- */
:root{
  --rx-ink:#1A1A1A;          /* 文字・丸数字の地 */
  --rx-gray:#6B6B66;         /* 補助の文字 */
  --rx-line:#E6E6E2;         /* 細い線 */
  --rx-soft:#F2F2F0;         /* 部品の地（グレー） */
  --rx-accent:#E8742A;       /* 差し色（1か所だけに使う） */
  --rx-mark:rgba(244,216,77,.72); /* ハイライト（元の黄色） */
  --rx-radius:16px;
  --rx-num-font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  /* 囲み：背景（サイトの色）と、アイコンの背景（同じ色の少し濃い色）と、アイコンの色 */
  --rx-point-bg:#EEF5FF;   --rx-point-icon-bg:#CFE0F7;   --rx-point-icon:#315F9C;
  --rx-caution-bg:#FFF0F2; --rx-caution-icon-bg:#F6CFD7; --rx-caution-icon:#A3485D;
  --rx-note-bg:#F6F6F3;    --rx-note-icon-bg:#E2E2DC;    --rx-note-icon:#4A4A45;
  --rx-ease:cubic-bezier(.2,.7,.2,1);
}


/* ---- 丸数字（要点・ステップで共通。円の中心に数字。「1」は形の偏りを補正） ---- */
.rx-num{box-sizing:border-box!important;flex-shrink:0;display:flex!important;align-items:center;justify-content:center;border-radius:50%;background:var(--rx-ink);color:#fff;font-family:var(--rx-num-font)!important;font-weight:700;font-variant-numeric:tabular-nums;line-height:1!important;letter-spacing:0!important;padding:0 0 .7px!important;text-align:center}
.rx-num--s{width:26px;height:26px;font-size:13px}
.rx-num--l{width:44px;height:44px;font-size:17px;padding-bottom:.6px!important}
.rx-num--s.rx-one{padding-left:1.3px!important}
.rx-num--l.rx-one{padding-left:2.5px!important}

/* ---- 出てくる動き（全部品で共通） ---- */
.rx-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s var(--rx-ease)}
.rx-reveal.is-in{opacity:1;transform:none}

/* ---- ハイライト（画面に入ってから少し待って、文字の下半分へ1本の線が左から引かれる） ---- */
.rx-mark{background:none;background-image:linear-gradient(var(--rx-mark),var(--rx-mark));background-repeat:no-repeat;background-position:0 100%;background-size:0% .5em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.3s cubic-bezier(.3,.7,.2,1) .6s;color:inherit;padding:0 .1em;font-weight:700;text-decoration:none;border:0;box-shadow:none}
.rx-mark.is-in{background-size:100% .5em}

/* ---- 要点（この記事で分かること） ---- */
.rx-summary{margin:32px 0;padding:22px 26px;border-radius:var(--rx-radius);background:var(--rx-soft)}
.rx-summary__label{display:block;font-weight:800;margin-bottom:12px;color:var(--rx-ink)}
.rx-summary__list{display:grid;gap:12px}
.rx-summary__item{display:flex;gap:12px;align-items:flex-start;line-height:1.7}
.rx-summary__item .rx-num{margin-top:.1em}

/* ---- 図解 ---- */
.rx-figure{margin:40px 0}
.rx-figure img{width:100%;height:auto;border-radius:var(--rx-radius);background:#fff;border:1px solid var(--rx-line)}
.rx-figure figcaption{margin-top:10px;font-size:13px;color:var(--rx-gray);text-align:center}

/* ---- 横スワイプ（左右に浮いた矢印で送る。色は黒とグレーだけ） ---- */
.rx-swipe{margin:36px 0;position:relative}
.rx-swipe__label{font-weight:800;margin-bottom:12px;color:var(--rx-ink)}
.rx-swipe__viewport{position:relative}
.rx-swipe__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px 2px 14px;scrollbar-width:none}
.rx-swipe__track::-webkit-scrollbar{display:none}
.rx-swipe__card{flex:0 0 min(84%,420px);scroll-snap-align:start;border-radius:var(--rx-radius);background:var(--rx-soft);padding:22px 24px}
.rx-swipe__card h4{margin:0 0 10px;font-size:19px;line-height:1.5;color:var(--rx-ink)}
.rx-swipe__card p{margin:0;font-size:15px;line-height:1.85}
.rx-swipe__arrow{position:absolute;top:50%;z-index:2;box-sizing:border-box;width:44px;height:44px;margin-top:-29px;border-radius:50%;border:1px solid var(--rx-line);background:#fff;color:var(--rx-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08);transition:opacity .25s,transform .2s}
.rx-swipe__arrow:hover{transform:scale(1.06)}
.rx-swipe__arrow svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rx-swipe__arrow--prev{left:-14px}.rx-swipe__arrow--next{right:-14px}
.rx-swipe__arrow[disabled]{opacity:0;pointer-events:none}
.rx-swipe__dots{display:flex;gap:6px;justify-content:center}
.rx-swipe__dots span{width:6px;height:6px;border-radius:6px;background:#d2d2cc;transition:all .3s}
.rx-swipe__dots span.on{background:var(--rx-ink);width:18px}
@media (max-width:640px){.rx-swipe__arrow{width:38px;height:38px;margin-top:-26px}.rx-swipe__arrow--prev{left:-6px}.rx-swipe__arrow--next{right:-6px}}

/* ---- ステップ（番号と見出しが上、本文が下） ---- */
.rx-steps{margin:34px 0;display:grid;gap:14px}
.rx-step{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:start;background:var(--rx-soft);border-radius:var(--rx-radius);padding:18px 20px}
.rx-step .rx-num{grid-row:1/3}
.rx-step__title{font-size:18px;font-weight:800;line-height:1.5;color:var(--rx-ink);align-self:center}
.rx-step p{margin:0;line-height:1.9;grid-column:2}

/* ---- チェックリスト（枠・背景なし。押すと印が描かれる） ---- */
.rx-check{margin:34px 0;background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
.rx-check__label{display:block;font-weight:800;margin-bottom:8px;color:var(--rx-ink)}
.rx-check label{display:flex;gap:14px;align-items:center;padding:12px 0;cursor:pointer;line-height:1.7}
.rx-check input{position:absolute;opacity:0;pointer-events:none}
.rx-check__box{box-sizing:border-box;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #b9b9b2;display:grid;place-items:center;transition:all .25s}
.rx-check__box svg{width:15px;height:15px;stroke:#fff;stroke-width:2.6;fill:none;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease .05s}
.rx-check input:checked+.rx-check__box{background:var(--rx-accent);border-color:var(--rx-accent);transform:scale(1.08)}
.rx-check input:checked+.rx-check__box svg{stroke-dashoffset:0}
.rx-check input:checked~span{color:var(--rx-ink);font-weight:700}
.rx-check__count{margin-top:12px;font-weight:800;color:var(--rx-accent)}
.rx-check__bar{height:6px;border-radius:6px;background:var(--rx-soft);margin-top:8px;overflow:hidden}
.rx-check__bar i{display:block;height:100%;width:0;background:var(--rx-accent);transition:width .4s}

/* ---- 囲み（ポイント・注意・補足。アイコンの背景は囲みの背景と同じ色の少し濃い色） ---- */
.article-callout{border-radius:var(--rx-radius)!important;grid-template-columns:40px minmax(0,1fr)!important;gap:18px!important;align-items:center!important}
.article-callout--point{background:var(--rx-point-bg)!important}
.article-callout--caution{background:var(--rx-caution-bg)!important}
.article-callout--comment{background:var(--rx-note-bg)!important}
.article-callout__marker{box-sizing:border-box!important;width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-family:var(--rx-num-font)!important;font-size:20px!important;font-weight:700!important;line-height:1!important;padding:0!important;text-align:center}
.article-callout--point .article-callout__marker{background:var(--rx-point-icon-bg)!important;color:var(--rx-point-icon)!important;padding:1.25px 1px 0 0!important}
.article-callout--caution .article-callout__marker{background:var(--rx-caution-icon-bg)!important;color:var(--rx-caution-icon)!important}
.article-callout--comment .article-callout__marker{background:var(--rx-note-icon-bg)!important;color:var(--rx-note-icon)!important}
.article-callout.is-in .article-callout__marker{animation:rx-pop .7s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes rx-pop{0%{transform:scale(.4) rotate(-20deg);opacity:0}60%{transform:scale(1.15) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}

/* ---- 相談ボタン（白・黒・グレーだけ。中身は中央揃え・ボタンは同じ大きさ・文字はボタンの真ん中・矢印は右端に必ず入れる） ---- */
.rx-cta{margin:44px 0;padding:36px 28px;border-radius:20px;background:var(--rx-soft);color:var(--rx-ink);text-align:center}
.rx-cta__label{display:block;font:700 11px/1 var(--mono,monospace);letter-spacing:.22em;color:var(--rx-gray);margin-bottom:12px}
.rx-cta__title{font-size:21px;font-weight:800;line-height:1.5;margin:0 auto 10px!important;color:var(--rx-ink);text-align:center}
.rx-cta p{margin:0 auto 24px;max-width:560px;color:#4A4A45;line-height:1.85;text-align:center}
.rx-cta__buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:600px;margin:0 auto}
.rx-cta__btn{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 48px;border-radius:999px;font-weight:800;line-height:1.4;text-align:center;text-decoration:none!important;transition:transform .2s}
.rx-cta__btn:only-child{grid-column:1/-1;max-width:294px;justify-self:center}
.rx-cta__btn:hover{transform:translateY(-2px)}
.rx-cta__btn--primary{background:var(--rx-ink);border:1px solid var(--rx-ink);color:#fff!important}
.rx-cta__btn--ghost{background:#fff;border:1px solid var(--rx-ink);color:var(--rx-ink)!important}
.rx-cta__btn span{position:absolute;right:22px;top:50%;transform:translateY(-50%);line-height:1;transition:transform .2s}
.rx-cta__btn:hover span{transform:translate(4px,-50%)}
@media (max-width:640px){.rx-cta{padding:30px 20px}.rx-cta__buttons{grid-template-columns:1fr}}




/* ---- 動きを減らす設定の人には動かさない ---- */
/* ---- 記事の頭の動画（＼ 30秒でわかるこの記事の内容 ／。左右に斜めの線・中央揃え・「30秒」だけ差し色。説明文なし・見出しと動画の間は6px） ---- */
.rx-video{width:100%;max-width:840px;margin:56px auto 76px}
@media (max-width:900px){.rx-video{margin:40px 0 54px}}
.rx-video__head{margin:0;padding:0 0 6px;text-align:center;color:var(--rx-ink)}
.rx-video__head b{display:inline-flex;align-items:center;gap:.7em;font-family:"Noto Sans JP",sans-serif;font-weight:900;font-size:clamp(15px,2.2vw,20px);line-height:1.4;letter-spacing:.02em}
.rx-video__head i{font-style:normal;color:var(--rx-accent)}
.rx-video__head b::before,.rx-video__head b::after{content:"";width:2px;height:1.05em;background:var(--rx-ink);border-radius:2px}
.rx-video__head b::before{transform:rotate(-30deg)}
.rx-video__head b::after{transform:rotate(30deg)}
.rx-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#fff;box-shadow:0 0 0 1px var(--rx-line)}

@media (prefers-reduced-motion:reduce){
  .rx-reveal{opacity:1;transform:none;transition:none}
  .rx-mark{background-size:100% .5em;transition:none}
  .article-callout.is-in .article-callout__marker{animation:none}
  .rx-swipe__track{scroll-behavior:auto}
}

/* ==== 悩みスイッチだけの土台（EQUALのサイトには元からあり、こちらに無いもの） ==== */
/* 差し色は悩みスイッチの青緑（EQUALのオレンジを使わない。2026-10-09 CEO「こっちの色に」） */
:root{--rx-accent:#287d77;
  /* 部品の地はクリーム、ポイントの囲みは青緑、補足はクリーム（EQUALの青とグレーを使わない） */
  --rx-soft:#FDF8F0; --rx-ink:#1C2841;
  --rx-point-bg:#E6F4F2; --rx-point-icon-bg:#C3E3DE; --rx-point-icon:#1E635E;
  --rx-note-bg:#FDF8F0;  --rx-note-icon-bg:#F2E3C2;  --rx-note-icon:#7A5B1E}
/* ハイライトは部品集の線の動きに合わせる（元の黄色の帯より部品集を優先） */
.article-body mark.rx-mark{background:none;background-image:linear-gradient(var(--rx-mark),var(--rx-mark));background-repeat:no-repeat;background-position:0 100%;background-size:0% .5em;padding:0 .1em;font-weight:700}
.article-body mark.rx-mark.is-in{background-size:100% .5em}
/* 囲みの土台（色とアイコンは上の部品集で決まる） */
.article-callout{display:grid;margin:28px 0;padding:20px 22px}
.article-callout__label{display:block;font-weight:800;margin-bottom:4px;color:var(--rx-ink)}
.article-callout__content p{margin:0}
/* 吹き出し（EQUAL の column-article.css の .article-voice と同じ形。左＝みさき・右＝相談者） */
.article-voice{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin:34px 0}
.article-voice--right{grid-template-columns:minmax(0,1fr) 44px}
.article-voice--left>.article-voice__avatar{grid-column:1;grid-row:1}
.article-voice--left>.article-voice__body,.article-voice--right>.article-voice__avatar{grid-column:2;grid-row:1}
.article-voice--right>.article-voice__body{grid-column:1;grid-row:1;justify-content:flex-end}
.article-voice__avatar{display:block;width:44px;height:44px;border:1px solid #d6d6d0;border-radius:999px;background:#fff;overflow:hidden}
.article-voice__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.article-voice__body{display:flex;min-width:0}
.article-voice__speaker{display:block;margin:0 0 5px;color:var(--rx-gray);font-size:12px;font-weight:600;line-height:1.4}
.article-voice__bubble{position:relative;max-width:100%;padding:13px 18px 15px;border:1px solid #dcdcd5;border-radius:14px;background:#fafafa;text-align:left}
.article-voice__bubble p{margin:0;font-size:15px;line-height:1.9}
.article-voice__bubble:before,.article-voice__bubble:after{content:"";position:absolute;top:14px;width:0;height:0;border:8px solid transparent}
.article-voice--left .article-voice__bubble:before{left:-17px;border-right-color:#dcdcd5}
.article-voice--left .article-voice__bubble:after{left:-15px;border-right-color:#fafafa}
.article-voice--right .article-voice__bubble:before{right:-17px;border-left-color:#dcdcd5}
.article-voice--right .article-voice__bubble:after{right:-15px;border-left-color:#fafafa}
/* 記事の頭の動画は見出し画像の下・目次の上に出す（2026-10-09 CEO「両方」「目次の上の方がいい」）。枠の影と角丸は画像の側へ移す */
.article-eyecatch:has(.rx-video){border-radius:0;overflow:visible;box-shadow:none}
.article-eyecatch:has(.rx-video) img{border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.article-eyecatch .rx-video{margin:36px 0 0}
@media (prefers-reduced-motion:reduce){.article-body mark.rx-mark{background-size:100% .5em;transition:none}}