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


html {  
    overflow-y:scroll;
	margin: 0;
	padding: 0;
	font-size: 6.25%; /* sets the base font to 10px for easier math */
}  

body{
	margin: 0;
	padding: 0;
	font-size: 16em;
	line-height:2;
	color:#fff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #000;
	
	-webkit-text-size-adjust: 100%;
}


@media screen and (max-width: 768px){
	html {font-size: 5%;}
	body {padding-top: 20px;
		font-size: 16em;}
}


#wrap{}

#header{}

#main{}

#footer{}


.wrap{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.header {
	text-align: center;
}

.header .logo,
.header .title {
	margin: 0 auto;
} 

.header .logo img{
	width: 100%;
	max-width: 580px;
}
.header .title img{
	width: 100%;
}

.index .header .title {max-width: 682px;} 
.faq .header .title {max-width: 682px;} 
.cast .header .title {max-width: 836px;} 


@media screen and (max-width: 1023px) {
	.wrap{
		width: 90%;
	}
}
@media screen and (max-width: 767px) {
	.wrap{
		width: 90%;
	}
	
	.header {}

	.header .logo img{
		width: 80%;
	}
	.header .title img{
		width: 80%;
	}
}

.main{
	text-align: left;
	word-wrap: break-word;
}

.footer{
	margin: 40px auto;
	text-align: center;
	font-size: 16rem;
}

.footer .copy {
	color: #fff;
}


#pagetop{
    position: fixed;
    right: 15px;
    bottom: 20px;
	z-index: 1000;
}

@media screen and (max-width: 767px) {
	#pagetop{
		text-align: right;
		right: 5px;
		bottom: 4px;
	}

	#pagetop img{
		width: 50%;
		height: auto;
	}
}

