@charset "UTF-8";
/*CSSをリセットする*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}


/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/
/* page base */
body  {
	background:url(../images/1.jpg);
	text-align:center;
}

#wrapper    {
	width:800px;
	height:auto;
	background-color:#FFF;
	 margin:0 auto;
	
	 }
#container  {
	width:800px;
	height:850px;
	margin:0 auto;
	/*	border:#FFF 1px solid;*/
background-color:#FFF;
	 background-position:center;
	 background-image:url(../images/backsamayo.png);
	 background-repeat:no-repeat;
	}

h1{
	text-shadow:
1px 1px 1px rgba(0, 0, 0, 0.6),
-1px -1px 1px rgba(255, 255, 255, 0.5);
font-size:60px;
font-family:Garamond , Georgia, "Times New Roman", Times, serif;
background:rgba(255, 255, 255, 0.5);
color:#7B2F77;
}

.namae{
	text-shadow:
1px 1px 1px rgba(0, 0, 0, 0.6),
-1px -1px 1px rgba(255, 255, 255, 0.3);
font-size:45px;
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
color:#7B2F77;
margin-top:-210px;
background:rgba(255, 255, 255, 0.3);
}


#container2  {
	width:800px;
	height:1200px;
	margin:0 auto;
	}
	

.listC{
	margin:0 auto;
	padding:2px 4px;

}
.setting{
	margin:0 auto;
	/*	border:#FFF 1px solid;*/
	overflow:hidden;
	text-align:left;

	display:list-item;
	width:600px;
	
}
.setting p{
	font-size:12px;
	color:#000;
}
.sec{
	display:block;
	float:left;
	text-align:left;
	width:120px;
	text-shadow:
1px 1px 1px rgba(0, 0, 0, 0.6),
-1px -1px 1px rgba(255, 255, 255, 0.5);
color:#000;

	
}
.ans{display:block;
	width:auto;
}
.manga {
	font-size: 90%;
	padding:3px;
	float:left;
}

	#container3  {
	width:800px;
	height:500px;
	margin:0 auto;
/*	border:#FFF 1px solid;*/
	}
a{
	text-decoration:none;
	color:#69C;

}

	
/*---------------------------------------------------------------------
slideLeft
---------------------------------------------------------------------*/
	
	ul[data-liffect="slideLeft"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: slideLeft 700ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: slideLeft 700ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: slideLeft 700ms ease both;
    -o-animation-play-state: paused;
    animation: slideLeft 700ms ease both;
    animation-play-state: paused;
}

ul[data-liffect="slideLeft"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}

@-moz-keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}

@-o-keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}

@keyframes slideLeft {
    0% { opacity: 0; left: -30px; }
    100% { opacity: 1; left: 0; }
}





/*---------------------------------------------------------------------
bounceInRight
---------------------------------------------------------------------*/






ul[data-liffect="bounceInRight"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: bounceInRight 1200ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: bounceInRight 1200ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: bounceInRight 1200ms ease both;
    -o-animation-play-state: paused;
    animation: bounceInRight 1200ms ease both;
    animation-play-state: paused;
}

ul[data-liffect="bounceInRight"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes bounceInRight {
    0% { opacity: 0; -webkit-transform: translateX(2000px); }
    60% { -webkit-transform: translateX(-30px); }
    80% { -webkit-transform: translateX(10px); }
    100% { opacity: 1; -webkit-transform: translateX(0); }
}

@-moz-keyframes bounceInRight {
    0% { opacity: 0; -moz-transform: translateX(2000px); }
    60% { -moz-transform: translateX(-30px); }
    80% { -moz-transform: translateX(10px); }
    100% { opacity: 1; -moz-transform: translateX(0); }
}

@-moz-keyframes bounceInRight {
    0% { opacity: 0; -o-transform: translateX(2000px); }
    60% { -o-transform: translateX(-30px); }
    80% { -o-transform: translateX(10px); }
    100% { opacity: 1; -o-transform: translateX(0); }
}

@keyframes bounceInRight {
    0% { opacity: 0; transform: translateX(2000px); }
    60% { transform: translateX(-30px); }
    80% { transform: translateX(10px); }
    100% { opacity: 1; transform: translateX(0); }
}