@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ==========================================
   Google Fonts 位置修正
========================================== */
.material-symbols-outlined,
.material-icons {
  vertical-align: middle;
  line-height: 1;
}
.material-symbols-outlined {
  position: relative;
  top: -1px;
}

/* ==========================================
   BOX 共通
========================================== */
.box {
  padding: 16px 18px;
  margin: 24px 0;
  border-radius: 6px;
}
.box > :last-child {
  margin-bottom: 0;
}
.box ol {
  list-style-position: outside;
  padding-left: 1.4em;
  line-height: 1.65;
}
.box ol li::marker {
  color: #475569;
}
.box ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.4em;
  margin: 0 0 1em;
  line-height: 1.7;
}
.box ul li::marker {
  color: #475569;
}
.box .box-title {
  font-weight: 700;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* box 良い点 */
.box-positive {
  border-left: 6px solid #22c55e;
  background: #f0fdf4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.box-positive .box-title {
  color: #166534;
}

/* box 気になった点 */
.box-negative {
  border-left: 6px solid #9ca3af;
  background: #f9fafb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.box-negative .box-title {
  color: #374151;
}

/* box 注意 */
.box-warning {
  border-left: 6px solid #ef4444;
  background: #fef2f2;
}
.box-warning .box-title {
  color: #991b1b;
}

/* box ポイント */
.box-point {
  border-left: 6px solid #f59e0b;
  background: #fffbeb;
}
.box-point .box-title {
  color: #92400e;
}

/* box コツ */
.box-tip {
  border-left: 6px solid #10b981;
  background: #ecfdf5;
}
.box-tip .box-title {
  color: #065f46;
}

/* box 補足・情報（青緑） */
.box-info {
  border-left: 6px solid #0d9488;
  background: #f0fdfa;
}
.box-info .box-title {
  color: #115e59;
}
.box-info .material-symbols-outlined {
  color: #115e59;
}

/* box 評価（青） */
.box-summary {
  border-left: 6px solid #3b82f6;
  background: #eff6ff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.box-summary .box-title {
  color: #1e40af;
}

/* box 最終評価（紫） */
.box-conclusion {
  border-left: 6px solid #6366f1;
  background: #eef2ff;
}
.box-conclusion .box-title {
  color: #3730a3;
}

/* box チェックリスト（水色） */
.box-checklist {
  border-left: 6px solid #0ea5e9;
  background: #f0f9ff;
}
.box-checklist .box-title {
  color: #075985;
}

/* box 手順（紫） */
.box-steps {
  border-left: 6px solid #8b5cf6;
  background: #f5f3ff;
}
.box-steps .box-title {
  color: #5b21b6;
}

/* box 評価チェック（.box と組み合わせて使用） */
.box-evaluation {
  border: 2px solid #bbdefb;
  background: #fafdff;
}
.box-evaluation .box-title {
  font-size: 1.1rem;
  color: #1565c0;
}

/* box 引用 */
.box-quote {
  border-left: 4px solid #9ca3af;
  background: #f9fafb;
  font-style: italic;
  color: #374151;
}

/* box 基本情報 */
.box-overview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.box-overview .box-title {
  color: #0f172a;
}
.box-overview-comment {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #475569;
}

/* box 記事冒頭 */
.box-intro {
  background: #f1f5f9;
  border-left: 4px solid #334155;
}
.box-intro .box-title {
  color: #0f172a;
}
.box-intro .intro-summary {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #475569;
}

/* box おすすめ */
.box-recommend {
  background: #f8fafc;
  border-left: 4px solid #94a3b8;
}

/* box 全体の流れ */
.box-flow {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.box-flow ol {
  margin: 0;
  padding-left: 1.6em;
}
.box-flow ol li {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e5e7eb;
}
.box-flow ol li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.box-flow strong {
  display: inline-block;
  margin-bottom: 2px;
}

/* ==========================================
   チェックリスト（スタンドアロン）
========================================== */
.checklist {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}
.checklist li {
  padding: 7px 0 7px 28px;
  position: relative;
  border-bottom: 1px solid #f1f5f9;
  line-height: 1.6;
}
.checklist li:last-child {
  border-bottom: none;
}
.checklist li::before {
  content: '□';
  position: absolute;
  left: 4px;
  color: #94a3b8;
  font-size: 1.1em;
}

/* ==========================================
   FAQ
========================================== */
.faq-item {
  display: block !important;
  margin: 20px 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}
.faq-item .faq-q,
.faq-item .faq-a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 12px 16px;
  float: none !important;
}
.faq-item .faq-q {
  background: #eff6ff;
  border-bottom: 1px solid #e2e8f0;
}
.faq-item .faq-a {
  color: #374151;
  line-height: 1.7;
}
.faq-label {
  display: block !important;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.faq-item .faq-q .faq-label { color: #1e40af; }
.faq-item .faq-a .faq-label { color: #94a3b8; }
.faq-text {
  display: block !important;
  line-height: 1.7;
}

/* ==========================================
   ラベル / バッジ（インライン）
========================================== */
.label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.5;
  vertical-align: middle;
}
.label-blue   { background: #dbeafe; color: #1e40af; }
.label-green  { background: #dcfce7; color: #166534; }
.label-red    { background: #fee2e2; color: #991b1b; }
.label-yellow { background: #fef9c3; color: #854d0e; }
.label-gray   { background: #f1f5f9; color: #475569; }

/* ==========================================
   テーブル 共通
========================================== */
.table-base {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.table-base th,
.table-base td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}
.table-base th {
  font-weight: 600;
  background: #fafafa;
}
.table-base tr:last-child td {
  border-bottom: none;
}
@media (max-width: 768px) {
  .table-base {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* テーブル 基本情報 */
.table-overview th {
  width: 32%;
  white-space: nowrap;
}

/* テーブル 評価チェック */
.table-evaluation th {
  width: 45%;
}
.table-evaluation .status-good {
  color: #2e7d32;
  font-weight: 500;
}
.table-evaluation .status-warn {
  color: #ef6c00;
}
.table-evaluation .status-bad {
  color: #c62828;
}

/* テーブル 総合評価 */
.table-score td:last-child {
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* テーブル 価格比較 */
.table-price th,
.table-price td {
  text-align: center;
}
.table-price .price {
  font-weight: 700;
  font-size: 1.05rem;
}
.table-price .best {
  background: #fff7e6;
}
.table-price .cheap {
  color: #d32f2f;
  font-weight: 600;
}

/* テーブル スペック比較 */
.table-spec th {
  white-space: nowrap;
}
.table-spec td {
  text-align: center;
}
.table-spec .highlight {
  background: #eef6ff;
  font-weight: 600;
}

/* テーブル 方法比較 */
.table-compare th,
.table-compare td {
  text-align: center;
}

/* テーブル ランキング */
.table-ranking td:first-child {
  font-weight: 700;
  text-align: center;
  width: 60px;
}
.table-ranking .rank-1 { background: #fff4e5; }
.table-ranking .rank-2 { background: #f5f5f5; }
.table-ranking .rank-3 { background: #fbe9e7; }

/* テーブル 利用条件・基本情報 */
.table-info th {
  width: 35%;
  white-space: nowrap;
}

/* テーブル 時系列・履歴 */
.table-timeline th {
  width: 30%;
  white-space: nowrap;
}
.table-timeline td {
  color: #444;
}

/* テーブル スケジュール */
.table-schedule th {
  width: 25%;
  white-space: nowrap;
}

/* テーブル メリット・デメリット */
.table-procon th {
  text-align: center;
}
.table-pro { color: #2e7d32; }
.table-con { color: #c62828; }

/* テーブル 持ち物チェックリスト */
.table-checklist th {
  white-space: nowrap;
}
.table-check-yes      { color: #2e7d32; font-weight: 600; }
.table-check-optional { color: #ef6c00; }
.table-check-no       { color: #999; }

/* テーブル トラブル対応 */
.table-trouble th {
  width: 30%;
}
.table-trouble td {
  line-height: 1.6;
}

/* ==========================================
   CTA
========================================== */
.product-cta {
  border: 2px solid #ff6b6b;
  border-radius: 8px;
  padding: 20px;
  margin: 32px 0;
  background: #fff8f8;
}

/* CTA 商品情報テーブル */
.product-cta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.product-cta-table th,
.product-cta-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.product-cta-table th {
  width: 30%;
  background: #fafafa;
  text-align: left;
  font-weight: bold;
}
.product-cta-table tr:last-child th,
.product-cta-table tr:last-child td {
  border-bottom: none;
}

/* CTA 購入ボタン */
.product-cta-btn {
  display: block;
  text-align: center;
  background: #ff6b6b;
  color: #fff;
  padding: 14px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: 0.3s;
}
.product-cta-btn:hover {
  background: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

/* ==========================================
   レスポンシブ
========================================== */
@media screen and (max-width: 834px) {
  .box {
    padding: 14px 16px;
  }
}
@media screen and (max-width: 480px) {
  .box {
    margin: 16px 0;
    padding: 12px 14px;
  }
  .product-cta-btn {
    font-size: 15px;
    padding: 12px;
  }
}