@charset "utf-8";

/* ========================================
   ITCSS Layer: Settings - CSS Variables (Tokens)
   ======================================== */
@layer settings {
  :root {
    /* === Fonts === */
    --font-primary: "Noto Sans JP", sans-serif;
    --font-secondary: "Nunito Sans", sans-serif;
    --font-display: "Oswald", sans-serif;

    /* === Colors === */
    --color-bg: #ffffff;
    --color-fg: #111111;
    --color-primary: #1a3168; /* ネイビー：メインカラー */
    --color-accent-green: #008ca5; /* グリーン：サブカラー */
    --color-accent-yellow: #fdd34e; /* イエロー：アクセントカラー */
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-bg-section: #f8f9fa;
    --color-white: #ffffff;
    --color-black: #111111;

    /* === Spacing (px) === */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* === Typography (rem) === */
    --font-xs: 0.75rem; /* 12px */
    --font-sm: 0.875rem; /* 14px */
    --font-base: 1rem; /* 16px */
    --font-lg: 1.125rem; /* 18px */
    --font-xl: 1.25rem; /* 20px */
    --font-2xl: 1.5rem; /* 24px */
    --font-3xl: 1.875rem; /* 30px */
    --font-4xl: 2.25rem; /* 36px */
    --font-5xl: 3rem; /* 48px */
    --font-6xl: 3.75rem; /* 60px */

    /* === Line Heights === */
    --line-none: 1;
    --line-tight: 1.25;
    --line-snug: 1.375;
    --line-normal: 1.5;
    --line-relaxed: 1.625;
    --line-loose: 2;

    /* === Border Radius (px) === */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-2xl: 8px;
    --radius-3xl: 10px;
    --radius-full: 4px;

    /* === Shadows === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

    /* === Animation === */
    --easing-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;

    /* === Z-Index Scale === */
    --z-base: 0;
    --z-sticky: 100;
    --z-dropdown: 300;
    --z-overlay: 600;
    --z-modal: 900;
    --z-toast: 1000;

    /* === Breakpoints === */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* === Layout (px) === */
    --header-height: 60px;
    --logo-width: 200px;
    --button-height: 40px;
    --button-padding: 12px 24px;
    --border-width: 1px;
    --icon-small: 16px;
    --icon-medium: 24px;
    --icon-large: 32px;

    /* === Container Widths (px) === */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1536px;
    --container-full: 1920px;

    /* === Section Widths (px) === */
    --section-max-width-normal: 1536px;
    --section-max-width-wide: 1920px;
    --section-max-width-thin: 1004.8px;

    /* === Page Specific (px) === */
    --case-container-width: 1200px;
    --cta-container-width: 1000px;
    --cta-padding: 20px;

    /* === Header Specific (px) === */
    --header-gap: 27px;
    --header-padding-left: 18px;
    --header-nav-gap: 26px;
    --header-nav-font-size: 13px;
    --header-contact-width: 150px;
    --header-contact-gap: 3px;
    --header-close-dummy-width: 10px;
    --header-close-dummy-right: 150px;
    --header-contact-font-size: 11px;
    --button-width: 180px;
    --button-mobile-width: 15.1rem;
  }
}

/* ========================================
   ITCSS Layer: Generic - Reset/Normalize
   ======================================== */
@layer generic {
  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  sup,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
  }

  ol,
  ul {
    list-style: none;
    box-sizing: border-box;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  caption,
  th,
  td {
    text-align: left;
    font-weight: 300;
    vertical-align: middle;
  }

  q,
  blockquote {
    quotes: none;
  }

  q:before,
  q:after,
  blockquote:before,
  blockquote:after {
    content: none;
  }

  a img {
    border: none;
  }

  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  main,
  menu,
  nav,
  section,
  summary {
    display: block;
  }

  input,
  textarea {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    max-width: 100%;
  }

  input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
  }

  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
}

/* ========================================
   ITCSS Layer: Elements - Base Elements
   ======================================== */
@layer elements {
  html {
    box-sizing: border-box;
    background: var(--color-bg);
    scroll-behavior: smooth;
    scroll-padding-top: 10rem;
    font-size: var(--font-base);
  }

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

  body {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    line-height: var(--line-relaxed);
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    margin: 0;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    display: block;
  }

  body.is-load {
    opacity: 1;
  }

  /* ヘッダーのインラインCSS代替 */
  .js-loading__header {
    pointer-events: auto;
    opacity: 1;
  }

  /* ハンバーガーメニューのインラインCSS代替 */
  .p-ham-menu {
    display: block;
    height: 0px;
    overflow: hidden;
    transition: height 0.3s ease;
  }

  /* ハンバーガーメニュー開閉状態 */
  .p-ham-menu.is-open {
    height: auto;
  }

  body.is-menu-open {
    height: 100vh;
    overflow: hidden;
  }

  a {
    color: var(--color-accent-green);
    text-decoration: none;
    transition: color var(--duration-base) var(--easing-standard);
  }

  a:hover {
    color: var(--color-primary);
  }

  button {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  div,
  dl,
  dt,
  dd,
  p {
    padding: 0;
    margin: 0;
  }

  ul,
  ol,
  li {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  img {
    vertical-align: bottom;
    max-width: 100%;
  }

  figure {
    padding: 0;
    margin: 0;
  }

  svg,
  img {
    max-width: 100%;
  }
}

/* ========================================
   ITCSS Layer: Objects - Layout Objects
   ======================================== */
@layer objects {
  .l-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: var(--z-sticky);
    padding: 0;
  }

  .l-section {
    margin-inline: auto;
    width: 100%;
    max-width: 100%;
    padding-inline: var(--space-4);
    padding-block: var(--space-8); /* セクション内パディング */
    margin-block: var(--space-20); /* セクション間隔 */
    overflow: visible !important; /* 祖先のクリッパー対策 */
    position: relative;
  }

  .l-footer.l-section--wide {
    margin-top: 0;
  }

  .l-footer.p-footer.l-section--wide {
    margin-top: 0;
  }

  /* セクション間隔のバリエーション */
  .l-section--tight {
    margin-block: var(--space-16); /* 60px */
  }

  .l-section--loose {
    margin-block: var(--space-20); /* 100px */
  }

  .l-section--none {
    margin-block: 0;
  }

  /* セクション内パディングのバリエーション */
  .l-section--compact {
    padding-block: var(--space-4); /* 16px */
  }

  .l-section--spacious {
    padding-block: var(--space-12); /* 48px */
  }

  /* コンテンツ間隔の共通クラス */
  .c-content-spacing {
    margin-bottom: var(--space-8);
  }

  .c-content-spacing--tight {
    margin-bottom: var(--space-4);
  }

  .c-content-spacing--loose {
    margin-bottom: var(--space-12);
  }

  .c-content-spacing--none {
    margin-bottom: 0;
  }

  /* 見出し間隔の共通クラス */
  .c-heading-spacing {
    margin-bottom: var(--space-8);
  }

  .c-heading-spacing--tight {
    margin-bottom: var(--space-4);
  }

  .c-heading-spacing--loose {
    margin-bottom: var(--space-12);
  }

  .l-footer {
    background: var(--color-text-secondary);
  }

  .l-main {
    line-height: var(--line-tight);
  }

  .o-container {
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--space-6);
    overflow: visible !important; /* 祖先のクリッパー対策 */
  }

  .o-container--no-padding-mobile {
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--space-6);
    overflow: visible !important;
  }

  .o-container--small-padding {
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--space-4);
    overflow: visible !important;
  }

  @media (max-width: 768px) {
    .o-container--no-padding-mobile {
      padding-inline: 0;
    }
  }

  .o-container--wide {
    max-width: var(--container-xl);
  }

  .o-container--thin {
    max-width: var(--container-md);
  }

  /* Aboutページ専用のコンテナ - 上下paddingを大きめに設定 */
  .about-page .o-container {
    padding-block: var(--space-16);
  }

  @media (max-width: 768px) {
    .about-page .o-container {
      padding-block: var(--space-12);
    }
  }

  .o-grid {
    display: grid;
    gap: var(--space-6);
  }

  .o-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .o-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .o-flex {
    display: flex;
  }

  .o-flex--col {
    flex-direction: column;
  }

  .o-flex--center {
    align-items: center;
    justify-content: center;
  }

  .o-flex--between {
    justify-content: space-between;
  }
}

