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

/*===========================================================================================

	Base
	
============================================================================================*/

body{
	color:#333;
	font-family:ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	font-size:12px;
	line-height:1.5;
	/* フォントサイズ自動調整 */
	-webkit-text-size-adjust:none;
}

a{ -webkit-tap-highlight-color: rgba(100,100,100,0.6); }
/*a {-webkit-tap-highlight-color:rgba(200,200,555,.6);}*/
a:link{text-decoration:none;}
a:visited{text-decoration:none;}


/*===========================================================================================

	fontColor
	
============================================================================================*/

span.f_cRed{
	color:#F06;
	font-weight:bold;
}


/*===========================================================================================

	margin
	
============================================================================================*/


.mgT05{margin-top:5px !important;}
.mgB00{margin-bottom:0 !important;}
.mgB10{margin-bottom:10px !important;}
.mgB20{margin-bottom:20px !important;}
.mgB30{margin-bottom:30px !important;}
.mgB40{margin-bottom:40px !important;}


/*===========================================================================================

	wrapper
		
============================================================================================*/

div#wrapper{
	background:url(/img/sp/backImg03.gif);
}


/*===========================================================================================

	article
		
============================================================================================*/

article h1{
	border-top:1px solid #999;
	width:100%;
	margin-bottom:-5px;
}

article h1#breadcrumbList{
	width:100%;
	padding:5px 22px;
	margin-bottom:5px;
	background:url(/img/sp/footerIcon.png) no-repeat , -moz-linear-gradient(top,  #fafafa 0%, #c8c8c8 100%);
	background:url(/img/sp/footerIcon.png) no-repeat , -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#c8c8c8)); 
	background:url(/img/sp/footerIcon.png) no-repeat , -webkit-linear-gradient(top,  #fafafa 0%,#c8c8c8 100%);
	background-position:5px 48%;
	box-shadow:1px 1px 1px #999999;
	-moz-box-shadow:1px 1px 1px #999999;
	-webkit-box-shadow:1px 1px 1px #999999;
	text-shadow:1px 1px 1px #fff;
	-moz-text-shadow:1px 1px 1px #fff;
	-webkit-text-shadow:1px 1px 1px #fff;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}


/*===========================================================================================

	section
		
============================================================================================*/

section{
	padding:0 10px;
}

section h2{
	text-align:center;
	font-size:16px;
	letter-spacing:0.02em;
	padding:6px;
	background: url(/img/sp/titleBanner02.png) no-repeat;
	background-size:cover;
	text-shadow:1px 1px 1px #fff;
	-moz-text-shadow:1px 1px 1px #fff;
	-webkit-text-shadow:1px 1px 1px #fff;
	border-radius:5px;
	border:1px solid #FFF;
	margin-bottom:10px;
	box-shadow:2px 2px 2px rgba(0,0,0,.3);
	-webkit-box-shadow:2px 2px 2px rgba(0,0,0,.3);
	-moz-box-shadow:2px 2px 2px rgba(0,0,0,.3);
	-ms-box-shadow:2px 2px 2px rgba(0,0,0,.3);
	box-sizing:border-box;
}

section h3{
	font-size:14px;
	line-height:1.25em;
	color:#FF66CC;
	padding-bottom:5px;
	margin-bottom:5px;
	border-bottom:1px dotted #666;
}

/*-----------------------------
	backImageArea_A
-----------------------------*/
div#backImageArea_A{
	padding:10px 0;
}

/*-----------------------------
	backImageArea_B
-----------------------------*/

div#backImageArea_B{
	margin:0 -10px;
	padding:10px 0;
	background:url(/img/sp/backImg01.gif);
}

/*-----------------------------
	backImageArea_C
-----------------------------*/
div#backImageArea_C{
	margin:0 -10px;
	padding:10px 0;
	background:url(/img/sp/backImg02.gif);
}


/*===========================================================================================

	contentsListArea
		
============================================================================================*/

div#contentsListArea{
	width:95%;
	margin:0 auto;
	overflow:hidden;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border:1px solid #CCC;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-shadow:1px 1px 1px #999999;
	-webkit-box-shadow:1px 1px 1px #999999;
	-moz-box-shadow:1px 1px 1px #999999;
}

