@charset "utf-8";
/*-------------------
   common
-------------------*/
#container{
	overflow: hidden;
}
.wrapper {
	color: #353535;
	font: 1em/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt";
	letter-spacing: normal;
	position: relative;
}
.wrapper * {
	box-sizing: border-box;
}
.wrapper img {
	display: block;
	width: 100%;
}
.wrapper p{
    margin: 0;
}

/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
 
/* ボタンデザイン自由に変えてください  */
/*-- 画面外にいる状態 --*/
.fadein {
	opacity : 0;
	transform : translate(0, 30px);
	transition: ease-in 400ms;
}
/*-- 画面内に入った状態 --*/
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#container section {
	margin: 0 auto;
	padding: 0;
}
/*---------------------------------
   共通
---------------------------------*/
/*---------------------------------
   mainvisual
---------------------------------*/

/*---------------------------------
   section1-4 Serum & Oil
---------------------------------*/
.wrapper .buy-button-wrap {
	position: relative;
	filter: drop-shadow(1px 3px 0px #d8d0cb);
}
.wrapper .Serum .buy-button-wrap {
    filter: drop-shadow(1px 3px 0px #ced2d5);
}
.wrapper .Oil .buy-button-wrap {
    filter: drop-shadow(1px 3px 0px #ddcbc8);
}
.wrapper .btn-wrap {
	padding: 5%;
 }
.wrapper .Serum .btn-wrap,
.wrapper .Oil .btn-wrap {
	padding: 0 5% 5%;
}
.wrapper .btn-wrap.single {
    padding: 0% 15% 6%;
}
.wrapper .bg-beige {
   background-color: #ede8e6;
}
.wrapper .bg-blue {
	background-color: #e2e8ed;
}
.wrapper .bg-pink {
	background-color: #f2e0de;
}
.wrapper .type-box {
    display: flex;
    gap: 2.5vw;
    flex-wrap: wrap;
	justify-content: center;
}
.wrapper .btn-small .type-box {
    flex-wrap: nowrap;
    gap: 3vw;
}
.wrapper .release-date {
	color: #FFF;
	visibility: hidden;
	font-weight: 600;
	position: absolute;
}
.wrapper .buy-button-txt {
    display: flex;
    gap: 10px;
	justify-content: center;
    flex-wrap: wrap;
	padding: 5% 0;
}
.wrapper .buy-button-txt a {
	border-bottom: 1px solid;
	font-size: 5vw;
	line-height: 1.3;
	font-family: "游ゴシック体", 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-feature-settings: 'palt';
}
.wrapper .buy-button-txt a strong {
	font-weight: bold;
}
.wrapper .buy-button-txt .serum {
    color: #7a8b98;
}
.wrapper .buy-button-txt .oil {
	color: #cb8c85;
}

/*-------- 発売前(close)の設定 ここから-------*/
.wrapper .close .buy-button-wrap  {
    background-color: #333;
	border-radius: 100px;
}
.wrapper .close .buy-button {
    pointer-events: none;
    cursor: default;
    opacity: 0.4;
}
.wrapper .close .release-date {
    visibility: visible;
    color: #FFF;
    position: absolute;
    top: 37%;
    left: 30%;
    font-size: 5vw;
    white-space: nowrap;
}
.wrapper .btn-small.close .release-date {
    top: 28%;
    left: 14%;
    font-size: 4vw;
}
.wrapper .single.close .release-date {
    top: 29%;
    left: 23%;
}
.wrapper .close .buy-button-txt .serum,
.wrapper .close .buy-button-txt .oil {
    color: #666;
	pointer-events: none;
}
/*-------- 発売前(close)の設定　ここまで -------*/



 @media screen and (min-width:480px) and ( max-width:960px) {
/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
.wrapper .buy-button-txt {
    gap: 16px;
}
.wrapper .buy-button-txt a {
    font-size: 4vw;
}
/*-------- 発売前(close)の設定 ここから-------*/
.wrapper .btn-small.close .release-date {
    top: 33%;
    left: 16%;
    font-size: 3.5vw;
}
/*-------- 発売前(close)の設定 ここまで-------*/
}


 @media screen and (min-width:960px) {
/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
/*---------------------------------
   PC 共通
---------------------------------*/
.wrapper .inner-wrap {
	width: 750px;
	margin: 0 auto;
}
/*---------------------------------
   PC section1-4 Serum & Oil
---------------------------------*/
.wrapper .buy-button-wrap {
	position: relative;
	filter: drop-shadow(2px 4px 0px #d8d0cb);
}
.wrapper .btn-small .type-box {
    flex-wrap: nowrap;
    gap: 35px;
}
.wrapper .Serum .buy-button-wrap {
    filter: drop-shadow(2px 4px 0px #ced2d5);
}
.wrapper .Oil .buy-button-wrap {
    filter: drop-shadow(2px 4px 0px #ddcbc8);
}
.wrapper .buy-button-txt a {
	font-size: 2.2em;
}
.wrapper .type-box {
    gap: 20px;
}
.wrapper .buy-button-txt {
    gap: 20px;
}

/*-------- 発売前(close)の設定 ここから-------*/
.wrapper .close .release-date {
    top: 36%;
    left: 28%;
    font-size: 2.8em;
}
.wrapper .btn-small.close .release-date {
    top: 32%;
    left: 15%;
    font-size: 2em;
}
.wrapper .single.close .release-date {
    top: 30%;
    left: 24%;
    font-size: 2.5em;
}
/*-------- 発売前(close)の設定 ここまで-------*/
}