@charset "utf-8";
/* ----------------------------------------------
    The new CSS reset - version 1.8.5 (last updated 14.6.2023)
------------------------------------------------- */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
a, button {
	cursor: revert;
}
ol, ul, menu {
	list-style: none;
}
img {
	max-inline-size: 100%;
	max-block-size: 100%;
}
table {
	border-collapse: collapse;
}
input, textarea {
	-webkit-user-select: auto;
}
textarea {
	white-space: revert;
}
/* ----------------------------------------------
*** 共通設定 ***
------------------------------------------------- */
/* ----------------------- 基本設定 */
:root {
	--max_width: 1200px;
	--base_background: #ffffff;
	--base_color: #414141;
}
body {
	background: var(--base_background);
	color: var(--base_color);
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans JP', Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.6;
	scroll-behavior: smooth;
}
/* ----------------------- リンク設定 */
a:hover {opacity: 0.85;}
a[target="_blank"]::after {
	content: "\f35d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 0.3em;
}

a.pdf {
	padding: 0 0 0 1rem;
	background: url(img/icon_pdf.gif) no-repeat center left;
}
/* ----------------------- 短縮設定 */
.none	{display: none;}
.t_l 	{text-align: left;}
.t_r	{text-align: right;}
.t_c	{text-align: center;}
.v_m	{vertical-align: middle;}
.red 	{color: #ff0000;}
.maroon {color: #800000;}
.green 	{color: #008000;}
.blue 	{color: #0000ff;}
.navy 	{color: #000080;}
.yellow 	{color: #ffff00;}
.pink 	{color: #ff33cc;}
.orange 	{color: #ffa500;}
.olive 	{color: #339966;}
.bg_aqua {background: #EDF3FF;}
.bg_gray {background: #F9F9F9;}


/* ----------------------------------------------
*** ヘッダー ***
------------------------------------------------- */
.header {
	background-color: #3a2c23;
	color: #fff;
}
.header .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: var(--max_width);
	margin: 0 auto;
	padding: 1rem 1rem;
}
h1#logo {
	margin: 0.3rem auto 0 0;
}
h1#logo img {
	width: 120px;
}
h2 {
	font-size: 1.5rem;
	letter-spacing: 0.1rem;
	font-weight: bold;
}
/* ナビ */
#globalNav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem 1.2rem;
	margin: 0 auto 1.5rem;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.2;
}
#globalNav ul li a {
	display: block;
}
#topPage #globalNav ul li a {
	text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
#globalNav ul img {
	height: 24px;
}
.snsNav ul  {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 0.5rem;
}
.snsNav ul  img {
	height: 36px;
	opacity: 0.7;
}
.snsNav ul  img.icon_x {
	height: 26px;
}
.snsNav ul  img.icon_youtube {
	height: 22px;
}
@media screen and (max-width: 767px) {
.header .wrap {
	flex-direction: column;
	}
h1#logo {
	margin: 0 auto 1rem;
	}
h1#logo img {
	width: 100px;
}
#globalNav ul {
	justify-content: center;
	}
.snsNav ul {
	justify-content: center;
	}
}
/* ----------------------- ヘッダー 終わり */


/* ----------------------------------------------
*** コンテンツ ***
------------------------------------------------- */
/* ----- ぱんくず */
ol#topicPath {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.4rem;
	max-width: var(--max_width);
	margin: 0 auto;
	padding: 1rem;
}
ol#topicPath li a {
	padding-right: 1.1rem;
	background: url(img/icon_more.gif) no-repeat right center;
	color: #414141;
}
ol#topicPath li {
	font-size: 100%;
	letter-spacing: 0;
	font-weight: normal;
}
 .contentsWrap {
	max-width: var(--max_width);
	margin: 0 auto 6rem;
	padding: 0;
}
h2 {
	display: none;
}
h3 {	margin: 1rem 0;
	padding: 0.3rem 1.5rem;
	border-radius: 0.2em;
	background: linear-gradient(#d1be9f, #8c6d2c);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	color: #fff;
	font-size: 1.1rem;
	text-align: left;
	letter-spacing: 0.1rem;
}
h4 {
	padding: 0.3rem 1.5rem;
	border-radius: 0.2em;
	background: linear-gradient(#d1be9f, #8c6d2c);
	color: #fff;
	text-align: left;
}

/* ----------------------------------------------
*** トップページ topPage ***
------------------------------------------------- */
/* ----------------------- bg_topImage */
#topPage .header {
	position: relative;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #000000;
	background-image: url(images/image01.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
/* -----------------------
	animation: bg_topImage 60s ease;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
  */
/* -----------------------
@keyframes bg_topImage {
	0% {
	background-image: url(img/image01.jpg);
	}
	19% {
	background-image: url(img/image01.jpg);
	opacity: 1;
	}
	20% {
	background-image: url(img/image02.jpg);
	opacity: 1;
	}
	35% {
	background-image: url(img/image03.jpg);
	opacity: 1;
	}
	50% {
	background-image: url(img/image04.jpg);
	opacity: 1;
	}
	65% {
	background-image: url(img/image05.jpg);
	opacity: 1;
	}
	80% {
	background-image: url(img/image06.jpg);
	opacity: 1;
	}
	100% {
	background-image: url(img/image01.jpg);
	}
}
 */
@media screen and (max-width: 767px) {
#topPage .header  {
	background-attachment: scroll;
	}
#topPage .header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	background-color: #000000;
	background-image: url(images/image01.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	animation: bg_topImage 60s ease;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	z-index: -1;
	}
}
#topPage h1#logo {
	animation-name: fade;
	animation-duration: 1s;
	animation-timing-function: ease-in;
}
@keyframes fade {
	0% {	opacity: 0;}
	100% {	opacity: 1;}
}
#topPage #contents {
	padding: 0 1rem;
}
#topPage #contents h2 {
	display: block;
	position: relative;
	margin: 3rem auto 0;
	padding: 1rem;
	font-size: 2rem;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	letter-spacing: 0rem;
	text-shadow: 0 0 10px rgba(255,255,255,0.8);
	text-align: center;
	animation-name: easein;
	animation-duration: 3s;
	animation-timing-function: ease-in;
}
@keyframes easein {
	0% 	{opacity: 0;}
	100% 	{opacity: 1;}
}
#topPage #contents  p {
	margin: 1rem 0;
	text-align: center;
}
#topPage #contents .topMessage  p {
	width: 70%;
	margin: 0 auto 3rem;
	padding: 1rem;
	background: rgba(255,255,255,0.4);
	color: #020019;
	text-shadow: 0 0 10px rgba(255,255,255,0.8);
	font-size: 105%;
	line-height: 1.8;
	text-align: left;
}
#topPage h3 {
	margin: 1rem 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-align: center;
}
#topPage h3 img {
	width: 64px;
}
.instagram {
	max-width: 900px;
	margin: 0 auto 8rem;
}
.facebook {
	display: flex;
	justify-content: center;
	width: 100%;
}
.facebook iframe {
	overflow: hidden;
	width: 500px;
	max-width: 100%; 
	height:640px;
	border: none;
}
.facebook p {
	display: none;
}
@media screen and (max-width: 767px) {
#topPage #contents  {
	background: none;
	}
