/*
Theme Name: MY HOME TOWN
Author: webpractice
Description: This is my original theme.
Version: 1.0
*/

@charset "UTF-8";

/* CSS Document */

body {font-family: 'メイリオ', 
     'Hiragino Kaku Gothic Pro',  sans-serif;
	 background-color: #e5e5e5;
	 margin: 0}

/* ====================
 ■link
==================== */

a {color: rgb(1,122,205);
  text-decoration: none}

/* =========================================================
■container
========================================================= */
div#container {width: 900px;
	      margin-left: auto;
		  margin-right: auto;
	      background-color: #ffffff;
	      padding: 0 40px;
	      -webkit-box-shadow: 0 0 50px #bbbbbb;
	      box-shadow: 0 0 50px #bbbbbb;
		  position: relative;
	 	  overflow: hidden}

/* =========================================================
■header
========================================================= */

header#pageheader {background-color: #ffffff;
       			  padding: 15px 0 0}

header#pageheader h1 {margin: 0 0 -25px;
					 font-size: 40px;
					 font-weight: normal;
					 font-family: 'Righteous', cirsive}

header#pageheader h2 {color: #666666;
					 font-size: 15px;
					 margin: 0;
					 padding-bottom: 10px;
					 text-align: right;
					 font-weight: normal}

nav {clear: both}

