@charset "UTF-8";

/*-------------------------------------------------
	reset styles
-------------------------------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset,iframe {
margin: 0;
padding: 0;
color:#000000;
}
ol, ul, li { list-style-type: none; }
a { outline:none 0 #000000; }
img { border:0; }
/*-------------------------------------------------
	layout base 
-------------------------------------------------*/
html, body { height:100%; }
body { text-align:center;
 }
/*-------------------------------------------------
	text color and size
-------------------------------------------------*/
body, th, td, h1, h2, h3, h4, h5, h6, pre, input, textarea, option, div, p, dt, dd, li, address, cite {
font-size: 12px;
line-height: 100%;
font-weight: normal;
font-style: normal;
font-family: 'Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',arial,helvetica,clean,sans-serif;
}
hr { display:none; }

p{ line-height:130%; }


/*-------------------------------------------------
 text link
 -------------------------------------------------*/
a {
color:#0066ff;
text-decoration:none;
}
a:hover {
color:#0066ff;
text-decoration:underline;
}
/*-------------------------------------------------
	usefull margin
-------------------------------------------------*/

.pt0{ padding-top:0 !important;}

.mtS { margin-top:10px; }
.mbS { margin-bottom:10px; }
.mbM { margin-bottom:20px; }
.mbL { margin-bottom:40px; }
.mlS { margin-left:10px; }
.mrS { margin-right:10px; }
.mrS { margin-right:10px; }

.mb_canceler { margin-bottom:0px !important; }


/*-------------------------------------------------
	usefull item
-------------------------------------------------*/
.tar { text-align:right; }
.tac { text-align:center; }


.ml5 { margin-left:5px; }
.ml10 { margin-left:10px; }
.ml15 { margin-left:15px; }
.ml20 { margin-left:20px; }
.ml25 { margin-left:25px; }

.posR{ position:relative; }

.op a img:hover {
opacity: 0.8;
-moz-opacity: 0.8; /* Firefox */
filter: alpha(opacity=80); /* IE6/7 */
-ms-filter: "alpha(opacity=80)"; /* IE8 */
}

sub, sup {
	vertical-align: baseline ;
}
sup {
	position: relative ;
	top: 0px ;
}
sub {
	position: relative ;
	top: 0px ;
}
/*-----------------------------------------
    float
*/
.fl{float:left;}
.fr{float:right;}
.cl{
font-size:0;
line-height:0;
clear:both;
}
.clf:after,
.clearfix:after{
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clf,
.clearfix{
min-height: 1px;
}
* html .clf,
* html .clearfix{
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}
.clear{
  clear:both;
}


/*-----------------------------------------
    display
*/
.bl{display:block;}
.in{display:inline;}
.heightLineParent{}
.heightLine-group1{}

/*-----------------------------------------
    position
*/
.mcen{margin-right:auto; margin-left:auto;}

.vt{vertical-align: top !important;}
.vm{vertical-align: middle !important;}
.vb{vertical-align: bottom !important;}

.center{text-align:center !important;}
.right{text-align:right !important;}
.left{text-align:left !important;}


/*=========================================
    LAYOUT
=========================================*/
.tag_wrap{
  height:0;
  overflow:hidden;
}
#wrapAll{
overflow:hidden;
}
#wrap{
  background-color:#fcf1ef;
}
body{
  text-align:left;
  -webkit-text-size-adjust: 100%;
  color:#000000;
  background-color:#FFF;
}

a.ovr:hover{
  opacity:0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";
}

.inner{
  width:950px;
  margin:0 auto;
}

