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