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

/* base
------------------------------------------------------------------------------------------------ */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, blockquote, th, td { margin:0; padding:0; }
body { color: #000; font: 14px/24px "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ",Meiryo, Osaka, "ＭＳ Ｐゴシック","MS P Gothic", sans-serif; margin: 0 auto; background: #FFF; }
img { max-width: 100%; width: auto\9; /* ie8 */ height: auto; border:0; vertical-align: top; }
 

a:link, a:visited { color:#0086B3; font-size: 14px; }
a:hover { color:#BF00FF; }
a:active { color:#BF00FF; background-color: #E5E5E5; }

ul, ol { list-style: none; }
p { margin-bottom: 1.2em; line-height: 1.6; }

/*clearfix*/
.clearfix:after { display: block; visibility:hidden; clear: both; height:0; content: " "; font-size: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* pc-nonpc_switch  */
.pc { display:block; }/*pcのみ表示*/
.nonpc { display: none; }/*pc非表示、tablet,smartphoneで表示*/
.pc-tablet { display: block; }/* PC,tabletで表示 */
.pc-tablet-inline { display: inline; }/* PC,tabletで表示 */
.nonpc-small { display: none; }/* smartphoneのみ表示*/
.nonpc-small-inline { display: none; }/* smartphoneのみ表示*/
.tablet { display:none; }/* tabletのみ表示*/

@media screen and (max-width: 768px) {
.pc { display:none; }/*pcのみ表示*/
.nonpc { display:block; }/*pc非表示、tablet,smartphoneで表示*/
.pc-tablet { display: block; }/* PC,tabletで表示 */
.pc-tablet-inline { display: inline; }/* PC,tabletで表示 */
.nonpc-small { display: none; }/* smartphoneのみ表示*/
.nonpc-small-inline { display: none; }/* smartphoneのみ表示*/
.tablet { display:block; }/* tabletのみ表示*/
}

@media screen and (max-width: 480px) {
.pc { display:none; }/*pcのみ表示*/
.nonpc { display:block; }/*pc非表示、tablet,smartphoneで表示*/
.pc-tablet { display: none; }/* PC,tabletで表示 */
.pc-tablet-inline { display: none; }/* PC,tabletで表示 */
.nonpc-small { display: block; }/* smartphoneのみ表示*/
.nonpc-small-inline { display: inline; }/* smartphoneのみ表示*/
.tablet { display:none; }/* tabletのみ表示*/
}

/* 全体を含むボックス：100%とする */
#page { width: 100%; }


/* ---------------------------------------------------------------------------------------------
HEADER
------------------------------------------------------------------------------------------------ */
#header-box { width: 768px; margin: 0 auto; overflow: hidden; }
#catchbox{ width: 758px; margin: 0 auto; }
#header-left{ float: left; width: 220px; margin: 2px 0 10px 10px; }
#header-right{ float: right; text-align: center; width: 180px; margin-top: 2px; margin-right: 10px; }

#header-box-1col{ width: 756px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; margin: 0 auto; overflow: hidden; padding-top: 4px; }
#header-box-1col #header-left{ margin-left: 20px; }


@media screen and (max-width: 768px) {
#header-box { clear: both; margin: 0 auto; width: 100%; height: auto; }
#catchbox{ width: 94%; margin: 0 auto; overflow: hidden; }
#header-box-1col{ width: 98%; border: none; margin: 0 auto; }
}
@media screen and (max-width: 500px) {
#header-left{ min-width: 150px; width: 48%; margin-left: 0; }
#header-right{ width: 40%; margin-right: 0; }
}




/* Global navi
------------------------------------------------------------------------------------------------ */
#gnavi-box { width: 500px; float: left; padding-left: 66px; }
#nav { width: 448px; margin: 0 0 6px auto; border-left:1px solid #CCC; overflow: hidden; }
#nav li { float:left; background: #fefefe url(../images_rwd/cmn/gnavi_bg.gif) repeat-x bottom; border-top:1px solid #CCC; border-right:1px solid #CCC; border-bottom:1px solid #CCC; height: 17px; padding: 5px 10px 0 10px; text-align: center; }

#organization { width: 758px; height: 38px; margin: 0 auto; padding: 5px 0; border: 1px solid #CCC; background: #fefefe url(../images_rwd/cmn/org_back.jpg) repeat-x bottom; text-align: center; clear: both; }
#organization   p { font-size: 12px; line-height: 20px; margin: 0; }
#header-box-1col #organization { border-right: none; border-left: none;}


/* tablet */
@media screen and (max-width: 768px) {
#gnavi-box { width: 94%; clear: both; float: none; margin: 6px auto; padding-left: 0; }
#nav { width: 100%; margin: 0 auto 6px auto; }
#nav li { width: 24.8%; padding: 16px 0 1px 0; height: auto; }
#organization { width: 94%; height: auto; }
#header-box-1col #organization { border-right: 1px solid #CCC; border-left: 1px solid #CCC;}
}

/* smart-phone */
@media screen and (max-width: 480px) {
#nav { width: 99%; }
#nav li { width: 49.4%; }
.gnavi-1{ margin-bottom: 2px; }
#organization p { width: 94%; margin: 0 auto; }
}



/* CONTENTS
------------------------------------------------------------------------------------------------ */

#contents-area { /*clear: both; */margin: 0 auto; width: 768px; }
#contents-area-box { width: 758px; margin: 0 auto; }
#main { float: right; padding: 20px 10px 20px 10px; width: 560px; border-left: 1px solid #CCC;}
@media screen and (max-width: 768px) {
#contents-area { width: 100%; }
#contents-area-box { width: 94%; margin: 0 auto; }
#main { float: none; padding: 10px 0 0 0; width: 100%; clear: both; border-left: none; }
}
@media screen and (max-width: 480px) {
#contents-area { width: 100%; }
#contents-area-box { margin:0 auto; padding:0; clear: both; width: 300px; background: none;  }
#main { margin: 15px auto 30px 0; padding: 0; width: 100%; }
}


#contents-area-box-1col { overflow: hidden; width: 758px; margin: 0 auto; }
#main-1col { overflow: hidden; padding: 20px 20px 10px 20px; width: 716px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; }
@media screen and (max-width: 768px) {
#contents-area-box-1col { width: 94%; }
#main-1col { padding: 20px 1% 10px 1%; width: 98%; border: none; }
}
@media screen and (max-width: 480px) {
#main-1col { border: none; }
}


/* CONTENTS_AREA
------------------------------------------------------------------------------------------------ */

h1 { font-size: 24px; font-weight: normal; line-height: 120%; color: #BF00FF; margin: .67em 0; }
h2 { font-size: 18px; color: #BF00FF; font-weight: normal; margin: .75em 0; }
h3 { font-size: 16px; color: #BF00FF; font-weight: normal; margin: .83em 0; }



/* SIDEBAR
------------------------------------------------------------------------------------------------ */
#sidebar { float: left; width: 168px; }
#sidebox { width: 160px; margin: 20px 0 0 8px; }
@media screen and (max-width: 768px) { #sidebar { float: none; width: 100%; } #sidebox { width: 94%; margin: 20px auto; } }
@media screen and (max-width: 480px) { #sidebar { width: 100%; } #sidebox { width: 300px; } }


@media screen and (max-width: 768px) { 
.side-left, .side-right{ width: 48%; margin: 0 0 10px 0; }
.side-left{ float: left; clear: both; }
.side-right{ float: right; }
}
@media screen and (max-width: 480px) {
.side-left, .side-right{ width: 100%; margin: 0 auto; float: none; text-align: center; }
}


#side-menu {  }
#side-menu li { margin: 0 auto 5px auto; }
#side-menu li a { display: block; margin: 0; padding: 4px 0 2px 2px; text-decoration: none; border-bottom: 1px solid #666; }
@media screen and (max-width: 768px) { 
#side-menu { width: 90%; overflow: hidden; clear: both; margin: 0 auto 20px auto; }
#side-menu ul { text-align: left; line-height: 1; }
#side-menu li { display: inline-block; /display: inline; /zoom: 1; margin: 6px 0; padding: 0 6px 0 3px; border-right: 1px solid #333; }
}
@media screen and (max-width: 768px) { 
#side-menu { width: 100%; }
}
.side-caption_style { font-size: 9pt; color: #000; line-height: 130%; margin-bottom: 10px; text-align: left; }



/* FOOTER
------------------------------------------------------------------------------------------------ */

#footer-area { float: right; width: 580px; background-color: #E5E5E5; border-top: 1px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; }
#footer-box { width: 98%; height: 100%; border-left: 1px solid #CCC; text-align: center; padding-top: 20px; overflow: hidden; }

#contents-area-box-1col #footer-area{ float: none ; width: 756px; border-right: 1px solid #CCC; border-left: 1px solid #CCC; }
.footer {
	font-size: 12px;
	line-height: 18px;
	text-align: center;
}


@media screen and (max-width: 768px) {
#footer-area { width: 99%; border-left: 1px solid #CCC; }
#footer-box { width: 94%; border: none; margin: 0 auto; }
#contents-area-box-1col #footer-area{ width: 98%; }
}

@media screen and (max-width: 480px) {
#footer-box { width: 90%; padding: 20px 5% 0 5%; }
}