@charset "utf-8";
.menu li:nth-of-type(5){background-color: #004596;}

:root {
  --bg: #0b0c0e;
  --panel-bg: #111317;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --accent: #7dc4ff;
}
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: 16px; padding: 16px; align-items: flex-start; }
.figure-wrap { position: sticky; top: 16px; border-radius: 12px; /*overflow: hidden;*/}
.diagram { width: 100%; height: auto; display: block; }
.outlineHeader{
  border: #999 1px solid;
  text-align: center;
  padding: 7px 1vw;
  margin-bottom: 10px;
  display: inline-block;
}
/* ホットスポット表示 */
.hotspotC, .hotspotS { cursor: pointer; }
.hotspotC .dot, .hotspotS .dot { opacity: .95; }
.hotspotC .ring, .hotspotS .ring { opacity: 0; }
.hotspotC:hover .ring,
.hotspotC:focus-visible .ring,
.hotspotC.active .ring,
.hotspotS:hover .ring,
.hotspotS:focus-visible .ring,
.hotspotS.active .ring { opacity: .95; }
.hotspotC .label, .hotspotS .label { 
  font-size: 1.5rem; font-weight: 600;;
}
.hotspotC .hit, .hotspotS .hit { fill: transparent; stroke: transparent; pointer-events: auto; }
.hotspotC:focus-visible, .hotspotS:focus-visible { outline: none; }
.hotspotC:focus, .hotspotS:focus { outline: none; }

.panel { border: 1px solid rgba(0,0,0,.5); border-radius: 5px; padding: 16px 1vw; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.panel h2 { margin: 0 0 10px; font-size: 1.25rem; }
.panel p { margin: 0 0 10px;}
.panel .placeholder { color: var(--muted); }

/*.toggle_la { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.toggle_la input { accent-color: var(--accent);}
.toggle_la label { font-size: 1rem;}
*//*.badge { display:inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(125,196,255,.1); border:1px solid rgba(125,196,255,.3); font-size: .75rem; color: var(--accent); }
*/
#cleanProdSection h2+p{
  margin-top: 10px;
}
.related_list{
  display: flex;
  gap:10px;
  flex-flow: row wrap;
}
#cleanProd {
  max-width: 1200px;
  display: flex;
  gap:10px;
  margin: 20px 0;
  flex-flow: row wrap;
}
#cleanProd > a{
  width: calc(1200px / 6.3);
  height:auto;
  text-align: left;
  box-shadow: #888 1px 1px 3px;
  padding: 10px 1vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.related_list > a{
  width: calc(100% / 2.5);
  margin-bottom: 15px;
  height:auto;
  text-align: left;
  box-shadow: #888 1px 1px 3px;
  padding: 10px 1vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.related_list > a:hover,
#cleanProd  > a:hover{color: inherit;}
.related_list > a h3,
#cleanProd  > a h3{font-size:1.5em;}
.related_list > a h3 span,
#cleanProd  > a h3 span{font-size:0.88em;}
.related_list > a p,
#cleanProd  > a p{
  font-size:1.4em;
  letter-spacing: 1px;
  margin-bottom:3px;
  margin-left: auto;
}
.related_list > a img,
#cleanProd  a > img{
  display: block;
  margin: 10px auto;
}
.btn-bg {
  fill: #002596;
}
.hotspotS .label:hover,
.hotspotC .label:hover{
  text-decoration: underline;
}
@media only screen and (max-width: 1199px) {
  #cleanProdSection{
    padding-left: 3vw;
    padding-right: 3vw;
  }
  .related_list > a{
    width: calc(100% / 2.1);
  }
  #cleanProd > a{
    width: calc(100% / 4.6);
  }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .panel { 
    position: static; top: auto; max-height: none; 
    padding-left: 3vw;padding-right: 3vw;
  }
  .figure-wrap{
    position: inherit;
  }
}

@media only screen and (max-width: 480px) {
  #cleanProdSection{
    padding-left: 4vw;
    padding-right: 4vw;
  }
  #cleanProd > a{
    width: calc(100% / 2.2);
  }
}