@charset "utf-8";

/* CSS Document */

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

:root
{
	--font					: clamp(0.625rem, 0.531rem + 0.47vw, 1rem);
	--max_width				: clamp( 0px, calc(100% - 2em), calc(var(--font) * 90) );
	--line_height			: 2;

	--w						: 232 239 244;
	--bk					: 43 48 51;
	--r						: 255 56 60;
	--r						: 167 44 44;
	--or					: 246 181 66;
	--bl					: 0 118 193;
	--lbl					: 214 226 234;

	--color					: var(--bk);
	--anchor				: 116 154 161;
	--beige					: 161 136 116;
	--brown					: 161 136 116;
	--purple				: 149 116 161;

	--theme					: var(--bl);
	--theme_light			: var(--lbl);

	--gap					: 3em;
	--padding				: 10em;
	--ct_gap				: 5em;
	--cell_gap				: 0.25em;
	--note					: 3em;
	--border_radius			: 0.2em;

	--header_h				: 3em;
	--header_blank_top		: calc(1em + var(--header_h) + 1em);

	--th_w					: 15em;
	--th_w_simple			: calc(var(--th_w) / 2);
	--icon_w				: 1.5em;

	--note					: calc(var(--icon_w) * 2);
}
/*

	--move					: 1px;
	--blur					: 0.25em;
	--shadow_color			: rgb(255 255 255 / 0.75);
	--txt_shadow			:
		var(--move) var(--move) var(--blur) var(--shadow_color), calc(0em - var(--move)) calc(0em - var(--move)) var(--blur) var(--shadow_color),
		calc(0em - var(--move)) var(--move) var(--blur) var(--shadow_color), var(--move) calc(0em - var(--move)) var(--blur) var(--shadow_color),
		var(--move) var(--move) var(--blur) var(--shadow_color), 0px calc(0em - var(--move)) var(--blur) var(--shadow_color),
		calc(0em - var(--move)) 0px var(--blur) var(--shadow_color), var(--move) 0px var(--blur) var(--shadow_color)
	;
*/


/* ------------------------------------------------------------------------------------------------------------
	<web font>
	transform: rotate(0.03deg);
	------------------------------------------------------
	[240513]　DLL→upは著作権に関連するかも知れないので、通常に戻す
------------------------------------------------------------------------------------------------------------ */
/* [Noto Sans JP] */

/* [Shippori Mincho] */
.M_regular,
:where(.page_head .title, main h2, .h2),
.detail .page_head p
{
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
}

.M_medium
{
	font-family: "Shippori Mincho", serif;
	font-weight: 500;
	font-style: normal;
}

.shippori-mincho-semibold,
body
{
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-style: normal;
}

.M_bold
{
	font-family: "Shippori Mincho", serif;
	font-weight: 700;
	font-style: normal;
}

.M_extrabold
{
	font-family: "Shippori Mincho", serif;
	font-weight: 800;
	font-style: normal;
}


