@charset "UTF-8";

.section-wrap {
    padding: 40px 0 0;
}

.cleancss {
    clear: both;
}

/*------------------------

mv

------------------------*/
.main-contents {
    position: relative;
    z-index: 0;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        display: none;
        z-index: -1;
    }
}

#loader {
    width: 100%;
    height: 100vh;
    max-height: 800px;
    background-color: #faf8ee;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#loader.loaded {
    animation: fadeOut 1s forwards;
}

.top-mv {
    background-color: #faf8ee;
    background-image: url(../img/mv-back.png);
    background-repeat: no-repeat;
    background-position: center bottom 8vh;
    background-size: contain;
    position: relative;
}

.top-mv::before {
    width: 100vw;
    height: 8vh;
    background-color: #fff;
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
}

.swiper {
    height: 100vh;
    max-height: 800px;
}

.swiper-slide {
    overflow: hidden;
}

.swiper-slide .dotted {
    position: absolute;
    right: 0;
    bottom: 16%;
}

.swiper-slide .ticker-img {
    width: 240%;
    position: absolute;
    top: 10%;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

@media screen and (min-width: 1441px) {
    .swiper-slide .ticker-img {
        width: 200%;
    }
}

@media screen and (min-width: 1921px) {
    .swiper-slide .ticker-img {
        width: 140%;
    }
}

.swiper-slide-active .ticker-img {
    animation: ticker-img 0.6s ease-in-out 0.5s 1 normal both;
}

@keyframes ticker-img {
    0% {
        opacity: 0;
        top: 40%;
    }

    100% {
        opacity: 1;
        top: 10%;
    }
}

.swiper-slide .ticker-img ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    animation: ticker-img_ul 30s linear infinite;
}

@keyframes ticker-img_ul {
    0% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(-100%);
    }
}

.swiper-slide .ticker-img li {
    margin-left: 16px;
}

.swiper-slide .ticker-img li img {
    width: 100%;
}

.swiper-slide .ticker-text {
    width: 100%;
    position: absolute;
    top: 32%;
    overflow: hidden;
    font-family: var(--text-en);
    font-size: 200px;
    font-weight: 700;
    white-space: nowrap;
}

.swiper-slide-active .ticker-text {
    animation: ticker-text 0.6s ease-in-out 0.5s 1 normal both;
}

@keyframes ticker-text {
    0% {
        opacity: 0;
        top: 100%;
    }

    100% {
        opacity: 1;
        top: 32%;
    }
}

.swiper-slide01 .ticker-text {
    color: rgba(218, 112, 121, 0.4);
}

.swiper-slide02 .ticker-text {
    color: rgba(86, 174, 82, 0.4);
}

.swiper-slide03 .ticker-text {
    color: rgba(199, 112, 159, 0.4);
}

.swiper-slide04 .ticker-text {
    color: rgba(78, 121, 154, 0.4);
}

.swiper-slide05 .ticker-text {
    color: rgba(221, 180, 71, 0.4);
}

.swiper-slide06 .ticker-text {
    color: rgba(88, 187, 228, 0.4);
}

.swiper-slide07 .ticker-text {
    color: rgba(66, 135, 130, 0.4);
}

.swiper-slide .ticker-text ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    animation: ticker-text_ul 80s linear infinite;
}

@keyframes ticker-text_ul {
    0% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(-100%);
    }
}

.swiper-slide .ticker-text li {
    display: inline-block;
}

.swiper-slide .slide-content {
    width: 100%;
    height: 100%;
}

.swiper-slide .slide-content .plan {
    width: 100%;
    max-width: 1170px;
    height: 72vh;
    max-height: 640px;
    margin: auto;
    position: absolute;
    right: 0;
    bottom: 12vh;
    left: 0;
}

.swiper-slide .slide-content .plan-caption {
    position: absolute;
    bottom: 24%;
    left: 6%;
}

