に付く。今後の追加CSSは「body.クラス名」禁止・「.クラス名」で書くこと・意図的な見た目変更は「フォント一段縮小」のみ。それ以外は現状と1pxも変わらないことが成功条件 ============================================================ */ /* ===== フォント読み込み（v2・4書体） ===== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Shippori+Mincho+B1:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@300;400;500&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap'); /* 手書き風フォント（Klee One）：採用確定済み・未使用のため休眠中。 .yb-font-hand を実際に使い始める時に、下の1行のコメントを外す（外すまでは端末の標準フォントで代替表示される） */ /* @import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap'); */ /* ============================================================ ===== 整理回：全体フォント一段縮小（メモ⑤・第二候補） ===== ・SWELLカスタマイザーは既に「小(15px)」＝設定側はこれ以上下げられないため、CSSでroot縮小（16px→15px＝約6%減）・v2部品はほぼ全てrem/em基準のため、この1行で見出し・ラベル・額・余白まで比例縮小される。本文はカスタマイザーの15px 指定（px固定）のため据え置き＝v2装飾だけが一段馴染む・縮小をやめたい時はこの1行を削除するだけで元に戻る ============================================================ */ html{font-size:15px} /* --- 縮小後の個別微調整（小さくなりすぎたラベルの持ち上げ用） --- まず全ページを15pxのまま確認し、読みにくい行だけ下から選んでコメント（先頭の斜線と星）を外して有効化する。＋0.02〜0.06rem目安。 .yb-k{font-size:.82rem} .yb-room-head .yb-room-no{font-size:.84rem} .yb-hero-eyebrow{font-size:.84rem} .yb-feature-caption{font-size:.82rem} .yb-hg-cap{font-size:.82rem} .yb-hg-hint{font-size:.78rem} .yb-ig-tile .tag{font-size:.76rem} .yb-colophon-text{font-size:.78rem} .yb-roomnow{font-size:.76rem} .yb-ver{font-size:.82rem} :is(.yb-masonry, .blog, .archive) :is(.p-postList__meta, .p-postList__data, .c-postTimes, .p-postList__times){font-size:.8rem} */ /* ============================================================ ===== デザイントークン（v2・美術館コンセプト） ===== 旧v1互換エイリアス層（--yb-bg／--yb-accent／--yb-font-serif等）は整理回で撤去済み。旧変数名は今後使用禁止 ============================================================ */ :root{ /* --- 壁の色（部屋ごとの背景。切替は第9回のJSで動く） --- */ --yb-wall-entrance:#FAF9F5; /* 入口：わずかに温かい白壁 */ --yb-wall-warm:#F3EEE4; /* 常設展：生成りの壁 */ --yb-wall-sage:#EAECE5; /* 静かな部屋：灰緑がかった壁 */ --yb-wall-night:#1E1C19; /* 夜の回廊：墨色 */ --yb-wall-shu:#D8341F; /* 赤の部屋：一室まるごと朱 */ /* --- インクの色 --- */ --yb-ink:#26241F; /* 本文の墨 */ --yb-ink-soft:#6E6A5F; /* 補足・キャプション */ --yb-ink-faint:#94907F; /* さらに薄い注記 */ --yb-paper:#FBFAF7; /* カード・額装の紙面 */ --yb-line:rgba(38,36,31,.16); /* 罫線（半透明。どの壁色でも自然） */ --yb-line-on-dark:rgba(248,246,240,.22); /* 夜の部屋用の罫線 */ --yb-text-on-dark:#F0EDE5; /* 夜の部屋用の文字色 */ /* --- 差し色は一点物：校正の朱（赤ペン） --- */ --yb-shu:#E0331C; --yb-shu-soft:rgba(224,51,28,.1); /* --- 付箋 --- */ --yb-fusen:#F5E9B8; /* --- 書体 --- */ --yb-font-display:'Fraunces','Times New Roman',serif; /* 主役の英字 */ --yb-font-mincho:'Shippori Mincho','Hiragino Mincho ProN',serif; /* 日本語見出し */ --yb-font-gothic:'Zen Kaku Gothic New','Hiragino Sans',sans-serif; /* 本文 */ --yb-font-mono:'IBM Plex Mono','Courier New',monospace; /* 等幅英字：ROOM番号・日付・版数 */ --yb-font-hand:'Klee One',cursive; /* 手書き風（休眠中・@import参照） */ /* --- 余白スケール（展示のための大きな余白・7段） --- */ --yb-sp-1:.5rem; /* 8px相当 */ --yb-sp-2:1rem; /* 16px相当 */ --yb-sp-3:1.75rem; /* 28px相当 */ --yb-sp-4:3rem; /* 48px相当 */ --yb-sp-5:5rem; /* 80px相当 */ --yb-sp-6:8rem; /* 128px相当 */ --yb-sp-7:12rem; /* 192px相当 */ /* --- 角丸 --- */ --yb-radius:3px; --yb-radius-fusen:2px 10px 3px 8px; /* 付箋の不揃いな角 */ /* --- 動き --- */ --yb-dur-quick:.35s; /* ホバー等の速い動き */ --yb-dur-slow:1s; /* 出現フェード */ --yb-dur-room:1.4s; /* 壁色が移ろう速さ */ --yb-ease:cubic-bezier(.22,1,.36,1); /* 余韻のあるカーブ */ } /* ============================================================ ===== 基礎（旧v1第1回の現役分をv2トークンで再定義：メモ①-2） ===== v2第1回のbody指定と統合済み。ここが全ページの土台 ============================================================ */ body{ background:var(--yb-wall-entrance); /* 旧var(--yb-bg)。エイリアス撤去に伴う1点修正 */ color:var(--yb-ink); font-family:var(--yb-font-gothic); /* 本文ゴシック（旧v1第1回から引き継ぎ） */ line-height:1.9; /* 行間広め＝「余白」の読み心地 */ letter-spacing:.04em; -webkit-font-smoothing:antialiased; /* 文字の縁を滑らかに描画 */ transition:background-color var(--yb-dur-room) var(--yb-ease); /* 第9回：壁色の移ろい */ } .post_content{ line-height:2; /* 記事本文の行間。読みにくければ1.9〜1.8へ */ } /* 見出しは明朝に統一（トップ以外の全ページの見出し土台） */ h1, h2, h3, h4, h5, h6{ font-family:var(--yb-font-mincho); font-weight:500; letter-spacing:.06em; color:var(--yb-ink); } /* 記事本文内のリンク：文字は墨色のまま、下線だけ朱（ホバーで文字ごと朱に。「点で使う」設計の実装） */ .post_content a{ color:var(--yb-ink); text-decoration:underline; text-decoration-color:var(--yb-shu); text-decoration-thickness:1px; text-underline-offset:0.25em; /* 下線を文字から少し離して上品に */ transition:color 0.3s var(--yb-ease); } .post_content a:hover{ color:var(--yb-shu); } /* テキスト選択で朱に染まる */ ::selection{ background:var(--yb-shu-soft); color:var(--yb-shu); } /* 紙の質感：ごく薄い粒子を全画面に（画像ファイル不要のSVG埋め込み。 pointer-events:none なのでクリック等の邪魔は一切しない） */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.045; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 「視差効果を減らす」OS設定の包括的な尊重：全アニメを一括停止する安全網 */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto !important} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ============================================================ ===== 【削除禁止】画像の上に重ねる文字を白で読ませる部品 ===== （v1由来・温存指定。使い方：カバーブロック等の追加CSSクラスに yb-on-image。画像下側に薄い黒グラデが敷かれ文字は常に白） ===== ============================================================ */ .yb-on-image { position: relative; } .yb-on-image::before { content: ""; position: absolute; inset: 0; /* 上下左右0＝要素全体を覆う */ background: linear-gradient( to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 75% ); pointer-events: none; /* グラデーションがクリックを邪魔しない */ z-index: 1; } .yb-on-image > * { position: relative; z-index: 2; /* 文字をグラデーションより手前に */ } .yb-on-image, .yb-on-image * { color: #FFFFFF; } .yb-on-image :is(h1, h2, h3, p) { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); /* 保険の薄い影。明るい画像でも読める */ } /* ============================================================ ===== 【削除禁止】スクロール出現アニメーション .yb-reveal ===== （v1第7回・温存指定。メモ①-4）・WPCode「v1 スクロール出現」JSスニペットとワンセットで動く・注意：v1・v2両スニペットが同じ目印 html.yb-js を付ける設計。 v1スニペットだけを誤ってOFF/削除すると、yb-js自体はv2側が付け続けるため .yb-reveal 要素が「透明のまま固まる」事故になる・→ このCSSブロックも、WPCodeのv1スニペットも、絶対に消さない ============================================================ */ /* JSが動いた印（html.yb-js）がある時だけ、初期状態で隠す */ html.yb-js .yb-reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--yb-ease), transform 1.2s var(--yb-ease); } /* 画面に入ったらJSがこのクラスを付け、表示される */ html.yb-js .yb-reveal.yb-is-visible { opacity: 1; transform: translateY(0); } /* 視差効果軽減を設定している人にはアニメなしで即表示（CSS側の保険） */ @media (prefers-reduced-motion: reduce) { html.yb-js .yb-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ ===== 汎用部品（旧v1第8回をv2トークンで再定義） ===== 縦書き（.yb-vertical）／手書き風（.yb-font-hand）／明朝本文（.yb-font-serif-body）。見た目は旧版と同一 ============================================================ */ /* 付けたブロック内の文章が縦書きになる（右から左へ行が進む日本語組み） */ .yb-vertical { writing-mode: vertical-rl; /* 縦書き指定 */ text-orientation: mixed; /* 英数字は寝かせる自然な組み方 */ height: 18em; /* 縦書きは「高さ」が行の長さになる。長文なら数字を増やす */ margin-left: auto; margin-right: auto; /* 中央寄せ */ line-height: 2.2; /* 行間（縦書きでは行と行の左右間隔）。ゆったりめ */ letter-spacing: 0.12em; /* 字間を広めに取ると静かな印象に */ font-family: var(--yb-font-mincho); /* 縦書きは明朝が基本。不要ならこの行を削除 */ } /* 縦書きブロック内の段落同士の間隔を整える */ .yb-vertical p { margin: 0 0 0 var(--yb-sp-3); /* 縦書きでは段落の間隔が「左方向」に付く */ } .yb-vertical p:last-child { margin-left: 0; } /* スマホ（横幅が狭い画面）では自動で横書きに戻す安全設計 */ @media (max-width: 767px) { .yb-vertical { writing-mode: horizontal-tb; /* 通常の横書きに戻す */ height: auto; line-height: 2; letter-spacing: 0.06em; } .yb-vertical p { margin: 0 0 var(--yb-sp-2) 0; } } /* スマホでも縦書きを維持したい特別な場面用（短い言葉限定で使う） */ @media (max-width: 767px) { .yb-vertical.yb-vertical--keep { writing-mode: vertical-rl; height: 14em; /* スマホでは少し短めに */ } } /* 手書き風（Klee One採用確定）：グループに付けると中の文章すべてに効く。使用開始時はファイル冒頭のKlee One @importのコメントを外すこと */ .yb-font-hand, .yb-font-hand p, .yb-font-hand li { font-family: var(--yb-font-hand); } /* 見出しも手書きにしたい時は、下のコメントアウトを外す */ /* .yb-font-hand h2, .yb-font-hand h3 { font-family: var(--yb-font-hand); } */ /* 本文ごと明朝にする特別セクション */ .yb-font-serif-body, .yb-font-serif-body p, .yb-font-serif-body li { font-family: var(--yb-font-mincho); line-height: 2.1; /* 明朝本文は行間広めが読みやすい */ } /* ============================================================ ===== v2-第2回：基本部品 ===== 順路見出し（.yb-room-head）／下線ボタン（.yb-btn-line） ============================================================ */ /* ------------------------------------------------------------ 順路見出し：ブロックエディタでの組み方は手順書参照。グループ(.yb-room-head)の中に段落(.yb-room-no)→見出しH2(.yb-room-title)→ 段落(.yb-room-en)→段落(.yb-room-lede) を置く構造 ------------------------------------------------------------ */ .yb-room-head{ margin-bottom:var(--yb-sp-5); } /* ROOM番号：等幅英字＋右に短い罫線 */ .yb-room-head .yb-room-no{ font-family:var(--yb-font-mono); font-size:.8rem; letter-spacing:.32em; color:var(--yb-ink-faint); text-transform:uppercase; /* 小文字で入力しても大文字表示に */ display:flex; align-items:center; gap:1rem; margin:0; } .yb-room-head .yb-room-no::after{ content:""; flex:0 0 56px; height:1px; background:var(--yb-line); } /* 日本語見出し：SWELLの見出し装飾（下線・背景等）を打ち消して明朝に */ .yb-room-head .yb-room-title{ font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.6rem,3.4vw,2.4rem); /* 画面幅に応じて1.6〜2.4remで伸縮 */ letter-spacing:.14em; line-height:1.6; color:var(--yb-ink); margin:var(--yb-sp-2) 0 0; padding:0; border:none; background:none; } .yb-room-head .yb-room-title::before, .yb-room-head .yb-room-title::after{ content:none; /* SWELL見出しデザインの飾り要素も念のため停止 */ } /* 英字副題：Fraunces（主役書体） */ .yb-room-head .yb-room-en{ font-family:var(--yb-font-display); font-weight:300; font-style:italic; font-size:clamp(1rem,2vw,1.45rem); letter-spacing:.05em; color:var(--yb-ink-soft); margin:.35rem 0 0; } /* 説明文 */ .yb-room-head .yb-room-lede{ margin:var(--yb-sp-3) 0 0; max-width:38em; /* 1行が長くなりすぎないよう38文字相当で折返し */ color:var(--yb-ink-soft); font-size:1.02rem; } /* --- 夜の部屋用の色変化版（背景が墨色のグループに .yb-dark を付ける） --- */ .yb-dark .yb-room-no{color:rgba(240,237,229,.5)} .yb-dark .yb-room-no::after{background:var(--yb-line-on-dark)} .yb-dark .yb-room-title{color:var(--yb-text-on-dark)} .yb-dark .yb-room-en{color:rgba(240,237,229,.6)} .yb-dark .yb-room-lede{color:rgba(240,237,229,.65)} /* --- 赤の部屋用の色変化版 --- */ .yb-shu-room .yb-room-no{color:rgba(251,246,240,.7)} .yb-shu-room .yb-room-no::after{background:rgba(251,246,240,.35)} .yb-shu-room .yb-room-title{color:#FBF6F0} .yb-shu-room .yb-room-en{color:rgba(251,246,240,.75)} .yb-shu-room .yb-room-lede{color:rgba(251,246,240,.7)} /* ------------------------------------------------------------ 下線ボタン：段落ブロックにリンクを張り、段落のクラスに yb-btn-line を付ける方式。矢印「→」はCSSが自動で描くので本文には入力しないこと（二重になります） ------------------------------------------------------------ */ a.yb-btn-line, .yb-btn-line > a{ display:inline-flex; align-items:center; gap:.8rem; font-family:var(--yb-font-mono); font-size:.84rem; letter-spacing:.22em; color:var(--yb-ink); text-decoration:none; padding-bottom:.5rem; border-bottom:1px solid var(--yb-ink); transition:color var(--yb-dur-quick), border-color var(--yb-dur-quick), gap var(--yb-dur-quick); } /* 矢印：自動で末尾に付き、ホバーで右へ滑る */ a.yb-btn-line::after, .yb-btn-line > a::after{ content:"→"; transition:transform var(--yb-dur-quick) var(--yb-ease); } a.yb-btn-line:hover, .yb-btn-line > a:hover{ color:var(--yb-shu); border-color:var(--yb-shu); gap:1.2rem; /* 文字と矢印の間がすこし開く */ } a.yb-btn-line:hover::after, .yb-btn-line > a:hover::after{ transform:translateX(.15em); } /* サイズ大（HERO等で使用） */ .yb-btn-line--l > a, a.yb-btn-line--l{ font-size:.95rem; letter-spacing:.24em; } /* --- 夜の部屋・赤の部屋用 --- */ .yb-dark a.yb-btn-line, .yb-dark .yb-btn-line > a{ color:var(--yb-text-on-dark); border-color:var(--yb-text-on-dark); } .yb-dark a.yb-btn-line:hover, .yb-dark .yb-btn-line > a:hover{ color:var(--yb-shu); border-color:var(--yb-shu); } .yb-shu-room a.yb-btn-line, .yb-shu-room .yb-btn-line > a{ color:#FBF6F0; border-color:#FBF6F0; } .yb-shu-room a.yb-btn-line:hover, .yb-shu-room .yb-btn-line > a:hover{ color:var(--yb-ink); border-color:var(--yb-ink); } /* ===== v2-第2回ここまで ===== */ /* ============================================================ ===== v2-第3回：入口（HERO）＋フロントページ調整＋抽象アート ===== （旧・補足パッチ〔SWELL上書き対策〕と幅解放パッチを本体へ 1本化済み。!important付きの宣言がその吸収跡） ============================================================ */ /* ------------------------------------------------------------ フロント固定ページの整え：ページタイトル・アイキャッチ等を非表示（.home はWordPressがトップページに自動で付ける目印クラス。クラス名の候補を複数並べているのは環境差の保険で、存在しないものは単に無視されるだけなので無害） ------------------------------------------------------------ */ .home.page .c-postTitle, .home.page .p-articleThumb, .home.page .c-pageTitle, .home.page .p-postListMeta{ display:none; } .home.page .l-sidebar{ display:none; /* トップにサイドバーが出る設定だった場合の保険 */ } /* ------------------------------------------------------------ 抽象アート（CSSで描いたダミー作品6種＋朱の一本線）使い方：

のように a〜f を指定。画像が用意できるまでの仮置き兼、雰囲気づくりの道具 ------------------------------------------------------------ */ .yb-art{ position:relative; overflow:hidden; background:#ddd; border-radius:var(--yb-radius); } .yb-art::after{ /* 画布の質感（ノイズ） */ content:""; position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } .yb-art-a{background:radial-gradient(120% 90% at 20% 15%,#DCE3E8 0%,transparent 55%),radial-gradient(90% 80% at 85% 80%,#B9C6CF 0%,transparent 60%),linear-gradient(160deg,#E9EDEF,#9FB0BC)} .yb-art-b{background:radial-gradient(100% 80% at 75% 20%,#EFE3C8 0%,transparent 55%),radial-gradient(110% 90% at 15% 85%,#C9A96A 0%,transparent 62%),linear-gradient(200deg,#F0E9DA,#B08D4F)} .yb-art-c{background:radial-gradient(110% 85% at 25% 80%,#DCE2D6 0%,transparent 58%),radial-gradient(95% 75% at 80% 15%,#9FAE97 0%,transparent 60%),linear-gradient(150deg,#E7EBE1,#7E8F76)} .yb-art-d{background:radial-gradient(110% 90% at 80% 75%,#EBDCD6 0%,transparent 55%),radial-gradient(90% 85% at 18% 20%,#C99F94 0%,transparent 62%),linear-gradient(210deg,#F0E6E1,#A9756A)} .yb-art-e{background:radial-gradient(120% 95% at 30% 25%,#4A473F 0%,transparent 60%),radial-gradient(90% 80% at 82% 78%,#777264 0%,transparent 60%),linear-gradient(170deg,#5C584E,#2C2A24)} .yb-art-f{background:radial-gradient(110% 90% at 70% 30%,#E5E1EE 0%,transparent 58%),radial-gradient(100% 85% at 20% 80%,#A9A0C4 0%,transparent 62%),linear-gradient(190deg,#EDEAF2,#847AA5)} .yb-art-line::before{ /* 画面をよぎる一本の朱線＝編集の跡 */ content:""; position:absolute; left:8%; right:8%; top:52%; height:2px; background:var(--yb-shu); opacity:.65; transform:rotate(-3deg); z-index:1; } /* ------------------------------------------------------------ HERO：入口の全画面 ------------------------------------------------------------ */ .yb-hero{ position:relative; display:flex; flex-direction:column; justify-content:center; max-width:1280px; margin:0 auto; min-height:82vh; /* 古いブラウザ用の予備値 */ min-height:calc(100svh - 110px); /* 画面の高さ−ヘッダーぶん≒ほぼ全画面 */ padding:var(--yb-sp-5) var(--yb-sp-4) var(--yb-sp-6); } /* 眉ラベル（タイトル上の小さな英字） */ .yb-hero-eyebrow{ font-family:var(--yb-font-mono); font-size:.8rem; letter-spacing:.32em; color:var(--yb-ink-faint); text-transform:uppercase; margin:0 0 var(--yb-sp-4); } .yb-hero-eyebrow em{color:var(--yb-shu); font-style:normal} /* 巨大タイトル：Fraunces。SWELLのh1装飾より確実に勝たせる（旧・補足パッチの!important版に1本化） */ .home .yb-hero .yb-hero-title{ font-family:var(--yb-font-display) !important; font-weight:400 !important; font-size:clamp(3rem,11vw,9.5rem) !important; /* 大きすぎると感じたら9.5remを下げる */ letter-spacing:-.03em !important; line-height:1.05 !important; color:var(--yb-ink) !important; margin:0 !important; padding:0 !important; border:none !important; background:none !important; } .yb-tw-var.yb-fin{font-style:italic; color:var(--yb-shu); font-weight:300} /* 点滅カーソル（赤ペンの待機） */ .yb-caret{ display:inline-block; width:.05em; min-width:3px; height:.9em; background:var(--yb-shu); margin-left:.06em; vertical-align:-.08em; animation:ybBlink 1s steps(1) infinite; } @keyframes ybBlink{50%{opacity:0}} /* タグライン：人生、（完成に朱線）　編集中。 */ .yb-hero-tagline{ margin:var(--yb-sp-4) 0 0; font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.2rem,2.6vw,1.7rem); letter-spacing:.22em; } .yb-strike-shu{position:relative; color:var(--yb-ink-faint)} .yb-strike-shu::after{ content:""; position:absolute; left:-2%; right:-2%; top:54%; height:2px; background:var(--yb-shu); } /* 添えの一文 */ .yb-hero-note{ margin:var(--yb-sp-2) 0 0; font-size:.92rem; color:var(--yb-ink-soft); max-width:32em; } /* 文字は常に作品より手前に */ .yb-hero-eyebrow,.yb-hero-title,.yb-hero-tagline,.yb-hero-note,.yb-scroll-cue{ position:relative; z-index:2; } /* 壁に掛かった大判の一枚（額装：紙色の太縁＋深い影）ダミー（div）でも本物の画像（imgやWPの画像ブロック）でも同じ見た目になる */ .yb-hero-art{ width:clamp(300px,42vw,620px); aspect-ratio:3/4; border:12px solid var(--yb-paper); background:var(--yb-paper); box-shadow:0 40px 100px rgba(38,36,31,.22); border-radius:var(--yb-radius); z-index:0; } /* 配置：右上への絶対配置（旧・補足パッチの!important版に1本化） */ .home .yb-hero .yb-hero-art{ position:absolute !important; right:-2% !important; top:8% !important; margin:0 !important; } .yb-hero-art .yb-art{position:absolute; inset:0} .yb-hero-art img{width:100%; height:100%; object-fit:cover; display:block} figure.yb-hero-art{margin:0} /* 作品プレート（左下の小さなラベル） */ .yb-hero-art .yb-plate, figure.yb-hero-art figcaption{ position:absolute; left:.8rem; bottom:.8rem; margin:0; z-index:2; background:rgba(251,250,247,.9); padding:.45rem .8rem; border-radius:2px; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--yb-ink-soft); line-height:1.7; text-align:left; } /* SCROLLの手引き（左下・線が繰り返し落ちる） */ .yb-scroll-cue{ position:absolute; left:var(--yb-sp-4); bottom:var(--yb-sp-3); font-family:var(--yb-font-mono); font-size:.75rem; letter-spacing:.28em; color:var(--yb-ink-faint); text-transform:uppercase; display:flex; align-items:center; gap:1rem; margin:0; } .yb-scroll-cue::after{ content:""; width:1px; height:52px; background:var(--yb-line); transform-origin:top; animation:ybCueDrop 2.2s var(--yb-ease) infinite; } @keyframes ybCueDrop{ 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0} } /* 縦線アニメ：イージング直書きで確実に動かす（旧・補足パッチ吸収） */ .home .yb-hero .yb-scroll-cue::after{ animation:ybCueDrop 2.2s cubic-bezier(.25,.1,.25,1) infinite !important; } /* スマホ：作品は文章の下に流し込み、重なりをほどく（本体とパッチのモバイル指定を1つの@mediaに統合） */ @media(max-width:820px){ .yb-hero{min-height:auto; padding:var(--yb-sp-5) var(--yb-sp-3)} .yb-hero-art{ width:86%; border-width:8px; } .home .yb-hero .yb-hero-art{ position:relative !important; right:auto !important; top:auto !important; margin:var(--yb-sp-4) 0 0 auto !important; } .yb-scroll-cue{position:static; margin-top:var(--yb-sp-4)} } /* HEROの中身にかかる幅制限・中央寄せ・入れ子の基準ズレを解除（旧・幅解放パッチ吸収） */ .home .yb-hero > *:not(.yb-hero-art):not(.yb-scroll-cue){ max-width:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; position:static !important; } /* ===== v2-第3回ここまで ===== */ /* ============================================================ ===== v2-第4回：部屋の器＋宣言セクション＋案内プレート ===== （旧・補足パッチ①②を本体へ吸収済み） ============================================================ */ /* ------------------------------------------------------------ 部屋の器：以降すべてのセクションの共通レイアウト（フルワイドブロックの中にこのグループを置く型で統一） ------------------------------------------------------------ */ .yb-room{ position:relative; max-width:1280px; margin:0 auto; padding:var(--yb-sp-7) var(--yb-sp-4); /* 上下192px相当：展示のための大余白 */ } @media(max-width:820px){ .yb-room{padding:var(--yb-sp-6) var(--yb-sp-3)} } /* 汎用の小ラベル（等幅英字・各所で使い回す） */ .yb-k{ font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.3em; color:var(--yb-ink-faint); text-transform:uppercase; display:block; margin:0 0 var(--yb-sp-3); } /* ------------------------------------------------------------ 宣言セクション（編集方針の帯）静止状態＝校正済み。「その場で朱線が引かれる」動きは第9回のJSで発動 ------------------------------------------------------------ */ .yb-manifesto{ max-width:1280px; margin:0 auto; padding:var(--yb-sp-6) var(--yb-sp-4); border-top:1px solid var(--yb-line); border-bottom:1px solid var(--yb-line); } @media(max-width:820px){ .yb-manifesto{padding:var(--yb-sp-5) var(--yb-sp-3)} } .yb-m-line{ font-family:var(--yb-font-mincho); font-weight:600; font-size:clamp(2rem,6.5vw,4.6rem); letter-spacing:.06em; line-height:1.6; display:flex; align-items:baseline; gap:.45em; flex-wrap:wrap; margin:0; } .yb-m-line + .yb-m-line{margin-top:var(--yb-sp-2)} /* 左寄せ＋「修正前・修正後の言葉」をワンセットで横並びに（旧・補足パッチ②吸収：テーマ側の中央寄せ・縦積みへの保険） */ .yb-manifesto{text-align:left !important} .yb-manifesto .yb-m-line{ display:flex !important; flex-direction:row !important; justify-content:flex-start !important; align-items:baseline !important; } /* 打ち消される言葉：薄くなり、朱線が乗る */ .yb-m-strike{position:relative; color:var(--yb-ink-faint)} .yb-m-strike::after{ content:""; position:absolute; left:-2%; top:53%; height:.06em; min-height:3px; background:var(--yb-shu); width:104%; } /* 書き直された言葉：朱 */ .yb-m-new{color:var(--yb-shu)} /* 英字行：輪郭線だけの中抜き文字（Fraunces イタリック） */ .yb-m-en{ font-family:var(--yb-font-display); font-style:italic; font-weight:400; letter-spacing:-.01em; color:transparent; -webkit-text-stroke:1.5px var(--yb-ink); } .yb-m-en .yb-solid{color:var(--yb-shu); -webkit-text-stroke:0} /* 中抜き文字に非対応の環境では普通の墨文字で表示（保険） */ @supports not (-webkit-text-stroke:1px black){ .yb-m-en{color:var(--yb-ink)} } /* ------------------------------------------------------------ 案内プレート（カテゴリナビ4枚） ------------------------------------------------------------ */ .yb-plates{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--yb-sp-2); margin:0; padding:0; } @media(max-width:1020px){ .yb-plates{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .yb-plates{grid-template-columns:1fr} } .yb-plate-card{ border:1px solid var(--yb-line); background:var(--yb-paper); border-radius:var(--yb-radius); padding:var(--yb-sp-3); display:flex; flex-direction:column; gap:var(--yb-sp-2); min-height:190px; text-decoration:none; transition:transform var(--yb-dur-quick) var(--yb-ease), box-shadow var(--yb-dur-quick) var(--yb-ease), border-color var(--yb-dur-quick); } .yb-plate-card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(38,36,31,.1); border-color:rgba(224,51,28,.4); /* 枠がほんのり朱を帯びる */ } .yb-plate-card .no{ font-family:var(--yb-font-mono); font-size:.75rem; letter-spacing:.26em; color:var(--yb-ink-faint); } .yb-plate-card h3{ font-family:var(--yb-font-mincho); font-weight:500; font-size:1.2rem; letter-spacing:.18em; color:var(--yb-ink); margin:0; padding:0; border:none; background:none; /* SWELL見出し装飾の打ち消し */ } .yb-plate-card h3::before, .yb-plate-card h3::after{content:none} .yb-plate-card .en{ font-family:var(--yb-font-display); font-style:italic; font-weight:300; font-size:.95rem; color:var(--yb-ink-soft); } .yb-plate-card .arrow{ margin-top:auto; font-family:var(--yb-font-mono); font-size:.82rem; color:var(--yb-ink-soft); transition:color var(--yb-dur-quick), letter-spacing var(--yb-dur-quick); } .yb-plate-card:hover .arrow{ color:var(--yb-shu); letter-spacing:.2em; } /* --- 実サイト競合の修正（旧・補足パッチ①吸収） --- */ /* 案内プレート内の文字に「本文リンクの朱下線」が出るのを打ち消す */ .post_content .yb-plates a, .post_content .yb-plates a:hover, .yb-plates a{ text-decoration:none !important; } /* ホバーの浮き上がり：出現アニメ(.yb-reveal)のtransform指定に負けて効かなくなるのを、より強い指定で復活させる */ html.yb-js .yb-plate-card.yb-reveal.yb-is-visible:hover{ transform:translateY(-5px) !important; } /* 出現完了後のカードに、ホバー用のなめらかな動き（0.35s）を戻す */ html.yb-js .yb-plate-card.yb-reveal.yb-is-visible{ transition:transform var(--yb-dur-quick) var(--yb-ease), box-shadow var(--yb-dur-quick) var(--yb-ease), border-color var(--yb-dur-quick); } /* ===== v2-第4回ここまで ===== */ /* ============================================================ ===== v2-第5回：今月の展示（フィーチャー）＋余白メモ ===== ============================================================ */ /* 2カラムの器：左7・右5の比率。スマホでは縦積み */ .yb-feature{ display:grid; grid-template-columns:7fr 5fr; gap:var(--yb-sp-5); align-items:center; } @media(max-width:920px){ .yb-feature{grid-template-columns:1fr; gap:var(--yb-sp-4)} } /* --- 左：額装の大判 --- */ .yb-feature-visual{position:relative} .yb-feature-frame{ position:relative; overflow:hidden; aspect-ratio:4/3; border:14px solid var(--yb-paper); background:var(--yb-paper); border-radius:var(--yb-radius); box-shadow:0 30px 80px rgba(38,36,31,.16); } /* 視差用の内側の器：一回り大きく敷いておき、第11回のJSがこれを上下に微妙に動かす。JSが無い間はただの器（静止） */ .yb-feature-frame .yb-parallax-inner{ position:absolute; inset:-12%; will-change:transform; } .yb-feature-frame .yb-parallax-inner .yb-art{position:absolute; inset:0} .yb-feature-frame .yb-parallax-inner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* yb-mask-img：第9回の「マスク開き」演出のフック。通常時はクラスの印だけで、追加の見た目はない */ /* 作品下のキャプション（等幅・小） */ .yb-feature-caption{ margin:var(--yb-sp-2) 0 0; font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.14em; color:var(--yb-ink-faint); line-height:1.9; } /* 余白メモ：校正紙の書き込み風。作品の右上に朱で傾けて */ .yb-margin-memo{ position:absolute; top:-2.2rem; right:-.5rem; transform:rotate(2.5deg); font-family:var(--yb-font-mincho); font-style:italic; font-size:.95rem; color:var(--yb-shu); letter-spacing:.08em; margin:0; z-index:2; } .yb-margin-memo::before{content:"— "} @media(max-width:920px){ .yb-margin-memo{top:-2rem; right:0} } /* --- 右：記事紹介 --- */ /* 朱ラベル（.yb-k の色違い版） */ .yb-k--shu{color:var(--yb-shu)} .yb-feature-title{ font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:.1em; line-height:1.9; color:var(--yb-ink); margin:0; padding:0; border:none; background:none; /* SWELL見出し装飾の打ち消し */ } .yb-feature-title::before, .yb-feature-title::after{content:none} /* 1行ずつ演出（第9回発動）のための行構造。通常時は普通の改行として機能 */ .yb-reveal-lines .yb-line{display:block; overflow:hidden} .yb-reveal-lines .yb-line > span{display:block} .yb-feature-text{ margin:var(--yb-sp-3) 0 0; color:var(--yb-ink-soft); font-size:1.02rem; max-width:34em; } /* 下線ボタンの前の余白（第2回の部品をそのまま使用） */ .yb-feature-body .yb-btn-line{margin-top:var(--yb-sp-4)} /* ===== v2-第5回ここまで ===== */ /* ============================================================ ===== v2-第6回改：常設展グリッド（完全版） ===== ・旧・補足パッチ⑤⑥⑫⑬を本体へ吸収した一本化版 ⑫-A：columns段組→グリッド化＋偶数番目margin-topの互い違い ⑤　：SWELLのflex/width指定の解除・額4:3統一（安全のため維持） ⑥　：タイトル明朝の!important（安全側で維持） ⑫-B：VIEW帯＝CSSカウンター方式（JS不要・全ページで動作） ⑬　：.blog/.archiveスコープ（body.〜は空振りするため禁止）・旧12-1（.yb-piece-cap＋WPCode「v2 マソンリーキャプション」）は退役・削除済み・不採用のnth-child4点周期（額サイズ不揃い）も削除済み（死にコード） ============================================================ */ /* --- 器：3列グリッド（PC）→2列→1列 --- */ :is(.yb-masonry, .blog, .archive) .p-postList{ display:grid !important; grid-template-columns:repeat(3, 1fr) !important; /* PC：3列 */ gap:var(--yb-sp-4) var(--yb-sp-3) !important; /* 縦48px相当・横28px相当 */ align-items:start !important; /* 旧・段組（columns）系の指定を明示的に解除 */ columns:auto !important; column-gap:normal !important; /* VIEW帯の採番はここで一覧ごとに1へリセット */ counter-reset:yb-piece; } @media(max-width:1020px){ :is(.yb-masonry, .blog, .archive) .p-postList{ grid-template-columns:repeat(2, 1fr) !important; } } @media(max-width:620px){ :is(.yb-masonry, .blog, .archive) .p-postList{ grid-template-columns:1fr !important; } } /* --- 1記事＝1マス：SWELLのflex/width指定を無効化（旧⑤維持） --- */ :is(.yb-masonry, .blog, .archive) .p-postList__item{ display:block !important; width:auto !important; float:none !important; flex:none !important; margin:0 !important; padding:0; border:none; break-inside:auto !important; /* 段組専用の分割禁止指定も解除 */ counter-increment:yb-piece; /* VIEW帯の採番 */ } /* 美術館らしい互い違い：偶数番目の額を少し下げる（transformを使わない安全なずらし。量は下の値で調整、 0にすれば完全な整列グリッドになる） */ @media(min-width:621px){ :is(.yb-masonry, .blog, .archive) .p-postList__item:nth-child(even){ margin-top:var(--yb-sp-4) !important; /* 48px相当 */ } } /* --- 額縁：紙色の縁＋影＋わずかな傾き --- */ :is(.yb-masonry, .blog, .archive) .p-postList__thumb{ position:relative; overflow:hidden; border:10px solid var(--yb-paper); background:var(--yb-paper); border-radius:var(--yb-radius); box-shadow:0 14px 36px rgba(38,36,31,.1); transform:rotate(-1.2deg); transition:transform .6s var(--yb-ease), box-shadow .6s var(--yb-ease); } :is(.yb-masonry, .blog, .archive) .p-postList__item:nth-child(even) .p-postList__thumb{ transform:rotate(1.1deg); /* 偶数番目は逆に傾ける */ } :is(.yb-masonry, .blog, .archive) .p-postList__item:hover .p-postList__thumb{ transform:rotate(0deg); /* ホバーで正立 */ box-shadow:0 26px 60px rgba(38,36,31,.2); } /* --- 画像：額4:3統一（旧⑤のaspect-ratio方式に一本化）。普段はセピア気味→ホバーで色が戻りゆっくり寄る --- */ :is(.yb-masonry, .blog, .archive) .c-postThumb__figure{ position:relative; overflow:hidden; padding-top:0 !important; aspect-ratio:4/3 !important; height:auto !important; } :is(.yb-masonry, .blog, .archive) .c-postThumb__figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.35); transition:transform 1.1s var(--yb-ease), filter .8s var(--yb-ease); } :is(.yb-masonry, .blog, .archive) .p-postList__item:hover .c-postThumb__figure img{ transform:scale(1.09); filter:saturate(1.2); } /* --- サムネイル上のカテゴリ札：等幅英字の小札に --- */ :is(.yb-masonry, .blog, .archive) .c-postThumb__cat{ font-family:var(--yb-font-mono); font-size:.68rem; letter-spacing:.14em; background:rgba(38,36,31,.55); color:#FBF6F0; padding:.2em .6em; border-radius:2px; } /* --- 文字部：タイトル明朝／日付は等幅／抜粋は非表示 --- */ :is(.yb-masonry, .blog, .archive) .p-postList__body{ padding:var(--yb-sp-2) .2rem 0; } :is(.yb-masonry, .blog, .archive) .p-postList__title{ font-family:var(--yb-font-mincho) !important; /* 旧⑥吸収：競合対策の!important（安全側で維持） */ font-weight:500 !important; font-size:1.15rem; letter-spacing:.1em; line-height:1.9; color:var(--yb-ink); transition:color var(--yb-dur-quick); } :is(.yb-masonry, .blog, .archive) .p-postList__item:hover .p-postList__title{ color:var(--yb-shu); } /* 日付等のメタ情報（クラス名の候補を複数並べた保険。無いものは無視される） */ :is(.yb-masonry, .blog, .archive) :is(.p-postList__meta, .p-postList__data, .c-postTimes, .p-postList__times){ font-family:var(--yb-font-mono); font-size:.76rem; letter-spacing:.16em; color:var(--yb-ink-faint); } :is(.yb-masonry, .blog, .archive) .p-postList__excerpt{ display:none; /* ギャラリーの静けさ優先。抜粋を出したい場合はこの1行を削除 */ } /* --- VIEW帯：CSSカウンター方式（旧⑫-B）。額（thumb）の疑似要素として描く。JS不要＝どのページでも確実に出る --- */ :is(.yb-masonry, .blog, .archive) .p-postList__thumb::after{ content:"No." counter(yb-piece, decimal-leading-zero) " — VIEW"; position:absolute; left:0; right:0; bottom:0; z-index:2; padding:.6rem .9rem; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.2em; color:#FBF6F0; background:linear-gradient(transparent, rgba(38,36,31,.65)); transform:translateY(110%); transition:transform .5s var(--yb-ease); pointer-events:none; } :is(.yb-masonry, .blog, .archive) .p-postList__item:hover .p-postList__thumb::after{ transform:translateY(0); } /* ===== v2-第6回改ここまで ===== */ /* ============================================================ ===== v2-第7回A：夜の回廊（横スクロールギャラリー） ===== ============================================================ */ /* 部屋の壁：フルワイドブロックに .yb-night-wide を付けて墨色に（!important＝SWELLフルワイド競合の定石。正式仕様） */ .yb-night-wide{ background:var(--yb-wall-night) !important; padding-bottom:var(--yb-sp-6); overflow:hidden; } /* 見出しだけの器（下の余白を詰めて回廊に近づける） */ .yb-room--slim{padding-bottom:var(--yb-sp-2)} /* 回廊本体：横並び＋横スクロール＋1枚ずつ止まるスナップ */ .yb-hgallery{ display:flex; gap:var(--yb-sp-4); overflow-x:auto; scroll-snap-type:x mandatory; /* 送ると1枚ずつ中央に吸着 */ -webkit-overflow-scrolling:touch; /* スマホで慣性スクロール */ scrollbar-width:thin; scrollbar-color:var(--yb-line-on-dark) transparent; padding-top:var(--yb-sp-2); padding-bottom:var(--yb-sp-4); padding-right:var(--yb-sp-4); /* 左端：1280px幅の見出しと1枚目の頭が揃うように計算 */ padding-left:max(var(--yb-sp-4), calc((100% - 1280px)/2 + var(--yb-sp-4))); } /* 1枚の額（リンク） */ .yb-hg-item{ flex:0 0 clamp(260px,54vw,560px); /* 画面幅に応じて260〜560pxで伸縮 */ scroll-snap-align:center; text-decoration:none; display:block; } /* リンク下線の打ち消し（旧・無番号パッチ吸収） */ .yb-hg-item, .yb-hg-item:hover{ text-decoration:none !important; border-bottom:none !important; box-shadow:none !important; } /* 作品面：ダミー(.yb-art)でも本物の画像(img)でも同じ額装に */ .yb-hg-item :is(.yb-art, img){ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border:8px solid rgba(251,250,247,.08); /* 夜の部屋のガラス縁 */ border-radius:var(--yb-radius); } /* キャプション行（左：シリーズ番号／右：話数） */ .yb-hg-cap{ margin:var(--yb-sp-2) 0 0; font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.16em; color:rgba(240,237,229,.55); display:flex; justify-content:space-between; gap:1rem; } /* シリーズ名 */ .yb-hg-t{ margin:.4rem 0 0; font-family:var(--yb-font-mincho); font-size:1.05rem; letter-spacing:.12em; color:var(--yb-text-on-dark); } /* 操作の手引き */ .yb-hg-hint{ max-width:1280px; margin:var(--yb-sp-2) auto 0; padding-left:max(var(--yb-sp-4), calc((100% - 1280px)/2 + var(--yb-sp-4))); padding-right:var(--yb-sp-4); font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.24em; color:rgba(240,237,229,.4); } @media(max-width:820px){ .yb-hgallery{gap:var(--yb-sp-3); padding-left:var(--yb-sp-3); padding-right:var(--yb-sp-3)} .yb-hg-hint{padding-left:var(--yb-sp-3)} } /* ============================================================ ===== v2-第7回B：いま、編集中のわたし ===== （2カラム分割・クロスフェード予約席・editlog・付箋・プロフィール） ============================================================ */ /* 部屋の壁：灰緑（sage） */ .yb-sage-wide{background:var(--yb-wall-sage)} /* 左右分割：左6・右5。スマホは縦積み */ .yb-split{ display:grid; grid-template-columns:6fr 5fr; gap:var(--yb-sp-6); align-items:start; } @media(max-width:920px){ .yb-split{grid-template-columns:1fr; gap:var(--yb-sp-5)} } /* --- クロスフェードギャラリー（1枚目が静止表示。第11回JSで発動） --- */ .yb-xfade{ position:relative; aspect-ratio:4/5; overflow:hidden; border:12px solid var(--yb-paper); background:var(--yb-paper); border-radius:var(--yb-radius); box-shadow:0 26px 70px rgba(38,36,31,.14); } .yb-xfade .yb-slide{ position:absolute; inset:0; opacity:0; transition:opacity 2.2s var(--yb-ease); } .yb-xfade .yb-slide.yb-on{opacity:1} /* yb-on が付いた1枚だけ見える */ .yb-xfade img.yb-slide{width:100%; height:100%; object-fit:cover} .yb-xfade-cap{ margin:var(--yb-sp-2) 0 0; min-height:1.6em; font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.14em; color:var(--yb-ink-faint); transition:opacity .8s; } /* --- editlog：変更履歴カード --- */ .yb-editlog{ position:relative; border:1px solid var(--yb-line); background:var(--yb-paper); border-radius:var(--yb-radius); padding:var(--yb-sp-4); } .yb-editlog h3{ font-family:var(--yb-font-mincho); font-weight:500; font-size:1.3rem; letter-spacing:.16em; color:var(--yb-ink); margin:.6rem 0 var(--yb-sp-3); padding:0; border:none; background:none; } .yb-editlog h3::before,.yb-editlog h3::after{content:none} .yb-editlog ul{list-style:none; margin:0; padding:0} .yb-editlog li{ display:flex; gap:1rem; align-items:baseline; padding:.9rem 0; margin:0; border-top:1px dashed var(--yb-line); font-size:1rem; } .yb-editlog li .sign{ font-family:var(--yb-font-mono); font-size:.88rem; width:1.4em; flex:none; } .yb-editlog li.add .sign{color:#5E7D5A} /* ＋：控えめな緑 */ .yb-editlog li.del .sign{color:var(--yb-shu)} /* −：朱 */ .yb-editlog li.wip .sign{color:var(--yb-ink-faint)} /* ±：薄墨 */ .yb-editlog li.del .what{ text-decoration:line-through; text-decoration-color:var(--yb-shu); text-decoration-thickness:1.5px; color:var(--yb-ink-soft); } /* 版数表示（MYSELF: v2.5 → v2.6） */ .yb-ver{ margin:var(--yb-sp-3) 0 0; font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.16em; color:var(--yb-ink-faint); } .yb-ver b{color:var(--yb-ink); font-weight:500} .yb-ver s{color:var(--yb-ink-faint); text-decoration-color:var(--yb-shu)} /* --- 付箋（カード右上・テープで貼った風） --- */ .yb-fusen{ position:absolute; top:-1.3rem; right:1.6rem; transform:rotate(-2.5deg); background:var(--yb-fusen); border-radius:var(--yb-radius-fusen); padding:.55rem 1rem; font-family:var(--yb-font-mincho); font-size:.86rem; letter-spacing:.1em; color:var(--yb-ink); box-shadow:0 8px 18px rgba(38,36,31,.12); } .yb-fusen::before{ /* テープ */ content:""; position:absolute; top:-.55rem; left:50%; transform:translateX(-50%) rotate(1deg); width:2.6rem; height:.85rem; background:rgba(255,255,255,.55); border:1px solid rgba(38,36,31,.06); } /* --- プロフィール抜粋（取り消し線で書き換わる） --- */ .yb-profile-mini{ margin-top:var(--yb-sp-4); border-top:1px solid var(--yb-line); padding-top:var(--yb-sp-3); } .yb-profile-mini p{ margin:.8rem 0 0; font-family:var(--yb-font-mincho); font-size:1.1rem; letter-spacing:.1em; line-height:2.3; color:var(--yb-ink); } .yb-rewrite{white-space:nowrap} .yb-rewrite s{ color:var(--yb-ink-faint); text-decoration-color:var(--yb-shu); text-decoration-thickness:1.5px; margin-right:.4em; } .yb-rewrite .new{color:var(--yb-shu)} /* 校正記号「トル」風の丸囲み */ .yb-proof-mark{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--yb-font-mincho); font-size:.62em; color:var(--yb-shu); border:1px solid var(--yb-shu); border-radius:50%; width:2em; height:2em; vertical-align:.3em; margin:0 .3em; } .yb-profile-mini .yb-btn-line{margin-top:var(--yb-sp-3)} /* ===== v2-第7回ここまで ===== */ /* ============================================================ ===== v2-第8回：赤の部屋＋note別館＋COMING SOON＋フッター奥付 ===== （旧・補足パッチ⑦⑧を本体へ吸収済み。フッター中央の SWELLコピーライト（.copyright）の非表示も整理回で織り込み） ============================================================ */ /* ------------------------------------------------------------ 赤の部屋：一室まるごと朱（!important＝SWELLフルワイド競合の定石。正式仕様） ------------------------------------------------------------ */ .yb-shu-wide{ background:var(--yb-wall-shu) !important; padding-bottom:var(--yb-sp-6); overflow:hidden; } /* --- マーキー：同じタイル列を2周分並べ、半分ぶん流し続けて無限ループ --- */ .yb-marquee{overflow:hidden; position:relative} .yb-marquee-track{ display:flex; gap:var(--yb-sp-2); width:max-content; animation:ybMarquee 42s linear infinite; /* 42s＝1周の速さ。数字を小さくすると速く */ } .yb-marquee:hover .yb-marquee-track{animation-play-state:paused} /* 載せると止まる */ @keyframes ybMarquee{to{transform:translateX(-50%)}} /* タイル（正方形） */ .yb-ig-tile{ flex:none; width:clamp(150px,18vw,230px); aspect-ratio:1/1; position:relative; overflow:hidden; border-radius:var(--yb-radius); } .yb-ig-tile :is(.yb-art, img){ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* ハッシュタグ札 */ .yb-ig-tile .tag{ position:absolute; left:.7rem; bottom:.6rem; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.12em; color:rgba(251,250,247,.9); background:rgba(38,36,31,.4); padding:.15rem .5rem; border-radius:2px; } /* FOLLOWボタンの置き場（1280px幅の左端に揃える） */ .yb-marquee-follow{ max-width:1280px; margin:var(--yb-sp-3) auto 0; padding-left:max(var(--yb-sp-4), calc((100% - 1280px)/2 + var(--yb-sp-4))); padding-right:var(--yb-sp-4); } @media(max-width:820px){ .yb-marquee-follow{padding-left:var(--yb-sp-3); padding-right:var(--yb-sp-3)} } /* ------------------------------------------------------------ note別館カード（3枚グリッド） ------------------------------------------------------------ */ .yb-note-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--yb-sp-3); } @media(max-width:920px){ .yb-note-grid{grid-template-columns:1fr} } .yb-note-card{ background:var(--yb-paper); border:1px solid var(--yb-line); border-radius:var(--yb-radius); padding:var(--yb-sp-3); display:flex; flex-direction:column; gap:var(--yb-sp-2); text-decoration:none; transition:transform var(--yb-dur-quick) var(--yb-ease), box-shadow var(--yb-dur-quick) var(--yb-ease); } /* 旧⑦吸収：①リンクの朱下線打ち消し ②yb-reveal競合でホバー浮き上がりが効かない問題の修正 ③下辺罫線の維持 */ .yb-note-card{ text-decoration:none !important; border-bottom:1px solid var(--yb-line) !important; box-shadow:none !important; } .yb-note-card:hover{ transform:translateY(-5px) !important; box-shadow:0 18px 40px rgba(38,36,31,.1) !important; } .yb-note-card .svc{ font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.22em; color:var(--yb-ink-faint); display:flex; justify-content:space-between; gap:1rem; } .yb-note-card h4{ font-family:var(--yb-font-mincho); font-weight:500; font-size:1.16rem; letter-spacing:.08em; line-height:2; color:var(--yb-ink); margin:0; padding:0; border:none; background:none; } .yb-note-card h4::before,.yb-note-card h4::after{content:none} .yb-note-card .read{ margin-top:auto; font-family:var(--yb-font-mono); font-size:.8rem; letter-spacing:.18em; color:var(--yb-ink-soft); transition:color var(--yb-dur-quick); } .yb-note-card:hover .read{color:var(--yb-shu)} /* ------------------------------------------------------------ COMING SOONカード（第4回の .yb-plate-card を流用） ------------------------------------------------------------ */ .yb-coming{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--yb-sp-2); } @media(max-width:920px){ .yb-coming{grid-template-columns:1fr} } .yb-coming .yb-plate-card{min-height:150px} .yb-soon{ font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.24em; color:var(--yb-shu); border:1px solid rgba(224,51,28,.4); border-radius:2px; padding:.1rem .5rem; align-self:flex-start; } /* ------------------------------------------------------------ フッター奥付（.l-footer はSWELLのフッター。クラス名候補を複数並べた保険つき） ------------------------------------------------------------ */ .l-footer{ background:var(--yb-wall-entrance); border-top:1px solid var(--yb-line); color:var(--yb-ink-soft); } .l-footer a{ font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.18em; color:var(--yb-ink-soft); transition:color var(--yb-dur-quick); } .l-footer a:hover{color:var(--yb-shu)} .l-footer :is(.c-copyright, .l-footer__copyright, small){ font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--yb-ink-faint); } /* 奥付（フッターウィジェットに置くカスタムHTML用） */ .yb-colophon{ max-width:1280px; margin:0 auto; padding:var(--yb-sp-4) 0 var(--yb-sp-2); text-align:left; } .yb-colophon-brand{ font-family:var(--yb-font-display); font-weight:300; font-style:italic; font-size:1.5rem; color:var(--yb-ink); margin:0; } .yb-colophon-text{ font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.14em; color:var(--yb-ink-faint); line-height:2.1; margin:var(--yb-sp-2) 0 0; } .yb-colophon-text em{color:var(--yb-shu); font-style:normal} /* --- SWELL標準コピーライトの非表示（旧⑧吸収＋整理回で拡張） --- ©表記は奥付 yb-colophon に記載済みのため二重を防ぐ。整理回で正体判明分を追加：フッター中央の小マークの正体は

©…＝クラス名 .copyright 【注意】.c-smallNav まで消す広い指定のため、将来フッターの小メニューを運用し始める時はその1行を外すこと */ .l-footer .c-copyright, .l-footer__copyright, .l-footer .c-smallNav, .l-footer small, .c-copyright, .l-footer .copyright, p.copyright{ display:none !important; } /* ===== v2-第8回ここまで ===== */ /* ============================================================ ===== v2-第9回：部屋システム＋校正演出＋ヘッダー ===== （html.yb-js はWPCodeのJSが付ける目印。JSが無い環境ではこのブロックのアニメ初期状態は一切適用されない＝安全）・旧・補足パッチ⑨/⑨-2/⑨-3改/⑩/⑪を本体へ吸収済み・v1第4回のナビ演出（メモ①-3）とヘッダー基調、 v1第5回の透過ヘッダー（メモ①-1）をここへ移設済み ============================================================ */ /* ------------------------------------------------------------ 壁色の移ろい（bodyの背景をJSがクラスで切り替え、CSSが溶かす） ※bodyのtransitionは冒頭の基礎ブロックに統合済み ------------------------------------------------------------ */ body.yb-bg-warm{background:var(--yb-wall-warm)} body.yb-bg-sage{background:var(--yb-wall-sage)} body.yb-bg-night{background:var(--yb-wall-night)} body.yb-bg-shu{background:var(--yb-wall-shu)} body.yb-bg-shu::before{opacity:.08} /* 朱の上では紙の粒子を少し強く */ /* --- 壁色を透けさせる透明化（旧⑨/⑨-2/⑨-3改を1本化） --- 経緯メモ：壁色が透けない「真犯人」はSWELLフルワイドブロックのインラインstyle背景指定だった。再発時はまずそこを疑うこと */ .home :is(.l-content, .l-mainContent, #content, .l-main, main, .p-mainContainer, .l-container){ background: transparent !important; } /* SWELL全体ラッパー #body_wrap 自体の白背景を透明化（homeはbody_wrapに付く） */ #body_wrap.home{ background: transparent !important; } /* 入口ページの全フルワイド背景を透明化（bodyの壁色を透けさせる）。静的な壁を持つ夜・朱・sageの3部屋だけは除外 */ #body_wrap.home .swell-block-fullWide:not(.yb-night-wide):not(.yb-shu-wide):not(.yb-sage-wide){ background: transparent !important; } /* --- 壁の移ろいの正式アーキテクチャ（旧⑩を本体仕様に昇格） --- JSあり（html.yb-js）＝静的壁も透明化し、壁色は完全にbody任せ／ JSなし＝夜・sage・朱の静的壁が残るフォールバック */ html.yb-js .yb-night-wide, html.yb-js .yb-sage-wide, html.yb-js .yb-shu-wide{ background:transparent !important; } /* ------------------------------------------------------------ 順路の現在地プレート（JSが生成して右下に置く） ------------------------------------------------------------ */ .yb-roomnow{ position:fixed; right:1.4rem; bottom:1.2rem; z-index:60; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.22em; color:var(--yb-ink-soft); pointer-events:none; /* クリックの邪魔をしない */ text-transform:uppercase; transition:color var(--yb-dur-room) var(--yb-ease); } body.yb-bg-night .yb-roomnow{color:rgba(240,237,229,.75)} body.yb-bg-shu .yb-roomnow{color:rgba(251,246,240,.85)} @media(max-width:820px){ .yb-roomnow{display:none} } /* スマホでは非表示 */ /* ------------------------------------------------------------ 校正演出の初期状態（すべて html.yb-js が付いた時だけ有効） ------------------------------------------------------------ */ /* 宣言の帯：朱線ゼロ＋言葉はまだ墨色 → 見えたら朱線が走り、言葉が薄れる */ html.yb-js .yb-m-line .yb-m-strike{color:var(--yb-ink)} html.yb-js .yb-m-line .yb-m-strike::after{ width:0; transition:width .55s var(--yb-ease) .55s; } html.yb-js .yb-m-line.yb-in .yb-m-strike{ color:var(--yb-ink-faint); transition:color .4s .9s; } html.yb-js .yb-m-line.yb-in .yb-m-strike::after{width:104%} /* タイトルが1行ずつせり上がる */ html.yb-js .yb-reveal-lines .yb-line > span{ transform:translateY(110%); transition:transform .9s var(--yb-ease); } html.yb-js .yb-reveal-lines.yb-in .yb-line > span{transform:none} html.yb-js .yb-reveal-lines.yb-in .yb-line:nth-child(2) > span{transition-delay:.12s} html.yb-js .yb-reveal-lines.yb-in .yb-line:nth-child(3) > span{transition-delay:.24s} html.yb-js .yb-reveal-lines.yb-in .yb-line:nth-child(4) > span{transition-delay:.36s} /* 画像が左からマスクを開くように現れる */ html.yb-js .yb-mask-img{ clip-path:inset(0 100% 0 0); transition:clip-path 1.2s var(--yb-ease); } html.yb-js .yb-mask-img.yb-in{clip-path:inset(0 0 0 0)} /* 「視差効果を減らす」設定中は初期状態を無効化（＝最初から完成形） */ @media (prefers-reduced-motion: reduce){ html.yb-js .yb-m-line .yb-m-strike{color:var(--yb-ink-faint)} html.yb-js .yb-m-line .yb-m-strike::after{width:104%} html.yb-js .yb-reveal-lines .yb-line > span{transform:none} html.yb-js .yb-mask-img{clip-path:none} } /* ------------------------------------------------------------ ヘッダー：基調＋透過＋薄化＋ナビ演出 ------------------------------------------------------------ */ /* ヘッダーの基調（v1第4回から移設：非透過時の帯。 .l-fixHeader＝スクロール追従ヘッダーにも同じ見た目を当てる） */ .l-header, .l-fixHeader{ background:var(--yb-wall-entrance); box-shadow:none; border-bottom:1px solid var(--yb-line); } /* トップ限定：透過ヘッダー（v1第5回から移設・現役ルール。メモ①-1。第9回のヘッダー薄化はこの透過が前提） */ .home .l-header{ background:transparent; box-shadow:none; border-bottom:none; } /* ロゴのリンク色（v1第4回から移設） */ .c-headLogo__link, .c-headLogo__link:hover{ color:var(--yb-ink); } /* ロゴ：テキストロゴの場合、Frauncesのイタリックに */ .l-header :is(.c-headLogo, .c-headLogo a, .c-headLogo__link){ font-family:var(--yb-font-display); font-style:italic; font-weight:400; letter-spacing:.02em; } /* グローバルメニュー：等幅英字の小さな文字に */ .l-header :is(.c-gnav a, nav a){ font-family:var(--yb-font-mono); font-size:.8rem; letter-spacing:.18em; } /* 追従ヘッダーにも薄化を適用（旧⑪吸収。存在しないクラス候補は無視されるだけで無害） */ .l-fixHeader :is(.c-headLogo, .c-headLogo a, .c-headLogo__link, .c-fixLogo, .c-fixLogo a){ font-family:var(--yb-font-display) !important; font-style:italic !important; font-weight:400; letter-spacing:.02em; } .l-fixHeader :is(.c-gnav a, nav a){ font-family:var(--yb-font-mono) !important; font-size:.8rem; letter-spacing:.18em; } /* --- gnav下線アニメ＋現在地表示（v1第4回から移植・メモ①-3。トークンはv2名に書換済み） --- */ .c-gnav > li > a{ position:relative; /* 下線アニメの基準点 */ font-family:var(--yb-font-mono); font-size:13px; letter-spacing:.14em; color:var(--yb-ink); transition:color .3s var(--yb-ease); } .c-gnav > li > a:hover{ color:var(--yb-shu); } /* ホバー下線：マウスを載せると細い朱線が左から伸びる */ .c-gnav > li > a::after{ content:""; position:absolute; left:1.2em; right:1.2em; bottom:10px; /* 下線の高さ。ズレたらここを調整 */ height:1px; background:var(--yb-shu); transform:scaleX(0); /* 通常時は幅ゼロ＝見えない */ transform-origin:left center; transition:transform .35s var(--yb-ease); } .c-gnav > li > a:hover::after{ transform:scaleX(1); /* ホバーで左から伸びる */ } /* current-menu-item ＝ WordPressが「現在地」に自動で付けるクラス */ .c-gnav > li.current-menu-item > a::after, .c-gnav > li.current-menu-ancestor > a::after{ transform:scaleX(1); } /* スマホのメニュー開閉ボタンの色 */ .l-header .c-iconBtn{ color:var(--yb-ink); } /* 夜・朱の部屋の上をヘッダーが通る時、文字色を反転（透過ヘッダー時用） */ body.yb-bg-night .l-header a{color:var(--yb-text-on-dark)} body.yb-bg-shu .l-header a{color:#FBF6F0} /* ===== v2-第9回ここまで ===== */ /* ============================================================ ===== v2-第10回：HEROタイプライター（案A・完全版） ===== ※対のWPCode「v2 HEROタイプライター」は START_DELAY=2000 で運用中（ローディング幕が明けてからタイプ開始） ============================================================ */ /* タイプ中の可変部分：「Perfect.」の間は墨色・立体（イタリック解除）（html.yb-js 配下なのでJSが無い環境には一切影響しない） */ .yb-tw-var{position:relative; white-space:nowrap} html.yb-js .yb-tw-var:not(.yb-fin){ color:var(--yb-ink); font-style:normal; font-weight:400; } /* 打ち消し線：左からすっと引かれる */ .yb-tw-var.yb-tw-struck{color:var(--yb-ink-faint)} .yb-tw-var.yb-tw-struck::after{ content:""; position:absolute; left:-1%; right:-1%; top:54%; height:.06em; min-height:3px; background:var(--yb-shu); transform-origin:left; animation:ybStrikeDraw .5s var(--yb-ease) both; } @keyframes ybStrikeDraw{ from{transform:scaleX(0)} to{transform:scaleX(1)} } /* タイプ上演中はタグライン・添え書き・SCROLL手引きを控えさせ、上演終了（yb-twが外れる）と同時にふわっと登場させる */ .yb-hero-tagline, .yb-hero-note, .yb-hero .yb-scroll-cue{ transition:opacity .9s var(--yb-ease), transform .9s var(--yb-ease); } html.yb-tw .yb-hero-tagline, html.yb-tw .yb-hero-note, html.yb-tw .yb-hero .yb-scroll-cue{ opacity:0; transform:translateY(14px); } /* ===== v2-第10回ここまで ===== */ /* ============================================================ ===== v2-第11回：パララックスの下準備 ===== （動く予定の要素に「変形するよ」と事前申告して描画を滑らかに） ============================================================ */ [data-parallax]{will-change:transform} /* ===== v2-第11回ここまで ===== */ /* ============================================================ ===== v2-第12回②：スクロールスナップ（2026-07-15 採用確定） ===== ・旧・補足パッチ⑭を本体へ統合（⑥-D・判断B）・仕組み：WebKit（Safari）は body/html の overflow-x が visible以外だとルートスナップが無効になる既知の制限がある。 SWELLの土台 body{overflow-x:clip}（横はみ出し対策）と衝突するため、「見張り役」をbodyからhtmlへ引っ越して両立させている・下の2行（html clip／body visible）とスナップは一蓮托生。 clip側だけ消すと吸着が止まり、両方消すと横はみ出しの見張りが無くなる。撤去したい時はこのブロックごと削除すること・スマホは吸着なし（仕様どおり） ============================================================ */ html{ scroll-snap-type:y proximity; overflow-x:clip; /* 横はみ出しの見張り役（⑭：body→htmlへ移設） */ } body{overflow-x:visible !important} /* WebKitのルートスナップ有効化条件 */ .yb-hero, .yb-room{ scroll-snap-align:start; scroll-margin-top:80px; } @media(max-width:820px){ html{scroll-snap-type:none} } /* ============================================================ ===== v2-第12回③：カーソル演出（朱のリング） ===== 通常カーソルは消さない安全仕様。スマホ・タッチ端末には出ない ============================================================ */ .yb-cursor{ position:fixed; top:0; left:0; width:28px; height:28px; border:1.5px solid var(--yb-shu); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--yb-font-mono); font-size:.58rem; letter-spacing:.14em; color:var(--yb-shu); pointer-events:none; z-index:9999; opacity:0; transition:width .25s var(--yb-ease), height .25s var(--yb-ease), background .25s, opacity .3s; } .yb-cursor.is-on{opacity:.85} .yb-cursor.is-link{width:44px; height:44px} /* リンク上で拡大 */ .yb-cursor.is-view{width:58px; height:58px; background:rgba(224,51,28,.08)} .yb-cursor.is-view::after{content:"VIEW"} /* 作品の上では文字 */ @media(max-width:820px){ .yb-cursor{display:none} } /* ============================================================ ===== v2-第12回④：ローディング画面（CSS専用・事故防止設計） ===== ・アニメーションだけで1.6秒後に必ず消える（JSに依存しない）・pointer-events:none＝万一残ってもクリックを妨げない・トップページ限定で表示・セレクタは body:has(#body_wrap.home)（旧⑮の正式化）：幕はbody_wrapの「外」に挿入されるSWELL仕様のため、 .home単体では届かない ============================================================ */ .yb-loader{display:none} body:has(#body_wrap.home) .yb-loader{ position:fixed; inset:0; z-index:9998; background:var(--yb-wall-entrance); display:flex; align-items:center; justify-content:center; font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.3em; color:var(--yb-ink-faint); pointer-events:none; animation:ybLoaderOut .7s var(--yb-ease) 1.6s both; /* 1.6秒待って0.7秒で明ける */ } body:has(#body_wrap.home) .yb-loader span{animation:ybLoaderPulse 1.4s ease-in-out infinite} @keyframes ybLoaderOut{to{opacity:0; visibility:hidden}} @keyframes ybLoaderPulse{50%{opacity:.35}} /* ============================================================ ===== 整理回・改訂版ここまで ===== 以後の追加CSSはこの行より下に、回ごとのコメント見出し付きで追記する（body.クラス名は禁止・.クラス名で書くこと） ============================================================ */ /* ============================================================ ===== 手動移植（2026-07-15）：改訂版依頼後に適用したブロック群 ===== 出典＝現行style.css（スナップショット v2第12回＋第13回＋追加回D＋追加回A＋追加回F＋予備回版）から原文のまま移植内容＝v2-第13回／追加回D／追加回A＋パッチ⑯⑰／追加回F＋パッチ⑱／予備回＋パッチ⑲〜⑲-4 （整理回実行STEP3の全置換はこのファイル全体で行う） ============================================================ */ /* ============================================================ ===== v2-第13回：ニュースレター（案①②共用） ===== ============================================================ */ /* --- 器（両案共通） --- */ .yb-nl{ position:relative; border:1px solid var(--yb-line); background:var(--yb-paper); border-radius:var(--yb-radius); padding:var(--yb-sp-5) var(--yb-sp-4); margin-bottom:var(--yb-sp-5); /* 下のCOMING SOONとの間隔 */ } @media(max-width:620px){ .yb-nl{padding:var(--yb-sp-4) var(--yb-sp-3)} } .yb-nl-title{ font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.7rem); letter-spacing:.14em; line-height:1.8; color:var(--yb-ink); margin:.5rem 0 0; padding:0; border:none; background:none; } .yb-nl-title::before,.yb-nl-title::after{content:none} .yb-nl-lede{ margin:var(--yb-sp-2) 0 0; color:var(--yb-ink-soft); font-size:.98rem; max-width:36em; } .yb-nl-note{ margin:var(--yb-sp-3) 0 0; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.16em; color:var(--yb-ink-faint); } /* --- 案①：フォームの着せ替え --- .yb-nl-form の中に入った入力欄・ボタンなら、外部サービスが吐いたHTMLでもv2の見た目になる（対象を広めに取った設計） --- */ .yb-nl-form{ display:flex; flex-wrap:wrap; gap:var(--yb-sp-2); margin-top:var(--yb-sp-3); max-width:560px; } .yb-nl-form form{display:contents} /* サービス側のform枠を透明化して並びに参加させる */ .yb-nl-form :is(input[type="email"], input[type="text"]){ flex:1 1 240px; font-family:var(--yb-font-mono); font-size:.9rem; letter-spacing:.06em; color:var(--yb-ink); background:var(--yb-wall-entrance); border:1px solid var(--yb-line); border-radius:var(--yb-radius); padding:.85rem 1rem; } .yb-nl-form :is(input[type="email"], input[type="text"]):focus{ outline:none; border-color:var(--yb-ink); } .yb-nl-form :is(button, input[type="submit"]){ font-family:var(--yb-font-mono); font-size:.84rem; letter-spacing:.2em; color:#FBF6F0; background:var(--yb-ink); border:1px solid var(--yb-ink); border-radius:var(--yb-radius); padding:.85rem 1.4rem; cursor:pointer; transition:background var(--yb-dur-quick), border-color var(--yb-dur-quick); } .yb-nl-form :is(button, input[type="submit"]):hover{ background:var(--yb-shu); border-color:var(--yb-shu); } .yb-nl-form :is(button, input):disabled{ opacity:.55; cursor:default; } .yb-nl-form :is(button, input[type="submit"]):disabled:hover{ background:var(--yb-ink); border-color:var(--yb-ink); /* ダミー期間はホバー無効 */ } /* --- 案②：リンク導線ボタン --- */ .yb-nl-links{ display:grid; grid-template-columns:repeat(2,minmax(220px,1fr)); gap:var(--yb-sp-2); margin-top:var(--yb-sp-3); max-width:640px; } @media(max-width:620px){ .yb-nl-links{grid-template-columns:1fr} } .yb-nl-linkbtn{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border:1px solid var(--yb-ink); border-radius:var(--yb-radius); padding:1rem 1.2rem; text-decoration:none; font-family:var(--yb-font-mincho); font-size:.95rem; letter-spacing:.1em; color:var(--yb-ink); transition:background var(--yb-dur-quick), color var(--yb-dur-quick); } .yb-nl-linkbtn .svc{ font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.22em; color:var(--yb-ink-faint); transition:color var(--yb-dur-quick); } .yb-nl-linkbtn:hover{background:var(--yb-ink); color:var(--yb-paper)} .yb-nl-linkbtn:hover .svc{color:var(--yb-shu)} /* ===== v2-第13回ここまで ===== */ /* ============================================================ ===== v2-追加回D：記事内パーツ（ふきだし／Pochipp／まとめ） ===== ============================================================ */ /* ------------------------------------------------------------ 1) ふきだし：SWELL標準ブロックの全体v2化（クラス不要）（.c-balloon系はSWELLのふきだしクラス。:is()は候補の保険） ------------------------------------------------------------ */ /* 吹き出し本体：紙色＋細い罫線 */ :is(.c-balloon__text, .c-balloon__body .speech-txt, .balloon-text){ background:var(--yb-paper); border:1px solid var(--yb-line); border-radius:var(--yb-radius); color:var(--yb-ink); line-height:2; } /* 名前：等幅英字の小さな名札 */ :is(.c-balloon__iconName, .c-balloon__name, .balloon-name){ font-family:var(--yb-font-mono); font-size:.68rem; letter-spacing:.14em; color:var(--yb-ink-faint); } /* アイコン画像：細い罫線の丸額に */ :is(.c-balloon__icon img, .balloon-icon img){ border:1px solid var(--yb-line); background:var(--yb-paper); } /* 朱変種：赤ペン先生の校正コメント（ふきだしブロックの「高度な設定→追加CSSクラス」に yb-balloon-shu） */ .yb-balloon-shu :is(.c-balloon__text, .c-balloon__body .speech-txt, .balloon-text){ border-color:rgba(224,51,28,.45); background:#FDF6F4; /* 朱がほんのり滲んだ紙 */ } .yb-balloon-shu :is(.c-balloon__iconName, .c-balloon__name, .balloon-name){ color:var(--yb-shu); } /* ------------------------------------------------------------ 2) Pochipp商品カード：opt-in方式のv2着せ替え（Pochippブロックの追加CSSクラスに yb-item と付けたカードにだけ効く。付けなければ従来のまま） ------------------------------------------------------------ */ /* カードの器 */ .yb-item :is(.pochipp-box, .p-pochipp, .pchpp-box){ border:1px solid var(--yb-line); background:var(--yb-paper); border-radius:var(--yb-radius); box-shadow:0 10px 28px rgba(38,36,31,.07); padding:var(--yb-sp-3); } /* 商品画像：小さな額装 */ .yb-item :is(.pochipp-box__img, .pchpp-img) img{ border:6px solid var(--yb-wall-entrance); border-radius:var(--yb-radius); background:var(--yb-wall-entrance); } /* 商品名：明朝 */ .yb-item :is(.pochipp-box__title, .pchpp-title, .pochipp-box__title a){ font-family:var(--yb-font-mincho); font-weight:500; font-size:1.05rem; letter-spacing:.08em; line-height:1.9; color:var(--yb-ink); } /* 価格・更新日時・ショップ情報：等幅英字 */ .yb-item :is(.pochipp-box__price, .pochipp-box__info, .pchpp-price, .pchpp-info){ font-family:var(--yb-font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--yb-ink-soft); } /* セール・ラベル系の札：朱の小札 */ .yb-item :is(.pochipp-box__label, .pochipp-box__sale, .pchpp-label){ font-family:var(--yb-font-mono); font-size:.68rem; letter-spacing:.16em; color:var(--yb-shu); background:var(--yb-shu-soft); border-radius:2px; padding:.1em .5em; } /* ボタン：墨→ホバーで朱の統一デザイン ※ Amazon橙・楽天赤などのショップ色を残したい場合（クリック率重視）、この一群（ここから8行）を削除すればボタンだけ従来色に戻ります */ .yb-item :is(.pochipp-box__btn, .pochipp-box__btns a, .pchpp-btns a){ font-family:var(--yb-font-mono); font-size:.8rem; letter-spacing:.16em; color:#FBF6F0; background:var(--yb-ink); border:1px solid var(--yb-ink); border-radius:var(--yb-radius); transition:background var(--yb-dur-quick), border-color var(--yb-dur-quick); } .yb-item :is(.pochipp-box__btn, .pochipp-box__btns a, .pchpp-btns a):hover{ background:var(--yb-shu); border-color:var(--yb-shu); color:#FBF6F0; } /* ------------------------------------------------------------ 3) まとめボックス：キャプションパネル（グループブロックに yb-summary。ラベルはCSSが自動で描く） ------------------------------------------------------------ */ .yb-summary{ border:1px solid var(--yb-line); background:var(--yb-paper); border-radius:var(--yb-radius); padding:var(--yb-sp-3) var(--yb-sp-3) var(--yb-sp-3); margin:var(--yb-sp-4) 0; } /* 自動ラベル（基本形） */ .yb-summary::before{ content:"SUMMARY — この記事の要点"; display:block; font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.26em; color:var(--yb-ink-faint); text-transform:uppercase; margin-bottom:var(--yb-sp-2); } /* 変種1：見どころ */ .yb-summary--point::before{content:"POINT — 見どころ"} /* 変種2：注意書き（朱） */ .yb-summary--note{border-color:rgba(224,51,28,.45)} .yb-summary--note::before{content:"NOTE — ご注意"; color:var(--yb-shu)} /* 変種3：ラベルなし（見出しを自分で書きたい時） */ .yb-summary--plain::before{content:none} /* 中の箇条書き：朱のダッシュ */ .yb-summary ul{list-style:none; margin:0; padding:0} .yb-summary ul li{ position:relative; margin:0; padding:.45rem 0 .45rem 1.4rem; line-height:2; } .yb-summary ul li::before{ content:"—"; position:absolute; left:0; color:var(--yb-shu); font-family:var(--yb-font-mono); } /* 番号リスト：等幅のゼロ埋め番号（01. 02. …） */ .yb-summary ol{list-style:none; margin:0; padding:0; counter-reset:yb-sum} .yb-summary ol li{ position:relative; margin:0; padding:.45rem 0 .45rem 2.2rem; line-height:2; counter-increment:yb-sum; } .yb-summary ol li::before{ content:counter(yb-sum, decimal-leading-zero) "."; position:absolute; left:0; font-family:var(--yb-font-mono); font-size:.84rem; letter-spacing:.08em; color:var(--yb-shu); } /* 中に見出しを書く場合（--plain向け）：装飾を打ち消して明朝小見出しに */ .yb-summary :is(h2,h3,h4){ font-family:var(--yb-font-mincho); font-weight:500; font-size:1.05rem; letter-spacing:.14em; color:var(--yb-ink); margin:0 0 var(--yb-sp-2); padding:0; border:none; background:none; } .yb-summary :is(h2,h3,h4)::before, .yb-summary :is(h2,h3,h4)::after{content:none} /* ===== v2-追加回D ここまで ===== */ /* ============================================================ ===== v2-追加回A：カテゴリアーカイブの世界観統一 ===== （カテゴリ名・スラッグに依存しない汎用設計。 ⚠パッチ⑬ルール適用済み：body.→.に読み替え） ============================================================ */ /* --- 展示室の壁：アーカイブは常設展と同じ生成り（静的・JS不要） --- */ .archive{background:var(--yb-wall-warm)} .archive :is(.l-content, .l-mainContent, #content, .l-main){background:transparent} /* --- ページタイトル → 順路見出し風 --- */ .archive :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo){ font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.6rem); letter-spacing:.14em; line-height:1.6; color:var(--yb-ink); border:none; background:none; padding:0; margin:var(--yb-sp-4) 0 var(--yb-sp-2); } /* 眉ラベル（自動・全カテゴリ共通。名前に依存しない） */ .archive :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo)::before{ content:"ARCHIVE"; display:block; font-family:var(--yb-font-mono); font-size:.78rem; font-weight:400; letter-spacing:.32em; text-transform:uppercase; color:var(--yb-ink-faint); margin-bottom:var(--yb-sp-2); } /* ページの種類でラベルを自動切替 */ .category :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo)::before{ content:"EXHIBITION ROOM — CATEGORY"; } .tag :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo)::before{ content:"SERIES ARCHIVE — TAG"; } /* タイトル下の短い罫線（順路見出しの意匠） */ .archive :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo)::after{ content:""; display:block; width:56px; height:1px; background:var(--yb-line); margin-top:var(--yb-sp-2); } /* --- カテゴリ説明文 → lede --- */ .archive :is(.term-description, .archive-description, .taxonomy-description, .c-pageTitle + p){ max-width:38em; color:var(--yb-ink-soft); font-size:1rem; line-height:2.1; margin:0 0 var(--yb-sp-5); } /* --- パンくずリスト → 等幅の小さな道しるべ --- */ .archive :is(#breadcrumb, .c-breadcrumb, .p-breadcrumb){ font-family:var(--yb-font-mono); font-size:.7rem; letter-spacing:.14em; color:var(--yb-ink-faint); } .archive :is(#breadcrumb, .c-breadcrumb, .p-breadcrumb) a{ color:inherit; transition:color var(--yb-dur-quick); } .archive :is(#breadcrumb, .c-breadcrumb, .p-breadcrumb) a:hover{ color:var(--yb-shu); } /* --- ページ送り → 展示室の番号札（.page-numbersはWP標準クラス） --- */ .archive .page-numbers{ font-family:var(--yb-font-mono); font-size:.84rem; letter-spacing:.1em; color:var(--yb-ink-soft); background:var(--yb-paper); border:1px solid var(--yb-line); border-radius:var(--yb-radius); padding:.5em .95em; text-decoration:none; transition:color var(--yb-dur-quick), border-color var(--yb-dur-quick); } .archive a.page-numbers:hover{ color:var(--yb-shu); border-color:rgba(224,51,28,.4); } .archive .page-numbers.current{ color:#FBF6F0; background:var(--yb-ink); border-color:var(--yb-ink); } /* ===== v2-追加回A ここまで ===== */ /* ===== 補足パッチ⑰：マソンリー間隔をデモ準拠に拡大（2026-07-15） ===== パッチ⑫-Aの縦48px・横28pxでは詰まって見えるため、縦80px・横48pxに拡大。互い違いのずらし量も80pxに */ :is(.yb-masonry, .blog, .archive) .p-postList{ gap:64px 40px !important; /* 縦64px・横40px（気持ち詰め） */ } @media(min-width:621px){ :is(.yb-masonry, .blog, .archive) .p-postList__item:nth-child(even){ margin-top:var(--yb-sp-5) !important; /* 偶数番目のずらしも80pxに */ } } /* ===== 補足パッチ⑰ ここまで ===== */ /* ============================================================ ===== v2-追加回F：記事本文の組版 ===== .single＝記事ページ限定（パッチ⑬ルール準拠：body.は使わない） :not(.yb-summary *)は追加回Dのまとめボックス内の見出しを巻き込まない除外指定 ============================================================ */ /* 章番号カウンターの準備 */ .single .post_content{counter-reset:yb-sec} /* ------------------------------------------------------------ h2：章扉（SECTION 01 — の自動採番） ------------------------------------------------------------ */ .single .post_content h2:not(.yb-summary *){ font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.35rem,2.8vw,1.7rem); letter-spacing:.12em; line-height:1.9; color:var(--yb-ink); background:none; border:none; padding:0; margin:var(--yb-sp-5) 0 var(--yb-sp-3); counter-increment:yb-sec; } .single .post_content h2:not(.yb-summary *)::before{ content:"SECTION " counter(yb-sec, decimal-leading-zero); display:block; position:static; transform:none; width:auto; height:auto; background:none; border:none; font-family:var(--yb-font-mono); font-size:.72rem; font-weight:400; letter-spacing:.3em; color:var(--yb-ink-faint); margin:0 0 .6rem; } .single .post_content h2:not(.yb-summary *)::after{ content:""; display:block; position:static; transform:none; width:56px; height:1px; background:var(--yb-line); border:none; margin:.8rem 0 0; } /* ※「SECTION 01」の自動採番が不要な場合：上の ::before ブロックの content 行を content:none; に変えるだけ */ /* ------------------------------------------------------------ h3：朱のダッシュを添えた小見出し ------------------------------------------------------------ */ .single .post_content h3:not(.yb-summary *){ position:relative; font-family:var(--yb-font-mincho); font-weight:500; font-size:1.2rem; letter-spacing:.1em; line-height:1.9; color:var(--yb-ink); background:none; border:none; padding:0 0 0 1.3em; margin:var(--yb-sp-4) 0 var(--yb-sp-2); } .single .post_content h3:not(.yb-summary *)::before{ content:"—"; position:absolute; left:0; top:0; width:auto; height:auto; background:none; border:none; transform:none; font-family:var(--yb-font-mono); color:var(--yb-shu); } .single .post_content h3:not(.yb-summary *)::after{content:none} /* ------------------------------------------------------------ h4：等幅英字の小ラベル ------------------------------------------------------------ */ .single .post_content h4:not(.yb-summary *){ font-family:var(--yb-font-mono); font-weight:400; font-size:.8rem; letter-spacing:.26em; text-transform:uppercase; color:var(--yb-ink-soft); background:none; border:none; padding:0; margin:var(--yb-sp-3) 0 var(--yb-sp-1); } .single .post_content h4:not(.yb-summary *)::before, .single .post_content h4:not(.yb-summary *)::after{content:none} /* ------------------------------------------------------------ 引用：Frauncesの大きな引用符が朱で浮かぶ「書き抜き」 ------------------------------------------------------------ */ .single .post_content blockquote{ position:relative; background:none; border:none; margin:var(--yb-sp-4) 0; padding:var(--yb-sp-2) 0 var(--yb-sp-2) var(--yb-sp-4); } .single .post_content blockquote::before{ content:"\201C"; position:absolute; left:-.08em; top:-.3em; width:auto; height:auto; background:none; border:none; font-family:var(--yb-font-display); font-style:italic; font-size:3.6rem; line-height:1; color:var(--yb-shu); opacity:.5; } .single .post_content blockquote::after{content:none} .single .post_content blockquote p{ font-family:var(--yb-font-mincho); font-size:1.02rem; letter-spacing:.06em; line-height:2.3; color:var(--yb-ink-soft); } .single .post_content blockquote cite{ display:block; margin-top:.8rem; font-family:var(--yb-font-mono); font-style:normal; font-size:.72rem; letter-spacing:.16em; color:var(--yb-ink-faint); } .single .post_content blockquote cite::before{content:"— "} /* ------------------------------------------------------------ 目次（SWELL標準）：紙色カード＋番号だけ朱 ------------------------------------------------------------ */ .single :is(.p-toc, #toc, .c-toc, .toc){ border:1px solid var(--yb-line); background:var(--yb-paper); border-radius:var(--yb-radius); padding:var(--yb-sp-3); } .single :is(.p-toc, #toc, .c-toc, .toc) :is(.p-toc__title, .p-toc__ttl, .c-toc__title, .toc_title){ font-family:var(--yb-font-mono); font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:var(--yb-ink-faint); text-align:left; margin:0 0 var(--yb-sp-2); } .single :is(.p-toc, #toc, .c-toc, .toc) :is(ol, ul){ margin:0; padding-left:1.5em; } .single :is(.p-toc, #toc, .c-toc, .toc) li{ margin:.15rem 0; line-height:2.1; } .single :is(.p-toc, #toc, .c-toc, .toc) li::marker{ font-family:var(--yb-font-mono); font-size:.85em; color:var(--yb-shu); } .single :is(.p-toc, #toc, .c-toc, .toc) a{ color:var(--yb-ink-soft); text-decoration:none; transition:color var(--yb-dur-quick); } .single :is(.p-toc, #toc, .c-toc, .toc) a:hover{color:var(--yb-shu)} /* ------------------------------------------------------------ 区切り線（hr）：章の間の休符（短い罫線＋朱の点） ------------------------------------------------------------ */ .single .post_content hr{ border:none; width:56px; height:1px; background:var(--yb-line); margin:var(--yb-sp-5) auto; position:relative; overflow:visible; } .single .post_content hr::after{ content:""; position:absolute; left:50%; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--yb-shu); transform:translateX(-50%); } /* ------------------------------------------------------------ 前後記事ナビ：常設展のミニチュア（紙色カード2枚） ------------------------------------------------------------ */ .single :is(.p-prevNext, .c-prevNext, .post-navigation, .nav-links){ display:grid; grid-template-columns:1fr 1fr; gap:var(--yb-sp-2); border:none; margin-top:var(--yb-sp-6); } @media(max-width:620px){ .single :is(.p-prevNext, .c-prevNext, .post-navigation, .nav-links){grid-template-columns:1fr} } .single :is(.p-prevNext, .c-prevNext, .post-navigation, .nav-links) a{ display:block; border:1px solid var(--yb-line); background:var(--yb-paper); border-radius:var(--yb-radius); padding:var(--yb-sp-2); text-decoration:none; transition:transform var(--yb-dur-quick) var(--yb-ease), box-shadow var(--yb-dur-quick) var(--yb-ease), border-color var(--yb-dur-quick); } .single :is(.p-prevNext, .c-prevNext, .post-navigation, .nav-links) a:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(38,36,31,.1); border-color:rgba(224,51,28,.35); } .single :is(.p-prevNext, .c-prevNext, .post-navigation, .nav-links) a img{ border:5px solid var(--yb-wall-entrance); border-radius:var(--yb-radius); background:var(--yb-wall-entrance); } .single :is(.p-prevNext, .c-prevNext, .post-navigation, .nav-links) :is(.p-prevNext__title, .c-prevNext__title, .title){ font-family:var(--yb-font-mincho); font-weight:500; font-size:.95rem; letter-spacing:.08em; line-height:1.9; color:var(--yb-ink); } /* ===== v2-追加回F ここまで ===== */ /* 補足パッチ⑱：目次番号の朱色化（SWELLは番号を::beforeで描くため::markerが効かない） */ .single :is(.p-toc, #toc, .c-toc, .toc) li::before{ font-family:var(--yb-font-mono) !important; color:var(--yb-shu) !important; } /* ============================================================ ===== v2-予備回：検索結果＋404＋検索フォーム ===== （手順書表記は「追加回C」だが予備回に改称＝CF7回と区別。 ⚠パッチ⑬ルール適用済み：body.→.に読み替え） ============================================================ */ /* ------------------------------------------------------------ 検索フォーム（サイト共通の着せ替え。input[type=search]狙い） ------------------------------------------------------------ */ :is(.search-form, .c-searchForm, form[role="search"]){ display:flex; flex-wrap:wrap; gap:var(--yb-sp-1); max-width:480px; } input[type="search"]{ flex:1 1 220px; font-family:var(--yb-font-mono); font-size:.9rem; letter-spacing:.06em; color:var(--yb-ink); background:var(--yb-paper); border:1px solid var(--yb-line); border-radius:var(--yb-radius); padding:.8rem 1rem; } input[type="search"]:focus{outline:none; border-color:var(--yb-ink)} :is(.search-form, .c-searchForm, form[role="search"]) :is(button, input[type="submit"], .search-submit){ font-family:var(--yb-font-mono); font-size:.82rem; letter-spacing:.18em; color:#FBF6F0; background:var(--yb-ink); border:1px solid var(--yb-ink); border-radius:var(--yb-radius); padding:.8rem 1.2rem; cursor:pointer; transition:background var(--yb-dur-quick), border-color var(--yb-dur-quick); } :is(.search-form, .c-searchForm, form[role="search"]) :is(button, input[type="submit"], .search-submit):hover{ background:var(--yb-shu); border-color:var(--yb-shu); } /* ------------------------------------------------------------ 検索結果ページ（.search） ------------------------------------------------------------ */ .search{background:var(--yb-wall-warm)} .search :is(.l-content, .l-mainContent, #content, .l-main){background:transparent} /* 見出し：順路見出しの文法（追加回Aと同じ意匠） */ .search :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo){ font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.5rem,3.2vw,2.2rem); letter-spacing:.12em; line-height:1.7; color:var(--yb-ink); border:none; background:none; padding:0; margin:var(--yb-sp-4) 0 var(--yb-sp-2); } .search :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo)::before{ content:"SEARCH RESULT — 検索"; display:block; font-family:var(--yb-font-mono); font-size:.78rem; font-weight:400; letter-spacing:.32em; text-transform:uppercase; color:var(--yb-ink-faint); margin-bottom:var(--yb-sp-2); } .search-no-results :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo)::before{ content:"NO WORKS FOUND — 検索"; } .search :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo)::after{ content:""; display:block; width:56px; height:1px; background:var(--yb-line); margin-top:var(--yb-sp-2); } /* 結果リスト：目録風の静かな縦リスト */ .search .p-postList{display:block; margin-top:var(--yb-sp-4)} .search .p-postList__item{ display:block; width:auto; margin:0; border-top:1px dashed var(--yb-line); padding:var(--yb-sp-3) 0; } .search .p-postList__item:last-child{border-bottom:1px dashed var(--yb-line)} .search .p-postList__thumb{ border:6px solid var(--yb-paper); background:var(--yb-paper); border-radius:var(--yb-radius); box-shadow:0 8px 22px rgba(38,36,31,.08); overflow:hidden; } .search .p-postList__title{ font-family:var(--yb-font-mincho); font-weight:500; font-size:1.1rem; letter-spacing:.08em; line-height:1.9; color:var(--yb-ink); transition:color var(--yb-dur-quick); } .search .p-postList__item:hover .p-postList__title{color:var(--yb-shu)} .search :is(.p-postList__meta, .p-postList__data, .c-postTimes, .p-postList__times){ font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.16em; color:var(--yb-ink-faint); } .search .page-numbers{ font-family:var(--yb-font-mono); font-size:.84rem; letter-spacing:.1em; color:var(--yb-ink-soft); background:var(--yb-paper); border:1px solid var(--yb-line); border-radius:var(--yb-radius); padding:.5em .95em; text-decoration:none; transition:color var(--yb-dur-quick), border-color var(--yb-dur-quick); } .search a.page-numbers:hover{color:var(--yb-shu); border-color:rgba(224,51,28,.4)} .search .page-numbers.current{color:#FBF6F0; background:var(--yb-ink); border-color:var(--yb-ink)} /* ------------------------------------------------------------ 404ページ（.error404）：閉室の掲示 ------------------------------------------------------------ */ .error404{background:var(--yb-wall-entrance)} .error404 :is(.l-content, .l-mainContent, #content, .l-main){background:transparent} .error404 :is(.c-pageTitle, .l-content h1):not(.c-headLogo){ font-family:var(--yb-font-display); font-style:italic; font-weight:400; font-size:clamp(3.6rem,15vw,9rem); letter-spacing:-.02em; line-height:1.15; color:transparent; -webkit-text-stroke:2px var(--yb-ink); border:none; background:none; padding:0; margin:var(--yb-sp-5) 0 0; } @supports not (-webkit-text-stroke:1px black){ .error404 :is(.c-pageTitle, .l-content h1):not(.c-headLogo){color:var(--yb-ink)} } .error404 :is(.c-pageTitle, .l-content h1):not(.c-headLogo)::before{ content:"ROOM ??? — NOT FOUND"; display:block; font-family:var(--yb-font-mono); font-style:normal; font-size:.78rem; letter-spacing:.32em; color:var(--yb-ink-faint); -webkit-text-stroke:0; margin-bottom:var(--yb-sp-2); } .error404 :is(.c-pageTitle, .l-content h1):not(.c-headLogo)::after{ content:"この部屋は展示替えのため、閉室中かもしれません。"; display:block; font-family:var(--yb-font-mincho); font-style:normal; font-weight:500; font-size:clamp(1rem,2vw,1.15rem); letter-spacing:.12em; line-height:2.2; color:var(--yb-ink-soft); -webkit-text-stroke:0; margin-top:var(--yb-sp-3); } .error404 .l-content p{color:var(--yb-ink-soft)} .error404 .l-content a{color:var(--yb-shu)} .error404 :is(.search-form, .c-searchForm, form[role="search"]){margin-top:var(--yb-sp-4)} /* ===== v2-予備回ここまで ===== */ /* ===== 補足パッチ⑲：検索・404の1カラム幅補正（2026-07-15） ===== -sidebar-off時にSWELLがコンテンツ幅を記事幅に絞るため、 404ページのみ全幅に戻す（検索は⑲-2〜⑲-4で別途対応） */ .error404 :is(.l-content, .l-mainContent, .l-mainContent__inner, main){ max-width:none !important; width:auto !important; } /* ===== 補足パッチ⑲ ここまで ===== */ /* ===== 補足パッチ⑲-2：検索結果は中央寄せの読み物幅（2026-07-15） ===== -sidebar-off の絞り幅がスマホ相当に細いため、検索結果だけ 880px 中央寄せを明示指定 */ .search :is(.l-content, .l-mainContent, .l-mainContent__inner, main){ max-width:880px !important; width:auto !important; margin-left:auto !important; margin-right:auto !important; } /* ===== 補足パッチ⑲-2 ここまで ===== */ /* ===== 補足パッチ⑲-3：検索結果リスト自体の幅指定（2026-07-15） ===== 幅を絞っていたのは外枠ではなく .p-postList 本体だったため、リストと見出しに直接、読み物幅（最大880px）＋中央寄せを指定 */ .search .p-postList{ width:min(880px, 92vw) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; } .search :is(.c-pageTitle, .archive-title, .l-content h1):not(.c-headLogo){ width:min(880px, 92vw) !important; margin-left:auto !important; margin-right:auto !important; } /* ===== 補足パッチ⑲-3 ここまで ===== */ /* ===== 補足パッチ⑲-4：検索結果の記事が3列幅のまま細い問題（2026-07-15） ===== SWELLの -pc-col3（3列カード）の幅指定が勝っていたため、記事1件ずつを全幅に強制。サムネイルは小さめの額装を維持 */ .search .p-postList{display:block !important} .search .p-postList__item{ display:block !important; width:100% !important; max-width:none !important; flex:none !important; } .search .p-postList__thumb{ max-width:280px !important; } /* ===== 補足パッチ⑲-4 ここまで ===== */ /* ============================================ 補足パッチ⑳：常設展（トップ）カードの朱下線打ち消し 2026-07-16 整理回にて。旧・第4回の.home打ち消しルールが改訂版で削除され、トップ固定ページでは本文リンク仕様 (.post_content a)の朱下線がカードに波及するため最小復元 ============================================ */ .home .p-postList a, .home .p-postList a:hover{ text-decoration:none; } /* ===== 補足パッチ⑳ ここまで ===== */ /* ============================================ 補足パッチ㉑：常設展（トップ）のカテゴリ札・時計アイコン非表示 2026-07-16 整理回検収にて。旧・第4回の.home打ち消しルールが改訂版で削除され、v2マソンリーの小札スタイルがトップにも現れるようになったため、置換前の見た目（非表示）を最小復元 ============================================ */ .home .p-postList .c-postThumb__cat, .home .p-postList .p-postList__cat{ display:none; } .home .p-postList .c-postTimes i, .home .p-postList .c-postTimes__posted::before, .home .p-postList .c-postTimes__modified::before{ display:none; } /* ===== 補足パッチ㉑ここまで ===== */ /* ============================================ 補足パッチ㉒：記事内リンクカードの朱下線打ち消し 2026-07-16。本文リンク仕様(.post_content a)がSWELLのブログカードにも及ぶため、カード内だけ下線を消す ============================================ */ .post_content .p-blogCard a, .post_content .p-blogCard a:hover{ text-decoration:none; } /* ===== 補足パッチ㉒ここまで ===== */ /* ===== 補足パッチ⑯改：アーカイブ幅を標準コンテンツ幅に（2026-07-16） ===== 旧⑯（全幅解放）は検収にて撤回。SWELLが1カラム時に幅を絞りすぎるため、記事一覧と同程度の幅を明示して中央寄せ */ .archive :is(.l-content, .l-mainContent, .l-mainContent__inner, main){ max-width:1296px !important; width:auto !important; margin-left:auto !important; margin-right:auto !important; } /* ===== 補足パッチ⑯改ここまで ===== */ /* ===== 補足パッチ㉔：検索結果のカテゴリ札を一覧と統一（2026-07-16） ===== 検索結果ページだけSWELL標準の朱色バッジが残っていたため、記事一覧・カテゴリと同じ半透明の墨札に統一。あわせて札内の日本語がシステム書体に化けないよう和文フォールバック（Zen Kaku Gothic New）を明示 */ :is(.yb-masonry, .blog, .archive, .search) .c-postThumb__cat{ font-family:var(--yb-font-mono); /* ㉗のトークン一括フォールバックへ一本化（2026-07-18） */ font-size:.68rem; letter-spacing:.14em; background:rgba(38,36,31,.55); color:#FBF6F0; padding:.2em .6em; border-radius:2px; } /* ===== 補足パッチ㉔ここまで ===== */ /* ============================================================ 補足パッチ㉕：⑩フォールバックの再構築（2026-07-16） ------------------------------------------------------------ 【症状】第9回スニペット（部屋システム）を一時OFFにすると、夜・sage・朱の静的壁が出ず白壁化／「今月の展示」の額とタイトルが消える／夜・朱の部屋の文字が読めなくなる【真因】目印 html.yb-js は v1（reveal）と v2（部屋システム）の両スニペットが付ける「共用フラグ」。v2だけをOFFにしても v1が yb-js を付け続けるため、CSS側は「JSあり」と誤認し、・静的壁の透明化（旧⑩）だけが残り、壁色を切り替えるJSは不在・校正演出の初期状態（隠した状態）だけが残り、「見えたら表示せよ」の合図（.yb-in）は永遠に来ないという片肺運転になっていた【対処】v2スニペットだけが生成する要素 .yb-roomnow （右下の現在地プレート）を「v2生存の証」として :has() で検知。・body:has(.yb-roomnow)＝v2が動いている → 何もしない・body:not(:has(.yb-roomnow))＝v2不在 → 静的壁と完成形を復元【JS ON時の安全性】トップ表示時、v2スニペットは yb-js 付与と同じ実行タイミングで .yb-roomnow を設置するため、ONの間は下の全ルールが一度も適用されない＝見た目の変化ゼロ【ブラウザ要件】:has() を使用（既にパッチ⑮のローディング幕で採用済みの書き方。新たな要件追加ではない） ============================================================ */ /* ---- ㉕-1：静的壁の復元（v2不在時のみ。旧⑩の透明化を上書き） ---- */ html.yb-js body:not(:has(.yb-roomnow)) .yb-night-wide{ background:var(--yb-wall-night) !important; } html.yb-js body:not(:has(.yb-roomnow)) .yb-sage-wide{ background:var(--yb-wall-sage) !important; } html.yb-js body:not(:has(.yb-roomnow)) .yb-shu-wide{ background:var(--yb-wall-shu) !important; } /* ---- ㉕-2：校正演出を「最初から完成形」に（v2不在時のみ）隠したまま固まっていた要素を、アニメなしの完成状態で表示する。 .yb-reveal（v1第7回）はv1スニペット自身が面倒を見るため対象外 ---- */ /* 宣言の帯：朱線は引かれ、打ち消し語は薄墨（＝静止時の完成形） */ html.yb-js body:not(:has(.yb-roomnow)) .yb-m-line .yb-m-strike{ color:var(--yb-ink-faint); } html.yb-js body:not(:has(.yb-roomnow)) .yb-m-line .yb-m-strike::after{ width:104%; transition:none; } /* タイトルの1行ずつせり上げ：最初から定位置 */ html.yb-js body:not(:has(.yb-roomnow)) .yb-reveal-lines .yb-line > span{ transform:none; } /* マスク開き（今月の展示の額）：クリップ解除＝最初から全開 */ html.yb-js body:not(:has(.yb-roomnow)) .yb-mask-img{ clip-path:none; } /* ---- ㉕-3：スマホの透過ヘッダーでメニューボタン背景も透過（2026-07-16 追伸分・訂正反映）症状＝トップの透過ヘッダー上で、左上の3本線ボタンの背景だけ白い正方形のまま残る（SWELL側がボタンに白背景を敷くため）。前提＝スマホはスクロール中の追従状態でもヘッダーは常時透過（PCの追従バー .l-fixHeader は白背景のままで変更しない）。対処＝トップの通常ヘッダー（.home .l-header）のボタンを透過。スマホの追従はSWELLでは同じ .l-header がそのまま貼り付く実装のため、この1スコープで「常時」をカバーできる。保険として、環境によりスマホでも .l-fixHeader 複製が使われる場合に備え、スマホ幅限定で同じ透過を当てておく（PCの .l-fixHeader はメディアクエリ外＝現状のまま）。セレクタはSWELLのバージョン差に備えて候補を複数並べた保険（存在しないものは無視されるだけで無害） ---- */ .home .l-header :is(.c-iconBtn, .p-spMenu__openBtn, [data-onclick="toggleMenu"]){ background:transparent !important; box-shadow:none !important; border:none !important; } /* ボタン内側に別の器がある構造への保険 */ .home .l-header .c-iconBtn > *{ background:transparent !important; } /* 2026-07-16 実機特定分：白い正方形の正体はボタンの「親の器」 div.l-header__menuBtn に敷かれた白背景だった（検証ツールで確定）。ボタン本体と同じスコープで親の器も透過する */ .home .l-header .l-header__menuBtn{ background:transparent !important; box-shadow:none !important; } /* スマホ幅限定：追従が別要素(.l-fixHeader)の環境でも常時透過を保証（959px＝SWELLがハンバーガーメニューに切り替わる標準境界） */ @media(max-width:959px){ .home .l-fixHeader :is(.c-iconBtn, .p-spMenu__openBtn, [data-onclick="toggleMenu"]){ background:transparent !important; box-shadow:none !important; border:none !important; } .home .l-fixHeader .l-header__menuBtn{ background:transparent !important; box-shadow:none !important; } } /* ---- ㉕-4：暗い壁の上でのメニューボタン視認性の確保（㉕-3とセット）これまで白い正方形が「意図せぬ視認性の保険」を兼ねていた。透過にすると、夜（墨）・朱の部屋の上をヘッダーが通る際に墨色の3本線が背景に沈んで見えなくなるため、既存のリンク文字反転ルール（body.yb-bg-night .l-header a 等）と同じ考え方でボタンの線の色も反転させる。 ※yb-bg-〜はJS（部屋システム）がbody本体に付けるクラスのため、ここは「body.クラス名」表記が正しい（禁止ルールの対象は body_wrapに付くWP文脈クラス home/blog/archive等のみ） ---- */ body.yb-bg-night .l-header .c-iconBtn{color:var(--yb-text-on-dark)} body.yb-bg-shu .l-header .c-iconBtn{color:#FBF6F0} /* ===== 補足パッチ㉕ここまで ===== */ /* ===== 補足パッチ㉖：明朝をShippori Mincho B1へ戻す（2026-XX-XX） ===== */ /* 冒頭の@import書き換え（Shippori+Mincho: → Shippori+Mincho+B1:）とセットで適用。後勝ちで冒頭:rootの--yb-font-mincho定義を上書き。無印はフォールバックとして残す（保険の書き方） */ :root{ --yb-font-mincho:'Shippori Mincho B1','Shippori Mincho','Hiragino Mincho ProN',serif; } /* ===== 補足パッチ㉗：monoトークンに和文フォールバック一括追加（2026-07-18） ===== */ /* mono指定箇所の日本語をZen Kakuで受ける。英数字はIBM Plex Mono優先のまま不変 */ :root{ --yb-font-mono:'IBM Plex Mono','Courier New','Zen Kaku Gothic New',monospace; } /* ===== 補足パッチ㉘-2：カテゴリledeを横一列ぶち抜きに（2026-07-18） ===== */ /* loop_start出力がカード用グリッド/フレックスの1マス扱いになるのを解除。グリッド用とフレックス用の両方の書き方を保険で併記（効かない方は無害） */ .archive .taxonomy-description{ grid-column:1 / -1; flex-basis:100%; width:100%; margin-bottom:0; } /* ===== 補足パッチ㉘：lede内側の

余白リセット（任意・2026-07-18） ===== */ .archive .taxonomy-description p{margin:0} /* ===== 補足パッチ㉙：SNSシェアボタンの美術館化（2026-07-18） ===== */ /* SWELL既定のブランドカラー面をやめ、墨の線＋ホバーで朱（世界観1-1）。 SWELL側の配色に負けるため!important＝競合定石の正式仕様。 2026-07-18 実機採取：本サイトの実クラス名は .c-shareBtns__btn（枠）／ .c-shareBtns__icon（アイコン）だったため候補追加。旧候補は保険で残す */ .c-shareBtns .c-shareBtn, .c-shareBtns__btn{ background:transparent !important; color:var(--yb-ink) !important; border:1px solid var(--yb-line) !important; border-radius:var(--yb-radius); transition:color var(--yb-dur-quick) var(--yb-ease), border-color var(--yb-dur-quick) var(--yb-ease); } .c-shareBtns .c-shareBtn__icon, .c-shareBtns__icon{ background:transparent !important; color:inherit !important; } .c-shareBtns a:hover .c-shareBtn__icon, .c-shareBtns .c-shareBtn:hover, .c-shareBtns__btn:hover{ color:var(--yb-shu) !important; border-color:var(--yb-shu) !important; } /* ===== 補足パッチ㉙-2：シェアアイコンのみブランドカラー復帰（2026-07-18） ===== */ /* ㉙で全部が墨色になり目立たなすぎたため、枠＝墨線は維持しつつアイコンの色だけ各SNS公式色へ。ホバー時の朱はこのブロックの最終行がブランド色より後勝ちになるよう順序で担保（行の順番を入れ替えないこと） */ .c-shareBtns__item.-facebook .c-shareBtns__icon{color:#1877F2 !important;} .c-shareBtns__item.-twitter-x .c-shareBtns__icon{color:#0F1419 !important;} .c-shareBtns__item.-pinterest .c-shareBtns__icon{color:#BD081C !important;} .c-shareBtns__item.-line .c-shareBtns__icon{color:#06C755 !important;} .c-shareBtns__item.-hatebu .c-shareBtns__icon{color:#00A4DE !important;} .c-shareBtns__item.-pocket .c-shareBtns__icon{color:#EF4056 !important;} /* ホバー時は従来どおり朱へ（必ずブランド色の行より後に置く） */ .c-shareBtns__btn:hover .c-shareBtns__icon{color:var(--yb-shu) !important;} /* ===== 補足パッチ㉛：常設展の壁（生成り）の黄み調整（2026-07-18） ===== */ /* 元値 #F3EEE4。スマホ実機の黄み対策として青み側へ1段。段階：1段目 #F3EFE9 → 2段目 #F4F1EC → 上限 #F5F2EE （上限超え＝入口の白 #FAF9F5 と区別がつかなくなる） */ :root{ --yb-wall-warm:#F3EFE9; } /* ===== 補足パッチ㉛-2：入口の白の黄み調整（2026-07-18） ===== */ /* 元値 #FAF9F5。--yb-wall-entranceはサイト全体の基本背景（エイリアス--yb-bg経由でbodyにも波及）のため全ページに反映される（折り込み済み）。青み側へ1段：#FAF9F5 → #F9F9F6 */ :root{ --yb-wall-entrance:#F9F9F6; } /* ===== 補足パッチ㉜：ナビ・ヘッダー小調整（2026-07-18） ===== */ /* a) トップ最上部のナビ常時表示は試行→不採用（完全透明を維持・2026-07-18） */ /* ===== 補足パッチ㉜b：追従ヘッダーの半透明化（2026-07-18） ===== SWELLは追従ヘッダーの背景を .l-fixHeader::before（見えない下敷き）で塗っているため、本体へのbackground指定では見た目が変わらなかった。下敷き側を半透明に差し替える。 */ .l-fixHeader::before{background:color-mix(in srgb, var(--yb-wall-entrance) 30%, transparent) !important;} .l-fixHeader{background:transparent !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);} /* 夜の部屋ではヘッダー文字色を白系に反転（yb-bg-nightクラスをbodyが持つ時） */ body.yb-bg-night .l-fixHeader .l-fixHeader__inner *{color:var(--yb-paper) !important;} /* ===== 補足パッチ㉝（改）：カテゴリ＋記事一覧をモルタル壁の薄グレーに（2026-07-18） ===== 追加回Aの生成り指定を上書き。展示室のモルタル壁のイメージ。 ⚠6色目の壁色＝採用時はハンドブック（トークン表）にも追記すること */ :root{--yb-wall-concrete:#F9F9F6;} /* モルタルの薄グレー（試作値・要調整）or 入口の白→現状 */ .archive, .blog{background:var(--yb-wall-concrete);} /* ヘッダー帯（入口の白）との色差が再発しないよう、同じ壁色に揃える */ .archive .l-header, .blog .l-header{background:var(--yb-wall-concrete);} /* ===== 補足パッチ㉞（差し替え版）：スクロールスナップからROOM 08を除外（2026-07-19） ===== 症状＝Chrome(PC)のみ、トップ最下部で手を離すとROOM 08（準備中の展示）へ吸い戻されフッターが見られない。フッターをスナップ点にする初版では解消せず、最後の部屋（ROOM 08）自体をスナップ点から外す方式へ差し替え。 ROOM 08への吸着は失われるが、最下部〜フッターで自由に静止できるようになる。 :has()はパッチ⑮・㉕で採用済みの書き方＝新たなブラウザ要件ではない。スナップ点の実体（yb-room か外側のフルワイド）の環境差に備えた2行の保険 */ .yb-room:has(.yb-coming){scroll-snap-align:none !important;} .swell-block-fullWide:has(.yb-coming){scroll-snap-align:none !important;} /* ===== 補足パッチ㉟：トップの出現モーション減速（2026-07-19） ===== Chrome(PC)はスクロールが機敏＋スナップ着地が速いため出現アニメが駆け足に見える。既存ブロックは触らず後勝ちで時間だけ上書き。ホバー系（--yb-dur-quick）は操作感に直結するため据え置き。もの足りなければ各数値をさらに+0.4s目安で調整 */ /* スクロール出現 .yb-reveal：1.2s → 1.8s */ html.yb-js .yb-reveal{ transition:opacity 1.8s var(--yb-ease), transform 1.8s var(--yb-ease); } /* 宣言の帯：朱線の走り .55s → .85s（開始の間はそのまま） */ html.yb-js .yb-m-line .yb-m-strike::after{ transition:width .85s var(--yb-ease) .55s; } /* タイトルの1行ずつせり上がり：.9s → 1.4s */ html.yb-js .yb-reveal-lines .yb-line > span{ transition:transform 1.4s var(--yb-ease); } /* 今月の展示のマスク開き：1.2s → 1.8s */ html.yb-js .yb-mask-img{ transition:clip-path 1.8s var(--yb-ease); } /* ===== 補足パッチ㊱：ナビ・スマホメニューの日本語を明朝に（2026-07-19） ===== ナビの文字は等幅英字（IBM Plex Mono）指定＝日本語だけ㉗のフォールバックで Zen Kaku（ゴシック）に落ちていた。フォールバックは文字単位で働くため、下記の並びなら英数字はMonoのまま、日本語グリフだけが明朝B1へ落ちる。 .l-fixHeader側の既存指定に!importantがあるため、こちらも!importantで統一 */ .l-header :is(.c-gnav a, nav a), .c-gnav > li > a, .l-fixHeader :is(.c-gnav a, nav a){ font-family:'IBM Plex Mono','Courier New','Shippori Mincho B1','Shippori Mincho',serif !important; } /* スマホの3本線から開くメニュー（SWELLのスライドメニュー。候補並記の保険） */ .p-spMenu a, .p-spMenu .c-listMenu a{ font-family:'IBM Plex Mono','Courier New','Shippori Mincho B1','Shippori Mincho',serif !important; } /* ===== 補足パッチ㊱-2（差し替え版）：MyHomeだけロゴ書体に（2026-07-19） ===== PC・スマホとも同じWPメニュー共用＝番号は同一(3725)。スマホで効かなかった真因は㊱の .p-spMenu .c-listMenu a（クラス2つ）に優先度負けしていたため。.p-spMenu付きの強い行を追加して上回らせる */ .c-gnav li.menu-item-3725 > a, .p-spMenu li.menu-item-3725 > a, li.menu-item-3725 > a{ font-family:'Fraunces','Times New Roman','Shippori Mincho B1','Shippori Mincho',serif !important; font-style:normal; font-weight:400; } /* ===== 補足パッチ㉜b-2：夜モード中はヘッダーの下敷きも夜色に（2026-07-19） ===== 文字の白反転（body.yb-bg-night）と壁の見た目の切り替わりにはスクロール方向によるタイムラグがあり、明るい壁×白文字で読めない窓が生じる。反転中は半透明下敷きを夜の壁色ベースに切り替え、白文字の背後を常に暗く保つ。㉜bの.l-fixHeader::beforeより後＆クラス付きで強いので確実に上書きされる */ body.yb-bg-night .l-fixHeader::before{ background:color-mix(in srgb, var(--yb-wall-night) 55%, transparent) !important; } /* ============================================================ ===== v2-追加回B：About（私という作品） ===== 新部品：肖像の額（.yb-portrait）／改訂履歴（.yb-history） ============================================================ */ /* --- 導入：肖像＋自己紹介の2カラム --- */ .yb-about-intro{ display:grid; grid-template-columns:5fr 7fr; gap:var(--yb-sp-5); align-items:start; } @media(max-width:920px){ .yb-about-intro{grid-template-columns:1fr; gap:var(--yb-sp-4)} } /* 肖像の額（ダミーの抽象画でも写真でも同じ額装に） */ .yb-portrait{ position:relative; overflow:hidden; aspect-ratio:3/4; border:12px solid var(--yb-paper); background:var(--yb-paper); border-radius:var(--yb-radius); box-shadow:0 26px 70px rgba(38,36,31,.16); } .yb-portrait .yb-art{position:absolute; inset:0} .yb-portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover} .yb-portrait .yb-plate{ position:absolute; left:.8rem; bottom:.8rem; z-index:2; background:rgba(251,250,247,.9); padding:.45rem .8rem; border-radius:2px; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--yb-ink-soft); line-height:1.7; } /* 自己紹介の本文（yb-rewriteでの書き換え表現を想定した組版） */ .yb-about-lead{ font-family:var(--yb-font-mincho); font-size:1.12rem; letter-spacing:.08em; line-height:2.5; color:var(--yb-ink); margin:0; } .yb-about-sub{ margin:var(--yb-sp-3) 0 0; color:var(--yb-ink-soft); font-size:.98rem; line-height:2.2; max-width:36em; } /* --- 改訂履歴タイムライン --- */ .yb-history{ position:relative; margin:var(--yb-sp-4) 0 0; padding:0; list-style:none; } .yb-history::before{ /* 版と版をつなぐ縦の糸 */ content:""; position:absolute; left:.55rem; top:.4rem; bottom:.4rem; width:1px; background:var(--yb-line); } .yb-hist-item{ position:relative; margin:0; padding:0 0 var(--yb-sp-5) var(--yb-sp-4); } .yb-hist-item:last-child{padding-bottom:0} .yb-hist-item::before{ /* 打点 */ content:""; position:absolute; left:0; top:.4rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--yb-paper); border:1px solid var(--yb-ink-faint); } /* 現在の版（--now）：打点とタグが朱を帯びる */ .yb-hist-item.--now::before{ border-color:var(--yb-shu); background:var(--yb-shu-soft); } /* 版数タグ */ .yb-hist-ver{ display:inline-block; font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.22em; color:var(--yb-ink-soft); background:var(--yb-paper); border:1px solid var(--yb-line); border-radius:2px; padding:.12rem .55rem; } .yb-hist-item.--now .yb-hist-ver{ color:#FBF6F0; background:var(--yb-shu); border-color:var(--yb-shu); } /* 期間表示 */ .yb-hist-period{ font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.16em; color:var(--yb-ink-faint); margin-left:.6rem; } /* 版の見出し・本文 */ .yb-hist-item h3{ font-family:var(--yb-font-mincho); font-weight:500; font-size:1.25rem; letter-spacing:.12em; line-height:1.9; color:var(--yb-ink); margin:.7rem 0 0; padding:0; border:none; background:none; } .yb-hist-item h3::before,.yb-hist-item h3::after{content:none} .yb-hist-item p{ margin:.6rem 0 0; color:var(--yb-ink-soft); font-size:.98rem; line-height:2.1; max-width:36em; } /* --- 締め --- */ .yb-about-close{ margin-top:var(--yb-sp-6); border-top:1px solid var(--yb-line); padding-top:var(--yb-sp-4); } .yb-about-close .yb-btn-line{margin-right:var(--yb-sp-4)} .yb-about-note{ margin:var(--yb-sp-3) 0 0; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.16em; color:var(--yb-ink-faint); } /* 固定ページのWPタイトル等を非表示（パッチ⑬ルールでbody.なし。SWELL固定ページは.c-pageTitleで出力＝2026-07-19追記） */ .page-id-3992 :is(.c-postTitle, .c-pageTitle, .p-articleThumb){display:none} .page-id-4016 :is(.c-postTitle, .c-pageTitle, .p-articleThumb){display:none} /* ===== v2-追加回B ここまで ===== */ /* ===== 補足パッチ㊱-3：ナビのメインラベルを英語=Fraunces／日本語=明朝に（2026-07-19） ===== メインラベル（span.ttl）だけ書体スタックを差し替え。フォールバックは文字単位で働くため：英数字→Fraunces（MyHomeと同じ立体）／日本語→Shippori Mincho B1（従来どおり）。サブテキスト（span.c-smallNavTitle.desc）は㊱のまま＝英数字Mono／日本語はZen Kaku系。㊱-2（menu-item-3725名指し）はこの指定に包含されるため実質不要になるが、無害なので残置 */ .c-gnav a .ttl, .p-spMenu a .ttl{ font-family:'Fraunces','Times New Roman','Shippori Mincho B1','Shippori Mincho',serif !important; font-style:normal; font-weight:400; } /* --- ㊱-3スマホ対応：スマホメニューは.ttl包みが無いためリンクごと差し替え --- */ /* リンク全体をFraunces優先に（日本語グリフは明朝B1へ落ちる＝従来どおり） */ .p-spMenu .c-listMenu a{ font-family:'Fraunces','Times New Roman','Shippori Mincho B1','Shippori Mincho',serif !important; font-style:normal; font-weight:400; } /* サブテキストだけ㊱の書体（英数字Mono）へ戻す */ .p-spMenu .c-listMenu a .c-smallNavTitle{ font-family:'IBM Plex Mono','Courier New','Shippori Mincho B1','Shippori Mincho',serif !important; } /* ===== 補足パッチ㊲：追従ヘッダー（PC）の中身をフルワイド化（2026-07-19） ===== */ /* 通常ヘッダーと同じく両端いっぱいに。左右の余白は既存のpaddingがそのまま効く */ .l-fixHeader .l-container{ max-width:none; } /* ===== 補足パッチ㊴：a化したyb-plate-cardへの本文リンク装飾の波及打ち消し（2026-07-19） ===== */ /* ROOM 08 NOW OPENカード等、カード自体をリンクにした場合の下線・朱色を無効化 */ a.yb-plate-card, a.yb-plate-card *{ text-decoration:none !important; } a.yb-plate-card:hover, a.yb-plate-card:hover :is(h3, .en){ text-decoration:none !important; } /* ============================================================ ===== v2-追加回C：お問い合わせ（CF7）＋記事メタ ===== ============================================================ */ /* ------------------------------------------------------------ パート1：Contact Form 7 の着せ替え（.yb-contact で包んだフォームにだけ効くスコープ設計） ------------------------------------------------------------ */ .yb-contact{max-width:640px} /* フィールドの器とラベル */ .yb-contact .yb-cf-field{margin:0 0 var(--yb-sp-3)} .yb-contact label{ display:block; font-family:var(--yb-font-mono); font-size:.76rem; letter-spacing:.24em; color:var(--yb-ink-soft); text-transform:uppercase; } /* 入力欄（1行・複数行とも） */ .yb-contact :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea){ display:block; width:100%; margin-top:.6rem; font-family:var(--yb-font-gothic); font-size:1rem; letter-spacing:.04em; color:var(--yb-ink); background:var(--yb-paper); border:1px solid var(--yb-line); border-radius:var(--yb-radius); padding:.85rem 1rem; transition:border-color var(--yb-dur-quick); } .yb-contact :is(input, textarea):focus{ outline:none; border-color:var(--yb-ink); } .yb-contact textarea{min-height:200px; line-height:1.9; resize:vertical} /* 送信ボタン（第13回ニュースレターと同じ文法） */ .yb-contact .wpcf7-submit{ font-family:var(--yb-font-mono); font-size:.84rem; letter-spacing:.22em; color:#FBF6F0; background:var(--yb-ink); border:1px solid var(--yb-ink); border-radius:var(--yb-radius); padding:.9rem 1.8rem; cursor:pointer; transition:background var(--yb-dur-quick), border-color var(--yb-dur-quick); } .yb-contact .wpcf7-submit:hover{ background:var(--yb-shu); border-color:var(--yb-shu); } .yb-contact .wpcf7-spinner{vertical-align:middle} /* 送信中のくるくる */ /* 未入力・形式エラー：朱の校正 */ .yb-contact .wpcf7-not-valid-tip{ display:block; margin-top:.4rem; font-family:var(--yb-font-mono); font-size:.74rem; letter-spacing:.1em; color:var(--yb-shu); } .yb-contact :is(input, textarea).wpcf7-not-valid{ border-color:rgba(224,51,28,.5); } /* 応答メッセージ（送信完了・失敗） */ .yb-contact .wpcf7 form .wpcf7-response-output{ margin:var(--yb-sp-3) 0 0; padding:.8rem 1.1rem; font-family:var(--yb-font-mono); font-size:.8rem; letter-spacing:.1em; border:1px solid var(--yb-line); border-radius:var(--yb-radius); color:var(--yb-ink-soft); } .yb-contact .wpcf7 form.sent .wpcf7-response-output{ /* 送信完了：控えめな緑 */ border-color:#5E7D5A; color:#5E7D5A; } .yb-contact .wpcf7 form:is(.invalid, .failed, .aborted) .wpcf7-response-output{ /* 失敗系：朱 */ border-color:rgba(224,51,28,.5); color:var(--yb-shu); } /* 受付の注記 */ .yb-contact-note{ margin:var(--yb-sp-3) 0 0; font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.16em; color:var(--yb-ink-faint); } /* ------------------------------------------------------------ パート2：記事ページのメタ表示（等幅英字化） .single＝記事ページにだけ効くスコープ（パッチ⑬ルールでbody.を外した読み替え済み） ------------------------------------------------------------ */ /* 記事タイトル：明朝・ゆったり */ .single :is(.c-postTitle__ttl, .c-postTitle, .l-content h1.entry-title){ font-family:var(--yb-font-mincho); font-weight:500; font-size:clamp(1.55rem,3.2vw,2.25rem); letter-spacing:.12em; line-height:1.9; color:var(--yb-ink); } /* 日付などのメタ情報：等幅英字の小文字 */ .single :is(.p-articleMetas, .p-articleMeta, .c-postTimes, .post_info){ font-family:var(--yb-font-mono); font-size:.76rem; letter-spacing:.16em; color:var(--yb-ink-faint); } /* カテゴリリンク → 部屋の札。頭に「ROOM — 」をCSSが自動で添える */ .single :is(.c-categoryList a, .p-articleMetas a[rel="category"], .cat-name, .p-postCategory a){ font-family:var(--yb-font-mono); font-size:.72rem; letter-spacing:.16em; color:var(--yb-ink-soft); border:1px solid var(--yb-line); border-radius:2px; padding:.15em .6em; text-decoration:none; transition:color var(--yb-dur-quick), border-color var(--yb-dur-quick); } .single :is(.c-categoryList a, .p-articleMetas a[rel="category"], .cat-name, .p-postCategory a)::before{ content:"ROOM — "; } .single :is(.c-categoryList a, .p-articleMetas a[rel="category"], .cat-name, .p-postCategory a):hover{ color:var(--yb-shu); border-color:rgba(224,51,28,.4); } /* 【任意】No.表記（任意モジュール導入時に使われる） */ .yb-post-no{ font-family:var(--yb-font-mono); color:var(--yb-ink-faint); letter-spacing:.16em; } /* ===== v2-追加回C ここまで ===== */ /* 補足パッチ㊵：記事カテゴリ札のSWELL既定の赤背景を打ち消し（追加回C検収・2026-07-20。パッチ⑬ルールでbody.なし） */ .single :is(.c-categoryList a, .p-articleMetas a[rel="category"], .cat-name, .p-postCategory a){ background:transparent; } /* ===== 補足パッチ㊶：カテゴリledeの飾り（解説パネル化・2026-07-20） ===== 追加回Aの汎用lede指定＋㉘/㉘-2の上に後勝ちで重ねる飾り。意匠は追加回F（記事h3）の「朱ダッシュ＋明朝」の文法を流用 */ .archive .taxonomy-description{ position:relative; font-family:var(--yb-font-mincho); font-size:1.02rem; letter-spacing:.08em; line-height:2.3; color:var(--yb-ink-soft); max-width:38em; /* ぶち抜き1マスの中で、文章だけ読み物幅に */ padding-left:1.3em; /* 朱ダッシュのぶんの字下げ */ } .archive .taxonomy-description::before{ content:"—"; /* 行頭の朱ダッシュ（キュレーターの書き込み） */ position:absolute; left:0; top:0; font-family:var(--yb-font-mono); color:var(--yb-shu); } /* ===== 補足パッチ㊶ここまで ===== */ /* ===== 補足パッチ㊷：記事本文の明朝化（A案・2026-07-20） ===== .single＝記事ページ限定（パッチ⑬ルール準拠）。 Shippori Mincho B1（㉖で採用済み・本文用設計）を地の文へ。明朝は同サイズだとゴシックより小さく細く見えるため、サイズ半段アップ＋行間広めで補正。やめる時はこのブロックごと削除 */ .single .post_content{ font-family:var(--yb-font-mincho); font-size:1.05rem; /* 約15.75px相当。大きすぎたら1.02remへ */ letter-spacing:.07em; line-height:2.2; /* 冒頭基礎の2をさらに広げる。詰めたければ2.1 */ } /* 太字：明朝の700は擬似的に太らされ潰れるため、読込済みの600を使う */ .single .post_content strong, .single .post_content b{ font-weight:600; } /* コード表記だけは等幅を維持（本文明朝に巻き込まない保険） */ .single .post_content :is(pre, pre *, code){ font-family:var(--yb-font-mono); } /* ===== 補足パッチ㊷ここまで ===== */ /* ===== 補足パッチ㊸：PCナビの文字サイズを13pxに一本化（QAレシピR-2採用・2026-07-20） ===== .l-header :is(...)の.8rem=12px相当が特異性で勝っていたため、同等以上の指定で13pxを正とする。次回整理時に .c-gnav > li > a の font-size:13px 行を削除（F-2対応もそこで完了） */ .l-header :is(.c-gnav a, nav a){font-size:13px;} /* ===== 補足パッチ㊸ここまで ===== */ /* ===== 補足パッチ㊹：color-mix非対応の旧ブラウザ保険（QAレシピR-3採用・2026-07-20） ===== 非対応ブラウザでは追従ヘッダーの下敷きを半透明rgba（入口の白 #F9F9F6 の30%相当）で代替。 @supports not＝「この機能が使えない環境でだけ効く」条件分岐のため、対応ブラウザでは一切適用されず現状の見た目は1pxも変わらない */ @supports not (background: color-mix(in srgb, red 50%, transparent)){ .l-fixHeader::before{ background:rgba(249,249,246,.3) !important; } } /* ===== 補足パッチ㊹ここまで ===== */ /* ===== 補足パッチ㊺：旧記事h2の直書き装飾の打ち消し（2026-07-20） ===== 旧エディタ時代の記事はh2タグ自体に style="border-left:10px solid #e6e6e6;..." 等の装飾が焼き付いている。直書きはCSSより強いため、!importantで章扉デザインを優先させる保険。 ※h3以下は字下げ設計があるため一括打ち消しせず、症状が出たら個別対応 */ .single .post_content h2{ border:none !important; padding:0 !important; background:none !important; } /* 見出し内の直書き文字サイズ（16pt等）も章扉の設計サイズに統一 */ .single .post_content h2 span[style]{ font-size:inherit !important; font-family:inherit !important; } /* ===== 補足パッチ㊽（差し替え版）：検索ボタン＝墨ベタ・ホバー朱ベタ（2026-07-21） ===== 初版（紙色＋薄グレー枠）は壁色に沈んで見えず、ホバーもアイコン色が SWELL側の指定に勝てず枠しか変わらなかったため差し替え。元設計（予備回）の「墨→ホバー朱」をベタ塗りごと切り替える方式＝アイコン色の競合に左右されない。㉙と同じ定石：候補並記＋!important */ .c-searchForm__submit, :is(.search-form, .c-searchForm, form[role="search"]) :is(button, input[type="submit"], .search-submit){ background:var(--yb-ink-faint) !important; color:#FBF6F0 !important; border:1px solid var(--yb-ink-faint) !important; border-radius:var(--yb-radius); transition:background var(--yb-dur-quick), border-color var(--yb-dur-quick); } /* アイコンを白で固定（SVGでもアイコンフォントでも効く保険） */ .c-searchForm__submit :is(svg, i, span){ color:#FBF6F0 !important; fill:currentColor !important; } /* ホバー：ボタンごと朱に */ .c-searchForm__submit:hover, :is(.search-form, .c-searchForm, form[role="search"]) :is(button, input[type="submit"], .search-submit):hover{ background:var(--yb-shu) !important; border-color:var(--yb-shu) !important; }