@charset "UTF-8";
/* =========================================================
   プライムス トップページ  style.css
   Figma「WEB」より数値忠実実装。基準幅 PC=1920 / SP=375
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* color */
  --c-white:#ffffff;
  --c-text:#333333;
  --c-black:#000000;
  --c-blue-400:#5689d5;   /* light blue */
  --c-blue-500:#3268b8;   /* header bg / primary */
  --c-blue-600:#2c5ea7;   /* gradient start */
  --c-blue-700:#2c438e;   /* deep blue */
  --c-blue-800:#2a2a76;   /* indigo */
  --c-navy:#1c375a;       /* darkest */
  --c-primary:#1565c0;
  --c-teal:#00b8d4;       /* CTA / accent dot (SP) */
  --c-bg:#f9f9f9;
  --c-bg-blue:#f0f6ff;

  /* font */
  --f-jp:"Noto Sans JP", sans-serif;
  --f-en:"Poppins", sans-serif;
  --f-inter:"Inter", sans-serif;

  /* gradient (About見出し・矢印円・ボタン等で再利用) */
  --grad-blue:linear-gradient(90deg,#5689d5 0%,#3268b8 100%);

  /* motion : Figma SMART_ANIMATE GENTLE(spring ~1s) を近似 */
  --ease-gentle:cubic-bezier(.34,1.4,.5,1);
  --dur-hover:.5s;       /* ホバーのスプリング近似 */
  --dur-fade:.3s;        /* DISSOLVE 0.3s EASE_OUT */
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-jp);
  font-weight:500;
  color:var(--c-text);
  background:var(--c-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-weight:inherit;line-height:1.2}

/* 1920基準のページラッパ（中央寄せ・フル幅） */
.main{position:relative;width:100%;overflow:hidden}

/* ---------- スクロールリビール（フワッと出現） ---------- */
.reveal{opacity:0;transition:opacity .9s ease,transform 1s cubic-bezier(.18,.7,.2,1);will-change:opacity,transform}
.reveal--up{transform:translateY(42px)}
.reveal--left{transform:translateX(-64px)}   /* 左からフワッと */
.reveal--right{transform:translateX(64px)}    /* 右からフワッと */
.reveal.is-shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* =========================================================
   HEADER  (Figma 279:1625  1720x82 @ x100,y30)
   グラスモーフィズム pill
   ========================================================= */
.header{
  position:fixed;
  top:30px;
  left:100px;
  right:100px;
  height:82px;
  z-index:100;
  display:flex;
  align-items:center;
  padding:20px 50px;
  border:1px solid var(--c-white);
  border-radius:20px;
  background:rgba(50,104,184,.80);          /* #3268b8 / .8 */
  box-shadow:0 0 20px rgba(20,40,80,.18);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:42px;
}
.header__logo{display:block}
.header__logo img{width:200px;height:31px}

.gnav{display:flex;align-items:center;gap:30px}
.gnav__list{display:flex;align-items:center;gap:30px}
.gnav__item a{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  height:36px;
  font:700 14px/1.2 var(--f-jp);
  color:var(--c-white);
  white-space:nowrap;
}
.gnav__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--c-teal);
  opacity:0;
  transform:translateY(4px);
  transition:opacity var(--dur-hover) var(--ease-gentle),
             transform var(--dur-hover) var(--ease-gentle);
}
.gnav__item a:hover .gnav__dot{opacity:1;transform:translateY(0)}