/* ========================================
   ITCSS Layer: Components - Shared Components
   ======================================== */
@layer components {
  /* Header Components */
  .p-header {
    background-color: var(--color-white);
  }

  .p-header__inner {
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--header-gap);
    padding-left: var(--header-padding-left);
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }

  .p-header__logo-nav-wrap {
    display: flex;
    align-items: center;
    gap: var(--header-gap);
  }

  .p-header__logo {
    width: var(--logo-width);
    transition: opacity var(--duration-base) var(--easing-standard);
  }

  .p-header__logo img {
    vertical-align: middle;
  }

  .p-header__logo--nohover {
    transition: none;
  }

  .p-header__main-nav-list {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap);
    font-size: var(--header-nav-font-size);
    justify-content: center;
  }

  .p-header__main-nav-item {
    position: relative;
    transition: opacity var(--duration-base) var(--easing-standard);
  }

  .p-header__main-nav-item a,
  .p-header__main-nav-item button {
    font-size: var(--header-nav-font-size);
    display: inline;
    color: var(--color-primary);
  }

  .p-header__contact-toggle-wrap {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .p-header__contact-close-dummy {
    width: var(--header-close-dummy-width);
    height: 100%;
    position: absolute;
    right: var(--header-close-dummy-right);
    top: 0;
    opacity: 0;
  }

  .p-header__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: var(--line-none);
    color: var(--color-white);
    background-color: var(--color-black);
    width: var(--header-contact-width);
    height: 100%;
    gap: var(--header-contact-gap);
    position: relative;
  }

  .p-header__contact-jp-text {
    font-size: var(--header-contact-font-size);
    transition: opacity var(--duration-base) var(--easing-standard);
  }

  .p-header__bk-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: var(--line-none);
    color: var(--color-white);
    background-color: var(--color-black);
    width: var(--header-contact-width);
    height: 100%;
    gap: var(--header-contact-gap);
    position: relative;
  }

  .p-header__menu-toggle {
    height: 100%;
    aspect-ratio: 1/1;
    background-color: var(--color-black);
    position: relative;
    display: none; /* デスクトップでは非表示 */
  }

  .p-header__menu-toggle-bar {
    display: block;
    width: 1.6rem;
    height: 0.3rem;
    background-color: var(--color-white);
    position: relative; /* absolute から relative に変更 */
    transition: all var(--duration-base) var(--easing-standard);
  }

  /* スマホ表示での調整 */
  @media (max-width: 768px) {
    .p-header__menu-toggle {
      gap: 3px; /* スマホでは少し狭く */
    }
    .p-header__menu-toggle-bar {
      width: 1.4rem; /* スマホでは少し小さく */
    }
  }

  /* 小型スマホでの調整 */
  @media (max-width: 480px) {
    .p-header__menu-toggle {
      gap: 2px; /* 小型スマホではさらに狭く */
    }
    .p-header__menu-toggle-bar {
      width: 1.2rem; /* 小型スマホではさらに小さく */
    }
  }

  /* アクティブ状態のアニメーション */
  .p-header__menu-toggle-bar--top.is-active {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .p-header__menu-toggle-bar--middle.is-active {
    opacity: 0;
  }

  .p-header__menu-toggle-bar--bottom.is-active {
    transform: rotate(-45deg) translate(7px, -6px);
  }

  /* Hamburger Menu */
  .p-ham-menu {
    width: 100%;
  }

  .p-ham-menu__scroll-inner {
    max-height: calc(100vh - 6rem);
    overflow-y: scroll;
    scrollbar-width: none;
  }

  .p-ham-menu__inner {
    padding: 2.8rem 4.5rem 10rem;
    position: relative;
  }

  .p-ham-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .p-ham-menu__item {
    font-size: var(--font-base);
  }

  /* CTA Components */
  .p-home-cta {
    background: linear-gradient(
      135deg,
      var(--color-primary) 0%,
      var(--color-accent-green) 100%
    );
    padding: var(--space-20) 0;
    position: relative;
    overflow: visible;
    width: 100vw;
    margin-left: var(--full-width-offset);
    margin-right: var(--full-width-offset);
    margin-block: 0; /* 上下marginを削除 */
  }

  .p-home-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.03) 100%
    );
    z-index: 1;
    pointer-events: none;
  }

  .p-home-cta__inner {
    max-width: var(--cta-container-width);
    margin: 0 auto;
    padding: 0 var(--cta-padding);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  .p-home-cta__content {
    flex: 0 0 40%;
    background-color: transparent;
    padding: var(--space-10) var(--space-8) var(--space-10) var(--space-8);
    padding-right: 10px;
    border-radius: var(--radius-lg);
  }

  .p-home-cta__text {
    font-size: var(--font-2xl);
    font-weight: 600;
    font-family: var(--font-primary);
    color: var(--color-white);
    margin-bottom: var(--space-8);
    line-height: 1.4;
  }

  .p-home-cta__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--color-accent-green);
    border: 2px solid var(--color-accent-green);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
    color: var(--color-white);
  }

  .p-home-cta__button:hover {
    background-color: var(--color-accent-yellow);
    border-color: var(--color-accent-yellow);
    color: var(--color-primary);
    transform: translateX(5px);
  }

  .p-home-cta__button-text {
    font-size: var(--font-base);
    font-family: var(--font-secondary);
  }

  .p-home-cta__button-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-medium);
    height: var(--icon-medium);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .p-home-cta__button-arrow::after {
    content: "→";
    color: var(--color-white);
    font-size: var(--font-sm);
    font-weight: 600;
    transition: transform 0.3s ease;
  }

  .p-home-cta__button:hover .p-home-cta__button-arrow {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
  }

  .p-home-cta__button:hover .p-home-cta__button-arrow::after {
    transform: translateX(2px);
  }

  .p-home-cta__image {
    flex: 0 0 60%;
    text-align: center;
    width: 100%;
  }

  .p-home-cta__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: cover;
  }

  /* Footer Components */
  .p-footer {
    background-color: var(--color-black);
    color: var(--color-white);
    position: relative;
    padding-bottom: 0;
    overflow: hidden;
    padding-top: var(--space-4);
  }

  .p-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/GROWTH HACK ACADEMY-w.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
  }

  .p-footer__main-nav {
    background-color: var(--color-black);
    padding: 3rem 0;
    margin-inline: auto;
  }

  .p-footer__main-nav a {
    color: var(--color-white);
  }

  .p-footer__content {
    position: relative;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding: 0 var(--space-4);
  }

  .p-footer__text {
    position: relative;
    z-index: 2;
    text-align: left;
    padding-bottom: 2rem;
    margin-bottom: 0;
    margin-top: 0;
  }

  .p-footer__remarks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: left;
    padding-bottom: 2rem;
    margin-bottom: 0;
    margin-top: 0;
    opacity: 0.3;
  }

  .p-footer__catch-copy {
    font-size: var(--font-2xl);
    margin-bottom: 4.8rem;
    display: block;
  }

  .p-footer__copyright {
    font-size: var(--font-sm);
  }

  .p-footer__logo {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.07;
    width: 86rem;
    height: auto;
  }

  /* Button Components */
  .c-button-view-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    width: 240px;
    height: 56px;
    border: solid var(--border-width) var(--color-primary);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    color: var(--color-primary);
    transition: background-color var(--duration-base) var(--easing-standard),
      color var(--duration-base) var(--easing-standard);
  }

  .c-button-view-more__text {
    font-size: var(--font-base);
    font-family: var(--font-secondary);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .c-button-view-more__arrow {
    width: var(--icon-small);
    display: flex;
    align-items: center;
  }

  .c-button-view-more__arrow path {
    transition: stroke var(--duration-base) var(--easing-standard);
  }

  /* Card Components */
  .c-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
  }

  .c-card__thumbnail-wrap {
    position: relative;
    aspect-ratio: 15/9;
    overflow: hidden;
  }

  .c-card__thumbnail-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s;
  }

  .c-card__desc-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;
  }

  .c-card__time {
    font-size: var(--font-sm);
    font-family: var(--font-secondary);
    min-width: 12rem;
  }

  .c-card__post-title {
    font-size: var(--font-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .c-card__category {
    font-size: var(--font-sm);
    font-family: var(--font-secondary);
    padding: 0.3rem 0.8rem;
    border-radius: 1.5rem;
    font-weight: 600;
    display: inline-block;
    width: 8rem;
    text-align: center;
  }

  .c-card__category--member {
    background-color: var(--color-primary);
    color: var(--color-white);
  }

  .c-card__category--public {
    background-color: var(--color-accent-green);
    color: var(--color-white);
  }

  .c-card__category--release {
    background-color: var(--color-accent-yellow);
    color: var(--color-black);
  }

  .c-card__title {
    font-size: var(--font-base);
    font-weight: 600;
    line-height: var(--line-snug);
    margin-bottom: 0.8rem;
  }

  .c-card__excerpt {
    font-size: var(--font-sm);
    line-height: var(--line-relaxed);
  }

  /* Heading Components */
  .c-heading-set {
    display: flex;
    flex-direction: column;
    line-height: var(--line-none);
    gap: 1.5rem;
  }

  .c-heading-set__sub {
    font-size: var(--font-2xl);
    font-family: var(--font-secondary);
  }

  .c-heading-set__main {
    font-size: var(--font-base);
    font-weight: 300;
    font-family: var(--font-primary);
  }

  .c-heading-set--font-size-reverse .c-heading-set__sub {
    font-size: var(--font-sm);
  }

  .c-heading-set--font-size-reverse .c-heading-set__main {
    font-size: var(--font-2xl);
  }

  .c-heading-set--disc {
    padding-left: 2.1rem;
    position: relative;
    gap: 0.5rem;
  }

  .c-heading-set--disc::before {
    content: "";
    display: block;
    width: 1.4rem;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: var(--color-black);
    position: absolute;
    top: 0.2rem;
    left: 0;
  }

  .c-heading-set--disc .c-heading-set__main {
    font-size: var(--font-xl);
  }

  .c-heading-set--disc .c-heading-set__sub {
    font-size: var(--font-sm);
  }

  .c-heading--level2 {
    font-size: var(--font-2xl);
  }

  /* セクション見出しコンポーネント */
  .c-section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    text-align: center;
  }

  .c-section-heading__main {
    font-size: var(--font-2xl);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: 0.05em;
  }

  .c-section-heading__sub {
    font-size: var(--font-sm);
    color: var(--color-accent-green);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* 反転セクション用の見出しスタイル（about-section-inverted と同じ仕組み） */
  /* 非反転時（デフォルト） */
  .inverted-section .c-section-heading__main {
    color: var(--color-text-primary);
    transition: color 1.5s ease-out;
  }

  .inverted-section .c-section-heading__sub {
    color: var(--color-text-primary);
    transition: color 1.5s ease-out;
  }

  /* 反転時 */
  .inverted-section.is-animated .c-section-heading__main {
    color: var(--color-white);
  }

  .inverted-section.is-animated .c-section-heading__sub {
    color: var(--color-accent-yellow);
  }

  /* 404 Error Page Styles */
  .p-error-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) 0;
  }

  .p-error-404__content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
  }

  .p-error-404__number {
    font-size: var(--font-6xl);
    font-weight: 600;
    color: var(--color-primary);
    line-height: var(--line-none);
    margin-bottom: var(--space-6);
    font-family: var(--font-display);
  }

  .p-error-404__title {
    font-size: var(--font-3xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
    line-height: var(--line-tight);
  }

  .p-error-404__message {
    font-size: var(--font-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
    margin-bottom: var(--space-12);
  }

  .p-error-404__actions {
    margin-bottom: var(--space-16);
  }

  .p-error-404__button {
    display: inline-block;
    padding: var(--space-4) var(--space-8);
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--duration-base) var(--easing-standard);
  }

  .p-error-404__button:hover {
    background-color: var(--color-accent-green);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  /* Material Symbols Font */
  .material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: 300;
    font-style: normal;
    font-size: var(--font-xl);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }

  /* Voice Cards Component */
  .c-voice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-12);
  }

  .c-voice-card {
    background-color: transparent;
    border: 2px solid var(--color-accent-green);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: all var(--duration-base) var(--easing-standard);
  }

  .c-voice-card:hover {
    border-color: var(--color-primary);
    transform: translateY(0);
  }

  .c-voice-card__quote {
    font-size: var(--font-lg);
    line-height: var(--line-relaxed);
    color: var(--color-text-primary);
    margin: 0;
    font-style: italic;
    position: relative;
  }

  .c-voice-card__quote::before {
    content: '"';
    font-size: var(--font-4xl);
    color: var(--color-primary);
    position: absolute;
    top: -10px;
    left: -5px;
    font-family: var(--font-display);
    opacity: 0.3;
  }

  .c-voice-card__quote::after {
    content: '"';
    font-size: var(--font-4xl);
    color: var(--color-primary);
    position: absolute;
    bottom: -20px;
    right: -5px;
    font-family: var(--font-display);
    opacity: 0.3;
  }

  /* Responsive Design for Voice Cards */
  @media (max-width: 768px) {
    .c-voice-cards {
      grid-template-columns: 1fr;
      gap: var(--space-6);
      margin-top: var(--space-8);
    }

    .c-voice-card {
      padding: var(--space-6);
    }

    .c-voice-card__quote {
      font-size: var(--font-base);
    }
  }

  /* Responsive Design for 404 Page */
  @media (max-width: 768px) {
    .p-error-404 {
      padding: var(--space-12) 0;
      min-height: 50vh;
    }

    .p-error-404__number {
      font-size: var(--font-5xl);
      margin-bottom: var(--space-4);
    }

    .p-error-404__title {
      font-size: var(--font-2xl);
      margin-bottom: var(--space-4);
    }

    .p-error-404__message {
      font-size: var(--font-base);
      margin-bottom: var(--space-8);
    }

    .p-error-404__actions {
      margin-bottom: var(--space-12);
    }
  }
}

