@charset "utf-8";

/* CSS Document */

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

/*★未決★　[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, 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);
}

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

a,
input,
textarea
{
	color: inherit;
}

table,
tr,
th,
td
{
	border-color: rgba(0,0,0,0.1);
}

.scroll_stop .BackTop a:before,
.scroll_stop .BackTop a:after
{
	border-color: rgba(255,255,255,1.0);
}

.ColorBtn.arrow:after
{
	background-color: rgba(255,255,255,1.0);
}

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

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

/*.ColorBtn>*,*/
.lucentBK,
.PageNavi span:not(:last-of-type):after,
.Footer .ContactDetails.black,
.Drawer .ClassContact.black,
.Copy,
.pagetitle,
.Gallery.Slider .slick-arrow:after
{
	background-color: rgba(0,0,0,1.0);
	color: rgba(255,255,255,1.0);
}

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

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

.lucent .ColorBtn>*
{
	background-color: rgba(0,0,0,0.2);
	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)
{
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,1.0);
}


.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(even) tr:nth-of-type(odd) :is(th, td)
{
	background-color: rgba(0,0,0,0.05);
}

.slider .slick-dots li button:before
{
	background-color: rgba(0,0,0,1.0);
}

/*[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);
}

.form_error
{
	background-color: rgba(204,51,51,0.1);
	border-color: rgba(204,51,51,1.0);
}

.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
{
	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):not(.ColorBtn)
/*
.Error select,
.Error input,
.Error textarea
*/
{
	background-color: rgb(204, 51, 51, 0.2);
}

/* <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 1px rgba(255,255,255,0.5),		-0 -0 1px rgba(255,255,255,0.5),
		-0 0 1px rgba(255,255,255,0.5),		0 -0 1px rgba(255,255,255,0.5),
		0 0 1px rgba(255,255,255,0.5),		0 -0 1px rgba(255,255,255,0.5),
		-0 0 1px rgba(255,255,255,0.5),		0 0 1px rgba(255,255,255,0.5)
	;
}

.fuchi_w_soft_thin
{
	text-shadow:
		0 0 0.05em rgba(255,255,255,0.5),		-0 -0 0.05em rgba(255,255,255,0.5),
		-0 0 0.05em rgba(255,255,255,0.5),		0 -0 0.05em rgba(255,255,255,0.5),
		0 0 0.05em rgba(255,255,255,0.5),		0 -0 0.05em rgba(255,255,255,0.5),
		-0 0 0.05em rgba(255,255,255,0.5),		0 0 0.05em rgba(255,255,255,0.5)
	;
}

.fuchi_w_soft
{
	text-shadow:
		0 0 0.25em rgba(255,255,255,0.5),		-0 -0 0.25em rgba(255,255,255,0.5),
		-0 0 0.25em rgba(255,255,255,0.5),		0 -0 0.25em rgba(255,255,255,0.5),
		0 0 0.25em rgba(255,255,255,0.5),		0 -0 0.25em rgba(255,255,255,0.5),
		-0 0 0.25em rgba(255,255,255,0.5),		0 0 0.25em rgba(255,255,255,0.5)
	;
}

.fuchi_w_soft_bold
{
	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
{
	display: inline-block;
	position: absolute;
	top: 0em;
	left: 0em;
	width: auto;
	white-space: nowrap;
	content: attr(data-text);
}

.text_stroke:after
{
	-webkit-text-stroke: 0.25em rgba(255,255,255,1.0);
}

.text_stroke>*
{
	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_bold
{
}

.text_stroke_w_bold: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))
	;
}

.text_stroke.strokeOR: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))
	;
}

/*
.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)
	;
}
*/





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

/* 影 */
.Shadow
{
	-webkit-box-shadow: 0.5em 0.5em 0em rgba(0,0,0,0.2);
	box-shadow: 0.5em 0.5em 0em rgba(0,0,0,0.2);
	display: inline-block;
}

/* 斜線 */
.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;
}



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

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

.Index hr
{
	background: transparent;
}

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

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

.memo:not(:last-of-type),
.Frame:not(:last-of-type)
{
	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-width: 1px;
}

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

.Border
{
	border-width: 0.5em;
}

.BorderThin
{
	border-width: 1px;
}

.BorderMedium
{
	border-width: 3px;
}


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

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

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

.BorderInside:after
{
	content: "";
	display: block;
	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;
}


/* ------------------------------------------------------
	テープ */
.Tape
{
	display: inline;
	text-decoration: none;
	background: linear-gradient(
		transparent 0em,
		rgba(255,255,255,0.9) 0,
		rgba(255,255,255,0.9) calc(1em + 0.5em),
		transparent 0
	);
}

.Tape.EU
{
	background: linear-gradient(
		transparent 0.275em,
		rgba(255,255,255,0.9) 0,
		rgba(255,255,255,0.9) 1.025em,
		transparent 0
	);
}

.Tape *
{
	display: inline;
}

.Tape.ColorR
{
	background: linear-gradient(
		transparent 0em,
		rgba(255,0,0,0.2) 0,
		rgba(255,0,0,0.2) calc(1em + 0.5em),
		transparent 0
	);
}

.Tape.ColorOR
{
	background: linear-gradient(
		transparent 0em,
		rgba(243,151,0,0.4) 0,
		rgba(243,151,0,0.6) calc(1em + 0.5em),
		transparent 0
	);
}

.Tape.ColorY
{
	background: linear-gradient(
		transparent 0em,
		rgba(255,193,7,0.7) 0,
		rgba(255,193,7,0.9) calc(1em + 0.5em),
		transparent 0
	);
}

.Tape.ColorG
{
	background: linear-gradient(
		transparent 0em,
		rgba(139,195,74,0.4) 0,
		rgba(139,195,74,0.6) calc(1em + 0.5em),
		transparent 0
	);
}

.Tape.ColorBL
{
	background: linear-gradient(
		transparent 0em,
		rgba(33,150,243,0.3) 0,
		rgba(33,150,243,0.4) calc(1em + 0.5em),
		transparent 0
	);
}

.Tape.ColorW
{
	background: linear-gradient(
		transparent 0em,
		rgba(255,255,255,0.7) 0,
		rgba(255,255,255,0.9) calc(1em + 0.5em),
		transparent 0
	);
}

/* ------------------------------------------------------
	下線 */
.UnderLine
{
	text-decoration: underline;
}

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

.Under *
{
	display: inline;
}

.Under.ColorR
{
	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.ColorR100
{
	background: linear-gradient(
		transparent 0.8em,
		rgba(255,0,0,0.8) 0,
		rgba(255,0,0,0.8) calc(1em + 0.5em),
		transparent 0
	);
}

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

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

.Under.ColorG
{
	background: linear-gradient(
		transparent 0.8em,
		rgba(139,195,74,0.6) 0,
		rgba(139,195,74,0.8) calc(1em + 0.5em),
		transparent 0
	);
}

.Under.ColorBL
{
	background: linear-gradient(
		transparent 0.8em,
		rgba(33,150,243,0.3) 0,
		rgba(33,150,243,0.4) calc(1em + 0.5em),
		transparent 0
	);
}

.Under.ColorW
{
	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.Double
{
	background: linear-gradient(
		transparent 0.8em,
		red 0,
		red calc(0.8em + 1px),
		transparent 0,
		transparent calc(0.8em + 3px),
		red 0,
		red calc(0.8em + 4px),
		transparent 0
	);
}

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

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


/* ======================================================
	影
------------------------------------------------------ */
.TxtShadow,
.lucentBK,
.Index .Top .Lead .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)
	;
}