/* [EB Garamond] */
.M_eu,
h2 em
{
	font-family: "EB Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}


/* [EB Garamond] 1 style */
.M_eu_con
{
	font-family: "Imbue", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}


/* ------------------------------------------------------------------------------------------------------------
	<色>
------------------------------------------------------------------------------------------------------------ */
.txt_r
{
	color: rgb(var(--r));
}
.txt_bl
{
	color: rgb(var(--bl));
}


/* ------------------------------------------------------------------------------------------------------------
	<img>
------------------------------------------------------------------------------------------------------------ */
img
{
	-ms-interpolation-mode: bicubic;

	display: block;

	max-width: 100%;
	height: auto;
	vertical-align: middle;
	letter-spacing: 0;
	object-fit: cover;
}


/* ------------------------------------------------------------------------------------------------------------
	<iframe>
------------------------------------------------------------------------------------------------------------ */
iframe
{
	aspect-ratio: 1;
	width: 100%;
	vertical-align: bottom;
}

.mao iframe
{
	aspect-ratio: unset;
}



/* ------------------------------------------------------------------------------------------------------------
	<base>
------------------------------------------------------------------------------------------------------------ */
body
{
	/* ------------------------------------------------------
		[240613]
		文章の折り返し指定のCSS最新版
		https://ics.media/entry/240411/
	------------------------------------------------------ */
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */

	overflow-x: hidden;
	/* 〓未決〓------------------------------------------------------
		[241126]
		横スクロールバーの発生源を素早く特定する方法と最新の防止策
		https://www.tak-dcxi.com/article/methods-to-quickly-identify-the-source-of-horizontal-scrolling-and-the-latest-prevention-measures/
	overflow-x: clip;
	------------------------------------------------------ */

	background-color: rgb(var(--theme_light));
	text-align: justify;
	font-size: var(--font);
	color: rgb(var(--bk));

	line-height: var(--line_height);

	max-width: 100svw;
}
/*
	min-height: 100svh;
*/

*,
*::before,
*::after
{
	-webkit-box-sizing: border-box;/*	Webkit系用 */
	-moz-box-sizing: border-box;/*		Firefox用 */
	box-sizing: border-box;/*			標準 */
	hyphens: manual;
	
	position: relative;

	margin: 0;
	padding: 0;

	vertical-align: baseline;
	background: transparent;

	border-width: 0;
	border-style: solid;
	border-color: rgb(var(--bk));

	outline-width: 0;

	text-underline-offset: 0.25em;
	text-decoration-skip-ink: none;
}
*:before,
*:after
{
	box-sizing: inherit;

	font-family: inherit;
	color: inherit;
}


:where(.wrap, .wrapM, .wrapS)
{
	width: auto;
	width: 100%;
	min-width: initial;
	max-width: var(--max_width);

	margin: unset;
	margin-left: auto;
	margin-right: auto;
}
.wrapM
{
	width: 80%;
	width: 70em;
	min-width: initial;
}
.wrapS
{
	width: 60%;
	width: 55em;
	min-width: initial;
}
:where(.wrap, .wrapM) :where(.wrap, .wrapM, .wrapS)
{
	width: 100%;
	max-width: unset;
}


.float_l,
.float_r
{
	float: unset;
}


hr
{
}

hr.blank
{
	width: 100%;
	height: var(--padding);

	margin: 0;
	padding: 0;

	border-width: 0;
}
hr.zero
{
	width: 100%;
	height: 0;

	margin: 0;
	padding: 0;

	border-width: 0;
}

main :where(section, article)
{
}


main article
{
	display: grid;
}

main section
{
	display: grid;
	gap: var(--gap);
}


.lead
{
	display: grid;
	justify-content: center;

	font-size: larger;
}

/*
.note
{
	margin-left: var(--note);
}
*/

.bg
{
	padding: 1em;
	background-color: rgb(var(--bk) / 0.03);
}

main :where(section, article, .section).bg
{
	margin-top: var(--padding);
	padding-top: var(--padding);
	padding-bottom: var(--padding);
}


.border
{
	padding: 1em 2em;
	border-width: 1px;
}

main :where(section, article, .section).border
{
	margin-top: var(--padding);
	padding: calc(var(--padding) / 2);
}

h3.border
{
	justify-self: start;

	display: inline-flex;
	justify-content: start;
	justify-items: start;
	align-items: baseline;
	gap: 2em;

	width: auto;
	min-width: 15em;

	margin-left: 0;
	margin-right: 0;
}


.SortNavi
{
	display: grid;
	justify-content: center;
	justify-items: center;
	gap: 1em;
}

.SortNavi .Btn
{
	display: flex;
	justify-items: center;
	align-items: center;
	gap: 1em;
}
.SortNavi .Btn>*
{
	aspect-ratio: 1;

	display: flex;
	justify-content: center;
	align-items: center;

	width: 3em;
	min-width: initial;
	height: auto;
}

.SortNavi .Btn .active
{
	background-color: rgb(var(--w));
}


/* ------------------------------------------------------------------------------------------------------------
	<文字>
------------------------------------------------------------------------------------------------------------ */
h1
{
	font-size: inherit;
	font-weight: inherit;
}


:where(.page_head .title, main h2, .h2)
{
	--mark_gap						: 0.5em;
}

main h2>b
{
	font-size: 1.5em;
}
main h2>b>*[class*="icon_"]
{
}
main h2>b>*[class*="icon_"] img
{
}
main h2>b>b
{
}
main h2>span
{
}


.page_head
{
	display: grid;
	grid-template-columns: 1fr 44%;
	gap: var(--gap);
}
.page_head .img
{
	order: 2;
}
.page_head .lead
{
	order: 1;
}


.page_head .img,
.page_head .img>img
{
}

.page_head .img
{
	background-color: rgb(var(--bk));
}

.page_head .img>img
{
	aspect-ratio: 676 / 504;
	filter: brightness(0.8);
}
.about .page_head .img>img
{
	filter: none;
}

.page_head p
{
	font-size: 8em;
	line-height: 0.85;

	display: grid;
	gap: var(--gap);
	
	position: absolute;
	right: 0;
	bottom: 0;

	white-space: nowrap;
	color: rgb(var(--theme_light));
}
/*
	--move					: 0;
	--blur					: 2em;
	--shadow_color			: rgb(var(--bk));

	text-shadow:
		var(--move) var(--move) var(--blur) var(--shadow_color)
	;
*/

.page_head .lead
{
	display: grid;
	align-content: center;
}
/*

	--move					: 1px;
	--blur					: 0.125em;
	--shadow_color			: rgb(255 255 255);
	text-shadow:
		var(--move) var(--move) var(--blur) var(--shadow_color), calc(0em - var(--move)) calc(0em - var(--move)) var(--blur) var(--shadow_color),
		calc(0em - var(--move)) var(--move) var(--blur) var(--shadow_color), var(--move) calc(0em - var(--move)) var(--blur) var(--shadow_color),
		var(--move) var(--move) var(--blur) var(--shadow_color), 0px calc(0em - var(--move)) var(--blur) var(--shadow_color),
		calc(0em - var(--move)) 0px var(--blur) var(--shadow_color), var(--move) 0px var(--blur) var(--shadow_color)
	;
*/


.note
{
	padding-left: var(--note);
}

:where(.page_head .title, main h2, .h2)
{
	font-size: inherit;
	font-weight: inherit;
	
}
:where(.page_head .title, main h2, .h2)>b
{
	font-size: 2em;
	font-weight: inherit;

	display: grid;
	grid-template-columns: var(--icon_w) auto;
	align-items: baseline;
	gap: 0 var(--mark_gap);
}
:where(.page_head .title, main h2, .h2) *[class*="icon_"]
{
	display: inherit;
}
:where(.page_head .title, main h2, .h2) *[class*="icon_"] img
{
	aspect-ratio: unset !important;
	width: auto !important;
	height: 1em;
	margin-left: auto;
	margin-right: auto;

	object-position: bottom;
}
:where(.page_head .title, main h2, .h2)>b>b
{
	font-weight: inherit;
	
	width: max-content;
}
:where(.page_head .title, main h2, .h2)>b>b>b
{
	color: rgb(var(--theme));
	font-weight: inherit;
}

:where(.page_head .title, main h2, .h2) em
{
	font-size: 0.86em;
	grid-column: 2 / 3;

	width: max-content;
}


:where(.page_head .title) em
{
	font-size: 0.6em;
}



/* ------------------------------------------------------
	<page_head>
	detail
*/
.detail .page_head
{
	grid-template-columns: unset;
}

.detail .page_head .lead
{
	justify-content: unset;
}

.detail .page_head .img>img
{
	aspect-ratio: 1600 / 900;

	width: 100%;
	max-height: 80svh;
}

.detail .page_head p
{
	font-size: 7em;

	top: -0.05em;
	right: -0.075em;
	bottom: initial;
}


em
{
	font-style: normal;
}


.c
{
	text-align: center;
}
.l
{
	text-align: left;
}
.r
{
	text-align: right;
}
.j
{
	text-align: justify;
}

.small
{
	font-size: small;
}
.smaller
{
	font-size: smaller;
}
.large
{
	font-size: large;
}
.larger
{
	font-size: larger;
}


.indent
{
	--indent			: 1em;
	text-indent: calc(0em - var(--indent));
	padding-left: var(--indent);
}
.indent2
{
	--indent			: 2em;
}
.indent3
{
	--indent			: 3em;
}
.indent4
{
	--indent			: 4em;
}
.indent5
{
	--indent			: 5em;
}


.sup_txt
{
}
.sup_txt sup
{
	font-size: 1.5em;
	bottom: -0.25em;
}

.border>.sup_txt
{
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.5em);
	translate: -50% -0%;
}



