@charset "utf-8";
/* =====================================================================
main.css：NROCKS のデザインの CSS（V15.7 で main.css と front-600.css を1本にまとめた 2026-10-30）
- 読み込み順：base.css（リセット＋body の初期値。header.php）
→ all.css（Font Awesome。header.php）・プラグインの CSS など
→ main.css（このファイル。functions.php の nrocks_enqueue_main()）
→ loader-walker.css など
後から読むほうが勝つ。このファイルは前の front-600.css と同じ位置（プラグインの CSS のあと）で読み込む
- ★ 同じ要素の同じプロパティは1か所にしか書かない。同じファイルの中では下に書いたほうが勝つ
ここを直しても変わらないときは、このファイルの中で同じ要素を検索する（下の「1.」以降に同じ指定がないか）
- 並び：
0. 土台（前の main.css：書体・ヘッダー・フッター・検索欄・SNS・ページ上部へ戻る・CONTACT の基本・写真のグレー）
1. 共通（変数・600pxの列・ページ全体の縦線） ← ここから下は前の front-600.css（幅600pxの1列レイアウト）
2. ヘッダー・フッター
3. 縦の余白（ヘッダー 〜 見出し 〜 一覧 〜 フッター）
4. 一覧（トップ・記事一覧・検索結果）
5. 一覧のページ送り
6. 広告
7. 一覧（CD の説明風。トップ・記事一覧・POPULAR POSTS）
8. 記事ページ
9. 固定ページ（PRIVACY POLICY・PROFILE・CONTACT）
10. CATEGORIES・ARCHIVES・TAGS の一覧
11. ITEMS（商品一覧）
12. 404
- 「トンボの線」：印刷のトンボ風の目印（1px × 20px・薄いグレー）。始まり＝左上側／終わり＝右下側の対角に置く
列の外に余白がない 720px 未満の画面では出さない。長さ・間・色は「1. 共通」の変数の1か所で変える
- V15.7 の整理：前の main.css から、front-600.css に上書きされて効いていなかった値（97個）と、
使っていない Swiper の指定を削除。全ページ × 幅 1000／700／375px で見た目が変わらないことを確かめた
===================================================================== */
/* =====================================================================
0. 土台（前の main.css）
===================================================================== */
/*===============================
Bace
================================*/
body {
-webkit-appearance:none;
-webkit-text-size-adjust:100%;
}
a {
color:inherit;
text-decoration:none;
}
a:hover {
color:#bcbcbc;
/* transition: 0.5s; */
}
/* 画像 */
/* .fas {
color:#3C3C3B
} */
/*===============================
Type
================================*/
h1, h2, h3, h4, h5, h6 {
font-weight:600;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
}
/*h1.type-B span, h2.type-B span, h3.type-B span, h4.type-B span, h5.type-B span, h6.type-B span {
background:url("../images/icon/circle01.png") no-repeat left 8px;
display:block;
font-weight:bold;
padding:5px 0 5px 20px;
}*/
h1.type-D {
font-family:'Montserrat', sans-serif;
font-size:100%;
font-weight:600;
letter-spacing:-1px;
line-height:1em;
}
ul.type-J {
font-family:"M PLUS Rounded 1c";
}
h1.type-36 {
font-family:'Montserrat', sans-serif;
font-size:24px; /* 見出しを全ページ24pxに統一（元は220%＝26.4px） */
font-weight:700;
letter-spacing:-1px;
line-height:0.8em;
margin-bottom:0px;
margin-top:0px;
padding:0em;
}
h1.type-46 {
font-family:'Montserrat', sans-serif;
font-size:24px; /* 見出しを全ページ24pxに統一（元は260%＝31.2px） */
font-weight:700;
letter-spacing:-2px;
line-height:0.8em;
margin-bottom:0px;
margin-left:-0.05em;
margin-top:0px;
padding:0em;
-webkit-appearance:none;
}
h1.type-TTL {
font-family:'Montserrat', sans-serif;
font-size:240%;
font-weight:700;
letter-spacing:-2px;
line-height:0.8em;
margin-bottom:0px;
margin-left:-0.1em;
margin-top:0px;
padding:0em;
-webkit-appearance:none;
}
.type-x {
font-family:'Montserrat', sans-serif;
font-weight:700;
letter-spacing: -0.05em;
text-transform: uppercase;
}
h1.title {
font-family: "M PLUS Rounded 1c";
font-size:12px;
font-weight:300;
line-height:2.0em;
}
.newMark {
font-family:'Montserrat', sans-serif;
font-weight:700;
letter-spacing: -0.05em;
}
.type-30 {
font-size:90%;
}
/*カテゴリのアカウント数*/
.post-count {
margin-left: 0.2em;
}
/*カエレバ*/
.kaerebalink-image{
margin:0 0px 0px 0;
}
.kaerebalink-image img{
width: 85%;
}
.kaerebalink-box a {
font-size:90%;
}
.searchhighlight{
background:rgba(7, 7, 7, 0.48);
}
.search-highlight {
border-bottom:solid 2px #bcbcbc;
}
/*===============================
写真（アイキャッチ・一覧のジャケット）
・ふだんは彩度を落として、マウスオンでカラーに
・V15.7：前はここに Swiper（スライダー）の指定があった（V15.4 でスライダーをやめたので削除）
================================*/
.post__thumb--img {
/* filter: url("data:image/svg+xml;utf8,#grayscale"); */
filter: grayscale(70%) contrast(92%);/*彩度を落とす（元は95%＝ほぼモノクロ）*/
-webkit-filter: grayscale(70%) contrast(92%);/*彩度を落とす（元は95%＝ほぼモノクロ）*/
}
.post__thumb--img:hover{
filter: none;/*画像をカラーに*/
transition: 1.5s;
-webkit-filter: grayscale(0%);/*画像をカラーに*/
}
/*===============================
valuecommerceAD
================================*/
ins[style]{
background-color:transparent;
}
/*===============================
GoogleAD
================================*/
/* 広告の上下の余白は、このファイルの下の「6. 広告」で決めている（トップ・一覧・記事ページなど、広告が出るページは全部そちらが優先）
ここの数字を変えても、今のテーマでは見た目は変わらない */
.googlead{
margin-top: 15px;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 0px;
}
/*.googlead ins{
filter: url("data:image/svg+xml;utf8,#grayscale");/*画像をモノクロに*/
/*filter: grayscale(95%);/*画像をモノクロに*/
/*-webkit-filter: grayscale(95%);
}/*画像をモノクロに*/
/*.googlead ins:hover{
/*filter: none;/*画像をカラーに*/
/*ransition: 1.5s;
-webkit-filter: grayscale(0%);
}/*画像をカラーに*/
/*===============================
PostNavi single.php
================================*/
.postnavi {
font-family: "M PLUS Rounded 1c";
}
.categories {
line-height: 1.0em;
}
/*===============================
SNSshre
================================*/
.sharebtn ul {
text-align:left;
}
.sharebtn li a {
transition: 0.5s;
}
.sharebtn ul li {
display:inline-block;
}
.twitter a:hover {color:#bcbcbc;} /* X（旧Twitter）。サイトのリンクと同じグレー（元は Twitter の青 #55acee） */
.facebook a:hover {color:#3B5998;}
.line a:hover {color:#1dcd00;}
.pin a:hover {color:#cb2027;}
/*===============================
TopScroll
================================*/
#page-top {
bottom:90px;
position:fixed;
right:20px;
z-index:50;
margin:0;
}
/* クリックできる範囲（ボールは20pxで小さいので、押しやすいよう44×44pxに） */
#page-top a {
display:flex;
align-items:flex-end; /* ボールを下寄せ。上の20pxはジャンプする分の空き */
justify-content:center;
width:44px;
height:44px;
}
#page-top .loader {
margin-top:0; /* 上の空きは a の高さで確保しているので不要 */
}
/* 普段はボールを止めておく */
#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;
}
/* OSで「視差効果を減らす」設定のときは、マウスオンでも動かさない */
@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;
}
}
/*===============================
PageHeader
================================*/
.page-header {
/* background:#FCFCFC; */
position:static;
}
.page-header-inner {
margin-bottom:0px;
}
/*===============================
Footer
================================*/
.footer{
padding-top: 0px;
}
.footer-inner{
border-top: 0px solid rgb(153, 153, 153);
margin: auto;
margin-top: 50px;
padding-top: 0px;
}
/* Copyright */
.copyright{
float: left;
font-family: 'Montserrat', sans-serif;
font-size: 90%;
font-weight: 700;
letter-spacing: 0px;
line-height: 1.2em;
padding-top: 0px;
text-transform: uppercase;
}
.copyright a{
}
.copyright a:hover{
color: #bdc3c7;
}
/*===============================
Search
================================
.searchform02{
margin-top: 10px;
margin-bottom: 10px;
}
form#searchform input[type="text"]{
border: none;
border-bottom: 1px solid #000;
padding: 0px 0px;
}
form#searchform input[type="submit"]{
background: #ffffff;
border: none;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
font-weight: 700;
}
form#searchform input[type="submit"]:hover{
background: #ffffff;
color: #bdc3c7;
}*/
.searchform{
margin-top: 10px;
margin-bottom: 10px;
}
.search_container{
box-sizing: border-box;
}
.search_container input[type="text"]{
border: none;
border-bottom: 1px solid #000;
padding: 0px 0px;
background-color: #FCFCFC;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"]{
cursor: pointer;
font-family: FontAwesome;
font-size: 1.3em;
border: none;
background: none;
color: #2b2b2b;
outline : none;
display: inline-block;
vertical-align: middle;
}
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #FCFCFC inset;
}
/* Container 左右
================================*/
.container03,
.page-header,
.footer {
padding-left: 20px;
padding-right: 20px;
}
/* Container 上下
================================*/
.container03{
padding-top: 0px;
}
/*===============================
News
================================*/
.news .content{
font-family: "M PLUS Rounded 1c";
padding-bottom: 10px;
}
.content p{
margin-top: 5px;
margin-bottom: 15px;
}
.news img{
margin-bottom: 10px;
}
.news img{
max-width: 100%;
vertical-align: bottom;
}
/*===============================
PLUGIN WP-Page Navi 角丸
*=============================== */
.navigation{
clear: both;
line-height: 20px;
padding: 15px 0;
}
.wp-pagenavi{
font-family:'Montserrat', sans-serif;
}
.wp-pagenavi span {/*全体の指定*/
white-space: nowrap;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-align: center;
text-decoration:none;
}
/*===============================
Newsinfor Navi 角丸
================================
.catall_pagenavi{
clear: both;
line-height: 20px;
margin-top: 30px;
padding: 15px 0;
}
.catall_pagenavi .current{
background-color: #333;
border-radius: 3px;
color: #FCFCFC;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
-moz-border-radius: 3px;
padding: 3px 4px;
-webkit-border-radius: 3px;
}
.catall_pagenavi a, .catall_pagenavi span{
border: 1px solid #bfbfbf;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0px;
-moz-border-radius: 3px;
padding: 3px 4px;
text-decoration: none;
-webkit-appearance: none;
-webkit-border-radius: 3px;
}
.catall_pagenavi a:hover, .catall_pagenavi span.current{
border-color: #000;
-webkit-appearance: none;
}
.catall_pagenavi span.current{
font-weight: bold;
-webkit-appearance: none;
}*/
/*===============================
ContactForm7-2
================================*/
.wpcf7{width: 100%;}
/* .form-width { max-width: 100%;} */
.wpcf7 form p {
text-transform: uppercase;
border-bottom: 0px solid #000;
color: #666;
padding-bottom: 0;
}
.wpcf7 form input[type="email"]{
vertical-align: text-bottom;
}
.wpcf7{
font-size: 100%;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}
.wpcf7 form input[type="submit"]{
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
-webkit-transition: background-color 0.2s linear;
}
.wpcf7 form input[type="submit"]:hover{
color: #bdc3c7;
}
.wpcf7 .noline{
border-bottom: 0px solid #000;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
font-weight: normal;
display: block;
position: absolute;
top: 0;
width: 400px;
text-align:right;
}
.div .wpcf7-mail-sent-ok {
border: 0px solid #398f14;
}
/*===============================
Blog Card
================================*/
/*===============================
Post List
================================*/
/*===============================
Post List02
================================*/
.postlist02 {
font-family: "M PLUS Rounded 1c";
/* background: #FCFCFC; */
border-top:dashed 0px #292F33;/*点線*/
border-bottom:dashed 0px #292F33;/*点線*/
word-wrap:break-word;
max-width:100%;
border-radius:0px;
margin-top: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 0px;
/* sp用 ※4 */
}
.postlist02 a {
text-decoration: none;
}
.postlist02-title {
display: block;
}
.postlist02-content {
line-height:120%;
}
.postlist02-excerpt {
color:#333;
line-height: 1.5em;
}
.postlist02 .clear {
clear: both;
}
/*===============================
Post List03
================================*/
/*===============================
Post List04
================================*/
/*===============================
Comments
================================*/
/*===============================
Comments
================================*/
/*===============================
===============================
RESPONSIVE 設定
===============================
================================*/
/*===============================
Less than 767
================================*/
@media (max-width: 767px) {
/*トリミング.thumbnail01 img {
height: 300px;
object-fit: cover;
}*/
h1.type-46{
font-size: 24px; /* スマホも24px（元は260%） */
}
h1.type-36{
font-size: 24px; /* スマホも24px（元は200%） */
}
h1.type-TTL {
font-size:240%; /* 2026-10-25：PC と同じ 28.8px に（前は 330%＝39.6px。見出し 24px との比率を PC と同じ 1.2倍に） */
}
.container03{
padding-top: 0px;
}
/*.googlead {
margin-left: 1em;
margin-right: 1em;
}*/
.page-header-inner{
margin-top: 30px;
padding-bottom: 10px;
}
.wpcf7{width: 100%;}
}
/*===============================
Over 768px
================================*/
@media (min-width: 768px) {
.page-header-inner{
width: 100%;
}
.container03:after{
clear: both;
content: "";
display: block;
}
.container03-1{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
}
/*===============================
Over 960px
================================*/
@media (min-width: 960px) {
/* PageHeader */
.page-header-inner{
height: 60px;
margin-bottom: 0px;
}
/* Type */
}
/*===============================
HIDE ADS FOR ADMIN
================================*/
/* ログイン中に広告の代わりに出る「HIDE ADS FOR ADMIN」（アイコンも含む）を薄いグレーに
・.type-x はリンク（MORE など）でも使っているので、🚫アイコン（.fa-ban）を含む p だけを対象にする
・:has() は Safari 15.4 / Chrome 105 / Firefox 121 以降で有効（ログイン中の管理者にしか表示されないので問題なし） */
p.type-x:has(> .fa-ban) {
color: #bcbcbc;
}
/*===============================
右メニュー：PCで中身を右へ寄せる（試し）
・枠（.container03-2 の幅20%）はそのまま。枠ごとコンテナの右端へ寄せる
・中身を「一番長い行の幅」でひとまとめにして枠の右端へ。文字は左詰めのまま
・件数が増えて一番長い行が伸びると、その分だけ全体が左に戻る
・元に戻すときは、このブロックを丸ごと削除
================================*/
/*===============================
大見出し＋小見出しを1行に（例：GOODS_CATEGORIES）
・大見出し（h1.type-46）のすぐ後ろに小見出し（h1.type-36）がある場合だけ
（カテゴリ・タグ・年別・記事・検索のページ）
・間はアンダーバーですき間なし。小見出しのアイコンは非表示（PHPには残している）
・:has() は Safari 15.4 / Chrome 105 / Firefox 121 以降。古いブラウザでは今までどおり2行
================================*/
/* 大見出しを左に回り込ませ、小見出しをそのすぐ右に置く（h1 の間の改行がすき間にならないように 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: "_"; /* アンダーバーでつなぐ（例：GOODS_CATEGORIES）。すき間なし */
}
h1.type-46 + h1.type-36 i {
display: none; /* アイコンを非表示 */
}
/* 見出しの次の要素は、回り込みを解除して下の行から始める */
/*===============================
Font Awesome 7 の調整
・7 からはアイコンが全部同じ幅（1.25em）になるので、6 までと同じ「形に合わせた幅」に戻す
================================*/
:root {
--fa-width: auto;
}
/* LINE のアイコンは 7 で他の四角いSNSアイコンより一回り大きい（描画 27×28px、他は 24×24px）ので、
0.875倍にして X・Facebook・Pinterest と同じ大きさ（24×24px）にそろえる */
/* ---- ロゴ（NOTHING TO LOSE）の下のコピーライト（header.php。footer.php から移動） ----
書式はフッターの .copyright と同じ（float だけなし）
※ 前はここにキャッチコピー「BUY FIRST, REGRET LATER」（.site-tagline・Montserrat 13.2px / 400）を置いていた */
.header-copyright {
font-family: 'Montserrat', sans-serif;
font-weight: 400; /* 少し細く（フッターの .copyright は700）。字間（letter-spacing: 0）は変えない */
letter-spacing: 0px;
line-height: 1.2em;
text-transform: uppercase;
}
/* コピーライトの横のテーマ名（THEMES/○○）。間隔を空けて同じ行に */
.header-copyright__theme {
margin-left: 1.2em;
}
/* ---- ヘッダーメニュー（header.php・コピーライトの下） ----
・書式はコピーライト・フッターと同じ：Montserrat・10.8px・700・大文字（記事以外は太め、記事の中身は細め のルール）
・横1行に並べて、項目の間はすき間だけ（「 / 」はなし）
・リンクの色は普通の文字と同じ（ホバーで初めて分かる。コピーライトのリンクと同じ #bdc3c7） */
.header-menu__list {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 10px 0 0; /* コピーライトとの間（4px・20px・30px も試した） */
padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 90%; /* コピーライト・フッター（PRIVACY POLICY / PROFILE）と同じ 10.8px。13.2px・12px も試した */
font-weight: 700; /* 記事以外（サイトの枠）は太め。400 も試した */
letter-spacing: 0px;
line-height: 1.2em;
text-transform: uppercase;
gap: 0 1.2em; /* 項目の間 */
}
.header-menu__list li {
margin: 0;
padding: 0;
}
.header-menu__list a {
color: inherit;
text-decoration: none;
}
.header-menu__list a:hover {
color: #bdc3c7;
}
/* ---- パンくずリスト（header.php・メニューの下。footer.php から移動） ----
書式はコピーライト（.header-copyright）と同じ：Montserrat・10.8px・400・大文字 */
.header-breadcrumb {
font-family: 'Montserrat', sans-serif;
font-size: 90%;
font-weight: 400;
letter-spacing: 0px;
line-height: 1.2em;
text-transform: uppercase;
margin: 4px 0 0; /* メニューとの間（ロゴとコピーライトの間と同じ。前は10px） */
}
.header-breadcrumb a:hover {
color: #bdc3c7;
}
/* ---- パンくずの最初（ホーム「NOTHING TO LOSE」）を家のアイコンにする ----
・Breadcrumb NavXT の出力は NOTHING TO LOSE
・文字は画面から隠す（読み上げソフトには「NOTHING TO LOSE」と伝わるよう、消さずに見えなくする）
・アイコンは Font Awesome 7 の house（fa-house・\f015）を CSS で出す。プラグインの設定は変えない */
.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; /* 900 ＝ 塗りつぶし（solid）の家 */
font-style: normal;
}
/* ---- フッターの PRIVACY POLICY と PROFILE（footer.php・検索欄の下） ----
・「 / 」はやめて、すき間だけ（ヘッダーメニューの項目の間と同じ 1.2em） */
/* ---- サブのリンク PRIVACY POLICY・PROFILE（header.php・メニューの下。footer.php から移動） ----
・メインのメニューではないので控えめに：コピーライトと同じ Montserrat・10.8px・400・大文字
・項目の間はメニューと同じ 1.2em */
.header-sublinks {
font-family: 'Montserrat', sans-serif;
font-weight: 700; /* メニューと同じ太さに揃えた（前は 400。メニューと1行に並べたため） */
letter-spacing: 0px;
line-height: 1.2em;
text-transform: uppercase;
}
.header-sublinks a {
color: inherit;
text-decoration: none;
}
.header-sublinks a + a {
margin-left: 1.2em;
}
.header-sublinks a:hover {
color: #bdc3c7;
}
/* ---- スマホ（幅639px以下）のヘッダー ----
・ロゴ（NOTHING TO LOSE）を1行に収める：画面の幅に合わせて文字の大きさを変える（最大は今までと同じ 39.6px）
幅390px（iPhone）で約38.6px・幅375px（iPhone SE）で約37px。前は 39.6px 固定で「LOSE」だけ2行目に落ちていた
・コピーライトの行：テーマ名（THEMES/○○）を2行目に送る（「LOSE」だけ落ちる中途半端な折り返しをなくす） */
@media (max-width: 639px) {
/* 2026-10-25：ロゴは PC と同じ 28.8px（上の 767px 以下の指定）。画面の幅に合わせて伸ばす指定はやめた
.page-header h1.type-TTL {
font-size: min(39.6px, calc((100vw - 10px) * 0.1015));
}
*/
.header-copyright__theme {
display: block;
margin-left: 0;
}
}
/* ---- スマホの折りたたみメニュー（header.php の .header-menu-toggle・.header-nav） ----
・PC（幅640px以上）：ボタンは出さず、メニューは今まで通り2段の横並び
・スマホ（幅639px以下）：「MENU」の文字だけ出し、押すと6項目が縦に開く（開くと「CLOSE」）
・書式はメニューと同じ：Montserrat・10.8px・700（サブの PRIVACY POLICY・PROFILE は 400 のまま）
・押せる高さは1項目 約35px（文字の上下に 11px ずつ余白） */
.header-menu-toggle {
display: none;
}
@media (max-width: 639px) {
.header-menu-toggle {
display: block;
margin: -2px 0 0; /* 上の余白 12px と合わせて、コピーライト 〜 MENU の文字 ＝ 前のメニューと同じくらい */
padding: 12px 0; /* 押せる高さ（約37px） */
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: #bdc3c7;
}
/* 開け閉めは「にゅるっと」：高さ（max-height）を 0 ⇔ 260px で 0.4秒かけて変える
・260px は6項目（35px × 6 ＝ 210px）より少し大きめ。項目を増やすときはここも増やす
・閉じているときは visibility: hidden で、見えないリンクにタブキーで移動しないようにする（閉じ終わってから隠す） */
.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;
}
/* 縦に1項目ずつ */
.header-nav .header-menu__list {
display: block;
margin: 0;
}
.header-nav .header-menu__list a {
display: block;
padding: 11px 0;
}
}
/* ---- PC（幅640px以上）：メニューとサブのリンク（PRIVACY POLICY・PROFILE）を1行に並べる ----
・前は2段（メニュー／サブのリンク）
・間隔はメニューの項目の間と同じ 1.2em。太さはそのまま（メニュー 700・サブ 400） */
@media (min-width: 640px) {
.header-nav {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 1.2em;
margin-top: 12px; /* V15.1：ロゴ 〜 メニュー ＝ 約6px（前は 16px で約10px。コピーライトをフッターに戻したため） */
}
.header-nav .header-menu__list {
margin-top: 0;
margin-bottom: 0;
}
}
/* 商品リンクの箱（[itembox]・ITEM ブロック）の書式は css/itembox.css に移した（記事の編集画面でも同じ見た目にするため） */
/* テスト：ショップのリンク（YAHOO AMAZON RAKUTEN）の頭に外部リンクのアイコン
・Font Awesome 7 の arrow-up-right-from-square（\f08e）。REFERENCE と同じ形
・商品一覧（ITEMS）。自作の箱 [itembox] の分は css/itembox.css */
.items-shops a::before {
content: "\f0c1"; /* 鎖（カード・SHARE と同じ。前は外部リンク \f08e） */
font-family: "Font Awesome 7 Free";
font-weight: 900;
font-size: 0.85em;
margin-right: 0.2em;
letter-spacing: 0;
}
/* ---- スクロールバーの場所をどのページでもいつも空けておく（V15.1） ----
・前は loader-walker.css（トップと記事ページだけ読み込み）にだけあった
・ほかのページ（短いページ・フェードイン中のページ）はスクロールバーがない → ページが約7.5px 右にずれる
→ トップへ戻ったときにロゴが一瞬動いて見えた（トップ ⇔ 記事ページは両方に指定があるのでずれない）
・全ページで空けておけば、スクロールバーがあってもなくても、ロゴの位置は変わらない */
html {
scrollbar-gutter: stable;
}
/* ---- ロゴ（header.php の h1.type-TTL。文字ではなく SVG・2026-10-25） ----
・フォント（Montserrat 700）の読み込みを待たずに、今までの文字と同じ形・位置で出す
・大きさは今までの文字の大きさ（h1.type-TTL の font-size）に合わせて伸び縮み（SVG の幅・高さは em 指定）
・縦の位置：SVG の高さ＝行の高さ（0.8em）、下端を文字のベースラインの 0.0415em 下に（文字のときと同じ位置になる値）
・どの幅でも PC 用（字間 -2px を 28.8px で作ったもの）を伸び縮みして使う。スマホ・タブレットは今までの文字より字間が少し詰まる（39.6px で約11px短い）
スマホ用（39.6px 基準の -sp.svg）も header.php で出しているが隠している。使うときは下の「スマホ・タブレット用に切り替え」のコメントを外す
・ロゴを作り直すときは PC 用の1つだけでよい
・サイト名の文字（.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;
}
.type-TTL__logo--sp {
display: none;
}
/* スマホ・タブレット用に切り替え（今は使わない）
@media (max-width: 767px) {
.type-TTL__logo--pc {
display: none;
}
.type-TTL__logo--sp {
display: inline-block;
}
}
*/
/* =====================================================================
1. 共通
===================================================================== */
:root {
--trim-mark-length: 20px; /* 線の長さ */
--trim-mark-gap: 10px; /* 列と線の間 */
--trim-mark-color: #bcbcbc; /* 線の色（サイトのグレー） */
}
/* 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;
}
}
/* ページ全体の縦線：上は列の右端・下は列の左端（body の真ん中 ±300px） */
@media (min-width: 640px) {
body {
position: relative;
}
/* ヘッダーの上の余白 30px を .page-header の内側に（margin だと body の外にはみ出して、上の線の位置がずれる） */
.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→ コピーライト
・書式は「0. 土台」の .header-sublinks（700）・.header-copyright（400）。フッターの中は 90% が重なるので 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;
}
/* ページ全体を対角の2本ではさむトンボの線：始まり＝ロゴの左（文字の上端）／終わり＝コピーライトの右（列の右端の外・文字の下端） */
@media (min-width: 720px) {
.page-header h1.type-TTL {
position: relative;
}
.page-header h1.type-TTL::before {
content: "";
position: absolute;
top: 2px; /* ロゴ（28.8px・行の高さ 23px）の大文字の上端 */
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%; /* float で文字の幅に縮んでいるので、列の幅いっぱいにして右端を列の右端にそろえる */
}
.footer .footer-copyright {
position: relative;
}
.footer .footer-copyright::after {
content: "";
position: absolute;
bottom: 2px; /* 文字の下端（行の高さ 13px・文字 10.8px） */
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. 縦の余白
・ヘッダー 〜 見出し（LATEST POSTS など）＝ 80px
・見出し 〜 一覧の1件目・記事と記事の間 ＝ 40px
・ページ送り 〜 フッター ＝ 約80px／フッターの最後 〜 ページの一番下 ＝ 60px
・数字は実測で合わせたもの
===================================================================== */
.container03--front .container03-1 {
margin-top: 93px;
}
/* パンくずの行があるページ（トップ以外）：パンくずの行（ヘッダーの枠からはみ出している約17px）のぶん足す */
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件目 ＝ 40px */
.container03--front .news {
padding-top: 20px;
}
/* 一覧の下 〜 フッター：左の列と全体の下の余白をなくし、フッターの上の余白で空ける */
.container03--front,
.container03--front .container03-1 {
padding-bottom: 0;
}
.footer {
padding-bottom: 0;
}
.footer .footer-inner {
margin-top: 65px;
display: flow-root; /* 中の .copyright が float なので、高さに含める */
padding-bottom: 51px; /* フッターの最後の行 〜 ページの一番下 ＝ 60px */
}
/* =====================================================================
4. 一覧（トップ・記事一覧・検索結果。.postlist02）
1行目：タイトル（14px）／2行目：日付・カテゴリ・タグ（.postlist02-meta）
===================================================================== */
.container03--front .postlist02-title {
font-size: 14px;
line-height: 1.2em;
}
/* 新着の印（＊）も細く（「0. 土台」の .newMark は 700） */
.container03--front .postlist02-title .newMark {
font-weight: 400;
}
.postlist02-meta {
display: flex;
flex-wrap: wrap; /* 入りきらないときだけ折り返す */
gap: 0 0.6em;
margin: 0;
font-weight: 400;
}
.postlist02-meta a {
font-weight: inherit;
}
/* 記事と記事の間 ＝ 40px（「0. 土台」の .postlist02 の上の外余白 10px・内余白 10px と、ここの下の外余白 30px で 30＋10）
※ 写真付きの一覧（.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-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;
}
/* 人気順位の星（.rank-stars。inc/ga4-rank-stars.php）V15.3 2026-10-29
・日付・カテゴリ・タグの行の右。★＝黒（文字と同じ #3c3c3b）／☆＝薄いグレー
・前の稲妻（.postlist02-rank）はやめた */
.postlist02-meta .rank-stars {
font-family: sans-serif; /* Montserrat には ★☆ が無いので、記号は標準のフォントで */
font-size: 11px;
letter-spacing: 0.05em;
color: #3c3c3b;
white-space: nowrap;
cursor: default;
}
/* 検索結果の本文の抜粋（日付の行の下・本文と同じ 12px） */
.container03--search .postlist02-excerpt {
margin-top: 6px;
}
.container03--search .postlist02-excerpt p {
margin: 0;
}
/* 一覧のトンボの線
・トップ：記事ごとに、タイトルの左（始まり）
・記事一覧（.container03--archive）：一覧全体の上と下だけ（1件目のタイトルの左／最後の記事の日付の行の右）
・検索結果：記事ごとに、タイトルの左と抜粋の最後の行の右 */
@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 .wp-pagenavi span {
border: 0;
background: transparent;
}
.container03--front .nav-row .nav-total span {
margin-left: 0; /* 文字の頭を記事のタイトルの左端にそろえる */
padding-left: 0;
}
.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;
color: inherit;
text-decoration: none;
}
.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）
・中身のない広告の箱は出さない
・① 見出し・スライダーの下（.container03-1 の直下）／② ナビの下（.news の中の最後）
・広告が入ったとき（AdSense が ins に付ける data-ad-status が unfilled 以外）だけ、一覧の上の広告の上下を 25px にそろえる
（"filled" のほか、代わりの広告で埋まった "unfill-optimized" もある）
・記事ページはアイキャッチのすぐ下に置き、上を 5px にする
===================================================================== */
.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件目
・V15.5：下を 15px → 40px（写真付きの一覧は1件目の内側の余白がないので、15px だと一覧の始まりと近すぎた）2026-10-30
・※「0. 土台」の .googlead の余白は、トップ・一覧のページではこの指定で上書きされる */
.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→ 広告（ほかの場所と同じ。前は 5px で写真とくっついて見えた V15.9 2026-11-01） */
.container03--single .single-eyecatch + .googlead:has(ins.adsbygoogle[data-ad-status]:not([data-ad-status="unfilled"])) {
margin-top: 25px;
}
/* =====================================================================
7. 一覧（CD の説明風。トップ front-page.php・記事一覧 index.php 共通。inc/postlist-disc.php の .postlist02--disc）V15.4 2026-10-29
・左：ジャケット（アイキャッチを正方形に）。マウスオンで写真がカラーに
・右：タイトル → クレジット（RELEASE・CATEGORIES・TAGS・RATING）
・クレジットは「RELEASE : 2021.11.4」の形。Montserrat・10.8px。見出しは 700（メニューと同じ）・中身は 400
・PC：ジャケット 160px／スマホ（479px以下）：100px
・前のスライダー（Swiper）はやめた。後ろから CD がのぞく案も試したが、シンプルにするためやめた
===================================================================== */
.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);
}
.container03--disc .postlist02-jacket__img {
width: 100%;
height: 100%;
margin: 0;
background: #e6e6e6;
}
.container03--disc .postlist02-jacket__img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
margin: 0; /* 「0. 土台」の .news img（下10px）を打ち消す */
}
/* マウスオンで、半透明の白い面が左から右へジャケットを覆い、上下左右の中央に「ヘッドホン PREVIEW」（CD 屋の試聴の札。実際は記事の試読）
・ローダーのドットに合わせて左右の動き
・入るとき：面も文字も左から右へ（@keyframes。白い面 0.4秒・文字は 0.25秒遅れて）
・外れたとき：面も文字もそのまま右へ抜ける（transition）
→ ふだんの状態を「右に畳んだ形」にしておき、マウスオンのときだけ左から出すアニメーションをかけている
・行き過ぎて戻る動きはなし（わざとらしくなるので）
・面は2枚：先に黒に近いグレーの面（.postlist02-jacket::after・0.7秒）が左から入り、0.1秒遅れて白い面が追いかける
グレーの面はそのまま右へ抜けて消える（白い面を透かして写真を見せるため。残すと白い面の下がグレーになる）
・外れるときは白い面だけが右へ抜ける
（clip-path の動きはマウスを乗せた1件だけなので重くならない）
・写真のほか、タイトル（のリンク）にマウスを乗せても出る（:has。写真とタイトルのリンク先は同じ記事）
・マウスのない端末（スマホなど）では出さない */
.container03--disc .postlist02-jacket {
position: relative;
overflow: hidden;
}
/* 1枚目：黒に近いグレーの面（文字と同じ #3c3c3b・透過なし）。白い面の下 */
.container03--disc .postlist02-jacket::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: #3c3c3b;
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); /* 少し透かして、写真がうっすら見えるように */
/* 白い面の枠線はなし（1px のトンボと同じ色の枠も試した）V15.5 */
color: #3c3c3b;
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); /* 外れたときの速さ（0.6秒も試した） */
pointer-events: none;
}
.container03--disc .postlist02-jacket__preview-text {
display: inline-flex;
align-items: center;
gap: 0.5em;
opacity: 0;
transform: translateX(12px); /* 外れたときは右へ */
transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s;
}
.container03--disc .postlist02-jacket__preview i {
font-size: 1.05em; /* ヘッドホン（Font Awesome の fa-headphones） */
}
@keyframes nrocks-preview-in { /* 面：左の端から右へ広がる */
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes nrocks-preview-sweep { /* グレーの面：左から入って、右へ抜ける */
0% { clip-path: inset(0 100% 0 0); }
55% { clip-path: inset(0 0 0 0); }
100% { clip-path: inset(0 0 0 100%); }
}
@keyframes nrocks-preview-text-in { /* 文字：左から右へ */
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
/* V15.5：小さいジャケット（一覧）のマウスオン（2枚の面＋ヘッドホン PREVIEW）はやめた。写真がカラーになるのだけ残す
・トップの大きい1件は、下の「大きい1件」の指定で同じ動き（マウスオン・自動スライド）をしている
・戻すときは、この下のコメントを外す（中の【】は元のコメント。CSS のコメントの記号に戻す）
@media (hover: hover) {
【 1枚目のグレーの面が先に入って、そのまま右へ抜ける 】
.container03--disc .postlist02-jacket:hover::after,
.container03--disc .postlist02--disc:has(.postlist02-title a:hover) .postlist02-jacket::after {
animation: nrocks-preview-sweep .7s cubic-bezier(.65, 0, .35, 1);
}
【 2枚目の白い面が 0.1秒遅れて追いかける 】
.container03--disc .postlist02-jacket:hover .postlist02-jacket__preview,
.container03--disc .postlist02--disc:has(.postlist02-title a:hover) .postlist02-jacket__preview {
clip-path: inset(0 0 0 0);
animation: nrocks-preview-in .4s cubic-bezier(.65, 0, .35, 1) .1s backwards; 【 入るときの速さ（0.6秒も試した） 】
}
.container03--disc .postlist02-jacket:hover .postlist02-jacket__preview-text,
.container03--disc .postlist02--disc:has(.postlist02-title a:hover) .postlist02-jacket__preview-text {
opacity: 1;
transform: translateX(0);
animation: nrocks-preview-text-in .4s cubic-bezier(.2, .7, .3, 1) .25s backwards; 【 白い面に合わせて 0.25秒遅れて 】
}
}
（ここまで、小さいジャケットのマウスオン）*/
@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__preview-text,
.container03--disc .postlist02-jacket::after {
transition: none !important;
animation: none !important;
}
}
/* 文字の側にマウスを乗せても写真をカラーに（「0. 土台」の .post__thumb--img:hover と同じ） */
.container03--disc .postlist02--disc:hover .post__thumb--img {
filter: none;
-webkit-filter: grayscale(0%);
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; /* 記事ページのタイトル（.single-title）と同じ */
font-weight: 700;
line-height: 1.45;
}
@media (max-width: 479px) {
.container03--disc .postlist02-title {
margin-bottom: 6px;
}
}
/* クレジット：CD の裏の表記のように。Montserrat・10.8px・字間 0（ヘッダーのメニュー「0. 土台」の .header-menu__list と同じ大きさ） */
.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; /* 行間（1.9 も試した） */
padding-left: 10px; /* 左の縦の線 〜 文字 */
border-left: 1px solid var(--trim-mark-color); /* クレジットだけに縦の線（タイトルは線の外）。色はトンボの線と同じ */
}
/* 1行に「RELEASE : 2021.11.4」と続けて書く（見出しの幅をそろえない）
・見出し（dt）は 700、中身（dd）は 400 */
.container03--disc .postlist02-credits > div {
display: block;
}
.container03--disc .postlist02-credits dt,
.container03--disc .postlist02-credits dd {
display: inline;
margin: 0;
}
.container03--disc .postlist02-credits dt {
font-weight: 700;
}
.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: #3c3c3b;
cursor: default;
}
/* スマホ：TAGS は省略（星の行は残す） */
@media (max-width: 479px) {
.container03--disc .postlist02-credits > .postlist02-credits__tags {
display: none;
}
}
/* 大きい1件（トップの1ページ目の最新記事・NEW RELEASE）V15.5 2026-10-29
・写真を列の幅いっぱい（4:3）。写真の上（写真の外）に「NEW RELEASE」
・1ページ目の上の広告は、この1件の下（front-page.php の .nrocks-ad-mid）
・マウスオン（1件のどこでも）：黒い面 → 白い面が流れて、白い面の上にタイトル・クレジットが出る
→ 写真の明るさに関係なく文字が読める。CD のジャケットを表から裏に返すイメージ
・ヘッドホン PREVIEW は出さない
・マウスのない端末（スマホなど）：重ねずに、写真の下にタイトル・クレジット（一覧と同じ） */
.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-jacket__preview-text {
display: none; /* ヘッドホン PREVIEW は出さない */
}
.container03--disc .postlist02--feature .postlist02-title {
margin: 0 0 8px;
}
/* 「NEW RELEASE」：写真の上（写真の外）。見出し LATEST POSTS（24px）より小さい 13.2px・700
・写真の上に重ねる形（白い帯・白い文字）も試したが、写真の明るさで読みにくくなるのでやめた */
.container03--disc .postlist02-feature-badge {
margin: 0 0 8px;
font-family: 'Montserrat', sans-serif;
font-size: 13.2px;
font-weight: 700;
letter-spacing: -0.3px;
line-height: 1.2;
}
/* 大きい1件の下の広告（1ページ目の上の広告）：写真の下 →28px→ 広告 →44px→ 2件目
・大きい1件の下の余白（56px）を、広告の上の負の余白で 28px に詰める（広告が空で隠れたときは 56px のまま）
・:has の中に :has は書けないので、この形にしている */
.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; /* 広告が入ったときの指定（6. の上下 25px）より優先 */
}
.container03--front .news > .googlead.nrocks-ad-mid:not(:has(*)) {
display: none;
}
/* 大きい1件の動き（マウスオン・自動スライド・戻るときの共通）V15.7 2026-10-30
・入るとき：黒い画面が左から走り、そのすぐ後ろをカラーバーが追って写真を覆う → 全面カラーバーで少し止まる → カード（白い面＋文字）が左から滑って入る
・戻るとき：カードが右へ滑って抜ける → 全面カラーバーで少し止まる → カラーバーが右へ抜け、そのすぐ後ろを黒が追って抜けて写真に戻る
（入りと戻りは鏡写し：写真 → 黒 → カラーバー → カード ／ カード → カラーバー → 黒 → 写真）
・カードが動いている間、カラーバーの端はカードの端にぴったり付いて動く（カードの下にカラーバーが透けないように）
→ 入りと戻りで、カラーバーの見える幅・時間が同じになる（前は入り 最大62%／戻り 最大86% の帯で、幅が違っていた）
・ここの数字を変えれば、マウスオンと自動スライドの両方が変わる
・時間を変えたら、js/feature-auto.js の LEAVE（カード＋止める＋カラーバーが抜ける＋黒が抜ける＋少し）も合わせる
・V15.6 まで：入り 黒い面 0.7秒＋白い面 0.4秒（0.1秒遅れ）／戻り 透ける白 → 灰色 → 黒（--feature-out-* の変数）。
覆いきったところで一度止まってから抜ける2段の動きが「カクッ」と見えたので、全面で止める形にした */
.container03--disc .postlist02--feature {
--feature-bars-wipe: .25s; /* ★ カラーバーが写真を覆う時間・抜ける時間（.5s・.35s は遅かった。.3s も試したが、カラーバーは一瞬のほうがいい） */
--feature-bars-hold: .02s; /* ★ 全面カラーバーで止める時間（.15s・.1s は遅かった。.08s も試した） */
--feature-card: .3s; /* ★ カード（白い面＋文字）が滑る時間（.6s・.45s は遅かった。.36s も試した） */
--feature-flash: .2s; /* ★ カラーバーの前を走る黒い画面が覆う・抜ける時間 V15.7（カラーバーと同じにすると、黒が帯で追われる形になる。速くすると黒がすぐ全面に広がる） */
--feature-flash-gap: .1s; /* ★ 黒からカラーバーが遅れる時間（大きくするほど黒い帯が太くなり、全面に近づく。前は全面の黒のあとにカラーバー＝.15s） */
--feature-flash-color: #3c3c3b; /* ★ その黒い画面の色（文字と同じ黒に近いグレー。赤系にするなら var(--feature-black)） */
--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); /* ★ カラーバーの速さの変化（前の .65,0,.35,1 より穏やか） */
--feature-ease-card: cubic-bezier(.45, 0, .25, 1); /* ★ カードの速さの変化 */
--feature-photo: .6s; /* ★ V15.8：次の写真が左から滑って重なる時間（js/feature-auto.js も読む。カードと同じ .3s は速くてカクついた） */
--feature-ease-photo: cubic-bezier(.16, 1, .3, 1); /* ★ 次の写真の速さの変化：すっと入って、最後をゆっくり止める（ヌルッと止まる）。カードと同じ動きに戻すなら var(--feature-ease-card) */
/* 大きい1件の面の色（一覧の小さいジャケットの色とは別）2026-10-30 */
--feature-black: #a61a3a; /* ★ 1色の面にするときの色（前は #3c3c3b） */
/* ★ V15.6：1色の面の代わりに通す、くすませたテレビのカラーバー（SMPTE カラーバーの7色・左から 灰 黄 シアン 緑 マゼンタ 赤 青）2026-10-30
・1色の面に戻すなら、下の .postlist02-jacket::after の background を var(--feature-black) にする */
--feature-bars: linear-gradient(to right,
#bfbfbf 0 14.29%, /* 左端の灰（#464953 も試したが、明るい灰のほうがよかった） */
#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) {
/* 紙芝居のように「白地に文字が書かれた1枚のカード」が横に滑って入り、滑って出ていく（V15.5 2026-10-30）
・カード＝白い面（.postlist02-jacket__preview）＋タイトル・クレジット（.postlist02-content の中身）
2つは別の要素だが、同じ距離・同じ時間・同じタイミングで横に動かすので、1枚に見える
・動かす距離は写真の幅（100cqw。写真と文字の箱をコンテナにして、その幅を基準にする）
・文字の箱は写真と同じ位置・大きさ（NEW RELEASE の行の下・4:3）で、はみ出した所は見せない（overflow: hidden）
・前は切り抜き（clip-path）で現れる形だったので、白地も文字もその場から動かず、カードが滑る感じにならなかった */
.container03--disc .postlist02--feature .postlist02-jacket {
container-type: inline-size;
}
.container03--disc .postlist02--feature .postlist02-content {
position: absolute;
top: 0; /* 写真の上の端（V15.8：写真の上の見出しをやめた。前は NEW RELEASE の行 13.2px × 1.2 ＋ 間 8px） */
left: 0;
right: 0;
aspect-ratio: 4 / 3; /* 写真と同じ大きさ */
z-index: 2; /* 白い面と同じ（HTML で白い面より後ろにあるので上に出る）。戻るときの透ける白（3）は文字の上を通る */
display: flex;
flex-direction: column;
justify-content: flex-start; /* 文字（タイトル＋クレジット）は左上に寄せる（前は flex-end で左下）V15.7 */
padding: 16px 0; /* 上下 16px。左右の余白は中の文字に付ける（箱に付けると、動く距離 100cqw が写真の幅より 40px 短くなる） */
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); /* 戻るとき：白い面と同じ */
}
/* 黒い画面（.postlist02-jacket::before）：カラーバーの下（同じ z-index で、HTML の順で ::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;
}
/* カラーバーの面（.postlist02-jacket::after。ふだんは畳んで見えない） */
.container03--disc .postlist02--feature .postlist02-jacket::after {
background: var(--feature-bars); /* V15.6：カラーバー（1色に戻すなら var(--feature-black)） */
}
.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); /* 戻るとき：右へ滑って抜ける（入るときは @keyframes が動かす） */
}
/* 入るとき（マウスオン :hover・自動スライド .is-auto の共通）
・文字の上にマウスがあっても（写真の上に重なっているので）面を出すため、:hover は 1件全体（.postlist02--feature）で見る
・黒い画面：⓪ 左から走る（カラーバーが --feature-flash-gap 遅れて追う）→ カラーバーが覆いきったら（下に隠れているので）消す
・カラーバーは2つの動きを続けて付ける：① 黒の上を左から覆う → （止める）→ ② 左の端がカードの右の端に付いて右へ畳まれる */
.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;
}
/* 写真をカラーに（:hover のときは「文字の側にマウスを乗せても写真をカラーに」の指定が効く） */
.container03--disc .postlist02--feature.is-auto .post__thumb--img {
filter: none;
-webkit-filter: grayscale(0%);
transition: 1.5s;
}
/* 戻るとき（js/feature-auto.js が戻るときだけ .is-leaving を付ける。マウスを外したとき・自動で戻るときの共通）
・カードは上の transition で右へ抜ける。その間、カラーバーの右の端がカードの左の端に付いて広がる（③）
→ 全面カラーバーで止める → 左から右へ抜ける（④）→ すぐ後ろを黒が追って抜けて写真に戻る（⑤）
・入るときと同じ @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;
}
/* 戻るときの黒い画面：カラーバーが抜け始めるときに（その下に）全面で出しておき、--feature-flash-gap 遅れてカラーバーを追って右へ抜ける */
.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 { /* カード：写真の左の外から滑って入る（100cqw＝写真の幅） */
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%); }
}
/* V15.8：スライダーの写真の入れ替え（js/feature-auto.js）
・カードが抜けてカラーバーが抜けきったら、すぐに次の写真が左から滑って今の写真の上に重なる（カードの入り方と同じ動き・同じ速さの変化）
写真は黒い画面（.postlist02-jacket::before）の下なので、抜けていく黒の後ろを追いかける形になる
・入ってくる写真に .is-incoming を付けて重ね、滑り終わったら JS が下の写真を外す
・写真の箱（figure）は、ジャケット（overflow: hidden）の中で重ねる基準にする
・試してやめた形：写真 → 白 → カラーバー → 次の写真 と一瞬ずつ切り替える 2026-10-30 */
.container03--disc .postlist02--feature .postlist02-jacket__img {
position: relative;
}
/* 写真の箱（.postlist02-photo）：写真＋左下のラベル。入れ替えのときは、この箱ごと滑らせる */
.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）V15.8：写真の上の見出し（NEW RELEASE・CHART）の代わり
・写真と同じ箱の中なので、写真と一緒に入れ替わる。カード（白い面）が出ているときは、その下に隠れる */
.container03--disc .postlist02--feature .postlist02-photo__label {
position: absolute;
left: 20px; /* カードの文字（タイトル・クレジット）と同じ左の位置（.postlist02-content > * の margin-left 20px） */
bottom: 16px; /* カードのクレジットと同じ下の位置（.postlist02-content の padding 下 16px） */
padding: 0;
background: none; /* 地なし（白い箱は目立ちすぎたのでやめた 2026-10-30） */
color: #3c3c3b; /* ★ 文字の色（文字と同じ黒に近いグレー。目立たせない。白文字にするなら #fff） */
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); }
}
/* スライダーの間隔（最初・写真を見せる時間・カードを見せる時間・写真が滑り始めるまで）は js/feature-auto.js の FIRST・PHOTO・CARD・HOLD（V15.8）
スライダーの ON／OFF は js/feature-auto.js の AUTO（V15.8 で true）。回す件数は functions.php の NROCKS_FEATURE_SLIDES */
@media (hover: none) {
/* スマホなど：写真の下に文字 */
.container03--disc .postlist02--feature .postlist02-content {
margin-top: 14px;
}
}
/* V15.8：スマホなど（マウスのない端末）でもスライダーを動かす 2026-10-30
・上の @media (hover: hover) のカード・黒・カラーバーの指定を、JS が付ける .is-slider のときだけ同じように効かせる
（マウスオン :hover の指定は外してある。中身は上と同じなので、上を変えたらここも合わせる）
・.is-slider は js/feature-auto.js がスライダーを動かすときに付ける。JS が動かない・動きを減らす設定の端末では付かないので、
今まで通り「写真の下にタイトル・クレジット」の形のまま
・小さいジャケットの「スマホでは白い面・黒い面を出さない」指定（display: none）を、大きい1件だけ打ち消す */
@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;
-webkit-filter: grayscale(0%);
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; /* 写真の下に文字を置くときの 14px を打ち消す（カードは写真に重ねる） */
}
}
@media (prefers-reduced-motion: reduce) {
.container03--disc .postlist02--feature .postlist02-content {
transition: none;
animation: none !important;
}
}
/* トンボの線：文字の頭ではなく、ジャケットの左上（1件目）と最後のジャケットの右下に。トップは大きい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件：線は NEW RELEASE ではなく写真の上の端に（NEW RELEASE の行の高さ 13.2px × 1.2 ＋ 間 8px） */
.container03--disc .postlist02--feature:first-of-type::before {
top: 0; /* V15.8：写真の上の見出しをやめたので写真の上の端＝1件の上の端（前は 13.2px × 1.2 ＋ 8px） */
}
/* トップ：大きい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 .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;
}
/* 本文：アイキャッチ・広告・本文をひとかたまりに（広告あり：広告 →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 */
}
.container03--single .notice-row .type-D--notices {
margin: 0;
}
.container03--single .notice-row .type-J {
margin: 0;
padding: 0;
list-style: none;
}
.container03--single .notice-row .type-J li {
margin: 0;
padding: 0;
}
/* 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 .type-D--share {
margin: 0;
}
.container03--single .share-row .sharebtn--text {
margin: 0;
padding: 0;
}
.container03--single .sharebtn--text {
padding-top: 0;
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; /* inline-block だと改行のぶんの空白が足されるので flex で 1.2em だけにする */
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 {
font-family: inherit;
text-decoration: none;
}
.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: #bcbcbc;
}
.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: #bcbcbc;
}
.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 と同じ箱＋紙飛行機
・色：文字 #3c3c3b／マウスオン #bdc3c7（サイト共通） */
.container03--single .comments {
margin-top: 40px;
color: #3c3c3b;
}
.container03--single .comments__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 1.2em;
}
.container03--single .comments__head .type-D {
margin: 0;
}
.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: #bcbcbc;
}
.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: #bdc3c7;
}
/* ページ送り */
.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: #bcbcbc;
}
/* 入力フォーム：一覧 →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: #bdc3c7;
}
.container03--single .comments__form {
margin: 0;
}
.container03--single .comments__form p {
margin: 0;
}
.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 #000;
border-radius: 0;
background: transparent;
color: #3c3c3b;
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: #eeeeee;
color: #3c3c3b;
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: #bdc3c7;
}
/* =====================================================================
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 {
color: inherit;
text-decoration: none;
}
.container03--page .page-contact a:hover {
color: #bdc3c7;
}
/* CONTACT のフォーム（Contact Form 7）
・項目名：ヘッダーのメニューと同じ書式／入力欄：列の幅いっぱい・下線だけ・本文と同じ 12px
・送信ボタン：#eeeeee の箱 ＋ 紙飛行機のアイコン。マウスオン・送信中はグレー
・エラーは薄いグレーの文字だけ（赤や色付きの枠にしない） */
.container03--contact .news > .content:first-child {
padding-top: 45px; /* 見出し 〜 NAME* ＝ 40px */
}
.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;
padding: 8px 0; /* 左右 0：入力した文字の頭を項目名にそろえる */
border: 0;
border-bottom: 1px solid #000;
border-radius: 0;
background: transparent;
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;
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;
}
/* 送信ボタンの箱と紙飛行機（アイコンは li の ::before。クリックは下のボタンに通す） */
.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;
}
.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;
}
/* 送信中の「くるくる」は出さず、SEND EMAIL の文字をグレーにする */
.container03--contact .content .wpcf7 .wpcf7-spinner {
display: none;
}
.container03--contact .content .wpcf7 form.submitting .wpcf7-submit {
color: #bdc3c7;
cursor: default;
}
/* 欄ごとのエラー：下線のすぐ下に左揃え・薄いグレー */
.container03--contact .content .wpcf7 .wpcf7-not-valid-tip {
position: static;
display: block;
width: auto;
margin-top: 4px;
color: #bcbcbc;
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: #3c3c3b;
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: #bcbcbc;
}
/* =====================================================================
10. CATEGORIES・ARCHIVES・TAGS の一覧（page-categories.php など。.container03--index）
・見出し 〜 一覧 ＝ 40px／最後の行 〜 フッター ＝ 80px
・一覧全体を「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;
}
@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 {
color: inherit;
text-decoration: none;
}
.container03--items .items-shops a + a {
margin-left: 1.2em;
}
.container03--items .items-shops a:hover {
color: #bdc3c7;
}
.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;
}
/* =====================================================================
ログイン中の広告の代わり（HIDE ADS FOR ADMIN01／02）を、広告と同じくらいの大きさの箱にする V15.9 2026-11-01
・自分しか見ない。広告の位置と大きさを、ログインしたまま確かめるため
・PHP は触らず、今ある p.type-x:has(> .fa-ban)（🚫アイコンを含む p ＝ HIDE ADS FOR ADMIN だけ）を箱にする
（div で囲むと「.news > .type-x」などの余白が効かなくなるため）
・枠は点線、中に枠と同じ色の × の線（背景のグラデーション。箱の大きさが変わっても角から角へ）
・文字の後ろだけ地色の帯を重ねて × の線を隠す（背景の1枚目＝一番上）
・余白は「広告が入ったとき」（6. 広告 の data-ad-status の指定）と同じ数字にそろえる
・★ の高さは仮。広告が出たら ins.adsbygoogle の height に合わせる
===================================================================== */
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）。大きい広告は使わないので 200px（2026-11-01） */
margin: 15px 0; /* .googlead の土台と同じ */
border: 1px dashed #bcbcbc;
color: #8a8a8a; /* 地色の上で読める濃さ（ふだんの #bcbcbc だと線と同じ色になる） */
background-color: #eeeeee;
background-image:
linear-gradient(#eeeeee, #eeeeee),
linear-gradient(to top right, transparent calc(50% - 0.5px), #bcbcbc calc(50% - 0.5px), #bcbcbc calc(50% + 0.5px), transparent calc(50% + 0.5px)),
linear-gradient(to bottom right, transparent calc(50% - 0.5px), #bcbcbc calc(50% - 0.5px), #bcbcbc 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;
}
/* スマホ（テーマの切り替え幅 767px） */
@media (max-width: 767px) {
p.type-x:has(> .fa-ban) {
min-height: 200px; /* ★ 広告の高さ（スマホ）。PC と同じ 200px */
}
}