@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/montserrat.woff2") format("woff2")}
/* =========================================================
   有限会社サンテック サイト — 土台
   2026-08-09 お手本として作成

   ここに入っているのは「九枚で共通の器」だけです。
     ・いちばん上の帯（ヘッダー）
     ・画面についてくる二つのボタン
     ・表紙の大きいところ（ファーストビュー）
     ・下層ページの見出しの帯
     ・お問い合わせの帯
     ・いちばん下の帯（フッター）
     ・見出しの型と、色・書体・余白の決めごと

   ⚠️ これは「たたき台」です。気に入らないところは全部変えてかまいません。
      色・書体・余白・並べ方、どれも動かせます。
      ただし変えるときは、下の :root の値を書き換えてください。
      そうすれば九枚ぜんぶに一度に効きます。

   ⚠️ 各セクションの中身（サンテックについて・技術紹介・設備紹介 …）は
      まだ何も作っていません。そこが今回つくっていただくところです。
   ========================================================= */

/* ---------------------------------------------------------
   1. 決めごと（色・書体・余白）
   ここだけ書き換えれば全ページに効きます
   --------------------------------------------------------- */
:root{
  /* 色 ------------------------------------------------- */
  --red:#e50014;          /* ロゴの赤。アクセント専用。面で広く塗らない */
  --red-rgb:229,0,20;     /* 上の赤を、うすく重ねるとき用 */
  --red-deep:#b8000f;     /* 押したとき・ホバーの赤 */
  --ink:#1c1c1e;          /* 本文の黒 */
  --ink-soft:#4a4a4e;     /* すこし弱い黒 */
  --sub:#8a8a90;          /* 補助の文字 */
  --line:#dedee2;         /* 罫線 */
  --bg:#ffffff;           /* 地色 */
  --bg-soft:#f2f2f4;      /* グレーの帯 */
  --band:#33363c;         /* 大きい帯の地色（写真が入る前の面） */
  --band-deep:#1e2024;    /* 帯の暗いほう（斜めのグラデに使う） */
  --band-lite:#4a4e56;    /* 帯の明るいほう */
  --white:#ffffff;        /* 帯の上に乗る文字・カードの地色 */

  /* 書体 ----------------------------------------------- */
  --font-base:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;

  /* 余白（8の倍数で揃えています） --------------------- */
  --gap-xs:8px;
  --gap-s:16px;
  --gap-m:32px;
  --gap-l:64px;
  --gap-xl:120px;         /* セクションとセクションのあいだ */

  /* 幅 ------------------------------------------------- */
  --maxw:1180px;
  --pad-x:40px;

  /* 文字と文字のあいだ --------------------------------- */
  --track-wide:.22em;     /* 英字の小見出し */
  --track-mid:.10em;
  --track-tight:.02em;

  /* かっちりさせるため、角はほぼ落としています */
  --radius:2px;

  --header-h:88px;
}

@media (max-width:900px){
  :root{
    --gap-xl:72px;
    --gap-l:40px;
    --pad-x:20px;
    --header-h:60px;
  }
}

/* ---------------------------------------------------------
   2. 土台
   --------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-base);
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ワイヤーで「テキストが入ります」になっている＝本番の文章がまだ届いていない箇所 */
.is-dummy{color:var(--sub)}

/* ---------------------------------------------------------
   3. いちばん上の帯（九枚で共通）
   --------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-m);
  padding-inline:var(--pad-x);
  background:rgb(255 255 255 / .95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}

.site-header__logo img{height:38px;width:auto}
@media (max-width:900px){.site-header__logo img{height:26px}}

.site-header__right{
  display:flex;
  align-items:center;
  gap:var(--gap-m);
}

.site-nav{
  display:flex;
  align-items:center;
  gap:var(--gap-m);
  font-size:15px;
  letter-spacing:var(--track-mid);
}
.site-nav a{
  position:relative;
  padding-block:6px;
  transition:color .25s;
}
/* 下から赤い線が伸びる。指をのせたときだけ */
.site-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s;
}
.site-nav a:hover{color:var(--red)}
.site-nav a:hover::after{transform:scaleX(1)}

.site-sns{display:flex;align-items:center;gap:14px}
.site-sns img{height:24px;width:auto;transition:opacity .25s}
.site-sns a:hover img{opacity:.6}

/* 画面がせまいときは、まん中の項目を畳む（本番ではボタンから開く形にします） */
@media (max-width:900px){
  .site-nav{display:none}
}

/* ---------------------------------------------------------
   4. 画面についてくる二つのボタン（九枚で共通・右に浮く）
   ワイヤーで帯の右に描かれているのはこれです。新しく作らないこと
   --------------------------------------------------------- */
.site-float{
  position:fixed;
  right:0;
  top:38%;
  z-index:90;
  display:grid;
  gap:10px;
}
.site-float a{
  display:flex;
  align-items:center;
  gap:12px;
  width:200px;
  padding:16px 18px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);
  border-right:0;
  border-radius:var(--radius) 0 0 var(--radius);
  box-shadow:0 6px 24px rgba(0,0,0,.10);
  font-size:14px;
  letter-spacing:var(--track-mid);
  color:var(--ink-soft);
  transition:color .25s,border-color .25s,transform .25s;
}
.site-float a:hover{color:var(--red);border-color:var(--red);transform:translateX(-4px)}
.site-float img{width:26px;height:auto;flex:none}

@media (max-width:900px){
  .site-float{
    right:auto;left:0;top:auto;bottom:0;
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:0;
  }
  .site-float a{
    width:auto;
    justify-content:center;
    border-radius:0;
    border-right:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(0,0,0,.10);
  }
}

/* ---------------------------------------------------------
   5. 表紙の大きいところ（ファーストビュー）
   ⚠️ 本番の写真がまだ届いていないので、いまは色の面にしています
   --------------------------------------------------------- */
.fv{
  position:relative;
  min-height:min(76vh,660px);
  display:flex;
  align-items:center;
  background:linear-gradient(115deg,var(--band-deep) 0%,var(--band) 62%,var(--band-lite) 100%);
  overflow:hidden;
}
/* 斜めに走る細い線。精密さの気配だけ足しています */
.fv::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px);
}
.fv__inner{position:relative;z-index:1;width:100%}

.fv__copy{
  color:var(--white);
  font-size:clamp(28px,4vw,58px);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.16em;
}
.fv__copy span{display:block}
.fv__copy span+span{margin-left:2.2em}   /* ワイヤーの2行目下げ */

@media (max-width:900px){
  .fv{min-height:60vh}
  .fv__copy span+span{margin-left:1em}
}

/* ---------------------------------------------------------
   6. 下層ページの見出しの帯（八枚で共通）
   --------------------------------------------------------- */
.page-hero{
  position:relative;
  min-height:clamp(200px,24vw,300px);
  display:grid;
  place-items:center;
  padding-block:var(--gap-l);
  background:linear-gradient(115deg,var(--band-deep) 0%,var(--band) 70%,var(--band-lite) 100%);
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px);
}
.page-hero__ja{
  position:relative;
  z-index:1;
  color:var(--white);
  font-size:clamp(26px,3.4vw,44px);
  font-weight:300;
  letter-spacing:var(--track-wide);
}
.page-hero__en{
  position:relative;
  z-index:1;
  margin-top:var(--gap-xs);
  color:rgba(255,255,255,.62);
  font-size:13px;
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
}

.breadcrumb{
  padding-block:var(--gap-s);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--sub);
}
.breadcrumb a:hover{color:var(--red)}

/* ---------------------------------------------------------
   7. セクションと見出しの型
   （中身は未着手。ここは「型」だけ置いています）
   --------------------------------------------------------- */
main{display:block}

.sec{padding-block:var(--gap-xl)}
.sec--soft{background:var(--bg-soft)}

.sec__head{
  margin-bottom:var(--gap-l);
  text-align:center;
}
.sec__head--left{text-align:left}

/* ワイヤーの型＝日本語の見出しが大きく、英字がその下に小さく */
.sec__ja{
  font-size:clamp(22px,2.6vw,34px);
  font-weight:500;
  line-height:1.5;
  letter-spacing:var(--track-mid);
}
.sec__en{
  margin-top:var(--gap-xs);
  font-size:13px;
  font-weight:400;
  letter-spacing:var(--track-wide);
  color:var(--sub);
  text-transform:capitalize;
}
/* 見出しの下に短い赤い線 */
.sec__head::after{
  content:"";
  display:block;
  width:40px;
  height:2px;
  margin:var(--gap-m) auto 0;
  background:var(--red);
}
.sec__head--left::after{margin-inline:0}

.sec p{margin-top:var(--gap-s)}
.sec h3{margin-top:var(--gap-m);font-size:18px;font-weight:500;letter-spacing:.04em}

/* 「〜はこちら」＝四角い枠のテキストリンク */
.more{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:var(--gap-m);
  min-height:56px;
  padding-inline:40px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:14px;
  letter-spacing:var(--track-mid);
  transition:border-color .25s,color .25s;
}
.more::after{content:"";width:22px;height:1px;background:currentColor}
.more:hover{border-color:var(--red);color:var(--red)}

/* 技術の六分類につく札（ふだ）の型 */
.tag{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding-inline:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.tag--on{border-color:var(--red);color:var(--red)}

/* ---------------------------------------------------------
   8. お問い合わせの帯（九枚で共通・フッターの直前）
   --------------------------------------------------------- */
.contact-band{
  background:var(--bg-soft);
  padding-block:var(--gap-xl);
}
.contact-band__cols{
  margin-top:var(--gap-l);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-m);
}
.contact-card{
  display:grid;
  justify-items:center;
  gap:var(--gap-s);
  padding:var(--gap-l) var(--gap-m);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:center;
  transition:border-color .25s,transform .25s;
}
a.contact-card:hover{border-color:var(--red);transform:translateY(-4px)}
.contact-card img{width:52px;height:auto}
.contact-card__title{font-size:18px;font-weight:500;letter-spacing:.06em;line-height:1.6}
.contact-card__note{font-size:14px;color:var(--sub);line-height:1.9}

@media (max-width:900px){
  .contact-band__cols{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   9. いちばん下の帯（九枚で共通）
   --------------------------------------------------------- */
.site-footer{
  background:var(--bg);
  border-top:1px solid var(--line);
  padding-block:var(--gap-l) var(--gap-m);
}

.site-footer__cols{
  display:grid;
  grid-template-columns:1.3fr 1fr auto;
  gap:var(--gap-l);
  align-items:start;
}
.site-footer__logo img{height:42px;width:auto}
.site-footer address{
  margin-top:var(--gap-m);
  font-style:normal;
  font-size:14px;
  line-height:2.1;
  color:var(--ink-soft);
}

.foot-nav{display:grid;grid-template-columns:auto auto;gap:0 var(--gap-l);font-size:14px;line-height:2.1}
.foot-nav div{display:grid;align-content:start}
.foot-nav a{color:var(--ink-soft);white-space:nowrap}
.foot-nav a:hover{color:var(--red)}
.foot-nav__head{font-weight:500;color:var(--ink)}
.foot-nav__sub a{padding-left:1em;color:var(--sub);font-size:13px}

.site-footer__side{display:grid;gap:var(--gap-m);justify-items:end}
.site-footer .site-sns{justify-content:flex-end}

.copyright{
  margin-top:var(--gap-l);
  text-align:center;
  font-size:12px;
  letter-spacing:var(--track-mid);
  color:var(--sub);
}

@media (max-width:1024px){
  .site-footer__cols{grid-template-columns:1fr 1fr}
  .site-footer__side{grid-column:1/-1;justify-items:start}
  .site-footer .site-sns{justify-content:flex-start}
}
@media (max-width:600px){
  .site-footer__cols{grid-template-columns:1fr}
  .foot-nav{grid-template-columns:1fr}
  /* 下に固定した二つのボタンと重ならないように、すこし足しています */
  .site-footer{padding-bottom:calc(var(--gap-xl) + 20px)}
}
/* =========================================================
   表紙の中身
   ========================================================= */
:root{--gap-xl:96px}

.sec__head{margin-bottom:var(--gap-m)}

/* 見出しの左に小さな赤い点 */
.sec__head--dot .sec__en{position:relative;padding-left:16px;color:var(--ink-soft)}
.sec__head--dot .sec__en::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--red);
}
.sec__head--dot::after{display:none}
.sec__head--dot .sec__ja{font-size:clamp(24px,2.8vw,36px);font-weight:600}
.sec__head--dot .sec__en{margin-top:6px;font-size:12px}

/* 見出し左・本文右の二段組み ---------------------------- */
.split{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:var(--gap-l);
  align-items:start;
}
.split__body p{line-height:2.2;letter-spacing:.03em}

/* 丸い赤の矢印がつくリンク ------------------------------ */
.more--dot{
  border:0;
  padding-inline:0;
  min-height:0;
  gap:16px;
  font-weight:500;
}
.more--dot::after{
  content:"";
  width:38px;height:38px;
  border-radius:50%;
  background:var(--red);
  clip-path:none;
  position:relative;
  transition:background .25s,transform .25s;
}
.more--dot::before{
  content:"";
  position:absolute;
  right:13px;
  width:12px;height:1px;
  background:var(--white);
  z-index:1;
}
.more--dot{position:relative}
.more--dot:hover{color:var(--ink)}
.more--dot:hover::after{background:var(--red-deep);transform:translateX(4px)}
.more--dot:hover::before{transform:translateX(4px)}

/* 技術の六分類 ------------------------------------------ */
.tech-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--gap-l);
  border-top:1px solid var(--line);
}
.tech-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--gap-m);
  padding-block:26px;
  border-bottom:1px solid var(--line);
  transition:color .25s;
}
.tech-row__no{
  font-size:13px;
  letter-spacing:var(--track-wide);
  color:var(--sub);
  transition:color .25s;
}
.tech-row h3{
  margin-top:0;
  font-size:19px;
  font-weight:500;
  letter-spacing:var(--track-mid);
}
.tech-row__go{
  width:8px;height:8px;
  border-top:1px solid var(--sub);
  border-right:1px solid var(--sub);
  transform:rotate(45deg);
  transition:border-color .25s,transform .25s;
}
.tech-row:hover{color:var(--red)}
.tech-row:hover .tech-row__no{color:var(--red)}
.tech-row:hover .tech-row__go{border-color:var(--red);transform:rotate(45deg) translate(3px,-3px)}

