@charset "UTF-8";
/* =========================================================
   東海リサイクルステーション ― 下層ページ用 追加スタイル
   style.css のトークン（:root）を前提に、下層専用クラスのみ定義。
   onfleek 風のデザイン言語（Poppins英字見出し・角丸・淡い
   ブルーグレーカード・影トークン）と調和させる。
   ブレークポイントは既存に合わせて 820px / 640px を目安。
   ========================================================= */

/* ---------- 0. ページヒーロー ----------
   固定ヘッダー（top:14px + min-height:66px）の下に潜らないよう
   上パディングを 140px 確保する。sec-head と同じ言語:
   Poppins 英字（ブルー）＋ 和文タイトル＋リード。 */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:140px 0 clamp(40px,6vw,64px);
  background:
    radial-gradient(1000px 520px at 90% -20%, #e4f4e0 0%, rgba(228,244,224,0) 60%),
    linear-gradient(168deg, #eaf6fe 0%, #f2fbf5 60%, #ffffff 100%);
}
/* 控えめな角丸スクエア装飾 */
.page-hero::before,
.page-hero::after{
  content:""; position:absolute; z-index:-1; border-radius:22%; pointer-events:none;
}
.page-hero::before{
  right:4%; top:24%; width:96px; height:96px; background:rgba(79,163,227,.14);
}
.page-hero::after{
  left:2%; bottom:-24px; width:120px; height:120px; background:rgba(11,71,168,.06);
}
.page-hero__en{
  font-family:"Poppins","Noto Sans JP",sans-serif;
  font-size:clamp(2rem,5vw,3.4rem); font-weight:700; line-height:1;
  letter-spacing:-.01em; color:var(--blue);
}
.page-hero__title{
  margin-top:10px;
  font-size:clamp(1.5rem,3.4vw,2.2rem); font-weight:900; line-height:1.4;
  color:var(--navy);
}
.page-hero__lead{
  margin-top:16px; max-width:64ch;
  font-size:clamp(.94rem,1.5vw,1.02rem); font-weight:500;
  color:var(--ink-mute); line-height:2;
}

/* ---------- 1. パンくず ---------- */
.breadcrumb{ margin-bottom:22px; }
.breadcrumb ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:.2em .1em;
  font-size:.8rem; font-weight:500; color:var(--ink-mute);
}
.breadcrumb li{ display:inline-flex; align-items:center; }
/* 区切り記号「›」を CSS で挿入 */
.breadcrumb li + li::before{
  content:"›"; margin:0 .55em; color:var(--blue-l); font-weight:700;
}
.breadcrumb a{ color:var(--blue); font-weight:700; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb li[aria-current="page"]{ color:var(--ink-mute); }

/* ---------- 2. 本文ボディ ---------- */
.page-body{ padding:clamp(48px,6vw,76px) 0 clamp(56px,7vw,84px); }
/* 記事系の読みやすい 1 カラム幅 */
.page-body--narrow .wrap{ width:min(100% - 40px, 800px); }
.page-section{ margin-top:clamp(40px,6vw,64px); }
.page-section:first-child{ margin-top:0; }
.page-section > .sec-head{ margin-bottom:clamp(28px,4vw,44px); }

/* ---------- 3. 記事タイポグラフィ（.prose） ---------- */
.prose{ color:var(--ink); line-height:1.9; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{
  margin-top:2em; padding:.15em 0 .15em .7em;
  border-left:6px solid var(--green);
  font-size:clamp(1.24rem,2.4vw,1.55rem); font-weight:900; line-height:1.5;
  color:var(--navy);
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  margin-top:1.7em; padding-bottom:.3em;
  border-bottom:2px dotted var(--line);
  font-size:clamp(1.08rem,1.9vw,1.24rem); font-weight:900; color:var(--blue);
}
.prose p{ font-size:1rem; }
.prose a{ color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--navy); }
.prose strong{ color:var(--navy); font-weight:900; }
.prose ul,
.prose ol{ padding-left:1.4em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-top:.5em; padding-left:.2em; }
.prose li::marker{ color:var(--green); font-weight:700; }
.prose ol li::marker{ color:var(--blue); }
.prose blockquote{
  margin:1.4em 0; padding:16px 22px;
  background:var(--sky-soft); border-left:5px solid var(--blue-l);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-mute); font-size:.95rem;
}
.prose blockquote p{ margin:0; }
.prose figure{ margin:1.6em 0; }
.prose figure img{
  width:100%; border-radius:var(--radius); box-shadow:var(--shadow-m);
}
.prose figcaption{
  margin-top:10px; font-size:.82rem; color:var(--ink-mute);
  text-align:center; font-weight:500;
}
.prose table,
.item-table{
  width:100%; border-collapse:collapse; margin:1.5em 0;
  font-size:.92rem;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-s);
}
.prose thead th,
.item-table thead th{
  background:linear-gradient(135deg,var(--blue),var(--navy)); color:var(--white);
  font-weight:700; text-align:left;
}
.prose th,.prose td,
.item-table th,.item-table td{
  padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top;
}
.prose tbody tr:nth-child(even),
.item-table tbody tr:nth-child(even){ background:var(--card-soft); }
.prose tbody th,
.item-table tbody th{ background:var(--sky-soft); color:var(--navy); font-weight:700; white-space:nowrap; }
.prose tbody tr:last-child td,
.prose tbody tr:last-child th,
.item-table tbody tr:last-child td,
.item-table tbody tr:last-child th{ border-bottom:0; }
/* item-table の判定マーク（○ △ 要相談） */
.item-table .mark{ font-weight:900; font-size:1.05rem; }
.item-table .mark--ok{ color:var(--green); }
.item-table .mark--ask{ color:var(--blue); }
.item-table .mark--no{ color:var(--ink-mute); }

