*{box-sizing:border-box}
html,body{margin:0;background:#eaf1f7;font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#0c3466}
.page{width:min(1024px,100vw);margin:0 auto;position:relative;background:#fff;box-shadow:0 0 28px rgba(0,32,73,.12)}
.ref{display:block;width:100%;height:auto}
.header-mask{position:absolute;left:0;top:0;width:100%;height:4.8%;background:white;z-index:5}
.header{position:absolute;left:0;top:0;width:100%;height:4.8%;z-index:6;display:flex;align-items:center;padding:0 3.6%;gap:2.8%}
.logo{width:39.9380625%;height:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:4.6vw;font-size:clamp(11px,1.35vw,15px);font-weight:700;white-space:nowrap}
.nav a{text-decoration:none;color:#0b3468;padding:.55em 0;border-bottom:2px solid transparent}
.nav a.active{color:#0a73c9;border-color:#0a73c9}
.footer-mask{position:absolute;left:0;bottom:0;width:100%;height:6.9%;background:white;z-index:5}
.footer{position:absolute;left:0;bottom:0;width:100%;height:6.9%;z-index:6;display:flex;align-items:center;padding:0 3.6%;gap:3.5%}
.footer .logo{width:39.9380625%}
.footer .nav{margin-left:auto;gap:2.8vw;font-size:clamp(9px,1.05vw,12px)}
.copy{font-size:clamp(7px,.86vw,10px);color:#8799ac;white-space:nowrap;margin-left:auto}
.hotspots{position:absolute;inset:0;z-index:7;pointer-events:none}
.hotspots a{position:absolute;pointer-events:auto}
@media(max-width:760px){
  body{background:#fff}
  .page{box-shadow:none}
  .header,.footer{padding-left:2.6%;padding-right:2.6%}
  .logo{width:32%}
  .nav{gap:3.6vw;font-size:clamp(8px,2.2vw,12px)}
  .footer .logo{width:32%}
  .footer .nav{display:none}
  .copy{font-size:clamp(6px,1.6vw,9px)}
}

/* v10: company information is real HTML text, replacing the rasterized table area. */
.company-info-html{
  position:absolute;
  z-index:4;
  left:4.0%;
  top:31.82%;
  width:52.05%;
  height:22.86%;
  background:#fff;
  color:#183f6b;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:13px;
  line-height:1.45;
}
.ci-row{
  display:grid;
  grid-template-columns:29.1% 70.9%;
  min-height:33px;
  border-bottom:1px solid #d8e0e7;
}
.company-info-html .ci-row:first-child{
  border-top:1px solid #d8e0e7;
}
.ci-label{
  background:#edf4f8;
  font-weight:700;
  padding:7px 16px;
  display:flex;
  align-items:center;
}
.ci-value{
  background:#fff;
  padding:7px 16px;
  display:flex;
  align-items:center;
}
.ci-address{min-height:55px}
.ci-address .ci-value,
.ci-business .ci-value{
  display:block;
  padding-top:7px;
}
.ci-business{min-height:61px}
@media(max-width:760px){
  .company-info-html{font-size:clamp(7px,1.28vw,10px)}
  .ci-row{min-height:3.22vw}
  .ci-label,.ci-value{padding:.62vw 1.55vw}
  .ci-address{min-height:5.37vw}
  .ci-business{min-height:5.96vw}
}

/* v13: company hero copy rebuilt as real HTML/CSS text. */
.company-hero-copy{
  position:absolute;
  z-index:4;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Yu Gothic",Meiryo,sans-serif;
  letter-spacing:.04em;
}
.company-hero-copy-left{
  left:6.55%;
  top:16.95%;
  width:35%;
  color:#123f72;
  font-size:clamp(18px,2.15vw,24px);
  line-height:1.5;
  font-weight:500;
}
@media(max-width:760px){
  .company-hero-copy-left{font-size:clamp(10px,2.35vw,16px)}
}

/* v17: 経営理念右側文章を画像ではなくHTML/CSSの実テキストとして再構築 */
.philosophy-copy{
  position:absolute;
  z-index:4;
  left:31.45%;
  top:59.55%;
  width:59%;
  color:#173c68;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Yu Gothic",Meiryo,sans-serif;
}
.philosophy-main{
  font-size:clamp(17px,2.15vw,24px);
  line-height:1.55;
  letter-spacing:.025em;
  font-weight:500;
}
.philosophy-sub{
  margin-top:1.05em;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:clamp(9px,1.22vw,14px);
  line-height:1.7;
  letter-spacing:.015em;
}
@media(max-width:760px){
  .philosophy-main{font-size:clamp(9px,2.25vw,16px)}
  .philosophy-sub{font-size:clamp(6px,1.28vw,10px)}
}

/* Mobile adjustment: company information and philosophy area. */
@media(max-width:760px){
  .company-info-html{
    font-size:clamp(6px,1.12vw,9px);
    line-height:1.32;
  }
  .ci-row{min-height:2.75vw}
  .ci-label,.ci-value{padding:.42vw 1.25vw}
  .ci-address{min-height:4.6vw}
  .ci-business{min-height:5.1vw}
  .ci-business .ci-value{
    font-size:clamp(5.4px,1vw,7.2px);
    line-height:1.25;
  }
  .ci-address .ci-value,
  .ci-business .ci-value{
    display:flex;
    align-items:center;
    padding-top:.42vw;
    padding-bottom:.42vw;
  }
  .philosophy-copy{
    left:31.45%;
    top:59.75%;
    width:61%;
  }
  .philosophy-main{
    font-size:clamp(7.2px,1.55vw,11px);
    line-height:1.45;
  }
  .philosophy-sub{
    margin-top:.65em;
    font-size:clamp(5px,.92vw,7px);
    line-height:1.45;
  }
}


/* Align the vertical divider beside 経営理念 with the divider beside 技術力の追求. */
.philosophy-divider-mask{
  position:absolute;
  z-index:3;
  left:25.88%;
  top:58.95%;
  width:.62%;
  height:6.15%;
  background:#fff;
  pointer-events:none;
}
.philosophy-divider-aligned{
  position:absolute;
  z-index:4;
  left:25.39%;
  top:58.95%;
  width:1px;
  height:6.15%;
  background:#d5dde5;
  pointer-events:none;
}

/* MOBILE PHILOSOPHY REPAIR TEST
   Force the previously approved compact company-info layout on phones,
   and keep the simplified philosophy sentence inside its own section. */
@media screen and (max-width:760px), screen and (pointer:coarse) and (max-width:1024px){
  .company-info-html{
    font-size:clamp(6px,1.12vw,9px);
    line-height:1.32;
  }
  .ci-row{min-height:2.75vw}
  .ci-label,.ci-value{padding:.42vw 1.25vw}
  .ci-address{min-height:4.6vw}
  .ci-business{min-height:5.1vw}
  .ci-business .ci-value{
    font-size:clamp(5.4px,1vw,7.2px);
    line-height:1.25;
  }
  .ci-address .ci-value,
  .ci-business .ci-value{
    display:flex;
    align-items:center;
    padding-top:.42vw;
    padding-bottom:.42vw;
  }
  .philosophy-copy{
    left:31.45%;
    top:59.75%;
    width:61%;
  }
  .philosophy-main{
    font-size:clamp(7.2px,1.55vw,11px);
    line-height:1.45;
  }
  .philosophy-divider-mask{
    left:25.88%;
    top:58.95%;
  }
  .philosophy-divider-aligned{
    left:25.39%;
    top:58.95%;
  }
}

/* MOBILE COMPANY TABLE PROPORTION TEST v2
   Keep the approved design; only adjust mobile row heights/alignment. */
@media screen and (max-width:760px), screen and (pointer:coarse) and (max-width:1024px){
  .company-info-html{
    line-height:1.32;
  }
  .ci-row{
    min-height:3.35vw;
  }
  .ci-address{
    min-height:5.50vw;
  }
  .ci-business{
    min-height:6.30vw;
  }
  .ci-label,
  .ci-value,
  .ci-address .ci-value,
  .ci-business .ci-value{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    padding:.42vw 1.25vw;
  }
  .ci-business .ci-value{
    font-size:clamp(5.4px,1vw,7.2px);
    line-height:1.25;
  }
}