﻿@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/

/*================================================
 *  一般・共通設定
 ================================================*/


#contents {
	width:980px;
	margin:0 auto;
}

p {
	font-size: 14px;
	line-height: 22.4px;
	color: #000000;
}

a {
	text-decoration: none;
 	color: #00F;
}
a:hover {
	text-decoration: none;
	color: #000;
}

a:after {
  content: '';
  clear: both;
}



em {
	font-weight:bold;
}

strong {
	font-weight:bold;
	color:#ff0000;
}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted #ddd;
	border-left:5px solid #ddd;
}

/* トップ */
.imgT {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
	font-size: 20px;
	color: #ffffff;
}
.imgT img {
	float:left;
	margin:0 1em 0.5em 0;
	border-radius:5px;
}



/*================================================
 *  汎用クラス
 ================================================*/
/* 写真中央寄せ */
.imgC {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
	text-align:center;
}
.imgC img {
	border-radius:5px;
	margin-bottom:0.5em;
}

/* 写真左寄せ */
.imgL {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
}
.imgL img {
	float:left;
	margin:0 1em 0.5em 0;
	border-radius:5px;
}

/* 写真右寄せ */
.imgR {
	clear:both;
	overflow:hidden;
	margin-bottom:50px;
}
.imgR img {
	float:right;
	margin:0 0 1em 0.5em;
	border-radius:5px;
}

/* 2カラム（スマートフォンでは1カラム) */
.twoCol {
	overflow:hidden;
	margin-bottom:50px;
}
.twoColInner {
	overflow:hidden;
	margin-right:-2%;
}
.twoColInner div {
	width:48%;
	float:left;
	margin-right:2%;
}
.twoColInner div:nth-child(2n+1) {
	clear:both;
}
.twoColInner img {
	width:100%;
	margin-bottom:0.5em;
	border-radius:5px;
}
/* 2カラム2（スマートフォンでは1カラム) */
.twoColf {
	overflow:hidden;
	margin-bottom:5px;
	padding-top: 0px;
	padding-right: 15%;
	padding-bottom: 0px;
	padding-left: 15%;
}
.twoColInnerf {
	overflow:hidden;
	margin-right:-2%;
}
.twoColInnerf div {
	width:48%;
	float:left;
	margin-right:2%;
}
.twoColInnerf div:nth-child2(2n+1) {
	clear:both;
}

}
/* 3カラム（スマートフォンでは1カラム) */
.threeCol {
	overflow:hidden;
	margin-bottom:50px;
}
.threeColInner {
	overflow:hidden;
	margin-right:-3%;
}
.threeColInner div {
	width:31%;
	float:left;
	margin-right:2%;
}
.threeColInner div:nth-child(3n+1) {
	clear:both;
}
.threeColInner img {
	width:100%;
	margin-bottom:0.5em;
	border-radius:5px;
}
/* 3カラム2（スマートフォンでは1カラム) */
.threeColf {
	overflow:hidden;
	margin-bottom:5px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.threeColInnerf {
	overflow:hidden;
	margin-right:-3%;
}
.threeColInnerf div {
	width:31%;
	float:left;
	margin-right:2%;
}
.threeColInnerf div:nth-child(3n+1) {
	clear:both;
}
.threeColInner img {
	width:100%;
	margin-bottom:0.5em;
	border-radius:5px;
}
/*================================================
 *  カレンダー
 ================================================*/

.cal_wrapper {
max-width: 960px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}
.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 90% !important;
height: 600px;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}

@media screen and (max-width:400px) {
.googlecal {
position: relative;
padding-bottom: 120%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
width: 95% !important;
height: 100% !important;
}
}


/*================================================
 *  タブレット向けデザイン
 ================================================*/
/* スクロールバーを考慮して20px大きいサイズで切り替え */
@media screen and (max-width:979px) {
	#contents {
		box-sizing:border-box;
		width:100%;
		padding:0 10px;
	}
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	h2 {
		margin-top:30px;
	}

	.imgK {
		margin-bottom:30px;
	}
	.imgK img {
		max-width:100%;
	}

	.imgT {
		margin-bottom:30px;
	}
	.imgT img {
		max-width:100%;
	}


	.imgC {
		margin-bottom:30px;
	}
	.imgC img {
		max-width:100%;
	}

	.imgL {
		margin-bottom:30px;
	}
	.imgL img {
		float:none;
		max-width:100%;
		margin-right:0;
	}

	.imgR {
		margin-bottom:30px;
	}
	.imgR img {
		float:none;
		max-width:100%;
		margin-left:0;
	}

	.twoCol {
		margin-right:0;
		margin-bottom:30px;
	}
	.twoColInner {
		margin-right:0;
	}
	.twoColInner div {
		float:none;
		width:100%;
	}
	.twoColf {
		margin-right:0;
		margin-bottom:30px;
	}
	.twoColInnerf {
		margin-right:0;
	}
	.twoColInnerf div {
		float:none;
		width:100%;
	}

	.threeCol {
		margin-bottom:30px;
	}

	.threeColInner {
		margin-right:0;
	}
	.threeColInner div {
		float:none;
		width:100%;
	}
	.threeColf {
		margin-bottom:30px;
	}

	.threeColInnerf {
		margin-right:0;
	}
	.threeColInnerf div {
		float:none;
		width:100%;
	}
}
