@charset "UTF-8";
/* CSS Document */
/*---------------------------------------------
	 TOPcss
  ---------------------------------------------*/
.header h1:after {
  display: none;
}

.opening {
  z-index: 9999;
  background: rgb(175, 213, 242);
  background: linear-gradient(0deg, rgb(175, 213, 242) 0%, rgb(212, 240, 235) 19%, rgb(192, 240, 246) 35%, rgb(201, 240, 247) 46%, rgb(214, 239, 248) 55%, rgb(231, 240, 250) 100%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1000px;
  height: 100vh;
  overflow: hidden;
  animation: openAnim 2s 4s ease-in-out;
  animation-fill-mode: forwards;
}
.opening h2 {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 15%;
  font-size: 2vw;
  letter-spacing: 0.2em;
  line-height: 2em;
  z-index: 10;
  opacity: 0;
  filter: blur(10px);
  animation: opentextAnim 2s 0s ease-in-out;
  animation-fill-mode: forwards;
}
@media all and (max-width: 480px) {
  .opening h2 {
    top: 22vh;
    font-size: 4vw;
    left: 10%;
  }
}
.opening .open-img {
  width: 45vw;
  height: 40vw;
  min-width: 450px;
  min-height: 384px;
  position: fixed;
  top: 15vh;
  right: 5vw;
  z-index: 5;
  opacity: 0;
  filter: blur(10px);
  animation: openelemAnim 2s 2s ease-in-out;
  animation-fill-mode: forwards;
}
@media all and (max-width: 480px) {
  .opening .open-img {
    width: 100vw;
    height: 85vw;
    min-width: 100vw;
    min-height: 85vw;
    top: 30vh;
    right: -20vw;
  }
}

@keyframes openAnim {
  0% {
    opacity: 1;
    visibility: visible;
    display: block;
  }
  99.9% {
    opacity: 0;
    visibility: hidden;
    display: block;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}
@keyframes opentextAnim {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes openelemAnim {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
/*---------------------------------------------
	 ファーストビュー
  ---------------------------------------------*/
.kv_area {
  width: 100%;
  min-width: 1000px;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
@media all and (max-width: 480px) {
  .kv_area {
    min-height: 100vh;
  }
}
.kv_area h2 {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 15%;
  font-size: 2vw;
  letter-spacing: 0.2em;
  line-height: 2em;
  z-index: 10;
}
@media all and (max-width: 480px) {
  .kv_area h2 {
    top: 22vh;
    font-size: 4vw;
    left: 10%;
  }
}
.kv_area .staff {
  width: 18vw;
  min-width: 180px;
  position: fixed;
  top: 35vw;
  right: 0;
  left: 0;
  margin: 0 auto;
  z-index: 7;
}
@media all and (max-width: 480px) {
  .kv_area .staff {
    width: 45vw;
    min-width: 45vw;
    top: auto;
    bottom: 10vh;
    left: 3vw;
    right: auto;
  }
}
.kv_area .recomend_btn a {
  display: block;
  width: 135px;
  height: 135px;
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 10;
  transition: 0.3s;
}
@media all and (max-width: 480px) {
  .kv_area .recomend_btn a {
    width: 70px;
    height: 70px;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
.kv_area .recomend_btn a:hover {
  transform: scale(1.05);
  opacity: 0.8;
}
.kv_area:before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgb(175, 213, 242);
  background: linear-gradient(0deg, rgb(175, 213, 242) 0%, rgb(212, 240, 235) 19%, rgb(192, 240, 246) 35%, rgb(201, 240, 247) 46%, rgb(214, 239, 248) 55%, rgb(231, 240, 250) 100%);
}
@media all and (max-width: 480px) {
  .kv_area:after {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: url("/assets/img/top/sp_bg.png") no-repeat center;
    background-size: cover;
    opacity: 0.7;
  }
}
.kv_area .bg_element_area_01,
.kv_area .bg_element_area_02,
.kv_area .bg_element_area_03,
.kv_area .bg_element_area_04,
.kv_area .bg_element_area_05 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.kv_area .bg_element_area_01 {
  z-index: 8;
  opacity: 0;
  filter: blur(10px);
  animation: firstAnim 1s 4.5s forwards, elementAnim 6s infinite;
}
.kv_area .bg_element_area_01 .element01 {
  width: 23vw;
  position: absolute;
  bottom: -8vw;
  left: 25vw;
  transition: transform 1s linear 0.008s;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_01 .element01 {
    bottom: 15vw;
    width: 30vw;
    left: -10vw;
  }
}
.kv_area .bg_element_area_01 .element02 {
  width: 25vw;
  position: absolute;
  top: 20vw;
  right: -9vw;
  transition: transform 1.1s linear 0.004s;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_01 .element02 {
    top: 35vw;
    width: 30vw;
    right: -5vw;
  }
}
.kv_area .bg_element_area_01 .element03 {
  width: 18vw;
  position: absolute;
  top: 15vw;
  left: 17vw;
  transition: transform 1.3s linear 0s;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_01 .element03 {
    top: 50vw;
  }
}
.kv_area .bg_element_area_02 {
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  animation: firstAnim 1s 4.8s forwards, elementAnim 7s infinite;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_02 {
    display: none;
  }
}
.kv_area .bg_element_area_02 .element04 {
  width: 20vw;
  position: absolute;
  bottom: 6vw;
  right: -8vw;
  transition: transform 1.2s linear 0.008s;
}
.kv_area .bg_element_area_02 .element05 {
  width: 10vw;
  position: absolute;
  bottom: 5vw;
  right: 18vw;
  transition: transform 1s linear 0s;
}
.kv_area .bg_element_area_02 .element06 {
  width: 15vw;
  position: absolute;
  top: 0;
  left: 28vw;
  transition: transform 1.3s linear 0.005s;
}
.kv_area .bg_element_area_03 {
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  animation: firstAnim 1s 5s forwards, elementAnim 8s infinite;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_03 {
    display: none;
  }
}
.kv_area .bg_element_area_03 .element07 {
  width: 10vw;
  position: absolute;
  bottom: -1vw;
  right: 33vw;
  transition: transform 1.4s linear 0s;
}
.kv_area .bg_element_area_03 .element08 {
  width: 7vw;
  position: absolute;
  top: 23vw;
  left: 46vw;
  transition: transform 1.5s linear 0.003s;
}
.kv_area .bg_element_area_03 .element09 {
  width: 6vw;
  position: absolute;
  top: 6vw;
  left: 53vw;
  transition: transform 1.7s linear 0.006s;
}
.kv_area .bg_element_area_04 {
  opacity: 0;
  transform: translateY(50px);
  animation: firstAnim 1s 5.2s forwards, elementAnim 6s infinite;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_04 {
    display: none;
  }
}
.kv_area .bg_element_area_04 .inner {
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("/assets/img/top/bg_01.png") no-repeat;
  background-position: -50px;
  background-size: cover;
  opacity: 0.7;
  transition: transform 2.5s linear 0s;
}
.kv_area .bg_element_area_05 {
  opacity: 0;
  transform: translateY(50px);
  animation: firstAnim 1s 5.4s forwards, elementAnim 8s infinite;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_05 {
    display: none;
  }
}
.kv_area .bg_element_area_05 .inner {
  width: 100%;
  height: 100%;
  background: url("/assets/img/top/bg_02.png") no-repeat top right;
  background-size: cover;
  opacity: 0.5;
  transition: transform 2s linear 0.005s;
}
@media all and (max-width: 480px) {
  .kv_area .bg_element_area_05 .inner {
    display: none;
  }
}
.kv_area .bg_element_area_01.second,
.kv_area .bg_element_area_02.second,
.kv_area .bg_element_area_03.second,
.kv_area .bg_element_area_04.second,
.kv_area .bg_element_area_05.second {
  animation-delay: 0.5s;
}

.swiper-container {
  animation: elementAnim 7s 6s infinite;
  width: 45vw;
  height: 40vw;
  min-width: 450px;
  min-height: 384px;
  position: fixed !important;
  top: 15vh;
  right: 5vw;
  z-index: 5;
}
@media all and (max-width: 480px) {
  .swiper-container {
    width: 100vw;
    height: 85vw;
    min-width: 100vw;
    min-height: 85vw;
    top: 30vh;
    right: -20vw;
  }
}

.bg_element_area_01.second,
.bg_element_area_02.second,
.bg_element_area_03.second,
.bg_element_area_04.second,
.bg_element_area_05.second,
.swiper-container {
  animation-delay: 0.5s;
}

/*---------------------------------------------
	 レコメンドコンテンツ
  ---------------------------------------------*/
#recomend_area {
  position: relative;
  width: 100%;
  height: 1400px;
  z-index: 9999;
}
@media all and (max-width: 480px) {
  #recomend_area {
    height: auto;
    padding: 30px 0 120px;
  }
}
#recomend_area:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  z-index: -1;
}
#recomend_area .recomend_inner {
  width: 1000px;
  position: absolute;
  top: calc(50% - 40px);
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  gap: 30px 20px;
  flex-wrap: wrap;
}
@media all and (max-width: 480px) {
  #recomend_area .recomend_inner {
    width: 90%;
    position: static;
    transform: none;
    margin: 0 auto;
  }
}
#recomend_area .recomend_inner h4 {
  width: 100%;
  text-align: center;
}
#recomend_area .recomend_inner .recomend_box {
  width: 320px;
  opacity: 0;
  transform: translateY(50px);
  transition: 1s 0.3s;
  background-color: #0075C2;
  background: linear-gradient(338deg, rgb(6, 207, 234) 0%, rgb(153, 104, 211) 26%, rgb(33, 116, 186) 75%);
  display: flex;
  flex-direction: column;
  padding-bottom: 25px;
}
@media all and (max-width: 480px) {
  #recomend_area .recomend_inner .recomend_box {
    width: 100%;
  }
}
#recomend_area .recomend_inner .recomend_box:nth-of-type(2) {
  transition-delay: 0.5s;
}
#recomend_area .recomend_inner .recomend_box:nth-of-type(3) {
  transition-delay: 0.7s;
}
#recomend_area .recomend_inner .recomend_box > img {
  height: 220px;
  object-fit: cover;
}
#recomend_area .recomend_inner .recomend_box dl {
  color: #fff;
  margin-top: -20px;
}
#recomend_area .recomend_inner .recomend_box dl dt {
  display: inline-block;
  padding: 10px 20px;
  background-color: #061643;
  border-radius: 0 20px 0 0;
  margin-top: -85px;
  line-height: 1.4;
}
#recomend_area .recomend_inner .recomend_box dl dd {
  width: 90%;
  margin: 0 auto;
}
#recomend_area .recomend_inner .recomend_box .page_btn.recomend {
  border: 1px solid #fff;
  margin: auto auto 0;
  width: 180px;
  background: rgb(255, 255, 255);
  background: linear-gradient(162deg, rgb(255, 255, 255) 0%, rgb(229, 226, 253) 63%, rgb(190, 253, 248) 100%);
}
#recomend_area .recomend_inner .recomend_box .page_btn.recomend:before {
  background: rgb(255, 255, 255);
  background: linear-gradient(305deg, rgb(255, 255, 255) 0%, rgb(229, 226, 253) 63%, rgb(190, 253, 248) 100%);
}
#recomend_area .recomend_inner .recomend_box .page_btn.recomend a {
  color: #061643;
  transition: 0.3s;
}
#recomend_area .recomend_inner .recomend_box .page_btn.recomend a:after {
  content: "";
  background-color: #061643;
  transition: 0.3s;
}
#recomend_area .recomend_inner .recomend_box .page_btn.recomend a:before {
  content: "";
  border-color: transparent transparent transparent #fff;
}
#recomend_area .recomend_inner .recomend_box .page_btn.recomend a:hover {
  color: #0075C2;
}
#recomend_area .recomend_inner .recomend_box .page_btn.recomend a:hover:after {
  background-color: #0075C2;
}
#recomend_area .recomend_inner .recomend_box.isAnimate {
  opacity: 1;
  transform: translateY(0);
}
#recomend_area .page_top a {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 30px;
  left: 30px;
  transition: 0.3s;
}
@media all and (max-width: 480px) {
  #recomend_area .page_top a {
    width: 50px;
    height: 50px;
    left: 0;
    right: 0;
    bottom: 50px;
    margin: 0 auto;
  }
}
#recomend_area .page_top a:hover {
  transform: scale(1.05);
  opacity: 0.8;
}
#recomend_area small {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/*↓ipad用縦css*/
@media screen and (min-device-width: 744px) and (max-device-width: 1133px) and (orientation: portrait) {
  .contents {
    overflow: hidden;
    width: 100%;
  }
  .opening {
    display: none;
  }
  .kv_area {
    height: 60vh;
  }
  .kv_area h2 {
    position: absolute;
    font-size: 3vw;
  }
  .kv_area .staff {
    position: absolute;
    top: auto;
    bottom: -3vh;
  }
  .kv_area .recomend_btn a {
    display: none;
  }
  .kv_area .swiper-container {
    position: absolute !important;
  }
  .kv_area .bg_element_area_01,
  .kv_area .bg_element_area_02,
  .kv_area .bg_element_area_03,
  .kv_area .bg_element_area_04,
  .kv_area .bg_element_area_05 {
    position: absolute;
    animation-delay: 0.5s;
  }
  #recomend_area {
    z-index: 3;
    height: auto;
    padding: 6vh 0 21vh;
  }
  #recomend_area:after {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  }
  #recomend_area .recomend_inner {
    position: static;
    transform: none;
    margin: 0 auto;
  }
  #recomend_area .recomend_inner .recomend_box {
    opacity: 1;
    transform: translateY(0);
  }
  #recomend_area small {
    bottom: 3vh;
  }
  #recomend_area .page_top a {
    display: none;
  }
}
@keyframes elementAnim {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes firstAnim {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}/*# sourceMappingURL=top.css.map */