/** Osaka kita-minami Pages**/

.epass_mv {
  margin-bottom: 0 !important;
}

.kita__main {
  overflow: visible !important;
}

.kita__banner {
  position: relative;
  padding-block: 100px;

}


@media screen and (max-width: 767px) {
.kita__banner {
    overflow: hidden;.sidenav
}
}

@media screen and (max-width: 767px) {
  .kita__banner {
    padding-block: 40px;
  }
}

.kita__banner::before,
.kita__banner::after {
  position: absolute;
  content: "";
  z-index: -1;
}

/*
.kita__banner::before {
  background: url("../img/kita-minami-area.svg") no-repeat center/contain;
  max-width: 525px;
  width: 100%;
  height: 100%;
  top: 18px;
  right: 10%;
}

@media screen and (min-width: 1900px) {
  .kita__banner::before {
    right: 20%;
  }
}
*/
/*
.kita__banner::after {
  background: url("../img/banner-deco-03.png") no-repeat center/contain;
  max-width: 300px;
  width: 100%;
  height: 320px;
  top: unset;
  bottom: 15%;
  right: 0;
}

@media screen and (min-width: 1900px) {
  .kita__banner::after {
    right: 13%;
  }
}

@media screen and (min-width: 767px) and (max-width:1200px) {
  .kita__banner::after {
    max-width: 315px;
  }
}
*/
@media screen and (max-width: 767px) {
  .kita__banner::before,
  .kita__banner::after {
    content: none;
  } 
}

.kita__banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../img/bg.svg") no-repeat center/contain;
  opacity: 0.46;
  z-index: -1;
  width: 95%;
}

@media screen and (min-width: 1520px) {
  .kita__banner-bg {
    background-size: cover;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .kita__banner-bg {
    background-size: cover;
    width: 100%;
  } 
}

.kita__banner-content {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
opacity:0;
}



@media screen and (max-width: 767px) {
  .kita__banner-content {
    padding: 0 8%;
  } 
}
/*
.kita__banner-content::before,
.kita__banner-content::after {
  content: "";
  position: absolute;
  max-width: 220px;
  width: 100%;
  height: 140px;
}

@media screen and (max-width: 767px) {
  .kita__banner-content::before,
  .kita__banner-content::after {
    max-width: 110px;
    z-index: -1;
  }
}

@media screen and (min-width: 601px) and (max-width: 767px) {
  .kita__banner-content::before,
  .kita__banner-content::after {
    max-width: 200px;
  }
}
*/
/*
.kita__banner-content::before {
  background: url("../img/banner-deco-01.png") no-repeat center/cover;
  top: 0;
  left: -25%;
}

@media screen and (min-width:768px) and (max-width: 1449px) {
  .kita__banner-content::before {
    left: -40%;
  }
}
*/
@media screen and (max-width: 767px) {
  .kita__banner-content::before {
    top: 5%;
    left: unset;
    right: 3%;
    background-size: contain;
  }
}
/*
.kita__banner-content::after {
  background: url("../img/banner-deco-02.png") no-repeat center/cover;
  top: unset;
  bottom: -22%;
  left: -20%;
}

@media screen and (min-width:768px) and (max-width: 1449px) {
  .kita__banner-content::after {
    left: -40%;
    bottom: -10%;
  }
}

@media screen and (min-width:600px) and (max-width: 767px) {
  .kita__banner-content::after {
    bottom: -40%;
  }
}

@media screen and (max-width: 767px) {
  .kita__banner-content::after {
    left: 5%;
    background-size: contain;
  }
}
*/
.kita__banner-content h2 {
  font: 700 70px "Roboto Condensed", sans-serif;
  letter-spacing: 0.07em;
  margin-bottom: 25px;
  color: #333;
}

@media screen and (max-width: 767px) {
  .kita__banner-content h2 {
    font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  .kita__banner-content h2 {
    font-size: 30px;
    margin-top: -50px;
    z-index: 1;
    position: relative;
  }
}

.kita__banner-content p {
  width: 72%;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 2em;
}

@media screen and (max-width: 767px) {
  .kita__banner-content p {
    width: 100%;
    font-size: 13px;
  }
}

.kita__banner-deco-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .kita__banner-deco-sp {
    display: block;
    max-width: 445px;
    width: 85%;
    height: 100%;
    margin: 0 5% 0 auto;
  }
}

.kita__content {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  margin-top: 100px;
}
@media screen and (min-width: 767px) and (max-width: 1200px) {
  .kita__content {
    gap: 30px;
  }
}

@media screen and (max-width: 767px) {
  .kita__content {
    flex-direction: column;
    gap: 100px;
    margin-top: 50px;
  }
}

@media screen and (min-width: 600px) and (max-width: 1200px) {
  .kita__content {
    padding: 0 2%;
  }
}

.sidenav {
  max-width: 300px;
  width: 100%;
  position: sticky;
  top: 180px;
  max-height: calc(100vh - 220px);
}

@media screen and (max-width: 767px) {
  .sidenav {
    position: relative;
    top: unset;
    max-height: auto;
    max-width: 100%;
  }
}

.sidenav__item {
  position: relative;
}

.sidenav__item::after {
  position: absolute;
  content: "";
  background: url("../img/sidenav-deco.png") no-repeat center/cover;
  width: 100%;
  height: 2px;
}

.sidenav__item-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 10px 0;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .sidenav__item-wrapper {
    gap: 10px;
  }
}

