@import url(font-awesome.min.css);

/* Reset
------------------------------------------------------------*/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

address,
em {
	font-style: normal;
}

strong,
th {
	font-weight: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

th {
	text-align: left;
}

hr,
legend {
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

img,
fieldset {
	border: 0;
}

img {
	border: 0;
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

li {
	list-style-type: none;
}

input[type="submit"],
button,
label,
select {
	cursor: pointer;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

* {
	box-sizing: border-box;
}

*:before,
*:after {
	box-sizing: border-box;
}

/* link
------------------------------------------------------------*/

a {
	color: #333;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
	opacity: 0.8;
}

button:hover {
	opacity: 0.8;
}

/* Fonts
------------------------------------------------------------*/

@font-face {
	font-family: "MyYuGothicM";
	font-weight: normal;
	src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular"); /* Mediumがない場合 */
}

@font-face {
	font-family: "MyYuGothicM";
	font-weight: bold;
	src: local("YuGothic-Bold"), local("Yu Gothic"); /* for Chrome */
}

html {
	font-size: 62.5%;
}

/* 10px base */

body {
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", Meiryo, sans-serif;
	line-height: 1.8;
	color: #222;
}

body.IEUnder {
	font-family: "メイリオ",Verdana, "Hiragino Kaku Gothic ProN",  Meiryo, sans-serif;
}

body > div,
input,
button,
textarea,
select {
	font-size: 15px;
	font-size: 1.5rem;
}

input,
button,
textarea,
select {
	line-height: 1.8;
	color: #222;
	font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", Meiryo, sans-serif;
}

.IEUnder input,
.IEUnder button,
.IEUnder textarea,
.IEUnder select {
	font-family: "メイリオ",Verdana, "Hiragino Kaku Gothic ProN",  Meiryo, sans-serif;
}

/* form
------------------------------------------------------------*/

select {
	padding: 10px;
	border-radius: 5px;
}

textarea,
input[type="text"],
input[type="password"],
input[type="email"],
select {
	padding: 10px;
	border-radius: 5px;
	border: solid 1px #aaa;
}

textarea.error,
input[type="text"].error,
input[type="password"].error,
input[type="email"].error,
select.error {
	background-color: #fff2f2;
	border: solid 2px #cc1616;
}

/* radio
-------------*/

input[type="radio"] {
	display: none;
}

input[type="radio"] + label {
	position: relative;
	display: inline-block;
	padding: 3px 10px 3px 24px;
	cursor: pointer;
	width: 100%;
}

input[type="radio"] + label::before,
input[type="radio"] + label::after {
	content: '';
	top: 50%;
	position: absolute;
	border-radius: 100%;
	-webkit-transition: all .2s;
	transition: all .2s;
}

input[type="radio"] + label::before {
	width: 16px;
	height: 16px;
	margin-top: -9px;
	left: 0;
	background: #EEE;
	border: 1px solid #ccc;
}

input[type="radio"].error + label::before {
	border: 1px solid #cc1616;
	background-color: #fff2f2;
}

input[type="radio"] + label:hover::before {
	background: #FEFEFE;
}

input[type="radio"] + label::after {
	opacity: 0;
	left: 3px;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	background: #3c4d94;
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}

input[type="radio"]:checked + label::before {
	background: #fff;
	border: 1px solid #3c4d94;
}

input[type="radio"]:checked + label::after {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

/* checkbox
-------------*/

input[type="checkbox"] {
	display: none;
}

input[type="checkbox"] + label {
	position: relative;
	display: inline-block;
	padding: 3px 10px 3px 22px;
	cursor: pointer;
	-webkit-transition: all .2s;
	transition: all .2s;
}

input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after {
	position: absolute;
	content: '';
}

input[type="checkbox"] + label::before {
	top: 50%;
	left: 0;
	width: 14px;
	height: 14px;
	margin-top: -8px;
	background: #f4f4f4;
	border: 1px solid #ccc;
	border-radius: 3px;
}

input[type="checkbox"] + label::after {
	opacity: 0;
	top: 50%;
	left: 3px;
	width: 8px;
	height: 4px;
	margin-top: -4px;
	border-left: 2px solid #3c4d94;
	border-bottom: 2px solid #3c4d94;
	-webkit-transform: rotate(-45deg) scale(0.5);
	-ms-transform: rotate(-45deg) scale(0.5);
	transform: rotate(-45deg) scale(0.5);
}

input[type="checkbox"] + label:hover::before {
	background: #fff;
}

input[type="checkbox"]:checked + label::before {
	background: #fff;
	border: 1px solid #3c4d94;
}

input[type="checkbox"]:checked + label::after {
	opacity: 1;
	-webkit-transform: rotate(-45deg) scale(1);
	-ms-transform: rotate(-45deg) scale(1);
	transform: rotate(-45deg) scale(1);
}

/*
#overview
base
*/

#wrapper {
	display: table;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

#side {
	width: 250px;
	display: table-cell;
	vertical-align: top;
	background: #f3f3f3;
	position: relative;
}

#side:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0px;
	width: 20px;
	height: 100%;
	box-shadow: 10px 0px 14px -8px rgba(10, 10, 10, 0.45);
	-moz-box-shadow: 10px 0px 14px -8px rgba(10, 10, 10, 0.45);
	-webkit-box-shadow: 10px 0px 14px -8px rgba(10, 10, 10, 0.45);
	z-index: 1000;
}

#side .sideInner {
	position: relative;
	z-index: 1001;
}

#main {
	display: table-cell;
	vertical-align: top;
	background: url(../img/common/bgBlack.png) repeat top left;
}

#contents {
	padding-bottom: 80px;
	background: #fff;
}

