/* ===== 共通設定 ===== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: #222;
  line-height: 1.7;
  background-color: #f7f7f7;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  width: min(1100px, 100% - 32px);
  margin: 0 auto;
}

/* ===== ヘッダー ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffffdd;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e0e0e0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.logo-area {
  display: flex;
  flex-direction: column;
}

.logo-main {
  font-weight: 700;
  font-size: 20px;
}

.logo-sub {
  font-size: 11px;
  color: #777;
}

.main-nav a {
  margin-left: 16px;
  font-size: 14px;
  color: #444;
}

.main-nav a:hover {
  color: #0066cc;
}

/* ===== ヒーロー（青帯） ===== */

.hero {
  position: relative;
  padding: 80px 0 72px;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #fff;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(255, 255, 255, 0.18),
    transparent 55%
  );
}

/* テキスト＋写真を左右に並べる */
.hero .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* 左側テキスト */
.hero-content {
  position: relative;
  flex: 1 1 auto;
  text-align: left;
  max-width: 640px;
}

.hero h1 {
  font-size: clamp(26px, 4vw, 34px);
  margin: 0 0 8px;
  line-height: 1.4;
}

.hero-subtitle {
  font-size: 0.95em;
  font-weight: 400;
}

.hero-en {
  margin: 6px 0 12px;
  font-size: 14px;
  opacity: 0.9;
}

.hero-tagline {
  font-size: 14px;
  margin-bottom: 20px;
}

/* ボタン */
.btn-primary {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.btn-primary:hover {
  background: #ea580c;
  text-decoration: none;
}

/* 右側写真 */
.hero-photo-wrapper {
  flex: 0 0 auto;
  margin-left: auto;
}

.hero-photo-small {
  width: 90% !important;
  max-width: 260px;
  height: auto;
}

/* ===== セクション共通 ===== */
.section {
  padding: 56px 0;
  background: #fff;
}

.section-alt {
  background: #f1f5f9;
}

.section h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.section-lead {
  margin: 0 0 16px;
  color: #555;
  font-size: 14px;
}

/* ===== グリッドレイアウト ===== */

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
}

.three-column {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.four-column {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 900px) {
  .two-column,
  .three-column,
  .four-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .main-nav {
    display: none;
  }

  .hero .container {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    text-align: center;
  }

  .hero-photo-wrapper {
    margin-top: 24px;
  }

  .hero-photo-small {
    width: 200px;
  }
}

/* ===== プロフィールなど ===== */

.timeline {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-size: 14px;
}

.timeline li {
  margin-bottom: 6px;
}

.timeline .year {
  font-weight: 600;
  margin-right: 4px;
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-list .card,
.card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  font-size: 14px;
}

.card h3,
.card h4 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 15px;
}

.feature-list,
.scene-list {
  list-style: disc;
  padding-left: 1.2em;
  font-size: 14px;
}

.feature-list li,
.scene-list li {
  margin-bottom: 4px;
}

/* ===== YouTube 埋め込み ===== */

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.1);
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 0;
}

/* USBドック用 横並びレイアウト */
.usb-video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  margin-top: 8px;
}

.usb-video {
  flex: 0 0 360px;
  max-width: 100%;
  text-align: center;
}

.usb-iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

@media (max-width: 768px) {
  .usb-video {
    flex: 1 1 100%;
  }
}

/* ===== お問い合わせ・フッター ===== */

.contact-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  font-size: 14px;
}

.contact-box p {
  margin: 4px 0;
}

.site-footer {
  border-top: 1px solid #e5e5e5;
  background: #0f172a;
  color: #cbd5f5;
  font-size: 12px;
  text-align: center;
  padding: 10px 0 14px;
}
<div class="hero-photo-wrapper">
  <img
    src="https://github.com/toyagiken/toyagiken.github.io/raw/main/IMG_0246.jpg"
    alt="遠矢技研 遠矢のプロフィール写真"
    class="hero-photo-small"
  />
  <p class="hero-caption">一生懸命に遊ぶ</p>
</div>
.hero-caption {
  margin-top: 8px;
  font-size: 14px;
  color: #e5e7eb;   /* 明るいグレー */
  text-align: center;
  width: 100%;
}
.hero-photo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ← これが決め手！ 縦に並んで中央揃え */
}