.alert
{
	color: rgb(var(--r));
}
.Error
{
	color: rgb(var(--r));
}
.Error label
{
	color: rgb(var(--color));
}


/* ------------------------------------------------------
	改行禁止
*/
.nowrap,
.keep_all_break_word
{
	word-break: keep-all;
	overflow-wrap: break-word;
}
.nowrap_L
{
	white-space: nowrap;
}


/* ------------------------------------------------------
	必須
*/
.Required
{
	color: rgb(var(--color));
}

.Required::after
{
	content: "*";
	display: inline;

	color: rgb(var(--r));
}


.under
{
	text-decoration-line: underline;
}


/* ------------------------------------------------------------------------------------------------------------
	<block>
------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------
	段組み
------------------------------------------------------ */
.flex
{
	display: flex;
	gap: var(--gap);
}

.grid
{
	display: grid;
	gap: var(--gap);
}


:is(.flex, .grid).Jst
{
	justify-content: space-between;
}
:is(.flex, .grid).C
{
	justify-content: center;
	justify-items: center;
}
:is(.flex, .grid).L
{
	justify-content: start;
	justify-items: start;
}
:is(.flex, .grid).R
{
	justify-content: end;
	justify-items: end;
}

:is(.flex, .grid).top
{
	align-items: start;
}
:is(.flex, .grid).middle
{
	align-items: center;
}
:is(.flex, .grid).bottom
{
	align-items: end;
}


