@charset "utf-8";
#container{
    min-width: 1280px;
    background: url(/dreaming/1st_anniversary/goods/asset/img/00_bg_cloud.png) no-repeat center bottom;
    background-size: 100%;
    padding: 0 0 10%;
}
/*==========================================
 kv
==========================================*/
#keyvisual {
    position: relative;
    padding: 35.7% 0 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-image: url(/dreaming/1st_anniversary/goods/asset/img/kv_background.jpg);
}
#keyvisual a{
    position: absolute;
    bottom: -2%;
    left: 43%;
    padding: 30% 0 0;
    width: 15%;
    height: 0;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    background-image: url(/dreaming/1st_anniversary/goods/asset/img/logo_1st-anniversary.png);
    text-indent: -9999px;
}
#nav_area{
    width: 100%;
    padding: 2% 0 1.5%;
    background: #04c5ef;
    -moz-box-shadow: 2px 3px 5px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 2px 3px 5px 1px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 2px 3px 5px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 3px 5px 1px rgba(0, 0, 0, 0.3);
}
h1 img{
    width: 100%;
    max-width: 980px;
    display: block;
    margin: 0 auto;
}
.nav_btn{
    max-width: 1280px;
    margin: 1.5% auto 0;
    text-align: center;
}
.nav_btn a {
    background: #FFF;
    width: 35%;
    padding: 2%;
    margin: 0 2%;
    outline:solid 3px #FFF;
    display: inline-block;
    position: relative;
    -moz-box-shadow: 0px 5px 6px -2px rgba(0, 117, 142, 1);
    -webkit-box-shadow: 0px 5px 6px -2px rgba(0, 117, 142, 1);
    -ms-box-shadow: 0px 5px 6px -2px rgba(0, 117, 142, 1);
    box-shadow: 0px 5px 6px -2px rgba(0, 117, 142, 1);
}
.nav_btn a img{
    width: 80%;
    max-width: 315px;
    display: block;
    margin: 0 auto;
}
.nav_btn a::before {
    content: "";
    bottom: 0;
    right: 0;
    border-top: 1em solid transparent;
    position: absolute;
    z-index: 100;
}
.nav_btn a.fair{ border: #00ccff 3px solid; }
.nav_btn a.fair::before{ border-right: 1em solid #00ccff; }
.nav_btn a.shop{ border: #ff297f 3px solid; }
.nav_btn a.shop::before{ border-right: 1em solid #ff297f; }
/*==========================================
overview
==========================================*/
.bg_star{
    background: url(/dreaming/1st_anniversary/goods/asset/img/02_bg_description_star.png) no-repeat;
    background-size: 98%;
    background-position: center top;
}
#overview{
    width: 100%;
    max-width: 1280px;
    text-align: center;
    margin: 5% auto;
}
#overview article{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background: rgba(255,255,255,0.7);
    border: 5px dotted #CCC;
    padding: 2%;
    border-radius: 2px;
}

#overview article h2{ margin: 2% 0; }
#overview article h3{ margin: 2% 0; }
#overview article h3 span{ color: #00b3e0; }
.info-box{
    background: url(/dreaming/1st_anniversary/goods/asset/img/02_chara_yanagi.png) no-repeat,
    url(/dreaming/1st_anniversary/goods/asset/img/02_chara_yuma.png) no-repeat;
    background-position: right center,left center;
}
#overview article ul{
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center !important;
}
#overview article li{
    max-width: 350px;
    width: 50%;
    padding: 4% 0 2.5%;
    margin: 3% 0;
    border: solid 3px#04c5ef;
    position: relative;
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(250, 250, 250, 1) 6px, rgba(250, 250, 250, 1) 12px );
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
#overview article li:before{
    content: "";
    border: solid 2px #04c5ef;
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    z-index: 1;
}
#overview article li p{  width: 100%; z-index: 2; }
#overview article li p span{ font-size: .75em; }
#overview article li:first-child{
    margin-left:4%;
    margin-right:4%;
}
#overview article li a{ text-decoration: underline; }
#overview article li img{
    position: absolute;
    top: -18px;
    left:50%;
    margin: 0 0 0 -70px;
    z-index: 3;
}
#overview article .img_novelty{
    max-width: 860px;
    width: 100%;
    border: 1px solid #EEE;
    margin: 3% 0 0 0;
}
.attention{ text-align: left; margin: 2% 0 0 0; }
/*==========================================
overview
==========================================*/
#goods{
    position: relative;
    margin: 10% 0 0 0;
}
#goods article{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 6%;
    background: rgba(255,255,255,0.7);
    border-bottom: 5px dotted #CCC;
    border-left: 5px dotted #CCC;
    border-right: 5px dotted #CCC;
    padding: 2%;
    border-radius: 2px;
}
#goods hr.top_line{
    width: 100%;
    height: 10px;
    background: url(/dreaming/1st_anniversary/goods/asset/img/00_stripe_line.png) repeat-x;
    border:none;
    margin: 0;
}
#goods hr{
    width: 100%;
    height: 1px;
    border:none;
    margin: 2.5% 0;
    background: #DDD;
}
#goods h2 img{
    display: block;
    margin: -15.5% auto 0;
}
#goods li img{
    width: 90%;
    max-width: 260px;
    border: 2px solid #EEE;
}
#goods li p{ margin: 10px 0 5px; line-height: 1.6em; font-size: .9em;}
#goods li span{ font-weight: bold; font-size: .9em; }
#goods ul{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center !important;
}
#goods ul.animate{ margin-top:2%;}
#goods ul.item_poach li{ width: 100%; }
#goods article li{ width: 23%; margin: 2% 1%; }
#goods ul.item_poach li img{ max-width: 800px; }
#goods h3{
    width: 80%;
    background: #335fab;
    color: #FFF;
    margin: 0 auto 10px;
}
#notes h2 img,
#shop img {
    display: block;
    margin: 1% auto;
}

