/*reset*/
html,
body {
  height: 100%;
  margin: 0;
}

picture {
  display: block;
}

img {
  width: 100%;
}

/*base*/
html {
  -webkit-overflow-scrolling: touch;
}

/* CSS Document */
/*Base*/
.chart-wrapper {
  position: absolute;
  width: 530px;
  height: 530px;
  margin: -300px 135px 0px 135px;
}

.chart-wrapper .radius_txt {
  display: block;
  position: relative;
  width: 97%;
  top: -70%;
  left: 5%;
  z-index: 11;
}

.chart-wrapper .radius_object {
  display: block;
  position: relative;
  width: 157%;
  top: -91%;
  left: -31.5%;
  z-index: 10;
}

@media screen and (max-width: 440px) {
  .chart-wrapper {
    position: absolute;
    width: 60vw;
    height: 60vw;
    margin: -33% 0px 0px 19vw;
  }
}

@media screen and (max-width: 375px) {
  .chart-wrapper {
    position: absolute;
    width: 60vw;
    height: 60vw;
    margin: -33% 0px 0px 19vw;
  }
}

@media screen and (max-width: 350px) {
  .chart-wrapper {
    position: absolute;
    width: 60vw;
    height: 60vw;
    margin: -32% 0px 0px 19vw;
  }
}


.tv_area {
  position: relative;
  width: 729px;
  height: 0;
  min-height: 0;
  top: -963px;
  left: 35px;
  z-index: 100;
}

.tv_area img,
.tv_area source {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.offer-text {
  width: 700px;
  display: block;
  position: absolute;
  top: 29.3%;
  left: 6%;
  font-size: 13.5pt;
  line-height: 1.4;
}

.scroll-box_title ul {
  height: 30px;
  min-height: 30px;
  width: 700px;
  border: 1px solid #ccc;
  padding: 4px 0px 15px;
  font-size: 26px;
  line-height: 1.7;
  margin: 0 auto;
  position: relative;
  top: -40px;
  background-color: #999;
  color: #fff;
  display: flex;
  justify-content: space-around;
  z-index: 100;
  font-weight: 600;
  font-family: serif;
}

.tiele_nomber {
  position: relative;
  left: -20px;
}

.tiele_title {
  position: relative;
  left: -144px;
}

.tiele_date {
  position: relative;
  left: -34px;
}

#scroll-box {
  left: 5px;
  height: 326px;
  width: 712px;
  overflow: hidden;
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 0px;
  font-size: 24px;
  line-height: 1.7;
  margin: 0 auto;
  z-index: 10;
  position: relative;
  top: -419px;
  left: 0;
  display: flex;
  justify-content: space-around;
  font-weight: 600;
  font-family: serif;
  margin-bottom: -330px;
}

.nomber_flex {}

.title_flex {
  position: relative;
  left: -30px;
}

.date_flex {
  position: relative;
  left: -30px;
}

#scroll-box ul li {
  border-bottom: 1px dotted #ccc;
}

.tv_float {
  overflow: hidden;
  position: relative;
  width: 37%;
  top: -471px;
  left: -44px;
  z-index: 110;
}

@media screen and (max-width: 440px) {

  .scroll-box_title ul {
    height: 6vw;
    min-height: 6vw;
    width: 90%;
    border: 1px solid #ccc;
    padding: 0.4vw 0px 1.5vw;
    font-size: 0.8rem;
    line-height: 1.7;
    margin: 0 auto;
    position: relative;
    top: -4vw;
    background-color: #999;
    color: #fff;
    display: flex;
    justify-content: space-around;
    z-index: 100;
    font-weight: 600;
    font-family: serif;
  }

  .tiele_nomber {
    position: relative;
    left: -3.5vw;
  }

  .tiele_title {
    position: relative;
    left: -18vw;
  }

  .tiele_date {
    position: relative;
    left: -3vw;
  }

  #scroll-box {
    height: 41vw;
    width: 89%;
    overflow: hidden;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 2vw;
    font-size: 0.8rem;
    line-height: 1.7;
    margin: 0 auto;
    z-index: 10;
    position: relative;
    top: -52.5vw;
    left: 0;
    display: flex;
    justify-content: space-around;
    font-weight: 600;
    font-family: serif;
    margin-bottom: -42vw;
  }

  .nomber_flex {
    position: relative;
    left: -3vw;
  }

  .title_flex {
    position: relative;
    left: -4vw;
  }

  .date_flex {
    position: relative;
    left: -3vw;
  }

  .tv_area {
    top: -120.8vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 91.5%;
    height: 47.5vw;
    min-height: 47.5vw;
    margin-bottom: -50vw;
  }

  .offer-text {
    width: 90%;
    left: 5%;
    top: 29.5%;
    font-size: 0.63rem;
    line-height: 1.2;
  }

}

