@charset "UTF-8";

/* ==========================================================================
   MV
========================================================================== */
#mv {
  color: var(--white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#mv .mv__inner {
  margin-top: 70px;
  height: calc(100vh - 70px);
  max-height: 458px;
  padding: 15vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
#mv .mv-logo {
  display: block;
  position: relative;
}
#mv .mv-logo img {
  display: block;
  width: 300px;
}
#mv .bg-image{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  padding: 15px;
}
#mv .bg-image .anim-img{
  display: block;
  width: 100%;
  height: 100%;
  background: url(img/mv.jpg) no-repeat 20% center / cover;
  position: relative;
  opacity: 0;
}

#mv .bg-video{
  position: absolute;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}
#mv .bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top_topics {
  background: var(--color1);
  color: var(--white);
  margin: 0;
  padding-top: 1rem;
  position: relative;
  /* top: 3rem;
  margin-top: -3rem; */
  top: 13rem;
  margin-top: -4.9rem;
}
.top_topics a {
    /* text-decoration: underline */
    text-decoration: none;
    border: 1px solid;
    display: block;
    padding: .5rem;
    max-width: 800px;
    margin: auto;
    width: 90vw;
    text-align: center;
}

@media (min-width: 992px) {
  #mv .mv__inner {
    margin-top: 87px;
    height: calc(100vh - 87px - 125px);
    max-height: inherit;
  }
  #mv .bg-image{
    padding: 3vw;
  }
  .top_topics {
    text-align: center;
    top: 3rem;
    margin-top: -3rem;
  }
}

@media (min-width: 1200px) {
  #mv .mv__inner {
    height: calc(100vh - 87px - 131px);
  }
  .top_topics {
    text-align: center;
}
    .txtBox.my-4.top-c {
    width: 400px;
    margin-left: -50px!important;
    padding-top: 70px!important;
}
}


body.loaded #mv .bg-image .anim-img {
  animation: blur 3s ease-out 2.8s forwards;
}
body.loaded #mv .bg-video video {
  animation: grayscale 3s ease-out 2.8s linear forwards;
}

@keyframes blur {
  0% {opacity: 0; filter: blur(30vw) brightness(200%);}
  100% {opacity: 1; filter: blur(0) brightness(100%);}
}
@keyframes grayscale {
  0%   {filter: none;}
  100% {filter: grayscale(1);}
}

body.loaded #mv .svg-elem-1 {
  animation: animate-svg-fill 1s ease 0.8s both;
}
body.loaded #mv .svg-elem-2 {
  animation: animate-svg-fill 1s ease 1.2s both;
}
body.loaded #mv .svg-elem-3 {
  animation: animate-svg-fill 1s ease 1.6s both;
}
body.loaded #mv .svg-elem-4 {
  animation: animate-svg-fill 1s ease 2.0s both;
}
@keyframes animate-svg-fill {
  0%   { opacity: 0; filter: blur(40px); transform: translateY(25px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ==========================================================================
   scrolldown
========================================================================== */
.scrolldown{
  position: absolute;
  bottom: 0;
  left: 50%;
}
.scrolldown::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:var(--white);
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}
.scrolldown::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 56px;
  background: var(--white);
  opacity: .66;
}
@keyframes circlemove{
  0%  {bottom:45px;}
  100%{bottom:-5px;}
}
@keyframes cirlemovehide{
  0%  {opacity:0}
  50% {opacity:1;}
  80% {opacity:0.9;}
  100%{opacity:0;}
}

/* ==========================================================================
   information
========================================================================== */
#information {
  background: var(--color1);
  color: var(--white);
  overflow: hidden;
}
#information .section__header {
  /* margin: 0 0 1.5rem; */
  margin: 0 0 5.5rem;
  color: var(--white);
}
#information .list:after {
  content: '';
  display: block;
  width: 25vw;
  height: 1px;
  position: absolute;
  top: 100%;
  left: 100%;
  background: var(--gray);
}
#information .category .cat {
  /* display: inline-block; */
  background: var(--gray);
  color: var(--color1);
  font-size: .846em;
  padding: 0 .5em;
  /* text-align: center; */
  min-width: 9.5em;

  display: inline-flex;
  font-size: .7rem;
  height: 20px;
  justify-content: center;
  align-items: center;
}

#information .viewmore {
  width: 15em;
}
#information .viewmore .btn {
  min-width: inherit;
  text-align: left;
  padding-left: 0;
}

@media (min-width: 992px) {
  #information .section__header {
    margin: 0;
    text-align: right;
  }
  #information .list-block {
    margin: -1.5rem 0;
  }
}

