.container, p {
	font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    font-weight: 500;
}
p.small, p>.small {
    font-size: 12px;
}
p.big, p>.big {
    font-size: 16px;
}
.wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
.container img {
    vertical-align: top;
}
.container a:hover {
    text-decoration: none;
}
a.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 30px;
    box-sizing: border-box;
    padding-top: 7px;
    padding-bottom: 7px;
    height: auto;
}
a.yellow {
    background-color: #E8FF69;
    border: 1px solid #261857;
    color: #261857;
}
.link_out {
    position: relative;
}
.link_out::after {
    content: '';
    display: inline-block;
    background: url(/images/kankou/nagarekawa/icon_link_w.svg) no-repeat center /auto;
    width: 10px;
    height: 10px;
    margin-left: 8px;
    vertical-align: -2px;
}
#menu_bar.fixed .navbar li .min {
    display: none;
}
.text-center {
    text-align: center;
}
* {
    -webkit-font-smoothing: antialiased;
}
@media screen and (max-width: 1120px) {
    img {
        max-width: 100%;
        height: auto;
    }
    .wrap {
        width: 92%;
    }
}
@media screen and (min-width: 960px) {
    body {
        min-width: auto;
    }
    
}
@media screen and (max-width: 599px) {
    body.fixed {
        position: fixed!important;
    }
    p.big, p>.big {
        font-size: 14px;
    }
}

/* menu */
.navbar {
    height: 92px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}
.navbar li {
    width: 110px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}
.navbar li a {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.navbar li svg {
    transition: transform .2s ease;
}
.navbar li a:hover {
    opacity: 1;
    color: #5BAF9B;
}
.navbar li a:hover svg {
    fill: #5BAF9B;
    transform: translateY(-5px);
}
.navbar li span {
    display: block;
}
.navbar li span.highlights {
    margin-bottom: 0;
}
#menu_bar.fixed {
    position: fixed;
    z-index: 99;
    top: 0;
    background: #fff;
    width: 100%;
    transition: all .3s ease-in-out;
    border-bottom: 1px solid #D1C9AE;
}
#menu_bar.fixed .navbar {
    height: 50px;
    gap: 0;
}
#menu_bar.fixed .navbar li {
    width: auto;
    padding: 0 40px;
    flex-grow: 1;
}
#menu_bar.fixed .navbar li:not(:last-child) {
    border-right: 1px solid #F6F5F0;
}
#menu_bar.fixed .navbar li a {
    flex-direction: row;
    justify-content: center;
    color: #333;
}
#menu_bar.fixed .navbar li span {
    margin-bottom: 0;
    margin-right: 8px;
}
#menu_bar.fixed .navbar li a:hover {
    color: #5BAF9B;
}
#menu_bar.fixed .navbar li a:hover svg {
    transform: none;
}
#menu_bar.fixed .navbar li svg {vertical-align: bottom;}
#menu_bar.fixed .navbar li:nth-child(1) svg {width: 15px; height: 22px;}
#menu_bar.fixed .navbar li:nth-child(2) svg {width: 18px; height: 17px;}
#menu_bar.fixed .navbar li:nth-child(3) svg {width: 17px; height: 15px;}
#menu_bar.fixed .navbar li:nth-child(4) svg {width: 17px; height: 17px;}
#menu_bar.fixed .navbar li:nth-child(5) svg {width: 20px; height: 16px;}
#menu_bar.fixed .navbar li:nth-child(6) svg {width: 20px; height: 16px;}

/* menubarが固定になった時 */
#menu_bar.fixed .navbar  span br {
    display: none;
}
@media screen and (max-width: 1120px) {
    #menu_bar.fixed .navbar li {
        padding: 0 3vmin;
    }
}
@media screen and (max-width: 900px) {
    .navbar {
        gap: 2vmin;
    }
    #menu_bar.fixed .navbar li {
        padding: 0 1vmin;
    }
}
@media screen and (max-width: 599px) {
    #menu_bar .wrap {
        width: 100%!important;
    }
    .navbar {
        flex-wrap: wrap;
        height: auto;
        gap: 0;
    }
    .navbar li {
        width: 50%;
        box-sizing: border-box;
    }
    .navbar li a {
        height: 80px;
        justify-content: center;
        text-align: center;
    }
    .navbar li a:hover svg {
        transform: none;
    }
    .navbar li:nth-child(odd) {
        border-right: 1px solid #E5E1D0;
    }
    .navbar li:nth-child(1),
    .navbar li:nth-child(2) {
        border-bottom: 1px solid #E5E1D0;
    }
    #menu_bar.fixed {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
    #menu_bar.fixed .navbar {
        flex-wrap: nowrap;
        justify-content: flex-start
    }
    #menu_bar.fixed .navbar li {
        padding: 0 15px;
    }
    #menu_bar.fixed .navbar li a {
        height: 50px;
    }
}

