@charset "utf-8";
/* ****************************** */
/* 今風デザインの上書き（2026-10）  */
/* 構成・文章は変えず、見た目だけを差し替える。layout.css / parts.css の後に読み込む */
/* 採用特設ページ（page-recruit.php）と同じ配色・フォントでそろえる */
/* ****************************** */

:root {
  --m-text: #1c1e2b;
  --m-sub: #4a4d61;
  --m-mute: #5b5e73;
  --m-line: #dfe1ec;
  --m-accent: #2f2b86;
  --m-accent-2: #615cee;
  --m-accent-soft: #ebebf8;
  --m-navy: #0f1130;
  --m-glass: rgba(255, 255, 255, .82);
  --m-shadow: 0 12px 36px rgba(28, 30, 43, .08);
  --m-radius: 16px;
  --m-jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --m-en: "Manrope", "Lato", sans-serif;
  --m-header-h: 88px;
}
@media screen and (max-width: 990px) {
  :root { --m-header-h: 68px; }
}

html { scroll-padding-top: var(--m-header-h); }
body {
  font-family: var(--m-jp);
  color: var(--m-text);
  font-feature-settings: "palt" 1;
  letter-spacing: .03em;
  background: #fff;
}
#wrapper, #container { background: transparent; }
body { background: #f6f6fa; }
#splash-logo, .top-lead, h1, h2, h3 span, #g-nav, #pc-nav, .openbtn, #footer { font-family: var(--m-en), var(--m-jp); }

/* ---------- ヘッダー ---------- */
#header.site-header {
  height: var(--m-header-h);
  display: block;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(223, 225, 236, .8);
  transition: height .25s, box-shadow .25s, background .25s;
}
#header.site-header.is-scrolled {
  --m-header-h: 72px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 24px rgba(28, 30, 43, .06);
}
.admin-bar #header.site-header { top: 32px; }
.sh-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 44px);
}
#header .sh-logo {
  position: static;
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}
#header .sh-logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--m-text);
}
#header .sh-logo img {
  width: auto;
  height: 40px;
  padding: 0;
  transition: height .25s;
}
#header.is-scrolled .sh-logo img { height: 34px; }
.sh-name { display: flex; flex-direction: column; gap: 4px; }
.sh-ja { font-family: var(--m-jp); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; color: var(--m-text); }
.sh-en { font-family: var(--m-en); font-weight: 700; font-size: .62rem; letter-spacing: .28em; color: var(--m-accent-2); }

#header #pc-nav { margin: 0 0 0 auto; }
#header #pc-nav ul { padding: 0; margin: 0; gap: 4px; }
#header #pc-nav ul li { padding: 0; background: none; opacity: 1; }
#header #pc-nav li a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 16px;
  color: var(--m-text);
  background: none;
  border-radius: 10px;
  transition: background .2s, color .2s;
}
.sh-nav-en { font-family: var(--m-en); font-weight: 700; font-size: .62rem; letter-spacing: .2em; color: var(--m-accent-2); text-transform: uppercase; }
.sh-nav-ja { font-family: var(--m-jp); font-weight: 500; font-size: .92rem; letter-spacing: .06em; }
#header #pc-nav li a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--m-accent-2);
  transform: translateX(-50%) scaleX(0);
  transition: transform .25s;
}
#header #pc-nav li a:hover { background: var(--m-accent-soft); }
#header #pc-nav li a:hover::after,
#header #pc-nav li.current a::after { transform: translateX(-50%) scaleX(1); }
#header #pc-nav li.current a { color: var(--m-accent); }