/* ==========================================================================
   #satosansen
========================================================================== */
#satosansen > .container {
  position: relative;
}
#satosansen .imgBox {
  position: relative;
}
#satosansen .svg_txt-cont {
  text-align: center;
  position: relative;
  z-index: 5;
}

#satosansen #experience::before {
  content: '';
  display: block;
  width: 1px;
  position: absolute;
  top: 21rem;
  bottom: -6rem;
  left: 50%;
  background: var(--gray);
}

@media (max-width: 991px) {
  #satosansen .imgBox .svg_txt {
    position: absolute;
    width: 5.3rem;
    z-index: 5;
  }
  #satosansen #spend .imgBox .svg_txt {
    bottom: 0;
    left: 50%;
    margin-left: -2.65rem;
  }
  #satosansen #experience {
    position: relative;
  }
  #satosansen #experience .imgBox .svg_txt {
    top: 0;
    left: 37.5%;
  }

}
@media (max-width: 767px) {
  #satosansen #experience {
    padding-top: 7.5rem;
  }
  #satosansen #experience::before {
    top: 0;
    bottom: 0;
    height: 7.5rem;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #satosansen #experience::before {
    display: none;
  }
}

#experience-post > .container {
  position: relative;
  padding-top: 6rem;
}
#experience-post .svg_txt {
  width: 21rem;
  max-width: 65vw;
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 5;
}
@media (min-width: 576px) {
  #experience-post .svg_txt {
    left: -10px;
  }
}
@media (min-width: 992px) {
  #experience-post > .container {
    padding-top: 1rem;
  }
  #experience-post .svg_txt {
    top: 1rem;
  }
}
@media (min-width: 1200px) {
  #experience-post .svg_txt {
    left: -20px;
  }
}


/* ==========================================================================
   #contents-top1
========================================================================== */
#contents-top1 .imgBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#contents-top1 .imgBox > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#contents-top1 .svg_txt {
  margin-bottom: -.35em;
  position: relative;
  text-align: center;
}

#stay .imgBox {
  padding-top: calc(52.5% - 5.3rem);
}
#stay .imgBox > img {
  object-position: 50% 5%;
}
#food .imgBox {
  padding-top: calc(125% - 5.3rem);
}

@media (max-width: 767px) {
  #stay .imgBox  {
    padding-top: calc(100% - 5.3rem);
  }
}

@media (min-width: 768px) {
  #stay .imgBox  {
    padding-left: 50vw;
    align-items: flex-start;
  }
  #stay .svg_txt  {
    margin-left: 20px;
  }
  #food .imgBox  {
    align-items: flex-start;
          margin-bottom: 50px!important;
  }
  #food .svg_txt  {
    margin-left: -.1em;
  }
}

/* ==========================================================================
   #contents-top2
========================================================================== */
#contents-top2 .imgBox {
  padding-top: 140%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#contents-top2 .imgBox > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#contents-top2 .svg_txt {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 10.5rem;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -.35em;
  text-align: center;
}

@media (max-width: 991px) {
  #contents-top2 .imgBox {
    padding-top: 100%;
  }
}

/* ==========================================================================
   access
========================================================================== */
@media (min-width: 992px) {
  #access .imgBox {
    padding-right: 0;
  }
  #access .txtBox {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
  }
}





/* ==========================================================================
   Breadcrumb
========================================================================== */
.home .breadcrumb-wrapper {
  background: var(--l-gray2);
}


/** 総合トップにイベントバナー追従 **/

.event-Tag {
  padding: 1.5rem !important;
  margin-left: 6rem;
  background: #7f0104;
  color: #fff;
}
.event-Tag a {
  color: #fff;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .event-Tag {
    margin: 0;
    padding: 1.6rem !important;
    max-width: 95%;
  }
}

.event-Tag--fix {
  padding: 1.5rem;
  position: fixed;
  right: 1em;
  bottom: 0;
  text-align: center;
  background: #f6f5f4;
  color: #12190A;
  width: 264px;
  font-size: .95rem;
  z-index: 90;
}
@media (min-width:640px) {
  .event-Tag--fix {
    border-top: .5px solid;
    border-left: .5px solid;
    border-right: .5px solid;
  }
}
.event-Tag--fix img {
  display: block;
  margin-bottom: 0.4rem;
}

.sp-only {
  display: none;
}

@media (max-width: 640px) {
  .event-Tag--fix {
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    padding: 1rem;
    width: 100%;
    gap: 1rem;
    text-align: left;
  }
  .event-Tag--fix img {
    width: 25vw;
  }

  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}