@charset "utf-8";

#top {
    margin-bottom: 30px;
}
#top p{
  font-size: 15px;
    text-align: center;
}
main article {
    background-color: #fff;
    margin-top: 38vw;
    padding-top: 2%;
}
main h2 img {
    height: auto;
}
p {
  font-size: 14px ;
    letter-spacing: 1px ;
}
section {
  width: 895px;
  margin: 0 auto;
}
/*--------------------------
design-album
---------------------------*/
div#design-album h2,
div#mybook h2,
div#new-mybook h2 {
    font-size: 300%;
    color: #f98f53;
}
h2:before,
h2:after,
#original-goods h3:before,
#original-goods h3:after {
  content: '-';
}
div#design-album ul {
    display: flex;
    margin: 50px auto;
    justify-content: start;
    flex-wrap: wrap;
}
div#design-album ul li {
    width: 45%;
    padding: 20px;
}
div#design-album ul li .inner_box {
    text-align: left;
    width: 50%;
}
p.with_tax {
    text-align: right;
}
div#design-album ul li:nth-child(1) {
  width: 100%;
  background: url(../images/miru_img.jpg)left center no-repeat #fff2cc;
    background-size: 31%;
  padding: 20px;
}
#design-album ul li.miru h3 {
    font-size: 26px;
    margin: 0 42% 10px;
    color: #ff3c18;
    position: relative;
}
#design-album ul li.miru h3:before {
    content: '';
    background: url(../images/album_new.png)right top no-repeat;
    background-size: 100%;
    top: -50px;
    right: -100px;
    height: 90px;
    width: 90px;
    position: absolute;
}
#design-album ul li.miru h3:after {
    content: '-MIRU-';
    font-size: 15px;
    margin-left: 15px;
    vertical-align: middle;
}
div#design-album ul li.miru .inner_box {
    text-align: left;
    width: 50%;
    margin: 0 42%;
}
div#design-album ul li:nth-child(2) {
    background: url(../images/clear_img.jpg)right center no-repeat;
    background-size: 50%;
    border-bottom: solid 3px #f1f1f1;
    border-right: solid 3px #f1f1f1;
}
div#design-album ul li:nth-child(3){
  background: url(../images/natural-img.jpg)right center no-repeat;
    background-size: 50%;
    border-bottom: solid 3px #f1f1f1;
}
div#design-album ul li:nth-child(4){
  background: url(../images/pure-album_img.jpg)right center no-repeat;
    background-size: 43%;
    border-bottom: solid 3px #f1f1f1;
    border-right: solid 3px #f1f1f1;
}
div#design-album ul li:nth-child(5){
  background: url(../images/when-hana_img.jpg)right center no-repeat;
    background-size: 50%;
    border-bottom: solid 3px #f1f1f1;
}
div#design-album ul li:nth-child(6){
  background: url(../images/charm_img.jpg)right center no-repeat;
    background-size: 50%;
    border-right: solid 3px #f1f1f1;
}
div#design-album ul li:nth-child(2),
div#design-album ul li:nth-child(3) {
  margin-top: 20px;
}
#design-album .box p.with_tax {
    text-align: right;
    margin-top: -10px;
}
#design-album h3 {
  display: block;
  text-align: left;
  margin-bottom: 15px;
}
#design-album h3 img {
  width: auto;
  height: 44px;
}
#design-album .pages_size {
  margin-bottom: 15px;
}
.pages_size span {
  color: #fba45e;
  display: block;
  font-weight: bold;
}
#new-mybook .price span, #design-album .price span {
  display: block;
  color: #ff3c18;
  font-size: 27.6px;
  text-align: right;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: -7px;
  line-height: 2;
}
#new-mybook .price span {
    margin-bottom: -15px;
}
#design-album h3 + p {
  margin-bottom: 15px;
  line-height: 1.2;
  height: 80px;
}
#original-goods img {
    margin-top: 5%;
}

#original-goods h3 {
    font-size: 20px;
    color: #f98e53;
}
#original-goods {
    margin-top: 50px;
}
/*--------------------------
mybook
---------------------------*/
#original-goods .price span {
    display: inline-block;
    color: #fba45e;
    font-size: 20.1px;
    text-align: right;
    letter-spacing: 2px;
    margin-top: -7px;
}

/* two-album */
#two-album h2 + p {
    margin: 0 auto 20px;
}

/*-------------------
new-mybook
-------------------*/
#new-mybook {
    margin: 10% auto;
}
#new-mybook h2 {
  position: relative;
}
#new-mybook h2:before {
    content: '';
    background: url(../images/album_new.png)right top no-repeat;
    background-size: 100%;
    top: -50px;
    right: -100px;
    height: 90px;
    width: 90px;
    position: absolute;
}
#new-mybook img {
  margin-top: 10px;
}
#new-mybook .box2 {
  width: 500px;
  float: right;
  margin-top: 10px;
}
#new-mybook .pages_size .left {
  margin-right: 20px;
}
#new-mybook .price.right {
    margin: 0 auto;
}
/*-------------------
bnr_reserve
-------------------*/
article .bnr_reserve {
    margin: 0 auto;
    padding: 30px 0;
    width: 100%;
}

