@charset "utf-8";
/*====================================================
 *
 *
 *   岡山Webハイスクール専用CSS
 *
 *
====================================================*/


/*----------------------------------------------------
    ブラウザ設定初期化
----------------------------------------------------*/
html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, th, td {
	margin: 0;
	padding: 0;
}
address, caption, th {
	font-style: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: inherit;
}
caption, th {
	text-align: left;
}
q:before, q:after {
	content: "";
}
object, embed {
	vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
img {
	border: 0;
	line-height: 0;
	vertical-align: bottom;
}
.ie7 img {
	-ms-interpolation-mode: bicubic;
}
li {
	list-style-type: none;
}


/*----------------------------------------------------
    HTML5 elements for lte IE8
----------------------------------------------------*/
article, footer, header, nav, section {
	display: block;
}


/*----------------------------------------------------
    文字サイズ統一
----------------------------------------------------*/
body {
	line-height: 1.5;
	font-size: 14px;
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
	color: #333;
}


/*----------------------------------------------------
    基本設定、リンクカラーなど
----------------------------------------------------*/
body {
	background: #fff;
}
a {
	background-color: transparent;
}
a:link,
a:visited {
	color: $textColor01;
	text-decoration: none;
}
a:hover, a:active {
	outline: 0;
	text-decoration: underline;
}
b, strong {
	font-weight: bold;
}
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}
small {
	font-size: 80%;
}
sub, sup {
	position: relative;
	line-height: 0;
	vertical-align: baseline;
	font-size: 75%;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
svg:not(:root) {
	overflow: hidden;
}


/*----------------------------------------------------
    フォームのノーマライズ
----------------------------------------------------*/
button, input, select, textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}
button {
	overflow: visible;
}
button, input {
	line-height: normal;
}
button, select {
	text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}
button[disabled], html input[disabled] {
	cursor: default;
}
input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
input[type="search"] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	padding: 0;
	border: 0;
}
input {
	line-height: normal;
}
textarea {
	overflow: auto;
	vertical-align: top;
}


/*----------------------------------------------------
    common width
----------------------------------------------------*/
#header, #footer, #contents {
	width: 100%;
}
#header > .wrap,
#footer > .wrap,
#contents > .wrap,
.secPoint > .wrap,
.secFeature > .wrap,
.secMore .list,
.secInquiry.typeB {
	width: 1020px;
	margin: 0 auto;
}
/*----------------------------------------------------
    #header
----------------------------------------------------*/
#header {
	position: relative;
	width: 100%;
	height: 680px;
	background: #fdfdfd;
	overflow: hidden;
}
@media screen and (max-width: 1020px) {
	#header {
		width: 1020px;
	}
}

#header > .wrap {
	position: absolute;
	left: 50%;
	width: 1120px;
	height: 680px;
	margin-left: -560px;
}
/*
@media screen and (max-width: 1120px) {
	#header > .wrap {
		left: 0;
		margin-left: 0;
	}
}
*/

/*  #header > .logo
----------------------------------------------------*/
#header > .wrap .logo {
	position: absolute;
	z-index: 5;
	top: 20px;
	right: 60px;
}

/*  #header > .title
----------------------------------------------------*/
#header > .wrap .title {
	position: absolute;
	z-index: 5;
	top: 145px;
	right: 0;
}

/*  #header > #hdLogo
----------------------------------------------------*/
#header .copy {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0;
	width: 1180px;
	margin-left: -630px;
}

/*  #header > #hdLogo
----------------------------------------------------*/
#header .secInquiry.typeA {
	position: absolute;
	top: 390px;
	right: 0;
	z-index: 5;
	width: 653px;
	padding: 14px 10px 14px 10px;
	border: 4px solid #dfdfdf;
	background-color: #fff;
	color: #000;
}
#header .secInquiry.typeA > .wrap {
	float: left;
	position: relative;
}
#header .secInquiry.typeA > .wrap:before {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	left: 0;
	width: 61px;
	height: 52px;
	background: url(../img/icn_human01.png) no-repeat 0 0;
}
#header .secInquiry.typeA .head {
	margin: 3px 0 8px 72px;
	line-height: 1;
	font-size: 18px;
	font-weight: bold;
}
#header .secInquiry.typeA .text {
	margin-left: 72px;
	line-height: 1;
}
#header .secInquiry.typeA .tel {
	float: right;
	padding-left: 34px;
	background: url(../img/icn_tel01.png) no-repeat 0 4px;
	line-height: 46px;
	color: #f79c27;
	font-size: 30px;
	font-weight: bold;
}


/*----------------------------------------------------
    #footer
------------------------------------------------------*/
#footer {
	background-color: #f1f9e3;
}
#footer > .wrap {
	padding: 20px 0;
}
#footer > .wrap:after {
	content: '';
	display: block;
	clear: both;
}


/*  #footer > .copyright
----------------------------------------------------*/
#footer .copyright {
	padding: 6px;
	background: url(../img/bg_pattern01.png) repeat 0 0;
	line-height: 1;
	color: #FFF;
	text-align: center;
}