/* ========================================
   ITCSS Layer: Utilities - Utility Classes
   ======================================== */
@layer utilities {
  /* Display Utilities */
  .u-hide {
    display: none !important;
  }

  .u-show {
    display: block !important;
  }

  .u-flex {
    display: flex !important;
  }

  .u-grid {
    display: grid !important;
  }

  /* Spacing Utilities */
  .u-mb-1 {
    margin-bottom: var(--space-1) !important;
  }
  .u-mb-2 {
    margin-bottom: var(--space-2) !important;
  }
  .u-mb-3 {
    margin-bottom: var(--space-3) !important;
  }
  .u-mb-4 {
    margin-bottom: var(--space-4) !important;
  }
  .u-mb-6 {
    margin-bottom: var(--space-6) !important;
  }
  .u-mb-8 {
    margin-bottom: var(--space-8) !important;
  }

  .u-mt-1 {
    margin-top: var(--space-1) !important;
  }
  .u-mt-2 {
    margin-top: var(--space-2) !important;
  }
  .u-mt-3 {
    margin-top: var(--space-3) !important;
  }
  .u-mt-4 {
    margin-top: var(--space-4) !important;
  }
  .u-mt-6 {
    margin-top: var(--space-6) !important;
  }
  .u-mt-8 {
    margin-top: var(--space-8) !important;
  }

  .u-p-1 {
    padding: var(--space-1) !important;
  }
  .u-p-2 {
    padding: var(--space-2) !important;
  }
  .u-p-3 {
    padding: var(--space-3) !important;
  }
  .u-p-4 {
    padding: var(--space-4) !important;
  }
  .u-p-6 {
    padding: var(--space-6) !important;
  }
  .u-p-8 {
    padding: var(--space-8) !important;
  }

  /* Text Utilities */
  .u-text-left {
    text-align: left !important;
  }
  .u-text-center {
    text-align: center !important;
  }
  .u-text-right {
    text-align: right !important;
  }

  .u-text-xs {
    font-size: var(--font-xs) !important;
  }
  .u-text-sm {
    font-size: var(--font-sm) !important;
  }
  .u-text-base {
    font-size: var(--font-base) !important;
  }
  .u-text-lg {
    font-size: var(--font-lg) !important;
  }
  .u-text-xl {
    font-size: var(--font-xl) !important;
  }
  .u-text-2xl {
    font-size: var(--font-2xl) !important;
  }

  .u-font-bold {
    font-weight: 600 !important;
  }
  .u-font-normal {
    font-weight: 300 !important;
  }

  /* Background Utilities */
  .u-bg-transparent {
    background-color: transparent !important;
  }
  .u-bg-black {
    background-color: var(--color-black) !important;
  }
  .u-bg-white {
    background-color: var(--color-white) !important;
  }

  /* Opacity Utilities */
  .u-opacity-0 {
    opacity: 0 !important;
  }
  .u-opacity-1 {
    opacity: 1 !important;
  }

  /* Pointer Events Utilities */
  .u-pointer-events-none {
    pointer-events: none !important;
  }
  .u-pointer-events-auto {
    pointer-events: auto !important;
  }

  /* Color Utilities */
  .u-color-white {
    color: var(--color-white) !important;
  }
  .u-color-black {
    color: var(--color-black) !important;
  }

  /* Flexbox Utilities */
  .u-flex {
    display: flex !important;
  }
  .u-flex-col {
    flex-direction: column !important;
  }
  .u-items-center {
    align-items: center !important;
  }
  .u-justify-between {
    justify-content: space-between !important;
  }
  .u-gap-2 {
    gap: var(--space-2) !important;
  }
  .u-gap-3 {
    gap: var(--space-3) !important;
  }

  /* State Classes for JavaScript */
  .is-visible {
    opacity: 1 !important;
  }
  .is-hidden {
    opacity: 0 !important;
  }
  .is-no-pointer-events {
    pointer-events: none !important;
  }

  /* Breadcrumb Navigation */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--header-height);
    margin-bottom: var(--space-8);
    font-size: var(--font-sm);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
  }

  .breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 600;
  }

  .breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .breadcrumb span {
    color: var(--color-text-muted);
    font-weight: 300;
  }

  /* Page Header */
  .page-header {
    text-align: center;
    margin-bottom: 4rem;
    padding: var(--space-8) 0;
  }

  .page-title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .page-description {
    font-size: var(--font-xl);
    color: var(--color-text-secondary);
    line-height: var(--line-normal);
    max-width: 600px;
    margin: 0 auto;
  }

  /* Responsive Utilities */
  .sp-br {
    display: none;
  }

  .pc {
    display: block;
  }

  .sp {
    display: none;
  }

  /* State Utilities */
  .is-loading {
    opacity: 0.5;
    pointer-events: none;
  }

  .is-hidden {
    pointer-events: none;
  }
}

