@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
	line-height: 5.0;
	letter-spacing: 0.2em;
	color: #000;
	background-color: #fff;
	margin-top: 100px;
	margin-bottom: 30px;
	text-align: center;
}

.memo {
	color: #555;
	font-size: 9px;
}

.box {
  text-align: center;
}

.main {
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  -ms-column-count: 1;
  column-count: 1;
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  -ms-column-gap: 30px;
	column-gap: 30px;
  display: inline-block;
	height: 600px;
	text-align: justify;
	text-justify: inter-ideograph;
	/* text-shadow: 1px 1px 1px silver; */
}

.fadeIn {
animation-name: fadeInAnime;/*1で解説*/
animation-fill-mode:backwards;/*2で解説*/
animation-duration:3s;/*3で解説*/
animation-iteration-count:1;/*4で解説*/
animation-timing-function:ease;/*5で解説*/
animation-delay: 0.5s;/*6で解説*/
animation-direction:normal;/*7で解説*/
}

/*1で解説*/
@keyframes fadeInAnime{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.8;
  }
}

@media screen and (max-width:670px) { /* 670pxまで */
	body{
	font-family: 'Noto Serif JP', serif;
	font-size: 9px;
	line-height: 1.7;
	letter-spacing: 0.1em;
	color: #000;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	
	.main {
		writing-mode: horizontal-tb;
		text-align: center;
	}
	
}