@charset "utf-8";

.history-wrap{
  display: flex;
  justify-content: space-between;
  margin-top:5rem;
}

.history-txt{
  width:100%;
  position: relative;
  max-width: 720px;
}

.history-txt::before{
  content:"";
  position:absolute;
  width:1px;
  height:90%;
  background:#002753;
  left:140px;
  top: 2rem;
}

.history-list{
  display:flex;
  gap:5rem;
  margin-bottom:4rem;
  align-items: center;
}

.history-list .accent{
  letter-spacing:0;
  font-weight:500;
}

.history-list > p{
  font-size:clamp(1.5rem, 0.864rem + 2.12vw, 3.25rem);
  position: relative;
  width:100px;
}

.history-list > p::before{
  content:"";
  position:absolute;
  width:3rem;
  height:1px;
  background:#002753;
  right:-4rem;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.history-list div .accent{
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  width: 70px;
}

.history-list div p:last-child{
  width: calc(100% - 94px);
}

.history-list div{
  display:flex;
  gap:1.5rem;
  align-items:center;
  width: calc(100% - 180px);
}

.history-img{
  width:23%;
  display:none;
}

.history-img img{
  margin-bottom:1rem;
}

.outline{
  margin:140px 0 0;
  position: relative;
}

.outline:not(.history)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 48%;
  aspect-ratio: 916 / 1688;
  background: url(https://sanei-construction.com/system_panel/uploads/images/20251106154411474048.png) no-repeat center / contain;
}

.outline .container{
  max-width:1080px;
}

.outline-list-wrap{
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.outline-list-item{
  width:47.5%;
}

.outline-list{
  border-bottom:1px solid #C7C7C7;
  padding:1.5rem 1rem ;
}

.outline-list:last-child{
  border-bottom:none;
}

.outline-list p:first-child{
  color:#767777;
  font-size:14px;
  margin-bottom:8px;
}

.outline-wrap{
  display:flex;
  gap:20px;
  margin:5rem 0 20px;
}

.outline-wrap img{
  width:calc((100% - 20px)/2);
}

.outline iframe{
  width:100%;
  height: 400px;
}

.outline-list a{
  color:#002753;
}

@media screen and (max-width: 1024px) {
  .history-list > p{
    width: 80px;
  }
  .history-txt::before{
    left: 120px;
  }
  .history-list div .accent{
    width: 55px;
  }
  .history-list div p:last-child {
    width: calc(100% - 80px);
  }
}

@media screen and (max-width: 767px) {
  .history-wrap {
    margin-top: 2rem;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }
  .history-img,
  .history-txt{
    width:90%;
  }
  .history-list div p:last-child{
    width:100%;
  }
  .history-list > p {
    width: 64px;
    font-size: 2rem;
  }
  .history-list div {
    width: calc(100% - 120px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .history-txt::before {
    left: 92px;
  }
  .history-list {
    margin-bottom: 2rem;
    align-items: flex-start;
    gap: 3.5rem;
  }
  .history-list > p::before{
    width: 2.5rem;
    right: -3rem;
  }
  .outline {
    margin: 80px 0 0;
  }
  .outline .container {
    width: 100%;
  }
  .history-img img {
    margin-bottom: 0.5rem;
  }
  .outline-list-wrap {
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 1rem auto 0;
  }
  .outline-list-item,
  .outline-wrap img{
    width: 100%;
  }
  .outline-list{
    padding:1rem;
  }
  .outline-list:last-child{
    border-bottom: 1px solid #C7C7C7;
  }
  .outline:not(.history)::after{
    width: 200%;
    top: auto;
    bottom: 5%;
  }
  .outline-wrap {
    margin: 2.5rem 5% ;
    flex-direction: column;
    gap: 8px;
  }
  .outline iframe {
    height: 300px;
  }
  .lower-title h2 {
    font-size: 5.5rem;
  }
  .history{
    position:relative;
  }
  .history::before{
    content:"";
    position:absolute;
    width:100%;
    top:0%;
    z-index:-1;
    left:0;
    aspect-ratio: 391/1373;
    background:url(https://sanei-construction.com/system_panel/uploads/images/20250826171557140909.png) no-repeat center/contain;
  }
  .outline{
    position:relative;
  }
  .outline::before{
    content:"";
    position:absolute;
    width:100%;
    top:0%;
    z-index:-1;
    left:0;
    aspect-ratio: 391/1373;
    background:url(https://sanei-construction.com/system_panel/uploads/images/20251106154602459843.png) no-repeat center/contain;
  }
  .outline:not(.history)::after,
  .main::after{
    display:none;
  }
}