/* ===================================================================
	file name: top.css
	author: fujii
	info: 総合トップ用css
=================================================================== */

/* Contents
----------------------------------------

top              /*総合トップページ

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

/* =========================================================
 * 汎用・共通
========================================================= */

/* ---------------------------------------------
	*01.riset            /*リセット
--------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

ul,
nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

img {
  vertical-align:bottom;
}


/* ---------------------------------------------
	*02.common           /*初期設定・共通設定
--------------------------------------------- */

/*---------- 初期設定 ----------*/

body {
	width:100%; /*はみ出し対策*/
	height:100%;
  font: 14px/1.231 'ヒラギノ角ゴ pro W3', "Hiragino KaKu Gothic Pro", Osaka, sans-serif;
  line-height: 1.4;
	-webkit-text-size-adjust : none; /*横向きにしたときに文字が大きくならないように*/
	background: #fff;
}

a {color: #43bae6; outline:none; text-decoration: underline; -webkit-tap-highlight-color: rgba(38,38,38,0.1); }
a:link{color: #43bae6; text-decoration: underline;}
a:visited{color:#43bae6 ; text-decoration: underline;}
a:hover{color: #43bae6; text-decoration:underline;}
a:active{color: #43bae6;text-decoration:underline;}

/*---------- フォントカラー ----------*/

.red { color: #F00; }


/*---------- wrapper・content ----------*/


div#wrapper{
  margin:0 auto;
  padding: 1px 0 0 0;
}

div#wrapper{
	//	width:640px; /*IE用*/
}
@media screen and (max-width: 800px){
  div#wrapper{
    width:100%;
  }
}
@media screen and (min-width: 801px){
  div#wrapper{
    width:320px;
  }
}

#content {
  padding: 0 0 15px;
}
/*---------- ヘッダー ----------*/

#header {
  overflow: hidden;
  z-index: 100;
}

#header h1 {
  font-size: 10px;
  font-weight: normal;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 3px;
  text-align: center;
  background-color: #EE7A00;
  color: #fff;
}
#header #copyTxt {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
}
#header #copyTxt .font01 {
	color: #ef7a00;
	font-size: 16px;
}
#header #copyTxt .font02 {
	font-size: 16px;
}
#header #logoChara {
	position: absolute;
	top: 50%;
	left: 3%;
}
#header #logo {
  text-align:center;

}



#header h1 img {
  width: 195px;
}

/*---------- フッター ----------*/

.footNavBar {
  border-top: 1px solid #ebeaea;
  border-bottom: 1px solid #ebeaea;
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(top,  #ffffff 0%, #f6f5f5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f6f5f5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f5f5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f6f5f5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f6f5f5 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#f6f5f5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f5f5',GradientType=0 ); /* IE6-9 */
  overflow: hidden;
  margin: 0 0 10px;
}

.footNavBar a{
  color: #444444;
  text-decoration: none;
  display: block;
  padding: 10px 10px;
  font-size: 10px;
}

.footNavBar .home a {
  float: left;
  border-right: 1px solid #d4d3d3;
  background: url(../images/top/cmn_icon_foot_home.png) no-repeat 10% 50%;
  -webkit-background-size: 13px auto;
  -moz-background-size: 13px auto;
  background-size: 13px auto;
  padding-left: 25px;
}

footer .pagetop a {
  float: right;
  border-left: 1px solid #d4d3d3;
  font-size: 10px;
  background: url(../images/top/cmn_icon_foot_pagetop.png) no-repeat 10% 50%;
  -webkit-background-size: 13px auto;
  -moz-background-size: 13px auto;
  background-size: 13px auto;
  padding-left: 25px;
}


#globalFooter nav {
  padding: 0 10px;
}

#globalFooter nav ul {
  text-align: center;
  margin: 0 0 5px;
}

#globalFooter nav li {
  display: inline-block;
  margin: 0 0 7px;
}

#globalFooter nav a{
  color: #444444;
  text-decoration: none;
  font-size: 11px;
  border-right: 1px solid #444;
  padding: 0 10px 0 0;
  margin: 0 5px 0 0;
}

#globalFooter nav+a{
	text-decoration:none;
	margin:0 20px 0;
	display:block;
}

#globalFooter h4{
	text-align:center;
	color:#FF8200;
  background: -moz-linear-gradient(top,  #ffffff 0%, #f6f5f5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f6f5f5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f5f5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f6f5f5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f6f5f5 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#f6f5f5 100%); /* W3C */
	border:#ccc 1px solid;
	padding:10px 5px;
}


#globalFooter #copyright {
  font-size: 10px;
  margin: 10px 0;
  text-align: center;
  color:#444;
}

