/* IHI guideline-aligned base styles (shared across pages) */
:root{
  --ihi-key:#1e52a6;
  --ihi-text:#333333;
  --ihi-subtext:#707070;
  --ihi-caution:#ce2800;

  --content-max:1260px;
  --content-min:940px;
  --gutter:20px;
}

html,body{height:100%;}
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ihi-text);
  font-size:17px;
  line-height:1.8;
  background:#fff;
}
@media (max-width:768px){ body{font-size:14px;} }

a{ color:var(--ihi-key); text-decoration:none; }
a:hover{ text-decoration:underline; }

.ihi-wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--gutter);
  box-sizing:border-box;
}

.ihi-section{ padding:40px 0; }
.ihi-h2{
  font-size:22px;
  font-weight:700;
  color:var(--ihi-key);
  line-height:1.5;
  margin:0 0 12px;
}
.ihi-divider{
  border:0;
  border-top:1px solid rgba(30,82,166,.35);
  margin:18px 0 22px;
}

/* Top bar */
.top-bar{
  border-bottom:1px solid #d9d9d9;
  background:#fff;
  font-size:14px;
}
.top-bar .ihi-wrap{
  display:flex;
  justify-content:flex-end;
  gap:15px;
  padding-top:8px;
  padding-bottom:8px;
}
.top-bar a{ color:var(--ihi-text); }

/* Header */
.header-main{
  border-bottom:2px solid #000;
  background:#fff;
}
.header-main__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
}
.header-main h1{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:var(--ihi-key);
  line-height:1.5;
}
.tagline{
  margin-top:2px;
  color:var(--ihi-subtext);
  font-weight:400;
  line-height:1.6;
}

/* Desktop nav */
.nav-container{
  position:relative;
  z-index:999;
  border-bottom:1px solid #d9d9d9;
  background:#f9f9f9;
}
.nav-bar{ display:flex; width:100%; }
.nav-item{
  flex:1;
  text-align:center;
  padding:12px 0;
  cursor:pointer;
  background:#f9f9f9;
  border-right:1px solid #e3e3e3;
  font-weight:400;
  user-select:none;
}
.nav-item:last-child{ border-right:none; }
.nav-item:hover{ background:#e6effa; }
.nav-item.active{
  background:var(--ihi-key);
  color:#fff;
  font-weight:700;
}
.inherit-link{ color:inherit; }

.dropdown-wrapper{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background:#fff;
  padding:25px 0;
  border-top:1px solid #d9d9d9;
  z-index:1000;
  box-sizing:border-box;
}
.nav-item.active .dropdown-wrapper{ display:block; }

.submenu-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-evenly;
  gap:30px;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--gutter);
  box-sizing:border-box;
}
.submenu-grid-item{ width:180px; text-align:center; }
.submenu-grid-item img{
  width:100%;
  height:auto;
  border:1px solid #d0d0d0;
  background:#fff;
  display:block;
}
.submenu-grid-item p{
  margin:8px 0 0;
  font-size:14px;
  color:var(--ihi-key);
  font-weight:700;
  line-height:1.6;
}

/* Guideline breakpoints */
@media (max-width:999px){
  .nav-container{ display:none; }
  .top-bar{ display:none; }
}

/* Offcanvas accordion */
.offcanvas-title{ color:var(--ihi-key); font-weight:700; }
.offcanvas-body ul.list-unstyled > li{
  border-bottom:1px solid #e1e1e1;
  padding:10px 0;
}
.offcanvas-body ul.list-unstyled > li > strong{
  display:block;
  font-size:16px;
  cursor:pointer;
  font-weight:600;
  position:relative;
  color:var(--ihi-text);
}
.offcanvas-body ul.list-unstyled > li > strong::after{
  content:'+';
  position:absolute;
  right:0;
  font-size:18px;
  color:var(--ihi-subtext);
}
.offcanvas-body ul.list-unstyled > li.active > strong::after{ content:'–'; }
.offcanvas-body ul.list-unstyled ul{
  display:none;
  margin-top:10px;
  padding-left:15px;
}
.offcanvas-body ul.list-unstyled li.active ul{ display:block; }
.offcanvas-body a{ display:block; margin:6px 0; color:var(--ihi-key); }

/* Slider images */
.carousel-item img{
  width:100%;
  height:auto;
  display:block;
}

/* Footer */
footer a{ color:var(--ihi-key); }
footer h5{ margin-bottom:15px; font-weight:700; line-height:1.5; }
footer ul{ list-style:none; padding-left:0; margin-bottom:0; }
footer .small, footer .text-muted{ color:var(--ihi-subtext) !important; }

/* Product cards (optional, used on Products page) */
.section-header{
  background:#eeeeee;
  padding:10px 15px;
  margin-bottom:20px;
}
.section-header__title{
  margin:0;
  font-weight:700;
  color:var(--ihi-text);
  font-size:16px;
  line-height:1.6;
}
.product-item{
  border:none;
  background:transparent;
  transition:transform .2s ease;
}
.product-item:hover{ transform:translateY(-4px); }
.card-img-top{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:6px;
}
.card-body{ padding:.75rem 0; }
.card-title{
  font-size:1rem;
  font-weight:600;
  color:var(--ihi-text);
  margin-bottom:.25rem;
}
.card-text{ font-size:.85rem; color:var(--ihi-subtext); }

hr.section-divider{
  border-top:1px solid rgba(30,82,166,.35);
  opacity:1;
  margin:20px 0 25px;
}


/* Utility: accessible visually hidden (for SEO headings while keeping layout clean) */
.visually-hidden-focusable:not(:focus):not(:focus-within),
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Brand logo sizing (replace /img/logo.svg with official asset later) */
.site-logo{
  height: 36px;
  width: auto;
  display: block;
}

/* Breadcrumb (simple, guideline-friendly) */
.ihi-breadcrumb{
  font-size: 14px;
  color: var(--ihi-subtext);
  margin: 14px 0 0;
}
.ihi-breadcrumb a{ color: var(--ihi-key); }
.ihi-breadcrumb__sep{ margin: 0 6px; color: var(--ihi-subtext); }