@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){
  /*必要ならばここにコードを書く*/
}

/* AZUREMORI-CSS-START */
/* ==========================================================================
   Azure資格の森 — 記事の版面設計（2026-08-05 全面改訂）

   ねらい：このサイトの立ち位置は「参考書級の体系解説」で、実際に一次情報を
   当たって書いている。だから画面も**印刷された技術書**の作りに寄せる。
   角丸カード・影・絵文字マーカー・矢印の重ね置きをやめ、
   ヘアラインと小さなラベルで構造を示す。

   ルール
   - 見出しは「線を引いて飾る」のではなく、余白と字送りで階層を作る
   - 囲みは平面。角丸は最小、影は使わない
   - ラベル（結論／補足／注意／次に読む）が絵文字の代わりに意味を持つ
   - 色は1つに絞る。強調が2色以上に散ると、どれが大事か伝わらなくなる
   ========================================================================== */

.entry-content{
  --ink:#16202b;          /* 本文。純黒ではなく青みを含んだ濃色 */
  --ink-soft:#4c5d6c;     /* 補足・キャプション */
  --ink-mute:#7b8b98;     /* ラベル・注記 */
  --accent:#0a4e86;       /* 構造色。印刷インクに寄せた濃い青 */
  --link:#0067b8;         /* 操作できるもの */
  --rule:#dbe3ea;         /* ヘアライン */
  --rule-strong:#b9c6d2;
  --tint:#f4f7fa;         /* ごく薄い面 */
  --tint-deep:#eaf0f6;
  --flag:#9a4a17;         /* 注意。赤ではなく印刷の朱に近い茶 */
  --flag-tint:#faf4ef;
  --ok:#0f6b4f;
  --ok-tint:#f0f7f4;

  color:var(--ink);
  font-size:16px;
  line-height:2.0;
  letter-spacing:.012em;
}
.entry-content p{margin:0 0 1.5em}

/* ── 見出し ───────────────────────────────────────────────
   従来はグラデーションの下線＋発光。装飾が意味を持っていなかった。
   章の切れ目は「上の罫線と、その上の広い余白」で示す。紙の本と同じ。 */
.entry-content h2{
  margin:3.2em 0 1.1em; padding:1.1em 0 0;
  border:none; border-top:1px solid var(--rule-strong); background:none;
  color:var(--ink); font-size:1.5em; font-weight:800;
  line-height:1.5; letter-spacing:.02em; text-wrap:balance;
}
.entry-content h2::after,.entry-content h2::before{content:none}
.entry-content h3{
  margin:2.4em 0 .7em; padding:0 0 0 .72em;
  border:none; border-left:3px solid var(--accent); background:none;
  color:var(--ink); font-size:1.16em; font-weight:800;
  line-height:1.6; letter-spacing:.02em;
}
.entry-content h3::after,.entry-content h3::before{content:none}
.entry-content h4{
  margin:1.9em 0 .5em; color:var(--accent);
  font-size:1.02em; font-weight:800; letter-spacing:.03em;
}

/* ── 本文リンク ─────────────────────────────────────────
   既定の青＋密着した下線は「素のHTML」に見える。
   文字色は本文寄りにし、下線を離して細くする。 */
.entry-content a:not(.az-btn):not(.az-next a):not([class*="banner"]){
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(10,78,134,.32);
  transition:color .12s, text-decoration-color .12s;
}
.entry-content a:hover{ text-decoration-color:currentColor }
.entry-content a:focus-visible{ outline:2px solid var(--link); outline-offset:2px; border-radius:2px }

/* ── リスト ───────────────────────────────────────────── */
.entry-content ul,.entry-content ol{margin:0 0 1.6em; padding-left:1.35em}
.entry-content li{margin:0 0 .45em; line-height:1.95}
.entry-content ul>li::marker{color:var(--rule-strong)}
.entry-content ol>li::marker{color:var(--ink-mute); font-weight:700; font-size:.92em}