@media screen and (min-width:641px){
    .design-album_outer-box {
        margin: 30px 0 50px;
    }
    #design-album {
        margin: 0 auto;
    }
    #design-album h2, #mybook h2 {
        text-align: center;
    }
    #design-album h2 img,#mybook h2 img {
        width: 416px;
        height: auto;
    }
    .design-album_inner-box {
        width: 416px;
        float: left;
        padding: 20px 15px 10px;
        position: relative;
    }
    .design-album_inner-box.box01 {
        border-right: solid 3px #f1f1f1;
        border-bottom: solid 3px #f1f1f1;
    }
    .design-album_inner-box.box02 {
        border-bottom: solid 3px #f1f1f1;
    }
    .design-album_inner-box.box03 {
        border-bottom: solid 3px #f1f1f1;
    }
    .design-album_inner-box.box04 {
        border-left: solid 3px #f1f1f1;
        border-bottom: solid 3px #f1f1f1;
    }
    .design-album_inner-box.box05 {
        border-right: solid 3px #f1f1f1;
    }
    #design-album .box {
        width: 208px;
    }
    .album_new {
        position: absolute;
        top: -19px;
        right: 119px;
    }

    #two-album.border {
        border-bottom: solid 3px #f1f1f1;
    }
    #two-album .box {
        width: 416px;
        padding: 20px 15px 10px;
    }
    #pasta.border{
        border-left: solid 3px #f1f1f1;
    }
    #movie.border, #house.border, #photo_charm.border {
        border-right: solid 3px #f1f1f1;
    }
    p.price.right {
        margin-top: 20px;
        text-align: right;
    }
}
 
@media screen and (max-width:640px){
    main article {
        margin-top: 0;
        width: 95%;
        margin: 0 auto;
    }
    section {
        width: 100%;
    }
    div#design-album ul {
        margin: 30px auto;
    }
    div#design-album ul li {
        width: 100%;
        padding: 20px 10px;
    }
    div#design-album ul li:nth-child(2),
    div#design-album ul li:nth-child(4),
    div#design-album ul li:nth-child(6){
        border-right: none;
    }
    #design-album ul li.miru h3 {
        font-size: 25px;
        margin: 0 auto 10px 50%;
        color: #ff3c18;
        position: relative;
    }
    #design-album ul li.miru h3:before {
        content: '';
        top: -50px;
        right: -10px;
        height: 70px;
        width: 70px;
    }
    div#design-album ul li.miru .inner_box {
        width: 50%;
        margin: 0 51%;
    }
    div#design-album ul li:nth-child(1) {
        background-size: 50%;
        padding: 20px;
    }
    .design-album_outer-box {
        margin-top: 30px;
    }
    .design-album_inner-box {
        zoom:1;
        clear: both;
    }
    .design-album_inner-box:before,
    .design-album_inner-box:after {
        content: "";
        display: block;
        height: 0;
        overflow: hidden;
    }
    .design-album_inner-box:after,
    .design-album_inner-box:after {
        clear: both;
    }
    #design-album h2 img {
        width: auto;
        height: auto;
    }
    #design-album .macaroon_notes {
        display: block;
        font-size: 12px;
    }
    .design-album_inner-box {
        width: 100%;
        position: relative;
        margin-bottom: 25px;
        padding-bottom: 18px;
    }
    .design-album_inner-box.box01,.design-album_inner-box.box02,
    .design-album_inner-box.box03,.design-album_inner-box.box04,
    .design-album_inner-box.box05 {
        border-bottom: solid 2px #f1f1f1;
    }
    #design-album .box {
        width: 50%;
    }
    .album_new {
        position: absolute;
        top: -10px;
        left: 47vw;
        width: 15vw;
    }
    #new-mybook .price span, #design-album .price span {
        font-size: 23px;
    }

    .img_box01 {
        margin-bottom: 10px;
    }

    p.price.right {
        margin-top: 20px;
    }
    #two-album >div {
        margin-bottom: 20px;
    }
    #two-album p.price.right {
        margin-top: 10px;
    }

    #new-mybook h2:before {
        content: '';
        top: -20px;
        right: -80px;
        height: 60px;
        width: 60px;
    }
    #new-mybook .box2 {
        width: 100%;
        float: right;
        margin-top: 10px;
    }

    #top {
        margin: 10px auto 20px;
    }
    #top p{
        font-size: 15px;
        text-align: center;
    }
    p {
        font-size: 12px;
    }
}