@charset "utf-8";


/* ------------------------------------------------------------------------------------------------------ Pagetop */


#pagetop {
	display: none;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 99;
	width: 60px;
	height: 60px;
	overflow: hidden;
	}

	#pagetop a {
		display: block;
		height: 100%;
		background:url(/common/btn_pagetop.gif);
		text-decoration: none;
		text-indent: -9999px;
		background-position: center;
		background-repeat: no-repeat;
		
		filter: alpha(opacity=80);
		-moz-opacity: 0.8;
		opacity: 0.8;
		
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		-ms-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
		}
	
		#pagetop a:hover {
			filter: alpha(opacity=100);
			-moz-opacity: 1.0;
			opacity: 1.0;
		}

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


#pagetop {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	height: 40px;
	background-position: center;
	background-repeat: no-repeat;
	
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	}

	#pagetop a {
		display: block;
		height: 100%;
		text-decoration: none;
		text-indent: -9999px;
		background-color: #000;
		background-size: 38px 20px;
		background-image: url(/common/sp_pagetop.png);
	}
}

/* ------------------------------------------------------------------------------------------------------ Footer */

#footer {
	margin:30px 0 40px;
	padding:0;
	text-align: center;
	}

/* ------------------------------------------------------------------------------------------------------ ページ共通 */

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	border: none;
	vertical-align: text-bottom;
}

#wrapper {
	width: 100%;
	height: 100%;
	margin:0 auto;
}

.clear{clear:both;}

a:visited   { color:#FF0033;}

a:active    { color:#FF33FF;}

.ftxt,
.cttl,
.mttl,
.attl  {display:inline-block;}


@media screen and (min-width: 1025px) {
    
#wrapper {
	padding-top: 30px;
}

}

/* ----------------- トップページ----------------- */ 

#covers{
	text-align: left;
	margin: 0 auto;
	}
   #covers a {
	  color:#FF3366;
	  text-decoration:none;
	  -webkit-transition: 0.5s;
	  -moz-transition: 0.5s;
	  -ms-transition: 0.5s;
	  -o-transition: 0.5s;
	  transition: 0.5s;
	  }
   #covers a:hover {
	  color:#a34154;
	  }
   #covers a img {
	   border:none;
	   -webkit-transition: 0.5s;
	   -moz-transition: 0.5s;
	   -ms-transition: 0.5s;
	   -o-transition: 0.5s;
	   transition: 0.5s;
	   }
	#covers a:hover img {
		border:none;
		filter: alpha(opacity=0);
		-moz-opacity:0;
		opacity:0;
		}

