/*
 * 会社概要ページ専用CSS
 */

/* ======================================
  Company Page Background
  page-id-23 only
====================================== */

#body_wrap.page-id-23 {
  background:
    radial-gradient(circle at 88% 7%,
      rgba(235, 214, 207, 0.46) 0%,
      rgba(235, 214, 207, 0.24) 20%,
      rgba(235, 214, 207, 0.08) 38%,
      rgba(235, 214, 207, 0) 56%),
    radial-gradient(circle at 6% 42%,
      rgba(19, 166, 173, 0.12) 0%,
      rgba(19, 166, 173, 0.06) 28%,
      rgba(19, 166, 173, 0) 58%),
    linear-gradient(180deg,
      #ffffff 0%,
      #f7f9fb 34%,
      #f2f6f8 70%,
      #eef4f6 100%);
  color: #061b3a;
}

/* COMPANYタイトル〜本文エリア */
#body_wrap.page-id-23 #content {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* 背景にうっすらグリッド感を足す */
#body_wrap.page-id-23 #content::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(6, 27, 58, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(6, 27, 58, 0.028) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 18%,
    rgba(0, 0, 0, 0.14) 62%,
    transparent 100%
  );
}

/* パンくずも同じ背景になじませる */
#body_wrap.page-id-23 #breadcrumb {
  background: transparent;
}

/* ======================================
  Company Page H1 Text Clip
====================================== */

#body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  margin: clamp(6px, 1.8vw, 24px) calc(50% - 50vw) clamp(8px, 1.4vw, 20px);
  padding: clamp(8px, 2vw, 24px) clamp(24px, 6vw, 96px);
  overflow: hidden;
  color: var(--poscom-deep-navy, #061b3a);
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}

#body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle[data-style="b_bottom"] {
  border-bottom: 0;
}

#body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle::before {
  content: "COMPANY";
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  color: transparent;
  background-image:
    linear-gradient(
      90deg,
      rgba(3, 20, 48, 0.08),
      rgba(0, 120, 150, 0.035)
    ),
    url("/wp-content/uploads/2026/05/back-img-10.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(72px, 13.2vw, 230px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-align: left;
  text-transform: uppercase;
  filter: drop-shadow(0 12px 18px rgba(6, 27, 58, 0.08));
}

#body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle::after {
  content: none;
}

#body_wrap.page-id-23 .c-pageTitle__inner {
  display: inline-block;
  margin-top: clamp(6px, 1.2vw, 16px);
  padding-bottom: 0.18em;
  color: var(--poscom-deep-navy, #061b3a);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--poscom-deep-navy, #061b3a);
  box-shadow: none;
  font-family: var(--font-sans, "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif);
  font-size: clamp(20px, 1.85vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-align: left;
}

#body_wrap.page-id-23 .c-pageTitle__inner::before,
#body_wrap.page-id-23 .c-pageTitle__inner::after {
  content: none;
}

@media (max-width: 960px) {
  #body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle {
    margin: clamp(4px, 2vw, 18px) calc(50% - 50vw) 20px;
    padding: 14px clamp(18px, 5vw, 42px);
  }

  #body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle::before {
    font-size: clamp(58px, 15vw, 132px);
    letter-spacing: -0.05em;
  }

  #body_wrap.page-id-23 .c-pageTitle__inner {
    margin-top: 8px;
    font-size: clamp(17px, 2.8vw, 22px);
  }
}

@media (max-width: 600px) {
  #body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle {
    margin: 4px calc(50% - 50vw) 18px;
    padding: 12px 16px;
  }

  #body_wrap.page-id-23 .l-mainContent__inner > .c-pageTitle::before {
    font-size: clamp(42px, 14.2vw, 78px);
    line-height: 0.95;
    letter-spacing: -0.055em;
  }

  #body_wrap.page-id-23 .c-pageTitle__inner {
    margin-top: 10px;
    font-size: clamp(16px, 4.4vw, 19px);
    letter-spacing: 0.1em;
  }
}

@media (min-width: 600px) {
  #body_wrap.page-id-23 .l-content {
    padding-top: 0.5em;
  }
}

/* ======================================
  Company Intro Typing Copy
====================================== */

/* 会社概要ページ本文の上余白を詰める */
#body_wrap.page-id-23 .post_content {
  margin-top: clamp(8px, 1.4vw, 20px) !important;
}

/* 最初の導入コピー自体には上マージンを持たせない */
#body_wrap.page-id-23 .company-intro-type {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  color: #061b3a;
  font-size: clamp(30px, 2.65vw, 44px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: 0.045em;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* タイピング中のカーソル */
#body_wrap.page-id-23 .company-intro-type.is-typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 1.05em;
  margin-left: 0.16em;
  vertical-align: -0.12em;
  border-radius: 999px;
  background: linear-gradient(180deg, #00a8c8 0%, #14968f 100%);
  animation: companyTypingCursor 0.85s steps(1) infinite;
}

/* 完了後はカーソルを消す */
#body_wrap.page-id-23 .company-intro-type.is-typing-done::after {
  display: none;
}

@keyframes companyTypingCursor {
  0%, 45% {
    opacity: 1;
  }

  46%, 100% {
    opacity: 0;
  }
}

@media (max-width: 959px) {
  #body_wrap.page-id-23 .post_content {
    margin-top: 24px !important;
  }

  #body_wrap.page-id-23 .company-intro-type {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.65;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* ======================================
  Company Intro Lead Text
====================================== */

