#mv {
  position: relative;
  height: 380px;
  margin-top: 12rem; 
}
#mv .sec-inner{
  position: relative;
  height: 100%;
  /* padding-left: 20px;
  padding-right: 20px; */
}
#mv .sec-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/100th-history/mv-bg.jpg) center/cover no-repeat;
  z-index: -1;
}
#mv .sec-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 627px;
  height: 100%;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22627%22%20height%3D%22278%22%20viewBox%3D%220%200%20627%20278%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M627%20278L0%200V278H627Z%22%20fill%3D%22url(%23paint0_linear_2034_827)%22%20fill-opacity%3D%220.4%22%20style%3D%22mix-blend-mode%3Ascreen%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_2034_827%22%20x1%3D%22357.5%22%20y1%3D%22160%22%20x2%3D%2284.7457%22%20y2%3D%22348.273%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23D9D9D9%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23737373%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E') left bottom/contain no-repeat;
  z-index: 3;
  mix-blend-mode: overlay;
}
#mv .sec-bg .image {
  position: absolute;
  top: 0;
  right: 0;
  width: 720px;
  height: 100%;
}
#mv .sec-bg .image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 66.80%;
  height: 100%;
  background: linear-gradient(to right, #59BAEB, #59BAEB00);
  z-index: 2;
}
#mv .sec-bg img {
  opacity: .3;
}
#mv .sec-title {
  display: flex;
  align-items: center;
  gap: 0 33px;
  color: #fff;
  padding-top: 223px;
  max-width: 1406px;
  width: 100%;
  margin: 0 auto;
}
#mv .sec-title .ja {
  font-size: 44px;
}
#mv .sec-title .en {
  font-size: 24px;
  font-family: var(--ff-en);
  font-weight: 600;
}
#mv .sec-text {
  position: absolute;
  width: 100%;
  height: fit-content;
  top: 257px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10rem;
  font-family: var(--ff-en);
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1.2;
  background: linear-gradient(to right, #2478a3cc, #0034A6cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  opacity: .5;
  max-width: 1500px;
  width: 100%;
  z-index: -1;
}
/* TAB */
@media screen and (max-width: 1024px) {
  #mv {
    margin-top: 50px;
    height: 305px;
  }
  #mv .sec-bg .image {
    width: 60%;
  }
  #mv .sec-title {
    gap: 0 26px;
    padding-top: 186px;
  }
  #mv .sec-title .ja {
    font-size: 38px;
  }
  #mv .sec-title .en {
    font-size: 19px;
  }
  #mv .sec-text {
    top: 220px;
  }
}
/* SP */
@media screen and (max-width: 768px) {
  #mv {
    height: 230px;
  }
  #mv .sec-bg::before {
    width: 50%;
  }
  #mv .sec-bg .image {
    width: 80%;
  }
  #mv .sec-title {
    flex-wrap: wrap;
    gap: 0 20px;
    padding-top: 140px;
  }
  #mv .sec-title .ja {
    font-size: 33px;
  }
  #mv .sec-title .en {
    font-size: 14px;
  }
  #mv .sec-text {
    top: 180px;
  }
}

