@charset "UTF-8"; /* Theme Name: Medical Library Child Theme URI: https://medical-library.jp Description: JIN:R child theme for Medical Library Author: メディカルライブラリー編集部 Template: jinr Version: 1.0.0 */ /* ここに子テーマ独自のCSSを書く。 親テーマ（JIN:R）の style.css は functions.php で先に読み込んでいるため、 このファイルの記述が親を上書きする。 */ /* deploy test */ /* 投稿日・更新日は全ページで表示しない。 JIN:R は記事ページ・一覧・関連記事などに日付を出すが、カスタマイザーに 非表示の設定が無いためCSSで抑える。 */ .a--post-date, .p--post-date, .c--post-date, time.entry-date, .jinr-post-date, /* ラッパーごと消さないと、日付テキストだけ消えてアイコンが残る */ .c--jinr-post-date, .o--jinr-post-date { display: none !important; } /* --------------------------------------------------------------------------- * ヘッダーの配色 * * JIN:R は jinr__header_bgcolor_type() の既定値が 'transparent' のため、 * ヘッダーに .d--transparent が付き背景が透明・メニュー文字が白系（#F9FBFF）になる。 * メインビジュアルを敷く前提の配色で、当サイトのように背景が淡色だと文字が読めない。 * * カスタマイザー設定に依存させると横展開のたびに再設定が必要になるため、 * 子テーマのCSSで固定する。design/top.html のモックに合わせた配色。 * * 上書き対象: * .d--transparent → background: transparent（親テーマ style.css） * #globalMenuList .menu-item a … → color: #F9FBFF（JIN:Rが動的に出すインラインCSS） * インラインCSSは の後方に出るため、詳細度を上げたうえで !important を使う。 * ------------------------------------------------------------------------- */ #commonHeader, header.d--transparent, header.d--header-layout1.d--transparent { background: #fffdfa !important; border-bottom: 1px solid #efe9e1; } #commonHeader #globalMenuList .menu-item a, header.d--transparent #globalMenuList .menu-item a, header.d--transparent a.a--spmenu-item-link, header.d--transparent #headerSearch .jin-icons::before, header.d--transparent a.a--sns-item-link .jin-icons::before { color: #33383c !important; } /* --------------------------------------------------------------------------- * サイトタイトル * * JIN:R は #headerLogoLink に和文のサイト名を28pxで出す。design/top.html の * .logo に合わせ、欧文を主・和文を従とした2行組みに置き換える。 * * リンク要素（）はそのまま活かし、中のテキストだけを * 隠して疑似要素で描き直す。テンプレートを差し替えないため、JIN:R 側の * ヘッダー構造の変更に影響されにくい。 * ------------------------------------------------------------------------- */ #commonHeader #headerLogo { /* JIN:R は flex コンテナにしている。内容ぶんの幅を持たせる */ flex: 0 0 auto; width: auto; } #commonHeader #headerLogo #headerLogoLink { /* リンク自体を縦積みの flex にする。元の和文テキストは無名フレックス アイテムになるので font-size:0 で潰し、疑似要素だけを見せる。 （anchor を inline-block のままにすると親 flex の中で幅が 0 に潰れる） */ display: block !important; /* 疑似要素の内容ぶんの幅を確保する。flex コンテキストでは auto が 0 に 潰れてしまい、クリック範囲が無くなるため max-content を明示する */ width: max-content; flex: 0 0 auto; font-size: 0 !important; line-height: 0 !important; color: transparent !important; text-decoration: none; } #commonHeader #headerLogo #headerLogoLink::before, #commonHeader #headerLogo #headerLogoLink::after { display: block; white-space: nowrap; } #commonHeader #headerLogo #headerLogoLink::before { content: "Medical Library"; font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.1; color: #33383c; } #commonHeader #headerLogo #headerLogoLink::after { content: "メディカルライブラリー"; font-family: "IBM Plex Sans JP", system-ui, "Hiragino Sans", "Yu Gothic", sans-serif; font-weight: 400; font-size: 10px; line-height: 1.4; letter-spacing: .16em; color: #7a736c; margin-top: 1px; } /* サブコピーは使わない */ #commonHeader #headerLogo #SiteSubCopy { display: none !important; } /* ロゴが2行になったぶん、ヘッダーに高さの余裕を持たせる（モックは68px） */ #commonHeader #commonHeaderInner { min-height: 68px; } /* --------------------------------------------------------------------------- * フッターの配色 * * JIN:R の既定は濃紺（#22327a）で、サイトの淡色トンマナから浮く。 * ヘッダーと同じ配色に揃える。文字色は JIN:R が動的に出すインラインCSSで * 白系（#F9FBFF）に指定されているため、詳細度を上げて上書きする。 * ------------------------------------------------------------------------- */ #commonFooter { background: #fffdfa !important; border-top: 1px solid #efe9e1; color: #33383c; } #commonFooter #commonFooterInner { background: transparent !important; } /* リンク・パンくず・見出し・コピーライトまで一括で暗色に寄せる */ #commonFooter, #commonFooter a, #commonFooter p, #commonFooter span, #commonFooter div, #commonFooter li, #commonFooter small, #commonFooter .a--breadcrumb-parts, #commonFooter .jin-icons::before { color: #33383c !important; } #commonFooter a:hover { opacity: .7; }