#globalFooter .bn{
	text-align: center;
}
/* ---------------------------------------------
	*03.style            /*汎用スタイル
--------------------------------------------- */
/* =========================================================
 * float/display  /*フロート
========================================================= */

.flotL    { display: inline; float: left; }
.flotR    { display: inline; float: right; }

/* =========================================================
 * clearfix　　   /*クリアフィックス
========================================================= */

.clearfix:after {
  display: block;
  content: "." ;
	visibility: hidden;
	height: 0;
  line-height: 0;
	clear: both;
	font-size: 0;
}

/* IE */
* html div.clearfix {height: 1%;}
*:first-child+html div.clearfix {height: 1%;}

.clear { clear: both; }

/*---------- 汎用スタイル ----------*/
.ma00 { margin:  0   !important;}
.ma05 { margin:  5px !important;}
.ma10 { margin: 10px !important;}
.ma12 { margin: 12px !important;}
.ma15 { margin: 15px !important;}
.ma20 { margin: 20px !important;}


.mt05 { margin-top: 05px !important;}
.mt10 { margin-top: 10px !important;}
.mt15 { margin-top: 15px !important;}
.mt20 { margin-top: 20px !important;}
.mt25 { margin-top: 25px !important;}
.mt30 { margin-top: 30px !important;}
.mt35 { margin-top: 35px !important;}
.mt40 { margin-top: 40px !important;}
.mt45 { margin-top: 45px !important;}
.mt50 { margin-top: 50px !important;}

.mr00 { margin-right:  0   !important;}
.mr05 { margin-right:  5px !important;}
.mr10 { margin-right: 10px !important;}
.mr12 { margin-right: 12px !important;}
.mr15 { margin-right: 15px !important;}
.mr20 { margin-right: 20px !important;}
.mr25 { margin-right: 25px !important;}
.mr30 { margin-right: 30px !important;}
.mr35 { margin-right: 35px !important;}
.mr40 { margin-right: 40px !important;}
.mr45 { margin-right: 45px !important;}
.mr50 { margin-right: 50px !important;}

.mb00 { margin-bottom:  0   !important;}
.mb05 { margin-bottom:  5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb12 { margin-bottom: 12px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb35 { margin-bottom: 35px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb45 { margin-bottom: 45px !important;}
.mb50 { margin-bottom: 50px !important;}

.ml00 { margin-left:  0   !important;}
.ml05 { margin-left:  5px !important;}
.ml10 { margin-left: 10px !important;}
.ml12 { margin-left: 12px !important;}
.ml15 { margin-left: 15px !important;}
.ml20 { margin-left: 20px !important;}
.ml25 { margin-left: 25px !important;}
.ml30 { margin-left: 30px !important;}
.ml30 { margin-left: 35px !important;}
.ml40 { margin-left: 40px !important;}
.ml45 { margin-left: 45px !important;}
.ml50 { margin-left: 50px !important;}

.pt00 { padding-top:  0   !important;}
.pt05 { padding-top:  5px !important;}
.pt10 { padding-top: 10px !important;}
.pt12 { padding-top: 12px !important;}
.pt15 { padding-top: 15px !important;}
.pt20 { padding-top: 20px !important;}
.pt25 { padding-top: 25px !important;}
.pt30 { padding-top: 30px !important;}
.pt35 { padding-top: 35px !important;}
.pt40 { padding-top: 40px !important;}
.pt45 { padding-top: 45px !important;}
.pt50 { padding-top: 50px !important;}

.pr00 { padding-right:  0   !important;}
.pr05 { padding-right:  5px !important;}
.pr10 { padding-right: 10px !important;}
.pr12 { padding-right: 12px !important;}
.pr15 { padding-right: 15px !important;}
.pr20 { padding-right: 20px !important;}
.pr25 { padding-right: 25px !important;}
.pr30 { padding-right: 30px !important;}
.pr35 { padding-right: 35px !important;}
.pr40 { padding-right: 40px !important;}
.pr45 { padding-right: 45px !important;}
.pr50 { padding-right: 50px !important;}

.pb00 { padding-bottom:  0   !important;}
.pb05 { padding-bottom:  5px !important;}
.pb10 { padding-bottom: 10px !important;}
.pb12 { padding-bottom: 12px !important;}
.pb15 { padding-bottom: 15px !important;}
.pb20 { padding-bottom: 20px !important;}
.pb25 { padding-bottom: 25px !important;}
.pb30 { padding-bottom: 30px !important;}
.pb35 { padding-bottom: 35px !important;}
.pb40 { padding-bottom: 40px !important;}
.pb45 { padding-bottom: 45px !important;}
.pb50 { padding-bottom: 50px !important;}

.pl00 { padding-left:  0   !important;}
.pl05 { padding-left:  5px !important;}
.pl10 { padding-left: 10px !important;}
.pl12 { padding-left: 12px !important;}
.pl15 { padding-left: 15px !important;}
.pl20 { padding-left: 20px !important;}
.pl25 { padding-left: 25px !important;}
.pl30 { padding-left: 30px !important;}
.pl30 { padding-left: 35px !important;}
.pl40 { padding-left: 40px !important;}
.pl45 { padding-left: 45px !important;}
.pl50 { padding-left: 50px !important;}

.imgR {
	float: right;
	margin: 0 0 10px 10px;
	display: inline;
}

.imgL {
	float: left;
	margin: 0 10px 10px 0;
	display: inline;
}









/*********************
 pickup
**********************/

#pickup dl {
	margin-bottom: 20px;
}

#pickup div {
	border-bottom: 1px solid #b8b8b8;
}

#pickup div span {
  display: block;
  color: #6c3704;
  text-decoration: none;
  padding: 20px 10px 20px 50px;
  background-color: #fffaf1;
}

