@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Serif+JP:wght@200..900&display=swap');

@charset "utf-8";

:root {
	--color-text: #4C342A;
}

*, *::before, *::after {box-sizing: border-box;}

html {font-size:62.5%;}
body {
	overflow-x: hidden;
}
#main {
	max-width: 1900px;
	margin: 0 auto;
}
* {font-family:'Noto Serif JP', sans-serif; font-weight:400; font-style:normal; font-size:1.6rem; line-height:1.5em; letter-spacing:0.05em; color: var(--color-text);}
.container {
	max-width: 1200px;
}
.row > * {
	padding-left: 0;
	padding-right: 0;
}
a, a:visited, a:hover, a:active {
	color: inherit;
	text-decoration: none;
}



/* Loading */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: var(--color-text);
  text-align:center;
  color:#fff;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash_logo img {
  width: 160px;
}

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



/* Header */
.navbar {
	padding: 10px 0 !important;
	text-align: center;
}
.navbar-brand * {
	text-align: left;
	vertical-align: middle;
}
.navbar-brand img {
	max-width: 250px;
}
.navbar-nav {
	margin-left: auto;
}
.nav-link {
	font-size: 1.7rem;
	padding: 0 1em !important;
}
.nav-link:hover {
	font-weight: bold;
}



/* Footer */
footer {
	background: var(--color-text);
	padding: 55px 0;
}
footer .menu a {
	color: #fff;
	font-size: 1.5rem;
	padding: 0 !important;
}
footer .menu a::before {
	content: '／';
	padding: 0 1em;
}
footer .menu a:first-child::before {
	content: '';
	padding-leftt: 0;
}
footer div {
	color: #fff;
	font-size: 1.5rem;
}
nav.footer .nav-link {
	font-size: 1.5rem;
	color: #fff;
}
nav.footer .nav-link.show {
	color: #fff;
}
nav.footer .dropdown-item {
	font-size: 1.5rem;
	color: var(--color-text);
}
nav.footer .dropdown-item::before {
	padding-left: 0;
}


/* TOP */
div.box-aboutus > div {
	background-image: url('../images/bg-brown-base.png');
	padding-bottom: 150px;
}
div.box-recoomend > div {
	background-image: url('../images/bg-green.png');
	padding-bottom: 60px;
}
div.box-news > div {
	background-image: url('../images/bg-dark-brown.png');
	padding-bottom: 150px;
}
div.bg-brown, div.bg-brown-menu {
	margin-top: -25px;
}
div.box-menu > div {
	background-image: url('../images/bg-brown-base.png');
	padding-bottom: 150px;
}
img.bg-illust-01 {
	left: 11%;
	margin-top: -70px;
}
img.bg-illust-02 {
	right: 5%;
	margin-top: -180px;
}
img.bg-illust-03 {
	margin-left: 4%;
	margin-top: -280px;
}
img.bg-photo-01 {
	left: 7px;
	margin-top: -200px;
}
img.bg-photo-02 {
	right: 0;
	margin-top: -350px;
}
h2.title {
	margin: 80px 0;
	font-family: "Dancing Script", cursive;
	font-size: 5.6rem;
}
h2.title span {
	display: block;
}
p.detail {
	line-height: 2em;
}
img.label {
	margin-top:-45px;
	margin-left:-70px;
}
p.caption {
	color: #fff;
	margin-top: 40px;
}
table.news td {
	background: none;
	color: #fff;
	text-align: left;
	padding: 10px 10px 10px 0;
}
div.box-contact {
	background-image: url('../images/bg-contact.png');
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
	width: 100%;
	height: 100vh;
	max-height: 337px;
	margin: -40px 0 80px 0;
}
div.box-contact h2 {
	margin: 40px 0 20px 0;
}
div.box-contact span.shop {
	background: var(--color-text);
	color: #fff;
	padding: 0.25em 1em;
	margin-right: 1em;
}
div.box-contact span.tel {
	font-family: "Dancing Script", cursive;
	font-size: 4rem;
}
div.box-contact a.btn {
	font-size: 1.6rem;
	color: var(--color-text);
	background: #fff;
	border-radius: 1em;
	padding: 0.25em 3em;
	margin-top: 1.5em;
}
div.box-contact a.btn:hover {
	color: #fff;
	background: var(--color-text);
}


@media (max-width: 1500px) {
	img.bg-illust-01 {
		left: 5%;
	}
	img.bg-illust-02 {
		right: 3%;
	}
	img.bg-photo-01 {
		width: 450px;
	}
	img.bg-photo-02 {
		width: 430px;
	}
}
@media (max-width: 1300px) {
	img.bg-illust-01 {
		width: 250px;
	}
	img.bg-illust-02 {
		width: 350px;
		margin-top: -150px;
	}
	img.bg-illust-03 {
		margin-left: 2%;
		margin-top: -260px;
	}
	img.bg-photo-01 {
		width: 350px;
		margin-top: -160px;
	}
	img.bg-photo-02 {
		width: 330px;
		margin-top: -280px;
	}
	img.label {
		width: 130px;
		margin-top:-45px;
		margin-left:-50px;
	}
	img.bg-illust-03 {
		width: 150px !important;
		margin-left: -1%;
	}
}
@media (max-width: 1100px) {
	img.bg-illust-01 {
		width: 210px;
		margin-top: -50px;
	}
	div.box-contact {
		margin-top: 0;
	}
	img.bg-illust-02 {
		width: 330px;
		margin-top: -140px;
	}
	img.bg-illust-03 {
		margin-left: -1%;
	}
	img.bg-photo-01 {
		width: 300px;
		margin-top: -120px;
	}
	img.bg-photo-02 {
		width: 280px;
		margin-top: -250px;
	}
}
@media (max-width: 992px) {
	img.bg-photo-01 {
		width: 280px;
		margin-top: -100px;
	}
	img.bg-photo-02 {
		width: 260px;
		margin-top: -230px;
	}
	div.bg-brown-menu {
		margin-top: -20px;
	}
}
@media (max-width: 800px) {
	.navbar-brand img {
		max-width: 220px;
	}
}
@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .dropdown-menu {
        min-width: 160px;
    }
}