/* ========================================
   Responsive Design
   ======================================== */

/* Desktop Layout */
@media (min-width: 769px) {
  .l-section--normal {
    max-width: var(--section-max-width-normal);
    width: 100%;
  }
  .l-section--wide {
    max-width: var(--section-max-width-wide);
    width: 100%;
  }
  .l-section--thin {
    max-width: var(--section-max-width-thin);
    width: 100%;
  }
}

/* Tablet Layout */
@media (min-width: 481px) and (max-width: 768px) {
  .l-section {
    padding-inline: var(--space-6);
    margin-block: 4rem; /* タブレットでは少し小さく（64px） */
  }
}

/* Mobile Layout */
@media (max-width: 480px) {
  .l-section {
    padding-inline: var(--space-4);
    margin-block: 0 3rem; /* 上marginをゼロ、下marginのみ3remに設定 */
  }

  /* より小さなスマホでのヘッダー調整 */
  .p-header__inner {
    height: 44px; /* より小さなスマホでは44pxに最適化 */
    padding-left: var(--space-2); /* パディングをさらに調整 */
    gap: var(--space-2); /* ギャップも調整 */
  }

  .p-header__logo {
    width: 100px; /* より小さなスマホではロゴを100pxに最適化 */
  }

  .p-header__menu-toggle {
    width: 40px; /* より小さなスマホでは40pxに最適化 */
    height: 40px;
  }
}

/* Button Responsive */
@media (max-width: 768px) {
  .c-button-view-more {
    width: 240px;
    height: 3.5rem; /* 5rem → 3.5rem (56px) に縮小 */
    padding: 12px 24px; /* パディングも調整 */
  }
}

