:root {
	--fwk-hor-menu-display: inline-block;
	--fwk-ver-menu-display: block;
	--fwk-menu-height: 150px;
}

/* リセット */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 広域基本設定 */
body {
	font-size: var(--fwk-base-fontsize);
	font-family: 'Material Icon', 'Zen Maru Gothic', sans-serif;
	color: var(--fwk-text-color);
	background-color: var(--fwk-peripheral-color);
}
li {
	list-style-type: none;
}

table {
	border-collapse: collapse;
}
th {
	color: var(--fwk-text-color);
	background-color: var(--fwk-light-key-color);
	border-left: 1px solid var(--fwk-bg-color);
	line-height: var(--fwk-para-height);
	padding: var(--fwk-narrow-spacing);
}
th:first-child {
	border-left-width: 0;
}
td {
	color: var(--fwk-text-color);
	background-color: var(--fwk-bg-color);
	border-top-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	border-bottom: 1px solid #777;
	line-height: var(--fwk-para-height);
	padding: var(--fwk-narrow-spacing);
}
td:first-child {
}


/* 基底フレーム設定 */
div.vessel {
	color: inherit;
	background-color: inherit;
	max-width: var(--fwk-vessel-width);
	min-height: 100vmin;
	margin: 0 auto;
}

.sp {
	display: none;
}

/* ナビゲーションメニューバー */
aside.main {
	/*float: left;*/
	padding: 0;
	margin: 0 auto;
	position: relative;
	z-index: 2147483647;
}
aside.main nav {
	top: 0%;
	width: 100%;
	height: var(--fwk-menu-height);
	padding: 0;
	position: fixed;
}
aside.main ul {
	color: var(--fwk-bg-color);
	background-color: var(--fwk-key-color);
	width: 100%;
	height: var(--fwk-menu-height);
	text-align: center;
}
aside.main li {
	text-align: center;
	display: var(--fwk-hor-menu-display);
	/*display: var(--fwk-ver-menu-display);*/
	margin: 0;
}
aside.main li em {
	display: block;
	font-size: 130%;
	font-style: normal;
	margin-bottom: 0.5em;
}
aside.main li span {
	display: block;
	font-size: 80%;
}
aside.main li em:first-letter, aside.main li span:first-letter {
	color: var(--fwk-accent-color);
	font-weight: bold;
}

aside.main a {
	color: var(--fwk-text-color);
	background-color: var(--fwk-key-color);
	height: var(--fwk-navi-height);
	display: var(--fwk-ver-menu-display);
	margin: 0;
	padding: var(--fwk-navi-padding);
}
aside.main a:hover, aside.main a:active, aside.main focus {
	color: var(--fwk-text-color);
	background-color: var(--fwk-bg-color);
	opacity: 0.8;
	transition: 0.3s;
}

/* タイトル画像の部分 */
header {
	margin-top: var(fwk-menu-height);
}

header a:hover, header a:active, header a:focus {
	background-color: inherit;
}

#titleCaption {
	margin: 0em auto;
	padding: 5em 0em 0em 0em;
	text-align: center;
	font-size: 150%;
}

/* 画像スライダー（カルーセル）部分 */
.splide {
	margin: var(--fwk-menu-height) auto 0 auto;
}

/* ハンバーガーメニュー */
#humToggle, #humButton {
	display: none;
}

/* グループ紹介～店舗地図までの部分 */
main {
	margin-left: 0;
	margin-right: 0;
	width: var(--fwk-main-width);
	padding: var(--fwk-land-spacing);
}

/* 記事を囲うセレクタ部分 */
section h1, article h1 {
	font-size: var(--fwk-h-fontsize);
	text-align: center;
	width: 50vw;
	padding: 2em 0;
	margin: 2em auto;
	border-bottom: 0.2em solid var(--fwk-accent-color);
}