.sidenav__item-text {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.12em;
}

.content {
  max-width: 800px;
  width: 100%;
  flex-grow: 1;
}

@media screen and (max-width: 767px) {
  .content {
    max-width: 100%;
  }
}

.kita__title {
  width: 100%;
  position: relative;
  text-align:center;
}

.kita__title.kita__title--heading {
  margin-bottom: 40px;
  position: relative;
}

.kita__title.kita__title--heading .kita__spot-heading {
  font-size: 40px;
  line-height: 1.15em;
  padding-bottom: 10px;
  color: #000;
  text-shadow: 3px 2px 0px rgba(236, 221, 152, 1);
}

@media screen and (max-width: 767px) {
  .kita__title.kita__title--heading .kita__spot-heading {
    font-size: 25px;
  }
}
/*
.kita__spot-header {
  width: 125px;
  height: 23px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kita__title.kita__title--heading::before,
.kita__title.kita__title--heading::after {
  width: 75px;
  height: 100px;
}

@media screen and (max-width: 767px) {
  .kita__title.kita__title--heading::before,
  .kita__title.kita__title--heading::after {
    width: 45px;
  }
}
*/
.kita__title span,
.kita__title h2 {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  color: #333;
}
/*
.kita__title::before,
.kita__title::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 87px;
}

.kita__title::before {
  background: url("../img/sidenav-title-deco-left.png") no-repeat center/cover;
  top: -32px;
}

.kita__title::after {
  background: url("../img/sidenav-title-deco-right.png") no-repeat center/cover;
  top: 20px;
  right: 0;
}

.kita__title.kita__title--heading::before {
  top: -25px;
}

@media screen and (max-width: 767px) {
  .kita__title.kita__title--heading::before {
    top: -35px;
  }
}

.kita__title.kita__title--heading::after {
  top: calc(100% - 35px);
  right: 0;
}
*/
.kita__image-slide {
  max-width: 800px;
  width: 100%;
  height: 450px;
}

