@charset "utf-8";
:root {
    --font_family_mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "Yu Mincho", "YuMincho", "MS PMincho", serif;
}

/*-------------------
    common
-------------------*/
#container{
    overflow: hidden;
}
#container .wrapper {
    color: #000;
    font: 3.8vw/6vw -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    padding-bottom: 20px;
    text-align: justify;
}
@media screen and (min-width:768px){
#container .wrapper {
    font-size: 0.9vw;
    line-height: 1.5vw;
}
}
#container .wrapper * {
    box-sizing: border-box;
}
#container .flex {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
#container .wrapper p{
    margin: 0;
}
#container .wrapper img{
	display: block;
    margin: 0 auto;
	width: 100%;
}
#container .wrapper a:hover{
    opacity: 1;
}

/* 固定ボタン */
#container .fixed-btn{
	opacity: 0;
	position: fixed;
	bottom: 1%;
	visibility: hidden;
	z-index: 1000;
}
#container .fixed-btn a{
	display: block;
	margin: 0 auto;
	width: 90%;
}
#container .fixed-btn a:hover,
#container .fixed-btn a img:hover {
	opacity: 1;
}
#container .fixed-btn {
	animation: dokidoki 0s ease-in-out infinite;
	animation-duration: 3s;
}
@keyframes dokidoki {
	0% {transform: scale(1);}
	40% {transform: scale(1);}
	50% {transform: scale(1.1);}
	60% {transform: scale(1);}
	70% {transform: scale(1.1);}
	80% {transform: scale(1);}
	100% {transform: scale(1);}
}
#container .active{
	opacity: 1;
	visibility: visible;
}

@media screen and (min-width:768px){
#container .fixed-btn_pc{
	display: none;
}
}

/*-------------------
    mainvisual
-------------------*/
#container .mainvisual{
    background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/fv_sp.jpg) no-repeat;
    background-size: 100%;
    color: #FFF;
    padding: 6vw 3vw 4vw;
    text-align: center;
}
@media screen and (min-width:768px){
#container .mainvisual{
    background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/fv_pc.jpg) no-repeat;
    background-size: cover;
    padding: 3.5vw 20vw 8vw
}
#container .mainvisual-inner{
	width: 35vw;
}
}
#container .mainvisual .titleCtach{ 
    font-size: 4.5vw;
}
@media screen and (min-width:768px){
#container .mainvisual .titleCtach{
    font-size: 1.5vw;
}
}
#container .mainvisual h1{
    font-family: var(--font_family_mincho);
    font-size: 9.5vw;
    font-weight: 600;
    margin-top: 58vw;
    text-shadow: 2px 2px 10px #0b0f24,-2px 2px 10px #0b0f24,2px -2px 10px #0b0f24,-2px -2px 10px #0b0f24;
}
@media screen and (min-width:768px){
#container .mainvisual h1{
    font-size: 4vw;
    line-height: 3.5vw;
	margin-top: 5px;
}
}
#container .mainvisual .fv-notes{
    color: #9093cc;
    font-size: 2.5vw;
    line-height: 1rem;
    margin-top: 15px;
}
@media screen and (min-width:768px){
#container .mainvisual .fv-notes{
    font-size: 0.7vw;
	line-height: 1.1vw;
}
}

/*-------------------
  contents_common
-------------------*/
#container .buy-btn a{
    background: #FFF;
    border: solid 1px #aa39b1;
    color: #aa39b1;
    display: block;
    font-size: 5vw;
    padding: 12px;
    position: relative;
    text-align: center;
}
#container .buy-btn a::before{
    border-top: solid 1px #aa39b1;
	border-right: solid 1px #aa39b1;
    bottom: 0;
    content: "";
    height: 10px;
    margin: auto;
    position: absolute;
    right: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
	top: 0;
	width: 10px;
}
#container .buy-btn a:hover{
     background: #aa39b1;
    color: #FFF;
}
#container .buy-btn a:hover::before{
    border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
}
@media screen and (min-width:768px){
#container .buy-btn a{
    font-size: 1.5vw;
    padding: 4%;
}
#container .buy-btn a::before{
    height: 15px;
	width: 15px;
}
}

