@charset "utf-8";

/*== reset =========================================================================*/
html,body {
	height: 100%;
}

body,
div,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ul, ol, li,
table, thead, tbody, tfoot, caption, th, td,
p, blockquote, pre,
form, fieldset, legend {
	margin:0;
	padding:0;
	font-size:100%;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary{
	display:block;margin:0;padding:0;
}

body {
	line-height:1;
}

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

h1, h2, h3, h4, h5, h6, strong {
	font-weight:bold;
}

ol, ul, li {
	list-style: none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
	font-size:100%;
}

caption, th {
	text-align:left;
}

img, input {
	vertical-align:middle;
}

abbr, acronym, fieldset, img {
	border:0;
}

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

select, input, textarea {
	font-size:100%;
}

textarea {
	overflow:auto;
}

code, kbd, code, samp {
	font-family:monospace;
}

ins, del {
	display:block;
}

p ins, p del,
ol ins, ol del,
ul ins, ul del,
dl ins, dl del,
table ins, table del {
	display:inline;
}

/*== base =========================================================================*/

/*h1,h2,h3,h4,h5,h6 { font-weight: bold; font-family: 'HiraKakuProN-W6',sans-serif; }*/
h1,h2,h3,h4,h5,h6 { font-weight: normal; }

em { color: #ff0000; font-style: normal; }
strong { font-weight: bold; font-family: 'HiraKakuProN-W6',sans-serif; }

a { color: #ffff00; text-decoration: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
a:visited { color: #ffff00; }
a:hover { color: #ffff00; }
a.tlink { padding-bottom: 3px; border-bottom: #009e96 dashed 2px; }
a[href^=tel]{ color: inherit; text-decoration: none; }

.t-sub { font-size: 77%; }
.t-col1 { color: #ffff00; }
.t-col2 { color: #992617; }
.t-col3 { color: #666; }
.t-normal { font-weight: normal; font-family: 'HiraKakuProN-W3',sans-serif; }
.t-bold { font-weight: bold; font-family: 'HiraKakuProN-W6',sans-serif; }
.t-linethrough { text-decoration: line-through; }
.t-left { text-align: left !important; }
.t-center { text-align: center !important; }
.t-right { text-align: right !important; }
.t-bg1 { display: inline-block; background-color: #ffcdc7; }
.t-bg2 { display: inline-block; background-color: #ff9d91; }
.t-bg3 { display: inline-block; background-color: #ddd; }
.t-narrow1 { letter-spacing: -.05em; }
.t-narrow2 { letter-spacing: -.5em; }

.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inlineblock { display: inline-block; *display: inline; *zoom: 1; }

.p-std { margin-top: 15px; }
.bg-white { background: #fff;}
.hidden { display: none; }
.nowrap { white-space: nowrap; }
.of-hidden { overflow: hidden; }

.f-left { float: left; }
.f-right { float: right; }
.cl-left { clear: left; }
.cl-right { clear: right; }
.cl-both { clear: both; }

.reader {/* for Talking Browser */
	position: absolute;
	overflow: hidden;
	left: 0; top: 0;
	width: 1px; height: 1px;
}

.rounded {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/*== alt-img ==*/
.alt-img {
	display: block;
	overflow: hidden;
	text-indent: 100%; white-space: nowrap;
	background-repeat: no-repeat;
	background-position: 0 0;
	-moz-background-size: auto auto;
	background-size: auto auto;
}
@media print {
	.alt-img {
		height: auto !important;
		background: none !important;
		text-indent: 0; white-space: normal;
	}
}

/*== box-shadow ==*/
.box-shadow {
	box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
	background:#fff;
}

/*== input ==*/
input[type="text"],
input[type="submit"],
textarea {
	-webkit-appearance: none;
	border-radius: 0;
}
/*== radio ==*/
input[type="radio"] {
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    border-radius: 14px;
    border: 2px solid #888888;
    -webkit-box-sizing: border-box;
    width: 28px;
    height: 28px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fdfdfd),
        to(#d1d1d1)
    );
    vertical-align: middle;
}
input[type="radio"]:checked {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#99cc00),
        to(#87b400)
    );
}
input[type="radio"]:checked:before {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    margin: -5px 0 0 -5px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    content: "";
    border-radius: 5px;
    width: 10px;
    height: 10px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fdfdfd),
        to(#d1d1d1)
    );
}

/*== checkbox ==*/
input[type="checkbox"] {
    -webkit-appearance: none;
    border: 2px solid #888888;
    vertical-align: -8px;
    position: relative;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    width: 26px;
    height: 26px;
    /*Other Browser*/
    background: #e2e2e2;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #ffffff),
        color-stop(1.00, #e2e2e2)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #e2e2e2 100%
    );
}
input[type="checkbox"]:checked {
    /*Other Browser*/
    background: #99cc00;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #99cc00),
        color-stop(1.00, #87b400)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #99cc00 0%,
        #87b400 100%
    );
    border: 2px solid #336600;
}
input[type="checkbox"]:checked:before {
    position: absolute;
    left: 1px;
    top: 16px;
    display: block;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    content: "";
    width: 10px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: right center;
}
input[type="checkbox"]:checked:after {
    display: block;
    position: absolute;
    left: 9px;
    top: 16px;
    content: "";
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    width: 16px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(-53deg);
    -webkit-transform-origin: left center;
}

/*== spacing ==*/
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt1em { margin-top: 1em !important; }
.mt2em { margin-top: 2em !important; }
.mt3em { margin-top: 3em !important; }
.mt4em { margin-top: 4em !important; }
.mr0 { margin-right: 0 !important; }
.mr1 { margin-right: 1px !important; }
.mr2 { margin-right: 2px !important; }
.mr5 { margin-right: 5px !important; }
.mr20 { margin-right: 20px !important; }
.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 1px !important; }
.mb2 { margin-bottom: 2px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.ml0 { margin-left: 0 !important; }
.ml1 { margin-left: 1px !important; }
.ml2 { margin-left: 2px !important; }
.ml5 { margin-left: 5px !important; }
.ml20 { margin-left: 20px !important; }

/*== clearfix ==*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/*== debug ==*/
#debug { position: fixed; left: 0; top: 0; z-index: 99999; width: auto; height: auto; padding: 5px; background: #111; font-size: .77rem; color: #fff; }

/*== site format =========================================================================*/

html {
	font-family: 'HiraKakuProN-W6',sans-serif;
	font-size: 62.5%;/*10px*/
}

body {
	width: 100%; height: auto;
	background: #000;
	color: #FFF; font-size: 1.75rem; line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

#wrapper {
	position: relative;
	width: 640px; min-width: 640px;	overflow: hidden;
	margin: 0 auto;
}

/* header */
#header {
	width:100%;
	background: #000;
	position:fixed;
	left: 0;
	top:0;
	height:auto;
	z-index:1002;
}
#header.noFixed {
	width:100%;
	background: #000;
	position:absolute!important;
	left: 0!important;
	top:0!important;
	height:auto;
	z-index:1002;
}
#header .inner {
	width:640px;;
	margin:0 auto;
	position:relative;
	background: #000;
	height:auto;
	z-index:1004;
}

#gnavi-toggle-btn {
	float:left;
	z-index:1001;
	position:relative;
}
#gnavi-toggle-btn a {
	width: 170px; height: 100px;
	background: url(../../images/common/gnavi_btn.png) no-repeat left top;
}
#gnavi-toggle-btn a.active {
	background-position: 0 -100px;
}
#h-kyoraku-logo{
	float:right;
	z-index:1001;
	position:relative;
}
#h-kyoraku-logo a {
	width: 206px; height: 100px;
	background: url(../../images/common/logo.png) no-repeat left top;
}


#gnavi {
	display: none;
	position: fixed;
	left: 0; top: 0; z-index: 1000;
	width: 100%; height: height: 500px; ; overflow: auto;
	background-color: #000;
}
#gnavi-inner {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	background-color: #000;
	padding:100px 0 200px;
	z-index: 10000;
}
#gnavi .na {
	opacity: .3;
}
#gnavi .current {
	opacity: .3;
}
#gnavi .na a {
	cursor: default;
}

