@charset "UTF-8";

/* CSS Document */
html {
    scroll-behavior: smooth;
}

html,
div,
body {
    padding: 0;
    margin: 0;
}

.wrapper {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    line-height: 1.5;
}

.container {
    width: min(100% - 2rem, 860px);
    margin-inline: auto;
}

a {
    color: #000;
    transition: 0.7s;
}

a:hover {
    opacity: 0.7;
}

p {
    font-size: 0.95rem;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
}

h2 {
    font-family: 'Shippori Mincho B1', serif;
}

h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1 {
    font-family: 'Shippori Mincho B1', serif;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 2.5rem;
    margin-bottom: 50px;
    text-align: center;
}

h2 {
    font-size: 1.5rem;
    font-weight: normal;
    text-align: left;
}

ul {
    padding: 0;
    margin: 0;
}

ul li {
    list-style: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

figure {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

figure .caption {
    font-size: 11.5px;
    margin-top: 10px;
    width: 90.5%;
    margin-left: 15px;
}

ul li {
    text-wrap: balance;
    word-break: auto-phrase;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.flex_s {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/*
.inview-slide-up {
    opacity: 0;
}

.slide-up {
    opacity: 1;
    transition: .7s;
}
*/
.inview-slide-up {
    opacity: 0;
    transform: translateY(50px);
    /* 初期位置を少し下に設定 */
    transition: opacity 0.7s, transform 0.7s;
    /* アニメーションの滑らかさを設定 */
}

.slide-up {
    opacity: 1;
    transform: translateY(0);
    /* 元の位置に戻す */
}

.sp-only {
    display: block;
}

/*
.pc-only {
    display: none;
}
*/
#header {
    position: relative;
}

#header .sns {
    position: absolute;
    right: 8%;
    top: 3%;
    z-index: 999;
    gap: 10px;
    margin-top: 1em;
}

/*
#header .sns i {
    font-size: 25px;
}*/
#header .sns img {
    width: 25px;
}

.dfx {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
}

.w-50 {
    width: 48%;
}

.w-40 {
    width: 38%;
}

.w-33 {
    width: calc((100% - 20px) / 3);
}

.w-60 {
    width: 58%;
}

.w-70 {
    width: 68%;
}

.w-80 {
    width: 78%;
}

.w-30 {
    width: 28%;
}

.w-100 {
    width: 100%;
}

.w-85 {
    width: 85%;
}

.w-10 {
    width: 10%;
}

/* fade */
.mv {
    width: 100%;
    /*height: 850px;*/
    position: relative;
    z-index: 0;
}

.mv .fade li {
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    animation: fade 20s infinite;
}

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

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    45% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.mv .fade li img {
    width: 100%;
    height: auto;
}

.mv .fade li:nth-child(1) {
    animation-delay: 0s;
}

.mv .fade li:nth-child(2) {
    animation-delay: 5s;
}

.mv .fade li:nth-child(3) {
    animation-delay: 10s;
}

.mv .fade li:nth-child(4) {
    animation-delay: 15s;
}

/*
.mv .fade li:nth-child(5) {
    animation-delay: 0s;
}

.mv .fade li:nth-child(6) {
    animation-delay: 5s;
}

.mv .fade li:nth-child(7) {
    animation-delay: 10s;
}
.mv .fade li:nth-child(8) {
    animation-delay: 15s;
}
*/
.lead {
    margin: 20px auto;
}

.lead .lead_txt p {
    font-family: 'Shippori Mincho B1', serif;
    text-align: center;
}

.lead .star img {
    width: 115px;
    margin: 0 auto;
}

.lead .star p {
    font-family: 'Shippori Mincho B1', serif;
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 0.2em;
    font-weight: normal;
}

.mv::before {
    content: "";
    display: block;
    padding-top: 210%;
}

.mb15 {
    margin-bottom: 15px;
}

.mb40 {
    margin-bottom: 40px;
}


.sp-only {
    display: none;
}

@media (min-width:769px) {
    .pc-only {
        display: block;

    }
}

@media (max-width:768px) {
    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }

    ul li {
        text-wrap: unset;
        word-break: unset;
        font-size: 0.85rem;
    }

    .w-20 {
        width: 22%;
    }
    a {
        word-break: break-all;
    }
    
}

/*

.pc-only {
    display: block;
}*/

.mt150 {
    margin-top: 150px;
}

.mt15 {
    margin-top: 15px;
}

.wrapper {
    box-sizing: border-box;
    width: 100%;
    /*width: min(100% - 2rem, 1280px);*/
    margin: 0 auto;
    margin-inline: auto;
    line-height: 1.2;
}

.mv::before {
    content: "";
    display: block;
    padding-top: 60%;
}

/*
@media screen and (min-width: 768px) {
    .mb150 {
        margin-bottom: 160px;
    }

    .mb60 {
        margin-bottom: 60px;
    }

    .mb15 {
        margin-bottom: 15px;
    }

    .lead {
        max-width: 905px;
    }

    figure .caption {
        width: 100%;
        margin-left: 0;
    }
}
*/
article.spot_all__container {
    background-image: url(../img/bgi_line.webp), url(../img/bgi_line2.webp);
    background-size: 3%;
    background-position: left top, right top;
    background-repeat: repeat-y;
}

.article {
    margin-bottom: 50px;
    position: relative;
}

/*
.article h2 {
    font-size: 1.25rem;
    font-weight: normal;
}
*/
.article h2 {
    font-size: 1.65rem;
}

/*
.article h2 span {
    font-size: 1rem;
}
*/
.article h2.spot_tit {
    text-align: left;
    line-height: 1.2;
    margin-top: 2.5rem;
}

