@charset "utf-8";

html,
body {
  width: 100%;
  height: 100%;
}

/* -------------------header------------------------ */
.header > div {
  background-color: transparent;
  box-shadow: none;
}

.header .nav li a {
  padding: 5px 0;
}

/* -------------------main-------------------------- */
.main {
  width: 100%;
}

/* -----------------load---------------- */

.fade01 {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fade02,
.fade03 {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.is_load {
  opacity: 1;
}

.fade_up {
  opacity: 0;
  translate: 0 1.5vw;
  transition: all 200ms ease var(--delay) !important;
}

.fade_up.is_load {
  opacity: 1;
  translate: 0 0;
}

/* --------------mv------------- */
.mv {
  width: 100%;
  height: auto;
  min-height: 100vh;
  padding-top: 104px;
  overflow-x: hidden;
  background: url(../img/index/mv_bg.svg) center bottom/cover;
  position: relative;
}

.loop_text {
  display: flex;
  width: 100%;
  white-space: nowrap;
  position: absolute;
  bottom: clamp(63px, 4.8vw, 4.8vw);
  z-index: 1;
}

.loop_text div {
  width: calc((100 / 1300) * 2624 * 1%);
  height: auto;
  flex: 0 0 auto;
  padding-right: calc((100 / 1300) * 16 * 1%);
}

.loop_text div img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.loop_text .loop1 {
  animation: loop1 100s linear -50s infinite;
}

.loop_text .loop2 {
  animation: loop2 100s linear infinite;
}

.mv .flex {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  position: relative;
  z-index: 10;
  overflow-x: auto;
}

.mv .flex .texts {
  padding-left: calc((100 / 472) * 9 * 1%);
  margin-left: auto;
}

.mv .mv_map_wrap {
  height: calc((100 / 664) * 674 * 1%);
  margin-left: calc((100 / 665) * -144 * 1vh);
  margin-right: auto;
  position: relative;
}

.mv img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes loop1 {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

.bubble {
  width: fit-content;
  position: absolute;
  cursor: pointer;
  z-index: 100;
}

.bubble:nth-child(1) {
  bottom: calc((100 / 665) * 345 * 1%);
  left: calc((100 / 747) * 207 * 1%);
}

.bubble:nth-child(2) {
  bottom: calc((100 / 665) * 493 * 1%);
  right: calc((100 / 747) * 497 * 1%);
}

.bubble:nth-child(3) {
  bottom: calc((100 / 665) * 416 * 1%);
  right: calc((100 / 747) * 330 * 1%);
}

.bubble:nth-child(4) {
  bottom: calc((100 / 665) * 436 * 1%);
  left: calc((100 / 747) * 587 * 1%);
}
.bubble:nth-child(5) {
  bottom: calc((100 / 665) * 254 * 1%);
  right: calc((100 / 747) * 376 * 1%);
}

.bubble:nth-child(6) {
  bottom: calc((100 / 665) * 566 * 1%);
  left: calc((100 / 747) * 559 * 1%);
}

.bubble:has(.speechBubble:hover) {
  cursor: default;
}

.speechBubble {
  display: block;
  height: calc((100 / 768) * 48 * 1vh);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: calc((100 / 768) * 7 * 1vh) solid var(--main);
  background-color: white;
  text-align: center;
  font-size: calc((100 / 768) * 18 * 1vh);
  line-height: 1.845em;
  letter-spacing: 0.03em;
  color: var(--main);
  box-shadow: 0 0 0 calc((100 / 768) * 3 * 1vh) white;
  cursor: pointer;
  position: relative;
}

.speechBubble:hover {
  height: auto;
  aspect-ratio: auto;
  padding: calc((100 / 768) * 17 * 1vh);
  border-radius: calc((100 / 768) * 24 * 1vh);
  line-height: 0.7;
  cursor: default;
}

.speechBubble:hover .hover {
  display: block;
  margin-top: calc((100 / 768) * 16 * 1vh);
}

.speechBubble::before {
  content: '';
  display: block;
  height: calc((100 / 768) * 12 * 1vh);
  aspect-ratio: 10/12;
  background-color: var(--main);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  position: absolute;
  bottom: calc((100 / 768) * -6 * 1vh);
  left: 50%;
  translate: -50% 100%;
  z-index: -10;
}

.speechBubble::after {
  content: '';
  display: block;
  height: calc((100 / 768) * 15 * 1vh);
  aspect-ratio: 10/11;
  background-color: white;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  position: absolute;
  bottom: calc((100 / 768) * -7 * 1vh);
  left: 50%;
  translate: -50% 100%;
  z-index: -100;
}

.speechBubble .hover {
  display: none;
}

#bubble_1,
#bubble_4,
#bubble_6 {
  transform: translateX(-50%);
  transition: all 0.3s;
}

#bubble_1:hover,
#bubble_4:hover,
#bubble_6:hover {
  transform: translateX(-50%);
}

#bubble_2,
#bubble_3,
#bubble_5 {
  transform: translateX(50%);
  transition: all 0.3s;
}

