@charset "UTF-8";
/* CSS Document */
#billboard {overflow: hidden;position: relative;}
#billboard::after {display: block;content: '';width: 100%;height: 100%;background: url("../img/index/index_mv00_img01_pc.webp") no-repeat center/cover;position: absolute;top: 0;left: 0;z-index: 1;pointer-events: none;}
#billboard ul li {position: relative;}
#billboard ul li div {position: absolute;left: 4em;bottom: 4em;z-index: 1;}
#billboard ul li div p {color: #fff;letter-spacing: 0.1em;}
#billboard ul li div p:nth-child(1) {font-size: 400%;font-weight: 600;}
#billboard ul li div p:nth-child(1) span {display: block;font-size: 75%;font-weight: 600;line-height: 1;}
#billboard ul li div p:nth-child(2) {font-size: var(--fontsize-24);margin-top: 0.2em;}
#billboard ul li figure {width: 100%;height: 100vh;}
#billboard ul li figure img {width: 100%;height: 100%;object-fit: cover;transform: scale(1.2);transition: 4s ease-out 0.2s;}
#billboard ul li.swiper-slide-duplicate-prev figure img,
#billboard ul li.swiper-slide-duplicate-active figure img,
#billboard ul li.swiper-slide-prev figure img,
#billboard ul li.swiper-slide-active figure img {transform: scale(1);}

