html{
     width: 100%;
     max-width: 800px;
     margin: 0 auto;
     font-family: 'Noto Serif', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

 body#lp{
     width: 100%;
     background-size: 100vw;
     background-position:0 -34vw;
     margin-top: .1vw;
}
 #lp img{
     width: 100%;
}
 #lp #lp01 .text{
     width: 88%;
     margin: 0 auto;
}
 #lp #lp01 .text p{
     width: 100%;
     margin-top: 3vw;
     font-size: 3.4vw;
     line-height: 5.8vw;
     letter-spacing: -.3vw;
}




 #lp #lp02{
     margin-top: 5.7vw;
}
 #lp #lp02 .text a{
     display: block;
     height: 4vw;
     width: 83vw;
     margin: 0 auto 8vw auto;
     padding: 2vw 4vw 2vw 0;
     color: #FFF;
     background-color:#A0A0A0;
     background-image:url(../img/button-bg1.jpg);
     background-repeat: no-repeat;
     background-position: 77vw 1.9vw;
    background-size: 7vw;
     font-size: 4vw;
     text-align: center;
     text-decoration: none;
}
#lp #lp03 a,#lp #lp05 a,#lp #lp09 a,#lp_add01 a{
     display: block;
     width: 78vw;
     margin: 0 auto;
}
 #lp #lp04{
     background: #EDDCCE;
     margin-top: 9.7vw;
     padding-top: 2.8vw;
     padding-bottom: 4vw;
}
 #lp #lp04 .desc{
     width: 92vw;
     margin: 0 auto;
     padding-bottom: 3vw;
     background: #FFF;
     border-radius: 1vw;
}
 #lp #lp04 .desc h3#point1{
     width: 87vw;
     margin: 5vw auto 1vw auto;
     padding-top: 4vw;
}
 #lp #lp04 .desc .image-s{
     display: inline-block;
     width: 53.5vw;
     margin-left: 1vw;
	 position: relative;
	 top: 5vw;
}
 #lp #lp04 .desc .image-l{
     display:block;
     width: 90vw;
     margin: 8vw auto;
}
 #lp #lp04 .desc .text{
     display: inline-block;
     width: 35vw;
}
 #lp #lp04 .desc>p{
     display: block;
     width: 83vw;
     margin: 4vw;
     font-size: 3.5vw;
     line-height: 6vw;
}
 #lp #lp04 .desc .text p{
     position: relative;
     font-size: 3.5vw;
     margin: 2.5vw 1vw;
     line-height: 6vw;
}
 #lp #lp04 .desc .point1 p:first-child{
     top: -10vw;
}
 #lp #lp04 .desc .point1 p:last-child{
     top: -9vw;
}
 #lp #lp04 .desc span{
     position: relative;
     top: -1vw;
     padding:0 2vw;
     font-size: 2.8vw;
}
/* #lp #lp04 .desc iframe{
     display: block;
     width: 88vw;
     height: 49.5vw;
     margin: 6vw auto;
}*/
 #lp #lp04 .desc h3#point2{
     width: 83vw;
     margin-left: 5vw;
     margin-bottom: -10vw;
     padding-top: 4vw;
}
 #lp #lp04 .desc .point2{
     position: relative;
     top: 9vw;
}
 #lp #lp06{
     margin-top: 7vw;
     padding: 5vw 0;
     background: #EDDCCE;
}
 #lp #lp06 img{
     display: block;
     margin: 0 auto;
     width: 92vw;
}
 #lp #lp07{
     margin-top: 9vw;
}
 #lp #lp07 a{
     display: block;
     margin: 0 auto;
     width: 92vw;
     margin-bottom: 3.2vw;
}
 #lp #lp08{
     margin-top: 10vw;
}
 #lp #lp08>div{
     background: #f0f0f0;
}
 #lp #lp08 .links{
     width: 92vw;
     margin: 2vw auto 6vw auto;
     padding-bottom: 5vw;
}
 #lp #lp08 .links a,#lp #lp08 .links div{
     display: inline-block;
     width: 44vw;
     text-align: center;
     background-color: #FFF;
     color: #FFF;
     text-align: center;
     text-decoration: none;
     border-style: solid;
     border-width: .1vw;
     border-color: #FFF;
     border-radius: 1.2vw;
}
 #lp #lp08 .links a:last-child,#lp #lp08 .links div:last-child{
     margin-left: 1vw;
}
 #lp #lp08 .links a span,#lp #lp08 .links div span{
     display: block;
     font-size: 4.8vw;
     margin: 1vw;
     padding: 2vw 1vw;
     border-style: solid;
     border-width: .3vw;
     border-color: #FFF;
     border-radius: 1.2vw;
}
 #lp #lp08 #color-shape .links div{
     position: relative;
     z-index: 1000;
     background: #6b95bc;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
     background: radial-gradient(ellipse at center, #6b95bc 29%,#5c7ea0 93%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     border-color: #6b95bc;
}
 #lp #lp08 #color-shape .links a:last-child,#lp #lp08 #color-shape .links a .story-detail,#lp #lp08 #color-shape .links div .story-detail{
     color: #6b95bc;
     border-color: #6b95bc;
}
 #lp #lp08 #stories .links div{
     background: #df7746;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
     background: radial-gradient(ellipse at center, #df7746 0%,#df533a 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     border-color: #df7746;
}
 #lp #lp08 #stories .links a:last-child,#lp #lp08 #stories .links a .story-detail,#lp #lp08 #stories .links div .story-detail{
     color: #df7746;
     border-color: #df7746;
}
 #lp #lp08 #fairytale .links div{
     background: #70bb88;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
     background: radial-gradient(ellipse at center, #70bb88 0%,#5f9f60 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     border-color: #70bb88;
}
 #lp #lp08 #fairytale .links a:last-child,#lp #lp08 #fairytale .links a .story-detail,#lp #lp08 #fairytale .links div .story-detail{
     color: #70bb88;
     border-color: #70bb88;
}
 #lp #lp08 #magic-sleep .links div{
     background: #5ac4df;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
     background: radial-gradient(ellipse at center, #5ac4df 0%,#47b0e2 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     border-color: #5ac4df;
}
 #lp #lp08 #magic-sleep .links a:last-child,#lp #lp08 #magic-sleep .links a .story-detail,#lp #lp08 #magic-sleep .links div .story-detail{
     color: #5ac4df;
     border-color: #5ac4df;
}
 #lp #lp08 #color-shape .links .iframe-wrap,#lp #lp08 #stories .links .iframe-wrap,#lp #lp08 #fairytale .links .iframe-wrap,#lp #lp08 #magic-sleep .links .iframe-wrap{
     opacity: 0;
     overflow:hidden;
     background: rgba(100,100,100,.3);
     position: absolute;
     border: none;
     z-index: 1001;
     height: 16vw;
}
 #lp #lp08 #color-shape .links .iframe-wrap .iframe-inner,#lp #lp08 #stories .links .iframe-wrap .iframe-inner,#lp #lp08 #fairytale .links .iframe-wrap .iframe-inner,#lp #lp08 #magic-sleep .links .iframe-wrap .iframe-inner{
     margin: 0;
     width: 100vw;
}
 #lp #lp08 #color-shape .links .iframe-wrap .iframe-inner iframe,#lp #lp08 #stories .links .iframe-wrap .iframe-inner iframe,#lp #lp08 #fairytale .links .iframe-wrap .iframe-inner iframe,#lp #lp08 #magic-sleep .links .iframe-wrap .iframe-inner iframe{
     display: block;
     float: left;
}
 #lp #lp09{
     margin-top: 7vw;
}
/* #lp #lp09 iframe{
     display: block;
     width: 96vw;
     height: 54vw;
     margin: 10vw auto;
}*/
 #lp #lp10{
     margin-top: 11vw;
}
 #lp #lp10 div#comment-button{
     width: 93vw;
     margin: 4vw auto;
     padding: 2.3vw 0;
     background-color: #E6E6E6;
     background-image: url(../img/button-bg2.jpg);
     background-repeat: no-repeat;
    background-position: 65vw 2.5vw;
    background-size: 7vw;
     color: #969696;
     font-size: 5.3vw;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
}
 #lp #lp10 .text#comment{
     width: 90vw;
     margin: 0 auto;
     font-size: 3.5vw;
     line-height: 7vw;
}
 #lp #lp10 .text p{
     margin-bottom: 6vw;
}
 #lp #lp11{
     padding-top: 2vw;
}
 #lp #lp12{
     padding-top: 9vw;
}
 #lp #lp12 dl{
     display: block;
     width: 90vw;
     margin: 5vw auto;
     font-size: 3.5vw;
     line-height: 4vw;
}
 #lp #lp12 dt{
     margin-bottom: 4vw;
     font-weight: 700;
     color: #CEAB82;
}
 #lp #lp12 dd{
     margin-bottom: 6vw;
     line-height: 7vw;
}
 #lp #lp13 .text,#lp #lp14 .text{
     width: 90vw;
     margin: 5vw auto;
     font-size: 3vw;
     line-height: 4.4vw;
}
 #lp #lp13 .text p{
     margin-bottom: 6vw;
}
 #lp #lp13 a{
     display: block;
     width: 50vw;
     margin: 0 auto;
     padding: 2.8vw 0;
     background: #A0A0A0;
     color: #FFF;
     font-size: 4vw;
     text-align: center;
     text-decoration: none;
}
 #lp #lp14{
     padding: 9vw 0;
}
 #lp #lp14 h2{
     text-align: center;
}
 #lp #lp14 img{
     width: 63vw;
}
 body#disc{
     width: 100%;
     background: #F0F0F0;
     background-size: cover;
     margin-top: .1vw;
}
#main{
     margin-top: 3vw;
}
 #disc h2{
     display: block;
     position: relative;
     z-index: 100;
     width: 86.5vw;
     height: 9.8vw;
     background: #FFF;
     border-style: solid;
     border-width: .5vw;
     border-radius: 50vw;
     margin: 0 auto;
     padding-bottom: 3vw;
     padding-left: 10vw;
     font-size: 0;
}
 #disc .series{
     margin-bottom: 14vw;
}
 #disc .set-desc{
     width: 93vw;
     margin: 0 auto;
}

 #disc .set-desc p{
     position: relative;
     margin: 0 3.1vw;
     font-size: 3.8vw;
     letter-spacing: -.2vw;
     line-height: 6.5vw;
}
 #disc .set-desc img{
     width: 100%;
     position: relative;
     top: -1vw;
     margin: 0;
}
 #disc .set-contents{
     width: 84vw;
     margin: 3vw auto;
     font-size: 4vw;
}
 #disc .set-contents span:first-child{
     display: inline-block;
     font-size: 4.5vw;
     color: #FFF;
     padding: .6vw 2.9vw 1.4vw 2.9vw;
     margin-top: -.3vw;
     margin-left: .3vw;
     border-radius: 1.5vw;
}
 #disc .set-contents span:nth-child(2){
     display: inline-block;
     margin-left: 2.5vw;
     letter-spacing: -.6vw;
}
 #disc #color-shape h2{
     background-image:url(../img/lp08-1.jpg);
     background-repeat: no-repeat;
    background-size: 103vw;
    background-position: -3vw -1vw;

}
 #disc .zig{
     display: block;
     width: 85vw;
     margin: 0 auto;
 }
