@charset "utf-8";

/* CSS Document */

/* ======================================================
	[color]
	@import"../css/test_line.css";
	------------------------------------------------------
	min-width　→　○px以上だと??という設定にする
	max-width　→　○px以下だと??という設定にする
====================================================== */


/*★未決★　[181126]グラデーションでhoverアニメーション
	https://qiita.com/hibikikudo/items/6dbc560ea58cf10617fa
	本体		…　position: relative;
	本体:after	…　position: absolute;
					opacity: 0;
					background-image: linear-gradient(135deg, #f2d50f 0%, #da0641 100%);
	本体:hover:after	…　opacity: 1;
*/

/* ======================================================
	色
------------------------------------------------------ */
/* ------------------------------------------------------
	色・基本 */
body,
th :is(input, textarea),
/*
th input,
th textarea,
*/
#Admin #Header .Logo
{
	color: rgba(0,0,0,1.0);
}

a
{
	color: rgba(166,28,75,1.0);
	color: inherit;
}

body
{
	background-color: rgba(255,255,255,1.0);
}

body, hr,
a, img, div, p, blockquote,
strong, span, b, small, em,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6, pre,
table, th, td, caption, thead, tbody, tfoot,
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, article,
.Border,
*:before,
*:after,
select,
input, textarea, button, label
{
	border-color: rgba(0,0,0,1.0);
}

table
{
}

table,
th,
td,
.stop .BackTop a:before,
.stop .BackTop a:after,
.ColorBtn:after
{
	border-color: rgba(255,255,255,1.0);
}

th
{
	background-color: rgba(0,0,0,0.05);
}

td
{
	background-color: rgba(255,255,255,1.0);
}

:is(section, .section):nth-of-type(even)
{
}

:is(section, .section):nth-of-type(even) :is(table, th, td)
{
	border-color: rgba(242,242,242,1.0);
}



.CategoryTitle
{
}

.ColorBtn,
.lucentBK,
.Footer .ContactDetails.black,
.Drawer .ClassContact.black,
.Copy,
.CategoryTitle .Img
{
	background-color: rgba(0,0,0,1.0);
	color: rgba(255,255,255,1.0);
}

.stop .BackTop
{
	background-color: rgba(0,0,0,0.75);
}

.lucent img,
.CategoryTitle .Img img
{
	height: 100%;
	opacity: 0.6;
}

.lucent .ColorBtn
{
	background-color: rgba(0,0,0,0.2);
}

.lucent .ColorBtn
{
	border-color: rgba(255,255,255,1.0);
	opacity: 0.9;
}

#Footer .Menu,
.SortNavi>span:not([class])
{
	background-color: rgba(0,0,0,0.1);
	color: inherit;
}


/* <table>シマシマ */
table.Stripe
{
}


select,
input,
textarea,
button,
label,
*:before,
*:after
{
}

input:is([type="submit"], [type="reset"], [type="button"]):not(.ColorBtn)
/*
input[type="submit"]:not(.ColorBtn),
input[type="reset"]:not(.ColorBtn),
input[type="button"]:not(.ColorBtn),
*/
button
{
}

:is(.SmallSize, .MiddleSize, .LargeSize) .changeBtn :is(.small, .middle, .large)
/*
.SmallSize .changeBtn .small,
.MiddleSize .changeBtn .middle,
.LargeSize .changeBtn .large
*/
{
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.0);
}

.GlobalMenu :is(a, .a):hover>span,
.GlobalMenu .MenuOn :is(a, .a)>span
{
	background-color: rgba(255,255,255,0.5);
}

.Drawer .ClassContact.Banner a
{
	background: rgba(0,0,0,1.0);
}

#nav-content
{
	background: rgba(0,0,0,0.8);
	color: rgba(255,255,255,1.0);
}

.Drawer .Menu a:before,
.Drawer .Menu .ChildOn .Btn:before,
.Drawer .Menu .ChildOn .Btn:after
{
	border-color: rgba(255,255,255,0.75);
}

