@charset "UTF-8";
/*!
 * cc Motion Layer
 * コーポレート／BtoBサイト用のモーション定義。
 *
 * 設計方針
 * ・強度はすべてCSS変数（--cc-motion-*）で制御し、スキン側で上書きする。
 *   JavaScript側も同じ変数を読むため、CSSを書き換えるだけで
 *   演出の距離・速度・スタッガーが一括で変わる。
 * ・JSが動く環境でのみ初期状態を隠す（html.cc-motion-js）。
 *   JS無効・エラー時は html.cc-motion-off が付き、必ず表示される。
 * ・prefers-reduced-motion: reduce では全モーションを無効化する。
 */

/* ============================================================
   1. モーショントークン（既定＝中間の強度）
   ============================================================ */
:root {
  /* 0=停止 / 1=控えめ / 2=標準 / 3=表現的 */
  --cc-motion-level: 2;

  --cc-motion-dur: 820ms;        /* 標準の再生時間 */
  --cc-motion-dur-lg: 1120ms;    /* 大きい要素（ヒーロー画像など） */
  --cc-motion-stagger: 88ms;     /* 連続要素の遅延間隔 */
  --cc-motion-distance: 26px;    /* 移動距離 */
  --cc-motion-scale: .96;        /* zoom系の開始スケール */
  --cc-motion-blur: 0px;         /* blur-in のぼかし量 */
  --cc-motion-parallax: 1;       /* パララックス係数の倍率 */
  --cc-motion-line-shift: 105%;  /* 行マスクの初期オフセット */

  /* イージング */
  --cc-motion-ease: cubic-bezier(.16, 1, .3, 1);          /* expo out：上品な減速 */
  --cc-motion-ease-soft: cubic-bezier(.22, .61, .36, 1);  /* やわらかい減速 */
  --cc-motion-ease-inout: cubic-bezier(.65, .05, .36, 1);
}

/* ============================================================
   2. 初期状態（JSが有効なときだけ隠す）
   ============================================================ */
html.cc-motion-js [data-cc-anim]:not(.cc-in),
html.cc-motion-js .cc-anim:not(.cc-in),
html.cc-motion-js .cc-reveal:not(.cc-in) {
  opacity: 0;
  will-change: opacity, transform;
}

html.cc-motion-js .cc-anim--fade-up:not(.cc-in),
html.cc-motion-js .cc-reveal:not(.cc-in),
html.cc-motion-js [data-cc-anim="fade-up"]:not(.cc-in) {
  transform: translate3d(0, var(--cc-motion-distance), 0);
}

html.cc-motion-js .cc-anim--fade-down:not(.cc-in),
html.cc-motion-js [data-cc-anim="fade-down"]:not(.cc-in) {
  transform: translate3d(0, calc(var(--cc-motion-distance) * -1), 0);
}

html.cc-motion-js .cc-anim--fade-left:not(.cc-in),
html.cc-motion-js [data-cc-anim="fade-left"]:not(.cc-in) {
  transform: translate3d(calc(var(--cc-motion-distance) * -1.4), 0, 0);
}

html.cc-motion-js .cc-anim--fade-right:not(.cc-in),
html.cc-motion-js [data-cc-anim="fade-right"]:not(.cc-in) {
  transform: translate3d(calc(var(--cc-motion-distance) * 1.4), 0, 0);
}

html.cc-motion-js .cc-anim--rise:not(.cc-in),
html.cc-motion-js [data-cc-anim="rise"]:not(.cc-in) {
  transform: translate3d(0, var(--cc-motion-distance), 0) scale(.985);
}

html.cc-motion-js .cc-anim--zoom:not(.cc-in),
html.cc-motion-js [data-cc-anim="zoom"]:not(.cc-in) {
  transform: scale(var(--cc-motion-scale));
}

html.cc-motion-js .cc-anim--blur:not(.cc-in),
html.cc-motion-js [data-cc-anim="blur"]:not(.cc-in) {
  transform: translate3d(0, calc(var(--cc-motion-distance) * .6), 0);
  filter: blur(max(var(--cc-motion-blur), 6px));
}

/* 画像のワイプ表示（クリップは opacity を落とさない方が上品）
   ※ 要素自体を拡大すると親のボックスをはみ出して横スクロールの原因になるため、
     拡大は行わずクリップのみで見せる。奥行きはパララックス側の拡大で補う。 */
html.cc-motion-js .cc-anim--clip-up:not(.cc-in),
html.cc-motion-js [data-cc-anim="clip-up"]:not(.cc-in) {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
}

