:root{
  --bg:#fff;
  --fg:#555;
  --line:#e6e6e6;
  --link:#0b56d0;

  --indent:24px;        /* ページ全体の左余白 */
  --contents-pad:2em;   /* CONTENTS内：全角2文字分くらい */
  --en-col:20ch;        /* 英語列の幅：日本語列の開始位置を揃える核（ここだけ調整） */
  --pair-gap:0.25em;    /* 英語-日本語の見た目間隔（ここだけ調整） */
}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-size:16px;
  line-height:1.75;
}

/* 見出し類も全部 #555 のまま */
h1,h2,h3,h4,h5,h6{ color:inherit; }

a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* header only: center */
.site-header{
  padding:18px 0 10px;
  text-align:center;
}

.site-title{
  margin:0;
  font-weight:600;
  line-height:1.2;
  font-size:34px;
}

.site-name{ display:inline; }

.brand .accent{
  color: #c0392b;
}

/* 「— 人材育成…」だけ h2 相当のサイズにする（改行しない） */
.site-subtitle{
  display:inline;
  font-size:22px;
  font-weight:600;
  margin-left:0.35em;
}

.site-tagline{
  margin-top:10px;
  font-size:19px;
  line-height:1.4;
  font-weight:600; /* サブタイトル行は太字 */
}

.rule{
  border:0;
  border-top:1px solid var(--line);
  margin:14px 0;
}

/* left blocks */
.contents-area,
.site-main{
  text-align:left;
  padding-left:var(--indent);
}

/* ●コンテンツ行は太字 */
.contents-label{
  margin:0;
  font-weight:600;
}

/* CONTENTS：親グリッドで列を揃える */
.contents-nav{
  padding-left:var(--contents-pad);
  display:grid;
  grid-template-columns: max-content max-content;
  column-gap: 2em;
  row-gap: 6px;
}

/* 各行（nav-item）は親グリッドに“中身だけ”流し込む */
.contents-nav .nav-item{
  display: contents;
}

/* 行全体を太字にしたいので、子要素側に適用 */
.contents-nav .nav-item > .ja,
.contents-nav .nav-item > .en{
  font-weight:600;
  align-items:baseline;
}

/* 英語だけリンク。折り返しを避ける */
.contents-nav .en-link{
  display:inline-block;
  white-space:nowrap;
}

/* 日本語は通常色 */
.contents-nav .ja{
  color:var(--fg);
  white-space:nowrap;
}

/* main */
.site-main{ padding-bottom:24px; }

.section{ margin:18px 0 22px; }

.section{
  margin:18px 0 22px;
  scroll-margin-top:18px; /* アンカーで飛んだときの上余白（将来の保険） */
}


.section-label{
  margin:0 0 8px;
  font-weight:600;
}

.indent-1{
  padding-left: var(--contents-pad);
}

.indent-sub{
  padding-left: calc(var(--contents-pad) * 0.5);
}

.sub-label{
  margin: 4 0 8px;
  font-weight: 700;
}

.en{
  color:inherit;
  font-size:1em;
}

/* mobile */
@media (max-width:720px){
  :root{
    --indent:14px;
    --contents-pad:1.5em;
    --en-col:18ch;   /* 画面が狭いとき少し詰める */
    --pair-gap:0.2em;
  }
  .site-title{ font-size:26px; }
  .site-subtitle{ font-size:18px; }
  .site-tagline{ font-size:16px; }
}

.profile-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.profile-avatar{
  width:180px;     /* 好きな横幅に。例: 120〜180 */
  height:auto;     /* 縦横比を維持 */
  display:block;
  flex:0 0 auto;   /* 画像が引き伸ばされたり縮んだりしない */
}

.profile-text{
  min-width:0;          /* 長文で横はみ出しするのを防ぐ */
}
スマホ対応（画面が狭いときは縦並びにする）

css
コードをコピーする
@media (max-width: 640px){
  .profile-wrap{ flex-direction:column; }
  .profile-avatar{ width:120px; height:120px; }
}