.sideNav {
	background: #fff;
	border-top: 1px solid #ececec;
}

.sideNav li {
	border-bottom: 1px solid #ececec;
}

.sideNav a {
	display: block;
	padding: 15px 20px;
	text-decoration: none;
	color: #1b1b1b;
	font-weight: bold;
}

.sideNav a:before {
	content: "";
	color: #559f34;
	font-family: FontAwesome;
	line-height: 1;
	margin-right: 15px;
}

.sideBnr {
	padding: 25px 15px 15px;
}

.sideBnr li {
	margin-bottom: 15px;
	text-align: center;
}

.sideBnr p + ul {
	margin-top: 5px;
}

.sideBnr ul + p {
	margin-top: 40px;
}

#pageVisual {
	background: url(../img/common/bgWhite.png) repeat top left;
}

#pageVisual_soshiiki {
	background: url(../img/soshiiki/pageVisual.png) no-repeat center right;
}

#pageVisual_tokucho {
	background: url(../img/tokucho/pageVisual.png) no-repeat center right;
}

#pageVisual_ikusei {
	background: url(../img/ikusei/pageVisual.png) no-repeat center right;
}

#pageVisual_kougi {
	background: url(../img/kougi/pageVisual.png) no-repeat center right;
}

#pageVisual_map {
	background: url(../img/map/pageVisual.png) no-repeat center right;
}

#pageVisual_voice {
	background: url(../img/voice/pageVisual.png) no-repeat center right;
}

#pageVisual_privacy {
	background: url(../img/privacy/pageVisual.png) no-repeat center right;
}

#pageVisual_step {
	background: url(../img/step/pageVisual.png) no-repeat center right;
}

#pageVisual .mainTitle {
	padding-top: 80px;
	padding-bottom: 80px;
	color: #000;
	font-weight: bold;
	font-size: 31px;
	font-size: 3.1rem;
	line-height: 1;
	text-shadow: 1px 1px #fff;
}

#pankuzu {
	background: #f3f3f3;
	border-top: 1px solid #e5e5e5;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 5px 0;
}

#pankuzu li {
	display: inline-block;
}

#pankuzu li a {
	color: #63a648;
	text-decoration: none;
}

#pankuzu li a:after {
	content: "＞";
	display: inline-block;
	color: #a0a0a0;
	margin-right: 10px;
	margin-left: 10px;
}

#pankuzu li span:after {
	content: "＞";
	display: inline-block;
	color: #a0a0a0;
	margin-right: 10px;
	margin-left: 10px;
}

#footer {
	background: url(../img/common/bgBlack.png) repeat top left;
	padding: 40px 0;
	color: #fff;
}

#footer .container {
	position: relative;
}

#footer .container:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

#footer .footerInfo {
	float: left;
}

#footer .footerInfo .logo {
	margin-bottom: 12px;
}

#footer .footerInfo .address {
	margin-bottom: 20px;
	font-size: 14px;
	font-size: 1.4rem;
}

#footer .footerInfo .address .modBtn01 {
	color: #fff;
}

#footer .footerInfo .address a {
	color: #fff;
	text-decoration: none;
}

#footer .footerInfo .copyright {
	font-size: 12px;
	font-size: 1.2rem;
}

#footer .footerBtn {
	float: right;
}

#footer .footerBtn .modBtn01 {
	display: block;
	border-bottom: 1px dotted #fff;
	color: #fff;
	padding: 0px 10px 20px 30px;
}

#footer .pageTopBtn {
	position: fixed;
	bottom: 30px;
	right: 30px;
}

#footer .pageTopBtn #pageTop {
	display: block;
	border: 1px solid #fff;
	background: #0a0f0c;
	width: 78px;
	height: 78px;
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: center;
	padding: 12px 0;
}

#footer .pageTopBtn #pageTop:after {
	content: "▲";
	display: block;
	font-size: 18px;
	font-size: 1.8rem;
}

/*
#styleguide
container

```
<div class="container">
左右にpadding50pxつきます
</div>
```
*/

.container {
	margin-right: auto;
	margin-left: auto;
	padding-right: 50px;
	padding-left: 50px;
}

/* CSS Document */

.container {
	max-width: 970px;
}

.modSpOnly {
	display: none;
}

/*
#overview
modTitle
*/

/*
#styleguide
.modTitle01

```
<h2 class="modTitle01">
NEWS
</h2>
```
*/

