@charset "UTF-8";

/*!
Theme Name: failog child
Description: failog.com 用の自作子テーマ。要件定義書 第7章と共通規程 第7章に従う。A02 から A10 へ複製して使う。複製時に変えるのはサイト名と強調色のみ。
Theme URI: https://failog.com/
Author: 筆者
Template: cocoon-master
Version: 1.0.0
*/

/* ============================================================
   このファイルは見た目の指定を書くファイルである。
   親テーマ cocoon-master のファイルは一切書き換えない。
   色は3色のみ。罫線には新しい色を使わず、文字色を薄くしたものを使う。
   書体は端末に入っているものだけを使い、外部から読み込まない。
   ============================================================ */

/* ------------------------------------------------------------
   1 色と寸法のもとになる値
   ここだけを書き換えれば、他のサイトへ複製できる。
   複製時に変えるのは --moji-iro ではなく --kyocho-iro（強調色）のみ。
   ------------------------------------------------------------ */
:root {
  /* 3色。これ以外の色を増やさない */
  --moji-iro: #1c1c1c;      /* 文字色 */
  --haikei-iro: #ffffff;    /* 背景色 */
  --kyocho-iro: #14375e;    /* 強調色。複製時はここだけ変える */

  /* 罫線と区切り線。新しい色ではなく文字色を薄くしたもの */
  --keisen: rgba(28, 28, 28, 0.16);
  --keisen-usui: rgba(28, 28, 28, 0.09);
  --jimi-haikei: rgba(28, 28, 28, 0.04);
  --shima: rgba(28, 28, 28, 0.02);  /* 表の1行おきの地色 */

  /* 文字の大きさ */
  --honbun: 16px;
  --gyokan: 1.8;

  /* 触れる場所の最小の大きさ */
  --tap: 44px;
}

/* ------------------------------------------------------------
   2 書体
   優先の順は、ヒラギノ角ゴシック、Noto Sans JP、メイリオ、端末の標準。
   游ゴシックは線が細く読みにくいため入れない。
   Windows で system-ui が游ゴシックへ落ちるのを避けるため、
   メイリオを system-ui より前に置く。
   外部から書体を読み込む記述は1行も書かない。
   ------------------------------------------------------------ */
:root {
  --gothic:
    "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3",
    "Hiragino Sans",
    "Noto Sans JP",
    "Meiryo",
    "メイリオ",
    system-ui,
    sans-serif;
}

body,
.entry-content,
.article,
input,
button,
select,
textarea {
  font-family: var(--gothic);
}

/* 数字がそろって見えるようにする。表の中の数字の読み違いを防ぐ */
table,
time,
.entry-content td,
.entry-content th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------
   3 文字の大きさと行の間、日本語の組み方
   ------------------------------------------------------------ */
body {
  color: var(--moji-iro);
  background-color: var(--haikei-iro);
  font-size: var(--honbun);
  line-height: var(--gyokan);

  /* 禁則処理に沿わせる。行頭に句読点や閉じ括弧を置かない */
  line-break: strict;
  /* 単語の途中で改行しない */
  word-break: normal;
  overflow-wrap: normal;
}

.entry-content {
  font-size: var(--honbun);
  line-height: var(--gyokan);
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}

.entry-content p {
  margin: 0 0 1.6em;
}

/* 長い英数字の並びだけは、はみ出すより折り返す。
   対象は書き出した符号の部分に限る。
   本文のリンクは日本語の文言で書くため、ここに含めない。
   含めると日本語の単語が途中で折れ、
   要件定義書 第7章の「単語の途中で改行しない」に反するためである */
.entry-content code,
.entry-content pre,
.entry-content kbd,
.entry-content samp {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ------------------------------------------------------------
   4 見出し
   本文より大きくするが、画面の高さを占領しない大きさに抑える。
   見出しの上の角丸四角の飾りや、先頭の絵文字は付けない。
   ------------------------------------------------------------ */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--gothic);
  color: var(--moji-iro);
  line-height: 1.5;
  font-weight: 700;
  /* 見出しの上は下より広く取る */
  margin: 2.4em 0 0.9em;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.entry-content h2 {
  font-size: 1.5rem;   /* 24px */
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--kyocho-iro);
}

/* 見出しの脇に太い色の帯を立てない。
   帳票に近い見た目にそろえ、細い罫で下に区切る */
.entry-content h3 {
  font-size: 1.25rem;  /* 20px */
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--keisen);
}

.entry-content h4 {
  font-size: 1.0625rem; /* 17px */
}

.entry-content h5,
.entry-content h6 {
  font-size: 1rem;
}

/* 記事の題名。画面いっぱいの大きな見出しにはしない */
.entry-title,
.article-header .entry-title {
  font-family: var(--gothic);
  font-size: 1.75rem;  /* 28px */
  line-height: 1.45;
  font-weight: 700;
  color: var(--moji-iro);
  margin: 0 0 0.5em;
}

/* 見出しの先頭に絵文字や記号を差し込む飾りを打ち消す */
.entry-content h2::before,
.entry-content h3::before,
.entry-content h4::before,
.entry-title::before {
  content: none;
}

/* ------------------------------------------------------------
   5 帳票に近い、情報の密度が高い作り
   意味のない広い余白を作らない
   ------------------------------------------------------------ */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.6em;
  padding-left: 1.6em;
}

.entry-content li {
  margin-bottom: 0.4em;
}

