@charset "utf-8";

/* ホームページの幅を指定する*/
#wrap{
  width:98%;
  margin-right:auto;
  margin-left:auto;
}



* {
	margin: 0px;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align: center;
	-webkit-text-size-adjust: 100%;
}
body p {
	padding-top:10px;
	padding-bottom:10px;
}
img {
	border-style: none;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
#top_width {
	max-width: 1200px;
	margin: 0px auto;
}
div[id^="max_width"] {
	max-width: 1200px;
	margin: 0px auto;
}
#block1 {
	background-image: url(../images/texture02.png); /* 背景画像 */
	color: #000000;
	height: 100px;
}
#site_title {
	z-index: 1;
}
#title_big {
	display: none;
}
#stage {
	position:relative;
	background-image: url(../images/texture02.png); /* 背景画像 */
}
#stage ul {
	padding: 0px;
	position:relative;
}
#stage ul li {
	width: 100%;
	list-style-type: none;
	position:absolute;
	opacity: 0;
}
#stage img {
	max-width: 100%;
	height: auto;
}
#slide_control {
	position: absolute;
}
[id^='photo_'] {
	cursor: pointer;
}
#prev_button {
	cursor: pointer;
}
#next_button {
	cursor: pointer;
}
#play_stop {
	cursor: pointer;	
}
#main_img {
	background-image: url(../images/texture02.png); /* 背景画像 */
}
#menu_button {
	position:fixed;
	top:0px;
	left:0px;
	cursor: pointer;
	z-index:3;
}
#nav {
	position:fixed;
	top:0px;
	margin-left:-200px;
	width:191px;
	z-index:2;
}
#nav ul {
	padding: 0px;
	background-color:rgba(51,51,51,0.8);
}
#nav ul li {
	list-style-type: none;
}
#nav ul li a:link {
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #4A4A4A;
	display:block;
	text-align:left;
	color: #FFFFFF;
	text-decoration: none;
	-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;
}
#nav ul li a:visited {
	color: #FFFFFF;
	border-bottom: 1px solid #434343;
	text-decoration: none;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	display: block;
}
#nav ul li a:hover {
	color: #B9B9B9;
	text-decoration: none;
}
.content_even {
	background-image: url(../images/denim-texture221.png); /* 背景画像 */
}
.content_even a:link {
	color: #000000;
	-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;
}
.content_even a:visited {
	color: #000000;
}
.content_even a:hover {
	color: #767676;
}
.content_odd {
	background-image: url(../images/texture02.png); /* 背景画像 */
	color: #000000;
}
.content_odd a:link {
	color: #000000;
	-webkit-transition: color 0.3s ease-in-out 0s;
	-moz-transition: color 0.3s ease-in-out 0s;
	-ms-transition: color 0.3s ease-in-out 0s;
	-o-transition: color 0.3s ease-in-out 0s;
	transition: color 0.3s ease-in-out 0s;
}
.content_odd a:visited {
	color: #000000;
}
.content_odd a:hover {
	color: #A7A7A7;
}
footer a:link {
	text-decoration: none;
}
footer a:visited {
	text-decoration: none;
}
div[class^="bg-text"] {
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 5px;
	padding-right: 5px;
	z-index: 1;
	height:auto;
	overflow:hidden;
}
div[class^="bg-text"] h1 {
	font-size: 180%;
	font-weight: normal;
	padding-bottom: 5px;
}
div[class^="bg-text"] p {
	text-align:left;
}
#bg-text-footer {
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 5px;
	padding-right: 5px;
}
.color1 {
	color: #FF0000; /* 赤色 */
}
.color2 {
	color: #FF6600; /* 橙色 */
}
.color3 {
	color: #9900CC; /* 紫色 */
}
.supplement {
	font-size: 90%;
	color: #6C6C6C; /* 補足 */
}
#footer_nav {
	display: none;
}
.img_450_left img {
	display: block;
	margin: auto;
}
.img_450_right img {
	display: block;
	margin: auto;
}
/* news */
#news {
}
#news ul {
	padding: 0px;
}
#news ul li {
	list-style-type: none;
	border-bottom: #554b1e 1px dashed;
	padding-top: 10px;
	padding-bottom: 10px;
}
#news ul li:first-child {
	border-top: #554b1e 1px dashed;
}
/* faq */
#faq {
	text-align: left;
}
#faq dl {
}
#faq dl dt {
	padding-top: 20px;
	padding-bottom: 10px;
	color: #2D2D2D;
}
#faq dl dd {
	border-bottom: #554b1e 1px dashed;
	padding-top: 10px;
	padding-bottom: 20px;
}
#faq dl dt:first-child {
	border-top: #554b1e 1px dashed;
}

@media only screen and (min-width: 400px) { /* site_title img 切り替え */
#title_small {
	display: none;
}
#title_big {
	display: inline-block;
}
}

@media only screen and (min-width: 600px) { /* content 内の上下の余白を切り替え */
div[class^="bg-text"] {
	padding-top: 50px;
	padding-bottom: 50px;
}
div[class^="bg-text"] h1 {
	font-size: 200%;
	padding-bottom: 10px;
}
#bg-text-footer {
	padding-top: 50px;
	padding-bottom: 50px;
}
}

@media only screen and (min-width: 650px) { /* テキスト回り込みの切り替え */
.img_450_left {
	float: left;
	padding-right: 5px;
}
.img_450_right {
	float: right;
	padding-left: 5px;
}
}