.Drawer .Menu>.Wrap ul li
{
	border-color: rgba(255,255,255,0.3);
}

.Drawer .toggle .Btn span
{
	background-color: rgba(112,66,44,0.75);
	background-color: rgba(0,0,0,0.75);
}

.Drawer #nav-input:checked ~ .toggle .Btn span
{
	background-color: rgba(255,255,255,1.0);
}

.MarkerPen,
section:nth-of-type(even),
.section:nth-of-type(even),
table.Stripe tbody:nth-of-type(odd) tr:nth-of-type(odd) :is(th, td)
{
	background-color: rgba(0,0,0,0.05);
}

/*[181012]追加*/
.RequiredBox
{
}

.RequiredBox :is(select, input[type="text"], textarea)
/*
.RequiredBox select,
.RequiredBox input[type="text"],
.RequiredBox textarea
*/
{
}

/* 背景・グラデーション・k */
.tabrow li
{
/*
[171103]
	グラデーションのかかった背景をCSSでふわっと変える方法(http://web-codery.com/html/80)
	最後にベタを敷く
*/
	background-image: linear-gradient(  170deg,  rgba(0,0,0,0.025),  rgba(0,0,0,0.1)  );
	background-color: rgba(0,0,0,0);
	background-color: rgba(255,255,255,1.0);
}

/*
	border-width: 1px;
*/
.tabrow li:not(.selected):hover
{
/*
[171103]
	グラデーションのかかった背景をCSSでふわっと変える方法(http://web-codery.com/html/80)
	先にベタを敷く
*/
	background-color: rgba(0,0,0,0);
	background-color: rgba(255,255,255,1.0);
	background-image: linear-gradient(  170deg,  rgba(0,0,0,0.1),  rgba(0,0,0,0.15)  );
	color: inherit;
}

/* 円グラデーション */
.ColorBG ul>li
{
	padding-top: 1em;
	padding-bottom: 1em;
	background: -webkit-radial-gradient(circle closest-side, rgba(250,190,0,0.4), rgba(250,190,0,0.0));
	background: -moz-radial-gradient(circle closest-side, rgba(250,190,0,0.4), rgba(250,190,0,0.0));
	background: radial-gradient(rgba(circle closest-side, 250, 190, 0, 0.4), rgba(250,190,0,0.0));
}

/* ------------------------------------------------------
	色・あか */
sup.Required,
sub.Required,
.Required:before,
.Required:after,
.Alert,
.error_txt,
.Message,
.ErrorMessage,
.NewMark,
.NewMark:before,
.PDF a:before,
.PDF a[target="_blank"]:before
{
	color: rgba(204,51,51,1.0);
}

.Bomb>b,
:is(.Bomb, .Bomb>b):before
/*
.Bomb:before,
.Bomb>b:before
*/
{
	background-color: rgba(204,51,51,0.9);
}

.lead.Corner,
.lead.Corner>.Wrap
{
	border-color: rgba(204,51,51,0.2);
}

.EntrySheet .Error b
{
	color: rgba(204,51,51,0.8);
}

.ColorBtn.R,
.Kago
{
	color: rgba(255,255,255,1.0);
}

.ColorBtn:before,
.Kago:before,
#Admin .Menu .Ct button:before
{
	content: "";
	position: absolute;
	display: block;
	left: 0.25em;
	top: 0.25em;
	width: 100%;
	height: 100%;
}
/*
	z-index: 1;
*/

.Kago:before
{
	background-color: rgba(204,51,51,0.8);
	opacity: 0.5;
}

/* form / error */
.Error
{
}

.Error :is(select, input, textarea)
/*
.Error select,
.Error input,
.Error textarea
*/
{
	background-color: rgb(204, 51, 51, 1.0);
}

/* <select>直に疑似要素は設定できない
.Error select,
.Error label	{
	background-color: rgba(204,51,51,0.5);
}
.Error select:before,
.Error label:before	{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,1.0);
}
*/