/* -------------------------------------------
    FV
------------------------------------------- */
.fv {
    background-color: #D7F4ED;
    padding-top: 108px;
    padding-bottom: 80px;
    position: relative;
    background-image: url(/images/kankou/mimasaka-hot-springs/fv_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    width: 100%;
}
.fv .photos {
    position: absolute;
    z-index: 1;
}
.fv .top {
    top: -29%;
    right: 0;
    width: 67.28%;
    max-width: 919px;
}
.fv .left {
    top: 230px;
    left: 0;
    width: 43.34%;
    max-width: 592px;
}
.fv .right {
    top: 367px;
    right: 0;
    width: 42.09%;
    max-width: 575px;
}
.fv .mainttl {
    width: 630px;
    margin-bottom: 222px;
    position: relative;
    z-index: 5;
}
.fv .mainttl h1 img {
    filter: drop-shadow(0px 0px 10px rgba(33, 163, 132, 1));
}
.fv .on_tb {
    display: none;
}
.fv h1 {
    font-family: Kaisei Tokumin;
    font-weight: 700;
    font-size: 100px;
    line-height: 127px;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0px 0px 10px rgba(33, 163, 132, 1);
}
.fv h1 .onsen {
    font-family: Kaisei Tokumin;
    font-size: 60px;
    font-weight: 700;
    color: #FFF0D4;
    text-shadow: 0px 0px 10px rgba(33, 163, 132, 1);
    position: relative;
}
.fv h1 .onsen::before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-image: url(/images/kankou/mimasaka-hot-springs/ttl_line_w.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 13px;
    filter: drop-shadow(0 1px 5px rgba(33, 163, 132, 1));
}
.fv h1 .onsen::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-image: url(/images/kankou/mimasaka-hot-springs/ttl_line_w.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 3px;
    filter: drop-shadow(0 1px 5px rgba(33, 163, 132, 1));
}
.fv h1 .dot {
    font-size: 60px;
    color: #fff;
    text-shadow: 0px 0px 10px rgba(33, 163, 132, 1);
}
.fv .mainttl .sub {
    font-family: Kaisei Tokumin;
    font-weight: 500;
    font-size: 35px;
    line-height: 34px;
    color: #5BAF9B;
    background-image: url(/images/kankou/mimasaka-hot-springs/ttl-sub_bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 578px;
    height: 102px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.fv .lead {
    max-width: 610px;
    margin: auto;
    position: relative;
    z-index: 5;
}
.fv .lead .copy {
    font-family: Kaisei Tokumin;
    font-weight: 700;
    font-size: 26px;
    line-height: 26px;
    color: #5BAF9B;
    margin-bottom: 30px;
    text-align: center;
}
.fv .lead .text {
    font-family: Noto Sans JP;
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: #5BAF9B;
}
@media screen and (max-width: 1120px) {
    .fv .top {
        top: -20%;
    }
    .fv .mainttl {
        margin-bottom: 15%;
    }
}
@media screen and (max-width: 959px) {
    .fv .top {
        top: -100px;
    }
    .fv h1 {
        font-size: 90px;
    }
    .fv h1 .onsen {
        font-size: 51px;
    }
    .fv .mainttl .sub {
        max-width: 578px;
        width: 91.75%;
        font-size: clamp(26px,2.6vw,35px);
    }
}
@media screen and (min-width: 600px) and (max-width: 959px) {
    .fv .mainttl {
        width: 80%;
        max-width: 630px;
        margin-bottom: 7%;
    }
    .fv .on_tb {
        display: block;
    }
    .fv .lead {
        width: 80%;
    }
    .fv .lead .copy {
        line-height: 34px;
    }
}
@media screen and (max-width: 599px) {
    .fv {
        position: relative;
        background-image: none;
        background-color: #D7F4ED;
        padding: 0 0 60px;
        display: block;
        background-image: none;
        width: 100%;
    }

    /* pcの要素を非表示 */
    .fv .top,
    .fv .right,
    .fv .left {
        display: none;
    }

    .fv_slider {
        height: 100%;
        width: auto;
        max-width: 100%;
        position: relative;
        padding: 0;
    }
    .fv_slider .splide__list img {
        height: 600px;
        width: 100%;
        object-fit: cover;
    }
    .fv_slider .middle {
        position: absolute;
        bottom: -64px;
        left: 0;
        z-index: 15;
    }
    .fv_slider .wave {
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 10;
        padding: 0;
    }
    .fv_slider .wave img {
        width: 100%;
        max-width: 100%;
        object-fit: cover;
        margin: 0;
        padding: 0;
    }

    /* あしらい */
    .fv .top_left {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
    }
    .fv .top_right {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
    }
    .fv .bottom {
        position: absolute;
        bottom: 0;
        right: 0;
    }
    
    .fv .mainttl {
        position: absolute;
        top: 144px;
        margin-bottom: 0;
        width: 100%;
        max-width: unset;
    }
    .fv h1 {
        font-size: 51px;
        line-height: 62px;
        text-shadow: 0px 0px 7px rgba(33, 163, 132, 1);
        max-width: 350px;
        width: 94%;
        margin: 0 auto 27px;
        font-weight: 800;
    }
    .fv h1 .onsen {
        font-size: 36px;
    }
    .fv h1 .onsen::before {
        top: 7px;
    }
    .fv h1 .onsen::after {
        bottom: -1px;
    }
    .fv h1 .dot {
        font-size: 36px;
    }
    .fv .mainttl .sub {
        font-size: 20px;
        line-height: 20px;
        background-image: url(/images/kankou/mimasaka-hot-springs/ttl-sub_bg.svg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 316px;
        height: 53px;
        margin: 0 auto;
    }

    /* リード */
    .fv .lead {
        position: relative;
        padding-top: 34px;
        z-index: 20;
    }
    .fv .lead p {
        max-width: 360px;
        margin: auto;
        font-weight: 500;
        font-size: 14px;
        line-height: 28px;
        color: #5BAF9B;
    }
    .fv .lead .copy {
        font-size: 20px;
        line-height: 27px;
        margin-bottom: 10px;
    }
}

/* -------------------------------------------
    美作三湯　案内人
------------------------------------------- */
.guide {
    padding: 60px 0;
    background-color: #FFFAF1;
}
.guide .wrap {
    background-color: #fff;
    border: 1px solid #D1C9AE;
    padding-top: 40px;
    padding-bottom: 47px;
    border-radius: 50px;
}
.guide .ttl {
    margin-bottom: 30px;
}
.guide .lead {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #5BAF9B;
    margin-bottom: 35px;
}
.guide__wrap {
    width: 90.25%;
    max-width: 1083px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    margin: auto;
}
.guide__wrap-item {
    max-width: 515px;
    display: flex;
    gap: 30px;
    align-items: flex-end;
}
.guide__wrap-item img {
    width: 100%;
    max-width: 170px;
    height: auto;
}
.guide__wrap-item .profile {
    max-width: 320px;
}
.guide__wrap-item .bubble {
    background-color: #5BAF9B;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    padding: 10px 15px;
    max-width: 303px;
    position: relative;
}
.guide__wrap-item .bubble::before {
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 20px solid #5BAF9B;
    border-left: 0;
    top: 13px;
    left: -15px;
}
.guide__wrap-item .name {
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    color: #5BAF9B;
    margin: 20px 0;
}
.guide__wrap-item .comment {
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
}
@media screen and (min-width: 600px) and (max-width: 959px) {
    .guide__wrap {
        flex-direction: column;
        align-items: center;
    }
    .guide .lead {
        padding: 0px 21px;
        line-height: 20px;
    }
}
@media screen and (max-width: 599px) {
    .guide {
        padding: 40px 0;
    }
    .guide .ttl {
        margin-bottom: 15px;
    }
    .guide .lead {
        font-size: 13px;
        width: 92%;
        max-width: 360px;
        margin: 0 auto 20px;
        line-height: 20px;
    }
    .guide .guide__wrap {
        background-color: #fff;
        border: 1px solid #D1C9AE;
        border-radius: 30px;
        width: 92%;
        max-width: 360px;
        box-sizing: border-box;
        padding: 20px 14px;
        flex-direction: column;
        gap: 30px 0;
    }
    .guide .guide__wrap-item {
        display: block;
        max-width: unset;
    }
    .guide__wrap-item .bubble {
        font-family: Noto Sans JP;
        font-weight: 500;
        font-size: 14px;
        line-height: 14px;
        text-align: center;
        max-width: unset;
        padding: 9px 5px 9px 10px;
        display: inline-block;
        margin-bottom: 11px;
    }
    .guide__wrap-item .bubble::before {
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-top: 20px solid #5baf9b;
        border-bottom: 0;
        top: unset;
        bottom: -10px;
        left: 56px;
    }
    .guide__wrap-item .guideInfo {
        display: flex;
        gap: 10px;
    }
    .guide__wrap-item .guideInfo .img {
        flex-shrink: 0;
        width: 125px;
    }
    .guide__wrap-item .guideInfo .data {
        width: calc(100% - 125px);
    }
    .guide__wrap-item .guideInfo .name {
        font-family: Noto Sans JP;
        font-weight: 500;
        font-size: 22px;
        line-height: 22px; 
        color: #5BAF9B;
        margin-bottom: 10px;
    }
    .guide__wrap-item .guideInfo:first-child .name {
        margin-top: 9px;
    }
    .guide__wrap-item .guideInfo:last-child .name {
        margin-top: 4px;
    }
    .guide__wrap-item .guideInfo .comment {
        font-family: Noto Sans JP;
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 0%;
        color: #333;
    }

}
/* -------------------------------------------
    美作三湯の特徴＆楽しみ方
------------------------------------------- */
.features {
    background-color: #5BAF9B;
    padding-top: 60px;
    position: relative;
}
.features::before {
    content: "";
    background-image: url(/images/kankou/mimasaka-hot-springs/features_top.svg);
    display: block;
    width: 452px;
    height: 286px;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}
.features .navi {
    position: relative;
    width: 100%;
}
.features .navi .bottom {
    position: absolute;
    bottom: -125px;
    left: 0;
    width: 100%;
    height: 405px;
    background-color: #5BAF9B;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    background-image: url(/images/kankou/mimasaka-hot-springs/features_bottom.svg);
    background-size: cover;
    background-repeat: no-repeat;
}
.features .ttl {
    margin-bottom: 10px;
}
.features .ttl .sub {
    display: block;
    margin-bottom: 15px;
    font-family: Noto Sans JP;
    font-size: 24px;
    line-height: 24px;
    color: #fff;
}
.onsenNav {
	margin: 0 auto;
	max-width: 1020px;
	width: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 20px 90px;
    position: relative;
    z-index: 3;
}
.onsenNav-item {
	text-align: center;
	max-width: 280px;
}
.onsenNav-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 1 !important;
}
.onsenNav-item .navimg-box {
	position: relative;
	width: 290px;
	height: 318px;
	overflow: hidden;
}
.onsenNav-item .navimg-box img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
    filter: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, filter 0.3s ease-in-out;
	will-change: opacity, transform, filter;
}
/* 初期状態：通常画像は表示 */
.onsenNav-item .navimg-box .img {
	opacity: 1;
	z-index: 2;
}
/* 初期状態：hover画像は非表示 */
.onsenNav-item .navimg-box .img_hover {
    opacity: 0;
	transform: translateY(0);
    image-rendering: crisp-edges;
}
/* hover時：hover画像が上に出て浮く */
.onsenNav-item a:hover .img_hover {
    opacity: 1;
	transform: translateY(-10px);
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
}
/* hover時：通常画像はフェードアウト */
.onsenNav-item a:hover .img {
	opacity: 0;
}
.onsenNav-item .name {
    font-family: Kaisei Tokumin;
    font-weight: 500;
    font-size: 35px;
    line-height: 34px;
    display: inline-block;
    margin-top: 20px;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1.5px;
}
/* 湯原温泉 */
.onsenNav-item a:hover .name.yubara {
    text-decoration-color: #D7F4ED;
}
.onsenNav-item .name.yubara {
    color: #D7F4ED;
}
/* 湯郷温泉 */
.onsenNav-item a:hover .name.yunogou {   
    text-decoration-color: #F4E7D7;
}
.onsenNav-item .name.yunogou {
    color: #F4E7D7;
}
/* 奥津温泉 */
.onsenNav-item a:hover .name.okutsu {
    text-decoration-color: #EDF4D7;
}
.onsenNav-item .name.okutsu {
    
    color: #EDF4D7;
}
@media screen and (min-width: 600px) and (max-width: 959px) {
    .features .ttl {
        width: 92%;
        margin: auto;
    }
}
/* tb */
@media screen and (max-width: 1300px) {
    .features .navi .bottom {
        background-position: right;
    }
}
/* 特徴＆楽しみ方 sp */
@media screen and (max-width: 599px) {
    .features {
        padding-top: 40px;
    }
    .features .ttl {
        margin-bottom: 35px;
    }
    .features .ttl .sub {
        margin-bottom: 16px;
        font-size: 18px;
        line-height: 18px;
        color: #fff;
    }
    .features .navi {
        position: relative;
    }
    .onsenNav {
        margin: 0 auto;
        max-width: 360px;
        width: 95%;
        gap: 9px;
        justify-content: flex-start;
    }
    .onsenNav-item {
        text-align: center;
        max-width: 114px;
        width: 32%;
    }
    .onsenNav-item .name {
        font-size: 20px;
        line-height: 20px;
        margin-top: 10px;
    }
    .features::before {
        content: "";
        display: block;
        background-image: url(/images/kankou/mimasaka-hot-springs/features_bg_right_sp.svg);
        width: 228px;
        height: 182px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .features .navi .bottom {
        position: absolute;
        bottom: -85px;
        left: 0;
        width: 100%;
        height: 206px;
        background-color: #5BAF9B;
        clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
        background-image: url(/images/kankou/mimasaka-hot-springs/features_bottom_sp.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    }
}
/* 解説  共通デザイン */
.kaisetu {
    padding-bottom: 80px;
}
.kaisetu .infoWrap {
    padding: 80px 0;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    gap: 0 90px;
}
.kaisetu .infoWrap_data {
    max-width: 530px;
}
.kaisetu .infoWrap_data h3 {
    font-family: Kaisei Tokumin;
    font-weight: 700;
    font-size: 50px;
    line-height: 50px; 
    color: #A1956E;
    margin-bottom: 40px;
}
.kaisetu .infoWrap_data h3 .sub {
    font-family: Noto Sans JP;
    font-weight: 500;
    font-size: 26px;
    line-height: 26px;
    letter-spacing: 0%;
    display: block;
    margin-bottom: 20px;
}
.kaisetu .infoWrap_data .text {
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: #333333;
    margin-bottom: 20px;
}
/* ここに注目！ */
.kaisetu .infoWrap_data .look {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 32px;
}
.kaisetu .infoWrap_data .look .icon {
    width: 100px;
    height: auto;
}
.kaisetu .infoWrap_data .look .bubble {
    background-color: #5BAF9B;
    padding: 17px 32px;
    width: calc(100% - 100px);
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    position: relative;
}
.kaisetu .infoWrap_data .look .bubble::before {
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 20px solid #5BAF9B;
    border-left: 0;
    top: calc(100% / 2.2);
    left: -16px;
}
.kaisetu .infoWrap_data .look .bubble img {
    display: block;
    margin-bottom: 13px;
}
/* アニメーション */
.poyoyon {
    opacity: 0;
    transform: translateX(-200px);
}
.poyoyon.is-visible {
  animation: poyoyon 1.5s cubic-bezier(0.6, 1, 0.8, 1)  forwards;
}

@keyframes poyoyon {
	0% { transform: translateX(-200px); opacity: 0; }
	30% { transform: translateX(50px); }
	60% { transform: translateX(0); }
	80% { transform: translateX(15px); }
	100% { transform: translateX(0); opacity: 1; }
}


/* 解説 湯原温泉 */
.features .about-yubara {
    background-color: #D7F4ED;
    background-image: url(/images/kankou/mimasaka-hot-springs/bg_yubara.svg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 120px;
}
/* 解説 奥津温泉 */
.features .about-okutsu {
    background-color: #EDF4D7;
    background-image: url(/images/kankou/mimasaka-hot-springs/bg_okutsu.svg);
    background-repeat: repeat;
}
/* 解説 湯郷温泉 */
.features .about-yunogou {
    background-color: #F4E7D7;
    background-image: url(/images/kankou/mimasaka-hot-springs/bg_yunogou-all.svg);
     background-repeat: no-repeat;
    background-size: cover;
}
@media screen and (max-width: 959px) {
    .kaisetu .infoWrap {
        width: 98%;
        flex-direction: column;
        gap: 20px 0;
        justify-content: center;
        align-items: center;
    }
}
/* 解説 共通デザイン sp */
@media screen and (max-width: 599px) {
    .kaisetu {
        padding: 40px 0;
    }
    .kaisetu .infoWrap {
        max-width: 360px;
        margin: 0 auto;
        display: block;
        padding: 0;
        width: 100%;
    }
    .kaisetu .infoWrap h3 {
        font-family: Kaisei Tokumin;
        font-weight: 800;
        font-size: 35px;
        line-height: 35px;
        text-align: center;
        color: #A1956E;
        margin-bottom: 20px;
    }
    .kaisetu .infoWrap h3 .sub {
        font-family: Noto Sans JP;
        font-weight: 500;
        font-size: 18px;
        line-height: 18px;
        color: #A1956E;
        display: block;
        margin-bottom: 15px;
    }
    .kaisetu .infoWrap .text {
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        color: #333;
        margin-bottom: 15px;
        margin-top: 20px;
    }
    /* ここに注目！ */
    .kaisetu .infoWrap .look {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0 18px;
        margin-bottom: 40px;
    }
    .kaisetu .infoWrap .look .icon {
        width: 80px;
        height: auto;
    }
    .kaisetu .infoWrap .look .bubble {
        background-color: #5BAF9B;
        padding: 10px 20px;
        width: calc(100% - 80px);
        border-radius: 30px;
        color: #fff;
        position: relative;
        font-family: Noto Sans JP;
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
    }
    .kaisetu .infoWrap .look .bubble::before {
        position: absolute;
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 15px solid #5BAF9B;
        border-left: 0;
        top: calc(100% / 2.3);
        left: -10px;
    }
    .kaisetu .infoWrap .look .bubble img {
        display: block;
        margin-bottom: 5px;
    }
    /* 解説 湯原温泉 */
    .features .about-yubara {
        background-image: url(/images/kankou/mimasaka-hot-springs/bg_yubara_sp.svg);
    }
    /* 解説 奥津温泉 */
    .features .about-okutsu {
        background-image: url(/images/kankou/mimasaka-hot-springs/bg_okutsu_sp.svg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 解説 湯郷温泉 */
    .features .about-yunogou {
        background-image: url(/images/kankou/mimasaka-hot-springs/bg_yunogou_sp.svg);
    }
}


/* 施設リスト */
.kaisetu .yadolist {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
/* 施設リストpc */
@media screen and (min-width: 600px) {
    .kaisetu .yadolist {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 40px;
    }
    .kaisetu .yadolist .yadolist-item {
        border-radius: 20px;
        background-color: #fff;
        border: 1px solid #5BAF9B;
        width: 48.33%;
        max-width: 580px;
        position: relative;
        box-sizing: border-box;
    }
    .kaisetu .yadolist .yadolist-item a {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 100%;
    }
    .kaisetu .yadolist .yadolist-item picture {
        flex-shrink: 0;
    }
    .kaisetu .yadolist-item .thumb {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        width: 100%;
        max-width: 280px;
        height: auto;
    }
    .kaisetu .yadolist-item .info {
        max-width: 300px;
        padding: 20px 15px;
    }
    .kaisetu .yadolist-item .info .name {
        font-weight: 500;
        font-size: 16px;
        line-height: 1.1;
        color: #333;
        margin-bottom: 14px;
    }
    .kaisetu .yadolist-item .info .lead {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #5BAF9B;
        margin-bottom: 15px;
    }
    .kaisetu .yadolist-item .info .address {
        font-weight: 300;
        font-size: 12px;
        line-height: 18px;
    }
    .kaisetu .yadolist-item .info .address .mark {
        border: 1px solid #333333;
        padding: 0 5px;
        text-align: center;
        float: left;
        margin-right: 10px;
        font-weight: 500;
    }
    .kaisetu .yadolist-item .arrow {
        position: absolute;
        bottom: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
        display: block;
    }
}
/* 施設リストtb */
@media screen and (min-width: 600px) and (max-width: 959px) {
    .kaisetu .yadolist {
        width: 92%;
        margin: auto;
        flex-direction: column;
        align-items: center;
    }
    .kaisetu .yadolist .yadolist-item {
        width: 100%;
    }
}
/* 施設リストsp */
@media screen and (max-width: 599px) {
    .kaisetu .yadolist {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
    .kaisetu .yadolist-item {
        position: relative;
        padding-bottom: 15px;
        border-bottom: 1px solid #5BAF9B;
    }
    .kaisetu .yadolist-item:not(:first-child) {
        padding-top: 15px;
    }
    .kaisetu .yadolist-item a {
        gap: 0 10px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .kaisetu .yadolist-item picture {
        flex-shrink: 0;
    }
    .kaisetu .yadolist-item picture img {
        width: 100%;
        max-width: 139px;
        height: auto;
        border-radius: 10px;
    }
    .kaisetu .yadolist-item .info .name {
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        color: #333;
    }
    .kaisetu .yadolist-item .info .lead {
        font-weight: 500;
        font-size: 13px;
        line-height: 20px;
        color: #5BAF9B;
        margin: 6px 0 10px;
    }
    .kaisetu .yadolist-item .info .address {
        font-weight: 300;
        font-size: 12px;
        line-height: 10px;
        color: #333;
        line-height: 18px;
        width: calc(100% - 26px);
    }
    .kaisetu .yadolist-item .info .address .mark {
        border: .5px solid #333333;
        padding: 4px 5px;
        text-align: center;
        float: left;
        margin-right: 5px;
        font-weight: 500;
        line-height: 10px;
        font-size: 10px;
    }
    .kaisetu .yadolist-item .info .address .on_pc {
        display: none;
    }
    .kaisetu .yadolist-item .info .address .num {
        display: inline-block;
        margin-right: 3px;
    }
    .kaisetu .yadolist-item .arrow {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0; 
        bottom: 10px;
    }
}



/* 合わせて読みたい */
.article-mimasaka {
    background-color: #F4E7D7;
    padding: 40px 0 100px;
}
.article-mimasaka .lead {
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    color: #A1956E;
    margin-bottom: 20px;
}
.article-mimasaka .articleWrap {
    width: 84%;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.article-mimasaka .articleWrap a {
    display: block;
}
.article-mimasaka .articleWrap .thumb {
    flex-shrink: 0;
}
.article-mimasaka .articleWrap .thumb img {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.article-mimasaka .articleWrap .article-ttl {
    padding-left: 30px;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #333;
}
.article-mimasaka .articleWrap::before {
    content: "";
    display: block;
    background-color: #D1C9AE;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 45px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.article-mimasaka .articleWrap::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    border-right: 0;
    position: absolute;
    right: 14px;
    top: 57px;
}
@media screen and (min-width: 732px) and (max-width: 959px) {
    .article-mimasaka .articleWrap .article-ttl {
        width: 52%;
        padding-left: 1rem;
        line-height: 24px;
    }
}
@media screen and (min-width:600px) and (max-width: 731px) {
    .article-mimasaka .articleWrap .article-ttl {
        width: 41%;
        padding-left: 1em;
    }
}
@media screen and (max-width: 599px) {
    .article-mimasaka {
        padding: 30px 0 40px;
    }
    .article-mimasaka .lead {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .article-mimasaka .articleWrap {
        width: 100%;
        max-width: 360px;
    }
    .article-mimasaka .articleWrap .thumb {
        max-width: 140px;
        width: 38.89%;
    }
    .article-mimasaka .articleWrap .thumb img {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .article-mimasaka .articleWrap .article-ttl {
        padding-left: 10px;
        font-size: 13px;
        line-height: 18px;
        width: calc(100% - (38.89% + 25px));
        max-width: 180px;
    }
    .article-mimasaka .articleWrap::before {
        width: 25px;
    }
    .article-mimasaka .articleWrap::after {
        border-top: 7.5px solid transparent;
        border-bottom: 7.5px solid transparent;
        border-left: 10px solid #fff;
        top: calc(50% - 8px);
        right: 7px;
    }
}

/* -------------------------------------------
    温泉だけじゃない　美作三湯の魅力
------------------------------------------- */
.highlights {
    padding: 88px 0 80px;
}
.highlights .ttl {
    margin-bottom: 28px;
}
.highlights .lead {
    font-size: 14px;
    font-weight: 300;
    color: #333333;
    margin-bottom: 40px;
}
.highlights__list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0 6.25%;
    margin-bottom: 80px;
}
.highlights__list-item {
    max-width: 350px;
    width: 29.17%;
}
.highlights__list-item .ttl {
    font-size: 18px;
    font-weight: 500;
    color: #A1956E;
    margin: 15px auto;
}
.highlights__list-item .text {
    font-size: 14px;
    font-weight: 300;
    line-height: 24px;
    color: #333333;
    margin-bottom: 25px;
}
.highlights__list-item .guide-comment {
    position: relative;
    border-top: 1px solid #5BAF9B;
    border-bottom: 1px solid #5BAF9B;
    padding: 10px 0;
    display: flex;
    justify-content: end;
}
.highlights__list-item .guide-comment img {
    position: absolute;
    bottom: 0;
    left: 0;
}
.highlights__list-item .guide-comment p {
    font-weight: 500;
    font-size: 13px;
    line-height: 22px;
    color: #5BAF9B;
}
.highlights__list-item .guide-comment p.egawa01 {
    margin-right: 23px;
}
.highlights__list-item .guide-comment p.ooshima {
    margin-right: 10px;
}
.highlights__list-item .guide-comment p.egawa02 {
    margin-right: 49px;
}
@media screen and (min-width: 600px) and (max-width: 959px) {
    .highlights__list {
        gap: 60px 6.25%;
        flex-wrap: wrap;
    }
    .highlights__list-item {
        text-align: center;
        width: auto;
        width: 310px;
    }
    .highlights__list-item .text {
        text-align: left;
    }
    .highlights__list-item .guide-comment {
        max-width: 350px;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .highlights__list-item .guide-comment img {
        position: static;
    }
    .highlights__list-item .guide-comment p {
        text-align: left;
        margin-right: 0!important;
    }
}
@media screen and (max-width: 599px) {
    .highlights {
        padding: 51px 0 40px;
    }
    .highlights .ttl {
        margin-bottom: 20px;
    }
    .highlights .lead {
        font-size: 13px;
        margin: 0 auto 30px;
        line-height: 20px;
        max-width: 360px;
    }
    .highlights__list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px 0;
        margin-bottom: 60px;
    }
    .highlights__list-item {
        max-width: 360px;
        width: 96%;
        margin: 0 auto;
    }
    .highlights__list-item .ttl {
        font-size: 18px;
        margin-bottom: 15px;
    }
    .highlights__list-item .text {
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 25px;
    }
}
@media screen and (max-width: 375px) {
    .highlights__list-item .guide-comment p {
        font-size: 12px;
    }
}
@media screen and (max-width: 370px) {
    .highlights__list-item .guide-comment p.ooshima {
        margin-right: 0;
    }
    .highlights__list-item .guide-comment img {
        width: auto;
        height: 67px;
    }
    .highlights__list-item .guide-comment p {
        font-size: 13px;
    }
}
@media screen and (max-width: 345px) {
    /* 画面幅が狭くなった時、案内人の画像のabsoluteを解除してflex */
    .highlights__list-item .guide-comment {
        justify-content: start;
        align-items: center;
        gap: 0 10px;
        flex-direction: column;
    }
    .highlights__list-item .guide-comment img {
        position: static;
        height: auto;
        order: 2;
        max-width: 125px;
    }
    .highlights__list-item .guide-comment p {
        order: 1;
    }
}

/* スポットリスト */
.localspots:has(.gourmet) {
    margin-bottom: 60px;
}
.localspots__ttl {
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    color: #333333;
    margin-bottom: 20px;
}
/* グルメ */
.localspots__ttl.gourmet::before {  
    content: "";
    display: inline-block;
    background-image: url(/images/kankou/mimasaka-hot-springs/icon_gourmetSpots.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: sub;
}
/* レジャー */
.localspots__ttl.leisure::before {  
    content: "";
    display: inline-block;
    background-image: url(/images/kankou/mimasaka-hot-springs/icon_leisureSpots.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: sub;
}
.localspots__list-item a {
    display: block;
}
@media screen and (min-width: 600px) and (max-width: 959px) {
    .localspots {
        width: 92%;
        /* max-width: 700px; */
        margin: auto;
    }
}
/* スポットリスト sp */
@media screen and (max-width: 599px) {
    .localspots {
        max-width: 360px;
        margin: 0 auto;
    }
    .localspots__ttl {
        font-size: 18px;
        margin-bottom: 14.5px;
    }
    .localspots__ttl.gourmet::before {
        width: 21.96px;
        height: 20.94px;
        padding-right: 5px;
        vertical-align: bottom;
    }
    .localspots__ttl.leisure::before {
        width: 18px;
        height: 21px;
        padding-right: 9px;
    }
    .localspots__list {
        display: flex;
        flex-direction: column;
    }
    .localspots__list-item {
        padding-bottom: 15px;
        position: relative;
        border-bottom: 1px solid #CCCCCC;
    }
    .localspots__list-item:not(:first-child) {
        padding-top: 15px;
    }
    .localspots__list-item a {
        display: flex;
        gap: 0 10px;
    }
    .localspots__list-item picture {
        flex-shrink: 0;
    }
    .localspots__list-item img {
        border-radius: 10px;
        height: 94px;
        width: 139px;
    }
    .localspots__list-item .info .name {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 11px;
    }
    .localspots__list-item .info .address {
        font-weight: 300;
        font-size: 12px;
        line-height: 18px;
    }
    .localspots__list-item .arrow {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 0;
        bottom: 15px;
    }
}

/* スポットリスト pc */
@media screen and (min-width: 600px) {
    .localspots__ttl.gourmet::before {
        width: 23.97px;
        height: 24px;
        padding-right: 10px;
    }
    .localspots__ttl.leisure::before {
        width: 19.54400062561035px;
        height: 24px;
        padding-right: 10.5px;
    }
    .localspots__list {
        display: flex;
        justify-content: flex-start;
        align-items: start;
        flex-wrap: wrap;
        gap: 20px;
    }
    .localspots__list-item {
        width: 76%;
        max-width: 285px;
        border-radius: 20px;
        border: 1px solid #D1C9AE;
        color: #333333;
        box-sizing: border-box;
    }
    .localspots__list-item img {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .localspots__list-item .info {
        padding: 10px 10px 15px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .localspots__list-item .info .name {
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        height: 40px;
        margin-bottom: 5px;
    }
    .localspots__list-item .info .address {
        font-weight: 300;
        font-size: 12px;
        line-height: 18px;
        width: 223px;
        height: 36px;
    }
    .localspots__list-item .arrow {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
}
.localspots .fade-gradient,
.localspots .more-btn {
    opacity: 0; 
    visibility: hidden;
}
/* spのみ もっと見るボタン */
@media screen and (max-width: 599px) {
    .localspots {
        position: relative;
    }
    .localspots:has(.moreWrap) .wrap {
        height: 770px;
        overflow: hidden;
        transition: height 0.6s ease;
    }
    .localspots .localspots__list .hidden {
        display: none;
    }
    .localspots .localspots__list .localspots__list-item {
        transition: opacity 0.6s ease, visibility 0.6s ease;
    }
    .localspots .localspots__list .localspots__list-item.is-visible {
        opacity: 1;
        visibility: visible;
    }
    .localspots__list {
        position: relative;
    }
    .localspots .fade-gradient {
        opacity: 1;
        visibility: visible;
        display: block;
        width: 100%;
        height: 130px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, white 100%);
        pointer-events: none;
        /* transition: all .3s 0s ease-in-out; */
    }
    .localspots .more-btn {
        opacity: 1;
        visibility: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 18px 0;
        max-width: 310px;
        width: 100%;
        background: white;
        border: 1px solid black;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        color: #333333;

        position: absolute;
        bottom: 26px;
        left: calc( 50% - 155px);
    }

    .localspots .fade-gradient.hidden,
    .localspots .more-btn.hidden {
        display: none;
    }
}

/* 日帰り導線バナー */
main .higaeri {
    margin-top: 60px;
}
@media screen and (max-width: 599px) {
    main .higaeri {
        margin-top: 40px;
    }
}

/* おすすめの旅行プラン plan */
.plan {
    background-color: #F6F5F0;
    height: 100%;
    overflow: hidden;
    padding: 60px 0;
    position: relative;
    margin-bottom: 100px;
}
.plan .TitleArea {
    margin-bottom: 20px;
}
.plan .TitleArea .Description {
    font-size: 13px;
    margin-top: 15px;
    font-weight: 300;
}
.plan .ranking-box-intermediate .text-link {
    text-decoration: underline;
    font-weight: 500;
}
.plan_recommend-list {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
.plan_recommend-item {
    background: #fff;
    padding: 30px 20px 20px;
    width: calc(50% - 20px);
    margin: 10px;
    border: 1px solid #D1C9AE;
    display: block;
    position: relative;
    box-sizing: border-box;
}
.plan_recommend-head {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
}
.plan_recommend-row {
    display: flex;
}
.plan_recommend-body {
    flex: 2.56;
}
.plan_recommend-info_label {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    background: #E8A2A2;
    line-height: 1;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    white-space: nowrap;
}
.plan_recommend-info_label:before {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    transform: translateX(-99.5%);
    background: linear-gradient(60deg, transparent 50%, #e8a2a2 52%);
}
.plan_recommend-info_label.label_new {
    right: 50px;
    padding: 5px 20px 5px 8px;
    background: #D1C9AE;
}
.plan_recommend-info_label.label_new:before {
    background: linear-gradient(60deg, transparent 50%, #D1C9AE 52%);
}
.plan_recommend-info_row {
    margin: 10px 0 10px 0;
}
.plan_recommend-info_row img {
    margin-right: 8px;
}
.plan_recommend-info_area {
    margin: 5px 0px;
    line-height: 1.4;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #E8A2A2;
}
.plan_recommend-info_budget {
    margin: 5px 0px;
    line-height: 1.4;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-size: 13px;
}
.plan_recommend-info-txt {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 300;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.plan_recommend-planner {
    display: flex;
    padding: 0;
    box-sizing: border-box;
    margin-top: 10px;
}
.plan_recommend-planner img {
    margin-right: 10px;
    width: 30px;
    height: 30px;
}
.plan_recommend-planner_name {
    font-weight: 500;
    font-size: 13px;
    line-height: 1.4;
}
.plan_recommend-planner_name small {
    font-size: 11px;
    display: block;
}
.plan_recommend-img {
    margin-left: 15px;
}
.plan_recommend-schedule {
    margin-top: 15px;
}
.plan_recommend-schedule_head {
    position: relative;
    margin-bottom: 5px;
}
.plan_recommend-schedule_head img {
    width: 75px;
}
.plan_recommend-schedule_head:after {
    content: "";
    display: block;
    position: absolute;
    height: 0;
    width: calc((100% - 85px)* 2);
    background: #E8A2A2;
    border-top: 4px dashed #fff;
    transform: scale(0.5);
    transform-origin: right;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.plan_recommend-schedule_destination {
    display: flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
    font-size: 15px;
}
.plan_recommend-schedule_destination:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: #000;
    transform: rotate(45deg);
    margin-right: 5px;
}
.plan_recommend-schedule_destination small {
    font-weight: 400;
    align-self: flex-end;
    margin-left: 3px;
    font-size: 13px;
}
.plan_recommend-schedule_street {
    display: flex;
    margin: -5px;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: calc(100% + 5px);
}
.plan_recommend-schedule_street-item {
    margin: 5px;
    width: 33.333%;
    padding-right: 35px;
    position: relative;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    min-width: 234px;
}
.plan_recommend-schedule_street-item:not(:last-child):after {
    content: "";
    display: block;
    background: url('/images/plan/ranking/icon_arrow.svg') no-repeat center center / 100% auto;
    width: 28px;
    height: 11px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.plan_recommend-schedule_street-item__body {
    margin-left: 10px;
}
.plan_recommend-schedule_street-item__label {
    background: #000;
    color: #fff;
    line-height: 1;
    padding: 2px 10px 3px;
    border-radius: 35px;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 6px;
    display: inline-block;
    transform: translateY(-2px);
}
.plan_recommend-schedule_street-item__shop {
    font-weight: 500;
    display: block;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.plan_recommend-link {
    margin: 40px auto 0;
    width: 100%;
}
.plan_recommend-link img {
    margin-right: 10px;
}
.plan_recommend-link a {
    width: 380px;
    background: #6ABAA6;
    padding: 15px 0;
    border-radius: 10px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
.plan_recommend .ContentsArea {
    position: relative;
}
.plan_recommend .ContentsArea::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 100px;
    background: #F6F5F0;
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
}
.plan_recommend .ContentsArea.open {
    position: relative;
    margin-bottom: 0px;
}
.plan_recommend .ContentsArea.open::after {
    display: none;
}
.ContentsAreaMore {
    width: 100%;
    max-width: 300px;
    display: block;
    font-weight: 500;
    color: #333;
    font-size: 14px;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #000;
    border-radius: 23px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    z-index: 1;
    background-color: #fff;
    cursor: pointer;
}
.ContentsAreaMore:hover {
    opacity: .7;
}
.ContentsAreaMore span {
    font-size: 12px;
}
@media screen and (max-width: 599px) {
    .plan {
        padding: 40px 0;
    }
    .plan_recommend-list {
        flex-direction: column;
        margin: 0;
        row-gap: 10px;
    }
    .plan_recommend-item {
        width: 100%;
        margin: 0;
    }
    .plan_recommend-ttl {
        font-size: 14px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .plan_recommend-img {
        width: 130px;
        margin-left: 10px;
    }
    .plan_recommend-info_area, .plan_recommend-info_budget {
        font-size: 11px;
    }
    .plan_recommend-planner_name {
        font-size: 12px;
        line-height: 1.1;
    }
    .plan_recommend-link {
        margin-top: 20px;
        width: 100%;
    }
    .plan_recommend-link a {
        font-size: 14px;
        width: 100%;
    }
    .plan_recommend .ContentsArea::after {
        left: -4%;
        width: 100vw;
    }
}


/* 記事 共通 */
.article_block {
    position: relative;
    padding-top: 100px;
    z-index: 1;
}
.article_block::before {
    content: '';
    width: calc(50vw + 200px);
    height: 800px;
    position: absolute;
    top: 180px;
    opacity: 0.1;
    z-index: -1;
}
.article_block.no_top {
    min-height: 800px;
}
.article_block.no_top .wrap {
    padding-top: 60px;
}
.article_block.no_top::before {
    content: '';
    top: 100px;
}
.article_block.no_top .MainTitle {
    margin-bottom: 20px;
}
.topArea {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}
.topArea.ttlRight {
    flex-direction: row-reverse
} 
.topArea .main_article {
    width: 72%;
    max-width: 860px;
}
.topArea .main_article-img {
    margin-bottom: 30px;
}
.topArea .main_article-img img {
    display: block;
    width: 100%;
}
.topArea .main_article-img a {
    display: flex;
    align-items: flex-end;
}
.topArea.ttlLeft .main_article-img a {
    flex-direction: row-reverse;
}
.topArea .main_article-txt {
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}
.main_article-readmore {
    padding: 20px 21px 40px;
    position: relative;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 8px;
    color: #fff;
    font-family: "Zen Kaku Gothic New", serif;
}
.main_article-readmore::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 0 60px;
}
.main_article-readmore::after {
    content: '';
    position: absolute;
    bottom: 25px;
    width: 6px;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #fff;
}
.topArea.ttlLeft .main_article-readmore::before {
    transform: scaleX(-1);
}
.prArea {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 30px;
}
.pr_article-img {
    max-width: 590px;
    width: 50%;
}
.pr_article-img img {
    width: 100%;
    height: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    border-radius: 10px;
}
.main_article-body {
    max-width: 570px;
    width: 47.5%;
}
.pr_article-ttl {
    margin-bottom: 20px;
}
.pr_article-name {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-left: 40px;
    position: relative;
    line-height: 1.5;
}
.pr_article-name::before {
    content: 'PR';
    font-size: 12px;
    background: #000;
    color: #fff;
    padding: 3px 7px;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 3px;
    line-height: 1.4;
}
.pr_article-intro {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.pr_article-info p {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 15px;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-left: 30px;
}
.pr_article-info p img {
    display: inline-block;
    margin-right: 5px;
}
.pr_article-info p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.pr_article-info p.pr_article-add::before {background-image: url(/images/kankou/nagarekawa/icon_article_add.svg);}
.pr_article-info p.pr_article-time::before {background-image: url(/images/kankou/nagarekawa/icon_article_calendar.svg);}
.pr_article-info p.pr_article-holiday::before {background-image: url(/images/kankou/nagarekawa/icon_article_rest.svg);}
.pr_article-info p.pr_article-access::before {background-image: url(/images/kankou/nagarekawa/icon_article_walk.svg);}
.pr_article-info p.pr_article-bus::before {background-image: url(/images/kankou/nagarekawa/icon_article_bus.svg);}
.pr_article-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
    column-gap: 4.35%;
}
.pr_article-btn {
    background: #fff;
    width: 31%;
    max-width: 173px;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 8px 0;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
    position: relative;
}
.pr_article-btn::after {
    content: '▸';
    display: inline-block;
    position: absolute;
}
.pr_article-btn:last-of-type {
    background: #E8A2A2;
    color: #fff;
}
.article_list {
    display: flex;
    flex-flow: wrap;
    gap: 20px;
}
.article_list img {
    display: block;
}
.article_list-item {
    background: #fff;
    border: 1px solid #999;
    border-radius: 10px;
    overflow: hidden;
    width: calc(25% - 15px);
    max-width: 285px;
    box-sizing: border-box;
    position: relative;
}
.article_list-item a {
    display: block;
}
.article_list-body {
    padding: 8px 10px;
}
.article_list-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 2px 10px;
    background: #F6F5F0;
    border: 1px solid #D1C9AE;
    z-index: 2;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}
.article_list-location {
    display: inline-flex;
    align-items: center;
    background: #F2F2F2;
    font-size: 10px;
    line-height: 1.4;
    column-gap: 5px;
    padding: 0 10px;
    font-weight: 500;
    color: #999;
    margin-bottom: 5px;
}
.article_list-location_spot {
    font-size: 11px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    max-width: 151px;
}
.article_list-location_dist {
    font-size: 16px;
    color: #AF9D63;
}
.article_list-name {
    font-weight: 500;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 8px;
}
.article_list-add {
    width: 84%;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.article_list-read {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.article_list-bottom {
    width: 100%;
    padding: 40px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
}
.article_list-bottom a {
    height: 60px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.article_list-more {
    width: 380px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}
.article_list-more img {
    height: auto;
    margin-right: 10px;
}
.article_list-map {
    flex-direction: column;
    width: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
.article_related {
   /* margin-top: 80px;*/
}
.article_related .article_related-wrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s linear;
    position: relative;
    gap: 20px;
}
#gourmet_article_related .article_related-wrap.open,
#kankou_article_related .article_related-wrap.open,
#yado_article_related .article_related-wrap.open {
    max-height: unset;
}
.article_related .article_related-wrap::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    height: 150px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.8) 55%, #fff 90%);
}
.article_related .moreBtn {
    display: block;
    width: 100%;
    max-width: 300px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
    text-align: center;
    background: #FFF;
    border: 1px solid #000;
    border-radius: 23px;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    box-sizing: border-box;
    z-index: 1;
    cursor: pointer;
}
.article_related .article_related-wrap.open::after {
    display: none;
} 
.article_related-wrap.open .moreBtn {
    display: none;
}
.article_related-item {
    width: calc(25% - 15px);
    max-width: 285px;
}
.article_related-ttl {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 10px;
}
.article_related-date {
    font-size: 12px;
    font-weight: 300;
    text-align: right;
    color: #333;
}
/*周辺グルメ記事*/
.nearby_gourmet {
    margin-top: 80px;
}
.nearby_gourmet .ttl_article_nearby_gourmet {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 10px;
}
.nearby_gourmet #gourmet_article_related h3.article_related-ttl {
    display: none;
}
/*宿の記事を読むタブを反転*/
@media screen and (min-width: 600px) {
    #yado .topArea .main_article-img a {
        flex-direction: row-reverse;
    }
    #yado .main_article-readmore::before {
        transform: scale(-1, 1);
    } 
}

@media screen and (max-width: 900px) {
    .topArea .MainTitle {
        width: 18%;
    }
    .topArea .main_article {
        width: 70%;
    }
    .article_list-location {
        padding: 0 5px;
    }
    .article_list-location_spot {
        max-width: 50%;
    }
    .article_list-location_dist {
        font-size: 13px;
    }
}
@media screen and (max-width: 599px) {
    .article_block {
        padding-top: 0;
        margin-top: 80px;
    }
    .article_block::after {
        content: '';
        position: absolute;
        left: 3.9vw;
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: 1;
    }
    .article_block.no_top {
        min-height: unset;
    }
    .article_block.no_top .wrap {
        padding-top: 0;
    }
    .article_block.no_top::before {
        min-height: 728px;
    }
    .article_block.no_top .MainTitle {
        text-align: center;
        padding-top: 80px;
    }
    .topArea {
        flex-direction: column;
        position: relative;
        z-index: 0;
    }
    .topArea .MainTitle {
        width: 100%;
        max-width: 92%;
        margin: 0 auto;
        padding-top: 90px;
    }
    .topArea .MainTitle img {
        width: 100%;
    }
    .topArea .main_article {
        width: 100%;
        padding: 30px 0 40px;
    }
    .topArea .main_article-img {
        margin-bottom: 20px;
    }
    .topArea .main_article-img a {
        flex-direction: column;
    }
    .main_article-readmore {
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        font-size: 14px;
        line-height: 1.85;
        letter-spacing: 0;
        padding: 2px 34px 2px 24px;
        max-height: 30px;
    }
    .main_article-readmore::before {
        border-width: 0 12px 30px 0;
        top: 0;
        left: -12px;
    }
    .main_article-readmore::after {
        border-width: 5px 0 5px 6px;
        bottom: 10px;
        right: 12px;
    }
    .topArea .main_article-txt {
        font-size: 14px;
        line-height: 1.6;
    }
    .main_article-bottom {
        position: absolute;
        bottom: -25px;
        right: 15px;
        font-size: 16px;
        font-family: "Kaisei Opti", serif;
        display: flex;
        align-items: center;
    }
    .main_article-bottom span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border: 1px solid;
        border-radius: 50%;
        margin-left: 10px;
    }
    .main_article-bottom img {
        display: block;
    }
    .prArea {
        flex-direction: column;
        margin: 40px 0;
    }
    .article_block.no_top .prArea {
        margin-top: 20px;
    }
    .pr_article-img {
        width: 100%;
        margin-bottom: 15px;
    }
    .main_article-body {
        width: 100%;
    }
    .pr_article-intro {
        font-size: 14px;
        margin-bottom: 15px;
        -webkit-line-clamp: 3;
    }
    .pr_article-info p {
        font-size: 12px;
    }
    .pr_article-link {
        margin-top: 15px;
    }
    .pr_article-btn {
        width: 32%;
        padding: 12px 6px 12px 0;
    }
    .article_list {
        flex-direction: column;
        gap: 15;
    }
    .article_list-item {
        background: none;
        max-width: 100%;
        width: 100%;
        border: 0;
        border-bottom: 1px solid #CCC;
        border-radius: 0;
        padding-bottom: 15px;
        margin-bottom: 0;
    }
    .article_list-item a {
        display: flex;
        column-gap: 10px;
    }
    .article_list-img {
        flex-shrink: 0;
    }
    .article_list-body {
        padding: 0;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        position: relative;
        width: 100%;
    }
    .article_list-tag {
        display: inline-block;
        padding: 0 10px;
        margin-bottom: 8px;
        top: 0;
        left: 0;
    }
    .article_list-location {
        padding: 0;
        background: none;
        margin: 0;
        position: absolute;
        bottom: 0;
        width: 88%;
    }
    .article_list-location_spot {
        font-size: 12px;
        max-width: 60%;
    }
    .article_list-location_dist {
        font-size: 14px;
    }
    .article_list-read {
        right: 0;
        bottom: 0;
    }
    .article_list-bottom {
        padding: 20px 0 40px;
        column-gap: 8px;
    }
    .article_list-bottom a {
        font-size: 16px;
    }
    .article_list-more img {
        margin-right: 5px;
    }
    .article_list-bottom .article_list-map {
        font-size: 11px;
    }
    .article_related-item {
        width: 100%;
        max-width: 100%;
        border-bottom: 1px solid #CCC;
        padding-bottom: 20px;
        display: flex;
        align-items: center;
        column-gap: 10px;
    }
    .article_related-img {
        flex-shrink: 0;
    }
    .article_related-img img {
        width: 160px;
        height: 90px;
        object-fit: cover;
        object-position: center;
    }
    .article_related-ttl {
        font-size: 13px;
    }
    .article_related .article_related-wrap {
        max-height: 800px;
    }
    .article_related .moreBtn {
        border-radius: 5px;
    }
    /*.article_related {
        margin-top: 40px;
    }*/
    .nearby_gourmet {
        margin-top: 40px;
    }
    .nearby_gourmet .ttl_article_nearby_gourmet {
        font-size: 13px;
    }
}

/* グルメ gourmet */
#gourmet::before {
    right: 0;
    border-radius: 100px 0 0 100px;
    background: #EFBF22;
}
#gourmet .main_article-readmore {
    background: #EFBF22;
}
#gourmet .main_article-readmore::before {
    border-color: transparent transparent transparent #EFBF22;
}
#gourmet .article_list-more {
    background: #EFBF22;
}
#gourmet .article_list-map {
    background-image: url(/images/kankou/nagarekawa/gourmet_map_bg.svg);
    background-color: #EFBF22;
}
#gourmet .backBtn {
    background: #EFBF22;
}
#gourmet .searchFacilityaWrap .toggle {
    background: #EFBF22;
}
#gourmet .searchFacilityaWrap .facilityList li .facilityText .facilityInfo .facilityAccess {
    color: #DBA800;
}
#gourmet .searchFacilityaWrap .facilityList li {
    border-color: #EFBF22;
}
#map-canvas-gourmet {
    width: 100%;
    height: 100%;
}

/* レジャー kankou */
#kankou::before {
    left: 0;
    border-radius: 0 100px 100px 0;
    background: #F5B581;
}
#kankou .main_article-readmore {
    background: #F5B581;
}
#kankou .main_article-readmore::before {
    border-color: transparent transparent transparent #F5B581;
}
#kankou .article_list-more {
    background: #F5B581;
}
#kankou .article_list-map {
    background-image: url(/images/kankou/nagarekawa/kankou_map_bg.svg);
    background-color: #F5B581;
}
#kankou .backBtn {
    background: #F5B581;
}
#kankou .searchFacilityaWrap .toggle {
    background: #F5B581;
}
#kankou .searchFacilityaWrap .facilityList li .facilityText .facilityInfo .facilityAccess {
    color: #F5B581;
}
#kankou .searchFacilityaWrap .facilityList li {
    border-color: #F5B581;
}
.map #map-canvas-kankou {
    width: 100%;
    height: 100%;
}

