@charset "utf-8";

#container{
    position: relative;
    z-index: 1;
    min-width: initial;
}

#keyvisual{
  background-image: url(/dreaming/1st_anniversary/book/asset/img/01_main_img_sp_191003.jpg);
	background-repeat: no-repeat;
	/*padding: 166.7% 0 0 0;*/
  padding: 137.3% 0 0 0;
	margin: 0 0 6% 0;
}

#keyvisual h1{
  top: 2%;
  left: 2%;
  margin: 0;
}

#keyvisual h1 img{ width:50%; }

/*==========================================
read
==========================================*/
#read{
	height: auto;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 1% 0 8%;
	background-size: auto 98%;
}
#read img{
	width: 95%;
	display: block;
	margin: 20px auto;
}
#read picture:nth-child(2) img{ margin: 3% auto 0; }

/*==========================================
shop
==========================================*/

#shop {
	height: auto;
	background: url(/dreaming/1st_anniversary/book/asset/img/03_background_sp.jpg) no-repeat;
	background-position: center;
	background-size: cover;
}

#shop h2 img{
	width: 60%;
	display: block;
	margin: 10% auto 7%;
}

#shop .information{
	width: 95%;
	padding: 10px;
	margin: 0 auto 5% ;
	border: 3px solid #EEE;
}

#shop .information dl{
	-webkit-background-size: 15%;
	background-size: 15%;
  padding: 0;
}

#shop .information dt{
	width: 100%;
	display: block;
	padding: 10% 0 1%;
}

#shop .information dt img{
	width: 70%;
}
#shop .information dd{
	width: 100%;
	display: block;
	padding: 0 2%;
}

#shop .information dd img{ width: 90%; }

#shop .information dd a img,
#shop .information dd img{
	width: 90%;
	margin: 7% auto 0;
}

#shop .attention{
	width: 95%;
	margin: 20px auto 50px;
	padding:3%;
}

#shop .information dd span {
  font-size: 1em;
  padding: 3% 0 0 0;
}

#shop .important{
  padding: 1em 0 !important;
}
#shop .important dt{
  padding: 1em 1em .5em;
}

#shop .important dd a img{
  margin: auto;
}

/*==========================================
product
==========================================*/

#product{ padding: 0; }


/*==========================================
point
==========================================*/

#point{ padding: 3% 0 0 0; }

figure{
	background-repeat: no-repeat !important;
	padding: 0 0 4% 0;
	height: auto;
}

figure img{
	display: block;
}

figure .point_contents{
  width: 100%;
  margin: 0 auto;
  padding: 5% 0;
}


figure p{
	position: absolute;
	top: 0;
	width: 15%;
	height: 15%;
}

figure h3{
	margin: 0 auto;
	padding: 8% 0 0 0;
}

figure.p1 h3,
figure.p3 h3{
	width: 85%;
}

figure h4{
	margin: 4% auto 3%;
}

figure.p1 p { background: url(/dreaming/1st_anniversary/book/asset/img/05_p1_num.png) no-repeat center;  background-size: 100%;}
figure.p2 p { background: url(/dreaming/1st_anniversary/book/asset/img/05_p2_num.png) no-repeat center;  background-size: 100%;}
figure.p3 p { background: url(/dreaming/1st_anniversary/book/asset/img/05_p3_num.png) no-repeat center;  background-size: 100%;}
figure.p4 p { background: url(/dreaming/1st_anniversary/book/asset/img/05_p4_num.png) no-repeat center;  background-size: 100%;}
figure.p5 p { background: url(/dreaming/1st_anniversary/book/asset/img/05_p5_num.png) no-repeat center;  background-size: 100%;}
figure.p6 p { background: url(/dreaming/1st_anniversary/book/asset/img/05_p6_num.png) no-repeat center;  background-size: 100%;}


figure.p1,figure.p2,figure.p3,
figure.p4,figure.p5,figure.p6{
    background-position: center;
    background-size: cover;  height: auto;
	height: auto !important;
}


/*==========================================
first reserve
==========================================*/

