#top_visual {
	margin-bottom: 100px;
}

#btn_campaign {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 540px;
	height: 70px;
	margin: 0 auto 70px;
	background-color: #fff;
	text-align: center;
}

#btn_campaign .txt {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
}

#buy_now {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 10px;
	background-color: #000;
	z-index: 19;
}

#buy_now a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 400px;
	height: 50px;
	margin: 0 auto;
	border: 1px solid #fff;
	font-size: 2.6rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
}

#foot_top {
	padding-bottom: 100px;
}


/* about
------------------------------------------------ */
#about {
	max-width: 1050px;
	margin: auto;
}
	#about h2{
		margin-bottom: 52px;
	}
	#about .about-info{
		display: flex;
		justify-content: space-between;
	}
		#about .about-info li{
			width: calc(50% - 25px); 
		}
		#about .about-info li h3 { font-size: 3.2rem; font-weight: normal; letter-spacing: -0.01em; margin-top: 26px; }
			#about .about-info li h3 .ab-1 { margin-top: 4px; padding: 0 14px; }
			#about .about-info li h3 .ab-1:first-child { margin-top: 0; }
		#about .about-info li .comment { margin-top: 31px; font-size: 1.5rem; line-height: 2.4; }
		#about .about-info li .more1 { margin: 18px 0 0; }

/* course
------------------------------------------------ */
#course {
	max-width: 1050px;
	margin: auto;
}
#course.sc-block {
  padding-top: 40px;
	padding-bottom: 60px;
}
	#course h2 {
  	width: 396px;
		margin: 0 auto 20px;
		padding: 10px;
		background-color: #000;
		font-size: 2.3rem;
		font-weight: bold;
		color: #fff;
	}
	#course .txt {
  	margin-bottom: 30px;
    font-size: 1.6rem;
  	text-align: center;
	}
	#course .txt a {
  	display: block;
  	margin-top: 5px;
  	margin-left: auto;
  	font-size: 1.4rem;
  	text-decoration: underline;
  	text-align: right;
	}
	#course .course-list {
		display: flex;
		justify-content: space-between;
	}
		#course .course-list li {
			width: calc((100% / 3) - (44px / 3));
		}
			#course .course-list li a {
				display: block;
			}
			#course .course-list li img {
				width: 100%;
			}
	#course .course-list.wide {
  	display: block;
	}
		#course .course-list.wide li {
  		width: 100%;
  		margin-bottom: 17px;
        }
        
.course-banner img{
    box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);
}

        .course-banner{
            margin-bottom: 70px;
            text-align: center;
        }

/* product
------------------------------------------------ */
#product {
}
#product.sc-block {
	padding-top: 60px;
}

	#product .slide {
		position: relative;
	}

		#product .slide .frame {
			position: relative;
			width: 100%;
			overflow: hidden;
			cursor: -webkit-grab;
		}
		#product .slide .frame.drag { cursor: -webkit-grabbing; }

			#product .slide .move {
				position: relative;
				margin-left: 100px;
				-webkit-transition: ease-out 1s;
				transition: ease-out 1s;
				-webkit-transform: translate3d(100vw,0,0);
				transform: translate3d(100vw,0,0);
			}
			#product.is-group-done .slide .move { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
			#product .slide .frame.drag .move { -webkit-transition: ease-out .4s; transition: ease-out .4s; }
			#product .slide .frame.hover .move { -webkit-transition: none; transition: none; }


				#product .slide .move li {
					float: left;
					width: 250px;
				}
				#product .slide .move .w280 { width: 280px; }
                #product .slide .move .w320 { width: 320px; }

					#product .slide .move li a { display: block; }
					#product .slide .frame.drag .move li a { cursor: -webkit-grabbing; }
					#product .slide .move li .photo { text-align: center; }
					#product .slide .move li .info { margin-top: 20px; text-align: center; }
						#product .slide .move li .title { display: inline-block;  padding: 6px 12px 5px; min-width: 162px; background: #000; font-size: 1.4rem; font-weight: normal; line-height: 1; color: #fff; }
						#product .slide .move li .btn { display: inline-block; margin-top: 2px; padding: 6px 12px 5px; min-width: 162px; font-size: 1.4rem; font-weight: normal; line-height: 1; color: #fff; background: #000 url(../../../img/pc/top/img_arr_white.png) no-repeat right 10px center; background-size: 19px auto;}
						#product .slide .move li .subscript { margin-top: 6px; font-size: 1.6rem; }

		#product .slide .prev,
		#product .slide .next {
			position: absolute;
			top: 50%;
			width: 29px;
			margin-top: -28px;
			height: 57px;
			background-position: center center;
			background-repeat: no-repeat;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
		}
		#product .slide .prev { left: 60px; background-image: url(../../../img/pc/top/product_slide_prev.png); }
		#product .slide .next { right: 30px; background-image: url(../../../img/pc/top/product_slide_next.png); }

