body {
  margin: 0;
}

.product-box img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.inner {
	width: 92%;
	margin: 0 auto;
}

.detail-box {
	padding-bottom: 10%;
}
.detail-box .detail-sec {
	position: relative;
	margin-bottom: 6%;
	box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.2);
}

#contents .banner-note {
	font-size: 2.2vw;
}

#contents p.banner-note:nth-of-type(2) {
	padding-bottom: 5%;
}

.title {
  position: relative;
  width: 100%;
}

.title .inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.title #hero-title-anime {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 73%;
  transform: translate(-50%, -40%);
  z-index: 21;
}

.title #hero-title {
  position: relative;
  width: 100%;
  z-index: 20;
}

.title .hero-item {
  position: absolute;
  top: -20%;
  left: 50%;
  margin-left: -75vw;
  width: 150vw !important;
}

.title #hero-item1 {
  z-index: 30;
}

.title #hero-item2 {
  z-index: 10;
}

.title .kira {
  position: absolute;
  width: 100%;
  z-index: 1;
}

#hero {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/top/hero_bg.jpg) no-repeat center;
	background-size: cover;
}

#hero h1 {
	width: 57.2%;
	margin: 0 auto;
	padding: 45% 0 57%;
	opacity: 0;
	animation: hero-top 1.5s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

/* detail */

.product {
  position: relative;
}

.product .btn-detail {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
}

.inner h3 {
	padding: 6% 0;
}
.inner .product {
	box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.2);
	margin-bottom: 6.5%;
}

.inner .product:last-of-type {
	margin-bottom: 0;
}

.product ul {
	font-size: 0;
}

.product .btn-detail .btn {
	display: inline-block;
	width: 37.5%;
	padding: 0 3%;
}

.inner .product .btn-detail .btn {
	width: 41%;
}


#detail1,
#detail2,
#detail3,
#detail4,
#detail5,
#detail6,
#detail7,
#detail8,
#detail9,
#detail10,
#detail11,
#detail12,
#detail13{
	padding: 8% 0 10%;
}

#detail1 h2,
#detail2 h2,
#detail3 h2,
#detail4 h2,
#detail5 h2,
#detail6 h2,
#detail7 h2,
#detail8 h2,
#detail9 h2,
#detail10 h2,
#detail11 h2,
#detail12 h2,
#detail13 h2{
	margin-bottom: 4.5%;
}

/* background */
#detail1 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail1/detail1_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail2 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail2/detail2_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail3 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail3/detail3_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail4 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail4/detail4_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail5 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail5/detail5_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail6 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail6/detail6_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail7 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail7/detail7_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail8 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail8/detail8_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail9 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail9/detail9_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail10 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail10/detail10_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail11 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail11/detail11_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail12 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail12/detail12_bg.jpg) no-repeat top center;
	background-size: cover;
}

#detail13 {
	background: url(/sp/cms/onlineshop/h/beautytopic/img/season/1907/detail13/detail13_bg.jpg) no-repeat top center;
	background-size: cover;
}

/* btn */
#grandprix #btn-grandprix01 {
	top: 69.5%;
}

#semi_grandprix #btn-semi01 {
	top: 73%;
}

#hititem #btn-hititem01 {
	top: 66%;
}

#hititem #btn-hititem02 {
	top: 76.5%;
}

#hititem #btn-hititem03 {
	top: 77%;
}

#hititem #btn-hititem04 {
	top: 71%;
}

#hititem #btn-hititem05 {
	top: 72%;
}

#new-face #btn-new-face01 {
	top: 71.5%;
} 

#detail1 #btn-detail01 {
	top: 71.2%;
}

#detail1 #btn-detail02 {
	top: 72%;
}

#detail1 #btn-detail03 {
	top: 72%;
}

#detail2 #btn-detail01 {
	top: 70%;
}

#detail2 #btn-detail02 {
	top: 71.5%;
}

#detail2 #btn-detail03 {
	top: 71%;
}

#detail3 #btn-detail01 {
	top: 71%;
}

#detail3 #btn-detail02 {
	top: 69.5%;
}

#detail3 #btn-detail03 {
	top: 70.5%;
}

#detail4 #btn-detail01 {
	top: 70.5%;
}

#detail4 #btn-detail02 {
	top: 69.5%;
}

#detail4 #btn-detail03 {
	top: 71.5%;
}

#detail5 #btn-detail01 {
	top: 72.5%;
}

#detail5 #btn-detail02 {
	top: 68.5%;
}

#detail5 #btn-detail03 {
	top: 72.5%;
}

#detail6 #btn-detail01 {
	top: 73%;
}

#detail6 #btn-detail02 {
	top: 70%;
}

