@charset "utf-8";
/* =====================================================================
   main.css：NROCKS のデザインの CSS（読み込み順・ほかの CSS は readme.txt の「CSS の構成」）
   - 同じ要素の同じプロパティは1か所にしか書かない。同じファイルの中では下に書いたほうが勝つ
   - 並び：
     0. 土台（書体・写真・SNS・TO HEADER・ヘッダー・フッター・検索欄・CONTACT の基本）
     1. 共通（色などの変数・600px の列・ページ全体の縦線）
     2. ヘッダー・フッター
     3. 縦の余白
     4. 一覧（トップ・記事一覧・検索結果）
     5. 一覧のページ送り
     6. 広告
     7. 一覧（CD の説明風）・トップのスライダー
     8. 記事ページ
     9. 固定ページ（PRIVACY POLICY・PROFILE・CONTACT）
    10. CATEGORIES・ARCHIVES・TAGS の一覧
    11. ITEMS
    12. 404
    13. ログイン中の広告の代わりの箱
   - トンボの線：印刷のトンボ風の目印（1px × 20px）。始まり＝左上側／終わり＝右下側。720px 未満では出さない
     長さ・間・色は「1. 共通」の変数で変える
   ===================================================================== */


/* =====================================================================
   0. 土台
   ===================================================================== */

body {
-webkit-text-size-adjust:100%;
}
a {
color:inherit;
text-decoration:none;
}
a:hover {
color:var(--ntl-c-faint);
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
font-weight:600;
}
/* NOTICES・SHARE・DISCUSSION の見出し（single.php・comments.php） */
h1.type-D {
font-family:'Montserrat', sans-serif;
letter-spacing:-1px;
line-height:1em;
}
/* NOTICES の中身（single.php） */
ul.type-J {
font-family:"M PLUS Rounded 1c";
}
/* 小見出し（POPULAR POSTS・ARCHIVES など） */
h1.type-36 {
font-family:'Montserrat', sans-serif;
font-size:24px;
font-weight:700;
letter-spacing:-1px;
line-height:0.8em;
}
/* 大見出し（LATEST POSTS・カテゴリ名など） */
h1.type-46 {
font-family:'Montserrat', sans-serif;
font-size:24px;
font-weight:700;
letter-spacing:-2px;
line-height:0.8em;
margin-left:-0.05em;
}
/* ロゴ（header.php。中身は SVG。下の「ロゴ」） */
h1.type-TTL {
font-family:'Montserrat', sans-serif;
font-size:240%;
font-weight:700;
letter-spacing:-2px;
line-height:0.8em;
margin-left:-0.1em;
}
/* 英字のラベル（MORE・HIDE ADS FOR ADMIN など） */
.type-x {
font-family:'Montserrat', sans-serif;
font-weight:700;
letter-spacing: -0.05em;
text-transform: uppercase;
}
/* ロゴの上のサイトの説明（header.php） */
h1.title {
font-family: "M PLUS Rounded 1c";
font-weight:300;
line-height:2.0em;
}
/* 新着の印（inc/postlist-disc.php・search.php） */
.newMark {
font-family:'Montserrat', sans-serif;
font-weight:700;
letter-spacing: -0.05em;
}
/* 小見出しの頭のアイコン */
.type-30 {
font-size:90%;
}
/* CATEGORIES・ARCHIVES の記事数（functions.php の remove_post_count_parentheses()） */
.post-count {
margin-left: 0.2em;
}

/* 写真（アイキャッチ・一覧のジャケット）：ふだんは彩度を落とす。マウスオンでカラーにするのは「7. 一覧」 */
.post__thumb--img {
filter: grayscale(70%) contrast(92%);/* ★ 彩度を落とす */
}

/* base.css の ins の黄色を、広告の ins では消す */
ins[style]{
background-color:transparent;
}

/* 広告の箱（トップ・一覧・固定ページは「6. 広告」で上書き） */
.googlead{
margin: 15px 0;
}

/* 記事ページの前後リンク（single.php） */
.postnavi {
font-family: "M PLUS Rounded 1c";
}
/* 日付・カテゴリ・タグの行（single.php・search.php・page-items.php） */
.categories {
line-height: 1.0em;
}

/* SHARE（single.php）。マウスオンでそれぞれの色 */
.sharebtn ul {
text-align:left;
}
.sharebtn li a {
transition: 0.5s;
}
.sharebtn ul li {
display:inline-block;
}
.twitter a:hover {color:var(--ntl-c-faint);}
.facebook a:hover {color:#3B5998;}
.line a:hover {color:#1dcd00;}
.pin a:hover {color:#cb2027;}

/* TO HEADER（footer.php の #page-top。ボールは css/loader-ball.css） */
#page-top {
bottom:90px;
position:fixed;
right:20px;
z-index:50;
}
/* 押せる範囲 44×44px。ボールは下寄せ（上はジャンプする分の空き） */
#page-top a {
display:flex;
align-items:flex-end;
justify-content:center;
width:44px;
height:44px;
}
#page-top .loader {
margin-top:0;
}
/* ふだんはボールを止め、マウスオン・フォーカスでジャンプ */
#page-top .loader::before,
#page-top .loader::after {
animation:none;
}
#page-top a:hover .loader::before,
#page-top a:focus-visible .loader::before {
animation:loader-shadow 1.1s infinite;
}
#page-top a:hover .loader::after,
#page-top a:focus-visible .loader::after {
animation:loader-jump 1.1s infinite;
}
@media (prefers-reduced-motion: reduce) {
#page-top a:hover .loader::before,
#page-top a:hover .loader::after,
#page-top a:focus-visible .loader::before,
#page-top a:focus-visible .loader::after {
animation:none;
}
}

/* フッター（footer.php）のコピーライトの箱。中の行は下の .header-copyright・.header-sublinks と「2.」 */
.copyright{
float: left;
font-family: 'Montserrat', sans-serif;
font-size: 90%;
font-weight: 700;
line-height: 1.2em;
text-transform: uppercase;
}
.copyright a:hover{
color: var(--ntl-c-faint);
}

/* 検索欄（footer.php・404.php）。虫眼鏡は Font Awesome の solid の文字 */
.searchform{
margin-top: 10px;
margin-bottom: 10px;
}
.search_container{
box-sizing: border-box;
}
.search_container input[type="text"]{
border: none;
border-bottom: 1px solid var(--ntl-c-text);
padding: 0px 0px;
background-color: var(--ntl-bg);
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"]{
cursor: pointer;
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 1.3em;
border: none;
background: none;
color: var(--ntl-c-text);
outline : none;
vertical-align: middle;
}
input:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--ntl-bg) inset;
}

/* 左右の余白（640px 以上は「1. 共通」で 600px の列に） */
.container03,
.page-header,
.footer {
padding-left: 20px;
padding-right: 20px;
}

/* 本文（記事・固定ページ） */
.news .content{
font-family: "M PLUS Rounded 1c";
padding-bottom: 10px;
}
.content p{
margin-top: 5px;
margin-bottom: 15px;
}
/* 本文の段落と箇条書きだけ少し薄く（--ntl-c-body）。カード・中タイトル・写真はそのまま */
.news .content > p,
.news .content > ul li,
.news .content > ol li {
  color: var(--ntl-c-body);
}
.news img{
margin-bottom: 10px;
max-width: 100%;
vertical-align: bottom;
}

/* ページ送り（functions.php の nrocks_list_nav()・popularposts01.php） */
.navigation{
clear: both;
line-height: 20px;
padding: 15px 0;
}
.wp-pagenavi{
font-family:'Montserrat', sans-serif;
}
.wp-pagenavi span {
white-space: nowrap;
transition: 0.2s ease-in-out;
text-align: center;
}

