@charset "UTF-8";
body {
  
  font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  overflow-y: scroll;
	  background: repeating-linear-gradient(-45deg, #747474,#747474 5px, #666 0, #666 10px);

}

 

#photo {background-image:url(img/back.jpg);
background-repeat:no-repeat;
background-position: right bottom;
background-size:contain; 
width:100%;
}

#center_Box{
  width:100px;
  height:100px;
  background-color: #003366;
  padding: 50px 0px 0px 30px;
  margin:auto;
}




/*FONT SIZE&STYLE*/
.fs10{
	font-size:10px
}
.fs12{
	font-size:12px;
		line-height:120%;
}
.fs14{
	font-size:14px
}
.fs16{
	font-size:16px
}

.l_h120{
	line-height:120%;
}
.l_h130{
	line-height:130%;
}

.l_h180{
	line-height:180%;
}
.l_h240{
	line-height:240%;
}

.fw_b{
	font-weight:bold;/*太字*/
}

.col_red{
	color:#F00;
}
.col_white{
	color:#FFF;
}
.col_1{
	color:#003366;/*よく使うサブカラーに変更*/
}
.col_2{
	color:#005bb5;/*他によく使うカラーがあれば変更*/
}
.col_3{
	color:#ffe55f;/*他によく使うカラーがあれば変更*/
}


table,th,td{border:solid 1px #003366;
}
table{border-collapse: collapse;
margin-left: auto; margin-right: auto}

th,td {padding: 10px 20px 10px 20px}

th {width: 150px; background-color: #ffe55f; text-align: left}
td {width: 450px; background-color: #fff; text-align: left}
ul,ol{
	list-style-type: none;
}
/* サイト名 */
.site h1 a {
  color: #000000;
  text-decoration: none
}
.site h1 {
  margin: 0;
  font-size: 30px
}
.site img { border: none }
/* ヘッダー画像 */
.topimg {
  max-width: 100%;
  height: auto;
  vertical-align: bottom
}

.menu i { margin-right: 5px; }
/* キャッチコピー */
.catch {
  margin: 0;
  padding: 10px 15px;
  background-color: rgba(255,255,255,0.8);
  font-size: 28px
}
/* ヘッダー画像にキャッチコピーを重ねる */
.top { position: relative }
.catch {
  position: absolute;
  bottom: 7%;
  left: 3%
}
/* お知らせ */
.news {
  padding: 5px 15px;
  border: solid 5px #dddddd;
  height: 150px;
  overflow: auto;
}
.news h1 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 21px;
  color: #666666;
  font-family: 'Lobster', cursive;
}
.news ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.news li a {
  display: block;
  padding: 5px;
  border-bottom: dotted 2px #dddddd;
  color: #000000;
  font-size: 14px;
  text-decoration: none
}
.news li a:hover { background-color: #eeeeee }
.news time {
  color: #888888;
  font-weight: bold
}
.news a:after {
  content: "";
  display: block;
  clear: both
}
.news time {
  float: left;
  width: 60px
}
.news .text {
  float: none;
  width: auto;
  margin-left: 60px
}
/* コピーライト */
.copyright p {
  margin: 0;
  color: #666666;
  font-size: 14px;
  text-align: center;
  color: #FFF
}
/* BOX5をバーの形にする */
.footer {
  padding-top: 10px;
  padding-bottom: 600px;
  background-color: #003366
}
/* ボックスの左右 */
.header, .info, .footer, {
  padding-left: 0px;
  padding-right: 0px
}
/* ボックスの上下 */
.header {
  padding-top: 15px;
  padding-bottom: 10px;
	background:#003366;
}


 .wrapper{
 height:auto;
margin-bottom:20px;
 padding-left: 15px;
 padding-right: 15px;
 }

.wrapper-inner{
		background:#FFF;
 font-size:14px;
  /* border: solid 2px #005bb5;*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 /* -webkit-box-shadow: 3px 3px 3px #ccc;
  box-shadow: 3px 3px 3px #ccc;*/
  border-radius: 6px
}


/*profile*/	
.wrapper-inner:after	{
	content: "";
	display: block;
	clear: both;
		}
	
.wrapper01{
  float: left;
  width: 50%;
  padding:15px;}
  
.wrapper02{
  float: left;
  width: 50%;
  padding:15px;
	}


.wrapper-inner00{
  background:#FFF;
  font-size:16px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 6px
}
.wrapper-inner00:after	{
	content: "";
	display: block;
	clear: both;
		}


.wrapper03{
  font-size:16px;
  float: left;
  width: 100%;
  padding:15px;
	}

	
	
		
.info {
  padding-top: 20px;
  padding-bottom: 0px
}
.info-main { padding-bottom: 20px }



.info-sub .address {
  color: #FFF;
  background-color: #009FE8;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 3px;
  border-left: solid 5px #003EE8;
  border-bottom: solid 1px #003EE8;
}


.info-sub p {
  padding-left: 15px;
  font-size: 14px;
}

section .heading {
	margin-top:15px;
	margin-bottom:15px;
  color: #FFF;
  background-color: #005bb5;
  padding-left: 15px;
	padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 3px;
  border-left: solid 5px #003366;
  border-bottom: solid 1px #003366;
}




/* ########### 359px以下 ########### 
max-widthビューエリアの最大幅。このサイズより小さい場合に適用*/
@media (max-width: 359px) {
/* サイト名 */
.site img {
  width: 225px;
  height: auto
}
}

/* ########### 599px以下 ########### */
@media (max-width: 599px) {
/* ナビゲーション */
.menu li a {
  padding: 10px 15px;
  font-size: 14px;
	
	
}

/* キャッチコピー */
.catch {
  padding: 5px 10px;
  font-size: 12px
}

}


/* ########### 767px以下 ########### */
@media (max-width: 767px) {
/* トグルボタン*/
#menubtn {
  padding: 6px 12px;
  border: solid 1px #aaaaaa;
  border-radius: 5px;
  background-color: #ffffff;
  position: absolute;
  top: 20px;
  right: 15px;
  cursor: pointer;
}
#menubtn:hover { background-color: #dddddd }
#menubtn:focus { outline: none }
#menubtn i {
  color: #888888;
  font-size: 18px
}
#menubtn span {
  display: inline-block;
  text-indent: -9999px
}
/* ナビゲーションメニュー（縦並び） */
.menu { display: none }
.menu ul {
  margin: 0;
  padding: 0;
  list-style: none
}
.menu li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  font-size: 14px;
  text-decoration: none
}
.menu li a:hover {
background-color: #005bb5;
}