.tech-foot{
  margin-top:var(--gap-l);
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--gap-l);
  align-items:center;
}
.tech-foot p{margin-top:0;line-height:2.2}

/* 設備紹介 ---------------------------------------------- */
.equip-strip{
  margin-top:var(--gap-l);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--gap-s);
}
.equip-strip__ph{
  display:block;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  background:var(--bg-soft);
}
.equip-strip__ph img{width:100%;height:100%;object-fit:cover}

/* 会社案内 ---------------------------------------------- */
.comp{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:var(--gap-l);
  align-items:center;
}
.comp__body p{line-height:2.2;margin-bottom:var(--gap-m)}
.comp__visual{background:var(--white);padding:var(--gap-s);border:1px solid var(--line)}
.comp__visual img{width:100%;height:auto}

/* お知らせ ---------------------------------------------- */
.news-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--gap-m);
  margin-bottom:var(--gap-m);
}
.news-head .sec__head{margin-bottom:0}
.news-list{border-top:1px solid var(--line)}
.news-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--gap-m);
  padding-block:24px;
  border-bottom:1px solid var(--line);
  transition:color .25s;
}
.news-row h3{margin-top:0;font-size:17px;font-weight:500}
.news-row__go{
  width:8px;height:8px;
  border-top:1px solid var(--sub);
  border-right:1px solid var(--sub);
  transform:rotate(45deg);
  transition:border-color .25s,transform .25s;
}
.news-row:hover{color:var(--red)}
.news-row:hover .news-row__go{border-color:var(--red);transform:rotate(45deg) translate(3px,-3px)}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--gap-m)}
  .tech-list{grid-template-columns:1fr}
  .tech-foot{grid-template-columns:1fr}
  .comp{grid-template-columns:1fr}
  .equip-strip{grid-template-columns:repeat(3,1fr)}
  .news-head{flex-direction:column;align-items:flex-start}
}
.more--dot::before{
  top:50%;
  right:17px;
  width:7px;height:7px;
  background:none;
  border-top:1px solid var(--white);
  border-right:1px solid var(--white);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .25s;
}
.more--dot:hover::before{transform:translate(4px,-50%) rotate(45deg)}
.more--dot{justify-self:start;align-self:center}

/* ---------------------------------------------------------
   見出しのあしらい・お問い合わせの帯（九枚に効く）
   --------------------------------------------------------- */
:root{--radius-lg:18px}

main{counter-reset:sec}

.sec__head--dot{counter-increment:sec}
.sec__head--dot .sec__ja{font-weight:700;letter-spacing:.04em}
.sec__head--dot .sec__ja::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  margin-bottom:10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:var(--track-wide);
  color:var(--sub);
}
.sec__head--dot .sec__en{
  margin-top:10px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--ink-soft);
}
.sec__head--dot .sec__en::before{top:.58em;width:7px;height:7px}

/* 表紙の大きいところ＝キャッチの左に赤い細い縦線 */
.fv__copy{position:relative;padding-left:var(--gap-m)}
.fv__copy::before{
  content:"";
  position:absolute;
  left:0;top:.35em;bottom:.35em;
  width:3px;
  background:var(--red);
}
@media (max-width:900px){
  .fv__copy{padding-left:var(--gap-s)}
}

/* お問い合わせの帯＝角丸の面の中に入れる */
.contact-band{background:var(--bg)}
.contact-band>.container{
  max-width:calc(var(--maxw) + var(--pad-x) * 2);
  padding:var(--gap-xl) var(--gap-l);
  background:var(--bg-soft);
  border-radius:var(--radius-lg);
}
.contact-card{border-radius:var(--radius-lg)}
@media (max-width:900px){
  .contact-band>.container{padding:var(--gap-l) var(--gap-m);border-radius:var(--radius)}
}
.news-foot{margin-top:var(--gap-l)}
.news-foot .more--dot{margin-top:0}

/* ---------------------------------------------------------
   見出し・技術の札・追従ボタン（作り直し）
   --------------------------------------------------------- */

/* 見出し＝番号を小さく肩に、英字を大きく、日本語を小さく下に */
.sec__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  counter-increment:sec;
}
.sec__head--left{align-items:flex-start}
.sec__head::after{display:none}

.sec__head .sec__en{
  order:1;
  margin-top:0;
  font-size:clamp(28px,3.6vw,44px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.005em;
  color:var(--ink);
  text-transform:capitalize;
}
.sec__head .sec__en::before{
  content:counter(sec,decimal-leading-zero);
  position:static;
  display:inline;
  width:auto;
  height:auto;
  margin-right:.55em;
  border-radius:0;
  background:none;
  font-size:.30em;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--sub);
  vertical-align:super;
}
.sec__head .sec__ja{
  order:2;
  margin-top:10px;
  font-size:13px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:.1em;
  color:var(--sub);
}
.sec__head .sec__ja::before{content:none}

/* 技術の六分類＝写真の上に文字 */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-s);
  background:none;
  border:0;
}
.tech-card{
  position:relative;
  display:grid;
  align-content:end;
  gap:4px;
  min-height:0;
  aspect-ratio:16/11;
  padding:var(--gap-m);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--band);
  text-align:left;
}
.tech-card__ph{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.6) saturate(.85);
  transform:scale(1.03);
  transition:transform .5s,filter .5s;
}
.tech-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(20,22,26,.12) 35%,rgba(20,22,26,.72) 100%);
}
.tech-card>*{position:relative;z-index:1}
.tech-card__no{
  font-size:12px;
  letter-spacing:var(--track-wide);
  color:rgba(255,255,255,.74);
}
.tech-card h3{
  margin-top:0;
  font-size:20px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--white);
}
.tech-card h3::after{
  content:"";
  display:block;
  width:0;
  height:2px;
  margin-top:10px;
  background:var(--red);
  transition:width .35s;
}
.tech-card:hover{background:var(--band)}
.tech-card:hover h3{color:var(--white)}
.tech-card:hover h3::after{width:44px}
.tech-card:hover .tech-card__ph{transform:scale(1.09);filter:brightness(.48) saturate(.85)}

/* 画面についてくる二つのボタン＝しるしだけ・赤い角丸のわく */
.site-float{
  right:20px;
  top:40%;
  gap:12px;
}
.site-float a{
  width:auto;
  gap:0;
  padding:14px;
  justify-content:center;
  background:var(--white);
  border:2px solid var(--red);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  font-size:0;
}
.site-float img{width:30px}
.site-float a:hover{
  border-color:var(--red-deep);
  background:var(--white);
  transform:translateX(-3px);
}

@media (max-width:900px){
  .site-float{
    left:auto;
    right:12px;
    bottom:16px;
    top:auto;
    width:auto;
    grid-template-columns:1fr;
    gap:10px;
  }
  .site-float a{
    border:2px solid var(--red);
    border-radius:14px;
    box-shadow:0 6px 20px rgba(0,0,0,.14);
  }
  .tech-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .tech-grid{grid-template-columns:1fr}
}
.tech-card>.tech-card__ph{position:absolute;z-index:0}

/* 見出し＝日本語を上に小さく（赤い点つき）、英字を下に大きく */
.sec__head .sec__ja{
  order:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:0;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--ink);
}
.sec__head .sec__ja::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--red);
}
.sec__head .sec__en{
  order:2;
  margin-top:14px;
  font-size:clamp(30px,4.6vw,60px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.sec__head .sec__en::before{content:none}

/* お知らせ＝写真と見出しが見える形 */
.news-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-m);
  border-top:0;
}
.news-card{
  display:block;
  transition:color .25s;
}
.news-card__ph{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.news-card__ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}
.news-card h3{
  margin-top:var(--gap-s);
  font-size:17px;
  font-weight:500;
  line-height:1.8;
  letter-spacing:.04em;
}
.news-card:hover{color:var(--red)}
.news-card:hover .news-card__ph img{transform:scale(1.06)}

@media (max-width:900px){
  .news-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .news-grid{grid-template-columns:1fr}
}
.sec__head .sec__ja::before{transform:translateY(3px)}

/* 英字の見出しの書体 */
:root{--font-en:"Montserrat","Noto Sans JP","Hiragino Sans",sans-serif}
.sec__head .sec__en,
.page-hero__en{font-family:var(--font-en)}
.sec__head .sec__en{padding-left:0}

/* 英字の字間をつめる／見出しと本文の重なりを直す／サンテックについてを中央に */
.sec__head .sec__en{letter-spacing:.015em}
.page-hero__en{letter-spacing:.08em}

.split{grid-template-columns:440px 1fr}

.msg{display:block;text-align:center}
.msg .sec__head{align-items:center}
.msg__body{
  max-width:840px;
  margin-inline:auto;
  margin-top:var(--gap-m);
  line-height:2.2;
  letter-spacing:.03em;
}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* 表紙の大きいところ＝左に寄せて、上に小さな見出し、下に短い説明 */
.fv{min-height:min(88vh,780px)}
.fv__inner{display:block}

.fv__label{
  margin:0 0 22px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--red);
}
.fv__label.is-dummy{color:var(--red)}

.fv__copy{
  padding-left:0;
  font-size:clamp(32px,5.2vw,72px);
  font-weight:500;
  line-height:1.42;
  letter-spacing:.09em;
}
.fv__copy::before{display:none}
.fv__copy span+span{margin-left:0}

.fv__note{
  margin-top:var(--gap-m);
  font-size:14px;
  line-height:2.1;
  letter-spacing:.06em;
  color:rgba(255,255,255,.78);
}
.fv__note.is-dummy{color:rgba(255,255,255,.62)}

/* 下に細い線のあしらい */
.fv::after{
  content:"";
  position:absolute;
  left:0;
  bottom:56px;
  width:calc(50% - var(--maxw) / 2 + var(--pad-x) + 110px);
  height:1px;
  background:rgba(255,255,255,.45);
}
@media (max-width:900px){
  .fv{min-height:74vh}
  .fv::after{width:120px;bottom:32px}
}
.fv__note{max-width:660px;color:rgba(255,255,255,.86)}
.fv__label{font-family:var(--font-en);font-size:14px;letter-spacing:.12em}

/* 表紙の大きいところに写真を敷く */
.fv{
  background-image:
    linear-gradient(100deg,rgba(18,20,24,.90) 0%,rgba(18,20,24,.74) 42%,rgba(18,20,24,.38) 100%),
    url("../images/仮/仮_FV_加工機.jpg");
  background-size:cover;
  background-position:center 46%;
  background-repeat:no-repeat;
}
.fv::before{opacity:.55}
/* 表紙の写真＝黒いマスクをやめて、青みのうすい膜にする */
.fv{
  background-image:
    linear-gradient(100deg,rgba(18,34,58,.58) 0%,rgba(18,34,58,.30) 42%,rgba(18,34,58,.04) 100%),
    url("../images/仮/仮_FV_加工機.jpg");
}
.fv::before{opacity:.35}
.fv__note.is-dummy{color:rgba(255,255,255,.86)}

/* 会社案内＝赤い面と写真を左右に組んだ塊 */
.comp{
  position:relative;
  display:block;
  grid-template-columns:none;
  gap:0;
  min-height:min(62vw,620px);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-soft);
}
.comp__visual{
  position:absolute;
  inset:0;
  z-index:0;
  padding:0;
  border:0;
  background:none;
}
.comp__visual img{width:100%;height:100%;object-fit:cover}

.comp__panel{
  position:relative;
  z-index:1;
  width:52%;
  min-height:min(62vw,620px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--gap-l) var(--gap-l) var(--gap-l) var(--gap-l);
  background:var(--red);
  color:var(--white);
}
/* 右のふちをゆるいカーブにする */
.comp__panel::after{
  content:"";
  position:absolute;
  top:-2%;
  bottom:-2%;
  right:-72px;
  width:144px;
  background:var(--red);
  border-radius:50%;
}
.comp__panel>*{position:relative;z-index:1}

.comp__panel .sec__ja{color:var(--white)}
.comp__panel .sec__ja::before{background:var(--white)}
.comp__panel .sec__en{color:var(--white)}
.comp__panel p{
  max-width:420px;
  margin-top:var(--gap-m);
  line-height:2.1;
  letter-spacing:.03em;
}
.comp__panel p.is-dummy{color:rgba(255,255,255,.78)}

.comp__btn{
  align-self:flex-start;
  margin-top:var(--gap-l);
  min-height:60px;
  padding-inline:36px;
  background:var(--white);
  border:0;
  border-radius:999px;
  color:var(--ink);
  font-weight:500;
}
.comp__btn::after{width:18px;background:var(--ink)}
.comp__btn:hover{color:var(--red);background:var(--white)}
.comp__btn:hover::after{background:var(--red)}

@media (max-width:900px){
  .comp{min-height:0}
  .comp__visual{position:relative;inset:auto;height:240px}
  .comp__panel{width:100%;min-height:0;padding:var(--gap-l) var(--gap-m)}
  .comp__panel::after{display:none}
}

/* サンテックについて＝左いっぱいの赤い面に、右から写真を重ねる塊 */
.sec--msg{padding-block:var(--gap-xl)}

.msg{
  position:relative;
  display:block;
  text-align:left;
  max-width:none;
  margin-inline:0;
}

.msg__panel{
  margin-right:12%;
  padding-block:clamp(72px,8vw,120px);
  background:var(--red);
  color:var(--white);
}
.msg__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* 見出しの上の短い線 */
.msg .sec__head{align-items:flex-start;text-align:left}
.msg .sec__head::before{
  content:"";
  order:0;
  width:96px;
  height:1px;
  margin-bottom:34px;
  background:rgba(255,255,255,.55);
}
.msg .sec__head .sec__ja{color:var(--white)}
.msg .sec__head .sec__ja::before{background:var(--white)}
.msg .sec__head .sec__en{color:var(--white)}

.msg__body{
  max-width:430px;
  margin-inline:0;
  margin-top:var(--gap-m);
  line-height:2.1;
  letter-spacing:.03em;
  color:rgba(255,255,255,.86);
}
.msg__body.is-dummy{color:rgba(255,255,255,.72)}
.msg .sec__head{max-width:430px}

