html,h1,h2,input,textarea {
	font-size: 100%;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height: 1.3;
}
.nofont {
	font-family: "游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3","Hiragino Mincho ProN", "HG明朝E", "IPA明朝","ＩＰＡ明朝","ＭＳ 明朝", "NotoSan","Noto Sans CJK JP",serif;
}
.sample {
	margin-top:0;
	padding: 0 2em;
	font-size: 1.5em;
}
@media screen and (max-width:480px) {
	.sample {
		margin-top:0;
		padding: 0;
		font-size: 1.2em;
	}
}

body {
	margin: 0;
	padding: 0;
}
h1 {
	color:#fff;
	margin: 0;
	font-size: 120%;
	text-align: center;
	padding: 10px;
	font-weight: bold;
	/*	background-color:#6699FF; */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b6e6f9+0,2ab0ed+100 */
	background: #b6e6f9; /* Old browsers */
	background: -moz-linear-gradient(top,  #b6e6f9 0%, #2ab0ed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b6e6f9 0%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b6e6f9 0%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e6f9', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
	line-height: 1.5;
}
h1:before {
    content: url(icon.png);
	display: inline-block;
    width:32px;
    height: 32px;
	vertical-align: bottom;
	margin-right: 10px;
}
form div.note {
	font-size:12px;
	line-height: 1.4;
	padding: 0.5em;
}
/*form section:nth-of-type(n+2) {*/
form section {
	margin-top: 1em;
}
h2 {
	font-size: 100%;
}
form h2 span, span.note {
	color: #666;
	font-size: 80%;
}
form h2 span.n {
	color: #CC0033;
}
div.fm {
	margin: 2px;
	border:solid 1px #ccc;
	padding: 10px;
}
form h2 {
	color: #0B8CBF;
	font-size: 100%;
	max-width: 100vw;
	padding: 2px;
	margin: 0;
	font-weight: bold;
}
form {
	width: 100%;
	max-width: 700px;
	margin: auto;
}
form input[type=text] {
	width: 88vw;

}
form textarea {
	width: 90vw;
}

form input[type=text],form textarea {
	max-width: 600px;
	font-size: 1rem;
	line-height: 1.3;
	margin: auto;
	border : solid 1px #0B8CBF;
}
form textarea {
	height: 25em;
}
form input[type=submit]{
	border : solid 1px #0B8CBF;
	padding: 5px 10px;
	letter-spacing: 0.1em;
	color: #fff;
	background: #b6e6f9; /* Old browsers */
	background: -moz-linear-gradient(top,  #b6e6f9 0%, #2ab0ed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #b6e6f9 0%,#2ab0ed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #b6e6f9 0%,#2ab0ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e6f9', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
	margin-top: 0.5em;
}
form input[type=reset]{
	border : solid 1px #999;
	padding: 3px 8px;
	letter-spacing: 0.1em;
	color: #333;
	background: #ccc; /* Old browsers */
	background: -moz-linear-gradient(top,  #eee 0%, #ccc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #eee 0%,#ccc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #eee 0%,#ccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
	margin-top: 0.5em;
}
section.img_select {
	width: 82px;
	height: 102px;
	text-align: center;
	float: left;
	font-size :90%;
	line-height: 100%;
	margin-top:0;
}
section.img_select label {
	white-space: nowrap;
	font-size:80%;
}
#thumb img {
	width: 150px;
}

@media screen and (max-width:480px) {
	.ad {
		display: none;
	}
	form textarea {
		height: 15em;
	}
}
@media screen and (max-width:62vh) {
	label.kiritori {
		display: none;
	}
}
div.share {
	margin: 1em 0;
}
.container {
	height: 98vh;
}
.wrapper {
	width: 50vh;
	padding: 1vh;
	max-width: 80vw;
	height: 80vh;
	margin: 1em auto;
	overflow:hidden;
/*	box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
	-webkit-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;
	-moz-box-shadow:0 0 5px #fff, 0 0 5px #ccc, 0 0 1px #aaa;*/
}
.dan1 {
	-moz-column-width: 77vh;
	-o-column-width: 77vh;
	-webkit-column-width: 77vh;
	column-width: 77vh;
}
.dan1 p {
	padding: 5vh 0;
}
.dan2 {
   -moz-column-count: 2;
   -webkit-column-count: 2;
   column-count: 2;
}
.dan3 {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;

}
@font-face {
  font-family: "NotoSan";
  src:local("Noto Sans CJK JP");
  font-weight: 300;
}
.docs {
	width: 48vh;
	max-width: 80vw;
	margin:auto;
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	line-height: 1.6;
	font-family: "游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3","Hiragino Mincho ProN", "HG明朝E", "IPA明朝","ＩＰＡ明朝","ＭＳ 明朝", "NotoSan","Noto Sans CJK JP",serif;
	font-weight: normal;
	position: relative;
	top:0;
	right:0;
}
.docs p.name {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-weight: bold;
	text-align:right;
	float: left;
/*	height: 6em;*/
	margin-top: 0;
	margin-left: 0;
	padding-bottom: 1em;
}
.dics p.words {
	float: right;
	text-align: left;
	margin-top: 0;
	margin-left: 0;
}

.docs p {
	margin:0;
}
.docs p.s {
	font-size: 1.8vh;
}
.docs p.r {
	font-size: 2.1vh;
}
.docs p.l {
	font-size: 2.4vh;
}
.docs p.xl {
	font-size: 2.7vh;
}
.docs p.xxl {
	font-size: 3vh;
}
.docs h2 {
	font-family: "游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3","Hiragino Mincho ProN", "HG明朝E", "IPA明朝","ＭＳ 明朝", "NotoSan","Noto Sans CJK JP", serif;
	font-weight: bold;
/*	font-size: 4vh;*/
	letter-spacing: -0.2em;
	margin:0;
	break-after: column;
	-webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
	width: 100%;
	height: 100%;
	text-align: center;
	display:table;
}
.docs h2 .ttl {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align:middle;
}
.docs h2 .ttl .l1 {
	margin-left: -0.5em;
}
.docs h2 .ttl .l2 {
	margin-left: 1em;
}
/*.Genmin {
	font-family: "source-han-serif-japanese",serif;
	font-weight: 500;
}*/
.GenGo {
	font-family: "source-han-sans-japanese",serif;
	font-weight: 300;
}
.GenminBold {
	font-family: "source-han-serif-japanese",serif;
	font-style: bold;
	font-weight: 500;
}
.white {
	background-color: #fff;
}
.white_a {
	background-color:rgba(255,255,255,0.8);
}
.gray {
	background-color: #eee;
}
.blue {
	background-color: #EDF7FF;
}
.yellow {
	background-color: #FBF0D9;
}
.black {
	color:#ccc;
	background-color: #111;
}
.tcy {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

.signature {
	width: 100%;
	position:absolute;
	z-index:2;
	top: 86vh;
	text-align: center;
	font-size: 1.6vh;
	color: #999;
}

#n {
	position: absolute;
	width: 100%;
	top: 82vh;
	z-index:4;
	text-align: center;
	text-indent: -48vh;
	font-size: 1.6vh;
}


.footer {
	width: 100%;
	text-align: center;
	background-color: #333;
	color: #fff;
	position: absolute;
	bottom: 0;
	padding: 2px 0;
	font-size: 80%;
	z-index:2;
}
.back {
	position: absolute;
	top: 5px;
	right: 5px;
	border: solid 1px #333;
	padding: 3px;
	font-weight: bold;
	text-decoration: none;
}
a:hover.back {
	background-color: yellow;
	color: #333;
	border-color: #333;	
}
em {
	-webkit-text-emphasis: filled sesame;
	-ms-text-emphasis: filled sesame;
	text-emphasis: filled sesame;
	font-style: normal;
}


@font-face {
  font-family: "myFont";
  src: url("GenEiKoburiMin-R.woff2") format('woff2'),
       url("GenEiKoburiMin-R.woff")  format('woff');
}
.Koburi, .docs h2.Koburi {
  font-family: "myFont";
}

@font-face {
  font-family: "Genmin";
  src: url("SourceHanSerifJP-SemiBold.woff2") format('woff2'),
       url("SourceHanSerifJP-SemiBold.woff")  format('woff');
}
.Genmin, .docs h2.Genmin {
  font-family: "Genmin";
}

@font-face {
  font-family: "Mutsuki";
  src: url("MutsukiNmin-S.woff2") format('woff2'),
       url("MutsukiNmin-S.eot")  format('eot'),
       url("MutsukiNmin-S.woff")  format('woff');
}
@font-face {
  font-family: "MutsukiL_DSP";
  src: url("MutsukiNmin-L_DSP.woff2") format('woff2'),
       url("MutsukiNmin-L_DSP.eot")  format('eot'),
       url("MutsukiNmin-L_DSP.woff")  format('woff');
}
@font-face {
  font-family: "ApMin";
  src: url("ApMin.woff2") format('woff2'),
       url("ApMin.woff")  format('woff');
}
@font-face {
  font-family: "Shippori";
  src: url("ShipporiMincho-Regular.woff2") format('woff2'),
       url("ShipporiMincho-Regular.woff")  format('woff'),
       url("ShipporiMincho-Regular.otf")  format('opentype');
}

@font-face {
  font-family: "Kingen";
  src: url("Kingen.woff2") format('woff2'),
       url("Kingen.woff")  format('woff'),
       url("Kingen.otf")  format('opentype');
}

.Mutsuki {
  font-family: "Mutsuki";
}
.docs h2.Mutsuki {
  font-family: "MutsukiL_DSP";
  font-weight: normal;
}
.ApMin, .docs h2.ApMin {
  font-family: "ApMin";
}
.Kingen, .docs h2.Kingen {
  font-family: "Kingen";
}

.Shippori, .docs h2.Shippori {
  font-family: "Shippori";
}


/* モーダル */
.modal-content{
	display: none;
	width:75%;
	max-width: 800px;
	margin:1.5em auto 0;
	padding:10px 20px;
	border:2px solid #aaa;
	background:#fff;
	z-index:4;
	position:absolute;
	top: 10px;
	font-size: 14px;
}
.modal-content ol{
	list-style-position: inside;
	margin-left: 0;
	padding-left: 0;
}
.modal-content ol li{
	line-height: 1.4;
	margin-bottom: 0.7em;
}
.modal-content img{
	max-width: 95%;
	height: auto;
}


.modal-p{
	margin-top:1em;
}

.modal-p:first-child{
	margin-top:0;
}

.modal-syncer{
	color:#00f;
	text-decoration:underline;
}
 
.modal-syncer:hover{
	cursor:pointer;
	color:#f00;
}
#modal-overlay{
	z-index:3;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);
}

#msg{
	position: absolute;
	width:100vw;
	max-width:100%;
	top: 0;
	right:0;
	z-index:4;
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    margin:0;
}
#msg .right, #msg .left {
 	height:100vh;
	width: 40vw;
	max-width:40%;
	background-color:rgba(0,0,0,0.75);
	display: table-row;
	margin:0;
}
#msg .right {
}
#msg .left {
}
#msg .center {
	width: 20vw;
	max-width:20%;
}
#msg p {
	height:100vh;
	vertical-align: middle;
	display: table-cell;
	color: #fff;
	font-weight: bold;
	font-size: 3vh;
	margin: auto;
	font-family: "游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "HiraMinProN-W3","Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-align: center;
}
.buttons {
	width: 100%;
	height: 90vh;
	z-index:3;
	position:absolute;
}
.buttons input {
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;	
	position:absolute;
	width: 40vw;
	height: 98vh;
	border:0;
}
.buttons input#prev {
	right: 0;
}
.buttons input#next {
	left:0;
}