@charset "utf-8";
/* CSS Document */


/* -------------------------------- BASE */
*{
	margin:0;
	padding:0;
}

a{
	outline:none;
}
img{
	border:none;
}

html{
}
body{
	background:url(../img/bg01.png) repeat center top;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	line-height:1.5;
	-webkit-text-size-adjust: 100%;
}
#wrap{
	margin:0 auto;
}
#fp-wrap{
	background:url(../img/headerBG.png) repeat-x center top;
}
#fp-contents{
	position:relative;
}


/* -------------------------------- CP */
#cpWrap{
	width:100%;
	white-space:nowrap;
	overflow:hidden;
}
#cpMenu, #cpWrapInner{
	display:inline-block;
	vertical-align:top;
}
#cpWrapInner{
	width:100%;
	padding-bottom:0px;
	white-space:normal;
}


/* -------------------------------- MENU */
#cpMenu{
	width:0px;
	height:100%;
	background:#595959;
	overflow:auto;
}
#cpMenu li{
	border-bottom:solid 4px #353535;
}
#cpMenu a, #cpMenu span{
	display:block;
	height:80px;
	background-image:url(../img/menu.png);
	background-repeat:no-repeat;
	text-indent:-1000em;
	color:#fff;
}
#cpMenu a:hover{opacity:0.75;}
#cpMenu00 a{background-position:0px 0px;}
#cpMenu01 a{background-position:0px -80px;}
#cpMenu02 a{background-position:0px -160px;}
#cpMenu03 a{background-position:0px -240px;}
#cpMenu04 a{background-position:0px -320px;}

#cpMenuC span{background-position:0px -400px;background-color:#353535;}
#cpMenuC01 a{background-position:0px -480px;}
#cpMenuC02 a{background-position:0px -560px;}
#cpMenuC03 a{background-position:0px -640px;}
#cpMenuC04 a{background-position:0px -720px;}
#cpMenuC05 a{background-position:0px -800px;}
#cpMenuC06 a{background-position:0px -880px;}
#cpMenuC07 a{background-position:0px -960px;}
#cpMenuC08 a{background-position:0px -1040px;}
#cpMenuC09 a{background-position:0px -1120px;}
#cpMenuC10 a{background-position:0px -1200px;}
#cpMenuC11 a{background-position:0px -1280px;}
#cpMenuC12 a{background-position:0px -1360px;}
#cpMenuC13 a{background-position:0px -1440px;}
#cpMenuC14 a{background-position:0px -1520px;}
#cpMenuC15 a{background-position:0px -1600px;}
#cpMenuC16 a{background-position:0px -1680px;}
#cpMenuC17 a{background-position:0px -1760px;}
#cpMenuC18 a{background-position:0px -1840px;}
#cpMenuC19 a{background-position:0px -1920px;}
#cpMenuC20 a{background-position:0px -2000px;}
#cpMenuC21 a{background-position:0px -2080px;}
#cpMenuC22 a{background-position:0px -2160px;}
#cpMenuC23 a{background-position:0px -2240px;}
#cpMenuC24 a{background-position:0px -2320px;}
#cpMenuC25 a{background-position:0px -2400px;}
#cpMenuC26 a{background-position:0px -2480px;}
#cpMenuC27 a{background-position:0px -2560px;}
#cpMenuC28 a{background-position:0px -2640px;}
#cpMenuC29 a{background-position:0px -2720px;}
#cpMenuC30 a{background-position:0px -2800px;}
#cpMenuC31 a{background-position:0px -2880px;}
#cpMenuC32 a{background-position:0px -2960px;}
#cpMenuC33 a{background-position:0px -3040px;}
#cpMenuC34 a{background-position:0px -3120px;}
#cpMenuC35 a{background-position:0px -3200px;}
#cpMenuC36 a{background-position:0px -3280px;}
#cpMenuC37 a{background-position:0px -3360px;}
#cpMenuC38 a{background-position:0px -3340px;}
#cpMenuC39 a{background-position:0px -3420px;}
#cpMenuC40 a{background-position:0px -3500px;}