.msg__visual{
  position:absolute;
  z-index:1;
  top:50%;
  right:0;
  width:46%;
  max-width:720px;
  aspect-ratio:16/11;
  transform:translateY(-50%);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.msg__visual img{width:100%;height:100%;object-fit:cover}

/* 技術紹介＝文は中央ぞろえ、リンクはその右下 */
.tech-foot{
  display:flex;
  flex-direction:column;
  align-items:center;
  grid-template-columns:none;
  gap:0;
}
.tech-foot p{
  max-width:840px;
  text-align:center;
}
.tech-foot .more--dot{
  align-self:flex-end;
  margin-top:var(--gap-m);
}

/* 設備紹介＝リンクは丸い写真の下、右寄せ */
.equip-foot{
  margin-top:var(--gap-m);
  text-align:right;
}
.equip-foot .more--dot{margin-top:0}

/* お知らせ一覧のリンクは右寄せ */
.news-foot{text-align:right}

@media (max-width:900px){
  .tech-foot .more--dot{align-self:center}
  .equip-foot,
  .news-foot{text-align:left}
}

/* お知らせからお問い合わせまで、地続きのグレー。お問い合わせは白い角丸の札 */
.sec--news{background:var(--bg-soft)}

.contact-band{
  background:var(--bg-soft);
  padding-top:var(--gap-l);
  padding-bottom:var(--gap-xl);
}
.contact-band>.container{
  max-width:var(--maxw);
  padding:0 var(--pad-x);
  background:none;
  border-radius:0;
}
/* お問い合わせ＝ぜんぶを一つの白い角丸の面に入れる */
.contact-band__panel{
  padding:var(--gap-xl) var(--gap-l);
  background:var(--white);
  border-radius:var(--radius-lg);
}
.contact-band__cols{gap:var(--gap-m)}
.contact-card{
  padding:var(--gap-l) var(--gap-m);
  background:none;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:border-color .25s,color .25s;
}
a.contact-card:hover{
  border-color:var(--red);
  transform:none;
  color:var(--red);
}
a.contact-card:hover .contact-card__note{color:var(--red)}

@media (max-width:900px){
  .contact-band>.container{padding:0 var(--pad-x);border-radius:0}
  .contact-band__panel{padding:var(--gap-l) var(--gap-m)}
  .contact-card{padding:var(--gap-m) var(--gap-s)}
}

/* ---------------------------------------------------------
   設備紹介のページ＝設備の一覧
   --------------------------------------------------------- */

/* 分類の見出し＝赤い点、右へ細い罫線が伸びる */
.equip-cat+.equip-cat{margin-top:var(--gap-xl)}
.equip-cat__title{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:.1em;
}
.equip-cat__title::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--red);
}
.equip-cat__title::after{
  content:"";
  flex:1;
  height:2px;
  background:var(--red);
}

/* 2026-09-08：三上様ご指示で JACKSTELLA と同じ形へ。
   分類ごとに代表画像1枚 ＋ その下に設備名だけ。各設備の説明文は置かない。
   旧レイアウト（サムネ＋設備名＋説明文の三列）の宣言は _removed-css-20260908.txt に退避。 */
.equip-cat__photo{
  margin:var(--gap-m) 0 0;
  width:100%;
  max-width:720px;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  display:grid;
  place-items:center;
  color:var(--ink-soft);
  font-size:14px;
  letter-spacing:.12em;
}
.equip-names{
  margin:var(--gap-m) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.equip-name{
  padding-block:14px;
  border-bottom:1px solid var(--line);
  font-size:16px;
  line-height:1.8;
  letter-spacing:.04em;
}

@media (max-width:900px){
  .equip-cat__title{font-size:17px}
  .equip-name{font-size:15px}
}

@media (max-width:900px){
  .msg__panel{margin-right:0;padding-bottom:var(--gap-l)}
  .msg__body,
  .msg .sec__head{max-width:none}
  .msg__visual{
    position:relative;
    top:auto;
    right:auto;
    width:calc(100% - var(--pad-x) * 2);
    max-width:none;
    margin:calc(var(--gap-l) * -1 - 24px) auto 0;
    aspect-ratio:16/10;
    transform:none;
    border-radius:var(--radius-lg);
  }
}

/* ---------------------------------------------------------
   下のページの見出しの帯＝写真を敷いて、見出しは表紙と同じ形
   （日本語を小さく上に・赤い丸つき／英字を大きく下に）
   --------------------------------------------------------- */
.page-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:clamp(240px,27vw,360px);
  background-image:
    linear-gradient(100deg,rgba(14,19,28,.78) 0%,rgba(14,19,28,.62) 45%,rgba(14,19,28,.48) 100%),
    url("../images/仮/仮_FV_加工機.jpg");
  background-size:cover;
  background-position:center 46%;
  background-repeat:no-repeat;
}
.page-hero::before{opacity:.35}

.page-hero__ja{
  order:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.12em;
  color:var(--white);
}
.page-hero__ja::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--red);
  transform:translateY(3px);
}
.page-hero__en{
  order:2;
  margin-top:14px;
  font-family:var(--font-en);
  font-size:clamp(30px,4.6vw,60px);
  font-weight:400;
  line-height:1.06;
  letter-spacing:.015em;
  text-transform:uppercase;
  color:var(--white);
}

/* 下のページの見出しの帯だけ＝日本語を赤に、しるしを短い線に */
.page-hero__ja{color:var(--red)}
.page-hero__ja::before{
  width:30px;
  height:2px;
  border-radius:0;
  transform:translateY(1px);
}

/* 下のページの帯＝文字は白、しるしは白い丸、英字はここだけ大きく */
.page-hero__ja{color:var(--white)}
.page-hero__ja::before{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--white);
  transform:translateY(3px);
}
.page-hero__en{
  font-size:clamp(38px,6.4vw,86px);
  text-align:center;
}

/* 道しるべ＝右に寄せて、区切りだけ赤 */
.breadcrumb{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--ink);
}
.breadcrumb a{color:var(--sub)}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb__sep{
  color:var(--red);
  font-size:15px;
  font-weight:400;
}

/* =========================================================
   会社案内のページ
   ========================================================= */

/* 英字を持たない見出し＝日本語のほうを大きく立てる */
.sec__head--solo{margin-bottom:var(--gap-l)}
.sec__head--solo .sec__ja{
  gap:14px;
  font-size:clamp(24px,3.2vw,38px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.1em;
  color:var(--ink);
}
.sec__head--solo .sec__ja::before{width:10px;height:10px;transform:translateY(2px)}

/* ご挨拶＝文章の右に写真 */
.greet{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:var(--gap-l);
  align-items:start;
}
.greet__body p{margin-top:0;line-height:2.2;letter-spacing:.03em}
.greet__sign{margin-top:var(--gap-m) !important;text-align:right;font-weight:500}
.greet__visual{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  aspect-ratio:4/3;
}
.greet__visual img{width:100%;height:100%;object-fit:cover}

/* 経営理念 */
.philo__lead{
  max-width:840px;
  margin-inline:auto;
  margin-top:0;
  text-align:center;
  line-height:2.2;
}
.philo{margin-top:var(--gap-l);border-top:1px solid var(--line)}
.philo__row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:var(--gap-m);
  align-items:center;
  padding-block:26px;
  border-bottom:1px solid var(--line);
}
.philo__row h3{
  margin-top:0;
  text-align:center;
  font-family:var(--font-en);
  font-size:20px;
  font-weight:500;
  letter-spacing:.16em;
}
.philo__row p{margin-top:0;line-height:2}

/* 会社概要 */
.outline{display:block}
.outline__visual{
  margin-bottom:var(--gap-l);
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  aspect-ratio:32/9;
}
.outline__visual img{width:100%;height:100%;object-fit:cover}
.outline__table{border-top:1px solid var(--line)}
.outline__row{
  display:grid;
  grid-template-columns:180px 1fr;
  border-bottom:1px solid var(--line);
}
.outline__key,
.outline__val{margin-top:0;padding:15px 22px;font-size:14px;line-height:1.9}
.outline__key{background:var(--bg-soft);font-weight:500;letter-spacing:.06em}
.outline__val{color:var(--ink-soft)}

.map-ph{
  margin-top:var(--gap-l);
  display:grid;
  place-items:center;
  aspect-ratio:16/6;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.map-ph h3{margin-top:0;color:var(--sub);letter-spacing:var(--track-mid)}

/* 沿革 */
.hist{border-top:1px solid var(--line)}
.hist__row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:var(--gap-m);
  padding-block:22px;
  border-bottom:1px solid var(--line);
}
.hist__date{
  margin-top:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:500;
  font-size:15px;
  letter-spacing:.04em;
}
.hist__date::before{content:"";width:14px;height:2px;flex:none;background:var(--red)}
.hist__body{margin-top:0;font-size:15px;color:var(--ink-soft)}

