@charset "UTF-8";


#wedding-opening {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
#wedding-opening.is-active {
  opacity: 0;
  visibility: hidden;
}
#wedding-opening .opening-animation {
  background: var(--white);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: animate-svg-out 0.7s ease-in 5s both;
}
#wedding-opening .opening-animation.is-active {
  opacity: 1;
  visibility: visible;
}
#wedding-opening svg {
  display: block;
  animation: animate-svg-in 0.7s linear 0.8s both, animate-svg-out 0.5s ease-in 4.4s both;
}

.svg-elem-1  { animation: animate-svg-fill 0.7s ease-in 0.8s both;}
.svg-elem-2  { animation: animate-svg-fill 0.7s ease-in 1.0s both;}
.svg-elem-3  { animation: animate-svg-fill 0.7s ease-in 1.2s both;}
.svg-elem-4  { animation: animate-svg-fill 0.7s ease-in 1.4s both;}
.svg-elem-5  { animation: animate-svg-fill 0.7s ease-in 1.6s both;}
.svg-elem-6  { animation: animate-svg-fill 0.7s ease-in 1.8s both;}
.svg-elem-7  { animation: animate-svg-fill 0.7s ease-in 2.0s both;}
.svg-elem-8  { animation: animate-svg-fill 0.7s ease-in 2.2s both;}
.svg-elem-9  { animation: animate-svg-fill 0.7s ease-in 2.4s both;}
.svg-elem-10 { animation: animate-svg-fill 0.7s ease-in 2.6s both;}
.svg-elem-11 { animation: animate-svg-fill 0.7s ease-in 2.8s both;}
.svg-elem-12 { animation: animate-svg-fill 0.7s ease-in 3.0s both;}
.svg-elem-13 { animation: animate-svg-fill 0.7s ease-in 3.2s both;}

@keyframes animate-svg-fill {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes animate-svg-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes animate-svg-out {
  0%   { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(10px); pointer-events: none; }
}



/* ==========================================================================
   MV
========================================================================== */
#mv {
  color: var(--white);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
#mv .mv__inner {
  height: calc(100vh - 122px);
/*  max-height: 458px;*/
  padding: 15vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
#mv .mv-logo {
  position: relative;
}
#mv .mv-img{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#mv .mv-img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#mv .mv-img::before {
  content: '';
  display: block;
  background-color: rgba(0,0,0,0.25);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media (min-width: 992px) {
  #mv .mv__inner {
    height: calc(100vh - 87px - 125px);
    max-height: inherit;
  }
}
@media (min-width: 1200px) {
  #mv .mv__inner {
    /* height: calc(100vh - 87px - 131px); */
    height: calc(100vh - 80px);
  }
}

.fv-text {
  position: absolute;
  bottom: 0.5vh;
  left: 0;
  font-size: 1rem;
  padding: 0.2rem 1rem;
  text-align: left;
}
@media (min-width:640.1px){
  .fv-text {
    font-size: 1.4rem;
  }
}


/* ==========================================================================
   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;}
}


/* ==========================================================================
   .page__header
========================================================================== */
.page__cover {
  color: var(--white);
}
.page__cover .imgBox::before {
  content: '';
  display: block;
  background-color: rgba(0,0,0,0.25);
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.page__cover .ttlBox {
  position: absolute;
}
.page__cover .svg_txt {
  position: absolute;
  left: 0;
  bottom: -.2em;
}
@media (min-width: 768px) {
  .page__cover .svg_txt {
    bottom: 4em;
    padding: 0 6em;
  }
}

/* ==========================================================================
   #concept
========================================================================== */
#concept {
  position: relative;
}


#concept .bg-video{
  position: absolute;
  z-index: -1;
  top: 50%;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
  transform: translateY(25%);
}
#concept .bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 992px) {
  #concept .bg-video{
    transform: translateY(70%);
  }
}

/* ==========================================================================
   #venue
========================================================================== */
#venue {
  position: relative;
}
#venue .page__cover .ttlBox {
  right: 7%;
  bottom: 50%;
}
@media (min-width: 768px) {
  #venue .page__cover .ttlBox {
    right: 31.5em;
    bottom: 14em;
  }
  #venue .page__cover .svg_txt {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1440px) {
  #venue .page__cover .ttlBox {
    right: 28.5em;
  }
}


/* ==========================================================================
   #contents-top
========================================================================== */
#contents-top .page__cover .ttlBox {
  left: 7%;
  bottom: 27.5%;
}
@media (min-width: 576px) {
  #contents-top .page__cover .ttlBox {
    bottom: 11em;
  }
}
@media (min-width: 768px) {
  #contents-top .page__cover .ttlBox {
    left: 6em;
    bottom: 15em;
  }
}


/* ==========================================================================
   #plan
========================================================================== */
#plan {
  position: relative;
}
#plan .bg {
  height: 100%;
  max-height: 592px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
#plan .page__cover .ttlBox {
  right: 7%;
  bottom: 30%;
}
#plan .page__cover .btn {
  width: 260px;
}
@media (min-width: 576px) {
  #plan .page__cover .ttlBox {
    bottom: 11em;
  }
}
@media (min-width: 768px) {
  #plan .page__cover .ttlBox {
    right: 37.5em;
    bottom: 23em;
  }
  #plan .page__cover .svg_txt {
    right: 4em;
    left: auto;
  }
}
@media (min-width: 992px) {
  #plan .bg {
    background: url(img/plan_bg.jpg) no-repeat center top / cover;
  }

  #plan .page__cover {
    margin-left: 10%;
  }
  #plan .page__cover .imgBox img {
    height: 60vw;
    max-height: 720px;
  }
}
@media (min-width: 1440px) {
  #plan .page__cover .ttlBox {
    right: 35em;
  }
}

/* ==========================================================================
   #photowedding
========================================================================== */
@media (max-width: 767px) {
  #photowedding .block-banner-list li a {
    height: 28rem;
  }
}


/* ==========================================================================
   information
========================================================================== */
#information {
  overflow: hidden;
}
#information .section__header {
  margin: 0 0 1.5rem;
}
#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;
}

#information .lists .list .ttl::before,
#information .viewmore .btn::before {
  background-image: url(../common/img/arrow-3.svg);
}
#information .lists .list:hover .ttl::before,
#information .viewmore .btn:hover::before {
  background-image: url(../common/img/arrow-3b.svg);
}

#information .viewmore {
  width: 15em;
}
#information .viewmore .btn {
  min-width: inherit;
  text-align: left;
  padding-left: 0;
  color: var(--black);
  background: transparent;
}

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


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

/* ==========================================================================
   Etc
========================================================================== */
#top_bestrate a {
  display: block;
  transition: all .2s ease-in;
}
#top_bestrate a:hover {
  opacity: .8;
}
.br__text {
  background: var(--color3);
  color: #fff;
  text-align: center;
  padding: .4rem 4rem;
  font-weight: 600;
}