/*
Theme Name: BCS LP
Author: ビジネスコーチソリューションズ株式会社
Description: ビジネスコーチソリューションズ株式会社 ランディングページ用テーマ
Version: 1.8.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bcs-lp
*/

:root {
  --c-text: #2a2a2a;
  --c-bg: #fcfcfc;
  --c-bg-sub: #f6f6f4;
  --c-accent: #9a8a78;
  --c-border: rgba(0, 0, 0, 0.08);
  --font-en: 'Cormorant Garamond', serif;
  --font-ja: 'Noto Serif JP', serif;
  --font-sans: 'Montserrat', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-ja); color: var(--c-text); background-color: var(--c-bg); line-height: 2; font-size: 15px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
img { max-width: 100%; height: auto; display: block; }

/* アニメーション用クラス */
.js-fadeup { opacity: 0; transform: translateY(35px); transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1); }
.js-fadeup.is-active { opacity: 1; transform: translateY(0); }
.js-reveal-text { overflow: hidden; display: block; }
.js-reveal-text > span { display: block; transform: translateY(110%); transition: transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
.js-reveal-text.is-active > span { transform: translateY(0); }
.js-reveal-img { position: relative; overflow: hidden; }
.js-reveal-img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c-bg); transform-origin: top; transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1); z-index: 1; }
.js-reveal-img img { transform: scale(1.15); transition: transform 2s cubic-bezier(0.215, 0.61, 0.355, 1); }
.js-reveal-img.is-active::after { transform: scaleY(0); }
.js-reveal-img.is-active img { transform: scale(1); }

.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; position: relative; }

/* ヘッダー */
.header { position: fixed; top: 0; left: 0; width: 100%; padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: background 0.4s, padding 0.4s, border 0.4s; }
.header.is-scrolled { background: rgba(252, 252, 252, 0.95); backdrop-filter: blur(8px); padding: 14px 40px; border-bottom: 1px solid var(--c-border); }
.logo { display: block; flex-shrink: 0; line-height: 0; }
.logo-img { height: 40px; width: auto; max-width: none; transition: height 0.4s; }
.header.is-scrolled .logo-img { height: 32px; }
@media (max-width: 768px) {
  .header { padding: 16px 20px; }
  .header.is-scrolled { padding: 10px 20px; }
  .logo-img { height: 28px; }
  .header.is-scrolled .logo-img { height: 24px; }
}
.nav ul { display: flex; gap: 36px; list-style: none; }
.nav a { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; font-weight: 500; text-transform: uppercase; }

/* ヒーロー */
.hero { height: 100vh; position: relative; z-index: 0; isolation: isolate; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 15s linear infinite alternate; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(252,252,252,0.75) 0%, rgba(252,252,252,0.2) 100%); z-index: 0; }
@keyframes heroZoom { 0% { transform: scale(1.05); } 100% { transform: scale(1.15); } }
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 1100px; padding: 0 40px; text-align: center; }
.hero-title { font-size: 38px; font-weight: 300; line-height: 1.5; letter-spacing: 0.1em; margin-bottom: 30px; }
.hero-ja { font-size: 15px; font-weight: 300; letter-spacing: 0.08em; line-height: 2; }
.scroll-indicator { position: absolute; bottom: 40px; left: 40px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-text { font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.2em; writing-mode: vertical-rl; transform: rotate(180deg); }
.scroll-line { width: 1px; height: 60px; background: rgba(0,0,0,0.2); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--c-text); animation: scrollDown 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes scrollDown { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* セクション共通 */
.sec { padding: 130px 0; position: relative; }
.bg-title { position: absolute; top: 8%; left: -3%; font-family: var(--font-en); font-size: 16vw; font-weight: 200; color: rgba(0,0,0,0.02); line-height: 1; z-index: 0; white-space: nowrap; pointer-events: none; }
.sec-head { margin-bottom: 70px; position: relative; z-index: 1; }
.sec-en { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.25em; color: var(--c-accent); display: block; margin-bottom: 18px; font-weight: 500; }
.sec-ja { font-size: 32px; font-weight: 300; line-height: 1.5; letter-spacing: 0.05em; }

/* セクション境界の繊細な区切り線 */
.section-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.09) 30%, rgba(0,0,0,0.09) 70%, transparent);
  position: relative;
}

