@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-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{
  
    width:100%;
    margin:0;
    padding-bottom:20px;
    color:#262626;
   
    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;
}

/* 0407鷺谷 */

.nav-buttons{
    display: flex;
    justify-content: center;
    list-style: none !important; 
    justify-content: center;
    padding: 0;       /* ← ul特有の余白をリセット */
    gap: 10px;
    margin-top: 15px;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
}

.nav-buttons li {
    width: calc(50% - 15px); 
    margin: 0  ;
    list-style: none !important;
}
.nav-buttons a{
   display: block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;  
    text-decoration: none; 
    border-radius: 5px;
    text-align: center;
   
}

/*ボタンの個別色設定*/

.btn-voice a {
    background-color:#e83675;
}

.btn-book a {
    background-color:#fb7b09;
}

.btn-movie a {
    background-color:#2bb705;
}

.btn-order a {
    background-color:#3255AF;
}

/* 音声特典 */
.ItemBox{
    position:relative;
    width:100%;
    margin:0;
   padding:40px 20px 20px;
    box-sizing:border-box;
}
#OnseiWrap{
    background:rgba(247, 46, 90, 0.6);
    margin-bottom:50px;
}
.TitImg{
    position:absolute;
   
    top:8px;
    left:50%;
    transform:translateX(-50%);
    
}
#OnseiWrap .TitImg{
    display:block;
    width:140px;
    margin:0 !important;
}
.TitImg img {width:100% !important;

 margin-top: 5px;
}
.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 {
    position: relative;
    margin-top: 30px
    
    

}



.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: 25px auto 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%);

 margin: 25px auto 20px;
        }
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:50px;
}


#DenshiWrap .TitImg{
     display:block;
    width:300px;
    margin:0 !important;
}

#DenshiWrap .DownloadBoxTxt{
     position: relative;
    margin-top: 30px;
  text-align: center !important;
}

#DenshiWrap .DownloadBoxTxt .ContentTit{
display: inline-block;
  text-align:center !important;
color: #fb7b09;
background: #f6efe5;   
    padding: 5px 15px;    
    border-radius: 4px;    
    font-size: 1.6rem;
font-weight:bold;
}

#DenshiWrap .DownloadBoxTxt .InfoTxt,
#DenshiWrap .DownloadBoxTxt ul,
#DenshiWrap .DownloadBoxTxt ul li {
    text-align: left !important;
    width: 100%;
    padding-right: 5px;
}

#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{
   display: none !important;
}
#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:50px;
}
#HaishinWrap .DownloadBoxImg{
  display: none !important;
}
#HaishinWrap .DownloadBoxTxt {
    
    position: relative;
    margin-top: 30px !important;

}
#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;}



/* 受注商品 */
#JuchuWrap{
    background:#3d68d7;
    margin-bottom:70px;
}
#JuchuWrap .DownloadBoxImg img {display: none !important;}
#JuchuWrap .TitImg{
     display:block;
    width:140px;
    margin:0 !important;
}

#JuchuWrap .DownloadBoxTxt {
   position: relative;
    margin-top: 30px !important;
 text-align: center !important;
}


#JuchuWrap .DownloadBoxTxt .ContentTit{
display: inline-block;
  text-align:center;
color: #3255AF;
background: #f0f4ff;   
    padding: 5px 15px;    
    border-radius: 4px;    
    font-size: 1.6rem;
font-weight:bold;
}

#JuchuWrap .DownloadBoxTxt .InfoTxt,
#JuchuWrap .DownloadBoxTxt ul {
    display: block !important;    
    text-align: left !important;  
    width: 100%;
    margin-bottom: 10px !important;
}


#JuchuWrap .DownloadBoxTxt ul li {
    text-align: left !important;
}

#JuchuWrap .AboutBox {background:linear-gradient(to bottom, #2f51a6 0%, #5174cd 100%);}
.AboutBox ul{
    margin:.6em 0 0 0 !important;
    padding-left:0 !important;
}
.AboutBox li{
    margin-bottom:6px !important;
    line-height:1 !important;
}
#JuchuWrap .DownloadBoxTxt .SubTit {color:#3255AF;}
#JuchuWrap .DownloadBoxTxt .InfoTxt {color:#3255AF;}
#JuchuWrap .LinkBtn {margin-bottom:20px;}
#JuchuWrap .LinkBtn a {color:#3255AF;}
.AboutBox .AboutSubtit + p {line-height:1.5;}