/*-----------------------------------------
HEADER
*/
#btn-spmenu{
  display:none;
}
#header{
  padding:12px 0;
  background-color:#f63343;
  font-size:12px;
}
#header .inner{
  min-height:38px;
  overflow:hidden;
  position:relative;
  text-align:right;
  font-size:12px;
  padding-top:4px;
}
#header h1,
#header .logo{
  position:absolute;
  left:0;
  top:0;
  width:171px;
}
#header h1 img,
#header .logo img{
  width:100%;
}
#header h2,
#header .logo_txt{
  position:absolute;
  left:0;
  bottom:0;
  font-size:0;
}
#header_link,
#header_link li,
#txt_size,
#txt_size dt,
#txt_size dd,
#header form,
#header form > div{
  display:inline-block;
  color:#FFFFFF;
  vertical-align:middle;
  font-size:12px;
}
#header a{
  color:#FFFFFF;
  text-decoration:none;
}
#header form{
  margin-left:10px;
  padding:8px 10px;
  border-radius:5px;
  background-color:#ff5761;
}
#btn_search input{
  opacity:0;
  filter: alpha(opacity=0);
  -ms-filter: "alpha( opacity=0 )";
  cursor:pointer;
}
#btn_search{
  width:17px;
  height:17px;
  background:url(../img/btn_search.png) no-repeat 0 0;
  margin-right:5px;
}
#form_search input{
  width:170px;
  height:17px;
  background:none;
  border:none;
  color:#FFFFFF;
  outline:0;
  border:0;
  font-size:12px;
}
#form_search input:focus{
  outline:0;
}
#txt_size{
  font-size:12px;
  line-height:12px;
  margin-left:5px;
}
#txt_size dt{
  padding:8px 5px 8px 10px;
  font-size:12px;
}
#txt_size dd a{
  line-height:17px;
  padding:9px 10px;
  background-color:#ff5761;
  display:block;
  font-size:14px;
}
#txt_size dd.act a{
  background-color:#FFFFFF;
  color:#f82430;
}
#ts_l a{
  border-radius:5px 0 0 5px;
}
#ts_r a{
  border-radius:0 5px 5px 0;
}




/*-----------------------------------------
GNAVI
*/
#spmenu_layout{
  display:none;
}
#gnavi{
  margin-bottom:30px;
  padding:10px 0;
  background-color:#FFFFFF;
}
#gnavi ul{
  width:954px;
  margin:0 auto;
}
#gnavi ul li{
  float:left;
}
#gnavi ul li a{
  width:159px;
  height:60px;
  display:block;
  background-image:url(../img/gnavi.png);
  background-repeat: no-repeat;
  text-indent:200%;
  white-space:nowrap;
  overflow:hidden;
}
#nav01 a{
  background-position:0 0;
}
#about #nav01 a,
#nav01 a:hover{
  background-position:0 -60px;
}
#nav02 a{
  background-position:-159px 0;
}
#product #nav02 a,
#style #nav02 a,
#cholp #nav02 a,
#nav02 a:hover{
  background-position:-159px -60px;
}
#nav03 a{
  background-position:-318px 0;
}
#symptom #nav03 a,
#nav03 a:hover{
  background-position:-318px -60px;
}
#nav04 a{
  background-position:-477px 0;
}
#chocolumn #nav04 a,
#nav04 a:hover{
  background-position:-477px -60px;
}
#nav05 a{
  background-position:-636px 0;
}
#component #nav05 a,
#nav05 a:hover{
  background-position:-636px -60px;
}
#nav06 a{
  background-position:-795px 0;
}
#entertainment #nav06 a,
#tendays #nav06 a,
#kitchen #nav06 a,
#bbfe #nav06 a,
#cpbb65yr #nav06 a,
#nav06 a:hover{
  background-position:-795px -60px;
}
#gnavi_close{
  display:none;
}


/*-----------------------------------------
CONTENTS
*/
#contents_head_crumb {
  width:950px;
  margin: -20px auto 20px;
}
#contents_head_crumb li {
  display: inline;
  margin-left: 0.5em;
}
#contents_head_crumb li:before {
  content: ">";
  margin-right: 0.5em;
}
#contents_head_crumb li:first-child {
  margin-left: 0;
}
#contents_head_crumb li:first-child:before {
  display: none;
}
#contents_head_crumb li a {
  text-decoration:underline;
}
#contents_head_crumb li a:hover{
  text-decoration:none;
}