section h2, article h2, section h3, article h3, section h4, article h4, section h5, article h5, section h6, article h6 {
	font-size: var(--fwk-h-fontsize);
	border-bottom: 0.3em solid var(--fwk-accent-color);
	padding: var(--fwk-wide-spacing);
	margin: var(--fwk-wide-spacing);
	text-align: center;
}

section p, article p {
	line-height: var(--fwk-para-height);
	margin: var(--fwk-normal-spacing);
}

section em, section b, article em, article b {
	font-weight: bold;
	color: var(--fwk-dark-key-color);
	font-style: normal;
}
section strong, article strong {
	font-weight: bold;
	color: var(--fwk-accent-color);
}

/* グループ紹介 */
section#ABOUT_US, article#ABOUT_US {
	text-align: center;
	font-size: 125%;
	color: var(--fwk-yako-text-color);
	background-color: var(--fwk-yako-bg-color);
	padding: 1em 0em 3em 0em;
}

/* 各店舗の紹介 */
section#STORES, article#STORES {
}
section#STORES a, article#STORES a {
	color: var(--fwk-link-color);
	background-color: var(--fwk-link-bg-color);
}
section#STORES a:hover, section#STORES a:active, article#STORES a:hover, article#STORES a:active {
	color: var(--fwk-link-color);
	background-color: var(--fwk-link-bg-color);
}

#event_linier {
	width: 100%;
}
#event_linier a {
	display: block;
	width: 60%;
	margin: 2em auto;
}
#event_linier img {
	width: 100%;
	margin: 2em 0;
}

#event_grid {
	width: 94%;
	margin: 2em 3%;
}
#event_grid a {
	display: inline;
}
#event_grid img {
	width: 30%;
	margin: 3% 1%;
}

#sns_grid {
	width: 94%;
	margin: 2em 3%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, 600px);
	gap: 3%;
}
#sns_yako {
	display: grid;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	overflow: scroll;
}
#sns_yako2 {
	display: grid;
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	overflow: scroll;
}
#sns_equal {
	display: grid;
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	overflow: scroll;
}


#store_grid {
	display: grid;
}
#store_yako_image {
	display: grid;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	justify-content: end;
	align-items: center;
	color: var(--fwk-yako-text-color);
	background-color: var(--fwk-yako-bg-color);
}
#store_yako_text {
	display: grid;
	grid-column: 2 / 4;
	grid-row: 1 / 2;
	justify-content: start;
	align-items: center;
	color: var(--fwk-yako-text-color);
	background-color: var(--fwk-yako-bg-color);
	padding: 5% 5% 5% 0%;
}
#store_yako2_image {
	display: grid;
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	justify-content: start;
	align-items: center;
	color: var(--fwk-yako2-text-color);
	background-color: var(--fwk-yako2-bg-color);
}
#store_yako2_text {
	display: grid;
	grid-column: 1 / 3;
	grid-row: 2 / 3;
	justify-content: end;
	align-items: center;
	color: var(--fwk-yako2-text-color);
	background-color: var(--fwk-yako2-bg-color);
	padding: 5% 0% 5% 5%;
}
#store_equal_image {
	display: grid;
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	justify-content: end;
	align-items: center;
	color: var(--fwk-equal-text-color);
	background-color: var(--fwk-equal-bg-color);
}
#store_equal_text {
	display: grid;
	grid-column: 2 / 4;
	grid-row: 3 / 4;
	justify-content: start;
	align-items: center;
	color: var(--fwk-equal-text-color);
	background-color: var(--fwk-equal-bg-color);
	padding: 5% 5% 5% 0%;
}

#store_yako_image img, #store_yako2_image img, #store_equal_image img {
	width: 100%;
}

#store_yako_text dl, #store_yako2_text dl, #store_equal_text dl {
	margin: 0% 5%;
}
#store_yako_text dt, #store_yako2_text dt, #store_equal_text dt {
	width: 7em;
	text-align: left;
	margin-bottom: 0.2em;
}
#store_yako_text dd, #store_yako2_text dd, #store_equal_text dd {
	margin: -1.5em 0em 0em 7em;
	padding-bottom: 0.8em;
	line-height: var(--fwk-para-height);
}