.copyright p {
  margin: 5px;
  color: #666666;
  font-size: 12px;
  text-align: center;
  color: #FFF
}
.site img { padding-left: 15px }

.info {
  padding-left: 15px;
  padding-right: 15px
}





.wrapper-inner{
font-size:10px;
  /*border: solid 2px #005bb5;*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 /* -webkit-box-shadow: 3px 3px 3px #ccc;
  box-shadow: 3px 3px 3px #ccc;*/
  border-radius: 6px;
 }
 
 
.pickup { text-align:center;
padding-top:15px;
padding-bottom:30px;
}

img {
	border: 0;
	max-width: 90%;
	height: auto;
}




}



/* ########### 768px以上 ###########
min-widthビューエリアの最小幅。このサイズより大きい場合に適用*/
@media (min-width: 768px) {
/* トグルボタン */
#menubtn { display: none }
/* ナビゲーション */
#menu { display: block !important }
.menu ul {
  margin: 0;
  padding: 0;
  list-style: none
}
.menu li a {
  display: block;
  padding: 10px 15px;
  color: #000000;
  font-size: 14px;
  text-decoration: none;
	color:#FFF
}
.menu li a:hover { background-color: #005bb5 }
.menu ul:after {
  content: "";
  display: block;
  clear: both
}
.menu li {
  float: left;
  width: auto
}
/* BOX1とBOX2を横に並べる設定 */
.header:after {
  content: "";
  display: block;
  clear: both
}
.header-site {
  float: left;
  width: auto
}
.header-nav {
  float: right;
  width: auto;

}

/* BOX4-1とBOX4-2を横に並べる設定 */
.info:after {
  content: "";
  display: block;
  clear: both
}
.info-main {
  float: left;
  width: 70%;
  padding-right: 20px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
.info-sub {
  float: left;
  width: 30%
}


/*works*/

.pickup { font-size:12px;
line-height: 1.2em;
}

.pickup a:hover{
	opacity: 0.7;
}


.pickup:after {
  content: "";
  display: block;
  clear: both
}
.pickup-1 {
  float: left;
  width: 20%;
  padding: 0px 15px 45px 15px;
	text-align:center;
}



.pickup-2 {
  float: left;
  width: 20%;
  padding: 0px 15px 45px 15px;
	text-align:center;
}
.pickup-3 {
  float: left;
  width: 20%;
  padding: 0px 15px 45px 15px;
	text-align:center;
}
.pickup-4 {
  float: left;
  width: 20%;
  padding: 0px 15px 45px 15px;
	text-align:center;
}
.pickup-5 {
  float: left;
  width: 20%;
  padding: 0px 15px 45px 15px;
	text-align:center;
}


img {
	border: 0;
	max-width: 100%;
	height: auto;
}


}

/* ########### 1190px以下 ########### */
@media (max-width: 1190px) {
.site img { padding-left: 15px }
.info {
  padding-left: 15px;
  padding-right: 15px;
}

section {
  padding-left: 15px;
  padding-right: 15px
}

.photo {
  margin-left:15px;
  margin-right:15px;
  margin-top:15px;
}

}

/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {
/* 全体の横幅を固定 */
.photo {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-top:15px;
}

.info, .header-inner, .footer-inner, .wrapper-inner,  .wrapper-inner00, .heading, .pickup {
  width: 960px;
  margin-left: auto;
  margin-right: auto;

}
/* BOX Aの下に罫線を挿入 */
.header {
  margin-bottom: 0px;
  /*border-bottom: solid 1px #dddddd*/
}

}