@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700;900&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* ========================================
   テーマカラー設定
======================================== */
:root {
    --noboribetsu-color: #e95240;
    /* 登別（赤系） */
    --others-color: #f4da41;
    /* その他（黄系） */
    --bg-beige: #fefbec;
    --bg-yellow: #f5c820;
    --bg-green: #3cb156;
    --bg-blue: #1574b2;
    --bg-lightblue: #00b1f5;
}


body {
    overflow: hidden;
}

#maincontents * {
    box-sizing: border-box;
}

#maincontents {
    position: relative;
    color: #000000;
    font-size: 24px;
    letter-spacing: 0em;
    font-weight: 400;
    line-height: 2;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

#maincontents main {
    background: repeating-linear-gradient(90deg, #77bac8, #77bac8 2px, #26a9bc 2px, #26a9bc 20px);
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.maincontents a {
    color: unset;
    text-decoration: none;
}

.maincontents img {
    vertical-align: bottom;
    max-width: 100%;
}

/* bg
---------------------------------------------------------------------- */
.bg__color01 {
    background: var(--bg-beige);
}

.bg__color02 {
    background: var(--bg-light-blue);
}



/* ---------------------------------------------------------------------- */
/* PC */
/* ---------------------------------------------------------------------- */
@media (min-width: 1001px) {
    a {
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    img {
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }

    a:active,
    a:hover {
        opacity: 0.7;
    }

    .for_sp {
        display: none !important;
    }

    .for_tab {
        display: none !important;
    }

    .for_nw {
        display: none !important;
    }

    .tab .for_pcnotab {
        display: none !important;
    }

    .tab .for_tab {
        display: inline !important;
    }

    .sp_view {
        display: none !important;
    }

    .wrap,
    #page {
        width: 975px;
        margin-right: auto;
        margin-left: auto;
    }

    .pc_sidepadding {
        padding: 0 3%;
    }

    /* common
	---------------------------------------------------------------------- */
    .mainw,
    .mainw_pc {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .w900 {
        max-width: 900px;
        margin: 0 auto;
    }

    .w1000 {
        max-width: 1000px;
        margin: 0 auto;
    }

    .w1300 {
        max-width: 1340px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .w1600 {
        max-width: 1600px;
        margin: 0 auto;
    }

    .anchor {
        margin-top: -100px;
        padding-top: 100px;
    }

    .cflex {
        display: flex;
    }

    .img100 {
        width: 100%;
    }

    .img100 img {
        width: 100%;
    }

    .ui-state-default:hover,
    .ui-widget-content .ui-state-default:hover,
    .ui-widget-header .ui-state-default:hover {
        background: #000;
        color: #fff;
    }

    /* tab
  ---------------------------------------------------------------------- */
    .tab {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .tab li {
        position: relative;
        z-index: 0;
        width: 481px;
        margin: 0 -50px;
        padding: 27px 20px 8px;
        color: #fff;
        font-size: 46px;
        font-weight: 900;
        line-height: 1.5;
        letter-spacing: 0.05em;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        cursor: pointer;
    }

    /*.tab li:hover {
		opacity: 0.7;
	}*/

    .tab li.is-move {
        margin: 0 -30px;
    }

    .tab li.is-active {
        z-index: 1;
    }

    .tab li#tab-noboribetsu {
        padding-right: 100px;
        background: url(../images/tab_noboribetsu_pc.png);
        background-size: 100% 100%;
        text-align: right;
    }

    .tab li#tab-others {
        padding-left: 100px;
        background: url(../images/tab_others_pc.png);
        background-size: 100% 100%;
        text-align: left;
    }

    .tab__wrap {
        background: #fff;
    }

    .tab__content {
        padding-top: 80px;
        border-top: 8px solid var(--others-color);
        background: #fefbec;
    }

    .tab__content[data-id=noboribetsu] {
        border-top: 8px solid var(--noboribetsu-color);
        background: #fdedec;
    }
}

/* End @media (min-width: 1001px) */
/* ---------------------------------------------------------------------- */


/* ---------------------------------------------------------------------- */
/* SP */
/* ---------------------------------------------------------------------- */
@media (max-width: 1000px) {

    #maincontents {
        font-size: calc(40 / 750 * 100vw);
        line-height: 1.65;
    }

    .wrap,
    #page {
        width: 100%;
        position: relative;
        margin-right: auto;
        margin-left: auto;
    }

    .for_pc {
        display: none !important;
    }

    .for_tab {
        display: none;
    }

    .for_pcnotab {
        display: none !important;
    }

    .for_nw {
        display: none !important;
    }

    .pc_view {
        display: none !important;
    }

    /* tab
  ---------------------------------------------------------------------- */
    .tab {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .tab li {
        position: relative;
        z-index: 0;
        width: 50.8vw;
        margin: 0 -6.5vw;
        padding: 2.55vw 5.56vw 2.04vw 0;
        color: #fff;
        font-weight: 900;
        font-size: 4.8vw;
        line-height: 1.5;
        text-align: center;
        letter-spacing: 0.1em;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        cursor: pointer;
    }

    /*.tab li:hover {
		opacity: 0.7;
	}*/

    .tab li.is-move {
        margin: 0 -3vw;
    }

    .tab li.is-active {
        z-index: 1;
    }

    .tab li#tab-noboribetsu {
        padding-right: 2.2em;
        background: url(../images/tab_noboribetsu_sp.png);
        background-size: 100% 100%;
    }

    .tab li#tab-others {
        background: url(../images/tab_others_sp.png);
        background-size: 100% 100%;
        padding-left: 2.6em;
    }

    .tab__content {
        padding: 10vw 0;
        border-top: 8px solid var(--others-color);
        background: #fefbec;
    }

    .tab__content[data-id=noboribetsu] {
        border-top: 8px solid var(--noboribetsu-color);
        background: #fdedec;
    }
}