/* COMPANY */
.company-container { max-width: 1300px; margin: 0 auto; padding: 0 40px; position: relative; }
.company-wrap { display: flex; align-items: center; position: relative; z-index: 1; margin-top: 30px; }
.company-img { width: 68%; height: 440px; }
.company-img img { width: 100%; height: 100%; object-fit: cover; }
.company-text { width: 46%; background: var(--c-bg); padding: 50px 60px; margin-left: -14%; box-shadow: 0 25px 50px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); }
.company-lead { font-size: 20px; font-weight: 400; margin-bottom: 26px; line-height: 1.8; letter-spacing: 0.05em; }
.company-p { color: #555; font-size: 14px; line-height: 1.95; }

/* SOLUTIONS */
.sec-solutions { background-color: var(--c-bg-sub); }
.solutions-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; position: relative; }
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  position: relative;
  z-index: 1;
}
.sol-card {
  background: #ffffff;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.02);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s;
}
.sol-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.07);
  border-color: rgba(154, 138, 120, 0.4);
}
.sol-card-img {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
}
.sol-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.sol-card:hover .sol-card-img img {
  transform: scale(1.07);
}
.sol-card-body {
  padding: 38px 34px 34px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
}
.sol-card-num {
  font-family: var(--font-en);
  font-size: 34px;
  color: var(--c-accent);
  font-weight: 300;
  line-height: 1;
  position: absolute;
  top: 24px;
  right: 30px;
  opacity: 0.85;
}
.sol-card-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-right: 40px;
}
.sol-card-desc {
  font-size: 13.5px;
  color: #666;
  line-height: 1.85;
  margin-bottom: 28px;
  flex-grow: 1;
}
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-text);
  padding-bottom: 4px;
  font-weight: 500;
  width: fit-content;
  transition: gap 0.3s;
}
.btn-link:hover { gap: 20px; opacity: 1; }
.btn-link::after { content: '→'; font-family: sans-serif; }