#first_reserve{
	background: url(/dreaming/1st_anniversary/book/asset/img/06_bg_decoration.png),url(/dreaming/1st_anniversary/book/asset/img/06_background.jpg);
	background-size: contain;
	background-repeat: no-repeat,repeat;
	background-position: left bottom,top;
	padding: 10% 0;
}

#first_reserve img:nth-child(1){ width: 80%; }
#first_reserve img:nth-child(2){
	width: 95%;
	margin:5% auto;
}

#first_reserve img:nth-child(3){ width: 95%; }

/*==========================================
further
==========================================*/

#further{
  -webkit-background-size: contain;
  background-size: cover;
  padding: 4% 0;
  text-align: center;
}

#further img{ width: 50%; }

/*==========================================
colopl shop
==========================================*/

#colopl_shop{ padding: 0; }

#colopl_shop .shop_contents{
	width: 95%;
	margin: 5% auto;
	padding: 2% 0;
}

#colopl_shop .set_contents{
	width: 95%;
	display: block;
	margin: 0 auto 7%;
}

#colopl_shop .set_contents img{
	width: 95%;
	display: block;
	margin: 5% auto;
}

#colopl_shop .benefits_list{ width: 100%; height: auto; }
#colopl_shop .benefits_list li{
	width: 40%;
	margin: 0 3% 3%;
}


#colopl_shop h2 img{
	width: 95%;
	display: block;
	margin: 5% auto;
}

#colopl_shop h3 img{
	width: 95%;
	display: block;
	margin: 0 auto 5%;
}

#colopl_shop h4 img{
	width: 50%;
	margin: 0 auto 5%;

}
#colopl_shop h5{
	margin: 0;
	padding: 3%;
}

#colopl_shop h5 img{ width: 50%; }


#colopl_shop a.store_btn{
  width: 90%;
  display: block;
  margin: 5% auto 3%;
}

#colopl_shop span{ margin:0 0 5% 0; }

/*==========================================
spec
==========================================*/
#spec{
  width: 100%;
	height: auto;
	background-position: center;
	background-size: cover;
	padding: 7% 0;
}

#spec article,
#spec article .spec_cover,
#spec article .spec_book{
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

#spec article .spec_cover img{ width: 50%; }

#spec article .spec_book img{ width: 90%; margin: 3% auto; }

#spec article .spec_book div.spec_txt{
	width: 95%;
	margin: 0 auto 3%;
	text-align: left;
	font-size: 1.2em;
}

#spec span{
	display: block;
	font-size: 1em;
}

#spec article ul{
	margin: 3% 0 0 0;
}

/*==========================================
reserve
==========================================*/

#reserve{ margin: 10% 0; }
#reserve h2 img{ margin: 5% auto; }

#reserve h3 img{
	width: 80%;
	display: block;
	margin: 5% auto 3%;
}

#reserve ul {
	width: 100%;
	padding: 0;
	text-align: center;
}

#reserve ul li{
	display: inline-block;
  	width: 44%;
	margin: 3%;
}

#reserve ul li p{ margin: 5px; }
#reserve ul li a img{ width: 90%; padding: 5%; }
#reserve ul li .store_btn a{ padding: 5% 3%; }

#reserve ul li img{ margin: 0 auto 3%; }
#reserve ul li h5 { min-height: inherit; padding: 2%; }
#reserve ul li p{ padding: 2%; }
#reserve ul li .store_btn a:after { display: none; }
#reserve ul li span {width: 90%; }
/*==========================================
twitter
==========================================*/

#twitter{
  width: 100%;
  margin: 0 auto
}

.timeline_area{ width: 90%; }

.timeline_area p{
	width: 100%;
	margin: 0 0 10% 0;
}

/*==========================================
message
==========================================*/

#message{
	background: url("/dreaming/1st_anniversary/book/asset/img/011_background.png") no-repeat;
	background-position: center;
	background-size: 800px;
	padding: 20% 0;
	overflow: hidden;
}
#page-top a {width: 80px;}
#page-top img{ width: 90%;}