@charset "utf-8";
/*
 * index.css
 * 
 * CSS for Page - HTML5/CSS3 Template by Masanori Kawase
 * 
 * Copyright 2013 Masanori Kawase, adiva
 * http://www.adiva.jp
 * 
 */

/*@import "global.css";
@import "layout.css";*/


/*
 * Global
 **********************************************/
body {
	width: 100%;
/*	text-align:center;*/

	/* Style */
	background:#303f6a;
}

/*
body, #bg, #header {
	min-width:480px !important;
}
*/

.pic {
	display:block;
	margin:0;
	padding:0;
}

/*.subtitle {
	margin-bottom:30px;
	padding-bottom:10px;
	border-bottom:#aaa solid 1px;
	line-height:1;
	color:#aaa;
	font-size: 200%;
	text-align:right;
}*/

/*
 * Header
 **********************************************/
#header {
/*	position:fixed;
	left:0;
	top:0;*/
	width:100%;
/*	height:80px;
	margin:0;
	padding:0;*/
/*	z-index:100;*/

	/* Style */

	background: #fff;
}
#title {
	padding:0;
	max-width:960px;
	margin:0 auto;
}
#logo_img {
	margin-left:20px;
	margin-bottom:12px;
}
#title_txt {
	display:inline-block;
	margin-left:20px;
	height:100px;
	font-size:300%;
	line-height:100px;
	color:#1d8ade;
	vertical-align:top;
}
#theme {
	margin:0 20px;
	height:50px;
	font-size:180%;
	line-height:1;
	color:#1d8ade;
	text-align:center;
/*background: #1dcccc;
color:#fff;
background: #fff;*/
color:#1dcccc;
}

@media only screen and (max-width: 959px) {
	#title_txt {
		font-size:240%;
	}
}

@media only screen and (max-width: 820px) {
	#title_txt {
		font-size:160%;
	}
	#theme {
		height:40px;
		font-size:140%;
	}
}
@media only screen and (max-width: 640px) {
	#title_txt {
		font-size:100%;
	}
	#theme {
		height:30px;
		font-size:100%;
	}
}
@media only screen and (max-width: 480px) {
	#logo_img {
		display:block;
		margin-bottom:0;
	}
	#title_txt {
		display:block;
		font-size:100%;
		height:30px;
		line-height:30px;
	}
	#theme {
		font-size:90%;
		height:40px;
		text-align:left;
	}
}
/*
 * Article
 **********************************************/
#contents_wrapper {
	width: 100%;
/*	max-width:960px;*/
	background:url(../img/bg.jpg) center top no-repeat;
	background-size:cover;
/*	margin:0 auto 0px auto;
	padding:0;
	overflow:hidden;*/

}

/*
 * Menu
 **********************************************/


#nav {
background:#1d8ade;
}
#menu {
max-width:960px;
margin:0 auto;
}
#menu li {
float:left;
}
#menu a {
padding:15px 20px;
font-size: 120%;
color:#fff;
}
#menu:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}



/*
 * Contents
 **********************************************/
#main {
	max-width:960px;
/*	width:100%;*/

min-height:740px;

margin:0 auto;
padding:60px 20px;

}

#main_img {
	max-width:920px;
	min-height:740px;
margin:0 auto;
padding:30px 0 60px 0;
/*display:none;*/
/*	width:100%;*/
/*margin:40px 13px;*/
/*	height:100%;*/

background:#fff;
background:rgba(255,255,255, 0.9);
color:#303f6a;

}


.subtitle {
	margin:0 20px 30px -20px;
	width:100%;
/*	position:relative;*/
/*	z-index: 2;*/
}
.subtitle > span {
	display:block;
	background: #1d8ade;
/*	padding:10px 0 10px 60px;*/
	padding-left:60px;
	height:46px;
	line-height:46px;
	color:#fff;
	box-shadow:inset 0 0 50px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.3);
	position:relative;
	font-size:160%;
	z-index:2;
}
/*.subtitle:before {
	content: ' ';
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
	background: transparent;
	border-style:solid;
	border-width:20px;
	right: -20px;
	bottom: -20px;
	border-color: transparent  transparent transparent #303f6a;
}*/
.subtitle:after {
	content: ' ';
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
	background: transparent;
	border-style:solid;
	border-width:20px;
	left: -20px;
	bottom: -20px;
	right:auto;
	border-color: transparent #303f6a transparent transparent;
}


