@charset "UTF-8";

/* Micro clearfix */

.cf { zoom: 1; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* 必要要素の初期設定 */

html {
  font-size: 62.5%;
  /* 62.5%を指定すると「1.0 rem = 10px」 */
}

body {
 width: 100%;
 margin: 0 0 1em;
 padding: 0;
 color:#222;
 background-color: #00003D;
 font-family: sans-serif;
}
a {
 text-decoration:none;
	color:#00003D;
}
h1{
 margin: 0 0.5em 0.5em;
 line-height: 1.1;
 letter-spacing:0px;
 text-align: center;
 color:#fff;
}
h2{
 margin: 0 2em 0.5em;
 line-height: 1.1;
 letter-spacing:-1px;
 color:#fff;
}
h4{
	margin: 0 0 0.5em;
	line-height: 1.1;
	text-align: center;
	color:#fff;
	font-size: 1.2rem;
	letter-spacing:-1px;
	}
h3, h5, h6 {
 margin: 0 0 0.5em;
 line-height: 1.1;
 font-family: "Hiragino Mincho Pro", "Hiragino Mincho ProN", serif;
 letter-spacing:-1px;
}
p {
 margin: 0 0 1em;
 color: #444;
 font-family: 'Asap', sans-serif;
 font-size: 22px;
 font-size: 2.2rem;
 line-height: 1.3;
 text-align: left;
}
ul {
 margin: 0 0 2em;
 padding: 0;
 list-style-position: inside;
}

#container1{
    border:0px solid black;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-flex-box;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-box-pack:center;
	}
.box11{
	width:75%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*薄緑系*/
		background: -webkit-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: -moz-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: -o-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: -ms-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: linear-gradient(to bottom, #EDF6EE, #EDF6EE);
	margin: 0 10% 0;
	padding:15px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	}
.box12{
	width:75%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EFFFCD;/*薄黄系*/
		background: -webkit-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: -moz-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: -o-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: -ms-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: linear-gradient(to bottom, #EFFFCD, #EFFFCD);
	margin: 0 10% 0;
	padding:15px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	}
#container2{
    border:0px solid black;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-flex-box;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-box-pack:center;
	}
.box21{
        width:82%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*オレンジ*/
 	margin: 4% 10% 4%;
	}
.box22{
        width:82%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*オレンジ*/
 	margin: 4% 10% 4%;
	}
#container3{
    border:0px solid black;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-flex-box;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-box-pack:center;
	}