/* 組織図 */
.org{
  position:relative;
  padding:var(--gap-l);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.org__label{
  margin:0 0 var(--gap-m);
  font-size:15px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.org__grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    ".  top   ."
    "lt core  rt"
    "lb .     rb";
  gap:var(--gap-m);
  align-items:center;
  justify-items:center;
}
.org__grid::before{
  content:"";
  position:absolute;
  inset:6% 10%;
  border:1px dashed var(--line);
  border-radius:50%;
}
.org__grid>*{position:relative;z-index:1;width:100%}
.org__node--top{grid-area:top}
.org__grid>*:nth-child(2){grid-area:lt}
.org__core{grid-area:core}
.org__grid>*:nth-child(4){grid-area:rt}
.org__grid>*:nth-child(5){grid-area:lb}
.org__grid>*:nth-child(6){grid-area:rb}

.org__node{
  padding:var(--gap-m);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.org__node h3{
  margin-top:0;
  font-size:15px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:.04em;
}
.org__node h3::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin-top:10px;
  background:var(--red);
}
.org__node p{margin-top:12px;font-size:13px;line-height:1.9;color:var(--ink-soft)}

.org__core{
  display:grid;
  place-items:center;
  width:min(240px,100%) !important;
  aspect-ratio:1/1;
  padding:var(--gap-s);
  border-radius:50%;
  background:var(--band);
  color:var(--white);
  text-align:center;
}
.org__core h2{font-size:17px;font-weight:700;line-height:1.7;letter-spacing:.06em}

.org__note{
  margin-top:var(--gap-l);
  text-align:center;
  font-size:14px;
  line-height:2.2;
  color:var(--ink-soft);
}

/* パートナー企業 */
.partner{
  max-width:840px;
  margin-inline:auto;
  padding:var(--gap-l);
  background:var(--white);
  border-radius:var(--radius-lg);
}
.partner__name{
  margin-top:0;
  text-align:center;
  font-size:21px;
  font-weight:700;
  letter-spacing:.06em;
}
.partner__lead{
  margin-top:var(--gap-s);
  text-align:center;
  font-size:14px;
  line-height:2.1;
  color:var(--ink-soft);
}
.partner__media{
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns:110px 1fr;
  gap:var(--gap-m);
  align-items:center;
}
.partner__logos{display:grid;gap:var(--gap-s)}
.partner__logo{
  margin-top:0;
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:13px;
}
.partner__ph{
  aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.partner__table{margin-top:var(--gap-m);border-top:1px solid var(--line)}
.partner__row{padding-block:16px;border-bottom:1px solid var(--line)}
.partner__key{
  margin-top:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
}
.partner__key::before{content:"";width:14px;height:2px;flex:none;background:var(--red)}
.partner__val{margin-top:6px;font-size:14px;line-height:1.9;color:var(--ink-soft)}

/* 主要取引先 */
.clients{
  max-width:900px;
  margin-inline:auto;
  margin-top:0;
  text-align:center;
  font-size:15px;
  line-height:2.4;
  letter-spacing:.04em;
}

@media (max-width:900px){
  .greet,
  .outline{grid-template-columns:1fr;gap:var(--gap-m)}
  .outline__visual{aspect-ratio:16/10}
  .philo__row,
  .hist__row,
  .outline__row{grid-template-columns:1fr;gap:8px}
  .philo__row h3{text-align:left}
  .outline__key{padding-bottom:6px}
  .outline__val{padding-top:0}
  .org{padding:var(--gap-m)}
  .org__grid{grid-template-columns:1fr;grid-template-areas:none;gap:var(--gap-s)}
  .org__grid>*{grid-area:auto !important}
  .org__grid::before{display:none}
  .org__core{justify-self:center;width:min(220px,100%) !important;margin-block:var(--gap-s)}
  .partner{padding:var(--gap-m)}
  .partner__media{grid-template-columns:1fr}
  .partner__logos{grid-template-columns:1fr 1fr}
  .map-ph{aspect-ratio:4/3}
}

/* 組織図＝上に中核、左右に四社、まん中にグループ */
.org__grid{
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:none;
}
.org__node--top{grid-area:auto;grid-column:1/-1;grid-row:1;justify-self:center;max-width:480px}
.org__grid>*:nth-child(2){grid-area:auto;grid-column:1;grid-row:2}
.org__core{grid-area:auto;grid-column:2;grid-row:2/4;align-self:center}
.org__grid>*:nth-child(4){grid-area:auto;grid-column:3;grid-row:2}
.org__grid>*:nth-child(5){grid-area:auto;grid-column:1;grid-row:3}
.org__grid>*:nth-child(6){grid-area:auto;grid-column:3;grid-row:3}

.org__node{padding:26px}
.org__node p{font-size:12.5px;letter-spacing:0;line-height:2}
.org__core{width:min(240px,100%) !important}

@media (max-width:900px){
  .org__grid{grid-template-columns:1fr}
  .org__grid>*{grid-column:1 !important;grid-row:auto !important;max-width:none !important}
  .org__core{align-self:auto}
}

/* 組織図＝いただいた図を大きく置き、その下に各社の説明をならべる */
.org{background:var(--white);border:1px solid var(--line)}
.org__chart{
  margin-bottom:var(--gap-l);
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.org__chart img{width:100%;height:auto}

.org__grid{
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-m);
  align-items:stretch;
}
.org__grid::before{display:none}
.org__grid>*{grid-column:auto !important;grid-row:auto !important;max-width:none !important}
.org__node{background:var(--bg-soft);border-color:transparent}

.org__core{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:auto !important;
  aspect-ratio:auto;
  padding:26px;
  border-radius:var(--radius-lg);
  background:var(--band);
  text-align:left;
}
.org__core h2{font-size:16px;line-height:1.8}

@media (max-width:900px){
  .org__grid{grid-template-columns:1fr}
  .org__core{align-self:stretch}
}

/* 各社の説明は二列で、文が途中で折れないようにする */
.org__grid{grid-template-columns:repeat(2,1fr)}
.org__core{align-self:stretch;justify-self:stretch}
.org__node p{font-size:13px}

@media (max-width:900px){
  .org__grid{grid-template-columns:1fr}
}

/* 英字を持たない見出し＝設備紹介の分類の見出しと同じ形にそろえる */
.sec__head--solo{
  display:block;
  margin-bottom:var(--gap-l);
  text-align:left;
}
.sec__head--solo .sec__ja{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:0;
  font-size:19px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.1em;
  color:var(--ink);
}
.sec__head--solo .sec__ja::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  transform:none;
  background:var(--red);
}
.sec__head--solo .sec__ja::after{
  content:"";
  flex:1;
  height:2px;
  background:var(--red);
}
@media (max-width:560px){
  .sec__head--solo .sec__ja{font-size:17px;gap:12px}
}


/* 経営理念＝白い四角を三つならべ、その中に書く */
.philo{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-s);
  margin-top:var(--gap-l);
  border-top:0;
}
.philo__row{
  display:block;
  padding:var(--gap-m);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.philo__row h3{
  margin:0;
  font-size:17px;
  font-weight:700;
  letter-spacing:var(--track-mid);
  color:var(--ink);
}
.philo__row h3::after{
  content:"";
  display:block;
  width:28px;
  height:2px;
  margin:14px 0 16px;
  background:var(--red);
}
.philo__row p{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:var(--ink-soft);
}
@media (max-width:900px){
  .philo{grid-template-columns:1fr;gap:var(--gap-s)}
  .philo__row{padding:26px}
}

/* 沿革＝白い角丸の面の中に入れる */
.hist{
  padding:8px var(--gap-m);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.hist__row:last-child{border-bottom:0}
@media (max-width:900px){
  .hist{padding:8px var(--gap-s)}
}

/* グレーの面を沿革からグループまで地続きにする */
.sec--tight-b{padding-bottom:var(--gap-l)}
.sec--tight-t{padding-top:var(--gap-l)}

/* パートナー企業＝白い地の上に置くので、輪郭を薄い線で出す */
.partner{border:1px solid var(--line)}

/* グループ＝親を赤い字で上に置き、五社を赤い枠で囲う（上に三社・下に二社） */
.org__grid{
  position:relative;
  grid-template-columns:repeat(6,1fr);
  gap:var(--gap-m) var(--gap-s);
  align-items:stretch;
  margin-top:34px;
  padding:calc(var(--gap-l) - 12px) var(--gap-m) var(--gap-m);
  border:2px solid var(--red);
  border-radius:var(--radius-lg);
}
.org__grid>*:nth-child(1){grid-column:1/span 2 !important;grid-row:1 !important}
.org__grid>*:nth-child(2){grid-column:3/span 2 !important;grid-row:1 !important}
.org__grid>*:nth-child(4){grid-column:5/span 2 !important;grid-row:1 !important}
.org__grid>*:nth-child(5){grid-column:2/span 2 !important;grid-row:2 !important}
.org__grid>*:nth-child(6){grid-column:4/span 2 !important;grid-row:2 !important}

.org__core{
  position:absolute;
  top:0;
  left:50%;
  z-index:1;
  display:block;
  width:auto !important;
  padding:0 24px;
  border-radius:0;
  background:var(--white);
  text-align:center;
  transform:translate(-50%,-50%);
}
.org__core h2{
  margin:0;
  font-size:20px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.08em;
  white-space:nowrap;
  color:var(--red);
}
.org__core::after{display:none}

@media (max-width:900px){
  .org__grid{
    grid-template-columns:1fr;
    gap:var(--gap-s);
    margin-top:26px;
    padding:36px var(--gap-s) var(--gap-s);
  }
  .org__grid>*:nth-child(1),
  .org__grid>*:nth-child(2),
  .org__grid>*:nth-child(4),
  .org__grid>*:nth-child(5),
  .org__grid>*:nth-child(6){grid-column:1 !important;grid-row:auto !important}
  .org__core{padding:0 14px}
  .org__core h2{font-size:15px;white-space:normal}
}

/* 経営理念の見出しは、下の赤い線とそろえて左に置く */
.philo__row h3{text-align:left}

/* グループの説明文＝注釈ではなく本文として読ませる */
.org__note{
  margin-top:var(--gap-m);
  padding-top:var(--gap-m);
  border-top:1px solid var(--line);
  text-align:left;
  font-size:16px;
  line-height:2.1;
  color:var(--ink);
}
@media (max-width:900px){
  .org__note{font-size:15px;line-height:2}
}

/* グループの説明文＝中央にそろえる */
.org__note{text-align:center}

/* 表紙の大きいところ＝いただいた写真を敷き、まん中にそろえる */
.fv{
  min-height:min(92vh,880px);
  background-image:
    linear-gradient(180deg,rgba(16,18,22,.30) 0%,rgba(16,18,22,.14) 42%,rgba(16,18,22,.34) 100%),
    url("../images/fv-main.jpg");
  background-size:cover;
  background-position:center center;
}
.fv::before{display:none}
.fv::after{display:none}

.fv__inner{display:block;text-align:center}
.fv__label{
  margin:0 0 var(--gap-s);
  font-size:13px;
  letter-spacing:.24em;
  color:rgba(255,255,255,.82);
}
.fv__copy{
  padding-left:0;
  font-size:clamp(40px,6.6vw,92px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:.01em;
  color:var(--white);
  text-shadow:0 2px 30px rgba(12,14,18,.35);
}
.fv__copy::before{display:none}
.fv__copy span{display:block}
.fv__copy span+span{margin-left:0}
.fv__note{
  max-width:720px;
  margin-inline:auto;
  margin-top:var(--gap-m);
  text-align:center;
  font-size:15px;
  line-height:2;
  color:rgba(255,255,255,.9);
}
.fv__note.is-dummy{color:rgba(255,255,255,.86)}

/* まん中の、うすい丸のかさなり */
.fv__orbs{position:absolute;inset:0;z-index:0;pointer-events:none}
.fv__orbs span{
  position:absolute;
  top:50%;
  left:50%;
  width:min(42vw,560px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:rgba(255,255,255,.10);
}
.fv__orbs span:first-child{transform:translate(-78%,-50%)}
.fv__orbs span:last-child{transform:translate(-22%,-50%)}

/* 右はしの、しるしの点 */
.fv__dots{
  position:absolute;
  top:50%;
  right:26px;
  z-index:1;
  display:grid;
  gap:14px;
  transform:translateY(-50%);
  pointer-events:none;
}
.fv__dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
}
.fv__dots span:first-child{background:var(--red)}

@media (max-width:900px){
  .fv{min-height:78vh}
  .fv__orbs span{width:min(70vw,420px)}
  .fv__orbs span:first-child{transform:translate(-70%,-50%)}
  .fv__orbs span:last-child{transform:translate(-30%,-50%)}
  .fv__dots{right:14px}
  .fv__note{font-size:14px}
}

/* しるしの点は、ついてくるボタンとぶつかるので下に置く */
.fv__dots{
  top:auto;
  bottom:40px;
  right:38px;
  transform:none;
}

/* 表紙＝写真をゆっくり寄る、丸はまん中にひとつ、文字はふわりと出す */
.fv{background-image:none;background-color:var(--band-deep)}
.fv__bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("../images/fv-main.jpg") center center/cover no-repeat;
  animation:fv-zoom 18s cubic-bezier(.2,.6,.3,1) both;
}
.fv__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(16,18,22,.30) 0%,rgba(16,18,22,.14) 42%,rgba(16,18,22,.34) 100%);
}
@keyframes fv-zoom{
  from{transform:scale(1.1)}
  to{transform:scale(1)}
}

.fv__dots{display:none}

.fv__orbs span{
  width:min(52vw,680px);
  transform:translate(-50%,-50%);
  animation:fv-orb 8s ease-in-out infinite alternate;
}
@keyframes fv-orb{
  from{transform:translate(-50%,-50%) scale(.95);opacity:.7}
  to{transform:translate(-50%,-50%) scale(1.05);opacity:1}
}

@keyframes fv-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
.fv__label{animation:fv-up 1s .2s cubic-bezier(.22,.61,.36,1) both}
.fv__copy span{animation:fv-up 1.1s .4s cubic-bezier(.22,.61,.36,1) both}
.fv__copy span+span{animation-delay:.58s}
.fv__note{animation:fv-up 1.1s .84s cubic-bezier(.22,.61,.36,1) both}

@media (max-width:900px){
  .fv__orbs span{width:min(78vw,440px)}
}
@media (prefers-reduced-motion:reduce){
  .fv__bg,.fv__orbs span,.fv__label,.fv__copy span,.fv__note{animation:none}
}

/* 表紙＝英字をうんと大きく二行、その下に日本語を一行 */
.fv__label{
  margin:0 0 var(--gap-s);
  font-family:var(--font-en);
  font-size:clamp(36px,5.8vw,84px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:.02em;
  color:var(--white);
  text-shadow:0 2px 30px rgba(12,14,18,.35);
}
.fv__copy{
  font-size:clamp(19px,2.5vw,32px);
  font-weight:500;
  line-height:1.6;
  letter-spacing:.08em;
}
.fv__copy span{display:inline}
.fv__copy span+span{margin-left:.5em}

/* まん中の丸は、すこし小さく */
.fv__orbs span{width:min(40vw,520px)}
@media (max-width:900px){
  .fv__orbs span{width:min(66vw,360px)}
  .fv__label{font-size:clamp(28px,8.4vw,44px)}
}

/* 英字は、右のボタンにぶつからない大きさにおさえる */
.fv__label{font-size:clamp(34px,5.1vw,72px)}

/* 英字と日本語のあいだを開けて、そこに赤い短い線を入れる */
.fv__copy{
  position:relative;
  margin-top:42px;
  padding-top:42px;
}
.fv__copy::before{
  display:block;
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:52px;
  height:2px;
  background:var(--red);
  transform:translateX(-50%);
  transform-origin:center;
  animation:fv-line .9s .58s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes fv-line{
  from{opacity:0;transform:translateX(-50%) scaleX(0)}
  to{opacity:1;transform:translateX(-50%) scaleX(1)}
}
.fv__copy span{animation-delay:.8s}
@media (max-width:900px){
  .fv__copy{margin-top:30px;padding-top:30px}
}
@media (prefers-reduced-motion:reduce){
  .fv__copy::before{animation:none}
}

/* 赤い線は、すこし長く太くして見えるようにする */
.fv__copy::before{width:64px;height:3px}

/* 英字の一行目を赤にする */
.fv__em{
  color:var(--red);
  text-shadow:0 2px 24px rgba(12,14,18,.5);
}

/* 塊の見出し＝英字をもっと大きく */
.sec .sec__head .sec__en{
  margin-top:12px;
  font-size:clamp(32px,4.3vw,56px);
  line-height:1.1;
  letter-spacing:.03em;
}
@media (max-width:560px){
  .sec .sec__head .sec__en{font-size:28px}
}

/* 画面に入ってきたら、ふわりと出す */
.js-rise{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);
}
.js-rise.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .js-rise{opacity:1;transform:none;transition:none}
}

/* お問い合わせの帯の見出しも、他とそろえて大きく */
.contact-band .sec__head .sec__en{
  margin-top:12px;
  font-size:clamp(30px,4vw,52px);
  line-height:1.1;
  letter-spacing:.03em;
}
@media (max-width:560px){
  .contact-band .sec__head .sec__en{font-size:26px}
}

/* 見出しの英字＝さらに大きく */
.sec .sec__head .sec__en,
.sec__head--dot .sec__en{
  margin-top:14px;
  font-size:clamp(38px,6vw,82px);
  line-height:1.06;
  letter-spacing:.02em;
}
.contact-band .sec__head .sec__en{font-size:clamp(34px,5.2vw,72px)}
@media (max-width:560px){
  .sec .sec__head .sec__en,
  .sec__head--dot .sec__en{font-size:36px}
  .contact-band .sec__head .sec__en{font-size:32px}
}

/* 見出しの英字＝もう一段大きく */
.sec .sec__head .sec__en,
.sec__head--dot .sec__en{font-size:clamp(42px,6.9vw,92px)}
.contact-band .sec__head .sec__en{font-size:clamp(38px,6vw,80px)}
@media (max-width:560px){
  .sec .sec__head .sec__en,
  .sec__head--dot .sec__en{font-size:40px}
  .contact-band .sec__head .sec__en{font-size:36px}
}

/* 見出しが大きくなったぶん、右の文章をもっと右へ */
.split{grid-template-columns:620px 1fr}
@media (max-width:1100px){
  .split{grid-template-columns:1fr}
}

/* お問い合わせの帯の見出しも、ほかとぴったり同じ大きさに */
.contact-band .sec__head .sec__en{font-size:clamp(42px,6.9vw,92px)}
@media (max-width:560px){
  .contact-band .sec__head .sec__en{font-size:40px}
}
.contact-band .sec__head .sec__en{margin-top:14px;line-height:1.06;letter-spacing:.02em}

/* サンテックについての赤い面＝表紙の写真の下にぴったり付ける */
.sec--msg{padding-top:0}

/* 「〜はこちら」＝もう少し目立つ大きさに */
.more{
  min-height:66px;
  padding-inline:46px;
  gap:16px;
  font-size:17px;
  font-weight:500;
}
@media (max-width:560px){
  .more{min-height:58px;padding-inline:32px;font-size:15px}
}

/* 会社案内のボタンだけ形が違っていたので、ほかとそろえる */
.comp__btn{
  min-height:66px;
  padding-inline:46px;
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius);
  color:var(--white);
  font-size:17px;
  font-weight:500;
}

/* 「〜はこちら」＝枠なしの形にもどして、文字を大きく・すこし太く */
.more--dot{
  min-height:0;
  padding-inline:0;
  border:0;
  gap:18px;
  font-size:19px;
  font-weight:600;
}
.more--dot::after{width:44px;height:44px}
.more--dot::before{right:18px;width:8px;height:8px}

