/* =====================================================
   Base scope reset
===================================================== */
#sti-advanced-oil { overflow: visible; position: relative; }
#sti-advanced-oil * { box-sizing: border-box; }


/* =====================================================
   Fade-in variants (accessibility-aware)
===================================================== */
.fade-in-up, .fade-in-right, .fade-in-left{
  opacity:0; transform: translateY(24px);
  transition: opacity .8s ease-out, transform .8s ease-out;
  transition-delay: var(--delay,0ms);
}
.fade-in-right{ transform: translateX(24px); }
.fade-in-left { transform: translateX(-24px); }
.fade-in-up.visible, .fade-in-right.visible, .fade-in-left.visible{ opacity:1; transform: translate(0,0); }
@media (prefers-reduced-motion: reduce){
  .fade-in-up, .fade-in-right, .fade-in-left{ opacity:1 !important; transform:none !important; transition:none !important; }
}


/* =====================================================
   KV (full-bleed visual)
===================================================== */
#section-kv { position: relative; }
#section-kv .photo { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
#section-kv picture,
#section-kv img,
#section-kv video { display: block; width: 100vw; height: auto; }

/* === KV下ボタン：位置＆サイズの最終調整（PC） === */
@media screen and (min-width:769px){
  /* 位置：上がり過ぎない可変オフセット。ここ1か所で高さを微調整 */
  #sti-advanced-oil #section-kv{
    position: relative;
    overflow: visible;
    --cta-offset: clamp(56px, 14vw, 96px);
    padding-bottom: 32px;
  }
  /* ボタンをKV内に絶対配置＆下端から var(--cta-offset) で上下調整 */
  #sti-advanced-oil #section-kv > .btn-wrap{
    position: absolute !important;
    inset: auto 0 var(--cta-offset) 0; /* left:0; right:0; bottom:var(--cta-offset) */
    width: 100%;
    transform: none;
    margin: 0 !important;
    text-align: center;   /* タイトル＆ボタンを中央揃え */
    z-index: 10;
  }
  /* #lineup へのスクロールズレ補正（固定ヘッダー分） */
  #sti-advanced-oil #lineup{ scroll-margin-top: 96px; }
}
@media screen and (max-width:920px){
  #section-kv{
    position: relative;
    overflow: visible;
    padding-bottom: clamp(56px, 14vw, 96px);
  }
  /* ここも同様にフル幅に */
  #section-kv > .btn-wrap{
    position: absolute;
    inset: auto 0 calc( clamp(36px, 8vw, 144px) + env(safe-area-inset-bottom, 0px) ) 0;
    width: 100%;
    transform: none;
    margin: 0;
    text-align: center;
    z-index: 10;
  }
}

/* === KV CTA 専用（文字白＆ホバーで透明化しない）=== */
#section-kv .btn-wrap .btn-ttl{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
#section-kv .btn-wrap .cv-btn.accent-org{
  color:#fff;                 /* 文字は常に白 */
  border-color: transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
#section-kv .btn-wrap .cv-btn.accent-org:hover,
#section-kv .btn-wrap .cv-btn.accent-org:focus-visible{
  opacity:1;
  filter: brightness(1.16) saturate(1.05); 
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

/* ===== SP（～768pxpx）：KV直下余白をさらに詰める ===== */
@media screen and (max-width:768px){
  /* ① KV 自体の下パディング（←ここが大きいと隙間が残ります） */
  #sti-advanced-oil #section-kv{
    /* 旧: clamp(36px, 10vw, 64px) など → さらにタイトに */
    padding-bottom: clamp(16px, 5vw, 28px) !important;
  }
  /* ② 導入セクション（共通CSSの .section { margin-top: var(--blockMg); } を打ち消し） */
  #sti-advanced-oil #section-adv-head.section{
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
  }
  /* ③ 内側ラップの上下も少しだけ */
  #sti-advanced-oil #section-adv-head.section > .inner-s-wrap{
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
}


