@charset "utf-8";
/* ============================================================
   micro-interactions.css
   ── style.css / top.css の「後ろ」に読み込む上書き用ファイル。
      1) 罫線を細く・薄く（スタイリッシュ化）
      2) ホバー／クリックの小さな反応
      3) スクロールに合わせた登場アニメーション

   ▼ style.css との住み分け（重複しないよう調整済み）
   - 変数は `--mi-` 接頭辞で独自に持つ。style.css の --ease / --el1〜3 は上書きしない
   - グローバルナビの下線は style.css の .dropmenu > li > a::before をそのまま使う（二重に引かない）
   - フォーカスリングは style.css の 3px 指定をそのまま使う（弱めない）
   - --c-border-ui（#767676）自体は他ページでも使うため触らず、
     このページで太く見える箇所だけ個別に上書きする
   ============================================================ */

:root{
  /* イージング */
  --mi-ease:cubic-bezier(.2,0,0,1);
  --mi-ease-out:cubic-bezier(.16,1,.3,1);

  /* 影（黒ではなくネイビーで着色。style.css の --el1〜3 より軽い） */
  --mi-el1:0 1px 2px rgba(21,42,84,.16), 0 1px 3px rgba(21,42,84,.08);
  --mi-el2:0 2px 6px rgba(21,42,84,.14), 0 8px 18px rgba(21,42,84,.10);
  --mi-el3:0 3px 8px rgba(21,42,84,.16), 0 16px 30px rgba(21,42,84,.16);

  /* 罫線：太い枠をやめ、3段の「髪の毛のような線」に統一 */
  --line:rgba(30,58,138,.14);        /* 通常のカード枠 */
  --line-strong:rgba(30,58,138,.28); /* ホバー時・強調 */
  --line-faint:rgba(30,58,138,.08);  /* 区切り線 */
}

/* ============================================================
   1. 罫線を細く・薄く
   ============================================================ */

/* --- サービスカード：2px ベタのネイビー枠 → 1px ヘアライン＋影 --- */
.service-card{
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--mi-el1);
  transition:border-color .3s var(--mi-ease), box-shadow .3s var(--mi-ease), transform .3s var(--mi-ease);
}
.service-card:hover{
  border-color:var(--line-strong);
  box-shadow:var(--mi-el3);
  transform:translateY(-4px);
}
/* アイコンの丸も細枠に */
.service-card .icon{
  border:1px solid var(--line);
  transition:background-color .3s var(--mi-ease), border-color .3s var(--mi-ease), transform .35s var(--mi-ease-out);
}
.service-card:hover .icon{
  border-color:var(--line-strong);
  transform:rotate(-6deg) scale(1.06);
}

/* --- 私たちについて／ラボ：グレーの線 → ネイビー寄りのヘアライン --- */
.info-card{
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--mi-el1);
  transition:border-color .3s var(--mi-ease), box-shadow .3s var(--mi-ease), transform .3s var(--mi-ease);
}
.info-card:hover{
  border-color:var(--line-strong);
  box-shadow:var(--mi-el3);
  transform:translateY(-4px);
}

/* --- 創業バッジ：3px double ゴールド → 1px ＋ 内側にもう1本 --- */
.founding-badge{
  border:1px solid var(--c-deco-gold);
  box-shadow:inset 0 0 0 1px rgba(154,123,10,.26), 0 10px 26px -18px rgba(21,42,84,.5);
}

/* --- ONE STOP の円 --- */
.circle-segments{
  border:1px solid var(--line);
  box-shadow:0 10px 30px -14px rgba(21,42,84,.45);   /* 影も少し軽く */
}
.circle-diagram .core{
  border:1.5px solid var(--c-navy);
  box-shadow:0 2px 10px rgba(21,42,84,.12);
  transition:transform .4s var(--mi-ease-out), box-shadow .4s var(--mi-ease);
}
.circle-diagram:hover .core{
  transform:translate(-50%,-50%) scale(1.04);
  box-shadow:0 6px 20px rgba(21,42,84,.20);
}
/* ラベルのピル：1px ベタ → 薄い線＋影。ホバーで塗り */
.circle-link .label{
  border:1px solid var(--line-strong);
  box-shadow:var(--mi-el1);
  transition:background-color .25s var(--mi-ease), color .25s var(--mi-ease),
             border-color .25s var(--mi-ease), box-shadow .25s var(--mi-ease), transform .25s var(--mi-ease-out);
}
.circle-link:hover .label,
.circle-link:focus-visible .label{
  background:var(--c-navy);
  color:#fff;
  border-color:var(--c-navy);
  box-shadow:var(--mi-el2);
  transform:translateY(-2px);
}
.circle-link:active .label{ transform:translateY(0) scale(.97); }

