@charset "utf-8";
/* =========================================================
   Thyris Electronics LLC — base stylesheet
   ========================================================= */

/* ---- Design tokens ---------------------------------- */
:root{
  --g-900:#052015;
  --g-800:#0a3d21;
  --g-700:#0e5c34;   /* brand green (front-panel green) */
  --g-600:#157944;
  --g-500:#1f9a5c;
  --g-100:#dcebe1;
  --g-050:#eef5f0;

  --ink:#111a14;
  --ink-2:#46514a;
  --ink-3:#6d7a72;
  --line:#e0e6e1;
  --bg:#ffffff;
  --bg-2:#f5f8f6;

  --wrap:1120px;
  --radius:10px;
  --shadow:0 1px 2px rgba(6,32,20,.05), 0 8px 28px rgba(6,32,20,.06);

  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --mono:"Roboto Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}

/* ---- Reset ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.85;letter-spacing:.01em;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
  line-break:strict;overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--g-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.45;letter-spacing:.02em;margin:0;font-weight:700}
p{margin:0 0 1.2em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--g-500);outline-offset:3px;border-radius:4px}

/* ---- Layout helpers --------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.section{padding:84px 0}
.section--tint{background:var(--bg-2);border-block:1px solid var(--line)}
.section--dark{background:var(--g-900);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:10px 16px;border-radius:6px}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--g-600);margin:0 0 12px;font-weight:500;
}
.section--dark .eyebrow{color:var(--g-500)}
.h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:18px}
.h3{font-size:19px;margin-bottom:10px}
.lead{font-size:17px;color:var(--ink-2);max-width:62ch}
.section--dark .lead{color:#c5d6cb}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---- Buttons ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:700;line-height:1.4;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--g-700);color:#fff}
.btn--primary:hover{background:var(--g-600)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--g-600);color:var(--g-600)}
.btn--onDark{background:#fff;color:var(--g-800)}
.btn--onDark:hover{background:var(--g-050)}
.btn--outlineDark{border-color:rgba(255,255,255,.4);color:#fff}
.btn--outlineDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.center .btn-row{justify-content:center}

/* ---- Header ----------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:center;gap:24px;height:68px;position:relative}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand:hover{text-decoration:none}
.brand img{height:26px;width:auto}
.brand__sub{
  font-size:11px;color:var(--ink-3);letter-spacing:.08em;
  border-left:1px solid var(--line);padding-left:10px;
}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  color:var(--ink);font-size:14.5px;font-weight:500;padding:8px 14px;border-radius:6px;
}
.nav a:hover{background:var(--g-050);color:var(--g-700);text-decoration:none}
.nav a[aria-current="page"]{color:var(--g-700);font-weight:700}
.nav .btn{margin-left:8px;padding:9px 18px;font-size:14px}
.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;
  background:#fff;cursor:pointer;padding:0;
}
.nav-toggle span{position:relative;display:block;width:18px;height:1.6px;background:var(--ink);margin-inline:auto}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;display:block;width:18px;height:1.6px;background:var(--ink);
  transition:transform .2s;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---- Hero ------------------------------------------- */
.hero{position:relative;background:var(--g-900);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.45}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,32,21,.95) 0%,rgba(5,32,21,.82) 45%,rgba(5,32,21,.4) 100%);
}
.hero__inner{position:relative;padding:112px 0 104px;max-width:660px}
.hero h1{font-size:clamp(28px,4.6vw,44px);line-height:1.4;margin-bottom:20px}
.hero h1 .accent{color:var(--g-500)}
/* 英文キャッチコピー */
.hero__title-en{
  font-size:clamp(27px,4.8vw,48px);line-height:1.3;letter-spacing:.03em;
  text-wrap:balance;
}
.hero p{color:#c8dacf;font-size:17px;max-width:52ch}
.hero__tag{
  display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  color:var(--g-500);border:1px solid rgba(31,154,92,.45);border-radius:999px;
  padding:5px 14px;margin-bottom:22px;
}

/* ---- Cards / grids ---------------------------------- */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s;
}
.card:hover{box-shadow:var(--shadow);border-color:var(--g-100)}
.card__media{background:var(--g-900);aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{padding:24px;flex:1;display:flex;flex-direction:column}
.card__name{font-size:22px;font-weight:700;letter-spacing:.06em}
.card__role{font-size:13px;color:var(--g-600);font-weight:700;margin:2px 0 10px}
.card__body p{color:var(--ink-2);font-size:15px;flex:1}
.card__link{font-weight:700;font-size:14.5px}
.card__link::after{content:" →"}

/* feature list */
.feature{padding:26px 0}
.feature__num{font-family:var(--mono);font-size:12px;color:var(--g-500);letter-spacing:.16em}
.feature h3{margin:8px 0 8px;font-size:18px}
.feature p{color:var(--ink-2);font-size:15px;margin:0}
.section--dark .feature p{color:#adc3b5}
.section--dark .feature{border-top:1px solid rgba(255,255,255,.12)}

/* ---- Split (image + text) --------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--radius);border:1px solid var(--line)}
/* 並べて見せる測定画像などを同じ比率にそろえる */
.figure--frame img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:var(--radius)}

/* ---- Spec table ------------------------------------- */
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th,.spec td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:34%;font-weight:700;color:var(--ink);background:var(--bg-2);white-space:nowrap}
.spec td{color:var(--ink-2)}
.spec td .num{font-family:var(--mono);color:var(--ink)}
.table-scroll{overflow-x:auto}

