/* ==========================================================================
   MV (ABOUT KITOMI)
   ========================================================================== */

.about-mv {
  position: relative;
  height: 575px;
  border-bottom: 1px solid var(--color-gray-100);
  overflow: hidden;
}

.about-mv__logo {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 3;
}

.about-mv__title {
  position: absolute;
  top: 260px;
  left: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 2;
}

.about-mv__title-en {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 64px;
  letter-spacing: 2.56px;
  line-height: 1;
  color: var(--color-black);
}

.about-mv__title-jp {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.8px;
  color: var(--color-black);
}

.about-mv__blob {
  z-index: 0;
}

.about-mv__blob--1 {
  /* 440x360 green at right top */
  top: -80px;
  right: 0;
  width: 440px;
  height: 360px;
}

.about-mv__blob--2 {
  /* 280x229 at left=750 top=310 */
  top: 310px;
  left: 750px;
  width: 280px;
  height: 229px;
}

.about-mv__blob--3 {
  /* 160x131 rotated, left=-60, top=380 */
  top: 380px;
  left: -60px;
  width: 160px;
  height: 131px;
  transform: rotate(180deg);
}

.about-mv__blob--4 {
  /* 80x65 rotated, left=590, top=510 */
  top: 510px;
  left: 590px;
  width: 80px;
  height: 65px;
  transform: rotate(180deg);
}

/* ==========================================================================
   Lead
   ========================================================================== */

.about-lead {
  position: relative;
  padding: 90px 0 100px;
}

.about-lead__inner {
  position: relative;
  max-width: var(--content-inner);
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  /* テキスト左・シンボル右の2カラム（タブレットまで維持、767px以下で縦積み） */
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.about-lead__body {
  flex: 1 1 0;
  min-width: 0;
}

.about-lead__catch {
  font-weight: 700;
  font-size: 40px;
  line-height: 60px;
  letter-spacing: 1.6px;
  color: var(--color-black);
  margin-bottom: 30px;
}

.about-lead__text {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.32px;
  color: var(--color-black);
}

/* キーワード強調（赤字） */
.em-red {
  color: var(--color-red);
  font-weight: 700;
}

.about-lead__symbol {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 300px);
  height: auto;
  pointer-events: none;
}

/* ==========================================================================
   Greeting
   ========================================================================== */

.greeting {
  position: relative;
  padding: 0;
  min-height: 1430px;
  overflow: hidden;
}

.greeting__bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 1260px;
  width: 1200px;
  background-color: var(--color-gray-200);
  border-top-left-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  z-index: 0;
}

.greeting__photo {
  position: absolute;
  top: 120px;
  left: 0;
  width: 680px;
  height: 680px;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  overflow: hidden;
  z-index: 1;
}

.greeting__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.greeting__title {
  position: absolute;
  top: 130px;
  left: 760px;
  width: 480px;
  z-index: 2;
}

.greeting__title .section-title__jp {
  font-size: 32px;
  line-height: 50px;
}

.greeting__body {
  position: absolute;
  top: 385px;
  left: 760px;
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 2;
}

.greeting__body p {
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.32px;
  color: var(--color-black);
  margin: 0;
}

.greeting__profile {
  position: absolute;
  top: 840px;
  left: 120px;
  width: 560px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 2;
}

.greeting__name {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  font-family: var(--font-jp);
  font-weight: 500;
}

.greeting__role {
  font-size: 16px;
  letter-spacing: 0.32px;
}

.greeting__person {
  font-size: 24px;
  letter-spacing: 0.48px;
  position: relative;
  top: 2px;
}

.greeting__bio {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.28px;
  color: var(--color-black);
}

.greeting__books {
  position: absolute;
  top: 1140px;
  left: 50%;
  transform: translateX(calc(-50% - 40px));
  display: flex;
  gap: 40px;
  z-index: 2;
}

.greeting__books img {
  width: 160px;
  height: 227px;
  object-fit: contain;
}

/* ==========================================================================
   Strength
   ========================================================================== */

.strength {
  position: relative;
  padding: 80px 0 120px;
  overflow: hidden;
}

.strength__title {
  padding: 0 0 0 120px;
  position: relative;
  z-index: 2;
}

.strength__lead {
  padding: 44px 0 0 120px;
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 0.4px;
  color: var(--color-black);
  position: relative;
  z-index: 2;
}