.block-index-01 {padding: 5em 0;background: url("../img/common/bg01_pc.webp") no-repeat top center/cover;overflow: hidden;}
.block-index-01 .container:nth-child(1) {padding-top: 5em;position: relative;}
.block-index-01 .container:nth-child(1) div {position: absolute;top: 0;left: 0;z-index: 3;}
.block-index-01 .container:nth-child(1) div h3::after {background-image: url("../img/common/icon_01.svg");}
.block-index-01 .container:nth-child(1) div h3 + p {max-width: 350px;}
.block-index-01 .container:nth-child(1) .swiper-container-02 {position: relative;}
.block-index-01 .container:nth-child(1) .swiper-container-02 ul li {width: 100%;padding-top: 54%;position: relative;}
.block-index-01 .container:nth-child(1) .swiper-container-02 ul li img {position: absolute;}
.block-index-01 .container:nth-child(1) .swiper-container-02 ul li img:nth-child(1) {width: 40%;left: 0;bottom: 0;z-index: 2;clip-path: polygon(3.15em 0, 100% 0, 100% 100%, 0 100%, 0 3.15em);}
.block-index-01 .container:nth-child(1) .swiper-container-02 ul li img:nth-child(2) {width: auto;height: 100%;right: calc(700px - 50vw);bottom: 4.5em;z-index: 1;clip-path: polygon(34em 0, 100% 0, 100% 100%, 0 100%, 0 34em);}
.block-index-01 .container:nth-child(1) .swiper-container-02 .swiper-pagination {display: flex;flex-wrap: wrap;top: auto;left: 41%;bottom: 8%;z-index: 1;}
/*.block-index-01 .container:nth-child(1) .swiper-container-02 .swiper-pagination > span {display: block;width: 40px;height: 40px;margin: 0 0.5em;background: url("../img/common/icon_circle.svg") no-repeat center/contain;position: relative;}*/
.block-index-01 .container:nth-child(1) .swiper-container-02 .swiper-pagination > span::after {display: block;content: '';width: 4px;height: 4px;border-radius: 50%;background: var(--navy-01);position: absolute;top: 50%;left: 50%;z-index: 1;transform: translate(-50%,-50%) rotate(0deg) scale(1);transition: 0.8s;}
.block-index-01 .container:nth-child(1) .swiper-container-02 .swiper-pagination > span.swiper-pagination-bullet-active {transform: rotate(360deg);transition: all 1.2s cubic-bezier(.14,.63,.56,.95);}
.block-index-01 .container:nth-child(1) .swiper-container-02 .swiper-pagination > span.swiper-pagination-bullet-active::after {transform: translate(-50%,-50%) rotate(0deg) scale(2);}
.block-index-01 .container:nth-child(2) {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 4em;}
.block-index-01 .container:nth-child(2) > div {width: 48.5%;position: relative;}
.block-index-01 .container:nth-child(2) > div::after {display: block;content: '';width: 100%;height: 100%;background: #fff;position: absolute;top: 0;left: 0;z-index: 1;clip-path: polygon(3.15em 0, 100% 0, 100% 100%, 0 100%, 0 3.15em);}
.block-index-01 .container:nth-child(2) > div figure > img {margin: 5px;width: calc(100% - 10px);position: relative;z-index: 2;clip-path: polygon(3em 0, 100% 0, 100% 100%, 0 100%, 0 3em);}
.block-index-01 .container:nth-child(2) > div > div {padding: 2em;position: relative;z-index: 2;}
.block-index-01 .container:nth-child(2) > div > div h3 {color: var(--navy-01);}
.block-index-01 .container:nth-child(2) > div:nth-child(1) > div h3::after {background-image: url("../img/common/icon_02.svg");}
.block-index-01 .container:nth-child(2) > div:nth-child(2) > div h3::after {background-image: url("../img/common/icon_03.svg");}
.block-index-02 {position: relative;}
.block-index-02 .container {color: #fff;text-align: center;letter-spacing: 0.15em;width: 100%;position: absolute;top: 50%;left: 50%;z-index: 1;transform: translate(-50%,-50%);}
.block-index-02 .container h2 {font-size: 312.5%;font-weight: 600;}
.block-index-02 .container p {font-size: var(--fontsize-19);margin-top: 0.2em;}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  #billboard {font-size: 1.4vw;}
  .block-index-01,
  .block-index-02 {font-size: 1.4vw;}
}
@media only screen and (max-width: 1700px) {
  .block-index-01 .container:nth-child(1) .swiper-container-02 ul li img:nth-child(2) {width: 80vw;height: auto;}
}
@media only screen and (max-width: 1560px) {
  .block-index-01 .container:nth-child(1) .swiper-container-02 ul li img:nth-child(1) {width: 35vw;}
  .block-index-01 .container:nth-child(1) .swiper-container-02 ul li img:nth-child(2) {right: -5vw;clip-path: polygon(27em 0, 100% 0, 100% 100%, 0 100%, 0 27em);}
}
@media only screen and (min-width: 768px) {
  #billboard ul li.slide03 div {left: inherit;bottom: inherit;right: 4em;top: 8em;text-align: right;}
}
@media only screen and (max-width: 767px) {
  #billboard::after {background-image: url("../img/index/index_mv00_img01_sp.webp");}
  #billboard ul li div {text-align: center;top: 50%;left: 5vw;bottom: auto;transform: translateY(-50%);}
  #billboard ul li div p:nth-child(1) {font-size: 225%;line-height: 2;letter-spacing: 0;white-space: nowrap;}
  #billboard ul li div p:nth-child(2) {font-size: var(--fontsize-18);}
  .block-index-01 {padding: 2em 0;}
  .block-index-01 .container:nth-child(1) {padding-top: 0;}
  .block-index-01 .container:nth-child(1) > div:nth-child(1) {position: static;;}
  .block-index-01 .container:nth-child(1) div h3 + p {max-width: 100%;}
  .block-index-01 .container:nth-child(1) .swiper-container-02 {margin-top: 2em;}
  .block-index-01 .container:nth-child(1) .swiper-container-02 ul li {padding-top: 90vw;}
  .block-index-01 .container:nth-child(1) .swiper-container-02 ul li img:nth-child(1) {width: 70vw;left: auto;right: -5vw;bottom: 0;clip-path: polygon(0 0,100% 0,100% calc(100% - 2.5em),calc(100% - 2.5em) 100%, 0 100%);}
  .block-index-01 .container:nth-child(1) .swiper-container-02 ul li img:nth-child(2) {width: 95vw;top: 0;left: -5vw;right: auto;bottom: auto;clip-path: polygon(5em 0, 100% 0, 100% 100%, 0 100%, 0 5em);}
  .block-index-01 .container:nth-child(1) .swiper-container-02 .swiper-pagination {left: 5vw;bottom: 0.5em;}
  .block-index-01 .container:nth-child(2) {margin-top: 2em;}
  .block-index-01 .container:nth-child(2) > div {width: 100%;}
  .block-index-01 .container:nth-child(2) > div > div {padding: 1em;}
  .block-index-01 .container:nth-child(2) > div:nth-child(2) {margin-top: 2em;}
  .block-index-02 .container {letter-spacing: 0.1em;}
  .block-index-02 .container h2 {font-size: 187.5%;}
  .block-index-02 .container p {font-size: var(--fontsize-16);margin-top: 0.5em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}