@charset "UTF-8";
@media screen and (hover: hover) and (pointer: fine) {
  .main .data01 a, .main .data02 .list button > img {
    transition: opacity 0.4s;
  }
  .main .data01 a:hover, .main .data02 .list button > img:hover {
    opacity: 0.8;
  }
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

.sp {
  display: none;
}

@media screen and (max-width: 750px) {
  .pc {
    display: none;
  }
  .sp {
    display: revert;
  }
}
.main {
  margin-bottom: 0;
  position: relative;
  color: #404040;
  font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;
}
.main img {
  display: block;
  max-width: 100%;
  height: auto;
}
.main .fadeUp {
  opacity: 0;
  translate: 0 100px 0;
  transition: 1s;
  transition-property: opacity, translate;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .fadeUp {
    translate: 0 psSize(100) 0;
  }
}
@media screen and (max-width: 750px) {
  .main .fadeUp {
    translate: 0 13.3333333333vw 0;
  }
}
.main .fadeUp.scrollIn {
  opacity: 1;
  translate: 0 0 0;
}
.main .globalbg {
  display: grid;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(../imgs/mv_bg.png), linear-gradient(90deg, #ffe13f calc(50% - 92px), #aed63c calc(50% + 92px));
  background-position: 50% 0, -480px 0;
  background-size: 1980px auto, calc(100% + 960px) 100%;
  background-repeat: repeat-y, no-repeat;
  -webkit-animation: bg01 8s infinite alternate ease-in-out;
          animation: bg01 8s infinite alternate ease-in-out;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .globalbg {
    background-image: url(../imgs/mv_bg.png), linear-gradient(90deg, #ffe13f calc(50% - 4.7422680412vw), #aed63c calc(50% + 4.7422680412vw));
    background-position: 50% 0, -24.7422680412vw 0;
    background-size: 102.0618556701vw auto, calc(100% + 49.4845360825vw) 100%;
    -webkit-animation-name: bg01_pcNarrow;
            animation-name: bg01_pcNarrow;
  }
}
@media screen and (max-width: 750px) {
  .main .globalbg {
    background-image: url(../imgs/mv_bg_sp.png), linear-gradient(90deg, #ffe13f 42%, #aed63c 58%);
    background-position: 0 0, -33.3333333333vw 0;
    background-size: 100% auto, calc(100% + 66.6666666667vw) 100%;
    -webkit-animation-name: bg01_sp;
            animation-name: bg01_sp;
  }
}
@-webkit-keyframes bg01 {
  0% {
    background-position: 50% 0, -960px 0;
  }
  100% {
    background-position: 50% 0, 0 0;
  }
}
@keyframes bg01 {
  0% {
    background-position: 50% 0, -960px 0;
  }
  100% {
    background-position: 50% 0, 0 0;
  }
}
@-webkit-keyframes bg01_pcNarrow {
  0% {
    background-position: 50% 0, -49.4845360825vw 0;
  }
  100% {
    background-position: 50% 0, 0 0;
  }
}
@keyframes bg01_pcNarrow {
  0% {
    background-position: 50% 0, -49.4845360825vw 0;
  }
  100% {
    background-position: 50% 0, 0 0;
  }
}
@-webkit-keyframes bg01_sp {
  0% {
    background-position: 0 0, -66.6666666667vw 0;
  }
  100% {
    background-position: 0 0, 0 0;
  }
}
@keyframes bg01_sp {
  0% {
    background-position: 0 0, -66.6666666667vw 0;
  }
  100% {
    background-position: 0 0, 0 0;
  }
}
.main .globalbg::after {
  grid-area: 1/1;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../imgs/bg01.jpg) 50% 0/1920px auto repeat;
  mix-blend-mode: overlay;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .globalbg::after {
    background-size: 98.9690721649vw auto;
  }
}
@media screen and (max-width: 750px) {
  .main .globalbg::after {
    background-size: 256vw auto;
  }
}
.main .l-container {
  position: relative;
}
.main .mv {
  height: 1080px;
  position: relative;
  /*.bg {
  	width: 1980px;
  	position: absolute;
  	top: 0;
  	left: calc(50% - 990px);

  	@include pcNarrow {
  		width: pcSize(1980);
  		left: calc(50% - 51.0309278351vw);
  	}

  	@include sp {
  		width: 100%;
  		left: 0;
  	}
  }*/
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .mv {
    height: 55.6701030928vw;
  }
}
@media screen and (max-width: 750px) {
  .main .mv {
    height: 160vw;
    overflow: hidden;
  }
}
.main .mv .obj {
  width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .mv .obj {
    width: 51.5463917526vw;
  }
}
@media screen and (max-width: 750px) {
  .main .mv .obj {
    width: 140vw;
    margin: 0 -20vw;
  }
}
.main .mv .flag {
  width: 211px;
  margin: 0;
  position: absolute;
  top: 0;
  right: calc(50% + 736px);
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .mv .flag {
    width: 10.8762886598vw;
    right: calc(50% + 37.9381443299vw);
  }
}
@media screen and (max-width: 750px) {
  .main .mv .flag {
    width: 28.1333333333vw;
    right: auto;
    left: 5.3333333333vw;
  }
}
.main .mv .catch {
  width: 1350px;
  position: absolute;
  bottom: 82px;
  left: calc(50% - 675px);
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .mv .catch {
    width: 69.587628866vw;
    bottom: 4.2268041237vw;
    left: calc(50% - 34.793814433vw);
  }
}
@media screen and (max-width: 750px) {
  .main .mv .catch {
    width: 84vw;
    bottom: 4.6666666667vw;
    left: 8.4vw;
  }
}
.main .lead {
  padding: 104px 0 142px;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .lead {
    padding: 5.3608247423vw 0 7.3195876289vw;
  }
}
@media screen and (max-width: 750px) {
  .main .lead {
    padding: 13.3333333333vw 0;
  }
}
.main .lead p {
  width: 706px;
  margin: 0 auto;
  padding: 10px;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .lead p {
    width: 36.3917525773vw;
    padding: 0.5154639175vw;
    -webkit-backdrop-filter: blur(0.206185567vw);
            backdrop-filter: blur(0.206185567vw);
  }
}
@media screen and (max-width: 750px) {
  .main .lead p {
    width: 90vw;
    padding: 1.3333333333vw;
    -webkit-backdrop-filter: blur(0.5333333333vw);
            backdrop-filter: blur(0.5333333333vw);
  }
}
.main .data01 {
  display: grid;
  width: 1440px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data01 {
    width: 74.2268041237vw;
  }
}
@media screen and (max-width: 750px) {
  .main .data01 {
    width: 92vw;
  }
}
.main .data01 .helper {
  width: 1px;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.main .data01 .base,
.main .data01 .graph {
  grid-area: 1/1;
}
.main .data01 .base {
  filter: drop-shadow(0 0 29px rgba(35, 41, 21, 0.1));
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data01 .base {
    filter: drop-shadow(0 0 1.4948453608vw rgba(35, 41, 21, 0.1));
  }
}
@media screen and (max-width: 750px) {
  .main .data01 .base {
    filter: drop-shadow(0 0 3.8666666667vw rgba(35, 41, 21, 0.1));
  }
}
.main .data01 .graph {
  opacity: 0;
  position: relative;
  transition: opacity 1s;
}
.main .data01 a {
  display: block;
  width: 402px;
  position: absolute;
  left: calc(50% - 201px);
  bottom: 79px;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data01 a {
    width: 20.7216494845vw;
    left: calc(50% - 10.3608247423vw);
    bottom: 4.0721649485vw;
  }
}
@media screen and (max-width: 750px) {
  .main .data01 a {
    width: 64vw;
    left: 14.6666666667vw;
    bottom: 13.3333333333vw;
  }
}
.main .data01::after {
  content: "";
  display: block;
  width: 94px;
  aspect-ratio: 94/95;
  position: absolute;
  top: -43px;
  left: -36px;
  background: url(../imgs/data01_ring.png) 0 0/contain no-repeat;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data01::after {
    width: 4.8453608247vw;
    top: -2.2164948454vw;
    left: -1.8556701031vw;
  }
}
@media screen and (max-width: 750px) {
  .main .data01::after {
    width: 9.2vw;
    aspect-ratio: 69/75;
    top: -4.8vw;
    left: -4vw;
  }
}
.main .data01.scrollIn .graph {
  opacity: 1;
}
.main .data02 {
  width: 1440px;
  margin: 100px auto 0;
  position: relative;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data02 {
    width: 74.2268041237vw;
    margin: 5.1546391753vw auto 0;
  }
}
@media screen and (max-width: 750px) {
  .main .data02 {
    width: 92vw;
    margin: 9.3333333333vw auto 0;
  }
}
.main .data02 .helper {
  width: 1px;
  height: 9.534368071%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
@media screen and (max-width: 750px) {
  .main .data02 .helper {
    height: 40%;
  }
}
.main .data02 .base {
  filter: drop-shadow(0 0 29px rgba(35, 41, 21, 0.1));
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data02 .base {
    filter: drop-shadow(0 0 1.4948453608vw rgba(35, 41, 21, 0.1));
  }
}
@media screen and (max-width: 750px) {
  .main .data02 .base {
    filter: drop-shadow(0 0 3.8666666667vw rgba(35, 41, 21, 0.1));
  }
}
@media screen and (max-width: 750px) {
  .main .data02::before {
    content: "";
    display: block;
    width: 34.6666666667vw;
    aspect-ratio: 260/91;
    position: absolute;
    top: 151.0666666667vw;
    right: -1.3333333333vw;
    z-index: 1;
    background: url(../imgs/data02_swip.png) 0 0/contain no-repeat;
  }
}
.main .data02::after {
  content: "";
  display: block;
  width: 94px;
  aspect-ratio: 94/95;
  position: absolute;
  top: -43px;
  right: -36px;
  background: url(../imgs/data02_ring.png) 0 0/contain no-repeat;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data02::after {
    width: 4.8453608247vw;
    top: -2.2164948454vw;
    right: -1.8556701031vw;
  }
}
@media screen and (max-width: 750px) {
  .main .data02::after {
    width: 9.2vw;
    aspect-ratio: 69/75;
    top: -4.8vw;
    right: -4vw;
  }
}
.main .data02 .list {
  width: 1222px;
  position: absolute;
  bottom: 129px;
  left: 101px;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data02 .list {
    width: 62.9896907216vw;
    bottom: 6.6494845361vw;
    left: 5.206185567vw;
  }
}
@media screen and (max-width: 750px) {
  .main .data02 .list {
    width: 100%;
    bottom: 8.9333333333vw;
    left: 0;
    overflow: scroll;
  }
}
.main .data02 .list .inner {
  position: relative;
  aspect-ratio: 2444/1194;
}
@media screen and (max-width: 750px) {
  .main .data02 .list .inner {
    width: 274vw;
  }
}
.main .data02 .list button {
  width: 28px;
  border: none;
  padding: 0;
  position: absolute;
  z-index: 1;
  background: transparent;
  opacity: 0;
  translate: 0 -200% 0;
  cursor: pointer;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data02 .list button {
    width: 1.4432989691vw;
  }
}
@media screen and (max-width: 750px) {
  .main .data02 .list button {
    width: 6.2666666667vw;
  }
}
.main .data02 .list button .popup {
  display: none;
  width: 300px;
  position: absolute;
  top: -235px;
  left: -136px;
  filter: drop-shadow(3px 4px 20px rgba(0, 0, 0, 0.075));
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data02 .list button .popup {
    width: 15.4639175258vw;
    top: -12.1134020619vw;
    left: -7.0103092784vw;
    filter: drop-shadow(0.1546391753vw 0.206185567vw 1.0309278351vw rgba(0, 0, 0, 0.075));
  }
}
@media screen and (max-width: 750px) {
  .main .data02 .list button .popup {
    width: 40vw;
    top: -31.3333333333vw;
    left: -18.1333333333vw;
    filter: drop-shadow(0.4vw 0.5333333333vw 2.6666666667vw rgba(0, 0, 0, 0.075));
  }
}
.main .data02 .list button .popup img {
  width: 100%;
}
.main .data02 .list button .popup .chart {
  width: 120px;
  height: 120px;
  position: absolute;
  bottom: 33px;
  left: calc(50% - 60px);
  background: #e9eddd;
  border-radius: 50%;
  rotate: -90deg;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .data02 .list button .popup .chart {
    width: 6.1855670103vw;
    height: 6.1855670103vw;
    bottom: 1.7010309278vw;
    left: calc(50% - 3.0927835052vw);
  }
}
@media screen and (max-width: 750px) {
  .main .data02 .list button .popup .chart {
    width: 16vw;
    height: 16vw;
    bottom: 4.4vw;
    left: calc(50% - 8vw);
  }
}
.main .data02 .list button .popup .chart svg {
  width: 100%;
}
.main .data02 .list button .popup .chart circle {
  fill: none;
  stroke-width: 40;
  stroke-dashoffset: 0;
  -webkit-animation: 0.8s both ease-in-out;
          animation: 0.8s both ease-in-out;
}
.main .data02 .list button.active {
  z-index: 2;
}
.main .data02 .list button.active .popup {
  display: block;
}
.main .data02 .list .pe {
  bottom: 23.5993208829%;
  left: 25.5319148936%;
  -webkit-animation-delay: 0.12625s;
          animation-delay: 0.12625s;
}
.main .data02 .list .pe.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02pe;
          animation-name: data02pe;
}
@-webkit-keyframes data02pe {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
@keyframes data02pe {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
.main .data02 .list .bz {
  bottom: 25.2971137521%;
  left: 31.3420621931%;
  -webkit-animation-delay: 0.21375s;
          animation-delay: 0.21375s;
}
.main .data02 .list .bz.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02bz;
          animation-name: data02bz;
}
@-webkit-keyframes data02bz {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 72.848, 125.6;
  }
}
@keyframes data02bz {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 72.848, 125.6;
  }
}
.main .data02 .list .uk {
  bottom: 66.8930390492%;
  left: 44.6808510638%;
  -webkit-animation-delay: 0.41875s;
          animation-delay: 0.41875s;
}
.main .data02 .list .uk.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02uk;
          animation-name: data02uk;
}
@-webkit-keyframes data02uk {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 77.872, 125.6;
  }
}
@keyframes data02uk {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 77.872, 125.6;
  }
}
.main .data02 .list .fr {
  bottom: 59.4227504244%;
  left: 45.8265139116%;
  -webkit-animation-delay: 0.43625s;
          animation-delay: 0.43625s;
}
.main .data02 .list .fr.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02fr;
          animation-name: data02fr;
}
@-webkit-keyframes data02fr {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 94.2, 125.6;
  }
}
@keyframes data02fr {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 94.2, 125.6;
  }
}
.main .data02 .list .sw {
  bottom: 64.8556876061%;
  left: 47.6268412439%;
  -webkit-animation-delay: 0.46375s;
          animation-delay: 0.46375s;
}
.main .data02 .list .sw.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02sw;
          animation-name: data02sw;
}
@-webkit-keyframes data02sw {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 70.336, 125.6;
  }
}
@keyframes data02sw {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 70.336, 125.6;
  }
}
.main .data02 .list .it {
  bottom: 59.0831918506%;
  left: 49.4271685761%;
  -webkit-animation-delay: 0.49125s;
          animation-delay: 0.49125s;
}
.main .data02 .list .it.active .popup .chart circle {
  stroke: #bad853;
  -webkit-animation-name: data02it;
          animation-name: data02it;
}
@-webkit-keyframes data02it {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 85.408, 125.6;
  }
}
@keyframes data02it {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 85.408, 125.6;
  }
}
.main .data02 .list .gh {
  bottom: 37.5212224109%;
  left: 45.6628477905%;
  -webkit-animation-delay: 0.43375s;
          animation-delay: 0.43375s;
}
.main .data02 .list .gh.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02gh;
          animation-name: data02gh;
}
@-webkit-keyframes data02gh {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 67.824, 125.6;
  }
}
@keyframes data02gh {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 67.824, 125.6;
  }
}
.main .data02 .list .ke {
  bottom: 33.7860780985%;
  left: 48.1178396072%;
  -webkit-animation-delay: 0.5975s;
          animation-delay: 0.5975s;
}
.main .data02 .list .ke.active .popup .chart circle {
  stroke: #bad853;
  -webkit-animation-name: data02ke;
          animation-name: data02ke;
}
@-webkit-keyframes data02ke {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 90.432, 125.6;
  }
}
@keyframes data02ke {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 90.432, 125.6;
  }
}
.main .data02 .list .za {
  bottom: 14.2614601019%;
  left: 52.1276595745%;
  -webkit-animation-delay: 0.5325s;
          animation-delay: 0.5325s;
}
.main .data02 .list .za.active .popup .chart circle {
  stroke: #bad853;
  -webkit-animation-name: data02za;
          animation-name: data02za;
}
@-webkit-keyframes data02za {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
@keyframes data02za {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
.main .data02 .list .in {
  bottom: 45.8404074703%;
  left: 67.1849427169%;
  -webkit-animation-delay: 0.7625s;
          animation-delay: 0.7625s;
}
.main .data02 .list .in.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02in;
          animation-name: data02in;
}
@-webkit-keyframes data02in {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 102.992, 125.6;
  }
}
@keyframes data02in {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 102.992, 125.6;
  }
}
.main .data02 .list .ch {
  bottom: 57.0458404075%;
  left: 74.1407528642%;
  -webkit-animation-delay: 0.86875s;
          animation-delay: 0.86875s;
}
.main .data02 .list .ch.active .popup .chart circle {
  stroke: #bad853;
  -webkit-animation-name: data02ch;
          animation-name: data02ch;
}
@-webkit-keyframes data02ch {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 62.8, 125.6;
  }
}
@keyframes data02ch {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 62.8, 125.6;
  }
}
.main .data02 .list .tw {
  bottom: 46.6893039049%;
  left: 79.0507364975%;
  -webkit-animation-delay: 0.94375s;
          animation-delay: 0.94375s;
}
.main .data02 .list .tw.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02tw;
          animation-name: data02tw;
}
@-webkit-keyframes data02tw {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 92.944, 125.6;
  }
}
@keyframes data02tw {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 92.944, 125.6;
  }
}
.main .data02 .list .th {
  bottom: 42.6146010187%;
  left: 72.7495908347%;
  -webkit-animation-delay: 0.8475s;
          animation-delay: 0.8475s;
}
.main .data02 .list .th.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02th;
          animation-name: data02th;
}
@-webkit-keyframes data02th {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 87.92, 125.6;
  }
}
@keyframes data02th {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 87.92, 125.6;
  }
}
.main .data02 .list .sg {
  bottom: 32.7674023769%;
  left: 74.2225859247%;
  -webkit-animation-delay: 0.87s;
          animation-delay: 0.87s;
}
.main .data02 .list .sg.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02sg;
          animation-name: data02sg;
}
@-webkit-keyframes data02sg {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
@keyframes data02sg {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
.main .data02 .list .vn {
  bottom: 42.6146010187%;
  left: 75.5319148936%;
  -webkit-animation-delay: 0.89s;
          animation-delay: 0.89s;
}
.main .data02 .list .vn.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02vn;
          animation-name: data02vn;
}
@-webkit-keyframes data02vn {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 77.872, 125.6;
  }
}
@keyframes data02vn {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 77.872, 125.6;
  }
}
.main .data02 .list .kr {
  bottom: 57.5551782683%;
  left: 81.3420621931%;
  -webkit-animation-delay: 0.9775s;
          animation-delay: 0.9775s;
}
.main .data02 .list .kr.active .popup .chart circle {
  stroke: #bad853;
  -webkit-animation-name: data02kr;
          animation-name: data02kr;
}
@-webkit-keyframes data02kr {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
@keyframes data02kr {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 65.312, 125.6;
  }
}
.main .data02 .list .au {
  bottom: 19.5246179966%;
  left: 82.7332242226%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.main .data02 .list .au.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02au;
          animation-name: data02au;
}
@-webkit-keyframes data02au {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 72.848, 125.6;
  }
}
@keyframes data02au {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 72.848, 125.6;
  }
}
.main .data02 .list .id {
  bottom: 32.0882852292%;
  left: 79.705400982%;
  -webkit-animation-delay: 0.95125s;
          animation-delay: 0.95125s;
}
.main .data02 .list .id.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02id;
          animation-name: data02id;
}
@-webkit-keyframes data02id {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 87.92, 125.6;
  }
}
@keyframes data02id {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 87.92, 125.6;
  }
}
.main .data02 .list .et {
  bottom: 41.4261460102%;
  left: 55.2373158756%;
  -webkit-animation-delay: 0.58s;
          animation-delay: 0.58s;
}
.main .data02 .list .et.active .popup .chart circle {
  stroke: #ffde30;
  -webkit-animation-name: data02et;
          animation-name: data02et;
}
@-webkit-keyframes data02et {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 80.384, 125.6;
  }
}
@keyframes data02et {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 80.384, 125.6;
  }
}
.main .data02 .list .us {
  bottom: 61.4601018676%;
  left: 17.2667757774%;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.main .data02 .list .us.active .popup .chart circle {
  stroke: #bad853;
  -webkit-animation-name: data02us;
          animation-name: data02us;
}
@-webkit-keyframes data02us {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 90.432, 125.6;
  }
}
@keyframes data02us {
  0% {
    stroke-dasharray: 0, 125.6;
  }
  100% {
    stroke-dasharray: 90.432, 125.6;
  }
}
.main .data02.scrollIn .list button {
  -webkit-animation-name: data02button;
          animation-name: data02button;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes data02button {
  0% {
    opacity: 0;
    translate: 0 -200% 0;
  }
  100% {
    opacity: 1;
    translate: 0 0 0;
  }
}
@keyframes data02button {
  0% {
    opacity: 0;
    translate: 0 -200% 0;
  }
  100% {
    opacity: 1;
    translate: 0 0 0;
  }
}
.main .conclusion {
  padding: 150px 0 120px;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion {
    padding: 7.7319587629vw 0 6.1855670103vw;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion {
    padding: 16vw 0 16vw;
  }
}
.main .conclusion p {
  width: 548px;
  margin: 0 auto;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion p {
    width: 28.2474226804vw;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion p {
    width: 78.8vw;
  }
}
.main .conclusion .movie {
  display: flex;
  justify-content: center;
  gap: 50px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 78px auto 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.main .conclusion .movie::before {
  content: "";
  display: block;
  width: 197px;
  aspect-ratio: 197/188;
  position: absolute;
  top: -142px;
  left: -113px;
  z-index: -1;
  background: url(../imgs/conclusion_badge.png) 0 0/contain no-repeat;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .movie::before {
    width: 10.1546391753vw;
    top: -7.3195876289vw;
    left: -5.824742268vw;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .movie::before {
    width: 31.4666666667vw;
    top: -21.2vw;
    left: 28.2666666667vw;
    background-image: url(../imgs/conclusion_badge_sp.png);
  }
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .movie {
    gap: 2.5773195876vw;
    margin: 4.0206185567vw auto 0;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .movie {
    flex-direction: column;
    gap: 5.3333333333vw;
    width: 88vw;
    margin: 32vw auto 0;
  }
}
.main .conclusion .movie li {
  width: 600px;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  filter: drop-shadow(0 0 29px rgba(35, 41, 21, 0.1));
  overflow: hidden;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .movie li {
    width: 30.9278350515vw;
    border-radius: 0.5154639175vw;
    filter: drop-shadow(0 0 1.4948453608vw rgba(35, 41, 21, 0.1));
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .movie li {
    width: auto;
    border-radius: 1.0666666667vw;
    filter: drop-shadow(0 0 3.8666666667vw rgba(35, 41, 21, 0.1));
  }
}
.main .conclusion .movie a {
  display: block;
  position: relative;
  background: #000;
  text-decoration: none;
}
.main .conclusion .movie a::before {
  content: "";
  display: block;
  width: 70px;
  aspect-ratio: 1;
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 35px);
  z-index: 1;
  background: url(../imgs/ico-movie.png) 0 0/contain no-repeat;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .movie a::before {
    width: 3.6082474227vw;
    top: calc(50% - 3.0927835052vw);
    left: calc(50% - 1.8041237113vw);
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .movie a::before {
    width: 13.3333333333vw;
    top: calc(50% - 10.6666666667vw);
    left: calc(50% - 6.6666666667vw);
  }
}
.main .conclusion .movie a figure {
  margin: 0;
}
.main .conclusion .movie a img {
  width: 100%;
  opacity: 0.5;
  transition: opacity 0.4s;
}
@media screen and (hover: hover) and (pointer: fine) {
  .main .conclusion .movie a:hover img {
    opacity: 1;
  }
}
.main .conclusion .movie a figcaption {
  background: #fee24f;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 2.5;
  text-align: center;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .movie a figcaption {
    font-size: 1.0309278351vw;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .movie a figcaption {
    font-size: 3.4666666667vw;
    line-height: 2.3076923077;
  }
}
.main .conclusion .popupTarget {
  display: none;
}
.main .conclusion .sns {
  margin: 80px 0 0;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .sns {
    margin: 4.1237113402vw 0 0;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .sns {
    margin: 10.4vw 0 0;
  }
}
.main .conclusion .sns p {
  box-sizing: border-box;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6666666667;
  text-align: center;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .sns p {
    padding: 0.5154639175vw;
    font-size: 1.2371134021vw;
    -webkit-backdrop-filter: blur(0.206185567vw);
            backdrop-filter: blur(0.206185567vw);
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .sns p {
    padding: 1.3333333333vw;
    font-size: 4.2666666667vw;
    line-height: 1.71875;
    -webkit-backdrop-filter: blur(0.5333333333vw);
            backdrop-filter: blur(0.5333333333vw);
  }
}
.main .conclusion .sns ul {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 30px 0 0;
  padding: 0;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .sns ul {
    gap: 1.5463917526vw;
    margin: 1.5463917526vw 0 0;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .sns ul {
    flex-direction: column;
    gap: 5.3333333333vw;
    width: 80vw;
    margin: 5.0666666667vw auto 0;
  }
}
.main .conclusion .sns ul li {
  width: 400px;
  list-style: none;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .sns ul li {
    width: 20.618556701vw;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .sns ul li {
    width: auto;
  }
}
.main .conclusion .sns ul a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  height: 80px;
  background: #000;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .sns ul a {
    gap: 1.2371134021vw;
    height: 4.1237113402vw;
    border-radius: 0.2577319588vw;
    font-size: 0.9278350515vw;
    box-shadow: 0.3092783505vw 0.3092783505vw 0 rgba(0, 0, 0, 0.2);
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  .main .conclusion .sns ul a {
    transition: 0.4s;
    transition-property: translate, box-shadow;
  }
  .main .conclusion .sns ul a:hover {
    translate: 6px 6px 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
  }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .sns ul a:hover {
    translate: 0.3092783505vw 0.3092783505vw 0;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .sns ul a {
    gap: 5.3333333333vw;
    height: 16vw;
    border-radius: 0.6666666667vw;
    font-size: 3.8666666667vw;
    font-weight: 500;
    box-shadow: 1.3333333333vw 1.3333333333vw 0 rgba(0, 0, 0, 0.2);
  }
}
.main .conclusion .sns ul a::before {
  content: "";
  display: block;
  width: 30px;
  aspect-ratio: 1;
  background: url(../imgs/ico-x.svg) 0 0/contain no-repeat;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .main .conclusion .sns ul a::before {
    width: 1.5463917526vw;
  }
}
@media screen and (max-width: 750px) {
  .main .conclusion .sns ul a::before {
    width: 6.1333333333vw;
  }
}

.modaal-inner-wrapper {
  padding: 0;
}

.modaal-container {
  background: transparent;
  box-shadow: none;
  max-width: 1260px;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .modaal-container {
    max-width: 64.9484536082vw;
  }
}
@media screen and (max-width: 750px) {
  .modaal-container {
    width: 100%;
  }
}

.modaal-content-container {
  padding: 0;
}

.movieWrapper {
  border: 3px solid #542500;
  background: #542500;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
@media screen and (max-width: 1940px) and (min-width: 751px) {
  .movieWrapper {
    border-width: 0.1546391753vw;
    border-radius: 0.5154639175vw;
    box-shadow: 0 0 1.0309278351vw rgba(0, 0, 0, 0.1);
  }
}
@media screen and (max-width: 750px) {
  .movieWrapper {
    border-width: 0.4vw;
    border-radius: 1.0666666667vw;
    box-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.1);
  }
}
.movieWrapper .movie {
  aspect-ratio: 1.7777777778;
}
/*# sourceMappingURL=main.css.map */