/* =========================================================
   DAIICHI BUSSAN / HISTORY v105
   現行HPの沿革情報をタイムライン化
   ========================================================= */

.history-page .sub-hero-bgword{
  top:43%;
  font-size:clamp(100px,13vw,225px);
  color:rgba(15,15,15,.40);
}

.history-intro{
  padding-top:clamp(100px,10vw,155px);
  padding-bottom:clamp(105px,10vw,165px);
}
.history-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
  gap:clamp(55px,9vw,145px);
  align-items:end;
}
.history-intro-title>p{
  margin:0 0 22px;
  color:var(--omega-red);
  font-size:9px;
  font-weight:850;
  letter-spacing:.24em;
}
.history-intro-title h2{
  margin:0;
  font-size:clamp(42px,4.3vw,72px);
  line-height:1.23;
  letter-spacing:-.045em;
  font-weight:900;
}
.history-intro-copy{
  border-top:1px solid #202020;
  padding-top:24px;
}
.history-intro-copy p{
  margin:0 0 18px;
  color:#555;
  font-size:clamp(15px,1vw,17px);
  line-height:2.05;
}

.history-start{
  background:#2c2c31;
  color:#fff;
}
.history-start-inner{
  min-height:390px;
  padding-top:clamp(70px,7vw,105px);
  padding-bottom:clamp(70px,7vw,105px);
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
  gap:clamp(40px,8vw,125px);
  align-items:center;
}
.history-start-inner>span{
  color:var(--omega-red);
  font-size:clamp(92px,12vw,190px);
  line-height:.8;
  font-weight:900;
  letter-spacing:-.07em;
}
.history-start-inner p{
  margin:0 0 16px;
  color:#c94e55;
  font-size:9px;
  font-weight:850;
  letter-spacing:.24em;
}
.history-start-inner h2{
  margin:0;
  font-size:clamp(34px,3.6vw,60px);
  line-height:1.35;
  letter-spacing:-.035em;
  font-weight:850;
}

.history-era{
  background:#fff;
}
.history-era-alt{
  background:#f5f5f3;
}
.history-era-inner{
  display:grid;
  grid-template-columns:minmax(245px,.68fr) minmax(0,1.32fr);
  gap:clamp(52px,8vw,125px);
  padding-top:clamp(95px,9vw,145px);
  padding-bottom:clamp(100px,10vw,160px);
}
.history-era-heading{
  position:sticky;
  top:120px;
  align-self:start;
}
.history-era-heading p{
  margin:0 0 17px;
  color:var(--omega-red);
  font-size:clamp(30px,3vw,50px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
}
.history-era-heading h2{
  margin:0;
  color:#666;
  font-size:14px;
  line-height:1.6;
  font-weight:650;
}

.history-list{
  position:relative;
}
.history-list::before{
  content:"";
  position:absolute;
  left:154px;
  top:0;
  bottom:0;
  width:1px;
  background:#d4d4d2;
}
.history-item{
  display:grid;
  grid-template-columns:125px 58px minmax(0,1fr);
  gap:0;
  min-height:116px;
  padding:0 0 42px;
}
.history-date{
  padding-top:1px;
}
.history-date strong{
  display:block;
  color:#202020;
  font-size:16px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:-.02em;
}
.history-date span{
  display:block;
  margin-top:7px;
  color:#999;
  font-size:10px;
  font-weight:650;
}
.history-dot{
  position:relative;
}
.history-dot::before{
  content:"";
  position:absolute;
  top:4px;
  left:25px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--omega-red);
  box-shadow:0 0 0 6px #fff;
}
.history-era-alt .history-dot::before{
  box-shadow:0 0 0 6px #f5f5f3;
}
.history-copy{
  padding-bottom:35px;
  border-bottom:1px solid #ddd;
}
.history-copy h3{
  margin:0;
  font-size:clamp(19px,1.6vw,27px);
  line-height:1.5;
  letter-spacing:-.02em;
  font-weight:800;
}
.history-copy p{
  margin:10px 0 0;
  color:#777;
  font-size:13px;
  line-height:1.7;
}

@media(max-width:900px){
  .history-intro-grid,
  .history-start-inner,
  .history-era-inner{
    grid-template-columns:1fr;
    gap:42px;
  }
  .history-era-heading{
    position:static;
  }
}

@media(max-width:640px){
  .history-page .sub-hero-bgword{font-size:21vw}
  .history-intro{padding-top:78px;padding-bottom:92px}
  .history-intro-title h2{font-size:36px}
  .history-start-inner{min-height:330px}
  .history-start-inner>span{font-size:105px}
  .history-start-inner h2{font-size:32px}
  .history-era-inner{padding-top:78px;padding-bottom:90px}
  .history-era-heading p{font-size:35px}
  .history-list::before{left:105px}
  .history-item{grid-template-columns:86px 38px minmax(0,1fr);padding-bottom:30px}
  .history-dot::before{left:15px;width:8px;height:8px;box-shadow:0 0 0 5px #fff}
  .history-era-alt .history-dot::before{box-shadow:0 0 0 5px #f5f5f3}
  .history-date strong{font-size:14px}
  .history-date span{font-size:9px}
  .history-copy h3{font-size:19px}
  .history-copy p{font-size:12px}
}