@charset "utf-8";
/* CSS Document */

/* custom properties */
:root {
	--color-accent: #53735B;
	--color-text_light: #ffffff;
	--color-text_dark: #222222;
	--color-bg_white: #ffffff;
	--color-bg_light: #f9f8f4;
	--color-bg_dark: #f2f1e9;

    --kv-width: 1440px;
    --kv-height: 500px;
}
/* /custom properties */

/* reset */
#content * {
	box-sizing: border-box;
}

#content figure,
#content picture {
	display: block;
}

#content img {
	width: 100%;
}
/* /reset */

/* all */
#content {
	background-color: var(--color-bg_light);
	overflow: hidden;
}
#content .sp-only {
	display: none;
}
#content a {
	opacity: 1;
	transition: opacity .25s ease-in-out;
}
#content a:hover {
    opacity: .65;
    text-decoration: none;
}
@media only screen and (max-width: 700px){
	#content .pc-only {
		display: none;
	}
	#content .sp-only {
		display: block;
	}
}
/* /all /

/* KV */
.kv {
	max-width: 1440px;
	width: 100%;
	height: var(--kv-height);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
    background-image: url(../img/kv_pc.webp);
    background-image: image-set(url(../img/kv_pc.webp) 1x, url(../img/kv_pc@2x.webp) 2x);
    background-image: -webkit-image-set(url(../img/kv_pc.webp) 1x, url(../img/kv_pc@2x.webp) 2x);
    background-size: var(--kv-width) var(--kv-height);
    background-position: center;
}
.kv .kv_text {
    width: fit-content;
    height: fit-content;
    font-family: "Shippori Mincho", serif;
    color: var(--color-text_light);
    letter-spacing: .04em;
    padding-top: 25px;
}
.kv .kv_text h1 {
    font-size: 48px;
	line-height: 1.4;
    text-align: center;
    font-weight: 500;
}
.kv .kv_text p {
    font-size: 20px;
	line-height: 2;
    text-align: center;
    padding-top: 13px;
}

@media only screen and (max-width: 700px){
	#page.sp-optimization { padding: 0 0 0 0 !important;}
    #page.visitor {
        padding: 0!important;/*全ページリニューアル次第、common_shuzenjiの方と合わせて消す*/
    }
	.kv {
        height: auto;
        aspect-ratio: 1 / 1.28;
        background-size: 100%;
		background-image: url(../img/kv_sp.webp);
		background-image: image-set(url(../img/kv_sp.webp) 1x, url(../img/kv_sp.webp) 2x);
		background-image: -webkit-image-set(url(../img/kv_sp.webp) 1x, url(../img/kv_sp.webp) 2x);
        margin-top: 16.2%;
    }
	.kv .kv_text {
        padding-top: 0;
    }
	.kv .kv_text h1 {
		font-size: max(40px, var(--sp-fs40));
	}
    .kv .kv_text p {
        font-size: max(18px, var(--sp-fs18));
        padding-top: 4%;
    }
}
/* /KV */

/* contents */
#main-cont {
    color: var(--color-text_dark);
    padding-block: 40px 60px;
}
#main-cont .subheading {
    width: 220px;
    font-family: "Shippori Mincho", serif;
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-accent);
    margin-inline: auto;
}
#main-cont .subheading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    margin-top: 17px;
}
.contents-lead {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 2.2;
    text-align: center;
    padding: 9px 24px 52px;
}

@media screen and (max-width:700px) {
    #main-cont {
        padding-block: 8.2% 60px;
    }
    #main-cont .subheading {
        width: 58.6667%;
        font-size: max(22px, var(--sp-fs22));
    }
    #main-cont .subheading::after {
        margin-top: 6%;
    }
    .contents-lead {
        width: 89.3334%;
        margin-inline: auto;
        text-align: left;
        font-size: max(16px, var(--sp-fs16));
        line-height: 2;
        padding: 2.3% 0 10.2%;
    }
}
/* /lead */

