@charset "utf-8";

body {
	background: url(../image/9999/bg.png);
	background-position: center top;
	font-family:"Open Sans","Helvetica Neue",Helvetica,"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	color: #442727;
}
img{
	vertical-align: bottom;
	border-style:none;
}
li{list-style: none;}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
.clearfix {width: 100%;}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}


/* ======================================================
	common
====================================================== */
#wrap{
	/*草*/
	width:100%;
	background: url(../image/9999/bottom_grass.png)no-repeat;
	background-position: bottom center;
}
/*ロゴ*/
#head{
	width:728px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 10px;
}
#main{
	width: 768px;
	margin: 0 auto;
}

#contents{
	width: 728px;
	background: #FFF;
	padding: 0 20px;
	background: url(../image/9999/bg_paper.png)repeat-y;
	background-position: top center;
	/*margin-bottom: 30px;*/
}
.paper{
	width: 768px;
	height: 12px;
	line-height: 0;
}
#paperBottom{
	width: 768px;
	height: 12px;
	background: url(../image/9999/bg_paperBottom.png)no-repeat;
	padding-bottom: 20px;
}

/* ======================================================
	1,ルール
====================================================== */
#howto{
	margin-bottom: 10px;
}
/* ======================================================
	2,ストーリー
====================================================== */
#story{
	padding-top: 20px;
}
/* ======================================================
	3,利用規約
====================================================== */
#kiyaku{
	padding-top: 5px;
}

/*規約内容*/
.agreement{
	margin-top: 20px;
	margin-bottom:10px;
	color: #337026;
	font-weight: bold;
}


div.content_recomend {
	margin-bottom: 6px;
}
div.recomend_body {
	margin: 10 auto;
	width: 708px;
	height: 167px;
	background-color: #fffcf2;
	padding: 10px 10px;
	border: 1px dashed #d4aa6b;
	overflow: auto;
	overflow-y: scroll;
	overflow-x: hidden;
  }

.recomend_body ul{
}

.text01{
	font-size:15px;
	line-height: 140%;
	color: #a90000;
	text-align:left;
	font-weight:bold;
	margin-bottom:10px;
}

.text04{
	font-size:15px;
	line-height: 120%;
	color: #8b5a3d;
	font-weight: bold;
	margin-bottom:7px;
}
.text05{
	font-size:14px;
	line-height: 120%;
	color: #202020;
	margin-bottom:17px;
}

#note{
	font-size: 13px;
	text-align: center;
	margin-top: 8px;
	margin-bottom: 8px;
}

/* 利用規約チェックボックス*/
.checkbox{
	text-align:center;
	margin-bottom:4px;
}
.checkbox label:before{
	content: none;
}


/* ======================================================
	4,捜索
====================================================== */
#picture{
	width: 640px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 6px;
}


/* ======================================================
	5,発見ぼかし
====================================================== */
#blur{
	-webkit-filter: blur(16px);
	filter: blur(16px);
	display: inline-block;
	overflow: hidden;
}

#picture_animal{
	width: 600px;
	margin: 0 auto;
	top: 10px;
	margin-bottom: 23px;
	position:relative;
	height: 400px;
}
#picture1{
	position: absolute;
	top:0;
	z-index: 1;
}
#picture2{
	position: absolute;
	top:0;
	z-index: 2;
}

#comment{
	background:url("../image/9999/bg_what.png");
	font-size: 36px;
	text-align:center;
	width: 648px;
	margin: 0 auto;
	font-weight: bold;
	font-family: serif,"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}


/* ======================================================
	6,発見
====================================================== */
#answer{
	font-size: 36px;
	text-align:center;
	width: 648px;
	margin: 0 auto;
	font-weight: bold;
	font-family: serif,"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}


/* ======================================================
	7,図鑑
====================================================== */
#book{
	color: #442727;
	background: url(../image/9999/bg_book.png)no-repeat;
	background-position: top center;
	background-size: cover;
	width: 728px;
	height: 455px;
	margin: 0 auto;
}

/*明朝体*/
#name,#academic,#protection{
	font-family: serif,"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

/*写真*/
#bookPict{
	width: 340px;
	margin-left: 220px;
	padding-top: 40px;
}
#bookPict img{
	width: 100%;
}

/* ！共通！ */
#name,#academic,#detail{
	text-align: center;
	width: 450px;
	margin-left: 170px;
}