/* -- メッセージ枠 -- */

	.msg {
		display:inline-block;
		}
	.mlf {
		display:inline-block;
		background:url(images/message-2ro.png) no-repeat;
		}
	.mla {
		display:inline-block;
		background:url(images/message-1ro.png) no-repeat;
		}

  #pc-head{
	  width:920px;
	  height:350px;
	  margin:0;
	  padding:0;
	  background: url(images/ttl-bg.png) no-repeat;
	  }
    #pc-head .message{
		text-align:right;
		padding:5px 10px 0 0;
		}

   #sp-head { display:none; }
	
  #container {
	  width:100%;
	  height:auto;
	  clear: both;
	  padding:0;
	  margin:0;
	  }

  #columnleft{
	   width:440px;
	   float:left;
	   margin:0 0 30px 20px;
	   }
	 #columnleft dl{
		 margin:0;
		 border-top: 3px dotted #fff;
		 clear:both;
		 }
	   #columnleft dt{
		   float:left;
		   padding:10px 8px 10px 10px;
		   }
		 #columnleft dd {
			 margin-left:100px;
			 padding:10px 10px 10px 0;
			 line-height:1.5em;
			 }

        #columnleft h6 {
			margin:0;
			padding:0;
			font-size:1em;
			}
		 #columnleft h6 a {
			 display:inline-block;
			 padding:2px 5px 1px;
			 margin:5px 0 2px;
			 background-color:#ff3366;
			 border:solid 1px #ff3366;
			 border-radius: 3px;
			 text-align: center;
			 color: #fff;
			 }
		 #columnleft h6  a:hover {
			 background-color:#fff;
			 color: #ff3366;
			 }
		 #columnleft dd .stl {
			 display:inline-block;
			 padding:2px 5px 1px;
			 margin:5px 0 2px;
			 background-color:#fff;
			 border:solid 1px #ff3366;
			 border-radius: 3px;
			 text-align: center;
			 color: #ff3366;
			 font-size:1.1em;
			 }
		 #columnleft .bndel {
			 display:inline-block;
			 margin:5px 0 0;
			 padding:0;
			 background:url(images/btn_office-ro.png) no-repeat top;
			 }


   #columnright{
	   width:430px;
	   float:right;
	   margin:0 20px 20px 0;
	   }

   #columnright h6 {
	   margin:0;
	   padding:0;
	   }
   #columnright h6 a {
	   display:block;   
	   border:solid 1px #ffd786;
	   }
   #columnright h6 a:hover {
	   border:solid 1px #993a4d;
	   background-color:#fff;
	   background-image:url(images/btn_blog-ro.png);
	   background-repeat:no-repeat;
	   background-position:center top;
	   }

	#covers .btmcov {
		margin:0;
		padding:0;
		background:url(images/btm-bg.png) repeat-x top;
	    }

	#covers .bgbtm {
		display:block;
		width:100%;
		height:15px;
	    background:#ffd786;
	    border-radius: 5px;
	    }

/* ---------- チャーミー・カラフル・パーティー YouTube----------------------------------- */

.freelink {
	width:80%;
	margin:30px auto 0;
	text-align:center;
	}
 .freelink a {
	 width:100%;
	  margin:0 auto;
	  padding:15px 0 14px;
	  background:#fff;
	  border-radius: 5px;
	  display:inline-block;
	  text-decoration:none !important;
	  color: #ff3062 !important;
	  }
  .freelink a:hover {
	   background:#ff3062;
	   color:#fff !important;
	   }
  .freelink a:hover img {
		filter: alpha(opacity=100) !important;
		-moz-opacity:1.0 !important;
		opacity:1.0 !important;
		}

/* ---------- チャーミー・インスタグラム --------------------------- */

.snsbana {
	margin:0 auto 15px;
	width:96%;
	text-align:center;
	padding:0;
	background:url(images/btn_instagram-ro.png) no-repeat;
	background-position:center;
	}

/* ---------- チャーミー・カラフル・パーティー イベント告知 --------------------------- */

.freelink2 {
	width:80%;
	margin:0 auto;
	text-align:center;
	font-weight:bold;
	}
 .freelink2 a {
	 width:100%;
	  margin:0 auto;
	  padding:0 10px 14px;
	  background:#fff;
	  border-radius: 5px;
	  letter-spacing:1px;
	  line-height:1.2em;
	  display:inline-block;
	  text-decoration:none !important;
	  color: #ff3062 !important;
	  }
  .freelink2 a:hover {
	  background:#ff3062;
	   color:#fff !important;
	  }
  .freelink2 a:hover img {
		filter: alpha(opacity=100) !important;
		-moz-opacity:1.0 !important;
		opacity:1.0 !important;
		}
  .freelink2 p {
	  width:90%;
	  margin:0 auto;
	  font-size:16px;
	  line-height:1.2em;
	  }

