@charset "utf-8";

/*-------------------------------------------------------------- 
トップページ専用要素
-------------------------------------------------------------- */

/*************
/* ロゴ - 別記→common.css header.css
*************/

/**************************
/* メイン画像
**************************/
#mainBanner{
margin:35px auto 20px;
padding:4px;
position:relative;
line-height:0;
background:#eee;
}

#mainBanner img{
max-width:100%;
height:auto;
}

/*画像上キャプション*/
.slogan{
position:absolute;
max-width:100%;
height:auto;
bottom:10px;
left:10px;
padding:10px 15px;
line-height:1.4;
z-index:100;
background:url(../img/tp2.png);
}

.slogan h2{
padding-bottom:5px;
color:#fff;
font-size:18px;
}

.slogan h3{
font-size:12px;
color:#ccc;
}

.slogan p{
margin:5px auto;
font-size:12px;
color:#ccc;
}

.slogan a:link{color:#fff; text-decoration:none;}
.slogan a:hover{text-decoration:underline;}

/**************************
/* グリッド
**************************/
.gridWrapper{
/*clear:both;*//*↓float:leftとセット*/
padding:20px 0;
overflow:hidden;
}

* html .gridWrapper{height:1%;}
	
.grid{/*float:left;*//*↑clear:bothとセット*/}

.colDark,.colLight{
padding-bottom:5px;
color:#fff;
background:#1c1c1c;
}

.colLight{background:#005c98;}

.colDark h3,.colLight h3{
margin:10px 10px 5px;
font-size:14px;
font-weight:bold;
}

.colDark a,.colLight a{
display:block;
padding:3px;
border-radius:3px;
color:#fff;
background:#005c98;
}

.colLight a{background:#1c1c1c;}

.colLight a:hover,.colDark a:hover{
color:#1c1c1c;
background:#fff;
}

#sub .grid h3{
padding-left:7px;
margin-bottom:17px;
font-size:14px;
border-left:4px solid #eee;
}
#sub .grid time{margin-right:10px;}/* 追加 */

.grid p{padding:5px 10px;}

.grid ul{margin:5px 10px;}

.grid li{
padding:5px 0;
list-style:none;
border-bottom:1px dashed #ebebeb;
vertical-align:bottom;/* 追加 */
}

.grid li a{
text-decoration:none;
overflow:hidden;
}

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

/* フッター内のグリッド */
#footer .grid{background:transparent;}

#footer .col3 ul{margin:0 0 10px 5px;}

#footer .col3 li{
padding:0 6px 0 5px;
margin-bottom:3px;
list-style:none;
border-bottom:0;
display:inline-block;
border-right:1px solid #eee;
}


/*************
メイン コンテンツ
*************/
section.content{
margin-bottom:20px;
}

h3.heading{
padding-left:7px;
margin-bottom:17px;
font-size:14px;
border-left:4px solid #eee;
}

.alignleft{margin:3px 10px 10px 1px;}

.alignright{margin:3px 1px 10px 10px;}


/*************
/* フッター - 別記→common.css
*************/


/* PC用
------------------------------------------------------------*/
@media only screen and (min-width:940px){	
	#wrapper,.inner{
	width:940px;
	padding:0;
	}
	
	#wrapper{padding-bottom:20px;}
	
	#main{
	float:right;
	width:690px;
	margin-top:20px;
	}
	
	#subpage #sub{
	float:left;
	width:235px;
	overflow:hidden;
	margin-top:20px;
	}
	
	/* グリッド */
/*追加_float→flex用設定*/
.gridWrapper{
display:flex;
display:-moz-flex; display:-webkit-flex; display:-o-flex; display:-ms-flex;/*各ブラウザ設定*/
justify-content:space-between;
align-self:stretch;
-webkit-box-align:stretch; -o-box-align:stretch; -ms-box-align:stretch;/*各ブラウザ設定*/
	}

	.grid{width:235px;}
	.col2{width:470px;}
	.col3{width:705px;}
	.col100{width:100%;}/*追加_横幅目一杯*/
	.col22{width:26%;}/*追加_1/3カラム*/
	.col33{width:42%;}/*追加_2/4カラム*/
	.col44{max-width:20%;}/*追加_1/4カラム*/
	#subpage #sub .grid{
	width:100%;
	float:none;
	padding-bottom:30px;
	}
	
}


@media only screen and (max-width:960px){
	h1 p.inner{padding:0 2%;width:96%}
	#header .logo{padding-left:10px;}
	#header .info{padding-right:10px;}

	.grid{
	width:50%;
	margin:2px 0;
	}
	
	.col2,.col100,.col33/* 追加 */{
	float:none;
	width:100%;
	margin:0 0 20px;
	}
	
	.grid img{
	/*float:left;*//*→flex用設定*/
	margin-right:5px;
	}
	
	section.content{padding:0 10px;}
	
	section.content img{
	max-width:90%;
	height:auto;
	}
	
	#sub .grid{padding-bottom:20px;}
		
	#footer .grid{
	float:none;
	width:100%;
	margin-bottom:5px;
	text-align:center;
	}
}


/* iPad 縦 */
@media only screen and (max-width:768px){
	#header{padding-bottom:0;}
	#mainBanner{padding:3px;}
	
	.slogan a:link{text-decoration:underline;}
}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	.slogan{position:static;}
	.grid{width:100%;}
	
	.grid img{
	float:none;
	margin:20px auto 10px;
	}
	
	.grid p{text-align:left;}
	
	img.frame,#gallery img{border-width:2px;}
/*
  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}
別記→common.css */
	
	#footer .grid p{text-align:center;}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	#header .logo{padding-top:10px;}
  .info{padding:10px 0 0;}
	#mainBanner{margin-left:1px;}
	#mainBanner h3{font-size:80%;}
}