.hero-caption {
  margin-top: 10px;
  font-size: 14px;
  color: #e5e7eb;
  text-align: center;
}
/* 写真を90％に縮小 ＋ 上端をテキストと揃える */
.hero-photo-small {
  max-width: 260px;       /* ← 元サイズの上限（あなたの場合これが最適） */
  width: 90%;             /* ← ここで 90％に縮小 */
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* 写真全体の位置を少し下げて、文章と上端を揃える */
.hero-photo-wrapper {
  margin-top: 30px;       /* ← 数値で微調整可能（15〜30pxが最適ゾーン） */
  display: flex;
  flex-direction: column;
  align-items: center;    /* 中央揃えは維持 */
}
/* PC（デスクトップ）は60%のまま */
.eblock-img {
  max-width: 60%;
  height: auto;
}

/* スマホ（768px以下）だけ大きくする */
@media (max-width: 768px) {
  .eblock-img {
    max-width: 95%;   /* ← 大きくしたいなら 90〜100% に調整可 */
  }
}
/* PCでは60% */
.eblock-img {
  max-width: 60%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* スマホでは100%（好みで90〜100%へ） */
@media (max-width: 768px) {
  .eblock-img {
    max-width: 95% !important;
  }
}
/* PC 用（元のまま） */
.e-block-family-image {
  text-align: center;
  margin: 40px 0 60px 0;   /* 上40 / 下60 */
}

/* スマホでは余白を小さく */
@media (max-width: 768px) {
  .e-block-family-image {
    margin: 20px 0 30px 0;  /* 上20 / 下30 に調整（好みで変更可） */
  }
}
.e-block-family-image {
  text-align: center;
  margin: 40px 0 60px 0;   /* PC用 */
}

@media (max-width: 768px) {
  .e-block-family-image {
    margin: 10px 0 30px 0; /* スマホ用：上の空きを詰める */
  }
}
.e-block-family-image {
  text-align: center;
  margin: 40px 0 60px 0;   /* 上40 / 下60 */
}

/* スマホ（768px以下）は上の余白を小さくする */
@media (max-width: 768px) {
  .e-block-family-image {
    margin: 16px 0 32px 0;  /* ← 上だけグッと詰める */
  }
}
@media (max-width: 768px) {
  .section {
    padding: 20px 0;   /* ← 上下の余白を40px → 20px に圧縮 */
  }
}
@media (max-width: 768px) {
  .e-block-family-image {
    margin: 10px 0 20px 0;   /* 上10px 下20px に調整 */
  }
}
@media (max-width: 768px) {
  #eblock.section {
    padding-top: 10px;     /* ← もっと詰める */
    padding-bottom: 20px;  /* ← 下もほどよく */
  }

  .e-block-family-image {
    margin: 8px 0 16px 0;  /* ← 上8px 下16pxに圧縮（微調整ポイント） */
  }
}
/* 仲間セクションの中央寄せ調整 */
.section.partners {
  max-width: 900px;       /* 横幅を制限して中央に集める */
  margin: 0 auto;         /* 左右中央寄せの決め手 */
  padding: 2.5rem 1rem;   /* 適度な余白 */
  line-height: 1.8;       /* 読みやすい行間 */
}

/* 見出しの中央揃え */
.section.partners h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* リード文も中央揃え */
.section.partners p {
  text-align: center;
  margin-bottom: 2rem;
}

/* パートナー一覧の全体を中央寄せ */
.partner-list {
  max-width: 700px;
  margin: 0 auto;
}

/* 各項目の行間と余白調整 */
.partner-item {
  padding: 0.7rem 0;
  border-bottom: 1px solid #ddd;
}

.partner-field {
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.partner-company {
  margin-left: 0.5rem;
}
/* 仲間セクションをページ全体の幅に合わせて拡大 */
.section.partners {
  max-width: 1100px;   /* ★ 横幅を広くする（重要） */
  margin: 0 auto;
  padding: 3rem 1.5rem;
  line-height: 1.9;
}

/* 見出しを中央揃え */
.section.partners h2 {
  text-align: left;
  margin-bottom: 2rem;
}

/* リード文も中央揃え */
.section.partners p {
  text-align: left;
  margin-bottom: 2.5rem;
}

/* パートナー一覧も広げる */
.partner-list {
  max-width: 900px;   /* ★ 一覧部分も同じく横幅UP */
  margin: 0 auto;
}

/* 一覧の行間と余白 */
.partner-item {
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}
/* 仲間セクションの横幅を調整して、中央にまとまるようにする */
.section.partners {
  max-width: 950px;    /* ★ 1100 → 950px に変更 */
  margin: 0 auto;
  padding: 3rem 1.5rem;
  line-height: 1.9;
}

/* 見出しは左揃えのまま */
.section.partners h2 {
  text-align: left;
  margin-bottom: 2rem;
}

/* リード文も左揃えのまま */
.section.partners p {
  text-align: left;
  margin: 0 auto 2.5rem auto;
  max-width: 900px;   /* ★ 本文部分の幅も整える */
}

/* パートナー一覧も同じ幅で中央に配置 */
.partner-list {
  max-width: 900px;
  margin: 0 auto;
}
.hero-tagline {
  font-size: 16px;
  margin-top: 10px;
  line-height: 1.8;
  color: #ffffff;
}
/* ヒーロータイトル全体 */
.hero-title {
  line-height: 1.35;
  margin-bottom: 1.8rem;
}

/* 1行目：サービス内容 */
.hero-line1 {
  display: block;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 0.3em;
}

/* 2行目：会社名（強調） */
.hero-line2 {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.4em;
}

/* 3行目：説明 */
.hero-line3 {
  display: block;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
/* ヒーロータイトル */
.hero-content h1 {
  line-height: 1.3;
  margin-bottom: 0.6rem;
}

/* タイトル直下の説明（自治体〜） */
.hero-subcopy {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
/* 大見出し（1行目・2行目） */
.hero-title {
  line-height: 1.3;
  margin-bottom: 1.2rem;
}

.hero-line1 {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 0.2em;
}

.hero-line2 {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
}

/* サブ見出し（自治体〜） */
.hero-subcopy {
  font-size: 1.6rem;     /* ←大きくして存在感アップ */
  font-weight: 500;
  margin-bottom: 2rem;
}
/* ▼ フェードインの共通アニメーション */
@keyframes fadein-up {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ▼ ヒーロー全体のアニメ準備 */
.hero-content > * {
  opacity: 0;
  animation: fadein-up 0.8s ease-out forwards;
}

/* ▼ 順番に表示されるようにディレイ設定 */
.hero-title {
  animation-delay: 0.2s;
}

.hero-subcopy {
  animation-delay: 0.4s;
}

.hero-en {
  animation-delay: 0.6s;
}

.hero-tagline {
  animation-delay: 0.8s;
}

.btn-primary {
  animation-delay: 1.0s;
}
/* ▼ 写真のフェードイン */
.hero-photo-wrapper {
  opacity: 0;
  animation: fadein-up 1s ease-out forwards;
  animation-delay: 1.2s;   /* ★ テキストより遅く開始して“最後に出てくる” */
}
/* メディア掲載セクション */
.media-section {
  max-width: 900px;
  margin: 3rem auto;
  padding: 1rem 1.5rem;
  line-height: 1.8;
}

.media-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-left: 5px solid #0a2f70;
  padding-left: 8px;
}

.media-lead {
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
}

.media-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.media-links li {
  margin-bottom: 0.7rem;
}

.media-links a {
  text-decoration: none;
  font-size: 1.05rem;
  color: #0a2f70;
}

.media-links a:hover {
  text-decoration: underline;
}
.media-section {
  padding: 3rem 0;      /* 上下の余白だけ確保 */
  line-height: 1.8;
}

/* 以下はそのままでOK */
.media-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-left: 5px solid #0a2f70;
  padding-left: 8px;
}

.media-lead {
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
}

.media-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.media-links li {
  margin-bottom: 0.7rem;
}

.media-links a {
  text-decoration: none;
  font-size: 1.05rem;
  color: #0a2f70;
}

.media-links a:hover {
  text-decoration: underline;
}
.media-section {
  padding: 3rem 0;      /* 上下の余白だけ確保 */
  line-height: 1.8;
}

/* 以下はそのままでOK */
.media-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-left: 5px solid #0a2f70;
  padding-left: 8px;
}

.media-lead {
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
}

.media-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.media-links li {
  margin-bottom: 0.7rem;
}

.media-links a {
  text-decoration: none;
  font-size: 1.05rem;
  color: #0a2f70;
}

.media-links a:hover {
  text-decoration: underline;
}
/* メディア掲載セクション（左端揃え版） */
.media-section {
  padding: 3rem 0;     /* 上下の余白のみ */
  background: #f9f9f9; /* 程よい背景（必要なら削除OK） */
}

.media-section .container {
  max-width: 900px;    /* 他セクションと完全統一 */
  margin: 0 auto;
}

.media-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-left: 5px solid #0a2f70;
  padding-left: 8px;
}

.media-lead {
  margin-bottom: 1.2rem;
  font-size: 1.1rem;
}

.media-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.media-links li {
  margin-bottom: 0.7rem;
}

.media-links a {
  text-decoration: none;
  font-size: 1.05rem;
  color: #0a2f70;
}

.media-links a:hover {
  text-decoration: underline;
}
/* 導入実績セクション */
.section.cases {
  padding: 3rem 0;
}

.section.cases h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border-left: 5px solid #0a2f70;
  padding-left: 8px;
}

