/* =============================================================
   ColorTokens Xshield - 150%ディスプレイスケーリング最適化版
   Changes:
   1) --max: 1700px
   2) All font-size numeric values: 1.5x
   3) NEWS text: included in 1.5x scaling
   4) Button text: included in 1.5x scaling
   Original file: style.css
============================================================= */

/* =============================================================
   ColorTokens Xshield  ―  統合スタイルシート（LP + Product）
   -------------------------------------------------------------
   ■ 構成
     1) 共通の :root 変数・リセット・共通パーツ（＝LP＝既定）
     2) LP 各セクション（hero / message / approach / proof /
        industries / partner / footer / responsive）
     3) ===== PRODUCT PAGE SCOPE =====
        プロダクト側の差分だけを .product で上書き
   ■ 使い方
     ・LP（index.html）      … <body> のまま（変更不要）
     ・プロダクト（product.html）… <body class="product"> にする
   ============================================================= */

/* =============================================================
   1) 共通ベース（LP＝既定値）
============================================================= */
:root{
  /* --- Smoky green base --- */
  --green-1:    #0d1313;
  --green-2:    #111818;
  --green-3:    #17201d;
  --bg-grad:    #0d1313;
  --white:      #eef3f0;
  --gray:       #b1c2ba;
  --gray-dim:   #83968d;
  /* --- Accent green --- */
  --accent:     #00c6a3;
  --accent-lite:#5ce0c8;
  --accent-deep:#009e83;
  --accent-grad:linear-gradient(90deg,#00b494 0%,#3fe0c6 50%,#00c6a3 100%);
  /* --- Timeline danger→safe (赤→緑) --- */
  --danger:     #ff4d4d;
  --mid1:       #ff9a3d;
  --mid2:       #c9d84a;
  --line:       rgba(0,198,163,.26);
  --line-soft:  rgba(0,198,163,.14);
  /* --- Partner section (light) --- */
  --ivory:      #f4f1ea;
  --ivory-2:    #e9e4d9;
  --ink:        #273029;
  --ink-soft:   #55605a;
  --accent-ink: #0a9e82;
  --serif: "Noto Serif JP", serif;
  --sans:  "Noto Sans JP", sans-serif;
  --cinzel:"Cinzel", serif;
  --corm:  "Cormorant Garamond", serif;
  --max: 1800px;
}
/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--green-1);color:var(--white);
  font-family:var(--sans);font-weight:300;line-height:1.9;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.container{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:clamp(24px, 4vw, 48px);
}
.accent{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.rule{display:block;width:64px;height:1px;background:var(--line);margin:26px 0;}
.dot-rule{display:block;width:120px;height:1px;margin:34px 0;
  background:linear-gradient(90deg,transparent,var(--accent-lite),transparent);}
.dot-rule.center{margin-left:auto;margin-right:auto;}
.en-accent{font-family:var(--corm);color:var(--accent);font-weight:500;letter-spacing:.1em;}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:1.4em;
  font-family:var(--serif);font-weight:400;letter-spacing:.14em;
  font-size:clamp(1rem, 1.15vw, 1.5rem);padding:1.05em 2.4em;transition:.35s;}
.btn .arrow{font-family:var(--sans);}
.btn-outline{border:1px solid var(--accent);color:var(--white);}
.btn-outline:hover{background:rgba(0,198,163,.12);border-color:var(--accent-lite);}
.btn-solid{background:var(--accent-deep);color:#fff;}
.btn-solid:hover{background:var(--accent);}
/* =============================================================
   SCROLL REVEAL
============================================================= */
.reveal{opacity:0;transform:translateY(38px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.20s;}
.reveal[data-delay="3"]{transition-delay:.32s;}
.reveal[data-delay="4"]{transition-delay:.44s;}
.reveal[data-delay="5"]{transition-delay:.56s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
}
/* =============================================================
   HEADER
============================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:var(--bg-grad);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:20px 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img{height:clamp(24px, 2.4vw, 34px);width:auto;}
.nav-toggle{background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;width:46px;height:44px;padding:0;}
.nav-toggle span{display:block;width:34px;height:1.5px;background:var(--white);}

/* =============================================================
   GLOBAL NAV（CSSのみで開閉）
   ============================================================= */
.nav-check{position:absolute;opacity:0;pointer-events:none;}

/* ハンバーガー：button → label に変更したので見た目を再定義 */
.nav-toggle{
  --bar-gap:9px;
  --bar-h:1.5px;
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--bar-gap);width:46px;height:44px;padding:0;
  z-index:40;position:relative;
}
.nav-toggle span{
  display:block;width:clamp(26px, 2.4vw, 34px);height:var(--bar-h);background:var(--white);
  transition:transform .35s ease;
}
.nav-check:checked ~ .nav-toggle span:nth-child(1){
  transform:translateY(calc((var(--bar-gap) + var(--bar-h)) / 2)) rotate(45deg);
}
.nav-check:checked ~ .nav-toggle span:nth-child(2){
  transform:translateY(calc((var(--bar-gap) + var(--bar-h)) / -2)) rotate(-45deg);
}
/* ドロワー本体（右端からスライドイン） */
.gnav{
  position:fixed;top:0;right:0;bottom:0;z-index:30;
  width:clamp(280px, 22vw, 320px);
  display:flex;align-items:center;
  padding:0 0 0 44px;
  background:rgba(13,19,19,.97);
  backdrop-filter:blur(6px);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), visibility .45s;
}
.nav-check:checked ~ .gnav{transform:translateX(0);visibility:visible;}

/* 背景（ドロワーの外側）クリックで閉じる暗幕 */
.gnav-close{
  position:fixed;inset:0;z-index:-1;
  background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity .45s ease, visibility .45s;
  cursor:default;
}
.nav-check:checked ~ .gnav .gnav-close{opacity:1;visibility:visible;}

.gnav-list{position:relative;z-index:2;list-style:none;text-align:left;}
.gnav-list li{margin:0 0 26px;}
.gnav-list li:last-child{margin-bottom:0;}
.gnav-list a{
  font-family:"Noto Serif JP", serif;
  font-weight:400;color:var(--white);
  font-size:clamp(1.05rem, 1.3vw, 1.725rem);line-height:1.6;letter-spacing:.14em;
  display:inline-block;padding:.2em 0;
  border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
.gnav-list a:hover{color:var(--accent);border-color:var(--accent);}
.gnav-list .is-current a{color:var(--accent);}

body:has(.nav-check:checked){overflow:hidden;}

@media (max-width:640px){
  .nav-toggle span{width:28px;}
  .nav-check:checked ~ .nav-toggle span:nth-child(1){transform:translateY(5.25px) rotate(45deg);}
  .gnav{width:min(280px, 82vw);padding-left:32px;}
  .gnav-list a{font-size:1.05rem;}
  .gnav-list li{margin-bottom:22px;}
}


/* =============================================================
   SECTION 01  HERO
============================================================= */
.hero{
  position:relative;
  min-height:min(900px, 88vh);
  display:flex;
  align-items:center;
  background:#0d1313;
  overflow:hidden;
}
.hero-bg{position:absolute;top:0;left:50%;right:auto;
  height:min(42vw,800px);width:min(55vw,1050px);z-index:0;
  transform: translate(-3.12vw, 2.08vw);}
/* 背景・心臓を同じ枠内に重ねる */
.hero-bg img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  transform-origin:center center;
  opacity:1;
}

/* 緑のハート背景（固定・一番下） */
.hero-bg-base{ z-index:0; }

/* 白い心臓：脈動 */
.hero-heart-base{ animation:heroHeartBeat 1.35s infinite ease-in-out; }

/* ピンク心臓：膨らむ瞬間だけ薄く重なる */
.hero-heart-pink{ animation:heroHeartGlow 1.35s infinite ease-in-out; }

/* 1周＝1拍。休止なしで打ち続ける */
@keyframes heroHeartBeat{
  0%   { transform:scale(1);    }
  16%  { transform:scale(1.055); }  /* ドッ（収縮）*/
  50%  { transform:scale(1.01);  }
  66%  { transform:scale(1.055); }  /* ク（second bump）*/
  100% { transform:scale(1);     }  /* 即・次の拍へ */
}

@keyframes heroHeartGlow{
  0%   { opacity:.05; }   /* ←0にしない */
  16%  { opacity:.45; }
  50%  { opacity:.15; }
  66%  { opacity:.45; }
  100% { opacity:.05; }   /* 0%と同じ値＝継ぎ目が消える */
}

/* 動きを抑える設定の端末では静止 */
@media (prefers-reduced-motion:reduce){
  .hero-heart-base,
  .hero-heart-pink{ animation:none; }
  .hero-heart-pink{ opacity:0; }
}

/* ============================================================
   建物・サーバー・オフィス・ロボットの発光（点灯）演出
   ハートと同じ「重ねてopacityを揺らす」方式なので位置合わせ不要
============================================================ */
.hero-building-glow,
.hero-server-glow,
.hero-office-glow,
.hero-robot-glow{
  opacity:.15;
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  will-change:opacity,filter;
}

/* 右上のビル群 */
.hero-building-glow{
  animation:buildingGlow 4.8s ease-in-out infinite;
  animation-delay:.6s;
  animation-fill-mode:backwards;
  transform: translate(-2px, 0px); /* ←位置調整はそのまま維持 */
}

/* 左下のサーバールーム */
.hero-server-glow{
  animation:serverGlow 3.7s ease-in-out infinite;
  animation-delay:1.9s;
  animation-fill-mode:backwards;
}