/* 事業内容 ドロップダウン (機能要件・サイト調) */
.gnav__item--dd{position:relative}
.gnav__trigger{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;height:36px;font:700 14px/1.2 var(--f-jp);color:var(--c-white);white-space:nowrap;
}
.gnav__item--dd:hover .gnav__dot,
.gnav__item--dd.is-open .gnav__dot{opacity:1;transform:translateY(0)}
.gnav-dd{
  position:absolute;top:calc(100% + 22px);left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:248px;padding:12px;z-index:120;
  border-radius:14px;border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 16px 44px rgba(20,40,80,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease-gentle),transform .3s var(--ease-gentle),visibility .3s;
}
/* ホバー領域を切らさないための橋渡し */
.gnav-dd::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.gnav__item--dd:hover .gnav-dd,
.gnav__item--dd:focus-within .gnav-dd,
.gnav__item--dd.is-open .gnav-dd{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.gnav-dd a{
  display:block;padding:11px 16px;border-radius:9px;
  font:500 14px/1.4 var(--f-jp);color:var(--c-blue-700);white-space:nowrap;
  transition:background .2s,color .2s;
}
.gnav-dd a:hover{background:var(--c-blue-500);color:#fff}

/* お問い合わせ btn (144x42 r50 grad #2c5ea7→#5689d5) */
.btn-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 30px;
  border-radius:50px;
  font:700 14px/1.2 var(--f-jp);
  color:var(--c-white);
  background:linear-gradient(90deg,var(--c-blue-600),var(--c-blue-400));
  box-shadow:0 4px 12px rgba(44,94,167,.35);
  transition:transform var(--dur-hover) var(--ease-gentle),
             box-shadow var(--dur-hover) var(--ease-gentle),
             filter var(--dur-hover) var(--ease-gentle);
}
.btn-contact:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(44,94,167,.45);filter:brightness(1.05)}

/* =========================================================
   HERO  (mv 247:369  1920x1080)
   3枚クロスフェード + ゆっくりズーム / 左下白コピー
   ========================================================= */