/* 記事内デモ注記（style.css の .demo-note を踏襲・そのまま利用可） */
.prose .demo-note{ margin-top:1em; }

/* ---------- 4. 目次（.toc） ---------- */
.toc{
  margin:0 0 clamp(28px,4vw,40px);
  padding:22px 26px;
  background:var(--card-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-s);
}
.toc__title{
  display:flex; align-items:center; gap:.5em;
  margin-bottom:12px; font-size:1rem; font-weight:900; color:var(--navy);
}
.toc__title::before{
  content:""; width:18px; height:18px; flex:none; border-radius:5px;
  background:linear-gradient(140deg,var(--blue-l),var(--blue));
}
.toc ol{
  list-style:none; counter-reset:toc; padding:0; margin:0;
  display:grid; gap:8px;
}
.toc li{ counter-increment:toc; }
.toc a{
  display:flex; gap:.6em; align-items:baseline;
  font-size:.92rem; font-weight:500; color:var(--ink);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:"Poppins","Noto Sans JP",sans-serif; font-weight:700;
  color:var(--blue); font-size:.82rem;
}
.toc a:hover{ color:var(--blue); text-decoration:underline; }

/* ---------- 5. FAQ アコーディオン（JS不要・details/summary） ---------- */
.faq-list{ display:grid; gap:14px; }
.faq-item{
  background:var(--card-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-s); overflow:hidden;
  transition:box-shadow .35s var(--ease);
}
.faq-item[open]{ box-shadow:var(--shadow-m); }
.faq-item > summary{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 24px; cursor:pointer; list-style:none;
  font-size:1.02rem; font-weight:700; color:var(--navy); line-height:1.6;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
/* 先頭の Q ラベル */
.faq-item > summary::before{
  content:"Q"; flex:none;
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue-l),var(--blue)); color:var(--white);
  font-family:"Poppins","Noto Sans JP",sans-serif; font-weight:700; font-size:.9rem;
}
/* ＋ / − マーカー（open で回転） */
.faq-item__mark{
  margin-left:auto; flex:none; position:relative;
  width:22px; height:22px; align-self:center;
}
.faq-item__mark::before,
.faq-item__mark::after{
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:2.5px; border-radius:2px; background:var(--blue);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-item__mark::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-item__mark::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }
.faq-item__body{
  padding:0 24px 22px 66px;
  color:var(--ink-mute); font-size:.94rem; line-height:1.9;
}
.faq-item__body > * + *{ margin-top:.8em; }
.faq-item__body a{ color:var(--blue); font-weight:700; text-decoration:underline; }
@media (max-width:640px){
  .faq-item > summary{ padding:16px 18px; font-size:.96rem; }
  .faq-item__body{ padding:0 18px 18px 18px; }
}

