@charset "UTF-8";

@import url(reset_201712.css);

.cf:after {
	content: "";
	clear: both;
	display: block;
}

img { vertical-align: bottom; }
main { display: block; }



/* 全体 ============================== */
body {
	font-family: 'Mplus 1p', 'Asap', sans-serif;
	color: black;
	font-size: 90%;
	line-height: 1;
}

::selection { background: #ffcccc; color: red; } /* Safari */
::-moz-selection { background: #ffcccc; color: red; } /* Firefox */



/* テキスト ============================== */
.txtB { font-weight: bold; }
.txtNor { font-weight: normal; }

.txtFontR { font-family: 'Asap', sans-serif; font-weight: 400; }
.txtFontB { font-family: 'Asap', sans-serif; font-weight: 700; }

.txtXXL { font-size: 180%; }
.txtXL { font-size: 144%; }
.txtL { font-size: 115%; }
.txtS { font-size: 90%; }
.txtXS { font-size: 80%; }

.txtRed { color: red; }
.txtRedB { color: red; font-weight: bold; }
.txtGrey { color: #666; }
.txtLightGrey { color: #999; }
.txtWhite { color: white; }
.txtBlack { color: black; }



/* リンク ============================== */
a { transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; color: red; }
a:hover { text-decoration: none; }
a.pic:hover { opacity: 0.6; }

a.btn {
	display: inline-block;
	background-color: black;
	border-radius: 5px;
	padding: 8px 38px 8px 15px;
	text-decoration: none;
	line-height: 1.25;
	color: white;
	box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
	position: relative;
}
a.btn:hover { background-color: red; }
a.btn:active { color: black; box-shadow: 0 0 5px rgba(0,0,0,0.3); }

a.btnArrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 8px;
	height: 24px;
	width: 24px;
	margin-top: -12px;
	background: url(../images_cmn/icon_arrow_w.png) center center/contain no-repeat;
	text-align: left;
}

a.btnSarrow { padding: 6px 32px 6px 10px; }
a.btnSarrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 5px;
	height: 18px;
	width: 18px;
	margin-top: -9px;
	background: url(../images_cmn/icon_arrow_w.png) center center/contain no-repeat;
}

a.linkW { color: white; }
a.linkB { color: black; }
a.linkB:hover { color: red; }



/* 注記 ============================== */
.note { text-indent: -1.35em; margin-left: 1.35em; line-height: 1.35; }
ul.noteList li { text-indent: -1.35em; margin-left: 1.35em; line-height: 1.35; margin-top: 5px; }
.boxWhiteLine { border: solid 1px white; color: white; padding: 4px 8px 3px; display: inline-block; line-height: 1; }
.boxRedLine { border: solid 1px red; color: red; padding: 4px 8px 3px; display: inline-block; line-height: 1; }



/* PAGE UP!!! ============================== */
#page-top { position: fixed; bottom: 2.5em; right: 0; z-index: 100; }
#page-top a { background: rgba(0, 0, 0, 0.6) url(../images_cmn/pageup.png) 50% 50% no-repeat; width: 48px; height: 48px; display: block; border-radius: 4px 0 0 4px; box-shadow: -2px 2px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform:translate2d(0, 0, 0); -webkit-backface-visibility:hidden; }
#page-top a:hover { background: rgba(255, 0, 0, 0.6) url(../images_cmn/pageup.png) 50% 40% no-repeat; box-shadow: -2px 2px 4px rgba(0,0,0,0.3); }