@charset "utf-8";

@media print, screen and (min-width: 651px) {
	.display-sp {
		display:none !important;
	}
}
@media screen and (max-width: 650px) {
	.display-pc {
		display:none !important;
	}
}

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	list-style-type:none;
	font-size: medium;
	color: #000;
	font-family: "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Helvetica Neue", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 300;
	line-height: 1.65em;
}

a {
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

* {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
	transition: 0.3s ease-in-out;
}

img {
	vertical-align:bottom;
	width:100%;
}

/* -----------------------------------------------------------------------
　トップ・イントロ
--------------------------------------------------------------------------*/
.page-wrap {
	padding:20px 30px 80px;
}

@media screen and (max-width: 650px) {
	.page-wrap {
		padding:10px 5% 40px;
	}
}

.top-logo {
	max-width:880px;
	margin:0 auto 80px;
}

.intro-wrap {
	position:relative;
	max-width:900px;
	margin:0 auto 90px;
	padding-top:520px;
}

@media screen and (max-width: 960px) {
	.top-logo {
		margin:0 auto 40px;
	}
	.intro-wrap {
		padding-top:67%;
	}
}

@media screen and (max-width: 650px) {
	.intro-wrap {
		margin:0 auto 40px;
	}
}

.concept-map {
	width:100%;
	position:absolute;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	z-index:-1;
}

.lead-wrap {
	max-width:620px;
	margin:0 auto;
}

.lead-text {
	font-size:17.5px;
	line-height:2.8;
}

@media screen and (max-width: 650px) {
	.lead-wrap {
		width:90%;
	}
	.lead-text {
		font-size:16px;
		line-height:2;
		text-align: justify;
	}
}

@media screen and (max-width: 500px) {
	.lead-text {
		font-size:15px;
		line-height:1.8;
	}
}

@media print, screen and (min-width: 1001px) {
	.photo-wrap {
		display:flex;
		justify-content: space-between;
		max-width:1200px;
		margin:0 auto 90px;
	}
	.art-zone-photo {
		width:32%;
	}
}

@media screen and (max-width: 1000px) {
	.photo-wrap {
		max-width:500px;
		margin:0 auto 30px;
	}
	.art-zone-photo {
		margin-bottom:20px;
	}
}

.photo-caption {
	font-size:13px;
	text-align:right;
	padding:2px 0 0 0;
}

/* -----------------------------------------------------------------------
　表組み
--------------------------------------------------------------------------*/
.artwork-table-wrap {
	max-width:900px;
	margin:0 auto 100px;
}

.artwork-table-header {
	background:#ef8593;
	font-size:17px;
	color:#fff;
	text-align:center;
	line-height:1;
	padding:5px 0;
	margin-bottom:13px;
}

.artwork-table-body {
	margin-bottom:30px;
}

@media print, screen and (min-width: 701px) {
	.artwork-table-wrap {
		border-bottom:1px dotted #999;
	}
	.artwork-table-row {
		display:flex;
		padding:0 2px;
		margin-bottom:10px;
	}
	.architecture {
		width:28%;
		font-size:16px;
	}
	.artist {
		width:22%;
		font-size:16px;
	}
	.artwork {
		width:50%;
		font-size:16px;
	}
}

@media screen and (max-width: 700px) {
	.artwork-table-wrap {
		margin:0 auto 50px;
	}
	.artwork-table-header {
		font-size:16px;
	}
	.artwork-table-row {
		padding:0 0 15px 2px;
		border-bottom:1px dotted #999;
		margin-bottom:15px;
	}
	.architecture,
	.artist,
	.artwork {
		font-size:15px;
	}
}

/* -----------------------------------------------------------------------
　津山建築祭リンク
--------------------------------------------------------------------------*/
 .tsuyama-af-logo {
 	display:block;
 	width:320px;
 	margin:0 auto;
 }
 
 @media screen and (max-width: 650px) {
 	 .tsuyama-af-logo {
 	 	width:260px;
 	 }
 }
 
  .tsuyama-af-logo:hover {
  	opacity:0.7;
  }