.sh-actions { display: flex; gap: 10px; }
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--m-accent);
  color: #fff !important;
  font-family: var(--m-jp);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(47, 43, 134, .25);
  transition: background .2s, transform .2s;
}
.sh-btn:hover { background: #413cb0; transform: translateY(-1px); }
.sh-btn-line {
  background: transparent;
  color: var(--m-accent) !important;
  border: 1.5px solid var(--m-accent);
  box-shadow: none;
}
.sh-btn-line:hover { background: var(--m-accent-soft); }

@media screen and (max-width: 1180px) {
  #header #pc-nav li a { padding: 10px 10px; }
  .sh-btn { padding: 0 16px; }
}
@media screen and (max-width: 990px) {
  .sh-actions { display: none; }
  .sh-inner { padding-right: 76px; }
  #header .sh-logo img { height: 34px; }
  .sh-ja { font-size: .95rem; }
}

/* ---------- スマホ：メニューボタンとパネル ---------- */
.openbtn { display: none; }
@media screen and (max-width: 990px) {
  .openbtn {
    display: block;
    top: 12px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--m-accent);
    box-shadow: 0 6px 16px rgba(47, 43, 134, .3);
  }
  .admin-bar .openbtn { top: 58px; }
  .openbtn span:nth-of-type(1),
  .openbtn span:nth-of-type(2),
  .openbtn span:nth-of-type(3) {
    opacity: 1;
    left: 13px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    font-size: 0;
    color: transparent;
    transform: none;
  }
  .openbtn span:nth-of-type(1) { top: 15px; }
  .openbtn span:nth-of-type(2) { top: 21px; }
  .openbtn span:nth-of-type(3) { top: 27px; }
  .openbtn.active span:nth-of-type(1) { top: 21px; left: 13px; transform: rotate(-45deg); }
  .openbtn.active span:nth-of-type(2) { opacity: 0; }
  .openbtn.active span:nth-of-type(3) { top: 21px; left: 13px; transform: rotate(45deg); }
}
#g-nav {
  background: linear-gradient(160deg, #2f2b86, #0f1130);
}
#g-nav ul {
  left: 50%;
  width: min(86%, 420px);
}
#g-nav li a {
  font-family: var(--m-jp);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
#g-nav.panelactive li:nth-child(6) a { background: none; color: #fff; }
#g-nav.panelactive li:last-child a {
  margin: 24px 0 0;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
}
#g-nav li a img { width: 100%; max-width: 320px; height: auto; border-radius: 8px; }

.hero-scroll {
  position: absolute;
  z-index: 1;
  right: clamp(20px, 4vw, 56px);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff !important;
}
.hero-scroll span { font-family: var(--m-en); font-size: .7rem; letter-spacing: .25em; writing-mode: vertical-rl; text-transform: uppercase; }
.hero-scroll i { position: relative; width: 1px; height: 64px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; inset: 0; background: #fff; animation: m-scroll 2.2s ease-in-out infinite; }
@keyframes m-scroll {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media screen and (max-width: 600px) {
  .hero-scroll { display: none; }
}

/* トップのヒーロー上では、ヘッダーを透明に（スクロールすると白いバーに戻る） */
#header.site-header.is-over-hero:not(.is-scrolled) {
  background: linear-gradient(to bottom, rgba(15, 17, 48, .45), rgba(15, 17, 48, 0));
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.is-over-hero:not(.is-scrolled) .sh-ja,
.is-over-hero:not(.is-scrolled) #pc-nav li a { color: #fff !important; }
.is-over-hero:not(.is-scrolled) .sh-en,
.is-over-hero:not(.is-scrolled) .sh-nav-en { color: #c9c7f5; }
.is-over-hero:not(.is-scrolled) #pc-nav li a:hover { background: rgba(255, 255, 255, .12); }
.is-over-hero:not(.is-scrolled) #pc-nav li a::after { background: #fff; }
.is-over-hero:not(.is-scrolled) .sh-btn-line { color: #fff !important; border-color: rgba(255, 255, 255, .75); }
.is-over-hero:not(.is-scrolled) .sh-btn-line:hover { background: rgba(255, 255, 255, .12); }
.is-over-hero:not(.is-scrolled) .sh-btn:not(.sh-btn-line) { background: #fff; color: var(--m-accent) !important; }
@media (prefers-reduced-motion: reduce) { .hero-scroll i::after { animation: none; } }

/* ---------- 共通：本文エリアと見出し ---------- */
#main-area { max-width: 1200px; padding: 72px 0 40px; }

/* 見出し：英字を大きく、日本語を小さく（英字はCSSで付与） */
#vision h2, #service h2, #about h2, #history h2, .contact-h2 h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--m-jp);
  font-size: .95rem !important;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--m-mute) !important;
  text-transform: none;
}
#vision h2::before, #service h2::before, #about h2::before, #history h2::before, .contact-h2 h2::before {
  font-family: var(--m-en);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--m-accent);
}
#vision h2::before  { content: "Vision"; }
#service h2::before { content: "Service"; }
#about h2::before   { content: "Company"; }
#history h2::before { content: "History"; }
.contact-h2 h2::before { content: "Contact"; }
#service h2, #about h2, .contact-h2 h2 { align-items: center; }
#vision h2 { align-items: flex-end; }

/* ボタン（お知らせ一覧など）を丸いボタンに */
.btn04 {
  border-radius: 999px;
  border: 1.5px solid var(--m-accent) !important;
  color: var(--m-accent) !important;
  background: rgba(255, 255, 255, .8);
  font-family: var(--m-jp);
  font-weight: 700;
  padding: 12px 36px !important;
  transition: background .2s;
}
.btn04:hover { background: var(--m-accent-soft) !important; color: var(--m-accent) !important; }
.bordertop::before, .bordertop span::before, .bordertop span::after { display: none !important; }

/* ---------- Vision ---------- */
#vision .img { border-radius: var(--m-radius); box-shadow: var(--m-shadow); overflow: hidden; }
#vision .vision-lead { color: var(--m-accent) !important; font-weight: 700; }
#vision .vision-lead::after { background: var(--m-accent-2); }

/* ---------- Service ---------- */
#service .service-area::after { display: none; }
#service .service-area .img img { border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
#service .service-area .content {
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  border: 1px solid rgba(255, 255, 255, .7);
}
#service .service-area .content-area h3 { font-family: var(--m-jp); color: var(--m-sub); }
#service .service-area .content-area h3 span { font-family: var(--m-jp); color: var(--m-accent); font-size: 1.35rem; margin-bottom: 6px; }
#service .service-area .content-area p { color: var(--m-sub); }

