で包む。
幅 100% で収まる限り横スクロールは出ないので、現行の「セルが詰まる」挙動は変わらない。
収まりきらない表だけ、はみ出す代わりに枠内でスクロールする。 */
.table-wrap { margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap > table { margin-top: 0; }
/* --- 引用・画像・区切り ------------------------------------------------- */
/* 引用は現行テーマの規則そのまま（地色も罫も無い）。現行の本文に「地の文としての
引用」は 2 件しか無く、いずれも装飾のない見た目なので、勝手に足さない。 */
.entry-content blockquote,
.article-body blockquote {
position: relative;
padding: 24px 32px;
font-size: var(--fs-s1);
line-height: 1.8;
}
.entry-content blockquote > :first-child,
.article-body blockquote > :first-child { margin-top: 0; }
.entry-content blockquote > *,
.article-body blockquote > * { margin-top: 16px; }
.entry-content blockquote cite,
.article-body blockquote cite { display: block; margin-top: 16px; font-size: var(--fs-s2); color: var(--c-text-muted); }
/* display:block にしない。旧サイトは本文の画像を一貫して inline のままにしている
* （figure の中でも の中でも実測 inline）。block にすると
* - figure.wp-block-image の text-align:center が効かなくなり、中央寄せの画像が
* 左に寄る（/team/ で 60px ずれていた）
* - 行のベースラインから外れるため、旧サイトにある画像下の隙間が消える
* 幅の上限と高さの自動調整だけ与える。 */
.entry-content img,
.article-body img { max-width: 100%; height: auto; }
/* figure の line-height を 0 にしない。実測（旧サイト）は 25.6px＝本文と同じで、
* 画像の下に隙間は出ていない（vendor CSS が figure の中の img を block にしているため）。
* 0 にすると説明文の行の高さが変わり、画像 4 枚の頁で 32px ずれていた。 */
.entry-content figcaption,
.article-body figcaption {
/* 実測: font-size 11.6364px / line-height 18.6182px / margin-top 4px。
* 14.2222px にしていたため説明文が 1 行あたり 4px 高く、右にもはみ出していた。 */
margin-top: 4px;
font-size: var(--fs-s3);
line-height: 1.6;
color: var(--c-text-muted);
text-align: center;
}
.entry-content .aligncenter, .article-body .aligncenter { margin-inline: auto; }
.entry-content .alignright, .article-body .alignright { margin-left: auto; }
.entry-content hr, .article-body hr { height: 1px; background-color: var(--c-border-card); border: 0; }
.entry-content pre, .article-body pre {
padding: 16px;
overflow-x: auto;
font-size: var(--fs-s1);
line-height: 1.6;
background-color: var(--c-bg-divider);
border-radius: 3px;
}
.entry-content code, .article-body code { font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace; font-size: .9em; }
.entry-content pre code, .article-body pre code { font-size: inherit; }
/* =========================================================================
* 7. markdown.mjs が出すクラス
* 現行の Emanon ブロックを実測した値に合わせる。
* =======================================================================*/
/* --- ボタン（101記事で使用。現行の block-btn を実測） --------------------
* 実測: 16px / 行送り 1.4 (22.4px) / 字間 0.04em / 角丸 25px / 上下 6px。
* 左右の padding は PC 48px、SP は 0（現行がそうなっている）。
* 行そのものは上下 40px（本文の律動と同じ）で中央寄せ。
* ---------------------------------------------------------------------- */
.btn-row { margin-block: 40px; text-align: center; }
.btn-row:first-child { margin-top: 0; }
a.btn {
position: relative;
display: inline-block;
padding: 6px 0;
font-size: var(--fs-m);
line-height: 1.4;
letter-spacing: 0.04em;
color: var(--c-text-invert);
text-align: center;
background-color: var(--c-button);
border: 1px solid transparent;
border-radius: 25px;
transition: opacity .3s ease;
}
@media screen and (min-width: 600px) { a.btn { padding-inline: 48px; } }
a.btn:hover { color: var(--c-text-invert); opacity: .85; }
/* --- 吹き出し（4記事） --------------------------------------------------
* 現行の epb-balloon を実測: 顔 70px（PC 80px）/ 本文との間 24px /
* 吹き出しは padding 12px 16px（PC 16px 24px）/ 行送り 1.5 / 名前 13px。
* side="right" で顔と吹き出しの左右が入れ替わり、三角の向きも変わる。
* ---------------------------------------------------------------------- */
.balloon { display: flex; align-items: flex-start; justify-content: flex-start; }
.balloon--right { flex-direction: row-reverse; }
.balloon__avatar { flex: 0 0 auto; width: 70px; height: 70px; margin-right: 24px; }
.balloon--right .balloon__avatar { margin-right: 0; margin-left: 24px; }
.balloon__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 50%; }
@media screen and (min-width: 600px) {
.balloon__avatar { width: 80px; height: 80px; }
}
.balloon__body {
position: relative;
max-width: 580px;
padding: 12px 16px;
line-height: 1.5;
background-color: #fff;
border: 1px solid var(--c-border-card);
border-radius: 8px;
}
@media screen and (min-width: 600px) { .balloon__body { padding: 16px 24px; } }
.balloon__body p { line-height: 1.5; } /* 吹き出しの中だけ本文の 1.9 を使わない */
.balloon__body > *:not(:first-child) { margin-top: 8px; }
.balloon__name { display: block; margin-bottom: 6px; font-size: 13px; line-height: 1.4; letter-spacing: .02em; }
/* 三角。左右で向きが変わる（現行と同じ 8px×10px、上から 16px） */
.balloon__body::before,
.balloon__body::after { content: ""; position: absolute; top: 16px; width: 0; height: 0; border-style: solid; }
.balloon--left .balloon__body::before { left: -10px; border-width: 8px 10px 8px 0; border-color: transparent var(--c-border-card) transparent transparent; }
.balloon--left .balloon__body::after { left: -9px; border-width: 8px 10px 8px 0; border-color: transparent #fff transparent transparent; }
.balloon--right .balloon__body::before { right: -10px; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent var(--c-border-card); }
.balloon--right .balloon__body::after { right: -9px; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent #fff; }
/* --- 注記ボックス（5頁。現行の pr-box 相当の白いパネル） ---------------- */
.notice {
padding: 16px;
background-color: var(--c-bg-card);
border: 1px solid var(--c-border-card);
border-radius: 3px;
}
@media screen and (min-width: 768px) { .notice { padding: 24px; } }
.notice > *:not(:first-child) { margin-top: 16px; }
.notice img { margin-inline: auto; }
.notice h3 { text-align: center; }
/* --- 埋め込み（YouTube は 16:9 のまま可変） ----------------------------- */
/* 旧サイトは埋め込みを
に入れており、その
の margin-top:40px が
* 前の要素との間隔を作っていた（実測 /about/message/）。margin:0 にしていたため
* 動画が 40px せり上がっていた。器の名前は変えずに間隔だけ合わせる。 */
.embed { margin: 40px 0 0; }
.embed--youtube:not(.is-sized) { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #000; }
.embed--youtube:not(.is-sized) iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 旧サイトが width/height 属性を持つ埋め込みは、16:9 の器に入れずそのまま出す。
実測: /about/message/ の動画は 1118x629 の属性を持ち、幅は画面に合わせて縮むが
高さは 629px のまま残る。器に入れて 16:9 にすると、モバイルで 178px になり
頁が 456px 縮む。間延びした見た目も含めて今の見た目。 */
.embed--youtube.is-sized { background-color: transparent; }
/* width/height は属性の値をそのまま使う（CSS で上書きしない）。
max-width だけ掛けると、実測どおり幅は 317px に縮み高さは 629px のまま残る。
height:auto を足すと縦横比で 178px に潰れてしまい、旧サイトと変わる。 */
.embed--youtube.is-sized iframe { max-width: 100%; border: 0; }
/* =========================================================================
* 8. 一覧（アーカイブ／トップ）
* 実測: カードは白地・角丸 3px・影あり・**枠線なし**、下 32px。
* padding は PC 16px、SP は 0（内側の .archive-header が持つ）。
* 単体記事の とは別物なので混ぜない。
* =======================================================================*/
.archive-title { margin-bottom: 16px; }
@media screen and (max-width: 767px) { .archive-title { margin: 8px 8px 16px; } }
.archive-title h1 {
font-size: var(--fs-l1);
font-weight: 700;
line-height: 1.6; /* = 29.2571px */
color: var(--c-text);
}
.wrapper-archive-list { display: flex; flex-wrap: wrap; }
.archive-list {
position: relative;
width: 100%;
margin-bottom: 32px;
background-color: var(--c-bg-card);
border-radius: 3px;
box-shadow: var(--shadow-card);
}
@media screen and (min-width: 768px) { .archive-list { padding: 16px; } }
.archive-list__link { display: block; color: var(--c-text); }
.archive-list__link:hover { color: var(--c-text); }
@media screen and (min-width: 768px) { .archive-list__link { display: flex; } }
.post-thumbnail { position: relative; line-height: 0; }
.post-thumbnail img { width: 100%; height: auto; }
@media screen and (min-width: 768px) { .post-thumbnail { flex: 0 0 300px; width: 300px; } }
/* サムネ左上のカテゴリ帯: 12.8px / 行送り 1.6 / 地 #161410 / 白文字。
幅は「80px を下限に、文字が入るだけ伸びる」。実測した 80px を width に固定していたため、
「プレスリリース」（7文字 = 89.6px）が入りきらず 2 行に折り返していた。
短いラベルで測った値を固定値だと思い込んだ例。旧テーマの指定に合わせる。 */
.cat-name {
position: absolute;
top: 0;
left: 0;
display: block;
min-width: 80px;
max-width: fit-content;
padding: 2px 4px;
font-size: var(--fs-s2);
line-height: 1.6;
color: #fff;
text-align: center;
background-color: var(--c-submenu-bg);
}
.archive-header { padding: 16px 16px 56px; }
@media screen and (min-width: 768px) { .archive-header { flex: 1 1 auto; padding: 0 0 0 16px; } }
.archive-header-title {
margin-bottom: 16px;
font-size: var(--fs-l1);
font-weight: 700;
line-height: 1.4; /* = 25.6px */
color: var(--c-text);
}
.article-excerpt { font-size: var(--fs-s1); line-height: 1.6; color: var(--c-text); }
.archive-list .post-meta { margin-top: 16px; }
@media screen and (max-width: 767px) {
.archive-list .post-meta { position: absolute; bottom: 16px; }
}
/* ページ送り: 32px の丸 / 枠 1px #e5e7e8 / 文字 11.6364px #484848 */
.pagination { margin-bottom: 32px; text-align: center; }
.page-numbers {
display: inline-flex;
justify-content: center;
width: 32px;
height: 32px;
margin-right: 8px;
font-size: var(--fs-s3);
line-height: 32px;
color: var(--c-text-muted);
background-color: var(--c-bg-card);
border: 1px solid var(--c-border-card);
border-radius: 50%;
}
/* 現在頁だけ地色が #b50000、罫は #eeeff0（実測）。「次へ」は罫も地色も無い */
.page-numbers.current { color: var(--c-text-invert); background-color: var(--c-accent-rule); border-color: #eeeff0; }
.page-numbers.next, .page-numbers.prev { background-color: transparent; border: 0; }
/* =========================================================================
* 9. サイドバー
* 実測: ウィジェットは 14.2222px / 行送り 1.6 / 下 24px、見出しは 18.2857px・
* 行送り 1.25・字間 0.04em、リンクは本文色（赤ではない）。
* =======================================================================*/
.widget {
margin-bottom: 24px;
font-size: var(--fs-s1);
line-height: 1.6;
color: var(--c-text);
}
.sidebar-widget__title { margin-bottom: 16px; text-align: left; }
.sidebar-widget__title h3 {
font-size: var(--fs-l1);
font-weight: 700;
line-height: 1.25; /* = 22.8571px */
letter-spacing: 0.04em;
color: var(--c-text);
}
.widget ul { list-style: none; }
.widget ul li { position: relative; }
.widget a { color: var(--c-text); }
.widget a:hover { color: var(--c-link-hover); }
.search-form { display: flex; }
.search-form .search-field {
flex: 1 1 auto;
min-width: 0;
padding: 6px 12px;
font-size: var(--fs-m);
color: var(--c-text);
background-color: #fff;
border: 1px solid var(--c-border-card);
border-radius: 3px 0 0 3px;
}
.search-form .search-submit {
padding: 1px 6px;
color: #000;
background-color: #fff;
border: 1px solid var(--c-border-card);
}
/* =========================================================================
* 10. フッタ
* 実測（1280px）: 全高 227px = SNS帯 49.59 + 内側 177.47
* 内側 = 上 16 + PageTop(16+37.25+16) + ナビ 34.63 + 著作権 41.6 + 下 16
* 実測（375px）: PageTop は非表示。固定メニューぶんの下余白が付く。
* =======================================================================*/
.l-footer { background-color: var(--c-footer-bg); color: var(--c-footer-text); }
.l-footer a { color: var(--c-footer-text); }
.l-footer a:hover { color: var(--c-text-invert); }
.footer-top { background-color: var(--c-footer-top-bg); }
/* SNS: 中央寄せ・間隔 SP 24px / PC 32px・上下 12px。text-align は start のまま。 */
.sns-follow {
display: flex;
justify-content: center;
column-gap: 24px;
padding: 12px 0;
}
@media screen and (min-width: 768px) { .sns-follow { column-gap: 32px; } }
/* 実測（旧サイト）: display:inline / gap 無し / align-items normal。
* inline-flex + gap:4px にしていたため 1 個あたり幅 +4px・高さ +2.63px ずれていた。
* アイコンと文字の間隔は icomoon 側の字送りが作る。 */
.sns-follow__item a {
display: inline;
font-size: var(--fs-s3);
line-height: 1.6;
color: var(--c-footer-text);
}
/* i[class^="icon-"] には触らない。icomoon が字形ごとの幅を持っている。
* （旧サイト実測: .sns-follow__item .icon-x は display:inline w=11.38px。
* 1em＝11.64px で固定すると 0.26px ずつずれ、5 個並ぶと折り返しが変わる） */
.sns-follow__item svg { width: 1em; height: 1em; fill: currentColor; }
.sns-follow__item .u-display-inline-flex-pc { display: none; }
@media screen and (min-width: 960px) { .sns-follow__item .u-display-inline-flex-pc { display: inline-flex; } }
.l-footer__inner { position: relative; padding: 16px 0; }
.pagetop {
display: none;
margin: 16px 0;
font-size: var(--fs-s3);
line-height: 1.6;
text-align: center;
}
@media screen and (min-width: 600px) { .pagetop { display: block; } }
/* align-items は指定しない。旧サイト実測は normal（＝stretch）で、
* そのおかげでアイコンの箱が親いっぱい（1180px）に伸び、中身は
* .pagetop の text-align:center で中央に来る。center を入れると
* 箱が字形幅（11.64px）に縮み、旧サイトと DOM 上の寸法が食い違う。 */
.pagetop a { display: flex; flex-direction: column; color: var(--c-footer-text); }
/* 縦積みなのでアイコンは 1 行ぶんを占める。旧サイト実測は
display:block / w=1180（親いっぱい）/ h=18.6182px、a の高さは 37.25px。
高さは icomoon の行送りが作るので、display だけ block に戻せばよい。
height:1.6em を与えていた頃は 1em 基準で 18.62px にならず、
a の高さが 37.25px からずれていた。 */
.pagetop a [class^="icon-"] { display: block; }
/* フッタナビ: ul 自身は font-size:0 / line-height:0（項目間の空白を殺すため）。
実測どおり padding は上 16px・左 16px。項目側で文字サイズを戻す。 */
.footer-nav {
padding: 16px 0 0 16px;
font-size: 0;
line-height: 0;
text-align: center;
list-style: none;
}
.footer-nav li {
position: relative;
display: inline;
padding-inline: 16px;
font-size: var(--fs-s3);
line-height: 1.6;
text-align: center;
}
.footer-nav a { color: var(--c-footer-text); }
.copyright {
padding-top: 16px;
letter-spacing: 0.04em; /* = 0.64px */
text-align: center;
}
.copyright small { font-size: var(--fs-s3); }
/* SP だけ画面下に固定されるメニュー。
footer 側の下余白は has-fixed-footer-menu が付いているときだけ足す
（メニューを出さない構成なら余白も出ない）。 */
.fixed-footer-menu {
position: fixed;
inset: auto 0 0;
z-index: 500;
display: none;
background-color: #fff;
}
@media screen and (max-width: 599px) {
.fixed-footer-menu { display: block; }
.l-footer.has-fixed-footer-menu { padding-bottom: 50px; }
}
.fixed-footer-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 8px 0;
list-style: none;
}
.fixed-footer-nav a { font-size: var(--fs-s3); line-height: 1.6; color: var(--c-text); }
/* =========================================================================
* 11. アイコン — 自前定義は置かない
*
* 以前ここに [class^="icon-"] への一律指定（display:inline-block / width:1em /
* height:1em）と 6 個の SVG マスクを置いていた。前提は「icomoon は凍結できず
* 再取得できない」だったが、これは誤り。icomoon.ttf は凍結済みで、
* 旧サイトと byte 単位で同一のものを配信できている。
*
* そして vendor/bundle.css は icon-x / icon-facebook / icon-instagram /
* icon-youtube-square / icon-chevron-* / icon-home / icon-clock / icon-search の
* すべてに ::before を定義している。自前定義は重複していただけでなく、
* 一律の width:1em が字形ごとに異なる本来の幅を潰していた。
* 実測: 共有ボタンの .icon-x は旧 17.91px / 新 14.22px（= 1em ちょうど）。
* 該当は約 4,600 か所。旧サイトはどれも display:inline で幅は字形が決める。
*
* アイコンは vendor の icomoon に任せる。ここには何も書かない。
* （icon-japan だけ vendor に定義が無く、旧サイトでも何も描かれない）
* =======================================================================*/
/* =========================================================================
* 12. 表示切替ユーティリティ（現行と同じ切替点: 600px / 960px）
* ナビが畳まれるのは 960px 未満。凍結 CSS に 1080px は一件も無い。
* =======================================================================*/
.u-display-none { display: none; }
.u-display-sp { display: block; }
.u-display-inline-flex-sp-tablet { display: inline-flex; }
.u-display-sp-tablet { display: block; }
.u-display-tablet-pc,
.u-display-pc { display: none; }
.u-display-flex-pc { display: none; }
@media screen and (min-width: 600px) {
.u-display-sp { display: none; }
.u-display-tablet-pc { display: block; }
}
@media screen and (min-width: 960px) {
.u-display-sp-tablet,
.u-display-inline-flex-sp-tablet { display: none; }
.u-display-pc { display: block; }
.u-display-flex-pc { display: flex; }
}
/* スクリーンリーダー専用テキスト */
.screen-reader-text {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* =========================================================================
* 13. 動きの抑制
* 現行は wow.js のフェードインがあるが、動きを望まない利用者には出さない。
* =======================================================================*/
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ------------------------------------------------------------------
* 事業ページの見出しルビ（.tp-ruby）
*
* 社長の指示（会議録音 2026-08-21）。要点は 3 つで、全部この形に入っている。
* 「これ一語になっちゃってるから いけない」 → 見出しの中で語を割る
* 「テレ＝遠く、それとプレゼンス＝存在、って書いて
* くれれば。その後に遠くに存在まで書かなくても」 → 説明文は書かない。ルビだけ
* 「テレっていうのだけ同じ大きさにしておいて。
* 文字はもっと小さかったって構わないだろ」 → 本体は h2 のまま、添え字だけ小さく
*
* 案は 4 つ作って検証ドメインで並べ（_option/）、ルビ案が選ばれた（2026-08-24）。
* ルビにした理由: 添え字が読みの動線に割り込まない。
* 社長「知らなかったら無視でテレプレゼンスは分かるだろ」——無視できる形はこれだけ。
*
* 「遠くに存在する」という答えは書かない（社長「隠しておくだけで考えるじゃん」）。
* 答え合わせは本文の最終段落「そこになくても、あたかもそこに存在する」が既にやっている。
* ------------------------------------------------------------------ */
.tp-ruby ruby { ruby-position: over; ruby-align: center; }
/* 語の切れ目を本文側にも見せる。ルビの位置だけが頼りだと、
* 「テレ」と「プレゼンス」の境目が読み手に分からない
* （社長の出発点が「一語になっちゃってるから いけない」なので、ここは要点）。 */
.tp-ruby ruby + ruby { margin-left: .22em; }
.tp-ruby rt {
font-size: .4em; /* 本体はそのまま、添え字だけ小さく */
font-weight: 400;
color: var(--c-accent, #b50000);
letter-spacing: 0;
text-align: center;
}
/* ルビの分だけ行が高くなり、左の赤罫との重心がずれるのを防ぐ */
.article-body h2.tp-ruby,
.entry-content h2.tp-ruby { line-height: 1.9; }
/* ===== measured.css ===== */
/* 実測値から生成した CSS — 手で編集しないこと
*
* 生成元: _baseline/pages/*.json（WordPress 稼働中に 269 頁を計測したもの）
* 生成コマンド: node tools/gen-measured-css.mjs
*
* 現行サイトと 1:1 であることが要件のため、この層が最後に効く。
* 見た目を変えたい場合はここではなく src/styles/base.css を直し、
* 変更が意図どおりか tools/design-diff.mjs で確認すること。
*
* 除外: /feed/（XML）, /temi-personal-robot/（Tailwind 同梱の独立HTML・手で再構築）
*/
body {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(48, 48, 48);
background-color: rgb(248, 248, 248);
display: block;
}
header.l-header {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(48, 48, 48);
background-color: rgba(0, 0, 0, 0);
display: block;
}
.l-header__inner {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(48, 48, 48);
background-color: rgba(0, 0, 0, 0);
display: flex;
}
.site-logo__img {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(163, 0, 0);
background-color: rgba(0, 0, 0, 0);
display: inline;
}
.header-menu {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(48, 48, 48);
background-color: rgba(0, 0, 0, 0);
display: flex;
}
.top-bar .site-description {
font-size: 11.6364px;
font-weight: 400;
line-height: 1.999991;
letter-spacing: 0.465455px;
color: rgb(53, 53, 53);
background-color: rgba(0, 0, 0, 0);
display: block;
}
.l-contents {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(48, 48, 48);
background-color: rgba(0, 0, 0, 0);
margin-top: 40px; /* 204頁 */
margin-bottom: 64px;
display: block;
}
article {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(48, 48, 48);
background-color: rgb(255, 255, 255);
padding-top: 24px; /* 197頁 */
border-left: 1px solid rgb(229, 231, 232); /* 197頁 */
border-bottom: 1px solid rgb(229, 231, 232); /* 197頁 */
display: block;
}
footer.l-footer {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(181, 181, 181);
background-color: rgb(35, 35, 35);
display: block;
}
.footer-nav {
font-size: 0px;
font-weight: 400;
line-height: 0px;
letter-spacing: normal;
color: rgb(181, 181, 181);
background-color: rgba(0, 0, 0, 0);
padding-top: 16px;
padding-left: 16px;
text-align: center;
display: block;
}
.copyright {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.64px;
color: rgb(181, 181, 181);
background-color: rgba(0, 0, 0, 0);
padding-top: 16px;
text-align: center;
display: block;
}
.sns-follow {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
letter-spacing: normal;
color: rgb(181, 181, 181);
background-color: rgba(0, 0, 0, 0);
padding-top: 12px;
display: flex;
}
.breadcrumb {
font-size: 16px; /* 202頁 */
font-weight: 400; /* 202頁 */
line-height: 1.6; /* 202頁 */
letter-spacing: normal; /* 202頁 */
color: rgb(72, 72, 72); /* 202頁 */
background-color: rgba(0, 0, 0, 0); /* 202頁 */
margin-top: 10px; /* 202頁 */
margin-bottom: 10px; /* 202頁 */
display: block; /* 202頁 */
}
main.l-content__main {
font-size: 16px; /* 204頁 */
font-weight: 400; /* 204頁 */
line-height: 1.6; /* 204頁 */
letter-spacing: normal; /* 204頁 */
color: rgb(48, 48, 48); /* 204頁 */
background-color: rgba(0, 0, 0, 0); /* 204頁 */
display: block; /* 204頁 */
}
.entry-title {
font-size: 21.3333px; /* 167頁 */
font-weight: 700; /* 167頁 */
line-height: 1.400004; /* 167頁 */
letter-spacing: 0.853333px; /* 167頁 */
color: rgb(48, 48, 48); /* 167頁 */
background-color: rgba(0, 0, 0, 0); /* 167頁 */
display: block; /* 167頁 */
}
.sidebar {
font-size: 16px; /* 202頁 */
font-weight: 400; /* 202頁 */
line-height: 1.6; /* 202頁 */
letter-spacing: normal; /* 202頁 */
color: rgb(48, 48, 48); /* 202頁 */
background-color: rgba(0, 0, 0, 0); /* 202頁 */
display: block; /* 202頁 */
}
/* ---- モバイル（375px 実測）: デスクトップと異なる値のみ ---- */
@media (max-width: 767px) {
.l-contents {
margin-top: 16px;
margin-bottom: 40px;
}
.entry-title {
font-size: 18.2857px;
line-height: 1.400001;
letter-spacing: 0.731429px;
}
.sidebar {
margin-top: 32px;
}
}
/* ===== layout.css ===== */
/* レイアウト — 実測から逆算した幾何。CSS の最後に読み込む（幾何の最終権限）
*
* 出所:
* docs/ai-cto/computed-target.json … 269頁の多数決
* _baseline/extra.json … 追加計測（ナビ・ロゴ・記事内側）
* tools/probe.mjs … 祖先チェーンの実測
*
* 三度間違えたので記録しておく。いずれも「見た目を合わせる」ではなく
* 「計算値を合わせる」という要件を軽く見たことが原因:
* 1) padding-inline で余白を作った → 旧サイトは padding=0。実現手段まで一致が要る。
* 2) .l-content__fluid とその子の両方に幅制限を掛けて二重に縮んだ。
* 3) .l-contents を flex にした → 旧サイトは **block**。
* 版面(1180px)は .l-contents ではなく内側の .l-content が作り、
* 本文とサイドバーは .u-row.is-right_sidebar という別の flex 箱で並んでいる。
*
* 旧サイトの実構造（probe.mjs で確認）:
* body w=1280
* #wrapper.l-container w=1280 flex
* #contents.l-contents w=1280 block
* .l-content w=1180 margin 0 50px ← 版面はここ
* .breadcrumb w=1180
* .u-row.is-right_sidebar flex
* main.l-content__main w=768 margin-right 80px
* aside.sidebar w=332 max-width 332px
*/
/* ---- 通栏 ---- */
body,
.l-container,
header.l-header,
.l-header-row,
.top-bar,
.l-contents,
footer.l-footer,
.l-footer__inner,
.footer-top {
width: 100%;
max-width: none; /* site.css の max-width:1180px を打ち消す */
margin-inline: 0;
padding-inline: 0;
box-sizing: border-box;
}
.l-contents { display: block; } /* 実測: block。flex ではない */
/* ---- 左右 16px の帯（ヘッダ内） ---- */
.l-content__fluid {
width: calc(100% - 32px);
max-width: none;
margin-inline: auto;
padding-inline: 0;
box-sizing: border-box;
}
.l-header__inner,
.top-bar .site-description {
width: 100%;
max-width: none; /* site.css の max-width:1180px を打ち消す */
margin-inline: 0;
padding-inline: 0;
box-sizing: border-box;
}
.l-header__inner { display: flex; align-items: center; }
/* ---- ロゴ（実測 233px。デスクトップもモバイルも縮まない） ----
* flex-basis に 233.328px を入れてはいけない。
* この 3 つはどれも flex-direction:column の flex コンテナ／アイテムなので、
* basis は「幅」ではなく「高さ」として効く。ロゴの箱が 233×233 の正方形になり、
* 親（高さ60px）の中で上下中央に置かれた結果 y=-50 へ飛んで、
* 左上のロゴが画面から消えていた。
* 幅は width で決め、縮まないようにするのは flex-shrink:0 の役目。
* 高さは中身（35px の画像）に決めさせる。実測の旧サイトも basis は auto。
* ※ 同じ誤りを main.l-content__main でもやっている（そちらは修正済み）。 */
.header-site-branding,
.site-logo,
.site-logo > a { width: 233.328px; flex: 0 0 auto; }
img.site-logo__img { width: 233.328px; max-width: none; height: auto; }
/* ---- グローバルナビ ---- */
#gnav, .header-menu-row { flex: 1 1 auto; min-width: 0; }
.header-menu-row > .u-row,
.menu-2024-header-container { display: flex; justify-content: flex-end; }
.header-menu { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.header-menu > li { margin: 0; padding: 0; position: relative; }
.header-menu > li > a {
display: block;
padding: 0 18px; /* 実測: 項目間の余白は gap ではなく a の padding */
font-size: 14.2222px;
letter-spacing: 0.568889px;
}
/* ---- 版面 1180px は .l-content が作る（margin。max-width ではない） ----
* 1280px → calc(100%-32px)=1248 を 1180 で頭打ち、中央寄せ → x=50 w=1180（実測一致）
* 375px → 343、頭打ちなし、中央寄せ → x=16 w=343（実測一致） */
.l-content {
width: calc(100% - 32px);
max-width: 1180px;
margin-inline: auto;
padding-inline: 0;
box-sizing: border-box;
}
/* .l-content の中身は 100% で通す（二重に縮めない） */
.breadcrumb,
.u-row.is-right_sidebar,
.copyright,
.sns-follow,
.pagetop {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
box-sizing: border-box;
}
/* フッタナビだけは実測で padding-left:16px を持つ */
.footer-nav {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 16px;
box-sizing: border-box;
}
/* ---- 本文とサイドバー ---- */
.u-row.is-right_sidebar { display: flex; align-items: flex-start; }
main.l-content__main {
width: 768px;
flex: 0 0 768px;
margin-right: 80px;
min-width: 0;
}
.sidebar {
width: 332px;
max-width: 332px;
flex: 0 0 332px;
min-width: 0;
}
.sidebar > *, .widget { width: 100%; box-sizing: border-box; }
/* サイドバーを持たない頁は本文が版面いっぱい。
実測: 旧サイトの .u-row.is-no_sidebar は flex-direction: column で、
その中の main は flex:0 1 auto / width 1180px。
ここに 768px の flex-basis が残っていると、column の中では basis が
「高さ」として効いて main が 768px 分の高さを持ってしまう（/no/ が +542px）。 */
.u-row.is-no_sidebar main.l-content__main,
.u-row.is-full main.l-content__main,
.l-contents.is-full main.l-content__main {
width: 100%;
flex: 1 1 auto;
margin-right: 0;
}
article, .article { width: 100%; box-sizing: border-box; }
/* ---- 記事の内側 ----
* 実測の内訳（デスクトップ）:
* article x=50 w=768 border 1px（左右で 2px）→ 内容幅 766
* .article-header x=51 w=766 padding 24px
* h1.entry-title x=75 w=718 ＝ 50 + 1 + 24
* つまり内縮は「枠 1px ＋ ラッパの padding 24px」で出来ている。
* .entry-title 自身に幅制限を掛けると二重に縮んで x が 125 になる（一度やって落とした）。
* モバイルは 16 + 1 + 12 = 29 なので padding 12px。 */
.article-header,
.entry-content,
.entry-meta,
.share-btn {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 24px;
box-sizing: border-box;
}
.entry-title {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: 0;
box-sizing: border-box;
}
/* ---- タブレット以下: ナビを畳む ----
* 実測では旧サイトのモバイルでも .header-menu は display:flex のままボックスが 0。
* 隠れているのは親の #gnav。.header-menu に display:none を掛けると計算値が食い違う。 */
@media (max-width: 1080px) {
#gnav { display: none; }
.hamburger-menu { display: inline-flex; }
.u-row.is-right_sidebar { display: block; }
main.l-content__main,
.u-row.is-full main.l-content__main {
width: 100%;
flex: 1 1 auto;
margin-right: 0;
}
.sidebar {
width: 100%;
max-width: none;
flex: 1 1 auto;
margin-top: 32px; /* 実測（モバイル） */
}
}
/* ---- モバイル（実測: 記事内側は 343 に対し 317 → 片側 13px） ---- */
@media (max-width: 767px) {
.article-header,
.entry-content,
.entry-meta,
.share-btn {
padding-inline: 12px; /* 実測: 16 + 1(枠) + 12 = 29 = entry-title の x */
}
}
/* ロゴの実寸を固定する。
* img は inline かつ height:auto のため、親の高さ次第で幅が決まってしまい 103px に縮んでいた。
* 実測（.site-logo a）は w=233 h=35 なので両方を明示する。 */
img.site-logo__img {
width: 233.328px !important;
height: 35px !important;
max-width: none;
object-fit: contain;
}
/* ---- トップの新着タブ ----
* 現行はテーマの JS がパネルを出し分けている。JS を持ち込まないと
* 3つのパネルが全部積まれて #contents が 1317px → 7978px に膨らむ（実測）。
* 表示制御は CSS 側で持ち、切り替えだけ数行の素の JS で行う。 */
.tab-panel { display: none; }
.tab-panel.nav-tab-active { display: block; }
.tab-area { display: flex; gap: 0; }
.nav-tab { cursor: pointer; }
/* ---- article の枠は記事カード（.article）だけ ----
* トップの新着一覧も なので、素の article 指定にすると
* 一覧のカード全部に枠が付いて実測と食い違う（旧は border なし）。 */
article { border: 0; }
article.article { border: 1px solid var(--c-border-card); }
/* ---- .l-contents の上下余白は頁種別で違う（実測） ----
* トップ : 64px / 64px（モバイル 48px / 48px）
* 下層頁 : 40px / 64px（モバイル 16px / 40px） */
.l-contents { margin-top: 40px; margin-bottom: 64px; }
.is-home .l-contents { margin-top: 64px; margin-bottom: 64px; }
@media (max-width: 767px) {
.l-contents { margin-top: 16px; margin-bottom: 40px; }
.is-home .l-contents { margin-top: 48px; margin-bottom: 48px; }
}
/* 記事カードの上下余白も .article 限定にする。
* 一覧の （.archive-list）に効くと実測と食い違う。 */
article { padding-top: 0; padding-bottom: 0; }
article.article { padding-top: 24px; padding-bottom: 24px; }
/* ---- 一覧の記事カード（.archive-list）----
* 実測: 枠なし・padding 16px・margin-bottom 32px。
* 記事本体（.article）とは別物なので、article への一括指定に巻き込まない。 */
article.archive-list {
margin-bottom: 32px;
padding: 16px;
border: 0;
}
/* 一覧カードの内側余白はデスクトップだけ。実測でモバイルは 0（余白は版面側で確保している）。 */
@media (max-width: 767px) {
article.archive-list { padding: 0; }
}
/* ------------------------------------------------------------------
* 一覧サムネイルの figure（新着記事・人気の記事）
*
* 実測（旧サイト・375px）: margin: 0 8px 14.2222px 0
* site.css の「h1..figure { margin: 0 }」というリセットが、vendor が当てている
* この下余白を消していた。figure の外寸が 60px から 74px に変わるので、
* 隣の題名も同じだけ縮み、項目 5 つで 70px、頁全体で 250px ずれる。
* モバイルの 191 頁が「新しい方が短い」と出ていた原因はこれ。
* ------------------------------------------------------------------ */
.popular-post-list__figure,
.new-post-list__figure { margin: 0 8px 14.2222px 0; }
/* ===== founder.css ===== */
/* 代表取締役社長の節（トップページへの新規追加）
*
* 既存の見た目に馴染ませるため、値はすべて実測トークン（tokens.css）を参照する。
* 新しい色・新しい書体は一切足していない。
* 見出しの左罫 4px #b50000 … 本文 h2 の既定装飾と同じ
* CTA の赤 #ad0000 … 既存ボタンと同じ
* 版面 1180px / 左右 16px … 既存の .l-content と同じ規則
* 本文 16px / 行送り 30.4px … 記事本文と同じ
*/
.hr-founder {
width: 100%;
/* 上下 72px → 40px。節そのものが 569px あり、ヘッダ(150px)と合わせると
* 1280x900 の画面に一度で収まらなかった。余白は横に回す。 */
padding-block: 40px;
background: var(--c-bg-card); /* 前後の節と地色を変えて区切る */
border-top: 1px solid var(--c-border-card);
border-bottom: 1px solid var(--c-border-card);
}
/* 写真より本文の方が背が高いので、写真は上端ではなく中央に置く。
* flex-start のままだと写真の下に 190px の空白が残り、
* 「左が空いているのに縦に長い」という見え方になっていた。 */
/* B案（3カラム）。版面は他の節の 1180px より広い 1400px を上限にする。
* 依頼「もう少し広くしてよい」に対する回答で、余っている左右の余白を使う。
* 1280px 画面 → 1248px（余白が 50px しかないのでほぼ変わらない）
* 1440px 画面 → 1400px
* 1920px 画面 → 1400px
* .l-content の max-width:1180px を上書きしている（founder.css は最後に読む）。 */
.hr-founder__inner {
display: flex;
align-items: center;
gap: 48px;
max-width: 1400px;
}
/* ---- 写真 ---- */
.hr-founder__media {
flex: 0 0 380px;
width: 380px;
}
.hr-founder__media img {
display: block;
width: 100%;
height: auto;
border-radius: 2px;
}
/* ---- 本文側 ---- */
.hr-founder__body { flex: 1 1 auto; min-width: 0; }
.hr-founder__eyebrow {
margin: 0 0 4px;
font-size: var(--fs-meta);
line-height: var(--lh-meta);
letter-spacing: var(--ls-meta);
color: var(--c-text-muted);
}
/* 見出しは本文 h2 と同じ左罫。新しい装飾を作らない。 */
.hr-founder__name {
margin: 0 0 12px;
padding: 8px 0 8px 12px;
border-left: var(--bw-h2) solid var(--c-accent-rule);
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-h2);
color: var(--c-text);
}
.hr-founder__romaji {
margin-left: 12px;
font-size: var(--fs-small);
font-weight: 400;
letter-spacing: 0.06em;
color: var(--c-text-muted);
}
.hr-founder__lead {
margin: 0 0 14px;
font-size: var(--fs-h3);
font-weight: 700;
line-height: var(--lh-h3);
color: var(--c-text);
}
/* 3 本目の柱ができたので 1 段に戻す。2 段のままだと 2 本目の柱が細くなり、
* 「世界をリードする外資系IT企業で日本法人社長」が折り返してかえって背が高くなる。 */
.hr-founder__facts {
margin: 0;
padding: 0;
list-style: none;
}
.hr-founder__facts li {
position: relative;
padding-left: 20px;
margin-bottom: 4px;
font-size: var(--fs-body);
line-height: var(--lh-prose);
color: var(--c-text);
}
/* 印は擬似要素で描く。アイコンフォントに依存させない
（フォントが落ちても箇条書きが壊れないようにするため）。 */
.hr-founder__facts li::before {
content: "";
position: absolute;
left: 2px;
top: 13px;
width: 8px;
height: 2px;
background: var(--c-accent-rule);
}
.hr-founder__note {
margin: 0 0 24px;
font-size: var(--fs-body);
line-height: var(--lh-prose);
color: var(--c-text-muted);
}
/* ---- 3 本目の柱（行動） ---- */
.hr-founder__aside {
flex: 0 0 300px;
width: 300px;
padding-left: 40px;
border-left: var(--bw-card) solid var(--c-border-card);
box-sizing: border-box;
}
/* ---- 導線 ---- */
/* 3 本目の柱は幅 260px（300 − padding 40）しかないので横並びにしない。
* ボタンを柱いっぱいに広げ、副リンクはその下に置く。 */
.hr-founder__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.hr-founder__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 24px;
box-sizing: border-box;
background: var(--c-button);
color: var(--c-text-invert);
font-size: var(--fs-body);
border-radius: 2px;
}
.hr-founder__btn:hover { text-decoration: none; opacity: 0.88; }
.hr-founder__ext { font-size: 0.85em; }
.hr-founder__sub {
font-size: var(--fs-small);
color: var(--c-link);
border-bottom: 1px solid currentColor;
}
.hr-founder__sub:hover { text-decoration: none; opacity: 0.8; }
/* 読み上げ専用テキスト（外部リンクである旨を伝える） */
.u-visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* ---- タブレット以下 ---- */
/* ---- 3 カラムをやめる境目 ----
* 3 本目の柱は 300px 固定。写真 380 + gap 48×2 + 柱 300 = 776px を引くと、
* 2 本目の柱に残るのが 424px を切るあたりから箇条書きが折り返し始める。
* その手前（1200px）で柱を下へ回し、写真＋本文の 2 カラムに戻す。 */
@media (max-width: 1199px) {
.hr-founder__inner { flex-wrap: wrap; gap: 32px 40px; }
.hr-founder__aside {
flex: 1 1 100%;
width: 100%;
padding-left: 0;
padding-top: 24px;
border-left: 0;
border-top: var(--bw-card) solid var(--c-border-card);
}
/* 横いっぱいに戻るので、締め文と導線は横並びの方が短い */
.hr-founder__aside { display: flex; align-items: center; gap: 32px; }
.hr-founder__note { margin: 0; flex: 1 1 auto; }
.hr-founder__actions { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 24px; }
.hr-founder__btn { width: auto; padding: 12px 32px; }
}
@media (max-width: 1080px) {
.hr-founder { padding-block: 40px; }
.hr-founder__media { flex-basis: 240px; width: 240px; }
}
/* ---- モバイル ---- */
@media (max-width: 767px) {
.hr-founder { padding-block: 40px; }
.hr-founder__inner { display: block; }
.hr-founder__media {
width: 180px;
margin: 0 auto 24px;
}
.hr-founder__aside {
display: block;
margin-top: 24px;
padding-top: 24px;
}
.hr-founder__note { margin: 0 0 20px; }
.hr-founder__actions { flex-direction: column; align-items: stretch; gap: 16px; }
.hr-founder__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.hr-founder__btn { transition: none; }
}
/* ------------------------------------------------------------------
* トップ右下の追従ボタン（社長への導線）
*
* 依頼による新規追加。旧サイトに同等のものは無い。
* 顔写真＋「！」で目を引かせ、押すと tomita.ai を別タブで開く。
*
* 置き場所の実測:
* モバイルは画面下端に .fixed-footer-menu（高さ 50px）が居る。
* その上に逃がさないと重なる。デスクトップには出ない。
* z-index はドロワー(998)より下、追従 SNS(201)より上に置く。
* ------------------------------------------------------------------ */
.hr-founder-fab {
position: fixed;
right: 20px;
bottom: 24px;
z-index: 300;
display: block;
width: 72px;
height: 72px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
/* 既存の見出し罫と同じ赤で縁取る。新しい色は足さない。 */
border: 3px solid #b50000;
overflow: visible;
transition: transform .2s ease, box-shadow .2s ease;
}
.hr-founder-fab:hover,
.hr-founder-fab:focus-visible {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}
.hr-founder-fab__img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
/* 顔が中央より上にあるので、上寄りで切る */
object-position: 50% 22%;
display: block;
}
/* ビックリマーク。既存ボタンの赤 #ad0000 を使う。 */
.hr-founder-fab__badge {
position: absolute;
top: -6px;
right: -6px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #ad0000;
color: #fff;
border: 2px solid #fff;
font-size: 18px;
font-weight: 700;
line-height: 24px;
text-align: center;
font-family: inherit;
animation: hr-fab-pop 1.6s ease-in-out infinite;
}
@keyframes hr-fab-pop {
0%, 70%, 100% { transform: scale(1); }
80% { transform: scale(1.22); }
90% { transform: scale(.96); }
}
/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
.hr-founder-fab__badge { animation: none; }
.hr-founder-fab { transition: none; }
}
/* 画面下端の固定メニュー（50px）に重ねない */
@media screen and (max-width: 959px) {
.hr-founder-fab {
right: 14px;
bottom: 62px;
width: 62px;
height: 62px;
}
.hr-founder-fab__badge { width: 24px; height: 24px; font-size: 15px; line-height: 20px; }
}