/* ---------- 6. カードグリッド / リンクカード ---------- */
.card-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.card-grid--2{ grid-template-columns:repeat(2,1fr); }
.card-grid--4{ grid-template-columns:repeat(4,1fr); }

.link-card{
  display:flex; flex-direction:column; gap:12px;
  padding:26px 24px;
  background:var(--card-soft); border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.link-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); }
.link-card__icon{
  width:56px; height:56px; flex:none; border-radius:15px;
  display:grid; place-items:center; padding:11px;
  box-shadow:0 12px 24px -12px rgba(6,58,143,.6);
}
.link-card__icon--green{ background:linear-gradient(140deg,#5cb42f,var(--green)); }
.link-card__icon--blue{ background:linear-gradient(140deg,var(--blue-l),var(--blue)); }
.link-card__icon svg{ width:100%; height:100%; }
.link-card__title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:1.14rem; font-weight:900; color:var(--navy);
}
.link-card__title::after{
  content:"→"; color:var(--blue); font-weight:700;
  transition:transform .3s var(--ease);
}
.link-card:hover .link-card__title::after{ transform:translateX(4px); }
.link-card__txt{ font-size:.88rem; color:var(--ink-mute); font-weight:500; line-height:1.85; }

/* ---------- 7. コラム一覧カード（.article-card） ---------- */
.article-card{
  display:flex; flex-direction:column;
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-m);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.article-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-l); }
.article-card__media{ line-height:0; }
.article-card__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.article-card__body{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 24px; }
.article-card__head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.article-card__title{
  font-size:1.08rem; font-weight:900; color:var(--navy); line-height:1.55;
}
.article-card__excerpt{ font-size:.86rem; color:var(--ink-mute); font-weight:500; line-height:1.85; }

/* 日付・カテゴリタグ（一覧・記事メタ共通） */
.tag{
  display:inline-flex; align-items:center;
  padding:.28em 1em; border-radius:999px;
  font-size:.74rem; font-weight:700; letter-spacing:.03em;
  background:var(--sky-soft); color:var(--blue);
}
.tag--paper{ background:var(--green-soft); color:var(--green-d); }
.tag--wood{ background:#f3ecdd; color:#8a6d2f; }
.tag--metal{ background:var(--card-soft); color:var(--navy); }
.tag--plastic{ background:var(--sky-soft); color:var(--blue); }
.tag--guide{ background:#e9e2f7; color:#5a44a5; }
.post-date{
  font-family:"Poppins","Noto Sans JP",sans-serif;
  font-size:.8rem; font-weight:600; color:var(--ink-mute); letter-spacing:.03em;
}

/* ---------- 8. 記事メタ（.article-meta） ---------- */
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin-top:16px;
}

/* ---------- 9. CTAバンド（青い帯＋白ボタン2つ） ---------- */
.cta-band{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(160deg,#1358bf 0%,var(--blue) 48%,var(--navy) 100%);
  color:var(--white);
}
.cta-band__inner{
  padding:clamp(44px,6vw,68px) 0;
  display:grid; gap:22px; justify-items:center; text-align:center;
}
.cta-band__en{
  font-family:"Poppins","Noto Sans JP",sans-serif;
  font-size:clamp(1.6rem,4vw,2.4rem); font-weight:700; line-height:1; color:var(--white);
}
.cta-band__title{ font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:900; line-height:1.6; }
.cta-band__lead{
  max-width:60ch; font-size:.95rem; font-weight:500;
  color:rgba(255,255,255,.88); line-height:2;
}
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:6px; }
/* 帯上の白ボタン */
.cta-band .btn--white{
  background:var(--white); color:var(--blue);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
}
.cta-band .btn--white:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(0,0,0,.6); }
.cta-band .btn--line{
  background:transparent; color:var(--white);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
}
.cta-band .btn--line:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.cta-band .demo-note--on-blue{ color:rgba(255,255,255,.6); }