/* ---------- Company ---------- */
#about .about-list {
  padding: 24px clamp(16px, 4vw, 48px);
  border-radius: var(--m-radius);
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--m-shadow);
}
#about .about-list li { border-bottom: 1px solid var(--m-line); padding: 6px 0 18px; }
#about .about-list li:last-child { border-bottom: 0; margin-bottom: 0; }
#about .about-list dt { font-weight: 700; color: var(--m-mute); }
#about .about-list a { color: var(--m-accent-2) !important; }
.faq-bg { border-radius: var(--m-radius); overflow: hidden; box-shadow: var(--m-shadow); }
.faq-bg::after { display: none; }

/* ---------- History ---------- */
.history-img { border-radius: var(--m-radius); box-shadow: var(--m-shadow); }
.timeline dt { font-family: var(--m-en); font-weight: 800; font-size: 1.15rem; color: var(--m-accent); }
.timeline dd { color: var(--m-sub); }
.timeline li::before {         /* 線が伸びる前の薄いガイド */
  content: "";
  position: absolute;
  left: calc(.2em - 1px);
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px;
  background: rgba(47, 43, 134, .12);
}
.border-line {                 /* スクロールで伸びる線 */
  width: 4px;
  left: calc(.2em - 1px);
  border-radius: 4px;
  background: var(--m-accent-2);
  box-shadow: 0 0 12px rgba(97, 92, 238, .4);
}
.timeline li::after {
  z-index: 1;
  width: 16px;
  height: 16px;
  top: 8px;
  left: calc(.2em - 7px);
  background: #fff;
  border: 4px solid var(--m-accent-2);
  box-shadow: 0 0 0 4px rgba(97, 92, 238, .18);
}

