@charset "utf-8";
/* top.css — front page only */

/* ---- hero ---- */

.slider_area { margin-top: 6px; }

.slider_area .inner { position: relative; }

.slider_area h2.white_mark {
	margin-bottom: 16px;
	font-family: var(--serif);
	font-size: 21px;
	line-height: 1.7;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--ink);
}

.slider_area h2.white_mark span { display: block; }

.pc_slider { display: none; position: relative; }
.sp_slider { display: block; position: relative; }

.pc_slider li, .sp_slider li {
	display: none;
	width: 100%;
}

.pc_slider li.on, .sp_slider li.on { display: block; }

.pc_slider img, .sp_slider img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

.slider_dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 14px;
}

.slider_dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rule);
	cursor: pointer;
}

.slider_dots button.on { background: var(--blue); }

.lead_block { margin-top: 54px; }

.lead_text {
	font-size: 16px;
	line-height: 2.4;
	text-align: center;
}

.lead_text span { display: block; }
.lead_text strong { font-weight: 400; color: var(--blue); }

.ill_ledger {
	display: block;
	width: 118px;
	color: var(--blue);
	margin: 26px 0 0 0;
	opacity: .85;
}

.shop_bnr { margin-top: 56px; text-align: center; }
.shop_bnr img { width: 100%; max-width: 720px; }

/* ---- notices ---- */

.news_area { margin-top: 84px; }

.news_area h2.white_mark { margin-bottom: 22px; }

.news_area dl { border-top: 1px solid var(--rule); }

.news_area dt {
	padding-top: 18px;
	font-family: var(--latin);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--blue);
}

.news_area dd {
	padding: 4px 0 18px;
	border-bottom: 1px solid var(--rule);
	font-size: 14px;
	line-height: 2.05;
	color: var(--ink_soft);
}

/* ---- three tiles. block was built for video, images went in instead ---- */

.movie_area { margin-top: 78px; }

.mov_wrap { display: grid; grid-template-columns: 1fr; gap: 14px; }

.mov { position: relative; padding-top: 56.25%; overflow: hidden; }

.mov img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- statement over photo ---- */

.raison_area { margin-top: 86px; }

.raison_shot {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}

.raison_area .title_block {
	position: relative;
	margin: -34px 22px 0 22px;
	padding: 26px 22px 28px;
	background: var(--white);
	border: 1px solid var(--rule);
}

.raison_area .title_block h2.white_mark { margin-bottom: 12px; }

.raison_area .title_block p { font-size: 14.5px; line-height: 2.1; color: var(--ink_soft); }
.raison_area .title_block p + p { margin-top: 12px; }

/* ---- five promises ---- */

.promises_area { margin-top: 96px; }

.promises_area h2 {
	margin-bottom: 34px;
	font-family: var(--latin);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ink_faint);
}

.promises_area h2 .lede {
	display: block;
	margin-top: 10px;
	font-family: var(--serif);
	font-size: 26px;
	font-style: normal;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--ink);
}

.five_promises li + li { margin-top: 44px; }

.five_promises .image { position: relative; }

.five_promises .image img { width: 100%; height: 210px; object-fit: cover; display: block; }

.five_promises .num {
	position: absolute;
	right: 10px;
	bottom: -16px;
	font-family: var(--latin);
	font-size: 64px;
	font-weight: 600;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--blue);
	text-stroke: 1px var(--blue);
}

.five_promises .text { padding-top: 26px; }

.five_promises h3 {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: .02em;
}

.five_promises .text p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 2.05;
	color: var(--ink_soft);
}

.five_promises .text a {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--latin);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blue);
	border-bottom: 1px solid var(--rule);
	padding-bottom: 3px;
}

/* ---- boxed fee panel ---- */

.fee_area { margin-top: 96px; }

.fee_area h2.white_mark { margin-bottom: 20px; }

.fee_box {
	padding: 26px 20px 24px;
	background: var(--white);
	border: 1px solid var(--rule);
}

.fee_box .row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	font-size: 14.5px;
}

.fee_box .row + .row { border-top: 1px dotted var(--rule); }