#body_wrap.page-id-23 .company-intro-lead {
  max-width: 980px;
  margin: clamp(22px, 2.8vw, 38px) auto 0;
  color: #27384c;
  font-size: clamp(15px, 1.18vw, 17px);
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: 0.045em;
  text-align: left;
}

#body_wrap.page-id-23 .company-intro-lead::first-line {
  color: #061b3a;
  font-weight: 700;
}

@media (max-width: 959px) {
  #body_wrap.page-id-23 .company-intro-lead {
    margin-top: 22px;
    font-size: 15px;
    line-height: 2;
  }
}

/* ======================================
  Company Intro Icon Frame
====================================== */

#body_wrap.page-id-23 .company-intro-icon-frame {
  display: inline-block;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

#body_wrap.page-id-23 .company-intro-icon-frame figure,
#body_wrap.page-id-23 .company-intro-icon-frame .wp-block-image {
  overflow: hidden;
  border-radius: inherit;
}

#body_wrap.page-id-23 .company-intro-icon-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

/* タブレットでも2枚画像の角丸を確実に効かせる */
@media (min-width: 783px) and (max-width: 959px) {
  #body_wrap.page-id-23 .company-sp-service-icon-grid .wp-block-image {
    overflow: hidden;
    border-radius: 18px;
    background: transparent;
  }

  #body_wrap.page-id-23 .company-sp-service-icon-grid .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
  }
}

/* ======================================
  Company SP Service Icon Grid
  スマホ専用：導入アイコン2カラム
====================================== */

@media (max-width: 782px) {
  #body_wrap.page-id-23 .company-sp-service-icon-grid .wp-block-image {
    width: 92%;
    margin-right: auto;
    margin-left: auto;
    background: transparent;
    box-shadow: none;
  }

  #body_wrap.page-id-23 .company-sp-service-icon-grid .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow:
      0 14px 32px rgba(6, 27, 58, 0.16),
      0 1px 0 rgba(255, 255, 255, 0.92) inset;
  }
}

/* ======================================
  President Signature English
====================================== */

.president-signature-meta {
  margin-top: clamp(12px, 1vw, 18px);
  color: rgba(6, 27, 58, 0.82);
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.075em;
}

.president-signature-meta .president-position {
  margin: 0 0 0.35em !important;
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: 0.08em;
}

.president-signature-meta .president-name-en {
  margin: 0 !important;
  font-size: clamp(14px, 1vw, 17px);
  letter-spacing: 0.075em;
}

/* ======================================
  Company Message Signature Visual
  代表挨拶：右カラム背景ビジュアルと署名重ね
====================================== */

@media (min-width: 960px) {
  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 520px;
    padding-top: 16px;
    padding-bottom: 12px;
    isolation: isolate;
  }

  /* 既存スペーサーはPCでは装飾演出上不要。
     DOMは残しつつ、このセクションだけ非表示 */
  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > .wp-block-spacer {
    display: none;
  }

  /* 背景画像を装飾レイヤー化 */
  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > .wp-block-image {
    position: absolute;
    top: auto;
    bottom: 32px;
    left: 50%;
    z-index: 0;
    width: min(132%, 640px);
    margin: 0;
    opacity: 0.64;
    pointer-events: none;
    filter: blur(2.4px) saturate(0.94);
    transform: translateX(-45%);
  }

  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    filter: blur(2.8px);
    -webkit-mask-image: radial-gradient(
      ellipse 92% 70% at 40% 54%,
      rgba(0, 0, 0, 0.98) 36%,
      rgba(0, 0, 0, 0.74) 56%,
      rgba(0, 0, 0, 0.26) 76%,
      transparent 96%
    );
    mask-image: radial-gradient(
      ellipse 92% 70% at 40% 54%,
      rgba(0, 0, 0, 0.98) 36%,
      rgba(0, 0, 0, 0.74) 56%,
      rgba(0, 0, 0, 0.26) 76%,
      transparent 96%
    );
  }

  /* 署名画像を前面に */
  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > p.u-mb-ctrl.u-mb-0 {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin-top: 0;
    margin-bottom: 8px;
    margin-left: 6px;
    transform: translateY(16px);
  }

  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > p.u-mb-ctrl.u-mb-0 img {
    display: block;
    width: clamp(290px, 32vw, 360px) !important;
    max-width: 100%;
    height: auto;
  }

  /* 英字名も前面へ */
  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > .president-signature-meta {
    position: relative;
    z-index: 2;
    margin-top: 6px;
    margin-left: 8px;
    color: #173160;
    transform: translateY(16px);
  }
}

/* ======================================
  Company President Signature Tablet Stacked Right
  タブレット縦積み：署名と背景画像を右寄せ
====================================== */

