@charset "UTF-8";

/* ==========================================================================
   Settings
   1rem = 10px（html: 62.5%）。数値は Figma（1728px幅）の px ÷ 10
   ========================================================================== */
:root {
  --color-text: #3b3b3b;    /* Figma: 色 2 */
  --color-heading: #2c2c2c;
  --color-gray: #b4b4b4;    /* Figma: 色 */
  --color-main: #34b157;    /* Figma: main */
  --color-date: #797979;
  --color-line: #f1f1f1;
  --color-border: #cbcbcb;  /* 記事・フォーム見出しの区切り線 */
  --color-tag-bg: #f5f5f5;
  --color-input-border: #cacaca;
  --color-placeholder: #d3d3d3;
  --color-required: #ef4a4a;
  --color-dummy: #d9d9d9;

  --gradient-text: linear-gradient(90deg, #85daa9 0%, #cce8b2 17.781%, #c2e4be 26.671%, #d5d1ae 35.561%); /* Figma: グラデ */
  --gradient-btn: linear-gradient(90deg, #67bd81 0%, #24acaf 35.561%);

  /* Figma: Google Sans Flex（和文グリフは Noto Sans JP にフォールバック） */
  --ff-base: "Google Sans Flex", "Noto Sans JP", sans-serif;
  /* Figma: Big Shoulders Text SC
     → Google Fonts の Big Shoulders（可変）を opsz 10（Text 相当）で使用。Figma の文字幅と一致確認済み。
       font-variation-settings は継承されるため、--ff-en を使う要素ごとに "opsz" 10 を併記する */
  --ff-en: "Big Shoulders", sans-serif;

  /* Figma の line-height: auto(normal) を各フォントのメトリクス相当の数値で固定（px 丸め後に Figma と一致する値） */
  --lh-base-normal: 1.25;
  --lh-en-normal: 1.2;
}

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

html {
  font-size: 62.5%;
  scroll-padding-block-start: 9.5rem;
  /* 背景の装飾が画面外へ出るため、横スクロールを止める（body だけでは効かない） */
  overflow-x: clip;
}

/* 画面外へはみ出す背景装飾の基準にする。
   位置指定していないと装飾の基準が初期包含ブロックになり、
   html / body の overflow-x: clip では止められず横スクロールが出る。 */
main {
  position: relative;
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: #fff;
  color: var(--color-text);
  font-family: var(--ff-base);
  font-size: 1.8rem;
  font-weight: 500;
  --lh: 1.87;
  -webkit-font-smoothing: antialiased;
}

/* 行の高さ：Figma は1行ごとに整数 px へ丸めて配置するため、倍率を --lh で指定し px 単位に丸めて適用する
   （例：18px × 1.87 = 33.66px → 34px） */
* {
  line-height: var(--lh);
}

@supports (line-height: round(1em, 1px)) {
  * {
    line-height: round(calc(var(--lh) * 1em), 1px);
  }
}

:is(h1, h2, h3, p, ul, ol, dl, dd, figure) {
  margin: 0;
}

:is(ul, ol) {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

video {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
}

:is(button, input, textarea) {
  margin: 0;
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

@media (hover: hover) {
  :is(a, button) {
    transition: opacity 0.3s;
  }

  :is(a, button):hover {
    opacity: 0.7;
  }
}

/* ==========================================================================
   Layout: Header
   ========================================================================== */
/* 画面上部に固定。最初は透明で、スクロールすると白背景＋影を出す */
.l-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.l-header.is-scrolled {
  background: #fff;
  box-shadow: 0 0.2rem 1rem rgb(0 0 0 / 0.06);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 2.5rem;
  padding-inline: 6rem;
}

.l-header__logo img {
  width: 16.4rem;
  height: 4.5rem;
}

.l-header__nav {
  display: flex;
  align-items: center;
  gap: 7rem;
}

/* Figma の各メニュー幅（82 / 82 / 53 / 77 / auto）+ 間隔70 */
.l-header__menu {
  display: grid;
  grid-template-columns: 8.2rem 8.2rem 5.3rem 7.7rem auto;
  column-gap: 7rem;
}

.l-header__link {
  display: flex;
  flex-direction: column;
  color: #000;
}

/* 表示中のページは下線 */
.l-header__link[aria-current="page"] {
  border-block-end: 1px solid var(--color-text);
}

.l-header__link-en {
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.8rem;
  font-weight: 500;
  --lh: var(--lh-en-normal);
}

.l-header__link-ja {
  font-size: 1.1rem;
  font-weight: 500;
  --lh: var(--lh-base-normal);
  white-space: nowrap;
}

/* メニュー開閉ボタン（スマートフォンのみ表示） */
.l-header__toggle {
  position: relative;
  z-index: 30;
  display: none;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border-radius: 0.4rem;
  background: none;
}

.l-header__toggle-bar {
  position: absolute;
  width: 2.4rem;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text);
  transition: translate 0.3s, rotate 0.3s;
}

.l-header__toggle-bar:first-child {
  translate: 0 -0.5rem;
}

.l-header__toggle-bar:last-child {
  translate: 0 0.5rem;
}

.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:first-child {
  translate: 0 0;
  rotate: 45deg;
}

.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:last-child {
  translate: 0 0;
  rotate: -45deg;
}

.l-header__contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 18rem;
  padding-block: 1rem;
  padding-inline: 2.3rem;
  border: 1px solid var(--color-main);
  border-radius: 5.7rem;
  color: var(--color-main);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.8rem;
  font-weight: 500;
  --lh: var(--lh-en-normal);
}

.l-header__contact img {
  width: 1.2rem;
  height: 1.2rem;
}

/* ホバーで反転（背景を緑、文字と矢印を白に） */
@media (hover: hover) {
  .l-header__contact {
    transition: background-color 0.3s, color 0.3s;
  }

  .l-header__contact:hover {
    background: var(--color-main);
    color: #fff;
    opacity: 1;
  }

  .l-header__contact img {
    transition: filter 0.3s;
  }

  .l-header__contact:hover img {
    filter: brightness(0) invert(1);
  }
}

/* ==========================================================================
   Layout: Footer
   ========================================================================== */
.l-footer {
  margin-block-start: 11.4rem;
  border-block-start: 1px solid var(--color-gray);
  background: #fff;
}

.l-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  padding-block: 7.5rem 4.6rem;
  padding-inline: 11rem 9.6rem;
}

.l-footer__info {
  min-width: 0;
}

.l-footer__logo {
  display: block;
  width: fit-content;
}

.l-footer__logo img {
  width: 25.8rem;
  height: 7.1rem;
}

.l-footer__message {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-block-start: 3rem;
  --lh: 1.22;
}

.l-footer__message-strong {
  font-weight: 600;
}

.l-footer__address {
  margin-block-start: 3rem;
  --lh: 1.22;
}

.l-footer__copyright {
  display: block;
  margin-block-start: 9rem;
  color: var(--color-gray);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.8rem;
  font-weight: 500;
  --lh: 1.22;
}

.l-footer__nav {
  flex-shrink: 0;
  margin-block-start: 8.6rem;
}

.l-footer__menu {
  display: grid;
  grid-template-columns: repeat(3, 23.6rem);
  gap: 3rem;
}

.l-footer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.9rem;
}

.l-footer__label {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 0.7rem;
  font-weight: 600;
}

.l-footer__label-en {
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.2rem;
  --lh: var(--lh-en-normal);
}

.l-footer__label-ja {
  font-size: 1.8rem;
  --lh: var(--lh-base-normal);
}

.l-footer__arrow {
  width: 2.0833rem;
  height: 2.0833rem;
}

/* ==========================================================================
   Layout: Container（記事・フォームなど 992px 幅のコンテンツ）
   ========================================================================== */
.l-container {
  width: min(100%, 99.2rem);
  margin-inline: auto;
}

/* ==========================================================================
   Component: Button（ABOUT / DETAIL / MORE / 一覧に戻る など）
   ========================================================================== */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 30.6rem;
  height: 5.3rem;
  padding-inline: 2.3rem;
  border-radius: 5.7rem;
  background: var(--gradient-btn);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  --lh: var(--lh-base-normal);
}

.c-btn__icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* ==========================================================================
   Component: Section title（TOP の BUSINESS / COLUMN / NEWS）
   ========================================================================== */
.c-section-title {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 18.7rem;
  margin-inline-start: 14rem;
}

.c-section-title__en {
  color: var(--color-heading);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 5.1rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
}

/* グラデーションは Figma 同様に見出し幅（187px）基準でかける */
.c-section-title__ja {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.5rem;
  font-weight: 600;
  --lh: var(--lh-base-normal);
}

