@charset "utf-8";
/* CSS Document */

/**
/* #visual
/* .mainContents > header
 */


/* #visual
--------------------- */


.spdis {display:none;}
@media (max-width: 821px){.spdis {display:block; }
}
.pcdis {display:block; }
@media (max-width: 821px){.pcdis {display:none;}
}


#visual > div {
	display: table;
	height: 26.48vw;
	margin: 0 auto;
	min-height: 340px;
	position: relative;
	width: 68.75%;
}
#visual > div > div {
	display: table-cell;
	height: 100%;
	vertical-align: middle;
	width: 100%;
}

#visual > div > div > div {
	background: rgba(255,255,255,0.7);
	color: #00A0E9;
	display: inline-block;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.66;
	letter-spacing: 0.1em;
	padding: 20px;
}
#visual > div > div > div.gyo4 {
	margin-top:calc( -24px - 10px );
}

@media only screen and (max-width: 821px) {
	#visual > div {
		border-bottom: 1px solid #00A0E9;
		border-top: 1px solid #00A0E9;
		height: auto;
		min-height: 0;
		width: 87.5%;
	}
	#visual > div > div {
		height: auto;
		text-align: center;
	}
	#visual > div > div > div {
		font-size: 1.6rem;
		padding: 1.25rem 0;
	}

	#visual > div > div > div.gyo4 {
		margin-top:auto;
	}

}


/* figure
--------------------- */

/* figure */
article > figure {
	margin-bottom: 100px;
}
article > figure img {
	width: 100%;
}
@media only screen and (max-width: 821px) {
	article > figure {
		margin-bottom: 2.5rem;/*	margin-bottom: 30px;*/
	}
}


/* .mainContents
--------------------- */

.mainContents {
	margin-bottom: 100px;
}
@media only screen and (max-width: 821px) {
	.mainContents {
		margin-bottom: 2.5rem;/*	margin-bottom: 30px;*/
	}
}

/* p */
.mainContents p {
	line-height: 2.5;
}

.mainContents section p {
	text-align: justify;
}


@media only screen and (max-width: 821px) {
	.mainContents p {
		line-height: 2;
	}
}

/* header */
.mainContents > header {
	margin-bottom: 90px;
	text-align: center;
}
.mainContents > header p {
	line-height: 1.875;
}
.mainContents > header p.post {
	color: #00A0E9;
	font-size: 2.1rem;
	margin-bottom: 15px;
}
.mainContents > header p.post:after {
	background-color: #00A0E9;
	content: "";
	display: block;
	height: 4px;
	margin: 8px auto 0;
	width: 100px;
}
.mainContents > header h2 {
	color: #00A0E9;
	font-size: 4.2rem;
	margin-bottom: 16px;
	letter-spacing: 2px;
	margin-left: 1.6rem;
}
.mainContents > header p.eng {
	color: #231815;
	font-size: 1.4rem;
	margin-bottom: 16px;
}
.mainContents > header p.year {
	color: #00A0E9;
	font-size: 1.8rem;
	margin-bottom: 0;
}
@media only screen and (max-width: 821px) {
	.mainContents > header {
				margin-bottom: 2.5rem;
	}
	.mainContents > header p.post {
		font-size: 1.4rem;
				margin-bottom: 1.25rem;
	}
	.mainContents > header p.post:after {
		height: 2px;
		margin-top: 5px;
		width: 70px;
	}
	.mainContents > header h2 {
		font-size: 2.6rem;
	margin-bottom: 0.625rem;
	margin-left: 1.0rem;
	}
	.mainContents > header p.eng {
		font-size: 1.3rem;
		margin-bottom: 1.25rem;	
	}
	.mainContents > header p.year {
		font-size: 1.4rem;
	}
}

/* section */
.mainContents section {
	margin-bottom: 50px;
}
.mainContents section h3 {
	color: #00A0E9;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 10px;
}
@media only screen and (max-width: 821px) {
	.mainContents section {
		margin-bottom: 2.5rem;
	}
	.mainContents section h3 {
		font-size: 1.6rem;
		margin-bottom: 1.25rem;
	}
}


/* #timeline
--------------------- */