.support{
    text-align: center;
    margin: 40px 0 0;
}


/*==========================================
notes
==========================================*/
#notes article{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto 3%;
    background: rgba(255,255,255,0.7);
    border: 5px dotted #CCC;
    padding: 1.5% 1%;
    border-radius: 2px;
}
/*==========================================
shop
==========================================*/
#shop{ margin: 5% 0 0; text-align: center; }
#shop p{ margin: 3% 0 2%;}
#shop a{ display: inline-block; }

#page-top {
	position: fixed;
	bottom: 1%;
	right: 0;
	z-index: 2;
  }
#page-top a {
	display: block;
	text-decoration: none;
}

/*==========================================
SP
==========================================*/
@media screen and (max-width: 768px) {

#container{
    min-width: initial;
    background: url(/dreaming/1st_anniversary/goods/asset/img/00_bg_cloud.png) no-repeat center bottom;
    background-size: 100%;
    padding: 0 0 10%;
}

#keyvisual {
    width: 100%;
    background-position: top;
    background-image: url(/dreaming/1st_anniversary/goods/asset/img/kv_main_sp.png);
    padding: 151.3% 0 0;
    margin: 0 0 2% 0;
}

#keyvisual a{ display: none; }
#nav_area{ padding: 7% 0 5%; }

#nav_area h1 img{ width: 85%; }

.nav_btn { width: 100%; }
.nav_btn a {
    width: 90%;
    display: block;
    margin: 5% auto 7%;
    padding: 5% 0;
}
.nav_btn a img{ width: 50%; }
/*==========================================
SP > overview
==========================================*/

#overview article h2{ margin: 5% 0; }
#overview article h3{ margin: 5% 0; font-size: 1.2em; }

#overview article{
    width: 95%;
    margin: 0 auto;
}
.bg_star,.info-box{ background:none; }
#overview article .img_novelty { width: 95%; }

.attention{ width: 95%; margin: 2% auto; }
.attention p{ margin-bottom:2%; }

#overview article ul{ font-size: 1.3em; }
#overview article li{
    display: block;
    width: 95%;
    margin: 5% auto !important;
    height: 20%;
 }
 #overview article li:first-child{ padding: 10% 0 0; }
 #overview article li:last-child { padding: 10% 0 9%; }

#overview article li a{
    position:absolute;
    z-index:3;
    width:100%;
    left:0;
 }
 #overview article li:first-child{padding: 8% 0 5%;}

/*==========================================
SP > goods
==========================================*/
#goods{ margin: 30% 0 0}
#goods h2 img { width:60%; margin: -20% auto 0; }
#goods article{ width: 95%; }
#goods article li{ width: 50%; margin: 3% 0; }

.support{
    text-align: center;
    margin: 5% 0 3%;
}

/*==========================================
SP > notes
==========================================*/
#notes{ margin: 15% 0;}
#notes article{
    width: 95%;
    padding: 3%;
    margin: 5% auto 5%;
}
#shop{  margin: 15% 0;}
#shop a img{ width: 95%; }
#shop p{ margin: 7% 0 5%;}


#page-top a {width: 80px;}
#page-top img{ width: 90%;}


}