#gnavi-inner ul {
	width:640px;
	margin:0 auto;
}

#gnavi-inner ul li a{
	display: block;
	overflow: hidden;
	text-indent: 100%; white-space: nowrap;
	background-repeat: no-repeat;
	background-position: 0 0;
	-moz-background-size: auto auto;
	background-size: auto auto;
	border-bottom:2px solid #333333; 
	width:640px; height:98px;
}
#gnavi-inner ul li:first-child a{ border-bottom:2px solid #333333; border-top:2px solid #333333; }
#gnavi-inner ul li.top a{ background:url(../../images/common/gnavi_top.png) no-repeat; }
#gnavi-inner ul li.pv a{ background:url(../../images/common/gnavi_pv_def.png) no-repeat; }
#gnavi-inner ul li.pv a.active{ background:url(../../images/common/gnavi_pv_ov.png) no-repeat; }
#gnavi-inner ul li ul li.pv00_1 a{ background:url(../../images/common/gnavi_pv_00_2.png) no-repeat; border-top:none; }
#gnavi-inner ul li ul li.pv00_2 a{ background:url(../../images/common/gnavi_pv_00_1.png) no-repeat; }
#gnavi-inner ul li ul li.pv01 a{ background:url(../../images/common/gnavi_pv_01.png) no-repeat; }
#gnavi-inner ul li ul li.pv02 a{ background:url(../../images/common/gnavi_pv_02.png) no-repeat; }
#gnavi-inner ul li ul li.pv03 a{ background:url(../../images/common/gnavi_pv_03.png) no-repeat; }
#gnavi-inner ul li.movie a{  background:url(../../images/common/gnavi_movie_def.png) no-repeat; }
#gnavi-inner ul li.movie a.active{  background:url(../../images/common/gnavi_movie_ov.png) no-repeat; }
#gnavi-inner ul li.movie ul li.pv a{  background:url(../../images/common/gnavi_movie_pv.png) no-repeat; border-top:none; }
#gnavi-inner ul li.movie ul li.rv a{  background:url(../../images/common/gnavi_movie_rv.png) no-repeat; }
#gnavi-inner ul li.feature a{ background:url(../../images/common/gnavi_feature.png) no-repeat; }
#gnavi-inner ul li.music a{ background:url(../../images/common/gnavi_music.png) no-repeat; }
#gnavi-inner ul li.gabu_top a{ background:url(../../images/common/gnavi_gabu.png) no-repeat; }
#gnavi-inner ul li.gabu a{ background:url(../../images/common/gnavi_gabu_def.png) no-repeat; }
#gnavi-inner ul li.gabu a.active{ background:url(../../images/common/gnavi_gabu_ov.png) no-repeat; }
#gnavi-inner ul li.gabu ul li.anime a{  background:url(../../images/common/gnavi_gabu_anime.png) no-repeat; border-top:none; }
#gnavi-inner ul li.gabu ul li.appli a{  background:url(../../images/common/gnavi_gabu_appli.png) no-repeat; }
#gnavi-inner ul li.gabu ul li.line a{  background:url(../../images/common/gnavi_gabu_line.png) no-repeat; }
#gnavi-inner ul li.gabu ul li.mascot a{  background:url(../../images/common/gnavi_gabu_mascot.png) no-repeat; }
#gnavi-inner ul li.about a{ background:url(../../images/common/gnavi_about.png) no-repeat; }
#gnavi-inner ul li.news a{ background:url(../../images/common/gnavi_news.png) no-repeat; }
#gnavi-inner ul li.niconico a{ background:url(../../images/common/gnavi_niconico.png) no-repeat; }

