/* ============================================================================ * 焼肉ここから —— TROBZナレッジハブの型を、焼肉ここからのサイトに寄せる上書き * 2026-10-02 実測（https://issei-kokokara.com/news/・/yoyaku_list/・/about/ の計算済みスタイル） * * ・一覧は黒地（サイトと同じ）／★記事（詳細）ページは白地（2026-10-02：詳細ページは白背景で統一） * ・地 黒 #0f0f0f（サイト全体）。面は #1a1a1a、罫線 #2e2e2e * ・文字 白 #fff（見出し）／本文 #e6e6e6／補足 #bbb（サイトの日付・タブと同じ） * ・英字見出し Oswald 600・字間広め・大きく（「NALLOW DOWN」）＋後ろに巨大な英字を #1f1f1f で透かす * ・和文見出し 見出ゴMB31（サイトの Adobe Fonts。読めない環境ではゴシックの太字） * ・差し色 赤 #d90000（ロゴ・メインビジュアルの強調）。主ボタンの面に使う（白文字 5.32:1） * ・副ボタン サイトの「予約する」と同じ 薄いグレー #cecece＋#333・角丸5px * ・写真・カード 角なし／影なし。カードの右に白い矢印（お知らせ一覧と同じ） * * ★指定は #content.tzKoko から書く（base.css の #content.tzc の指定に負けないように） * ★TROBZのCSSは墨色（--ink）を「文字の色」と「濃い面の色」の両方に使う。 * 変数を白にすると濃い面まで白くなるので、変数は暗いまま、文字と面を部品ごとに上書きする。 * ========================================================================== */ :root, .ls, .areaNewsDetail .detailContent #toc_container.kToc, #content .kc, .kcBar, #content .wp, .rl{ --ink:#0f0f0f; --ink-rgb:15,15,15; --deep:#000; --gold:#d90000; /* 差し色（TROBZの金の位置）＝赤 */ --gold-dark:#ff5a5a; /* 黒地の上の差し色の文字（#d90000 は黒地で 3.8:1 のため明るくする。5.9:1） */ --gold-pale:#2a1414; --gold-light:#ff8080; --pale:#1f1f1f; /* 透かし番号＝サイトの巨大な英字と同じ色 */ --soft:#1a1a1a; --line:#2e2e2e; --muted:#bbbbbb; --en:"oswald","Oswald",sans-serif; } /* ---------- 地と文字 ---------- */ #content.tzKoko{background:#0f0f0f;color:#e6e6e6;font-family:"a-otf-midashi-go-mb31-pr6n","YakuHanJP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif} #content.tzKoko .areaList, #content.tzKoko .areaNewsDetail{background:#0f0f0f;padding:80px 0 120px} /* 見出し帯（テーマの .news 等と同じ写真の出し方） */ .tzc-hero .ly_mv_common_wrap_img{height:560px;max-height:560px;background:url(/wp-content/themes/kokokara/img/news/news-mv.jpg) center center/cover no-repeat;position:relative;z-index:10} @media (max-width:768px){.tzc-hero .ly_mv_common_wrap_img{height:300px;max-height:300px}} /* パンくず（テーマに無いので、日付・タブと同じ小さなグレーで控えめに） */ #content.tzKoko .tzc-bc{max-width:1200px;margin:0 auto;padding:24px 30px 0} #content.tzKoko .tzc-bc ul{display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.06em;color:#bbb} #content.tzKoko .tzc-bc li+li::before{content:"／";margin:0 8px;color:#555} #content.tzKoko .tzc-bc a{color:#bbb;text-decoration:none} #content.tzKoko .tzc-bc a:hover{color:#fff} /* ---------- 一覧：大きな英字＋小さな和文＋後ろに巨大な英字（サイトの見出しの作法） ---------- */ #content.tzKoko .ls{position:relative} #content.tzKoko .ls::before{content:"COLUMN";position:absolute;right:-20px;top:-60px;z-index:0;font-family:var(--en);font-weight:600;font-size:clamp(90px,15vw,210px);line-height:1;letter-spacing:.02em;color:#1f1f1f;pointer-events:none} #content.tzKoko .ls > *{position:relative;z-index:1} #content.tzKoko .lsHead > div{display:flex;flex-direction:column-reverse} #content.tzKoko .lsHead h2{margin:0;font-family:var(--en);font-weight:600;font-size:clamp(44px,6vw,80px);letter-spacing:4px;line-height:1.1;color:#fff} #content.tzKoko .lsLabel{margin-top:14px;font-family:inherit;font-size:14px;letter-spacing:.075em;color:#bbb} #content.tzKoko .lsLabel::before{display:none} #content.tzKoko .lsCount, #content.tzKoko .lsCount b{color:#bbb} #content.tzKoko .lsNav p{font-family:var(--en);font-weight:600;letter-spacing:.2em;color:#fff} #content.tzKoko .lsNav ul{border-top-color:#fff} #content.tzKoko .lsNav a{border-bottom-color:#2e2e2e;color:#bbb} #content.tzKoko .lsNav a:hover, #content.tzKoko .lsNav a.on{color:#fff} #content.tzKoko .lsNav a i{background:#d90000} #content.tzKoko .lsNav a small{color:#777} #content.tzKoko .lsCats{border-bottom-color:#2e2e2e} #content.tzKoko .lsCats a{color:#bbb} #content.tzKoko .lsCats a.on, #content.tzKoko .lsCats a:hover{color:#fff} #content.tzKoko .lsCats a.on::after{background:#fff} #content.tzKoko .ls .lsImg, #content.tzKoko .ls .lsPick .lsImg{border-radius:0;background:#1a1a1a} #content.tzKoko .ls .lsTitle{color:#fff;font-size:17px;line-height:1.6;letter-spacing:.075em} #content.tzKoko .ls .lsTitle span{background-image:linear-gradient(#d90000,#d90000)} #content.tzKoko .lsMeta .c{color:#ff5a5a;font-family:inherit} #content.tzKoko .lsMeta .d{color:#bbb;font-family:var(--en);letter-spacing:.1em} #content.tzKoko .lsMeta .c + .d::before{background:#444} #content.tzKoko .lsNew{font-family:var(--en);font-weight:600;letter-spacing:.2em;color:#d90000} #content.tzKoko .lsPick .lsGo{color:#fff} #content.tzKoko .lsGrid::before{background:#2e2e2e} /* カードの右下に白い矢印（お知らせ一覧と同じ） */ #content.tzKoko .ls .lsGrid > li > a{position:relative;display:block;padding-bottom:6px} #content.tzKoko .ls .lsGrid > li > a::after{content:"";position:absolute;right:2px;bottom:10px;width:22px;height:16px;background:url(/wp-content/themes/kokokara/img/arrow-right.png) center/contain no-repeat;transition:transform .4s} #content.tzKoko .ls .lsGrid > li > a:hover::after{transform:translateX(5px)} #content.tzKoko .ls .lsGrid > li > a > div{padding-right:34px} #content.tzKoko .ls .lsMore{border:1px solid #fff;background:transparent;color:#fff} #content.tzKoko .ls .lsMore:hover{background:#fff;color:#0f0f0f} #content.tzKoko .ls .lsMore small{color:#bbb} #content.tzKoko .tzc-empty__ttl{color:#fff} #content.tzKoko .tzc-empty__btn{border-color:#fff;color:#fff} /* ############################################################################ * 記事（詳細）ページは白地（2026-10-02 畔栁さん：詳細ページは白背景で統一） * 一覧はサイトに合わせて黒地のまま。記事は白地に、サイトの文字色 #121212・差し色の赤・英字の Oswald * ★白地の上では、白文字の透明な固定ヘッダーが消えるので、記事ページだけヘッダーに黒い地を敷く * ★記事／一覧の見分けは、プラグインが外枠に付ける is-single／is-list で行う（テーマの body クラスに頼らない） * ######################################################################### */ /* ヘッダーの地は透けない黒にする（半透明だと、下を流れる本文の文字が透けて読みにくい。2026-10-02 本番で確認） */ body:has(#content.tzc.is-single) .wrap > header{background:#0f0f0f!important} /* 目次から飛んだとき、見出しが固定ヘッダーの下に隠れないようにする */ #content.tzKoko.is-single .detailContent h2{scroll-margin-top:200px} @media (max-width:768px){#content.tzKoko.is-single .detailContent h2{scroll-margin-top:90px}} /* 色の変数（記事ページだけ白地用に戻す） */ #content.tzc.is-single, #content.is-single .areaNewsDetail .detailContent #toc_container.kToc, #content.is-single .kc, #content.is-single .kcBar, #content.is-single .wp, #content.is-single .rl{ --ink:#121212; --ink-rgb:18,18,18; --deep:#0f0f0f; --gold:#d90000; --gold-dark:#c40000; /* 白地で 5.9:1 */ --gold-pale:#fbe5e5; --gold-light:#f3b3b3; --pale:#f0f0f0; /* 透かし番号 */ --soft:#f6f6f6; --line:#e3e3e3; --muted:#6f6f6f; } #content.tzKoko.is-single{background:#fff;color:#333} #content.tzKoko.is-single .areaNewsDetail{background:#fff} #content.tzKoko.is-single .tzc-bc ul, #content.tzKoko.is-single .tzc-bc a{color:#6f6f6f} #content.tzKoko.is-single .tzc-bc a:hover{color:#121212} #content.tzKoko.is-single .tzc-bc li+li::before{color:#bbb} /* ---------- 記事 ---------- */ #content.tzKoko .areaNewsDetail .detailIntro .introCat li a{background:#d90000;color:#fff;border-radius:0;padding:4px 14px} #content.tzKoko .areaNewsDetail .detailIntro .introUpdate{color:#6f6f6f;font-family:var(--en);letter-spacing:.1em} #content.tzKoko .areaNewsDetail .detailTitle{color:#121212;font-size:30px;line-height:1.55;letter-spacing:.05em;border-bottom-color:#e3e3e3} #content.tzKoko .areaNewsDetail .detailTitle::after{background:#d90000} #content.tzKoko .areaNewsDetail .detailWrap{background:#fff;border:1px solid #e8e8e8;border-radius:0;box-shadow:none;padding:60px 70px} @media (max-width:768px){#content.tzKoko .areaNewsDetail .detailWrap{padding:26px 16px}} #content.tzKoko .areaNewsDetail .detailWrap .detailContent{color:#333;font-size:16px;line-height:2.1;letter-spacing:.06em} #content.tzKoko .detailContent > p{color:#333;font-size:16px;line-height:2.1;letter-spacing:.06em;font-family:"YakuHanJP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif} #content.tzKoko .areaNewsDetail .detailWrap .detailContent p:not(:has(a)) b{color:#121212;text-decoration-color:rgba(217,0,0,.25)} #content.tzKoko .areaNewsDetail .detailWrap .detailContent h2{color:#121212;font-size:28px;letter-spacing:.05em} #content.tzKoko .areaNewsDetail .detailWrap .detailContent h2[data-no]::before{font-family:var(--en);font-weight:600;font-size:130px;top:-34px;color:#f0f0f0} #content.tzKoko .areaNewsDetail .detailWrap .detailContent h2::after{background:linear-gradient(90deg,#d90000,#f3c4c4 45%,#e3e3e3)} #content.tzKoko .areaNewsDetail .detailWrap .detailContent h3{color:#121212;font-size:19px} #content.tzKoko .areaNewsDetail .detailWrap .detailContent h3::after{background:#d90000} #content.tzKoko .detailContent > table th{background:#121212;color:#fff} #content.tzKoko .detailContent > table td{border-bottom-color:#e3e3e3;color:#333} #content.tzKoko .detailContent > table caption{color:#121212} #content.tzKoko .detailContent > ul > li::before{color:#d90000} /* 目次 */ #content.tzKoko .areaNewsDetail .detailContent #toc_container.kToc .kTocTitle{color:#121212;font-family:var(--en);font-weight:600} #content.tzKoko .areaNewsDetail .detailContent #toc_container.kToc .tTx{color:#333} #content.tzKoko .areaNewsDetail .detailContent #toc_container.kToc a:hover .tTx{color:#121212} #content.tzKoko .areaNewsDetail .detailContent #toc_container.kToc .tNo{color:#d90000;font-family:var(--en);font-weight:600} /* ---------- CTA（白地。柔らかい面は薄いグレー、濃い面はサイトの黒、主ボタンは赤、副ボタンはサイトの「予約する」と同じグレー） ---------- */ #content.tzKoko .kc .d1a, #content.tzKoko .kc .d2a, #content.tzKoko .kc .d2b, #content.tzKoko .kc .d3d, #content.tzKoko .kc .kcLine{background:#fff;border:1px solid #e3e3e3;border-radius:0;box-shadow:none;color:#333} #content.tzKoko .kc .d2c, #content.tzKoko .kc .d2c--pale, #content.tzKoko .kc .kcLine--cream{background:#f6f6f6;border:1px solid #ececec;border-radius:0} #content.tzKoko .kc .d2b--soft{background:#f6f6f6;border-color:#ececec} #content.tzKoko .kc .d3dSide{background:#0f0f0f;color:#fff} #content.tzKoko .kc .d3dSide .kTitle{color:#fff} #content.tzKoko .kc .kTitle, #content.tzKoko .kc .d3dList b{color:#121212} #content.tzKoko .kc .kText, #content.tzKoko .kc .kChecks li, #content.tzKoko .kc .d3dList .t, #content.tzKoko .kc .kcLineTxt p{color:#333} #content.tzKoko .kc .kNote, #content.tzKoko .kc .kcLineTxt small{color:#6f6f6f} #content.tzKoko .kc .kEn, #content.tzKoko .kc .d2cLbl{font-family:var(--en);font-weight:600;letter-spacing:.2em;color:#c40000} #content.tzKoko .kc .d3dSide .kEn{color:#ff5a5a} #content.tzKoko .kc .kEn::before, #content.tzKoko .kc .d2cLbl::before, #content.tzKoko .kc .d2cLbl::after{background:#d90000} #content.tzKoko .kc .d3dList li{border-color:#e3e3e3} #content.tzKoko .kc .d3dList .n{color:#d90000;font-family:var(--en);font-weight:600} #content.tzKoko .kc .d2cTags li{background:#fff;border-color:#e3e3e3;color:#333} #content.tzKoko .kc .kChecks li::before{background:#fbe5e5} #content.tzKoko .kc .d3dBadge{background:#d90000;color:#fff;border-radius:0} #content.tzKoko .kc .d1aArt{padding:0;overflow:hidden;background:#0f0f0f} #content.tzKoko .kc .d1aArt img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0} #content.tzKoko .kc [data-ghost]::after, #content.tzKoko .kc [data-ghost]::before{color:rgba(0,0,0,.035)} #content.tzKoko .kc .d3dSide[data-ghost]::after, #content.tzKoko .kc .d3dSide[data-ghost]::before{color:rgba(255,255,255,.05)} /* ブランド名（ロゴ画像の代わりの文字） */ #content.tzKoko .kc .tzc-brand{display:inline-block;height:auto;width:auto;font-family:"a-otf-midashi-go-mb31-pr6n",sans-serif;font-weight:700;font-size:15px;letter-spacing:.12em;color:#121212;white-space:nowrap} #content.tzKoko .kc .d3dSide .tzc-brand{color:#fff} /* 主ボタン：赤の面・白の太字・角丸5px */ #content.tzKoko .kBtn, #content.tzKoko .kBtn--gold{border-radius:5px;background:#d90000;color:#fff;font-weight:700;letter-spacing:.1em;padding:0 22px 0 28px;min-height:56px} #content.tzKoko .kBtn::before{display:none} #content.tzKoko .kBtn i, #content.tzKoko .kBtn--gold i{width:auto;height:auto;background:none;color:#fff} #content.tzKoko .kBtn:hover, #content.tzKoko .kBtn--gold:hover{background:#b30000} #content.tzKoko .kBtn--sm{min-height:42px;padding:0 16px 0 20px;font-size:13px} /* 副ボタン：サイトの「予約する」と同じグレー */ #content.tzKoko .kLink{padding:11px 22px;border:0;border-radius:5px;background:#cecece;color:#333;font-weight:500} #content.tzKoko .kLink::after{border-color:#333} #content.tzKoko .kLink:hover{background:#bdbdbd} /* ---------- 監修企業（上段はサイトの黒、下段は白） ---------- */ #content.tzKoko .wp .pA{background:#fff;border:1px solid #e3e3e3;border-radius:0;box-shadow:none;overflow:hidden} #content.tzKoko .wp .pA .wpInk{background:#0f0f0f} #content.tzKoko .wp .wpInk .wpLabel span{font-family:var(--en);font-weight:600;color:#ff5a5a} #content.tzKoko .wp .wpInk .wpLabel small{color:#bbb} #content.tzKoko .wp .wpName{color:#fff;font-family:"a-otf-midashi-go-mb31-pr6n",sans-serif} #content.tzKoko .wp .wpName small{color:#bbb;font-family:var(--en)} #content.tzKoko .wp .wpRole, #content.tzKoko .wp .pA .wpInk .wpBio{color:#e6e6e6} #content.tzKoko .wp .pABody{background:#fff} #content.tzKoko .wp .pACo{background:#f6f6f6;border-radius:0} #content.tzKoko .wp .pACo .wpLabel span{font-family:var(--en);font-weight:600;color:#c40000} #content.tzKoko .wp .wpCo dt{color:#6f6f6f} #content.tzKoko .wp .wpCo dd{color:#121212} #content.tzKoko .wp .wpCo div{border-top-color:#e3e3e3} #content.tzKoko .wp .wpGo, #content.tzKoko .wp .pACo .wpGo, #content.tzKoko .wp .pACoLinks .wpGo{border-color:#e3e3e3;background:transparent} #content.tzKoko .wp .wpGoItem{color:#121212} #content.tzKoko .wp .wpGoItem small{color:#c40000;font-family:var(--en);font-weight:600} #content.tzKoko .wp .pACo .wpGoItem + .wpGoItem{border-left-color:#e3e3e3} /* ---------- 関連記事 ---------- */ #content.tzKoko .detailRelated{background:#fff;border:1px solid #e8e8e8;box-shadow:none;border-radius:0} #content.tzKoko .rl .rlLabel{font-family:var(--en);font-weight:600;color:#c40000} #content.tzKoko .rl .rlLabel::before{background:#d90000} #content.tzKoko .rl .rlHead h3{color:#121212} #content.tzKoko .rl .rlHead h3 small{color:#6f6f6f} #content.tzKoko .rl .rlMoreCat{color:#333} #content.tzKoko .rl .rlMoreCat b{color:#c40000} #content.tzKoko .rl .rlImg, #content.tzKoko .rl .rlBig a{border-radius:0} #content.tzKoko .rl .rlSmall .rlTitle{color:#121212} #content.tzKoko .rl .rlMeta .c{color:#c40000} #content.tzKoko .rl .rlMeta .d{color:#6f6f6f;font-family:var(--en)} #content.tzKoko .rl .rlBig .rlMeta .c, #content.tzKoko .rl .rlBig .rlMeta .d{color:#fff} #content.tzKoko .rl .rlAll{padding:14px 34px;border:1px solid #121212;color:#121212;background:#fff} #content.tzKoko .rl .rlAll:hover{background:#121212;color:#fff} /* ---------- スマホの画面下の帯 ---------- */ #content.tzKoko .kcBar--ink .kcBarLink{border-radius:5px;background:#0f0f0f} #content.tzKoko .kcBar .kcBarBtn{border-radius:5px;background:#d90000;color:#fff} /* ---------- スマホ・文字組み（2026-10-02 実機幅で確認して追加） ---------- */ /* テーマの均等割り付けを打ち消す（見出しが「目　の　前　で」と間延びするため） */ #content.tzKoko .kc .kTitle, #content.tzKoko .kc .kText, #content.tzKoko .kc p, #content.tzKoko .lsTitle, #content.tzKoko .rlTitle, #content.tzKoko .detailTitle, #content.tzKoko .detailContent > p, #content.tzKoko .wp p{text-align:left} /* 監修企業の会社情報の枠（スマホでカードになるときの白い枠を黒地に合わせる） */ #content.tzKoko .wp .pAPane, #content.tzKoko .wp .pACo, #content.tzKoko .wp .pASlide{border-color:#e3e3e3!important;box-shadow:none!important} #content.tzKoko .wp .pAPane, #content.tzKoko .wp .pASlide{background:transparent!important} /* スマホのCTAではブランド名を出さない（base.css のコンパクト化と同じ） */ @container kc (max-width: 600px){ #content.tzKoko .kc .tzc-brand{display:none} } /* ---------- フッター上の写真（コラムのページだけ出さない。2026-10-02 畔栁さん） テーマはこの写真の上にフッターの文字を視差効果（rellax）でずらして重ねるため、文字と写真がかぶって読みにくい。 写真を消し、フッターの文字の位置ずらしも止める ---------- */ body:has(#content.tzc) footer .footer_top_img{display:none!important} body:has(#content.tzc) footer .rellax{transform:none!important}