@charset "UTF-8";
/* CSS Document */

/*
============================== index_page ==============================
*/



/* logomark
 =======================================*/

#logomark {
		width: 720px;
		height: 240px;
		margin: 0 auto;
}

#logo {
		float: left;
		width: 390px;
		height: 200px;
		position: relative;
		top: 26px;
		text-align: left;
}

#mark {
		float: right;
		position:relative;
		top: 25px;
}


/* #logomarkに対するフロート指定を解除するcssハックの始まり
　------------------------------ */

#logomark:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
}
#logomark {
		display: inline-table;
}
/* MacIE begin \*/
* html #logomark {
		height: 1%;
}
#logomark {
		display: block;
}
/* MacIE end */

/* #logomarkに対するフロート指定を解除するcssハックの終わり
　------------------------------ */

#logo .upbar {
		height: 25px;
		background: url(../opta/main_e/grade_obi_goright.jpg) no-repeat center top;
}

#logo .upbar span {
		display: none;
}


#logo .lowbar {
		height: 25px;
		background: url(../opta/main_e/grade_obi_goleft.jpg) no-repeat center bottom;
}

#logo .lowbar span {
		display: none;
}

#logomark #line {
		clear: both;
		width: 720px;
		height: 33px;
		background: url(../opta/main_e/1_1_gray_k25.gif) repeat-x 50% 100%;
		margin: 0 auto;
}


#logomark #line span {
		display: none;
}


/* content
 =======================================*/
#content {
		width: 780px;
		clear: both;
		text-align: center; /*--WIN IE用に追加--*/
}


/* content_top
 ------------------------------------*/

#content_top {
		width: 780px;
		height: auto;
		text-align: center;
		padding: 5px 0 10px 0;
}


/* 角丸枠設定始まり
 --------------------------------- */

#content_top .line_left {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_4.gif) repeat-y left;
		text-align: left;
		margin: 0 auto;
}

#content_top .line_bottom {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_8.gif) repeat-x bottom;
		text-align: left;
}

#content_top .line_top {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_2.gif) repeat-x top;
		text-align: left;
}

#content_top .line_right {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_6.gif) repeat-y right;
		text-align: left;
}

#content_top .round_left_bottom {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_7.gif) no-repeat left bottom;
		text-align: left;
}

#content_top .round_right_bottom {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_9.gif) no-repeat right bottom;
		text-align: left;
}

#content_top .round_left_top {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_1.gif) no-repeat left top;
		text-align: left;
}

#content_top .round_right_top {
		width: 720px;
		height: auto;
		background: url(../opta/main_e/mado_siro_waku_aomidori/mado_siro_aomidoriwaku_images/mado_siro_aomidoriwaku_3.gif) no-repeat right top;
		text-align: left;
}

/* 角丸枠設定おわり
 --------------------------------- */


#content_top .round_right_top ul {
		width: 690px;
		height: auto;
		padding: 10px 0 10px 15px;
		list-style: none;
}

#content_top .round_right_top ul li {
		margin: 10px 0 10px 0;
}

#content_top .round_right_top ul span.new {
		display: inline-block;
		height: 23px;
		margin: 10px 0 3px 5px;
		padding: 0 0 7px 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_midori.gif) no-repeat 0 0;
}

/*\*/
* html #content_top .round_right_top ul span.new {padding-bottom: 0px;}
/* For Win IE */
/* */

/*--For Win IEハックをWin IE 6 用に追加、元の設定のpadding: 0 0 7px 18px;では
、Win IE 6で下のddの文章との間が開き過ぎなのでこのハックを設定すると間がなくなり
きれいに見えるようになった
--*/


#content_top .round_right_top ul span.reguler {
		height: 13px;
		margin: 10px 0 3px 5px;
		padding: 0 0 0 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_midori.gif) no-repeat 0 50%;
}


#content_top .round_right_top ul span.left {
		margin: 10px 0 10px 0;
		padding: 0 0 0 30px;
		font-size: 1.1em;
}

#content_top .round_right_top ul span.left a {
		color: #0000FF;
}

#content_top .round_right_top ul span.left em {
		color: #FF0000;
}

#content_top .round_right_top ul span.left a:link,
#content_top .round_right_top ul span.left a:visited,
#content_top .round_right_top ul span.left a:active {
		text-decoration: none;
}

#content_top .round_right_top ul span.left a:hover {
		text-decoration: underline;
		color: #FF0000;
}



/* content_update
 ------------------------------------*/
#content_update {
 		width: 722px;
		height: auto;
		margin: 0 auto;
}