/* ---- Stat row --------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:#fff;padding:26px 22px}
.stat__value{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--g-700);line-height:1.3}
.stat__value small{font-size:14px;font-weight:500;color:var(--ink-2)}
.stat__label{font-size:13px;color:var(--ink-3);margin-top:6px}

/* ---- Page header (sub pages) ------------------------ */
.page-head{background:var(--g-900);color:#fff;padding:66px 0 58px}
.page-head h1{font-size:clamp(26px,3.8vw,38px);margin-bottom:10px}
.page-head p{color:#b8ccbf;margin:0;max-width:60ch}
/* 見出しの下に置く英語ラベル */
.page-head__en{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g-500);margin:0;
}
.breadcrumb{font-size:12.5px;color:#8fa89a;margin-bottom:18px;font-family:var(--mono)}
.breadcrumb a{color:#b8ccbf}
.breadcrumb span{margin-inline:8px;opacity:.6}

/* ---- 製品カテゴリのリンク一覧 ------------------------ */
.cat-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.cat-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink);font-weight:700;font-size:16px;
  transition:border-color .2s,box-shadow .2s;
}
.cat-nav a:hover{text-decoration:none;border-color:var(--g-600);box-shadow:var(--shadow)}
.cat-nav span{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;
  color:var(--g-600);background:var(--g-050);border-radius:999px;padding:4px 12px;white-space:nowrap;
}

/* 発売前の製品カード */
.card__media--coming{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--g-900),var(--g-700));
}
.card__media--coming span{
  font-family:var(--mono);font-size:13px;letter-spacing:.22em;color:rgba(255,255,255,.75);
}

