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

/* ************************************************
 * 共通設定
 * ************************************************ */

body {
margin: 0px;
padding: 0px 0px;
font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
font-size: 14px;
line-height:21px;
text-align:center;
color:#000;
background:#fff;
-webkit-text-size-adjust: 100%;
}

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

h1 , h2 , h3 , h4 , h5 {
padding:0px;
margin:0px;
}

p {
padding:0px;
margin:0px 0px 20px 0px;
}




/* ************************************************ */
/**** 大枠ID ****/
/* ************************************************ */
#container{
width:100%;
max-width:720px;
margin:auto;
}

#header {
width:100%;
height:100%;
padding:0 0 5% 0 ;/* 単位vwが使えないブラウザ用 */
padding:0 0 5vw 0;
margin:0;
}

#contents {
width:100%;
box-sizing: border-box;
position:relative;
text-align:left;
margin:0 0 0 0;
padding:0;
}

#footer {
width:100%;
box-sizing: border-box;
padding:0;
margin:5% 0;/* 単位vwが使えないブラウザ用 */
margin:5vw 0;
font-size:85%;/* 単位vwが使えないブラウザ用 */
font-size:3.333vw;/*画面サイズ360pxで12px相当*/
}


/* ************************************************ */
/**** 共通クラス定義 ****/
/* ************************************************ */