/*  For Win IEハックをとったらWin IE 6 上で　#content_updateがcenterになった*/


#update_left {
		float: left;
		width: 236px;
		height: auto;
		text-align: left; /*--WIN IE用に追加--*/
}

#update_midle {
		float: left;
		width: 248px;
		height: auto;
		padding-bottom: 30px;
		border-left: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		text-align: center; /*--WIN IE用に追加--*/
}

#update_right {
		float: right;
		width: 236px;
		height: auto;
}

/* #content_updateに対するフロート指定を解除するcssハックの始まり
　------------------------------ */

#content_update:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
}
#content_update {
		display: inline-table;
}
/* MacIE begin \*/
* html #content_update {
		height: 1%;
}
#content_update {
		display: block;
}
/* MacIE end */

/* #content_updateに対するフロート指定を解除するcssハックの終わり
　------------------------------ */
		


/* #update_left部分
　------------------------------ */

#update_left .jyoho_title {
		width: 226px;
		height: 22px;
		padding-right: 10px;
}

/*  For Win IEハックはWin IE 6 上で　あってもなくても関係ない*/


#update_left dl {
		width: 224px;
		height: auto;
		padding: 5px 0 5px 0px;
		border: 1px solid #CCCCCC;
		background-color: #FFFFE0;
		text-align: left;
}

#update_left dl dt.new {
		height: 20px;
		margin: 0 0 3px 5px;
		padding: 0 0 7px 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_oudo2.gif) no-repeat 0 0;
}

/*\*/
* html #update_left dl dt.new {padding-bottom: 0px;}
/* For Win IE */
/* */

/*--For Win IEハックをWin IE 6 用に追加、元の設定のpadding: 0 0 7px 18px;では
、Win IE 6で下のddの文章との間が開き過ぎなのでこのハックを設定すると間がなくなり
きれいに見えるようになった
--*/


#update_left dl dt.reguler {
		height: 13px;
		margin: 0 0 3px 5px;
		padding: 0 0 0 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_oudo2.gif) no-repeat 0 50%;
}


#update_left dl dd {
		margin: 0 6px 10px 0;
		padding: 0 0 0 23px;
		font-size: 1.1em;
}

#update_left dl dd a {
		color: #000000;
}

#update_left dl dd em {
		color: #FF0000;
}

#update_left dl dd a:link,
#update_left dl dd a:visited,
#update_left dl dd a:active {
		text-decoration: none;
}

#update_left dl dd a:hover {
		text-decoration: underline;
		color: #FF0000;
}



/* #midle_uper部分
　------------------------------ */

#midle_uper {
		width: 248px;
		height: auto;
}


#midle_uper .jyoho_title {
		width: 226px;
		height: 22px;
		margin: 0 auto;
}

/*  For Win IEハックをとったらWin IE 6 上で　#midle_uper .jyoho_titleがcenterになった*/

#midle_uper dl {
		width: 224px;
		height: auto;
		padding: 5px 0 5px 0px;
		border: 1px solid #CCCCCC;
		background-color: #FFFFE0;
		text-align: left;
		margin: 0 auto;
}

/*  For Win IEハックをとったらWin IE 6 上で　#midle_uper dlがcenterになった*/


#midle_uper dl dt.new {
		height: 20px;
		margin: 0 0 3px 5px;
		padding: 0 0 7px 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_mizuiro.gif) no-repeat 0 0;
}

/*\*/
* html #midle_uper dl dt.new {padding-bottom: 0px;}
/* For Win IE */
/* */

/*--For Win IEハックをWin IE 6 用に追加、元の設定のpadding: 0 0 7px 18px;では
、Win IE 6で下のddの文章との間が開き過ぎなのでこのはっくをせっていすると間がなくなり
きれいに見えるようになった
--*/

#midle_uper dl dt.reguler {
		height: 13px;
		margin: 0 0 3px 5px;
		padding: 0 0 0 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_mizuiro.gif) no-repeat 0 50%;
}


#midle_uper dl dd {
		margin: 0 6px 10px 0;
		padding: 0 0 0 23px;
		font-size: 1.1em;
}

#midle_uper dl dd a {
		color: #000000;
}

#midle_uper dl dd em {
		color: #FF0000;
}

#midle_uper dl dd a:link,
#midle_uper dl dd a:visited,
#midle_uper dl dd a:active {
		text-decoration: none;
}

#midle_uper dl dd a:hover {
		text-decoration: underline;
		color: #FF0000;
}


/* #joho_line部分
　------------------------------ */
#joho_line {
		width: 224px;
		height: 1px;
		margin: 0 auto;
		padding: 5px 0 20px 0;
}



