@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

.for-sp {
	display: block !important
}

@media(min-width: 901px) {
	.for-sp {
		display: none !important
	}
}

.for-pc {
	display: none !important
}

@media(min-width: 901px) {
	.for-pc {
		display: block !important
	}
}

img.for-sp,
span.for-sp,
br.for-sp {
	display: inline !important
}

@media(min-width: 901px) {

	img.for-sp,
	span.for-sp,
	br.for-sp {
		display: none !important
	}
}

img.for-pc,
span.for-pc,
br.for-pc {
	display: none !important
}

@media(min-width: 901px) {

	img.for-pc,
	span.for-pc,
	br.for-pc {
		display: inline !important
	}
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
	font-size: 0;
	line-height: 0
}

@media(min-width: 901px) {
	img {
		width: auto
	}
}

sup {
	position: relative;
	font-size: 70%;
	vertical-align: top;
	top: .15em
}






/* ===== ベース  */
.l-main {
	display: block;
	width: 100%;
    padding-top: 12%;
	font-size: 3.2vw;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	color: #656565;
	line-height: 1;
	letter-spacing: .06em;
	overflow: inherit;
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
@media(min-width: 901px) {
	.l-main {
        padding-top: 102px;
		font-size: 1rem
	}
}
.l-main a {
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
    text-decoration: none;
}

.l-main .anchor {
	position: absolute;
	top: -16vw;
	width: 0;
	height: 0;
	visibility: hidden;
	z-index: -1
}
@media(min-width: 901px) {
	.l-main .anchor {
		top: -102px
	}
}

.ws-wrap {
	position: relative;
	width: 100%
}

.ws-wrap * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}


/* ===== hero  */
.ws-hero {

}
@media(min-width: 901px) {
}

/* ===== タイトル共通  */
.ws-title01 {
    display: flex;
    align-items: center;
}
.ws-title01::before {
    content: '';
    display: inline-block;
    width: 8vw;
    height: 8vw;
    margin-right: 1.066666vw;
    background: url(/img/freepage/haircareselection/images/icon_sparkling.png) no-repeat center center;
    background-size: cover;
}
.ws-title01 .tit01En {
    margin-right: 2.133333vw;
    color: #604678;
    font-family: "Cormorant Garamond";
    font-size: 6.4vw;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ws-title01 .tit01Ja {
    color: #604678;
    font-family: "Noto Serif JP",serif;
    font-size: 2.666666vw;
    letter-spacing: 0.08em;
}
@media(min-width: 901px) {
    .ws-title01::before {
        width: 50px;
        height: 50px;
        margin-right: 8px;
    }
    .ws-title01 .tit01En {
        margin-right: 16px ;
        font-size: 35px;
    }
    .ws-title01 .tit01Ja {
        font-size: 14px;
    }
}

.ws-title02 {
    margin-bottom: 5.333333vw;
    padding: 2.133333vw 0;
    font-family: "Noto Serif JP",serif;
    font-size: 4.666666vw;
    font-weight: 700;
    color: #604678;
    border-bottom: 1px solid #604678;
    letter-spacing: 0.08em;
}
@media(min-width: 901px) {
    .ws-title02 {
        margin-bottom: 32px;
        padding: 8px 0;
        font-size: 24px;
    }
}



/* ===== スペシャルプレゼント  */
.ws-present {
	position: relative;
	text-align: center;
	padding-top: 5.3333333333vw;
	background: url("/img/freepage/haircareselection/images/present_bg.png") no-repeat center 0;
	background-size: 100%
}

@media(min-width: 901px) {
	.ws-present {
		padding: 50px 2vw;
		background: url("/img/freepage/haircareselection/images/present_bg_pc.jpg") no-repeat center 0;
		background-size: cover;
	}
}
.ws-present p {
    color: #fff;
}

.ws-present__inner {
	position: relative;
	margin: 0 auto;
	padding: 10.266666vw 0 10.6666666vw;
}

@media(min-width: 901px) {
	.ws-present__inner {
		padding: 80px 0;
	}
}

.ws-present__title {
    margin-bottom: 5.33333333vw;
    text-align: center;
}
.ws-present__title .titPresentEn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.0666666vw;
    color: #ffffff;
    font-family: "Cormorant Garamond";
    font-size: 7.466666vw;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ws-present__title .titPresentEn::before,
.ws-present__title .titPresentEn::after {
    content: '';
    display: inline-block;
    width: 6.4vw;
    height: 6.666666vw;
    background: url(/img/freepage/haircareselection/images/icon_sparkling_white.png) no-repeat center center;
    background-size: cover;
}
.ws-present__title .titPresentEn::before {
    margin-right: 3.2vw;
}
.ws-present__title .titPresentEn::after {
    margin-left: 3.2vw;
}
.ws-present__title .titPresentJa  {
    display: block;
    color: #ffffff; 
    font-family: "Noto Serif JP",serif;
    font-size: 3.2vw;
    letter-spacing: 0.08em; 
}
@media(min-width: 901px) {
    .ws-present__title {
        margin-bottom: 40px;
    }
    .ws-present__title .titPresentEn::before,
    .ws-present__title .titPresentEn::after {
        width: 40px; 
        height: 40px;
    }
    .ws-present__title .titPresentEn::before {
        margin-right: 16px;
    }
    .ws-present__title .titPresentEn::after {
        margin-left: 16px;
    }
    .ws-present__title .titPresentEn {
        font-size: 40px;
        margin-bottom: 10px;
    }
    .ws-present__title .titPresentJa {
        font-size: 14px;
    } 
}

.ws-present__wrap {
	width: 90.66666666vw;
	margin: 0 auto 5.33333333vw;
}
@media(min-width: 901px) {
	.ws-present__wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
		width: 100%;
		max-width: 840px;
		margin: 0 auto 24px;
	}
}