@media screen and (max-width: 767px) {
  .kita__image-slide {
    max-width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .kita__image-slide {
    height: auto;
  }
}

.kita__content-text {
  color: #3B4043;
  letter-spacing: 0.05em;
}

.kita__content-text h3 {
    color: #000;
    font-size: 36px;
    font-weight: 700;
    margin: 40px 0 17px;
    padding-bottom: 25px;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    text-shadow: 3px 2px 0px rgba(170, 200, 226, 1);
    background-image: url(../img/heading_line_h3.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
}

@media screen and (max-width: 600px) {
  .kita__content-text h3 {
    font-size: 24px;
    padding-bottom: 10px;
  }
}

.kita__content-text h4 {
    position: relative;
    color:#000;
    font-size: 30px;
    font-weight: 700;
    padding-left: 65px;
    padding-bottom: 15px;
    margin: 40px 0 30px;
    letter-spacing: 0.05em;
    background-image: url(../img/heading_line_h4.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
}
.kita__content-text h4:before{
    position:absolute;
    top: -15px;
    left: 0;
    content:"";
    display:block;
    width:57px;
    height:51px;
    background-image: url(../img/heading_line_h4_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
@media screen and (max-width: 600px) {
    .kita__content-text h4 {
        padding-left: 35px;
    }
    .kita__content-text h4:before {
        width: 30px;
        height: 60px;
    }

}

@media screen and (max-width: 600px) {
  .kita__content-text h4,
  .kita__content-text h3 {
    margin: 20px 0 15px;
  }

  .kita__content-text h4 {
    font-size: 22px;
  }
}

.kita__content-text p {
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.75em;
}

@media screen and (max-width: 767px) {
  .kita__content-text p {
    font-size: 13px;
  }
}

.kita__image {
  width: 100%;
}

.kita__info-list {
  margin: 0 0 140px;
}

@media screen and (max-width: 767px) {
  .kita__info-list {
    margin: 0 0 50px;
  }
}

.kita__info-item {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 20px 0 0;
}

.kita__gmap {
  width: 100%;
  height: 450px;
}

@media screen and (max-width: 600px) {
  .kita__gmap {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

.kita__info-name {
  width: 20%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.kita__info-desc {
  width: 80%;
}

@media screen and (max-width: 767px) {
  .kita__info-name, 
  .kita__info-desc {
    font-size: 13px;
  }
}

.spot__anchor {
  position: relative;
  top: -160px;
  visibility: hidden;
}

@media screen and (max-width: 767px) {
  .kita__slider-thumbnail {
    width: 212px;
    margin: 0 !important;
  }
}


:root {
  --mainvisual-height: 35.573vw; /* 683pxをビューポート幅に対する割合に変換 (683/1920*100) */
  --max-mainvisual-height: 683px;
}

.p-mainvisual {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--mainvisual-height);
  max-height: var(--max-mainvisual-height);
  min-height: 400px;
  overflow: hidden;
  z-index: 1;
}
@media screen and (max-width: 600px) {
 .p-mainvisual {
        min-height: calc(100svh - 0px);
 }
}
.p-mainvisual__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.p-mainvisual__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
}
.p-mainvisual__title {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
  width: clamp(200px, 70.31vw, 1350px);
}
.p-mainvisual__title img {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  width: 100%;
  height: auto;
}

@media screen and (max-width: 576px) {
  .p-mainvisual__title {
    width:90%;
  }
  .p-mainvisual__title img{
    width:100%;
  }
}

.p-mainvisual__pop {
  position: absolute;
  width: 100%;
  height: 100%;
}
.p-mainvisual__pop img {
  position: absolute;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.p-mainvisual__pop img[src*=mv_pop_img_01] {
  top: 3%;
  left: 6%;
  width: clamp(100px, 8.9vw, 170px); /* 1920pxベース */
  height: auto;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__pop img[src*=mv_pop_img_01] {
    top: 5%;
    top: 4%;
    width:117px;
  }
}

.p-mainvisual__pop img[src*=mv_pop_img_02] {
  bottom: 0%;
  left: 0%;
  width: clamp(120px, 12.6vw, 242px); /* 1920pxベース */
  height: auto;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__pop img[src*=mv_pop_img_02] {
    bottom: 20%;
    left: 4%;
  }
}

.p-mainvisual__pop img[src*=mv_pop_img_03] {
  top: 5%;
  right: 28%;
  width: clamp(110px, 11.9vw, 229px); /* 1920pxベース */
  height: auto;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__pop img[src*=mv_pop_img_03] {
    top: 3%;
    right: 15%;
    width:135px;
  }
}

.p-mainvisual__pop img[src*=mv_pop_img_04] {
  top: 16%;
  right: 6%;
  width: clamp(80px, 8.4vw, 161px); /* 1920pxベース */
  height: auto;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__pop img[src*=mv_pop_img_04] {
    top: 25%;
    right: 4%;
    width:90px;
  }
}

.p-mainvisual__pop img[src*=mv_pop_img_05] {
  bottom: 25%;
  right: 1%;
  width: clamp(95px, 9.9vw, 190px); /* 1920pxベース */
  height: auto;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__pop img[src*=mv_pop_img_05] {
    bottom: 10%;
    width:118px;
  }
}

.p-mainvisual__bounce {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
    width: clamp(230px, 25.2vw, 442px);
    height: clamp(164px, 17.4vw, 313px);
    z-index: 1;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__bounce {
    width: 190px;
    height: 125px;
  }
}


.p-mainvisual__bounce img {
  position: absolute;
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  width: 100%;
  height: auto;
}
.p-mainvisual__fade {
  position: absolute;
  width: 100%;
  height: 100%;
}
.p-mainvisual__fade img {
  position: absolute;
  opacity: 0;
}
.p-mainvisual__fade img[src*=mv_fade_img_01] {
  top: 9%;
  left: 23%;
  width: clamp(174px, 18.1vw, 288px); /* 1920pxベース */
  height: auto;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__fade img[src*=mv_fade_img_01] {
    top: 30%;
    left: 5%;
    width:110px;
  }
}
.p-mainvisual__fade img[src*=mv_fade_img_03] {
  bottom: 0%;
  right: 9%;
  width: clamp(120px, 12.4vw, 239px); /* 1920pxベース */
  height: auto;
}

@media screen and (max-width: 600px) {
  .p-mainvisual__fade img[src*=mv_fade_img_03] {
    bottom: 31%;
    right: 14%;
    width: 118px;
  }
}


.p-mainvisual-space {
  width: 100%;
  height: var(--mainvisual-height);
  max-height: var(--max-mainvisual-height);
  min-height: 400px;
}

.l-content {
  position: relative;
  width: 100%;
  background-color: #fff;
  z-index: 0;
  
}
.l-content__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(30px, 3.1vw, 60px) clamp(10px, 1vw, 20px); /* 1920pxベース */
  background-color: #fff;
}

.p-section {
  margin-bottom: clamp(40px, 4.2vw, 80px); /* 1920pxベース */
}
.p-section__title {
  font-size: clamp(24px, 1.7vw, 32px); /* 1920pxベース */
  font-weight: bold;
  margin-bottom: clamp(15px, 1.6vw, 30px); /* 1920pxベース */
}
.p-section__body {
  font-size: clamp(14px, 0.8vw, 16px); /* 1920pxベース */
  line-height: 1.6;
}/*# sourceMappingURL=style.css.map */


.mask-animation {
  position: absolute;
  top: -140px;
  opacity: 0.46;
  z-index: -2;
  width: 100%;
  height: auto;
  overflow: hidden;
  background-color: transparent;
}
.mask-content {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  will-change: clip-path;
}
.mask-content img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}
@media screen and (max-width: 1450px) {
  .mask-animation{
    top:0;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .mask-animation{
    top:0;
    left: -180%;
    width: 450%;
  }
}

@media screen and (max-width: 767px) {
  .mask-animation{
    display:none;
  }
}

.img-decoration{
    position: absolute;
}
.img-decoration.is-kita-minami{
    top: 50px;
    right: 260px;
    width: 525px;
    height:775px;
    opacity:0;
    z-index:-1;
    background-image: url(../img/kita-minami-area.svg);
    background-repeat: no-repeat;
    background-position: right;
    margin: 0 calc(50% - 50vw + 10px);
    width: calc(100vw - 20px);
}

@media screen and (max-width: 1550px) {
 .img-decoration.is-kita-minami{
	right:150px;
 }
}

@media screen and (max-width: 1024px) {
 .img-decoration.is-kita-minami{
	right:50px;
 }
}

@media screen and (max-width: 600px) {
 .img-decoration.is-kita-minami{
	display:none;
 }
}

.img-decoration.is-deco-01{
    width:220px;
    left: 40px;
    opacity:0;
}
@media screen and (max-width: 1450px) {
 .img-decoration.is-deco-01{
     left: 20px;
 }
}

@media screen and (max-width: 600px) {
 .img-decoration.is-deco-01{
     display:none;
 }
}

.img-decoration.is-deco-02{
    left: 20px;
    bottom: -60px;
    width:220px;
    opacity:0;
}
@media screen and (max-width: 1450px) {
 .img-decoration.is-deco-02{
     left: 50px;
 }
}
@media screen and (max-width: 600px) {
 .img-decoration.is-deco-02{
     display:none;
 }
}
.img-decoration.is-deco-03{
    bottom:0;
    right: 0px;
    width:300px;
    opacity:0;
}

@media screen and (max-width: 600px) {
 .img-decoration.is-deco-03{
    display:none;
 }
}


.kita_banner{
    overflow: hidden;
}

.kita_contents-over{
    background-image:url(../img/bg_2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1626px;
    position: relative;
    argin: 0 calc(50% - 50vw + 10px) ;
    idth: calc(100vw - 20px);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0s, transform 0s;
overflow:hidden;
}
.kita_contents-over_inner{
    width: 1536px;
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
.kita_contents-over_inner{
    width: 100%;
    margin: 0 auto;
}
}

.kita_contents-over.animate-ready {
  transition: opacity 1s ease, transform 1s ease;
}

.kita_contents-over.animate-in {
  opacity: 1;
  transform: translateY(0);
}


@media screen and (max-width: 820px) {
  .kita__banner-content {
    margin: 0 auto 0 110px;
  }
}

@media screen and (max-width: 600px) {
  .kita__banner-content {
    margin: 0 auto;
  }
}