@charset "utf-8";

/* CSS Document */

/* ======================================================
	[layout] footer
	@import"../css/test_line.css";
====================================================== */


/* ============================================================================================================
	Side
------------------------------------------------------------------------------------------------------------ */
.Side
{
}

/* ============================================================================================================
	side・固定
------------------------------------------------------------------------------------------------------------ */
.sideArea
{
	position: absolute;
	top: 10em;
	right: 0;
	text-align: center;
	letter-spacing: normal;
	z-index: 100;
}

.sideArea ul
{
	display: block;
}


.sideArea>.Wrap
{
	display: grid;
	gap: 1px;
}

.sideArea>.Wrap>*
{
	font-size: 0.8em;
	background-color: rgb(var(--bg_color) / 0.9);
}

.sideArea>.Wrap>*>*
{
	width: 100%;
}

.sideArea a
{
	padding: 1em;
	width: 100%;
	flex-direction: column;
	gap: 0.5em;
}

.sideArea a:after
{
	content: none;
}

.sideArea a>*
{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sideArea a>*:not([class])
{
	height: 2em;
	line-height: 2em;
}

.sideArea a:hover
{
}


/* ============================================================================================================
	上へ戻る
------------------------------------------------------------------------------------------------------------ */
#Document
{
}

.scroll_btn
{
	display: none;
	position: fixed;
	right: 1em;
	letter-spacing: 0;
	z-index: 99;
	bottom: 0;
}
/*
	left: 0em;
*/

.scroll_btn>.Wrap
{
}

.scroll_btn :where(a, .a)
{
	text-decoration-line: none;
	display: inline-block;
}

.scroll_btn .Btn
{
	display: none;
	font-size: 1.5em;
	background-color: rgb(var(--w) / 0.8);
	border-radius: 100em;
	line-height: 1;
	text-align: center;
}
/*　→ <script>本体で指定
	margin-bottom: -1em;
*/

.scroll_btn .Btn :where(a, .a)
{
	--scroll_btn_width 	: 70%;
	--scroll_btn_height 	: calc(var(--scroll_btn_width) * 0.8);
	--scroll_btn_angle 	: 0.75em;
	--scroll_btn_border_w	: 1px;

	display: block;
	width: 2em;
	height: 2em;
}

.scroll_btn .Btn :where(a, .a):before,
.scroll_btn .Btn :where(a, .a):after
{
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	margin-left: auto;
	margin-right: auto;
}

.scroll_btn .Btn :where(a, .a):before
{
	top: 50%;
	translate: -50% -50%;
	rotate: -45deg;

	width: 0.75em;
	height: 0.75em;
	
	border-top-width: var(--scroll_btn_border_w);
	border-right-width: var(--scroll_btn_border_w);
}

.scroll_btn .Btn :where(a, .a):after
{
	top: calc(50% - var(--scroll_btn_border_w));
	translate: -50% -50%;

	width: 0;
	height: calc(0.75em + var(--scroll_btn_border_w));
	
	border-left-width: var(--scroll_btn_border_w);
}

/* clip-pathで「←」　〓〓240518　未決〓〓
.scroll_btn .Btn :where(a, .a):before
{

	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--scroll_btn_width);
	height: var(--scroll_btn_height);
	translate: -50% -50%;
	background-color: red;
	clip-path: polygon(
		var(--scroll_btn_angle) 0,
		calc(var(--scroll_btn_angle) + var(--scroll_btn_border_w)) 0,
		calc((var(--scroll_btn_border_w) / 3) * 2) calc(50% + (var(--scroll_btn_border_w) / 2)),
		100% calc(50% + (var(--scroll_btn_border_w) / 2)),
		100% calc(50% - (var(--scroll_btn_border_w) / 2)),
		calc((var(--scroll_btn_border_w) / 3) * 2) calc(50% - (var(--scroll_btn_border_w) / 2)),
		calc(var(--scroll_btn_angle) + var(--scroll_btn_border_w)) 100%,
		var(--scroll_btn_angle) 100%,
		0 50%
	);
}
*/

/* 止まったら */
.scroll_stop .scroll_btn
{
}

.scroll_stop .scroll_btn .Btn :where(a, .a)
{
	background-color: transparent;
}


.scroll_btn .Btn :where(a, .a)>.d
{
	display: none;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
}


/* ============================================================================================================
	<footer>
------------------------------------------------------------------------------------------------------------ */
.Footer
{
}
/*
	border-top-width: 1px;
	padding-top: 1em;
	font-size: 0.8em;
*/

.Footer>.Wrap
{
}

.Footer div:not(.Flex)>ul
{
	margin: 0;
	list-style: none;
	text-align: inherit;
}

.Footer ul li
{
}

.Footer :where(a, .a)
{
	color: inherit;
}

.Footer>.Wrap>*
{
	display: block;
	border-top-width: 1px;
}

.Footer .Info
{
	padding-top: calc(var(--padding_tb) / 2);
	padding-bottom: calc(var(--padding_tb) / 2);
	text-align: left;
}
/*
	background-color: rgb(var(--w));
*/

.Footer .Info>.Wrap
{
	display: grid;
	grid-template-areas:
		"head menu sns"
	;
	justify-content: space-between;
	align-items: start;
	gap: var(--gap);
}
/*
	display: flex;
	align-items: center;
	flex-direction: column;
*/

.Footer .Info .head
{
	grid-area: head;
}

.Footer .Info .menu
{
	grid-area: menu;
}

.Footer .Info .sns
{
	grid-area: sns;
}


.Footer .Info .head
{
	font-size: 0.8em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.Footer .Info .head .Navi :is(.tel, .fax)
{
	display: flex;
	gap: 0.5em;
}

.Footer .Info .head .Navi
{
}

.Footer .Info .head .Navi .data
{
	display: flex;
	gap: 0.5em;
}

.Footer .Info .head .Navi .address
{
	white-space: nowrap;
	word-break: break-all;
}


.Footer .Menu
{
	font-size: 0.8em;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	text-align: right;
}
/*
*/

.Footer .Menu ul
{
	display: inline-flex;
	gap: 2em;
}

.Footer .Menu ul>li
{
	width: auto;
	margin: 0;
}

.Footer .Menu .title
{
}


.Footer .Copy
{
	font-size: 0.8em;
	padding-top: var(--gap);
	padding-bottom: var(--gap);
}