.ws-campaign__img {
    width: 80vw;
    margin: 0 auto 5.33333333vw;
}
@media(min-width: 901px) {
    .ws-campaign__img {
        width: 438px;
        margin:0 10px 0 0;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

.ws-campaign__detail {
    
}
.ws-campaign__detail-title {
    margin-bottom: 2.1333333vw;
    font-size: 4.266666vw;
    line-height: 1.7;
    font-feature-settings: "palt";
    letter-spacing: 0.08em;
}
.ws-campaign__detail-title span {
    display: block;
    font-size: 4.8vw;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ws-campaign__detail-notice {
    text-indent: -1em;
    padding-left: 1em;
    font-size: 2.666666vw;
    line-height: 1.75;
    letter-spacing: 0.08em;
}
@media(min-width: 901px) {
    .ws-campaign__detail {
        text-align: left ;
    }
    .ws-campaign__detail-title {
        margin-bottom: 10px;
        font-size: 16px;
    }
    .ws-campaign__detail-title span {
        font-size: 20px;
    }
    .ws-campaign__detail-notice {
        font-size: 12px;
    }
}

.ws-campaign__period {
    width: 89.866666vw;
    margin: 0 auto;
}
@media(min-width: 901px) {
    .ws-campaign__period {
        width: 558px;
    }
}





/* ===== ヘアケア  */
.ws-haircare {
	position: relative;
	background-color: #E0DCF5;
}

.ws-haircare__inner {
    width: 89.8666666vw;
    margin: 0 auto;
	padding: 12vw 0 10.933333vw;
}

@media(min-width: 901px) {
	.ws-haircare__inner {
		width: 96%;
		max-width: 1048px;
		padding: 80px 0 40px
	}
}

.ws-title-hc {
    text-align: center;
}
.ws-title-hc .titHcEn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.0666666vw;
    color: #9145D7;
    font-family: "Cormorant Garamond";
    font-size: 7.466666vw;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ws-title-hc .titHcEn::before,
.ws-title-hc .titHcEn::after {
    content: '';
    display: inline-block;
    width: 8vw;
    height: 8vw;
    background: url(/img/freepage/haircareselection/images/icon_sparkling.png) no-repeat center center;
    background-size: cover;
}
.ws-title-hc .titHcEn::before {
    margin-right: 3.2vw;
}
.ws-title-hc .titHcEn::after {
    margin-left: 3.2vw;
}
.ws-title-hc .titHcJa {
    display: block;
    color: #604678; 
    font-family: "Noto Serif JP",serif;
    font-size: 3.2vw;
    letter-spacing: 0.08em; 
}
@media(min-width: 901px) {
    .ws-title-hc .titHcEn::before,
    .ws-title-hc .titHcEn::after {
        width: 40px; 
        height: 40px;
    }
    .ws-title-hc .titHcEn::before {
        margin-right: 16px;
    }
    .ws-title-hc .titHcEn::after {
        margin-left: 16px;
    }
    .ws-title-hc .titHcEn {
        font-size: 40px;
        margin-bottom: 10px;
    }
    .ws-title-hc .titHcJa {
        font-size: 14px;
    }
}





/* ===== popular　人気カテゴリから選ぶ  */
.ws-popular {
/*	padding-top: 9.7333333333vw;*/
	background-color: #E0DCF5;
}

@media(min-width: 901px) {
	.ws-popular {
	}
}


.ws-popular__inner {
    width: 89.8666666vw;
    margin: 0 auto;
	padding: 7.2vw 0 0;
}

@media(min-width: 901px) {
	.ws-popular__inner {
		width: 96%;
		max-width: 1048px;
		
		padding: 80px 0 0
	}
}

/* ===== カテゴリー  */
.ws-category {
	position: relative;
	background-color: #E0DCF5;
}

.ws-category__inner {
    width: 89.8666666vw;
    margin: 0 auto;
	padding: 12vw 0 10.933333vw;
}

@media(min-width: 901px) {
	.ws-category__inner {
		width: 96%;
		max-width: 1048px;
		
		padding: 80px 0 40px
	}
}

/* ===== カテゴリーリスト  */
.ws-category__list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
    max-width: 1000px;
    margin: 5.333333vw auto 0;
}
@media (min-width: 901px) {
    .ws-category__list {
        margin: 40px auto 0;
    }
}
.ws-category__item {
    position: relative;
    width: 100%;
    margin-top: 10px;
}
.ws-category__item:first-of-type {
    margin-top: 0;
}
@media (min-width: 901px) {
    .ws-category__item {
        width: 49%;
        margin-top: 0;
    }
    .ws-category__item:nth-child(n+3),
    .ws-category__item:nth-child(n+4) {
        margin-top: 18px;
    }
}



.ws-product {
	position: relative;
    background-color: #E0DCF5;
/*	padding: 12.4vw 0 17.3333333333vw*/
}

.ws-product__inner {
    width: 89.8666666vw;
    margin: 0 auto;
    padding: 5.333333vw 0;
}
@media(min-width: 901px) {
	.ws-product__inner {
		width: 96%;
        max-width: 1048px;
        padding: 40px 0;
	}
}


/* =====  CHECK MORE */
.more_link {
    display: flex;
    justify-content: flex-end;
    margin-top: 5.333333vw;
}

.link-checkmore {
    display: flex;
    justify-content: flex-end;
    align-items: center;
/*    padding-right: 10vw;*/
    border-bottom: 1px solid #604678;
    font-family: "Cormorant Garamond";
    font-size: 4.266666vw;
    font-weight: 700;
    color: #604678;
    position: relative;
}
.link-checkmore:hover {
    color: #9145D7;
    border-bottom: 1px solid #9145D7;
}
.link-checkmore::after {
    content: '';
    display: inline-block;
    width: 5.33333333vw;
    height: 5.33333333vw;
    background: url(/img/freepage/haircareselection/images/arrow_checkmore_sp.png) no-repeat center center;
    background-size: cover;
    transition: .3s;
}
.link-checkmore:hover::after {
    background: url(/img/freepage/haircareselection/images/arrow_checkmore_sp_on.png) no-repeat center center;
    background-size: cover;
}

@media (min-width: 901px) {
    .more_link {
        margin-top: 32px;
    }
    .link-checkmore {
        font-size: 20px;
    }
    .link-checkmore::after {
        width: 30px;
        height: 30px;
        margin-left: 4px;
    }
}


/* ===== カートリンク  */
.cart-link {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
    height: 11.7333333333vw;
    padding-left: 5.33333333vw;;
	color: #fff;
    background: #9145D7;
	-webkit-transition: .3s !important;
	transition: .3s !important;
    border-radius: 5.866666666vw;
    z-index: 0;
    overflow: hidden;
}
@media(min-width: 901px) {
	.cart-link {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 52px;
        padding: 0;
        border-radius: 26px;
	}
}
.cart-link span {
	font-size: 3.46666666vw;
}
@media(min-width: 901px) {
	.cart-link span {
		font-size: 1rem
	}
}
.cart-link:hover {
    opacity: 1;
}

.cart-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #D396C6 0%, #9145D7 100%);
    opacity: 0;
    transition: opacity 0.5s;
}
.cart-link:hover::before {
    opacity: 1;
}


.cart-link::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5.33333333vw;
	margin: auto;
	width: 5.33333333vw;
	height: 5.33333333vw;
	background: url("/img/freepage/haircareselection/images/icon_cart.png") no-repeat center;
	background-size: 100%;
	-webkit-transition: .3s;
	transition: .3s
}