@media (min-width: 768px) and (max-width: 959px) {
  #body_wrap.page-id-23 #president-message
    > .swell-block-columns__inner
    > .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    margin-top: 6px !important;
    margin-bottom: 22px !important;
    padding-top: 0 !important;
    padding-right: clamp(28px, 6vw, 72px) !important;
    padding-bottom: 16px !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
  }

  #body_wrap.page-id-23 #president-message
    > .swell-block-columns__inner
    > .swell-block-column[data-valign="bottom"]:has(.president-signature-meta)
    > .wp-block-image {
    position: absolute !important;
    top: 0 !important;
    right: clamp(18px, 5vw, 64px) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 0 !important;
    width: min(46vw, 360px) !important;
    max-width: none !important;
    margin: 0 !important;
    opacity: 0.32 !important;
    pointer-events: none !important;
    filter: blur(2.2px) saturate(0.94) !important;
    transform: none !important;
  }

  #body_wrap.page-id-23 #president-message
    > .swell-block-columns__inner
    > .swell-block-column[data-valign="bottom"]:has(.president-signature-meta)
    > .wp-block-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    filter: blur(2.4px) !important;
    -webkit-mask-image: radial-gradient(
      ellipse 88% 72% at center,
      rgba(0, 0, 0, 0.92) 42%,
      rgba(0, 0, 0, 0.52) 66%,
      transparent 94%
    ) !important;
    mask-image: radial-gradient(
      ellipse 88% 72% at center,
      rgba(0, 0, 0, 0.92) 42%,
      rgba(0, 0, 0, 0.52) 66%,
      transparent 94%
    ) !important;
  }

  #body_wrap.page-id-23 #president-message
    > .swell-block-columns__inner
    > .swell-block-column[data-valign="bottom"]:has(.president-signature-meta)
    > p.u-mb-ctrl.u-mb-0 {
    position: relative !important;
    z-index: 2 !important;
    width: fit-content !important;
    margin-top: 18px !important;
    margin-right: 0 !important;
    margin-bottom: 4px !important;
    margin-left: auto !important;
    transform: none !important;
  }

  #body_wrap.page-id-23 #president-message
    > .swell-block-columns__inner
    > .swell-block-column[data-valign="bottom"]:has(.president-signature-meta)
    > p.u-mb-ctrl.u-mb-0 img {
    display: block !important;
    width: clamp(270px, 42vw, 340px) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #body_wrap.page-id-23 #president-message
  > .swell-block-columns__inner
  > .swell-block-column[data-valign="bottom"]:has(.president-signature-meta)
  > .president-signature-meta {
    position: relative !important;
    z-index: 2 !important;
    width: clamp(270px, 42vw, 340px) !important;
    margin-top: 4px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    color: #173160 !important;
    text-align: left !important;
    transform: none !important;
  }
}

/* スマホ：背景画像を署名の背面装飾にして、本文との余白を詰める */
@media (max-width: 767px) {
  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) {
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 18px;
    padding-top: 4px;
    padding-bottom: 12px;
    isolation: isolate;
  }

  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > .wp-block-image {
    position: absolute;
    top: 0;
    left: 53%;
    z-index: 0;
    width: min(82vw, 320px);
    margin: 0;
    opacity: 0.32;
    pointer-events: none;
    transform: translateX(-50%);
  }

  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    filter: blur(2.2px);
    -webkit-mask-image: radial-gradient(
      ellipse 88% 72% at center,
      rgba(0, 0, 0, 0.92) 42%,
      rgba(0, 0, 0, 0.52) 66%,
      transparent 94%
    );
    mask-image: radial-gradient(
      ellipse 88% 72% at center,
      rgba(0, 0, 0, 0.92) 42%,
      rgba(0, 0, 0, 0.52) 66%,
      transparent 94%
    );
  }

  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > p.u-mb-ctrl.u-mb-0.sp_only {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin-top: 22px;
    margin-bottom: 4px;
  }

  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > p.u-mb-ctrl.u-mb-0.sp_only img {
    display: block;
    width: min(86vw, 320px) !important;
    max-width: 100%;
    height: auto;
  }

  #body_wrap.page-id-23 .swell-block-column[data-valign="bottom"]:has(.president-signature-meta) > .president-signature-meta {
    position: relative;
    z-index: 2;
    margin-top: 4px;
    margin-bottom: 0;
    color: #173160;
  }
}

/* ======================================
  Company Access Map Design
====================================== */

#body_wrap.page-id-23 .googlemap.wp-block-group {
  width: min(100%, 1020px);
  margin: clamp(32px, 4vw, 56px) auto 0;
}

#body_wrap.page-id-23 .googlemap > div {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  background: #ffffff;
  padding: clamp(8px, 1vw, 12px);
  box-shadow:
    0 28px 70px rgba(6, 27, 58, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* 地図本体 */
#body_wrap.page-id-23 .googlemap iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 26px;

  /* 暗くしすぎない、明るい上品な地図 */
  -webkit-filter: grayscale(0.55) brightness(1.08) contrast(0.92) saturate(0.72);
          filter: grayscale(0.55) brightness(1.08) contrast(0.92) saturate(0.72);

  /* 右上だけ少し斜めに切る */
  clip-path: polygon(
    0 0,
    calc(100% - 56px) 0,
    100% 56px,
    100% 100%,
    0 100%
  );
}

/* 右上の斜めカット部分を飾る */
#body_wrap.page-id-23 .googlemap > div::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 74px;
  height: 74px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 168, 200, 0.95), rgba(20, 150, 143, 0.95));
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  border-top-right-radius: 24px;
}

/* 色かぶせは使わない */
#body_wrap.page-id-23 .googlemap > div::before {
  content: none;
}

@media (max-width: 959px) {
  #body_wrap.page-id-23 .googlemap iframe {
    min-height: 340px;
    clip-path: none;
  }

  #body_wrap.page-id-23 .googlemap > div::after {
    display: none;
  }
}

@media (max-width: 600px) {
  #body_wrap.page-id-23 .googlemap iframe {
    height: clamp(240px, 76vw, 300px);
    min-height: clamp(240px, 76vw, 300px);
  }
}

/* ======================================
  Company Profile Table
  SWELL simple table line color only
====================================== */