/* scrollFadein */
.scrollFadein{
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fadein-bottom{
    transform: translate(0,30px);
}
.scrollIn{
    opacity: 1;
    transform: translate(0, 0);
}


/*-------------------
   dotsheet
-------------------*/
#container .dotsheet{
    background-image: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/dotsheet-bg.png);
    background-size: 20px;
    background-color: #000;
    padding: 5vw 0;
}
#container .dotsheet .dotsheetPht{
    margin: 0 auto;
    width: 90vw;
}
@media screen and (min-width:768px){
#container .dotsheet{
    background-size: 30px;
    padding: 3vw 0;
}
#container .dotsheet .dotsheetPht{
    width: 40vw;
}
}

/*-------------------
    trouble
-------------------*/
#container .trouble{
    background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/trouble-bg_sp.jpg) no-repeat;
    background-position: center bottom;
    background-size: 100%;
    background-color: #eee;
    padding: 8vw 0;
    text-align: center;
}
@media screen and (min-width:768px){
#container .trouble{
    background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/trouble-bg_pc.jpg) no-repeat;
    background-position: center bottom;
    background-size: 100%;
    background-color: #eee;
    padding: 5vw 0;
}
#container .trouble .troubleInner{
	margin: 0 auto;
	width: 50vw;
}
}
#container .trouble h2{
    border-bottom: solid 1px #000;
    display: inline-block;
    font-size: 6vw;
    line-height: 8vw;
    padding-bottom: 3px;
}
@media screen and (min-width:768px){
#container .trouble h2{
    font-size: 2vw;
    line-height: 3vw;
}
#container .trouble h2 br{
	display: none;
}
}
#container .trouble .troublePht{
    margin-left: -3vw;
    width: 106vw;
}
@media screen and (min-width:768px){
#container .trouble .troublePht{
    margin: 0 auto;
    width: 80%;
}
}
#container .trouble .causeTitle{
    font-size: 8vw;
    font-weight: 600;
    margin: 5vw 0;
}
#container .trouble .causePht{
    margin: 0 auto;
    width: 90vw;
}
@media screen and (min-width:768px){
#container .trouble .causeTitle{
    font-size: 2.5vw;
    margin: 2vw 0;
}
#container .trouble .causePht{
   width: 80%;
}
}

