@charset "UTF-8";
/* ==========================================================================
   株式会社ファインフォース コーポレートサイト
   基準：1rem ＝ 画面幅に応じて 10px〜14px（スマホは 9.6px〜11px）
   色・余白・書体は下の「共通の設定」でまとめて変更できます
   ========================================================================== */

/* --------------------------------------------------------------
   共通の設定（色や動きの速さはここを変えると全体に反映されます）
   -------------------------------------------------------------- */
:root{
  --black:      #0B0D22;  /* ヒーローの黒（紺に寄せた黒） */
  --black2:     #1A1D34;  /* ヒーロー上部の帯 */
  /* コーポレートカラー（DIC256／C100 M100 Y0 K0／RGB 35,37,132）を基点に、
     下へ向かって少しずつ深くなるグラデーションを組んでいます */
  --navy:       #232784;  /* 指定色。事業内容の上端 */
  --navy-2:     #1E2270;  /* 製品について あたり */
  --navy-3:     #191C5C;  /* 会社情報・ニュース・お問い合わせ */
  --navy-deep:  #12143F;  /* いちばん深い面（お問い合わせ下端） */
  --gray:       #EAEAEC;  /* 会社概要・フッターの背景 */
  --ink:        #303038;  /* 明るい面の文字色 */

  --e1: cubic-bezier(.28,.14,0,.96);
  --e2: cubic-bezier(.46,.12,.14,.94);
  --e3: cubic-bezier(.16,1,.6,.94);
}

