@charset "UTF-8";
/* 
  css設定 @charsetが消されるsass仕様へのハック用コメントです。削除しないでください。新規作成時も必須！
 */
/*==================================================================================
 top
==================================================================================*/
.introduce-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
}

.introduce-modal .scenes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s;
}

.introduce-modal .scenes.on {
  opacity: 1;
}

.introduce-modal .scene01 {
  background: url(../images/top/intro-bg.jpg) center;
  background-size: cover;
  z-index: 2;
}

.introduce-modal .scene01 .text {
  position: absolute;
  top: 50%;
  left: 3%;
  width: 94%;
  text-align: center;
  font-size: 44rem;
  color: #fff;
  transform: translateY(-50%);
}

.introduce-modal .scene01 .text.on .subs {
  margin: 0 3rem;
  opacity: 1;
  transform: scaleX(1);
  filter: blur(0px);
}

.introduce-modal .scene01 .subs {
  display: inline-block;
  margin: 0 3rem;
  filter: blur(0px);
  transform: scaleX(0.7);
  transition: opacity .8s ,filter .8s,margin .8s ,transform .8s;
  opacity: 0;
}

.introduce-modal .scene01 .sub1 {
  transition-delay: 0.06s;
}

.introduce-modal .scene01 .sub2 {
  transition-delay: 0.12s;
}

.introduce-modal .scene01 .sub3 {
  transition-delay: 0.18s;
}

.introduce-modal .scene01 .sub4 {
  transition-delay: 0.24s;
}

.introduce-modal .scene01 .sub5 {
  transition-delay: 0.3s;
}

.introduce-modal .scene01 .sub6 {
  transition-delay: 0.36s;
}

.introduce-modal .scene01 .sub7 {
  transition-delay: 0.42s;
}

.introduce-modal .scene01 .sub8 {
  transition-delay: 0.48s;
}

.introduce-modal .scene01 .sub9 {
  transition-delay: 0.54s;
}

.introduce-modal .scene01 .sub10 {
  transition-delay: 0.6s;
}

.introduce-modal .scene01 .sub11 {
  transition-delay: 0.66s;
}

.introduce-modal .scene01.off {
  opacity: 0;
  transition: opacity 2.3s 1.9s;
}

.introduce-modal .scene01.off .text.on .subs {
  margin: 0 3rem;
  opacity: 0;
  transform: scaleX(0.7);
  filter: blur(15px);
}

.introduce-modal .scene02 {
  z-index: 1;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.introduce-modal .scene02 .introuce-logos {
  display: block;
  margin: 0 auto 0;
  width: 22%;
}

.introduce-modal .scene02 .introuce-logos img {
  width: 100%;
}

.introduce-modal .scene02 .cond02 {
  margin: 0 auto;
  width: 82%;
}

.rolldown-subs {
  position: relative;
  overflow: hidden;
}

.rolldown-subs .subs {
  display: inline-block;
  transition: transform 1.5s;
  transform: translateY(-100%);
}

.rolldown-subs .sub1 {
  transition-delay: 0.04s;
}

.rolldown-subs .sub2 {
  transition-delay: 0.08s;
}

.rolldown-subs .sub3 {
  transition-delay: 0.12s;
}

.rolldown-subs .sub4 {
  transition-delay: 0.16s;
}

.rolldown-subs .sub5 {
  transition-delay: 0.2s;
}

.rolldown-subs .sub6 {
  transition-delay: 0.24s;
}

.rolldown-subs .sub7 {
  transition-delay: 0.28s;
}

.rolldown-subs .sub8 {
  transition-delay: 0.32s;
}

.rolldown-subs .sub9 {
  transition-delay: 0.36s;
}

.rolldown-subs .sub10 {
  transition-delay: 0.4s;
}

.rolldown-subs .sub11 {
  transition-delay: 0.44s;
}

.rolldown-subs .sub12 {
  transition-delay: 0.48s;
}

.rolldown-subs .sub13 {
  transition-delay: 0.52s;
}

.rolldown-subs .sub14 {
  transition-delay: 0.56s;
}

.rolldown-subs .sub15 {
  transition-delay: 0.6s;
}

.rolldown-subs .sub16 {
  transition-delay: 0.64s;
}

.rolldown-subs .sub17 {
  transition-delay: 0.68s;
}

.rolldown-subs .sub18 {
  transition-delay: 0.72s;
}

.rolldown-subs .sub19 {
  transition-delay: 0.76s;
}

.rolldown-subs .sub20 {
  transition-delay: 0.8s;
}

.rolldown-subs .sub21 {
  transition-delay: 0.84s;
}

.rolldown-subs .sub22 {
  transition-delay: 0.88s;
}

.rolldown-subs .sub23 {
  transition-delay: 0.92s;
}

.rolldown-subs .sub24 {
  transition-delay: 0.96s;
}

.rolldown-subs .sub25 {
  transition-delay: 1s;
}

.rolldown-subs .sub26 {
  transition-delay: 1.04s;
}

.rolldown-subs .sub27 {
  transition-delay: 1.08s;
}

.rolldown-subs .sub28 {
  transition-delay: 1.12s;
}

.rolldown-subs .sub29 {
  transition-delay: 1.16s;
}

.rolldown-subs .sub30 {
  transition-delay: 1.2s;
}

.rolldown-subs.on .subs {
  transform: translateY(0%);
}

#top .js-fade {
  filter: blur(20px);
  opacity: 0;
  transition: opacity 1.2s,filter 1.2s;
}