/* History */
#intro {
  position: relative;
  margin-top: 50px;
  padding-top: 80px;
  z-index: -1;
}
#intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80vw;
  min-height: calc(100% - 127px);
  background: url(../img/100th/history-bg.jpg) center/cover no-repeat;
  z-index: -1;
}
#intro::after {
  content: "";
  position: absolute;
  width: 128.3rem;
  aspect-ratio: 1283/505;
  background: url(../img/common/logo-rio-white.svg) center/contain no-repeat;
  z-index: -1;
  opacity: 0.2;
  bottom: 208px;
  left: -42.7rem;
}
#intro .sec-title {
  position: relative;
  max-width: 1630px;
  margin: 0 auto;
  margin-bottom: 70px;
  z-index: 2;
}
#intro .sec-text {
  font-size: 18px;
  font-weight: 500;
  line-height: 2.2;
  max-width: 670px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 208px;
}
#intro .sec-slide {
  position: relative;
  margin-bottom: 107px;
  overflow: clip visible;
}
#intro .sec-slide::before{
  content: "";
  position: absolute;
  width: 110rem;
  aspect-ratio: 1100/433;
  background: url(../img/common/logo-rio-white.svg) center/contain no-repeat;
  z-index: -1;
  opacity: 0.2;
  top: -18rem;
  right: -22.5rem;
}
#intro .sec-slide::after {
  content: "";
  position: absolute;
  left: 14.3rem;
  top: -12rem;
  /* width: 818px; */
  width: 730px;
  max-width: 100%;
  height: 100%;
  background: url(../img/100th-history/history-text.svg) left top/contain no-repeat;
  z-index: -1;
}
#intro .sec-slide .item {
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 940px;
}
#intro .sec-slide .item img {
  max-width: 1000px;
}
#intro .sec-slide .item-1 {
  margin-left: 50px;
}
#intro .sec-slide .item-1 img {
  /* width: 410px; */
  width: 117.14%;
  margin-top: 177px;
}
#intro .sec-slide .item-2 img {
  /* width: 318px; */
  width: 90.85%;
  margin-left: 196px;
}
#intro .sec-slide .item-3 {
  justify-content: flex-end;
}
#intro .sec-slide .item-3 img {
  /* width: 316px; */
  width: 90.28%;
  margin-left: -65px;
  margin-bottom: 80px;
}
#intro .sec-slide .item-4 img {
  /* width: 416px; */
  width: 118.85%;
  margin-top: 96px;
  margin-left: 53px;
}
#intro .sec-slide .item-5 img {
  /* width: 317px; */
  width: 90.57%;
  margin-top: 40px;
  margin-left: 271px;
}
#intro .sec-slide .item-6 {
  justify-content: flex-end;
}
#intro .sec-slide .item-6 img {
  /* width: 507px; */
  width: 144.85%;
}
#intro .sec-slide .item-7 img {
  /* width: 331px; */
  /* width: 94.57%; */
  width: 75.14%;
  margin-top: 96px;
  margin-left: -8px;
}
/* TAB */
@media screen and (max-width: 1024px) {
  #intro {
    margin-top: 40px;
    padding-top: 65px;
  }
    #intro::after {
    width: 80%;
    bottom: 160px;
  }
  #intro .sec-title {
    margin-bottom: 55px;
  }
  #intro .sec-text {
    font-size: 17px;
    padding-bottom: 170px;
  }
  #intro .sec-slide {
    margin-bottom: 85px;
  }
  #intro .sec-slide::after {
    left: 20px;
    top: -90px;
    max-width: 60%;
  }
  #intro .sec-slide .item {
    width: 30vw;
    height: 90vw;
  }
  #intro .sec-slide .item-1 {
    justify-content: center;
    margin-left: 10vw;
  }
  #intro .sec-slide .item-1 img {
    width: 140%;
    margin-top: 0;
  }
  #intro .sec-slide .item-2 img {
    width: 109%;
    margin-left: 20vw;
  }
  #intro .sec-slide .item-3 img {
    width: 108%;
    margin-bottom: 3vw;
    margin-left: -3vw;
  }
  #intro .sec-slide .item-4 img {
    width: 142%;
    margin-top: 5vw;
    margin-left: 6vw;
  }
  #intro .sec-slide .item-5 img {
    width: 108%;
    margin-top: 2vw;
    margin-left: 24vw;
  }
  #intro .sec-slide .item-6 img {
    width: 173%;
  }
  #intro .sec-slide .item-7 img {
    width: 90%;
    margin-top: 5vw;
    margin-left: 0;
  }
}
/* SP */
@media screen and (max-width: 768px) {
  #intro {
    margin-top: 30px;
    padding-top: 48px;
  }
  #intro .sec-title {
    margin-bottom: 42px;
  }
  #intro .sec-text {
    font-size: 16px;
    padding: 0 20px;
    padding-bottom: 125px;
  }
  #intro .sec-slide {
    margin-bottom: 65px;
  }
  #intro .sec-slide::before{
    width: 65%;
    top: -100px;
  }
  #intro .sec-slide::after {
    top: -75px;
  }
}

