@charset "utf-8";

/*--------------------------------------------
 
      common
 
---------------------------------------------*/

.pc{display:none;}
.smp{display:block;}

#page-top {
	max-width:40px;
}

#global-responsive-footer #copyRight .foot-nav{border:none;}

/*-------------------------------------------- 
      nav
---------------------------------------------*/

#smp-nav{
	padding:15px 0 0;
}

#smp-nav ul{

}

#smp-nav ul{
	margin: 0 auto;
	width: 94%;
	max-width: 380px;
	padding-bottom: 20px;
}

#smp-nav li{
	width: 13%;
	float: left;
	text-align: center;
	margin-right: 1.5%;
}

#smp-nav li{
	max-width: 50px;
	height: auto;
}

#smp-nav li:last-child{margin-right: 0;}

nav ul li a{
	display: block;
	padding-bottom: 3px!important;
}


nav ul li a.top:hover,
nav ul li a.top.active{
	background:none!important;
	border-bottom: 3px #000 solid;
	border-radius:0!important;
}

nav ul li a.beauty:hover,
nav ul li a.beauty.active{
	background:none!important;
	border-bottom: 3px #FF9999 solid;
	border-radius:0!important;
}

nav ul li a.cooking:hover,
nav ul li a.cooking.active{
	background:none!important;
	border-bottom: 3px #FFD24C solid;
	border-radius:0!important;
}

nav ul li a.life_style:hover,
nav ul li a.life_style.active{
	background:none!important;
	border-bottom: 3px #84DDFF solid;
	border-radius:0!important;
}

nav ul li a.event:hover,
nav ul li a.event.active{
	background:none!important;
	border-bottom: 3px #DFBFFF solid;
	border-radius:0!important;
}

nav ul li a.voice:hover,
nav ul li a.voice.active{
	background:none!important;
	border-bottom: 3px #8da2fe solid;
	border-radius:0!important;
}

nav ul li a.shopping:hover,
nav ul li a.shopping.active{
	background:none!important;
	border-bottom: 3px #215574 solid;
	border-radius:0!important;
}
/*--------------------------------------------
       main image 
---------------------------------------------*/

.bx-wrapper .bx-prev {
	display:none!important;
}

.bx-wrapper .bx-next {
	display:none!important;
}

.panelSlide .bx-wrapper .bx-prev {
	display:block!important;
}

.panelSlide .bx-wrapper .bx-next {
	display:block!important;
}


/*--------------------------------------------
       main image 
---------------------------------------------*/

#maimImage h2{
	text-align:center;
	font-size:30px;
	line-height:130%;
}

/*--------------------------------------------
       topCaption
---------------------------------------------*/

#topCaption .innar{
	background:#FFECEC;
	color:#D80000;
	text-align:left;
	font-size:90%;
	line-height:140%;
	padding:10px;
}

/*--------------------------------------------
       topics
---------------------------------------------*/

#topics{
	margin:0 auto 20px;
	width:100%;
}

#topics ul.first{}

#topics ul.first li{
	margin-bottom:0;
	background:none;;
	padding:0;
	overflow:hidden;
}

#topics ul.first li .image{
	width:100%;
	float:none;
}

#topics ul.first li .image .smpCategory{
	position:absolute;
	left:0;
	top:0;
}

#topics ul.first li .txt{
	position:relative;
	width:100%;
	float:none;
	padding:5px 2%;
}

#topics ul.first li .txt .headline{
	display:none;
}

#topics ul.first li .txt .more{
	text-align:right;
	font-size:90%;
	line-height:120%;
}

#topics ul.first li .txt .more a{
	text-align:right;
	padding:3px 8px;
	color:#000;
	text-decoration:none;
	border:1px #000 solid;
}

#topics ul.first li .txt .more a:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}

#topics ul.first li .txt dl.cont{}

#topics ul.first li .txt dl.cont dt{
	margin-bottom:3px;
	color:#FFBFBF;
	font-size:13px;
	font-weight:bold;
	line-height:130%;
}

#topics ul.first li .txt dl.cont dd{
	font-size:13px;
	line-height:130%;
}

#topics ul.first li .txt .date{
	width:auto;
	float:none;
	text-align:right;
}

#topics ul.first li .txt .headline2{
	position:relative;
	display:block;
}