/* CONTACT（Contact Form 7）の基本。CONTACT のページの形は「9. 固定ページ」 */
.wpcf7{
width: 100%;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}
.wpcf7 form p {
text-transform: uppercase;
color: var(--ntl-c-body);
}
.wpcf7 form input[type="email"]{
vertical-align: text-bottom;
}
.wpcf7 form input[type="submit"]{
transition: background-color 0.2s linear;
}
.wpcf7 form input[type="submit"]:hover{
color: var(--ntl-c-faint);
}

/* 一覧の1件（トップ・記事一覧・検索結果・ITEMS） */
.postlist02 {
font-family: "M PLUS Rounded 1c";
word-wrap:break-word;
max-width:100%;
margin-top: 10px;
padding-top: 10px;
}
.postlist02-content {
line-height:120%;
}
.postlist02-excerpt {
line-height: 1.5em;
}
.postlist02 .clear {
clear: both;
}

/* ヘッダー（header.php） */
@media (max-width: 767px) {
.page-header-inner{
margin-top: 30px;
padding-bottom: 10px;
}
}
@media (min-width: 768px) {
.container03:after{
clear: both;
content: "";
display: block;
}
.container03-1{
box-sizing: border-box;
}
}
@media (min-width: 960px) {
.page-header-inner{
height: 60px;
}
}

/* 大見出し＋小見出しを1行に（例：GOODS_CATEGORIES。カテゴリ・タグ・年別・記事・検索のページ）
   ・大見出しを float で左に、小見出しをその右に。間はアンダーバー。小見出しのアイコンは隠す */
h1.type-46:has(+ h1.type-36) {
float: left;
}
h1.type-46 + h1.type-36 {
display: flow-root;
}
h1.type-46 + h1.type-36::before {
content: "_";
}
h1.type-46 + h1.type-36 i {
display: none;
}

/* Font Awesome 7 のアイコンの幅を、形に合わせた幅に（7 の標準は全部 1.25em） */
:root {
--fa-width: auto;
}

/* フッターのコピーライトの行（footer.php の .header-copyright.footer-copyright）。.copyright より細く */
.header-copyright {
  font-weight: 400;
}
/* コピーライトの横のテーマ名（Current Theme:○○） */
.header-copyright__theme {
  margin-left: 1.2em;
}

/* ヘッダーのメニュー（header.php の .header-menu__list）：Montserrat・10.8px・700・大文字。項目の間はすき間だけ */
.header-menu__list {
  display: flex;
  flex-wrap: wrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 90%;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: uppercase;
  gap: 0 1.2em;
}
.header-menu__list a:hover {
  color: var(--ntl-c-faint);
}

/* パンくずリスト（header.php の .header-breadcrumb。Breadcrumb NavXT）：10.8px・大文字 */
.header-breadcrumb {
  font-family: 'Montserrat', sans-serif;
  font-size: 90%;
  line-height: 1.2em;
  text-transform: uppercase;
  margin: 4px 0 0;
}
.header-breadcrumb a:hover {
  color: var(--ntl-c-faint);
}
/* パンくずの最初（ホーム）は家のアイコン（Font Awesome の house）。サイト名の文字は見えない形で残す */
.header-breadcrumb a.home {
  position: relative;
}
.header-breadcrumb a.home > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.header-breadcrumb a.home::before {
  content: "\f015";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
}

/* フッターの PRIVACY POLICY・PROFILE（footer.php の .header-sublinks.footer-sublinks）。項目の間はメニューと同じ 1.2em */
.header-sublinks a + a {
  margin-left: 1.2em;
}
.header-sublinks a:hover {
  color: var(--ntl-c-faint);
}

/* スマホ（639px以下）：テーマ名を2行目に */
@media (max-width: 639px) {
  .header-copyright__theme {
    display: block;
    margin-left: 0;
  }
}

/* スマホの折りたたみメニュー（header.php の .header-menu-toggle・.header-nav。開け閉めは header.php の JS が .is-open を付ける）
   ・639px以下：「MENU」だけ出し、押すと縦に開く（max-height 0 ⇔ 260px）。項目を増やすときは 260px も増やす
   ・閉じているときは visibility: hidden（見えないリンクにタブキーで移動しない） */
.header-menu-toggle {
  display: none;
}
@media (max-width: 639px) {
  .header-menu-toggle {
    display: block;
    margin: -2px 0 0;
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: 'Montserrat', sans-serif;
    font-size: 10.8px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .header-menu-toggle:hover {
    color: var(--ntl-c-faint);
  }
  .header-nav {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.4s ease, visibility 0s linear 0.4s;
  }
  .header-nav.is-open {
    max-height: 260px;
    visibility: visible;
    transition: max-height 0.4s ease, visibility 0s;
  }
  .header-nav .header-menu__list {
    display: block;
  }
  .header-nav .header-menu__list a {
    display: block;
    padding: 11px 0;
  }
}
/* PC（640px以上）：メニューを1行に */
@media (min-width: 640px) {
  .header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.2em;
    margin-top: 12px;
  }
}

/* ITEMS（page-items.php）のショップのリンクの頭に鎖のアイコン。ITEM のカードの分は css/item.css */
.items-shops a::before {
  content: "\f0c1";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 0.2em;
}

/* スクロールバーの場所をいつも空けておく（スクロールバーの有無でロゴの位置がずれないように） */
html {
  scrollbar-gutter: stable;
}

/* ロゴ（header.php の h1.type-TTL。img/logo-nothing-to-lose.svg を中に書き出す）
   ・SVG の大きさは h1.type-TTL の font-size に合わせて伸び縮み。縦の位置は文字のときと同じ
   ・サイト名の文字（.type-TTL__text）は見えない形で残す */
.type-TTL__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.type-TTL__logo {
  display: inline-block;
  vertical-align: -0.0415em;
}


/* =====================================================================
   1. 共通
   ===================================================================== */

/* ★ サイトの色：文字の色（--ntl-ink）1色の濃淡と、地の色だけ
   ・濃淡は rgba(var(--ntl-ink), 濃さ)。数字を下げるほど薄い
   ・css/item.css・itembox.css・title.css は編集画面でも読むので、var(--ntl-c-faint, #c2c2c2) のように変数が無いときの色も書いてある
   ・ほかの色：ローダー、SNS のマウスオン、スライダーのカラーバー、写真の上の白い面 */
:root {
  --ntl-ink: 75, 75, 75;                       /* ★ 文字の色 #4b4b4b を R, G, B で */
  --ntl-c-text:  rgb(var(--ntl-ink));          /* 100%：見出し・ふつうの文字・入力欄の下線 */
  --ntl-c-body:  rgba(var(--ntl-ink), .8);     /*  80%：記事本文の日本語 */
  --ntl-c-sub:   rgba(var(--ntl-ink), .6);     /*  60%：薄い地の上の文字 */
  --ntl-c-faint: rgba(var(--ntl-ink), .33);    /*  33%：マウスオン・アイコン・罫線・トンボ */
  --ntl-c-fill:  rgba(var(--ntl-ink), .07);    /*   7%：薄い塗り（ボタンの箱・写真が出るまでの四角） */
  --ntl-bg: #fcfcfc;                           /* 地の色（body・入力欄・ローダー） */

  /* トンボの線 */
  --trim-mark-length: 20px;    /* 線の長さ */
  --trim-mark-gap: 10px;       /* 列と線の間 */
  --trim-mark-color: var(--ntl-c-faint);
}