#timeline {
	margin: 90px -50px 70px;
	width: 820px;
}
#timeline h3 {
	color: #00A0E9;
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 50px;
	text-align: center;
}
#timeline h3 span {
	border: 2px solid #00A0E9;
	display: inline-block;
	padding: 15px 78px;
}
#timeline ul {
	/*background: url(../img/timeline_bg.png) 0% 0% repeat-x;*/
	/*padding: 0 59px;*/
	position: relative;
}
#timeline li {
	float: left;
}
#timeline li:nth-child(1) {
	margin-right: 28px;
	width: 272px;
}
#timeline li:nth-child(2) {
	margin-right: 28px;
	width: 172px;
}
#timeline li:nth-child(3) {
	width: 202px;
}
#timeline li:nth-child(4) {
	position: absolute;
	right: 70px;
	top: 0;
}
#timeline .time {
	text-align: left;
	padding-left: 10px;
}
#timeline .time p {
	background: url(../img/timeline_point.png) 50% 100% no-repeat;
	display: inline-block;
	margin-bottom: 0;
	padding-bottom: 50px;
	text-align: center;
}
#timeline li:nth-child(4) .time p {
	background: url(../img/timeline_point_l.png) 50% 100% no-repeat;
}
#timeline .time span {
	display: block;
	font-size: 1.4rem;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
}
#timeline .time span:first-child {
	color: #231815;
}
#timeline .time span:last-child {
	color: #00A0E9;
}
#timeline .comment p {
	font-size: 1.3rem;
	line-height: 2;
	margin-bottom: 0;
}
#timeline .box1 {
	border: 2px solid #7FCFF4;
	color: #231815;
	margin-bottom: 10px;
	padding: 6px 10px;
}
#timeline .box2 {
	background: #00A0E9;
	color: #fff;
	padding: 6px 10px;
}
@media only screen and (max-width: 821px) {
	#timeline {
		margin: 5rem 0;
		width: 100%;
	}
	#timeline h3 {
		font-size: 1.4rem;
		margin-bottom: 1.25rem;
	}
	#timeline h3 span {
		border: 1px solid #00A0E9;
		padding: 8px 40px;
	}
	#timeline ul {
		background: 0;
	/*	border-bottom: 1px solid #00A0E9;*/
		padding: 0 0 4px;
	}
	#timeline li {
		float: none;
	}
	#timeline li:nth-child(1) {
		margin-right: 0;
		width: auto;
	}
	#timeline li:nth-child(2) {
		margin-right: 0;
		width: auto;
	}
	#timeline li:nth-child(3) {
		width: auto;
	}
	#timeline li:nth-child(4) {
		border-bottom: 1px solid #00A0E9;
		position: relative;
		right: 0;
	}
	#timeline .time {
		padding-left: 0;
	}
	#timeline .time p {
		background: 0;
		padding-bottom: 0;
		text-align: left;
	}
	#timeline li:nth-child(4) .time p {
		background: 0;
	}
	#timeline .time span {
		display: inline;
		font-size: 1.3rem;
		height: auto;
		line-height: 1.2;
	}
	#timeline .time span:first-child {
		margin-right: 5px;
	}
	#timeline .comment p {
		font-size: 1rem;
	}
	#timeline .box1 {
		border: 1px solid #7FCFF4;
		margin-bottom: 10px;
		padding: 5px 7px;
	}
	#timeline .box2 {
		margin-bottom: 10px;
		padding: 5px 7px;
	}
}


/* #last
--------------------- */

#last {
	background: url(../img/bg_last.png) 50% 0% repeat;
	margin-top: -100px;
	padding: 100px 0;
}
#last > div {
	margin: 0 auto;
	max-width: 720px;
}
#last h3 {
	color: #00A0E9;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 10px;
}
#last p {
	font-size: 1.6rem;
	line-height: 2.5;
	text-align: justify;
}
@media only screen and (max-width: 821px) {
	#last {
		-webkit-background-size: 4px 4px;
				background-size: 4px 4px;
		margin: -2.5rem 0 2.5rem;
		padding: 2.5rem 6.25vw;
	}
	#last h3 {
		font-size: 1.3rem;
		margin-bottom: 5px;
	}
	#last p {
		font-size: 1.4rem;
		line-height: 2;
	}
}


/* #adjacentNav
--------------------- */

#adjacentNav {
	margin: 60px auto 100px;
	width: 374px;
}
#adjacentNav li.prev {
	float: left;
	padding-top: 13px;
	text-align: left;
	width: 80px;
}
#adjacentNav li.next {
	float: right;
	padding-top: 13px;
	text-align: right;
	width: 80px;
}
#adjacentNav li.list {
	text-align: center;
}
@media only screen and (max-width: 821px) {
	#adjacentNav {
/*		display: none;*/
    	margin: 2rem auto 4rem;    
    	width: 100%;
        zoom:0.8
	}
#adjacentNav li.prev {
    margin-left: 15vw;
}    
#adjacentNav li.next {
	margin-right: 15vw;
}
}


