@charset "UTF-8";
/* /fcroman/cp/2015-newyear/design/css/style.css */

html,body,#contents{
	width: 100%;
	height: 100%;
	background: none;
}
body{
	overflow-x: hidden;
	background: url(../img/bg.jpg) fixed;
}
/*loading*/
#loader {
	width: 16px;
	height: 16px;
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
	z-index: 100;
}
#fade {
	width: 100%;
	height: 100%;
	display: none;
	background-color: #000;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 50;
}

a:hover img{
	filter: alpha(opacity=60);
	opacity: 0.6;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-ms-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	transition-timing-function: linear;
}

/******************************************************************************
contents
******************************************************************************/
#contents{
}
/*------------------------------*/
/*ttl*/
/*------------------------------*/
#contents #ttl{
	position: relative;
	z-index: 0;
	width: 100%;
}
#contents #ttl .inner{
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -250px;
	background: url(../img/tree-right.png) no-repeat right 60px;		
}
#contents #ttl .inner2{
	background: url(../img/tree-left.png) no-repeat left 60px;		
}
#contents #ttl h1{
	margin-bottom: 30px;
	text-align: center;
}
#contents #ttl p{
	text-align: center;
}
/*bg*/
#contents #ttl .bg{
	z-index: 0;
	position: absolute;
	width: 100%;
	height: 1500px;
	background: url(../img/flower.png) left top no-repeat fixed;
}
/*------------------------------*/
/*mv*/
/*------------------------------*/
#mv{
	margin-bottom: 80px;	
}
#mv p img{
	width: 100%;
	height: auto;
}
/*------------------------------*/
/*karuta*/
/*------------------------------*/
#karuta{
	z-index: 2;
   margin: 0 auto 40px;	
}
#karuta li{
	position:relative;
	width:200px;
	height:230px;
	margin:10px;
	background: #000;
	-moz-box-shadow: 0px 0px 6px #806e15; 
	-webkit-box-shadow: 0px 0px 6px #806e15;
}
#karuta li:hover{
	cursor:pointer;
	filter: alpha(opacity=60);
	opacity: 0.6;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-ms-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	transition-timing-function: linear;
}
#karuta li.active{
	width:420px;
	height:480px;
	z-index:200;
	filter: alpha(opacity=100);
	opacity: 1;
}
/*bg*/
#karuta li .bg{
	position:relative;
	width:200px;
	height:230px;
	transition:0.3s;
	-moz-transition:0.3s;
	-webkit-transition:0.3s;
	-o-transition:0.3s;
	-ms-transition:0.3s;
}
#karuta li.active .bg{
	width:420px;
	height:480px;
}
/*c1*/
#karuta li .bg .c1{
	visibility:visible;
	opacity:10;
	transition:0.3s;
	-moz-transition:0.3s;
	-webkit-transition:0.3s;
	-o-transition:0.3s;
	-ms-transition:0.3s;
	position:relative;
	width: 100%;
	height: 100%;
}
#karuta li.active .bg .c1{
	visibility: hidden;
	opacity:0;
}
#karuta li .bg .c1 h2{
	transition:0.5s;
	-moz-transition:0.5s;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
	-ms-transition:0.5s;
	background: url(../img/bg-kana.png) no-repeat left top;		
	color: #000;
	display: inline-block;
	font-size: 2.2em;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	text-align: center;
	vertical-align: middle;
	width: 50px;
	line-height: 50px;
	position: absolute;
	top: 10px;
	left: 10px;
}
#karuta li:hover .bg .c1 p{
	background:#000;
	color:#FFF;
}
#karuta li .bg .c1 div{
	position:absolute;
	width:100%;
	height:100%;
	background:#FFF;
	opacity:0.7;
	transition:0.5;
	-moz-transition:0.5s;
	-webkit-transition:0.5s;
	-o-transition:0.5s;
	-ms-transition:0.5s;
}
/*c2*/
#karuta li .bg .c2 div{
	visibility: hidden;
	opacity:0;
	transition:0.3s;
	position: absolute;
	bottom:0px;
	height:auto;
	background:#000;
	width:100%;
	text-align:center;
	color:#fff;
	padding: 10px 0;
}

#karuta li.active .bg .c2 div{
	visibility:visible;
	opacity:1.0;
}
#karuta li .bg .c2 div h3{
	color: #000;
	display: inline-block;
	background: url(../img/bg-kana.png) no-repeat left top;		
	font-size: 2.2em;
	font-family: "ヒラギノ明朝 Pro W3", "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", serif;
	text-align: center;
	vertical-align: middle;
	width: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	position: absolute;
	top: -20px;
	left: 10px;
}
#karuta li .bg .c2 div p{
	font-size: 1.4em;
	line-height: 1.5;
}
/*background*/
#karuta li.active .bg{
	background-size: cover;
}
#karuta .block-a{background: url(../img/bg-a.jpg) no-repeat center center;}
#karuta .block-i{background: url(../img/bg-i.jpg) no-repeat center center;}
#karuta .block-u{background: url(../img/bg-u.jpg) no-repeat center center;}
#karuta .block-e{background: url(../img/bg-e.jpg) no-repeat center center;}
#karuta .block-o{background: url(../img/bg-o.jpg) no-repeat center center;}

