@charset "utf-8";

@font-face {
	font-family: 'GochiHand-Regular';
	src: url(fonts/GochiHand-Regular.ttf);/*欧文を手書き風に*/
}

.handwritten {
	font-family: 'GochiHand-Regular', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	letter-spacing: 0.05em;
}

html {
	overflow-y: scroll;/*スクロールバーを常に表示しページ遷移時のがたつきを無くす*/
}

body {
	font-size: 1.125rem;/*18px*/
	color: #2b2b2b;
	background: #fefbfa;
	line-height: 1.5;
}

a {
	color: #555555;
	text-decoration: none;
}

a:hover {
	color: #555555;
}

.inner {
	max-width: 1000px;/*レスポンシブ*/
	min-width: 290px;/*レスポンシブ*/
	margin: 0 auto;
	/*background: #aaa;*/
	padding: 0 50px;
}

/*ハンバーガーメニュー*/
#menu-check,
#menu-image {
	display: none;
}

header .inner {
	margin-top: 20px;
	margin-bottom: 40px;
	/*background: #dddddd;*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap:wrap;
	max-width: 1010px;/*レスポンシブ*/
	padding: 0 45px;
}

header .inner .access-info {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 20px;
	margin-bottom: 20px;
}

/*ロープ部分*/
header .contact:before,
header .contact:after{
	content:"";
	width:5px;
	height:20px;
	position:absolute;
	top:-20px;
	background: #555;
}
header .contact:before{
		left:40px;
}
header .contact:after{
		right:40px;
}

/*ボタンの設定*/

.button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;/*テキスト範囲選択不可*/
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	padding: 0;

	border-radius: 10px;
}

.button:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	bottom: -8px;
	left: 0;
	display: block;
	width: 100%;
	height: 20px;
	content: "";
	-webkit-transition: all 0.3s;
	transition: all 0.3s;

	border: 2px solid #555;
	border-top: 1px solid #555;
	border-radius: 0 0 10px 10px;
	background-image: -webkit-repeating-linear-gradient(
		-90deg,
		#555 0px,
		#555 2px,
		transparent 2px,
		transparent 5px
	);
	background-image: repeating-linear-gradient(
		-90deg,
		#555 0px,
		#555 2px,
		transparent 2px,
		transparent 5px
);
background-size: 7px 7px;
-webkit-backface-visibility: hidden;

backface-visibility: hidden;
}

.button:hover {
	-webkit-transform: translate(0, 3px);
	transform: translate(0, 3px);
}
.button:hover:before {
	bottom: -5px;
}
.button:active {
	-webkit-transform: translate(0, 7px);
	transform: translate(0, 7px);
}

.button:active:before {
	bottom: -1px;
}


/*電話番号とメッセージ*/
header .contact {
	position: relative;
	display: block;
	padding: 10px 15px;
	border: 2px solid #555;
	border-radius: 10px;
	background: #fff;
}


/*電話番号*/
header .contact .number {
	font-size: 2.125rem;/*36px*/
	display: inline-block;
}
header .contact p {
	display: block;
	font-size: 1.0625rem;/*17px*/
}

header .contact .number::before {
	content: url(../images/tel.gif);
	display: inline-block;
	/*width: 30px;
	height: 30px;*/
}

/*営業時間、定休日*/
header .inner .access-info dl {
	margin-left: 8px;
}

header .inner .access-info dl dt,
header .inner .access-info dl dd {
	display: inline-block;
}

header .inner .access-info dl dd::before {
	content: " : ";
}

header .inner .access-info dl dt {
	width: calc(1.125rem * 4);
}

/*メニュー*/
nav {
	background: #efe9e7;
	padding: 27px 0;
}

nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

nav ul li {
	text-align: center;
	position: relative;
	margin: 0 23px 0;
}
nav ul li a span {
	font-size: 1.375rem; /*22px*/
	letter-spacing: 0em;
}