/* =====================================================
   Advantage
===================================================== */

/* PCだけ：見出しは <br> の位置でのみ改行（それ以外は折り返さない） */
@media screen and (min-width:769px){
  #sti-advanced-oil .lp-txt-img-box .h4ttl{
    white-space: nowrap;       /* ← 自動折返しを無効化 */
  }
  #sti-advanced-oil .lp-txt-img-box .h4ttl br{
    display: inline;           /* （念のため）通常の改行として効かせる */
  }
}

/* ==== 区切り線：PCだけ / 短め / ゆっくり（昔の雰囲気） ==== */
@media (min-width:769px){
  /* 対象は .inr-bgc-box 内の “2つ目の <p>＝最初の .box-txt” */
  #sti-advanced-oil .inr-bgc-box > p.box-txt:nth-of-type(2){
    position: relative;
    margin-top: 24px;    /* 好みで微調整OK */
    padding-top: 0;      /* 線は外側のmarginで間を作る */
  }
  #sti-advanced-oil .inr-bgc-box > p.box-txt:nth-of-type(2)::before{
    content:"";
    display:block;
    width: 64px;
    height: 2px;
    background: var(--accentColor,#1971d4);
    border-radius: 2px;
    opacity: .3;
    margin: 0 0 24px 0;               /* 上下の余白（線→本文） */
    transform: scaleX(0);             /* 初期：幅ゼロ */
    transform-origin: 0 50%;          /* 左端から伸びる */
    transition: transform 2s cubic-bezier(.22,1,.3,1);
  }
  #sti-advanced-oil .inr-bgc-box > p.box-txt:nth-of-type(2).line-in::before{
    transform: scaleX(1);
  }
}
/* “動きを減らす”環境配慮（任意） */
@media (prefers-reduced-motion: reduce){
  #sti-advanced-oil .inr-bgc-box > p.box-txt:nth-of-type(2)::before{
    transform: none !important;
    transition: none !important;
  }
}
/* SP/タブレットでは非表示に（=PCだけ表示） */
@media screen and (max-width:768px){
  #sti-advanced-oil .inr-bgc-box > p.box-txt:nth-of-type(2)::before{ content:none !important; }
}


/* =====================================================
   Simple angled line decoration
===================================================== */
#sti-advanced-oil .deco{ display:inline-block; position:relative; }
#sti-advanced-oil .deco::before,
#sti-advanced-oil .deco::after{
  content:''; width:2px; height:25px; background-color: currentColor; position:absolute; top:20%;
}
#sti-advanced-oil .deco::before{ left:-10px; transform: rotate(-27deg); }
#sti-advanced-oil .deco::after{ right:-10px; transform: rotate(27deg); }
@media (max-width:768px){
  #sti-advanced-oil .deco::before, #sti-advanced-oil .deco::after{ height: clamp(20px,10vw,50px); }
}
#sti-advanced-oil .deco-inner{ padding-inline:1.6rem; display:inline-block; position:relative; }
#sti-advanced-oil .deco-inner::before,
#sti-advanced-oil .deco-inner::after{
  content:''; width:2px; height:32px; background-color: currentColor; position:absolute; top:0;
}
#sti-advanced-oil .deco-inner::before{ left:0px; transform: rotate(-27deg); }
#sti-advanced-oil .deco-inner::after{ right:0; transform: rotate(27deg); }
@media (max-width:768px){
  #sti-advanced-oil .deco-inner::before, #sti-advanced-oil .deco-inner::after{ height: clamp(27px,8vw,64px); }
}