.entry-content ul li::marker,
.entry-content ol li::marker {
  color: var(--kyocho-iro);
}

/* 引用。左の線は1pxに抑える */
.entry-content blockquote {
  margin: 0 0 1.6em;
  padding: 0.8em 1em;
  background: var(--jimi-haikei);
  border: 0;
  border-left: 1px solid var(--keisen);
  border-radius: 0;
  color: var(--moji-iro);
}

.entry-content hr {
  border: 0;
  border-top: 1px solid var(--keisen);
  margin: 2.4em 0;
}

/* ------------------------------------------------------------
   6 本文中のリンク
   下線の位置を字にかぶせない。強調色で示す
   ------------------------------------------------------------ */
.entry-content a {
  color: var(--kyocho-iro);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.entry-content a:hover {
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------
   7 比較表
   列は4列まで。携帯では横に流れる形にし、1列目を固定する
   ------------------------------------------------------------ */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  background: var(--haikei-iro);
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--keisen);
  padding: 0.6em 0.7em;
  text-align: left;
  vertical-align: top;
}

.entry-content thead th,
.entry-content tr:first-child th {
  background: var(--jimi-haikei);
  font-weight: 700;
}

.entry-content tbody tr:nth-child(even) {
  background: var(--shima);
}

/* javascript.js が表を包む入れ物。横に流れる形にする */
.failog-hyo-scroll {
  margin: 0 0 1.6em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.failog-hyo-scroll > table {
  margin-bottom: 0;
}

/* 表の中の横に流れる線。既定の見た目のままにしない */
.failog-hyo-scroll {
  scrollbar-color: var(--keisen) transparent;
  scrollbar-width: thin;
}

.failog-hyo-scroll::-webkit-scrollbar {
  height: 8px;
}

.failog-hyo-scroll::-webkit-scrollbar-thumb {
  background: var(--keisen);
  border-radius: 0;
}

/* ------------------------------------------------------------
   8 記事に置くものの枠
   広告の枠は中身があるときだけ出る。中身が無いときは
   kiji-haichi.php が何も書き出さないため、この指定も働かない
   ------------------------------------------------------------ */

/* 題名の直下に置く、広告を含むことの明示
   共通規程 第9章により、本文と同じ大きさで、読める色にする。
   小さくして目立たなくすることは、規制への対応として認められない */
.failog-kokoku-meiji {
  margin: 0 0 1.2em;
  padding: 0.5em 0.7em;
  font-size: 1rem;   /* 16px 本文と同じ大きさ */
  line-height: 1.7;
  color: var(--moji-iro);  /* 薄い灰色にしない */
  background: var(--jimi-haikei);
  border-left: 1px solid var(--keisen);
}

/* 書き手を紹介する部分とフォローを促す部分を表示しない。
   表示上の名前は failog に変えてあるため、
   ログインに使う名前はここには出ない。
   そのうえで、書き手の紹介そのものを出さない。
   親テーマの表示の可否を決める関数では
   .author-link の部分が消えなかったため、ここでも止める */
.author-box,
.sns-follow,
.author-link,
.post-author {
  display: none;
}

/* 目次
   親テーマの目次は、枠の線に rgb(204, 204, 204) を使っている。
   これは3色の外の色である。
   要件定義書 第7章の「罫線や区切り線には新しい色を使わない。
   文字色を薄くしたものを使う」に合わせて置き換える。
   実際に画面の色を測って見つけた箇所である */
.entry-content .toc,
.toc {
  border-color: var(--keisen);
  border-radius: 0;
  background: var(--haikei-iro);
}

.entry-content .toc .toc-title,
.toc .toc-title {
  color: var(--moji-iro);
}

/* この記事の要点
   検索から来た人が最初の画面で答えを得られるようにする枠。
   すべての記事に置く。帳票に近い形にし、細い罫で囲む。
   色は増やさない */
.failog-yoten {
  margin: 0 0 1.6em;
  padding: 0.9em 1em;
  border: 1px solid var(--keisen);
  background: var(--haikei-iro);
}

/* 親テーマの見出しの指定より強く効かせる。
   入れ物と組にして書かないと、
   親テーマの薄い灰色の帯と大きな文字が勝ってしまう。
   その灰色は3色の外の色であり、増やしてはならない */
.failog-yoten > .failog-yoten-midashi {
  margin: 0 0 0.6em;
  padding: 0;
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--moji-iro);
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
}

.failog-yoten > .failog-yoten-midashi::before,
.failog-yoten > .failog-yoten-midashi::after {
  content: none;
  background: none;
  border: 0;
}

.failog-yoten-list {
  margin: 0;
  padding-left: 1.3em;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.7;
}

.failog-yoten-list li {
  margin-bottom: 0.35em;
}

.failog-yoten-list li:last-child {
  margin-bottom: 0;
}

.failog-yoten-list li::marker {
  color: var(--kyocho-iro);
}

/* 何が起きたか
   事故や失敗の要点を本文の前に一目で示す表。帳票に近い形にする。
   左に見出しの列、右に中身の列。細い罫で区切る。色は増やさない。
   事故や失敗を扱う記事にのみ使う */
.failog-karute {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.7;
  background: var(--haikei-iro);
  border: 1px solid var(--keisen);
}

.failog-karute-caption {
  caption-side: top;
  text-align: left;
  padding: 0.5em 0.7em;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--haikei-iro);
  background: var(--kyocho-iro);
}

