@charset "UTF-8";
:root {
  --offset-top: 0px;
}

.pre-inc .page_wrapp {
  width: 100%;
  overflow: hidden;
  font-family: YakuHanMP, "Zen Old Mincho", serif;
  padding-top: 0px;
}
@media screen and (max-width: 768px) {
  .pre-inc .page_wrapp {
    padding-top: 0px;
  }
}
.pre-inc .container.top {
  padding-bottom: 60px;
}
.pre-inc {
  /***MV***/
}
.pre-inc .mv_slide {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.pre-inc .mv_slide .cap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: min(2vw, 11px);
  color: #fff;
  text-shadow: -1px -1px 1px rgb(0, 0, 0), 0 0 3px rgba(0, 0, 0, 0.9), 1px 1px 3px rgba(0, 0, 0, 0.9);
  z-index: 2;
}
.pre-inc .mv_slide .cap.cap_1 {
  left: 10px;
  right: auto;
}
@media screen and (max-width: 768px) {
  .pre-inc .mv_slide .cap.cap_1 {
    bottom: auto;
    top: 30%;
  }
}
.pre-inc .mv_slide .cap.cap_2 {
  right: 40%;
}
@media screen and (max-width: 768px) {
  .pre-inc .mv_slide .cap.cap_2 {
    bottom: 26%;
    right: 10px;
    display: inline-block;
    text-align: right;
  }
}
.pre-inc .mv_slide_in {
  width: 100%;
}
.pre-inc .mv_slide_in picture,
.pre-inc .mv_slide_in img {
  display: block;
  width: 100%;
}
.pre-inc .mv_slide_in img {
  height: auto;
}
.pre-inc .mv_text_1 {
  position: absolute;
  z-index: 3;
  width: 36.25%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  filter: blur(20px);
  transition: all 4s ease-out;
}
.pre-inc .mv_1.is-show .mv_text_1 {
  /*opacity: 1;
  filter: blur(0px);
  transform: translate(-50%,-50%) scale(1);*/
  animation: mvTextAnime 4.5s ease-out forwards;
}
@keyframes mvTextAnime {
  0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    filter: blur(20px);
  }
  30% {
    filter: blur(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
@media screen and (max-width: 768px) {
  .pre-inc .mv_text_1 {
    position: absolute;
    z-index: 3;
    width: 86.1428571429%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
  }
  .pre-inc .mv_1.is-show .mv_text_1 {
    /*opacity: 1;
    transform: translate(-50%,-50%) scale(1);*/
  }
}
.pre-inc .mv_text_2 {
  position: absolute;
  z-index: 3;
  width: 49.765625%;
  top: 15%;
  right: 10%;
  opacity: 0;
  filter: blur(20px);
  transition: all 2.5s ease-out;
  transition-delay: 0.8;
}
.pre-inc .mv_2.is-show .mv_text_2 {
  opacity: 1;
  filter: blur(0);
  top: 10%;
}
@media screen and (max-width: 768px) {
  .pre-inc .mv_text_2 {
    width: 88%;
    top: 31%;
    right: 6%;
  }
  .pre-inc .mv_2.is-show .mv_text_2 {
    top: 26%;
  }
}
.pre-inc .mv_text_3 {
  position: absolute;
  z-index: 3;
  width: 35.234375%;
  top: 17%;
  left: 4%;
  opacity: 0;
  filter: blur(20px);
  transition: all 2.5s ease-out;
  transition-delay: 0.8;
}
.pre-inc .mv_3.is-show .mv_text_3 {
  opacity: 1;
  filter: blur(0);
  top: 12%;
}
@media screen and (max-width: 768px) {
  .pre-inc .mv_text_3 {
    width: 84%;
    top: 25%;
    left: 8%;
  }
  .pre-inc .mv_3.is-show .mv_text_3 {
    top: 20%;
  }
}
.pre-inc .mv_text_4 {
  position: absolute;
  z-index: 3;
  width: 26.328125%;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -12%) scale(1.1);
  filter: blur(20px);
  transition: all 2.5s ease-out;
  transition-delay: 0.8;
}
.pre-inc .mv_4.is-show .mv_text_4 {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -12%) scale(1);
}
@media screen and (max-width: 768px) {
  .pre-inc .mv_text_4 {
    position: absolute;
    z-index: 3;
    width: 62.5714285714%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%) scale(1.1);
  }
  .pre-inc .mv_4.is-show .mv_text_4 {
    transform: translate(-50%, -40%) scale(1);
  }
}
.pre-inc {
  /* ------------------------------
    pagination
  ------------------------------ */
}
.pre-inc .mv_wrapp .swiper-pagination-horizontal.swiper-pagination-bullets {
  bottom: 30px;
}
.pre-inc .mv_slide_pagination {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.pre-inc .mv_slide_pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background: #fff;
  opacity: 1;
  border: 1px solid #999;
}
.pre-inc .mv_slide_pagination .swiper-pagination-bullet-active {
  opacity: 1;
}
.pre-inc .mv_wrapp .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #105d87;
}
.pre-inc {
  /***行動提起***/
}
.pre-inc .main_text_wrapp {
  padding: 80px 0;
  background: #105D87;
  background: linear-gradient(95deg, rgb(16, 93, 135) 45%, rgb(13, 56, 80) 100%);
}
.pre-inc .main_text_wrapp .price_wrapp {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #a7a7a7;
}
@media screen and (max-width: 768px) {
  .pre-inc .main_text_wrapp .price_wrapp {
    padding-bottom: 0px;
    border-bottom: none;
  }
}
.pre-inc .main_text_wrapp .do_text {
  width: 90%;
  max-width: 700px;
  margin: 0 auto 40px;
}
.pre-inc .main_text_wrapp .top_info {
  width: 70%;
  max-width: 500px;
  margin: 0 auto 40px;
}
.pre-inc .main_text_wrapp .image_set {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto 40px;
  position: relative;
}
.pre-inc .main_text_wrapp .image_set .cap {
  position: absolute;
  font-size: 11px;
  color: #fff;
  bottom: 10px;
  right: 10px;
}
.pre-inc {
  /***メリットボックス***/
}
.pre-inc .merit_wrapp {
  background: #eef4f7;
  padding: 60px 10px;
}
.pre-inc .merit_wrapp .merit_box {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  .pre-inc .merit_wrapp .merit_box {
    display: block;
  }
}
.pre-inc .merit_wrapp .merit_box .merit {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .pre-inc .merit_wrapp .merit_box .merit {
    display: block;
  }
}
.pre-inc .merit_wrapp .merit_box .merit p {
  margin: 0;
  text-align: center;
  font-size: min(2vw, 28px);
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .pre-inc .merit_wrapp .merit_box .merit p {
    font-size: min(5vw, 38px);
  }
}
.pre-inc .merit_wrapp .merit_box .merit p .lage {
  color: #105d87;
  font-size: 140%;
}
.pre-inc .merit_wrapp .merit_box .merit p .lage.en {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 200%;
}
.pre-inc .merit_wrapp .merit_box .merit p .small {
  font-size: 70%;
}
.pre-inc .merit_wrapp .merit_box .merit:nth-child(2) {
  border-left: 1px solid #919ebb;
  border-right: 1px solid #919ebb;
}
@media screen and (max-width: 768px) {
  .pre-inc .merit_wrapp .merit_box .merit:nth-child(2) {
    border-top: 1px solid #919ebb;
    border-bottom: 1px solid #919ebb;
    border-left: none;
    border-right: none;
    padding: 20px 0;
    margin: 20px 0;
  }
}
.pre-inc {
  /***ボタン***/
}
.pre-inc .entry_bt {
  width: 70%;
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .pre-inc .entry_bt {
    width: 80%;
    max-width: 480px;
  }
}
.pre-inc .entry_bt a {
  display: block;
  position: relative;
  text-align: center;
  color: #fff;
  background: #105d87;
  font-size: min(2.8vw, 22px);
  padding: 30px 15px;
  line-height: 150%;
}
@media screen and (max-width: 768px) {
  .pre-inc .entry_bt a {
    font-size: min(4.1vw, 22px);
    padding: 30px 15px;
  }
}
.pre-inc .entry_bt a::before {
  content: "";
  width: 5%;
  height: 20%;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translate(0%, -50%);
  z-index: 2;
  background-image: url(../images/top_re/button_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.8s;
}
@media screen and (max-width: 768px) {
  .pre-inc .entry_bt a::before {
    transform: translate(160%, -50%);
  }
}
.pre-inc .entry_bt a:hover::before {
  right: 7%;
}
@media screen and (max-width: 768px) {
  .pre-inc .entry_bt a:hover::before {
    right: 12%;
  }
}
.pre-inc .entry_bt a span {
  position: relative;
  z-index: 3;
}
.pre-inc .entry_bt a:hover {
  opacity: 1;
}
.pre-inc .reserve_bt {
  width: 70%;
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.pre-inc .reserve_bt a {
  display: block;
  position: relative;
  text-align: center;
  color: #000;
  background: #C6A75D;
  background: linear-gradient(95deg, rgb(198, 167, 93) 0%, rgb(255, 245, 207) 65%);
  font-size: min(2.8vw, 22px);
  padding: 30px 15px;
  line-height: 150%;
}
@media screen and (max-width: 768px) {
  .pre-inc .reserve_bt a {
    font-size: min(4.1vw, 22px);
    padding: 30px 15px;
  }
}
.pre-inc .reserve_bt a::before {
  content: "";
  width: 5%;
  height: 20%;
  position: absolute;
  top: 50%;
  right: 20%;
  transform: translate(0%, -50%);
  z-index: 2;
  background-image: url(../images/top_re/button_arrow_bk.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.8s;
}
@media screen and (max-width: 768px) {
  .pre-inc .reserve_bt a::before {
    right: 15%;
  }
}
.pre-inc .reserve_bt a span {
  position: relative;
  z-index: 3;
}
.pre-inc .reserve_bt a:hover {
  opacity: 1;
}
.pre-inc .reserve_bt a:hover::before {
  right: 17%;
}
@media screen and (max-width: 768px) {
  .pre-inc .reserve_bt a:hover::before {
    right: 15%;
  }
}
.pre-inc {
  /***エントリーCTA***/
}
.pre-inc .top_entry {
  position: relative;
  padding: 60px 0;
}
.pre-inc .top_entry .entry_inner {
  padding: 0 20px;
  margin-inline: auto;
  box-sizing: content-box;
}
.pre-inc .top_entry .entry_ttl {
  font-size: min(4.1818181818vw, 46px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: #105d87;
}
.pre-inc .top_entry .entry_lead {
  font-size: 14px;
  margin-top: 1em;
  line-height: 1.7857142857;
  text-align: center;
  margin-bottom: 50px;
}
.pre-inc .top_entry .entry_box-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.pre-inc .top_entry .entry_bt {
  margin-top: 50px;
}
.pre-inc .top_entry .entry_cap {
  position: absolute;
  bottom: 0.5em;
  right: 1em;
  font-size: min(0.78125vw, 10px);
}
.pre-inc .entry_box {
  position: relative;
  z-index: 0;
  aspect-ratio: 404/218;
}
.pre-inc .entry_box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  font-size: min(7vw, 40px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .pre-inc .entry_box .text {
    width: 100%;
    font-size: min(5vw, 40px);
  }
}
.pre-inc .entry_box .text span {
  display: block;
  font-size: min(3.5vw, 20px);
  letter-spacing: 0em;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .pre-inc .entry_box .text span {
    font-size: min(3vw, 16px);
  }
}
.pre-inc .entry_box .new {
  position: absolute;
  font-size: 12px;
  padding: 0.6em 1em;
  line-height: 1;
  background: #ef1212;
  color: #fff;
  left: 0;
  top: 0;
  z-index: 4;
}
.pre-inc .entry_box .thumb {
  position: absolute;
  z-index: 0;
  inset: 0;
}
.pre-inc .entry_box .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pre-inc .entry_box .thumb .cap {
  position: absolute;
  z-index: 1;
  right: 0.5em;
  bottom: 0.5em;
  color: #fff;
  font-size: min(0.9090909091vw, 10px);
  pointer-events: none;
}
.pre-inc .swiper {
  overflow: inherit;
}
.pre-inc .swiper-horizontal > .swiper-pagination-bullets,
.pre-inc .swiper-pagination-horizontal.swiper-pagination-bullets {
  bottom: -2em;
}
.pre-inc .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #105d87;
}
.pre-inc .swiper-pagination-bullet {
  background: #b3b3b3;
  opacity: 1;
}
.pre-inc {
  /***来場予約***/
}
.pre-inc .reserve_wrapp {
  margin-top: 20px;
  padding-top: 20px;
  position: relative;
  /*color: #2e3192;*/
  color: #450e75;
  text-align: center;
}
.pre-inc .reserve_wrapp h3 {
  margin: 0 auto 15px;
  font-size: min(5.2vw, 60px);
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.pre-inc .reserve_wrapp h3 .small {
  font-size: 70%;
  margin: 0;
  margin-left: -0.5em;
  margin-right: -0.5em;
}
@media only screen and (max-width: 767px) {
  .pre-inc .reserve_wrapp h3 {
    font-size: min(8vw, 62px);
  }
}
.pre-inc .reserve_wrapp p {
  font-size: min(3.8vw, 50px);
  text-align: center;
  font-weight: 900;
  display: inline-block;
  margin: 0 auto 25px;
  color: #333;
}
@media only screen and (max-width: 767px) {
  .pre-inc .reserve_wrapp p {
    font-size: min(7.8vw, 55px);
    line-height: 100%;
  }
}
.pre-inc .reserve_wrapp::before {
  content: "";
  width: 60%;
  height: 1px;
  background: #333;
  background: linear-gradient(90deg, rgba(51, 51, 51, 0) 0%, rgb(51, 51, 51) 50%, rgba(51, 51, 51, 0) 100%);
  position: absolute;
  top: 0;
  left: 20%;
}
@media only screen and (max-width: 767px) {
  .pre-inc .reserve_wrapp::before {
    width: 100%;
    left: 0%;
  }
}
.pre-inc {
  /***STEP***/
}
.pre-inc .flow_contents {
  background: #fff;
  padding: 0px 0 80px;
  text-align: center;
}
.pre-inc .flow_contents h2 {
  font-size: min(5.5vw, 30px);
  letter-spacing: 0em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 25px;
}
.pre-inc .flow_contents .flow_image {
  width: 90%;
  max-width: 900px;
  margin: 0 auto 80px;
}
.pre-inc .vale_buner {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
.pre-inc {
  /***コンテンツ*****/
}
.pre-inc .top_contents {
  padding: 0px;
  background: #105D87;
  background: linear-gradient(95deg, rgb(16, 93, 135) 0%, rgb(13, 56, 80) 100%);
}
.pre-inc .top_contents .contents_head {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pre-inc .top_contents .contents_head .head_image {
  width: 100%;
  overflow: hidden;
}
.pre-inc .top_contents .contents_head .head_image img {
  transform: scale(1.2);
  filter: blur(20px);
  opacity: 0;
  max-width: inherit;
  transition: all 1.2s;
  transition-delay: 0.1s;
}
.pre-inc .top_contents .contents_head .cap {
  font-size: 11px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transition: all 1.2s;
  transition-delay: 0.2s;
}
.pre-inc .top_contents .contents_head .head_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 2;
  font-family: "EB Garamond", serif;
  font-weight: 400;
  text-align: center;
  font-size: min(7vw, 70px);
  letter-spacing: 0.05em;
  opacity: 0;
  transition: all 1.2s;
  transition-delay: 0.2s;
}
.pre-inc .top_contents .contents_head .head_title span {
  display: block;
  font-size: min(4vw, 25px);
}
.pre-inc .top_contents .contents_head.on .head_image img {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
}
.pre-inc .top_contents .contents_head.on .cap {
  opacity: 1;
}
.pre-inc .top_contents .contents_head.on .head_title {
  opacity: 1;
}
.pre-inc .top_contents .contents_in {
  width: 92%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in {
    display: block;
    padding: 40px 0;
  }
}
.pre-inc .top_contents .contents_in .contents_text {
  width: 48%;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in .contents_text {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 70px;
  }
}
.pre-inc .top_contents .contents_in .contents_text p {
  font-size: min(2vw, 26px);
  line-height: 1.8;
  margin-bottom: 30px;
}
.pre-inc .top_contents .contents_in .contents_text p .rail_name {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}
.pre-inc .top_contents .contents_in .contents_text p .rail_name::before {
  content: "JRおおさか東線";
  position: absolute;
  top: -1.2em;
  left: 1em;
  font-size: 60%;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in .contents_text p {
    font-size: min(4vw, 36px);
  }
}
.pre-inc .top_contents .contents_in .contents_text .link {
  width: 50%;
  transition: all 0.8s;
}
.pre-inc .top_contents .contents_in .contents_text .link a {
  display: block;
  position: relative;
  font-size: min(1.8vw, 20px);
  color: #fff;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in .contents_text .link a {
    font-size: min(3.5vw, 30px);
  }
}
.pre-inc .top_contents .contents_in .contents_text .link a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #fff;
  bottom: -30%;
  left: 0;
  z-index: 3;
  transition: all 0.8s;
}
.pre-inc .top_contents .contents_in .contents_text .link a::after {
  content: "";
  position: absolute;
  width: auto;
  height: 200%;
  aspect-ratio: 1/1;
  background-image: url(../images/top_re/link_icon.svg);
  background-repeat: no-repeat;
  background-size: cover;
  left: 100%;
  transform: translate(-50%, -50%);
  margin-top: 16%;
  z-index: 2;
  transition: all 0.8s;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in .contents_text .link a::after {
    height: 300%;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    margin-top: 10%;
  }
}
.pre-inc .top_contents .contents_in .contents_text .link:hover {
  width: 55%;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in .contents_text .link:hover {
    width: 50%;
  }
}
.pre-inc .top_contents .contents_in .contents_text .link:hover a::after {
  content: "";
  position: absolute;
  z-index: 2;
  transition: all 0.8s;
  margin-top: 14.5%;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in .contents_text .link:hover a::after {
    margin-top: 10%;
  }
}
.pre-inc .top_contents .contents_in .contents_image {
  width: 50%;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .pre-inc .top_contents .contents_in .contents_image {
    width: 100%;
    margin-bottom: 50px;
  }
}
.pre-inc .top_contents .contents_in .contents_image .design_image_1 {
  margin-bottom: 20px;
}
.pre-inc .top_contents .contents_in .contents_image .cap {
  position: relative;
  font-size: 11px;
  color: #fff;
  display: block;
  text-align: right;
  margin-top: 5px;
}
.pre-inc .top_contents .contents_in .contents_image .cap.access_1 {
  right: 52%;
}
.pre-inc .top_contents .contents_in .contents_image .cap.design_1 {
  bottom: 49.5%;
}
@media only screen and (max-width: 767px) {
  .pre-inc {
    /***エントリーCTA***/
  }
  .pre-inc .top_entry .entry_ttl {
    font-size: min(6.8571428571vw, 48px);
  }
  .pre-inc .top_entry .entry_lead {
    font-size: min(4vw, 28px);
  }
  .pre-inc .top_entry .entry_box-wrap {
    grid-template-columns: auto;
    gap: min(2.8571428571vw, 20px);
    max-width: min(82.8571428571vw, 580px);
    margin-inline: auto;
    margin-top: min(5.7142857143vw, 40px);
  }
  .pre-inc .top_entry .entry_box {
    aspect-ratio: 304/218;
  }
  .pre-inc .top_entry .entry_box .text img {
    height: min(10.8571428571vw, 76px);
  }
  .pre-inc .top_entry .entry_box .thumb .cap {
    font-size: min(2vw, 14px);
  }
  .pre-inc .top_entry .entry_bt {
    margin-top: min(10vw, 70px);
  }
  .pre-inc .top_entry .entry_cap {
    font-size: min(2vw, 14px);
  }
  .pre-inc {
    /***STEP***/
  }
  .pre-inc .flow_contents .flow_image {
    width: 90%;
    margin: 0 auto 30px;
  }
}
.pre-inc .bunner_property {
  width: 90%;
  max-width: 900px;
  margin: 30px auto 30px;
}/*# sourceMappingURL=top_re.css.map */