.modTitle01 {
	color: #253338;
	font-weight: bold;
	font-size: 22px;
	font-size: 2.2rem;
	border-bottom: 2px solid #e6e6e7;
	padding: 5px 0 5px 40px;
	margin-bottom: 15px;
	position: relative;
}

.modTitle01:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	background: #63a648;
}

/*
#styleguide
.modTitle02

```
<h2 class="modTitle02">
個人情報保護ポリシー
</h2>
```
*/

.modTitle02 {
	background: #54854c;
	color: #fff;
	font-size: 24px;
	font-size: 2.4rem;
	padding: 5px 20px;
	margin-bottom: 20px;
}

.modTitle02 .location {
	display: inline-block;
	background: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	border-radius: 3px;
	color: #161616;
	padding: 0px 22px;
	margin-right: 10px;
	margin-bottom: 5px;
}

.modTitle02 a {
	color: #fff;
}

/*
#styleguide
.modTitle03

```
<h3 class="modTitle03">
講義一覧
</h3>
<h4 class="modTitle03 modTitle03_type02">
一般講座
</h4>
```
*/

.modTitle03 {
	background: url(../img/common/bgNavy.png) repeat top left;
	color: #fff;
	font-size: 28px;
	font-size: 2.8rem;
	letter-spacing: 0.2em;
	font-weight: bold;
	padding: 18px;
	text-align: center;
}

.modTitle03_type02 {
	background: url(../img/common/bgLightGreen.png) repeat top left;
	border-top: 3px solid #63a648;
	color: #253338;
}

/*
#styleguide
.modTitle04

```
<h3 class="modTitle04">
講義一覧
</h3>
```
*/

.modTitle04 {
	color: #253338;
	font-weight: bold;
	font-size: 30px;
	font-size: 3rem;
}

/*
#styleguide
.modTitle05

```
<h3 class="modTitle05">
<span class="inner">基礎をしっかり身につけたオペレータになる<br>トラブルをてきぱき対処できる技術者になる<br>起業感覚を身につけたスタッフ、マネージャーになる</span></h3>
</h3>
```
*/

.modTitle05 {
	text-align: center;
	font-weight: bold;
	font-size: 28px;
	font-size: 2.8rem;
	margin-bottom: 30px;
}

.modTitle05 .inner {
	display: inline-block;
	background: url(../img/common/hlImg01.png) no-repeat bottom center;
	padding-bottom: 35px;
}

/*
#styleguide
.modTitle06

```
<h3 class="modTitle06">
講義一覧
</h3>
```
*/

.modTitle06 {
	color: #253338;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
	border-bottom: 1px solid #a9c2a5;
	padding-bottom: 3px;
	margin-bottom: 5px;
}

/*
#overview
modTxt
*/

/*
#styleguide
.modTxtChui

```
<p class="modTxtChui">
テキストテキストテキストテキスト
</p>
```
*/

.modTxtChui {
	background: #fae7e7;
	color: #cc1616;
	text-align: center;
	margin: 16px 0 35px;
	padding: 20px 30px;
	font-weight: bold;
}

.modTxtChui_left {
	text-align: left;
}

.modTxt {
	margin-bottom: 40px;
}

.modTxt p {
	margin-bottom: 30px;
}

.modTxt p:last-child {
	margin-bottom: 0;
}

.modTxt_center {
	text-align: center;
}

.modTxt_mb0 {
	margin-bottom: 0;
}

.modFsize24 {
	font-size: 24px;
	font-size: 2.4rem;
}

.modFsize24 a[class*="modBtn"] {
	font-size: 24px !important;
}

/*
#overview
modBtn
*/

/*
#styleguide
.modBtn01

```
<a href="#" class="modBtn01 modBtn01_inline">GoogleMap</a>
```
*/

.modBtn01 {
	text-decoration: none;
	font-weight: bold;
}

.modBtn01:before {
	content: "";
	color: #559f34;
	font-family: FontAwesome;
	line-height: 1;
	margin-right: 8px;
	color: #ababab;
}

.modBtn01_inline {
	display: inline-block;
}

/*
#styleguide
.modBtn02

```
<a href="/kougi/#schedule" class="modBtn02">講義スケジュールはこちらをご覧ください</a>
<a href="/kougi/#schedule" class="modBtn02 modBtn02_large">講義スケジュールはこちらをご覧ください</a>
<a href="/kougi/#schedule" class="modBtn02 modBtn02_large modBtn02_schedule"><span>講義スケジュールはこちらをご覧ください</span></a>
<a href="/kougi/#schedule" class="modBtn02 modBtn02_medium">講義スケジュールはこちらをご覧ください</a>
<a href="/kougi/#schedule" class="modBtn02 modBtn02_back">講義スケジュールはこちらをご覧ください</a>
<a href="/kougi/#schedule" class="modBtn02 modBtn02_next">講義スケジュールはこちらをご覧ください</a>
<a href="/kougi/#schedule" class="modBtn02 modBtn02_pdf">講義スケジュールはこちらをご覧ください</a>
<a href="/kougi/#schedule" class="modBtn02 modBtn02_map">講義スケジュールはこちらをご覧ください</a>
```
*/