.failog-karute th,
.failog-karute td {
  border-top: 1px solid var(--keisen-usui);
  padding: 0.55em 0.7em;
  text-align: left;
  vertical-align: top;
}

.failog-karute tr:first-child th,
.failog-karute tr:first-child td {
  border-top: 0;
}

/* 左の見出しの列。幅を決めて、右の中身とそろえる */
.failog-karute th {
  width: 7.5em;
  font-weight: 700;
  background: var(--jimi-haikei);
  border-right: 1px solid var(--keisen-usui);
  white-space: nowrap;
}

/* 共有の並び。原色をやめ、文字色の細い枠と文字だけにする */
.sns-share .sns-buttons a,
.sns-share a.sns-button {
  background: var(--haikei-iro);
  background-color: var(--haikei-iro);
  color: var(--moji-iro);
  border: 1px solid var(--keisen);
  border-radius: 0;
  box-shadow: none;
  min-height: var(--tap);
}

.sns-share .sns-buttons a:hover,
.sns-share a.sns-button:hover {
  background: var(--jimi-haikei);
  background-color: var(--jimi-haikei);
  color: var(--kyocho-iro);
  border-color: var(--kyocho-iro);
}

.sns-share .sns-buttons a .button-icon,
.sns-share .sns-buttons a .button-caption {
  color: inherit;
}

/* 広告の枠
   バナーの画像そのものは配布元のものなので手を入れない。
   枠の側だけを整える。
   枠の中の行き先は、閲覧の仕組みの既定の青が付く。
   これは3色の外の色であるため、強調色にそろえる。
   いまのバナーは画像だけで文字が無いため画面には出ないが、
   文字のある広告に差し替えたときに出てしまうため先に直す */
.failog-kokoku {
  margin: 2em 0;
}

.failog-kokoku a {
  color: var(--kyocho-iro);
}

.failog-kokoku > * {
  max-width: 100%;
}

/* この記事について の枠。
   本文より小さい文字と、ごく薄い背景で本文と区別する */
.failog-kiji-nitsuite {
  margin: 2.4em 0;
  padding: 1em 1.1em;
  font-size: 0.875rem; /* 14px 本文16pxより小さい */
  line-height: 1.75;
  color: var(--moji-iro);
  background: var(--jimi-haikei);
  border: 1px solid var(--keisen-usui);
}

/* 枠の中の2つの見出し。
   親テーマの見出しの指定に負けると、
   灰色の帯や余分な枠線が付き、間延びする。
   入れ物と組にして書き、こちらの指定を通す。
   AI執筆の開示を運営者情報のページへ移し、
   枠の中身が更新履歴だけになったため、
   余白を詰めて締まった見え方にそろえた */
.failog-kiji-nitsuite > .failog-kiji-nitsuite-midashi {
  margin: 0 0 0.5em;
  padding: 0;
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  line-height: 1.5;
  color: var(--moji-iro);
  letter-spacing: 0.02em;
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
}

.failog-kiji-nitsuite > .failog-rireki-midashi {
  margin: 0 0 0.35em;
  padding: 0;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.5;
  color: var(--moji-iro);
  background: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
}

.failog-kiji-nitsuite > .failog-kiji-nitsuite-midashi::before,
.failog-kiji-nitsuite > .failog-kiji-nitsuite-midashi::after,
.failog-kiji-nitsuite > .failog-rireki-midashi::before,
.failog-kiji-nitsuite > .failog-rireki-midashi::after {
  content: none;
  background: none;
  border: 0;
}

.failog-rireki {
  margin: 0;
  padding-left: 1.3em;
}

.failog-rireki li {
  margin-bottom: 0.25em;
}

/* ------------------------------------------------------------
   9 触れる場所の大きさ
   ------------------------------------------------------------ */
/* 自分で足した部品と、行き先を選ぶ部分だけを対象にする。
   親テーマの並びの仕組みまで置き換えると、
   触れる場所を広げたつもりで並びが崩れるためである。
   親テーマ側の並びについては、幅375の目視で確かめる */