/* 旅館・ホテル  yado */
#yado {
    padding-bottom: 100px;
}
#yado::before {
    right: 0;
    border-radius: 100px 0 0 100px;
    background: #66B2DD;
}
#yado .main_article-readmore {
    background: #66B2DD;
}
#yado .main_article-readmore::before {
    border-color: transparent transparent transparent #66B2DD;
}
#yado .article_list-more {
    background: #66B2DD;
}
#yado .article_list-map {
    background-image: url(/images/kankou/nagarekawa/yado_map_bg.svg);
    background-color: #66B2DD;
}
#yado .backBtn {
    background: #66B2DD;
}
#yado .searchFacilityaWrap .toggle {
    background: #66B2DD;
}
#yado .searchFacilityaWrap .facilityList li .facilityText .facilityInfo .facilityAccess {
    color: #66B2DD;
}
#yado .searchFacilityaWrap .facilityList li {
    border-color: #66B2DD;
}
.map #map-canvas-yado {
    width: 100%;
    height: 100%;
}
#yado .topArea.ttlRight {
    flex-direction: row;
}
@media screen and (max-width: 599px) {
    #yado {
        padding-bottom: 80px;
    }
    #gourmet::before, 
    #kankou::before, 
    #yado::before {
        top: 0;
        width: 100vw;
        height: 100vw;
        border-radius: 50vw 50vw 0 0;
    }
    #gourmet::after {
        background-image: url(/images/kankou/nagarekawa/gourmet_txt_bg.svg);
        top: 2.57vw;
        width: 22.82vw;
        height: 24vw;
    }
    #kankou::after {
        background-image: url(/images/kankou/nagarekawa/kankou_txt_bg.svg);
        top: 5.1vw;
        width: 19.5vw;
        height: 18.7vw;
    }
    #yado::after {
        background-image: url(/images/kankou/nagarekawa/yado_txt_bg.svg);
        top: 0;
        width: 26.7vw;
        height: 25.13vw;
    }
    #gourmet .main_article-readmore::before {
        border-color: transparent #EFBF22 transparent transparent;
    }
    #kankou .main_article-readmore::before {
        border-color: transparent #F5B581 transparent transparent;
    }
    #yado .main_article-readmore::before {
        border-color: transparent #66B2DD transparent transparent;
    }
    #gourmet .main_article {
        background: #fdf8e8;
    }
    #gourmet .main_article-bottom {
        color: #EFBF22;
    }
    #kankou .main_article {
        background: #fef7f2;
    }
    #kankou .main_article-bottom {
        color: #F5B581;
    }
    #yado .main_article {
        background: #eff7fb;
    }
    #yado .pr_article-btn:last-of-type {
        padding: 2% 3.5%;
        line-height: 1.2;
    }
    #yado .main_article-bottom {
        color: #66B2DD;
    }
    #popMap-gourmet .mapTop {
        background: #EFBF22;
    }
    .mapWrap .backBtn {
        background: none;
    }
    #popMap-gourmet .toggle, #popMap-gourmet .searchFacilityaWrapSp .facilityList li .facilityText .facilityInfo .facilityAccess {
        color: #DBA800;
    }
    #popMap-kankou .mapTop {
        background: #F5B581;
    }
    #popMap-kankou .toggle, #popMap-kankou .searchFacilityaWrapSp .facilityList li .facilityText .facilityInfo .facilityAccess {
        color: #F5B581;
    }
    #popMap-yado .mapTop {
        background: #66B2DD;
    }
    #popMap-yado .toggle, #popMap-yado .searchFacilityaWrapSp .facilityList li .facilityText .facilityInfo .facilityAccess {
        color: #66B2DD;
    }
}


