@charset "utf-8";

/* 変数 -----------------------------------------------------------------------------------------*/
:root {
	--family-min: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "游明朝体", "Yu Mincho", YuMincho, serif;
	--family-go: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, sans-serif;

	--wrapper: 84%;
	--wrapper-max: 1024px;
	--wrapper-max-l: 1280px;
	--wrapper-max-s: 820px;

	--header-h: 60px;

	--color-main: #000;
	--color-black: #333;
	--color-white: #fff;
	--color-gray: #e8e8e8;
	--color-gray-d: #929292;

	--color-header: rgba(255, 255, 255, 0.94);
	--color-footer: var(--color-main);
	--color-alpha: rgba(255, 255, 255, 0.94);
	--color-contact: #ddddd5;
	--color-error: #cd401a;

	--font-xl: 2.1rem;
	--font-ll: 1.9rem;
	--font-l: 1.8rem;
	--font-m: 1.6rem;
	--font-s: 1.4rem;
	--font-ss: 1.2rem;
	--font-xs: 1.1rem;

	--weight-r: 400;
	--weight-m: 500;
	--weight-b: 600;

	--line-ll: 3.0em;
	--line-l: 2.0em;
	--line-m: 1.75em;
	--line-s: 1.4em;

	--margin-ll: 120px;
	--margin-l: 90px;
	--margin-m: 60px;
	--margin-ms: 40px;
	--margin-s: 30px;
	--margin-ss: 20px;
	--margin-xs: 10px;
	--margin-xxs: 5px;
}
/*-----------------------------------------------------------------------------------------------*/


/*html, body { height: 100%; }*/
html { font-size: 62.5%; }
body {
	background-color: var(--color-white);
	color: var(--color-black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*font-feature-settings: "palt";*/
	line-height: 1;
	overflow-x: hidden;
	min-width: 320px;
}
img/*,
svg*/ {
	height: auto;
	width: 100%;
	max-width: 100%;
}
a:link, a:visited, .hover {
	color: var(--color-black);
	transition: 0.2s ease-out;
	transition-property: background-color, color, opacity;
	text-decoration: none;
}
a[href*="tel:"] { text-decoration: underline; }
a:hover, a:active, .hover:hover {
	/*color: var(--color-active);
	opacity: 0.7;*/
	text-decoration: underline;
}
a:focus { outline: none; }

strong { font-weight: var(--weight-b); }

th,
dt { font-weight: var(--weight-r); }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*::selection {
	background-color: var(--color-black);
	color: var(--color-white);
}*/

.indent {
	padding-left: 1em;
	text-indent: -1em;
}

.fc::first-letter { font-feature-settings: "palt"; }



/* フォント -------------------------------------------------------------------------------------*/
body {
	font-family: var(--family-min);
	font-weight: var(--weight-r);
}

body { opacity: 0; }
.wf-active body,
.wfno-load body { opacity: 1; }
/*-----------------------------------------------------------------------------------------------*/


/* wrapper --------------------------------------------------------------------------------------*/
.wrapper {
	margin: 0 auto;
	width: var(--wrapper);
	max-width: var(--wrapper-max-s);
}
#top .reads .wrapper,
#taste-of-local .wrapper { max-width: var(--wrapper-max); }
.footer .wrapper { max-width: var(--wrapper-max-l) !important; }
/*-----------------------------------------------------------------------------------------------*/


/* lazy -----------------------------------------------------------------------------------------*/
.js-lazy {
	opacity: 0;
	transform: translateY(10%) scale(1);
	transition-duration: 0.8s;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.61, 1, 0.88, 1);/*cubic-bezier(0.5, 1, 0.89, 1);*/
}
/*-----------------------------------------------------------------------------------------------*/


/* swiper ---------------------------------------------------------------------------------------*/
.swiper-container { position: relative; }

.swiper-pagination { bottom: -20px !important; }
.swiper-pagination-bullet {
	background-color: var(--color-gray);
	height: 6px;
	opacity: 1;
	margin: 0 4px !important;
	width: 6px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--color-black); }