spOnly {
        display: block !important; 
    }

}






@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{

    line-height:1;

	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{

    width:960px !important;
    min-width:960px !important;
    margin:0 auto;
    padding-bottom:20px;
    color:#262626;
  
    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;
}


/* 0407鷺谷 */

.nav-buttons{
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;     
    gap: 10px;
    width: 100%;
    max-width: 900px;
    margin: 30px auto
   

}
.nav-buttons a{
   display: block;
min-width: 200px;
   font-size: 1.8rem;
    padding: 10px 20px;
    color: white;  
    text-decoration: none; 
    border-radius: 5px;
   text-align:center;
   
}

/*ボタンの個別色設定*/

.btn-voice a {
    background-color:#e83675;
}

.btn-book a {
    background-color:#fb7b09;
}

.btn-movie a {
    background-color:#2bb705;
}

.btn-order a {
    background-color:#3255AF;
}


/* 音声特典 */
.ItemBox{
    position:relative;
    width:900px 140px;
    margin:0 auto;
    padding:40px 20px 20px;
    box-sizing:border-box;
}
#OnseiWrap{
    background:rgba(247, 46, 90, 0.6);
    margin-bottom:70px;
}
.TitImg{
    position:absolute;
    margin-top: 5px;
    top:8px;
    left:50%;
    transform:translateX(-50%);
}
#OnseiWrap .TitImg{
    display:block;
    width:258px;
    height:62px;
}
.TitImg img {width:100%;

margin-top: 5px;}

.DownloadBox{
  display: flex;
  flex-direction: column;
   align-items: center;
 gap: 20px;
   margin: 40px auto 20px;
}
.DownloadBoxImg img {display: none;}
.DownloadBoxTxt{
    background:#fff;
    width:880px;
    margin:0;
    padding:25px;
    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:1rem auto 1rem;
    padding-left:0 !important;
}

.DownloadBoxTxt ul:last-child{
    margin-bottom: 0;
}

.DownloadBoxTxt li{
    margin:0 0 4px 1em !important;
    line-height:1.2 !important;
    text-indent:-1em;
}
.AboutBox{
    width: 880px;
      margin: 25px auto 20px;
        
       
    padding:25px;
    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:70px;
}
#DenshiWrap .DownloadBoxImg img {padding-left:26px;}
#DenshiWrap .TitImg{
     display:block;
    width:500px;
    height:62px;
}

#DenshiWrap .DownloadBoxTxt {

    margin-top:8px;
}

#DenshiWrap .DownloadBoxTxt .ContentTit{
display: inline-block;
color: #fb7b09;
background: #f6efe5;   
    padding: 5px 15px;    
    border-radius: 4px;    
    font-size: 1.8rem;
font-weight:bold;
}

#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;
margin-bottom: 0!important;}
#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:70px;
}
#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;}




/* 受注商品 */
#JuchuWrap{
    background:#3d68d7;
    margin-bottom:100px;
}
#JuchuWrap .DownloadBoxImg img {padding-left:26px;}
#JuchuWrap .TitImg{
     display:block;
    
    width:258px;
    height:62px;
}

#JuchuWrap .DownloadBoxTxt {

    margin-top:8px;
}

#JuchuWrap .DownloadBoxTxt .ContentTit{
display: inline-block;
color: #3255AF;
background: #f0f4ff;   
    padding: 5px 15px;    
    border-radius: 4px;    
    font-size: 1.8rem;
font-weight:bold;
}
#JuchuWrap ul .ContentTxt{

    font-size: 1.6rem;
}


#JuchuWrap .AboutBox {background:linear-gradient(to bottom, #2f51a6 0%, #5174cd 100%);}
.AboutBox ul{
    margin:.6em 0 0 0 !important;
    padding-left:0 !important;
}
.AboutBox li{
    margin-bottom:6px !important;
    line-height:1 !important;
}
#JuchuWrap .DownloadBoxTxt .SubTit {color:#3255AF;
margin-bottom: 0!important;}
#JuchuWrap .DownloadBoxTxt .InfoTxt {color:#3255AF;}
#JuchuWrap .LinkBtn {margin-bottom:20px;}
#JuchuWrap .LinkBtn a {color:#3255AF;}
.AboutBox .AboutSubtit + p {line-height:1.5;}

}