.fee_box .row span:last-child {
	font-family: var(--latin);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ink);
}

.bracket {
	position: relative;
	margin: 14px 0 6px;
	padding-left: 16px;
	border-left: 2px solid var(--blue);
}

.bracket .row { font-size: 14px; }

.fee_memo + .fee_memo { margin-top: 10px; }

.fee_memo {
	margin-top: 18px;
	font-size: 12.5px;
	line-height: 2;
	color: var(--ink_faint);
}

.button_block { margin-top: 40px; text-align: center; }
.button_block a { display: inline-block; padding: 14px 34px; border: 1px solid var(--blue); font-family: var(--latin); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }

.link_row { margin-top: 34px; text-align: center; }

.link_row a {
	font-family: var(--latin);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blue);
}

.link_row a:before { content: "\2192"; margin-right: 9px; }

/* ---- two column schedule ---- */

.menu_area { margin-top: 96px; }

.menu_area .title_block { margin-bottom: 34px; }
.menu_area .title_block h2.white_mark { margin-bottom: 12px; }
.menu_area .title_block p { font-size: 14.5px; line-height: 2.1; color: var(--ink_soft); }

.menu_block_outer + .menu_block_outer { margin-top: 62px; }

.menu_block .subttl {
	margin-bottom: 20px;
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: .04em;
}

.menu_box { margin-bottom: 30px; }

.menu_box h3 {
	margin-bottom: 8px;
	font-family: var(--latin);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink_faint);
}

.menu_box .item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 15px;
}

.menu_box .sub_item {
	padding: 5px 0 5px 18px;
	font-size: 13.5px;
	color: var(--ink_soft);
}

.price {
	font-family: var(--latin);
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.price .cur { font-size: 12px; margin-right: 1px; color: var(--ink_faint); }
.price small { font-size: 11px; color: var(--ink_faint); margin-right: 3px; }

.menu_box .memo {
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.95;
	color: var(--ink_faint);
}

.menu_box .time {
	margin-top: 6px;
	font-family: var(--latin);
	font-size: 11.5px;
	letter-spacing: .08em;
	color: var(--blue);
}

.ill_draw { display: block; width: 96px; margin-top: 16px; color: var(--ink); opacity: .55; }

.tow_cloumn .item.right { border-bottom: 1px solid var(--rule); }

.menu_block > p { margin-top: 10px; font-size: 12px; color: var(--ink_faint); }

sup { font-size: 9px; vertical-align: super; color: var(--blue); }

/* ---- who runs it ---- */

.owner_area { margin-top: 96px; }

.owner_area .title_block { margin-bottom: 18px; }

.owner_area .text h3 {
	font-size: 17px;
	font-weight: 400;
	letter-spacing: .03em;
}

.owner_area .text p {
	margin-top: 12px;
	font-size: 14.5px;
	line-height: 2.15;
	color: var(--ink_soft);
}

.owner_area .text a { color: var(--ink); border-bottom: 1px solid var(--rule); }

/* ---- company information + map ---- */

.access_area { margin-top: 92px; }

.access_area h2.white_mark { margin-bottom: 20px; }

.shop_info { border-top: 1px solid var(--rule); }

.shop_info dt {
	padding-top: 14px;
	font-family: var(--latin);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink_faint);
}

.shop_info dd {
	padding: 2px 0 14px;
	border-bottom: 1px solid var(--rule);
	font-size: 15px;
	line-height: 1.9;
}

.tel_link { font-family: var(--latin); font-size: 17px; letter-spacing: .04em; color: var(--blue); }

.sp_map { margin-top: 26px; }
.sp_map img { width: 100%; height: 220px; object-fit: cover; display: block; }

#map { margin-top: 26px; }
#map iframe { width: 100%; height: 380px; border: 0; display: block; }