/* Hover States */
@media (hover: hover) {
  .c-button-view-more:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
  }
  .c-button-view-more:hover path {
    stroke: var(--color-white);
  }

  .p-header__logo:hover {
    opacity: 0.5;
  }
  .p-header__logo--nohover:hover {
    opacity: 1;
  }

  .p-header__main-nav-item:hover {
    opacity: 0.5;
  }

  .p-header__contact:hover .p-header__contact-en-text {
    opacity: 0.6;
  }
  .p-header__contact:hover .p-header__contact-jp-text {
    opacity: 0.6;
  }
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .p-header__inner {
    height: 56px; /* スマホでは56pxに拡大 */
    padding-left: var(--space-4); /* スマホではパディングを調整 */
    gap: var(--space-4); /* スマホではギャップを調整 */
    box-shadow: var(
      --shadow-sm
    ); /* 微細なシャドウでコンテンツとの分離を明確化 */
  }

  .p-header__logo {
    width: 180px; /* スマホではロゴを180pxに拡大 */
  }

  .p-header__main-nav {
    display: none;
  }
  .p-header__menu-toggle {
    display: flex; /* block から flex に変更 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px; /* 線の間隔を統一 */
    width: 48px; /* スマホではボタンサイズを48pxに拡大 */
    height: 48px;
    border-radius: var(--radius-sm); /* 角丸を追加してタッチしやすく */
    transition: background-color var(--duration-fast) var(--easing-standard);
  }

  /* ハンバーガーメニューのホバー・フォーカス状態 */
  .p-header__menu-toggle:hover,
  .p-header__menu-toggle:focus {
    background-color: rgba(0, 0, 0, 0.1);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .p-header__media-link {
    display: none;
  }
  .p-header__contact {
    display: none;
  }

  .l-footer.p-footer {
    padding: 0 3.8rem;
    padding-bottom: 0;
  }
  .p-footer__main-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
  }
  .l-footer.p-footer ul {
    flex-direction: column;
    line-height: var(--line-none);
    align-items: flex-start;
  }

  /* CTA Section Responsive */
  .p-home-cta {
    padding: 0;
    width: 100vw;
    margin-left: var(--full-width-offset);
    margin-right: var(--full-width-offset);
    margin-top: 0;
    margin-bottom: 0;
  }
  .p-home-cta__inner {
    flex-direction: column;
    max-width: 100%;
    padding: 40px 10px; /* 上下のパディングを40px追加 */
  }
  .p-home-cta__content {
    padding: 30px 10px;
    order: 1;
    background-color: transparent;
    text-align: center;
  }
  .p-home-cta__text {
    font-size: var(--font-xl);
    font-family: var(--font-primary);
    text-align: center;
  }
  .p-home-cta__button {
    width: 100%;
    justify-content: center;
    padding: 18px 30px;
  }
  .p-home-cta__image {
    order: 2;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .sp-br {
    display: block;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

@media (min-width: 769px) {
  [href*="tel:"] {
    pointer-events: none;
  }
  .sp {
    display: none;
  }

  /* フッター背景ロゴ（デスクトップ版） */
  .p-footer__bg-logo {
    max-width: 100vw;
    width: 100%;
    height: auto;
    overflow: visible;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 0;
  }
}

/* Additional Header Styles */
.p-header__media-link {
  margin-left: auto;
  display: flex;
  width: 14rem;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  transition: opacity var(--duration-base) var(--easing-standard);
}

.p-header__media-link > .in-logo {
  width: 11.4rem;
}

.p-header__contact-en-text {
  font-size: var(--font-lg);
  color: var(--color-white);
}

/* Hamburger Menu Additional Styles */
.p-ham-menu__media-link {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-block: var(--space-8) var(--space-4);
}

.p-ham-menu__media-link > .in-logo {
  width: 14.6rem;
  margin-left: -0.3rem;
}

.p-ham-menu__media-link > .in-blank svg {
  width: 1.4rem;
  height: auto;
}

.p-ham-menu__item-toggle-button {
  position: relative;
}

.p-ham-menu__item-toggle-button > .in-button {
  position: absolute;
  left: calc(100% + 1rem);
  top: 50%;
  transform: translate(0, -50%);
  display: block;
  width: 2.1rem;
  aspect-ratio: 1/1;
  border: solid 1px var(--color-black);
  border-radius: 100%;
}

.p-ham-menu__item-toggle-button > .in-button::before,
.p-ham-menu__item-toggle-button > .in-button::after {
  content: "";
  display: block;
  width: 1rem;
  height: 0.1rem;
  background-color: var(--color-black);
  position: absolute;
  top: 50%;
  left: 50%;
}

.p-ham-menu__item-toggle-button > .in-button::before {
  transform: translate(-50%, -50%);
}

.p-ham-menu__item-toggle-button > .in-button::after {
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: transform var(--duration-base) var(--easing-standard);
}

.p-ham-menu__item-toggle-button.is-active .in-button::after {
  transform: translate(-50%, -50%);
}

.p-ham-menu__sub-list-wrap {
  margin-top: var(--space-6);
  margin-bottom: 3rem;
}

.p-ham-menu__sub-list-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.4rem;
  background-color: var(--color-border-light);
  font-size: var(--font-xl);
  margin-bottom: var(--space-4);
  padding-inline: 1.8rem;
  margin-top: var(--space-8);
}

.p-ham-menu__sub-list-title:first-of-type {
  margin-top: 0;
}

.p-ham-menu__sub-list-sub-title {
  display: inline-block;
  padding-inline: 1.8rem;
  font-size: var(--font-lg);
  margin-bottom: var(--space-4);
  font-family: var(--font-primary);
}

.p-ham-menu__sub-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-left: 2.5rem;
  margin-bottom: var(--space-4);
}

.p-ham-menu__sub-item {
  font-size: var(--font-lg);
}

.p-ham-menu__sub-item::before {
  content: "-";
}

.p-ham-menu__contact-list {
  background-color: var(--color-black);
  margin-top: 4.2rem;
  width: calc(100% + 9rem);
  margin-inline: -4.5rem;
  padding: 3rem 3.6rem;
  color: var(--color-white);
}

.p-ham-menu__contact-list-title {
  font-size: var(--font-xl);
  padding-inline: 1.1rem;
  font-family: var(--font-secondary);
  display: block;
}

.p-ham-menu__contact-item {
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) 1.1rem;
  border-bottom: solid 1px var(--color-white);
}

.p-ham-menu__contact-item path {
  stroke: var(--color-white);
}

.p-ham-menu__policy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: 1.9rem;
}

.p-ham-menu__policy-item {
  font-size: var(--font-sm);
}

/* Footer Additional Styles */
.p-footer__main-nav .p-header__main-nav-list + .p-header__main-nav-list {
  margin-top: 3rem;
}

/* お知らせリンクスタイル */
.c-card__post-title-link {
  color: var(--color-text-primary);
  text-decoration: underline;
  transition: color var(--duration-base) var(--easing-standard);
}

.c-card__post-title-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.c-card__post-title-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ========================================
   About Page Styles - Simple & Clean
   ======================================== */

/* Target List Styles */
.about-target-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
}

.about-target-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  line-height: var(--line-relaxed);
}

.about-target-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent-green);
  font-weight: 600;
  font-size: var(--font-lg);
}

/* History List Styles */
.about-history-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
}

.about-history-list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
  text-align: left;
}

.about-history-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--font-lg);
}

/* Company Table Styles */
.about-company-table {
  max-width: 800px;
  margin: var(--space-8) auto;
}

.about-company-table-content {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.about-company-table-content tr {
  border-bottom: 1px solid var(--color-border-light);
}

.about-company-table-content tr:last-child {
  border-bottom: none;
}

.about-company-table-content .about-company-label {
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
  color: var(--color-text-primary);
  background-color: #f8f9fa;
  width: 30%;
  vertical-align: top;
  border-right: 1px solid var(--color-border-light);
}

.about-company-table-content .about-company-value {
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-primary);
  line-height: var(--line-relaxed);
  background: var(--color-white);
}

.about-company-table-content .about-company-value a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.about-company-table-content .about-company-value a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ========================================
   About Page Animations - リファクタリング済み
   ======================================== */

/* 1. 共通スタイル */
.about-section-base {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
  padding: var(--space-24) 0 var(--space-20) 0;
}

/* 反転セクションの場合は opacity/transform を適用しない */
.about-section-base.about-section-inverted {
  opacity: 1;
  transform: none;
}

.about-section-base.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* 2. 反転セクション */
.about-section-inverted {
  color: var(--color-text-primary);
  background-color: var(--color-white);
  position: relative;
  z-index: 1;
  padding: var(--space-20) 0; /* 上下に大きなpadding */
  margin-top: 0; /* 上marginを0に設定 */
  transition: color 1.5s ease-out, background-color 1.5s ease-out;
}

