@charset "UTF-8";

@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 400;
	src: url(../webfonts/NotoSerifJP-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Serif JP';
	font-weight: 700;
	src: url(../webfonts/NotoSerifJP-Bold.otf) format('opentype');
}

html { font-size: 62.5%;}
img { max-width:100%; height:auto; }

body{
	min-width: 100%;
	margin: 0;
	padding: 0;
	color: #0a0a0a;
	letter-spacing: 0.2rem;
	line-height:1.8;
	font-weight: 400;
	font-size: 1.6rem;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 'Noto Serif JP', "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	background:#fffaf5 ;
	position: relative;
}

a {
	color: #0a0a0a;
	font-weight: 600;
	text-decoration: none;
}
address{ font-style: normal; }


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
	outline-offset: -2px;
}

select::-ms-expand { display: none; }
input[type="button"]{ cursor: pointer; }

form, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], .border-box {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input , select , textarea { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 'Noto Serif JP', "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}




/*========/ 共通ボタン /========*/
.common-btn {
	display: inline-block;
}
.common-btn a {
	display: flex;
	align-items: center;
	transition: all 0.3s;
	position: relative;
}
.common-btn a:before {
	content: "";
	width: 24px;
	height: 24px;
	margin-right: 8px;
	display: inline-block;
	vertical-align: top;
	background: url(../../img/maruya_en.png) 100% / 24px 24px no-repeat;
	transition: all 0.2s;
}
.common-btn a:hover::before {
	content: "";
	width: 24px;
	height: 24px;
	margin-right: 8px;
	display: inline-block;
	vertical-align: top;
	background: url(../../img/maruya_en-fff.png) 100% / 24px 24px no-repeat;
}



/*========/ header /========*/
header {
	width: 360px;
	min-width: 360px;
	height: 100vh;
	height: 100svh;
	padding:80px 5% 0;
	position: fixed;
	top:0;
	left:0;
	z-index:997;
	background:#fffaf5;
	transition: all 0.3s;
	box-sizing: border-box;
	overflow: auto;

}
header h1 a {
	width: 164px;
	display: block;
	background:#fffaf5;
	position: relative;
}

header .anav {
	width: 100%;
	margin: 80px 0;
	transition: all .25s ease;
}
header .anav div .CI {
	position: relative;
}
header .anav div .CI:after {
	content:"";
	display:inline-block;
	width:1px;
	height:24px;
	position:absolute;
	top:2px;
	right:-32px;
	transition: all 0.3s;
}
header .anav div .CI li a {
	font-size: 1.4rem;
	transition: all 0.3s;
	position: relative;
}
header .anav div .CI li a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
header .anav div .CI li a::before {
	content: '';
	width: 100%;
	height: 1px;
	margin: auto;
	background: #8b2222;
	position: absolute;
	left: 0;
	bottom: -4px;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
header .anav div .sns a {
	margin-top:15px;
	display:inline-block;
	font-size: 1.4rem;
	transition: all 0.3s;
	position: relative;
}
header .anav div .sns a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
header .anav div .sns a::before {
	content: '';
	width: 100%;
	height: 1px;
	margin: auto;
	background: #8b2222;
	position: absolute;
	left: 0;
	bottom: -4px;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}
header .anav div .sns i {
	padding-right: 8px;
	font-size: 1.8rem;
}
header .anav > ul { margin-bottom:20px; }
header .anav > ul li + li{ margin-top:8px; }
header .anav > ul li a {
	font-size: 1.8rem;
	transition: all 0.3s;
	position: relative;
}
header .anav > ul li a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
header .anav > ul li a::before {
	content: '';
	width: 100%;
	height: 1px;
	margin: auto;
	background: #8b2222;
	position: absolute;
	left: 0;
	bottom: -4px;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
}

@media screen and (max-width: 1400px) {
	header {
		width: 300px;
		min-width: 300px;
	}
}
@media screen and (max-width: 1200px) {
	header {
		width: 270px;
		min-width: 270px;
	}
}
@media screen and (max-width: 1000px) {
	header {
		max-width: 100%;
		min-width: 100%;
		height: 70px;
		padding: 15px 0;
		box-sizing: content-box;
		overflow: hidden;
	}
	header h1 a {
		width: 57px;
		margin-left: 20px;
	}
	header .anav { display: none; }
}
/*==// ハンバーガーメニューボタン //==*/
.menu{ display: none; }


@media screen and (max-width: 1000px) {
	.menu{
		display: block;
		height: 20px;
		width: 40px;
		top: 40px;
		right: 20px;
		z-index: 999;
		cursor: pointer;
		position: fixed;
	}
	.menu__line{
		background: #111;
		display: block;
		height: 2px;
		position: absolute;
		transition:transform .3s;
		width: 100%;
	}
	.menu__line--center{ top: 9px; }
	.menu__line--bottom{ bottom: 0px; }
	.menu__line--top.active{
		top: 8px;
		transform: rotate(45deg);
	}
	.menu__line--center.active{ transform:scaleX(0); }
	.menu__line--bottom.active{
		bottom: 10px;
		transform: rotate(135deg);
	}
}


/*==// ハンバーガーメニュー //==*/
.gnav {
	background-color: #fffaf5;
	display: none;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 9;
	top:0;
}
.gnav__wrap{
	top: 50%;
	left: 140px;
	transform: translate(-0%, -50%);
	-webkit-transform: translate(-0%, -50%);
	-ms-transform: translate(-0%, -50%);
	transition: all .25s ease;
	position: absolute;
}
.gnav__wrap > ul li:not(:last-child) { padding-bottom: 16px; }
.gnav__wrap div {
	margin-top: 40px;
	display: flex;
}
.gnav__wrap > ul li a {
	font-size: 2.4rem;
	position: relative;
}
.gnav__wrap > ul li a::before {
	background: #0a0a0a;
	content: '';
	width: 100%;
	height: 1px;
	left: 0;
	bottom: -4px;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	position: absolute;
}
.gnav__wrap > ul li a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.gnav__wrap div .CI {
	display: flex;
	margin-right: 80px;
	position: relative;
}
.gnav__wrap div .CI:after {
	content:"";
	display:inline-block;
	width:1px;
	height:24px;
	background-color:#999;
	position:absolute;
	top:0px;
	right:-40px;
}
.gnav__wrap div .CI li:not(:last-child) { padding-right: 40px; }
.gnav__wrap div .CI li a { position: relative; }
.gnav__wrap div .CI li a::before {
	background: #0a0a0a;
	content: '';
	width: 100%;
	height: 1px;
	left: 0;
	bottom: -4px;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	position: absolute;
}
.gnav__wrap div .CI li a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.gnav__wrap div .sns a {
	display: flex;
	align-items: center;
	position: relative;
}
.gnav__wrap div .sns a::before {
	background: #0a0a0a;
	content: '';
	width: 100%;
	height: 1px;
	left: 0;
	bottom: -4px;
	margin: auto;
	transform-origin: right top;
	transform: scale(0, 1);
	transition: transform .3s;
	position: absolute;
}
.gnav__wrap div .sns a:hover::before {
	transform-origin: left top;
	transform: scale(1, 1);
}
.gnav__wrap div .sns i {
	padding-right: 8px;
	font-size: 2.4rem;
}


@media screen and (max-width: 700px) {
	.gnav__wrap div { display: block; }
	.gnav__wrap div .CI {
		display: block;
		margin-right: 0;
	}
	.gnav__wrap div .CI:after { content:none; }
	.gnav__wrap div .CI li:not(:last-child) {
		padding-bottom: 16px;
		padding-right: 0;
	}
	.gnav__wrap div .sns { margin-top: 40px; }
}
@media screen and (max-width: 500px) {
	.gnav__wrap{ left: 24px; }
}

/*========/ main /========*/
main{
	width:calc( 100% - 360px );
	margin-left:360px;
	display:block;
	background:#f9efe4;
}

@media screen and (max-width: 1400px) {
	main {
		width:calc( 100% - 300px );
		margin-left:300px;
	}
}
@media screen and (max-width: 1200px) {
	main {
		width: calc( 100% - 270px );
		margin-left: 270px;
	}
}
@media screen and (max-width: 1000px) {
	main {
		margin-top: 100px;
		width: 100%;
		margin-left: 0;
	}
}
/*========/ footer /========*/
footer{
	width: calc( 100% - 360px );
	margin-left: 360px;
	padding-top: 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	color: #fff;
	background: #000;
}
footer a{ color: #fff; }
footer > div{
	width: 180px;
	margin: 0 110px 0 80px;
}
footer > div h2{
	margin-top: 36px;
	font-size: 1.6rem;
}
footer > div address{ margin-top: 16px; }
footer ul{
	width: calc( 100% - 450px );
	margin-right: 80px;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 80px 40px;

}
footer ul li{ width: calc( 100% / 3 - 40px ); }
footer ul li a{
	background: linear-gradient(#fff, #fff) bottom right / 100% 1px no-repeat;
	transition: background .25s;
}
footer ul li a:hover { background-size: 0 1px; }
footer ul li address{
	margin-top: 15px;
	font-size: 1.4rem;
}
footer > p{
	width: 100%;
	margin-top: 80px;
	padding: 6px 0;
	letter-spacing: .3rem;
	font-size: 1.2rem;
	text-align: center;
	background: #8b2222;
}
@media screen and (max-width: 1400px) {
	footer {
		width: calc( 100% - 300px );
		margin-left: 300px;
	}
}
@media screen and (max-width: 1200px) {
	footer {
		width: calc( 100% - 270px );
		margin-left: 270px;
	}
	footer > div{ margin: 0 60px 0 80px; }
	footer ul li{ width: calc( 100% / 2 - 20px ); }
	footer ul { width: calc( 100% - 400px ); }
}
@media screen and (max-width: 1000px) {
	footer {
		width: 100%;
		margin-left: 0;
	}
	footer > div{ margin: 0 40px; }
	footer ul {
		width: calc( 100% - 300px );
		margin-right: 40px;
		gap: 40px;
	}
}
@media screen and (max-width: 650px) {
	footer > div {
		width: 100%;
		margin: 0 40px;
		display: flex;
		flex-wrap: wrap;
		gap: 30px 60px;
		align-items: center;
		font-size: 1.4rem;
	}
	footer > div h2{ margin-top: 0; }
	footer > div address { margin-top: 5px; }
	footer ul {
		width: 100%;
		margin: 40px 40px 0;
		gap: 30px;
	}
	footer ul li{ width: 100%; }
	footer ul h3{ font-size: 1.6rem; }
	footer > p{ font-size: 1rem; }

}
@media screen and (max-width: 500px) {
	footer > div { margin: 0 15px; }
	footer ul { margin: 40px 15px 0; }
}

/*========/ scroll_up /========*/
/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -15px);
	transition: all 1.4s 0.4s ease-out;
}

/* 下からフェードイン */
.slide-bottom {
	opacity: 0;
	transform: translate(0, 15px);
	transition: all 1.4s 0.4s ease-out;
}

/* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-15px, 0);
	transition: all 1.4s 0.4s ease-out;
}

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(15px, 0);
	transition: all 1.4s 0.4s ease-out;
}