@charset "UTF-8";
/*---------------------------------------------
00. reset
---------------------------------------------*/

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
  margin: 0;
   padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0; }

a {
  background-color: transparent;
  text-decoration: none;
  text-decoration: none;
  color: inherit; }

p{
margin:0;
padding:0;
}

img {
    border-style: none;
    vertical-align: bottom;
    width: 100%;
    height: auto; }

video{
    max-width: 100%;
}

li {
	text-decoration: none!important;
	list-style: none!important;
}
/*---------------------------------------------
common
---------------------------------------------*/
body{
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    line-height: 1.8;
    font-size: 1.4rem;
    letter-spacing: .05em;
    font-feature-settings: "palt";
    font-family: "figtree", "zen-kaku-gothic-new","Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", YuGothic, 游明朝, 游明朝体, "Yu Mincho", YuMincho, sans-serif;
	color: #727171;
	font-weight: 400;
}

.fig {
    letter-spacing: 0.1rem;
    padding-left: 1%;
}

.fig_light {
    font-weight: 300;
	letter-spacing: 0.15rem;
}

  @media screen and (max-width: 389px) {
      html {
          font-size: 61%;
      }
  }
  
  @media screen and (max-width: 720px) {
      html {
          font-size: 62.5%;
      }
  }
  
    @media screen and (min-width: 721px) {
      html {
          font-size: 70%;
      }
  }

.v-top {
    vertical-align: text-top
}
.flex {
    display: -webkit-box;
    display: -ms-flexbox !important;
    display: flex !important;
}
.fix {
    position: fixed !important;
    width: 100%;
    overflow: hidden
}
.text-small {
    font-size: 10px;
    line-height: 1.65;
    letter-spacing: 0.05em
}

.sp {
    display: block
}
.pc {
    display: none
}
.text-right{
	text-align: right;
}

.sp_wrap{
    overflow: clip;
/*	position: relative;
	z-index: 3;*/
}

