/* SAKIWAI — 共通スタイル。色・書体はここの変数で一括管理する */
:root{
  /* 指定パレット(この6色だけを使う) */
  --ink:#373b3e;        /* 墨: 文字、暗い面 */
  --gray:#b7b7b7;       /* 灰: 罫線、暗い面の補助文字 */
  --paper:#fffeec;      /* 紙: 背景 */
  --mint:#86cecb;       /* 薄緑: 塗りの面(上の文字は墨) */
  --teal:#137a7f;       /* 青緑: リンク、主ボタン、強調 */
  --pink:#f987c5;       /* 桃: 主な行動の強調、早送り、目印 */
  /* 役割の名前(下のCSSはこちらを使う) */
  --panel:var(--paper);
  --ink-2:var(--ink);
  --line:var(--gray);
  --cut:var(--teal);
  --cut-dark:var(--ink);
  --rapid:var(--pink);
  --night:var(--ink);
  --on-night:var(--paper);
  --gutter:clamp(16px,4vw,36px);
  --max:1160px;
  --font:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.95 var(--font);
  font-feature-settings:"palt";text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--cut);text-underline-offset:.2em}
a:hover{color:var(--cut-dark)}
:focus-visible{outline:3px solid var(--cut);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:20}
.skip:focus{left:0}

/* 見出し */
h1,h2,h3{font-weight:900;line-height:1.35;margin:0;letter-spacing:.01em;word-break:auto-phrase;line-break:strict;text-wrap:balance}
h1{font-size:clamp(2rem,5.4vw,3.9rem);line-height:1.22;letter-spacing:-.005em}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem)}
h3{font-size:1.2rem;font-weight:700}
p{margin:0 0 1em;max-width:40em;word-break:auto-phrase;line-break:strict;text-wrap:pretty}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-2);max-width:36em}

/* ヘッダー */
.site-header{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{font-weight:900;font-size:1.25rem;letter-spacing:.16em;color:var(--ink);text-decoration:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.6rem}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--cut)}
.nav .lang{color:var(--ink-2)}
.menu-btn{display:none;font:inherit;font-weight:700;background:none;border:1px solid var(--ink);color:var(--ink);padding:.35rem .9rem;border-radius:2px;cursor:pointer}

/* ボタン */
.btn{display:inline-block;font:700 1rem/1.4 var(--font);padding:.95rem 1.7rem;border:2px solid var(--ink);color:var(--ink);
  text-decoration:none;border-radius:2px;background:transparent;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-primary{background:var(--cut);border-color:var(--cut);color:var(--paper)}
.btn-primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem 1rem;margin:2rem 0 1rem}

/* ヒーロー */
.hero{padding:clamp(2.4rem,6vw,5rem) 0 clamp(2rem,5vw,4rem)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(1rem,4vw,3rem);align-items:center}
.hero-art{margin-right:calc(var(--gutter)*-.5)}
.hero-art img{width:100%;height:auto}
.note{font-size:.9rem;color:var(--ink-2);margin:0}

/* セクション共通 */
.section{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--line)}
.section-head{max-width:44rem;margin-bottom:clamp(1.6rem,4vw,2.8rem)}
.section-head p{color:var(--ink-2);margin-top:1rem}

/* 流れ(CAD→CAM→デジタルツイン) */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.2rem,3vw,2.6rem)}
.flow li{position:relative;padding-top:1.7rem;border-top:2px solid var(--ink)}
.flow li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--cut);border-radius:50%}
.flow h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:.6rem}
.flow p{color:var(--ink-2);margin:0}

/* 仕様表(対応範囲) */
.spec{margin:0;border-top:2px solid var(--ink)}
.spec div{display:grid;grid-template-columns:minmax(8rem,14rem) minmax(0,1fr);gap:1rem 2rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.spec dt{font-weight:700}
.spec dd{margin:0;color:var(--ink-2)}

/* 動画(暗い帯) */
.band{background:var(--night);color:var(--on-night);border-top:0}
.band h2{color:var(--paper)}
.band .section-head p{color:var(--gray)}
.band a{color:var(--mint)}
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem clamp(1rem,2.4vw,2rem);margin:0;padding:0;list-style:none}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--ink);border:0;padding:0;cursor:pointer;overflow:hidden;border-radius:2px}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .2s}
.yt:hover img{opacity:1}
.yt::after{content:"";position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23373b3e' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/60% no-repeat}
.yt-player{position:relative;width:100%;aspect-ratio:16/9;background:var(--ink);border-radius:2px;overflow:hidden}
.yt-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.videos figcaption{margin-top:.8rem;font-weight:700;line-height:1.6}
.videos figure{margin:0}
.videos small{display:block;font-weight:400;color:var(--gray);margin-top:.15rem}

/* 入口(3つの行) */
.routes{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.routes a{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr) auto;gap:.6rem 2rem;align-items:baseline;padding:1.5rem .2rem;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background-color .15s,padding .15s}
.routes a:hover{background:var(--mint);padding-inline:1rem}
.routes strong{font-size:1.25rem;font-weight:900;line-height:1.5}
.routes span{color:var(--ink-2)}
.routes .go{color:var(--cut);font-weight:700;white-space:nowrap}

/* 導入の流れ(順序あり) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem clamp(1rem,2.4vw,2rem);counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:1rem}
.steps li::before{content:counter(s);display:block;font-weight:900;font-size:2rem;line-height:1;color:var(--cut);margin-bottom:.7rem}
.steps h3{font-size:1.1rem;margin-bottom:.4rem}
.steps p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.8}

/* 料金・販売形態 / 資料 / 会社 */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,5vw,4rem)}
.panel{background:var(--mint);padding:clamp(1.3rem,3vw,2.2rem);border-radius:2px}
.panel h3{margin-bottom:.7rem}
.panel p:last-child{margin-bottom:0}
.links{list-style:none;margin:0;padding:0}
.links li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.links li:first-child{border-top:1px solid var(--line)}
.todo{background:var(--pink);color:var(--ink);padding:0 .3em;border-radius:2px;font-weight:700}