.contentstitle {
	margin:0 20px 15px -20px;
	width:100%;
}
.contentstitle > span {
	display:block;
/*	background: #fff;*/
	background: #1dcccc;
	padding:10px 10px 10px 60px;
/*	color:#303f6a;*/
	color: #fff;
/*	font-weight:bold;*/
	box-shadow:inset 0 0 50px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.3);
	position:relative;
/*	font-size:100%;*/
	font-size:120%;
	z-index:2;
}
.contentstitle:after {
	content: ' ';
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
	background: transparent;
	border-style:solid;
	border-width:20px;
	left: -20px;
	bottom: -20px;
	right:auto;
	border-color: transparent #303f6a transparent transparent;
}





.paddingbox {
	padding:20px 60px 60px;
}
.mainbox {
	margin-bottom:30px;
line-height:1.6;
}
.memlist {
margin-top:0.5em;
}
.memlist dt {
margin-left:1em;
font-weight:bold;
}
.memlist dd {
margin-left:2em;
margin-bottom:1em;
}


#banner {
margin-top:60px;
text-align:center;
}

/*
 * Index Page
 **********************************************/
/*#info_wrapper {
	width: 100%;
	background:#111;
}
#info_wrapper:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
#idate {
	float:left;
	width: 30%;
	padding:20px 30px;
	background:#000;
	color:#ccc;
}
#news {
	float:left;
	width: 70%;
	padding:20px 30px;
	color:#ccc;
}*/

@media only screen and (max-width: 680px) {
/*	#menu, #main, #idate, #news {
		float:none;
		width: 100%;
		text-align:left;
	}
	#main, #main_img {
		min-height:auto;
	}
	#menu1 a {
		color:#222;
	}*/


	.subtitle > span {
		padding-left:20px;
	}
	.contentstitle > span {
		padding-left:20px;
	}

	.paddingbox {
		padding:10px 20px 20px;
	}
}

/*
@media only screen and (min-width: 1280px) {
	#contents_wrapper, #main_img {
		background-size:1600px auto;
	}
}
@media only screen and (min-width: 1600px) {
	#contents_wrapper, #main_img {
		background-size:2400px auto;
	}
}*/


/*
 * Footer
 **********************************************/
#footer {
	line-height:1.2;
	padding:20px;

	background:#fff;
	color:#303f6a;
}
#footer_inner {
max-width:960px;
margin:0 auto;
}
#copyright {
margin-top:20px;
text-align:right
}
#totop {
margin-bottom:20px;
text-align:right
}



















/* 
 * Global ------------------------------------------------------------
EXAMPLES FONT-SIZE
------------------
10px = 66.7%
11px = 73.3%
12px = 80%
13px = 86.7%
14px = 93.3%
15px = 100%
16px = 106.7%
17px = 113.3%
18px = 120%
19px = 126.7%
20px = 133.3%
21px = 140%
22px = 146.7%
23px = 153.3%
24px = 160%
25px = 166.7%
26px = 173.3%
27px = 180%
28px = 186.7%
29px = 193.3%
30px = 200%
 */

/* 
 * Style -----------------------------------------------------------------------
-webkit-filter: blur(8px);
-webkit-filter: hue-rotate(135deg);
-webkit-filter: grayscale(100%);
-webkit-filter: brightness(15%);
-webkit-filter: contrast(200%);
-webkit-filter: saturate(0%);
-webkit-filter: hue-rotate(0deg) saturate(100%) brightness(0%) contrast(100%);
 */



/*
 * Animation
 * -webkit-transition-property:width, height, -webkit-transform;
 * -webkit-transition-duration: .2s, .2s, .2s;
 * -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1), cubic-bezier(0.25, 0.1, 0.25, 1), cubic-bezier(0.25, 0.1, 0.25, 1);
 * 
 * -webkit-animation-name: fadein;
 * -webkit-animation-duration: 2s;
 * -webkit-animation-iteration-count: 1;
 * -webkit-animation-direction: alternate;
 * -webkit-animation-play-state: running;
 * -webkit-animation-delay: 0s;
 */

/*-webkit-transform:scale3d(1.5,1.5,0);*/