@charset "UTF-8";


/*--------------------------------------------------
	＜ローカルナビゲーション＞（PC）
--------------------------------------------------*/

@media screen and (min-width: 641px) {
	.local_navigation .logo {
		display: block;
		width: 228px; /* ロゴ画像の幅の1/2に合わせる */
		height: 25px; /* ロゴ画像の高さの1/2に合わせる */
		background: url(../images/logo_shv44.png) center center no-repeat; /* ロゴ画像のパスを指定する */
		background-size: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-indent: 100%;
	}
	/* 暫定版*/
	.local_navigation.zan ul:after{
		content:"";
		display:table-cell;
		width:40%; /* 右側の余白 ロゴサイズに合わせて調整する */
	}
}

/*--------------------------------------------------
	＜ローカルナビゲーション＞（SP）
--------------------------------------------------*/
.local_navigation {
	z-index: 1000;
}
.local_navigation img {
	max-width: 338px; /* 338px固定（360px内での最大値） */
	height:25px; /* 固定 変更する場合はPadding調整要 */
}
@media screen and (max-width: 640px) {
	.local_navigation ul {
		height: auto;
		overflow: hidden;
		background: url(/products/k-tai_d_common_v3/images/dot_e6e6e6.png) center center repeat-x;
		width: auto;
    	margin-left: -1px;
	}
	.local_navigation ul li {
		float: left;
		box-sizing: border-box;
	}
	.container .local_navigation ul li a {
		width:auto;
		
	    border-left: 1px solid #e6e6e6;
	}
	
	/* Padding調整 */
	.local_navigation p {
		padding: 16px 10px 11px 12px; /* 上+下+高さで52pxにする */
		width: auto !important;
	}
	/* 暫定版*/
	.local_navigation.zan ul{
		background:none;
	}
	.kv > .local_navigation.zan + img.cover {margin-top: 89px;}
	/*.kv { min-height: 89px; }*/
}
@media screen and (max-width: 500px) {
	.container .local_navigation ul li a {
		padding:0 11px;
	}
}
@media screen and (min-width: 501px) and (max-width: 640px) {
	.container .local_navigation ul li a {
		padding:0 24px;
	}
}
	
/* ページ下部ナビ（前／次）表示エリア調整 */
@media screen and (max-width: 640px) {
	.prev_next_link p.next a {
		padding: 0 0 0 30px;
	}
	.prev_next_link p.prev a {
		padding: 0 30px 0 0;
	}
}

/*--------------------------------------------------
	機種別カスタマイズ 黒
--------------------------------------------------*/

/* 黒化共通 */
.container.bg_bk {
	background-color:#222;
	color:#fff;
}

.container.bg_bk .section.bk_w1200 {
	max-width:1200px;
	margin-right:auto;
	margin-left:auto;
	padding:60px 0;
	background-color:#333;
}
.container.bg_bk ruby rt, ruby rp {
    color: #ddd;
}

.container.bg_bk .prev_next_link p a {
	color:#fff
}

.container.bg_bk .containerFooter .shopLink {
	z-index:5;
	position:relative;
}

