@charset "utf-8";

/* ============================================================
   リセット
============================================================ */
body {
    color: #333;
    font-family:  "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.75;
}
a, a:hover, a:visited {
    color: #333;
    transition: all 0.5s;
}
a:hover {
    opacity: .7;
}
.br_sp {
    display: none;
}

/* ============================================================
   HEADER - HERO
============================================================ */
.l-header {
    position: relative;
}
.p-header-supplemnet {
    color: #fff;
    display: flex;
    font-size: 15px;
    font-weight: bold;
    justify-content: space-between;
    padding: 10px 20px;
    position: absolute;
    width: calc(100% - 40px);
    z-index: 3;
}
.p-header-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.l-header::after {
    background-color: #000;
    content: "";
    display: block;
    mix-blend-mode: multiply;
    opacity: .15;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

/* ============================================================
   INFO ※導入部分
============================================================ */
.l-info {
    padding: 100px 0 0;
    text-align: center;
}
.p-info__title {
    color: #00449B;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 3px;
    line-height: 1.75;
    margin: 0 0 60px;
}
.p-info__logo {
    height: 100px;
    width: auto;
    margin-bottom: 80px;
}
.p-info__gallary img {
    height: 190px;
    width: auto;
}

/* ============================================================
   共通モジュール
============================================================ */
.l-contents__header {
    margin: 0 0 120px;
    padding: 140px 0 0;
    text-align: center;
}
.l-contents-body {
    padding: 0 0 180px;
}
.p-contents-header__sub-title {
    color: #00449B;
    display: block;
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 40px;
}
.p-contents-header__title {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 3px;
}
.p-contents-header__text {
    font-size: 18px;
    letter-spacing: 2px;
}

/* ============================================================
   ABOUT
============================================================ */
.l-about {
    margin: 140px auto;
}
.l-about .l-contents__header {
    margin: 0 0 40px;
    padding: 0;
}
.l-about .p-contents-header__title {
    font-size: 32px;
    letter-spacing: 2px;
}
.l-about .p-contents-header__sub-title {
    letter-spacing: 0,01em;
}
.l-contents__body--about {
    text-align: center;
    position: relative;
    max-width: 1480px;
    margin: 0 auto;
}
.p-about__text {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.08em;
    margin: 0 0 40px;
    text-align: center;
}

/**** MAP ****/
.p-location__img--pc,
.p-location__img--sp {
    height: auto;
    margin: 0 auto;
    width: 100%;
}
.p-location__img--sp {
    display: none;
}

/**** PIN ****/
.p-pin-group {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.p-pin {
    cursor: pointer;
    height: 70px;
    position: absolute;
    width: auto;
}
.p-pin--01 {
    top: 20%;
    left: 30%;
}
.p-pin--02 {
    top: 24%;
    left: 38%;
}
.p-pin--03 {
    top: 30%;
    left: 13%;  
}
.p-pin--04 {
    top: 22%;
    right: 42%; 
}
.p-pin--05 {
    top: 31%;
    right: 27%;
}
.p-pin--06 {
    top: 28%;
    right: 13%;
}
.p-pin--07 {
    top: 15%;
    left: 17%;
}
.p-pin--08 {
    top: -3%;
    right: 15%;
}

/**** TOOLTIP ****/
.p-tooltip {
    background: #2CA9E7;
    border: 5px solid #fff;
    border-radius: 8px;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 14px;
    padding: 14px;
    position: absolute;
    text-align: left;
    width: 320px;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
/* 開いた状態 */
.p-tooltip.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.p-tooltip__close{
    text-align: center;
    content: "×";
    display: flex;
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    cursor: pointer;
    background: #fff;
    border: none;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
    color: #333;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 1;
    font-size: 20px;
}
/* ×の表示 */
.p-tooltip__close::before{
  content: "×";
}
.p-tooltip dt {
    font-size: 16px;
    font-weight: bold;
}
.p-tooltip dt a,
.p-tooltip dt a:visited,
.p-tooltip dt a:hover {
    color: #fff;
}
.p-tooltip dd {
    line-height: 1.5;
}
.p-tooltip--01 {
    top: 4%;
    left: 22%;
}
.p-tooltip--02 {
    top: 8%;
    left: 32%;
}
.p-tooltip--03 {
    top: 14%;
    left: 10%;
}
.p-tooltip--04 {
    top: 6%;
    right: 34%;
}
.p-tooltip--05 {
    top: 15%;
    right: 19%;
}
.p-tooltip--06 {
    top: 12%;
    right: 10%;
}
.p-tooltip--07 {
    top: -1%;
    left: 12%;
}
.p-tooltip--08 {
    top: 10%;
    right: 10%;
}


/* ============================================================
   施設案内部分
============================================================ */
.l-contents-body--detail {
    padding: 0 0 140px;
}
.l-detail__inner {
    display: flex;
    align-items: flex-end;
    margin-bottom: 160px;
}
.l-detail:nth-child(even) .l-detail__inner {
    flex-direction: row-reverse;
}
.p-detail {
    margin: 0 0 0 80px;
}
.l-detail:nth-child(even) .p-detail {
    margin: 0 80px 0 0;
}
.p-detail__img {
    position: relative;
    width: 70%;
}
.p-detail__img--inner {
    overflow: hidden; 
}
.p-detail__img--main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1000ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.p-detail__img:hover .p-detail__img--main {
  transform: scale(1.06);
}
.p-detail__img--decoration {
    position: absolute;
    right: -35%;
    top: 40px;
}
.l-detail:nth-child(even) .p-detail__img--decoration {
    left: -38%;
    right: unset;
}
.p-detail__header {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 8px;
    margin: 0 0 60px;
    padding: 0 0 60px;
    position: relative;
}
.p-detail__header--sp {
    display: none;
}
.p-detail__header::after {
    border-bottom: 1px solid #333;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
}
.p-detail__body--title {
    color: #00449B;
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 24px;
}
.p-detail__body--sub-title {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin: 0 0 4px;
}
.p-detail__body--text {
    max-width: 380px;
    letter-spacing: 2px;
}
.p-detail__body--link {
    display: block;
    margin: 40px 0 0;
}

/* ============================================================
    周辺設案内部分
============================================================ */
.l-contents-body--sub {
    max-width: 1280px;
    margin: 0 auto;
}
.l-contents-body--sub .swiper-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    gap: 0 40px;
}
.p-sub-contents__title {
    color: #00449B;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0 12px;
}
.p-sub-contents__img {
    height: auto;
    width: 100%;
    object-fit: cover;
}


/* ============================================================
   ACCESS
============================================================ */
.l-contents--access .l-contents__header {
    margin: 0 0 60px;
    padding: 0;
}
.p-access {
    border-bottom: 1px dotted #999;
    margin: 0 auto 80px;
    width: 780px;
}
.p-access__list {
    border-top: 1px dotted #999;
    display: flex;
    align-items: center;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 16px 0;
}
.p-access__list--title {
    background-color: #f2f2f2;
    width: 150px;
    text-align: center;
    padding: 4px 0;
    margin: 0 40px 0 0;
}


/* ============================================================
   FOOTER
============================================================ */
.l-footer {
    background-color: #437390;
    color: #fff;
    margin: -8px 0 0;
    padding: 60px 0 24px;
    text-align: center;
}
.p-footer__img {
    margin: 0 0 20px;
}
.p-footer__detail {
    margin: 0 0 30px;
}
.p-footer__address {
    font-size: 14px;
}
.p-footer__phone {
    font-size: 20px;
    font-weight: bold;
}
.p-footer__phone a,
.p-footer__phone a:visited,
.p-footer__phone a:hover {
    color: #fff;
    margin: 0 0 0 10px;
    text-decoration: none;
}
.p-footer__copyright {
    font-size: 14px;
}


/* ============================================================
   SWIPER - JS FADE
============================================================ */
.swiper-main {
  width: 100%;
  height: 100vh;
}

.swiper-main .swiper-slide {
    height: 100%;
}
.swiper-main .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
/* 基本状態 */
.swiper-main .swiper-slide img{
  transform: scale(1);
  transition: transform 6s linear;
  will-change: transform;
}

/* アクティブはズーム */
.swiper-main .swiper-slide-active img{
  transform: scale(1.12);
}

/* ここが肝：切り替え直後の旧スライド（prev）もズームのまま */
.swiper-main .swiper-slide-prev img{
  transform: scale(1.12);
}

/* loop時の複製スライド対策（念のため） */
.swiper-main .swiper-slide-duplicate-active img,
.swiper-main .swiper-slide-duplicate-prev img{
  transform: scale(1.12);
}

.swiper-group {
    height: 180px;/* ←ここで帯の高さを決める */
    overflow: hidden;  
}
.swiper-group .swiper-wrapper {
    transition-timing-function: linear !important;
}
/* スライドも枠に合わせる */
.swiper-group .swiper-slide{
  height: 100%;
}
.swiper-group .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;/* “枠に入るだけ表示”の正体 */
  object-position: center;
  display: block;/* 下の謎の隙間防止 */
}

.js-fadeUp {
  opacity: 0;
  transform: translateY(60px);
}
.js-reveal {
  clip-path: inset(0 100% 0 0);
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media screen and (max-width: 1480px) {
    /**** logo ****/
    .p-header-main img {
        height: 300px;
        width: auto;
    }
    .p-header-supplemnet {font-size: 14px;}

    /**** TOOLTIP ****/
    .p-info__title {font-size: 22px;}

    /**** 汎用部分 ****/
    .p-contents-header__sub-title {
        font-size: 28px;
        margin: 0 0 30px
    }
    .p-contents-header__title {font-size: 30px;}

    /**** about ****/
    .l-contents__body--about {width: 90%}
    .l-about .p-contents-header__title {font-size: 28px;}
    .p-about__text {font-size: 14px;}

    /**** contents ****/
    .p-detail,
    .l-detail:nth-child(even) .p-detail {margin: 0 60px;}
    .l-detail__inner {margin-bottom: 120px;}
    .p-detail__img--decoration {
        height: 80px;
        top: 30px;
    }
    .l-detail:nth-child(even) .p-detail__img--decoration {left: -45%;}
    .p-detail__header {
        font-size: 28px;
        margin: 0 0 40px;
        padding: 0 0 40px;
    }
    .p-detail__body--sub-title {
        font-size: 16px;
        margin: 0;
    }
    .p-detail__body--title {
        font-size: 24px;
        margin: 0 0 24px;
    }
    .p-detail__body--text {font-size: 14px;}
    .p-detail__body--link {margin: 24px 0 0;}

    /**** sub contents ****/
    .p-sub-contents__title {
        font-size: 22px;
        margin: 12px 0;
    }
    .p-sub-contents__text {font-size: 14px;}

    /**** access ****/
    .l-contents--access .l-contents__header {margin: 0 0 40px;}
    .p-contents-header__text{font-size: 16px;}
    .p-access__list {
        font-size: 16px;
        padding: 12px 0;
    }
}


@media screen and (max-width: 1280px) {
    /**** hero ****/
    .swiper-main {height: 90vh;}

    /**** info ****/
    .l-info {padding: 80px 0 0;}
    .p-info__title {font-size: 20px;}
    .p-info__logo{height: 90px;}

    /**** about ****/
    .l-about {
        max-width: 1080px;
        margin: 100px auto;
    }
    .l-contents__body--about {width: 100%}

    /**** 汎用部分 ****/
    .l-contents__header {
        margin: 0 0 80px;
        padding: 100px 0 0;
    }
    .l-contents-body {padding: 0 0 140px;}

    /**** contents ****/
    .l-contents-body--detail {padding: 0 0 80px;}
    .p-detail__img--decoration {
        height: 70px;
        right: -40%;
    }
    .l-detail:nth-child(even) .p-detail__img--decoration {left: -45%;}
    .l-detail__inner {margin-bottom: 100px;}
    .p-detail, .l-detail:nth-child(even) .p-detail {margin: 0 40px;}

    /**** sub contents ****/
    .l-contents-body--sub {
        max-width: 1080px;
    }
    .p-sub-contents__title {
        font-size: 20px;
        margin: 8px 0;
    }

    /**** access ****/
    .p-contents-header__text,
    .p-access__list {font-size: 14px;}

    /**** pin ****/
    .p-pin {height: 60px;}
    .p-tooltip dt {font-size: 14px;}
    .p-tooltip dd {font-size: 13px;}
    .p-tooltip--01 {top: -2%;}
    .p-tooltip--02 {top: 2%;}
    .p-tooltip--03 {top: 8%;}
    .p-tooltip--04 {
        top: 0%;
        right: 28%;
    }
    .p-tooltip--05 {
        top: 13%;
        right: 15%;
    }
    .p-tooltip--06 {
        top: 6%;
        right: 10%;
    }
    .p-tooltip--07 {
        top: -7%;
        left: 12%;
    }
    .p-tooltip--08 {
        top: 10%;
        right: 10%;
    }
}


@media screen and (max-width: 1080px) {
    /**** hero ****/
    .p-header-main img {height: 260px;}
    .swiper-main {height: 80vh;}

    /**** info ****/
    .l-info {padding: 80px 0 0;}
    .p-info__title {margin: 0 0 40px;}
    .p-info__logo {height: 80px;}

    /**** 汎用 ****/
    .l-contents__header {
        margin: 0 0 80px;
        padding: 100px 0 0;
    }
    .p-contents-header__sub-title {font-size: 24px;}
    .p-contents-header__title {font-size: 24px;}

    /**** about ****/
    .l-about {max-width: 960px;}
    .l-about .p-contents-header__title {font-size: 24px;}

    /**** contents ****/
    .p-detail,
    .l-detail:nth-child(even) .p-detail {
        margin: 0 40px;
    }
    .l-detail__inner {margin-bottom: 100px;}
    .p-detail__img--decoration {display: none;}
    .p-detail__header {font-size: 24px;}
    .p-detail__header::after {width: 20px;}
    .p-detail__body--sub-title {font-size: 14px;}
    .p-detail__body--title {
        font-size: 22px;
        margin: 0 0 24px;
    }
    .p-detail__body--text {letter-spacing: 1px;}
    .p-detail__body--link {margin: 24px 0 0;}

    /**** sub contents ****/
    .l-contents-body--sub {max-width: 960px;}
    .l-contents-body--sub .swiper-wrapper {gap: 0 20px;}
    .p-sub-contents__title {font-size: 18px;}

    /**** footer ****/
    .p-footer__img {height: 140px;}
    .p-footer__address {font-size: 13px;}
    .p-footer__copyright {font-size: 12px;}

    /**** pin ****/
    .p-pin {height: 50px;}
}

@media screen and (max-width: 960px) {
    /**** hero ****/
    .p-header-main img {height: 240px;}
    
    /**** 汎用 ****/
    .p-contents-header__sub-title {
        font-size: 22px;
        margin: 0 0 30px;
    }
    .p-contents-header__title {font-size: 22px;}

    /**** about ****/
    .l-about {max-width: calc(100% - 60px);}
    .p-about__text {font-size: 13px;}

    /**** contents ****/
    .l-contents-body {padding: 0 0 100px;}
    .l-detail__inner {
        display: block;
        margin-bottom: 80px;
    }
    .p-detail, .l-detail:nth-child(even) .p-detail {
        display: block;
        margin: 40px 10% 0;
        width: 80%;
    }
    .p-detail__img {width: 100%;}
    .p-detail__header {
        font-size: 28px;
        margin: 0px 0 30px;
        padding: 0 0 30px;
        text-align: center;
    }
    .p-detail__header--pc {display: none;}
    .p-detail__header--sp {display: block;}
    .p-detail__header::after {
        left: 50%;
        transform: translate(-50%, 0);
    }
    .p-detail__body--title {
        font-size: 24px;
        margin: 0 0 16px;
    }
    .p-detail__body--text {max-width: 100%;}
    .p-detail__body--link {
        margin: 12px 0 0;
        text-align: right;
    }

    /**** sub contents ****/
    .l-contents-body--sub {
        max-width: unset;
        width: 100%;
    }
    .l-contents-body--sub .swiper-wrapper {
        display: flex;
        justify-content: flex-start;
    }
    .swiper-card .swiper-slide {
        width: 40%;
        flex-shrink: 0;
    }

    /**** access ****/
    .l-contents--access .l-contents__header {margin: 0 0 30px;}
    .p-access {width: 90%;}

    /**** pin ****/
    .p-pin-group {
        display: none;
    }
}


@media screen and (max-width: 768px) {
    /**** hero ****/
    .p-header-main img {height: 220px;}

    /**** info ****/
    .l-info {padding: 64px 0 0;}
    .p-info__title {
        font-size: 18px;
        letter-spacing: 2px;
        margin: 0 0 48px;
    }
    .p-info__logo {
        height: 70px;
        margin-bottom: 64px;
    }

    /**** 汎用 ****/
    .l-contents__header {
        margin: 0 0 64px;
        padding: 80px 0 0;
    }
    .p-contents-header__sub-title {
        font-size: 24px;
        margin: 0 0 20px;
    }
    .br_sp {display: block;}
    .br_pc {display: none;}

    /**** about ****/
    .l-about {
        display: block;
        max-width: calc(100% - 40px);
    }
    .p-about__text {
        line-height: 1.75;
        text-align: left;
        width: 90%;
        margin: 0 auto 20px;
    }

    /**** contents ****/
    .p-detail, .l-detail:nth-child(even) .p-detail {
        margin: 30px 5% 0;
        width: 90%;
    }
    .p-detail__body--sub-title {font-size: 18px;}
    .p-detail__body--text {font-size: 16px;}

    /**** sub contents ****/
    .l-contents-body--sub .swiper-wrapper {gap: 0 30px;}
    .swiper-card .swiper-slide {width: 50%;}

    /**** access ****/
    .l-contents--access .l-contents__header {margin: 0 0 30px;}
    .l-contents--access .p-contents-header__text {font-size: 16px;}
    .p-access {
        margin: 0 10% 60px;
        width: 80%;
    }
    .p-access__list {
        font-size: 16px;
        display: block;
        padding: 20px 0;
        text-align: center;
    }
    .p-access__list--title {
        padding: 4px 0;
        margin: 0 auto 12px;
    }
}

@media screen and (max-width: 600px) {
    .l-about {margin: 80px auto;}
    .p-contents-header__sub-title {font-size: 22px;}
    .l-about .p-contents-header__title {font-size: 22px;}
    .p-about__text {width: 94%;}
    .p-detail__header {font-size: 24px;}
    .p-detail, .l-detail:nth-child(even) .p-detail {margin: 20px 5% 0;}
    .p-detail__body--sub-title {font-size: 16px;}
    .p-detail__body--title {font-size: 22px;}
    .p-detail__body--text {font-size: 14px;}
    .l-contents--access .p-contents-header__text {font-size: 14px;}
    .p-access__list {font-size: 14px;}
}

@media screen and (max-width: 500px) {
    /**** hero ****/
    .p-header-supplemnet {
        font-size: 13px;
        line-height: 1.5;
    }
    .p-header-main img {height: 160px;}

    /**** info ****/
    .l-info {padding: 56px 0 0;}
    .p-info__title {
        font-size: 14px;
        letter-spacing: 1px;
        margin: 0 0 40px;
        line-height: 1.7;
    }
    .p-info__logo {
        height: 48px;
        margin-bottom: 48px;
    }

    /**** 汎用 ****/
    .l-contents__header {
        margin: 0 0 48px;
        padding: 64px 0 0;
    }
    .p-contents-header__sub-title {
        font-size: 18px;
        margin: 0 0 20px;
        letter-spacing: 2px;
    }
    .p-contents-header__title {
        font-size: 20px;
        letter-spacing: 4px;
    }

    /**** about ****/
    .l-about {margin: 60px auto;}
    .l-contents-body--detail {padding: 0 0 60px;}
    .l-about .p-contents-header__title {font-size: 20px;}

    /**** contents ****/
    .l-detail__inner {
        margin-bottom: 64px;
    }
    .p-detail,
    .l-detail:nth-child(even) .p-detail {
        display: block;
        margin: 20px 6% 0;
        width: 88%;
    }
    .p-detail__header {
        font-size: 20px;
        margin: 0 0 24px;
        padding: 0 0 20px;
    }
    .p-detail__body--title {font-size: 20px;}

    /**** sub contents ****/
    .l-contents-body--sub .swiper-wrapper {gap: 0 20px;}
    .swiper-card .swiper-slide {width: 65%;}

    /**** access ****/
    .l-contents--access .l-contents__header {
        margin: 0 0 20px;
    }
 
    /**** footer ****/
    .l-footer {padding: 48px 0 16px;}
    .p-footer__img {height: 120px;}
    .p-footer__phone {font-size: 18px;}
}