/* =====================================================================
   トップページだけ：幅600pxの1列レイアウト（試作・V15）
   - ヘッダー・本文・フッターを幅600pxにして、画面の中央に置く（V14と同じ960pxも試したが、文字が長くなるので600pxに戻した）
   - 右メニューは、スマホと同じように本文の下に並べる
   - スライダーはやめて、一覧の各記事の上にアイキャッチ画像を出す
   - 640px未満の画面は、もともと1列なので何もしない
   - functions.php でトップのときだけ読み込む。やめるときは、このファイルの読み込みを外す
   ===================================================================== */

@media (min-width: 640px) {

  /* 幅600pxで中央に */
  .page-header,
  .container03,
  .footer {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* 2列（一覧75%＋右メニュー20%）をやめて、縦に並べる */
  .container03--front .container03-1,
  .container03--front .container03-2 {
    float: none;
    width: auto;
    padding-right: 0;
  }
  .container03--front .container03-2 {
    display: block;          /* main.css の右寄せ（grid）を解除 */
    margin-top: 40px;        /* 一覧と右メニューの間 */
  }
}

/* ---- 一覧のアイキャッチ画像（タイトル・日付・カテゴリの下・列の幅いっぱい） ----
   ・写真：列の幅いっぱい × 前のスライダーと同じ高さ（600px幅なら 600×390）
   ・元の写真は 4:3（600×450）なので、上下を合わせて約13%切り抜く（位置は真ん中）
   ・画面が狭いときも同じ比率（600:390）で縮む
   ※ 試して見送った形（地色＝マットを敷く）
     ・daokailin.com 風：地 2.07:1（600×290）の真ん中に写真を小さく置く（293×220／16:9で391×220）
     ・縁だけ残す：a に padding:20px; background:地色 → 写真 560×390・地 600×430
     ・試した地色：#eeeeee、#e6e6e6、#d3d3d3、#d6d3ce、#cbc8c3、#b0b0b0、#a0a0a0、#f0f0f0、水色 #d3e4f2、青グレー #C2D1D5 */
.postlist02-eyecatch {
  margin: 10px 0 0;          /* 上の文字（カテゴリ・タグ）との間 */
}
.postlist02-eyecatch a {
  display: block;
}
.postlist02-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 390;
  object-fit: cover;
  object-position: center;
  margin: 0;                 /* main.css の .news img（下10px）を解除 */
}

/* ---- 一覧の文字（テスト中） ----
   1行目：タイトル（カテゴリ 13.2px より少し大きい 14px）
   2行目：DATE・カテゴリ・タグを1行に（大きさはカテゴリと同じ。書式は main.css の .categories） */
.postlist02-meta {
  display: flex;
  flex-wrap: wrap;           /* 画面が狭くて入りきらないときだけ折り返す */
  gap: 0 0.6em;              /* DATE・カテゴリ・タグの間（前は1.2em） */
  margin: 0;                 /* タイトルとの間（前は4px） */
  font-weight: 400;          /* 一覧の中は細く（main.css の .categories は700。前は600） */
}
.postlist02-meta a {
  font-weight: inherit;
}
/* NEWマーク（＊）も一覧の中なので細く（main.css の .newMark は700） */
.container03--front .postlist02-title .newMark {
  font-weight: 400;
}
.container03--front .postlist02-title {
  font-size: 14px;           /* 前は15px */
  line-height: 1.2em;        /* タイトルとDATE行の間を詰める（前は1.4em） */
}

/* ---- 記事と記事の間（前の記事の写真の下 〜 次の記事のタイトル）を 40px に ----
   main.css の .postlist02 は 上の外余白10px・内余白10px・下の外余白15px
   → 外余白は大きいほうだけ効くので、元は 15＋10＝25px。下の外余白を30pxにして 30＋10＝40px（80px も試した） */
.container03--front .postlist02 {
  margin-bottom: 30px;
}

/* ---- 目印の線（印刷の「トンボ」風・1px × 20px・薄いグレー） ----
   ・各記事を対角の2本ではさむ：「記事の始まり」＝タイトルの左／「記事の終わり」＝写真の右下
   ・ページ全体も対角に縦線：一番上の右／一番下の左（列の端の位置）
   ・線は記事とページの端だけ（ロゴ・LATEST POSTS・メニューには付けない）
   ・HTMLは増やさず、疑似要素（::before / ::after）で描く
   ・長さは --trim-mark-length、間は --trim-mark-gap、色は --trim-mark-color の1か所で変える
   ※ 試して外した線：ロゴの左・LATEST POSTS の左・写真の左上・写真の右上・写真の左下・タイトルの右
   ※ 線の先に小さいドット（3px）も試したが、矢印・引き出し線・箇条書きの点に見えるのでやめた（線だけのほうがミニマル） */