/* ------------------------------
   years
------------------------------ */
.years_ttl {
	margin-bottom:27px;
}

.years_text {
	max-width:421px;
	width:100%;
	margin:0 auto 67px;
}

.years_text img {
	width:100%;
}

.years_menu {
	max-width:870px;
	width:100%;
	margin:0 auto;
	/*border-bottom:1px solid #fff;*/
	padding-bottom:20px;
	margin-bottom:10px;
}
@media (max-width: 768px){
.years_menu {
	width:90%;
	margin-bottom:3em;
	text-align: center;	
}
}

.years_menu ul {
	margin:0 auto 0;
	width:100%;
}

.years_menu ul li {
	float:left;
	margin-bottom:8px;
	max-width:409px;
	width:33.3%;
}
@media (max-width: 768px){
.years_menu ul li  {
	width:100%;
	max-width:100%;
	margin:0px auto 0px;
}
}

.years_menu ul li img {
	width:100%;
}
@media (max-width: 768px){
.years_menu ul li img {
	width:90%;
}
}

/*.years_menu ul li:nth-child(even) {
	float:right;
}*/

.years_menu_ttl {
	margin-bottom:0px;
	max-width:860px;
	width:100%;
	margin:0 auto 0px;
}

.years_menu_ttl img {
	width:100%;
}

.years_menu_ttl img.pc_ttl {
	display:block;
}
.years_menu_ttl img.sp_ttl {
	display:none;
}

.years_plan {
	max-width:870px;
	width:100%;
	margin:0 auto 120px;
	border-bottom:1px solid #fff;
	padding-bottom:20px;
}

.years_plan section {
	border-bottom:1px solid #fff;
	padding-bottom:30px;
	margin-bottom:60px;
}

.years_plan section img {
	max-width:864px;
	width:100%;
}

.years_ttl {
	margin-bottom:30px;
}

.years_plan section .plan_ttl img {
	max-width:253px;
	width:100%;
}

.years_table,
.years_table02  {
	max-width:870px;
	width:100%;
	margin:0 auto;
}

.years_table02 {
	margin:0 auto 40px;
}

.years_table li,
.years_table02 li {
	float:left;
	max-width:401px;
	width:50%;
}

.years_table li img ,
.years_table02 li img {
	max-width:401px;
	width:100%;
}

.years_table li:last-child ,
.years_table02 li:last-child {
	float:right;
}

/*___*/
	.archives_loves,
	.archives_nightsafari,
	.archives_na {
		max-width:870px;
		width:100%;
		margin:0 auto 90px;
		border-bottom:1px solid rgba(255, 255, 255, 0.6);
		padding-bottom:10px;
	}
@media (max-width: 768px){
	.archives_loves,
	.archives_nightsafari,
	.archives_na {
		width:90%;
		margin:0 auto 3rem;
	}
	}
	
	.archives_loves .g-loves_ttl,
	.archives_nightsafari .g-nightsafari_ttl,
	.archives_na .g-attraction_ttl {
		padding-bottom:13px;
		border-bottom:1px solid rgba(255, 255, 255, 0.6);
		margin-bottom:30px;
	}
	
	.archives_loves .g-loves_ttl img {
		max-width:298px;
		width:100%;
	}
	
	.archives_nightsafari .g-nightsafari_ttl img {
		max-width:300px;
		width:100%;
	}
	
	.archives_na .g-attraction_ttl img {
		max-width:425px;
		width:100%;
	}
	
	.archives_loves ul,
	.archives_nightsafari ul,
	.archives_na ul {
		width:98%;
		margin:0 auto;
	}
	
	.archives_loves ul li,
	.archives_nightsafari ul li,
	.archives_na ul li {
		float:left;
		width:25%;
		margin:0 0% 20px 0;	
	}
@media (max-width: 768px){
	.archives_loves ul li,
	.archives_nightsafari ul li,
	.archives_na ul li {
		width:50%;
		margin:0 0% 20px 0;	
	}
}

	.archives_loves ul li img,
	.archives_nightsafari ul li img,
	.archives_na ul li img {
		width:90%;
	}




.archives_menu_ttl {
	margin-bottom:0px;
	max-width:820px;
	width:100%;
	margin:0 auto 0;
}

.archives_menu_ttl img {
	width:100%;
}

.archives_menu_ttl img.pc_ttl {
	display:block;
}
@media (max-width: 768px){
.archives_menu_ttl img.pc_ttl {
	display:none;
}
}

.archives_menu_ttl img.sp_ttl {
	display:none;
}
@media (max-width: 768px){
.archives_menu_ttl img.sp_ttl {
	display:block;    
}}