/* article page */
.articleWrap {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.articleMainBlock {
    max-width: 800px;
    width: 67%;
}
.articleSideBlock {
    max-width: 340px;
    width: 28.5%;
}
.articleTopImg {
    margin-bottom: 15px;
}
.articleTopTitle {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 20px;
}
.articleTopText {
    font-weight: 300;
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-top: 20px;
}
.articleTitle {
    margin-top: 40px;
    font-size: 23px;
    font-weight: 500;
}
.articleSubTitle {
    font-weight: 500;
    font-size: 23px;
    color: #333;
    line-height: 1.5;
    margin-top: 20px;
}
.articleText {
    font-weight: 300;
    font-size: 16px;
    color: #333;
    line-height: 1.75;
    margin-top: 15px;
}
.articleInfoWrap {
    background: #F7F7F7;
    padding: 30px 35px 40px;
    margin-top: 30px;
}
.articleInfoWrap .infoName {
    font-weight: 500;
    color: #333;
    font-size: 18px;
    line-height: 1.5;
    padding-bottom: 10px;
    position: relative;
}
.articleInfoWrap .articleInfo {
    position: relative;
    margin-top: 20px;
}
.articleInfoWrap .articleInfo dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    min-height: 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}
.articleInfoWrap .articleInfo dl dt {
    width: 60px;
    display: inline-block;
    font-weight: 500;
    margin-top: 20px;
    margin-right: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.articleInfoWrap .articleInfo dl dd {
    width: calc(100% - 92px);
    font-weight: 300;
    margin-top: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-wrap: break-word;
}
.articleInfoWrap .articleInfo dl dt:first-child,
.articleInfoWrap .articleInfo dl dt:first-child + dd { 
    margin-top: 0;
}
.articleInfoWrap .articleInfo dl dd:nth-of-type(-n+3) {
    padding-right: 125px;
}
.articleInfoWrap .articleInfo .link_out {
    color: #F5B581;
    font-weight: 500;
    text-decoration: underline;
}
.articleInfoWrap .articleInfo .link_out::after {
    background-image: url(/images/kankou/nagarekawa/icon_link_color.svg);
}
.articleInfoLink {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    column-gap: 20px;
}
.articleInfoLink .articleBtn {
    width: 245px;
    padding: 8px 0;
    text-align: center;
    color: #fff;
    border-radius: 30px;
    position: relative;
}
.articleInfoLink .articleBtn::after {
    content: '▸';
    display: inline-block;
    margin-left: 5px;
    position: absolute;
}
.articleInfoLink .articleBtn.reservationBtn {
    background: #E39313!important;
}
.articleInfoWrap .map {
    position: absolute;
    top: 0;
    right: 0;
}
.articleInfoWrap .map a {
    display: block;
}
.articleInfoWrap .map a img {
    width: 100%;
    max-width: 98px;
    height: auto;
}
.articleBottomLink {
    margin: 60px auto;
    max-width: 500px;
    width: 100%;
}
.articleBottomLink a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #000;
    padding: 24px 40px;
    position: relative;
    border-radius: 20px;
}
.articleBottomLink a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #000;
}

