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



/* =Reset-------------------------------------- */
html { 
font-size: 62.5%; /* 基準 10px */
font-family:"Hiragino Kaku Gothic Pro", "yu Gothic","-meiryo",sans-serif}
* { margin:0; padding: 0px}
a { text-decoration: none}
ul, ol { list-style: none}
img { max-width: 100%; vertical-align: middle; border: 0px}

/* .ie8 img{width: auto; height: auto} */


/* 禁則処理-------------------------------------- */
p.li,dt,dd,th,td,pre{
	-ms-line-break: strict;
	line-break: strict;
	-ms-word-break: break-strict;
	word-break: break-strict
	}


/*link----------------------------------------*/
a:link { text-decoration: none; color:#000}
a:visited { text-decoration: none; color:#000}
a:hover { text-decoration: none; color:#333;opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )"; text-decoration:none}
a:active { text-decoration: none; color:#000}


/*margin,clear:both----------------------------------------*/	
.magin-10px{ width:100%; margin-bottom:10px; clear:both}
.magin-20px{ width:100%; margin-bottom:20px; clear:both}
.magin-30px{ width:100%; margin-bottom:30px; clear:both}
.magin-40px{ width:100%; margin-bottom:40px; clear:both}
.magin-60px{ width:100%; margin-bottom:60px; clear:both}
.magin-120px{ width:100%; margin-bottom:120px; clear:both}
.clr{ width:100%; clear:both}


/*font-decoration----------------------------------------*/
.font-bold{ font-weight:bold}
.blue{ color:#0F3FD8}
.red{ color:#FF0004}



/* =start-------------------------------------- */

/* background: url(http://griddle.it/252-3-24) repeat-y top center */

body{ background-color:#ffffff }

/* =header nav-------------------------------------- */

header { width: 100%;}

#h-nav { width:100%; margin: 0 auto;}

#h-nav-left { float: left; width: 60%;}

#h-nav h1 { font-size: 1.4rem;}

#h-nav-left img { margin-top:10px; margin-bottom:10px}

#h-nav-left span {}

#h-nav-right { float: right; width: 40%; 
               text-align:right;}

#h-nav-right img { margin-top:10px;}
			   
#header-adress-pc { display:none}	
#header-adress-sp { margin:0px; padding:0px;}
		   
#h-nav-right img { width:30px;}

#h-nav-p { font-size: 1.4rem}



#main-image-box{ width:100%}
.main-image { margin:0 auto}

.main-image-02 { display:none}

.main-image-02-sp {}


/*g-nav----------------------------------------*/

#g-nav a:link { text-decoration: none; display:block}
#g-nav a:visited { text-decoration: none; color:#000}
#g-nav a:hover { text-decoration: none; color:#999}
#g-nav a:active { text-decoration: none; color:#999}
#g-nav2 a:link { text-decoration: none; display:block}
#g-nav2 a:visited { text-decoration: none; color:#000}
#g-nav2 a:hover { text-decoration: none; color:#999}
#g-nav2 a:active { text-decoration: none; color:#999}


#g-nav{ float:left; width:100%}		  
#g-nav ul{display: table; width:100%; max-width:480px;
          table-layout:fixed}
#g-nav li{display:table-cell; text-align:center;
		  height:45px; line-height:45px;
		  font-size:1.4rem
          }


/*#g-nav{ float:left;}		  
#g-nav ul{display: table; width:100%; max-width:480px;
          table-layout: fixed}
#g-nav li{display: table-cell; text-align:center;
		  height:45px; line-height:45px;
		  font-size:1.4rem
          }*/


#g-nav li:nth-child(-n+2) { border-bottom: 1px solid #C9C9C9;
                         border-right: 1px solid #C9C9C9}
#g-nav li:nth-child(3) { border-bottom: 1px solid #C9C9C9;
                        }

#g-nav2{ float:left; width:100%}		  
#g-nav2 ul{display: table; width:100%; max-width:480px;
          table-layout: fixed}
#g-nav2 li{display: table-cell; text-align:center;
		  height:45px; line-height:45px;
		  font-size:1.4rem
          }

#g-nav2 li:nth-child(-n+2) { border-bottom: 1px solid #C9C9C9;
                         border-right: 1px solid #C9C9C9}
#g-nav2 li:nth-child(3) { border-bottom: 1px solid #C9C9C9;
                        }
#g-nav3{ display:none}
						 
#concept-p { width:95%; margin:0 auto; font-size:1.2rem;
             line-height:140%; color:#666; margin-bottom:10px }



.mc-left { width:100%; }
.mc-right { width:100%; }





/*3b-banner----------------------------------------*/


#banner-3c { width:95%; margin-bottom:20px; margin:0 auto}		  
#banner-3c ul{ padding:0px; margin:0px; list-style-type:none;
               margin:0 auto;}
