/* ============================================================
   SEMCO Theme - Components CSS
   各セクション・コンポーネント別スタイル
   ============================================================ */

/* ─── Header ────────────────────────────────────────────────── */
.site-header {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    99999;
  height:     70px;
}

@media (min-width: 1024px) {
  .site-header { height: 88px; }
}

.header-inner {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  height:           48px;
  margin-top:       15px;
  border-radius:    30px;
  padding-left:     21px;
  padding-right:    14px;
  backdrop-filter:  blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  background-color: rgba(255,255,255,0.8);
  border:           1px solid rgba(188,188,188,0.3);
}

@media (min-width: 1024px) {
  .header-inner {
    height:        58px;
    margin-top:    30px;
    border-radius: 50px;
    padding-left:  48px;
    padding-right: 48px;
  }
}

/* 特別背景ページ（ホーム等）でのヘッダー: 半透明ホワイト */
.header-inner--special {
  background-color: rgba(255,255,255,0.375); /* #ffffff60 */
}

.header-logo img {
  height:    12px;
  width:     auto;
}

@media (min-width: 1024px) {
  .header-logo img { width: 140px; height: 16px; }
}

/* デスクトップナビ */
.header-nav {
  display:     none;
  align-items: center;
  gap:         16px;
}

@media (min-width: 1280px) {
  .header-nav { gap: 26px; }
}

@media (min-width: 1024px) {
  .header-nav { display: flex; }
}

.header-nav__link {
  font-size:       12px;
  font-weight:     500;
  color:           #000;
  white-space:     nowrap;
  transition:      color var(--transition-fast);
  text-decoration: none;
}

@media (min-width: 1280px) {
  .header-nav__link { font-size: 13px; }
}

.header-nav__link:hover,
.header-nav__link.is-current {
  color: var(--color-primary);
}

/* ハンバーガーボタン */
.header-hamburger {
  display:    flex;
  flex-direction: column;
  justify-content: space-between;
  width:      30px;
  height:     8px;
  padding:    8px;
  box-sizing: content-box;
  color:      var(--color-primary);
  cursor:     pointer;
}

@media (min-width: 1024px) {
  .header-hamburger { display: none; }
}

