:root{
  --products-bg:#f6f7f9;
  --products-panel:#ffffff;
  --products-line:rgba(24,33,47,.10);
  --products-line-strong:rgba(24,33,47,.16);
  --products-accent:#f26a21;
  --products-text:#18212f;
  --products-muted:#556171;
  --products-shadow:0 18px 42px rgba(18,24,39,.08);
}

.products-page{background:var(--products-bg); color:var(--products-text);}
.products-main{padding-bottom:96px;}
.products-page img{display:block; max-width:100%; height:auto;}

.products-hero{position:relative; color:#fff; overflow:hidden; min-height:min(76vh, 760px); display:grid; align-items:end; background:#0f1723;}
.products-hero__media,
.products-hero__overlay{position:absolute; inset:0;}
.products-hero__media img{width:100%; height:100%; object-fit:cover;}
.products-hero__overlay{background:linear-gradient(90deg, rgba(18,24,39,.72), rgba(18,24,39,.32) 62%, rgba(18,24,39,.18));}
.products-hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px, 340px); gap:32px; align-items:end; padding:clamp(96px, 14vw, 148px) 0 56px;}
.products-hero__copy h1{margin:0 0 18px; font-size:clamp(2.4rem, 5.2vw, 4.8rem); line-height:1.04; letter-spacing:.05em;}
.products-hero__copy p{margin:0; max-width:720px; font-size:clamp(1rem, 1.4vw, 1.12rem); line-height:1.95; color:rgba(255,255,255,.88);}
.products-eyebrow,.products-hero__label{display:inline-flex; align-items:center; margin:0 0 18px; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:rgba(255,255,255,.90);}
.products-hero__panel{padding:22px 24px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); backdrop-filter:blur(12px);}
.products-hero__panel ul{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:12px;}
.products-hero__panel li{padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.14);}
.products-hero__panel li:last-child{padding-bottom:0; border-bottom:none;}


.products-section{padding:76px 0;}
.products-section--details{padding-top:20px;}
.products-sectionHead{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:end; margin-bottom:28px;}
.products-sectionHead h2{margin:0; font-size:clamp(1.8rem,3vw,2.5rem);}
.products-sectionHead p{margin:0; color:var(--products-muted); line-height:1.9;}