.entry-content .btn,
.entry-content button,
.pagination a,
.page-numbers {
  min-height: var(--tap);
  min-width: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 横に流れる表を、指だけでなくキーでも動かせるようにする。
   その入れ物にも指の当たる高さを確保する */
.failog-hyo-scroll {
  min-height: var(--tap);
}

/* 下の帯の行き先。必須ページ4点への入口である。
   既定では高さが24ピクセルしかなく、指で押しにくい。
   44ピクセル四方以上を確保する。
   並べ方そのものは親テーマに任せ、
   行き先の中だけを縦に伸ばす */
.navi-footer-in .menu-item a,
.footer-bottom .menu-item a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

/* ------------------------------------------------------------
   10 描いていない部分も見た目のうち
   文字の選択、入力の縦棒、指の当たる印を3色の中でそろえる
   ------------------------------------------------------------ */
::selection {
  background: var(--kyocho-iro);
  color: var(--haikei-iro);
}

body {
  caret-color: var(--kyocho-iro);
  accent-color: var(--kyocho-iro);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kyocho-iro);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   11 使わないものを打ち消す
   共通規程 第7章の禁止リストに当たるものを、
   親テーマ側で出ていた場合に備えて消す
   ------------------------------------------------------------ */

/* 斜めのぼかし模様を使わない */
body,
.entry-content,
.article,
.entry-card,
.widget {
  background-image: none;
}

/* 枠の中に枠を入れる作りにしない */
.entry-content .failog-kiji-nitsuite .failog-kiji-nitsuite {
  border: 0;
  background: none;
  padding: 0;
}

/* 角の丸みを持たせない。帳票に近い直線的な見た目にする */
.entry-content blockquote,
.entry-content table,
.entry-content th,
.entry-content td,
.failog-kiji-nitsuite,
.failog-kokoku-meiji {
  border-radius: 0;
}

/* ------------------------------------------------------------
   12 レスポンシブ
   ------------------------------------------------------------ */

/*1023px以下*/
@media screen and (max-width: 1023px) {
  .entry-title,
  .article-header .entry-title {
    font-size: 1.625rem; /* 26px */
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  .entry-content h2 {
    font-size: 1.375rem; /* 22px */
  }

  .entry-content h3 {
    font-size: 1.1875rem; /* 19px */
  }
}

/*480px以下 携帯。幅375で崩れないことを毎回確認する*/
@media screen and (max-width: 480px) {
  body,
  .entry-content {
    font-size: 16px;   /* 携帯でも本文16px */
    line-height: 1.7;  /* 携帯の行の間は1.7 */
  }

  .entry-title,
  .article-header .entry-title {
    font-size: 1.375rem; /* 22px 画面の高さを占領しない */
    line-height: 1.45;
  }

  .entry-content h2 {
    font-size: 1.25rem;  /* 20px */
    margin-top: 2em;
  }

  .entry-content h3 {
    font-size: 1.125rem; /* 18px */
  }

  /* 横にはみ出させない */
  .entry-content img,
  .entry-content iframe,
  .entry-content video,
  .failog-kokoku img,
  .failog-kokoku iframe {
    max-width: 100%;
    height: auto;
  }

  /* 比較表は横に流れる形にし、1列目を固定する */
  .failog-hyo-scroll > table {
    width: auto;
    min-width: 100%;
  }

  .failog-hyo-scroll > table th:first-child,
  .failog-hyo-scroll > table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--haikei-iro);
    /* 固定した列の右端が分かるように、文字色を薄くした線を引く */
    box-shadow: 1px 0 0 0 var(--keisen);
  }

  .failog-hyo-scroll > table thead th:first-child,
  .failog-hyo-scroll > table tr:first-child th:first-child {
    background: var(--jimi-haikei);
  }

  /* 余白を詰めて、帳票に近い密度を保つ */
  .failog-kiji-nitsuite {
    padding: 0.9em 0.9em;
  }
}

/* ------------------------------------------------------------
   20 3色の外の色をそろえる（依頼書 A01-37）

   これまでの色の点検は記事の中身だけを測っており、
   上の帯、下の帯、右の欄、記事一覧は範囲に入っていなかった。
   そのため、これらの場所は親テーマの既定の色のままだった。
   サイト名そのものが #333333 で表示されていた。

   ここでは、画面に出ている3色の外の色を、
   要件定義書 第7章と共通規程 第7章にそろえる。
   文字は文字色に、罫線と区切りは文字色を薄くしたものにする。
   画面に出ていない部品の色は直さない。

   親テーマ cocoon-master のファイルは書き換えていない。
   ------------------------------------------------------------ */

/* 20-1 文字。親テーマの既定 #333333 と #999999 を文字色にそろえる。
   いずれも記事の本文の外にある部品である。
   本文の中のリンクは強調色のままにするため、
   .entry-content の中は対象にしない */
.site-name-text,
a.site-name,
.site-name-text-link,
.entry-card-title,
.entry-card-snippet,
.entry-date,
.entry-card-wrap,
.related-entry-card-title,
.related-entry-card-snippet,
.related-entry-card-wrap,
.prev-post-title,
.next-post-title,
.prev-post,
.next-post,
.wp-block-latest-posts__post-title,
.list-item-caption,
.breadcrumb-caption,
.breadcrumb,
.breadcrumb a {
  color: var(--moji-iro);
}

/* 20-2 分類の札。白い文字を載せるため、地は文字色そのものにする。
   親テーマは rgba(51, 51, 51, 0.7) を使っていた */
.cat-label {
  background-color: var(--moji-iro);
  border-color: var(--keisen);
}

/* 20-3 分類へのボタン。親テーマは #333333 を使っていた */
.cat-link {
  background-color: var(--moji-iro);
}

/* 20-4 読み飛ばしの印。
   目で操作しない人が最初に触れる場所である。
   親テーマは黒を使っていた */
.skip-link {
  background-color: var(--moji-iro);
  color: var(--haikei-iro);
}

/* 20-5 入力欄と検索。罫線の #cccccc と #dddddd を、
   文字色を薄くしたものにそろえる */
.wp-block-search__input,
.wp-block-search__button,
.search-edit,
.wpcf7-form-control,
input[type="text"],
input[type="email"],
select,
textarea {
  border-color: var(--keisen);
}

/* 検索のボタン。親テーマは #32373c を使っていた */
.wp-block-search__button {
  background-color: var(--moji-iro);
  color: var(--haikei-iro);
}

/* 送信のボタン。親テーマは地に #f5f8fa、罫線に #dddddd を使っていた */
.wpcf7-submit {
  background-color: var(--jimi-haikei);
  border-color: var(--keisen);
  color: var(--moji-iro);
}

/* 20-6 右の欄の見出し。親テーマは地に #f5f6f7 を使っていた。
   記事の本文の見出しには効かせないため、右の欄に限る */
