@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
*/

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* ===== 整活：診断UI ===== */

/* セクション全体（枠＆見出し） */
.diagnosis-section {
  border: 4px double #1d3b6b;      /* 二重線 */
  border-radius: 10px;
  padding: 16px 14px;
  margin: 18px 0;
  background: #f7fbff;             /* うっすら青背景 */
  color: #0f2a56;                   /* 文字色：濃い青 */
}

/* （オプション）“波線風”の飾り境界：下に細い波線 */
.diagnosis-section .wavy {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.diagnosis-section .wavy::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: radial-gradient(#1d3b6b 1.5px, transparent 2px);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  opacity: .7;
}

/* チェック行：カード風・ホバー強調 */
.diagnosis-check label {
  display: block;
  padding: 10px 12px;
  border: 1px solid #b7c6e0;
  border-radius: 8px;
  background: #fff;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
  color: #0f2a56; /* 文字色：濃い青 */
  line-height: 1.6;
  margin-bottom: 8px;
}
.diagnosis-check label:hover {
  background: #eef5ff;
  border-color: #7ea4e8;
  box-shadow: 0 2px 10px rgba(29,59,107,.08);
}

/* チェック済みハイライト（JSで .is-checked を付与） */
.diagnosis-check label.is-checked {
  border-color: #1d73e8;
  background: #e9f2ff;
  box-shadow: 0 0 0 3px rgba(29,115,232,.12);
}

/* チェックボックスのクリックしやすさUP */
.diagnosis-check input[type="checkbox"] {
  transform: scale(1.15);
  margin-right: 8px;
  accent-color: #1d73e8; /* 対応ブラウザでチェック色も青に */
}

/* 診断ボタン：大きく・中央寄せ・ホバー */
.diagnosis-actions {
  text-align: center;
  margin: 16px 0 8px;
}
#diagnosis-run {
  font-size: 18px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  border: 0;
  background: #1d73e8;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(29,115,232,.25);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
#diagnosis-run:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(29,115,232,.28);
  background: #1564cf;
}
#diagnosis-run:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(29,115,232,.25);
}

/* 結果ボックス */
.result-box {
  display: none;
  border: 2px solid #1d3b6b;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  color: #0f2a56;
  margin-top: 20px;
}
.result-box h3 { margin-top: 0; }
.result-box a { color: #1d73e8; font-weight: 700; text-decoration: underline; }


/* ===== 整活：診断 説明ボックス ===== */
.diagnosis-intro {
  border: 3px double #1d3b6b;       /* 二重枠 */
  border-radius: 12px;
  background: #f7fbff;              /* うっすら青 */
  color: #0f2a56;                    /* 文字は濃い青 */
  padding: 16px 18px;
  margin: 18px 0 12px;
  position: relative;
}
.diagnosis-intro .intro-title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; margin: 0 0 8px;
}
.diagnosis-intro .intro-title .badge {
  display: inline-block;
  min-width: 26px; text-align: center;
  font-size: 14px; font-weight: 800;
  color: #fff; background: #1d73e8;
  padding: 4px 8px; border-radius: 6px;
}
.diagnosis-intro p { margin: 0 0 6px; line-height: 1.8; }
.diagnosis-intro strong { color: #0b3b8c; }
@media (max-width: 480px) {
  .diagnosis-intro { padding: 14px; }
  .diagnosis-intro .intro-title { font-size: 16px; }
}


/* ===== 活力アップ献立メーカー ===== */
.diet-app { border:3px double #1d3b6b; border-radius:14px; background:#f7fbff; color:#0f2a56; padding:18px; margin:18px 0; }
.diet-app .da-title { margin:0 0 10px; font-weight:800; }
.da-tabs { display:flex; gap:8px; margin:8px 0 14px; }
.da-tab { flex:0 0 auto; padding:8px 12px; border:1px solid #b7c6e0; border-radius:999px; background:#fff; cursor:pointer; font-weight:700; }
.da-tab.active { background:#1d73e8; color:#fff; border-color:#1d73e8; }

.da-pane { display:none; }
.da-pane.active { display:block; }

.da-pick { background:#fff; border:1px solid #b7c6e0; border-radius:10px; padding:12px; }
.da-select { width:100%; min-height:210px; padding:6px; border-radius:8px; }
.da-actions { display:flex; gap:10px; margin-top:10px; }

.da-results { display:grid; grid-template-columns:1fr 320px; gap:14px; margin-top:14px; }
@media(max-width:900px){ .da-results{ grid-template-columns:1fr; } }

.da-summary, .da-chart { background:#fff; border:1px solid #b7c6e0; border-radius:10px; padding:12px; }
.da-note{ font-size:12px; color:#4d6aa3; margin:4px 0 8px; }
.da-list { margin:0; padding-left:18px; }
.da-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px; }
.da-kpis .kpi { background:#f0f6ff; border:1px solid #c9daf7; border-radius:8px; padding:10px; font-size:14px; }
.da-kpis .kpi strong{ font-size:16px; }

.da-radar { width:100%; height:auto; }
.da-percent { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; font-size:13px; }
.da-percent .p { background:#f0f6ff; border:1px solid #c9daf7; border-radius:8px; padding:6px; text-align:center; }

.da-share { display:flex; gap:10px; margin-top:12px; }
.da-btn { padding:10px 14px; border:0; border-radius:8px; background:#1d73e8; color:#fff; font-weight:800; cursor:pointer; }
.da-btn.ghost { background:#fff; color:#0f2a56; border:1px solid #b7c6e0; }
.da-btn.share { background:#111; }

.da-meal { background:#fff; border:1px solid #b7c6e0; border-radius:10px; padding:10px; margin-top:10px; }

.da-disclaimer { margin-top:10px; font-size:13px; }