nav ul li+li::before {
	display: inline-block;
	position: absolute;
	content: "";
	width: 1px;
	height: 30px;
	background: #000000;
	top: 50%;
	left: -23px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

/*ナビゲーションの共通設定*/
nav ul li a:hover,
footer ul li a:hover {
	color: #f47a55; /*22px*/
}
nav li a,
footer ul li a {
	transition: 0.2s ease-in-out;
}

/*↓↓↓↓↓下層ページ用設定↓↓↓↓↓*/
h2:not(#home h2) {
	font-family: 'GochiHand-Regular', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	margin: 65px 0 0 0;
	text-align: center;
	font-size: 1.25rem;/*20px*/
	font-weight: 500;
	color: #777;
}
h3:not(#home h3) {
	position: relative;
	text-align: center;
	font-size: 1.75rem;
	font-weight: 900;
	/*border-bottom: 2px solid #555;*/
	width: calc(1.75rem * 4 + 80px);
	padding-bottom: 10px;
	margin: 0 auto 50px;
}

main .title {
	background-image: -webkit-radial-gradient(circle closest-side at 55%, #fddfd6 50%,transparent 100%);
	background-image: radial-gradient(circle closest-side at 55%, #fddfd6 50%,transparent 100%);
}
/*
h3:not(#home h3):after {
	content: '';
	display: inline-block;
	background-image: url(../images/icon_scissors.png);
	background-size: contain;
	position: absolute;
	bottom: -10px;
	right: -16px;
	width: 32px;
	height: 18px;
}*/
/*↑↑↑↑↑下層ページ用設定↑↑↑↑↑*/

h2 span {
	font-size: 1.75rem;/*28px*/
	font-weight: 500;
}

/*フッター*/
footer {
	margin-top: 30px;
	text-align: center;
	background: #efe9e7;
	padding: 50px 0;
	color: #555;
}

/*↓↓↓↓↓下層ページ用設定↓↓↓↓↓*/
footer:not(#home footer) {
	margin-top: 90px;
}
/*↑↑↑↑↑下層ページ用設定↑↑↑↑↑*/

footer address {
	margin-top: 20px;
}

footer ul {
	margin: 50px 0 30px;
}

footer ul li {
	display: inline;
}

footer ul li+li::before {
	content: "|";
	margin: 0 10px 0;
}

/*CSSシグネチャ設定*/
#home nav .home a,
#menu nav .nav1 a,
#item nav .nav2 a,
#information nav .nav3 a,
#access nav .nav4 a
 {
	color: #f47a55;
}

#home footer .home a,
#menu footer .nav1 a,
#item footer .nav2 a,
#information footer .nav3 a,
#access footer .nav4 a
 {
	color: #f47a55;
}


/*-----SP版の設定-------*/

@media screen and (max-width: 767px){

	.menu-check:checked ~ nav {
		transform: translateY(200px);
		background: #f9f;
	}

	body {
		font-size: 1rem;/*16px*/
	}

	.inner {
		padding: 0 15px;
	}

	/*ハンバーガーメニュー*/
	.menu-block {
		position: relative;
	}

	#menu-image {
		display: block;
		position: fixed;
		top: 20px;
		right: 20px;
		z-index: 2;
		width: 50px;
	}
	#menu-image img {
		height: 50px;
	}

	nav {
		display: none;
		/*overflow: hidden;*/
	}
	#menu-image svg line.d.border1,
	#menu-image svg line.d.border2,
	#menu-image svg line.d.border3,
	#menu-image svg text
	{
		-webkit-transition: 500ms all ease;
		transition: 500ms all ease;
	}

	#menu-image svg line.d.border1 {
		-webkit-transform-origin: 15px 11.22px;
		transform-origin: 15px 11.22px;
	}
	#menu-image svg line.d.border3{
		-webkit-transform-origin: 15px 25.22px;
		transform-origin: 15px 25.22px;
	}

	#menu-check:checked ~ #menu-image svg line.d.border1 {
		-webkit-transform: translate(2px,0px) rotate(45deg);
		transform: translate(2px,0px) rotate(45deg);
	}

	#menu-check:checked ~ #menu-image svg line.d.border2 {
		transform: translate(50px, 0);
		opacity: 0;
	}

	#menu-check:checked ~ #menu-image svg line.d.border3 {
		-webkit-transform: translate(2px,0px) rotate(-45deg);
		transform: translate(2px,0px) rotate(-45deg);
	}

	#menu-image svg text.close {
		opacity: 0;
	}

	#menu-check:checked ~ #menu-image svg text.close {
		opacity: 1;
	}

	#menu-check:checked ~ #menu-image svg text.menu {
		opacity: 0;
	}

	nav {
		opacity: 0;
		z-index: 1;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color:rgba(253,228,221,0.95);
		transform: translateY(-100%);
		transition: all 0.5s 0s ease;
	}

	#menu-check:checked ~ nav {
		opacity: 1;
		transform: translateY(0);
	}

	nav ul {
		display: block;
		position: absolute;
		top: 50%;
		left: 0%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		 -ms-transform: translateY(-50%);
		width: 100%;
		text-align: center;
	}
	nav .inner {
		padding: 0;
	}

	nav ul li {
		margin: 20px;
		text-align: center;
	}

	nav ul li span {
		margin-right: 10px;
		display:inline-block;
		width: 50%;
		text-align: end;
	}

	nav ul li br {
		display: none;text-align: end;
	}

	nav ul li + li::before {
		content: none;
	}
	nav ul li a {
		/*color: white;*/
		display:inline-block;
		width: calc(1.375rem*9);
		text-align: start;
	}

	/*ヘッダー*/
	header .inner {
		display: block;
		padding: 0 15px;
		margin-bottom: 35px;
	}

	header .inner .access-info {
		display: block;
		text-align: center;
		margin-top: 40px;
	}

	header .inner .access-info .contact .number {
		font-size: 1.75rem;
	}

	header .inner .access-info .contact p {
		font-size: 0.875rem;
	}

	header .inner .access-info dl {
		margin-top: 20px;
	}

	header .inner .access-info dl dt {
		width: calc(1rem * 4);
	}

	header .inner .access-info dl div {
		width: calc(1rem * 12);
		margin: 0 auto;
		text-align: left;
	}

	header .inner .logo img,
	footer .inner .logo-footer img {
		width: 90px;
	}

	footer ul li {
		display: inline-block;
	}

	footer ul {
		margin: 40px 0 30px;
	}
	/*↓↓↓↓↓下層ページ用設定↓↓↓↓↓*/
	h2:not(#home h2) {
		margin: 50px 0 0 0;
		font-size: 1rem;/*20px*/
	}
	h3:not(#home h3) {
		font-size: 1.5rem;/*24px*/
		font-weight: 900;
		width: calc(1.5rem * 4 + 30px);
		padding-bottom: 8px;
		margin: 0 auto 30px;
	}
	footer:not(#home footer) {
		margin-top: 70px;
	}
/*↑↑↑↑↑下層ページ用設定↑↑↑↑↑*/

}