/* --- ＋記号は主張しすぎないように --- */
.plus{ color:var(--line-strong); font-weight:700; }

/* --- タグ：角を少しだけ丸く、字間を締める --- */
.tag{ border-radius:3px; letter-spacing:.02em; }

/* --- ヘッダーのお問い合わせ：1.5px → 1px --- */
.btn-contact{ border-width:1px; }

/* --- 大きいボタン：2px → 1px。減った1pxはパディングで補って同じ大きさに保つ --- */
.btn{
  border-width:1px;
  padding:calc(0.9em + 1px) calc(1.8em + 1px);
}

/* --- 装飾用の薄い線（--c-border-ui #767676 の代わりに使う）---
   ※ --c-border-ui 自体は「UI部品の境界＝コントラスト比3:1以上」という
     役割で定義されているため（フォームの枠線など他ページで使用）、値は変更していません。
     このページで太く見えていたのは装飾用途の3か所なので、そこだけ差し替えています。 */
:root{ --c-border-soft:#c9d3e4; }
.ph,
.ph2{ border-color:var(--line); }

/* --- 枠線ボタン：2px → 1px、ホバーは反転（薄い背景色に変えるより締まる） --- */
.btn-ghost{
  border-width:1px;
  transition:background-color .25s var(--mi-ease), color .25s var(--mi-ease),
             border-color .25s var(--mi-ease), transform .22s var(--mi-ease), box-shadow .22s var(--mi-ease);
}
.btn-ghost:hover{
  background:var(--c-navy);
  border-color:var(--c-navy);
  color:#fff;
}

/* --- SP：サークル分解時のボタンも細枠に --- */
@media (max-width:640px){
  .circle-link{
    border:1px solid var(--line);
    box-shadow:var(--mi-el1);
  }
}

/* ============================================================
   2. ボタンのマイクロインタラクション
   （浮く → 光沢が流れる → 押すと沈む → 波紋が出る）
   ============================================================ */
/* ※ #page-top はここに含めないこと。
   style.css で position:fixed になっているのを relative で上書きしてしまい、
   ボタンがページ最下部の左端に流れてしまう（2026-08-14 修正） */
.btn,
.btn-contact,
.sp-contact-btn{
  position:relative;
}
.btn,
.btn-contact,
.btn-contact2,
.btn-request,
.sp-contact-btn,
#page-top{
  overflow:hidden;                 /* 波紋・光沢のはみ出しを切る */
  isolation:isolate;
  will-change:transform;
}
.btn,
.btn-contact,
.btn-contact2,
.btn-request,
.sp-contact-btn{
  transition:transform .22s var(--mi-ease), box-shadow .22s var(--mi-ease),
             background-color .22s var(--mi-ease), color .22s var(--mi-ease),
             border-color .22s var(--mi-ease), opacity .22s var(--mi-ease);
}
.btn:hover,
.btn-contact:hover,
.btn-contact2:hover,
.btn-request:hover,
.sp-contact-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--mi-el3);
  text-decoration:none;            /* style.css の a:hover{underline} を打ち消す */
}
.btn:active,
.btn-contact:active,
.btn-contact2:active,
.btn-request:active,
.sp-contact-btn:active,
#page-top:active{
  transform:translateY(0) scale(.98);
  box-shadow:var(--mi-el1);
  transition-duration:.08s;        /* 押した瞬間だけ素早く反応させる */
}

/* 光沢のスイープ（ホバーで左から右へ一度だけ通る） */
.btn::before,
.btn-contact::before,
.sp-contact-btn::before{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.38) 50%, transparent 100%);
  transform:skewX(-18deg);
  pointer-events:none;
  z-index:0;
}
/* 白地のボタン（.btn-ghost / .sp-contact-btn）は白い光沢だと見えないのでネイビー寄りに */
.btn-ghost::before,
.sp-contact-btn::before{
  background:linear-gradient(100deg, transparent 0%, rgba(30,58,138,.14) 50%, transparent 100%);
}
.btn:hover::before,
.btn-contact:hover::before,
.sp-contact-btn:hover::before{
  animation:sheen .75s var(--mi-ease-out) forwards;
}
@keyframes sheen{ to{ left:130%; } }

