body {
  background: #fff;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.lottie-container-outline {
  position: relative;
  top: 0;
  height: 1050px;
  max-width: auto;
}
@media screen and (max-width: 1920px) {
  .lottie-container-outline {
    max-height: 1050px;
    height: calc((1350 / 1920) * 100vw);
  }
}
@media screen and (max-width: 768px) {
  .lottie-container-outline {
    overflow: hidden;
    height: calc((650 / 750) * 100vw);
  }
}

#lottie-container2 {
  position: absolute;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  z-index: 90;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #lottie-container2 {
    width: 109%;
  }
}

  .main60th{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 125px 0 0 0;
    background-color: #fff;
  }
  @media screen and (max-width:1920px) {
    .main60th{
      padding: calc((125 / 1920) * 100vw) 0 0 0;
    }
  }
  @media screen and (max-width:768px) {
    .main60th{
      padding: 100px 0 0 0;
    }
  }

  
.lead{
    text-align: center;
}
.lead .title{
    max-width: calc(2400px / 2);
    width: calc(((2400 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .lead .title{
        width: calc((721 / 750) * 100vw);
    }
}
.lead p{
    text-align: center;
    font-size: 27px;
    line-height: 1.9;
    letter-spacing: 4px;
    padding: 43px 0 0 0;
}
@media screen and (max-width:1920px) {
    .lead p{
        font-size: calc((27 / 1920) * 100vw);
        letter-spacing: calc((4 / 1920) * 100vw);
        padding: calc((43 / 1920) * 100vw); 0 0 0;
    }
}
@media screen and (max-width:768px) {
    .lead p{
        font-size: calc((24 / 750) * 100vw);
        padding: calc((15 / 750) * 100vw) 0 0 0;
        line-height: 2.2;
    }
}

/*  greeting */


.greeting{
    position: relative;
    width: 100%;
    max-width: 1920px;
    z-index: 90;
}

.greeting .deco1{
    position: absolute;
    max-width: calc(340px / 2);
    width: calc(((340 / 2) / 1920) * 100vw);
    left: 463px;
    top:100px;
}
@media screen and (max-width:1900px) {
    .greeting .deco1{
      left: calc((485 / 1920) * 100vw);
      top:calc((100 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .greeting .deco1{
      left: calc((313 / 750) * 100vw);
      width: calc((110 / 750) * 100vw);
      top: calc((204 / 750) * 100vw);
    }
}

.greeting .deco2{
    position: absolute;
    max-width: calc(1020px / 2);
    width: calc(((1020 / 2) / 1920) * 100vw);
    left: 738px;
    top: 50px;
}
@media screen and (max-width:1900px) {
    .greeting .deco2{
      left: calc((738 / 1920) * 100vw);
      top:calc((50 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .greeting .deco2{
      left: calc((222 / 750) * 100vw);
      width: calc((322 / 750) * 100vw);
      top: calc((70 / 750) * 100vw);
    }
}

.greeting .contents{
    position: relative;
    text-align: center;
    top:330px;
}
@media screen and (max-width:1900px) {
    .greeting .contents{
      top:calc((330 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .greeting .contents{
      top:calc((100 / 750) * 100vw);
    }
}

/*
@media screen and (max-width:768px) {
    .greeting .contents h3{
        position: relative;
        top:calc((810 / 750) * 100vw);
    }
}
    */

    @media screen and (max-width:768px) {
        .greeting .contents h3{
            position: relative;
            top:calc((380 / 750) * 100vw);
        }
    }

.greeting .contents .title{
    max-width: calc(1060px / 2);
    width: calc(((1060 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .greeting .contents .title{
      width: calc((400 / 750) * 100vw);
    }
}

.greeting .contents .link{
    position: relative;
    text-align: center;
    padding:32px 0 0 0;
    margin: 0;
    z-index: 101;
}
@media screen and (max-width:1900px) {
    .greeting .contents .link{
      padding: calc((32 / 1920) * 100vw) 0 0 0;
    }
}

@media screen and (max-width:768px) {
    .greeting .contents .link{
        position: relative;
        top:calc((393 / 750) * 100vw);
        margin: 0!important;
    }
}

/*
@media screen and (max-width:768px) {
    .greeting .contents .link{
        position: relative;
        top:calc((805 / 750) * 100vw);
        margin: 0!important;
    }
}
    */

.greeting .contents .link a{
    display: inline-block;
}

.greeting .contents .link a img{
    max-width: calc(260px / 2);
    width: calc(((260 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .greeting .contents .link a img{
      width: calc((100 / 750) * 100vw);
    }
}

.greeting .deco3{
    position: absolute;
    max-width: calc(1010px / 2);
    width: calc(((1010 / 2) / 1920) * 100vw);
    left: 536px;
    top:170px;
}
@media screen and (max-width:1900px) {
    .greeting .deco3{
      left: calc((536 / 1920) * 100vw);
      top:calc((170 / 1920) * 100vw);
    }
}
/*
@media screen and (max-width:768px) {
    .greeting .deco3{
      left: calc((91 / 750) * 100vw);
      top:calc((230 / 750) * 100vw);
      width: calc((321 / 750) * 100vw);
    }
}
*/
@media screen and (max-width:768px) {
    .greeting .deco3{
      left: calc((91 / 750) * 100vw);
      top:calc((500 / 750) * 100vw);
      width: calc((321 / 750) * 100vw);
    }
}

.greeting .deco4{
    position: absolute;
    max-width: calc(1050px / 2);
    width: calc(((1050 / 2) / 1920) * 100vw);
    top:-45px;
    right: 380px;
}
@media screen and (max-width:1900px) {
    .greeting .deco4{
        right: calc((380 / 1920) * 100vw);
        top:calc((-45 / 1920) * 100vw);
    }
}

/*

@media screen and (max-width:768px) {
    .greeting .deco4{
        width: calc((331 / 750) * 100vw);
        top:calc((160 / 750) * 100vw);
        right: calc((17 / 750) * 100vw);
    }
}

*/

@media screen and (max-width:768px) {
    .greeting .deco4{
        width: calc((331 / 750) * 100vw);
        top:calc((430 / 750) * 100vw);
        right: calc((17 / 750) * 100vw);
    }
}

.greeting-deco-outline{
    position: relative;
    height: 1000px;
}
@media screen and (max-width:1900px) {
    .greeting-deco-outline{
        position: relative;
        height: calc((1000 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .greeting-deco-outline{
        height: calc((1000 / 750) * 100vw);
    }
}

/* history */

.history{
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 1307px;
}
@media screen and (max-width:1900px) {
    .history{
        height: calc((1307 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .history{
        height: calc((836 / 750) * 100vw);
    }
}

.history .deco1{
    position: absolute;
    max-width: calc(2400px / 2);
    width: calc(((2400 / 2) / 1920) * 100vw);
    left: 326px;
    top:56px;
}
@media screen and (max-width:1900px) {
    .history .deco1{
        left: calc((326 / 1920) * 100vw);
        top:calc((56 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .history .deco1{
        left: auto;
        right: 0;
        width: calc((678 / 750) * 100vw);
        top:calc((-68 / 750) * 100vw);
    }
}

.history .deco2{
    position: absolute;
    max-width: calc(400px / 2);
    width: calc(((400 / 2) / 1920) * 100vw);
    right:477px;
    top:-216px;
}
@media screen and (max-width:1900px) {
    .history .deco2{
        right: calc((477 / 1920) * 100vw);
        top:calc((-216 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .history .deco2{
        width: calc((128 / 750) * 100vw);
        right:calc((36 / 750) * 100vw);
        top:calc((-255 / 750) * 100vw);
    }
}

.history  .contents{
    position: relative;
    text-align: center;
    top:677px;
}
@media screen and (max-width:1900px) {
    .history  .contents{
        top:calc((677 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .history  .contents{
    top:calc((373 / 750) * 100vw);
    }
}

.history  .contents .title{
    max-width: calc(1060px / 2);
    width: calc(((1060 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .history  .contents .title{
        width: calc((420 / 750) * 100vw);;
    }
}

.history .contents .btn-link{
    text-align: center;
    padding: 33px 0 0 0;
}
@media screen and (max-width:1900px) {
    .history .contents .btn-link{
        padding: calc((33 / 1920) * 100vw) 0 0 0;
    }
}
@media screen and (max-width:768px) {
    .history .contents .btn-link{
        text-align: center;
        padding: calc((30 / 750) * 100vw) 0 0 0;
    }
}

.history  .contents .btn-link a{
    display: inline-block;
}

.history  .contents .btn-link a img{
    max-width: calc(260px / 2);
    width: calc(((260 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .history  .contents .btn-link a img{
    width: calc((100 / 750) * 100vw);;
    }
}

.history  .contents .photo{
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: calc((1200 / 1920) * 100vw);
    margin: 0 auto;
    padding: 68px 0 0 0;
}
@media screen and (max-width:1900px) {
    .history  .contents .photo{
        margin: 0 auto;
        padding: calc((68 / 1920) * 100vw) 0 0 0;
    }
}
@media screen and (max-width:768px) {
    .history  .contents .photo{
        width: calc((700 / 750) * 100vw);
        padding: calc((45 / 750) * 100vw) 0 0 0;
    }
}

.history  .contents .photo img{
    max-width: calc(580px / 2);
    width: calc(((580 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .history  .contents .photo img{
        width: calc((172 / 750) * 100vw);
    }
}

.history-vision-back{
    position: relative;
    background: linear-gradient(to bottom, #ffffff 0%,#fffefc 20%,#fef9f3 40%,#fef9f3 100%);
}

@media screen and (max-width:768px) {
    .history-vision-back{
        background: linear-gradient(to bottom, #fffefc 20%,#fef9f3 40%,#fef9f3 100%);
    }
}

/* vision */

.vision{
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 1709px;
}
@media screen and (max-width:1900px) {
    .vision{
        position: relative;
        width: 100%;
        max-width: 1920px;
        height: calc((1709 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision{
        height: calc((1379 / 750) * 100vw);
    }
}

.vision .deco1{
    position: absolute;
    max-width: calc(2710px / 2);
    width: calc(((2710 / 2) / 1920) * 100vw);
    left: 350px;
}
@media screen and (max-width:1900px) {
    .vision .deco1{
        left: calc((350 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision .deco1{
        width: calc((668 / 750) * 100vw);
        left: calc((47 / 750) * 100vw);
    }
}

.vision .deco2{
    position: absolute;
    max-width: calc(550px / 2);
    width: calc(((550 / 2) / 1920) * 100vw);
    right: 298px;
    top:820px;
}
@media screen and (max-width:1900px) {
    .vision .deco2{
        right: calc((298 / 1920) * 100vw);
        top:calc((820 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision .deco2{
        display: none;
    }
}

.vision .deco3{
    position: absolute;
    max-width: calc(320px / 2);
    width: calc(((320 / 2) / 1920) * 100vw);
    left: 355px;
    top:1294px;
}
@media screen and (max-width:1900px) {
    .vision .deco3{
        left: calc((355 / 1920) * 100vw);
        top:calc((1294 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision .deco3{
        left: calc((37 / 750) * 100vw);
        top: calc((457 / 750) * 100vw);
        width: calc((100 / 750) * 100vw);
    }
}

.vision .deco4{
    position: absolute;
    max-width: calc(550px / 2);
    width: calc(((550 / 2) / 1920) * 100vw);
    right: 320px;
    top:1366px;
}
@media screen and (max-width:1900px) {
    .vision .deco4{
        right: calc((320 / 1920) * 100vw);
        top:calc((1366 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision .deco4{
        display: none;
    }
}

.vision  .contents{
    position: relative;
    text-align: center;
    top: 639px;
}
@media screen and (max-width:1900px) {
    .vision  .contents{
        top:calc((639 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision  .contents{
        top: calc((357 / 750) * 100vw);
    }
}

.vision  .contents h3{
    margin: 0 0 140px;
}
@media screen and (max-width:1900px) {
    .vision  .contents h3{
        margin: 0 0 calc((140 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision  .contents h3{
        margin: 0 0 calc((120 / 750) * 100vw);
    }
}

.vision .contents .title{
    max-width: calc(1030px / 2);
    width: calc(((1030 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .vision .contents .title{
      width: calc((400 / 750) * 100vw);
    }
}

.vision .contents .lead{
    max-width: calc(1340px / 2);
    width: calc(((1340 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .vision .contents .lead{
        width: calc((410 / 750) * 100vw);
    }
}

.vision .contents p{
    font-size: 19px;
    width: 677px;
    margin: 0 auto;
    text-align: left;
    line-height: 2.1em;
    padding: 43px 16px 43px 20px;
}
@media screen and (max-width:1900px) {
    .vision .contents p{
        font-size: calc((19 / 1920) * 100vw);
        width: calc((677 / 1920) * 100vw);
        padding: calc((43 / 1920) * 100vw) calc((16 / 1920) * 100vw) calc((43 / 1920) * 100vw) calc((20 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .vision .contents p{
        font-size: calc((23 / 750) * 100vw);
        padding: calc((52 / 750) * 100vw) calc((58 / 750) * 100vw) 0px;
        width: 100%;
    }
}

/* campaign */

.campaign{
    position: relative;
    width: 100%;
    max-width: 1920px;
    background-color: #CAA357;
    border-bottom: 90px solid #000000;
}
@media screen and (max-width:1900px) {
    .campaign{
        border-bottom: calc((90 / 1920) * 100vw) solid #000000;
    }
}
@media screen and (max-width:768px) {
    .campaign{
        border-bottom: calc((50 / 750) * 100vw) solid #000000;
    }
}

.campaign .deco1{
    position: absolute;
    max-width: calc(540px / 2);
    width: calc(((540 / 2) / 1920) * 100vw);
    left: 50%;
    transform: translateX(-50%);
    top:-240px;
}
@media screen and (max-width:1900px) {
    .campaign .deco1{
        top:calc((-240 / 1920) * 100vw);
    }
}
@media screen and (max-width:768px) {
    .campaign .deco1{
        width: calc((176 / 750) * 100vw);
        top:calc((-157 / 750) * 100vw);
    }
}

.campaign .contents{
    position: relative;
    text-align: center;
    padding: 128px 0 174px 0;
}
@media screen and (max-width:1900px) {
    .campaign .contents{
        padding: calc((128 / 1920) * 100vw) 0 calc((174 / 1920) * 100vw) 0;
    }
}
@media screen and (max-width:768px) {
    .campaign .contents{
        padding: calc((104 / 750) * 100vw) 0 calc((70 / 750) * 100vw) 0;
    }
}

.campaign .contents h3{
    margin: 0 0 90px;
}
@media screen and (max-width:768px) {
    .campaign .contents h3{
        margin: 0 0 calc((45 / 750) * 100vw);
    }
}

.campaign .contents .title{
    max-width: calc(1340px / 2);
    width: calc(((1340 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .campaign .contents .title{
        width: calc((530 / 750) * 100vw);
    }
}

.campaign .contents .lead{
    max-width: calc(680px / 2);
    width: calc(((680 / 2) / 1920) * 100vw);
}
@media screen and (max-width:768px) {
    .campaign .contents .lead{
        width: calc((280 / 750) * 100vw);
    }
}

@media screen and (max-width:768px) {
    .sp-none{
        display: none!important;
    }
}
@media screen and (min-width:768px) {
    .pc-none{
        display: none!important;
    }
}