/* ---------- Contact ---------- */
#contact .contact-area {
  padding: 40px clamp(20px, 4vw, 56px);
  border-radius: var(--m-radius);
  background: linear-gradient(135deg, #2f2b86, #0f1130);
  color: #fff;
  box-shadow: 0 20px 50px rgba(15, 17, 48, .25);
}
#contact .contact-area dt, #contact .contact-area dd { color: #fff; }
#contact .contact-area dd { color: #d6d7e6; }
#contact .btn04 { background: #fff; border-color: #fff !important; }
#contact .contact-area {
  width: min(100%, 960px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  text-align: left;
}
#contact .contact-area dl { margin: 0; flex: 1 1 320px; }
#contact .contact-area dt { font-size: 1.15rem; font-weight: 700; line-height: 1.7; }
#contact .contact-btn { display: inline-block; margin: 0 !important; }
#contact .contact-btn .btn04 { margin: 0; white-space: nowrap; }
#contact .contact-btn + .contact-btn .btn04 { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .6) !important; }
#contact .contact-btn + .contact-btn .btn04:hover { background: rgba(255, 255, 255, .1) !important; }
@media screen and (max-width: 768px) {   /* スマホではボタンを中央にそろえる */
  #contact .contact-area { flex-direction: column; justify-content: center; gap: 16px; padding: 36px 22px; }
  #contact .contact-area dl { flex: none; width: 100%; text-align: center; margin-bottom: 8px; }
  #contact .contact-btn { display: flex; justify-content: center; width: 100%; }
  #contact .contact-btn .btn04 { min-width: 240px; text-align: center; }
}

#page-top a {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--m-accent);
  font-family: var(--m-en);
  font-size: .75rem;
  box-shadow: 0 8px 20px rgba(47, 43, 134, .3);
}

/* ---------- 下層ページ（お問い合わせ・お知らせ等）：本文を読みやすく ---------- */
.SinglePage .single-container,
.SinglePage article,
#single article,
.main--category .container-s {
  background: var(--m-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--m-radius);
}

@media (prefers-reduced-motion: reduce) {
  #header.site-header, #header .sh-logo img { transition: none; }
}

/* ****************************** */
/* トップ：メインビジュアル（正方形の枠＋創業年＋明朝のキャッチ） */
/* ****************************** */
#top-main02.mv {             /* スクロールの長さ＝枠が広がるまでの距離 */
  position: relative;
  height: 240vh;
  background: #080a1f;
  color: #fff;
}
.mv-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 60% 40%, #1c1f52 0%, #0f1130 55%, #080a1f 100%);
  --fx: 60%;
  --fy: 50%;
  --fw: min(70vh, 46vw);
  --fh: min(70vh, 46vw);
  --fr: 4px;
}
.mv-frame {
  position: absolute;
  top: var(--fy);
  left: var(--fx);
  width: var(--fw);
  height: var(--fh);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: var(--fr);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
  clip-path: inset(50% 50% 50% 50%);
  transition: clip-path 1.4s cubic-bezier(.7, 0, .2, 1);
}
.mv.is-in .mv-frame { clip-path: inset(0 0 0 0); }
.mv #video-area { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.mv #video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  min-width: 0; min-height: 0;
  transform: scale(1.18);
  object-fit: cover;
  transition: transform 2.4s cubic-bezier(.2, .7, .2, 1);
}
.mv.is-in #video { transform: scale(1); }
.mv-year {
  position: absolute;
  z-index: 1;
  top: var(--fy);
  left: var(--fx);
  transform: translate(-50%, -54%);
  margin: 0;
  font-family: var(--m-en);
  font-weight: 800;
  font-size: clamp(6rem, 21vw, 19rem);
  line-height: 1;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  mix-blend-mode: difference;   /* 後ろの映像の色を反転して見せる */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s .9s;
}
.mv.is-in .mv-year { opacity: .92; }
.mv-year span { display: inline-block; transition: opacity .35s, transform .35s; }
.mv-year span.is-swap { opacity: 0; transform: translateY(12%); }   /* 年号→Future の切り替え */
.mv-year span.is-future { letter-spacing: -.04em; }
.mv-side {
  position: absolute;
  left: clamp(14px, 2.4vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--m-en);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.mv-copy {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 7vw, 120px);
  bottom: 11%;
}
.mv-en {
  margin: 0 0 18px;
  font-family: var(--m-en);
  font-weight: 600;
  font-size: clamp(.85rem, 1.2vw, 1.05rem);
  letter-spacing: .14em;
  color: #c9c7f5;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s 1.2s, transform .8s 1.2s;
}
.mv.is-in .mv-en { opacity: 1; transform: none; }
#top-main02 .mv-title {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 4.4rem);
  line-height: 1.45;
  letter-spacing: .12em;
  color: #fff;
  text-transform: none;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