/* =====================================================
   Movie head (label + rule line)
===================================================== */
#sti-advanced-oil .movie-head{
  display:flex; align-items:center; gap: clamp(12px,2vw,20px);
  margin: 0 0 clamp(14px,2.8vw,28px); position:relative;
}
#sti-advanced-oil .movie-head::after{ content:""; height:2px; background: var(--keyColor,#1D63B5); opacity:.85; flex:1 1 auto; }
#sti-advanced-oil .movie-head .wrap-label{
  margin:0; line-height:1; font-family: var(--ff-en,"Noto Sans",system-ui,sans-serif);
  font-weight:700; letter-spacing:.06em; color: var(--keyColor,#1D63B5);
  font-size: clamp(14px,1.6vw,24px);
}
#sti-advanced-oil .movie-head .wrap-label span{ display:inline-block; transform: translateY(.05em); }
#sti-advanced-oil .video_area.is-clickable{ cursor: pointer; }
@media (max-width:768px){
  #sti-advanced-oil .movie-head{ margin-bottom: clamp(10px,3.6vw,16px); gap: clamp(10px,3.6vw,14px); }
}


/* =====================================================
   Layout reversals
===================================================== */
@media screen and (max-width:768px){
  #sti-advanced-oil .lp-txt-img-box.rev{ grid-template-columns: 1fr !important; }
  #sti-advanced-oil .lp-txt-img-box.rev .txt-box{ order:0 !important; grid-column:auto !important; }
  #sti-advanced-oil .lp-txt-img-box.rev .img-box{ order:1 !important; grid-column:auto !important; }
}


/* =====================================================
   LINEUP — unified
      - Base glow effect + per-product color via data attributes
      - Common layout
      - SP two-column grid
===================================================== */
/* ラインアップの製品名＆リンクを中央寄せに */
#sti-advanced-oil .card-n-linkpanel .txt-box{ text-align:center; }
#sti-advanced-oil .card-n-linkpanel .prod-name-lg{
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 6px;
  line-height: 1.1;
}
/* common.min.css の arrow-link が全幅になるのを打ち消して確実に中央寄せ */
#sti-advanced-oil .card-n-linkpanel .txt-box .arrow-link.prod-name-lg{
  display: block;
  margin: 8px auto 6px;
  width: auto;
  padding: 0;
}
/* 「詳しく見る」 */
#sti-advanced-oil .card-n-linkpanel .txt-box .txt-link-open{
   display:inline-block; 
   position:relative;
   font-size: clamp(13px, 1.2vw, 16px);
   padding:4px 1.2em 4px 0.8em;  
 }
 #sti-advanced-oil .card-n-linkpanel .txt-box .txt-link-open .icn{
   position:absolute;                  /* これでアイコンは幅に乗らない */
   top:50%; right:0; transform:translateY(-50%);
   display:block;
 }

/* Common text layout (all oil_*) */
#sti-advanced-oil .cmn-card-list .item a[data-modal-type^="oil_"] .txt-box{ display:block; }
#sti-advanced-oil .cmn-card-list .item a[data-modal-type^="oil_"] .txt-box .lead-copy{ order:-1; }
#sti-advanced-oil .cmn-card-list .item a[data-modal-type^="oil_"] .txt-box .arrow-link.prod-name-lg{
  font-size: clamp(2.2rem,3vw,3.2rem) !important;
  font-weight: var(--fwBold); line-height: 1.2; margin-top: 8px; white-space: nowrap;
}
#sti-advanced-oil .cmn-card-list .item a[data-modal-type^="oil_"] .txt-box .txt-2l.txt-b.lead-copy{
  font-size: clamp(1.8rem,2.4vw,2.2rem) !important;
  line-height: 1.35; margin: 6px 0; letter-spacing: .02em;
}
/* SP text tweaks */
@media (max-width:768px){
  #sti-advanced-oil .cmn-card-list .item a[data-modal-type^="oil_"] .txt-box .txt-2l.txt-b.lead-copy{ font-size:1.4rem !important; line-height:1.45; }
  #sti-advanced-oil .cmn-card-list .item a[data-modal-type^="oil_"] .txt-box .arrow-link.prod-name-lg{
    font-size: clamp(2.0rem,6vw,2.8rem) !important; line-height:1.2;
  }
}

