@charset "utf-8";
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

@media screen and (max-width: 767px) {

/* reset */
html, body, div, span, p, img, strong, b, i, dl, dt, dd, ol, ul, li,
tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
div.contentInnerSmall p {margin:0 !important;}

.container{
    background:url(/ex/special/electronic_privilege/images/bg.jpg) left top !important;
    background-size:10% !important;
    line-height:1;
}
a{
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/*div.container{
    width:94%;
    margin:auto;
    font-size:12px;
}*/
div#contentsBox p{
	margin:0;
	line-height:1 !important;
}
.pcOnly {display:none;}


html {font-size:62.5%;}
body {font-size:1.2rem;}


/* ベース */
div#contentsBox{
	background:#fff !important;
	width:100% !important;
	margin:0;
	color:#262626;
}
div#contentsWrap{
    background:rgba(255,255,255,0.6);
    width:100%;
    margin:0;
    padding-bottom:20px;
    color:#262626;
    border:4px solid #395eac;
    box-sizing:border-box;
}
div#contentsWrap:last-of-type {padding-bottom:0;}
ul, ol{
	margin:0;
	padding:0;
	list-style:none !important;
}
li{
	margin-bottom:4px !important;
	line-height:1.4 !important;
	text-align:left;
	list-style:none !important;
}
	
	div.contentInner{
		margin: 2em auto;
	}

	div.contentInnerSmall img {
		width: auto;
		max-width: 100%;
		height: auto;
		display: inline-block;
	}

/* header */
#contentsWrap #Header{
    padding:10px 0 50px;
    text-align:center;
}
 #Header img{
     width:90%;
     margin:0 auto;
 }
#contentsWrap #Header #Attention{
    width:90%;
    margin:14px auto !important;
    padding:0.4em;
    font-size:1.2rem;
    font-weight:bold;
    color:#f00;
    text-align:left !important;
    line-height:1.3;
    border:1px dotted #f00;
    box-sizing:border-box;
}
#contentsWrap #Header #Attention span{
    display:block;
    margin-right:1em;
    text-align:center;
}
#contentsWrap #Header #Attention span::before{
   font-family:"FontAwesome";
    content:"\f071";
    margin-left:4px;
}
#contentsWrap #Header #Attention span::after{
   font-family:"FontAwesome";
    content:"\f071";
    margin-right:4px;
}

/* 音声特典 */
.ItemBox{
    position:relative;
    width:100%;
    margin:0;
    padding:20px 10px;
    box-sizing:border-box;
}
#OnseiWrap{
    background:rgba(247, 46, 90, 0.6);
    margin-bottom:80px;
}
.TitImg{
    position:absolute;
    top:-18px;
    left:58%;
    transform:translateX(-50%);
}
#OnseiWrap .TitImg{
    display:block;
    width:140px;
    margin:0 !important;
}
.TitImg img {width:100% !important;}
.DownloadBox {position:relative;}
.DownloadBoxImg{
    position:absolute;
    top:-76px;
    left:12px;
}
.DownloadBoxImg img{
    width:40% !important;
    max-width:40% !important;
    vertical-align:bottom;
}
.DownloadBoxTxt{
    position:relative;
    background:#fff;
    width:100%;
    margin:0 0 24px;
    padding:10px;
    font-size:1.1rem;
    line-height:1.4;
    border-radius:8px;
    box-sizing:border-box;
    z-index:10;
}
#OnseiWrap .DownloadBoxTxt {margin-top:8px;}
.DownloadBoxTxt .SubTit{
    font-size:1.6rem;
    font-weight:bold;
    color:#e83675;
    text-align:center;
}
.DownloadBoxTxt .InfoTxt{
    margin-bottom:6px !important;
    font-size:1.3rem;
    font-weight:bold;
    color:#e83675;
    line-height:1.4;
}
.DownloadBoxTxt ul {margin-top:8px;}
.DownloadBoxTxt li{
    margin:0 0 4px 1em !important;
    line-height:1.2 !important;
    text-indent:-1em;
}
.AboutBox{
    margin-bottom:20px;
    padding:14px;
    color:#fff;
    line-height:1.4;
    border:4px solid #fff;
    border-radius:8px;
    box-sizing:border-box;
}
#OnseiWrap .AboutBox {background:linear-gradient(to bottom, #fa226e 0%, #f9759d 100%);}
div.contentInnerSmall .AboutSubtit{
    margin-bottom:12px !important;
    font-size:1.6rem;
    text-align:center;
    line-height:1.3;
}
.LinkBtn{
    width:100%;
    margin:0 0 18px !important;
    padding:2em 0 2px;
    font-size:1.2rem;
    font-weight:bold;
    text-align:center;
    line-height:1.4;
}
.LinkBtn a{
    display:block;
    background:#fff;
    padding:6px 1em;
    border-radius:30px;
    text-decoration:none !important;
}
#OnseiWrap .LinkBtn a {color:#e83675;}