.modBtn02 {
	display: inline-block;
	text-decoration: none;
	border-radius: 5px;
	border: 2px solid #c9c9c9;
	min-width: 250px;
	padding: 12px 12px 12px 35px;
	text-align: center;
	font-weight: bold;
}

.modBtn02 span {
	position: relative;
}

.modBtn02:hover {
	background: #eee;
}

.modBtn02_medium {
	width: 300px;
	display: block;
	text-align: center;
	padding: 10px;
	font-size: 18px;
	font-size: 1.8rem;
	border-radius: 5px;
	border: none;
}

.modBtn02_medium:hover {
	background: #3c4d94;
}

.modBtn02_large {
	display: block;
	text-align: center;
	padding: 18px 20px;
	font-size: 20px;
	font-size: 2rem;
	border-radius: 10px;
	border: 3px solid #c9c9c9;
}

.modBtn02_large span {
	border-bottom: 1px solid #000;
}

.modBtn02_large:hover span {
	border-bottom: 1px solid #eee;
}

.modBtn02_schedule span {
	display: inline-block;
	margin-left: 40px;
}

.modBtn02_schedule span:before {
	position: absolute;
	left: -40px;
	top: 0px;
	content: "";
	display: inline-block;
	font-family: FontAwesome;
	line-height: 1;
	color: #559f34;
	font-weight: normal;
}

.modBtn02_schedule.modBtn02_large span:before {
	font-size: 30px;
	font-size: 3rem;
}

.modBtn02_next {
	position: relative;
	background: #3c4d94;
	color: #fff;
}

.modBtn02_next:hover {
	background: #3c4d94;
}

.modBtn02_next:before {
	position: absolute;
	right: 13px;
	top: 0px;
	bottom: 0;
	margin: auto;
	height: 2.5rem;
	font-size: 25px;
	font-size: 2.5rem;
	content: "";
	display: inline-block;
	font-family: FontAwesome;
	line-height: 1;
	font-weight: normal;
}

.modBtn02_back {
	position: relative;
	background: #3c4d94;
	color: #fff;
}

.modBtn02_back:hover {
	background: #3c4d94;
}

.modBtn02_back:before {
	position: absolute;
	left: 13px;
	top: 0px;
	bottom: 0;
	margin: auto;
	height: 2.5rem;
	font-size: 25px;
	font-size: 2.5rem;
	content: "";
	display: inline-block;
	font-family: FontAwesome;
	line-height: 1;
	font-weight: normal;
}

.modBtn02_pdf {
	position: relative;
}

.modBtn02_pdf:before {
	position: absolute;
	left: 13px;
	top: 0px;
	bottom: 0;
	margin: auto;
	height: 1.8rem;
	font-size: 18px;
	font-size: 1.8rem;
	content: "";
	display: inline-block;
	font-family: FontAwesome;
	line-height: 1;
	color: #559f34;
	font-weight: normal;
}

.modBtn02_map {
	position: relative;
}

.modBtn02_map:before {
	position: absolute;
	left: 13px;
	top: 0px;
	bottom: 0;
	margin: auto;
	height: 1.8rem;
	font-size: 18px;
	font-size: 1.8rem;
	content: "";
	display: inline-block;
	font-family: FontAwesome;
	line-height: 1;
	color: #559f34;
	font-weight: normal;
}

/*
#styleguide
.modBtn03

```
<a href="#" class="modBtn03 modBtn03_voice">受講者の声</a>
<a href="#" class="modBtn03 modBtn03_form">受講のお申し込みはこちら</a>
<a href="#" class="modBtn03 modBtn03_doui">同意してダウンロード</a>
```
*/

.modBtn03 {
	display: inline-block;
	position: relative;
	width: 315px;
	padding: 12px 15px 12px 30px;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
}

.modBtn03_voice {
	background: #4867a6;
	color: #fff;
}

.modBtn03_voice:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto;
	content: "";
	display: block;
	background: url(../img/common/iconVoice_white.png) no-repeat top left;
	width: 31px;
	height: 28px;
}

.modBtn03_form {
	background: #e16b4f;
	color: #fff;
}

.modBtn03_form:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto;
	content: "";
	display: block;
	background: url(../img/common/iconArrow.png) no-repeat top left;
	width: 9px;
	height: 15px;
}

.modBtn03_doui {
	width: 400px;
	padding: 20px 15px;
	background: #e16b4f;
	color: #fff;
}

.modBtn03_small {
	width: 155px;
	display: inline-block;
	font-size: 13px;
	font-size: 1.3rem;
	background: #559f34;
	color: #fff;
	padding: 2px 10px 2px 20px;
	margin-left: 10px;
}

.modBtn03_small:before {
	position: absolute;
	left: 10px;
	top: -3px;
	bottom: 0;
	margin: auto;
	content: "";
	display: block;
	font-family: FontAwesome;
	line-height: 1;
	font-size: 17px;
	font-size: 1.7rem;
	height: 1em;
	font-weight: normal;
}

.modBtn03_glay {
	width: 205px;
	background: #4b4b4b;
	text-align: center;
}

