@charset "UTF-8";
/* =========================================================
   DATA ENABLEMENT SUITE / top
   mobile first :  base(mobile) → 769px(PC)
   ========================================================= */
html,body{margin:0;padding:0;}

.tops-wrap{
  display:block;
  position:relative;
}

/* ---------------------------------------------------------
   KV
   --------------------------------------------------------- */
section#kv{
  background:#fff;
  position:relative;
  z-index:1;
  /* 100vw はスクロールバー幅を含むため、クラシックスクロールバー環境で
     横スクロールが発生する。100% (= ICB幅) を使う */
  width:100%;
}

.kv-sp{
  position:relative;
  width:100%;
  aspect-ratio:828/1713;
  display:flex;
  justify-content:center;
  overflow:hidden;
  background-color:var(--dse-ink);
}
.kv-sp video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.kv-sp::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,.72) 100%);
  pointer-events:none;
}

.kv-img{
  margin:0 auto;
  display:flex;
  justify-content:center;
  height:100%;
  overflow:hidden;
}
.kv-img video{
  width:100%;
  object-fit:cover;
}
.kv-img img{
  height:100%;
  object-fit:cover;
}

/* logo : base = SP
   原サイトはタグライン + 製品名が一体の SVG (kv_logo_white.svg / 696x170) を
   top:18% に中央配置している。同じ構成を2要素で組む */
.kv-logo{
  position:absolute;
  margin:0;
  /* 原サイトは 18%。こちらは製品名が3行で縦に長いため、背景動画の
     キャラクター (頭頂が KV 高さの約36%) に被らない位置まで上げている */
  top:13%;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  max-width:400px;
  z-index:2;
  text-align:center;
}
.kv-logo .tagline{
  font-size:min(3.85vw,19px);
  letter-spacing:.1em;
  line-height:1.6;
  margin:0 0 1.1em;
  white-space:nowrap;
}
.kv-logo-text{
  display:block;
  /* Adobe Fonts : Industry */
  font-family:"industry","LINE Seed JP","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  line-height:1.02;
  letter-spacing:-.005em;
  color:var(--dse-ink);
  /* キャラクターに被らない高さに収めるためのサイズ
     (最長行 ENABLEMENT = 6.47em、箱 80% / max 400px には余裕で収まる) */
  font-size:min(10.1vw,50px);
  text-align:center;
}

.tagline{
  color:var(--dse-ink);
}

/* scroll indicator */
.scroll{
  position:absolute;
  width:100%;
  left:0;
  bottom:0;
  display:block;
  z-index:2;
}
.scroll-label{
  display:block;
  text-align:center;
  font-family:"LINE Seed JP","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  font-size:12px;
  letter-spacing:.14em;
  line-height:1;
  color:var(--dse-primary);
  margin:0 0 8px;
}
.scroll svg{
  width:20%;
  max-width:50px;
  margin:0 auto 20px;
  display:block;
}

#topspacer{
  display:none;
}

/* ---------------------------------------------------------
   photoslide / holiscroll
   --------------------------------------------------------- */
#topslide{
  position:relative;
  z-index:2;
  background-color:#fff;
}

/* ---------------------------------------------------------
   FDE about
   --------------------------------------------------------- */