/* ---------- 10. 関連記事（.related 3枚） ---------- */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related .article-card__media img{ aspect-ratio:16/10; }

/* ---------- 11. ステップカード（.step-list ／ /flow/ 用） ---------- */
.step-list{ display:grid; gap:20px; counter-reset:step; }
.step-item{
  position:relative; counter-increment:step;
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;
  padding:26px 28px 26px 26px;
  background:var(--card-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-s);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
/* 番号バッジ（Poppins） */
.step-item__num{
  flex:none; width:64px; height:64px; border-radius:18px;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--blue),var(--navy)); color:var(--white);
  box-shadow:0 12px 24px -12px rgba(6,58,143,.6);
}
.step-item__num::before{
  content:"STEP";
  position:absolute; margin-top:-34px;
  font-family:"Poppins","Noto Sans JP",sans-serif; font-size:.5rem;
  font-weight:700; letter-spacing:.14em; color:var(--blue);
}
.step-item__num span{
  font-family:"Poppins","Noto Sans JP",sans-serif; font-size:1.9rem; font-weight:700; line-height:1;
}
.step-item__body{ display:flex; flex-direction:column; gap:8px; }
.step-item__title{ font-size:1.16rem; font-weight:900; color:var(--navy); line-height:1.5; }
.step-item__txt{ font-size:.92rem; color:var(--ink-mute); font-weight:500; line-height:1.9; }
.step-item__media{
  margin-top:4px; border-radius:var(--radius); overflow:hidden; line-height:0;
  box-shadow:var(--shadow-s);
}
.step-item__media img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* ---------- 12. 汎用：ご案内ブロック（記事内の店舗案内など） ---------- */
.info-box{
  padding:clamp(24px,3vw,32px);
  background:var(--sky-soft); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-s);
}
.info-box__title{
  display:flex; align-items:center; gap:.5em;
  font-size:1.1rem; font-weight:900; color:var(--navy); margin-bottom:12px;
}
.info-box dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:.92rem; }
.info-box dt{ font-weight:700; color:var(--navy); white-space:nowrap; }
.info-box dd{ margin:0; color:var(--ink-mute); }
.info-box dd a{ color:var(--blue); font-weight:700; }