/* 右下のオフィス */
.hero-office-glow{
  animation:officeGlow 5.3s ease-in-out infinite;
  animation-delay:2.8s;
  animation-fill-mode:backwards;
}

/* 左上のロボット */
.hero-robot-glow{
  animation:robotGlow 4.1s ease-in-out infinite;
  animation-delay:.2s;
  animation-fill-mode:backwards;
  transform: translate(0px, 0px);
}

@keyframes buildingGlow{
  0%,100% { opacity:.15;}
  50%     { opacity:1;}
}
@keyframes serverGlow{
  0%,100% { opacity:.25;}
  50%     { opacity:.95;}
}
@keyframes officeGlow{
  0%,100% { opacity:.2;}
  50%     { opacity:.9;}
}
@keyframes robotGlow{
  0%,100% { opacity:.18;}
  50%     { opacity:1;}
}

/* 動きを抑える設定の端末では静止（点灯状態で固定） */
@media (prefers-reduced-motion:reduce){
  .hero-building-glow,
  .hero-server-glow,
  .hero-office-glow,
  .hero-robot-glow{ animation:none; opacity:.7; }
}

.hero-bg::after{ display:none; }
.hero-inner{
  position:relative;
  z-index:2;
  width:min(100%, var(--max));
  margin-inline:auto;
}
.hero-copy{
    width:70%;
    max-width:none;
    transform:translate(0px,30px);
}
.hero-title{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(2.7rem, 5.6vw, 6.9rem);line-height:1.24;letter-spacing:.04em;}
  /* 「攻撃されても」だけ少し小さくする */
.hero-title-small {display: inline-block;font-size: 1.17em;line-height: 1.2;}
.hero-lead{font-family:var(--sans);font-weight:300;color:var(--gray);
  font-size:clamp(1rem, 1.5vw, 1.875rem);line-height:1.9;letter-spacing:.08em;margin-bottom:42px;}
  
/* =============================================================
   SECTION 01.5  NEWS（プレスリリース）
============================================================= */
.news{position:relative;background:var(--green-1);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.news-inner{display:flex;align-items:center;gap:40px;padding:28px;flex-wrap:wrap;}
.news-label{flex:0 0 auto;font-family:var(--corm);font-weight:600;color:var(--accent);
  font-size:clamp(.8rem, 1.05vw, 1.35rem);letter-spacing:.24em;}
.news-list{flex:1 1 auto;list-style:none;min-width:0;}
.news-item{list-style:none;}
.news-link{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.news-date{font-family:var(--corm);color:var(--gray-dim);font-size:clamp(.8rem, 1.08vw, 1.38rem);
  letter-spacing:.05em;flex:0 0 auto;}
.news-cat{flex:0 0 auto;font-family:var(--sans);font-size:clamp(.7rem, .92vw, 1.17rem);font-weight:500;
  color:var(--accent);letter-spacing:.06em;border:1px solid var(--line);
  border-radius:2px;padding:.3em .9em;}
.news-title{font-family:var(--serif);color:var(--white);font-weight:400;
  font-size:clamp(.9rem, 1.15vw, 1.5rem);letter-spacing:.04em;line-height:1.6;flex:1 1 260px;min-width:0;}
.news-link .arrow{flex:0 0 auto;font-family:var(--sans);color:var(--accent);
  transition:transform .3s ease;}
.news-link:hover .arrow{transform:translateX(5px);}
.news-link:hover .news-title{color:var(--accent-lite);}
.news-more{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--serif);font-weight:400;font-size:clamp(.8rem, 1vw, 1.275rem);letter-spacing:.1em;color:var(--white);
  border:1px solid var(--accent);border-radius:2px;padding:.6em 1.7em;
  transition:background .35s ease,border-color .35s ease;}
.news-more:hover{background:rgba(0,198,163,.12);border-color:var(--accent-lite);}
.news-more .arrow{font-family:var(--sans);color:var(--accent);transition:transform .3s ease;}
.news-more:hover .arrow{transform:translateX(5px);}

@media (max-width:640px){
  .news-inner{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:24px 20px;      /* ←左右の余白を追加(上下24px・左右20px) */
  }
  .news-list{width:100%;}
  .news-link{gap:8px 12px;}
  .news-date{font-size:.8rem;}      /* ←日付のサイズを縮小 */
  .news-cat{font-size:.7rem;padding:.25em .75em;}  /* ←バッジのサイズを縮小 */
  .news-title{
    flex-basis:100%;
    font-size:.9rem;        /* ←タイトルのサイズを縮小 */
    line-height:1.7;
  }
  .news-more{
    margin-left:0;
    width:100%;
    justify-content:center;
    font-size:.8rem;        /* ←ボタンの文字サイズも少し縮小 */
    padding:.55em 1.5em;
  }
}
  
/* =============================================================
   SECTION 02  MESSAGE
============================================================= */
.message{position:relative;background:var(--bg-grad);padding:120px 0;overflow:hidden;}
.message-inner{position:relative;z-index:2;}
.tl{position:relative;max-width:900px;margin:0 auto;padding-left:52px;}
.tl-line{position:absolute;left:5px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,
    var(--danger) 0%,var(--mid1) 32%,var(--mid2) 60%,var(--accent) 88%);
  opacity:.85;}
.tl-item{position:relative;padding:0 0 100px;}
.tl-item:last-child{padding-bottom:0;}
.tl-node{position:absolute;left:-52px;top:.55em;width:13px;height:13px;border-radius:50%;
  transform:translateX(-1px);background:var(--_c,#fff);
  box-shadow:0 0 0 4px rgba(255,255,255,.04),0 0 14px 3px var(--_g,rgba(255,255,255,.4));}
.tl-item.lv0 .tl-node{--_c:var(--danger);--_g:rgba(255,77,77,.55);}
.tl-item.lv1 .tl-node{
  --_c:#ffe14d;
  --_g:rgba(255,225,77,.5);

  top:50%;
  transform:translate(-1px,-50%);
}
.tl-item.lv3 .tl-node{
  --_c:var(--accent);
  --_g:rgba(0,198,163,.6);

  top:auto;
  bottom:0;
}
/* lv1 を黄色に（ノード＋光＋テキスト） */
.tl-item.lv1 .tl-node{ --_c:#ffe14d; --_g:rgba(255,225,77,.5); }
.tl-item.lv2 .tl-node{--_c:var(--mid2);--_g:rgba(201,216,74,.5);}
.tl-item.lv3 .tl-node{--_c:var(--accent);--_g:rgba(0,198,163,.6);}
.tl-item.lv0 .tl-node{animation:tl-pulse 1.8s ease-out infinite;}
@keyframes tl-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,77,.5),0 0 14px 3px rgba(255,77,77,.55);}
  70%{box-shadow:0 0 0 12px rgba(255,77,77,0),0 0 14px 3px rgba(255,77,77,.55);}
  100%{box-shadow:0 0 0 0 rgba(255,77,77,0),0 0 14px 3px rgba(255,77,77,.55);}
}
@media (prefers-reduced-motion:reduce){.tl-item.lv0 .tl-node{animation:none;}}
.tl-text{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(1.6rem, 3.1vw, 3.75rem);letter-spacing:.06em;line-height:1.45;}
.tl-lead .tl-text{font-size:clamp(1.6rem, 3.1vw, 3.75rem);line-height:1.45;}
.tl-em{border-bottom:1px solid var(--line);padding-bottom:.05em;}
.tl-item.lv0{--lvc:var(--danger);}
.tl-item.lv1{ --lvc:#ffe14d; }
.tl-item.lv2{--lvc:var(--mid2);}
.tl-item.lv3{--lvc:var(--accent);}
.tl-hl{color:var(--lvc);}
/* =============================================================
   SECTION 03  APPROACH（戦わない）
============================================================= */
.approach{position:relative;background:var(--bg-grad);padding:50px 0 0;text-align:center;overflow:hidden;}
.approach-inner{position:relative;z-index:2;}
.approach-title{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(2rem, 4.3vw, 5.25rem);letter-spacing:.08em;}
.approach .dot-rule{margin:34px auto;}
.approach-lead{color:var(--gray);letter-spacing:.08em;line-height:1.9;font-size:clamp(1rem, 1.5vw, 1.875rem);}
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1040px;margin:84px auto 0;}
.approach-item{padding:0 30px;border-left:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;}
.approach-item:first-child{border-left:none;}
.ap-num{font-family:var(--corm);color:var(--accent);font-size:clamp(2rem, 3.1vw, 3.9rem);font-weight:500;letter-spacing:.05em;line-height:1;}
.ap-bar{display:block;width:34px;height:1px;background:var(--line);margin:16px 0 20px;}
.ap-name{font-family:var(--serif);color:var(--white);font-weight:500;font-size:clamp(1.4rem, 2.4vw, 3rem);letter-spacing:.12em;}
.ap-desc{margin-top:18px;color:var(--gray);font-size:clamp(.9rem, 1.15vw, 1.38rem);line-height:1.8;letter-spacing:.05em;}
.approach-image{margin-top:72px;text-align:center;}
.approach-image img{width:auto;max-width:min(1400px, 73vw);height:auto;margin:0 auto;display:block;}
.approach-foot{font-family:var(--serif);color:var(--white);font-weight:400;
  font-size:clamp(1.2rem, 1.8vw, 2.25rem);letter-spacing:.14em;text-align:center;padding:58px 0 34px;}
.approach-foot .en-accent{font-size:1.575em;}
/* 製品情報リンク */
.approach-product-link{text-align:center;padding-bottom:110px;}
.product-link{display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--serif);font-size:clamp(.95rem, 1.25vw, 1.575rem);letter-spacing:.1em;color:var(--accent);
  padding:.6em 0;border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease;}
