@charset "UTF-8";

/* --------------------------------------------------------------

	清光学園 図書館 [各ページスタイルCSS]
	/common/css/style.css

-------------------------------------------------------------- */

/* ==================================================
	トップページ
================================================== */

/* 独自の就職支援システム
------------------------------------------ */
#top #system {
	margin-top: 10px;
}
#top #system h2 {
	border-bottom: none;
	margin: 0 0 1.5em 0;
	padding: 0;
}

@media screen and (min-width: 741px) {
#top #system .fr {
	margin: 0 0 20px 20px;
}
#top #system .fc {
	padding-top: 30px;
}
}

@media screen and (max-width: 740px) {
#top #system .fr {
	width: 45%;
	margin: 0 0 1em 1em;
}
#top #system .fc {
	padding-top: 1em;
}
}

/* 卒業後のサポート
------------------------------------------ */
@media screen and (min-width: 741px) {
#top #support {
	background: url(../../images/top_support_bg.png) left center repeat-y;
}
#top #support dl {
	background: url(../../images/top_support_ttl.png) 27px center no-repeat;
}
#top #support dl dt {
	float: left;
	width: 129px;
	text-indent: -9999px;
}
#top #support dl dd {
	padding-left: 149px;
}
}

#top #support dl dd p {
	margin-top: 0.5em;
}
#top #support dl dd em {
	font-size: 115%;
	color: #60a28e;
}

@media screen and (max-width: 740px) {
#top #support dl dt {
	background: #60a28e;
	padding: 1em;
	margin-bottom: 1em;
}
#top #support dl dt img {
	width: 50%;
	height: auto;
}
}


/* ==================================================
	取組の紹介
================================================== */

#shien .notes {
	margin-top: 2em;
}
#shien .notes dt {
	color: #60a28e;
	margin-bottom: 0.5em;
}

#shien #outline_box {
	margin-top: 2em;
	font-size: 108%;
}
#shien #outline_box p {
	padding: 0.75em 0 0.6em;
	text-align: center;
	line-height: 1.8;
	margin-bottom: 1em;
}
#shien #outline_box .fl {
	width: 315px;
	background: #ece2f4;
}
#shien #outline_box .fr {
	width: 315px;
	background: #e5f3f9;
}
#shien #outline_box ul {
	background: #dfece8;
	padding: 1.25em 2em 1em;
}
#shien #outline_box ul li {
	color: #60a28e;
}
#shien #outline_box ul li a {
	padding-left: 0.3em;
}

@media screen and (max-width: 740px) {
#shien #outline_box .fl,
#shien #outline_box .fr {
	float: none;
	width: 100%;
}
#shien #outline_box .fr {
	margin-bottom: 0;
}
#shien #outline_box .tc {
	margin: 0;
}
#shien #outline_box .tc img {
	width: 4%;
}
#shien #outline_box ul {
	padding: 1.25em 1em 1em;
}
#shien #outline_box ul li {
	margin-left: 1.3em;
}
#shien #outline_box ul li {
	text-indent: -1.3em;
}
}


/* ==================================================
	在学生向け利用案内
================================================== */

@media screen and (min-width: 741px) {
#student #system {
	background: url(../../images/student/system_bg.png) left top no-repeat;
	height: 216px;
}
#student #system p {
	width: 336px;
	margin-left: 280px;
}
#student #system .txt {
	padding-top: 40px;
}
}

#student .flow .cassette {
	margin-top: 1em;
	border: solid 3px #dfdfdf;
	padding-bottom: 15px;
}
#student .flow .cassette .img {
	float: left;
	padding-left: 10px;
}
#student .flow .cassette h5,
#student .flow .cassette .txt {
	margin-left: 224px;
	width: 390px;
}
#student .flow .cassette.w_all h5,
#student .flow .cassette.w_all .txt {
	margin-left: 20px;
	margin-right: 20px;
	width: auto;
}
#student .flow .cassette h5 {
	margin-top: 1em;
}
#student .flow .arw {
	text-align: center;
}

@media screen and (max-width: 740px) {
#student #system {
	margin-top: 1em;
	background: #e7f1ee;
	padding: 1em 2em 2em;
}
#student #system .btn {
	text-align: center;
}
#student .flow .cassette .img {
	float: none;
	width: auto;
	text-align: center;
	padding-left: 0;
	padding-top: 0.5em;
}
#student .flow .cassette .img img {
	width: 62%;
}
#student .flow .cassette h5 {
	float: none;
	width: auto;
	margin-left: 1em;
	margin-right: 1em;
}
#student .flow .cassette .txt {
	clear: both;
	float: none;
	width: auto;
	padding-top: 1em;
	margin-left: 1em;
	margin-right: 1em;
}
#student .flow .cassette.w_all h5,
#student .flow .cassette.w_all .txt {
	float: none;
	margin-left: 1em;
	margin-right: 1em;
	width: auto;
}
#student .flow .cassette.w_all .txt {
	padding-top: 0;
}
#student .flow .arw img {
	width: 5%;
	height: auto;
}
}


/* ==================================================
	卒業生向け利用案内
================================================== */

@media screen and (min-width: 741px) {
#graduate #system {
	background: url(../../images/graduate/system_bg.png) left top no-repeat;
	height: 251px;
}
#graduate #system p {
	width: 336px;
	margin-left: 280px;
}
#graduate #system .txt {
	padding-top: 20px;
}
#graduate .flow .btn a {
	display: block;
	width: 336px;
	margin: 0 auto;
}
}

#graduate .flow .cassette {
	margin-top: 1em;
	border: solid 3px #dfdfdf;
	padding-bottom: 15px;
}
#graduate .flow .cassette .img {
	float: left;
	padding-left: 10px;
}
#graduate .flow .cassette h5,
#graduate .flow .cassette .txt {
	margin-left: 224px;
	width: 390px;
}
#graduate .flow .cassette.w_all h5,
#graduate .flow .cassette.w_all .txt {
	margin-left: 20px;
	margin-right: 20px;
	width: auto;
}
#graduate .flow .cassette h5 {
	margin-top: 1em;
}
#graduate .flow>p {
	margin-top: 2em;
}
#graduate .flow .arw {
	margin-top: 1em;
	text-align: center;
}

@media screen and (max-width: 740px) {
#graduate #system {
	margin-top: 1em;
	background: #e7f1ee;
	padding: 1em 2em 2em;
}
#graduate #system .btn {
	text-align: center;
}
#graduate .flow .cassette {
}
#graduate .flow .cassette .img {
	float: none;
	width: auto;
	text-align: center;
	padding-left: 0;
	padding-top: 0.5em;
}
#graduate .flow .cassette .img img {
	width: 62%;
}
#graduate .flow .cassette h5 {
	float: none;
	width: auto;
	margin-left: 1em;
	margin-right: 1em;
}
#graduate .flow .cassette .txt {
	clear: both;
	float: none;
	width: auto;
	padding-top: 1em;
	margin-left: 1em;
	margin-right: 1em;
}
#graduate .flow .cassette.w_all h5,
#graduate .flow .cassette.w_all .txt {
	float: none;
	margin-left: 1em;
	margin-right: 1em;
	width: auto;
}
#graduate .flow .cassette.w_all .txt {
	padding-top: 0;
}
#graduate .flow .arw img {
	width: 5%;
	height: auto;
}
#graduate .flow .btn img {
	width: 86%;
}
}

@media screen and (min-width: 741px) {
.flow .btn a:hover {
	background: #dfece8;
}
.flow .btn a:hover img {
	opacity: 1;
}
}