/* article side */
.sideBlock {
    margin-bottom: 40px;
}
.sideBlockTitle {
    color: #333;
    font-size: 23px;
    line-height: 1.5;
    font-weight: 500;
    padding-bottom: 5px;
}
.sideBlockTitle img {
    display: block;
}
.sideRelationList {
    margin-top: 15px;
}
.sideRelationList li {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.sideRelationList li a {
    display: flex;
    justify-content: space-between;
}
.sideRelationText {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 61.7%;
    max-width: 210px;
    position: relative;
    box-sizing: border-box;
}
.sideRelationTitle {
    color: #333;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.sideRelationDate {
    color: #333;
    width: calc(100% - 30px);
    font-weight: 500;
    font-size: 12px;
    font-weight: 300;
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    line-height: 1;
}
/* article slider */
.articleSlidImg2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 20px;
}
.articleSlidImg2 .swiper-main--wrap {
    width: calc(100% - 104px);
    position: relative;
}
.articleSlidImg2 .swiper-main--wrap .swiper-main {
    width: calc(100% - 15px);
    max-width: 680px;
    margin-left: 0;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
}
.articleSlidImg2 .swiper-main--wrap .swiper-main .swiper-slide img {
    width: 100%;
    height: auto;
}
.articleSlidImg2 .swiper-thumbnail {
    width: 104px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.articleSlidImg2 .swiper-thumbnail .swiper-wrapper {
    display: block;
}
.articleSlidImg2 .swiper-thumbnail .swiper-slide {
    width: 104px;
    height: auto;
    margin-bottom: 5px;
    opacity: 0.4;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.articleSlidImg2 .swiper-thumbnail .swiper-slide:last-child {
    margin: 0;
}
.articleSlidImg2 .swiper-thumbnail .swiper-slide img {
    width: 100%;
    max-height: 70px;
    -o-object-fit: cover;
    object-fit: cover;
}
.articleSlidImg2 .swiper-thumbnail .swiper-slide-thumb-active {
    opacity: 1;
    position: relative;
}
.articlePickupImg {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 10;
}
/* article gourmet */
.gourmet_article .articleTitle {
    color: #333;
    padding-bottom: 5px;
    border-bottom: 3px solid #EFBF22;
}
.gourmet_article .articleInfoWrap .articleInfo .link_out {
    color: #E3B109;
}
.gourmet_article .articleInfoWrap .articleInfo .link_out::after {
    background-image: url(/images/kankou/nagarekawa/icon_link_gourmet.svg);
}
.gourmet_article .articleInfoLink .articleBtn {
    background: #EFBF22;
}
.gourmet_article .articleInfoWrap .infoName {
    border-bottom: 2px solid #EFBF22;
}
.gourmet_article .articleSlidImg2 .swiper-thumbnail .swiper-slide-thumb-active {
    border-color: #D1B100;
}
.gourmet_article .sideBlockTitle {
    border-bottom: 3px solid #EFBF22;
}
.gourmet_article .sideRelationList li::after {
    content: "";
    background-image: linear-gradient(to right, #EFBF22, #EFBF22 4px, transparent 4px, transparent 8px);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
}
/* article kankou */
.kankou_article .articleTitle {
    color: #000;
    padding-left: 18px;
    position: relative;
}
.kankou_article .articleTitle::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 30px;
    background: #F5B581;
    left: 0;
    top: 7px;
}
.kankou_article .articleInfoLink .articleBtn {
    background: #EFBF22;
}
.kankou_article .articleInfoWrap .infoName {
    position: relative;
}
.kankou_article .articleInfoWrap .infoName::after {
    content: "";
    background-image: linear-gradient(to right, #000, #000 4px, transparent 4px, transparent 8px);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: left bottom;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/* article yado */
.article_block#yado .MainTitle {
    max-width: 100%;
}
.article_block#yado .MainTitle img {
    width: 164px;
    height: auto;
}
.yado_article .articleTitle {
    color: #333;
    padding-bottom: 5px;
    border-bottom: 3px solid #66B2DD;
}
.yado_article .articleInfoWrap .articleInfo .link_out {
    color: #66B2DD;
}
.yado_article .articleInfoWrap .articleInfo .link_out::after {
    background-image: url(/images/kankou/nagarekawa/icon_link_yado.svg);
}
.yado_article .articleInfoLink .articleBtn {
    background: #66B2DD;
}
.yado_article .articleInfoWrap .infoName {
    border-bottom: 2px solid #66B2DD;
}
@media screen and (max-width: 599px) {
    .articleWrap {
        display: block;
        margin-top: 5px;
    }
    .articleMainBlock, .articleSideBlock {
        width: 100%;
        max-width: 100%;
        padding-bottom: 20px;
    }
    .articleTopTitle {
        font-size: 23px;
    }
    .articleTopText {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 15px;
    }
    .articleTitle {
        font-size: 18px;
        line-height: 1.4;
    }
    .articleSubTitle {
        font-size: 18px;
    }
    .articleText {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 10px;
    }
    .articleInfoLink {
        flex-direction: column;
        row-gap: 15px;
        margin-top: 20px;
    }
    .articleInfoLink .articleBtn {
        width: 88%;
        margin: auto;
        display: block;
        line-height: 1.5;
        font-size: 16px;
        padding: 10px 0;
    }
    .articleInfoWrap {
        padding: 20px 7%;
        margin: 20px -4% 0;
        position: relative;
    }
    .articleInfoWrap .infoName {
        font-size: 16px;
    }
    .articleInfoWrap .articleInfo {
        margin-top: 15px;
    }
    .articleInfoWrap .articleInfo dl {
        font-size: 12px;
    }
    .articleInfoWrap .articleInfo dl dt {
        width: 50px;
        font-size: 12px;
        margin-top: 15px;
        margin-right: 15px;
    }
    .articleInfoWrap .articleInfo dl dd {
        width: calc(100% - 65px);
        font-size: 12px;
        margin-top: 15px;
    }
    .articleInfoWrap .articleInfo dl dd:nth-of-type(-n+3) {
        padding-right: 0;
    }
    .articleInfoWrap .articleInfo dl dd.address {
        padding-right: 60px !important;
        min-height: 53px;
    }
    .articleInfoWrap .map {
        width: 52px;
    }
    .articleSlidImg2 {
        display: block;
    }
    .articleSlidImg2 .swiper-main--wrap {
        width: 100%;
        position: relative;
    }
    .articleSlidImg2 .swiper-main--wrap .swiper-main {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .articleSlidImg2 .swiper-thumbnail {
        max-width: unset;
        width: 100%;
    }
    .articleSlidImg2 .swiper-thumbnail .swiper-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: 2%;
        border-width: 1px;
    }
    .articleSlidImg2 .swiper-thumbnail .swiper-slide {
        width: 15% !important;
        height: auto;
        margin-right: 2%;
        border-width: 1px;
    }
    .articlePickupImg {
        top: 10px;
        left: 10px;
    }
    .articleBottomLink {
        margin: 40px 0;
    }
    .articleBottomLink a {
        padding: 16px 20px;
    }
    .sideBlockTitle {
        font-size: 18px;
    }
    .sideRelationList .articleImg {
        width: 120px;
        object-fit: cover;
        object-position: center;
    }
    .sideRelationText {
        flex: 1;
        max-width: unset;
        width: auto;
        margin-left: 10px;
    }
    .gourmet_article .articleTitle {
        border-width: 2px;
    }
    .kankou_article .articleTitle::before {
        height: 100%;
        top: 0;
    }
    .article_block#yado .MainTitle {
        text-align: center;
    }
    .article_block#yado .MainTitle img {
        width: 100%;
        max-width: 360px;
        height: auto;
    }
}