#contents{
  width:978px;
  margin:0 auto 50px;
  text-align:left;
}
#contents.old{
  width:950px;
  background-color:#FFF;
  position:relative;
  border:solid #CCCCCC 1px;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0px 0px 3px #CCCCCC;
}
#contents img,
#contents iframe{
  vertical-align:bottom;
}
.main_contents{
  width:950px;
  margin:0 auto 50px;
  background-color:#FFF;
  position:relative;
  border:solid #CCCCCC 1px;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0px 0px 3px #CCCCCC;
}
.main_contents > .main_inner{
  padding:20px 20px;
}


/*-----------------------------------------
FOOTER
*/
#footer{
  background-color:#FFF;
  border-top:solid #FF0000 3px;
}
#footer .inner{
  position:relative;
  padding:50px 0 30px;
}
#footer_pagetop{
  position:absolute;
  top:-70px;
  right:-100px;
}
#footer_pagetop.fixed-bottom {
  bottom: 10px;
  position: fixed;
  right: 10px;
  top: auto;
  z-index: 10000;
}
#footer_top{
  background:url(../img/footer_logo_bb.png) 100% 98% no-repeat;
  padding-bottom:50px;
  margin-bottom:20px;
  border-bottom:solid #cccccc 1px;
}
#footer .footer_box{
  width:180px;
  float:left;
  line-height:1.8;
}
#footer .footer_box ul li{
  line-height:1.8;
}
#footer .footer_box ul li a{
  text-decoration:underline;
}
#footer .footer_box ul li a:hover{
  text-decoration:none;
}
#footer .footer_box ul li.fb{
  font-size:15px;
  font-weight:bold;
}
#footer .footer_box h3,
#footer .footer_box dl dt{
  font-size:15px;
  font-weight:bold;
  margin-bottom:8px;
  line-height:1.8;
}
#footer .footer_box dl * + * + dt {
  margin-top: 5%;
}
#fb1_01{
  margin-right:30px;
  margin-bottom:30px;
}
#fb1_01 ul{
  width:140px;
  overflow:hidden;
}
#fb1_01 ul li{
  width:50%;
  float:left;
}
#fb2.footer_box,
#fb3.footer_box{
  width:auto;
  margin-right:20px;
}
#footer_middle{
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:solid #cccccc 1px;
}
#footer_middle .footer_box{
  width:auto;
}
#footer_middle .footer_box li{
  float:left;
  margin-right:20px;
}

#footer_bottom h4{
  float:left;
}
#footer_bottom ul{
  width:890px;
  float:right;
  font-size:85%;
  margin-right:-15px;
}
#footer_bottom ul li{
  float:left;
  padding-bottom:5px;
  white-space:nowrap;
  line-height:1.5;
  font-size:12px;
}
#footer a{
  color:#000000;
  text-decoration:none;
}
#footer a:hover{
  text-decoration:underline;
}
#copyright{
  padding-left:75px;
  clear:both;
  font-size:10px;
}
#footer_sp{
  display:none;
}


@media screen and (max-width: 640px){

/*-------------------------------------------------
 text link
 -------------------------------------------------*/
a:hover {
text-decoration:none;
}

body{
  position:relative;
  background-color:#FFF;
}
#wrap{
  position:relative;
  padding-top: 50px;
  background-color:#fcf1ef;
}
.inner{
  width:auto;
}

/*-----------------------------------------
HEADER
*/
#header{
  padding: 7px 3%;
  background-color:#f63343;
  font-size:12px;
  position: fixed;
  z-index: 20000;
  width: 95%;
  height: auto;
  top: 0;
}
#header .inner{
  min-height:0;
  overflow:hidden;
  position:relative;
  text-align:left;
  font-size:12px;
  padding-top:0;
}
#header h1{
  width:50%;
  max-width:150px;
  position: static;
  left:auto;
  top:auto;
  float:left;
  margin-top:2.2%;
  line-height: 1.5;
}	
#header .logo{
  width:50%;
  max-width:150px;
  position: static;
  left:auto;
  top:auto;
  float:left;
  margin-top:2.2%;
}
#header h2{
  display:none;
}
#header .logo_txt{
  display:none;
}
#header_link,
#txt_size,
#header form{
  display:none;
}
#header a{
  color:#FFFFFF;
  text-decoration:none;
}
#btn-spmenu{
  display:inline-block;
  vertical-align:middle;
  border-radius:5px;
  background-color:#FFF;
  position: static;
  right:auto;
  top:auto;
  float:right;
}
#btn-spmenu span{
  display:block;
  padding:12px 8px 12px 40px;
  background:url(../img/icn_spmenu.png) 8px 50% no-repeat;
  background-size:24px;
  color:#f63343;
  cursor:pointer;
}