.products-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;}
.products-card{display:flex; flex-direction:column; min-height:100%; text-decoration:none; color:inherit; border:1px solid var(--products-line); background:#fff; box-shadow:0 8px 24px rgba(18,24,39,.05); transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;}
.products-card:hover{transform:translateY(-4px); border-color:rgba(242,106,33,.28); box-shadow:0 18px 34px rgba(18,24,39,.1);}
.products-card__media{aspect-ratio:4 / 3; position:relative; overflow:hidden; background:#eef1f4;}
.products-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.products-card:hover .products-card__media img{transform:scale(1.04);}
.products-card__media::after{content:""; position:absolute; inset:auto 0 0 0; height:42%; background:linear-gradient(180deg, transparent, rgba(18,24,39,.62));}
.products-card__media span{position:absolute; left:16px; bottom:14px; z-index:1; color:#fff; font-size:1.02rem; font-weight:700; letter-spacing:.02em;}
.products-card__body{padding:18px; display:grid; gap:12px; flex:1;}
.products-card__eyebrow{margin:0; color:rgba(24,33,47,.54); font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;}
.products-card__body p:last-of-type{margin:0; color:var(--products-muted); font-size:.95rem; line-height:1.8;}
.products-card__action{margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--products-text); font-weight:700; font-size:.92rem;}
.products-card__action::after{content:"→"; color:var(--products-accent); transition:transform .25s ease;}
.products-card:hover .products-card__action::after{transform:translateX(4px);}

.products-detailWrap{display:grid; gap:28px;}
.products-item{scroll-margin-top:144px; border:1px solid var(--products-line-strong); background:var(--products-panel); box-shadow:var(--products-shadow); padding:34px; display:grid; gap:28px;}
.products-item__header{padding-bottom:24px; border-bottom:1px solid var(--products-line);}
.products-item__intro{display:grid; gap:16px;}
.products-kicker{display:inline-flex; width:max-content; align-items:center; padding:7px 10px; border:1px solid rgba(242,106,33,.22); background:rgba(242,106,33,.06); color:#9a4b15; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
.products-item__titleRow{display:flex; align-items:end; justify-content:space-between; gap:16px;}
.products-item__en{margin:0 0 6px; color:rgba(24,33,47,.48); font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;}
.products-item h2{margin:0; font-size:clamp(1.8rem,3.1vw,2.5rem); line-height:1.08;}
.products-item__lead{margin:0; font-size:1.04rem; font-weight:700; line-height:1.8;}
.products-item__summary{display:grid; gap:8px; max-width:860px;}
.products-item__desc{margin:0; color:var(--products-muted); line-height:1.9;}
.products-back{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid rgba(24,33,47,.12); background:#fff; color:var(--products-text); font-size:.9rem; transition:.25s ease;}
.products-back:hover{border-color:rgba(242,106,33,.35); background:rgba(242,106,33,.05); color:var(--products-accent);}

.products-item__body{display:grid; gap:28px;}
.products-featureList{display:grid; gap:24px;}
.products-feature{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); gap:32px; align-items:stretch; background:transparent;}
.products-feature.is-reverse{grid-template-columns:minmax(320px,.92fr) minmax(0,1.08fr);}
.products-feature.is-reverse .products-feature__media{order:2;}
.products-feature.is-reverse .products-feature__body{order:1;}
.products-feature__media{position:relative; min-height:320px; background:#eef1f4; overflow:visible; display:flex; align-items:center; justify-content:center; padding:18px;}
.products-feature__media img{width:100%; height:100%; object-fit:contain; object-position:center;}
.products-feature__mainbox{
  position:relative;
  width:100%;
  height:100%;
  max-width:100%;
}
.products-feature__mainbox > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.products-feature__inset{position:absolute; right:-42px; bottom:-28px; width:min(30%,160px); background:#fff; border:6px solid #fff; box-shadow:0 18px 36px rgba(18,24,39,.14);}
.products-feature__inset img{aspect-ratio:1 / 1; object-fit:cover;}
.products-feature__body{display:grid; align-content:flex-start; gap:14px; padding:12px 0; background:transparent;}
.products-feature__body--wide{padding:0; max-width:760px;}
.products-feature--flow{grid-template-columns:1fr; gap:22px;}
.products-flowGrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
.products-flowGrid--usage{
  margin-top: 24px;
}
.products-flowItem{margin:0; display:grid; gap:12px;}
.products-flowItem__media{min-height:240px; border:1px solid var(--products-line); background:#f3f5f7; display:flex; align-items:center; justify-content:center; padding:18px;}
.products-flowItem__media img{width:100%; height:100%; object-fit:contain;}
.products-flowItem figcaption{margin:0; color:var(--products-muted); line-height:1.8; font-size:.95rem;}
.products-feature__label{margin:0; color:var(--products-accent); font-size:.8rem; letter-spacing:.12em; font-weight:800; text-transform:uppercase;}
.products-feature__body h3{margin:0; font-size:clamp(1.3rem,2vw,1.75rem); line-height:1.2;}
.products-feature__body p:last-child{margin:0; color:var(--products-muted); line-height:1.9;}

.products-usage{display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:24px; align-items:start; padding:28px; border:1px solid var(--products-line); background:#fbfbfc;}
.products-usage.is-single{grid-template-columns:minmax(280px,.72fr) minmax(0,1fr);}
.products-usage__head{display:grid; gap:12px; align-content:start;}
.products-usage__head h3{margin:0; font-size:clamp(1.25rem,2vw,1.65rem);}
.products-usage__head p:last-child{margin:0; color:var(--products-muted); line-height:1.9;}
.products-usage__gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
.products-usage.is-single .products-usage__gallery{grid-template-columns:1fr; max-width:620px;}
.products-usage__item{margin:0; min-height:220px; border:1px solid var(--products-line); background:#eef1f4; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:14px;}
.products-usage__item img{width:100%; height:100%; object-fit:contain; display:block;}


@media (max-width:1360px){
  .products-feature{
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    gap:28px;
  }
  .products-feature.is-reverse{
    grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);
    gap:28px;
  }
  .products-feature__media{
    min-height:290px;
    padding:16px;
  }
}

@media (max-width:1180px){
  .products-hero__inner{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);}
  .products-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .products-feature{
    grid-template-columns:minmax(0,1.22fr) minmax(260px,.78fr);
    gap:24px;
  }
  .products-feature.is-reverse{
    grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
    gap:24px;
  }
  .products-feature__media{
    min-height:260px;
    padding:14px;
  }
  .products-feature__inset{right:-64px; bottom:-24px; width:min(34%,220px);}
  .products-feature__body{padding-top:22px;}
}

@media (max-width:920px){
/* タブレット〜スマホ手前では、sub画像を横に逃がさず
     メイン画像の上で小さく重ねたまま維持する */
  .products-feature__media{
    min-height:240px;
    padding:12px;
  }
  .products-feature__inset{
    display:block;
    right:-42px;
    bottom:-28px;
    width:min(30%,160px);
    border-width:6px;
  }

  #atm-gasket .products-usage,
  #atm-gasket .products-usage.is-single{
    grid-template-columns:1fr;
  }

  #atm-gasket .products-flowGrid--usage{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #atm-gasket .products-flowGrid--usage .products-flowItem:last-child{
    grid-column:auto;
    max-width:none;
    margin:0;
  }
}

@media (max-width:767px){
  .products-feature,
  .products-feature.is-reverse{grid-template-columns:1fr;}
  .products-feature__body{order:1;}
  .products-feature__media{order:2;}
  .products-flowGrid{grid-template-columns:1fr;}
  .products-usage,
  .products-usage.is-single{grid-template-columns:1fr;}

  .products-main{padding-bottom:72px;}
  .products-section{padding:56px 0;}
  .products-hero__inner{padding:112px 0 34px; grid-template-columns:1fr; gap:24px;}
.products-sectionHead{grid-template-columns:1fr; gap:10px; margin-bottom:22px;}
  .products-grid{grid-template-columns:1fr; gap:14px;}
  .products-item{padding:20px; gap:22px; scroll-margin-top:110px;}
  .products-item__header{padding-bottom:18px;}
  .products-item__titleRow{display:grid; gap:14px;}
  .products-featureList{gap:18px;}
  .products-feature__media{
    height:220px;
    min-height:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
  }
  .products-feature__media img{width:100%; height:100%; object-fit:contain; object-position:center;}
  .products-feature__mainbox{
    position:relative;
    height:100%;
    width:fit-content;
    max-width:calc(100% - 36px);
    margin:0 auto;
  }
  .products-feature__mainbox > img{
    display:block;
    width:auto;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:center;
  }
  .products-feature__inset{
    display:block;
    right:-20px;
    bottom:-16px;
    width:min(26%,120px);
    border-width:5px;
  }
  .products-feature__body{padding:8px 0 0;}
  .products-flowItem__media{min-height:190px; padding:14px;}
  .products-usage{padding:20px; gap:18px;}
  .products-usage__gallery{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
  .products-usage__gallery figure{min-height:0; aspect-ratio:4 / 3;}
  .products-usage__text{gap:10px;}
  .products-usage__list{grid-template-columns:1fr;}
}


@media (max-width:560px){
  .products-feature__inset{display:none;}
}

/* product index removed */
#product-index{display:none !important;}