/*--------------------------------------------
       newsSlide
---------------------------------------------*/

#newsSlide{
	margin:0 auto 20px;
	width:100%;
}

#newsSlide li .image{
	max-height:none;
}

/*--------------------------------------------
       newsBlock
---------------------------------------------*/

#newsBlock{
	margin:0 auto 20px;
	width:100%;
}

#newsBlock ul.news {
	margin:0 auto;
	width:100%;
}

#newsBlock ul.news li{
	width:100%;
	float:none;
	margin-right:4.5%;
	margin-bottom:20px;
}


#newsBlock ul.news li:nth-child(3n) {
	margin-right:0;
}

#newsBlock ul.news li .image{
	max-height:none;;
	overflow:hidden;
}

#newsBlock ul.news li .txt{
	padding-left:2%;
	padding-right:2%;
	
}

#newsBlock ul.news li .txt .tit{
	margin-bottom:5px;
	line-height:140%;
	font-size:90%;
}

#newsBlock ul.news li .txt .cont{
	line-height:140%;
	font-size:14px;
}

/*--------------------------------------------
       Recommend
---------------------------------------------*/

#pickUp{
	padding:20px 0;
}

#pickUp ul{
	margin:0 auto;
	width:94%;
	max-width:886px;
}

#pickUp ul li{
	margin-bottom:15px;
	width:100%;
	height:inherit!important;
	margin-right:0;
	float:none;
	overflow:hidden;
}

#pickUp ul li:nth-child(4),
#pickUp ul li:nth-child(5),
#pickUp ul li:nth-child(6){
	margin-bottom:15px;
}

#pickUp ul li:last-child{
	margin-bottom:0;
}

#pickUp ul li .image{
	margin-bottom:5px;
	max-height:none;
	position:relative;
	width:50%;
	float:left;
}

#pickUp ul li img{
	width:100%;
	height:auto;
	vertical-align:top;
}

#pickUp ul li .txt{
	width:47%;
	float:right;
	color:#333;
}

/*--------------------------------------------
       Recommend
---------------------------------------------*/


/*--------------------------------------------
       about
---------------------------------------------*/

#about .txt .innar dt{
	margin-bottom:15px;
	font-size:12px;
	line-height:130%;
}

#about .txt .innar dd{
	font-size:14px;
	line-height:130%;
}
/*--------------------------------------------
       footIcon
---------------------------------------------*/

#footIcon{
	background:#F3F3F3;
	padding:30px 0;
}

#footIcon ul{
	margin:0 auto;
	width:70%;
	display: block;
}


/*--------------------------------------------
       archive
---------------------------------------------*/

#categoryTittle{
	margin:0 auto 30px;
}

#archiveBlock{
	margin:0 auto 40px;
}

#archiveBlock .archiveList{
	margin-bottom:10px;
}

#archiveBlock .archiveList li{
	margin-bottom:20px;
	width:100%;
	margin-right:0;
	float:none;
	height:auto!important;
}

#archiveBlock .archiveList li:nth-child(3n) {
	margin-right:0;
}

#archiveBlock .archiveList li img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}

#archiveBlock .archiveList li .image{
	margin-bottom:0;
	width:49%;
	float:left;
	max-height:none;
	position:relative;
}

#archiveBlock .archiveList li .txt{
	width:48%;
	float:right;
}

/*--------------------------------------------
       SingleBlock
---------------------------------------------*/

#singleBlock{
	margin:0 auto 30px;
}

#singleBlock .singleTittle{
	font-size:130%;
	line-height:140%;
	color:#555;
}


/*--------------------------------------------
       curatorBox
---------------------------------------------*/

#singleBlock .curatorBox{
	margin:0 auto 30px;
	width:94%;
	max-width:500px;
	background:#F3F3F3;
	box-sizing:border-box;
	padding:10px;
	display: block;
}

#singleBlock .curatorBox .image{
	margin-bottom:8px;
	width:100%;
	text-align:center;
	float:noen;
}

#singleBlock .curatorBox .image img{
	width:auto;
	max-width:100%;
	height:auto;
}

#singleBlock .curatorBox .curatorData{
	width:100%;
	float:none;
	color:#666;
}

#singleBlock .curatorBox .curatorData dt{
	margin-bottom:10px;
}

/*--------------------------------------------
       singleRecommend
---------------------------------------------*/