.mv-title .ch {               /* 1文字ずつ下から浮かび上がる（JSで分割） */
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(4deg);
  filter: blur(6px);
  transition: opacity .7s, transform .9s cubic-bezier(.2, .7, .2, 1), filter .7s;
}
.mv.is-in .mv-title .ch { opacity: 1; transform: none; filter: none; }
.mv .hero-scroll { left: 50%; right: auto; transform: translateX(-50%); }
@media screen and (max-width: 768px) {
  #top-main02.mv { height: 210vh; }
  .mv-stage { --fx: 50%; --fy: 42%; --fw: 78vw; --fh: 78vw; }
  .mv-year { font-size: 26vw; }
  .mv-side { display: none; }
  .mv-copy { left: 7vw; right: 7vw; bottom: 7%; }
}
/* JSが動かない・動きを減らす設定のときは最初から表示 */
.no-js .mv-frame, .mv.is-static .mv-frame { clip-path: none; transition: none; }
.mv.is-static #video, .mv.is-static .mv-title .ch { transform: none; transition: none; }
.mv.is-static .mv-year, .mv.is-static .mv-en, .mv.is-static .mv-title .ch { opacity: 1; filter: none; transition: none; }
.mv.is-static .mv-year { opacity: .92; }
#top-main02.mv.is-static { height: auto; }
.mv.is-static .mv-stage { position: relative; }
.mv-copy, .mv .hero-scroll { will-change: opacity, transform; }

