@charset "utf-8";

body {display: unset;}

#header {
  padding: 20px 120px;
  border-bottom: 1px solid var(--input-border01, #E6E6E6);
  background: #fff;;

  .inner {
    margin:0 auto;
    display: flex;
    justify-content: space-between;

    .logo {
    width: 164px;
    height: 41px;
    }

    .nav {
      display: flex;
      align-items: center;
      gap:40px;

      li {font-size:0.98rem;}
    }
  } 
}

.inner {
  max-width:1280px;
  margin:0 auto;
}

  .title {
    font-size:3rem;
    font-weight:bold;    
  }

  p {white-space:unset;}
  
@media (max-width:1279px) {
  .inner {
    max-width:720px;
  } 
  
  .title {font-size:2.5rem;}
}

@media (max-width:719px) {
  .inner {
    max-width:390px;
  }

  .title {
    font-size:2.0rem;
  }
}

.visual {
  width:88%;
  height:532px;
  margin:0 auto;
  border-radius: 12px;
  margin-top:160px;
  background-image:url(../img/visual-img.png);  
  background-repeat:no-repeat;
  position: relative;
  background-position: center;

  .visual-txt {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
  
    h1 {
      font-size:3rem;
      font-weight:bold;
      color:#fff;
    }

    div {
      font-size:1.5rem;
      color:#fff;
    }
  }
}

.sec1 {
  padding:176px 0;

  .inner {    

    .sec1-bg {

      background-image:url(../img/sec1-bg.png);
      background-repeat:no-repeat;
      background-position:center;
      background-size:contain;
      width: 764px;
      height: 534px;
      margin: 0 auto;
      position: relative;

      .item-wrap {
        display: flex;
        gap:12px;
        justify-content: center;
        position: absolute;
        top:49%;
        left: 46%;
        transform: translate(-49%,-50%);
        width: 100%;
      

        .sec1-item {      
          padding: 23px 24px;
          border-radius: 8px;
          border: 1px solid #ACCBFC;
          background: #F0F5FF;
          box-shadow: 0 0 9px 0 #6893E9;      

          .icon {
            width:50px;
            height:50px;
          }

          div {        
            font-weight:bold;
            color:#01287D;
            margin-top:24px;
            margin-bottom:8px;
          }
        }

        .sec1-txt div br {display: none;}
      }
      /* item-wrap */
      
    }
    /* sec1-bg */

    .title {      
      margin-bottom: 80px;
      text-align: center;
    }  
    
    .sec1-txt {
      font-size:2rem;
      font-weight:bold;
      color:#121212;
      text-align: center;

      div span {
        color:#0E81E3;
      }
    }

  }
  /* inner */
}

.sec2 {
  background:#F7F7F7;
  padding:164px 0; 

  .title {text-align:center;}

  .inner {
    background: #fff;
    padding:84px 224px;
    margin-top:40px;    

    .sec2-feature {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 80px;

      &::last-child {margin-bottom: 0;}

      .text div{
        font-size:1.25rem;
        font-weight:bold;
        margin-bottom: 8px;        
      }      
    }
  }
}

.sec3 {
  padding:200px 0;

  .inner {
    .title {margin-bottom:48px;}

    .table-inner {
      overflow: scroll;
   
      table {
        width: 100%;

        thead tr th{
          border:1px solid #96BAF2;
          height: 44px;
          padding-left:12px;
          color:#3A5EA7;

          &:first-child {border-left:0;}
          &:last-child {border-right:0;}
        }

        tbody tr td {
          height:40px;
          padding-left:12px;
        }
      }
    }
  }
}

.sec4 .inner{
  display: flex;
  justify-content: space-between;
  align-items: center;

  .sec4-img {
    width: 436px;
    height: 504px;    
  }

  .sec4-textbox {
    width: 50%;

    .text-item {
      border-bottom: 1px solid #DFDFDF;
      padding:20px 12px;

      div {
        font-size:1.5rem;
        font-weight:bold;
        margin-bottom: 8px;
      }

      p{font-size:0.85rem;}
    }
  }
}

.sec5 {
  padding:200px 0;

  .inner {
    .sec5-itemWrap {      
      display: flex;
      flex-wrap: wrap;

      .sec5-item {
        width: 50%;
        display: flex;
        align-items:center;
        gap:20px;
        margin-top:80px;

        .icon {
          width: 120px;
          height: 120px;         
          border-radius: 8px;
          background-size:cover;
          background-repeat: no-repeat;
          background-position: center;

          img {
            margin:0 auto;
          }
        }        

        .text div:first-child{
          font-size:1.12rem;
          color:#106BC0;
        }   
        
        .first  {
          background-image:url(../img/sec5-img1.png);
        }

        .second {
          background-image:url(../img/sec5-img2.png);
        }

        .third {
          background-image:url(../img/sec5-img3.png);
        }

        .fourth {
          background-image:url(../img/sec5-img4.png);
        }
      }
    }
  }
}