#singleRecommend{
	margin:0 auto 20px;
}

/*--------------------------------------------
       shareBlock
---------------------------------------------*/

#shareBlock{
	margin:0 auto 30px;
	max-width:400px;
}

#shareBlock dd a {
	display:inline-block;
	width:16%;
	padding:0 1%;
}

/*--------------------------------------------
       osusumeBlock kanrenBlock
---------------------------------------------*/

#relationBlock{
	margin-bottom:30px;
	padding:0;
	border-bottom:none!important;
}

#osusumeBlock{
	margin:0 auto 30px;
	max-width:850px;
	width:94%;
}

#osusumeBlock h2{
	margin-bottom:10px;
	font-size:14px;
	text-align:center;
	line-height:130%;
}

#osusumeBlock li{
	margin-bottom:20px;
	width:100%;
	margin-right:0;
	float:none;
}

#osusumeBlock li .image{
	width:48%;
	float:left;
}

#osusumeBlock li .txt{
	width:48%;
	float:right;
}

.snsBox dd{
	left:-220px;
}

/*--------------------------------------------
       contact
---------------------------------------------*/

#contactTittle{
	margin:0 auto 30px;
}

#contactBlock .intro{
	margin-bottom:20px;
	font-size:20px;
	text-align:left;
	line-height:130%;
}

#contactBlock .intro span{
	display:inline;
}

#contactBlock .profile{
	margin-bottom:30px;
	font-size:16px;
	font-weight:normal;
	line-height:140%;
	text-align:left;
}

#contactBlock .profile strong{
	font-size:120%;
	font-weight:bold;
	line-height:130%;
}

/*--------------------------------------------
       osusumeBlock kanrenBlock
---------------------------------------------*/

#kanrenBlock h2{
	margin-bottom:10px;
	font-size:14px;
	text-align:center;
	line-height:130%;
}

#kanrenBlock li{
	margin-bottom:20px;
	width:100%;
	margin-right:0;
	float:none;
}

#kanrenBlock li .image{
	margin-bottom:0;
	width:48%;
	float:left;
}

#kanrenBlock li .txt{
	width:48%;
	float:right;
}

/*--------------------------------------------
       itemList
---------------------------------------------*/

#itemList{
	margin:0 auto 30px;
	border-bottom:1px #eee solid;
}


#itemList ul li{
	margin-bottom:20px;
	width:48%;
	height:inherit!important;
	margin-right:4%;
}

#itemList ul li .image{
	max-height:none;
}


#itemList ul li:nth-child(2n) {margin-right:0;}
#itemList ul li:nth-child(4n) {margin-right:0;}

#itemList ul li img{
	width:100%;
	height:auto;
}

/*--------------------------------------------
       itemImage
---------------------------------------------*/

#itemImage{
	margin:0 auto 30px;
}

/*--------------------------------------------
       itemName
---------------------------------------------*/

#itemName{
	margin:0 auto 30px;
}

#itemName dt{
	margin-bottom:10px;
	font-size:20px;
	line-height:130%;
}



/*--------------------------------------------
       mailmagazineBlock
---------------------------------------------*/

#mailmagazineBlock .innar h2{
	text-align:left;
	font-size:20px;
	line-height:120%;
}


#mailmagazineBlock .innar li a{
	font-size:90%;
	line-height:130%;
}

/*--------------------------------------------
       modal
---------------------------------------------*/

.modal-content {
	width: 90% ;
}














/*--------------------------------------------
       add
---------------------------------------------*/

table.tsumoriData{
	margin-bottom: 30px;
	width: 100%!important;
	border-collapse:collapse;
	font-size: 14px!important;
	line-height: 140%!important;
	border-top:none!important;
	border-left:none!important;
	
	border-bottom: 1px #ccc solid!important;
}

table.tsumoriData th{
	width:100%!important;
	padding:15px 10px!important;

	border:1px #ccc solid!important;
	display: block;
	box-sizing: border-box;
}	

table.tsumoriData td{
	padding:15px 10px!important;


	border-right:none!important;
	border-bottom:none!important;

	
	width: 100%!important;
	display: block;
	box-sizing: border-box!important;
}

table.tsumoriData td.hrefLeft{
	width: 49%!important;
	display: inline-block!important;
	border-right: 1px #ccc solid!important;
}
table.tsumoriData td.hrefRight{
	width: 49%!important;
	display: inline-block!important;
}





