@charset "utf-8";

body {
	font-family:"Open Sans","Helvetica Neue",Helvetica,"游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	color: #434343;
	background: #EEE;
	font-size: 14px;
	line-height: 1.5;

}
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{
	padding-bottom: 15px;
	
}
/*ロゴ*/
#head{
	margin: 0 auto;
	text-align: center;
	padding-bottom: 10px;
	padding: 15px;
	background: url(../image/9999/head_bg.jpg)no-repeat;
	-webkit-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	
}
#main{
/*	width: 768px;
	margin: 0 auto;*/
	text-align: center;
}

#contents{
	/*width: 768px;*/
	/*background: #FFF;*/

	background: url(../image/9999/foot_bg.png)no-repeat;
	background-position : center bottom 450px;
}
.padding{
	padding: 20px 20px 0 20px;
}
.commonFoot{
	padding: 0 20px 20px 20px;
	width: 768px;
	margin: 0 auto;
}

.paper{
	width: 768px;
	height: 12px;
	line-height: 0;
}


/* ======================================================
	1,ルール
====================================================== */
#rule{
}



/* ======================================================
	2,利用規約
====================================================== */
#kiyaku{
}

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


div.content_recomend {
	margin-bottom: 6px;
}
div.recomend_body {
	margin: 0 auto;
	width: 708px;
	height: 167px;
	background-color: #ececec;
	padding: 10px 10px;
	border: 1px dashed #ababab;
	overflow: auto;
	overflow-y: scroll;
	overflow-x: hidden;
	text-align: left;
  }

.recomend_body ul{
}

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

.text04{
	font-size:15px;
	line-height: 120%;
	color: #444;
	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;
}


/* ======================================================
	3, story
====================================================== */
#story{
	margin-bottom: 10px;
	text-align: center;
	position: relative;
}
#story #roopTop{
	overflow: hidden;
	width:100%;
	position: relative;
}
#story #roopTopSlide{
	width: 10000px;
	height: 281px;
	background: url(../image/9999/s_puzzle.png);
	background-position: center bottom;
	margin-bottom: 30px;
}


/* animation */
#roopTopSlide {
	animation:moveX 220s infinite alternate linear;
	-ms-animation:moveX 220s infinite alternate linear;
	-webkit-animation:moveX 220s infinite alternate linear;
	-moz-animation:moveX 220s infinite alternate linear;
}


/*　横の動き　*/
@keyframes moveX {
0% {margin-left:0px;}
100% {margin-left:-9300px;}
}
@-ms-keyframes moveX{
0% {margin-left:0px;}
100% {margin-left:-9300px;}
}
@-webkit-keyframes moveX /* Safari and Chrome */
{
0% {margin-left:0px;}
100% {margin-left:-9300px;}
}
@-moz-keyframes moveX /* Firefox */
{
0% {margin-left:0px;}
100% {margin-left:-9300px;}
}

/* ======================================================
	4,ハウツー
====================================================== */
#howto{
	background: url(../image/9999/howto-bg.png)no-repeat top center;
}
#howto p{
	margin-top: 200px;
}

/* ======================================================
	4,タイトル
====================================================== */
#photoTitle{
	text-align: center;
	padding-bottom: 15px;
}
h2#title{
	font-family: serif,"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 50px;
	font-weight: normal;
	margin: 10px auto 20px;
	padding-bottom: 10px;
	text-shadow: 
		white 2px 0px, white -2px 0px,
		white 0px -2px, white -2px 0px,
		white 2px 2px, white -2px 2px,
		white 2px -2px, white -2px -2px,
		white 1px 2px, white -1px 2px,
		white 1px -2px, white -1px -2px,
		white 2px 1px, white -2px 1px,
		white 2px -1px, white -2px -1px;
	background: url(../image/9999/dotline.png)no-repeat center bottom;
}

/* ひらめき度 */
ul#rankStar{
	margin-top: 5px;
	display: flex;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-justify-content: center;
	        justify-content: center;
}
ul#rankStar li{
	margin-right: 3px;
}
ul#rankStar li:last-of-type{
	margin-right: 0;
}


#photo{
	position: relative;
	width: 600px;
	height: 400px;
	margin: 0 auto;
}
#photo p#ph{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
#photo p#whitemask{
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
}