/* SP: 2-column grid */
@media (max-width:768px){
  #sti-advanced-oil .cmn-card-list.sp-card-2{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    column-gap:12px !important; row-gap:16px !important;
  }
  #sti-advanced-oil .cmn-card-list.sp-card-2 > .item{ width:auto !important; }
  #sti-advanced-oil .cmn-card-list.col-gap-40{ column-gap:12px !important; }
}


/* (Optional) First card specific text sizing — kept minimal */
#sti-advanced-oil .cmn-card-list .item:nth-child(1) .txt-box{ display:block; }
#sti-advanced-oil .cmn-card-list .item:nth-child(1) .txt-box .prod-name-lg{
  font-size: clamp(2.2rem,3vw,3.4rem); font-weight: var(--fwBold); line-height:1.15; margin-top:8px;
}
@media (max-width:768px){
  #sti-advanced-oil .cmn-card-list .item:nth-child(1) .txt-box .prod-name-lg{ font-size: clamp(2.2rem,6vw,3.0rem); }
}
@media (max-width:768px){
  #sti-advanced-oil .cmn-card-list .item:nth-child(1) .txt-box .lead-copy{
    font-size: clamp(1.6rem,4.2vw,1.9rem); line-height:1.4; margin:6px 0; letter-spacing:.02em;
  }
  #sti-advanced-oil .cmn-card-list .item:nth-child(1) .txt-box .prod-name-lg{
    font-size: clamp(2.0rem,6vw,2.8rem); line-height:1.2; margin-top:2px; white-space: nowrap;
  }
}


/* =====================================================
   Modal detail (PC stable / SP narrow)
===================================================== */
#sti-advanced-oil .lp-modal-box .img-wrap img{ max-width:70% !important; height:auto; margin:0 auto; display:block; }
#sti-advanced-oil .lp-modal-box .label-list{ display:block; }
#sti-advanced-oil .lp-modal-box .label-list > li{ margin:0 0 .75rem 0; }
#sti-advanced-oil .lp-modal-box .label-list dl{
  display:grid; grid-template-columns: auto 1fr; column-gap:.75rem; align-items:center;
}
@media (max-width:768px){ #sti-advanced-oil .modal-win .modal-win-main{ padding:32px 8px !important; } }

/* ==== モーダル：SPテーブル 横スクロール＋左列固定 ==== */
#sti-advanced-oil .lp-modal-box .sp-only.sp-scroll-notice{ margin:.5rem 0; }
#sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll{ width:100%; -webkit-overflow-scrolling: touch; }
/* SP（～768pxpx）：横スク＋内容幅テーブル＋左列固定 */
@media (max-width:768px){
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll{ overflow-x:auto !important; }
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll .table-nml{
    width:max-content !important; min-width:560px; border-collapse: collapse;
  }
  #sti-advanced-oil .table-wrap.sp-table-scroll.sp-w-l.sp-th-fixed .table-nml th[scope="row"],
  #sti-advanced-oil .table-wrap.sp-table-scroll.sp-w-l.sp-th-fixed .table-nml thead th:first-child{
    position: sticky; left:0; z-index:3; background:#fff; white-space:nowrap; box-shadow:4px 0 0 rgba(0,0,0,.05);
  }
  #sti-advanced-oil .table-wrap.sp-table-scroll.sp-w-l.sp-th-fixed .table-nml thead th:first-child{ background: var(--silverLight,#f0f3f5); }
  /* 列幅（SP） */
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll .table-nml col:nth-child(1){ min-width:56px; }   /* Test */
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll .table-nml col:nth-child(2){ min-width:112px; }  /* 測定方法 */
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll .table-nml col:nth-child(3){ min-width:112px; }  /* 単位 */
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll .table-nml col:nth-child(4){ min-width:84px; }   /* 数値 */
}
/* 1列目（行見出し）は左に戻す */
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm tbody th { text-align: left; }
/* ヘッダー：2〜4列目を中央揃え */
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm thead th:nth-child(2),
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm thead th:nth-child(3),
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm thead th:nth-child(4) {
  text-align: center;
}
/* 本文：2〜4列目（測定方法／単位／数値）を中央揃え */
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm tbody td:nth-child(2),
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm tbody td:nth-child(3),
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm tbody td:nth-child(4) {
  text-align: center;
}
/* 製造元のセルだけは左揃えを強制 */
#sti-advanced-oil .lp-modal-box .table-nml.ver-sm tbody td.maker-wide {
  text-align: left !important;
}
/* PC（768px～）：100%幅・固定レイアウトへ戻す */
@media screen and (min-width:769px){
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll{ overflow-x:visible !important; }
  #sti-advanced-oil .lp-modal-box .table-wrap.sp-table-scroll .table-nml{
    width:100% !important; min-width:auto !important; table-layout: fixed;
  }
  #sti-advanced-oil .lp-modal-box .table-nml col:nth-child(1){ width:22% !important; }
  #sti-advanced-oil .lp-modal-box .table-nml col:nth-child(2),
  #sti-advanced-oil .lp-modal-box .table-nml col:nth-child(3),
  #sti-advanced-oil .lp-modal-box .table-nml col:nth-child(4){ width:26% !important; }
  #sti-advanced-oil .table-wrap.sp-table-scroll.sp-w-l.sp-th-fixed .table-nml th[scope="row"],
  #sti-advanced-oil .table-wrap.sp-table-scroll.sp-w-l.sp-th-fixed .table-nml thead th:first-child{ position: static; box-shadow:none; }
}
#sti-advanced-oil .lp-modal-box .table-nml td.maker-wide{ white-space: normal; }