/* End @media (max-width:1000px) */


/* ---------------------------------------------------------------------- */
/* TOP
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* pc */
/* ---------------------------------------------------------------------- */
@media (min-width: 1001px) {

    /* common 
  ---------------------------------------------------------------------- */
    .sec_title {
        width: 938px;
        height: 104px;
        margin: 0 auto 40px;
        background: url(../images/bg_title_long.png) no-repeat 0 0 / 100% auto;
        font-weight: 700;
        font-size: 30px;
        line-height: 75px;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
    }

    /* mv 
  ---------------------------------------------------------------------- */
    #mv {
        position: relative;
    }

    /* voice 
  ---------------------------------------------------------------------- */
    #voice {
        padding: 50px 0 20px;
        background-image: url(../images/bg_cloud_pc.png);
        background-repeat: repeat-x;
        animation: slide 30s infinite linear;
    }

    @keyframes slide {
        0% {
            background-position: 0 30px;
            /* 開始位置 */
        }

        100% {
            background-position: -2900px 30px;
            /* 終了位置（またはそれ以上で無限ループ） */
        }
    }

    #voice .sec_title {
        width: 658px;
        height: 102px;
        background: url(../images/bg_title_short.png) no-repeat 0 0 / 100% auto;
    }

    #voice .wrap {
        position: relative;
    }

    .voice__list {
        display: flex;
        flex-wrap: wrap;
    }

    .voice__list li {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        font-weight: 500;
        font-size: 24px;
        line-height: 1.5;
        font-family: "Zen Maru Gothic", sans-serif;
        animation: floating-c 0.8s ease-in-out infinite alternate-reverse;
    }

    .voice__list li.voice__list-nazo {
        width: 450px;
        height: 360px;
        background: url(../images/bg_bubble_nazo.png) no-repeat 0 0 / 100% auto;
    }

    .voice__list li.voice__list-nazo::before {
        display: block;
        position: absolute;
        top: -60px;
        left: 0;
        width: 82px;
        height: 79px;
        background: url(../images/img_pt_star.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .voice__list li.voice__list-kankou {
        width: 485px;
        height: 322px;
        margin: 150px 0 0;
        background: url(../images/bg_bubble_kankou.png) no-repeat 0 0 / 100% auto;
        animation-delay: 0.1s;
    }

    .voice__list li.voice__list-kankou::before,
    .voice__list li.voice__list-kankou::after {
        display: block;
        position: absolute;
        content: "";
    }

    .voice__list li.voice__list-kankou::before {
        top: -150px;
        right: 0;
        width: 145px;
        height: 118px;
        background: url(../images/text_chara.png) no-repeat 0 0 / 100% auto;
    }

    .voice__list li.voice__list-kankou::after {
        top: -100px;
        right: 80px;
        width: 152px;
        height: 198px;
        background: url(../images/img_chara.png) no-repeat 0 0 / 100% auto;
        animation: floating-n 1s ease-in-out infinite alternate-reverse;
    }

    .voice__list li.voice__list-machi {
        width: 391px;
        height: 279px;
        margin: -100px 0 0 50px;
        background: url(../images/bg_bubble_machi.png) no-repeat 0 0 / 100% auto;
        animation-delay: 0.2s;
    }

    @keyframes floating-c {
        0% {
            transform: translateY(-0.5%);
        }

        100% {
            transform: translateY(0.5%);
        }
    }

    @keyframes floating-n {
        0% {
            transform: translateY(-5%);
        }

        100% {
            transform: translateY(5%);
        }
    }

    /* introduction 
  ---------------------------------------------------------------------- */
    #intro {
        opacity: 0;
        width: 950px;
        height: 468px;
        margin: 20px auto 65px;
        background-image: url(../images/bg_intro_pc.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
        transition: opacity 0.5s ease-in;
    }

    .intro__inr {
        padding: 43px 40px;
    }

    .intro__ttl {
        opacity: 0;
        width: 389px;
        margin: 0 auto 25px;
        transition: opacity 0.5s ease-in 0.5s;
    }

    .intro__inr p {
        opacity: 0;
        font-size: 19px;
        line-height: 1.5;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
        transition: opacity 0.5s ease-in 0.8s;
    }

    .intro__inr p+p {
        margin-top: 15px;
    }

    #intro.is-visible,
    .intro__ttl.is-visible,
    .intro__inr p.is-visible {
        opacity: 1;
    }

    /* plan 
  ---------------------------------------------------------------------- */
    #maincontents ul.link {
        display: flex;
        justify-content: space-between;
        max-width: 1076px;
        margin: 0 auto 90px;
    }

    .link li {
        width: 48%;
        max-width: 520px;
        font-size: 29px;
        line-height: 1;
        font-weight: 700;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
    }

    .link li a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .link li.link__nb a {
        padding: 9% 40px 5% 90px;
        background: url(../images/bn_plan_noboribetsu.png) no-repeat 0 0 / 100% auto;
    }

    .link li.link__ar a {
        padding: 9% 90px 5% 40px;
        background: url(../images/bn_plan_around.png) no-repeat 0 0 / 100% auto;
    }

    .link li span {
        font-size: 20px;
    }

    .link li span::after {
        display: block;
        width: 1.8vw;
        max-width: 23px;
        height: 0;
        margin: 10px auto 0;
        padding: 0 0 4.8%;
        background: url(../images/ico_arrow_down.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    #plan {
        position: relative;
        width: 95vw;
        max-width: 1100px;
        margin: 0 auto 90px;
        padding: 70px 0 50px;
        border-radius: 20px;
        background: #fff;
    }

    #plan::before,
    #plan::after {
        display: block;
        position: absolute;
        content: "";
    }

    #plan::before {
        top: 80px;
        left: -15px;
        width: 20vw;
        max-width: 241px;
        height: 380px;
        background: url(../images/img_pt_girl.png) no-repeat 0 0 / 100% auto;
    }

    #plan::after {
        top: 130px;
        right: -15px;
        width: 24vw;
        max-width: 280px;
        height: 233px;
        background: url(../images/img_pt_gourmet.png) no-repeat 0 0 / 100% auto;
    }

    #plan .sec_title {
        position: absolute;
        top: -52px;
        left: 50%;
        transform: translateX(-50%);
    }

    .plan__title {
        color: #4d9eb5;
        font-weight: 900;
        font-size: 50px;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
        text-shadow: 2px 3px 0px rgba(0, 0, 0, 1);
    }

    .plan__title span {
        font-size: 70px;
    }

    .plan__title span.nb {
        color: var(--noboribetsu-color);
    }

    .plan__title span.nz {
        color: var(--others-color);
    }

    .plan__desc {
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
    }

    .plan__desc strong {
        position: relative;
        z-index: 2;
    }

    .plan__desc strong::after {
        display: block;
        position: absolute;
        bottom: -2px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 13px;
        background: rgba(77, 158, 181, .6);
        content: "";
    }

    #plan .wrap {
        width: 983px;
    }

    #plan__card {
        position: relative;
        z-index: 4;
        width: 85vw;
        max-width: 974px;
        margin: 100px auto 0;
        padding: 70px 60px;
        border: 2px solid #040000;
        box-shadow: 9px 9px;
        box-sizing: border-box;
        background-image: url(../images/bg_plan_left.jpg), url(../images/bg_plan_right.jpg);
        background-color: #fff;
        background-repeat: no-repeat, no-repeat;
        background-position: left top, right top;
        background-size: 50% auto, 50% auto;
    }

    #plan__card h3 {
        display: block;
        position: absolute;
        top: -30px;
        left: -20px;
        z-index: 5;
        transform: rotate(-10deg);
        padding: 5px 30px;
        border-radius: 20px;
        background: #231815;
        color: #fff;
        font-weight: 900;
        font-size: 26px;
    }

    #plan__card h3::after {
        display: block;
        position: absolute;
        bottom: -14px;
        left: 50%;
        transform: translateX(-50%);
        width: 18px;
        height: 32px;
        background: url(../images/bg_kagi.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    #plan__card h4 {
        width: 100%;
        color: #4d9eb5;
        font-weight: 900;
        font-size: 40px;
        line-height: 1.3;
        text-align: center;
        text-shadow: 2px 3px 0px rgba(0, 0, 0, 1);
    }

    .plan__note {
        width: 100%;
        margin: 0 0 10px;
        font-weight: 700;
        font-size: 20px;
        text-align: center;
    }

    .about::before {
        display: block;
        position: absolute;
        top: 20px;
        right: 10px;
        width: 348px;
        height: 100px;
        background: url(../images/text_clear.png) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .about ol {
        margin: 0 0 20px;
        counter-reset: number 0;
    }

    .about ol li {
        position: relative;
        padding-left: 1.5em;
        font-weight: 700;
        font-size: 22px;
        letter-spacing: -0.05em;
    }

    .about ol li::before,
    .about ol li::after {
        display: block;
        position: absolute;
    }

    .about ol li::before {
        top: 11px;
        left: 0;
        width: 22px;
        height: 22px;
        border: 1px solid #000;
        border-radius: 50%;
        content: "";
    }

    .about ol li::after {
        top: 0;
        left: 6px;
        counter-increment: number 1;
        content: counter(number);
    }

    #maincontents ul.about__item {
        position: relative;
        width: 63vw;
        max-width: 749px;
        margin: 20px 0 0;
    }

    .about__item::before {
        display: block;
        position: absolute;
        bottom: -70px;
        right: -136px;
        width: 161px;
        height: 275px;
        background: url(../images/img_pt_demon.png) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .about__item li {
        font-weight: 700;
        font-size: 18px;
    }

    .about__item li::before {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 3px;
        border-radius: 50%;
        background: #000;
        content: "";
    }

    .about__item li span {
        font-weight: 900;
        font-size: 30px;
    }

    .about__item li p {
        font-weight: 400;
        font-size: 12px;
        line-height: 1.5;
    }

    .about__att {
        margin: 60px 0 0;
    }

    .about__att-detail {
        margin: 30px 0 0;
    }

    .about__att-detail .toggle {
        display: none;
    }

    .about__att-detail label {
        display: block;
        position: relative;
        z-index: 4;
        width: fit-content;
        margin: 0 auto;
        padding: 10px 50px 13px 30px;
        border: 4px solid #231815;
        border-radius: 30px;
        background: var(--others-color);
        font-weight: 700;
        font-size: 18px;
        line-height: 1;
    }

    .about__att-detail label::after {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        margin-left: 20px;
        background: url(../images/ico_plus.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .about__att-detail label span {
        display: inline-block;
        vertical-align: middle;
    }

    .about__att-detail label,
    .att-content {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
    }

    .att-content {
        overflow: hidden;
        height: 0;
        margin-bottom: 10px;
        padding: 0 20px;
    }

    .toggle:checked+label+.att-content {
        position: relative;
        z-index: 3;
        height: auto;
        margin-top: -30px;
        padding: 50px 35px;
        background: #e5e5e6;
        transition: all .3s;
    }

    .toggle:checked+label::after {
        background: url(../images/ico_minus.svg) no-repeat left center / 100% auto !important;
    }

    .att-content ul li {
        font-weight: 400;
        font-size: 12px;
    }

    .att-content ul li::before {
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 3px;
        border-radius: 50%;
        background: #000;
        content: "";
    }

    .att-content ul li strong {
        color: var(--noboribetsu-color);
        font-weight: 900;
    }

    .about__att-sponsor {
        width: 100%;
        font-weight: 700;
        font-size: 14px;
        text-align: center;
    }

    .detail__text {
        font-weight: 700;
        font-size: 18px;
        text-align: center;
    }

    .detail__text span {
        display: block;
        font-size: 12px;
    }

    .detail strong.here {
        display: block;
        margin: 30px 0;
        color: #ba272d;
        font-weight: 900;
        font-size: 30px;
        text-align: center;
    }

    .detail__image {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 0 50px;
        background: url(../images/bg_plus.svg) no-repeat center center / 43px auto;
    }

    .detail__image img,
    .detail__image ul {
        width: 44%;
        max-width: 355px;
    }

    .detail__image ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #maincontents .detail__image ul li a:visited,
    #maincontents .detail__image ul li a:link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 57px;
        padding: 0 15px;
        color: #fff;
        font-weight: 900;
        font-size: min(2.4vw, 30px);
    }

    .detail__image ul li span {
        display: block;
        width: 100%;
        text-align: center;
    }

    .detail__image ul li a::before {
        display: block;
        width: 46px;
        height: 57px;
        content: "";
    }

    .detail__image ul li a::after {
        display: block;
        width: 13px;
        height: 57px;
        background: url(../images/ico_arrow.svg) no-repeat left center / 100% auto;
        content: "";
    }

    .detail__image ul li:first-child {
        background: var(--bg-yellow);
    }

    .detail__image ul li:nth-child(2) {
        background: var(--bg-green);
    }

    .detail__image ul li:last-child {
        background: var(--bg-blue);
    }

    .detail__image ul li:first-child a::before {
        background: url(../images/ico_bed.svg) no-repeat left center / 100% auto;
    }

    .detail__image ul li:nth-child(2) a::before {
        background: url(../images/ico_train.svg) no-repeat left center / 100% auto;
    }

    .detail__image ul li:last-child a::before {
        background: url(../images/ico_plane.svg) no-repeat left center / 100% auto;
    }

    .detail__desc+.detail__desc {
        margin-top: 30px;
    }

    .detail__desc dt {
        color: #ba272d;
        font-weight: 700;
        font-size: 22px;
    }

    .detail__desc dd {
        font-weight: 700;
        font-size: 24px;
    }

    .detail__desc dd strong {
        display: block;
        font-size: 30px;
    }

    .detail__desc-sec {
        display: block;
        font-size: 22px;
        text-align: center;
    }

    .detail__desc-note {
        font-size: 18px;
    }

    .detail__desc-map {
        margin: 10px 0 0;
    }

    #maincontents .detail__desc-map a:visited,
    #maincontents .detail__desc-map a:link {
        display: block;
        position: relative;
        width: 225px;
        height: 30px;
        padding: 0 0 0 30px;
        background: var(--bg-lightblue);
        color: #fff;
        font-weight: 700;
        font-size: 16px;
        line-height: 30px;
        font-family: "Zen Maru Gothic", sans-serif;
    }

    .detail__desc-map a::before {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        width: 16px;
        height: 22px;
        background: url(../images/ico_map.png) no-repeat left center / 100% auto;
        content: "";
    }

    .detail__desc-map a::after {
        position: absolute;
        left: 225px;
        width: 30px;
        height: 30px;
        border: 15px solid transparent;
        border-left: 15px solid var(--bg-lightblue);
        box-sizing: border-box;
        content: "";
    }

    #maincontents a.emphasis:visited,
    #maincontents a.emphasis:link {
        display: block;
        margin: 50px 0 0;
        color: var(--bg-lightblue);
        -webkit-text-decoration: underline var(--bg-lightblue);
        text-decoration: underline var(--bg-lightblue);
    }

    /* stay 
  ---------------------------------------------------------------------- */
    .tab__content .sec_title {
        width: 90vw;
        max-width: 937px;
    }

    #maincontents ul.stayList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        width: 95vw;
        max-width: 1091px;
        margin: 0 auto;
    }

    .stayList li {
        position: relative;
        z-index: 2;
        width: 48%;
        max-width: 528px;
        margin: 0 0 50px;
        border-radius: 20px;
        font-size: 22px;
    }

    .stayList li::before {
        display: block;
        position: absolute;
        top: 8px;
        right: -8px;
        z-index: -1;
        width: 100%;
        height: 100%;
        border: 3px solid #000;
        border-radius: 20px;
        background-image: repeating-linear-gradient(30deg, #000, #000 6px, #bfe4f8 6px, #bfe4f8 14px);
        content: "";
    }

    .stayList li::after {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        border: 3px solid #000;
        border-radius: 20px;
        background: #fff;
        content: "";
    }

    .stayList__image {
        display: block;
        position: relative;
        width: calc(100% - 6px);
        margin: 3px 0 0 3px;
        border-bottom: 3px solid #000;
    }

    .stayList__image::before {
        display: block;
        padding-top: 60.38%;
        content: "";
    }

    .stayList__image img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        border-radius: 16px 16px 0px 0px;
        object-fit: cover;
    }

    #maincontents h3.stayList__hotel {
        padding: 30px 0 0;
        font-weight: 900;
        font-size: 28px;
        text-align: center;
    }

    .stayList li p {
        height: 170px;
        padding: 20px 20px 0;
        line-height: 1.5;
    }

    #maincontents ul.stayList__plan {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 50px 0 20px;
        padding: 0 20px;
    }

    .stayList__plan li::before,
    .stayList__plan li::after {
        display: none;
    }

    .stayList__plan li {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: 0;
    }

    .stayList__plan li+li {
        margin-top: 15px;
    }

    #maincontents .stayList__plan li a:visited,
    #maincontents .stayList__plan li a:link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 57px;
        padding: 0 15px;
        color: #fff;
        font-weight: 900;
        font-size: min(2.4vw, 30px);
        transition: .3s all ease;
    }

    .stayList__plan li span {
        display: block;
        width: 100%;
        text-align: center;
    }

    .stayList__plan li a::before {
        display: block;
        width: 46px;
        height: 57px;
        content: "";
    }

    .stayList__plan li a::after {
        display: block;
        width: 13px;
        height: 57px;
        background: url(../images/ico_arrow.svg) no-repeat left center / 100% auto;
        content: "";
    }

    .stayList__plan li:first-child {
        background: var(--bg-yellow);
    }

    .stayList__plan li:nth-child(2) {
        background: var(--bg-green);
    }

    .stayList__plan li:last-child {
        background: var(--bg-blue);
    }

    .stayList__plan li:first-child a::before {
        background: url(../images/ico_bed.svg) no-repeat left center / 100% auto;
    }

    .stayList__plan li:nth-child(2) a::before {
        background: url(../images/ico_train.svg) no-repeat left center / 100% auto;
    }

    .stayList__plan li:last-child a::before {
        background: url(../images/ico_plane.svg) no-repeat left center / 100% auto;
    }

    .tab__content[data-id=others] .stayList li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------------- */