.cases-lead {
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.case-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.case-list li {
  margin-bottom: 0.9rem;
  line-height: 1.8;
}

.case-list li strong {
  font-weight: 600;
}
.case-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 1.5rem;
}

.case-photo {
  flex: 1 1 260px;
  text-align: center;
}

.case-photo img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.case-photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* スマホでは縦並びに */
@media (max-width: 768px) {
  .case-photos {
    flex-direction: column;
  }
}
/* 導入実績：横並び写真レイアウト */
.case-photos-row {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 2rem;
}

.case-photo-block {
  flex: 1;
  text-align: center;
}

.case-photo-block img {
  width: 100%;
  height: 260px;            /* ★ 写真を共通の高さで揃える */
  object-fit: cover;        /* ★ 高さを揃えても歪まない */
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.photo-caption {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* 導入実績一覧 */
.case-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.case-list li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
}
/* 導入実績：横並び写真レイアウト */
.case-photos-row {
  display: flex;           /* ★ これで横並び */
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 2rem;
}

.case-photo-block {
  flex: 1;
  text-align: center;
}

.case-photo-block img {
  width: 100%;
  height: 260px;           /* ★ 高さをそろえる */
  object-fit: cover;       /* ★ トリミングしつつ歪みなし */
  border-radius: 6px;
  display: block;
}

.photo-caption {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* 導入事例リスト */
.case-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.cases-lead {
  font-weight: 700 !important;
}
.case-list li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
}