/* ---------- 13. レスポンシブ ---------- */
@media (max-width:820px){
  .page-hero{ padding:120px 0 clamp(32px,6vw,48px); }
  .card-grid,
  .card-grid--4,
  .related{ grid-template-columns:repeat(2,1fr); }
  .step-item{ padding:22px 22px 22px 20px; gap:18px; }
  .step-item__num{ width:56px; height:56px; }
  .step-item__num span{ font-size:1.6rem; }
}
@media (max-width:640px){
  .page-hero{ padding:112px 0 28px; }
  .card-grid,
  .card-grid--2,
  .card-grid--4,
  .related{ grid-template-columns:1fr; }
  .step-item{ grid-template-columns:1fr; gap:14px; }
  .step-item__num{ width:52px; height:52px; }
  .step-item__num::before{ margin-top:-30px; }
  .prose h2{ font-size:1.2rem; }
  /* テーブルは横スクロールで溢れ防止 */
  .prose table,
  .item-table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ---------- 14. アニメーション強化（下層） ----------
   キーフレーム rise / drift は style.css セクション14で定義。
   prefers-reduced-motion:reduce では style.css 側の *{animation:none} が効く。 */

/* ページヒーローの登場演出（パンくず→英字→見出し→リードの順） */
.page-hero .breadcrumb{ animation:rise .7s var(--ease) both; }
.page-hero__en{ animation:rise .8s var(--ease) .08s both; }
.page-hero__title{ animation:rise .8s var(--ease) .18s both; }
.page-hero__lead{ animation:rise .8s var(--ease) .28s both; }

/* ページヒーローの装飾スクエアを漂わせる */
.page-hero::before{ animation:drift 12s ease-in-out infinite; }
.page-hero::after{ animation:drift 15s ease-in-out -5s infinite; }

/* CTAバンドにも装飾スクエアを漂わせる（マークアップ変更不要） */
.cta-band::before,
.cta-band::after{
  content:""; position:absolute; z-index:-1; border-radius:22%; pointer-events:none;
  animation:drift 13s ease-in-out infinite;
}
.cta-band::before{ left:6%; top:16%; width:110px; height:110px; background:rgba(255,255,255,.07); }
.cta-band::after{ right:5%; bottom:10%; width:150px; height:150px; background:rgba(143,211,244,.13); animation-delay:-6s; }

/* カード写真のホバーでゆっくりズーム */
.article-card__media{ overflow:hidden; }
.article-card__media img,
.step-item__media img,
.prose figure img{ transition:transform .7s var(--ease); }
.article-card:hover .article-card__media img{ transform:scale(1.05); }
.step-item:hover .step-item__media img{ transform:scale(1.03); }

/* リンクカードのアイコンがふわっと浮く */
.link-card__icon{ transition:transform .4s var(--ease); }
.link-card:hover .link-card__icon{ transform:translateY(-4px) rotate(-4deg); }

/* ステップ番号のホバー演出 */
.step-item__num{ transition:transform .4s var(--ease); }
.step-item:hover .step-item__num{ transform:scale(1.06) rotate(-3deg); }

/* ---------- 15. 404ページ ---------- */
.error-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:calc(66px + clamp(64px,12vh,120px)) 0 clamp(64px,10vw,110px);
  text-align:center;
  background:
    radial-gradient(1000px 520px at 90% -20%, #e4f4e0 0%, rgba(228,244,224,0) 60%),
    linear-gradient(168deg, #eaf6fe 0%, #f2fbf5 60%, #ffffff 100%);
}
.error-hero__code{
  font-family:"Poppins","Noto Sans JP",sans-serif;
  font-size:clamp(5rem,16vw,9rem); font-weight:700; line-height:1;
  letter-spacing:-.02em; color:var(--blue);
  animation:rise .8s var(--ease) both;
}
.error-hero__title{
  margin-top:14px;
  font-size:clamp(1.3rem,3vw,1.8rem); font-weight:900; color:var(--navy);
  animation:rise .8s var(--ease) .12s both;
}
.error-hero__lead{
  margin-top:16px; max-width:46ch; margin-inline:auto;
  font-size:clamp(.94rem,1.5vw,1.02rem); font-weight:500;
  color:var(--ink-mute); line-height:2;
  animation:rise .8s var(--ease) .22s both;
}
.error-hero__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px;
  animation:rise .8s var(--ease) .32s both;
}
.error-hero .sq{ z-index:-1; }

/* ---------- 16. コラム 2カラム（オウンドメディア型） ----------
   /column/ 一覧と記事ページで使用。左＝本文、右＝サイドバー。
   サイドバー最下部のCTAカードだけ position:sticky で追従する。 */
.media-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 316px;
  gap:clamp(28px,4vw,48px);
}
.media-main{ min-width:0; }
/* 一覧カードはメインカラム幅に合わせて2列 */
.media-main .card-grid{ grid-template-columns:repeat(2,1fr); }

.media-side{ display:flex; flex-direction:column; gap:20px; min-width:0; }