:root {
  --trim-mark-length: 20px;    /* 線の長さ */
  --trim-mark-gap: 10px;       /* 列と線の間（記事の線） */
  --trim-mark-color: #bcbcbc;  /* 線の色（サイトのグレー。HIDE ADS やホバーと同じ） */
}

/* ---- 記事の線（列の外側。左右に余白がない 720px 未満の画面では出さない） ---- */
@media (min-width: 720px) {
  .container03--front .postlist02-content,
  .container03--front .postlist02-eyecatch {
    position: relative;
  }

  /* 記事の始まり：タイトルの左（文字の頭は箱の上端から約3px下） */
  .container03--front .postlist02-content::before {
    content: "";
    position: absolute;
    top: 3px;
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
  }

  /* 記事の終わり：写真の右下 */
  .container03--front .postlist02-eyecatch::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-bottom: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
}

/* ---- 一覧ページ（CATEGORIES など）の線：一覧全体を「1つの記事」として対角の2本ではさむ ----
   ・始まり：一覧の左（1行目の文字の頭の高さ）／終わり：一覧の右（最後の行の文字の下端の高さ）
   ・長さ・間・色はトップの記事の線と同じ変数 */
@media (min-width: 720px) {
  .container03--index .index-list {
    position: relative;
  }
  .container03--index .index-list::before,
  .container03--index .index-list::after {
    content: "";
    position: absolute;
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  /* 始まり：左（1行目の大文字の上端。行の高さ24px・文字12pxなので上から約8px） */
  .container03--index .index-list::before {
    top: 8px;
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
  }
  /* 終わり：右（最後の行の文字の下端＝ベースライン。下から約8px） */
  .container03--index .index-list::after {
    bottom: 8px;
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
  }
}

/* ---- 記事一覧ページ（文字だけ。category.php）の線：一覧全体の上と下だけ（記事ごとには付けない） ----
   ・始まり：1件目のタイトルの左（トップと同じ .postlist02-content::before）
   ・終わり：最後の記事の日付・カテゴリ行の右（文字の下端の高さ）
   ・トップは記事ごと、一覧ページ（CATEGORIES など・この記事一覧）は全体の上と下だけ、というルール */
@media (min-width: 720px) {
  /* 2件目以降のタイトルの線は出さない */
  .container03--archive .postlist02:not(:first-child) .postlist02-content::before {
    content: none;
  }
  /* 終わりの線は最後の記事だけ（後ろに .postlist02 がないもの） */
  .container03--archive .postlist02:not(:has(~ .postlist02)) .postlist02-content::after {
    content: "";
    position: absolute;
    bottom: 1px;               /* 日付・カテゴリ行の文字の下端（ベースラインが下から約2px・実測で調整） */
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
}

/* ---- 検索結果（search.php）の本文の抜粋 ----
   ・日付・カテゴリ行の下に、本文と同じ 12px・丸ゴシック（main.css の .postlist02-excerpt）
   ・「終わり」の線は記事一覧と同じ指定のまま、最後の記事の抜粋の最後の行の下端あたりに来る */
.container03--search .postlist02-excerpt {
  margin-top: 6px;           /* 日付・カテゴリ行との間 */
}
.container03--search .postlist02-excerpt p {
  margin: 0;
}

/* ---- 検索結果（search.php）の線：記事と同じ扱いで、1記事ごとに対角の2本 ----
   ・始まり：各記事のタイトルの左／終わり：各記事の抜粋の最後の行の右
   ・記事一覧（.container03--archive）の「全体の上と下だけ」の指定を、検索結果だけ打ち消す */
@media (min-width: 720px) {
  .container03--search.container03--archive .postlist02:not(:first-child) .postlist02-content::before {
    content: "";               /* 2件目以降もタイトルの左の線を出す */
  }
  .container03--search .postlist02 .postlist02-content::after {
    content: "";
    position: absolute;
    bottom: 1px;               /* 抜粋の最後の行の下端あたり（実測で調整） */
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
}

/* ---- 記事ページ（single.php） ----
   ・見出し（カテゴリ名_POST）〜 タイトル ＝ 40px（.news の上の余白。トップと同じ）
   ・タイトル：トップの一覧と同じ 14px（h2 の main.css の指定を打ち消す）
   ・アイキャッチ：列の幅いっぱい・縦横比そのまま。タイトル・日付行との間 10px
   ・見出しのカテゴリ名はリンク（色は文字と同じ・ホバーで分かる） */
.container03--single .list-head h1.type-46 a {
  color: inherit;
  text-decoration: none;
}
.container03--single .single-head {
  margin-top: 20px;          /* .news の上の余白 20px と足して、見出し 〜 タイトル ＝ 40px（トップと同じ） */
}
.container03--single .single-title {
  margin: 0;
  font-family: "M PLUS Rounded 1c";   /* トップの一覧のタイトルと同じ字体（記事の枠の指定を打ち消す） */
  font-weight: 400;
}
.container03--single .single-edit {
  margin-left: 0.4em;
}
.container03--single .single-eyecatch {
  margin: 10px 0 0;
}
.container03--single .single-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* ---- 記事ページのシェアのリンク（文字。single.php の .sharebtn--text） ----
   ・書式はフッターの PRIVACY POLICY と同じ：Montserrat・10.8px・700・大文字・字間 -0.05em
   ・main.css の .sharebtn（アイコン用：220%・字間 -5px）を打ち消す
   ・項目の間はヘッダーメニュー・フッターと同じ 1.2em */
/* 本文の最後 〜 NOTICES の見出し ＝ 40px
   ・本文の最後の要素（段落・写真など）の下の余白は記事によって違うので 0 にして、見出しの上の余白で空ける（実測で調整） */
.container03--single .content > :last-child {
  margin-bottom: 0;
}
.container03--single .type-D--notices {
  margin-top: 31px;          /* 本文の枠の下の余白（main.css の .news .content は下 10px）と足して 40px */
}
/* NOTICES のかたまり 〜 SHARE の見出し ＝ 40px（一覧の中の間隔と同じ。main.css の h1.type-D は上 5px・実測で調整） */
.container03--single .type-D--share {
  margin-top: 41px;
}
.container03--single .sharebtn--text {
  padding-top: 0;            /* SHARE の見出しとの間を NOTICES の見出しと本文の間と同じにする（main.css は 20px・実測で調整） */
  margin-top: -2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
}
.container03--single .sharebtn--text ul {
  display: flex;             /* 項目の間を「すき間 1.2em」だけにする（inline-block だと改行のぶんの空白が足される） */
  flex-wrap: wrap;
  gap: 0 1.2em;              /* フッターの PRIVACY POLICY と PROFILE の間と同じ */
  margin: 0;
  padding: 0;
  list-style: none;
}
.container03--single .sharebtn--text ul li {
  margin-left: 0;
  letter-spacing: -0.05em;
}
.container03--single .sharebtn--text a {
  font-family: inherit;
  text-decoration: none;
}
/* 外のサイトへのリンクなので、頭にリンクのアイコン（Font Awesome 7 の link・\f0c1。鎖の形。arrow-up-right-from-square \f08e も試した） */
.container03--single .sharebtn--text a::before {
  content: "\f0c1";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 0.35em;
  letter-spacing: 0;
}

/* ---- 記事ページの前後の記事（矢印だけ。single.php の .postnavi--arrows） ----
   ・左端に「←（前の記事）」、右端に「→（次の記事）」。ない方は出さない
   ・マウスオンで、矢印の横に記事のタイトルが出る（ふだんは透明）
   ・SHARE 〜 矢印 ＝ 40px（一覧の中の間隔と同じ・実測で調整） */
.container03--single .postnavi--arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px 0 0;          /* シェア欄の下の余白（main.css の .sharebtn は下 15px）と足して 40px */
  padding: 0;
}
.container03--single .postnavi--arrows a {
  display: flex;
  align-items: center;
  gap: 0.6em;                /* 矢印とタイトルの間 */
  max-width: 48%;            /* 左右のタイトルが重ならないように */
  color: inherit;
  text-decoration: none;
}
.container03--single .postnavi__next {
  margin-left: auto;         /* 前の記事がないときも右端に置く */
}
.container03--single .postnavi--arrows i {
  font-size: 14px;
  flex-shrink: 0;
}
.container03--single .postnavi__title {
  font-family: "M PLUS Rounded 1c";
  font-size: 12px;           /* 本文と同じ */
  white-space: nowrap;       /* 1行。長いときは「…」 */
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .3s ease;
}
.container03--single .postnavi--arrows a:hover .postnavi__title,
.container03--single .postnavi--arrows a:focus-visible .postnavi__title {
  opacity: 1;
}

/* ---- 記事ページ（single.php）の線 ----
   ・始まり：タイトルの左（トップと同じ .postlist02-content::before）
   ・写真：アイキャッチと本文の写真（ブロックエディタの画像 figure.wp-block-image）ごとに、写真の右下
   ・NOTICES・SHARE の見出しの左
     （本文中の関連記事カードの小さい写真には付けない。写真に説明文（キャプション）があるときは説明文の下） */
@media (min-width: 720px) {
  .container03--single .single-eyecatch,
  .container03--single .content figure.wp-block-image,
  .container03--single .type-D--notices,
  .container03--single .type-D--share {
    position: relative;
  }
  /* NOTICES・SHARE の見出しの左（文字の頭の高さ・実測で調整） */
  .container03--single .type-D--notices::before,
  .container03--single .type-D--share::before {
    content: "";
    position: absolute;
    top: 2px;
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  .container03--single .single-eyecatch::after,
  .container03--single .content figure.wp-block-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-bottom: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
}

/* ---- 固定ページ（PRIVACY POLICY・PROFILE。privacypolicy.php・profile.php） ----
   ・トップと同じ：見出し →（10px）→ 広告 →（40px）→ 本文。広告がないときは 見出し 〜 本文 ＝ 40px
   ・広告はこのページでは .news の先頭にあるので、トップの「ページ送りの上の広告」の指定を打ち消す（実測で調整） */
.container03--front.container03--page .news {
  padding-top: 0;            /* トップの一覧用の上の余白（20px）を打ち消す */
}
.container03--page .news > .type-x:first-child,
.container03--page .news > .googlead:first-child {
  margin: 10px 0 0;
}
.container03--page .news .content {
  padding-top: 33px;         /* 本文の最初の段落の上の余白と足して 40px */
}

/* 広告がないページ（PROFILE・CONTACT）、広告が空で隠れているとき（PRIVACY POLICY）：見出し 〜 本文の最初の行 ＝ 40px（実測で調整） */
.container03--page .news > .content:first-child,
.container03--page .news > .googlead:not(:has(*)) + .content {
  padding-top: 38px;
}

/* ---- CONTACT（page-contact.php）のフォーム（Contact Form 7） ----
   ・項目名（NAME* など）：ヘッダーのメニューと同じ書式（Montserrat・10.8px・700・大文字）
   ・入力欄：列の幅いっぱい・地色なし（ページの背景と同じ）で下線だけ（フッターの検索欄と同じ）・文字は本文と同じ 12px
   ・送信ボタン：文字だけ（ヘッダーのメニューと同じ書式）。マウスオンでグレー */
/* 編集画面の中にある見出し「BACKON69.COM」は出さない（ページの見出し CONTACT と重なるため） */
.container03--contact .content > h1.type-36 {
  display: none;
}
/* 見出し 〜 NAME* ＝ 40px（実測で調整） */
.container03--contact .news > .content:first-child {
  padding-top: 45px;
}
/* 編集画面の中にある広告の箱の上下の余白（15px）を消す（広告が出ないとき、見出し 〜 NAME* を 40px にするため） */
.container03--contact .content > .googlead {
  margin: 0;
}
.container03--contact .wpcf7 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container03--contact .wpcf7 ul + ul {
  margin-top: 16px;          /* 項目と項目の間 */
}
.container03--contact .wpcf7 li {
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
}
.container03--contact .wpcf7 li.left {
  font-family: Montserrat, sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
  margin-bottom: 6px;        /* 項目名 〜 入力欄 */
}
.container03--contact .wpcf7 input[type="text"],
.container03--contact .wpcf7 input[type="email"],
.container03--contact .wpcf7 textarea {
  box-sizing: border-box;
  width: 100%;
  height: auto;              /* main.css の高さ 16px を打ち消す（上下の padding と文字の高さで約34px） */
  padding: 8px 0;            /* 左右は 0：入力した文字の頭を項目名にそろえる */
  border: 0;
  border-bottom: 1px solid #000;   /* 下線だけ（フッターの検索欄と同じ） */
  border-radius: 0;
  background: transparent;   /* ページの背景と同じ（前は #eeeeee の地色） */
  color: #3c3c3b;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  display: block;            /* 下にできるすき間（文字のベースライン分）をなくす */
}
.container03--contact .wpcf7 textarea {
  height: 180px;
  resize: vertical;
}
.container03--contact .wpcf7 .wpcf7-submit {
  display: block;
  height: auto;              /* main.css の高さ 40px を打ち消す */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1.2em;
  color: #3c3c3b;
  font-family: Montserrat, sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}
.container03--contact .wpcf7 .wpcf7-submit:hover {
  color: #bdc3c7;            /* ヘッダーのメニューのマウスオンと同じ */
}

/* SEND EMAIL をボタンらしく：ページ送りの「1 / 13」と同じ地色の箱 ＋ 紙飛行機のアイコン
   ・箱は送信ボタン（input）そのもの。左の余白にアイコンを重ねる
   ・アイコンは CSS（ボタンを入れている li の ::before）。pointer-events: none でクリックは下のボタンに通す → 箱のどこを押しても送信される */
.container03--contact .wpcf7 li:has(> .wpcf7-submit) {
  position: relative;
  display: inline-block;
}
.container03--contact .content .wpcf7 .wpcf7-submit {
  padding: 6px 12px 6px 28px;      /* 左はアイコンの分 */
  background: #eeeeee;             /* ページ送りの「1 / 13」と同じ */
}
.container03--contact .wpcf7 li:has(> .wpcf7-submit)::before {
  content: "\f1d8";                /* 紙飛行機（Font Awesome 7 の paper-plane） */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 10.8px;
  line-height: 1;
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #3c3c3b;
  pointer-events: none;
}
/* マウスオン・送信中はアイコンも文字と一緒にグレー */
.container03--contact .wpcf7 li:has(> .wpcf7-submit):hover::before,
.container03--contact .wpcf7 form.submitting li:has(> .wpcf7-submit)::before {
  color: #bdc3c7;
}

/* ③ 送信中の目印（Contact Form 7 の「くるくる」：黒い四角の中を点が回る）
   ・出さない・場所も取らない（取ると SEND EMAIL 〜 まとめ表示の間が広がる）
   ・かわりに、送信中は SEND EMAIL の文字をグレーにする（form に .submitting が付いている間） */
.container03--contact .content .wpcf7 .wpcf7-spinner {
  display: none;
}
.container03--contact .content .wpcf7 form.submitting .wpcf7-submit {
  color: #bdc3c7;
  cursor: default;
}

/* ① 欄ごとのエラー（「必須項目に入力してください。」など）
   ・main.css は入力欄の幅が 400px だったころの指定（赤字・右端 400px の位置に浮かせる）→ 下線のすぐ下に左揃えで出す
   ・色はあえて薄いグレー（赤にしない） */
.container03--contact .content .wpcf7 .wpcf7-not-valid-tip {
  position: static;
  display: block;
  width: auto;
  margin-top: 4px;           /* 下線 〜 エラーの文字 */
  color: #bcbcbc;            /* あえて薄いグレー（トンボの線と同じ）。前は文字と同じ #3c3c3b */
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

/* ② 送信を押したあとのまとめ表示（「入力内容に問題があります」「送信しました」など）
   ・Contact Form 7 の色付きの枠・main.css の幅 400px・角丸・中央揃え をやめて、SEND EMAIL の下に文字だけ */
.container03--contact .content .wpcf7 form .wpcf7-response-output {
  width: auto;
  margin: 14px 0 0;          /* SEND EMAIL 〜 まとめ表示の文字 ＝ 16px（行の高さの分を引く・実測で調整） */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3c3c3b;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
/* エラーのとき（入力内容に問題・送信失敗など）だけ薄いグレー。送信できたとき（.sent）は文字と同じ色のまま */
.container03--contact .content .wpcf7 form.invalid .wpcf7-response-output,
.container03--contact .content .wpcf7 form.unaccepted .wpcf7-response-output,
.container03--contact .content .wpcf7 form.failed .wpcf7-response-output,
.container03--contact .content .wpcf7 form.aborted .wpcf7-response-output,
.container03--contact .content .wpcf7 form.spam .wpcf7-response-output {
  color: #bcbcbc;
}

/* PROFILE の CONTACT：ヘッダーのメニュー（main.css の .header-menu__list）と同じ書式。アイコンなし */
.container03--page .page-contact {
  font-family: Montserrat, sans-serif;
  font-size: 10.8px;         /* ヘッダーのメニューと同じ（12px の 90%） */
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}
.container03--page .page-contact a {
  color: inherit;
  text-decoration: none;
}
.container03--page .page-contact a:hover {
  color: #bdc3c7;            /* ヘッダーのメニューのマウスオンと同じ */
}

/* ---- ページ全体の縦線（列の端＝断裁位置にそろえる） ----
   ・body の真ん中 ±300px ＝ 列の左右の端（列は幅600pxで中央） */
@media (min-width: 640px) {
  body {
    position: relative;
  }
  /* ヘッダーの上の余白30px（main.css の .page-header-inner の margin-top）が body の外にはみ出して
     body の上端がページの30px下になっていたので、余白を .page-header の内側（padding）に移す。見た目は同じ */
  .page-header {
    padding-top: 30px;
  }
  .page-header .page-header-inner {
    margin-top: 0;
  }
  body::before,
  body::after {
    content: "";
    position: absolute;
    width: 0;
    height: var(--trim-mark-length);
    border-left: 1px solid var(--trim-mark-color);
    pointer-events: none;
  }
  /* 上・右：列の右端の内側1px */
  body::before {
    top: 0;
    left: calc(50% + 300px - 1px);
  }
  /* 下・左：列の左端 */
  body::after {
    bottom: 0;
    left: calc(50% - 300px);
  }
}

/* ---- ページ送り（WP-PageNavi）：枠線をなくし、ページ数（1 / 13）だけ薄いグレーの地色・今のページの上に小さいドット ----
   ・main.css／プラグインの指定：各数字に 1px の枠線（#c4c4c4）、今のページは黒地（#3c3c3b）に白文字
   ・トップだけ枠線と背景をなくして、文字だけにする
   ・今のページ（.current）は文字の色を普通に戻し、数字の真上に直径3pxのドット */
.container03--front .wp-pagenavi a,
.container03--front .wp-pagenavi span {
  border: 0;
  background: transparent;
}
/* ページ数（1 / 13）だけ薄いグレーの地色（数字・…・»・LAST にも付けてみたが、これだけのほうがすっきり） */
.container03--front .wp-pagenavi .pages {
  background: #eeeeee;
}
.container03--front .wp-pagenavi span.current {
  position: relative;
  color: #3c3c3b;
}
.container03--front .wp-pagenavi span.current::before {
  content: "";
  position: absolute;
  top: 0;                    /* 数字の上（数字の上の余白5pxの中に置く） */
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;       /* 真ん中にそろえる */
  border-radius: 50%;
  background: #3c3c3b;       /* 文字と同じ色 */
}

/* ---- ページ送りの行：左に TOTAL ○○POSTS ----
   ・front-page.php の .nav-row（div）の中に、TOTAL（.nav-total）とページ送り（.wp-pagenavi）を横に並べる
   ・TOTAL の書式はページ送りと同じ（.wp-pagenavi の span と同じ指定が効く） */
.container03--front .nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1em;                /* TOTAL とページ送りの間 */
  font-size: 12px;           /* .navigation の 80% を打ち消す。ページ送り（.wp-pagenavi 80%）が前と同じ 9.6px になる
                                （前は p の中に div が入れられず、ページ送りが .navigation の外に出ていたので 9.6px だった） */
}
.container03--front .nav-row .wp-pagenavi {
  clear: none;
  font-size: 10.8px;         /* TOTAL・ページ送りの文字の大きさ。ヘッダーのコピーライト・メニューと同じ（main.css の 90% ＝ 10.8px）
                                前は 9.6px で小さすぎた → 12px（本文と同じ）にした → 10.8px にそろえた */
}

/* TOTAL の文字の頭を、上の記事のタイトルの左端にそろえる
   ・main.css の .wp-pagenavi span の左の margin 2px ＋ padding 5px で、7px 右にずれていた */
.container03--front .nav-row .nav-total span {
  margin-left: 0;
  padding-left: 0;
}

/* ページ送りの先頭（「1 / 13」のグレーの地色）の左端を、上の記事のタイトルの左端（列の端）にそろえる
   ・TOTAL をやめて、ページ送りが行の左端に来たため。main.css の左の margin 2px を消す */
.container03--front .nav-row .wp-pagenavi:not(.nav-total) > :first-child {
  margin-left: 0;
}

/* ページ送りのマウスオン：main.css は黒地に白文字だが、地色をなくしたので文字だけグレー（#bcbcbc）にする
   （そのままだと白い文字が白い背景に消える） */
.container03--front .wp-pagenavi a:hover {
  color: #bcbcbc;
  background: transparent;
}

/* ---- 縦の余白（トップ・テスト中） ----
   記事一覧（LATEST POSTS 〜 ページ送り）をページの真ん中にかたまりで置き、その上下にヘッダー・フッターを離して置く
   ・ページの上の余白：ページの一番上 〜 ヘッダーの最初の文字 ＝ 30px（.page-header の padding-top。今まで通り）
   ・ヘッダー（メニュー）〜 LATEST POSTS ＝ 80px
   ・一覧の中：LATEST POSTS 〜 1件目・記事と記事の間・最後の写真 〜 ページ送り ＝ 40px
   ・ページ送り 〜 フッター（PRIVACY POLICY）＝ 80px
   ・ページの下の余白：フッターの最後（検索欄）〜 ページの一番下 ＝ 30px
     ※ 管理者で見ると「HIDE ADS FOR ADMIN」、一般の人には広告が LATEST POSTS と1件目の間に入るので、そのぶん広がる */

/* ヘッダー 〜 LATEST POSTS：左の列の上の余白（main.css は 90px）を調整（実測で合わせる） */
.container03--front .container03-1 {
  margin-top: 107px;         /* メニューとサブのリンクを1行にしたぶん引いた（前は 124px・実測で調整） */
}
/* トップ以外（ヘッダーにパンくずの行がある）：パンくず 〜 見出しも 80px にする
   ・ヘッダーの高さは 60px 固定で、パンくずの行（約17px）は枠からはみ出しているので、そのぶん足す */
body:has(.header-breadcrumb) .container03--front .container03-1 {
  margin-top: 124px;         /* パンくずの行のぶん足す（メニューを1行にしたので 141px → 124px・実測で調整） */
}

/* スマホ（幅639px以下）：ヘッダー 〜 見出し（LATEST POSTS など）を約半分にする
   ・スマホではヘッダーの高さが固定でなく（main.css で下に 10px の余白も付く）、上の指定のままだと約130px 空いていた → 約65px に */
@media (max-width: 639px) {
  .container03--front .container03-1 {
    margin-top: 48px;        /* MENU ボタンの下の余白（12px）のぶん引いて、MENU の文字 〜 見出し ＝ 約65px */
  }
  body:has(.header-breadcrumb) .container03--front .container03-1 {
    margin-top: 60px;        /* スマホではパンくずの行もヘッダーの高さに入るので、足さない（実測で調整） */
  }
}

/* LATEST POSTS 〜 1件目：一覧（.news）の上の余白で 40px にする（実測で調整） */
.container03--front .news {
  padding-top: 20px;
}

/* ナビ 〜 フッター：
   ・左の列（.container03-1）と全体（.container03）の下の余白 各20px をなくす
   ・フッターの上の余白（.footer-inner の margin-top 50px）を 65px に
   → ページ送りの下の余白 15px ＋ 65px ＝ 約80px */
.container03--front,
.container03--front .container03-1 {
  padding-bottom: 0;
}
.footer .footer-inner {
  margin-top: 65px;
}

/* ページの下の余白：フッターの下（.footer 100px ＋ .footer-inner 60px）を 30px だけに */
.footer {
  padding-bottom: 0;
}
.footer .footer-inner {
  display: flow-root;        /* 中の .copyright が float なので、検索欄まで含めた高さにする（ないと検索欄が下にはみ出す） */
  padding-bottom: 51px;      /* 最後の行（検索欄。PRIVACY POLICY / PROFILE はヘッダーに移動）の下 〜 ページの一番下 ＝ 60px（実測で調整） */
}

/* ---- 広告の場所（一般の人：広告／ログイン中：HIDE ADS FOR ADMIN） ----
   広告は「見出し・ナビにくっつける」：
   ① LATEST POSTS の下：LATEST POSTS →（10px）→ 広告 →（40px）→ 1件目
   ② ページ送りの上   ：最後の写真 →（40px）→ 広告 →（10px）→ ページ送り
   ・広告がないとき（ウィジェットが空）は場所ごと隠して、一覧の間隔（40px）をそのままにする */
.container03--front .googlead:not(:has(*)) {
  display: none;                   /* 中身のない広告の箱は出さない */
}
/* ① LATEST POSTS の下（.container03-1 の直下・.news の前） */
.container03--front .container03-1 > .type-x,
.container03--front .container03-1 > .googlead {
  margin: 10px 0 0;
}
/* ② ページ送りの上（.news の中・ページ送りの直前） */
.container03--front .news > .type-x,
.container03--front .news > .googlead {
  margin: 40px 0 12px;             /* 上：最後の写真まで 40px（最後の記事の下の余白 30px と重なるので 40px を指定）／下：ページ送りの文字まで 10px（実測で調整） */
}
.container03--front .news > .type-x + .nav-row,
.container03--front .news > .googlead:has(*) + .nav-row {   /* 中身のない広告の箱（隠している）のときは効かせない */
  padding-top: 0;                  /* 広告とページ送りの間は広告の下の 10px だけにする */
}

/* ---- 一覧ページ（CATEGORIES など。page-categories.php） ----
   ・見出し（CATEGORIES）〜 一覧 ＝ 40px（トップの LATEST POSTS 〜 1件目と同じ）
   ・項目：下の「カテゴリ・タグのリンク書式」（トップの日付・カテゴリ行と同じ）。大文字 */
/* 最後の行の文字 〜 フッターを 80px にする（トップのページ送り 〜 フッターと同じ・実測で調整）
   ※ 一覧の margin だとフッターの上の余白と重なって効かないので、左の列の内側（padding）で空ける */
.container03--index .container03-1 {
  padding-bottom: 10px;
}
.container03--index .index-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  line-height: 2em;          /* 12px で 1em だと行がくっつくので、行の間を空ける */
  text-transform: uppercase;
  /* 大きさ・太さ・字間は、下の「カテゴリ・タグのリンク書式」でトップの日付・カテゴリ行とそろえる */
}

/* ---- カテゴリ・タグのリンク書式（どこに出ても同じ見た目にする） ----
   ・トップの記事一覧の日付・カテゴリ・タグの行（.postlist02-meta）
   ・CATEGORIES ページの一覧（.index-list）
   → Montserrat・12px（本文と同じ）・400・字間 -0.5px
   ※ 前は トップ 13.2px・400、CATEGORIES ページ 12px・700（その前は 18px・600） */
.container03--front .postlist02-meta,
.container03--index .index-list {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.5px;
}
.container03--front .postlist02-meta a,
.container03--index .index-list a,
.container03--index .index-list .post-count {
  font-weight: inherit;      /* リンクと記事数（main.css の .post-count は600）も同じ太さに */
}

/* ---- 右メニューの一番上の「TOTAL ○○POSTS」（slider-card.css から移動） ----
   右メニューのタイトル・項目（main.css の h1.type-C / ul.type-B）と同じ書式 */
.side-total {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1em;
  margin: 5px 0 0;
}

/* 404（404.php）：ヘッダーを出さないので、見出しをページの一番上から 30px に置く（他のページのヘッダーの最初の文字と同じ位置・実測で調整） */
.container03--front.container03--404 .container03-1 {
  margin-top: 35px;
}

/* ---- 一覧のページ送り（トップ・記事一覧・検索結果。functions.php の nrocks_list_nav()） ----
   ・左右の矢印だけ（記事ページの前後の記事 .postnavi--arrows と同じ形・大きさ 14px）
   ・マウスオンで、矢印の横に「PREV 5 POSTS」「NEXT 5 POSTS」が出る（ふだんは透明）
   ・文字の書式はヘッダーのメニューと同じ（Montserrat・10.8px・700・大文字）
   ・前は WP-PageNavi（1 / 13・ページ番号・LAST） */
.container03--front .listnavi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;          /* 最後の記事 〜 矢印 ＝ 40px（.navigation の 15px から。矢印の箱が文字より大きいぶん引く・実測で調整） */
  padding-bottom: 2px;       /* 矢印 〜 フッター（検索欄）＝ 80px（同上） */
}
.container03--front .listnavi a {
  display: flex;
  align-items: center;
  gap: 0.6em;                /* 矢印と文字の間（記事ページと同じ） */
  color: inherit;
  text-decoration: none;
}
.container03--front .listnavi__next {
  margin-left: auto;         /* 前のページがない（1ページ目の）ときも右端に置く */
}
.container03--front .listnavi i {
  font-size: 14px;
}
.container03--front .listnavi__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
}
.container03--front .listnavi a:hover .listnavi__label,
.container03--front .listnavi a:focus-visible .listnavi__label {
  opacity: 1;
}