@charset "utf-8";
/* CSS Document */

/* ask css 雛形 2016-11-04 */

/* フォントスタイル */
/* 大きさを決める */
html {
  font-size: 62.5%;
  /* sets the base font to 10px for easier math */
}
 

body {
    font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-weight:normal;
	font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.6;
}

/* imgにリンク貼られてもボーダーをつけさせない */
/* レスポンシブ対応するよう予め設定しておく    */
/* 画像下に空白が出ないよう、bottomで揃える    */
img {
	max-width: 100%;
	height: auto;
	width: auto;　
	border: 0px;
	vertical-align:bottom;
}

/* リンク色とスタイル */
a:link {
	color: #171C61;
	text-decoration:none;
}
a:visited {
	color:#0066CC;
	text-decoration:none;
}
a:hover {
	color:#FF0000;
	text-decoration:underline;
}
a:active {
	color:#FF0000;
	text-decoration:none;
}

/* clearfix */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/* fontawasomeアイコンの後ろに空白 */
i.fa {
	margin-right:0.5rem;
}


/* ここから合同展用のスタイル */
/* デバイス共通の設定 */
header,section,footer {
	margin-bottom:2rem;
}

h2 {
	color:#006633;
	margin-left:2%;
}

header .container #caption {
	width:92%;
	margin:0 2%;
	padding:0 2%;
	border-bottom:#CCC 1px dashed;
}

section .container {
	margin-bottom:3rem;
}

/* イベント詳細 */
/* デバイス共通 */
.wrap {
	width:92%;
	margin:0 2%;
	padding:0 2%;
}

img#cityhall_map {
	width:50%;
}

/* ワークショップ */
/* デバイス共通 */
#workshop {
	width:96%;
	border:#f39700 4px solid;
	border-radius:4px;
	box-shadow:1px 1px 1px #FC9;
	padding:2%;
	margin-bottom:2rem;
}
#workshop h3 {
	line-height:0;
	color:#118baa;
}
#workshop dl {
	display:block;
}
#workshop #caution {
	width:100%;
	clear:left;
}


/* フッタ部分 */
footer .container #footer_link {
	text-align:right;
}

footer #footer {
	display:table;
	width:100%;
	color:#666;
	border-top:#999 1px solid;
	margin-top:1rem;
	padding-top:1rem;
	padding-bottom:2rem;
}

/* フッタ部分のリンク色とスタイル */
footer #footer a {
	color: #666;
}

/* mobile and Phablet */
@media screen (max-width : 749px) {
/* イベント詳細 */
.left {
	width:100%;
}
.middle {
	display:none;
}
.right {
	width:100%;
	}
/* ワークショップ */
#workshop dl {
	width:100%;
}
#workshop #figure {
	width:100%;
	text-align:center;
}
#workshop dl dt {
	width:100%;
}
#workshop dl dd {
	width:100%;
}
section .container .wrap .workshop_img {
	width:100%;
}
section .container .wrap .workshop_img div {
	width:100%;
	padding-bottom:1rem;
}

section .container #inq {
	width:98%;
	margin:0 1%;
}



/* こども・美術ク リンク */

section .container #kodomo,
section .container #club {
	width:100%;
}

/* フッタ */
footer #footer div {
	width:100%;
}
footer #footer .cel1 {
	max-width:115px;
}

}

/* tablet and Desktop */
@media screen and (min-width : 750px) {
/* イベント詳細 */
.float {
	float:left;
}
.middle {
	background-image:url(../../pics/common/dot_black.gif);
	background-position:left;
	background-repeat:repeat-x;
}

/* ワークショップ */
#workshop dl {
	float:left;
	width:65%;
}
#workshop #figure {
	float:left;
	width:35%;
	text-align:left;
}
#workshop dl dt {
	display:block;
	width:9rem;
	float:left;
	clear:left;
}
#workshop dl dd {
	display:block;
	float:left;
}
.workshop_img {
	display:table;
	width:96%;
	padding:0 2%;
}
.workshop_img div {
	display:table-cell;
	width:49%;
	padding-right:1%;
	padding-bottom:1%;
}

/* こども・美術ク リンク */

section .container #kodomo,
section .container #club {
	width:49%;
	padding-right:1%;
}

section .container #inq {
	width:90%;
	margin:0 5%;
}

/* フッタ */
footer #footer div {
	display:table-cell;
	vertical-align:bottom;
}
footer #footer .cel1 {
	width:15%;
	max-width:115px;
}
footer #footer .cel2 {
	width:49%;
	margin-left:1%;
}
footer #footer .cel3 {
	width:35%;
	text-align:right;
}
}