@charset "utf-8";

/* ===== TOC (目次) ===== */
.toc-box{
  --toc-accent: #9aa0a6;      /* ラベル/強調色 */
  --toc-border: #e5e7eb;
  --toc-bg: #fff;
  --toc-bg-soft: #fafafa;

  border: 1px solid var(--toc-border);
  border-radius: 8px;
  background: var(--toc-bg);
  padding: .6rem .9rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.toc-box__head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background: var(--toc-bg-soft);
  border: 1px solid var(--toc-border);
  border-radius: 6px;
  padding: .55rem .8rem;
  cursor: pointer;
}
.toc-box__title{
  font-weight:700; letter-spacing:.02em; color:#333;
}
.toc-box__toggle{ color:#666; transition: transform .2s ease; }
.toc-box.is-collapsed .toc-box__toggle{ transform: rotate(-90deg); }

.toc-box__list{
  counter-reset: toc;
  margin: .6rem 0 0;
  padding-left: 1.1rem;
}
.toc-box__item{ margin:.3rem 0; }
.toc-box__item.toc-h3{ margin-left: .7rem; font-size: .95em; }
.toc-box__item a{
  text-decoration:none; color:#333;
  border-left: 3px solid transparent;
  padding-left: .5rem;
  display:inline-block;
}
.toc-box__item a:hover{ border-color: var(--toc-accent); }
.toc-box a.is-active{
  border-color: var(--toc-accent);
  background: #f5f7f9;
  border-radius: 3px;
}
[class^="icon_"]

/* =========================================
   CTAボタン（自動キラーン/10秒周期・完全中央寄せ）
========================================= */

.cta-button-wrap {
  display: flex;
  flex-direction: column;   /* キャプション→ボタンを縦並び */
  align-items: center;      /* 横方向の中央寄せ */
  justify-content: center;  /* 縦方向の中央寄せ（親が高い場合も対応） */
  text-align: center;
  gap: 0.75rem;
  margin: 2.5em 0;
}

.cta-caption {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ボタン本体 */
.cta-button {
  position: relative;
  display: flex;            /* インラインではなくFlexに変更 */
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  background: #009944;
  box-shadow: 0 4px 0 #008035;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 9999px;
  padding: 1em 2.5em;
  overflow: hidden;
  transition: all 0.25s ease;
  margin: 0 auto;           /* ←明示的に中央寄せ */
}

/* ホバー時の軽い動き */
.cta-button:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #008035;
}

/* 光のライン（10秒に1回キラーン） */
.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 10s ease-in-out infinite;
}

/* キラーンアニメーション */
@keyframes shine {
  0%   { left: -75%; opacity: 0; }
  5%   { opacity: 1; }
  10%  { left: 125%; opacity: 0; }
  100% { left: 125%; opacity: 0; }
}

/* アイコン＆ラベル */
.cta-icon,
.cta-label {
  color: #fff;
  line-height: 1;
}

/* ===== CTAボタン：幅をひろがらせない（中身サイズで中央） ===== */
.cta-button-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.75rem;
  margin:2.5em 0;
}

/* ここがポイント：幅は内容に合わせる */
.cta-button{
  display:inline-flex;         /* インライン扱いで幅=内容 */
  align-items:center;
  justify-content:center;
  gap:.6em;
  /* 幅の強制リセット（他のCSSでwidth:100%が当たっていても無効化） */
  width:auto !important;
  max-width:720px;             /* 上限（お好みで） */
  box-sizing:border-box;
  flex:0 0 auto;               /* Flexに引き伸ばされない */
  align-self:center;           /* 親flex内でも中央 */
  margin:0 auto;               /* 念のため */
  
  background:#009944;
  box-shadow:0 4px 0 #008035;
  color:#fff;
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.08em;
  text-decoration:none;
  border-radius:9999px;
  padding:1em 2.5em;
  overflow:hidden;
  transition:all .25s ease;
}

/* ホバー */
.cta-button:hover{
  transform:translateY(2px);
  box-shadow:0 2px 0 #008035;
}

/* キラーン（10秒周期） */
.cta-button::before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-25deg);
  animation:shine 10s ease-in-out infinite;
}
@keyframes shine{
  0%{left:-75%;opacity:0}
  5%{opacity:1}
  10%{left:125%;opacity:0}
  100%{left:125%;opacity:0}
}
.cta-icon,.cta-label{color:#fff;line-height:1}

/* フル幅にしたいページだけ .is-full を追加すると全幅にできます（任意） */
.cta-button.is-full{
  width:100% !important;
  max-width:none;
}


/* =========================================
   あわせて読みたい（抜粋なし）
========================================= */
.related-card{
  --rc-color:#f6a624; /* グレーにする場合は #9aa0a6 */
  position:relative;
  display:block;
  border:1.5px solid var(--rc-color);
  border-radius:8px;
  background:#fff;
  color:#333;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  padding:1.2em 1.4em;
  margin:2em 0;
  transition:box-shadow .15s ease, transform .15s ease;
  overflow:visible;
}
.related-card *{ color:#333; }
.related-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform:translateY(-1px);
}

.related-card__label{
  position:absolute;
  top:0;
  left:1.2em;
  transform:translateY(-60%);
  margin:0;
  display:inline-block;
  background:var(--rc-color);
  color:#fff !important;
  font-size:.875rem; /* 14px相当 */
  letter-spacing:.02em;
  padding:.4em .9em;
  border-radius:4px;
  z-index:3;
}

.related-card__inner{
  display:grid;
  grid-template-columns:20% 1fr; /* PC比率 */
  gap:1.2em;
  align-items:center;
  margin-top:.6em;
}
.related-card__inner img{ margin:0 !important; }

.related-card__thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:6px;
  background:#f3f3f3;
}
.related-card__title{
  font-weight:700;
  line-height:1.55;
  font-size:1rem; /* 16px相当 */
}