#banner-3c li{ font-size:1.2rem; line-height:160%; color:#999999
         }


/*main-contents----------------------------------------*/

#main-contents { width:95%; margin:0 auto}

#topics h2 { font-size:1.8rem; font-weight:bold; color:#333;
            border-bottom:2px #333 solid; margin-bottom:20px}
			
			
.textseobox{ width:100%; margin:0 auto; margin:0px; padding:0px; 
             font-size:12px !important; color:ff0000}

.textseobox h1 { background-color:#E3E3E3; padding:5px}

.textseobox h2 { text-indent:10px}

.textseobox ul { padding-left:10px; padding-bottom:20px}












			
/*sub-banner-3c----------------------------------------*/

#sub-banner-3c { width:100%; margin-bottom:20px; margin:0 auto}		  
#sub-banner-3c ul{ padding:0px; margin:0px; list-style-type:none;
               margin:0 auto;}
#sub-banner-3c li{ margin-bottom:20px; font-size:1.2rem; line-height:160%; color:#999999
         }
		 
#sub-banner-3c h2 { font-size:1.8rem; font-weight:bold; color:#333;
            border-bottom:2px #333 solid; margin-bottom:20px}


/*sub-contents----------------------------------------*/			

#sub-contents { width:95%; margin:0 auto}
#sub-contents h2 { font-size:1.8rem; font-weight:bold; color:#333;
            border-bottom:2px #333 solid; margin-bottom:20px}

		  
#scb-nav {
  margin: 0 0 30px;
  padding: 0;
  font-size: 13px;
  list-style-type: none;
}
/*clearfix*/
#scb-nav:after {
  content: "";
  clear: both;
  display: block;
}
#scb-nav li {
  float: left;
  width: 48%;
  text-align: center;
  margin-bottom:10px
}
/*奇数のli要素に適応*/
#scb-nav li:nth-child(even) { margin-left:2%}
#scb-nav a {
  display: block;
}
#scb-nav a:hover {
}








/*main-contents----------------------------------------*/

#main-contents h2 { font-size:1.8rem; font-weight:bold; color:#333;
            border-bottom:2px #333 solid; margin-bottom:20px}



.subpage-basic-p { font-size:1.4rem} 


#pc-umekomi-topics { display:none}
#sp-umekomi-topics {}



/*main-contents----------------------------------------*/


.slide-table{
	display:block;
    width: 100%;
	margin:0 auto;
	padding:0;
	position:relative;
	border-collapse:collapse;
	border-spacing:0;
}

.slide-table thead { float:left}

.slide-table thead tr th { display:block}

.slide-table tbody { display:block;
                  position:relative;
				  overflow-x: auto;
				  white-space: nowrap}

.slide-table tbody tr { border-collapse: collapse;
                     border-spacing:0;
					 display: inline-block;
					 vertical-align: top;
					 border-right: 1px solid #BABCBF;
					 
					 } 

.slide-table tbody tr th,
.slide-table tbody tr td{
	display:block;
	vertical-align: top;
	margin-right:0}