@media screen and (max-width: 390px) {
  .offer-text {
    width: 91%;
    top: 29.4%;
    left: 5%;
    font-size: 0.58rem;
  }

}

@media screen and (max-width: 360px) {
  .offer-text {
    font-size: 0.53rem;
  }
}

@media screen and (max-width: 330px) {
  .offer-text {
    font-size: 0.48rem;
  }
}


.llw {
  max-width: 800px;
  width: 100%;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
}

.llw input {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition: border 0.2s ease-out;
}

.llw input::-webkit-search-decoration {
  display: none;
}

.llw input:focus {
  outline-offset: -2px;
}

.llw input[type=image] {
  -webkit-appearance: none;
}

.llw img {
  display: block;
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

.overlayArea {
  position: relative;
}

.overlayItem {
  position: absolute;
}

.so-topFade>* {
  transition-duration: 1s;
  transition-property: opacity, transform;
  opacity: 0;
  transform: translateY(-40px);
}

@media screen and (max-width: 800px) {
  .so-topFade>* {
    transform: translateY(-5vw);
  }
}

.js-observe .so-topFade>* {
  opacity: 1;
  transform: translateY(0);
}

.so-botFade>* {
  transition-duration: 1.5s;
  transition-property: opacity, transform;
  opacity: 0;
  transform: translateY(40px);
}

@media screen and (max-width: 800px) {
  .so-botFade>* {
    transform: translateY(5vw);
  }
}

.so-botFade.js-observe>* {
  opacity: 1;
  transform: translateY(0);
}

.so-marker>* {
  transition-duration: 0.5s;
  transition-property: transform;
  transform: scale(0, 1);
  transform-origin: left;
}

.so-marker.js-observe>* {
  transform: scale(1, 1);
}

.cta01__btn--01 {
  width: 93.29%;
  top: 75.21%;
  left: 4.5%;
  animation: sway 2.4s infinite ease-in-out;
}

@keyframes sway {
  0% {
    transform: translate(5px, 0px);
  }

  5% {
    transform: translate(-5px, 0px);
  }

  10% {
    transform: translate(5px, 0px);
  }

  15% {
    transform: translate(-5px, 0px);
  }

  20% {
    transform: translate(5px, 0px);
  }

  25% {
    transform: translate(-5px, 0px);
  }

  30% {
    transform: translate(0px, 0px);
  }
}

.cta01_01_clip {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: auto;
}

.cta01_01_clip clipPath {
  width: 100%;
  height: auto;
}

.cta01_01_clip01,
.cta01_01_clip02 {
  position: absolute;
  width: 235px;
  height: 223px;
  overflow: hidden;
}

@media screen and (max-width: 800px) {

  .cta01_01_clip01,
  .cta01_01_clip02 {
    width: 29.375vw;
    height: 27.875vw;
  }
}

.cta01_01_clip01::before,
.cta01_01_clip02::before {
  position: absolute;
  content: "";
  display: block;
  top: -150px;
  width: 50px;
  height: 100%;
  background-color: #fff;
  animation: reflection 2.5s ease-in-out infinite;
}

@keyframes reflection {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  70% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.3;
  }

  71% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 0.6;
  }

  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@media screen and (max-width: 800px) {

  .cta01_01_clip01::before,
  .cta01_01_clip02::before {
    top: -18.75vw;
    width: 6.25vw;
  }
}