.gap0
{
	--gap				: 0;
}

.gap1px
{
	--gap				: 1px;
}

.gap1
{
	--gap				: 1em;
}

.gap2
{
	--gap				: 2em;
}

.gap_h
{
	gap: calc(var(--gap) / 2);
}


.flex.wrap
{
	flex-wrap: wrap;
}

.flex.no_wrap
{
	flex-wrap: nowrap;
}


/* ------------------------------------------------------------------------------------------------------------
	<a>
------------------------------------------------------------------------------------------------------------ */
a,
a *
{
	transition: all 0.2s ease-out;
}

a
{
	color: inherit;

	text-decoration-line: none;
}


.link2
{
	color: rgb(var(--anchor));
}


.Btn
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--gap);

	justify-self: center;
}


*[class*="Btn"]
{
	text-align: center;
	margin: 0;
}
*[class*="Btn"] a
{
	display: inline-flex;
	justify-content: center;
	justify-items: center;
	align-items: center;

	min-width: 18em;
	height: 3.75em;

	margin: unset;
	padding: 0 1em;

	background-color: rgb(var(--bk));
	border-color: rgb(var(--bk));
	color: rgb(var(--w));

	text-align: center;
	line-height: 1;
}
*[class*="Btn"] a::after
{
	aspect-ratio: 1;
	position: absolute;
	width: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

*[class*="Btn"] a[onclick*="Back();"]
{
	background-color: rgb(var(--w));
	border-color: transparent;
	color: inherit;
}


*[class*="Btn"] a[onclick="Send();"]
{
	background-color: rgb(var(--r));
	border-color: transparent;
}


a:has([class*="icon_"])
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;

	min-width: 10em;
	max-width: 10em;
	padding-bottom: 0.25em;
	
	border-bottom-width: 1px;
	border-color: rgb(var(--bk));
}