ul.contentsList{
	width:100%;
}

ul.contentsList li{
	height:80px;
	border-top:1px solid #CCC;
	position:relative;
	background:gradient(linear, left top, left bottom, from(#ffffff), to(#f7f8f8));
	background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f8f8));
	background:-moz-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f8f8));
}

ul.contentsList li a{
	padding-top:10px;
	display:block;
	width:100%;
	height:80px;
	/*
	background-image:url(/img/sp/icon01.png);
	background-position: 97% center;
	background-repeat:no-repeat;
	*/
}

ul.contentsList li a .faceImg{
	border:1px solid #F6C;
	overflow:hidden;
	position:absolute;
	top:10px;
	left:10px;
	width:60px;
	height:60px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	box-shadow:1px 1px 1px #999999;
	-moz-box-shadow:1px 1px 1px #999999;
	-webkit-box-shadow:1px 1px 1px #999999;
}

ul.contentsList li a p.listTitle{
	font-size:15px;
	text-decoration:underline;
	padding-left:16px;
	font-weight:bold;
	margin-left:80px;
	width:70%;
	color:#F3C;
	background-image:url(/img/sp/navImg_B.png);
	background-repeat:no-repeat;
	background-position:0 50%;
}

ul.contentsList li a p.listText{
	margin-left:80px;
	width:40%;
}