#karuta .block-ka{background: url(../img/bg-ka.jpg) no-repeat center center;}
#karuta .block-ki{background: url(../img/bg-ki.jpg) no-repeat center center;}
#karuta .block-ku{background: url(../img/bg-ku.jpg) no-repeat center center;}
#karuta .block-ke{background: url(../img/bg-ke.jpg) no-repeat center center;}
#karuta .block-ko{background: url(../img/bg-ko.jpg) no-repeat center center;}

#karuta .block-sa{background: url(../img/bg-sa.jpg) no-repeat center center;}
#karuta .block-si{background: url(../img/bg-si.jpg) no-repeat center center;}
#karuta .block-su{background: url(../img/bg-su.jpg) no-repeat center center;}
#karuta .block-se{background: url(../img/bg-se.jpg) no-repeat center center;}
#karuta .block-so{background: url(../img/bg-so.jpg) no-repeat center center;}

#karuta .block-ta{background: url(../img/bg-ta.jpg) no-repeat center center;}
#karuta .block-ti{background: url(../img/bg-ti.jpg) no-repeat center center;}
#karuta .block-tu{background: url(../img/bg-tu.jpg) no-repeat center center;}
#karuta .block-te{background: url(../img/bg-te.jpg) no-repeat center center;}
#karuta .block-to{background: url(../img/bg-to.jpg) no-repeat center center;}

#karuta .block-na{background: url(../img/bg-na.jpg) no-repeat center center;}
#karuta .block-ni{background: url(../img/bg-ni.jpg) no-repeat center center;}
#karuta .block-nu{background: url(../img/bg-nu.jpg) no-repeat center center;}
#karuta .block-ne{background: url(../img/bg-ne.jpg) no-repeat center center;}
#karuta .block-no{background: url(../img/bg-no.jpg) no-repeat center center;}

#karuta .block-ha{background: url(../img/bg-ha.jpg) no-repeat center center;}
#karuta .block-hi{background: url(../img/bg-hi.jpg) no-repeat center center;}
#karuta .block-hu{background: url(../img/bg-hu.jpg) no-repeat center center;}
#karuta .block-he{background: url(../img/bg-he.jpg) no-repeat center center;}
#karuta .block-ho{background: url(../img/bg-ho.jpg) no-repeat center center;}

#karuta .block-ma{background: url(../img/bg-ma.jpg) no-repeat center center;}
#karuta .block-mi{background: url(../img/bg-mi.jpg) no-repeat center center;}
#karuta .block-mu{background: url(../img/bg-mu.jpg) no-repeat center center;}
#karuta .block-me{background: url(../img/bg-me.jpg) no-repeat center center;}
#karuta .block-mo{background: url(../img/bg-mo.jpg) no-repeat center center;}

#karuta .block-ya{background: url(../img/bg-ya.jpg) no-repeat center center;}
#karuta .block-yu{background: url(../img/bg-yu.jpg) no-repeat center center;}
#karuta .block-yo{background: url(../img/bg-yo.jpg) no-repeat center center;}

#karuta .block-ra{background: url(../img/bg-ra.jpg) no-repeat center center;}
#karuta .block-ri{background: url(../img/bg-ri.jpg) no-repeat center center;}
#karuta .block-ru{background: url(../img/bg-ru.jpg) no-repeat center center;}
#karuta .block-re{background: url(../img/bg-re.jpg) no-repeat center center;}
#karuta .block-ro{background: url(../img/bg-ro.jpg) no-repeat center center;}

#karuta .block-wa{background: url(../img/bg-wa.jpg) no-repeat center center;}
#karuta .block-wo{background: url(../img/bg-wo.jpg) no-repeat center center;}
#karuta .block-n{background: url(../img/bg-n.jpg) no-repeat center center;}


/*------------------------------*/
/*logo-btm*/
/*------------------------------*/
#logo-btm{
	text-align: center;
	padding-bottom: 50px;
}


/******************************************************************************
footer
******************************************************************************/
#footer{
	z-index: 100;
	width: 100%;
	position: fixed;
	bottom: 0;
	text-align: center;
	color: #000;
	font-size: 1.1em;
	padding: 50px 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	background: url(../img/bg-repeat.gif) repeat-x left bottom;
	}
#footer ul{
	margin-bottom: 10px;
	}
#footer ul li{
	display: inline;
	}
#footer ul li a{
	color: #000;
	}
#footer ul li a:hover{
	filter: alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity: 0.7;
	}
#footer address{
	}


/******************************************************************************
bt-social
******************************************************************************/
ul.bt-social{
	position: absolute;
	top: 20px;
	right: 20px;
	overflow: hidden;
	}
ul.bt-social li{
	float: left;
	}
.twitter-share-button{
	width: 90px!important;
	}