/* ── 共通ラベル ─────────────────────────────────────────
   絵文字の代わり。小さく、字を送り、色を落とす。
   「装飾ではなく分類」だと分かる見え方にする。 */
.az-label{
  display:block; margin:0 0 .5em;
  font-size:11px; font-weight:800; letter-spacing:.18em;
  color:var(--ink-mute); line-height:1;
}

/* ── 面ブロック（結論・補足・注意） ─────────────────────
   角丸と影をやめ、上下のヘアラインとごく薄い地で「別のもの」と示す。 */
.entry-content .az-block{
  margin:2.2em 0; padding:1.15em 1.3em;
  background:var(--tint); border:none;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  border-radius:0; box-shadow:none;
  font-size:.95em; line-height:1.95;
}
.entry-content .az-block>:last-child{margin-bottom:0}
.entry-content .az-block ul,.entry-content .az-block ol{margin-bottom:0}

.entry-content .az-block--key{
  background:#fff; border-top:2px solid var(--accent); border-bottom:1px solid var(--rule);
  padding-top:1em;
}
.entry-content .az-block--key .az-label{color:var(--accent)}

.entry-content .az-block--note{
  background:var(--tint); border-left:2px solid var(--rule-strong);
  border-top:none; border-bottom:none; padding-left:1.15em;
  color:var(--ink-soft); font-size:.92em;
}
.entry-content .az-block--warn{
  background:var(--flag-tint); border-top:1px solid rgba(154,74,23,.28);
  border-bottom:1px solid rgba(154,74,23,.28);
}
.entry-content .az-block--warn .az-label{color:var(--flag)}
.entry-content .az-block--warn strong{color:var(--flag)}

/* ── 冒頭のリード（旧 azure-banner） ─────────────────────
   グラデ・影・角丸・左レールをやめ、記事の入口だと分かる静かな一段に。 */
.entry-content .azure-banner{
  margin:0 0 2.2em; padding:.95em 0 1.05em;
  background:none; border:none;
  border-top:2px solid var(--accent); border-bottom:1px solid var(--rule);
  border-radius:0; box-shadow:none;
  font-size:.97em; line-height:1.95; color:var(--ink-soft);
}
.entry-content .azure-banner .azure-badge{
  display:inline-block; margin:0 .7em 0 0; padding:0;
  background:none; color:var(--accent); border-radius:0;
  font-size:11px; font-weight:800; letter-spacing:.16em; vertical-align:.12em;
}
.entry-content .azure-banner strong{color:var(--ink); font-weight:800}

/* ── 「次に読む」 ───────────────────────────────────────
   旧「🎯 次のステップ」は 絵文字＋箇条書きの点＋➡ で
   マーカーが三重になっていた。行そのものをリンクにし、
   記事名と役割を2段で見せる。点も矢印も要らない。 */
.entry-content .az-next{
  margin:3em 0 1em; padding:1.2em 0 0;
  border-top:1px solid var(--rule-strong);
}
.entry-content .az-next .az-label{color:var(--ink-mute); margin-bottom:.9em}
.entry-content .az-next ul{margin:0; padding:0; list-style:none}
.entry-content .az-next li{margin:0; padding:0; border-bottom:1px solid var(--rule)}
.entry-content .az-next li:first-child{border-top:1px solid var(--rule)}
.entry-content .az-next a{
  display:block; padding:.85em .2em .85em 0; text-decoration:none; color:var(--ink);
  transition:background .12s, padding .12s;
}
.entry-content .az-next a:hover{background:var(--tint); padding-left:.5em}
.entry-content .az-next a:focus-visible{outline:2px solid var(--link); outline-offset:-2px}
.entry-content .az-next .t{
  display:block; font-size:1em; font-weight:700; line-height:1.7; color:var(--accent);
}
.entry-content .az-next a:hover .t{text-decoration:underline; text-underline-offset:.2em}
.entry-content .az-next .d{
  display:block; margin-top:.1em; font-size:.845em; color:var(--ink-mute); line-height:1.75;
}