#disc .modal{
	cursor: pointer;
}
 #disc #color-shape .set-contents span:first-child,#color-shape h3{
     background: #6E9BC5;
}
 #disc #color-shape .set-contents span:nth-child(2),#color-shape .discs .disc-desc h4, #color-shape h2{
     color: #6E9BC5;
}
 #disc #color-shape .set-desc:before{
     color: #afc5da;
}
 #disc #color-shape .discs .disc-desc div{
     background-color: #6D9DC3;
}
 #disc #color-shape div.buy{
background: url(../img/buy-button1.jpg);
background-size: cover;
}
 #disc #stories h2{
     background-image:url(../img/lp08-2.jpg);
     background-repeat: no-repeat;
    background-size: 104vw;
    background-position: -2vw -1vw;
}
 #disc #stories .set-contents span:first-child,#stories h3{
     background: #DD8B62;
}
 #disc #stories .set-contents span:nth-child(2),#stories .discs .disc-desc h4, #stories h2{
     color: #DD8B62;
}
 #disc #stories .set-desc:before{
     color: #e6bda9;
}
 #disc #stories .discs .disc-desc div{
     background-color: #dd8b62;
}
 #disc #stories div.buy{
background: url(../img/buy-button2.jpg);
background-size: cover;

}
 #disc #fairytale h2{
     background-image:url(../img/lp08-3.jpg);
     background-repeat: no-repeat;
    background-size: 104vw;
    background-position: -2vw -1vw;
}
 #disc #fairytale .set-contents span:first-child,#fairytale h3{
     background: #70BB88;
}
 #disc #fairytale .set-contents span:nth-child(2),#fairytale .discs .disc-desc h4, #fairytale h2{
     color: #70BB88;
}
 #disc #fairytale .set-desc:before{
     color: #acd6b9;
}
 #disc #fairytale .discs .disc-desc div{
     background-color: #70BB88;
}
 #disc #fairytale div.buy{