/*
	img.bg-illust-01 {
		left: 5%;
		margin-top: -70px;
	}
	img.bg-illust-02 {
		right: 3%;
		margin-top: -180px;
	}
*/






/*
@media (max-width: 1800px) {
	img.bg-illust-02 {
		right: 200px;
	}
	img.label {
		width: 150px;
		margin-top:-40px;
		margin-left:-65px;
	}
}

@media (max-width: 1600px) {
	div.bg-brown {
		background-image: url('../images/bg-brown-base.png');
		background-position: bottom;
	}
	div.bg-dark-brown {
		background-image: url('../images/bg-dark-brown.png');
		background-position: bottom;
	}
	div.bg-green {
		background-image: url('../images/bg-green.png');
		background-position: bottom;
	}
	img.bg01 {
		margin-bottom: 50px;
	}
	img.bg02 {
		margin-bottom: 60px;
	}
	img.bg-illust-01 {
		left: 150px;
	}
	img.bg-illust-02 {
		right: 100px;
	}
	img.bg-photo-01 {
		width: 400px;
		margin-top: -160px;
	}
	img.bg-photo-02 {
		width: 400px;
		margin-top: -250px;
	}
	img.label {
		width: 130px;
		margin-top:-40px;
		margin-left:-55px;
	}
}
@media (max-width: 1500px) {
	h2.title {
		margin: 60px 0 40px 0;
	}
	img.bg-illust-02 {
		right: 80px;
	}
}

@media (max-width: 1400px) {
	img.bg-illust-01 {
		margin-right: -150px;
	}
	img.bg-illust-01 {
		width: 250px;
		left: 120px;
	}
	img.bg-illust-02 {
		width: 350px;
		margin-top: -150px;
		right: 40px;
	}
	img.bg-photo-01 {
		width: 350px;
		margin-top: -140px;
	}
	img.bg-photo-02 {
		width: 350px;
		margin-top: -230px;
	}
}

@media (max-width: 1300px) {
	p.detail {
		margin-bottom: 1em;
		line-height: 1.7em;
	}
	img.bg02 {
		margin-bottom: 100px;
	}
	img.bg03 {
		margin-bottom: 60px;
	}
	img.label {
		width: 120px;
		margin-top:-35px;
		margin-left:-50px;
	}
}

@media (max-width: 1200px) {
	img.bg01 {
		margin-bottom: 100px;
	}
	p.detail {
		line-height: 1.7em;
	}
	img.bg-illust-01 {
		width: 230px;
		left: 100px;
	}
	img.bg-illust-02 {
		width: 320px;
		margin-top: -135px;
		right: 20px;
	}
	img.bg-photo-01 {
		width: 300px;
		margin-top: -120px;
	}
	img.bg-photo-02 {
		width: 300px;
		margin-top: -200px;
	}
	img.bg02 {
		margin-bottom: 150px;
	}
}

@media (max-width: 1100px) {
	p.detail {
		line-height: 1.6em;
	}
	img.bg-illust-01 {
		width: 190px;
		left: 100px;
	}
	img.bg-illust-02 {
		width: 280px;
		margin-top: -120px;
		right: 20px;
	}
	img.bg-photo-01 {
		width: 250px;
		margin-top: -100px;
	}
	img.bg-photo-02 {
		width: 250px;
		margin-top: -180px;
	}
	img.label {
		width: 100px;
		margin-top:-25px;
		margin-left:-40px;
	}
}

@media (max-width: 992px) {
	img.bg01 {
		margin-bottom: 150px;
	}
	img.bg-illust-01 {
		width: 170px;
		left: 80px;
	}
	img.bg-illust-02 {
		width: 240px;
		margin-top: -100px;
		right: 20px;
	}
	img.bg03 {
		margin-bottom: 150px;
	}
	img.label {
		width: 90px;
		margin-top:-25px;
		margin-left:-40px;
	}
}

@media (max-width: 900px) {
	img.bg01 {
		margin-bottom: 260px;
	}
	img.bg02 {
		margin-bottom: 220px;
	}
	img.bg03 {
		margin-bottom: 200px;
	}
	img.bg-illust-01 {
		width: 150px;
		left: 80px;
	}
	img.bg-illust-02 {
		width: 230px;
		margin-top: -95px;
		right: 50px;
	}
	img.bg-photo-01 {
		width: 200px;
		margin-top: -100px;
	}
	img.bg-photo-02 {
		width: 200px;
		margin-top: -100px;
	}
}

@media (max-width: 768px) {
	img.bg01 {
		margin-bottom: 300px;
	}
	img.bg-illust-01 {
		width: 130px;
		left: 80px;
	}
}

@media (max-width: 700px) {
	img.bg01 {
		margin-bottom: 350px;
	}
	img.bg-illust-01 {
		width: 120px;
		left: 60px;
	}
}

@media (max-width: 576px) {
	div.bg-brown {
		background-image: none;
		margin-top: -50px;
	}
	img.bg01 {
		margin-bottom: 0;
	}
	h2.title {
		margin: 80px 0 30px 0;
		font-size: 4.5rem;
	}
	p.detail {
		letter-spacing: -0.1em;
	}
	img.bg-illust-01 {
		width: 80px;
		top: 70px;
		left: 20px;
	}
	img.bg-illust-02 {
		width: 180px;
		margin-top: -80px;
		right: 50px;
	}
}
*/