/*-----------------------------------------------------------------------------------------------*/


/* ボタン ---------------------------------------------------------------------------------------*/
.button a,
.button .a,
.button input[type="submit"] {
	background-color: var(--color-white);
	border: var(--color-main) solid 2px;
	color: var(--color-main);
	display: block;
	/*font-family: var(--family-go);*/
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	margin: 0 auto;
	padding: 12px 0 14px;
	transition-property: background-color, color;
	text-align: center;
	text-decoration: none;
	width: 230px;
}
	.mac .button a, .mac .button .a, .mac .button input[type="submit"] { padding-bottom: 11px; }
	.ipad .button a, .ipad .button .a, .ipad .button input[type="submit"],
	.iphone .button a, .iphone .button .a, .iphone .button input[type="submit"] { padding-bottom: 12px; }
.button a:hover {
	background-color: var(--color-main);
	color: var(--color-white);
	opacity: 1;
}
.button.off a,
.button.off .a,
.button.off input[type="submit"] {
	border-color: var(--color-gray-d);
	color: var(--color-gray-d);
}

.button.b a,
.button.b .a,
.button.b input[type="submit"] {
	background-color: var(--color-main);
	color: var(--color-white);
}
.button.b a:hover {
	background-color: var(--color-white);
	color: var(--color-main);
	opacity: 1;
}
.button.b.w a,
.button.b.w .a,
.button.b.w input[type="submit"] { border-color: var(--color-white); }
.button.b a:hover {
	background-color: var(--color-white);
	color: var(--color-main);
	opacity: 1;
}

.button.b.off a,
.button.b.off .a,
.button.b.off input[type="submit"] {
	background-color: transparent;
	border-color: var(--color-gray-d);
	color: var(--color-gray-d);
}
/*-----------------------------------------------------------------------------------------------*/


/* SNS ------------------------------------------------------------------------------------------*/
.sns a {
	font-size: var(--font-ss);
	padding-left: 20px;
	position: relative;
}
.sns .x a::before,
.sns .instagram a::before {
	background-color: var(--color-black);
	-webkit-mask-size: auto 16px;
	mask-size: auto 16px;
	content: "";
	height: 16px;
	position: absolute;
	top: 1px;
	left: 0;
	width: 16px;
}
	.mac .sns .x a::before, .mac .sns .instagram a::before,
	.ipad .sns .x a::before, .ipad .sns .instagram a::before,
	.iphone .sns .x a::before, .iphone .sns .instagram a::before { top: -2px; }
.sns .x a::before {
	-webkit-mask-image: url("../images/logo_x.svg");
	mask-image: url("../images/logo_x.svg");
}
.sns .instagram a::before {
	-webkit-mask-image: url("../images/logo_instagram.svg");
	mask-image: url("../images/logo_instagram.svg");
}

.main .sns {
	display: flex;
	column-gap: var(--margin-s);
	margin-top: var(--margin-xs);
}
.main .sns a {
	font-size: var(--font-s);
	line-height: 1;
}
.main .sns .x a::before,
.main .sns .instagram a::before { top: 3px; }
	.mac .main .sns .x a::before, .mac .main .sns .instagram a::before,
	.ipad .main .sns .x a::before, .ipad .main .sns .instagram a::before,
	.iphone .main .sns .x a::before, .iphone .main .sns .instagram a::before { top: 0; }
	.mac #itto .main .sns .x a::before, .mac #itto .main .sns .instagram a::before,
	.ipad #itto .main .sns .x a::before, .ipad #itto .main .sns .instagram a::before,
	.iphone #itto .main .sns .x a::before, .iphone #itto .main .sns .instagram a::before { top: -2px; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ヘッダー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.header {
	background-color: var(--color-header);
	height: var(--header-h);
	display: flex;
	align-items: center;
	padding-left: 15px;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