.header-hamburger__line {
  display:    block;
  width:      100%;
  height:     1px;
  background: currentColor;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.header-hamburger.is-open .header-hamburger__line:first-child {
  transform: rotate(30deg) translateY(4px);
}
.header-hamburger.is-open .header-hamburger__line:last-child {
  transform: rotate(-30deg) translateY(-4px);
}

/* ─── Mobile Menu ───────────────────────────────────────────── */
.mobile-menu {
  position:   fixed;
  inset:      0;
  z-index:    100000;
  transform:  translateY(-100%);
  transition: transform 0.5s ease-in-out;
}

.mobile-menu.is-open {
  transform: translateY(0);
}

.mobile-menu__bg {
  position:         absolute;
  inset:            0;
  background-color: var(--color-primary);
}

.mobile-menu__close {
  position: absolute;
  top:      22px;
  right:    34px;
  z-index:  10;
  padding:  8px;
  color:    #fff;
  cursor:   pointer;
}

.mobile-menu__close-icon {
  position: relative;
  width:    26px;
  height:   15px;
  display:  block;
}

.mobile-menu__close-icon::before,
.mobile-menu__close-icon::after {
  content:          '';
  position:         absolute;
  top:              50%;
  left:             0;
  width:            100%;
  height:           1px;
  background-color: #fff;
}

.mobile-menu__close-icon::before { transform: translateY(-50%) rotate(30deg); }
.mobile-menu__close-icon::after  { transform: translateY(-50%) rotate(-30deg); }

.mobile-menu__nav {
  display:         flex;
  flex-direction:  column;
  padding-top:     148px;
  padding-left:    76px;
  gap:             24.5px;
  position:        relative;
  z-index:         1;
}

.mobile-menu__item {
  opacity:   0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.mobile-menu.is-open .mobile-menu__item { opacity: 1; transform: translateY(0); }

/* stagger delays */
.mobile-menu.is-open .mobile-menu__item:nth-child(1) { transition-delay: 100ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(2) { transition-delay: 150ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(3) { transition-delay: 200ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(4) { transition-delay: 250ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(5) { transition-delay: 300ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(6) { transition-delay: 350ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(7) { transition-delay: 400ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(8) { transition-delay: 450ms; }

.mobile-menu__link {
  display:         block;
  color:           #fff;
  font-size:       16px;
  font-weight:     500;
  padding:         0;
  text-decoration: none;
  transition:      opacity var(--transition-fast);
}

.mobile-menu__link:hover {
  opacity: 0.7;
}

/* ─── Footer ────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index:  40;
}

.footer-video {
  width:      100%;
  height:     240px;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .footer-video { height: 300px; }
}

.footer-content {
  background-color: var(--color-footer-bg);
  padding-top:      58px;
  padding-bottom:   calc(80px + env(safe-area-inset-bottom, 0px));
  text-align:       center;
}

@media (min-width: 1024px) {
  .footer-content {
    padding-top: 80px;
  }
}

.footer-logo {
  display:       flex;
  justify-content: center;
  margin-bottom: 27px;
}

@media (min-width: 1024px) {
  .footer-logo {
    margin-bottom: 39px;
  }
}

.footer-logo img {
  height: 22px;
  width:  160px;
}

@media (min-width: 1024px) {
  .footer-logo img {
    height: 22px;
    width:  188px;
  }
}

/* 言語切り替え */
.footer-lang-switch {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             12px;
  margin-bottom:   26px;
}

@media (min-width: 1024px) {
  .footer-lang-switch {
    margin-bottom: 36px;
  }
}
.footer-lang-switch__link {
  font-family:    var(--font-display);
  font-size:      13px;
  font-weight:    400;
  color:          #fff;
  text-decoration: none;
  transition:     color 0.3s;
}

.footer-lang-switch__link:hover {
  opacity: 0.7;
}

.footer-lang-switch__link.is-current {
  color: #808080;
  pointer-events: none;
}

.footer-lang-switch__divider {
  display:    block;
  width:      1px;
  height:     13px;
  background: #808080;
}

.footer-copyright {
  font-family:  var(--font-display);
  font-size:    12px;
  font-weight:  200;
  letter-spacing:  0.01em;
  color:        #fff;
}

@media (min-width: 1024px) {
  .footer-copyright {
    font-size: 12px;
    font-weight:  400;
    color:        #fff;
    
  }
}

/* ─── Hero Section ──────────────────────────────────────────── */
.hero {
  position: relative;
  background-color: #021a3d;
}

/* iOS バウンス時の白い隙間防止 */
.home {
  overscroll-behavior-y: none;
}

.hero-bg {
  position: fixed;
  top:      0;
  left:     0;
  width:    100%;
  height:   100lvh;
  overflow: hidden;
}

.hero-bg__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
  filter:     blur(10px);
  transform:  scale(1.05);
}

/* SVGマスク テキスト コンテナ */
.hero-mask-container {
  position:  absolute;
  top:       46%;
  left:      12px;
  transform: translateY(-50%);
  z-index:   10;
}

@media (min-width: 1024px) {
  .hero-mask-container { left: 55px; top: 44.5%;}
}

/* デスクトップマスク（xl以上） */
.hero-mask--desktop {
  display: none;
}
@media (min-width: 1280px) {
  .hero-mask--desktop {
    display: block;
    position: relative;
    width:    85vw;
    max-width: 1400px;
    height:   clamp(333px, 50vw, 500px);
  }
}

/* タブレットマスク（md〜xl） */
.hero-mask--tablet {
  display: none;
}
@media (min-width: 768px) and (max-width: 1279px) {
  .hero-mask--tablet {
    display:  block;
    position: relative;
    width:    90vw;
    height:   clamp(300px, 35vw, 500px);
  }
}

/* モバイルマスク（768px未満） */
.hero-mask--mobile {
  display: block;
  position: relative;
  width:   74vw;
  height:  350px;
}
@media (min-width: 768px) {
  .hero-mask--mobile { display: none; }
}

.hero-mask-video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Desktop マスクスケーリング */
.hero-text-desktop {
  transform:        scale(clamp(0.5, 13.8vw / 200, 1));
  transform-origin: left center;
}

.hero-text-tablet {
  transform:        scale(clamp(0.57, 10.4vw / 140, 1));
  transform-origin: left center;
}

/* Safariフォールバック */
.hero-safari-fallback {
  position:   absolute;
  inset:      0;
  display:    flex;
  flex-direction: column;
  justify-content: center;
  color:      #fff;
  opacity:    0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size:  200px;
  line-height: 1;
}

/* グリッドオーバーレイ */
.hero-grid-overlay {
  position: absolute;
  inset:    0;
  z-index:  10;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 10px 10px;
}

/* Hero コンテンツ */
.hero-content {
  position: relative;
  z-index:  30;
}

.hero-content__first {
  min-height: 91lvh;
  display:    flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 30px;
}

@media (min-width: 1024px) {
  .hero-content__first {
    padding-bottom: 60px;
    min-height: 89lvh;
  }
}

.hero-content__first-inner {
  margin-top: auto;
  padding-left: 20px;
}

@media (min-width: 1024px) {
  .hero-content__first-inner {
    padding-left: 62px;
  }
}

.hero-main-heading {
  font-size:      36px;
  font-weight:    400;
  color:          #fff;
  line-height:    1.4;
  letter-spacing: 0.05em;
  margin-bottom:  0;
}

@media (min-width: 640px)  { .hero-main-heading { font-size: 36px; font-weight:    700;} }
@media (min-width: 768px)  { .hero-main-heading { font-size: 55px; font-weight:    700;} }
@media (min-width: 1024px) { .hero-main-heading { font-size: 70px; font-weight:    700;} }

/* SP (デフォルト) */
.hero-content__second {
  position:        relative;
  width:           100vw;
  padding-top:     61px;
  padding-bottom:  120px;
}

/* PC */
@media (min-width: 1024px) {
  .hero-content__second {
    padding-top:     0px;
    padding-bottom:  178px;
  }
}

/* スクロール連動の背景色オーバーレイ（固定背景全体） */
.hero-bg::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     rgba(2, 58, 148, 0.7);
  opacity:        var(--hero-bg-overlay-opacity, 0);
  z-index:        15;
  pointer-events: none;
  transition:     opacity 0.1s ease-out;
}

.hero-content__second-inner {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 672px;
}

@media (min-width: 1024px) {
  .hero-content__second-inner {
    padding-left: 62px;
    max-width: none;
  }
}

.hero-section-title {
  font-size:      20px;
  font-weight:    500;
  color:          #fff;
  line-height:    1.4;
  letter-spacing: 0.05em;
  margin-bottom:  20px;
  margin-top:     40px;
}

@media (min-width: 768px) {
  .hero-section-title {
    font-size:   24px;
    margin-bottom: 20px;
    margin-top:    60px;
  }
}

@media (min-width: 1024px) {
  .hero-section-title { margin-top: 177px; margin-bottom: 30px;}
  .hero-section-title--second { margin-top: 102px; }
}

/* ヒーロー 1つ目のタイトルブロック下余白 */
.hero-title-wrapper {
  margin-bottom: 60px;
}

@media (min-width: 1024px) {
  .hero-title-wrapper {
    margin-bottom: 100px;
  }
}

.hero-section-text {
  font-size:      13px;
  color:          #fff;
}

@media (min-width: 1024px) {
  .hero-section-text { font-size: 16px; line-height:    1.7;}
}

/* ─── Solution Section ──────────────────────────────────────── */
.solution-section {
  position:      relative;
  background:    #fff;
  padding-top:   80px;
  padding-bottom: 80px;
  overflow:      hidden;
  z-index:       20;
  padding-left:  max(20px, calc((100vw - 1600px) / 2));
}

@media (min-width: 1024px) {
  .solution-section {
    padding-top:    124px;
    padding-bottom: 120px;
  }
}

/* ─── single-solution 個別ページ用オーバーライド ─── */
.solution-section--single {
  padding-bottom: 120px;
}

@media (min-width: 1024px) {
  .solution-section--single {
    padding-bottom: 120px;
  }
}

.solution-header {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .solution-header { padding-left: 124px; }
}

.solution-dots {
  display:    flex;
  align-items: center;
  gap:        12px;
  margin-top: 67px;
  margin-bottom: 20px;
}

.solution-dot {
  border-radius: 50%;
  background:    #000;
  transition:    all var(--transition-base);
  cursor:        pointer;
  border:        none;
  width:         4px;
  height:        4px;
  padding:       0;
}

.solution-dot.is-active {
  width:  8px;
  height: 8px;
}

.solution-carousel-wrapper {
  position: relative;
}

/* Solution heading: title + description side by side on desktop */
.solution-header-content {
  margin-bottom: 60px;
}

@media (min-width: 768px) {
  .solution-header-content {
    display:     flex;
    align-items: flex-end;
    gap:         16px;
    margin-bottom: 40px;
  }
}

@media (min-width: 1024px) {
  .solution-header-content { gap: 247px; }
}

.solution-header-desc {
  max-width: 576px;
  padding-right: 20px;
  margin-top:    35px;
}

@media (min-width: 1024px) {
  .solution-header-desc {
    padding-right: 0;
    margin-top:    0;
    margin-bottom: 8px;
  }
}

/* Solution carousel inner: responsive left indent */
.solution-carousel-inner {
  padding-left: 0;
}

@media (min-width: 1024px) {
  .solution-carousel-inner { padding-left: 124px; }
}

.solution-next-btn {
  display:          none;
  position:         absolute;
  right:            40px;
  z-index:          20;
  background-color: var(--color-primary);
  border-radius:    50%;
  width:            64px;
  height:           64px;
  align-items:      center;
  justify-content:  center;
  color:            #fff;
  box-shadow:       0 4px 12px rgba(0,0,0,0.2);
  transition:       opacity var(--transition-fast);
  transform:        translateY(-50%);
  cursor:           pointer;
  border:           none;
}

.solution-next-btn:hover { opacity: 0.9; }

@media (min-width: 768px) {
  .solution-next-btn { display: flex; }
}

.solution-scroll-container {
  display:         flex;
  overflow-x:      auto;
  gap:             16px;
  padding-bottom:  16px;
  scroll-snap-type: x mandatory;
}

@media (min-width: 768px) {
  .solution-scroll-container { gap: 24px; }
}

/* ─── front-page ソリューションカード（.solution-section スコープ） ─── */
.solution-section .solution-card {
  flex-shrink:       0;
  width:             280px;
  scroll-snap-align: start;
}

.solution-card__link {
  display:         block;
  color:           inherit;
  text-decoration: none;
}

a.product-sol-card {
  display:         block;
  color:           inherit;
  text-decoration: none;
}

@media (min-width: 768px) {
  .solution-section .solution-card { width: calc(100% / 3); }
}

.solution-section .solution-card__image-wrap {
  position:     relative;
  width:        100%;
  aspect-ratio: 382 / 255;
  overflow:     hidden;
  transition:   transform var(--transition-base);
}

.solution-section .solution-card__image-wrap:hover {
  transform: scale(1.05);
}

.solution-section .solution-card__image-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.solution-section .solution-card__placeholder {
  width:            100%;
  height:           100%;
  background-color: #d1d5db;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  color:            #6b7280;
}

.solution-section .solution-card__body { margin-top: 20px; }

@media (min-width: 1024px) {
  .solution-section .solution-card__body { margin-top: 30px; }
}

.solution-section .solution-card__title {
  font-family:    var(--font-sans);
  font-size:      16px;
  font-weight:    500;
  color:          #000;
  margin-bottom:  24px;
  line-height:    1.5;
}

@media (min-width: 1024px) {
  .solution-section .solution-card__title { font-size: 18px; 
    margin-bottom:  20px;}
}

.solution-section .solution-card__text {
  font-size:      13px;
  line-height:    180%;
  color:          #000;
  letter-spacing: 0.05em;
}

/* ─── front-page ソリューション View all（.solution-section スコープ） ─── */
/* SP (デフォルト) */
.solution-section .solution-view-all-wrap {
  padding-left: 0;
}

/* PC */
@media (min-width: 1024px) {
  .solution-section .solution-view-all-wrap {
    padding-left: 196px;
  }
}

/* SP (デフォルト) */
.solution-section .solution-view-all {
  display:         flex;
  justify-content: center;
  margin-top:      58px;
}

/* PC */
@media (min-width: 1024px) {
  .solution-section .solution-view-all {
    display:         flex;
    justify-content: flex-end;
    margin-top:      55px;
  }
}

/* ─── front-page ソリューション btn-outline（.solution-section スコープ） ─── */
/* SP (デフォルト) */
.solution-section .solution-view-all .btn-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           193px;
  border-radius:   9999px;
  padding:         9px 14px;
  font-size:       16px;
  font-weight:     500;
  letter-spacing:  0em;
  transition:      all var(--transition-base);
  cursor:          pointer;
  border:          1px solid;
  white-space:     nowrap;
}

/* PC */
@media (min-width: 1024px) {
  .solution-section .solution-view-all .btn-outline {
    width:           193px;
    padding:         10px 24px;
    font-size:       16px;
  }
}

/* ─── Recruit CTA Section ───────────────────────────────────── */
/* SP: cta-section__title 下の mt-50 を 205px に */
.cta-section__mobile .mt-50 {
  margin-top: 205px;
}

/* SP: cta-section__title 下の mt-60 を 182px に（Contact Us等 heading なし） */
.cta-section__mobile .mt-60 {
  margin-top: 181px;
}

.cta-section {
  position: relative;
  color:    #fff;
}

.cta-section--has-heading {
  min-height: 784px;
}

.cta-section--no-heading {
  height: 616px;
}

@media (min-width: 1024px) {
  .cta-section--has-heading { min-height: 522px; }
  .cta-section--no-heading  { height:     382px; }
}

.cta-section__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

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

.cta-section__bg-img--desktop { display: none; }
.cta-section__bg-img--mobile  { display: block; }

@media (min-width: 768px) {
  .cta-section__bg-img--desktop { display: block; }
  .cta-section__bg-img--mobile  { display: none; }
}

.cta-section__overlay-blue {
  position:       absolute;
  inset:          0;
  background-color: #70A1D8;
  opacity:        0.5;
  mix-blend-mode: multiply;
}

.cta-section__overlay-black {
  position:       absolute;
  inset:          0;
  background-color: #000;
  opacity:        0.2;
  mix-blend-mode: multiply;
}

.cta-section__inner {
  position:       relative;
  z-index:        10;
  height:         100%;
  max-width:      var(--container-max);
  margin-left:    auto;
  margin-right:   auto;
  padding:        57px 20px;
}

@media (min-width: 768px) {
  .cta-section__inner { padding: 77px 40px 0px; }
}

/* Mobile: Flex col */
.cta-section__mobile {
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  height:         100%;
}

@media (min-width: 1024px) {
  .cta-section__mobile { display: none; }
}

/* PC: 3-col grid */
.cta-section__pc {
  display: none;
}

@media (min-width: 1024px) {
  .cta-section__pc {
    display:             grid;
    grid-template-columns: 1fr 2fr;
    gap:                 4px;
    height:              100%;
    align-items:         start;
  }
}

.cta-section__subtitle {
  font-size:   13px;
  font-weight: 400;
  opacity:     0.9;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

@media (min-width: 1024px) {
  .cta-section__subtitle { font-size: 14px; }
}

.cta-section__title {
  font-family:  var(--font-display);
  font-size:    40px;
  font-weight:  300;
  line-height:  1.2;
  margin-bottom: 64px;
}

@media (min-width: 1024px) {
  .cta-section__title { font-size: 50px; }
}

.cta-section__heading {
  font-family:  var(--font-sans);
  font-size:    30px;
  font-weight:  500;
  letter-spacing: 0.05em;
  line-height:  1.32;
  margin-top: 3px;
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  .cta-section__heading {
    font-size:    40px;
    margin-bottom: 55px;
  }
}

.cta-section__description {
  font-size:   16px;
  font-weight: 300;
  line-height: 1.7;
  opacity:     0.9;
  width:       100%;
  max-width:   695px;
  padding-top: 25px;
}

@media (min-width: 1024px) {
  .cta-section__description {
    font-size:   16px;
    font-weight: 400;
    line-height: 1.7;
    opacity:     0.9;
    width:       100%;
    max-width:   695px;
    padding-top: 25px;
  }
}

/* ─── front-page Recruit CTA heading ─── */
/* SP (デフォルト) */
body.home .cta-section__heading {
  font-family:  var(--font-sans);
  font-size:    30px;
  font-weight:  500;
  letter-spacing: 0.05em;
  line-height:  1.32;
  margin-top: 3px;
  margin-bottom: 32px;
}

/* PC */
@media (min-width: 1024px) {
  body.home .cta-section__heading {
    font-size:    40px;
    margin-bottom: 28px;
  }
}

/* ─── front-page Recruit CTA description ─── */
/* SP (デフォルト) */
body.home .cta-section__description {
  font-size:   15px;
  line-height: 1.78;
  opacity:     0.9;
  width:       100%;
  max-width:   695px;
  padding-top: 3px;
}

/* PC */
@media (min-width: 1024px) {
  body.home .cta-section__description {
    font-size:   16px;
    line-height: 1.7;
    opacity:     0.9;
    width:       100%;
    max-width:   695px;
    padding-top: 25px;
  }
}

.cta-section__btn-wrap {
  display:         flex;
  justify-content: flex-end;
  margin-top:      58px;
}

@media (min-width: 1024px) {
  .cta-section__btn-wrap {
    margin-top: 68px;
  }
}
/* ─── front-page Recruit CTA btn-wrap ─── */
/* SP (デフォルト) */
body.home .cta-section__btn-wrap {
  display:         flex;
  justify-content: flex-end;
  margin-top:      34px;
}

/* PC */
@media (min-width: 1024px) {
  body.home .cta-section__btn-wrap {
    display:         flex;
    justify-content: flex-end;
    margin-top:      40px;
  }
}

/* ─── front-page Recruit CTA btn-outline ─── */
/* SP (デフォルト) */
body.home .cta-section__btn-wrap .btn-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           193px;
  border-radius:   9999px;
  padding:         9px 14px;
  font-size:       16px;
  font-weight:     500;
  letter-spacing:  0.1em;
  transition:      all var(--transition-base);
  cursor:          pointer;
  border:          1px solid;
  white-space:     nowrap;
}

/* PC */
@media (min-width: 1024px) {
  body.home .cta-section__btn-wrap .btn-outline {
    display:         inline-flex;
    align-items:     center;
    justify-content: space-between;
    width:           193px;
    border-radius:   9999px;
    padding:         11px 24px;
    font-size:       16px;
    font-weight:     500;
    letter-spacing:  0.1em;
    transition:      all var(--transition-base);
    cursor:          pointer;
    border:          1px solid;
    white-space:     nowrap;
  }
}

/* ─── Contact Us CTA btn-outline（.cta-section--no-heading スコープ） ─── */
/* SP (デフォルト) */
.cta-section--no-heading .cta-section__btn-wrap .btn-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           199px;
  border-radius:   9999px;
  padding:         11px 16px;
  font-size:       16px;
  font-weight:     400;
  letter-spacing:  0.1em;
  transition:      all var(--transition-base);
  cursor:          pointer;
  border:          1px solid;
  white-space:     nowrap;
}

/* PC */
@media (min-width: 1024px) {
  .cta-section--no-heading .cta-section__btn-wrap .btn-outline {
    display:         inline-flex;
    align-items:     center;
    justify-content: space-between;
    width:           193px;
    border-radius:   9999px;
    padding:         11px 16px;
    font-size:       16px;
    font-weight:     500;
    letter-spacing:  0.1em;
    transition:      all var(--transition-base);
    cursor:          pointer;
    border:          1px solid;
    white-space:     nowrap;
  }
}

/* ─── Info Section ──────────────────────────────────────────── */
/* ─── フロントページ Info セクション ───────────────────────── */
/* SP (デフォルト) */
.front-info-section {
  position:       relative;
  padding-top:    80px;
  padding-bottom: 80px;
  background:     var(--color-bg);
  overflow:       hidden;
  margin-left:    auto;
  padding-left:   max(20px, calc((100vw - 1600px) / 2 + 40px));
}

/* PC */
@media (min-width: 1024px) {
  .front-info-section {
    padding-top:    118px;
    padding-bottom: 80px;
    padding-left:   max(20px, calc((100vw - 1600px) / 2 + 40px));
  }
}

.front-info-header { margin-bottom: 0; }

.front-info-layout {
  padding-left: 0;
}

.front-info-layout__title {
  margin-bottom: 53px;
}

.front-info-layout__content {
  /* モバイル: 縦積み */
}

@media (min-width: 1024px) {
  .front-info-layout {
    display: flex;
    gap:     128px;
    padding-left: 20px;
  }
  .front-info-layout__title {
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .front-info-layout__content {
    flex: 1;
    min-width: 0;
  }
}

.front-info-event-heading {
  font-family: var(--font-display);
  font-size:   28px;
  font-weight: 300;
  color:       #000;
  margin-bottom: 30px;
}

@media (min-width: 1024px) {
  .front-info-event-heading { font-size: 30px; margin-top: 18px; margin-bottom: 22px;}
}

/* SP (デフォルト) — 390px時に160px相当、画面幅に連動 */
#swiper-info-event .swiper-slide {
  width:  41vw;
  height: auto;
}

/* PC */
@media (min-width: 1024px) {
  #swiper-info-event .swiper-slide {
    width: 234px;
  }
}

.front-info-event-carousel-wrap {
  position:      relative;
  margin-bottom: 55px;
}

.front-info-news-wrap {
  padding-right: 20px;
}

@media (min-width: 1024px) {
  .front-info-news-wrap { padding-right: 40px; }
}

/* SP (デフォルト) */
.front-info-view-all {
  display:         flex;
  justify-content: center;
  margin-top:      60px;
  margin-bottom:   40px;
}

.front-info-view-all .btn-outline {
  padding: 10px 15px;
}

/* PC */
@media (min-width: 1024px) {
  .front-info-view-all {
    justify-content: flex-end;
    margin-top:      57px;
  }
  .front-info-view-all .btn-outline {
    padding: 18px 24px 18px 30px;
  }
}

.front-info-section__layout {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

@media (min-width: 1024px) {
  .front-info-section__layout {
    flex-direction: row;
    align-items:    center;
    gap:            128px;
  }
}

.front-info-event-card {
  flex-shrink:       0;
  scroll-snap-align: start;
  overflow:          hidden;
  color:             inherit;
  text-decoration:   none;
  display:           block;
}

.front-info-event-card__image-wrap {
  overflow: hidden;
}

/* SP (デフォルト) */
.front-info-event-card__image-wrap img {
  width:        100%;
  aspect-ratio: 234 / 156;
  object-fit:   cover;
  transition:   transform var(--transition-slow);
}

.front-info-event-card__placeholder {
  width:        100%;
  aspect-ratio: 234 / 156;
  background:   #d1d5db;
}

/* サムネイル未登録時のロゴ表示 */
.front-info-event-card__image-wrap img.front-info-event-card__image--logo {
  object-fit: contain;
  padding:    16px 24px;
  background: #fff;
}
.front-info-event-card:hover .front-info-event-card__image-wrap img.front-info-event-card__image--logo {
  transform: none;
}

/* PC */
@media (min-width: 1024px) {
  .front-info-event-card__image-wrap img {
    width:  234px;
    height: 156px;
  }
  .front-info-event-card__placeholder {
    width:  234px;
    height: 156px;
  }
}

.front-info-event-card:hover .front-info-event-card__image-wrap img {
  transform: scale(1.15);
}

.front-info-event-card__body {
  margin-top: 10px;
}

@media (min-width: 1024px) {
  .front-info-event-card__body {
    margin-top: 17px;
  }
}

.front-info-event-card__date {
  font-size:     13px;
  color:         #000;
  margin-bottom: 9px;
}

.front-info-event-card__title {
  font-size: 13px;
  font-weight: 400;
  color:     #000;
  letter-spacing: 0.05em;
}

.front-info-news-title {
  font-family:   var(--font-display);
  font-size:     28px;
  font-weight:   300;
  color:         #000;
  margin-bottom: 22px;
}

@media (min-width: 1024px) {
  .front-info-news-title { font-size: 30px; }
}

.front-info-news-item {
  display:         block;
  border-bottom: 1px solid var(--color-border);
  padding-top:   20px;
  padding-bottom: 15px;
  transition:    background-color var(--transition-fast);
  color:           inherit;
  text-decoration: none;
}

.front-info-news-item:first-child {
  border-top: 1px solid var(--color-border);
}

.front-info-news-item:hover {
  background-color: rgba(0,0,0,0.02);
}

@media (min-width: 1024px) {
  .front-info-news-item {
    padding-top:    28px;
    padding-bottom: 28px;
  }
}

/* News item: SP (2行) */
.front-info-news-item__sp { display: block; }
@media (min-width: 1024px) { .front-info-news-item__sp { display: none; } }

/* News item: PC (1行) */
.front-info-news-item__pc { display: none; }
@media (min-width: 1024px) {
  .front-info-news-item__pc {
    display:     flex;
    align-items: center;
    gap:         20px;
  }
}

.front-info-news-item__meta {
  display:       flex;
  align-items:   center;
  gap:           2px;
  margin-bottom: 3px;
}

@media (min-width: 1024px) {
  .front-info-news-item__meta {
    gap: 16px;
    margin-bottom: 12px;
  }
}

.front-info-news-item__date {
  font-size: 13px;
  color:     #000;
  flex-shrink: 0;
  margin-right: 18px;
}

.front-info-news-item__category {
  display:          inline-block;
  background-color: #636363;
  color:            #fff;
  font-size:        10px;
  padding:          2px 6px;
  border-radius:    3px;
  transition:       transform var(--transition-fast);
  flex-shrink:      0;
  margin-right: -5px;
}

.front-info-news-item__category:hover {
  transform: scale(1.05);
}

.front-info-news-item__title {
  font-size:   13px;
  font-weight: 400;
  color:       #000;
  flex:        1;
}

/* ─── Side Navigation ───────────────────────────────────────── */
.side-nav {
  position: sticky;
  top:      120px;
  width:    200px;
  flex-shrink: 0;
}

.side-nav__list {
  list-style: none;
  padding:    0;
  margin:     0;
}

.side-nav__link {
  display:       block;
  position:      relative;
  font-size:     15px;
  color:         var(--color-text-muted);
  padding:       8px 0 10px;
  padding-left:  18px;
  transition:    all var(--transition-fast);
  text-decoration: none;
  white-space:   nowrap;
}

.side-nav__link::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           50%;
  transform:     translateY(-50%);
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    transparent;
  transition:    background var(--transition-fast);
}

.side-nav__link.is-active::before,
.side-nav__link:hover::before {
  background:    var(--color-primary);
}

/* 子リンクがアクティブなとき、親リンクにもドットを表示 */
li:has(.side-nav__link--child.is-active) > .side-nav__link--parent::before {
  background:    var(--color-primary);
}

.side-nav__link.is-active,
.side-nav__link:hover {
  color:         var(--color-primary);
}

li:has(.side-nav__link--child.is-active) > .side-nav__link--parent {
  color:         var(--color-primary);
}

/* サイドナビ: 白ベース（philosophy / about 用） */
.side-nav--light .side-nav__link {
  color: #fff;
}

.side-nav--light .side-nav__link.is-active,
.side-nav--light .side-nav__link:hover {
  color: var(--color-primary);
}

/* ─── Philosophy / About Page Layout ────────────────────────── */
.philosophy-main-layout {
  display:     flex;
  align-items: flex-start;
  max-width:   var(--container-max);
  margin:      0 auto;
}

.philosophy-main-layout .side-nav {
  width:       200px;
  flex-shrink: 0;
  position:    sticky;
  top:         120px;
  padding:     50px 20px 0 41px;
  align-self:  flex-start;
  z-index:     10;
}

.philosophy-main-content {
  flex:      1;
  min-width: 0;
}

@media (max-width: 1024px) {
  .philosophy-main-layout { flex-direction: column; }
  .philosophy-main-layout .side-nav { display: none; }
}

@media (max-width: 768px) {
  .philosophy-content > h3 {
    font-weight: 400 !important;
    padding-bottom: 2px !important;
    margin-bottom: 54px !important;
  }

  #social-innovation .textstyle2 {
    margin-bottom: 36px !important;
  }

  #social-innovation .textstyle1 {
    margin-bottom: 39px !important;
  }

  #social-innovation picture {
    display: block;
    text-align: center;
  }

  #social-innovation picture img {
    width: 85% !important;
    margin: 0 auto;
    display: block;
  }

  #company-values .philosophy-content > h3 {
    margin-bottom: 50px !important;
  }

  #company-values .textstyle2 {
    margin-bottom: 47px !important;
  }

  #company-values .philosophy-h2 {
    margin-bottom: 27px !important;
  }

  #company-values .textstyle1 {
    margin-bottom: 29px !important;
  }

  #create-together .philosophy-content > h3 {
    margin-bottom: 53px !important;
  }

  #create-together .philosophy-h2 {
    line-height: 1.4 !important;
  }

  #create-together .philosophy-h2-csr {
    margin-bottom: 31px !important;
  }

  #create-together .textstyle2 {
    margin-bottom: 45px !important;
  }

  #create-together .philosophy-content > h3.philosophy-rd-heading {
    margin-bottom: 16px !important;
  }

  .philosophy-rd-grid > div {
    padding: 27px 23px 37px 20px !important;
  }

  .philosophy-rd-grid > div:last-child .textstyle1 br {
    display: none;
  }

  #create-together .philosophy-rd-desc {
    margin-bottom: 76px !important;
  }

  #create-together .philosophy-content > h3.philosophy-products-heading {
    margin-bottom: 30px !important;
  }

  #create-together .philosophy-product-row {
    gap: 41px !important;
  }

  #create-together .philosophy-product-row h4 {
    margin-bottom: 19px !important;
    letter-spacing: 0.00em !important;
  }

  #create-together .philosophy-products-grid {
    gap: 95px !important;
    margin-bottom: 75px !important;
  }

  #create-together .philosophy-content > h3.philosophy-sdgs-heading {
    margin-bottom: 24px !important;
  }

  .philosophy-sdg-grid {
    gap: 26px 15px !important;
  }
}

/* ─── Product Page ──────────────────────────────────────────── */
.product-page {
  padding-top:  0;
  overflow-x:   clip; /* ::before の左方向はみ出しによる横スクロール防止 */
}

.product-layout {
  display:     flex;
  align-items: flex-start;
  max-width:   var(--container-max);
  margin:      0 auto;
}

@media (max-width: 1024px) {
  .product-layout { flex-direction: column; align-items: stretch; }
  .side-nav        { display: none; }
  .product-section::before { display: none; }
}

/* ─── サイドナビ（製品ページ専用） ───────────────────────────── */
.product-layout .side-nav {
  width:       200px;
  flex-shrink: 0;
  position:    sticky;
  top:         120px;
  padding:     48px 20px 0 47px;
  align-self:  flex-start;
  z-index:     10;
}