#top .js-fade.on {
  filter: blur(0px);
  opacity: 1;
}

#top .site-footer,
#top .pageAnnotationArea {
  position: relative;
  z-index: 2;
}

#top .site-header {
  opacity: 1;
}

#top:not(.open) .site-header {
  opacity: 0;
}

#top.open .site-header {
  transition: opacity 1.8s 1.4s;
}

#top .mv {
  position: relative;
  overflow: hidden;
  height: 100svh;
  opacity: 0;
  opacity: 1;
  transition: opacity 1.4s;
}

#top .mv.on {
  opacity: 1;
}

#top .mv .scenes {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 3.3s;
  z-index: 0;
}

#top .mv .scenes.on {
  opacity: 1;
  z-index: 1;
}

#top .mv .scenes.off {
  display: none;
}

#top .mv .scenes.on .texts span {
  filter: blur(0px);
  opacity: 1;
}

#top .mv .scenes .img00 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/top/mv01-01.jpg) center;
  background-size: cover;
}

#top .mv .scenes .img00 img {
  opacity: 0;
}

#top .mv .scenes .img01 {
  position: absolute;
}

#top .mv .scenes .texts {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 90%;
  text-align: center;
  z-index: 2;
  transform: translateY(-50%);
  color: #fff;
  letter-spacing: .3em;
}

#top .mv .scenes .texts img {
  width: auto;
  max-width: inherit;
  max-height: 120rem;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 1.5s 1.3s,filter 1.5s 1.3s;
}

#top .mv .scenes.on .texts img {
  filter: blur(0px);
  opacity: 1;
}

#top .mv .scenes .buttons {
  position: absolute;
  top: 100rem;
  right: 5%;
  width: 120rem;
  box-sizing: border-box;
  padding: 8rem;
  border-radius: 20rem;
  line-height: 1;
  font-size: 15rem;
  text-align: center;
  letter-spacing: .15em;
  background-color: rgba(28, 51, 51, 0.7);
  border: 1px solid rgba(28, 51, 51, 0.8);
  color: #fff;
  cursor: pointer;
  z-index: 3;
}

#top .mv .scene01 .img01 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(1);
  max-width: 550rem;
}

#top .mv .scene02 .img00 {
  background-image: url(../images/top/mv04-01.jpg);
}

#top .mv .scene03 .img00 {
  background-image: url(../images/top/mv02-01.jpg);
}

#top .mv .scene04 .img00 {
  background-image: url(../images/top/mv03-01.jpg);
}