#history {
  position: relative;
  overflow: hidden;
}
#history::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: 76.71vw; */
  height: 1473px;
  background: url(../img/100th/history-bg.jpg) center/cover no-repeat;
  z-index: -1;
}
#history::after {
  content: "";
  position: absolute;
  bottom: 65.7rem;
  right: -22.5rem;
  width: 110rem;
  aspect-ratio: 1100 / 433;
  background: url(../img/common/logo-rio-white.svg) center / contain no-repeat;
  z-index: -1;
  opacity: 0.2;
}
#history .sec-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin-bottom: 80px;
}
#history .sec-btns .item {
  display: inline-block;
  border-radius: 100px;
  padding: 12px 32px;
  color: var(--c-sub);
  font-size: 19px;
  font-weight: 700;
  background: #E3F1F0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: color .3s;
  position: relative;
}
#history .sec-btns .text {
  position: relative;
  z-index: 2;
}
#history .sec-btns .item::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #419BB6 0%, #B4C3E6 100%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s;
}
#history .sec-btns .item:hover {
  color: #fff;
}
#history .sec-btns .item:hover::before {
  opacity: 1;
}
#history .sec-wrap {
  padding-left: 47px;
  position: relative;
  margin-bottom: 108px;
}
#history .sec-wrap::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  top: 0;
  left: 16px;
  background: var(--c-sub);
}
#history .sec-list:not(:nth-of-type(1)) {
  margin-top: 80px;
}
#history .sec-list:nth-last-of-type(1) .sec-item:nth-last-of-type(2) .left,
#history .sec-list:nth-last-of-type(1) .sec-item:nth-last-of-type(3) .left{
  color: #fff;
}
#history .sec-list:nth-last-of-type(1) .sec-item:nth-last-of-type(4) .left{
  color: #ACD2E5;
}
#history .sec-title {
  color: var(--c-sub);
  font-family: var(--ff-en);
  font-size: 37px;
  font-weight: 600;
  background: #E3F1F0;
  padding: 4px 42px;
  margin-bottom: 74px;
}
#history .sec-item {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0 6.5rem;
}
#history .sec-item:not(:nth-of-type(1)) {
  margin-top: 65px;
}
#history .sec-item.-pickup {
  gap: 0 5.4rem;
}
#history .sec-item::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -47px;
  width: 33px;
  height: 33px;
  background: #fff;
  border: 2px solid #419BB6;
  border-radius: 50%;
  transition: border .3s .5s;
}
#history .sec-item::after {
  content: "";
  position: absolute;
  top: 15px;
  left: -42px;
  width: 23px;
  height: 23px;
  background: #419BB6;
  border-radius: 50%;
  transition: background .3s .5s;
}
#history .sec-item.-inview::before {
  border-color: #024890;
}
#history .sec-item.-inview::after {
  background-color: #024890;
}
#history .sec-item .left {
  color: #CAE5F3;
  font-family: var(--ff-en);
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
}
#history .sec-item.-pickup .left {
  transform: translateY(-25%);
  color: #024890;
  font-family: var(--ff-eb);
  font-size: 90px;
  font-weight: 400;
  font-style: italic;
}
#history .sec-item .texts {
  clip-path: inset(0 100% 0 0);
  transform: translateX(4.8611111111vw);
  transition: 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  transition-property: clip-path, transform;
}
#history .sec-item.-inview .texts {
  clip-path: inset(0 0 0 0);
  transform: none;
}
#history .sec-item .title {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}
#history .sec-item .title.col {
  color: var(--c-sub);
}
#history .sec-item .title.large {
  font-size: 29px;
}
#history .sec-item.-pickup .title {
  color: #024890;
}
#history .sec-item .text {
  font-weight: 500;
  line-height: 1.425;
  max-width: 902px;
  width: 100%;
}
#history .sec-item.-pickup .text {
  max-width: 571px;
  width: 100%;
}
#history .sec-item .image-box {
  display: flex;
  gap: 4.5rem;
  width: 100%;
  margin-top: 30px;
}
#history .sec-item .image {
  max-width: 400px;
  aspect-ratio: 400/267;
}
#history .sec-item.-pickup .image {
  max-width: 474px;
}
#history .sec-loop{
  margin-bottom: 105px;
  width: 100vw;
  margin-left: -20px;
}
/* TAB */
@media screen and (max-width: 1024px) {
  #history::before {
    height: 1200px;
  }
  #history::after {
    bottom: 500px;
    width: 850px;
  }
  #history .sec-btns {
    gap: 15px;
    margin-bottom: 65px;
  }
  #history .sec-btns .item {
    font-size: 16px;
  }
  #history .sec-wrap {
    padding-left: 33px;
    margin-bottom: 80px;
  }
  #history .sec-wrap::before {
    left: 11px;
  }
  #history .sec-list:not(:nth-of-type(1)) {
    margin-top: 65px;
  }
  #history .sec-title {
    font-size: 32px;
    padding: 3px 24px;
    margin-bottom: 59px;
  }
  #history .sec-item {
    gap: 16px;
  }
  #history .sec-item:not(:nth-of-type(1)) {
    margin-top: 47px;
  }
  #history .sec-item.-pickup {
    gap: 0 16px;
  }
  #history .sec-item::before {
    left: -33px;
    width: 24px;
    height: 24px;
  }
  #history .sec-item::after {
    top: 14px;
    left: -29px;
    width: 16px;
    height: 16px;
  }
  #history .sec-item .left {
    font-size: 43px;
  }
  #history .sec-item.-pickup .left {
    font-size: 79px;
  }
  #history .sec-item .title {
    font-size: 18px;
  }
  #history .sec-item .title.large {
    font-size: 25px;
  }
  #history .sec-item .image-box {
    gap: 16px;
    margin-top: 25px;
  }
  #history .sec-item .image {
    max-width: 350px;
  }
  #history .sec-item.-pickup .image {
    max-width: 414px;
  }
}
/* SP */
@media screen and (max-width: 768px) {
  #history::before {
    height: 1400px;
  }
  #history::after {
    width: 110%;
  }
  #history .sec-btns {
    gap: 10px;
    margin-bottom: 48px;
  }
  #history .sec-btns .item {
    padding: 9px 24px;
    font-size: 14px;
  }
  #history .sec-wrap {
    padding-left: 23px;
    margin-bottom: 65px;
  }
  #history .sec-wrap::before {
    left: 7px;
  }
  #history .sec-list:not(:nth-of-type(1)) {
    margin-top: 48px;
  }
  #history .sec-title {
    font-size: 27px;
    padding: 2px 16px;
    margin-bottom: 44px;
  }
  #history .sec-item {
    flex-direction: column;
  }
  #history .sec-item:not(:nth-of-type(1)) {
    margin-top: 40px;
  }
  #history .sec-item::before {
    left: -23px;
    width: 16px;
    height: 16px;
  }
  #history .sec-item::after {
    top: 13px;
    left: -20px;
    width: 10px;
    height: 10px;
  }
  #history .sec-item .left {
    font-size: 37px;
  }
  #history .sec-item.-pickup .left {
    font-size: 67px;
  }
  #history .sec-item .title {
    font-size: 17px;
  }
  #history .sec-item .title.large {
    font-size: 21px;
  }
  #history .sec-item .image-box {
    gap: 8px;
    margin-top: 20px;
  }
  #history .sec-item .image {
    max-width: 300px;
  }
  #history .sec-item.-pickup .image {
    max-width: 355px;
  }
}