@charset "UTF-8";
*{
margin:0;
padding:0;
outline:none;
border:0;
line-height:1.5em;
font-size:0;
text-align:center;
}
html,body {
height:100%;
-webkit-text-size-adjust:100%;
}
body{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
}

/*共通項目*/
section,section>article{
width:640px;
margin:0 auto;
vertical-align:auto;
}
#lineup{
padding:22% 0 8% 0;
}
#chara,#kawara,#tosho{
padding:8% 0;
}
.sp{
display:block;
}
.pc{
display:none;
}


#ttl{
text-indent:-9999px;
width:640px;
height:260px;
background:url(images/ttl2_sp.png) center bottom;
position:absolute;
top:490px;
z-index:1;
background-size:cover;
}
#mark{
text-indent:-9999px;
width:80px;
height:80px;
background:url(images/mark.png) center center;
position:absolute;
top:10px;
left:10px;
z-index:1;
}
#toshoB{
text-indent:-9999px;
width:280px;
height:200px;
background:url(images/tosho_sp.png) center center;
position:absolute;
top:350px;
right:10px;
left:auto;
z-index:1;
background-size:cover;
}
#msgB{
text-indent:-9999px;
width:217px;
height:250px;
background:url(images/msg_sp2.png) center center;
position:absolute;
top:305px;
right:10px;
left:auto;
z-index:1;
background-size:cover;
}


/*ヘッダ*/
header{
width:640px;
height:630px;
background:url(images/head_sp1.png) center center;
background-size:cover;
position:relative;
overflow:hidden;
}
#headerChara{
position:absolute;
width:640px;
height:630px;
background:url(images/head_sp2.png) center center no-repeat;
background-size:cover;
top:-100%;
}
#headerCloud{
position:absolute;
width:640px;
height:630px;
background:url(images/head_sp3.png) center center no-repeat;
background-size:cover;
}

/*ラインナップ*/
#lineup{
background:url(images/bg1.png) center center;
width:100%;
}
#lineup h1{
text-indent:-9999px;
width:640px;
height:200px;
background:url(images/sell_sp2.png) center center no-repeat;
margin:0 auto;
}
#lineup img{
display:block;
margin:10px auto 10px auto;
}
#lineup img#btn_non{
width:204px;
height:82px;
margin:0 auto;
}
#lineup div{
display:inline-block;
vertical-align: top;
width:210px;
margin:0px;
}
#lineup div a{
display:block;
text-indent:-9999px;
width:204px;
height:82px;
margin:0 auto;
}
#lineup div a:nth-child(1){
background:url(images/btn1.png) center center no-repeat;
}
#lineup div a:nth-child(2){
background:url(images/btn2.png) center center no-repeat;
}
#lineup div a:nth-child(3){
background:url(images/btn3.png) center center no-repeat;
}
#lineup div a#btn_non{
background:url(images/btn_2non.png) center center no-repeat;
}

/*キャラ*/
#chara{
background:url(images/bg_chara.png) center center;
width:100%;
}
#chara h1{
text-indent:-9999px;
width:640px;
height:190px;
background:url(images/chara_ttl_sp.png) center center no-repeat;
margin:0 auto;
}
#chara div{
text-indent:-9999px;
background:url(images/chara_sp.png) center center no-repeat;
width:640px;
height:1900px;
margin:0 auto;
}

/*かわらばん*/
#kawara{
background:url(images/bg2.png) center center;
width:100%;
}
#kawara h1{
text-indent:-9999px;
width:640px;
height:350px;
background:url(images/kawara_ttl2_sp.png) center center no-repeat;
margin:0 auto;
}
#kawara div{
display:inline-block;
vertical-align: top;
width:210px;
margin:0px;
}
#kawara div img{
display:block;
margin:30px auto 10px auto;
}
#kawara div a{
display:block;
text-indent:-9999px;
width:204px;
height:82px;
background:url(images/btn4.png) center center no-repeat;
margin:0 auto;
}
.dfpCaution{
font-size: 2.4vw;
margin: 3vw auto 4vw auto;
color: #FFF;
}

/*おたより*/
#msg{
background:url(images/msg_bg.png) center center;
width:100%;
padding:60px 0 56px 0;
}
#msg h1{
text-indent:-9999px;
width:640px;
height:320px;
background:url(images/msg_ttl_sp2.png) center center no-repeat;
margin:0 auto 10px auto;
}
#msg div{
display:inline-block;
vertical-align: top;
width:520px;
margin:10px auto;
padding: 25px;
border: solid 8px #005163;
background: #FFF;
position: relative;
}
#msg div p{
color:#005163;
text-align: justify;
font-size: 21px;
}
#msg div p .newMSG{
position:absolute;
z-index: 1;
left:-20px;
top:-20px;
width: 55px;
height: 55px;
}
#msg div p ruby,
#msg div p rp,
#msg div p rt{
font-size: 21px;
}
#msg div p span{
font-size: 15px;
display: block;
text-align: right;
}
#msg div p img{
margin-right: 1em;
float: left;
width: 40%;
}
.msgIll{
display: block;
margin: 10px auto;
}