/* 会社案内＝白い楕円の中に、左に文字・右に赤い丸と白い矢印 */
.comp__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:24px;
  min-height:74px;
  padding:0 14px 0 38px;
  background:var(--white);
  border:0;
  border-radius:999px;
  color:var(--ink);
  font-size:19px;
  font-weight:600;
}
.comp__btn::after{
  content:"";
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--red);
  transition:background .25s;
}
.comp__btn::before{
  content:"";
  position:absolute;
  top:50%;
  right:33px;
  width:8px;
  height:8px;
  border-top:1px solid var(--white);
  border-right:1px solid var(--white);
  transform:translateY(-50%) rotate(45deg);
  z-index:1;
}
.comp__btn:hover{color:var(--ink)}
.comp__btn:hover::after{background:var(--red-deep)}
@media (max-width:560px){
  .more--dot{font-size:17px}
  .comp__btn{min-height:66px;font-size:17px;padding-left:30px}
}

/* 会社案内＝赤い楕円に白い文字、右は白い丸に赤い矢印 */
.comp__btn{
  background:var(--red);
  border:1px solid rgba(255,255,255,.55);
  color:var(--white);
}
.comp__btn::after{background:var(--white)}
.comp__btn::before{
  border-top-color:var(--red);
  border-right-color:var(--red);
}
.comp__btn:hover{color:var(--white)}
.comp__btn:hover::after{background:var(--white)}

/* 「〜はこちら」も全部おなじ形＝赤い楕円に白い文字、右は白い丸に赤い矢印 */
.more--dot{
  min-height:74px;
  padding:0 14px 0 38px;
  gap:24px;
  background:var(--red);
  border:0;
  border-radius:999px;
  color:var(--white);
  font-size:19px;
  font-weight:600;
}
.more--dot::after{
  width:46px;
  height:46px;
  background:var(--white);
}
.more--dot::before{
  right:33px;
  width:8px;
  height:8px;
  border-top-color:var(--red);
  border-right-color:var(--red);
}
.more--dot:hover{color:var(--white)}
.more--dot:hover::after{background:var(--white)}
@media (max-width:560px){
  .more--dot{min-height:66px;font-size:17px;padding-left:30px}
}

/* 表紙の英字＝ごあいさつの英字と同じ見え方にそろえ、すこし大きく */
.fv__label{
  font-weight:400;
  letter-spacing:.03em;
  font-size:clamp(38px,6vw,88px);
  line-height:1.06;
}
@media (max-width:900px){
  .fv__label{font-size:clamp(30px,8.6vw,50px)}
}

/* ボタン＝那尚香さんの見本の形（赤い角丸・白い太字・右に細い矢印） */
.more,
.more--dot,
.comp__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-width:290px;
  min-height:72px;
  padding:0 34px;
  background:var(--red);
  border:0;
  border-radius:24px;
  color:var(--white);
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  transition:background .25s;
}
.more::after,
.more--dot::after,
.comp__btn::after{
  content:"";
  width:26px;
  height:2px;
  border-radius:0;
  background:var(--white);
  transform:none;
  transition:transform .25s;
}
.more::before,
.more--dot::before,
.comp__btn::before{
  content:"";
  position:absolute;
  top:50%;
  right:34px;
  width:9px;
  height:9px;
  background:none;
  border-top:2px solid var(--white);
  border-right:2px solid var(--white);
  border-left:0;
  border-bottom:0;
  border-radius:0;
  transform:translateY(-50%) rotate(45deg);
  transition:transform .25s;
}
.more:hover,
.more--dot:hover,
.comp__btn:hover{background:var(--red-deep);color:var(--white)}
.more:hover::after,
.more--dot:hover::after{background:var(--white);transform:translateX(4px)}
.more:hover::before,
.more--dot:hover::before{transform:translate(4px,-50%) rotate(45deg)}

/* 赤い面の上にのるボタンだけは、白地に赤い文字でひっくり返す */
.comp__btn{background:var(--white);color:var(--red)}
.comp__btn::after{background:var(--red)}
.comp__btn::before{border-top-color:var(--red);border-right-color:var(--red)}
.comp__btn:hover{background:var(--white);color:var(--red-deep)}
.comp__btn:hover::after{background:var(--red-deep);transform:translateX(4px)}
.comp__btn:hover::before{border-top-color:var(--red-deep);border-right-color:var(--red-deep);transform:translate(4px,-50%) rotate(45deg)}

@media (max-width:560px){
  .more,.more--dot,.comp__btn{min-width:0;width:100%;min-height:64px;padding:0 26px;font-size:16px;gap:18px}
  .more::before,.more--dot::before,.comp__btn::before{right:26px}
}

/* ボタン＝見本にそろえ直す（もっと丸く・文字と矢印は小さく細く） */
.more,
.more--dot,
.comp__btn{
  min-width:235px;
  min-height:72px;
  padding:0 32px;
  gap:28px;
  border-radius:36px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
}
.more::after,
.more--dot::after,
.comp__btn::after{
  width:21px;
  height:1.5px;
}
.more::before,
.more--dot::before,
.comp__btn::before{
  right:32px;
  width:7px;
  height:7px;
  border-top-width:1.5px;
  border-right-width:1.5px;
}
@media (max-width:560px){
  .more,.more--dot,.comp__btn{min-width:0;width:100%;min-height:64px;padding:0 26px;font-size:15px;border-radius:32px}
  .more::before,.more--dot::before,.comp__btn::before{right:26px}
}

/* ボタン＝見本のとおりに作り直す
   ふだん＝赤いだ円に白い文字、右に白い矢印
   指をのせたとき＝白い地に赤いふち・赤い文字、右は赤い丸に白い矢印 */
.more,
.more--dot,
.comp__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-width:238px;
  min-height:72px;
  padding:0 17px 0 34px;
  background:var(--red);
  border:1px solid var(--red);
  border-radius:999px;
  color:var(--white);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  transition:background-color .28s,color .28s,border-color .28s;
}
.more::after,
.more--dot::after,
.comp__btn::after{
  content:"";
  width:38px;
  height:38px;
  border-radius:50%;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4L22 6l-5.4 4.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px auto;
  transform:none;
  transition:background-color .28s,transform .28s;
}
.more::before,
.more--dot::before,
.comp__btn::before{content:none}

.more:hover,
.more--dot:hover{
  background:var(--white);
  border-color:var(--red);
  color:var(--red);
}
.more:hover::after,
.more--dot:hover::after{background-color:var(--red)}

/* 赤い面の上にのるボタンは、はじめから白い地の形にしておく */
.comp__btn{
  background:var(--white);
  border-color:var(--white);
  color:var(--red);
}
.comp__btn::after{
  background-color:var(--red);
}
.comp__btn:hover{
  background:var(--red);
  border-color:var(--white);
  color:var(--white);
}
.comp__btn:hover::after{
  background-color:var(--white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4L22 6l-5.4 4.6' fill='none' stroke='rgb(229,0,20)' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
}

@media (max-width:560px){
  .more,.more--dot,.comp__btn{min-width:0;width:100%;min-height:64px;padding:0 14px 0 28px;font-size:14px;gap:16px}
  .more::after,.more--dot::after,.comp__btn::after{width:34px;height:34px;background-size:20px auto}
}

/* 指をのせたときも矢印を残す（前の決めごとが矢印を消してしまうため、ここで指定し直す） */
.more:hover::after,
.more--dot:hover::after{
  background-color:var(--red);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4L22 6l-5.4 4.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px auto;
  transform:none;
}
.comp__btn:hover::after{
  background-color:var(--white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4L22 6l-5.4 4.6' fill='none' stroke='rgb(229,0,20)' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px auto;
  transform:none;
}

/* 赤い面の上のボタンは、指をのせても白いままにする（赤い面に赤が重なると輪郭が消えるため） */
.comp__btn,
.comp__btn:hover{
  background:var(--white);
  border-color:var(--white);
}
.comp__btn{color:var(--red)}
.comp__btn:hover{color:var(--red-deep)}
.comp__btn::after,
.comp__btn:hover::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4L22 6l-5.4 4.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px auto;
  transform:none;
}
.comp__btn::after{background-color:var(--red)}
.comp__btn:hover::after{background-color:var(--red-deep)}

/* 本番の文章がまだのところも、まわりの文字と同じ濃さにする */
.is-dummy{color:inherit}
.fv__note.is-dummy,
.comp__panel p.is-dummy,
.msg__body.is-dummy{color:var(--white)}
.contact-card__note{color:var(--ink)}

/* 技術紹介の写真＝四角にして、番号を出さず、左下に赤い三角、文字を大きく */
.tech-card{border-radius:0}
.tech-card__ph{border-radius:0}
.tech-card__no{display:none}
.tech-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:64px;
  background:var(--red);
  clip-path:polygon(0 0,0 100%,100% 100%);
}
.tech-card h3{
  font-size:26px;
  letter-spacing:.04em;
}
@media (max-width:900px){
  .tech-card h3{font-size:23px}
  .tech-card::after{width:54px;height:54px}
}

/* 赤い三角を大きくして、文字の奥までかかるようにする */
.tech-card::after{width:118px;height:118px}
@media (max-width:900px){
  .tech-card::after{width:96px;height:96px}
}

/* 技術紹介＝左に文字、右に写真をすきまなく並べる */
@media (min-width:901px){
  #technology>.container{
    display:grid;
    grid-template-columns:minmax(300px,.9fr) 1.35fr;
    column-gap:60px;
    row-gap:var(--gap-m);
    align-items:start;
  }
  #technology>.container>.sec__head{
    grid-column:1;
    grid-row:1;
    margin-bottom:0;
  }
  #technology .tech-foot{
    grid-column:1;
    grid-row:2;
    display:block;
    margin-top:0;
  }
  #technology .tech-foot p{margin-top:0}
  #technology .tech-foot .more--dot{margin-top:var(--gap-l)}
  #technology .tech-grid{
    grid-column:2;
    grid-row:1 / span 2;
    grid-template-columns:repeat(2,1fr);
    gap:0;
    margin-top:0;
  }
  #technology .tech-card{aspect-ratio:16/10}
}

/* 技術紹介＝左の文章を左ぞろえに、三角は写真の大きさに合わせる */
@media (min-width:901px){
  #technology .tech-foot p{text-align:left}
  #technology>.container{row-gap:var(--gap-s)}
  #technology .tech-card::after{width:88px;height:88px}
}

/* 技術紹介＝左の欄に見出しがおさまる大きさにする */
@media (min-width:901px){
  #technology>.container{grid-template-columns:minmax(340px,1fr) 1.22fr}
  #technology>.container>.sec__head .sec__en{font-size:clamp(30px,3.6vw,52px)}
}

/* 技術紹介＝背景に斜めの筋、写真は細いすきまで並べ、右下に丸い矢印
   （背景の指定は 2026-08-29 に削除。後段の「白地＋赤い面」で全て打ち消されていた死にコード） */
#technology .tech-grid{gap:4px}
.tech-card__ph{filter:brightness(.72) saturate(.9)}
.tech-card:hover .tech-card__ph{filter:brightness(.55) saturate(.9)}
.tech-card::before{
  background:linear-gradient(180deg,rgba(20,22,26,0) 42%,rgba(20,22,26,.66) 100%);
}

/* 番号のところを、左下の赤い三角にする */
.tech-card__no{
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  width:88px;
  height:88px;
  font-size:0;
  line-height:0;
  background:var(--red);
  clip-path:polygon(0 0,0 100%,100% 100%);
  z-index:0;
}

/* 右下に白いわくの丸と矢印。指をのせると赤くなる */
.tech-card::after{
  content:"";
  position:absolute;
  right:22px;
  bottom:22px;
  left:auto;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4L22 6l-5.4 4.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px auto;
  clip-path:none;
  z-index:1;
  transition:background-color .25s,border-color .25s;
}
.tech-card:hover::after{background-color:var(--red);border-color:var(--red)}
@media (max-width:900px){
  .tech-card__no{width:76px;height:76px}
  .tech-card::after{width:42px;height:42px;right:18px;bottom:18px}
}

/* 技術紹介＝丸と三角を写真の大きさに合わせ、文字が丸に重ならないようにする */
.tech-card::after{width:36px;height:36px;right:16px;bottom:16px;background-size:15px auto}
.tech-card__no{width:72px;height:72px}
.tech-card h3{font-size:20px;padding-right:56px}
@media (max-width:900px){
  .tech-card::after{width:34px;height:34px;right:14px;bottom:14px}
  .tech-card__no{width:64px;height:64px}
  .tech-card h3{font-size:19px}
}

/* 技術紹介＝見本に合わせ直す（三角はやめ、丸は右のまん中、写真は明るく）
   （背景の指定は 2026-08-29 に削除。死にコード） */
.tech-card__no{display:none}
.tech-card__ph{filter:none;transform:scale(1.02)}
.tech-card:hover .tech-card__ph{filter:brightness(.82);transform:scale(1.07)}
.tech-card::before{
  background:linear-gradient(180deg,rgba(18,20,24,0) 50%,rgba(18,20,24,.70) 100%);
}
.tech-card::after{
  top:50%;
  bottom:auto;
  right:20px;
  width:44px;
  height:44px;
  transform:translateY(-50%);
  background-size:17px auto;
}
.tech-card h3{font-size:19px;padding-right:64px;letter-spacing:.06em}
@media (max-width:900px){
  .tech-card::after{width:40px;height:40px;right:16px}
  .tech-card h3{font-size:18px}
}

/* 技術紹介＝写真の下を濃くして文字を読みやすく
   （背景の指定は 2026-08-29 に削除。死にコード） */
.tech-card::before{
  background:linear-gradient(180deg,rgba(16,18,22,0) 34%,rgba(16,18,22,.5) 66%,rgba(16,18,22,.86) 100%);
}
.tech-card__ph{filter:brightness(.94)}

/* 写真の中の文字を、もっと下におろす */
.tech-card{padding:20px 22px}
.tech-card::after{right:18px}