.sidebar h2.wp-block-heading,
#sidebar h2.wp-block-heading,
.widget h2.wp-block-heading {
  background-color: var(--jimi-haikei);
  color: var(--moji-iro);
}

/* 20-7 下の帯の並び。親テーマは罫線に #dddddd を使っていた */
.menu-item,
.navi-in li,
.footer-bottom-content li {
  border-color: var(--keisen);
}

/* 20-8 表。親テーマは罫線に #eeeeee、1行おきの地に #fafbfc を使っていた */
table th,
table td {
  border-color: var(--keisen);
}

table tr:nth-child(even) {
  background-color: var(--shima);
}

/* ------------------------------------------------------------
   21 20節で効かなかったものを、色の指定に限って優先させる（依頼書 A01-37）

   20節を書いたあとに測り直したところ、一部が残っていた。
   親テーマ側の指定のほうが詳細度が高いためである。
   例えば検索の入力欄は、親テーマが
   .widget_search .wp-block-search__input と2つの印で指定しており、
   子テーマの1つの印では負ける。

   ここでは色の指定だけを優先させる。
   大きさや余白や並び方には優先を付けない。
   色だけであれば、崩れが起きないためである。

   このファイルでここまで優先の指定を使っていなかったが、
   3色の決まりは共通規程 第7章の必須事項であるため、
   ここに限って使う。
   ------------------------------------------------------------ */

/* 21-1 記事の本文の外にあるリンクと見出しの文字。
   本文の中のリンクは強調色のままにするため、ここに含めない */
.site-name-text,
.site-name-text-link,
.entry-card-wrap,
.entry-card-title,
.entry-card-snippet,
.entry-date,
.related-entry-card-wrap,
.related-entry-card-title,
.related-entry-card-snippet,
.prev-post,
.next-post,
.prev-post-title,
.next-post-title,
.list-item-caption,
.menu-caption,
.breadcrumb,
.breadcrumb a,
.breadcrumb-caption {
  color: var(--moji-iro) !important;
}

/* 最新記事の一覧のリンク。リンクであるため強調色にそろえる */
.wp-block-latest-posts__post-title {
  color: var(--kyocho-iro) !important;
}

/* 21-2 入力欄と検索の罫線 */
.wp-block-search__input,
.wp-block-search__button,
.search-edit,
.wpcf7-form-control,
.menu-item,
.navi-in li {
  border-color: var(--keisen) !important;
}

/* 送信のボタンの地 */
.wpcf7-submit {
  background-color: var(--jimi-haikei) !important;
}

/* 21-3 表。親テーマの1行おきの地色を消し、子テーマのものにそろえる */
table tr {
  background-color: transparent !important;
}

table tr:nth-child(even) {
  background-color: var(--shima) !important;
}

th,
td {
  border-color: var(--keisen) !important;
}

/* 21-4 書き出しの一覧と分類の一覧のリンク。
   印が付いていないため20節と21-1で拾えていなかった。
   リンクであるため強調色にそろえる */
.wp-block-archives-list a,
.wp-block-categories-list a,
.wp-block-archives a,
.wp-block-categories a {
  color: var(--kyocho-iro) !important;
}

/* 21-5 下の帯の並びのリンク。
   親テーマが .navi-footer-in a で
   --cocoon-text-color（#333333）を指定していた。
   印が付いていないため、これまでの節では拾えていなかった */
.navi-footer-in a,
.navi-footer-in .item-label,
.footer-bottom a,
.copyright,
.footer a {
  color: var(--moji-iro) !important;
}

/* ------------------------------------------------------------
   22 記事の一覧を行の形にする（依頼書 A01-43）

   依頼書 A01-42 で、一覧に出す画像を文字だけの図として作ったが、
   幅375では画像が126×71まで縮み、中の文字が読めなかった。
   一覧の小さな枠では、文字だけの図が成り立たない。

   そこで一覧から画像を外し、1件を1行にまとめる形にする。
   出すのは、日付、分類、題名、本文の冒頭の一文の4つである。

   画像そのものは残す。他所で共有されたときにだけ使う。

   親テーマ cocoon-master のファイルは書き換えていない。
   ------------------------------------------------------------ */

/* 22-1 枠を行の形にする。
   親テーマの入れ物 .entry-card-content を透かして、
   中の部品を直接並べる。
   日付と分類を上の段に、題名と冒頭をその下に置く */
.entry-card,
.related-entry-card {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-areas:
    "hidzuke bunrui"
    "daimei daimei"
    "bouto bouto";
  column-gap: 1em;
  row-gap: 0.35em;
  padding: 1.1em 0;
}

.entry-card-content,
.related-entry-card-content {
  display: contents;
}

/* 22-2 画像を出さない。
   分類の札は画像の上に重ねられていたため、
   入れ物ごと消さずに、中の画像だけを消す */
.entry-card-thumb img,
.related-entry-card-thumb img,
.entry-card-thumb .no-image,
.related-entry-card-thumb .no-image {
  display: none;
}

.entry-card-thumb,
.related-entry-card-thumb {
  grid-area: bunrui;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  align-self: center;
}

/* 22-3 分類。札の見た目をやめ、小さい文字にする。
   色は強調色。二重に出ないよう、札はこれ1つだけになる */
.entry-card-thumb .cat-label,
.related-entry-card-thumb .cat-label,
.entry-card .cat-label,
.related-entry-card .cat-label {
  position: static;
  display: inline;
  padding: 0;
  margin: 0;
  background: none !important;
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--kyocho-iro) !important;
  max-width: none;
  white-space: nowrap;
}