/* ======================================================
	6,パズル
====================================================== */
article#puzzle{
	width: 600px;
	padding: 0 0 220px 0;
	margin: 0 auto;
}
article#puzzle header{
	margin: 15px auto;
}
article#puzzle section{
	position: relative;
}

#base{
	height: 400px;
	position: relative;
}
#draggable{
	width: 600px;
	height: 400px;
	position: absolute;
	z-index: 2;
	top: 300px;
	left: 0;
}

#pieceBase{
	position: absolute;
	z-index: 1;
	width: 600px;
	height: 160px;
	top: 420px;
	left: 0;
	background: #FFF;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
}
#pieceBase p{
	border: 1px dashed #d2d2d2;
	width: 578px;
	height: 138px;
	margin: 10px;
	-webkit-border-radius: 7px;
	        border-radius: 7px;
}
/* リセットボタン */
#resetP{
	position: absolute;
	z-index: 10;
	top: 600px;
	left:0;
	right: 0;
	
}
/* ギブアップボタン */
#giveup{
	position: absolute;
	z-index: 10;
	top: 680px;
	left:0;
	right: 0;
}


#txPointX,#txPointY{
	opacity: 0;
}

/* 正解 */
#correct{
	display: none;
	position: absolute;
	z-index: 3;
	bottom: 20px;
	left: 0;
}


/* 次へボタン */
#puzzleBtn{
}




/* ======================================================
	7,コンテンツ終了
====================================================== */
#con_finish{
	text-align: center;
	margin-bottom: 10px;
}

#con_finish #note{
	margin-top: 30px;
}



/* ======================================================
	9,アンケート
====================================================== */
#icEnq{
	text-align: center;
}
/* アンケートHEADタイトル*/
#enqueteHead{
	font-size:30px;
	text-align: center;
	padding: 5px 0;
	font-family: serif,"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	text-shadow: 
		white 2px 0px, white -2px 0px,
		white 0px -2px, white -2px 0px,
		white 2px 2px, white -2px 2px,
		white 2px -2px, white -2px -2px,
		white 1px 2px, white -1px 2px,
		white 1px -2px, white -1px -2px,
		white 2px 1px, white -2px 1px,
		white 2px -1px, white -2px -1px;
}




/* ===== 何問目 ===== */
#now{
	color: #FFF;
	text-align:center;
	font-weight: bold;
	font-size: 17px;
	line-height: 42px;
	background: url(../image/9999/now_bg.png)no-repeat center top;
	width: 286px;
	height: 42px;
	margin: 0 auto;
	text-shadow: 
		rgb(105, 109, 218) 2px 0px, rgb(105, 109, 218) -2px 0px,
		rgb(105, 109, 218) 0px -2px, rgb(105, 109, 218) -2px 0px,
		rgb(105, 109, 218) 2px 2px, rgb(105, 109, 218) -2px 2px,
		rgb(105, 109, 218) 2px -2px, rgb(105, 109, 218) -2px -2px,
		rgb(105, 109, 218) 1px 2px, rgb(105, 109, 218) -1px 2px,
		rgb(105, 109, 218) 1px -2px, rgb(105, 109, 218) -1px -2px,
		rgb(105, 109, 218) 2px 1px, rgb(105, 109, 218) -2px 1px,
		rgb(105, 109, 218) 2px -1px, rgb(105, 109, 218) -2px -1px;
	/*rgb(113, 129, 241)*/
}
#now span{
	font-size: 80%;
}


/* ===== アンケート ベース ===== */
#enqueteWrap{
	background: #FFF;
	width: 728px;
	margin: 10px auto;
	padding-top: 10px;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
}

.enquete{
	width: 640px;
    margin: 0 auto;
    text-align: left;
}
.enquete p{
	line-height:195%;
}
#enqBgBottom{
	margin-bottom: 10px;
}


/* ====== アンケート設問タイトル ===== */
#enqueteTitle{
	font-family: serif,"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 15px;
	letter-spacing: 1px;
	width: 685px;/* pakkun */
	margin-top:15px;/* pakkun */
}
#enqueteTitle span{
	font-family: 'Crimson Text', serif;
	font-size: 21px;
	color: #609EE4;
}


/* ===== アンケート選択肢 ===== */
#selectArea{
	padding: 10px;
	margin-top: 10px;
}
#enqueteUl{
	margin: 5px 0 0 0;
	font-size: 14px;/* pakkun */
}
#enqueteUl li{
	margin-bottom: 10px;/* pakkun */
	text-shadow: 2px 2px 1px #FFF,
				-2px 2px 1px #FFF,
				2px -2px 1px #FFF,
				-2px -2px 1px #FFF;
}	