/* ==========================================================================
   Component: Page header（下層ページ上部の写真 + ページタイトル）
   ========================================================================== */
.c-page-header {
  position: relative;
  isolation: isolate;
  height: 60.4rem;
  padding-block-start: 23.1rem;
  padding-inline: 14rem;
  overflow: hidden;
}

/* Figma のマスク（左端 透明 → 右端 不透明 の線形グラデーション）を再現 */
.c-page-header__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
}

.c-page-title {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  width: fit-content;
}

/* 見出し幅（= グラデーションの基準幅）に末尾の字間を含めない */
.c-page-title__en {
  margin-inline-end: -0.04em;
  color: var(--color-heading);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 8rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
}

.c-page-title__ja {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.5rem;
  font-weight: 500;
  --lh: var(--lh-base-normal);
}

/* ==========================================================================
   Component: Tabs（カテゴリ絞り込み / お問い合わせ種別）
   ========================================================================== */
.c-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.c-tabs__link {
  display: grid;
  place-items: center;
  width: 15.4rem;
  height: 5.3rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-main);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--color-main);
  font-size: 1.5rem;
  font-weight: 500;
  --lh: var(--lh-base-normal);
  text-align: center;
}

/* 選択中は枠線なし・グラデーション（サイズを揃えるため枠は透明で残す） */
.c-tabs__link[aria-current="page"] {
  border-color: transparent;
  background: var(--gradient-btn) border-box;
  color: #fff;
}

.c-tabs--wide {
  gap: 4.2rem;
}

.c-tabs--wide .c-tabs__link {
  width: 32.8rem;
}

/* ==========================================================================
   Component: Pagination
   ========================================================================== */
.c-pagination__list {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

:is(.c-pagination__link, .c-pagination__ellipsis) {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  color: var(--color-main);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 2rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
}

.c-pagination__link {
  border: 1px solid var(--color-main);
  border-radius: 0.5rem;
  background: #fff;
}

.c-pagination__link[aria-current="page"] {
  background: var(--color-main);
  color: #fff;
}

.c-pagination__ellipsis {
  width: 3.2rem;
}

/* ==========================================================================
   Component: Column card
   ========================================================================== */
.c-column-card__link {
  display: block;
}

.c-column-card__thumb {
  aspect-ratio: 472 / 264;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* 画像ごとのトリミング位置は Figma のマスク位置から算出（--pos-y） */
.c-column-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--pos-y, 50%);
}

.c-column-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block-start: 1.6rem;
  color: var(--color-gray);
}

.c-column-card__title {
  margin-block-start: 1.6rem;
  font-size: 2.5rem;
  font-weight: 600;
  --lh: 1.36;
}

.c-column-card__text {
  margin-block-start: 2.8rem;
}

/* 小サイズ（記事下のおすすめ）。Figma で 472px のカードを 310.49px に縮小したもの */
.c-column-card--sm .c-column-card__thumb {
  border-radius: 0.3289rem;
}

.c-column-card--sm .c-column-card__meta {
  gap: 0.6578rem;
  margin-block-start: 1.0525rem;
  font-size: 1.384rem;
}

.c-column-card--sm .c-column-card__sep {
  font-size: 1.1841rem;
}

.c-column-card--sm .c-column-card__title {
  margin-block-start: 1.0525rem;
  font-size: 1.6rem;
}

.c-column-card--sm .c-column-card__text {
  margin-block-start: 1.8419rem;
  font-size: 1.5rem;
}

/* ==========================================================================
   Component: Tag（ニュースのカテゴリ）
   ========================================================================== */
/* 文字の行高（34px）がパディング内に収まらないため、上下は中央揃えで配置（Figma同様） */
.c-tag {
  display: grid;
  place-items: center;
  width: fit-content;
  min-width: 14.6rem;
  height: 4.2rem;
  padding-inline: 1rem;
  border-radius: 0.3rem;
  background: var(--color-tag-bg);
  color: var(--color-main);
  white-space: nowrap;
}

/* ==========================================================================
   Component: News list
   ========================================================================== */
.c-news-list {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

/* Figma の罫線は高さ0のため、border 1px 分を余白から引く */
.c-news-list__item:not(:first-child) {
  padding-block-start: calc(3.2rem - 1px);
  border-block-start: 1px solid var(--color-line);
}

.c-news-list__link {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  column-gap: 6rem;
}

/* 日付・カテゴリとタイトルの間の縦線 */
.c-news-list__link::after {
  content: "";
  grid-area: 1 / 2;
  height: 3.55rem;
  background: var(--color-line);
}

.c-news-list__meta {
  display: flex;
  align-items: center;
  gap: 5.7rem;
}

.c-news-list__date {
  color: var(--color-date);
}

.c-news-list__title {
  grid-area: 1 / 3;
  overflow: hidden;
  font-weight: 600;
  --lh: 1.36;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Component: CTA（お問い合わせ / 採用情報）
   ========================================================================== */
.c-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.8rem;
  padding-inline: 11rem;
}

.c-cta__card {
  display: flex;
  align-items: center;
  gap: 6.7rem;
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.4rem 1.015rem rgb(0 0 0 / 0.08);
}

.c-cta__thumb {
  flex-shrink: 0;
  width: 24.5rem;
  height: 32.5rem;
  overflow: hidden;
  border-radius: 0.5rem;
}

.c-cta__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42.5% 50%;
}

.c-cta__body {
  flex: 0 1 37.8rem;
  min-width: 0;
}

.c-cta__icon {
  position: relative;
  width: 4.7rem;
  height: 4.7rem;
  overflow: hidden;
}

.c-cta__icon img {
  position: absolute;
  max-width: none;
}

.c-cta__icon--contact img {
  top: 1.1rem;
  left: 0.3rem;
  width: 4rem;
  height: 2.5859rem;
}

.c-cta__icon--recruit img {
  top: 0.6rem;
  left: 0.3rem;
  width: 4.1rem;
  height: 3.5rem;
}

.c-cta__heading {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-block-start: 1rem;
  font-weight: 600;
}

.c-cta__en {
  width: fit-content;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.7rem;
  --lh: var(--lh-en-normal);
}

.c-cta__title {
  font-size: 2.5rem;
  --lh: var(--lh-base-normal);
}

/* 1728px 未満でカードが縮んだときに、文節の途中で改行しない */
.c-cta__text {
  margin-block-start: 1rem;
  word-break: auto-phrase;
}

.c-cta__more {
  display: block;
  margin-block-start: 3rem;
  color: var(--color-main);
}

/* ==========================================================================
   Component: Heading（記事中見出し・フォーム見出し・おすすめ見出し）
   ========================================================================== */
.c-heading {
  color: var(--color-main);
  font-size: 2.2rem;
  font-weight: 700;
  --lh: 1.87;
}

/* ==========================================================================
   Component: Breadcrumb
   ========================================================================== */
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--color-gray);
  font-size: 1.3rem;
  --lh: 1.87;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "＞";
  margin-inline-end: 0.5rem;
  color: var(--color-gray);
}

.c-breadcrumb__item:last-child {
  color: var(--color-text);
}

/* ==========================================================================
   Component: Article（ニュース詳細 / コラム詳細）
   ========================================================================== */
.c-article__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.7rem;
  border-block-end: 1px solid var(--color-border);
}

.c-article__meta {
  display: flex;
  gap: 1rem;
  color: var(--color-gray);
}

.c-article__title {
  max-width: 98.6rem;
  font-size: 3rem;
  font-weight: 600;
  --lh: 1.36;
}

/* 本文の要素間余白（CMS 出力を想定し、要素の組み合わせで決める） */
.c-article__body > * + * {
  margin-block-start: 2rem;
}

.c-article__body > .c-article__lead + * {
  margin-block-start: 3.6rem;
}

.c-article__body > h2 {
  margin-block-start: 4.4rem;
  color: var(--color-main);
  font-size: 2.2rem;
  font-weight: 700;
  --lh: 1.87;
}

.c-article__body > h2 + * {
  margin-block-start: 1.9rem;
}

.c-article__body > figure {
  margin-block-start: 11rem;
}

.c-article__body > figure + * {
  margin-block-start: 10rem;
}

/* 画像エリア（Figma ではグレーの仮置き） */
.c-article__figure {
  width: min(100%, 79.4rem);
  aspect-ratio: 794 / 407;
  margin-inline: auto;
  background: var(--color-dummy);
}

/* 見出し下の余白：ニュース 36/36、コラム 44/44（区切り線 1px を除く） */
.c-article--news .c-article__header {
  padding-block-end: 3.5rem;
}