a *[class*="icon_"]
{
	display: inherit;
	width: 0.65em;
}
a:has([class*="icon_"])>b
{
	font-size: 1.33em;
	font-weight: inherit;
	opacity: unset;
}
a:has([class*="icon_"])>span:not([class*="icon_"])
{
	font-size: 1.33em;

	position: absolute;
	right: 0;
	top: calc(50% - 0.1em);
	translate: -0% -50%;

	width: max-content;

	opacity: 0;
}
a:has([class*="icon_"]):hover>b
{
	opacity: 0;
}
a:has([class*="icon_"]):hover>span:not([class*="icon_"])
{
	opacity: unset;
}


*[class*="Btn"] a:has([class*="icon_"])
{
	gap: var(--gap);
	
	max-width: initial;

	padding-left: var(--gap);
	padding-right: var(--gap);
	padding-bottom: 0;
	border-width: 0;
}
*[class*="Btn"] a:has([class*="icon_"]) *[class*="icon_"]
{
	filter: brightness(0) invert(1);
}
*[class*="Btn"] a:has([class*="icon_"])>b + span
{
	right: var(--gap);
}

*[class*="Btn"] a:has([class*="icon_"]):hover>b + span
{
}


.form a[onclick]
{
}
.form a[onclick]>b
{
	opacity: unset;
}
.form a[onclick]>b + span
{
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;

	width: max-content;

	opacity: 0;
}
.form a[onclick]:hover>b
{
	opacity: 0;
}
.form a[onclick]:hover>b + span
{
	opacity: unset;
}



.Btn.under_line
{
	justify-content: end;
	justify-self: end;
}
.Btn.under_line :is(a, .a)
{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--gap);

	height: auto;

	padding: 0;
	padding-bottom: 0.5em;
	
	background-color: transparent;
	color: inherit;
	border-width: 0;
	border-bottom-width: 1px;
	border-color: rgb(var(--bk) / 0.2);

	text-decoration-line: none;
}


.Btn.arrow
{
	justify-content: initial;
	justify-items: initial;
	justify-self: initial;
}
.Btn.arrow :is(a, .a)
{
	display: flex;
	align-items: baseline;
	gap: var(--gap);

	width: auto;
	min-width: initial;
	height: auto;

	padding: 0;
	
	background-color: transparent;
	color: inherit;
	border-width: 0;

	text-decoration-line: none;
}


.Btn.L
{
	justify-content: start;
	justify-items: start;
	justify-self: start;
}
.Btn.C
{
	justify-content: center;
	justify-items: center;
	justify-self: center;
}
.Btn.R
{
	justify-content: end;
	justify-items: end;
	justify-self: end;
}


*[class*="icon_"]
{
	width: var(--icon_w);
}

*[class*="icon_"] img
{
	aspect-ratio: 1;

	width: var(--icon_w);
	object-fit: contain;
}


header *[class*="icon_coffee_cup"]
{
	scale: 1.2;
}


/* ------------------------------------------------------------------------------------------------------------
	<table>
------------------------------------------------------------------------------------------------------------ */
table
{
	border-spacing: 0;

	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;

	font-family: inherit;

	border-top-width: 1px;
	border-color: rgb(var(--theme));
}

table :where(th, td)
{
	padding: var(--gap) 0;

	border-bottom-width: 1px;
	border-color: rgb(var(--theme));

	font-weight: inherit;
	vertical-align: middle;
}

table th
{
	width: calc(var(--th_w) - var(--gap));
}
table td
{
	padding-left: var(--gap);
}


table.df
{
	width: auto;
	margin: 0;
}

table.df :where(th, td)
{
	padding: 0.25em 0;
	border-width: 0;
}
table.df  th
{
	width: auto;
}
table.df  td
{
	padding-left: inherit;
}


table.simple
{
}

table.simple :where(th, td)
{
	border-width: 0;

	padding-top: 1em;
	padding-bottom: 1em;
}

table.simple th
{
	width: var(--th_w_simple);
}


/* ------------------------------------------------------------------------------------------------------------
	<form>
------------------------------------------------------------------------------------------------------------ */
form
{
	margin: 0;
}