.about-section-inverted::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  bottom: 0;
  background-color: var(--color-white);
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  opacity: 1;
  transition: background-color 1.5s ease-out;
}

.about-section-inverted.is-animated {
  color: var(--color-white);
  background-color: #0f172a;
}

.about-section-inverted.is-animated::before {
  background-color: #0f172a;
}

.about-section-inverted .about-heading-sub {
  color: var(--color-accent-green) !important;
  transition: color 1.5s ease-out !important;
}

.about-section-inverted.is-animated .about-heading-sub {
  color: var(--color-accent-yellow) !important;
}

.about-section-inverted .about-heading-main {
  color: var(--color-primary) !important;
  transition: color 1.5s ease-out !important;
}

.about-section-inverted.is-animated .about-heading-main {
  color: var(--color-white) !important;
}

/* 子要素の色制御 */
.about-section-inverted p,
.about-section-inverted li,
.about-section-inverted h3,
.about-section-inverted h4,
.about-section-inverted h5,
.about-section-inverted h6,
.about-section-inverted ul,
.about-section-inverted ol,
.about-section-inverted div,
.about-section-inverted span,
.about-section-inverted strong,
.about-section-inverted .about-target-description,
.about-section-inverted .about-target-list,
.about-section-inverted .about-value-text,
.about-section-inverted .about-value-card,
.about-section-inverted .about-history-timeline,
.about-section-inverted .about-history-card,
.about-section-inverted .about-history-list,
.about-section-inverted .about-history-title,
.about-section-inverted .about-history-year-badge,
.about-section-inverted .about-history-future {
  transition: color 1.5s ease-out;
}

/* 3. 非反転セクション */
.about-section-static {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  color: var(--color-text-primary);
  position: relative;
}

.about-section-static .about-heading-sub {
  color: var(--color-accent-green) !important;
  font-weight: 600;
}

.about-section-static .about-heading-main {
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* 4. ヒーローセクション */
.about-section-hero {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  color: white;
  text-align: center;
  padding: var(--space-16) 0;
  margin-bottom: var(--space-12);
}

.about-section-hero .about-hero-title {
  color: #ffffff !important;
}

.about-section-hero .about-hero-description {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 5. アニメーション定義 */

/* 実績数値のカウントダウン・カレンダーめくりエフェクト */
.about-achievement-number {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 900;
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-accent-green)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-2);
  position: relative;
  overflow: hidden;
  display: inline-block;
  perspective: 1000px;
}

