/* CSS Document */

.index{
  overflow: hidden;
}

/* top_area --------------------------- */
.top_area{
  position: relative;
  font-size: 0;
}
.top_area .top_img img{
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.top_area_inner{
  position: absolute;
  /*width: 100%;*/
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.top_title{
  width: 56%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content:flex-end;
  align-items: center;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 1s cubic-bezier(.28,1.05,.55,1.04);
  transform: translateY(20%);
  opacity: 0;
}
.top_title h1{
  padding-bottom: 25px;
}
.top_btn_01{
  text-align: center;
  margin-bottom: 48px;
  margin-bottom: 9.6vw;
}
.top_btn_01 > a{
  display: inline-block;
  height: 40px;
  width: 250px;
  text-align: center;
  background-color:#fff;
  color: #5594B3;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto;
  transition: all 250ms ease;
  padding-left: 30px;
  padding-right: 45px;
  line-height: 2.6;
  position: relative;
}
.top_btn_01 > a::after{
  content: '';
  display: inline-block;
  width: 7px;
  height: 9px;
  background: url("/img/common/icon_triangle.svg") no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 32px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.top_btn_01 > a:active,
.top_btn_01 > a:hover{
  border-radius: 22.5px;
  opacity: 1;
}
.top_area_model{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.top_area_item{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 4s ease;
  display: none;
}
.top_area_item li{
  /*display: none;*/
}
.top_area_model li,
.top_area_item li{
  position: absolute;
}
.model_start1{
  width: 51.2%;
  top: 12%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  transition: transform 1.4s cubic-bezier(.26,1.19,.49,1.07) .5s;
  height: 100%;
  /* transform: translateY(70%); */
  transform: translateY(20%);
}
.model_start2{
  width: 40.5%;
  top: 21.8%;
  bottom: auto;
  left: -8.8%;
  transition: transform 1.5s cubic-bezier(.28,.92,.43,1.13) .8s;
  height: 100%;
  transform: translateY(20%);
}
.model_start3{
  width: 44.8%;
  top: 23.2%;
  right: -15.2%;
  transition: transform 1.6s cubic-bezier(.3,1.12,.5,1.1) 1s;
  height: 100%;
  transform: translateY(20%);
}

.model_start1 img{
  opacity: 0;
  transition: all 2s ease-in-out .5s;
}
.model_start2 img{
  opacity: 0;
  transition: all 2s ease-in-out .8s;
}
.model_start3 img{
  opacity: 0;
  transition: all 2s ease-in-out 1s;
}

.model_up,
.title_up{
  transform: translateY(0)!important;
  /* animation: fadein 0.5s linear 1 forwards; */
  animation: fadein 0.5s ease 1 forwards; 
  opacity: 1;
}

@media screen and (max-width: 767px){
  .title_up{
    padding-bottom: 25px;
  }
}


li.model_up img{
  opacity: 1 !important;
}
/* @keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */
.model1{
  animation: fuwafuwa_model1 3s ease-in-out infinite alternate;
}
.model2{
  animation: fuwafuwa_model2 5s ease-in-out infinite alternate;
}
.model3{
  animation: fuwafuwa_model3 4s ease-in-out infinite alternate;
}
.top_area_item li:nth-child(1){
  width: 13.3%;
  top: 2%;
  left: -1.6%;
}
.top_area_item li:nth-child(2){
}
.top_area_item li:nth-child(3){
  width: 13.8%;
  top: 47.2%;
  left: 14.4%;
}
.top_area_item li:nth-child(4){
  width: 13%;
  top: 36.6%;
  right: 27.4%;
}
.top_area_item li:nth-child(5){
}
.top_area_item li:nth-child(6){
}
.top_area_item li:nth-child(7){
  width: 13.3%;
  top: auto;
  bottom: 10.4%;
  left: 1.18%;
}
.top_area_item li:nth-child(8){
  width: 10.9%;
  top: auto;
  bottom: 30%;
  left: 14.4%;
}
.top_area_item li:nth-child(9){
  width: 25.3%;
  top: auto;
  bottom: 2%;
  right: 0.82%;
}


.item1,
.item4,
.item7{
  animation: fuwafuwa_item1 5s ease-in-out infinite alternate;
}
.item2,
.item5,
.item8{
  animation: fuwafuwa_item1 4s ease-in-out infinite alternate;
}
.item3,
.item6,
.item9{
  animation: fuwafuwa_item1 3s ease-in-out infinite alternate;
}
 
@keyframes fuwafuwa_model1 {
  0% {
    transform:translateY(2%);
  }
  50% {
    transform:translateY(0);
  }
  100% {
    transform:translateY(2%);
  }
}
@keyframes fuwafuwa_model2 {
  0% {
    transform:translateY(6%);
  }
  50% {
    transform:translateY(0);
  }
  100% {
    transform:translateY(6%);
  }
}
@keyframes fuwafuwa_model3 {
  0% {
    transform:translateY(4%);
  }
  50% {
    transform:translateY(0);
  }
  100% {
    transform:translateY(4%);
  }
}
@keyframes fuwafuwa_item1 {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(10%);
  }
  100% {
    transform:translateY(0);
  }
}
@keyframes fuwafuwa_item2 {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(8%);
  }
  100% {
    transform:translateY(0);
  }
}
@keyframes fuwafuwa_item3 {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(6%);
  }
  100% {
    transform:translateY(0);
  }
}

/*
.top_btn_img{
  margin-inline: auto;
  text-align: center;
  --this-bdrs: 10px;
  --this-shadow: -3px;
  z-index: 0;
  position: relative;
  border-radius: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.163);
}
.top_btn_img .btn {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  display: block;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
*/

/* @media (hover: hover){ */
/*  .top_btn_img:hover .btn{
    opacity: 1;
    transform: translate(3px,3px);
    
  /* } */
/* } */

.top_btn{
  margin-inline: auto;
  text-align: center;
  --this-bdrs: 10px;
  --this-shadow: -3px;
  z-index: 0;
  position: relative;
  border-radius: 100px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.161);
  width: 214px;
  height: 45px;
  background-color: #FFFFFF;
}
.top_btn .btn {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.top_btn .btn .btn_container {
  display: block;
  font-family: Inter;
  font-weight: 400;
  line-height: 100%;
}
.btn_container .btn_title {
  font-size: 14px;
  color: #2085AB !important;
}
.btn_container .btn_text {
  font-size: 8px;
  color: #2085AB !important;
}

.btn .btn_arrow {
  width: 6.55px;
  height: 6.55px;
  border-top: solid 2px #4793B3;
  border-right: solid 2px #4793B3;
  transform: rotate(45deg);
  position: absolute;
  left: 90%;
}
.top_btn:hover {
    opacity: 1;
    transform: translate(3px,3px);
}

@media screen and (min-width: 768px) {
  
  .top_area_inner{
    margin-left: 4.68%;
    margin-right: 4.68%;
  }
  .top_area .top_img img{
    width: 100%;
    height: 100%;
    /*max-height: 800px;*/
    max-height: 1200px;
    /*aspect-ratio: 683 / 375;*/
    aspect-ratio: 736 / 475;
    /*object-fit: cover;*/
    object-fit: contain;
  }
  .top_title{
    width: 23.1%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    margin: auto;
    justify-content: center;
    transition: all 1.3s ease-in-out;
  }
  .top_btn_01{
    margin-bottom: 0;
  }
  .top_area_model,
  .top_area_item{
    width: 80.5%;
    max-width: 1100px;
    right: 0;
    left: auto;
  }

 .model_start1{
    width: 33.6%;
    top: 6.75%;
    transition: transform 1.2s ease .5s;
    height: 100%;
    /* transform: translateY(100%); */
    transform: translateY(20%);
  }
  .model_start2{
    width: 26.6%;
    top: 16.2%;
    bottom: auto;
    left: 13.3%;
    transition: transform 1.4s ease .8s;
    height: 100%;
    transform: translateY(20%);
  }
  .model_start3{
    width: 29.5%;
    top: 18.7%;
    right: 4.63%;
    transition: transform 1.6s ease 1s;
    height: 100%;
    transform: translateY(20%);
  }
  .top_area_item li:nth-child(1){
    width: 9.09%;
    top: 0;
    left: 3.18%;
  }
  .top_area_item li:nth-child(2){
    width: 10.2%;
    top: 27.5%;
    left: 12.2%;
  }
  .top_area_item li:nth-child(3){
    width: 9.34%;
    top: 47.5%;
    left: 28.7%;
  }
  .top_area_item li:nth-child(4){
    width: 8.87%;
    top: 35%;
    right: 32.2%;
  }
  .top_area_item li:nth-child(5){
    width: 13%;
    top: 25%;
    right: 0.27%;
  }
  .top_area_item li:nth-child(6){
    width: 6.36%;
    top: 35.6%;
    right: 5.27%;
  }
  .top_area_item li:nth-child(7){
    width: 8.63%;
    top: auto;
    bottom: 12%;
    left: 8.18%;
  }
  .top_area_item li:nth-child(8){
    width: 7.27%;
    top: auto;
    bottom: 25%;
    left: 28.6%;
  }
  .top_area_item li:nth-child(9){
    width: 17%;
    top: auto;
    bottom: 4%;
    right: 0;
  }

  .top_btn{
    width: 321px;
    height: 67.5px;
    top: 10%;
  }
  .btn_container .btn_title {
    font-size: 21px;
  }
  .btn_container .btn_text {
    font-size: 12px;
  }

}
@media screen and (min-width: 1500px) {
  .top_area_inner{
    max-width:1366px;
    margin: auto;
  }
}
/* top_area END ----------------------- */



/* top_lineup --------------------------- */
.top_lineup{
  padding-left: 6.66%;
  padding-right: 6.66%;
}
.top_lineup_inner{
  padding-top: 50px;
}
.top_lineup_inner h2{
  text-align: center;
  padding-bottom: 30px;
  font-size: 2.5rem;
}
.top_lineup_img{
  pointer-events: none;
  margin-bottom: 60px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
}
.top_lineup_img li img{
  display: block;
}
.top_lineup_img li:nth-child(n+2){
  opacity: 0;
}
.top_lineup_img.slick-initialized li:nth-child(n+2){
  opacity: 1;
}
.lineup_txt_img{
  width: 86.6%;
  display: block;
  margin: auto;
}


@media screen and (min-width: 768px) {
  .top_lineup{
    padding-bottom: 80px;
  }
  .top_lineup_inner{
    padding-top: 80px;
  }
  .top_lineup_inner > ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
  }
  .top_lineup_inner > ul > li:nth-child(1){
    width: 50%;
  }
  .top_lineup_inner > ul > li:nth-child(2){
    width: 39%;
  }
  .top_lineup_img{
    margin-bottom: 0;
  }
  .lineup_txt_img{
    width: 100%;
    padding-bottom: 50px;
  }
}
/* top_lineup END ----------------------- */