.cta01_01_clip01_01 {
  clip-path: url(#cta01_01_clip01_01);
  top: 15.1%;
  left: 3.3%;
}

.cta01_01_clip01_02 {
  clip-path: url(#cta01_01_clip01_02);
  top: 15.1%;
  left: 3.3%;
}

.cta01_01_clip01_03 {
  clip-path: url(#cta01_01_clip01_03);
  top: 15.1%;
  left: 3.3%;
}

.cta01_01_clip01_04 {
  clip-path: url(#cta01_01_clip01_04);
  top: 15.1%;
  left: 3.3%;
}

.cta01_01_clip02_01 {
  clip-path: url(#cta01_01_clip02_01);
  top: 15.1%;
  left: 34.5%;
}

.cta01_01_clip02_02 {
  clip-path: url(#cta01_01_clip02_02);
  top: 15.1%;
  left: 34.5%;
}

.cta01_01_clip02_03 {
  clip-path: url(#cta01_01_clip02_03);
  top: 15.1%;
  left: 34.5%;
}

.cta01_01_clip02_04 {
  clip-path: url(#cta01_01_clip02_04);
  top: 15.1%;
  left: 34.5%;
}

.cta01_01_elm_01 {
  width: 68.23%;
  top: 6.31%;
  left: 0;
}

.lp02_01_yt {
  width: 92.3%;
  top: 41.9%;
  left: 0;
  right: 0;
  margin: 0 auto;
  aspect-ratio: 16/9;
}

.lp02_01_yt_01 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.lp03_03_yt {
  width: 100%;
  top: -176.7%;
  left: 0;
  right: 0;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.lp03_03_yt_01 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.lp02_06_mp4 {
  width: 95.5%;
  top: 42.65%;
  left: 0;
  right: 0;
  margin: 0 auto;
  aspect-ratio: 16/9;
}

.lp02_06_elm_01 {
  width: 26.9%;
  top: 70.2%;
  right: 0;
}

.lp02_07_mp4 {
  width: 95.5%;
  top: 50.2%;
  left: 0;
  right: 0;
  margin: 0 auto;
  aspect-ratio: 16/9;
}

.lp02_07_elm_01 {
  width: 29.5%;
  top: 73.36%;
  left: 2.6%;
}

.lp02_08_elm_01 {
  width: 62.2%;
  top: 53.4%;
  left: 3.1%;
}

.lp02_08_clip {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: auto;
}

.lp02_08_clip clipPath {
  width: 100%;
  height: auto;
}

.lp02_08_clip01 {
  position: absolute;
  width: 235px;
  height: 223px;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .lp02_08_clip01 {
    width: 29.375vw;
    height: 27.875vw;
  }
}

.lp02_08_clip01::before {
  position: absolute;
  content: "";
  display: block;
  top: -150px;
  width: 50px;
  height: 100%;
  background-color: #fff;
  animation: reflection 2.5s ease-in-out infinite;
}

@media screen and (max-width: 800px) {
  .lp02_08_clip01::before {
    top: -18.75vw;
    width: 6.25vw;
  }
}

.lp02_08_clip_01 {
  clip-path: url(#lp02_08_clip_01);
  top: 60.86%;
  left: 3.7%;
}

.lp02_08_clip_02 {
  clip-path: url(#lp02_08_clip_02);
  top: 60.86%;
  left: 34.9%;
}

.lp02_10_clip {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: auto;
}

.lp02_10_clip clipPath {
  width: 100%;
  height: auto;
}

.lp02_10_clip01 {
  position: absolute;
  width: 291px;
  height: 291px;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .lp02_10_clip01 {
    width: 36.375vw;
    height: 36.375vw;
  }
}

.lp02_10_clip01::before {
  position: absolute;
  content: "";
  display: block;
  top: -150px;
  width: 50px;
  height: 100%;
  background-color: #fff;
  animation: reflection 2.5s ease-in-out infinite;
}

@media screen and (max-width: 800px) {
  .lp02_10_clip01::before {
    top: -18.75vw;
    width: 6.25vw;
  }
}

.lp02_10_clip_01 {
  clip-path: url(#lp02_10_clip_01);
  top: 1.9%;
  left: 6.93%;
}

.lp02_10_clip_02 {
  clip-path: url(#lp02_10_clip_02);
  top: 27.75%;
  left: 57.83%;
}

.lp02_10_clip_03 {
  clip-path: url(#lp02_10_clip_03);
  top: 55.85%;
  left: 7.13%;
}

.lp03_03_elm_01 {
  width: 35.5%;
  bottom: 102.33%;
  right: 0;
}

.lp04_02_elm_01 {
  width: 21.76%;
  top: -87.4%;
  left: 0;
}

.lp04_12_elm_01 {
  width: 100%;
  top: 2.8%;
  left: 0;
}

.lp05_02_elm_01 {
  width: 100%;
  top: 55%;
  left: 0;
}

.lp05_03_gif_01 {
  width: 40.4%;
  top: 55.9%;
  right: 8.4%;
}

.lp05_04_gif_01 {
  width: 40.7%;
  top: 56.2%;
  right: 8.1%;
}

.lp05_06_elm_01 {
  width: 100%;
  top: 60%;
  left: 0;
}

.lp06_04_elm_01 {
  width: 26.25%;
  top: 1.53%;
  left: 37.1%;
}

.lp06_04_elm_02 {
  width: 65.75%;
  top: 4.94%;
  left: 17%;
}

.lp06_04_elm_02>* {
  transition-delay: 0.2s;
}

.lp06_04_elm_03 {
  width: 96%;
  top: 15.54%;
  left: 1.48%;
}

.lp06_04_elm_03>* {
  transition-delay: 0.4s;
}

.lp06_04_elm_04 {
  width: 100%;
  top: 30.9%;
  left: 0;
}

.lp06_04_elm_04>* {
  transition-delay: 0.6s;
}

.lp06_04_elm_05 {
  width: 95.625%;
  top: 46.24%;
  left: 1.5%;
}

.lp06_04_elm_05>* {
  transition-delay: 0.8s;
}

.lp06_04_elm_06 {
  width: 66.25%;
  top: 57.4%;
  left: 16.5%;
}

.lp06_04_elm_06>* {
  transition-delay: 1s;
}

.lp06_04_elm_07 {
  width: 26.25%;
  top: 62.04%;
  left: 37.1%;
}

.lp06_04_elm_07>* {
  transition-delay: 1.2s;
}

.lp06_07_elm_01 {
  width: 28.7%;
  top: 67.45%;
  left: 8.1%;
}

.lp06_07_elm_border {
  width: 100%;
  height: 3px;
  background: linear-gradient(64deg, rgb(230, 255, 86) 0%, rgb(145, 255, 42) 100%);
}

@media screen and (max-width: 800px) {
  .lp06_07_elm_border {
    height: 0.375vw;
  }
}

.lp06_13_clip {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: auto;
}

.lp06_13_clip clipPath {
  width: 100%;
  height: auto;
}

.lp06_13_clip01 {
  position: absolute;
  width: 313px;
  height: 308px;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .lp06_13_clip01 {
    width: 39.125vw;
    height: 38.5vw;
  }
}

.lp06_13_clip01::before {
  position: absolute;
  content: "";
  display: block;
  top: -150px;
  width: 50px;
  height: 100%;
  background-color: #fff;
  animation: reflection 2.5s ease-in-out infinite;
}

@media screen and (max-width: 800px) {
  .lp06_13_clip01::before {
    top: -18.75vw;
    width: 6.25vw;
  }
}

.lp06_13_clip_01 {
  clip-path: url(#lp06_13_clip_01);
  top: 41.8%;
  left: 9.42%;
}

.lp06_13_clip_02 {
  clip-path: url(#lp06_13_clip_02);
  top: 41.8%;
  left: 52.3%;
}

.lp07_03_elm_01 {
  width: 100%;
  top: 0;
  left: 0;
}

.lp07_03_clip {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: auto;
}

.lp07_03_clip clipPath {
  width: 100%;
  height: auto;
}

.lp07_03_clip01 {
  position: absolute;
  width: 238px;
  height: 235px;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .lp07_03_clip01 {
    width: 29.75vw;
    height: 29.375vw;
  }
}

.lp07_03_clip01::before {
  position: absolute;
  content: "";
  display: block;
  top: -150px;
  width: 50px;
  height: 100%;
  background-color: #fff;
  animation: reflection 2.5s ease-in-out infinite;
}

@media screen and (max-width: 800px) {
  .lp07_03_clip01::before {
    top: -18.75vw;
    width: 6.25vw;
  }
}

.lp07_03_clip_01 {
  clip-path: url(#lp07_03_clip_01);
  top: 8.7%;
  left: 4.12%;
}

.lp07_03_clip_02 {
  clip-path: url(#lp07_03_clip_02);
  top: 9.5%;
  left: 35.02%;
}

.lp07_03_clip_03 {
  clip-path: url(#lp07_03_clip_03);
  top: 10.8%;
  left: 66.22%;
}

.lp07_09_elm_01 {
  width: 67.4%;
  top: 36%;
  left: 0;
}

.lp07_09_elm_02 {
  width: 42.9%;
  top: 32.8%;
  right: 0%;
}

.lp07_09_elm_03 {
  width: 13.75%;
  top: 45.8%;
  left: 59.4%;
}

.lp07_09_clip {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: auto;
}

.lp07_09_clip clipPath {
  width: 100%;
  height: auto;
}

.lp07_09_clip01 {
  position: absolute;
  width: 322px;
  height: 322px;
  overflow: hidden;
}

@media screen and (max-width: 800px) {
  .lp07_09_clip01 {
    width: 40.25vw;
    height: 40.25vw;
  }
}

.lp07_09_clip01::before {
  position: absolute;
  content: "";
  display: block;
  top: -150px;
  width: 50px;
  height: 100%;
  background-color: #fff;
  animation: reflection 2.5s ease-in-out infinite;
}

@media screen and (max-width: 800px) {
  .lp07_09_clip01::before {
    top: -18.75vw;
    width: 6.25vw;
  }
}

.lp07_09_clip_01 {
  clip-path: url(#lp07_09_clip_01);
  top: 34.9%;
  left: 59.1%;
}

.lp07_09_clip_02 {
  clip-path: url(#lp07_09_clip_02);
  top: 59%;
  left: 59.2%;
}

.contentsSlider {
  width: 100%;
  top: 7.6%;
  left: 0;
}

.swiper-wrapper {
  transition-timing-function: linear;
}

.accordionContainer {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 14.5%;
  overflow: hidden;
}

.accordion__item {
  position: relative;
  width: 87.25%;
  margin: 0 auto;
  z-index: 1;
  margin-bottom: 3.4%;
  overflow: hidden;
  box-shadow: 8px 8px 9px rgba(38, 38, 38, 0.74);
  border-radius: 0 0 6px 6px;
}

@media screen and (max-width: 800px) {
  .accordion__item {
    border-radius: 0 0 0.75vw 0.75vw;
  }
}

.accordion__btn {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.accordion__content {
  overflow: hidden;
  transition-duration: 0.3s;
  background: #FFF;
}

.accordion__content.js-close {
  height: 0;
  opacity: 0;
}

.accordion__content.js-open {
  opacity: 1;
}

.accordion__state {
  position: absolute;
  width: 34px;
  height: 34px;
  top: 48%;
  right: 4.8%;
  margin-top: -15px;
  border-radius: 50%;
  background: #fff;
}

@media screen and (max-width: 800px) {
  .accordion__state {
    width: 4.25vw;
    height: 4.25vw;
    margin-top: -1.875vw;
  }
}

.accordion__state::before,
.accordion__state::after {
  position: absolute;
  content: "";
  display: block;
  width: 70%;
  height: 2px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #a4e93c;
}

@media screen and (max-width: 800px) {

  .accordion__state::before,
  .accordion__state::after {
    height: 0.25vw;
  }
}

.accordion__state::after {
  transform: rotate(90deg);
  transition: 0.2s all ease-in-out;
}

.js-active .accordion__state::after {
  transform: rotate(0);
}