.article .article_right {
    margin-left: 85px;
}

.article .topic img {
    width: 80%;
}

.article .topic p {
    font-size: 0.8rem;
    line-height: 1.2;
}

.article .topic p:nth-child(3) {
    text-align: center;
}

.article .topic a {
    font-size: 0.86rem;
    text-decoration: underline;
}

/*
.star_s img {
    width: 90%;
    margin: 20px auto;
}*/
/*
@media screen and (min-width: 768px) {
    

    .article h2.ml {
        margin-left: 0;
    }
    
}*/

/*
.article .spot_all .spot_in {
    margin-bottom: 10px;
    width: 70%;
}
*/
.article .spot_all .spot_txt {
    position: relative;
}

.article .spot_all .spot_txt .time_l {
    width: 3px;
    height: 80%;
    position: absolute;
    top: 0;
    left: 1rem;
    z-index: 999;
    transform: translateX(-50%);
    padding-top: 35px;
}

.article .spot_all .spot_txt .time_l span {
    display: block;
    width: 100%;
    height: 100%;
    background: #c7b083;
}

.article .spot_all .spot_txt span.time_ball,
.article .spot_all .spot_txt span.time_ball_s,
.article .spot_all .spot_txt span.time_ball_s_e {
    position: relative;
}

.article .spot_all .spot_txt span.time_ball::before,
.article .spot_all .spot_txt span.time_ball_s::before,
.article .spot_all .spot_txt span.time_ball_s_e::before {
    content: '';
    background-size: contain;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: -25.5px;
    z-index: 999;
}

.article .spot_all .spot_txt span.time_ball::before {
    background: url(../img/time_ball.webp) no-repeat;
}

.article .spot_all .spot_txt span.time_ball_s::before {
    background-color: #96cfae;
    width: 25px;
    height: 25px;
    border-radius: 20px;
}

.article .spot_all .spot_txt span.time_ball_s_e::before {
    background-color: #f7d662;
    width: 25px;
    height: 25px;
    border-radius: 20px;

}

.article .spot_all .spot_txt .sch {
    margin-left: 40px;
}

.article .spot_all .spot_txt .sch tr th,
.article .spot_all .spot_txt .sch tr td {
    padding: 7px 0 0;
}

.article .spot_all .spot_txt .sch tr th {
    width: 22%;
    text-align: left;
    vertical-align: top;
}

.article .spot_all .spot_txt .sch tr td {
    width: 62%;
    font-weight: bold;
}

.no-padding {
    padding-top: 0;
}

.article .spot_all .spot_txt .sch tr td#lunch img {
    width: 100px;
    margin: unset;
    padding-top: 25px;
}

.article .spot_all .spot_txt .sch tr td#sweets img {
    width: 85px;
    margin: unset;
    padding-top: 25px;
}

.article .spot_all .spot_txt .sch tr td#present img {
    width: 85px;
    margin: unset;
    padding-top: 25px;
}

.article .spot_all .spot_txt .sch .time_line {
    padding-top: 30px;
    width: 15%;
}

.article .spot_all .spot_txt .sch .time_line img {
    width: 25px;
    padding: 0;
}

.article .spot_all .spot_txt p.kome {
    text-align: right;
}

.article .spot_all .spot_txt p.maru {
    margin: 0.7em 0 0 2.5em;
    font-size: 0.9rem;
}

table {
    font-size: 0.95rem;
    font-family: 'Noto Sans JP', sans-serif;

}

@media screen and (max-width: 767px) {
    p {
        font-size: 0.9rem;
    }

    .article .spot_all.flex {
        flex-direction: column-reverse;
    }

    article.spot_all__container {
        background-image: none;
    }

    .article .article_right {
        margin-left: 9%;
    }

    .column-r {
        flex-direction: column-reverse;
    }

    .mt150 {
        margin-top: 30px;
    }

    table {
        font-size: 0.85rem;
        font-family: 'Noto Sans JP', sans-serif;

    }

    .article h2 {
        font-size: 1.3rem;
    }

    .mv::before {
        padding-top: 160%;
    }

    .article h2.spot_tit1 {
        padding-top: 4rem;
    }

    .article h2.spot_tit1-2 {
        margin-top: 1.5rem;
    }

}

.spot {
    position: relative;
}

.spot .spot_in {
    margin-right: -15px;
}

.spot .spot3-2 {
    margin: 15px 0 10px 0px;
    width: 85%;
}

.spot .spot_in h2 {
    text-align: left;
    line-height: 1.2;
}

.spot .spot_in h2 span {
    font-size: 0.8rem;
}

.article .info_box {
    border: 1px solid #000;
    padding: 0 9px;
}

.article .info_box p {
    font-size: 0.8rem;
}

.left {
    width: 42%;
}

.right {
    width: 55%;
}

/* spot9 */
/*
.spot9-1 {
    margin-bottom: 20px;
    margin-left: -65px;
}
*/
/*
@media screen and (min-width: 768px) {*/
.article .topic {
    background: url(../img/2x/topic_bg_pc.jpg) no-repeat center;
    background-size: contain;
}

.article .topic .topic_in {
    padding: 30px 30px;
    max-width: 400px;
    margin: 0 auto 70px;
}

.article .topic p {
    text-align: center;
}

.star_s img {
    width: 40%;
    margin: 50px auto;
}

.point_walk .green_line {
    height: 342px;
}

.article .spot .spot_in {
    width: 48%;
    margin-top: 0;
}

.article .spot .spot_txt {
    width: 48%;
}

.article .spot_all {
    margin: 50px auto 100px;
    max-width: 920px;
}

/*
    .article .spot_all .spot_in {
        width: 47.5%;
        margin: 0;
    }
    */