/* 600px の列を画面の中央に（640px 未満は1列） */
@media (min-width: 640px) {
  .page-header,
  .container03,
  .footer {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ページ全体の縦線：上は列の右端・下は列の左端 */
@media (min-width: 640px) {
  body {
    position: relative;
  }
  /* ヘッダーの上の余白 30px は内側に（margin だと上の線の位置がずれる） */
  .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;
  }
  body::before {               /* 上・右：列の右端の内側1px */
    top: 0;
    left: calc(50% + 300px - 1px);
  }
  body::after {                /* 下・左：列の左端 */
    bottom: 0;
    left: calc(50% - 300px);
  }
}


/* =====================================================================
   2. ヘッダー・フッター
   ===================================================================== */

/* フッター：検索欄 →20px→ PRIVACY POLICY・PROFILE →4px→ コピーライト（どちらも 10.8px） */
.footer .footer-sublinks {
  float: none;
  clear: both;
  margin: 20px 0 0;
  text-align: left;
  font-size: 10.8px;
}
.footer .footer-copyright {
  float: none;
  clear: both;
  margin: 4px 0 0;
  text-align: left;
  font-size: 10.8px;
}

/* ページ全体をはさむトンボの線：始まり＝ロゴの左／終わり＝コピーライトの右 */
@media (min-width: 720px) {
  .page-header h1.type-TTL {
    position: relative;
  }
  .page-header h1.type-TTL::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;
  }
  .footer .copyright {
    width: 100%;               /* 右端を列の右端にそろえる（.copyright は float） */
  }
  .footer .footer-copyright {
    position: relative;
  }
  .footer .footer-copyright::after {
    content: "";
    position: absolute;
    bottom: 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;
  }
}


/* =====================================================================
   3. 縦の余白（数字は実測で合わせたもの）
   ・ヘッダー 〜 見出し ＝ 80px／見出し 〜 一覧の1件目・記事と記事の間 ＝ 40px
   ・ページ送り 〜 フッター ＝ 約80px／フッターの最後 〜 ページの一番下 ＝ 60px
   ===================================================================== */

.container03--front .container03-1 {
  margin-top: 93px;
}
/* パンくずの行があるページ（トップ以外）は、その行のぶん足す */
body:has(.header-breadcrumb) .container03--front .container03-1 {
  margin-top: 109px;
}
/* スマホ（639px以下）：MENU 〜 見出し ＝ 約65px */
@media (max-width: 639px) {
  .container03--front .container03-1 {
    margin-top: 48px;
  }
  body:has(.header-breadcrumb) .container03--front .container03-1 {
    margin-top: 60px;
  }
}

/* 見出し 〜 一覧の1件目 */
.container03--front .news {
  padding-top: 20px;
}

/* 一覧の下 〜 フッター（.copyright が float なので flow-root で高さに含める） */
.footer .footer-inner {
  margin-top: 65px;
  display: flow-root;
  padding-bottom: 51px;
}


/* =====================================================================
   4. 一覧（トップ・記事一覧・検索結果。.postlist02）
   1行目：タイトル（14px）／2行目：日付・カテゴリ・タグ（.postlist02-meta）
   ===================================================================== */

.container03--front .postlist02-title {
  font-size: 14px;
  line-height: 1.2em;
}
.container03--front .postlist02-title .newMark {
  font-weight: 400;
}
.postlist02-meta {
  display: flex;
  flex-wrap: wrap;             /* 入りきらないときだけ折り返す */
  gap: 0 0.6em;
}

/* 記事と記事の間（写真付きの一覧 .postlist02--disc は「7.」） */
.container03--front .postlist02 {
  margin-bottom: 30px;
}

/* 日付の行と CATEGORIES などの一覧：Montserrat・12px・400・字間 -0.5px */
.container03--front .postlist02-meta,
.container03--index .index-list {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  letter-spacing: -0.5px;
}

/* 人気の星（.rank-stars。プラグイン Backon GA4 Ranking）。Montserrat に ★☆ が無いので標準のフォント */
.postlist02-meta .rank-stars {
  font-family: sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ntl-c-text);
  white-space: nowrap;
  cursor: default;
}

/* 検索結果の抜粋（search.php） */
.container03--search .postlist02-excerpt {
  margin-top: 6px;
}

/* 一覧のトンボの線
   ・トップ：記事ごとにタイトルの左
   ・記事一覧（.container03--archive）：一覧全体の上と下だけ
   ・検索結果：記事ごとにタイトルの左と抜粋の右下 */
@media (min-width: 720px) {
  .container03--front .postlist02-content {
    position: relative;
  }
  .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--archive .postlist02:not(:first-child) .postlist02-content::before {
    content: none;
  }
  .container03--archive .postlist02:not(:has(~ .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;
  }
  .container03--search.container03--archive .postlist02:not(:first-child) .postlist02-content::before {
    content: "";
  }
  .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;
  }
}


/* =====================================================================
   5. 一覧のページ送り（functions.php の nrocks_list_nav()。.nav-row .listnavi）
   ・左右の矢印だけ。マウスオンで矢印の横に「PREV 10 POSTS」「NEXT 10 POSTS」
   ・ページがない側も矢印は出す（.listnavi__none・押せない）。マウスオンで NO NEWER POSTS／NO OLDER POSTS
   ・.nav-row は POPULAR POSTS の WEEKLY AGGREGATION の行（.wp-pagenavi .nav-total）でも使う
   ===================================================================== */

.container03--front .nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1em;
  font-size: 12px;
}
.container03--front .nav-row .wp-pagenavi {
  clear: none;
  font-size: 10.8px;
}

.container03--front .listnavi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;            /* 最後の記事 〜 矢印 ＝ 40px */
  padding-bottom: 2px;
}
.container03--front .listnavi a,
.container03--front .listnavi__none {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.container03--front .listnavi__none {
  cursor: default;
}
.container03--front .listnavi__next {
  margin-left: auto;
}
.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__none:hover .listnavi__label,
.container03--front .listnavi a:hover .listnavi__label,
.container03--front .listnavi a:focus-visible .listnavi__label {
  opacity: 1;
}


/* =====================================================================
   6. 広告（一般の人：.googlead／ログイン中：.type-x の HIDE ADS FOR ADMIN＝箱は「13.」）
   ・中身のない広告の箱は出さない
   ・① 見出し・スライダーの下（.container03-1 の直下）／② ナビの下（.news の中の最後）
   ・広告が入ったとき（AdSense が ins に付ける data-ad-status が unfilled 以外。filled・unfill-optimized）だけ上下をそろえる
   ・記事ページはアイキャッチの下 25px
   ===================================================================== */

.container03--front .googlead:not(:has(*)) {
  display: none;
}
/* ① 見出し・スライダーの下 */
.container03--front .container03-1 > .type-x,
.container03--front .container03-1 > .googlead {
  margin: 10px 0 0;
}
/* ② ナビの下 */
.container03--front .news > .type-x,
.container03--front .news > .googlead {
  margin: 40px 0 12px;
}

/* 広告が入ったとき：見出し →25px→ 広告 →40px→ 一覧の1件目 */
.container03--front .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) {
  margin-top: 25px;
  margin-bottom: 15px;         /* ② ナビの下の広告 → フッター */
}
.container03--front .container03-1 > .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) {
  margin-bottom: 40px;         /* ① 見出しの下の広告 →40px→ 一覧の1件目 */
}
.container03--front .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) + .news {
  padding-top: 0;
}
.container03--front .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) + .news > .postlist02:first-child {
  margin-top: 0;
}
/* 記事ページ：アイキャッチ →25px→ 広告 */
.container03--single .single-eyecatch + .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) {
  margin-top: 25px;
}