:is(
	select,
	select *,
	option,
	input,
	textarea,
	button,
	label
)
{
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	font-size: 16px;
	color: inherit;

	line-height: inherit;

	width: auto;
	max-width: 100%;
	
	padding: 0 0.25em;

	border-width: 0;
	border-color: rgb(var(--theme));
	border-style: solid;
	
	outline-width: 1px;
	outline-color: rgb(var(--theme));
	outline-offset: 0px;
	outline-style: solid;

	background-color: transparent;
	background-color: rgb(var(--w));
	
	border-radius: var(--border_radius);
	border-radius: 0;
}

.bg :is(
	select,
	select *,
	option,
	input,
	textarea,
	button,
	label
)
{
	background-color: rgb(255 255 255);
	outline-width: 1px;
}

select,
input,
textarea
{
	vertical-align: middle;/* <textarea>の下に出る正体不明の余白を消す */
	font-family: Menlo, Monaco, 'Courier New', Consolas, monospace;
	letter-spacing: normal;
	font-weight: inherit;

	padding: 0.5em 0.25em;
}

input:is(
	[type="text"],
	[type="tel"],
	[type="email"],
	[type="url"],
	[type="color"]
),
textarea,
table select
{
	width: 100%;
}
input.unit
{
	width: calc(100% - 2em);
}

textarea
{
	outline: none;

	border-width: 1px;
}
/*
	outline-offset: 0.25em;

	margin-top: 0.5em;
	margin-bottom: 0.5em;

	max-width: calc(100% - (0.25em * 2));
	padding-top: 0em;
	padding-bottom: 0em;
*/

select,
input:is(
	[type="date"],
	[type="month"],
	[type="radio"],
	[type="checkbox"]
)
{
	cursor: pointer;
	margin: 0;
}


/*
	background-color: rgb(var(--theme) / 0.3);
*/


select
{
	width: 100%;
}
/*
	
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	border-width: 1px;
	border-color: rgb(var(--bk) / 0.3);
*/
select *[aria-hidden="true"]
{
	background-color: rgb(var(--r));
}


input
{
	text-align: inherit;
}
input:is(
	[type="date"],
	[type="month"]
)
{
}
/*
	width: 100%;
*/
table input:is(
	[type="date"],
	[type="month"]
)
{
	width: fit-content;
}

input[type="color"]
{
	vertical-align: middle;
	padding: 0;
	outline-offset: 0;
}
input:is(
	[type="radio"],
	[type="checkbox"]
)
{
	aspect-ratio: 1;
	width: 1.25em;

	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	border-radius: 0;
	vertical-align: middle;
	line-height: 0;
}
/*
	appearance: none;
*/

table input:is(
	[type="radio"],
	[type="checkbox"]
)
{
}
table input:is(
	[type="file"]
)
{
	width: 100%;
	outline-width: 0;
	outline-offset: 0;
	padding: 0;

	font-size: 0.9em;
	text-align: left;

	background-color: transparent;
	border-radius: 0;
}

input[size="10"]
{
	width: 10em;
}


button
{
	outline-offset: 0;
}


label
{
	font-size: inherit;
	outline-width: 0;

	display: inline-flex;
	align-items: baseline;
	align-items: center;
	gap: 0.5em;

	width: fit-content;
	padding: 0;

	background-color: transparent;
	cursor: pointer;
}


.Error :is(input, textarea)
{
	color: rgb(var(--color));

	outline-width: 1px;
	outline-color: rgb(var(--r));
	border-color: rgb(var(--r));
}


/* ------------------------------------------------------------------------------------------------------------
	<ul>, <ol>, <dl>
------------------------------------------------------------------------------------------------------------ */
ul
{
	margin-left: 1.5em;
	list-style: disc;
}
ul>li
{
	list-style: inherit;
}


ol
{
	margin-left: 1.5em;
	list-style: decimal;
}
ol>li
{
	list-style: inherit;
}


::marker
{
}
/*
	opacity: 0.5;
*/


:is(header, footer) :is(ul, ol)
{
	margin: 0;
	list-style: none;
}



/* ============================================================================================================
	[pc]
============================================================================================================ */
.SP
{
	display: none;
}