/* 22-4 日付。小さい文字で、文字色を薄くしたもの */
.entry-card-meta,
.related-entry-card-meta {
  grid-area: hidzuke;
  position: static;
  margin: 0;
  padding: 0;
  align-self: center;
}

.entry-card-meta .entry-date,
.entry-card-meta .post-date,
.related-entry-card-meta .entry-date {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.6;
  color: rgba(28, 28, 28, 0.55) !important;
}

/* 更新の日付と時計の印は出さない。行を短く保つ */
.entry-card-meta .post-update,
.related-entry-card-meta .post-update,
.entry-card-meta .fa,
.related-entry-card-meta .fa {
  display: none;
}

/* 22-5 題名。本文より少し大きくする */
.entry-card-title,
.related-entry-card-title {
  grid-area: daimei;
  margin: 0;
  padding: 0;
  font-size: 1.125rem; /* 18px */
  line-height: 1.55;
  font-weight: 700;
  color: var(--moji-iro) !important;
}

/* 22-6 本文の冒頭の一文 */
.entry-card-snippet,
.related-entry-card-snippet {
  grid-area: bouto;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.75;
  color: var(--moji-iro) !important;
}

/* 22-7 行と行の区切り。細い罫だけにする。
   枠で囲まない。角を丸くしない */
.entry-card-wrap,
.related-entry-card-wrap {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--keisen);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  background: var(--jimi-haikei);
}

/* いちばん下の行の罫は出さない */
.list > .entry-card-wrap:last-child,
.related-list > .related-entry-card-wrap:last-child {
  border-bottom: 0;
}

/* 親テーマの枠の飾りを打ち消す */
.list .a-wrap,
.related-list .a-wrap {
  border-radius: 0;
  box-shadow: none;
}

/* 22-8 幅375でも同じ形にする。横に並べ替えない */
@media screen and (max-width: 834px) {
  .entry-card,
  .related-entry-card {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas:
      "hidzuke bunrui"
      "daimei daimei"
      "bouto bouto";
  }

  .entry-card-thumb,
  .related-entry-card-thumb {
    width: auto;
    float: none;
  }

  .entry-card-content,
  .related-entry-card-content {
    display: contents;
  }
}

/* 22-9 幅の狭い画面でも、本文の冒頭の一文を出す。
   親テーマは狭い画面でこれを消していた。
   依頼書 A01-43 は「幅375でも同じ形にする」としているため、
   4つの部品がそろうようにする */
@media screen and (max-width: 834px) {
  .entry-card-snippet,
  .related-entry-card-snippet {
    display: block !important;
  }

  .entry-card-thumb .cat-label,
  .related-entry-card-thumb .cat-label {
    white-space: normal;
  }
}

/* ------------------------------------------------------------
   23 分類の色と、上の帯のメニュー（依頼書 A01-45）

   共通規程 v2.5 の第7章により、基本の3色に加えて
   分類ごとの色を最大4色まで使えるようになった。
   分類の識別のためにのみ使い、装飾には使わない。
   本文の中では使わない。

   4色はいずれも、白い地色の上で明るさの比4.5以上を
   満たすことを実測して選んだ。値は次のとおりである。

     AIでサイトを作る      #1f7ab8  比 4.63
     AIに任せた実務        #27794c  比 5.35
     依頼書と指示の出し方  #7a4bbf  比 5.86
     費用と道具            #a85c00  比 5.00

   橙は明るいままでは比3.00で満たさなかったため、
   満たす濃さまで暗くした。共通規程 第7章による。

   親テーマ cocoon-master のファイルは書き換えていない。
   ------------------------------------------------------------ */

:root {
  --bunrui-seisaku: #1f7ab8;  /* AIでサイトを作る */
  --bunrui-jitsumu: #27794c;  /* AIに任せた実務 */
  --bunrui-shiji:   #7a4bbf;  /* 依頼書と指示の出し方 */
  --bunrui-hiyo:    #a85c00;  /* 費用と道具 */
}

/* 23-1 第21節と第22節で分類の札に当てていた
   「強調色にそろえる優先の指定」を、分類の札に限って外す。
   外すのはここだけである。
   題名、抜粋、日付、下の帯、パンくずなど、
   それ以外の箇所では3色にそろえる指定をそのまま残す。 */
.entry-card .cat-label,
.related-entry-card .cat-label,
.entry-card-thumb .cat-label,
.related-entry-card-thumb .cat-label {
  color: inherit;
}

/* 23-2 分類ごとの色。
   親テーマは分類の番号を印として付けるため、それで振り分ける。
   3 AIでサイトを作る / 4 AIに任せた実務
   5 依頼書と指示の出し方 / 6 費用と道具 */
.cat-label-3 { color: var(--bunrui-seisaku) !important; }
.cat-label-4 { color: var(--bunrui-jitsumu) !important; }
.cat-label-5 { color: var(--bunrui-shiji) !important; }
.cat-label-6 { color: var(--bunrui-hiyo) !important; }

/* 23-3 一覧の行の左端に、分類の色の線を置く。
   行そのものの区切りは、これまでどおり細い罫のままとする */
.entry-card-wrap {
  padding-left: 0.9em;
  border-left: 3px solid var(--keisen);
}

