@charset "UTF-8";

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

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: calc(80vh - 66px - 16px);
    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: calc(80vh - 66px - 16px);
    max-height: 800px;
}

.swiper-slide {
    overflow: hidden;
}

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

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

.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 24s 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: -16%;
    overflow: hidden;
    font-family: var(--text-en);
    font-size: 160px;
    font-weight: 700;
    white-space: nowrap;
}

.swiper-slide-active .ticker-text {
    animation: ticker-text 1.4s 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: 20vh;
    left: 0;
}

.swiper-slide .slide-content .plan-caption {
    /* position: absolute;
    top: 56%;
    left: 6%;
    z-index: 1; */
    display: none;
}

.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;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, 0);
}

.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: 10%;
    }

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

.swiper-slide .slide-content .plan-img {
    width: 560px;
    margin: auto;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 40%;
    z-index: 2;
    transform: translate(-50%, 0);
}

.swiper-slide .slide-content .plan-btn {
    width: 120px;
    position: absolute;
    right: 8%;
    bottom: 8%;
    z-index: 3;
}

.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-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    width: 100%;
    top: auto;
    bottom: 1vh;
    left: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transform: translate3d(-50%, 0, 0);
}

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

.swiper-pagination-bullet {
    width: 80px;
    height: 80px;
    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: 2px;
    position: absolute;
    content: "";
    bottom: -8px;
    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-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: 64px;
    text-align: center;
}

.charm .wrap {
    position: relative;
}

.charm__img01 {
    width: 183px;
    position: absolute;
    top: 35px;
    left: -138px;
}

.charm__img02 {
    width: 140px;
    position: absolute;
    top: -50px;
    right: -80px;
}

.charm__title {
    font-size: 24px;
}

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

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

動画

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

.video .wrap {
    position: relative;
}

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

.video__video img {
    border-radius: 40px 40px 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 {
    cursor: pointer;
    position: relative;
    display: block;
}

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

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

.video__img01 {
    width: 180px;
    position: absolute;
    top: -175px;
    left: -130px;
    z-index: -1;
}

.video__img02 {
    width: 200px;
    position: absolute;
    top: -161px;
    right: -106px;
    z-index: -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: 100%;
    max-height: 100vh;
}

.popup .popup__inner .close {
    width: 44px;
    height: 44px;
    margin: auto;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 20vh;
    left: 0;
}

.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: 64px;
    padding: 64px 0;
    background: #faf8ee;
}

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

.campaign .campaign__title {
    font-weight: 700;
    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 {
    width: 140%;
    margin: 0 0 40px -20%;
}

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

.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: 16px;
    font-weight: 700;
    color: #e44606;
    text-align: center;
}

.campaign .campaign__ban a {
    margin-top: 16px;
    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: 103px;
    position: absolute;
    top: -66px;
    left: -28px;
}

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

.campaign .black-btn-wrap {
    margin-top: 40px;
    flex-direction: column;
}

.campaign .black-btn-wrap .btn {
    width: 100%;
    position: relative;
}

.campaign .black-btn-wrap .btn+.btn {
    margin-top: 32px;
}

.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;
    z-index: 1;
}

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

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

.campaign .notice span {
    position: relative;
    display: block;
    font-size: 16px;
    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: 80px;
}

.stay-plan .wrap {
    width: 100%;
    margin: 0 calc(50% - 50vw);
    padding-left: 24px;
    position: relative;
}

.stay-plan .wrap::before {
    width: calc(50vw + 50%);
    height: 100%;
    border-radius: 0 160px 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: 64px;
    font-weight: 700;
    color: #fff;
}

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

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

.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 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%);
}

/*------------
プランスライダー
-------------*/
.plan-slider {
    padding: 40px 0 48px;
    border-radius: 0 160px 0 0;
}

.PlanView {
    width: calc(100% - 48px);
    height: 520px;
    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: 100%;
    height: 200px;
    border-radius: 24px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

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

.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: 16px;
    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 .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: 3;
}

.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::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;
}

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

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

.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: 28px;
}

.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 {
    width: 607px;
    position: absolute;
    top: -106px;
    left: -88px;
    transform: scale(-1, 1);
}

.stay-plan__img02 {
    width: 200px;
    position: absolute;
    top: 104px;
    right: -3px;
    transform: scale(-1, 1);
}

.stay-plan__img03 {
    display: none;
}

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

日帰り旅の楽しみ方

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

.day-trip .wrap {
    width: 100%;
    margin: 0 calc(50% - 50vw);
    position: relative;
}