/* 矢印は右に滑る */
.btn .arrow,
.more a span[aria-hidden],
.title-link span[aria-hidden]{
  display:inline-block;
  transition:transform .25s var(--mi-ease-out);
}
.btn:hover .arrow{ transform:translateX(5px); }
.more a:hover span[aria-hidden],
.title-link:hover span[aria-hidden]{ transform:translateX(4px); }

/* クリック波紋（JSが .ripple を差し込む） */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:currentColor;
  opacity:.28;
  pointer-events:none;
  animation:rippleOut .6s var(--mi-ease-out) forwards;
  z-index:1;
}
@keyframes rippleOut{
  to{ transform:scale(2.6); opacity:0; }
}

/* ============================================================
   2-2. トップに戻るボタン（案D：縦組みTOP ＋ フッターで反転）
   ── style.css の表示／非表示（opacity・visibility）はそのまま活かす。
      中の要素（矢印2本・PAGE TOP ラベル）は micro.js が組み立てるので
      index.html の <button> は今のままで OK。
   ============================================================ */
#page-top{
  width:44px;
  height:118px;
  padding:14px 0 16px;
  border-radius:22px;
  flex-direction:column;
  justify-content:flex-start;
  gap:8px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
          backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid var(--line-strong);
  color:var(--c-navy);
  box-shadow:0 6px 18px rgba(10,40,85,.12);
  transition:opacity .3s var(--mi-ease), visibility 0s .3s,
             transform .28s var(--mi-ease-out), background-color .25s var(--mi-ease),
             border-color .25s var(--mi-ease), color .25s var(--mi-ease),
             box-shadow .25s var(--mi-ease);
}
/* style.css の #page-top svg{stroke:white} を、状態で色が変わるように */
#page-top svg{ stroke:currentColor; }

/* 矢印：ホバーで上に抜け、下から同じ矢印が入ってくる（＝上に行く動きそのもの） */
#page-top .pt-ico{
  position:relative;
  width:22px; height:22px;
  flex:none;
  overflow:hidden;
  display:block;
}
#page-top .pt-ico svg{
  width:22px; height:22px;
  display:block;
  transition:transform .38s var(--mi-ease-out);
}
#page-top .pt-ico svg + svg{ position:absolute; left:0; top:22px; }
#page-top:hover .pt-ico svg{ transform:translateY(-22px); }

/* 縦組みの PAGE TOP */
#page-top .pt-label{
  writing-mode:vertical-rl;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.22em;
  line-height:1;
  margin-top:2px;
}

/* 下から上に伸びる細い線 */
#page-top::after{
  content:"";
  position:absolute;
  left:50%; bottom:12px;
  width:1px; height:20px;
  background:currentColor;
  opacity:.45;
  transform:scaleY(.4);
  transform-origin:bottom center;
  transition:transform .45s var(--mi-ease-out), opacity .3s var(--mi-ease);
}

#page-top:hover{
  transform:translateY(-4px);
  background:var(--c-navy);
  border-color:var(--c-navy);
  color:#fff;
  box-shadow:0 12px 26px rgba(10,40,85,.30);
}
#page-top:hover::after{ transform:scaleY(1); opacity:.8; }

/* フッターに重なったら反転（濃紺の上でボタンが沈まないように）
   ── micro.js が body に .at-footer を付け外しする */
body.at-footer #page-top{
  background:rgba(255,255,255,.94);
  border-color:transparent;
  color:var(--c-bg-footer, #16295e);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
body.at-footer #page-top:hover{
  background:#fff;
  color:var(--c-navy);
  box-shadow:0 12px 28px rgba(0,0,0,.34);
}

@media (max-width:767px){
  #page-top{
    width:40px;
    height:104px;
    padding:12px 0 14px;
    border-radius:20px;
  }
}

/* ============================================================
   3. リンクの下線を「引く」
   （style.css の a:hover{text-decoration:underline} を、
     対象リンクだけアニメーションする下線に置き換える）
   ============================================================ */
.more a,
.topic-card .title-link,
.footer-links a{
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .35s var(--mi-ease-out), color .25s var(--mi-ease);
  text-decoration:none;
  padding-bottom:1px;
}
.more a:hover,
.topic-card .title-link:hover,
.footer-links a:hover{
  background-size:100% 1px;
  text-decoration:none;
}