/* HERO: 中央強調 横カルーセル (actas参照) — 中央scale(1)/両脇scale(.88) */
.mv{
  position:relative;width:100%;overflow:hidden;
  padding:150px 0 90px;          /* 固定ヘッダー分を確保 */
  background:linear-gradient(160deg,#1c2b6e 0%,#34509f 55%,#5689d5 100%);
}
.mv__copy{text-align:center;max-width:900px;margin:0 auto 54px;padding:0 24px}
.mv__title{font:700 42px/63px var(--f-jp);color:#fff}
.mv__lead{margin-top:24px;font:500 16px/28.8px var(--f-jp);letter-spacing:.6px;color:rgba(255,255,255,.92)}

.mv__slider{position:relative;width:100%}
.mv__slider .swiper-slide{width:62%;max-width:1180px}
.mv__slide{
  display:block;width:100%;aspect-ratio:16/9;
  background-size:cover;background-position:center;border-radius:10px;
  transform:scale(.88);transition:transform .6s ease;
  box-shadow:0 18px 50px rgba(0,0,0,.30);
}
.mv__slider .swiper-slide-active .mv__slide{transform:scale(1)}
/* 矢印(ブランド色の丸) */
.mv .swiper-button-prev,.mv .swiper-button-next{
  width:56px;height:56px;margin-top:-28px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--c-blue-500);
  box-shadow:0 6px 20px rgba(0,0,0,.22);transition:background .3s,transform .3s
}
.mv .swiper-button-prev{left:6%}
.mv .swiper-button-next{right:6%}
.mv .swiper-button-prev:hover,.mv .swiper-button-next:hover{background:#fff;transform:scale(1.06)}
.mv .swiper-button-prev::after,.mv .swiper-button-next::after{font-size:18px;font-weight:700}
/* ドット */
.mv .swiper-pagination{position:static;margin-top:28px}
.mv .swiper-pagination-bullet{width:10px;height:10px;background:rgba(255,255,255,.45);opacity:1;transition:width .3s,background .3s}
.mv .swiper-pagination-bullet-active{background:#fff;width:28px;border-radius:5px}

/* =========================================================
   共通パーツ
   ========================================================= */
/* leading-trim: CSSのline-box(n×行高)をFigmaのbox高((n-1)×行高+cap)に合わせる。
   先頭行の上leadingと末尾行の下leadingを負マージンで除去。
   値は (行高-fontSize)/2 + フォント上下メトリクスを実測キャリブレーション。 */
.tt-jp24{margin-top:-10px;margin-bottom:-15px}   /* Noto Sans JP 24px / lh43.2 */
.tt-jp14{margin-top:-7px;margin-bottom:-11px}    /* Noto Sans JP 14px / lh28 */
.tt-jp16{margin-top:-8px;margin-bottom:-12px}    /* Noto Sans JP 16px / lh28.8 */
.tt-jp32{margin-top:-8px;margin-bottom:-8px}     /* Noto Sans JP 32px / lh38.4 */
.tt-en96{margin-top:-14px;margin-bottom:-15px}   /* Poppins 96px / lh96 */

/* 英語大見出し  例: About us / Business / Cases ... */
.en-head{font:500 96px/96px var(--f-en);letter-spacing:0}
.en-head__a{
  background:var(--grad-blue);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.en-head__b{color:rgba(151,149,181,.20)}      /* #9795b5 @20% */
.en-head--blue{                                /* 全体を青グラデ(例: Project Cases) */
  background:var(--grad-blue);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* more-btn (200x56 白pill + グラデ円矢印)  ON_HOVER で塗りつぶし */
.more-btn{
  display:inline-flex;align-items:center;justify-content:space-between;
  width:200px;height:56px;padding:0 30px;
  border:1px solid #9795b5;border-radius:50px;
  background:var(--c-white);
  font:500 16px/1 var(--f-jp);color:var(--c-black);
  transition:background var(--dur-hover) var(--ease-gentle),
             color var(--dur-hover) var(--ease-gentle),
             border-color var(--dur-hover) var(--ease-gentle);
}
.more-btn__arw{
  display:grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--grad-blue);
  transition:transform var(--dur-hover) var(--ease-gentle),background var(--dur-hover) var(--ease-gentle);
}
.more-btn__arw svg{display:block}
.more-btn:hover{background:var(--grad-blue);color:#fff;border-color:transparent}
.more-btn:hover .more-btn__arw{background:#fff;transform:translateX(3px)}
.more-btn:hover .more-btn__arw svg path{stroke:#3268b8}

/* =========================================================
   ABOUT  (247:390  1920x695  bg #f9f9f9)
   ========================================================= */
.about{background:var(--c-bg);padding:150px 0}
.about__inner{
  width:1440px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-start;
}
.about__head{width:430px;padding-top:50px}
.about__label{font:500 20px/28.96px var(--f-jp);color:var(--c-blue-400)}
.about__head .en-head{margin-top:30px}
.about__body{width:800px;display:flex;flex-direction:column;gap:50px}
.about__title{font:500 24px/43.2px var(--f-jp);color:var(--c-text)}
.about__text{font:500 14px/28px var(--f-jp);color:var(--c-text)}

/* =========================================================
   BUSINESS  (247:403  1920x2732  grad #3268b8→#1d4d96)
   ========================================================= */
.business{
  position:relative;
  padding-bottom:150px;
  background:linear-gradient(180deg,#3268b8 0%,#1d4d96 100%);
  overflow:hidden;
}
/* 上部の帯写真(1920x400) 下に向かって青へ溶ける */
.business__band{
  position:absolute;top:0;left:0;width:100%;height:400px;z-index:0;
  background-image:linear-gradient(180deg,rgba(50,104,184,.35) 0%,rgba(50,104,184,.85) 70%,#3268b8 100%),
                   url(../img/top/business-band.png);
  background-size:cover,cover;background-position:center,center;
}
.business__inner{position:relative;z-index:1;width:1440px;margin:0 auto;padding-top:550px}
/* 背景テクスチャ(blur) */
.business__tex{
  position:absolute;left:-518px;top:122px;width:1920px;height:1920px;z-index:-1;
  background:url(../img/top/business-texture.png) center/cover no-repeat;
  filter:blur(30px);opacity:.5;pointer-events:none;
}
.business__head{text-align:right}
.business__head .en-head{margin-top:-14px;margin-bottom:-15px}   /* tt-en96相当(右寄せ) */
.en-head--bw .en-head__a,
.en-head.en-head--bw{                               /* Business: 青→白グラデ */
  background:linear-gradient(90deg,#3268b8 0%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.business__label{margin-top:14px;font:500 20px/24px var(--f-jp);color:#fff}

.biz-rows{margin-top:86.6px}   /* Figma gap80 + 事業内容ラベルの下leading分を補正 */
.biz-row{width:1440px;margin:0 auto;padding:80px 100px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.biz-row--last{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.35)}
.biz-row__inner{width:1200px;margin:0 auto;display:flex;gap:100px;align-items:center}
.biz-row__body{width:550px;display:flex;flex-direction:column;gap:50px}
.biz-row__head{display:flex;flex-direction:column;gap:30px}
.biz-row__num{font:500 32px/32px var(--f-en);color:var(--c-blue-400)}
.biz-row__title{font:500 32px/38.4px var(--f-jp);color:#fff}
.biz-row__desc{font:500 14px/28px var(--f-jp);color:#fff}
.biz-row__desc--keep{white-space:nowrap}   /* 明示改行(<br>)行は自動折返ししない(Figma準拠) */
.biz-row__img{width:550px;height:300px;border-radius:30px;overflow:hidden;position:relative;flex-shrink:0}
.biz-row__img::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(42,42,118,.45),rgba(63,81,181,.30));mix-blend-mode:multiply;z-index:2;pointer-events:none}
.biz-row__img img{width:100%;height:100%;object-fit:cover}
/* 右画像スライダー(とりあえず同画像×3) */
.biz-slide,.biz-slide .swiper-wrapper,.biz-slide .swiper-slide{width:100%;height:100%}
.biz-slide__pager{position:absolute;bottom:14px;left:0;right:0;z-index:3;text-align:center;line-height:0}
.biz-slide__pager .swiper-pagination-bullet{width:8px;height:8px;margin:0 4px;background:#fff;opacity:.55;transition:opacity .3s,width .3s}
.biz-slide__pager .swiper-pagination-bullet-active{opacity:1;width:20px;border-radius:4px}

/* more-btn ghost (business: 透明地・白枠・白文字) */
.more-btn--ghost{background:transparent;border-color:#fff;color:#fff}
.more-btn--ghost .more-btn__arw{border:1px solid #fff}
.more-btn--ghost:hover{background:#fff;color:var(--c-blue-500);border-color:#fff}
.more-btn--ghost:hover .more-btn__arw{background:#fff}
.more-btn--ghost:hover .more-btn__arw svg path{stroke:var(--c-blue-500)}

/* =========================================================
   CASE  (247:444  1920x1140)  カルーセル
   ========================================================= */
.case{position:relative;padding:150px 0;background:#fff;overflow:hidden}
.case__inner{width:1440px;margin:0 auto}
.case__head{display:flex}
.case__headL{width:333px}
.case__headL .en-head{line-height:96px;margin-top:-14px;margin-bottom:-15px}
.case__label{margin-top:30px;margin-bottom:-14px;font:500 20px/28.96px var(--f-jp);color:var(--c-blue-400)}
.case__intro{width:712px;margin-left:275px;margin-top:85px;font:500 14px/28px var(--f-jp);color:var(--c-text)}

.case-slider{margin-top:80px;overflow:hidden;padding:18px 0 0}
.case-slider__track{display:flex;gap:30px;transform:translateX(-250px);touch-action:pan-y;cursor:grab;will-change:transform}
.case-slider__track.is-grabbing{cursor:grabbing}
.case-card{width:460px;flex:0 0 460px;transition:filter .5s var(--ease-gentle)}
.case-card.is-peek{filter:none}            /* Figma LAYER_BLUR r20 相当 */
.case-card__img{display:block;position:relative;width:460px;height:307px;border-radius:30px;overflow:hidden}
.case-card__img::after{content:"";position:absolute;inset:0;background:rgba(21,101,192,.10)}
.case-card__img img{width:100%;height:100%;object-fit:cover}
.case-card__cap{margin-top:30px}
.case-card__title{display:flex;align-items:center;gap:20px;font:500 18px/36px var(--f-jp);color:var(--c-text);margin-top:-11px;margin-bottom:-12px}
.case-card__title .arw-sm{flex-shrink:0}
.case-card__tags{display:flex;gap:10px;margin-top:20px}
.tag{display:inline-flex;align-items:center;height:28px;padding:0 20px;border-radius:50px;background:var(--c-blue-400);color:#fff;font:500 12px/24px var(--f-jp);white-space:nowrap}

.case__more{margin-top:80px;display:flex;justify-content:center}

/* =========================================================
   NEWS  (247:453  1920x624  bg #f0f6ff)
   ========================================================= */
.news{position:relative;padding:150px 0;background:var(--c-bg-blue);overflow:hidden}
.news__blob{
  position:absolute;right:-340px;bottom:-540px;width:1489px;height:1489px;z-index:0;
  background:url(../img/top/business-texture.png) center/cover no-repeat;
  filter:blur(50px);opacity:.5;pointer-events:none;border-radius:50%;
  background-color:rgba(86,137,213,.10);
}
.news__inner{position:relative;z-index:1;width:1440px;margin:0 auto;display:flex;gap:50px}
.news__left{width:430px;display:flex;flex-direction:column;gap:100px}
.news__head{padding-top:50px}
.news__head .en-head{line-height:96px;margin-top:-14px;margin-bottom:-15px}
.news__label{margin-top:30px;margin-bottom:-9px;font:500 20px/24px var(--f-jp);color:var(--c-blue-400)}

.news__list{width:960px;display:flex;flex-direction:column;gap:30px}
.news-card{background:#fff;border-radius:30px}
.news-card__row{display:flex;align-items:center;gap:20px;padding:30px 50px}
.news-card__date{flex-shrink:0;font:500 14px/28px var(--f-en);color:var(--c-blue-400);white-space:nowrap}
.news-card__cat{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 20px;border-radius:50px;background:var(--c-blue-400);
  color:#fff;font:500 12px/24px var(--f-jp);white-space:nowrap;
}
.news-card__title{font:500 14px/28px var(--f-jp);color:var(--c-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-card{transition:box-shadow var(--dur-hover) var(--ease-gentle),transform var(--dur-hover) var(--ease-gentle)}
.news-card:hover{box-shadow:0 10px 30px rgba(28,55,90,.12);transform:translateY(-2px)}

/* =========================================================
   CONTACT バナー (247:468  1920x984 / 表示427px)
   ========================================================= */
.contact{position:relative;height:427px;overflow:hidden;background:#3268b8}
.contact::before{                       /* 背景写真 + 青ぼかしオーバーレイ */
  content:"";position:absolute;inset:0;
  background:url(../img/top/contact-bg.png) center/cover;
}
.contact::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(50,104,184,.90),rgba(86,137,213,.80));
  -webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
}
.contact__link{position:absolute;inset:0;z-index:3}
.contact__inner{position:relative;z-index:2;height:100%;padding-top:149px;text-align:center;pointer-events:none}
.contact__title{font:500 120px/120px var(--f-en);color:#fff;margin-top:-18px}
.contact__sub{margin-top:12px;font:500 18px/21.6px var(--f-jp);color:#fff}

/* =========================================================
   FOOTER (247:469  1920x557  bg #f9f9f9)
   ========================================================= */
.footer{background:var(--c-bg);padding:100px 0}
.footer__inner{width:1440px;margin:0 auto;display:flex;gap:100px}
.footer__left{width:509px;flex-shrink:0;display:flex;flex-direction:column;gap:50px}
.footer__brand{display:flex;flex-direction:column;gap:20px}
.footer__logo{width:200px;height:31px}
.footer__company{font:600 14px/25.2px var(--f-inter);color:var(--c-blue-700);margin-bottom:-15px}
.footer__addr{display:flex;gap:50px}
.footer__addr p{font:500 12px/21.6px var(--f-inter);color:var(--c-blue-700);margin:-6px 0}
.footer__tel{width:509px;background:var(--c-bg-blue);border-radius:20px;padding:30px 50px;display:flex;flex-direction:column;align-items:center;gap:20px}
.footer__tel-label{font:500 14px/25.2px var(--f-jp);color:var(--c-blue-700);margin:-8px 0}
.footer__tel-num{display:flex;align-items:center;gap:5px;font:500 32px/1 var(--f-en);color:var(--c-blue-700);margin:-4px 0}
.footer__tel-num img{width:24px;height:24px}
.footer__tel-hours{font:500 12px/21.6px var(--f-inter);color:rgba(44,67,142,.5);margin:-6px 0}
.footer__divider{width:1px;align-self:stretch;background:#9795b5;flex-shrink:0}
.footer__nav{width:731px;padding-top:50px;display:flex;flex-direction:column}
.footer__cols{display:flex;gap:100px}
.fcol{width:160px}
.fcol--flat{width:56px;display:flex;flex-direction:column;gap:42px}
.fcol:nth-child(3){width:160px}
.fcol__head{display:block;font:700 14px/16.8px var(--f-jp);color:var(--c-blue-700);white-space:nowrap}
.fcol__subs{margin-top:36px;display:flex;flex-direction:column;gap:24px}
.fcol__subs a{font:500 12px/14.4px var(--f-jp);color:rgba(44,67,142,.5);white-space:nowrap}
.footer__copy{margin-top:100px;text-align:right;font:500 12px/18px var(--f-en);color:rgba(50,104,184,.3)}
/* 認定ロゴ(事業継続力強化計画) フッター下部中央 */
.footer__cert{margin-top:48px;text-align:center}
.footer__cert img{width:300px;max-width:84%;height:auto;display:inline-block}
@media (max-width:768px){.footer__cert{margin-top:36px}.footer__cert img{width:260px}}

/* footer nav hover (Figma ON_HOVER) */
.fcol__head,.fcol__subs a{transition:color var(--dur-hover) var(--ease-gentle)}
.fcol__head:hover{color:var(--c-blue-400)}
.fcol__subs a:hover{color:var(--c-blue-500)}

/* =========================================================
   ハンバーガー / ドロワー (基本: PC非表示)
   ========================================================= */
.hamburger{display:none;width:24px;height:16px;flex-direction:column;justify-content:space-between;padding:0;background:none}
.hamburger span{display:block;width:24px;height:2px;border-radius:2px;background:#fff;transition:transform .4s var(--ease-gentle),opacity .3s}
.hamburger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-active span:nth-child(2){opacity:0}
.hamburger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none}

/* =========================================================
   @media SP (max-width:768px)  ※375専用フレーム準拠
   ========================================================= */
@media (max-width:768px){
  /* ---- 共通 ---- */
  .mv__copy,.about__inner,.business__inner,.case__inner,.news__inner,.footer__inner{width:auto}

  /* ---- HEADER (446:2969) ---- */
  .header{top:10px;left:10px;right:10px;height:62px;padding:20px;border-radius:10px}
  .gnav{display:none}
  .header__logo img{width:140px;height:21px}
  .hamburger{display:flex}

  /* ---- DRAWER (ハンバーガーメニュー) ---- */
  .drawer{
    display:block;position:fixed;inset:0;z-index:90;
    background:linear-gradient(160deg,#5b86cf 0%,#3f6dc0 100%);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .5s var(--ease-gentle),transform .5s var(--ease-gentle),visibility .5s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    height:100vh;height:100dvh;
  }
  body.is-drawer-open{overflow:hidden}
  body.is-drawer-lock{position:fixed;left:0;right:0;width:100%}
  body.is-drawer-open .drawer{opacity:1;visibility:visible;transform:none}
  .drawer__inner{display:flex;flex-direction:column;min-height:100%;padding:110px 30px 40px}
  .drawer__nav{display:flex;flex-direction:column;gap:0}
  .drawer__head{display:flex;align-items:center;gap:16px;padding:24px 0;font:700 16px/1 var(--f-jp);color:#fff;border-top:1px solid rgba(255,255,255,.25)}
  .drawer__nav>.drawer__group:first-child .drawer__head,
  .drawer__nav>.drawer__head:first-child{border-top:none}
  .drawer__dot{width:6px;height:6px;border-radius:50%;background:var(--c-teal);flex-shrink:0}
  .drawer__group{border-top:1px solid rgba(255,255,255,.25)}
  .drawer__group .drawer__head{border-top:none;padding-bottom:8px}
  .drawer__subs{display:flex;flex-direction:column;gap:14px;padding:0 0 24px 22px}
  .drawer__subs a{font:500 14px/1 var(--f-jp);color:rgba(255,255,255,.92)}
  .drawer__contact{
    margin-top:auto;display:flex;align-items:center;justify-content:center;gap:20px;
    height:72px;border-radius:50px;background:var(--c-teal);
    font:700 16px/1 var(--f-jp);color:#fff;
  }
  .drawer__contact-arw{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22)}

  /* ---- HERO (mv___sp 446:2784  375x812) ---- */
  /* MV: SPも中央強調カルーセル(カード型)。矢印は隠してスワイプ */
  .mv{height:auto;padding:92px 0 60px}
  .mv::after{display:none}
  .mv__copy{position:static;margin:0 auto 30px;padding:0 20px;text-align:center}
  .mv__title{font:700 24px/36px var(--f-jp)}
  .mv__lead{margin-top:16px;font:500 12px/21.6px var(--f-jp);letter-spacing:.4px}
  .mv__slider .swiper-slide{width:80%;max-width:none}
  .mv .swiper-button-prev,.mv .swiper-button-next{display:none}
  .mv .swiper-pagination{margin-top:22px}

  /* ---- ABOUT (446:2813  375x974) ---- */
  .about{padding:150px 0}
  .about__inner{display:block;padding:0 20px}
  .about__head{width:auto;padding-top:0}
  .about__label{font:500 16px/19.2px var(--f-jp)}
  .about__head .en-head{margin-top:30px}
  .about .en-head{font-size:64px;line-height:64px;margin-top:-9px;margin-bottom:-10px}
  .about__body{width:auto;margin-top:80px;gap:50px}
  .about__title{text-align:left}
  .about .more-btn{align-self:center}

  /* ---- BUSINESS (446:2826) 縦積みカード ---- */
  .business{padding-bottom:100px}
  .business__band{height:400px}
  .business__inner{width:auto;padding:0 20px;padding-top:500px}
  .business__head .en-head{font-size:64px;line-height:64px;margin-top:-9px;margin-bottom:-10px}
  .business__label{margin-top:14px;font-size:16px;line-height:19.2px}
  .biz-rows{margin-top:80px}
  .biz-row{width:auto;padding:50px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
  .biz-row__inner{width:auto;flex-direction:column;gap:50px;align-items:stretch}
  .biz-row__body{width:auto;gap:50px;order:2;align-items:center;text-align:center}
  .biz-row__head{align-items:center}
  .biz-row__num{font-size:24px;line-height:24px}
  .biz-row__title{font-size:24px;line-height:28.8px}
  .biz-row__desc{text-align:left}
  .biz-row__desc--keep{white-space:normal}
  .biz-row__img{order:1;width:295px;height:160.9px;border-radius:15px;margin:0 auto}
  .biz-row .more-btn{align-self:center}

  /* ---- CASE (446:2871) ネイティブ横スクロール ---- */
  .case{padding:100px 0}
  .case__inner{width:auto;padding:0 20px}
  .case__head{display:block}
  .case__headL{width:auto}
  .case__headL .en-head{font-size:64px;line-height:64px;margin-top:-9px;margin-bottom:-10px}
  .case__label{font-size:16px;line-height:19.2px;margin-top:30px;margin-bottom:0}
  .case__intro{width:auto;margin-left:0;margin-top:30px}
  .case-slider{margin-top:30px;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .case-slider::-webkit-scrollbar{display:none}
  .case-slider__track{transform:none!important;gap:30px;padding:0 20px;cursor:default;touch-action:auto}
  .case-card{width:295px;flex:0 0 295px;scroll-snap-align:center;filter:none!important}
  .case-card__img{width:295px;height:196.9px}
  .case__more{margin-top:50px}

  /* ---- NEWS (446:2938) ---- */
  .news{padding:100px 0}
  .news__inner{display:flex;flex-direction:column;width:auto;padding:0 20px;gap:50px}
  .news__left{display:contents}
  .news__head{order:0;padding-top:0}
  .news__head .en-head{font-size:64px;line-height:64px;margin-top:-9px;margin-bottom:-10px}
  .news__label{font-size:16px;line-height:19.2px;margin-bottom:0}
  .news__list{order:1;width:auto;gap:10px}
  .news .more-btn{order:2;align-self:center}
  .news-card__row{flex-wrap:wrap;padding:30px;gap:12px}
  .news-card__title{flex-basis:100%}  /* base の nowrap+省略を維持し1行に */
  .news__blob{display:none}

  /* ---- CONTACT バナー (SP 64px) ---- */
  .contact{height:413px}
  .contact__inner{padding-top:149px}
  .contact__title{font-size:64px;line-height:64px;margin-top:-9px}
  .contact__sub{margin-top:30px;font-size:14px;line-height:28px;padding:0 20px}

  /* ---- FOOTER (385:1869 下部) 縦積み ---- */
  .footer{padding:100px 0 80px}
  .footer__inner{flex-direction:column;width:auto;padding:0 20px;gap:50px}
  .footer__left{width:auto}
  .footer__addr{flex-direction:column;gap:30px}
  .footer__tel{width:auto}
  .footer__divider{display:none}
  .footer__nav{width:auto;padding-top:0}
  .footer__cols{flex-wrap:wrap;gap:40px 50px}
  .fcol,.fcol--flat,.fcol:nth-child(3){width:auto}
  .footer__copy{margin-top:50px;text-align:center}
}

/* =========================================================
   インパクト演出 (スムーススクロール / MV登場 / 大見出しクリップ)
   ========================================================= */
/* Lenis スムーススクロール */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* 大見出し: 下からクリップ＋せり上がりで出現 */
.an-clip{clip-path:inset(0 0 115% 0);transform:translateY(46px);opacity:0;
  transition:clip-path 1.1s cubic-bezier(.16,.84,.22,1),transform 1.1s cubic-bezier(.16,.84,.22,1),opacity .7s}
.an-clip.is-shown{clip-path:inset(0 0 -15% 0);transform:none;opacity:1}

/* 画像: 左からワイプで出現 */
.an-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s cubic-bezier(.16,.84,.22,1)}
.an-wipe.is-shown{clip-path:inset(0 0 0 0)}

/* MV 登場演出 (コピーがせり上がり / スライダーがズームイン) */
.mv__copy{opacity:0;transform:translateY(48px);transition:opacity 1s ease .25s,transform 1.15s cubic-bezier(.16,.82,.22,1) .25s}
.mv.is-shown .mv__copy{opacity:1;transform:none}
.mv__slider{opacity:0;transform:scale(1.08);transform-origin:center;transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.16,.82,.22,1)}
.mv.is-shown .mv__slider{opacity:1;transform:none}

/* 画像ズームイン出現 (.biz-row__img は overflow:hidden なので枠内でクリップ) */
.biz-row__img img{transition:transform 1.5s cubic-bezier(.16,.84,.22,1)}
.biz-row__img:not(.is-shown) img{transform:scale(1.16)}
.biz-row__img.is-shown img{transform:scale(1)}

/* 視差(パララックス): transform系の演出と競合しない translate プロパティで駆動 */
[data-para]{will-change:translate}

@media (prefers-reduced-motion:reduce){
  .an-clip,.an-wipe,.mv__copy,.mv__slider{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .biz-row__img img{transform:none!important;transition:none!important}
  [data-para]{translate:none!important}
}