/* lineup_slider_wrap --------------------------- */
.lineup_slider_wrap{
  padding-top: 10px;
  padding-bottom: 50px;
}
.lineup_slider{
  display: none;
  /*opacity: 0;
  transition: all 500ms ease;
  transition-delay: 2s;*/
  padding-bottom: 30px;
}
.lineup_slider.slick-initialized{
  display: block;
  /*opacity: 1;*/
}
.lineup_slider li{
  width: 57.33vw;
  padding: 0 4vw;
}
.lineup_slider li a{
  pointer-events: none;
  display: block;
}

.lineup_slider .slick-arrow{
  position: absolute;
  font-size: 0;
  border: none;
  background-color: transparent;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 22px;
  height: 33px;
  background-size: 100%;
  z-index: 1;
}
.lineup_slider .slick-next{
  background: url("/img/index_2026/post_next.svg") no-repeat;
  right: 15%;
}
.lineup_slider .slick-prev{
  background: url("/img/index_2026/post_prev.svg") no-repeat;
  left: 15%;
}

@media screen and (min-width: 768px) {
  .lineup_slider_wrap{
    padding-bottom: 80px;
  }
  .lineup_slider{
    padding-bottom: 0;
  }
  .lineup_slider li{
    width: 470px;
    padding: none;
  }
  .lineup_slider .slick-arrow{
    width: 30px;
    height: 50px;
  }
  .lineup_slider .slick-next{
    right: 35%;
  }
  .lineup_slider .slick-prev{
    left: 35%;
  }
}
/* lineup_slider_wrap END ----------------------- */