#top .mv .scene05 .img00 {
  background-image: url(../images/top/mv04-01.jpg);
}

#top .mv .scene06 .img00 {
  background-image: url(../images/top/mv05-01.jpg);
}

#top .mv .scene07 .img00 {
  background-image: url(../images/top/mv06-01.jpg);
}

#top .mv .scene07.on .img01 {
  filter: blur(0px);
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

#top .mv .scene07 .img01 {
  bottom: -8%;
  left: 50%;
  opacity: 0;
  filter: blur(15px);
  transform: translateX(-50%) scaleX(1.2);
  transform-origin: 80%;
  max-width: 450rem;
  transition: opacity 1.6s 1.5s,filter 1.6s 1.5s,transform .6s 1.5s;
}

#top .bg-area {
  background: url(../images/top/section-bg.png) top right no-repeat;
  background-size: 35%;
}

#top .apeal {
  position: relative;
  max-width: 1200rem;
  width: 90%;
  margin: auto;
  padding: 54rem 0 140rem;
  text-align: center;
}

#top .apeal .apeal01 {
  font-size: 24rem;
  line-height: 2.2;
  padding-bottom: 15rem;
  border-bottom: 1px solid #1C3333;
}

#top .apeal .apeal02 {
  display: flex;
  justify-content: center;
  padding-top: 15rem;
}

#top .apeal .apeal02 li {
  font-size: 17rem;
  line-height: 1.8;
  padding: 0rem 10rem 6rem;
  border-right: 1px solid #1C3333;
}

#top .apeal .apeal02 li:last-child {
  border-right: none;
}

#top .information {
  padding-bottom: 100rem;
}

#top .information .intro {
  background-color: #F1F2EE;
  padding: 45rem 34rem 55rem;
  box-sizing: border-box;
  margin-bottom: 60rem;
}

#top .information .intro .title {
  text-align: center;
  font-size: 18rem;
  padding-bottom: 82rem;
  letter-spacing: .1em;
}

#top .information .intro .info-list {
  padding: 0 35rem 35rem;
  margin-bottom: 20rem;
}

#top .information .intro .info-list dt {
  font-size: 16rem;
  padding-bottom: 12rem;
}

#top .information .intro .info-list dd {
  padding-bottom: 20rem;
  font-size: 22rem;
  line-height: 1.5;
  color: #9B7F2C;
}

#top .information .intro .entries {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

#top .information .intro .entries header {
  width: calc(100% - 200rem);
  text-align: left;
}

#top .information .intro .entries header .sub-title {
  padding-left: 40rem;
  padding-bottom: 25rem;
  font-size: 22rem;
  color: #9B7F2C;
  border-bottom: 1px solid #9B7F2C;
  margin-bottom: 20rem;
}

#top .information .intro .entries header .text {
  padding-left: 40rem;
  font-size: 14rem;
  line-height: 2.3;
}

#top .information .intro .entries .buttons {
  width: 160rem;
}

#top .information .intro .entries .buttons .request {
  padding-bottom: 5rem;
}

#top .information .intro .entries .buttons a {
  text-align: center;
  display: block;
  padding: 45rem 5rem;
  background-color: #9c917f;
  color: #fff;
  transition: background-color .5s;
}

#top .information .intro .entries .buttons a .text02 {
  font-size: 12rem;
  line-height: 1.4;
}

#top .information .intro .entries .buttons a .text01 {
  font-size: 16rem;
  padding-bottom: 15rem;
  margin-bottom: 15rem;
  position: relative;
}

#top .information .intro .entries .buttons a .text01::after {
  content: "";
  display: block;
  position: absolute;
  width: 30rem;
  height: 2px;
  background-color: #fff;
  bottom: 0;
  left: 50%;
  transition: width .5s;
  transform: translateX(-50%);
}

@media (min-width: 1025px) {
  #top .information .intro .entries .buttons a:hover {
    opacity: 1 !important;
    background-color: rgba(156, 145, 127, 0.6);
  }
  #top .information .intro .entries .buttons a:hover .text01::after {
    width: 100rem;
  }
}