/*-------------------
    about
-------------------*/
#container .premiummask{
    background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/premiummask-bg_sp.jpg) no-repeat;
    background-size: cover;
    color: #FFF;
    padding: 8vw 5vw;
    text-align: center;
}
@media screen and (min-width:768px){
#container .premiummask{
    background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/premiummask-bg_pc.jpg) no-repeat;
    background-size: cover;
    padding: 5vw 0;
}
#container .premiummask .premiummaskInner{
	margin: 0 auto;
	width: 50vw;
}
}
#container .premiummask .premiummaskTitle-catch{
    border: solid 1px #FFF;
    display: inline-block;
    font-size: 4.5vw;
    padding: 2% 3%;
}
#container .premiummask h2{
    font-family: var(--font_family_mincho);
    font-size: 6.5vw;
    font-weight: 600;
    line-height: 8vw;
    margin-top: 8px;
}
@media screen and (min-width:768px){
#container .premiummask .premiummaskTitle-catch{
    font-size: 1.5vw;
    padding: 1% 2%;
}
#container .premiummask h2{
    font-size: 3vw;
    line-height: 3.5vw;
}
}
#container .premiummask .itemPht{
    margin: 10px auto 0;
    width: 90%;
}
#container .premiummask .seibunPht{
    filter: drop-shadow(3px 3px 5px #4639fd);
}
@media screen and (min-width:768px){
#container .premiummask .itemPht{
    margin-top: 20px;
    width: 65%;
}
#container .premiummask .seibunPht{
	margin: 0 auto;
	width: 75%;
}
}
#container .premiummask h3{
    margin-top: 10px;
}
@media screen and (min-width:768px){
#container .premiummask h3{
	font-size: 1.2vw;
    margin-top: 30px;
}
}
#container .premiummask .buy-btn{
    margin: 5px auto 0;
    width: 90%;
}
@media screen and (min-width:768px){
#container .premiummask .buy-btn{
    margin-top: 15px;
    width: 60%;
}
}
#container .stemcells{
	padding: 8vw 5vw;
}
@media screen and (min-width:768px){
#container .stemcells{
	margin: 0 auto;
	padding: 5vw 0;
	width: 50vw;
}
}
#container .stemcells .stemcellsAbout-box li:last-child{
	margin-top: 8vw;
}
#container .stemcells .stemcellsAbout-box h3{
	font-size: 5.5vw;
	margin-bottom: 10px;
	text-align: center;
}
#container .stemcells .stemcellsAbout-box .stemcellsDesc{
	margin-top: 10px;
}
@media screen and (min-width:768px){
#container .stemcells .stemcellsAbout-box li{
	margin: 0 auto;
	width: calc(90% / 2);
}
#container .stemcells .stemcellsAbout-box li:last-child{
	margin-top: 0;
}
#container .stemcells .stemcellsAbout-box h3{
	font-size: 1.5vw;
	margin-bottom: 15px;
}
}
#container .stemcells .careTitle{
	background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/stemcells-title-bg.png) no-repeat;
	background-position: center bottom;
	background-size: 100%;
	font-size: 5vw;
	margin: 8vw 0 5px;
	line-height: 8vw;
	padding-bottom: 5vw;
	text-align: center;
}
#container .stemcells .careTitle strong{
	font-size: 7.5vw;
}
#container .stemcells .careTitle sup{
	font-size: 0.6rem;
	line-height: 1rem;
	vertical-align: top;
}
@media screen and (min-width:768px){
#container .stemcells .careTitle{
	font-size: 1.5vw;
	margin: 3vw auto 0;
	line-height: 2.5vw;
	padding-bottom: 2vw;
	width: 70%;
}
#container .stemcells .careTitle strong{
	font-size: 2.5vw;
}
#container .stemcells .careTitle sup{
	font-size: 0.7vw;
}
#container .stemcells .stemcellsPht{
	margin: 0 auto;
	width: 70%;
}
}