/*名前*/
#name{
	font-size: 29px;
	font-weight: bold;
	margin-top: 0;
	line-height: 150%;
}
/*学名*/
#academic{
	font-size: 16px;
}
/*ライン*/
#bookLine{
	width: 65px;
	border-bottom: 1px dotted #521B1B;
	margin-left: 370px;
	margin-top: 5px;
	margin-bottom: 7px;
}
/*詳細*/
#detail{
	font-size: 15px;
}


/*保護した*/
#protection{
	font-size: 35px;
	text-align: center;
	margin-bottom: 10px;
}

/* ======================================================
	8,図鑑終了
====================================================== */
#book_finish{
	text-align: center;
}



/* ======================================================
	9,アンケート
====================================================== */
/* アンケートHEADタイトル*/
#enqueteHead{
	background: url(../image/9999/bg_enqTitle.png)no-repeat;
	background-position: center top;
	width: 728px;
	height: 62px;	
	color:#ffea96;
	font-size:25px;
	line-height: 62px;
	text-align: center;
	font-family: serif,"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;

}
#enqueteHead span{
	line-height: 370%;
}

#enueteWrap{
}

/* ===== 何問目 ===== */
#lineImg{
	text-align: center;
}
#now_column{
	text-align:center;
	font-weight: bold;
	font-size: 16px;
	color: #FFF;
	background: url(../image/9999/bg_now.png)no-repeat;
	background-position: center top;
	-webkit-background-size: 100%;
	     -o-background-size: 100%;
	        background-size: 100%;
	height: 40px;
	width: 180px;
	line-height: 48px;
	margin-left: 548px;
	margin-top: 3px;
}
#now_column span{
	font-size: 80%;
}


/* ===== アンケート ベース ===== */
.enquete{
	width: 640px;
    margin: 0 auto;
}
.enquete p{
	line-height:195%;
}
#enqBgBottom{
	margin-bottom: 10px;
}


/* ====== アンケート設問タイトル ===== */
#enqueteTitle{
font-weight:bold;
font-size: 13px;/* pakkun */
letter-spacing: 1px;
color: #6d3c1f;
width: 685px;/* pakkun */
margin-top:15px;/* pakkun */
}
#enqueteTitle span{
color: #efb784;
font-size: 17px;/* pakkun */
}


/* ===== アンケート選択肢 ===== */
#enqueteUl{
margin: 5px 0 0 0;
font-size: 14px;/* pakkun */
}
#enqueteUl li{
margin-bottom: 10px;/* pakkun */
}	


/*ラジオボタン*/
input[type="radio"] {
	display: none;
}
label {
	position: relative;
	display: block;
	padding: 3px 0 3px 40px;
	cursor: pointer;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
}
label::before,
label::after {
	position: absolute;
	content: '';
	top: 50%;
	border-radius: 100%;
	-webkit-transition: all .2s;
	transition: all .2s;
}
label::before {
	left: 0;
	width: 14px;
	height: 14px;
	margin-top: -8px;
	background: #f3f3f3;
	border: 1px solid #ccc;
	margin-left: 1em;
}
label:hover::before {
	background: #fff;
}
label::after {
	opacity: 0;
	left: 4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #ec913a;
	margin-left: 1em;
	-webkit-transform: scale(2);
	transform: scale(2);
}
input[type="radio"]:checked + label::before {
	background: #fff;
	border: 1px solid #ec913a;
}
input[type="radio"]:checked + label::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* ===== チェックアラート ===== */
#alertMessage{
	color: #F39303;
	font-size: 14px;
	font-weight: bold;
	opacity: 0;
	text-align: center;
	margin: 0;
	letter-spacing: 1px;/* pakkun */
}


/* ===== アンケート　次へボタン ===== */
.column_bt{
	text-align:center;
	margin-top:5px;
	margin-bottom:5px;
	/*display:none;*/
}
.enquete_nextbt {
	-moz-box-shadow: inset 0px -2px 0px 0px #333333);
	-webkit-box-shadow: inset 0px -2px 0px 0px #333333));
	box-shadow: inset 0px -2px 0px 0px #333333);
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #EEEEEE)), color-stop(1,#333333) );
	background: -moz-linear-gradient( center top, #EEEEEE) 5%, #EEEEEE) 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333)', endColorstr='#333333)');
	background-color: #ec913a;
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	border-top-left-radius: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
	border-top-right-radius: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
	border-bottom-right-radius: 9px;
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	border-bottom-left-radius: 9px;
	text-indent: 0px;
	border: 1px solid #EEEEEE;
	display: inline-block;
	color: #ffffff;
	font-family: Arial;
	font-size: 22px;
	font-weight: bold;
	font-style: normal;
	height: 36px;
	line-height: 36px;
	width: 142px;
	text-decoration: none;
	text-align: center;
	text-shadow:1px 1px 3px #5d3a06;
}


/* ===== コラム_戻る進むボタン ===== */
.enq_back_next{
	display: table;
	margin:5px auto;
	border-spacing: 10px 0;　/*数字は「左右、上下」*/
	height:40px;
	width:620px;
}
.enq_back_next_bt{
	display: table-cell;
	width:300px;
	height:40px;
}
.enq_back_next_bt>a{
	/*display: none;*/
}


.ad_announce{
	height:80px;
	width:728px;
}


/* ======================================================
	メンテなど
====================================================== */
#mention{
	font-size: 18px;
	width: 100%;
	text-align: center;
	padding-bottom: 15px;
}
#mention p{
	font-size: 26px;
	font-weight: bold;
}