#topPage #contents  h2 {
	margin: 6rem auto 3rem;
	}
#topPage #contents .topMessage  p {
	width: 100%;
	margin: 0 auto 6rem;
	padding: 0.5rem;
	}
.facebook iframe {
	width: 100%; 
	}
#topPage #contents  p {
	text-align: left;
	}
#topPage #contents  .facebook p {
	display: block;
	margin: 0;
	}
}

/* ----------------------------------------------
*** 料金表 price ***
------------------------------------------------- */
#price #main {
	padding: 1rem;
	background: #e3d7be;
}
#price h3 {
	margin: 0 1rem 1rem 0;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
#price #main p {
	margin: 3rem 0;
	text-align: center;
	font-weight: bold;
}
#price #main p.kome {
	margin: 0 0 1rem 0;
	font-size: 0.9rem;
	text-align: right;
}
#price #main .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}
#price .workbox {
	width: 450px;
}
#price #main dt {
	padding: 0 1rem 0 0.5rem;
	font-weight: bold;
}
#price #main dd {
	margin: 0 1rem 0.5em 0;
	padding: 0 0.5rem 0.5rem 0;
	border-bottom: 2px dashed #927b49;
	text-align: right;
}
#price #main dd span {
	font-size: 0.9rem;
}



/* ----------------------------------------------
*** 製品 product ***
------------------------------------------------- */
#product h3 {
}
#product .consept {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 3rem;
	background: #000000;
	color: #ffffff;
}
.consept div {
	width: 600px;
	margin: 0 auto;
	padding: 2rem 2rem;
}
.consept img {
	margin: 0 auto;
	width: 100%;
	max-width: 300px;
}
.consept h2 {
	display: block;
	padding: 2rem 0 1rem;
	color: #f39800;
	font-size: 2.6em;
}
.consept p {
	margin: 0 0 0.6rem;
	line-height: 1.8;
}
#db1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 6rem;
}
#db1 div.wrap {
	width: 680px;
	margin: 0 auto;
	padding: 0 1rem;
}
#db1 .imgWrap {
	width: 280px;
	margin: 0 auto 1rem;
}
#db1 h3 {
	clear: both;
	margin: 0 0 1rem;
}
#db1 .keywordBox {
	float: left;
	width: 12rem;
	margin: 0 1rem 1rem 0;
	padding: 1rem;
	background: #000000;
	color: #ffffff;
	font-weight: bold;
}
#db1 .keywordBox p:first-letter {
	margin: 0 0.1rem 0 0;
	color: #f39800;
}
#db1 .box {
	clear: both;
	margin: 0 0 2rem 0;
	padding: 1rem;
	background: #f39800;
}
#db1 .box img {
	float: right;
	width: 180px;
	margin: 0 0 0 1rem;
}
#db1 .box h4 {
	clear: both;
	margin: 0 0 0.5rem 0;
	padding: 0;
	background: none;
	color: #414141;
	font-size: 1.2rem;
	font-weight: bold;
}
#db1 dl dt {
	float: left;
	margin: 0 0.5rem 0 0;
	font-weight: bold;
}
#db1 dl dd {
	margin: 0 0 0.5rem 0;
}
#db1 .wrap img {
	float: right;
	width: 100px;
	margin: 0 0 1rem 1rem;
}
#specification {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#specification div {
	width: 600px;
	margin: 0 auto;
}
#specification div h3 {
	margin: 0;
}
dl.specification {
	display: grid;
	gap: 0;
	margin: 2rem auto;
	padding: 0 1rem;
	font-size: 1rem;
	text-align: left;
}
dl.specification dt {
	grid-column: 1 / 2;
	margin: 0;
	padding: 0 1rem;
	border-top: 1px solid #3a2c23;
}
dl.specification dd {
	grid-column: 2 / 5;
	margin: 0;
	padding: 0 1rem;
	border-top: 1px solid #3a2c23;
}
dl.specification dt:first-child,dl.specification dt:first-child + dd {
	border-top: none;
}
dl.specification dd a {
	color: #3a2c23;
}
#specification img {
	height: 100%;
	margin: 4rem auto;
}