.container.bg_bk .containerFooter .supportLink {
	background-color:#FFF;
	z-index:4;
}
.container.bg_bk .containerFooter .footer_link {
	background-color:#FFF;
}
.container.bg_bk span.maru {
	background-image:url(/products/k-tai_d_common_v3/images/txt_maru_w.png);
}
.container.bg_bk .nv_pagetop p {
	color:#999;
}
@media screen and (min-width: 641px) {
	.container.bg_bk .kv img.cover {margin-top:56px;vertical-align: top}
	.container.bg_bk .shopLink a .shop:after {
		top: 21px;
	}
}
@media screen and (max-width: 640px) {
	.container.bg_bk .section.bk_w1200 {
		padding:20px 0;
		background: linear-gradient(to bottom, #2a2a2a 0%, transparent 100px); 
	}
	.container.bg_bk .breadcrumb-nav {
		background-color:#FFF;
	}
	.container.bg_bk .shopLink a .shop p:after {
		top:15px;
	
	}
	.container.bg_bk .wh .btn,
    .container.bg_bk .wh .btn_blank {
        color: #fff;
        border-color: #fff;
    }
	.container.bg_bk .wh {
        color: #fff;
    }
	.container.bg_bk .spec_table .row .col_dtl dl dd {
		color:#ddd;
	}
	.container.bg_bk .nv_pagetop p {
		background-color:#222;
	}
}

/* ピンク板のH4見出し */

.container h4.ttl_pk_frame {
	margin:1em auto 1em;
	font-size: 18px;
}
.container h4.ttl_pk_frame span {
    display:inline-block;
	background-color:#d11e61;
    color: #FFF;
    font-size: 18px;
    padding: 2px 2em;
	margin-right:3px;
	margin-left:3px;
    font-weight: 600;
}
@media screen and (max-width: 640px) {
	.container h4.ttl_pk_frame {
		margin:0 auto 12px;
		font-size: 12px;
	}
	.container h4.ttl_pk_frame span {
		font-size:12px;
		margin-bottom:6px;
	}
}

/*--------------------------------------
        オンラインショップ訴求用CSS     
  --------------------------------------*/

.onlinshop_appeal {
	position:fixed;
	bottom: -80px;
	left:0;
	background-color: #333;
	width: 100%;
	padding-top: 15px;
	height: 65px;
	z-index: 99999;
	color:#fff;
	font-size: 20px;
	min-width: 960px;
}
.onlinshop_appeal a {
	display:inline-block;
	background-color: #fff;
	color:#333;
	text-decoration: none;
	font-size: 18px;
	line-height: 50px;
	padding:0 60px;
	margin-left: 40px;
}
.onlinshop_appeal a:hover {
	opacity:0.8;
}
	/* オンラインショップ訴求リンクある場合の位置調整 */
	.onlinshop_appeal + .nv_pagetop.shiftup a {
		bottom: 85px;
	}
	.onlinshop_appeal + .nv_pagetop.shiftup p {
		bottom: 85px;
	}

@media screen and (max-width: 640px) {
	.onlinshop_appeal {
		bottom: -85px;
		padding-top: 10px;
		height: 75px;
		font-size: 13px;
		min-width:320px;
	}
	.onlinshop_appeal a {
		display:block;
		font-size: 15px;
		line-height: 36px;
		margin: 5px 10px;
	}
		/* オンラインショップ訴求リンクある場合の位置調整 */
		.onlinshop_appeal + .nv_pagetop.shiftup a {
			bottom: 105px;
		}
		.onlinshop_appeal + .nv_pagetop.shiftup p {
			bottom: 85px;
		}
}

/*--------------------------------------
        動画    
  --------------------------------------*/

/* 埋め込みYoutube動画 */

.container .ttl_movie span{
	display:inline-block;
	vertical-align:middle;
}
.container .ttl_movie:before,
.container .ttl_movie:after  {
    content: "";
    display: inline-block;
    border: 1px solid #fff;
    width: 15px;
    height: 60px;
    vertical-align: middle;
}
.container .ttl_movie:before {
    border-right: 0px;
    margin-right: 1em;
}
.container .ttl_movie:after {
    border-left: 0px;
    margin-left: 1em;
}

.container .youtube {
	width:960px;
	height:540px;
	margin:1em auto;
    position: relative;
}
.container .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (max-width: 640px) {
	.container .ttl_movie:before,
	.container .ttl_movie:after  {
		width: 10px;
		height: 40px;
	}
	.container .youtube {
		width:auto;
		margin:1em 0;
		height:0;
		padding-bottom: 56.25%;
	}
}
/* モーダル動画ボタン */
.container .btn_movie {
	text-align: center;
}
.container .btn_movie a {
	display: inline-block;
	color:#fff;
	text-decoration: none;
	border:1px solid; 
	line-height: 1.2;
	padding:1em 2.5em 1em 1.5em;
	border-radius:3em;
	background: url(../images/icon_play.png) no-repeat right 12px center;
	background-size: 24px;
}
.container .btn_movie a:hover {
	opacity: 0.6;
}
@media (max-width: 640px) {
	.container .btn_movie a {
		background-size: 18px;
		background-position: right 8px center;
	}
	.container .btn_movie.sp_inline {
		display: inline-block;
		width:auto;
		margin: 0 5px;
	}
}

/* ローカルナビゲーションをモーダルの下に */
@media (max-width: 640px) {
	.local_navigation.fixed {
        	z-index: 9000;
	}
}