@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:18px;
	line-height:200%;
	color:#222;
	min-width:1010px;
	-webkit-text-size-adjust: 100% ;/* iPhoneフォントサイズ拡大対策 */
	background: url(../../img/bg.jpg);
}
img {
	border: none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd, ol, ol li, table, th, td {
	background-image:url(../../img/spacer.gif); /* AndroidページのP要素の隙間対策 */
}
a:link {color:#06F; outline:none; }
a:visited {color:#06F;}
a:hover {color: #333;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}

#wrapper {}
#base {}

.pc {display:block;}
.sm {display:none;}

/*====================================================================================================
  HEADER
====================================================================================================*/
#header {}

/* LOGO */
#header h1 { position:relative; display: block; max-height:300px; overflow: hidden;}
#header h1 img { width: 100%; height: auto; max-height:300px; object-fit:cover;}
#header h1::after { 
	display:block; clear:both; content:"";
	position: absolute; top:0; left: 0; right: 0;
	margin: auto;
	max-width:1000px; height: 300px;
	background: url(../../img/site_tit.png) no-repeat left center;
	background-size: 396px auto;
}

/* NAV */
#header #Nav { display:none !important;}


/*====================================================================================================
  CONTENT
====================================================================================================*/
#content { position: relative; width:100%; }
#content ul.link_bana { 
	position: absolute; top:-100px; right: 0; left: 0;
	margin: auto;
	max-width:445px;
	z-index: 9999;
}
#content ul.link_bana li { float: left;}
#content ul.link_bana li+li { margin-left:45px;}
#content ul.link_bana li a {
	display: block;
	width: 200px;
	height: 200px;
	padding-top: 110px;
	color: #fff;
	font-size: 130%;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-radius:100%; /* CSS3 */
	-webkit-border-radius:100%; /* Safari,Google Chrome */
	-moz-border-radius:100%;/* Firefox */
	box-sizing: border-box;
}
#content ul.link_bana li:nth-child(1) a { background:#FF7300 url("../../img/linkbtn01.png") no-repeat center 30px;}
#content ul.link_bana li:nth-child(2) a { background:#E5400A url("../../img/linkbtn02.png") no-repeat center 30px;}
#content .flow_course {
	position: relative;
	margin:50px auto 0;
	padding:70px 5% 50px;
	background: #fff;
	border-radius:5px; /* CSS3 */
	-webkit-border-radius:5px; /* Safari,Google Chrome */
	-moz-border-radius:5px;/* Firefox */
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}
#content .flow { 
	position: relative;
	margin:0 auto 3%;
	width:96%; max-width:1000px;
	overflow: hidden;
}
#content .flow::before {
	display:block; clear:both; content:"";
    position: absolute; top: 16px;
	margin: auto; width:100%; height:3px;
    background:#ccc;
}
#content .flow .mid {
	display: block;
	margin: auto;
	padding:0;
	color: #fff;
	text-align: center;
	font-size:90%;
	font-weight: bold;
	line-height:35px;
	background:#222;
	border-radius:20px; /* CSS3 */
	-webkit-border-radius:20px; /* Safari,Google Chrome */
	-moz-border-radius:20px;/* Firefox */
}
#content .flow .step {
	display: block;
	margin: auto;
	padding:5px 0;
	color: #222;
	text-align: center;
	font-size:90%;
	font-weight: bold;
}
#content .flow ul {overflow:hidden;}
#content .flow ul li a b { display: block; font-size:85%; letter-spacing: -1px; line-height:130%;}
#content .flow ul li small {
	display:none;
	padding:5px 0;
	width: 100px;
	color: #fff;
	font-size:70%;
	text-align: center;
	line-height:100%;
	border-radius:20px; /* CSS3 */
	-webkit-border-radius:20px; /* Safari,Google Chrome */
	-moz-border-radius:20px;/* Firefox */
}
#content .flow ul li a { display: block; padding-top:20px; text-decoration: none; text-align: center;}
#content .flow ul li a:hover { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7;}
#content .flow ul li a::before {
	display:block; clear:both; content:"";
	margin: auto; width:50px; height:50px;
	background-size:100% auto !important;
}
#content .flow .cate { position: relative; float: left; width:23.25%; z-index: 999;}
#content .flow .cate4  { width:27.25%;}
#content .flow .cate+.cate { margin-left: 1%;}
#content .flow .cate1 .mid { background: #91BC1B; }
#content .flow .cate2 .mid { background:#559414; }
#content .flow .cate3 .mid { background: #B56B00; }
#content .flow .cate4 .mid { background: #FFB60F; }
#content .flow .cate1 a { color: #91BC1B; }
#content .flow .cate2 a { color:#559414; }
#content .flow .cate3 a { color: #B56B00; }
#content .flow .cate4 a { color: #FFB60F; }
#content .flow .cate1 ul li:nth-child(1) a::before { background: url("../../img/icon_01.png") no-repeat center center;}
#content .flow .cate2 ul li:nth-child(1) a::before { background: url("../../img/icon_04.png") no-repeat center center;}
#content .flow .cate3 ul li { float: left; width: 50%;}
#content .flow .cate3 ul li:nth-child(2) a { color: #da9107;}
#content .flow .cate3 ul li:nth-child(1) a::before { background: url("../../img/icon_05.png") no-repeat center center;}
#content .flow .cate3 ul li:nth-child(2) a::before { background: url("../../img/icon_07.png") no-repeat center center;}
#content .flow .cate4 ul li:nth-child(1) a::before { background: url("../../img/icon_06.png") no-repeat center center;}
#content .notes { margin:10px auto; max-width: 1000px; overflow: hidden;}
#content .notes p { padding-left: 30px; text-indent:-25px; font-size: 87.5%; line-height: 150%; text-align: left;}
#content .notes p::before { content:"※"; margin-right:5px;}


