@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html	{
	font-size: 62.5%;
	height: 100%;
}

body	{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #4e4c4b;
	background-color: #ffffff;
	font-family: 'Noto Sans Japanese',"メイリオ", Meiryo,"HiraKakuPro-W3","ヒラギノ角ゴ Pro W3","Helvetica Neue", Helvetica, "Arial", "ＭＳ Ｐゴシック",sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
}

.clearfix:before, .clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both;}
.clearfix {*zoom:1;}
em	{font-style: normal;}
img	{ max-width: 100%; height: auto; vertical-align: top;}
a img	{ border: none;}
a:hover img	{opacity:0.7;filter: alpha(opacity=70);}
a	{text-decoration: none}
article a	{word-break: break-all}
a:link, a:visited {color: #1e3799;  text-decoration: none;}
a:hover,a:active {color: #1e3799; text-decoration: underline;}
.reset, .reset > dt, .reset > dd	{margin: 0; padding: 0; list-style-type: none;}
.reset-t	{margin-top: 0; padding-top: 0;}
.reset-b	{margin-bottom: 0; padding-bottom: 0;}
.reset-v	{margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0;}
.reset-h	{margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0;}
ul.default, ol.default	{margin-left: 1.5em; padding: 0}


hr{border-top: none; border-right: none; border-bottom: 1px solid #c7c7c7; border-left: none; padding-top: 10px; margin: 0 0 10px;}
hr.spacer{margin-bottom: 0; padding: 10px 0; border: none;}
hr.spacer-2x{margin-bottom: 0; padding: 20px 0; border: none;}
hr.hr-2x{margin-bottom: 0; padding-top: 20px; margin: 0 0 20px;}
.row	{display: table}
.row.fixed, .row-lg.fixed	{table-layout: fixed}
.row > .col	{display: table-cell;}
.row.valign-t > .col	{vertical-align: top;}
.row.valign-m > .col	{vertical-align: middle;}
.row.valign-b > .col	{vertical-align: bottom;}
.flt-r	{float: right; margin-left: 20px}
.flt-l	{float: left; margin-right: 20px}
.text-left, table th.text-left, table td.text-left	{text-align: left;}
.text-center, table th.text-center, table td.text-center	{text-align: center;}
.text-right, table th.text-right, table td.text-right	{text-align: right;}
.text-white{ color: #ffffff;}
.text-red{ color: #c0392b;}
.text-blue{ color: #2980b9;}	
.text-green{ color: #27ae60;}	
.text-center{text-align: center}
.valign-t	{vertical-align: top}
.valign-m	{vertical-align: middle}
.valign-b	{vertical-align: bottom}
.bg-bk	{color: #ffffff; background-color: #000000;}
.bg-red	{color: #ffffff; background-color: #e74c3c;}
.bg-blue	{color: #ffffff; background-color: #3498db;}
.bg-green	{color: #ffffff; background-color: #2ecc71;}
.bg-silver	{background-color: #eeeeee;}
.fs-10	{font-size: 1.0rem;}
.fs-12	{font-size: 1.2rem;}
.fs-14	{font-size: 1.4rem;}
.fs-16	{font-size: 1.6rem;}
.fs-20	{font-size: 2.0rem;}
.w-max	{width: 100%;}
.w-min	{width: 1%; white-space: nowrap;}
.w-50	{width: 50px;}
.w-100	{width: 100px;}
.w-150	{width: 150px;}
.w-200	{width: 200px;}
.w-250	{width: 250px;}
.w-300	{width: 300px;}
b.num	{display: inline-block; width: 20px; height: 20px; line-height: 20px; margin-right: 5px; color: #ffffff; background-color: #3498db; border-radius: 10px; font-size: 1.2rem; text-align: center;}


header	{padding: 20px 0; color: #ffffff; background-color: #444444;}
header h1	{margin: 0; padding: 0; font-size: 2.0rem}

footer	{padding: 40px; font-size: 1.4rem; text-align: center;}

.page-top	{background-color: #f6efcd;}
.page-top article ul.nav-top li	{margin-top: 20px; padding: 20px; background-color: rgba(255,255,255,0.75); border-radius: 5px; box-shadow: 0 0 5px 1px rgba(0,0,0,0.25);}
.page-top article ul.nav-top .row-lg .col	{vertical-align: middle;}
.page-top article ul.nav-top .row-lg .col	{vertical-align: middle;}
.page-top article ul.nav-top .row-lg .col a	{display: block; padding: 30px; color: #ffffff; background-color: #2980b9; border-radius: 5px; text-align: center;}
.page-top article ul.nav-top .row-lg .col a:hover, .page-top article ul.nav-top .row-lg .col a:active	{background-color: #3498db; text-decoration: none; -webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.page-top article ul.nav-top .row-lg .col p	{padding: 0 20px;}
.page-top article dl.beginners.reset	{margin-top: 40px; padding: 20px; background-color: #ffffff;}
.page-top article dl.beginners.reset dt	{font-size: 2.0rem; font-weight: bold;}
.page-top article dl.beginners.reset dt:before	{display: inline-block; width: 30px; height: 30px; content: ""; margin-right: 5px; background: transparent url("../img/icon-beginners.png") no-repeat center center; background-size: contain; vertical-align: middle;}

@media (max-width: 834px) {

.row-sm	{display: table}
.row-sm > .col	{display: table-cell}

.container-sm	{margin: 0 20px;}
.fs-10	{font-size: 0.8rem;}
.fs-12	{font-size: 1.0rem;}
.fs-14	{font-size: 1.2rem;}
.fs-16	{font-size: 1.4rem;}
.fs-20	{font-size: 1.6rem;}
header	{padding: 20px; text-align: center;}
footer	{padding: 20px; font-size: 1.2rem;}
.page-top article ul.nav-top li	{margin-right: 20px; margin-left: 20px;}
.page-top article ul.nav-top .row-lg .col a	{margin-bottom: 20px; padding: 20px;}
.page-top article ul.nav-top .row-lg .col p	{font-size: 1.4rem; padding: 0;}
.page-top article dl.beginners.reset	{padding: 40px 20px 0; border-top: 2px solid #e7e7e7;}
.page-top article dl.beginners.reset dt	{position: relative; padding: 20px; background-color: #ffffff; font-size: 1.6rem;}
.page-top article dl.beginners.reset dt:after	{display: block; position: absolute; top: 50%; right: 20px; content: "\f078"; height: 100%; margin-top: -0.5em; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 1.0;}
.page-top article dl.beginners.reset.active dt:after	{content: "\f077";}
.page-top article dl.beginners.reset dd	{display: none; padding-top: 20px; padding: 0 20px 20px; background-color: #ffffff;}
.page-top article dl.beginners.reset.active dd	{display: block;}
.only-lg	{display: none !important;}
}

	


@media (min-width: 835px) {
.container	{width: 1060px; margin-right: auto; margin-left: auto;}
.row-lg	{display: table}
.row-lg > .col	{display: table-cell}

.page-top article .row-lg .col:first-child	{width: 300px;}
.page-top article dl.beginners.reset	{border: 2px solid #e7e7e7;}
.page-top article dl.beginners.reset dt	{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #d7d7d7;}

.only-sm	{display: none !important;}

}


@media (min-width: 960px) {
}

@media (min-width: 1060px) {
}

@media (max-width: 375px) {
}

@media (max-width: 320px) {
}