@charset "euc-jp";

/* Index ------------------------- */

/* indexmain
-------------------- */
.indexmain{
	position:relative;
	width:100%;
}
.indexmain .swiper-container{
	padding-bottom:25px;
}
.indexmain .swiper-slide img{
	width:100%;
}
.indexmain .swiper-container-horizontal>.swiper-pagination-bullets{
	bottom:0;
}
.indexmain .swiper-pagination-bullet{
	width:10px;
	height:10px;
	background:#CCC;
	opacity:1;
	border-radius:0;
}
.indexmain .swiper-pagination-bullet-active{
	background:#333;
}
.indexmain .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
	margin:0 8px;
}
.indexmain .swiper-button-next,
.indexmain .swiper-button-prev{
	display:none;
}
@media (min-width: 600px) {
	.indexmain{
		margin-bottom:60px;
	}
	.indexmain .swiper-container{
		padding-bottom:35px;
	}
	.indexmain .swiper-button-next,
	.indexmain .swiper-button-prev{
		display:block;
		position:absolute;
		z-index:3;
		top:calc(50% - 15px);
		width:40px;
		height:40px;
		background-size:40px 40px;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		outline:none;
	}
	.indexmain .swiper-button-prev{
		left:2%;
		background-image:url(https://img21.shop-pro.jp/PA01397/731/etc/top2-mainvisual-nav1.png);
	}
	.indexmain .swiper-button-next{
		right:2%;
		background-image:url(https://img21.shop-pro.jp/PA01397/731/etc/top2-mainvisual-nav2.png);
	}
}
@media (min-width: 960px) {
	.indexmain{
		width:90%;
		max-width:1300px;
		margin:0 auto 30px;
	}
	.indexmain .swiper-container{
		animation: indexmainfadein 1s ease 1s 1 both;
	}
	.indexmain .swiper-slide a img{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexmain .swiper-slide a img:hover{
		opacity:0.6;
	}
	.indexmain .swiper-button-prev{
		left:-50px;
	}
	.indexmain .swiper-button-next{
		right:-50px;
	}
}
@keyframes indexmainfadein {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

/* indexinfo
-------------------- */
.indexinfo{
	width:94%;
	margin:0 auto;
	padding:5% 3%;
	font-size:0.75rem;
	line-height:1.7;
	text-align:center;
}
.indexinfo a{
	color:#000;
	text-decoration:none;
}
@media (min-width: 600px) {
	.indexinfo{
		padding:30px 0;
		font-size:1rem;
	}
}
@media (min-width: 960px) {
	.indexinfo{
		width:90%;
		max-width:1300px;
		padding:40px 0;
	}
}

/* indexfeatures
-------------------- */
.indexfeatures{
	display:flex;
	flex-wrap:wrap;
}
.indexfeatures__item{
	width:47%;
	margin-top:15%;
	margin-left:2%;
	line-height:2;
}
.indexfeatures__item a{
	display:block;
	color:#333;
	text-decoration:none;
}
.indexfeatures__item span{
	display:block;
}
.indexfeatures__img img{
	width:100%;
}
.indexfeatures__title{
	margin-top:17px;
	font-size:0.875rem;
	text-align:center;
}
.indexfeatures__desc{
	margin-top:5px;
	padding:0 5px;
	font-size:0.625rem;
}
.indexfeatures__more{
	margin-top:5px;
	font-size:0.75rem;
	text-align:center;
}
.indexfeatures__more::before{
	content:"";
	display:inline-block;
	width:8px;
	height:8px;
	margin-right:10px;
	background: url(https://img21.shop-pro.jp/PA01397/731/etc/zc2-icon2.png) no-repeat 0 0 / 8px auto;
}
@media (min-width:600px){
	.indexfeatures__title{
		margin-top:20px;
		font-size:1rem;
		text-align:center;
	}
	.indexfeatures__desc{
		margin-top:10px;
		font-size:0.875rem;
	}
	.indexfeatures__more{
		margin-top:10px;
		font-size:0.875rem;
	}
}
@media (min-width:960px){
	.indexfeatures{
		width: 90%;
		max-width: 1300px;
		margin:0 auto;
	}
	.indexfeatures__item{
		max-width:400px;
		width:30.8%;
		margin-top:50px;
		margin-left:0;
		line-height:1.7;
	}
	.indexfeatures__item:not(:nth-child(3n+1)){
		margin-left:3.8%;
	}
	.indexfeatures__item a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexfeatures__item a:hover{
		opacity:0.6;
	}
	.indexfeatures__more{
		margin-top:12px;
	}
	.indexfeatures__more::before{
		width:10px;
		height:10px;
		background-size: 10px auto;
	}
}

/* index common
-------------------- */
.indexsection{
	margin-top:calc(10% + 30px);
}
.indextitle{
	margin-bottom:calc(6% + 15px);
	text-align:center;
}
.indextitle img{
	width:auto;
	height:16px;
}
@media (min-width: 960px) {
	.indexsection{
		margin-top:130px;
	}
	.indextitle{
		margin-bottom:60px;
	}
}

/* indexcolor
-------------------- */
.indexcolor{
	margin-top:calc(8% + 20px);
}
.indexcolor__list{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width:90%;
	max-width:500px;
	margin:0 auto;
}
.indexcolor__item{
	width:24%;
	max-width:100px;
}
.indexcolor__item img{
	width:100%;
}
@media (min-width: 960px) {
	.indexcolor{
		margin-top:100px;
	}
	.indexcolor__item a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexcolor__item a:hover{
		opacity:0.6;
	}
}

/* indexcategory
-------------------- */
.indexcategory__list{
	position:relative;
	padding-top:180%;

}
.indexcategory__item{
	overflow:hidden;
	position:absolute;
	padding-top:45%;
}
.indexcategory__flatsable{
	top:0;
	left:0;
	width:60%;
}
.indexcategory__flatsable img{
	width:100%;
	margin-top:-7%;
}
.indexcategory__starter{
	top:0;
	left:60%;
	width:40%;
}
.indexcategory__starter img{
	width:128%;
	margin-left:-14%;
}
.indexcategory__volumesable{
	top:25%;
	left:40%;
	width:60%;
}
.indexcategory__volumesable img{
	width:104%;
	margin-top:-6.5%;
	margin-left:-2%;
}
.indexcategory__adhesive{
	top:25%;
	left:0;
	width:40%;
}
.indexcategory__adhesive img{
	width:182%;
	margin-left:-41%;
}
.indexcategory__volumelash{
	top:50%;
	left:60%;
	width:40%;
}
.indexcategory__volumelash img{
	width:182%;
	margin-left:-41%;
}
.indexcategory__cleanser{
	top:50%;
	left:0;
	width:60%;
}
.indexcategory__cleanser img{
	width:100%;
	margin-top:-3%;
}
.indexcategory__accessory{
	top:75%;
	left:0;
	width:40%;
}
.indexcategory__accessory img{
	width:182%;
	margin-left:-41%;
}
.indexcategory__glamcor{
	top:75%;
	left:40%;
	width:60%;
}
.indexcategory__glamcor img{
	width:121.2%;
	margin-left:-10.6%;
}
.indexcategory__item a{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	color:#000;
	text-decoration:none;
}
.indexcategory__item span{
	display:block;
	position:absolute;
	bottom:6px;
	right:6px;
	font-size:0.625rem;
}
@media (min-width: 960px) {
	.indexcategory{
		width: 90%;
		max-width: 1300px;
		margin-left:auto;
		margin-right:auto;
	}
	.indexcategory__list{
		padding-top:71.44%;
	}
	.indexcategory__item img{
		width:100%;
		margin:0;
	}
	.indexcategory__item span{
		bottom:10px;
		right:10px;
	}
	.indexcategory__flatsable{
		top:0;
		left:29.47%;
		width: 41.06%;
		padding-top:35.72%
	}
	.indexcategory__flatsable span{
		bottom:auto;
		top:10px;
	}
	.indexcategory__starter{
		top:50%;
		left:58.94%;
		width: 41.06%;
		padding-top:35.72%
	}
	.indexcategory__volumesable{
		top:0;
		left:0;
		width: 29.47%;
		padding-top:35.72%
	}
	.indexcategory__volumesable span{
		right:auto;
		left:10px;
	}
	.indexcategory__volumesable img{
		width:152%;
		margin-left:-26%;
	}
	.indexcategory__adhesive{
		top:25%;
		left:70.53%;
		width: 29.47%;
		padding-top:17.86%
	}
	.indexcategory__adhesive span{
		right:auto;
		left:10px;
	}
	.indexcategory__volumelash{
		top:0;
		left:70.53%;
		width: 29.47%;
		padding-top:17.86%
	}
	.indexcategory__cleanser{
		top:50%;
		left:0;
		width: 29.47%;
		padding-top:35.72%
	}
	.indexcategory__cleanser img{
		width:152%;
		margin-left:-26%;
	}
	.indexcategory__accessory{
		top:75%;
		left:29.47%;
		width: 29.47%;
		padding-top:17.86%
	}
	.indexcategory__accessory span{
		bottom:auto;
		right:auto;
		top:10px;
		left:10px;
	}
	.indexcategory__glamcor{
		top:50%;
		left:29.47%;
		width: 29.47%;
		padding-top:17.86%
	}
	.indexcategory__item a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexcategory__item a:hover{
		opacity:0.6;
	}
}

/* indexrecommend
-------------------- */
.indexrecommend__img{
	overflow:hidden;
	position:relative;
	width:100%;
}
.indexrecommend__img a{
	display:block;
	padding-top:41.37%;
}
.indexrecommend__img1{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.indexrecommend__img2{
	position:absolute;
	top:0;
	left:0;
	width:29.2%;
	margin:3%;
}
.indexrecommend__txt{
	padding:8%;
	background:#727171;
}
.indexrecommend__title1{
	position:relative;
	margin-bottom:15px;
}
.indexrecommend__title1::after{
	content:"";
	position:absolute;
	top:50%;
	left:95px;
	width:calc(100% - 95px);
	height:1px;
	background:#FFF;
}
.indexrecommend__title1 img{
	width:auto;
	height:14px;
}
.indexrecommend__title2 img{
	width:auto;
	height:16px;
}
.indexrecommend__description{
	margin-top:10px;
	color:#FFF;
	font-size:0.75rem;
	line-height:1.7;
}
.indexrecommend__btn{
	position:relative;
	margin-top: 5px;
	font-size:0.625rem;
	text-align:right;
}
.indexrecommend__btn::before{
	content:"";
	position:absolute;
	top:50%;
	left:0;
	width:calc(100% - 9em - 10px);
	height:1px;
	background:#FFF;
}
.indexrecommend__btn a{
	display:inline-block;
	width:9em;
	padding:5px 0;
	border:1px solid #FFF;
	color:#FFF;
	text-decoration:none;
	text-align:center;
}
@media (min-width: 600px) {
	.indexrecommend__txt{
		padding:6% 8%;
	}
	.indexrecommend__title1{
		margin-bottom:25px;
	}
	.indexrecommend__title1::after{
		left:110px;
		width:calc(100% - 110px);
	}
	.indexrecommend__title1 img{
		height:16px;
	}
	.indexrecommend__title2 img{
		height:22px;
	}
	.indexrecommend__description{
		font-size:0.875rem;
	}
	.indexrecommend__btn{
		margin-top:10px;
		font-size:0.75rem;
	}
	.indexrecommend__btn a{
		padding:6px 0;
	}
}
@media (min-width: 960px) {
	.indexrecommend .container{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		background:#727171;
	}
	.indexrecommend__img{
		width:50%;
		background:#FFF;
	}
	.indexrecommend__img a{
		padding-top:0;
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexrecommend__img a:hover{
		opacity:0.6;
	}
	.indexrecommend__txt{
		width:50%;
		padding:3% 5%;
		background:transparent;
	}
	.indexrecommend__btn a{
		-webkit-transition:background-color 0.5s ease;
		transition:background-color 0.5s ease;
	}
	.indexrecommend__btn a:hover{
		background-color:#CCC;
	}
}

/* indexpickup
-------------------- */
.indexpickup .container{
	max-width:1300px;
}
.indexpickup__list{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
	justify-content: space-between;
	margin:-30px 2% 0;
}
.indexpickup__item{
	width:47%;
	margin-top:30px;
	font-size:0.75rem;
	text-align:center;
	line-height:1.7;
}
.indexpickup__item a{
	display:block;
	color:#000;
	text-decoration:none;
}
.indexpickup__item img{
	width:100%;
	margin-bottom:5px;
}
@media (min-width: 600px) {
	.indexpickup__list{
		margin-top:-40px;
	}
	.indexpickup__item{
		margin-top:40px;
		font-size:1rem;
	}
	.indexpickup__item img{
		margin-bottom:10px;
	}
}
@media (min-width: 960px) {
	.indexpickup__list{
		margin:0;
	}
	.indexpickup__item{
		width:22%;
		max-width:286px;
		margin:0;
	}
	.indexpickup__item a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexpickup__item a:hover{
		opacity:0.6;
	}
}

/* indexranking
-------------------- */
.indexranking .container{
	max-width:1300px;
}
.indexranking__list{
	border-top:1px solid #000;
	border-bottom:1px solid #000;
}
.indexranking__item{
	margin:20px 0;
	font-size:0.75rem;
	line-height:1.7;
}
.indexranking__item a{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
    -webkit-align-items: center;
	align-items: center;
	color:#000;
	text-decoration:none;
}
.indexranking__img{
	display:block;
	width:25%;
	margin:0 5% 0 5%;
}
.indexranking__img img{
	width:100%;
	border-radius:100%;
}
.indexranking__txt{
	display:block;
	width:65%;
}
.indexranking__txt img{
	width:auto;
	height:20px;
	margin-bottom:10px;
}
@media (min-width: 600px) {
	.indexranking__item{
		margin:30px 0;
		font-size:1rem;
	}
}
@media (min-width: 960px) {
	.indexranking__list{
		padding:30px 0;
		text-align:center;
	}
	.indexranking__item{
		display:inline-block;
		width:30%;
		margin:0 0;
		max-width:360px;
		text-align:left;
	}
	.indexranking__item:nth-child(2){
		margin:0 1.5%;
	}
	.indexranking__item a{
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexranking__item a:hover{
		opacity:0.6;
	}
	.indexranking__img{
		width:130px;
		margin:0 10px 0 0;
	}
	.indexranking__txt{
		width:calc(100% - 140px);
		padding-top:30px;
		font-size:0.75rem;
	}
}

/* indexcolumn
-------------------- */
.indexcolumn .container{
	max-width:1300px;
}
.indexcolumn__item{
	margin:20px 0;
	border:1px solid #000;
	font-size:0.75rem;
	line-height:1.7;
}
.indexcolumn__item a{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	height:100%;
	color:#000;
	text-decoration:none;
}
.indexcolumn__img{
	display:block;
	width:33.33%;
}
.indexcolumn__img img{
	width:100%;
	height:100%;
	object-fit: cover;
}
.indexcolumn__txt{
	display:block;
	width:66.66%;
	padding:3%;
}
.indexcolumn__txtcover1{
	display:table;
	width:100%;
	height:100%;
}
.indexcolumn__txtcover2{
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
}
.indexcolumn__date{
	display:block;
}
.indexcolumn__itemtitle{
	display:block;
	margin-top:0;
}
.indexcolumn__description{
	display:none;
}
@media (min-width: 600px) {
	.indexcolumn__item{
		font-size:1rem;
	}
	.indexcolumn__description{
		overflow:hidden;
		display:block;
		margin-top:10px;
		height:48px;
		line-height:24px;
		font-size:0.875rem;
	}
	@supports (-webkit-line-clamp: 6) {
		.indexcolumn__description {
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;
		}
	}
}
@media (min-width: 960px) {
	.indexcolumn__list{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin-top:-2%;
	}
	.indexcolumn__item{
		width:49%;
		margin:2% 0 0;
	}
	.indexcolumn__item a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexcolumn__item a:hover{
		opacity:0.6;
	}
	.indexcolumn__img{
		max-width:210px;
	}
}

/* indexregular
-------------------- */
.indexregular .container{
	max-width:1300px;
}
.indexregular__item{
	margin:20px 0;
	border:1px solid #000;
	font-size:0.75rem;
	line-height:1.7;
}
.indexregular__item a{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	color:#000;
	text-decoration:none;
}
.indexregular__img{
	display:block;
	width:40%;
}
.indexregular__img img{
	width:100%;
	height:100%;
	object-fit: cover;
}
.indexregular__txt{
	display:block;
	width:60%;
	padding:8% 0;
}
.indexregular__itemtitle{
	display:block;
	padding:0 5% 5px;
	border-bottom:1px solid #000;
}
.indexregular__description{
	overflow:hidden;
	display:block;
	margin-top:10px;
	padding:0 5%;
	height:60px;
	line-height:20px;
}
@supports (-webkit-line-clamp: 6) {
	.indexregular__description {
	  display: -webkit-box;
	  -webkit-line-clamp: 3;
	  -webkit-box-orient: vertical;
	}
}
@media (min-width: 600px) {
	.indexregular__item{
		font-size:1rem;
	}
	.indexregular__description{
		font-size:0.875rem;
		height:120px;
		line-height:24px;
	}
	@supports (-webkit-line-clamp: 6) {
		.indexregular__description {
		  display: -webkit-box;
		  -webkit-line-clamp: 5;
		  -webkit-box-orient: vertical;
		}
	}
}
@media (min-width: 960px) {
	.indexregular__list{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin-top:-2%;
	}
	.indexregular__item{
		width:49%;
		margin:2% 0 0;
	}
	.indexregular__item a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexregular__item a:hover{
		opacity:0.6;
	}
	.indexregular__img{
		width:37%;
		max-width:234px;
	}
	.indexregular__txt{
		width:63%;
		padding:20px 0 20px;
	}
	.indexregular__itemtitle{
		padding:0 10% 5px;
	}
	.indexregular__description{
		padding:0 10%;
	}
}

/* indexline
-------------------- */
.indexline{
	margin:calc(6% + 20px) 5% -45px;
	text-align:center;
}
.indexline img{
	width:100%;
	max-width:850px;
}
@media (min-width: 960px) {
	.indexline{
		margin:80px 5% calc(-10% + 70px);
	}
	.indexline a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexline a:hover{
		opacity:0.6;
	}
}

/* indexbottomlogo
-------------------- */
.indexbottomlogo{
	margin-top:calc(10% + 30px);
}
.indexbottomlogo__logo{
	text-align:center;
}
.indexbottomlogo__logosvg{
	width:120px;
	height:auto;
}
.indexbottomlogo__message{
	margin-top:10px;
	text-align:center;
}
.indexbottomlogo__message img{
	width:90%;
	max-width:587px;
}
@media (min-width: 600px) {
	.indexbottomlogo__logosvg{
		width:135px;
	}
	.indexbottomlogo__message{
		margin-top:25px;
	}
}

/* indexsns
-------------------- */
.indexsns{
	margin-top:40px;
	text-align:center;
}
.indexsns li{
	display:inline-block;
	margin:0 4px;
}
.indexsns svg{
	fill:#3e3a39;
	width:24px;
	height:24px;
}
@media (min-width: 600px) {
	.indexsns{
		margin-top:50px;
	}
}
@media (min-width: 960px) {
	.indexsns svg{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexsns svg:hover{
		opacity:0.6;
	}
}

/* indexlink
-------------------- */
.indexlink{
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	margin-top:30px;
	margin-bottom:calc(10% + 30px);
}
.indexlink li{
	width:50%;
}
.indexlink li:nth-child(1){
	padding-right:10px;
	text-align:right;
}
.indexlink li:nth-child(2){
	padding-left:10px;
	border-left:1px solid #000;
	text-align:left;
}
.indexlink a{
	display:block;
	padding:6px 0;
}
.indexlink img{
	width:auto;
	height:10px;
}
@media (min-width: 600px) {
	.indexlink li:nth-child(1){
		padding-right:30px;
	}
	.indexlink li:nth-child(2){
		padding-left:30px;
	}
	.indexlink a{
		padding:10px 0;
	}
	.indexlink img{
		width:auto;
		height:20px;
	}
}
@media (min-width: 960px) {
	.indexlink a{
		-webkit-transition:opacity 0.5s ease;
		transition:opacity 0.5s ease;
	}
	.indexlink a:hover{
		opacity:0.6;
	}
}