/* ======================================================
	FOOTER
====================================================== */
/*注意事項*/
footer{
	background: #F9F3EB;
	color:#444444;
	font-size:0.8em;
	line-height: 190%;
	margin-top: 10px;
	padding-bottom: 10px;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
}
footer img{
}
footer div{
	padding-top: 10px;
}

footer p{
	margin:10px 20px 0 20px;
}

/* ===== 運営会社 ===== */
footer a{
	text-decoration: none;
	color:#444444;
}
footer a:hover {
	color:#444444;
}
footer a:visited {
	color:#444444;
}

#metion{
	margin-bottom: 10px;
	font-size: 80%;
	line-height: 170%;
	padding: 0 60px;
}

/* ======================================================
	ボタン
====================================================== */
/* 進むボタン*/
.next_bt{
	margin:5px 0px 2px 130px;
	width:468px;
	height:60px;
	text-align:center;
}
/* 進むボタン*/
.next_bt2{
	width:468px;
	height:60px;
	text-align:center;
}
#back_bt{
	text-align: center;
	width: 100%;
}


/* ===== 戻る進むボタン ===== */
.enq_back_next{
	display: table;
	margin:5px auto;
	border-spacing: 10px 0;
	height:40px;
	width:620px;
}
.enq_back_next_bt{
	display: table-cell;
	width:300px;
	height:40px;
}
.enq_back_next_bt>a{
	/*display: none;*/
}

/* ======================================================
	アンケートリスト
====================================================== */

/* 記事セレクト*/
.enquete-list {
}
.enquete-list .table {
	border-top: dotted 1px #d1c0a5;
	border-bottom: dotted 1px #d1c0a5;
	width: 100%;
}
.enquete-list .table tr {
	vertical-align: top;
	font-size:14px;
}
.enquete-list .table.odd tbody tr:nth-child(odd) {
	background: #f9f6ec;
}
.enquete-list .table th,.enquete-list .table td {
	border-left:  dotted 1px #d1c0a5;
	
	/*vertical-align: middle;*/
}
.enquete-list .table th {
	/*font-weight: bold;*/
	padding: 10px;
}
.enquete-list .table td {
	padding: 5px 10px;
}
.enquete-list .table th:first-child,.enquete-list .table td:first-child {
	border-left: none;
}
.enquete-list .table .coin {
	font-weight: bold;
	text-align:right;
}
.enquete-list .table tbody .coin {
	color: #FF9900;
}
.enquete-list .table tbody .coin span {
	color: #6B6B6B;
	font-size: 12px;
	text-decoration: line-through;
}
.enquete-list .table .status {
	 text-align: center;
}
.enquete-list .table .title {
	 text-align: left;
}
.enquete-list .table .date {
	 text-align: left;
}
.enquete-list .table .status .answered {
	display: block;
	padding: 10px;
	font-size: 13px;
	line-height: 1;
}
.enquete-list .nothing {
	margin-top: 20px;
	padding: 20px 0;
	text-align: center;
}
.ui-btn {
	color: #FFF;
	display: block;
	position: relative;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	padding: 10px;
	font-size: 13px;
	text-align: center;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
 }
 .ui-btn:hover {
	 text-decoration: none;
 }
