:root {
  --color-primary: #f3c41d;
  --color-text: #444;
  --color-border: #ddd;
  --color-footer-logo: #f4c41e;
  --color-footer-text: #6b6;
  --color-footer-bg: #d6d6d6;
  --color-footer-nav: #444;
  --color-surface: #fff;
  --color-overlay-white-20: rgba(255, 255, 255, 0.2);
  --color-topics-header-bg: #f6f6f6;
  --color-topics-overlay: rgba(0, 0, 0, 0.6);

  /* フォントファミリートークン */
  --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    sans-serif;
  --font-family-heading: "BIZ UDPGothic", "Hiragino UD Sans Std",
    "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-family-ui: "BIZ UDPGothic", "Hiragino UD Sans Std", "Hiragino Sans",
    "Yu Gothic", sans-serif;

  /* タイポグラフィサイズトークン */
  --font-size-xxs: 12px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 22px;
  --font-size-xl: 32px;
  --font-size-2xl: 34px;

  /* 行間トークン */
  --line-height-xs: 21px;
  --line-height-sm: 24.5px;
  --line-height-md: 34px;
  --line-height-lg: 46px;
  --line-height-xl: 52px;

  /* 文字間トークン */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.08em;

  /* 余白トークン（4pxグリッド） */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;

  /* コンテナ幅トークン */
  --container-desktop: 1400px;
  --container-tablet: 860px;
  --container-mobile: 360px;

  /* line-heightのハーフ・レディングを打ち消す */
  --leading-trim: calc((1em - 1lh) / 2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-family-base);
  font-feature-settings: "palt";
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* 汎用ディスプレイユーティリティ（768px で PC / モバイルを切り替え） */
@media (min-width: 768px) {
  .u-inline-desktop {
    display: inline;
  }

  .u-none-desktop {
    display: none;
  }
}

@media (max-width: 767px) {
  .u-none-mobile {
    display: none;
  }
}

/* コンテンツ */
.hero-image {
  display: grid;
  width: 100%;
}

.hero-image > * {
  grid-area: 1 / 1;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: opacity(0.8);
}

.hero-image p {
  margin: 0;
  place-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-inline: clamp(12px, 3.5vw, 24px);
  font-size: clamp(18px, calc(8px + 2.8vw), 36px);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  z-index: 1;
}

@media (min-width: 768px) {
  .hero-image__br {
    display: none;
  }
}

.introduction {
  width: 100%;
  padding-block: clamp(36px, 8vw, 92px);
  padding-inline: clamp(16px, 4.8vw, 32px);
}

.introduction__inner {
  width: min(100%, 980px);
  margin-inline: auto;
}

.introduction__lead {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(24px, calc(16.8px + 2vw), 32px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-align: center;
}

.introduction__text {
  margin: clamp(20px, 4vw, 36px) 0 0;
  color: var(--color-text);
  font-size: clamp(14px, calc(4.5px + 2.8vw), 20px);
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
}

.services {
  width: 100%;
}

/* タイトル・リード：全画面ヒーロー（カバー画像＋オーバーレイ） */
.services__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  aspect-ratio: 1400/600;
  width: 100%;
  padding-inline: clamp(16px, 4.8vw, 32px);
  padding-top: clamp(32px, 8vw, 64px);
  padding-bottom: 0;
  background:
    linear-gradient(rgba(96, 70, 12, 0.7), rgba(96, 70, 12, 0.7)),
    url("./images/service-cover.jpg") center / cover no-repeat;
}

.services__intro-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 980px);
  margin-inline: auto;
  padding-bottom: clamp(72px, 18vh, 140px);
  text-align: center;
}

/* タブのみヒーロー最下部に重ねる（.services__intro の padding-inline 内に収まる） */
.services__intro-tabs {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.services__intro .services__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-family-heading);
  font-size: clamp(24px, calc(16.8px + 2vw), 32px);
  font-weight: 700;
  line-height: 1.4;
}