@media screen and (max-width: 767px) {
	#db1 .keywordBox,
	#db1 .box img,
	#db1 dl dt,
	#db1 .wrap img {
	float: none;
	}
#specification div {
	width: 100%;
	margin: 0 1rem;
	}
}

/* ----------------------------------------------
*** 店舗案内 shop ***
------------------------------------------------- */
#shop .contentsWrap {
	padding: 0 1rem;
}
.shopInfo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}
.shopInfo .main {
	width: 60%;
}
.shopInfo .sub {
	width: 35%;
}
.shopInfo h3 {
	margin: 3rem auto 1rem;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	border-radius: 0.5em 0.5em 0 0;
	background: linear-gradient(#ccb691, #020019 40%);
	color: #fff;
}
.shopInfo dl {
	margin: 1rem 1rem 1rem 0;
}
.shopInfo dl dt {
}
.shopInfo dl dd {
	margin: 0 0 2rem;
	font-size: 1.1rem;
}
.shopInfo p {
	margin: 0.5rem 0 1rem 0.5rem;
}
#shop #contents h4 {
	width: 12rem;
}
#googlemap iframe {
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	height: 50vh;
	border: 0;
	background-color: transparent;
}
@media screen and (max-width: 767px) {
.shopInfo {
	max-width: 100%;
	}
.shopInfo .main {
	width: 100%;
}
.shopInfo .sub {
	width: 100%;
}
}