.header img {
	height: 37px;/*29px;*/
	width: auto;
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ナビ -----------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
/* ＝ -------------------------------------------------------------------------------------------*/
.nav {
	cursor: pointer;
	height: var(--header-h);
	position: fixed;
	top: 0;
	right: 0;
	transition: 0.2s ease-out;
	transition-property: color top transform;
	width: var(--header-h);
	z-index: 102;
}

.nav::before,
.nav::after {
	background-color: var(--color-black);
	content: "";
	height: 2px;
	position: absolute;
	left: 12px;
	transition: background-color 0.2s ease-out;
	width: calc(var(--header-h) - 32px);
}
.nav::before { top: 26px; }
.nav::after { bottom: 26px; }
.nav.actived::before { top: 29px; transform: rotate(45deg); }
.nav.actived::after { bottom: 29px; transform: rotate(-45deg); }

/*.nav:hover { color: var(--color-active); }
.nav:hover::before,
.nav:hover::after { background-color: var(--color-active); }*/

/* × */
@keyframes navt {
	0% { top: 26px; transform: rotate(0deg); }
	50% { top: 29px; transform: rotate(0deg); }
	100% { top: 29px; transform: rotate(45deg); }
}
.nav.active::before { animation: navt 0.2s linear forwards; }
.nav.reverse::before { animation: navt 0.2s linear reverse both; }
@keyframes navb {
	0% { bottom: 26px; transform: rotate(0deg); }
	50% { bottom: 29px; transform: rotate(0deg); }
	100% { bottom: 29px; transform: rotate(-45deg); }
}
.nav.active::after { animation: navb 0.2s linear forwards; }
.nav.reverse::after { animation: navb 0.2s linear reverse both; }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* グローバル -----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.global {
	background-color: var(--color-header);
	height: calc(100svh - var(--header-h));
	overflow-y: auto;
	padding-top: 30px;
	position: fixed;
	top: var(--header-h);
	left: 0;
	transform: translateX(100%);
	/*transition: transform 0.2s ease-out;*/
	width: 100%;
	z-index: 101;
}
.global.ready { transition: transform 0.2s ease-out; }
.global.active { transform: translateX(0); }


/* メニュー -------------------------------------------------------------------------------------*/
.global .menu {
	display: flex;
	flex-direction: column;
}
.global .menu > li { position: relative; }
.global .menu a {
	color: var(--color-black);
	display: block;
	font-size: var(--font-m);/*var(--font-s);*/
	font-weight: var(--weight-b);
	letter-spacing: 0.05em;
	line-height: var(--line-s);
	padding: 15px 0 16px 8%;
	position: relative;
	text-decoration: none;
}
.global .menu a br { display: none; }

/* サブメニュー */
.global .menu .sub {
	cursor: pointer;
	height: 49px;
	position: absolute;
	top: 0;
	right: 8%;
	width: 49px;
}
.global .menu .sub::before,
.global .menu .sub::after {
	background-color: var(--color-black);
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease-out;
}
.global .menu .sub::before { height: 2px; width: 12px; }
.global .menu .sub::after { height: 12px; width: 2px; }
.global .menu .sub.active::after { opacity: 0; }

.global .menu ul {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.global .menu ul li { padding-left: 2em; }
.global .menu ul a {
	padding-top: 10px;
	padding-bottom: 11px;
}

/* SNS、言語 */
.global .link,
.footer .sns,
.global .lang,
.footer .lang {
	display: flex;
	justify-content: center;
	column-gap: var(--margin-ss);
	margin-top: var(--margin-m);
}

.global .lang { padding-right: 15px; }
.global .link img { width: 16px; }

.global .lang,
.footer .lang {
	column-gap: 0;
	font-size: var(--font-s);
	margin-top: var(--margin-s);
}
.global .lang li:not(:last-child),
.footer .lang li:not(:last-child) { padding-right: 0.5em; }
.global .lang li:not(:last-child)::after,
.footer .lang li:not(:last-child)::after {
	padding-left: 0.5em;
	content: "/";
}
.global .lang span,
.footer .lang span { position: relative; }
.global .lang span::after,
.footer .lang span::after {
	content: "";
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.global .lang span::after { background-color: var(--color-main); }
.footer .lang span::after { background-color: var(--color-white); }
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* フッター -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.footer {
	background-color: var(--color-footer);
	padding: var(--margin-m) 0 var(--margin-s);
	text-align: center;
}
.footer .wrapper { width: 100%; }

.footer,
.footer a {	color: var(--color-white); }

.footer .logo img {	height: 37px;/*39px;*/ }


/* インフォメーション ---------------------------------------------------------------------------*/
.footer .information {
	display: flex;
	flex-direction: column;
	row-gap: var(--margin-xs);
	font-size: var(--font-s);
	margin-top: var(--margin-m);
}
/* 名称 */
.footer .name {
	font-weight: var(--weight-b);
	letter-spacing: 0.05em;
}
.footer .name a {
	/*font-size: var(--font-ss);*/
	text-decoration: underline;
}
/* 住所 */
.footer .address .googlemap { font-size: var(--font-s); }
.footer .address a { text-decoration: underline; }

/* お問い合わせ */
.footer .button { margin-top: var(--margin-s); }


/* サイトマップ ---------------------------------------------------------------------------------*/
.footer .sitemap ul {
	display: flex;
	flex-direction: column;
}
.footer .sitemap a {
	color: var(--color-white);
	display: inline-block;
	font-size: var(--font-m);
	letter-spacing: 0.05em;
	line-height: var(--line-s);
	padding: 10px 0;
}
.footer .sitemap a br { display: none; }

.footer .menu { margin-top: var(--margin-ms); }
.footer .menu ul { padding-bottom: var(--margin-xs); }
.footer .menu ul a {
	font-size: var(--font-ss);
	padding: 5px 0;
}

/* SNS */
.footer .sns .x a::before,
.footer .sns .instagram a::before { background-color: var(--color-white); }


/* コピーライト ---------------------------------------------------------------------------------*/
.footer .copyright {
	font-size: var(--font-ss);
	line-height: var(--line-s);
	margin-top: var(--margin-ms);
}
/*-----------------------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------------------------*/
/* ボディー -------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/
.main {
	background-color: var(--color-white);
	padding-bottom: calc(var(--margin-ll) * 2);

	line-break: strict; /* 禁則処理を厳格に適用 */
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
}
#contact .main { background-color: var(--color-contact); }

/* コンテナー */
.main .container {
	margin-top: var(--margin-m);
	padding-top: var(--margin-m);
}
.main .container:first-of-type { margin-top: 0; }

/* 見出し */
.main .midashi { padding-top: var(--margin-l); }
.main h1 {
	font-size: var(--font-xl);
	font-weight: var(--weight-b);
}
.main h2 {
	font-size: var(--font-ll);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
}
.main h3 {
	font-size: var(--font-l);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
}
.main h4 {
	font-size: var(--font-m);
	font-weight: var(--weight-b);
	line-height: var(--line-s);
}

/* リード */
.main .read {
	font-size: var(--font-ll);
	font-weight: var(--weight-b);
	line-height: var(--line-m);
	text-align: justify;
}
.main .read p:not(:first-of-type) { margin-top: 2em; }

/* コメント */
.main .comment {
	font-size: var(--font-m);
	line-height: var(--line-l);
	text-align: justify;
}
.main .comment p:not(:first-of-type) { margin-top: 2em; }

.main .comment.en { text-align: left; }

/* アイコン */
.main a.pdf {
	padding-left: 18px;
	position: relative;
}
.main a.pdf::before {
	background-image: url("../images/icon_pdf.svg");
	background-size: 12px auto;
	content: "";
	height: 15px;
	position: absolute;
	top: 3px;
	left: 0;
	width: 12px;
}


/* 404 Not Found --------------------------------------------------------------------------------*/
#n404 h1,
#n404 .comment {
	margin-top: var(--margin-m);
	text-align: center;
}
#n404 .comment a { text-decoration: underline; }
/*-----------------------------------------------------------------------------------------------*/





@media(min-width: 530px) {
}



@media(min-width: 768px) {
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none !important;
	}
	br.sp { display: none; }
}