/* ─── サイドナビリンク（製品ページ専用） ─────────────────────── */
.product-layout .side-nav__link {
  display:         block;
  position:        relative;
  color:           var(--color-text-muted);
  padding:         8px 0;
  padding-left:    12px;
  transition:      all var(--transition-fast);
  text-decoration: none;
}

.product-layout .side-nav__link::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           50%;
  transform:     translateY(-50%);
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    transparent;
  transition:    background var(--transition-fast);
}

.product-layout .side-nav__link.is-active::before {
  background:    var(--color-primary);
}

.product-layout .side-nav__link.is-active,
.product-layout .side-nav__link:hover {
  color:         var(--color-primary);
}

.product-layout li:has(.side-nav__link--child.is-active) > .side-nav__link--parent::before {
  background:    var(--color-primary);
}

.product-layout li:has(.side-nav__link--child.is-active) > .side-nav__link--parent {
  color:         var(--color-primary);
}

.side-nav__children {
  list-style: none;
  padding:    0 0 0 0;
  margin: 0px 0 4px;
}

.product-layout .side-nav__link--parent {
  font-size:   15px;
  font-weight: 500;
  display:     flex;
  align-items: center;
  padding-left: 18px; /* ・6px + 12px */
}

.product-layout .side-nav__icon {
  width:        24px;
  height:       25px;
  flex-shrink:  0;
  margin-right: 10px;
}

.product-layout .side-nav__link--child {
  font-size:   13px;
  padding:     3px 0 2px 52px; /* 親テキストの開始位置(18+24+10)に揃える */
}

.product-layout .side-nav__link--child::before {
  display:     none;
}

.product-layout .side-nav__link--child.is-active,
.product-layout .side-nav__link--child:hover {
  color:       var(--color-primary);
}

/* ─── コンテンツ列 ───────────────────────────────────────────── */
.product-content {
  flex:     1;
  min-width: 0;
}

/* ─── 各カテゴリーセクション ─────────────────────────────────── */
.product-section {
  padding:  18px 20px 1px;
  position: relative;
}
#sensor .product-section + .product-section,
.product-content > .product-section { padding-top: 73px; }
.product-content > .product-section:last-of-type { padding-bottom: 65px; }
.product-content > .product-section:last-of-type .product-card:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .product-section { padding: 50px 35px 26px 146px; }
  #sensor .product-section + .product-section,
  .product-content > .product-section { padding-top: 111px; }
  .product-content > .product-section:last-of-type .product-card:last-child { margin-bottom: 0; }
}

/*
 * サイドナビ領域（.product-content の左側 200px）にも
 * セクションの背景色を延長する。
 * ::before を left 方向に 200px 伸ばし、inline style の
 * background-color を inherit することで色を一致させる。
 */
.product-section::before {
  content:  '';
  position: absolute;
  top:      0;
  bottom:   0;
  right:    100%;          /* .product-section の左端から左へ伸びる */
  width:    200px;         /* サイドナビの幅と一致 */
  background-color: inherit;
}

.product-section-content {
  /* セクション内の最大幅・パディングはすでに product-section で管理 */
}

/* ─── SubSectionTitle（液面計サブカテゴリー用） ─────────────── */
.product-subsection-title {
  margin-bottom: 80px;
}
@media (min-width: 1024px) {
  .product-subsection-title { margin-bottom: 100px; }
}

.product-subsection-title__row {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
  margin-bottom: 26px;
}

@media (min-width: 1024px) {
  .product-subsection-title__row {
    display:     flex;
    align-items: center;
    gap:         16px;
    flex-wrap:   wrap;
    margin-bottom: 26px;
  }
}

.product-subsection-title__nums-wrap {
  display:     flex;
  align-items: center;
  gap:         11px;
}

@media (min-width: 1024px) {
  .product-subsection-title__nums-wrap {
    display:     flex;
    align-items: center;
    gap:         8px;
  }
}

.product-subsection-title__number {
  font-size:   20px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  color:       #023A94;
  line-height: 1;
  margin-top:  4px;
}
@media (min-width: 1024px) {
  .product-subsection-title__number { font-size: 24px; }
}

.product-subsection-title__main {
  font-size:   20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color:       #023A94;
}
@media (min-width: 1024px) {
  .product-subsection-title__main { font-size: 24px; }
}

.product-subsection-title__sub {
  font-size:   13px;
  font-weight: 500;
  color:       #023A94;
  margin-top:  6px;
}
@media (min-width: 1024px) {
  .product-subsection-title__sub { font-size: 14px; margin-top: 12px; }
}

.product-subsection-title__desc {
  font-size:   16px;
  line-height: 1.8;
  color:       #333;
}

/* ─── NumberedSectionTitle（レベルスイッチ・システム用） ─────── */
.product-numbered-title {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-bottom: 24px;
}

.product-numbered-title__num {
  font-size:   20px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  color:       #023A94;
  margin-top:  4px;
}
@media (min-width: 1024px) {
  .product-numbered-title__num { font-size: 24px; }
}

.product-numbered-title__text {
  font-size:   20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color:       #023A94;
}
@media (min-width: 1024px) {
  .product-numbered-title__text { font-size: 24px; }
}

.product-section-desc {
  font-size:     16px;
  line-height:   1.8;
  margin-bottom: 40px;
  color:         #333;
}

/* ─── 製品カード（TSX large レイアウト準拠） ────────────────── */
.product-card {
  display:        flex;
  flex-direction: column;
  gap:            28px;
  margin-bottom: 82px;
}
@media (min-width: 1024px) {
  .product-card {
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    flex-start;
    gap:            20px;
    margin-bottom: 95px;
  }
}

/* 画像エリア */
.product-card__image {
  width:           100%;
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  flex-shrink:     0;
}
@media (min-width: 1024px) {
  .product-card__image { width: 33.333%; }
}

.product-card__image-inner {
  width:    100%;
  height:   auto;
  min-height: 150px;
  position: relative;
}
@media (min-width: 1024px) {
  .product-card__image-inner { height: 280px; }
}

.product-card__image-inner img {
  width:          100%;
  height:         auto;
  max-height:     300px;
  object-fit:     contain;
  object-position: center top;
}
@media (min-width: 1024px) {
  .product-card__image-inner img {
    height:     100%;
    max-height: none;
    max-height:     300px;
  }
}

.product-card__placeholder {
  width:      100%;
  height:     100%;
  background: #e5e7eb;
  border-radius: 4px;
}

/* 本文エリア */
.product-card__body {
  flex: 1;
  min-width: 0;
}

.product-card__title {
  font-family:   'Noto Sans JP', sans-serif;
  font-size:     16px;
  font-weight:   500;
  color:         #000;
  margin-bottom: 20px;
  line-height:   1.6;
  white-space:   pre-line;
}
@media (min-width: 1024px) {
  .product-card__title { font-size: 20px; }
}

/* 商品名 + 画像 横並び行 */
.product-card__title-row {
  display:       flex;
  align-items:   center;
  gap:           14px;
  flex-wrap:     wrap;
  margin-bottom: 20px;
}
.product-card__title-row .product-card__title {
  margin-bottom: 0;
}
.product-card__title-icon {
  max-height:  40px;
  max-width:   120px;
  width:       auto;
  height:      auto;
  object-fit:  contain;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .product-card__title-icon {
    max-height: 52px;
    max-width:  160px;
  }
}

/* タイトル下の区切り線 */
.product-card__divider {
  border:        none;
  border-top:    1px solid #BCBCBC;
  margin-bottom: 17px;
}
@media (min-width: 1024px) {
  .product-card__divider { margin-bottom: 20px; }
}

/* 動画ボタン */
.product-card__video-wrap {
  margin-bottom: 20px;
}

.product-card__video-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             23px;
  border:          1px solid #000;
  border-radius:   9999px;
  padding:         3px 11px;
  font-size:       11px;
  background:      transparent;
  color:           #000;
  text-decoration: none;
  transition:      background .2s, color .2s;
}
@media (min-width: 1024px) {
  .product-card__video-btn { font-size: 13px; gap: 8px;}
}

.product-card__video-btn:hover {
  background: #000;
  color:      #fff;
}

/* 説明文 */
.product-card__description {
  font-size:     13px;
  line-height:   1.8;
  letter-spacing: 0.05em;
  color:         #000;
  margin-bottom: 16px;
  white-space:   pre-line;
  overflow-wrap: break-word;
  word-break:    break-word;
}

/* 特徴 */
.product-card__features-wrap {
  margin-top: 39px;
}
@media (min-width: 1024px) {
  .product-card__features-wrap { margin-top: 38px; }
}

.product-card__features-title {
  font-size:     16px;
  font-family:   'Noto Sans JP', sans-serif;
  font-weight:   500;
  color:         #000;
  margin-bottom: 19px;
  padding-left:  32px;
  position:      relative;
}
@media (min-width: 1024px) {
  .product-card__features-title { font-size: 18px; margin-bottom: 8px; }
}

.product-card__features-title::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        50%;
  transform:  translateY(-50%);
  width:      20px;
  height:     1px;
  background: #000;
}

.product-card__features {
  font-size:   13px;
  line-height: 1.77;
  letter-spacing: 0.06em;
  color:       #000;
  list-style:  none;
  padding:     0;
  margin-left: 4px;
  overflow-wrap: break-word;
  word-break:    break-word;
}

@media (min-width: 1024px) {
  .product-card__features {
    font-size:   13px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color:       #000;
    list-style:  none;
    padding:     0;
    margin-left: 4px;
    overflow-wrap: break-word;
    word-break:    break-word;
  }
}

.product-card__features li {
  padding-left: 1em;
  text-indent: -1em;
}

.product-card__features li::before {
  content: '・';
}

/* ─── Product Solution Slider ────────────────────────────────── */
.product-sol-wrap {
  width: calc(100% + 20px);
  padding-bottom: 0px;
}
@media (min-width: 1024px) {
  .product-sol-wrap {
    width: calc(100% + 35px);
    padding-bottom: 0px;
  }
}

.product-sol-inner {
  position: relative;
}

.product-sol__title {
  font-size:     16px;
  font-family:   'Noto Sans JP', sans-serif;
  font-weight:   500;
  margin-top: 9px;
  margin-bottom: 25px;
  padding-left:  32px;
  position:      relative;
  color:         #000;
}
@media (min-width: 1024px) {
  .product-sol__title { font-size: 18px; margin-top: 24px; margin-bottom: 24px;}
}

.product-sol__title::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        50%;
  transform:  translateY(-50%);
  width:      20px;
  height:     1px;
  background: #000;
}

/* ドットインジケーター */
.product-sol-dots {
  display:       flex;
  gap:           0px;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .product-sol-dots { gap: 8px; margin-bottom: 20px;}
}

.product-sol-dot {
  width:           16px;
  height:          16px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         0;
}

.product-sol-dot__inner {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    #000;
  transition:    width .2s, height .2s;
}

.product-sol-dot.is-active .product-sol-dot__inner {
  width:  8px;
  height: 8px;
}

/* スライダートラック */
.product-sol-track-wrap {
  position: relative;
  overflow: visible;
}
@media (min-width: 1024px) {
  .product-sol-track-wrap { overflow: hidden; }
}

.product-sol-swiper {
  overflow: visible;
}
@media (min-width: 1024px) {
  .product-sol-swiper { overflow: hidden; }
}

.product-sol-swiper .swiper-slide {
  height: auto;
}
@media (max-width: 1023px) {
  .product-sol-swiper .swiper-slide { width: 250px !important; }
}

/* ソリューションカード */
.product-sol-card {
  border:           1px solid #BCBCBC;
  padding:          20px;
  background:       transparent;
  height:           276px;
  box-sizing:       border-box;
}
@media (min-width: 1024px) {
  .product-sol-card { height: 100%; }
}

.product-sol-card__image {
  aspect-ratio:  280 / 186;
  background:    #e5e7eb;
  position:      relative;
  overflow:      hidden;
  margin-bottom: 20px;
}

.product-sol-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.product-sol-card__title {
  font-size:     15px;
  font-weight:   500;
  line-height:   1.6;
  margin-bottom: 8px;
  color:         #000;
}
@media (min-width: 1024px) {
  .product-sol-card__title { font-size: 16px; }
}

.product-sol-card__category {
  font-size: 13px;
  color:     #000;
}

/* 次へボタン（PC のみ表示） */
.product-sol-next {
  display:         none;
  position:        absolute;
  right:           0;
  margin-right: 40px;
  top:             50%;
  transform:       translateY(-50%);
  width:           70px;
  height:          70px;
  border-radius:   50%;
  background:      #023A94;
  border:          none;
  cursor:          pointer;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  z-index:         10;
  transition:      background .2s;
}
@media (min-width: 1024px) {
  .product-sol-next { display: flex; }
}
.product-sol-next:hover { background: #034BB5; }

/* ─── Contact Form ──────────────────────────────────────────── */
.contact-form {
  max-width:     900px;
  margin-left:   auto;
  margin-right:  auto;
  padding:       0 20px;
}

@media (min-width: 1024px) {
  .contact-form {
    max-width:   1000px;
  }
}

.contact-form-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   16px;
  margin-bottom:         30px;
  align-items:           start;
}

@media (max-width: 1023px) {
  .contact-form-row {
    gap:                   12px;
    margin-bottom: 23px;
  }
}

.contact-form-row > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .contact-form-row {
    grid-template-columns: 1fr 3fr;
    gap:                   32px;
  }
}

@media (min-width: 1024px) {
  .contact-form-row {
    grid-template-columns: auto 792px;
    gap:                   32px;
  }
}

.contact-form__label {
  font-size:      15px;
  font-weight:    500;
  color:          #000;
  line-height:    1.45;
  letter-spacing: 0.05em;
  padding-top:    16px;
}

@media (min-width: 1024px) {
  .contact-form-row > p:first-child {
    padding-top: 16px;
  }
}

.contact-form__required {
  color:     var(--color-error);
  font-size: 12px;
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width:          100%;
  padding:        12px 16px;
  border:         1px solid var(--color-border);
  border-radius:  4px;
  background:     #fff;
  font-size:      15px;
  font-family:    var(--font-sans);
  color:          #000;
  letter-spacing: 0.05em;
  outline:        none;
  transition:     border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

@media (max-width: 1023px) {
  .contact-form__input,
  .contact-form__select {
    min-height: 56px;
  }
}

@media (min-width: 1024px) {
  .contact-form__input,
  .contact-form__select {
    height:    60px;
  }
}

.contact-form__input:hover,
.contact-form__select:hover,
.contact-form__textarea:hover {
  border-color: var(--color-primary);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--color-primary);
  box-shadow:   0 4px 12px rgba(2,58,148,0.1);
  transform:    scale(1.01);
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-border);
}

.contact-form__textarea {
  resize:     none;
  height:     250px;
}
@media (min-width: 1024px) {
  .contact-form__textarea {
    height:    400px;
  }
}

.contact-form__select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.contact-form__select-wrap {
  position: relative;
}

/* CF7 が挿入する <p> / <br> の影響を除去 */
.contact-form__select-wrap p {
  margin:  0;
  padding: 0;
}
.contact-form__select-wrap br {
  display: none;
}

.contact-form__select-arrow {
  position:        absolute;
  right:           12px;
  top:             50%;
  transform:       translateY(-50%);
  pointer-events:  none;
  color:           #000;
}

/* Privacy Agreement */
.contact-privacy-check {
  display:         flex;
  align-items:     flex-start;
  gap:             12px;
  margin-top:      69px;
  justify-content: center;
}

@media (max-width: 1023px) {
  .contact-privacy-check {
    gap:             12px;
    margin-top:      69px;
  }
}

/* CF7 が生成する wpcf7-acceptance の内部レイアウトを整える */
.contact-privacy-check .wpcf7-acceptance,
.contact-privacy-check .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.contact-privacy-check .wpcf7-list-item-label {
  font-size:      16px;
  color:          #000;
  line-height:    1.8;
  letter-spacing: 0.05em;
}

/* ラジオボタン風の円形チェックボックス */
.contact-privacy-check__input {
  appearance:         none;
  -webkit-appearance: none;
  flex-shrink:        0;
  width:              22px;
  height:             22px;
  border:             2px solid #BCBCBC;
  border-radius:      50%;
  cursor:             pointer;
  position:           relative;
  margin-top:         3px;
  transition:         border-color 0.3s, background-color 0.3s;
}

.contact-privacy-check__input:hover {
  border-color: var(--color-primary);
}

.contact-privacy-check__input:focus {
  outline:      none;
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(2, 58, 148, 0.15);
}

/* チェック済み: 外枠＋内側の白丸 */
.contact-privacy-check__input:checked {
  border-color:     var(--color-primary);
  background-color: var(--color-primary);
}

.contact-privacy-check__input:checked::after {
  content:       '';
  position:      absolute;
  width:         8px;
  height:        8px;
  background:    #fff;
  border-radius: 50%;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
}

.contact-privacy-check__text {
  font-size:      16px;
  color:          #000;
  line-height:    1.8;
  letter-spacing: 0.05em;
}

.contact-privacy-check__link {
  color:           var(--color-primary);
  text-decoration: underline;
  transition:      opacity var(--transition-fast);
}

.contact-privacy-check__link:hover { opacity: 0.7; }

/* CF7のaタグにも同じ色を適用 */
.contact-privacy-check a {
  color:           var(--color-primary);
  text-decoration: underline;
  transition:      opacity var(--transition-fast);
}
.contact-privacy-check a:hover { opacity: 0.7; }

/* Submit Button */
.contact-form__submit-wrap {
  display:         flex;
  justify-content: center;
  margin-top:      4px;
}
@media (max-width: 1023px) {
  .contact-form__submit-wrap {
    margin-top:      17px;
  }
}