@media(min-width: 901px) {
	.cart-link::after {
		right: 16px;
        width: 24px;
		height: auto
	}
}






/* ===== 商品リスト  */
.ws-item-swiper {
    margin-top: 5.33333vw;
    
    position: relative;
}
.ws-item-swiper .swiper {
    padding-bottom: 5.33333vw;
}

@media(min-width: 901px) {
    .ws-item-swiper {
        margin-top: 32px;
    }
    .ws-popular .ws-item-swiper {
        margin-top: 40px;
    }
	.ws-item-swiper .swiper {
		padding-right: 0
	}
}

@media(min-width: 901px) {
	.ws-item-swiper .swiper .swiper-wrapper {
		display: -ms-grid;
		display: grid;
		gap: 0;
		-ms-grid-columns: (1fr)[4];
		grid-template-columns: repeat(4, 1fr)
	}
}
.ws-item-swiper .swiper .swiper-wrapper .swiper-slide {
	width: 50.6666666667vw;
    width: 43.33333333vw;
	height: auto;
/*	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex*/
}
@media(min-width: 901px) {
	.ws-item-swiper .swiper .swiper-wrapper .swiper-slide {
		width: 92%;
        margin: 0 auto;
	}
}

.ws-item-swiper .swiper .swiper-wrapper .swiper-slide-item {
	height: 100%
}
.ws-item-swiper .swiper .swiper-button-prev,
.ws-item-swiper .swiper .swiper-button-next {
	width: 8vw;
	height: 8vw;
    display: none;
}