/*-------------------
    ingredients
-------------------*/
#container .ingredients{
	padding: 8vw 0;
	overflow: hidden;
	position: relative;
}
#hoge{
	background-image: linear-gradient(110deg, #900e95 0%, #591183 25%, #122973 75%, #071440 100%);
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	top: 0;
	left: 0;
}
@media screen and (min-width:768px){
#container .ingredients{
	padding: 5vw 0;
}
}
#container .ingredients h2{
	color: #FFF;
	font-size: 7.5vw;
	line-height: 9.5vw;
	margin-bottom: 20px;
	text-align: center;
}
@media screen and (min-width:768px){
#container .ingredients h2{
	font-size: 2vw;
	line-height: 3vw;
}
#container .ingredients h2 br{
	display: none;
}
}
#container .ingredients .ingredientsInner{
	margin: 0 auto;
	 position: relative;
	width: 90vw;
	z-index: 1;
}
@media screen and (min-width:768px){
#container .ingredients .ingredientsInner{
	margin: 0 auto;
	width: 50vw;
}
}
#container .ingredients .ingredientsBox{
	background: #FFF;
	border-radius: 25px;
	margin-bottom: 5vw;
	padding: 5vw;
}
@media screen and (min-width:768px){
#container .ingredients .ingredientsBox{
	align-items: center;
	border-radius: 80px;
	margin-bottom: 2vw;
	padding: 3%;
}
#container .ingredients .reverse{
	flex-direction:row-reverse;
}
}
#container .ingredients .ingredientsBox .ingredientsPht{
	margin: 0 auto;
	width: 90%;
}
@media screen and (min-width:768px){
#container .ingredients .ingredientsBox .ingredientsPht{
	margin: 0 auto;
	width: 35%;
}
#container .ingredients .ingredientsBox .ingredientsTxt{
	margin: 0 auto;
	width: 60%;
}
}
#container .ingredients .ingredientsBox .ingredientsTxt h3{
	color: #aa39b1;
	font-size: 5.5vw;
	font-weight: 600;
	line-height: 7vw;
	margin-bottom: 10px;
}
#container .ingredients .ingredientsBox .ingredientsTxt h3 span{
	font-size: 4.5vw;
	font-weight: 600;
	display: block;
}
#container .ingredients .ingredientsBox .ingredientsTxt h3 sup,
#container .ingredients .ingredientsBox .ingredientsTxt .ingredientsDesc sup{
	font-size: 0.6rem;
	line-height: 1rem;
	vertical-align: top;
}
#container .ingredients .ingredientsBox .ingredientsTxt .ingredientsTxt-notes{
	font-size: 2.5vw;
	line-height: 1rem;
	text-align: right;
}
@media screen and (min-width:768px){
#container .ingredients .ingredientsBox .ingredientsTxt h3{
	font-size: 2vw;
	line-height: 2.5vw;
}
#container .ingredients .ingredientsBox .ingredientsTxt h3 span{
	font-size: 1.5vw;
}
#container .ingredients .ingredientsBox .ingredientsTxt h3 sup{
	font-size: 0.6vw;
	line-height: 1.5rem;
}
#container .ingredients .ingredientsBox .ingredientsTxt .ingredientsDesc sup{
	font-size: 0.4vw;
	line-height: 1.5rem;
}
#container .ingredients .ingredientsBox .ingredientsTxt .ingredientsTxt-notes{
	font-size: 0.7vw;
	line-height: 1.2rem;
	margin-top: 15px;
}
}
#container .ingredients .ingredientsPlus{
	position: relative;
	z-index: 2;
}
#container .ingredients .ingredientsPlus .plusPht{
	margin-left: -10vw;
	width: 120vw;
}
@media screen and (min-width:768px){
#container .ingredients .ingredientsPlus{
	background-image: linear-gradient(90deg, #f9fafa 0%, #b9babc 100%);
	margin-top: 5vw;
}
#container .ingredients .ingredientsPlus .plusPht{
	margin: 0 auto;
	width: 50vw;
}
}