#pickup div.check span {
  background: url(../images/top/top_icon_pickup_check.png) no-repeat 3% 50%;
  -webkit-background-size: 30px 25px;
  -moz-background-size: 30px 25px;
  background-size: 30px 25px;
}

#pickup div.money {
  background-color: #fffaf1;
}
#pickup div.money span {
  background: url(../images/top/top_icon_pickup_money.png) no-repeat 3% 50%;
  -webkit-background-size: 30px 25px;
  -moz-background-size: 30px 25px;
  background-size: 30px 25px;
  padding: 15px 10px 25px 50px;
}

#pickup div.voice {
  background-color: #fffaf1;
}
#pickup div.voice span {
  background: url(../images/top/cmn_icon_voice.png) no-repeat 3% 50%;
  -webkit-background-size: 30px 25px;
  -moz-background-size: 30px 25px;
  background-size: 30px 25px;
}

#pickup dl dt.money span.sub {
  background: none;
  position: absolute;
  top: 20px;
  font-size:10px;
}



/* pickup */

#pickup dl a,
#pickup dl a:link,
#pickup dl a:visited,
#pickup dl {
  text-decoration: none;
  color: #6c3704;
}

/* 稼げる指数からpickup */

#pickup div.moneyContent {
	margin-bottom: 20px;
	border: none;
}

#pickup div.moneyContent ul {
  overflow: hidden;
  margin: 0 -1px 0 0;
}

#pickup div.moneyContent ul li {
  float: left;
  width: 33%;
}

#pickup div.moneyContent ul li img {
  float: left;
  width: 100%;
}

/* ひとこと */

#pickup div.voiceContent {
	border: none;
	margin-bottom: 20px;
}


#pickup div.voiceContent a {
	text-align: left;
  text-decoration: none;
  color: #333;
}

#pickup div.voiceContent li {
  padding: 5px 10px;
  position: relative;
  border-left: 4px solid #ff8403;
  border-bottom: 1px solid #ccc;
}

#pickup div.voiceContent li p {
  position: relative;
  z-index: 100;
}
#pickup div.voiceContent li h3 {
  color: #FF8200;
  font-weight: bold;
  border-bottom: 1px dotted #b8b8b8;
  padding: 0 0 2px;
  margin: 0 0 2px;
}

#pickup div.voiceContent li .shopname {
  font-size: 11px;
  margin: 5px 0 0;
	background: none;
}

#pickup div.voiceContent li span {
  -webkit-background-size: 62px auto;
  -moz-background-size: 62px auto;
  background-size: 62px 44px;
  width: 62px;
  height: 44px;
  text-indent: -99999px;
  overflow: hidden;
  display: block;
  position: absolute;
  right: 5px;
  top: 6px;
}

#pickup div li .suffix01{
	  background: url(../images/top/cmn_bg_word_01.png) no-repeat right top;}

#pickup div li .suffix02{
	  background: url(../images/top/cmn_bg_word_02.png) no-repeat right top;}

/*お役立ち情報*/
.infoBox,
.NewArticlesBox {
	padding: 0 5px;
	background: url(../images/top/bg_info_h3.png) repeat-x center bottom;
}
.infoBoxInner,
.NewArticlesBoxInner {
	padding: 15px 0;
}

.NewArticlesBoxInner a {
  text-decoration: none;
  display: inline-block;
  margin-bottom: 10px;
}