/* ----------------------------------------------
*** お問い合わせ contact ***
------------------------------------------------- */
#contact #contents .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}
#contact #main {
	width: 60%;
	padding: 0 1rem;
}
.form {
	padding: 2rem 1rem 2rem;
	background: #e3d7be;
}
dl.mailForm {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1rem;
	padding: 0 1rem;
}
dl.mailForm dt {
	padding: 0.5rem 0 0 0;
	text-align: right;
}
dl.mailForm dd {
	margin: 0 0 0.5rem 0;
	text-align: left;
}
label {
	font-weight: bold;
}
input {
	width: 100%;
	padding: 0.5rem 0.8rem;
	border: 1px solid #d1be9f;
	border-radius: 2px;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	background: #fff;
}
textarea {
	width: 100%;
	margin: 0 0 2rem 0;
	padding: 0.5rem 0.8rem;
	border: 1px solid #d1be9f;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	background: #fff;
}
input:focus,
textarea:focus {
	box-shadow: 0px 0px 4px #3a2c23;
}
#contact #main p {
	margin: 0 0 1rem 0;
	text-align: center;
}
button {
	width: 60%;
	padding: 1rem;
	background: #3a2c23;
	color: #ffffff;
	border: none;
	border-radius: 0.5rem;
	font-size: 1.1rem;
	cursor: pointer;
	letter-spacing: 0.5rem;
}
#contact #sub {
	width: 30%;
	padding: 0 1rem;
}
#contact #sub dl {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 0.5rem;
	margin: 1rem 0;
	font-size: 1.1rem;
}
#contact #sub dl dt {
	grid-column: 1 / 2;
	text-align: right;
}
#contact #sub dl dd {
	grid-column: 2 /2;
	text-align: left;
}
#contact #sub dl dd a {
	color: #414141;
}

@media screen and (min-width: 1660px) {
#contact #contents {
	background: url(images/guitar.jpg) no-repeat 0 0;
	}
}
@media screen and (max-width: 767px) {
#contact #contents .wrap {
	flex-direction: column;
	align-items: center;
	}
#contact #main {
	order: 2;
	width: 100%;
	}
#contact #main p {
	text-align: left;
	}
#contact #main .form p {
	text-align: center;
}
#contact #sub {
	order: 1;
	width: 100%;
	}
dl.mailForm {
	grid-template-columns: 1fr;
	}
dl.mailForm dt {
	padding: 0;
	text-align: left;
	}
}

/* ----------------------------------------------
*** メール送信完了 gratitude ***
------------------------------------------------- */
#gratitude #contents .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}
#gratitude #main {
	width: 640px;
	min-height: 360px;
	padding: 0 1rem;
}
#gratitude #main p {
	margin: 1rem 0;
	padding: 0 1rem;
}
#gratitude #sub {
	width: 300px;
}
#gratitude #sub dl {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 0.5rem;
	margin: 1rem 0;
	font-size: 1.1rem;
}
#gratitude #sub dl dt {
	grid-column: 1 / 2;
	width: 6rem;
	text-align: right;
}
#gratitude #sub dl dd {
	grid-column: 2 / 3;
}
#gratitude #sub dl dd a {
	color: #414141;
}
/* ----------------------- コンテンツ 終わり */


/* ----------------------------------------------
*** フッター ***
------------------------------------------------- */
.footer {
	padding: 3rem 0 0;
	background: #3a2c23;
	color: #fff;
}
#footerWrap {
	max-width: var(--max_width);
	margin: 0 auto;
	padding: 0 1rem 0.5rem;
}
.footerNav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 0 0 3rem 0;
}
#footerInfo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
}
#info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 2rem;
}
p.googlemap {
	text-align: center;
}
p.googlemap img {
	height: 44px;
}
.footer p.shopName {
	margin: 0.4rem 0 1rem 0;
}
.footer #address {
	margin: 0 0 1rem;
}
.footer p {
	line-height: 2;
}
.footer p span {
	letter-spacing: 0.1rem;
}
.footer a {
	color: #fff;
}
p#copyright {
	margin: 5rem 0 0 0;
	padding: 0 0 0.5rem 0;
	font-size: 0.8rem;
	text-align: center;
	letter-spacing: 0.1rem;
}
#pageTop {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 100;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #ccb691;
	opacity: 0.6;
}
#pageTop a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
}
#pageTop a::before {
	position: absolute;
	top: -15px;
	bottom: 0;
	right: 0;
	left: 0;
	width: 25px;
	height: 25px;
	margin: auto;
	color: #fff;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f0d8';
	font-size: 25px;
	text-align: center;
}
@media screen and (max-width: 767px) {
#footerInfo {
	flex-direction: column;
	justify-content: center;
	}
#info {
	flex-direction: column;
	justify-content: center;
	}
.footer #address {
	margin: 0 auto 1rem;
	}
.footer p.shopName {
	margin: 0 auto 1rem;
	text-align: center;
	}
}
/* ----------------------- フッター 終わり */