/*-------------------
    dotsheet-about
-------------------*/
#container .dotsheet-about{
	background-image: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/dotsheet-bg.png);
    background-size: 20px;
    background-color: #000;
	padding-top: 50vw;
}
#container .dotsheet-about .dotsheet-about-whiteBg{
	padding-top: 20vw;
	background: #FFF;
}
#container .dotsheet-about .dotsheet-aboutInner{
	position: relative;
}
@media screen and (min-width:768px){
#container .dotsheet-about{
    background-size: 30px;
	padding-top: 25vw;
}
#container .dotsheet-about .dotsheet-about-whiteBg{
	padding-top: 10vw;
}
#container .dotsheet-about .dotsheet-aboutInner{
	margin: 0 auto;
	position: relative;
	width: 45vw;
}
}
#container .dotsheet-about h2{
	margin-left: 5vw;
	position: absolute;
	top: -60vw;
	width: 90vw;
}
@media screen and (min-width:768px){
#container .dotsheet-about h2{
	margin-left: 0;
	position: absolute;
	top: -30vw;
	width: 100%;
}
}
#container .dotsheet-about .dotsheet-aboutTxt{
	border: solid 1px #aa39b1;
	margin: 0 auto;
	position: relative;
	width: 90vw;
}
#container .dotsheet-about .dotsheet-aboutTxt dt{
	margin-top: -5vw;
	text-align: center;
}
#container .dotsheet-about .dotsheet-aboutTxt dt span{
	background: #FFF;
	color: #aa39b1;
	display: inline-block;
	font-size: 5vw;
	font-weight: 600;
	padding: 5px;
}
#container .dotsheet-about .dotsheet-aboutTxt dd{
	padding: 3vw;
	padding-top: 0;
}
#container .dotsheet-about .dotsheet-aboutTxt dd span{
	background: #efc6f1;
}
@media screen and (min-width:768px){
#container .dotsheet-about .dotsheet-aboutTxt{
	width: 80%;
}
#container .dotsheet-about .dotsheet-aboutTxt dt{
	margin-top: -4%;
}
#container .dotsheet-about .dotsheet-aboutTxt dt span{
	font-size: 1.5vw;
	padding: 10px;
}
#container .dotsheet-about .dotsheet-aboutTxt dd{
	padding: 0 3% 2%;
}
}
#container .dotsheet-about h3{
	margin-top: 5vw;
	margin-left: -18vw;
	width: 130vw;
}
@media screen and (min-width:768px){
#container .dotsheet-about h3{
	margin-top: 3vw;
	margin-left: 0;
	width: 100%;
}
}
#container .dotsheet-about .dotsheet-flow{
	margin: 0 auto;
	width: 80vw;
}
#container .dotsheet-about .dotsheet-flow li{
	margin-bottom: 10vw;
	position: relative;
}
#container .dotsheet-about .dotsheet-flow li:after{
	border-color: #d389d7 transparent transparent transparent;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	bottom: -8vw;
	content: "";
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	width: 0;
}
#container .dotsheet-about .dotsheet-flow li:last-child:after{
	display: none;
}
#container .dotsheet-about .dotsheet-flow .flowDesc{
	margin-top: 10px;
}
@media screen and (min-width:768px){
#container .dotsheet-about .dotsheet-flow{
	width: 100%;
}
#container .dotsheet-about .dotsheet-flow li{
	margin: 3% auto 0;
	width: calc(85% / 3);
}
#container .dotsheet-about .dotsheet-flow li:after{
	border-width: 1vw 1vw 0 1vw;
	bottom: auto;
	left: auto;
	transform: rotate(-90deg);
	position: absolute;
	right: -1.45vw;
	top: 28%;
}
}

/*-------------------
    mixture
-------------------*/
#container .mixture{
	background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/mixture-bg_sp.jpg) no-repeat;
	background-size: cover;
	padding: 5vw 5vw 1vw;
}
@media screen and (min-width:768px){
#container .mixture{
	background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/mixture-bg_pc.jpg) no-repeat;
	background-size: cover;
	margin-top: 5vw;
	padding: 2vw 0 1vw;
}
#container .mixture .mixtureInner{
	margin: 0 auto;
	width: 40vw;
}
}
#container .mixture h2{
	font-size: 8vw;
	font-weight: 800;
	line-height: 10vw;
}
#container .mixture h2 strong{
	font-size: 12vw;
	letter-spacing: -1px;
}
#container .mixture h2 sup{
	font-size: 0.6rem;
	line-height: 2rem;
	vertical-align: top;
}
#container .mixture .catchDesc{
	font-size: 4.5vw;
}
#container .mixture .mixture-notes{
	font-size: 2.5vw;
	margin-top: 55vw;
}
@media screen and (min-width:768px){
#container .mixture h2{
	font-size: 3vw;
	line-height: 3.5vw;
}
#container .mixture h2 strong{
	font-size: 4vw;
}
#container .mixture h2 sup{
	font-size: 0.7vw;
	line-height: 3rem;
}
#container .mixture .catchDesc{
	font-size: 1.5vw;
	line-height: 2vw;
	margin-top: 2%;
}
#container .mixture .mixture-notes{
	font-size: 0.7vw;
	margin-top: 22vw;
}
}

