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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
:root{
  --accent: #4865b2;   /* 見出し・アイコンの基調色 */
  --text:   #333;      /* 本文色 */
  --muted:  #f7f7f7;   /* 見出しh2背景など */
  --radius: 10px;
  --box-bg: #f8f9ff;   /* ボックス背景 */
}

/* フォント（残す） */
body{
  font-family: Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;
  color: var(--text);
}

/* ================== サムネイル ================== */


/* ================== 見出し ================== */
h2{
  background: var(--muted);
  border-left: 9px solid var(--accent);
  color: var(--text);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.6;
  padding: 20px 40px 18px;
  margin: 60px 40px 0;
}
h3{
  border-left: 9px solid var(--accent);
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 1.6px;
  padding: 0 15px;
  margin: 60px 40px 40px;
}
@media (max-width: 479px){
  h2{ font-size: 18px; padding: 10px 20px; margin: 60px 5px 0; }
  h3{ font-size: 18px; margin: 60px 5px 40px; }
}

/* ================== 本文・画像 ================== */
p{
  font-size: 17px;
  line-height: 2;
  margin: 0 40px 1.8em;
  color: var(--text);
}
img{
  display:block;
  max-width:100%;
  height:auto;
  margin:30px 0;
  border:1px solid #d8d8d8;
}
.bold, strong{ font-weight: 600; }
@media (max-width: 479px){
  p{ font-size: 16px; margin: 0 20px 1.6em; }
}

/* ================== ボックス ================== */
.box{
  --box-accent: var(--accent);
  background: var(--box-bg);
  border: 1px dashed var(--box-accent);
  border-radius: var(--radius);
  padding: 1.05em 1.2em 1.05em 3.2em;
  margin: 0 40px 1.8em;
  position: relative;
  color: var(--text); /* 本文は常に通常色 */
}
.box::before{
  content:"";
  position:absolute; left:1.1em; top:1.05em;
  width:1.2em; height:1.2em;
  background: var(--box-accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 5-5 1.4 1.4-6.4 6.4Z'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 5-5 1.4 1.4-6.4 6.4Z'/></svg>") no-repeat center/contain;
}
.box--check{ --box-accent: var(--accent); }
.box--note { --box-accent: #4b6584; }
.box--warn { --box-accent: #b24a48; }
.box ul, .box ol{ margin: .5em 0 0 1.2em; }

/* ================== リスト ================== */
ul{ margin: 0 40px 1.8em; padding-left: 1.4em; color: var(--text); }
li{ margin: 0 0 .6em; line-height: 1.9; }
ul.list-check{ list-style:none; padding-left: 1.6em; }
ul.list-check li{ position:relative; }
ul.list-check li::before{
  content:""; position:absolute; left:-1.6em; top:.45em;
  width:1.05em; height:1.05em; background: var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z'/></svg>") no-repeat center/contain;
}

/* ================== 引用 ================== */
blockquote{
  margin: 0 40px 1.8em;
  padding: .8em 1em .8em 1.2em;
  border-left: 6px solid var(--accent);
  background: var(--muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
}
/* 横スクロール対応ラッパー */
.scroll-table{ overflow:auto; -webkit-overflow-scrolling:touch; }

/* 表本体 */
.scroll-table table{ border-collapse:collapse; width:100%; min-width:640px; }
.scroll-table th, .scroll-table td{
  border:1px solid #cfcfcf; padding:12px 14px; line-height:1.7;
  font-size:15px; color:var(--text);
}
.scroll-table th{ background:var(--muted); text-align:left; font-weight:600; }

/* しましま（可読性） */
.scroll-table tbody tr:nth-child(odd) td{ background:#fafbff; }

/* セル内での段落・リスト整形 */
.scroll-table td p{ margin:0 0 .6em; }
.scroll-table td ul{ margin:.4em 0 0; padding-left:1.2em; }

/* モバイル最適化 */
@media (max-width:479px){
  .scroll-table table{ min-width:520px; } /* 指で横スクロール */
}

/* ダークモード調整 */
@media (prefers-color-scheme:dark){
  .scroll-table th, .scroll-table td{ border-color:#3a3f4b; }
  .scroll-table th{ background:#1f2433; }
  .scroll-table tbody tr:nth-child(odd) td{ background:#1b2232; }
}

/* ================== リンク ================== */
a{ color:#337ab7; font-weight:600; text-decoration:none; }
a:hover,a:focus{ color:#23527c; }
a:focus{ outline:2px solid rgba(72,101,178,.35); outline-offset:2px; }

/* ================== レスポンシブ ================== */
@media (max-width: 479px){
  ul{ margin: 0 20px 1.6em; }
  blockquote{ margin: 0 15px 1.6em; }
  .box{ margin: 0 15px 1.8em; }
  .thumbnail{ margin: 0 auto 25px; }
}

/* ================== ダークモード ================== */
@media (prefers-color-scheme: dark){
  :root{ --text:#e9e9e9; --muted:#1f2433; --box-bg:#1b2232; }
  img, .thumbnail img{ border-color:#3a3f4b; }
}