html {
  font-size: 15px;
  overflow-x: clip;
  scroll-behavior: smooth;
}

:where(#about, #business, #news, #recruit, #contact) {
  scroll-margin-top: 84px;
}

:root {
  font-family: 'Noto Sans', Arial, sans-serif;
  color: #086e94;
  background: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #ffffff;
  overflow: clip;
}

.page-wrapper {
  width: min(1440px, 100%);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(8, 110, 148, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  gap: 24px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-logo img {
  display: block;
  height: 27px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-size: 0.9333rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}
@media (max-width: 1280px) {
  .site-nav {
    gap: 1.4rem;
  }
}
.site-nav a,
.footer-nav a {
  color: #086e94;
  text-decoration: none;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.hamburger {
  display: none;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #086e94;
  border-radius: 2px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  background: linear-gradient(180deg, #00DDFF 0%, #3BB3DB 100%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  visibility: hidden;
}

.mobile-menu.is-open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

.mobile-menu-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mobile-menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 26px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
}

.mobile-menu-close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.mobile-menu-nav a {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.15rem;
}

.mobile-menu-lang {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.mobile-menu-lang .lang {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
  background: transparent;
  font-size: 0.85rem;
}

.mobile-menu-lang .lang.active {
  background: #ffffff;
  color: #086e94;
  border-color: #ffffff;
}

.lang-switch {
  display: flex;
  gap: 8px;
}

.lang {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(8, 110, 148, 0.3);
  background: transparent;
  color: #086e94;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang.active {
  background: #086e94;
  color: #ffffff;
  border-color: #086e94;
}

.hero-section {
  position: relative;
  overflow: hidden;
  height: 100svh;
  min-height: 640px;
  margin-top: -84px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 48px 56px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, #eaf6fb 0%, #ffffff 100%);
}

.mv-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mv-layer {
  position: absolute;
  inset: 0;
  display: flex;
  width: 200%;
  animation-name: mvScroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.mv-back {
  animation-duration: 40s;
  opacity: 0.9;
  z-index: 1;
  filter: blur(6px);
}

.mv-mid-back {
  animation-duration: 30s;
  opacity: 0.75;
  z-index: 2;
  filter: blur(3px);
}

.mv-mid-front {
  animation-duration: 20s;
  opacity: 0.9;
  z-index: 3;
  filter: blur(1px);
}

.mv-front {
  animation-duration: 14s;
  opacity: 1;
  z-index: 4;
}

.mv-set {
  position: relative;
  flex: 0 0 50%;
  height: 100%;
}

.mv-set img {
  position: absolute;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  border-radius: 50%;
}

@keyframes mvScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hero-copy {
  position: relative;
  z-index: 10;
  width: 100%;
  text-align: left;
}

.scroll-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #ffffff;
}

.sb-track {
  display: flex;
  width: max-content;
  animation: sbScrollRight 40s linear infinite;
  will-change: transform;
}

.sb-track img {
  display: block;
  height: auto;
  flex-shrink: 0;
}

@keyframes sbScrollRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.hero-copy h1 {
  margin: 0 0 20px;
  font-size: 3.4667rem;
  line-height: 6.266rem;
  letter-spacing: 0.7627rem;
  color: #086e94;
  font-weight: 700;
}

.hero-copy h1 .line {
  display: inline-block;
  background: #ffffff;
  padding: 0 0.4rem;
  clip-path: inset(0 100% 0 0);
  animation: heroLineReveal 480ms linear forwards;
}

.hero-copy h1 .line.line-2 {
  animation: heroLineReveal 780ms linear 480ms forwards;
}

.hero-copy h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: heroCharIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 60ms);
}

/* モバイル専用改行：PC幅では無効化 */
.hero-sp-br {
  display: none;
}

/* PC/SPで改行位置を出し分ける汎用クラス（基本＝PC幅） */
.pc-br {
  display: inline;
}

.sp-br {
  display: none;
}

@keyframes heroLineReveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes heroCharIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.eyebrow {
  display: inline-block;
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.7333rem;
  letter-spacing: 0.032rem;
  color: #086e94;
}

.section-label {
  display: inline-block;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.6667rem;
  line-height: 1.3333rem;
  letter-spacing: 0.0667rem;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: #086e94;
}

.about-section,
.business-section,
.achievements-section,
.people-section,
.news-section,
.cta-section,
.site-footer {
  width: min(1200px, 100%);
  margin: 0 auto;
}

.about-section,
.people-section,
.news-section,
.cta-section {
  padding: 2rem 32px 120px;
}

.about-section {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 7fr 1fr 12fr;
  gap: 0;
  align-items: end;
  padding-left: 80px;
  padding-bottom: 12.5rem;
}

.about-copy {
  grid-column: 1;
  min-width: 0;
  align-self: start;
}

.about-copy h2,
.about-copy p,
.about-copy a {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-copy h2.is-visible,
.about-copy p.is-visible,
.about-copy a.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.about-visual {
  grid-column: 3;
  min-width: 0;
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(8.5rem);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-visual.is-visible {
  opacity: 1;
  transform: translateY(6rem);
}

.about-label {
  position: absolute;
  left: 24px;
  top: 2rem;
  margin-bottom: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.3em;
}

.about-copy h2,
.section-header h2,
.achievements-header h2,
.people-copy h2 {
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: #086e94;
}

.about-copy h2 {
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.1333rem;
  line-height: 3.7333rem;
  letter-spacing: 0.4rem;
}

.about-copy p {
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 2.1333rem;
  letter-spacing: 0.1333rem;
}

.about-copy p,
.business-card p,
.news-item p,
.people-copy p {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 32px;
  letter-spacing: 0.08em;
  color: #086e94;
}

.ghost-button,
.outline-button,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 56px;
  padding: 14px 32px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #086e94;
  color: #086e94;
  background: transparent;
}

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

.ghost-button {
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.9333rem;
  line-height: 2.3333rem;
  letter-spacing: 0.2rem;
  text-align: center;
  text-transform: none;
  padding: 9px 41px;
  min-width: 16rem;
  position: relative;
  border: 0;
  box-shadow: inset 0 0 0 1px #086e94;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.ghost-button .btn-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
}

.ghost-button:hover {
  background: linear-gradient(90deg, #0df, #3bb3db);
  color: #ffffff;
  box-shadow: none;
}

.ghost-button:hover .btn-dot {
  width: 14px;
  height: 14px;
  background: #ffffff;
}

.business-section {
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  color: #ffffff;
  padding: 0 0 8rem;
  position: relative;
  clip-path: inset(-100rem 0 0 0);
}

.business-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -180px;
  transform: translateX(-50%) scale(0);
  width: 300vw;
  height: 300vw;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, #1EAEDE 0%, #6EDFF6 50%);
  background-size: 200px 200px, cover;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.business-section.is-visible::before {
  transform: translateX(-50%) scale(1);
}

.business-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 32px;
}

.business-section .section-header {
  max-width: 860px;
  margin: 0 auto 3rem;
  text-align: center;
}

.business-section .section-header h2 {
  color: #ffffff;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.3333rem;
  line-height: 2.3333rem;
  letter-spacing: 0.1333rem;
  text-align: center;
}

.business-section .section-label {
  color: rgba(255, 255, 255, 0.9);
}

.section-header {
  max-width: 820px;
  margin-bottom: 64px;
}

.business-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
}

.business-card + .business-card {
  margin-top: -10%;
}

.business-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
  padding: 0 8% 0 10%;
  background: linear-gradient(180deg, #ffffff 0%, #d6ecf5 100%);
  border-radius: 50%;
  color: #086e94;
  opacity: 0.1;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 1440px) {
  .business-card {
    grid-template-columns: 2fr 3fr;
    gap: 1rem;
    padding:0% 4% 0 5%;
  }
}
.business-card.is-visible {
  opacity: 1;
  z-index: 10;
}

.business-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.business-card-visual img {
  width: 70%;
  max-width: 28rem;
  height: auto;
  display: block;
}

.business-card-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 28rem;
}
@media (max-width: 1440px) {
  .business-card-text {
    gap: .75rem;
  }
}

.business-tag {
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.8667rem;
  line-height: 2.6rem;
  letter-spacing: 0;
  color: #086e94;
  margin-bottom: 1rem;
}

.business-card h3 {
  margin: 0;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.3333rem;
  line-height: 2.3333rem;
  letter-spacing: 0.1333rem;
  color: #086e94;
}
@media (max-width: 1280px) {
  .business-card h3 {
    line-height: 2rem;
  }
}
.business-card p {
  margin: 0;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 2.1333rem;
  letter-spacing: 0.1333rem;
  color: #086e94;
}
@media (max-width: 1280px) {
  .business-card p {
    line-height: 1.7rem;
  }
}

.business-card .ghost-button {
  align-self: flex-start;
  margin-top: 1rem;
}

.achievements-section {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 8rem;
  overflow: hidden;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
}

.achievements-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8rem;
  overflow: hidden;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.achievements-bg-track {
  display: flex;
  gap: 4rem;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: achievementsBgScroll 80s linear infinite;
  will-change: transform;
}

.achievements-bg-track img {
  height: 8rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@keyframes achievementsBgScroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.achievements-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto 4rem;
}

.achievements-header h2 {
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.1333rem;
  line-height: 3.7333rem;
  letter-spacing: 0.4rem;
  text-align: center;
}

.achievement-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 6rem;
  padding: 0 32px;
}

.achievement-card {
  padding-bottom: 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(8, 110, 148, 0.3);
}

.achievement-card span {
  display: block;
  margin-bottom: 0.6rem;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.0667rem;
  line-height: 2.2rem;
  letter-spacing: 0.1333rem;
  text-align: center;
  vertical-align: middle;
  color: #086e94;
}

.achievement-card strong {
  display: inline-flex;
  align-items: flex-end;
  color: #086e94;
  margin: 1rem 0 0.75rem;
}

.achievement-card .count {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 6.006rem;
  line-height: 4.9533rem;
  letter-spacing: 0;
  margin-bottom: -0.8rem;
}

.achievement-card em {
  font-family: 'Zen Kaku Gothic New', 'Noto Sans', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.8667rem; /* 28px（重複ブロックで上書きされていた値を統合） */
  line-height: 2.2667rem;
  letter-spacing: 0;
  margin-left: 0.5333rem; /* 8px */
}

.partner-logos {
  position: relative;
  width: 100vw;
  margin: 0 0 5rem calc(50% - 50vw);
  overflow: hidden;
}

.partner-track {
  display: flex;
  width: max-content;
  gap: 6rem;
  align-items: center;
  padding: 0 3rem;
  animation: partnerScroll 28s linear infinite;
  will-change: transform;
}