/* ── カード一覧（ハブの記事索引） ───────────────────────
   角丸＋左レール＋影の「よくあるカード」をやめ、
   罫線で区切った一覧にする。情報量は同じで、静かになる。 */
.entry-content .az-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 2.2em; margin:1.2em 0 2.4em;
}
.entry-content .az-cards a{
  display:block; padding:1em .2em; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.entry-content .az-cards a:hover{background:var(--tint)}
.entry-content .az-cards .t{display:block; font-weight:700; color:var(--accent); line-height:1.65}
.entry-content .az-cards a:hover .t{text-decoration:underline; text-underline-offset:.2em}
.entry-content .az-cards .d{display:block; margin-top:.25em; font-size:.85em; color:var(--ink-mute); line-height:1.75}

/* ── 表 ───────────────────────────────────────────────
   濃紺ベタの見出しセルは画面上で重い。上下の罫線と
   ラベル体の見出し行で、印刷物の表に寄せる。 */
.entry-content table.cmp,.entry-content table.az-table{
  width:100%; border-collapse:collapse; margin:1.6em 0 2em;
  font-size:.93em; line-height:1.85;
  border-top:2px solid var(--accent); border-bottom:1px solid var(--rule-strong);
}
.entry-content table.cmp th,.entry-content table.az-table th{
  background:none !important; color:var(--ink-mute) !important;
  font-size:11.5px; font-weight:800; letter-spacing:.1em;
  text-align:left; padding:.7em .9em; border:none;
  border-bottom:1px solid var(--rule-strong); white-space:nowrap;
}
.entry-content table.cmp td,.entry-content table.az-table td{
  padding:.85em .9em; border:none; border-bottom:1px solid var(--rule);
  background:none !important; vertical-align:top;
}
.entry-content table.cmp tr>td:first-child{font-weight:700; color:var(--ink)}
.entry-content .table-scroll{overflow-x:auto; margin:1.6em 0 2em}
.entry-content .table-scroll table{margin:0}

/* ── 図 ─────────────────────────────────────────────── */
.entry-content figure{margin:2.2em 0}
.entry-content figure img{border-radius:2px}
.entry-content figcaption{
  margin-top:.7em; font-size:.83em; color:var(--ink-mute); line-height:1.8;
}

/* ── コード ───────────────────────────────────────────
   ⚠️ `code` に一律で背景色を当てないこと。
   コードブロックは <pre><code> で、ハイライトが行ごとに <code> を持つ実装もある。
   一律指定すると **暗いコードブロックの各行に白い帯が乗る**（2026-08-05に実際に踏んだ）。
   文中のインラインコードだけを対象にし、ブロック内は必ず打ち消す。 */
.entry-content :not(pre) > code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.875em; background:var(--tint-deep); color:var(--ink);
  padding:.12em .4em; border-radius:2px;
}
.entry-content pre code,
.entry-content pre code *{
  background:none !important; color:inherit; padding:0; border-radius:0;
  font-size:inherit; font-family:inherit;
}

/* ── 見出し直後の余白調整 ─────────────────────────────── */
.entry-content h2+p,.entry-content h3+p{margin-top:0}
.entry-content h2+.az-block,.entry-content h3+.az-block{margin-top:1.4em}