/* グローバルナビは style.css 側に下線アニメーション（::before）があるので、
   テキストの下線だけ消して二重にならないようにする */
.dropmenu a:hover,
.sp-menu a:hover,
.logo:hover{ text-decoration:none; }

/* ============================================================
   4. カード内の写真：ゆっくり寄る
   ============================================================ */
.service-card .photo,
.info-card .photo{
  overflow:hidden;
  border-radius:10px;
}
/* .ph2 は上辺だけ角丸（style.css の指定）なので、角丸は触らず切り抜きだけ足す */
.topic-card .ph,
.topic-card .ph2{ overflow:hidden; }

.service-card .photo img,
.info-card .photo img,
.topic-card .ph img,
.topic-card .ph2 img{
  display:block;
  transition:transform .6s var(--mi-ease-out), filter .6s var(--mi-ease);
}
.service-card:hover .photo img,
.info-card:hover .photo img,
.topic-card:hover .ph img,
.topic-card:hover .ph2 img{
  transform:scale(1.05);
  filter:saturate(1.06);
}
/* Topics カードの影は少し上品に */
.topic-card:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 6px rgba(21,42,84,.18), 0 16px 30px rgba(21,42,84,.20);
}

/* ============================================================
   5. スクロール演出
   ── <html class="js-anim"> が付いている時だけ動く（JS無効なら普通に表示）
   ============================================================ */

/* 5-1. 下から浮かび上がる（ぼかしが晴れながら）
   ※ すべて :where() で包み、詳細度を 0,1,0 に揃えてある。
      こうしておくと既存の :hover（0,2,0）が必ず勝つので、
      登場アニメがホバーの動きを殺さない。 */
.js-anim :where(
  .onestop-text > *,
  .circle-diagram,
  .worries h2,
  .worries .illust,
  .bubble-list li,
  .services h2,
  .services .lead,
  .service-card,
  .service-grid .plus,
  .info-card,
  .topics h2,
  .topics .sub,
  .topic-card,
  .recruit .grid > *
){
  opacity:0;
  transform:translateY(20px);
  filter:blur(5px);
  transition:opacity .8s var(--mi-ease-out), transform .8s var(--mi-ease-out), filter .8s var(--mi-ease-out);
  transition-delay:calc(var(--i, 0) * 90ms);
}

/* 5-2. 吹き出しは中央のイラストに向かって寄りながら出る */
.js-anim :where(.grid > .bubble-list:first-child li){ transform:translate(-24px,14px); }
.js-anim :where(.grid > .bubble-list:last-child  li){ transform:translate(24px,14px); }

/* 5-3. ONE STOP の円：少し回った状態から起き上がる */
.js-anim :where(.circle-diagram){ transform:translateY(20px) rotate(-6deg) scale(.96); }

/* ▼ 表示状態（隠れている指定より後ろに置くことで、同じ詳細度でも勝つ） */
.js-anim :where(.is-in){
  opacity:1;
  transform:none;
  filter:none;
}
.js-anim :where(.circle-diagram.is-in){ transition-duration:1.1s; }

/* 吹き出しだけは top.css 側の transition（.2s・遅延なし）が勝ってしまうので、
   登場のときだけ上書きする（ホバーの反応速度はそのまま） */
.js-anim .m4 .bubble-list li{
  transition:opacity .8s var(--mi-ease-out), transform .8s var(--mi-ease-out), filter .22s var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.js-anim .m4 .bubble-list li:hover{
  transition-duration:.22s;
  transition-delay:0s;
}

/* 5-4. 円のラベルは順番に灯る */
.js-anim .circle-items li{
  opacity:0;
  transition:opacity .6s var(--mi-ease-out);
  transition-delay:calc(.35s + var(--i, 0) * 90ms);
}
.js-anim .circle-diagram.is-in .circle-items li{ opacity:1; }

/* 5-5. 見出しの下に線が伸びる */
.js-anim :where(.services, .worries, .topics, .recruit) h2{
  position:relative;
  padding-bottom:.42em;
}
.js-anim :where(.services, .worries, .topics, .recruit) h2::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  width:0; height:2px;
  background:linear-gradient(90deg, var(--c-navy), rgba(30,58,138,0));
  transition:width .9s var(--mi-ease-out) .15s;
}
/* 中央寄せの見出しは線も中央から */
.js-anim :where(.services, .worries) h2::after{
  left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(30,58,138,0), var(--c-navy), rgba(30,58,138,0));
}
.js-anim :where(.services, .worries, .topics, .recruit) h2.is-in::after{ width:56px; }
.js-anim :where(.services, .worries) h2.is-in::after{ width:110px; }