#bubble_2:hover,
#bubble_3:hover,
#bubble_5:hover {
  transform: translateX(50%);
}

.mv .copy {
  padding: 24px 80px;
  font-size: 12px;
  line-height: 1.8em;
  color: var(--main);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.banner {
  display: flex;
  width: fit-content;
  padding: 16px 55px 16px 18px;
  justify-content: space-between;
  align-items: center;
  column-gap: 16px;
  background-color: white;
  border-radius: 100px 0 0 100px;
  box-shadow: 0 4px 20px rgba(20, 21, 23, 0.2);
  position: absolute;
  bottom: calc((100 / 768) * 31 * 1%);
  right: 0;
  z-index: 100;
}

.banner::after {
  content: '';
  display: block;
  width: 7px;
  aspect-ratio: 7/10;
  background: url(../img/arrow_blue.svg) no-repeat center/cover;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.banner .photo {
  width: 98px;
  aspect-ratio: 1/1;
}

.banner .texts {
  width: 212px;
}

.banner .sdgs_logo {
  width: 212px;
  aspect-ratio: 212/28;
  margin-bottom: 8px;
}

.banner p {
  text-decoration: underline;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6em;
  letter-spacing: 0.03em;
}

.button01 {
  display: flex;
  width: 148px;
  height: 148px;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  bottom: calc((100 / 768) * 588 * 1%);
  right: calc((100 / 768) * 602 * 1%);
  z-index: 100;
  border: solid 6px var(--main);
  padding-bottom: 13px;
}

.button01::after {
  content: '';
  display: block;
  width: 20px;
  aspect-ratio: 10/10;
  background: url(../img/arrow_icon_blue.svg) no-repeat center/cover;
  position: absolute;
  right: 58px;
  top: 85%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.button01 p {
  text-align: center;
  width: fit-content;
  color: var(--main);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: 0.03em;
}

.button02 {
  display: flex;
  width: 193px;
  height: 94px;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
  background-color: white;
  border-radius: 24px;
  position: absolute;
  bottom: calc((100 / 768) * 189 * 1%);
  left: calc((100 / 768) * 611 * 1%);
  z-index: 100;
  border: solid 6px #da1912;
  box-shadow: 0 0 0 calc((100 / 768) * 3 * 1vh) white;
  padding-right: 35px;
}

.button02::before {
  content: '';
  display: block;
  width: calc((100 / 768) * 14 * 1vh);
  aspect-ratio: 12 / 10;
  background-color: #fff;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  position: absolute;
  left: calc((100 / 768) * -23 * 1vh);
  top: 50%;
  translate: 0 -50%;
  z-index: -11;
}
.button02::after {
  content: '';
  display: block;
  width: calc((100 / 768) * 12 * 1vh);
  aspect-ratio: 12 / 10;
  background-color: #da1912;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  position: absolute;
  left: calc((100 / 768) * -18 * 1vh);
  top: 50%;
  translate: 0 -50%;
  z-index: -10;
}
.button02 p::after {
  content: '';
  display: block;
  width: 8px;
  aspect-ratio: 10/10;
  background: url(../img/arrow_red.svg) no-repeat center/cover;
  position: absolute;
  right: 16px;
  top: 52%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.button02 p {
  width: fit-content;
  color: #da1912;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: 0.03em;
}

@media screen and (max-width: 750px) {
  /* -------------------main-------------------------- */

  /* --------------mv------------- */
  .mv {
    height: auto;
    min-height: calc((100 / 750) * 1620 * 1vw);
    padding-top: calc((100 / 750) * 237 * 1vw);
    background: url(../img/index/mv_bg_sp.svg) no-repeat center bottom/contain;
  }

  .loop_text {
    bottom: calc((100 / 750) * 286 * 1vw);
  }

  .loop_text div {
    width: calc((100 / 750) * 3286 * 1vw);
    padding-right: calc((100 / 750) * 16 * 1vw);
  }

  .mv .flex {
    display: block;
  }

  .mv .flex .texts {
    width: calc((100 / 750) * 678 * 1vw);
    height: auto;
    aspect-ratio: 588/282;
    margin: 0 auto calc((100 / 750) * 55 * 1vw);
    padding-left: calc((100 / 750) * 1 * 1vw);
  }

  .mv .mv_map_wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 750/728;
    margin-left: 0;
    margin-bottom: calc((100 / 750) * 8 * 1vw);
  }

  .bubble:nth-child(1) {
    bottom: calc((100 / 665) * 362 * 1%);
    left: calc((100 / 747) * 177 * 1%);
  }

  .bubble:nth-child(2) {
    bottom: calc((100 / 665) * 513 * 1%);
    right: calc((100 / 747) * 532 * 1%);
  }

  .bubble:nth-child(3) {
    bottom: calc((100 / 665) * 543 * 1%);
    right: calc((100 / 747) * 307 * 1%);
  }

  .bubble:nth-child(4) {
    bottom: calc((100 / 665) * 437 * 1%);
    left: calc((100 / 747) * 625 * 1%);
  }

  .bubble:nth-child(5) {
    bottom: calc((100 / 665) * 274 * 1%);
    right: calc((100 / 747) * 389 * 1%);
  }

  .bubble:nth-child(6) {
    bottom: calc((100 / 665) * 586 * 1%);
    left: calc((100 / 747) * 586 * 1%);
  }

  .speechBubble {
    width: calc((100 / 750) * 64 * 1vw);
    height: auto;
    border: calc((100 / 750) * 7 * 1vw) solid var(--main);
    font-size: calc((100 / 750) * 32 * 1vw);
    box-shadow: 0 0 0 calc((100 / 750) * 3 * 1vw) white;
  }

  .speechBubble:hover {
    width: fit-content;
    padding: calc((100 / 750) * 17 * 1vw);
    border-radius: calc((100 / 750) * 24 * 1vw);
  }

  .speechBubble:hover .hover {
    margin-top: calc((100 / 750) * 16 * 1vw);
    white-space: nowrap;
  }

  .speechBubble::before {
    width: calc((100 / 750) * 10 * 1vw);
    height: auto;
    bottom: calc((100 / 750) * -6 * 1vw);
  }

  .speechBubble::after {
    width: calc((100 / 750) * 16 * 1vw);
    height: auto;
    bottom: calc((100 / 750) * -7 * 1vw);
  }

  .banner {
    padding: calc((100 / 750) * 24 * 1vw) calc((100 / 750) * 78 * 1vw) calc((100 / 750) * 24 * 1vw)
      calc((100 / 750) * 26 * 1vw);
    column-gap: calc((100 / 750) * 32 * 1vw);
    border-radius: calc((100 / 750) * 100 * 1vw) 0 0 calc((100 / 750) * 100 * 1vw);
    box-shadow: 0 calc((100 / 750) * 4 * 1vw) calc((100 / 750) * 20 * 1vw) rgba(20, 21, 23, 0.2);
    position: relative;
    margin: 0 0 0 auto;
    bottom: 0;
  }

  .banner::after {
    width: calc((100 / 750) * 13 * 1vw);
    aspect-ratio: 13/19;
    right: calc((100 / 750) * 24 * 1vw);
  }

  .banner .photo {
    width: calc((100 / 750) * 147 * 1vw);
  }

  .banner .texts {
    width: calc((100 / 750) * 328 * 1vw);
  }

  .banner .sdgs_logo {
    width: calc((100 / 750) * 328 * 1vw);
    aspect-ratio: 328/43;
    margin-bottom: calc((100 / 750) * 16 * 1vw);
  }

  .banner p {
    font-size: calc((100 / 750) * 24 * 1vw);
  }

  .mv .copy {
    padding: calc((100 / 750) * 49 * 1vw);
    font-size: calc((100 / 750) * 22 * 1vw);
    position: static;
    text-align: center;
  }

  .button01 {
    display: flex;
    width: calc((100 / 750) * 250 * 1vw);
    height: calc((100 / 750) * 250 * 1vw);
    justify-content: center;
    align-items: center;
    column-gap: 16px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    bottom: calc((100 / 768) * 58 * 1%);
    right: calc((100 / 768) * 492 * 1%);
    z-index: 100;
    border: solid 6px var(--main);
    padding-bottom: 13px;
  }

  .button01::after {
    content: '';
    display: block;
    width: calc((100 / 750) * 50 * 1vw);
    aspect-ratio: 10/10;
    background: url(../img/arrow_icon_blue.svg) no-repeat center/cover;
    position: absolute;
    right: 12vw;
    top: 85%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .button01 p {
    font-size: calc((100 / 750) * 28 * 1vw);
  }

  .button02 {
    column-gap: 16px;
    border-radius: 24px;
    box-shadow: 0 0 0 calc((100 / 768) * 3 * 1vh) white;
    padding-right: 35px;
    width: calc((100 / 750) * 289 * 1vw);
    height: calc((100 / 750) * 141 * 1vw);
    bottom: calc((100 / 768) * 70 * 1%);
    left: calc((100 / 768) * 452 * 1%);
  }

  .button02::before {
    clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    left: calc((100 / 768) * 45 * 1vh);
    top: -23%;
    translate: 0 -50%;
    z-index: -11;
  }
  .button02::after {
    width: calc((100 / 768) * 12 * 1vh);
    aspect-ratio: 12 / 10;
    background-color: #da1912;
    clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    position: absolute;
    left: calc((100 / 768) * 46 * 1vh);
    top: -17%;
    translate: 0 -50%;
    z-index: -10;
  }
  .button02 p::after {
    width: 2.2vw;
    aspect-ratio: 10/10;
    right: 2vw;
    top: 52%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
  .button02 p {
    font-size: calc((100 / 750) * 24 * 1vw);
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 0.03em;
  }
}

.news-section {
  padding: 120px 0 180px;
}
.news-section h2 .en {
  font-size: 32px;
}

.news_li {
  padding: 0 80px;
}

.news_li li {
  margin-bottom: 8px;
  padding: 40px 56px;
  border-top: 2px dashed #858d93;
}

.news_li li:last-child {
  margin-bottom: 0;
  border-bottom: 2px dashed #858d93;
}

.news_li li.is-hidden {
  opacity: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

li.is-last {
  position: relative;
}

li.is-last::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(239, 239, 239, 1) 0%, rgb(239, 239, 239, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
}

.news .acco {
  display: flex;
  align-items: center;
  gap: 24px;
}
.news .acco .img img {
  width: 220px;
}
.news .acco summary {
  display: block;
  padding-right: 33px;
  position: relative;
  cursor: pointer;
}

.news .acco summary::-webkit-details-marker {
  display: none;
}

.news .acco summary::after {
  content: '';
  display: block;
  width: 25px;
  aspect-ratio: 1/1;
  background: url(../img/news/up_arrow.svg) no-repeat center/contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(180deg);
  -webkit-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transition: all 0.3s;
}

.news .acco[open] summary::after {
  transform: translateY(-50%) rotate(0deg);
}

.news_li .flex {
  display: flex;
  margin-bottom: 16px;
  align-items: center;
  column-gap: 24px;
}

.time {
  font-size: 13px;
  line-height: 1.2em;
  color: var(--main);
}

.category {
  padding: 0 24px;
  font-size: 12px;
  line-height: 1.7em;
  border-radius: 10px;
  background-color: #e3e5f1;
  color: #858d93;
}

.news_li h3 {
  font-size: 20px;
  line-height: 1.7em;
}

.news_li .text {
  padding: 32px 0 16px;
}

.news_li .text p {
  margin-bottom: 8px;
}

.news_li .text p:last-child {
  margin-bottom: 0;
}

.news_link {
  display: block;
  width: 428px;
  border-radius: 8px;
  margin-inline: auto;
  margin-top: 40px;
  padding: 23px 64px 23px 64px;
  color: white;
  background-color: var(--main);
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  position: relative;
}

.news_link::after {
  content: '';
  display: block;
  width: 32px;
  aspect-ratio: 1/1;
  background: white url(../img/arrow_icon_blue.svg) no-repeat center center/20px 20px;
  border-radius: 50%;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

@media screen and (max-width: 750px) {
  .news-section {
    padding: calc((100 / 750) * 128 * 1vw) 0 calc((100 / 750) * 144 * 1vw);
  }
  .news-section h2 .en {
    font-size: calc((100 / 750) * 64 * 1vw);
  }
  .news_li {
    padding: 0;
  }

  .news_li li {
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    padding: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 56 * 1vw);
  }

  .news .acco .img img {
    width: calc((100 / 750) * 640 * 1vw);
  }
  .news .acco {
    flex-direction: column;
    gap: calc((100 / 750) * 24 * 1vw);
  }
  .news .acco summary {
    padding-right: calc((100 / 750) * 56 * 1vw);
  }

  .news .acco summary::after {
    width: calc((100 / 750) * 32 * 1vw);
  }

  .news_li .flex {
    margin-bottom: calc((100 / 750) * 16 * 1vw);
    column-gap: calc((100 / 750) * 24 * 1vw);
  }

  .time {
    font-size: calc((100 / 750) * 22 * 1vw);
  }

  .category {
    padding: 0 calc((100 / 750) * 32 * 1vw);
    font-size: calc((100 / 750) * 20 * 1vw);
    border-radius: calc((100 / 750) * 17 * 1vw);
  }

  .news_li h3 {
    font-size: calc((100 / 750) * 30 * 1vw);
  }

  .news_li .text {
    padding: calc((100 / 750) * 40 * 1vw) 0 calc((100 / 750) * 16 * 1vw);
  }

  .news_li .text p {
    margin-bottom: calc((100 / 750) * 8 * 1vw);
  }

  .more_btn {
    width: calc((100 / 750) * 404 * 1vw);
    aspect-ratio: 404/104;
    margin: calc((100 / 750) * 72 * 1vw) auto 0;
    cursor: pointer;
  }

  .news_link {
    width: 100%;
    border-radius: calc((100 / 750) * 8 * 1vw);
    margin-top: 20vw;
    padding: calc((100 / 750) * 26 * 1vw) 0 calc((100 / 750) * 104 * 1vw);
    font-size: calc((100 / 750) * 32 * 1vw);
    line-height: 2em;
  }

  .news_link::after {
    width: calc((100 / 750) * 48 * 1vw);
    background: white url(../img/arrow_icon_blue.svg) no-repeat center
      center/calc((100 / 750) * 24 * 1vw) calc((100 / 750) * 24 * 1vw);
    right: 50%;
    top: auto;
    bottom: calc((100 / 750) * 40 * 1vw);
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
  }
}