/* #ranking
------------------------------------------------ */
#ranking {
}
#ranking.sc-block {
	padding-top: 0;
}

	#ranking .slide {
		position: relative;
	}

		#ranking .slide .frame {
			position: relative;
			width: 100%;
			overflow: hidden;
			cursor: -webkit-grab;
		}
		#ranking .slide .frame.drag { cursor: -webkit-grabbing; }

			#ranking .slide .move {
				position: relative;
				max-width: 1050px;
				margin: 0 auto;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				-webkit-transition: ease-out 1s;
				transition: ease-out 1s;
				-webkit-transform: translate3d(100vw,0,0);
				transform: translate3d(100vw,0,0);
			}
			#ranking.is-group-done .slide .move { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
			#ranking .slide .frame.drag .move { -webkit-transition: ease-out .4s; transition: ease-out .4s; }
			#ranking .slide .frame.hover .move { -webkit-transition: none; transition: none; }


				#ranking .slide .move li {
					width: 170px;
					vertical-align: top;
          white-space: normal;
				}
  		  #ranking .slide .move li::before {
    		  content: "";
    		  display: flex;
    		  align-items: center;
    		  justify-content: center;
    		  width: 30px;
    		  height: 30px;
    		  margin: 0 auto 30px;
    		  background-color: #000;
    		  font-size: 1.8rem;
    		  font-weight: bold;
    		  line-height: 1;
    		  text-align: center;
    		  color: #fff;
    		}
    		#ranking .slide .move li:nth-child(1)::before {
    		  content: "1";
    		  background-color: #a08e2b;
    		}
    		#ranking .slide .move li:nth-child(2)::before {
    		  content: "2";
    		  background-color: #9e9e9e;
    		}
    		#ranking .slide .move li:nth-child(3)::before {
    		  content: "3";
    		  background-color: #af927c;
    		}
    		#ranking .slide .move li:nth-child(4)::before {
    		  content: "4";
    		}
    		#ranking .slide .move li:nth-child(5)::before {
    		  content: "5";
    		}
				#ranking .slide .move .w280 { width: 280px; }
                #ranking .slide .move .w320 { width: 320px; }

					#ranking .slide .move li a { display: block; }
					#ranking .slide .frame.drag .move li a { cursor: -webkit-grabbing; }
					#ranking .slide .move li .photo { text-align: center; }
					#ranking .slide .move li .info { margin-top: 20px; text-align: center; }
						#ranking .slide .move li .title { margin-top: 2px; font-size: 1.6rem; font-weight: bold; line-height: 1.2; }
						#ranking .slide .move li .jp { font-size: 0.8em; }
						
						#ranking .slide .move li .subscript { margin-top: 4px; font-size: 1.2rem; }
						#ranking .slide .move li .num { font-size: 1.333em; }


/* movie
------------------------------------------------ */
#movie {
	max-width: 1050px;
	margin: auto;
}
#movie .frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

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

/* voice
------------------------------------------------ */
#voice {
	max-width: 1160px;
	margin: auto;
}
	#voice h2 i.jpn {
		font-size: 1.6rem;
		font-style: normal;
		display: block;
		margin-top: 10px;
	}

/* news
------------------------------------------------ */
#news {
}

	#news .wrap {
		width: 1126px;
	}

/* release_news */
#release_news {
	float: left;
	width: calc(50% - 35px);
}
	#release_news h2{
		margin-bottom: 20px;
	}

	#release_news .list {
	}

		#release_news .list ul {
		}

			#release_news .list ul li {
				margin-top: 38px;
			}
			#release_news .list ul li:first-child { margin-top: 0; }

				#release_news .list ul li a { display: block; }
				#release_news .list ul li .photo,
				#release_news .list ul li .info { display: inline-block; vertical-align: top; }
				#release_news .list ul li .photo { width: 100px; }
				#release_news .list ul li .info { padding-left: 18px; width: calc(100% - 100px); box-sizing: border-box; }
					#release_news .list ul li .info .date { font-size: 1.4rem; letter-spacing: .05em; line-height: 1; }
						#release_news .list ul li .info .date .ab-1 { padding: 4px 8px 3px; min-width: 70px; }
					#release_news .list ul li .info .title { margin-top: 10px; font-size: 1.6rem; font-weight: normal; letter-spacing: -.008em; line-height: 2; }