/* hotel-info */
.hotspring-info {
    margin-top: 0;
    padding: 64px 24px 37px;
	background-color: var(--color-bg_dark);
    position: relative;
    z-index: 1;
}
.hotspring-info::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-inline: auto;
    width: 100vw;
    height: 200px;
    background-color: rgb(255 255 255 / .5);
    z-index: 1;
}
.hotspring-info .bath {
    max-width: 980px;
    margin-inline: auto;
	position: relative;
    padding-bottom: 47px;
    display: flex;
    justify-content: left;
    position: relative;
}
.hotspring-info .bath.roten {
    padding-bottom: 9px;
}
.hotspring-info .bath .text-wrapper {
    width: 270px;
    padding-inline: 50px 0;
    flex-shrink: 0;
}
.hotspring-info .public.bath .text-wrapper {
    padding-inline: 0 50px;
}
.hotspring-info .bath .text-wrapper .minor-heading {
    width: 100%;
    font-size: 24px;
    font-family: "Shippori Mincho", serif;
    color: var(--color-accent);
    line-height: .7;
    text-align: center;
    border-bottom: 1px solid currentColor;
    padding-block: 0 25px;
}
.hotspring-info .bath .text-wrapper p {
    font-family: "Shippori Mincho", serif;
	writing-mode: vertical-rl;
    font-size: 16px;
    line-height: 2.12;
    white-space: nowrap;
    letter-spacing: 0.165em;
}
.hotspring-info .bath .text-wrapper .list-text {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 15px;
    padding-block: 21px 18px;
}
.hotspring-info .bath picture {
    max-width: 710px;
}
.hotspring-info .sauna {
    max-width: 980px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    padding-block: 82px 56px;
}
.hotspring-info .sauna .text-wrapper {
    width: 390px;
    flex-shrink: 0;
    margin-right: 24px;
}
.hotspring-info .sauna picture {
    width: 540px;
    margin-top: -35px;
}
.hotspring-info .sauna .minor-heading {
    font-family: "Shippori Mincho", serif;
    font-size: 20px;
    line-height: 1.4;
    color: var(--color-accent);
}
.hotspring-info .sauna .minor-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    margin-block: 15px 9px;
}
.hotspring-info .sauna p {
    font-family: "Shippori Mincho", serif;
    font-size: 15px;
    line-height: 2;
    padding-bottom: 5px;
}
.hotspring-info .szj-detail {
    max-width: 980px;
    margin-inline: auto;
    background-color: #ECEAE1;
    padding: 12px 24px 27px;
    position: relative;
    z-index: 2;
}
.hotspring-info .szj-detail .minor-heading {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 2;
    letter-spacing: .06em;
    text-align: center;
    padding-bottom: 16px;
}
.hotspring-info .szj-detail .dl_box {
    max-width: 680px;
    margin-inline: auto;
    background-color: rgb(255 255 255 / .5);
    padding: 12px 20px 9px;
}
.hotspring-info .szj-detail .dl_box dl {
    max-width: 600px;
    margin-inline: auto;
    font-size: 14px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.hotspring-info .szj-detail .dl_box dl:nth-of-type(n+2)::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgb(113 101 85 / .3);
    margin-block: 3px 4px;
}
.hotspring-info .szj-detail dt {
    width: 72px;
    text-align: right;
}
.hotspring-info .szj-detail dd::before {
    content: "：";
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-inline: 14px 17px;
}
.hotspring-info .szj-detail dd {
    width: calc(100% - 72px);
    display: flex;
}
.hotspring-info .szj-detail .caution {
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    padding-top: 21px;
}
@media screen and (max-width: 1048px) {
	.hotspring-info .bath .text-wrapper {
	    padding-inline: 30px 20px;
	}
}
@media screen and (max-width: 800px) {
    .hotspring-info .sauna picture {
        margin-top: 0;
    }
    .hotspring-info .sauna {
        padding-block: 0px 48px;
    }
}
@media screen and (max-width: 700px) {
    .hotspring-info {
        padding: 10.7% 0 0;
    }
    .hotspring-info::before {
        content: none;
    }
    .hotspring-info .bath {
        max-width: 89.3334%;
        width: 100%;
        padding-bottom: 0;
        height: auto;
        aspect-ratio: unset;
        flex-direction: column;
    }
    .hotspring-info .bath.roten {
        padding-bottom: 6%;
    }
    .hotspring-info .bath.public {
        flex-direction: column-reverse;
        padding-bottom: 6%;
    }
    .hotspring-info .bath .text-wrapper {
		width: 88.0598%;
        height: auto;
        aspect-ratio: unset;
        padding-inline: unset;
		margin-inline: auto;
        display: flex;
		justify-content: space-between;
        flex-wrap: wrap;
        padding-block: 5% 0;
    }
    .hotspring-info .bath.public .text-wrapper {
        padding-inline: 0;
    }
    .hotspring-info .bath.roten .text-wrapper {
        flex-direction: row-reverse;
    }
    .hotspring-info .bath .text-wrapper::after {
        content: "";
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 0.6348 / 1;
        background-color: rgb(242 241 233 / .5)!important;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .hotspring-info .bath picture {
        width: 100%;
    }
	.hotspring-info .bath .text-wrapper .minor-heading {
        writing-mode: vertical-rl;
        width: 12.2034%;
        height: fit-content;
        font-size: max(22px, var(--sp-fs22));
        line-height: .8115;
        padding-block: unset;
        padding-inline: 4% 3%;
        display: flex;
        align-items: center;
        border-top: solid 1px var(--color-accent);
        border-bottom: solid 1px var(--color-accent);
        text-align: left;
        letter-spacing: .3em;
        margin-top: 9.3%;
	}
	.hotspring-info .bath.roten .text-wrapper .minor-heading {
        margin-top: 5.3%;
    }
    .hotspring-info .bath .text-wrapper p {
        font-size: max(14px, var(--sp-fs14));
        letter-spacing: unset;
		writing-mode: unset;
	    white-space: unset;
        line-height: 2;
	}
    .hotspring-info .bath .text-wrapper .list-text {
        width: 79.665%;
        gap: unset;
        padding-block: 2.5% 0;
        margin-top: -3%;
    }
    .hotspring-info .sauna {
        max-width: 89.3334%;
        flex-direction: column-reverse;
        padding-block: 0 10%;
    }
    .hotspring-info .sauna picture {
        width: 100%;
        margin-top: unset;
    }
    .hotspring-info .sauna .text-wrapper {
        width: 89.3334%;
        margin-inline: auto;
        display: flex;
        padding-top: 4.5%;
    }
    .hotspring-info .sauna p {
        font-size: max(13px, var(--sp-fs13));
        padding-bottom: 1%;
    }
    .hotspring-info .sauna .minor-heading {
        width: 12.03%;
        font-size: max(20px, var(--sp-fs20));
        writing-mode: vertical-rl;
        height: fit-content;
        line-height: .8115;
        margin-top: 9.8%;
        padding-block: unset;
        padding-inline: 4% 3%;
        display: flex;
        align-items: center;
        border-top: solid 1px var(--color-accent);
        border-bottom: solid 1px var(--color-accent);
        letter-spacing: .3em;
        flex-shrink: 0;
    }
    .hotspring-info .sauna .minor-heading::before,
    .hotspring-info .sauna .minor-heading::after {
        content: unset;
    }
    .hotspring-info .sauna .sp-flex-wrapper {
        padding-left: 24px;
    }
    .hotspring-info .szj-detail {
        padding: 5% 6% 2.8%;
    }
    .hotspring-info .szj-detail .minor-heading {
        font-size: max(15px, var(--sp-fs15));
        padding-bottom: 3.2%;
    }
    .hotspring-info .szj-detail .dl_box {
        padding: 5% 6% 4.4%;
    }
    .hotspring-info .szj-detail .dl_box dl:nth-of-type(n+2)::before {
        margin-block: 1% 2.4%;
    }
    .hotspring-info .szj-detail .dl_box dl {
        align-items: flex-start;
        font-size: max(12px, var(--sp-fs12));
        line-height: 1.4;
    }
    .hotspring-info .szj-detail dt {
        width: 21%;
        padding-left: 0;
    }
    .hotspring-info .szj-detail dd {
        width: 79%;
    }
    .hotspring-info .szj-detail dd::before {
        font-size: max(12px, var(--sp-fs12));
        margin-inline: 3%;
    }
    .hotspring-info .szj-detail .caution {
        font-size: max(11px, var(--sp-fs11));
        padding-top: 5.3%;
    }
}
/* /hotel-info */

/* hotspring_zmh */
.hotspring_zmh {
    max-width: 980px;
    margin-inline: auto;
    padding-block: 15px 4px;
    font-family: "Shippori Mincho", serif;
}
.hotspring_zmh .minor-heading {
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-accent);
    padding-bottom: 10px;
}
.hotspring_zmh .zmh-text {
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    padding-bottom: 15px;
}
.hotspring_zmh .zmh-text small {
    display: block;
    font-family: yu-gothic-pr6n, sans-serif;
    font-size: 14px;
}
.hotspring_zmh ul {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
.hotspring_zmh li {
    width: 314px;
}
.hotspring_zmh li .minor-heading {
    font-size: 18px;
    line-height: 2;
    text-align: center;
    color: var(--color-accent);
    letter-spacing: .06em;
    text-align: left;
    color: var(--color-text_dark);
    padding-block: 12px 4px;
}
.hotspring_zmh li p {
    font-size: 15px;
    line-height: 1.8;
}
.hotspring_zmh li .info-date {
    font-family: yu-gothic-pr6n, sans-serif;
    font-size: 14px;
    padding-top: 11px;
}
@media screen and (max-width: 1028px) {
    .hotspring_zmh {
        margin-inline: 24px;
    }
    .hotspring_zmh .zmh-text small {
        display: inline;
    }
}
@media screen and (max-width: 700px) {
    .hotspring_zmh {
        padding-block: 13% 4px;
    }
    .hotspring_zmh .minor-heading {
        font-size: max(20px, var(--sp-fs20));
    }
    .hotspring_zmh .zmh-text {
        font-size: max(14px, var(--sp-fs14));
        padding-bottom: 6%;
        line-height: 1.6;
    }
    .hotspring_zmh .zmh-text small {
        font-size: max(12px, var(--sp-fs12));
    }
    .hotspring_zmh ul {
        display: block;
    }
    .hotspring_zmh li {
        width: 100%;
        padding-bottom: 5%;
    }
    .hotspring_zmh li .minor-heading {
        font-size: max(16px, var(--sp-fs16));
        padding-block: 3% 0.8%;
    }
    .hotspring_zmh li p {
        font-size: max(13px, var(--sp-fs13));
    }
    .hotspring_zmh li .info-date {
        font-size: max(12px, var(--sp-fs12));
        padding-top: 2%;
    }
}

/* /hotspring_zmh */

/* hotspring_sss */
.hotspring_sss {
    max-width: 980px;
    margin-inline: auto;
    padding-block: 34px 60px;
    font-family: "Shippori Mincho", serif;
}
.hotspring_sss .minor-heading {
    font-size: 22px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-accent);
    padding-bottom: 10px;
}
.hotspring_sss .image-wrapper {
    display: flex;
    padding-top: 9px;
}
.hotspring_sss .image-wrapper picture {
    width: 50%;
}
.hotspring_sss .text-wrapper .minor-heading {
    font-size: 18px;
    line-height: 2;
    text-align: center;
    color: var(--color-accent);
    letter-spacing: .06em;
    text-align: center;
    color: var(--color-text_dark);
    padding-block: 12px 4px;
}
.hotspring_sss .text-wrapper p {
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
    padding-bottom: 17px;
}
#content .hotspring_sss a.btn_reserve {
    width: 320px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: yu-gothic-pr6n, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--color-accent);
    border: 1px solid currentColor;
    margin-inline: auto;
    background-color: var(--color-bg_white);
}
.hotspring_sss a.btn_reserve::after {
    content: "";
    display: block;
    width: 11px;
    height: 8px;
    background-image: url(../../../common/img/hotel/icon_vector_green.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: absolute;
    top: 45%;
    right: 3.4%;
}
@media screen and (max-width: 1028px) {
    .hotspring_sss {
        margin-inline: 24px;
    }
}
@media screen and (max-width: 700px) {
    .hotspring_sss {
        width: 89.3334%;
        margin-inline: auto;
        padding-block: 0 6%;
    }
    .hotspring_sss .minor-heading {
        font-size: max(20px, var(--sp-fs20));
        line-height: 1.6;
        padding-bottom: 4.5%;
    }
    .hotspring_sss .image-wrapper {
        display: block;
    }
    .hotspring_sss .image-wrapper picture {
        width: 100%;
    }
    .hotspring_sss .text-wrapper .minor-heading {
        font-size: max(16px, var(--sp-fs16));
        text-align: left;
        padding-block: 3% .5%;
    }
    .hotspring_sss .text-wrapper p {
        font-size: max(13px, var(--sp-fs13));
        text-align: left;
        padding-bottom: 4%;
    }
    #content .hotspring_sss a.btn_reserve {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 0.1453;
        font-size: max(14px, var(--sp-fs14));
    }
    .hotspring_sss a.btn_reserve::after {
        width: 2.5%;
        height: auto;
        aspect-ratio: 1 / .75;
    }
}
/* /hotspring_sss */

/* バナー */
.plan_ranking_bnr {
    width: 600px;
    margin-inline: auto;
}
.plan_ranking_bnr picture {
    width: 100%;
}
@media screen and (max-width: 700px) {
    .plan_ranking_bnr {
        width: 89.3334%;
    }
}
/* /バナー */