.c-article--news .c-article__body {
  margin-block-start: 3.6rem;
}

.c-article--column .c-article__header {
  padding-block-end: 4.3rem;
}

.c-article--column .c-article__body {
  margin-block-start: 4.4rem;
}

/* ==========================================================================
   Component: Related（記事下のおすすめコラム）
   ========================================================================== */
.c-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.026rem;
  margin-block-start: 2.8rem;
}

/* ==========================================================================
   Component: Form
   ========================================================================== */
.c-form {
  width: min(100%, 77.1rem);
  margin-inline: auto;
}

.c-form__fields {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.c-form__label {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  width: fit-content;
}

.c-form__required {
  display: grid;
  place-items: center;
  height: 2rem;
  padding-inline: 1rem;
  border-radius: 0.4rem;
  background: var(--color-required);
  color: #fff;
  font-size: 1.1rem;
  --lh: 1.87;
}

.c-form__control {
  margin-block-start: 0.5rem;
}

/* 入力エラー（デザインには無いが、フォームの動作用に追加） */
.c-form__error {
  margin-block-start: 0.5rem;
  color: var(--color-required);
  font-size: 1.4rem;
  --lh: 1.6;
}

:is(.c-form__input, .c-form__textarea) {
  display: block;
  width: 100%;
  height: 5.3rem;
  padding-block: 1rem;
  padding-inline: 2.3rem;
  border: 1px solid var(--color-input-border);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 500;
  --lh: var(--lh-base-normal);
}

:is(.c-form__input, .c-form__textarea)::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

:is(.c-form__input, .c-form__textarea):focus-visible {
  border-color: var(--color-main);
  outline: 1px solid var(--color-main);
}

.c-form__textarea {
  height: 21.8rem;
  resize: vertical;
}

/* 生年月日（年・月・日） */
.c-form__date {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.c-form__date-item {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  font-size: 1.5rem;
  --lh: var(--lh-base-normal);
}

.c-form__date-item .c-form__input {
  width: 10.7rem;
  text-align: center;
}

/* 新卒 / 中途（ラジオボタンをボタン型で表示） */
.c-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.c-form__choice {
  position: relative;
  display: grid;
  place-items: center;
  width: 17.7rem;
  height: 5.3rem;
  border: 1px solid var(--color-input-border);
  border-radius: 0.6rem;
  background: #fff;
  color: var(--color-placeholder);
  font-size: 1.5rem;
  --lh: var(--lh-base-normal);
  cursor: pointer;
}

.c-form__choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.c-form__choice:has(:checked) {
  border-color: transparent;
  background: var(--gradient-btn) border-box;
  color: #fff;
}

.c-form__choice:has(:focus-visible) {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ==========================================================================
   Project: TOP / KV
   ========================================================================== */
.p-kv {
  position: relative;
}

.p-kv__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 背景は動画素材（Figma の塗りが動画）。マスクは Figma のグラデーション（左下に向かって消える） */
.p-kv__globe {
  position: absolute;
  top: 5.9rem;
  left: -29.2rem;
  width: 121.1rem;
  height: 128.3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(194.05deg, #000 33.54%, transparent 61.64%);
  mask-image: linear-gradient(194.05deg, #000 33.54%, transparent 61.64%);
}

.p-kv__globe video {
  position: absolute;
  top: -0.05%;
  left: -13.293%;
  width: 113.392%;
  max-width: none;
  height: 100.143%;
}

/* 白地の映像のため乗算で重ねる（下の地球儀を隠さない） */
/* 素材は時間とともに濃さが変わるため、Figma の見た目に合わせて濃度を下げる。
   下端はデザイン上そのまま切れるため、徐々に消えるようにしている */
.p-kv__network {
  position: absolute;
  top: 0;
  left: 6rem;
  width: 192.7rem;
  max-width: none;
  height: 108.4rem;
  opacity: 0.3;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.p-kv__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-block-start: 14.9rem;
  padding-inline-end: 5.9rem;
  color: var(--color-heading);
}

/* 右揃えのため、末尾の字間（Figma は幅に含めない）を負のマージンで相殺 */
.p-kv__title {
  margin-inline-end: -0.04em;
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 18rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.p-kv__keywords {
  margin-block-start: -1.4rem;
  margin-inline-end: calc(0.8rem - 0.35em);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 2rem;
  font-weight: 400;
  --lh: 1.36;
  letter-spacing: 0.35em;
  white-space: nowrap;
}

.p-kv__catch {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 64.9rem;
  margin-block-start: 4.08rem;
  margin-inline-end: 2.7rem;
  text-align: right;
}

.p-kv__catch-title {
  font-size: 4.7rem;
  --lh: 1.36;
}

.p-kv__catch-text {
  font-size: 1.9rem;
  --lh: 1.36;
}

.p-kv__scroll {
  position: absolute;
  top: 93.8rem;
  left: 6.5rem;
}

.p-kv__scroll-text {
  display: block;
  writing-mode: vertical-rl;
  background: linear-gradient(to bottom, #2d3133, #9ec36f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 2rem;
  font-weight: 400;
  --lh: 1.36;
}

/* 線と丸は単純な図形のため、書き出し画像ではなく CSS で描く（寸法・色は Figma の値） */
.p-kv__scroll-track {
  position: absolute;
  top: 5.75rem;
  left: 1.0333rem;
  width: 0.5333rem;
  height: 9.3167rem;
}

.p-kv__scroll-track::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.2167rem;
  width: 1px;
  height: 9.05rem;
  background: var(--color-main);
}

/* 丸は1つだけ。線に沿って降り、下端（デザインの定位置）で止まってから次の周期へ */
.p-kv__scroll-track::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5333rem;
  height: 0.5333rem;
  border-radius: 50%;
  background: var(--color-main);
  animation: p-kv-scroll 2.4s cubic-bezier(0.33, 0, 0.15, 1) infinite;
}

@keyframes p-kv-scroll {
  0% {
    translate: 0 0;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  70% {
    translate: 0 8.78rem;
    opacity: 1;
  }

  100% {
    translate: 0 8.78rem;
    opacity: 0;
  }
}

/* 動きを減らす設定では、デザインの定位置（線の下端）に置いたままにする */
@media (prefers-reduced-motion: reduce) {
  .p-kv__scroll-track::after {
    translate: 0 8.78rem;
    animation: none;
  }
}

/* ==========================================================================
   Project: TOP / Mission
   ========================================================================== */
.p-mission {
  position: relative;
  width: min(100%, 59.1rem);
  margin-block-start: 43.4rem;
  margin-inline: auto;
  text-align: center;
}

.p-mission__title {
  font-size: 2.9rem;
  font-weight: 500;
  --lh: 1.36;
}

.p-mission__title em {
  color: var(--color-main);
  font-style: normal;
}

.p-mission__body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-block-start: 5rem;
}

.p-mission__text {
  --lh: 1.22;
}

.p-mission__text--strong {
  font-weight: 600;
}

.p-mission__text--loose {
  --lh: 1.87;
}

/* 本文との間は、見た目でタイトルと本文の間とそろえる（最後の段落は行間が広いぶん 5rem より詰める） */
.p-mission__btn {
  margin-block-start: 4.5rem;
  margin-inline: auto;
}

/* ==========================================================================
   Project: TOP / Panel（BUSINESS + COLUMN を載せる白い角丸パネル）
   ========================================================================== */
.p-panel {
  position: relative;
  margin-block-start: 14.8rem;
  padding-block: 7.1rem 12.7rem;
  border-radius: 10rem;
  background: #fff;
  box-shadow:
    0 0.7rem 1.15rem rgb(0 0 0 / 0.03),
    0 -0.7rem 1.15rem rgb(0 0 0 / 0.03);
}

/* ==========================================================================
   Project: TOP / Business
   ========================================================================== */
.p-business__body {
  display: grid;
  grid-template-columns: 59.9rem minmax(0, 1fr);
  align-items: start;
  column-gap: 8.4rem;
  margin-block-start: 5.6rem;
}

.p-business__visual img {
  width: 59.9rem;
  height: 102.4rem;
  object-fit: cover;
  object-position: 63.93% 0;
}

.p-business__list {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  margin-block-start: 9.8rem;
}

.p-business__item {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.p-business__item:not(:first-child) {
  padding-block-start: 6rem;
  border-block-start: 1px solid var(--color-gray);
}

.p-business__icon {
  position: relative;
  flex-shrink: 0;
  width: 10.1rem;
  height: 10.1rem;
  overflow: hidden;
  border: 1.1rem solid #cbe8e3;
  border-radius: 50%;
  background: #fff;
}

.p-business__icon img {
  position: absolute;
  max-width: none;
}

/* 位置・大きさは枠線の内側（101 - 11×2 = 79px）に対する割合 */
.p-business__icon--purchasing img {
  top: 27.215%;
  left: 13.924%;
  width: 74.013%;
  height: 49.73%;
}

.p-business__icon--sales img {
  top: 24.684%;
  left: 12.658%;
  width: 72.242%;
  height: 54.716%;
}

.p-business__icon--export img {
  top: 22.152%;
  left: 22.785%;
  width: 55.094%;
  height: 56.962%;
}

.p-business__icon--franchise img {
  top: 28.481%;
  left: 12.658%;
  width: 74.933%;
  height: 50.481%;
}

.p-business__content {
  min-width: 0;
}

.p-business__name {
  font-size: 2.5rem;
  font-weight: 600;
  --lh: 1.36;
}

.p-business__en {
  color: var(--color-gray);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-weight: 600;
}

.p-business__btn {
  margin-block-start: 8.4rem;
  margin-inline: auto 10.4rem;
}

/* スライダーの矢印・ドットはスマホだけで使う */
.p-business__arrow,
.p-business__dots {
  display: none;
}

/* ==========================================================================
   Project: TOP / Column
   ========================================================================== */
.p-column {
  margin-block-start: 8.8rem;
}

.p-column__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4.6rem;
  margin-block-start: 7.2rem;
  padding-inline: 11rem;
}

.p-column__btn {
  margin-block-start: 8.2rem;
  margin-inline: auto;
}

/* スライダーの矢印・ドットはスマホだけで使う */
.p-column__arrow,
.p-column__dots {
  display: none;
}

/* ==========================================================================
   Project: TOP / News
   ========================================================================== */
.p-news {
  margin-block: 10.9rem 11.8rem;
}

.p-news__inner {
  display: flex;
  align-items: flex-start;
}

.p-news__inner .c-section-title {
  flex-shrink: 0;
}

/* リストの罫線は画面右端まで伸ばす */
.p-news__list {
  flex: 1;
  min-width: 0;
  margin-block-start: 2.8rem;
  margin-inline-start: 7rem;
}

.p-news__btn {
  margin-block-start: 9.3rem;
  margin-inline: auto;
}

/* ==========================================================================
   Project: コラム一覧
   ========================================================================== */
.p-column-archive {
  margin-block-end: 10rem;
}

.p-column-archive__tabs {
  margin-block-start: 5.9rem;
  padding-inline: 11rem;
}

.p-column-archive__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5rem 4.6rem;
  margin-block-start: 6.4rem;
  padding-inline: 11rem;
}

.p-column-archive__pagination {
  margin-block-start: 8.4rem;
}

/* ==========================================================================
   Project: コラム詳細
   ========================================================================== */
.p-column-detail {
  margin-block: 19.5rem 11rem;
}

.p-column-detail__hero {
  height: 38rem;
}

.p-column-detail__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50.33%;
}

.p-column-detail__article {
  margin-block-start: 12.9rem;
}

.p-column-detail__back {
  margin-block-start: 7.9rem;
  margin-inline: auto;
}

.p-column-detail__related {
  margin-block-start: 23.3rem;
}

/* ==========================================================================
   Project: ニュース一覧
   ========================================================================== */
.p-news-archive {
  margin-block-end: 15rem;
}

.p-news-archive__tabs {
  justify-content: center;
  margin-block-start: 9.8rem;
}

/* 罫線は Figma どおり左 305px・右 16px の位置まで */
.p-news-archive__list {
  margin-block-start: 9.8rem;
  padding-inline: 30.5rem 1.6rem;
}

.p-news-archive__pagination {
  margin-block-start: 8.8rem;
}

/* ==========================================================================
   Project: ニュース詳細
   ========================================================================== */
.p-news-detail {
  margin-block-end: 14.7rem;
  padding-block-start: 18.1rem;
}

.p-news-detail__article {
  margin-block-start: 3.6rem;
}

.p-news-detail__back {
  margin-block-start: 8.8rem;
  margin-inline: auto;
}

/* ==========================================================================
   Project: お問い合わせ
   ========================================================================== */
.p-contact {
  margin-block-end: 6.9rem;
}

.p-contact__tabs {
  justify-content: center;
  margin-block-start: 8.1rem;
}

.p-contact__inner {
  margin-block-start: 8.1rem;
}

.p-contact__heading {
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.p-contact__form {
  margin-block-start: 4.6rem;
}

.p-contact__submit {
  margin-block-start: 6.9rem;
  margin-inline: auto;
}

/* 採用フォームは Figma 上の余白が通常フォームと異なる */
.p-contact--recruit {
  margin-block-end: 8.1rem;
}

.p-contact--recruit .p-contact__submit {
  margin-block-start: 7.2rem;
}

/* ==========================================================================
   Project: お問い合わせ完了
   ========================================================================== */
.p-thanks {
  margin-block-end: 14.7rem;
  padding-block-start: 24.1rem;
  text-align: center;
}

/* Figma では見出しの枠が 986px（本文 992px と左揃え）のため、その幅で中央揃え */
.p-thanks__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.7rem;
  max-width: 98.6rem;
}

/* Figma: Big Shoulders Text SC（小文字がスモールキャピタル → .u-sc で再現）
   中央揃えのため、末尾の字間（0.32rem + 0.64rem）を負のマージンで相殺 */
.p-thanks__en {
  --sc-ls: calc(0.32rem + 0.1em);
  margin-inline-end: -0.96rem;
  color: var(--color-main);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 8rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
}

.p-thanks__ja {
  font-size: 3rem;
  font-weight: 600;
  --lh: 1.36;
}

.p-thanks__text {
  margin-block-start: 8.4rem;
}

.p-thanks__btn {
  margin-block-start: 8.4rem;
  margin-inline: auto;
}

/* ==========================================================================
   Component: Definition list（会社概要の項目）
   ========================================================================== */
/* 項目名を左、内容を右に置き、行ごとに線で区切る表の形 */
.c-def-list {
  --def-term-width: 17rem;
  border-block-start: 1px solid var(--color-gray);
}

.c-def-list > div {
  display: grid;
  grid-template-columns: var(--def-term-width) minmax(0, 1fr);
  border-block-end: 1px solid var(--color-gray);
}

/* 項目名と内容の間の縦線は、行の高さいっぱいに引く */
.c-def-list__term {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding-block: 2rem;
  padding-inline: 0.4rem 2rem;
  border-inline-end: 1px solid var(--color-gray);
  font-weight: 600;
}

.c-def-list__term-ja {
  font-size: 1.5rem;
  --lh: var(--lh-base-normal);
}

.c-def-list__term-en {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.3rem;
  --lh: var(--lh-base-normal);
}

.c-def-list__desc {
  align-self: center;
  padding-block: 2rem;
  padding-inline-start: 2.4rem;
}

.c-def-list__desc--ceo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.8rem;
}

.c-def-list__role {
  font-size: 1.5rem;
  font-weight: 600;
  --lh: var(--lh-base-normal);
}

.c-def-list__name {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.c-def-list__name-en {
  color: #989898;
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.3rem;
  font-weight: 600;
  --lh: var(--lh-base-normal);
}

/* ==========================================================================
   Project: 会社概要
   ========================================================================== */
/* 背景の装飾（TOP の KV と同じ映像を左右反転して配置） */
.p-company__deco {
  position: absolute;
  top: 80.2rem;
  left: 90.6rem;
  z-index: -1;
  width: 121.1rem;
  height: 128.3rem;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(165.95deg, #000 33.54%, transparent 61.64%);
  mask-image: linear-gradient(165.95deg, #000 33.54%, transparent 61.64%);
}

.p-company__deco video {
  position: absolute;
  top: -0.05%;
  left: -0.097%;
  width: 113.392%;
  max-width: none;
  height: 100.143%;
  scale: -1 1;
}

.p-company-mission {
  margin-block-start: 7.3rem;
}

.p-company-mission__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: fit-content;
  margin-inline: auto;
}

/* Figma の行の高さは 34px（30 × 1.15 = 34.5 の端数切り捨て） */
.p-company-mission__en {
  margin-inline-end: -0.04em;
  color: var(--color-main);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 3rem;
  font-weight: 500;
  line-height: 3.4rem;
  letter-spacing: 0.04em;
}

.p-company-mission__ja {
  color: var(--color-heading);
  font-size: 6.7rem;
  font-weight: 500;
  --lh: 1.36;
}

.p-company-mission__body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-block-start: 18.7rem;
  padding-inline-start: 13.4rem;
  font-size: 2.5rem;
  --lh: 2;
}

.p-company-mission__body p:last-child {
  max-width: 61.2rem;
}

.p-company-mission__text--strong {
  font-weight: 600;
}

.p-company-ceo {
  margin-block-start: 38rem;
  padding-inline: 13.4rem;
}

.p-company-ceo__heading {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 18.7rem;
}

.p-company-ceo__heading-en {
  color: var(--color-heading);
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 3.4rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
}

.p-company-ceo__heading-ja {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.6rem;
  font-weight: 600;
  --lh: var(--lh-base-normal);
}

.p-company-ceo__body {
  display: grid;
  grid-template-columns: 36.9rem minmax(0, 1fr);
  column-gap: 4.1rem;
  margin-block-start: 5rem;
  padding-inline-start: 2.7rem;
}

.p-company-ceo__photo {
  width: 36.9rem;
  height: 49.9rem;
  object-fit: cover;
}

.p-company-ceo__title {
  font-size: 2.7rem;
  font-weight: 600;
  --lh: 2;
}

/* 段落間は Figma の空行1行ぶん（19px × 2） */
.p-company-ceo__text {
  display: flex;
  flex-direction: column;
  gap: 3.8rem;
  margin-block-start: 2.4rem;
  font-size: 1.9rem;
  font-weight: 400;
  --lh: 2;
}

.p-company-ceo__text strong {
  font-weight: 600;
}

.p-company-ceo__sign {
  width: 39.7rem;
  height: 11.5rem;
  margin-block-start: 4rem;
  margin-inline-start: auto;
  object-fit: cover;
}

.p-company-outline {
  margin-block: 11.4rem 10.1rem;
  padding-block-start: 10.9rem;
  padding-inline: clamp(6rem, 10vw, 17.9rem);
  border-radius: 10rem 10rem 0 0;
  background: #fff;
  box-shadow: 0 -0.7rem 1.15rem rgb(0 0 0 / 0.03);
}

/* 右の表が入るよう、地図はデザイン（784px）より小さくし、表は最低 48rem 確保する */
.p-company-outline__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(48rem, 1fr);
  align-items: start;
  column-gap: 6rem;
}

/* Google マップの埋め込み枠（デザインでは仮置きのグレー枠） */
.p-company-outline__map {
  height: 40rem;
  overflow: hidden;
  background: var(--color-dummy);
}

.p-company-outline__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-company-outline__list {
  font-size: 1.6rem;
}

/* ==========================================================================
   Project: 事業内容
   ========================================================================== */
.p-business-nav {
  display: grid;
  grid-template-columns: repeat(4, 32.7rem);
  justify-content: center;
  gap: 2.3rem;
  margin-block-start: 3.8rem;
}

.p-business-nav__card {
  display: block;
  height: 18.9rem;
  border: 1px solid #f2f2f2;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 0.4rem 0.4rem rgb(0 0 0 / 0.12);
  text-align: center;
}

.p-business-nav__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap, 1.2rem);
  height: 2.86rem;
  margin-block-start: 3.3rem; /* カードの枠線 1px 分を引く */
}