/*-----------------------------------------
GNAVI
*/
#spmenu_layout{
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,0.8);
  display:none;
  z-index:30000;
}
#headerBox {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 40000;
}
#gnavi{
  width:96%;
  display:none;
  position:absolute;
  top:49px;
  left:2%;
  margin-top:0;
  padding:0 0 50px;
  background-color:transparent;
  overflow:auto;
}
#gnavi > ul {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5%;
}
#gnavi ul{
  width:auto;
  overflow:hidden;
  background-color:#FFF;
}
#gnavi ul li{
  float:none;
  border-top:solid #CCC 1px;
}
#gnavi ul li:first-child{
  border-top:none;
}
#gnavi ul li a{
  width:auto;
  height:auto;
  background-image:none;
  padding:4% 4%;
  text-indent:0;
  color:#000;
  background:url(../img/icn_spnavi_link.png) 96% 50% no-repeat;
  background-size:6px;
}
#gnavi ul li a:hover{
  text-decoration:none;
  background:url(../img/icn_spnavi_link.png) 96% 50% no-repeat;
  background-size:6px;
}

#product #nav01 a{
  background-position:96% 50%;
}
#chocolumn #nav02 a{
  background-position:96% 50%;
}
#style #nav03 a,
#entertainment #nav03 a{
  background-position:96% 50%;
}
#campaign #nav04 a{
  background-position:96% 50%;
}
#qa #nav05 a{
  background-position:96% 50%;
}

#gnavi_bg{
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,0.8);
  display:none;
  z-index:-1;
}
#gnavi.bg_on #gnavi_bg{
  display:none;
}
#gnavi_close{
  width:40%;
  margin:0 auto;
  background-color:#FFF;
  padding:4% 10%;
  border-radius:5px;
  text-align:center;
  display:block;
}
#gnavi_close span{
  background:url(../img/icn_spnavi_close02.png) 0 50% no-repeat;
  background-size:11px;
  padding-left:20px;
  text-decoration:none;
  color:#000;
}



/*-----------------------------------------
CONTENTS
*/
#contents_head_crumb {
  width:auto;
  margin: 0 0 6.25%;
  padding:0 0 0 10px;
  display:inline-block;
}
#contents_head_crumb li {
  display: inline;
  margin-left: 0.5em;
}
#contents_head_crumb li:before {
  content: ">";
  margin-right: 0.5em;
}
#contents_head_crumb li:first-child {
  margin-left: 0;
}
#contents_head_crumb li:first-child:before {
  display: none;
}
#contents_head_crumb li a {
  text-decoration:underline;
}
#contents_head_crumb li a:hover{
  text-decoration:none;
}

#contents{
  width:100%;
  padding-top:2%;
  margin:0 auto 8%;
  text-align:left;
}
#top #contents{
  padding-top:0;
}
#contents.old{
  width:100%;
  background-color:#FFF;
  position:relative;
  border:none;
  border-radius:0;
  overflow:hidden;
  box-shadow:0px 0px 0 #CCCCCC;
}
#contents.old #crumb{
  padding-left:2%;
  padding-bottom:2%;
}
#contents.old .box #crumb{
  padding-left:0;
}

.main_contents{
  width:auto;
  margin:0 2% 6.25%;
  background-color:#FFF;
  position:relative;
  border:solid #CCCCCC 1px;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0px 0px 3px #CCCCCC;
}
.main_contents > .main_inner{
  padding:2% 2%;
}