/*
#styleguide
.modBtnForm

```
<a href="#" class="modBtnForm modBtnForm_input">入力内容確認へ</a>
<a href="#" class="modBtnForm modBtnForm_back">入力内容確認へ</a>
<a href="#" class="modBtnForm modBtnForm_submit">入力内容確認へ</a>
```
*/

.modBtnForm {
	display: inline-block;
	position: relative;
	width: 410px;
	padding: 12px 15px 12px 30px;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 24px;
	font-size: 2.4rem;
}

.modBtnForm_input {
	background: #63a648;
	color: #fff;
}

.modBtnForm_input:before {
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	display: block;
	font-family: FontAwesome;
	line-height: 1;
	font-size: 34px;
	font-size: 3.4rem;
	height: 1em;
	font-weight: normal;
}

.modBtnForm_back {
	background: #a0a0a0;
	color: #fff;
}

.modBtnForm_back:before {
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	display: block;
	font-family: FontAwesome;
	line-height: 1;
	font-size: 34px;
	font-size: 3.4rem;
	height: 1em;
	font-weight: normal;
}

.modBtnForm_submit {
	background: #e16b4f;
	color: #fff;
}

.modBtnForm_submit:before {
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	display: block;
	font-family: FontAwesome;
	line-height: 1;
	font-size: 34px;
	font-size: 3.4rem;
	height: 1em;
	font-weight: normal;
}

/*
#styleguide
.modBtnList

```
<ul class="modBtnList">
<li><a href="#" class="modBtn03 modBtn03_voice">受講者の声</a></li>
<li><a href="#" class="modBtn03 modBtn03_form">受講のお申し込みはこちら</a></li>
</ul>
<ul class="modBtnList modBtnList_type02">
<li><a href="#" class="modBtn03 modBtn03_voice">受講者の声</a></li>
<li><a href="#" class="modBtn03 modBtn03_form">受講のお申し込みはこちら</a></li>
</ul>
```
*/

.modBtnList {
	text-align: center;
}

.modBtnList li {
	display: inline-block;
	margin: 0 8px;
}

.modBtnList_type02:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.modBtnList_type02 li {
	float: left;
}

.modBtnList_type02 li:nth-child(2n) {
	float: right;
}

.modBtnList_mt30 {
	margin-top: 30px;
}

/*
#overview
modBlock
*/

/*
#styleguide
.modBlockInner
```
<section class="modBlockInner">余白が入ります</section>
<section class="modBlockInner modBlockInner_Gray">グレー背景がつきます</section>
<section class="modBlockInner modBlockInner_Green">グレー背景がつきます</section>
```
*/

.modBlockInner {
	padding: 30px 0;
}

.modBlockInner_Gray {
	background: url(../img/common/bgWhite.png) repeat top left;
}

.modBlockInner_Green {
	background: #eef5ed;
}

.modBlockCMS strong,
.modBlockCMS b {
	font-weight: bold;
}

.modBlockTxt p {
	margin-bottom: 30px;
}

.modBlockVoice {
	padding: 0 0 20px;
}

.modBlockVoice .modTitle01 {
	margin-bottom: 0px;
}

.modBlockVoice .list .voice {
	margin-bottom: 30px;
}

.modBlockVoice .list .voice tr {
	display: block;
}

.modBlockVoice .list .voice td {
	display: block;
	min-height: 80px;
	padding: 20px 10px 20px 70px;
	border-bottom: 1px solid #dcdcdc;
	background: #fff;
	position: relative;
}

.modBlockVoice .list .voice td:before {
	position: absolute;
	top: 25px;
	left: 10px;
	content: "";
	display: block;
	width: 47px;
	height: 44px;
	background: url(../img/common/iconVoice.png) no-repeat top left;
}

.modBlockVoice .list .voice td:after {
	position: absolute;
	left: 0;
	bottom: 1px;
	z-index: 100;
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	box-shadow: 0px 8px 8px -3px rgba(10, 10, 10, 0.09);
	-moz-box-shadow: 0px 8px 8px -3px rgba(10, 10, 10, 0.09);
	-webkit-box-shadow: 0px 8px 8px -3px rgba(10, 10, 10, 0.09);
}

.modBlockVoice .list .voice table + p {
	display: none;
}

.modBlockCms p {
	margin-bottom: 20px;
}

.modBlockCms p:last-child {
	margin-bottom: 0;
}

.modBlockCms strong {
	font-weight: bold;
}

.modBlockCms h1 {
	font-size: 26px;
	font-size: 2.6rem;
	margin-bottom: 10px;
	font-weight: bold;
	color: #253338;
}

.modBlockCms h2 {
	margin-bottom: 10px;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	border-bottom: 2px solid #63a648;
	color: #63a648;
}

.modBlockCms h3 {
	margin-bottom: 10px;
	font-size: 18px;
	font-size: 1.8rem;
	background: #f4fcf1;
	padding: 5px 10px;
}

.modBlockCms h4 {
	margin-bottom: 10px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}

.modBlockCms .modItBlock {
	margin-bottom: 30px;
}

.modBlockCms .modItBlock_imgL:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.modBlockCms .modItBlock_imgL .imageBlock {
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
}

