@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; }
}


/* 整活アプリ共通 */
#katsuryoku-app {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
#katsuryoku-app h2 {
  border-left: 4px solid #0066cc;
  padding-left: 8px;
  margin-top: 20px;
  color: #004080;
}
#katsuryoku-app label {
  display: block;
  margin: 8px 0;
}
#katsuryoku-app input, #katsuryoku-app select {
  margin-left: 6px;
}
#katsuryoku-app button {
  margin-top: 10px;
  padding: 6px 14px;
  background: #0066cc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#katsuryoku-app button:hover {
  background: #004080;
}
#selected-menus {
  list-style: disc;
  margin-left: 20px;
}
#nutrient-list {
  margin-top: 10px;
  font-size: 14px;
}
#ul-alerts {
  color: red;
  font-weight: bold;
}
#suggestions {
  margin-top: 10px;
  background: #fff3cd;
  border: 1px solid #ffeeba;
  padding: 10px;
  border-radius: 6px;
}



/* 活力ごはん 1日3食ジェネレーター v0.9 */
.kg-wrap{border:1px solid #e5e8ef;border-radius:12px;padding:16px;background:#fff}
.kg-grid{display:grid;gap:10px}
@media(min-width:768px){.kg-grid{grid-template-columns:repeat(3,1fr)}}
.kg-row{display:flex;gap:8px;flex-wrap:wrap}
.kg-ctrl label{display:flex;flex-direction:column;font-size:14px;gap:6px}
.kg-ctrl select,.kg-ctrl input{padding:8px;border:1px solid #c8d2e1;border-radius:8px}
.kg-btn{padding:10px 14px;border-radius:10px;border:1px solid #c8d2e1;background:#0d3b66;color:#fff;cursor:pointer}
.kg-btn-alt{background:#1e5aa7}
.kg-card{border:1px solid #e5e8ef;border-radius:10px;padding:10px;background:#fbfdff}
.kg-meal{margin:12px 0}
.kg-meal h4{margin:.2em 0 .4em;border-left:4px solid #0d3b66;padding-left:8px}
.kg-tag{display:inline-block;background:#eef3fb;border:1px solid #d1dcf0;padding:2px 8px;border-radius:999px;font-size:12px;margin-right:6px}
.kg-foot{font-size:12px;color:#586a85;margin-top:8px}
.warn{background:#fff3e6;border:1px solid #ffd3a6;color:#8a3d00;border-radius:8px;padding:8px;margin:6px 0}