/* ── スマホ ─────────────────────────────────────────── */
@media screen and (max-width:834px){
  .entry-content{font-size:15.5px; line-height:1.95}
  .entry-content h2{font-size:1.32em; margin-top:2.6em}
  .entry-content h3{font-size:1.1em}
  .entry-content .az-block{padding:1em 1.05em; margin:1.9em 0}
  .entry-content .az-cards{gap:0}
  .entry-content table.cmp th,.entry-content table.az-table th{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .entry-content a,.entry-content .az-next a,.entry-content .az-cards a{transition:none}
}

/* ==========================================================================
   ヘッダーとグローバルナビ

   旧版は濃紺→青のグラデーションのベタ帯＋影だった。面で色を塗ると
   「テンプレートに色を流した」見え方になり、本文の静かな作りとも噛み合わない。
   ブランド色は **紙面の天に引く細い線**（本の花布のような）で示し、
   ロゴとナビは白地に置いて文字で見せる。
   ========================================================================== */
body{ border-top:3px solid #0a4e86 }

/* 中央揃えの縦積みをやめ、**本の柱（running head）**の構成にする。
   ロゴを左、説明文を右に置いて横に張り、下に双罫を引く。
   縦に積んで中央に寄せると視線の起点が生まれず、余白だけが目立つ。 */
#header{
  background:#fff; box-shadow:none;
  border-bottom:1px solid #c9d4de;
}
#header .header-in,#header #header-in{
  flex-direction:row; align-items:baseline; justify-content:space-between;
  gap:20px 28px; flex-wrap:wrap;
  padding-top:20px; padding-bottom:16px;
}
/* ⚠️ この器には clearfix の .cf が付いていて ::before / ::after を持つ。
   flexコンテナでは擬似要素も**アイテムとして数えられる**ため、
   space-between が4要素で分配され、ロゴが左端から297px内側に押し込まれていた。
   幅0で見えないので、見た目からは原因が分からない。必ず打ち消す。 */
#header .header-in::before,#header .header-in::after,
#header #header-in::before,#header #header-in::after{content:none}
/* 説明文は右へ。DOM上はロゴより前にあるので order で入れ替える */
#header .tagline{
  order:2; flex:0 1 auto; margin:0; text-align:right;
  color:#8b9bab; font-weight:600; font-size:11.5px; letter-spacing:.13em;
  line-height:1.75; max-width:34em;
}
#header .logo-header{order:1; text-align:left; margin:0; line-height:1.2}
#header .logo-header .site-name-text-link,
#header .site-name-text-link,
#header .logo-header a{
  color:#16202b !important; text-shadow:none;
  padding-left:0; margin-left:0;   /* ナビ・本文と同じ左の起点にそろえる */
}
/* 見出しの顔をアイキャッチと揃える。ゴシックの太字は画面の顔、明朝は本の顔。 */
#header .site-name-text{
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Times New Roman",serif;
  font-size:29px; font-weight:600; letter-spacing:.16em; color:#16202b;
}

/* ナビもロゴと同じ左の起点にそろえる。中央寄せだと版面の左端と関係が切れる。 */
#navi{
  background:#fff; box-shadow:none;
  border-top:none; border-bottom:1px solid #dbe3ea;
}
#navi .menu-top.menu-pc{justify-content:flex-start; gap:0}
#navi .menu-top>li>a{padding-left:0; padding-right:0; margin-right:2.1em}
#navi .menu-top>li:last-child>a{margin-right:0}
#navi .menu-top>li>a::after{left:0; right:0}
/* 柱の下の双罫（細い線＋間＋細い線）。1本の太線より紙面に近い */
#navi::after{
  content:""; display:block; height:2px; margin-top:-1px;
  background:linear-gradient(#fff 0, #fff 1px, #eaf0f6 1px, #eaf0f6 2px);
}
#navi .menu-top a,#navi ul li a{
  color:#4c5d6c; font-weight:700; font-size:14px; letter-spacing:.04em;
  transition:color .15s;
}
#navi .menu-top>li>a{position:relative}
#navi .menu-top>li>a:hover{background:none; color:#0a4e86}
#navi .menu-top>li>a::after{
  content:""; position:absolute; left:1.1em; right:1.1em; bottom:12px;
  height:2px; background:#0a4e86; border-radius:0;
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
#navi .menu-top>li>a:hover::after,
#navi .current-menu-item>a::after,
#navi .current_page_item>a::after{transform:scaleX(1)}
#navi .current-menu-item>a,#navi .current_page_item>a{color:#0a4e86}