html.cc-motion-js .cc-anim--clip-left:not(.cc-in),
html.cc-motion-js [data-cc-anim="clip-left"]:not(.cc-in) {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}

/* 表示後 */
.cc-anim.cc-in,
.cc-reveal.cc-in,
[data-cc-anim].cc-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* アニメーション終了後は will-change を解放 */
.cc-anim.cc-done,
.cc-reveal.cc-done,
[data-cc-anim].cc-done {
  will-change: auto;
}

/* JSが動かなかった場合のフェイルセーフ */
html.cc-motion-off [data-cc-anim],
html.cc-motion-off .cc-anim,
html.cc-motion-off .cc-reveal,
html.cc-motion-off .cc-line__in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* ============================================================
   3. 遅延ユーティリティ
   ============================================================ */
.cc-anim--d1 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 1); }
.cc-anim--d2 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 2); }
.cc-anim--d3 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 3); }
.cc-anim--d4 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 4); }
.cc-anim--d5 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 5); }

/* 旧クラス名との互換 */
.cc-reveal--d1 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 1); }
.cc-reveal--d2 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 2); }
.cc-reveal--d3 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 3); }
.cc-reveal--d4 { --cc-anim-delay: calc(var(--cc-motion-stagger) * 4); }

/* ============================================================
   4. 見出しの行マスク（スプリットテキスト）
   JSが元のテキストを行単位に再構成して生成する。
   ============================================================ */
.cc-split-ready {
  /* 行組みはJSが確定させるため、折り返しの再計算を防ぐ */
  text-wrap: initial;
}

.cc-line {
  display: block;
  overflow: hidden;
  /* ディセンダ（gやjの下端）が切れないよう下に余白を持たせる */
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.cc-line__in {
  display: block;
  white-space: nowrap;
  transform-origin: 0 100%;
}

html.cc-motion-js .cc-split-ready .cc-line__in {
  opacity: 0;
  transform: translate3d(0, var(--cc-motion-line-shift), 0);
  will-change: opacity, transform;
}

html.cc-motion-js .cc-split-ready.cc-in .cc-line__in {
  opacity: 1;
  transform: none;
}

/* 文字単位 */
.cc-char {
  display: inline-block;
  will-change: opacity, transform;
}

html.cc-motion-js .cc-split-chars:not(.cc-in) .cc-char {
  opacity: 0;
  transform: translate3d(0, .42em, 0);
}

/* ============================================================
   5. パララックス
   ============================================================ */
.cc-parallax {
  will-change: transform;
}

/* 段階指定（JSが係数として読む） */
.cc-parallax--sm { --cc-parallax-amount: .06; }
.cc-parallax--md { --cc-parallax-amount: .12; }
.cc-parallax--lg { --cc-parallax-amount: .2; }

/* ============================================================
   6. スクロール進捗バー（LPテンプレートで自動挿入）
   ============================================================ */
.cc-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: transparent;
}

.cc-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--cc-gradient, linear-gradient(90deg, #123a6b, #b8892f));
  will-change: transform;
}

.admin-bar .cc-progress {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .cc-progress { top: 46px; }
}

/* ============================================================
   7. ロゴのマーキー（無限スクロール）
   ============================================================ */
.cc-marquee {
  position: relative;
  overflow: hidden;
  /* 両端をフェードさせて切れ目を目立たせない */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.cc-marquee__track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  will-change: transform;
}

.cc-marquee__track > * {
  flex: none;
  width: 168px;
  margin: 0;
}

.cc-marquee:hover .cc-marquee__track {
  animation-play-state: paused;
}

@keyframes cc-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.cc-marquee--running .cc-marquee__track {
  animation: cc-marquee-scroll var(--cc-marquee-duration, 34s) linear infinite;
}

/* ============================================================
   8. マグネティックボタン / ホバー
   ============================================================ */
.cc-magnetic {
  transition: transform .5s var(--cc-motion-ease);
}

.cc-magnetic.is-pulling {
  transition: transform .12s linear;
}

/* ボタンの光沢スイープ（レベル3のスキンのみ有効化される） */
.cc-btn,
.cc-btns .wp-block-button__link,
.cc-hero__btns .wp-block-button__link,
.cc-cta__btns .wp-block-button__link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cc-btn::after,
.cc-btns .wp-block-button__link::after,
.cc-hero__btns .wp-block-button__link::after,
.cc-cta__btns .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: opacity .2s linear;
}

html.cc-motion-shine .cc-btn:hover::after,
html.cc-motion-shine .cc-btns .wp-block-button__link:hover::after,
html.cc-motion-shine .cc-hero__btns .wp-block-button__link:hover::after,
html.cc-motion-shine .cc-cta__btns .wp-block-button__link:hover::after {
  opacity: 1;
  animation: cc-btn-shine .9s var(--cc-motion-ease-soft);
}