#body_wrap.page-id-23 .post_content figure.wp-block-table.company-profile-table {
  --color_border: rgba(6, 27, 58, 0.16);
  --swl-border-color: rgba(6, 27, 58, 0.16);
}

/* SWELLシンプル表の横線だけ調整 */
#body_wrap.page-id-23 .post_content figure.wp-block-table.company-profile-table.is-style-simple table {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

#body_wrap.page-id-23 .post_content figure.wp-block-table.company-profile-table.is-style-simple tr {
  border: 0 !important;
}

#body_wrap.page-id-23 .post_content figure.wp-block-table.company-profile-table.is-style-simple th,
#body_wrap.page-id-23 .post_content figure.wp-block-table.company-profile-table.is-style-simple td {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(6, 27, 58, 0.146) !important;
}

/* 念のため、最初の行の上線も完全に消す */
#body_wrap.page-id-23 .post_content figure.wp-block-table.company-profile-table.is-style-simple tr:first-child th,
#body_wrap.page-id-23 .post_content figure.wp-block-table.company-profile-table.is-style-simple tr:first-child td {
  border-top: 0 !important;
}

/* ======================================
  Company Service Cards
  3事業版：PCは重ねず3カラム表示
====================================== */

#body_wrap.page-id-23 .company-service-cards {
  width: min(80vw, 1140px);
  max-width: none;
  margin-top: clamp(72px, 8vw, 120px);
  margin-bottom: clamp(88px, 9vw, 140px);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* カードリスト本体 */
#body_wrap.page-id-23 .company-cardlist {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-height: clamp(390px, 30vw, 470px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(6, 27, 58, 0.18);
}

/* 各カード共通 */
#body_wrap.page-id-23 .company-cardlist__item {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: clamp(390px, 30vw, 470px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  color: #061b3a;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.96);
  border-left: 1px solid rgba(6, 27, 58, 0.18);
  transition:
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

#body_wrap.page-id-23 .company-cardlist__item:first-child {
  border-left: 0;
}

/* ホバーしたカードは前面へ */
#body_wrap.page-id-23 .company-cardlist__item:hover {
  z-index: 20;
  transform: translateY(-3px);
  box-shadow:
    0 22px 54px rgba(6, 27, 58, 0.15),
    0 8px 18px rgba(6, 27, 58, 0.10);
}

/* ======================================
  Company Service Card Images
  画像URLは3事業だけ管理
====================================== */

#body_wrap.page-id-23 .company-cardlist__item--shipping .company-cardlist__image {
  background-image: url("/wp-content/uploads/2026/06/service-01.jpg");
}

#body_wrap.page-id-23 .company-cardlist__item--dm .company-cardlist__image {
  background-image: url("/wp-content/uploads/2026/06/service-02.jpg");
}

#body_wrap.page-id-23 .company-cardlist__item--print .company-cardlist__image {
  background-image: url("/wp-content/uploads/2026/06/service-03.jpg");
}

/* 通常時：3枚カード用の横長サムネイル */
#body_wrap.page-id-23 .company-cardlist__image {
  position: absolute;
  z-index: 0;
  top: 52%;
  left: 50%;
  width: min(68%, 280px);
  max-width: calc(100% - 56px);
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  background-color: #dfe8ed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  transition:
    top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    right 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.35s ease,
    opacity 0.35s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover時：画像をカード全面へ完全展開 */
#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__image {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  opacity: 1;
  filter: none;
  background-size: cover;
  background-position: center center;
  transform: translate(0, 0) scale(1.04);
}

/* 暗幕 */
#body_wrap.page-id-23 .company-cardlist__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3, 13, 32, 0.76) 0%,
      rgba(3, 13, 32, 0.58) 42%,
      rgba(3, 13, 32, 0.90) 100%
    );
  transition: opacity 0.35s ease;
}

#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__shade {
  opacity: 1;
}

/* 中身 */
#body_wrap.page-id-23 .company-cardlist__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: clamp(390px, 30vw, 470px);
  padding: clamp(32px, 3vw, 42px);
}

/* Service */
#body_wrap.page-id-23 .company-cardlist__service {
  display: block;
  color: rgba(6, 27, 58, 0.42);
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.22em;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* 事業名 */
#body_wrap.page-id-23 .company-cardlist__title {
  display: block;
  margin-top: 18px;
  color: #061b3a;
  font-size: clamp(24px, 1.75vw, 31px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.06em;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

/* 説明文 */
#body_wrap.page-id-23 .company-cardlist__text {
  display: block;
  margin-top: auto;
  margin-bottom: clamp(42px, 4vw, 56px);
  color: #061b3a;
  font-size: clamp(14px, 0.95vw, 17px);
  font-weight: 800;
  line-height: 1.9;
  letter-spacing: 0.035em;
  opacity: 0;
  transform: translateY(10px);
  transition:
    color 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease,
    text-shadow 0.35s ease;
}

/* VIEWボタン */
#body_wrap.page-id-23 .company-cardlist__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: #061b3a;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  transition:
    color 0.35s ease,
    transform 0.35s ease,
    text-shadow 0.35s ease;
}

#body_wrap.page-id-23 .company-cardlist__buttonIcon {
  --icon-bg: #061b3a;
  --icon-fg: #ffffff;

  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: var(--icon-fg);
  background: var(--icon-bg);
  border-radius: 999px;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

#body_wrap.page-id-23 .company-cardlist__buttonIcon::before,
#body_wrap.page-id-23 .company-cardlist__buttonIcon::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: 50%;
  color: currentColor;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.35s ease;
}

