@charset "shift_jis";

/* ==============================================================================
    CSS for touch-screen : common.css
============================================================================== */

/* ----------------------------------------------------------
  Common Settings : css-reset
---------------------------------------------------------- */
html{
font-family: "MS PGothic","Osaka","sans-serif";
overflow-y:scroll;
-webkit-text-size-adjust:none;
}

body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,form,fieldset,legend,input,textarea,pre,code,blockquote,th,td{
margin:0;
padding:0;
}

div,h2,h3,h4,h5,h6,p,li,dt,dd,pre,code,blockquote,th,td{
word-break:break-all;
}

br{
letter-spacing:0;
}

fieldset,img{
border:0;
}

li{
list-style:none;
}

caption,th{
text-align:left;
}

h1,h2,h3,h4,h5,h6,th{
font-size:100%;
font-weight:normal;
font-style:normal;
}

input,textarea,select{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
color:#333;
}

input[type="submit"]{
cursor:pointer;
}

select{
background-color:#ffffff !important;
}

address,caption,cite,code,dfn,var{
font-style:normal;
font-weight:normal;
}

abbr,acronym{
border:0;
font-variant:normal;
}

del,u{
text-decoration:none;
}

@-webkit-keyframes mycolor{
	0%	{color: rgba(255,255,255,0);}
	40%	{color: #ff0000;}
	60%	{color: #ff0000;}
	100%{color: rgba(255,255,255,0);}
}

.new{
	font-size		: 15px;
	letter-spacing	: -0.1em;
	-webkit-animation-name: mycolor;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count:infinite;
}


/*=================================================
 * all
 * ================================================= */

body{
	color			: #333333;
	background		: #ffffff;
	letter-spacing	: 0.00em;
	font-size		: 14px;
	*font-size		: 78%;
	line-height		: 22px;
	font-family		: sans-serif;
}

em{
	font-style		: normal;
}

a,a:hover{
	color			: #168fbe;
	text-decoration	: none;
}


/*=================================================
 * CSS MAIN
 * ================================================= */

body{
	color			: #333333;
	background-color: #fff;
	letter-spacing	: 0.00em;
	font-size		: 14px;
	*font-size		: 78%;
	line-height		: 22px;
	font-family		: Meiryo,"MS PGothic",Osaka,sans-serif;
	overflow: hidden;
	width: 100%;
	position: relative;
}

body::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-color: #fff;
}

em{
	font-style		: normal;
}

a,a:hover{
	color			: #ff0099;
	text-decoration	: none;
}

header{
	width			: 100%;
	position		: relative;
	background: url(../img/index/main.png) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}

header h1{
	font-size: 11px;
	font-weight: normal;
	line-height: 20px;
	position: absolute;
	top: -20px;
	left: 0;
}

header .enter{
	width: 100%;
	position: absolute;
	bottom: 50px;
	left: 0;
	padding: 10px 10px 0 10px;
	background: rgba(255,255,255,0.9);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

header .enter a{
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 48px;
	padding: 10px 0;
	text-align: center;
	color: #fff;
	border: 1px solid #ff2697;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	box-shadow:0px 0px 0px 1px #ff62b3 inset;
	-moz-box-shadow:0px 0px 0px 1px #ff62b3 inset;
	-webkit-box-shadow:0px 0px 0px 1px #ff62b3 inset;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff46a6+0,ff2798+100 */
	background: #ff46a6; /* Old browsers */
	background: -moz-linear-gradient(top,  #ff46a6 0%, #ff2798 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ff46a6 0%,#ff2798 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ff46a6 0%,#ff2798 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff46a6', endColorstr='#ff2798',GradientType=0 ); /* IE6-9 */
}

header .enter p{
	font-size: 11px;
	line-height: 35px;
	text-align: center;
}


/** main **/

main{
	background: #fff;
}

.bt_sub{
	padding: 10px 0;
}

.bt_sub span{
	display: inline-block;
	width: 50%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.bt_sub span a{
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 38px;
	text-align: center;
	border-radius: 3px;
}

.bt_sub span:nth-child(1){	padding: 0 5px 0 10px;}
.bt_sub span:nth-child(2){	padding: 0 10px 0 5px;}

.bt_sub span:nth-child(1) a{
	color: #fff;
    border: 1px solid #ccc;
    background: #871f24;
    background: linear-gradient(to bottom, #b9383d 0%,#871f24 100%);
}

.bt_sub span:nth-child(2) a{
	color: #fff;
	border: 1px solid #333;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
	box-shadow:0px 0px 0px 1px #636363 inset;
	-moz-box-shadow:0px 0px 0px 1px #636363 inset;
	-webkit-box-shadow:0px 0px 0px 1px #636363 inset;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#505050+0,343434+100 */
	background: #505050; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%,#ececec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ececec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#ececec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#343434',GradientType=0 ); /* IE6-9 */
}

.count{
	font-size: 12px;
	line-height: 30px;
	color: #fff;
	text-align: center;
	background: #222;
}

.info{
	padding: 10px;
	background: -webkit-gradient(linear, left top, right bottom, from(#ececec), color-stop(0.25, #ececec), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, #ececec), color-stop(0.75, #ececec), color-stop(0.75, white), to(white));
	background: -moz-linear-gradient(-45deg, #ececec 25%, white 25%, white 50%, #ececec 50%, #ececec 75%, white 75%, white);
	background: linear-gradient(-45deg, #ececec 25%, white 25%, white 50%, #ececec 50%, #ececec 75%, white 75%, white);
	-webkit-background-size: 2px 2px;
	background-size: 2px 2px;
}

.info p{
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	padding: 0 5px;
}


/** cover_link **/

.cover_link{
	display: inline-block;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	padding-top: 20px;
	position: absolute;
	top: -15px;
	right: -8px;
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.cover_link:hover{
	color: #fff;
	text-decoration: none;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

.cover_link h3{
	display: inline-block;
	font-size: 10px;
	font-weight: normal;
	line-height: 14px;
	padding: 2px 0 0px 0;
}

.cover_link div{
	font-size: 13px;
	font-weight: bold;
	line-height: 18px;
	padding: 0 0 4px 0;
}

.cover_link p{
	display: inline-block;
	font-size: 9px;
	line-height: 10px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 2px;
	padding: 2px;
}

.cover_link.a_deli{	background-color: rgba(2,169,2,0.8);}
.cover_link.a_soap{	background-color: rgba(0,102,255,0.8);}
.cover_link.a_health{	background-color: rgba(215,143,3,0.8);}
.cover_link.a_deli p{	color: #02a902;}
.cover_link.a_soap p{	color: #0066ff;}
.cover_link.a_health p{	color: #d78f03;}


/** nav fucolle group link **/

nav{
	font-size: 0;
	line-height: 0;
	background: #fff;
}

.index_link_title{
	height			: 46px;
	margin			: 0 0 10px 0;
	background		: url(../img/index/index_link_bg.png) repeat-x top left;
	background-size	: 320px 46px;
}

.index_link_title h2{
	height			: 46px;
	text-indent		: -9999px;
	background		: url(../img/index/index_link.png) no-repeat;
	background-size	: 320px 46px;
}

.index_link{
	padding			: 0 0 6px 0;
	border-bottom	: 1px dotted #cccccc;
}

.index_link:after{
	content			: "";
	display			: block;
	clear			: both;
}

.index_link div{
	display			: block;
	width			: 50%;
	float			: left;
}

.index_link div a{
	color			: #333333;
	display			: block;
	margin			: 0 2px 4px 2px;
	border			: 1px solid #cccccc;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}

.index_link div:nth-child(odd) a{
	margin			: 0 2px 4px 5px;
}

.index_link div:nth-child(even) a{
	margin			: 0 5px 4px 2px;
}

.index_link div a span{
	display			: block;
	font-size		: 14px;
	line-height		: 15px;
	border			: 1px solid #ffffff;
	padding			: 7px 0 7px 5px;
	background		: url(http://www.fucolle.com/ipn/img/arrow.gif) no-repeat 100% 50%;
	background-size	: 14px 10px;
}

.index_link div a span em{
	display			: inline-block;
	font-size		: 10px;
	line-height		: 12px;
	color			: #ff3399;
}


/** aside fgb **/

aside{
	background: #fff;
	padding: 10px 0 0 0;
}

.fgb{
	font-size: 0;
	line-height: 0;
	text-align: center;
	padding: 0 0 5px 0;
}

.index_bnr{
	font-size		: 0;
	line-height		: 0;
	text-align		: center;
	padding			: 0 0 6px 0;
}

.index_bnr a{
	display			: inline-block;
	margin			: 0 0 5px 0;
}


/** footer **/

footer{
	font-size		: 12px;
	line-height		: 16px;
	border-top		: 3px double #cccccc;
	text-align		: center;
	color			: #ccc;
	padding			: 5px 0 0 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(50%, #ffffff), to(#e4e4e4));
}

footer a{	color: #333333;}
footer address{	color: #666666;}
footer address a{	color: #666666;}
footer span{	color: #333333;}

footer div{
	border-top		: 1px solid #cccccc;
	padding			: 0 0 0 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#c0c0c0), to(#e4e4e4));
}
footer div p{
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ececec), color-stop(30%, #c0c0c0), to(#c0c0c0));
	border-top		: 1px solid #ffffff;
	padding			: 10px 0 7px;
}


/***************************************
GOOGLE FONT
****************************************/

@font-face {
	font-family: FontA;
	src: url('../font/OpenSans-Regular.ttf') format("truetype");
}

h2.title em,
main .ebox_r .point p{
	font-family: FontA;
}