@media(min-width: 901px) {
	.ws-item-swiper .swiper .swiper-button-prev,
	.ws-item-swiper .swiper .swiper-button-next {
		display: none
	}
}

.swiper-pagination {
    top: inherit;
    bottom: 0!important;
}
.swiper-pagination-bullet {
    background: #9145D7;
    opacity: 0.3;
}
.swiper-pagination-bullet-active {
    background: #9145D7;
    opacity: 1;
}




.ws-product__item {

}

.ws-product__item-img {
    margin-bottom: 3.2vw;
    border-radius: 3.2vw;
    border: 1px solid #604678;
    background: #EDEBF7;
}
.ws-product__item-img a {
    display: block;
/*    width: 100%;
    aspect-ratio: 13 / 16;*/
}
.ws-product__item-img a:hover {
    opacity: 0.5;
}
.ws-product__item-img img {
    width: 100%;
    aspect-ratio: 13 / 16;
    object-fit: cover;
}
.ws-product__item-img_02 img {
    object-fit: contain;
}

.ws-product__item-brand {
    min-height: 2.5em;
    margin-bottom: 1.066666vw;
    font-size: 2.9333333vw;
    color: #604678;
    line-height: 1.18;
}
.ws-product__item-name {
    min-height: 5em;
    margin-bottom: 2.133333vw;
    font-size: 3.4666666vw;
    font-weight: 600;
    color: #604678;
    line-height: 1.46;
}
.ws-product__item-price {
    margin-bottom: 5.333333vw;
    font-size: 2.6666666vw;
    color: #604678;
}
.ws-product__item-price span {
    margin-left: 1.0666666vw;
    font-size: 3.466666vw;
}
@media(min-width: 901px) {
    .ws-product__item-img {
        margin-bottom: 24px;
        border-radius: 24px;
    }
    .ws-product__item-img img {
        aspect-ratio: 3 / 4;
    }
    .ws-product__item-brand {
        margin-bottom: 8px;
        font-size: 14px;
    }
    .ws-product__item-name {
        min-height: 4.9em;
        margin-bottom: 16px;
        font-size: 16px;
    }
    .ws-product__item-price {
        margin-bottom: 32px;
        font-size: 12px;
    }
    .ws-product__item-price span {
        margin-left: 8px ;
        font-size: 16px;
    }
}






