@charset "utf-8";
/* all */
:root {
	--color-em: #548535;
	--color-white: #FFF;
	--color-black: #222;
}
html {
	scroll-behavior: smooth;
}
a:link {
	text-decoration: none;
    transition: opacity .25s ease-in-out;
}
a:hover {
    opacity: .65;
}
figure,
picture {
	display: block;
}
img {
	width: 100%;
}
main {
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--color-black);
	background-color: #f0efeb;
}
.btn_line {
	width: 280px;
	height: 60px;
	background-color: #06C755;
	border-radius: 100vmax;
	display: flex;
	flex-direction: row;
	justify-content: right;
	align-items: center;
	box-shadow: #0D5F2F 0 4px;
	margin-inline: auto;
    position: relative;
    z-index: 1;
}
.btn_line span {
    display: block;
    width: 75%;
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--color-white);
    font-weight: 600;
    text-align: center;
}
.btn_line::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
    transform: rotate(45deg);
    margin-right: 22px;
}

.fadein {
    opacity: 0;
}
.fadein.active {
    animation: fadein 1s ease 0.1s 1 forwards;
}
@keyframes fadein {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.sp-only { display: none;}

@media screen and (max-width:700px) {
	.pc-only { display: none;}
	.sp-only { display: block;}
	br.sp-only { display: inline;}

	.btn_line {
		width: 49.0667vw;
		height: auto;
		aspect-ratio: 1 / 0.2609;
		margin-inline: auto;
	}
	.btn_line span {
		font-size: 4.8vw;
	}
	.btn_line::after {
		width: 5%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin-right: 7%;
	}
}
/* /all */

/* kv */
header {
    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-repeat: no-repeat;
    background-position: center top;
	background-size: 1440px 540px;
	height: 540px;
	padding-top: 70px;
}

header .kv_container {
    max-width: 780px;
    height: 400px;
    margin-inline: auto;
    border-radius: 10px;
    background-color: rgb(49 60 42 / .7);
    padding-top: 38px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 38px;
}

header picture {
	margin-top: 13px;
    padding-left: 2px;
	flex-shrink: 0;
}

header h1 {
	font-size: 38px;
	font-weight: 600;
	color: var(--color-white);
	text-align: center;
    letter-spacing: 3px;
    line-height: 1.6;
    padding-bottom: 19px;
	text-wrap: nowrap;
}

header hgroup p {
	font-size: 19px;
	font-weight: 600;
	color: var(--color-white);
	text-align: center;
	letter-spacing: 1px;
    line-height: 1.7;
}
header hgroup p::before,
header hgroup p::after {
	content: "";
	display: block;
	width: 396px;
	height: 4px;
	margin-inline: auto;
	background-image: url(../img/kv_border_pc.webp);
	background-repeat: no-repeat;
	background-size: 100%;
}
header hgroup p::before {
	margin-bottom: 12px;
}
header hgroup p::after {
	margin-top: 13px;
}
header .btn_wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 37px;
    padding-top: 28px;
}
header .btn_wrapper p {
	font-size: 15px;
	color: var(--color-white);
    padding-left: 5px;
    line-height: 1.6;
}
header .btn_line {
	width: 180px;
	height: 47px;
	margin-inline: unset;
}
header .btn_line span {
	width: 78%;
	font-size: 17px;
}
header .btn_line::after {
	width: 9px;
    height: 9px;
	margin-right: 13px;
}
@media screen and (min-width:1440px) {
	header {
	    background-size: 100%;
        overflow: hidden;
    }
}
@media screen and (max-width:840px) {
	header .kv_container {
		margin-inline: 25px;
		padding-inline: 6.2% 5.8%;
	}
	header h1 {
		font-size: 4.5239vw;
	    letter-spacing: 0;
	}
}
@media screen and (max-width:700px) {
	header {
		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);
		background-size: 100%;
		height: auto;
		aspect-ratio: 1 / 1.44;
		padding-top: 0;
		position: relative;
	}
	header .kv_container {
		height: auto;
		margin-inline: auto;
		border-radius: unset;
		background-color: unset;
		flex-direction: column;
	    align-items: center;
		padding-top: 9.4%;
		padding-inline: 0;
		gap: 0;

	}
	header picture {
		width: 37.8667%;
		order: 2;
        padding-left: 0;
        margin-top: 4%;
	}
	header .kv_text {
		width: 100%;
		order: 1;
	}
	header h1 {
        font-size: 8.7467vw;
        letter-spacing: 1px;
        padding-inline: 4% 2%;
        padding-bottom: 4.2%;
		text-wrap: wrap;
	}
	header hgroup p::before,
	header hgroup p::after {
		width: 79.4827vw;
		height: auto;
		aspect-ratio: 1 / 0.0129;
		background-image: url(../img/kv_border_sp.webp);
	}
	header hgroup p::before {
	    margin-bottom: 3%;
	}
	header hgroup p::after {
	    margin-top: 3.5%;
	}
	header hgroup p {
	    font-size: 4.5334vw;
	}
	header .btn_wrapper {
	    display: block;
        padding-block: 3% 4.5%;
		background-color: rgb(49 60 42 / 0.7);
		position: absolute;
		bottom: 0;
	}
	header .btn_wrapper p {
		font-size: 3.7334vw;
		text-align: center;
		padding-left: 0;
        padding-bottom: 2.5%;
	}
	header .btn_line {
		width: 48vw;
		margin-inline: auto;
	    height: auto;
    	aspect-ratio: 1 / 0.26115;
	}
	header .btn_line span {
    	font-size: 4.5334vw;
	}
	header .btn_line::after {
        width: 5%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin-right: 7%;
    }
}
/* /kv */