@keyframes cc-btn-shine {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}

/* ============================================================
   9. カードのポインタ追従ハイライト（レベル3）
   ============================================================ */
html.cc-motion-spotlight .cc-card,
html.cc-motion-spotlight .cc-plan,
html.cc-motion-spotlight .cc-voice {
  --cc-spot-x: 50%;
  --cc-spot-y: 0%;
  --cc-spot-opacity: 0;
  position: relative;
}

html.cc-motion-spotlight .cc-card::before,
html.cc-motion-spotlight .cc-plan::before,
html.cc-motion-spotlight .cc-voice::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--cc-spot-opacity);
  transition: opacity .45s var(--cc-motion-ease-soft);
  background: radial-gradient(320px 320px at var(--cc-spot-x) var(--cc-spot-y),
              color-mix(in srgb, var(--cc-primary) 22%, transparent) 0%,
              transparent 68%);
}

/* ============================================================
   10. ステップの進行ライン（導入の流れ）
   ============================================================ */
.cc-steps {
  position: relative;
}

.cc-steps__line {
  position: absolute;
  top: 44px;
  left: 6%;
  right: 6%;
  height: 2px;
  z-index: 0;
  background: var(--cc-border);
  overflow: hidden;
}

.cc-steps__line::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--cc-steps-progress, 0));
  transform-origin: 0 50%;
  background: var(--cc-gradient);
  transition: transform .2s linear;
}

.cc-steps > .cc-step {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1023px) {
  .cc-steps__line { display: none; }
}

/* ============================================================
   11. セクション背景のゆるやかな移動（レベル3）
   ============================================================ */
html.cc-motion-bg .cc-section--gradient,
html.cc-motion-bg .cc-cta {
  background-size: 180% 180%;
  animation: cc-gradient-drift 22s var(--cc-motion-ease-inout) infinite alternate;
}

@keyframes cc-gradient-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ============================================================
   12. 追従CTA / ヘッダーの出現
   ============================================================ */
.cc-sticky-cta {
  transition: transform .55s var(--cc-motion-ease), opacity .35s linear;
  opacity: 0;
}

.cc-sticky-cta.is-visible {
  opacity: 1;
}

.header-container {
  transition: transform .5s var(--cc-motion-ease), background-color .3s linear, box-shadow .3s linear;
}

/* 下スクロールでヘッダーを隠す（cc-header-autohide が付いたときのみ） */
html.cc-header-autohide .header-container.is-hidden {
  transform: translate3d(0, -100%, 0);
}

/* ============================================================
   13. モーション無効時
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.cc-motion-js [data-cc-anim],
  html.cc-motion-js .cc-anim,
  html.cc-motion-js .cc-reveal,
  html.cc-motion-js .cc-split-ready .cc-line__in,
  html.cc-motion-js .cc-split-chars .cc-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  .cc-marquee--running .cc-marquee__track,
  html.cc-motion-bg .cc-section--gradient,
  html.cc-motion-bg .cc-cta {
    animation: none;
  }

  .cc-progress { display: none; }

  .cc-magnetic,
  .header-container,
  .cc-sticky-cta {
    transition: none;
  }
}

@media print {
  .cc-progress { display: none; }
  html.cc-motion-js [data-cc-anim],
  html.cc-motion-js .cc-anim,
  html.cc-motion-js .cc-reveal,
  html.cc-motion-js .cc-line__in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ============================================================
   14. 手書きHTML向け：data-cc-stagger コンテナ
   （子要素にクラスを付けなくても、まとめて出現させられる）
   ============================================================ */
html.cc-motion-js [data-cc-stagger] > *:not(.cc-in) {
  opacity: 0;
  transform: translate3d(0, var(--cc-motion-distance), 0);
}

html.cc-motion-js [data-cc-stagger] > *.cc-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   15. パララックス対象の器
   画像だけを動かし、枠は動かさないことで上品な見え方にする
   ============================================================ */
.cc-parallax {
  overflow: hidden;
}

.cc-hero__media.cc-parallax {
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-lg);
}

.cc-hero__media.cc-parallax img,
.cc-parallax > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  will-change: transform;
}

/* ============================================================
   16. ロゴをマーキー表示にする場合のレイアウト上書き
   ============================================================ */
.cc-logos.cc-marquee {
  display: block;
}

.cc-logos.cc-marquee .cc-marquee__track > * {
  width: 168px;
}

.cc-logos.cc-marquee img {
  height: 56px;
}