/* 技術紹介＝写真は右端いっぱい、背景の面は左端いっぱい、写真の下でかさなる */
#technology{
  position:relative;
  background:var(--bg);
  background-image:none;
  overflow:hidden;
}
#technology::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:71%;
  /* 地色の指定は 2026-08-29 に削除。後段で var(--red) に置き換わる死にコードだった */
  background-image:
    linear-gradient(112deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.95) 27%,rgba(255,255,255,0) 40%),
    linear-gradient(112deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.8) 58%,rgba(255,255,255,0) 72%),
    linear-gradient(112deg,rgba(255,255,255,0) 78%,rgba(255,255,255,.6) 88%,rgba(255,255,255,0) 98%),
    radial-gradient(rgba(var(--red-rgb),.30) 1px,rgba(255,255,255,0) 1.1px);
  background-size:auto,auto,auto,3px 3px;
  z-index:0;
}

@media (min-width:901px){
  #technology>.container{
    position:relative;
    z-index:1;
    max-width:none;
    width:100%;
    padding:0;
    grid-template-columns:42% 58%;
    column-gap:0;
    align-items:center;
  }
  #technology>.container>.sec__head,
  #technology .tech-foot{
    padding-left:clamp(24px,6.4vw,104px);
    padding-right:clamp(20px,3vw,48px);
  }
  #technology .tech-grid{
    grid-column:2;
    grid-row:1 / span 2;
    gap:0;
  }
}

/* 写真＝全体にうすい黒をかけ、文字は左下、丸は右 */
.tech-card::before{
  background:rgba(14,16,20,.44);
}
.tech-card__ph{filter:none}
.tech-card:hover .tech-card__ph{filter:none;transform:scale(1.07)}
.tech-card:hover::before{background:rgba(14,16,20,.3)}
.tech-card{padding:22px 22px 20px}
.tech-card h3{font-size:19px;padding-right:70px}
.tech-card::after{
  top:auto;
  bottom:18px;
  right:22px;
  width:38px;
  height:38px;
  transform:none;
  background-size:16px auto;
}

/* 写真の黒マスクを濃く、たてを低く、左の面はもっと白く */
.tech-card{aspect-ratio:16/9}
.tech-card::before{background:rgba(12,14,18,.52)}
.tech-card:hover::before{background:rgba(12,14,18,.34)}
#technology::before{
  /* 地色の指定は 2026-08-29 に削除。後段で var(--red) に置き換わる死にコードだった */
  background-image:
    linear-gradient(112deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.98) 27%,rgba(255,255,255,0) 40%),
    linear-gradient(112deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.9) 58%,rgba(255,255,255,0) 72%),
    linear-gradient(112deg,rgba(255,255,255,0) 78%,rgba(255,255,255,.7) 88%,rgba(255,255,255,0) 98%),
    radial-gradient(rgba(var(--red-rgb),.30) 1px,rgba(255,255,255,0) 1.1px);
  background-size:auto,auto,auto,3px 3px;
}

/* 写真のたてを低く、黒マスクをしっかりかける */
#technology .tech-card{aspect-ratio:16/9}
#technology .tech-card::before{background:rgba(12,14,18,.54)}
#technology .tech-card:hover::before{background:rgba(12,14,18,.34)}

/* 技術紹介の見出し＝ごあいさつの見出しと同じ大きさにそろえる */
#technology::before{width:73%}
@media (min-width:901px){
  #technology>.container{grid-template-columns:46% 54%}
  #technology>.container>.sec__head,
  #technology .tech-foot{
    padding-left:clamp(24px,4.5vw,72px);
    padding-right:clamp(16px,2vw,32px);
  }
  #technology>.container>.sec__head .sec__en{font-size:clamp(38px,6vw,82px)}
}

/* 技術紹介＝写真の中に英語の小さい行、左に軽い見出し、丸は小さく、黒はもう少し濃く */
.tech-card__en{
  font-family:var(--font-en);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.4;
  color:rgba(255,255,255,.88);
}
#technology .tech-card::before{background:rgba(12,14,18,.62)}
#technology .tech-card:hover::before{background:rgba(12,14,18,.4)}
.tech-card::after{width:30px;height:30px;right:20px;bottom:22px;background-size:13px auto}
.tech-card h3{padding-right:62px}
.tech-lead{
  margin-top:var(--gap-m);
  font-size:22px;
  font-weight:700;
  line-height:1.75;
  letter-spacing:.03em;
  color:var(--ink);
}
.tech-foot p.is-dummy{margin-top:var(--gap-m)}
@media (max-width:900px){
  .tech-lead{font-size:19px}
  .tech-card::after{width:28px;height:28px;right:16px;bottom:18px}
}

/* 見出しが写真にかからない大きさにおさめる／英語の行をはっきりさせる */
@media (min-width:901px){
  #technology>.container>.sec__head,
  #technology .tech-foot{padding-left:clamp(24px,3.5vw,56px)}
  #technology>.container>.sec__head .sec__en{font-size:clamp(34px,5vw,72px);letter-spacing:.01em}
}
.tech-card__en{font-size:12px;color:rgba(255,255,255,.95)}

/* 丸をもっと小さく、黒をもっと濃く、軽い見出しの下に余白 */
.tech-card::after{width:24px;height:24px;right:18px;bottom:22px;background-size:11px auto}
#technology .tech-card::before{background:rgba(12,14,18,.72)}
#technology .tech-card:hover::before{background:rgba(12,14,18,.5)}
.tech-card h3{padding-right:52px}
.tech-foot p.is-dummy{margin-top:var(--gap-l)}
@media (max-width:900px){
  .tech-card::after{width:22px;height:22px;right:14px;bottom:18px}
}

/* 軽い見出しの二行を、はなれて見えないように詰める */
.tech-lead{line-height:1.55}

/* 軽い見出しの下に余白／文章と写真のあいだを開ける */
.tech-foot p.is-dummy{margin-top:var(--gap-xl)}
@media (min-width:901px){
  #technology>.container>.sec__head,
  #technology .tech-foot{padding-right:clamp(28px,5.5vw,88px)}
}

/* 丸の大きさ＝前の決めごとが勝っていたので、ここで確実に小さくする */
#technology .tech-card::after{
  width:24px;
  height:24px;
  right:18px;
  bottom:22px;
  background-size:11px auto;
}
@media (max-width:900px){
  #technology .tech-card::after{width:22px;height:22px;right:14px;bottom:18px}
}

/* 丸と矢印＝いただいた絵と同じ割合にそろえる */
#technology .tech-card::after{
  width:40px;
  height:40px;
  right:20px;
  bottom:20px;
  background-size:16px auto;
}
@media (max-width:900px){
  #technology .tech-card::after{width:34px;height:34px;right:16px;bottom:16px;background-size:14px auto}
}

/* 軽い見出しと、その下の文章のあいだの余白（前の決めごとが勝っていたので指定し直す） */
#technology .tech-foot p.is-dummy{margin-top:44px}
#technology .tech-lead{margin-top:0}

/* 技術紹介＝左の面を赤にする（点はやめる） */
#technology::before{
  background-color:var(--red);
  background-image:
    linear-gradient(112deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.14) 27%,rgba(255,255,255,0) 40%),
    linear-gradient(112deg,rgba(255,255,255,0) 48%,rgba(255,255,255,.09) 58%,rgba(255,255,255,0) 72%),
    linear-gradient(112deg,rgba(255,255,255,0) 78%,rgba(255,255,255,.07) 88%,rgba(255,255,255,0) 98%);
  background-size:auto,auto,auto;
}

/* 赤い面の上に乗る文字は白にする */
#technology>.container>.sec__head .sec__ja,
#technology>.container>.sec__head .sec__en,
#technology .tech-lead,
#technology .tech-foot p{color:var(--white)}
#technology>.container>.sec__head .sec__ja::before,
#technology>.container>.sec__head .sec__en::before{background:var(--white)}

/* 赤い面の上のボタンは、白い地に赤い文字。丸の中の矢印は白のまま残す */
#technology .tech-foot .more--dot,
#technology .tech-foot .more--dot:hover{
  background-color:var(--white);
  border-color:var(--white);
}
#technology .tech-foot .more--dot{color:var(--red)}
#technology .tech-foot .more--dot:hover{color:var(--red-deep)}
#technology .tech-foot .more--dot::after,
#technology .tech-foot .more--dot:hover::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h21M16.6 1.4L22 6l-5.4 4.6' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:22px auto;
  transform:none;
}
#technology .tech-foot .more--dot::after{background-color:var(--red)}
#technology .tech-foot .more--dot:hover::after{background-color:var(--red-deep)}

/* ごあいさつ＝白い地で、見出しはほかと同じ形のまま、まん中にそろえる */
.sec--msg{
  background:var(--bg);
  padding-top:clamp(96px,10vw,160px);
  padding-bottom:clamp(96px,10vw,160px);
}
.msg{display:block;text-align:center}
.msg__panel{
  margin-right:0;
  padding-block:0;
  background:none;
  color:var(--ink);
}
.msg__inner{
  max-width:980px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.msg .sec__head{
  align-items:center;
  text-align:center;
  max-width:none;
  margin-bottom:0;
}
.msg .sec__head::before{content:none}
.msg .sec__head .sec__ja{color:var(--ink)}
.msg .sec__head .sec__ja::before{background:var(--red)}
.msg .sec__head .sec__en{color:var(--ink)}

/* 見出しの下に余白をとって、すこし太く大きい文章 */
.msg__lead,
.msg__lead.is-dummy{
  max-width:none;
  margin-top:clamp(48px,5.5vw,80px);
  font-size:clamp(21px,2.5vw,32px);
  font-weight:700;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--ink);
}

/* その下にまた余白をとって、ふつうの文章 */
.msg__body,
.msg__body.is-dummy{
  max-width:840px;
  margin-inline:auto;
  margin-top:clamp(32px,3.6vw,52px);
  line-height:2.15;
  letter-spacing:.03em;
  text-align:center;
  color:var(--ink-soft);
}

/* 軽い見出しの、赤で強めるところ */
.msg__lead-em,
.is-dummy .msg__lead-em{color:var(--red)}

/* 設備紹介＝写真の下に文章、その右にボタン */
#equipment .equip-note{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:clamp(32px,5vw,80px);
  margin-top:clamp(48px,5.5vw,84px);
}
#equipment .equip-note__text{
  margin:0;
  line-height:2.2;
  letter-spacing:.03em;
}
#equipment .equip-note .equip-foot{
  margin-top:0;
  text-align:right;
}
@media (max-width:900px){
  #equipment .equip-note{grid-template-columns:1fr;row-gap:var(--gap-m)}
  #equipment .equip-note .equip-foot{text-align:left}
}

/* お知らせ＝写真と文章で、ひとつの札に見えるようにする */
.news-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:color .25s,transform .3s,box-shadow .3s;
}
.news-card__ph{
  border-radius:0;
  aspect-ratio:16/10;
}
.news-card h3{
  margin-top:0;
  padding:22px 24px 28px;
}
.news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}

/* お知らせ＝見出しの下に短い赤い線でひと区切り */
#news>.container>.sec__head{margin-bottom:var(--gap-m)}
#news>.container>.sec__head::after{
  content:"";
  display:block;
  order:2;
  width:100%;
  height:2px;
  margin-top:22px;
  background:var(--red);
}

/* 白い札＝日付をタイトルの上に置く */
.news-card__date{
  margin:0;
  padding:22px 24px 0;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--ink);
}
.news-card h3{
  margin-top:0;
  padding:8px 24px 28px;
}

/* お知らせ一覧のボタンの上に余白 */
#news>.container>.news-foot{margin-top:clamp(56px,6vw,96px)}

/* 下のページの見出しの帯＝写真をもっと暗くする（九枚共通） */
.page-hero{
  background-image:
    linear-gradient(100deg,rgba(10,13,19,.9) 0%,rgba(10,13,19,.8) 45%,rgba(10,13,19,.68) 100%),
    url("../images/仮/仮_FV_加工機.jpg");
}

/* 設備紹介＝帯から下はグレー。分類ごとに白い角丸の面へ入れる */
.page-body{
  background:var(--bg-soft);
  padding-bottom:clamp(72px,7vw,120px);
}
.page-body>.sec{padding-bottom:0}
.page-body .equip-cat{
  padding:clamp(28px,3.4vw,56px);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.page-body .equip-cat+.equip-cat{margin-top:clamp(28px,3vw,48px)}

/* ふわりと出す動きを、分類の面はゆっくり、中の札は軽やかに */
.equip-cat.js-rise{transform:translateY(34px);transition-duration:1s}

/* 会社案内＝経営理念と沿革を赤い面にする */
.sec--red{
  background:var(--red);
  color:var(--white);
}
.sec--red .sec__head .sec__ja,
.sec--red .sec__head .sec__en,
.sec--red h3,
.sec--red h4,
.sec--red p,
.sec--red .is-dummy{color:var(--white)}
.sec--red .sec__head .sec__ja::before,
.sec--red .sec__head .sec__en::before,
.sec--red .sec__head::after{background:var(--white)}
.sec--red .philo,
.sec--red .philo__row,
.sec--red .hist,
.sec--red .hist__row{border-color:rgba(255,255,255,.32)}

/* 経営理念＝三つの言葉の上の文章を、すこし太く大きく */
.sec--red .philo__lead,
.sec--red .philo__lead.is-dummy{
  font-size:clamp(18px,2vw,24px);
  font-weight:700;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--white);
}

/* グループ＝白い面のなかにグレーの面、そのなかに白い札 */
.org{
  padding:clamp(28px,3.4vw,56px);
  border-color:transparent;
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.org__box{
  padding:clamp(28px,3.4vw,56px);
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
  text-align:center;
}
.org__core{
  position:static;
  transform:none;
  display:block;
  width:auto !important;
  aspect-ratio:auto;
  margin:0;
  padding:0;
  border-radius:0;
  background:none;
  color:var(--ink);
  text-align:center;
}
.org__core-en{
  margin:0;
  font-size:13px;
  font-weight:400;
  letter-spacing:var(--track-wide);
  color:var(--sub);
}
.org__core h2{
  margin-top:8px;
  color:var(--ink);
  white-space:normal;
  font-size:clamp(22px,2.6vw,32px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.04em;
}
.org__chart{margin-top:clamp(24px,3vw,40px)}
.org__grid{
  position:static;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap-m);
  margin-top:clamp(28px,3.2vw,48px);
  padding:0;
  border:0;
  grid-template-columns:none;
  grid-template-areas:none;
}
.org__grid::before{display:none}
.org__grid>*{
  width:calc((100% - var(--gap-m) * 2) / 3);
  max-width:none !important;
  grid-area:auto !important;
  text-align:left;
}
.org__node{
  background:var(--white);
  border-color:transparent;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s;
}
.org__node:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.10)}
@media (max-width:900px){
  .org__grid>*{width:100%}
}