/* lineup_other --------------------------- */
.lineup_other{
  padding-left: 6.66%;
  padding-right: 6.66%;
  padding-bottom: 30px;
}
.lineup_other h2{
  text-align: center;
  color: #333333;
  font-size: 2.5rem;
  position: relative;
  padding-bottom: 15px;
  padding-top: 30px;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
  
}
.lineup_other_list_inner{
  padding-bottom: 30px;
}
.lineup_other_list_inner img{
  display: block;
  border-radius: 20px;
  overflow: hidden;
}
.lineup_other_list_txt{
  text-align: center;
}
.lineup_other_list_txt h4{
  padding-top: 10px;
  padding-bottom: 10px;
}
.lineup_other_list_txt h4 a{
  font-size: 1.7rem;
  color: #333333;
}
.lineup_other_list_txt p{
  font-size: 1.3rem;
}

@media screen and (min-width: 768px) {
  .lineup_other{
    padding-left: 6.66%;
    padding-right: 6.66%;
    padding-bottom: 50px;
  }
  .lineup_other_list{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .lineup_other_list li{
    width: 46.15%;
  }
  .lineup_other_list_inner{
    display: block;
  }
  .lineup_other_list_txt{
    width: 86.66%;
    margin: 0 auto;
  }
  .lineup_other_list_txt h4{
    padding-top: 25px;
    padding-bottom: 15px;
  }
}
/* lineup_other END ----------------------- */

/* about_area --------------------------- */
.about_area{
  max-width: 800px;
  margin: 0 auto 50px;
  position: relative;
}
.about_img{
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 8;
}
.about_content_inner{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}
.about_content_inner h2{
  font-size: 2.5rem;
  padding-top: 30px;
  padding-bottom: 0;
  width: 100%;
}
.about_content_inner .btn_06{
  position: absolute;
  top: auto;
  right: 0;
  left: 0;
  bottom: 11.6%;
}
.about_content{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}
.about_content li{
}
.about_content .about_model1{
  position: absolute;
  top: 12.8%;
  right: -5.6%;
  width: 48.5%;
  animation: fuwafuwa_about1 4s ease-in-out infinite alternate;
}
.about_content .about_txt1{
  position: absolute;
  top: 17.1%;
  left: 9%;
  width: 44.5%;
}
.about_content .about_model2{
  position: absolute;
  top: 44.6%;
  left: -9%;
  width: 56%;
  animation: fuwafuwa_about2 3.5s ease-in-out infinite alternate;
}
.about_content .about_txt2{
  position: absolute;
  top: 50.6%;
  right: 6.66%;
  width: 42.6%;
}

@keyframes fuwafuwa_about1 {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(3%);
  }
  100% {
    transform:translateY(0);
  }
}
@keyframes fuwafuwa_about2 {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(3%);
  }
  100% {
    transform:translateY(0);
  }
}
@media screen and (min-width: 768px) {
  .about_area{
    margin-bottom: 80px;
  }
  .about_img{
    width: 100%;
    height: 100%;
    aspect-ratio: 80 / 77;
  }
  .about_content_inner h2{
    padding-top: 50px;
  }
  .about_content_inner .btn_06{
    bottom: 7.4%;
  }
  .about_content{
    width: 80%;
    margin: auto;
  }
  .about_content .about_model1{
    top: 13.8%;
    right: 1.71%;
    width: 46.8%;
    animation: fuwafuwa_about1 4.5s ease-in-out infinite alternate;
  }
  .about_content .about_txt1{
    top: 17.2%;
    left: 8.43%;
    width: 37.6%;
  }
  .about_content .about_model2{
    top: 38.8%;
    left: 0;
    width: 50%;
    animation: fuwafuwa_about2 4s ease-in-out infinite alternate;
  }
  .about_content .about_txt2{
    top: 63.1%;
    right: 7.5%;
    width: 32.6%;
  }
}
/* about_area END ----------------------- */


