@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;
	background:#4e382c;
	/* フォントサイズ自動調整 */
	-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;}

p{
	font-size:12px;
	line-height:1.5em;
	background:#FFF;
	margin-bottom:10px;
}


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

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

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


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

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

.mgB00{margin-bottom:0 !important;}
.mgB10{margin-bottom:10px !important;}


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

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

div#wrapper{
	background:url(/img/sp/back.png);
	background-size:20px 20px;
}


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

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

div.headerImgArea{
	width:100%;
	margin-bottom:10px;
	box-shadow:0px 2px 2px rgba(0,0,0,.3);
	border-bottom:2px solid #4e382c;
	background-color:#A16B33;
}


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

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

article{}

article h1{
	padding:3px 10px 3px 20px;
	border-top:1px solid #00a73c;
	border-bottom:1px solid #00a73c;
	-webkit-box-shadow:0 0 5px 0 #540900;
	-moz-box-shadow:0 0 5px 0 #540900;
	background:url(/img/sp/iconImg03.png) no-repeat , -moz-linear-gradient(top,  #daf74b 0%, #81c158 100%);
	background:url(/img/sp/iconImg03.png) no-repeat , -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daf74b), color-stop(100%,#81c158)); 
	background:url(/img/sp/iconImg03.png) no-repeat , -webkit-linear-gradient(top,  #daf74b 0%,#81c158 100%);
	background-size:12px 12px , 100% 100%;
	background-position:5px center;
	box-shadow:0px 1px 2px #000000;
	-webkit-box-shadow:0px 1px 2px #000000;
	-moz-box-shadow:0px 1px 2px #000000;
	-ms-box-shadow:0px 1px 2px #000000;
	margin-bottom:10px;
}


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

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

section{
	padding:0 10px 15px 10px;
}

section h1{
	font-size:16px;
	letter-spacing:0.02em;
	padding:6px 30px;
	background: url(/img/sp/sabBanner.png) no-repeat;
	background-size:cover;
	border-radius:5px;
	border:1px solid #FFF;
	margin-top: 8px;
	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 h2{
	font-size:12px;
	font-weight: bold;
	text-align: left!important;
	padding:5px;
	background:#FCC;
	letter-spacing:0.1em;
	text-align:center;
	margin-bottom:10px;
	border-radius:5px;
	border:1px solid #FFF;
	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);
}


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

	frameArea
		
============================================================================================*/

div.frameArea{
	overflow:hidden;
	padding:10px;
	border:2px solid #ede0b8;
	border-radius:10px;
	background:#fff;
	max-width: 600px;
	margin: 10px auto 0;
}


/*テキストリスト*/
div.frameArea ul{
	margin-bottom:15px;
}

div.frameArea 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 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;
}


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

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

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

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

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


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

	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;
}


/*---------------------------------------------------------------------------------------------

	チェックボタンボタン
	
---------------------------------------------------------------------------------------------*/

.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;
}


/*---------------------------------------------------------------------------------------------

   テーブル
   
---------------------------------------------------------------------------------------------*/

.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;
	margin-bottom:10px;
}

.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;
}      



/******************************

 ソーシャルエリア全体を囲む要素
 * 他のコンテンツと距離を取りたい場合は[margin]を設定して下さい

******************************/
.social-area-syncer {
	height:100px;
	/*background: #F5F1E9 ;	 背景色 */
	padding: 1em 0 ;
	margin-bottom:-45px;
	margin-top:-15px;
}

/******************************

 [ul]要素

******************************/
/* スマホ */
ul.social-button-syncer {
	width: 300px ;
	margin: 12px auto ;
	padding: 0 ;
	border: none ;
	list-style-type: none ;
}

/******************************

 [li]要素

******************************/
ul.social-button-syncer li {
	display:inline-block;
	text-align: center ;
	height: 71px ;
	margin: 0 5px ;
	padding:0 ;
}


/******************************

 各種ボタン

******************************/
/* [Twitter] */


/* [Facebook] */
.sc-fb {
	z-index: 99 ;
	width: 69px ;
}