.modBlockCms .modItBlock_imgR:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.modBlockCms .modItBlock_imgR .imageBlock {
	float: right;
	margin-left: 30px;
	margin-bottom: 30px;
}

.modBlockCms .modImg {
	margin-bottom: 30px;
	text-align: center;
}

.modPartsTable table {
	border: 1px solid #dddddd;
	border-collapse: separate;
	border-left: 0;
	border-radius: 4px;
}

.modPartsTable td {
	padding: 8px;
	line-height: 20px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}

.modPartsTable tr:first-child > td {
	border-top: 0;
}

.modPartsTable tr > td:first-child {
	border-left: 1px solid #dddddd;
}

.modPartsTable tr > td:last-child {
	border-right: 0;
}

.modBlockCms .modTxt {
	margin-bottom: 0;
}

.modBlockPh:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.modBlockPh .photo {
	float: left;
	width: 300px;
}

.modBlockPh .photo .caption {
	margin-top: 10px;
	font-size: 12px;
	font-size: 1.2rem;
}

.modBlockPh .detail {
	margin-left: 340px;
}

.modBlockPh .detail p {
	margin-bottom: 20px;
}

.modBlockPh .detail p:last-child {
	margin-bottom: 0;
}

.modBlockRinen {
	background: url(../img/soshiiki/back.png) no-repeat bottom left, url(../img/common/bgWhite.png) repeat bottom left;
	background-size: 100% auto,auto auto;
	padding: 50px 50px 100px 50px;
	text-align: center;
}

.modBlockRinen .title {
	position: relative;
	font-size: 24px;
	font-size: 2.4rem;
	padding-bottom: 40px;
}

.modBlockRinen .title:after {
	content: "";
	display: block;
	width: 1px;
	height: 30px;
	background: #54854c;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.modBlockRinen .txt {
	margin-bottom: 40px;
}

.modBlockTokucho {
	padding: 50px;
	background: url(../img/common/bgWhite.png) repeat top left;
}

.modBlockTokucho .mainTitle {
	font-size: 22px;
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	color: #253338;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 30px;
}

.modBlockTokucho .mainTitle:after {
	content: "";
	background: #63a648;
	width: 26px;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.modBlockTokucho .list {
	border-top: 1px solid #dcdcdc;
	counter-reset: num;
}

.modBlockTokucho .list li {
	position: relative;
	padding: 25px 0 25px 60px;
	border-bottom: 1px solid #dcdcdc;
	font-size: 16px;
	font-size: 1.6rem;
}

.modBlockTokucho .list li:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	display: block;
	counter-increment: num;
	content: counter(num) ".";
	color: #a0a0a0;
	font-size: 60px;
	font-size: 6rem;
	height: 6rem;
	line-height: 1;
}

.modBlockTokucho .list li .title {
	font-size: 22px;
	font-size: 2.2rem;
	color: #54854c;
	font-weight: bold;
}

.modBlockTokucho .list_type2 {
	border-top: 1px solid #dcdcdc;
	counter-reset: num;
}

.modBlockTokucho .list_type2 li {
	position: relative;
	padding: 25px 0 25px 60px;
	border-bottom: 1px solid #dcdcdc;
}

.modBlockTokucho .list_type2 li:before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	display: block;
	counter-increment: num;
	content: counter(num) ".";
	color: #a0a0a0;
	font-size: 40px;
	font-size: 4rem;
	height: 1em;
	line-height: 1;
}

.modBlockMap .detail {
	margin-bottom: 30px;
}

.modBlockMap .detail dl {
	margin-bottom: 10px;
}

.modBlockMap .detail dl dt {
	display: inline-block;
	min-width: 85px;
	background: #253338;
	color: #fff;
	border-radius: 3px;
	padding: 2px 10px;
	margin-right: 10px;
	text-align: center;
}

.modBlockMap .detail dl dt.name {
	padding: 2px 25px;
}

.modBlockMap .detail dl dd {
	display: inline-block;
	margin-right: 25px;
}

.modBlockMap .detail .access:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.modBlockMap .detail .access dt {
	float: left;
}

.modBlockMap .map {
	text-align: center;
	margin: 0 auto 30px;
}

/*
#overview
modTable
*/

/*
#styleguide
.modTbl01

```
<table class="modTbl01">
<tbody>
<tr>
<th>日時</th>
<td>
<dl class="day">
<dt class="num">第一回</dt>
<dd>
2017年4月19日(水)～4月21日(金)<span class="kougiMark kougiMark_end">講義終了</span>
</dd>
<dt class="num">第二回</dt>
<dd>
2017年8月23日(水)～8月25日(金)<span class="kougiMark kougiMark_boshu">募集中</span>
</dd>
</dl>
</td>
</tr>
</tbody>
</table>
```
*/

.modTbl01 {
	border-top: 1px solid #cacaca;
}

.modTbl01 th,
.modTbl01 td {
	padding: 15px 20px;
	border-bottom: 1px solid #cacaca;
}

.modTbl01 th {
	width: 120px;
	background: #54854c;
	color: #fff;
	font-weight: bold;
}