#detail6 #btn-detail03 {
	top: 70.5%;
}

#detail7 #btn-detail01 {
	top: 67.5%;
}

#detail7 #btn-detail02 {
	top: 66%;
}

#detail7 #btn-detail03 {
	top: 66%;
}

#detail8 #btn-detail01 {
	top: 67%;
}

#detail8 #btn-detail02 {
	top: 68%;
}

#detail8 #btn-detail03 {
	top: 68%;
}

#detail9 #btn-detail01 {
	top: 71%;
}

#detail9 #btn-detail02 {
	top: 69%;
}

#detail9 #btn-detail03 {
	top: 70.5%;
}

#detail10 #btn-detail01 {
	top: 68.5%;
}

#detail10 #btn-detail02 {
	top: 67%;
}

#detail10 #btn-detail03 {
	top: 71%;
}

#detail10 #btn-detail04 {
	top: 68.5%;
}

#detail10 #btn-detail05 {
	top: 69.5%;
}

#detail10 #btn-detail06 {
	top: 69.5%;
}

#detail10 #btn-detail07 {
	top: 65.5%;
}

#detail10 #btn-detail08 {
	top: 70%;
}

#detail10 #btn-detail09 {
	top: 65.5%;
}

#detail11 #btn-detail01 {
	top: 69%;
}

#detail11 #btn-detail02 {
	top: 70%;
}

#detail11 #btn-detail03 {
	top: 69.5%;
}

#detail12 #btn-detail01 {
	top: 67.5%;
}

#detail12 #btn-detail02 {
	top: 52.5%;
}

#detail12 #btn-detail03 {
	top: 64.5%;
}
#detail12 #btn-detail04 {
	top: 76.5%;
}

#detail12 #btn-detail05 {
	top: 66.5%;
}

#detail13 #btn-detail01 {
	top: 74.5%;
}

#detail13 #btn-detail02 {
	top: 72.5%;
}

#detail13 #btn-detail03 {
	top: 63%;
}

#detail13 #btn-detail04 {
	top: 74.5%;
}

#sns-hit #btn-sns-hit01 {
	top: 68.5%;
}

#sns-hit #btn-sns-hit02 {
	top: 66%;
}

#sns-hit #btn-sns-hit03 {
	top: 67%;
}

#sns-hit #btn-sns-hit04 {
	top: 68%;
}

@keyframes hero-top {
	100% {
		opacity: 1;
	}
}

#main section p {
	margin: 0;
}

#contents img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

#category h3 {
	padding:10% 0 10%;
}

#category {
  padding-bottom: 7%;
}

#category ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 91.2%;
}

#category ul li {
  background-color: rgba(255,255,255,0.80);
  width: 48.1%;
  margin: 0 3.8% 4% 0;
  box-shadow: 1.5vw 1.5vw 1vw rgba(0, 0, 0, 0.2),0 0 1vw rgba(0, 0, 0, 0.1);
}

#category ul li:nth-of-type(2n) {
  margin: 0 0 4% 0;
}

#best-price h2 {
	padding: 13.8% 0 6.9%;
}

#best-price p {
	padding-bottom: 9%;
}

.pagetop {
  position: fixed;
  right: 2%;
  bottom: 3%;
  z-index: 100;
  width: 10%;
}

.pagetop img {
  width: 100%;
}

#bottom-contents .nav-prize li:nth-child(2),
#bottom-contents .nav-prize li:nth-child(3),
#bottom-contents .nav-prize li:nth-child(4) {
	border-bottom: 1px solid #000;
}
#bottom-contents .nav-cat {
	padding: 10px 0 ;
}

#bottom-contents .nav-cat h4 {
  padding:10% 0 10%;
}

#bottom-contents .nav-cat ul  {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 6%;
  width: 97%;
}

 #bottom-contents .nav-cat ul li{
  background-color: rgba(255,255,255,0.80);
  width: 46%;
  margin: 2%;
  box-shadow: 1.5vw 1.5vw 1vw rgba(0, 0, 0, 0.2),0 0 1vw rgba(0, 0, 0, 0.1);
}

#bottom-contents .nav .nav-cosme {
  margin-bottom: 9.5%;
}

#bottom-contents .btn-onlineshop {
  margin: 0 auto 9.5%;
  width: 62.5%;
}

#bottom-contents .btn-back {
  margin: 0 auto 2%;
  width: 62.5%;
}

#bottom-contents .note {
  font-size: 80%;
  padding-bottom: 20px;
}

#bottom-contents img {
	width: 100%;
	height: auto;
	display: block;
}

#contents .btn-pagetop {
	margin: 5% 0 0;
	padding: 0 0 22px;
}

#contents .btn-pagetop img{
	width: 17%;
	margin: 0 auto;
}