.entry-card-wrap:has(.cat-label-3) { border-left-color: var(--bunrui-seisaku); }
.entry-card-wrap:has(.cat-label-4) { border-left-color: var(--bunrui-jitsumu); }
.entry-card-wrap:has(.cat-label-5) { border-left-color: var(--bunrui-shiji); }
.entry-card-wrap:has(.cat-label-6) { border-left-color: var(--bunrui-hiyo); }

/* ------------------------------------------------------------
   23-4 上の帯

   共通規程 第7章の「上の帯に、分類への行き先を置く」による。
   分類を4つ作ったのに、そこへ行く道が無い状態だった。
   ------------------------------------------------------------ */

/* いちばん上に、4色の細い帯を置く。4分割で左から順に並べる */
.header-container::before {
  content: "";
  display: block;
  height: 4px;
  background-image: linear-gradient(
    to right,
    var(--bunrui-seisaku) 0 25%,
    var(--bunrui-jitsumu) 25% 50%,
    var(--bunrui-shiji) 50% 75%,
    var(--bunrui-hiyo) 75% 100%
  );
}

/* サイト名を左に置く。中央寄せをやめる。
   上下の余白を詰める */
.header-in,
.header-container-in {
  text-align: left;
}

.logo-header,
.logo,
.site-name,
.site-name-text-link {
  text-align: left;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.site-name-text {
  font-size: 1.375rem; /* 22px */
  line-height: 1.35;
}

/* 説明はサイト名の下に小さく置く */
.tagline {
  text-align: left;
  margin: 0.15em 0 0;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  color: rgba(28, 28, 28, 0.55) !important;
}

/* 上の帯の余白を詰める。
   もとは説明とサイト名の間、サイト名と本文の間が広すぎた */
.header,
.header-in {
  padding-top: 0.9em;
  padding-bottom: 0.9em;
}

/* 23-5 上の帯のメニュー。サイト名の右に置く */
.failog-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1em;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.failog-menu li {
  margin: 0;
  padding: 0;
}

.failog-menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.2em;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  text-decoration: none;
  color: var(--moji-iro);
  border-bottom: 2px solid transparent;
}

.failog-menu a:hover {
  border-bottom-color: currentColor;
}

/* 分類への行き先には、その分類の色を付ける */
.failog-menu .failog-menu-3 a { color: var(--bunrui-seisaku); }
.failog-menu .failog-menu-4 a { color: var(--bunrui-jitsumu); }
.failog-menu .failog-menu-5 a { color: var(--bunrui-shiji); }
.failog-menu .failog-menu-6 a { color: var(--bunrui-hiyo); }

/* サイト名とメニューを横に並べる入れ物 */
.failog-obi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4em 1.4em;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
  box-sizing: border-box;
}

.failog-obi-hidari {
  min-width: 0;
}

/* 23-6 幅の狭い画面。
   メニューを2行に折り返す形にする。
   横に流す形や開閉する形は、押す前に何があるか分からないため
   採らない。折り返しなら4つの分類がすべて最初から見える。
   触れる場所の高さは 44px を保つ */
@media screen and (max-width: 834px) {
  .failog-obi {
    flex-direction: column;
    align-items: stretch;
    gap: 0.3em;
  }

  .failog-menu {
    justify-content: flex-start;
    gap: 0 0.9em;
  }

  .failog-menu a {
    min-height: var(--tap);
    font-size: 0.8125rem; /* 13px */
  }
}

/* ------------------------------------------------------------
   23-7 直しの追記（依頼書 A01-45）

   1つ目。分類の色が第22節の優先の指定に負けていた。
   第22節は `.entry-card .cat-label` の2つの印で指定しており、
   分類の色を1つの印で書くと詳細度で負ける。
   同じ2つの印の形にそろえる。

   2つ目。親テーマの上の帯はサイト名を関数で書き出しており、
   差し替えの口が無かった。
   差し込み口でメニューを足したため、並べ方をここで決める。
   ------------------------------------------------------------ */

/* 分類の色。第22節と同じ詳細度にそろえる */
.entry-card .cat-label-3,
.related-entry-card .cat-label-3,
.entry-card-thumb .cat-label-3 { color: var(--bunrui-seisaku) !important; }

.entry-card .cat-label-4,
.related-entry-card .cat-label-4,
.entry-card-thumb .cat-label-4 { color: var(--bunrui-jitsumu) !important; }

.entry-card .cat-label-5,
.related-entry-card .cat-label-5,
.entry-card-thumb .cat-label-5 { color: var(--bunrui-shiji) !important; }

.entry-card .cat-label-6,
.related-entry-card .cat-label-6,
.entry-card-thumb .cat-label-6 { color: var(--bunrui-hiyo) !important; }

/* 上の帯の並べ方。
   1段目にサイト名とメニュー、2段目に説明を置く */
.header-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em 1.2em;
  text-align: left;
}

.header-in .logo,
.header-in .logo-header {
  order: 1;
  margin: 0;
  text-align: left;
}

.header-in .failog-menu-wrap {
  order: 2;
  margin-left: auto;
}

.header-in .tagline {
  order: 3;
  flex-basis: 100%;
  margin: 0;
  text-align: left;
}

@media screen and (max-width: 834px) {
  .header-in {
    justify-content: flex-start;
  }

  .header-in .failog-menu-wrap {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }

  .header-in .tagline {
    order: 2;
  }
}