@media screen and (min-width: 760px){

body {
    background: linear-gradient(160deg, #fbded7, #d3e5f2);
	background-attachment: fixed;
}

.lp_wrap {
	height: 100vh;
    width: 100%;

}

.inner {
  /*height: 100vh;*/
  overflow: hidden;
  /*overflow-y: scroll;*/
}

.sp_wrap{
    max-width: 500px;
    margin: auto;
	position: relative;
}
.sp {
    display: none;
}
.ipad {
    display: block;
}

}

@media screen and (min-width: 1025px){
.sp {
    display: none;
}
.ipad {
    display: none;
}
.pc {
    display: block;
}
}

@media screen and (min-width: 1024px) and (max-height: 768px){
.sp {
    display: none;
}
.ipad {
    display: none;
}
.pc {
    display: block;
}
}
/*---------------------------------------------
animation
---------------------------------------------*/

/*--------------スクロールアニメーション---------------*/


.scroll_up {
  transition: 1.2s ease-out;
  opacity: 0;
}
.scroll_up.on {
  opacity: 1.0;
}


.scroll_up2 {
  transition: 1.2s ease-out;
  transform: translateY(50px);
  opacity: 0;
}
.scroll_up2.on {
  transform: translateY(0);
  opacity: 1.0;
}

.scroll_up3 {
  transition: 1.2s ease-out;
  transform: translateY(-50px);
  opacity: 0;
}
.scroll_up3.on {
  transform: translateY(0);
  opacity: 1.0;
}

.scroll_up4 {
  transition: 1.2s ease-out;
  transform: translateX(-50px);
  opacity: 0;
}
.scroll_up4.on {
  transform: translateX(0);
  opacity: 1.0;
}

.scroll_up5 {
  transition: 1.2s ease-out;
  transform: translateX(50px);
  opacity: 0;
}
.scroll_up5.on {
  transform: translateX(0);
  opacity: 1.0;
}

.scroll_up6 {
  transition: 1s ease-out;
  opacity: 0;
}
.scroll_up6.on {
  transform: translateY(0);
  animation: pulseEffect 1.5s linear 1s;
  opacity: 1.0;
  perspective: 1000;
}

@keyframes pulseEffect {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.timing01 {transition-delay: .1s;}
.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}
.timing06 {transition-delay: 1.2s;}
.timing07 {transition-delay: 1.4s;}
.timing08 {transition-delay: 1.6s;}

.wave span{
  transform: translate(0, 100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  perspective: 1000;
  transition-delay: 0s;
}
.wave span.show {
  transform: translate(0, 0);
}

.item_title span:nth-of-type(2) {
  transition-delay: 0.06s;
}
.item_title span:nth-of-type(3) {
  transition-delay: 0.12s;
}
.item_title span:nth-of-type(4) {
  transition-delay: 0.18s;
}
.item_title span:nth-of-type(5) {
  transition-delay: 0.24s;
}
.item_title span:nth-of-type(6) {
  transition-delay: 0.30s;
}
.item_title span:nth-of-type(7) {
  transition-delay: 0.36s;
}
.item_title span:nth-of-type(8) {
  transition-delay: 0.42s;
}
.item_title span:nth-of-type(9) {
  transition-delay: 0.48s;
}
.item_title span:nth-of-type(10) {
  transition-delay: 0.54s;
}
.item_title span:nth-of-type(11) {
  transition-delay: 0.6s;
}
.item_title span:nth-of-type(12) {
  transition-delay: 0.66s;
}
.item_title span:nth-of-type(13) {
  transition-delay: 0.72s;
}
.item_title span:nth-of-type(14) {
  transition-delay: 0.78s;
}
.item_title span:nth-of-type(15) {
  transition-delay: 0.84s;
}
/*--------------スクロールアニメーション---------------*/

/*--------------fvのアニメーション---------------*/

.lp_wrap{
  position:relative;
}
/*.lp_wrap::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  backdrop-filter:blur(8px);
  animation:blur 2s ease-in-out forwards;
}
@keyframes blur{
  0%{backdrop-filter:blur(8px);}
  100%{backdrop-filter:none;}
}*/

/*-----------swiper-------------*/
.swiper {
	width: 46%;
    margin: auto;
}

.swiper-slide-active .swiper-slide__item,
.swiper-slide-duplicate-active .swiper-slide__item,
.swiper-slide-prev .swiper-slide__item {
  animation: zoomanime 7s linear 1s normal both;
  animation-delay: 1.5s;
}

@keyframes zoomanime {
  0% {
  transform: translateX(0px);
  }

  100% {
  transform: translateX(-5%);
  }
}

@media screen and (min-width: 760px){
.swiper {
	width: 70%;
	margin-top: -1%;
}	
}

/*-----------swiper-------------*/

 .box{
  opacity: 0;
}

 .fadeUp {
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(30px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

 .fadeUp2 {
animation-name:fadeUpAnime2;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime2{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* アニメーションスタートの遅延時間を決めるCSS*/

 .delay-time01{
animation-delay: 0s;
}
.delay-time02{
animation-delay: 0.5s;
}
 .delay-time03{
animation-delay: 1s;
}
 .delay-time04{
animation-delay: 1.2s;
}

.title {
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    width: 68%;
    margin: auto;
    position: absolute;
    bottom: 26%;
	left: 50%;
    transform: translateX(-50%);
	margin-bottom:3%;
	z-index: 1;
}

.title span {
  display: block;
  transform: translate(0, 100%);
  margin: 0 1%;
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  perspective: 1000;
  transition-delay: 0s;
}

.title.-visible span {
  transform: translate(0, 0);
/*  transition-delay: 0s;*/
}

.title span:nth-child(2) {
  transition-delay: 0.06s;
}
.title span:nth-child(3) {
  transition-delay: 0.12s;
  margin-right: 2%;
}
.title span:nth-child(4) {
  transition-delay: 0.18s;
}
.title span:nth-child(5) {
  transition-delay: 0.24s;
}
.title span:nth-child(6) {
  transition-delay: 0.30s;
}
.title span:nth-child(7) {
  transition-delay: 0.36s;
}
.title span:nth-child(8) {
  transition-delay: 0.42s;
}
.title span:nth-child(10) {
  transition-delay: 0.48s;
}
.title span:nth-child(11) {
  transition-delay: 0.54s;
  margin-left: 0;
}
.title span:nth-child(12) {
  transition-delay: 0.6s;
}
.title span:nth-child(13) {
  transition-delay: 0.66s;
}
.title span:nth-child(14) {
  transition-delay: 0.72s;
}
.title span:nth-child(15) {
  transition-delay: 0.78s;
}

.fv_logo2 span:nth-child(4) {
  margin-left: -1%;
}

.padding3 {
	padding-top: 3%;
}


/*--------------fvのアニメーション---------------*/

/*-----------グラデーション-------------*/

.bggradient {
    height: 100%;
    width: 100%;
    background: linear-gradient(160deg, #fbded7, #d3e5f2);
    background-size: 200% 200%;
    animation: bggradient 7s ease infinite;
    content: "";
    position: fixed;
    top: 0;
    z-index: -1;
}

@keyframes bggradient{
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

@media screen and (min-width: 760px){
.bggradient {
    width: 500px;
}
}
/*-----------グラデーション-------------*/
/*--------------縮小---------------*/
.sa {
  opacity: 0;
  transition: all 1.8s ease;
  transition-delay: 0s;
}
.sa.show {
  opacity: 1;
  transform: none;
  
}
.sa--scaleDown {
  transform: scale(1.2);
}
.m_img{
  /* 縦横300pxにがっちり固定 */
  width: 100%;
  height: auto;
  /* 固定した幅からはみ出たものは隠してしまう */
  overflow: hidden;
}
/*--------------縮小---------------*/

/*---------------------------------------------
layout
---------------------------------------------*/

/*--------------追従アンカー---------------*/
header {
  	position: fixed;
    top: 55%;
    right: 3%;
    z-index: 99;
    transform: rotate(90deg);
    transform-origin: right;
    display: flex;
    gap: 4%;
    width: 100%;
}
header p {
    font-weight: 400;
    text-align: center;
    font-size: 1.3rem;
    width: 50%;
    border: 1px solid #fff;
    background: #eaf4fb75;
    padding: 5% 2% 2.5%;
    border-radius: 10px;
    color: #f09082;
    line-height: 1.6rem;
    filter: drop-shadow(8px 4px 4px rgba(145, 144, 144, 0.35));
}
header p:nth-of-type(2) {
	color: #77badf;
}

@media screen and (max-width:389px){
header {
	top: 65%;
	right: 2.5%;
}
header p {
    padding: 5% 1% 2.5%;
    font-size: 1.2rem;
}
}

@media screen and (min-width:760px){
header {
    top: 72%;
    right: 1%;
    gap: 2%;
    width: 600px;
}
header p {
    font-size: 1.5rem;
}
}
/*--------------追従アンカー---------------*/

/*--------------ファーストビュー---------------*/

.fv {
     width: 100%; 
    height: 75vh;
    position: relative;
	overflow: hidden;
}

.fv_img {
    height: 75vh;
    position: relative;
    border-radius: 0 0 50% 50%;
    background-color: #fff;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 150%);
}

.fv_txt {
	width: 100%;
	position: absolute;
	bottom: 10%;
	left: 50%;
    transform: translateX(-50%);
}

.fv_logo1 {
    width: 50%;
    margin: 0 auto;
}

.fv_logo3 {
    width: 24%;
    margin: 18% auto 0;
}

.grad_wrap {
    position: relative;
/*    margin-top: -20%;
    padding-top: 5%;*/
}
.pink_wrap {
    background-color: rgba(248, 198, 189, 0.55);
    padding: 1% 1%;
    width: 53%;
    text-align: center;
    border-radius: 20rem;
    margin: -6% auto 0;
	position: relative;
}

.pink_wrap p {
    background-color: #f8c6bd;
    padding: 0 5%;
    border-radius: 20rem;
    color: #fff;
    letter-spacing: 0.15rem;
    font-weight: 550;
    font-size: 1.8rem;
}
.pink_wrap p span {
    font-size: 2.2rem;
    margin: 0 1%;
}

@media screen and (max-width:389px){
.fv {
	height: 90vh;
}
.fv_img {
	height: 90vh;
}

}

@media screen and (min-width:760px){
.fv {
    height: 70vh;
}
.fv_img {
    width: calc(100% + 70%);
	height: 70vh;
}
/*.fv {
    height: 700px;
}
.fv_img {
    height: 700px;
}*/
.fv_txt {
	width: 40%;
}
}

@media screen and (min-width:1200px){
/*.fv {
    height: 85vh;
}
.fv_img {
    height: 85vh;
}*/
.fv {
    height: 680px;
}
.fv_img {
    height: 680px;
}
.fv_txt {
    width: 35%;
	bottom: 7%;
}
}

@media screen and (min-width:1600px){
/*
.fv {
    height: 75vh;
}
.fv_img {
    height: 75vh;
}
*/
.fv {
    height: 750px;
}
.fv_img {
    height: 750px;
}
}

@media screen and (min-width:1920px){

/*.fv {
    height: 90vh;
}
.fv_img {
    height: 90vh;
}*/
.fv {
    height: 850px;
}
.fv_img {
    height: 850px;
}
}
/*--------------ファーストビュー---------------*/

/*--------------ファーストビュー下---------------*/
/*.fv_bottom_fix {
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: -1;
    top: 0;
}*/
.fv_bottom_txt {
    padding-top: 10%;
    padding-bottom: 16%;
    font-size: 1.8rem;
    text-align: center;
}

@media screen and (max-width:389px){
.fv_bottom_txt {
    font-size: 1.7rem;	
}
}
/*-----------アイテムアンカーリンク-------------*/
.item_anchor{
    width: 88%;
    margin: auto;
    flex-wrap: wrap;
    justify-content: space-between;
}

.anchor1, .anchor2, .anchor3{
	/*background-image: url("../img/anchor_bk1_n.png");
	background-repeat: no-repeat;
    background-size: cover;*/
    filter: drop-shadow(8px 8px 2px rgba(145, 144, 144, 0.35));
    background-color: rgba(234, 244, 251, 0.50);
    border: 1px solid #fff;
    border-radius: 8px;
	width: 100%;
}

.anchor1_flex, .anchor2_flex, .anchor3_flex {
    display: flex;
    justify-content: space-between;
    padding: 11% 7% 0;
	flex-wrap: wrap;
}

.anchor1_flex >img {
	width: 35%;
}

.anchor1_flex .a_credit {
    width: 62%;
}

.a_credit >p {
    margin-top: 1%;
}

.a_item_name {
    letter-spacing: -0.03rem;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.2;
}

.a_border {
    border: 1.5px solid #f09082;
    padding: 2% 10% 1%;
    border-radius: 30px;
    text-align: center;
    margin-right: 15%;
    color: #f09082;
    line-height: 1.3;
}

.a_price {
    padding-left: 3%;
    margin-top: 7% !important;
}

.arrow{
     text-align: center; 
}

.dli-chevron-down {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.anchor_icon {
    position: absolute;
    top: -17%;
    left: -4%;
    background-color: rgba(240, 144, 130, 0.5);
    border-radius: 50%;
    padding: 1.5%;
}
.anchor_icon p {
    width: 55px;
    height: 55px;
    line-height: 55px;
    background-color: #f09082;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-size: 1rem;
}

.anchor2,.anchor3 {
    width: 47.5%;
    margin-top: 7%;
}

.anchor2_flex, .anchor3_flex {
	text-align: center;
}

.anchor_img {
	width: 100%;
}

.anchor2_flex img{
    width: 42.5%;
    padding: 2% 0 2% 7%;
}

.anchor3_flex img {
    width: 93%;
    padding: 25% 0 8.5% 5%;
}

.anchor2_flex .a_credit,.anchor3_flex .a_credit {
    width: 100%;
}

.anchor2 .a_border, .anchor3 .a_border{
    border: 1.5px solid #77badf;
    color: #77badf;
    padding: 3% 5% 1%;
    margin: auto;
}

.anchor3 .a_border {
    margin: auto 8%;
}

.anchor2 .anchor_icon, .anchor3 .anchor_icon {
    background-color: rgba(119,186,223,0.5);
	padding: 2.8%;
	top: -5%;
}
.anchor2 .anchor_icon p, .anchor3 .anchor_icon p {
    background-color: #77badf;
}

.anchor2 .a_credit >p, .anchor3 .a_credit >p {
	margin-top: 10%;
}

.anchor3 .anchor_icon p span {
    position: absolute;
    line-height: 1.2;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
}


@media screen and (min-width:760px){
.a_border {
    padding: 2% 10% 1%!important;
}
.anchor2 .a_border, .anchor3 .a_border {
    padding: 2% 5% 1%!important;
}
}

/*-----------アイテムアンカーリンク-------------*/

/*-----------キャンペーン-------------*/

.campaign_wrap {
    background: linear-gradient(#d3e5f21c 5%, #d3e5f238 10%, #d3e5f282 15%, #d3e5f2cc 20%, rgba(180, 214, 240, 1));
    text-align: center;
	padding: 10%;
}

.campaign {
    margin-top: 20%;
}

.campaign_txt1 {
    font-size: 2.3rem;
    padding-left: 2%;
    margin: 5% 0 3%;
}

.campaign h1 {
    font-size: 3.8rem;
    letter-spacing: 0.2rem;
    color: #fff;
    border-bottom: 1px solid #fff;
    width: 83%;
    margin: auto;
    line-height: 1;
    padding-bottom: 2%;
    text-shadow: 0.3px 0.3px #8baec8;
}

.campaign_txt2 {
    color: #fff;
    font-size: 2rem;
    margin-top: 2%;
}

.campaign .text-small {
    margin-top: 3%;
}

@media screen and (max-width:389px){
.campaign h1 {
    font-size: 3.6rem;
}
}
/*-----------キャンペーン-------------*/

/*--------------ファーストビュー下---------------*/


/*-----------------------メイン------------------------*/
.multi_powder {
	background: linear-gradient(rgba(180,214,240,1),#b7d9f1);
	position: relative;
}

.base_make {
	background: linear-gradient(rgba(180,214,240,1),#b7d9f1);
	position: relative;
}

.multi_powder .item_mv img {
	margin-top: 9%;
}

.curve_line {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.base_make .curve_line {
    background: linear-gradient(rgb(198 225 242), #b4d6f0c4);	
}
.curve_line p {
    position: relative;
    border-radius: 0 0 50% 50%;
    border-bottom: 1px solid #fff;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 15%);
    color: #fff;
    text-align: center;
    padding-top: 26%;
    padding-bottom: 2%;
    font-size: 1.8rem;
}
.item_mv {
	position: relative;
	background: -webkit-linear-gradient(rgba(180, 214, 240, 1) 50%, #ebcfc6);
	background: -o-linear-gradient(rgba(180, 214, 240, 1) 50%, #ebcfc6);
	background: linear-gradient(rgba(180, 214, 240, 1) 50%, #ebcfc6);
}

.base_make .item_mv {
	background: -webkit-linear-gradient(rgba(180, 214, 240, 1) 50%, #e7d6d1);
	background: -o-linear-gradient(rgba(180, 214, 240, 1) 50%, #e7d6d1);
	background: linear-gradient(rgba(180, 214, 240, 1) 50%, #e7d6d1);
}

.item_img1 {
	width: 55%;
    margin: 8% auto 0;
}

.item_img2 {
    width: 70%;
    margin: 3% 20% 10% 10%;
}

.item_title {
    display: flex;
    justify-content: center;
    width: 65%;
    margin: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 3%;
	font-weight: 300;
    overflow: hidden;
	text-shadow: 4px 3px #8baec885;
	z-index: 999;
}
.item_title span {
  display: block;
  margin: 0 0.7%;
  font-size: 3.1rem;
  color: #fff;
}

.item_title {
	top: 2%;
}
.item_title:nth-of-type(2) {
    top: 9.5%;
}
.item_catch{
    background: linear-gradient(#ebcfc6, #e7d1cb, #e7d1cb52 95%, #e7d1cb0a 99%);
    background: -webkit-linear-gradient(#ebcfc6, #e7d1cb, #e7d1cb52 95%, #e7d1cb0a 99%);
    text-align: center;
    padding-bottom: 25%;
    position: relative;
    /* z-index: 2; */
    margin-top: -100vh;
}
.base_make  .item_catch{
    background: linear-gradient(#e7d6d1 5%, #e7d1cb 10%, #e7d1cb52 95%, #e7d1cb0a 99%);
    background: -webkit-linear-gradient(#e7d6d1 5%, #e7d1cb 10%, #e7d1cb52 95%, #e7d1cb0a 99%);
	padding-bottom: 15%;
}
.item_catch h1 {
    color: #fff;
    font-size: 2.6rem;
    letter-spacing: -1.5px;
    line-height: 1.4;
    text-shadow: 4px 4px 2px #a8867d69;
}
.item_catch p{
    color: #fff;
    font-size: 1.7rem;
    line-height: 1.7;
    margin-top: 2%;
}

.spf  {
    position: absolute;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    right: 14%;
    top: 21%;
    font-size: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #77badf;
    border: 1.5px solid #77badf;
    line-height: 1;
}
.spf span:first-child {
    margin-bottom: 1%;
}
.spf span {
    font-size: 1.25rem;
    letter-spacing: .02rem;
    margin-bottom: 3%;
}
.item_ex_wrap {
    /*background: linear-gradient(to bottom,#e7d1cb 20%, #f2e0dc 40%, #dce1e8 60%, #c6e1f2 80%);
    background: -webkit-linear-gradient(#e7d1cb 40%, #f2e0dc 60%, #dce1e8 80%, #c6e1f2 100%);
    background-attachment: fixed;*/
	background-color: transparent;
	position: relative;
}
.item_ex_wrap::before {
    content: '';
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(#e7d1cb 20%, #f2e0dc 40%, #dce1e8 60%, #c6e1f2 80%);
    background-image: -webkit-linear-gradient(#e7d1cb 20%, #f2e0dc 40%, #dce1e8 60%, #c6e1f2 80%);
    /* z-index: -1; */
}
.model_img_wrap {
    margin: 0 8%;
    position: relative;
}

.model_img {
    filter: drop-shadow(8px 8px 3px rgba(145, 144, 144, 0.55));
    background-color: #eaf4fbad;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 3.5%;
}

.tap {
    width: 80px;
    height: 80px;
    line-height: 80px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 300;
    position: absolute;
    top: -19%;
    left: -5%;
    z-index: 3;
}

.tap_btn:hover {
	cursor: pointer;
}

.tap_btn li{
    position: absolute;
    width: 9%;
	list-style-type:none;
}

.tap_btn li:nth-of-type(1) {
    top: 9%;
    left: 20%;
}
.tap_btn li:nth-of-type(2) {
    top: 34%;
    left: 18%;
}
.tap_btn li:nth-of-type(3) {
    bottom: 25%;
    right: 27%;
    top: auto;
    left: auto;
}

.multi_use {
    position: absolute;
    bottom: 6%;
    left: 10%;
    color: #fff;
    font-size: 2.3rem;
}

.multi_use {
    position: absolute;
    bottom: 5%;
    left: 10%;
    color: #fff;
    font-size: 2.2rem;
}

.slider_01 li{
	position: relative;
}

.parts {
    position: absolute;
    bottom: 3%;
    right: 6%;
    color: #fff;
    font-size: 3.5rem;
    z-index: 5;
    letter-spacing: 0.15rem;
    text-shadow: 1px 1px 4px #4c2a204a;
}

@media screen and (max-width:389px){
.item_catch h1 {
    font-size: 2.4rem;
}
}

@media screen and (min-width:760px){
.item_ex_wrap::before {
	display: none;
}
.item_ex_wrap {
	background-image: -webkit-linear-gradient(#e7d1cb 20%, #f2e0dc 40%, #dce1e8 70%, #c6e1f2 80%);
    background-attachment: fixed;
}
.item_catch {
	margin-top: 0;
}

.tap {
	top: -17%;
}

}

/*---------モーダルウィンドウ----------*/
.modal-window {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(224, 224, 224, 0.85);
    z-index: 99;
}

 .modal-wrap {
    overflow: hidden;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

 .modal-window-open {
  height: 100vh;
  overflow-y: hidden;
}

 .popup_slide_wrap {
  position: relative;
  margin-top: 10%;
}

 .close_position {
    position: absolute;
    top: 13%;
    z-index: 5;
    right: 4%;
}

 .slide_close {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    background: currentColor;
    border-radius: 0.1em;
    position: relative;
    transform: rotate(45deg);
    line-height: 1;
    width: 2.5em;
    height: 0.15em;
}

 .slide_close::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
}

 .popup_slide_close p {
    font-size: 1.2rem;
	color: #fff;
}

 .slide_close:hover {
  opacity: 0.6;
  cursor: pointer;
}

.slider_01{
  padding: 0% 0% 0% 0%;
  position: relative;
}

.slider_01 .slick-prev, .slick-next {
	display: none!important;
}

.slider_01 .slick-dots {
	bottom: auto!important;
}

.slider_01 .slick-dots li {
    width: 10px !important;
    height: 10px !important;
    margin: 0 5px !important;
     background: #ffffffad; 
    border-radius: 50%;
    cursor: pointer !important;
}

.slider_01 .slick-dots li:hover,
.slider_01 .slick-dots li.slick-active {
    background: #fff;
}

.slider_01 .slick-dots li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.slider_01 .slick-dots li button:before {
    display: none;
}

.slider_01 .slick-dots li.slick-active button:before {
	display: none;
}

@media screen and (min-width:760px){
.modal-window {
    top: 0%;
    width: 500px;
}

 .modal-wrap {
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 500px;
}

}
/*---------モーダルウィンドウ----------*/

/*---------カラバリ----------*/
.color_variations, .primer, .veil {
    text-align: center;
    margin-top: 12%;
	position: relative;
}
.veil {
	margin-top: 7%;
}
.standard_color {
	margin-top: 5%;
}
.item_h1 {
    font-size: 2.6rem;
    color: #fff;
    letter-spacing: 0.25rem;
    line-height: 1.4;
}

.color_number {
    background-color: #f8c6bd;
    color: #fff;
    padding: 0.5% 3% 0;
    border-radius: 20px;
    width: 14%;
    margin: auto;
    font-size: 1.8rem;
    line-height: 1.4;
}

.slider_02 {
    padding: 0;
    width: 80%;
    margin: auto;
}

.slider_02 li img {
	width: 90%;
	margin: auto;
}

.slider_02 .slick-dots {
	top: 56%;
}

.slider_02 .slick-dots li {
    width: 14%;
    height: 25%;
    margin: 0 3px;
}

/*.slider_02 .slick-dots li button {
    width: 37px;
    height: 37px;	
}*/

.slider_02 .slick-dots li button:before {
	color: transparent !important;
	opacity: 0.3;
	width: 100%;
	height: 100%;
  	/*background-size: contain!important;*/
}

.slider_02 .slick-dots li.slick-active button:before {
	opacity: 1;
    filter: drop-shadow(4px 4px 2.5px rgba(145, 144, 144, 0.45));
}

.slider_02 li p {
	text-align: left;
	margin-top: 20%;
}

.color_name {
    font-weight: 600;
}

.limited_color .slick-dots li:nth-of-type(1) button:before{
  background: url("../img/sugar_apricot.png") no-repeat;
  background-size: 87%;
}
.limited_color .slick-dots li:nth-of-type(2) button:before{
  background: url("../img/lapin_pink.png") no-repeat;
  background-size: 87%;
}

.standard_color .slick-dots li:nth-of-type(1) button:before{
  background: url("../img/taupe_pink.png") no-repeat;
  background-size: 87%;
}
.standard_color .slick-dots li:nth-of-type(2) button:before{
  background: url("../img/lino_beige.png") no-repeat;
  background-size: 87%;
}
.standard_color .slick-dots li:nth-of-type(3) button:before{
  background: url("../img/mauve_beige.png") no-repeat;
  background-size: 87%;
}
.standard_color .slick-dots li:nth-of-type(4) button:before{
  background: url("../img/pale_camel.png") no-repeat;
  background-size: 87%;
}
.standard_color .slick-dots li:nth-of-type(5) button:before{
  background: url("../img/sepia_brown.png") no-repeat;
  background-size: 87%;
}
.standard_color .slick-dots li:nth-of-type(6) button:before{
  background: url("../img/french_mauve.png") no-repeat;
  background-size: 87%;
}

.limited_color {
	position: relative;
}

.limited_color::after {
    content: '';
    width: 80%;
    height: 1px;
    display: inline-block;
    background-color: #fff;
}

@media screen and (max-width:389px){
.slider_02 .slick-dots {
    top: 52%;
}
}
/*---------カラバリ----------*/


/*---------クレジット----------*/

@keyframes anime{
0%{transform:scale(.95); opacity:1}
90%{opacity:.1}to{transform:scale(1.2,1.5); opacity:0}
}

.item_btn  {
    position: relative;
    width: 95%;
    margin: 10% auto 0;
    /* transition: 6s; */
    z-index: 5;
}
.item_btn:before, .item_btn:after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50px;
    background: #ffffff7a;
    border: 1px solid #fff;
    transform: translate3d(0, 0, 0);
}
.item_btn:before {
  animation: anime 4s ease-out 1s infinite;
}
.item_btn:after {
 animation: anime 4s ease-out 2s infinite;
}
.item_btn a {
    display: block;
    padding: 5% 0;
    border-radius: 50px;
    /* color: #fff; */
    text-align: center;
    text-decoration: none;
    background: #fff;
    z-index: 1;
    position: relative;
    -webkit-text-stroke: 0.5px #727171;
	font-size: 1.8rem;
    filter: drop-shadow(8px 8px 3px rgba(125, 125, 125, 0.20));
}
.item_btn span {
  display: block;
  position: relative;
}
.item_btn span:after {
    content: "";
    position: absolute;
    top: 40%;
    right: 15%;
    width: 12px;
    height: 12px;
    margin: -4px 0 0 0;
    border-right: 2px solid #727171;
    border-top: 2px solid #727171;
    transform: translateX(5px) rotate(45deg);
}

.item_bottom {
    content: "";
    position: relative;
    border-radius: 0 0 50% 50%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 35%);
    /* background: linear-gradient(#c2e1f412 5%, #c2e1f43d 10%, #c2e1f482 15%, #c2e1f4b3 20%, rgb(194 225 244)); */
    padding-bottom: 47%;
    z-index: 0;
    margin-top: -20%;
    background: #c6e1f2;
}

.item_credit {
    position: relative;
    border-top: 1px solid #f09082;
    padding: 8% 8% 14%;
    margin-top: 20%;
}

.base_make .item_credit {
    margin-top: 7%;
    border-top: 1px solid #77badf;
}
.item_credit h1 {
	font-size: 2rem;
	font-weight: 500;
    -webkit-text-stroke: 0.5px #727171;
}
.item_credit p:nth-of-type(1) {
    width: 98%;
    margin: auto;
}
.item_credit p:nth-of-type(2) {
    font-size: 1.8rem;
    text-align: right;
    margin-right: 5%;
}
.credit_icon {
    padding: 0.5% 3%;
    background: #f09082;
    position: absolute;
    top: -6%;
    left: 9%;
    color: #fff;
}
.base_make .credit_icon {
    background: #77badf;	
    top: -4%;
}

@media screen and (min-width:760px){
.multi_powder .item_credit {
    background-image: linear-gradient(#dce1e81f, #dce1e8, #c6e1f2);
    background-image: -webkit-linear-gradient(#dce1e81f, #dce1e8, #c6e1f2);
}
.item_bottom {
    background: linear-gradient(#c2e1f412 0%, #c2e1f43d 10%, #c2e1f461 20%, #c2e1f478 30%, rgb(194 225 244) 50%);
    padding-bottom: 57%;
    margin-top: -30%;
}
}

/*---------クレジット----------*/
/*-----------------------メイン------------------------*/


/*-----------------------LOOK------------------------*/
.look >img {
	width: 60%;
	margin: 20% 20% 0;
}
/*** タブ切り替え全体 ***/
.kirikae-tab {
    margin: 5% auto 10%;
    width: 92%;
    position: relative;
}

.tab-list-wrap{
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-end;
}

.tab-list-wrap li {
    width: 50%;
}

/*** タブ部分のデザイン ***/
.tab-style {
    width: 92%;
    height: 44px;
    font-size: 1.5rem;
    text-align: center;
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 10px 10px 0 0;
    display: block;
    /*background: #cce4f3;*/
    margin: auto;
    line-height: 1.2;
    padding-top: 4%;
}
.tab-style span {
	font-size: 2rem;
}
/*** ラジオボタンを消す ***/
input[name="tab-style"] {
  display: none;
  }

/*** 内容部分のデザイン ***/
/*.tab-content {
    display: none;
    padding: 5%;
    background: linear-gradient(#eaf4fb 5%, #eaf4fb40);
    overflow: hidden;
    border-radius: 0 10px 10px 10px;
    position: relative;
    border: 1px solid #fff;
}*/
.tab-content {
    display: none;
    padding: 5%;
    /* background: linear-gradient(#eaf4fb 5%, #eaf4fb40); */
    overflow: hidden;
    border-radius: 0 10px 10px 10px;
    position: relative;
    /* border: 1px solid #fff; */
}

/*.tab-content:nth-of-type(2) {
    border-radius: 10px 0 10px 10px ;	
}*/

/*** 選択タブの内容のみ表示する ***/
#all:checked ~ #all-content,
#tab2:checked ~ #tab2-content
/*タブを増やす場合ここに足す*/ {
  display: block;
  }

/*** 選択タブのデザイン ***/
#all:checked ~ .tab-list-wrap #tab-list1,
#tab2:checked ~ .tab-list-wrap #tab-list2 {
    /*background-color: #eaf4fb !important;
    border: 1px solid #fff;*/
    width: 99%;
    height: 48px;
    color: #8dbddf;
}

/*#all:checked ~ .tab-list-wrap #tab-list1::before ,
#tab2:checked ~ .tab-list-wrap #tab-list2::before {
    content: "";
    width: 49.5%;
    height: 3px;
    background: #eaf4fb;
    display: inline-block;
    position: absolute;
    top: 12%;
    left: 0;
    z-index: 999;
}*/

/*#all:checked ~ .tab-list-wrap #tab-list1::before {
    content: "";
    background-image: url(../img/look_bg1.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: -1;
    background-position: center;
    background-size: contain;
    display: inline-block;
    background-color: transparent;
    background-repeat: no-repeat;
}*/
#all:checked ~ .tab-list-wrap #tab-list1::before,
#tab2:checked ~ .tab-list-wrap #tab-list2::before {
    content: "";
    background-image: url(../img/look_bg1.png?3);
    width: 103%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-position: center;
    background-size: contain;
    display: inline-block;
    background-color: transparent;
    background-repeat: no-repeat;
}

#tab2:checked ~ .tab-list-wrap #tab-list2::before {
    background-image: url(../img/look_bg2.png?5);	
}


.tab-content h1{
    text-align: center;
    font-size: 1.7rem;
    margin-bottom: 4%;
    line-height: 1.6;
}

.tab-content h1 span{
    font-size: 2.3rem;
    color: #eeb0a4;
}

.item_list {
    justify-content: flex-start;
    padding: 5% 2%;
    border-top: 1px solid #f8c6bd;
    flex-wrap: wrap;
    margin-top: -4%;
}
.item_list:first-of-type {
    margin-top: -4%;
    padding-top: 8%;
}

.item_list li {
    width: 31.3%;
    padding: 0 1%;
	text-align: center;
}
.item_list li img{
	width: 90%;
}

.item3 {
	width: 116%!important;
}

.item_list li p{
    font-size: 1.1rem;
    letter-spacing: 0.01rem;
    text-align: center;
    line-height: 1.5;
    -webkit-text-stroke: 0.1px #727171;
}

.item_list .text_small{
	letter-spacing: 0;
}

.tab_content_description >p {
    width: 20%;
    text-align: center;
    margin-top: 5%;
}

.look .text-small {
	margin-bottom: 10%;
}

@media screen and (max-width:389px){
.tab-content {
    padding: 5% 3%;
}
.item_list {
    padding: 1% 2% 2%;
}
.look .text-small {
    letter-spacing: 0;
    font-size: 9px;
}
}


@media screen and (min-width:760px){
.tab-list-wrap li:nth-of-type(2) {
    padding-right: 2%;
}
.tab-content h1 {
	margin-top: 3%;
}
}

/*-----------------------LOOK------------------------*/

/*-----------------------発売日------------------------*/
.release {
    background: #facbc3;
    padding: 5% 10% 15%;
}
.release h1{
    color: #fff;
    text-align: center;
    font-size: 3rem;
}
.release h2{
    color: #f4bdb3;
    background: #ffffffc7;
    border-radius: 50px;
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.8;
}
.release ul {
	margin: 5% auto;
	padding: 0;
}
.release ul p {
    margin: 5%;
    font-size: 1.8rem;
    line-height: 1.5;
}
.release ul p span{
   font-size: 1.6rem;
}

@media screen and (max-width:389px){
.release h2 {
    font-size: 2rem;
}
.release ul p {
    font-size: 1.7rem;
}
.release ul p span {
    font-size: 1.5rem;
}
}
/*-----------------------発売日------------------------*/

/* ETVOS HEADER */
/* line 591, ../sass/css_18lp.scss */
#logo {
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
	    z-index: 5;
    position: relative;
}

/* line 599, ../sass/css_18lp.scss */
#logo img {
    width: 120px;
    margin-top: 8px;
}

/* line 603, ../sass/css_18lp.scss */
#logo a {
display: block;
    width: 100%;
    text-align: center;
    line-height: 1;
}

@media screen and (max-width: 450px) {
  /* line 610, ../sass/css_18lp.scss */
  #logo img {
      width: 100px;
    padding-top: 0;
    margin-top: 0;
  }
}
/*////////////////*/
/* ETVOS FOOTER */
/* line 619, ../sass/css_18aw_lp.scss */
footer {
  padding-top: 40px !important;
  text-align: center !important;
background-color: #dcd6d8;!important;
   
}

/* line 625, ../sass/css_18aw_lp.scss */
footer a {
  color: #000!important;
}

/* line 629, ../sass/css_18aw_lp.scss */
footer a:link {
  color: #000!important;
}

/* line 633, ../sass/css_18aw_lp.scss */
footer a:visited {
  color: #000!important;
}

/* line 637, ../sass/css_18aw_lp.scss */
footer a:hover {
  color: #000!important;
}

/* line 641, ../sass/css_18aw_lp.scss */
footer a:active {
  color: #000!important;
}

/* line 645, ../sass/css_18aw_lp.scss */
footer .sns_area {
  width: auto;
  overflow: hidden;
  margin: 0 auto 20px auto;
  text-align: center;
}

/* line 652, ../sass/css_18aw_lp.scss */
footer .sns_area .twitter-btn {
  display: inline-block;
  width: 100px;
}

/* line 657, ../sass/css_18aw_lp.scss */
footer .sns_area .fb-share-button {
  display: inline-block;
  width: 100px;
}

footer .sns_area .line-share-button{
  display: inline-block;
  width: 100px;
}


/* line 662, ../sass/css_18aw_lp.scss */
footer .f_list {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.3rem;
    padding: 0;
}

/* line 669, ../sass/css_18aw_lp.scss */
footer .f_list li {
  display: -moz-inline-box;
  display: inline-block;
  padding-right: 10px;
}

@media screen and (max-width: 450px) {
  /* line 676, ../sass/css_18aw_lp.scss */
  footer .sns_area {
    width: auto;
    overflow: hidden;
    margin: 0 auto 20px auto;
    text-align: center;
  }

  /* line 684, ../sass/css_18aw_lp.scss */
  footer .sns_area .line-share-button {
    display: inline-block;
    width: 82px;
  }

  /* line 688, ../sass/css_18aw_lp.scss */
  footer .f_list {
    font-size: 1.2rem !important;
  }

  /* line 693, ../sass/css_18aw_lp.scss */
  #copyright {
    font-size: 0.5rem !important;
  }
}
/*////////////////*/