/*-----------------------------------------
FOOTER
*/
#footer{
  display:none;
}
#footer_sp{
  display:block;
  background-color:#f63343;
}
#footer_sp #footer_pagetop{
  width:23%;
  text-align:right;
  right:2%;
  top:auto;
  margin-top:-40px;
  z-index: 10000;
}
#footer_pagetop.fixed-bottom {
  bottom: 0;
  position: fixed;
  right: 10px;
  top: auto;
  z-index: 20000;
}
#footer_sp #footer_pagetop img{
  width:100%;
}
#footer_sp #footer_top{
  background:none;
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:none;
}
#footer_sp #footer_top ul{
  width:96%;
  margin:0 auto;
  padding:5% 0 3%;
}
#footer_sp #footer_top ul li{
  display:block;
  width:49%;
  margin-bottom:2%;
}
#footer_sp #footer_top ul li:nth-child(odd){
  float:left;
}
#footer_sp #footer_top ul li:nth-child(even){
  float:right;
}
#footer_sp #footer_top ul li a{
  display:block;
  text-align:center;
  padding:35px 0 10px 0;
  background-color:#FFF;
  background-position:50% 10px;
  background-repeat:no-repeat;
  color:#000;
}
#footer_sp #footer_top ul li#spnav01 a{
  background-image:url(../img/icn_product.png);
  background-size:19px;
	background-position:50% 6px;
}
#footer_sp #footer_top ul li#spnav02 a{
  background-image:url(../img/icn_chocolumn.png);
  background-size:26px;
}
#footer_sp #footer_top ul li#spnav03 a{
  background-image:url(../img/icn_entertainment.png);
  background-size:22px;
}
#footer_sp #footer_top ul li#spnav04 a{
  background-image:url(../img/icn_campaign.png);
  background-size:23px;
}
#footer_sp #footer_top ul li#spnav05 a{
  background-image:url(../img/icn_symptom.png);
  background-size:26px;
	background-position:48% 1px;
}
#footer_sp #footer_top ul li#spnav06 a{
  background-image:url(../img/icn_component.png);
  background-size:22px;
  background-position:50% 7px;
}
#footer_sp #footer_bottom{
  padding:4% 0 0;
  background-color:#FFF;
}
#footer_sp #footer_bottom ul{
  width:90%;
  float:none;
  margin:0 auto;
}
#footer_sp #footer_bottom ul li{
  display:block;
  width:50%;
  text-align:left;
}
#footer_sp #footer_bottom ul li a{
  color:#000;
  text-decoration:underline;
  padding-left:15px;
}
#footer_sp #footer_bottom ul li#spnav_privacy a,
#footer_sp #footer_bottom ul li#spnav_aboutsite a{
  background:url(../img/icn_blank.png) 0 50% no-repeat;
  background-size:10px;
}

#footer_sp #footer_bottom #copyright{
  text-align:center;
  padding-left:0;
  padding-top:4%;
  padding-bottom:4%;
  font-size:10px !important;
}
#gnavi:not( :target ) a:first-of-type,　#gnavi:target a:last-of-type {
	display: block;
}

/* first level */
#gnavi dd , #gnavi li > ul {
	height: auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
}
#gnavi:target > dd {
	display: block;
}
#gnavi > ul > li {
	width: 100%;
	float: none;
}

/* second level */
#gnavi li dd {
	padding-left: 8%;
	position: static;
}

/*-----------------------------------------
GNAVI　
*/
.gnavitabinner {
	background-color: #eeeeee !important;
}	
#gnavi dt > a {
  width:auto;
  height:auto;
  background-image:none;
  padding:4% 4%;
  text-indent:0;
  color:#000;
  background:url(../img/icn_spnavi_open.png) 97% 50% no-repeat!important;
  background-size:15px!important;
}
#gnavi dt.open > a {
  text-decoration:none;
  background:url(../img/icn_spnavi_close.png) 97% 50% no-repeat!important;
  background-size:15px!important;
}
.gnavi07 a{
  width:auto;
  height:auto;
  background-image:none;
  padding:4% 4%;
  text-indent:0;
  color:#000;
  background:url(../img/icn_spnavi_blank.png) 97% 50% no-repeat!important;
  background-size:15px!important;
}
}