.slide-table table tr th,
.slide-table table tr td{
	text-align:center;
	border-top: 1px solid #333}
	
	
.slide-table tr th:last-child,
.slide-table tr td:last-child { border-bottom:1px solid #333 }

.slide-table table tr th {}

.slide-table th {
padding: 6px;
text-align: left;
vertical-align: top;
border: 1px solid #b9b9b9;
font-size:1.2rem;
}

.slide-table td { padding: 6px;
border: 1px solid #b9b9b9;
font-size:1.2rem;
text-align: center;
vertical-align: top;
}

.bgcolor-333 { background-color:#333333 !important; color:#FFFFFF !important}

.bgcolor-999 { background-color:#999999 !important; color:#FFFFFF !important}

.slide-table tr th:nth-child(2n+1) { background-color:#caf8b9}

.tr-01 td:nth-child(2n+1) { background-color:#ffccfe}
.tr-02 td:nth-child(2n+1) { background-color:#e6ffff}
.tr-03 td:nth-child(2n+1) { background-color:#fefecc}
.tr-04 td:nth-child(2n+1) { background-color:#caf8b9}









					

/*footer----------------------------------------*/

footer { width:100%; background-color:#202020}

#footer-inner { padding-top:20px}

#footer-icon { width: 95%; height: 45px; margin:0 auto;
}
#footer-icon td:nth-child(4){ display:none}

#footer-icon-table { width:100%}
#footer-icon-table td { width:20%; text-align:center; height:30px}
#footer-icon img { width:30px}

#footer-nav{ width:100%; height:45px;
             background-color:#202020}		
#footer-nav ul{ padding:0px; margin:0px; list-style-type:none}
#footer-nav li{ float:left; font-size:1.4rem; color:#FFF;
                text-align:left; background-color:#202020;
		        text-indent:20px;
		        line-height:45px; width:100%;
		        border-bottom:1px solid #333;
                }			   

#footer-nav li:nth-child(3){ margin-bottom:20px}

#footer-nav a:link { text-decoration: none; color:#999; display:block}
#footer-nav a:visited { text-decoration: none; color:#999}
#footer-nav a:hover { text-decoration: none; color:#999}
#footer-nav a:active { text-decoration: none; color:#999}


#footer-adress{ width: 100%; background-color:#202020; margin-bottom:10px}

#footer-adress h1 { font-size:1.4rem; font-weight:normal; color:#FFFFFF;
                  text-align:center; margin-bottom:10px;}

#footer-adress p { font-size:1.2rem; font-weight:normal; color:#FFFFFF;
                  text-align:center; line-height:1.6rem}

#copylight { font-size:1.2rem; font-weight:normal; color:#999;
                  text-align:center; line-height:2rem;
				  background-color:#414141}

/* width 480以上　768px未満 */

@media screen and (min-width : 480px){	

header { width: 100%;}

	  
#g-nav ul{max-width:768px}
#g-nav2 ul{max-width:768px;}	 
		 
		 
	
}


/* width 768以上　1024px未満 */

@media screen and (min-width : 768px){	

header { width: 100%;}


.main-image-02 { width:960px; display:block; margin:0 auto;  }

.main-image-02-sp {display:none}


#h-nav {}
#h-nav-left {}

#h-nav-left span { display:inline; margin-left:20px; font-size:3rem; vertical-align:middle;
                   color:#ea68a2}

#h-nav-right {}

#header-adress-sp { display: none}
#header-adress-pc { display: block;
                    }
#header-adress-pc h2 { font-size:14px;
                       margin-bottom:5px}
#header-adress-pc p { font-size:12px; color:#333}

#g-nav, #g-nav2{ display:none}

#g-nav3{ display:block;}		  
#g-nav3 ul{display: table; width:100%;
          table-layout: fixed}
#g-nav3 li{display: table-cell; text-align:center;
		  height:50px; line-height:50px;
		  font-size:1.6rem;
		  border-bottom: 1px solid #C9C9C9
          }


#banner-3c{ display:block;}		  
#banner-3c ul{display: table; width:100%;
          table-layout: fixed}
#banner-3c li{display: table-cell;}

#banner-3c li:nth-child(-n+2) { border-right:5px #ffffff solid}
	




.mc-left { width:100%; }
.mc-right { width:100%; }

	
		 
#topics { width:70%; float:left}

#topics h2 { width:95%}

#sub-banner-3c{ width:30%; float:right}	

#pc-umekomi-topics {display: block }
#sp-umekomi-topics {display:none}


#scb-nav li {
  float: left;
  width: 24%;
  text-align: center;
  margin-bottom:10px
}


#scb-nav li:nth-child(even) { margin-left:0%}
#scb-nav li:nth-child(n) { margin-left:1%}


#footer-icon table { width:200px;}
#footer-icon td:nth-child(4){ display:none} 
#footer-icon td:nth-child(5){ display:none} 


#footer-inner { width:100%; margin:0 auto; background-color:#202020;
                padding-bottom:40px;
                }

#footer-nav { width:50%; float:left; padding-top:20px;}
#footer-nav ul{ padding-left:30px; margin:0px; list-style-type:square }
#footer-nav li{ float:left; font-size:1.4rem; color:#999;
                text-align:left; background-color:#202020;
		        text-indent:-5px;
		        line-height:160%;
		        border-bottom:0px solid #333;
                }
#footer-adress { width:40%; float:right; padding-top:20px;
                 margin-right:20px}	



#footer-adress h1 { font-size:1.4rem; font-weight:normal; color:#999;
                  text-align:right; margin-bottom:10px;}

#footer-adress p { font-size:1.2rem; font-weight:normal; color:#999;
                  text-align:right; line-height:1.6rem}		
		 

}



/* width 1024以上 */

@media screen and (min-width : 1024px){	

#h-nav { width: 960px; margin: 0 auto;}

#concept-p { width:940px; font-size:1.4rem; border:1px #999999 dotted; padding:10px
             }

#main-contents { width:960px; margin:0 auto}
#sub-contents { width:960px; margin:0 auto}

#main-image-box{ width:100%; }
.main-image { width:960px; margin:0 auto}

#g-nav3 ul{width:960px; margin:0 auto}

#banner-3c ul{width:950px}

#footer-icon { width:960px; margin:0 auto}

#footer-inner { width:960px}
#footer-nav { width:500px}
#footer-adress { width:460px; margin-right:0px}


	
}