background: url(../img/buy-button3.jpg);
background-size: cover;

}
 #disc #magic-sleep h2{
    background-image:url(../img/lp08-4.jpg);
     background-repeat: no-repeat;
background-size: 103vw;
    background-position: -3vw -1vw;
}
 #disc #magic-sleep .set-contents span:first-child,#magic-sleep h3{
     background: #75C0D1;
}
 #disc #magic-sleep .set-contents span:nth-child(2),#magic-sleep .discs .disc-desc h4, #magic-sleep h2{
     color: #75C0D1;
}
 #disc #magic-sleep .set-desc:before{
     color: #b2d8e0;
}
 #disc #magic-sleep .discs .disc-desc div{
     background-color: #75c0d1;
}
 #disc #magic-sleep div.buy{
background: url(../img/buy-button4.jpg);
background-size: cover;
}
 #disc .set-contents ul{
     margin-top: 3vw;
     margin-left: 2vw;
     letter-spacing: -.2vw;
}
 #disc .set-contents ul li{
     margin-bottom: 3vw;
}
 #disc .set-contents ul li:before{
     content: '・';
}
 #disc .set-contents p{
     padding-top: 4vw;
     font-size: 3.2vw;
     font-weight: 500;
     line-height: 4.5vw;
}
 #disc h3{
     margin-top: 5.1vw;
     padding: 2.2vw 0;
     font-size: 4.5vw;
     color: #FFF;
     font-weight: 300;
     letter-spacing: .3vw;
     text-align: center;
}
 #disc .discs{
     width: 92vw;
     margin: 2vw auto 0 5vw;
}
 #disc .discs .disc-wrap{
     margin-top: .1vw;
}
 #disc .discs img{
     position: relative;
     z-index: 100;
     width: 45.8%;
}
 #disc .discs .disc-desc{
     display: inline-block;
     position: relative;
     z-index: 99;
     top: -2.6vw;
     left: -.6vw;
     width: 48vw;
}
 #disc .discs .disc-desc h4{
     display: inline-block;
     font-size: 4vw;
     height: 6vw;
     padding-top: 3vw;
     padding-left: 1vw;
     letter-spacing: -.6vw;
}
 #disc .discs .disc-desc p{
     display: inline-block;
     padding-left: 2.7vw;
     font-size: 3.2vw;
     height: 26vw;
     line-height: 4.5vw;
     letter-spacing: -.3vw;
}
 #disc .discs .disc-desc div{
     display: inline-block;
     width: 44vw;
     padding-left: 5vw;
     color: #FFF;
     font-size: 3.5vw;
     text-align: center;
     text-decoration: none;
     line-height: 8vw;
    background-image: url(../img/osora-desc.png);
    background-repeat: no-repeat;
    background-size: 13vw;
    background-position: 3vw -59.2vw;
}
 #disc div.buy{
     display: block;
     width: 97vw;
     margin: 4vw auto;
     padding: 2vw 0 2vw 0;
     color: #F1E45C;
     font-size: 6vw;
     font-weight: 200;
     text-decoration: none;
     text-align: center;
     line-height: 7vw;
     letter-spacing: -.3vw;
     border-radius: 8vw;
}
 #disc div.buy span{
     display: inline-block;
     opacity: 0;
     width: 85vw;
     padding-left: 12vw;
}
 .buy .iframe-wrap{
     opacity: 0;
     overflow:hidden;
     position: absolute;
     border: none;
     z-index: 1001;
     height: 17.8vw;
     width: 98vw;
     margin: -2vw 
}
 .buy .iframe-wrap .iframe-inner{
     margin: 0;
     width: 200vw;
}
 .buy .iframe-wrap .iframe-inner iframe{
     display: block;
     float: left;
}
 #disc .img-wrap{
     width: 98vw;
     margin: 0 auto;
     text-align: center;
}
 #disc .img-wrap div{
     width: 98vw;
}
 #disc .img-wrap div img,#disc .img-wrap a img{
     display: block;
     margin: 0 auto;
     width: 80vw;
}
 #slides{
     position: fixed;
     top: 4vw;
     right:21vw;
     z-index: 9998;
     width: 60vw;
     margin: 0 auto;
     background: #FFF;
}
 .slide-wrap{
     display: none;
}
 .slick-list{
     position: relative;
     z-index: 9997;
}
 .slick-next{
     right: 4vw;
     z-index: 9999;
}
 .slick-prev{
     left: 1vw;
     z-index: 9999;
}
 .slick-next:before,.slick-prev:before{
     font-weight: 600;
     color: #000;
     font-size: 6vw;
}
 .slick-next:before{
     content: '＞';
}
 .slick-prev:before{
     content: '＜';
}
 .slick-dots{
     z-index: 9999;
}
 ul.slick-dots li{
     width: 4vw;
}
 .slick-dots li button:before{
     content: '○';
     font-size:4vw;
}
 .slick-dots li.slick-active button:before{
     font-size:5vw;
     top: -.2vw;
     left: -.2vw;
}
 .slider-buy{
     width: 100%;
     padding-top: 2vw;
}
 .slider-buy img{
     display: block;
     position: relative;
     z-index: 2000;
     width: 40vw;
     max-width: 340px;
     margin: 0 auto;
     top: 0;
}
 .slider-close{
     width: 20vw;
     padding-bottom: 5vw;
     margin: 6vw auto;
     text-align: center;
}
.slider-close img{
     width:20vw;
}
 .slider-buy .iframe-wrap{
     opacity: 0;
     overflow:hidden;
     position: absolute;
     border: none;
     z-index: 2001;
     height: 8vw;
     width:60vw;
}
 .slider-buy .iframe-wrap .iframe-inner{
     margin: 0 auto;
     width: 40vw;
     max-width: 340px;
}
 .slider-buy .iframe-wrap .iframe-inner iframe{
     display: block;
     float: left;
}

 @media screen and (min-width: 801px) and (max-width: 1200px) {
     body{
          zoom:0.7;
     }
  }

  @media screen and (min-width: 1201px) and (max-width: 1920px) {
     body{
          zoom:0.45;
     }

}


   @media screen and (min-width: 1921px){
     body{
          zoom:0.3;
     }
  }