/* === モーダル見出し：蛍光ペン風アンダーライン & キーカラー === */
#sti-advanced-oil .lp-modal-box[data-accent="teal"]{  --accent-soft: rgba(0,195,205,.30); } /* 0W-16 */
#sti-advanced-oil .lp-modal-box[data-accent="green"]{ --accent-soft: rgba(22,197,20,.30);  } /* 0W-20 */
#sti-advanced-oil .lp-modal-box[data-accent="blue"]{  --accent-soft: rgba(0,106,255,.30);  } /* 0W-30 */
#sti-advanced-oil .lp-modal-box[data-accent="red"]{   --accent-soft: rgba(255,0,0,.32);    } /* 5W-40 */

#sti-advanced-oil .lp-modal-box .h4ttl.center{
  position:relative; display:block; width:fit-content; margin:0 auto; text-align:center;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  background-position: 0 85%; background-repeat: no-repeat; background-size: 100% .45em;
  padding-bottom: .05em;
}
@media (max-width:768px){ #sti-advanced-oil .lp-modal-box .h4ttl.center{ background-size: 100% .40em; } }
#sti-advanced-oil .lp-modal-box .catch-1col{ text-align:center; margin:12px auto 20px; max-width:100%; }
#sti-advanced-oil .lp-modal-box .catch-1col .h3ttl.key-color{ display:inline-block; margin:.25rem auto; line-height:1.5; }
@media (max-width:768px){
  #sti-advanced-oil .lp-modal-box .catch-1col{ margin:8px auto 14px; }
  #sti-advanced-oil .lp-modal-box .catch-1col .h3ttl.key-color{ line-height:1.45; }
}

/* 見出し（h5） */
#sti-advanced-oil .h5ttl.heading-h5{
  padding: .5em .8em;
  border-left: 5px solid var(--accentColor);
  line-height: 1.3;
}

/* グラフ用のアスペクト比枠：PC=16:9 / SP=4:3 */
#sti-advanced-oil .graph-figure{ aspect-ratio:16/9; }
@media (max-width:768px){ #sti-advanced-oil .graph-figure{ aspect-ratio:4/3; } }
#sti-advanced-oil .graph-figure picture,
#sti-advanced-oil .graph-figure img{ width:100%; height:100%; display:block; object-fit:contain; }