/*
    .article .spot_all .spot_txt {
        width: 47.5%;
    }
    */
/*
    .spot9-1 {
        margin: 0;
    }
*/
.data_box .data_box_tit.full {
    width: 100%;
    margin-inline: unset;
}

.gift .data_box .data_box_tit {
    width: 100%;
}

/*
}*/

.tag-time img {
    max-width: 300px;
    margin: 0 auto;
}

.tag-time {
    display: flex;
    align-items: center;
}

.tag-time:before,
.tag-time:after {
    content: "";
    height: 2.5px;
    flex-grow: 1;
    background-color: #f9de85;
}

@media (max-width:767px) {
    .lead .lead_txt p {
        text-align: left;
    }

    .lead .star p {
        font-size: 1.9rem;
    }

    h1 {
        font-size: 1.2rem;
        line-height: 2rem;
    }

    .star_s img {
        width: 70%;
    }

    .w-50,
    .w-40,
    .w-60,
    .w-70,
    .w-30,
    .w-85 {
        width: 100%;
    }

    .article .topic .topic_in {
        padding: 30px 30px;
        max-width: 280px;
        min-height: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 90px;
    }

    .article .topic {
        background: url(../img/2x/topic_bg.jpg) no-repeat center;
        background-size: contain;
    }

    .article .topic .topic_in {
        font-size: 17px;
    }

    .article .spot_all {
        margin: 50px auto 55px;
    }
}

h3.trl {
    margin: 0;
}

.gift .box .gift_right {
    margin-right: -20px;
}

.gift .box .gift_left {
    margin-left: -20px;
}

.data_box {
    margin: 40px 0 0;
}

/* map */
.map_area {
    width: min(100% - 2rem, 1080px);
    margin-inline: auto;
    margin: 60px auto;
}

.map_area a {
    border-radius: 50px;
    border: 2px solid #000;
    background-color: #fff;
    display: block;
    max-width: 270px;
    margin: 0 auto;
    padding: 15px;
    text-align: center;
    font-size: 0.95rem;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    position: relative;
}

.map_area ul {
    margin: 40px auto;
    padding: 0;
}

.map_area ul li {
    position: relative;
    font-size: 1rem;
    line-height: 1.5;
    list-style: none;
    padding-left: 15px;
}

.map_area ul li::before {
    content: '※';
    position: absolute;
    top: 0;
    left: 0;
}

.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    margin-left: 2px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.map_area a .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}

/* book */
.book .book_wrap {
    background: url(../img/2x/book_bg.png);
    background-size: cover;
    margin-bottom: 40px;
    width: 100%;
}

.book .book_wrap_in {
    max-width: 1165px;
    margin: 3% auto 3%;
}

.book .book_area {
    width: 100%;
}

.book .book_area .book_area_in {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    padding: 35px 0;
}

.book .book_area p {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.book .book_area a {
    border-radius: 50px;
    background-color: #000;
    display: block;
    padding: 10px;
    text-align: center;
    font-size: 0.7rem;
    text-decoration: none;
    color: #fff;
}

.book .book_area .book_left {
    width: 100%;
}

.book .book_area .book_right {
    width: 100%;
}

.book .book_area {
    width: 30.157%;
    margin-bottom: 0;
}

.book .book_area .book_area_in {
    max-width: 400px;
    padding: 45px 0;
}

.book .book_area .book_left {
    width: 48%;
}

.book .book_area .book_right {
    width: 48%;
}

@media (max-width:768px) {
    .book .book_area {
        width: 100%;
    }

    .book .book_area .book_area_in {
        max-width: unset;
        flex-direction: column;
    }

    .book .book_area .book_left {
        margin-bottom: 1rem;
    }

    .book .book_area .book_left {
        width: 70%;
    }

    .book .book_area .book_right {
        width: 60%;
    }
}

/* footer */
#footer .adress {
    padding: 20px 40px 50px;
}

#footer .adress a:first-child {
    border-radius: 10px;
    border: 1.8px solid #A38208;
    display: block;
    padding: 20px;
    text-align: center;
    font-size: 1rem;
    text-decoration: none;
    color: #A38208;
    transition: all .6s ease-out;
    /* position: relative; */
}

#footer .adress p:last-child {
    font-size: 0.7rem;
    text-align: center;
}

.footer {
    background: #E1E2E2;
    font-size: 0.7rem;
    text-align: center;
    padding: 30px;
}

#topbtn {
    position: fixed;
    right: 5%;
    bottom: 5%;
    width: 5rem;
    height: 5rem;
    display: none;
    transform: translateY(0);
    transition: 0.7s;
    z-index: 10;
}

#topbtn:hover {
    transform: translateY(-5px);
}

#topbtn a span {
    margin-top: -10px;
}

/*
@media screen and (min-width: 768px) {
    .hikonyan {
        position: absolute;
        top: 24.5rem;
        right: 2rem;
        width: 27%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
*/
/*
    .gift {
        padding: 0 260px 50px;
    }
*/



.map_area ul {
    max-width: 875px;
}

#footer .adress p {
    text-align: center;
}

#footer .adress {
    max-width: 770px;
    margin: 0 auto;
    padding: 70px 40px 70px;
}

@media (max-width:768px) {
    #footer .adress {
        padding: 20px;
    }

    #topbtn {
        right: 10px;
        width: 60px;
        height: 60px;
        bottom: 30px;
    }

}

/*
}
*/
#bg_02 .container {
    background-image: url(../img/spot-line.webp);
    background-position: left top;
    background-repeat: repeat-y;
    background-size: 13px;
}

