@charset "utf-8";

/*==========================================
kv
==========================================*/
#keyvisual{
    position: relative;
    padding: 53% 0 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-image: url(../img/01_main_img_191003.png);
}

#keyvisual h1{
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -610px;
}

/*==========================================
read
==========================================*/
#read{
	width: 100%;
	height: 650px;
	padding: 30px 0;
	/*margin: 20px 0 50px;*/
  margin: 20px 0 0;
  background: url(../img/02_background.jpg) no-repeat,#FFF;
  border-top: 5px solid #EEE;
  border-bottom: 5px solid #EEE;
  background-position: center;
}
#read img{
	display: block;
	margin: 20px auto;
}

#read picture:nth-child(2) img{
	margin: 35px auto 0;
}

/*==========================================
shop
==========================================*/
#shop{
  width: 100%;
  padding: 10px 0 30px;
  background: url(/dreaming/1st_anniversary/book/asset/img/03_background_pc.jpg) no-repeat;
  background-size: cover;
  background-position: center bottom;
  text-align: center;
}

#shop h2 img{
	display: block;
	margin: 70px auto 30px;
}



#shop .information{
  width: 90%;
  max-width: 850px;
 padding: 15px;
 margin: 0 auto 1%;
 background:repeating-linear-gradient(-30deg, #f1accb 0, #f1accb 5px, #f09ec2 5px, #f09ec2 10px);
 border: 5px solid #EEE;
}


#shop .information dl{
	display: block;
	background: url(/dreaming/1st_anniversary/book/asset/img/03_box_sheep.png),#FFF;
	background-repeat: no-repeat;
	background-position: bottom right;
	-webkit-background-size: 15%;
	background-size: 15%;
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
	-ms-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
  padding: 0 0 3em 0;

}

/*left column*/
#shop .information dt{
	width: 95%;
  margin: 0 auto;
  padding: 10% 0 5%;
}

#shop .information dt img{
	display: block;
	margin: 0 auto;
}
/*right column*/
#shop .information dd{
	width: 90%;
  margin:0 auto;
}

#shop .information dd img{
	display: block;
	margin: 0 auto;
}

#shop .information dd img.b_sale{margin: 20px auto 0;}

#shop .information dd a img{ margin: 20px auto 30px; }

#shop .information dd a{
  width: 100%;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: .8em;
  color: #555;
}

#shop .important{
  text-align: center;
}

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

#shop .important dt{
  padding: 1em 0 .5em;
  color: #F00;
  font-weight: bold;
  font-size: 1.8em;
  line-height: 1.4em;
}

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

#shop .important dd p{
  margin: 0 0 1em 0;
  font-weight: bold;
  font-size: 1.4em;
}


/*
#shop .attention{
  width: 920px;
  margin: 20px auto 30px;
  background: #FFF;
  padding: 30px;
}

#shop .attention p{
  color: #ff297f;
  text-align: center;
  font-weight: bold;
}

#shop .attention ul li{ color: #F00; }
#shop .attention ul li:last-child{ color: #333;}*/

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

#product{
  width: 100%;
  padding: 0 0 50px 0;
  background: url(/dreaming/1st_anniversary/book/asset/img/04_background.png),url(/dreaming/1st_anniversary/book/asset/img/04_chara.png);
  background-position: top center, bottom center;
  background-repeat: no-repeat;
  background-size: 1760px 370px,1200px 227px;
}

#product h2 img{
	display: block;
  margin: 0 auto 40px;
}

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

#point{
  padding: 20px 0 0 0;
}

figure img{
  display: block;
  margin: 0 auto;
}

figure .point_contents{
  width: 1100px;
  margin: 30px auto;
  padding: 80px 0;
}

figure.p1{ background: url(/dreaming/1st_anniversary/book/asset/img/05_p1_background.png) center; }
figure.p2{ background: url(/dreaming/1st_anniversary/book/asset/img/05_p2_background.png) center; }
figure.p3{ background: url(/dreaming/1st_anniversary/book/asset/img/05_p3_background.png) center; }
figure.p4{ background: url(/dreaming/1st_anniversary/book/asset/img/05_p4_background.png) center; }
figure.p5{ background: url(/dreaming/1st_anniversary/book/asset/img/05_p5_background.png) center; }
figure.p6{ background: url(/dreaming/1st_anniversary/book/asset/img/05_p6_background.png) center; }