/* #midle_uper部分
　------------------------------ */

#midle_lower {
		width: 248px;
		height: auto;
}


#midle_lower .jyoho_title {
		width: 226px;
		height: 22px;
		margin: 0 auto;
}

/*  For Win IEハックをとったらWin IE 6 上で　#midle_lower .jyoho_titleがcenterになった*/


#midle_lower dl {
		width: 224px;
		height: auto;
		padding: 5px 0 5px 0px;
		border: 1px solid #CCCCCC;
		background-color: #FFFFE0;
		text-align: left;
		margin: 0 auto;
}

/*  For Win IEハックをとったらWin IE 6 上で　#midle_lower dlがcenterになった*/


#midle_lower dl dt.new {
		height: 20px;
		margin: 0 0 3px 5px;
		padding: 0 0 7px 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_midori.gif) no-repeat 0 0;
}

/*\*/
* html #midle_lower dl dt.new {padding-bottom: 0px;}
/* For Win IE */
/* */

/*--For Win IEハックをWin IE 6 用に追加、元の設定のpadding: 0 0 7px 18px;では
、Win IE 6で下のddの文章との間が開き過ぎなのでこのはっくをせっていすると間がなくなり
きれいに見えるようになった
--*/

#midle_lower dl dt.reguler {
		height: 13px;
		margin: 0 0 3px 5px;
		padding: 0 0 0 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_midori.gif) no-repeat 0 50%;
}


#midle_lower dl dd {
		margin: 0 6px 10px 0;
		padding: 0 0 0 23px;
		font-size: 1.1em;
}

#midle_lower dl dd a {
		color: #000000;
}

#midle_lower dl dd em {
		color: #FF0000;
}

#midle_lower dl dd a:link,
#midle_lower dl dd a:visited,
#midle_lower dl dd a:active {
		text-decoration: none;
}

#midle_lower dl dd a:hover {
		text-decoration: underline;
		color: #FF0000;
}



/* #update_right部分
　------------------------------ */

#update_right .jyoho_title {
		width: 226px;
		height: 22px;
		padding-left: 10px;
}

/*  For Win IEハックはWin IE 6 上で　あってもなくても関係ない*/


#update_right dl {
		width: 224px;
		height: auto;
		padding: 5px 0 5px 0px;
		border: 1px solid #CCCCCC;
		background-color: #FFFFE0;
		text-align: left;
		margin-left: 10px;
}

#update_right dl dt.new {
		height: 20px;
		margin: 0 0 3px 5px;
		padding: 0 0 7px 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_aka.gif) no-repeat 0 0;
}

/*\*/
* html #update_right dl dt.new {padding-bottom: 0px;}
/* For Win IE */
/* */

/*--For Win IEハックをWin IE 6 用に追加、元の設定のpadding: 0 0 7px 18px;では
、Win IE 6で下のddの文章との間が開き過ぎなのでこのはっくをせっていすると間がなくなり
きれいに見えるようになった
--*/

#update_right dl dt.reguler {
		height: 13px;
		margin: 0 0 3px 5px;
		padding: 0 0 0 18px;
		font-size: 1.1em;
		color: #FF0000;
		background: url(../opta/main_e/maru_gray_ya_aka.gif) no-repeat 0 50%;
}


#update_right dl dd {
		margin: 0 6px 10px 0;
		padding: 0 0 0 23px;
		font-size: 1.1em;
}

#update_right dl dd a {
		color: #000000;
}

#update_right dl dd em {
		color: #FF0000;
}

#update_right dl dd a:link,
#update_right dl dd a:visited,
#update_right dl dd a:active {
		text-decoration: none;
}

#update_right dl dd a:hover {
		text-decoration: underline;
		color: #FF0000;
}


/*
============================== 以上index_page ==============================
*/


/* 2010.05.23　緊急用件　5/23日雨天延期による変更後の日程表　掲載
　------------------------------ */
#option_info {
		width: 720px;
		margin: 20px auto;
		padding: 20px 0;
		text-align: left;
		border: 1px solid #00E;
}

#option_info p {
		font-size: 1.2em;
		margin-left: 10px;
}

#option_info p #option_day {
		width: 100px;
		display: inline-block;
		vertical-align: top;
		color: #F00;
}

#option_info p #option_naiyou {
		width: 580px;
		display: inline-block;
}

#option_info p #option_naiyou a {
		text-decoration: none;
}

#option_info p #option_naiyou a:hover {
		text-decoration: underline;
}

#option_info p #option_naiyou em {
		color: #F00;
}