.modTbl01 td {
	background: #fff;
}

.modTbl01 .day dt {
	float: left;
	margin-right: 10px;
}

.modTbl01 .day dd {
	clear: right;
	margin-bottom: 10px;
}

.modTbl01 .day dd:last-child {
	margin-bottom: 0;
}

.modTbl01 .day .num {
	min-width: 80px;
	display: inline-block;
	background: #f6f6f6;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
}

.modTbl01 .day .kougiMark {
	margin-left: 10px;
}

/*#styleguide
.modTbl02

```
<table class="modTbl02">
<thead>
<tr>
<th>コース</th>
<th>受講対象</th>
</tr>
</thead>
<tbody>
<tr><th>昭和30年</th><td>岡山大学工学部設置の提唱と早期実現（昭和35年開学）</td></tr>
</tbody>
</table>
```
*/

.modTbl02 thead th {
	background: #54854c;
	border-right: 1px solid #7fa479;
	color: #fff;
	font-size: 14px;
	font-size: 1.4rem;
	text-align: left;
	padding: 10px 25px;
}

.modTbl02 thead th:last-child {
	border-right: none;
}

.modTbl02 tbody th,
.modTbl02 tbody td {
	padding: 20px 25px;
	border-bottom: 1px solid #cfcfcf;
}

.modTbl02 tbody th {
	width: 300px;
	background: #eef5ed;
	color: #253338;
	font-weight: bold;
}

.modTbl02 tbody td {
	border-left: 1px solid #cfcfcf;
}

/*
#styleguide
.modTbl03

```
<table class="modTbl03">
<tbody>
<tr><th>昭和30年</th><td>岡山大学工学部設置の提唱と早期実現（昭和35年開学）</td></tr>
</tbody>
</table>
```
*/

.modTbl03 tr:nth-child(2n) th,
.modTbl03 tr:nth-child(2n) td {
	background: #f0f3ef;
}

.modTbl03 th,
.modTbl03 td {
	padding: 10px 20px;
}

.modTbl03 th {
	width: 105px;
	padding-right: 0;
}

/* フォーム
***************************************/

.hisu {
	display: inline-block;
	color: #FFF;
	font-size: 11px;
	font-size: 1.1rem;
	padding: 2px 10px;
	background: #d63b3d;
	margin-right: 5px;
}

.modTblForm {
	margin: 0 0 20px;
	border-top: solid 1px #ccc;
}

.modTblForm .subTitle {
	padding: 15px;
	background: #54854c;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
}

.modTblForm th {
	width: 16em;
	padding: 25px 20px 25px 70px;
	border-bottom: solid 1px #ccc;
	position: relative;
	background: #f0f3ef;
	vertical-align: top;
}

.modTblForm th.required:before,
.modTblForm th.any:before {
	position: absolute;
	left: 20px;
	top: 28px;
	color: #FFF;
	font-size: 11px;
	font-size: 1.1rem;
	padding: 2px 10px;
}

.modTblForm th.required:before {
	content: "必須";
	background: #d63b3d;
}

.modTblForm th.any:before {
	background: #999999;
	content: "任意";
}

.modTblForm td {
	border-bottom: solid 1px #ccc;
	padding: 10px 20px;
}

.modTblForm td .bold {
	font-weight: bold;
}

.modTblForm td .parts {
	padding: 10px 0;
}

.modTblForm td .parts textarea,
.modTblForm td .parts input[type="text"],
.modTblForm td .parts input[type="email"] {
	width: 100%;
}

.modTblForm td .parts.radio_inline > div,
.modTblForm td .parts.check_inline > div {
	display: inline-block;
}