/*--------------------------------------------
       footBannar
---------------------------------------------*/

#footBannar{
	padding: 20px 0;
}

#footBannar .innar{
	margin: 0 auto;
	max-width: 886px;
	text-align: center;
}

#footBannar .innar img{
	max-width: 100%;
	height: auto;
}

#footBannar .innar ul{
	text-align: center;
}

#footBannar .innar ul li{
	display: block;
	margin: 0 0 20px;
}

#footBannar .innar ul li:last-child{
	margin-bottom: 0;
}








.quotationBox dt{
	width: 25%;
}



.voiceDisplayBlock dt{
	width: 25%;
}


.maillmagaBlock{
	margin: 0 auto 20px;
	max-width: 850px;
	box-sizing: border-box;
	width: 94%;
	padding: 10px;
	display: block;
	border: 1px #ccc solid;
}

.maillmagaBlock dt{
	margin: 0 auto 10px;
	width: 100%;
	max-width: 340px;
	padding: 0;
	display: block;
	vertical-align: top;
}

.maillmagaBlock dd{
	width: 100%;
	padding: 0;
	display: block;
	line-height: 150%;
	vertical-align: middle;
	text-align: center;
}

.btn{
	min-width: inherit!important;
	width: inherit;
  height: inherit;
  line-height: inherit;
  background: none;
  border: none;
  margin: inherit;
  color: inherit;
  font-weight:inherit;
  text-align: inherit;
  text-decoration: none;
}

.btn:hover {
	background: none;
}

#singleBlock .mailmagaWaku .btn{
	padding:5px 10px;
	
}


/*--------------------------------------------
       add
---------------------------------------------*/

#maimImage h1{
	text-align:center;
	font-size:30px;
	line-height:130%;
}

h1.mailmagazineTit{
	text-align:left;
	font-size:20px;
	line-height:120%;
}


#itemName{
	margin:0 auto 30px;
}

#itemName h1{
	margin-bottom:10px;
	font-size:20px;
	line-height:130%;
}

.voiceDisplayBlockOriginal{
	margin:0 auto 20px;
	width: 100%;
}


.voiceDisplayBlockOriginal dl{
	display: block;
	padding: 10px;
}

.voiceDisplayBlockOriginal dt{
	width: 100%;
	padding: 0;
	margin: 0 auto 5px;
	max-width: 260px;
	display: block;
}

.voiceDisplayBlockOriginal dd{
	padding: 0;
	display: block;
	line-height: 150%;
}

#button-block {
	display: none;
}

#smp-button-block {
    position: fixed;
	display: block;
    left: 0;
	width: 100%;
	box-sizing: border-box;
	padding-right: 50px;
	z-index:999999;
}

#smp-button-block  img{
	width:100%;
	height:auto;
}

#smp-button-block .innar{
	background: rgba(0,0,0,0.8);
	border-radius:10px;
	width: 100%;
}

#smp-button-block .block{
	padding: 10px;
	color: #fff;
	font-size: 12px;
	line-height: 150%;
}

#smp-button-block .innar .inblock{
	margin-bottom: 5px;
	width: 100%;
	display: table;
	border-collapse: collapse;
}

#smp-button-block .innar .smp-close{
	width: 12px;
	display: table-cell;
	vertical-align: top;
	cursor: pointer;
}

#smp-button-block .innar .smp-close img{
	width: 12px;
	height: 12px;
}

#smp-button-block .innar .txt{
	display: table-cell;
	padding-right: 10px;
	vertical-align: top;
}

#smp-button-block .innar .btn-cover{
	text-align: center;
}

#smp-button-block .innar a.btn01{
	display:inline-block;
	background:#fff;
	text-align:center;
	padding:5px 10px;
	text-decoration:none;
	border-radius:10px;
	color:#000;
	min-width:140px;
	cursor:pointer;
}

#smp-button-block .innar a.btn01:hover{
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}

#foot-box{
	margin-top: 20px;
	background: #000;
	display: block;
}

/*--------------------------------------------
       cataroty-icon
---------------------------------------------*/

.category-beauty,
.category-event,
.category-life_style,
.category-cooking,
.category-voice,
.category-shopping{
	padding:2px 5px;
	font-size:90%;
	line-height:120%;
}