/*  #footer > .ftAddress
----------------------------------------------------*/
#footer .ftAddress {
	float: left;
	margin-left: 35px;
}

/*  #footer > .ftLogo
----------------------------------------------------*/
#footer .ftLogo {
	float: left;
}


/*----------------------------------------------------
    Page Top
----------------------------------------------------*/
.secPageTop {
	clear: both;
	position: relative;
	width: 100%;
	padding-top: 100px;
}

/*  .secPageTop > #pageTop
----------------------------------------------------*/
#pageTop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	display: block;
	outline: none;
}
.ie6fix #pageTop {
	position: absolute;
	right: 0;
	bottom: 0;
}


/*----------------------------------------------------
    .secMessage
----------------------------------------------------*/
.secMessage {
	position: relative;
	padding: 111px 0 67px;
	background: url(../img/bg_pattern05.png) repeat 50% 0;
}
.secMessage:before {
	content: '';
	display: block;
	position: absolute;
	top: 30px;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-left: -30px;
	background: url(../img/icn_pc01.png) no-repeat 0 0;
}
.secMessage:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 5;
	bottom: 0px;
	left: 50%;
	width: 80px;
	height: 30px;
	margin-left: -40px;
	background: url(../img/icn_arrow01.png) no-repeat 0 0;
}
.secMessage .text {
	text-align: center;
	margin-bottom: 35px;
}
.secMessage .link a {
	display: block;
	width: 341px;
	height: 36px;
	margin: 0 auto;
	padding-top: 8px;
	border-radius: 5px;
	text-align: center;
	background-color: #fff;
	-webkit-box-shadow: #537C0E 3px 3px 0px 2px;
	box-shadow: #537C0E 3px 3px 0px 2px;
	-webkit-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}
.secMessage .link a:hover {
	background-color: #daefb6;
}


/*----------------------------------------------------
    .secPoint
----------------------------------------------------*/
.secPoint {
	position: relative;
	padding-top: 86px;
	padding-bottom: 140px;
	background: url(../img/bg_pattern03.png) repeat 0 0;
	color: #111;
}
.secPoint:before,
.secPoint:after {
	content: '';
	display: block;
	position: absolute;
	top: -30px;
	width: 50%;
	height: 30px;
	background: url(../img/bg_pattern03.png) repeat 0 0;
}
.secPoint:before {
	left: 0;
}
.secPoint:after {
	right: 0;
}
.secPoint > .wrap > .head {
	position: relative;
	margin-bottom: 45px;
	text-align: center;
}
.secPoint > .wrap > .head:before,
.secPoint > .wrap > .head:after {
	content: '';
	display: block;
	position: absolute;
	top: 33px;
	width: 220px;
	height: 0;
	border-bottom: 1px solid #aaa;
}
.secPoint > .wrap > .head:before {
	left: 0;
}
.secPoint > .wrap > .head:after {
	right: 0;
}

/*  .secPoint > .section
----------------------------------------------------*/
.secPoint .section {
	margin: 0 15px 28px;
	padding-bottom: 40px;
	border-bottom: 1px dotted #aaa;
}
.secPoint .section:after {
	content: '';
	display: block;
	clear: both;
}

/*  .secPoint > .section > .pointNumber
----------------------------------------------------*/
.secPoint .section .pointNumber {
	position: relative;
}
.secPoint .section .pointNumber .number {
	position: absolute;
	bottom: 0;
	right: 0;
}
.secPoint .section.type01 .pointNumber,
.secPoint .section.type03 .pointNumber,
.secPoint .section.type05 .pointNumber {
	float: left;
}
.secPoint .section.type02 .pointNumber,
.secPoint .section.type04 .pointNumber {
	text-align: right;
	float: right;
}

/*  .secPoint > .section > .detail
----------------------------------------------------*/
.secPoint .section .detail {
	width: 600px;
}
.secPoint .section.type01 .detail,
.secPoint .section.type03 .detail,
.secPoint .section.type05 .detail {
	float: right;
}
.secPoint .section.type02 .detail,
.secPoint .section.type04 .detail {
	float: left;
}
.secPoint .section .detail > .head {
	margin-bottom: 12px;
}

/*  .secPoint > .section.type01
----------------------------------------------------*/
.secPoint .section.type01 {
}
.secPoint .section.type01 .pointNumber {
	width: 342px;
}
.secPoint .section.type01 .pointNumber .number {
	right: 0;
}
.secPoint .section.type01 .detail {
	width: 600px;
}

/*  .secPoint > .section.type02
----------------------------------------------------*/
.secPoint .section.type02 {
}
.secPoint .section.type02 .pointNumber {
	width: 348px;
}
.secPoint .section.type02 .pointNumber .number {
	left: 0;
}

/*  .secPoint > .section.type03
----------------------------------------------------*/
.secPoint .section.type03 {
}
.secPoint .section.type03 .pointNumber {
	width: 363px;
}
.secPoint .section.type03 .pointNumber .number {
	right: 0;
}
.secPoint .section.type03 .detail {
	padding-top: 106px;
}

/*  .secPoint > .section.type04
----------------------------------------------------*/
.secPoint .section.type04 {
}
.secPoint .section.type04 .pointNumber {
	width: 351px;
}
.secPoint .section.type04 .pointNumber .number {
	left: 0;
}

