@charset "UTF-8";


.history-header span{
	opacity: 0;
}
.history-header span.on{
	opacity: 1;
	transition: opacity 200ms ease;
}
.history-header:after{
	width: 0;
	transition: width 1000ms ease;
}
.history-header.on:after{
	width: 100%;
}
.history-header h3 i img{
	opacity: 0;
	will-change: opacity;
}
.history-header h3 i img.on{
	opacity: 1;
	transition: opacity 200ms ease;
}



.month-header span{
	opacity: 0;
}
.month-header span.on{
	opacity: 1;
	transition: opacity 200ms ease;
}
.month-header em{
	width: 0;
	transition: width 1000ms ease;
}
.month-header.on em{
	width: 100%;
}
.month-header h4{
	opacity: 0;
	will-change: opacity;
}
.month-header h4.on{
	opacity: 1;
	transition: opacity 200ms ease;
}
.month article{
	opacity: 0;	
}
.month article.on{
	opacity: 1;
	transition: opacity 200ms ease;
}
.month figure{
	opacity: 0;	
}
.month figure.on{
	opacity: 1;
	transition: opacity 200ms ease;
}
.v-line span{
	height: 0;
	will-change: height;
	transition: height 100ms linear;
/*	transition: height 300ms ease;
*/}
.mode-touch .v-line span{
	transition: none;
}
.nav-history .pd{
	height: 0;
	overflow: hidden;
	transition: height 300ms ease;
}
.nav-history .pd{
	background: #f2f4f7;
}



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


	#history main {
		display: block;
		padding: 0 50px;
	}

	#history .section-header {
		padding: 0 0 30px;
	}


	#history .section-header span:before,
	#history .section-header span:after {
		width: calc(50% - 38px);
	}

	#history main section >article{
		padding: 60px 0 0;
	}

	#history .sec-inner{
		position: relative;
	}


	/* nav-history
	------------------------------------------------------------*/


	.fix-pdnav{
		position: fixed;
		top: 0;
		left: 0;
		padding: 10px 50px;
		height: 70px;
		width: 100%;
		z-index: 2000;
		box-sizing: border-box;
		transform: translateY(-110%);
		transition: transform 400ms ease;
		background: #fff;
		box-shadow: 0 6px 6px 0px rgba(0,0,0,0.2);
	}
	.pd-on .fix-pdnav{
		transform: translateY(0);
	}
	.pd-on .btn-menu-open.on{
		transform: translate(0,70px);
	}
	.fix-pdnav .fix-pdnav-inner{
		position: relative;
		margin: auto;
		height: 50px;

	}


	.ex-history{
		position: absolute;
		width: 100%;
		height: 150px;
		z-index: 100;
	}
	.nav-history{
		z-index: 100;
		border: 4px solid #032666;
		background: #fff;
	}

	
	.ex-history .nav-history{
		margin: auto;
		position: absolute;
		top: 30px;
		right: 0;
		left: 0;
		width: 480px;
	}
	.fix-pdnav .nav-history{
		margin: auto;
		width: 50%;
	}

	.nav-history a{
		position: relative;
		display: block;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-weight: 700;
		color: #032666;
	}

	.nav-history a:hover,
	.nav-history a.active{
		background: #032666;
		color: #fff;
	}

	.nav-history > a span{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		right: 5px;
		bottom: 0;
		width: 30px;
		height: 30px;
		background: #d51322;
	}
	.nav-history > a span:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		bottom: 0;
		display: block;
		width: 30px;
		height: 30px;
		background: url(/shared/img/arrow_wh_d.png) 50% 50% no-repeat;
		background-size: 16px 10px;
		z-index: 10;
		transition: transform 300ms ease;
	}
	.nav-history > a.on span:after{
		transform: rotate(180deg);
	}

	.pd-overlay{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #eee;
		z-index: 100;
	}

	dl.notice{
		position: absolute;
		bottom: -40px;
		right: 45px;
		text-align: right;
	}
	dl.notice dt{
		display: inline-block;
		width: 40px;
		height: 40px;
		border: 1px dashed #aaa;
		color: #aaa;
		text-align: center;
		line-height: 40px;
	}
	dl.notice dd{
		display: inline-block;
	}






	/* line
	------------------------------------------------------------*/

	.v-line{
		position: absolute;
		top: 0;
		left: 50%;
		margin: 0 0 0 -20px;
		height: 100%;
		width: 40px;
		z-index: 20;
		overflow: hidden;
	}
	.v-line span{
		position: absolute;
		display: block;
		top: 0;
		width: 17px;
		background: #af9340;
	}
	.v-line span:nth-child(1){
		left: 0;
	}
	.v-line span:nth-child(2){
		right: 0;
	}


	/* history-contents
	------------------------------------------------------------*/

	.history-contents{
		position: relative;
		padding: 80px 0 130px;
		z-index: 30;
	}
	.history-detail{
		margin: 40px 0 0;	
	}

	.sec-history{
		position: relative;
	}
	.sec-history-inner{
		position: relative;
		width: 50%;
	}

	.history-header{
		position: relative;
	}
	.history-header h3{
		position: relative;
		z-index: 30;
	}
	.history-header h3 i{
		display: inline-block;
		background: #fff;
	}

	.history-header span{
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		display: block;
		width: 100%;
	}
	.history-header:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		display: block;
		height: 2px;
		background: #042666;
		z-index: 10;
	}
	.history-header span > i{
		display: block;
		position: absolute;
		top: 50%;
		margin-top: -23px;
		width: 46px;
		height: 46px;
		background: #fff;
		transform: rotate(45deg);
	}
	.history-header span > i i{
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 26px;
		height: 26px;
		background: #042666;
	}
	.sec-history:first-child{
		padding-top: 70px;
	}
	.sec-history.odd + .sec-history{
		padding-top: 150px;
		margin-top: -100px;
	}
	.sec-history.even + .sec-history.odd,
	.sec-history.even + .sec-history{
		padding-top: 150px;
		margin-top: -50px;
	}

	.sec-history:nth-child(odd) .history-header h3{
		text-align: left;
	}
	.sec-history:nth-child(odd) .history-header h3 i{
		padding-right: 20px;
	}
	.sec-history:nth-child(odd) .history-header span{
		left: 0;
	}
	.sec-history:nth-child(odd) .history-header h3 i img{
		margin-left: -50px;
	}
	.sec-history:nth-child(odd) .history-header span  > i{
		right: -23px;
	}
	.sec-history:nth-child(odd) .history-header:after{
		right: 0;
	}
	

	.sec-history:nth-child(even) .sec-history-inner{
		transform: translateX(100%);
	}
	.sec-history:nth-child(even) .history-header h3{
		text-align: right;
	}
	.sec-history:nth-child(even) .history-header h3 i{
		padding-left: 20px;
	}
	.sec-history:nth-child(even) .history-header h3 i img{
		margin-right: -50px;
	}
	.sec-history:nth-child(even) .history-header span{
		right: 0;
	}
	.sec-history:nth-child(even) .history-header span  > i{
		left: -23px;
	}
	.sec-history:nth-child(even) .history-header:after{
		left: 0;
	}

	/* month
	------------------------------------------------------------*/

	.month-header{
		position: relative;
		font-size: 0;

	}
	.month-header h4{
		position: relative;
		display: inline-block;
		width: 100px;
		height: 100px;
		z-index: 100;

	}
	.month-header h4 i{
		position: absolute;
		display: inline-block;
		left: 0;
		top: 50%;
		width: 100%;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		color: #fff;
		transform: translateY(-50%);
		z-index: 20;
	}
	.month-header h4:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 70px;
		height: 70px;
		background: #042666;
		z-index: 10;
		transform: rotate(45deg);
	}

	.month-header span{
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		display: block;
		width: 100%;
		vertical-align: middle;
	}
	.month-header em{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		display: block;
		overflow: hidden;
		height: 1px;
		z-index: 10;
	}

	.month-header em i{
		content: "";
		position: absolute;
		top: 0;
		display: block;
		width: 100vw;
		height: 1px;
		border-top:  1px dashed #042666;
		z-index: 10;
	}

	.month-header span > i{
		display: block;
		position: absolute;
		top: 50%;
		margin-top: -11px;
		width: 22px;
		height: 22px;
		background: #fff;
		transform: rotate(45deg);
	}
	.month-header span > i i{
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 12px;
		height: 12px;
		background: #042666;
	}
	.month-header + figure{
		margin-top: -50px;
	}
	.month figure img{
		width: 100%;
	}
	.month figure + article{
		margin-top: 20px;
	}
	.month article + figure{
		margin-top: 20px;
	}
	.month article + article{
		padding-top: 5px;
		margin-top: 5px;
	}



	.month + .month{
		margin-top: -50px;
	}


	.month article p{
		line-height: 1.8;
		text-indent: -1em;
		padding-left: 1em;
	}
	.month article .world{
		margin: 0 -20px;
		padding: 15px;
		border:  1px dashed #999;
	}
	.month article .world p{
		color: #999;
	}



	.month .month-header + article .world{
		margin-top: -10px;
	}
	.month .month-header + article .lead{
		margin-top: -25px;
	}

	/* -------------- month 左エリア -------------- */

	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header:after{
		right: 0;
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header h4{
		text-align: left;
		margin-left: -50px;
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header span{
		left: 0;
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header span > i{
		right: -11px;
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header em{
		right: 0;		
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header em i{
		right: 0;		
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) article{
		padding: 0 120px 0 60px;
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) figure{
		padding-right: 90px;
	}


	.sec-history:nth-child(odd) .month:nth-child(even){
		transform: translateX(100%);
	}
	.sec-history:nth-child(odd) .month:nth-child(even) .month-header:after{
		left: 0;
	}
	.sec-history:nth-child(odd) .month:nth-child(even) .month-header{
		width: 90px;
		text-align: right;
	}
	.sec-history:nth-child(odd) .month:nth-child(even) .month-header h4{
		margin-right: -50px;
	}
	.sec-history:nth-child(odd) .month:nth-child(even) .month-header span > i{
		left: -11px;
	}
	.sec-history:nth-child(odd) .month:nth-child(even) .month-header em{
		left: 0;		
	}
	.sec-history:nth-child(odd) .month:nth-child(even) .month-header em i{
		left: 0;		
	}
	.sec-history:nth-child(odd) .month:nth-child(even) article{
		padding: 0 60px 0 120px;
	}
	.sec-history:nth-child(odd) .month:nth-child(even) figure{
		padding-left: 90px;
	}


	/* -------------- month 右エリア -------------- */

	.sec-history:nth-child(even) .month:nth-child(odd) .month-header:after{
		left: 0;
	}
	.sec-history:nth-child(even) .month:nth-child(odd) .month-header{
		width: 90px;
		text-align: right;
	}
	.sec-history:nth-child(even) .month:nth-child(odd) .month-header h4{
		margin-right: -50px;
	}
	.sec-history:nth-child(even) .month:nth-child(odd) .month-header span > i{
		left: -11px;
	}
	.sec-history:nth-child(even) .month:nth-child(odd) .month-header em{
		left: 0;		
	}
	.sec-history:nth-child(even) .month:nth-child(odd) .month-header em i{
		left: 0;		
	}

	.sec-history:nth-child(even) .month:nth-child(odd) article{
		padding: 0 60px 0 120px;
	}
	.sec-history:nth-child(even) .month:nth-child(odd) figure{
		padding-left: 90px;
	}


	.sec-history:nth-child(even) .month:nth-child(even){
		transform: translateX(-100%);
	}
	.sec-history:nth-child(even) .month:nth-child(even) .month-header:after{
		right: 0;
	}
	.sec-history:nth-child(even) .month:nth-child(even) .month-header h4{
		text-align: left;
		margin-left: -50px;
	}
	.sec-history:nth-child(even) .month:nth-child(even) .month-header span{
		left: 0;
	}
	.sec-history:nth-child(even) .month:nth-child(even) .month-header span > i{
		right: -11px;
	}
	.sec-history:nth-child(even) .month:nth-child(even) .month-header em{
		right: 0;		
	}
	.sec-history:nth-child(even) .month:nth-child(even) .month-header em i{
		right: 0;		
	}

	.sec-history:nth-child(even) .month:nth-child(even) article{
		padding: 0 120px 0 60px;
	}
	.sec-history:nth-child(even) .month:nth-child(even) figure{
		padding-right: 90px;
	}



}



@media screen and (min-width: 801px) and (max-width: 980px) {

	#history main {
		display: block;
		padding: 0 20px;
	}
	.sec-history:nth-child(odd) .history-header{
		padding: 0 60px 0 0;
		box-sizing: border-box;
	}
	.sec-history:nth-child(odd) .history-header h3 i{
		padding: 0 0 0 20px;
		box-sizing: border-box;
	}
	.sec-history:nth-child(odd) .history-header h3 i img {
		margin-left: 0;
		width: 100%;
		height: auto;
	}



	.sec-history:nth-child(even) .history-header{
		padding: 0 0 0 60px;
		box-sizing: border-box;
	}
	.sec-history:nth-child(even) .history-header h3 i{
		padding: 0 20px 0 0;
		box-sizing: border-box;
	}
	.sec-history:nth-child(even) .history-header h3 i img {
		margin-right: 0;
		width: 100%;
		height: auto;
	}


	.month article .world {
		margin: 0;
		padding: 10px;
	}
	.month .month-header + article .lead {
		margin-top: 10px;
	}
	.month .month-header + article .world {
		margin-top: 10px;
	}
	.month-header + figure {
		margin-top: 10px;
	}

	/* -------------- month 左エリア -------------- */
	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header{
		margin-left: 20px;
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) .month-header h4{
		margin-left: 0;
	}
	.sec-history:nth-child(odd) .month:nth-child(odd) figure{
		padding: 0 40px 0 20px;
	}
	.sec-history:nth-child(odd) .month:nth-child(even) figure{
		padding: 0 20px 0 40px;
	}


	.sec-history:nth-child(odd) .month:nth-child(odd) article{
		padding: 0 40px 0 20px;
	}
	.sec-history:nth-child(odd) .month:nth-child(even) article{
		padding: 0 20px 0 40px;
	}

	/* -------------- month 右エリア -------------- */


	.sec-history:nth-child(even) .month:nth-child(even) .month-header{
		margin-left: 20px;
	}
	.sec-history:nth-child(even) .month:nth-child(even) .month-header h4{
		margin-left: 0;
	}

	.sec-history:nth-child(even) .month:nth-child(odd) figure{
		padding: 0 20px 0 40px;
	}
	.sec-history:nth-child(even) .month:nth-child(even) figure{
		padding: 0 40px 0 20px;
	}

	.sec-history:nth-child(even) .month:nth-child(odd) article{
		padding: 0 20px 0 40px;
	}
	.sec-history:nth-child(even) .month:nth-child(even) article{
		padding: 0 40px 0 20px;
	}





}




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



	#history .section-header span:before,
	#history .section-header span:after {
		width: calc(50% - 28px);
	}

	#history main > section > article{
		padding: 35px 0 0;
	}
	#history.detail main article{
		padding: 0;
	}

	#history .sec-inner{
		position: relative;
	}

	#history section {
		overflow: inherit;
	}


	/* nav-history
	------------------------------------------------------------*/

	.fix-pdnav{
		position: fixed;
		top: 0;
		left: 0;
		padding: 6px 0;
		height: 50px;
		width: 100%;
		z-index: 2000;
		transform: translateY(-110%);
		transition: transform 400ms ease;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0 3px 3px 0px rgba(0,0,0,0.2);
	}

	.pd-on .fix-pdnav{
		transform: translateY(0);
	}
	.pd-on .btn-menu-open.on{
		transform: translate(0,50px);
	}

	.fix-pdnav .fix-pdnav-inner{
		position: relative;
		margin: 0 30px;
		height: 38px;
		max-width: 1200px;
		background: #fff;
	}




	.ex-history{
		position: relative;
		padding: 48px 0 0;
		margin: 0 15px;
	}

	.nav-history{
		z-index: 100;
		width: 100%;
		border: 2px solid #032666;
		background: #fff;
		box-sizing: border-box;
	}

	.ex-history .nav-history{
		position: absolute;
		top: 0;
	}
	.fix-pdnav .nav-history{
		margin: auto;
	}



	.nav-history a{
		position: relative;
		display: block;
		width: 100%;
		height: 34px;
		line-height: 34px;
		font-size: 18px;
		text-align: center;
		font-weight: 700;
		color: #032666;
	}

	.nav-history a.active{
		background: #032666;
		color: #fff;
	}
	.nav-history > a span{
		position: absolute;
		display: block;
		margin: auto;
		top: 0;
		right: 5px;
		bottom: 0;
		width: 24px;
		height: 24px;
		background: #d51322;
	}
	.nav-history > a span:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		display: block;
		width: 12px;
		height: 8px;
		background: url(/shared/img/arrow_wh_d.png) 50% 50% no-repeat;
		background-size: 12px 8px;
		z-index: 10;
		transition: transform 300ms ease;
	}
	.nav-history > a.on span:after{
		transform: rotate(180deg);
	}



	dl.notice{
		margin-top: 10px;
		text-align: right;
	}
	dl.notice dt{
		display: inline-block;
		width: 30px;
		height: 30px;
		border: 1px dashed #aaa;
		color: #aaa;
		text-align: center;
		line-height: 30px;
	}
	dl.notice dd{
		display: inline-block;
	}






	/* line
	------------------------------------------------------------*/

	.v-line{
		position: absolute;
		top: 0;
		right: 0;
		margin: 60px 0 0 -20px;
		height: calc(100% - 60px);
		width: 20px;
		z-index: 20;
		overflow: hidden;
	}
	.v-line span{
		position: absolute;
		display: block;
		top: 0;
		width: 8px;
		background: #af9340;
	}
	.v-line span:nth-child(1){
		left: 0;
	}
	.v-line span:nth-child(2){
		right: 0;
	}


	/* history-contents
	------------------------------------------------------------*/

	.history-contents-wrap{
		position: relative;
		margin: 16px 20px 0 0;
		padding: 0 0 30px;
	}

	.history-contents{
		position: relative;
		padding: 0;
		z-index: 30;
	}
	.history-detail{
		margin: 20px 0 0;	
	}

	.sec-history{
		position: relative;
	}
	.sec-history-inner{
		position: relative;
	}

	.history-header{
		position: relative;
		margin: 0 8px 0 0;
	}
	.history-header h3{
		position: relative;
		text-align: left;
		z-index: 30;
	}
	.history-header h3 i{
		display: inline-block;
		padding-right: 20px;
		background: #fff;
	}
	.history-header h3 i img{
		margin-left: -10px;
		width: auto;
		height: 72px;
	}
	.history-header span{
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
	}
	.history-header:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		display: block;
		height: 1px;
		background: #042666;
		z-index: 10;
	}
	.history-header span > i{
		display: block;
		position: absolute;
		top: 50%;
		right: -9px;
		margin-top: -12px;
		width: 23px;
		height: 23px;
		background: #fff;
		transform: rotate(45deg);
	}

	.history-header span > i i{
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 13px;
		height: 13px;
		background: #042666;
	}

	.sec-history{
		padding-top: 60px;
	}

	.history-contents{
		margin-top: -60px;
	}
	/* month
	------------------------------------------------------------*/

	.month-header{
		position: relative;
		font-size: 0;
		margin: 0 8px 0 0;
	}
	.month-header h4{
		position: relative;
		display: inline-block;
		text-align: left;
		margin-left: -10px;
		width: 50px;
		height: 50px;
		z-index: 100;

	}
	.month-header h4 i{
		position: absolute;
		display: inline-block;
		left: 0;
		top: 50%;
		width: 100%;
		font-size: 10px;
		font-weight: 700;
		text-align: center;
		color: #fff;
		transform: translateY(-50%);
		z-index: 20;
	}
	.month-header h4:after{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 35px;
		height: 35px;
		background: #042666;
		z-index: 10;
		transform: rotate(45deg);
	}

	.month-header span{
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		vertical-align: middle;
	}
	.month-header em{
		content: "";
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		display: block;
		overflow: hidden;
		height: 1px;
		z-index: 10;
	}

	.month-header em i{
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 100vw;
		height: 1px;
		border-top:  1px dashed #042666;
		z-index: 10;
	}


	.month-header span > i{
		display: block;
		position: absolute;
		top: 50%;
		right: -3px;
		margin-top: -5px;
		width: 10px;
		height: 10px;
		background: #fff;
		transform: rotate(45deg);
	}
	.month-header span > i i{
		display: block;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 6px;
		height: 6px;
		background: #042666;
	}
	.month-header + figure{
		margin-top: -25px;
	}
	.month figure{
		padding-right: 40px;
	}
	.month figure img{
		width: 100%;
	}
	.month figure + article{
		margin-top: 25px;
	}


	.month + .month{
		margin-top: 20px;
	}
	.month article{
		padding: 0 40px 0 45px;
	}
	.month article p{
		line-height: 1.8;
		text-indent: -1em;
		padding-left: 1em;
	}
	.month article .world{
		margin: 0 -10px 0 -10px;
		padding: 15px;
		border:  1px dashed #999;
	}
	.month article .world p{
		color: #999;
	}
	.month article + figure{
		margin-top: 20px;
	}
	.month article + article{
		margin-top: 5px;
	}

	.month .month-header + article .world{
		margin-top: -5px;
	}
	.month .month-header + article .lead{
		margin-top: -12px;
	}



}