@charset "utf-8";

/*--------------------------------------------
■［2019年 紀州徳川家入国から400年!!］
--------------------------------------------*/

div#kishutokugawa div#mainvisual {
	background-image: url(../img/title.webp);
	padding: 6em 0;
	overflow: auto;
	height: auto;
	margin: 0;
	background-position: center center;
	background-size: cover;
}

div#kishutokugawa > div.main-container {
	padding: 4em 1em 0 1em;
	position: relative;
}

div#kishutokugawa > div.main-container div#outline {
	position: relative;
	margin-bottom: 3em;
}

div#kishutokugawa > div.main-container div#outline div#outline-text {
	padding: 3em;
	width: 55%;
	margin-left: auto;
	background-color: #f4f3fb;
	background-color: rgba(252, 242, 217, 0.9);
	z-index: 1;
	position: inherit;
	box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2);
}

div#kishutokugawa > div.main-container div#outline div#outline-text:before {
	position: absolute;
	left: 1em;
	top: 1em;
	width: 20%;
	padding-top: 20%;
	content: "";
	background-image: url(../img/002.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.4;
}

div#kishutokugawa > div.main-container div#outline div#outline-text p:last-child {
	margin-bottom: 0;
}

div#kishutokugawa > div.main-container div#outline-pgoto {
	background-image: url(../img/001.webp);
	background-position: center top 30%;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 10%;
	bottom: -10%;
	content: "";
	width: 55%;
	z-index: 0;
}

div#kishutokugawa h3 {
	font-weight: bold;
	color: #341D1A;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "游明朝体", "Yu Mincho", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.6em;
	margin: 3em 0 1em 0;
}

div#kishutokugawa h4 {
	font-weight: bold;
	color: #4ba835;;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "游明朝体", "Yu Mincho", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.4em;
	margin: 3em 0 1em 0;
}

ul.ban {
	display: flex;
	gap: 20px;
}
ul.ban li {
	max-width: calc((100% / 5) - ((20px * 2) / 3));
}

.w28 {
	width: 28%;
}

.w68 {
	width: 68%;
}

p.f-left {
	margin-right: 0;
}

p.f-right {
	margin-left: 0;
}


/*--------------------------------------------
■［レスポンシブ］
--------------------------------------------*/

@media screen and (max-width: 1600px) {
	ul.ban li {
		max-width: calc((100% / 3) - ((20px * 2) / 3));
	}
}

@media screen and (max-width: 1300px) {
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {

	.w28,
	.w68 {
		width: auto;
	}

	.f-left,
	.f-right {
		float: none;
	}
	div#storylist {
		margin: 0 1em;
	}
	ul.storylist {
		margin-left: -18px;
		margin-right: -18px;
	}

	div#kishutokugawa > div.main-container div#outline div#outline-text {
		padding: 1.5em;
		width: auto;
		margin-bottom: 1.5em;
	}

	div#kishutokugawa > div.main-container div#outline div#outline-text:before {
		width: 30%;
		padding-top: 30%;
	}

	div#kishutokugawa > div.main-container div#outline-pgoto {
		background-size: contain;
		position: relative;
		right: auto;
		top: auto;
		bottom: auto;
		width: auto;
		padding-top: 132%;
		display: block;
		margin-bottom: 1.5em;
	}

	ul.ban {
		gap: 10px;
		flex-wrap: wrap;
	}
	ul.ban li {
		max-width: calc((100% / 2) - ((10px * 1) / 2));
	}

}

@media screen and (max-width: 480px) {
	ul.ban {
		flex-direction: column;
	}
	ul.ban li {
		max-width: 100%;
	}

}


/*--------------------------------------------
■［プリント］
--------------------------------------------*/

@media print{
}