/* 問い合わせ帯・フッター */
.cta{background:var(--cut);color:var(--paper);border-top:0}
.cta h2{color:var(--paper)}
.cta p{color:var(--paper)}
.cta .btn{border-color:var(--paper);color:var(--paper)}
.cta .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta .btn-light{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.cta .btn-light:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.site-footer{padding:2.4rem 0 3rem;font-size:.9rem;background:var(--ink);color:var(--paper)}
.site-footer ul{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem}
.site-footer a{color:var(--mint)}
.site-footer a:hover{color:var(--paper)}
.site-footer p{max-width:none;margin:0 0 .4rem}

/* 製品ページ */
.page-title{padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(1.6rem,4vw,2.6rem)}
.crumb{font-size:.9rem;color:var(--ink-2);margin:0 0 1rem}
.crumb a{color:var(--ink-2)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.6rem,5vw,4rem);align-items:start}

/* 小さい画面 */
@media (max-width:900px){
  .hero .wrap,.two,.cols{grid-template-columns:minmax(0,1fr)}
  .hero-art{margin-right:0;order:2;max-width:560px}
  .videos{grid-template-columns:minmax(0,1fr);max-width:640px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .routes a{grid-template-columns:minmax(0,1fr);gap:.3rem}
}
@media (max-width:720px){
  .flow{grid-template-columns:minmax(0,1fr);gap:2rem}
  .spec div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .js .menu-btn{display:inline-block}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);padding:.6rem var(--gutter) 1.2rem}
  .js .nav.open{display:block}
  .js .nav ul{flex-direction:column;gap:.1rem}
  .js .nav a{display:block;padding:.7rem 0}
  .site-header .wrap{flex-wrap:wrap}
  .nav ul{gap:.1rem 1.1rem}
}
@media (max-width:480px){.steps{grid-template-columns:minmax(0,1fr)}.btn{width:100%;text-align:center}}
/* 微調整 */
.hero h1+.lead{margin-top:1.5rem}

/* 一覧・フォーム・補足 */
.bul{margin:0 0 1em;padding-left:1.3em;max-width:40em}
.bul li{margin:.4em 0;padding-left:.2em}
.bul li::marker{color:var(--cut)}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.dl li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.5rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.dl strong{display:block;font-weight:700}
.dl small{color:var(--ink-2)}
.notice{border-left:4px solid var(--ink);background:var(--mint);padding:1rem 1.2rem;margin:0 0 1.6rem;max-width:40em}
.notice p:last-child{margin-bottom:0}
form.contact{max-width:40rem}
.field{margin:0 0 1.4rem}
.field label{display:block;font-weight:700;margin-bottom:.4rem}
.field .req{color:var(--cut);font-weight:700;margin-left:.4em;font-size:.85em}
.field input,.field textarea{width:100%;font:inherit;padding:.75rem .9rem;border:1px solid var(--ink-2);border-radius:2px;background:var(--panel);color:var(--ink)}
.field textarea{min-height:11rem;resize:vertical}
.field .hint{font-size:.88rem;color:var(--ink-2);margin:.35rem 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mt{margin-top:1.6rem}
@media (max-width:900px){.steps-3{grid-template-columns:minmax(0,1fr)}.dl li{grid-template-columns:minmax(0,1fr)}}

/* 暗い面・青緑の面では、枠の色を変える */
.band :focus-visible,.site-footer :focus-visible{outline-color:var(--mint)}
.cta :focus-visible{outline-color:var(--paper)}
.btn-primary:focus-visible{outline-color:var(--ink)}
/* ミントの面の上では、リンクと強調を墨にする(青緑はコントラストが足りない) */
.panel a,.notice a,.routes a:hover .go{color:var(--ink)}
.panel a:hover,.notice a:hover{color:var(--ink);text-decoration-thickness:2px}