/* 5-6. Topics のベール：セクション背景色（--c-bg-section #eef2f8）と色を揃える。
   濃さはこの2つの数字（0＝写真そのまま／1＝完全に隠れる）で調整できる。 */
.topics{
  --veil-top:.38;
  --veil-bottom:.80;
}
.topics::before{
  background:linear-gradient(180deg,
    rgb(238 242 248 / var(--veil-top)) 0%,
    rgb(238 242 248 / var(--veil-bottom)) 100%);
}

/* 5-7. Topics の背景写真をゆっくり視差で動かす（JSが --par を更新） */
.topics-bg img{
  transform:scale(1.10) translate3d(0, calc(var(--par, 0) * 26px), 0);
  will-change:transform;
}

/* 5-8. スクロール進捗バー（JSが body 直下に差し込む。固定ヘッダーより上に出る） */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--c-navy), var(--c-deco-gold));
  z-index:300;              /* header:100 / drawer:250 より上 */
  pointer-events:none;
}

/* 5-9. SCROLL ヒントはスクロールし始めたら消える */
.hero .scroll-hint{
  transition:opacity .4s var(--mi-ease), transform .4s var(--mi-ease);
}
body.is-scrolled .hero .scroll-hint{
  opacity:0;
  transform:translate(-50%, 12px);
}

/* ============================================================
   6. ドロワーの背面オーバーレイ
   ── style.css に .is-open のスタイルはあるが、HTML に要素が無く
      custom.js も生成していないため機能していなかった。
      micro.js が要素を作り、開閉に同期させる。
   ============================================================ */
#d_navi_overlay{
  display:block;                 /* style.css の display:none / block 切替を
                                    フェードできるよう opacity 制御に変更 */
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--mi-ease), visibility 0s .3s;
  z-index:200;                   /* page-top:150 より上、ドロワー:250 より下 */
}
#d_navi_overlay.is-open{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
/* オーバーレイでハンバーガー（×ボタン）が押せなくならないよう、
   ドロワーが開いている間だけヘッダーを前に出す */
body.drawer-open header{ z-index:260; }

/* ============================================================
   7. モーションを減らす設定の尊重（全部止める）
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .js-anim :where(
    .onestop-text > *, .circle-diagram, .worries h2, .worries .illust, .bubble-list li,
    .services h2, .services .lead, .service-card, .service-grid .plus, .info-card,
    .topics h2, .topics .sub, .topic-card, .recruit .grid > *
  ){
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .js-anim .circle-items li{ opacity:1 !important; }
  .topics-bg img{ transform:scale(1.02) !important; }
  .btn::before, .btn-contact::before, .sp-contact-btn::before{ display:none; }
  .ripple{ display:none; }
  .scroll-progress{ display:none; }
  /* トップに戻るボタン：矢印の入れ替わりと線の伸びは止める（色の変化だけ残す） */
  #page-top .pt-ico svg{ transition:none !important; }
  #page-top:hover .pt-ico svg{ transform:none !important; }
  #page-top::after{ transition:none !important; transform:scaleY(1) !important; }

  /* ホバー・押した時に「位置・大きさ・回転」が変わるものは止める（色・影の変化は残す）2026-10-21 */
  .btn:hover, .btn-contact:hover, .btn-contact2:hover, .btn-request:hover, .sp-contact-btn:hover,
  .btn:active, .btn-contact:active, .btn-contact2:active, .btn-request:active, .sp-contact-btn:active,
  #page-top:hover, #page-top:active,
  .btn:hover .arrow,
  .more a:hover span[aria-hidden], .title-link:hover span[aria-hidden],
  .service-card:hover, .service-card:hover .icon, .info-card:hover, .topic-card:hover,
  .service-card:hover .photo img, .info-card:hover .photo img,
  .topic-card:hover .ph img, .topic-card:hover .ph2 img,
  .circle-link:hover .label, .circle-link:focus-visible .label, .circle-link:active .label{
    transform:none !important;
  }
  .circle-diagram:hover .core{ transform:translate(-50%,-50%) !important; }   /* 中央寄せの指定だけ残す */
}