.product-link:hover{color:var(--accent-lite);border-color:var(--accent-lite);}
.product-link .arrow{font-family:var(--sans);transition:transform .3s ease;}
.product-link:hover .arrow{transform:translateX(5px);}
/* =============================================================
   SECTION 04  PROOF
============================================================= */
.proof{position:relative;background:var(--bg-grad);padding:150px 0;overflow:hidden;}
.globe{position:absolute;top:0;left:50%;right:auto;width:min(900px, 47vw);z-index:0;opacity:.9;}
.globe img{width:100%;height:auto;}
.proof .container{position:relative;z-index:2;}
.proof-head{max-width:min(1200px, 90vw);}
.proof-title{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(2rem, 4.3vw, 5.25rem);line-height:1.4;letter-spacing:.08em;}
.proof-lead{font-family:var(--sans);font-weight:300;color:var(--gray);
  font-size:clamp(.92rem, 1.4vw, 1.68rem);line-height:2;letter-spacing:.06em;}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:90px;border-top:1px solid var(--line);}
.proof-item{padding:48px 26px;text-align:center;border-left:1px solid var(--line-soft);}
.proof-item:first-child{border-left:none;}
.proof-label{font-family:var(--scorm);color:var(--accent);font-weight:600;
  letter-spacing:.2em;font-size:clamp(.78rem, .98vw, 1.23rem);line-height:1.5;min-height:2.6em;}
.proof-icon{height:clamp(80px, 7.8vw, 150px);display:flex;align-items:center;justify-content:center;margin:14px 0 18px;}
.proof-icon img{max-height:clamp(74px, 7.3vw, 140px);width:auto;object-fit:contain;}
.proof-main{color:var(--white);font-size:clamp(1.2rem, 2.1vw, 2.55rem);letter-spacing:.06em;line-height:1.4;}
.proof-main.serif{font-family:var(--serif);font-weight:500;}
.proof-main .small{
  font-family:var(--corm);font-size:clamp(.75rem, .98vw, 1.23rem);color:var(--gray);letter-spacing:.08em;
  display:block;line-height:1.5;margin-top:8px;
}
/* =============================================================
   SECTION 05  INDUSTRIES
============================================================= */
.industries{position:relative;background:var(--bg-grad);padding:150px 0;overflow:hidden;}
.industries-inner{position:relative;z-index:2;text-align:center;}
.industries-title{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(2rem, 4.3vw, 5.25rem);letter-spacing:.1em;}
.industries-lead{margin-top:30px;color:var(--gray);letter-spacing:.08em;font-size:clamp(1rem, 1.5vw, 1.8rem);line-height:1.9;}
.industry-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;
  margin:80px 0 0;padding:0;border-top:1px solid var(--line-soft);}
.industry-grid > li{min-width:0;margin:0;padding:44px 14px;border-left:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:24px;list-style:none;text-align:center;}
.industry-grid > li:first-child{border-left:none;}
.industry-grid > li::marker{content:"";}
.ind-cat{display:flex;align-items:center;justify-content:center;
  width:100%;max-width:min(210px, 11vw);min-height:clamp(48px, 3.85vw, 74px);margin:0 auto;padding:0 12px;
  background:var(--ivory);color:var(--green-1);border-radius:2px;
  font-family:var(--serif);font-size:clamp(1.2rem, 1.25vw, 1.575rem);font-weight:600;line-height:1.3;letter-spacing:.08em;
  white-space:nowrap;word-break:keep-all;}
.ind-co{
  font-family:var(--corm);color:var(--gray);font-weight:500;
  font-size:clamp(1rem, 1.08vw, 1.35rem);letter-spacing:.04em;line-height:1.7;
  width:100%;margin:0;padding:0;list-style:none;text-align:left;
}
.ind-co li{
  position:relative;padding-left:1em;margin:0 0 .4em;list-style:none;
}
.ind-co li:last-child{margin-bottom:0;}
.ind-co li::before{
  content:"・";position:absolute;left:0;top:0;color:var(--accent);
}
/* =============================================================
   SECTION 06  PARTNER (DENKOSHA)
============================================================= */
.partner{
  --ivory:      #f4f1ea;
  --ivory-2:    #ece8dd;
  --ink:        #2a3940;
  --ink-soft:   #55615f;
  --accent-ink: #2f6470;
  --accent-deep:#2f6470;
  --accent:     #3a7d8a;
}
.partner{background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-2) 100%);}
.partner-inner{max-width:1400px;margin:0 auto;padding:64px 60px;}
.partner-title{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.8rem, 2.4vw, 3rem);line-height:1.4;letter-spacing:.06em;text-align:center;}
.partner-title .accent{background:none;-webkit-text-fill-color:initial;color:var(--accent-ink);}
.partner .rule{background:rgba(10,158,130,.4);margin:20px auto 44px;}
.partner-body{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.partner-copy{min-width:0;}
.partner-lead{color:var(--ink-soft);font-weight:400;letter-spacing:.04em;font-size:clamp(.9rem, 1.3vw, 1.53rem);line-height:2;margin:0;}
.partner-cta{display:flex;justify-content:center;}
.cta-box{width:100%;border:1px solid rgba(47,100,112,.35);padding:32px;
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;background:rgba(255,255,255,.35);}
.cta-title{font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.5rem, 1.85vw, 2.325rem);line-height:1.5;letter-spacing:.06em;}
.cta-title .accent{background:none;-webkit-text-fill-color:initial;color:var(--accent-ink);}
.cta-sub{color:var(--ink-soft);font-size:clamp(.95rem, .98vw, 1.23rem);letter-spacing:.05em;margin-top:10px;}
.partner-cta .btn{width:100%;}
/* スマホ限定の改行制御 */
.sp-only{ display:none; }
@media (max-width:820px){
  .partner-body{grid-template-columns:1fr;gap:40px;}
  .partner-title{font-size:1.8rem;}
}
/* =============================================================
   FOOTER
============================================================= */
.site-footer{background:var(--green-1);border-top:1px solid var(--line-soft);padding:44px 0;}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.footer-logo{font-family:var(--corm);color:var(--accent);letter-spacing:.18em;font-size:clamp(1.05rem, 1.35vw, 1.725rem);font-weight:600;}
.footer-logo img{
  height:clamp(40px, 3.65vw, 70px);
  width:auto;
  display:block;
}
.footer-copy{color:var(--gray-dim);font-size:clamp(.7rem, .92vw, 1.17rem);letter-spacing:.06em;}
/* =============================================================
   ★ 150%スケーリング（実効1280px前後）対応ブレークポイント
      ノートPCの推奨表示倍率150%＝CSS上は約 1280×720px になるため、
      その帯域で LP / Product / News の余白と最大幅を圧縮します。
============================================================= */
@media (max-width:1440px){
  :root{ --max:1400px; }

  .message{ padding:100px 0; }
  .proof{ padding:110px 0; }
  .industries{ padding:110px 0; }
  .approach-product-link{ padding-bottom:80px; }
  .approach-image{ margin-top:52px; }

  .tl{ max-width:760px; }
  .tl-item{ padding-bottom:76px; }
  .approach-grid{ max-width:900px; margin-top:64px; }
  .proof-grid{ margin-top:64px; }
  .proof-item{ padding:36px 20px; }
  .industry-grid{ margin-top:60px; }
  .industry-grid > li{ padding:34px 12px; gap:18px; }

  .header-inner{ padding:16px 36px; }
  .news-inner{ gap:28px; padding:22px; }

  .partner-inner{ padding:56px 44px; }
  .partner-body{ gap:44px; }
  .cta-box{ padding:26px; }
  .site-footer{ padding:34px 0; }

  .product .p-block{ padding:100px 0; }
  .product .p-overview{ padding:100px 0; }
  .product .p-features{ padding:110px 0; }
  .product .p-cta{ padding:110px 0; }
  .product .p-ov-grid{ max-width:1100px; gap:24px; }
  .product .p-ov-card{ padding:40px 34px; }
  .product .p-card-body{ padding:26px 26px 30px; }
  .product .p-feature{ padding:34px 30px; }
  .product .p-target-grid{ gap:20px; }
  .product .header-inner{ padding:16px 36px; }
  .product .site-footer{ padding:42px 0; }

  .news-page .n-body{ padding-bottom:110px; }
  .news-page .n-row{ padding:26px 8px; }
  .news-page .n-filter{ margin-bottom:44px; }
  .news-single .n-article{ padding:100px 0 90px; }
  .news-single .n-art-contact{ margin-top:56px; padding:26px 28px; }
}
/* =============================================================
   RESPONSIVE (LP)
============================================================= */
@media (max-width:1024px){
  .hero-bg{width:80%;}
  .proof-grid{grid-template-columns:repeat(2,1fr);}
  .proof-item:nth-child(3){border-left:none;}
  .proof-item:nth-child(n+3){border-top:1px solid var(--line-soft);}
  .industry-grid{grid-template-columns:repeat(3,1fr);}
  .industry-grid li:nth-child(4){border-left:none;}
  .industry-grid li:nth-child(n+4){border-top:1px solid var(--line-soft);}
}
@media (max-width:820px){
  .partner{grid-template-columns:1fr;}
  .partner-photo{min-height:60vh;order:-1;}
  .globe{width:70vw;opacity:.5;}
}
@media (max-width:640px){
.header-inner{padding:10px 12px;}
  .logo img{
height:20px;
transform:none;
}
  .nav-toggle span{
width:28px;
transform:none;
}

  .tl{padding-left:40px;}
  .tl-node{left:-40px;}
  .approach-grid{grid-template-columns:1fr;gap:44px;max-width:340px;}
  .approach-item{border-left:none;}
  .ap-num{font-size:2rem;}
  .ap-name{font-size:1.4rem;}
  .ap-desc{font-size:.9rem;}
  .approach-foot{font-size:1.2rem;line-height:1.8;}
.approach-foot .en-accent{font-size:1.5rem;}
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .industry-grid li{border-left:none;border-top:1px solid var(--line-soft);}
  .industry-grid li:first-child{border-top:none;}
  .proof-grid{grid-template-columns:1fr;}
  .proof-item{border-left:none;border-top:1px solid var(--line-soft);}
  .proof-item:first-child{border-top:none;}
  .proof-main{font-size:1.2rem;}
  .cta-box{flex-direction:column;align-items:flex-start;}
  .btn{width:100%;font-size:1rem;}
  .sp-only{ display:inline; }
  .ind-co{  font-size:1rem;  line-height:1.6;}
  .ind-cat{font-size:1.2rem;}
.cta-title{font-size:2rem;line-height:1.5;}
.cta-sub{font-size:0.95rem;}

/* H1 */
.hero-title{ font-size:2.7rem; }

/* H2 */
.approach-title,
.proof-title,
.industries-title,
.partner-title{ font-size:2rem; }

  /* ---- ヒーロー：画面いっぱいの背景演出 ---- */
.hero{
position:relative;
display:block; /* flexをやめる */
min-height:auto; /* 数値指定は入れない */
overflow:hidden; /* visibleに戻さなくてOKになる */
padding-bottom:48px;
}
.hero-bg{
position:absolute;
top:200px; /* ← 画像の縦位置ツマミ */
left:50%;
transform:translateX(-50%);
width:100%;
height:340px; /* ← 画像の大きさツマミ */
opacity:1;
z-index:0;
}
.hero-bg img{
  object-position:top center;
}
  .hero-bg::after{
  display:none;
  }
  .hero-inner{
    padding:0 24px;
  }
.hero-copy{
position:relative;
z-index:10;
width:100%;
max-width:none;
padding-top:80px;
text-align:left;
transform:none; /* ベースのtranslateY(30px)を打ち消す */
}
.hero .reveal{
opacity:1;
transform:none;
transition:none;
}
/* ★ここが本体：画像を置くための空きスペースを実体として確保 */
.hero-copy .rule{
width:100%;
height:280px; /* ← セクション全体の高さツマミ */
background:transparent;
margin:16px 0 0;
}

  .tl-text{font-size:1.6rem;line-height:1.6;}
  .tl-lead .tl-text{font-size:1.6rem;}

.hero-lead{
font-size:1rem;
margin-top:0; /* 260pxは削除 */
margin-bottom:28px;
}
  .approach-lead{font-size:1rem;}
  .proof-lead{font-size:.92rem;}
  .industries-lead{font-size:1rem;}
  .partner-lead{font-size:.9rem;}
  .footer-logo img{width:180px;height:auto;}
  .footer-inner{flex-direction:column;align-items:center;
text-align:center;gap:6px;}
.footer-copy{font-size:.7rem;line-height:1.5;}
.site-footer{padding:24px 0;}

  /* セクション間の余白を圧縮 */
  .message{padding:50px 0;}
  .approach{padding:50px 0 0;}
  .proof{padding:50px 0;}
  .industries{padding:50px 0;}
  .approach-product-link{padding-bottom:50px;}
  .proof-item{padding:28px 20px;}      /* ← 48px → 28pxに圧縮 */
  .proof-icon{height:72px;margin:10px 0 30px;}  /* ← 110px → 72pxに圧縮 */
  .partner-inner{
    padding:48px 24px;   /* ← 64px 60px から変更。他セクションと近い余白に */
  }
  .approach-image img{
    max-width:100%;   /* ← 1040px固定から、画面幅に応じて可変に */
    width:100%;
  }
}