#top .information .intro .entries .buttons .reserve a {
  background-color: #363847;
}

@media (min-width: 1025px) {
  #top .information .intro .entries .buttons .reserve a:hover {
    background-color: rgba(54, 56, 71, 0.6);
  }
}

#top .concept {
  position: relative;
  height: 200vh;
  padding-top: 0vh;
}

#top .concept.hide {
  opacity: 0;
}

#top .concept.pathed {
  background: url(../images/top/section-bg.png) no-repeat top right #E4E1D7;
  background-size: 35%;
}

#top .concept.pathed .sp-inner,
#top .concept.pathed .pc-inner {
  transition: opacity 1.5s;
  opacity: 0 !important;
}

#top .concept.on .header {
  position: fixed;
  opacity: 1;
  margin-top: 0rem;
  filter: blur(0px);
}

#top .concept.on .header.at {
  opacity: 0;
}

#top .concept.on .pc-inner {
  position: fixed;
  opacity: 1;
  filter: blur(0px);
}

#top .concept .header {
  position: absolute;
  top: 50vh;
  left: 50%;
  width: 80%;
  max-width: 395rem;
  transform: translate(-50%, -50%);
  opacity: 0;
  margin-top: 40rem;
  filter: blur(10px);
  transition: opacity .7s,margin .7s,filter .5s;
}

#top .concept .pc-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(20px);
  transition: filter 1.5s, opacity 1.5s;
}

#top .concept .pc-inner.off {
  width: 0% !important;
  height: 0% !important;
  transition: filter 1.5s, opacity 1.5s;
}

#top .concept .pc-inner .in {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  background: url(../images/top/concept-bg.png);
  background-size: cover;
}

#top .concept .pc-inner .image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  width: 576rem;
  transform: translate(-50%, -50%);
}

#top .sections-wrap {
  position: relative;
  z-index: 2;
  background-color: #E4E1D7;
}

#top .sections-wrap::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(../images/top/section-bg.png) no-repeat top right;
  background-size: 30%;
}

#top .sections-wrap.on::before {
  position: fixed;
}

#top .sections-wrap.on .section-image {
  position: fixed;
}

#top .sections-wrap.at .sections-residence .section-image {
  opacity: 1 !important;
}

#top .sections {
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

#top .sections.on .section-image {
  opacity: 1;
}

#top .sections .header {
  margin-left: 50%;
  padding: 120rem 60rem 140rem;
  text-align: center;
}

#top .sections .header .mini-images {
  margin: 0 auto 37rem;
  width: 285rem;
}

#top .sections .header .title {
  font-size: 22rem;
  line-height: 1.5;
  font-weight: normal;
  padding-bottom: 22rem;
  letter-spacing: .25em;
}

#top .sections .header .name {
  font-size: 12rem;
  line-height: 1.5;
  padding-bottom: 54rem;
  letter-spacing: .25em;
}

#top .sections .header .lead {
  font-size: 16rem;
  line-height: 1.5;
  letter-spacing: .15em;
  padding-bottom: 25rem;
}

#top .sections .header .text {
  font-size: 12rem;
  line-height: 2.9;
  letter-spacing: .15em;
  padding-bottom: 23rem;
}

#top .sections .section-image {
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 50%;
  height: 100vh;
  background: url(../images/top/section-residence01.jpg);
  background-size: cover;
  opacity: 0;
  transition: opacity 1.5s;
}

#top .sections .section-image img {
  opacity: 0;
}

#top .sections .link {
  margin: 0 auto;
  max-width: 195rem;
  display: block;
  border-bottom: 1px solid #1C3333;
  color: #1C3333;
  font-size: 12rem;
  font-family: "EB Garamond","Shippori Mincho B1", serif;
  padding: 6rem 20rem;
  position: relative;
  text-align: left;
}

#top .sections .link a {
  color: #1C3333;
}

#top .sections .link::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 15rem;
  width: 14rem;
  height: 8rem;
  transform: translateY(-50%);
  background: url(../images/common/icon-link-arrow.svg);
  background-size: 14rem 8rem;
  transition: right .5s;
}

