@charset "utf-8";

/* ============================================================

history.css

============================================================ */


/* ------------------------------------------------------------

　#mainimg

------------------------------------------------------------ */

#history #mainimg {
	padding:0;
	background:url(../img/history/mainimg.jpg) no-repeat 50% 100%;
	box-sizing:border-box;
}
#history #mainimg .pageTTL{
	width:100%;
	font-size:1.3rem;
	line-height:1.5em;
	letter-spacing:0.15em;
	color:#ffffff;
	font-family:'SourceHanSerifJP';
	text-align:center;
	text-shadow: 0px 0px 5px #af5e33,0px 0px 5px #af5e33,0px 0px 10px #af5e33,0px 0px 10px #af5e33;
}

/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

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

	#history #mainimg {
		min-width:320px;
		height:180px;
		background-size:cover;
	}
	#history #mainimg .eng{
		width:90%;
		margin:0 auto;
		padding-top:70px;
	}
	
}


/*----------------------------------------------------------
	Display：560px →（ tablet pc ）
----------------------------------------------------------*/

@media screen and (min-width: 560px) {

	#history #mainimg {
		min-width:560px;
		height:260px;
		background-size:cover;
	}
	#history #mainimg .eng{
		width:90%;
		max-width:760px;
		margin:0 auto;
		padding-top:90px;
	}
	#history #mainimg .pageTTL{
		margin-top:-5px;
		font-size:1.5rem;
		line-height:1.5em;
		letter-spacing:0.15em;
	}

}


/*----------------------------------------------------------
	Display：960px →（ pc ）
----------------------------------------------------------*/

@media screen and (min-width: 960px) {

	#history #mainimg {
		min-width:960px;
		height:300px;
		background-size:1200px auto;
	}
	#history #mainimg .eng{
		width:760px;
		margin:0 auto;
		padding-top:110px;
	}
}


/*----------------------------------------------------------
	Display：1200px →（ pc ）
----------------------------------------------------------*/

@media screen and (min-width: 1200px) {

	#history #mainimg {
		background-size:cover;
	}

}




/* ------------------------------------------------------------

　#memory

------------------------------------------------------------ */

#history #memory {
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
}
#history #memory .catchcopy {
	width:100%;
	text-align:center;
	font-family:'SourceHanSerifJP';
}
#history #memory .memoryBox {

}



/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

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

	#history #memory {
		padding:40px 5% 60px;
	}
	#history #memory .catchcopy {
		font-size:1.8rem;
		line-height:1.8em;
		letter-spacing:0.1em;
		text-indent:0.1em;
	}
	#history #memory .memoryBox {
		margin-top:30px;
	}
	#history #memory .memoryBox .photo{
		width:100%;
	}
	#history #memory .memoryBox .txtBox{
		width:100%;
		padding:30px 15px 0;
		font-size:1.3rem;
		line-height:2em;
		letter-spacing:0.05em;
		font-family:'SourceHanSerifJP';
		box-sizing:border-box;
	}
	
}


/*----------------------------------------------------------
	Display：560px →（ tablet pc ）
----------------------------------------------------------*/

@media screen and (min-width: 560px) {

	#history #memory {
		max-width:1040px;
		padding:50px 20px 80px;
	}
	#history #memory .catchcopy {
		font-size:2.4rem;
		line-height:2em;
		letter-spacing:0.2em;
		text-indent:0.2em;
	}

	#history #memory .memoryBox {
		margin-top:40px;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		box-sizing:border-box;
		-webkit-box-pack: space-between;
		-ms-flex-pack: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		-ms-flex-pack: wrap;
		flex-wrap: wrap;
	}
	#history #memory .memoryBox.pR {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	#history #memory .memoryBox .photo{
		width:41.5%;
	}
	#history #memory .memoryBox .txtBox{
		width:55.5%;
		padding-left:10px;
		font-size:1.3rem;
		line-height:2em;
		letter-spacing:0.05em;
		font-family:'SourceHanSerifJP';
		box-sizing:border-box;
	}
	
}


/*----------------------------------------------------------
	Display：960px →（ pc ）
----------------------------------------------------------*/

@media screen and (min-width: 960px) {

	#history #memory .memoryBox .txtBox{
		font-size:1.4rem;
		line-height:2.4em;
	}

}



/* ------------------------------------------------------------

　#historyTable

------------------------------------------------------------ */

