/*
Responsive 996px grid system ~ Style CSS.
Copyright 2013, Josh Cope
*/
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}


/*
 * Clear after each row
 */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* =============================================================================
   Site Styles
   ========================================================================== */
   
	body {
    padding: 0;
    margin: 0;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
		background-color:beige;
	background-image:url(../images/bg.png);
	background-repeat: 		repeat;
	background-position: 	top center;
	-moz-background-size:	cover;
	background-size:contain;

	}
/*.wrapper {
    position:relative;
}*/
div,
p,
ul{ margin:0;
    padding:0;}	
	

	
h1{
	font-size: 2em;
	color:#fff;
	padding-top:20px;
	text-align:center;
	}

h2 {color:yellow;
	font-size:1.25em;  
	background:#569810;
	border-radius:5px 5px 0 0;
	padding:20px;
	text-align:center;
/*	line-height:120%;
	font-size:1.2em;*/
}

h3 {
	font-size:1em; 
	text-align:left;
	margin-top:8px;
	padding-left:5px;
 	border-bottom: double;
	border-bottom-color: #6FAC2E;
}


p {
    color: #444;
    font-size: 0.8em;
} 
.section{
  text-align:center;
}

.red{color: red}

ruby rt{font-size:68%;}


#hokkaido,#tohoku,#kanto,#chubu,#kinki,#shikoku,#kyushu{
	padding-top:20px;}


.mainimg{
display:block;
position: relative;
margin:0 auto;
padding-top:50px;
	}
	

.main {  
    line-height:120%; 
    width:86%;  
	margin:0 auto; 
	background-color:cornsilk ;
	box-shadow:0 0 5px rgba(0,0,0,0.5);
    text-align: left;
	border-radius:5px;
	font-size:1em;
}


.topic{
  display: table;
  width:99%;
  margin:0 auto;
}
.topictext {
  display: table-cell;
  vertical-align: top;
  padding:20px 20px 20px 20px;
  width:50%;
}

p.info {
	background:#fff;
	margin-top:8px;
	margin-bottom:5px;
	border-radius: 10px;
}

a{
	text-decoration:none;	
}

a:hover {
	text-decoration:underline;

	}

p.lead {
	font-size:1em;
	width:90%;
	margin:0 auto;
	padding:10px;
}
	


/*  footer  */

#footer {
	width: 100%;
	position:fixed;
	display:block;
	font-size:smaller;
	/*margin-top: 1em;*/
	clear: both;
	background: url('../images/bg_footer.jpg') repeat-x top;
	overflow: hidden;
	bottom:0px;
	padding: 0 0 0 0;
}

#footer ul {
	float: left;
    padding: 5px 0;
 }
#footer li {
	display: inline;
	padding: 0 12px;
	border-right: 1px solid #828282;
}
#footer li a {
	background-repeat: no-repeat;
	/*background-position: 40px;*/
	text-indent: 0px;
	font-weight: bold;
	text-decoration: underline;
}

#footer li a:link,
#footer li a:visited {
	color: #4c1200;
}

.copyright{ font-size:smaller;float: left; margin: 0 0 0 10px; color:#333;}


/* LOGO */
.logo{
    max-width: 100%;
	position:relative;
	left:10px;}
	
.logocopy {display:none;}
@media screen and (max-width:320px){
	.logo{width:80%;
	}
	#mobileMenu .logo{
		width:50%;
	}
	}


/*　画像 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
 
	/*　画像のリサイズ */
 
    max-width: 100%;
    height: auto;
}

/* Defining each section background and styles
	* --------------------------------------- */
	#hokkaido, #kanto, #kinki, #kyushu{
		background-color: rgba(70,116,54,0.50);
	
	}

#tohoku, #chubu, #shikoku{
 		background-color: rgba(57,130,12,0.50);
	}
	
	
	
	
/* nav */
	
#nav{
		display:table;
	/*	top:-2px;
		padding: 0 0 10px 0;*/
		position:fixed;
		width:100%;
		text-transform:uppercase;
		font-size:0.9em;
		font-weight:bold;
		padding:0.3em 0 0.5em;
		background:#fff;
	    border-bottom:5px solid #B4C5AB;
		z-index:999;
	}
#nav p
{
	display:table-cell;
}
		
#nav ul {
		display:table-cell;
		vertical-align:bottom; 
		text-align:right;
	}
	
#nav li {
		display:inline-block;
/*		padding:0 0.01em;*/
	}
	

#nav ul li a {
		color:#444;
		text-decoration:none;
		padding: 0 18px ;
		margin-right:15px;
		border-bottom: 3px solid #4AC426;
}
	
#nav a:hover {
		border-bottom:3px solid #F8B625;

	}


	.lt-ie8 {
		display:inline;
		zoom:1;
	}
	#mobileMenu {
		display:none;
	}

/* =============================================================================
   Media Queries
   ========================================================================== */

/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 921px) and (max-width: 1024px) {
	#nav {
		font-size:0.75em;
	}

	#nav ul li{
		padding-top:10px;}
}

/* All Mobile Sizes */
@media only screen and (max-width: 920px) {
/*.container {
    width: 90%;
    margin: 0 auto;
    padding: 10px 10px;
	margin-bottom:100px;
}*/

	.js #nav {
		display:none;
	}	
	.js #mobileMenu {
		display:block;
		position:fixed;
		width:100%;
		z-index:1000;
	}
	
	.js #nav{
		text-align:center;
	}

	#nav {
		position:relative;
		padding-top:3.375em;
	}
    
    .no-js #nav {
        padding-top:1em;
    }
	
	#nav img {
		display:block;
		margin:0 auto;
	}
	
	#mobileMenu .logo{
		position:absolute;
		left:10px;
		top:3px;
/*		text-align:left; */
	}
	
	#mobileMenu img{
		width:78%;
	}
	
	#main {
		padding:0;
	}

	
	#nav ul {
		text-align: center;
		font-size:0.6em;
		line-height: 1.5em;
	}
	
	#nav ul li {
		padding:0.25em;
	}

	h2 {
		font-size:1em;
	}
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 920px) {
	.topictext {
  display: table-row;
}
}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {
	p.lead {
	font-size:80%;
}
li.hid { display:none;}
#footer li, #footer p{
	font-size:70%;}
}


/* =============================================================================
   Font-Face
   ========================================================================== */
/* This is the proper syntax for an @font-face file

/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('embedded-opentype'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#FontName') format('svg');
font-weight: normal;
font-style: normal; }
*/

/* scroll btn */
.top_move {
	background-color: rgba(0, 0, 0, 0.3);
	border-radius:100px;
	color:#fff;
 	padding: 11px 15px; 
	position:fixed;
	bottom:50px;
	right:20px;
	text-decoration:none;
	}
.top_move:hover {
	background: rgba(255, 255, 255, 0.5);
	color:#444;
}