/* article tabs */
.articleSpotTitle {
    margin-top: 40px;
}
.nearestSection .spotTab {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #000;
    margin-top: 15px;
    column-gap: 30px;
}
.nearestSection .spotTab input {
    display: none;
}
.nearestSection .spotTab .tabItem {
    display: block;
    flex-grow: 1;
    width: 37.5%;
    max-width: 300px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 300;
    color: #000;
    text-align: center;
    border: 1px solid #000;
    padding: 8px 0px;
    border-bottom: unset;
    border-radius: 5px 5px 0 0;
    box-sizing: border-box;
    cursor: pointer;
}
.nearestSection .spotTab input:checked+.tabItem {
    color: #FFF;
    background: #000;
}
.nearestSection .aroundInfoWrap {
    scrollbar-width: thin;
    position: relative;
}
.nearestSection .aroundInfoWrap {
    display: none;
}
.nearestSection .aroundInfoWrap.on {
    display: block;
}
.nearestSection .aroundInfoWrap .swiper-container {
    padding-bottom: 10px;
}
.nearestSection .aroundInfoWrap .aroundInfoList {
    display: inline-flex;
    margin-top: 20px;
}
.nearestSection .aroundInfoWrap .aroundInfoList li {
    width: 260px;
    border: 1px solid #999;
    margin-right: 20px;
    box-sizing: border-box;
    position: relative;
}
.nearestSection .aroundInfoWrap .aroundInfoList li:before {
    content: "";
    display: block;
    width: 32px;
    height: 33px;
    background-image: url(/images/kankou/nagarekawa/icon_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 16px;
    right: 10px;
}
.nearestSection .aroundInfoWrap .aroundInfoList li a {
    display: block;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoImgWrap {
    position: relative;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoImgWrap img {
    width: 100%;
    height: auto;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTextWrap {
    width: 100%;
    padding: 8px 10px 15px;
    box-sizing: border-box;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTag {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 12px;
    background: #F6F5F0;
    border: 1px solid #D1C9AE;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTextWrap .aroundInfoDistance {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    background: #F2F2F2;
    padding: 1px 6px;
    box-sizing: border-box;
    line-height: 1.4;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTextWrap .aroundInfoDistance .spotName {
    display: inline-block;
    color: #999;
    font-size: 11px;
    margin-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTextWrap .aroundInfoDistance .small {
    display: inline-block;
    color: #999;
    font-size: 10px;
    margin-right: 6px;
    flex-shrink: 0;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTextWrap .aroundInfoDistance .num {
    display: inline-block;
    color: #AF9D63;
    font-size: 16px;
    flex-shrink: 0;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTextWrap .aroundInfoTitle {
    width: 100%;
    min-height: 39px;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 6px;
}
.nearestSection .aroundInfoWrap .aroundInfoList li .aroundInfoTextWrap .aroundInfoAddress {
    width: calc(100% - 45px);
    min-height: 38px;
    color: #333;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.nearestSection .aroundInfoWrap .swiper-button-next, .nearestSection .aroundInfoWrap .swiper-button-prev {
    position: absolute;
    margin-top: 0;
    width: 30px;
    height: 45px;
    bottom: calc(50% - 40px);
    background: rgba(0, 0, 0, 0.7);
    z-index: 3;
    top: unset;
    left: unset;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
}
.nearestSection .aroundInfoWrap .swiper-button-prev {
    left: 0;
}
.nearestSection .aroundInfoWrap .swiper-button-next {
    right: 0;
}
.nearestSection .aroundInfoWrap .swiper-button-next.swiper-button-disabled, .nearestSection .aroundInfoWrap .swiper-button-prev.swiper-button-disabled {
    pointer-events: unset;
}
.nearestSection .aroundInfoWrap .swiper-button-prev:before {
    display: block;
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border: 0px;
    top: 35%;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    margin-left: 12px;
}
.nearestSection .aroundInfoWrap .swiper-button-next:before {
    display: block;
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border: 0px;
    top: 35%;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 7px;
}
@media screen and (max-width: 599px) {
    .articleSpotTitle {
        margin-top: 20px;
    }
    .nearestSection .spotTab {
        column-gap: 15px;
    }
    .nearestSection .spotTab .tabItem {
        max-width: 150px;
        font-size: 14px;
    }
    .nearestSection .aroundInfoWrap .swiper-container {
        margin: 0 -4%;
        padding: 0 4% 10px;
    }
    .nearestSection .aroundInfoWrap .swiper-scrollbar {
        height: 4px;
    }
}


/* iOS26不具合暫定対応 */
@media screen and (max-width: 599px) {
    body#landmark .ios-fix {
        display: block !important;
        position: relative;
        z-index: 99999;
        pointer-events: none;
    }
    body#landmark .ios-fix::before {
        content: "";
        width: 100%;
        height: 200px;
        position: fixed;
        top: -200px;
        left: 0;
        background-color: #FFF;
        pointer-events: none;
    }
}