.day-trip .day-trip__img01 {
    width: 160px;
    position: absolute;
    top: -215px;
    left: -74px;
    z-index: -1;
}

.day-trip .day-trip__title {
    font-weight: 700;
    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: 64px 32px;
    background-color: #91cce5;
    position: relative;
}

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

.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 .caption {
    position: absolute;
    top: -16px;
    left: -16px;
    line-height: 1.8;
}

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

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

.day-trip .title {
    font-size: 24px;
    font-weight: 700;
}

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

.day-trip .btn-wrap {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
}

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

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

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

.day-trip .day-trip__img02 {
    width: 120px;
    position: absolute;
    top: -33px;
    right: -21px;
}

.day-trip .day-trip__img04 {
    width: 64px;
    position: absolute;
    right: 33px;
    bottom: -107px;
}

.day-trip .day-trip__img06 {
    display: none;
}

.day-trip .day-trip__img07 {
    width: 556px;
    position: absolute;
    right: -84px;
    bottom: -137px;
}

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

温泉旅館の楽しみ方

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

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

.enjoy-trip .enjoy-trip__img01 {
    width: 268px;
    position: absolute;
    top: -220px;
    left: -135px;
}

.enjoy-trip .enjoy-trip__img02 {
    display: none;
}

.enjoy-trip .enjoy-trip__title {
    font-weight: 700;
    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 {
    display: flex;
    flex-wrap: wrap;
}

.enjoy-trip__unit {
    width: 100%;
    margin-top: 64px;
}

.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;
    border-radius: 50px;
    background-color: #171716;
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.15);
    display: block;
    font-size: 14px;
    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 .enjoy-trip__unit01-img02 {
    display: none;
}

.enjoy-trip .enjoy-trip__unit01-img03 {
    width: 150px;
    position: absolute;
    bottom: -52px;
    left: -65px;
}

.enjoy-trip .enjoy-trip__unit02-img02 {
    display: none;
}

.enjoy-trip .enjoy-trip__unit02-img03 {
    width: 150px;
    position: absolute;
    right: -83px;
    bottom: -92px;
    z-index: 1;
}

.enjoy-trip .enjoy-trip__unit03-img02 {
    display: none;
}

.enjoy-trip .enjoy-trip__unit03-img03 {
    width: 150px;
    position: absolute;
    bottom: -16px;
    left: -94px;
}

.enjoy-trip .enjoy-trip__unit04-img02 {
    display: none;
}

.enjoy-trip .enjoy-trip__unit04-img03 {
    width: 150px;
    position: absolute;
    right: -82px;
    bottom: -16px;
    z-index: 1;
}

.enjoy-trip .enjoy-trip__unit05-img02 {
    display: none;
}

.enjoy-trip .enjoy-trip__unit05-img03 {
    width: 150px;
    position: absolute;
    bottom: -22px;
    left: -92px;
}

.enjoy-trip .enjoy-trip__unit05-img04 {
    display: none;
}

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

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

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

.information .information__title {
    font-weight: 700;
    text-align: center;
}

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

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

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

.information .cake-ban {
    width: 100%;
    margin-top: 40px;
    text-align: center;
}

.information .tripadvisor {
    width: 240px;
    margin: 16px auto 0;
}

.information .instagram {
    margin: 40px 0 0;
}

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

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

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

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

#CDSWIDSSP {
    margin: auto !important;
}

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

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

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

.information .ban-list li {
    width: calc(100% / 3 - 16px);
    margin-left: 16px;
}

.information .ban-list .app {
    width: 100%;
    margin-top: 24px;
    position: relative;
}

.information .ban-list .app .goole-play {
    width: 47%;
    height: 24%;
    position: absolute;
    bottom: 2%;
    left: 2%;
}

.information .ban-list .app .app-store {
    width: 47%;
    height: 24%;
    position: absolute;
    right: 2%;
    bottom: 2%;
}

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

.information .ban-list .line {
    width: 100%;
    margin-top: 24px;
}

.information .ban-list .furusa-travel {
    width: 100%;
    margin-top: 32px;
}

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

ダウンロード

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

.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 {
    margin-top: 16px;
    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%);
}

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

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

.pool_illust01 {
    width: calc(242px / 3);
    position: absolute;
    top: -8px;
    right: -8px;
}

.pool_illust02 {
    width: calc(242px / 3);
    position: absolute;
    bottom: -8px;
    left: -8px;
}

.pool .text-area {
    padding: 24px 24px 16px;
    background-color: #fff;
    font-size: 14px;
}

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

.pool .right table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    font-size: 12px;
}

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

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

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

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

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