/* CSS Document */
@import url(/common/font/typicons/typicons.css);




article > section,
article > div {
	margin-bottom: 2.5rem;
}


h2 {
	margin: 1.0rem 0;
	font-size: 1.8rem;
}

h3 {
	margin: 1.0rem 0;
	font-size: 1.8rem;
}

h4 {
	margin: 1.0rem 0;
	font-size: 1.5rem;
}



.matsuriSet #title {
	margin: 0 1.0rem 2.0rem;
}

.matsuriSet #title > .mainImage {
	margin-bottom: 0;
}

.matsuriSet a:hover img {
	opacity: .8;
}

.info {
	padding: .1rem 0;
	background: #f0f0f0;
}

.info > section {
	margin: 0 0 .1rem;
}

.info a:link,
.info a:visited,
.info a:hover,
.info a:active {
	color: currentColor;
	text-decoration: none;
}

.info > section > a {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1.0rem;
	background: #fff;
}

.info > section:last-of-type {
	margin-bottom: 0;
}

.info > section > a .fig {
	flex: 0 0 10%;
	margin: 0;
	padding: 0;
}

.info > section > a .cap {
	flex: 0 0 87%;
}

.info a .under {
	text-decoration: underline;
	font-size: 1.2rem;
}

.info a:hover .under {
	text-decoration: none;
}

.cap p {
	font-size: 1.4rem;
	margin: 0 0 .2rem;
}

.cap p:last-of-type {
	margin-bottom: 0;
}

.listCollection {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 1.0rem 1.0rem 2.0rem;
	padding: 0;
}

.listCollection > li {
	flex: 0 0 100%;
	margin: 0 0 2.0rem 0;
	padding: 0;
}


.listCollection > li a {
	display: block;
	outline: none;
}

.listCollection > li a:link,
.listCollection > li a:visited,
.listCollection > li a:hover,
.listCollection > li a:active {
	color: currentColor;
	text-decoration: none;
}

.listCollection .year {
	margin: 0;
	padding: .2rem 0;
	font-size: 1.8rem;
	border-bottom: 2px solid #f0f0f0;
}

.listCollection figure {
	margin: 0;
}

.listCollection figure span {
	position: relative;
	display: block;
	/*padding-top: 100%;*/
	padding-top: 80%;
}

.listCollection figure img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	
	width: auto;
	height: auto;
	max-width: 95%;
	max-height: 95%;
	margin: 0 auto;
	padding: 0;
	border: 1px solid #000;
}

.listCollection figure figcap {
	text-align: center;
	font-size: 1.3rem;
}

.listCollection a .btnGo {
	margin: 0 2.0rem;
	padding: 1.0rem;
	text-align: center;
	color: #fff;
	background: #666;
}

.listCollection a:hover .btnGo {
	background-color: #808080;
}

.listCollection a:hover figure img {
	opacity: .8;
}

.listCollection2 {
	list-style: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: flex-start;
	margin: 0 1.0rem;
	padding: 0;
}

.listCollection2 > li {
	flex: 0 0 48%;
	margin: 0;
	padding: 0;
}

.listCollection2 .year {
	margin: 0 0 0 0;
	padding: .5rem 0;
	font-size: 1.8rem;
	border-bottom: 2px solid #f0f0f0;
}

.listCollection2 .btnGo {
	margin-left: 1.0rem;
	margin-right: 1.0rem;
	font-size: 1.2rem;
}

.listCollection2 .btnGo a  {
	background: none;
	padding-left: .5rem;
	padding-right: .5rem;
}

.calendar {
	margin: 0;
}

.listCalendar {
	list-style: none;
	margin: 0;
	padding: 0;
}

.listCalendar li {
	margin: 0;
	padding: .5rem;
	border-bottom: 1px solid #ccc;
}

.listCalendar date {
	display: block;
	margin: 0 0 .5rem;
	padding: 0;
	font-size: 1.3rem;
	color: #333;
}

.listCalendar > div {
	margin: 0;
	padding: 0;
}

.listCalendar > div p {
	margin: 0 0 .5rem;
	padding: 0;
	font-size: 1.3rem;
}


#dd {
	margin: 4.0rem 0;
	font-size: 1.4rem;
}

#dd .col {
	margin: 1.0rem;
}

#dd br {
	display: none;
}

#dd .banner:hover img {
	opacity: .75;
}

