@charset "UTF-8";
body {
  background-color: #222;
}

.Page.brand {
  background-color: #222;
}

.Page-content {
  z-index: auto; 
  margin-top: 0 !important;
  background-color: transparent;
}

.Page-glbHeader {
  z-index: 9000;
  background-color: #222;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1); 
  transition-duration: 2s;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

.MainContentBlock.brand {
  background-color: transparent;
}

.Mainvisual-bgImg {
  max-height: 640px; 
  height: 100vh;
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .Page-glbHeader.type-a {
    position: relative;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock {
    height: auto;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock.clone {
    display: none;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBox {
    opacity: .5;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBox.is-left {
    position: relative;
    top: auto; 
    float: left;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBox.is-right {
    opacity: .5;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock-header {
    position: absolute;
    display: block !important;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock-header .BtnWrapper {
    opacity: 1;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock-header .Btn {
    width: 280px;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock-headTitle span {
    font-size: 3.2rem;
    opacity: 1;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock-headTitle:before, .Page.is-tablet .BrandBlock-headTitle:after {
    opacity: 1;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock-text {
    line-height: 2; 
    opacity: 1;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBox-dummy {
    display: none !important;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBox-bgImg {
    position: relative;
    top: auto;
    left: auto;
  }
}

@media only screen and (min-width: 60.0625em) {
  .Page.is-tablet .BrandBlock-dots {
    display: none !important;
  }
}

.BrandBlock {
  position: relative;
  overflow: hidden; 
  height: 100vh;
}
@media only screen and (max-width: 60em) {
  .BrandBlock {
    height: auto;
  }
}
@media only screen and (max-width: 60em) {
  .BrandBlock.clone {
    display: none;
  }
}
.BrandBlock.is-finished .is-left {
  position: absolute !important;
  opacity: 1 !important;
}
.BrandBlock.is-finished .is-right {
  opacity: 1 !important;
}
.BrandBlock.is-finished .BrandBlock-header {
  position: absolute;
}
.BrandBlock.is-finished .BrandBox-dummy {
  display: none !important;
}
.BrandBlock.is-filtered .BrandBox-bgImg:before {
  background-color: rgba(0, 0, 0, .5);
}

.BrandBox-bgImg:before {
  transition-timing-function: cubic-bezier(.215, .61, .355, 1); 
  transition-duration: .8s;
  transition-property: background-color;
}

.BrandBox {
  position: relative;
  width: 50%;
  height: 100%;
  transition-timing-function: cubic-bezier(.55, .055, .675, .19); 
  transition-duration: 2s;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
@media only screen and (max-width: 60em) {
  .BrandBox {
    width: 100%;
    height: auto;
  }
}
.BrandBox.is-left {
  position: fixed;
  top: -100%;
  left: 0;
}
@media only screen and (max-width: 60em) {
  .BrandBox.is-left {
    position: relative;
    top: auto;
    left: auto;
  }
}
.BrandBox.is-left .cloneHeadTitle {
  bottom: 0;
  padding-bottom: 40px;
}
.BrandBox.is-left .cloneHeadTitle:after {
  bottom: 0; 
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.BrandBox.is-right {
  float: right;
  opacity: 1;
}
@media only screen and (max-width: 60em) {
  .BrandBox.is-right {
    float: none;
  }
}
.BrandBox.is-right .cloneHeadTitle {
  top: 0;
  padding-top: 40px;
}
.BrandBox.is-right .cloneHeadTitle:after {
  top: 0; 
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.BrandBox .cloneHeadTitle {
  position: absolute;
  left: 0;
  width: 100%; 
  color: #fff;
  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
  text-align: center;
  font-weight: bold;
  font-size: 2.8rem;
}
@media only screen and (min-width: 60.0625em) {
  .BrandBox .cloneHeadTitle {
    display: none;
  }
}
.BrandBox .cloneHeadTitle:after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 500; 
  margin: auto;
  width: 80px;
  height: 1px;
  background-color: #fff;
  content: "";
}
.BrandBox:after {
  display: block;
  visibility: hidden; 
  clear: both;
  height: 0;
  content: "";
}

.BrandBlock-header {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9990;
  display: none; 
  width: 92%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 60em) {
  .BrandBlock-header {
    position: static;
    top: auto;
    left: auto;
    display: block !important;
    visibility: visible;
    margin: auto;
    padding: 5% 0; 
    width: 90%;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
.BrandBlock-header .BtnWrapper {
  opacity: 0;
  transition-delay: 2s; 
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  transition-duration: .8s;
  transition-property: opacity;
}
@media only screen and (max-width: 60em) {
  .BrandBlock-header .BtnWrapper {
    opacity: 1;
  }
}
.BrandBlock-header .Btn {
  margin: auto; 
  width: 320px;
}
@media only screen and (max-width: 60em) {
  .BrandBlock-header .Btn {
    width: 280px;
  }
}
.BrandBlock-header.is-active .BrandBlock-headTitle span, .BrandBlock-header.is-active .BrandBlock-headTitle:before, .BrandBlock-header.is-active .BrandBlock-headTitle:after {
  opacity: 1;
}
.BrandBlock-header.is-active .BtnWrapper {
  opacity: 1;
}
.BrandBlock-header.is-active .BrandBlock-text {
  line-height: 2.2; 
  opacity: 1;
}

.BrandBlock-headTitle {
  position: relative; 
  margin-bottom: 40px;
  width: 100%;
  color: #fff;
  font-size: 0;
}
@media only screen and (max-width: 60em) {
  .BrandBlock-headTitle {
    display: none;
  }
}
.BrandBlock-headTitle span {
  display: inline-block;
  width: 50%;
  letter-spacing: .1rem;
  font-size: 3.6rem;
  opacity: 0;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1); 
  transition-duration: .8s;
  transition-property: opacity;
}
@media only screen and (max-width: 60em) {
  .BrandBlock-headTitle span {
    display: block;
    width: 100%;
    text-align: center !important; 
    opacity: 1;
  }
}
.BrandBlock-headTitle span:first-child {
  padding-right: 50px;
  text-align: right;
  transition-delay: 0s;
}
.BrandBlock-headTitle span:last-child {
  padding-left: 50px;
  text-align: left;
  transition-delay: .8s;
}
.BrandBlock-headTitle:before, .BrandBlock-headTitle:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
  width: 100px;
  height: 1px;
  background-color: #fff;
  content: "";
  opacity: 0;
  transition-delay: 2s; 
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  transition-duration: .8s;
  transition-property: opacity;
}
.BrandBlock-headTitle:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.BrandBlock-headTitle:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.BrandBlock-text {
  margin-bottom: 40px;
  color: #fff;
  text-align: center;
  letter-spacing: .1rem;
  font-weight: bold;
  font-size: 15px;
  line-height: 0;
  opacity: 0;
  transition-delay: 2s; 
  transition-timing-function: cubic-bezier(.215, .61, .355, 1);
  transition-duration: .6s;
  transition-property: opacity, line-height;
}
@media only screen and (max-width: 60em) {
  .BrandBlock-text {
    margin-bottom: 4%;
    text-align: left; 
    font-size: 1.2rem;
    line-height: 2;
    opacity: 1;
  }
  .BrandBlock-text br {
    display: none;
  }
}

.BrandBox-dummy {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  visibility: visible;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1); 
  transition-duration: 2s;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: scale(.9);
  -ms-transform: scale(.9);
  transform: scale(.9);
}
@media only screen and (max-width: 60em) {
  .BrandBox-dummy {
    display: none !important;
  }
}
.BrandBox-dummy:after {
  display: block;
  visibility: hidden; 
  clear: both;
  height: 0;
  content: "";
}
.BrandBox-dummy .dummyBox {
  position: absolute;
  top: 0; 
  width: 50%;
  height: 100%;
}
.BrandBox-dummy .dummyBox:nth-child(2n) {
  right: 0;
}
.BrandBox-dummy .dummyBox:nth-child(2n+1) {
  left: 0;
}

.BrandBox-bgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 60em) {
  .BrandBox-bgImg {
    position: relative;
    top: auto;
    left: auto;
  }
}

.BrandBlock-dots {
  position: fixed;
  top: 50%;
  right: 4%;
  z-index: 9990;
  color: #fff;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media only screen and (max-width: 60em) {
  .BrandBlock-dots {
    display: none !important;
  }
}
.BrandBlock-dots.is-active p {
  opacity: 1; 
  cursor: pointer;
}
.BrandBlock-dots p {
  position: relative;
  padding-right: 20px;
  text-align: right;
  line-height: 2.8;
  opacity: 0;
  cursor: default;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1); 
  transition-duration: .4s;
  transition-property: opacity;
}
.BrandBlock-dots p.is-current:after {
  background-color: #fff;
}
.BrandBlock-dots p:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: inline-block;
  margin: auto;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: transparent;
  content: "";
  vertical-align: middle;
  transition-timing-function: cubic-bezier(.215, .61, .355, 1); 
  transition-duration: .4s;
  transition-property: background-color;
}
.BrandBlock-dots p:hover span {
  opacity: 1;
}
.BrandBlock-dots span {
  opacity: 0;
  transition-timing-function: linear; 
  transition-duration: .2s;
  transition-property: opacity;
}
.BrandBlock-dots span:first-child:after {
  content: " ×";
}

.ProfileBlock {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none; 
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}
@media only screen and (max-width: 60em) {
  .ProfileBlock {
    position: fixed;
  }
}

.ProfileBlock-closeBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.ProfileBlock-closeBtn:before, .ProfileBlock-closeBtn:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto; 
  width: 44px;
  height: 1px;
  background-color: #000;
  content: "";
}
.ProfileBlock-closeBtn:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ProfileBlock-closeBtn:after {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.ProfileBox {
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 5% auto;
  padding: 70px 20px;
  min-height: 1000px;
  max-width: 1300px;
  width: 90%;
  height: 90%;
  background-color: #fff;
}
.ProfileBox .inner {
  margin-right: auto; 
  margin-left: auto;
  max-width: 1024px;
  width: 100%;
}
@media only screen and (max-width: 69.56522em) {
  .ProfileBox .inner {
    margin-right: 4%; 
    margin-left: 4%;
    width: 92%;
  }
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox {
    position: relative;
    padding: 70px 4%;
    min-height: 0;
    height: auto;
  }
}

.ProfileBox-movie {
  position: relative;
  margin-bottom: 40px;
}
.ProfileBox-movie.is-played:after {
  opacity: 0;
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-movie {
    margin-bottom: 8%;
  }
}
.ProfileBox-movie:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
  width: 88px;
  height: 88px;
  background: transparent url(/bridal/fukuoka/classicagoen/common/img/moviePlayBtn.png) center center no-repeat;
  background-size: cover;
  content: "";
  transition-timing-function: linear; 
  transition-duration: .2s;
  transition-property: opacity;
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-movie:after {
    width: 44px;
    height: 44px;
  }
}
.ProfileBox-movie video {
  position: absolute;
  top: 0;
  left: 0;
  display: block; 
  width: 100%;
  height: 100%;
}
.ProfileBox-movie img {
  position: relative; 
  display: block;
  margin: auto;
  width: 100%;
}

.ProfileBox-content {
  position: relative;
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-content:after {
    display: block;
    visibility: hidden; 
    clear: both;
    height: 0;
    content: "";
  }
}

.ProfileBox-img {
  position: absolute; 
  display: block;
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-img {
    position: relative;
    display: inline;
    float: left;
    margin-right: 15px; 
    width: 25%;
  }
}

.ProfileBox-header {
  display: block;
  padding-top: 20px; 
  padding-left: 200px;
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-header {
    display: inline;
    padding-top: 0; 
    padding-left: 0;
  }
}

.ProfileBox-headTitle {
  margin-bottom: 20px;
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-headTitle {
    margin-bottom: 4%;
  }
}
.ProfileBox-headTitle span {
  display: block;
  color: #a37e31;
}
.ProfileBox-headTitle span.en {
  letter-spacing: .3rem; 
  font-weight: normal;
  font-size: 2rem;
  font-family: "PT Serif";
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-headTitle span.en {
    font-size: 1.7rem;
  }
}
.ProfileBox-headTitle span.ja {
  font-size: 1.4rem;
}
@media only screen and (max-width: 37.5em) {
  .ProfileBox-headTitle span.ja {
    font-size: 1.2rem;
  }
}

.ProfileBox-text {
  font-size: 1.2rem;
}

.MainContentBlock.learnMore {
  position: relative;
}