.p-business-nav__icon {
  width: var(--icon-w);
  height: var(--icon-h);
}

.p-business-nav__name {
  font-size: 1.6rem;
  font-weight: 600;
  --lh: 1.36;
}

.p-business-nav__text {
  display: block;
  width: 25.3rem;
  margin-block-start: 1.34rem;
  margin-inline: auto;
  font-size: 1.4rem;
  --lh: 1.87;
}

.p-business-nav__arrow {
  width: 4.6rem;
  height: 1.5rem;
  margin-block-start: 3rem;
  margin-inline: auto;
}

/* スライダーの矢印・ドットはスマホのみ */
.p-business-nav-slider__arrow,
.p-business-nav-slider__dots {
  display: none;
}

/* 事業紹介（写真の上に半透明の緑パネルを重ねる） */
.p-business-detail {
  position: relative;
  height: 53rem;
  margin-block-start: 11.4rem;
}

.p-business-detail + .p-business-detail {
  margin-block-start: 13rem;
}

.p-business-detail__photo {
  position: absolute;
  top: 0;
  width: 102.9rem;
  height: 47.4rem;
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
}

/* 表示位置は Figma のマスク位置（--x / --y）をそのまま指定 */
.p-business-detail__photo img {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  max-width: none;
  height: var(--h);
}