/* ======================================================
	縁取り
------------------------------------------------------ */
.fuchi_w
{
	text-shadow:
		0 0 0.5em rgba(255,255,255,0.5),		-0 -0 0.5em rgba(255,255,255,0.5),
		-0 0 0.5em rgba(255,255,255,0.5),		0 -0 0.5em rgba(255,255,255,0.5),
		0 0 0.5em rgba(255,255,255,0.5),		0 -0 0.5em rgba(255,255,255,0.5),
		-0 0 0.5em rgba(255,255,255,0.5),		0 0 0.5em rgba(255,255,255,0.5)
	;
}

/*	[210810]
	CSSだけで文字装飾
	https://qiita.com/noqua/items/4e418c0af9fe96e7d0ff
*/
.text_stroke
{
	display: inline-block;
	position: relative;
	width: auto;
	-webkit-background-clip: text;
	z-index: 5;
}

.text_stroke:before,
.text_stroke:after
{
	position: absolute;
	top: 0.02em;
	left: 0.02em;
	width: auto;
	white-space: nowrap;
	content: attr(data-text);
}

.text_stroke:before
{
	-webkit-text-stroke: calc(0.75em / 2.5) rgba(236,108,0,1.0);
	filter:
		drop-shadow(0em 0.001em 0.02em rgba(236,108,0,1.0))
		drop-shadow(0.001em 0em 0.02em rgba(236,108,0,1.0))
		drop-shadow(-0.010em 0em 0.02em rgba(236,108,0,1.0))
		drop-shadow(0em -0.001em 0.02em rgba(236,108,0,1.0))
	;
}

.text_stroke:after
{
	-webkit-text-stroke: calc(1em / 6) rgba(255,255,255,1.0);
}

.text_stroke>.Wrap
{
	width: auto;
	text-shadow: none;
	z-index: 5;
}

/*
    filter:
        drop-shadow(0.0075em 0.0075em 0 rgba(0,0,0,1.0))
        drop-shadow(0.0075em 0.0075em 0 rgba(0,0,0,1.0))
        drop-shadow(0.0125em 0.0125em 0 rgba(0,0,0,1.0))
        drop-shadow(0.0125em 0.0125em 0 rgba(0,0,0,1.0))
	;
*/

.text_stroke_w
{
}

.text_stroke_w:before
{
	-webkit-text-stroke: calc(0.75em / 2.5) rgba(255,255,255,1.0);
	filter:
		drop-shadow(0em 0.001em 0.02em rgba(255,255,255,1.0))
		drop-shadow(0.001em 0em 0.02em rgba(255,255,255,1.0))
		drop-shadow(-0.010em 0em 0.02em rgba(255,255,255,1.0))
		drop-shadow(0em -0.001em 0.02em rgba(255,255,255,1.0))
	;
}

/*
.Step3 .head	{
	text-shadow:
		1px 1px 0 rgba(0,0,0,0.1), -1px -1px 0 rgba(0,0,0,0.1),
		-1px 1px 0 rgba(0,0,0,0.1), 1px -1px 0 rgba(0,0,0,0.1),
		0px 1px 0 rgba(0,0,0,0.1),  0 -1px 0 rgba(0,0,0,0.1),
		-1px 0 0 rgba(0,0,0,0.1), 1px 0 0 rgba(0,0,0,0.1)
	;
}
*/





/* ======================================================
	背景
------------------------------------------------------ */

/* 影 */
.BoxShadow
{
	-webkit-box-shadow: 0px 0.5em 1em rgba(0,0,0,0.25);
	box-shadow: 0px 0.5em 1em rgba(0,0,0,0.25);
}

.BoxShadow50
{
	-webkit-box-shadow: 0px 10px 100px rgba(0,0,0,0.5);
	box-shadow: 0px 20px 100px rgba(0,0,0,0.5);
}

.bg_border
{
	background-color: #8be4f0;
	background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
	background-size: 14px 14px;
}