ul.snsIcon {
	margin: 0%;
}
ul.snsIcon li {
	display: inline;
}
ul.snsIcon img {
	width: 2em;
	margin: 0.5em 1em 0em 0em;
}



/* アクセスマップ */
section#ACCESS, article#ACCESS {
	text-align: center;
}
section#ACCESS dl, article#ACCESS dl {
	width: 80%;
	margin: 0 auto;
	padding: 4em 0em;
}
section#ACCESS dt, article#ACCESS dt {
	font-size: 125%;
	padding: 2em 0em;
}
section#ACCESS iframe, article#ACCESS iframe {
	width: 100%;
}

/* フッター部分 */
footer {
	clear: both;
	text-align: center;
	font-weight: bold;
	color: var(--fwk-text-color);
	background-color: var(--fwk-key-color);
	padding: var(--fwk-normal-spacing);
}
footer p {
	margin: var(--fwk-wide-spacing);
}


/*
 * 高解像度スマホ・タブレット表示対応
 */
@media (min-width:1024px) and (max-width:1279px)
{
	
	aside.main {
		position: relative;
	}
	
	/* 各店舗の紹介 */
	#store_grid {
		display: block;
	}
	#store_yako_image, #store_yako2_image, #store_equal_image {
		display: block;
	}
	#store_yako_text, #store_yako2_text, #store_equal_text {
		padding: 5%;
	}
	#store_yako_text dt, #store_yako2_text dt, #store_equal_text dt {
		width: 100%;
		text-align: center;
		margin-bottom: 1em;
	}
	#store_yako_text dd, #store_yako2_text dd, #store_equal_text dd {
		margin: 0em 0em 0em 0em;
		padding-bottom: 0.8em;
	}
	#store_yako_text dd a, #store_kurage dd a, #store_equal_text dd a {
		display: block;
		text-align: center;
		margin-left: 0%;
		font-weight: bold;
	}
	
	ul.snsIcon {
		text-align: center;
		margin: 0%;
	}
	ul.snsIcon img {
		width: 2em;
		margin: 0.5em 2em 0em 0em;
	}
	#store_yako_text dd ul.snsIcon li a, #store_yako2_text dd ul.snsIcon li a, #store_equal_text dd ul.snsIcon li a {
		display: inline;
	}
	
}

/*
 * スマホ・タブレット表示対応
 */