.side-card{
  background:var(--card-soft); border-radius:var(--radius);
  padding:22px 22px 24px; box-shadow:var(--shadow-s);
}
.side-card__title{
  display:flex; align-items:center; gap:.5em;
  margin-bottom:14px; font-size:.98rem; font-weight:900; color:var(--navy);
}
.side-card__title::before{
  content:""; width:16px; height:16px; flex:none; border-radius:5px;
  background:linear-gradient(140deg,var(--green-l),var(--green));
}
.side-card__media{
  margin:0 0 12px; border-radius:12px; overflow:hidden; line-height:0;
  box-shadow:var(--shadow-s);
}
.side-card__media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.side-card__txt{ font-size:.84rem; color:var(--ink-mute); font-weight:500; line-height:1.9; }
.side-card__link{
  display:inline-flex; align-items:center; gap:.4em;
  margin-top:12px; font-size:.86rem; font-weight:700; color:var(--blue);
}
.side-card__link::after{ content:"→"; transition:transform .3s var(--ease); }
.side-card__link:hover::after{ transform:translateX(4px); }
.side-card__note{ margin-top:10px; font-size:.76rem; color:#8a97a3; }

/* 新着記事リスト */
.side-new{ display:grid; }
.side-new li + li{ border-top:1px dashed var(--line); }
.side-new a{
  display:block; padding:10px 8px; border-radius:10px;
  transition:background-color .25s var(--ease);
}
.side-new a:hover{ background:rgba(255,255,255,.85); }
.side-new .post-date{ font-size:.72rem; }
.side-new__t{
  display:block; margin-top:2px;
  font-size:.84rem; font-weight:700; color:var(--navy); line-height:1.6;
  transition:color .25s var(--ease);
}
.side-new a:hover .side-new__t{ color:var(--blue); }

/* 品目タグ */
.side-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.side-tags .tag{
  font-size:.8rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.side-tags .tag:hover{ transform:translateY(-2px); box-shadow:var(--shadow-s); }

/* サイドCTA（スクロールに追従） */
.side-cta{
  position:sticky; top:104px;
  padding:24px 22px; border-radius:var(--radius);
  background:linear-gradient(160deg,#1358bf 0%,var(--blue) 48%,var(--navy) 100%);
  color:var(--white); text-align:center;
  box-shadow:var(--shadow-m);
}
.side-cta__title{ font-size:1rem; font-weight:900; }
.side-cta__txt{ margin-top:8px; font-size:.82rem; color:rgba(255,255,255,.85); line-height:1.8; }
.side-cta .btn{ margin-top:14px; font-size:.9rem; padding:.85em 1.2em; }
.side-cta .btn--white{
  background:var(--white); color:var(--blue);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.45);
}
.side-cta .btn--white:hover{ transform:translateY(-2px); }
.side-cta__tel{
  display:inline-flex; align-items:baseline; gap:.15em; margin-top:12px;
  font-family:"Poppins","Noto Sans JP",sans-serif;
  font-size:1.5rem; font-weight:700; color:var(--white);
  transition:opacity .3s var(--ease);
}
.side-cta__tel span{ font-size:.6em; font-weight:600; }
.side-cta__tel:hover{ opacity:.85; }
.side-cta .demo-note{ margin-top:8px; color:rgba(255,255,255,.6); }

@media (max-width:980px){
  .media-layout{ grid-template-columns:1fr; }
  .side-cta{ position:static; }
}
@media (max-width:640px){
  .media-main .card-grid{ grid-template-columns:1fr; }
}

/* ---------- 17. モーション配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  .link-card,.article-card,.step-item,.faq-item,
  .link-card__title::after,.link-card__icon,.step-item__num,
  .article-card__media img,.step-item__media img,.prose figure img,
  .faq-item__mark::before,.faq-item__mark::after,
  .side-card__link::after,.side-new a,.side-new__t,.side-tags .tag,
  .side-cta .btn--white,.side-cta__tel,
  .cta-band .btn--white,.cta-band .btn--line{
    transition:none !important;
  }
}