/* 斜線 */
.bg_stripe
{
	background-image: repeating-linear-gradient(
		-20deg,
		rgba(255,255,255,0.1),
		rgba(255,255,255,0.1) 1em,
		rgba(255,255,255,0) 0,
		rgba(255,255,255,0) 2em
	);
}

/*
	カラフルなストライプ
	------------------------------------------------------
	CSSだけでストライプの背景を作ってみる
	https://dg-workspace.net/archives/1358
*/
.pattern_Stripe:before,
.pattern_Stripe>.Wrap:before
{
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255,255,255,0.0) calc((1rem * 0.8) * 0),	rgba(255,255,255,0.0) calc((1rem * 0.8) * 2),
		rgba(115,208,194,1.0) calc((1rem * 0.8) * 2),	rgba(115,208,194,1.0) calc(((1rem * 0.8) * 2) * 2),
		rgba(255,255,255,0.0) calc(((1rem * 0.8) * 2) * 2),	rgba(255,255,255,0.0) calc(((1rem * 0.8) * 3) * 2),
		rgba(255,197,48,1.0) calc(((1rem * 0.8) * 3) * 2),	rgba(255,197,48,1.0) calc(((1rem * 0.8) * 4) * 2),
		rgba(255,255,255,0.0) calc(((1rem * 0.8) * 4) * 2),	rgba(255,255,255,0.0) calc(((1rem * 0.8) * 5) * 2),
		rgba(253,123,135,0.75) calc(((1rem * 0.8) * 5) * 2),	rgba(253,123,135,0.75) calc(((1rem * 0.8) * 6) * 2)
	);
}

/* 水玉 */
.Dot
{
	background-image: radial-gradient(
		rgba(129,216,208,0.2) 10%,
		transparent 20%),
		radial-gradient(rgba(129,216,208,0.2) 10%,
		transparent 20%
	);
	background-size: 0.5em 0.5em;
	background-position: 0 0, 0.25em 0.25em;
}

#Admin .Menu .Ct button,
#Admin .Menu .Ct button:before
{
	border-radius: 0.5em;
}

#Admin .Menu .Ct button
{
	border-width: 1px;
}

#Admin .Menu .Ct button:before
{
	opacity: 0.5;
}

/*
#Admin .Menu .Ct>ul>li:nth-child(1) button:before	{
	background-color: rgba(115,208,194,0.5);
}
#Admin .Menu .Ct>ul>li:nth-child(2) button:before	{
	background-color: rgba(255,197,48,0.5);
}
#Admin .Menu .Ct>ul>li:nth-child(3) button:before	{
	background-color: rgba(253,123,135,0.5);
}
#Admin .Menu .Ct>ul>li:nth-child(4) button:before	{
	background-color: rgba(3,169,244,0.4);
}
#Admin .Menu .Ct>ul>li:nth-child(5) button:before	{
	background-color: rgba(156,39,176,0.3);
}
#Admin .Menu .Ct>ul>li:nth-child(6) button:before	{
	background-color: rgba(255,87,34,0.3);
}
*/


/* ======================================================
	線
------------------------------------------------------ */
hr
{
}

hr.Blank
{
	background: none;
	border-width: 0;
}

.Index hr
{
	background: transparent;
}

hr.thin
{
	background: none;
	border-width: 0;
	margin: 0;
	height: 0;
}

/* ------------------------------------------------------
	線で囲む */
.memo,
.Border,
.Frame
{
	padding: 2em;
	margin-top: 2em;
}

.memo:not(:last-child),
.Border:not(:last-child),
.Frame:not(:last-child)
{
	margin-bottom: 2em;
}

.memo>:is(h2, h3, h4)
/*
.memo>h2,
.memo>h3,
.memo>h4
*/
{
	margin-top: 0;
}

.memo b
{
}

.memo ul
{
}

.memo li
{
}

.memo,
.Border
{
	border-width: 1px;
}

.Border,
.Frame
{
	padding: 1.5em;
}

.Border
{
	border-width: 0.5em;
}

.Drawer .Frame
{
	margin-top: 0;
	margin-bottom: 0;
}