/* PC */
@media screen and (min-width:1000px){
#cpMenu{
	display:block;
	width:auto;
	height:65px;
	margin-bottom:-15px;
	background:transparent;
	overflow:hidden;
	z-index:10;
}
#cpMenu ul{
	display:block;
	text-align:center;
}
#cpMenu li{
	display:inline-block;
	position:relative;
	border-bottom:none;
}
#cpMenu li:after{
	content:"";
	display:block;
	position:absolute;
	top:9px;
	left:-2px;
	width:2px;
	height:48px;
	background-color:#f0678b;
}
#cpMenu li:first-child:after{
	display:none;
}
#cpMenu a{
	display:block;
	height:65px;
	background-image:url(../img/menuPC.png);
	background-repeat:no-repeat;
	text-align:left;
	text-indent:-100em;
	overflow:hidden;
}
#cpMenu01 {width:131px;z-index:11;}
#cpMenu02 {width:130px;z-index:12;}
#cpMenu03 {width:165px;z-index:13;}
#cpMenu04 {width:153px;z-index:14;}
#cpMenu01 a{background-position:0px 0px;}
#cpMenu02 a{background-position:-133px 0px;}
#cpMenu03 a{background-position:-265px 0px;}
#cpMenu04 a{background-position:-432px 0px;}
#cpMenu01 a:hover{background-position:0px -70px;}
#cpMenu02 a:hover{background-position:-133px -70px;}
#cpMenu03 a:hover{background-position:-265px -70px;}
#cpMenu04 a:hover{background-position:-432px -70px;}
}




/* -------------------------------- HEADER */
#cpHeader{
	position:relative;
}
#cpTitle{
	position:relative;
	z-index:1;
}

#btnMenu{
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:76px;
	height:66px;
	background:url(../img/btnMenu.png) no-repeat 5px 0px;
	text-indent:-1000em;
	cursor:pointer;
	z-index:3;
}
#btnMenu:hover{
	background-position:-225px 0px;
}

#blockSNS{
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
}
#blockSNS a{
	display:block;
	position:absolute;
	width:120px;
	height:130px;
	text-indent:-1000em;
}
#blockSNS a:hover{
	background-position:-120px -3px;
}
#blockSNS a.btnTW{
	top:10px;
	left:82px;
	background-image:url(../img/headerTwitterBtn.png);
}
#blockSNS a.btnFB{
	top:10px;
	left:432px;
	background-image:url(../img/headerFacebookBtn.png);
}

a#homeBtn{
	display:block;
	position:absolute;
	top:0px;
	left:200px;
	width:230px;
	height:176px;
	text-indent:-1000em;
	cursor:pointer;
	z-index:4;
}

/* PC */
@media screen and (min-width:1000px){
#btnMenu{
	display:none;
}
}


/* -------------------------------- CONTENTS */
#contents{
	position:relative;
}


/* -------------------------------- CARDS */
.cardList{
	position:relative;
	width:640px;
	overflow:hidden;
	white-space:nowrap;
}
.cardList ul{
	display:inline-block;
	position:relative;
	left:15px;
	width:auto;
	white-space:nowrap;
}
.cardList li{
	display:inline-block;
	position:relative;
	width:168px;
	height:244px;
	margin:0 0px;
	padding:10px 4px 0px 4px;
}
.cardList li a{
	display:block;
}
.cardList li a:hover{
	opacity:0.75;
}
.cardList li img{
	width:100%;
	border-radius:10px;
	box-shadow:0px 1px 3px -1px #000;
}

.cardList li.tagRecommend:after,
.cardList li.tagPopular:after,
.cardList li.tagNanbara:after,
.cardList li.tagJinnai:after,
.cardList li.tagAyabe:after{
	content:'';
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:70px;
	height:82px;
	background-image:url(../img/recomendTags.png);
}
.cardList li.tagRecommend:after{background-position:0px 0px;}
.cardList li.tagPopular:after{background-position:-80px 0px;}
.cardList li.tagNanbara:after{background-position:-160px 0px;}
.cardList li.tagJinnai:after{background-position:-240px 0px;}
.cardList li.tagAyabe:after{background-position:-320px 0px;}