/* CASE */
.sec-case { padding: 120px 0; background: var(--c-bg); }
.case-container { max-width: 900px; margin: 0 auto; padding: 0 40px; text-align: center; }
.coming-soon-box {
  border: 1px solid var(--c-border);
  padding: 60px 40px;
  background: #fafaf8;
  border-radius: 2px;
}
.coming-soon-title {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.coming-soon-sub {
  font-size: 13.5px;
  letter-spacing: 0.15em;
  color: #777;
}

/* CONTACT セクション */
.sec-contact {
  background: #f7f6f4;
  padding: 120px 0;
  border-top: 1px solid var(--c-border);
}
.contact-container { max-width: 860px; margin: 0 auto; padding: 0 40px; text-align: center; }
.contact-en { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.25em; color: var(--c-accent); display: block; margin-bottom: 16px; font-weight: 500; }
.contact-title { font-size: 32px; font-weight: 300; line-height: 1.5; margin-bottom: 24px; letter-spacing: 0.05em; }
.contact-lead { font-size: 14.5px; color: #555; line-height: 2; margin-bottom: 44px; }
.contact-actions { display: flex; justify-content: center; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 46px;
  background: var(--c-text);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--c-text);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: transparent;
  color: var(--c-text);
  opacity: 1;
}

/* 最下部フッター */
.site-footer {
  background: #1e1e1e;
  color: #d8d8d8;
  padding: 90px 0 40px;
  font-size: 13.5px;
  line-height: 1.85;
}
.footer-container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-company-info { max-width: 480px; }
.footer-corp-name { font-size: 17px; font-weight: 500; color: #fff; letter-spacing: 0.08em; margin-bottom: 6px; }
.footer-corp-en { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.15em; color: #888; margin-bottom: 22px; }
.footer-address { font-style: normal; color: #aaa; font-size: 13px; line-height: 1.9; }
.footer-nav { display: flex; gap: 60px; }
.footer-nav-col { min-width: 140px; }
.footer-nav-title {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 600;
}
.footer-nav-list { list-style: none; }
.footer-nav-list li { margin-bottom: 12px; }
.footer-nav-list a { color: #888; font-size: 13px; transition: color 0.3s; }
.footer-nav-list a:hover { color: #fff; opacity: 1; }
.footer-bottom {
  padding-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-legal-links { display: flex; gap: 24px; list-style: none; }
.footer-legal-links a { color: #666; font-size: 12px; }
.footer-legal-links a:hover { color: #999; }
.footer-copy {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #666;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .solutions-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .company-wrap { flex-direction: column; }
  .company-img { width: 100%; height: 350px; }
  .company-text { width: 100%; margin-left: 0; margin-top: -30px; padding: 40px 30px; }
}
@media (max-width: 768px) {
  .solutions-grid { grid-template-columns: 1fr; }
  .footer-main { flex-direction: column; gap: 40px; }
  .footer-nav { flex-wrap: wrap; gap: 40px; }
  .hero-title { font-size: 28px; }
  .sec-ja { font-size: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== WordPress用の追加 ===== */
/* ログイン中の管理バーとヘッダーが重ならないようにする */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
/* トップページ以外（固定ページ・投稿）の本文エリア */
.page-main { max-width: 900px; margin: 0 auto; padding: 160px 40px 120px; }
.page-main .entry-title { font-size: 28px; font-weight: 400; margin-bottom: 40px; letter-spacing: 0.05em; }
.page-main .entry-content > * + * { margin-top: 1.5em; }

/* 各セクションから下層ページへのリンク */
.sec-link { margin-top: 32px; }
.sec-more { position: relative; z-index: 1; text-align: center; margin-top: 64px; }

/* 見出しラベルの前に短いライン */
.sec-en, .contact-en { display: flex; align-items: center; gap: 14px; }
.sec-en::before, .contact-en::before { content: ''; width: 32px; height: 1px; background: var(--c-accent); }
.contact-en { justify-content: center; }

/* ===== 下層ページ共通（COMPANYなど） ===== */
.page-hero { background: var(--c-bg-sub); padding: 200px 40px 100px; }
.page-hero-inner { max-width: 1100px; margin: 0 auto; }
.page-hero-title { font-size: 40px; font-weight: 300; letter-spacing: 0.1em; line-height: 1.4; margin-bottom: 20px; }
.page-hero-lead { font-size: 15px; color: #555; letter-spacing: 0.05em; }

.sub-sec { padding: 110px 0; background: var(--c-bg); }
.sub-sec-gray { background: var(--c-bg-sub); }
.sub-container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.sub-grid { display: grid; grid-template-columns: 260px 1fr; gap: 60px; }
.sub-title { font-size: 26px; font-weight: 400; letter-spacing: 0.06em; line-height: 1.5; }
.sub-body p { font-size: 15px; color: #444; line-height: 2.1; }
.sub-body p + p { margin-top: 1.4em; }
.sub-body .sub-lead { font-size: 22px; color: var(--c-text); line-height: 1.8; margin-bottom: 1.6em; letter-spacing: 0.04em; }

.outline-list { border-top: 1px solid var(--c-text); }
.outline-row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.outline-row dt { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; }
.outline-row dd { font-size: 15px; color: #444; line-height: 1.9; }
.outline-en { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.1em; color: #888; }

.access-map { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #e5e5e5; }
.access-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.access-address { margin-top: 20px; font-size: 14px; }

@media (max-width: 768px) {
  .page-hero { padding: 140px 20px 70px; }
  .page-hero-title { font-size: 30px; }
  .sub-sec { padding: 80px 0; }
  .sub-container { padding: 0 20px; }
  .sub-grid { grid-template-columns: 1fr; gap: 30px; }
  .sub-body .sub-lead { font-size: 19px; }
  .outline-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
}

/* ===== SOLUTIONSページ ===== */
.process-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--c-text); }
.process-item { padding: 28px 24px 8px 0; display: flex; flex-direction: column; gap: 6px; }
.process-item + .process-item { padding-left: 24px; border-left: 1px solid rgba(0, 0, 0, 0.12); }
.process-num { font-family: var(--font-en); font-size: 30px; color: var(--c-accent); line-height: 1; }
.process-name { font-size: 17px; font-weight: 500; letter-spacing: 0.05em; }
.process-desc { font-size: 13px; color: #777; }

.sol-detail { display: flex; align-items: center; gap: 70px; }
.sol-detail-reverse { flex-direction: row-reverse; }
.sol-detail-img { width: 52%; height: 380px; flex-shrink: 0; }
.sol-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.sol-detail-text { position: relative; }
.sol-detail-num { display: block; font-family: var(--font-en); font-size: 56px; font-weight: 300; color: var(--c-accent); line-height: 1; margin-bottom: 20px; }
.sol-detail-text .sub-title { margin-bottom: 24px; }
.sol-detail-text p { font-size: 15px; color: #444; line-height: 2.1; }
.sub-sec-gray .js-reveal-img::after { background-color: var(--c-bg-sub); }

/* ===== CONTACTページ ===== */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select { width: 100%; padding: 14px 16px; border: 1px solid rgba(0, 0, 0, 0.2); background: #fff; font-family: inherit; font-size: 15px; border-radius: 0; }
.contact-form textarea { min-height: 200px; }
.contact-form label { display: block; font-size: 14px; font-weight: 500; }
.contact-form p + p { margin-top: 1.4em; }
.contact-form input[type="submit"] { padding: 18px 60px; background: var(--c-text); color: #fff; border: 1px solid var(--c-text); font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.2em; cursor: pointer; transition: all 0.3s; }
.contact-form input[type="submit"]:hover { background: transparent; color: var(--c-text); }
.contact-form-empty { padding: 40px; background: #f6f6f4; text-align: center; }
.contact-tel { font-family: var(--font-sans); font-size: 34px; font-weight: 300; letter-spacing: 0.08em; display: inline-block; margin-bottom: 16px; }

@media (max-width: 768px) {
  .process-list { grid-template-columns: 1fr; }
  .process-item, .process-item + .process-item { padding: 20px 0; border-left: none; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
  .sol-detail, .sol-detail-reverse { flex-direction: column; gap: 30px; }
  .sol-detail-img { width: 100%; height: 260px; }
  .contact-tel { font-size: 28px; }
}

/* ======================================================
   アニメーション（デザインは変えずに動きを上質に）
   ====================================================== */

/* ---- オープニング・ページ切り替え：縦に分かれたパネル ---- */
/* ページの読み込み中は背景を濃いグレーに（header.phpで指定）→ 表示後に通常の色へ */
html.is-ready { background: var(--c-bg); }
/* 読み込み直後は濃いグレーで覆っておく（チラつき防止） */
body::after { content: ''; position: fixed; inset: 0; background: #1e1e1e; z-index: 9999; pointer-events: none; animation: coverFallback 0.8s ease 3s both; }
@keyframes coverFallback { to { opacity: 0; visibility: hidden; } }
body.has-transition::after { animation: none; opacity: 0; visibility: hidden; }

/* パネル（JavaScriptで作成） */
.page-transition { position: fixed; inset: 0; z-index: 9999; display: flex; pointer-events: none; }
.page-transition-col { position: relative; flex: 1; height: 100%; background: #1e1e1e; transform: translateY(0); transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); }
.page-transition-col:nth-child(even) { background: #232323; }
/* パネルの先端に走るアクセントライン */
.page-transition-col::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.page-transition.is-open .page-transition-col { transform: translateY(-101%); }
.page-transition.is-open .page-transition-col::after { transform: scaleX(1); }
/* 移動するとき：下から順に閉じる */
.page-transition.is-closing .page-transition-col { transition: none; transform: translateY(101%); }
.page-transition.is-closing.is-cover .page-transition-col { transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1); transform: translateY(0); }
.page-transition.is-closing .page-transition-col::after { top: 0; bottom: auto; transform: scaleX(1); }
/* 中央の社名 */
.page-transition-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-en); font-size: 14px; letter-spacing: 0.5em; color: rgba(255, 255, 255, 0.55); white-space: nowrap; transition: opacity 0.4s; }
.page-transition.is-open .page-transition-name,
.page-transition.is-first .page-transition-name { opacity: 0; }
.page-transition.is-closing .page-transition-name { opacity: 0; }
.page-transition.is-closing.is-cover .page-transition-name { opacity: 1; transition: opacity 0.4s 0.4s; }

/* 直接開いたときに表示するローディング（社名とカウンター） */
.loader { position: fixed; inset: 0; z-index: 10001; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; color: #fff; pointer-events: none; transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); }
.loader.is-done { opacity: 0; transform: translateY(-30px); }
.loader-name { font-family: var(--font-en); font-size: 26px; font-weight: 300; letter-spacing: 0.35em; padding-left: 0.35em; white-space: nowrap; }
.loader-name span { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px); animation: loaderChar 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes loaderChar { to { opacity: 1; transform: none; filter: blur(0); } }
.loader-bar { width: 180px; height: 1px; background: rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; }
.loader-bar i { position: absolute; inset: 0; background: var(--c-accent); transform: scaleX(0); transform-origin: left; }
.loader-count { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .loader-name { font-size: 16px; letter-spacing: 0.25em; } }

/* ---- フィルムのような粒子感（ごく薄く） ---- */
html::after { content: ''; position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 9000; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); }
}

/* ---- なめらかなスクロール（Lenis使用時） ---- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }

/* ---- 表示アニメーションの動きをなめらかに ---- */
.js-fadeup { transform: translateY(28px); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

/* 見出し：少し傾いた状態から、行ごとに起き上がって現れる */
.js-reveal-text > span { transform: translateY(115%) rotate(4deg); transform-origin: left top; transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1); }
.js-reveal-text.is-active > span { transform: translateY(0) rotate(0); }

/* トップの大見出し：1文字ずつ、ぼかしから浮かび上がる */
.hero-title .js-reveal-text > span { transform: none; }
.hero-title .char { display: inline-block; opacity: 0; transform: translateY(0.6em); filter: blur(10px); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 1s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-title .is-active .char { opacity: 1; transform: none; filter: blur(0); }

/* 英字の小見出し：1文字ずつタイプするように現れる */
.label-inner { display: inline-block; }
.label-char { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.is-active .label-char, .is-active > .label-inner .label-char { opacity: 1; transform: none; }

/* 写真：下から上へ切り抜かれるように現れ、ゆっくり引いていく */
.js-reveal-img { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s cubic-bezier(0.76, 0, 0.24, 1); }
.js-reveal-img.is-active { clip-path: inset(0 0 0 0); }
.js-reveal-img::after { display: none; }
.js-reveal-img .parallax-inner { display: block; width: 100%; height: 100%; will-change: transform; }
.js-reveal-img img { transform: scale(1.35); transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1); }
.js-reveal-img.is-active img { transform: scale(1.15); }
.sol-detail-img.is-active:hover img,
.company-img.is-active:hover img { transform: scale(1.22); }

/* ---- カーソル（パソコンのみ） ---- */
/* 標準の矢印を隠す（入力欄や地図の上では標準のカーソルに戻す） */
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor iframe { cursor: auto !important; }
/* 中心の小さな点：マウスにぴったり付いてくる（背景に合わせて色が反転） */
.cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; mix-blend-mode: difference; z-index: 10003; pointer-events: none; will-change: transform; }
.cursor-dot-inner { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
/* 外側の円：少し遅れてなめらかに追いかける */
.cursor-ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 10002; pointer-events: none; will-change: transform; }
.cursor-ring-inner { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c-accent); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s, border-color 0.4s; }
/* リンクの上：円が広がり、うっすら色がつく */
.cursor-ring.is-link .cursor-ring-inner { transform: scale(1.6); background: rgba(154, 138, 120, 0.12); border-color: rgba(154, 138, 120, 0.5); }
.cursor-dot.is-link .cursor-dot-inner { transform: scale(0.5); }
/* クリックした瞬間：きゅっと縮む */
.cursor-ring.is-down .cursor-ring-inner { transform: scale(0.75); }
.cursor-ring.is-link.is-down .cursor-ring-inner { transform: scale(1.3); }
/* 画面の外・入力欄・地図の上では隠す */
.cursor-dot, .cursor-ring { transition: opacity 0.3s; }
.cursor-dot.is-hidden, .cursor-ring.is-hidden { opacity: 0; }

/* ---- スクロール進捗バー ---- */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; z-index: 200; pointer-events: none; }
.admin-bar .scroll-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .scroll-progress { top: 46px; } }

/* ---- ヘッダー：下スクロールで隠れ、上スクロールで現れる ---- */
.header { transition: background 0.4s, padding 0.4s, border 0.4s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.header.is-hidden { transform: translateY(-100%); }

/* メニュー：ホバーで下線が伸びる */
.nav a { position: relative; display: inline-block; padding-bottom: 4px; }
.nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- トップ画像・背景文字のパララックス用 ---- */
.hero-bg, .hero-content, .bg-title { will-change: transform; }

/* 小見出しの短いライン：表示時に伸びる */
.sec-en::before, .contact-en::before { transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; }
.sec-en.js-fadeup:not(.is-active)::before,
.contact-en.js-fadeup:not(.is-active)::before,
.js-fadeup:not(.is-active) .sec-en::before { width: 0; }

/* ---- テキストリンク（View Moreなど）：ホバーで下線が引き直される ---- */
.btn-link { border-bottom: none; padding-bottom: 5px; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px; }
.btn-link:hover { animation: linkLine 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes linkLine {
  0%   { background-size: 100% 1px; background-position: right bottom; }
  45%  { background-size: 0 1px;    background-position: right bottom; }
  46%  { background-size: 0 1px;    background-position: left bottom; }
  100% { background-size: 100% 1px; background-position: left bottom; }
}
.btn-link::after { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-link:hover::after { transform: translateX(4px); }

/* ---- お問い合わせボタン：背景が左からスライド＋カーソルに吸い寄せられる ---- */
.btn-primary { position: relative; overflow: hidden; z-index: 0; transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--c-bg); transform: scaleX(0); transform-origin: right; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; }
.btn-primary:hover { background: var(--c-text); color: var(--c-text); }
.btn-primary:hover::before { transform: scaleX(1); transform-origin: left; }

/* ---- サービスカード：カーソルに合わせて立体的に傾き、光が走る ---- */
.sol-card { position: relative; transform-style: preserve-3d; transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s; }
.sol-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 40%); opacity: 0; transition: opacity 0.5s; z-index: 2; }
.sol-card:hover::after { opacity: 1; }

/* フッターのリンク：ホバーで少し右へ */
.footer-nav-list a { display: inline-block; transition: color 0.3s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.footer-nav-list a:hover { transform: translateX(4px); }

/* ---- 動きを減らす設定の端末ではアニメーションを止める ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  body::after, html::after, .loader, .page-transition, .cursor-dot, .cursor-ring { display: none !important; }
  .js-fadeup, .js-reveal-text > span, .js-reveal-img img, .hero-title .char, .label-char { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js-reveal-img { clip-path: none !important; }
  html { background: var(--c-bg) !important; }
}