/* 電子書籍 */
#DenshiWrap{
    background:rgba(251, 123, 9, 0.6);
    margin-bottom:80px;
}
#DenshiWrap .TitImg{
    top:-32px;
    left:59%;
    display:block;
    width:160px;
    margin:0 !important;
}

#DenshiWrap .AboutBox {background:linear-gradient(to bottom, #fb7b09 0%, #fcaa29 100%);}
.AboutBox ul {margin-top:.6em !important;}
.AboutBox li{
    margin-bottom:6px !important;
    line-height:1.4 !important;
}
#DenshiWrap .DownloadBoxImg{
    position:absolute;
    top:-89px;
    left:17px;
}
#DenshiWrap .DownloadBoxTxt .SubTit {color:#fb7b09;}
#DenshiWrap .DownloadBoxTxt .InfoTxt {color:#fb7b09;}
#DenshiWrap .LinkBtn {margin-bottom:20px !important;}
#DenshiWrap .LinkBtn a {color:#fb7b09;}
.AboutBox .AboutSubtit + p {line-height:1.5;}


/* 配信視聴 */
#HaishinWrap{
    background:rgba(43, 183, 5, 0.6);
    margin-bottom:0;
}
#HaishinWrap .DownloadBoxImg{
    position:absolute;
    top:-89px;
    left:21px;
}
#HaishinWrap .DownloadBoxTxt {margin-top:10px;}
#HaishinWrap .TitImg{
    display:block;
    width:140px;
    margin:0 !important;
}

#HaishinWrap .AboutBox {background:linear-gradient(to bottom, #2bb705 0%, #57ef30 100%);}
#HaishinWrap .DownloadBoxTxt .SubTit {color:#2bb705;}
#HaishinWrap .DownloadBoxTxt .InfoTxt {color:#2bb705;}
#HaishinWrap .LinkBtn a {color:#2bb705;}
}










@media screen and (min-width: 768px) {

/* reset */
html, body, div, span, p, img, strong, b, i, dl, dt, dd, ol, ul, li,
tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

div.wide{
    background:url(/ex/special/electronic_privilege/images/bg.jpg) center top !important;
    line-height:1;
	max-width: 1000px;
	margin: auto;
}
a{
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
div#contentsWrap {padding-top:0;}
div#contentsWrap p {margin:0;}

html {font-size:62.5%;}
body {font-size:1.2rem;}


/* ベース */
div#contentsWrap{
    background:rgba(255,255,255,0.6);
    width:960px !important;
    min-width:960px !important;
    margin:0 auto;
    padding-bottom:20px;
    color:#262626;
    border:4px solid #395eac;
    box-sizing:border-box;
}
ul, ol{
	margin:0;
	padding:0;
	list-style:none !important;
}
li{
	margin-bottom:6px !important;
	line-height:1.6 !important;
	text-align:left;
}
div#contentsBox ul {padding-left:0 !important;}

.spOnly {display:none;}


#contentsWrap {font-size:1.4rem;}
	
	div.contentInnerSmall img {
		width: auto;
		max-width: 100%;
		height: auto;
		display: inline-block;
	}

/* SNS */
#contentsWrap .share{
	position:absolute;
	top:300px;
	left:455px;
	width:auto;
	z-index:50;
}


/* header */
#contentsWrap #Header{
    padding:20px 0 80px;
    text-align:center;
}
#contentsWrap #Header img {width:880px;}
#contentsWrap #Header #Attention{
    width:880px;
    margin:20px auto;
    padding:0.4em 0;
    font-size:1.5rem;
    font-weight:bold;
    color:#f00;
    text-align:center;
    border:1px dotted #f00;
    box-sizing:border-box;
}
#contentsWrap #Header #Attention span{
    display:block;
    margin-right:1em;
}
#contentsWrap #Header #Attention span::before{
   font-family:"FontAwesome";
    content:"\f071";
    margin-left:4px;
}
#contentsWrap #Header #Attention span::after{
   font-family:"FontAwesome";
    content:"\f071";
    margin-right:4px;
}