#body_wrap.page-id-23 .company-cardlist__buttonIcon::after {
  transform: translate(-220%, -50%);
}

#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__service,
#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__title,
#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__text,
#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__button {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__text {
  opacity: 1;
  transform: translateY(0);
}

#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__button {
  transform: translateX(4px);
}

#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__buttonIcon {
  --icon-bg: #ffffff;
  --icon-fg: #061b3a;
}

#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__buttonIcon::before {
  transform: translate(200%, -50%);
}

#body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__buttonIcon::after {
  transform: translate(-50%, -50%);
}

/* mobile */
@media (max-width: 959px) {
  #body_wrap.page-id-23 .company-service-cards {
    width: min(92vw, 680px);
    margin-top: 72px;
    margin-right: auto;
    margin-bottom: 88px;
    margin-left: auto;
    transform: none;
  }

  #body_wrap.page-id-23 .company-cardlist {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    overflow: hidden;
    border-radius: 24px;
  }

  #body_wrap.page-id-23 .company-cardlist__item {
    width: 100%;
    min-height: 240px;
    margin: 0;
    border-left: 0;
    transform: none;
  }

  #body_wrap.page-id-23 .company-cardlist__item + .company-cardlist__item {
    border-top: 1px solid rgba(6, 27, 58, 0.18);
  }

  #body_wrap.page-id-23 .company-cardlist__item:hover {
    transform: none;
  }

  #body_wrap.page-id-23 .company-cardlist__image,
  #body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__image {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  #body_wrap.page-id-23 .company-cardlist__shade,
  #body_wrap.page-id-23 .company-cardlist__item:hover .company-cardlist__shade {
    opacity: 1;
    background:
      linear-gradient(
        90deg,
        rgba(3, 13, 32, 0.74) 0%,
        rgba(3, 13, 32, 0.28) 100%
      );
  }

  #body_wrap.page-id-23 .company-cardlist__content {
    min-height: 240px;
    padding: 24px;
  }

  #body_wrap.page-id-23 .company-cardlist__service,
  #body_wrap.page-id-23 .company-cardlist__title,
  #body_wrap.page-id-23 .company-cardlist__text,
  #body_wrap.page-id-23 .company-cardlist__button {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
  }

  #body_wrap.page-id-23 .company-cardlist__text {
    margin-top: auto;
    margin-bottom: 24px;
    opacity: 1;
    transform: none;
  }
}

/* ======================================
  Company Message Scroll Reveal Text
====================================== */

#body_wrap.page-id-23 .company-message-reveal {
  color: rgba(6, 27, 58, 0.22);
  line-height: 2.05;
  letter-spacing: 0.08em;
}

/* JSで1文字ずつ包んだ後 */
#body_wrap.page-id-23 .company-message-reveal .message-reveal-char {
  color: rgba(6, 27, 58, 0.18);
  opacity: 0.38;
  transition: color 0.2s linear, opacity 0.2s linear;
}

/* brはそのまま効かせる */
#body_wrap.page-id-23 .company-message-reveal br {
  display: block;
}

/* GSAPが使えない時の保険 */
#body_wrap.page-id-23 .company-message-reveal.is-reveal-complete .message-reveal-char {
  color: #061b3a;
  opacity: 1;
}

/* ======================================
  Company Message Responsive Typography
  代表挨拶：タブレット・スマホの文字サイズ調整
====================================== */

@media (min-width: 783px) and (max-width: 959px) {
  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.poscom-ttl-gradient,
  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.wp-block-heading.poscom-ttl-gradient {
    margin-top: 32px !important;
    margin-bottom: 22px !important;
    font-size: clamp(36px, 5.2vw, 48px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.045em;
  }

  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.poscom-ttl-gradient .poscom-ttl-gradient__sub,
  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.wp-block-heading.poscom-ttl-gradient .poscom-ttl-gradient__sub {
    margin-top: 8px;
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.45;
    letter-spacing: 0.09em;
  }

  #body_wrap.page-id-23 .company-message-reveal {
    line-height: 1.85;
    letter-spacing: 0.045em;
  }

  #body_wrap.page-id-23 .company-message-reveal .swl-fz {
    font-size: clamp(16px, 2.15vw, 20px) !important;
  }
}

@media (max-width: 759px) {
  #body_wrap.page-id-23 .company-message-reveal {
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 782px) {
  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.poscom-ttl-gradient,
  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.wp-block-heading.poscom-ttl-gradient {
    margin-top: 26px !important;
    margin-bottom: 18px !important;
    font-size: clamp(27px, 8.4vw, 34px) !important;
    line-height: 1.14 !important;
    letter-spacing: 0.045em;
  }

  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.poscom-ttl-gradient .poscom-ttl-gradient__sub,
  #body_wrap.page-id-23 .swell-block-column:has(.company-message-reveal) > h2.wp-block-heading.poscom-ttl-gradient .poscom-ttl-gradient__sub {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: 0.08em;
  }

  #body_wrap.page-id-23 .company-message-reveal {
    line-height: 1.7;
    letter-spacing: 0.035em;
  }

  #body_wrap.page-id-23 .company-message-reveal .swl-fz {
    font-size: 15.5px !important;
  }
}

/* ======================================
  Company President Career
  代表略歴：上品な年表カード
====================================== */

#body_wrap.page-id-23 .company-president-career {
  width: min(900px, calc(100% - 48px));
  margin: clamp(56px, 6vw, 92px) auto clamp(48px, 5vw, 78px);
  color: #061b3a;
}

