@charset "utf-8";

/******************************
-------------------------------
Top レイアウト設定
-------------------------------
=1: Header
=2: Contents
=3: ContentsMenu
=4: Info
=5: QRcode
=6: Banner
*******************************/

/*------------------------------
=1: Header
------------------------------*/
#title_Box {
	background: url(../img/bg_header.png) left 15px no-repeat;
}

#title_Box h1 {
	width: 320px;
	height: 24px;
	padding-top: 15px;
	text-indent: -9999px;
}

#title_Box p {
	padding-top: 16px;
	margin-left: 60px;
	line-height: 1.2em;
	font-size: 10px;
}

#title_Box h2.top_title {
	width: 498px;
	height: 38px;
	margin-top: 3px;
	margin-left: 60px;
	text-indent: -9999px;
	background: url(../img/title_kokoro.png) no-repeat;
}


/*------------------------------
=2: Contents
------------------------------*/
ul#tabArea {
	width: 830px;
}

ul#tabArea li {
	width: 120px;
	height: 39px;
	list-style: none;
	text-indent: -9999px;
	float: right;
}

ul#tabArea li.school {
	background: url(../img/top/top_btn_school.png) left -40px no-repeat;
}

li.parent a {
	display: block;
	width: 120px;
	height: 39px;
	background: url(../img/top/top_btn_parent.png) left top no-repeat;
}

li.parent a:hover {
	background: url(../img/top/top_btn_parent.png) left -40px no-repeat;
}

#mainContArea {
	position: relative;
	top: -5px;
	clear: both;
	width: 830px;
	margin: 0 35px;
}

.tcontTop {
	height: 27px;
	background: url(../img/top/top_bg_cont_top.png) left bottom no-repeat;
}

#tcontMiddle {
	background: url(../img/bg_cont_mid.png) 1px top repeat-y;
}

.tcontBottom {
	clear: both;
	height: 32px;
	background: url(../img/bg_cont_bot.png) 1px top no-repeat;
}

#mainContent {
	width: 710px;
	margin: 0 33px;
	padding: 20px 27px 0;
	background: url(../img/top/top_bg_content.png) left top no-repeat;
}


/*------------------------------
=3: ContentsMenu
------------------------------*/
/* メインメニュー */
#mainMenuArea {
	width: 692px;
	height: 330px;
	margin: 0 9px 20px;
}

h3.catch {
	width: 448px;
	height: 330px;
	float: left;
}

ul#mainMenu {
	width: 244px;
	height: 330px;
	float: left;
}

ul#mainMenu li {
	list-style: none;
}

ul#mainMenu li a {
	display: block;
	width: 244px;
	height: 110px;
	text-indent: -9999px;
}

ul#mainMenu li a.mental {
	background: url(../img/top/top_menu_mental.png) no-repeat;
}

ul#mainMenu li a.possible {
	background: url(../img/top/top_menu_possible.png) no-repeat;
}

ul#mainMenu li a.consult {
	background: url(../img/top/top_menu_consult.png) no-repeat;
}

/* マウスオーバー時 */
ul#mainMenu li a.mental:hover,
ul#mainMenu li a.possible:hover,
ul#mainMenu li a.consult:hover {
	background-position: left -110px;
}
/* もっと知りたいとき */
#learnArea {
	clear: both;
}

h2.learn {
	width: 696px;
	height: 48px;
	margin: 0 0 4px 10px;
	text-indent: -9999px;
	background: url(../img/top/top_subtitle_learn.png) no-repeat;
}

ul#learnCont {
	height: 244px;
	margin-left: 10px;
}

ul#learnCont li {
	width: 168px;
	height: 108px;
	margin: 0 7px 7px 0;
	list-style: none;
	float: left;
}

ul#learnCont li a {
	display: block;
	width: 168px;
	height: 108px;
	text-indent: -9999px;
}

ul#learnCont li a.sos {
	background: url(../img/top/top_menu_sos.png) no-repeat;
}

ul#learnCont li a.uwasa {
	background: url(../img/top/top_menu_uwasa.png) no-repeat;
}

ul#learnCont li a.expart {
	background: url(../img/top/top_menu_expart.png) no-repeat;
}

ul#learnCont li a.interview1 {
	background: url(../img/top/top_menu_interview1.png) no-repeat;
}

ul#learnCont li a.story {
	background: url(../img/top/top_menu_story.png) no-repeat;
}

ul#learnCont li a.self {
	background: url(../img/top/top_menu_self.png) no-repeat;
}

ul#learnCont li a.access {
	background: url(../img/top/top_menu_access.png) no-repeat;
}

ul#learnCont li a.interview2 {
	background: url(../img/top/top_menu_interview2.png) no-repeat;
}

/* マウスオーバー時 */
ul#learnCont li a.sos:hover,
ul#learnCont li a.uwasa:hover,
ul#learnCont li a.expart:hover,
ul#learnCont li a.story:hover,
ul#learnCont li a.interview1:hover,
ul#learnCont li a.self:hover,
ul#learnCont li a.access:hover,
ul#learnCont li a.interview2:hover {
	background-position: left -108px;
}

/*------------------------------
=4: Info
------------------------------*/
#newsBox {
	width: 509px;
	margin-right: 20px;
	float: left;
}

h3#newstitle {
	width: 518px;
	height: 30px;
	text-indent: -9999px;
	background: url(../img/top/top_title_info.png) no-repeat;
}

#newsBox dl {
	width: 476px;
	padding: 0 26px 0 16px;
	margin-bottom: 0;
	font-size: 75%;
	line-height: 1.2em;
	background: url(../img/top/top_bg_info_mid.png) repeat-y;
}

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

#newsBox dl dd {
	width: 30px;
	padding: 5px 5px 0 0;
	float: left;
}

#newsBox dl dt {
	width: 439px;
	padding: 5px 2px 0 0;
	float: left;
}

dd.line,
dt.line {
	height: 1px;
	padding: 0;
	border-bottom: 1px dotted #000000;
}

#newsBox .boxbtm {
	clear: both;
	width: 509px;
	height: 10px;
	background: url(../img/top/top_bg_info_bot.png) left top no-repeat;
}
	

#newsBox a {
	color: #005cad;
	text-decoration: none;
}


/*------------------------------
=5: QRcode
------------------------------*/
#qrArea {
	width: 280px;
	float: left;
}

.qrTop {
	height: 5px;
	background: url(../img/top/top_bg_qrtop.png) left bottom no-repeat;
}

.qrMiddle {
	background: url(../img/top/top_bg_qrmid.png) repeat-y;
}

.qrMiddle img {
	display: block;
	width: 74px;
	height: 74px;
	margin: 13px 10px 12px;
	float: left;
}

.qrMiddle p {
	padding: 23px 13px 24px 0;
	*padding: 23px 13px 23px 0;
	font-size: 75%;
	line-height: 1.5em;
}

.qrBottom {
	clear: both;
	height: 5px;
	margin-top: 0;
	background: url(../img/top/top_bg_qrbot.png) left top no-repeat;
}


/*------------------------------
=6: Banner
------------------------------*/
#bannerArea {
	clear: both;
	width: 800px;
	padding: 10px 50px;
	margin: 0 auto;
	*margin-top: -16px;
	background-color: #e1eaf1;
}

#bannerArea img {
	margin-right: 8px;
}