/* CF7 submit ボタンを非表示（JS で制御） */
.contact-cf7-submit {
  display: none !important;
}

/* CF7 デフォルトの wpcf7-form-control-wrap 余白リセット */
.wpcf7-form-control-wrap {
  display: block;
  width:   100%;
  min-width: 0;
}

/* CF7 バリデーションエラーメッセージ */
.wpcf7-not-valid-tip {
  color:     var(--color-error);
  font-size: 12px;
  margin-top: 4px;
  display:   block;
}

/* CF7 送信ステータスメッセージ */
.wpcf7-response-output {
  display: none !important;
}

/* ─── Contact ページ共通 ─────────────────────────────────────── */
.contact-section {
  background:     #F5F8F9;
  padding-top:    0;
  padding-bottom: 120px;
}

.contact-container {
  max-width:    994px;
  margin-left:  auto;
  margin-right: auto;
  padding:      23px 20px 0;
}

@media (min-width: 768px) {
  .contact-container { padding: 60px 0px 0; }
}

/* ── contact-complete ページ専用の contact-container 調整 ── */
.contact-container--complete {
  max-width: 994px;
  padding:   23px 20px 0;
}

@media (min-width: 768px) {
  .contact-container--complete {
    padding: 0px 0 0;
  }
}

.contact-lead {
  color:          #000;
  font-size:      15px;
  line-height:    1.78;
  letter-spacing: 0.00em;
  margin-bottom:  50px;
}

@media (min-width: 1024px) {
  .contact-lead { margin-bottom: 80px; font-size: 16px; line-height: 1.7;}
}

/* 確認・送信ボタン */
.contact-btn-xl {
  width:    300px;
  padding:  12px 32px;
  font-size: 16px;
}

@media (max-width: 1023px) {
  .contact-btn-xl {
    width:    280px;
    padding:  12px 20px;
    font-size: 16px;
  }
}
.contact-btn-gray {
  border-color: #7D7D7D;
  color:        #7D7D7D;
}

.contact-btn-gray:hover {
  background:   #000;
  border-color: #000;
  color:        #fff;
}

/* ─── 確認画面 ──────────────────────────────────────────────── */
.contact-confirm-list {
  margin-bottom: 60px;
}

.contact-confirm-row {
  display:        grid;
  grid-template-columns: 1fr;
  gap:            16px;
  padding-bottom: 15px;
  margin-bottom:  40px;
  border-bottom:  1px solid var(--color-border);
}

@media (min-width: 768px) {
  .contact-confirm-row {
    grid-template-columns: 1fr 3fr;
    gap:                   32px;
    padding-bottom:        23px;
    margin-bottom:         31px;
  }
}

@media (min-width: 1024px) {
  .contact-confirm-row {
    grid-template-columns: auto 792px;
    gap:                   32px;
  }
}

.contact-confirm-row:last-child {
  border-bottom: none;
}

.contact-confirm-row__label {
  font-size:      15px;
  font-weight:    500;
  color:          #000;
  line-height:    1.45;
  letter-spacing: 0.05em;
}

.contact-confirm-row__value {
  font-size:      15px;
  color:          #000;
  line-height:    1.8;
  letter-spacing: 0.05em;
  white-space:    pre-wrap;
  word-break:     break-word;
}

.contact-confirm-actions {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             20px;
  margin-top:      94px;
}

@media (min-width: 768px) {
  .contact-confirm-actions { margin-top: 105px; }
}

/* 警告 */
.contact-notice {
  background:    #fff3cd;
  border:        1px solid #ffc107;
  border-radius: 4px;
  padding:       16px 20px;
  font-size:     14px;
  line-height:   1.8;
  color:         #333;
}

/* ─── 完了ページ ─────────────────────────────────────────────── */
.contact-complete {
  padding-top: 0;
}

.contact-complete__title {
  font-size:      20px;
  font-weight:    500;
  color:          #000;
  line-height:    1.4;
  letter-spacing: 0.0em;
  margin-bottom:  50px;
}

@media (min-width: 768px) {
  .contact-complete__title {
    font-size:     30px;
    margin-bottom: 80px;
  }
}

.contact-complete__text {
  font-size:      16px;
  color:          #000;
  line-height:    1.8;
  margin-bottom:  24px;
}

@media (max-width: 1023px) {
  .contact-complete__text {
    font-size:      16px;
    color:          #000;
    line-height:    1.75;
    letter-spacing: -0.02em;
    margin-bottom:  24px;
  }
}

.contact-complete__btn-wrap {
  display:         flex;
  justify-content: center;
  margin-top:      80px;
}

@media (max-width: 1023px) {
  .contact-complete__btn-wrap {
    margin-top:      79px;
  }
}

.contact-complete__btn-wrap .btn-outline {
  padding: 10px 15px;
}
@media (max-width: 1023px) {
  .contact-complete__btn-wrap .btn-outline {
    width: 200px;
    padding: 10px 15px;
  }
}

/* ─── About / Philosophy / Recruit 共通 ─────────────────────── */
.inner-page {
  background: var(--color-bg);
}

.inner-page__section {
  padding-top:    80px;
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  .inner-page__section {
    padding-top:    120px;
    padding-bottom: 120px;
  }
}

/* ─── Privacy Policy ────────────────────────────────────────── */
.privacy-page {
  background:  #F5F8F9;
  padding-top: 0;
}

.privacy-section {
  background:     #F5F8F9;
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  .privacy-section { padding-bottom: 46px; padding-top: 10px; }
}

.privacy-container {
  max-width:    1280px;
  margin-left:  auto;
  margin-right: auto;
  padding-left:  20px;
  padding-right: 20px;
}

@media (min-width: 1024px) {
  .privacy-container {
    padding-left:  40px;
    padding-right: 40px;
  }
}

.privacy-block {
  margin-bottom: 50px;
}

.privacy-block--first {
  margin-top: 21px;
  margin-bottom: 78px;
}

@media (min-width: 1024px) {
  .privacy-block { margin-bottom: 74px; }
  .privacy-block--first { margin-top: 50px; margin-bottom: 74px; }
}

.privacy-inner {
  max-width:    996px;
  margin-left:  auto;
  margin-right: auto;
}

.privacy-lead {
  font-size:      16px;
  line-height:    1.7;
  color:          #000;
}

.privacy-h2 {
  font-size:     16px;
  font-weight:   500;
  color:         #000;
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .privacy-h2 {
    font-size:     18px;
    margin-bottom: 40px;
  }
}

.privacy-p {
  font-size:      13px;
  line-height:    1.7;
  letter-spacing: -0.015em;
  color:          #000;
}

@media (min-width: 1024px) {
  .privacy-p { font-size: 16px; }
}

.privacy-date {
  text-align:  right;
  margin-top:  50px;
}

@media (min-width: 1024px) {
  .privacy-date { margin-top: 74px; }
}

.privacy-h3 {
  font-size:     16px;
  font-weight:   500;
  color:         #000;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .privacy-h3 { font-size: 18px; }
}

/* ─── Info Archive / Single ─────────────────────────────────── */

/* Section heading (SectionNavigation style) */
.info-sec-heading { margin-top: 20px; margin-bottom: 30px; }
@media (min-width: 1024px) {
  .info-sec-heading { margin-top: 0; margin-bottom: 50px; }
}
.info-sec-heading__row {
  display:     flex;
  align-items: center;
  gap:         20px;
}
.info-sec-heading__en {
  font-size:   20px;
  font-weight: 400;
  font-family: 'Jost','Inter',Arial,sans-serif;
  color:       #023A94;
  line-height: 1.445;
}
.info-sec-heading__ja {
  font-size:      13px;
  color:          #023A94;
  letter-spacing: 0.05em;
  line-height:    1.2;
}
.info-sec-heading__line {
  height:     1px;
  margin-top: 5px;
  background: #023A94;
}

/* Event section – extends to right viewport edge */
.info-event-section {
  background:     #7DA4AF;
  padding-bottom: 4px;
  padding-top:    0;
  margin-left:    max(0px, calc((100vw - 1600px) / 2));
}
@media (min-width: 1024px) {
  .info-event-section {
    padding-bottom: 89px;
    padding-top:    60px;
  }
}

.info-event-inner {
  margin-left:  20px;
  margin-right: 0;
}
@media (min-width: 1024px) {
  .info-event-inner { margin-left: 143px; }
}

/* Horizontal scroll carousel */
.info-event-scroll-wrap {
  margin-top: 50px;
  position:   relative;
}

.info-event-scroll {
  display:            flex;
  flex-wrap:          nowrap;
  overflow-x:         auto;
  overflow-y:         hidden;
  gap:                12px;
  min-height:         280px;
  scrollbar-width:    none;
  -ms-overflow-style: none;
}
@media (min-width: 1024px) {
  .info-event-scroll {
    display:            flex;
    flex-wrap:          nowrap;
    overflow-x:         auto;
    overflow-y:         hidden;
    gap:                16px;
    min-height:         280px;
    scrollbar-width:    none;
    -ms-overflow-style: none;
  }
}
.info-event-scroll::-webkit-scrollbar { display: none; }

.info-event-scroll .info-event-card {
  width:       160px;
  flex-shrink: 0;
  text-decoration: none;
  display:     block;
}
@media (min-width: 1024px) {
  .info-event-scroll .info-event-card { width: 234px; }
}

.info-event-card-img {
  width:      100%;
  height:     100px;
  object-fit: cover;
  display:    block;
}
@media (min-width: 1024px) {
  .info-event-card-img { height: 156px; }
}

.info-event-card-img--logo {
  object-fit: contain;
  padding:    16px 24px;
  background: #fff;
}

.info-event-card-placeholder {
  width:      100%;
  height:     106px;
  background: #d1d5db;
  display:    block;
}
@media (min-width: 1024px) {
  .info-event-card-placeholder { height: 156px; }
}

.info-event-card-body {
  padding: 20px 0;
}
.info-event-card-date {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
@media (max-width: 1023px) {
  .info-event-card-date {
    letter-spacing: 0;
  }
}
.info-event-card-title {
  color: #fff;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.info-event-nav-btn {
  position:        absolute;
  right:           40px;
  top:             50px;
  transform:       translateY(-50%);
  background:      #144C9E;
  border-radius:   50%;
  width:           70px;
  height:          70px;
  display:         none;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 12px rgba(0,0,0,0.2);
  cursor:          pointer;
  z-index:         10;
  transition:      opacity var(--transition-base);
  color:           #fff;
}
.info-event-nav-btn:hover { opacity: 0.8; }
@media (min-width: 1024px) {
  .info-event-nav-btn {
    display: flex;
    top: 80px;
  }
}

/* News section */
.info-news-section {
  max-width:      1600px;
  margin:         0 auto;
  background:     #7DA4AF;
  padding-bottom: 74px;
}
@media (min-width: 1024px) {
  .info-news-section { padding-bottom: 99px; }
}

.info-news-inner {
  margin-left:  20px;
  margin-right: 20px;
}
@media (min-width: 1024px) {
  .info-news-inner {
    margin-left:  142px;
    margin-right: 40px;
  }
}

.info-news-list { margin-top: 27px; }
@media (min-width: 1024px) {
  .info-news-list { margin-top: 0px; }
}

.info-news-row {
  padding-top:    20px;
  padding-bottom: 14px;
  border-bottom:  1px solid #fff;
}
@media (min-width: 1024px) {
  .info-news-row {
    padding-top:    0px;
    padding-bottom: 30px;
  }
  .info-news-row + .info-news-row {
    padding-top: 28px;
  }
}

/* Mobile news item styles */
.info-news-mobile-meta {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-bottom: 2px;
}
.info-news-mobile-date {
  color:          #fff;
  font-size:      13px;
  line-height:    1.2;
  letter-spacing: 0;
}
.info-news-mobile-title {
  color:           #fff;
  font-size:       13px;
  line-height:     1.2;
  letter-spacing:  0;
  text-decoration: none;
}

/* Mobile 2-row / Desktop 1-row */
.info-news-mobile { display: block; }
.info-news-desktop { display: none; }
@media (min-width: 1024px) {
  .info-news-mobile  { display: none; }
  .info-news-desktop {
    display:     flex;
    align-items: center;
    gap:         13px;
  }
}

/* Category badge */
.info-news-badge {
  display:        inline-block;
  background:     #636363;
  color:          #fff;
  font-size:      10px;
  padding:        4px 6px;
  border-radius:  2px;
  line-height:    1.2;
  letter-spacing: 0.05em;
  white-space:    nowrap;
  flex-shrink:    0;
}
@media (min-width: 1024px) {
  .info-news-badge { padding: 4px 5px 5px 5px; }
}

/* View More */
.info-viewmore-section {
  padding-bottom: 120px;
  background:     #7DA4AF;
  display:        flex;
  justify-content: center;
}

.info-viewmore-btn {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  color:           #fff;
  cursor:          pointer;
  transition:      opacity var(--transition-base);
  text-decoration: none;
}
.info-viewmore-btn:hover { opacity: 0.8; color: #fff; }

/* <button> をリンク時と同じ見た目にリセット */
button.info-viewmore-btn {
  background:  none;
  border:      0;
  padding:     0;
  font:        inherit;
  appearance:  none;
  -webkit-appearance: none;
}
.info-viewmore-btn.is-loading {
  opacity:        0.5;
  pointer-events: none;
}

.info-viewmore-btn__text {
  display:     flex;
  align-items: center;
  gap:         94px;
  font-size:   16px;
  font-weight: 400;
  font-family: 'Jost','Inter',Arial,sans-serif;
  line-height: 1.445;
}
@media (min-width: 1024px) {
  .info-viewmore-btn__text {
    gap:         75px;
    font-size:   20px;
  }
}

.info-viewmore-btn__plus {
  font-size:   24px;
  font-weight: 300;
}

.info-viewmore-btn__line {
  width:      100%;
  height:     1px;
  background: #fff;
  margin-top: 1px;
}

/* ─── Info Single (detail page) ──────────────────────────────── */
.info-single-wrap {
  background: var(--color-bg);
}

.info-single-content {
  max-width:      997px;
  margin:         0 auto;
  padding-left:   20px;
  padding-right:  20px;
  margin-top:     -4px;
}
@media (min-width: 1024px) {
  .info-single-content {
    padding-left:  0;
    padding-right: 0;
    margin-top:     0;
  } 
}

.info-single-date {
  font-size:   13px;
  letter-spacing: 0.0em;
  font-weight: 500;
  color:       #000;
  margin-bottom: 13px;
}
@media (min-width: 1024px) {
  .info-single-date { font-size: 15px; letter-spacing: -0.02em; margin-bottom: 8px;}
}

.info-single-title {
  font-size:     20px;
  font-weight:   500;
  color:         #000;
  line-height:   1.75;
  margin-bottom: 11px;
}
@media (min-width: 1024px) {
  .info-single-title {
    font-size:     30px;
    margin-bottom: 20px;
    line-height:   1.6;
  }
}

.info-single-meta {
  display:       flex;
  align-items:   center;
  gap:           21px;
  margin-bottom: 80px;
}

@media (max-width: 1023px) {
  .info-single-meta {
    gap:           9px;
  }
  .info-single-meta .info-single-date {
    font-size: 11px;
  }
}

.info-single-cat {
  font-size:     11px;
  display:       inline-block;
  border:        1px solid #000;
  border-radius: 9999px;
  padding:       4px 13px;
  color:         #000;
}
@media (min-width: 1024px) {
  .info-single-cat { font-size: 13px; }
}

.info-single-body {
  font-size:     13px;
  color:         #000;
  line-height:   1.8;
  letter-spacing: 0.05em;
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .info-single-body { font-size: 16px; }
}

.info-single-body p + p { margin-top: 28px; }

@media (max-width: 1023px) {
  .info-single-body p + p { margin-top: 2３px; }
}

.info-single-body img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.info-single-img {
  width:         100%;
  aspect-ratio:  792 / 480;
  object-fit:    cover;
  margin-bottom: 30px;
  display:       block;
}
@media (min-width: 1024px) {
  .info-single-img { margin-bottom: 40px; }
}

.info-single-caption {
  font-size:      11px;
  line-height:    1.8;
  letter-spacing: 0.05em;
  margin-bottom:  60px;
  max-width:      535px;
}
@media (min-width: 1024px) {
  .info-single-caption { font-size: 13px; margin-bottom: 66px; }
}

/* Event detail table */
.info-event-table { margin-bottom: 60px; }

.info-event-table-row {
  display:       flex;
  flex-direction: column;
  margin-bottom: 30px;
}
@media (min-width: 1024px) {
  .info-event-table-row {
    flex-direction: row;
    align-items:    center;
    margin-bottom:  20px;
  }
}

.info-event-table-label {
  font-size:     18px;
  font-weight:   500;
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .info-event-table-label {
    width:         128px;
    margin-bottom: 0;
    flex-shrink:   0;
  }
}

.info-event-table-value {
  font-size:      13px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .info-event-table-value { font-size: 15px; }
}

/* ─── About Page ────────────────────────────────────────────── */

/* Section 1: vision padding */
.about-vision-section {
  padding-top: 16px;
}
@media (min-width: 1024px) {
  .about-vision-section { padding-top: 56px; }
}

.about-vision-inner {
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .about-vision-inner { padding-bottom: 120px; }
}

/* Section 2: company name py-120px both breakpoints */
.about-py-120 {
  padding-top:    115px;
  padding-bottom: 98px;
}
@media (max-width: 1023px) {
  #company-name-origin {
    padding-top:    74px;
    padding-bottom: 48px;
  }
}

/* President section layout */
.about-president-desktop {
  display: none;
}
@media (min-width: 1024px) {
  .about-president-desktop {
    display:     flex;
    gap:         32px;
    align-items: flex-start;
  }
  .about-president-mobile { display: none; }
}

.about-president-text {
  flex: 1;
  max-width: 486px;
}

.about-president-img-col {
  flex-shrink: 0;
  margin-left: auto;
}

/* History narrative blocks (section 3) */
.about-history-block {
  display:        block;
  margin-bottom:  73px;
}
.about-history-block:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .about-history-block {
    display:        flex;
    gap:            40px;
    margin-bottom:  97px;
  }
}