figure{
  background-repeat: no-repeat !important;
  background-position: center top;
  height: 632px;
  position: relative;
}

figure h4{margin: 30px 0 20px;}

figure p{
  position: absolute;
  top: 0;
  width: 178px;
  height: 124px;
  text-indent: -9999px;

}

figure p img{ width: 100%; }

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


/*==========================================
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);
  -webkit-background-size: 100%;
  background-size: 100%;
  background-position: bottom center, top center;
  background-repeat: no-repeat,repeat-y;
  padding: 60px 0;
	margin: 50px 0 0 0;
}

#first_reserve img{
  display: block;
  margin: 0 auto;
}

#first_reserve img:nth-child(2){
  margin:40px auto 50px;
}

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

#further{
  background: url(/dreaming/1st_anniversary/book/asset/img/07_more_bg.jpg) no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  padding: 35px 0  19px;
  text-align: center;
}

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

#colopl_shop{
	padding: 50px;
	position: relative;
	overflow: hidden;
}

#colopl_shop .shop_contents:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 120%;
  height: 600px;
  margin: -300px -10% 0;
  background: #FFF;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
  z-index: -1;
}

#colopl_shop .shop_contents:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(/dreaming/1st_anniversary/book/asset/img/07_background.jpg);
	z-index: -2;
}


#colopl_shop .shop_contents{
	width: 1000px;
	margin: 0 auto;
	padding: 50px 0;
	-ms-box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.32);
	box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.32);
	background: #FFF;
}

#colopl_shop .set_contents{
  display: block;
	margin: 30px auto 50px;
}

#colopl_shop h2 img,
#colopl_shop h3 img,
#colopl_shop h4 img{
	display: block;
	margin: 0 auto 30px;
}
#colopl_shop h4 img{ width: 280px; }

#colopl_shop .set_contents img{ margin: 0 10px; }


#colopl_shop .benefits_list{
  width: 1000px;
	margin: 0 auto;
  text-align: center;
}

#colopl_shop .benefits_list img{
  border: 1px solid #EEE;
  width: 95%;
}

#colopl_shop .benefits_list li{
  width: 230px;
  text-align: center !important;
  display: inline-block;
  margin: 10px 5px;
}

#colopl_shop .benefits_list li p{
text-align: center;
}

#colopl_shop h5{
  text-align: center;
  margin: 20px 0;
}

#colopl_shop a.store_btn{
  width: 566px;
  display: block;
  margin: 30px auto 20px;
}

#colopl_shop del{
  width: 100%;
  text-align: center;
  display: inline-block;
  color: #F00;
}

/*==========================================
spec
==========================================*/

#spec{
  width: 100%;
  background: url(/dreaming/1st_anniversary/book/asset/img/08_background.png) no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  height: 534px;
	margin: 50px 0;
}

#spec article{
   width: 1100px;
   margin: 0 auto;
   text-align: center;
}

#spec article .spec_cover{
  width: 316px;
  float: left;
  display: block;
  padding: 40px 0 0 0;
}

#spec article .spec_book{
  width: 764px;
  display: block;
  float: left;
  padding: 65px 0 0 35px;
}

#spec article div.spec_txt{
  display: block;
  background: #FFF;
  -ms-box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.32);
  box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.32);
  padding: 20px;
  margin: 10px 0 0 0;
  line-height: 1.7em;
  font-size: 1em;
  text-align: left;
}

#spec article div.spec_txt p{
  color: #ff297f !important;
  margin: 10px 0 0;
}

#spec article ul{
  font-size: 0.8em;
  color:#F00;
  border: 1px solid #CCC;
  padding: 10px;
  background: #EEE;
  margin: 10px 0 0 0;
}

#spec article ul li:last-child{
  color: #333;
}


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

#reserve{
	background: url(/dreaming/1st_anniversary/book/asset/img/09_background.jpg);
	padding: 50px 0;
	margin: 0 0 50px;
}