#body_wrap.page-id-23 .company-president-career__inner {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: clamp(28px, 3.4vw, 46px) clamp(24px, 4vw, 56px);
  border: 1px solid rgba(6, 27, 58, 0.075);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    radial-gradient(circle at 8% 12%, rgba(22, 198, 211, 0.05), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(141, 194, 31, 0.035), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(246, 251, 252, 0.28));
  box-shadow:
    0 8px 20px rgba(6, 27, 58, 0.022),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

#body_wrap.page-id-23 .company-president-career__inner::before {
  content: "CAREER";
  position: absolute;
  right: -0.08em;
  bottom: -0.18em;
  z-index: 0;
  color: rgba(6, 27, 58, 0.035);
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(86px, 14vw, 180px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
}

#body_wrap.page-id-23 .company-president-career__title {
  position: relative;
  z-index: 1;
  margin-top: 0 !important;
  margin-bottom: clamp(26px, 3vw, 40px) !important;
}

#body_wrap.page-id-23 .company-president-career__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

#body_wrap.page-id-23 .company-president-career__item {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 34px);
  padding: clamp(15px, 1.8vw, 22px) 0;
  border-bottom: 1px solid rgba(6, 27, 58, 0.12);
  opacity: 0;
  filter: blur(4px);
  transform: translateY(16px);
  transition:
    opacity 0.58s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.58s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.58s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--career-delay, 0s);
}

#body_wrap.page-id-23 .company-president-career__item:last-child {
  border-bottom: 0;
}

#body_wrap.page-id-23 .company-president-career.is-visible .company-president-career__item {
  opacity: 1;
  filter: none;
  transform: none;
}

#body_wrap.page-id-23 .company-president-career__item dt {
  margin: 0;
  color: #008ea0;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

#body_wrap.page-id-23 .company-president-career__item dd {
  margin: 0;
  color: #061b3a;
  font-family: var(--font-sans, "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif);
  font-size: clamp(15px, 1.18vw, 17px);
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: 0.045em;
}

#body_wrap.page-id-23 .company-president-career__item dd br {
  display: block;
}

@media (max-width: 959px) {
  #body_wrap.page-id-23 .company-president-career {
    width: min(92vw, 720px);
    margin-top: 54px;
    margin-bottom: 52px;
  }

  #body_wrap.page-id-23 .company-president-career__inner {
    padding: 30px 26px;
    border-radius: 26px;
  }

  #body_wrap.page-id-23 .company-president-career__item {
    grid-template-columns: 118px minmax(0, 1fr);
    column-gap: 20px;
  }
}

@media (max-width: 600px) {
  #body_wrap.page-id-23 .company-president-career {
    width: min(100%, calc(100vw - 30px));
    margin-top: 42px;
    margin-bottom: 40px;
  }

  #body_wrap.page-id-23 .company-president-career__inner {
    padding: 26px 20px;
    border-radius: 22px;
  }

  #body_wrap.page-id-23 .company-president-career__inner::before {
    right: -0.16em;
    bottom: -0.12em;
    font-size: 82px;
  }

  #body_wrap.page-id-23 .company-president-career__title {
    margin-bottom: 22px !important;
  }

  #body_wrap.page-id-23 .company-president-career__item {
    grid-template-columns: 1fr;
    row-gap: 4px;
    padding: 12px 0;
  }

  #body_wrap.page-id-23 .company-president-career__item dt {
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 1.28 !important;
    letter-spacing: 0.075em;
  }

  #body_wrap.page-id-23 .company-president-career__item dd,
  #body_wrap.page-id-23 .company-president-career__item dd * {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.02em;
  }

  #body_wrap.page-id-23 .company-president-career__item dd br {
    display: block;
    content: "";
    margin-top: 0.28em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #body_wrap.page-id-23 .company-president-career__item,
  #body_wrap.page-id-23 .company-president-career.is-visible .company-president-career__item {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}



/* ======================================
  Company History Timeline
  会社沿革：スクロール連動ライン
====================================== */

#body_wrap.page-id-23 .company-history {
  --history-progress: 1;
  --history-line-x: 174px;

  width: min(980px, calc(100% - 48px));
  margin: clamp(72px, 7vw, 112px) auto clamp(78px, 8vw, 126px);
  color: #061b3a;
}

#body_wrap.page-id-23 .company-history.is-enhanced {
  --history-progress: 0;
}

#body_wrap.page-id-23 .company-history__inner {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4vw, 56px) clamp(24px, 4vw, 60px);
  border: 1px solid rgba(6, 27, 58, 0.095);
  border-radius: clamp(24px, 2.8vw, 38px);
  background:
    radial-gradient(circle at 10% 12%, rgba(22, 198, 211, 0.075), transparent 34%),
    radial-gradient(circle at 92% 86%, rgba(141, 194, 31, 0.055), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(246, 251, 252, 0.42));
  box-shadow:
    0 18px 50px rgba(6, 27, 58, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  box-sizing: border-box;
  isolation: isolate;
}

#body_wrap.page-id-23 .company-history__inner::before {
  content: "HISTORY";
  position: absolute;
  right: -0.08em;
  bottom: -0.16em;
  z-index: 0;
  color: rgba(6, 27, 58, 0.035);
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(82px, 13vw, 176px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
  pointer-events: none;
}

#body_wrap.page-id-23 .company-history__title {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  margin-bottom: clamp(34px, 4vw, 54px) !important;
}