/* ****************************** */
/* セクションごとの背景パネル（色を変えて変化をつける）＋粘土アニメ */
/* ****************************** */
.sec {
  position: relative;
  isolation: isolate;
  margin: 0 0 24px !important;
  padding: 120px 0 !important;
  --sec-bg: #fff;
}
.sec::before {               /* 画面いっぱいの角丸パネル */
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw + 16px);
  right: calc(50% - 50vw + 16px);
  border-radius: 32px;
  background: var(--sec-bg);
}
/* 隣り合うセクションが同系色にならないよう、寒色・暖色・紺を交互に */
.sec-vision  { --sec-bg: #e4edf9; }   /* 水色 */
.sec-service { --sec-bg: #f6f1e7; }   /* 生成り */
.sec-about   { --sec-bg: #0f1130; }   /* 紺 */
.sec-history { --sec-bg: #ece6f5; }   /* 薄紫 */

/* セクションに到達したら、パネルの色がふわっと浮かび上がる（JSが .sec-anim を付けたときだけ） */
.sec-anim .sec::before,
.sec-anim .news::before {
  opacity: 0;
  transform: scale(.96);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.sec-anim .sec.is-shown::before,
.sec-anim .news.is-shown::before { opacity: 1; transform: none; }
.sec-anim .sec-bg { opacity: 0; transition: opacity 1.4s ease .3s; }
.sec-anim .sec.is-shown .sec-bg { opacity: 1; }
.sec-anim .sec-about > :not(.sec-bg) { opacity: 0; transition: opacity .9s ease .25s; }  /* 紺のパネルは白文字なので一緒に出す */
.sec-anim .sec-about.is-shown > :not(.sec-bg) { opacity: 1; }
.sec-bg {                    /* 粘土アニメ：パネルの片側に、ふちをぼかして薄く */
  position: absolute;
  z-index: -1;
  top: 50%;
  width: min(56vw, 680px);
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 100%);
}
.sec-bg--left  { left: calc(50% - 50vw); }    /* 画面の外にはみ出さない（はみ出すとスマホで横に揺れる） */
.sec-bg--right { right: calc(50% - 50vw); }
#container { overflow-x: clip; }               /* 念のため、本文エリアの横はみ出しを切る */
.sec-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  mix-blend-mode: multiply;
}
.sec-about .sec-bg video { opacity: .3; mix-blend-mode: normal; }
.sec-history .sec-bg { top: auto; bottom: -60px; transform: none; }
.sec-history .sec-bg video { opacity: .32; }
#service .service-area:last-of-type { margin-bottom: 140px; }

/* 会社概要：紺のパネルに白い文字 */
.sec-about h2 { color: #c9c7f5 !important; }
#about.sec-about h2::before { color: #fff; }
#about.sec-about .about-list {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
#about.sec-about .about-list li { border-bottom-color: rgba(255, 255, 255, .12); }
#about.sec-about .about-list dt { color: #c9c7f5; }
#about.sec-about .about-list dd { color: #fff; }
#about.sec-about .about-list a, #about.sec-about .about-list a u { color: #c9c7f5 !important; }

@media screen and (max-width: 768px) {
  .sec { padding: 80px 0 !important; }
  .sec::before { left: calc(50% - 50vw + 8px); right: calc(50% - 50vw + 8px); border-radius: 22px; }
  .sec-bg { width: 90vw; top: 0; transform: none; }
  .sec-bg video { opacity: .35; }
}

/* ****************************** */
/* お知らせ：左に縦書きラベルと送りボタン、右に横スライドのカード（点線で区切る） */
/* ****************************** */
.news {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  margin: 0 0 24px;
  padding: 40px 0;
  --news-line: 1.5px dashed #9aa6cc;
}
.news::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw + 16px);
  border-radius: 32px;
  background: #fbfaf4;
}
.news-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 72px 0;
  border-right: var(--news-line);
}
.news::after {                       /* 上下の点線 */
  content: "";
  position: absolute;
  inset: 40px calc(50% - 50vw + 16px);
  border-top: var(--news-line);
  border-bottom: var(--news-line);
  pointer-events: none;
}
.news-track::after { content: ""; flex: 0 0 1px; }
#main-area .news-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--m-en);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-text);
}
.news-label-ja { font-family: var(--m-jp); font-size: .8rem; font-weight: 500; letter-spacing: .3em; color: var(--m-mute); }
.news-nav { display: flex; flex-direction: column; gap: 18px; }
.news-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--m-text);
  border-radius: 50%;
  background: transparent;
  color: var(--m-text);
  font-family: var(--m-en);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background .2s, color .2s, opacity .2s;
}
.news-arrow:hover { background: var(--m-text); color: #fbfaf4; }
.news-arrow:disabled { opacity: .25; cursor: default; background: transparent; color: var(--m-text); }
.news-all { font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--m-accent) !important; text-decoration: underline; text-underline-offset: 4px; }
.news-track {
  display: flex;
  margin-right: calc(50% - 50vw + 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.news-track::-webkit-scrollbar { display: none; }
.news-item {
  flex: 0 0 clamp(300px, 33vw, 460px);
  display: flex;
  flex-direction: column;
  padding: 72px 52px 64px;
  border-right: var(--news-line);
  scroll-snap-align: start;
}
.news-thumb { display: block; aspect-ratio: 5 / 3; overflow: hidden; background: var(--m-accent-soft); }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.news-item:hover .news-thumb img { transform: scale(1.04); }
.news-noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: var(--m-en); font-weight: 800; letter-spacing: .3em; color: rgba(47, 43, 134, .25); }
.news-meta { display: flex; gap: 12px; margin: 26px 0 10px; font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: #3d6fb6; }
.news-meta time { font-family: var(--m-en); }
#main-area .news-name {
  margin: 0 0 16px;
  font-family: var(--m-jp);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.6;
  letter-spacing: .06em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-name a { color: var(--m-text) !important; }
.news-excerpt {
  margin: 0 0 28px;
  font-size: .9rem;
  line-height: 2;
  letter-spacing: .04em;
  color: var(--m-sub);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: auto;
  border: 2px solid var(--m-text);
  border-radius: 10px;
  color: var(--m-text) !important;
  font-family: var(--m-en);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  transition: background .2s, color .2s;
}
.news-more span { padding: 14px 26px; }
.news-more i { font-style: normal; padding: 0 22px; border-left: 1.5px solid currentColor; line-height: 1.4; transition: transform .2s; }
.news-more:hover { background: var(--m-text); color: #fbfaf4 !important; }
.news-more:hover i { transform: translateX(3px); }
@media screen and (max-width: 768px) {
  .news { grid-template-columns: 1fr; }
  .news::before { inset: 0 calc(50% - 50vw + 8px); border-radius: 22px; }
  .news { padding: 0; }
  .news::after { display: none; }
  .news-rail { flex-direction: row; padding: 48px 0 20px; border-right: 0; border-bottom: var(--news-line); }
  #main-area .news-label { writing-mode: horizontal-tb; font-size: 1.6rem; }
  .news-nav { flex-direction: row; gap: 10px; }
  .news-arrow { width: 46px; height: 46px; font-size: 1.1rem; }
  .news-all { display: none; }
  .news-track { margin-right: calc(50% - 50vw + 8px); }
  .news-item { flex-basis: 80vw; padding: 32px 22px 40px; }
}

/* ****************************** */
/* フッター */
/* ****************************** */
#footer {
  position: relative;
  padding: 88px 0 0;
  border-top: 0;
  background: var(--m-navy);
  color: #c9cad8;
  text-align: left;
  text-transform: none;
  overflow: hidden;
}
.ft { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px); }
.ft-top { display: grid; grid-template-columns: 1.4fr .9fr 1.1fr; gap: 48px; }
.ft-logo { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; margin-bottom: 28px; }
.ft-logo img { width: 44px; height: auto; }
.ft-logo > span { display: flex; flex-direction: column; gap: 4px; }
.ft-ja { font-family: var(--m-jp); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em; }
.ft-en { font-family: var(--m-en); font-weight: 700; font-size: .62rem; letter-spacing: .28em; color: #8f8bf0; }
.ft-offices { margin: 0 0 20px; font-size: .85rem; line-height: 1.8; }
.ft-offices div { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; margin-bottom: 6px; }
.ft-offices dt { color: #fff; font-weight: 700; }
.ft-offices dd { margin: 0; }
.ft-tel { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ft-tel a { font-family: var(--m-en); font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; color: #fff !important; }
.ft-tel a span { font-size: .7rem; letter-spacing: .2em; margin-right: 8px; color: #8f8bf0; }
.ft-tel small { font-size: .75rem; }
.ft-label { margin: 0 0 14px; font-family: var(--m-en); font-weight: 700; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: #8f8bf0; }
.ft-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.ft-nav a { color: #e3e4f0 !important; font-size: .9rem; transition: color .2s; }
.ft-nav a:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; }
.ft-cta { display: flex; flex-direction: column; gap: 12px; }
.ft-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #615cee, #2f2b86);
  color: #fff !important;
  transition: transform .2s, box-shadow .2s;
}
.ft-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(97, 92, 238, .3); }
.ft-card-line { background: transparent; border: 1px solid rgba(255, 255, 255, .25); }
.ft-card-line:hover { box-shadow: none; background: rgba(255, 255, 255, .05); }
.ft-card-en { font-family: var(--m-en); font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.ft-card-ja { font-size: .82rem; color: rgba(255, 255, 255, .8); }
.ft-card-arrow { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-family: var(--m-en); font-size: 1.3rem; transition: transform .2s; }
.ft-card:hover .ft-card-arrow { transform: translate(4px, -50%); }
.ft-engage { margin: 4px 0 0; font-size: .78rem; }
.ft-engage a { color: #c9cad8 !important; text-decoration: underline; text-underline-offset: 3px; }
.ft-big {
  margin: 72px 0 0;
  font-family: var(--m-en);
  font-weight: 800;
  font-size: clamp(2.4rem, 9.2vw, 8.4rem);
  line-height: .8;
  letter-spacing: -.03em;
  white-space: nowrap;
  text-align: center;
  color: rgba(255, 255, 255, .06);
  user-select: none;
}
.ft-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .78rem;
}
.ft-bottom a, .ft-bottom small { color: #9fa1b8 !important; font-size: .78rem; }
@media screen and (max-width: 900px) {
  .ft-top { grid-template-columns: 1fr; gap: 36px; }
  #footer { padding-top: 64px; }
  .ft-big { margin-top: 48px; }
}