@charset "shift_jis";
/* =========================================================
reset
========================================================= */
html,div,span,applet,object,iframe,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight:normal;
	vertical-align: baseline;
}
html {
	overflow-y: scroll;
	scroll-behavior: smooth;
}
body{
    overflow: hidden;
}
a{text-decoration: none;}
blockquote,q {
	quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}
input,textarea {
	margin: 0;
	padding: 0;
}
ol,ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
	vertical-align: middle;
}
a:focus {
	outline: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* =========================================================
scroll-efects
========================================================= */
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}
.fadein2 {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}


/* =========================================================
containt
========================================================= */
.content-wrap{
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
    background-image: url(../img/blockimg_bg.webp);
    position: relative;
    width: 100%;
	margin: 0;
    padding-bottom: 10px;
    background-attachment: fixed;
    background-position: bottom center;
    background-size: 100% 100vh;
    background-repeat: no-repeat;
}


section.main_con {
    width: 100%;
    padding: 1vh 0;
	div{
		margin: auto;
		img{
			display: block;
            margin: auto;
            width: 65%;
            min-width: 650px;
            max-width: fit-content;
		}
	}
}
section.menu {
	ul {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-evenly;
		width: 1000px;
		margin: 2vh auto;
		border-left: 1px solid #717171;
		li {
			width: 25%;
			border-right: 1px solid #717171;
			a {
				display: block;
				padding: 2.5em 0;
				width: 100%;
                text-align: center;
			}
		}
		li:hover{
			backdrop-filter: blur(3px);
            background-color: #1a950021;
            transition: all 0.5s;
		}
	}
}
section.introduction {
	text-align: center;
    margin: 20vh auto;
	h2 {
		font-size: 34px;
	}
	p {
		font-size: 18px;
        margin: 2em auto;
        line-height: 2em;
	}
}


/*============================
#acc_date
============================*/
section.acc-date {
	display: flex;
    justify-content: center;
    margin: 10vh auto;
	div {
		margin: 0 2em auto 2em;
        width: 480px;
		h2 {
			font-size: 20px;
			margin-bottom: 2em;
			span {
				display: block;
				color: #9f5454;
				font-size: 50px;
			}
		}
		p {
			line-height: 1.7em;
            font-size: 14px;
			span {
				font-size: 28px;
				line-height: 1.3em;
                margin: auto 0.2em;
			}
		}
	}
}

/*============================
#points
============================*/
section.points {
	h2 {
		text-align: center;
        font-size: clamp(16px, 3.5vw, 18px);
		span {
			display: block;
			font-size: clamp(34px, 9vw, 60px);
            margin-top: 1em;
			color: #9f5454;
		}
	}

	
	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		max-width: 1000px;
        	margin: 10vh auto;
		li {
			width: 49%;
			position: relative;
			margin-bottom: 1.5em;
			img {
				object-fit: cover;
		                width: 100%;
		                height: 300px;
				border-radius: 20px;
			}
			div {
				margin: 1em auto;
				h3 {
					color: #9f5454;
					font-size: 20px;
					font-weight: bold;
					line-height: 2em;
				}
				p {
					font-size: 14px;
				}
			}
		}
	}
}

/*============================
#equipment
============================*/
section.equipment {
	margin: 15vh auto;
	padding: 8em;
	background-image: url(../img/equipment_bg.webp);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	h2 {
		text-align: left;
		font-size: clamp(16px, 3.5vw, 18px);
		color: #FFF;
		margin-left: 50%;
		span {
			display: block;
			font-size: clamp(34px, 9vw, 60px);
		}
	}
	ul {
		margin-left: 50%;
		margin-top: 3em;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		max-width: 600px;
		li {
			background-color: #ffffffd4;
            text-align: center;
            padding: 0 1em;
            line-height: 2em;
            border-radius: 2px;
            margin: 0.2em;
            font-size: 14px;
		}
	}
}

/*============================
#floor_plan
============================*/
section.floormap {
	width: 1100px;
	margin: 15vh auto 20vh auto;
	h2{
	font-size: clamp(20px, 5.5vw, 22px);
	margin-bottom: 2em;
	span{
		display: block;
		font-size: clamp(34px, 6.5vw, 36px);
		margin-bottom: 0.5em;
		}
	}
	ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		li {
			width: 24%;
			a {
				width: 100%;
				img {
					width: 95%;
					height: 340px;
					object-fit: contain;
					display: block;
					margin: 0em auto 2em auto;
				}
				h3 {
					font-size: 30px;
					color: #9f5454;
					text-align: center;
					span {
						display: inline-block;
                        font-size: 16px;
                        margin-left: 1em;
					}
				}
				p {
					text-align: center;
					margin: 1em auto;
				}
			}
			a.catalog_dl_link {
                display: block;
                width: fit-content;
                box-sizing: border-box;
                color: #111;
                font-size: 12px;
                text-align: center;
                line-height: 3em;
                padding: 0 3em 0 4em;
                border: 1px solid #111;
                background-color: white;
                position: relative;
                bottom: 0;
                margin: 1em auto;
			}
			a.catalog_dl_link::before {
				content: "";
                position: absolute;
                background: url(../img/pdf_icon.png);
                background-size: contain;
                background-repeat: no-repeat;
                top: 0.7em;
                left: 1em;
                width: 1.5em;
                height: 1.5em;
			}
			a.catalog_dl_link:hover::before {filter: invert(1);}
			a.catalog_dl_link:hover {color: #FFF; background-color: #111; transition: 0.5s;}
		}
	}
}
section.accessmap {
	width: 1100px;
	margin: 15vh auto 20vh auto;
	h2{
	font-size: clamp(20px, 5.5vw, 22px);
	margin-bottom: 2em;
	span{
		display: block;
		font-size: clamp(34px, 6.5vw, 36px);
		margin-bottom: 0.5em;
		color: #9f5454;
		}
	}
	iframe{
		width: 100%;
		height: 450px;
		border-radius: 20px;
	}
}

