body{
	background-color:#000000;
	color:#FFFFFF;
	overflow-x: hidden;
}

#titlea a {
	text-decoration: none;        /* リンクの下線を消す */
	 color:#FFFFFF;
}

div.page1 {
    display:none;
}

div.page2 {
	display:inline;
}

#number {
	display:none;
}

.viewport {
    width: 100vw;
	height: 100vh;
    overflow: hidden;
    margin: 0 auto;
    transform: translateZ(0); /* Optional: When heavy at iOS6+ */
}

.flipsnap:after {
    content: '';
    display: block;
    clear: both;

    height: 0;
}

.item {
    float: left;
    width: 100vw;
	height: 100vh;
	text-align:center;
}

.figu {
    position: relative;
}
.cap {
    position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, -50%);
	padding-right: 15px;
	padding-left:  15px;
	background: rgba(1,1,1,.6);
    border-radius: 0.75em;        /* 枠線の角を丸くする */
}

 .page_title {
	color: #0000ff;
	font-size:5em;
 }
 
 .page_date {
	color: #222222;
	font-size:2em;
 }
 
 .category {
	font-size:4em;
	text-align: right;
 }

 .header {
	font-size:5em;
 }
 
 .visiyear {
	font-size:3.5em;
	margin-left: 2%; 
 }
 
 .page_subtitle {
	color: #222222;
	font-size:3em;
	white-space : pre-wrap;
 }
 

/* 横画面時 */
@media screen and (orientation: landscape) {
	
	#titlea {
		font-size:6em;
		text-align: center;
	}

	#title {
		padding-top: 120px;
		font-size:3.5em;
		text-align: center;
	}

	#textp {
		padding-top: 30px;
		font-size:2.5em;
		text-align: center;
	}

	#textp1 {
		padding-top: 30px;
		white-space: pre-wrap;
		font-size:2.5em;
		text-align: center;
		color:#dddddd;
	}

	#textp2 {
		white-space: pre-wrap;
		font-size:20px;
		text-align: left;
		color:#dddddd;
	}

	.dateck {
		font-size:25px;
		text-align: left;
	}

	.comme {
		white-space: pre-wrap;
		font-size:20px;
	}

	div#page2 {
		position: absolute;
		left:3vw;
		width:90vw;
		font-size:0.5vw;
	}

	img.big {
		height: 100%;
	}

	img.small {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100vh;
	}

	.arrow1 {
		display: inline;
		position:  absolute;
		left: 10px;
		top:  20px;
	}

	.arrow2 {
		display: none;
	}

	img.arrow_s {
		width:  50px;
		height: 50px;
	}

	.page img {
		width: 20vw;
		height: 15vw;
		object-fit: cover;
	 }

	 .footer {
		font-size:3em;
	 }

}

/* 縦画面時 */
@media screen and (orientation: portrait) {

	 #titlea {
		font-size:6em;
		text-align: center;
	 }

	#title {
		padding-top: 110px;
		font-size:70px;
		text-align: center;
	}

	#textp {
		font-size:70px;
		text-align: center;
	}

	#textp1 {
		white-space: pre-wrap;
		font-size:40px;
		text-align: center;
		color:#dddddd;
	}

	#textp2 {
		white-space: pre-wrap;
		font-size:40px;
		text-align: left;
		color:#dddddd;
	}

	.dateck {
		font-size:50px;
		text-align: left;
	}

	.comme {
		white-space: pre-wrap;
		font-size:40px;
	}

	div#page2 {
		margin-right: auto;
		margin-left : auto;
		width:100%;
		font-size:1vw;
	}
		
		
	img.big {
		width: 100%;
	}

	img.small {
		width: auto;
		height: auto;
		max-width: 100vw;
		max-height: 50vh;
	}

	.arrow1 {
		display: none;
	}

	.arrow2 {
		display: inline;
		position:  static;
	}
	.arrow2 {
		display: inline;
		position:  absolute;
		left: 10px;
		bottom: 20px;
	}


	img.arrow_s {
		width:  100px;
		height: 100px;
	}

	.page img {
		width: 40vw;
		height: 30vw;
		object-fit: cover;
	}
	 
	.footer {
		font-size:5em;
	 }
	
}