#gnavi-inner ul li.product_top a{ background:url(../../images/common/gnavi_product.png) no-repeat; }
#gnavi-inner ul li.product a{ background:url(../../images/common/gnavi_product_def.png) no-repeat; }
#gnavi-inner ul li.product a.active{ background:url(../../images/common/gnavi_product_ov.png) no-repeat; }
#gnavi-inner ul li.product ul li.spec a{  background:url(../../images/common/gnavi_product_spec.png) no-repeat; border-top:none; }
#gnavi-inner ul li.product ul li.featureSec a{  background:url(../../images/common/gnavi_product_feature.png) no-repeat;  }
#gnavi-inner ul li.product ul li.rtc a{  background:url(../../images/common/gnavi_product_rtc.png) no-repeat; }
#gnavi-inner ul li.product ul li.point a{  background:url(../../images/common/gnavi_product_point.png) no-repeat; }
#gnavi-inner ul li.product ul li.flow a{  background:url(../../images/common/gnavi_product_flow.png) no-repeat; }
#gnavi-inner ul li.product ul li.action a{  background:url(../../images/common/gnavi_product_action.png) no-repeat; }
#gnavi-inner ul li.product ul li.guide a{  background:url(../../images/common/gnavi_product_guide.png) no-repeat; }
#gnavi-inner ul li.product ul li.premium a{  background:url(../../images/common/gnavi_product_premium.png) no-repeat; }
#gnavi-inner ul li.product ul li.shittoku a{  background:url(../../images/common/gnavi_product_shittoku.png) no-repeat; }