/*ラジオボタン*/
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: rgb(113, 129, 241);
	margin-left: 1em;
	-webkit-transform: scale(2);
	transform: scale(2);
}
input[type="radio"]:checked + label::before {
	background: #fff;
	border: 1px solid rgb(113, 129, 241);
}
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;
}
.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: rgb(113, 129, 241);
	-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 #060d5d;
}


/* ===== コラム_戻る進むボタン ===== */
.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;
	text-align: center;
	padding-bottom: 15px;
	margin-top: 10px;
}
#mention p{
	font-size: 26px;
	font-weight: bold;
}


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

/* 記事セレクト*/
.enquete-list {
	width: 768px;
	margin: 0 auto;
}
.enquete-list .table {
	border-top: dotted 1px #b3b3b3;
	border-bottom: dotted 1px #b3b3b3;
	width: 100%;
}
.enquete-list .table tr {
	vertical-align: top;
	font-size:14px;
}
.enquete-list .table.odd tbody tr:nth-child(odd) {
	background: #fff;
}
.enquete-list .table th,.enquete-list .table td {
	border-left:  dotted 1px #b3b3b3;
	
	/*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: #79a8ef;
	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: #737373;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	font-weight: bold;
	background-color: #c5c5c5;
}
.select_attend{
	padding: 15px 0;
	color:#79a8ef;
	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;
}

/* ======================================================
	FOOTER
====================================================== */
/*注意事項*/
footer{
	font-size:0.9em;
	line-height: 190%;
	margin-top: 10px;
	padding-bottom: 10px;
	-webkit-border-radius: 10px;
	        border-radius: 10px;
}
footer img{
}
footer div{
	padding-top: 10px;
	padding-left: 20px;
}

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 0 0;
	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;*/
}


/* ================= アニメーション ================= */

/* ボタンの表示を遅くする */
.next_bt,
.enq_back_next{
	display:block;
	margin: 10px auto 0 auto;
}
.enq_back_next{
	margin-top: 10px;
}

/* quizページ */
.next_bt.quiz{
}
/* pointページ */
.next_bt.point{
}

/* キーフレーム */

/* 横並びボタン */


/* ======================================================
	広告
====================================================== */
/* 468 */
#ad1,#ad6,#ad10{
	width:468px;
	height:60px;
	margin: 0 auto;
}
/* 300 */
#ad2,#ad3,#ad7,#ad8,#ad11{
	float:left;
	width: 300px;
	height:250px;
}
#ad2,#ad7{
	margin-right: 20px;
}
#ad14{
	width: 300px;
	height: 250px;
	margin: 0 auto 10px auto;
}

/* 728 */
#ad4,#ad5,#ad9,#ad13{
	width:728px;
	height:90px;
	margin: 0 auto 5px auto;
}

#brand_panel{
	width: 620px;
	margin: 5px auto 10px auto;
}
#brand_panel:after{
	content: "";
	display: block;
	clear: both;
}
.brand_panel{
	width: 620px;
	height: 250px;
	margin: 5px auto;
}
.brand_panel:after{
	content: "";
	display: block;
	clear: both;
}


/*追加広告*/
#pr_ad{
	width:728px;
	text-align:center;
	margin-top:30px;
}
#pr_ad_text{
	width: 728px;
	text-align: center;
	color: #666;
	font-weight: bold;
	font-size: 16px;
}


/*追加広告*----------------------/	


/* 選択色非表示 */
html {
    -webkit-user-select: none;
    user-select: none;
}



#img1{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}
#img2{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	opacity:0;
}
#start{
	position:absolute;
	top:0;
	left:0;
	z-index:4;
	background-color:#000;
	height:400px;
	width:600px;
	opacity:0.5;
	line-height: 400px;
	text-align: center;
	font-size: 3em;
	color:#fff;
	cursor:pointer;
}
#black{
	position:absolute;
	top:0;
	left:0;
	z-index:3;
	background-color:#000;
	height:400px;
	width:600px;
	display:none;
}
#reset{
	display:none;
	margin-top:30px;
}
/*#wrap{
	width:600px;
	margin: 0 auto;
	text-align: center;
}*/