/** * note風の見た目に寄せる上書きCSS（Lトモ！） * * 親テーマ magazine-hoot の既定色（#d22254 の赤紫）と、古いUIの装飾を today 風に置き換える。 * 親テーマ・子テーマ本体のCSSは触らず、ここで最後に上書きする。 * * 方針: * ・色数を減らす。文字は濃いグレー、線は薄いグレー、差し色は温かみのある金色ひとつ * ・リンクは色で目立たせず、下線で示す（noteと同じ考え方） * ・スマホでの可読性を最優先（行間広め・文字は小さすぎない） */ :root { --mm-text: #1f2328; /* 本文 */ --mm-text-sub: #5f6368; /* 補足 */ --mm-muted: #8a8f95; /* さらに薄い */ --mm-line: #eaeaea; /* 罫線 */ --mm-line-strong: #dcdcdc; --mm-accent: #b47c00; /* 差し色（既存の金色を継承） */ --mm-accent-soft: #f5efe3; --mm-bg: #ffffff; } /* --------------------------------------------------------------- * 1. ヘッダー（トップバー） * 影をなくし、背景は白、上下に1pxの線だけ * ------------------------------------------------------------- */ #header, #header .header-part, #header-primary, #header-supplementary { background: var(--mm-bg) !important; box-shadow: none !important; -webkit-box-shadow: none !important; text-shadow: none !important; } #header { border-top: 1px solid var(--mm-line) !important; border-bottom: 1px solid var(--mm-line) !important; } /* 親テーマが持っている二重の境界線・影を消す */ #header .header-part, #header-primary, #branding { border-bottom: 0 !important; } #header-supplementary { border-bottom: 0 !important; border-top: 0 !important; } #header:after, #header:before, #header-primary:after, .header-part:after { display: none !important; } /* ロゴ */ #site-title, #site-title a { color: var(--mm-text) !important; text-shadow: none !important; } /* --------------------------------------------------------------- * 2. 文字と色（赤紫をやめる） * ------------------------------------------------------------- */ body { color: var(--mm-text); background: var(--mm-bg) !important; /* 旧: #f7f7f7 のくすんだ灰色 */ border-top: 0 !important; /* 旧: 3px の濃紺の帯 */ -webkit-font-smoothing: antialiased; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, -apple-system, sans-serif; } /* 本文中のリンクは色で主張せず、下線で示す */ .entry-the-content a, .entry-content a, .mm-safety a { color: var(--mm-text) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mm-line-strong); transition: none; } .entry-the-content a:hover, .entry-content a:hover, .mm-safety a:hover { color: #000 !important; text-decoration-color: var(--mm-accent); } /* 一覧の投稿タイトルは黒。赤紫をやめる */ .job_listings a, .job_listings a:hover, .job_listing a, .job_listing h3, .job_listing .position h3 { color: var(--mm-text) !important; text-decoration: none !important; } .job_listing .company, .job_listing .location, .job_listing .date, .job_listing .meta li.date { color: var(--mm-muted) !important; } /* 親テーマの差し色（赤紫）を金色に寄せる */ a { color: var(--mm-accent); } .accent-typo, .cat-typo, .cat-label { background: var(--mm-accent) !important; color: #fff !important; } .menu-items > li.current-menu-item > a, .menu-items > li.current-menu-ancestor > a, .menu-items > li:hover > a, .sf-menu ul li:hover > a, .entry-footer .entry-byline { color: var(--mm-accent) !important; } /* --------------------------------------------------------------- * 3. 一覧（募集カード） * ------------------------------------------------------------- */ ul.job_listings { border-top: 1px solid var(--mm-line); } ul.job_listings li.job_listing { border-bottom: 1px solid var(--mm-line) !important; padding: 16px 14px !important; transition: background .15s ease; } ul.job_listings li.job_listing:hover { background: #fafafa; } ul.job_listings li.job_listing .position h3 { font-size: 15.5px !important; font-weight: 700; line-height: 1.55; margin: 0 0 3px !important; } ul.job_listings li.job_listing .company strong { font-weight: 400; font-size: 13px; color: var(--mm-text-sub) !important; } ul.job_listings li.job_listing .location { font-size: 11.5px !important; } /* 注目の募集（管理人の案内）の黄色を、控えめな枠に */ li.job_listing.job_position_featured, ul.job_listings li.job_position_featured, .job_listings .job_position_featured { background: #fbfaf7 !important; border-left: 3px solid var(--mm-accent) !important; } /* 黄色は li ではなく内側の a に指定されているので、そちらを上書きする */ ul.job_listings li.job_listing.job_position_featured a, ul.job_listings li.job_listing.job_position_featured a:hover, ul.job_listings li.job_listing.job_position_featured a:focus, .rp4wp-related-job_listing > ul li.job_listing.job_position_featured a { background: transparent !important; } /* 読みやすい幅に収める（noteは本文の行長を抑えている） */ #frontpage-page-content .hgrid, .content-frontpage .main-content-grid { max-width: 860px; } /* 投稿詳細・一覧のタグ行 float で横並びにしているため、折り返した2行目に隙間ができない。 flex + row-gap に変えて、行間を自然に空ける */ ul.job-listing-meta, ul.job-listing-meta.meta { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 8px; margin: 0 0 4px !important; padding-left: 0 !important; list-style: none; } ul.job-listing-meta > li { float: none !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; } /* 一覧カードは「左＝タイトル／右＝地域・タグ・日時」の2列にする。 もともと float で並んでいたため、長いタグが折り返すと行がずれていた */ ul.job_listings li.job_listing a { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 14px; } ul.job_listings li.job_listing .position { flex: 1 1 auto; min-width: 0; float: none !important; width: auto !important; } ul.job_listings li.job_listing .mm-card-right { flex: 0 0 auto; max-width: 52%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; } ul.job_listings li.job_listing .location { float: none !important; width: auto !important; margin: 0 !important; text-align: right; } /* タグは右寄せ。折り返しても右端がそろう */ ul.job_listings li.job_listing ul.meta { display: flex !important; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 10px; row-gap: 5px; text-align: right; margin: 0 !important; padding-left: 0 !important; list-style: none; float: none !important; width: auto; } ul.job_listings li.job_listing ul.meta > li { float: none !important; margin: 0 !important; padding: 0 !important; line-height: 1.5 !important; white-space: nowrap; font-size: 11px !important; } /* 投稿日時はタグと同じ行にせず、必ず次の行に送る */ ul.job_listings li.job_listing ul.meta > li.date { flex-basis: 100%; text-align: right; margin-top: 1px !important; color: var(--mm-muted) !important; } /* 「恋人募集」などの色付きラベルは、余白を戻して形を保つ */ ul.job-listing-meta > li.job-type { padding: 4px 10px !important; border-radius: 6px; line-height: 1.4 !important; } /* 記事タイトルの左右の余白。 本文には余白があるのにタイトルだけ画面端まで伸びていたため、そろえる */ #loop-meta .hgrid, .loop-meta-wrap .hgrid { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; } /* 記事タイトル（告知など。長いので少し小さめに） */ .singular h1.loop-title, h1.loop-title:not(.archive-title) { font-size: 20px !important; line-height: 1.6 !important; font-weight: 700; color: var(--mm-text) !important; text-align: left !important; /* 中央揃えだと行ごとに端がそろわず読みにくい */ } @media (max-width: 600px) { .singular h1.loop-title, h1.loop-title:not(.archive-title) { font-size: 17px !important; } } /* 見出し */ h1.loop-title, .loop-title.archive-title { font-size: 18px !important; font-weight: 700; color: var(--mm-text) !important; letter-spacing: .01em; } .loop-description p { font-size: 12.5px; color: var(--mm-muted); } /* --------------------------------------------------------------- * 4. トップの案内文（スマホでの可読性を優先） * ------------------------------------------------------------- */ /* 上下の余白をそろえる。 旧: 枠の上が45px、枠の下が0px でぶつかっていた */ #frontpage-page-content { margin-top: 24px !important; } .top-intro { font-size: 14px !important; line-height: 1.85 !important; color: var(--mm-text-sub) !important; letter-spacing: .01em; margin-top: 0 !important; } /* note の注意書きボックス（m-warningMessage__warning）と同じ作り。 実測値: 背景 #fefbea / 枠 1px #a69735 / 角丸 8px / padding 16px タイトル 0.875rem 600 / 本文 0.75rem 行間1.5 / 文字色は下の変数どおり */ .top-intro .intro-block { background: #fefbea !important; border: 1px solid #a69735 !important; border-radius: 8px !important; padding: 16px !important; margin: 0 0 24px !important; color: rgba(8, 19, 26, .66) !important; font-size: .8125rem !important; /* 13px。noteの本文0.75remだと日本語が小さすぎるので少しだけ上げる */ line-height: 1.7 !important; } .top-intro .intro-block p { margin: 0 !important; color: rgba(8, 19, 26, .66) !important; } .top-intro .mm-lead { font-size: 15px !important; font-weight: 700; color: var(--mm-text) !important; line-height: 1.65; margin: 0 0 18px !important; } .top-intro .mm-news { border: 1px solid var(--mm-line); border-radius: 10px; padding: 14px 16px; margin: 0 0 20px !important; } .top-intro .mm-news-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--mm-text) !important; line-height: 1.6; margin-bottom: 5px; } .top-intro .mm-news-body { display: block; font-size: 13px; line-height: 1.8; color: var(--mm-text-sub); } .top-intro .mm-note { font-size: 13px !important; line-height: 1.8 !important; color: var(--mm-text-sub) !important; } /* 注意文（.mm-note）とリストの左右をそろえる。 テーマ既定で ul に左マージン13pxが付いていて、文とずれて見えていた */ .top-intro ul { font-size: 13px !important; line-height: 1.8 !important; color: var(--mm-text-sub) !important; margin: 0 0 20px !important; padding: 0 !important; list-style: none !important; list-style-type: none !important; } .top-intro ul li { position: relative; padding-left: 1.1em; margin: 0 0 6px !important; list-style: none !important; } .top-intro ul li:before { content: "・"; position: absolute; left: 0; color: #b9b9b9; } /* 注意文の本文も、アイコン分だけ字下げして行頭をそろえる */ .top-intro .mm-note { position: relative; padding-left: 1.5em; margin: 0 0 10px !important; } .top-intro .mm-note .mm-ico { position: absolute; left: 0; top: .28em; margin: 0; } .top-intro hr { border-top: 1px solid var(--mm-line) !important; } /* Font Awesome のアイコン（絵文字の置き換え） */ .mm-ico { color: var(--mm-accent); margin-right: .45em; font-size: .95em; } /* --------------------------------------------------------------- * 4-2. 新規投稿ページの注意書き * 以前は全文が赤の太字で、かえって読み飛ばされていた。 * 落ち着いた枠にまとめ、強調は本当に大事な語だけに絞る。 * ------------------------------------------------------------- */ .mm-submit-notice { background: #fefbea; border: 1px solid #a69735; border-radius: 8px; padding: 16px; margin: 0 0 22px; color: rgba(8, 19, 26, .72); font-size: 13px; line-height: 1.75; } .mm-submit-notice__title { margin: 0 0 10px !important; font-size: 14px; font-weight: 700; color: #1f2328; line-height: 1.5; } .mm-submit-notice__title i { color: #916626; margin-right: .4em; } .mm-submit-notice__list { margin: 0 !important; padding: 0 !important; list-style: none !important; list-style-type: none !important; } .mm-submit-notice__list li:marker { content: none; } .mm-submit-notice__list li { position: relative; padding-left: 1.1em; margin: 0 0 7px !important; } .mm-submit-notice__list li:last-child { margin-bottom: 0 !important; } .mm-submit-notice__list li:before { content: "・"; position: absolute; left: 0; color: #a69735; } .mm-submit-notice strong { font-weight: 700; color: #1f2328; } .mm-submit-notice a { color: #1f2328 !important; text-decoration: underline; text-underline-offset: 3px; } .mm-submit-notice__case { margin: 12px 0 0 !important; padding-top: 10px; border-top: 1px solid #e6dfc4; font-size: 12px; color: rgba(8, 19, 26, .55); line-height: 1.7; } @media (max-width: 600px) { .mm-submit-notice { font-size: 12.5px; padding: 14px; } .mm-submit-notice__title { font-size: 13.5px; } .mm-submit-notice__case { font-size: 11.5px; } } /* 注意書きの下に続く細かい決まりごと（旧: すべて太字の ※ 羅列） */ .mm-submit-rules { margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; list-style-type: none !important; font-size: 12.5px; line-height: 1.8; color: var(--mm-text-sub); } .mm-submit-rules li { position: relative; padding-left: 1.1em; margin: 0 0 6px !important; } .mm-submit-rules li:before { content: "・"; position: absolute; left: 0; color: #b9b9b9; } .mm-submit-rules strong { color: var(--mm-text); font-weight: 700; } /* --------------------------------------------------------------- * 5. ボタン・フォーム * ------------------------------------------------------------- */ /* 新規投稿ボタン（noteの「会員登録」ボタンと同じ作り） ・角を丸めた塗りつぶしのピル型 ・アイコンなし、太字、字間ゆったり ・押した感じが分かるよう、hoverで少し暗く、activeで沈む */ a.cp_btn, a.cp_btn:visited { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 168px; min-height: 46px; padding: 0 26px !important; border: 0 !important; border-radius: 8px !important; background: #07141a !important; color: #fff !important; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; transition: background .15s ease, transform .06s ease; margin-left: auto; } a.cp_btn:hover { background: #1c2a31 !important; color: #fff !important; opacity: 1 !important; } a.cp_btn:active { transform: translateY(1px); } a.cp_btn:focus-visible { outline: 2px solid #07141a; outline-offset: 2px; } /* ボタンを右端に置くための入れ物 */ .job_listings + div, div:has(> a.cp_btn) { display: flex; justify-content: flex-end; } /* 送信・検索などのボタンも、投稿ボタンと同じ黒でそろえる */ input[type="submit"], button[type="submit"], .job-manager-form input[type="submit"], .search_jobs input[type="submit"], .wpcf7-form input[type="submit"], .wpcf7-submit, .mm-report-send, .button, input[type="button"].button { background: #07141a !important; color: #fff !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; text-shadow: none !important; font-weight: 700; letter-spacing: .02em; padding: 11px 22px !important; transition: background .15s ease, transform .06s ease; } input[type="submit"]:hover, button[type="submit"]:hover, .wpcf7-submit:hover, .mm-report-send:hover, .button:hover { background: #1c2a31 !important; color: #fff !important; opacity: 1 !important; } input[type="submit"]:active, button[type="submit"]:active, .wpcf7-submit:active, .mm-report-send:active { transform: translateY(1px); } /* 「〜さんに連絡する！」だけは、塗りつぶしではなく白地＋黒枠にする。 投稿ボタン（黒の塗り）と役割が違うので、見た目でも区別する */ input.application_button, input.application_button.button, .job_application input[type="button"].button { background: #fff !important; color: #07141a !important; border: 2px solid #07141a !important; border-radius: 8px !important; font-weight: 700; letter-spacing: .02em; padding: 11px 22px !important; box-shadow: none !important; text-shadow: none !important; transition: background .15s ease, transform .06s ease; } input.application_button:hover, input.application_button.button:hover, .job_application input[type="button"].button:hover { background: #f4f5f6 !important; color: #07141a !important; border-color: #07141a !important; opacity: 1 !important; } input.application_button:active, .job_application input[type="button"].button:active { transform: translateY(1px); } .job-manager-form input[type="text"], .job-manager-form input[type="email"], .job-manager-form select, .job-manager-form textarea, .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea, .search_jobs input[type="text"] { border: 1px solid var(--mm-line-strong) !important; border-radius: 8px !important; box-shadow: none !important; background: #fff !important; } .job-manager-form input:focus, .wpcf7-form input:focus, .wpcf7-form textarea:focus, .job-manager-form textarea:focus { border-color: var(--mm-accent) !important; outline: none !important; } /* 絞り込みパネル */ .search_jobs, form.job_filters { background: #fafafa !important; border: 1px solid var(--mm-line) !important; border-radius: 10px; box-shadow: none !important; } /* --------------------------------------------------------------- * 6. フッター * ------------------------------------------------------------- */ #post-footer, #footer { background: #fff !important; border-top: 1px solid var(--mm-line) !important; box-shadow: none !important; } .credit.small { color: var(--mm-muted) !important; font-size: 11.5px; } /* --------------------------------------------------------------- * 7. スマホ調整 * ------------------------------------------------------------- */ @media (max-width: 600px) { .top-intro { font-size: 13.5px !important; } #frontpage-page-content { margin-top: 20px !important; } .top-intro .intro-block { font-size: 13px !important; padding: 13px 14px !important; margin: 0 0 20px !important; } .top-intro .mm-lead { margin: 0 0 16px !important; } .top-intro .mm-lead { font-size: 14.5px !important; } .top-intro .mm-news-title { font-size: 14px; } .top-intro .mm-news-body, .top-intro .mm-note, .top-intro ul { font-size: 12.5px !important; } h1.loop-title, .loop-title.archive-title { font-size: 16.5px !important; } ul.job_listings li.job_listing { padding: 14px 12px !important; } ul.job_listings li.job_listing .position h3 { font-size: 15px !important; } #site-title { font-size: 26px !important; } /* タグは1行にまとめ、投稿日時はその下の行に置く */ ul.job_listings li.job_listing .mm-card-right { max-width: 60%; } ul.job_listings li.job_listing ul.meta { column-gap: 8px; } ul.job_listings li.job_listing ul.meta > li { font-size: 10.5px !important; } ul.job_listings li.job_listing .location { font-size: 11px !important; } /* スマホでは横幅を絞って右寄せ（全幅だと主張が強すぎるため） */ a.cp_btn { width: auto !important; min-width: 0; margin-left: auto; padding: 0 18px !important; min-height: 40px; font-size: 13px; letter-spacing: .02em; } } /* --------------------------------------------------------------- * 8. 告知記事（.mm-notice） * 記事本文に