/* ============================================================
   17. セクション見出しのラベルに引かれる線（レベル2以上）
   ============================================================ */
.cc-heading__en {
  position: relative;
  display: inline-block;
}

html.cc-motion-js .cc-heading__en::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  opacity: .45;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s var(--cc-motion-ease) .15s;
}

html.cc-motion-js .cc-heading__en.cc-in::after,
html.cc-motion-js .cc-in .cc-heading__en::after {
  transform: scaleX(1);
}

/* ============================================================
   18. 行マスク見出しの二重フェード防止
   （行が下から出る演出だけを見せ、見出し全体のフェードは無効化）
   ============================================================ */
html.cc-motion-js .cc-split-ready.cc-anim:not(.cc-in),
html.cc-motion-js .cc-split-ready.cc-reveal:not(.cc-in) {
  opacity: 1;
  transform: none;
}

/* トップメッセージの画像もパララックスの器として扱う */
.cc-media__img.cc-parallax {
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-lg);
}

.cc-media__img.cc-parallax img {
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   19. 見出しの行組み調整（実コンテンツ流し込み対策）
   ------------------------------------------------------------
   実際の文章を入れると見出しが3〜5行になり、
   ・行末が不揃いになる
   ・行マスクのスタッガーが長すぎて重く見える
   という2つの問題が起きる。ここでその両方に対処する。
   ============================================================ */
:root {
  /* 行マスクを使う上限行数。これを超えたら1ブロックのフェードに切り替える */
  --cc-motion-line-max: 4;
  /* 行マスク全体にかけてよい最大の遅延（ms）。行数が多いほど間隔を詰める */
  --cc-motion-line-budget: 420;
}

/* 見出しの行組みを整える
   ・text-wrap: balance … 行の長さを均等に割る（2〜4行で効く）
   ・word-break: auto-phrase … 日本語を文節で折り返す（対応ブラウザのみ）
   ・line-break: strict … 禁則処理を厳密に */
.cc-hero__title,
.cc-heading__title,
.cc-cta__title,
.cc-pagehead__title,
.cc-post-cta__title,
.cc-blog .entry-title,
.cc-wrap-balance {
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: anywhere;
}

/* 本文・リード文は「最終行に1語だけ落ちる」のを防ぐ */
.cc-hero__lead,
.cc-heading__lead,
.cc-cta__lead,
.cc-card__text,
.cc-step__text,
.cc-lead,
.cc-wrap-pretty {
  text-wrap: pretty;
  line-break: strict;
}

/* 行数が多い見出しは balance が効きにくいので通常折り返しへ戻す */
.cc-split-ready[data-cc-lines="5"],
.cc-split-ready[data-cc-lines="6"],
.cc-split-ready[data-cc-lines="7"] {
  text-wrap: initial;
}

/* 行数に応じて字送り・行間・サイズを少しずつ詰める（詰めすぎない範囲で）
   サイズは --cc-title-shrink（倍率）で調整するため、
   ブレークポイントごとの実寸指定と両立する。 */
.cc-hero__title[data-cc-lines="3"] { line-height: 1.24; }
.cc-hero__title[data-cc-lines="4"] { line-height: 1.2; letter-spacing: -.015em; --cc-title-shrink: .94; }
.cc-hero__title[data-cc-lines="5"],
.cc-hero__title[data-cc-lines="6"] { line-height: 1.18; letter-spacing: -.02em; --cc-title-shrink: .86; }

.cc-heading__title[data-cc-lines="3"] { line-height: 1.3; }
.cc-heading__title[data-cc-lines="4"],
.cc-heading__title[data-cc-lines="5"] { line-height: 1.28; --cc-title-shrink: .9; }

/* 手動の改行コントロール
   編集画面で <br class="cc-br-sp"> のように書くと、
   その幅のときだけ改行される（日本語見出しの「ここで切りたい」に対応） */
.cc-br-sp { display: none; }
.cc-br-pc { display: inline; }
.cc-br-tab { display: none; }

@media screen and (max-width: 1023px) {
  .cc-br-tab { display: inline; }
}

@media screen and (max-width: 767px) {
  .cc-br-sp { display: inline; }
  .cc-br-pc { display: none; }
}

/* 途中で切りたくない語句を囲む（例: <span class="cc-nb">お問い合わせ</span>） */
.cc-nb {
  white-space: nowrap;
}

/* 行マスクを使わずフェードのみにしたい見出し */
.cc-split-off .cc-line,
.cc-split-off .cc-line__in {
  display: inline;
  overflow: visible;
  white-space: normal;
  transform: none;
}