#spot1,
#spot2,
#spot4,
#spot8,
#spot9,
#spot9-2 {
    margin-bottom: 70px;
}

/*====spotタイトル周り====*/
#bg_02 .spot_tit1,
.spot_tit2,
.spot_tit3,
.spot_tit4,
.spot_tit5,
.spot_tit6,
.spot_tit7,
.spot_tit7-2,
.spot_tit9,
.spot_tit9-2,
.spot_tit10 {
    position: relative;
}

#bg_02 .spot_tit1::before {
    background: url(../img/spot1-deco1.webp) no-repeat;
}

#bg_02 .spot_tit2::before {
    background: url(../img/spot2-deco1.webp) no-repeat;
}

#bg_02 .spot_tit3::before {
    background: url(../img/spot3-deco1.webp) no-repeat;
}

#bg_02 .spot_tit4::before {
    background: url(../img/spot4-deco1.webp) no-repeat;
}

#bg_02 .spot_tit5::before {
    background: url(../img/spot5-deco1.webp) no-repeat;
}

#bg_02 .spot_tit6::before {
    background: url(../img/spot6-deco1.webp) no-repeat;
}

#bg_02 .spot_tit7::before {
    background: url(../img/spot7-deco1.webp) no-repeat;
}

#bg_02 .spot_tit9::before {
    background: url(../img/spot9-deco1.webp) no-repeat;
}

#bg_02 .spot_tit9-2::before {
    background: url(../img/spot9-deco3.webp) no-repeat;
}

#bg_02 .spot_tit10::before {
    background: url(../img/spot10-deco1.webp) no-repeat;
}

#bg_02 .spot_tit1::before,
#bg_02 .spot_tit2::before,
#bg_02 .spot_tit3::before,
#bg_02 .spot_tit5::before,
#bg_02 .spot_tit9::before,
#bg_02 .spot_tit9-2::before,
#bg_02 .spot_tit10::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 15%;
    height: 100px;
    left: -126px;
    top: -100%;
    background-size: contain;
}

#bg_02 .spot_tit6::before,
#bg_02 .spot_tit7::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 100px;
    left: -126px;
    top: -110px;
    background-size: contain;
}

#bg_02 .spot_tit7::before {
    left: -140px;
}

#bg_02 .spot_tit4::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 116px;
    height: 43px;
    left: -3%;
    top: -190%;
    background-size: contain;
}

#bg_02 .spot_tit1::after {
    background: url(../img/spot1-deco2.webp) no-repeat;
    width: 100px;
    height: 100px;
    left: -3%;
    top: -140%;
}

#bg_02 .spot_tit2::after,
#bg_02 .spot_tit3::after,
#bg_02 .spot_tit5::after,
#bg_02 .spot_tit9::after,
#bg_02 .spot_tit9-2::after {
    background: url(../img/sightseeing.webp) no-repeat;
    width: 70px;
    height: 20px;
    left: 0px;
    top: -60%;
    background-size: contain;
}

#bg_02 .spot_tit6::after {
    background: url(../img/sweet.webp) no-repeat;
    width: 93px;
    height: 25px;
    left: 0px;
    top: -60%;
    background-size: contain;
}

#bg_02 .spot_tit7::after,
#bg_02 .spot_tit7-2::after {
    background: url(../img/lunch.webp) no-repeat;
    width: 90px;
    height: 25px;
    left: 0px;
    top: -60%;
    background-size: contain;
}

#bg_02 .spot_tit10::after {
    background: url(../img/spot10-deco2.webp) no-repeat;
    width: 100px;
    height: 100px;
    left: -3%;
    top: -140%;
}

#bg_02 .spot_tit1::after,
#bg_02 .spot_tit2::after,
#bg_02 .spot_tit3::after,
#bg_02 .spot_tit5::after,
#bg_02 .spot_tit6::after,
.spot_tit7::after,
.spot_tit7-2::after,
#bg_02 .spot_tit9::after,
#bg_02 .spot_tit9-2::after,
#bg_02 .spot_tit10::after {
    content: "";
    display: inline-block;
    position: absolute;
    background-size: contain;
}

#bg_02 .spot_tit2,
#bg_02 .spot_tit3,
#bg_02 .spot_tit5,
#bg_02 .spot_tit6,
#bg_02 .spot_tit7,
#bg_02 .spot_tit7-2,
#bg_02 .spot_tit9,
#bg_02 .spot_tit9-2 {
    padding-top: 0.5rem;
}

#bg_02 .spot_in {
    width: 100%;
    margin-top: -100px;
}

@media (max-width:767px) {
    #bg_02 .spot_in {
        margin-top: -50px;
    }

    #bg_02 .container {
        margin-left: 3%;
    }

    #bg_02 .spot_tit1::after {
        width: 30%;
        left: -6%;
        top: 25%;
    }

    #bg_02 .spot_tit2::after,
    #bg_02 .spot_tit3::after,
    #bg_02 .spot_tit5::after,
    #bg_02 .spot_tit9::after,
    #bg_02 .spot_tit9-2::after {
        width: 70px;
        height: 25px;
    }

    .data_box {
        margin-top: 0;
    }

    #bg_02 .spot_tit1::before {
        top: -40%;
        width: 20%;
        height: 100px;
        left: -12%;

    }

    #bg_02 .spot_tit2::before,
    #bg_02 .spot_tit3::before,
    #bg_02 .spot_tit5::before,
    {
    width: 20%;
    height: 100px;
    left: -12%;
    top: -250%;
}

#bg_02 .spot_tit10::before {
    width: 20%;
    height: 100px;
    left: -12%;
    top: -243%;

}

#bg_02 .spot_tit9::before {
    width: 20%;
    height: 100px;
    left: -12%;
    top: -284%;

}