.cardNav{
	display:block;
	position:absolute;
	width:70px;
	height:250px;
	background:url(../img/cardNavBGwhite.png) repeat-y;
	cursor:pointer;
}
.cardNav span{
	display:block;
	width:70px;
	height:250px;
	background:url(../img/cardNavWhite.png) no-repeat;
	text-indent:-1000em;
	opacity:0.75;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
}
.cardNav:hover span{
	opacity:1;
}
.cardList .btnL{
	top:7px;
	left:0px;
	background-position:0% 0%;
}
.cardList .btnR{
	top:7px;
	right:0px;
	background-position:100% 0%;
}
.cardList .btnL span{background-position:0% 50%;}
.cardList .btnR span{background-position:100% 50%;}
.cardList .btnL span:hover{background-position:5% 50%;}
.cardList .btnR span:hover{background-position:95% 50%;}

/* PC */
@media screen and (min-width:1000px){
.cardList li{
	display:inline-block;
	position:relative;
	width:128px;
	height:194px;
	margin:0 0px;
	padding:10px 4px 0px 4px;
}

.cardList li.tagRecommend:after,
.cardList li.tagPopular:after,
.cardList li.tagNanbara:after,
.cardList li.tagJinnai:after,
.cardList li.tagAyabe:after{
	content:'';
	display:block;
	position:absolute;
	top:3px;
	left:1px;
	width:50px;
	height:56px;
	background-image:url(../img/recomendTags.png);
	background-size:auto 56px;
}
.cardList li.tagRecommend:after{background-position:0px 0px;}
.cardList li.tagPopular:after{background-position:-54px 0px;}
.cardList li.tagNanbara:after{background-position:-108px 0px;}
.cardList li.tagJinnai:after{background-position:-162px 0px;}
.cardList li.tagAyabe:after{background-position:-216px 0px;}

.cardNav{
	display:block;
	position:absolute;
	width:50px;
	height:208px;
	background:url(../img/cardNavBGgray.png) repeat-y;
	cursor:pointer;
}
.cardNav span{
	display:block;
	width:50px;
	height:208px;
	background:url(../img/cardNav.png) no-repeat;
	background-size:auto 40px;
	text-indent:-1000em;
	opacity:0.75;
}
.cardList .btnL{
	top:0px;
	left:0px;
	background-position:0% 50%;
}
.cardList .btnR{
	top:0px;
	right:0px;
	background-position:100% 50%;
}
}



/* -------------------------------- SHARE BUTTONS */
.blockShare{
	margin:20px 0;
	text-align:center;
}
.blockShare a{
	display:inline-block;
	width:190px;
	height:100px;
	margin:0 2px;
	background-image:url(../img/btnShare.png);
	background-repeat:no-repeat;
	text-align:left;
	text-indent:-1000em;
}
.blockShare a.shareBtnTwitter	{background-position:0px 5px;}
.blockShare a.shareBtnFacebook{background-position:-198px 5px;}
.blockShare a.shareBtnLINE		{background-position:-396px 5px;}
.blockShare a.shareBtnTwitter:hover	{background-position:0px -94px;}
.blockShare a.shareBtnFacebook:hover{background-position:-198px -94px;}
.blockShare a.shareBtnLINE:hover		{background-position:-396px -94px;}


/* -------------------------------- FOOTER */
body #fp-contents #fp-ftr{
	position:absolute;
	bottom:0px;
	left:0px;
	width:600px;
	margin:30px 0 0 0;
	padding:25px 20px 25px 20px;
	color:#575757;
	font-size:12px;
	letter-spacing:0.1em;
	line-height:1.8;
	white-space:normal;
}
body #fp-contents #fp-ftr a, #cx_gbfooterInner a{
	color:#575757;
	text-decoration:none;
}
body #fp-contents #fp-ftr a:hover, #cx_gbfooterInner a:hover{
	color:#333;
}
#copyRight2{
	text-align:center;
	color:#b8b8b8 !important;
}
#copyRightLogo{
	text-align:center;
	margin:5px;
}
#bgFooter{
	background:url(../img/footerBG.png) repeat-x bottom center;
}

body #cx_gbfooter{
	background-color:rgba(255,255,255,0.5);
}