body {

	margin: 0;
	padding: 0px 0px 0px 0px;
	line-height: 1.7;

	font-size: calc( 0.6vw + 1vh );

	color : #ffffff;
	background-color: #111111;

	font-family: Meiryo, メイリオ, sans-serif;
}

.sumimaru { border-radius : 1em; }

.rank-0 {z-index : 10000;}

.rank-sticky {z-index : 1;}
.rank-relative {z-index : 2;}

.rank-1 {z-index : 100;}

.rank-2 {z-index : 200;}

.rank-3 {z-index : 300;}

.rank-4 {z-index : 400;}

.rank-5 {z-index : 500;}

.rank-6 {z-index : 600;}

.rank-7 {z-index : 700;}

.rank-9999 {z-index : 9999;}

#mobile-only { display : none;}
#pc-only { display : block;}

.kanji {font-family: fot-klee-pro, kozuka-mincho-pr6n, cursive, sans-serif;font-weight: 400;font-style: normal;}

html { scroll-behavior: smooth; }

p {text-align: justify;}

h3 {
	margin : 0px 0px 0px 0px ;
	letter-spacing : 0.4vw;
}

ul li {padding-left: 0px}

input { font-size: calc( 0.7vw + 1.2vh ); }

select { font-size: calc( 0.7vw + 1.2vh ); }

textarea { font-size: calc( 0.7vw + 1.2vh ); }

.checkbox { margin : calc( 1.2vw + 1.8vh ); }

.rubi {font-size: calc( 0.4vw + 0.7vh );}

table { font-size: calc( 0.6vw + 1vh ); }

#menu a {font-size : calc( 0.6vw + 1vh );}

.border-line {
	border-width: 1px;
	border-color: #08356e;
	border-style: solid;
}

.border-check {
	border-width: 1px;
	border-color: #ff0000;
	border-style: solid;
}

.sticky-position {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.relative-position {position: relative;}
.absolute-position {position: absolute;}

.center {text-align : center;}
.justify {text-align: justify; }

a:link { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover { color: #f6b330;}
a { text-decoration: none; }
.overview a { text-decoration: underline; font-weight : 700;}



label { white-space: nowrap; }

.label_area {

    display : inline-block;
    margin : 1%;

}

#fullscreen-area {
	width: 100%;
	height : 100vh;
	display: flex;
  	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#free-area-scroll-up {
	width: 100%;
	display: flex;
  	flex-direction: column;
	align-items: center;
	justify-content: center;

	pointer-events: none;

	margin-top : -100vh;
}


#contents-area { 

	position: relative;
	width : 80%;
	margin : 0% auto 0% auto;
	padding : 5% 10% 5% 10%;

	background-color: #031b39;

	pointer-events: auto;

}

#contents-area_2 { 

	position: relative;
	width : 80%;
	margin : 0% auto 0% auto;
	padding : 0% 10% 5% 0%;

	pointer-events: auto;

}

#contents-area-tate { 

	width : 80%;
	height : 100vh;
	margin : 0 auto 0 auto;
	padding : 20vh 10% 5vh 10%;

	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	display: inline-block;

	font-family: fot-klee-pro, kozuka-mincho-pr6n, cursive, sans-serif;
	font-weight: 400;
	font-style: normal;

	line-height : 3;

	text-align: justify;

	background-color: #031b39;

}

.genbun { 

	overflow-y: auto;

	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;

	font-family: fot-klee-pro, kozuka-mincho-pr6n, cursive, sans-serif;
	font-weight: 400;
	font-style: normal;

	line-height : 3;

	text-align: justify;

	color : #000000;

	background-color: rgba(255,255,255,0.8);

}

#tate {

	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	display: inline-block;

	font-family: fot-klee-pro, kozuka-mincho-pr6n, cursive, sans-serif;
	font-weight: 400;
	font-style: normal;

	line-height : 3;

	text-align: justify;

}

#irasutoya {

	width : 70%;
	margin-bottom : -10px;

}

#irasutoya img{

	width: 300px;
	height: 200px;

	object-position: 50% 0%; 
	object-fit: cover;

}

.catch-box {
	display : inline-block;
	width : 49%;

	margin : 0;

	vertical-align : middle;
	text-align : center;
}


.contents-text-area-right {
	margin : 0px 0px 0px 50%; 
	padding : 20vh 3% 3% 3%; 

	pointer-events: auto;
}

.contents-text-area-full {
	margin : 0px 0px 0px 0%; 
	padding : 20vh 3% 3% 3%; 

	pointer-events: auto;
}

.text-bg-area {
	background: rgba(3, 27, 57, 0.8);
	border: 0vw solid rgba(8,53,110, 0.9);

	text-shadow:0px 0px 0px #000000;
}

.scrollbar { 

	overflow : auto;
	max-height : 40vh;

}

.scrollbar_slide { 

	overflow-y: auto;
	max-height : 80vh;

}

.text-shadow {

	text-shadow: 1px 1px 3px #000000;

}



td .line{

	background-image: url(../image/common/icon_line.png);

}

.submit {
	display       : inline-block;
	font-size     : calc( 0.6vw + 1vh );        /* 文字サイズ */
	text-align    : center;      /* 文字位置   */
	cursor        : pointer;     /* カーソル   */
	padding       : 0.6vw 3vw;   /* 余白       */
	background    : #bbbbbb;     /* 背景色     */
	color         : #222222;     /* 文字色     */
	line-height   : 1em;         /* 1行の高さ  */
	transition    : .3s;         /* なめらか変化 */
	border        : 1px solid #444444;    /* 枠の指定 */

	width : 100%; 
	height : 7vh; 
	letter-spacing : 2vw;
}

.submit:hover {
	color         : #ffffff;     /* 背景色     */
	background    : #222222;     /* 文字色     */
	border        : 1px solid #ffffff;
}

.form_margin {

	margin-top : 3%;
	margin-bottom : 10%;
	margin-right : 0;
	margin-left : 0;

}

/* 課金コンテンツ拡張時に使用 */
.billing { 
	/*filter: blur(5px); */
	user-select: none;
}


@media screen and (max-device-width:1281px) and (orientation: portrait){

	body { -webkit-text-size-adjust: 100%; }

	#mobile-only { display : block;}
	#pc-only { display : none;}

	#free-area-scroll-up { margin-top : 0px; }

	.contents-text-area-right {
		margin : 0 0 0 0; 
		padding : 3%; 
	}

	.catch-box {
		width : 99%;
	}

	#contents-area-tate { 

		width : 80%;
		height : 100vh;
		margin : 0 auto 0 auto;
		padding : 20vh 10% 15vh 10%;

	}

	.scrollbar { 

		overflow : auto;
		max-height : 20vh;

	}

	.text-bg-area {
		background: rgba(8,53,110, 1);
		border: 0vw solid rgba(8,53,110, 0.9);
	}

}

#browser { visibility: hidden; }

_:-ms-lang(x)::-ms-backdrop, #browser{ visibility: visible;}