@media(min-width: 1024px) {
	/* 変数 -----------------------------------------------------------------------------------------*/
	:root {
		--header-h: 69px;/*97px;/*67px;*/
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.header { padding-left: 35px; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* ナビ -----------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	/* ＝ -------------------------------------------------------------------------------------------*/
	.nav { display: none; }
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* グローバル -----------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.global {
		background-color: transparent;
		display: flex;
		justify-content: flex-end;
		height: auto;
		overflow: visible;
		padding-top: 0;
		pointer-events: none;
		top: 0;/*15px;*/
		right: 0;
		left: auto;
		transform: none;
	}
	/* メニュー -------------------------------------------------------------------------------------*/
	.global .menu {
		flex-direction: row;
		align-items: flex-start;
		column-gap: var(--margin-s);
		margin-right: var(--margin-m);
	}
	.global .menu a {
		padding: 11px 0 12px;
		pointer-events: all;
	}
	.global .menu a br { display: inline; }
	.global .menu > li::after {
		background-color: transparent;
		content: "";
		height: 2px;
		position: absolute;
		bottom: 5px;
		left: -5px;
		transition: background-color 0.2s ease-out;
		width: calc(100% + 10px);
	}
	.global .menu > li:hover::after { background-color: var(--color-main); }
	/* サブメニュー */
	.global .menu .sub { display: none; }
	.global .menu .sub::before,
	.global .menu .sub::after { content: none; }
	.global .menu ul {
		background-color: var(--color-white);
		position: absolute;
		top: 49px;
		left: calc(-2em + -5px);
		min-width: calc(100% + 10px);
		z-index: 1;
	}
	.global .menu ul li { padding-left: 0; }
	.global .menu ul a {
		padding-right: 2em;
		padding-left: 2em;
		white-space: nowrap;
	}
	.global .menu ul a:hover {
		background-color: var(--color-main);
		color: var(--color-white);
	}
	/* SNS、言語 */
	.global .link { display: none; }
	.global .lang {
		margin-top: 15px;
		padding-right: 35px;
	}
	/*-----------------------------------------------------------------------------------------------*/

	/*-----------------------------------------------------------------------------------------------*/
	/* フッター -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.footer { text-align: left; }
	.footer .wrapper {
		position: relative;
		width: var(--wrapper);
	}
	/* インフォメーション ---------------------------------------------------------------------------*/
	.footer .information {
		margin-top: 0;
		padding-top: 180px;
	}
	/* お問い合わせ */
	.footer .button { margin-top: var(--margin-xs); }
	.footer .button a {
		margin-left: 0;
		width: 190px;
	}
	/* サイトマップ ---------------------------------------------------------------------------------*/
	.footer .sitemap {
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 0;
		right: 0;/*90px;*/
		width: 100%;/*calc(100% - 90px);*/
	}
	.footer .sitemap > ul {
		flex-direction: row;
		column-gap: var(--margin-s);/*var(--margin-ss);*/
	}
	.footer .sitemap a br { display: inline; }
	.footer .menu { margin-top: 0; }
	.footer .menu ul { padding-bottom: 0; }
	/* SNS、言語 */
	.footer .sns,
	.footer .lang { margin-top: 0; }
	.footer .sns {
		position: absolute;
		right: 0;
		bottom: var(--margin-m);
	}
	.footer .lang {
		position: absolute;
		top: 15px;
		right: 0;
	}
	/* コピーライト ---------------------------------------------------------------------------------*/
	.footer .copyright {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.footer .copyright br { display: none; }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1280px) {
	/*-----------------------------------------------------------------------------------------------*/
	/* ヘッダー -------------------------------------------------------------------------------------*/
	/*-----------------------------------------------------------------------------------------------*/
	.header { padding-left: var(--margin-ms); }
	/*-----------------------------------------------------------------------------------------------*/
}



@media(min-width: 1366px) {
}