.p-business-detail__panel {
  position: absolute;
  top: 9rem;
  width: 96rem;
  height: 44rem;
  background: rgb(52 177 87 / 0.8);
  color: #fff;
}

.p-business-detail__num {
  position: absolute;
  top: 3.2rem;
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 7.5rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
}

.p-business-detail__title {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.p-business-detail__name {
  font-size: 1.9rem;
  font-weight: 600;
  --lh: var(--lh-base-normal);
}

.p-business-detail__en {
  font-family: var(--ff-en);
  font-variation-settings: "opsz" 10;
  font-size: 1.5rem;
  font-weight: 500;
  --lh: 1.15;
  letter-spacing: 0.04em;
}

.p-business-detail__text {
  position: absolute;
  width: 69rem;
  font-size: 1.7rem;
  --lh: 2.2;
}

/* 写真が右・パネルが左 */
.p-business-detail--right .p-business-detail__photo {
  left: 69.9rem;
}

.p-business-detail--right .p-business-detail__panel {
  left: 0;
}

.p-business-detail--right .p-business-detail__num {
  left: 87.1rem;
}

.p-business-detail--right .p-business-detail__title {
  top: 11.8rem;
  left: 22.3rem;
}

.p-business-detail--right .p-business-detail__text {
  top: 17.5rem;
  left: 22.3rem;
}

/* 写真が左・パネルが右 */
.p-business-detail--left .p-business-detail__photo {
  left: 0;
}

.p-business-detail--left .p-business-detail__panel {
  left: 76.8rem;
}

.p-business-detail--left .p-business-detail__num {
  left: 4.6rem;
}

.p-business-detail--left .p-business-detail__title {
  top: 13.2rem;
  left: 4.8rem;
}

.p-business-detail--left .p-business-detail__text {
  top: 18.9rem;
  left: 4.8rem;
}

.p-business-details {
  margin-block-end: 13rem;
}

/* ==========================================================================
   Utility
   ========================================================================== */
/* スモールキャピタル（Figma: Big Shoulders Text SC の小文字部分）
   代替の Big Shoulders には SC 字形がないため、大文字を 80% の大きさで表示し、
   SC 字形の幅の広さを字間で補う（Figma の文字幅と一致するよう実測で調整） */
.u-sc {
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: var(--sc-ls, 0.08em);
}

/* スマートフォンでだけ改行する */
.u-br-sp {
  display: none;
}

@media (max-width: 767px) {
  .u-br-sp {
    display: inline;
  }
}

/* PCでだけ改行する */
@media (max-width: 767px) {
  .u-br-pc {
    display: none;
  }
}

/* 視覚的に隠す（読み上げには残す） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Responsive
   1199px 以下：タブレット / 767px 以下：スマートフォン
   文字サイズは vw を使わず、ブレイクポイントごとに固定値で指定する
   ========================================================================== */
@media (max-width: 1199px) {
  html {
    /* 固定ヘッダーに隠れないようにアンカー位置をずらす */
    scroll-padding-block-start: 7.6rem;
  }

  /* 狭い画面では日本語を文節で折り返す */
  .p-mission__text,
  .p-business__text,
  .c-column-card__text,
  .c-news-list__title,
  .c-article__body,
  .p-company-mission__body,
  .p-company-ceo__text,
  .p-business-detail__text,
  .p-business-nav__text,
  .p-thanks__text {
    word-break: auto-phrase;
  }

  /* Header */
  .l-header__inner {
    padding-block: 2rem;
    padding-inline: 3rem;
  }

  .l-header__logo img {
    width: 13.2rem;
    height: 3.6rem;
  }

  .l-header__nav {
    gap: 2.4rem;
  }

  .l-header__menu {
    grid-template-columns: repeat(5, auto);
    column-gap: 2.4rem;
  }

  .l-header__link-en {
    font-size: 1.5rem;
  }

  .l-header__link-ja {
    font-size: 1rem;
  }

  .l-header__contact {
    width: 13.6rem;
    padding-block: 0.8rem;
    padding-inline: 1.6rem;
    font-size: 1.5rem;
  }

  /* Footer */
  .l-footer {
    margin-block-start: 8rem;
  }

  .l-footer__inner {
    flex-direction: column;
    gap: 4rem;
    padding-block: 5rem 4rem;
    padding-inline: 3rem;
  }

  .l-footer__logo img {
    width: 20rem;
    height: 5.5rem;
  }

  .l-footer__copyright {
    margin-block-start: 4rem;
  }

  .l-footer__nav {
    margin-block-start: 0;
  }

  .l-footer__menu {
    grid-template-columns: repeat(2, minmax(0, 23.6rem));
  }

  /* 共通パーツ */
  .l-container {
    padding-inline: 3rem;
  }

  .c-btn {
    width: min(100%, 30.6rem);
  }

  .c-page-header {
    height: 38rem;
    padding-block-start: 14rem;
    padding-inline: 3rem;
  }

  .c-page-title {
    gap: 1.2rem;
  }

  .c-page-title__en {
    font-size: 5.6rem;
  }

  .c-page-title__ja {
    font-size: 2rem;
  }

  .c-section-title {
    width: auto;
    margin-inline-start: 3rem;
  }

  .c-section-title__en {
    font-size: 4rem;
  }

  .c-section-title__ja {
    font-size: 2rem;
  }

  .c-tabs {
    gap: 1.2rem;
  }

  .c-tabs__link {
    width: 14rem;
    height: 4.6rem;
    font-size: 1.4rem;
  }

  .c-tabs--wide .c-tabs__link {
    width: 24rem;
  }

  .c-pagination__list {
    flex-wrap: wrap;
  }

  .c-column-card__title {
    font-size: 2.2rem;
  }

  .c-column-card__text {
    margin-block-start: 1.6rem;
    font-size: 1.6rem;
  }

  .c-news-list__link {
    column-gap: 3rem;
  }

  .c-news-list__meta {
    gap: 2.4rem;
  }

  .c-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
    padding-inline: 3rem;
  }

  .c-cta__card {
    gap: 3rem;
  }

  .c-cta__thumb {
    width: 20rem;
    height: 26rem;
  }

  .c-cta__body {
    flex: 1 1 auto;
  }

  .c-article__title {
    font-size: 2.6rem;
  }

  .c-article__body {
    font-size: 1.6rem;
  }

  .c-related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
  }

  .c-form {
    width: 100%;
  }

  /* TOP */
  .p-kv__body {
    padding-block-start: 12rem;
    padding-inline: 3rem;
  }

  .p-kv__title {
    font-size: 9.6rem;
  }

  .p-kv__keywords {
    margin-block-start: -0.8rem;
    margin-inline-end: calc(0.4rem - 0.25em);
    font-size: 1.5rem;
    letter-spacing: 0.25em;
  }

  .p-kv__catch {
    width: min(100%, 52rem);
    gap: 1.6rem;
    margin-block-start: 3rem;
    margin-inline-end: 0;
  }

  .p-kv__catch-title {
    font-size: 3.4rem;
  }

  .p-kv__catch-text {
    font-size: 1.6rem;
  }

  .p-kv__globe {
    top: 4rem;
    left: -18rem;
    width: 82rem;
    height: 86.9rem;
  }

  .p-kv__network {
    left: 3rem;
    width: 130rem;
    height: 73.1rem;
  }

  .p-kv__scroll {
    top: 58rem;
    left: 2rem;
  }

  .p-mission {
    margin-block-start: 24rem;
  }

  .p-mission__title {
    font-size: 2.6rem;
  }

  .p-mission__body {
    margin-block-start: 3rem;
  }

  .p-mission__btn {
    margin-block-start: 3rem;
  }

  .p-panel {
    margin-block-start: 10rem;
    padding-block: 5rem 8rem;
    border-radius: 5rem;
  }

  /* 画像はPCと同じく左上を基準に、テキストの背景として敷く */
  .p-business__body {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: 4rem;
  }

  .p-business__visual {
    position: absolute;
    top: 0;
    /* PC と同じく、輪の左側が画面外に少し隠れるように寄せる */
    left: -6rem;
    z-index: 0;
    width: min(86%, 54rem);
    opacity: 0.55;
    pointer-events: none;
  }

  .p-business__visual img {
    width: 100%;
    height: auto;
  }

  .p-business__list {
    position: relative;
    z-index: 1;
    gap: 4rem;
    margin-block-start: 0;
    padding-inline: 3rem;
  }

  /* スマホではさらに左へ寄せて大きく見せる */
  @media (max-width: 767px) {
    .p-business__visual {
      left: -10rem;
      width: min(130%, 52rem);
    }
  }

  .p-business__item:not(:first-child) {
    padding-block-start: 4rem;
  }

  .p-business__name {
    font-size: 2.2rem;
  }

  .p-business__text {
    font-size: 1.6rem;
  }

  /* 背景の輪の画像（z-index: 0）がボタンまで届くので、ボタンを手前に出す */
  .p-business__btn {
    position: relative;
    z-index: 1;
    margin-block-start: 4rem;
    margin-inline: auto;
  }

  .p-column {
    margin-block-start: 6rem;
  }

  .p-column__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem 3rem;
    margin-block-start: 4rem;
    padding-inline: 3rem;
  }

  .p-column__btn {
    margin-block-start: 4rem;
  }

  .p-news {
    margin-block: 8rem;
  }

  .p-news__inner {
    flex-direction: column;
  }

  .p-news__list {
    width: 100%;
    margin-block-start: 3rem;
    margin-inline-start: 0;
    padding-inline: 3rem;
  }

  .p-news__btn {
    margin-block-start: 4rem;
  }

  /* 会社概要 */
  .p-company__deco {
    top: 56rem;
    left: 34rem;
    width: 72rem;
    height: 76.3rem;
  }

  .p-company-mission {
    margin-block-start: 6rem;
  }

  .p-company-mission__heading {
    gap: 1.2rem;
    padding-inline: 3rem;
  }

  .p-company-mission__en {
    font-size: 2.2rem;
    line-height: 2.6rem;
  }

  .p-company-mission__ja {
    font-size: 4rem;
  }

  .p-company-mission__body {
    gap: 2rem;
    margin-block-start: 8rem;
    padding-inline: 3rem;
    font-size: 1.8rem;
  }

  .p-company-mission__body p:last-child {
    max-width: none;
  }

  .p-company-ceo {
    margin-block-start: 12rem;
    padding-inline: 3rem;
  }

  .p-company-ceo__heading-en {
    font-size: 2.8rem;
  }

  .p-company-ceo__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    margin-block-start: 3rem;
    padding-inline-start: 0;
  }

  .p-company-ceo__photo {
    width: min(100%, 36.9rem);
    height: 44rem;
  }

  .p-company-ceo__title {
    font-size: 2.2rem;
  }

  .p-company-ceo__text {
    gap: 2.4rem;
    font-size: 1.6rem;
  }

  .p-company-ceo__sign {
    width: 28rem;
    height: 8.1rem;
    margin-block-start: 3rem;
  }

  .p-company-outline {
    margin-block: 8rem 6rem;
    padding-block-start: 6rem;
    padding-inline: 3rem;
    border-radius: 4rem 4rem 0 0;
  }

  .p-company-outline__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4rem;
  }

  .p-company-outline__map {
    height: 36rem;
  }

  .p-company-outline__list {
    margin-block-start: 0;
  }

  /* 事業内容 */
  .p-business-nav {
    grid-template-columns: repeat(2, minmax(0, 32.7rem));
    gap: 2rem;
    margin-block-start: 3rem;
    padding-inline: 3rem;
  }

  .p-business-details {
    margin-block-end: 8rem;
  }

  .p-business-detail {
    height: auto;
    margin-block-start: 8rem;
  }

  .p-business-detail + .p-business-detail {
    margin-block-start: 8rem;
  }

  .p-business-detail--right .p-business-detail__photo,
  .p-business-detail--left .p-business-detail__photo {
    position: static;
    width: 100%;
    height: 30rem;
    border-radius: 0;
  }

  .p-business-detail__photo img {
    position: static;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .p-business-detail--right .p-business-detail__panel,
  .p-business-detail--left .p-business-detail__panel {
    position: static;
    width: min(100% - 6rem, 76rem);
    height: auto;
    margin-block-start: -4rem;
    margin-inline: auto;
    padding: 3rem;
  }

  .p-business-detail--right .p-business-detail__num,
  .p-business-detail--left .p-business-detail__num,
  .p-business-detail--right .p-business-detail__title,
  .p-business-detail--left .p-business-detail__title,
  .p-business-detail--right .p-business-detail__text,
  .p-business-detail--left .p-business-detail__text {
    position: static;
    width: auto;
  }

  .p-business-detail__num {
    font-size: 5.6rem;
  }

  .p-business-detail__title {
    margin-block-start: 0.8rem;
  }

  .p-business-detail__text {
    margin-block-start: 2rem;
    font-size: 1.5rem;
    --lh: 2;
  }

  /* 一覧・詳細 */
  .p-column-archive {
    margin-block-end: 8rem;
  }

  .p-column-archive__tabs {
    margin-block-start: 4rem;
    padding-inline: 3rem;
  }

  .p-column-archive__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem 3rem;
    margin-block-start: 4rem;
    padding-inline: 3rem;
  }

  .p-column-archive__pagination {
    margin-block-start: 6rem;
  }

  .p-column-detail {
    margin-block: 12rem 6rem;
  }

  .p-column-detail__hero {
    height: 26rem;
  }

  .p-column-detail__article {
    margin-block-start: 6rem;
  }

  .p-column-detail__back {
    margin-block-start: 5rem;
  }

  .p-column-detail__related {
    margin-block-start: 10rem;
  }

  .p-news-archive {
    margin-block-end: 8rem;
  }

  .p-news-archive__tabs {
    margin-block-start: 4rem;
    padding-inline: 3rem;
  }

  .p-news-archive__list {
    margin-block-start: 4rem;
    padding-inline: 3rem;
  }

  .p-news-archive__pagination {
    margin-block-start: 6rem;
  }

  .p-news-detail {
    margin-block-end: 8rem;
    padding-block-start: 14rem;
  }

  .p-news-detail__back {
    margin-block-start: 5rem;
  }

  /* お問い合わせ */
  .p-contact {
    margin-block-end: 6rem;
  }

  .p-contact--recruit {
    margin-block-end: 6rem;
  }

  .p-contact__tabs {
    margin-block-start: 4rem;
    padding-inline: 3rem;
  }

  .p-contact__inner {
    margin-block-start: 5rem;
  }

  .p-contact__form {
    margin-block-start: 3rem;
  }

  .p-contact__submit,
  .p-contact--recruit .p-contact__submit {
    margin-block-start: 4rem;
  }

  /* 送信完了 */
  .p-thanks {
    margin-block-end: 8rem;
    padding-block-start: 16rem;
  }

  .p-thanks__en {
    font-size: 5.6rem;
  }

  .p-thanks__ja {
    font-size: 2.2rem;
  }

  .p-thanks__text {
    margin-block-start: 5rem;
    font-size: 1.6rem;
  }

  .p-thanks__btn {
    margin-block-start: 5rem;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 1.6rem;
  }

  /* Header：ハンバーガーメニュー */
  .l-header__inner {
    padding-block: 1.6rem;
    padding-inline: 2rem;
  }

  .l-header__logo img {
    width: 11.6rem;
    height: 3.2rem;
  }

  .l-header__toggle {
    display: grid;
  }

  /* body の overflow-x: clip により、はみ出しを含む幅が基準になるため画面幅を明示する */
  .l-header__nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100vw;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
    padding: 8rem 3rem;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
  }

  body.is-nav-open .l-header__nav {
    visibility: visible;
    opacity: 1;
  }

  body.is-nav-open {
    overflow: hidden;
  }

  .l-header__menu {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.8rem;
    text-align: center;
  }

  .l-header__link {
    align-items: center;
  }

  .l-header__link-en {
    font-size: 2rem;
  }

  .l-header__link-ja {
    font-size: 1.2rem;
  }

  .l-header__contact {
    width: min(100%, 24rem);
    margin-inline: auto;
    padding-block: 1.2rem;
    font-size: 1.6rem;
  }

  /* Footer（スマホではメニューを出さず、ロゴと文字を小さくしてコンパクトにする） */
  .l-footer__inner {
    padding-block: 4rem 3rem;
    padding-inline: 2rem;
  }

  .l-footer__logo img {
    width: 16rem;
    height: 4.4rem;
  }

  .l-footer__message {
    gap: 0.8rem;
    margin-block-start: 2rem;
  }

  .l-footer__message,
  .l-footer__address {
    font-size: 1.3rem;
  }

  .l-footer__address {
    margin-block-start: 2rem;
  }

  .l-footer__copyright {
    margin-block-start: 3rem;
    font-size: 1.2rem;
  }

  .l-footer__nav {
    display: none;
  }

  /* 共通パーツ */
  .l-container {
    padding-inline: 2rem;
  }

  .c-page-header {
    height: 26rem;
    padding-block-start: 10rem;
    padding-inline: 2rem;
  }

  .c-page-title__en {
    font-size: 4rem;
  }

  .c-page-title__ja {
    font-size: 1.6rem;
  }

  .c-section-title {
    margin-inline-start: 2rem;
  }

  .c-section-title__en {
    font-size: 3.2rem;
  }

  .c-section-title__ja {
    font-size: 1.8rem;
  }

  .c-tabs {
    gap: 1rem;
  }

  .c-tabs__link,
  .c-tabs--wide .c-tabs__link {
    width: auto;
    min-width: 12rem;
    height: 4.2rem;
    padding-inline: 1.6rem;
    font-size: 1.3rem;
  }

  .c-heading {
    font-size: 1.9rem;
  }

  .c-column-card__meta {
    font-size: 1.4rem;
  }

  .c-column-card__title {
    font-size: 2rem;
  }

  .c-column-card__text {
    font-size: 1.5rem;
  }

  /* ニュース一覧：日付・カテゴリとタイトルを縦に積む */
  .c-news-list__link {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.8rem;
  }

  .c-news-list__link::after {
    display: none;
  }

  .c-news-list__meta {
    gap: 1.6rem;
    font-size: 1.4rem;
  }

  .c-news-list__title {
    grid-area: auto;
    overflow: visible;
    font-size: 1.6rem;
    white-space: normal;
  }

  .c-tag {
    min-width: 11rem;
    height: 3.4rem;
    font-size: 1.4rem;
  }

  /* 写真を外して2枚を横に並べる */
  .c-cta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    padding-inline: 2rem;
  }

  .c-cta__card {
    flex-direction: column;
    align-items: stretch;
    padding: 2.2rem 1.6rem;
  }

  .c-cta__thumb {
    display: none;
  }

  /* 本文の長さが違っても「フォームはこちら」の高さをそろえる */
  .c-cta__body {
    display: flex;
    flex-direction: column;
  }

  .c-cta__title {
    font-size: 2rem;
  }

  .c-cta__text {
    font-size: 1.4rem;
  }

  /* カードが狭いので固定の改行は外し、文節で折り返す */
  .c-cta__text br {
    display: none;
  }

  .c-cta__more {
    margin-block-start: auto;
    padding-block-start: 2.4rem;
    font-size: 1.5rem;
  }

  .c-breadcrumb__list {
    font-size: 1.2rem;
  }

  .c-article__title {
    font-size: 2.2rem;
  }

  .c-article__body {
    font-size: 1.5rem;
  }

  .c-article__body > h2 {
    font-size: 1.9rem;
  }

  .c-related__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  /* c-column-card--sm は縮小版のため、スマホでは通常サイズに戻す */
  .c-column-card--sm .c-column-card__meta {
    gap: 1rem;
    margin-block-start: 1.4rem;
    font-size: 1.4rem;
  }

  .c-column-card--sm .c-column-card__sep {
    font-size: 1.2rem;
  }

  .c-column-card--sm .c-column-card__title {
    margin-block-start: 1.4rem;
    font-size: 2rem;
  }

  .c-column-card--sm .c-column-card__text {
    margin-block-start: 1.6rem;
    font-size: 1.5rem;
  }

  /* フォーム */
  .c-form__label {
    font-size: 1.5rem;
  }

  .c-form__date {
    gap: 1.2rem;
  }

  .c-form__date-item .c-form__input {
    width: 8.4rem;
  }

  .c-form__choices {
    gap: 1.6rem;
  }

  .c-form__choice {
    width: 14rem;
  }

  /* TOP */
  .p-kv__body {
    padding-block-start: 10rem;
    padding-inline: 2rem;
  }

  .p-kv__title {
    font-size: 4.6rem;
  }

  .p-kv__keywords {
    margin-block-start: -0.4rem;
    margin-inline-end: calc(0.2rem - 0.15em);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
  }

  .p-kv__catch {
    gap: 1.2rem;
    margin-block-start: 2.4rem;
  }

  .p-kv__catch-title {
    font-size: 2.4rem;
  }

  .p-kv__catch-text {
    font-size: 1.3rem;
  }

  /* 見出しに重ならず、下のミッション文にもはみ出さない大きさに収める */
  .p-kv__globe {
    top: 15rem;
    left: -11rem;
    width: 33.1rem;
    height: 35.1rem;
    opacity: 0.8;
  }

  .p-kv__network {
    left: 0;
    width: 60rem;
    height: 33.8rem;
  }

  .p-kv__scroll {
    top: 26rem;
    left: 1.2rem;
  }

  .p-kv__scroll-text {
    font-size: 1.4rem;
  }

  .p-mission {
    margin-block-start: 13rem;
    padding-inline: 2rem;
  }

  .p-mission__title {
    font-size: 1.9rem;
  }

  .p-mission__body {
    gap: 1.8rem;
    margin-block-start: 2rem;
  }

  .p-mission__text {
    font-size: 1.4rem;
  }

  .p-mission__text--loose {
    --lh: 1.6;
  }

  .p-panel {
    margin-block-start: 8rem;
    padding-block: 4rem 6rem;
    border-radius: 3rem;
  }

  .p-business__visual img {
    height: auto;
  }

  .p-business__list {
    gap: 3rem;
    padding-inline: 2rem;
  }

  .p-business__item {
    gap: 1.6rem;
  }

  .p-business__item:not(:first-child) {
    padding-block-start: 3rem;
  }

  .p-business__icon {
    width: 7rem;
    height: 7rem;
    border-width: 0.76rem;
  }

  .p-business__name {
    font-size: 1.9rem;
  }

  .p-business__en {
    font-size: 1.4rem;
  }

  .p-business__text {
    font-size: 1.5rem;
  }

  /* 1件ずつ横にスライドさせる（TOPの縦の長さを1事業分に抑える） */
  .p-business__slider {
    position: relative;
  }

  .p-business__list {
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    gap: 0;
    padding-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .p-business__list::-webkit-scrollbar {
    display: none;
  }

  /* 左右に矢印を置く分だけ内側に寄せる */
  .p-business__item {
    margin-inline: 3.2rem;
    scroll-margin-inline: 3.2rem;
    scroll-snap-align: start;
  }

  /* 1件ずつ表示するので区切り線は不要 */
  .p-business__item:not(:first-child) {
    padding-block-start: 0;
    border-block-start: 0;
  }

  .p-business__arrow,
  .p-business-nav-slider__arrow {
    position: absolute;
    inset-block: 0 3.9rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 4.4rem;
    margin-block: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .p-business__arrow:disabled,
  .p-business-nav-slider__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .p-business__arrow--prev,
  .p-business-nav-slider__arrow--prev {
    left: 0;
  }

  .p-business__arrow--prev img,
  .p-business-nav-slider__arrow--prev img {
    scale: -1 1;
  }

  .p-business__arrow--next,
  .p-business-nav-slider__arrow--next {
    right: 0;
  }

  .p-business__dots {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-block-start: 2.4rem;
  }

  .p-business__dot {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
  }

  .p-business__dot[aria-current="true"] {
    background: #898989;
  }

  .p-column-archive__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 4rem;
    padding-inline: 2rem;
  }

  /* TOP のコラムは最新3件を1件ずつ横にスライドさせる */
  .p-column__slider {
    position: relative;
  }

  .p-column__list {
    grid-template-columns: none;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    gap: 0;
    padding-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .p-column__list::-webkit-scrollbar {
    display: none;
  }

  /* 左右に矢印を置く分だけ内側に寄せる（事業内容のスライダーとそろえる） */
  .p-column__list .c-column-card {
    margin-inline: 3.2rem;
    scroll-margin-inline: 3.2rem;
    scroll-snap-align: start;
  }

  /* 矢印はサムネイルの高さの中央に置く（カード幅 × 264/472 の半分） */
  .p-column__arrow {
    position: absolute;
    top: calc((100vw - 6.4rem) * 264 / 472 / 2 - 2.2rem);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 4.4rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  .p-column__arrow:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .p-column__arrow--prev {
    left: 0;
  }

  .p-column__arrow--prev img {
    scale: -1 1;
  }

  .p-column__arrow--next {
    right: 0;
  }

  .p-column__dots {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-block-start: 2.4rem;
  }

  .p-column__dot {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
  }

  .p-column__dot[aria-current="true"] {
    background: #898989;
  }

  .p-news__list,
  .p-news-archive__list,
  .p-column-archive__tabs,
  .p-news-archive__tabs,
  .p-business-nav {
    padding-inline: 2rem;
  }

  /* 事業ナビは1件ずつの横スライダーにする（影が切れないよう上下に余白を取る） */
  .p-business-nav {
    grid-template-columns: none;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    justify-content: start;
    gap: 0;
    padding-block: 0.4rem 1rem;
    padding-inline: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .p-business-nav::-webkit-scrollbar {
    display: none;
  }

  /* 両脇に矢印を置くぶん、TOP のスライダーと同じだけ内側に寄せる */
  .p-business-nav-slider {
    position: relative;
  }

  .p-business-nav-slider__arrow {
    inset-block: 0.4rem 3.9rem; /* カードの高さの中央に置く（上の余白とドットのぶんを除く） */
  }

  .p-business-nav__card {
    margin-inline: 3.2rem;
    scroll-margin-inline: 3.2rem;
    scroll-snap-align: start;
  }

  .p-business-nav-slider__dots {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-block-start: 1.4rem;
  }

  .p-business-nav-slider__dot {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
  }

  .p-business-nav-slider__dot[aria-current="true"] {
    background: #898989;
  }

  /* 会社概要 */
  .p-company__deco {
    display: none;
  }

  /* TOP のミッション文とそろえてコンパクトにする */
  .p-company-mission {
    margin-block-start: 4rem;
  }

  .p-company-mission__heading {
    gap: 0.8rem;
  }

  .p-company-mission__en {
    font-size: 1.5rem;
    line-height: 1.8rem;
  }

  .p-company-mission__ja {
    font-size: 1.9rem;
  }

  .p-company-mission__body {
    gap: 1.8rem;
    margin-block-start: 2.4rem;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 2rem;
    font-size: 1.4rem;
    --lh: 1.8;
  }

  .p-company-ceo {
    margin-block-start: 8rem;
    padding-inline: 2rem;
  }

  .p-company-ceo__heading-en {
    font-size: 2.4rem;
  }

  .p-company-ceo__photo {
    justify-self: center;
    height: 36rem;
  }

  .p-company-ceo__title {
    font-size: 1.9rem;
    text-align: center;
  }

  .p-company-ceo__text {
    font-size: 1.5rem;
  }

  .p-company-ceo__sign {
    width: 22rem;
    height: 6.4rem;
    margin-inline-end: 2rem;
  }

  .p-company-outline {
    padding-inline: 2rem;
  }

  /* スマホでは地図を出さない（遅延読み込みなので地図自体も読み込まれない） */
  .p-company-outline__map {
    display: none;
  }

  /* 表は PC と同じ形のまま、項目名の列を細くして内容の幅を確保する */
  .p-company-outline__list {
    --def-term-width: 11rem;
    font-size: 1.4rem;
  }

  .c-def-list__term {
    padding-block: 1.6rem;
    padding-inline-end: 1.2rem;
  }

  .c-def-list__term-ja {
    font-size: 1.4rem;
  }

  .c-def-list__term-en {
    font-size: 1.1rem;
  }

  .c-def-list__desc {
    padding-block: 1.6rem;
    padding-inline-start: 1.4rem;
  }

  .c-def-list__role {
    font-size: 1.4rem;
  }

  .c-def-list__name-en {
    font-size: 1.1rem;
  }

  /* 事業内容 */
  .p-business-detail--right .p-business-detail__photo,
  .p-business-detail--left .p-business-detail__photo {
    height: 22rem;
  }

  .p-business-detail--right .p-business-detail__panel,
  .p-business-detail--left .p-business-detail__panel {
    width: min(100% - 4rem, 60rem);
    margin-block-start: -3rem;
    padding: 2.4rem 2rem;
  }

  .p-business-detail__num {
    font-size: 4.4rem;
  }

  .p-business-detail__name {
    font-size: 1.7rem;
  }

  .p-business-detail__text {
    font-size: 1.4rem;
  }

  /* 詳細ページ */
  .p-column-detail {
    margin-block: 10rem 5rem;
  }

  .p-column-detail__hero {
    height: 20rem;
  }

  .p-news-detail {
    padding-block-start: 12rem;
  }

  /* 送信完了 */
  .p-thanks {
    padding-block-start: 14rem;
  }

  .p-thanks__en {
    font-size: 4.2rem;
  }

  .p-thanks__ja {
    font-size: 1.8rem;
  }

  .p-thanks__text {
    font-size: 1.5rem;
  }
}