.Drawer .Menu>.Wrap>.Frame:first-child
{
	padding-top: 0;
}

/* ------------------------------------------------------
	[160924]追加　内側へ線を引く */
.BorderInside
{
	display: block;
	position: relative;
}

.BorderInside:after
{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.5);
}

button.Border
{
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* ------------------------------------------------------
	下線 */
.Line
{
}

.LineD
{
}

.Under
{
	text-decoration: underline;
}

.Under.Line
{
	display: inline;
	text-decoration: none;
	background: linear-gradient(
		transparent 0.9em,
		rgba(255,152,0,0.4) 0,
		rgba(255,152,0,0.4) calc(0.9em + 0.3em),
		transparent 0
	);
	padding: 0em 0em;
}

.Under.Line.LineR
{
	background: linear-gradient(
		transparent 0.8em,
		rgba(255,0,0,0.2) 0,
		rgba(255,0,0,0.2) calc(1em + 0.5em),
		transparent 0
	);
}

.Under.Line.LineOR
{
	background: linear-gradient(
		transparent 0.8em,
		rgba(243,151,0,1.0) 0,
		rgba(243,151,0,1.0) calc(1em + 0.5em),
		transparent 0
	);
}

.Under.Line.LineY
{
	background: linear-gradient(
		transparent 0.8em,
		rgba(255,193,7,0.8) 0,
		rgba(255,193,7,1.0) calc(1em + 0.5em),
		transparent 0
	);
}

.Under.Line.LineG
{
	background: linear-gradient(
		transparent 0em,
		rgba(139,195,74,0.7) 0,
		rgba(139,195,74,0.9) calc(0.8em + 0.5em),
		transparent 0
	);
}

.Under.Line.LineW
{
	background: linear-gradient(
		transparent 0.8em,
		rgba(255,255,255,0.7) 0,
		rgba(255,255,255,0.9) calc(0.8em + 0.5em),
		transparent 0
	);
}

.Under.Line.Double
{
	background: linear-gradient(
		transparent 0.6em,
		red 0,
		red calc(0.6em + 1px),
		transparent 0,
		transparent calc(0.6em + 3px),
		red 0,
		red calc(0.6em + 4px),
		transparent 0
	);
	padding: 0em 0em;
}

.Under.Line.Zigzag
{
	background-image: url(../img/wave_2px-1px_20px.svg);
	background-position: center bottom;
	background-repeat: repeat-x;
	padding: 0.25em 0em;
}

.Under.Line.ZigzagS
{
	background-image: url(../img/wave_1px-0_5px_20px_double.svg);
}

.Under.Line *
{
	display: inline;
}



/*
.Under2	{
	background-repeat: repeat-x;
	background-position: center bottom;
	background-image: url(../img/line2.png);
	padding-bottom: 2px;
	padding-top: 2px;
}
*/




/* ======================================================
	影
------------------------------------------------------ */
.TxtShadow,
.lucentBK,
.CategoryTitle .Img+.Wrap,
.Index .Top .body .Catch
{
	color: rgba(255,255,255,1.0);
	text-shadow:
		0 0 0.25em rgba(0,0,0,0.5),
		0 0 1em rgba(0,0,0,1.0)
	;
}



/* ======================================================
	金色
------------------------------------------------------ */
/*
#Signin .SignInForm>.Wrap>.Wrap,
#Signin .SignInForm>.Wrap:before,
#Signin .SignInForm>.Wrap:after,
#Signin .SignInForm>.Wrap>.Wrap:before,
#Signin .SignInForm>.Wrap>.Wrap:after
	{
	border-color: #dec052;
	border-color: rgba(222,192,82,1.0);
}

body:before,
body:after,
.GlobalMenu .MenuOn span:after
	{
	content: "";
	display: block;
	height: 0.5em;
	width: 100%;
	background-image: linear-gradient(
		-1deg,
		rgba(242,224,139,1.0),
		rgba(202,154,12,1.0),
		rgba(250,206,0,1.0),
		rgba(255,251,208,1.0)
	);
}
*/