@charset "UTF-8";

.map { margin-bottom:12px; }
#googlemap { width:100%; height:450px; }

.outline_block { display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto 20px auto; }
.outline_block div { flex:0 0 48%; }
.outline_block div dl.dl_table { margin-bottom:0; }

@media only screen and (max-width: 960px) {
}

@media only screen and (max-width: 767px) {
	#googlemap { width:100%; height:300px; }
	.outline_block div { flex:0 0 100%; }
}


/* --- story --- */
.history_table {
	display:flex; flex-wrap:wrap; align-items:flex-start;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) calc(50% - 2px),rgba(128,128,128,1) calc(50% - 2px),rgba(128,128,128,1) calc(50% + 2px),rgba(255,255,255,0) calc(50% + 2px),rgba(255,255,255,0) 100%);
 }

.history_table .h-event { flex:0 0 50%;  box-sizing:border-box; padding-bottom:20px; }
.history_table .h-event:nth-child(odd) { padding-right:30px; }
.history_table .h-event:nth-child(even) { padding-top:20%; padding-left:30px; }
.history_table .h-event>div {border:1px #ccc solid;}
.history_table .h-event:last-child { padding-bottom:0; }


h4.h-head { display:flex; align-items:center; padding:10px 10px; background-color:var(--wa-lightgray); color:#111; position:relative; margin:0; }
.h-time { padding:5px; text-align:center; white-space:nowrap; background-color:var(--wa-orange); color:#fff; font-size:0.9rem; border:none; }
.h-title {
	padding:5px 10px; font-size:1.3rem; line-height:1.3; border:none; color:#111;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif;
}
.h-body { padding:20px 15px 10px 15px; line-height:1.8; background-color:#fff; }

.history_table .h-event:nth-child(odd) .h-head { justify-content:flex-end; }
.history_table .h-event:nth-child(odd) .h-head .h-time { order:2; }
.history_table .h-event:nth-child(odd) .h-head .h-title { text-align:left/*right*/; }

.history_table .h-event:nth-child(odd) .h-head::after {
	border-color: var(--wa-orange);
	position: absolute;
	content: "";
	width: 0; height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left-width: 15px;
	border-left-style: solid;
	left: 100%;
}
.history_table .h-event:nth-child(odd) .h-head::before {
	position: absolute;
	content: "";
	width: 16px; height: 16px;
	border-radius:8px;
	left: calc(100% + 23px);
	border:2px #666 solid;
	background-color:#fff;
	box-sizing:border-box;
}

.history_table .h-event:nth-child(even) .h-head::after {
	border-color: var(--wa-orange);
	position: absolute;
	content: "";
	width: 0; height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right-width: 15px;
	border-right-style: solid;
	right: 100%;
}
.history_table .h-event:nth-child(even) .h-head::before {
	position: absolute;
	content: "";
	width: 16px; height: 16px;
	border-radius:8px;
	right: calc(100% + 23px);
	border:2px #666 solid;
	background-color:#fff;
	box-sizing:border-box;
}

.imgblk { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end }
.imgblk img { max-height:280px; margin-bottom:10px; }
.imgblk.col1 img { max-width:65%; }
.imgblk.col2 img { max-width:48%; }
.imgblk.col3 img { max-width:32%; }
.imgblk.col4 img { max-width:24%; }


@media only screen and (max-width: 767px) { /* === Mobile -767px === */   

	.history_table {
		background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) calc(50% - 1px),rgba(128,128,128,1) calc(50% - 1px),rgba(128,128,128,1) calc(50% + 1px),rgba(255,255,255,0) calc(50% + 1px),rgba(255,255,255,0) 100%);
	 }
	.history_table .h-event { flex:0 0 100%; padding-bottom:60px; }
	.history_table .h-event:nth-child(odd) { padding-right:0; }
	.history_table .h-event:nth-child(even) { padding-top:0; padding-left:0; }

	.history_table .h-event:nth-child(odd) .h-head::after,
	.history_table .h-event:nth-child(odd) .h-head::before,
	.history_table .h-event:nth-child(even) .h-head::after,
	.history_table .h-event:nth-child(even) .h-head::before { border:none;background-color:transparent; height:0; width:0; }

	.history_table .h-event:nth-child(odd) .h-head { justify-content:flex-start; }
	.history_table .h-event:nth-child(odd) .h-head .h-time { order:0; }
	.history_table .h-event:nth-child(odd) .h-head .h-title { text-align:left; }
}

