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

@import url('https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@1,300&display=swap');

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: #ccab88;
	text-decoration: none;
}
a:hover {
	color: #444;
}

br.sp {
	display: none;
}

body {
	background: #fff;
	color: #444;
	font-family: 'Shippori Mincho', serif;
	font-size: 15px;
	line-height: 1.6;
}

#wrapper {
	width: 100%;
}

header {
	width: 100%;
	height: 100px;
}
header h1.header-logo {
	width: 155px;
	height: 200px;
	background: url("img/logo.png") no-repeat;
	background-size: 100%;
	margin: 10vw auto 0;
	font-size: 0;
}

#main-content {
	margin: 10vw 0 10vw;
}
h2.new-open {
	font-family: 'Gravitas One', cursive;
	font-size: 10vw;
	letter-spacing: -0.75vw;
	text-align: center;
}
h2.new-open span.small {
	font-size: 4vw;
	letter-spacing: -0.2vw;
}
h2.new-open span.strong {
	color: #cc8899;
}
h2.area {
	font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-size: 9vw;
    text-align: center;
    line-height: 0.8;
    text-transform: uppercase;
	padding-bottom: 1.5em;
}

.hero-img {
	width: 100vw;
	height: 63vw;
	background: url("img/top-img-mh-pc.jpg") no-repeat center top;
	background-size: cover;
	margin-bottom: 15vw;
}

.message {
	margin-bottom: 15vw;
}
.message p {
	font-family: 'Cormorant Infant', serif;
    font-style: italic;
	font-size: 6vw;
	line-height: 1.2;
	text-align: center;
}
.message p span {
	font-family: 'Gravitas One', cursive;
	font-style: normal;
}

h3.access {
	font-family: 'Gravitas One', cursive;
	font-size: 2.5vw;
	letter-spacing: -0.2vw;
	text-align: center;
	padding-top: 3em;
	padding-bottom: 0.5em;
}
p.address {
	font-size: 1.1vw;
	text-align: center;
	margin-bottom: 1.5em;
}
p.map-link {
	text-align: center;
}

footer {
	padding: 5vw 0;
}
footer p.copy {
	text-align: center;
	font-size: 0.9em;
	letter-spacing: 1px;
	font-family: 'Cormorant Infant', serif;
}

.fadeIn {
	animation-name: fadeInAnime;/*アニメーションの定義名*/
	animation-duration: 1s;/*アニメーション変化時間 ※デフォルト*/
	animation-fill-mode: forwards;/*アニメーションの開始と終了時の状態を指定*/
	opacity: 0;
}
.delay-time1{
	animation-delay: 1s;
}
.delay-time3{
	animation-delay: 3s;
}
.delay-time4{
	animation-delay: 4s;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 768px) {
	br.sp {
		display: inline;
	}
	header h1.header-logo {
		width: 30vw;
		height: 39vw;
		background: url("img/logo.png") no-repeat;
		background-size: 100%;
		margin: 10vw auto 0;
	}
	h2.new-open {
		font-size: 27vw;
		line-height: 1;
	}
	h2.new-open span.small {
		font-size: 10vw;
	}
	h2.area {
		font-size: 13.5vw;
	}
	.hero-img {
		width: 100vw;
		height: 130vw;
		background: url("img/top-img-mh-sp.jpg") no-repeat center top;
		background-size: cover;
		margin-bottom: 15vw;
	}
	.message p {
		font-size: 9vw;
	}
	h3.access {
		font-size: 6vw;
	}
	p.address {
		font-size: 4vw;
	}
}