@charset "UTF-8";

/*==================================================
  記事パーツCSS (parts.css)
  Shamham Theme

  構成:
    1. 見出し (h2〜h5)
    2. マーカー
    3. ボタン (Cocoonボタン + CTAボタン)
    4. Cocoon標準ボックス (案内・メモ・注意・疑問)
    5. タブ見出しボックス / ラベルボックス (Cocoon)
    6. タブボックス (独自 .tab-box)
    7. CTAボックス (独自 .cta-box)
    8. ランキングボックス (独自 .rank-box)
    9. メリット・デメリット (独自 .merit-box / .demerit-box)
   10. Q&A (独自 .faq)
   11. テーブル / 比較表
   12. 目次 (Cocoon .toc)
   13. 吹き出し (Cocoon 色調整のみ)

  カラーは main.css の :root 変数を使用。
  (parts.css は child-main 依存で読み込むこと)
==================================================*/

/*==================================================
  1. 見出し
==================================================*/

/* h2: グラデーション帯 */
.article h2{
  background:var(--grad-btn);
  color:#fff;
  font-size:1.25em;
  padding:12px 16px;
  border:none;
  margin-top:2.5em;
  margin-bottom:1em;
}

/* h3: 左ボーダー + 下線 */
.article h3{
  border-left:5px solid;
  border-image:var(--grad-btn) 1;
  border-top:none;
  border-right:none;
  border-bottom:2px solid #f0d9f7;
  background:none;
  color:var(--purple-dark);
  font-size:1.15em;
  padding:8px 12px;
  margin-top:2em;
}

/* h4: 下線のみ */
.article h4{
  border:none;
  border-bottom:2px dashed var(--pink-accent);
  background:none;
  color:var(--purple-dark);
  font-size:1.05em;
  padding:6px 2px;
  margin-top:1.8em;
}

/* h5: シンプルな行頭アイコン風 */
.article h5{
  border:none;
  background:none;
  color:var(--purple-text);
  font-size:1em;
  padding:4px 0 4px 20px;
  position:relative;
}

.article h5::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--grad-btn);
}

/*==================================================
  2. マーカー
==================================================*/