.services__intro .services__lead {
  margin: clamp(16px, 3vw, 24px) auto 0;
  max-width: 72ch;
  color: #fff;
  font-size: clamp(14px, calc(4.5px + 2.8vw), 20px);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.services__body {
  padding-inline: clamp(16px, 4.8vw, 32px);
  padding-top: 0;
  padding-bottom: clamp(40px, 8vw, 88px);
}

.services__inner {
  width: min(100%, 980px);
  margin-inline: auto;
}

.services-tabs {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 16px);
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* タブ：下辺以外を角丸（パネルとの継ぎ目は下面を直角） */
.services-tabs__tab {
  width: 100%;
  margin: 0;
  padding: clamp(12px, 2vw, 16px) clamp(10px, 2vw, 14px);
  border: 0;
  border-radius: 8px 8px 0 0;
  appearance: none;
  -webkit-appearance: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 14px rgba(0, 0, 0, 0.08);
  font-family: var(--font-family-ui);
  font-size: clamp(13px, calc(4px + 2.5vw), 16px);
  line-height: 1.4;
  cursor: pointer;
  /* モバイルのタップ時に表示される既定の青いハイライトをキーカラーに置き換える */
  -webkit-tap-highlight-color: rgba(243, 196, 29, 0.3);
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
}

/* タップ/クリック押下中の背景もキーカラー基調に揃える */
.services-tabs__tab:active {
  background-color: rgba(243, 196, 29, 0.25);
}

.services-tabs__tab[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: 500;
  background-color: var(--color-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* 選択中タブの押下時はパネルとの一体感を保つため白背景を維持 */
.services-tabs__tab[aria-selected="true"]:active {
  background-color: var(--color-surface);
}

.services-tabs__tab:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.services-panel {
  margin-top: 0;
  border: 1px solid var(--color-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: clamp(16px, 3.5vw, 28px);
  background-color: var(--color-surface);
}

.services-panel__content {
  display: flex;
  align-items: center;
  gap: clamp(20px, 6vw, 60px);
}

.services-panel__image {
  width: clamp(180px, 42vw, 420px);
  height: auto;
  display: block;
  flex-shrink: 0;
  border-radius: 4px;
}

.services-panel__body {
  flex: 1;
}

.services-panel__title {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(20px, calc(8px + 3.5vw), 26px);
  font-weight: 500;
  line-height: 1.45;
}

.services-panel__text {
  margin: clamp(12px, 2.5vw, 16px) 0 0;
  font-size: clamp(14px, calc(8px + 1.8vw), 16px);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.site-header {
  width: 100%;
  background-color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  width: min(100%, var(--container-desktop));
  min-height: 90px;
  margin-inline: auto;
  padding-inline: clamp(16px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
}

.site-header__brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.site-header__brand img {
  width: auto;
  height: clamp(28px, 2.2vw, 42px);
  display: block;
}

.site-header__nav {
  margin-left: auto;
}

.site-header__menu-trigger {
  display: none;
}

.site-header__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
}

.site-header__item a {
  color: #000;
  text-decoration: none;
  font-family: var(--font-family-ui);
  font-size: clamp(12px, calc(6px + 1.8vw), var(--font-size-sm));
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-normal);
  white-space: nowrap;
}

.site-header__item a:hover,
.site-header__item a:focus-visible {
  opacity: 0.72;
}

.site-header__overlay {
  display: none;
}

/* パンくず */
.breadcrumb {
  width: 100%;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb__inner {
  width: min(100%, 1150px);
  margin-inline: auto;
  padding-inline: clamp(16px, 2.4vw, 28px);
  padding-block: clamp(10px, 2vw, 14px);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 10px);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  flex-shrink: 0;
  width: clamp(10px, 2vw, 14px);
  aspect-ratio: 14.4 / 7.9;
  background: url("./images/icon-chevron.svg") center / contain no-repeat;
  transform: rotate(90deg);
}

.breadcrumb__home-icon {
  width: clamp(14px, 3.2vw, 16px);
  height: auto;
  display: block;
}

.breadcrumb__link {
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-family-ui);
  font-size: clamp(12px, calc(6px + 1.8vw), var(--font-size-sm));
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-normal);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  opacity: 0.72;
}

.breadcrumb__link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.breadcrumb__current {
  color: var(--color-primary);
  font-family: var(--font-family-ui);
  font-size: clamp(12px, calc(6px + 1.8vw), var(--font-size-sm));
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-normal);
}

/* 社長ごあいさつ（ページ見出し） */
.greeting-page-header {
  margin: 0;
  width: 100%;
  padding-block: clamp(32px, 6.25vw, 80px);
  padding-inline: clamp(var(--space-sm), 4.8vw, var(--space-lg));
}

.greeting-page-header__inner {
  width: min(100%, 850px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* 見出しと罫線ブロックの間隔 40px。罫線行は 4px でグレーとキーカラーを垂直中央で重ねる */
  grid-template-rows: auto 4px;
  row-gap: 40px;
  align-items: center;
}

.greeting-page-header__heading {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
}

.greeting-page-header__category {
  margin: 0;
  color: #777;
  font-family: var(--font-family-ui);
  font-size: clamp(13px, calc(11px + 0.5vw), 15px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
}

.greeting-page-header__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(24px, calc(16.8px + 2vw), var(--font-size-xl));
  font-weight: 500;
  /* greeting-token-guide: --line-height-xl と --font-size-xl の比率を維持 */
  line-height: calc(var(--line-height-xl) / var(--font-size-xl));
  letter-spacing: var(--letter-spacing-normal);
  text-align: center;
}

.greeting-page-header__heading .greeting-page-header__title {
  grid-column: auto;
  grid-row: auto;
}

.greeting-page-header__rule-gray {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 1px;
  background-color: var(--color-border);
  align-self: center;
}

.greeting-page-header__rule-accent {
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
  width: 100%;
  height: 4px;
  background-color: var(--color-primary);
  align-self: center;
}

/* 社長ごあいさつ（本文） */
.greeting-message {
  width: 100%;
  padding: 0 clamp(var(--space-sm), 4.8vw, var(--space-lg))
    clamp(52px, 8vw, 108px);
}

.greeting-message__inner {
  width: min(100%, 980px);
  margin-inline: auto;
}

.greeting-message__image-wrap {
  margin: 0;
  display: flex;
  justify-content: center;
}

.greeting-message__image {
  width: min(50%, 512px);
  max-width: 100%;
  height: auto;
  display: block;
}

.greeting-message__body {
  margin-top: clamp(24px, 4vw, 48px);
}

.greeting-message__body p {
  margin: 0;
  color: #444;
  font-size: clamp(12px, calc(10.2px + 0.5vw), 15px);
  line-height: clamp(2.1, calc(1.9 + 0.3vw), 2.35);
  letter-spacing: 0.02em;
  text-align: left;
}

.greeting-message__body p + p {
  margin-top: clamp(24px, 3.5vw, 42px);
}

.greeting-message__closing {
  margin: clamp(28px, 4.5vw, 52px) 0 0;
  color: #444;
  font-size: clamp(12px, calc(10.2px + 0.5vw), 15px);
  line-height: clamp(2.1, calc(1.9 + 0.3vw), 2.35);
  letter-spacing: 0.02em;
  text-align: left;
}

@media (min-width: 768px) {
  .greeting-message__body p,
  .greeting-message__closing {
    text-align: center;
  }
}

.greeting-message__signature {
  margin-top: clamp(44px, 7vw, 88px);
  text-align: center;
}

.greeting-message__company-role {
  margin: 0;
  color: #444;
  font-size: clamp(16px, calc(13px + 0.6vw), 22px);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.greeting-message__name {
  margin: clamp(8px, 1.5vw, 16px) 0 0;
  color: #444;
  font-size: clamp(34px, calc(21px + 2.6vw), 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* トピックス */
.topics {
  width: 100%;
}

.topics__header {
  margin: 0;
  /* デスクトップ基準: 上下 80px。狭い幅では流動的に縮小 */
  padding-block: clamp(32px, 6.25vw, 80px);
  padding-inline: clamp(16px, 4.8vw, 32px);
  background-color: var(--color-topics-header-bg);
  text-align: center;
}

.topics__heading {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(24px, calc(16.8px + 2vw), 32px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.topics__heading-en {
  margin: clamp(var(--space-2xs), 1.5vw, var(--space-xs)) 0 0;
  color: var(--color-text);
  font-family: var(--font-family-ui);
  font-size: clamp(13px, calc(4px + 2.5vw), var(--font-size-md));
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  text-transform: lowercase;
}

.topics__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  aspect-ratio: 1400/600;
  width: 100%;
  background: url("./images/topics-shindan-cover.jpg") center / cover no-repeat;
}

.topics__col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  color: #fff;
  text-align: left;
  text-decoration: none;
}

.topics__col:focus {
  outline: none;
}

.topics__col:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
  z-index: 2;
}

.topics__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-topics-overlay);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* 非ホバー時は1列目をアクティブ */
.topics__split:not(:hover) .topics__col:first-child .topics__overlay {
  opacity: 1;
}

/* ホバー時は対象列のみアクティブ */
.topics__col:hover .topics__overlay {
  opacity: 1;
}

.topics__split:hover .topics__col:not(:hover) .topics__overlay {
  opacity: 0;
}

.topics__col-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: min(100%, 42rem);
  padding-block: clamp(var(--space-lg), 6vh, 72px);
  padding-inline: clamp(16px, 4.8vw, 32px);
}

.topics__card-title {
  display: block;
  margin: 0;
  color: #fff;
  font-family: var(--font-family-heading);
  font-size: clamp(20px, calc(8px + 3.5vw), 26px);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.topics__card-text {
  display: block;
  margin: clamp(12px, 2.5vw, 16px) 0 0;
  color: #fff;
  font-size: clamp(14px, calc(8px + 1.8vw), 16px);
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-align: left;
}

/* 課題解決 */
.solutions {
  width: 100%;
}

.solutions__hero {
  width: 100%;
  padding-inline: clamp(16px, 4.8vw, 32px);
  padding-block: clamp(24px, 6vw, 56px);
  display: flex;
  align-items: flex-end;
}

.solutions__hero-inner {
  width: min(100%, 1150px);
  margin-inline: auto;
  text-align: center;
}

.solutions__heading {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(24px, calc(16.8px + 2vw), 32px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.solutions__heading-en {
  margin: clamp(var(--space-2xs), 1.5vw, var(--space-xs)) 0 0;
  color: var(--color-text);
  font-family: var(--font-family-ui);
  font-size: clamp(13px, calc(4px + 2.5vw), var(--font-size-md));
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  text-transform: lowercase;
}

.solutions__lead {
  margin: clamp(12px, 2.5vw, 16px) auto 0;
  max-width: 72ch;
  color: var(--color-text);
  font-size: clamp(14px, calc(8px + 1.8vw), 16px);
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-align: center;
}

.solutions__body {
  padding-inline: clamp(16px, 4.8vw, 32px);
  padding-block-end: clamp(36px, 6vw, 72px);
}

.solutions__inner {
  width: min(100%, 1150px);
  margin-inline: auto;
}

.solutions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.solutions__item {
  min-width: 0;
}

.solutions__item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.solutions__item-title {
  margin: 0;
  min-height: clamp(180px, 24vw, 280px);
  padding: 0 1em 1em;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  font-family: var(--font-family-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.solutions__item-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-topics-overlay);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.solutions__item-link:hover .solutions__item-title::before,
.solutions__item-link:focus-visible .solutions__item-title::before {
  /* opacity: 0.45; */
}

.solutions__item-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.solutions__item-title-text {
  position: relative;
  z-index: 1;
}

.solutions__item:nth-child(1) .solutions__item-title {
  background-image: url("./images/solutions-item-feature-01.jpg");
}

.solutions__item:nth-child(2) .solutions__item-title {
  background-image: url("./images/solutions-item-feature-02.jpg");
}

.solutions__item:nth-child(3) .solutions__item-title {
  background-image: url("./images/solutions-item-feature-03.jpg");
}

.solutions__item:nth-child(4) .solutions__item-title {
  background-image: url("./images/solutions-item-feature-04.jpg");
}

.solutions__item:nth-child(5) .solutions__item-title {
  background-image: url("./images/solutions-item-feature-05.jpg");
}

.solutions__item:nth-child(6) .solutions__item-title {
  background-image: url("./images/solutions-item-feature-06.jpg");
}

.solutions__item-text {
  margin-block-start: 0;
  padding: 2em 3em 3em;
  font-size: clamp(14px, calc(8px + 1.8vw), 16px);
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.solutions__actions {
  margin-top: clamp(28px, 5vw, 48px);
  text-align: center;
}

.solutions__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85em 2.2em;
  border-radius: 0;
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-family-ui);
  font-size: clamp(14px, calc(8px + 1.8vw), 16px);
  line-height: 1.4;
  text-decoration: none;
}

.solutions__button:hover,
.solutions__button:focus-visible {
  opacity: 0.8;
}

.solutions__button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* 更新情報 */
.news {
  width: 100%;
  padding-block: clamp(40px, 8vw, 88px);
  padding-inline: clamp(16px, 4.8vw, 32px);
  background-color: #f6f6f6;
}

.news__inner {
  width: min(100%, 980px);
  margin-inline: auto;
}

.news__header {
  margin: 0;
  text-align: center;
}

.news__heading {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(24px, calc(16.8px + 2vw), 32px);
  font-weight: 500;
  line-height: 1.4;
}

.news__heading-en {
  margin: clamp(var(--space-2xs), 1.5vw, var(--space-xs)) 0 0;
  color: var(--color-text);
  font-family: var(--font-family-ui);
  font-size: clamp(13px, calc(4px + 2.5vw), var(--font-size-md));
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: lowercase;
}

.news__list {
  list-style: none;
  margin: clamp(24px, 4vw, 36px) 0 0;
  padding: 0;
  border: 1px solid #6b6b6b;
  background-color: #fff;
}

.news__item {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  padding: 1.5em 1.5em;
  border-bottom: 1px solid #6b6b6b;
}

.news__item:last-child {
  border-bottom: 0;
}

.news__date {
  flex: 0 0 auto;
  color: #777;
  font-size: clamp(13px, calc(10.5px + 0.6vw), 15px);
  line-height: 1.5;
}

.news__category {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8em;
  padding-inline: 1em;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: #000;
  font-size: clamp(12px, calc(11px + 0.2vw), 13px);
  line-height: 1.2;
  white-space: nowrap;
}

.news__link {
  min-width: 0;
  color: var(--color-text);
  font-size: clamp(14px, calc(12px + 0.3vw), 16px);
  line-height: 1.5;
  text-decoration: none;
}

.news__link:hover,
.news__link:focus-visible {
  text-decoration: underline;
}

.news__link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* 更新情報（詳細） */
.news-article {
  width: 100%;
  padding: 0 clamp(var(--space-sm), 4.8vw, var(--space-lg))
    clamp(52px, 8vw, 108px);
}

.news-article__inner {
  width: min(100%, 980px);
  margin-inline: auto;
}

.news-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
}

.news-article__date {
  flex: 0 0 auto;
  color: #777;
  font-size: clamp(13px, calc(10.5px + 0.6vw), 15px);
  line-height: 1.5;
}

.news-article__content {
  margin-top: clamp(24px, 4vw, 40px);
  color: var(--color-text);
  font-size: clamp(14px, calc(12px + 0.3vw), 16px);
  line-height: clamp(1.75, calc(1.65 + 0.2vw), 1.85);
  letter-spacing: 0.02em;
}

.news-article__content p {
  margin: 0;
}

.news-article__content p + p {
  margin-top: clamp(20px, 3.5vw, 36px);
}

.news-article__content h2 {
  margin: clamp(28px, 4.5vw, 44px) 0 0;
  padding-bottom: clamp(8px, 1.5vw, 12px);
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: clamp(18px, calc(14px + 1.2vw), 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.news-article__content h3,
.news-article__content h4,
.news-article__content h5 {
  margin: clamp(28px, 4.5vw, 44px) 0 0;
  padding-bottom: clamp(8px, 1.5vw, 12px);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.news-article__content h3 {
  font-size: clamp(16px, calc(13px + 0.9vw), 19px);
}

.news-article__content h4 {
  font-size: clamp(15px, calc(12.5px + 0.6vw), 17px);
}

.news-article__content h5 {
  font-size: clamp(14px, calc(12px + 0.4vw), 16px);
}

.news-article__content ul,
.news-article__content ol {
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  padding-inline-start: 1.5em;
}

.news-article__content li + li {
  margin-top: clamp(8px, 1.5vw, 12px);
}

.news-article__content h2 + ul,
.news-article__content h2 + ol,
.news-article__content h3 + ul,
.news-article__content h3 + ol,
.news-article__content h4 + ul,
.news-article__content h4 + ol,
.news-article__content h5 + ul,
.news-article__content h5 + ol {
  margin-top: clamp(12px, 2vw, 20px);
}

.news-article__content h2 + p,
.news-article__content h3 + p,
.news-article__content h4 + p,
.news-article__content h5 + p {
  margin-top: clamp(12px, 2vw, 20px);
}

.news-article__actions {
  margin: clamp(40px, 6vw, 64px) 0 0;
  text-align: center;
}

.news-article__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85em 2.2em;
  border-radius: clamp(8px, 2vw, 12px);
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-family-ui);
  font-size: clamp(14px, calc(8px + 1.8vw), 16px);
  line-height: 1.4;
  text-decoration: none;
}

.news-article__back-link:hover,
.news-article__back-link:focus-visible {
  opacity: 0.8;
}

.news-article__back-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* 会社情報 */
.company-page {
  width: 100%;
  padding: 0 clamp(var(--space-sm), 4.8vw, var(--space-lg))
    clamp(52px, 8vw, 108px);
}

.company-page__inner {
  width: min(100%, 980px);
  margin-inline: auto;
}

.company-page__content {
  color: var(--color-text);
  font-size: clamp(14px, calc(12px + 0.3vw), 16px);
  line-height: clamp(1.75, calc(1.65 + 0.2vw), 1.85);
  letter-spacing: 0.02em;
}

.company-page__content p {
  margin: 0;
}

.company-page__content p + p {
  margin-top: clamp(20px, 3.5vw, 36px);
}

.company-page__content h2 {
  margin: clamp(28px, 4.5vw, 44px) 0 0;
  padding-bottom: clamp(8px, 1.5vw, 12px);
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: clamp(18px, calc(14px + 1.2vw), 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.company-page__content h3,
.company-page__content h4,
.company-page__content h5 {
  margin: clamp(28px, 4.5vw, 44px) 0 0;
  padding-bottom: clamp(8px, 1.5vw, 12px);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.company-page__content h3 {
  font-size: clamp(16px, calc(13px + 0.9vw), 19px);
}

.company-page__content h4 {
  font-size: clamp(15px, calc(12.5px + 0.6vw), 17px);
}

.company-page__content h5 {
  font-size: clamp(14px, calc(12px + 0.4vw), 16px);
}

.company-page__content ul,
.company-page__content ol {
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  padding-inline-start: 1.5em;
}

.company-page__content li + li {
  margin-top: clamp(8px, 1.5vw, 12px);
}

.company-page__content h2 + ul,
.company-page__content h2 + ol,
.company-page__content h3 + ul,
.company-page__content h3 + ol,
.company-page__content h4 + ul,
.company-page__content h4 + ol,
.company-page__content h5 + ul,
.company-page__content h5 + ol {
  margin-top: clamp(12px, 2vw, 20px);
}

.company-page__content h2 + p,
.company-page__content h3 + p,
.company-page__content h4 + p,
.company-page__content h5 + p {
  margin-top: clamp(12px, 2vw, 20px);
}

.company-page__content table {
  width: 100%;
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  border-collapse: collapse;
}

.company-page__content tr + tr td {
  border-top: 1px solid var(--color-border);
}

.company-page__content td {
  padding: clamp(12px, 2vw, 16px) clamp(8px, 2vw, 16px) clamp(12px, 2vw, 16px) 0;
  vertical-align: top;
}

.company-page__content td:first-child {
  width: min(100%, 12rem);
  font-weight: 700;
}

.company-page__content h2 + table {
  margin-top: clamp(12px, 2vw, 20px);
}

.company-page__content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  border: 0;
  aspect-ratio: 4 / 3;
}

.company-page__content h2 + p + iframe,
.company-page__content p + iframe {
  margin-top: clamp(16px, 2.5vw, 24px);
}

.company-page__actions {
  margin: clamp(40px, 6vw, 64px) 0 0;
  text-align: center;
}

.company-page__back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85em 2.2em;
  border-radius: clamp(8px, 2vw, 12px);
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-family-ui);
  font-size: clamp(14px, calc(8px + 1.8vw), 16px);
  line-height: 1.4;
  text-decoration: none;
}

.company-page__back-link:hover,
.company-page__back-link:focus-visible {
  opacity: 0.8;
}

.company-page__back-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* フッター */
.site-footer {
  width: 100%;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.site-footer__inner {
  width: min(100%, var(--container-desktop));
  margin-inline: auto;
  padding-inline: clamp(16px, 2.4vw, 28px);
  text-align: center;
}

.site-footer__pagetop {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.site-footer__pagetop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 2em;
}

.site-footer__pagetop-link img {
  width: 14px;
  aspect-ratio: 14 / 7;
  display: block;
}

.site-footer__pagetop-link:hover,
.site-footer__pagetop-link:focus-visible {
  opacity: 0.72;
}

.site-footer__pagetop-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.site-footer__upper {
  border-bottom: 1px solid var(--color-border);
}

.site-footer__brand {
  min-height: clamp(112px, 10vw, 156px);
  padding-block: clamp(24px, 4vw, 42px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 14px);
  text-decoration: none;
}

.site-footer__logo {
  width: clamp(120px, 10vw, 144px);
  aspect-ratio: 144 / 50;
  height: auto;
  display: block;
}

.site-footer__company {
  color: var(--color-footer-logo);
  font-family: var(--font-family-heading);
  font-size: clamp(12px, calc(10px + 0.15vw), 14px);
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.site-footer__nav {
  border-bottom: 1px solid var(--color-border);
}

.site-footer__menu {
  list-style: none;
  margin: 0;
  padding: clamp(20px, 2.4vw, 30px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 1.8vw, 34px);
}

.site-footer__item a {
  color: var(--color-footer-nav);
  text-decoration: none;
  font-family: var(--font-family-ui);
  font-size: clamp(12px, calc(11px + 0.2vw), 14px);
  line-height: 1.3;
}

.site-footer__item a:hover,
.site-footer__item a:focus-visible {
  opacity: 0.72;
}

.site-footer__copyright-wrap {
  background-color: var(--color-footer-bg);
}

.site-footer__copyright {
  margin: 0;
  min-height: clamp(44px, 3.8vw, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-ui);
  font-size: clamp(12px, calc(11px + 0.15vw), 13px);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  body.open_menu {
    overflow: hidden;
  }

  /* 375px幅で34px基準（34/375≈9.07vw） */
  .hero-image p {
    font-size: clamp(28px, calc(34 / 375 * 100vw), 42px);
  }

  .site-header__inner {
    position: relative;
    min-height: 60px;
    padding-inline: clamp(16px, 5vw, 24px);
    gap: 12px;
  }

  .breadcrumb__inner {
    padding-inline: clamp(16px, 5vw, 24px);
  }

  .site-header__brand img {
    height: clamp(24px, 6.5vw, 32px);
  }

  /* solaris #global_menu_button 相当（button + span 三本線・60×60・22×2px） */
  .site-header__menu-trigger {
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    cursor: pointer;
    z-index: 50;
    vertical-align: middle;
  }

  .site-header__menu-trigger-line {
    display: block;
    position: absolute;
    left: 20px;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    transform-origin: center;
    transition:
      background-color 0.2s ease,
      transform 0.3s ease,
      opacity 0.2s ease;
  }

  .site-header__menu-trigger-line:nth-child(1) {
    top: 24px;
  }

  .site-header__menu-trigger-line:nth-child(2) {
    top: 30px;
  }

  .site-header__menu-trigger-line:nth-child(3) {
    top: 36px;
  }

  .site-header__menu-trigger:hover .site-header__menu-trigger-line {
    opacity: 0.5;
  }

  body.open_menu .site-header__menu-trigger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  body.open_menu .site-header__menu-trigger-line:nth-child(2) {
    opacity: 0;
  }

  body.open_menu .site-header__menu-trigger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* solaris #drawer_menu 相当 */
  .site-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 85vw);
    max-width: 100%;
    height: 100dvh;
    margin-left: 0;
    padding: clamp(72px, 14vw, 96px) 0 clamp(20px, 6vw, 28px);
    background-color: #333;
    border-left: 0;
    overflow-y: auto;
    box-shadow: -5px 0 20px 0 rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 40;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  body.open_menu .site-header__nav {
    transform: translateX(0);
  }

  .site-header__overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
    z-index: 30;
    pointer-events: none;
  }

  body.open_menu .site-header__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-header__menu {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* solaris #mobile_menu a 相当 */
  .site-header__item + .site-header__item {
    margin-top: 0;
  }

  .site-header__item a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 20px;
    min-height: 60px;
    line-height: 60px;
    font-size: clamp(12px, calc(10px + 0.6vw), 13px);
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .site-header__item a:hover,
  .site-header__item a:focus-visible {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.2);
  }

  body.open_menu .site-header__menu-trigger {
    color: #fff;
  }

  .introduction__lead {
    line-height: 1.55;
  }

  .introduction__text {
    line-height: 1.95;
  }

  .greeting-message {
    padding-bottom: clamp(48px, 12vw, 72px);
  }

  .greeting-message__image {
    width: min(72%, 320px);
  }

  .greeting-message__body p,
  .greeting-message__closing {
    line-height: 2.15;
  }

  .greeting-message__company-role {
    font-size: clamp(14px, calc(11px + 1vw), 18px);
  }

  .greeting-message__name {
    font-size: clamp(30px, calc(20px + 3.2vw), 40px);
  }

  .services-panel__content {
    flex-direction: column;
    gap: clamp(16px, 4vw, 24px);
  }

  .services-panel__image {
    width: 100%;
    max-width: 100%;
  }

  .topics__split {
    grid-template-columns: 1fr;
  }

  .topics__col {
    min-height: min(50svh, 520px);
  }

  .topics__col--naisei {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }

  /* モバイルはホバー切替なし。内製化列にも常時オーバーレイ */
  .topics__col--naisei .topics__overlay,
  .topics__split:hover .topics__col--naisei:not(:hover) .topics__overlay {
    opacity: 1;
  }

  .solutions__grid {
    grid-template-columns: 1fr;
  }

  .solutions__item-text {
    padding: 2em clamp(1.4em, 4vw, 3em) 3em;
  }

  .solutions__item-title {
    font-size: clamp(18px, calc(10px + 2.2vw), 20px);
  }

  .news__item {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.9em 1em;
  }

  .news__link {
    flex-basis: 100%;
    margin-top: 0.2em;
  }

  .site-footer__brand {
    width: 100%;
  }

  .site-footer__menu {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-block: clamp(14px, 5vw, 24px);
  }

  .site-footer__item {
    width: 100%;
    text-align: center;
  }

  .site-footer__item + .site-footer__item {
    margin-top: 0;
  }

  .site-footer__item a {
    width: 100%;
    display: block;
    padding-block: 10px;
    font-size: clamp(14px, calc(12px + 0.6vw), 16px);
  }

}

/* スクロールフェードイン（data-fade / data-fade-group） */
@media (prefers-reduced-motion: no-preference) {
  [data-fade],
  [data-fade-group]:not(:has([data-fade-target])) > *,
  [data-fade-group]:has([data-fade-target]) [data-fade-target] {
    opacity: 0;
    transform: translateY(clamp(12px, 3vw, 24px));
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    transition-delay: calc(var(--fade-index, 0) * var(--fade-stagger, 80ms));
  }

  [data-fade].is-visible,
  [data-fade-group].is-visible:not(:has([data-fade-target])) > *,
  [data-fade-group].is-visible:has([data-fade-target]) [data-fade-target] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fade],
  [data-fade-group]:not(:has([data-fade-target])) > *,
  [data-fade-group]:has([data-fade-target]) [data-fade-target] {
    opacity: 1;
    transform: none;
  }
}