.fde-about{
  position:relative;
  z-index:2;
  overflow:hidden;
  width:100%;
  max-width:1920px;
  margin:0 auto;
  padding:0 20px 60px;
  background-color:#f4f1eb;
  background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),url(../img/backgrounds/paper-texture.jpg);
  background-position:center;
  background-size:cover;
  color:var(--dse-ink);
}
.fde-about-title{
  margin:110px 0 40px;
  text-align:center;
  font-size:clamp(26px, 7vw, 30px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.fde-about-copy{
  max-width:1000px;
  margin:0 auto;
  text-align:left;
  font-size:16px;
  font-weight:700;
  line-height:2.6;
  letter-spacing:0;
}
.fde-about-copy p{
  margin:0 0 34px;
}
.fde-about-image{
  width:100%;
  margin:54px auto 0;
}
.fde-about-image img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

@media screen and (min-width:769px){
  .fde-about{
    padding:100px 5vw;
  }
  .fde-about-title{
    margin:80px auto 50px;
    text-align:center;
    font-size:clamp(36px, 3vw, 48px);
    line-height:1.3;
  }
  .fde-about-copy{
    text-align:center;
    font-size:18px;
    line-height:2.3;
  }
  .fde-about-copy p{
    margin:10px auto 36px;
  }
  .fde-about-image{
    width:min(100%, 1520px);
    margin:70px auto 0;
    overflow:visible;
  }
  .fde-about-image img{
    width:100%;
    max-width:100%;
    padding-right:0;
  }
}

.holiscroll{
  --sticky-container-height:100vh;
  height:var(--sticky-container-height);
  min-height:100vh;
  box-sizing:border-box;
}
.holiscroll .holiscroll-sticky{
  /* mobile は 1 サイズのみ (PC は 769px 以降で 20px) */
  position:sticky;
  top:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:100vh;
  font-weight:400;
  font-size:15px;
  letter-spacing:1.4px;
}
.holiscroll .holiscroll-scroller{
  display:flex;
  overflow:auto;
  height:100svh;
  flex-wrap:nowrap;
  overflow-x:scroll;
  -webkit-overflow-scrolling:touch;
}
.holiscroll .holiscroll-scroller > *{
  flex-shrink:0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0 20px;
  line-height:2.24;
  letter-spacing:.12em;
  position:relative;
  font-weight:400;
}
.holiscroll .holiscroll-scroller.nobar{
  overflow:hidden;
}

.photoslide-item-com{
  font-weight:700;
  color:var(--dse-ink);
}
.photoslide-item-img{
  position:relative;
}
/* img に width/height 属性を持たせても CSS の width 指定で縦横比が保たれるように */
.item-photo{
  height:auto;
}
.holiscroll .holiscroll-scroller .photoslide-item .photoslide-item-com{
  max-width:100vw;
}

/* ---- end slide (icon grid) ---- */
.holiscroll .holiscroll-scroller .photoslide-item-iconimage{
  width:100vw;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  height:100svh;
  /* align-content を指定しないと 2 行 (画像 / コピー) が引き伸ばされ、
     行間に意図しない余白ができる。mobile は下寄せにしてボタンを画面下部に置く */
  align-items:center;
  align-content:flex-end;
  padding-top:0;
  /* 下寄せのままだと画面が高いほど画像が下へ流れるため、下余白を画面高さに
     連動させて増やし、画像の中心が画面中央に近づくようにする。
     447px = コンテンツ全体の高さ(約612px) - 画像の中心までの高さ(165px) */
  padding-bottom:max(6svh, calc(50svh - 447px));
}
.holiscroll .holiscroll-scroller .photoslide-item-iconimage .end-visual{
  order:1;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.holiscroll .holiscroll-scroller .photoslide-item-iconimage .end-visual>img{
  /* 幅・高さとも auto にして上限だけ与え、縦横比を保ったまま収める */
  width:auto;
  height:auto;
  max-width:88vw;
  max-height:50svh;
}
.holiscroll .holiscroll-scroller .photoslide-item-iconimage .grid-bottom{
  order:2;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:3svh;
}
.holiscroll .holiscroll-scroller .photoslide-item-iconimage .viewmore-btn{
  align-self:center;
  margin-top:4svh;
}
.end-copy{
  margin:0 auto;
  /* 1行が長くなりすぎないよう文字数で上限を決める */
  max-width:min(88vw, 26em);
  color:var(--dse-ink);
  font-weight:700;
  font-size:17px;
  line-height:2.1;
  letter-spacing:.08em;
  text-align:center;
  /* 日本語の改行位置を文節単位にし、行長も均等に寄せる (未対応ブラウザでは通常の折り返し) */
  word-break:auto-phrase;
  text-wrap:balance;
}
.end-copy .nobr{
  white-space:nowrap;
}

/* ---- layout 0 : leading spacer ---- */
.holiscroll .holiscroll-scroller .photoslide-item.-layout0{
  width:100svh;
  height:auto;
  display:block;
  background:transparent;
  padding:0;
  margin:0;
}

/* ---- layout 1 ---- */
.holiscroll .holiscroll-scroller .photoslide-item.-layout1{
  width:auto;
  flex-direction:column;
  height:90svh;
  /* 次スライドとの間隔。既定の 20px だと layout2 に近すぎる */
  padding-right:17vw;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout1 .photoslide-item-com{
  order:2;
  padding-top:50px;
  padding-right:1em;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout1 .photoslide-item-img{
  order:1;
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-start;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout1 .photoslide-item-img>img{
  /* width:% は元画像の実寸に対する割合になり素材差でサイズが暴れる。
     かといって height を固定すると、縦長画面で max-width が効いたときに
     幅だけ縮んで変形する。width/height は auto のままにして上限だけ与えると、
     どちらの辺が先に頭打ちになっても縦横比が保たれる */
  width:auto;
  height:auto;
  max-width:60vw;
  max-height:46svh;
  margin:0 0 auto 0;
}

/* ---- layout 2 ---- */
.holiscroll .holiscroll-scroller .photoslide-item.-layout2{
  flex-direction:row;
  width:120vw;
  flex-wrap:wrap;
  align-items:center;
  position:relative;
  justify-content:flex-start;
  height:70svh;
  margin:20% 0 0 0;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout2 .photoslide-item-com{
  text-align:left;
  width:100%;
  /* スライド上端に寄りすぎていたため写真側へ寄せる */
  padding-top:4svh;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout2 .photoslide-item-img{
  padding:14% 0 0;
  width:80%;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout2 .photoslide-item-img>img{
  /* width:% だとスライド幅 (120vw) 依存で、横広・縦短な端末ではスライドの
     高さ (70svh) を超えてしまう。width/height は auto にして上限だけ与え、
     幅・高さどちらが先に頭打ちになっても縦横比を保ったまま収まるようにする */
  width:auto;
  height:auto;
  max-width:69vw;
  max-height:48svh;
  display:block;
  margin:0 auto;
}

/* ---- layout 3 ---- */
.holiscroll .holiscroll-scroller .photoslide-item.-layout3{
  display:flex;
  /* 30vw だと layout2 との間隔が他の倍近くまで開いてしまう */
  padding-left:8vw;
  padding-right:0;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub{
  /* 30svh だと他スライドより明らかに沈むため控えめに (PC は 0 で上書き) */
  padding-top:15svh;
  /* モバイルは画像が上・コピーが下 (PC は column で逆順にせず、コピーを下に置く) */
  display:flex;
  flex-direction:column-reverse;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub .photoslide-item-img{
  /* コピーとの間隔。20px だと他スライド (40〜128px) に比べて詰まりすぎる */
  padding:20px 0 72px;
  position:relative;
  display:block;
  /* executive-pressure.png は余白なしでトリミングされた素材のため、他スライドと
     絵の大きさを揃えるには枠を小さめにする必要がある */
  max-width:61.5vw;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub .photoslide-item-img>img{
  /* 幅だけの指定だと縦の短い画面でスライドからはみ出すため、高さにも上限を置く */
  width:auto;
  height:auto;
  max-width:61.5vw;
  max-height:43svh;
}

/* ---- layout 4 ---- */
.holiscroll .holiscroll-scroller .photoslide-item.-layout4{
  /* コピーが直前の photo05 と同じ高さに並ぶため、20px しか離れていないと
     photo05 の説明文に見えてしまう。左に余白を足して切り分ける
     (width も同じ分だけ広げてコンテンツ幅は据え置く) */
  width:122vw;
  padding-left:22vw;
  height:80svh;
  flex-direction:column;
  gap:8svh;
  padding-top:20svh;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout4 .photoslide-item-com{
  /* モバイルはコピーが上・画像が下 (PC も order:0 なので実質共通) */
  order:0;
  width:100%;
  display:flex;
  padding-left:0;
  justify-content:flex-start;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout4 .photoslide-item-img{
  width:100%;
  display:block;
  position:relative;
  padding:40px;
}
.holiscroll .holiscroll-scroller .photoslide-item.-layout4 .photoslide-item-img>img{
  /* 幅だけの指定だと縦の短い画面でスライドからはみ出すため、高さにも上限を置く */
  width:auto;
  height:auto;
  max-width:68.8vw;
  max-height:48.4svh;
  margin:0 auto;
  display:block;
}

/* ---- buffer ---- */
.holiscroll .holiscroll-scroller .photoslide-item.buffer-slide{
  width:50vw;
  height:50svh;
  position:absolute;
  z-index:0;
  pointer-events:none;
  visibility:hidden;
}




/* =========================================================
   769px -  (PC)
   ========================================================= */

/* =========================================================
   products
   ========================================================= */
.products-wrap{
  position:relative;
  z-index:2;
  background-color:#fff;
}

/* ---- title ---- */
/* 外側を 2 画面分の高さにし、内側を sticky で貼り付けることで
   「1 画面ぶんスクロールしても画面が変わらない」状態を作る
   (#topslide の .holiscroll と同じ仕組み) */
.products-wrap .title-sticky{
  position:relative;
  /* 100svh を超えた分だけ画面が固定される (150svh → 0.5画面ぶん) */
  height:150svh;
}
.products-wrap .title-wrap{
  position:sticky;
  top:0;
  /* end-slide と同じく1画面を占有するブロック */
  height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:22px;
  margin:0;
  padding:0 20px;
  box-sizing:border-box;
  background-color:var(--dse-primary);
}
.products-wrap .title-img{
  margin:0;
  font-family:"LINE Seed JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-weight:800;
  font-size:min(8.2vw,36px);
  line-height:1.15;
  letter-spacing:.01em;
  color:#fff;
}
.products-title-with-mark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fde-accompany-mark{
  position:absolute;
  z-index:1;
  top:-82px;
  right:-6px;
  display:grid;
  width:84px;
  height:84px;
  place-items:center;
  background:#071d2c;
  color:#fff;
  clip-path:polygon(50% 0%,57% 16%,69% 4%,72% 22%,89% 13%,85% 31%,100% 34%,87% 45%,100% 56%,84% 61%,90% 77%,73% 74%,69% 95%,57% 83%,48% 100%,40% 83%,26% 94%,24% 75%,6% 80%,14% 62%,0 55%,15% 45%,0 34%,17% 29%,11% 12%,29% 21%,34% 3%,44% 17%);
  transform:rotate(-8deg);
  font-size:14px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:.02em;
  text-align:center;
}
.fde-accompany-mark span{
  transform:rotate(8deg);
}
.title-sub{
  margin:0;
  max-width:min(92vw, 30em);
  font-size:15px;
  font-weight:700;
  line-height:2;
  letter-spacing:.06em;
  color:#fff;
  word-break:auto-phrase;
  text-wrap:balance;
}

/* ---- item ---- */
.products-item-wrap{
  display:flex;
  flex-direction:column;
}
.products-item{
  position:relative;
}
.products-item.item-image{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1 / 1;
  background-color:var(--dse-primary-pale);
}
.products-demo-video{
  display:block;
  width:80%;
  height:80%;
  object-fit:contain;
}
.products-item.item-content{
  display:flex;
  flex-direction:column;
  padding:33px 24px 40px;
  color:#fff;
}
.bk-primary{
  background-color:var(--dse-primary);
}
#products-item02{
  --product-accent:#e8401a;
  --product-accent-pale:#fefcfa;
  --product-ink:#1a1917;
}
#products-item02 .bk-primary{
  color:var(--product-ink);
  background-color:var(--product-accent-pale);
  background-image:linear-gradient(
    to bottom,
    var(--product-accent-pale) 0%,
    var(--product-accent-pale) 8%,
    #fefbf8 34%,
    #fce8df 68%,
    #fbcfd3 100%
  );
}
#products-item02 .products-item.item-image{
	background-color:var(--product-accent-pale);
}
#products-item02 .name-typeB{
	color:var(--product-accent);
}
#products-item02 .squadbase-logo{
  display:block;
  width:min(100%, 268px);
  height:auto;
}
#products-item02 .viewmore-btn{
  --btn-line:var(--product-ink);
  --btn-hover-bg:var(--product-ink);
  --btn-hover-text:#fff;
}
#products-item02 .products-benefits{
  border-color:rgba(26,25,23,.22);
}
#products-item02 .products-benefits li+li{
  border-color:rgba(26,25,23,.14);
}
#products-item03{
  --product-accent:#070707;
  --product-ink:#070707;
  --product-video-border:#70a6f7;
}
#products-item03 .bk-primary{
  color:var(--product-ink);
  background-color:#d1e2fc;
  background-image:linear-gradient(to bottom,#fff 0%,#d1e2fc 100%);
}
#products-item03 .item-image{
  background-color:#fff;
}
#products-item03 .products-demo-video{
  box-sizing:border-box;
  height:auto;
  aspect-ratio:16 / 9;
  border:2px solid var(--product-video-border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(112,166,247,.18);
}
#products-item03 .sigma-logo{
  display:block;
  width:min(100%, 222px);
  height:auto;
}
#products-item03 .viewmore-btn{
  --btn-line:var(--product-ink);
  --btn-hover-bg:var(--product-ink);
  --btn-hover-text:#fff;
}
#products-item03 .products-benefits{
  border-color:rgba(7,7,7,.22);
}
#products-item03 .products-benefits li+li{
  border-color:rgba(7,7,7,.14);
}
#products-item04 .bk-primary{
  color:var(--dse-ink);
  background-color:#f7fbfe;
  background-image:linear-gradient(
    to bottom,
    #f7fbfe 0%,
    #f7fbfe 8%,
    #eaf8fd 34%,
    #afe6f7 68%,
    #29b5e8 100%
  );
}
#products-item04 .item-image{
  background-color:#f7fbfe;
}
#products-item04 .snowflake-service-title{
  color:var(--dse-primary);
}
#products-item04 .snowflake-logo{
  display:block;
  width:min(100%, 250px);
  height:auto;
}
#products-item04 .products-name .name-typeA{
  margin-bottom:16px;
}
#products-item04 .viewmore-btn{
  --btn-line:var(--dse-ink);
  --btn-hover-bg:var(--dse-ink);
  --btn-hover-text:#fff;
}
#products-item04 .products-benefits{
  border-color:rgba(12,31,44,.22);
}
#products-item04 .products-benefits li+li{
  border-color:rgba(12,31,44,.14);
}
#products-item04 .products-service-image{
  display:block;
  width:64%;
  height:auto;
  min-width:0;
  box-sizing:border-box;
  border:2px solid #29B5E8;
  border-radius:12px;
  object-fit:contain;
  box-shadow:0 8px 24px rgba(41,181,232,.18);
}
@media screen and (max-width:768px){
  #products-item02 .dis-sp .products-item-wrap > .item-content:first-child,
  #products-item03 .dis-sp .products-item-wrap > .item-content:first-child,
  #products-item04 .dis-sp .products-item-wrap > .item-content:first-child{
    align-items:center;
    padding:52px 24px 28px;
    text-align:center;
  }
  #products-item02 .dis-sp .products-item-wrap > .item-content:first-child{
    background-image:linear-gradient(
      to bottom,
      #fbcfd3 0%,
      #fce8df 32%,
      #fefbf8 66%,
      var(--product-accent-pale) 100%
    );
  }
  #products-item03 .dis-sp .products-item-wrap > .item-content:first-child{
    background-image:linear-gradient(
      to bottom,
      #d1e2fc 0%,
      #edf4fe 55%,
      #fff 100%
    );
  }
  #products-item04 .dis-sp .products-item-wrap > .item-content:first-child{
    background-image:linear-gradient(
      to bottom,
      #29b5e8 0%,
      #afe6f7 42%,
      #eaf8fd 72%,
      #f7fbfe 100%
    );
  }
  #products-item02 .dis-sp .products-item-wrap > .item-content:first-child .products-name,
  #products-item03 .dis-sp .products-item-wrap > .item-content:first-child .products-name,
  #products-item04 .dis-sp .products-item-wrap > .item-content:first-child .products-name{
    width:100%;
    margin:0;
  }
  #products-item02 .dis-sp .squadbase-logo{
    width:min(100%, 220px);
    margin-inline:auto;
  }
  #products-item03 .dis-sp .sigma-logo{
    width:min(100%, 183px);
    margin-inline:auto;
  }
  #products-item04 .dis-sp .snowflake-logo{
    width:min(100%, 225px);
    margin-inline:auto;
  }
  #products-item02 .dis-sp .viewmore-btn,
  #products-item03 .dis-sp .viewmore-btn,
  #products-item04 .dis-sp .viewmore-btn{
    align-self:center;
  }
}
.products-name{
  margin:0 0 14px;
}
.name-typeA{
  margin:0 0 8px;
  font-family:"LINE Seed JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:normal;
  line-height:1;
}
.name-typeB{
  margin:0;
  font-size:34px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
}
.products-comment p{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.9;
  letter-spacing:.06em;
}
.products-benefits{
  margin:0;
  padding:0;
  list-style:none;
}
.products-benefits li{
  padding:18px 0;
}
.products-benefits li+li{
  border-top:1px solid rgba(255,255,255,.24);
}
.benefit-title,
.benefit-copy{
  display:block;
  letter-spacing:normal;
}
.benefit-title{
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}
.benefit-copy{
  margin-top:4px;
  font-size:14px;
  font-weight:500;
  line-height:1.65;
  opacity:.88;
}
.viewmore-btn{
  /* 配色は変数で持たせ、背景の明暗でバリエーションを切り替える */
  --btn-line:#fff;
  --btn-hover-bg:#fff;
  --btn-hover-text:var(--dse-primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-top:28px;
  padding:0 30px;
  min-width:200px;
  height:48px;
  border:1.6px solid var(--btn-line);
  border-radius:999px;
  box-sizing:border-box;
  font-family:"industry","LINE Seed JP","Helvetica Neue",Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--btn-line);
  text-decoration:none;
  transition:background-color .3s ease, color .3s ease;
}
.viewmore-btn:hover{
  background-color:var(--btn-hover-bg);
  color:var(--btn-hover-text);
}
/* 白背景に置く場合 */
.viewmore-btn.-onlight{
  --btn-line:var(--dse-primary);
  --btn-hover-bg:var(--dse-primary);
  --btn-hover-text:#fff;
}