/*コメントクローズ追加*/

#comment-button-close{
	width: 20vw;
	padding-bottom: 5vw;
	margin: 6vw auto;
	text-align: center;
}

#comment-button-close img{
	cursor: pointer;
}

/*firefoxのサイズ表示が変なので追記*/
@-moz-document url-prefix() {
	#lp #lp02 .text a{
		max-width: 75%;
		background-position: 18em center;
		height: auto;
		background-size: 60px;
	}
	#lp #lp03 a, #lp #lp05 a, #lp #lp09 a{
		max-width: 75%;
	}
	#lp #lp04 .desc{
		width: 81%;
	}
	#lp #lp04 .desc h3#point1{
		width: 92%;
	}
	#lp #lp04 .desc h3#point2{
		width: 92%;
		margin-left: 5%;
		margin-bottom: 0;
		padding-top: 0;
	}
	#lp #lp04 .desc .point2{
		top: 0.9em;
	}
	#lp #lp04 .desc .image-s {
		width: 58%;
	}
	#lp #lp04 .desc .image-l{
		width: 96%;
	}
	#lp #lp04 .desc .text {
		width: 39%;
	}
	#lp #lp04 .desc > p{
		width: 92%;
		margin: 0 auto;
	}
	#lp #lp06 img{
		width: 82%;
	}
	#lp #lp08 .links{
		width: 86%;
	}
	
	#lp #lp08 .links a, #lp #lp08 .links div{
		width: 47%;
	}
	#lp #lp10 div#comment-button{
		width: 86%;
		font-size: 44px;
		background-position: 13em center;
		background-size: 60px;
	}
	#lp #lp10 .text#comment{
		width: 86%;
	}
	#lp #lp12 dl{
		width: 86%;
	}
	#lp #lp12 dt{
		margin-bottom: 1em;
	}
	#lp #lp12 dd{
		line-height: 1.8em;
	}
	#lp #lp13 .text, #lp #lp14 .text{
		width: 86%;
	}
	#lp #lp13 .text p{
		margin-bottom: 2em;
	}
	#lp #lp14 img {
		width: 57%;
	}
	#lp #lp13 a{
		width: 50%;
		padding: 0.56em 0;
	}
	@media (min-width: 600px) {
		#lp #lp01 .text p,
		
		#lp #lp04 .desc .text p,
		#lp #lp04 .desc span,
		#lp #lp04 .desc > p,
		#lp #lp10 .text#comment,
		#lp #lp12 dl,
		#lp #lp13 .text, #lp #lp14 .text{
			font-size: calc(112.5% + 4 * (100vw - 600px) / 400);
			line-height: 1.8em;
			letter-spacing: 0.1pt;
		}
		#lp #lp08 .links a span, #lp #lp08 .links div span,
		#lp #lp02 .text a,
		#lp #lp13 a{
			font-size: calc(200% + 4 * (100vw - 600px) / 400);
			line-height: 1em;
		}
	}
	@media (min-width: 1000px) {
		#lp #lp01 .text p,
		
		#lp #lp04 .desc .text p,
		#lp #lp04 .desc span,
		#lp #lp04 .desc > p,
		#lp #lp10 .text#comment,
		#lp #lp12 dl,
		#lp #lp13 .text, #lp #lp14 .text{
			font-size: calc(137.5%);
			line-height: 1.8em;
			letter-spacing: 0.1pt;
		}
		#lp #lp08 .links a span, #lp #lp08 .links div span,
		#lp #lp02 .text a,
		#lp #lp13 a{
			font-size: calc(200%);
			line-height: 1em;
		}
	}
}


/*youtubeのiframeレスポンシブ対応がイマイチなのでやり直し*/

.frame-wrapper__video {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
	margin: 10vw auto;
}

.frame-wrapper__video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.frame-wrapper__video.margin0{
	width: 90%;
	margin: 0 auto;
}


/*Safariのみに適用*/

@media screen and (-webkit-min-device-pixel-ratio:0) {
	_::-webkit-full-page-media, _:future, :root #lp #lp04 .desc .image-s {
		top: 6vw;
		position: relative;
	}
}