/* timeline */
#body_wrap.page-id-23 .company-history__timeline {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#body_wrap.page-id-23 .company-history__timeline::before,
#body_wrap.page-id-23 .company-history__timeline::after {
  content: "";
  position: absolute;
  top: 16px;
  left: var(--history-line-x);
  width: 2px;
  border-radius: 999px;
  pointer-events: none;
}

#body_wrap.page-id-23 .company-history__timeline::before {
  bottom: 16px;
  background:
    linear-gradient(
      180deg,
      rgba(6, 27, 58, 0.08),
      rgba(6, 27, 58, 0.16),
      rgba(6, 27, 58, 0.08)
    );
}

#body_wrap.page-id-23 .company-history__timeline::after {
  height: calc((100% - 32px) * var(--history-progress));
  background:
    linear-gradient(
      180deg,
      #16c6d3 0%,
      #008ea0 46%,
      #061b3a 100%
    );
  box-shadow:
    0 0 18px rgba(22, 198, 211, 0.22),
    0 0 34px rgba(0, 142, 160, 0.12);
  transform-origin: top center;
}

#body_wrap.page-id-23 .company-history__item {
  position: relative;
  display: grid;
  grid-template-columns: 132px 84px minmax(0, 1fr);
  align-items: start;
  column-gap: 0;
  min-width: 0;
  padding: clamp(18px, 2.1vw, 26px) 0;
}

#body_wrap.page-id-23 .company-history.is-enhanced .company-history__item {
  opacity: 0.32;
  filter: blur(3px);
  transform: translateY(18px);
  transition:
    opacity 0.62s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.62s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.62s cubic-bezier(0.19, 1, 0.22, 1);
}

#body_wrap.page-id-23 .company-history.is-enhanced .company-history__item.is-visible {
  opacity: 1;
  filter: none;
  transform: none;
}

#body_wrap.page-id-23 .company-history__year {
  color: #008ea0;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

#body_wrap.page-id-23 .company-history__marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 28px;
}

#body_wrap.page-id-23 .company-history__marker::before {
  content: "";
  position: relative;
  z-index: 2;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(0, 142, 160, 0.42);
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 7px rgba(22, 198, 211, 0.07),
    0 7px 18px rgba(6, 27, 58, 0.10);
  transition:
    background-color 0.36s ease,
    border-color 0.36s ease,
    box-shadow 0.36s ease,
    transform 0.36s ease;
}

#body_wrap.page-id-23 .company-history__item.is-visible .company-history__marker::before {
  background: #16c6d3;
  border-color: #ffffff;
  box-shadow:
    0 0 0 8px rgba(22, 198, 211, 0.16),
    0 0 28px rgba(22, 198, 211, 0.28),
    0 8px 20px rgba(6, 27, 58, 0.12);
  transform: scale(1.12);
}

#body_wrap.page-id-23 .company-history__body {
  min-width: 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 28px);
  border: 1px solid rgba(6, 27, 58, 0.085);
  border-radius: clamp(16px, 1.8vw, 22px);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.70),
      rgba(248, 252, 253, 0.48)
    );
  box-shadow:
    0 10px 28px rgba(6, 27, 58, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

#body_wrap.page-id-23 .company-history__body p {
  margin: 0 !important;
  color: #061b3a;
  font-size: clamp(15px, 1.12vw, 17px);
  font-weight: 750;
  line-height: 1.82;
  letter-spacing: 0.045em;
}

#body_wrap.page-id-23 .company-history__body p + p {
  margin-top: 0.3em !important;
}

#body_wrap.page-id-23 .company-history__body br {
  display: block;
}

/* タブレット */
@media (max-width: 959px) {
  #body_wrap.page-id-23 .company-history {
    --history-line-x: 146px;

    width: min(92vw, 760px);
    margin-top: 62px;
    margin-bottom: 86px;
  }

  #body_wrap.page-id-23 .company-history__inner {
    padding: 32px 26px;
    border-radius: 28px;
  }

  #body_wrap.page-id-23 .company-history__item {
    grid-template-columns: 112px 68px minmax(0, 1fr);
    padding: 18px 0;
  }

  #body_wrap.page-id-23 .company-history__marker {
    width: 68px;
  }
}

/* スマホ */
@media (max-width: 600px) {
  #body_wrap.page-id-23 .company-history {
    --history-line-x: 16px;

    width: min(100%, calc(100vw - 30px));
    margin-top: 48px;
    margin-bottom: 66px;
  }

  #body_wrap.page-id-23 .company-history__inner {
    padding: 26px 18px;
    border-radius: 22px;
  }

  #body_wrap.page-id-23 .company-history__inner::before {
    right: -0.18em;
    bottom: -0.12em;
    font-size: 76px;
  }

  #body_wrap.page-id-23 .company-history__title {
    margin-bottom: 26px !important;
  }

  #body_wrap.page-id-23 .company-history__timeline {
    padding-left: 32px !important;
  }

  #body_wrap.page-id-23 .company-history__timeline::before,
  #body_wrap.page-id-23 .company-history__timeline::after {
    top: 18px;
    left: var(--history-line-x);
  }

  #body_wrap.page-id-23 .company-history__timeline::before {
    bottom: 18px;
  }

  #body_wrap.page-id-23 .company-history__timeline::after {
    height: calc((100% - 36px) * var(--history-progress));
  }

  #body_wrap.page-id-23 .company-history__item {
    grid-template-columns: 1fr;
    padding: 13px 0;
  }

  #body_wrap.page-id-23 .company-history__marker {
    position: absolute;
    top: 17px;
    left: -22px;
    width: 14px;
    height: 14px;
  }

  #body_wrap.page-id-23 .company-history__marker::before {
    width: 11px;
    height: 11px;
    box-shadow:
      0 0 0 6px rgba(22, 198, 211, 0.07),
      0 6px 14px rgba(6, 27, 58, 0.10);
  }

  #body_wrap.page-id-23 .company-history__year {
    margin-bottom: 7px;
    font-size: 13px;
    line-height: 1.32;
  }

  #body_wrap.page-id-23 .company-history__body {
    padding: 15px 16px;
    border-radius: 16px;
  }

  #body_wrap.page-id-23 .company-history__body p {
    font-size: 14.5px;
    line-height: 1.62;
    letter-spacing: 0.025em;
  }

  #body_wrap.page-id-23 .company-history__body p + p {
    margin-top: 0.22em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #body_wrap.page-id-23 .company-history.is-enhanced {
    --history-progress: 1;
  }

  #body_wrap.page-id-23 .company-history.is-enhanced .company-history__item,
  #body_wrap.page-id-23 .company-history.is-enhanced .company-history__item.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}