@media screen and (min-width: 1441px) {
    .swiper-slide .slide-content .plan-caption {
        left: 2%;
    }
}

@media screen and (min-width: 1921px) {
    .swiper-slide .slide-content .plan-caption {
        bottom: 16%;
    }
}

.swiper-slide-active .slide-content .plan-caption {
    animation: plan-caption 0.6s ease-in-out 0.7s 1 normal both;
}

@keyframes plan-caption {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.swiper-slide .slide-content .plan-title {
    position: absolute;
    bottom: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.swiper-slide-active .slide-content .plan-title {
    animation: plan-title 0.4s ease-in-out 1s 1 normal both;
}

@keyframes plan-title {
    0% {
        opacity: 0;
        bottom: 20%;
    }

    100% {
        opacity: 1;
        bottom: 50%;
    }
}

.swiper-slide .slide-content .plan-img {
    width: 100%;
    max-width: 1170px;
    height: 72vh;
    max-height: 560px;
    margin: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.swiper-slide .slide-content .plan-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.swiper-slide .slide-content .plan-btn {
    position: absolute;
    right: 16%;
    bottom: 24%;
}

.swiper-slide-active .slide-content .plan-btn {
    animation: plan-btn 0.6s ease-in-out 1.3s 1 normal both;
}

@keyframes plan-btn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.swiper-slide .slide-content .plan-btn a {
    display: block;
    transition: transform 0.2s ease-in-out;
    transform: scale(1);
}

.swiper-slide .slide-content .plan-btn a:hover {
    transform: scale(1.15);
}

/*------------
サムネイル
--------------*/
.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    width: 100%;
    top: auto;
    bottom: 4vh;
    left: 50%;
    display: flex;
    justify-content: center;
    transform: translate3d(-50%, 0, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    margin-left: 0;
}

.swiper-pagination-bullet {
    width: 114px;
    height: 114px;
    opacity: 1;
    border-radius: 0;
    background-color: transparent;
    position: relative;
    display: flex;
    justify-content: center;
    transition: 0.2s ease-in-out;
}

.swiper-pagination-bullet::before {
    height: 3px;
    position: absolute;
    content: "";
    bottom: -16px;
    left: 50%;
    transition: 0.2s ease-in-out;
    transform: translate(-50%, 0);
}

.swiper-pagination-bullet:first-child::before {
    background-color: #da7079;
}

.swiper-pagination-bullet:nth-child(2)::before {
    background-color: var(--green);
}

.swiper-pagination-bullet:nth-child(3)::before {
    background-color: #c7709f;
}

.swiper-pagination-bullet:nth-child(4)::before {
    background-color: #4e799a;
}

.swiper-pagination-bullet:nth-child(5)::before {
    background-color: #dcb346;
}

.swiper-pagination-bullet:nth-child(6)::before {
    background-color: #58bbe4;
}

.swiper-pagination-bullet:nth-child(7)::before {
    background-color: #428782;
}

.swiper-pagination-bullet-active {
    filter: drop-shadow(4px 0 16px rgba(0, 0, 0, 0.3));
    position: relative;
    transform: scale(1.1) translate(0, -16px);
}

.swiper-pagination-bullet-active::before {
    animation: pagination-active 0.3s ease-in-out 0.2s 1 normal both;
}

@keyframes pagination-active {
    0% {
        width: 0;
    }

    100% {
        width: 80%;
    }
}

.swiper-pagination-bullet:hover {
    filter: drop-shadow(4px 0 16px rgba(0, 0, 0, 0.3));
    transform: scale(1.1);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active:hover {
    cursor: default;
    filter: drop-shadow(4px 0 16px rgba(0, 0, 0, 0.3));
    transform: scale(1.1) translate(0, -16px);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0 0 16px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    display: block;
}

.swiper-pagination-bullet:first-child {
    background-image: url(../../top/img/mv_pagination01.png);
}

.swiper-pagination-bullet:nth-child(2) {
    background-image: url(../../top/img/mv_pagination02.png);
}

.swiper-pagination-bullet:nth-child(3) {
    background-image: url(../../top/img/mv_pagination03.png);
}

.swiper-pagination-bullet:nth-child(4) {
    background-image: url(../../top/img/mv_pagination04.png);
}

.swiper-pagination-bullet:nth-child(5) {
    background-image: url(../../top/img/mv_pagination05.png);
}

.swiper-pagination-bullet:nth-child(6) {
    background-image: url(../../top/img/mv_pagination06.png);
}

.swiper-pagination-bullet:nth-child(7) {
    background-image: url(../../top/img/mv_pagination07.png);
}

/*------------------------

不死王閣の魅力

------------------------*/
.charm {
    margin-top: 100px;
    text-align: center;
}

.charm .wrap {
    position: relative;
}

.charm__img01 {
    position: absolute;
    top: -40px;
    left: -64px;
}

.charm__img02 {
    position: absolute;
    top: -24px;
    right: 120px;
}

.charm__text {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 700;
    line-height: 2.4;
}

/*------------------------

動画

------------------------*/
.video {
    margin-top: 140px;
}

.video .wrap {
    position: relative;
}

.video__video {
    width: 88%;
    margin: auto;
    position: relative;
}

.video__video img {
    border-radius: 80px 80px 0 0;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.video__video .stroke-solid {
    transition: stroke-dashoffset 1s ease, opacity 1s ease;
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: 4px;
}

.video__video .icon {
    transition: transform 200ms ease-out;
    transform: scale(0.8);
    transform-origin: 50% 50%;
}

.video__video a {
    position: relative;
    display: block;
}

.video__video a:before {
    width: 100%;
    height: 100%;
    opacity: 0.3;
    border-radius: 80px 80px 0 0;
    background-color: #000;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    transition: 0.3s;
}

.video__video a:hover:before {
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-color: var(--green);
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}

.video__video a:hover .stroke-solid {
    opacity: 1;
    stroke-dashoffset: 300;
}

.video__video a:hover .icon {
    transform: scale(0.9);
}

.video__video a svg {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.video__img01 {
    position: absolute;
    bottom: -68px;
    left: -191px;
    z-index: 0;
    transform: scale(-1, 1);
}

.video__img02 {
    position: absolute;
    right: -302px;
    bottom: -80px;
    z-index: 0;
    transform: scale(-1, 1);
}

.popup {
    width: 100%;
    height: 100vh;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 999;
}

.popup:before {
    width: 100%;
    height: 100vh;
    opacity: 0.9;
    background-color: #000;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: 0;
}

.popup .popup__inner {
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup .popup__inner video {
    width: 80%;
    max-height: 100vh;
}

.popup .popup__inner .close {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 24px;
    right: 24px;
}

.popup .popup__inner .close:hover {
    cursor: pointer;
}

.popup .popup__inner .close ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup .popup__inner .close .menu__line {
    width: 2px;
    height: 44px;
    background: #fff;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
}

.popup .popup__inner .close ul li:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.popup .popup__inner .close ul li:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*------------------------

キャンペーン

------------------------*/
.campaign {
    margin-top: 100px;
    padding: 64px 0;
    background: #faf8ee;
}

.campaign.new-year {
    background: #faf8ee url(../img/new-year_bg.png) repeat-y center top;
}

.campaign .campaign__title {
    text-align: center;
}

.campaign .campaign__title-en {
    margin: 8px 0 40px;
    font-family: var(--text-en);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(86, 174, 82);
    text-align: center;
}

.campaign .campaign__title-img {
    margin-bottom: 40px;
    text-align: center;
}

.campaign .container01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.campaign .container01 .campaign__ban {
    width: 930px;
}

.access_banner {
    width: 930px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
}

.campaign .container01 .campaign__ban:nth-child(n + 2) {
    margin-top: 24px;
}

.campaign .container02 {
    margin: 24px 0 0 -24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.campaign .container02 .campaign__ban {
    width: calc(100% / 2 - 24px);
    margin-left: 24px;
}

.campaign .container02 .campaign__ban:nth-child(n + 3) {
    margin-top: 24px;
}

.campaign .container03 {
    margin: 24px 0 0 -24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.campaign .container03 .campaign__ban {
    width: 336px;
    margin-left: 24px;
}

.campaign .container03 .campaign__ban:nth-child(n + 4) {
    margin-top: 24px;
}

.campaign .container04 {
    margin: 24px 0 0 -24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.campaign .container04 .campaign__ban {
    width: calc(100% / 4 - 24px);
    margin-left: 24px;
}

.campaign .container04 .campaign__ban:nth-child(n + 5) {
    margin-top: 24px;
}

.campaign .campaign__ban .copy {
    font-family: var(--text-en);
    font-weight: 800;
    color: #e44606;
    text-align: center;
    animation: flash 3s linear infinite;
}

.campaign .campaign__ban .copy span {
    position: relative;
}

.campaign .campaign__ban .copy span:before {
    width: 2px;
    height: 100%;
    background-color: #e44606;
    position: absolute;
    content: "";
    top: 0;
    left: -16px;
    transform: rotate(-35deg);
}

.campaign .campaign__ban .copy span::after {
    width: 2px;
    height: 100%;
    background-color: #e44606;
    position: absolute;
    content: "";
    top: 0;
    right: -12px;
    transform: rotate(35deg);
}

@keyframes flash {

    0%,
    50%,
    100% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }
}

.campaign .campaign__ban .text {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #e44606;
    text-align: center;
}

.campaign .campaign__ban a {
    margin-top: 24px;
    position: relative;
    display: block;
}

.campaign .campaign__ban a .top-ban {
    border: 0px solid var(--black);
    border-radius: 8px;
    transition: 0.3s;
}

.campaign .campaign__ban a .top-ban03 {
    width: 140px;
    position: absolute;
    top: -114px;
    left: 36px;
}

.campaign .campaign__ban02 {
    margin-top: 40px;
}

.campaign .black-btn-wrap {
    margin: 40px 0 0 -16px;
    display: flex;
    justify-content: center;
}

.campaign .black-btn-wrap .btn {
    margin-left: 16px;
    position: relative;
}

.campaign .black-btn-wrap .btn .period {
    width: 200px;
    margin: auto;
    border: 3px solid #e44606;
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    top: -20px;
    right: 0;
    left: 0;
    font-size: 18px;
    font-weight: 700;
    color: #e44606;
    text-align: center;
}

.campaign .black-btn-wrap .black-btn {
    border: 3px solid var(--black);
    background-color: #fff;
    font-size: 18px;
    color: var(--black);
}

.campaign .notice {
    margin-top: 24px;
    text-align: center;
}

.campaign .notice span {
    position: relative;
    font-size: 20px;
    font-weight: 700;
    color: #e44606;
}

.campaign .notice span:before {
    width: 100%;
    height: 2px;
    background-color: #e44606;
    position: absolute;
    content: "";
    bottom: -4px;
    left: 0;
}

.campaign .notice span:after {
    width: 100%;
    height: 2px;
    background-color: #e44606;
    position: absolute;
    content: "";
    bottom: -8px;
    left: 0;
}

/*------------------------

プランスライダー

------------------------*/
.stay-plan {
    margin-top: 260px;
}

.stay-plan .wrap {
    position: relative;
}

.stay-plan .wrap::before {
    width: calc(50vw + 50%);
    height: 100%;
    border-radius: 0 200px 0 0;
    background-color: var(--orange);
    position: absolute;
    content: "";
    top: 0;
    left: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.stay-plan__title {
    margin-top: 120px;
    font-weight: 700;
    color: #fff;
}

.stay-plan__title-en {
    margin-top: 16px;
    font-family: var(--text-en);
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.stay-plan__btn {
    margin-top: 64px;
}

.stay-plan__btn .btn {
    padding: 20px 56px;
    border-radius: 50px;
    background-color: #171716;
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    transition: background-color 0.3s;
}

.stay-plan__btn .btn:hover {
    background-color: var(--green);
}

.stay-plan__btn .btn span {
    position: relative;
}

.stay-plan__btn .btn span::before {
    width: 14px;
    height: 14px;
    background-image: url(../../common/img/arrow_w.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    content: "";
    top: 50%;
    right: -24px;
    transition: transform 0.3s;
    transform: translate(0, -50%);
}

.stay-plan__btn .btn:hover span::before {
    transform: translate(5px, -10px);
}

/*------------
プランスライダー
-------------*/
.plan-slider {
    padding: 120px 0 100px;
    border-radius: 0 200px 0 0;
}

.PlanView {
    width: 44%;
    height: 608px;
    margin-right: 24px;
    margin-bottom: 24px;
    padding: 40px;
    background: #fff;
    box-shadow: 16px 16px 0 0 rgba(0, 0, 0, 0.15);
    line-height: 1.75;
    text-align: left;
}

.PlanView .picture .main_picture {
    width: 303px;
    height: 219px;
    border-radius: 24px;
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.PlanView .picture .main_picture:hover {
    border-radius: 0;
}

.PlanView .main_picture img {
    width: 303px;
    height: 219px;
    border-radius: 24px;
    object-fit: cover;
    transition: 0.3s;
    transform: scale(1.1, 1.1);
    object-position: center center;
}

.PlanView .picture .main_picture a:hover img {
    border-radius: 0;
    transform: scale(1, 1);
}

.PlanView .plan span {
    margin: 0;
    padding: 0;
}

.PlanView .plan {
    height: auto;
    margin-top: 20px;
    padding: 0;
    display: -webkit-box;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.PlanView .plan a {
    display: block;
    text-decoration: none;
    transition: color 0.3s;
}

.PlanView .plan a:hover {
    color: var(--green);
}

.PlanView .comment {
    margin-top: 16px;
    padding: 0;
    display: -webkit-box;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
    font-size: 14px;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.PlanView .comment p,
.PlanView .comment div,
.PlanView .comment span {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400;
}

.roomlist {
    margin: auto;
    position: absolute;
    right: 0;
    bottom: 32px;
    left: 0;
}

.PlanView .room_list_header {
    display: none;
}

.roomlist ul {
    margin: 0;
    padding: 0;
}

.roomlist ul li {
    list-style: none;
    display: none;
}

.roomlist ul li:first-child {
    display: block;
}

.roomlist ul li a {
    width: 100%;
    position: relative;
    display: block;
}

.roomlist ul li a:hover {
    background-color: var(--green);
}

.roomlist ul li a::before {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    content: "";
}

.roomlist ul li a:after {
    width: 60%;
    margin: auto;
    padding: 16px 0;
    border-radius: 50px;
    background-color: #171716;
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
    position: absolute;
    content: "詳細內容 / 訂房";
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    transition: background-color 0.3s;
}

.roomlist ul li a:hover:after {
    background-color: var(--green);
}

.flickity-prev-next-button.previous {
    display: none;
}

.flickity-prev-next-button.next {
    width: 60px;
    height: 60px;
    background-color: var(--black);
    right: -25px;
    z-index: 9999;
    transition: background-color 0.3s;
}

.flickity-prev-next-button.next:hover {
    background-color: var(--green);
}

.flickity-prev-next-button .flickity-button-icon {
    width: 40%;
    height: 40%;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(-1, 1);
}

.flickity-button {
    color: #fff;
}

.flickity-button:focus {
    box-shadow: none;
}

.flickity-button:active {
    opacity: 1;
}

.flickity-page-dots {
    bottom: 80px;
}

.flickity-page-dot {
    min-height: 10px;
    background: rgba(0, 0, 0, 0.15);
}

.flickity-page-dot.is-selected {
    background: #e37900;
}

.flickity-page-dot:focus {
    box-shadow: none;
}

.stay-plan__img01 {
    position: absolute;
    top: -190px;
    left: 80px;
}

.stay-plan__img02 {
    position: absolute;
    bottom: 64px;
    left: -24px;
}

.stay-plan__img03 {
    position: absolute;
    right: -220px;
    bottom: -56px;
    z-index: 9;
}

/*------------------------

日帰り旅の楽しみ方

------------------------*/
.day-trip {
    margin-top: 100px;
}

.day-trip .wrap {
    position: relative;
}

.day-trip .day-trip__img01 {
    position: absolute;
    top: 16px;
    left: -173px;
    z-index: -1;
}

.day-trip .day-trip__title {
    text-align: center;
}

.day-trip .day-trip__title-en {
    margin-top: 8px;
    font-family: var(--text-en);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(86, 174, 82);
    text-align: center;
}

.day-trip .day-trip__inner {
    margin-top: 40px;
    padding: 100px 0 120px 120px;
    position: relative;
}

.day-trip .day-trip__inner::before {
    width: calc(50vw + 50%);
    height: 100%;
    border-radius: 200px 0 0 0;
    background-color: #91cce5;
    position: absolute;
    content: "";
    top: 0;
    right: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.day-trip .day-trip__container {
    display: flex;
}

.day-trip .day-trip__container:nth-child(n + 2) {
    margin-top: 80px;
}

.day-trip .day-trip__container .img-area {
    position: relative;
}

.day-trip .day-trip__container .img-area img {
    border-radius: 80px 80px 0 0;
}

.day-trip .unit01 .img-area {
    margin-left: 48px;
    order: 2;
}

.day-trip .unit01 .text-area {
    order: 1;
}

.day-trip .unit02 .text-area {
    margin-left: 48px;
}

.day-trip .caption {
    position: absolute;
    bottom: 32px;
    left: 32px;
    line-height: 1.8;
}

.day-trip .caption span {
    padding: 0 8px 4px;
    background-color: #54ba66;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.day-trip .title-en {
    font-family: var(--text-en);
    font-size: 24px;
    font-weight: 700;
    color: rgb(0, 123, 165);
}

.day-trip .title {
    margin-top: 16px;
    font-size: 32px;
    font-weight: 700;
}

.day-trip .text {
    margin-top: 16px;
}

.day-trip .btn-wrap {
    margin-top: 40px;
    display: flex;
}

.day-trip .btn {
    padding: 20px 40px;
    border-radius: 50px;
    background-color: #171716;
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    transition: background-color 0.3s;
}

.day-trip .btn:hover {
    background-color: var(--green);
}

.day-trip .btn:nth-child(n + 2) {
    margin-left: 16px;
}

.day-trip .btn-blue {
    background-color: rgb(0, 123, 165);
}

.day-trip .day-trip__img02 {
    position: absolute;
    top: -61px;
    right: 136px;
}

.day-trip .day-trip__img04 {
    position: absolute;
    right: 56px;
    bottom: -40px;
}

.day-trip .day-trip__img06 {
    position: absolute;
    bottom: -48px;
    left: -220px;
}

.day-trip .day-trip__img07 {
    position: absolute;
    right: 80px;
    bottom: -48px;
}

/*------------------------

温泉旅館の楽しみ方

------------------------*/
.enjoy-trip {
    margin-top: 160px;
    padding: 100px 0 240px;
    background-color: #faf8ee;
    background-image: url(../img/enjoy-trip_back.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

@media screen and (min-width: 1921px) {
    .enjoy-trip {
        padding: 100px 0 340px;
        background-size: contain;
    }
}

.enjoy-trip .wrap {
    position: relative;
}

.enjoy-trip .enjoy-trip__img01 {
    position: absolute;
    top: -141px;
    left: -53px;
}

.enjoy-trip .enjoy-trip__img02 {
    position: absolute;
    top: -28px;
    right: 59px;
}

.enjoy-trip .enjoy-trip__title {
    text-align: center;
}

.enjoy-trip .enjoy-trip__title-en {
    margin-top: 8px;
    font-family: var(--text-en);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(86, 174, 82);
    text-align: center;
}

.enjoy-trip__container {
    margin-top: 64px;
    margin-left: -64px;
    display: flex;
    flex-wrap: wrap;
}

.enjoy-trip__unit {
    width: calc(50% - 64px);
    margin-left: 64px;
}

.enjoy-trip__unit:nth-child(even) {
    margin-top: 80px;
}

.enjoy-trip .img-area {
    position: relative;
}

.enjoy-trip .title {
    margin-top: 24px;
    font-size: 24px;
    font-weight: 700;
}

.enjoy-trip .text {
    margin-top: 16px;
}

.enjoy-trip .btn-wrap {
    margin-top: 24px;
}

.enjoy-trip .btn {
    padding: 20px 56px;
    border-radius: 50px;
    background-color: #171716;
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    transition: background-color 0.3s;
}

.enjoy-trip .btn span {
    position: relative;
}

.enjoy-trip .btn span::before {
    width: 14px;
    height: 14px;
    background-image: url(../../common/img/arrow_w.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    content: "";
    top: 50%;
    right: -24px;
    transition: transform 0.3s;
    transform: translate(0, -50%);
}

.enjoy-trip .btn:hover {
    background-color: #58bae4;
}

.enjoy-trip .btn:hover span::before {
    transform: translate(5px, -10px);
}

.enjoy-trip .enjoy-trip__unit01-img02 {
    position: absolute;
    right: 23px;
    bottom: -73px;
}

.enjoy-trip .enjoy-trip__unit01-img03 {
    position: absolute;
    bottom: -178px;
    left: -274px;
}

.enjoy-trip .enjoy-trip__unit02-img02 {
    position: absolute;
    right: 39px;
    bottom: -81px;
    z-index: 2;
}

.enjoy-trip .enjoy-trip__unit02-img03 {
    position: absolute;
    right: -195px;
    bottom: -134px;
    z-index: 1;
}

.enjoy-trip .enjoy-trip__unit03-img02 {
    position: absolute;
    right: 36px;
    bottom: -42px;
}

.enjoy-trip .enjoy-trip__unit03-img03 {
    position: absolute;
    bottom: -173px;
    left: -363px;
}

.enjoy-trip .enjoy-trip__unit04-img02 {
    position: absolute;
    right: -11px;
    bottom: -58px;
    z-index: 2;
}

.enjoy-trip .enjoy-trip__unit04-img03 {
    position: absolute;
    right: -219px;
    bottom: -69px;
    z-index: 1;
}

.enjoy-trip .enjoy-trip__unit05-img02 {
    position: absolute;
    right: -108px;
    bottom: -82px;
}

.enjoy-trip .enjoy-trip__unit05-img03 {
    position: absolute;
    bottom: -129px;
    left: -309px;
}

.enjoy-trip .enjoy-trip__unit05-img04 {
    position: absolute;
    right: -131px;
    bottom: -444px;
}

/*------------------------

不死王閣インフォメーション

------------------------*/
.information {
    padding: 24px 0 0;
}

.information .information__title {
    text-align: center;
}

.information .information__title-en {
    margin-top: 8px;
    font-family: var(--text-en);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(86, 174, 82);
    text-align: center;
}

.information .unit01 {
    margin-top: 64px;
}

.information .unit01 .container {
    display: flex;
    justify-content: center;
}

.information .unit01 .container .left {
    width: 500px;
}

.information .unit01 .container .right {
    width: 511px;
    margin-left: 24px;
}

.information .unit01 .container .container02 {
    display: flex;
    flex-wrap: wrap;
}

.information .cake-ban {
    width: 263px;
    margin-left: 8px;
}

.information .cake-ban a {
    display: block;
}

.information .tripadvisor {
    width: 240px;
}

.information .instagram {
    width: 100%;
    margin-bottom: 8px;
}

.information .instagram ul {
    margin-left: -4px;
    display: flex;
    flex-wrap: wrap;
}

.information .instagram ul .instagram__img {
    width: calc(100% / 4 - 4px);
    margin-left: 4px;
    overflow: hidden;
}

.information .instagram__img:nth-child(n + 5) {
    margin-top: 4px;
}

.information .instagram__img a {
    display: block;
    transition: 0.3s;
}

.information .instagram__img a:hover {
    transform: scale(1.1);
}

.information .unit01__container {
    margin-left: -24px;
    display: flex;
}

.information .unit01__container .left,
.information .unit01__container .right {
    margin-left: 24px;
}

.information .unit01__container .right .ban {
    margin-top: 14px;
}

.information .unit01__container .right .ban a {
    display: block;
    transition: 0.3s;
}

.information .unit01__container .right .ban a:hover {
    transform: scale(1.05);
}

.information .map {
    margin-top: 64px;
    position: relative;
}

.information .map .map02 {
    position: absolute;
    top: 0;
    right: 0;
}

.information .map a {
    display: block;
    transition: 0.3s;
}

.information .map a:hover {
    transform: scale(0.98);
}

.information .ban-list {
    margin-top: 64px;
    margin-left: -16px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.information .ban-list li {
    margin: 0 0 0 16px;
}

.information .ban-list .app {
    width: 724px;
    margin: 40px 0 0 0;
    display: flex;
    align-items: flex-end;
}

.information .ban-list li a {
    display: block;
    transition: 0.3s;
}

.information .ban-list li a:hover {
    transform: scale(0.96);
}

.information .ban-list .line {
    width: calc(100% - 724px - 16px);
    margin: 40px 0 0 16px;
}

.information .ban-list .furusa-travel {
    width: calc(100% - 724px - 16px);
    margin: 40px 0 0 16px;
    display: flex;
    align-items: flex-end;
}

/*------------------------

ダウンロード

------------------------*/
.download {
    margin: 64px 0;
}

.download .title {
    font-family: var(--text-en);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(86, 174, 82);
    text-align: center;
}

.download .is-row {
    margin-top: 24px;
}

.download .btn {
    padding: 20px;
    border: 2px solid #171716;
    border-radius: 50px;
    background-color: #fff;
    display: block;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.3s;
}

.download .btn span {
    position: relative;
}

.download .btn span::before {
    width: 14px;
    height: 14px;
    background-image: url(../../common/img/arrow_green.svg);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    content: "";
    top: 50%;
    right: -24px;
    transition: transform 0.3s;
    transform: translate(0, -50%);
}

.download .btn:hover {
    background-color: var(--green);
}

.download .btn:hover span::before {
    background-image: url(../../common/img/arrow.svg);
    transform: translate(5px, -10px);
}

/*================================================================
# プール
================================================================ */
.pool {
    margin-top: 40px;
}

.pool .img-area {
    position: relative;
}

.pool_illust01 {
    position: absolute;
    top: -24px;
    right: -24px;
}

.pool_illust02 {
    position: absolute;
    bottom: -24px;
    left: -24px;
}

.pool .text-area {
    padding: 40px 40px 24px;
    background-color: #fff;
}

.pool .container {
    display: flex;
    justify-content: space-between;
}

.pool .text02 {
    margin-top: 24px;
    font-weight: 700;
    line-height: 2;
}

.pool .right table {
    border-collapse: collapse;
    font-size: 14px;
}

.pool .right table th,
.pool .right table td {
    padding: 10px 32px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.pool .right table th {
    background-color: #f5f5f5;
}

.pool .right table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.pool .right table tr:hover {
    background-color: #f1f1f1;
}

.pool .right table td {
    text-align: right;
}

.pool .right .note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--gray);
    text-align: right;
}