/* 赤い面でも、白い札の中の文字は黒のまま */
.sec--red .philo__row h3,
.sec--red .philo__row p,
.sec--red .philo__row .is-dummy{color:var(--ink)}
.sec--red .philo__row{border-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.sec--red .hist,
.sec--red .hist__row,
.sec--red .hist__date,
.sec--red .hist__body,
.sec--red .hist .is-dummy{color:var(--ink)}

/* 赤い面のなかの白い面＝グループのところは黒い文字にもどす */
.sec--red .org h2,
.sec--red .org h3,
.sec--red .org p,
.sec--red .org .is-dummy{color:var(--ink)}
.sec--red .org .org__label{color:var(--ink-soft)}
.sec--red .org .org__core-en{color:var(--sub)}
.sec--red .org .org__note{color:var(--ink-soft)}

/* 組織図の絵は白い面のなかに置き、その下にグレーの面 */
.org__chart{margin-top:var(--gap-m)}
.org>.org__box{margin-top:clamp(28px,3.2vw,48px)}

/* お知らせ一覧＝表紙の札と同じ見た目で並べる */
.news-grid--all{gap:clamp(24px,2.6vw,40px)}
.pager{
  margin-top:clamp(56px,6vw,96px);
  text-align:center;
  font-size:clamp(18px,2vw,24px);
  font-weight:600;
  letter-spacing:.24em;
  color:var(--ink);
}

/* ページ送り＝押せる形にする */
.pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:clamp(56px,6vw,96px);
  letter-spacing:0;
}
.pager__item{
  display:grid;
  place-items:center;
  min-width:48px;
  height:48px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font-size:16px;
  font-weight:600;
  line-height:1;
  color:var(--ink);
  transition:background-color .25s,border-color .25s,color .25s,transform .25s;
}
.pager__item:hover{
  border-color:var(--red);
  color:var(--red);
  transform:translateY(-2px);
}
.pager__item.is-current{
  background:var(--red);
  border-color:var(--red);
  color:var(--white);
}
.pager__gap{
  padding:0 4px;
  font-size:16px;
  letter-spacing:.1em;
  color:var(--sub);
}

/* お知らせの中身＝白い面に、題・写真・本文をおさめる */
.post{
  padding:clamp(28px,3.6vw,64px);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.post__title{
  margin:0;
  padding-bottom:clamp(18px,2vw,28px);
  border-bottom:1px solid var(--line);
  font-size:clamp(20px,2.4vw,30px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.04em;
}
.post__ph{
  margin-top:clamp(28px,3.2vw,48px);
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.post__ph img{width:100%;height:100%;object-fit:cover}
.post__body{margin-top:clamp(28px,3.2vw,48px)}
.post__body p{
  margin-top:0;
  line-height:2.2;
  letter-spacing:.03em;
}
.post__body p+p{margin-top:1.6em}
.post__back{
  margin-top:clamp(48px,5vw,80px);
  text-align:center;
}
.post__date{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--ink);
}


/* ============================================================
   ここから下が弊社（マスターテック）の調整。2026-08-29 追加。
   奥様の納品分は上、弊社の後工程は下、と分けて積む。
   ============================================================ */

/* ---- 相関図 ----------------------------------------------------------
   ALPHA LASER／JACKSTELLA と同一ファイル（galaxy-group-chart.webp・余白トリム済み）に
   差し替えたので、8/29 に一時的に入れていた 56.5625% の補正は不要になった。 */
.org__chart{max-width:760px;margin-inline:auto}
.org__chart img{width:100%;height:auto;display:block;margin-inline:auto}

/* ---- ご挨拶＝JACKSTELLA と同じ「写真が上・本文が下」 ------------------- */
.greet{display:block;max-width:860px;margin-inline:auto}
/* 2026-09-08：高解像度の代表写真（1600×1067）を受領したので 468px → 760px。
   ALPHA LASER の .greeting__figure と同じ幅。角丸は本サイトの --radius-lg（18px）のまま。 */
.greet__media{max-width:760px;margin:0 auto clamp(28px,3.2vw,44px);text-align:center}
/* 2026-09-08：角丸を ALPHA LASER と同じ 12px に（前田社長指示「全部ALと合わせて」）。
   本サイトの --radius-lg は18pxだが、3サイトで写真の形をそろえる判断を優先する。 */
.greet__photo{margin:0;overflow:hidden;border-radius:12px}
.greet__photo img{display:block;width:100%;height:auto}
/* 2026-09-08：署名を ALPHA LASER と同じ2行組みへ。値は alphalaser-jp の .greeting__cap 系を写している。 */
.greet__sign{margin-top:14px !important;text-align:center;line-height:1.7;font-weight:400}
.greet__sign-role{display:block;font-size:12px;letter-spacing:.08em;color:var(--sub)}
.greet__sign-name{display:block;font-size:clamp(15px,1.6vw,17px);font-weight:500;color:var(--ink)}
.greet__body p{margin-top:0}
.greet__body p + p{margin-top:1.5em}

/* ---- Google MAP（キー不要の output=embed・GCP課金なし） ---------------- */
.overview__map{margin-top:clamp(32px,4vw,56px)}
.overview__map h3{
  margin:0 0 var(--gap-s);
  font-size:14px;
  color:var(--sub);
  letter-spacing:var(--track-mid);
}
.overview__map iframe{
  display:block;
  width:100%;
  height:clamp(280px,32vw,420px);
  border:0;
  border-radius:var(--radius-lg);
}

/* ---- 5社の役割カード（ALPHA LASER 由来・3サイトで同じ形） --------------
   帯の色は GALAXY のグループ識別色。AL・JS と同じ値をそのまま使う。
   自社（サンテック）だけ --self で地色と枠を変えてハイライトする。 */
.orgchart{
  max-width:1180px;
  margin:clamp(28px,3.2vw,48px) auto 0;
  --galaxy-hd:#886e02;
  --band-aichi:#1565c0;
  --band-jackstella:#0d7a5f;
  --band-alj:#7b2d8b;
  --band-ale:#c0392b;
  --band-suntec:#e67e22;
}
.orgchart__parent{
  max-width:420px;
  margin:0 auto;
  padding:16px 20px;
  background:var(--galaxy-hd);
  color:var(--white);
  text-align:center;
  border-radius:4px;
}
.orgchart__parent-name{
  margin:0;
  color:var(--white);
  font-size:clamp(15px,1.6vw,18px);
  font-weight:600;
  letter-spacing:.06em;
}
.orgchart__parent-note{
  margin:6px 0 0;
  color:rgba(255,255,255,.86);
  font-size:clamp(11px,1.15vw,12.5px);
}
.orgchart__stem{display:block;width:1px;height:26px;margin:0 auto;background:var(--sub)}
.orgchart__children{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,16px);
  margin:0;
  padding:0;
  list-style:none;
}
.orgchart__card{
  padding:18px 14px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-top:6px solid var(--band,var(--ink));
  text-align:center;
}
.orgchart__card--aichi     {--band:var(--band-aichi)}
.orgchart__card--jackstella{--band:var(--band-jackstella)}
.orgchart__card--alj       {--band:var(--band-alj)}
.orgchart__card--ale       {--band:var(--band-ale)}
.orgchart__card--suntec    {--band:var(--band-suntec)}
.orgchart__card--self{background:#fdf6f0;border-color:var(--band-suntec)}
.orgchart__name{
  margin:0 0 10px;
  color:var(--ink);
  font-size:clamp(12.5px,1.35vw,15px);
  font-weight:600;
  line-height:1.5;
}
.orgchart__tag{
  display:inline-block;
  margin:0 0 12px;
  padding:4px 12px;
  background:var(--bg-soft);
  border-radius:999px;
  color:var(--sub);
  font-size:clamp(10.5px,1.1vw,12px);
}
.orgchart__desc{
  margin:0;
  text-align:left;
  color:var(--sub);
  font-size:clamp(11.5px,1.15vw,13px);
  line-height:1.85;
}
@media (max-width:900px){
  .orgchart__children{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .orgchart__children{grid-template-columns:1fr}
}

/* ---- パートナー企業・主要取引先＝赤い面に白い角丸ブロック --------------- */
.sec--red .partner,
.sec--red .clients{
  background:var(--white);
  border:0;
  border-radius:var(--radius-lg);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.sec--red .partner h3,
.sec--red .partner p,
.sec--red .partner .is-dummy,
.sec--red .clients,
.sec--red .clients li{color:var(--ink)}
.sec--red .partner .partner__lead,
.sec--red .partner .partner__val{color:var(--ink-soft)}
.sec--red .partner .partner__table,
.sec--red .partner .partner__row{border-color:var(--line)}

/* ロゴ枠と写真枠＝ワイヤーのプレースホルダを実素材に置き換えた分の調整 */
.partner__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--white);
  color:inherit;
}
.partner__logo img{display:block;width:100%;max-width:180px;height:auto;object-fit:contain}
/* 写真枠＝ワイヤーは 16:9 の空枠だが、入れた写真は 566×390（約 1.45:1）で縦が長い。
   16:9 のまま object-fit:cover にすると上下が切られて顔が見切れる。
   枠の高さを写真に合わせて、切らずに全部見せる。
   🔴 比率を数値で決め打ちしていないので、写真を差し替えても切れない。 */
.partner__ph{
  margin:0;
  aspect-ratio:auto;
  height:auto;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.partner__ph img{display:block;width:100%;height:auto;object-fit:fill}

/* 主要取引先＝1行のべた書きから、折り返す一覧へ */
.clients{
  max-width:900px;
  margin-inline:auto;
  padding:clamp(28px,3.4vw,56px);
}
.clients__list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 28px;
  margin:0;
  padding:0;
  list-style:none;
}
.clients__list li{font-size:15px;letter-spacing:.04em;line-height:1.9}


/* ---- 追従ボタン＝ALPHA LASER／JACKSTELLA と同じ形（赤い枠だけ残す） ------
   AL・JS は画面の右下・60px角・角丸14px・白地・線画アイコン。
   本サイトはそこに赤い2pxの枠を足した形にする（前田社長指示 2026-08-29）。
   押したときに丸くなる動きも3サイトで同じ。 */
.site-float{
  right:clamp(14px,1.6vw,26px);
  bottom:clamp(20px,2.4vw,36px);
  top:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index:90;
}
.site-float a{
  width:60px;
  height:60px;
  padding:0;
  display:grid;
  place-items:center;
  background:var(--white);
  border:2px solid var(--red);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  color:var(--red);
  transition:all .35s cubic-bezier(.22,.61,.36,1);
}
.site-float a svg{width:28px;height:28px}
.site-float a:hover{
  background:var(--white);
  border-color:var(--red-deep);
  color:var(--red-deep);
  border-radius:50%;
  transform:translateY(-2px);
}
/* 🔴 指をのせると左に吹き出しで文字が出る（ALPHA LASER／JACKSTELLA と同じ）。
   2026-08-29 まで本サイトだけ読み上げ用に隠すだけで、吹き出しが入っていなかった。
   しっぽ＝枠線用の三角(::before)の上に、背景色の三角(::after)を1.5pxずらして重ねる。
   AL＝`alphalaser-jp` の `.floating-contact__label` 1653行／JS＝`jackstella-jp` 2993行と同じ作り。 */
.site-float a{position:relative}
.site-float__label{
  position:absolute;
  top:50%;
  right:calc(100% + 12px);
  padding:10px 15px;
  border-radius:10px;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) translateX(6px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.site-float__label::before,
.site-float__label::after{
  content:"";
  position:absolute;
  top:50%;
  left:100%;
  width:0;
  height:0;
  border:7px solid transparent;
  border-left-color:var(--line);
  transform:translateY(-50%);
}
.site-float__label::after{
  border-left-color:var(--white);
  margin-left:-1.5px;
}
.site-float a:hover .site-float__label,
.site-float a:focus-visible .site-float__label{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
/* SPはホバーの概念がないので出さない（AL・JS と同じ 768px で切る） */
@media (max-width:768px){
  .site-float__label{display:none}
}

@media (max-width:900px){
  .site-float{
    left:auto;
    right:12px;
    bottom:16px;
    top:auto;
    width:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .site-float a{
    width:54px;
    height:54px;
    border:2px solid var(--red);
    border-radius:14px;
    box-shadow:0 6px 20px rgba(0,0,0,.14);
  }
  .site-float a svg{width:25px;height:25px}
}


/* ============================================================
   2026-08-29 組織図ツリーの共通調整（前田社長指示・AL／JS／サンテックの3サイト共通）
   ・親から下りる線を1本→5本にし、自社へ伸びる線だけ黒くする（他4本はグレー）
   ・グレーの角丸タグの高さを5枚で揃える
   ============================================================ */
.orgchart__stems{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,16px);
  height:26px;
  margin:0;
  padding:0;
  list-style:none;
}
.orgchart__stems .orgchart__stem{
  display:block;
  width:1px;
  height:100%;
  margin:0 auto;
  background:#c7cbd1;          /* 他社へ伸びる線＝グレー */
}
.orgchart__stems .orgchart__stem--self{
  width:2px;
  background:#191e2e;          /* 自社へ伸びる線＝黒 */
}
/* 角丸タグ＝2行ぶんの高さで固定し、5枚で高さを揃える */
.orgchart__tag{
  display:flex;                 /* inline-flex だと中身が1行か2行かでベースラインがずれ、
                                   2行のカードだけ4px下がる。ブロックにして高さを揃える */
  width:fit-content;
  margin-inline:auto;
  align-items:center;
  justify-content:center;
  min-height:calc(2 * 1.5em + 8px);
  line-height:1.5;
  text-align:center;
  box-sizing:border-box;
}
@media (max-width:900px){
  .orgchart__stems{grid-template-columns:repeat(2,1fr)}
  .orgchart__stems .orgchart__stem:nth-child(n+3){display:none}
}
@media (max-width:560px){
  .orgchart__stems{grid-template-columns:1fr}
  .orgchart__stems .orgchart__stem:nth-child(n+2){display:none}
}


/* ============================================================
   2026-08-29 組織図ツリーの追い込み（前田社長指示・3サイト共通）
   ・親から横に渡す線を1本足して、5本の枝と繋げる
   ・社名の枠を3行ぶんで固定し、5枚のタグの縦位置を揃える
     （いちばん長い「ALPHA LASER／ENGINEERING／株式会社」に合わせる）
   ・カード上辺から社名までの余白を狭くする
   ============================================================ */

/* 横に渡す線＋親から下りる幹。5列・間隔 --g のグリッドなので、
   1列目と5列目の中心＝(100% - 4*--g)/10 の位置。そこを両端にして横線を引く。 */
.orgchart__stems{
  --g:clamp(10px,1.2vw,16px);
  position:relative;
  height:46px;
  padding-top:18px;
  box-sizing:border-box;
  gap:var(--g);
}
.orgchart__stems::after{            /* 親から下りる幹 */
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:1px;
  height:18px;
  background:#c7cbd1;
  transform:translateX(-50%);
}
.orgchart__stems::before{           /* 横に渡す線 */
  content:"";
  position:absolute;
  top:18px;
  left:calc((100% - 4 * var(--g)) / 10);
  right:calc((100% - 4 * var(--g)) / 10);
  height:1px;
  background:#c7cbd1;
}
.orgchart__stems .orgchart__stem{height:100%}

/* 社名＝3行ぶんの高さで固定して、下のタグの位置を5枚で揃える
   🔴 セレクタを2階層にしてあるのは、サンテック側に `.sec h3`（詳細度が上・font-size:18px /
      margin-top:32px）があり、1階層だと負けて3サイトで値がずれるため。 */
.orgchart .orgchart__name{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
  min-height:calc(1.5em * 3);
  font-size:clamp(12.5px,1.35vw,15px);
  font-weight:600;
  line-height:1.5;
}
.orgchart .orgchart__tag{margin:0 0 12px}
.orgchart .orgchart__desc{margin:0}

/* カードの上辺から社名までの余白を狭く */
.orgchart .orgchart__card{padding-top:8px}

@media (max-width:900px){
  .orgchart__stems::before{
    left:calc((100% - 1 * var(--g)) / 4);
    right:calc((100% - 1 * var(--g)) / 4);
  }
}
@media (max-width:560px){
  .orgchart__stems::before{display:none}
}


/* ============================================================
   2026-08-29 親から自社ブロックまでの経路を黒くする（前田社長指示・3サイト共通）
   GALAXYホールディングス株式会社 → 横線 → 自社のブロック まで一続きの黒い線にする。
   他社へ向かう区間はグレーのまま。

   5列グリッドなので、列幅 --colw = (100% - 4×間隔)/5、
   i列目の中心は左から (i-1)×(--colw + --g) + --colw/2。
   幹は中央（50%）から下りるので、黒い横線は 50% と 自社列の中心 の間を結ぶ。
   ============================================================ */
.orgchart__stems{--colw:calc((100% - 4 * var(--g)) / 5)}
/* 幹は幅2px（中心±1px）。経路を中心ちょうどで止めると幹の半分がグレーのまま残るので、1px 重ねる。 */

/* 幹＝親から横線まで。経路の一部なので黒 */
.orgchart__stems::after{background:#191e2e;width:2px}

/* 横線のうち、親から自社へ向かう区間だけを黒で上書きする */
.orgchart__path{
  position:absolute;
  /* 17.5px のような半端な位置だと端がアンチエイリアスでグレーに混ざり、
     交点で線が途切れて見える（DPR3で実測）。整数の 18px に揃え、
     グレーの横線（18〜19px）を確実に覆う。 */
  top:18px;
  height:2px;
  margin:0;
  background:#191e2e;
  list-style:none;
}
.orgchart__stems--self1 .orgchart__path{left:calc(var(--colw) / 2);right:calc(50% - 1px)}
.orgchart__stems--self2 .orgchart__path{left:calc(var(--colw) * 1.5 + var(--g));right:calc(50% - 1px)}
/* 🔴 自社がまん中の列のとき（＝ALPHA LASER）だけ、作りを変えている。
   幹（上）＋枝（下）の2本を継ぎ足す作りだと、grid の列幅が小数になる関係で
   両者の中心が 0.016px ずれる。座標としては一致していても、拡大率によっては
   継ぎ目で1画素ぶんの段差として見えてしまう（前田社長のご指摘・2026-08-29）。
   → **継ぎ目を無くし、中央に1本の縦線を通しで引く**。
      横線・枝は使わないので消す。これならどの拡大率でもずれない。 */
.orgchart__stems--self3::after{top:0;height:100%}
.orgchart__stems--self3 .orgchart__path{display:none}
.orgchart__stems--self3 .orgchart__stem--self{visibility:hidden}
.orgchart__stems--self4 .orgchart__path{left:calc(50% - 1px);right:calc(var(--colw) * 1.5 + var(--g))}
.orgchart__stems--self5 .orgchart__path{left:calc(50% - 1px);right:calc(var(--colw) / 2)}

@media (max-width:900px){
  /* 2列・1列に折り返すと5列前提の座標が合わなくなるので、黒い経路は出さない
     （自社は地色と枠の色で分かる） */
  .orgchart__path{display:none}
  .orgchart__stems::after{background:#c7cbd1;width:1px}
}

/* ---- お問い合わせ 入力（ワイヤー P4） --------------------------------
   型＝見出し → 案内文 → 白い面の中に六つの入力 → 個人情報保護方針の枠 →
   同意のチェック → 送信するボタン。
   下層のグレー地（.page-body）の上に白い面を置く作りは、お知らせ詳細の .post と同じ考え方。
   🔴 .sec p（詳細度 0,1,1）が効いているので、面の中の字は .form__panel .〜 の2階層で当てる。 */
.form__lead{
  max-width:900px;
  line-height:2.1;
  letter-spacing:.03em;
}
.form__panel{
  max-width:900px;
  margin:clamp(32px,4vw,56px) auto 0;
  padding:clamp(28px,3.6vw,64px);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.form__panel .form__row + .form__row{margin-top:clamp(20px,2.4vw,32px)}
.form__panel .form__label{
  display:block;
  margin:0 0 10px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ink);
}
.form__req{margin-left:.15em;color:var(--red)}
.form__input,
.form__textarea{
  display:block;
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  font-family:inherit;
  font-size:16px;
  line-height:1.8;
  color:var(--ink);
  transition:border-color .25s,box-shadow .25s;
}
.form__input{min-height:58px}
.form__textarea{min-height:190px;resize:vertical}
.form__input:focus,
.form__textarea:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(var(--red-rgb),.14);
}

/* 個人情報保護方針＝縦にスクロールする枠。本番文言が来たらこの中へ流し込む */
.form__policy{
  max-height:220px;
  margin-top:clamp(32px,4vw,56px);
  padding:clamp(22px,2.6vw,36px);
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--bg-soft);
}
.form__panel .form__policy-title{
  margin:0;
  text-align:center;
  font-size:clamp(16px,1.8vw,20px);
  font-weight:500;
  letter-spacing:.08em;
}
.form__agree{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:clamp(24px,2.6vw,36px);
  font-size:15px;
  letter-spacing:.04em;
  cursor:pointer;
}
.form__agree input{
  flex:none;
  width:22px;
  height:22px;
  accent-color:var(--red);
  cursor:pointer;
}
.form__panel .form__submit{
  margin-top:clamp(28px,3vw,44px);
  text-align:center;
}
.form__submit .more{
  margin-top:0;
  font-family:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}

/* ---- お問い合わせ 送信できました（ワイヤー P5） ------------------------ */
.thanks{
  max-width:900px;
  margin-inline:auto;
  padding:clamp(32px,4.4vw,72px) clamp(24px,3.6vw,64px);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  text-align:center;
}
.thanks .thanks__title{
  margin:0;
  font-size:clamp(22px,2.8vw,34px);
  font-weight:700;
  line-height:1.6;
  letter-spacing:.04em;
}
.thanks .thanks__body{
  margin-top:clamp(28px,3.2vw,48px);
  line-height:2.2;
  letter-spacing:.03em;
}
.thanks .thanks__body + .thanks__body{margin-top:1.8em}
.thanks .thanks__back{margin-top:clamp(40px,4.6vw,72px)}

/* ---- 技術紹介 一覧（ワイヤー P8） -------------------------------------
   型＝見出し → 絞り込みの札の面 → 九枚の札（三列）。
   絞り込みは大分類（六つ）と小分類の二段。ワイヤーどおり、小分類が下がるのは
   アルミ鋳造と金型のふたつだけ。
   🔴 .sec h3 / .sec p が効いているので、面の中の字は2階層で当てる。 */
.tech-filter{
  padding:clamp(24px,2.8vw,40px);
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.tech-filter__all{
  display:flex;
  min-height:44px;
  margin-inline:auto;
  padding-inline:28px;
  font-size:15px;
  font-weight:600;
}
.tech-filter__cols{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(20px,2.4vw,40px);
  margin-top:clamp(20px,2.4vw,32px);
  padding-top:clamp(20px,2.4vw,32px);
  border-top:1px solid var(--line);
}
.tech-filter__col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.tech-filter .tag{
  font-family:inherit;
  cursor:pointer;
  transition:border-color .25s,color .25s,background .25s;
}
.tech-filter .tag:hover{border-color:var(--red);color:var(--red)}
.tech-filter .tag.is-on{
  border-color:var(--red);
  background:var(--red);
  color:var(--white);
}
.tech-filter__subs{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding-left:2px;
}
.tech-filter__sub{
  padding:2px 0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .25s;
}
.tech-filter__sub:hover{color:var(--red)}
.tech-filter__sub.is-on{color:var(--red);font-weight:700}

.sec .tech-list__count{
  margin-top:clamp(28px,3vw,44px);
  font-size:14px;
  letter-spacing:.08em;
  color:var(--ink-soft);
}
.tech-list__num{
  margin-right:.2em;
  font-size:20px;
  font-weight:700;
  color:var(--ink);
}

.tech-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,2.6vw,40px);
  margin-top:var(--gap-s);
}
@media (max-width:900px){
  .tech-list{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tech-list{grid-template-columns:1fr}
}
.tech-item{
  display:block;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--white);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:color .25s,transform .3s,box-shadow .3s;
}
.tech-item[hidden]{display:none}
.tech-item__ph{
  position:relative;
  display:block;
  aspect-ratio:16/12;
  overflow:hidden;
  background:var(--bg-soft);
}
.tech-item__ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s;
}
/* 左上に大分類、右下に小分類。ワイヤーどおり白地の小さな札 */
.tech-item__cat,
.tech-item__sub{
  position:absolute;
  padding:6px 14px;
  background:var(--white);
  font-size:13px;
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--ink);
}
.tech-item__cat{top:0;left:0}
.tech-item__sub{right:0;bottom:0;color:var(--ink-soft)}
.tech-list .tech-item h3{
  margin-top:0;
  padding:22px 24px 28px;
  font-size:17px;
  font-weight:500;
  letter-spacing:.04em;
}
.tech-item:hover{
  color:var(--red);
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.10);
}
.tech-item:hover .tech-item__ph img{transform:scale(1.06)}

