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

#container { 
 background-image:url(/special/a/4/contents/css/bg/konohana_bg.jpg);
 margin:0 auto;
 padding-bottom:10px;
 background-repeat:no-repeat;
 background-attachment: fixed; 
 background-position: 50% 50%;
}

#contentsWrap {
 position: relative;
 
 width: 1300px;
 margin: 0 auto; 
}

#main {
 background-image:url(/special/a/4/contents/sp/konohana_mainimage.jpg);
 background-repeat:no-repeat;
 width: 1300px;
 height: 750px;
}

#submenu{
 width: 700px;
 height: 200px;
 padding-top:430px;
 padding-left:900px;
}

#productwrap01{
 position: absolute;
 width: 1300px;
 height: 490px;
 background-image:url(/special/a/4/contents/sp/konohana_comicinfo.jpg);
}

#productwrap02{
 position: absolute;
 width: 1300px;
 height: 1090px;
 background-image:url(/special/a/4/contents/sp/konohana_comicinfo2.jpg);
}

#tapestrywrap{
 position: absolute;
 width: 1300px;
 height: 490px;
 background-image:url(/special/a/4/contents/sp/konohana_tapestryinfo.jpg);
 background-repeat:no-repeat;
}

#badgewrap{
 position: absolute;
 width: 1300px;
 height: 470px;
 background-image:url(/special/a/4/contents/sp/konohana_badgeinfo.jpg);
 background-repeat:no-repeat;
}

#goodswrap{
 position: absolute;
 width: 1300px;
 height: 1000px;
 background-color: #fff;
}

#goodswrap01{
 position: absolute;
 width: 1300px;
 height: 470px;
 background-image:url(/special/a/4/contents/sp/konohana_goods01.jpg);
 background-repeat:no-repeat;
}

#comicwrap{
 position: absolute;
 width: 1300px;
 height: 1010px;
 background-color: #fff;
}

#animewrap{
 position: absolute;
 width: 1300px;
 height: 490px;
 background-color: #fff;
}

#animetitle{
 background-color: #fff;
}

#animepv{
 position: relative;
 padding-top: 20px;
 padding-bottom: 40px;
 z-index: 2;
}

#pvline{
 position: relative;
 z-index: 2;
}

#pvwrap{
 width: 1300px;
 height: 590px;
 background-color: #fff;
}

#link{
 padding-top:20px;
 padding-bottom:35px; 
}

.floatingbanner {
position: fixed;
top: 26%;
right: 0px;
z-index: 3;
}

.toppagebutton {
position: fixed;
bottom: 0px;
right: 30px;
z-index: 4;
}


.product{
padding-top:20px;

}

.tanpin{
 position: relative;
 z-index: 2;
}


a:hover {
 opacity:0.8;
}

#bddvdwrap{
 position: absolute;
 width: 1300px;
 height: 975px;
 background-color: #fff;
}

#bddvd{
  background-image:url(/special/a/4/contents/sp/konohana_bddvdinfo.jpg);
 width: 1300px;
 height: 500px;
}

.nowprinting{
 padding-top: 50px;
 padding-left: 30px;
}

.sakura {
  position: fixed;
  width: 100%;
  margin: 0 auto;
}
.sakura div {
    opacity: 0;
    animation-name: Drop;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    display: block;
    width: 70px;
    height: 70px;
    background-repeat:no-repeat;
}

.sakura1, .sakura5, .sakura8, .sakura9, .sakura11, .sakura14, .sakura18, .sakura20, .sakura23, .sakura26 {
    background-image: url(/special/a/4/contents/css/bg/sakurapetal.png);
    background-size: 70px 70px ;
}

.sakura2, .sakura4, .sakura6, .sakura12, .sakura15, .sakura17  .sakura21, .sakura24, .sakura27, .sakura29 {
    background-image: url(/special/a/4/contents/css/bg/sakurapetal2.png);
    background-size: 70px 70px ;
}

.sakura3, .sakura7, .sakura10, .sakura13, .sakura16, .sakura19, .sakura22, .sakura25, .sakura28, .sakura30 {
    background-image: url(/special/a/4/contents/css/bg/sakurapetal3.png);
    background-size: 70px 70px ;
}

.sakura1 {
    left: -10%;
    animation-delay: 0s;
    animation-duration: 13s;
}
.sakura2 {
    left: -20%;
    animation-delay: -4.0s;
    animation-duration: 18s;
}
.sakura3 {
    left: -5%;
    animation-delay: 2s;
    animation-duration: 13s;
}
.sakura4 {
    left: -22%;
    animation-delay: -6.0s;
    animation-duration: 16s;
}
.sakura5 {
    left: -17%;
    animation-delay: 3s;
    animation-duration: 13s;
}
.sakura6 {
    left: 13%;
    animation-delay: 0.3s;
    animation-duration: 10s;
}
.sakura7 {
    left: 26%;
    animation-delay: -0.8s;
    animation-duration: 13s;
}
.sakura8 {
    left: -8%;
    animation-delay: -7.0s;
    animation-duration: 19s;
}
.sakura9 {
    left: -2%;
    animation-delay: 5s;
    animation-duration: 13s;
}
.sakura10 {
    left: 34%;
    animation-delay: 4.9s;
    animation-duration: 20s;
}
.sakura11 {
    left: 39%;
    animation-delay: 0s;
    animation-duration: 16s;
}
.sakura12 {
    left: 42%;
    animation-delay: 8.8s;
    animation-duration: 13s;
}
.sakura13 {
    left: 47%;
    animation-delay: -28s;
    animation-duration: 13s;
}
.sakura14 {
    left: 50%;
    animation-delay: 2.4s;
    animation-duration: 27s;
}
.sakura15 {
    left: 53%;
    animation-delay: -0.9s;
    animation-duration: 13s;
}
.sakura16 {
    right: -2%;
    animation-delay: -10s;
    animation-duration: 16s;
}
.sakura17 {
    right: -6%;
    animation-delay: 2.7s;
    animation-duration: 19s;
}
.sakura18 {
    right: -8%;
    animation-delay: -1.4s;
    animation-duration: 13s;
}
.sakura19 {
    right: 10%;
    animation-delay: 6.3s;
    animation-duration: 14s;
}
.sakura20 {
    right: 5%;
    animation-delay: 9s;
    animation-duration: 16s;
}

.sakura21 {
    right: -45%;
    animation-delay: 4s;
    animation-duration: 21s;
}

.sakura22 {
    right: -28%;
    animation-delay: -1.8s;
    animation-duration: 13s;
}

.sakura23 {
    right: 39%;
    animation-delay: 1.3s;
    animation-duration: 18s;
}

.sakura24 {
    left: 80%;
    animation-delay: 1.3s;
    animation-duration: 18s;
}

.sakura25 {
    left: 73%;
    animation-delay: -0.3s;
    animation-duration: 12s;
}

.sakura26 {
    left: 67%;
    animation-delay: 4s;
    animation-duration: 13s;
}

.sakura27 {
    left: 65%;
    animation-delay: -1.3s;
    animation-duration: 15s;
}

2.sakura28 {
    left: 55%;
    animation-delay: 0s;
    animation-duration: 13s;
}

.sakura29 {
    left: 48%;
    animation-delay: -2.3s;
    animation-duration: 16s;
}

.sakura30 {
    left: 76%;
    animation-delay: 0.1s;
    animation-duration: 13s;
}

/*アニメーションの設定*/
@keyframes Drop {
 0% { transform: translate(0, 0); opacity: 0;}
50% { transform: translate(5px, 140px); opacity: 1;}
100% { transform: translate(0, 700px); opacity: 0.2;}
}