@media screen and (min-width:769px){
  /* ---- products ---- */
  .products-wrap .title-wrap{
    gap:5svh;
    padding:0 72px;
  }
  .products-wrap .title-img{
    /* セクションの顔として強く見せるため大きく。狭い PC 幅でも 1 行に収まる範囲 */
    font-size:min(9vw,150px);
    letter-spacing:-.02em;
  }
  .fde-accompany-mark{
    top:-88px;
    right:-92px;
    width:132px;
    height:132px;
    font-size:20px;
  }
  .title-sub{
    max-width:min(64vw, 32em);
    font-size:clamp(19px, 1.5vw, 24px);
    line-height:2.1;
    opacity:.92;
  }
  .products-item-wrap{
    flex-direction:row;
    height:100svh;
  }
  .products-item.item-image{
    width:62%;
    aspect-ratio:auto;
  }
  .products-item.item-content{
    width:38%;
    justify-content:center;
    padding:0 50px;
  }
  .name-typeA{
    font-size:16px;
    margin-bottom:8px;
  }
  .name-typeB{
    font-size:52px;
  }
  #products-item04 .snowflake-service-title{
    font-size:clamp(38px, 4vw, 52px);
  }
  #products-item04 .products-service-image{
    width:52%;
  }
  .products-comment p{
    font-size:14px;
  }
  .products-benefits li{
    padding:14px 0;
  }
  .benefit-title{
    font-size:17px;
  }
  .benefit-copy{
    font-size:13px;
  }
  .viewmore-btn{
    margin-top:36px;
  }


  /* ---- KV ---- */
  section#kv{
    position:fixed;
  }
  .kv-sp{
    display:none;
  }
  .kv-pc{
    position:relative;
    height:100svh;
    overflow:hidden;
    background-color:var(--dse-grey);
  }
  .kv-pc::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.05) 42%,rgba(255,255,255,0) 70%);
    pointer-events:none;
    z-index:1;
  }
  .kv-pc .tagline{
    position:absolute;
    width:100%;
    top:20%;
    left:0;
    text-align:center;
    color:var(--dse-ink);
    /* 画面幅に連動させつつ、狭い PC 幅では従来の 22px を下限として維持 */
    font-size:clamp(22px, 2.4vw, 38px);
    font-weight:400;
    letter-spacing:.16em;
    z-index:2;
  }

  .kv-logo{
    position:fixed;
    margin:0;
    bottom:.5vh;
    left:50%;
    top:auto;
    transform:translate(-50%);
    width:98%;
    max-width:98%;
    z-index:2;
    /* 文字サイズを vw ではなく「この箱の実幅」基準にするためのコンテナ指定。
       vw はスクロールバー幅を含むため、% 指定の箱幅とズレて右に寄る */
    container-type:inline-size;
  }
  .kv-logo-text{
    color:var(--dse-ink);
    font-size:calc(98vw / 12.1);       /* fallback (cqw 非対応ブラウザ) */
    font-size:calc(100cqw / 12.1);
    line-height:1;
    letter-spacing:-.005em;
    text-align:center;
    white-space:nowrap;
  }

  #topspacer{
    display:block;
    width:100%;
    height:100svh;
    position:relative;
    z-index:0;
  }

  /* ---- holiscroll ---- */
  .holiscroll .holiscroll-sticky{
    font-size:20px;
  }

  .holiscroll .holiscroll-scroller .photoslide-item-iconimage{
    /* 画像 + コピーのブロックを画面の縦中央に置く (上下の余白が均等になる) */
    height:100svh;
    align-items:center;
    align-content:center;
    padding-top:0;
    padding-bottom:0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item-iconimage .end-visual>img{
    max-width:44vw;
    /* ボタンを足したぶん画像を控えめにして上下の余白を確保する */
    max-height:48svh;
  }
  .holiscroll .holiscroll-scroller .photoslide-item-iconimage .viewmore-btn{
    /* コピーとの視覚的な差が開きすぎないよう PC では大きめに */
    min-width:250px;
    height:58px;
    font-size:16px;
  }
  .holiscroll .holiscroll-scroller .photoslide-item-iconimage .grid-bottom{
    margin-top:4svh;
  }
  .holiscroll .holiscroll-scroller .photoslide-item-iconimage .grid-item.grid-bottom{
    margin-top:0;
  }
  .end-copy{
    /* 文字サイズと幅の両方を vw で連動させ、ビューポート幅が変わっても
       行数と行の埋まり方を一定に保つ */
    max-width:68vw;
    font-size:1.9vw;
    line-height:2;
    /* balance は行を短く揃えてしまい幅が埋まらないため、PC では解除 */
    text-wrap:auto;
  }

  /* layout0 */
  .holiscroll .holiscroll-scroller .photoslide-item.-layout0{
    width:75vw;
  }

  /* layout1 */
  .holiscroll .holiscroll-scroller .photoslide-item.-layout1{
    height:60svh;
    flex-direction:row;
    /* 次スライド (layout2) のコピーとの間隔。既定の 20px だと写真に近すぎて
       photo01 の説明に見えるため、他スライドと同じ 130〜150px に揃える */
    padding-right:8vw;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout1 .photoslide-item-com{
    order:0;
    padding-top:0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout1 .photoslide-item-img{
    order:0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout1 .photoslide-item-img>img{
    max-width:19vw;
    max-height:45svh;
  }

  /* layout2 */
  .holiscroll .holiscroll-scroller .photoslide-item.-layout2{
    width:40vw;
    height:80svh;
    justify-content:center;
    /* 下寄せのままだと他スライドより明らかに沈むため、下に余白を取って持ち上げる */
    margin:auto 0 18svh 0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout2 .photoslide-item-com{
    padding-top:7svh;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout2 .photoslide-item-img{
    width:60%;
    padding:0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout2 .photoslide-item-img>img{
    /* PC では他スライドに比べて小さかったため、ラッパー幅いっぱいまで広げる */
    width:95%;
    max-width:none;
    max-height:none;
    margin:0 0 0 auto;
  }

  /* layout3 */
  .holiscroll .holiscroll-scroller .photoslide-item.-layout3{
    padding-left:20px;
    padding-right:20px;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub{
    padding-top:0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub{
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
  }
  /* PC はコピーを photo05 の下に置く */
  .holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub .photoslide-item-com{
    order:2;
    padding:48px 0 0 60px;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub .photoslide-item-img{
    order:1;
    padding:20px 40px 0 60px;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout3 .photoslide-item-sub .photoslide-item-img>img{
    /* executive-pressure.png は余白なしの素材なので、tool-adoption.png と同じ大きさに見えるよう控えめに */
    width:18.9vw;
    max-width:none;
    max-height:none;
  }

  /* layout4 */
  .holiscroll .holiscroll-scroller .photoslide-item.-layout4{
    /* 直前の photo05 とコピーが近すぎて photo05 の説明に見えるため、
       他スライドと同じ間隔 (約150px) になるよう左に余白を足す。
       width も同じ分だけ広げてコンテンツ幅は据え置く */
    width:55vw;
    padding-left:5vw;
    gap:0;
    padding-top:0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout4 .photoslide-item-com{
    order:0;
  }
  .holiscroll .holiscroll-scroller .photoslide-item.-layout4 .photoslide-item-img>img{
    width:45%;
    max-width:none;
    max-height:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .scroll svg{animation:none;}
}