#bg_02 .spot_tit6::before,
#bg_02 .spot_tit7::before {
    width: 20%;
    left: -12%;
}

#bg_02 .spot_tit7::before {
    top: -160px;
    left: -19%;
}

#bg_02 .spot_tit9-2::before {
    width: 30%;
    height: 100px;
    left: -5%;
    top: -180%;

}

#bg_02 .spot_tit2::before {
    top: -290%;
    width: 20%;
    height: 100px;
    left: -12%;
}

#bg_02 .spot_tit3::before,
#bg_02 .spot_tit5::before,
#bg_02 .spot_tit6::before,#bg_02 .spot_tit5::before
{
top: -290%;
width: 20%;
height: 100px;
left: -12%;

}
}

/*=====DATA BOX=====*/
.data_box_tit {
    display: flex;
    align-items: center;
    /* 垂直中心 */
    justify-content: left;
    /* 水平中心 */
    width: 100%;
    position: relative;
}

.data_box_tit:after {
    border-top: 1px solid;
    content: "";
    margin-left: 1em;
    /* 文字の左隣 */
}

.data_box_tit:before {
    content: "";
    width: 0.2em;
    /* 線の長さ */
    height: 0.2em;
    background-color: #000;
    border-radius: 1em;
    right: 0;
    position: absolute;
}

#spot1 .data_box_tit:after,
#spot10 .data_box_tit:after {
    width: 15.5rem;
}

#spot2 .data_box_tit:after,
#spot9-2 .data_box_tit:after,
#chari .data_box_tit:after {
    width: 14rem;
}

#spot4 .data_box_tit:after {
    width: 49.5%;
}

#spot5 .data_box_tit:after,
#spot6 .data_box_tit:after,
#spot9 .data_box_tit:after {
    width: 82%;
}

#spot7 .data_box_tit:after,
#spot7-2 .data_box_tit:after {
    width: 80%;
}

#spot8 .data_box_tit:after,
#gift2 .data_box_tit:after,
#gift3 .data_box_tit:after {
    width: 77%;
}

#gift1 .data_box_tit:after {
    width: 51%;
}

#hotel .data_box_tit:after {
    width: 77%;
}

#spot4 .data_box_tit:before,
#spot9-2 .data_box_tit:before {
    right: 42%;
}

#spot5 .data_box_tit:before,
#spot9 .data_box_tit:before,
#spot10 .data_box_tit:before,
#hotel .data_box_tit::before {
    right: 0;
}

#spot6 .data_box_tit:before,
#gift2 .data_box_tit:before,
#gift3 .data_box_tit:before {
    right: 9.5%;
}

#spot7 .data_box_tit:before {
    right: 7.5%;
}

#spot7-2 .data_box_tit:before {
    right: 5%;
}

#spot8 .data_box_tit:before {
    right: 3.5%;
}

#gift1 .data_box_tit::before {
    right: 35%;
}

#chari .data_box_tit::before {
    right: 44%;
}

#bg_02 .data__img {
    width: 60%;
    margin-left: -11%;
    margin-top: -35px;
    z-index: 1;
}

.data_box_in table td {
    vertical-align: top;
    padding: 0;
    word-break: break-all;
}

.data_box_in table tr .url {
    padding-left: 0.5rem;
}
.url-s a{
    word-break: break-all;
}

.article .spot_all {
    padding-bottom: 1.5rem;
    border-bottom: 2.5px solid #66adcc;
}

/*
.table-td__first {
    width: 6rem;
}*/
.data_box_in .time_s {
    text-indent: -92px;
    padding-left: 92px;
}
#gift1 .data_box_in .time_s {
    text-indent: -84px;
    padding-left: 84px;
}
.spot7-2__data .time_s {
    text-indent: -80px;
    padding-left: 80px;

}

.data_box_in .price_s {
    text-indent: -60px;
    padding-left: 60px;
}

.spot7-2__data .price_s {
    text-indent: -55px;
    padding-left: 55px;
}

.data_box_in .prace_s,
.spot7-2__data .prace_s {
    text-indent: -60px;
    padding-left: 60px;
}

.spot7-2__data .prace_s {
    text-indent: -60px;
    padding-left: 60px;
}

.data_box_in .rest_s,
.spot7-2__data .rest_s {
    text-indent: -75px;
    padding-left: 75px;
}

.data_box_in .url {
    padding-left: 0.5rem;
}

@media (max-width:767px) {

    #spot1 .data_box_tit:after,
    #spot10 .data_box_tit:after,
    #spot9-2 .data_box_tit:after,
    #chari .data_box_tit:after,
    #spot4 .data_box_tit:after,
    #spot5 .data_box_tit:after,
    #spot6 .data_box_tit:after,
    #spot9 .data_box_tit:after,
    #spot7 .data_box_tit:after,
    #spot7-2 .data_box_tit:after,
    #spot8 .data_box_tit:after,
    #gift2 .data_box_tit:after,
    #gift3 .data_box_tit:after,
    #gift1 .data_box_tit:after,
    #hotel .data_box_tit:after {
        width: 100%;
    }

    #spot2 .data_box_tit:after {
        width: 52%;
    }

    #spot4 .data_box_tit:before,
    #spot9-2 .data_box_tit:before,
    #spot5 .data_box_tit:before,
    #spot9 .data_box_tit:before,
    #spot10 .data_box_tit:before,
    #hotel .data_box_tit::before,
    #spot6 .data_box_tit:before,
    #gift2 .data_box_tit:before,
    #gift3 .data_box_tit:before,
    #spot7 .data_box_tit:before,
    #spot7-2 .data_box_tit:before,
    #spot8 .data_box_tit:before,
    #gift1 .data_box_tit::before,
    #chari .data_box_tit::before {
        right: 0;
    }

    #bg_02 .data__img {
        width: 110%;
        margin-top: 1.5em;
    }

    .data_box_tit {
        font-size: 0.9rem;
    }

    /*
    .table-td__first {
        width: 5.5rem;
    }*/
    .data_box_in .rest_s,