#reserve h2 img{
	display: block;
	margin: 20px auto ;
}

#reserve h3{
  text-align: center;
	display: block;
	margin: 40px auto 0;
  font-size: 1.8em;
}


#reserve ul {
  width: 1130px;
  text-align: center;
  margin:0 auto;
  padding:10px;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-box;
  display:-webkit-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  -moz-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}


#reserve ul li{
  width: 30%;
  max-width: 330px;
  -ms-box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.32);
  box-shadow: 0px 0px 9px -1px rgba(0, 0, 0, 0.32);
  background: #FFF;
  margin: 20px;
}

#reserve ul li img{
  display: block;
  margin: 0 auto 15px;
}

#reserve ul li h5{
  min-height: 60px;
  padding: 0 20px;
}

#reserve ul li p{
  text-align: right;
  margin:  10px 0 10px 0;
  padding: 0 20px;
}

#reserve ul li span{
  margin: 0 0 5px 0;
  display: inline-block;
  line-height: 1.2em;
  font-size: 0.75em;
  background: #CCC;
  padding: 10px;
  color: #666;
}

#reserve ul li .store_btn a{
  color: #FFF;
  width: 90%;
  display: block;
  margin: 0 auto 20px;
  text-align: center;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 0.9em;
  position: relative;
  transition-duration: 0.3s;
}

#reserve ul li .store_btn a:hover{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/*#reserve ul li a.store{ background: #017dc5; }*/
#reserve ul li a.store{ background: #017dc5; }
/*#reserve ul li a.animate{ background: #335fab; }*/

#reserve ul li p.animate{
  background: #BBB;
  color: #FFF;
  width: 90%;
  display: block;
  margin: 0 auto 20px;
  text-align: center;
  padding: 15px 30px;
  text-decoration: none;
  font-size: 0.9em;
  position: relative;
  transition-duration: 0.3s;

}


#reserve ul li .store_btn a:after{
  position: absolute;
  content: "";
  right: 25px;
  display: inline-block;
  width: 20px;
  height: 18px;
  background: url(/dreaming/1st_anniversary/book/asset/img/09_btn_icon.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/*==========================================
twitter
==========================================*/

#twitter{
  width: 1280px;
  margin: 100px auto;
}

#twitter h2 img{
	display: block;
	margin: 20px auto ;
}