/*図書カード*/
#tosho{
background:url(images/bg3.png) center center;
width:100%;
}
#tosho h1,#tosho div{
display:block;
}
#tosho h1{
text-indent:-9999px;
width:640px;
height:460px;
background:url(images/tosho_ttl_sp2.png) center center no-repeat;
margin:0 auto;
}
#tosho div{
background:url(images/tosho_waku1.png) center top no-repeat,url(images/tosho_waku3.png) center bottom no-repeat;
padding:56px 0;
width:600px;
margin:0 auto;
}
#tosho h2{
font-size:23px;
color:#FF0;
text-align: center;
margin-bottom: 1em;
}
#tosho div article{
background:url(images/tosho_waku2.png) center center;
padding:0 40px;
margin: -1px 0;
}
#tosho p{
display: inline-block;
font-size: 20px;
margin: 0 2em;
font-size:21px;
line-height:1.5em;
color: #FFF;
}


/*フッタ*/
footer{
background:#932c5e;
width:100%;
padding:2% 0;
}
footer h1{
text-indent:-9999px;
width:640px;
height:64px;
background:url(images/foot.png) center center no-repeat;
margin-bottom:1%;
}
#banners a{
display:inline-block;
width:600px;
margin:0 5px 5px 5px;
}
#banners a img{
width:100%;
height:auto;
}
a#bnrSP{
display: block;
width:610px;
margin:5px auto 20px auto;
}
a#bnrSP img{
width:100%;
height:auto;
}
#cr a{
display:inline-block;
margin:2% auto 1% auto;
}
#cr p,#cr p span{
font-size:12px;
line-height:1.2em;
}

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

/*共通項目*/
section,section>article{
width:960px;
margin:0 auto;
}
.sp{
display:none;
}
.pc{
display:inline-block;
}
#lineup{
padding:117px 0 8% 0;
}

/*ヘッダ*/
header{
width:100%;
height:500px;
background:url(images/head_pc1.png) center center;
background-size:cover;
}
#ttl{
text-indent:-9999px;
width:900px;
height:280px;
background:url(images/ttl2_pc.png) center center;
position:absolute;
top:350px;
z-index:1;
background-size:cover;
}
#toshoB{
text-indent:-9999px;
width:380px;
height:280px;
background:url(images/tosho_pc.png) center center;
position:absolute;
top:350px;
left:689px;
right:auto;
z-index:1;
background-size:cover;
}
#msgB{
top:285px;
left:810px;
right:auto;
z-index:1;
background-size:cover;
}
#headerChara{
position:absolute;
width:100%;
height:500px;
background:url(images/head_pc2.png) center center no-repeat;
background-size:cover;
}
#headerCloud{
position:absolute;
width:100%;
height:500px;
background:url(images/head_pc3.png) center center no-repeat;
background-size:cover;
}

/*ラインナップ*/
#lineup h1{
width:800px;
height:124px;
background:url(images/sell_pc2.png) center center no-repeat;
}

/*キャラ*/
#chara h1{
width:870px;
height:110px;
background:url(images/chara_ttl_pc.png) center center no-repeat;
}
#chara div{
background:url(images/chara_pc.png) center center no-repeat;
width:960px;
height:760px;
}

/*かわらばん*/
#kawara h1{
width:830px;
height:240px;
background:url(images/kawara_ttl2_pc.png) center center no-repeat;
}
.dfpCaution{
font-size: 14px;
margin: 15px auto 5px auto;
}

/*おたより*/
#msg h1{
text-indent:-9999px;
width:900px;
height:370px;
background:url(images/msg_ttl_pc2.png) center center no-repeat;
margin:30px auto 10px auto;
}
#msg div{
width:390px;
margin: 10px;
}
#msg div p{
font-size: 17px;
}
#msg div p ruby,
#msg div p rp,
#msg div p rt{
font-size: 17px;
}
#msg div p span{
font-size: 15px;
}

/*図書カード*/
#tosho h1,#tosho div{
display:inline-block;
vertical-align: top;
}
#tosho div{
margin-top:30px;
background:url(images/tosho_waku1.png) center top no-repeat,url(images/tosho_waku3.png) center bottom no-repeat;
}
#tosho h1{
text-indent:-9999px;
width:340px;
height:760px;
background:url(images/tosho_ttl_pc2.png) center center no-repeat;
}
#tosho div article{
background:url(images/tosho_waku2.png) center center;
padding:0 40px;
margin: 0;
}
#tosho h2{
text-align: center;
margin-bottom: 1em;
font-weight: bold;
}
#tosho p{
display: inline-block;
font-size: 20px;
margin: 0 2em;
}

/*フッタ*/
footer h1{
width:960px;
}
#banners a{
width:600px;
margin:0 5px 5px 5px;
}
a#bnrSP{
width:710px;
margin:5px auto 20px auto;
}
}


@media screen and (min-width: 980px){
#toshoB{
right:0px;
left:auto;
}
#msgB{
right:5px;
left:auto;
}
#lineup{
padding:12% 0 8% 0;
}
}

@media screen and (min-width: 1280px){
#lineup{
padding:155px 0 8% 0;
}
}