body {font-family: 'Noto Sans JP', sans-serif;color: #2D2D2D;font-weight: 300;}
a {color: #1977cc;}
a:hover{color: #3291e6;text-decoration: none;}
img{max-width:100%;height:auto;}
a:hover{opacity:0.8;}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {background: #ffffff;transition: all 0.5s;z-index: 997;padding: 15px 0;}
#header .logo {max-width:40%;margin: 0;margin-right: 40px;padding: 0;line-height: 1;}
#header .logo img {max-width: 100%;}
#header .logo a{display:inline-block;}
#header .container{padding:0px;}

.header-icons{margin-right:45px;}
.header-icons-sns{list-style-type: none;font-size:1.5rem;}
.header-icons-sns li{display: inline-block; margin-right: 20px;}
.header-icons-sns li a{color:#333333;}
.header-icons-reserve{margin-right:20px;}
.header-icons-reserve a{border-radius: 30px;font-size: 0.8rem;}

.navbar-light .navbar-toggler{position: absolute;top: 22px;right: 10px;margin:auto;text-align: right;}
.navbar-collapse{position: absolute;left: 0;top: 80px;width: 100%;}
.navbar-nav{flex-direction: row;-ms-flex-direction: row;justify-content: space-around;background-color: rgba(0,115,184,0.9);padding: 20px 30px;text-align: left;}
.navbar-light .navbar-nav .nav-link{color: #ffffff;}
.navbar-light .navbar-nav .nav-link:hover{background-color: #569cc5;color: #ffffff;}
.navbar-light .navbar-nav li{position: relative;width:20%;text-align:center;font-size:0.9rem;}
.navbar-light .navbar-nav li:after{content: "";position: absolute;right: 0;height: 20px;top: 0;bottom: 0;margin: auto;border-right: 1px solid #ffffff;}
.navbar-light .navbar-nav li:last-child:after{border:none}
.navbar-toggler{padding: 0px .75rem;}
.navbar-light .navbar-toggler{border:none;color:#2D2D2D;font-size: 2rem;}

/*-----------------------------------------------------------
# toppage
---------------------------------------------------------------*/
#top #header{background:transparent;}
#top #header.change-color{background:#ffffff;}

#top section{margin-top:40px;}
#top .page-contents-body{padding-top:60px;}

#top .carousel-item{position: relative;background:url(../image/topimage01.jpg) center top;background-size: cover;background-repeat: no-repeat;width:100%;height:100vh;}
#top .carousel-item.topimage02{background-image:url(../image/topimage02.jpg);}
#top .carousel-item.topimage03{background-image:url(../image/topimage03.jpg);}
#top .carousel-item.topimage04{background-image:url(../image/topimage04.jpg);}
#top .carousel-item.topimage05{background-image:url(../image/topimage05.jpg);}

/*
#top .carousel-item.topimage06{background-image:url(../image/topimage06.jpg);}
#top .carousel-item.opacityup{opacity: 0.8;}
*/

#top .imagetext{position: absolute;bottom: 5%;left: 8%;}
#top .imagetext p{color: #ffffff;font-size: 5rem;}

#top #main section h2{position: relative;padding:0px 0px 0.5em;font-family: 'Italiana', serif;font-size: 5rem;letter-spacing:0.05em;}
#top #main section h2:after{content: "";position: absolute;width: 100%;height: 100%;bottom: 0.4em;left: 0;background: url(../image/h1bg.svg) bottom left no-repeat;background-size: contain;}
#top #main section h2 span{position: absolute;bottom: 0;right: 0;font-family: 'Noto Sans JP', sans-serif;font-weight:300;font-size: 2rem;}
#top #main section.lefttext h2 span{left:0;right:auto;}
#top #main section.righttext h2{text-align:right;}
#top #main section.righttext h2:after{background-image: url(../image/h1bg-type2.svg);}

#top #main section#tpage-news h2:after,
#top #main section#tpage-access h2:after{background-image: url(../image/h1bg-type4.svg);}

#top #main section#tpage-Introduction h2{text-align:left;}
#top #main section#tpage-Introduction h2:after{background-image: url(../image/h1bg.svg);}

#top #main section h3{padding: 0px 20px 20px;border: none;margin: 10px 0px;font-weight: 400;text-align: left;font-size: 1.9rem;}
#top #main section.righttext h3{text-align:right;}

#top .text-contents{line-height:1.8;}

#top .righttext .page-contents-text{order:2;}
#top .righttext .page-contents-image{order:1;}
#top .lefttext .page-contents-text{order:1;}
#top .lefttext .page-contents-image{order:2;}

#top .righttext .image-contents .imagetype01{float:left;width:46%;margin-right:2%;}
#top .righttext .image-contents .imagetype02{float:left;width:50%;margin-left:2%;padding-top:11.8%}
#top .righttext .image-contents .imagetype03{float:left;width:30%;margin-top:4%;margin-right:2%;clear: both;}
#top .righttext .image-contents .imagetype04{float:left;width:66%;margin-top:4%;margin-left:2%;}

#top .lefttext .image-contents .imagetype01-01{float:left;width:59%;margin-right:2%;}
#top .lefttext .image-contents .imagetype01-02{float:left;width:37%;margin-left:2%;}
#top .lefttext .image-contents .imagetype01{text-align:right;}
#top .lefttext .image-contents .imagetype01 img{max-width:80%;}
#top .lefttext .image-contents .imagetype02{padding-top:40.7%}
#top .lefttext .image-contents .imagetype03{margin-top:4%;}
#top .lefttext .image-contents .imagetype04{margin-top:4%;}

#top .righttext .next-page{text-align:right;}
#top .bottundata{text-align:center;}
#top .bottundata span{background-color: #007AC3;color: #fff;padding: 10px 30px;border-radius: 20px;margin: 10px auto;display: inline-block;text-align:center;}

#top #tpage-news .page-contents-body{padding-bottom:20px;}
#top #tpage-news .text-contents{padding-top:20px;}
p.text-contents-date{margin-bottom: 0.5em;}
#top #tpage-news a{color:#353535;}

.next-page{margin-top: auto;}
.lefttext .next-page{text-align:right;}
.next-page a{position: relative;padding-right:5em;color:#353535;font-size:1.2rem;}
.next-page a:after{content: "";position: absolute;width: 4em;height: 100%;bottom: 0.3em;right: 0;background: url(../image/allow.svg) bottom left no-repeat;background-size: contain;}
.facebookimage{width: 100%;height: 150px;background-position: center;background-size: cover;background-repeat: no-repeat;}



/*--------------------------------------------------------------
# main Section
--------------------------------------------------------------*/
#default #main{margin-top:100px;background:url(../image/mainbg.svg) top 16rem left no-repeat;background-size: cover;}
#main #page-header{margin-top: 40px;}

#main #page-contents .wrap{background: rgba(255,255,255,0.8);}
#main section .container{padding:30px 0px;}

#main section h1{position: relative;padding:0px 0px 0.5em;font-family: 'Italiana', serif;font-size: 5rem;letter-spacing:0.05em;}
#main section h1:after{content: "";position: absolute;width: 100%;height: 100%;bottom: 0.3em;left: 0;background: url(../image/h1bg.svg) bottom left no-repeat;background-size: contain;}
.access #main section h1:after,
.contact #main section h1:after{background-image: url(../image/h1bg-type4.svg);}

#main section h1 span{position: absolute;bottom: 0;left: 0;font-family: 'Noto Sans JP', sans-serif;font-weight:300;font-size: 2rem;}


#main section h2 {position: relative;padding:20px 0px;color:#3e3e3e;font-size:2.1rem;font-weight:500;}
#main section h3{position: relative;display:inline-block;margin:40px auto 40px;padding-bottom:0.5em;text-align:center;border-bottom:2px solid #3e3e3e;font-size: 1.5rem;font-weight:bold;}

.page-contents-body{padding:20px 0px 80px;}
.room .page-contents-body{padding-bottom:40px;}

.text-discription{padding-bottom:40px;}
.image-contents{padding: 0px 20px 20px;text-align: center;}
.image-contents img{max-width:100%;}
.text-contents{padding: 0px 20px 20px;}
.pageconcept-body{padding:40px 20px 80px;}

.disc-data{text-align:center;margin-bottom:40px;}
.disc-data p{text-align: left;}

/*  --roons--  */

.h2subtitle{padding-left: 0.5em;font-size: 3rem;font-family: 'Italiana', serif;letter-spacing:0.05em;}
.roombottom{padding: 30px 20px 20px 0px;text-align:right;}
.roombottom a{display: inline-block; padding: 10px 30px; background-color: #007AC3; color: #fff; border-radius: 20px;}
.thumbspace{display:flex;padding:20px 0px 0px 0px;}
.thumbspace li{padding-right:2%;width:15%;list-style:none;}

.roondisc{padding: 10px 20px;}
.roondisc dt{clrar:both;float:left;}
.roondisc dd{padding-left:11em;}

/*  --slowtime -- */
.slow-image-contents{position: relative;height:400px;margin-bottom:140px;}
.slow-image-contents01{position: absolute;top: 85px;left: 90px;transform: rotate(4deg);max-width:80%;z-index:20;}
.slow-image-contents02{position: absolute;transform: rotate(-2.38deg);top: 40px;left: 40px;max-width:80%;z-index:30;}
.slow-image-contents03{position: absolute;transform: rotate(-6.96deg);max-width:80%;z-index:40;}

.slow-image-contents img{max-width:100%;box-shadow: 2px 5px 5px rgb(0 0 0 / 40%);}

/*  --other--  */
strong{font-weight: 700;}
strong.thinfont{font-weight: 500;}

/*------------------------------------
# contactus Section
-------------------------------------*/

.privacy{margin:20px 0px;background-color:#fff;height:200px;overflow-y: scroll;}
.privacy-body{padding:0px 20px;text-align:left;}
#main section .privacy-body h3{margin:1em 0px;font-size:1rem;}
#main section .privacy-body h4{font-weight:bold;font-size:1rem;background-color:#eee;padding:10px;}

/*---------------------------------------------------------------
# footer CSS
--------------------------------------------------------------*/
footer{padding-top:60px;background-color: #007AC3;color:#ffffff;}
footer a{color:#fff;}
footer .fooer-top{padding-bottom: 20px;}
footer .fooer-top ul li{list-style-type: none;padding:0.2em 0px 0.2em 0px;}
footer .fooer-middle{border-bottom: 1px solid #ffffff;padding: 50px 0px;}
footer .fooer-middle .logo{text-align:center;margin-bottom: 10px;}

footer .fooer-bottom{padding:20px 0px;}
footer .copyright{text-align:center;}

/*---------------------------------------------------------------
# 5 clum
--------------------------------------------------------------*/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {position: relative;width: 100%;min-height: 1px;padding-right: 10px;padding-left: 10px;}
.col-xs-15 {width: 20%;float: left;}

@media (min-width: 768px) {
    .col-sm-15 {width: 20%;float: left;}
}
@media (min-width: 992px) {
    .col-md-15 {width: 20%;float: left;}
}
@media (min-width: 1200px) {
    .col-lg-15 {width: 20%;float: left;}
}


/*---------------------------------------------------------------
# Other
--------------------------------------------------------------*/
@media screen and (min-width: 0px) and (max-width:1200px) {

	
}
@media screen and (min-width: 0px) and (max-width:992px) {
	.col-sm-15 {width: 33.3%;float: left;margin-bottom:10px;}
	footer .fooer-bottom-text .copyright{position: static;margin-top:10px;}
	.slow-image-contents{height:500px;}
}
@media screen and (min-width: 0px) and (max-width:768px) {
	#header .logo{margin-right:10px;}
	.header-icons-reserve{text-align:right;}
	
	.navbar-nav{flex-direction: column;-ms-flex-direction: column;}
	.navbar-light .navbar-nav li{width: 100%;text-align: left;}
	.navbar-light .navbar-nav li:after{border:none;}
	.navbar-nav .nav-link{padding:5px 20px;}

	#top .righttext .page-contents-text,
	#top .lefttext .page-contents-text{order:1;margin-bottom:20px;}
	#top .righttext .page-contents-image,
	#top .lefttext .page-contents-image{order:2;}

	/*  --roons--  */
	.room #main section.roomdata h2{padding-bottom:10px;}
	.roombottom{padding:0px 10px 10px;}

	.col-sm-15 {width: 50%;}
	footer .fooer-top ul{display:block !important;}
	footer .fooer-middle{padding: 20px 0px;}
}
@media screen and (min-width: 0px) and (max-width:540px) {
	html{font-size:80%;}
	section{padding:0px 15px;}
	.header-icons-sns li{margin-right: 10px;}
	.header-icons{margin-right: 50px;}
	.navbar-light .navbar-toggler{right: 20px;}
	
	#top .carousel-item{background-image:url(../image/topimage01-sm.jpg);height:55vh;}
	#top .carousel-item.topimage02{background-image:url(../image/topimage02-sm.jpg);}
	#top .carousel-item.topimage03{background-image:url(../image/topimage03-sm.jpg);}
	#top .carousel-item.topimage04{background-image:url(../image/topimage04-sm.jpg);}
	#top .carousel-item.topimage05{background-image:url(../image/topimage05-sm.jpg);}
/*
	#top .carousel-item.topimage06{background-image:url(../image/topimage06-sm.png);}
*/
	#top .page-contents-body{padding-top:0px;}
	.h2subtitle{display: block;padding-left:0px;}
	
	#top #main section#tpage-Introduction h2,
	#top #main section#tpage-alowtime h2{font-size:4.5rem;}
	.slow-image-contents{height:450px;}
	
	.col-sm-15 {width: 100%;height:auto;}
	footer .fooer-bottom-text .copyright{font-size:0.8rem;}
}
@media screen and (min-width: 0px) and (max-width:480px) {
	.slow-image-contents{height:400px;}
}