#historyTable {
	width:100%;
	margin:0;
	box-sizing:border-box;
	page-break-after: always;
}
#historyTable .inner{
	width:100%;
	max-width:940px;
	margin:0 auto;
	border-left:1px solid #d4cab6;
	box-sizing:border-box;
}

#historyTable h3{
	width:100%;
	margin:0;
	padding:0;
	font-family:'SourceHanSerifJP';	
	text-align:center;
}

#historyTable .box{
	padding: 0 0 40px;
	position:relative;
	box-sizing:border-box;
}
#historyTable .box:last-child{
	padding: 0;
}
#historyTable .box .year{
	text-align:center;
	color:#ffffff;
	background:#b99b63;
	font-family:'EBGaramond';
	display:block;
	-webkit-transition: all 0.5s ease;
	transition:all 0.5s ease;
	position:absolute;
	box-sizing:border-box;
}
#historyTable .box .year.wareki{
}
#historyTable .box .year.wareki span{
	margin:0;
	padding:0;
	font-family:'SourceHanSerifJP';	
	display:block;
}
#historyTable .box h4{
	margin-bottom:30px;
	font-family:'SourceHanSerifJP';
	letter-spacing:0.1em;
}
#historyTable .box > .txt{
	margin-bottom:35px;
	font-size:1.2rem;
	line-height:2.2em;
	letter-spacing:0.1em;
}
#historyTable .box .photoBox{
	max-width:720px;
}
#historyTable .box .photoBox.c1{
	max-width:580px;
}
#historyTable .box .photoBox li .txt{
	margin-top:8px;
	text-align:center;
	font-size:1.2rem;
}



/*----------------------------------------------------------
	Display：← 559px（ sp ）
----------------------------------------------------------*/

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

	#historyTable {
		padding:40px 20px 50px 40px;
	}
	#historyTable h3{
		font-size:2.6rem;
		line-height:1.5em;
		letter-spacing:0.05em;
		text-indent:-20px;
	}
	#historyTable .inner{
		margin-top:40px;
		padding:0 0 0 50px;
	}
	#historyTable .box .year{
		width:70px;
		height:70px;
		font-size:2.0rem;
		line-height:70px;
		border-radius:35px;
		top:-20px;
		left:-85px;
	}
	#historyTable .box .year.wareki{
		padding:10px 0 0;
		font-size:2.4rem;
		line-height:28px;
	}
	#historyTable .box .year.wareki span{
		font-size:1.0rem;
		line-height:18px;
		letter-spacing:0;
	}
	#historyTable .box h4{
		font-size:1.6rem;
		line-height:1.6em;
		letter-spacing:0;
	}
	#historyTable .box > .txt{
		margin-bottom:20px;
	}
	#historyTable .box .photoBox li{
		width:80%;
		margin:0 auto 20px;
	}
	#historyTable .box .photoBox li:last-child{
		margin-bottom:0;
	}
}


/*----------------------------------------------------------
	Display：560px →（ tablet pc ）
----------------------------------------------------------*/

@media screen and (min-width: 560px) {

	#historyTable {
		padding:70px 20px 50px 60px;
	}
	#historyTable h3{
		font-size:3.6rem;
		line-height:1.5em;
		letter-spacing:0.1em;
		text-indent:-40px;
	}
	#historyTable .inner{
		margin-top:50px;
		padding:0 0 0 80px;
	}
	#historyTable .box .year{
		width:80px;
		height:80px;
		font-size:2.4rem;
		line-height:80px;
		border-radius:40px;
		top:-28px;
		left:-120px;
	}
	#historyTable .box .year.wareki{
		padding:17px 0;
		font-size:2.4rem;
		line-height:28px;
	}
	#historyTable .box .year.wareki span{
		font-size:1.1rem;
		line-height:18px;
		letter-spacing:0.05em;
	}
	#historyTable .box h4{
		font-size:1.8rem;
		line-height:1.6em;
		letter-spacing:0.05em;
	}
	#historyTable .box > .txt{
		margin-bottom:35px;
	}
	#historyTable .box .photoBox {
		display:-webkit-box;
		display:flex;
		-webkit-box-pack: space-between;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#historyTable .box .photoBox li{
		width:47.5%;
		margin-bottom:20px;
	}
	#historyTable .box .photoBox.c1 li{
		width:100%;
	}
}