/* =============================================================
   ★★★  PRODUCT PAGE SCOPE  （旧 style-P.css の差分）  ★★★
   product.html の <body> に class="product" を付けてください。
   ここより下は .product 内でのみ有効になり、LP には影響しません。
============================================================= */
.product{
  /* --- 変数の上書き（プロダクト用：旧 style-P.css）--- */
  --green-2:     #10201c;
  --green-3:     #16302a;
  --white:       #f3f6f4;
  --gray:        #b9c4c0;
  --gray-dim:    #7f8c88;
  --accent-lite: rgba(0,198,163,.16);   /* ← LPと意味が違う：半透明背景 */
  --accent-grad: linear-gradient(90deg,#00a98a 0%,#2fe0be 50%,#00c6a3 100%);
  --line:        rgba(255,255,255,.10);
  --line-soft:   rgba(255,255,255,.06);
  --bg-grad:     #0d1313;
  --serif: "Noto Serif JP","Cormorant Garamond",serif;
  --sans:  "Noto Sans JP",system-ui,sans-serif;
  --corm:  "Cormorant Garamond","Cinzel",serif;

  /* --- 追加変数（旧 product.css の :root）--- */
  --accent-blue:      #9fd356;   /* Gatekeeper 黄緑 */
  --accent-blue-lite: #c3e88d;
  --accent-blue-grad: linear-gradient(90deg,#7fbf3a 0%,#b6e368 50%,#9fd356 100%);
  --panel:            #131b1a;
  --panel-line:       rgba(0,198,163,.14);
  --cta-ivory:        #f4f1e8;
  --cta-ink:          #1a201d;

  background:var(--green-1);color:var(--white);
  font-family:var(--sans);font-weight:300;line-height:1.7;
}
/* ---- 共通パーツ上書き ---- */
.product .container{width:100%;max-width:var(--max);margin:0 auto;padding:0 48px;}
.product .rule{width:64px;height:1px;background:var(--accent);margin:26px 0;opacity:.8;}
.product .dot-rule{width:60px;height:1px;background:var(--accent);opacity:.8;
  margin:0;background-image:none;}
.product .dot-rule.center{margin:16px auto 0;}
/* ---- buttons（角丸・hoverで浮く）---- */
.product .btn{gap:.8em;justify-content:flex-start;font-weight:500;letter-spacing:.08em;
  padding:1em 2.4em;border-radius:2px;}
.product .btn .arrow{transition:.35s;}
.product .btn-solid{background:var(--accent);color:var(--green-1);}
.product .btn-solid:hover{background:#2fe0be;transform:translateY(-2px);}
.product .btn-solid:hover .arrow{transform:translateX(5px);}
.product .btn-outline{border:1px solid var(--line);color:var(--white);background:none;}
.product .btn-outline:hover{border-color:var(--accent);color:var(--accent);
  background:none;transform:translateY(-2px);}
.product .btn-outline:hover .arrow{transform:translateX(-5px);}
/* ---- header（テキストロゴ）---- */
.product .site-header{padding:0;background:transparent;border-bottom:none;}
.product .header-inner{width:100%;max-width:var(--max);margin:0 auto;padding:20px 48px;align-items:center;}
.product .logo{font-family:var(--corm);font-weight:600;letter-spacing:.14em;
  font-size:clamp(1.3rem, 1.65vw, 2.1rem);color:var(--white);}
.product .nav-toggle{--bar-gap:9px;}
/* ---- footer ---- */
.product .site-footer{background:#0a0f0f;border-top:1px solid var(--line-soft);padding:56px 0;}
.product .footer-logo{font-family:var(--corm);font-weight:600;letter-spacing:.12em;
  font-size:clamp(1.1rem, 1.4vw, 1.8rem);color:var(--white);}
.product .footer-copy{color:var(--gray-dim);font-size:clamp(.7rem, .98vw, 1.23rem);letter-spacing:.05em;}
/* ---- reveal（プロダクト版の距離・タイミング）---- */
.product .reveal{transform:translateY(28px);}
.product .reveal.is-visible{transform:none;}
.product .reveal[data-delay="1"]{transition-delay:.12s;}
.product .reveal[data-delay="2"]{transition-delay:.24s;}
.product .reveal[data-delay="3"]{transition-delay:.36s;}
.product .reveal[data-delay="4"]{transition-delay:.48s;}
/* ---- responsive ---- */
@media (max-width:640px){
  .product .footer-inner{flex-direction:column;text-align:center;}
}

/* =============================================================
   ★ PRODUCT DETAIL SECTIONS（旧 product.css）★
   すべて .product スコープに閉じてあるので LP には影響しません。
============================================================= */
/* ---- Gatekeeper 見出し用アクセント（黄緑グラデ文字） ---- */
.product .accent-blue{
  background:var(--accent-blue-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
  .product .site-header{background:#0d1313;}
/* ---- SECTION 01 PRODUCT HERO ---- */
.product .p-hero{position:relative;min-height:min(1000px, 92vh);display:flex;align-items:center;
  background:var(--bg-grad);overflow:hidden;}

.product .p-hero-bg{
  position:absolute;
  top:0;
  left:50%;                              /* ←中心を基準点に変更 */
  right:auto;                            /* ←right指定は解除 */
  height:100%;
  width:min(1000px, 52vw);
  z-index:0;
  transform: translate(-2.6vw, 0px);      /* ←中心から右にどれだけずらすか */
}

/* ③ 黒モヤ削除 */
.product .p-hero-bg::after{ display:none; }

/* 図を画像サイズにぴったり包む（%座標の基準になる） */
.product .p-hero-diagram{
  position:relative;
  display:block;
  width:min(1000px, 52vw);          /* 88% → 固定（150%表示対応でvw併用）*/
  margin:6.25vw 0 0;     /* auto → 0（右端基準を維持）*/
  line-height:0;
}
.product .p-hero-diagram img{ width:100%; height:auto; display:block; }

/* 通信パケット共通 */
.product .pkt{
  position:absolute;
  font-size:20px;
  font-weight:700;
  line-height:1;
  opacity:0;
  pointer-events:none;
  animation-duration:3.4s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}

/* 緑：イントラネット → ゲストPC（右上へ） */
.product .green{ color:#4de36d; }
.product .pkt.green{
  transform:rotate(195deg);
}
.product .g1{ animation-name:pktGreen; }
.product .g2{ animation-name:pktGreen; animation-delay:1.7s; }
@keyframes pktGreen{
  0%  { left:85%; top:88%; opacity:0; }
  15% { opacity:1;}
  100%{ left:47%; top:74%; opacity:1; }
}

/* 赤：イントラネット → 管理者PC（水平） */
.product .red{ color:#ff5c5c; }
.product .pkt.red{ transform:rotate(0deg); text-shadow:0 0 8px #ff5c5c; }
.product .r1{ animation-name:pktRed; animation-duration:2.6s; }
.product .r2{ animation-name:pktRed; animation-duration:2.6s; animation-delay:1.3s; }
@keyframes pktRed{
  0%  { left:5%; top:42%; opacity:0; }
  15% { opacity:1; }
  100%{ left:29%; top:42%; opacity:1; }
}

/* 青：イントラネット → 営業PC（右下へ） */
.product .blue{ color:#3ab6ff; }
.product .pkt.blue{
  transform:rotate(105deg);
}
.product .b1{ animation-name:pktBlue; animation-duration:3.8s; }
.product .b2{ animation-name:pktBlue; animation-duration:3.8s; animation-delay:1.9s; }
@keyframes pktBlue{
  0%  { left:53%; top:12%; opacity:0; }
  15% { opacity:1; }
  100%{ left:49%; top:38%; opacity:1; }
}

/* 紫：ADサーバー → ファイルサーバー（右→左下）＝逆向き */
.product .purple{ color:#b892ff; }
.product .pkt.purple{
  transform:rotate(-25deg);
}
.product .p1{ animation-name:pktPurple; animation-duration:3s; }
.product .p2{ animation-name:pktPurple; animation-duration:3s; animation-delay:1.5s; }
@keyframes pktPurple{
  0%  { left:5%; top:42%; opacity:0; }
  15% { opacity:1; }
  100%{ left:21%; top:32%; opacity:1; }
}

.product .p-hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(0,198,163,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,198,163,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 78% 40%,#000 0%,transparent 70%);
  mask-image:radial-gradient(circle at 78% 40%,#000 0%,transparent 70%);}
.product .p-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:70px 48px 0;   /* ←header-innerと同じ「左右48px固定」に統一 */
}
.product .p-hero-eyebrow{font-family:var(--corm);color:var(--accent);letter-spacing:.34em;
  font-weight:600;font-size:clamp(.8rem, 1.05vw, 1.35rem);text-transform:uppercase;}
.product .p-hero-title{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(2.7rem, 5.4vw, 6.6rem);line-height:1.24;letter-spacing:.04em;margin-top:22px;}
.product .p-hero-lead{font-family:var(--sans);font-weight:300;color:var(--gray);
  font-size:clamp(.98rem, 1.45vw, 1.77rem);line-height:2;letter-spacing:.07em;margin-top:6px;max-width:min(800px, 62vw);}
/* ---- 共通：セクション見出し ---- */
.product .p-sec-head{
  text-align:center;
  margin-bottom:64px;
}
.product .p-sec-head .dot-rule{
  margin-top:50px;   /* ←新しく追加 */
}
.product .p-sec-eyebrow{font-family:var(--corm);color:var(--accent);letter-spacing:.3em;
  font-weight:600;font-size:clamp(.8rem, 1.02vw, 1.29rem);text-transform:uppercase;}
.product .p-sec-title{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(1.9rem, 3.6vw, 4.35rem);letter-spacing:.08em;margin-top:16px;}

  .product .p-sec-title-ruby{
  position:relative;
  display:inline-block;
  line-height:1;
}
.product .p-sec-title-kana{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:100%;               /* ←「Xshield」の真下にぴったりつける */
  white-space:nowrap;     /* ←括弧書きが折り返さないように */
  font-size:0.4em;       /* ←ルビらしい小ささに */
  letter-spacing:.06em;
  color:var(--gray-dim);
  line-height:1.4;
  margin-top:2px;
}

  /* ---- SECTION 1.5 FEATURES（製品の特長）---- */
.product .p-features{background:var(--bg-grad);padding:150px 0;}
.product .p-feat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:var(--max);margin:0 auto;border-top:1px solid var(--line);
}
.product .p-feat{
  padding:24px 20px;border-left:1px solid var(--line-soft);
}
.product .p-feat:first-child{border-left:none;}
.product .p-feat-num{
  font-family:var(--corm);color:var(--accent);
  font-size:clamp(2rem, 2.9vw, 3.6rem);font-weight:500;letter-spacing:.05em;line-height:1;
}
.product .p-feat-title{
  font-family:var(--serif);color:var(--white);font-weight:500;
  font-size:clamp(1.2rem, 1.7vw, 1.95rem);letter-spacing:.08em;margin:12px 0 10px;
}
.product .p-feat-desc{
  color:var(--gray);font-size:clamp(.88rem, 1.2vw, 1.47rem);line-height:1.95;letter-spacing:.04em;
}

/* レスポンシブ */
@media (max-width:820px){
  .product .p-feat-grid{grid-template-columns:1fr;max-width:420px;}
  .product .p-feat{border-left:none;border-top:1px solid var(--line-soft);}
  .product .p-feat:first-child{border-top:none;}
}
/* ---- SECTION 02 OVERVIEW（2方式カード）---- */
.product .p-overview{background:var(--bg-grad);padding:140px 0;}
.product .p-ov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:1300px;margin:0 auto;}
.product .p-ov-card{position:relative;display:block;padding:52px 46px;
  background:var(--panel);border:1px solid var(--panel-line);transition:.4s;overflow:hidden;}
.product .p-ov-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--accent-grad);transform:scaleX(0);transform-origin:left;transition:.5s;}
.product .p-ov-card:last-child::before{background:var(--accent-blue-grad);}
.product .p-ov-card:hover{transform:translateY(-6px);border-color:rgba(0,198,163,.4);}
.product .p-ov-card:hover::before{transform:scaleX(1);}
.product .p-ov-tag{display:inline-block;font-family:var(--corm);font-weight:700;
  letter-spacing:.22em;font-size:clamp(.72rem, .92vw, 1.17rem);color:var(--green-1);
  background:var(--accent);padding:.45em 1.2em;border-radius:2px;}
.product .p-ov-tag.alt{background:var(--accent-blue);}
.product .p-ov-name{font-family:var(--serif);color:var(--white);font-weight:500;
  font-size:clamp(1.5rem, 2.4vw, 3rem);letter-spacing:.05em;margin-top:26px;}
.product .p-ov-kana{
  font-family:var(--sans);
  color:var(--gray-dim);
  font-size:clamp(.8rem, 1.02vw, 1.29rem);
  letter-spacing:.14em;
  margin-top:8px;
}
.product .p-ov-role{color:var(--gray-dim);font-size:clamp(.85rem, 1.12vw, 1.425rem);letter-spacing:.1em;margin-top:6px;}
.product .p-ov-desc{color:var(--gray);font-size:clamp(.9rem, 1.2vw, 1.47rem);line-height:1.95;letter-spacing:.04em;margin-top:22px;}
.product .p-ov-link{display:inline-flex;align-items:center;gap:1em;margin-top:28px;
  font-family:var(--serif);color:var(--accent);font-size:clamp(.95rem, 1.18vw, 1.5rem);letter-spacing:.08em;font-weight:600;}
.product .p-ov-card:last-child .p-ov-link{color:var(--accent-blue);}
.product .p-ov-link .arrow{transition:.35s;}
.product .p-ov-card:hover .p-ov-link .arrow{transform:translateX(6px);}
/* ---- SECTION 03/04 BLOCK 共通 ---- */
.product .p-block{background:var(--bg-grad);padding:140px 0;position:relative;overflow:hidden;}
.product .p-block.alt-bg{background:linear-gradient(180deg,#0a0f0f 0%,#0d1313 60%,#0a0f0f 100%);}
.product .p-block-head{display:flex;align-items:center;gap:34px;margin-bottom:38px;}
.product .p-block-tag{font-family:var(--corm);color:var(--accent);letter-spacing:.24em;
  font-weight:600;font-size:clamp(.8rem, 1.02vw, 1.29rem);text-transform:uppercase;}
.product .p-block-tag.blue{color:var(--accent-blue);}
.product .p-block-title{font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(1.9rem, 3.6vw, 4.35rem);letter-spacing:.07em;margin-top:8px;}
.product .p-block-lead{color:var(--gray);font-size:clamp(.96rem, 1.4vw, 1.71rem);line-height:2;letter-spacing:.06em;
  max-width:min(1200px, 90vw);margin-bottom:64px;}
.product .p-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;}
.product .p-card{background:var(--panel);border:1px solid var(--panel-line);overflow:hidden;transition:.4s;}
.product .p-card:hover{border-color:rgba(0,198,163,.32);transform:translateY(-4px);}
.product .p-card-media{position:relative;height:clamp(140px, 11.5vw, 220px);overflow:hidden;
  background:linear-gradient(135deg,#0f1817 0%,#16211f 100%);}
.product .p-card-media img{width:100%;height:100%;object-fit:cover;}
.product .p-card-body{padding:34px 34px 40px;}
.product .p-card-title{font-family:var(--serif);color:var(--white);font-weight:500;
  font-size:clamp(1.2rem, 2.1vw, 2.55rem);letter-spacing:.1em;margin-bottom:24px;}
.product .p-spec{margin-bottom:20px;}
.product .p-spec-label{font-family:var(--corm);color:var(--accent);font-weight:600;
  letter-spacing:.16em;font-size:clamp(.72rem, .95vw, 1.2rem);text-transform:uppercase;margin-bottom:6px;}
.product .p-spec-val{color:var(--gray);font-size:clamp(.9rem, 1.2vw, 1.5rem);line-height:1.85;letter-spacing:.04em;}
.product .p-note{margin-top:20px;color:var(--gray-dim);font-size:clamp(.78rem, .98vw, 1.23rem);line-height:1.7;
  letter-spacing:.03em;padding-top:16px;border-top:1px solid var(--line-soft);}
.product .p-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--line);margin-bottom:96px;}
.product .p-feature{padding:44px 40px;border-left:1px solid var(--line-soft);}
.product .p-feature:first-child{border-left:none;}
.product .p-feature-num{display:inline-block;font-family:var(--serif);color:var(--white);
  font-weight:500;font-size:clamp(1.2rem, 1.8vw, 2.25rem);letter-spacing:.14em;margin-bottom:18px;
  padding-bottom:10px;border-bottom:2px solid var(--accent-blue);}
.product .p-feature-desc{color:var(--gray);font-size:clamp(.9rem, 1.25vw, 1.53rem);line-height:1.95;letter-spacing:.04em;}
.product .p-targets-title{font-family:var(--serif);color:var(--white);font-weight:500;
  font-size:clamp(1.2rem, 2.4vw, 3rem);letter-spacing:.3em;text-align:center;margin-bottom:52px;}
.product .p-target-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:0;}
.product .p-target-media{position:relative;height:clamp(110px, 8.85vw, 170px);overflow:hidden;margin-bottom:20px;
  background:linear-gradient(135deg,#0f1817 0%,#16211f 100%);border:1px solid var(--panel-line);}
.product .p-target-media img{width:100%;height:100%;object-fit:cover;transition:.5s;}
.product .p-target-grid li{text-align:center;}
.product .p-target-grid li:hover .p-target-media img{transform:scale(1.06);}
.product .p-target-name{font-family:var(--serif);color:var(--white);font-weight:500;
  font-size:clamp(.9rem, 1.35vw, 1.725rem);letter-spacing:.08em;line-height:1.5;}
/* ---- 仮イメージ（プレースホルダ）---- */
.product .p-card-ph-label{display:none;}
.product .is-ph img{display:none;}
.product .is-ph{position:relative;}
.product .is-ph::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,198,163,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,198,163,.10) 1px,transparent 1px);
  background-size:26px 26px;}
.product .is-ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(0,198,163,.18),transparent 60%);}
.product .is-ph .p-card-ph-label{display:block;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);z-index:2;
  font-family:var(--corm);letter-spacing:.28em;font-weight:600;
  color:var(--accent);font-size:clamp(.9rem, 1.18vw, 1.5rem);
  padding:.55em 1.3em;border:1px solid rgba(0,198,163,.4);border-radius:2px;
  background:rgba(13,19,19,.5);}
/* ---- SECTION 05 CTA（アイボリー背景 × 黒文字）---- */
.product .p-cta{background:var(--cta-ivory);padding:150px 0;text-align:center;position:relative;overflow:hidden;}
.product .p-cta::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(rgba(0,120,100,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,120,100,.06) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 72%);}
.product .p-cta-inner{position:relative;z-index:2;}
.product .p-cta-title{font-family:var(--serif);color:var(--cta-ink);font-weight:500;
  font-size:clamp(1.7rem, 3.3vw, 4.05rem);line-height:1.5;letter-spacing:.07em;}
.product .p-cta-sub{color:#4a544f;font-size:clamp(.8rem, 1.3vw, 1.65rem);letter-spacing:.06em;margin-top:24px;}
.product .p-cta-btns{display:flex;gap:20px;justify-content:center;margin-top:48px;flex-wrap:wrap;}
.product .p-cta .btn-solid{background:var(--accent);color:var(--green-1);}
.product .p-cta .btn-solid:hover{background:#2fe0be;}
.product .p-cta .btn-outline{background:var(--green-3);color:var(--white);border:1px solid var(--green-3);}
.product .p-cta .btn-outline:hover{background:#0f231e;border-color:#0f231e;color:var(--accent);transform:translateY(-2px);}
/* ---- RESPONSIVE（product）---- */
@media (max-width:1024px){
  .product .p-hero-bg{width:520px;}
  .product .p-target-grid{grid-template-columns:repeat(2,1fr);gap:32px 26px;}
}
@media (max-width:820px){
  .product .p-hero-title{font-size:3.4rem;}
  .product .p-ov-grid{grid-template-columns:1fr;}
  .product .p-card-grid{grid-template-columns:1fr;}
  .product .p-feature-grid{grid-template-columns:1fr;}
  .product .p-feature{border-left:none;border-top:1px solid var(--line-soft);}
  .product .p-feature:first-child{border-top:none;}
}
@media (max-width:640px){
.product .logo img{
height:20px;
width:auto;
transform:none;
display:block;
}
.product .nav-toggle{
padding:0;
align-self:center;
}
.product .nav-toggle span{
width:28px;
transform:none;
}

body.product .header-inner{
  padding:10px 12px;
  align-items:center;
}

body.product .logo img{
  height:20px;
  width:auto;
  transform:none;
  display:block;
}

body.product .site-header{
  background:var(--bg-grad);
  border-bottom:1px solid var(--line-soft);
}

body.product .nav-toggle{
  --bar-gap:9px;
  padding:0;
  align-self:center;
}

body.product .nav-toggle span{
  width:28px;
  transform:none;
}
  /* ヒーロー：背景演出をやめて、テキスト→図の順で通常表示する形に変更 */
.product .p-hero{
position:relative;
display:block; /* flexとorderをやめる */
min-height:auto;
overflow:hidden;
padding-bottom:48px;
}
.product .p-hero-inner{
  position:relative;
  z-index:10;
  padding:80px 24px 0;   /* 96px → 56px */
}
  /* 画像は絶対配置。位置と大きさのツマミ */
.product .p-hero-bg{
position:absolute;
top:220px; /* ← 画像の縦位置ツマミ */
left:50%;
transform:translateX(-53%);
width:100%;
height:auto;
margin-top:0;
opacity:1;
z-index:0;
display:flex;
justify-content:center;
}
  .product .p-hero-bg::after{
    display:none;     }           /* ←背景演出用のグラデーションは不要なので消す */

  .product .p-hero-diagram{
width:100%;
max-width:300px;
margin:0;
}
.product .p-hero-diagram img{
width:100%;
height:auto;
display:block;
}
.product .pkt{font-size:10px;}
.product .p-hero-eyebrow{
font-size:.8rem;
letter-spacing:.18em;
line-height:1.4;
margin:0 0 6px;
padding-top:60px;
}
.product .p-hero .reveal{
  opacity:1;
  transform:none;
  transition:none;
}

 /* ★画像を置くための空きスペースを実体として確保 */
.product .p-hero-inner .rule{
width:100%;
height:280px; /* ← セクション全体の高さツマミ */
background:transparent;
margin:16px 0 0;
}

.product .p-hero-lead{
font-size:.98rem;
margin-top:0;
}

  .product .p-block{padding:96px 0;}
  .product .p-overview{padding:90px 0;}
  .product .p-block-head{gap:20px;}
  .product .p-index{font-size:3rem;}
  .product .p-target-grid{grid-template-columns:1fr 1fr;gap:22px 18px;}
  .product .p-cta-btns .btn{width:100%;}
  .product .p-cta{padding:48px 0 90px;}
  .product .p-feat-num{font-size:2rem;}
  .product .p-sec-eyebrow,
.product .p-block-tag{
  font-size:.8rem;
  letter-spacing:.18em;
  line-height:1.4;
}
.product .p-note{font-size:.78rem;line-height:1.8;}
.product .p-spec-label{font-size:.72rem;letter-spacing:.12em;}

.product .container{padding:0 24px;}
.product .p-ov-card{padding:28px 22px;}
.product .p-ov-tag{font-size:.72rem;letter-spacing:.18em;padding:.4em 1em;}
.product .p-ov-name{font-size:1.5rem;margin-top:18px;}
.product .p-ov-kana{font-size:.8rem;letter-spacing:.08em;margin-top:6px;}
.product .p-ov-link{font-size:.95rem;margin-top:20px;}
.product .p-ov-grid{gap:20px;}

.product .p-feature{padding:28px 0;}
.product .p-feature-num{font-size:1.2rem;margin-bottom:14px;padding-bottom:8px;}

.product .p-target-name{
  font-size:.9rem;
  line-height:1.4;
}
.product .p-cta-title{
  font-size:1.7rem;
}

.product .p-cta-sub{
  font-size:.8rem;
}

.product .footer-inner{
  gap:6px;
}
.product .site-footer{
  padding:24px 0;
}

.product .footer-logo img{
  width:180px;
}

.product .footer-inner{
  gap:6px;
}

.product .footer-copy{
  font-size:.7rem;
  line-height:1.5;
}

  /* H1 */
  .product .p-hero-title{ font-size:2.7rem;}

  /* H2 */
  .product .p-sec-title,
  .product .p-block-title,
  .product .p-cta-title{ font-size:1.9rem; }

  /* H3 */
  .product .p-feat-title,
  .product .p-card-title,
  .product .p-targets-title{ font-size:1.2rem; }

  /* 通常テキスト(本文・リード文) */
  .product .p-hero-lead{font-size:.98rem;}
  .product .p-block-lead{font-size:.96rem;}
  .product .p-feat-desc{font-size:.88rem;}
  .product .p-card-title,
  .product .p-spec-val,
  .product .p-feature-desc{font-size:.9rem;}

  .product .p-block{padding:64px 0;}      /* ← 96px → 64px */
  .product .p-overview{padding:64px 0;}   /* ← 90px → 64px */
  .product .p-features{padding:64px 0;}   /* ←まだ未調整だったので追加 */
  .product .p-cta{padding:48px 0 64px;}   /* ← 90px → 64px(下側) */
}
/* =============================================================
   NEWS PAGE（news.html）  ※style.css の末尾に追記してください
   すべて .news-page スコープ内なので LP / product には影響しません
   ============================================================= */

/* ---- SECTION 01 PAGE HERO ---- */
.news-page .n-hero{
  position:relative;background:var(--bg-grad);
  padding:140px 0 90px;overflow:hidden;
}
.news-page .n-hero::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(0,198,163,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,198,163,.06) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 20% 40%,#000 0%,transparent 70%);
  mask-image:radial-gradient(circle at 20% 40%,#000 0%,transparent 70%);
}
.news-page .n-hero-inner{position:relative;z-index:2;}
.news-page .n-hero-eyebrow{
  font-family:var(--corm);color:var(--accent);
  letter-spacing:.34em;font-weight:600;font-size:clamp(.8rem, 1.05vw, 1.35rem);text-transform:uppercase;
}
.news-page .n-hero-title{
  font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(2.2rem, 4.3vw, 5.25rem);letter-spacing:.1em;margin-top:18px;
}
.news-page .n-hero-lead{
  color:var(--gray);font-size:clamp(.95rem, 1.4vw, 1.68rem);line-height:2;letter-spacing:.06em;
}

/* ---- SECTION 02 LIST ---- */
.news-page .n-body{background:var(--bg-grad);padding:0 0 140px;}

/* カテゴリ絞り込み */
.news-page .n-filter{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  padding:0;margin:0 0 56px;
}
.news-page .n-filter a{
  display:inline-block;font-family:var(--sans);font-weight:400;
  font-size:clamp(.76rem, 1vw, 1.26rem);letter-spacing:.08em;color:var(--gray);
  border:1px solid var(--line);border-radius:2px;padding:.55em 1.5em;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.news-page .n-filter a:hover{color:var(--accent);border-color:var(--accent);}
.news-page .n-filter .is-active a{
  color:var(--green-1);background:var(--accent);border-color:var(--accent);font-weight:500;
}

/* 一覧 */
.news-page .n-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);}
.news-page .n-item{list-style:none;border-bottom:1px solid var(--line-soft);}

.news-page .n-row{
  display:grid;grid-template-columns:minmax(200px, 22vw) 1fr 40px;
  align-items:center;gap:0 28px;
  padding:32px 8px;transition:background .35s ease,padding .35s ease;
}
.news-page .n-row:hover{background:rgba(0,198,163,.05);padding-inline:20px 8px;}

.news-page .n-meta{display:flex;align-items:center;gap:16px;min-width:0;}
.news-page .n-date{
  font-family:var(--corm);color:var(--gray-dim);
  font-size:clamp(.85rem, 1.18vw, 1.5rem);letter-spacing:.05em;flex:0 0 auto;
}
.news-page .n-cat{
  flex:0 0 auto;font-family:var(--sans);font-size:clamp(.66rem, .85vw, 1.08rem);font-weight:500;
  letter-spacing:.06em;line-height:1;white-space:nowrap;
  border:1px solid currentColor;border-radius:2px;padding:.5em .9em;
}
/* カテゴリ別カラー */
.news-page .cat-press  {color:var(--accent);}
.news-page .cat-product{color:#9fd356;}
.news-page .cat-event  {color:#ffe14d;}
.news-page .cat-media  {color:#7fb8d8;}

.news-page .n-title{
  font-family:var(--serif);font-weight:400;color:var(--white);
  font-size:clamp(.95rem, 1.28vw, 1.62rem);line-height:1.7;letter-spacing:.04em;min-width:0;
  transition:color .3s ease;
}
.news-page .n-row:hover .n-title{color:var(--accent-lite);}

.news-page .n-arrow{
  font-family:var(--sans);color:var(--accent);
  justify-self:end;transition:transform .3s ease;
}
.news-page .n-row:hover .n-arrow{transform:translateX(6px);}

/* ---- ページャー ---- */
.news-page .n-pager{
  display:flex;justify-content:center;align-items:center;gap:12px;margin-top:64px;
}
.news-page .n-page{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-width:46px;height:46px;padding:0 1em;
  font-family:var(--corm);font-weight:600;font-size:clamp(.86rem, 1.12vw, 1.425rem);letter-spacing:.08em;
  color:var(--gray);border:1px solid var(--line);border-radius:2px;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.news-page a.n-page:hover{color:var(--accent);border-color:var(--accent);}
.news-page .n-page.is-current{
  color:var(--green-1);background:var(--accent);border-color:var(--accent);
}
.news-page .n-page-next .arrow{font-family:var(--sans);transition:transform .3s ease;}
.news-page .n-page-next:hover .arrow{transform:translateX(4px);}

/* ---- SECTION 03 CTA ---- */
.news-page .n-cta{
  background:linear-gradient(180deg,var(--ivory) 0%,var(--ivory-2) 100%);
  padding:96px 0;text-align:center;
}
.news-page .n-cta-title{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.7rem, 2.8vw, 3.3rem);line-height:1.5;letter-spacing:.06em;
}
.news-page .n-cta-title .accent{
  background:none;-webkit-text-fill-color:initial;color:var(--accent-ink);
}
.news-page .n-cta-sub{color:var(--ink-soft);font-size:clamp(.9rem, 1.18vw, 1.5rem);letter-spacing:.05em;margin-top:20px;}
.news-page .n-cta-btns{
  display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:44px;
}
.news-page .n-cta .btn-solid{background:var(--accent-ink);color:#fff;}
.news-page .n-cta .btn-solid:hover{background:#0a9e82;}
.news-page .n-cta .btn-outline{border:1px solid var(--accent-ink);color:var(--ink);}
.news-page .n-cta .btn-outline:hover{background:rgba(10,158,130,.1);}

/* ---- RESPONSIVE ---- */
@media (max-width:820px){
  .news-page .n-row{grid-template-columns:200px 1fr 32px;gap:0 20px;}
  .news-page .n-hero-title{font-size:2.8rem;}
}

@media (max-width:640px){
  .news-page .n-hero{padding:60px 0 60px;}
  .news-page .n-hero-title{font-size:2.2rem;}
  .news-page .n-hero-lead{font-size:.95rem;}
  .news-page .n-body{padding-bottom:80px;}

  .news-page .n-filter{gap:8px;margin-bottom:36px;}
  .news-page .n-filter a{font-size:.76rem;padding:.5em 1.2em;}

  /* 日付・カテゴリを上段、タイトルを下段に */
  .news-page .n-row{
    grid-template-columns:1fr auto;
    gap:10px 12px;
    padding:24px 4px;
  }
  .news-page .n-row:hover{padding-inline:4px;}
  .news-page .n-meta{grid-column:1 / -1;gap:12px;}
  .news-page .n-date{font-size:.85rem;}
  .news-page .n-cat{font-size:.66rem;padding:.45em .8em;}
  .news-page .n-title{font-size:.95rem;}
  .news-page .n-arrow{align-self:end;}

  .news-page .n-pager{margin-top:44px;gap:8px;}
  .news-page .n-page{min-width:40px;height:40px;font-size:.86rem;}

  .news-page .n-cta{padding:64px 0;}
  .news-page .n-cta-title{font-size:1.7rem;}
  .news-page .n-cta-sub{font-size:.9rem;}
  .news-page .n-cta-btns .btn{width:100%;}
.n-hero-eyebrow{
font-size:.7rem !important;
letter-spacing:.08em !important;
line-height:1.3;
}
}
/* =============================================================
   NEWS DETAIL（news-detail.html）
   ※ news-add.css の後ろに追記してください
   .news-single スコープなので他ページには影響しません
   ============================================================= */

.news-single .n-article{background:var(--bg-grad);padding:140px 0 120px;}
.news-single .n-article-inner{max-width:min(1200px, 92vw);}

/* ---- パンくず ---- */
.news-single .n-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:clamp(.74rem, .98vw, 1.23rem);letter-spacing:.05em;color:var(--gray-dim);margin-bottom:44px;
}
.news-single .n-crumb a{transition:color .3s ease;}
.news-single .n-crumb a:hover{color:var(--accent);}
.news-single .n-crumb-sep{color:var(--gray-dim);opacity:.5;}
.news-single .n-crumb-current{
  color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}

/* ---- 記事ヘッダー ---- */
.news-single .n-art-head{padding-bottom:40px;border-bottom:1px solid var(--line);}
.news-single .n-art-head .n-meta{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.news-single .n-art-title{
  font-family:var(--serif);font-weight:500;color:var(--white);
  font-size:clamp(1.7rem, 2.9vw, 3.5rem);line-height:1.55;letter-spacing:.05em;
}
.news-single .n-art-sub{
  font-family:var(--serif);font-weight:400;color:var(--accent);
  font-size:clamp(1.02rem, 1.6vw, 1.95rem);line-height:1.7;letter-spacing:.08em;
  margin-top:18px;
}
.news-single .n-art-lead{
  color:var(--gray);font-size:clamp(.9rem, 1.35vw, 1.62rem);line-height:2;letter-spacing:.05em;margin-top:28px;
}

/* ---- アイキャッチ ---- */
.news-single .n-art-eyecatch{margin:56px 0 0;}
.news-single .n-art-eyecatch img{
  width:100%;
  max-width:800px;
  height:auto;
  margin:0 auto;
}

/* ---- 本文 ---- */
.news-single .n-art-body{
  color:var(--gray);font-size:clamp(.85rem, 1.25vw, 1.5rem);line-height:2.1;letter-spacing:.04em;margin-top:56px;
}
.news-single .n-art-body > * + *{margin-top:1.8em;}

.news-single .n-art-body h2{
  font-family:var(--serif);color:var(--white);font-weight:500;
  font-size:clamp(1.25rem, 1.9vw, 2.4rem);line-height:1.6;letter-spacing:.07em;
  margin-top:3em;padding-left:.7em;border-left:3px solid var(--accent);
}
.news-single .n-art-body h3{
  font-family:var(--serif);color:var(--white);font-weight:500;
  font-size:clamp(1.05rem, 1.45vw, 1.83rem);line-height:1.7;letter-spacing:.06em;
  margin-top:2.6em;padding-bottom:.5em;border-bottom:1px solid var(--line-soft);
}

.news-single .n-art-body a{
  color:var(--accent);border-bottom:1px solid rgba(0,198,163,.4);
  transition:color .3s ease,border-color .3s ease;
}
.news-single .n-art-body a:hover{color:var(--accent-lite);border-color:var(--accent-lite);}
.news-single .n-art-body strong{color:var(--white);font-weight:500;}
.news-single .n-art-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.32em;
  color:var(--accent-lite);background:rgba(0,198,163,.1);
  padding:.15em .5em;border-radius:2px;
}

.news-single .n-art-body ul,
.news-single .n-art-body ol{padding-left:1.5em;}
.news-single .n-art-body li{margin-top:.6em;}
.news-single .n-art-body ul li::marker{color:var(--accent);}
.news-single .n-art-body ol li::marker{color:var(--accent);font-family:var(--corm);font-weight:600;font-size:1.875em;}
.news-single .n-art-body .ta-right{text-align:right;}

.news-single .n-art-body blockquote{
  border-left:2px solid var(--accent);background:rgba(0,198,163,.05);
  padding:28px 32px;
}
.news-single .n-art-body blockquote p{margin:0;font-size:clamp(.85rem, 1.15vw, 1.47rem);}
.news-single .n-art-body blockquote cite{
  display:block;margin-top:14px;font-style:normal;
  font-size:clamp(.75rem, 1vw, 1.275rem);color:var(--gray-dim);letter-spacing:.06em;
}

/* 本文中の画像 */
.news-single .n-art-figure{margin:2.6em 0;}
.news-single .n-art-figure img{
  width:100%;height:auto;display:block;border:1px solid var(--line-soft);
}
.news-single figcaption{
  margin-top:12px;font-size:clamp(.72rem, .95vw, 1.2rem);color:var(--gray-dim);
  letter-spacing:.04em;line-height:1.7;text-align:left;
}

/* 定義リスト */
.news-single .n-art-dl{
  display:grid;grid-template-columns:minmax(180px, 20vw) 1fr;
  border-top:1px solid var(--line-soft);
}
.news-single .n-art-dl dt{
  font-family:var(--sans);font-weight:500;color:var(--white);
  font-size:clamp(.8rem, 1.08vw, 1.38rem);letter-spacing:.06em;
  padding:18px 16px 18px 0;border-bottom:1px solid var(--line-soft);
}
.news-single .n-art-dl dd{
  font-size:clamp(.85rem, 1.12vw, 1.425rem);color:var(--gray);margin:0;
  padding:18px 0;border-bottom:1px solid var(--line-soft);
}

.news-single .n-art-note{
  font-size:clamp(.75rem, .98vw, 1.23rem);color:var(--gray-dim);line-height:1.9;letter-spacing:.03em;
}

/* ---- 問い合わせ先ボックス ---- */
.news-single .n-art-contact{
  margin-top:72px;padding:32px 36px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
}
.news-single .n-art-contact-label{
  font-family:var(--corm);color:var(--accent);font-weight:600;
  font-size:clamp(.72rem, .95vw, 1.2rem);letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;
}
.news-single .n-art-contact-body{
  color:var(--gray);font-size:clamp(.86rem, 1.08vw, 1.38rem);line-height:2;letter-spacing:.04em;
}

/* ---- 前後の記事 ---- */
.news-single .n-art-nav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  margin-top:72px;padding-top:44px;border-top:1px solid var(--line);
}
.news-single .n-art-nav-item{display:block;min-width:0;transition:opacity .3s ease;}
.news-single .n-art-nav-item.next{text-align:right;}
.news-single .n-art-nav-item:hover{opacity:.75;}
.news-single .n-art-nav-label{
  display:block;font-family:var(--corm);color:var(--accent);
  font-size:clamp(.75rem, .98vw, 1.23rem);font-weight:600;letter-spacing:.14em;margin-bottom:8px;
}
.news-single .n-art-nav-label .arrow{font-family:var(--sans);display:inline-block;transition:transform .3s ease;}
.news-single .n-art-nav-item.prev:hover .arrow{transform:translateX(-4px);}
.news-single .n-art-nav-item.next:hover .arrow{transform:translateX(4px);}
.news-single .n-art-nav-title{
  display:block;font-family:var(--serif);color:var(--white);font-size:clamp(.85rem, 1.12vw, 1.425rem);
  line-height:1.6;letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.news-single .n-art-nav-index{
  flex:0 0 auto;font-family:var(--serif);font-size:clamp(.8rem, 1vw, 1.275rem);letter-spacing:.1em;
  color:var(--white);border:1px solid var(--accent);border-radius:2px;
  padding:.7em 1.6em;white-space:nowrap;transition:background .35s ease;
}
.news-single .n-art-nav-index:hover{background:rgba(0,198,163,.12);}

.story-images{
  display:flex;
  gap:20px;
  margin-top:30px;
  max-width:900px;
}

.story-images img{
  width:calc(50% - 10px);
  height:auto;
}

/* ---- RESPONSIVE ---- */
@media (max-width:640px){
  .news-single .n-article{padding:70px 0 72px;}
  .news-single .n-crumb{font-size:.74rem;gap:7px;margin-bottom:28px;}
  .news-single .n-crumb-current{display:inline;}

  .news-single .n-art-head .n-meta{gap:12px;margin-bottom:18px;}
  .news-single .n-art-title{font-size:1.7rem;line-height:1.6;}
  .news-single .n-art-sub{font-size:1.02rem;margin-top:12px;}
  .news-single .n-art-lead{font-size:.9rem;line-height:1.8;margin-top:16px;}

  .news-single .n-art-eyecatch{margin-top:36px;}
  .news-single .n-art-body{font-size:.85rem;line-height:1.9;margin-top:36px;}
  .news-single .n-art-body h2{font-size:1.25rem;margin-top:2.4em;}
  .news-single .n-art-body h3{font-size:1.05rem;margin-top:2em;}
  .news-single .n-art-body blockquote{padding:20px 22px;}

  .news-single .n-art-dl{grid-template-columns:1fr;}
  .news-single .n-art-dl dt{padding:16px 0 4px;border-bottom:none;}
  .news-single .n-art-dl dd{padding:0 0 16px;}

  .news-single .n-art-contact{margin-top:48px;padding:24px 20px;}
  .news-single .n-art-contact-body{font-size:.86rem;}

  .news-single .n-art-nav{
    grid-template-columns:1fr;gap:20px;margin-top:48px;padding-top:32px;
  }
  .news-single .n-art-nav-item.next{text-align:left;}
  .news-single .n-art-nav-index{
    order:3;justify-self:stretch;text-align:center;
  }
  .news-single .n-art-dl dt{
  font-size:.8rem;
  line-height:1.6;
}
.news-single .n-art-dl dd{
  font-size:.85rem;
  line-height:1.8;
}
  .story-images{
    flex-direction:column;
    gap:16px;
  }

  .story-images img{
    width:100%;
  }

/* ---- ヒーロー図の注意書き ---- */
.product .p-hero-diagram{
  position:relative;   /* 既に指定済みなら不要 */
}
}
  .story-images img{
    width:100%;
  }

/* ---- ヒーロー図の注意書き ---- */
.product .hero-image-note{
  position:relative;
  z-index:3;
  display:block;
  margin:-1% auto 0;
  width:100%;
  text-align:right;
  padding-right:6%;
  line-height:1.5;
  font-size:clamp(.7rem, .85vw, 1.05rem);
  color:var(--gray-dim);
}

@media (max-width:640px){
  .product .p-hero-bg{
    flex-direction:column;
    align-items:center;
  }

  .product .hero-image-note{
    margin:8px 0 0;
    padding-right:0;
    width:100%;
    max-width:300px;
    text-align:center;
    white-space:normal;
    font-size:.7rem;
  }

  .product .p-hero-lead br:not(.sp-only){
    display:none;
  }

  .product .p-hero-lead{
    letter-spacing:.03em;
    margin-top:28px;
  }

}