.timeline_area{
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.timeline_area p{
  width: 45%;
  margin: 2%;
  display: inline-block;
    background-size: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cdfdff), color-stop(50%, #e08cfc), to(#fff65c));
    background-image: -webkit-linear-gradient(top, #cdfdff 0%, #e08cfc 50%, #fff65c 100%);
    background-image: -o-linear-gradient(top, #cdfdff 0%, #e08cfc 50%, #fff65c 100%);
    background-image: linear-gradient(to bottom, #cdfdff 0%, #e08cfc 50%, #fff65c 100%);
    padding: 6px;
	line-height: 0;
}

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

#message{
  background: url("../img/011_background.png") no-repeat;
  background-position: center;
  background-size: 1920px;
  padding: 250px 0;
}

#message img{
  display: block;
  margin: 0 auto;

}



.footerWrap {
  background-image: linear-gradient(45deg, #61c4ff, #f97ddd);
  min-width:1280px;
}

/*==========================================
appArea
==========================================*/
.appArea {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
}

.appArea .logo {
  padding-top: 50px;
  text-align: center;
}

.appArea .text {
  position: relative;
  width: 290px;
  padding: 36px 0 18px;
  margin: 0 auto;
  text-align: left;
}

.appArea .text li {
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
}

.appArea .draft {
  display: inline-block;
  width: 284px;
  padding: 8px 0;
  margin: 40px auto 0;
  background: #fff;
  color: #00ccff;
  font-size: 18px;
  letter-spacing: .2em;
  text-align: center;
}

.appArea p {
  padding: 6px 0 30px;
  color: #fff;
  font-size: 13px;
  text-align: center;
}

/*==========================================
app download
==========================================*/
.footer_app {
  max-width: 675px;
  min-height: 225px;
  padding: 32px 0 0;
  margin: 40px auto 0;
  background-image: url(/dreaming/assets/img/pc_app_bg.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
}

.footer_app h2 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: -32px;
  margin-bottom: 11px;
}

.footer_app h2 img {
  max-width: 346px;
}

.footer_app h2:before {
  width: 140px;
  height: 140px;
  margin-right: 20px;
  border: 4px solid #fff;
  background-image: url(/dreaming/assets/img/game_icon.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 24%;
  content: "";
}

.footer_app a:last-child {
  margin: 0 0 0 10px;
}

/*==========================================
Footer
==========================================*/
.footerArea {
  position: relative;
  padding: 20px 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.footerArea .appNotice {
  display: inline-block;
  width: 535px;
  padding: 10px 20px;
  margin: 15px auto 0;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.5;
}

.footerArea .appNotice li {
  margin: 0 0 10px 20px;
  list-style-type: disc;
}

.footerArea .appNotice li:last-child {
  margin: 0 0 0 5px;
  list-style-type: none;
}

.footerArea .link {
  padding: 30px 0;
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

.footerArea .link a:link, .footerArea .link a:visited {
  padding: 0 15px;
  color: #fff;
}

.footerBox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.footerBox .coloplLogo {
  margin-bottom: 20px;
}

.footerCaution {
  margin: 0 0 0 12px;
}

.footerCaution li {
  margin: 0 0 0 2em;
  line-height: 1.4;
  list-style: disc;
  list-style-position: outside;
  text-align: left;
}

.copyright {
  padding: 0 0 20px;
  margin-top: 0%;
  font-size: 10px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 1.2em;
    line-height: 1.6;
  }
  a[href^="tel"] {
    pointer-events: auto;
  }

	.footerWrap{
		 min-width: initial;
	}
  .appArea {
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
  }
  .appArea .logo {
    padding-top: 32px;
  }
  .appArea .logo img {
    width: 160px;
    height: auto;
  }
  .appArea .draft {
    display: block;
    width: 100%;
    max-width: 284px;
    box-sizing: border-box;
    padding: 10px 20px;
    margin: 25px auto 0;
    font-size: 15px;
    letter-spacing: .2em;
  }
  .appArea .text {
    position: static;
    width: auto;
    padding: 30px 0 35px;
    margin: 0 auto;
    text-align: left;
  }
  .appArea .text li + li {
    margin-top: 5px;
  }
  .appArea p {
    padding-top: 3px;
    padding-bottom: 15px;
  }
  .footerArea {
    padding-right: 15px;
    padding-left: 15px;
  }
  .footerArea .link {
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .footerArea .link a:link, .footerArea .link a:visited {
    padding-right: 5px;
    padding-left: 5px;
  }
  .footerArea .link a:link:first-child, .footerArea .link a:visited:first-child {
    padding-left: 0;
  }
  .footerArea .link a:link:last-child, .footerArea .link a:visited:last-child {
    padding-right: 0;
  }
  .footerCaution {
    margin-left: -15px;
  }
}

@media screen and (max-width: 640px) {
  .footer_app {
    width: 100%;
    max-width: 675px;
    min-height: 0;
    padding-bottom: 24px;
    background-image: url(/dreaming/sp/assets/img/footer_app_line.png), url(/dreaming/sp/assets/img/footer_app_line.png);
    background-position: center top, center bottom;
    background-repeat: no-repeat;
    background-size: auto 13px;
    font-size: 0;
  }
  .footer_app h2 {
    align-items: flex-start;
    padding: 0 0 0 0;
    margin: 0 auto 8px;
    font-size: 12px;
  }
  .footer_app h2 img {
    width: calc(100% - 64px - 10px);
  }
  .footer_app h2::before {
    position: static;
    top: auto;
    left: auto;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    margin-right: 10px;
    border-width: 2px;
  }
  .footer_app a {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
  }
  .footer_app a:first-of-type {
    padding-right: 2px;
  }
  .footer_app a:last-child {
    padding-left: 2px;
    margin-left: 0;
  }
}

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