.spot7-2__data .rest_s {
    text-indent: -68px;
    padding-left: 68px;
}
.data_box_in .time_s {
    text-indent: -82px;
    padding-left: 82px;
}
.data_box_in .price_s {
    text-indent: -55px;
    padding-left: 55px;
}
.data_box_in .prace_s, .spot7-2__data .prace_s {
    text-indent: -55px;
    padding-left: 55px;
}
}

/*=====spot1=====*/
#spot1 {
    position: relative;
}

#spot1-2 {
    position: absolute;
    top: -10%;
    left: -15%;
    width: 15px;
}

#bg_02 .spot_tit1-2::before {
    background: url(../img/spot1-deco3.webp) no-repeat;
    content: "";
    display: inline-block;
    position: absolute;
    width: 170px;
    height: 40px;
    left: 30%;
    top: 0;
    background-size: contain;
}

@media (max-width:768px) {
    #spot1 {
        margin-bottom: 100px;
    }

    #bg_02 .spot_tit1-2::before {
        left: 61%;
        width: 39%;
        height: 10%;
    }
}

/*=====spot2=====*/
#spot2-2 {
    position: absolute;
    top: 0;
    right: -7.5rem;
    width: 55%;
    transform: translate(-50%, -50%);
    margin: 0;
}

#spot2-3 {
    position: absolute;
    top: 0;
    right: -10%;
    width: 20%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.spot2-left {
    flex-direction: column;
}

#spot2-4 {
    position: absolute;
    top: 30%;
    left: -15%;
    width: 15px;
}

@media (max-width:767px) {
    #spot2-3 {
        width: 35%;
    }

    #spot2-2 {
        top: 36%;
        left: -8%;
        width: 85%;
        transform: unset;
    }

    #spot2 {
        margin-bottom: 90px;
    }
}

/*=====spot3=====*/
.spot3-1 {
    margin-top: -15%;
}

.spot3__inner {
    position: relative;
}

.spot3__inner .spot3-2 {
    position: absolute;
    right: -33%;
    top: -4rem;
    width: 47%;
    z-index: 1;
}

.spot3__inner .spot3-3 {
    margin-top: 1rem;
    margin-left: -3rem;
}

.spot3-3 img {
    position: relative;
}

.spot3-3__txt {
    color: #fff;
    position: absolute;
    left: -3%;
    top: 4rem;
    line-height: 1.4;
}

.spot3-3__txt small {
    font-size: 13px;
}

.spot3-3__txt a {
    color: #fff;
    margin-left: 1rem;
}

#bg_hct {
    margin-top: 3rem;
}

@media (max-width:767px) {
    .spot3__inner .spot3-3 {
        margin-top: 3em;
        margin-left: 0;
    }

    .spot3__inner .spot3-2 {
        right: 0;
        top: -3rem;
        z-index: -1;
    }

    .spot3-1 {
        margin-top: unset;
    }

    .spot3-3__txt {
        font-size: 77%;
        left: 7%;
        line-height: 1.3;
        top: 4.6rem;
    }

    .spot3-3__txt small {
        font-size: 10px;
    }
}

/*=====spot4=====*/
.data__container_spot4 {
    width: 100%;
    position: relative;
}

.data__img_spot4 {
    position: absolute;
    z-index: 1;
    width: 40%;
    right: 0;
    top: -70%;
}

@media (max-width:767px) {
    .data__img_spot4 {
        position: unset;
        width: 100%;
    }

    .data__container_spot4 {
        display: flex;
        flex-direction: column-reverse;
    }

    #spot4 {
        margin-bottom: 100px;
    }
}

/*=====spot5=====*/
.spot5-right {
    margin-top: -15%;
}

#spot5-2 {
    position: absolute;
    width: 200px;
    right: 50%;
    top: -15%;
}

#spot5 {
    position: relative;
}

#spot5-3 {
    position: absolute;
    top: 30%;
    left: -15%;
    width: 15px;
}

@media (max-width:767px) {
    #spot5-2 {
        width: 47%;
        left: 53%;
        top: -53px;
        right: unset;
        max-width: 180px;
    }

    .spot5-right {
        margin-top: 1.5rem;
    }

    #spot5 {
        margin-bottom: 40px;
    }

    #spot1-2,
    #spot2-4,
    #spot7-5,
    #spot8-2,
    #spot9-4,
    #spot10-3 {
        height: 84px;
    }

    #spot5-3 {
        height: 108px;
    }
}

/*=====spot6=====*/
#spot6 .data__container {
    position: relative;
    margin-bottom: 50px;
}

#spot6 #spot6-2 {
    position: absolute;
    right: 0;
    bottom: 75%;
    width: 9%;
}

#spot6 #spot6-3 {
    position: relative;
    margin: 50px 0;
}

#spot6-4 {
    position: absolute;
    top: -5%;
    left: -15%;
    width: 60px;
    z-index: 1;
}

#spot6-5 {
    position: absolute;
    top: 0;
    right: 5%;
    width: 20%;
}

#spot6 #spot6-3 p {
    margin-top: 100px;
}