/*-------------------
    achievement
-------------------*/
#container .achievement{
	background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/achievement-bg_sp.jpg) no-repeat;
	background-size: cover;
	padding: 8vw 0;
}
@media screen and (min-width:768px){
#container .achievement{
	background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/achievement-bg_pc.jpg) no-repeat;
	background-size: cover;
	padding: 5vw 0;
}
#container .achievement .achievementInner{
	margin: 0 auto;
	width: 50vw;
}
}
#container .achievement .emblem{
	margin: 3vw auto;
	width: 90vw;
}
#container .achievement .emblem li{
	margin: 0 auto;
	width: calc(96% / 2);
}
@media screen and (min-width:768px){
#container .achievement .emblem{
	margin: 0 auto;
	width: 70%;
}
}
#container .achievement .achievementMain{
	position: relative;
}
#container .achievement .achievementMain .companyPht{
	width: 109vw;
}
#container .achievement .achievementMain h2{
	bottom: 6vw;
	font-family: var(--font_family_mincho);
    font-size: 6vw;
    font-weight: 600;
	left: 5vw;
	line-height: 8vw;
	position: absolute;
}
#container .achievement .achievementMain h2 strong{
	display: block;
	font-size: 8vw;
}
@media screen and (min-width:768px){
#container .achievement .achievementMain .companyPht{
	margin-top: 3%;
	width: 100%;
}
#container .achievement .achievementMain h2{
	bottom: 10%;
    font-size: 2vw;
	left: 8%;
	line-height: 3.5vw;
}
#container .achievement .achievementMain h2 strong{
	font-size: 3.5vw;
}
}
#container .achievement h3{
	margin-top: 10px;
	text-align: center;
}
@media screen and (min-width:768px){
#container .achievement h3{
	font-size: 1.2vw;
	margin-top: 30px;
}
}
#container .achievement .buy-btn{
    margin: 5px auto 0;
    width: 80%;
}
@media screen and (min-width:768px){
#container .achievement .buy-btn{
	margin-top: 15px;
    width: 60%;
}
}

/*-------------------
    notused
-------------------*/
#container .notused{
	background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/free-bg_sp.jpg) no-repeat;
	background-size: 100%;
	padding: 5vw 0;
}
#container .notused .notusedPht{
	margin: 0 auto;
	width: 85%;
}
@media screen and (min-width:768px){
#container .notused{
	background: url(/contents/shop/sevenbeauty/img/freepage/exosome-mask/free-bg_pc.jpg) no-repeat;
	background-size: 100%;
	padding: 3vw 0;
}
#container .notused .notusedPht{
	margin: 0 auto;
	width: 40vw;
}
}

/*-------------------
    howto
-------------------*/
#container .howto .howto-step{
	background: #000;
	padding: 8vw 3vw 5vw;
}
#container .howto .howto-step h2{
	color: #FFF;
	font-size: 5.5vw;
	margin-bottom: 10px;
	text-align: center;
}
@media screen and (min-width:768px){
#container .howto .howto-step{
	padding: 3vw 0;
}
#container .howto .howto-step h2{
	font-size: 2vw;
	margin-bottom: 20px;
}
#container .howto .howto-step .howtoPht{
	margin: 0 auto;
	width: 40vw;
}
}
#container .howto .howto-salon{
	margin-top: 5vw;
	width: 110vw;
}
@media screen and (min-width:768px){
#container .howto .howto-salon{
	margin: 3vw auto 0;
	width: 40vw;
}
}
#container .howto .buy-btn{
    margin: 5vw auto 0;
    width: 80%;
}
@media screen and (min-width:768px){
#container .howto .buy-btn{
	margin-top: 40px;
    width: 30%;
}
}