/* SP */
/* ---------------------------------------------------------------------- */
@media (max-width: 1000px) {

    /* common 
  ---------------------------------------------------------------------- */
    .sec_title {
        width: 87.6vw;
        height: 13.7vw;
        margin: 0 auto 4vw;
        background: url(../images/bg_title_sp.png) no-repeat 0 0 / 100% auto;
        font-weight: 700;
        font-size: 4.8vw;
        line-height: 10vw;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
    }

    /* mv 
  ---------------------------------------------------------------------- */
    #mv {
        position: relative;
    }

    /* voice 
  ---------------------------------------------------------------------- */
    #voice {
        padding: 6vw 0 3vw;
        background-image: url(../images/bg_cloud_sp.png);
        background-repeat: repeat-x;
        background-size: 255vw auto;
        animation: slide 30s infinite linear;
    }

    @keyframes slide {
        0% {
            background-position: 0 12vw;
            /* 開始位置 */
        }

        100% {
            background-position: -255vw 12vw;
            /* 終了位置（またはそれ以上で無限ループ） */
        }
    }

    .voice__list {
        display: flex;
        flex-direction: column;
        width: 91.6vw;
        margin: 0 auto;
    }

    .voice__list::before {
        display: block;
        position: absolute;
        top: 28vw;
        left: 17vw;
        width: 17.47vw;
        height: 16.8vw;
        background: url(../images/img_pt_star.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .voice__list li {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 20vw 0 24vw;
        font-weight: 500;
        font-size: 3.73vw;
        line-height: 1.5;
        font-family: "Zen Maru Gothic", sans-serif;
        animation: floating-c 0.5s ease-in-out infinite alternate-reverse;
    }

    .voice__list li.voice__list-nazo {
        order: 2;
        width: 74.67vw;
        padding: 20vw 0 24vw;
        background: url(../images/bg_bubble_nazo.png) no-repeat 0 0 / 100% auto;
    }

    .voice__list li.voice__list-kankou {
        order: 1;
        width: 69.33vw;
        height: 49.47vw;
        margin: 15vw 0 0 auto;
        background: url(../images/bg_bubble_kankou.png) no-repeat 0 0 / 100% auto;
        animation-delay: 0.1s;
    }

    .voice__list li.voice__list-kankou::before,
    .voice__list li.voice__list-kankou::after {
        display: block;
        position: absolute;
        content: "";
    }

    .voice__list li.voice__list-kankou::before {
        top: -18vw;
        right: 0;
        width: 25.2vw;
        height: 20.53vw;
        background: url(../images/text_chara.png) no-repeat 0 0 / 100% auto;
    }

    .voice__list li.voice__list-kankou::after {
        top: -20vw;
        right: 19vw;
        width: 26.4vw;
        height: 34.27vw;
        background: url(../images/img_chara.png) no-repeat 0 0 / 100% auto;
        animation: floating-n 1s ease-in-out infinite alternate-reverse;
    }

    .voice__list li.voice__list-machi {
        order: 3;
        width: 60.27vw;
        height: 42.93vw;
        margin: 0 2vw 0 auto;
        background: url(../images/bg_bubble_machi_sp.png) no-repeat 0 0 / 100% auto;
        animation-delay: 0.2s;
    }

    @keyframes floating-c {
        0% {
            transform: translateY(-0.5%);
        }

        100% {
            transform: translateY(0.5%);
        }
    }

    @keyframes floating-n {
        0% {
            transform: translateY(-5%);
        }

        100% {
            transform: translateY(5%);
        }
    }

    /* introduction 
  ---------------------------------------------------------------------- */
    #intro {
        opacity: 0;
        width: 91.47vw;
        height: 99.6vw;
        margin: 2.67vw auto 8.67vw;
        background-image: url(../images/bg_intro_sp.png);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
        transition: opacity 0.5s ease-in;
    }

    .intro__inr {
        padding: 6.67vw 2vw;
    }

    .intro__ttl {
        opacity: 0;
        width: 46.93vw;
        margin: 0 auto 3vw;
        transition: opacity 0.5s ease-in 0.3s;
    }

    .intro__ttl img {
        width: 100%;
        height: auto;
    }

    .intro__inr p {
        opacity: 0;
        font-size: 4vw;
        line-height: 1.4;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
        letter-spacing: -0.02em;
        transition: opacity 0.5s ease-in 0.6s;
    }

    .intro__inr p+p {
        margin-top: 2vw;
    }

    #intro.is-visible,
    .intro__ttl.is-visible,
    .intro__inr p.is-visible {
        opacity: 1;
    }

    @keyframes fade {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* plan 
  ---------------------------------------------------------------------- */
    #maincontents ul.link {
        width: 85vw;
        margin: 0 auto 4vw;
    }

    .link li {
        width: 100%;
        font-size: 5.07vw;
        line-height: 1;
        font-weight: 700;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
    }

    .link li+li {
        margin-top: -3vw;
    }

    .link li a {
        display: block;
        width: 100%;
        height: 100%;
        padding: 9% 5.33vw 5% 12vw;
        background: url(../images/bn_plan_noboribetsu.png) no-repeat 0 0 / 100% auto;
    }

    .link li span {
        font-size: 3.87vw;
    }

    .link li span::after {
        display: block;
        width: 3.47vw;
        height: 2vw;
        margin: 1.33vw auto 0;
        background: url(../images/ico_arrow_down.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    #plan {
        position: relative;
        width: 95vw;
        margin: 0 auto 16vw;
        padding: 4vw 0;
        border-radius: 2.67vw;
        background: #fff;
    }

    #plan::before,
    #plan::after {
        display: block;
        position: absolute;
        content: "";
    }

    #plan::before {
        top: 67vw;
        left: 15vw;
        width: 32vw;
        height: 50.53vw;
        background: url(../images/img_pt_girl.png) no-repeat 0 0 / 100% auto;
    }

    #plan::after {
        top: 79vw;
        right: 10vw;
        width: 37.2vw;
        height: 31.07vw;
        background: url(../images/img_pt_gourmet.png) no-repeat 0 0 / 100% auto;
    }

    #plan .sec_title {
        padding: 0.8vw 0 0;
        font-size: 4vw;
        line-height: 1;
    }

    .plan__title {
        margin: 0 0 1vw;
        color: #4d9eb5;
        font-weight: 900;
        font-size: 7.07vw;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
        text-shadow: 0.26vw 0.4vw 0 rgba(0, 0, 0, 1);
    }

    .plan__title span {
        font-size: 10vw;
    }

    .plan__title span.nb {
        color: var(--noboribetsu-color);
    }

    .plan__title span.nz {
        color: var(--others-color);
    }

    .plan__desc {
        margin: 0 0 50vw;
        font-weight: 700;
        font-size: 4vw;
        line-height: 1.5;
        font-family: "Zen Maru Gothic", sans-serif;
        text-align: center;
    }

    .plan__desc strong {
        position: relative;
        z-index: 2;
    }

    .plan__desc strong::after {
        display: block;
        position: absolute;
        bottom: -0.26vw;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 1.73vw;
        background: rgba(77, 158, 181, .6);
        content: "";
    }

    #plan .wrap {
        width: 89.33vw;
    }

    #plan__card {
        position: relative;
        z-index: 4;
        width: 88vw;
        margin: 0 auto;
        padding: 18.4vw 2.67vw 2.67vw;
        border: 0.67vw solid #040000;
        box-shadow: 0.53vw 0.67vw;
        box-sizing: border-box;
        background-image: url(../images/bg_plan_left.jpg), url(../images/bg_plan_right.jpg);
        background-color: #fff;
        background-repeat: no-repeat, no-repeat;
        background-position: left top, right top;
        background-size: 50% auto, 50% auto;
    }

    #plan__card+#plan__card {
        margin-top: 14vw;
    }

    #plan__card h3 {
        display: block;
        position: absolute;
        top: -4vw;
        left: -1vw;
        z-index: 5;
        transform: rotate(-7deg);
        padding: 0.67vw 3vw;
        border-radius: 1.33vw;
        background: #231815;
        color: #fff;
        font-weight: 900;
        font-size: 5.33vw;
    }

    #plan__card h3::after {
        display: block;
        position: absolute;
        bottom: -3vw;
        left: 50%;
        z-index: -1;
        transform: translateX(-50%);
        width: 3.87vw;
        height: 6.67vw;
        background: url(../images/bg_kagi.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    #plan__card h4 {
        width: 100%;
        color: #4d9eb5;
        font-weight: 900;
        font-size: 8vw;
        line-height: 1.1;
        text-align: center;
        text-shadow: 0.5vw 0.5vw 0 rgba(0, 0, 0, 1);
    }

    .plan__note {
        width: 100%;
        margin: 0.67vw 0 1.33vw;
        font-weight: 700;
        font-size: 4vw;
        text-align: center;
    }

    .about::before {
        display: block;
        position: absolute;
        top: 4.67vw;
        right: 0.8vw;
        width: 46.13vw;
        height: 15.87vw;
        background: url(../images/text_clear.png) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .about ol {
        margin: 0 0 3.67vw;
        counter-reset: number 0;
    }

    .about ol li {
        position: relative;
        padding-left: 1.5em;
        font-weight: 700;
        font-size: 3.73vw;
        letter-spacing: -0.05em;
    }

    .about ol li::before,
    .about ol li::after {
        display: block;
        position: absolute;
    }

    .about ol li::before {
        top: 1vw;
        left: 0;
        width: 3.73vw;
        height: 3.73vw;
        border: 0.13vw solid #000;
        border-radius: 50%;
        content: "";
    }

    .about ol li::after {
        top: 0.2vw;
        left: 0.7vw;
        counter-increment: number 1;
        content: counter(number);
    }

    #maincontents ul.about__item {
        width: 81.2vw;
        margin: 4vw 0 0;
    }

    .about__item li {
        font-weight: 700;
        font-size: 3.73vw;
        line-height: 1.5;
    }

    .about__item li::before {
        display: inline-block;
        width: 3.73vw;
        height: 3.73vw;
        margin-right: 0.4vw;
        border-radius: 50%;
        background: #000;
        content: "";
    }

    .about__item li:first-child {
        line-height: 1.1;
    }

    .about__item li span {
        font-weight: 900;
        font-size: 5.33vw;
    }

    .about__item li span.br-sp {
        padding-left: 3.6em;
    }

    .about__item li p {
        padding: 0.4vw 0;
        font-weight: 400;
        line-height: 1.3;
    }

    .about__att {
        margin: 8vw 0 0;
    }

    .about__att-detail {
        position: relative;
        margin: 6vw 0 0;
    }

    .about__att-detail::before {
        display: block;
        position: absolute;
        top: -53.53vw;
        right: -2.5vw;
        width: 32vw;
        height: 50.53vw;
        background: url(../images/img_pt_demon.png) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .about__att-detail .toggle {
        display: none;
    }

    .about__att-detail label {
        display: block;
        position: relative;
        z-index: 4;
        width: fit-content;
        margin: 0 auto;
        padding: 2vw 3vw 2.5vw 3.5vw;
        border: 0.75vw solid #231815;
        border-radius: 5vw;
        background: var(--others-color);
        font-weight: 700;
        font-size: 2.93vw;
        line-height: 1;
    }

    .about__att-detail label::after {
        display: inline-block;
        vertical-align: middle;
        width: 3.12vw;
        height: 3.12vw;
        margin-left: 3.12vw;
        background: url(../images/ico_plus.svg) no-repeat 0 0 / 100% auto;
        content: "";
    }

    .about__att-detail label span {
        display: inline-block;
        vertical-align: middle;
    }

    .about__att-detail label,
    .att-content {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        transition: all 0.3s;
    }

    .att-content {
        overflow: hidden;
        height: 0;
        margin-bottom: 1.33vw;
        padding: 0 2.67vw;
    }

    .toggle:checked+label+.att-content {
        position: relative;
        z-index: 3;
        height: auto;
        margin-top: -4vw;
        padding: 5vw 3vw;
        background: #e5e5e6;
        transition: all .3s;
    }

    .toggle:checked+label::after {
        background: url(../images/ico_minus.svg) no-repeat left center / 100% auto !important;
    }

    .att-content ul li {
        font-weight: 400;
        font-size: 1.6vw;
    }

    .att-content ul li::before {
        display: inline-block;
        width: 1.6vw;
        height: 1.6vw;
        margin-right: 0.4vw;
        border-radius: 50%;
        background: #000;
        content: "";
    }

    .att-content ul li strong {
        color: var(--noboribetsu-color);
        font-weight: 900;
    }

    .about__att-sponsor {
        width: 100%;
        font-weight: 700;
        font-size: 3.73vw;
        line-height: 1.3;
        text-align: center;
    }

    #plan__card.detail {
        padding-top: 12.4vw;
        padding-bottom: 6vw;
    }

    .detail__text {
        font-weight: 700;
        font-size: 5.33vw;
        line-height: 1.3;
        text-align: center;
    }

    .detail__text span {
        display: block;
        font-size: 3.73vw;
    }

    .detail strong.here {
        display: block;
        margin: 3vw 0;
        color: #ba272d;
        font-weight: 900;
        font-size: 5.33vw;
        text-align: center;
    }

    .detail__image ul::before {
        display: block;
        width: 8vw;
        height: 8vw;
        margin: 1vw auto 4vw;
        background: url(../images/bg_plus.svg) no-repeat center center / 100% auto;
        content: "";
    }

    #maincontents .detail__image ul li a:visited,
    #maincontents .detail__image ul li a:link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 1vw 2vw;
        color: #fff;
        font-weight: 900;
        font-size: 5.6vw;
    }

    .detail__image ul li+li {
        margin-top: 2vw;
    }

    .detail__image ul li span {
        display: block;
        width: 100%;
        text-align: center;
    }

    .detail__image ul li a::before {
        display: block;
        width: 8.36vw;
        height: 8.36vw;
        content: "";
    }

    .detail__image ul li a::after {
        display: block;
        width: 2.13vw;
        height: 4vw;
        background: url(../images/ico_arrow.svg) no-repeat left center / 100% auto;
        content: "";
    }

    .detail__image ul li:first-child {
        background: var(--bg-yellow);
    }

    .detail__image ul li:nth-child(2) {
        background: var(--bg-green);
    }

    .detail__image ul li:last-child {
        background: var(--bg-blue);
    }

    .detail__image ul li:first-child a::before {
        background: url(../images/ico_bed.svg) no-repeat left center / 100% auto;
    }

    .detail__image ul li:nth-child(2) a::before {
        background: url(../images/ico_train.svg) no-repeat left center / 100% auto;
    }

    .detail__image ul li:last-child a::before {
        background: url(../images/ico_plane.svg) no-repeat left center / 100% auto;
    }

    .detail__desc {
        margin-top: 5vw;
    }

    .detail__desc dt {
        color: #ba272d;
        font-weight: 700;
        font-size: 4.8vw;
    }

    .detail__desc dd {
        font-weight: 700;
        font-size: 4vw;
    }

    .detail__desc dd strong {
        display: block;
        font-size: 5.33vw;
    }

    .detail__desc-sec {
        display: block;
        margin: 5vw 0;
        font-size: 5.33vw;
        text-align: center;
    }

    .detail__desc-note {
        font-size: 3.73vw;
    }

    .detail__desc-map {
        margin: 2.67vw 0 0;
    }

    #maincontents .detail__desc-map a:visited,
    #maincontents .detail__desc-map a:link {
        display: block;
        position: relative;
        width: 70vw;
        height: 9.6vw;
        padding: 0 0 0 9.6vw;
        background: var(--bg-lightblue);
        color: #fff;
        font-weight: 700;
        font-size: 4.93vw;
        line-height: 9.6vw;
        font-family: "Zen Maru Gothic", sans-serif;
    }

    .detail__desc-map a::before {
        position: absolute;
        top: 50%;
        left: 2vw;
        transform: translateY(-50%);
        width: 4.8vw;
        height: 7.07vw;
        background: url(../images/ico_map.png) no-repeat left center / 100% auto;
        content: "";
    }

    .detail__desc-map a::after {
        position: absolute;
        left: 70vw;
        width: 9vw;
        height: 5vw;
        border: 5vw solid transparent;
        border-left: 5vw solid var(--bg-lightblue);
        box-sizing: border-box;
        content: "";
    }

    #maincontents a.emphasis:visited,
    #maincontents a.emphasis:link {
        display: block;
        margin: 5vw 0 1vw;
        color: var(--bg-lightblue);
        font-size: 5.33vw;
        line-height: 1.2;
        -webkit-text-decoration: underline var(--bg-lightblue);
        text-decoration: underline var(--bg-lightblue);
    }

    /* stay 
  ---------------------------------------------------------------------- */
    #maincontents ul.stayList {
        width: 84.8vw;
        margin: 0 auto;
    }

    .stayList li {
        position: relative;
        z-index: 2;
        width: 100%;
        margin: 0 0 10vw;
        padding-bottom: 6vw;
        border-radius: 2.67vw;
        font-size: 3.87vw;
    }

    .stayList li::before {
        display: block;
        position: absolute;
        top: 1.07vw;
        right: -1.07vw;
        z-index: -1;
        width: 100%;
        height: 100%;
        border: 0.4vw solid #000;
        border-radius: 2.67vw;
        background-image: repeating-linear-gradient(30deg, #000, #000 0.8vw, #bfe4f8 0.8vw, #bfe4f8 1.87vw);
        content: "";
    }

    .stayList li::after {
        display: block;
        position: absolute;
        top: -0.4vw;
        right: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        border: 0.4vw solid #000;
        border-radius: 2.67vw;
        background: #fff;
        content: "";
    }

    .stayList__image {
        display: block;
        position: relative;
        width: calc(100% - 0.4vw);
        margin: 0.4vw 0 0 0.2vw;
        border-bottom: 0.4vw solid #000;
    }

    .stayList__image::before {
        display: block;
        padding-top: 60.38%;
        content: "";
    }

    .stayList__image img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: auto;
        border-radius: 2.1vw 2.1vw 0 0;
        object-fit: cover;
    }

    #maincontents h3.stayList__hotel {
        padding: 5vw 0 0;
        font-weight: 900;
        font-size: 5.6vw;
        text-align: center;
    }

    .stayList li p {
        padding: 2vw 3vw 0;
        line-height: 1.3;
    }

    #maincontents ul.stayList__plan {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 7vw 0 0;
        padding: 0 2.67vw;
    }

    .stayList__plan li {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
        margin: 0;
        padding-bottom: 0;
        border-radius: 0;
    }

    .stayList__plan li+li {
        margin-top: 2vw;
    }

    .stayList__plan li::before,
    .stayList__plan li::after {
        display: none;
    }

    #maincontents .stayList__plan li a:visited,
    #maincontents .stayList__plan li a:link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 1vw 2vw;
        color: #fff;
        font-weight: 900;
        font-size: 5.6vw;
        transition: .3s all ease;
    }

    .stayList__plan li span {
        display: block;
        width: 100%;
        text-align: center;
    }

    .stayList__plan li a::before {
        display: block;
        width: 8.36vw;
        height: 8.36vw;
        content: "";
    }

    .stayList__plan li a::after {
        display: block;
        width: 2.13vw;
        height: 4vw;
        background: url(../images/ico_arrow.svg) no-repeat left center / 100% auto;
        content: "";
    }

    .stayList__plan li:first-child {
        background: var(--bg-yellow);
    }

    .stayList__plan li:nth-child(2) {
        background: var(--bg-green);
    }

    .stayList__plan li:last-child {
        background: var(--bg-blue);
    }

    .stayList__plan li:first-child a::before {
        background: url(../images/ico_bed.svg) no-repeat left center / 100% auto;
    }

    .stayList__plan li:nth-child(2) a::before {
        background: url(../images/ico_train.svg) no-repeat left center / 100% auto;
    }

    .stayList__plan li:last-child a::before {
        background: url(../images/ico_plane.svg) no-repeat left center / 100% auto;
    }
}