@charset "UTF-8";
/* ============================================================
   5軸CNC加工ページ固有
   ============================================================ */

/* 見出しが2行になるので、ヒーローの級数を一段落とす */
.phero h1{font-size:clamp(27px,4.4vw,56px);letter-spacing:.09em;line-height:1.35}

/* 5軸の模式図 --------------------------------------------- */
.axis-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,72px);
  align-items:center;margin-top:clamp(40px,6vw,68px)}
.axis-fig{border:1px solid var(--line);background:var(--soft);padding:clamp(20px,3vw,36px)}
.axis-fig svg{width:100%;height:auto;display:block}
.axis-path{stroke-dasharray:340;stroke-dashoffset:340;transition:stroke-dashoffset 1.6s var(--ease) .3s}
.rv.on .axis-path{stroke-dashoffset:0}
.spec b{font-size:clamp(26px,3vw,38px);line-height:1.15}

/* 削り出しの実例 ------------------------------------------ */
.samp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,68px)}
.samp-media{height:clamp(300px,34vw,460px)}
.samp-media img{width:100%;height:100%;object-fit:cover}
.samp-name{display:block;font-family:"Shippori Mincho B1",serif;font-size:17px;letter-spacing:.08em;
  margin:18px 0 8px}
.samp-cap{font-size:12.5px;color:var(--sub);line-height:1.95}

/* 何ができるか -------------------------------------------- */
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,48px);margin-top:clamp(40px,6vw,68px)}
.cap-media{height:clamp(220px,24vw,300px)}
.cap-media img{width:100%;height:100%;object-fit:cover}
.cap-en{display:block;margin-top:18px;font-family:"Jost","Zen Kaku Gothic New","Segoe UI Symbol",sans-serif;
  font-size:9.5px;letter-spacing:.26em;color:var(--green)}
.cap h3{font-family:"Shippori Mincho B1",serif;font-weight:400;font-size:19px;letter-spacing:.08em;margin:8px 0 10px}
.cap p{font-size:12.5px;color:var(--sub);line-height:1.95}

/* 全面写真＋一行 ------------------------------------------ */
.plate-cap{font-size:clamp(27px,5vw,72px);line-height:1.4}

/* 工程のあとのボタンだけ、上に間合いを取る */
.sec > .wrap > .btn{margin-top:clamp(38px,5vw,56px)}

/* レスポンシブ -------------------------------------------- */
@media(max-width:980px){
  .axis-grid,.samp-grid,.cap-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .axis-path{stroke-dashoffset:0}
}