.cttl,
.mttl,
.attl {margin:5px auto 0;}

    a .ettl {
		width:96%;
		margin:5px auto 0;
		font-size:15px;
		}
	a .cttl { color:#a04020; }/*茶色 */
	a .mttl { color:#090; }/* 緑色 */
	a .attl {
		color:#09f;
		font-size:0.9em;
		}/* 青色 */


    a:hover .ettl { color:#fffcd1; }
	
	.e-txt { color:#ff142a; }

/***** ブログ読込エリア *****/

#matome {
	margin:0;
	text-align:left;
	padding:5px;
	background-image:url(images/bg_blog.gif);
	}
#matome a {
	text-decoration:none;
	font-weight:bold;
	}
#matome h4 {
	margin:0 0 10px 0;
	padding:5px 0 4px 5px;
	font-size: 12px;
	background:#A34154;
	color:#FFF;
	}
#matome p {
	float:right;
	width:70px;
	margin:0;
	padding:5px 0 4px;
	text-align:center;
	font-size: 12px;
	background:#A34154;
	color:#fff;
	}
#matome a{
	display:inline-block;
	white-space:nowrap;
	margin-left:10px;
	text-align:right;
	font-size:12px;
	}
#matome div{
	margin-bottom:5px;
	}
	
#matome .bloglist {
	text-align:left;
	border-bottom:solid 1px #fff;
	}


/* ----------------- オフィスデリバリー ----------------- */


#formbana{
	margin:0 auto;
	text-align:center;
	clear:both;
	}
 #formbana ul {
	 margin:0;
	 padding:0;
	 clear:both;
	 }
 #formbana li {
	 display:inline-block;
	 margin:0 10px;
	 margin-top: 50px;
	 vertical-align:middle;
	 }
 #formbana .top-re {
	 background:url(images/btn_top-ro.png) no-repeat center top;
	 -moz-background-size:contain;
	 background-size:contain;
	 }
 #formbana .del-fl {
	 background:url(images/btn_oubo-ro.png) no-repeat center top;
	 -moz-background-size:contain;
	 background-size:contain;
	 }


#refobana{
	height:60px;
	text-align:right;
	padding:0;
	clear:both;
	}
   #refobana img {
	   display:block;
	   float:left;
	   margin-left:26px;
	   }

  #delivery .sttl{
	display: block;
    width: 50%;
	margin: 0 auto;
    margin-top: 20px;
    text-align: center;
	font-size: 1.3em;
    line-height: 42px;
    color: #FFFFFF;
    
	  }
	#delivery h3{
		margin:0;
		}
	#delivery h3 a {
		display:inline-block;
		padding:0 5px;
		margin:0 7px;
		background-color:#fff;
		border:solid 1px #fff;		
		border-radius: 3px;
		text-align: center;
		line-height:24px;
		font-size:16px;
		color: #ff3366;
		}
	#delivery h3 a:hover {
	    background-color:#ffd786;
		border:solid 1px #ff3366;
		color: #ff3366;
	    }
	 #delivery .red{
		 color:#F00;
		 }
		
  #delivery ul{
	  width:100%;
	  clear:both;

	  list-style:none;
	  text-align:center
	 }
  #delivery li{
	  display:block;
	  }
  #delivery li img {
	  border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
	  }
  #delivery h5{
	  border:none;
	  border-radius:5px;
	  font-size:1em;
	  
	  }




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

#covers { width:100%; }

#pc-head { display:none; }

#sp-head{
	display:block;
	margin:0;
	padding:0 0 10px;
	text-align:center;
	background:#ffd786;
	}
#sp-head .comment{
	margin:10px auto;
	width:96%;
	padding:10px;
	background:#fff;
	text-align:left;
	color:#A34154;
	border-radius: 7px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
	}	  

#sp-head .message{
	margin: 30px 15px 0 15px;
	text-align:center;
	}
/* #sp-head .message img{
	margin:5px 0 0 10px;
	}
#sp-headr .message a img{
	border:none;
	} */

#columnleft{
   width:100%;
   float:none;
   margin:0 auto 20px;
   }
#columnleft dd {
	margin:5px;
	padding:0;
	}


#columnleft .bndel { margin:0 0 0 10px; }
	