@media only screen and (min-width: 950px) { /* nav 展開の切り替え / js の min_width（ブレークポイント）も同じ値に設定 */
#site_title {
	float: left;
	padding-right: 10px;
}
#menu_button {
	display: none;
}
#nav {
	top:auto;
	position: static;
	margin-left: 0px;
	width: auto;
}
#nav ul {
	background-color:rgba(0,51,102,1);
}
#nav ul li {
	float: left;
}
#nav ul li a:link {
	padding-top: 25px;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 25px;
	border-bottom: 0px solid #424242;
	color: #FFFFFF;
}
#nav ul li a:visited {
	color: #FFFFFF;
	padding-top: 25px;
	padding-right: 30px;
	padding-left: 30px;
	padding-bottom: 25px;
	border-bottom: 0px solid #424242;
}
#nav ul li a:hover {
	text-decoration: none;
	color: #B9B9B9;
}
#footer_nav {
	display: block;
}
}


/* マスキングテープ風見出し、ボックスに入れるデザイン */
.note1 {
  position: relative;
  background-color: #eee;
  padding: 1em;
}
.note h5 {
  position: absolute;
  top: -1em;
  background-color: rgba(100,100,100,0.4);
  padding: 0.25em 2em;
  color: #fff;
  transform: rotate(-4deg);
}


/* 吹き出し風、ボックスに入れるデザイン */
.note2 {
  position: relative;
  border: 3px solid #ccc;
  border-radius: 8px;
  padding: 1em;
}
.note::before,
.note::after {
  position: absolute;
  bottom: 100%;
  left: 10%;
  content: '';
  height: 0;
  width: 0;
  border: 12px solid transparent;
}
.note::before {
  border-bottom: 16px solid #ccc;
}
.note::after {
  border-bottom: 16px solid #fff;
  margin-bottom: -5px;
}


/* 段落を組んで表示 */
.multicolumnbox {
   -moz-columns: 4 200px;
   -webkit-columns: 4 200px;
   columns: 4 200px;
}

/* 段と段の間に罫線を引く */
		.multicolumnbox2 {
			-moz-column-width: 200px;
			-webkit-column-width: 200px;
			column-width: 200px;

			-moz-column-rule: solid pink 2px;
			-webkit-column-rule: solid pink 2px;
			column-rule: solid pink 2px;
		}
		
		
				.multicolumnbox3 {
			-moz-column-width: 180px;
			-webkit-column-width: 180px;
			column-width: 180px;

		}


/* グーグルマップをレスポンシブに対応 */
ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/* グリッド*/

.gridWrapper{
padding-bottom:20px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}
	
.grid{
float:left;
background:#fff;
}

.grid h3{
padding:20px 5px;
text-align:center;
border-top:4px solid #339966;
border-bottom:4px solid #339966;
}

.grid p{
	padding-top: 5px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 5px;
	text-align:center;
}

.gridWrapper img{
max-width:100%;
height:auto;
}


/*************
メイン コンテンツ
*************/
section.content{
padding:19px;
margin-bottom:20px;
background:#fff;
overflow:hidden;
box-shadow:0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
}


section.content02{
width:50%;
height:300px;
float:left;
padding:19px;
margin-bottom:20px;
background:#fff;
overflow:hidden;
box-shadow:0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
}



section.content li{
	list-style-position: inside;
	list-style-type: disc;
}



* html section.content{height:1%;}

section.content p{margin-bottom:5px;
letter-spacing: 1px;}

h3.heading{
padding:10px;
margin-bottom:15px;
font-size:18px;
border:1px solid #006948;
color:#fff;
background:#006948;
}

section.content img{
max-width:90%;
height:auto;
}

.alignleft{
	float: left;
	clear: left;
	margin-top: 3px;
	margin-right: 20px;
	margin-left: 0;
	margin-bottom: 10px;
}

.alignright{
	float: right;
	clear: right;
	margin-top: 3px;
	margin-right: 0;
	margin-left: 15px;
	margin-bottom: 10px;
}


/* 行間を広く*/
h1 {
	line-height: 1.1;
}
p {
	line-height: 1.7;
}

/* ボックスで囲む*/

.forecast {
	border: 5px solid #F60;
	padding: 25px;
	width: auto;
}


/* ボックスに装飾*/

.frame {
display: inline-block;
box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);

}





.polaroid1 {
  position: relative;
  width: 300px;
}
  
.polaroid1 img {
  border: 7px solid #e6e6fa;
  border-bottom: 45px solid #e6e6fa;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
  
.polaroid1 p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  color: #756F61;
  font-size:15px;
  line-height:1;
}

.polaroid2 {
  position: relative;
  width: 200px;
}
  
.polaroid2 img {
  border: 7px solid #e6e6fa;
  border-bottom: 45px solid #e6e6fa;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}
  
.polaroid2 p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  color: #756F61;
  font-size:15px;
  line-height:1;
}



.page-top {

    position: fixed;

    bottom: 60px;

    right: 40px;

    padding: 10px;

    background: #CCC;

    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    font-size: 12px;

    -ms-filter: "alpha(opacity=80)";

    -moz-opacity: 0.8;

    -khtml-opacity: 0.8;

    opacity: 0.8;

}

a { text-decoration: none; }

 
 
 /* flexboxの設定*/
.main {
  display: flex;
  justify-content: center;
}

.main section {
　flex-grow: 1;
  margin: 10px;
  border-radius: 5px;
  background: #F5F0CF;
  padding: 15px;
}
.main h2 {
  color: #060;
  font-size: 1.2rem;
}
.main p {
  margin-top: 10px;
}



/* responsive */
@media screen and (max-width: 700px) {
    .main {
　　display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	
    }
}

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