/*============================
#emptyroom
============================*/
section#emptyroom.room_list {
	width: 1100px;
	margin: 15vh auto 20vh auto;
	h2{
	font-size: clamp(20px, 5.5vw, 22px);
	margin-bottom: 2em;
	span{
		display: block;
		font-size: clamp(34px, 6.5vw, 36px);
		margin-bottom: 0.5em;
		}
	}
	iframe{
		width: 100%;
		height: 850px;
	}
}
div.fix_banner {
	position: fixed;
    bottom: 4vh;
    left: 0%;
	a {
		background-color: #9f5454;
        display: block;
        padding: 4em 3em 2em 3em;
        color: white;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
		position: relative;
	}
	a::before{
		content: "";
        position: absolute;
        background: url(../img/fixed_icon.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 1em;
        left: 40%;
        width: 60px;
        height: 40px;
	}
}















/* =========================================================
smartphone
========================================================= */
@media (max-width: 768px){
section.main_con {
	div.sp_off {
        display: none;
	}
	div{
		img {
			margin: 10vh auto;
            width: 90%;
            min-width: unset;
		}
	}
}

section.menu {
    & ul {
		flex-wrap: wrap;
        justify-content: center;
        width: 80%;
        & li {
			width: 49%;
            a {
                padding: 1.5em 0;
            }
        }
    }
}

section.introduction {
	text-align: center;
    margin: 8vh auto;
	h2 {
		font-size: 5vw;
	}
	p {
		font-size: 3.5vw;
	}
}
section.acc-date {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 3vh auto;
	div {
		h2 {
			font-size: 4vw;
			text-align: center;
			span {
				font-size: 8vw;
			}
		}
		p {
			font-size: 3.5vw;
			span {
				font-size: 6vw;
			}
		}
	}
}
section.points {
		h2 {
			font-size: 4vw;
			text-align: center;
			span {
				font-size: 8vw;
			}
		}

	
	ul {
		width: 90%;
        margin: 2vh auto;
		li {
			width: 100%;
			img {
				height: 14em;
			}
			div {
				margin: 0.5em auto;
				h3 {
					font-size: 4.5vw;
				}
				p {
					font-size: 3.5vw;
					line-height: 1.5em;
				}
			}
		}
	}
}
section.equipment {
	margin: 10vh auto;
	padding: 4vh 5%;
	background-image: url(../img/equipment_bg.webp);
	background-position: left;
	background-size: cover;
	h2 {
		font-size: 3.5vw;
		margin-left: unset;
		span {
			font-size:7vw;
		}
	}
	ul {
		margin-top: 3em;
		display: flex;
		flex-wrap: wrap;
		margin-left: unset;
		li {
			padding: 0 1em;
			line-height: 2em;
			border-radius: 2px;
			margin: 0.3em;
			font-size: 3vw;
		}
	}
}

/*============================
#floor_plan
============================*/
section.floormap {
	width: 90%;
	margin: 15vh auto;
	h2{
	font-size: 4vw;
	margin-bottom: 2em;
	span{
		display: block;
		font-size: 7vw;
		margin-bottom: 0em;
		}
	}
	ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		li {
			width: 48%;
			a {
				font-size: 3.5vw;
				img {
					width: 95%;
					height: 20em;
					object-fit: contain;
					display: block;
					margin: auto;
				}
				h3 {
                    font-size: 7vw;
                    margin-top: 1em;
					span {
						display: inline-block;
                        font-size: 3.5vw;
                        margin-left: 1em;
					}
				}
				p {
					text-align: center;
					margin: 1em auto;
				}
			}
			a.catalog_dl_link {
                display: block;
                width: fit-content;
                box-sizing: border-box;
                color: #111;
                font-size: 3vw;
                text-align: center;
                line-height: 3em;
                padding: 0 2em 0 3em;
                border: 1px solid #111;
                background-color: white;
                position: relative;
                bottom: 0;
                margin: 1em auto;
   }
			a.catalog_dl_link::before {
				content: "";
                position: absolute;
                background: url(../img/pdf_icon.png);
                background-size: contain;
                background-repeat: no-repeat;
                top: 0.7em;
                left: 1em;
                width: 1.5em;
                height: 1.5em;
			}
		}
	}
}
section.accessmap {
	width: 100%;
	margin: 10vh auto 20vh auto;
	h2{
		font-size: 5vw;
		width: 90%;
		margin: auto auto 1em auto;
		span{
			display: block;
			font-size: 7vw;
			margin-bottom: 0em;
		}
	}
	iframe{
		width: 98%;
		height: 20em;
		margin: auto;
		display: block;
	}
}

section#emptyroom.room_list {
	width: 100%;
	margin: 10vh auto 5vh auto;
	h2{
		font-size: 5vw;
		width: 90%;
		margin: auto auto 1em auto;
		span{
			display: block;
			font-size: 7vw;
			margin-bottom: 0em;
		}
	}
	iframe {
        width: 100%;
        height: 850px;
    }
}
div.fix_banner {
    bottom: 55px;
    z-index: 5;
	a{
		padding: 2em 1em 1em 1em;
	}
	a::before {
		top: 0.4em;
		left: 45%;
		width: 1.5em;
		height: 1.5em;
	}
}

}