#gnavi-inner ul li.special a{ background:url(../../images/common/gnavi_special_def.png) no-repeat; }
#gnavi-inner ul li.special a.active{ background:url(../../images/common/gnavi_special_ov.png) no-repeat; }
#gnavi-inner ul li.special ul li.gake a{  background:url(../../images/common/gnavi_special_gake.png) no-repeat; border-top:none; }
#gnavi-inner ul li.special ul li.ganmi a{  background:url(../../images/common/gnavi_special_ganmi.png) no-repeat; }

#gnavi-inner ul li.live a{ background:url(../../images/common/gnavi_live.png) no-repeat; }
#gnavi-inner ul li.search a{ background:url(../../images/common/gnavi_search.png) no-repeat; }

.banner01 a{
	background:url(../../images/common/banner01_top.png) no-repeat left top;
	width:640px;
	height:80px;
	margin: 0 auto 10px;
}


/* body */
#contents {
	width: 640px;
	padding-top: 100px;
	margin: 0 auto;
	position:relative;
}
#contents #foot_anchor {
	height:100%;
	position:absolute;
	left:0;
	bottom:-100px;
	z-index:-1;
	display:block;
}
/* Android 標準ブラウザ viewport バグ対策 */
#body p,
#body h1,
#body h2,
#body h3,
#body h4,
#body dl,
#body li {
	background-image: url('../images/1x1-transparent.png');
}

#store_area {
	width:640px;
	height:54px;
	margin:0 auto;
	padding:18px 0;
	position: relative;
	background: url(../../images/top/text_search.png) no-repeat left 18px;
	border-top: 2px solid #333;
}

#form_area {
	padding:0;
	margin-left: 166px;
	width: 280px;
	display:table;
}

#form_area select {
	width: 280px;
	vertical-align:middle;
	display:table-cell;
	height:54px;
	font-size:16px;
	}

#store_area .search_btn {
	position:absolute;
	top:18px;
	right:20px; 
	width:155px;
	height: 55px;
	margin: 0;
	text-align:center;
	z-index: 10;
 }

#store_area .search_btn .s_btn {
	background-color:transparent;
	border: none;
}

#store_area button {
	padding:0;
}

/* footer */
#footer {
	padding:20px 0;
	color: #fff;
	text-align: center;
	font-size:1.2rem;
	border-top:2px solid #333;
}
#footer small {
	padding-top: 20px;
}

#footer #copyright{
	padding: 20px;
}

.note {
	font-size: 2.0rem
}

.jasrac{
	margin:10px 0 5px;
}

/* FlexSlider Default Theme
*********************************/
.flexslider.banner { 
	height:80px;
	z-index:1;
 }

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider.banner a:active,
.flex-container a:focus,
.flexslider.banner a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none; } 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider.banner {margin: 0; padding: 0; width:640px; margin:0 auto;}
.flexslider.banner .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider.banner .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider.banner {margin: 0 ; background: #000;  position: relative; zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider.banner .slides {zoom: 1;}
.flexslider.banner .slides li { height:auto; width:auto;}
.flexslider.banner .slides li a { height:80px!important; }
.carousel li {margin-right: 5px}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 60px!important; height: 60px!important; margin: -30px 0 0; display: block; background: url(../images/top/bg_direction_nav.png) no-repeat 0 0; background-size:120px 60px; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; margin-right:0; right:-30px; }
.flex-direction-nav .flex-prev {margin-left:0; left:-30px;}
.flexslider:hover .flex-next {opacity: 0.8;}
.flexslider:hover .flex-prev {opacity: 0.8;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center; background:none;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

.flexslider.banner li a { border:none!important;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1;}
  .flex-direction-nav .flex-next {opacity: 1;}
}