@media (min-width: 1025px) {
  #top .sections .link:hover {
    opacity: 1 !important;
  }
  #top .sections .link:hover::after {
    right: 5rem;
  }
}

#top .sections-plan .section-image {
  z-index: 5;
  background-image: url(../images/top/section-plan01.jpg);
}

#top .sections-location .section-image {
  z-index: 4;
  background-image: url(../images/top/section-location01.jpg);
}

#top .sections-position .section-image {
  z-index: 3;
  background-image: url(../images/top/section-position01.jpg);
}

#top .sections-access .section-image {
  z-index: 2;
  background-image: url(../images/top/section-access01.jpg);
}

#top .sections-residence .section-image {
  z-index: 1;
}

#top .lower-links-wrap {
  position: relative;
  z-index: 3;
  background-color: #E4E1D7;
  padding-bottom: 50rem;
}

#top .lower-links-wrap .slick-slide {
  height: auto;
}

#top main {
  padding-bottom: 0;
}

/*==================================================================================
 top-sp
==================================================================================*/
@media (max-width: 768px) {
  .introduce-modal .scene01 {
    background-image: url(../images/top/intro-bg-sp.jpg);
  }
  .introduce-modal .scene01 .text {
    font-size: 23rem;
    line-height: 1.5;
  }
  .introduce-modal .scene02 {
    z-index: 1;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .introduce-modal .scene02 .introuce-logos {
    display: block;
    margin: 0 auto;
    width: 60%;
  }
  .introduce-modal .scene02 .introuce-logos li.cond01 {
    padding-bottom: 0rem;
  }
  .introduce-modal .scene02 .introuce-logos img {
    width: 100%;
  }
  #top .mv .scenes {
    overflow: hidden;
  }
  #top .mv .scenes .img00 {
    background-image: url(../images/top/mv01-01-sp.jpg);
  }
  #top .mv .scenes .texts.on span {
    letter-spacing: -.1em;
  }
  #top .mv .scenes .texts {
    font-size: 20rem;
    line-height: 1.8;
  }
  #top .mv .scenes .texts img {
    max-height: inherit;
    height: 110rem;
  }
  #top .mv .scenes .texts span {
    margin: 0 -9rem;
  }
  #top .mv .scenes .buttons {
    top: 60rem;
    width: 80rem;
    padding: 6rem;
    border-radius: 20rem;
    font-size: 12rem;
    letter-spacing: 0em;
  }
  #top .mv .scene01 .img01 {
    max-width: inherit;
    width: 100%;
  }
  #top .mv .scene02 .img00 {
    background-image: url(../images/top/mv04-01-sp.jpg);
  }
  #top .mv .scene03 .img00 {
    background-image: url(../images/top/mv02-01-sp.jpg);
  }
  #top .mv .scene03 .texts img {
    width: 100%;
    height: auto;
  }
  #top .mv .scene04 .img00 {
    background-image: url(../images/top/mv03-01-sp.jpg);
  }
  #top .mv .scene04 .texts img {
    height: 460rem;
  }
  #top .mv .scene05 .img00 {
    background-image: url(../images/top/mv04-01-sp.jpg);
  }
  #top .mv .scene05 .texts img {
    height: 480rem;
  }
  #top .mv .scene06 .img00 {
    background-image: url(../images/top/mv05-01-sp.jpg);
  }
  #top .mv .scene06 .texts img {
    height: 460rem;
  }
  #top .mv .scene07 .img00 {
    background-image: url(../images/top/mv06-01-sp.jpg);
  }
  #top .mv .scene07 .img01 {
    bottom: 3%;
    max-width: inherit;
    width: 110%;
  }
  #top .information {
    padding-top: 60rem;
    padding-bottom: 60rem;
    width: 100%;
  }
  #top .information .intro {
    padding: 65rem 4% 55rem;
    box-shadow: 0px 0px 4rem #666;
    margin: 0 auto 60rem;
    box-sizing: border-box;
    width: 90%;
  }
  #top .information .intro .title {
    padding-bottom: 45rem;
  }
  #top .information .intro .info-list {
    text-align: center;
    margin-bottom: 45rem;
    padding: 0 15rem;
  }
  #top .information .intro .info-list dt {
    font-size: 14rem;
    text-align: left;
    padding-bottom: 2rem;
  }
  #top .information .intro .info-list dd {
    padding-bottom: 20rem;
    font-size: 15rem;
    line-height: 1.7;
    letter-spacing: 0;
    text-align: left;
  }
  #top .information .intro .entries {
    margin: 0 auto;
    display: block;
  }
  #top .information .intro .entries header {
    width: auto;
    text-align: center;
    padding-bottom: 20rem;
  }
  #top .information .intro .entries header .sub-title {
    padding-left: 0rem;
    padding-bottom: 22rem;
    font-size: 22rem;
    border-bottom: none;
    margin-bottom: 0;
  }
  #top .information .intro .entries header .text {
    padding-left: 0rem;
    font-size: 14rem;
    line-height: 1.8;
    text-align: left;
  }
  #top .information .intro .entries .buttons {
    width: auto;
  }
  #top .information .intro .entries .buttons a {
    text-align: center;
    display: block;
    padding: 20rem 5rem;
  }
  #top .information .intro .entries .buttons a .text01 {
    font-size: 16rem;
    padding-bottom: 12rem;
    margin-bottom: 12rem;
  }
  #top .bg-area {
    background: none;
  }
  #top .apeal {
    padding: 45rem 0 100rem;
  }
  #top .apeal .apeal01 {
    font-size: 22rem;
    line-height: 1.8;
    padding-bottom: 12rem;
    border: none;
  }
  #top .apeal .apeal02 {
    display: block;
    padding-top: 5rem;
  }
  #top .apeal .apeal02 li {
    font-size: 16rem;
    line-height: 1.8;
    padding: 20rem 10rem 20rem;
    border-top: 1px solid #1C3333;
    border-left: none;
  }
  #top .apeal .apeal02 li br {
    display: none;
  }
  #top .apeal .apeal02 li:last-child {
    border-right: none;
  }
  #top .concept {
    position: relative;
    height: 300vh;
    padding-bottom: 160vh;
  }
  #top .concept.hide {
    opacity: 0;
  }
  #top .concept.pathed {
    background: transparent;
  }
  #top .concept.pathed .pc-inner {
    transition: opacity 1.5s;
    opacity: 0;
  }
  #top .concept.pathed .sp-inner::after {
    opacity: 1;
  }
  #top .concept.on .header {
    position: fixed;
    opacity: 1;
    margin-top: 0rem;
    filter: blur(0px);
  }
  #top .concept.on .header.at {
    opacity: 0;
  }
  #top .concept.on .sp-inner {
    position: fixed;
    opacity: 1;
    filter: blur(0px);
  }
  #top .concept.sp-on .sp-inner .bg {
    opacity: 1;
  }
  #top .concept.sp-on .sp-inner .text01 {
    top: 33%;
  }
  #top .concept.sp-on .sp-inner .text02 {
    opacity: 1;
  }
  #top .concept.sp-on .sp-inner .images {
    width: 115vw;
  }
  #top .concept.sp-on .sp-inner .images .base01 {
    opacity: 0;
  }
  #top .concept.sp-on .sp-inner .images .base02 {
    opacity: 1;
  }
  #top .concept .header {
    position: absolute;
    top: 45vh;
    left: 50%;
    width: 80%;
    max-width: 395rem;
    transform: translate(-50%, -50%);
    opacity: 0;
    margin-top: 40rem;
    filter: blur(10px);
    transition: opacity .7s,margin .7s,filter .5s;
  }
  #top .concept .text-sp {
    padding: 0 8%;
    position: absolute;
    bottom: 30vh;
    z-index: 3;
    color: #fff;
    font-size: 14rem;
    line-height: 2.2;
    text-align: center;
  }
  #top .concept .sp-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    opacity: 0;
    filter: blur(20px);
    transition: filter 1.5s, opacity 1.5s;
  }
  #top .concept .sp-inner .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 1s;
  }
  #top .concept .sp-inner .text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 1.5s;
  }
  #top .concept .sp-inner .text01 {
    width: 57%;
    opacity: 1;
    transition: top .7s;
  }
  #top .concept .sp-inner .text02 {
    top: 55%;
    width: 75%;
    opacity: 0;
  }
  #top .concept .sp-inner .in {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    background: url(../images/top/concept-bg.png);
    background-size: cover;
  }
  #top .concept .sp-inner .images {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    width: 100vw;
    height: 100vh;
    transform: translate(-49%, -50%);
    background: url(../images/top/concept-bg-sp.png) top center no-repeat;
    background-size: cover;
    transition: width 1s;
  }
  #top .concept .sp-inner .images img {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 1s;
  }
  #top .concept .sp-inner .images .base02 {
    opacity: 0;
  }
  #top .sections-wrap {
    background: none;
  }
  #top .sections-wrap::before {
    display: none !important;
  }
  #top .sections-wrap.on .section-image {
    position: relative;
  }
  #top .sections {
    position: relative;
    z-index: 2;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    min-height: inherit;
  }
  #top .sections .header {
    order: 1;
    width: 100%;
    margin-left: auto;
    padding: 58rem 6% 50rem;
    background: url(../images/top/section-bg.png) top right no-repeat;
    background-size: 45%;
    background-color: #E4E1D7;
  }
  #top .sections .header .title {
    font-size: 22rem;
    padding-bottom: 14rem;
  }
  #top .sections .header .name {
    padding-bottom: 32rem;
  }
  #top .sections .header .lead {
    line-height: 1.9;
    padding-bottom: 32rem;
  }
  #top .sections .header .text {
    font-size: 12rem;
    line-height: 1.8;
    padding-bottom: 43rem;
  }
  #top .sections .header .text br {
    display: none;
  }
  #top .sections .section-image {
    order: 0;
    position: static;
    width: auto;
    height: auto;
    background: none;
  }
  #top .sections .section-image img {
    opacity: 1;
  }
  #top .sections-plan .section-image {
    z-index: 5;
    background-image: url(../images/top/section-plan01.jpg);
  }
  #top .sections-location .header {
    background-color: rgba(228, 225, 215, 0.3);
  }
  #top .sections-location .section-image {
    z-index: 4;
    background-image: url(../images/top/section-location01.jpg);
  }
  #top .sections-position .section-image {
    z-index: 3;
    background-image: url(../images/top/section-position01.jpg);
  }
  #top .sections-access .header {
    background-color: rgba(228, 225, 215, 0.3);
  }
  #top .sections-access .section-image {
    z-index: 2;
    background-image: url(../images/top/section-access01.jpg);
  }
  #top .sections-residence .section-image {
    position: relative;
    z-index: 1;
    opacity: 1 !important;
  }
  #top .sections-residence .section-image .title {
    position: absolute;
    top: 40%;
    left: 42%;
    transform: translateX(-32%);
    font-size: 22rem;
    letter-spacing: .25em;
    color: #fff;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
  }
  #top .sections-residence .section-image .name {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12rem;
    letter-spacing: .25em;
    color: #fff;
  }
  #top .sections .section-image {
    position: relative;
    z-index: 1;
  }
  #top .sections .section-image .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    font-size: 22rem;
    letter-spacing: .25em;
    color: #fff;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
  }
  #top .sections .section-image .name {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12rem;
    letter-spacing: .25em;
    color: #fff;
  }
  #top .sections.sections-access .section-image .title, #top .sections.sections-position .section-image .title, #top .sections.sections-location .section-image .title {
    left: 50%;
    transform: translateX(-50%);
  }
  #top .lower-links-wrap {
    position: relative;
    z-index: 3;
    background-color: #ADB5AA;
    padding-bottom: 50rem;
  }
  #top main {
    padding-bottom: 0;
  }
}

/*# sourceMappingURL=top.css.map */