/* ------------------------------------------------------------
   24 一覧の強弱と、右の欄（依頼書 A01-46）

   共通規程 v2.5 第7章の「置くもの」のうち、
   「記事の一覧に強弱を付ける。すべての記事を同じ見た目で並べない」
   「右の欄に、本文と同じ内容を繰り返さない。
     初めて来た人に向けた案内を置く」による。

   11本すべてが同じ見た目で並び、どれを読めばよいか
   分からない状態だった。
   右の欄は検索と最近の投稿だけで、
   最近の投稿の中身は本文の一覧と同じものだった。

   親テーマ cocoon-master のファイルは書き換えていない。
   ------------------------------------------------------------ */

/* 24-1 トップページの最新の1本を大きく扱う。
   分類のページには効かせない。理由は完了報告に書いた */
.home .list > .entry-card-wrap:first-child {
  border-left-width: 6px;
  padding-top: 1.4em;
  padding-bottom: 1.4em;
}

.home .list > .entry-card-wrap:first-child .entry-card-title {
  font-size: 1.5rem; /* 24px */
  line-height: 1.45;
}

.home .list > .entry-card-wrap:first-child .entry-card-snippet {
  font-size: 1rem; /* 16px */
  line-height: 1.8;
  /* 冒頭をやや長めに出す。2行までだったものを4行までにする */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 最新の1本の上に置く小さな見出し。
   色は分類の色ではなく強調色とする */
.home .list::before {
  content: "最新の記録";
  display: block;
  margin: 0 0 0.5em;
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--kyocho-iro);
}

/* ------------------------------------------------------------
   24-2 右の欄
   ------------------------------------------------------------ */
.failog-waki {
  margin: 0 0 1.8em;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.failog-waki-midashi {
  margin: 0 0 0.6em;
  padding: 0 0 0.35em;
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--moji-iro);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--keisen);
  border-radius: 0;
}

.failog-waki-setsumei {
  margin: 0 0 0.6em;
  font-size: 0.875rem; /* 14px */
  line-height: 1.85;
  color: var(--moji-iro);
}

.failog-waki-yukisaki {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.failog-waki-yukisaki a {
  color: var(--kyocho-iro);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* 分類から探す。左端に分類の色の短い線を付ける */
.failog-bunrui-list,
.failog-hajime-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.failog-bunrui-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--keisen);
}

.failog-bunrui-list li:last-child {
  border-bottom: 0;
}

.failog-bunrui-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  min-height: var(--tap);
  padding: 0 0 0 0.7em;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  color: var(--moji-iro);
  text-decoration: none;
  border-left: 3px solid var(--keisen);
}

.failog-bunrui-list a:hover {
  background: var(--jimi-haikei);
}

.failog-bunrui-kazu {
  font-size: 0.8125rem; /* 13px */
  color: rgba(28, 28, 28, 0.55);
}

.failog-bunrui-3 a { border-left-color: var(--bunrui-seisaku); }
.failog-bunrui-4 a { border-left-color: var(--bunrui-jitsumu); }
.failog-bunrui-5 a { border-left-color: var(--bunrui-shiji); }
.failog-bunrui-6 a { border-left-color: var(--bunrui-hiyo); }

.failog-bunrui-3 .failog-bunrui-na { color: var(--bunrui-seisaku); }
.failog-bunrui-4 .failog-bunrui-na { color: var(--bunrui-jitsumu); }
.failog-bunrui-5 .failog-bunrui-na { color: var(--bunrui-shiji); }
.failog-bunrui-6 .failog-bunrui-na { color: var(--bunrui-hiyo); }

/* はじめて来た方へ */
.failog-hajime-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--keisen);
}

.failog-hajime-list li:last-child {
  border-bottom: 0;
}

.failog-hajime-list a {
  display: block;
  min-height: var(--tap);
  padding: 0.7em 0;
  text-decoration: none;
}

.failog-hajime-daimei {
  display: block;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  line-height: 1.5;
  color: var(--moji-iro);
}

.failog-hajime-hitokoto {
  display: block;
  margin-top: 0.25em;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.6;
  color: rgba(28, 28, 28, 0.55);
}

.failog-hajime-list a:hover .failog-hajime-daimei {
  color: var(--kyocho-iro);
}

/* 24-3 右の欄の見出しに、親テーマの地色が残っていた。
   親テーマは右の欄の h2 に #f5f6f7 を当てており、
   こちらの指定より詳細度が高い。
   測って見つけたため、色の指定に限って優先させる。
   3色の外の色を1つ増やさないためである */
.failog-waki .failog-waki-midashi,
#sidebar .failog-waki-midashi,
.sidebar .failog-waki-midashi {
  background: none !important;
  background-color: transparent !important;
  color: var(--moji-iro) !important;
}

/* ============================================================
   25 前後の記事への案内

   記事のページの下にある「前の記事」「次の記事」の案内から
   画像を外し、文字だけの案内にする。

   要件定義書 第7章は、画像を一覧にも記事のページにも出さず、
   他所で共有されたときにだけ使うと定めている。
   この箇所はその想定から漏れていた。依頼書 A01-50 による。

   一覧のときと違い、この入れ物の中は画像だけである。
   分類の札のように重ねられたものは無い。
   そのため入れ物ごと出さない。
   中身の無い枠を残さないという共通規程 第9章の考え方による。
   ============================================================ */

.pager-post-navi .prev-post-thumb,
.pager-post-navi .next-post-thumb,
.pager-post-navi .prev-post-thumb .no-image,
.pager-post-navi .next-post-thumb .no-image {
  display: none;
}