/*====================================================================================================
  FOOTER
====================================================================================================*/
#footer { 
	position:relative;
	background:url(../../img/f_bg.png) repeat-x center top;
	background-size: auto 100%;
}
#footer::after {
	display:block; clear:both; content:"";
	position:absolute; left:0; top:-13px; 
	width:100%; height:13px;
	text-indent:-9999px;
	background:url(../../img/f_bg2.png) repeat-x;
}
#footer ul { margin:0 auto; padding:40px 0; width:960px; overflow: hidden;}
#footer ul li { float:left; margin:2%; width:21%;}
#footer ul li:nth-child(4n+1) { clear: both;}
#footer ul li img { width:100%; height:auto;}
#footer .copy {
	padding:20px 0;
	clear:both;
	color: #FFF;
	text-align:center;
}


/*====================================================================================================
  PAGE
====================================================================================================*/
#page,
#page a { display:block; width:65px; height:65px;}
#page { position: fixed; bottom: 20px; right: 20px; z-index: 999999;}
#page a {
	text-indent: -9999px;
	background:url(../../img/pagetop.png) no-repeat;
}


/*====================================================================================================
  COLOR eto..
====================================================================================================*/
.light-blue { color: #40A6DD;}
.blue { color: #0000FF;}
.dark-blue { color: #036EA0;}
.purple { color: #660099;}
.pink { color: #EA4983;}
.red { color: #FF0000;}
.orange { color: #FF6600;}
.yellow { color: #FFCC00;}
.white { color: #FFFFFF;}
.gray { color: #666666;}
.brown { color: #663300;}
.green { color: #85A013;}
.italic { font-style: italic;}
.strong { font-weight: bold;}
.large { font-size: 137.5%; line-height: 140%;}
.large2 { font-size: 112.5%; line-height: 140%;}
.small { font-size: 80%;}
.underline { text-decoration: underline;}
.center { text-align-last:center;}
.left { text-align-last:left;}
.right { text-align-last:right;}