.about-history-block-img {
  width:          100%;
  margin-bottom:  32px;
  aspect-ratio:   384 / 256;
  object-fit:     cover;
}
@media (min-width: 1024px) {
  .about-history-block-img {
    width:          43%;
    height:         45%;
    flex-shrink:    0;
    margin-bottom:  0;
    aspect-ratio:   unset;
  }
}

.about-history-block-text {
  display:        flex;
  flex-direction: column;
  gap:            46px;
}
@media (min-width: 1024px) {
  .about-history-block-text {
    flex:  1;
    gap:   70px;
  }
}

/* Company Name letter rows */
.about-name-row {
  display:        flex;
  flex-direction: column;
  gap:            0px;
  margin-bottom:  28px;
  margin-top: -1px;
}
@media (min-width: 1024px) {
  .about-name-row {
    flex-direction: row;
    align-items:    center;
    gap:            57px;
    margin-bottom:  21px;
    margin-top: 0;
  }
}

.about-name-letters {
  display:     flex;
  align-items: center;
  gap:         7px;
}
@media (min-width: 1024px) {
  .about-name-letters { min-width: 209px; }
}

/* Era heading (1985 -, 2000 -, 2010 -) */
.about-era-heading {
  font-size:     40px;
  font-weight:   300;
  color:         #023A94;
  font-family:   'Jost','Inter',Arial,sans-serif;
  line-height:   1.445;
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .about-era-heading {
    font-size:     50px;
    margin-bottom: 46px;
  }
}

/* Detailed timeline */
.about-tl-wrap { position: relative; }

.about-tl-vline {
  position:   absolute;
  left:       5px;
  top:        -32px;
  width:      1px;
  height:     calc(100% + 60px);
  background: #fff;
}
@media (min-width: 1024px) {
  .about-tl-vline { left: 60px; }
}

.about-tl-vline--short { height: calc(100% - 48px); }

.about-tl-item {
  display:     flex;
  align-items: flex-start;
  position:    relative;
  margin-bottom: 37px;
}
@media (min-width: 1024px) {
  .about-tl-item { margin-bottom: 40px; }
}
.about-tl-item:last-child { margin-bottom: 0; }

.about-tl-dot {
  position:      absolute;
  left:          1px;
  top:           12px;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    #023A94;
}
@media (min-width: 1024px) {
  .about-tl-dot { left: 55px; }
}

.about-tl-hline {
  position:   absolute;
  left:       10px;
  top:        16px;
  width:      70px;
  height:     1px;
  background: #023A94;
}
@media (min-width: 1024px) {
  .about-tl-hline {
    left:  64px;
    width: 120px;
  }
}

.about-tl-content {
  margin-left: 92px;
  width:       calc(100% - 110px);
}
@media (min-width: 1024px) {
  .about-tl-content {
    margin-left: 202px;
    width:       calc(100% - 202px);
  }
}

.about-tl-with-img {
  display:        flex;
  flex-direction: column;
  gap:            13px;
}
@media (min-width: 1024px) {
  .about-tl-with-img {
    flex-direction: row;
    gap:            22px;
  }
}

.about-tl-desc-offset { flex: 1; }
@media (min-width: 1024px) {
  .about-tl-desc-offset { padding-top: 57px; }
}

/* About page backgrounds */
.about-page-bg { background-color: #7DA4AF; }
.about-section-bg-alt { background-color: #8BBCC9; }

/* Underlined section titles */
.about-underlined-title {
  font-size: 20px;
  border-bottom: 1px solid #023A94;
  display: inline-flex;
  align-items: center;
  gap: 23px;
  padding-bottom: 2px;
  color: #023A94;
  letter-spacing: -0.06em;
}

@media (min-width: 1024px) {
  .about-underlined-title {
    font-size: 20px;
    border-bottom: 1px solid #023A94;
    display: inline-flex;
    align-items: center;
    gap: 23px;
    padding-bottom: 6px;
    color: #023A94;
    letter-spacing: -0.06em;
  }
}
.about-underlined-title__sub {
  font-size: 13px;
  margin-top: 6px;
}
.about-underlined-title--mb-44 { margin-bottom: 50px; }
@media (min-width: 1024px) {
  .about-underlined-title--mb-44 { margin-bottom: 44px; }
}
.about-underlined-title--mb-66 { margin-bottom: 101px; }
@media (min-width: 1024px) {
  .about-underlined-title--mb-66 { margin-bottom: 66px; }
}
.about-underlined-title--mb-58 { margin-bottom: 58px; }
.about-underlined-title--mb-28 { margin-bottom: 28px; }

/* President: mobile heading & body */
.about-mobile-heading {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.448;
  margin-bottom: 19px;
  font-family: 'Noto Sans JP', sans-serif;
}

@media (min-width: 1024px) {
  .about-mobile-heading {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.448;
    margin-bottom: 24px;
    font-family: 'Noto Sans JP', sans-serif;
  }
}
.about-body-text {
  color: #fff;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.about-body-text--mb-50 { margin-bottom: 50px; }

/* President: mobile photo */
.about-mobile-photo-area {
  margin-top: 32px;
  text-align: center;
}
.about-mobile-photo-frame {
  width: 280px;
  height: 424px;
  margin: 0 auto;
  overflow: hidden;
}
.about-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-contain-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about-mobile-title-label {
  margin-top: 16px;
}
.about-mobile-title-text {
  color: #fff;
  font-size: 13px;
}
.about-mobile-signature {
  margin-top: 11px;
  width: 188px;
  height: 37px;
  margin-left: auto;
  margin-right: auto;
}

/* President: desktop heading & body */
.about-desktop-heading {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.448;
  margin-bottom: 40px;
  font-family: 'Noto Sans JP', sans-serif;
}
.about-desktop-body {
  color: #fff;
  font-size: 13px;
  line-height: 1.76;
  letter-spacing: 0.05em;
}
.about-desktop-body--mb-58 { margin-bottom: 58px; }
.about-desktop-photo-frame {
  width: 282px;
  height: 423px;
  overflow: hidden;
}
.about-desktop-title-wrap {
  margin-top: 20px;
  text-align: left;
}
.about-desktop-title-label {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.448;
}
.about-desktop-signature {
  margin-top: 16px;
}

/* Company Name Origin */
.about-name-container {
  max-width: 800px;
}
.about-name-logo-wrap {
  text-align: center;
  margin-bottom: 70px;
}
@media (min-width: 1024px) {
  .about-name-logo-wrap {
    margin-bottom: 66px;
  }
}
.about-name-logo-frame {
  width: 262px;
  height: 56px;
  position: relative;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .about-name-logo-frame {
    width: 341px;
    height: 69px;
    position: relative;
    margin: 0;
  }
}
.about-name-letter-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.about-name-letter-icon--wide {
  width: 60px;
  height: 30px;
  flex-shrink: 0;
}
.about-name-letter-text {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  font-family: 'Jost', 'Inter', Arial, sans-serif;
}
.about-name-letter-text--mr {
  margin-right: 13px;
}
.about-name-desc-col {
  flex: 1;
}
.about-name-desc {
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
  margin-top: 9px;
}

/* Timeline narrative headings */
.about-narrative-heading {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.448;
  margin-bottom: 31px;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.121em;
}

@media screen and (max-width: 1023px) {
  .about-narrative-heading {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.448;
    margin-bottom: 24px;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.121em;
  }
}

/* History timeline dates & items */
.about-era-group {
  margin-top: 40px;
}
.about-era-group--first {
  margin-top: 23px;
}
@media (min-width: 1024px) {
  .about-era-group--first {
    margin-top: 18px;
  }
}
.about-tl-img-col {
  flex-shrink: 0;
}
.about-tl-date-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: flex-end;
}
.about-tl-date-row--gap-22 { gap: 22px; }
.about-tl-date-row--gap-24 { gap: 24px; }
.about-tl-date-row--mb-14 { margin-bottom: 14px; }
.about-tl-year {
  color: #023A94;
  font-size: 24px;
  font-family: 'Jost', 'Inter', Arial, sans-serif;
}
.about-tl-era-label {
  color: #023A94;
  font-size: 15px;
  margin-bottom: 4px;
}
.about-tl-product-img-wrap {
  width: 100%;
  max-width: 246px;
}
.about-tl-product-img {
  width: 100%;
  max-width: 168px;
  height: auto;
  object-fit: contain;
}
/* 画像2枚並び（history8 + history9） */
.about-tl-product-img-wrap--double {
  display: flex;
  gap: 13px;
  max-width: 349px;
}
.about-tl-product-img-wrap--double .about-tl-product-img {
  min-width: 0;
}

@media (min-width: 1024px) {
  .about-tl-product-img {
    width: 100%;
    max-width: 246px;
    height: auto;
    object-fit: contain;
  }
  .about-tl-product-img-wrap--double {
    gap: 22px;
    max-width: 514px;
  }
}

/* About page: SP overrides (philosophy-content > h3 の影響を打ち消す) */
@media (max-width: 768px) {
  .about-underlined-title {
    font-weight: 500 !important;
    padding-bottom: 6px !important;
  }
  #vision .about-underlined-title {
    margin-bottom: 44px !important;
  }
  #company-name-origin .about-underlined-title {
    margin-bottom: 100px !important;
  }
  #history .about-underlined-title {
    margin-bottom: 51px !important;
  }
  #timeline .about-underlined-title {
    margin-bottom: 28px !important;
  }
}

/* ─── Philosophy Page ────────────────────────────────────────── */

.philosophy-page {
  overflow-x: clip;
}

.philosophy-content { width: 100%; }

/* 背景色をサイドナビ領域まで延長 */
.philosophy-main-content > section {
  position: relative;
}

.philosophy-main-content > section::before {
  content:          '';
  position:         absolute;
  top:              0;
  bottom:           0;
  right:            100%;
  width:            200px;
  background-color: inherit;
}

/* About Section 3: 沿革ナラティブ (Timeline) padding */
.about-timeline-py {
  padding-top:    76px;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .about-timeline-py {
    padding-top:    105px;
    padding-bottom: 115px;
  }
}

/* Section padding helpers */
.philosophy-py {
  padding-top:    76px;
  padding-bottom: 77px;
}
@media (min-width: 1024px) {
  .philosophy-py {
    padding-top:    116px;
    padding-bottom: 112px;
  }
}

/* Section 1 special padding (pt=0 mobile, 52px desktop; pb=80/120) */
.philosophy-section-1-pt {
  padding-top:    16px;
  padding-bottom: 85px;
}
@media (min-width: 1024px) {
  .philosophy-section-1-pt {
    padding-top:    56px;
    padding-bottom: 120px;
  }
}

/* Responsive h2 headings */
.philosophy-h2-vision {
  font-size:   30px;
  font-weight: 300;
  color:       #023A94;
  font-family: 'Jost','Inter',Arial,sans-serif;
  margin-bottom: 22px;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .philosophy-h2-vision { font-size: 50px; margin-bottom: 35px;}
}

.philosophy-h2 {
  font-size:     30px;
  font-weight:   400;
  color:         #023A94;
  margin-bottom: 33px;
  line-height:   1.2;
}
@media (min-width: 1024px) {
  .philosophy-h2 { font-size: 40px; }
}

.philosophy-h2-csr { margin-bottom: 32px; }

/* Value boxes (Core section) */
.philosophy-value-boxes {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  margin-bottom:  50px;
}
@media (min-width: 768px) {
  .philosophy-value-boxes {
    flex-direction: row;
    margin-bottom:  60px;
  }
}

.philosophy-value-box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid #fff;
  padding:         24px;
  text-align:      center;
  width:           100%;
  min-height:      124px;
}
@media (min-width: 768px) { .philosophy-value-box { flex: 1; } }
@media (min-width: 1024px) {
  .philosophy-value-box {
    min-height: 158px;
    padding:    32px;
  }
}

/* Arrows between value boxes */
.philosophy-arrow-down {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding-bottom:  6px;
}
@media (min-width: 768px) { .philosophy-arrow-down { display: none; } }

.philosophy-arrow-right {
  display: none;
}
@media (min-width: 768px) {
  .philosophy-arrow-right {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding-right:   16px;
  }
}

/* Section sub-headings with decorative line */
.philosophy-section-heading {
  position:    relative;
  padding-left: 32px;
  font-size:   16px;
  font-weight: 500;
  color:       #fff;
  font-family: 'Noto Sans JP', sans-serif;
}
.philosophy-section-heading::before {
  content:   '';
  position:  absolute;
  left:      0;
  top:       50%;
  transform: translateY(-50%);
  width:     20px;
  height:    1px;
  background: #fff;
}
@media (min-width: 1024px) { .philosophy-section-heading { font-size: 18px; } }

/* R&D two-column grid */
.philosophy-rd-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   20px;
  margin-bottom:         50px;
}
@media (min-width: 1024px) {
  .philosophy-rd-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   25px;
    margin-bottom:         70px;
  }
}

/* Product layout (image + text) */
.philosophy-product-row {
  display:        flex;
  flex-direction: column;
  gap:            40px;
}
@media (min-width: 1024px) {
  .philosophy-product-row { flex-direction: row; }
}

.philosophy-product-img {
  width:      280px;
  height:     280px;
  flex-shrink: 0;
  margin:     0 auto;
}
@media (min-width: 1024px) {
  .philosophy-product-img {
    width:  283px;
    height: 283px;
  }
}

/* SDGs 2-col mobile / 4-col desktop */
.philosophy-sdg-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   30px;
}
@media (min-width: 1024px) {
  .philosophy-sdg-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Company Page ───────────────────────────────────────────── */

.company-info-section {
  max-width:      1600px;
  margin:         0 auto;
  padding-top:    15px;
  padding-bottom: 60px;
}
@media (min-width: 1024px) {
  .company-info-section {
    padding-top:    55px;
    padding-bottom: 100px;
  }
}

.company-info-inner {
  max-width: 1024px;
  margin:    0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1024px) {
  .company-info-inner {
    max-width: 1024px;
  margin:    0 auto;
  padding-left: 15px;
  padding-right: 15px;
  }
}

.company-info-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   24px;
  list-style:            none;
  margin:                0;
  padding:               0;
}

@media (min-width: 1024px) {
  .company-info-grid {
    display:               grid;
  grid-template-columns: 1fr;
  gap:                   26px;
  list-style:            none;
  margin:                0;
  padding:               0;
  }
}

.company-info-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   12px;
  border-bottom:         1px solid #fff;
  padding-bottom:        27px;
}
@media (min-width: 640px) {
  .company-info-row {
    grid-template-columns: 3fr 7fr;
    gap:                   11px;
    padding-bottom:        30px;
  }
}

.company-info-dt {
  color:       #fff;
  font-size:   15px;
  font-weight: 500;
}

.company-info-dd {
  color:       #fff;
  font-size:   16px;
  line-height: 1.8;
  margin:      0;
}
@media (min-width: 1024px) {
  .company-info-dd { font-size: 15px; letter-spacing: 0.05em;}
}

.company-map-section {
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .company-map-section { padding-bottom: 120px; }
}

.company-map-inner {
  max-width: 1024px;
  margin:    0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1024px) {
  .company-map-inner {
    max-width: 1024px;
  margin:    0 auto;
  padding-left: 15px;
  padding-right: 15px;
  }
}

.company-map-wrap {
  background:    #fff;
  overflow:      hidden;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .company-map-wrap iframe {
    height: 350px !important;
  }
}
@media (min-width: 1024px) {
  .company-map-wrap { margin-bottom: 70px; }
}

.company-map-section .btn-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           200px;
  border-radius:   9999px;
  font-family:     var(--font-display);
  font-size:       16px;
  font-weight:     400;
  padding:         9px 15px;
  transition:      all var(--transition-base);
  text-decoration: none;
  cursor:          pointer;
  border:          1px solid;
  white-space:     nowrap;
}

.company-map-section .btn-outline:hover {
  transform: scale(1.05);
}

/* ============================================================
   Recruit Pages
   ============================================================ */

/* ── recruit.php ─────────────────────────────────────────── */
.recruit-hero__title-area {
  padding-top:    156px;
  padding-bottom: 25px;
}
@media (min-width: 1024px) {
  .recruit-hero__title-area {
    padding-top: 197px;
    padding-left: 41px;
    padding-bottom: 63px;
  }
}

.recruit-hero__title-area p {
  margin-bottom: 7px !important;
}
@media (min-width: 1024px) {
  .recruit-hero__title-area p { margin-bottom: 11px; }
}

.recruit-hero__title-area h1 {
  font-size: 40px;
}
@media (min-width: 1024px) {
  .recruit-hero__title-area h1 { font-size: 80px; }
}

.recruit-hero__image {
  position: relative;
  height:   300px;
  width:    100%;
  overflow: hidden;
}
.recruit-hero__image img {
  object-position: center 12%;
}
@media (min-width: 1024px) {
  .recruit-hero__image { height: 600px; }
}

.recruit-main-section {
  background-color: #7596B9;
  padding-bottom:   120px;
}

@media (min-width: 1024px) {
  .recruit-main-section { padding-bottom: 60px; }
}