.ui-btn-a,a.ui-btn-a {
	color: #fff;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	background-color: #6dbf42;
	font-weight: bold;
}
 .ui-btn-a:hover {
	background-color: #DBDBDB;
}
.ui-btn-a:active {
	background-color: #DBDBDB;
}
.ui-btn-a,a.ui-btn-b {
	color: #949494;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	font-weight: bold;
	background-color: #E9E9E9;
}
.select_attend{
	padding: 15px 0;
	color:#70c534;
	font-size:15px;
	text-align:center;
	line-height:140%;
	font-weight: bold;

}
.select_attend span{
	color: #EF9D06;
	font-weight: bold;
}
.level5_announce{
	width: 400px;
	height: 85px;
	background-image: url(../image/9999/level5_announce.png);
	background-repeat: no-repeat;
	margin: 0px 0px 10px 164px;
	line-height: 58%;
}
.lever5{
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
	font-size: 24px;
	margin-top: 0px;
	letter-spacing: 2px;
}
.blue{
	color: #3399CC;
	font-weight: bold;
	font-size: 32px;
}
.pt_double{
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	font-size:22px;
}
.orange{
	color: #FF9900;
	font-weight: bold;
	font-size: 34px;
}


/* ======================================================
	広告
====================================================== */

#ad1{
	width:468px;
	height:60px;
	margin: 0 auto;
}
#brand_panel{
	margin-top: 5px;
}
.brand_panel{
	width:728px;
	height:250px;
	text-align:center;
}
#ad2 {
	float:left;
	margin:0px 0px 0px 56px;
	width:300px;
	height:250px;
}
#ad3 {
	float:left;
	margin:0px 0px 0px 6px;
	width:300px;
	height:250px;
}

#ad4 {
	width:728px;
	height:90px;
}

/*広告移動*/
#set_up {
	position:relative;
}
#move_start {
	position:absolute;
	top:65px;
	left:130px;
}


/*追加広告*/
#pr_ad{
	width:728px;
	text-align:center;
	margin-top:30px;
}
#pr_ad_text{
	width: 728px;
	text-align: center;
	color: #726050;
	font-weight: bold;
	font-size: 16px;
}
#ad5 {
	width:728px;
	height:90px;
}
#ad6{
	width:468px;
	height:60px;
	margin: 10px auto 10px auto;}
#ad7 {
	float:left;
	margin:0px 0px 0px 56px;
	height:250px;
	width:300px;
}
#ad8 {
	float:left;
	margin:0px 0px 0px 56px;
	height:250px;
	width:300px;
}
#ad9 {
	width:728px;
	height:90px;
	margin-top:10px;
}
#ad10{
	width:468px;
	height:60px;
	margin: 10px auto 10px auto;}
#ad11 {
	float:left;
	clear:left;
	margin:0px 20px 0px 56px;
	height:250px;
}
#ad12 {
}
#ad13 {
	width:728px;
	height:90px;
	margin-top:10px;
}
/*追加広告*----------------------*/	

#ad4{
	/*display:none;*/
}
.enq_back_next{
	/*display:none;*/
}
/* 選択色非表示?*/
html {
    -webkit-user-select: none;
    user-select: none;
}

input[type="image"]{
	position:relative;
	z-index:9999;
}

/* transition anime */
#manga_bt,.enq_back_next,.next_bt,.column_bt {
	display:block;
	opacity: 0;
	/*height:0px;*/
}
.next_bt {
	animation-name: fadaIn;
	animation-duration: 1s;
	animation-delay: 1.5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.enq_back_next,.column_bt {
	animation-name: fadeIn;
	animation-duration: 1s;
	animation-delay: 1.5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes fadeIn {
	0% {opacity: 0;height:40px;}
	99% {opacity: 0;height:40px;}
	100% {opacity: 1;height:40px;}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;height:40px;}
	99% {opacity: 0;height:40px;}
	100% {opacity: 1;height:40px;}
}

@keyframes fadaIn {
	0% {opacity: 0;height:60px;}
	99% {opacity: 0;height:60px;}
	100% {opacity: 1;height:60px;}
}

@-webkit-keyframes fadaIn {
	0% {opacity: 0;height:60px;}
	99% {opacity: 0;height:60px;}
	100% {opacity: 1;height:60px;}
}

/* ================= 2019 09 追加 G ================= */
.next_bt{ margin: 15px auto!important;}
.enq_back_next{ margin: 15px auto;}
.column_bt{
	margin-top: 15px;
	margin-bottom: 15px;
}

.checkbox{ padding: 0 0 15px 0;}
#comment{ margin: 0 auto 15px;}
#answer{ margin: 0 auto 15px;}
#protection{ margin-bottom: 15px;}
#note{ margin-bottom: 15px;}
#pr_ad_text{ margin-bottom: 15px;}

#brand_panel{
	display: flex;
	justify-content:center;
}
#ad2,#ad3{
	float: none;
	margin: 0;
}
#ad3{ margin-left: 20px;}
#ad4{ margin-top: 15px;}
#ad6{ margin: 20px auto;}