/* Cocoon標準マーカーをテーマ色に */
.article .marker{
  background:linear-gradient(transparent 60%,#f8c6f3 60%);
}

/* 追加バリエーション */
.article .marker-purple{
  background:linear-gradient(transparent 60%,#ddd0fb 60%);
}

.article .marker-blue{
  background:linear-gradient(transparent 60%,#c7d6ff 60%);
}

/*==================================================
  3. ボタン
==================================================*/

/* Cocoonボタンブロック共通 */
.article .btn,
.article .btn-wrap>a{
  background:var(--grad-btn);
  border:none;
  border-radius:24px;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(168,85,247,.35);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}

.article .btn:hover,
.article .btn-wrap>a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(168,85,247,.45);
  opacity:.95;
  color:#fff;
}

/* 大ボタン */
.article .btn-l,
.article .btn-wrap.btn-wrap-l>a{
  font-size:1.1em;
  padding:14px 32px;
}

/* マイクロコピー(ボタン上の一言) */
.article .micro-copy{
  color:var(--purple-text);
  font-size:.8em;
  font-weight:700;
}

/* CTAボタン: 光るアニメーション付き
   使い方: ボタンブロックの「追加CSSクラス」に btn-shine */
.article .btn-shine,
.article .btn-wrap.btn-shine>a{
  position:relative;
  overflow:hidden;
}

.article .btn-shine::after,
.article .btn-wrap.btn-shine>a::after{
  content:"";
  position:absolute;
  top:0;
  left:-80%;
  width:50%;
  height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:btn-shine 3s ease-in-out infinite;
}

@keyframes btn-shine{
  0%{left:-80%}
  40%{left:130%}
  100%{left:130%}
}

/*==================================================
  4. Cocoon標準ボックス
  (案内: information-box / メモ: memo-box /
   注意: alert-box / 疑問: question-box)
==================================================*/

.article .information-box,
.article .memo-box,
.article .alert-box,
.article .question-box,
.article .common-icon-box{
  border-radius:10px;
  border-width:1px;
  padding:1em 1em 1em 3.2em;
}

.article .information-box{
  background:#f5f3ff;
  border-color:#c4b5fd;
  color:#4c1d95;
}

.article .memo-box{
  background:#fdf4ff;
  border-color:#f0abfc;
  color:#701a75;
}

.article .alert-box{
  background:#fff1f2;
  border-color:#fda4af;
  color:#9f1239;
}

.article .question-box{
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1e40af;
}

/*==================================================
  5. タブ見出しボックス / ラベルボックス (Cocoon)
==================================================*/

/* タブ見出しボックス (.tab-caption-box) */
.article .tab-caption-box{
  border:2px solid var(--pink-accent);
  border-radius:0 10px 10px 10px;
  background:#fff;
}

.article .tab-caption-box .tab-caption-box-label,
.article .tab-caption-box>.tab-caption{
  background:var(--grad-btn);
  color:#fff;
  border-radius:8px 8px 0 0;
  font-weight:700;
  padding:4px 16px;
}

/* ラベルボックス (.label-box) */
.article .label-box{
  border:2px solid #c4b5fd;
  border-radius:10px;
  background:#fff;
}

.article .label-box .label-box-label{
  background:var(--grad-btn);
  color:#fff;
  border-radius:14px;
  font-weight:700;
  padding:2px 18px;
}

/*==================================================
  6. タブボックス (独自)
  使い方:
  <div class="tab-box tb-point">
    <div class="tab-box-label">POINT</div>
    <div class="tab-box-content">内容</div>
  </div>
  バリエーション: tb-point / tb-check / tb-warning / tb-memo
==================================================*/

.article .tab-box{
  margin:1.5em 0;
  border-radius:0 10px 10px 10px;
  background:#fff;
}

.article .tab-box .tab-box-label{
  display:inline-block;
  color:#fff;
  font-size:.85em;
  font-weight:700;
  padding:4px 18px;
  border-radius:8px 8px 0 0;
}

.article .tab-box .tab-box-content{
  border:2px solid;
  border-radius:0 10px 10px 10px;
  padding:1em 1.2em;
}

/* POINT (ピンク〜紫) */
.article .tb-point .tab-box-label{background:var(--grad-btn)}
.article .tb-point .tab-box-content{border-color:var(--pink-accent);background:#fdf4ff}

/* CHECK (紫) */
.article .tb-check .tab-box-label{background:linear-gradient(90deg,#a855f7,#6366f1)}
.article .tb-check .tab-box-content{border-color:#a78bfa;background:#f5f3ff}

/* 注意 (赤系) */
.article .tb-warning .tab-box-label{background:linear-gradient(90deg,#fb7185,#f43f5e)}
.article .tb-warning .tab-box-content{border-color:#fda4af;background:#fff1f2}

/* メモ (グレー紫) */
.article .tb-memo .tab-box-label{background:#8b7ba8}
.article .tb-memo .tab-box-content{border-color:#cbc3dd;background:#faf9fc}

/*==================================================
  7. CTAボックス (独自)
  使い方:
  <div class="cta-box">
    <div class="cta-box-title">今だけ限定キャンペーン中</div>
    <p>説明テキスト</p>
    <div class="btn-wrap btn-wrap-l btn-shine"><a href="#">公式サイトはこちら</a></div>
  </div>
==================================================*/

.article .cta-box{
  margin:2em 0;
  padding:1.5em 1.2em;
  text-align:center;
  background:var(--grad-hero);
  border-radius:14px;
  box-shadow:0 4px 14px rgba(168,85,247,.18);
}

.article .cta-box .cta-box-title{
  color:#5b1d8a;
  font-size:1.15em;
  font-weight:700;
  margin-bottom:.6em;
}

.article .cta-box p{
  color:var(--purple-dark);
  font-size:.95em;
}

/*==================================================
  8. ランキングボックス (独自)
  使い方:
  <div class="rank-box rank-1">
    <div class="rank-box-header">サービス名</div>
    <div class="rank-box-content">内容・ボタンなど</div>
  </div>
  バリエーション: rank-1 (金) / rank-2 (銀) / rank-3 (銅)
==================================================*/

.article .rank-box{
  margin:2em 0;
  border-radius:12px;
  overflow:hidden;
  border:2px solid;
  background:#fff;
  box-shadow:0 2px 10px rgba(168,85,247,.1);
}

.article .rank-box .rank-box-header{
  color:#fff;
  font-weight:700;
  padding:10px 16px 10px 52px;
  position:relative;
}

/* 王冠(順位)アイコン */
.article .rank-box .rank-box-header::before{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85em;
}

.article .rank-box .rank-box-content{
  padding:1em 1.2em;
}

.article .rank-1{border-color:#f0c33c}
.article .rank-1 .rank-box-header{background:linear-gradient(90deg,#e7a615,#f0c33c)}
.article .rank-1 .rank-box-header::before{content:"1位";color:#c58a00}

.article .rank-2{border-color:#b6bec9}
.article .rank-2 .rank-box-header{background:linear-gradient(90deg,#8e9aa7,#b6bec9)}
.article .rank-2 .rank-box-header::before{content:"2位";color:#6e7b89}

.article .rank-3{border-color:#d9a074}
.article .rank-3 .rank-box-header{background:linear-gradient(90deg,#bd7b48,#d9a074)}
.article .rank-3 .rank-box-header::before{content:"3位";color:#a15f2c}

/*==================================================
  9. メリット・デメリットボックス (独自)
  使い方:
  <div class="merit-box">
    <div class="merit-box-title">メリット</div>
    <ul><li>...</li></ul>
  </div>
  <div class="demerit-box">
    <div class="demerit-box-title">デメリット</div>
    <ul><li>...</li></ul>
  </div>
==================================================*/

.article .merit-box,
.article .demerit-box{
  margin:1.5em 0;
  border-radius:10px;
  overflow:hidden;
  border:1px solid;
  background:#fff;
}

.article .merit-box{border-color:#a5d8c6}
.article .demerit-box{border-color:#f3b6bf}

.article .merit-box .merit-box-title,
.article .demerit-box .demerit-box-title{
  color:#fff;
  font-weight:700;
  padding:8px 16px;
  font-size:.95em;
}

.article .merit-box .merit-box-title{
  background:linear-gradient(90deg,#10b981,#34d399);
}

.article .demerit-box .demerit-box-title{
  background:linear-gradient(90deg,#f43f5e,#fb7185);
}

.article .merit-box ul,
.article .demerit-box ul{
  margin:0;
  padding:1em 1em 1em 2.2em;
}

.article .merit-box li{
  list-style:none;
  position:relative;
  margin-bottom:.4em;
}

.article .merit-box li::before{
  content:"\2713"; /* チェックマーク */
  position:absolute;
  left:-1.4em;
  color:#10b981;
  font-weight:700;
}

.article .demerit-box li{
  list-style:none;
  position:relative;
  margin-bottom:.4em;
}

.article .demerit-box li::before{
  content:"\00d7"; /* バツ */
  position:absolute;
  left:-1.4em;
  color:#f43f5e;
  font-weight:700;
}

/*==================================================
  10. Q&A (独自)
  使い方:
  <dl class="faq">
    <dt>質問文</dt>
    <dd>回答文</dd>
  </dl>
==================================================*/

.article .faq{
  margin:1.5em 0;
}

.article .faq dt,
.article .faq dd{
  position:relative;
  padding:.8em 1em .8em 3em;
  border-radius:10px;
  margin:0 0 .8em;
}

.article .faq dt{
  background:#fdf4ff;
  border:1px solid #f0d9f7;
  color:var(--purple-dark);
  font-weight:700;
}

.article .faq dd{
  background:#f8fafc;
  border:1px solid #e2e8f0;
}

.article .faq dt::before,
.article .faq dd::before{
  position:absolute;
  left:.8em;
  top:.65em;
  width:1.6em;
  height:1.6em;
  border-radius:50%;
  color:#fff;
  font-weight:700;
  font-size:.9em;
  display:flex;
  align-items:center;
  justify-content:center;
}

.article .faq dt::before{
  content:"Q";
  background:var(--grad-btn);
}

.article .faq dd::before{
  content:"A";
  background:#64748b;
}

/*==================================================
  11. テーブル / 比較表
==================================================*/

/* 記事内テーブル共通 */
.article table{
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #f0d9f7;
  border-radius:10px;
  overflow:hidden;
}

.article table th{
  background:linear-gradient(90deg,#fdf4ff,#f5f3ff);
  color:var(--purple-dark);
  border-color:#f0d9f7;
}

.article table td{
  border-color:#f0d9f7;
}

.article table tr:nth-of-type(even) td{
  background:#fefbff;
}

/* 比較表: 追加CSSクラスに comparison-table
   1列目(項目名)を固定・強調 */
.article .comparison-table th:first-child,
.article .comparison-table td:first-child{
  background:#fdf4ff;
  font-weight:700;
  white-space:nowrap;
}

/* 比較表の◎○△× 色分け用 */
.article .cell-best{color:#d946ef;font-weight:700}
.article .cell-good{color:#6366f1;font-weight:700}
.article .cell-bad{color:#94a3b8}

/* スマホで横スクロール */
@media (max-width:634px){
  .article .comparison-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
}

/*==================================================
  12. 目次 (Cocoon .toc)
==================================================*/

.article .toc{
  border:1px solid #f0d9f7;
  background:#fefbff;
  box-shadow:0 2px 8px rgba(168,85,247,.06);
}

.article .toc-title{
  color:var(--purple-dark);
  font-weight:700;
}

.article .toc a{
  color:var(--purple-text);
}

.article .toc a:hover{
  color:var(--pink-accent);
}

/*==================================================
  13. 吹き出し (Cocoon: 色調整のみ)
==================================================*/

.article .speech-wrap .speech-balloon{
  border-color:#f0d9f7;
  border-radius:12px;
  background:#fff;
}

.article .speech-wrap.sbs-think .speech-balloon{
  background:#fdf4ff;
}

/*==================================================
  レスポンシブ微調整
==================================================*/

@media (max-width:480px){

  .article h2{
    font-size:1.15em;
    padding:10px 12px;
  }

  .article .cta-box{
    padding:1.2em .8em;
  }

  .article .rank-box .rank-box-header{
    padding-left:48px;
  }

}