/*
.btnD a {
	display: inline-block;
	margin: 0;
	padding: 1.0rem 2rem;
	border: 1px solid #808080;
	border-radius: 2px;
	text-align: center;
	color: currentColor;
}

.btnD a:link,
.btnD a:visited,
.btnD a:hover,
.btnD a:active {
	text-decoration: none;
}

.btnD a:hover {
	background-color: #f0f0f0;
}
*/

.btnD a {
	color: currentColor;
}

.btnD a:link,
.btnD a:visited,
.btnD a:active {
	text-decoration: none;
}

.btnD a:hover {
	text-decoration: underline;
}

.btnD .typcn-chevron-right {
	display: inline-block;
	border: 1px solid #8f887e;
	border-radius: 50%;
	padding: 0 .4em;
	color: #fff;
	background: #8f887e;
	transform: scale(.7);
}


.btnGo {
	margin: 2.0rem 0;
	padding: 0;
	font-size: 1.3rem;
}

.btnGo a {
	display: block;
	margin: 0;
	padding: 1.0rem 2rem;
	border: 1px solid #808080;
	text-align: center;
	color: currentColor;
}

.btnGo a:link,
.btnGo a:visited,
.btnGo a:hover,
.btnGo a:active {
	text-decoration: none;
}

.btnGo a:hover {
	background-color: #f0f0f0;
}


a .btnGo {
	display: block;
	margin: 0;
	padding: .2rem .5rem;
	border: 1px solid #808080;
	text-align: center;
	color: currentColor;
}

a:link .btnGo,
a:visited .btnGo,
a:hover .btnGo,
a:active .btnGo {
	text-decoration: none;
}

a:hover .btnGo {
	background-color: #f0f0f0;
}

@media screen and (min-width: 768px) {
	
	
	.matsuriSet {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		box-sizing: border-box;
	}
	
	.matsuriSet > #title {
		flex: 1 0 50%;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		box-sizing: border-box;
		margin: 0 2.0rem 0 0;
	}
	
	.matsuriSet #title > .mainImage {
		flex: 1 1 33%;
	}
	
	.matsuriSet #title > .cap {
		flex: 1 1 67%;
		margin-left: 2.0rem;
	}
	
	.matsuriSet #title > .cap p {
		font-size: 1.6rem;
	}
	
	.matsuriSet > .info {
		flex: 0 0 22%;
	}

	.info {
		flex: 0 0 25%;
		padding: .5rem;
		border-radius: 4px;
		background: #f0f0f0;
	}
	
	.info > section {
		margin-bottom: .5rem;
	}
	
	.info > section > a {
		padding: .5rem;
		border-radius: 2px;
	}

	.info > section > a .fig {
		flex: 0 0 20%;
	}

	.info > section > a .cap {
		flex: 0 0 75%;
	}
	
	.headingMatsuri {
		padding-bottom: 1.0rem;
		border-bottom: 2px solid #cc333f;
	}

	.headingMatsuri2 {
		padding: .5rem;
		color: #fff;
		background-color: #cc333f;
	}
	
	.listCollection {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	
	.listCollection > li {
		flex: 0 0 29%;
	}
	
	.listCollection a .btnGo {
		margin: 0 2.0rem;
	}
	
	.listCollection2 {
		justify-content: flex-start;
	}
	
	.listCollection2 > li {
		flex: 0 0 22%;
		margin: 1.0rem;
	}
	
	.listCalendar li {
		display: flex;
		flex-flow: row nowrap;
		margin: 0;
		padding: .2rem;
		border-bottom: 1px dotted #ccc;
	}

	.listCalendar date {
		flex: 0 0 11rem;
		margin: .5rem 1.0rem .5rem 0;
	}

	.listCalendar p {
		flex: 1 1 auto;
		margin: .5rem 0;
		padding: 0;
	}
	
	.btnGo a {
		padding-left: 1.0rem;
		padding-right: 1.0rem;
	}

	#dd .col-set {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		width: 90%;
		margin: 0 auto;
	}
	
	#dd .col {
		margin: 0;
		padding: 20px 0;
	}
	
	#dd .col-set > .col:nth-of-type(1) {
		flex: 0 0 60%;
		order: 2;
	}
	
	#dd .col-set > .col {
		flex: 0 1 50%;
	}

	.btnD {
		margin-top: 1.0rem;
		margin-bottom: 0;
	}
	
	#dd .banner img {
		width: 300px;
		height: auto;
	}
	
	#dd br {
		display: inline-block;
	}
}