/* info_area --------------------------- */
.info_area{
  padding-bottom: 40px;
  padding-left: 6.66%;
  padding-right: 6.66%;
}
.info_area h2{
  padding-bottom: 40px;
}
.info_list li{
  padding-bottom: 30px;
}


.info_list li a img:hover{
  opacity: 0.8;
}
.info_list li a:nth-child(2){
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
}
.info_list li a h3{
  width: 46%;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
}
.info_list li a h3 span{
  display: block;
  color: #B8BEBA;
  letter-spacing: 0.1em;
}
.info_list li a p{
  width: 53.5%;
}
@media screen and (min-width: 768px) {
  .info_area h2{
    padding-bottom: 60px;
  }
  .info_list{
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .info_list li{
    width: 47.5%;
    padding-bottom: 35px;
  }
  .info_list li a p{
    width: 50%;
  }
}
/* info_area END ----------------------- */


/* pickup_area --------------------------- */
.pickup_area{
  background-color: #ECEFED;
  padding-top: 60px;
  padding-bottom: 30px;
  padding-left: 6.66%;
  padding-right: 6.66%;
}
.pickup_content{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pickup_content li{
  width: 47.38%;
  padding-bottom: 30px;
  font-size: 0;
}
.pickup_content li h3{
  font-size: 1.5rem;
  color: #333333;
  padding-bottom: 10px;
  text-align: center;
  margin-top: 10px;
}
.pickup_content li h3 span{
  letter-spacing: -0.6px;
  color: #333333;
}
.pickup_content li p{
  font-size: 1.3rem;
}

.pickup_img{
  overflow: hidden;
  display: inline-block;
}
.pickup_img img{
  transition: all 500ms ease;
  width: 100%;
}
.pickup_img:active img{
  transform: scale(1.1, 1.1);
}
@media screen and (min-width: 768px) {
  .pickup_content{
    max-width: 830px;
    margin: 0 auto;
  }
  
  .pickup_content li{
    width: 46.98%;
    display: flex;
    
  }
  .pickup_img{
    width: 39.48%;
  }
  .pickup_content li > div{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding-left: 15px;
    width: calc(63.52% - 15px);
  }
  .pickup_content li h3{
    font-size: 1.6rem;
    text-align: left;
    margin-top: 0;
  }
  .pickup_img:hover img{
    transform: scale(1.1, 1.1);
  }
}
/* pickup_area END ----------------------- */



/* follow_us_area --------------------------- */
.follow_us_area{
  padding-top: 60px;
  padding-left: 6.66%;
  padding-right: 6.66%;
}
.follow_us_area h2{
  padding-bottom: 20px;
}

.follow_us_line{
  padding-bottom: 50px;
}

.follow_us_line_link{
  width: 95%;
  max-width: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.follow_us_line_link li:nth-child(1){
  width: 42%;
}
.follow_us_line_link li:nth-child(2){
  width: 50.8%;
  text-align: center;
}
.line_follow_btn{
  display: block;
  width: 100%;
  height: 40px;
  background-color: #00AF4B;
  color: #FFFFFF;
  line-height: 3;
  margin-top: 10px;
}

.follow_us_line_txt{
  max-width: 500px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 30px;
}

.follow_us_line .banner_list{
  justify-content: center;
}


.ttl_insta{
  text-align: center;
  padding-bottom: 25px;
}
.ttl_insta a{
  font-size: 1.6rem;
  color: #333333;
}
.ttl_insta img{
  width: 45px;
  display: block;
  margin: 0 auto;
}
.insta_list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.insta_list li{
  width: 31.87%;
  font-size: 0;
  padding-bottom: 2%;
}
.insta_list li:nth-child(n + 7){
  display: none;
}
.insta_list li a{
  position: relative;
  display: inline-block;
  width: 100%;
  padding-top: 100%;
}
.insta_list li a img{
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (min-width: 768px) {
  .follow_us_line{
    padding-bottom: 80px;
  }
  
  .ttl_insta{
    padding-bottom: 35px;
  }
  .insta_list{
    max-width: 830px;
    margin: 0 auto;
  }
  .insta_list li{
    width: 23.25%;
  }
  .insta_list li:nth-child(n + 7){
    display: block;
  }
}

/* follow_us_area END ----------------------- */



/* news_area --------------------------- */
.news_area{
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 6.66%;
  padding-right: 6.66%;
}
.news_area h2{
  padding-bottom: 30px;
}
.news_feed{
  padding-bottom: 30px;
}
.news_feed li{
  border-bottom: #9D9D9D 0.5px solid;
  padding-top: 20px;
  padding-bottom: 20px;
}
.news_feed li > a{
  font-size: 1.4rem;
}
.news_feed li span{
  display: block;
  font-size: 1.4rem;
  color: #5594B3;
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .news_area{
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .news_feed{
    max-width: 500px;
    margin: 0 auto;
  }
}
/* news_area END ----------------------- */