/* * 全サイト共通のスタイル。body.artiql-site の中だけに効く。 * サイトごとの色・書体は sites/{id}/style.css で body.site-{id} の変数を上書きする。 */ /* * 色は明暗の2組。押していない人は端末の設定に従い、ヘッダーの切り替えを押した人はその選択を優先する * （。 で保存した値を先に当てるので、開いた瞬間にちらつかない）。 * 文字の大きさは rem で書く。ヘッダーの「Aa」で になり、全体が1段大きくなる。 */ body.artiql-site { --bg: #FAFAF8; --surface: #FFFFFF; --sunken: #F1F1EE; --ink: #111418; --muted: #5A6068; --line: #E2E2DD; --line-strong: #B4B7BB; --accent: #1A4088; --accent-soft: #E9EEF7; --warn: #8F4500; --warn-bg: #FFF4E5; --warn-line: #E9B979; --na: #5A6068; --na-bg: #ECECE8; --ok: #1C6E46; --ok-bg: #E6F3EB; --ng: #A8261B; --ng-bg: #FBEAE7; /* 書体は Springl と同じ3役。和文は1書体（端末のゴシック）だけにする。混ぜるとバラバラに見える 見出し・数字＝Manrope 700（欧文だけ。和文は本文と同じゴシック）／本文＝ゴシック／ラベル・日付＝IBM Plex Mono */ --f-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, system-ui, sans-serif; --f-display: "Manrope", var(--f-jp); --f-body: var(--f-jp); --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ls-label: 0.1em; --r: 6px; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 0.9375rem; line-height: 1.8; -webkit-text-size-adjust: 100%; } html[data-as-theme="dark"] body.artiql-site { --bg: #0E0F11; --surface: #16181B; --sunken: #1E2125; --ink: #EEF0F2; --muted: #A3A9B0; --line: #2A2E33; --line-strong: #4D535A; --accent: #8AA8FF; --accent-soft: #1C2540; --warn: #F4B864; --warn-bg: #33240F; --warn-line: #6B4A1C; --na: #A9B0B7; --na-bg: #25292E; --ok: #67C695; --ok-bg: #12301F; --ng: #F2897E; --ng-bg: #3A1714; color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) body.artiql-site { --bg: #0E0F11; --surface: #16181B; --sunken: #1E2125; --ink: #EEF0F2; --muted: #A3A9B0; --line: #2A2E33; --line-strong: #4D535A; --accent: #8AA8FF; --accent-soft: #1C2540; --warn: #F4B864; --warn-bg: #33240F; --warn-line: #6B4A1C; --na: #A9B0B7; --na-bg: #25292E; --ok: #67C695; --ok-bg: #12301F; --ng: #F2897E; --ng-bg: #3A1714; color-scheme: dark; } } html[data-as-fontsize="large"] { font-size: 112.5%; } .artiql-site *, .artiql-site *::before, .artiql-site *::after { box-sizing: border-box; } .artiql-site a { color: var(--accent); } .artiql-site a:focus-visible, .artiql-site button:focus-visible, .artiql-site select:focus-visible, .artiql-site [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .artiql-site h1, .artiql-site h2, .artiql-site h3 { font-family: var(--f-display); line-height: 1.4; text-wrap: balance; margin: 0; color: var(--ink); } .artiql-site img { max-width: 100%; height: auto; } .as-wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; } .as-skip { position: absolute; left: -9999px; } .as-skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; } /* header（上の段：サイト名と道具／下の段：メニューと話題／検索の枠） */ .as-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .as-header { background: var(--surface); border-bottom: 1px solid var(--line); } .as-mast { display: flex; align-items: center; gap: 12px; padding-block: 14px 10px; } .as-brand { display: grid; gap: 2px; text-decoration: none; color: var(--ink) !important; margin-right: auto; min-width: 0; } .as-brand__name { font-family: var(--f-display); font-weight: 700; font-size: 1.375rem; letter-spacing: .04em; line-height: 1.2; } .as-brand__tagline { font-size: 0.75rem; color: var(--muted); line-height: 1.4; } .as-tools { display: flex; align-items: center; gap: 4px; flex: none; } .as-tool { font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; } .as-tool:hover { background: var(--sunken); } .as-tool[aria-pressed="true"], .as-tool[aria-expanded="true"] { background: var(--sunken); border-color: var(--line); } .as-tool svg { width: 20px; height: 20px; } .as-tool__aa { font-family: var(--f-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: .02em; } .as-tool__label { font-size: 0.8125rem; font-weight: 700; } .as-nav-toggle { display: none; } .as-navbar { border-top: 1px solid var(--line); } .as-navbar__inner { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; padding-block: 0; } .as-menu { display: flex; flex-wrap: wrap; gap: 0 22px; list-style: none; margin: 0; padding: 0; } .as-menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.875rem; border-bottom: 2px solid transparent; } .as-menu a:hover, .as-menu .current-menu-item > a { border-bottom-color: var(--ink); } .as-menu .sub-menu { display: none; } .as-topics { display: flex; align-items: center; gap: 6px; margin-left: auto; overflow-x: auto; scrollbar-width: none; padding-block: 6px; min-width: 0; } .as-topics::-webkit-scrollbar { display: none; } .as-topics__label { flex: none; font-size: 0.75rem; color: var(--muted); margin-right: 2px; } .as-topics a { flex: none; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; color: var(--ink); text-decoration: none; background: var(--surface); } .as-topics a:hover, .as-topics a[aria-current="page"] { border-color: var(--ink); } .as-search { border-top: 1px solid var(--line); background: var(--sunken); } .as-search__form { position: relative; display: flex; gap: 8px; padding-block: 12px; } .as-search__icon { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .as-search__input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; min-height: 44px; padding: 0 12px 0 40px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); } .as-search__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } .as-search .as-btn { border-radius: 999px; } @media (max-width: 760px) { .as-brand__tagline { display: none; } .as-tool__label { display: none; } .as-nav-toggle { display: inline-flex; } .as-navbar { display: none; } .as-navbar.is-open { display: block; } .as-navbar__inner { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; } .as-menu { flex-direction: column; } .as-menu a { width: 100%; border-bottom: 1px solid var(--line); } .as-topics { margin-left: 0; flex-wrap: wrap; overflow: visible; padding-top: 10px; } } @media (max-width: 360px) { .as-tool { min-width: 36px; padding: 0 6px; } .as-brand__name { font-size: 1.125rem; } } /* layout */ .as-main { padding-block: 0 64px; } .as-crumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 14px 0; font-size: 0.7812rem; color: var(--muted); } .as-crumb li + li::before { content: "›"; margin-right: 6px; } .as-section { margin-top: 48px; } .as-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; } .as-section__head h2 { font-size: 1.375rem; } .as-section__head a { font-size: 0.875rem; } .as-grid { display: grid; gap: 16px; } .as-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .as-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .as-grid--3 { grid-template-columns: 1fr; } } .as-empty { color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 20px; margin: 0; } /* hero */ .as-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 5vw, 48px); } .as-hero__title { font-size: clamp(1.625rem, 4.4vw, 2.5rem); } .as-hero__lead { margin-top: 12px; color: var(--muted); font-size: 1rem; } .as-hero__actions { margin: 20px 0 0; } /* buttons, chips */ .as-btn { font: inherit; font-size: 0.875rem; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink) !important; text-decoration: none; cursor: pointer; } .as-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff !important; } html[data-as-theme="dark"] .as-btn--primary { color: #0E0F11 !important; } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-btn--primary { color: #0E0F11 !important; } } .as-chip { display: inline-block; font-size: 0.75rem; line-height: 1; padding: 5px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-weight: 700; } .as-chip--pr { background: var(--warn-bg); color: var(--warn); } .as-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } /* cards */ .as-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .as-card__link { display: grid; height: 100%; color: inherit !important; text-decoration: none; } .as-card__link:hover .as-card__title { color: var(--accent); } .as-card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .as-card__body { padding: 16px; display: grid; gap: 6px; align-content: start; } .as-card__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; font-size: 0.7812rem; color: var(--muted); } .as-card__title { font-size: 1.0625rem; } .as-card__excerpt { margin: 0; font-size: 0.8438rem; color: var(--muted); } .as-mini-spec { display: grid; gap: 4px; margin: 8px 0 0; font-size: 0.8125rem; } .as-mini-spec div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 4px; } .as-mini-spec dt { color: var(--muted); } .as-mini-spec dd { margin: 0; font-weight: 700; text-align: right; } /* news list */ .as-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .as-list li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding: 14px 16px; border-top: 1px solid var(--line); } .as-list li:first-child { border-top: 0; } .as-list time { font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 6.5em; } /* archive */ .as-archive__head { padding-block: 8px 20px; } .as-archive__head h1 { font-size: clamp(1.5rem, 3.6vw, 2rem); } .as-archive__head p { color: var(--muted); margin: 8px 0 0; } .as-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; } .as-tabs a { flex: none; font-size: 0.875rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; } .as-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); } .as-pager ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 28px 0 0; justify-content: center; } .as-pager a, .as-pager span { display: inline-block; min-width: 40px; padding: 8px 12px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; } .as-pager .current { background: var(--ink); color: var(--surface); border-color: var(--ink); } /* filter + table */ .as-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; } .as-filter label { display: grid; gap: 4px; font-size: 0.7812rem; font-weight: 700; color: var(--muted); } .as-filter select { font: inherit; font-size: 0.875rem; min-height: 40px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); } .as-count { font-size: 0.875rem; font-weight: 700; margin: 16px 0 8px; } .as-table-note { font-size: 0.8125rem; color: var(--muted); margin: 8px 0 0; } .as-count span { font-weight: 400; color: var(--muted); font-size: 0.8125rem; } .as-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .as-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 0.875rem; } .as-table th, .as-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .as-table thead th { font-size: 0.7812rem; color: var(--muted); background: var(--sunken); white-space: nowrap; } .as-table tbody th { position: sticky; left: 0; background: var(--surface); min-width: 12em; } .as-table tbody tr:last-child > * { border-bottom: 0; } .as-table .is-num { font-variant-numeric: tabular-nums; white-space: nowrap; } .as-table .is-na, .as-spec .is-na { color: var(--na); } /* article */ .as-article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 5vw, 56px); max-width: 860px; margin: 0 auto; } .as-article.as-directory { max-width: none; } .as-article__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 10px; font-size: 0.8125rem; color: var(--muted); } .as-article__type { font-weight: 700; color: var(--ink); } .as-article__title { font-size: clamp(1.5rem, 3.8vw, 2.125rem); } .as-article__lead { margin: 12px 0 0; font-size: 1rem; color: var(--muted); } .as-article__eyecatch { margin: 24px 0 0; } .as-article__eyecatch img { display: block; border-radius: 8px; } .as-article__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.875rem; } .as-pr { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; font-size: 0.8438rem; line-height: 1.7; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; color: var(--ink); } .as-pr__label { flex: none; font-weight: 700; font-size: 0.75rem; padding: 2px 8px; border-radius: 4px; background: var(--warn); color: var(--surface); } .as-note { font-size: 0.875rem; background: var(--sunken); border-radius: 8px; padding: 12px 14px; } /* spec */ .as-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .as-spec > div { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; } .as-spec > div:nth-child(3n) { border-right: 0; } .as-spec > div:nth-last-child(-n+3) { border-bottom: 0; } .as-spec dt { font-size: 0.75rem; font-weight: 700; color: var(--muted); } .as-spec dd { margin: 2px 0 0; font-family: var(--f-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.35; } .as-spec dd small { display: block; font-family: var(--f-body); font-size: 0.75rem; font-weight: 400; color: var(--muted); margin-top: 2px; } @media (max-width: 640px) { .as-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .as-spec > div:nth-child(3n) { border-right: 1px solid var(--line); } .as-spec > div:nth-child(2n) { border-right: 0; } .as-spec > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .as-spec > div:nth-last-child(-n+2) { border-bottom: 0; } } .as-sources { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); } .as-sources h2 { font-size: 1.125rem; margin-bottom: 8px; } .as-sources ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 0.8438rem; } .as-src { display: inline-block; min-width: 2.6em; margin-right: 8px; font-size: 0.6875rem; padding: 3px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); text-align: center; } /* 本文（ブロックエディタの出力） */ .as-content { margin-top: 28px; font-size: 1rem; overflow-wrap: anywhere; } .as-content > * + * { margin-top: 1.1em; } .as-content h2 { font-size: 1.4375rem; margin-top: 2.2em; padding-bottom: 8px; border-bottom: 2px solid var(--line); } .as-content h3 { font-size: 1.1875rem; margin-top: 1.8em; } .as-content p, .as-content ul, .as-content ol { margin-bottom: 0; } .as-content blockquote { margin-inline: 0; padding: 4px 16px; border-left: 4px solid var(--line-strong); color: var(--muted); } .as-content table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .as-content th, .as-content td { border: 1px solid var(--line); padding: 8px 10px; } .as-content .wp-block-table { overflow-x: auto; } .as-content figcaption { font-size: 0.7812rem; color: var(--muted); } /* 記事の下の「この記事を書いた人」（0.21.0） */ .as-writer { margin-top: 48px; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; } .as-writer__label { margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; } .as-writer__name { margin: 6px 0 0; font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; } .as-writer__bio { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--muted); } /* 本文の画像の回り込み（0.20.0）。WordPress の「左寄せ／右寄せ」（alignleft・alignright）を付けた画像だけ、 PC では幅1/3にして文を回り込ませる。スマホでは今までどおり幅いっぱい。見出しの前で回り込みを切る */ .as-content img { max-width: 100%; height: auto; } @media (min-width: 861px) { .as-content img.alignleft, .as-content figure.alignleft { float: left; width: 33%; margin: 0.35em 28px 12px 0; } .as-content img.alignright, .as-content figure.alignright { float: right; width: 33%; margin: 0.35em 0 12px 28px; } .as-content figure.alignleft img, .as-content figure.alignright img { width: 100%; } .as-content h2, .as-content h3, .as-content h4 { clear: both; } .as-content::after { content: ""; display: table; clear: both; } } .as-hero__lead.as-content { margin-top: 12px; font-size: 1rem; } /* footer */ .as-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: 28px; font-size: 0.8125rem; color: var(--muted); } .as-footer .as-menu a { font-weight: 400; font-size: 0.8125rem; } .as-footer__note { max-width: 760px; } .as-footer__operator { margin: 8px 0 0; } /* ---------- 比較対象の詳細（single-directory.php・0.3.0） ---------- */ .as-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; color: var(--muted); } .as-mini-h { font-size: 0.8125rem !important; font-weight: 700; letter-spacing: .06em; color: var(--muted) !important; margin: 28px 0 8px !important; } .as-dir__head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; padding-block: 12px 4px; } .as-dir__intro { display: grid; gap: 10px; min-width: 0; } /* 題名は右端まで詰める（balance は行を手前で折り、単語の途中で切れて見える。Springl で同じ指摘あり） */ .artiql-site .as-dir__title { font-size: clamp(1.625rem, 4.2vw, 2.375rem); font-weight: 700; text-wrap: wrap; } .as-chunk { display: inline-block; max-width: 100%; } .as-dir__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 0.8125rem; color: var(--muted); } .as-dir__meta b { color: var(--ink); font-variant-numeric: tabular-nums; } .as-dir__lead { margin: 0; font-size: 0.9688rem; } .as-dir .as-tags { margin: 0; } .as-offer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 6px; box-shadow: 0 1px 0 var(--line); } .as-offer p { margin: 0; } .as-offer__label { font-size: 0.75rem; font-weight: 700; color: var(--muted); } .as-offer__price.is-na { font-size: 1.125rem; color: var(--na); } .as-offer__price { font-family: var(--f-display); font-size: 1.875rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .as-offer__note { font-size: 0.7812rem; color: var(--muted); line-height: 1.6; } .as-offer__sub { font-size: 0.7812rem; color: var(--muted); text-align: center; } .as-btn--block { width: 100%; justify-content: center; margin-top: 8px; min-height: 48px; font-size: 0.9375rem; } @media (max-width: 860px) { .as-dir__head { grid-template-columns: 1fr; } } .as-verdict { margin-top: 20px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--r); padding: 16px 20px; } .as-verdict__h { font-size: 0.8125rem !important; letter-spacing: .1em; color: var(--accent) !important; } .as-verdict p { margin: 6px 0 0; font-size: 0.9688rem; } .as-verdict__best { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); margin-top: 10px !important; font-size: 0.9062rem !important; } .as-verdict__best b { color: var(--accent); } .as-basic__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .as-basic__list > div { padding: 10px 14px; border-right: 1px solid var(--line); min-width: 0; } .as-basic__list > div:last-child { border-right: 0; } .as-basic__list dt { font-size: 0.75rem; color: var(--muted); font-weight: 700; } .as-basic__list dd { margin: 0; font-weight: 700; font-size: 0.9062rem; font-variant-numeric: tabular-nums; } .as-basic__list .is-na { color: var(--na); font-weight: 400; } @media (max-width: 860px) { .as-basic__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .as-basic__list > div { border-bottom: 1px solid var(--line); } .as-basic__list > div:nth-child(3n) { border-right: 0; } .as-basic__list > div:nth-last-child(-n+3) { border-bottom: 0; } } @media (max-width: 480px) { .as-basic__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .as-basic__list > div:nth-child(3n) { border-right: 1px solid var(--line); } .as-basic__list > div:nth-child(2n) { border-right: 0; } .as-basic__list > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .as-basic__list > div:nth-last-child(-n+2) { border-bottom: 0; } } .as-high { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .as-high > div { padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 2px; align-content: start; min-width: 0; } .as-high > div:nth-child(4n) { border-right: 0; } .as-high > div:nth-last-child(-n+4) { border-bottom: 0; } .as-high dt { font-size: 0.75rem; color: var(--muted); font-weight: 700; } .as-high dd { margin: 0; font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .as-high dd small { display: block; margin-top: 2px; font-family: var(--f-body); font-size: 0.75rem; font-weight: 400; line-height: 1.55; color: var(--muted); } @media (max-width: 860px) { .as-high { grid-template-columns: repeat(2, minmax(0, 1fr)); } .as-high > div:nth-child(4n) { border-right: 1px solid var(--line); } .as-high > div:nth-child(2n) { border-right: 0; } .as-high > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); } .as-high > div:nth-last-child(-n+2) { border-bottom: 0; } } .as-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } @media (max-width: 760px) { .as-duo { grid-template-columns: 1fr; } } .as-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; min-width: 0; } .as-panel h2 { font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .as-panel h2::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); } .as-panel--unfit h2::before { background: var(--ng); } .as-panel ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; } .as-caution { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 16px 18px; margin-top: 12px; } .as-caution h2 { font-size: 1rem; color: var(--warn); margin-bottom: 8px; } .as-caution ol { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; } .as-caution b { margin-right: .3em; } /* 出典と状態の印 */ .as-srcref { display: inline-block; font-size: 0.6562rem; line-height: 1; padding: 3px 5px 2px; margin-left: 3px; border-radius: 4px; background: var(--accent-soft); color: var(--accent) !important; text-decoration: none; vertical-align: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--f-mono); } .as-srcref:hover { text-decoration: underline; } .as-srcref.is-missing { background: var(--ng-bg); color: var(--ng) !important; } .as-st { display: inline-block; font-size: 0.7188rem; font-weight: 700; line-height: 1; padding: 4px 8px 3px; margin-right: 6px; border-radius: 999px; vertical-align: 1px; white-space: nowrap; } .as-st--ok { background: var(--ok-bg); color: var(--ok); } .as-st--ng { background: var(--ng-bg); color: var(--ng); } .as-st--na { background: var(--na-bg); color: var(--na); } .as-st--cond { background: var(--warn-bg); color: var(--warn); } /* 目次＋本文 */ .as-dir__layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; margin-top: 36px; align-items: start; } .as-toc { position: sticky; top: 16px; font-size: 0.8438rem; border-left: 2px solid var(--line); padding-left: 12px; max-height: calc(100vh - 32px); overflow-y: auto; } .as-toc__h { margin: 0 0 6px; font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; } .as-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .as-toc a, .as-toc li > span { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 6px; color: var(--ink); text-decoration: none; } .as-toc a:hover { background: var(--sunken); } .as-toc a[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 700; } .as-toc__n { flex: none; width: 1.8em; font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; } .as-toc .is-missing span { color: var(--muted); } .as-toc .is-missing small { margin-left: auto; font-size: 0.6875rem; padding: 1px 6px; border-radius: 999px; background: var(--na-bg); color: var(--na); } .as-toc__note { margin: 8px 0 0; font-size: 0.75rem; color: var(--muted); line-height: 1.6; } @media (max-width: 960px) { .as-dir__layout { grid-template-columns: 1fr; gap: 20px; } .as-toc { position: static; max-height: none; border-left: 0; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .as-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px) { .as-toc ol { grid-template-columns: 1fr; } } .as-dir__main { min-width: 0; } .as-axis { margin-top: 0; font-size: 0.9375rem; } .as-axis .as-axis__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 44px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); scroll-margin-top: 16px; } .as-axis > .as-axis__head:first-child { margin-top: 0; } .as-axis .as-axis__head h2 { font-size: 1.375rem; margin: 0; padding: 0; border: 0; } .as-axis__n { font-size: 0.75rem; color: var(--accent); font-variant-numeric: tabular-nums; font-family: var(--f-mono); } .as-axis__q { margin-left: auto; font-size: 0.7812rem; color: var(--muted); } .as-axis h3 { font-size: 1.0625rem; margin-top: 1.8em; } .as-scroll { overflow-x: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } .as-kv, .as-dt { width: 100%; border-collapse: collapse; font-size: 0.9062rem; } .as-content .as-kv th, .as-content .as-kv td, .as-content .as-dt th, .as-content .as-dt td, .as-alts th, .as-alts td { border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; } .as-kv tr:last-child > *, .as-dt tbody tr:last-child > * { border-bottom: 0 !important; } .as-kv th, .as-kv td:first-child:not(:only-child) { width: 13em; background: var(--sunken); font-weight: 700; font-size: 0.8438rem; } .as-dt { min-width: 560px; } .as-dt thead th { font-size: 0.7812rem; color: var(--muted); background: var(--sunken); white-space: nowrap; } .as-dt td { font-variant-numeric: tabular-nums; } .as-content .as-dt td[colspan] { background: var(--sunken); font-size: 0.7812rem; font-weight: 700; color: var(--muted); padding-block: 6px; } .as-content .as-dt small, .as-content .as-kv small { color: var(--muted); font-size: 0.75rem; line-height: 1.5; } .as-content .as-dt td, .as-content .as-kv td { line-height: 1.7; } @media (max-width: 560px) { .as-kv, .as-kv tbody, .as-kv tr, .as-kv th, .as-kv td { display: block; width: auto !important; } .as-content .as-kv th, .as-content .as-kv td:first-child:not(:only-child) { border-bottom: 0; padding-bottom: 2px; background: transparent; color: var(--muted); font-size: 0.7812rem; } .as-content .as-kv td { padding-top: 2px; } .as-kv tr { border-bottom: 1px solid var(--line); padding-block: 6px; } .as-kv tr:last-child { border-bottom: 0; } } .as-block { margin-top: 48px; } .as-block > h2 { font-size: 1.375rem; padding-bottom: 10px; border-bottom: 2px solid var(--ink); } .as-alts tbody th { font-weight: 700; min-width: 11em; } .as-alts tbody th a { display: inline-block; padding-block: 3px; } .as-alts small { display: block; font-size: 0.7188rem; font-weight: 400; color: var(--muted); } .as-alts .is-self { background: var(--accent-soft); } .as-alts .is-na { color: var(--na); } .as-more { margin: 10px 0 0; font-size: 0.875rem; text-align: right; } .as-faq { display: grid; gap: 8px; margin-top: 14px; } .as-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .as-faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; font-weight: 700; position: relative; } .as-faq summary::-webkit-details-marker { display: none; } .as-faq summary::before { content: "Q"; color: var(--accent); margin-right: 10px; font-family: var(--f-display); } .as-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: var(--muted); } .as-faq details[open] summary::after { content: "−"; } .as-faq details p { margin: 0; padding: 0 16px 16px 40px; } .as-cta-end { margin-top: 40px; padding: 20px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 12px; justify-items: center; } .as-cta-end p { margin: 0; font-size: 0.875rem; color: var(--muted); } .as-sources__note { margin: 0 0 8px; font-size: 0.8125rem; color: var(--muted); } .as-sources li { display: flex; gap: 4px; align-items: baseline; padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; } .as-sources li:target { background: var(--accent-soft); } .as-policy { margin-top: 28px; padding: 12px 14px; font-size: 0.7812rem; color: var(--muted); background: var(--sunken); border-radius: 8px; } /* スマホの下に出す申し込みの帯（ページ上部の申し込み欄が画面から外れたら出す） */ .as-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); } .as-dock[hidden] { display: none; } .as-dock__text { display: grid; min-width: 0; font-size: 0.7812rem; line-height: 1.4; } .as-dock__text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .as-dock__text span { color: var(--muted); font-variant-numeric: tabular-nums; } .as-dock .as-btn { flex: none; margin-left: auto; min-height: 44px; } @media (min-width: 861px) { .as-dock { display: none !important; } } /* ページの先頭へ戻る（0.20.0）。右下に固定。1画面分より下に進んだら出す（assets/site.js） */ .as-totop { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; } .as-totop.is-shown { opacity: 1; visibility: visible; transform: none; } .as-totop:hover { color: var(--accent); border-color: var(--accent); } .as-totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .as-totop svg { width: 20px; height: 20px; } /* スマホの申し込みの帯が出ているときは、その上に逃がす */ @media (max-width: 860px) { body.has-dock .as-totop { bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .as-totop { transition: none; } } @media print { .as-totop { display: none; } } @media (max-width: 860px) { body.has-dock .as-footer { padding-bottom: 96px; } } /* ---------- トップ（front.php・0.3.0） ---------- */ .as-fhero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: start; padding-block: 16px 8px; } .as-fhero__text { display: grid; gap: 12px; align-content: start; padding-top: 12px; min-width: 0; } .artiql-site .as-fhero__title { font-size: clamp(1.875rem, 5vw, 3rem); line-height: 1.25; text-wrap: wrap; } .as-fhero__lead { margin: 0; font-size: 1rem; color: var(--muted); } .as-fhero__lead > * + * { margin-top: .6em; } .as-fhero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .as-fhero__stats li { display: grid; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; } .as-fhero__stats b { font-family: var(--f-display); font-size: 1.375rem; line-height: 1.2; font-variant-numeric: tabular-nums; } .as-fhero__stats span { font-size: 0.75rem; color: var(--muted); } .as-fhero__policy { margin: 0; font-size: 0.7812rem; color: var(--muted); } .as-fhero__policy a { font-weight: 700; } @media (max-width: 900px) { .as-fhero { grid-template-columns: 1fr; gap: 20px; } } .as-finder { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 8px 24px rgba(21, 32, 43, .06); min-width: 0; } .as-finder__h { font-size: 1.125rem; } .as-finder__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; align-items: start; } .as-finder__group legend { float: left; padding: 6px 0 0; font-size: 0.7812rem; font-weight: 700; color: var(--muted); } .as-finder__opts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .as-opt { position: relative; } .as-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .as-opt span { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8438rem; background: var(--surface); cursor: pointer; } .as-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 700; } .as-opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; } .as-opt:hover span { border-color: var(--line-strong); } @media (max-width: 480px) { .as-finder__group { grid-template-columns: 1fr; gap: 4px; } .as-finder__group legend { padding: 0; } } .as-finder__foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); } .as-finder__count { margin: 0; font-size: 0.875rem; } .as-finder__count b { font-family: var(--f-display); font-size: 1.75rem; color: var(--accent); margin-right: 2px; font-variant-numeric: tabular-nums; } .as-finder [hidden] { display: none !important; } .as-finder__hits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .as-finder__hits a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 0.8125rem; font-weight: 700; text-decoration: none; } .as-finder__hits .is-more { align-self: center; font-size: 0.7812rem; color: var(--muted); } .as-finder__note { margin: 0; font-size: 0.7812rem; color: var(--warn); } .as-fsec { margin-top: 64px; } .as-fsec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .as-fsec__en { margin: 0; font-family: var(--f-display); font-size: 0.75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .as-fsec__head h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); } .as-fsec__lead { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted); } .as-fsec__more { font-size: 0.875rem; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; } .as-fsec__note { margin: 8px 0 0; font-size: 0.7812rem; color: var(--muted); } .as-lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; } @media (max-width: 860px) { .as-lead { grid-template-columns: 1fr; } } .as-lead__link { display: grid; gap: 8px; color: inherit !important; text-decoration: none; } .as-lead__link:hover .as-lead__title { color: var(--accent); } .as-lead__thumb { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--sunken); } .as-lead__thumb img, .as-lead__mini img { display: block; width: 100%; height: 100%; object-fit: cover; } .as-lead__thumb.is-tint, .as-lead__mini.is-tint { background: linear-gradient(135deg, var(--accent-soft), var(--sunken)); } .artiql-site .as-lead__title { font-size: clamp(1.25rem, 2.6vw, 1.625rem); text-wrap: wrap; } .as-lead__ex { margin: 0; color: var(--muted); font-size: 0.9062rem; } .as-lead__list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; } .as-lead__list li + li { border-top: 1px solid var(--line); } .as-lead__list a { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding-block: 12px; color: inherit !important; text-decoration: none; } .as-lead__list li:first-child a { padding-top: 0; } .as-lead__list a:hover .as-lead__t { color: var(--accent); } .as-lead__mini { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; } .as-lead__list > li > a > span { display: grid; gap: 4px; min-width: 0; } .as-lead__t { font-weight: 700; font-size: 0.9062rem; line-height: 1.55; } .as-purposes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; } .as-pcard { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: inherit !important; text-decoration: none; min-width: 0; } .as-pcard:hover { border-color: var(--accent); } .as-pcard:hover .as-pcard__t { color: var(--accent); } .as-pcard__n { font-size: 0.7812rem; color: var(--muted); } .as-pcard__n b { font-family: var(--f-display); font-size: 1.375rem; color: var(--ink); margin-right: 2px; } .artiql-site .as-pcard__t { font-size: 1.125rem; } .as-pcard__d, .as-pcard__list { margin: 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.65; } .as-pcard__go { position: absolute; right: 16px; bottom: 12px; font-size: 1.125rem; color: var(--accent); } .as-table--compact { min-width: 640px; } .as-table tbody th a { display: inline-block; padding-block: 3px; font-weight: 700; } .as-trust { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 4vw, 32px); } .as-trust .as-fsec__head { border-bottom-color: var(--line); } .as-trust__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; } .as-trust__nums > div { background: var(--bg); border-radius: var(--r); padding: 14px 16px; min-width: 0; } .as-trust__nums dt { font-size: 0.7812rem; color: var(--muted); font-weight: 700; } .as-trust__nums dd { margin: 2px 0 0; font-family: var(--f-display); font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .as-trust__nums small { font-size: 0.875rem; margin-left: 2px; color: var(--muted); } @media (max-width: 640px) { .as-trust__nums { grid-template-columns: 1fr; } } .as-trust__rules { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 0.9062rem; } .as-trust__rules li { padding-left: 20px; position: relative; } .as-trust__rules li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .as-trust__rules b { margin-right: .4em; } /* ---------- 0.4.0 ニュースメディアの見た目 ---------- * 比較サイト・アフィリエイトサイトに見えないように：色の付いた大きなボタン・影・角の丸い箱を減らし、 * 罫線と余白で組む。主な操作は墨色、リンクと差し色だけ青。写真が無い記事は無地の面にする。 */ .as-btn { border-radius: 4px; } .as-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--surface) !important; } html[data-as-theme="dark"] .as-btn--primary { color: var(--bg) !important; } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-btn--primary { color: var(--bg) !important; } } .as-btn--primary:hover { opacity: .88; } .as-chip { background: transparent; border: 1px solid var(--line-strong); color: var(--muted); font-weight: 400; padding: 4px 8px; border-radius: 3px; } a.as-chip:hover { border-color: var(--ink); color: var(--ink); } .as-chip--pr { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); } .as-kind { font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); } .as-eyebrow, .as-fsec__en { font-family: var(--f-display); font-size: 0.75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0; } /* 節の見出し：英語の小見出し＋日本語。下に太い墨の線 */ .as-fsec { margin-top: 56px; } .as-fsec__head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 20px; } .as-fsec__head h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); } .as-fsec__more { font-size: 0.875rem; color: var(--ink) !important; text-decoration: none; border-bottom: 1px solid var(--line-strong); min-height: 32px; } .as-fsec__more:hover { border-bottom-color: var(--ink); } /* 冒頭：大きい1本と新着の一覧 */ .as-main > .as-wrap > .as-fsec:first-of-type { margin-top: 20px; } .as-lead { gap: 32px; } .as-lead__thumb { border-radius: 2px; } .as-lead__thumb.is-tint, .as-lead__mini.is-tint, .as-card__thumb.is-tint { background: var(--sunken); background-image: linear-gradient(135deg, transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%); } .artiql-site .as-lead__title { font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.45; } .as-lead__list { border-top: 1px solid var(--line); } .as-lead__list li:first-child a { padding-top: 12px; } .as-lead__mini { border-radius: 2px; } /* カード：枠を付けず、写真・種類と日付・題名の順 */ .as-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 28px 24px; } .as-cards .as-card { background: transparent; border: 0; border-radius: 0; overflow: visible; } .as-cards .as-card__link { gap: 10px; align-content: start; } .as-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--sunken); } .as-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .as-cards .as-card__body { padding: 0; gap: 6px; } .artiql-site .as-cards .as-card__title { font-size: 1.0625rem; line-height: 1.55; text-wrap: wrap; } .as-cards .as-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 条件で探す節：左にこのサイトについて、右に条件 */ .as-findsec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px; align-items: start; } .as-findsec__about { display: grid; gap: 14px; min-width: 0; } @media (max-width: 900px) { .as-findsec__grid { grid-template-columns: 1fr; gap: 20px; } } .as-finder { border-radius: 4px; box-shadow: none; } .as-opt span { border-radius: 3px; } .as-finder__count b { color: var(--ink); } .as-finder__hits a { background: transparent; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink) !important; font-weight: 700; } .as-fhero__stats li { border-radius: 4px; background: var(--surface); } /* 学ぶ目的・調べ方 */ .as-pcard { border-radius: 4px; } .as-trust { border-radius: 4px; } .as-trust__nums > div { border-radius: 2px; } /* 検索結果 */ .as-results__n { font-size: 0.875rem; font-weight: 400; color: var(--muted); margin-left: 6px; } .as-results__list { list-style: none; margin: 0; padding: 0; } .as-results__list li + li { border-top: 1px solid var(--line); } .as-results__list a { display: grid; gap: 4px; padding-block: 14px; color: inherit !important; text-decoration: none; } .as-results__list a:hover .as-results__t { color: var(--accent); } .as-results__t { font-weight: 700; font-size: 1.0625rem; line-height: 1.55; } .as-results__ex { font-size: 0.875rem; color: var(--muted); } .as-empty p { margin: 0; } .as-empty p + p { margin-top: 6px; } /* 詳細ページも同じ調子に */ .as-offer { border-radius: 4px; box-shadow: none; } .as-verdict { background: var(--surface); border: 0; border-left: 4px solid var(--ink); border-radius: 0; } .as-verdict__h { color: var(--ink) !important; } .as-verdict__best { border-top-color: var(--line); } .as-verdict__best b { color: var(--ink); } .as-panel, .as-caution, .as-high, .as-basic__list, .as-scroll, .as-faq details, .as-cta-end, .as-table-wrap, .as-filter { border-radius: 4px; } /* 写真の無い記事の面：無地にサイト名を薄く */ .as-lead__thumb.is-tint, .as-lead__mini.is-tint, .as-card__thumb.is-tint { display: grid; place-items: center; background: var(--sunken); background-image: none; } .is-tint span { font-family: var(--f-display); font-weight: 700; letter-spacing: .08em; color: var(--line-strong); font-size: 0.875rem; } .as-lead__mini.is-tint span { display: none; } .as-main > .as-wrap > h2.as-sr + .as-lead, .as-main > .as-wrap > .as-fsec:first-of-type { margin-top: 24px; } /* サイト名は1行に収める（狭い幅で「AIスクール比／較」と割れた） */ .as-brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .as-brand__name { font-size: 1.125rem; } .as-tools { gap: 0; } } .as-brand { min-height: 44px; align-content: center; } /* ---------- 0.5.0 書体を Springl にそろえる ---------- * 等幅（IBM Plex Mono）は欧文と数字のラベルだけ：英語の小見出し・日付・出典の記号・軸の番号。 * 和文のラベルは本文と同じゴシックの小さい太字（等幅は和文を持たないので、字間を振ると「ニ ュ ー ス」と間延びする）。 * 見出しと数字は Manrope（和文は本文と同じゴシック）。和文の太さは 700 と 400 の2つだけ。 */ .artiql-site h1, .artiql-site h2, .artiql-site h3 { font-weight: 700; letter-spacing: .01em; } .as-eyebrow, .as-fsec__en, .as-card__meta time, .as-list time, .as-results__list time, .as-axis__n, .as-toc__n, .as-srcref, .as-src { font-family: var(--f-mono); font-weight: 400; letter-spacing: var(--ls-label); } .as-eyebrow, .as-fsec__en { font-size: 0.6875rem !important; text-transform: uppercase; } .as-card__meta time, .as-list time, .as-results__list time { font-size: 0.75rem; color: var(--muted); } .as-kind, .as-topics__label, .as-toc__h, .as-mini-h, .as-offer__label, .as-verdict__h, .as-basic__list dt, .as-high dt, .as-trust__nums dt { font-family: var(--f-body); font-weight: 700; letter-spacing: 0; font-size: 0.75rem !important; text-transform: none; } .as-mini-h, .as-verdict__h, .as-offer__label, .as-basic__list dt, .as-high dt, .as-trust__nums dt { color: var(--muted) !important; } .as-dir__meta, .as-crumb ol { font-family: var(--f-body); font-size: 0.75rem; letter-spacing: 0; } .as-dir__meta b { font-weight: 700; } /* 数字は Manrope（価格・件数・校数・日付の大きい表示） */ .as-offer__price, .as-high dd, .as-finder__count b, .as-trust__nums dd, .as-pcard__n b, .as-fhero__stats b { font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; } .as-brand__name { font-family: var(--f-display); letter-spacing: .02em; } .as-article__nav a { display: inline-block; padding-block: 4px; } /* ---------- 0.6.0 余白を広げ、見出しを一段細く・小さく ---------- * 編集長のご指摘（2026-10-04）「全体的に余白をもう少し多めに」「見出しが少し太め」。 * Mac のヒラギノは 700 だとかなり太く出る。見出しは 600、本文の強調だけ 700 のまま。 * Manrope も 600 を足した（欧文だけ太いまま残らないように）。 */ .artiql-site h1, .artiql-site h2, .artiql-site h3, .as-lead__title, .as-card__title, .as-lead__t, .as-results__t, .as-pcard__t, .as-brand__name, .as-menu a, .as-dir__title, .as-axis .as-axis__head h2, .as-block > h2, .as-panel h2, .as-caution h2 { font-weight: 600; } /* 画面の左右と、節の間 */ .as-wrap { padding-inline: clamp(16px, 4vw, 40px); } .as-main { padding-block: 0 clamp(72px, 9vw, 120px); } .as-fsec { margin-top: clamp(64px, 8vw, 104px); } .as-main > .as-wrap > .as-fsec:first-of-type, .as-main > .as-wrap > h2.as-sr + .as-fsec { margin-top: clamp(32px, 4vw, 48px); } .as-fsec__head { margin-bottom: clamp(24px, 3vw, 32px); padding-bottom: 14px; } .as-fsec__head h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; } .as-fsec__lead { margin-top: 6px; } /* ヘッダー */ .as-mast { padding-block: 20px 16px; } .as-menu { gap: 0 28px; } .as-menu a { min-height: 48px; } .as-topics { gap: 8px; } /* 冒頭のリード記事と新着 */ .as-lead { gap: clamp(32px, 4.5vw, 64px); } .as-lead__link { gap: 12px; } .artiql-site .as-lead__title { font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.55; letter-spacing: .01em; } .as-lead__ex { font-size: 0.875rem; line-height: 1.8; } .as-lead__list a { gap: 16px; padding-block: 20px; grid-template-columns: 96px minmax(0, 1fr); } .as-lead__list li:first-child a { padding-top: 4px; } .as-lead__t { font-size: 0.9375rem; line-height: 1.6; } .as-lead__list > li > a > span { gap: 6px; } /* カード */ .as-cards { gap: clamp(36px, 4vw, 48px) clamp(24px, 3vw, 36px); } .as-cards .as-card__link { gap: 14px; } .artiql-site .as-cards .as-card__title { font-size: 1rem; line-height: 1.65; } .as-card__meta { gap: 6px 12px; } /* 条件で探す・学ぶ目的・調べ方 */ .as-findsec__grid { gap: clamp(32px, 4.5vw, 64px); } .as-finder { padding: clamp(20px, 3vw, 32px); gap: 18px; } .as-purposes { gap: 16px; } .as-pcard { padding: 22px 22px 44px; gap: 8px; } .artiql-site .as-pcard__t { font-size: 1.0625rem; } .as-trust { padding: clamp(24px, 4vw, 48px); } .as-trust__rules { gap: 14px; margin-top: 28px; } /* 詳細ページ */ .as-dir__head { gap: clamp(24px, 4vw, 48px); padding-block: 16px 8px; } .artiql-site .as-dir__title { font-size: clamp(1.625rem, 3.4vw, 2.125rem); line-height: 1.45; } .as-verdict { margin-top: 32px; padding: 20px 24px; } .as-mini-h { margin: 40px 0 12px !important; } .as-duo { gap: 16px; margin-top: 24px; } .as-panel, .as-caution { padding: 20px 22px; } .as-caution { margin-top: 16px; } .as-dir__layout { gap: clamp(32px, 4vw, 56px); margin-top: clamp(48px, 6vw, 72px); } .as-axis .as-axis__head { margin-top: 64px; } .as-axis .as-axis__head h2 { font-size: 1.25rem; } .as-block { margin-top: 64px; } .as-block > h2 { font-size: 1.25rem; } /* フッター */ .as-footer { padding-block: clamp(40px, 6vw, 64px); } /* ===== 0.7.0 お知らせ（例：新規申込停止中） ===== */ .as-chip--notice { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); font-weight: 700; vertical-align: 0.15em; white-space: nowrap; } .as-card__title .as-chip--notice { margin-left: 4px; } .as-notice { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 16px 0 0; padding: 12px 16px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 4px; font-size: 0.875rem; line-height: 1.7; color: var(--ink); } .as-notice b { color: var(--warn); font-weight: 700; } /* ===== 0.8.0 詳細ページの手入れ ===== */ /* 基本情報：項目の数がいくつでも、最後の行に1つだけ取り残されないように並べる。線は各マスの右と下に引き、外枠で切る */ .as-basic__list { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); } .as-basic__list > div, .as-basic__list > div:last-child, .as-basic__list > div:nth-child(n) { border: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); padding: 12px 16px; } @media (max-width: 760px) { .as-basic__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 項目｜内容の表：項目名は1文字ずつ折れない幅にする */ .as-kv th, .as-kv td:first-child:not(:only-child) { width: 10.5em; } /* 近いスクールの比較：数字と短い値は途中で折らない */ .as-alts td:not(:first-child):not(:last-child) { white-space: nowrap; } .as-alts td:last-child { min-width: 14em; } /* 出典の記号（S10 など）を2行に割らない */ .as-src { white-space: nowrap; flex: none; } /* 比較の軸がまだ無いページは1段組にする */ .as-dir__layout--single { grid-template-columns: minmax(0, 1fr); } /* 口コミ（0件のとき） */ .as-reviews { padding: 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 4px; } .as-content .as-reviews p { margin: 0; color: var(--muted); font-size: 0.875rem; } .as-content .as-reviews p + p { margin-top: 8px; } .as-content .as-reviews .as-reviews__count { color: var(--ink); font-weight: 700; font-size: 0.9375rem; } .as-content .as-reviews .as-reviews__lead { margin-top: 16px; font-size: 0.75rem; font-weight: 700; } .as-content .as-reviews__axes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .as-content .as-reviews__axes li { margin: 0; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 3px; font-size: 0.8125rem; color: var(--ink); } @media (max-width: 560px) { /* 縦に並べたときは、行の区切り線だけを引く（セルの線と二重にしない） */ .as-content .as-kv td { border-bottom: 0; } } /* ===== 0.9.0 比較の軸の共通の行・読み物 ===== */ /* 中立の札（形式・分野など、良し悪しの無い状態） */ .as-st--info { background: var(--sunken); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } /* 読み物の節の見出し（このスクールとは・編集部の視点） */ .as-sec-h { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.45; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); } .as-intro, .as-view { margin-top: clamp(48px, 6vw, 72px); max-width: 46em; } .as-intro > p, .as-view > p { margin: 0 0 1em; line-height: 1.9; } /* 特徴：番号つきの見出し＋説明。箱で囲まず、罫線で区切る */ .as-features { list-style: none; counter-reset: feat; margin: 0; padding: 0; } .as-features li { counter-increment: feat; position: relative; padding: 16px 0 16px 44px; border-top: 1px solid var(--line); } .as-features li:last-child { border-bottom: 1px solid var(--line); } .as-features li::before { content: counter(feat, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--f-mono); font-size: 0.75rem; color: var(--accent); letter-spacing: .08em; } .as-features b { display: block; font-size: 1rem; line-height: 1.6; } .as-features p { margin: 6px 0 0; color: var(--ink); line-height: 1.85; font-size: 0.9375rem; } /* 編集部の視点：意見であることを最初に断る */ .as-view__note { font-size: 0.8125rem !important; color: var(--muted); } /* 一覧の「ほかの条件」 */ .as-filter__more { flex-basis: 100%; } .as-filter__more summary { cursor: pointer; font-size: 0.8125rem; font-weight: 700; color: var(--accent); min-height: 32px; display: inline-flex; align-items: center; } .as-filter__more-body { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } /* 複数選んだ状態の札は少し間を空けて並べる */ .as-axis td .as-st + .as-st { margin-left: -2px; } /* ===== 0.9.1 「○○とは」と「編集部の視点」を広い画面で2段に ===== */ /* 左に見出しと概要、右に特徴。狭い画面では上下に並べる。1段しか中身が無いときは広げない */ .as-intro, .as-view { max-width: none; } .as-split__a > p, .as-split__b > p { margin: 0 0 1em; line-height: 1.9; } .as-split__b > .as-mini-h:first-child { margin-top: 0 !important; } @media (min-width: 900px) { .as-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 72px); align-items: start; } .as-split--one { display: block; max-width: 46em; } /* 右の段の先頭を、左の見出しの下線にそろえる */ .as-intro .as-split__b { padding-top: 4px; } .as-intro .as-split__b > .as-mini-h:first-child { margin-bottom: 0 !important; padding-bottom: 12px; } .as-features li:first-child { border-top: 2px solid var(--ink); } .as-view .as-split__b { padding-top: 6px; } .as-view .as-view__note { margin: 0; } } /* ===== 0.10.0 読み物の節（○○とは・特徴・向いている方・申し込み前の確認・編集部の見解） ===== */ /* 箱・色・番号で飾らず、上の罫線と見出しで区切る。広い画面では左に見出し、右に中身 */ .as-read { margin-top: clamp(48px, 6vw, 72px); padding-top: 20px; border-top: 2px solid var(--ink); } .as-read__head h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; } .as-read__note { margin: 8px 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.7; } .as-read__body { margin-top: 16px; } .as-read__body > p { margin: 0 0 1em; line-height: 1.95; } .as-read__body > p:last-child { margin-bottom: 0; } @media (min-width: 900px) { .as-read { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); align-items: start; } .as-read__body { margin-top: 0; } } /* 特徴：見出しと説明を罫線で区切って並べる */ .as-read .as-features { list-style: none; margin: 0; padding: 0; } .as-read .as-features li { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--line); } .as-read .as-features li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .as-read .as-features li::before { content: none; } .as-read .as-features b { display: block; font-size: 1rem; line-height: 1.6; margin-bottom: 4px; } /* 向いている方・向いていない方 */ .as-fits { display: grid; gap: 28px; } @media (min-width: 640px) { .as-fits { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .as-fit h3 { margin: 0 0 8px; font-size: 0.875rem; font-weight: 700; color: var(--muted); } .as-fit ul, .as-read .as-checks { margin: 0; padding: 0; list-style: none; } .as-fit li { position: relative; padding: 10px 0 10px 1.1em; border-top: 1px solid var(--line); line-height: 1.8; font-size: 0.9375rem; } .as-fit li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 6px; height: 1px; background: var(--ink); } /* 申し込み前の確認：見出しと説明の組を罫線で区切る */ .as-read .as-checks li { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--line); line-height: 1.85; } .as-read .as-checks li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .as-read .as-checks b { display: block; margin-bottom: 2px; } /* 以前の特徴の飾り（番号・上の罫線）を読み物の節では消す */ .as-read .as-features li, .as-read .as-features li:first-child { border-top: 0; padding-left: 0; counter-increment: none; position: static; } .as-read .as-features b, .as-read .as-checks b { font-weight: 700; color: var(--ink); } .as-read .as-features p { margin: 0; } /* ===== 0.10.1 読み物の節を1段に戻す（2026-10-04 編集長のご判断） ===== */ /* 見出しの下に中身。文章は読みやすい幅で止める。向いている方・向いていない方の2列はそのまま */ @media (min-width: 900px) { .as-read { display: block; } .as-read__body { margin-top: 20px; } } .as-read__body > p, .as-read .as-features, .as-read .as-checks { max-width: 46em; } /* 0.10.2 読み物の文章は段の幅いっぱいに流す（幅で止めると右が空く。2026-10-04 編集長のご指摘） */ .as-read__body > p, .as-read .as-features, .as-read .as-checks { max-width: none; } /* ===== 0.11.0 料金と主な条件・料金シミュレーション・評判・変更履歴・途中のボタン・横並び比較 ===== */ /* 料金と主な条件：主な条件の下に、残りの基本情報を小さく並べる */ .as-basic .as-high { margin-top: 0; } .as-basic__list--sub { margin-top: 12px; } .as-basic__list--sub dd { font-size: 0.875rem; } /* 読み物の中の小見出し（メリット／デメリット・注意点） */ .as-read__sub { margin: 28px 0 12px; font-size: 1rem; font-weight: 700; } .as-read__sub:first-child { margin-top: 0; } /* 料金の図：1か月あたりの金額の横棒 */ .as-pricechart { margin: 0 0 28px; } .as-pricechart figcaption { font-size: 0.8125rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; } .as-pricechart figcaption small { display: block; font-weight: 400; margin-top: 2px; } .as-pricechart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .as-pricechart li { display: grid; grid-template-columns: minmax(7em, 11em) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 0.875rem; } .as-pricechart__bar { height: 12px; background: var(--sunken); border-radius: 2px; overflow: hidden; } .as-pricechart__bar i { display: block; height: 100%; background: var(--ink); } .as-pricechart__val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } @media (max-width: 480px) { .as-pricechart li { grid-template-columns: minmax(0, 1fr) auto; } .as-pricechart__bar { grid-column: 1 / -1; grid-row: 2; } } /* 料金シミュレーション */ .as-sim__q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; font-size: 0.9375rem; } .as-sim__q label { font-weight: 700; } .as-sim__q select { font: inherit; min-height: 40px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); } .as-sim .as-scroll { margin-top: 0; } .as-sim__table { min-width: 0; } .as-content .as-sim__table th small { display: block; color: var(--muted); font-weight: 400; font-size: 0.75rem; } .as-sim__total { font-weight: 700; white-space: nowrap; } .as-sim__how { color: var(--muted); white-space: nowrap; } .as-content .as-sim__table tr.is-best > * { background: var(--ok-bg); } .as-sim__best { margin: 12px 0 0; font-weight: 700; } .as-sim__note { margin: 8px 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.7; } /* 変更の履歴 */ .as-history { list-style: none; margin: 0; padding: 0; } .as-history li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); line-height: 1.8; } .as-history li:first-child { border-top: 0; padding-top: 0; } .as-history time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.875rem; } @media (max-width: 480px) { .as-history li { grid-template-columns: 1fr; } } /* 比較の軸の終わりのボタン */ .as-content .as-axis-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 20px 0 0; } .as-content .as-axis-cta .as-btn { color: var(--surface); text-decoration: none; } .as-content .as-axis-cta span { font-size: 0.8125rem; color: var(--muted); } /* 横並び比較の入口 */ .as-vs p { margin: 0 0 12px; color: var(--muted); font-size: 0.875rem; } .as-vs__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; } .as-vs__form label { display: grid; gap: 4px; font-size: 0.7812rem; font-weight: 700; color: var(--muted); min-width: min(100%, 16em); } .as-vs__form select { font: inherit; font-size: 0.875rem; min-height: 40px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); } /* 横並び比較のページ */ .as-compare .as-table th[scope="col"] { vertical-align: top; min-width: 12em; } .as-compare .as-table th[scope="col"] a:first-child { display: block; font-weight: 700; } .as-compare__cta { margin-top: 10px; font-size: 0.8125rem; min-height: 36px; padding: 6px 12px; } .as-compare__group th { background: var(--sunken); font-size: 0.8125rem; color: var(--muted); text-align: left; } .as-compare__none { color: var(--muted); } .as-compare .as-table th[scope="row"] { font-weight: 700; font-size: 0.8438rem; white-space: nowrap; } /* 比べる入口：長いスクール名で選択欄が画面の外に伸びないようにする */ .as-vs__form label { flex: 1 1 16em; min-width: 0; } .as-vs__form select { width: 100%; max-width: 100%; } /* 横並び比較：スクール名のリンクを押しやすい高さに */ .as-compare .as-table th[scope="col"] a:first-child { min-height: 24px; padding: 4px 0; line-height: 1.5; } /* ===== 0.11.1 トップのニュース・コラムを3列で並べる ===== */ .as-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .as-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .as-cards--3 { grid-template-columns: minmax(0, 1fr); } } /* 予算の説明（申し込み時に払う額の決め方） */ .as-filter__help, .as-finder__help { flex-basis: 100%; margin: 4px 0 0; font-size: 0.8125rem; color: var(--muted); line-height: 1.7; } /* ===== 0.12.0 料金シミュレーション：広い画面では左に図、右に表（2026-10-05 編集長のご指摘） ===== */ .as-pricegrid { display: grid; gap: 32px; } @media (min-width: 900px) { .as-pricegrid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 56px); align-items: start; } .as-pricegrid .as-pricechart { margin: 0; } .as-pricegrid .as-pricechart li { grid-template-columns: minmax(6.5em, 8em) minmax(0, 1fr) auto; } } /* 図の見出しと期間の選択を同じ高さの帯にそろえ、表との間を空ける */ .as-pricechart figcaption { margin-bottom: 16px; } .as-sim__q { margin: 0 0 20px; min-height: 40px; } .as-sim__q select { min-width: 7.5em; } .as-content .as-sim__table th, .as-content .as-sim__table td { padding: 14px 16px; } .as-sim__best { margin-top: 16px; } /* メリット／デメリット・注意点の見出しを、節の中の見出しとしてはっきり見せる（2026-10-05 編集長のご指摘：小さく詰まって見づらい） */ .as-read__sub { margin: 48px 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line-strong); font-family: var(--f-display); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 600; line-height: 1.5; } .as-read__sub:first-child { margin-top: 4px; } .as-read .as-read__body .as-read__sub { margin: 56px 0 20px; } .as-read .as-read__body .as-read__sub:first-child { margin-top: 8px; } /* 料金の図と表を縦に並べるときは、中身の幅で段がはみ出さないようにする（320px＋文字1.15倍で69pxはみ出していた） */ @media (max-width: 899px) { .as-pricegrid { grid-template-columns: minmax(0, 1fr); } } .as-pricegrid > * { min-width: 0; } /* 目次の中の区切り（比較の軸） */ .as-toc__group { margin: 10px 0 2px; padding: 0 6px; font-size: 0.6875rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; } @media (max-width: 960px) { .as-toc__group { grid-column: 1 / -1; } } /* 0.12.1 比較表はすぐ絞り込むので、JavaScript が動くときは「この条件で表示」を隠す */ .as-filter [hidden] { display: none !important; } /* ===== 0.14.0 差し色・見出しのジャンプ率・余白（2026-10-05 編集長のご要望） ===== * 白地はそのまま。差し色はサイトごとに sites/{id}/style.css の --brand で決める（初期値は墨＝これまでと同じ見た目）。 * --brand 塗り（主なボタン）。上に白い文字が乗るので、白とのコントラスト 4.5:1 以上の色にする * --brand-line 飾りの線・図の棒（文字ではないので 3:1 以上でよい） * --on-brand 塗りの上の文字の色 * 見出しは本文の約2倍（節）〜3倍（ページの題名）にし、節の間を広く取る。 */ body.artiql-site { --brand: var(--ink); --brand-line: var(--ink); --on-brand: var(--surface); font-size: 1rem; line-height: 1.9; } /* 差し色を使う場所：主なボタン・ヘッダーの上の線・節の見出しの印・英語の小見出し・料金の棒・目次の現在地 */ .as-btn--primary, html[data-as-theme="dark"] .as-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand) !important; } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-btn--primary { color: var(--on-brand) !important; } } .as-content .as-axis-cta .as-btn--primary { color: var(--on-brand) !important; } .as-header { border-top: 3px solid var(--brand-line); } .as-menu a:hover, .as-menu .current-menu-item > a { border-bottom-color: var(--brand-line); } .as-topics a:hover, .as-topics a[aria-current="page"] { border-color: var(--brand-line); color: var(--accent); } .as-eyebrow, .as-fsec__en, .as-kind { color: var(--accent); } .as-pricechart__bar i { background: var(--brand-line); } .as-toc { border-left-color: var(--line); } .as-toc a:hover { color: var(--accent); background: transparent; } .as-fit li::before { background: var(--brand-line); } .as-offer { border-top: 3px solid var(--brand-line); } /* 節の区切り：細い罫線の左端に、差し色の短い印を置く（太い墨の線の代わり） */ .as-read, .as-block, .as-sources { position: relative; border-top: 1px solid var(--line-strong); padding-top: clamp(28px, 3vw, 40px); } .as-read::before, .as-block::before, .as-sources::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 3px; background: var(--brand-line); } .as-block > h2 { border-bottom: 0; padding-bottom: 0; } .as-fsec__head { position: relative; border-bottom: 1px solid var(--line-strong); } .as-fsec__head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 3px; background: var(--brand-line); } /* 見出しのジャンプ率（本文 16px に対して、節は約2倍・ページの題名は約3倍） */ .artiql-site .as-dir__title { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.3; } .as-archive__head h1, .as-article__title { font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1.35; } .as-read__head h2, .as-block > h2, .as-fsec__head h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.4; } .as-sources h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-bottom: 16px; } .artiql-site .as-lead__title { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.4; } .artiql-site .as-cards .as-card__title { font-size: 1.0625rem; line-height: 1.6; } .as-read .as-read__body .as-read__sub { font-size: clamp(1.125rem, 1.8vw, 1.375rem); } .as-dir__lead { font-size: 1.0625rem; line-height: 1.85; } .as-fit h3 { font-size: 0.9375rem; } .as-fit li, .as-features p, .as-read .as-checks li { font-size: 1rem; } /* 余白：節の間・見出しと中身の間を広く */ .as-read, .as-block { margin-top: clamp(80px, 10vw, 128px); } .as-sources { margin-top: clamp(64px, 8vw, 96px); } .as-read__body { margin-top: clamp(24px, 3vw, 36px); } @media (min-width: 900px) { .as-read__body { margin-top: clamp(24px, 3vw, 36px); } } .as-block > h2 { margin-bottom: clamp(24px, 3vw, 36px); } .as-read__body > p { margin-bottom: 1.3em; } .as-fsec { margin-top: clamp(88px, 11vw, 144px); } .as-fsec__head { margin-bottom: clamp(28px, 3.5vw, 44px); padding-bottom: 18px; } .as-dir__layout { gap: clamp(40px, 5vw, 80px); margin-top: clamp(56px, 7vw, 96px); } .as-dir__head { padding-block: clamp(24px, 3vw, 40px) 8px; } .as-dir__lead { margin-top: 8px; } /* 詳細ページの4つのまとまり（0.14.0・2026-10-05 編集長のご指摘：16項目が並列だと読み手の負担が大きい） * まとまりの間は広く、まとまりの中の節の間は狭くして、まとまりが目で見て分かるようにする。 * 区切りには、そのまとまりに入っている節の名前を並べる（読む前に中身が分かるように） */ .as-part { margin-top: clamp(112px, 13vw, 168px); padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px); background: var(--sunken); border-radius: 4px; } .as-dir__main > .as-part:first-child { margin-top: 0; } .as-part p { margin: 0; } .as-part__n { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: var(--ls-label); color: var(--accent); } .as-part__t { margin-top: 6px !important; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--ink); } .as-part__list { margin-top: 8px !important; font-size: 0.8125rem; line-height: 1.7; color: var(--muted); } .as-part ~ .as-read, .as-dir__main > .as-block { margin-top: clamp(64px, 8vw, 96px); } .as-part + .as-read { margin-top: clamp(40px, 5vw, 56px); } /* 目次：まとまりの名前の下に節を並べる */ .as-toc ol.as-toc__list { display: block; } .as-toc__grp + .as-toc__grp, .as-toc__tail { margin-top: 14px; } .as-toc .as-toc__gh { display: block; padding: 4px 6px; font-weight: 700; font-size: 0.8125rem; color: var(--ink); } .as-toc__grp ol { margin-top: 2px !important; } @media (max-width: 960px) { .as-toc__grp ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px) { .as-toc__grp ol { grid-template-columns: 1fr; } } /* ===== 0.14.1 料金の図と表を1段に戻す（2026-10-05 編集長のご指摘：2段だと見づらい） ===== */ /* 上に1か月あたりの図、下に期間を選ぶ総額の表 */ .as-pricegrid { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(32px, 4vw, 48px); } .as-pricegrid .as-pricechart li { grid-template-columns: minmax(7em, 11em) minmax(0, 1fr) auto; } @media (max-width: 480px) { .as-pricegrid .as-pricechart li { grid-template-columns: minmax(0, 1fr) auto; } } /* 期間の選択と表の間を空ける。.as-content p { margin-bottom: 0 } が勝っていて、0.12.0 で付けた余白が効いていなかった */ .as-content .as-sim__q { margin: 0 0 20px; } /* ===== 0.14.2 見出しの折り返し・一覧の比較表（2026-10-05 編集長のご指摘） ===== */ /* 見出しは右端まで詰める。text-wrap: balance は行の長さをそろえるために手前で折り、「学び放／題の」のように切れて見えた */ .artiql-site h1, .artiql-site h2, .artiql-site h3, .artiql-site .as-card__title, .artiql-site .as-lead__title { text-wrap: wrap; } /* 一覧の比較表：運営会社は名前の下に添え、短い値（形式・対象・給付金など）は1行に収める */ .as-table--list { min-width: 760px; font-size: 0.875rem; } .as-table--list th, .as-table--list td { padding: 18px 16px; line-height: 1.6; } .as-table--list thead th { padding-block: 12px; font-size: 0.75rem; } .as-table--list td { white-space: nowrap; } .as-table--list tbody th { min-width: 15em; white-space: normal; } /* 値の列は中身の幅だけ取り、残りをスクール名の列に回す */ .as-table--list td { width: 1%; } .as-table--list tbody th a { display: block; min-height: 24px; padding: 2px 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.55; } .as-table--list tbody th a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .as-table--list tbody th .as-chip { margin: 6px 0 0; display: inline-block; } .as-row__sub { display: block; margin-top: 4px; font-size: 0.75rem; font-weight: 400; color: var(--muted); } .as-table--list .is-date { color: var(--muted); font-size: 0.8125rem; } .as-table--list tbody tr:hover > * { background: var(--sunken); } /* 狭い画面：1校ずつのまとまりにし、項目名と値をタブレットは3列・スマホは2列で並べる（横にスクロールさせない） */ @media (max-width: 1023px) { .as-dirlist .as-table-wrap { overflow: visible; } .as-table--list { min-width: 0; } .as-table--list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .as-table--list, .as-table--list tbody, .as-table--list tr, .as-table--list th, .as-table--list td { display: block; } .as-table--list tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; padding: 20px clamp(16px, 3vw, 24px); border-bottom: 1px solid var(--line); } .as-table--list tbody tr:last-child { border-bottom: 0; } .as-table--list tbody tr:hover > * { background: transparent; } .as-table--list tbody td { width: auto; } .as-table--list tbody th { grid-column: 1 / -1; position: static; min-width: 0; width: auto; padding: 0; border: 0; background: transparent; } .as-table--list tbody td { padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; } .as-table--list tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 0.6875rem; font-weight: 700; color: var(--muted); } } @media (max-width: 559px) { .as-table--list tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===== 0.14.3 まとまりの区切りを飾らない形に（2026-10-05 編集長のご指摘：箱と「PART 1」が AI らしい） ===== */ /* 太い墨の罫線の下に「番号　まとまりの名前」を1行。最初の節は区切りの罫線と重ならないよう、自分の罫線を消す */ .as-part { display: flex; align-items: baseline; gap: 12px; margin: clamp(112px, 13vw, 168px) 0 0; padding: 16px 0 0; background: none; border-radius: 0; border-top: 2px solid var(--ink); font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.5; color: var(--ink); } .as-dir__main > .as-part:first-child { margin-top: 0; } .as-part__n { font-family: var(--f-display); font-size: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--accent); } .as-part + .as-read { margin-top: clamp(32px, 4vw, 48px); padding-top: 0; border-top: 0; } .as-part + .as-read::before { content: none; } /* ===== 0.14.5 見出しの段を構造どおりに（2026-10-05 編集長のご指摘：上位の「どんなスクールか」より節の見出しのほうが大きかった） ===== * まとまり（h2）36px ＞ 節（h3）24px ＞ 節の中の小見出し（h4）18px ＞ 本文 16px。大きさの順と見出しの段をそろえる */ .artiql-site h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.5; color: var(--ink); } .artiql-site .as-part { font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.35; gap: 14px; padding-top: 20px; } .as-read__head h3, .as-block > h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; font-weight: 600; } .as-block > h3 { margin-bottom: clamp(20px, 2.5vw, 28px); } .as-read .as-read__body .as-read__sub { font-size: 1.125rem; } .as-content h4, .as-axis h4 { font-size: 1.125rem; margin-top: 1.8em; } .as-fit h4 { margin: 0 0 10px; font-size: 1.125rem; font-weight: 600; color: var(--ink); } .as-sources h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; margin-bottom: 16px; } .artiql-site .as-part .as-part__t { font-size: inherit; margin-top: 0 !important; } /* ===== 0.14.6 フッターの固定ページへのリンク（掲載方針など） ===== */ .as-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; padding: 0; } .as-footer__links a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); } /* ===== 0.15.0 スマホの見直し（2026-10-05） ===== * 1. 目次と絞り込みは、狭い画面では畳んで出す（本文・結果が1〜2画面ぶん下がっていた） * 2. 記事のカードは、狭い画面では左に小さな写真・右に題名の行にする（写真の無い面が大きく、1画面に2本しか入らなかった） * 3. 押せるところは、狭い画面では高さ44px以上 * 4. 絞り込みの選択欄は2列にする（3列だと「指定なし」が切れていた） */ .as-collapse > summary { list-style: none; } .as-collapse > summary::-webkit-details-marker { display: none; } @media (min-width: 961px) { /* 広い画面では常に開いている。目次の見出しは押せない見出しとして見せ、絞り込みの見出しは出さない */ .as-toc__box > summary { pointer-events: none; min-height: 24px; } .as-filterbox > summary { display: none; } } @media (max-width: 960px) { .as-collapse > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; font-size: 0.9375rem !important; font-weight: 700; color: var(--ink) !important; letter-spacing: 0; } .as-collapse > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; } .as-collapse[open] > summary::after { transform: rotate(-135deg) translate(-2px, 0); } /* 目次：枠ごと畳む */ .as-toc { padding: 0; } .as-toc__box > summary { margin: 0; } .as-toc__box[open] > summary { border-bottom: 1px solid var(--line); } .as-toc__box > ol { padding: 12px 16px 16px; } .as-toc a { min-height: 44px; align-items: center; } .as-toc .as-toc__gh { min-height: 40px; display: flex; align-items: center; } /* 絞り込み：見出しの帯を押して開く */ .as-filterbox { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } .as-filterbox__n { margin-right: auto; margin-left: 4px; font-weight: 400; color: var(--accent); font-size: 0.875rem; } .as-filterbox[open] > summary { border-bottom: 1px solid var(--line); } .as-filterbox > .as-filter { border: 0; border-radius: 0; } } @media (max-width: 760px) { .as-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-items: end; } .as-filter > label, .as-filter__more-body > label { min-width: 0; } .as-filter select { width: 100%; min-height: 44px; } .as-filter > .as-filter__more, .as-filter > .as-btn, .as-filter > .as-filter__help, .as-filter > label[for="as-filter-sort"] { grid-column: 1 / -1; } .as-filter__more-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } .as-filter__more summary { min-height: 44px; } /* 押せるところの高さ */ .as-tool { min-width: 44px; min-height: 44px; } .as-fsec__more { display: inline-flex; align-items: center; min-height: 44px; } .as-opt span { min-height: 44px; display: inline-flex; align-items: center; } .as-topics a { min-height: 40px; } .as-footer__links a, .as-footer .as-menu a { min-height: 44px; } } @media (max-width: 560px) { /* 記事のカード：左に写真、右に日付と題名 */ .as-cards, .as-cards--3 { grid-template-columns: minmax(0, 1fr); gap: 0; } .as-cards .as-card + .as-card { border-top: 1px solid var(--line); } .as-cards .as-card__link { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding-block: 18px; } .as-cards .as-card:first-child .as-card__link { padding-top: 0; } .as-cards .as-card__thumb { aspect-ratio: 4 / 3; } .as-cards .as-card__thumb.is-tint span { display: none; } .artiql-site .as-cards .as-card__title { font-size: 0.9375rem; line-height: 1.6; } .as-cards .as-card__excerpt { display: none; } .as-cards .as-card__meta { gap: 4px 8px; } } /* 目次から飛んだとき、見出しが画面の端に貼り付かないように */ .as-part, .as-read, .as-block, .as-sources { scroll-margin-top: 20px; } /* ===== 0.15.1 まとまりの見出しの上の余白（2026-10-05 編集長のご指摘：上と詰まっていた） ===== * 0.14.5 で区切りを h2 にしたら、.artiql-site h2 { margin: 0 } が勝って上の余白が消えていた */ .artiql-site .as-part { margin-top: clamp(112px, 13vw, 168px); } .artiql-site .as-dir__main > .as-part:first-child { margin-top: 0; } /* ===== 0.15.3 記事の題名を一段小さく（2026-10-05 編集長のご指摘：もう少しだけ小さく） ===== * 最大44px → 36px（本文16pxの約2.25倍）。長い題名が4行に折れていた */ .artiql-site .as-article__title { font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.45; } /* ===== 0.16.0 記事の下の内部リンク（関連記事・最新記事・おすすめのスクール・比較ページ） ===== */ .as-related { max-width: 860px; margin: clamp(48px, 6vw, 72px) auto 0; display: grid; gap: clamp(48px, 6vw, 64px); } .as-related__sec, .as-related__compare { position: relative; border-top: 1px solid var(--line-strong); padding-top: 24px; } .as-related__sec::before, .as-related__compare::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 3px; background: var(--brand-line); } .artiql-site .as-related__h { margin: 0 0 16px; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; } .as-related__list { list-style: none; margin: 0; padding: 0; } .as-related__list li + li { border-top: 1px solid var(--line); } .as-related__list a { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 0; color: var(--ink) !important; text-decoration: none; line-height: 1.6; } .as-related__list a:hover .as-related__t { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .as-related__list time { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: var(--ls-label); color: var(--muted); } .as-related__list .as-related__t { font-weight: 600; } .as-related__schools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15em, 100%), 1fr)); gap: 12px; } .as-related__schools a { display: grid; gap: 4px; align-content: start; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink) !important; text-decoration: none; } .as-related__schools a:hover { border-color: var(--brand-line); } .as-related__schools b { font-weight: 600; line-height: 1.55; } .as-related__schools span { font-size: 0.8125rem; line-height: 1.75; color: var(--muted); } .as-related__compare p { margin: 0 0 16px; color: var(--muted); } @media (max-width: 560px) { .as-related__list a { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* ===== 0.16.1 詳細ページの冒頭を淡い面の帯にする（2026-10-05 編集長のご判断・案A） ===== * 写真は使わず、題名と料金の箱を生成り色の帯に載せて本文と分ける。帯は画面の端から端まで * （囲みの幅は変えず、影と切り抜きで横に広げる。横スクロールは出ない） */ .as-dir__head { position: relative; background: var(--sunken); box-shadow: 0 0 0 100vmax var(--sunken); clip-path: inset(0 -100vmax); padding-block: clamp(36px, 5vw, 64px); margin-top: 8px; } .as-dir__head .as-chip { background: var(--surface); } .as-dir__head .as-offer { box-shadow: 0 1px 2px rgba(31, 30, 29, .04), 0 8px 24px rgba(31, 30, 29, .06); border-color: transparent; } .as-dir__head + * { margin-top: clamp(56px, 7vw, 96px); } /* ===== 0.16.3 フッター（2026-10-05 編集長のご要望：一般的な案内を足す・背景は黒に近い灰色） ===== * 明るい表示・暗い表示とも同じ濃い帯にする。文字の色は帯の上で読める組（--ft-*）を使う */ .as-footer { --ft-bg: #22211F; --ft-ink: #F1EEE8; --ft-muted: #B3AEA5; --ft-line: #3A3835; background: var(--ft-bg); color: var(--ft-muted); border-top: 0; padding-block: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 48px); font-size: 0.875rem; } html[data-as-theme="dark"] .as-footer { --ft-bg: #0B0B0A; } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-footer { --ft-bg: #0B0B0A; } } .as-footer a { color: var(--ft-ink) !important; text-decoration: none; } .as-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } .as-footer a:focus-visible { outline-color: var(--ft-ink); } .as-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px clamp(32px, 5vw, 72px); align-items: start; } .as-footer__name { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; } .as-footer__tag { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.7; } .as-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .as-footer__h { margin: 0 0 12px; font-size: 0.75rem; font-weight: 700; color: var(--ft-muted); letter-spacing: .04em; } .as-footer .as-menu, .as-footer__links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .as-footer .as-menu a, .as-footer__links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 0.875rem; font-weight: 400; color: var(--ft-ink) !important; border-bottom: 0; } .as-footer__bottom { margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--ft-line); font-size: 0.75rem; line-height: 1.8; } .as-footer__bottom p { margin: 0; } .as-footer__bottom p + p { margin-top: 6px; } .as-footer__note { max-width: 760px; } @media (max-width: 760px) { .as-footer__inner { grid-template-columns: minmax(0, 1fr); } .as-footer .as-menu a, .as-footer__links a { min-height: 44px; } } @media (max-width: 380px) { .as-footer__nav { grid-template-columns: minmax(0, 1fr); gap: 20px; } } /* 区切り線は文字の幅にそろえる（囲みの左右の余白まで線が伸びていた） */ .as-footer__bottom { border-top: 0; padding-top: 0; } .as-footer__bottom::before { content: ""; display: block; border-top: 1px solid var(--ft-line); margin-bottom: 24px; } /* ===== 0.16.9 記事の下の一覧にアイキャッチ（2026-10-05 編集長のご要望） ===== */ .as-related__list a { grid-template-columns: 144px minmax(0, 1fr); gap: 16px 20px; align-items: start; padding: 16px 0; } .as-related__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: var(--sunken); } .as-related__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .as-related__txt { display: grid; gap: 4px; min-width: 0; } .as-related__list .as-related__t { font-weight: 600; line-height: 1.6; } .as-related__list a:hover .as-related__t { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 560px) { .as-related__list a { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; } .as-related__thumb { aspect-ratio: 4 / 3; } .as-related__list .as-related__t { font-size: 0.9375rem; } } /* ===== 0.17.0 トップ：背景を淡い灰色にし、記事を白いカードで見せる（2026-10-05 編集長のご要望） ===== * 記事のページ・詳細ページは白地のまま（長い文章を読むため）。暗い表示では背景はこれまでどおり */ body.artiql-site.as-on-gray { background: var(--page-gray, #F4F3F0); } /* 色はサイトの style.css で変えられる（0.20.0） */ html[data-as-theme="dark"] body.artiql-site.as-on-gray { background: var(--bg); } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) body.artiql-site.as-on-gray { background: var(--bg); } } .as-on-gray .as-cards .as-card { background: var(--surface); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(31, 30, 29, .05), 0 6px 20px rgba(31, 30, 29, .05); transition: box-shadow .2s; } .as-on-gray .as-cards .as-card:hover { box-shadow: 0 2px 4px rgba(31, 30, 29, .06), 0 12px 28px rgba(31, 30, 29, .09); } .as-on-gray .as-cards .as-card__link { gap: 0; } .as-on-gray .as-cards .as-card__thumb { border-radius: 0; } .as-on-gray .as-cards .as-card__body { padding: 16px 18px 20px; } .as-on-gray .as-cards { gap: clamp(20px, 2.5vw, 28px); } @media (max-width: 560px) { .as-on-gray .as-cards, .as-on-gray .as-cards--3 { gap: 12px; } .as-on-gray .as-cards .as-card + .as-card { border-top: 0; } .as-on-gray .as-cards .as-card__link, .as-on-gray .as-cards .as-card:first-child .as-card__link { gap: 14px; padding: 12px; } .as-on-gray .as-cards .as-card__thumb { border-radius: 4px; } .as-on-gray .as-cards .as-card__body { padding: 2px 0 0; } } /* 注記は帯の幅いっぱいに流す（760px で止めていて「こと／はありません」と折れていた） */ .as-footer__note { max-width: none; } /* トップの灰色の上では、写真の無い面を少し濃くする（白いカードと見分けがつかなかった） */ .as-on-gray .as-card__thumb.is-tint { background: var(--thumb-tint, #ECE9E3); } html[data-as-theme="dark"] .as-on-gray .as-card__thumb.is-tint { background: var(--sunken); } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-on-gray .as-card__thumb.is-tint { background: var(--sunken); } } /* 一覧の料金：「＋入会金…」は2行目に小さく */ .as-price__add { display: block; font-size: 0.8125rem; color: var(--muted); } /* ===== 0.17.6 一覧ページの題名を一段小さく（2026-10-05 編集長のご指摘） ===== * 最大44px → 36px（記事の題名と同じ大きさ） */ .artiql-site .as-archive__head h1 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1.4; } /* 一覧：絞り込み・件数・表の間に余白をとる（2026-10-05 編集長のご指摘：詰まって見える） */ .as-tabs { margin-bottom: clamp(20px, 2.5vw, 28px); } .as-filter { padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 32px); gap: 16px 14px; } .as-filterbox { margin-bottom: 0; } .as-dirlist__meta { margin: clamp(36px, 4.5vw, 56px) 0 16px; } .as-dirlist__meta .as-count { margin: 0; font-size: 0.9375rem; } .as-dirlist__meta .as-count span { margin-left: 8px; font-size: 0.8125rem; font-weight: 400; color: var(--muted); } .as-dirlist__meta .as-note { margin: 6px 0 0; font-size: 0.8125rem; color: var(--muted); } @media (max-width: 560px) { .as-dirlist__meta .as-count span { display: block; margin: 4px 0 0; } } /* ===== 0.17.7 比較表の見出しで並べ替える ===== */ .as-th-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: inherit !important; text-decoration: none; cursor: pointer; } .as-th-sort:hover { color: var(--ink) !important; } .as-th-sort__i::before { content: "↕"; font-size: 0.75rem; color: var(--line-strong); } th[aria-sort="ascending"] .as-th-sort__i::before { content: "↑"; color: var(--accent); } th[aria-sort="descending"] .as-th-sort__i::before { content: "↓"; color: var(--accent); } th[aria-sort] .as-th-sort { color: var(--ink) !important; } /* ===== 0.17.8 箇条書き・申し込みボタン（2026-10-05 編集長のご指摘） ===== */ /* 向いている方・向いていない方：横線と差し色の短い線をやめ、ふつうの丸い点の箇条書きにする */ .as-fit ul { list-style: disc; padding-left: 1.3em; margin: 0; } .as-fit li { padding: 6px 0; border-top: 0; } .as-fit li::before { content: none; } .as-fit li::marker { color: var(--muted); } /* 節の終わりの申し込みボタンは中央に置く（横の補足は出さない） */ .as-content .as-axis-cta { justify-content: center; margin-top: 32px; } /* 条件で探す：全幅の1段にする（0.20.1・2026-10-24 編集部のご指示）。 左に掲載の状況・右に条件の欄の2段組では、左が短く下が大きく空いていた。 掲載の状況と掲載方針の一文を欄の上に横一列で並べ、条件の欄は全幅に広げる（選択肢がほぼ1行に収まる） */ .as-findsec__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } @media (min-width: 901px) { .as-findsec__about { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 32px; align-items: center; } .as-finder__group { grid-template-columns: 10em minmax(0, 1fr); gap: 12px; } } /* トップの節を灰色の帯にする（0.21.0・front の 'band' => true）。画面の端まで塗るが、横スクロールは出さない （100vw は縦のスクロールバーの幅を含むので使わず、影を広げて左右を切る） */ .as-fsec--band { --band: #E9E7E2; position: relative; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); padding-block: clamp(40px, 6vw, 72px); } html[data-as-theme="dark"] .as-fsec--band { --band: var(--sunken); } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-fsec--band { --band: var(--sunken); } } /* ===== 0.22.0 トップのキービジュアル（front の 'style' => 'kv'・2026-10-24 編集部のご判断で案B） ===== * 灰色の地に研究ノートの方眼（48px ごと）、右に柿色の学習曲線。左に札・キャッチコピー・一文・検索の枠。 * 地は画面の端まで塗る。100vw はスクロールバーの幅を含んで横に出るので、はみ出した分は .as-main で切る（overflow-x: clip はスクロールの箱を作らない） * 色は --kv-bg・--kv-grid（サイトの style.css で変えられる） */ .as-is-top .as-main { overflow-x: clip; } .as-topkv { --kv-bg: var(--page-gray, #F4F3F0); --kv-grid: #E6E3DC; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: clamp(56px, 8vw, 112px); } .as-topkv::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background-color: var(--kv-bg); background-image: linear-gradient(var(--kv-grid) 1px, transparent 1px), linear-gradient(90deg, var(--kv-grid) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; border-bottom: 1px solid var(--line); } html[data-as-theme="dark"] .as-topkv { --kv-bg: var(--bg); --kv-grid: var(--line); } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-topkv { --kv-bg: var(--bg); --kv-grid: var(--line); } } /* 0.22.1 キービジュアルと News の境目をはっきりさせる（2026-10-24 編集部のご指摘「境目がわかりづらい」）。 地を本文の灰色より一段濃くし、下端にグラフの横軸のような墨色の線を引く */ .as-topkv { --kv-bg: #ECE9E3; --kv-grid: #DEDAD1; --kv-axis: var(--ink); } .as-topkv::before { border-bottom: 1px solid var(--kv-axis); } html[data-as-theme="dark"] .as-topkv { --kv-bg: var(--surface); --kv-grid: var(--line); --kv-axis: var(--line-strong); } @media (prefers-color-scheme: dark) { html:not([data-as-theme="light"]) .as-topkv { --kv-bg: var(--surface); --kv-grid: var(--line); --kv-axis: var(--line-strong); } } .as-topkv__text { display: grid; justify-items: start; gap: 24px; min-width: 0; } .artiql-site .as-topkv__label { margin: 0; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--surface); color: var(--accent); font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: .08em; line-height: 1.4; } .artiql-site h1.as-topkv__title { margin: 0; font-family: "Manrope", var(--f-jp); font-weight: 600; font-size: clamp(2.625rem, 6.4vw, 4.75rem); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; } .artiql-site .as-topkv__lead { margin: 0; max-width: 34em; color: var(--muted); font-size: 1rem; line-height: 1.9; } .as-topkv__search { display: flex; width: 100%; max-width: 30rem; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); overflow: hidden; } .as-topkv__search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; } .as-topkv__search input:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .as-topkv__search button { flex: none; min-width: 88px; padding: 0 20px; border: 0; background: var(--ink); color: var(--bg); font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; } .as-topkv__search button:hover { opacity: .88; } .as-topkv__search button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } /* キービジュアルの下の最初の節は、ほかの節どうしより少し詰める */ .as-main > .as-wrap > .as-topkv + .as-fsec { margin-top: clamp(48px, 6vw, 80px); } @media (max-width: 760px) { /* スマホは1段。曲線は文字に重ねず、検索の枠の下に低く敷く */ .as-topkv { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 40px 0; } .as-topkv__text { gap: 18px; } .artiql-site .as-topkv__lead { font-size: 0.9375rem; } } /* ===== 0.22.0 ヘッダーのサイト名を太く大きく（2026-10-24 編集部のご要望「もう少し大きく・太字に」） ===== * 600・22px → 700・28px。字間は詰め、頭に柿色の小さな四角を置いて看板の形にする */ .artiql-site .as-brand__name { font-weight: 700; font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; } .as-brand__name::before { content: ""; display: inline-block; width: .36em; height: .36em; margin-right: .3em; background: var(--brand-line); vertical-align: .08em; } .as-brand__tagline { margin-top: 2px; } @media (max-width: 480px) { .artiql-site .as-brand__name { font-size: 1.375rem; } } @media (max-width: 360px) { .artiql-site .as-brand__name { font-size: 1.25rem; } } /* 0.22.2 曲線を、途中でくるっと輪を描く1本の線にする（2026-10-24 編集部のご要望「動きはいらない・隅まで伸ばさない・右肩上がりでなく遊び心を」）。 右の段に収め、比を固定して描く（輪がつぶれないように）。動きはつけない */ .as-topkv__text { position: relative; z-index: 1; } .as-topkv__curve { display: block; width: 100%; height: auto; max-height: 440px; color: var(--brand-line); } .as-topkv__line { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .as-topkv__dot { fill: var(--surface); stroke: currentColor; stroke-width: 4; } .as-topkv__dot.is-end { fill: currentColor; } @media (max-width: 760px) { /* スマホは検索の枠の下に、低く置く */ .as-topkv { padding-bottom: 32px; } .as-topkv__curve { max-height: 170px; margin-top: 20px; } } /* スマホでは検索の枠の例（「例：Claude Code、AIエージェント」）が切れないよう、ボタンを細く、例の文字を小さく */ @media (max-width: 480px) { .as-topkv__search input { padding: 0 12px; } .as-topkv__search input::placeholder { font-size: 0.875rem; } .as-topkv__search button { min-width: 72px; padding: 0 16px; } } /* ===== 0.25.0 一覧の件数と、カード／リストの切り替え（2026-10-25 編集部のご指示「Springl 同様に」） ===== * 件数の段：左に総数、右に何件目を表示とページ、切り替え。下に墨色の線（何件あるか→どう並べるか の順に読む） * HTML は1つで、形は の data-as-view が決める（無ければカード） */ .as-ibar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: clamp(20px, 2.5vw, 28px); padding-bottom: 12px; border-bottom: 1px solid var(--ink); } .artiql-site .as-ibar__n { margin: 0; font-size: 0.875rem; color: var(--muted); } .as-ibar__n b { margin-right: 2px; font-family: var(--f-display); font-size: 1.375rem; color: var(--ink); } .as-ibar__r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1 1 auto; gap: 8px 20px; } .artiql-site .as-ibar__p { margin: 0; font-family: "IBM Plex Mono", var(--f-jp); font-size: 0.8125rem; color: var(--muted); } .as-vtog { display: inline-flex; padding: 2px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); } .as-vtog__b { font: inherit; font-size: 0.8125rem; font-weight: 700; min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; } .as-vtog__b:hover { color: var(--accent); } .as-vtog__b[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .as-vtog__b:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } /* リスト：面を外して罫線で区切る。写真は左に小さく残す（何の話かの手がかり） */ html[data-as-view="list"] .as-viewable { display: block; } html[data-as-view="list"] .as-viewable .as-card { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; overflow: visible; } html[data-as-view="list"] .as-viewable .as-card__link { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; padding: 20px 0; } html[data-as-view="list"] .as-viewable .as-card__thumb { border-radius: 4px; overflow: hidden; } html[data-as-view="list"] .as-viewable .as-card__body { padding: 0; } @media (max-width: 480px) { html[data-as-view="list"] .as-viewable .as-card__link { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px 0; } html[data-as-view="list"] .as-viewable .as-card__thumb { aspect-ratio: 4 / 3; } html[data-as-view="list"] .as-viewable .as-card__thumb img { aspect-ratio: auto; height: 100%; } html[data-as-view="list"] .as-viewable .as-card__title { font-size: 0.9375rem; line-height: 1.6; } } /* ===== 0.26.0 自社メディアから取り込んだ記事（includes/import.php） ===== * 冒頭に出どころと元の記事へのリンク。本文の画像の囲み（wp-caption）は元のサイトの幅（例 2570px）が直に書かれているので、段の幅に収める */ .artiql-site .as-source { margin: 14px 0 28px; font-size: 0.8125rem; line-height: 1.8; color: var(--muted); } .artiql-site .as-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .as-content .wp-caption { width: auto !important; max-width: 100%; } .as-content .wp-caption img { max-width: 100%; height: auto; } .as-content .wp-caption-text { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); } /* カードの出どころ（Springl・IDEAS FOR GOOD）。カテゴリの札と見分けられるよう、枠なしで淡い地に */ .as-chip--src { border-color: transparent; background: var(--sunken); color: var(--muted); } /* ===== 0.26.4 一覧のカードをトップのカードとそろえる（2026-10-25 編集部のご指示） ===== * 枠線をやめ、白い面に淡い影（トップの .as-on-gray .as-cards .as-card と同じ値）。リスト表示は 0.25.0 の指定がそのまま勝つ */ .as-on-gray .as-viewable { gap: clamp(20px, 2.5vw, 28px); } .as-on-gray .as-viewable .as-card { background: var(--surface); border: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(31, 30, 29, .05), 0 6px 20px rgba(31, 30, 29, .05); transition: box-shadow .2s; } .as-on-gray .as-viewable .as-card:hover { box-shadow: 0 2px 4px rgba(31, 30, 29, .06), 0 12px 28px rgba(31, 30, 29, .09); } .as-on-gray .as-viewable .as-card__link { gap: 0; } .as-on-gray .as-viewable .as-card__thumb { border-radius: 0; } .as-on-gray .as-viewable .as-card__body { padding: 16px 18px 20px; } html[data-as-view="list"] .as-on-gray .as-viewable .as-card:hover { box-shadow: none; } /* 取り込んだ記事の「この記事を書いた人」：媒体へのリンク（0.26.6） */ .artiql-site .as-writer__link { margin: 10px 0 0; font-size: 0.875rem; } .as-writer__link a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* ===== 0.27.0 公式サイトの画面（tools/capture-shots.mjs。2026-10-25 編集部のご指示） ===== * 一覧：名前の左に小さく。詳細ページ：冒頭の帯の背景に敷き、黒の半透明を重ねて文字を白くする。 * 画面の文字がうるさくならないよう、少しぼかす。帯は画面の端まで（はみ出した分は .as-main で切る） */ .artiql-site .as-main { overflow-x: clip; } .as-row__name.has-shot { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: start; } .as-row__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--sunken); } .as-row__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .as-table--list tbody th { min-width: 23em; } @media (max-width: 1023px) { .as-table--list tbody th { min-width: 0; } } @media (max-width: 559px) { .as-row__name.has-shot { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } } .as-dir__head.has-shot { isolation: isolate; background: transparent; box-shadow: none; } .as-dir__head.has-shot::before, .as-dir__head.has-shot::after { content: ""; position: absolute; inset: 0 calc(50% - 50vw); pointer-events: none; } .as-dir__head.has-shot::before { z-index: -2; background: var(--shot) center top / cover no-repeat; filter: blur(3px); transform: scale(1.04); } .as-dir__head.has-shot::after { z-index: -1; background: linear-gradient(90deg, rgba(20, 19, 18, .88) 0%, rgba(20, 19, 18, .76) 55%, rgba(20, 19, 18, .62) 100%); } .as-dir__head.has-shot .as-dir__intro { --ink: #FFFFFF; --muted: rgba(255, 255, 255, .78); color: #FFFFFF; } .as-dir__head.has-shot .as-dir__intro a:not(.as-chip) { color: #FFFFFF; } .as-dir__head.has-shot .as-chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .32); color: #FFFFFF; } .as-dir__head.has-shot .as-chip:hover { background: rgba(255, 255, 255, .22); } .as-dir__head.has-shot .as-notice { --ink: #1F1E1D; --muted: #5E5B55; } .as-dir__head.has-shot .as-offer { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .25); } /* ===== 0.27.0 サイト名の印を、四角からキービジュアルと同じ「くるっと輪を描く線」に（2026-10-25 編集部のご要望） ===== * 線の形は SVG をマスクにして、色は --brand-line（暗い表示でもそのまま） */ .as-brand__name::before { width: 1.2em; height: .75em; margin-right: .24em; vertical-align: -.04em; background: var(--brand-line); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M3 19C11 21 17 19 20 13S22 3 17 4 13 14 21 16 32 12 36 6' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='6' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M3 19C11 21 17 19 20 13S22 3 17 4 13 14 21 16 32 12 36 6' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'/%3E%3Ccircle cx='36' cy='6' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat; } /* ===== 0.27.1 日付を等幅（IBM Plex Mono）から本文のゴシックに（2026-10-25 編集部のご指摘「数字のフォントが AI っぽい」） ===== * 字間の空けもやめる。数字の幅だけはそろえる（並んだときに桁がぶれない） */ .as-card__meta time, .as-list time, .as-results__list time, .as-related__list time, .artiql-site .as-ibar__p { font-family: var(--f-body); letter-spacing: 0; font-variant-numeric: tabular-nums; } .as-card__meta time, .as-list time, .as-results__list time, .as-related__list time { font-size: 0.8125rem; } /* ===== 0.28.0 等幅（IBM Plex Mono）をやめる（2026-10-25 編集部のご指摘「AI っぽい」） ===== * 英語の小見出し・番号（01・02）・札は見出しと同じ Manrope に。番号は字間を空けず、桁の幅だけそろえる */ .artiql-site { --f-mono: var(--f-display); } .as-axis__n, .as-part__n, .as-toc__n, .as-features li::before { letter-spacing: 0; font-variant-numeric: tabular-nums; font-weight: 600; } .artiql-site .as-topkv__label { font-family: var(--f-display); font-weight: 600; letter-spacing: .06em; } /* ===== 0.28.0 トップの節の見出し（2026-10-25 編集部のご要望「キービジュアルのように曲線を使ってもっとおしゃれに」） ===== * 太い墨の線と柿色の短い棒をやめ、題名の下にロゴ・キービジュアルと同じ「くるっと輪を描く線」を短く引く。 * 線は SVG をマスクにして色は --brand-line（暗い表示でもそのまま）。一覧へのリンクは右に */ .as-fsec__head { border-bottom: 0; padding-bottom: 0; align-items: flex-end; margin-bottom: clamp(24px, 3vw, 36px); } .as-fsec__head::after { content: none; } .as-fsec__head h2 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; } .as-fsec__head h2::after { content: ""; display: block; width: 180px; height: 24px; margin-top: 12px; /* 0.28.1 輪のあとの尾を伸ばした（編集部のご要望） */ background: var(--brand-line); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 20'%3E%3Cpath d='M2 15C14 17 23 15 28 9S31 2 27 3 24 11 32 13 52 12 72 9 112 4 142 5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 20'%3E%3Cpath d='M2 15C14 17 23 15 28 9S31 2 27 3 24 11 32 13 52 12 72 9 112 4 142 5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat; } .artiql-site .as-fsec__lead { margin-top: 10px; font-size: 0.9375rem; } .as-fsec__more { border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); } .as-fsec__more:hover { text-decoration-color: currentColor; } /* ===== 0.28.2 サイト名の右に小さな2行（Springl のロゴと同じ組み方。2026-10-25 編集部のご要望） ===== * 縦の細い線で区切り、英語2行を Manrope で。狭い画面ではサイト名と道具のボタンが並びきらないので出さない */ .as-brand { display: flex; align-items: center; gap: 14px; } .as-brand__tag { display: grid; gap: 1px; padding-left: 14px; border-left: 1px solid var(--line-strong); font-family: var(--f-display); font-weight: 600; font-size: 0.6875rem; line-height: 1.35; letter-spacing: .02em; color: var(--muted); white-space: nowrap; } .as-brand__tag > span:last-child { font-weight: 600; opacity: .8; } @media (max-width: 640px) { .as-brand__tag { display: none; } }