/* SPは画像:テキスト=5:5で横並び、ラベルは通常位置 */
@media (max-width:640px){
  .related-card__inner{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .related-card__title{ font-size:.875rem; } /* 14px相当 */
  .related-card__label{
    position:static;
    transform:none;
    margin:0 0 .6em 0;
  }
}

/* =========================================
   カスタムリスト（FAアイコン/背景色バリエーション）
========================================= */
ul.custom-list{
  box-shadow:0 0 3px rgba(0,0,0,.15);
  border:1px solid #eee;
  border-radius:10px;
  padding:1.2em 1.4em;
  margin:1.8em 0;
  background:#fafafa;
}
ul.custom-list.-orange{ --bullet-color:#f6a623; background:#fff8ec; }
ul.custom-list.-blue  { --bullet-color:#4a90e2; background:#f8fbff; }
ul.custom-list.-gray  { --bullet-color:#9aa0a6; background:#f7f7f7; }

ul.custom-list li{
  position:relative;
  list-style:none;
  line-height:1.8;
  padding:.35em 0 .35em 1.6em; /* 左にインデント */
  font-size:1rem;
}
ul.custom-list li::before{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900;
  content:"\f0da"; /* chevron-right */
  position:absolute;
  left:.25em;
  top:.85em;
  color:var(--bullet-color,#999);
  font-size:.9em;
  line-height:1;
}
ul.custom-list li + li{ border-top:1px dashed rgba(0,0,0,.06); }

/* =========================================
   カラートークン & キャプションボックス
========================================= */
:root{
  --cap-orange:#f6a623;
  --cap-blue:#4a90e2;
  --cap-gray:#9aa0a6;
}
.capbox.-orange{ --cap-color:var(--cap-orange); --cap-bg-soft:#fff8ec; }
.capbox.-blue  { --cap-color:var(--cap-blue);   --cap-bg-soft:#f8fbff; }
.capbox.-gray  { --cap-color:var(--cap-gray);   --cap-bg-soft:#fafafa; }

/* タブ型 */
.capbox-tab{
  position:relative;
  border:2px solid var(--cap-color,#ddd);
  background:var(--cap-bg-soft,#fff);
  padding:1.4em 1.6em;
  margin:28px 0;
}
.capbox-tab .capbox__label{
  position:absolute;
  top:-.9em;
  left:1.2em;
  display:inline-block;
  padding:.45em .9em;
  background:var(--cap-color,#333);
  color:#fff;
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
}

/* バー型 */
.capbox-bar{
  position:relative;
  border:2px solid var(--cap-color,#ddd);
  background:var(--cap-bg-soft,#fff);
  overflow:hidden;
  margin:28px 0;
}
.capbox-bar .capbox__title{
  background:var(--cap-color,#333);
  color:#fff;
  text-align:center;
  font-weight:700;
  padding:.9em 1.2em;
  line-height:1.4;
  letter-spacing:.04em;
  margin:-2px -2px 0 -2px;
}
.capbox-bar .capbox__body{
  padding:1.6em 1.8em;
  background:#fff;
}
@media (max-width:768px){
  .capbox-tab{ padding:1.2em; }
  .capbox-bar .capbox__body{ padding:1.2em; }
}

/* =========================================
   マーカー色
========================================= */
.orange_marker{ background:#ffd8a8; padding:2px 6px; border-radius:3px; }
.yellow_marker{ background:#fff59d; padding:2px 6px; border-radius:3px; }
.green_marker { background:#b9f6ca; padding:2px 6px; border-radius:3px; }
.blue_marker  { background:#a7d8ff; padding:2px 6px; border-radius:3px; }

/* =========================================
   アイコン付きボックス（Font Awesome）
========================================= */
[class^="icon_"]{
  position:relative;
  border:2px solid var(--the-color,currentColor);
  background:#fff;
  line-height:1.8;
  font-weight:500;
  margin:30px 0 !important;
  padding:2em 1.5em 1.5em;
}
@media (min-width:600px){
  [class^="icon_"]{ padding:2.5em 2em 2em; }
}

[class^="icon_"]::before{
  align-items:center;
  background-color:var(--the-color,currentColor);
  border:2px solid var(--color_content_bg,#fff);
  border-radius:50%;
  color:#fff;
  content:"";
  display:inline-flex;
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free";
  font-weight:900;
  font-size:1.25em;
  height:2em;
  justify-content:center;
  left:.5em;
  line-height:1;
  padding:0 0 0 .05em;
  position:absolute;
  top:-1px;
  transform:translateY(-50%);
  width:2em;
}

/* 種類別 */
.icon_point   { --the-color:#f6a623; background:#fffaf2; }
.icon_point::before   { content:"\f0eb"; } /* lightbulb */
.icon_check   { --the-color:#6ac259; background:#f7fff7; }
.icon_check::before   { content:"\f00c"; } /* check */
.icon_batsu   { --the-color:#e95a5a; background:#fff7f7; }
.icon_batsu::before   { content:"\f00d"; } /* times */
.icon_question{ --the-color:#4a90e2; background:#f8fbff; }
.icon_question::before{ content:"\f059"; } /* question-circle */
.icon_alert   { --the-color:#f5c623; background:#fffef3; }
.icon_alert::before   { content:"\f071"; } /* exclamation-triangle */
.icon_memo    { --the-color:#9aa0a6; background:#fafafa; }
.icon_memo::before    { content:"\f303"; } /* pencil-alt */