.modTblForm td .parts.name {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.modTblForm td .parts.name > div {
	width: 48.5%;
}

.modTblForm td .parts.post,
.modTblForm td .parts.tel {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.modTblForm td .parts.post .hyphen,
.modTblForm td .parts.tel .hyphen {
	width: 50px;
	padding: 10px 10px 0 10px;
	text-align: center;
}

.modTblForm td .parts.post .btn,
.modTblForm td .parts.tel .btn {
	padding: 20px 10px 0 10px;
}

.modTblForm td .parts.post > div,
.modTblForm td .parts.tel > div {
	width: 150px;
}

.modTblForm td .parts.password input {
	width: 100%;
	max-width: 300px;
}

.modTblForm td .parts.password .text {
	padding: 10px 0;
}

.modTblForm .validationError {
	color: #cc1616;
}

/*
#overview
modList
*/

/*
#styleguide
modList　modIndent

```
<ul class="modListNormal">
    <li>リスト</li>
    <li>リスト</li>
</ul>
<ol class="modListNormal">
    <li>リスト</li>
    <li>リスト</li>
</ol>
<ul class="modIndent01">
    <li>※テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li>
    <li>※リスト</li>
</ul>
<ul class="modIndent02">
    <li>１.　テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</li>
    <li>２.　リスト</li>
</ul>
<ul class="modList01">
    <li>Illustrator に原寸で配置したサイズでの解像度が350dpiになるようにしてください。</li>
    <li> 拡大縮小率70%〜141％を超えると画質が劣化するのでご注意ください。</li>
</ul>
```
*/

.modListNormal {
	margin: 0 0 0 2em;
}

ul.modListNormal li:before {
	content: "\0030fb";
	margin-left: -2em;
	display: inline-block;
	width: 2em;
	text-align: center;
}

ol.modListNormal li {
	list-style: decimal;
}

/*
#styleguide
.modlistNav01

```
<ul class="modlistNav01">
<li><a href="#anker">安全・安定運転基礎コース（２０１７年度）</a></li>
<li><a href="#anker">安全・安定運転上級コース（２０１７年度）</a></li>
<li><a href="#anker">技術力強化コース（２０１７年度）</a></li>
<li><a href="#anker">リスクマネジメントコース（２０１７年度）</a></li>
<li><a href="#anker">競争力強化マネジメントコース(２０１７年度)</a></li>
</ul>
```
*/

.modlistNav01 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.modlistNav01 li {
	width: 49%;
	margin-bottom: 10px;
	border-radius: 5px;
	background: #f4fcf1;
}

.modlistNav01 li a {
	display: block;
	text-decoration: none;
	padding: 10px;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
}

.modlistNav01 li a:before {
	content: "";
	color: #559f34;
	font-family: FontAwesome;
	line-height: 1;
	margin-right: 15px;
}

/*
#styleguide
.modlistNav02

```
<ul class="modlistNav02">
<li><a href="#anker">設備管理（三日間コース）</a></li>
<li><a href="#anker">設備管理（二日間コース）</a></li>
<li><a href="#anker">化学工学基礎</a></li>
<li><a href="#anker">安全体験(Ａコース）　</a></li>
<li><a href="#anker">安全体験(Bコース）</a></li>
<li><a href="#anker">安全体験(Cコース）</a></li>
</ul>
```
*/

.modlistNav02 {
	background: #f6f6f6;
	border-radius: 5px;
	padding: 15px 20px;
	margin-bottom: 30px;
}

.modlistNav02 li {
	display: inline-block;
	margin-right: 40px;
}

.modlistNav02 li a {
	text-decoration: none;
	font-size: 14px;
	font-size: 1.4rem;
}

.modlistNav02 li a:before {
	content: "";
	color: #ababab;
	font-family: FontAwesome;
	line-height: 1;
	margin-right: 8px;
}

.modlistNav02 li a:hover {
	opacity: 1;
	color: #000;
}

.modlistNav02 li a:hover:before {
	color: #000;
}

/*
#styleguide
.modListStep

```
<div class="modListStep">
<ul>
<li>推算法、元データの出典が表示できます。</li>
<li>使用方法はとても簡単です。<br>使い方についてはダウンロードしたエクセル表にあります。</li>
<li>ウィンドウズＸＰ以降に対応します。</li>
</ul>
</div>
```
*/

.modListStep li {
	padding: 10px 20px;
}

.modListStep li:nth-child(even) {
	background: #f3f3f3;
}

.modListStep li:first-child {
	padding-top: 0;
}

.modListStep ol {
	counter-reset: num;
}

.modListStep ol li {
	position: relative;
	padding-left: 3em;
}

.modListStep ol li:before {
	position: absolute;
	left: 20px;
	width: 3em;
	counter-increment: num;
	content: counter(num) ".";
	color: #a0a0a0;
}

.modlistNav02 {
	background: #f6f6f6;
	border-radius: 5px;
	padding: 15px 20px;
	margin-bottom: 30px;
}

.modlistNav02 li {
	display: inline-block;
	margin-right: 40px;
}

.modlistNav02 li a {
	text-decoration: none;
	font-size: 14px;
	font-size: 1.4rem;
}

.modlistNav02 li a:before {
	content: "";
	color: #ababab;
	font-family: FontAwesome;
	line-height: 1;
	margin-right: 8px;
}

.modlistNav02 li a:hover {
	opacity: 1;
	color: #000;
}

.modlistNav02 li a:hover:before {
	color: #000;
}

/* indent */

.modIndent01 li {
	text-indent: -1em;
	margin: 0 0 0 1em;
}

.modIndent02 li {
	text-indent: -2.5em;
	margin: 0 0 0 2.5em;
}

/*
#overview
other
*/

/*
#styleguide
xxxxx

```
コード
```
*/

/*↓消さないこと*/

.modLoading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, 0.8);
}

.modLoading i {
	font-size: 24px;
	font-size: 2.4rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -0.5em;
	margin-top: -0.5em;
}

/*↑消さないこと*/

@media only screen and (min-width: 1200px) {

.container {
	max-width: 1150px;
}

}

@media only screen and (max-width: 1050px) {

#side {
	width: 180px;
}

}

@media only screen and (max-width: 992px) {

.container {
	max-width: 750px;
}

.modPcOnly {
	display: none;
}

.modSpOnly {
	display: block;
}

.modTblForm td {
	padding: 10px 0;
}

}

@media only screen and (max-width: 600px) {

.modTblForm td .parts.password input {
	max-width: none;
}

}


/*# sourceMappingURL=maps/common.css.map */