/*  .secPoint > .section.type05
----------------------------------------------------*/
.secPoint .section.type05 {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.secPoint .section.type05 .pointNumber {
	width: 351px;
}
.secPoint .section.type05 .pointNumber .number {
	right: 0;
}


/*----------------------------------------------------
    .secFeature
----------------------------------------------------*/
.secFeature {
	padding: 60px 0;
	background: url(../img/bg_pattern04.png) repeat 0 0;
}
.secFeature > .wrap > .head {
	margin-bottom: 30px;
	text-align: center;
}

/*  .secFeature > .section
----------------------------------------------------*/
.secFeature .section {
	position: relative;
	border: 5px solid #fbd691;
	background-color: #fff;
}
.secFeature .section > .head {
	margin-bottom: 24px;
	margin-left: 82px;
}
.secFeature .section .picture {
	margin-bottom: 18px;
}
.secFeature .section .point {
	padding-left: 3px;
}
.secFeature .section .point dt {
	clear: both;
	float: left;
}
.secFeature .section .point dd {
	margin-bottom: 24px;
	margin-left: 48px;
}
.secFeature .section .point dd:last-child {
	margin-bottom: 0;
}
.secFeature .section > .number {
	position: absolute;
	top: -13px;
	width: 70px;
	height: 55px;
	padding-top: 17px;
	background-color: #f8a743;
	text-align: center;
}
.secFeature .section > .number:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 0 8px;
	border-color: transparent transparent transparent #EE8709;
}

/*  .secFeature > .section.type01
----------------------------------------------------*/
.secFeature .section.type01 {
	float: left;
	width: 452px;
	margin-bottom: 50px;
	padding: 18px 14px;
}

/*  .secFeature > .section.type02
----------------------------------------------------*/
.secFeature .section.type02 {
	float: right;
	width: 452px;
	margin-bottom: 50px;
	padding: 18px 14px;
}

/*  .secFeature > .section.type03
----------------------------------------------------*/
.secFeature .section.type03 {
	clear: both;
	padding: 20px 15px 15px;
}
.secFeature .section.type03 > .head {
	float: left;
}
.secFeature .section.type03 > .text {
	float: left;
	margin-left: 24px;
	line-height: 24px;
}

/*  .secFeature > .secMap
----------------------------------------------------*/
.secMap {
	width: 100%;
	height: 420px;
}


/*----------------------------------------------------
    .secMore
----------------------------------------------------*/
.secMore {
	margin-bottom: 105px;
}
.secMore .head {
	margin-bottom: 40px;
	padding: 30px 0;
	background-color: #77be01;
	text-align: center;
}
.secMore .list {
}
.secMore .list:after {
	content: '';
	display: block;
	clear: both;
}
.secMore .list li {
	float: left;
	position: relative;
	width: 225px;
	height: 225px;
}
.secMore .list li + li {
	margin-left: 40px;
}
.secMore .list li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.secMore .list li a img {
	position: absolute;
}
.secMore .list li a .text {
	z-index: 3;
}
.secMore .list li a .picture {
	z-index: -1
}
.secMore .list li a:before {
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: url(../img/img_overlay01.png) no-repeat 0 0;
	-webkit-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
.secMore .list li a:hover:before {
	opacity: 0;
}
.ie8 .secMore .list li a:hover:before {
	display: none;
}


/*----------------------------------------------------
    .secInquiry
----------------------------------------------------*/

/*  .typeA
----------------------------------------------------*/
.secInquiry.typeA {
	
}

/*  .typeB
----------------------------------------------------*/
.secInquiry.typeB {
	position: relative;
	padding: 5px;
	background: url(../img/bg_pattern02.png) repeat 0 0;
}
.secInquiry.typeB > .wrap {
	padding: 22px 35px;
	background: url(../img/bg_pattern03.png) repeat 0 0;
}
.secInquiry.typeB > .wrap:after {
	content: '';
	display: block;
	clear: both;
}
.secInquiry.typeB > .wrap .head {
	margin-bottom: 18px;
}
.secInquiry.typeB > .wrap .text {
	float: left;
}
.secInquiry.typeB > .wrap .tel {
	float: left;
	margin-left: 34px;
	padding-left: 45px;
	background: url(../img/icn_tel02.png) no-repeat 0 50%;
	line-height: 1;
	color: #f79b26;
	font-size: 42px;
	font-weight: bold;
}
.secInquiry.typeB > .wrap .picture {
	position: absolute;
	bottom: 0;
	right: 65px;
}


/*----------------------------------------------------
    common style
----------------------------------------------------*/

/*  .ulTypeA
----------------------------------------------------*/
.ulTypeA {
	padding-top: 5px;
}
.ulTypeA li {
	position: relative;
	margin-top: 24px;
	padding-left: 12px;
}
.ulTypeA li:first-child {
	margin-top: 0;
}
.ulTypeA li:before {
	content: '';
	display: block;
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 4px;
	height: 4px;
	border: 1px solid #649510;
	border-radius: 50%;
}