/* * 利用者が見る画面の見た目を、トップページ（案5 絵本の物語）にそろえる。 * のページだけに効く（管理者画面は付けないので、今の見た目のまま）。 * app.css の色の変数を置き換え、変数を使っていない色や形はここで上書きする。 */ .theme-hm { --bg: #fffaf0; --surface: #ffffff; --text: #3b2a2a; --muted: #7a6560; --line: #ead7bd; --primary: #e8704f; /* ボタン（夕日のコーラル） */ --primary-dark: #d95f3f; --navy: #5b3565; /* 見出し・数字・ロゴ（夕暮れの紫） */ --radius: 24px; --hm-sand: #f7e3c6; --hm-sand2: #f2d2a8; --hm-cream: #fffaf0; --hm-dusk: #5b3565; --hm-coral: #e8704f; --hm-sun: #f6a93b; font-family: "Zen Maru Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif; line-height: 1.9; } .theme-hm a { color: var(--hm-dusk); } .theme-hm a:hover { color: var(--hm-coral); } .theme-hm h1, .theme-hm h2, .theme-hm h3 { font-weight: 900; } .theme-hm .eyebrow { color: var(--hm-coral); font-weight: 700; } .theme-hm code { background: var(--hm-cream); } /* ヘッダー・フッター */ .theme-hm .site-header { background: var(--hm-cream); border-bottom-color: var(--line); } .theme-hm .brand { color: var(--text); font-weight: 900; } .theme-hm .brand-mark { background: var(--hm-dusk); color: #ffe2b0; border-radius: 8px; } .theme-hm .site-header nav a { color: var(--text); } .theme-hm .site-nav .nav-cta { background: var(--hm-coral); color: #fff; padding: .2em .9em; border-radius: 99px; } .theme-hm .site-footer { background: var(--hm-sand); border-top: 0; margin-top: 56px; } .theme-hm main:has(.hm) + .site-footer { margin-top: 0; } /* カード・ボタン・入力欄 */ .theme-hm .card { border: 0; border-radius: 24px; box-shadow: 0 12px 34px rgba(59, 42, 42, .1); } .theme-hm .btn { border-radius: 99px; border-color: var(--line); font-weight: 700; } .theme-hm .btn-primary { background: var(--hm-coral); border-color: var(--hm-coral); box-shadow: 0 8px 18px rgba(232, 112, 79, .3); } .theme-hm .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .theme-hm .btn-small { box-shadow: none; } .theme-hm .field input { border: 2px solid var(--line); border-radius: 14px; background: var(--hm-cream); } .theme-hm .field input:focus { outline-color: var(--hm-coral); border-color: var(--hm-coral); } .theme-hm .field em { background: var(--hm-coral); } .theme-hm .field em.opt { background: var(--muted); } .theme-hm .alert { border-radius: 14px; } .theme-hm .flash { border-radius: 14px; } .theme-hm .member-cta { background: var(--hm-cream); border: 2px dashed var(--hm-sand2); border-radius: 16px; } .theme-hm .cta { background: linear-gradient(180deg, #fff6e6, var(--hm-sand)); border: 0; } .theme-hm .cta.member { background: #fff; border: 2px dashed var(--hm-sand2); } .theme-hm .cta h2 { font-family: "Yusei Magic", "Zen Maru Gothic", sans-serif; font-weight: 400; } .theme-hm .disclaimer { color: var(--muted); } .theme-hm .tag { background: var(--hm-dusk); border-radius: 99px; padding: 0 .6em; } /* 表（ランキング・評価基準・会員ページの比較） */ .theme-hm .showcase th, .theme-hm .criteria th, .theme-hm .terms th, .theme-hm .compare thead th { background: var(--hm-cream); color: var(--text); } .theme-hm .compare tr.total th, .theme-hm .compare tr.total td { background: #fff6e6; } .theme-hm .compare tr.cat-row th, .theme-hm .compare tr.cat-row td { background: var(--hm-cream); } .theme-hm .mini-bar, .theme-hm .cat-bar, .theme-hm .bar { background: #f3e6d2; } .theme-hm .survey { background: var(--hm-cream); border-color: var(--line); border-radius: 18px; } .theme-hm .survey-stats b { color: var(--hm-dusk); } .theme-hm .ranking .rank { color: var(--hm-coral); font-family: "Yusei Magic", "Zen Maru Gothic", sans-serif; font-weight: 400; font-size: 1.25rem; } .theme-hm .ranking tbody tr:nth-child(-n+3) .rank { color: #c98a00; } .theme-hm .ranking .company a.company-link { color: var(--hm-dusk); } .theme-hm .ranking .publisher { font-size: .82rem; color: var(--hm-dusk); } .theme-hm .ranking tr:target td { background: #fff1d6; } .theme-hm .ranking tr:target { outline-color: var(--hm-sun); } /* 採点の目安の色（A はトップの紫に） */ .theme-hm .g-a { background: #efe4f2; color: var(--hm-dusk); } .theme-hm .m.na { background: var(--hm-cream); } /* 測定中 */ .theme-hm .bar-fill { background: linear-gradient(90deg, var(--hm-dusk), var(--hm-coral), var(--hm-sun)); } .theme-hm .steps li.active .dot { border-color: var(--hm-coral); animation: hm-pulse 1s infinite alternate; } @keyframes hm-pulse { from { box-shadow: 0 0 0 0 rgba(232, 112, 79, .45); } to { box-shadow: 0 0 0 6px rgba(232, 112, 79, 0); } } /* 結果画面の順位の欄: 順位は見せず、問いかけとボタンだけ */ .theme-hm .rank-ask b { font-family: "Yusei Magic", "Zen Maru Gothic", sans-serif; font-weight: 400; font-size: 1.6rem; color: var(--hm-dusk); } /* 「ランキングを見る」の後のポップアップ（夕焼けの色に） */ .theme-hm .rank-pop { background: linear-gradient(160deg, var(--hm-dusk) 0%, #b8506a 55%, var(--hm-coral) 100%); } .theme-hm .rank-pop::backdrop { background: rgba(40, 22, 44, .72); } .theme-hm .rank-pop-num { font-family: "Yusei Magic", "Zen Maru Gothic", sans-serif; font-weight: 400; } .theme-hm .rank-pop-lead { font-family: "Yusei Magic", "Zen Maru Gothic", sans-serif; font-weight: 400; color: #ffe2b0; } .theme-hm .rank-pop-actions .btn-primary { background: #ffe2b0; border-color: #ffe2b0; color: var(--hm-dusk); box-shadow: none; } /* ランキングの表: 列が多いので、会社名と「掲載した人」が縦に細く折り返されないよう幅を確保する（はみ出す分は横に送れる） */ .theme-hm .ranking .company { min-width: 11em; } .theme-hm .ranking .publisher { min-width: 7.5em; word-break: break-all; } .theme-hm .ranking.compact .publisher { min-width: 6em; } .theme-hm .ranking .cat-col { min-width: 74px; width: auto; } .theme-hm .ranking th.cat-col { white-space: normal; line-height: 1.4; } /* 区分名は2行に折り返して、すべての列を表の幅に収める */ .theme-hm .ranking .mini-bar { width: 30px; } .theme-hm .ranking .company { min-width: 10em; } @media (max-width: 760px) { .theme-hm .ranking .company, .theme-hm .ranking .publisher, .theme-hm .ranking .cat-col { min-width: 0; } .theme-hm .showcase td.publisher { grid-column: 2 / -1; margin-top: 2px; } .theme-hm .showcase td.publisher::before { content: attr(data-label) "："; color: var(--muted); } } /* 会員ページ: ランキングに掲載する名前の欄とボタンを横に並べる */ .theme-hm .ranking-name-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; } .theme-hm .ranking-name-row .field { margin-bottom: 0; } .theme-hm .form .ranking-name-row .btn-primary { width: auto; padding: .7em 1.6em; } @media (max-width: 560px) { .theme-hm .ranking-name-row { grid-template-columns: 1fr; } .theme-hm .form .ranking-name-row .btn-primary { width: 100%; } } /* スマートフォン: ヘッダーを1段に収める（丸ゴシックは字幅が少し広いため詰める） */ @media (max-width: 760px) { .theme-hm .site-header .wrap { gap: 6px; flex-wrap: nowrap; } .theme-hm .brand { font-size: .88rem; gap: .35em; } .theme-hm .site-nav { gap: 8px; flex-wrap: nowrap; white-space: nowrap; } .theme-hm .site-nav a, .theme-hm .site-nav .link { font-size: .76rem; letter-spacing: 0; } .theme-hm .site-nav .nav-cta { padding: .15em .7em; } } @media (max-width: 380px) { .theme-hm .brand { font-size: .8rem; } .theme-hm .brand-mark { padding: 0 .35em; } .theme-hm .site-nav { gap: 6px; } .theme-hm .site-nav a, .theme-hm .site-nav .link { font-size: .72rem; } }