/* =====================================================================
   7. 一覧（CD の説明風。inc/postlist-disc.php の .postlist02--disc。トップ・記事一覧・POPULAR POSTS）
   ・左：ジャケット（アイキャッチを正方形に。PC 160px／479px以下 100px）。マウスオンで写真がカラーに
   ・右：タイトル → クレジット（RELEASE : 2021.11.4 の形。見出し 700・中身 400）
   ===================================================================== */

.container03--disc {
  --disc-jacket: 160px;        /* ジャケットの一辺 */
  --disc-gap: 24px;            /* ジャケット 〜 文字 */
}
@media (max-width: 479px) {
  .container03--disc {
    --disc-jacket: 100px;
    --disc-gap: 16px;
  }
}

/* 1件：横並び。記事と記事の間 ＝ 44px */
.container03--disc .postlist02--disc {
  display: flex;
  align-items: flex-start;
  gap: var(--disc-gap);
  margin: 0 0 44px;
  padding: 0;
}
.container03--disc .postlist02--disc:last-of-type {
  margin-bottom: 40px;
}

/* ジャケット */
.container03--disc .postlist02-jacket {
  flex: 0 0 auto;
  display: block;
  width: var(--disc-jacket);
  height: var(--disc-jacket);
  position: relative;
  overflow: hidden;
}
.container03--disc .postlist02-jacket__img {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--ntl-c-fill);
}
.container03--disc .postlist02-jacket__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;                   /* .news img の下 10px を消す */
}
/* ジャケットの上に重ねる面：::after（濃い面）と .postlist02-jacket__preview（白い面）。ふだんは右に畳んで見えない
   ・小さいジャケットでは出さない。トップのスライダー（下の「大きい1件」）がこの面を動かす */
.container03--disc .postlist02-jacket::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ntl-c-text);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}
.container03--disc .postlist02-jacket__preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .86);   /* 写真がうっすら見える白 */
  color: var(--ntl-c-text);
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .4s cubic-bezier(.65, 0, .35, 1);
  pointer-events: none;
}
@media (hover: none) {
  .container03--disc .postlist02-jacket__preview,
  .container03--disc .postlist02-jacket::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .container03--disc .postlist02-jacket__preview,
  .container03--disc .postlist02-jacket::after {
    transition: none !important;
    animation: none !important;
  }
}

/* 1件のどこにマウスを乗せても写真をカラーに */
.container03--disc .postlist02--disc:hover .post__thumb--img {
  filter: none;
  transition: 1.5s;
}

/* 右側の文字 */
.container03--disc .postlist02--disc .postlist02-content {
  flex: 1 1 auto;
  min-width: 0;                /* 長い英単語・URL で横にはみ出さないように */
}
.container03--disc .postlist02-title {
  margin: -3px 0 8px;          /* 上：タイトルの文字の頭をジャケットの上端にそろえる */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
@media (max-width: 479px) {
  .container03--disc .postlist02-title {
    margin-bottom: 6px;
  }
}

/* クレジット：Montserrat・10.8px。左に縦の線（色はトンボの線と同じ） */
.container03--disc .postlist02-credits {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  padding-left: 10px;          /* 縦の線 〜 文字 */
  border-left: 1px solid var(--trim-mark-color);
}
/* 1行に「見出し : 中身」。見出し（dt）700・中身（dd）400 */
.container03--disc .postlist02-credits dt,
.container03--disc .postlist02-credits dd {
  display: inline;
  margin: 0;
}
.container03--disc .postlist02-credits dt::after {
  content: " : ";
  white-space: pre;
}
.container03--disc .postlist02-credits dd {
  font-weight: 400;
}
.container03--disc .postlist02-credits dd a {
  font-weight: inherit;
  margin-right: 0.6em;
}
.container03--disc .postlist02-credits dd a:last-child {
  margin-right: 0;
}
.container03--disc .postlist02-credits .rank-stars {
  font-family: sans-serif;     /* Montserrat に ★☆ が無いので標準のフォント */
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ntl-c-text);
  cursor: default;
}
/* スマホ：TAGS は省略（星の行は残す） */
@media (max-width: 479px) {
  .container03--disc .postlist02-credits > .postlist02-credits__tags {
    display: none;
  }
}

/* 大きい1件（トップの1ページ目のスライダー。front-page.php・js/feature-auto.js）
   ・写真は列の幅いっぱい（4:3）。左下にラベル（CHART 1／PICK UP）
   ・マウスオン・自動スライド：黒 → カラーバー → 白いカードにタイトル・クレジット
   ・マウスのない端末で JS が動かないとき：写真の下にタイトル・クレジット */
.container03--disc .postlist02--feature {
  position: relative;
  display: block;
  margin-bottom: 56px;
}
.container03--disc .postlist02--feature .postlist02-jacket {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.container03--disc .postlist02--feature .postlist02-title {
  margin: 0 0 8px;
}
/* 大きい1件の下の広告（front-page.php の .nrocks-ad-mid）：写真の下 →28px→ 広告 →44px→ 2件目
   ・広告が空で隠れたときは 56px のまま。「6.」の広告が入ったときの指定より強くしてある */
.container03--front .news > .nrocks-ad-mid,
.container03--front .news > .googlead.nrocks-ad-mid:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) {
  margin: -28px 0 44px;
}

/* 大きい1件の動きの数字（マウスオンと自動スライドの共通）
   ・入る：写真 → 黒 → カラーバー → カード／戻る：カード → カラーバー → 黒 → 写真
   ・時間を変えたら js/feature-auto.js の LEAVE も合わせる */