.box31{
    width:40%;
	font-size:1.5em;
	background-color:#170368;/*ブルー*/
		background: -webkit-linear-gradient(top, #170368, #0000ff);
		background: -moz-linear-gradient(top, #170368, #0000ff);
		background: -o-linear-gradient(top, #170368, #0000ff);
		background: -ms-linear-gradient(top, #170368, #0000ff);
		background: linear-gradient(to bottom, #170368, #0000ff);
	padding:10px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	color: #00003D;
	}
.box32{
    width:40%;
	font-size:1.5em;
	background-color:#660f02;/*茶*/
		background: -webkit-linear-gradient(top, #660f02, #b81a3e);
		background: -moz-linear-gradient(top, #660f02, #b81a3e);
		background: -o-linear-gradient(top, #660f02, #b81a3e);
		background: -ms-linear-gradient(top, #660f02, #b81a3e);
		background: linear-gradient(to bottom, #660f02, #b81a3e);
	padding:10px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	color: #00003D;
	}


/* ベースレイアウト */

#wrapper {
 width: 100%;
}
header {
 padding: 1% 6%;
 background-color: #111;
 color: #fff;
 overflow: hidden;
}
nav {
 background-color: #111;
}
#common-contents {
 width: 100%;
 margin: 4em auto 2em;
}
article.main {
 width: 100%;
}
section {
 margin: 0 0 0;
}
footer {
 width: 100%;
 text-align: center;
 background-color: #00003D;
 color: #fff;
}

/* 各要素のデザイン、レイアウト */

header h1 {
 font-family: 'Lora', serif;
 font-weight: 400;
 font-style: italic;
 font-size: 40px;
 font-size: 4.0rem;
 text-align: center;
 margin: 0.5em 0 0.2em 0%;
}
p.tagline {
 font-size: 1.4rem;
 text-align: center;
 text-transform: uppercase;
 color:#c90;
}
nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 background-color: #111;
}
nav ul li {
 display: block;
 width: 100%;
 text-align: center;
 font-size: 20px;
 font-size: 2.0rem;
 line-height: 2.5em;
 color:#fff;
 border-top: 1px solid #222;
 border-bottom: 1px solid #000;
}
div.gmap  {
  margin: 0 0 2em;
}
div.gmap iframe {
  width: 100%;
  max-width: 100%;
}
article {
 margin: 0 0 2em;
 border-bottom: 1px solid #f0f0f0;
}
article.main h1 {
 font-size: 30px;
 font-size: 3.0rem;
}
article.main h2 {
 font-size: 28px;
 font-size: 2.8rem;
 margin-top: 1.5em;
}
small {
	font-size: 12px;
	font-size: 1.2rem;
	line-height:1.6em;
	text-transform: uppercase;
	}
img{
  width:100%;
  max-width:100%;
  height:auto;
  border:1px solid #f0f0f0;
}
	.clearfix{ zoom:1; }
	.clearfix:after{ content: ""; display: block; clear: both; background:#fff}


/*  パン屑  */
.breadcrumb4 ol{
    list-style:none;
}
.breadcrumb4 ol li{
    float:left;;
	line-height:2;
	font-size:1.3em;
}
.breadcrumb4 ol li a,
.breadcrumb4 ol li:last-child{
    color:#fff;
	display:block;
	padding:0 0.5em 0 1.5em;
	background:-webkit-linear-gradient(top,#888,#aaa);
		background: -moz-linear-gradient(top, #888, #AAA);
		background: -o-linear-gradient(top, #888, #AAA);
		background: -ms-linear-gradient(top, #888, #AAA);
		background: linear-gradient(to bottom, #888, #AAA);
	}
.breadcrumb4 ol li a::before,
.breadcrumb4 ol li a::after{
    position:relative;
	display:block;
	content:'';
	width:0.6em;
	height:1em;
	margin-left:auto;
	border-right:3px solid #fff;
}
.breadcrumb4 ol li a::before{
    margin-bottom:-1em;
	margin-right:-1em;
	-webkit-transform:skew(25deg);
		-moz-transform: skew(25deg);
		-o-transform: skew(25deg);
		-ms-transform: skew(25deg);
		transform: skew(25deg);	
}
.breadcrumb4 ol li a::after{
    margin-top:-1em;
	margin-right:-1em;
	-webkit-transform:skew(-25deg);
		-moz-transform: skew(-25deg);
		-o-transform: skew(-25deg);
		-ms-transform: skew(-25deg);
		transform: skew(-25deg);
}
	.breadcrumb4 ol li:nth-child(1) a{
		padding-left: 1em;
		border-radius: 5px 0 0 5px;
		background: #08C;
		background: -webkit-linear-gradient(top, #0AE, #08C);
		background: -moz-linear-gradient(top, #0AE, #08C);
		background: -o-linear-gradient(top, #0AE, #08C);
		background: -ms-linear-gradient(top, #0AE, #08C);
		background: linear-gradient(to bottom, #0AE, #08C);
	}
	.breadcrumb4 ol li:nth-child(1) a:before{
		background: #08C;
		background: -webkit-linear-gradient(top, #0AE, #08C 200%);
		background: -moz-linear-gradient(top, #0AE, #08C 200%);
		background: -o-linear-gradient(top, #0AE, #08C 200%);
		background: -ms-linear-gradient(top, #0AE, #08C 200%);
		background: linear-gradient(to bottom, #0AE, #08C 200%);
	}
	.breadcrumb4 ol li:nth-child(1) a:after{
		background: #08C;
		background: -webkit-linear-gradient(top, #0AE -100%, #08C 100%);
		background: -moz-linear-gradient(top, #0AE -100%, #08C 100%);
		background: -o-linear-gradient(top, #0AE -100%, #08C 100%);
		background: -ms-linear-gradient(top, #0AE -100%, #08C 100%);
		background: linear-gradient(to bottom, #0AE -100%, #08C 100%);
	}
	.breadcrumb4 ol li:nth-child(2) a{
		background: #09D;
		background: -webkit-linear-gradient(top, #0BF, #09D);
		background: -moz-linear-gradient(top, #0BF, #09D);
		background: -o-linear-gradient(top, #0BF, #09D);
		background: -ms-linear-gradient(top, #0BF, #09D);
		background: linear-gradient(to bottom, #0BF, #09D);
	}
	.breadcrumb4 ol li:nth-child(2) a:before{
		background: #09D;
		background: -webkit-linear-gradient(top, #0BF, #09D 200%);
		background: -moz-linear-gradient(top, #0BF, #09D 200%);
		background: -o-linear-gradient(top, #0BF, #09D 200%);
		background: -ms-linear-gradient(top, #0BF, #09D 200%);
		background: linear-gradient(to bottom, #0BF, #09D 200%);
	}
	.breadcrumb4 ol li:nth-child(2) a:after{
		background: #09D;
		background: -webkit-linear-gradient(top, #0BF -100%, #09D 100%);
		background: -moz-linear-gradient(top, #0BF -100%, #09D 100%);
		background: -o-linear-gradient(top, #0BF -100%, #09D 100%);
		background: -ms-linear-gradient(top, #0BF -100%, #09D 100%);
		background: linear-gradient(to bottom, #0BF -100%, #09D 100%);
	}
	.breadcrumb4 ol li:nth-child(3) a{
		background: #0AE;
		background: -webkit-linear-gradient(top, #0CF, #0AE);
		background: -moz-linear-gradient(top, #0CF, #0AE);
		background: -o-linear-gradient(top, #0CF, #0AE);
		background: -ms-linear-gradient(top, #0CF, #0AE);
		background: linear-gradient(to bottom, #0CF, #0AE);
	}
	.breadcrumb4 ol li:nth-child(3) a:before{
		background: #0AE;
		background: -webkit-linear-gradient(top, #0CF, #0AE 200%);
		background: -moz-linear-gradient(top, #0CF, #0AE 200%);
		background: -o-linear-gradient(top, #0CF, #0AE 200%);
		background: -ms-linear-gradient(top, #0CF, #0AE 200%);
		background: linear-gradient(to bottom, #0CF, #0AE 200%);
	}
	.breadcrumb4 ol li:nth-child(3) a:after{
		background: #0AE;
		background: -webkit-linear-gradient(top, #0CF -100%, #0AE 100%);
		background: -moz-linear-gradient(top, #0CF -100%, #0AE 100%);
		background: -o-linear-gradient(top, #0CF -100%, #0AE 100%);
		background: -ms-linear-gradient(top, #0CF -100%, #0AE 100%);
		background: linear-gradient(to bottom, #0CF -100%, #0AE 100%);
	}
	.breadcrumb4 ol li:last-child{
		padding-right:1em; border-radius:0 5px 5px 0;
	}


/* Media Queries による切り替え */

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

 header h1 {
  text-align: left;
}
p.tagline {
  text-align: left;
}
p {
  font-size: 20px;
  font-size: 2.0rem;
}
nav {
  padding: 0 0 0 6%;
  border-bottom: 1px solid #f0ece2;
}
nav ul {
  width: auto;
  border-top: 1px solid #999;
  background-color: #000;
}
nav ul li {
  float:left;
  width: 100px;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 2.5;
  border-left: 1px solid #999;
  border-right: 1px solid #111;
  border-bottom: none;
}
article {
  margin: 0 0 2em;
  border-bottom: none;
}
aside.side {
  float: center;
  width: 100%;
  margin: 0;
  padding: 0 0 0 0;
}
#sidebar1 {
  width: 47%;
  padding-left: 3%;
  float: left;
}
#sidebar2 {
  width: 47%;
  padding-right: 3%;
  float: right;
}
#container1{
        border:0px solid black;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-flex-box;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-box-pack:center;
	}
.box11{
	width:60%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*薄緑系*/
		background: -webkit-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: -moz-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: -o-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: -ms-linear-gradient(top, #EDF6EE, #EDF6EE);
		background: linear-gradient(to bottom, #EDF6EE, #EDF6EE);
	margin: 0 10% 0;
	padding:15px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	}
.box12{
	width:60%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EFFFCD;/*薄黄系*/
		background: -webkit-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: -moz-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: -o-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: -ms-linear-gradient(top, #EFFFCD, #EFFFCD);
		background: linear-gradient(to bottom, #EFFFCD, #EFFFCD);
	margin: 0 10% 0;
	padding:15px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	}
#container2{
    border:0px solid black;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-flex-box;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-box-pack:center;
	}
.box21{
        width:90%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*オレンジ*/
 	margin: 4% 10% 4%;
	}
.box22{
        width:80%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*オレンジ*/
 	margin: 4% 10% 4%;
	}
#container3{
        border:0px solid black;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-flex-box;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-box-pack:center;
	}
.box31{
        width:40%;
	font-size:1.5em;
	background-color:#170368;/*ブルー*/
		background: -webkit-linear-gradient(top, #170368, #0000ff);
		background: -moz-linear-gradient(top, #170368, #0000ff);
		background: -o-linear-gradient(top, #170368, #0000ff);
		background: -ms-linear-gradient(top, #170368, #0000ff);
		background: linear-gradient(to bottom, #170368, #0000ff);
	padding:10px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	color: #00003D;
	}
.box32{
        width:40%;
	font-size:1.5em;
	background-color:#660f02;/*茶*/
		background: -webkit-linear-gradient(top, #660f02, #b81a3e);
		background: -moz-linear-gradient(top, #660f02, #b81a3e);
		background: -o-linear-gradient(top, #660f02, #b81a3e);
		background: -ms-linear-gradient(top, #660f02, #b81a3e);
		background: linear-gradient(to bottom, #660f02, #b81a3e);
	padding:10px;
	boder:20px solid #eaf7c1;
	box-sizing:content-box
	box-shadow: 5px 5px 8px 3px #666;
	color: #00003D;
	}
}

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

 p {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.4;
}
#wrapper {
  width: 700px;
  margin: 0 auto;
}
header {
  padding: 1% 6%;
}
nav {
  padding: 0 6%;
}
#common-contents {
  width: 100%;
  padding: 0 0;
}
aside.side {
  float: center;
  width: 100%;
  margin: 0;
  padding: 0 0 0 0;
}
#sidebar1 {
  width: 47%;
  padding-left: 3%;
  float: left;
}
#sidebar2 {
  width: 47%;
  padding-right: 3%;
  float: right;
}
#container2{
    border:0px solid black;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-flex-box;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-ms-box-pack:center;
	-box-pack:center;
	}
.box21{
        width:90%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*オレンジ*/
 	margin: 4% 10% 4%;
	}
.box23{
        width:60%;
	text-align:left;
	font-size:1.5em;
	color:#00003D;
	background-color:#EDF6EE;/*オレンジ*/
 	margin: 4% 10% 4%;
	}
article {
  border-bottom: none;
}
article.main {
  float: left;
  width: 100%;
  margin: 0 3% 0 0;
}
}