.partner-track img {
  height: 3.5rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@keyframes partnerScroll {
  to { transform: translateX(-50%); }
}

.partner-button {
  position: relative;
  display: inline-flex;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

.people-section {
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  min-height: calc(4rem + min(50vw, 900px));
}

.people-block {
  position: relative;
  background: linear-gradient(135deg, #4ec3ff 0%, #4ce2c1 100%);
  padding: 4rem 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.people-section.is-visible .people-block {
  clip-path: inset(0 0 0 0);
}

.people-copy {
  position: relative;
  z-index: 1;
  width: 20rem;
  margin-left: calc(35vw - 20rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
  color: #086e94;
}

.people-copy .section-label {
  color: #ffffff;
  margin-bottom: 0;
}

.people-copy p {
  margin: 0;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.0667rem;
  line-height: 2.2rem;
  letter-spacing: 0.1333rem;
  color: #ffffff;
}

.people-copy .ghost-button {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: #ffffff;
}

.people-copy .ghost-button:hover {
  background: linear-gradient(90deg, #0df, #3bb3db);
  color: #ffffff;
  box-shadow: none;
}

.people-visual {
  position: absolute;
  top: 4rem;
  left: 40vw;
  width: 60%;
  max-width: 1000px;
  z-index: 1;
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

.people-visual img {
  width: 100%;
  /* セクションが確保する画像エリア高さに合わせて埋める（隙間防止・object-fitでクロップ） */
  height: min(40vw, 800px);
  object-fit: cover;
  display: block;
}

.people-section.is-visible .people-visual {
  opacity: 1;
  transform: translateY(0);
}

.news-section {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar list"
    "button list";
  gap: 2rem;
  /* People & Culture の写真とNews一覧が詰まらないよう上部に余白を確保 */
  padding: 6rem 2rem 2rem;
}

.news-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.news-list {
  grid-area: list;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(8, 110, 148, 0.18);
}

.news-button {
  grid-area: button;
  align-self: end;
  justify-self: start;
  min-width: 12rem;
  padding: 9px 28px;
}

.news-title {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 3.7333rem;
  line-height: 1.3333rem;
  letter-spacing: 0;
  text-align: left;
  vertical-align: middle;
  margin: 0;
  color: #086e94;
}

.news-sub {
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.0667rem;
  line-height: 2.2rem;
  letter-spacing: 0.1333rem;
  color: #086e94;
  margin-top: 0.5rem;
}

.news-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.5rem 1.5rem;
  text-decoration: none;
  color: #086e94;
  border-bottom: 1px solid rgba(8, 110, 148, 0.18);
  transition: background 0.2s ease;
}

.news-item:hover {
  background: rgba(8, 110, 148, 0.05);
}

.news-date {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8667rem;
  line-height: 1.3333rem;
  letter-spacing: 0.2rem;
  vertical-align: middle;
  color: #086e94;
}

.news-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
  padding: 0.3rem 1rem;
  background: rgba(8, 110, 148, 0.05);
  border-radius: 4px;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.0667rem;
  letter-spacing: 0.1em;
  vertical-align: middle;
  color: #086e94;
}

.news-text {
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 2.1333rem;
  letter-spacing: 0.1333rem;
  vertical-align: middle;
  color: #086e94;
  transition: padding-left 0.2s ease;
}

.news-item:hover .news-text {
  padding-left: 1em;
}

.news-arrow {
  display: block;
  width: 3rem;
  height: 0.5rem;
  background: url('imgs/arrow1.png') right center / auto 100% no-repeat;
  transition: background-image 0.2s ease;
}

.news-item:hover .news-arrow {
  background-image: url('imgs/arrow2.png');
}

.cta-section {
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 5rem 5% 5rem;
  background: linear-gradient(to bottom, #ffffff 0, #ffffff 50%, #00ddff 50%);
  z-index: 1;
}

.cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1280px;
  margin: 0 auto;
}

.cta-section::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%; /* シアン部分(下50%)だけにノイズを乗せてフッターと質感を揃える（白部分には被らない） */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  pointer-events: none;
}

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(270deg, #FFFFFF 0%, #E8F4F8 100%);
  color: #086e94;
  border-radius: 0;
  transition: border-radius 0.4s ease;
}

.cta-card:hover {
  border-radius: 50%;
}

.cta-card h3 {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: 3rem;
  letter-spacing: 0.1em;
  color: #086e94;
}

.cta-card p {
  margin: 0;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 2.1333rem;
  letter-spacing: 0.1333rem;
  min-height: 4.2667rem;
  display: flex;
  align-items: center;
}

.cta-card .ghost-button,
.cta-card .primary-button {
  margin-top: 0.5rem;
}

.primary-button {
  position: relative;
  padding: 9px 41px;
  min-width: 16rem;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 500;
  font-size: 0.9333rem;
  line-height: 2.3333rem;
  letter-spacing: 0.2rem;
  text-transform: none;
  border: 0;
  background: linear-gradient(90deg, #0df, #3bb3db);
  color: #ffffff;
  transition: filter 0.2s ease;
}

.primary-button .btn-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.primary-button:hover {
  filter: brightness(1.05);
}

.site-footer {
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 4rem 5% 1.5rem;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg, #00DDFF 0%, #3BB3DB 100%);
  background-size: 200px 200px, auto;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10%;
  align-items: start;
}

.footer-logo-wrap {
  display: flex;
  align-items: flex-start;
}

.footer-logo-img {
  height: 2.5rem;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  justify-content: end;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-col a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9333rem;
  letter-spacing: 0.05em;
}

.footer-col a:hover {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

.footer-heading {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.footer-copy {
  margin: 0;
  color: #ffffff;
}

.footer-privacy {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
@media (max-width: 880px) {
  :where(#about, #business, #news, #recruit, #contact) {
    scroll-margin-top: 64px;
  }

  /* Header */
  .header-inner {
    padding: 16px 20px;
    gap: 12px;
  }

  .site-logo img {
    height: 20px;
  }

  .site-nav,
  .lang-switch {
    display: none;
  }

  .header-right {
    gap: 12px;
  }

  .hamburger {
    display: inline-flex;
  }

  /* Hero */
  .hero-section {
    margin-top: -64px;
    min-height: 480px;
    padding: 0 20px 32px;
  }

  /* スマホは背景MVを広げて密度UP（PCは200%） */
  .mv-layer {
    width: 360%;
  }

  .hero-copy h1 {
    font-size: 2.4rem;
    line-height: 4.5rem;
    letter-spacing: 0.2rem;
  }

  /* モバイルのみ「人と社会の」/「可能性を広げる。」で改行（モック準拠） */
  .hero-sp-br {
    display: inline;
  }

  .hero-copy h1 .line {
    padding: 0 0.3rem;
  }

  .eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.15rem;
  }

  /* Scroll banner */
  .sb-track img {
    height: 60px;
  }

  /* About */
  .about-section {
    display: block;
    padding: 2.5rem 20px 4rem;
    /* eyebrow・ビジュアル・ボタンを中央寄せ（モック準拠） */
    text-align: center;
  }

  /* eyebrowを縦書き→横書き・中央・上部に */
  .about-label {
    position: static;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: block;
    text-align: center;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
  }

  /* 見出し・本文は左揃えのまま */
  .about-copy h2,
  .about-copy p {
    text-align: left;
  }

  /* PC/SP改行の出し分け */
  .pc-br {
    display: none;
  }

  .sp-br {
    display: inline;
  }

  .about-copy h2 {
    font-size: 2rem;
    line-height: 2.6rem;
    letter-spacing: 0.2rem;
  }

  .about-copy p {
    font-size: 0.9rem;
    line-height: 1.8rem;
    letter-spacing: 0.08rem;
  }

  .about-visual {
    margin-top: 2.5rem;
    transform: translateY(2rem);
  }

  .about-visual.is-visible {
    transform: translateY(0);
  }

  .ghost-button {
    min-width: 14rem;
    padding: 8px 28px;
    font-size: 0.85rem;
    line-height: 2.1rem;
    letter-spacing: 0.15rem;
  }

  .ghost-button .btn-dot {
    right: 18px;
  }

  /* Business */
  .business-section {
    padding-bottom: 4rem;
  }

  .business-inner {
    padding: 0 20px;
  }

  .business-section .section-header {
    margin: 0 auto 2rem;
  }

  .business-section .section-header h2 {
    font-size: 1.5rem;
    line-height: 1.8;
    letter-spacing: 0.1rem;
  }

  .business-card {
    /* 横長楕円。左右は画面外にはみ出してOK。高さは内容＋パディング依存 */
    width: 200vw;
    aspect-ratio: unset;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 0 4rem;
    /* ロゴ（ビジュアル）と事業名の間にスペース */
    gap: 1.5rem;
    /* 幅が画面より広いので transform で中央化 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* モック準拠：上＝淡い青、下＝白（PCの白→青を反転） */
    background: linear-gradient(180deg, #eff7fa 0%, #ffffff 100%);
  }

  .business-card + .business-card {
    margin-top: -1.5rem;
  }

  .business-card-visual img {
    width: 70%;
    max-width: 16rem;
    margin: 0 auto;
  }

  /* 楕円は横長でもコンテンツは画面幅内に収める */
  .business-card-visual,
  .business-card-text {
    width: 86vw;
    max-width: 86vw;
  }

  .business-card-text {
    align-items: center;
    text-align: center;
  }

  /* PCの左寄せ(align-self:flex-start)を打ち消して中央に */
  .business-card .ghost-button {
    align-self: center;
  }

  .business-tag {
    font-size: 1.8rem;
    line-height: 1.8rem;
    letter-spacing: 0;
    margin-bottom: 0.5rem;
  }

  .business-card h3 {
    font-size: 1rem;
    line-height: 1.7rem;
    letter-spacing: 0.08rem;
  }

  .business-card p {
    font-size: 0.9rem;
    line-height: 1.7rem;
    letter-spacing: 0.08rem;
  }

  .business-section::before {
    top: -80px;
    width: 600vw;
    height: 900vw;
  }

  /* Achievements */
  .achievements-section {
    padding: 4rem 20px;
  }

  .achievements-header h2 {
    font-size: 1.5rem;
    line-height: 2.4rem;
    letter-spacing: 0.2rem;
  }

  .achievements-bg {
    height: 8rem;
  }

  .achievements-bg-track img {
    height: 8rem;
  }

  .achievement-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0;
    margin-bottom: 3rem;
  }

  .achievement-card {
    padding-bottom: 1.25rem;
  }

  .achievement-card .count {
    font-size: 4.5rem;
    line-height: 4rem;
  }

  .achievement-card em {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }

  .achievement-card span {
    font-size: 0.9rem;
    line-height: 1.5rem;
    margin-bottom: 0.3rem;
  }

  .achievement-card strong {
    margin: 0.5rem 0 0;
  }

  .partner-track {
    gap: 2.5rem;
    padding: 0 1rem;
  }

  .partner-track img {
    height: 2rem;
  }

  /* People & Culture */
  .people-section {
    min-height: auto;
    padding: 0;
    overflow: hidden;
    display: flex;
    /* モックに合わせてテキストブロックを上、写真を下に */
    flex-direction: column;
  }

  .people-block {
    padding: 4.5rem 1.5rem 4rem;
  }

  .people-copy {
    width: auto;
    margin-left: 0;
    max-width: 100%;
  }

  /* ラベルとボタンを中央寄せ（本文pは左のまま） */
  .people-copy .section-label,
  .people-copy .ghost-button {
    align-self: center;
  }

  .people-copy p {
    font-size: 0.95rem;
    line-height: 1.9rem;
    letter-spacing: 0.1rem;
  }

  .people-copy p br {
    display: none;
  }

  .people-visual {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: translateY(0);
  }

  .people-section.is-visible .people-visual {
    transform: translateY(0);
  }

  .people-visual img {
    width: 100%;
    height: auto;
  }

  /* News */
  .news-section {
    display: flex;
    flex-direction: column;
    padding: 5rem 20px 3rem;
  }

  .news-sidebar {
    order: 0;
    margin-bottom: 1.5rem;
    align-items: center;
    text-align: center;
  }

  .news-list {
    order: 1;
  }

  .news-button {
    order: 2;
    align-self: center;
    margin-top: 1.5rem;
    justify-self: center;
  }

  .news-title {
    font-size: 2.5rem;
  }

  .news-item {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.5rem;
    padding: 1rem 0.5rem;
  }

  .news-date {
    grid-row: 1;
    grid-column: 1;
  }

  .news-category {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    min-width: 6rem;
  }

  .news-text {
    grid-row: 2;
    grid-column: 1 / 3;
    font-size: 0.9rem;
    line-height: 1.7rem;
  }

  /* スマホでも右端にarrowを表示（上下中央・全行にまたがる） */
  .news-arrow {
    display: block;
    grid-row: 1 / 3;
    grid-column: 3;
    align-self: center;
    width: 1.5rem;
  }

  .news-item:hover .news-text {
    padding-left: 0;
  }

  /* CTA */
  .cta-section {
    padding: 2rem 5% 3rem;
    /* RECRUITカードの中央(≈153px)から下をシアンに（カード下半分に重なる） */
    background: linear-gradient(to bottom, #ffffff 153px, #00ddff 153px);
  }

  .cta-section::before {
    top: 153px;
    height: auto;
  }

  .cta-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cta-card {
    aspect-ratio: auto;
    padding: 2.5rem 1.5rem;
    gap: 1rem;
  }

  .cta-card h3 {
    font-size: 2.4rem;
  }

  .cta-card p {
    font-size: 0.95rem;
    line-height: 1.8rem;
    min-height: auto;
  }

  /* Footer */
  .site-footer {
    padding: 3rem 20px 1.5rem;
    gap: 3rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-logo-img {
    height: 1.8rem;
  }

  .footer-nav {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* =========================================================================
   ▼▼▼ デザインシステム（共通基盤） / Phase 1
   全ページ共通のトークンと共通部品。各ページCSSはこれを参照する形へ順次移行する。
   既存のページ別スコープCSSより詳細度が低いため、移行前の見た目は変えない（追記のみ）。
   ブレークポイント方針: 1440(大画面) / 1280(中) / 880(SP) ※@media内は直接px指定
   ========================================================================= */

:root {
  /* ---- 配色 ---- */
  --cp-primary: #1EAEDE;
  --cp-primary-dark: #1899c4;   /* ボタンhover等 */
  --cp-light: #6EDFF6;
  --cp-teal: #27c2ad;           /* 採用ページのアクセント */
  --cp-ink: #173a4a;            /* 見出し・濃いテキスト */
  --cp-ink-soft: #3a5563;       /* 本文テキスト */
  --cp-muted: #5b7384;          /* 補助テキスト */
  --cp-muted-2: #8aa0b3;        /* 日付・パンくず等 */
  --cp-border: #e3eaf0;
  --cp-border-2: #d7e6ef;
  --cp-bg-soft: #f3fafd;        /* 淡い背景 */
  --cp-bg-pale: #eef9fd;        /* もっと淡い背景（ヒーロー等） */
  --cp-danger: #e0506b;         /* 必須バッジ */

  /* ---- グラデーション ---- */
  --cp-grad-hero: linear-gradient(160deg, #1EAEDE 0%, #6EDFF6 100%);
  --cp-grad-primary: linear-gradient(135deg, #1EAEDE 0%, #6EDFF6 100%);
  --cp-grad-teal: linear-gradient(135deg, #27c2ad 0%, #1EAEDE 100%);

  /* ---- フォント ---- */
  --cp-font: 'Noto Sans', 'Zen Kaku Gothic New', sans-serif;
  --cp-font-en: 'Josefin Sans', sans-serif;

  /* ---- レイアウト幅 ---- */
  --cp-container: 1100px;        /* 標準コンテンツ幅 */
  --cp-container-wide: 1200px;
  --cp-container-narrow: 820px;  /* 記事・テーブル系 */
  --cp-gutter: 1.5rem;           /* 左右の最小余白 */

  /* ---- 角丸 / 余白 ---- */
  --cp-radius: 12px;
  --cp-radius-sm: 8px;
  --cp-section-y: 5.5rem;        /* セクション縦余白（PC） */
}

/* ---- フルブリード：.page-wrapper(min(1440px,100%)) を突き破り背景を全幅に ---- */
.cp-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- 中央寄せコンテナ（フルブリード内のコンテンツ幅を制限） ---- */
.cp-container { width: min(var(--cp-container), 100%); margin-inline: auto; padding-inline: var(--cp-gutter); }
.cp-container--wide { width: min(var(--cp-container-wide), 100%); margin-inline: auto; padding-inline: var(--cp-gutter); }
.cp-container--narrow { width: min(var(--cp-container-narrow), 100%); margin-inline: auto; padding-inline: var(--cp-gutter); }

/* ---- セクション共通縦余白 ---- */
.cp-section { padding-block: var(--cp-section-y); }

/* ---- ページヒーロー（青帯＋下カーブ） / 共通版 ---- */
.cp-hero {
  position: relative;
  background: #fff;
  color: var(--cp-ink);
  text-align: center;
  padding: 6rem var(--cp-gutter) 6rem;
  overflow: hidden;
}
/* モック共通：ヒーロー上部の淡いシアンの大円（下端が下向きアーチ／上シアン・下白） */
.cp-hero::after {
  content: '';
  position: absolute;
  left: 50%; top: -1180px; bottom: auto;
  width: 2600px; height: 1500px; margin-left: -1300px;
  border-radius: 50%;
  background: linear-gradient(123.67deg, #FFFFFF 21.39%, #E8F4F8 99.88%);
  pointer-events: none; z-index: 0;
}
.cp-hero > * { position: relative; z-index: 1; }
.cp-hero--light { background: #fff; color: var(--cp-ink); }
.cp-hero__en { display: block; font-family: var(--cp-font-en); font-weight: 500; letter-spacing: .25em; font-size: .9rem; color: var(--cp-primary); margin-bottom: .9rem; }
.cp-hero h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; color: #086e94; }
.cp-hero__lead { position: relative; z-index: 1; margin-top: 1.4rem; font-size: .95rem; line-height: 2; letter-spacing: .06em; color: #086e94; }
.cp-hero--light .cp-hero__lead { color: var(--cp-muted); }

/* ---- 見出し / ラベル ---- */
.cp-label { display: inline-block; font-family: var(--cp-font-en); letter-spacing: .2em; font-size: .82rem; font-weight: 600; color: var(--cp-primary); }
.cp-section-title { text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; }
.cp-section-title--light { color: #fff; }

/* ---- カード / テーブル / バッジ / タグ ---- */
.cp-card { background: #fff; border-radius: var(--cp-radius); }
.cp-table { width: 100%; border-collapse: collapse; }
.cp-table th, .cp-table td { text-align: left; padding: 1rem .8rem; border-bottom: 1px solid var(--cp-border); font-size: .9rem; vertical-align: top; }
.cp-table th { width: 11rem; color: var(--cp-muted); font-weight: 600; white-space: nowrap; }
.cp-badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: .22rem .8rem; border-radius: 4px; color: #fff; background: var(--cp-primary); }
.cp-tag { display: inline-block; font-size: .72rem; color: var(--cp-primary); border: 1px solid var(--cp-primary); border-radius: 999px; padding: .22rem .9rem; }

/* ---- アニメーション：スクロール出現（移行時に各セクションへ付与していく） ---- */
.cp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.cp-reveal.is-visible { opacity: 1; transform: none; }

/* ---- スクロール出現：下層ページ共通（footer.phpのJSが付与） ---- */
.cp-anim { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; }
.cp-anim.is-inview { opacity: 1; transform: none; }

/* ---- ホバー演出（カード/行/ボタン） ---- */
/* CTAカード: 出現アニメ(.cp-anim)が付与されると transition が opacity/transform だけに
   上書きされ、hover の四角→丸(border-radius)が瞬時化してしまう。詳細度を上げて
   出現用(opacity/transform)と hover 用(border-radius)の両方を効かせる。 */
.cta-section .cta-card {
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1),
              transform .75s cubic-bezier(.22, 1, .36, 1),
              border-radius 0.4s ease;
}
.cp-card { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.cp-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(23, 58, 74, .12); }
.ghost-button, .more-button, .cta-card .ghost-button { transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease; }
.ghost-button:hover { transform: translateY(-2px); }
/* .partner-button は translateX(-50%) で中央寄せしているため、hover の translateY のみだと
   中央寄せ transform が外れて横ずれする。両 transform を合成して中央を維持する。 */
.partner-button:hover { transform: translateX(-50%) translateY(-2px); }
.news-row { transition: background-color .3s ease, transform .3s ease; }
.news-row:hover { background: var(--cp-bg-soft); transform: translateX(4px); }
.news-row:hover .news-row-arrow { transform: translateX(4px); }
.news-row-arrow { transition: transform .3s ease; }
.job-card { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .3s ease; }
.job-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(23, 58, 74, .12); }

/* ---- レスポンシブ：SP ---- */
@media (max-width: 880px) {
  :root { --cp-section-y: 3.5rem; }
  .cp-hero { padding: 5rem var(--cp-gutter) 6rem; }
  .cp-hero::after { width: 230vw; height: 220vw; margin-left: -115vw; top: -150vw; bottom: auto; }
  .cp-hero h1 { font-size: 1.8rem; }
  .cp-section-title { font-size: 1.35rem; }
  .cp-table th { width: auto; display: block; border-bottom: none; padding-bottom: .2rem; }
  .cp-table td { display: block; padding-top: .3rem; }
}


/* =========================================================================
   ページ別スタイル：about（私たちについて）  ※旧 about.css を統合
   セクションは .cp-bleed で全幅、内側は .cp-container。色はトークン参照。
   ========================================================================= */
.about-page { color: var(--cp-ink); font-family: var(--cp-font); }

/* about専用ヒーロー：シアン地に大きな白い円を乗せ、下はシアンのままステートメントへ連結（モック02） */
.about-page .cp-hero {
  background: linear-gradient(180deg, #54ccef 0%, var(--cp-primary) 100%);
  color: var(--cp-ink);
  padding: 6rem var(--cp-gutter) 4rem;
}
.about-page .cp-hero::after {
  content: '';
  position: absolute;
  left: 50%; top: -1180px; bottom: auto;
  width: 2600px; height: 1500px; margin-left: -1300px;
  border-radius: 50%;
  z-index: 0;
}
.about-page .cp-hero__en { color: var(--cp-primary); }
.about-page .cp-hero h1 { color: #086e94; }
.about-page .cp-hero__lead { color: #086e94; }

/* ステートメント（ヒーローのシアンから続けて少しずつ濃く） */
.about-statement { background: linear-gradient(180deg, var(--cp-primary) 0%, #1c9fce 100%); color: #fff; text-align: center; padding-block: var(--cp-section-y); }
.about-statement__block + .about-statement__block { margin-top: 4rem; }
.about-statement__en { font-family: var(--cp-font-en); font-size: 2.2rem; font-weight: 600; letter-spacing: .04em; }
.about-statement__ja { margin-top: 1rem; font-size: 1.05rem; letter-spacing: .08em; opacity: .95; }
.about-statement__label, .about-principles__label { font-family: var(--cp-font-en); font-size: .82rem; font-weight: 600; letter-spacing: .22em; opacity: .72; margin-bottom: .7rem; text-align: center; }

/* Let it Begin.（理念） */
.about-principles { background: #1c9fce; color: #fff; padding: 2rem 0 var(--cp-section-y); }
.about-principles__title { font-family: var(--cp-font-en); font-size: 1.8rem; font-weight: 600; text-align: center; margin-bottom: 3rem; }
.about-principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5rem 2rem; }
.about-principle h4 { font-family: var(--cp-font-en); font-size: 1.05rem; font-weight: 600; letter-spacing: .05em; padding-left: .7rem; margin-bottom: 1rem; border-left: 2px solid rgba(255,255,255,.6); }
.about-principle p { font-size: 1rem; line-height: 1.9; opacity: .95; }
p.about-principle__lead { font-size: 1.15rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 .7rem; }

/* 私たち、情報のチカラを信じています。 */
.about-belief { background: linear-gradient(180deg, #1c9fce 0%, #1c9fce 55%, #fff 55%, #fff 100%); padding: 0 0 var(--cp-section-y); }
.about-belief__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: #fff; }
.about-belief__copy { padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; }
.about-belief__copy .about-belief__label { font-family: var(--cp-font-en); font-size: .75rem; letter-spacing: .22em; margin-bottom: 0; }
.about-belief__copy .ghost-button { align-self: flex-end; }
.about-belief__visual { height: 100%; }
.about-belief__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-belief__copy h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.6; margin-bottom: 1.2rem; color: #086e94; }
.about-belief__copy p { font-size: 1rem; line-height: 2; margin-bottom: 3rem; color: #2f87ab; }

/* 会社概要 */
.about-profile { background: #fff; padding-block: var(--cp-section-y); }
.about-profile__inner { display: grid; grid-template-columns: 20rem 1fr; gap: 2rem 3rem; align-items: start; }
.about-profile__label { display: block; font-family: var(--cp-font-en); font-size: .8rem; letter-spacing: .16em; color: var(--cp-muted-2); margin-bottom: 1.4rem; }
.about-profile__title { font-size: 2.5rem; font-weight: 700; letter-spacing: .28em; color: #086e94; line-height: 1.2; }
.about-profile__table { width: 100%; border-collapse: collapse; }
.about-profile__table th, .about-profile__table td { text-align: left; vertical-align: top; padding: 3rem .2rem 1rem; border-bottom: 1px solid var(--cp-border); font-size: 1rem; color: #086e94; }
.about-profile__table th { width: 14rem; font-weight: 500; white-space: nowrap; }
.about-profile__table td { line-height: 1.9; }

/* パートナー企業一覧 */
.about-partners { background: var(--cp-primary); color: #fff; padding-block: var(--cp-section-y); }
.about-partners__head { text-align: center; margin-bottom: 3.5rem; }
.about-partners__label { display: block; font-family: var(--cp-font-en); font-size: .8rem; letter-spacing: .16em; color: rgba(255,255,255,.7); margin-bottom: 1.4rem; }
.about-partners__title { font-size: 2.5rem; font-weight: 700; letter-spacing: .28em; line-height: 1.2; margin-bottom: 1.2rem; }
.about-partners__note { font-size: .9rem; color: rgba(255,255,255,.9); }
.about-partners__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.about-partners__cell { background: #fff; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.about-partners__cell img { max-width: 78%; max-height: 60%; object-fit: contain; }

/* 沿革 */
.about-history { background: #fff; padding-block: var(--cp-section-y); }
.about-history__inner { position: relative; }
.about-history__head { position: absolute; left: 0; top: 0; }
.about-history__label { display: block; font-family: var(--cp-font-en); font-size: .8rem; letter-spacing: .16em; color: #6bb4d6; margin-bottom: 1.2rem; }
.about-history__title { font-size: 2.5rem; font-weight: 700; letter-spacing: .18em; color: #086e94; line-height: 1.2; }
.about-history__timeline { position: relative; width: 100%; margin-inline: auto; }
.about-history__timeline::before { content: ''; position: absolute; left: 50%; top: .5rem; bottom: -2rem; transform: translateX(-50%); width: 1px; background: #086e94; }
.about-history__item { display: grid; grid-template-columns: 1fr 8rem 1fr; column-gap: 1.5rem; align-items: center; padding-block: 1.6rem; }
.about-history__item > * { grid-row: 1; }
.about-history__year { grid-column: 2; text-align: center; font-family: var(--cp-font-en); font-size: 2.2rem; font-weight: 300; letter-spacing: .1em; color: #086e94; background: #fff; padding-block: .4rem; position: relative; z-index: 1; }
.about-history__text { font-size: 1.3rem; font-weight: 500; line-height: 1.7; color: #086e94; }
.about-history__item:nth-child(odd) .about-history__text { grid-column: 1; text-align: right; }
.about-history__item:nth-child(even) .about-history__text { grid-column: 3; text-align: left; }

@media (max-width: 880px) {
  .about-statement__en { font-size: 1.6rem; }
  .about-principles__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .about-belief__inner { grid-template-columns: 1fr; padding: 0; }
  .about-belief__copy { padding: 1rem; }
  .about-belief__copy .about-belief__label { text-align: center; }
  .about-belief__copy .ghost-button { align-self: center; }
  .about-belief__copy h2 br { display: none; }
  .about-page .cp-hero::after { width: 230vw; height: 220vw; margin-left: -115vw; top: -150vw; bottom: auto; }
  .about-profile__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .about-profile__head { text-align: center; }
  .about-profile__title { font-size: 2rem; }
  .about-profile__table th, .about-profile__table td { padding: 1.1rem .2rem .8rem; font-size: .95rem; }
  .about-profile__table th { width: 8rem; }
  .about-partners__grid { grid-template-columns: 1fr 1fr; }
  .about-history__head { position: static; margin-bottom: 2.5rem; }
  .about-history__title { font-size: 2rem; }
  .about-history__timeline::before { left: 3.5rem; }
  .about-history__item { grid-template-columns: 7rem 1fr; column-gap: 1.2rem; }
  .about-history__year { grid-column: 1; font-size: 1.6rem; }
  .about-history__item:nth-child(odd) .about-history__text,
  .about-history__item:nth-child(even) .about-history__text { grid-column: 2; text-align: left; }
}

/* =========================================================================
   ページ別スタイル：ceo（CEOメッセージ）  ※旧 ceo.css を統合
   ========================================================================= */
.ceo-page { color: var(--cp-ink); font-family: var(--cp-font); }

/* プロフィール */
.ceo-profile { background: transparent; padding-block: var(--cp-section-y); position: relative; z-index: 1; }
.ceo-profile__inner { max-width: 1080px; margin-inline: auto; padding-inline: var(--cp-gutter); padding-left: 0; background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: stretch; }
.ceo-profile__photo img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; background: #eef5f9; display: block; }
.ceo-profile__text { display: flex; flex-direction: column; }
.ceo-profile__role { font-family: var(--cp-font-en); font-size: .85rem; letter-spacing: .14em; color: var(--cp-muted); margin-bottom: .6rem; }
.ceo-profile__name { font-size: 1.85rem; font-weight: 700; letter-spacing: .06em; color: #086e94; margin-bottom: .3rem; display: flex; flex-direction: column; gap: .4rem; }
.ceo-profile__name-en { font-family: var(--cp-font-en); font-size: .9rem; font-weight: 400; letter-spacing: .12em; color: var(--cp-muted); }
.ceo-profile__lead { margin-top: 1.6rem; font-size: .95rem; line-height: 2.05; color: #086e94; }

/* メッセージ本文（淡シアン背景がプロフィール下半分まで回り込む） */
.ceo-message { background: linear-gradient(180deg, #f3fbfe 0%, #e8f6fc 90%, #fff 100%); padding-block: var(--cp-section-y); position: relative; z-index: 0; margin-top: -260px; padding-top: calc(var(--cp-section-y) + 260px); }
.ceo-message__inner { max-width: 1140px; margin-inline: auto; background: #fff; padding-block: 4.5rem; }
.ceo-message__label, .ceo-block { max-width: 780px; margin-inline: auto; padding-inline: var(--cp-gutter); }
.ceo-message__label { font-family: var(--cp-font-en); font-size: .8rem; letter-spacing: .16em; color: var(--cp-muted-2); text-align: center; margin-bottom: 3rem; }
.ceo-block + .ceo-block { margin-top: 4rem; }
.ceo-block__title { text-align: center; font-size: 1.45rem; font-weight: 700; line-height: 1.7; letter-spacing: .04em; color: #086e94; margin-bottom: 2.2rem; }
.ceo-block p { font-size: 1rem; line-height: 2.15; color: #086e94; margin-bottom: 1.5rem; }
.ceo-block p:last-of-type { margin-bottom: 0; }
.ceo-signature { margin-top: 2.8rem; text-align: right; }
.ceo-signature__role { font-size: .85rem; letter-spacing: .06em; color: var(--cp-muted); margin-bottom: .4rem; }
.ceo-signature__name { font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; color: var(--cp-ink); }
.ceo-actions { margin-top: 3rem; text-align: center; }

@media (max-width: 880px) {
  .ceo-profile__inner { grid-template-columns: 1fr; gap: 1.6rem; max-width: 480px; padding-left: var(--cp-gutter); }
  .ceo-profile__photo img { aspect-ratio: 4 / 5; }
  .ceo-profile__text { text-align: center; }
  .ceo-profile__lead { text-align: left; }
  .ceo-profile__name { font-size: 1.5rem; gap: .3rem; }
  .ceo-message { margin-top: 0; padding-top: var(--cp-section-y); }
  .ceo-message__inner { background: none; }
  .ceo-block + .ceo-block { margin-top: 3rem; }
  .ceo-block__title { font-size: 1.2rem; }
  .ceo-signature { text-align: left; }
}

/* =========================================================================
   ページ別スタイル：business（事業内容）  ※旧 business.css を統合
   ========================================================================= */
.business-page { color: var(--cp-ink); font-family: var(--cp-font); }
.biz-section { background: #fff; padding-block: var(--cp-section-y); }
.biz-inner { max-width: 1040px; margin-inline: auto; padding-inline: var(--cp-gutter); }
.biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.biz-card { display: flex; flex-direction: column; align-items: stretch; text-align: center; background: linear-gradient(123.67deg, #FFFFFF 21.39%, #E8F4F8 99.88%); border-radius: 16px; padding: 3rem 2.4rem 2.6rem; box-shadow: 0 10px 30px rgba(30, 174, 222, .06); transition: transform .3s ease, box-shadow .3s ease; }
.biz-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(30, 174, 222, .14); }
.biz-card-logo { height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.6rem; }
.biz-card-logo img { max-height: 48px; max-width: 220px; object-fit: contain; }
.biz-card-title { text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5; color: #086e94; margin-bottom: 1.6rem; }
.biz-card-lead { max-width: 20rem; margin: 0 auto 1rem; font-size: 1rem; font-weight: 700; line-height: 1.7; letter-spacing: .04em; color: #086e94; }
.biz-card-text { max-width: 20rem; margin: 0 auto 2rem; font-size: .9rem; line-height: 2; letter-spacing: .04em; color: #3f93bf; flex-grow: 1; }
.biz-card .ghost-button { margin-top: auto; align-self: center; }

@media (max-width: 880px) {
  .cp-hero__lead br { display: none; }   /* ヒーローのリード内改行はSPで無効化（全ページ共通） */
  .biz-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .biz-card { padding: 2.4rem 1.8rem 2.2rem; }
}

/* =========================================================================
   ページ別スタイル：サービス詳細（event / media / data / lending 共通）
   ※旧 event.css / media.css / data.css / lending.css を統合（同一構造のため一本化）
   ========================================================================= */
.event-page, .media-page, .data-page, .lending-page { color: var(--cp-ink); font-family: var(--cp-font); }

/* イントロ */
.intro-section { background: #fff; padding-block: var(--cp-section-y); }
.intro-inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--cp-gutter); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: center; }
.intro-copy h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.7; color: #086e94; margin-bottom: 1.4rem; }
.intro-copy p { font-size: .9rem; line-height: 2.1; margin-bottom: 1.8rem; color: var(--cp-ink-soft); }
.intro-copy .ghost-button { display: flex; width: fit-content; margin-left: auto; }
.intro-visual { border-radius: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #e8f4fa; }
.intro-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 提供できること */
.provide-section { background: linear-gradient(180deg, var(--cp-primary) 0%, #38c0e8 100%); color: #fff; padding-block: var(--cp-section-y); }
.provide-inner { max-width: 1000px; margin-inline: auto; padding-inline: var(--cp-gutter); }
.provide-label { display: block; text-align: center; font-family: var(--cp-font-en); font-size: .8rem; letter-spacing: .16em; color: rgba(255, 255, 255, .8); margin-bottom: 1rem; }
.provide-title { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; margin-bottom: 3rem; }
.provide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.provide-card { background: #fff; border-radius: 0; padding: 1.5rem 1.8rem; display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: center; }
.provide-card h3 { font-size: 1rem; font-weight: 700; color: #086e94; }
.provide-card p { font-size: 1rem; line-height: 1.7; color: #086e94; }

/* 強み */
.strength-section { background: #fff; padding-block: var(--cp-section-y); }
.strength-inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--cp-gutter); text-align: center; }
.strength-section .section-label { text-transform: none; }
.strength-title { font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; color: #086e94; margin: .6rem 0 3rem; }
.strength-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: left; }
.strength-card { background: #F5FBFD; color: #086e94; }
.strength-visual { border-radius: 0; overflow: hidden; aspect-ratio: 16 / 10; background: #e8f4fa; }
.strength-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strength-card h3 { text-align: center; font-size: 1.1rem; font-weight: 700; color: #086e94; margin: 1.2rem 2.5rem .8rem; }
.strength-card p { font-size: 1rem; line-height: 1.9; color: #086e94; margin-inline: 2.5rem; }

/* ピックアップ実績 */
.pickup-section { background: linear-gradient(180deg, #38c0e8 0%, var(--cp-primary) 100%); color: #fff; padding-block: var(--cp-section-y); overflow: hidden; }
.pickup-inner { max-width: 1000px; margin-inline: auto; padding-inline: var(--cp-gutter); text-align: center; }
.pickup-section .section-label { color: rgba(255, 255, 255, .85); text-transform: none; }
.pickup-title { font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; margin: .6rem 0 .8rem; }
.pickup-lead { font-size: .9rem; letter-spacing: .05em; opacity: .92; margin-bottom: 3rem; }
.pickup-stage { position: relative; width: 100%; max-width: 700px; margin-inline: auto; }
.pickup-viewport { overflow: visible; width: 100%; padding-block: 24px; }
.pickup-track { display: flex; transition: transform .45s ease; }
.pickup-card { flex: 0 0 calc(100% - 24px); margin-inline: 12px; box-sizing: border-box; background: #fff; color: var(--cp-ink); border-radius: 0; padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.pickup-visual { border-radius: 0; overflow: hidden; aspect-ratio: 16 / 10; background: #e8f4fa; }
.pickup-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pickup-body { text-align: left; }
.pickup-body h3 { font-family: var(--cp-font-en); font-size: 1.6rem; font-weight: 600; letter-spacing: .12em; color: #086e94; margin-bottom: 1rem; }
.pickup-body p { font-size: 1rem; line-height: 1.9; color: var(--cp-ink-soft); margin-bottom: 1.2rem; }
.pickup-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.pickup-tag { font-size: .72rem; letter-spacing: .04em; color: var(--cp-primary); border: 1px solid var(--cp-primary); border-radius: 0; padding: .3rem 1rem; }
.pickup-arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; border: none; border-radius: 50%; background: #fff; color: var(--cp-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(23, 58, 74, .2); transition: transform .2s ease; }
.pickup-prev { left: -22px; transform: translateY(-50%); }
.pickup-next { right: -22px; transform: translateY(-50%); }
.pickup-arrow:hover { transform: translateY(-50%) scale(1.08); }
.pickup-dots { display: flex; justify-content: center; gap: .6rem; margin-top: 2rem; }
.pickup-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .5); cursor: pointer; }
.pickup-dot.is-active { background: #fff; }

/* 活用シーン */
.usecase-section { background: #fff; padding-block: var(--cp-section-y); }
.usecase-inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--cp-gutter); }
.usecase-title { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: .1em; color: #086e94; margin-bottom: 3rem; }
.usecase-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.usecase-card { background: var(--cp-bg-soft); border-radius: 0; padding: 1.5rem 1.2rem 1rem; text-align: center; }
.usecase-icon { height: 84px; margin: 0 auto 1.4rem; display: flex; align-items: center; justify-content: center; }
.usecase-icon img { width: auto; height: 84px; opacity: 1; }
.usecase-card p { font-size: .95rem; line-height: 1.8; color: #086e94; }

@media (max-width: 880px) {
  .intro-inner { grid-template-columns: 1fr; gap: 2rem; }
  .intro-visual { order: -1; }                          /* SPは画像を上に */
  .intro-copy .ghost-button { margin: 0 auto; }         /* 実績を見るを中央寄せ */
  .provide-grid { grid-template-columns: 1fr; }
  .provide-card { grid-template-columns: 1fr; gap: .4rem; padding: 1rem 1.8rem; }
  .provide-card p { margin-top: 0; }
  .strength-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .pickup-card { grid-template-columns: 1fr; gap: 1.4rem; }
  .pickup-body .ghost-button { display: flex; width: fit-content; margin: 0 auto; }  /* 詳細を見るを中央寄せ */
  .pickup-arrow { width: 36px; height: 36px; }
  .pickup-prev { left: 4px; }
  .pickup-next { right: 4px; }
  .usecase-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   ページ別スタイル：recruit（採用情報トップ）  ※旧 recruit.css を統合
   ティール(--cp-teal)アクセント。各セクションは .cp-bleed で全幅。
   ========================================================================= */
.recruit-page { color: var(--cp-ink); font-family: var(--cp-font); }
.rc-label { display: inline-block; font-family: var(--cp-font-en); letter-spacing: .2em; font-size: .82rem; font-weight: 600; color: var(--cp-teal); margin-bottom: .8rem; }
.rc-label.light { color: rgba(255,255,255,.85); text-transform: none; }
.rc-section-title { text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; color: #086e94; margin-bottom: 3rem; }
.rc-section-title.light { color: #fff; }

/* ヒーロー（左ティール＋右写真＋下部ウェーブ） */
/*2026-09-17: ヒーローのカーブ・画像配置を新デザイン案に合わせて調整。
  変更点: (1) 背景グラデーションをrc-hero全体に敷き、画像の下にも同じ色が見えるようにする
  (2) 画像を下端に余白を持たせて独立したカード風に配置(角丸)
  (3) 下端の白いカーブをより深く・大きくする*/
/*2026-09-17: デザイン案に合わせ、ヒーローだけ上(水色)→下(緑)の縦グラデーションにする(他セクションの--cp-grad-tealは斜めのまま維持)*/
.rc-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 560px; overflow: hidden; background: linear-gradient(180deg, #1EAEDE 0%, #27c2ad 100%); padding-bottom: 12rem; }
.rc-hero-copy { background: transparent; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 4rem clamp(2rem, 6vw, 6rem) 6rem; position: relative; z-index: 1; }
.rc-breadcrumb { position: absolute; top: 1.8rem; left: clamp(2rem, 6vw, 6rem); font-size: .78rem; color: rgba(255,255,255,.8); }
.rc-breadcrumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.rc-breadcrumb a:hover { color: #fff; }
.rc-hero-copy h1 { font-size: 2.6rem; font-weight: 700; line-height: 1.45; letter-spacing: .08em; margin-bottom: 1.4rem; }
.rc-hero-copy p { font-size: .92rem; line-height: 2; opacity: .96; margin-bottom: 2.2rem; }
.rc-hero-btn { background: #fff; color: #086e94; box-shadow: none; align-self: flex-start; }
.rc-hero-photo { position: relative; z-index: 3; height: 560px; }
.rc-hero-photo img { position: absolute; top: 2rem; left: 0; width: 100%; height: calc(100% - 8rem); object-fit: cover; border-radius: 16px 0 0 16px; }

/* ステートメント（角丸パネル＋背景波線＋写真コラージュ） */
.rc-statement { position: relative; overflow: hidden; border-radius: 48px; background: #fff; padding-block: var(--cp-section-y); clip-path: ellipse(75% 50% at 50% 50%); padding: 12rem 0 24rem; margin-top: -20rem; margin-bottom: -18rem; z-index: 2; }
.rc-statement::before { content: ''; position: absolute; inset: 0; background: url('imgs/rc-back.png') no-repeat center/cover; opacity: .3; z-index: 0; }
/*2026-09-17: デザイン案ではコラージュがテキスト上端に揃い、下に大きく余白ができる配置のため center→start に変更*/
.rc-statement-inner { position: relative; z-index: 2; max-width: 1100px; margin-inline: auto; padding-inline: var(--cp-gutter); display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: start; }
.rc-statement-copy h2 { font-size: 1.8rem; font-weight: 700; line-height: 1.6; color: #086e94; margin-bottom: 1.6rem; }
.rc-statement-copy p { font-size: .9rem; line-height: 2.1; color: var(--cp-ink-soft); margin-bottom: 1.2rem; }
/*2026-09-17: デザイン案に合わせ、上下の写真を小さくしてメイン写真の「角」からはみ出す形で重ねるレイアウトに変更*/
.rc-statement-collage { position: relative; padding: 55px 55px 75px 65px; }
.rc-statement-collage img { object-fit: cover; border-radius: 16px; background: #e8f4fa; box-shadow: 0 10px 25px rgba(23,58,74,.15); }
.rc-statement-collage img:nth-child(1) { position: absolute; top: 0; left: 0; width: 32%; aspect-ratio: 1; z-index: 2; }
.rc-statement-collage img:nth-child(2) { position: relative; width: 100%; aspect-ratio: 4/3; z-index: 1; }
.rc-statement-collage img:nth-child(3) { position: absolute; bottom: 0; right: 0; width: 32%; aspect-ratio: 1; z-index: 2; }

/* 私たちが取り組んでいること（ブルー：CoinPostカード＋4事業） */
/*2026-09-17: 波線・カーブの表現は上のrc-statement側に一本化したため、ここは模様なしのシンプルな背景に戻す*/
.rc-fields { position: relative; background: linear-gradient(180deg, var(--cp-primary) 0%, #38c0e8 100%); color: #fff; padding-block: var(--cp-section-y); padding-top: 12rem; padding-bottom: 14rem; }
.rc-fields-inner { position: relative; z-index: 3; max-width: 1000px; margin-inline: auto; padding-inline: var(--cp-gutter); text-align: center; }
/*2026-09-17: デザイン案に合わせ、カードタイトルを中央揃え・広い字間にする*/
.rc-about-card { max-width: 500px; margin-inline: auto; margin-top: -12rem; background: var(--cp-grad-teal); border-radius: 20px; padding: 4rem clamp(1.5rem, 4vw, 3.5rem); margin-bottom: 4rem; box-shadow: 0 20px 50px rgba(23,58,74,.18); }
.rc-about-card h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: .3em; text-align: center; margin-bottom: 1.4rem; }
.rc-about-card p { font-size: .9rem; line-height: 2.1; text-align: left; opacity: .96; }
.rc-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.rc-field-card { background: #fff; color: var(--cp-ink); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 2rem; }
.rc-field-visual { aspect-ratio: 16/9; background: #e8f4fa; }
.rc-field-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-field-card h3 { font-family: var(--cp-font-en); font-size: 1.3rem; font-weight: 600; color: var(--cp-primary); margin: 1.6rem 0 1rem; }
.rc-field-card p { font-size: .85rem; line-height: 1.9; color: var(--cp-muted); margin: 0 2rem 1.6rem; }
.rc-field-btn { margin: auto auto 0; min-width: 12rem; }

/* CoinPostで働く人たち（ティール：3カード） */
.rc-people { position: relative; background: var(--cp-grad-teal); color: #fff; padding-block: var(--cp-section-y); overflow: hidden; border-radius: 48px; clip-path: ellipse(75% 50% at 50% 50%); padding: 6rem 0 8rem; margin-top: -8rem; margin-bottom: 0; z-index: 2; }
.rc-people-inner { max-width: 1000px; margin-inline: auto; padding-inline: var(--cp-gutter); text-align: center; }
.rc-people-lead { font-size: .9rem; opacity: .92; margin: -1.5rem 0 3rem; }
.rc-people-stage { position: relative; }
.rc-people-viewport { overflow: hidden; }
.rc-people-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.rc-people-arrow, .rc-people-dots { display: none; }
.rc-person { background: #fff; color: var(--cp-ink); border-radius: 14px; overflow: hidden; padding-bottom: 1.4rem; text-align: left; }
.rc-person-photo { aspect-ratio: 4 / 3; background: #e8f4fa; }
.rc-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-person-role { font-size: .95rem; font-weight: 700; color: var(--cp-primary); margin: 1.2rem 1.2rem .6rem; }
.rc-person-quote { font-size: .82rem; line-height: 1.8; color: var(--cp-muted); margin: 0 1.2rem 1.2rem; }
.rc-person-btn { display: flex; min-width: 0; width: calc(100% - 2.4rem); margin: 0 1.2rem; padding: .6rem 1rem; font-size: .8rem; letter-spacing: .05em; }

/* 大切にしていること（白：2カラム） */
.rc-values { background: #fff; padding-block: var(--cp-section-y); }
.rc-values-inner { max-width: 1000px; margin-inline: auto; padding-inline: var(--cp-gutter); display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }
.rc-values-title { font-size: 1.7rem; font-weight: 700; letter-spacing: .06em; color: #086e94; margin-top: .4rem; }
.rc-values-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.rc-values-col h3 { font-size: 1.05rem; font-weight: 700; color: #086e94; margin-bottom: 1.4rem; }
.rc-values-col ul { list-style: none; margin: 0; padding: 0; }
.rc-values-col li { position: relative; padding-left: 1rem; font-size: .9rem; line-height: 1.7; color: var(--cp-ink-soft); margin-bottom: 1.1rem; }
.rc-values-col li::before { content: ''; position: absolute; left: 0; top: .35em; width: 3px; height: 1em; background: var(--cp-teal); }

/* オフィスギャラリー（ティール） */
.rc-office { background: var(--cp-grad-teal); color: #fff; padding-block: var(--cp-section-y); }
.rc-office-head { max-width: 1100px; margin: 0 auto 2.5rem; padding-inline: var(--cp-gutter); display: flex; align-items: baseline; gap: 1.2rem; }
.rc-office-head .rc-section-title { margin-bottom: 0; text-align: left; }
.rc-office-lead { font-size: .85rem; opacity: .9; }
.rc-office-grid { max-width: 1100px; margin-inline: auto; padding-inline: var(--cp-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.rc-office-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; background: rgba(255,255,255,.2); }

/* 採用フロー（白） */
.rc-flow { background: #fff; padding-block: var(--cp-section-y); }
.rc-flow-inner { max-width: 1000px; margin-inline: auto; padding-inline: var(--cp-gutter); display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; }
.rc-flow-title { font-size: 1.7rem; font-weight: 700; color: #086e94; margin: .4rem 0 1rem; }
.rc-flow-lead { font-size: .85rem; color: var(--cp-muted); line-height: 1.9; }
/*2026-09-17: デザイン案に合わせ、番号の円をタイムライン状に縦線でつなぎ、右に横長カードを並べる形に変更*/
.rc-flow-steps { list-style: none; margin: 0; padding: 0; position: relative; padding-left: 4.2rem; }
.rc-flow-steps::before { content: ''; position: absolute; left: 1.3rem; top: 2.6rem; bottom: 2.6rem; width: 2px; background: var(--cp-border-2); z-index: 0; }
.rc-flow-step { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.3rem; background: #F5FBFD; border-radius: 12px; padding: 1.3rem 1.8rem; margin-bottom: 1.5rem; }
.rc-flow-step:last-child { margin-bottom: 0; }
.rc-flow-num { position: absolute; left: -4.2rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(180deg, #1EAEDE 0%, #29deb4 100%); color: #fff; font-family: var(--cp-font-en); font-weight: 600; z-index: 1; }
.rc-flow-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; color: var(--cp-teal); flex-shrink: 0; }
.rc-flow-icon svg { width: 100%; height: 100%; fill: currentColor; }
.rc-flow-body { display: flex; align-items: center; gap: 2rem; }
.rc-flow-body h4 { font-size: 1rem; font-weight: 700; color: var(--cp-ink); margin: 0; white-space: nowrap; }
.rc-flow-body p { font-size: .82rem; line-height: 1.7; color: var(--cp-muted); margin: 0; }

/* Follow Us（ティール） */
/*2026-09-17: デザイン案に合わせ、見出しと説明文を横並び・左揃えにする*/
/*2026-09-17: 緑背景がカードの下端ですぐ終わるようpadding-bottomを縮小、上部の余白は確保。
  アイコンは1.5倍(64px→96px)に拡大、説明文は2行に折り返すようmax-widthを指定*/
.rc-follow { background: #2AE0B0; color: #fff; padding-top: calc(var(--cp-section-y) / 2); padding-bottom: 3rem; text-align: center; }
.rc-follow-inner { max-width: 1000px; margin-inline: auto; padding-inline: var(--cp-gutter); display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; row-gap: 0; align-items: baseline; }
.rc-follow-inner > .rc-section-title { grid-column: 1; grid-row: 1; text-align: left; margin-bottom: 0; }
.rc-follow-lead { grid-column: 2; grid-row: 1; font-size: .9rem; opacity: .92; margin: 0; text-align: left; max-width: 300px; }
.rc-follow-grid { grid-column: 1 / -1; grid-row: 2; margin-top: 4rem; }
.rc-follow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.rc-follow-card { position: relative; z-index: 2; color: var(--cp-ink); border: 1px solid transparent; border-radius: 14px; background-image: linear-gradient(#fff, #fff), linear-gradient(180deg, #27c2ad 0%, #1EAEDE 100%); background-origin: border-box; background-clip: padding-box, border-box; padding: 0 1.6rem 2rem; display: flex; flex-direction: column; align-items: center; margin-bottom: -11rem; }
.rc-follow-icon { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; border: 2px solid transparent; background-image: linear-gradient(#e8f4fa, #e8f4fa), linear-gradient(180deg, #27c2ad 0%, #1EAEDE 100%); background-origin: border-box; background-clip: padding-box, border-box; margin: -3rem 0 1rem; }
.rc-follow-icon img { width: 100%; height: 100%; object-fit: cover; }
.rc-follow-card h3 { font-family: var(--cp-font-en); font-size: 1.2rem; font-weight: 600; color: #086e94; margin-bottom: .2rem; }
.rc-follow-handle { font-size: .8rem; color: var(--cp-muted-2); margin-bottom: 1rem; }
.rc-follow-card p { font-size: .82rem; line-height: 1.8; color: var(--cp-muted); margin-bottom: 1.6rem; text-align: left; }
.rc-follow-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: auto; min-width: 11rem; padding: .7rem 1.5rem; border-radius: 999px; background: linear-gradient(180deg, #27c2ad 0%, #1EAEDE 100%); color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-decoration: none; transition: opacity .2s ease; }
.rc-follow-btn:hover { opacity: .88; }
.rc-follow-btn .btn-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }

/* Join Us!（ティール楕円） */
.rc-join { background: #fff; padding: 16rem var(--cp-gutter) var(--cp-section-y); overflow: hidden; }
.rc-join-oval { max-width: 880px; margin-inline: auto; background: linear-gradient(180deg, #27c2ad 0%, #1EAEDE 100%); color: #fff; text-align: center; border-radius: 50%; padding: 5rem 2rem; }
.rc-join-oval h2 { font-family: var(--cp-font-en); font-size: 2.4rem; font-weight: 700; margin-bottom: 1.2rem; }
.rc-join-oval p { font-size: .9rem; line-height: 2; opacity: .96; margin-bottom: 2.2rem; }
.rc-join-btn { background: #fff; color: #086e94; box-shadow: none; }

@media (max-width: 880px) {
  .rc-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; padding-bottom: 4rem; }
  .rc-hero-copy { padding: 3rem var(--cp-gutter) 2rem; text-align: center; min-width: 0; }
  .rc-breadcrumb { display: none; }
  .rc-hero-copy h1 { font-size: 1.9rem; }
  .rc-hero-btn { align-self: center; }
  .rc-hero-photo { aspect-ratio: 16/10; z-index: 3; min-width: 0; width: 100%; height: 100%; }
  .rc-hero-photo img { border-radius: 0; position: static; width: 100%; height: 100%; object-fit: cover; }
  .rc-statement {
    clip-path: ellipse(100% 50% at 50% 50%);
    border-radius: 0; margin-top: -70px; margin-bottom: -70px; padding: 5rem 0 6rem;
  }
  .rc-statement-inner { grid-template-columns: 1fr; gap: 2rem; }
  .rc-statement-collage { padding: 28px 28px 38px 32px; }
  .rc-fields { padding-top: 8rem; padding-bottom: 6rem; }
  .rc-about-card { margin-top: -8rem; }
  .rc-about-card h2 { font-size: 1.2rem; letter-spacing: .08em; }
  .rc-field-grid { grid-template-columns: minmax(0, 1fr); }
  .rc-field-card { min-width: 0; }
  .rc-field-card p { text-align: left; }
  .rc-people { clip-path: ellipse(100% 50% at 50% 50%); border-radius: 0; margin-top: -70px; margin-bottom: 0; padding: 5rem 0 6rem; }
  .rc-people-inner { padding-inline: 0; }
  .rc-people-stage { position: relative; }
  .rc-people-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rc-people-viewport::-webkit-scrollbar { display: none; }
  .rc-people-track { display: flex; gap: 1rem; }
  .rc-person { flex: 0 0 88%; scroll-snap-align: center; }
  .rc-person:first-child { margin-left: 6%; }
  .rc-people-track::after { content: ''; flex: 0 0 calc(88% + 1rem + 6%); }
  .rc-people-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 38%; transform: translateY(-50%); z-index: 5; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--cp-ink); border: 0; font-size: 1.3rem; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; }
  .rc-people-prev { left: .6rem; }
  .rc-people-next { right: .6rem; }
  .rc-people-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
  .rc-people-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
  .rc-people-dot.is-active { background: #fff; }
  .rc-values-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .rc-values-cols { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .rc-office-head { flex-direction: column; gap: .4rem; }
  .rc-office-grid { grid-template-columns: 1fr 1fr; }
  .rc-flow-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .rc-flow-steps { padding-left: 0; }
  .rc-flow-steps::before { display: none; }
  .rc-flow-step { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 1.2rem; padding: 1.8rem 1.5rem 1.3rem; margin-bottom: 1.8rem; }
  .rc-flow-step:not(:last-child)::after { content: ''; position: absolute; left: 3rem; bottom: -1.8rem; width: 2px; height: 1.8rem; background: var(--cp-border-2); transform: translateX(-50%); z-index: 0; }
  .rc-flow-num { position: absolute; left: 50%; top: -1.3rem; transform: translateX(-50%); }
  .rc-flow-icon { width: 3rem; height: 3rem; margin-bottom: 0; flex-shrink: 0; }
  .rc-flow-body { flex-direction: column; align-items: flex-start; text-align: left; gap: .3rem; min-width: 0; }
  .rc-flow-body h4 { white-space: normal; }
  .rc-flow-body p { text-align: left; }
  .rc-follow-inner { grid-template-columns: 1fr; }
  .rc-follow-inner > .rc-section-title { grid-column: 1; grid-row: 1; text-align: center; }
  .rc-follow-lead { grid-column: 1; grid-row: 2; text-align: center; max-width: none; margin-top: .5rem; }
  .rc-follow-grid { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; }
  .rc-follow-card { margin-top: 2rem; margin-bottom: 0; }
  .rc-follow-card:last-child { margin-bottom: -11rem; }
  .rc-section-title { font-size: 1.15rem; letter-spacing: 0; }
  .rc-join {
    background: linear-gradient(180deg, #27c2ad 0%, #1EAEDE 100%);
    clip-path: ellipse(100% 50% at 50% 50%);
    border-radius: 0;
    margin-top: 14rem;
    margin-bottom: 4rem;
    padding: 4rem var(--cp-gutter);
  }
  .rc-join-oval { background: transparent; border-radius: 0; max-width: none; padding: 0; }
  .rc-join-oval h2 { font-size: 2rem; }
}

/* =========================================================================
   ページ別スタイル：jobs（募集職種 一覧・詳細）  ※旧 jobs.css を統合
   ========================================================================= */
.jobs-page { color: var(--cp-ink); font-family: var(--cp-font); }
.jobs-page .ghost-button { vertical-align: middle; }

/* バッジ・タグ */
.job-badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; padding: .28rem .9rem; border-radius: 4px; color: #fff; }
.job-badge-dept { background: var(--cp-primary); }
.job-badge-role { background: var(--cp-muted); }
.job-tag { display: inline-block; font-size: .72rem; color: var(--cp-primary); border: 1px solid var(--cp-primary); border-radius: 999px; padding: .22rem .9rem; }

/* 一覧ヒーロー */
.jobs-hero { position: relative; background: #fff; color: var(--cp-ink); text-align: center; padding: 7.5rem var(--cp-gutter) 4.5rem; overflow: hidden; }
.jobs-hero::after { content: ''; position: absolute; left: 50%; top: -980px; width: 1900px; height: 1900px; margin-left: -950px; border-radius: 50%; background: radial-gradient(circle, #e1f4fc 0%, #e6f6fd 70%, rgba(230, 246, 253, 0) 74%); pointer-events: none; z-index: 0; }
.jobs-hero > * { position: relative; z-index: 1; }
.jobs-hero-en { display: block; font-family: var(--cp-font-en); font-weight: 500; letter-spacing: .25em; font-size: .9rem; color: var(--cp-primary); margin-bottom: .9rem; }
.jobs-hero h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: .12em; color: var(--cp-ink); }
.jobs-hero-lead { position: relative; z-index: 1; margin-top: 1.2rem; font-size: .9rem; color: var(--cp-muted); }

/* 一覧本体（フィルター＋リスト） */
.jobs-list-section { background: var(--cp-bg-soft); padding-block: 4rem var(--cp-section-y); }
.jobs-list-inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--cp-gutter); display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }

/* フィルター */
.jobs-filter { background: #fff; border-radius: 12px; padding: 1.5rem 1.4rem; position: sticky; top: 1.5rem; }
.jobs-filter-toggle { display: none; }
.jobs-filter-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--cp-border); }
.jobs-filter-clear { background: none; border: none; color: var(--cp-primary); font-size: .8rem; cursor: pointer; }
.jobs-filter-group { margin-bottom: 1.4rem; }
.jobs-filter-label { font-size: .85rem; font-weight: 700; color: var(--cp-muted); margin-bottom: .6rem; }
.jobs-filter-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; padding: .25rem 0; cursor: pointer; }
.jobs-filter-item input { accent-color: var(--cp-primary); }

/* リスト */
.jobs-count { font-size: .85rem; color: var(--cp-muted); margin-bottom: 1rem; }
.jobs-count #jobs-count { font-weight: 700; color: var(--cp-primary); }
.job-card { display: block; background: #fff; border-radius: 12px; padding: 1.6rem 1.8rem; margin-bottom: 1rem; text-decoration: none; color: inherit; border: 1px solid transparent; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.job-card:hover { box-shadow: 0 12px 30px rgba(23,58,74,.12); border-color: var(--cp-border-2); transform: translateY(-2px); }
.job-card-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; align-items: center; }
.job-card-title { font-size: 1.12rem; font-weight: 700; line-height: 1.6; margin-bottom: .6rem; }
.job-card-text { font-size: .85rem; line-height: 1.8; color: var(--cp-muted); margin-bottom: 1rem; }
.job-card-more { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--cp-primary); }
.job-card-more .btn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-primary); display: inline-block; }
.jobs-empty, .jobs-noresult { color: var(--cp-muted); font-size: .9rem; padding: 2rem 0; }

/* 詳細 */
.job-detail { background: #fff; padding: 3rem var(--cp-gutter) 5rem; }
.job-detail-inner { max-width: 820px; margin-inline: auto; }
.job-breadcrumb { font-size: .78rem; color: var(--cp-muted-2); margin-bottom: 2rem; }
.job-breadcrumb a { color: var(--cp-muted-2); text-decoration: none; }
.job-breadcrumb a:hover { color: var(--cp-primary); }
.job-toptags { display: flex; gap: .6rem; margin-bottom: 1.2rem; }
.job-title { font-size: 1.7rem; font-weight: 700; line-height: 1.5; margin-bottom: 1rem; }
.job-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.job-block { margin-bottom: 2.5rem; }
.job-block-title { font-size: 1.05rem; font-weight: 700; color: var(--cp-primary); padding-left: .8rem; border-left: 4px solid var(--cp-primary); margin-bottom: 1rem; }
.job-block-body { font-size: .9rem; line-height: 2; color: var(--cp-ink-soft); }
.job-table { width: 100%; border-collapse: collapse; }
.job-table th, .job-table td { text-align: left; padding: 1rem 1.1rem; border-bottom: 1px solid var(--cp-border); font-size: .88rem; vertical-align: top; }
.job-table th { width: 9rem; background: var(--cp-bg-soft); color: var(--cp-muted); font-weight: 600; white-space: nowrap; }
.job-bullets { margin: 0; padding-left: 1.1rem; }
.job-bullets li { line-height: 1.9; }
.job-apply { position: relative; text-align: center; margin: 4rem auto 2rem; max-width: 640px; padding: 3rem 1.5rem; border-radius: 50% / 30%; background: radial-gradient(ellipse at center, #eaf7fc 0%, #f6fbfe 70%, #fff 100%); }
.job-apply h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: .8rem; }
.job-apply p { font-size: .88rem; color: var(--cp-muted); margin-bottom: 1.6rem; }
.job-back { text-align: center; }

@media (max-width: 880px) {
  .jobs-hero { padding: 6rem var(--cp-gutter) 4.5rem; }
  .jobs-hero h1 { font-size: 1.7rem; }
  .jobs-list-inner { grid-template-columns: 1fr; gap: 1.2rem; }
  .job-title { font-size: 1.4rem; }
  .job-table th { width: auto; display: block; border-bottom: none; padding-bottom: .2rem; }
  .job-table td { display: block; padding-top: .3rem; }
  /* フィルターを開閉式に（デフォルト閉） */
  .jobs-filter { position: static; background: transparent; padding: 0; border-radius: 0; }
  .jobs-filter-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--cp-border); border-radius: 12px; padding: 1rem 1.4rem; font-weight: 700; font-size: .9rem; color: var(--cp-ink); cursor: pointer; }
  .jobs-filter-toggle-icon { transition: transform .25s ease; color: var(--cp-primary); }
  .jobs-filter.is-open .jobs-filter-toggle-icon { transform: rotate(180deg); }
  .jobs-filter-body { display: none; background: #fff; border: 1px solid var(--cp-border); border-top: none; border-radius: 0 0 12px 12px; padding: 1.2rem 1.4rem; }
  .jobs-filter.is-open .jobs-filter-body { display: block; }
}

/* =========================================================================
   ページ別スタイル：news（ニュース 一覧・詳細）  ※旧 news.css を統合
   ========================================================================= */
.news-page { color: var(--cp-ink); font-family: var(--cp-font); }
.news-badge { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; color: var(--cp-primary); border: 1px solid var(--cp-primary); border-radius: 4px; padding: .2rem .8rem; white-space: nowrap; }


/* 一覧 */
.news-list-section { background: #fff; padding: 1rem var(--cp-gutter) var(--cp-section-y); }
.news-list-inner { max-width: 900px; margin-inline: auto; }
.news-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2.5rem; }
.news-tab { font-size: 1rem; color: var(--cp-muted); text-decoration: none; padding: .45rem 1.3rem; border-radius: 999px; border: 1px solid var(--cp-border-2); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.news-tab:hover { border-color: var(--cp-primary); color: var(--cp-primary); }
.news-tab.is-active { background: var(--cp-primary); border-color: var(--cp-primary); color: #fff; }
/* TOPのNews一覧（.news-item）の見た目を踏襲。概要(news-row-text)付き */
.news-row { display: grid; grid-template-columns: auto 8rem 1fr 3rem; gap: 2rem; align-items: center; padding: 1.5rem 1.5rem; border-bottom: 1px solid rgba(8, 110, 148, 0.18); text-decoration: none; color: #086e94; transition: background .2s ease; }
.news-row:hover { background: rgba(8, 110, 148, 0.05); }
.news-row:first-child { border-top: 1px solid rgba(8, 110, 148, 0.18); }
.news-row-date { font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: .8667rem; line-height: 1.3333rem; letter-spacing: .2rem; color: #086e94; }
.news-row .news-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 8rem; padding: .3rem 1rem; background: rgba(8, 110, 148, 0.05); border: 0; border-radius: 4px; font-size: .8rem; font-weight: 500; letter-spacing: .1em; color: #086e94; }
.news-row-main { min-width: 0; }
.news-row-title { display: block; font-family: 'Noto Sans', Arial, sans-serif; font-size: 1rem; line-height: 1.8; letter-spacing: .1333rem; color: #086e94; transition: padding-left .2s ease; }
.news-row:hover .news-row-title { padding-left: 1em; }
.news-row-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; line-height: 1.7; letter-spacing: .05em; color: var(--cp-muted); margin-top: .4rem; transition: padding-left .2s ease; }
.news-row:hover .news-row-text { padding-left: 1em; }
.news-row-arrow { display: block; width: 3rem; height: .5rem; background: url('imgs/arrow1.png') right center / auto 100% no-repeat; transition: background-image .2s ease; }
.news-row:hover .news-row-arrow { background-image: url('imgs/arrow2.png'); }
.news-empty { color: var(--cp-muted); padding: 3rem 0; text-align: center; }
.news-pager { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; }
.news-pg { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1rem; color: var(--cp-muted); text-decoration: none; border: 1px solid var(--cp-border-2); }
.news-pg:hover { border-color: var(--cp-primary); color: var(--cp-primary); }
.news-pg.is-active { background: var(--cp-primary); border-color: var(--cp-primary); color: #fff; }

/* 詳細 */
.news-detail { background: #fff; padding: 3rem var(--cp-gutter) 5rem; }
.news-detail-inner { max-width: 860px; margin-inline: auto; }
.news-breadcrumb { font-size: .78rem; color: var(--cp-muted-2); margin-bottom: 2.5rem; }
.news-breadcrumb a { color: var(--cp-muted-2); text-decoration: none; }
.news-breadcrumb a:hover { color: var(--cp-primary); }
.news-detail-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.news-detail-date { font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: .9rem; letter-spacing: .2rem; color: #086e94; }
.news-detail-meta .news-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 8rem; padding: .3rem 1rem; background: rgba(8, 110, 148, 0.05); border: 0; border-radius: 4px; font-size: .8rem; font-weight: 500; letter-spacing: .1em; color: #086e94; }
.news-detail-title { font-size: 1.9rem; font-weight: 700; line-height: 1.5; color: #086e94; margin-bottom: 0; }

/* タイトル下の区切り線 + Shareバー */
.news-detail-divider { border: 0; border-top: 1px solid rgba(8, 110, 148, 0.18); margin: 1.6rem 0; }
.news-share { display: flex; align-items: center; gap: .9rem; margin-bottom: 3rem; }
.news-share-label { font-family: var(--cp-font-en); font-size: .85rem; font-weight: 600; letter-spacing: .1em; color: #086e94; margin-right: .4rem; }
.news-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: #086e94; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity .2s ease, color .2s ease; }
.news-share-btn:hover { opacity: .6; }
.news-share-btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.news-copy.is-copied { color: #2bb673; opacity: 1; }
.news-detail-body { font-size: .92rem; line-height: 2; color: var(--cp-ink-soft); }
.news-detail-body p { margin-bottom: 1.4rem; }
.news-detail-body h2 { font-size: 1.2rem; font-weight: 700; color: var(--cp-ink); margin: 2.2rem 0 1rem; }
.news-detail-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--cp-primary); margin: 1.8rem 0 .8rem; }
.news-detail-body a { color: var(--cp-primary); }
.news-back { text-align: center; margin-top: 3.5rem; }

@media (max-width: 880px) {
  /* TOPのNews一覧(.news-item)のSPレイアウトに合わせる */
  .news-row { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; row-gap: .5rem; padding: 1rem .5rem; }
  .news-row-date { grid-row: 1; grid-column: 1; }
  .news-row .news-badge { grid-row: 1; grid-column: 2; justify-self: start; min-width: 6rem; }
  .news-row-main { grid-row: 2; grid-column: 1 / 3; }
  .news-row-arrow { grid-row: 1 / 3; grid-column: 3; align-self: center; width: 1.5rem; }
  .news-row:hover .news-row-title,
  .news-row:hover .news-row-text { padding-left: 0; }
  .news-detail-title { font-size: 1.4rem; }
}

/* =========================================================================
   ページ別スタイル：contact（お問い合わせ）  ※旧 contact.css を統合
   CF7のクラスを扱うため .contact-page スコープを維持。
   ========================================================================= */
.contact-page { color: var(--cp-ink); font-family: var(--cp-font); }

/* ヒーロー（共通 .cp-hero に準拠。パンくずのみ左上に独自配置） */
.contact-hero .contact-breadcrumb { position: absolute; top: 1.8rem; left: var(--cp-gutter); z-index: 2; font-size: .78rem; color: var(--cp-muted-2); }
.contact-breadcrumb a { color: var(--cp-muted-2); text-decoration: none; }
.contact-breadcrumb a:hover { color: var(--cp-primary); }

/* フォームカード */
.contact-section { background: #fff; padding: 1rem var(--cp-gutter) var(--cp-section-y); }
.contact-card { max-width: 960px; margin-inline: auto; background: var(--cp-bg-soft); border: 0; border-radius: 0; padding: 3rem 3.5rem 3.5rem; }
.contact-card-head { text-align: center; font-size: 1rem; font-weight: 600; color: #086e94; margin-bottom: 2.6rem; }

/* フォーム項目（CF7） */
.contact-page .cf-field { margin-bottom: 1.8rem; }
.contact-page .cf-label { display: block; font-size: .95rem; font-weight: 600; color: #086e94; margin-bottom: .6rem; }
.contact-page .cf-req { display: inline-block; font-size: .68rem; font-weight: 600; color: #fff; background: var(--cp-danger); border-radius: 3px; padding: .1rem .5rem; margin-left: .4rem; letter-spacing: .03em; }
.contact-page .wpcf7-form input[type=text],
.contact-page .wpcf7-form input[type=email],
.contact-page .wpcf7-form input[type=tel],
.contact-page .wpcf7-form input[type=date],
.contact-page .wpcf7-form select,
.contact-page .wpcf7-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #dbe7ef; border-radius: 4px; padding: .9rem 1rem; font-size: .92rem; font-family: inherit; color: var(--cp-ink); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-page .wpcf7-form input[type=text]:focus,
.contact-page .wpcf7-form input[type=email]:focus,
.contact-page .wpcf7-form input[type=tel]:focus,
.contact-page .wpcf7-form input[type=date]:focus,
.contact-page .wpcf7-form select:focus,
.contact-page .wpcf7-form textarea:focus { outline: none; border-color: var(--cp-primary); box-shadow: 0 0 0 3px rgba(30,174,222,.12); }
.contact-page .wpcf7-form textarea { min-height: 180px; resize: vertical; }
.apply-page .wpcf7-form textarea { min-height: 110px; }
.contact-page .cf-counter { display: block; text-align: right; font-size: .76rem; color: var(--cp-muted-2); margin-top: .4rem; }
.contact-page .cf-note { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .76rem; color: var(--cp-muted-2); margin-top: .4rem; }
.contact-page .cf-note .cf-counter { margin-top: 0; white-space: nowrap; }
.contact-page .wpcf7-radio .wpcf7-list-item { display: block; margin: 0 0 .6rem; }
.contact-page .wpcf7-radio .wpcf7-list-item label { display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--cp-ink); font-weight: normal; cursor: pointer; }
.contact-page .wpcf7-radio input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--cp-primary); }

/* CF7バリデーションメッセージ */
.contact-page .wpcf7-not-valid-tip { color: var(--cp-danger); font-size: .78rem; margin-top: .3rem; }
.contact-page .wpcf7-response-output { margin: 1.5rem 0 0; padding: .9rem 1.2rem; border-radius: 8px; font-size: .85rem; border: 1px solid #cdd9e2; }
.contact-page .wpcf7-form.sent .wpcf7-response-output { border-color: #3ec487; background: #effaf3; color: #1f8a55; }
.contact-page .wpcf7-form.invalid .wpcf7-response-output { border-color: var(--cp-danger); background: #fdeef1; color: #c23a54; }

/* 送信ボタン */
.contact-page .cf-actions { text-align: center; margin-top: 2.2rem; }
/* 送信ボタン：モックのアウトラインピル（ghost-button風） */
.contact-page .wpcf7-form input[type=submit] { display: inline-flex; align-items: center; justify-content: center; min-width: 16rem; padding: .9rem 2.5rem; border-radius: 999px; font-size: .95rem; font-weight: 600; letter-spacing: .1em; cursor: pointer; font-family: inherit; border: 0; background: #fff; color: #086e94; box-shadow: inset 0 0 0 1px #086e94; transition: background .2s ease, color .2s ease; }
.contact-page .wpcf7-form input[type=submit]:hover { background: #086e94; color: #fff; }
.apply-page .wpcf7-form input[type=submit] { background: #1a1a1a; color: #fff; box-shadow: none; }
.apply-page .wpcf7-form input[type=submit]:hover { background: #333; color: #fff; }

@media (max-width: 880px) {
  .contact-card { padding: 1.8rem 1.3rem 2.2rem; }
  .contact-page .wpcf7-form input[type=submit] { min-width: 0; width: 100%; }
}

/* =========================================================================
   レスポンシブ最終調整：狭幅SP（〜560px）。ページ別@mediaより後に置き優先させる。
   ========================================================================= */
@media (max-width: 560px) {
  .about-principles__grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .about-statement__en { font-size: 1.5rem; }
  .about-statement__ja { font-size: .95rem; }
  .about-principles__title { font-size: 1.5rem; margin-bottom: 2rem; }
  .about-principle h4 { font-size: 1rem; }
  .about-principle p { font-size: .9rem; line-height: 1.7; }
  p.about-principle__lead { font-size: 1.05rem; }
  .about-belief__copy h2 { font-size: 1.3rem; }
  .about-belief__copy p { font-size: .92rem; line-height: 1.85; margin-bottom: 1.8rem; }
  .about-partners__title { font-size: 1.5rem; letter-spacing: .08em; }
  .about-partners__head { margin-bottom: 2.5rem; }
  .about-profile__title { font-size: 1.7rem; }
  .about-profile__table th, .about-profile__table td { font-size: .9rem; padding: 1rem .2rem .7rem; }
  .about-profile__table th { width: 7rem; }
  .about-history__title { font-size: 1.7rem; }
  .about-history__text { font-size: 1rem; }
  .about-history__year { font-size: 1.5rem; }
}

/* =========================================================================
   recruit: CoinPostで働く人たち（PC版）をスマホ版と同様の横スクロール型に
   3枚をメインに見せつつ、左右に次/前のカードをチラ見えさせる。
   ========================================================================= */
@media (min-width: 881px) {
  .rc-people-viewport {
    max-width: 1200px;
    margin-inline: auto;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rc-people-viewport::-webkit-scrollbar { display: none; }
  .rc-people-track { display: flex; gap: 1.2rem; }
  .rc-person { flex: 0 0 calc((1000px - 2.4rem) / 3); scroll-snap-align: center; }
  .rc-person:first-child { margin-left: calc((1200px - (1000px - 2.4rem) / 3) / 2); }
  .rc-people-track::after { content: ''; flex: 0 0 calc((1200px - (1000px - 2.4rem) / 3) / 2); }
  .rc-people-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 38%; transform: translateY(-50%); z-index: 5; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--cp-ink); border: 0; font-size: 1.5rem; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; }
  .rc-people-prev { left: 1rem; }
  .rc-people-next { right: 1rem; }
  .rc-people-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
  .rc-people-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); }
  .rc-people-dot.is-active { background: #fff; }
}

.rc-people{display:none;}