.recruit-main-section .responsive-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}
@media (min-width: 768px) {
  .recruit-main-section .responsive-container {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
}

@media (min-width: 1024px) {
  .recruit-main-section { padding-bottom: 120px; }
}

.recruit-main-message-wrap {
  padding-top:   80px;
  margin-bottom: 45px;
}
@media (min-width: 1024px) {
  .recruit-main-message-wrap {
    padding-top:   120px;
    margin-bottom: 60px;
  }
}

.recruit-main-message {
  color:          #fff;
  font-size:      30px;
  font-weight:    500;
  line-height:    1.4;
  letter-spacing: 0.05em;
  font-family:    var(--font-sans);
}
@media (min-width: 1024px) {
  .recruit-main-message { font-size: 40px; }
}

/* カードグリッド */
.recruit-sections {
  display:        flex;
  flex-direction: column;
  gap:            60px;
}
@media (min-width: 1024px) {
  .recruit-sections { gap: 40px; }
}

.recruit-card-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   24px;
}
@media (min-width: 1024px) {
  .recruit-card-row {
    grid-template-columns: 1fr 1fr;
    gap:                   56px;
    align-items:           flex-start;
  }
}

.recruit-card-image {
  position: relative;
  width:    100%;
  height:   230px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .recruit-card-image { height: 392px; }
}

.recruit-card-image img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
}

.recruit-card-label {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 16px;
  margin-top: -5px;
}

.recruit-card-dot {
  display:       block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #fff;
  flex-shrink:   0;
}

.recruit-card-label p {
  color:          #fff;
  font-size:      13px;
  font-weight:    400;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .recruit-card-label p { font-size: 15px; }
}

.recruit-card-heading {
  color:          #fff;
  font-size:      16px;
  font-weight:    500;
  line-height:    1.448;
  margin-bottom:  30px;
  font-family:    var(--font-sans);
}
@media (min-width: 1024px) {
  .recruit-card-heading {
    font-size:     18px;
    margin-bottom: 39px;
  }
}

.recruit-card-description {
  color:          #fff;
  font-size:      13px;
  font-weight:    400;
  line-height:    1.8;
  letter-spacing: 0.05em;
  margin-bottom:  24px;
}
@media (min-width: 1024px) {
  .recruit-card-description {
    font-size:     16px;
    margin-bottom: 40px;
    letter-spacing: -0.02em;
    line-height: 1.7;
  }
}

/* Job Details */
.recruit-job-details {
  margin-top: 80px;
}
@media (min-width: 1024px) {
  .recruit-job-details { margin-top: 117px; }
}

.recruit-job-header {
  margin-bottom: 32px;
  margin-left: 10px;
}
@media (min-width: 1024px) {
  .recruit-job-header { margin-bottom: 59px; margin-left: 0px;}
}

.recruit-job-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   20px;
}
@media (min-width: 1024px) {
  .recruit-job-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   32px;
  }
}

.recruit-job-card {
  display:       block;
  background:    transparent;
  border:        1px solid #fff;
  height:        200px;
  padding:       26px 20px 24px;
  position:      relative;
  text-decoration: none;
  transition:    background var(--transition-base);
}
@media (min-width: 1024px) {
  .recruit-job-card {
    height:   279px;
    padding:  44px 40px 40px;
  }
}

.recruit-job-card:hover {
  background: #0033A0;
}

.recruit-job-card__title {
  color:       #fff;
  font-size:   24px;
  font-weight: 400;
  line-height: 1.445;
}
@media (min-width: 1024px) {
  .recruit-job-card__title { font-size: 36px; letter-spacing: 0.05em;}
}

.recruit-job-card__btn {
  position: absolute;
  bottom:   16px;
  right:    20px;
  display:  flex;
  gap:      8px;
  align-items: center;
}
@media (min-width: 1024px) {
  .recruit-job-card__btn {
    bottom: 38px;
    right:  35px;
  }
}

/* ── recruit-profiles.php (Employee Profiles) ────────────── */
.ep-section {
  padding: 51px 20px;
}
@media (min-width: 1024px) {
  .ep-section { padding: 62px 40px; }
}

.ep-container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.ep-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   39px;
}
@media (min-width: 1024px) {
  .ep-grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   58px 26px;
  }
}

.ep-card--link {
  display:         block;
  text-decoration: none;
  color:           inherit;
  transition:      opacity 0.3s ease;
}
.ep-card--link:hover {
  opacity: 0.7;
}

.ep-card__image {
  width:      100%;
  aspect-ratio: 350 / 233;
  background: #D9D9D9;
  overflow:   hidden;
}
@media (min-width: 1024px) {
  .ep-card__image { aspect-ratio: 384 / 256; }
}

.ep-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.ep-card__body {
  padding-top: 21px;
}

@media (min-width: 1024px) {
  .ep-card__body { padding-top: 22px; }
}

.ep-card__dept {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .ep-card__dept { margin-bottom: 22px; }
}

.ep-card__dot {
  display:       block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #fff;
  flex-shrink:   0;
}
@media (max-width: 1023px) {
  .ep-card__dot {
    width:  4px;
    height: 4px;
  }
}

.ep-card__dept p {
  color:       #fff;
  font-size:   15px;
  font-weight: 400;
  line-height: 1;
}
@media (max-width: 1023px) {
  .ep-card__dept p { font-size: 13px; }
}

.ep-card__quote {
  color:       #fff;
  font-size:   16px;
  font-weight: 500;
  line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 19px;
}
@media (min-width: 1024px) {
  .ep-card__quote { font-size: 18px; margin-bottom: 20px;}
}

.ep-card__info {
  color:       #fff;
  font-size:   13px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .ep-card__info {
    font-size: 15px;
    letter-spacing: 0.05em;
  }
}

.ep-job-section {
  padding-top:    64px;
  padding-bottom: 119px;
}
@media (min-width: 1024px) {
  .ep-job-section {
    padding-top:    57px;
    padding-bottom: 120px;
  }
  .ep-job-section .responsive-container {
    padding-left: 41px;
  }
}

/* ── recruit-profile-detail.php (Employee Profile Detail) ── */

/* --- Profile Hero --- */
.epd-hero {
  padding: 49px 20px;
}
@media (min-width: 1024px) {
  .epd-hero { padding: 61px 40px; }
}

.epd-hero__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       24px;
}
@media (min-width: 1024px) {
  .epd-hero__inner {
    flex-direction: row;
    gap:            0;
  }
}

.epd-hero__image {
  width:      100%;
  aspect-ratio: 350 / 233;
  background: #D9D9D9;
  overflow:   hidden;
}
@media (min-width: 1024px) {
  .epd-hero__image {
    width:        588px;
    aspect-ratio: 588 / 392;
    flex-shrink:  0;
  }
}

.epd-hero__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.epd-hero__info {
  display:        flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0;
}
@media (min-width: 1024px) {
  .epd-hero__info {
    padding-top:  74px;
    padding-left: 25px;
  }
}

.epd-hero__quote {
  color:       #023A94;
  font-size:   20px;
  font-weight: 500;
  line-height: 1.8;
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 17px;
}
@media (min-width: 1024px) {
  .epd-hero__quote {
    font-size:     30px;
    line-height:   1.6;
    margin-bottom: 40px;
  }
}

.epd-hero__meta {
  font-size:      13px;
  font-weight:    400;
  line-height:    1.8;
  color:          #000;
  letter-spacing: 0.05em;
  margin-bottom:  11px;
}
@media (min-width: 1024px) {
  .epd-hero__meta {
    font-size: 15px;
    margin-bottom: 21px;
  }
}

.epd-hero__position {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  border:         1px solid #000;
  border-radius:  30px;
  padding:        8px 12px;
  font-size:      13px;
  font-weight:    400;
  color:          #000;
  letter-spacing: 0.05em;
  line-height:    1;
  align-self:     flex-start;
}
@media (min-width: 1024px) {
  .epd-hero__position { font-size: 15px; }
}

/* --- Content Sections --- */
.epd-sections {
  padding: 6px 20px 0;
}
@media (min-width: 1024px) {
  .epd-sections { padding: 14px 142px 0; }
}

.epd-block {
  max-width: var(--container-max);
  margin:    0 auto 55px;
}
.epd-block:nth-child(3) { margin-bottom: 52px; }
@media (min-width: 1024px) {
  .epd-block { margin-bottom: 83px; }
  .epd-block:nth-child(3) { margin-bottom: 66px; }
}

.epd-block__inner {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}
@media (min-width: 1024px) {
  .epd-block--text-left .epd-block__inner,
  .epd-block--image-left .epd-block__inner {
    flex-direction: row;
    align-items:    flex-start;
    gap:            25px;
  }
}

@media (max-width: 1023px) {
  .epd-block--image-left .epd-block__text  { order: 1; }
  .epd-block--image-left .epd-block__image { order: 2; }
}

.epd-block__text {
  flex: 1;
  min-width: 0;
}

.epd-block__image {
  background: #D9D9D9;
  overflow:   hidden;
}
@media (max-width: 1023px) {
  .epd-block__image {
    width:  280px;
    margin: 0 auto;
  }
}
@media (min-width: 1024px) {
  .epd-block--text-left .epd-block__image,
  .epd-block--image-left .epd-block__image {
    width:      486px;
    flex-shrink: 0;
  }
  .epd-block--image-left .epd-block__text {
    position: relative;
    top:      -7px;
  }
}

.epd-block__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* セクションラベル（青文字 + 下線） */
.epd-block__label {
  margin-bottom: 31px;
}

@media (min-width: 1024px) {
  .epd-block__label { margin-bottom: 38px; }
}

.epd-block__label span {
  display:        inline-block;
  color:          #023A94;
  font-size:      16px;
  font-weight:    400;
  font-family:    'Noto Sans JP', sans-serif;
  padding-bottom: 4px;
  border-bottom:  1px solid #023A94;
}

/* セクション見出し */
.epd-block__heading {
  font-size:   16px;
  font-weight: 500;
  color:       #000;
  line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
  margin-bottom: 20px;
}
@media (min-width: 1024px) {
  .epd-block__heading {
    font-size:     18px;
    margin-bottom: 20px;
  }
}

/* セクション本文 */
.epd-block__body {
  font-size:      13px;
  font-weight:    400;
  line-height:    1.78;
  color:          #000;
  letter-spacing: 0.04em;
}
@media (min-width: 1024px) {
  .epd-block__body {
    font-size: 15px;
    line-height:    1.8;
  }
}

/* --- ALL ボタン (一覧に戻る) --- */
.epd-back {
  display:         flex;
  justify-content: center;
  padding:         62px 20px 121px;
}
@media (min-width: 1024px) {
  .epd-back { padding: 36px 40px 120px; }
}

.epd-back__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             120px;
  width:           193px;
  height:          50px;
  border:          1px solid #000;
  border-radius:   30px;
  color:           #000;
  font-size:       16px;
  font-family:     'Jost', sans-serif;
  font-weight:     400;
  text-decoration: none;
  transition:      background 0.2s, color 0.2s;
}
@media (max-width: 1023px) {
  .epd-back__btn { width: 200px; gap: 113px;}
}

.epd-back__btn:hover {
  background: #000;
  color:      #fff;
}

/* ── recruit-message.php ─────────────────────────────────── */
.recruit-msg-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}
@media (min-width: 768px) {
  .recruit-msg-container {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
}

.recruit-msg-intro {
  padding-bottom: 85px;
}
@media (min-width: 1024px) {
  .recruit-msg-intro { padding-bottom: 157px; }
}

.recruit-msg-intro__grid {
  display:               grid;
  grid-template-columns: 1fr;
  max-width:             1600px;
  margin:                0 auto;
}
@media (min-width: 1024px) {
  .recruit-msg-intro__grid {
    grid-template-columns: 3fr 9fr;
    gap: 8px;
  }
}

.recruit-msg-intro__spacer {
  display: none;
}
@media (min-width: 1024px) {
  .recruit-msg-intro__spacer { display: block; }
}

.recruit-msg-intro__heading {
  font-size:      20px;
  font-weight:    400;
  color:          #000;
  display:        inline-block;
  padding-bottom: 6px;
  margin-top: 17px;
  margin-bottom:  22px;
  letter-spacing: 0.05em;
}
@media (min-width: 1024px) {
  .recruit-msg-intro__heading {
    font-size:     30px;
    letter-spacing: 0.000em;
    margin-top: 50px;
    margin-bottom: 52px;
  }
}

.recruit-msg-intro__text {
  color:          #000;
  font-size:      13px;
  line-height:    1.8;
  letter-spacing: -0.016em;
}
@media (min-width: 1024px) {
  .recruit-msg-intro__text { font-size: 16px; }
}

/* Timeline */
.recruit-timeline-section {
  padding-bottom: 0px;
}
@media (min-width: 1024px) {
  .recruit-timeline-section { padding-bottom: 16px; }
}

.recruit-timeline-block {
  max-width:     1600px;
  margin:        0 auto 84px;
  display:       grid;
  grid-template-columns: 1fr;
  gap:           0;
}
@media (min-width: 1024px) {
  .recruit-timeline-block {
    grid-template-columns: 3fr 9fr;
    margin-bottom:         106px;
    gap:                   9px;
  }
}

.recruit-timeline-label {
  position: relative;
}

.recruit-timeline-era {
  color:       #023A94;
  font-family: var(--font-display);
  font-weight: 300;
  font-size:   40px;
  line-height: 1.2;
  display:     inline-block;
}
@media (min-width: 1024px) {
  .recruit-timeline-era { font-size: 50px; }
}

.recruit-timeline-era-sub {
  color:          #023A94;
  font-size:      13px;
  font-weight:    400;
  display:        inline-block;
  margin-left:    18px;
  margin-bottom:  6px;
  vertical-align: bottom;
}

.recruit-timeline-line {
  display: none;
}
@media (min-width: 1024px) {
  .recruit-timeline-line {
    display:    block;
    position:   absolute;
    left: 40px;
    top: 78px;
    width: 1px;
    height: 740px;
    background: #023A94;
  }
}

.recruit-timeline-content__heading {
  color:          #000;
  font-size:      16px;
  font-weight:    500;
  line-height:    1.448;
  margin-top:     20px;
  margin-bottom:  20px;
  font-family:    var(--font-sans);
}
@media (min-width: 1024px) {
  .recruit-timeline-content__heading {
    font-size:     18px;
    margin-top:    22px;
    margin-bottom: 32px;
    letter-spacing: 0em;
  }
}

.recruit-timeline-content__text {
  color:          #000;
  font-size:      13px;
  line-height:    1.8;
  letter-spacing: 0.05em;
  margin-bottom:  20px;
}
@media (min-width: 1024px) {
  .recruit-timeline-content__text {
    font-size:     16px;
    margin-bottom: 30px;
    line-height: 1.7;
    letter-spacing: -0.017em;
  }
}

.recruit-timeline-content__text p + p {
  margin-top: -1px;
}

.recruit-timeline-content__text p:last-child {
  margin-bottom: 28px;
}

@media (min-width: 1024px) {
  .recruit-timeline-content__text p:last-child {
    margin-bottom: 41px;
  }
}

.recruit-timeline-content__image {
  position: relative;
  width:    100%;
  height:   200px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .recruit-timeline-content__image { height: 420px; }
}

/* CTA Block (shared: message & benefits) */
.recruit-cta-section {
  padding-bottom: 120px;
}

.recruit-cta-block {
  display:          block;
  background-color: white;
  border:           1px solid #023A94;
  padding:          25px 30px 30px;
  text-decoration:  none;
  transition:       background var(--transition-base), color var(--transition-base);
  position:         relative;
  z-index:          10000;
}
@media (min-width: 1024px) {
  .recruit-cta-block { padding: 54px 40px 60px 40px; }
}

.recruit-cta-block:hover {
  background: #023A94;
}

.recruit-cta-inner {
  display:        flex;
  flex-direction: column;
  gap:            74px;
}
@media (min-width: 1024px) {
  .recruit-cta-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             219px;
  }
}

.recruit-cta-left {
  transition:  color var(--transition-base);
  flex-shrink: 0;
  white-space: nowrap;
}

.recruit-cta-right { transition: color var(--transition-base); margin-top: 5px;}

.recruit-cta-subtitle {
  color:          #023A94;
  font-size:      13px;
  letter-spacing: 0.05em;
  margin-bottom:  4px;
  transition:     color var(--transition-base);
}
@media (min-width: 1024px) {
  .recruit-cta-subtitle { font-size: 14px; }
}