/* =========================================================
■nav
========================================================= */
nav ul {font-size: 0.75em;
	   margin-top: 0;
	   margin-bottom: 0;
	   margin-left: 0;
	   padding-left: 0;
	   height: 30px;
	   background: -webkit-gradient(linear, left top, left bottom, from(#0080ff), to(#0000ff));
	   background: -webkit-linear-gradient(#0080ff 0%, #0000ff 100%);
	   background: -moz-linear-gradient(#0080ff 0%, #0000ff 100%);
	   background: -o-linear-gradient(#0080ff 0%, #0000ff 100%);
	   background: -ms-linear-gradient(#0080ff 0%, #0000ff 100%);
	   border-radius: 5px}

nav ul li {list-style-type: none;
		  float: left}

nav ul li a {display: block;
			width: 120px;
			line-height: 30px;
			text-decoration: none;
			text-align: center;
			color: #ffffff;
			border-right: solid 1px #ffffff}		  

nav ul li a:hover {background-color: rgb(255,51,204)}

nav ul li:first-of-type a:hover 
				   {border-radius: 5px 0 0 5px}

/* =========================================================
■article
========================================================= */

article {width: auto;
		margin-left: auto;
		margin-right: auto}


article header {border: solid 1px #aaaaaa;
	           margin: 20px 0 10px;
			   padding: 18px;
			   border-radius: 5px;
			   -webkit-box-shadow: 0 2px 3px #cccccc, 
								   0px 0px 4px 3px #ffffff inset;
			   box-shadow: 0 2px 3px #cccccc, 
						   0px 0px 4px 3px #ffffff inset;
			   overflow: hidden}

article header h1 {background-color: #ffffff;
				  border-left: solid 6px #aaaaaa;
			 	  font-size: 28px;
				  color: #000000;
			 	  line-height: 32px;
			 	  padding-left: 6px;
				  margin-bottom: 0}

article header nav ul {float: left;
					  display: block;
					  list-type: none}

article header p {width: 340px;
	             font-size: 16px;
				 color: #444444;
				 margin-left: 2px;
				 float: left}
				 
article header#mtfuji {height: 760px}				 

article section {clear: both;
		         border: solid 1px #aaaaaa;
	             margin: 20px 0 10px;
	　　　　     padding: 18px;
			    border-radius: 5px;
				overflow: hidden;
				background: -webkit-linear-gradient(#ffffff 0%, #dfdfdf 100%);
				background: -moz-linear-gradient(#ffffff 0%, #dfdfdf 100%);
				background: -o-linear-gradient(#ffffff 0%, #dfdfdf 100%);
				background: -ms-linear-gradient(#ffffff 0%, #dfdfdf 100%);
				-webkit-box-shadow: 0 2px 3px #cccccc,
									0 0 4px 3px #ffffff inset;
				box-shadow: 0 2px 3px #cccccc,
							0 0 4px 3px #ffffff inset}
							
							
							
article section h1 {font-size: 24px;
				   font-weight: normal;
	        	   line-height: 22px;
				   padding-left: 18px;
				   margin-top: 30px;
				   margin-bottom: 20px;
				   margin-left: 0;
				   margin-right: 0}
				   
article section p {width: 450px;
				  padding-left: 18px}

article section p.gaiyo	{position: relative;
						top: -10px;
						left: 0}
						
article section#gaiyo {height: 210px}

article section#tiri {height: 340px}						

article section#siyakusyo {height: 328px}

article section#rosetheater {height: 353px}

article section#sportsdoom {height: 313px}

article section#oodana {height: 352px}

article section#sinsuipark {height: 364px}						
						
article section:nth-of-type(even) figure 
                    {float: left;
					margin-right: 30px;
					margin-bottom: 15px}

article header:nth-of-type(odd) figure,
article section:nth-of-type(odd) figure 
                    {float: right;
					margin-left: 30px;
					margin-bottom: 15px}
					
article header:nth-of-type(odd) figure.mtfuji
					{position: relative;
					top: 0;
					left: -20px}
															
article header:nth-of-type(odd) figure.sisetsu
					{margin-top: -10px}
									
article section:nth-of-type(odd) figure.fujicity
					{position: relative;
					top: -130px;
					left: -50px}

article header figcaption,
article section figcaption {color: #666666;
						   text-align: center;
						   font-size: 14px;
						   display: block}
						   
article section:nth-of-type(odd) figcaption.nakamaru 
			 {position: relative;
             top: -5px;
			 left: 5px}

article section:nth-of-type(even) figure.tyabatake	
			{position: relative;
             top: -177px;
			 left: 495px}
			 
article section:nth-of-type(even) figcaption.tyabatake
				  {position: relative;
				   top: -5px;
				   left: -5px}
				   
article section:nth-of-type(odd) figure.siyakusyo
				  {position: relative;
				  top: -220px;
				  left: -80px}
				  
article section:nth-of-type(odd) figure.sportsdoom
					{position: relative;
					top: -150px;
					left: -70px}								  						   	
				   
article section:nth-of-type(odd) figure.oodanafall
				  {position: relative;
				  top: -260px;
				  left: -20px}
				  
article header:nth-of-type(odd) figcaption.mtfujicaption
							{position: relative;
							top: 5px;
							left: 0}				  
				  
article section:nth-of-type(odd) figcaption.siyakusyocaption,							
article section:nth-of-type(even) figcaption.rosetheatercaption	
							{position: relative;
							top: -5px;
							left: 5px}							
							
article section:nth-of-type(odd) figcaption.sportsdoomcaption
							{position: relative;
							top: -5px;
							left: 5px}							
				  				   		 
article section:nth-of-type(odd) figcaption.oodanacaption	
							{position: relative;
							top: 1px;
							left: -10px}
							
article section:nth-of-type(even) figure.yoroigafuchi
							{position: relative;
							top: -20px;
							left: 0}							

article section:nth-of-type(even) figcaption.yoroigafuchicaption
							{position: relative;
							top: -1px;
							left: -10px}
													
		  
article p#summary {float: right;
				  width: 560px;
				  margin-top: -15px}
				  
	  
				  					  		
.right {width: 350px;
		float: right;
		margin-top: -10px}
		

/* フォーム */
form {margin: 30px 140px 30px}	

input, textarea {width: 660px;
				-webkit-appearance: none}

textarea {height: 130px}

input[type="submit"] {width: 300px;
				     background-color: #cef178}

input:required, input:invalid	
				{background-image: url(../images/caution.png);
				background-repeat: no-repeat;
				background-position: right center}	

input:valid	{background-image: none}

label span	{color: #ff0000}

/* =========================================================
■footer
========================================================= */

footer {color: #ffffff;
	   background: -webkit-gradient(linear, left top, left bottom, from(#0080ff), to(#0000ff));
	   background: -webkit-linear-gradient(#0080ff 0%, #0000ff 100%);
	   background: -moz-linear-gradient(#0080ff 0%, #0000ff 100%);
	   background: -o-linear-gradient(#0080ff 0%, #0000ff 100%);
	   background: -ms-linear-gradient(#0080ff 0%, #0000ff 100%);
	   border: solid 0 #0000ff;
	   border-radius: 5px;	   
	   margin-top: 0;
	   padding-top: 8px;
	   padding-bottom: 8px;
	   clear: both;
	   overflow: hidden}

small {font-size: 0.75em;
	  font-style: normal;
	  text-align: center;
	  display: block}


/* ====== PC用の設定 ====== */
@media only screen and (min-width:900px) {

div#container {width: 900px;
	      margin-left: auto;
	      margin-right: auto;
	      background-color: #ffffff;
	      padding: 0 40px;
	      -webkit-box-shadow: 0 0 50px #bbbbbb;
	      box-shadow: 0 0 50px #bbbbbb;
		  position: relative;
	 	  overflow: hidden}

}


/* ====== タブレット用の設定 ====== */
@media only screen and (min-width:600px) 
and (max-width:899px) {

div#container	{width: 100%;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				padding: 0 10px;
				background-position: -3px 380px, 100px 460px}
				
header#pageheader {position: fixed;
				  top: 0;
				  left: 0}				

header#pageheader img {width: 100%;
					  height: auto}

nav ul	{font-size: 10px}

nav ul li a	{width: 100px}

}

/* ====== スマートフォン用の設定 ====== */
@media only screen and (max-width:599px) {

div#container	{width: 100%;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				padding: 0 10px;
				background-position: -3px 220px, 100px 280px;
				overflow: hidden}
								
header#pageheader,
header#pageheader img {width: 95%;
					  height: auto;
					  padding: 15px 10px 0}
					  
header#pageheader {position: fixed;
				  top: 0;
				  left: 0;
				  z-index: 2}							  				  
					  
nav ul	{font-size: 8px}

nav ul li a	{width: auto;
			display: inline-block;
			padding: 0 3px}

header#pageheader h1	{font-size: 24px;
						margin-bottom: 10px;
						margin-right: 15px}

header#pageheader h2	{font-size: 10px;
						margin-bottom: 10px;
						text-align: left;
						padding: 0}
												
						
article header {margin-top: 127px}						

article header h1	{float: none;
					font-size: 14px;
					line-height: 1.0}
					
article header p	{width: 240px}

article header#mtfuji {height: 1130px}

article header:nth-of-type(odd) figure.mtfuji
					{float: none;
					margin: 5px auto 0}										
					
article p#summary {float: none;
				  font-size: 10px;
				  margin-top: -20px;
				  margin-left: 150px}
				  
article section#gaiyo {height: 360px}

article section#tiri {height: 600px}						

article section#siyakusyo {height: 648px}

article section#rosetheater {height: 543px}

article section#sportsdoom {height: 533px}

article section#oodana {height: 662px}

article section#sinsuipark {height: 744px}					  
				  
article section p {width: 250px;
				  z-index: 1}
				  
article section:nth-of-type(1n) figure	
					{float: none;
					margin: 0 auto;
					text-align: center;
					display: block}

article section:nth-of-type(1n) figcaption	
					{text-align: center;
					margin-bottom: 15px}

article section:nth-of-type(odd) figure.fujicity
					{float: none;
					margin: 20px auto 0}
					
article section:nth-of-type(odd) figure.fujicity img
					{margin: 105px 0 0 70px}					
					
article section:nth-of-type(even) figure.tyabatake
					{float: none;
					position: relative;
					top: 5px;
					left: 0}
					
article header:nth-of-type(odd) figure.sisetsu
					{margin-top: 0}					

article section:nth-of-type(odd) figure.siyakusyo 
                    {float: none}
					
article section:nth-of-type(odd) figure.siyakusyo img 
                    {margin: 215px 0 0 105px}					
					
article section:nth-of-type(odd) figure.sportsdoom 
                    {float: none}
					
article section:nth-of-type(odd) figure.sportsdoom img 
                    {margin: 135px 0 0 85px}										
					
article section:nth-of-type(odd) figure.oodanafall,
article section:nth-of-type(even) figure.yoroigafuchi
					{float: none;
					position: relative;
					top: 0;
					left: 0}							
					
article section:nth-of-type(odd) figcaption.nakamaru 
			 {float: none;
			 text-align: center}
			 
article section:nth-of-type(even) figcaption.tyabatake
				  {text-align: center;
				  position: relative;
				   top: -8px;
				   left: 0}
				   
article section:nth-of-type(odd) figcaption.oodanacaption,
article section:nth-of-type(even) figcaption.yoroigafuchicaption	
							{text-align: center}

article img, .wp-capition {max-width: 100%;
						  height: auto}
						  
.right {width: 250px;
		float: none}
								  		  						
article header h1.left {padding-left: -10px}

form	{margin-left: 0;
		margin-right: 18px}

article p#summary {float: none;
				  font-size: 10px;
				  width: 140px;
				  margin-top: -20px;
				  margin-left: 105px}
		

input, textarea {width: 280px}

input[type="submit"] {width: 150px}
				
}


<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<style>
div#container
	{background-image: url(../src/circle-mix.png);
    background-repeat: no-repeat;
	background-position: 15px 420px}
    
article section figure	{float: right;
						margin-left: 15px;
						margin-bottom: 15px}

nav ul li a	{border-right: solid 1px #ffffff}

nav ul li a:hover	{background-color: #017acd}
				
</style>
<![endif]-->

<!--[if lt IE 10]>
<style>
nav ul
    {filter: progid:DXImageTransform.Microsoft.
    gradient(GradientType=0,startColorstr='#777777',
    endColorstr='#333333');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.
    gradient(GradientType=0,startColorstr='#777777',
    endColorstr='#333333')"}

article header 
	{filter: progid:DXImageTransform.Microsoft.
    Shadow(color='#cccccc', Direction=180, Strength=2);
    background-color: #ffffff;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.
    Shadow(color='#cccccc', Direction=180, Strength=2)";
    background-color: #ffffff;}
    
article section 
	{filter: progid:DXImageTransform.Microsoft.
    gradient(GradientType=0,startColorstr='#ffffff',
    endColorstr='#dfdfdf');
    Shadow(color='#cccccc', Direction=180, Strength=2);
    background-color: #ffffff;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.
    gradient(GradientType=0,startColorstr='#ffffff',
    endColorstr='#dfdfdf');
    Shadow(color='#cccccc', Direction=180, Strength=2)";
    background-color: #ffffff}
</style>
<![endif]-->

<!--[if lt IE 8]>
<style>
article section	{width: 250px}

article section figure	{margin-left: 0}
</style>
<![endif]-->