/* 数値の単位（＋、％、名）を小さく調整 */
.about-achievement-number .unit {
  font-size: 0.7em !important;
  vertical-align: baseline !important;
  opacity: 0.9 !important;
  font-weight: 600 !important;
  margin-left: 2px !important;
  display: inline !important;
  color: var(--color-primary) !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 1 !important;
  -webkit-text-fill-color: var(--color-primary) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* 単位が確実に表示されるように追加のスタイル */
.about-achievement-number span.unit {
  font-size: 0.7em !important;
  vertical-align: baseline !important;
  opacity: 0.9 !important;
  font-weight: 600 !important;
  margin-left: 2px !important;
  display: inline !important;
  color: var(--color-primary) !important;
  visibility: visible !important;
  -webkit-text-fill-color: var(--color-primary) !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* カウントダウンアニメーション用の数字表示 */
.about-achievement-number .count-display {
  display: inline-block;
  transition: transform 0.1s ease;
}

.about-achievement-number.is-animated .count-display {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  .about-section-base {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* About Page Section Headings - 見出しスタイル強化 */
.c-section-heading {
  margin: var(--space-16) 0;
  text-align: center;
}

/* 基本スタイルは反転セクションのスタイルの後に定義 */

/* Vision Section - 2カラムレイアウト */
.about-vision-content {
  max-width: 1200px;
  margin: 0 auto;
}

.about-vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

.about-vision-visual {
  text-align: center;
}

.about-vision-visual img {
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-vision-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.about-vision-text p {
  font-size: var(--font-lg);
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.about-vision-text strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .about-vision-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-vision-visual {
    order: -1;
  }

  .about-target-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
}

/* ========================================
   Vision Section Typography Enhancement
   ======================================== */

/* Vision Section Base */
.about-section-vision {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  padding-inline: 0; /* フルワイド背景のため左右パディングを無効化 */
  margin-block: 0; /* 上下marginを0に設定 */
}

.about-section-vision::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100vw;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    #2c5aa0 50%,
    var(--color-accent-green) 100%
  );
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

.about-section-vision::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  animation: vision-float 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes vision-float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: translateY(-40px) rotate(15deg);
    opacity: 0.7;
  }
}

/* Vision Typography Enhancement */
.about-vision-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #bae6fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  line-height: 1.2;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 2;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}

.about-vision-subtitle {
  font-size: var(--font-xl);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-8);
  position: relative;
  z-index: 2;
  font-family: var(--font-secondary);
}

/* Vision Content Typography */
.about-vision-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.about-vision-content p {
  font-size: var(--font-lg);
  line-height: var(--line-relaxed);
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: var(--space-6);
  font-weight: 300;
  letter-spacing: 0.01em;
  position: relative;
}

/* Vision Content内のハイライト要素（共通スタイル） */
.about-vision-content p strong,
.vision-highlight {
  display: inline-block;
  color: var(--color-white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--duration-base) var(--easing-standard);
}

.about-vision-content p strong {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  margin: 0 var(--space-1);
}

.vision-highlight {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
}

.vision-highlight.is-triggered {
  animation: visionHighlightPop 0.8s ease-out forwards;
}

.vision-highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.vision-highlight:hover::before {
  opacity: 1;
}

.about-vision-content p strong:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.vision-highlight:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Vision Highlight Elements */
.about-vision-highlight {
  position: relative;
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all var(--duration-base) var(--easing-standard);
  backdrop-filter: blur(10px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.about-vision-highlight:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Vision Highlight アニメーション定義 */
@keyframes visionHighlightPop {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Vision Section Heading Override */
.about-section-vision .c-section-heading__sub {
  color: var(--color-accent-yellow) !important;
  font-size: var(--font-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.about-section-vision .c-section-heading__main {
  color: var(--color-white) !important;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: var(--space-8);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Vision Content Cards */
.about-vision-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
  position: relative;
  z-index: 2;
}

.about-vision-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all var(--duration-base) var(--easing-standard);
  text-align: left;
}

.about-vision-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.about-vision-card h4 {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.about-vision-card p {
  font-size: var(--font-base);
  line-height: var(--line-relaxed);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}

/* Responsive Typography */
@media (max-width: 768px) {
  .about-vision-title {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    margin-bottom: var(--space-4);
  }

  .about-vision-subtitle {
    font-size: var(--font-lg);
    margin-bottom: var(--space-6);
  }

  .about-vision-content p {
    font-size: var(--font-base);
    margin-bottom: var(--space-4);
  }

  .about-vision-cards {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-8);
  }

  .about-vision-card {
    padding: var(--space-6);
  }
}

@media (max-width: 480px) {
  .about-vision-title {
    font-size: clamp(1.25rem, 7vw, 2rem);
  }
}

/* Target Section */
.about-target-content {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: var(--space-12);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.about-target-content h3 {
  font-size: var(--font-2xl);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.about-target-visual {
  margin: var(--space-8) 0;
}

.about-target-visual img {
  max-width: 100%;
  height: auto;
}

.about-target-description {
  text-align: left;
  max-width: 700px;
  margin: var(--space-8) auto 0;
}

.about-section-inverted .about-target-description {
  color: var(--color-text-primary);
}

.about-section-inverted .about-target-description p {
  color: var(--color-text-primary);
}

.about-section-inverted .about-target-description strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.about-section-inverted.is-animated .about-target-description {
  color: var(--color-white);
}

.about-section-inverted.is-animated .about-target-description p {
  color: var(--color-white);
}

.about-section-inverted.is-animated .about-target-description strong {
  color: var(--color-white);
  font-weight: 600;
}

/* Achievements Section */
.about-achievements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin: var(--space-10) 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.about-achievement-item {
  text-align: center;
  padding: var(--space-8);
  background: transparent;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-accent-green);
  transition: transform var(--duration-base) var(--easing-standard);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}

.about-achievement-item:hover {
  border-color: var(--color-primary);
  transform: translateY(0);
}

.about-achievement-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.about-achievement-label {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.about-achievement-desc {
  font-size: var(--font-base);
  color: var(--color-text-primary);
  line-height: var(--line-relaxed);
}

.about-achievements-note {
  text-align: center;
  max-width: 800px;
  margin: var(--space-6) auto 0;
  color: var(--color-text-secondary);
}

/* Value Section */
.about-value-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.about-value-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.about-value-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  justify-items: center;
}

.about-value-card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--duration-base) var(--easing-standard);
  background: transparent;
  border: 2px solid var(--color-accent-green);
  position: relative;
  overflow: hidden;
  max-width: 400px;
  width: 100%;
}

.about-value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-accent-green) 50%,
    var(--color-accent-yellow) 100%
  );
}

.about-value-card:hover {
  border-color: var(--color-primary);
  transform: translateY(0);
}

.about-value-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.about-value-card-label {
  display: inline-block;
  background: var(--color-accent-green);
  color: var(--color-white);
  font-size: var(--font-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.about-value-card h4 {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  flex: 1;
}

.about-value-card p {
  font-size: var(--font-sm);
  color: var(--color-text-primary);
  line-height: var(--line-relaxed);
  font-weight: 600;
}

/* 反転セクション内のabout-value-cardテキストを白色に */
.about-section-inverted .about-value-card h4 {
  color: var(--color-text-primary);
}

.about-section-inverted .about-value-card p {
  color: var(--color-text-primary);
}

.about-section-inverted.is-animated .about-value-card h4 {
  color: var(--color-white);
}

.about-section-inverted.is-animated .about-value-card p {
  color: var(--color-white);
}

.about-value-text h3 {
  font-size: var(--font-2xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.about-value-text p {
  font-size: var(--font-base);
  line-height: var(--line-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.about-value-text p:last-child {
  margin-bottom: 0;
}

.about-section-inverted .about-value-text h3 {
  color: var(--color-text-primary);
}

.about-section-inverted .about-value-text p {
  color: var(--color-text-primary);
}

.about-section-inverted .about-value-text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.about-section-inverted.is-animated .about-value-text h3 {
  color: var(--color-white);
}

.about-section-inverted.is-animated .about-value-text p {
  color: var(--color-white);
}

.about-section-inverted.is-animated .about-value-text strong {
  color: var(--color-white);
  font-weight: 600;
}

/* Message Section */
.about-message-content {
  position: relative;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-10);
  max-width: 800px;
  margin: 0 auto;
  isolation: isolate;
  overflow: visible;
}

/* Message Section Decoration */
.about-message-content__decoration {
  position: absolute;
  top: 50%;
  right: 0;
  width: 150%;
  max-width: none;
  height: auto;
  transform: translate(20%, -50%);
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.6;
}

.about-message-photo {
  position: relative;
  z-index: 1;
}

.about-message-photo img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: var(--space-4);
}

.about-message-name {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.about-message-title {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.about-message-text {
  position: relative;
  z-index: 1;
  max-width: 500px;
}

.about-message-text p {
  font-size: var(--font-sm);
  line-height: var(--line-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* History Timeline */
.about-history-subtitle {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-lg);
  margin-bottom: var(--space-12);
}

.about-history-timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-10) 0;
}

/* 年表示ラベル */
.about-history-year-labels {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.about-history-year-label {
  position: absolute;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-size: var(--font-sm);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s cubic-bezier(0.2, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(26, 49, 104, 0.15);
  white-space: nowrap;
}

.about-history-year-label.is-visible {
  opacity: 1;
  transform: scale(1);
}

.about-history-year-label[data-year="2022"] {
  top: 80px;
}

.about-history-year-label[data-year="2023"] {
  top: 280px;
}

.about-history-year-label[data-year="2024"] {
  top: 480px;
}

.about-history-year-label[data-year="2025"] {
  top: 680px;
}

/* タイムラインの白い線をON GOINGの●で止める */
.about-history-timeline {
  position: relative;
}

.about-history-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: calc(var(--space-12) + var(--space-12));
  /* ON GOINGの●より少し上で止める: 48px + 48px = 96px */
  width: 2px;
  background: var(--color-border);
  transform: translateX(-50%);
}

.about-history-item {
  margin-bottom: var(--space-12);
  position: relative;
}

.about-history-item--left .about-history-card {
  margin-right: 52%;
  text-align: right;
}

.about-history-item--right .about-history-card {
  margin-left: 52%;
  text-align: left;
}

/* ON GOINGのグラデーション背景スタイル */
.about-history-future {
  margin-top: var(--space-12);
  text-align: center;
  padding: var(--space-8);
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent-green) 100%
  );
  border-radius: var(--radius-lg);
  color: var(--color-white);
  position: relative;
}

/* ON GOINGの青●スタイル */
.about-history-future::before {
  content: "";
  position: absolute;
  top: var(--space-6);
  width: 40px;
  height: 40px;
  background: #3b82f6;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-border);
  z-index: 1;
  left: calc(50% - 20px);
  right: auto;
}

/* ON GOINGのカードを中央に配置 */
.about-history-future .about-history-card {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  text-align: center;
}

.about-history-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-accent-green);
  background: transparent;
}

/* タイムラインカードアニメーション */
.about-history-card-animated {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 2s;
  visibility: hidden;
}

.about-history-card-animated.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s;
}

/* 反転セクション用のタイムラインカード */
.about-section-inverted .about-history-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.about-history-year-badge {
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-accent-green) 50%,
    var(--color-accent-yellow) 100%
  );
  color: var(--color-white);
  font-size: var(--font-lg);
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-4);
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(253, 211, 78, 0.4);
  transition: all var(--duration-base) var(--easing-standard);
  transform: translateY(0);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: yearBadgePulse 3s ease-in-out infinite;
  border: 2px solid rgba(253, 211, 78, 0.3);
}

@keyframes yearBadgePulse {
  0%,
  100% {
    box-shadow: 0 4px 15px rgba(253, 211, 78, 0.4);
  }
  50% {
    box-shadow: 0 6px 25px rgba(253, 211, 78, 0.6);
  }
}

.about-history-year-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 30px rgba(253, 211, 78, 0.5);
  border-color: rgba(253, 211, 78, 0.5);
}

.about-history-year-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(253, 211, 78, 0.3) 0%,
    rgba(253, 211, 78, 0.1) 100%
  );
  border-radius: var(--radius-2xl);
  z-index: -1;
}

/* 反転セクション用の年代バッジ */
.about-section-inverted .about-history-year-badge {
  background: linear-gradient(
    135deg,
    var(--color-accent-yellow) 0%,
    var(--color-accent-yellow) 50%,
    var(--color-white) 100%
  );
  color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(253, 211, 78, 0.5);
  animation: yearBadgePulseInverted 3s ease-in-out infinite;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

@keyframes yearBadgePulseInverted {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(253, 211, 78, 0.5);
  }
  50% {
    box-shadow: 0 8px 35px rgba(253, 211, 78, 0.7);
  }
}