/* ---- フォーム（製品レンタル申込） -------------------- */
.form-page{max-width:760px}
.form{margin-top:36px}
.field{margin-bottom:26px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.field__hint{font-size:13.5px;color:var(--ink-3);margin:0 0 8px;line-height:1.7}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],
.field select,.field textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:120px;line-height:1.8;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--g-600);box-shadow:0 0 0 3px rgba(31,154,92,.16);
}
.field.has-error input,.field.has-error select{border-color:#c0392b;background:#fdf6f5}
.field__error{color:#c0392b;font-size:13.5px;font-weight:700;margin:8px 0 0}
.field__note{font-size:13.5px;color:var(--g-600);margin:8px 0 0;min-height:1.2em}
.field__note--error{color:#c0392b}
/* 姓・名などを横1行に並べる */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-row .field{margin-bottom:26px}
/* 郵便番号欄＋検索ボタン */
.zip-row{display:flex;gap:10px;align-items:stretch}
.zip-row input{max-width:200px}
.btn--sm{padding:9px 18px;font-size:14px;white-space:nowrap}
.req,.opt{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:3px 8px;border-radius:4px;margin-left:8px;vertical-align:2px;
}
.req{background:#fdecea;color:#c0392b}
.opt{background:var(--bg-2);color:var(--ink-3)}

/* チェックボックスのグループ（希望製品など） */
.field--group{border:0;padding:0;margin:0 0 26px;min-width:0}
.field--group legend{padding:0;font-weight:700;font-size:15px;margin-bottom:8px}
.check-list{
  display:grid;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
}
.field--group.has-error .check-list{border-color:#c0392b;background:#fdf6f5}
.check-list .check{align-items:center}

/* 同意チェックボックス */
.field--check{
  background:var(--g-050);border:1px solid var(--g-100);border-radius:var(--radius);padding:18px 20px;
}
.field--check.has-error{border-color:#c0392b;background:#fdf6f5}
/* .field label（display:block）に勝たせるため、要素名まで含めて指定する */
label.check{display:flex;align-items:flex-start;gap:12px;font-weight:400!important;cursor:pointer;margin:0!important}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--g-700)}
.check span{font-size:15px;line-height:1.7}

/* ご確認事項 */
.terms{
  max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;padding:20px 22px;margin-bottom:24px;
}
.terms li{
  position:relative;padding-left:1.1em;margin-bottom:14px;
  font-size:14px;line-height:1.85;color:var(--ink-2);
}
.terms li::before{content:"・";position:absolute;left:0;color:var(--g-600)}
.terms li:last-child{margin-bottom:0}

/* エラー表示 */
.alert{
  border:1px solid #e6bdb7;background:#fdecea;color:#a5342a;
  border-radius:var(--radius);padding:16px 20px;font-size:14.5px;margin-bottom:28px;
}
.alert a{color:#a5342a;text-decoration:underline}

/* ロボット対策の隠し欄 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Notice / callout ------------------------------- */
.note{
  border-left:3px solid var(--g-500);background:var(--g-050);
  padding:18px 22px;border-radius:0 8px 8px 0;font-size:14.5px;color:var(--ink-2);
}
.note p:last-child{margin-bottom:0}

/* ---- Definition list (company / contact) ------------ */
.dl{border-top:1px solid var(--line)}
.dl__row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:18px 4px;border-bottom:1px solid var(--line)}
.dl__row dt{font-weight:700;font-size:15px}
.dl__row dd{margin:0;color:var(--ink-2);font-size:15px}
.tel{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--g-700)}
.tel:hover{text-decoration:none}

/* ---- お問い合わせ（メール主体） ---------------------- */
.contact-main{
  border:1px solid var(--g-100);background:var(--g-050);
  border-radius:var(--radius);padding:32px 34px;
}
.mailto{margin:0 0 14px}
.mailto a{
  font-family:var(--mono);font-size:clamp(20px,3.4vw,30px);font-weight:700;
  color:var(--g-700);letter-spacing:.01em;word-break:break-all;
}
.ticks{margin-top:12px}
.ticks li{
  position:relative;padding-left:24px;margin-bottom:8px;font-size:14.5px;color:var(--ink-2);
}
.ticks li::before{
  content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--g-500);
}

/* ---- カラースウォッチ -------------------------------- */
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:420px}
.swatch__chip{
  aspect-ratio:5/3;border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:inset 0 -18px 32px rgba(0,0,0,.10);
  position:relative;overflow:hidden;
}
.swatch__chip::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:var(--g-700);
}
.swatch__chip--silver{background:linear-gradient(160deg,#f4f5f6 0%,#d9dcdf 55%,#eceef0 100%)}
.swatch__chip--black{background:linear-gradient(160deg,#4a4d50 0%,#1c1e20 55%,#35383a 100%)}
.swatch__name{font-size:14.5px;font-weight:700;margin-top:10px}

/* ---- 注記・準備中 ------------------------------------ */
.tbd{color:#8a958e}
.mk{font-family:var(--mono);font-size:11px;color:var(--g-600);vertical-align:super;margin-left:2px}
.notes-list{margin-top:18px}
.notes-list li{font-size:13.5px;color:var(--ink-3);line-height:1.8;padding-left:1em;text-indent:-1em}

/* ---- News ------------------------------------------- */
.news{border-top:1px solid var(--line)}
.news li{border-bottom:1px solid var(--line)}
.news a,.news .news__item{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 4px;color:var(--ink)}
.news a:hover{text-decoration:none;color:var(--g-700)}
.news time{font-family:var(--mono);font-size:13.5px;color:var(--ink-3)}

/* ---- CTA band --------------------------------------- */
.cta{background:var(--g-700);color:#fff;padding:64px 0;text-align:center}
.cta h2{font-size:clamp(22px,3vw,28px);margin-bottom:12px}
.cta p{color:#d5e9dc;max-width:56ch;margin-inline:auto}

/* ---- Footer ----------------------------------------- */
.site-footer{background:var(--g-900);color:#a9bfb2;padding:56px 0 28px;font-size:14px}
.site-footer a{color:#d6e5db}
.site-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer img{height:24px;margin-bottom:14px}
.site-footer h4{font-size:12px;letter-spacing:.14em;color:#fff;margin-bottom:14px;font-family:var(--mono);font-weight:500}
.site-footer li{margin-bottom:9px}
.site-footer__bottom{
  margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7f978a;
}

/* ---- Responsive ------------------------------------- */
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:32px}
  .split--rev .split__media{order:0}
  .grid--3{grid-template-columns:1fr 1fr}
  .site-footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .brand__sub{display:none}
}
@media (max-width:760px){
  .section{padding:60px 0}
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:12px 16px 20px;gap:2px;
    box-shadow:var(--shadow);display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:12px 10px;font-size:15px}
  .nav .btn{margin:10px 0 0;justify-content:center}
  .hero__inner{padding:76px 0 68px}
  .grid--2,.grid--3,.stats{grid-template-columns:1fr}
  .stats{gap:0}
  .stat{border-bottom:1px solid var(--line)}
  .dl__row{grid-template-columns:1fr;gap:4px;padding:14px 4px}
  .cat-nav{grid-template-columns:1fr}
  .contact-main{padding:24px 22px}
  .terms{max-height:260px;padding:16px 18px}
  .field--check{padding:16px 16px}
  .zip-row{flex-wrap:wrap}
  .zip-row input{max-width:none;flex:1 1 140px}
  .btn--sm{flex:0 0 auto}
  .news a,.news .news__item{grid-template-columns:1fr;gap:2px;padding:14px 4px}
  .site-footer__top{grid-template-columns:1fr;gap:28px}
  .spec th{width:40%;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}