@charset "utf-8";

/* 共通
------------------------------------------------------------*/
*{
	margin:0;
	padding:0;
	font-family: "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
body {
	color: #000;
	font-size:18px;
	line-height:175%;
	letter-spacing:1px;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
}
a		{ color:#333; text-decoration:none; }
a:hover { color:#ee0b1e; }

p {
	display:block;
	text-align: left;
	margin:0 10px 30px;
}
.aligncenter { text-align:center !important; }

img { max-width:100%; }
img.thamb { max-width:70%; }
.imgBorder { border:1px solid #ddd; }

.margin-t0 {margin-top: 0 !important;}
.margin-t50 {margin-top: 50px !important;}
.margin-b0 {margin-bottom: 0 !important;}
.margin-b10 {margin-bottom: 10px !important;}
.margin-b30 {margin-bottom: 30px !important;}

/* アニメーションボタン */
a.AnimeBtn {
	display: inline-block;
	text-indent:0 !important;
	padding:7px 15px 5px;
	margin:0 0 10px; 
	line-height:100%;
	text-align: center;
	text-decoration: none;
	outline: none;
	position: relative;
	z-index: 2;
	background-color: #c1e7f9;
	border: 1px solid #c1e7f9;
	color: #000;
	font-size:95%;
	letter-spacing: 0;
	border-radius: 5px;
}
a.AnimeBtn::before,
a.AnimeBtn::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #c1e7f9;
}
a.AnimeBtn,
a.AnimeBtn::before,
a.AnimeBtn::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
a.AnimeBtn:hover {
	background-color: #fff;
	border-color: #000;
	color: #000 !important;
}
a.AnimeBtn::before { right: 0; }
a.AnimeBtn::after { left: 0; }
a.AnimeBtn:hover::before,
a.AnimeBtn:hover::after {
	width: 0;
	background-color: #000;
}
/* 左から右へアニメーション */
.AnimeLink{position: relative;display: inline-block;}
.AnimeLink:before{
	position: absolute;
	top: 26px;
	left: 0;
	content: "";
	display: inline-block;
	width: 0;
	height: 3px;
	background: #1065c8;
	transition: 0.5s;
}
.AnimeLink:hover:before{ width: 100%; }
@media only screen and (max-width:640px){
	img.thamb { max-width:100%; }
	a.AnimeBtn{font-size:85%;}
	p{font-size:17px;line-height: 135%;}
}

/* 全体
------------------------------------------------------------*/
#wrapper{
	display:block;
	width:100%;
	height:100%;
	min-height:100%;
	margin:0;
	background:#FFF;
	position: relative;
}
body > div#wrapper { height: auto; }
.inner {
	width:900px;
	margin:0 auto;
	padding:60px 0 40px;
}
.BgBlue{background: #e6f5fc;}
.BgYel{background: #fbfb83;}
.BgGray { background:#f5f5f5;}
.BgGrid{background: url( "images/bg_grid.gif");}
@media only screen and (max-width:899px){
	.inner{ width:94%;padding:40px 0 20px;}
}

/* タイトル
------------------------------------------------------------*/
h1 {
	display:block;
	margin:0 auto 20px;
	font-size: 245%;
	font-weight: bold;
	line-height: 115%;
	letter-spacing: 0;
	color: #1065c8;
}
h1 strong{
	background: linear-gradient(transparent 70%, #e6f5fc 70%);
	display: inline-block;
}
h1 span{
	display:block;
	font-size: 70%;
}
h1 span.Furoku{
	font-size: 40%;
	letter-spacing: 0;
	background: #FFF;
	display: inline-block;
	line-height: 100%;
	padding: 7px 10px 5px;
	border-radius: 7px;
	margin-bottom: 5px;
}
h2 {
	margin: 0 0 40px;
	text-align: center;
	font-size:155%;
	font-weight: bold;
	color: #1065c8;
}
h2 span {
     position: relative;
     display: inline-block;
     padding-bottom:10px;
     border-bottom: 4px solid #1065c8;
}
h2 span::before, h2 span::after {
     position: absolute;
     top: 100%;
     left:50%;
     transform:translateX(-50%);
     content: '';
     border: 10px solid transparent;
}
h2 span::before {border-top: 10px solid #1065c8;}
h2 span::after{margin-top: -5px;border-top: 10px solid white;}
@media only screen and (max-width:640px){
	h1{font-size: 205%;}
	h1 span{font-size:65%;}
	h1 span.Furoku{font-size: 45%;padding: 5px 8px 3px;}
	h2{font-size:135%;}
}
/* ヘッダー
------------------------------------------------------------*/
#header{border-top:7px solid #1065c8;}
#header .inner { padding:40px 0 !important; max-width: 600px; }
#header img{max-width:60%;}
#header p { margin: 0 auto 20px;}
@media only screen and (max-width:640px){
	#header .inner{padding:20px 0 !important;max-width: 92%;}
}
/* フッター
------------------------------------------------------------*/
#footer{
	width:100%;
	display:block;
	clear:both;
	margin:0;
	padding:60px 0 60px;
    position:absolute;
	background:#e6f5fc;
	border-top: 5px solid #fbfb83;
}
#footer ul {
    margin: 0 auto 20px;
    padding: 0;
	font-size:85%;
	text-align:center;
}
#footer ul li{
	margin: 0 15px 10px;
	display: inline-block;
}
#footer ul li a{color:#1065c8;}
#footer ul li a:hover{ color:#000; }
#footer .address {
	display:block;
	clear:both;
	font-size:85%;
	margin:20px auto;
	text-align:center;
	color:#1065c8;
}
/* ページトップへ */
#pagetop {
    position: fixed;
    bottom: 0;
    right: 10px;
	z-index:2;
}
#pagetop a {
    width: 100px;
    height: 108px;
    display: block;
    text-align: center;
}
@media only screen and (max-width:640px){
	#footer{padding:20px 0 60px;}
	#footer .address{line-height:125%;}
	#footer ul li{margin: 0 10px 10px;letter-spacing: 0;}
}

/* レイアウト
------------------------------------------------------------*/
.DetailBox{
  margin: 50px 0 0;
  padding: 30px 10px 20px;
  position: relative;
  border: 1px solid #1065c8;
}
.DetailBox h3{
  position: absolute;
  top: -0.8em;
  left: 20px;
	color: #1065c8;
  font-weight: bold;
  font-size: 110%;
  background: #fff;
  padding: 0 10px;
}
.DetailBox p{
	line-height: 145%;
	margin-bottom:10px;
}
.DetailBox img{
	max-width: 450px;
	max-height: 400px;
	border: 1px solid #eee;
	display: block;
	margin: 20px auto 5px;
}
@media only screen and (max-width:640px){
	.DetailBox{padding: 30px 5px 10px;}
	.DetailBox h3{font-size: 100%;letter-spacing: 0;line-height: 105%; top: -0.5em;left: 10px;padding: 0 3px;}
	.DetailBox img{max-width:100%;}
}