@media (max-width:1023px)
{
	
	.sp {
		display: inline;
	}
	
	/* ハンバーガーメニュー部分 */
	#humToggle {
		display: none;
	}
	#humButton {
		background-color: var(--fwk-equal-bg-color);
		display: block;
		position: fixed;
		top: 30px;
		right: 30px;
		width: 35px;
		height: 35px;
		z-index: 2147483646;
	}
	#humToggle:checked ~ #humButton {
		opacity: 1;
		z-index: 2147483647;
	}
	#humButton:hover {
		cursor: pointer;
	}
	#humButton span, #humButton span:before, #humButton span:after {
		position: absolute;
		content: "";
		color: rgb(0, 0, 0);
		background-color: rgb(255, 255, 255);
		display: inline-block;
		width: 25px;
		height: 3px;
		border-radius: 3px;
		transition: 0.7s;
	}
	#humButton span {
		top: 16px;
		left: 5px;
		justify-content: center;
		color: rgb(255, 255, 255);
	}
	#humToggle:checked ~ #humButton span {
		background-color: var(--fwk-equal-color);
	}
	#humButton span:before{
		top: -8px;
	}
	#humToggle:checked ~ #humButton span:before {
		background-color: var(--fwk-equal-text-color);
		top: 0px;
		transform-origin: center center;
		transform: rotate(-45deg);
		transition: 0.7s;
	}
	#humButton span:after {
		bottom: -8px;
	}
	#humToggle:checked ~ #humButton span:after {
		background-color: var(--fwk-equal-text-color);
		bottom: 0px;
		transform-origin: center center;
		transform: rotate(45deg);
		transition: 0.7s;
	}
	#humShadowButton {
		display: none;
	}
	#humToggle:checked ~ #humShadowButton {
		background-color: rgb(0, 0, 0);
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		opacity: 0.4;
		z-index: 2147483645;
	}
	#humContent {
		display: block;
		top: -100%;
		transition: 0.3s;
		z-index: 2147483647;
	}
	#humToggle:checked ~ #humContent {
		top: 0%;
		display: block;
		transition: 0.3s;
		width: 100%;
		z-index: 2147483646;
	}
	
	aside.main li {
		width: 100%;
	}
	aside.main li em {
		font-size: 100%;
		margin-bottom: 0.2em;
	}
	aside.main li span {
		font-size: 50%;
		margin-bottom: 1em;
	}
	aside.main a {
		padding: 0.5em 1em;
	}
	aside.main a:hover, aside.main a:active {
		background-color: var(--fwk-yako2-bg-color);
		opacity: 1;
	}
	
	/* タイトル画像の部分 */
	header {
		margin-top: 0em;
	}
	.splide {
		margin: 0em auto;
	}
	#titleCaption {
		font-size: 100%;
		padding-top: 1em;
	}
	
	/* 記事を囲うセレクタ部分 */
	section h1, article h1 {
		width: 90%;
		font-size: var(--fwk-base-fontsize);
	}
	
	/* グループ紹介 */
	section#ABOUT_US, article#ABOUT_US {
		text-align: left;
		padding: 1em 0em 0em 0em;
	}
	
	/* アクセスマップ */
	section#ACCESS dl, article#ACCESS dl {
		width: 90%;
		margin: 0 auto;
		padding: 4em 0em;
	}
	
	/* PCで一列に配置（幅を狭くして配置）したイベント情報を他の幅と同じにする */
	#event_linier a {
		width: 94%;
		margin: 3% 3%;
	}
	#event_linier img {
		width: 96%;
		margin: 3% 2%;
	}
	
	/* イベント情報 */
	#event_grid {
		display: block;
	}
	#event_grid img {
		width: 96%;
		margin: 3% 2%;
	}
	
	/* 最新情報 */
	#sns_grid {
		width: 94%;
		margin: 2em 3%;
		display: block;
		margin: 0% 3%;
	}
	#sns_yako, #sns_yako2, #sns_equal {
		display: block;
		width: 94%;
		height: 400px;
		margin: 10% 3%;
	}
	
	
	/* 店舗紹介 */
	#store_grid {
		display: block;
	}
	#store_yako_image, #store_yako2_image, #store_equal_image {
		display: block;
	}
	#store_yako_image img, #store_yako2_image img, #store_equal_image img {
		width: 100%;
	}
	#store_yako_text, #store_yako2_text, #store_equal_text {
		padding: 5%;
	}
	#store_yako_text dt, #store_yako2_text dt, #store_equal_text dt {
		width: 100%;
		text-align: center;
		margin-bottom: 1em;
	}
	#store_yako_text dd, #store_yako2_text dd, #store_equal_text dd {
		margin: 0em 0em 0em 0em;
		padding-bottom: 0.8em;
	}
	#store_yako_text dd a, #store_yako2_text dd a, #store_equal_text dd a {
		display: block;
		text-align: center;
		margin-left: 0%;
		font-weight: bold;
	}
	ul.snsIcon {
		text-align: center;
		margin: 0%;
	}
	ul.snsIcon img {
		width: 2em;
		margin: 0.5em 1em 0em 0em;
	}
	#store_yako_text dd ul.snsIcon li a, #store_yako2_text dd ul.snsIcon li a, #store_equal_text dd ul.snsIcon li a {
		display: inline;
	}
	
}