.infoBoxInner p {
	padding: 5px 0;
	text-align: center;
}
.infoBoxInner p img {
  width: 310px;
  height: auto;
}
.infoBox h3 {
	background: url(../images/top/bg_info_h3.png) repeat-x center bottom;
	padding: 0 0 5px;
	color: #6c3704;
}
.infoBox span.ico {
	background: url(../images/top/ico_info_h3.png) no-repeat;
	background-position: 5px center;
  -webkit-background-size: 12px 16px;
  -moz-background-size: 12px 16px;
  background-size: 12px 16px;
	padding-left: 22px;
}
.infoBox span.font {
	font-size: 9px;
	font-weight: normal;
	padding-left: 5px;
}

.line_none { background: none; }
.NewArticlesBoxInner a {
  color: #000;
}
.line_none { background: none; }

#twitter {
    margin: 0 0 25px;
    width: 490px;
}

.NewArticlesTitle {
  text-align: center;
  position: relative;
}
.NewArticlesTitle:after, .NewArticlesTitle:before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: calc((100% - 220px) / 2) ;
  height: 3px;
  background-color: #ef7a00;
}
.NewArticlesTitle:after { right: 0; }
.NewArticlesTitle:before { left: 0; }
.ArticlesBox {
  font-size: 12px;
  width: 100%;
  min-width: 310px;
  min-height: 132px;
  box-sizing: border-box;
  border: 1px solid #b2b5b7;
  border-radius: 3px;
  padding: 10px;
}
.ArticlesBox img {
  float: left;
  max-width: 110px;
  height: auto;
  margin-right: 10px;
}
.NewArticlesDay {
  color: #ef7a00;
  margin-bottom: 10px;
}
.NewArticlesDay + p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.NewArticlesbtn {
  width: 100%;
  padding: 0 0 20px 0;
}
.NewArticlesbtn a {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  display: table;
  background-color: #ec6517;
  padding: 10px 20px;
  margin: 0 auto;
}

.slidBox {
	margin: 20px 0;
}


/*エリアボタン*/
.typeAreaBtn {
	background:url(../images/top/h3_tit_bg.png) no-repeat left bottom #feb247;
	background-size: 100% 100%;
	color:#fff;
	font-weight: bold;
	font-size: 20px;
	text-align:center;
	border:#a38c7c 1px solid;
	padding:10px 0;
	text-shadow: -1px -1px 2px rgba(152, 150, 150, 1);
	letter-spacing:1px;
  margin: 0 0 20px;
}
.typeAreaBtn span{
	font-size:70%;
}
/*
.typeAreaBtn a:before{
    background: url(../images/top/icon_map.png) no-repeat left center;
    content: "";
    display: inline-block;
    position: relative;
		top:5px;
    width: 27px;
    height: 26px;
		margin-right:20px;
}
*/
.typeAreaBtn a {
  display: block;
  color: #FFF;
  text-decoration: none;
}


.bannerStaffSnap {
	text-align: center;
}

.boxArea {
	width: 100%;
  margin-bottom: 20px;
  text-align: center;
}
.boxArea h3 {
	z-index: 1000;
}
.boxArea h3 img {
	width: 60%;
}
.boxArea figure {
}
.boxArea figure img {
	width: 100%;
}
.areachoice {
  background-color:#EE7A00;
}

.choice {
  color:#fff;
  font-size: 16px;
  text-align: center;
  padding-top:12px;
}

.boxArea ul {
  z-index:2000;
  width:288px;
  margin:0 auto;
  padding:10px 0 20px;
}

.boxArea ul li img {
  margin-bottom: 10px;
}

.boxArea ul li img {
  width: 100%;
  height: auto;
}

.boxArea ul li:last-child {
  margin-right:0;
}

.boxArea ul li a {
  text-decoration:none;
  color: inherit;
}

.top_chara {
  width: 95%;
  height: auto;
}


.areaBtnArea {
	width: 100%;
	height: 100%;
}
.areaBtn1 {
	display: block!important;
	position: absolute;
	bottom: 15%;
	right: 5%;
	font-size: 14px;
	padding: 10px 5px;
	border-radius: 3px;
	width: 40%;
}
.areaBtn2 {
	display: block!important;
	position: absolute;
	top: 55%;
	left: 5%;
	font-size: 14px;
	padding: 10px 5px;
	border-radius: 3px;
	width: 40%;
}
.areaBtn3 {
	display: block!important;
	position: absolute;
	top: 35%;
	right: 5%;
	font-size: 14px;
	padding: 10px 5px;
	border-radius: 3px;
	width: 40%;
}