.strength__bg {
  position: absolute;
  /* タイトルもベージュ背景の上にのせる */
  top: 0;
  left: 0;
  width: 1200px;
  /* 内容の高さに追従させ、画像がベージュ背景からはみ出さないように */
  bottom: 80px;
  background-color: var(--color-beige);
  border-top-right-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  z-index: 0;
}

.strength-item {
  position: relative;
  display: flex;
  /* 画像と文章を上揃え（中央揃えだと高さ差で余白が不自然になるため） */
  align-items: flex-start;
  z-index: 2;
}

.strength-item--01 {
  padding-top: 24px;
  padding-left: clamp(32px, 8vw, 120px);
  gap: clamp(32px, 6vw, 100px);
}

.strength-item--02 {
  padding-top: 60px;
  gap: clamp(32px, 7vw, 120px);
}

.strength-item__txt {
  position: relative;
  /* 文章は残り幅（画像40%・文章60%）。min-width:0 で潰れすぎ防止 */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.strength-item__num {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 64px;
  color: var(--color-orange);
  line-height: 1;
  margin: 0;
}

.strength-item__title {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.4;
  letter-spacing: 0.72px;
  color: var(--color-black);
  margin-bottom: 10px;
}

.strength-item__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.strength-item__body p {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.32px;
  color: var(--color-black);
  margin: 0;
}

.strength-item__img {
  /* 画像は幅40%。広い画面で縦に伸びすぎないよう最大560pxで制限 */
  flex: 0 0 40%;
  width: 40%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 560 / 720;
  overflow: hidden;
}

.strength-item--01 .strength-item__img {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.strength-item--02 .strength-item__img {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.strength-item__img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.strength-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Outlook (NEXT ACTION)
   ========================================================================== */

.outlook {
  position: relative;
  padding: 220px 0 120px;
  overflow: hidden;
}

.outlook__deco-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.outlook__deco-track {
  display: inline-flex;
  white-space: nowrap;
  animation: outlookMarquee 30s linear infinite;
  will-change: transform;
}

.outlook__deco-item {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 204px;
  line-height: 1;
  color: var(--color-gray-200);
  letter-spacing: -2px;
  margin-right: 80px;
}

@keyframes outlookMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.outlook__title {
  position: relative;
  padding-left: 120px;
  margin-bottom: 30px;
  z-index: 2;
}

.outlook__diagram {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto 80px;
  z-index: 2;
}

.outlook__diagram img {
  width: 960px;
  height: 348px;
  object-fit: contain;
}

.outlook__intro {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 0 var(--section-padding-x);
  max-width: 1340px;
  margin: 0 auto;
  z-index: 2;
}

.outlook__intro p {
  width: 530px;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.32px;
  color: var(--color-black);
  margin: 0;
}

/* ==========================================================================
   I/O Cards (Input / Output)
   ========================================================================== */

.io-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(60px, 8vw, 100px) var(--section-padding-x);
  border-top-left-radius: var(--radius-xl);
  overflow: hidden;
}

.io-card--input {
  background-color: var(--color-tint-green);
}

.io-card--output {
  background-color: var(--color-tint-orange);
}

.io-card__img {
  /* 画像は幅40%・正方形 */
  flex: 0 0 40%;
  width: 40%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.io-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.io-card__txt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.io-card__title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.io-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.32px;
  color: var(--color-white);
}

.io-card__label--input {
  background-color: var(--color-green);
}

.io-card__label--output {
  background-color: var(--color-red);
}

.io-card__title {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.4;
  letter-spacing: 0.72px;
  color: var(--color-black);
}

.io-card__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.io-card__body p {
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.875;
  letter-spacing: 0.32px;
  color: var(--color-black);
  margin: 0;
}

/* ==========================================================================
   Summary
   ========================================================================== */

.summary {
  position: relative;
  padding: 110px 0 220px;
  overflow: hidden;
}

.summary__deco {
  position: absolute;
  top: 60px;
  left: 170px;
  width: 460px;
  height: 520px;
  z-index: 0;
  pointer-events: none;
}

.summary__txt {
  position: relative;
  padding-left: clamp(32px, 12vw, 180px);
  /* 右側の写真2枚に文章がかぶらないよう幅を制限 */
  width: auto;
  max-width: 50%;
  z-index: 2;
}

.summary__catch {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.45;
  letter-spacing: 1.92px;
  color: var(--color-black);
  margin-bottom: 30px;
}

.summary__body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.summary__body p {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.32px;
  color: var(--color-black);
  margin: 0;
}

.summary__photos {
  position: absolute;
  top: -20px;
  right: clamp(24px, 5vw, 100px);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 100%;
  z-index: 1;
}

.summary__photo {
  width: clamp(150px, 17vw, 240px);
  height: clamp(260px, 28vw, 400px);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.summary__photo--1 {
  margin-bottom: 100px;
}

.summary__photo--2 {
  margin-bottom: 0;
}

.summary__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Company Info & History
   ========================================================================== */

.company {
  border-top: 1px solid var(--color-gray-100);
  padding: 120px var(--section-padding-x) 100px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.company__block {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.company__heading {
  flex: 0 0 280px;
  width: 280px;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.64px;
  color: var(--color-black);
  padding-top: 40px;
}

.company__table {
  flex: 1;
  width: 800px;
  border-top: 1px solid var(--color-gray-300);
}

.company__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-gray-300);
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.32px;
}

.company__row dt {
  flex: 0 0 160px;
  width: 160px;
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}

.company__row dd {
  flex: 1;
  width: 640px;
  font-weight: 400;
  color: var(--color-black);
}

.company__note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.24px;
}

.company__list {
  list-style: disc;
  padding-left: 24px;
  margin: 0;
}

.company__list li {
  font-weight: 400;
  line-height: 30px;
}

/* ==========================================================================
   Greeting: PC絶対配置は十分広い時のみ。1340px以下は縦積みに切替
   （固定left:760/width:480が中間幅で右にはみ出し overflow:hidden で切れるため）
   ========================================================================== */

@media (max-width: 1340px) {
  /* SP/タブレット: タイトル→本文→写真→所長→書籍 の流れ（縦積み） */
  .greeting {
    padding: 80px 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
  }
  .greeting__bg {
    width: 100%;
    border-radius: 0;
    height: auto;
    top: 0;
    /* 本画像の中央あたりまでグレー背景をかける（途中で切れないように） */
    bottom: 160px;
  }
  .greeting__photo {
    order: 3;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    margin: 0 auto 32px;
  }
  .greeting__title,
  .greeting__body,
  .greeting__profile,
  .greeting__books {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(32px, 6vw, 120px);
  }
  .greeting__title { order: 1; }
  .greeting__body { order: 2; }
  .greeting__profile { order: 4; }
  .greeting__books { order: 5; }
  .greeting__title {
    margin-bottom: 24px;
    text-align: center;
  }
  /* 強制改行を解除し幅に応じて自然に折り返す（約2行に） */
  .greeting__title .section-title__jp br {
    display: none;
  }
  .greeting__body {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .greeting__profile {
    margin-bottom: 40px;
  }
  .greeting__books {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
}

/* ==========================================================================
   Responsive: Tablet (max 1023px)
   ========================================================================== */

@media (max-width: 1023px) {
  /* MV */
  .about-mv {
    height: auto;
    min-height: 480px;
    padding: 120px 32px 60px;
  }

  .about-mv__logo {
    top: 24px;
    left: 24px;
  }

  .about-mv__title {
    position: relative;
    top: auto;
    left: auto;
  }

  .about-mv__title-en {
    font-size: 48px;
    letter-spacing: 1.5px;
  }

  /* Lead */
  .about-lead {
    padding: 60px 0;
  }

  .about-lead__inner {
    padding: 0 32px;
  }

  .about-lead__catch {
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 1px;
  }

  /* タブレットは2カラム維持（シンボル右）。縦積みは767px以下のみ */

  /* Greeting */
  .greeting {
    padding: 80px 0;
    min-height: auto;
  }

  .greeting__bg {
    width: 100%;
    border-radius: 0;
  }

  .greeting__photo {
    position: relative;
    top: auto;
    left: auto;
    /* 横長になり顔が拡大・崩れるのを防ぐため正方形・中央寄せに */
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    margin: 0 auto 32px;
  }

  .greeting__title,
  .greeting__body,
  .greeting__profile,
  .greeting__books {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    padding: 0 32px;
  }

  .greeting__title {
    margin-bottom: 24px;
  }

  /* SP/タブレットでは強制改行を解除し、幅に応じて自然に折り返す（約2行に） */
  .greeting__title .section-title__jp br {
    display: none;
  }

  .greeting__body {
    margin-bottom: 40px;
  }

  .greeting__profile {
    margin-bottom: 40px;
  }

  .greeting__books {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }

  /* Strength */
  .strength {
    padding: 80px 0 120px;
  }

  .strength__title,
  .strength__lead {
    padding: 0 32px;
  }

  .strength__bg {
    width: 100%;
    top: 0;
    border-radius: 0;
  }

  /* strength-item は 768px まで横並び維持（縦積みは max-width:768px で実施） */

  /* Outlook */
  .outlook {
    padding: 100px 0 80px;
  }

  /* font-size は実際にサイズが効く deco-item に指定（deco-textだと縮小されず被る） */
  .outlook__deco-item {
    font-size: 80px;
  }

  .outlook__title {
    padding-left: 32px;
  }

  .outlook__diagram img {
    width: 100%;
    height: auto;
    max-width: 600px;
  }

  .outlook__intro {
    flex-direction: column;
    gap: 24px;
    padding: 0 32px;
  }

  .outlook__intro p {
    width: 100%;
  }

  /* I/O Cards は 768px まで横並び維持（縦積みは max-width:768px で実施） */

  /* Summary */
  /* タブレットもSP同様: 写真を上(交互)→見出し中央→本文、日本地図は背景 */
  .summary {
    padding: 60px 0 80px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .summary__deco {
    display: block;
    position: absolute;
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 470px;
    max-width: 90%;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }

  .summary__txt {
    padding: 0 32px;
    width: 100%;
    max-width: none;
    text-align: center;
    order: 2;
    margin-top: 32px;
    position: relative;
    z-index: 1;
  }

  .summary__catch {
    font-size: 32px;
    line-height: 1.4;
    white-space: normal;
  }

  .summary__body {
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
  }

  .summary__photos {
    position: relative;
    right: auto;
    top: auto;
    flex-direction: row;
    margin: 0 32px;
    height: auto;
    gap: 16px;
    order: 1;
    align-items: flex-start;
    justify-content: center;
  }

  .summary__photo {
    width: 45%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 240/400;
  }

  .summary__photo--1 {
    margin-bottom: 0;
  }

  .summary__photo--2 {
    margin-top: 50px;
  }

  /* Company */
  .company {
    padding: 80px 32px;
    gap: 60px;
  }

  .company__block {
    flex-direction: column;
    gap: 24px;
  }

  .company__heading {
    flex: 0 0 auto;
    width: 100%;
    padding-top: 0;
  }

  .company__table {
    width: 100%;
  }

  .company__row {
    flex-direction: column;
    gap: 8px;
    padding: 24px 0;
  }

  .company__row dt {
    flex: 0 0 auto;
    width: 100%;
  }

  .company__row dd {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ==========================================================================
   Responsive: 横並び→縦積み切替（768px以下）
   画像＋文章のセクションは 768px 以下で画像上・文章下の縦積みにする
   ========================================================================== */

@media (max-width: 768px) {
  .strength-item {
    flex-direction: column;
  }
  .strength-item--01,
  .strength-item--02 {
    gap: 32px;
  }
  .strength-item--01 .strength-item__txt,
  .strength-item--02 .strength-item__txt {
    margin-top: 0;
  }
  .strength-item__img,
  .strength-item__txt {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .strength-item__img {
    aspect-ratio: 1 / 1;
  }

  .io-card {
    flex-direction: column;
    align-items: stretch;
  }
  .io-card__img,
  .io-card__txt {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
}

/* ==========================================================================
   Responsive: Mobile (max 767px)
   ========================================================================== */

@media (max-width: 767px) {
  /* ===== MV (Figma 99:824) ===== */
  .about-mv {
    min-height: auto;
    padding: 0;
  }

  .about-mv__logo {
    top: 14px;
    left: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .about-mv__logo .site-logo__img {
    width: 180px;
    height: auto;
  }

  .about-mv__logo .site-logo__sub {
    font-size: 11px;
  }

  .about-mv__title {
    padding: 140px 20px 70px;
    gap: 10px;
  }

  /* SP: .about-mv の overflow を解除して blob を下まで表示 */
  .about-mv {
    overflow: visible;
  }

  .about-mv__title-en {
    font-size: 36px;
    letter-spacing: 1.5px;
  }

  .about-mv__title-jp {
    font-size: 16px;
  }

  .about-mv__blob--1 {
    top: 30px;
    left: auto;
    right: -86px;
    width: 210px;
    height: 170px;
    transform: none;
  }

  .about-mv__blob--2 {
    top: 240px;
    left: 188px;
    width: 100px;
    height: 82px;
    transform: none;
  }

  .about-mv__blob--3 {
    /* オレンジ: 一番左寄り、180度回転 */
    top: 230px;
    left: 0;
    width: 80px;
    height: 65px;
    transform: rotate(180deg);
  }

  .about-mv__blob--4 {
    display: none;
  }

  /* ===== Lead: シンボルを上に・中央寄せ ===== */
  .about-lead {
    padding: 60px 0;
  }

  .about-lead__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }

  .about-lead__symbol {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    width: 160px;
    height: auto;
    margin: 0 auto 20px;
  }

  .about-lead__catch {
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 0.96px;
    margin-bottom: 20px;
  }

  .about-lead__text {
    font-size: 14px;
    line-height: 26px;
    text-align: left;
    align-self: stretch;
    letter-spacing: 0.08em;
  }

  /* ===== 共通: SPセクションタイトル中央寄せ + EN/JP の gap 削除 + 下に 30px ===== */
  .greeting__title,
  .strength__title,
  .outlook__title {
    align-items: center;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    gap: 0;
    margin-bottom: 30px;
  }

  .greeting__title .section-title__jp,
  .strength__title .section-title__jp,
  .outlook__title .section-title__jp {
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 0.96px;
  }

  /* ===== Greeting: 順序 タイトル→本文→写真→プロフィール→書籍 ===== */
  .greeting {
    display: flex;
    flex-direction: column;
    padding: 56px 0 64px;
  }

  .greeting__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1780px;
  }

  .greeting__title { order: 1; margin-bottom: 30px; }
  .greeting__body { order: 2; margin-bottom: 28px; }
  .greeting__photo { order: 3; }
  .greeting__profile { order: 4; }
  .greeting__books { order: 5; }

  .greeting__photo {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 20px 28px;
    border-radius: var(--radius-md);
  }

  .greeting__body,
  .greeting__profile,
  .greeting__books {
    padding-left: 20px;
    padding-right: 20px;
  }

  .greeting__body p {
    font-size: 14px;
    line-height: 26px;
  }

  .greeting__profile {
    margin-bottom: 28px;
  }

  .greeting__bio {
    font-size: 13px;
    line-height: 24px;
  }

  .greeting__books {
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between;
  }

  .greeting__books img {
    width: calc(25% - 8px);
    height: auto;
  }

  /* ===== Strength ===== */
  .strength {
    padding: 56px 0 80px;
  }

  .strength__bg {
    top: 0;
  }

  .strength__lead {
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px;
  }

  /* Figma SP: STRENGTH タイトル EN は 13px / Outfit Medium / line-height 100% */
  .strength__title .section-title__en {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
  }

  /* Figma SP: STRENGTH タイトル JP は Noto Sans JP Bold 24 / 40 / 2 */
  .strength__title .section-title__jp {
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 2px;
  }

  .strength-item {
    padding: 0 0 48px !important;
    gap: 20px !important;
  }

  .strength-item--01 .strength-item__img {
    order: -1;
  }

  .strength-item__img {
    max-width: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0 !important;
    margin: 0;
  }

  .strength-item__txt {
    max-width: none;
    width: 100%;
    padding: 0 20px;
  }

  .strength-item__num {
    font-size: 48px;
    line-height: 1.06;
    display: block;
    margin-bottom: 0;
  }

  /* Figma SP: 各 strength の小見出しも Sec-Title--JP に揃える */
  .strength-item__title {
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 2px;
    margin-top: -20px;
  }

  .strength-item__body p {
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0;
  }

  /* ===== Outlook ===== */
  .outlook {
    /* deco-text (NEXT / ACTION 2 行 ≈ 200px) を避けて title 以降を下に */
    padding: 250px 0 56px;
    margin-top: 20px;
  }

  .outlook__deco-text {
    position: absolute;
    text-align: center;
  }

  /* font-size は deco-item に指定（実サイズが効く要素） */
  .outlook__deco-item {
    font-size: 96px;
  }

  /* SP: マーキー停止 + NEXT / ACTION で 2 行に */
  .outlook__deco-track {
    animation: none;
    white-space: normal;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 0.95;
  }

  .outlook__deco-item {
    font-size: inherit;
    letter-spacing: -2px;
    margin-right: 0;
  }

  /* 2 つ目の NEXT ACTION は重複なので非表示 */
  .outlook__deco-item + .outlook__deco-item {
    display: none;
  }

  .outlook__intro {
    padding: 0 20px;
  }

  .outlook__intro p {
    font-size: 14px;
    line-height: 26px;
  }

  /* SP: outlook__diagram img の左右に 30px の余白 */
  .outlook__diagram img {
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
  }

  /* ===== I/O cards (Figma SP 95:2364 / 95:2374) ===== */
  .io-card {
    /* Figma: 内側の frame が (20, 40)→ section padding-top 40px で画像の上にも背景を見せる */
    padding: 40px 20px 48px !important;
    /* img(350) → 30px gap → txt block */
    gap: 30px !important;
  }

  /* SP の緑背景は 950px に固定 */
  .io-card--input {
    height: 950px;
  }

  /* 出力（オレンジ）を緑の上に 60px 重ねて表示 */
  .io-card--output {
    margin-top: -60px;
    position: relative;
    z-index: 1;
    /* 下の余白を 48 → 68px に */
    padding-bottom: 68px !important;
  }

  .io-card__img {
    max-width: none;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .io-card__txt {
    max-width: none;
    width: 100%;
    /* .io-card に 20px の左右 padding が入ったので個別 padding は削除 */
    padding: 0;
    align-items: center;
    text-align: center;
    /* title-block(77px) → 20px gap → body */
    gap: 20px;
  }

  .io-card__title-block {
    align-items: center;
    /* label(27px) → 10px gap → main title */
    gap: 10px;
  }

  /* Figma SP Sec-Title--JP: 24/40/letter-spacing 2 */
  .io-card__title {
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 2px;
  }

  .io-card__body {
    text-align: left;
  }

  .io-card__body p {
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 0;
  }

  /* ===== Summary ===== */
  .summary {
    padding: 56px 0 64px;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* 日本地図はタイトル＋本文の背景として配置 */
  .summary__deco {
    display: block;
    position: absolute;
    top: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    /* 内在寸法を持たない SVG のため幅と高さを明示 */
    width: 320px;
    height: 360px;
    max-width: 90%;
    /* SVG 自体が #F0F3F6（薄いグレー）なので opacity は外す。
       不可視になっていた原因は opacity 0.4 + 薄いグレーで透明寄りになっていた。 */
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }

  .summary__txt {
    padding: 0 20px;
    text-align: center;
    order: 2;
    margin-top: 32px;
    position: relative;
    z-index: 1;
  }

  .summary__catch {
    font-size: 24px;
    line-height: 1.6;
    white-space: normal;
    margin-top: 30px;
  }

  .summary__body {
    text-align: left;
  }

  .summary__body p {
    font-size: 14px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }

  /* 段落間に 24px の空白 */
  .summary__body p + p {
    margin-top: 24px;
  }

  .summary__photos {
    margin: 0 20px;
    gap: 16px;
    order: 1;
    align-items: flex-start;
  }

  /* 右の写真（--2）を 50px 下に */
  .summary__photo--2 {
    margin-top: 50px;
  }

  /* ===== Company ===== */
  .company {
    padding: 56px 20px !important;
    gap: 40px;
  }

  .company__heading {
    font-size: 22px;
  }

  .company__row {
    padding: 24px 0;
  }

  .company__row dt {
    font-size: 16px;
    font-weight: 700;
  }

  .company__row dd {
    font-size: 14px;
    line-height: 26px;
  }

  .company__note {
    font-size: 12px;
  }
}

/* =========================================================
   スクロール表示アニメーション（IntersectionObserver で .is-revealed 付与）
   ========================================================= */

/* about-lead: ふわっと（動きなしフェードインのみ） */
.about-lead__catch,
.about-lead__text,
.about-lead__symbol {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.about-lead.is-revealed .about-lead__catch {
  opacity: 1;
  transition-delay: 0.1s;
}
.about-lead.is-revealed .about-lead__text {
  opacity: 1;
  transition-delay: 0.3s;
}
.about-lead.is-revealed .about-lead__symbol {
  opacity: 1;
  transition-delay: 0.5s;
}

/* greeting: 右から行ごとに順番にスライドイン */
.greeting__photo,
.greeting__title,
.greeting__body p,
.greeting__profile {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
/* books は中央寄せの transform を持つため、transform は触らずフェードインのみ */
.greeting__books {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.greeting.is-revealed .greeting__photo {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}
.greeting.is-revealed .greeting__title {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.greeting.is-revealed .greeting__body p {
  opacity: 1;
  transform: none;
}
.greeting.is-revealed .greeting__body p:nth-child(1) { transition-delay: 0.35s; }
.greeting.is-revealed .greeting__body p:nth-child(2) { transition-delay: 0.55s; }
.greeting.is-revealed .greeting__body p:nth-child(3) { transition-delay: 0.75s; }
.greeting.is-revealed .greeting__body p:nth-child(4) { transition-delay: 0.95s; }
.greeting.is-revealed .greeting__body p:nth-child(5) { transition-delay: 1.15s; }
.greeting.is-revealed .greeting__body p:nth-child(6) { transition-delay: 1.35s; }
.greeting.is-revealed .greeting__profile {
  opacity: 1;
  transform: none;
  transition-delay: 1.55s;
}
.greeting.is-revealed .greeting__books {
  opacity: 1;
  transition-delay: 1.7s;
}

/* strength タイトル・リード: ふわっと（動きなしフェードインのみ） */
.strength__title,
.strength__lead {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.strength.is-revealed .strength__title {
  opacity: 1;
  transition-delay: 0.1s;
}
.strength.is-revealed .strength__lead {
  opacity: 1;
  transition-delay: 0.3s;
}

/* strength-item 01: 文章＋画像まとめて右からスライド */
.strength-item--01 {
  opacity: 0;
  transform: translateX(90px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.strength-item--01.is-revealed {
  opacity: 1;
  transform: none;
}

/* strength-item 02: 文章＋画像まとめて左からスライド */
.strength-item--02 {
  opacity: 0;
  transform: translateX(-90px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.strength-item--02.is-revealed {
  opacity: 1;
  transform: none;
}

/* outlook: ふわっと（動きなしフェードインのみ） */
.outlook__title,
.outlook__diagram,
.outlook__intro {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.outlook.is-revealed .outlook__title {
  opacity: 1;
  transition-delay: 0.1s;
}
.outlook.is-revealed .outlook__diagram {
  opacity: 1;
  transition-delay: 0.3s;
}
.outlook.is-revealed .outlook__intro {
  opacity: 1;
  transition-delay: 0.5s;
}

/* io-card（入力／出力）: 全体を左からスライドイン */
.io-card--input,
.io-card--output {
  opacity: 0;
  transform: translateX(-90px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.io-card--input.is-revealed,
.io-card--output.is-revealed {
  opacity: 1;
  transform: none;
}

/* summary 写真: 左から0.5秒間隔でフェードイン（動きなし） */
.summary__photo {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.summary.is-revealed .summary__photo--1 {
  opacity: 1;
  transition-delay: 0.1s;
}
.summary.is-revealed .summary__photo--2 {
  opacity: 1;
  transition-delay: 0.6s;
}

/* 会社概要・沿革: 行ごとに右から0.5秒差でスライドイン（ブロック単位） */
.company__heading,
.company__row {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.company__block.is-revealed .company__heading {
  opacity: 1;
  transform: none;
}
.company__block.is-revealed .company__row {
  opacity: 1;
  transform: none;
}
.company__block.is-revealed .company__row:nth-child(1) { transition-delay: 0.3s; }
.company__block.is-revealed .company__row:nth-child(2) { transition-delay: 0.6s; }
.company__block.is-revealed .company__row:nth-child(3) { transition-delay: 0.9s; }
.company__block.is-revealed .company__row:nth-child(4) { transition-delay: 1.2s; }
.company__block.is-revealed .company__row:nth-child(5) { transition-delay: 1.5s; }