/* benefits */
.benefits {
	padding-block: 46px 51px;
	position: relative;
}
.benefits::after {
	content: "";
	display: block;
	width: 100%;
	height: 238px;
	background-color: #6a7264;
	position: absolute;
	bottom: 0;
	z-index: 0;
}
.benefits h2 {
	font-size: 26px;
	text-align: center;
    letter-spacing: 0.06em;
    padding-bottom: 42px;
}
.benefits h2 .color {
	color: var(--color-em);
}
.benefits h2 .emphasys {
    font-size: 30px;
    background-image: radial-gradient(circle at center, var(--color-em) 10%, transparent 15%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 0.95em 0.3em;
    padding-top: .2em;
}
.benefits .benefits_wrapper {
	max-width: 780px;
	margin-inline: auto;
    position: relative;
    z-index: 1;
}
.benefits .benefits_wrapper li {
	background-color: var(--color-white);
	border-radius: 10px;
    margin-bottom: 41px;
}
.benefits .benefits_wrapper li:last-of-type {
    margin-bottom: 47px;
}
.benefits .list-order_box {
	width: 415px;
	height: 32px;
	position: relative;
}
.benefits .list-order_box p {
    width: 92px;
    height: 72px;
    font-size: 18px;
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    margin-inline: auto;
}
.benefits .list-order_box p span {
    display: inline-block;
    font-size: 34px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    color: var(--color-em);
    background-color: #FDFFD1;
    letter-spacing: -3px;
    padding-inline: 5px;
    margin-left: 6px;
}
.benefits .list-order_box p::after {
    content: "";
    display: block;
    width: 89px;
    height: 12px;
    background-image: url(../img/decoration_list-order.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 4px;
}
.benefits .grid-container {
    padding-bottom: 44px;
    display: grid;
    grid-template:
        ". pic" 22px
        "h3 pic" 71px
        "p pic" 108px / 340px 320px;
	justify-content: center;
	column-gap: 40px;
}
.benefits .grid-container h3 {
    font-size: 19px;
    text-align: center;
    color: var(--color-em);
    line-height: 1.6;
    padding-bottom: 9px;
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	border-bottom: 1px var(--color-black) dashed;
	letter-spacing: 0.06em;
}
.benefits .grid-container .benefits_text {
    padding-top: 12px;
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	line-height: 1.8;
	font-size: 16px;
}
.benefits .grid-container picture {
	grid-column: 2 / 3;
	grid-row: 1 / 4;
}

.benefits li:nth-of-type(even) .list-order_box {
	margin-inline: auto 0;
}
.benefits li:nth-of-type(even) .list-order_box p::after {
	transform: scale(-1, 1);
}
.benefits li:nth-of-type(even) .grid-container {
    grid-template:
        ". pic" 36px
        "h3 pic" 71px
        "p pic" 94px / 320px 340px;
}
.benefits li:nth-of-type(even) .grid-container h3 {
	grid-column: 2 / 3;
}
.benefits li:nth-of-type(even) .grid-container .benefits_text {
	grid-column: 2 / 3;
}
.benefits li:nth-of-type(even) .grid-container picture {
	grid-column: 1 / 2;
}
@media screen and (max-width:840px) {
	.benefits .benefits_wrapper {
		width: 92.8572%;
	}
	.benefits .list-order_box {
	    width: 49.4048vw;
	}
	.benefits .grid-container {
		grid-template-columns: 40.4762vw 38.0953vw;
	}
	.benefits li:nth-of-type(even) .grid-container {
		grid-template-columns: 38.0953vw 40.4762vw;
	}
}
@media screen and (max-width:700px) {
	.benefits {
		padding-block: 9.3% 7.9%;
	}
	.benefits h2 {
		font-size: 5.8667vw;
        line-height: 1.8;
	    padding-bottom: 5.5%;
	}
	.benefits h2 .emphasys {
 	   font-size: 6.9334vw;
	}
	.benefits .list-order_box {
        width: 39%;
        height: auto;
        aspect-ratio: 1 / 0.245;
    }
	.benefits .list-order_box p {
        width: 24.5324vw;
        height: auto;
        aspect-ratio: 1 / 0.7827;
		font-size: 4.2667vw;
        top: -66%;
	}
	.benefits .list-order_box p span {
		background-image: none;
		background-color: #FDFFD1;
        font-size: 8vw;
        padding-inline: 5.5%;
        margin-left: 6.5%;
        line-height: 1.1;
	}
	.benefits .list-order_box p::after {
		width: 96.76%;
		height: auto;
		aspect-ratio: 1 / 0.1349;
	    margin-top: 3%;
	}
	.benefits .benefits_wrapper {
        width: 89.3334%;
    }
    .benefits .grid-container,
	.benefits li:nth-of-type(even) .grid-container {
        grid-template: unset;
		column-gap: 0;
	    padding-bottom: 8%;
	}
	.benefits .grid-container h3,
	.benefits li:nth-of-type(even) .grid-container h3 {
		font-size: 4.8vw;
		grid-column: 1;
		grid-row: 1;
		border-bottom: none;
        padding-bottom: 4.5%;
	}
	.benefits .grid-container .benefits_text,
	.benefits .grid-container picture,
	.benefits li:nth-of-type(even) .grid-container .benefits_text,
	.benefits li:nth-of-type(even) .grid-container picture {
        width: 88.0598%;
        margin-inline: auto;
		grid-column: 1;
	}
	.benefits .grid-container .benefits_text {
        font-size: 4vw;
        grid-row: 3;
        padding-top: 4.8%;
        line-height: 1.6;
	}
	.benefits .grid-container picture {
		grid-row: 2;
	}
	.benefits .benefits_wrapper li {
	    margin-bottom: 10.7%;
	}
	.benefits .benefits_wrapper li:last-of-type {
    	margin-bottom: 7.2%;
	}
	.benefits::after {
    	height: auto;
	    aspect-ratio: 1 / 0.4267;
	}
}
/* /benefits */

/* facilities */
.facilities {
	padding-block: 55px;
	position: relative;
}
.facilities::after {
	content: "";
	display: block;
	width: 100%;
	height: 160px;
	background-color: #6a7264;
	position: absolute;
	bottom: 0;
	z-index: 0;
}
.facilities hgroup {
	text-align: center;
	padding-bottom: 43px;
}
.facilities hgroup h2 {
	font-size: 30px;
    padding-bottom: 9px;
	color: var(--color-em);
}
.facilities hgroup p {
	font-size: 20px;
	font-weight: 600;
}
.facilities a {
	position: relative;
}
.facilities a .label {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 1px;
    color: var(--color-white);
    background-color: rgb(49 60 42 / .8);
    padding-inline: 11px;
    position: absolute;
    top: 30px;
    left: 30px;
}
.facilities .facilities_list {
	max-width: 1020px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
    padding-bottom: 100px;
}
.facilities .facilities_list ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	column-gap: 15px;
    row-gap: 24px;
    padding-bottom: 40px;
}
.facilities .facilities_list li {
    width: 32.353%;
	opacity: 0;
    animation: fadein_more 1s ease 0.1s 1 forwards;
}

@keyframes fadein_more {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.facilities .facilities_list li a {
	display: block;
	width: 100%;
    height: 296px;
	border-radius: 10px;
	background-color: var(--color-white);
    padding: 20px 20px 18px;
}
.facilities .facilities_list li a .hotel-name {
    font-size: 15px;
    color: var(--color-black);
    line-height: 1.6;
    padding-top: 17px;
    font-weight: 400;
}
.facilities .btn_more {
	width: 174px;
	margin-inline: auto;
	cursor: pointer;
    transition: opacity .25s ease-in-out;
}
.facilities .btn_more:hover {
    opacity: .65;
}
.facilities .btn_more::after {
    content: "";
    display: block;
    background-image: url(../img/parts_border.webp);
    background-repeat: repeat-x;
    background-size: 4.27%;
    width: 100%;
    height: 4px;
}
.facilities .btn_more span {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: 20px;
	color:#6A7264;
    font-weight: 600;
	letter-spacing: 1px;
}
.facilities .btn_more span::before,
.facilities .btn_more span::after {
    content: "";
    display: block;
    width: 15px;
    height: 30px;
    margin-inline: 3px;
    background-image: url(../img/vector_more.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.facilities #close_btn01.btn_more span::before,
.facilities #close_btn01.btn_more span::after {
	transform: rotate(180deg);
}

@media screen and (max-width:1080px) {
	.facilities .facilities_list {
		width: 94.4445%;
	}
	.facilities .facilities_list ul {
		column-gap: 1.4705%;
	}
	.facilities .facilities_list li a {
		padding: 6%;
		height: auto;
		aspect-ratio: 1 / 0.897;
	}
	.facilities a .label {
		top: 10.3%;
		left: 9.3%;
	}
}
@media screen and (max-width:840px) {
	.facilities .facilities_list li a {
        aspect-ratio: 1 / 1.13;
	}
	.facilities a .label {
        top: 8.3%;
	}
}
@media screen and (max-width:700px) {
	.facilities {
		padding-block: 6.5% 7.6%;
	}
	.facilities hgroup {
	    padding-bottom: 6.5%;
	}
	.facilities hgroup h2 {
    	font-size: 5.8667vw;
	    padding-bottom: 3%;
	}
	.facilities hgroup p {
		font-size: 4.8vw;
        letter-spacing: 1px;
        line-height: 1.6;
	}
	.facilities .facilities_list {
		width: 89.3734%;
        padding-bottom: 15.4%;
	}
	.facilities .facilities_list ul {
        column-gap: 2.1%;
		row-gap: unset;
	    padding-bottom: 4.8%;
	}
	.facilities .facilities_list li {
		width: 48.8886%;
        padding-bottom: 3%;
	}
	.facilities .facilities_list li picture {
		aspect-ratio: 1 / 0.8334;
	}
	.facilities .facilities_list li picture img {
		height: 100%;
		object-fit: cover;
	}
	.facilities .facilities_list li a {
        aspect-ratio: 1 / 1.2451;
	}
	.facilities a .label {
    	font-size: 2.6667vw;
	    line-height: 1.6;
		top: 8%;
		left: 10%;
        padding-inline: 5.5%;
    }
	.facilities .facilities_list li a .hotel-name {
	    font-size: 3.4667vw;
		padding-top: 4.6%;
		line-height: 1.5;
	}
	.facilities .btn_more span {
	    font-size: 4.5334vw;
	}
	.facilities .btn_more {
	    width: 39.3494vw;
	}
	.facilities .btn_more span::before,
	.facilities .btn_more span::after {
		width: 9%;
		height: auto;
		aspect-ratio: 1 / 1.7;
	}
	.facilities::after {
		height: auto;
		aspect-ratio: 1 / 0.2827;
	}
}
/* /facilities */