/* ===== ご予算で選ぶ */
.ws-price {
	position: relative;
	background-color: #E0DCF5;
}
.ws-price__inner {
    width: 89.8666666vw;
    margin: 0 auto;
	padding: 12vw 0 5.333333vw;
}
@media(min-width: 901px) {
	.ws-price__inner {
		width: 96%;
		max-width: 1048px;
		padding: 80px 0 40px;
	}
}

.ws-price__tab-list {
    display: flex;
    margin: 5.333333vw auto;
    border-bottom: 2px solid #C8AFEC;
    position: relative;
}
.ws-price__tab-item {
    width: calc(100% / 3);
    margin-bottom: -2px;
    font-family: "Noto Serif JP",serif;
    font-size: 4.266666vw;
    font-weight: 700;
    color: #604678;
    text-align: center;
    cursor: pointer;
}
.ws-price__tab-item span {
    display: block;
    padding: 2.13333vw 0;
    opacity: 0.7;
    transition: all .2s ease;
}
.ws-price__tab-item:hover span,
.ws-price__tab-item.is-active span {
    opacity: 1;
    
}
.ws-price__tab-item:hover {
    border-bottom: 2px solid #9145D7;
}
.ws-price__tab-item.is-active {
    border-bottom: 2px solid #9145D7;
}
@media(min-width: 901px) {
    .ws-price__tab-list {
        margin: 40px auto 32px;
    }
    .ws-price__tab-item {
        width: auto;
        font-size: 24px;
    }
    .ws-price__tab-item span {
        padding: 16px 40px;
    }
}




/* ===== ブランドから選ぶ */
.ws-brand {
	position: relative;
	background-color: #E0DCF5;
}

.ws-brand__inner {
    width: 89.8666666vw;
    margin: 0 auto;
	padding: 12vw 0 10.933333vw;
}

@media(min-width: 901px) {
	.ws-brand__inner {
		width: 96%;
		max-width: 1048px;
		padding: 80px 0;
	}
}
.ws-brand__list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
    max-width: 1048px;
    margin: 5.333333vw auto 0;
    gap: 2.666666vw;
}
@media (min-width: 901px) {
    .ws-brand__list {
        justify-content: flex-start;
        gap: 24px;
        margin: 40px auto 0;
    }
}
.ws-brand__item {
    position: relative;
    width: 43.333333vw;
}
@media (min-width: 901px) {
    .ws-brand__item {
        width: calc((100% - 72px) / 4);
    }
}
.ws-brand__item a:hover {
    opacity: 0.5;
}







/* ===== モーダル */
.block-modal * {
    -webkit-box-sizing: border-box;
	box-sizing: border-box
}

.block-modal {
	display: inline-block;
	position: relative;
	width: 89.3333333vw;
	max-width: none;
	padding: 0;
	vertical-align: middle;
	-webkit-animation-name: scalefadeout;
	animation-name: scalefadeout;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	opacity: 0;
}

@media(min-width: 901px) {
	.block-modal {
		width: 80%;
		max-width: 704px;
		padding: 0;
	}
}

.is-opend .block-modal {
	-webkit-animation-name: scalefadein;
	animation-name: scalefadein;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	opacity: 1
}

.block-modal__wrapper {
	display: none;
	position: fixed;
	z-index: 10000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	text-align: center;
	-webkit-overflow-scrolling: touch;
	padding: 10vw 0 15vw
}

@media(min-width: 901px) {
	.block-modal__wrapper {
		padding: 15px
	}
}

.block-modal__wrapper::after {
	display: inline-block;
	content: "";
	height: 100%;
	margin-left: -0.05em;
	vertical-align: middle
}

.block-modal__overlay {
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #000;
	opacity: 0
}

.is-opend .block-modal__overlay {
	opacity: .4
}

