@charset "utf-8";

#top {
    margin-bottom: 30px;
}
#top p{
  font-size: 15px;
    text-align: center;
}
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 h3 {
    font-size: 20px;
    color: #f98e53;
}
#original-goods img {
    margin-top: 5%;
}

/*--------------------------
mybook
---------------------------*/
#original-goods {
	margin-top: 50px;
}
#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;
	}
}

/*--------------------------
SP
---------------------------*/
@media screen and (max-width:640px){
	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;
    }

	div#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;
  	}
    p {
        font-size: 12px;
    }
    #top p{
    	font-size: 15px;
    	text-align: center;
    }
    h1.main-title img {
        height: 60px;
    }
}