.about-section-inverted .about-history-year-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 40px rgba(253, 211, 78, 0.6);
  border-color: rgba(255, 255, 255, 0.8);
}

.about-section-inverted .about-history-year-badge::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

.about-history-date {
  font-size: var(--font-sm);
  color: #ffffff;
  font-weight: 600;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.about-history-title {
  font-size: var(--font-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

/* 反転セクション用のタイムラインテキスト */
.about-section-inverted .about-history-title {
  color: var(--color-text-primary);
}

.about-section-inverted .about-history-list {
  color: var(--color-text-secondary);
}

.about-section-inverted .about-history-list li {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.about-section-inverted.is-animated .about-history-title {
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-section-inverted.is-animated .about-history-list {
  color: rgba(255, 255, 255, 0.9);
}

.about-section-inverted.is-animated .about-history-list li {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.about-history-desc {
  font-size: var(--font-base);
  color: var(--color-text-secondary);
  line-height: var(--line-relaxed);
}

.about-history-item::before {
  content: "";
  position: absolute;
  top: var(--space-6);
  width: 40px;
  height: 40px;
  background: #3b82f6;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.about-history-item--left::before {
  right: calc(50% - 20px);
}

.about-history-item--right::before {
  left: calc(50% - 20px);
}

/* ON GOINGの青●スタイル */
.about-history-future::before {
  content: "";
  position: absolute;
  top: var(--space-6);
  width: 40px;
  height: 40px;
  background: #3b82f6;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-border);
  z-index: 1;
  left: calc(50% - 20px);
  right: auto;
}

/* Company Info Grid */
.about-company-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin: var(--space-8) auto;
}

.about-company-item {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-accent-green);
  background: transparent;
  transition: transform var(--duration-base) var(--easing-standard);
}

.about-company-item:hover {
  border-color: var(--color-primary);
  transform: translateY(0);
}

.about-company-label {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about-company-value {
  font-size: var(--font-lg);
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: var(--line-relaxed);
}

/* Responsive */
@media (max-width: 1024px) {
  .about-value-content,
  .about-message-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-message-photo {
    text-align: center;
  }

  .about-message-photo img {
    max-width: 200px;
  }

  .about-value-visual {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Aboutページ全体の共通調整 */
  .about-page .o-container {
    padding-inline: var(--space-4);
  }

  /* セクション間隔を縮小 */
  .about-section-base {
    padding: var(--space-12) 0 var(--space-8) 0;
    margin-block: var(--space-12);
  }

  /* Inverted Section スマホ対応 */
  .about-section-inverted {
    margin-top: 0; /* モバイルでも上marginを0に設定 */
  }

  /* 見出しサイズ調整 */
  .c-section-heading__main {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }

  .about-heading-sub {
    font-size: var(--font-xs);
  }

  /* Vision Section スマホ対応 */
  .about-section-vision {
    padding-inline: 0; /* モバイルでもフルワイド背景を維持 */
    margin-block: 0; /* モバイルでも上下marginを0に設定 */
  }

  .about-vision-content p {
    font-size: var(--font-base);
    margin-bottom: var(--space-4);
  }

  .vision-highlight {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-base);
  }

  /* Target Section スマホ対応 */
  .about-target-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: left;
  }

  .about-target-visual {
    text-align: center;
    order: -1;
  }

  .about-target-description {
    margin-top: 0;
  }

  .about-target-list li {
    padding-left: var(--space-5);
    margin-bottom: var(--space-3);
  }

  /* Achievements Section スマホ対応 */
  .about-achievements-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-achievement-number {
    font-size: 2.5rem;
  }

  .about-achievement-item {
    min-height: 150px;
  }

  /* Value Section スマホ対応 */
  .about-value-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .about-value-visual {
    order: -1;
  }

  .about-value-card {
    max-width: 100%;
  }

  /* Message Section スマホ対応 */
  .about-message-content {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-message-photo {
    text-align: center;
  }

  .about-message-photo img {
    max-width: 200px;
  }

  .about-message-text {
    max-width: 100%;
  }

  .about-message-text p {
    font-size: var(--font-base);
  }

  .about-message-content__decoration {
    width: 100%;
    transform: translate(0, -50%);
  }

  /* History Timeline スマホ対応 */
  .about-history-timeline {
    padding: var(--space-6) 0;
  }

  .about-history-timeline::before {
    left: 20px;
    top: 0;
    bottom: calc(var(--space-12) + var(--space-12));
    /* ON GOINGの●位置より少し上で止める: アイテム間マージン(48px) + 追加スペース(48px) = 96px */
  }

  .about-history-item--left .about-history-card,
  .about-history-item--right .about-history-card {
    margin-left: 60px;
    margin-right: 0;
    text-align: left;
  }

  .about-history-item--left::before,
  .about-history-item--right::before {
    left: 0;
    right: auto;
    width: 32px;
    height: 32px;
  }

  /* ON GOINGスマホ表示: 青●を左端に */
  .about-history-future::before {
    left: 0;
  }

  /* ON GOINGスマホ表示: カードを左寄せ */
  .about-history-future .about-history-card {
    margin-left: 60px;
    margin-right: 0;
    text-align: left;
  }

  /* Company Section スマホ対応 */
  .about-company-grid {
    grid-template-columns: 1fr;
  }

  .about-company-table {
    max-width: 100%;
    overflow-x: auto;
  }

  .about-company-table-content .about-company-label {
    width: 35%;
    font-size: var(--font-sm);
    padding: var(--space-3) var(--space-4);
  }

  .about-company-table-content .about-company-value {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-sm);
  }
}

@media (max-width: 480px) {
  /* Aboutページ 小型スマホ対応 */
  .about-section-base {
    padding: var(--space-8) 0 var(--space-6) 0;
    margin-block: var(--space-8);
  }

  /* Inverted Section 小型スマホ対応 */
  .about-section-inverted {
    margin-top: 0; /* 小型スマホでも上marginを0に設定 */
  }

  .c-section-heading__main {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* Vision Section */
  .about-section-vision {
    margin-block: 0; /* 小型スマホでも上下marginを0に設定 */
  }

  .about-vision-content p {
    font-size: var(--font-sm);
  }

  /* Target Section */
  .about-target-list li {
    font-size: var(--font-sm);
  }

  /* Achievements Section */
  .about-achievement-number {
    font-size: 2rem;
  }

  .about-achievement-label {
    font-size: var(--font-base);
  }

  .about-achievement-desc {
    font-size: var(--font-sm);
  }

  /* Value Section */
  .about-value-card h4 {
    font-size: var(--font-lg);
  }

  .about-value-text p {
    font-size: var(--font-sm);
  }

  /* Message Section */
  .about-message-photo img {
    max-width: 150px;
  }

  .about-message-name {
    font-size: var(--font-base);
  }

  .about-message-text p {
    font-size: var(--font-sm);
  }

  /* History Timeline */
  .about-history-card {
    padding: var(--space-4);
  }

  .about-history-title {
    font-size: var(--font-lg);
  }

  .about-history-list li {
    font-size: var(--font-sm);
  }

  /* Company Section */
  .about-company-table-content .about-company-label {
    font-size: var(--font-xs);
  }

  .about-company-table-content .about-company-value {
    font-size: var(--font-xs);
  }
}

/* About Page Section Headings - 基本スタイル（反転セクションのスタイルの後に定義） */
.c-section-heading__main {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: var(--space-6);
}