.container03--disc .postlist02--feature {
  --feature-bars-wipe: .25s;        /* ★ カラーバーが写真を覆う時間・抜ける時間 */
  --feature-bars-hold: .02s;        /* ★ 全面カラーバーで止める時間 */
  --feature-card: .3s;              /* ★ カード（白い面＋文字）が滑る時間 */
  --feature-flash: .2s;            /* ★ 黒い画面が覆う・抜ける時間 */
  --feature-flash-gap: .1s;        /* ★ 黒からカラーバーが遅れる時間（大きいほど黒い帯が太い） */
  --feature-flash-color: var(--ntl-c-text);   /* ★ 黒い画面の色 */
  --feature-bars-delay: var(--feature-flash-gap);   /* 入るときにカラーバーが動き出すまで（自動） */
  --feature-card-delay: calc(var(--feature-flash-gap) + var(--feature-bars-wipe) + var(--feature-bars-hold));   /* 入るときにカードが動き出すまで（自動） */
  --feature-out-bars: calc(var(--feature-card) + var(--feature-bars-hold));   /* 戻るときにカラーバーが抜け始めるまで（自動） */
  --feature-ease-wipe: cubic-bezier(.45, 0, .25, 1);   /* ★ カラーバーの速さの変化 */
  --feature-ease-card: cubic-bezier(.45, 0, .25, 1);   /* ★ カードの速さの変化 */
  --feature-photo: .6s;             /* ★ 次の写真が左から滑って重なる時間（js/feature-auto.js も読む） */
  --feature-ease-photo: cubic-bezier(.16, 1, .3, 1);   /* ★ 次の写真の速さの変化 */
  --feature-black: #a61a3a;         /* ★ カラーバーの代わりに1色の面にするときの色 */
  /* ★ カラーバー（くすませた SMPTE の7色）。1色にするなら .postlist02-jacket::after の background を var(--feature-black) に */
  --feature-bars: linear-gradient(to right,
    #bfbfbf 0 14.29%,              /* 左端の灰 */
    #c9b86a 14.29% 28.57%,
    #7fa8ac 28.57% 42.86%,
    #86a37a 42.86% 57.14%,
    #8a5578 57.14% 71.43%,
    #9e4a45 71.43% 85.71%,
    #3f4f7a 85.71% 100%);
  --feature-white: rgba(255, 255, 255, .86);  /* ★ カードの白 */
}

@media (hover: hover) {
  /* カード＝白い面（.postlist02-jacket__preview）＋文字（.postlist02-content の中身）。同じ距離・時間で横に動かして1枚に見せる
     ・動かす距離は写真の幅（100cqw）。文字の箱は写真と同じ位置・大きさ */
  .container03--disc .postlist02--feature .postlist02-jacket {
    container-type: inline-size;
  }
  .container03--disc .postlist02--feature .postlist02-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 4 / 3;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 0;                 /* 左右の余白は中の文字に付ける（箱に付けると動く距離が短くなる） */
    box-sizing: border-box;
    overflow: hidden;
    container-type: inline-size;
    pointer-events: none;            /* クリックは下の写真のリンクへ */
  }
  /* カードの中の文字：ふだんは写真の右の外 */
  .container03--disc .postlist02--feature .postlist02-content > * {
    margin-left: 20px;
    margin-right: 20px;
    transform: translateX(100cqw);
    transition: transform var(--feature-card) var(--feature-ease-card);
  }
  /* 黒い画面（::before）。カラーバー（::after）の下 */
  .container03--disc .postlist02--feature .postlist02-jacket::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--feature-flash-color);
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
  }
  /* カラーバー（::after） */
  .container03--disc .postlist02--feature .postlist02-jacket::after {
    background: var(--feature-bars);
  }
  .container03--disc .postlist02--feature .postlist02-jacket__preview {
    background: var(--feature-white);
    clip-path: none;
    transform: translateX(100cqw);   /* ふだんは写真の右の外 */
    transition: transform var(--feature-card) var(--feature-ease-card);   /* 戻るとき */
  }

  /* 入るとき（マウスオン :hover・自動スライド .is-auto）。:hover は1件全体で見る（文字が写真に重なっているため） */
  .container03--disc .postlist02--feature:hover .postlist02-jacket::before,
  .container03--disc .postlist02--feature.is-auto .postlist02-jacket::before {
    animation:
      nrocks-flash-in   var(--feature-flash) var(--feature-ease-wipe) forwards,
      nrocks-flash-hide .01s linear calc(var(--feature-flash-gap) + var(--feature-bars-wipe)) forwards;
  }
  .container03--disc .postlist02--feature:hover .postlist02-jacket::after,
  .container03--disc .postlist02--feature.is-auto .postlist02-jacket::after {
    animation:
      nrocks-bars-in   var(--feature-bars-wipe) var(--feature-ease-wipe) var(--feature-bars-delay) both,
      nrocks-bars-push var(--feature-card) var(--feature-ease-card) var(--feature-card-delay) forwards;
  }
  /* カード：カラーバーのあとに左から入る */
  .container03--disc .postlist02--feature:hover .postlist02-jacket__preview,
  .container03--disc .postlist02--feature.is-auto .postlist02-jacket__preview,
  .container03--disc .postlist02--feature:hover .postlist02-content > *,
  .container03--disc .postlist02--feature.is-auto .postlist02-content > * {
    transform: translateX(0);
    animation: nrocks-card-in var(--feature-card) var(--feature-ease-card) var(--feature-card-delay) backwards;
  }
  /* カードが出ている間は、文字のリンクだけ押せる（ほかの所は写真のリンク） */
  .container03--disc .postlist02--feature:hover .postlist02-content a,
  .container03--disc .postlist02--feature.is-auto .postlist02-content a {
    pointer-events: auto;
  }
  /* 自動スライドのときも写真をカラーに */
  .container03--disc .postlist02--feature.is-auto .post__thumb--img {
    filter: none;
    transition: 1.5s;
  }

  /* 戻るとき（js/feature-auto.js が .is-leaving を付ける）。入るときと @keyframes の名前を分けている（同じ名前だと動きが始まり直さない） */
  .container03--disc .postlist02--feature.is-leaving:not(:hover):not(.is-auto) .postlist02-jacket::after {
    animation:
      nrocks-bars-follow var(--feature-card) var(--feature-ease-card) forwards,
      nrocks-bars-out    var(--feature-bars-wipe) var(--feature-ease-wipe) var(--feature-out-bars) forwards;
  }
  /* 戻るときの黒い画面：カラーバーの後ろを追って右へ抜ける */
  .container03--disc .postlist02--feature.is-leaving:not(:hover):not(.is-auto) .postlist02-jacket::before {
    animation:
      nrocks-flash-show .01s linear var(--feature-out-bars) forwards,
      nrocks-flash-out  var(--feature-flash) var(--feature-ease-wipe) calc(var(--feature-out-bars) + var(--feature-flash-gap)) forwards;
  }
}
@keyframes nrocks-card-in {             /* カードが左から入る */
  from { transform: translateX(-100cqw); }
  to   { transform: translateX(0); }
}
@keyframes nrocks-flash-in {            /* 入る：黒が左から覆う */
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes nrocks-flash-hide {          /* 入る：カラーバーが覆ったら黒を消す */
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
@keyframes nrocks-flash-show {          /* 戻る：カラーバーの下に黒を出す */
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes nrocks-flash-out {           /* 戻る：黒が右へ抜ける */
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
@keyframes nrocks-bars-in {             /* 入る：カラーバーが左から覆う */
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes nrocks-bars-push {           /* 入る：カラーバーがカードに押されて右へ畳まれる */
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
@keyframes nrocks-bars-follow {         /* 戻る：カードの後ろにカラーバーが広がる */
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes nrocks-bars-out {            /* 戻る：カラーバーが右へ抜ける */
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
/* スライダーの写真の入れ替え（js/feature-auto.js が入ってくる写真に .is-incoming を付ける） */
.container03--disc .postlist02--feature .postlist02-jacket__img {
  position: relative;
}
/* 写真の箱（写真＋左下のラベル）。入れ替えのときはこの箱ごと滑らせる */
.container03--disc .postlist02--feature .postlist02-photo {
  position: absolute;
  inset: 0;
  display: block;
}
.container03--disc .postlist02--feature .postlist02-photo.is-incoming {
  animation: nrocks-photo-in var(--feature-photo) var(--feature-ease-photo) both;
  will-change: transform;
}
/* 写真の左下のラベル（CHART 1／PICK UP）。位置はカードの文字と同じ */
.container03--disc .postlist02--feature .postlist02-photo__label {
  position: absolute;
  left: 20px;
  bottom: 16px;
  color: var(--ntl-c-text);        /* ★ ラベルの色 */
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
@keyframes nrocks-photo-in {            /* 次の写真が左から重なる */
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* スライダーの間隔・ON／OFF は js/feature-auto.js、件数は functions.php の NROCKS_FEATURE_SLIDES */

@media (hover: none) {
  /* マウスのない端末：写真の下に文字 */
  .container03--disc .postlist02--feature .postlist02-content {
    margin-top: 14px;
  }
}

/* マウスのない端末のスライダー（js/feature-auto.js が .is-slider を付けたときだけ）
   ・中身は上の @media (hover: hover) と同じ（:hover なし）。上を変えたらここも合わせる */
@media (hover: none) {
  .container03--disc .postlist02--feature.is-slider .postlist02-jacket__preview,
  .container03--disc .postlist02--feature.is-slider .postlist02-jacket::after {
    display: block;
  }
  .container03--disc .postlist02--feature.is-slider .postlist02-jacket {
    container-type: inline-size;
  }
  .container03--disc .postlist02--feature.is-slider .postlist02-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 4 / 3;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 16px 0;
    box-sizing: border-box;
    overflow: hidden;
    container-type: inline-size;
    pointer-events: none;
  }
  .container03--disc .postlist02--feature.is-slider .postlist02-content > * {
    margin-left: 20px;
    margin-right: 20px;
    transform: translateX(100cqw);
    transition: transform var(--feature-card) var(--feature-ease-card);
  }
  .container03--disc .postlist02--feature.is-slider .postlist02-jacket::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--feature-flash-color);
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
  }
  .container03--disc .postlist02--feature.is-slider .postlist02-jacket::after {
    background: var(--feature-bars);
  }
  .container03--disc .postlist02--feature.is-slider .postlist02-jacket__preview {
    background: var(--feature-white);
    clip-path: none;
    transform: translateX(100cqw);
    transition: transform var(--feature-card) var(--feature-ease-card);
  }
  .container03--disc .postlist02--feature.is-slider.is-auto .postlist02-jacket::before {
    animation:
    nrocks-flash-in   var(--feature-flash) var(--feature-ease-wipe) forwards,
    nrocks-flash-hide .01s linear calc(var(--feature-flash-gap) + var(--feature-bars-wipe)) forwards;
  }
  .container03--disc .postlist02--feature.is-slider.is-auto .postlist02-jacket::after {
    animation:
    nrocks-bars-in   var(--feature-bars-wipe) var(--feature-ease-wipe) var(--feature-bars-delay) both,
    nrocks-bars-push var(--feature-card) var(--feature-ease-card) var(--feature-card-delay) forwards;
  }
  .container03--disc .postlist02--feature.is-slider.is-auto .postlist02-jacket__preview,
  .container03--disc .postlist02--feature.is-slider.is-auto .postlist02-content > * {
    transform: translateX(0);
    animation: nrocks-card-in var(--feature-card) var(--feature-ease-card) var(--feature-card-delay) backwards;
  }
  .container03--disc .postlist02--feature.is-slider.is-auto .postlist02-content a {
    pointer-events: auto;
  }
  .container03--disc .postlist02--feature.is-slider.is-auto .post__thumb--img {
    filter: none;
    transition: 1.5s;
  }
  .container03--disc .postlist02--feature.is-slider.is-leaving:not(.is-auto) .postlist02-jacket::after {
    animation:
    nrocks-bars-follow var(--feature-card) var(--feature-ease-card) forwards,
    nrocks-bars-out    var(--feature-bars-wipe) var(--feature-ease-wipe) var(--feature-out-bars) forwards;
  }
  .container03--disc .postlist02--feature.is-slider.is-leaving:not(.is-auto) .postlist02-jacket::before {
    animation:
    nrocks-flash-show .01s linear var(--feature-out-bars) forwards,
    nrocks-flash-out  var(--feature-flash) var(--feature-ease-wipe) calc(var(--feature-out-bars) + var(--feature-flash-gap)) forwards;
  }
  .container03--disc .postlist02--feature.is-slider .postlist02-content {
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .container03--disc .postlist02--feature .postlist02-content {
    transition: none;
    animation: none !important;
  }
}

/* 写真付きの一覧のトンボの線：1件目のジャケットの左上と、最後のジャケットの右下。トップは2件目の左上にも */
@media (min-width: 720px) {
  .container03--disc .postlist02--disc .postlist02-content::before,
  .container03--disc .postlist02--disc .postlist02-content::after {
    content: none !important;
  }
  .container03--disc .postlist02--disc {
    position: relative;
  }
  .container03--disc .postlist02--disc:first-of-type::before {
    content: "";
    position: absolute;
    top: 0;
    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--disc .postlist02--disc:last-of-type::after {
    content: "";
    position: absolute;
    bottom: 0;
    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;
  }
  /* トップ：大きい1件のあとの2件目（間に広告が入るときも） */
  .container03--disc .postlist02--feature + .postlist02--disc::before,
  .container03--disc .postlist02--feature + .nrocks-ad-mid + .postlist02--disc::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
    width: var(--trim-mark-length);
    border-top: 1px solid var(--trim-mark-color);
  }
}


/* =====================================================================
   8. 記事ページ（single.php）
   見出し（カテゴリ名_POST）→ タイトル・日付 → アイキャッチ → 広告 → 本文 → NOTICES → SHARE → 前後の矢印 → コメント欄 → 広告
   ===================================================================== */

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

/* 本文：アイキャッチ・広告・本文をひとかたまりに（広告あり：広告 →30px→ 本文／広告なし：アイキャッチ →45px→ 本文） */
.container03--single .news .content {
  padding-top: 10px;
}
.container03--single .content > :last-child {
  margin-bottom: 0;            /* 本文の最後の要素の下の余白は記事によって違うので 0 に */
}

/* NOTICES：本文の最後のひと言のように、本文の最後 →約1行分（20px）→ NOTICES。見出しと説明を横1行に */
.container03--single .notice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2em;
  margin-top: 10px;            /* ＋本文の箱の下 10px ＝ 20px */
}

/* SHARE：NOTICES →40px→ SHARE。見出しとリンクを横1行に（間は 1.2em・ベースラインでそろえる）
   ・リンクの書式はフッターの PRIVACY POLICY と同じ（Montserrat・10.8px・700・大文字）。頭に鎖のアイコン */
.container03--single .share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2em;
  margin-top: 40px;
  padding-bottom: 15px;
}
.container03--single .share-row .sharebtn--text {
  margin: 0;
  padding: 0;
}
.container03--single .sharebtn--text {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
}
.container03--single .sharebtn--text ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2em;
  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::before {
  content: "\f0c1";            /* 鎖（Font Awesome 7 の link） */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 0.2em;
  letter-spacing: 0;
}

/* 前後の記事の矢印（.postnavi--arrows）：SHARE →40px→ 矢印
   ・← 新しい記事／→ 古い記事（一覧の並びと同じ向き）。左右の矢印はいつも出す
   ・マウスオンで矢印の横に「記事タイトル　IN ○○」。記事がない側は NO NEWER POSTS／NO OLDER POSTS
   ・ラベルは出るとき 0.3s／消えるとき 1.2s（残像） */
.container03--single .postnavi--arrows {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 22px 0 0;            /* ＋SHARE の行の下 15px ＋矢印の箱の上のすき間 ＝ 40px */
  padding: 0;
}
.container03--single .postnavi--arrows .postnavi__prev,
.container03--single .postnavi--arrows .postnavi__next {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: inherit;
  text-decoration: none;
}
.container03--single .postnavi__prev {
  flex-direction: row-reverse; /* HTML はラベル → 矢印の順なので、左側は矢印を左に */
  justify-content: flex-end;
}
.container03--single .postnavi__next {
  margin-left: auto;
}
.container03--single .postnavi--arrows .postnavi__none {
  cursor: default;
}
.container03--single .postnavi--arrows i {
  font-size: 14px;
  flex-shrink: 0;
}
.container03--single .postnavi__label {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  width: max-content;
  max-width: 280px;            /* 列の半分弱。左右のラベルが重ならないように */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.container03--single .postnavi__title {
  min-width: 0;
  font-family: "M PLUS Rounded 1c";
  font-size: 12px;
  white-space: nowrap;         /* 1行。長いときは「…」 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.container03--single .postnavi__none .postnavi__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  color: var(--ntl-c-faint);
}
.container03--single .postnavi__scope {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ntl-c-faint);
}
.container03--single .postnavi--arrows .postnavi__prev:hover .postnavi__label,
.container03--single .postnavi--arrows .postnavi__next:hover .postnavi__label,
.container03--single .postnavi--arrows a:focus-visible .postnavi__label {
  opacity: 1;
  transition-duration: 0.3s;
}
/* スマホ（639px以下）はラベルを出さない（透明でも場所を取って右の矢印が押し出されるため） */
@media (max-width: 639px) {
  .container03--single .postnavi__label {
    display: none;
  }
}

/* 記事ページのトンボの線
   ・写真（アイキャッチと本文の画像ブロック）ごとに右下。説明文があるときは説明文の下
   ・SHARE の見出しの左（記事の終わりの目印） */
@media (min-width: 720px) {
  .container03--single .single-eyecatch,
  .container03--single .content figure.wp-block-image,
  .container03--single .type-D--share {
    position: relative;
  }
  .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;
  }
}


/* コメント欄（comments.php・1件は functions.php の nrocks_comment_item()）
   ・前後の矢印 →40px→ DISCUSSION（見出しと件数を横1行に：NOTICES・SHARE と同じ形）
   ・1件：クレジット「FROM : 名前　DATE : 日付」（一覧と同じ 1px の縦線）→ 本文 → REPLY
   ・返信は 22px 右へ
   ・入力欄は CONTACT と同じ下線だけ、送信は SEND EMAIL と同じ箱＋紙飛行機
   ・色：文字 --ntl-c-text／マウスオン --ntl-c-faint（サイト共通） */
.container03--single .comments {
  margin-top: 40px;
  color: var(--ntl-c-text);
}
.container03--single .comments__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.2em;
}
.container03--single .comments__count,
.container03--single .comments__closed {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}
.container03--single .comments__closed {
  margin-top: 20px;
}

/* 一覧 */
.container03--single .comments__list,
.container03--single .comments__list .children {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container03--single .comments__list {
  margin-top: 20px;            /* 見出し 〜 1件目 */
}
.container03--single .comments__list .children {
  margin: 16px 0 0 22px;       /* 返信：親の本文 〜 返信 ／ 右へずらす幅 */
}
/* 返信への返信（3階層目から）は右へずらさない：返信は何階層あっても 22px の1段だけ */
.container03--single .comments__list .children .children {
  margin-left: 0;
}
.container03--single .comments__item + .comments__item {
  margin-top: 24px;            /* コメントとコメントの間 */
}

/* クレジット：一覧（.postlist02-credits）と同じ書式。1行に「FROM : 名前　DATE : 日付」 */
.container03--single .comments__credit {
  margin: 0;
  padding-left: 10px;          /* 縦の線 〜 文字 */
  border-left: 1px solid var(--trim-mark-color);
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
}
.container03--single .comments__credit > div {
  display: inline;
}
.container03--single .comments__credit > div + div {
  margin-left: 1.2em;          /* 名前 〜 DATE */
}
.container03--single .comments__credit dt,
.container03--single .comments__credit dd {
  display: inline;
  margin: 0;
}
.container03--single .comments__credit dt::after {
  content: " : ";
  white-space: pre;
}
.container03--single .comments__credit dd {
  font-weight: 400;
}

/* 本文・承認待ち・REPLY：クレジットの文字の頭（縦線 1px ＋ 10px）にそろえる */
.container03--single .comments__text,
.container03--single .comments__moderation,
.container03--single .comments__reply {
  margin: 4px 0 0 11px;
}
.container03--single .comments__text {
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere;     /* 長い URL でもはみ出さない */
}
.container03--single .comments__text p {
  margin: 0 0 0.6em;
}
.container03--single .comments__text > :last-child {
  margin-bottom: 0;
}
.container03--single .comments__moderation,
.container03--single .comments__reply {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: uppercase;
}
.container03--single .comments__moderation {
  color: var(--ntl-c-faint);
}
.container03--single .comments__reply a::before {
  content: "\f3e5";            /* 返信の矢印（Font Awesome 7 の reply） */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 0.3em;
}
.container03--single .comments__reply a:hover {
  color: var(--ntl-c-faint);
}

/* ページ送り */
.container03--single .comments__pagenavi {
  display: flex;
  gap: 0 1.2em;
  margin-top: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  text-transform: uppercase;
}
.container03--single .comments__pagenavi .current {
  color: var(--ntl-c-faint);
}

/* 入力フォーム：一覧 →32px→ LEAVE A COMMENT →6px→ 入力欄 →12px→ SEND COMMENT */
.container03--single .comments__respond {
  margin-top: 32px;
}
.container03--single .comments__head + .comments__respond {
  margin-top: 20px;            /* コメントが 0件のときは見出しのすぐ下 */
}
.container03--single .comment-reply-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}
.container03--single .comment-reply-title small {
  margin-left: 1.2em;          /* 返信中だけ出る CANCEL */
  font-size: inherit;
}
.container03--single .comment-reply-title small a:hover,
.container03--single .comments .logged-in-as a:hover {
  color: var(--ntl-c-faint);
}
.container03--single .comments .logged-in-as {
  margin-top: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 400;
  text-transform: uppercase;
}
.container03--single .comments .logged-in-as a {
  margin-left: 1.2em;
  font-weight: 700;
}
.container03--single .comments .comment-form-comment textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 120px;
  margin-top: 6px;
  padding: 8px 0;              /* 左右 0：入力した文字の頭を見出しにそろえる */
  border: 0;
  border-bottom: 1px solid var(--ntl-c-text);
  border-radius: 0;
  background: transparent;
  color: var(--ntl-c-text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}
.container03--single .comments .comment-form-comment textarea:focus {
  outline: 0;
}
.container03--single .comments .form-submit {
  margin-top: 12px;
}
.container03--single .comments .form-submit .submit {
  display: inline-block;
  height: auto;
  margin: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: var(--ntl-c-fill);
  color: var(--ntl-c-text);
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.container03--single .comments .form-submit .submit i {
  margin-right: 0.4em;
}
.container03--single .comments .form-submit .submit:hover {
  color: var(--ntl-c-faint);
}


/* =====================================================================
   9. 固定ページ（PRIVACY POLICY・PROFILE・CONTACT・標準の page.php。.container03--page）
   ・見出し 〜 本文の最初の行 ＝ 40px（広告があるときは 見出し →10px→ 広告 →40px→ 本文）
   ===================================================================== */

.container03--front.container03--page .news {
  padding-top: 0;
}
.container03--page .news > .type-x:first-child,
.container03--page .news > .googlead:first-child {
  margin: 10px 0 0;
}
.container03--page .news .content {
  padding-top: 33px;
}
.container03--page .news > .content:first-child,
.container03--page .news > .googlead:not(:has(*)) + .content {
  padding-top: 38px;
}

/* PROFILE の CONTACT：ヘッダーのメニューと同じ書式 */
.container03--page .page-contact {
  font-family: Montserrat, sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}
.container03--page .page-contact a:hover {
  color: var(--ntl-c-faint);
}

/* CONTACT のフォーム（Contact Form 7）
   ・項目名：ヘッダーのメニューと同じ書式／入力欄：列の幅いっぱい・下線だけ・本文と同じ 12px
   ・送信ボタン：薄い塗り（--ntl-c-fill）の箱 ＋ 紙飛行機のアイコン。マウスオン・送信中はグレー
   ・エラーは薄いグレーの文字だけ（赤や色付きの枠にしない） */
.container03--contact .news > .content:first-child {
  padding-top: 45px;           /* 見出し 〜 NAME* ＝ 40px */
}
.container03--contact .wpcf7 ul + ul {
  margin-top: 16px;            /* 項目と項目の間 */
}
.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;
  padding: 8px 0;              /* 左右 0：入力した文字の頭を項目名にそろえる */
  border: 0;
  border-bottom: 1px solid var(--ntl-c-text);
  border-radius: 0;
  background: transparent;
  color: var(--ntl-c-text);
  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;
  margin: 0;
  border: 0;
  line-height: 1.2em;
  color: var(--ntl-c-text);
  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: var(--ntl-c-faint);
}
/* 送信ボタンの箱と紙飛行機（アイコンは li の ::before。クリックは下のボタンに通す）
   ・Contact Form 7 がボタンを <p> で包むので、li の直下でなくても効く書き方（:has(.wpcf7-submit)） */
.container03--contact .wpcf7 li:has(.wpcf7-submit) {
  position: relative;
  display: inline-block;
  margin: 5px 0 15px;
}
.container03--contact .wpcf7 li:has(.wpcf7-submit) > p {
  margin: 0;
}
.container03--contact .content .wpcf7 .wpcf7-submit {
  padding: 6px 12px 6px 28px;  /* 左はアイコンの分 */
  background: var(--ntl-c-fill);
}
.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: var(--ntl-c-text);
  pointer-events: none;
}
.container03--contact .wpcf7 li:has(.wpcf7-submit):hover::before,
.container03--contact .wpcf7 form.submitting li:has(.wpcf7-submit)::before {
  color: var(--ntl-c-faint);
}
/* 送信中の「くるくる」は出さず、SEND EMAIL の文字をグレーにする */
.container03--contact .content .wpcf7 .wpcf7-spinner {
  display: none;
}
.container03--contact .content .wpcf7 form.submitting .wpcf7-submit {
  color: var(--ntl-c-faint);
  cursor: default;
}
/* 欄ごとのエラー：下線のすぐ下に左揃え・薄いグレー */
.container03--contact .content .wpcf7 .wpcf7-not-valid-tip {
  position: static;
  display: block;
  width: auto;
  margin-top: 4px;
  color: var(--ntl-c-faint);
  font-size: 10.8px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
/* 送信後のまとめ表示：SEND EMAIL の下に文字だけ。エラーのときだけ薄いグレー */
.container03--contact .content .wpcf7 form .wpcf7-response-output {
  width: auto;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ntl-c-text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.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: var(--ntl-c-faint);
}


/* =====================================================================
   10. CATEGORIES・ARCHIVES・TAGS の一覧（page-categories.php など。.container03--index）
   ・見出し 〜 一覧 ＝ 40px／最後の行 〜 フッター ＝ 80px
   ・広告（bannerzone2）は一覧の下。一覧 →40px→ 広告
   ・一覧全体を「1つの記事」としてトンボの線ではさむ（左上・右下）
   ===================================================================== */

.container03--index .container03-1 {
  padding-bottom: 10px;
}
.container03--index .index-list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  line-height: 2em;
  text-transform: uppercase;
}
.container03--index .index-list + .googlead {
  margin: 40px 0 0;
}
@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;
  }
  .container03--index .index-list::before {
    top: 8px;                  /* 1行目の大文字の上端 */
    left: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
  }
  .container03--index .index-list::after {
    bottom: 8px;               /* 最後の行の文字の下端 */
    right: calc((var(--trim-mark-length) + var(--trim-mark-gap)) * -1);
  }
}


/* =====================================================================
   11. ITEMS（商品一覧。page-items.php）：左に商品の写真（60px角）、右に商品名・記事・ショップのリンク
   ===================================================================== */

.container03--items .items-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.container03--items .items-thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container03--items .items-thumb img {
  max-width: 60px;
  max-height: 60px;
  width: auto;
  height: auto;
}
.container03--items .items-row .postlist02-content {
  flex: 1 1 auto;
  min-width: 0;
}
.container03--items .items-row .clear {
  display: none;
}
.container03--items .items-shops {
  margin: 4px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.8px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  text-transform: uppercase;
}
.container03--items .items-shops a + a {
  margin-left: 1.2em;
}
.container03--items .items-shops a:hover {
  color: var(--ntl-c-faint);
}
.container03--items .items-pixel {   /* 計測用の1px画像は見えないように */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}


/* =====================================================================
   12. 404（ヘッダーを出さないので、見出しをページの一番上から 30px に）
   ===================================================================== */

.container03--front.container03--404 .container03-1 {
  margin-top: 35px;
}


/* =====================================================================
   13. ログイン中の広告の代わりの箱（HIDE ADS FOR ADMIN01／02。p.type-x:has(> .fa-ban)）
   ・広告と同じ位置・大きさの点線の枠に × の線。余白は「6. 広告」の広告が入ったときと同じ
   ===================================================================== */
p.type-x:has(> .fa-ban) {
  display: flex;
  align-items: center;          /* 文字を上下の中央に */
  justify-content: center;      /* 文字を左右の中央に */
  gap: 0.4em;                   /* アイコン 〜 文字 */
  box-sizing: border-box;
  min-height: 200px;            /* ★ 広告の高さ（PC・スマホ） */
  margin: 15px 0;               /* .googlead と同じ */
  border: 1px dashed var(--ntl-c-faint);
  color: var(--ntl-c-sub);
  background-color: var(--ntl-c-fill);
  background-image:
    linear-gradient(var(--ntl-c-fill), var(--ntl-c-fill)),
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--ntl-c-faint) calc(50% - 0.5px), var(--ntl-c-faint) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--ntl-c-faint) calc(50% - 0.5px), var(--ntl-c-faint) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-size: 17em 2.6em, 100% 100%, 100% 100%;   /* 1枚目＝文字の後ろの帯の大きさ */
  background-position: center;
  background-repeat: no-repeat;
}

/* トップ・一覧：広告が入ったときと同じ（見出し →25px→ 箱 →40px→ 一覧の1件目／ナビの下は 25px・15px） */
.container03--front p.type-x:has(> .fa-ban) {
  margin-top: 25px;
  margin-bottom: 15px;
}
.container03--front .container03-1 > p.type-x:has(> .fa-ban) {
  margin-bottom: 40px;
}
.container03--front p.type-x:has(> .fa-ban) + .news {
  padding-top: 0;
}
.container03--front p.type-x:has(> .fa-ban) + .news > .postlist02:first-child {
  margin-top: 0;
}
/* トップ1ページ目：大きい1件の下（.nrocks-ad-mid）は広告と同じ -28px・44px */
.container03--front .news > p.type-x.nrocks-ad-mid:has(> .fa-ban) {
  margin: -28px 0 44px;
}
/* 固定ページ（PRIVACY POLICY など）：広告と同じ上 10px */
.container03--page .news > p.type-x:first-child:has(> .fa-ban) {
  margin: 10px 0 0;
}
/* 記事ページ：アイキャッチ →25px→ 箱（本物の広告と同じ） */
.container03--single .single-eyecatch + p.type-x:has(> .fa-ban) {
  margin-top: 25px;
}
/* CATEGORIES・ARCHIVES・TAGS：一覧 →40px→ 箱（本物の広告と同じ） */
.container03--index .index-list + p.type-x:has(> .fa-ban) {
  margin: 40px 0 0;
}