.sec6 {
  .title {
    color:#106BC0;
    text-align: center;
    font-size:2rem;
    line-height: 1.25;
  }

  p {
    font-size:1.5rem;
    text-align: center;
  }

  .sec6-content {
    background-image: url(../img/sec6-img.svg);
    background-repeat:no-repeat;
    background-position: center;
    width: 100%;
    height:692px;
    margin-top:40px;

    .inner {
      max-width:720px;
      position: relative;

      .flag {
        position:absolute;
        text-align: center;

        p {font-size:1.0rem;margin-bottom: 4px;}
        div {font-size:1.37rem; font-weight: bold;}
      }

      .past {
        top: 60px;
        
        div {color:#FE1B85;}
      }

      .present {
        top:140px;
        left: 500px;

        div {color:#0080FF;}
      }

      .future {
        top:340px;

        div {color:#08BDAB;}
      }
    }
  }  
}


.sec7 {
  padding:200px 0;
  text-align: center;

  .title:first-child {
    color:#01287D;
  }

  button {
    width: 136px;
    height: 52px;
    border-radius: 8px;
    background: #106BC0;
    color:#fff;    
    margin-top:40px;

    a {display: block; width:100%;}
  }
}


@media (max-width:1279px) {

  #header {
    padding:20px 0;

    .inner {
      max-width: 88%;
    }
  }

  .visual .visual-txt h1 {
    font-size:2.0rem;
  }
  

  .sec2 {
    & .inner {

      padding:84px 0;

        .sec2-feature {
          flex-direction:column;
          gap:12px;
          align-items: unset;     
          text-align: center;  


          .text div {
            margin-bottom: 0;
          }

          .img {            
            width:80%;
            margin:0 auto;      
          }
        }

        .sec2-feature:nth-child(2), :nth-child(4) {
          flex-direction: column-reverse;
        }

        .sec2-feature:last-child {
          margin-bottom: 0;
        }
    }
  }

  .sec4 .inner {
    flex-direction:column;
    gap:40px;

    .sec4-textbox {width: 100%;}
  }

  .sec5 {
    & .inner {
      .sec5-itemWrap {
        flex-wrap: nowrap;
        flex-direction: column;

        .sec5-item {
          width:100%;
          margin-top:40px;
        }
      }
    }
  }

  .sec6 p span {
    display: block;
  }  
}

@media (max-width:719px) {

  .visual .visual-txt {

    div {font-size:1.25rem;}

    h1 {
      font-size:1.8rem;

      span {display: block;}
    }
  }
  

  .sec1 {

    padding:120px 0;

    & .inner {

      .title {
        margin-bottom: 40px;
      
        span{
          display: block;
        }      
      }
      
      & .sec1-bg {

        width:100%;  
        height: 552px;      

        .item-wrap {
          flex-direction: column;
          position: relative;
          top: unset;
          left: unset;
          transform: none;

          .sec1-item {
            width: 100%;
            padding:20px;

            .icon{
              margin-top:0;
              width:40px;
              height: 40px;
            }

            div {
              margin-top:16px;
              margin-bottom: 8px;
            }

            p br {display: none;}
          }
        }
      }
      /* sec1-bg  */

      .sec1-txt div br {display: block;}
    }
  }

  .sec3 {
    padding:120px 0;
  }

  .sec4 .inner {
    .sec4-img {
      width: 100%;
      height: 464px;
    }    

    .sec4-textbox .text-item p span{
      display: block;
    }
  }

  .sec5 {
    padding:120px 0;

    .inner {
      .sec5-itemWrap {
        .sec5-item {         
          flex-direction: column;

          .text {text-align:center;}
        }
      }
    }
  }    

  .sec6 {
    .inner  {

      .title {font-size:1.75rem;
        span {display: block;}
      }
      
      p {
        font-size:1.12rem;        
      }      
    }   
      
    .sec6-content {
      .inner {display: none;}

      background-image: url(../img/sec6-mo.svg);
      width:100%;
      height: 634px;
    }
  }     
  
  .sec7 .inner{
    .title span {display: block;}
  }
  
}