.recruit-cta-block:hover .recruit-cta-subtitle { color: #fff; }

.recruit-cta-title {
  color:       #023A94;
  font-family: var(--font-display);
  font-weight: 300;
  font-size:   40px;
  line-height: 1.2;
  transition:  color var(--transition-base);
}
@media (min-width: 1024px) {
  .recruit-cta-title { font-size: 40px; letter-spacing: -0.00em;}
}

.recruit-cta-block:hover .recruit-cta-title { color: #fff; }

.recruit-cta-right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
}

.recruit-cta-heading {
  color:          #023A94;
  font-size:      30px;
  font-weight:    500;
  line-height:    1.4;
  letter-spacing: 0.05em;
  margin-bottom:  37px;
  font-family:    var(--font-sans);
  width:          100%;
  transition:     color var(--transition-base);
}
@media (min-width: 1024px) {
  .recruit-cta-heading {
    font-size:     36px;
    margin-bottom: 46px;
  }
}

.recruit-cta-block:hover .recruit-cta-heading { color: #fff; }

.recruit-cta-text {
  color:          #023A94;
  font-size:      15px;
  line-height:    1.75;
  margin-bottom:  60px;
  width:          100%;
  max-width:      651px;
  transition:     color var(--transition-base);
}
@media (min-width: 1024px) {
  .recruit-cta-text {
    font-size:     16px;
    margin-bottom: 39px;
  }
}

.recruit-cta-block:hover .recruit-cta-text { color: #fff; }

.recruit-cta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           193px;
  border-radius:   9999px;
  font-family:     var(--font-display);
  font-size:       16px;
  font-weight:     400;
  padding:         10px 15px 9px 21px;
  transition:      all var(--transition-base);
  text-decoration: none;
  cursor:          pointer;
  border:          1px solid var(--color-primary);
  color:           var(--color-primary);
  white-space:     nowrap;
}

.recruit-cta-btn:hover {
  transform:        scale(1.05);
  background-color: var(--color-primary);
  color:            #fff;
}

.recruit-cta-btn svg {
  flex-shrink: 0;
  transition:  transform var(--transition-base);
}

.recruit-cta-btn:hover svg {
  transform: translateX(4px);
}

.recruit-cta-block:hover .recruit-cta-btn {
  border-color: #fff;
  color:        #fff;
}

/* ── recruit-benefits.php ────────────────────────────────── */
.benefits-container {
  padding-left:  var(--container-pad-sm);
  padding-right: var(--container-pad-sm);
}
@media (min-width: 768px) {
  .benefits-container {
    padding-left:  var(--container-pad-md);
    padding-right: var(--container-pad-md);
  }
}

.benefits-layout {
  display: flex;
  gap:     0;
}

/* サイドナビ: benefits ページ用（未選択=黒） */
.benefits-sidenav {
  width:       280px;
  padding-top: 49px;
  align-self:  flex-start;
}

.benefits-sidenav .side-nav__link {
  color: #000;
}

.benefits-sidenav .side-nav__link.is-active,
.benefits-sidenav .side-nav__link:hover {
  color: var(--color-primary);
}

.benefits-main {
  flex: 1;
  min-width: 0;
  padding-left: 0;
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .benefits-main { padding-left: 26px; margin-top: 0px;}
}

.benefits-section {
  padding-top:    0;
  padding-bottom: 112px;
}
@media (min-width: 1024px) {
  .benefits-section {
    padding-top:    57px;
    padding-bottom: 61px;
  }
}

/* --- Activities section SP override --- */
@media (max-width: 1023px) {
  #activities.benefits-section {
    padding-bottom: 80px;  /* SP: 「登山」〜「休日・休暇」見出しまで80px */
  }
}

/* --- Holidays section overrides --- */
#holidays.benefits-section {
  padding-top:    47px;
  padding-bottom: 141px;
}

@media (max-width: 1023px) {
  #holidays.benefits-section {
    padding-top:    0;     /* SP: 上余白は activities 側で管理 */
    padding-bottom: 80px;  /* SP: 「休日・休暇」最終文〜「福利厚生」見出しまで80px */
  }
}

#holidays .benefits-section-title {
  margin-bottom: 50px;
}

#holidays .benefits-underlined-title {
  font-size:      20px;
  border-bottom:  1px solid #023A94;
  padding-bottom: 2px;
}

#holidays .benefits-underlined-title__sub {
  font-size: 13px;
}

#holidays .benefits-text-block {
  font-size:      16px;
  line-height:    1.7;
  letter-spacing: 0.00em;
}

@media (max-width: 1023px) {
  #holidays .benefits-text-block {
    font-size:      13px;
    line-height:    1.8;
    letter-spacing: 0.05em;
  }
}

#holidays .benefits-text-block p + p {
  margin-top: 27px;
}

/* --- Benefits section overrides --- */
#benefits.benefits-section {
  padding-top:    0;
  padding-bottom: 120px;
}

#benefits .benefits-section-title {
  margin-bottom: 49px;
}

#benefits .benefits-underlined-title {
  font-size:      20px;
  border-bottom:  1px solid #023A94;
  padding-bottom: 2px;
}

#benefits .benefits-underlined-title__sub {
  font-size: 13px;
}

#benefits .benefits-benefit-item {
  margin-bottom: 40px;
}

#benefits .benefits-activity__heading {
  color:          #000;
  font-size:      16px;
  font-weight:    500;
  line-height:    1.448;
  letter-spacing: 0.14em;
  margin-bottom:  33px;
  font-family:    var(--font-sans);
}

#benefits .benefits-activity__text {
  font-size: 16px;
  margin-bottom: 99px;
}

#benefits .benefits-text-block {
  font-size:      13px;
  line-height: 2.15;
  letter-spacing: 0.05em;
  margin-top: -35px;
}

#benefits .benefits-text-block p + p {
  margin-top: 24px;
}

/* --- Benefits page CTA override --- */
.page-template-recruit-benefits .recruit-cta-section {
  padding-bottom: 120px;
}

.page-template-recruit-benefits .recruit-cta-block {
  display:          block;
  background-color: transparent;
  border:           1px solid #023A94;
  padding:          26px 30px 29px;
  text-decoration:  none;
  transition:       background var(--transition-base), color var(--transition-base);
  position:         relative;
  z-index:          10000;
}
.page-template-recruit-benefits .recruit-cta-block:hover {
  background-color: #023A94;
}
@media (min-width: 1024px) {
  .page-template-recruit-benefits .recruit-cta-block { padding: 54px 40px 60px 40px; }
}

.page-template-recruit-benefits .recruit-cta-inner {
  display:        flex;
  flex-direction: column;
  gap:            65px;
}
@media (min-width: 1024px) {
  .page-template-recruit-benefits .recruit-cta-inner {
    flex-direction:  row;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             231px;
  }
}

.page-template-recruit-benefits .recruit-cta-left {
  transition:  color var(--transition-base);
  flex-shrink: 0;
  white-space: nowrap;
}

.page-template-recruit-benefits .recruit-cta-right {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  transition:     color var(--transition-base);
  margin-top:     5px;
}

.page-template-recruit-benefits .recruit-cta-subtitle {
  color:          #023A94;
  font-size:      13px;
  letter-spacing: 0.05em;
  margin-bottom:  0px;
  transition:     color var(--transition-base);
}
@media (min-width: 1024px) {
  .page-template-recruit-benefits .recruit-cta-subtitle { font-size: 14px; }
}

.page-template-recruit-benefits .recruit-cta-title {
  color:       #023A94;
  font-family: var(--font-display);
  font-weight: 300;
  font-size:   40px;
  line-height: 1.4;
  transition:  color var(--transition-base);
}
@media (min-width: 1024px) {
  .page-template-recruit-benefits .recruit-cta-title { font-size: 50px; letter-spacing: -0.00em; }
}

.page-template-recruit-benefits .recruit-cta-heading {
  color:          #023A94;
  font-size:      30px;
  font-weight:    500;
  line-height:    1.4;
  letter-spacing: 0.05em;
  margin-bottom:  33px;
  font-family:    var(--font-sans);
  width:          100%;
  transition:     color var(--transition-base);
}
@media (min-width: 1024px) {
  .page-template-recruit-benefits .recruit-cta-heading {
    font-size:     36px;
    margin-bottom: 55px;
  }
}

.page-template-recruit-benefits .recruit-cta-text {
  color:          #023A94;
  font-size:      13px;
  line-height:    2.05;
  margin-bottom:  59px;
  width:          100%;
  max-width:      651px;
  transition:     color var(--transition-base);
}
@media (min-width: 1024px) {
  .page-template-recruit-benefits .recruit-cta-text {
    font-size:     16px;
    margin-bottom: 49px;
    line-height:    1.7;
  }
}

.page-template-recruit-benefits .recruit-cta-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: space-between;
  width:           193px;
  border-radius:   9999px;
  font-family:     var(--font-display);
  font-size:       16px;
  font-weight:     400;
  padding:         10px 15px 9px 21px;
  transition:      all var(--transition-base);
  text-decoration: none;
  cursor:          pointer;
  border:          1px solid var(--color-primary);
  color:           var(--color-primary);
  white-space:     nowrap;
}

.benefits-section-title {
  margin-bottom: 50px;
}
@media (min-width: 1024px) {
  .benefits-section-title { margin-bottom: 64px; }
}

/* UnderlinedTitle */
.benefits-underlined-title {
  color:          #023A94;
  font-family:    var(--font-display);
  font-weight:    300;
  font-size:      20px;
  letter-spacing: 0.02em;
  display:        inline-flex;
  align-items:    baseline;
  gap:            16px;
  border-bottom:  1px solid #023A94;
  padding-bottom: 2px;
}

.benefits-underlined-title__sub {
  font-size:   13px;
  font-family: var(--font-sans);
  font-weight: 400;
  margin-top:  6px;
}

/* Cards */
.benefits-cards-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   23px;
  margin-bottom:         16px;
}
@media (min-width: 1024px) {
  .benefits-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   34px;
    margin-bottom:         34px;
  }
}

.benefits-card {
  background:     #fff;
  padding:        20px 20px 12px;
  display:        flex;
  flex-direction: column;
  max-height: 350px;
  min-height: 350px;
}
@media (min-width: 1024px) {
  .benefits-card {
    padding:    30px 32px 32px 30px;
    min-height: 430px;
    max-height: 430px;
  }
}

.benefits-card__label {
  color:          #000;
  font-size:      16px;
  font-weight:    600;
  line-height:    1.448;
  letter-spacing: 0.05em;
  margin-bottom:  30px;
  text-align:     center;
}
@media (min-width: 1024px) {
  .benefits-card__label {
    font-size:     18px;
    text-align:    left;
    margin-bottom: 30px;
  }
}

.benefits-card__body {
  flex:            1;
  flex-direction:  column;
  justify-content: center;
}

.benefits-card__chart {
  flex: 1;
  margin-top: -104px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1023px) {
  .benefits-card__chart {
    width: 88%;
    max-width: none;
    margin-top: -135px;
  }
}

/* 海外従業員人数カード */
.benefits-card--overseas {
  min-height: auto;
  max-height: none;
}
@media (min-width: 1024px) {
  .benefits-card--overseas {
    min-height: 280px;
    max-height: 280px;
  }
}

.benefits-overseas-body {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             20px;
  flex:            1;
  margin-left:     0;
}
@media (min-width: 1024px) {
  .benefits-overseas-body {
    flex-direction: row;
    align-items:    center;
    gap:            40px;
    margin-left:    94px;
  }
}

.benefits-overseas-total {
  display:     flex;
  align-items: baseline;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 4px;
}

.benefits-overseas-total__prefix {
  font-size:   16px;
  font-weight: 600;
  color:       #000;
  margin-right: 4px;
}

.benefits-overseas-total__num {
  font-family: 'Jost', sans-serif;
  font-size:   80px;
  font-weight: 400;
  color:       #023A94;
  line-height: 1;
}

.benefits-overseas-total__suffix {
  font-size:   30px;
  font-weight: 600;
  color:       #000;
}

.benefits-overseas-icons {
  display:         flex;
  align-items:     flex-end;
  gap:             6px;
  flex-wrap:       nowrap;
  justify-content: center;
  margin-top:      0;
}
@media (min-width: 1024px) {
  .benefits-overseas-icons {
    gap:             29px;
    margin-top:      -34px;
    justify-content: flex-start;
  }
}

.benefits-overseas-icon-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             8px;
}

@media (max-width: 1023px) {
  .benefits-overseas-icon-item {
    gap:             10px;
  }
}

.benefits-overseas-icon {
  width:  40px;
  height: 80px;
}
@media (min-width: 1024px) {
  .benefits-overseas-icon {
    width:  73.49px;
    height: 146.92px;
  }
}

.benefits-overseas-icon-label {
  font-size:      13px;
  font-weight:    500;
  color:          #000;
  letter-spacing: 0.03em;
  white-space:    nowrap;
}

@media (max-width: 1023px) {
  .benefits-overseas-icon-label {
    font-size: 11px;
  }
}

/* 男女の比率 */
.benefits-gender-icons {
  display:         flex;
  justify-content: center;
  gap:             3px;
  margin-bottom:   18px;
}

@media (min-width: 1024px) {
  .benefits-gender-icons {
    margin-bottom:   24px;
  }
}
.benefits-gender-icon {
  width:  57px;
  height: 110px;
}
@media (min-width: 640px) {
  .benefits-gender-icon {
    width:  64px;
    height: 112px;
  }
}
@media (min-width: 1024px) {
  .benefits-gender-icon {
    width:  77px;
    height: 150px;
  }
}

.benefits-gender-stats {
  display:         flex;
  justify-content: center;
  gap:             20px;
}
@media (min-width: 1024px) {
  .benefits-gender-stats { gap: 34px; }
}

.benefits-gender-stat { text-align: center; }

.benefits-gender-stat__label {
  color:          #000;
  font-size:      16px;
  font-weight:    500;
  letter-spacing: 0.05em;
  margin-bottom:  1px;
}

.benefits-gender-stat__divider {
  width:        129px;
  height:       1px;
  background:   #BCBCBC;
  margin-bottom: 4px;
}

/* カウントアップ */
.benefits-countup-wrap {
  display:     flex;
  align-items: baseline;
  justify-content: center;
  margin-top: -13px;
}

.benefits-countup {
  font-family: var(--font-display);
  font-size:   80px;
  font-weight: 400;
  line-height: 1.445;
}
@media (min-width: 1024px) {
  .benefits-countup { font-size: 80px; }
}