/* ---- 技術紹介 詳細（ワイヤー P9） -------------------------------------
   型＝タイトル（下に罫）→ 写真の切り替え → 技術説明 → 特徴 → 動画 → 一覧へ戻る。
   白い面（.post）はお知らせ詳細と共通のものを使っている。 */
.gallery{margin-top:clamp(28px,3.2vw,48px)}
.gallery__main{
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--bg-soft);
}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1vw,16px);
  margin-top:clamp(8px,1vw,16px);
}
.gallery__thumb{
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:var(--radius);
  background:var(--bg-soft);
  cursor:pointer;
  transition:border-color .25s,opacity .25s;
  opacity:.62;
}
.gallery__thumb img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}
.gallery__thumb:hover{opacity:1}
.gallery__thumb.is-on{border-color:var(--red);opacity:1}
.gallery__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:clamp(16px,1.8vw,24px);
}
.gallery__dots span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--line);
  transition:background .25s;
}
.gallery__dots span.is-on{background:var(--red)}

.tech-detail{margin-top:clamp(36px,4vw,64px)}
.post .tech-detail__head{
  margin-top:clamp(36px,4vw,64px);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-size:clamp(17px,1.9vw,21px);
  font-weight:700;
  letter-spacing:.06em;
}
.tech-detail>.tech-detail__head:first-child{margin-top:0}
.tech-detail__body{margin-top:clamp(20px,2.2vw,32px)}
.post .tech-detail__body p{
  margin-top:0;
  line-height:2.2;
  letter-spacing:.03em;
}
.post .tech-detail__body p + p{margin-top:1.6em}

/* 動画＝URLをいただくまでは枠だけ。縦横比は差し替えても変わらない */
.tech-detail__movie{
  position:relative;
  margin-top:clamp(20px,2.2vw,32px);
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  background:var(--band);
}
.tech-detail__play{
  position:absolute;
  top:50%;
  left:50%;
  width:76px;
  height:76px;
  border:2px solid rgba(255,255,255,.85);
  border-radius:999px;
  transform:translate(-50%,-50%);
}
.tech-detail__play::after{
  content:"";
  position:absolute;
  top:50%;
  left:54%;
  width:0;
  height:0;
  border-left:20px solid rgba(255,255,255,.9);
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  transform:translate(-50%,-50%);
}
.post .tech-detail__movie-note{
  margin-top:clamp(16px,1.8vw,26px);
  text-align:center;
  line-height:2.1;
  letter-spacing:.03em;
}

/* 2026-09-08 三上様ご指示ぶん
   ・お問い合わせ：任意項目の印（必須の「※」と同じ色味でひかえめに）
   ・パートナー企業：MEISEI のサイトへのボタン（JACKSTELLA と同じ扱い） */
.form__opt{
  margin-left:6px;
  font-size:12px;
  color:var(--ink-soft);
}
.partner__more{
  margin-top:var(--gap-m);
  display:flex;
  justify-content:center;
}

/* 2026-09-08：TOPの技術紹介カードが「溶接機の導入」の削除で5枚になった。
   2列グリッドの最終行が左に1枚だけ残るので、右側に寄せる（前田社長指示・5枚表示のまま）。
   560px以下は1列になるので効かせない。 */
@media (min-width:561px){
  #technology .tech-card:last-child{grid-column:2}
}