#columnright{
	float:none;
	width:80%;
	margin:0 auto !important;
	background:url(images/blog-ttlbg.png) top repeat-x;
	}
#columnright h6 { text-align:center; }


.freelink { margin:10px auto 0; }

#covers .bgbtm { height:30px; }

/***** ブログ読込エリア *****/

#matome {
	margin:0;
	text-align:left;
	padding:5px;
	background-image:url(http://fmk.fm/charmy/images/bg_blog.gif);
	}
#matome a {
	text-decoration:none;
	font-weight:bold;
	}
#matome h4 {
	margin:0 0 5px 0;
	padding:5px 3px 4px 5px;
	font-size: 12px;
	background:#A34154;
	color:#FFF;
	}
#matome p {
	float:none;
	width:100%;
	margin:0;
	padding:5px 10px 1px 0;
	font-size:1em;
	background:#fff;
	text-align:right;
	font-weight:bold;
	color:#A34154;
	}
#matome h5{
	text-align:right;
	margin:0 0 10px 0;
	padding:0;
	font-size:12px;
	}
#matome div{
	margin-bottom:5px;
	}
	
#matome .bloglist {
	text-align:left;
	}

/* ----------------- オフィスデリバリー ----------------- */ 


#formbana li {
	margin: 0 auto;
	margin-top: 30px;
	 }

#delivery h2{ text-align:center; }
#delivery h3{
	font-size:1em;
	text-align:center; 
	 }
#delivery h3 a {
    background-color:#ffd786;
    border:solid 1px #ff3366;
    color: #ff3366;
}
#delivery li{
	  width: 100%;
	  height:auto;
	  }

}


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

#columnleft dl{}
#columnleft dt{
    float:right;
    padding:5px;
	margin:5px 0 0 5px;
	padding:0;
    }
#columnleft dd {
	margin:0 5px;
	padding:5px;
	}

#columnright { width:100%; }

.freelink {
	width:90%;
	margin:10px auto 0; }
	

}

@media screen and (max-width: 600px) {
	
#columnleft dt{ width:18%; }

/* -- メッセージ枠 -- */

	.msg { margin:0 0 5px; }
	.mla {}

#columnleft .bndel { margin:5px 0 0 0; }

#columnright h6 a:hover {
    background-image:url(images/btn_blog-ro.png);
    -moz-background-size:contain;
	background-size:contain;
   }

}

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

#columnleft h6 { max-width:220px; }

#delivery .sttl { text-align:center; }
#delivery h3 {
	width:100%;
	text-align:center;
	}


}

/* ------------------------------------------------------------------------------------------------------ FMKラベル */

.fmklbl {
	width: 100%;
}
    
.fmklbl ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}
        
.fmklbl ul li {
    margin: 0;
    padding: 0;
}

.fmklbl ul li a {
    display: block;
    text-align: center;
    font-size: 12.8px;
    line-height: 40px;
    color: #333;
}
            
@media screen and (max-width: 1024px) {
                
.fmklbl ul li a:nth-child(1) a {
    background-color: #ccc;
}

.fmklbl ul li a:nth-child(2) a {
    background-color: #bbb;
}
                
} /* max 1024px -- */


@media screen and (min-width: 1025px) {
    
.fmklbl {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 30px;
    background-color: #252525;
    background-image: url("../../../../common/img_fmklogo.png");
    background-position: 15px center;
    background-repeat: no-repeat;
}
        
.fmklbl ul {
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
}
            
.fmklbl ul li a {
    line-height: 30px;
    color: #fff;
}

.fmklbl ul li a:hover {
    background-color: #fc1b1c;
    text-decoration: none;
}

} /* min 1025px -- */



.clearfix:after{
	content: "";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0px;
}
* html .clearfix{display: inline-table;}
/* no ie mac \*/
* html .clearfix{height:1%;}
.clearfix {display: block; min-height:0;}
/* */