@media screen and (min-width: 768px) {
	.slider_area { margin-top: 18px; position: relative; }

	.slider_area .inner { display: flex; align-items: flex-start; gap: 0; }

	.slider_area h2.white_mark {
		order: 2;
		position: relative;
		z-index: 3;
		margin: 52px 0 0 -86px;
		padding: 30px 26px 34px;
		background: var(--white);
		font-size: 23px;
		line-height: 2.2;
		letter-spacing: .1em;
		writing-mode: vertical-rl;
		text-orientation: mixed;
	}

	.slider_area h2.white_mark span { display: inline; }

	.slider_block { order: 1; flex: 1 1 auto; min-width: 0; }

	.pc_slider { display: block; }
	.sp_slider { display: none; }
	.pc_slider img { height: 470px; }

	.slider_dots { justify-content: flex-start; margin-top: 18px; }

	.lead_block { margin-top: 96px; }
	.lead_text { font-size: 17px; line-height: 2.7; }
	.ill_ledger { width: 150px; margin-top: 34px; }

	.shop_bnr { margin-top: 84px; }

	.news_area { margin-top: 126px; }
	.news_area .inner { display: flex; gap: 44px; }
	.news_area h2.white_mark { margin-bottom: 0; flex: 0 0 auto; }
	.news_area .news_list { flex: 1 1 auto; }
	.news_area dt { font-size: 13px; }
	.news_area dd { font-size: 14.5px; }

	.movie_area { margin-top: 96px; }
	.mov_wrap { grid-template-columns: repeat(3, 1fr); gap: 22px; }

	.raison_area { margin-top: 132px; position: relative; }
	.raison_shot { height: 520px; }

	.raison_area .title_block {
		position: absolute;
		right: 60px;
		bottom: -44px;
		display: flex;
		align-items: flex-start;
		gap: 26px;
		width: 560px;
		margin: 0;
		padding: 34px 34px 36px;
	}

	.raison_area .title_block h2.white_mark { order: 2; margin-bottom: 0; }
	.raison_area .title_block p { order: 1; }

	.promises_area { margin-top: 190px; }
	.promises_area h2 .lede { font-size: 34px; }

	.five_promises { display: flex; flex-wrap: wrap; gap: 56px 44px; }
	.five_promises li { width: calc(50% - 22px); }
	.five_promises li + li { margin-top: 0; }
	.five_promises li:nth-child(even) { margin-top: 62px; }
	.five_promises .image img { height: 260px; }
	.five_promises .num { font-size: 96px; right: -10px; bottom: -26px; }

	.fee_area { margin-top: 150px; }
	.fee_area .inner { display: flex; gap: 44px; align-items: flex-start; }
	.fee_area h2.white_mark { margin-bottom: 0; flex: 0 0 auto; }
	.fee_box { flex: 1 1 auto; padding: 40px 44px 38px; }
	.fee_box .row { font-size: 15px; }

	.menu_area { margin-top: 140px; }
	.menu_area .title_block { display: flex; gap: 40px; align-items: flex-start; }
	.menu_area .title_block h2.white_mark { margin-bottom: 0; order: 2; }
	.menu_area .title_block p { order: 1; max-width: 620px; }

	.menu_block { display: flex; flex-wrap: wrap; gap: 0 56px; }
	.menu_block .subttl { width: 100%; }
	.menu_block > .left, .menu_block > .right { width: calc(50% - 28px); }
	.menu_block > p { width: 100%; }

	.owner_area { margin-top: 140px; }
	.owner_area .inner { display: flex; gap: 48px; align-items: flex-start; }
	.owner_area .title_block { margin-bottom: 0; }
	.owner_area .text { flex: 1 1 auto; max-width: 720px; }

	.access_area { margin-top: 140px; }
	.access_area .inner { display: flex; gap: 44px; align-items: flex-start; }
	.access_area h2.white_mark { margin-bottom: 0; }
	.access_area .access_body { flex: 1 1 auto; }
	.shop_info dt { float: left; width: 170px; padding-top: 18px; }
	.shop_info dd { padding: 18px 0 16px 170px; }
	#map iframe { height: 440px; }
}

@media screen and (min-width: 1100px) {
	.slider_area h2.white_mark { font-size: 26px; margin-left: -110px; padding: 36px 30px 42px; }
	.pc_slider img { height: 560px; }
	.promises_area h2 .lede { font-size: 40px; }
	.raison_area .title_block { width: 620px; right: 90px; }
}