/********リンク********/
a {text-decoration: none;}
a:link {color: #ffb64d;}
a:hover {color: #f9bf73;}
a:visited {color: #d8943a;}

a:hover img{
  filter: alpha(opacity=70);
  opacity: 0.7;
  zoom: 1.0;
  }

/********マージン、パディング********/

.marTop1em {margin-top: 1em;}
.marTop2em {margin-top: 2em;}
.marTop3em {margin-top: 3em;}
.marTop4em {margin-top: 4em;}
.marTop5em {margin-top: 5em;}
.marRgt1em {margin-right: 1em;}
.marRgt2em {margin-right: 2em;}
.marRgt3em {margin-right: 3em;}
.marRgt4em {margin-right: 4em;}
.marRgt5em {margin-right: 5em;}
.marBtm1em {margin-bottom: 1em;}
.marBtm2em {margin-bottom: 2em;}
.marBtm3em {margin-bottom: 3em;}
.marBtm4em {margin-bottom: 4em;}
.marBtm5em {margin-bottom: 5em;}
.marLft1em {margin-left: 1em;}
.marLft2em {margin-left: 2em;}
.marLft3em {margin-left: 3em;}
.marLft4em {margin-left: 4em;}
.marLft5em {margin-left: 5em;}


/********テキスト********/

.uline {text-decoration: underline;}
.bold {font-weight: bold;}
.italic {font-style: italic;}

.right {text-align: right;}
.left {text-align: left;}
.cen {text-align: center;}


/********共通********/

.floatL {float: left;}
.floatR {float: right;}
.clear {float: clear;}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.disc {
	list-style: disc;
}

.caution {
	font-size: 14rem;
	text-align: left;
}

.caution li{
	margin-bottom: 0.5em;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5;
}

.res {
	display: none;
}

.res2 {
	display: none;
}

.res3 {
	display: none;
}


@media screen and (max-width: 768px){
	.res {
		display: inline;
	}
}

@media screen and (max-width: 414px){
	.res2 {
		display: inline;
	}
}


@media screen and (max-width: 375px){
	.res3 {
		display: inline;
	}
}

/********見出し********/

.heading1{}
.heading2{}
.heading3{}
.heading4{}


/********トップページ********/
.index {}

.index .lead {
	margin: 1em auto;
	text-align: left;
}


.index .text {
	margin: 1em auto;
}

.index .box {
/*	padding: 2em;
	border: 1px solid #fff;*/
}

.index .hosoku {
	font-size: 14rem;
}

.outline {
	margin-bottom: 2em;
}

.outline > .title {
	position: relative;
font-family: fot-klee-pro,sans-serif;
font-weight: 600;
font-style: normal;
	margin: 2em 0 0;
	padding-left: 28px;
	font-size: 24rem;
	color: #fff;
	border-bottom: 1px groove #fff;
}

.outline > .title::before{
content: url("../images/mark.gif");
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
}
	
.outline > .data {
	padding: 2em;

}

.outline .entry_type {
	margin: 1em 0;
}

.outline .entry_type > .title{
	margin: 2em 0 0;
	padding: 0 0.5em;
	background:#fff;
	color: #000;
	font-weight: bold;
	font-size: 24rem; 
	text-align: center;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aaaaaa+0,9b9ca0+10,ffffff+49,aba9ad+90,a5a5a5+100 */
background: rgb(170,170,170); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(170,170,170,1) 0%, rgba(155,156,160,1) 10%, rgba(255,255,255,1) 49%, rgba(171,169,173,1) 90%, rgba(165,165,165,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.outline .entry_type > .data{
	padding: 2em;
	border: 1px groove #fff;
}

.outline .entry_type .setsumei{
	text-indent: -1em;
	padding-left: 1em;
}

.outline .entry_type .shimekiri{
	text-decoration: underline;
	font-weight: bold;
}
.outline .entry_type .wrap_btn {
    margin: 0.5em auto 0;
    text-align: center;
}
.outline .entry_type .btn_entry {
	margin: 1em auto;
	display: inline-block;
	max-width: 300px;
    width: 100%;
    margin: 0 0.5em 0.5em;
	padding: 0.3em 1.5em 0.3em;
	text-align: center;
	text-decoration: none;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: bold;
	color: #000;
	font-size: 1.1em;
	border: 3px groove #fff;
    line-height: 1.5;
	
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aaaaaa+0,9b9ca0+10,ffffff+49,aba9ad+90,a5a5a5+100 */
background: rgb(170,170,170); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(170,170,170,1) 0%, rgba(155,156,160,1) 10%, rgba(255,255,255,1) 49%, rgba(171,169,173,1) 90%, rgba(165,165,165,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	overflow: hidden;	

}

.outline .entry_type .btn_entry2 {
	margin: 1em auto;
	display: block;
	max-width: 300px;
	padding: 0.3em 1.5em 0.3em;
	text-align: center;
	text-decoration: none;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: bold;
	color: #000;
	font-size: 1.1em;
	border: 3px groove #fff;
    line-height: 3;
	
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aaaaaa+0,9b9ca0+10,ffffff+49,aba9ad+90,a5a5a5+100 */
background: rgb(170,170,170); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(170,170,170,1) 0%, rgba(155,156,160,1) 10%, rgba(255,255,255,1) 49%, rgba(171,169,173,1) 90%, rgba(165,165,165,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	overflow: hidden;	

}
.outline .entry_type .btn_entry a {
	color: #000;
}

.index .entry_type .add{
    padding: 1em;
    border: 1px solid #fff;
	text-align: center;
    font-size: 1.2em;
}

.index .entry_type .add a{
    color: #fff;
}

.index .outline .add{
    margin: 2em auto 0;
	text-align: center;
}

a.btn_faq {
	margin: 1em auto;
	position: relative;
	display: block;
	width: 240px;
	padding: 0 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: bold;
	color: #000;
	font-size: 1.5em;
	border: 3px groove #fff;
	
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#aaaaaa+0,9b9ca0+10,ffffff+49,aba9ad+90,a5a5a5+100 */
background: rgb(170,170,170); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(170,170,170,1) 0%, rgba(155,156,160,1) 10%, rgba(255,255,255,1) 49%, rgba(171,169,173,1) 90%, rgba(165,165,165,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(170,170,170,1) 0%,rgba(155,156,160,1) 10%,rgba(255,255,255,1) 49%,rgba(171,169,173,1) 90%,rgba(165,165,165,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#a5a5a5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	overflow: hidden;
}



.index .privacy{
	margin-top: 40px;
	padding: 2em;
	border: 1px groove #fff;
	font-size: 0.9em;
	text-align: left;
}

.index .privacy .title{
	margin-bottom: 1em;
	text-align: center;
}

.index .privacy ul{
	margin-bottom: 1em;
}


@media screen and (max-width: 768px){
	.index .lead {
		width: 95%;
	}

	.index .text {
		width: 95%;
	}

	.outline > .title {
		padding: 0.3em 0.8em 0.3em 1.5em;}

	.outline > .title::before{
	  top: 65%;
	  left: 0;
	}

}

@media screen and (max-width: 640px) {
	.index .shorui_data .last td:last-child {
		border-bottom: solid 1px #ccc;
		width: 100%;
	  }
	.index .shorui_data {
		width: 100%;
	  }
	.index .shorui_data th,
	.index .shorui_data td {
	  border-bottom: none;
		display: block;
		width: 100%;
	  }
}

@media screen and (max-width: 414px) {

	.outline > .data {
		padding: 1em;
	}
	
	.index .outline .add{
		margin-left: 0;
		text-indent: 0;
		padding-left: 0;
		text-align: center;
	}
	.outline .entry_type > .data{
		padding: 1.5em 1em;
	}

	.outline .entry_type .btn_entry {
		width: 200px;
	}

	.outline .entry_type .btn_entry2 {
		width: 200px;
	}
	a.btn_faq {
		width: 200px;
	}

}

/********　FAQ　よくある質問********/

.faq {}

.faq .title2{
	position: relative;
font-family: fot-klee-pro,sans-serif;
font-weight: 600;
font-style: normal;
	margin: 2em 0 0;
	padding-left: 28px;
	font-size: 24rem;
	color: #fff;
	border-bottom: 1px groove #fff;
}

.faq .title2::before{
content: url("../images/mark.gif");
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
}

.faq .text {
	padding: 1em;
}

.faq .qa {
	padding: 1em 0.5em;
}

.faq .q {
	margin: 1em 0 0;
	color: #fff;
	text-indent: -2em;
	padding-bottom: 0.5em;
	padding-left: 2em;
	line-height: 1.5;
}

.faq .q .point,
.faq .a .point{
	font-size: 28rem;
	font-family: a-otf-midashi-mi-ma31-pr6n,serif;
	font-weight: 600;
	font-style: normal;
	padding-right: 5px;
	color:#fff;
}

.faq .a {
	padding: 1em 2em;
	border: 1px dotted #fff;
}


@media screen and (max-width: 768px) {
	.faq .title2::before{
	  margin-top: -15px;
	}
}

@media screen and (max-width: 768px) {
	.faq .title2{
		font-size: 20rem;
	}
}

.faq .caution {
    margin: 2em auto 0;
    font-size: 1em;
}

/********　主な登場人物 ********/

.cast {}

.cast .cast_list {}

.cast .cast_list .title {
	position: relative;
	margin-top: 1em;
	padding-left: 28px;
	font-size: 24rem;
	background: #000;
	color: #fff;
	font-family: fot-klee-pro,sans-serif;
	font-weight: 600;
	font-style: normal;
	border-bottom: 1px groove #fff;
}

.cast .caution {
	margin: 2em auto 3em;
}

.cast .cast_list .title::before{
content: url("../images/mark.gif");
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -20px;
}

.cast .cast_list .data {
	padding: 1em 2em;
}

@media screen and (max-width: 768px) {
	.cast .cast_list .title::before{
	  margin-top: -15px;
	}
	
}

@media screen and (max-width: 414px) {
	.cast .cast_list .data {
		padding: 1em;
	}
}