/***** clearfix *****/
.clearfix:after { 
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */



/* ************************************************ */
/**** header ****/
/* ************************************************ */


/* ************************************************ */
/**** contents ****/
/* ************************************************ */

/***** 20200403 視聴者限定ドランクドラゴンのここだけの話 *****/
.kokodake {
width:;
margin:0 15px 15px 15px;
}
.kokodake img {
max-width:100%;
}

/********** SALE **********/
.sale {
margin:0 5% 5% 5%;/* 単位vwが使えないブラウザ用 */
margin:0 5vw 5vw 5vw;
padding:0 0 1% 0;/* 単位vwが使えないブラウザ用 */
padding:0 0 1vw 0;
background:#c30d23;
border:2px solid #c30d23;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}

.sale_header {
position:relative;
}
.sale_header .sale_lead {
font-size:85%;/* 単位vwが使えないブラウザ用 */
font-size:3.333vw;/*画面サイズ360pxで12px相当*/
line-height:2;
text-align:center;
color:#fff;
font-weight:bold;
margin:0 0 1.2% 0;/* 単位vwが使えないブラウザ用 */
margin:0 0 1.2vw 0;
}
.sale_header .ic_sale {
position:absolute;
top:-1.2%;/* 単位vwが使えないブラウザ用 */
left:-1.2%;/* 単位vwが使えないブラウザ用 */
top:-1.2vw;
left:-1.2vw;
width:20%;
}

.sale_content {
padding:0 1%;/* 単位vwが使えないブラウザ用 */
padding:0 1vw;
height: 100%;
}
.sale_content .sale_block {
float:left;
width:50%;
padding:0 1%;/* 単位vwが使えないブラウザ用 */
padding:0 1vw;
box-sizing: border-box;
}
.sale_content .sale_block:nth-child(odd) {
}

.sale_content .sale_block .saleitem_img {
margin:0 0 2% 0;/* 単位vwが使えないブラウザ用 */
margin:0 0 2vw 0;
}

.sale_content .sale_block .saleitem_btn {
margin:0 0 0.5vw 0;
}
/* セール品1個の場合 */
.sale_content .sale_block_1column {
padding:0 1%;/* 単位vwが使えないブラウザ用 */
padding:0 1vw;
box-sizing: border-box;
position:relative;
height: 100%;
}
.sale_content .sale_block_1column .saleitem_img {
margin:0 0 2% 0;/* 単位vwが使えないブラウザ用 */
margin:0 0 2vw 0;
}

.sale_content .sale_block_1column .saleitem_btn {
clear:both;
float:none;
position:absolute;
margin:0 0 0 0;
width:50%;
height: auto;
bottom:0;
right:0;
}

/* ベーシック認証付き特設LPへ */
.sale_content .sale_block_1column .salelp_user {
clear:both;
float:none;
position:absolute;
text-align:center;
font-weight:bold;
margin:0 auto;
width:56%;
/*height: 5%;*/
font-size:8vw;
line-height: 142%;
top:156%;/* 単位vwが使えないブラウザ用 */
top:156vw;
right:4%;/* 単位vwが使えないブラウザ用 */
right:4vw;
}
.sale_content .sale_block_1column .salelp_btn {
clear:both;
float:none;
position:absolute;
margin:0 auto;
width:94%;
height: auto;
top:220.5%;/* 単位vwが使えないブラウザ用 */
top:220.5vw;
right:0;
left:0;
}

/********** クーポン **********/
.coupon {
margin:0 5% 5% 5%;/* 単位vwが使えないブラウザ用 */
margin:0 5vw 5vw 5vw;
padding:0 0 1% 0;/* 単位vwが使えないブラウザ用 */
padding:0 0 1vw 0;
background:#f50;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}

.coupon_header {
}
.coupon_content {
padding:0 1%;/* 単位vwが使えないブラウザ用 */
padding:0 1vw;
height: 100%;
}
.coupon_content .coupon_block {
padding:0 1%;/* 単位vwが使えないブラウザ用 */
padding:0 1vw;
box-sizing: border-box;
}
.coupon_content .coupon_block .couponitem_img {
margin:0 0 2% 0;/* 単位vwが使えないブラウザ用 */
margin:0 0 2vw 0;
}

.coupon_content .coupon_block .couponitem_btn {
}
.coupon_content .coupon_block .couponitem_btn ul {
list-style:none;
margin:0;
padding:0;
}
.coupon_content .coupon_block .couponitem_btn ul li {
margin:0;
padding:0;
float:left;
width:50%;
}


/********** 動画 **********/
.movie {
margin:0 5% 5% 5%;/* 単位vwが使えないブラウザ用 */
margin:0 5vw 5vw 5vw;
padding:0 0 0 0;
height:100%;
}

.movie_header {
position:relative;
height:100%;
background:#000;
border-radius:15px 15px 0 0 ;
-moz-border-radius:15px 15px 0 0;
-webkit-border-radius:15px 15px 0 0;
}
.movie_header .movie_date {
position:absolute;
bottom:-66%;/* 単位vwが使えないブラウザ用 */
bottom:-15.2vw;
width:100%;
height:100%;
text-align:center;
color:#fff;
font-weight:bold;
font-size:85%;/* 単位vwが使えないブラウザ用 */
font-size:3.333vw;/*画面サイズ360pxで12px相当*/
line-height:1;
}

.movie_content {
padding:0 0 5% 0;/* 単位vwが使えないブラウザ用 */
padding:0 0 5vw 0;
background:#000;
border-radius:0 0 15px 15px;
-moz-border-radius:0 0 15px 15px;
-webkit-border-radius:0 0 15px 15px;
}

.movie_content .movie_block {
width:100%;
padding:0 0;/* 単位vwが使えないブラウザ用 */
padding:0 5vw;
margin-bottom:5%;/* 単位vwが使えないブラウザ用 */
margin-bottom:5vw;
box-sizing: border-box;
color:#fff;
}

.movie_content .movie_block .movie_thmb {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.movie_content .movie_block  .movie_thmb iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.movie_content .movie_block .movie_corporate {
font-size:78%;/* 単位vwが使えないブラウザ用 */
font-size:3.055vw;/*画面サイズ360pxで11px相当*/
line-height:1.3;
margin-bottom:1%;/* 単位vwが使えないブラウザ用 */
margin-bottom:1vw;
margin-left:4%;/* 単位vwが使えないブラウザ用 */
margin-left:0vw;
}

.movie_content .movie_block .movie_title {
font-size:100%;/* 単位vwが使えないブラウザ用 */
font-size:3.888vw;/*画面サイズ360pxで14px相当*/
line-height:1.3;
margin-left:4%;/* 単位vwが使えないブラウザ用 */
margin-left:0vw;
}

.movie_content .movie_btn_archive {
margin:0 5%;/* 単位vwが使えないブラウザ用 */
margin:0 5vw;
}

/********** ブログ **********/
.blog {
margin:0 3.5% 5% 3.5%;/* 単位vwが使えないブラウザ用 */
margin:0 3.5vw 5vw 3.5vw;
padding:0 0 0 0;
height:100%;
}



/********** オンラインショップ **********/
.shop {
margin:0 5% 5% 5%;/* 単位vwが使えないブラウザ用 */
margin:0 5vw 5vw 5vw;
padding:0 0 0 0;
position:relative;
/*height:100%;*/
}

.shop_header {
}
.shop_header .shop_header_title {
height:100%;
position:absolute;
top:-1.3%;/* 単位vwが使えないブラウザ用 */
left:-5%;/* 単位vwが使えないブラウザ用 */
right:-5%;/* 単位vwが使えないブラウザ用 */
top:-1.3vw;
left:-5vw;
right:-5vw;
}
.shop_header .shop_header_lead {
/*height:100%;*/
position:absolute;
top:35%;/* 単位vwが使えないブラウザ用 */
top:20vw;
text-align:center;
width:100%;
font-size:107%;/* 単位vwが使えないブラウザ用 */
font-size:4.687vw;/*画面サイズ360pxで15px相当*/
line-height:1.3;
font-weight:bold;
}

.shop .shop_content {
/*height:100%;*/
position:absolute;
/*bottom:-70%;/* 単位vwが使えないブラウザ用 */
/*bottom:-43vw;*/
top:75%;/* 単位vwが使えないブラウザ用 */
top:44vw;
text-align:center;
width:100%;
padding:0 0%;/* 単位vwが使えないブラウザ用 */
padding:0 2vw;
box-sizing:border-box;
}

.shop_content .shop_block {
float:left;
width:50%;
padding:0 0;/* 単位vwが使えないブラウザ用 */
padding:0 1vw;
margin:0 auto 2% auto;/* 単位vwが使えないブラウザ用 */
margin:0 auto 2vw auto;
display:block;
box-sizing: border-box;
color:#fff;
}


/***** 製作著作 *****/
.production {
clear:both;
text-align:center;
margin:0px 20px 20px 20px;
padding:0px;
font-size: 4vw;
line-height:2;
}
.production dl {
margin:0 0 ;
padding:0;
}
.production dl dt {
margin:0 0 0 0;
padding:0;
}
.production dl dd {
margin:0;
padding:0;
}
.production dl dd a {
color:#00f;
text-decoration:none;
}