div.contentsListIcon{
	position:absolute;
	right:5px;
	bottom:10px;
	font-size:9px;
	padding:3px;
	background:#0C9;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow:1px 1px 1px #999999;
	-moz-box-shadow:1px 1px 1px #999999;
	-webkit-box-shadow:1px 1px 1px #999999;
	border:1px #ff699f solid;
	color:#FFF;
	background:-moz-linear-gradient(top,  #ffaf84 0%, #ff68a0 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff68a0), color-stop(100%,#ffaf84)); 
	background:-webkit-linear-gradient(top,  #ffaf84 0%,#ff68a0 100%);
}



/*===========================================================================================

	footerSabMenu
		
============================================================================================*/

ul.footerSabMenu{
	display:table;
    table-layout:fixed;
    width:100%;
}

ul.footerSabMenu li{
	display:table-cell;
    vertical-align:middle;
    text-align:center;
}

ul.footerSabMenu li a{
	width:90px;
	height:90px;
}


/*===========================================================================================

	下層ページ
		
============================================================================================*/


/*===========================================================================================

	workCommentArea
		
============================================================================================*/

div.workCommentArea{
	padding:15px;
	background:#fff;
	border:2px solid #CCC;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow:2px 2px 2px #999;
	position:relative;
}

div.workCommentInner{
	overflow:hidden;
	width:100%;
}

p img.workCommentImg{
	float:right;
	overflow:hidden;
	margin-left:10px;
	border:2px solid #F6C;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}


div.img01{
	position:absolute;
	z-index:1;
	width:50px;
	height:50px;
	bottom:-35px;
	left:50%;
	margin-left:-25px;
}


/*===========================================================================================

	imageArea(画像)
		
============================================================================================*/

div.imageArea{
	background:#666;
	border:2px solid #F6C;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	overflow:hidden;
}


/*===========================================================================================

	acMenuArea
		
============================================================================================*/

#acMenuArea{
	border-radius:10px;
	overflow:hidden;
	border:1px solid #CCC;
}

#acMenuArea dt{
	padding:15px;
	font-size:14px;
    display:block;
    cursor:pointer;
	font-weight:bold;
	background:-moz-linear-gradient(top,  #f9eef3 0%, #f8d1d8 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9eef3), color-stop(100%,#f8d1d8)); 
	background:-webkit-linear-gradient(top,  #f9eef3 0%,#f8d1d8 100%);
	background-position:10px center;
	border-bottom:1px solid #CCC;
}

#acMenuArea dd{
	padding:10px;
	background:#FFFFFF;
    display:none;
}


/*===========================================================================================

	rewardArea(報酬関連)
		
============================================================================================*/

div.frameArea{
	padding:10px;
	background:#fff;
	border:2px solid #ede0b8;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	position:relative;
}

div.frameAreaIcon{
	position:absolute;
	z-index:1;
	top:-20px;
	width:36px;
	height:26px;
}

/*-----------------------------
	テキストリスト
-----------------------------*/
div.frameArea ul.listType_A li{
	padding:5px 0;
	padding-left:12px;
	border-bottom:1px dotted #006633;
	background: url(/img/sp/iconImg01.png) no-repeat;
	background-position:left
}

div.frameArea ul.listType_A li:nth-last-child(1){
	border-bottom:0;
}

/*-----------------------------
	画像リスト
-----------------------------*/
dl.imageList{
	border-bottom:1px dotted #CCC;
	margin-bottom:10px;
	padding-bottom:10px;
	overflow:hidden;
}

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

dl.imageList dt{
	width:150px;
	border:1px solid #000;
	float:left;
}

dl.imageList dd{
	word-spacing:inherit;
	padding-left:160px;
}


/*===========================================================================================

	bannerImgArea
		
============================================================================================*/

div.bannerImgArea{
	margin-bottom:5px;
}

div.sabTitleImg{
	margin-bottom:-10px;
	z-index:1;
}


/*===========================================================================================

	explanationList
		
============================================================================================*/

.formArea_a input,textarea{
	width:100%;
	padding:10px;
	font-size:16px;
	font-weight:normal;
	background:#FFFFCC;
	border:1px solid #999;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-appearance:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
}

/*
textarea:focus,
textarea:hover {
	height:10em;
}
*/

.formArea_a input[type=checkbox]{
	visibility:hidden;
}

label{
	border-left:3px solid #096;
	padding-left:10px;
}

.formStyle_B .labelReset{
	border-left:0;
	padding-left:0;
}


/*===========================================================================================

	フォームのスタイル
		
============================================================================================*/

.formStyle_A,
.formStyle_B{
	font-weight:bold;
	text-align:left;
    margin:0 auto 10px auto;
    background:#FFFFFF;
    font-size:16px;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-appearance:none;
}

.formStyle_B{
	padding:10px;
    min-height:42px;
	-webkit-box-align:center;
	-moz-box-align:center;
	box-align:center;
	border:1px solid #999;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
}

/*-----------------------------
	フォームa
-----------------------------*/
.formArea_a{}
.formArea_a dt{margin-bottom:5px;}
dd.mailTextAria{
	width:100%;
	font-weight:bold;
	padding:10px;
	font-size:14px;
	font-weight:normal;
	background:#FFFFCC;
	border:1px solid #999;
	box-sizing:border-box;
    -webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-webkit-appearance:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

/*-----------------------------
	フォームb
-----------------------------*/
.formArea_b{width:100%;margin-top:5px;}
.formArea_b td{vertical-align:middle;}


/*-----------------------------
	フォームc
-----------------------------*/
.formArea_c{}
.formArea_c dt{}
.formArea_c dd{
	display:inline-block;
}


/*-----------------------------
	画像参照
-----------------------------*/
div.file{
	text-align:center;
	display: inline-block;
	overflow: hidden;
	position: relative;
	padding: .5em;
	border: 1px solid #999;
	background-color: #eee;
}

div.file input[type="file"]{
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	font-size: 100px;
	cursor: pointer;
}


/*===========================================================================================

	チェックボタンボタン(同意ボタン)
		
============================================================================================*/

.mod_form_importance_btn input{
	display:none;
}

.mod_form_importance_btn label{
	width:120px;
	margin:0 auto;
	padding: 15px 15px;
	display:block;
	border: solid 1px #aaa;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	background-image: -moz-linear-gradient(top, #F6F6F6, #ccc);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#ccc));
	box-shadow: 2px 2px 6px #ddd;
	-moz-box-shadow: 2px 2px 6px #ddd;
	-webkit-box-shadow: 2px 2px 6px #ddd;
	text-shadow: 1px 1px 0px #fff;
}

.mod_form_importance_btn label.checked{
	color: #fff;
	background: #C3C3C3;
	background-image: -moz-linear-gradient(top, #C3C3C3, #DBDBDB);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#C3C3C3), to(#DBDBDB));
	text-shadow: 0px 0px 0px #fff;
}


/*===========================================================================================

	ラジオボタン(テレフォンレディのご経験)
		
============================================================================================*/


ul.radioBoxList {
	margin-top:2px;
	width:100%;
	text-align:center;
}

ul.radioBoxList::after{
	content:'';
	display:block;
	clear:both;
}

ul.radioBoxList input {
	display: none;
}

ul.radioBoxList label {
	display:block;
	cursor: pointer;
	padding: 5px 10px;
	float: left;
	border: solid 1px #aaa;
	margin-left: -1px;
	background: #eee;
	background-image: -moz-linear-gradient(top, #F6F6F6, #ccc);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#ccc));
	-moz-box-shadow: 2px 2px 6px #ddd;
	-webkit-box-shadow: 2px 2px 6px #ddd;
	text-shadow: 1px 1px 0px #fff;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

ul.radioBoxList li:first-child label {
	width:50%;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-bottomleft: 7px;
	
}

ul.radioBoxList li:last-child label {
	width:50%;
	-webkit-border-top-right-radius: 7px;
	-webkit-border-bottom-right-radius: 7px;
	-moz-border-radius-topright: 7px;
	-moz-border-radius-bottomright: 7px;

}

ul.radioBoxList input:checked+label {
	/*
	color: #fff;
	background: #C3C3C3;
	background-image: -moz-linear-gradient(top, #C3C3C3, #DBDBDB);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#C3C3C3), to(#DBDBDB));
	text-shadow: 0px 0px 0px #fff;
	*/
	
}


ul.radioBoxList li {
	/*position: relative;*/
}
	
ul.radioBoxList input {
	/*position: absolute;*/
	/*left: 0px;*/
	outline:none;
}

.on{
	background:#093;
	background-image: -moz-linear-gradient(top, #C3C3C3, #DBDBDB) !important;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#C3C3C3), to(#DBDBDB)) !important;
	text-shadow: 0px 0px 0px #fff;
}

p.errorText{
	color:#F00;
	font-size:12px;
}



/*===========================================================================================

	テーブル
		
============================================================================================*/

.coder {
	text-align:left;
	width:100%;
    border: 1px solid #CCC;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
         -o-border-radius: 6px;
            border-radius: 6px;
    box-shadow: 0 1px 1px #CCC;
}

.coder caption{
	margin-bottom:5px;
	padding:10px 0 10px 10px;
	text-align:left;
	color:#FFFFFF;
	background:gradient(linear, left top, left bottom, from(#ceb1a2), to(#b49273));
	background:-webkit-gradient(linear, left top, left bottom, from(#ceb1a2), to(#b49273));
	background:-moz-gradient(linear, left top, left bottom, from(#ceb1a2), to(#b49273));
	background:-ms-gradient(linear, left top, left bottom, from(#ceb1a2), to(#b49273));
	background:-o-gradient(linear, left top, left bottom, from(#ceb1a2), to(#b49273));
	
	-webkit-border-radius:5px 5px 5px 5px;
	-moz-border-radius:5px 5px 5px 5px;
	-o-border-radius:5px 5px 5px 5px;
	
	-webkit-box-shadow: 2px 2px 2px #CCC;
	-moz-box-shadow: 2px 2px 2px #CCC;
	-o-box-shadow: 2px 2px 2px #CCC;
}

.coder th,
.coder td {
    padding:12px;
    background:#FFF;
    border-bottom:solid 1px #CCC;
    border-right:solid 1px #CCC;
}

.coder th {
	width:40%;
    background:#e3dcd5;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    color:#69655c;
}

.coder td a{
	text-decoration:underline;
}


.coder.mgB15 tr td span{
	font-size:18px;
	font-weight:bold;
	color:#FF0000;
	position:relative;
	top:-5px;
}

/* ----------------------------------------------
  左上角丸　最初の行の最初のセル
---------------------------------------------- */
.coder tr:first-child th:first-child,
.coder tr:first-child td:first-child {
    -webkit-border-radius: 6px 0 0 0;
       -moz-border-radius: 6px 0 0 0;
         -o-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
}

/* ----------------------------------------------
  右上角丸　最初の行の最後のセル
---------------------------------------------- */
.coder tr:first-child th:last-child,
.coder tr:first-child td:last-child {
    -webkit-border-radius: 0 6px 0 0;
       -moz-border-radius: 0 6px 0 0;
         -o-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
}

/* ----------------------------------------------
  左下角丸　最後の行の最初のセル
---------------------------------------------- */
.coder tr:last-child th:first-child,
.coder tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 6px;
       -moz-border-radius: 0 0 0 6px;
         -o-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
}

/* ----------------------------------------------
  右下角丸　最後の行の最後のセル
---------------------------------------------- */
.coder tr:last-child th:last-child,
.coder tr:last-child td:last-child {
    -webkit-border-radius: 0 0 6px 0;
       -moz-border-radius: 0 0 6px 0;
         -o-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
}

/* ----------------------------------------------
  thaed,tbodyを使う場合の設定
---------------------------------------------- */
.coder thead th {background:#e3dcd5;}
.coder thead+tbody th {background:#f4ede6;}
.coder tbody th {text-align:left;}/*IE*/

/* ----------------------------------------------
  左上角丸 thead内　最初の行の最初のセル
---------------------------------------------- */
.coder thead tr:first-child th:first-child,
.coder thead tr:first-child td:first-child {
    -webkit-border-radius: 6px 0 0 0;
       -moz-border-radius: 6px 0 0 0;
         -o-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
}

/* ----------------------------------------------
  右上角丸 thead内　最初の行の最後のセル
---------------------------------------------- */
.coder thead tr:first-child th:last-child,
.coder thead tr:first-child td:last-child {
    -webkit-border-radius: 0 6px 0 0;
       -moz-border-radius: 0 6px 0 0;
         -o-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
}

/* ----------------------------------------------
  角丸なし　thaedの後のtbody 最初の行の最初のセル
  角丸なし　thaedの後のtbody 最初の行の最後のセル
----------------------- */
.coder thead+tbody tr:first-child th:first-child,
.coder thead+tbody tr:first-child td:first-child,
.coder thead+tbody tr:first-child th:last-child,
.coder thead+tbody tr:first-child td:last-child {
    -webkit-border-radius:0px;
       -moz-border-radius:0px;
         -o-border-radius:0px;
            border-radius:0px;
}

/* ----------------------------------------------
  左下角丸　thaedの後のtbody 最後の行の最初のセル
----------------------- */
.coder thead+tbody tr:last-child th:first-child,
.coder thead+tbody tr:last-child td:first-child {
    -webkit-border-radius: 0 0 0 6px;
       -moz-border-radius: 0 0 0 6px;
         -o-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
}

/* ----------------------------------------------
  右下角丸　thaedの後のtbody 最後の行の最後のセル
----------------------- */
.coder thead+tbody tr:last-child th:last-child,
.coder thead+tbody tr:last-child td:last-child {
    -webkit-border-radius: 0 0 6px 0;
       -moz-border-radius: 0 0 6px 0;
         -o-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
}      





/*===========================================================================================

	文字
		
============================================================================================*/

p.importantText{
	font-weight:bold;
	line-height:1.5em;
	text-align:center;
	font-size:16px;
}

p.centerText{
	margin-bottom:5px;
	text-align:center;
	color:#FFFFFF;
	padding:5px 0;
	border:1px solid #FFF;
	font-size:16px;
	font-weight:bold;
	background: -moz-linear-gradient(left,  #ffaaac 0%, #ffaf84 25%, #ff67a6 75%, #ffaf84 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffaf84), color-stop(25%,#ff67a6), color-stop(75%,#ff67a6), color-stop(100%,#ffaf84)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #ffaf84 0%,#ff67a6 25%,#ff67a6 75%,#ffaf84 100%); /* Chrome10+,Safari5.1+ */
	text-shadow:1px 1px 1px #666666;
	-moz-text-shadow:1px 1px 1px #666666;
	-webkit-text-shadow:1px 1px 1px #666666;
	border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	box-shadow:0 0 5px #999999;
	-moz-box-shadow:0 0 5px #999999;
	-webkit-box-shadow:0 0 5px #999999;
}