.benefits-countup--blue { color: #023A94; }
.benefits-countup--teal { color: #37A6D2; }

.benefits-countup-unit {
  font-family: var(--font-display);
  font-size:   30px;
  font-weight: 600;
  color:       #000;
  margin-left: 0%;
}
@media (min-width: 1024px) {
  .benefits-countup-unit { font-size: 32px; }
}

/* 文系理系の比率 */
.benefits-ratio-body {
  justify-content: space-around;
  gap:             40px;
  margin-top: 0px;
}

@media (max-width: 1023px) {
  .benefits-ratio-body {
    justify-content: space-around;
    gap:             40px;
    margin-top: -5px;
  }
  .benefits-ratio-body .benefits-countup {
    font-size: 70px;
  }
}

.benefits-ratio-item {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         39px;
  margin-bottom: -32px;
}

@media (min-width: 1024px) {
  .benefits-ratio-item {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         42px;
    margin-bottom: 0px;
  }
}

.benefits-ratio-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.benefits-ratio-icon img {
  width:  97px;
  height: 97px;
}
@media (min-width: 640px) {
  .benefits-ratio-icon img { width: 64px; height: 64px; }
}
@media (min-width: 1024px) {
  .benefits-ratio-icon img { width: 95px; height: 155px; }
}

.benefits-ratio-item__label {
  color:          #000;
  font-size:      16px;
  font-weight:    500;
  letter-spacing: 0.05em;
  margin-bottom:  0px;
  margin-top: 26px;
}

/* Activities */
.benefits-activity {
  margin-bottom: 60px;
}
.benefits-activity:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .benefits-activity { margin-bottom: 113px; margin-top: -16px;}
  .benefits-activity:last-child { margin-bottom: 0; }
}

.benefits-activity__heading {
  color:          #000;
  font-size:      16px;
  font-weight:    500;
  line-height:    1.448;
  letter-spacing: 0.05em;
  margin-bottom:  20px;
  font-family:    var(--font-sans);
}
@media (min-width: 1024px) {
  .benefits-activity__heading {
    font-size:     18px;
    margin-bottom: 22px;
  }
}

.benefits-activity__text {
  color:          #000;
  font-size:      13px;
  line-height:    1.8;
  margin-bottom:  30px;
  max-width:      892px;
}
@media (min-width: 1024px) {
  .benefits-activity__text {
    font-size:     16px;
    margin-bottom: 50px;
  }
}

.benefits-activity__image {
  position:    relative;
  width:       100%;
  aspect-ratio: 894 / 420;
  overflow:    hidden;
}

@media (max-width: 1023px) {
  .benefits-activity__image {
    height: 200px;;
  }
}

/* Benefits items */
.benefits-benefit-item {
  margin-bottom: 40px;
}
@media (min-width: 1024px) {
  .benefits-benefit-item { margin-bottom: 64px; }
}

/* Text block */
.benefits-text-block {
  color:          #000;
  font-size:      13px;
  line-height:    1.8;
  letter-spacing: 0.05em;
  max-width:      892px;
}
@media (min-width: 1024px) {
  .benefits-text-block { font-size: 16px; }
}

.benefits-text-block p + p {
  margin-top: 24px;
}

/* ============================================================
   Solution List Page (page-templates/solution.php)
   ============================================================ */

/* ─── Solution List コンテナ ─────────────────────────────── */
.solution-list-section {
  padding-top:    0px;
  padding-bottom: 80px;
}
@media (min-width: 1024px) {
  .solution-list-section { padding-top: 0px;  padding-bottom: 72px; }
}

.solution-list-container {
  max-width: 1600px;
  margin:    0 auto;
}

.solution-list-description {
  color:          #fff;
  font-size:      16px;
  line-height:    1.7;
  margin-bottom:  80px;
  font-weight:   300;
}
@media (min-width: 1024px) {
  .solution-list-description {
    font-weight:   400;
    margin-bottom: 80px;
  }
}

.solution-list-cards {
  margin-left: 0;
}
@media (min-width: 1024px) {
  .solution-list-cards {
    margin-left:  0px;
  }
}

/* ─── Solution List カード ───────────────────────────────── */
.solution-list-item {
  display:        flex;
  flex-direction: column;
  gap:            20px;
  margin-bottom:  50px;
}
@media (min-width: 768px) {
  .solution-list-item {
    flex-direction: row;
    gap:            40px;
    align-items:    flex-start;
  }
}

.solution-list-image {
  flex-shrink: 0;
  width:       100%;
}
.solution-list-image img {
  width:       100%;
  height:      200px;
  object-fit:  cover;
  border-radius: 4px;
  display:     block;
}
.solution-list-image--placeholder {
  width:        100%;
  height:       232px;
  background:   rgba(255,255,255,0.2);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .solution-list-image,
  .solution-list-image img,
  .solution-list-image--placeholder { width: 385px; }
  .solution-list-image img,
  .solution-list-image--placeholder { height: 256px; }
}

.solution-list-text { flex: 1; }
.solution-list-text h3 {
  font-size:   16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color:       #fff;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .solution-list-text h3 { font-size: 16px; margin-bottom: 32px; letter-spacing: 0.13em;}
}
.solution-list-text p {
  font-size:   13px;
  color:       #fff;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .solution-list-text p { font-size: 16px; line-height: 1.7; letter-spacing: -0.01em;}
}

/* ============================================================
   Solution Detail Page (single-solution.php)
   ============================================================ */

/* ─── PageHero バリアント: ライト背景 ────────────────────── */
.page-hero--light {
  background-color: #F5F8F9;
}
.page-hero__subtitle--blue {
  color: #023A94;
}
.page-hero__title--blue {
  color: #023A94;
}
.page-hero__divider--gray {
  background: #BCBCBC;
}
@media (max-width: 1023px) {
  .page-hero__title--sp-break {
    word-spacing: 100vw;
  }
}

.solution-detail-carousel-desc {
  padding-right: 20px;
}

/* ─── Detail Section ─────────────────────────────────────── */
.solution-detail-section {
  background: #F5F8F9;
  padding-bottom: 0;
}

.solution-detail-inner {
  max-width: 1600px;
  margin:    0 auto;
  padding:   2px 20px 0;
}
@media (min-width: 1024px) {
  .solution-detail-inner { padding-top: 0px; padding-left: 142px; padding-right: 142px;}
}

.solution-detail-heading {
  margin-bottom: 75px;
}
@media (min-width: 1024px) {
  .solution-detail-heading { margin-bottom: 77px; }
}

.solution-detail-title {
  font-size:   20px;
  font-weight: 500;
  color:       #000;
  line-height: 1.7;
  margin-bottom: 14px;
}

@media (min-width: 1024px) {
  .solution-detail-title {
    font-size:   30px;
    font-weight: 500;
    color:       #000;
    line-height: 1.5;
    margin-bottom: 18px;
  }
}

.solution-category-tag {
  display:      inline-block;
  border:       1px solid #000;
  border-radius: 20px;
  padding:      2px 8px;
  font-size:    13px;
  color:        #000;
}

@media (min-width: 1024px) {
  .solution-category-tag {
    display:      inline-block;
  border:       1px solid #000;
  border-radius: 20px;
  padding:      4px 12px;
  font-size:    13px;
  color:       #000;
  }
}

.solution-detail-block {
  margin-bottom: 25px;
}
@media (min-width: 1024px) {
  .solution-detail-block { margin-bottom: 60px; }
}
.solution-detail-block--last {
  margin-bottom: 60px;
}
@media (min-width: 1024px) {
  .solution-detail-block--last { margin-bottom: 120px; }
}

.solution-section-label {
  font-size:   16px;
  font-weight: 500;
  color:       #000;
  margin-bottom: 19px;
}

@media (min-width: 1024px) {
  .solution-section-label {
    font-size:   18px;
    font-weight: 500;
    color:       #000;
    margin-bottom: 20px;
  }
}

.solution-content {
  font-size:      14px;
  color:          #000;
  line-height:    1.4;
  letter-spacing: -0.02em;
}
.solution-content p:first-of-type { margin-bottom: 23px}
.solution-content p               { margin-bottom: 8px}
.solution-content ul              { padding-left: 1.2em; }
.solution-content li              { margin-bottom: 4px; }
.solution-content strong          { font-weight: 600; }

@media (min-width: 1024px) {
  .solution-content {
    letter-spacing: 0.13em;
  }
  .solution-content p:first-of-type { margin-bottom: 24px; }
  .solution-content p               { margin-bottom: 8px; }
}

/* ============================================================
   Solution Timeline (template-parts/blocks/solution-timeline.php)
   ============================================================ */

/* ─── ラッパー ──────────────────────────────────────────── */
.solution-timeline-wrapper {
  position:   relative;
  overflow:   hidden;
}

/* ─── 2トーン背景 ───────────────────────────────────────── */
.solution-timeline-bg {
  position: absolute;
  inset:    0;
  display:  flex;
  z-index:  0;
}
.solution-timeline-bg-left  { width: 50%; background: #E0E4E9; }
.solution-timeline-bg-right { width: 50%; background: #ECECEC; }

/* ─── インナー ──────────────────────────────────────────── */
.solution-timeline-inner {
  position: relative;
  padding-bottom: 50px;
  /* z-index は設定しない → 子カード(z-60)がルートスタック上でアイコン(z-50)より上に来る */
}

@media (min-width: 1024px) {
  .solution-timeline-inner {
    padding-bottom: 0px;
  }
}

/* ─── ヘッダー（SEMCO / Customer ラベル） ───────────────── */
.solution-timeline-header {
  display:  flex;
  position: relative;
  z-index:  20;
  padding:  48px 0 64px;
}
@media (min-width: 1024px) {
  .solution-timeline-header { padding: 82px 0 64px; }
}

.solution-timeline-col {
  width:           50%;
  display:         flex;
  justify-content: center;
}
.solution-timeline-col--header {
  flex-direction: column;
  align-items:    center;
}

.solution-timeline-label {
  font-size:      14px;
  color:          #023A94;
  font-family:    'Jost', sans-serif;
  letter-spacing: 0.05em;
  margin-bottom:  -7px;
}

.solution-timeline-col-title {
  font-size:   30px;
  color:       #023A94;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .solution-timeline-col-title { font-size: 40px; }
}

/* アイコンプレースホルダー（JS管理アイコン用スペース） */
.solution-icon-placeholder {
  width:  100px; /* SP: 100px（手動調整はここを変更） */
  height: 100px;
}
@media (min-width: 768px) {
  .solution-icon-placeholder { width: 170px; height: 170px; }
}

/* ─── 点線 ──────────────────────────────────────────────── */
.solution-timeline-lines {
  display:        flex;
  position:       absolute; /* フローから外して背景ドットをセクション全体に重ねる */
  top:            0;        /* JS で header-bottom に再設定 */
  left:           0;
  width:          100%;
  z-index:        1;
  pointer-events: none;
}

.solution-dotted-line {
  width:            5px;
  background-image: radial-gradient(circle, #BCBCBC 2.5px, transparent 2.5px);
  background-size:  5px 14px;
  background-repeat: repeat-y;
}

/* ─── セクションコンテナ ────────────────────────────────── */
.solution-timeline-sections {
  padding-top:    150px;
  position:       relative;
}
@media (min-width: 768px) {
  .solution-timeline-sections { padding-top: 40px;}
}

/* ─── 各セクション ──────────────────────────────────────── */
.solution-timeline-section {
  position:      relative;
  margin-bottom: 0;
  display:       flex;
}

/* Section 1: 上マージン大きめ */
.solution-timeline-section:first-child {
  margin-top: 0px;
}

/* Section 2〜6: セクション間の余白 */
.solution-timeline-section + .solution-timeline-section {
  margin-top:    120px;
  margin-bottom: 50px;
}
/* SP: カード間マージン 120px（手動調整はmargin-topの値を変更） */
@media (max-width: 767px) {
  .solution-timeline-section + .solution-timeline-section {
    margin-top:    120px;
    margin-bottom: 0;
  }
}

/* both: 全幅 + 中央揃え */
.solution-timeline-section--both {
  justify-content: center;
}

/* ─── セクション内コンテナ ──────────────────────────────── */
.solution-section-inner {
  width:           100%;
  display:         flex;
  justify-content: center;
  padding:         0 20px;
}
@media (min-width: 768px) {
  .solution-section-inner { padding: 0 40px; }
  .solution-timeline-section--semco    .solution-section-inner,
  .solution-timeline-section--customer .solution-section-inner { width: 50%; }
}

/* ─── スペーサー（semco/customer の空き半分） ───────────── */
.solution-section-spacer {
  display: none;
}
@media (min-width: 768px) {
  .solution-section-spacer {
    display: block;
    width:   50%;
  }
}

/* ─── カード共通 ────────────────────────────────────────── */
.solution-timeline-section .solution-card {
  color:         #fff;
  border-radius: 8px;
  box-shadow:    0 4px 20px rgba(0,0,0,.1);
  overflow:      hidden;
  min-height:    460px;
  position:      relative;
  z-index:       60;
}

/* ── 全幅カード ──────────────────────────────────────────── */
.solution-card--full {
  display:        flex;
  flex-direction: column;
  flex:           1;       /* 親 flex コンテナの残スペースをすべて埋める */
  min-width:      0;       /* flex 子要素の縮みを許可 */
}
@media (min-width: 768px) {
  .solution-card--full {
    flex-direction: row;
  }
}

.solution-timeline-section .solution-card__text {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         32px 20px;
  text-align:      left;
}
@media (min-width: 768px) {
  .solution-timeline-section .solution-card__text { padding: 50px 48px 48px 48px; }
}

.solution-card__image {
  width: 100%;
}
@media (min-width: 768px) {
  .solution-card__image {
    width:      calc(100% * 5 / 9);
    flex-shrink: 0;
  }
  #section-2 .solution-card__image {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #section-2 .solution-card__image img {
    transform: scale(0.75);
  }
}
.solution-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── 半幅カード ─────────────────────────────────────────── */
.solution-card--half {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  text-align:      center;
  padding:         32px 20px;
  width:           100%;
}
@media (min-width: 768px) {
  .solution-card--half { padding: 50px 48px 48px 48px; }
}

/* ── カードテキスト ──────────────────────────────────────── */
.solution-timeline-section .solution-card__subtitle {
  font-size:    13px; /* SP: 13px regular（手動調整はここを変更） */
  font-weight:  400;
  font-family:  'Noto Sans JP', sans-serif;
  text-align:   center;
  color:        #fff;
}
@media (min-width: 768px) {
  .solution-timeline-section .solution-card__subtitle { font-size: 15px; font-weight: 400; }
}

.solution-timeline-section .solution-card__title {
  font-size:    30px; /* SP: 30px light（手動調整はここを変更） */
  font-weight:  300;
  margin-bottom: 25px;
  font-family:  'Jost', sans-serif;
  line-height:  1.7;
  text-align:   center;
  color:        #fff;
}
@media (min-width: 768px) {
  .solution-timeline-section .solution-card__title { font-size: 36px; font-weight: 300;}
}
@media (min-width: 1024px) {
  .solution-timeline-section .solution-card__title { font-size: 40px; font-weight: 300;}
}

.solution-timeline-section .solution-card__content {
  font-size:   13px;
  line-height: 1.8;
  font-family: 'Noto Sans JP', sans-serif;
  text-align:  left;
  color:       #fff;
}
@media (min-width: 768px) {
  .solution-timeline-section .solution-card__content { font-size: 13px; margin: 0px 12px 0px 8px;}
}

/* ─── フローティングアイコン ─────────────────────────────── */
.solution-floating-icon {
  width:        100px; /* SP: 100px（手動調整はここを変更） */
  height:       100px;
  background:   #fff;
  border-radius: 50%;
  display:      flex;
  align-items:  center;
  justify-content: center;
  box-shadow:   0 4px 20px rgba(0,0,0,.15);
  /* center-align on the left/right % position */
  transform:    translateX(-50%) translateY(-50%);
  z-index:      50;
  /* 初期位置: absolute（JSが動的に上書き） */
  position:     absolute;
  top:          36vh;
}
@media (min-width: 768px) {
  .solution-floating-icon { width: 120px; height: 120px; }
}
@media (min-width: 1024px) {
  .solution-floating-icon { width: 170px; height: 170px; }
}
@media (min-height: 1024px) {
  .solution-floating-icon { top:27vh;}
}
@media (min-height: 1100px) {
  .solution-floating-icon { top:25vh;}
}
@media (min-height: 1301px) {
  .solution-floating-icon { top:19vh;}
}
@media (min-height: 1664px) {
  .solution-floating-icon { top:16vh;}
}
@media (min-height: 1920px) {
  .solution-floating-icon { top:15vh;}
}

.solution-floating-icon--semco    { border: 2px solid #023A94; left: 25%; }
.solution-floating-icon--customer { border: 2px solid #999;    left: 75%; }

.solution-floating-icon img {
  width:      80px;
  height:     80px;
  object-fit: contain;
}
@media (min-width: 1024px) {
  .solution-floating-icon img { width: 120px; height: 120px; }
}
.solution-floating-icon--customer img { width: 40px; height: 40px; }
@media (min-width: 768px) {
  .solution-floating-icon--customer img { width: 80px; height: 80px; }
}

/* 静的アイコン（JSで生成）のフェードイン */
@keyframes stIconFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Case Study Products (template-parts/blocks/solution-products.php)
   ============================================================ */

.solution-products-section {
  background:      #F5F8F9;
  padding:         75px 0 60px;
}
@media (min-width: 1024px) {
  .solution-products-section { padding: 120px 0; }
}

.solution-products-heading {
  margin-bottom: 48px;
}

.solution-products-eyebrow {
  font-size:      14px;
  color:          #023A94;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .solution-products-eyebrow {
    font-size:   14px;
    color:       #023A94;
    letter-spacing: 0.05em;
  }
}

.solution-products-title {
  font-size:   clamp(41px, 4vw, 50px);
  font-weight: 300;
  color:       #023A94;
  font-family: 'Jost', sans-serif;
  line-height: 1.445;
}

@media (min-width: 1024px) {
  .solution-products-title {
    font-size:   clamp(36px, 4vw, 50px);
    font-weight: 300;
    color:       #023A94;
    font-family: 'Jost', sans-serif;
    line-height: 1.445;
  }
}

.solution-products-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap:               50px; /* SP: 上下gap（手動調整はここを変更） */
  column-gap:            14px; /* SP: 左右gap */
  margin-bottom:         73px;
}
@media (min-width: 1024px) {
  .solution-products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   24px;
    margin-bottom:         45px;
  }
}

/* ─── 製品カード ────────────────────────────────────────── */
.solution-product-card {
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

.solution-product-card__image {
  height:          168px;
  background:      #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   21px;
}

/* SP/PC共通: 画像を枠内に収める */
.solution-product-card__image img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  padding:    16px;
}

@media (min-width: 1024px) {
  .solution-product-card__image {
    height:          282px;
    background:      #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   20px;
  }
}
.solution-product-card__no-image {
  width:      100%;
  height:     100%;
  background: #f0f0f0;
}

.solution-product-card__body { flex: 1; display: flex; flex-direction: column; }
.solution-product-card__body h3 {
  font-size:     15px;
  font-weight:   500;
  color:         #000;
  line-height:   1.6;
  margin-bottom: 10px;
  white-space:   pre-line;
  min-height:    calc(18px * 1.6 * 2); /* 2行分の高さを確保して説明文の開始位置を揃える */
}

@media (min-width: 1024px) {
  .solution-product-card__body h3 {
    font-size:     18px;
    font-weight:   500;
    color:         #000;
    line-height:   1.6;
    margin-bottom: 21px;
  }
}
.solution-product-card__body p {
  font-size:     13px;
  font-weight: 400;
  color:         #000;
  line-height:   1.8;
  margin-bottom: 20px;
  flex-grow:     1;
  text-align:    left;
}

/* 製品紹介動画ボタン */
.solution-product-card__video-btn { margin-top: auto; text-align: left; }
@media (min-width: 1024px) {
  .solution-product-card__video-btn { margin-top: auto; text-align: right; }
}
.solution-product-card__video-btn a {
  display:         inline-flex;
  align-items:     center;
  gap:             17px;
  border:          1px solid #000;
  border-radius:   20px;
  padding:         3px 12px;
  font-size:       12px;
  color:           #000;
  text-decoration: none;
  transition:      background .2s, color .2s;
  white-space:     nowrap;
}
@media (min-width: 1024px) {
  .solution-product-card__video-btn a {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    border:          1px solid #000;
    border-radius:   20px;
    padding:         3px 14px;
    font-size:       13px;
    color:           #000;
    text-decoration: none;
    transition:      background .2s, color .2s;
    white-space:     nowrap;
    }
}
.solution-product-card__video-btn a:hover {
  background: #000;
  color:      #fff;
}

/* ─── View more ─────────────────────────────────────────── */
.solution-products-more {
  display:         flex;
  justify-content: center;
}

.solution-viewmore {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  color:           #000;
  text-decoration: none;
  transition:      opacity .2s;
}
.solution-viewmore:hover { opacity: .7; }

.solution-viewmore__inner {
  display:     flex;
  align-items: baseline;
  gap:         97px;
}

@media (min-width: 1024px) {
  .solution-viewmore__inner {
    gap:         78px;
  }
}

/* solution-products ページのみに適用: __inner 下部ライン */
.solution-products-more .solution-viewmore__inner {
  border-bottom:  1px solid #000;
  padding-bottom: 0px; /* SP: 文字下8px（手動調整はここを変更） */
}
@media (min-width: 1024px) {
  .solution-products-more .solution-viewmore__inner {
    padding-bottom: 6px; /* PC: 文字下6px（手動調整はここを変更） */
  }
}

.solution-viewmore__text {
  font-size:   16px;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  line-height: 1.445;
}

@media (min-width: 1024px) {
  .solution-viewmore__text {
    font-size:   20px;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    line-height: 1.445;
  }
}
.solution-viewmore__plus {
  font-size:   24px;
  font-weight: 300;
}
.solution-viewmore__line {
  width:      100%;
  height:     1px;
  background: #000;
  margin-top: 4px;
}