@media (max-width:767px) {
    .tag-top img {
        height: 60px;
        overflow: hidden;
        width: 100%;
        object-fit: cover;
    }

    .tag-bottom img {
        height: 10px;
        overflow: hidden;
        width: 100%;
        object-fit: cover;
    }

    #spot6 #spot6-2 {
        width: 60px;
        bottom: 90%;
    }

    #spot6-5 {
        top: -60px;
        right: 0;
        width: 40%;
    }

    #spot6 #spot6-3 {
        margin-top: 70px;
    }

    #spot6 #spot6-3 p {
        margin-top: unset;
    }

    #spot6-4 {
        top: -22%;
        left: -12%;
        width: 15%;
    }
}

/*=====spot7=====*/
#lunch .tag {
    width: 100%;
    position: relative;
}

#lunch .tag::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/spot7-deco2.webp) no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
}

#spot7 {
    background-color: #fffbda;
    padding: 60px 15px 30px;
    margin-top: -10%;
}

#spot7 .spot__img {
    justify-content: center;
}

#spot7 .spot__img p {
    text-align: center;
    line-height: 1.1;
}

#spot7 .data__container.dfx,
#spot7-2 .data__container.dfx {
    gap: 0;
}

#spot7 .w-40 {
    width: 42%;
    margin-top: -13%;
}

#spot7-2 {
    background-color: #fffbda;
    padding: 10px 15px 30px;
    margin-top: 20px;
    position: relative;
}

#spot7-2 .spot7-2__data {
    background: url(../img/spot7-deco4.webp) no-repeat;
    background-size: cover;
    width: calc(52% - 2rem);
    padding: 1rem;
}

#spot7-2 .spot7-2__data ul {
    width: 85%;
    margin-left: auto;

}

#spot7-2 .spot7-2__data ul li {
    font-size: 0.85rem;

}

/*
#spot7-2 .spot7-2__data table {
    font-size: 0.74rem;
    width: 85%;
    margin-left: auto;
}
*/
#spot7-2 .spot7-2__data p {
    color: #cbae62;
    font-weight: bold;
    margin-left: 60px;
    font-size: 14px;
}

#spot7-2 .spot__txt,
#spot7-2 .spot__img {
    position: relative;
}

#spot7-3 {
    position: absolute;
    right: -20%;
    bottom: 60px;
    width: 38%;
}

#spot7-4 {
    position: absolute;
    right: 0;
    bottom: 15px;
    width: 67%;
}

#spot7-5 {
    position: absolute;
    bottom: 10%;
    left: -15%;
    width: 15px;
}

#spot7-2 .spot__img .w-80 {
    margin-left: 0;
    margin-top: 1em;
}

@media (max-width:767px) {
    #lunch .tag-top img {
        height: 67px;
    }

    #lunch {
        margin-top: 5rem
    }

    #lunch .tag::before {
        width: 80px;
        height: 75px;
        top: -100%;
        left: 7%;
    }

    #spot7 {
        padding-top: 40px;
    }

    #spot7 .w-40 {
        width: 100%;
        margin-top: 1em;
    }

    #spot7-2 .spot__img .w-80 {
        width: 100%;
        margin-top: unset;
    }

    #spot7-4 {
        position: unset;
        width: 85%;
        margin-top: 1em;
        margin-right: 0;
        margin-left: auto;
    }

    #spot7-3 {
        width: 30%;
        right: 0;
        bottom: 45px;
    }

    #spot7-2 .spot7-2__data {
        width: 89%;
        margin-top: 1em;
        background: url(../img/spot7-deco4-sp.webp) no-repeat;
        background-size: cover;
    }

    #spot7-2 .spot7-2__data .table-td__first {
        width: 4rem;
    }

    #spot7-2 .spot7-2__data table {
        font-size: 0.62rem;
    }

    #spot7-2 .spot7-2__data p {
        margin-left: 46px;
        font-size: 15px;
    }

    #spot7-2 .spot7-2__data ul li {
        font-size: 0.8rem;
    }
}

/*=====spot8=====*/
#spot8 {
    position: relative;
}

#spot8-2 {
    position: absolute;
    bottom: 0;
    left: -15%;
    width: 15px;
}

@media (max-width:767px) {

    #spot8 .w-40,
    #spot8 .w-60 {
        display: contents;
    }

    #spot8 .data__txt {
        order: 5;
    }

    #spot8 .w-60 img {
        margin-top: -1.5em;
    }

    #spot8 {
        margin-bottom: 90px;
    }
}

/*=====spot9=====*/
#spot9 .spot9-p__inner {
    border: 1px solid #000;
    padding: 0.5em 0;
    margin-top: 1rem;
}

#spot9 .spot9-p__inner p {
    font-size: 0.95rem;
    text-align: center;
}

#spot9 .table-td__first,
#spot10 .table-td__first {
    width: 4rem;
}

#spot9 .spot,
#spot9-2 {
    position: relative;
}

#spot9-1 {
    position: absolute;
    right: 0;
    bottom: -10%;
    width: 50px;
}

#spot9-2 .w-100 {
    margin-bottom: 1rem;
}

#spot9-2 .data_box_tit,
#spot10 .data_box_tit {
    margin-top: 0;
    z-index: -4;
}

#spot9-2 .w-85 {
    margin-left: auto;
}

#spot9-3 {
    position: absolute;
    right: 0%;
    bottom: -20%;
    z-index: 2;
    width: 46%;
}

#spot9-4 {
    position: absolute;
    bottom: 0;
    left: -15%;
    width: 15px;
}

@media (max-width:767px) {
    #spot9-2 .w-50 {
        width: 50%;
        margin-right: auto;
    }

    #spot9-2 .w-60 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #spot9-3 {
        position: unset;
        width: 48%;
        margin-top: -15%;
    }

    #spot9-2 {
        margin-bottom: 125px;
    }

    #spot9 .spot9-p__inner p {
        font-size: 0.85rem;
    }
}