@media screen and (max-width:834px){
  /* 横に張れないので縦に積むが、中央寄せには戻さない。左の起点は保つ。 */
  #header .header-in,#header #header-in{
    flex-direction:column; align-items:flex-start; gap:6px;
    padding-top:14px; padding-bottom:12px;
  }
  #header .tagline{order:2; text-align:left; font-size:10.5px; letter-spacing:.09em; max-width:100%}
  #header .site-name-text{font-size:23px; letter-spacing:.12em}
  #navi .menu-top>li>a{margin-right:1.2em}
}

/* ── 本文のボタン（旧：インラインstyleの色違い3種） ─────────
   色でボタンを差別化すると、どれが主要な行き先か分からなくなる。
   主要導線1つだけを塗り、残りは枠線にして序列を作る。 */
.entry-content .az-btns{
  display:flex; flex-wrap:wrap; gap:10px; margin:1.6em 0 2.2em;
}
.entry-content a.az-btn{
  display:inline-block; padding:.72em 1.35em;
  font-size:.94em; font-weight:700; letter-spacing:.02em;
  text-decoration:none; border-radius:3px;
  border:1px solid var(--accent); color:var(--accent); background:#fff;
  transition:background .15s,color .15s;
}
.entry-content a.az-btn:hover{background:var(--tint-deep)}
.entry-content a.az-btn--primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.entry-content a.az-btn--primary:hover{background:#093f6d}
.entry-content a.az-btn:focus-visible{outline:2px solid var(--link); outline-offset:2px}

/* ── 出題範囲の一覧（ハブページ）─────────────────────────
   資格が2つ以上になったので、AI-901とAZ-900で同じ部品を使う。
   ハブの本文にインラインstyleで書くと、片方だけ古い見た目のまま取り残される。

   未公開の項目は「準備中」を出す。リンクにできない行を
   リンクのように見せると、押して何も起きない体験になる。 */
/* 配点ラベル。見出しの「中」には置けない —— Cocoonの目次生成が
   見出しからタグを剥がすので、span が消えて本文と地続きになる。 */
.entry-content h3+.az-w{
  margin:.5em 0 0;
  font-size:11.5px; font-weight:800; letter-spacing:.1em;
  color:var(--ink-mute);
}
.entry-content ul.az-syl{
  list-style:none; margin:.9em 0 2.2em; padding:0;
  border-top:1px solid var(--rule);
}
.entry-content ul.az-syl>li{
  margin:0; padding:.9em .2em; border-bottom:1px solid var(--rule);
  line-height:1.7;
}
.entry-content ul.az-syl>li::marker{content:none}
.entry-content ul.az-syl a{font-weight:700; color:var(--link)}
.entry-content ul.az-syl strong{font-weight:700; color:var(--ink)}
.entry-content ul.az-syl .az-soon{
  display:inline-block; margin-left:.7em; padding:.15em .6em;
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
  color:var(--ink-mute); border:1px solid var(--rule-strong); border-radius:2px;
  vertical-align:.12em; white-space:nowrap;
}
.entry-content ul.az-syl .d{
  display:block; margin-top:.2em;
  font-size:.85em; color:var(--ink-mute); line-height:1.8;
}
.entry-content .az-note-sm{
  margin:-1.2em 0 2.4em; font-size:.85em; color:var(--ink-mute); line-height:1.9;
}
.entry-content .az-tm{
  margin:3.6em 0 0; padding-top:1.4em; border-top:1px solid var(--rule);
  font-size:.8em; color:var(--ink-mute); line-height:1.9;
}

/* ── 演習（AZ-900）─────────────────────────────────────
   ⚠️ AI-901 の `.az-quiz` には触らない。あちらは本文中にインラインstyleで
   組まれており、同じクラス名に後からCSSを当てると片方だけ崩れる。
   新しい器 `.azq` を用意して、AZ-900だけがこちらを使う。

   AZ-900は「はい/いいえ」を3文ならべ、**文ごとに部分点**が入る形式に対応する必要がある
   （公式が「正解したコンポーネントごとに1点が付与されます」と明記）。 */
.entry-content .azq{
  border:1px solid var(--rule); border-top:2px solid var(--accent);
  padding:1.3em 1.4em 1.4em; margin:1.8em 0; background:var(--card,#fff);
}
.entry-content .azq-n{
  font-family:ui-monospace,"SFMono-Regular","Consolas",monospace;
  font-size:11px; letter-spacing:.14em; color:var(--ink-mute);
  display:block; margin-bottom:.5em;
}
.entry-content .azq-q{font-weight:700; margin:0 0 .3em; line-height:1.8}
.entry-content .azq-hint{
  display:block; margin:.2em 0 1em;
  font-size:12px; letter-spacing:.06em; color:var(--ink-mute);
}
/* 選択肢 */
.entry-content .azq-opt{
  border:1px solid var(--rule); padding:.7em .95em; margin:.5em 0;
  cursor:pointer; line-height:1.75; transition:background .12s,border-color .12s;
}
.entry-content .azq-opt:hover{background:var(--tint)}
.entry-content .azq-opt.is-ok{border-color:var(--ok); background:var(--ok-tint)}
.entry-content .azq-opt.is-ng{border-color:var(--flag); background:var(--flag-tint)}
.entry-content .azq-opt.is-pick{border-color:var(--link); background:var(--tint-deep)}
/* はい／いいえ */
.entry-content .azq-yn{border-top:1px solid var(--rule); padding:.9em 0 .2em}
.entry-content .azq-yn:first-of-type{border-top:none}
.entry-content .azq-stm{margin:0 0 .55em; line-height:1.8}
.entry-content .azq-btns{display:flex; gap:.5em; flex-wrap:wrap}
.entry-content .azq-b{
  min-width:5.4em; text-align:center; padding:.45em 1em; cursor:pointer;
  border:1px solid var(--rule-strong); font-size:.9em; font-weight:700;
  letter-spacing:.06em; color:var(--ink-soft); transition:background .12s,border-color .12s;
}
.entry-content .azq-b:hover{background:var(--tint)}
.entry-content .azq-b.is-ok{border-color:var(--ok); background:var(--ok-tint); color:var(--ok)}
.entry-content .azq-b.is-ng{border-color:var(--flag); background:var(--flag-tint); color:var(--flag)}
.entry-content .azq-b.is-dim{opacity:.4}
.entry-content .azq-yfb{
  margin:.5em 0 0; font-size:.86em; line-height:1.85; color:var(--ink-soft);
}
.entry-content .azq-yfb b{margin-right:.4em}
/* 判定・解説 */
.entry-content .azq-go{
  display:inline-block; margin:.9em 0 0; padding:.55em 1.6em; cursor:pointer;
  background:var(--accent); color:#fff; font-weight:700; letter-spacing:.06em; font-size:.92em;
}
.entry-content .azq-fb{margin:.9em 0 0; font-weight:700}
.entry-content .azq-exp{
  display:none; margin:.8em 0 0; padding:.9em 1.1em;
  background:var(--tint); border-left:2px solid var(--rule-strong);
  font-size:.9em; line-height:1.9; color:var(--ink-soft);
}
.entry-content .azq-ref{margin:.8em 0 0; font-size:.83em}
.entry-content .azq-score{
  position:sticky; top:0; z-index:5; margin:0 0 1.8em; padding:.75em;
  background:var(--accent); color:#fff; text-align:center;
  font-weight:700; letter-spacing:.06em; font-size:.95em;
  font-variant-numeric:tabular-nums;
}
/* AZUREMORI-CSS-END */