.block-modal__inner {
	position: relative;
	padding: 6.4vw 0;
    border-radius: 7.4666666vw;
	background-color: #E0DCF5 ;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 500
}

@media(min-width: 901px) {
	.block-modal__inner {
		padding: 24px 0 40px;
        border-radius: 32px;
	}
}


.block-modal__item_detail {
    width: 88%;
    margin: 0 auto;
}
@media(min-width: 901px) {
    .block-modal__item_detail {
        width: 90%;
        max-width: 394px;
    }
}
.block-modal__img {
	position: relative;
	width: 78%;
	margin: 0 auto
}

@media(min-width: 901px) {
	.block-modal__img {
		width: 315px
	}
}

.block-modal__brand {
	margin-top: 2.133333333vw;
	font-size: 2.93333333vw;
    text-align: left;
}

@media(min-width: 901px) {
	.block-modal__brand {
		margin-top: 8px;
		font-size: 14px
	}
}

.block-modal__name {
	margin-top: 0.6em;
	font-size: 3.46666666vw;
    font-weight: 700;
	line-height: 1.4;
    text-align: left;
}

@media(min-width: 901px) {
	.block-modal__name {
        margin-top: 4px;
		font-size: 16px
	}
}

.block-modal__name-sub {
	display: block
}

.block-modal__type {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 88%;
	margin:6.4vw auto 0
}

@media(min-width: 901px) {
	.block-modal__type {
        width: 90%;
        max-width: 394px;
		margin-top:32px
	}
}

.block-modal__type-item {
	position: relative;
	width: 50%;
    padding: 4vw 0;
	text-align: center;
    border-radius: 2.1333333vw;
}
@media(min-width: 901px) {
	.block-modal__type-item {
        padding: 15px 0;
		color: #3e3a39;
        border-radius: 16px;
		cursor: pointer
	}
}


.block-modal__type-item.is-selected {
    background: rgba(145, 69, 215, 0.20);
}


.block-modal__type-thumb {
	padding: 0 6.3333333333vw
}

@media(min-width: 901px) {
	.block-modal__type-thumb {
		padding: 0 24px
	}
}

.block-modal__type-name {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-height: 2em;
	margin-top: 0.5333333vw;
	font-size: 2.4vw;
	line-height: 1.6
}

@media(min-width: 901px) {
	.block-modal__type-name {
		min-height: 2em;
		margin-top: 5px;
		font-size: 14px;
	}
}

.block-modal__detail {
	margin-top: 2.13333333vw;
	font-size: 2.6666666vw;
    text-align: left;
}

@media(min-width: 901px) {
	.block-modal__detail {
		margin-top: 15px;
		font-size: 12px;
	}
}
.block-modal__detail-volume {
	margin-right: .25em;
    font-size: 2.6666666vw;
    text-align: left;
}

.block-modal__detail-price {
	font-size: 4vw;
    font-weight: 700;
    text-align: left;
}

@media(min-width: 901px) {
    .block-modal__detail-volume {
        font-size: 12px;
    }
	.block-modal__detail-price {
		font-size: 18px;
	}
}

.block-modal__btn {
	width: 43.333333333vw;
	margin: 6.4vw auto 0
}
@media(min-width: 901px) {
	.block-modal__btn {
		width: 85%;
        max-width: 240px;
		margin-top: 32px
	}
}
.block-modal__close {
	position: absolute;
	top: 3.2vw;
	right: 3.2vw;
	width: 10.66666666vw;
	height: 10.66666666vw;
	background: url(/img/freepage/haircareselection/images/btn_close.png) no-repeat 0 0;
	background-size: contain;
	z-index: 10001
}
@media(min-width: 901px) {
	.block-modal__close {
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
		cursor: pointer
	}
}




@-webkit-keyframes fadein {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@keyframes fadein {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

@-webkit-keyframes fadeout {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeout {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@-webkit-keyframes scalefadein {
	0% {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
		opacity: 0
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1
	}
}

@keyframes scalefadein {
	0% {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
		opacity: 0
	}

	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1
	}
}

@-webkit-keyframes scalefadeout {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1
	}

	100% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
		opacity: 0
	}
}

@keyframes scalefadeout {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1
	}

	100% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
		opacity: 0
	}
}