/* --------------------------------------------------------------
   リセット
   -------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
a{color:#fff;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse}
main,article,aside,figure,figcaption{display:block}  /* 古いブラウザ向け */
address{font-style:normal}
ul,ol{list-style:none}
::selection{background:#fff;color:var(--navy)}

html{font-size:clamp(10px, calc(0.3125vw + 7px), 14px);scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  color:#fff;background:var(--black);
  font-size:1.6rem;line-height:1.8;letter-spacing:.04rem;font-weight:400;
  font-feature-settings:'palt';text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden}

/* 書体のユーティリティ */
.t-lat{font-family:"Barlow","Helvetica Neue",Arial,sans-serif;letter-spacing:0;font-feature-settings:'palt'}
.t-num{font-family:"Montserrat",sans-serif;font-weight:400;letter-spacing:normal}
.t-caps{text-transform:uppercase}

/* 表示の出し分け */
.u-sponly{display:none}
.u-pconly{display:block}

/* 幅と余白
   ※上下の余白は各セクション側で指定するため、ここでは左右だけを指定しています
     （padding の一括指定にすると、各セクションの上下余白を打ち消してしまいます） */
.l-frame{padding-left:8rem;padding-right:8rem}
.l-hold{max-width:110rem;margin:0 auto}

/* メニューから飛んだときに見出しが隠れないようにする */
[id]{scroll-margin-top:10rem}


/* ==========================================================================
   下線が伸びるリンク（.uline の中の .uline-mid）
   ========================================================================== */
.uline .uline-mid,
.uline .uline-lead{
  display:inline-block;
  background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-size:0 1px;
  transition:background-size .3s var(--e3);
}
.uline .uline-mid{vertical-align:middle;background-position:right 0 bottom 10%}
.uline .uline-lead{background-position:right 0 bottom 0}

.uline a:hover .uline-mid,
.uline a.uline-mid:hover,
.uline button:hover.uline-mid,
.uline .uline-mid.is-on{background-position:left 0 bottom 10%;background-size:100% 1px}
.uline .uline-lead:hover{background-position:left 0 bottom 0;background-size:100% 1px}

/* 明るい面（会社概要・フッター）では線と文字を濃色に */
.profile .uline .uline-mid,
.profile .uline .uline-lead,
#site-end .uline .uline-mid,
#site-end .uline .uline-lead{background-image:linear-gradient(var(--ink),var(--ink))}


/* ==========================================================================
   ボタン
   .pill … 横長のピル型／.disc … 円形の READMORE
   ========================================================================== */
.pill{
  display:inline-block;position:relative;z-index:1;overflow:hidden;
  line-height:4.8rem;border-radius:100px;padding:0 3.4rem 0 4.8rem;
  font-size:1.35rem;letter-spacing:.08em;white-space:nowrap;
  background:rgba(255,255,255,.06);
  box-shadow:0 3px 5px 0 rgba(12,2,0,.25),-.342px -.94px 3px 0 rgba(255,255,255,.07);
  transition:background-color .4s var(--e1),color .4s var(--e1),box-shadow .4s var(--e1);
}
.pill::before{
  content:"";position:absolute;left:2.6rem;top:0;bottom:0;margin:auto;
  width:.6rem;height:.6rem;border-radius:100px;background:#fff;
  transition:transform .5s var(--e2),background-color .4s var(--e1);
}
.pill span{position:relative;z-index:1;display:inline-block;transition:transform .4s var(--e2)}
.pill:hover{background:#fff;color:var(--navy-3);box-shadow:0 8px 18px 0 rgba(0,0,0,.3)}
.pill:hover::before{background:var(--navy-3);transform:translateX(.6rem)}
.pill:hover span{transform:translateX(.6rem)}
.pill--wire{background:transparent;border:1px solid rgba(255,255,255,.55)}

.disc{
  display:inline-block;position:relative;z-index:1;overflow:hidden;
  width:10rem;height:10rem;border-radius:100px;text-align:center;
  padding-top:3.6rem;font-size:1.25rem;line-height:1.6;letter-spacing:.06em;
  background:rgba(255,255,255,.06);
  box-shadow:0 3px 6px 0 rgba(12,2,0,.15),-.5px -.866px 3px 0 rgba(255,255,255,.07);
  transition:background-color .4s var(--e1),color .4s var(--e1),box-shadow .4s var(--e1);
}
.disc::before{
  content:"";position:absolute;left:0;right:0;margin:auto;top:6.1rem;
  width:.6rem;height:.6rem;border-radius:100px;background:#fff;
  transition:transform .5s var(--e2),background-color .4s var(--e1);
}
.disc span{position:relative;z-index:1;display:inline-block;transition:transform .4s var(--e2)}
.disc:hover{background:#fff;color:var(--navy-3);box-shadow:0 10px 22px 0 rgba(0,0,0,.28)}
.disc:hover::before{background:var(--navy-3);transform:translateY(.5rem)}
.disc:hover span{transform:translateY(-.4rem)}


/* ==========================================================================
   カーソル追従の丸（PCのみ）
   ========================================================================== */
.pointer-dot{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:100px;background:#fff;
  mix-blend-mode:difference;opacity:0;
  transition:opacity .4s var(--e1),width .4s var(--e1),height .4s var(--e1),margin .4s var(--e1);
}
.pointer-dot.is-on{opacity:1}
.pointer-dot.is-hover{width:5rem;height:5rem;margin:-2.5rem 0 0 -2.5rem;opacity:.85}


/* ==========================================================================
   ローディング
   ========================================================================== */
.curtain{position:fixed;z-index:500;inset:0;transition:visibility 0s 1.2s}
.curtain.is-ready{visibility:hidden}
.curtain__veil{position:absolute;inset:0;background:var(--black);transition:opacity .8s var(--e2)}
.curtain.is-ready .curtain__veil{opacity:0}
.curtain__stage{position:absolute;z-index:10;top:50%;left:50%;width:22rem;margin:-1.5rem 0 0 -11rem}
.curtain__mark{animation:ff-mark-blink 2.4s linear infinite}
.curtain.is-ready .curtain__stage{animation:ff-mark-out .3s linear forwards}
#curtain-bar{position:absolute;z-index:11;inset:0 auto auto 0;width:100%;height:3px;background:#fff;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease}
.curtain.is-ready #curtain-bar{opacity:0;transition:opacity .3s}
@keyframes ff-mark-blink{
  0%{opacity:.25}50%{opacity:1}100%{opacity:.25}
}
@keyframes ff-mark-out{
  0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}
}


/* ==========================================================================
   ヘッダー
   ========================================================================== */
#site-top{position:relative;z-index:100;opacity:0;transition:opacity 1s var(--e1);transition-delay:1.4s}
#site-top.is-ready{opacity:1}

.site-top__bar{position:fixed;z-index:100;inset:0 0 auto;height:0}

/* ロゴ。スクロールすると、左のシンボル部分だけを残して幅が縮みます
   （固定ヘッダーなので、横長のまま本文の上に居座ると読みにくくなるため）
   ※ --sig-w はロゴ画像そのものの幅。width は「見せている幅」です */
.site-top__sig{--sig-w:21.4rem;position:relative;z-index:11;width:var(--sig-w);overflow:hidden;
  transform:translate(7.2rem,6rem);
  transition:transform .4s var(--e2),width .4s var(--e2)}
.site-top__sig a{display:block;position:relative}
.site-top__sig img{width:var(--sig-w);max-width:none}
.site-top__sig .sig--dark{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s var(--e1)}
.site-top__sig .sig--light{transition:opacity .4s var(--e1)}
.is-scroll .site-top__sig{transform:translate(3rem,3.4rem);width:5.2rem}
/* 明るいセクションに入ったらロゴを紺に切り替える */
.is-light .site-top__sig .sig--light{opacity:0}
.is-light .site-top__sig .sig--dark{opacity:1}

.site-top__util{position:absolute;right:0;top:0;display:flex;align-items:center;
  transform:translate(-6.4rem,5.2rem);transition:transform .4s var(--e2)}
.is-scroll .site-top__util{transform:translate(-3rem,3.2rem)}
.site-top__nav{display:flex}
.site-top__nav a{opacity:.5;font-size:1.5rem;transition:opacity .3s var(--e1)}
.site-top__nav a+a{margin-left:3.56rem}
.site-top__nav a:hover{opacity:1}
.site-top__cta{margin-left:4.4rem}
.is-light .site-top__nav a{color:var(--ink)}
.is-light .site-top__cta{color:var(--ink);border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.04)}
.is-light .site-top__cta::before{background:var(--ink)}
.is-light .site-top__cta:hover{background:var(--ink);color:#fff}
.is-light .site-top__cta:hover::before{background:#fff}
.is-light .site-top__nav .uline-mid::before{background-color:var(--ink)}

.site-top__tag{
  position:fixed;z-index:100;top:6.4rem;right:1.8rem;
  font-size:1.15rem;letter-spacing:.14em;opacity:.4;white-space:nowrap;
  transform-origin:right top;transform:rotate(90deg) translate(100%,0);
}
.is-light .site-top__tag{color:var(--ink)}

/* スマートフォン用メニューボタン */
.hamb{display:none;position:fixed;z-index:12;top:1.4rem;right:1.4rem;
  width:5.2rem;height:5.2rem;border-radius:100px;background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px)}
.hamb__bar,
.hamb__bar::before,
.hamb__bar::after{
  content:"";position:absolute;left:1.6rem;width:2rem;height:1px;background:#fff;
  transition:transform .4s var(--e2),opacity .3s var(--e1)}
.hamb__bar{top:2.6rem}
.hamb__bar::before{left:0;top:-.7rem}
.hamb__bar::after{left:0;top:.7rem}
.is-light .hamb__bar,
.is-light .hamb__bar::before,
.is-light .hamb__bar::after{background:var(--ink)}
.is-menu .hamb__bar{background:transparent}
.is-menu .hamb__bar::before{transform:translateY(.7rem) rotate(45deg)}
.is-menu .hamb__bar::after{transform:translateY(-.7rem) rotate(-45deg)}

.sheet{position:fixed;z-index:10;inset:0;background:rgba(16,15,16,.94);
  backdrop-filter:blur(8px);opacity:0;visibility:hidden;
  transition:opacity .5s var(--e1),visibility 0s .5s;
  display:flex;align-items:center;justify-content:center}
.is-menu .sheet{opacity:1;visibility:visible;transition:opacity .5s var(--e1),visibility 0s}
.sheet__nav{display:flex;flex-direction:column;gap:2.6rem;padding:0 8rem}
.sheet__nav a{color:#fff;font-size:2.2rem;font-weight:500}
.sheet__nav i{display:inline-block;font-style:normal;font-size:1.2rem;opacity:.45;margin-right:1.8rem;letter-spacing:.1em}


/* ==========================================================================
   ヒーロー
   ========================================================================== */
/* --band ＝ 上部の帯の高さ。中央マークの位置もこの値を基準にしています
   ⚠ vh には必ず上限（clamp の3つ目の値）を付けてください。
     Googlebot は画面の縦をページ全体の長さまで引き伸ばして描くため、
     上限が無いと帯が数千pxに膨らみ、見出しや本文が画面のはるか下へ押し出されます
     （2026.10.05 修正。それまでは max(44vh,26rem) / スマホ max(34vh,16rem)） */
.keyv{--band:clamp(26rem,44vh,56rem);
  /* 下へ行くほど紺へ寄せ、事業内容セクションと段差なくつなげています */
  background:linear-gradient(180deg,
    var(--black) 0%,
    var(--black) 64%,
    #0E1030 77%,
    var(--navy-deep) 86%,
    var(--navy-3) 93%,
    var(--navy-2) 97.5%,
    var(--navy) 100%);
  position:relative;z-index:1;min-height:min(100vh,120rem);padding-bottom:6rem;overflow:hidden}

/* 上部を流れる写真（もとは大きな英字が流れていた場所です）
   写真は暗く落として彩度を抑え、上下を暗くぼかして帯になじませています */
.keyv__band{height:var(--band);background:var(--black2);overflow:hidden;position:relative;z-index:1}

/* 写真の上にかぶせる暗い膜。下へ行くほど濃くして、ヒーロー本体へつなげます */
.keyv__band::after{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,13,34,.60) 0%,
    rgba(11,13,34,.32) 34%,
    rgba(11,13,34,.56) 66%,
    rgba(11,13,34,.92) 88%,
    rgba(11,13,34,1) 100%);
}

.keyv__band-row{
  position:absolute;z-index:1;left:0;top:42%;display:flex;width:max-content;
  opacity:0;transform:translateY(calc(-50% + 8rem));
  transition:opacity 1.2s var(--e2),transform 1.2s var(--e2);transition-delay:.7s;
}
.is-loaded .keyv__band-row{opacity:1;transform:translateY(-50%)}

.keyv__band-list{
  display:flex;align-items:center;gap:3.4rem;padding-right:3.4rem;
  animation:marquee 90s linear infinite;
}
.keyv__band-list li{flex:none}
.keyv__band-list img{
  width:19rem;height:19rem;border-radius:50%;object-fit:cover;
  filter:grayscale(.45) saturate(.85) brightness(.78) contrast(1.02);
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

/* 中央のシンボルマーク */
/* 帯の下端にマークを重ねて置く。文章と一緒にスクロールするので、重なりません */
.keyv__mark{position:absolute;z-index:4;width:50rem;top:var(--band);left:50%;
  transform:translate(-50%,-55%)}
.keyv__mark--back{z-index:2;opacity:.04}
.keyv__mark img{width:100%;transform:scale(.9);opacity:0;
  transition:opacity .7s var(--e3),transform .7s var(--e3);transition-delay:1.1s}
.is-loaded .keyv__mark img{transform:none;opacity:1}

/* 下の文章 */
.keyv__base{position:relative;z-index:5;padding-top:18rem}
.keyv__panel-in{display:flex;justify-content:space-between;align-items:flex-start;gap:6rem}
.keyv__copy{width:46.2rem;flex:none}
.keyv__head{font-size:3.4rem;font-weight:700;line-height:1.3}
.keyv__head-mask{display:inline-block;height:4.7rem;overflow:hidden;padding-top:4.7rem;
  transition:padding-top 1s var(--e2);transition-delay:.7s}
.is-loaded .keyv__head-mask{padding-top:0}
.keyv__head-row{display:inline-block;
  background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;
  background-position:left bottom;background-size:0 2px;
  transition:background-size .4s cubic-bezier(.58,.08,.18,.94);transition-delay:1.3s}
.is-loaded .keyv__head-row{background-size:100% 2px}
.keyv__sub{font-size:1.2rem;opacity:.5;margin-top:1.2rem;letter-spacing:.16em;
  overflow:hidden;height:2.4rem;padding-top:2.4rem;
  transition:padding-top 1s var(--e2);transition-delay:.7s}
.is-loaded .keyv__sub{padding-top:0}
.keyv__acts{margin:3.2rem 0 0;display:flex;gap:1.2rem;flex-wrap:wrap;
  opacity:0;transition:opacity .6s var(--e3);transition-delay:1.5s}
.is-loaded .keyv__acts{opacity:1}
.keyv__note{width:46.2rem;font-size:1.8rem;line-height:2.2;position:relative;z-index:5;
  opacity:0;transform:translateY(2rem);
  transition:opacity 1s var(--e1),transform 1s var(--e1);transition-delay:1.3s}
.is-loaded .keyv__note{opacity:1;transform:none}

/* SCROLL の表示 */
.keyv__scroll{position:fixed;z-index:30;bottom:6rem;left:6.25%;opacity:0;
  transition:opacity 1s var(--e1);transition-delay:1s}
.is-loaded .keyv__scroll{opacity:1}
.is-keyv-out .keyv__scroll{opacity:0}
.keyv__scroll-bar{position:relative;display:block;width:.8rem;height:3rem}
.keyv__scroll-bar::before{content:"";position:absolute;inset:0 auto auto 0;width:.8rem;height:.8rem;
  background:#fff;border-radius:50%;animation:ff-scroll-dot 1.4s ease infinite}
@keyframes ff-scroll-dot{
  0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{opacity:1}100%{transform:translateY(3rem);opacity:0}
}
.keyv__scroll-txt{position:absolute;bottom:7.5rem;left:.5rem;font-size:1.1rem;letter-spacing:.11rem;
  transform:rotate(90deg);transform-origin:0 50%}


/* ==========================================================================
   事業内容
   ========================================================================== */
.svc{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  position:relative;z-index:10;overflow:hidden}
.svc__inner{padding-top:10.4rem;padding-bottom:10.4rem}

.svc__head{font-size:2rem;font-weight:600;letter-spacing:.02em}

.svc__lead{margin-top:3.6rem;font-size:1.7rem;line-height:2.1;max-width:80rem}
.svc__lead p+p{margin-top:1.6rem}

/* --- 開発フロー --- */
.steps{margin-top:6rem}
.steps__head{font-size:2.8rem;font-weight:700;line-height:1.7;letter-spacing:.02em}
.steps__lead{margin-top:1.2rem;font-size:1.4rem;line-height:1.9;opacity:.55}

.steps__list{display:flex;margin-top:5rem}
.steps__item{flex:1;position:relative;text-align:center;padding:0 1.2rem}

/* 丸と丸をつなぐ線 */
.steps__item:not(:last-child)::before{
  content:"";position:absolute;z-index:1;top:3.7rem;left:calc(50% + 4.7rem);
  width:calc(100% - 9.4rem);height:1px;background:rgba(255,255,255,.2)}
/* つなぎの線の先の矢印 */
.steps__item:not(:last-child)::after{
  content:"";position:absolute;z-index:1;top:3.35rem;left:calc(100% - .35rem);
  width:.7rem;height:.7rem;transform:rotate(45deg);
  border-top:1px solid rgba(255,255,255,.4);border-right:1px solid rgba(255,255,255,.4)}

.steps__no{
  position:relative;z-index:2;width:7.4rem;height:7.4rem;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:100px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.05);
  font-size:2rem;font-weight:700;letter-spacing:.04em}
.steps__item h4{margin-top:2.4rem;font-size:1.7rem;font-weight:700;line-height:1.6}
.steps__item p{margin-top:.8rem;font-size:1.3rem;line-height:1.9;opacity:.55}

/* --- サブ：3つの事業 --- */
.fields{margin-top:7rem}
.fields__head{font-size:1.4rem;letter-spacing:.08em;opacity:.5}
.fields__list{display:flex;gap:4.4rem;margin-top:3rem}
.fields__item{flex:1;border-top:1px solid rgba(255,255,255,.18);padding-top:2.6rem}
.fields__item-top{display:flex;align-items:center;justify-content:space-between}
.fields__no{font-size:1.2rem;letter-spacing:.24em;opacity:.45}
.fields__icon{width:2.8rem;height:2.8rem;opacity:.55}
.fields__icon svg{width:100%;height:100%}
.fields__item h4{margin-top:2rem;font-size:1.7rem;font-weight:700;line-height:1.7}
.fields__item p{margin-top:1.4rem;font-size:1.3rem;line-height:2;opacity:.55}


/* ==========================================================================
   製品について
   ========================================================================== */
.lineup{background:linear-gradient(180deg,var(--navy-2) 0%,var(--navy-3) 100%);
  position:relative;z-index:10;overflow:hidden;
  padding-top:8rem;padding-bottom:11rem}
.lineup__marquee{
  position:absolute;z-index:1;top:1.5rem;left:0;width:max-content;white-space:nowrap;
  font-size:40rem;line-height:29rem;font-weight:700;color:#000;opacity:.2;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  animation:marquee 200s linear infinite;pointer-events:none}
.lineup__marquee::after{content:attr(data-text);position:absolute;left:100%;top:0}

.lineup__inner{position:relative;z-index:2}
.lineup__head{position:absolute;z-index:1;line-height:1.5;top:-1.9rem;right:-4.1rem;
  font-size:2rem;font-weight:600;transform:rotate(90deg);transform-origin:0 50%}
.lineup__lead{font-size:1.7rem;margin:0 0 5rem;line-height:2.1}

.lineup__list{border-top:1px solid rgba(255,255,255,.1)}
.pcard{display:flex;align-items:flex-start;gap:4rem;
  padding:5rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.pcard__no{flex:none;width:14rem;font-size:11rem;line-height:.85;font-weight:700;opacity:.9}
.pcard__body{flex:1 1 auto;min-width:0}
.pcard__cat{font-size:1.2rem;letter-spacing:.24em;opacity:.5}
.pcard__body h3{font-size:3.2rem;font-weight:700;line-height:1.6;margin:.6rem 0 1.8rem}
.pcard__body>p{font-size:1.6rem;line-height:2.1;opacity:.8}
.pcard__points{margin-top:2.4rem}
.pcard__points li{position:relative;padding-left:1.8rem;font-size:1.5rem;line-height:2.1;opacity:.75}
.pcard__points li::before{content:"";position:absolute;left:0;top:1.2rem;
  width:.6rem;height:.6rem;border-radius:100px;background:#fff;opacity:.6}
.pcard__act{margin-top:3.2rem}
.pcard__fig{flex:none;width:36rem}
.pcard__img{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.pcard__img img{width:100%}
.pcard__note{margin-top:1.2rem;font-size:1.2rem;line-height:1.8;opacity:.45}


/* ==========================================================================
   会社情報・ニュース・お問い合わせ（濃い紺緑のかたまり）
   ========================================================================== */
.deepband{background:linear-gradient(180deg,var(--navy-3) 0%,var(--navy-deep) 100%);
  position:relative;z-index:2}

/* --- 会社情報 --- */
.vision{position:relative;z-index:2;overflow:hidden;padding-top:11rem;padding-bottom:5rem}
.vision__inner{position:relative;z-index:5}
.vision__head{position:absolute;z-index:1;line-height:1.5;top:.75rem;left:0;
  font-size:2rem;font-weight:600;transform:rotate(90deg);transform-origin:0 50%}
.vision__body{display:flex;align-items:center;gap:7rem;padding-left:10rem}
.vision__col{flex:1 1 auto;min-width:0}
.vision__catch{font-size:5rem;font-weight:700;line-height:1.7;letter-spacing:.2rem;padding-left:10rem;margin:0 0 3.6rem}
.vision__text{line-height:1.9;font-size:1.6rem}
.vision__text p+p{margin-top:2.4rem}
.vision__fig{flex:none;width:38%}

/* --- ニュース --- */
.topics{position:relative;z-index:2}
.topics__inner{padding-top:9rem;padding-bottom:3rem;display:flex;justify-content:space-between;align-items:flex-start}
.topics__head{width:22.7%;position:sticky;top:12rem}
.topics__title{font-size:2rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.1);
  padding:0 0 3rem;margin:0 0 3.4rem}
.topics__filter li+li{margin:1rem 0 0}
.topics__filter button{opacity:.5;font-size:1.4rem;letter-spacing:.1em;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;transition:opacity .3s var(--e1)}
.topics__filter button.is-on,
.topics__filter button:hover{opacity:1}

.topics__main{width:72.6%}
.topics__list{border-top:1px solid rgba(255,255,255,.1)}
.topics__list li{position:relative;z-index:1;border-bottom:1px solid rgba(255,255,255,.1);
  padding:2.4rem 0 2.6rem}
.topics__hit{position:absolute;z-index:1;inset:0}
.topics__date{display:flex;align-items:center;margin:0 0 .8rem}
.topics__date time{font-size:1.35rem;opacity:.6;margin-right:1.1rem}
.topics__tag{position:relative;z-index:10;font-size:1.15rem;background:rgba(255,255,255,.14);
  border-radius:100px;line-height:2.2rem;display:inline-block;padding:0 1rem;letter-spacing:.06em}
.topics__text{font-size:1.8rem;line-height:1.9;transition:opacity .3s var(--e1)}
.topics__list li:hover .topics__text{opacity:.55}
.topics__none{display:none;padding:4rem 0;opacity:.6;font-size:1.5rem}
.topics__none.is-on{display:block}

/* --- お問い合わせ --- */
.invite{position:relative;z-index:2;overflow:hidden;padding-top:9rem;padding-bottom:11rem}
.invite__inner{position:relative;z-index:5;padding-left:10rem}
.invite__head{position:absolute;z-index:1;line-height:1.5;top:.75rem;left:0;
  font-size:2rem;font-weight:600;transform:rotate(90deg);transform-origin:0 50%}
.invite__catch{font-size:5rem;font-weight:700;line-height:1.7;letter-spacing:.2rem}
.invite__lead{margin-top:3rem;line-height:1.9;font-size:1.6rem}
.invite__act{margin-top:4.6rem}


/* ==========================================================================
   会社概要（明るい面）
   ========================================================================== */
.profile{background:var(--gray);color:var(--ink);position:relative;z-index:10;overflow:hidden}
.profile a{color:var(--ink)}
.profile__inner{padding-top:10rem;padding-bottom:10rem}
.profile__head{font-size:2rem;font-weight:600}
.profile__body{position:relative;z-index:1;margin-top:4.5rem}
.spec-table{width:100%;border-top:1px solid rgba(31,31,31,.2)}
.spec-table th,
.spec-table td{border-bottom:1px solid rgba(31,31,31,.2);padding:2.2rem 0;
  text-align:left;font-size:1.6rem;line-height:1.9;vertical-align:top}
.spec-table th{width:22rem;font-weight:700;padding-right:2rem}
/* 電話番号などに添える補足（開通予定日・受付時間など） */
.spec-note{display:block;margin-top:.6rem;font-size:1.35rem;line-height:1.8;opacity:.62}
.spec-note a{text-decoration:underline;text-underline-offset:.3em}


/* ==========================================================================
   フッター（明るい面）
   ========================================================================== */
#site-end{background:var(--gray);color:var(--ink);position:relative;z-index:10}
#site-end a{color:var(--ink)}
.site-end__inner{padding-top:9rem;padding-bottom:6rem;border-top:1px solid rgba(0,0,0,.1)}
.site-end__upper{display:flex;align-items:flex-start;justify-content:space-between}
.site-end__ident{order:2}
.site-end__sig{width:28rem}
.site-end__addr{margin-top:2.6rem;font-size:1.4rem;line-height:2;opacity:.7}
/* 「事業内容」の列を外したので、残る3つ（製品について／会社情報／ロゴ・住所）が
   均等に並ぶよう幅と余白を取り直しています（2026.08.27） */
.site-end__nav{display:flex;align-items:flex-start;justify-content:space-between;margin:0 19% 0 0;width:41%}
.site-end__grp+.site-end__grp{margin-top:4rem}
.site-end__lead{font-size:1.8rem;font-weight:700}
.site-end__lead+.site-end__lead{margin-top:1rem}
.site-end__list{margin-top:1rem}
.site-end__list li+li{margin-top:.5rem}
/* リンクではない項目（span）も、リンクと同じ見た目に揃えています */
.site-end__list a,
.site-end__list span{opacity:.5;font-size:1.5rem;display:inline-block}
.site-end__list a:hover{opacity:1}
.site-end__lower{display:flex;justify-content:space-between;align-items:center;margin-top:8rem;font-size:1.35rem}
.site-end__legal a{opacity:.6}
.site-end__copy{opacity:.5;letter-spacing:.06em}


/* ==========================================================================
   下層ページの見出し帯（contact.html／product-*.html で共通）
   ※もとは css/form.css にありましたが、製品ページでも使うため移しました
   ========================================================================== */
/* 下層ページはローディング画面がないので、ヘッダーをすぐに表示する */
.is-lower #site-top{opacity:1;transition-delay:0s}

.lead-band{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-3) 100%);
  position:relative;z-index:2;overflow:hidden;
  padding-top:17rem;padding-bottom:8rem}

/* 背景を流れる大きな文字 */
.lead-band__marquee{
  position:absolute;z-index:1;top:2rem;left:0;width:max-content;white-space:nowrap;
  font-size:26rem;line-height:20rem;font-weight:700;color:#000;opacity:.14;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  animation:marquee 160s linear infinite;pointer-events:none}
.lead-band__marquee::after{content:attr(data-text);position:absolute;left:100%;top:0}

.lead-band__inner{position:relative;z-index:2}
.lead-band__en{font-size:1.2rem;letter-spacing:.24em;opacity:.5}
.lead-band__title{font-size:4.4rem;font-weight:700;line-height:1.6;letter-spacing:.1rem;margin-top:1.4rem}
.lead-band__lead{margin-top:2.4rem;font-size:1.5rem;line-height:2;opacity:.75;max-width:66rem}


/* ==========================================================================
   スクロールで現れる動き（js/index.js が is-in を付けます）
   ========================================================================== */
.js .m-rise{opacity:0;transform:translateY(3rem)}
.m-rise{transition:opacity 1.1s var(--e1),transform 1.1s var(--e1)}
.js .m-rise.is-in{opacity:1;transform:none}

.m-wipe{position:relative;overflow:hidden}
.m-wipe>*{transition:transform 1.5s var(--e2)}
.js .m-wipe>*{transform:scale(1.12)}
.js .m-wipe::after{content:"";position:absolute;inset:0;background:var(--navy-3);
  transform:scaleY(1);transform-origin:bottom;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.js .m-wipe.is-in>*{transform:none}
.js .m-wipe.is-in::after{transform:scaleY(0)}

.m-delay>*{transition-delay:0ms}
.m-delay>*:nth-child(2){transition-delay:110ms}
.m-delay>*:nth-child(3){transition-delay:220ms}


/* ==========================================================================
   画面幅への対応
   ========================================================================== */
@media screen and (max-width:1295px){
  .keyv__scroll{left:3rem}
  .l-frame{padding-left:5rem;padding-right:5rem}
  .site-top__sig{--sig-w:18rem;transform:translate(4.4rem,5rem)}
  .is-scroll .site-top__sig{transform:translate(1.6rem,3.2rem);width:4.4rem}
  .site-top__util{transform:translate(-4.6rem,4.6rem)}
  .is-scroll .site-top__util{transform:translate(-2.6rem,3rem)}
}

@media screen and (max-width:1200px){
  .keyv__scroll{display:none}
  .keyv__band-list img{width:16rem;height:16rem}
  .keyv__band-list{gap:2.8rem;padding-right:2.8rem}
  .lineup__marquee{font-size:26rem;line-height:19rem}
  .keyv__copy,.keyv__note{width:auto}
  .keyv__panel-in{display:block}
  .keyv__note{margin-top:4rem;max-width:60rem}
  .fields__list{gap:3rem}
  .fields__item h4{font-size:1.6rem}
}

@media screen and (max-width:1040px){
  /* タブレット幅では、大きな見出しだけ一段落とします */
  .keyv__head{font-size:3rem}
  .keyv__head-mask{height:4.2rem;padding-top:4.2rem}
  .vision__catch,.invite__catch{font-size:4rem}
  .pcard__body h3{font-size:2.8rem}

  .lineup__head{position:static;transform:none;margin:0 0 4rem}
  .vision__head,.invite__head{position:static;transform:none;margin:0 0 3rem}
  .vision__body,.invite__inner,.vision__catch{padding-left:0}
  .vision__body{display:block}
  .vision__fig{width:100%;margin-top:5rem}
  .topics__inner{display:block}
  .topics__head{width:auto;position:static;margin:0 0 4rem}
  .topics__main{width:auto}
  .topics__title{border:none;padding:0;margin:0 0 2.4rem}
  .topics__filter{display:flex;flex-wrap:wrap;gap:2.4rem}
  .topics__filter li+li{margin:0}
  .pcard{display:block}
  .pcard__no{width:auto;margin-bottom:1.6rem}
  .pcard__fig{width:100%;margin-top:3.4rem}
  .spec-table th{width:16rem}
  .steps__item h4{font-size:1.5rem}
  .steps__item p{font-size:1.2rem}

  .lead-band__title{font-size:3.6rem}
}

@media screen and (max-width:900px){
  .site-top__nav{display:none}
  .site-top__cta{display:none}
  .hamb{display:block}
  .site-top__tag{display:none}
  .site-end__upper{display:block}
  .site-end__nav{width:auto;margin:6rem 0 0;flex-wrap:wrap;gap:4rem 0}
  .site-end__col{width:50%}
  .site-end__lower{margin-top:8rem}
}

@media screen and (max-width:767px){
  /* スマートフォンは、画面幅に合わせて 9.6px〜11px の範囲で伸縮させます */
  html{font-size:clamp(9.6px, 2.45vw, 11px)}
  body{font-size:1.5rem}

  .u-sponly{display:inline}
  .u-pconly{display:none}
  .l-frame{padding-left:2.4rem;padding-right:2.4rem}
  [id]{scroll-margin-top:7rem}

  .site-top__sig{--sig-w:15.4rem;transform:translate(2.4rem,2.4rem)}
  .is-scroll .site-top__sig{width:3.8rem;transform:translate(2.4rem,2rem)}

  .keyv{--band:clamp(16rem,34vh,36rem);min-height:auto;padding-bottom:9rem}
  .keyv__band-list img{width:12.4rem;height:12.4rem}
  .keyv__band-list{gap:2rem;padding-right:2rem}
  .keyv__mark{width:26rem}
  .keyv__mark--back{opacity:.1}
  .keyv__base{padding-top:12rem}
  .keyv__head{font-size:2.4rem;line-height:1.5}
  .keyv__head-mask{height:3.9rem}
  .keyv__note{font-size:1.5rem;line-height:2.2;margin-top:3rem}
  .keyv__acts{margin-top:3rem}

  .svc__inner{padding-top:7rem;padding-bottom:7.4rem}
  .svc__head{font-size:1.9rem}
  .svc__lead{margin-top:3rem;font-size:1.5rem}
  .steps{margin-top:4.4rem}
  .steps__head{font-size:1.9rem}
  .steps__lead{font-size:1.3rem}
  .steps__list{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem 1.6rem;margin-top:3.6rem}
  .steps__item{padding:0}
  .steps__item::before,.steps__item::after{display:none}
  .steps__no{width:5.4rem;height:5.4rem;font-size:1.6rem}
  .steps__item h4{margin-top:1.8rem;font-size:1.45rem}
  .steps__item p{font-size:1.2rem}
  .fields{margin-top:5rem}
  .fields__head{font-size:1.3rem}
  .fields__list{display:block;margin-top:2.4rem}
  .fields__item{padding-top:2.2rem}
  .fields__item+.fields__item{margin-top:3.4rem}
  .fields__item h4{margin-top:1.6rem;font-size:1.6rem}
  .fields__item p{margin-top:1.2rem;font-size:1.25rem}

  .lineup{padding-top:7.4rem;padding-bottom:8rem}
  .lineup__marquee{font-size:16rem;line-height:12rem;top:-.6rem}
  .lineup__head{font-size:1.9rem;margin:0 0 3rem}
  .lineup__lead{font-size:1.5rem;margin-bottom:3.4rem}
  .pcard{padding:3.6rem 0}
  .pcard__no{font-size:6rem}
  .pcard__body h3{font-size:2.2rem}
  .pcard__body>p,.pcard__points li{font-size:1.5rem}

  .vision{padding-top:7rem;padding-bottom:2rem}
  .vision__head{font-size:1.9rem;margin:0 0 2.8rem}
  /* 見出し1行目（「うちは特殊だから」を、）が1行に収まる大きさにしています */
  .vision__catch{font-size:2.6rem;letter-spacing:.05rem;margin-bottom:2.6rem}
  .vision__text{font-size:1.5rem}

  .topics__inner{padding-top:7.4rem;padding-bottom:4rem}
  .topics__title{font-size:1.9rem;margin:0 0 2.2rem}
  .topics__list li{padding:2.1rem 0 1.7rem}
  .topics__text{font-size:1.55rem}

  .invite{padding-top:5rem;padding-bottom:7.4rem}
  .invite__head{font-size:1.9rem}
  .invite__catch{font-size:2.8rem;letter-spacing:.1rem}
  .invite__lead{font-size:1.5rem}
  .invite__act{margin-top:4.4rem}

  .profile__inner{padding-top:7.4rem;padding-bottom:7.4rem}
  .profile__head{font-size:1.9rem}
  .spec-table th,.spec-table td{display:block;width:auto;padding:0}
  .spec-table th{padding:2.2rem 0 .4rem;border:none;font-size:1.35rem;opacity:.6}
  .spec-table td{padding:0 0 2.2rem;font-size:1.55rem}

  .site-end__inner{padding-top:6.4rem;padding-bottom:5rem}
  .site-end__sig{width:22rem}
  .site-end__col{width:100%}
  .site-end__lower{display:block;margin-top:5rem}
  .site-end__copy{margin-top:1.2rem}

  .lead-band{padding-top:11rem;padding-bottom:5.4rem}
  .lead-band__marquee{font-size:12rem;line-height:9rem;top:1rem}
  .lead-band__en{font-size:1.1rem}
  .lead-band__title{font-size:2.6rem;letter-spacing:.05rem}
  .lead-band__lead{margin-top:1.8rem;font-size:1.3rem}

  .sheet__nav{padding:0 3rem}
  .sheet__nav a{font-size:2rem}
}

/* OS側で「視差効果を減らす／アニメーションを減らす」を設定している方には動きを出さない */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .m-rise,.js .m-wipe>*{opacity:1;transform:none}
  .js .m-wipe::after{display:none}
  .pointer-dot{display:none}
}


/* ========================================================================
   パンくずリスト（下層ページの見出し帯の中）
   ==================================================================== */
.trail{font-size:1.2rem;line-height:1.6;opacity:.55;margin-bottom:1.8rem}
.trail ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.trail li{display:flex;align-items:center}
.trail li+li::before{content:"\FF0F";margin:0 .6rem;opacity:.6}
.trail a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32);transition:border-color .3s}
.trail a:hover{border-bottom-color:rgba(255,255,255,.9)}

@media screen and (max-width:767px){
  .trail{font-size:1.1rem;margin-bottom:1.4rem}
}


/* ========================================================================
   404ページ（ページが見つかりませんでした）
   ==================================================================== */
.gone{background:var(--gray);color:var(--ink);padding:8rem 0 10rem}
.gone__list{list-style:none;max-width:72rem}
.gone__list li{border-bottom:1px solid rgba(35,39,132,.16)}
.gone__list li:first-child{border-top:1px solid rgba(35,39,132,.16)}
.gone__list a{display:block;padding:2.4rem .4rem 2.2rem;color:var(--navy);
  font-size:1.8rem;font-weight:700;text-decoration:none;transition:opacity .3s}
.gone__list a:hover{opacity:.6}
.gone__list span{display:block;padding:0 .4rem 2.2rem;margin-top:-1.6rem;
  font-size:1.3rem;line-height:1.9;opacity:.7}

@media screen and (max-width:767px){
  .gone{padding:5.4rem 0 7rem}
  .gone__list a{font-size:1.5rem;padding:1.8rem .2rem 1.6rem}
  .gone__list span{font-size:1.2rem;padding:0 .2rem 1.8rem;margin-top:-1.2rem}
}