/* 音声特典 */
.ItemBox{
    position:relative;
    width:900px;
    margin:0 auto;
    padding:30px 20px 20px;
    box-sizing:border-box;
}
#OnseiWrap{
    background:rgba(247, 46, 90, 0.6);
    margin-bottom:140px;
}
.TitImg{
    position:absolute;
    top:-38px;
    left:50%;
    transform:translateX(-50%);
}
#OnseiWrap .TitImg{
    display:block;
    width:258px;
    height:62px;
}
.TitImg img {width:100%;}
.DownloadBox{
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
    flex-wrap:wrap;
}
.DownloadBoxImg img {vertical-align:bottom;}
.DownloadBoxTxt{
    background:#fff;
    width:650px;
    margin:0 0 20px auto;
    padding:10px;
    font-size:1.2rem;
    line-height:1.3;
    border-radius:8px;
    box-sizing:border-box;
}
#OnseiWrap .DownloadBoxTxt {margin-top:8px;}
.DownloadBoxTxt .SubTit{
    margin-bottom:4px !important;
    font-size:1.8rem;
    font-weight:bold;
    color:#e83675;
}
.DownloadBoxTxt .InfoTxt{
    font-size:1.5rem;
    font-weight:bold;
    color:#e83675;
    line-height:1.5 !important;
}
.DownloadBoxTxt ul{
    margin-top:8px;
    padding-left:0 !important;
}
.DownloadBoxTxt li{
    margin:0 0 4px 1em !important;
    line-height:1.2 !important;
    text-indent:-1em;
}
.AboutBox{
    padding:14px;
    color:#fff;
    border:4px solid #fff;
    border-radius:8px;
    box-sizing:border-box;
}
#OnseiWrap .AboutBox {background:linear-gradient(to bottom, #fa226e 0%, #f9759d 100%);}
.AboutSubtit{
    margin-bottom:12px;
    font-size:2.4rem;
    text-align:center;
}
.LinkBtn{
    padding:1.6rem 0 2px;
    font-size:1.6rem;
    font-weight:bold;
    text-align:center;
}
.LinkBtn a{
    display:inline-block;
    background:#fff;
    padding:6px 2em;
    border-radius:30px;
    text-decoration:none !important;
    transition:0.5s;
}
.LinkBtn a:hover {background:#ddd;}

#OnseiWrap .LinkBtn a {color:#e83675;}


/* 電子書籍 */
#DenshiWrap{
    background:rgba(251, 123, 9, 0.6);
    margin-bottom:140px;
}
#DenshiWrap .DownloadBoxImg img {padding-left:26px;}
#DenshiWrap .TitImg{
    top:-75px;
    display:block;
    width:292px;
    height:98px;
}

#DenshiWrap .AboutBox {background:linear-gradient(to bottom, #fb7b09 0%, #fcaa29 100%);}
.AboutBox ul{
    margin:.6em 0 0 0 !important;
    padding-left:0 !important;
}
.AboutBox li{
    margin-bottom:6px !important;
    line-height:1 !important;
}
#DenshiWrap .DownloadBoxTxt .SubTit {color:#fb7b09;}
#DenshiWrap .DownloadBoxTxt .InfoTxt {color:#fb7b09;}
#DenshiWrap .LinkBtn {margin-bottom:40px;}
#DenshiWrap .LinkBtn a {color:#fb7b09;}
.AboutBox .AboutSubtit + p {line-height:1.5;}


/* 配信視聴 */
#HaishinWrap{
    background:rgba(43, 183, 5, 0.6);
    margin-bottom:40px;
}
#HaishinWrap .DownloadBoxImg img {padding-left:31px;}
#HaishinWrap .DownloadBoxTxt {margin-top:10px;}
#HaishinWrap .TitImg{
    display:block;
    width:259px;
    height:63px;
}

#HaishinWrap .AboutBox {background:linear-gradient(to bottom, #2bb705 0%, #57ef30 100%);}
#HaishinWrap .DownloadBoxTxt .SubTit {color:#2bb705;}
#HaishinWrap .DownloadBoxTxt .InfoTxt {color:#2bb705;}
#HaishinWrap .LinkBtn a {color:#2bb705;}

}