/*=====spot10=====*/
#spot10 {
    position: relative;
}

#spot10-2 {
    position: absolute;
    top: -8%;
    right: 0;
    width: 58%;
}

#spot10-3 {
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 15px;
}

#spot10 .data_box_in p {
    margin-left: 1em;
}

.spot_tit10-1 {
    text-align: center;
    width: 87%;
    margin-left: auto;
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
}

@media (max-width:768px) {
    #spot10-2 {
        top: -23px;
    }

    #bg_02 .spot_tit10::after {
        height: 40px;
        top: -90%;
    }

    .star_s img {
        margin: 30px auto;
    }

    .spot_tit10-1 {
        flex: 1;
    }

    #spot10-3,
    #spot9-4 {
        left: -10%;
        background-color: #fff;
        height: 177px;
        bottom: 2%;
    }

}

/*=====gift=====*/
.gift-border {
    background: url(../img/gift_border.webp) repeat-x;
    background-size: 15px;
    background-position: 0 bottom;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.gift .gift_lead {
    width: 50%;
    position: relative;
    margin: 0 auto 70px;
}

.gift .gift_lead::after {
    position: absolute;
    content: "";
    display: inline-block;
    background: url(../img/gift_lead_deco.webp) no-repeat;
    right: -25%;
    bottom: 0;
    background-size: contain;
    width: 80px;
    height: 80px;
}

.gift {
    background: url(../img/gift_bgi.jpg) repeat;
    background-size: 600px;
    padding-bottom: 70px;
    margin-bottom: 70px;
}

.triangle {
    border-right: 50vw solid #fff;
    border-bottom: 100px solid transparent;
    border-left: 50vw solid #fff;
    border-bottom: 100px solid transparent;
}

.gift__ttl {
    width: 80%;
    margin: -1rem auto 1rem;
}

.gift .box .box_right {
    position: relative;
}

.gift .box .box_right #fuki_og {
    position: absolute;
    top: 55%;
    right: 83%;
    width: 38%;
    transform: translate(-50%, -50%);
    margin: 0;
}

@media (max-width:768px) {
    .column-reverse {
        flex-direction: column-reverse;
    }

    #gift1-1 {
        display: flex;
        flex-direction: row;
    }

    #gift1-1 .w-40 {
        width: 35%
    }

    #gift1-1 .w-60 {
        width: 58%
    }

    .gift .box .box_right #fuki_og {
        right: 42%;
        width: 41%;
        top: 115%;
    }

    #gift2 .data_box {
        margin-top: 2px;
    }

    .display-contents {
        display: contents;
    }

    #gift2 .data_box {
        order: 3;
    }

    .gift {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    .triangle {
        border-bottom: 45px solid transparent;
    }

    #gift1 .data_box_in .time_s {
        text-indent: -75px;
        padding-left: 75px;
    }

    .gift .gift_lead::after {
        right: -36%;
        width: 50px;
        height: 50px;
    }
}

/*=====hotel=====*/
#hotel .gift_lead {
    width: 90%;
    margin: 0 auto 30px;
}

#hotel .data_box_in table .table-td__first {
    width: 3.5rem;
}

.hotel {
    background: url(../img/hotel_bgi.png) repeat;
    background-size: 600px;
    padding-bottom: 70px;
    margin-bottom: 70px;
}

.hotel-border {
    background: url(../img/hotel_border.webp) repeat-x;
    background-size: 15px;
    background-position: 0 bottom;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.hotel .dfx.hotel__img {
    gap: 10px;
}

.hotel__ttl {
    width: 80%;
    margin: 0 auto 1rem;
}

#hotel .data_box_tit {
    margin-top: 0;
}

@media (max-width:768px) {
    #hotel .gift_lead {
        width: 100%;
    }

    .hotel__ttl {
        order: 1;
    }

    .hotel-border {
        padding-bottom: 40px;
        margin-bottom: 30px;
    }
}

/*=====chari=====*/
.chari {
    background: url(../img/chari_bgi.jpg) repeat;
    background-size: 600px;
    padding-bottom: 70px;
    margin-bottom: 70px;
    padding-top: 40px;
    position: relative;
}

#chari .container::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/chari-deco1.webp) no-repeat;
    background-size: contain;
    width: 350px;
    height: 100px;
    top: -8%;
    left: 32%;
}

.chari__ttl {
    width: 58%;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

#chari1 {
    margin-bottom: 50px;
}

#chari2 small {
    color: #ed1e79;
}

.chari2__note {
    background: #fff;
    padding: 0.5em;
    border: 1px solid #bc9d4b;
    width: 73%;
    margin: 1em auto 0;
}

.chari2__note p {
    font-size: 13px;
}

@media (max-width:767px) {
    #chari .container::before {
        width: 250px;
        left: 50%;
        transform: translateX(-50%);
        top: -3%;
    }

    #spot1-2,
    #spot2-4,
    #spot5-3,
    #spot7-5,
    #spot8-2 {
        left: -10%;
        width: 13px;
        background: #fff;
        top: 90%;
    }

    /*
    }
    #spot2-4,
    #spot5-3,
    #spot7-5,
    #spot8-2 {
        left: -10%;
        width: 13px;
        bottom: 5%;
        background: #fff;
    }*/
    .chari__ttl {
        width: 100%;
    }

    .chari {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }

    #spot9-4 {
        left: -10%;
        width: 13px;
        bottom: 16%;
        background: #fff;
        height: 166px;
    }

    #spot10-3 {
        left: -10%;
        width: 13px;
        bottom: -38%;
        background: #fff;
        height: 156px;
    }
}