@charset "utf-8";

a:focus, *:focus { outline:none; }

/*================================

firstview

================================*/

#firstview{
	position:relative;
	width: 100%;
	height: 100vh;
	}


/*================

muriel

=================*/

#muriel{
	position:relative;
	width: 100%;
	height: 100%;
	}

#animation_container {
	position: relative;
	width: 100%;
	}
#animation_container:before {
	content:"";
	display: block;
	padding-top: 50%;
	}
#content {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	}

#animation_container #canvas{
	top: 20%;
	left: 18%;
	width: 58% !important;
	height: 58% !important;
	}
@media screen and (max-width: 768px) {
#animation_container #canvas{
	top: 20%;
	left: 5%;
	width: 80% !important;
	height: 80% !important;
	}
	}


/*================

info

=================*/

#info{
	position:absolute;
	width: auto;
	height: auto;
	bottom: 9%;
	right: 6%;
	}
@media screen and (max-width: 768px) {
#info{
	bottom: 7%;
	left: 12%;
	right: auto;
	}
	}

#info h2{
	font-weight: normal;
	font-size: 1.6em;
	letter-spacing: .05em;
	font-family: 'Libre Baskerville', serif;
	font-weight: normal;
	font-weight: 400;
	}
@media screen and (max-width: 768px) {
#info h2{
	font-size: 1.2em;
	}
	}

#info p{
	margin-top: 1.4em;
	line-height: 1.8em;
	font-weight: normal;
	font-size: 1.1em;
	font-family: 'Noto Sans JP';
	letter-spacing: .05em;
	}
@media screen and (max-width: 768px) {
#info p{
	margin-top: 1.4em;
	line-height: 1.8em;
	font-size: .9em;
	}
	}

#info p span{
	text-decoration: underline;
	}

#info p span.tels{
	text-decoration: none;
	}
@media screen and (max-width: 768px) {
#info p span.tels{
	text-decoration: underline;
	}
	}

#info p span a{
	color: #646464 !important;
	}


/*================================

photos

================================*/

#photos{
	position:relative;
	width: 85%;
	margin: auto;
	padding: 10em 0 0;
	}
#photos:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	}
@media screen and (max-width: 768px) {
#photos{
	width: 100%;
	padding: 3em 0 0;
	}
	}

#photos .room{
	position:relative;
	width: 50%;
	float: left;
	}
@media screen and (max-width: 768px) {
#photos .room{
	width: 53%;
	float: none;
	}
	}

@media screen and (max-width: 768px) {
#photos .room:nth-child(1){
	margin-left: 12%;
	}
	}

#photos .room:nth-child(2){
	float: right;
	padding-top: 10em;
	}
@media screen and (max-width: 768px) {
#photos .room:nth-child(2){
	float: none;
	padding-top: 4.5em;
	margin-left: 32%;
	}
	}

#photos .room .pack{
	position:relative;
	width: 68%;
	height: auto;
	margin: auto;
	}
@media screen and (max-width: 768px) {
#photos .room .pack{
	width: 100%;
	}
	}

#photos .room .pack .photo{
	position:relative;
	width: 100%;
	}
#photos .room .pack .photo:before {
	content:"";
	display: block;
	padding-top: 140%;
	}

#photos .room .pack .photo .inner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	}

#photos .room:nth-child(1) .pack .photo .inner {
	background-image: url(../images/photo1.jpg);
	}

#photos .room:nth-child(2) .pack .photo .inner {
	background-image: url(../images/photo2.jpg);
	}


/*================================

localnavi

================================*/

#localnavi{
	position:relative;
	width: 100%;
	margin: auto;
	padding: 6em 0 0;
	}
@media screen and (max-width: 768px) {
#localnavi{
	padding: 4em 0 0;
	overflow-x: hidden;
	}
	}

#navs{
	position:relative;
	width: 60%;
	margin: auto;
	}
@media screen and (max-width: 768px) {
#navs{
	width: 75%;
	}
	}

#localnavi ul{
	}

#localnavi ul li{
	margin-top: 2.9em;
	}
@media screen and (max-width: 768px) {
#localnavi ul li{
	margin-top: 1.6em;
	}
	}

#localnavi ul li a{
	display: block;
	color: #646464;
	display: inline-block;
	position: relative;
	font-family: 'Libre Baskerville', serif;
	font-weight: normal;
	font-weight: 400;
	font-weight: normal;
	font-size: 1.7em;
	letter-spacing: .07em;
	padding-right: .8em;
	background-position: right center;
	background-repeat: no-repeat;
	background-image: url(../images/arrow.svg);
	background-size: contain;
	}
@media screen and (max-width: 768px) {
#localnavi ul li a{
	font-size: 1.2em;
	}
	}

#localnavi ul li a:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background-color: rgba(100, 100, 100, 0.75);
	transform: scale(0, 1);
	transform-origin: left;
	transition: 0.4s;
	}
#localnavi ul li a:hover:before {
	transform: scale(1);
	}

#localnavi ul li a:hover{
	color: #646464;
	}