/* magazine_news */
#magazine_news {
	float: right;
	width: calc(50% - 35px);
}
	#magazine_news h2{
		margin-bottom: 20px;
	}

	#magazine_news .list {
	}

		#magazine_news .list ul {
		}

			#magazine_news .list ul li {
				position: relative;
				float: left;
				margin: 20px 54px 0 0;
				width: 140px;
			}
			#magazine_news .list ul li:nth-of-type(-n+3) { margin-top: 0; }
			#magazine_news .list ul li:nth-of-type(3n) { margin-right: 0; }
			#magazine_news .list ul li:nth-of-type(3n+1) { clear: both; }

				#magazine_news .list ul li a,
				#magazine_news .list ul li .photo.is-done span,
				#magazine_news .list ul li a .info { -webkit-transition: ease-out .2s; transition: ease-out .2s; }

				#magazine_news .list ul li a { display: block; position: relative; }
				#magazine_news .list ul li .photo { position: relative; background: #000; z-index: 1; }
				#magazine_news .list ul li .info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 2; opacity: 0; }
				#magazine_news .list ul li .info .cell { display: table; width: 100%; height: 100%; }
					#magazine_news .list ul li .title { display: table-cell; vertical-align: middle; font-size: 1.4rem; font-weight: normal; color: #fff; }
				#magazine_news .list ul li a:hover { opacity: 1; }
				#magazine_news .list ul li a:hover .photo span { opacity: .3; }
				#magazine_news .list ul li a:hover .info { opacity: 1; }

/* instagram
------------------------------------------------ */
#information {
	float: right;
	width: calc(50% - 35px);
}

	#information .title1 { margin-bottom: 50px; }

	#information .list {
	}

		#information .list ul {
		}

			#information .list ul li {
				margin-top: 38px;
			}
			#information .list ul li:first-child { margin-top: 0; }

				#information .list ul li .date { font-size: 1.4rem; letter-spacing: .05em; line-height: 1; }
					#information .list ul li .date .ab-1 { padding: 4px 6px 3px; }
				#information .list ul li .title { margin-top: 10px; font-size: 1.6rem; font-weight: normal; line-height: 2.2; }

/* instagram
------------------------------------------------ */
#instagram {
}

	#instagram .title1 { margin-bottom: 12px; }

	#instagram .account {
		margin-bottom: 20px;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1.2;
	}

	#instagram .account:before {
		content: ' ';
		display: inline-block;
		margin: -1px 5px 0 0;
		width: 15px;
		height: 16px;
		background: url(../../../img/pc/share/icon_instagram1.png) no-repeat left center;
		vertical-align: top;
	}

	#instagram .list {
		margin: 0 auto;
		width: 882px;
	}

		#instagram .list ul {
			clear: none;
			float: left;
			width: 294px;
		}

			#instagram .list ul li {
				float: left;
				margin: 0 2px 4px;
				width: 143px;
			}
			#instagram .list ul .single { float: none; margin-right: 0; width: 290px; }

				#instagram .list ul li a { display: block; }
	#instagram .more1{margin: 28px auto 0;}


/* routine
------------------------------------------------ */

  #routine {
    max-width: 1050px;
    margin: auto;
    padding: 70px 0 140px;
    text-align: center;
  }
  
  #routine .head {
    margin-bottom: 30px;
    font-size: 6.3rem;
    font-weight: bold;
  }
  
  #routine [data-ruby] {
    position: relative;
  }
  
  #routine [data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin: auto;
    font-size: 1.8rem;
    text-align: center;
  }
  
  #routine .txt {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2.25;
  }
  
  #routine .logo {
    display: block;
    width: 466px;
    margin: 2em auto 0;
  }
  
  
/* basic3step
------------------------------------------------ */
  
  #basic3step {
    padding-bottom: 30px;
  }
  
  #basic3step .head {
    width: 569px;
    margin: 0 auto 60px;
  }
  
  #basic3step .basic3step-slider {
    
  }
  
  #basic3step .basic3step-slider-img img {
    margin: 0 auto;
  }
  
  #basic3step .basic3step-slider-dots {
    display: flex;
    justify-content: center;
  }
  
  #basic3step .basic3step-slider-dots li {
    margin: 0 10px;
  }
  
  #basic3step .basic3step-slider-dots button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    width: 14px;
    height: 14px;
    font-size: 0;
    background: #666;
    border-radius: 50%;
    cursor: pointer;
  }
  
  #basic3step .basic3step-slider-dots .slick-active button {
    background: #000;
  }
  
  
/* making-movie
------------------------------------------------ */
  
  #making-movie {
	  margin-bottom: 40px;
    padding: 70px 0 10px;
    background: #000 url(../../../img/pc/top/bg_making_movie.png) no-repeat center bottom;
    background-size: 950px auto;
  }
  
  #making-movie .inner {
    max-width: 1050px;
    margin: auto;
  }
  
  #making-movie .head {
    width: 390px;
    margin: 0 auto 35px;
    text-align: center;
  }
  
  #making-movie .movie {
    position: relative;
    width: 540px;
    margin: 0 auto 100px;
    cursor: pointer;
  }
  
  #making-movie .movie-wrap,
  #making-movie .movie-wrap iframe {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: 100% !important;
		height: 100% !important;
		z-index: 10;
  }
  
  #making-movie .youtube::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
  
  #making-movie .youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
  
  
[data-disabled=true] {
  position: relative;
}

[data-disabled=true]::before,
[data-disabled=true]::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

[data-disabled=true] img {
  pointer-events: none;
}


@media print{
  body {
    display: none !important;
  }
}