/* ======================================
  Company Video Typography
  会社概要：動画テキスト切り抜き
====================================== */

#body_wrap.page-id-23 .poscom-company-video-type {
  position: relative;
  width: min(100%, 1180px);
  height: clamp(120px, 15vw, 210px);
  margin: clamp(28px, 3vw, 44px) auto 0 !important;
  overflow: hidden;
  background: rgba(248, 251, 250, 0.54);
  border: 1px solid rgba(6, 27, 58, 0.045);
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 8px 18px rgba(6, 27, 58, 0.018);
}

#body_wrap.page-id-23 .poscom-company-video-type__movie,
#body_wrap.page-id-23 .poscom-company-video-type__mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#body_wrap.page-id-23 .poscom-company-video-type__movie {
  object-fit: cover;
  object-position: center center;

  filter:
    saturate(0.74)
    contrast(1.14)
    brightness(0.94) !important;
}

#body_wrap.page-id-23 .poscom-company-video-type__mask {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.84) 0%,
      rgba(248, 250, 250, 0.90) 58%,
      rgba(245, 248, 248, 0.965) 100%
    ) !important;

  color: #000;
  text-align: center;
  mix-blend-mode: screen;
}

#body_wrap.page-id-23 .poscom-company-video-type__eyebrow {
  display: none !important;
}

#body_wrap.page-id-23 .poscom-company-video-type__title {
  margin: 0 !important;
  color: #000;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(58px, 9.8vw, 150px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  opacity: 0.9;
}

#body_wrap.page-id-23 .poscom-company-video-type__sub {
  margin: 0.52em 0 0 !important;
  color: #000;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(12px, 1.25vw, 20px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.24em;
  opacity: 0.78;
}

#body_wrap.page-id-23 .poscom-company-video-type + h2.poscom-ttl-gradient,
#body_wrap.page-id-23 .poscom-company-video-type + h2.wp-block-heading {
  margin-top: clamp(8px, 1.1vw, 16px) !important;
}

/* PCだけ：会社情報前の動画タイポ上余白を少し詰める */
@media (min-width: 960px) {
  #body_wrap.page-id-23 .poscom-company-video-type {
    margin-top: 0px !important;
  }
}

/* タブレット */
@media (min-width: 601px) and (max-width: 959px) {
  #body_wrap.page-id-23 .poscom-company-video-type {
    width: min(100%, calc(100vw - 48px));
    height: clamp(118px, 23vw, 180px);
    margin: 18px auto 0 !important;
  }

  #body_wrap.page-id-23 .poscom-company-video-type__title {
    font-size: clamp(52px, 12.8vw, 106px);
  }

  #body_wrap.page-id-23 .poscom-company-video-type + h2.poscom-ttl-gradient,
  #body_wrap.page-id-23 .poscom-company-video-type + h2.wp-block-heading {
    margin-top: 12px !important;
  }
}

/* スマホ */
@media (max-width: 600px) {
  #body_wrap.page-id-23 .poscom-company-video-type {
    width: min(100%, calc(100vw - 32px));
    height: clamp(86px, 26vw, 118px);
    margin: 20px auto 0 !important;
    background: rgba(248, 251, 250, 0.5);
    border-color: rgba(6, 27, 58, 0.04);
    border-radius: 18px;
    box-shadow: none !important;
  }

  #body_wrap.page-id-23 .poscom-company-video-type__movie {
    filter:
      saturate(0.70)
      contrast(1.12)
      brightness(0.94) !important;
  }

  #body_wrap.page-id-23 .poscom-company-video-type__mask {
    background:
      radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(248, 250, 250, 0.91) 60%,
        rgba(245, 248, 248, 0.97) 100%
      ) !important;
  }

  #body_wrap.page-id-23 .poscom-company-video-type__title {
    font-size: clamp(34px, 12.8vw, 54px);
    opacity: 0.88;
  }

  #body_wrap.page-id-23 .poscom-company-video-type__sub {
    margin-top: 0.38em !important;
    opacity: 0.76;
  }

  #body_wrap.page-id-23 .poscom-company-video-type + h2.poscom-ttl-gradient,
  #body_wrap.page-id-23 .poscom-company-video-type + h2.wp-block-heading {
    margin-top: 12px !important;
  }
}