@charset "UTF-8";
/* CSS Document */

@font-face{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 500;
}
html{
font-size:62.5%;/*16px62.5%=10px*/
}
body{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight: 500;
}
.pc {
display: block;
}
.sp{
display: none;
}
/*********************
*********************
*****ヘッター*****
*********************
*********************/
.header-inner{
max-width: 100%;
margin: 0 auto;
margin-bottom: 5vw;
}
.companyrogo{
margin: 0 auto;
display: block;
width: 15vw;
padding-top: 5vw;
padding-bottom: 5vw;
}

/********************
*********************
******navigtion******
*********************
*********************/
.nav-list{
width: 80vw;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.nav-item{
padding-right: 3vw;;
padding-bottom: 20px;
}
.nav-item:last-of-type{
padding-right: 0px;
}
.nav-item>a{
font-size: 1vw;
color:#000;
}
/*********************
*********************
****ヒーロイメージ*****
*********************
*********************/
.slider_ph_01 {
width: 100vw;
height: auto;
max-width: 100%;
margin-bottom: 10vw;
}
/********************
*********************
フローティングバナー****
*********************
*********************/
.floating-banner_01{
width:8%;
position: fixed;/* 追従 */
z-index: 99999;/* 他の要素の下に隠れないように */
right:1vw;
bottom: 1vw;/* バナーの上下の位置 */
}
.floating-banner_02{
width:13%;
position: fixed;/* 追従 */
z-index: 99999;/* 他の要素の下に隠れないように */
left:1vw;
bottom: 1vw;/* バナーの上下の位置 */
}
.floating-banner_03{
width:8%;
position: fixed;/* 追従 */
z-index: 99999;/* 他の要素の下に隠れないように */
right:1.5vw;
bottom: 8vw;/* バナーの上下の位置 */
}
.ph_01{
width:100%;
opacity: 0.9;
color: #FFFFFF;
}
.ph_02{
width:100%;
opacity: 0.9;
color: #FFFFFF;
}
.ph_03{
width:100%;
opacity: 0.9;
color: #FFFFFF;
}
.floating-banner:hover{
opacity: 0.9;
color: #FFFFFF;
}

/********************
*********************
*******header********
*********************
*********************/
.header_ul{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10vw;
}
.header_li{
margin: 0 auto;
text-align: center;
width: 50%;
}
.header_img_pc{
display: block;
width: 100%;
}
.header_img_sp{
display: none;
width: 100%;
}
.header_img_oil{
margin: 0 auto;
text-align: center;
display: block;
width: 70%;
margin-top: 5vw;
}

/********************
*********************
*******section********
*********************
*********************/
.section{
width: 100%;
margin: 0 auto;
margin-bottom: 10vw;
}
h1{
width: 100%;
margin: 0 auto;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 2vw;
text-align: center;
color: #000000;
letter-spacing: 0.1em;	
margin-bottom: 4vw;
line-height: 3vw;
}
.section_text{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.5vw;
text-align: center;
color: #000000;
font-feature-settings: "palt";
line-height: 1.5em;
margin-bottom: 3vw;
}
.cap{
font-size: 1vw;
padding-top: 35px;
}
.prd_bun{
width: 40%;
margin: 0 auto;
text-align: center;
}
.img_01{
display: block;
margin: 0 auto;
width: 100%;
padding-bottom: 1vw;
}

/********************
*********************
*******購入ボタン*****
*********************
*********************/

.buy_btn{
margin: 0 auto;
margin-top: 0vw;
margin-bottom: 2vw;
width: 100%;
text-align: center;
color: #fff;
padding-top: 2.5vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 2vw;
background-color: #000;
padding-bottom: 2.5vw;
border-radius: 100vh;
}

.use_btn{
margin: 0 auto;
margin-top: 0vw;
margin-bottom: 10vw;
width: 100%;
text-align: center;
color: #000;
padding-top: 2.5vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 2vw;
background-color:#CBCBCB;
padding-bottom: 2.5vw;
border-radius: 100vh;
}

/********************
*********************
********成分表********
*********************
*********************/
.stai{
display: block;
margin: 0 auto;
text-align: center;
width: 58vw;
margin-bottom: 10vw;
}
.box_02{
width: 60%;
margin: 0 auto;
text-align: center;
padding-bottom: 5vw;
}
h2{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 2vw;
color: #000;
letter-spacing: 0.1vw;	
padding-bottom: 3vw;
text-align: center;
}
h3{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 1.7vw;
color: #000;
letter-spacing: 0.1vw;	
padding-bottom: 4vw;
text-align: center;
}
.component_ul{
width: 100%;
margin-bottom: 5vw;
}
.component_ul::after{
content:"";
display: block;
width:30%;
}
.ex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ex_text{
width: 77%;
font-size: 1.2vw;
line-height:1.3em;
color: #000;
text-align: justify;
}
.component_li{
position: relative;
width: 15%;
background-color:#000;
margin-bottom: 1vw;
margin-right: 5%;
}
.component_li::before {
content: "";
display: block;
padding-bottom: 100%;
}
.component_li_osusume{
position: relative;
width:100%;
height:83vw;
border: solid 1px #ec6d67;
border-radius: 3vw;
margin-bottom: 3vw;
margin-top: 5vw;
}
.component_li_osusumetitle{
text-align: center;	
color: #ec6d67;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.8vw;
padding-top: 5VW;
}
.component_li_osusumetext{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #ec6d67;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.3vw;
padding-top: 4vw;
line-height: 1.7em;
}
.component_li_text{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.3vw;
line-height:2vw;
color: #fff;
font-feature-settings: "palt";
}
h4{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.2vw;
line-height:1.4em;
text-align: justify;
color: #000;
font-feature-settings: "palt";
margin-bottom: 5VW;
}
h5{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1vw;
line-height:1.4em;
text-align: justify;
color: #000;
font-feature-settings: "palt";
margin-bottom: 5VW;
}
/*******************
********************
******footer******
********************
********************/

.footerbottom{
width:100%;
background-color: #000;
text-align: center;
}
.img23{
width: 13vw;
padding-top: 10vw;
}
.address p{
padding-top: 3vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1vw;
color: #fff;
line-height:1.5vw;
}
.address.sub{
padding-top: 3vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1vw;
color: #fff;
line-height:1.5vw;
}
.img24{
padding-top: 5vw;
width: 3vw;
}
.img25{
width: 3vw;
}
.copyright{
padding-top: 5vw;
padding-bottom: 2vw;
width: 100%;
text-align: center;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size:0.8vw;
color: #fff;
}














/*pc版  幅が641px以上のscreenの時はこのcssを使用してくださいという指示*/

@media screen and (max-width : 767px ){
html{
font-size: 0.625vw;
}
body {
overflow-x: hidden!important;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
img{
max-width: 100%;
}
.pc {
display: none;
}
.sp{
display: block;
}
	
/*********************
*********************
*****ヘッター*****
*********************
*********************/
.header-inner{
max-width: 100%;
margin: 0 auto;
margin-bottom: 5vw;
}
.companyrogo{
margin: 0 auto;
display: block;
width: 30vw;
padding-top: 10vw;
padding-bottom: 10vw;
}
/********************
*********************
******navigtion******
*********************
*********************/
.menu-btn {
position: fixed;
top: 10px;
left: 10px;
display: flex;
height:40px;
width: 40px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #000;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 1px;
width: 23px;
background-color: #ffffff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;/*leftの値を変更してメニューを画面外へ*/
z-index: 80;
background-color:rgba(255,255,255,0.9);
transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
left: 0;/*メニューを画面内へ*/
}
/********************
*********************
******navigtion******
*********************
*********************/
.nav-list{
padding-top: 25vw;
width: 95vw;
margin: 0 auto;
display: block;
}
.nav-item{
text-align: center;
padding-right: 0vw;
padding-bottom: 30px;
}
.nav-item:last-of-type{
padding-right: 0px;
}
.nav-item>a{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 4vw;
color:#4f4b4a;
}
.hover:hover {
opacity: 0.4;
color: #4f4b4a;
}
	
/*********************
*********************
****ヒーロイメージ*****
*********************
*********************/
.slider_ph_01 {
width: 100%;
height: auto;
max-width: 100%;
margin-bottom: 10vw;
}
	
/********************
*********************
フローティングバナー****
*********************
*********************/
.floating-banner_01{
width:20%;
position: fixed;/* 追従 */
z-index: 99999;/* 他の要素の下に隠れないように */
right:1vw;
bottom: 1vw;/* バナーの上下の位置 */
}
.floating-banner_02{
width:30%;
position: fixed;/* 追従 */
z-index: 99999;/* 他の要素の下に隠れないように */
left:1vw;
bottom: 1vw;/* バナーの上下の位置 */
}
.floating-banner_03{
width:8%;
position: fixed;/* 追従 */
z-index: 99999;/* 他の要素の下に隠れないように */
right:1.5vw;
bottom: 8vw;/* バナーの上下の位置 */
}
.ph_01{
width:100%;
opacity: 0.9;
color: #FFFFFF;
}
.ph_02{
width:100%;
opacity: 0.9;
color: #FFFFFF;
}
.ph_03{
width:100%;
opacity: 0.9;
color: #FFFFFF;
}
.floating-banner:hover{
opacity: 0.9;
color: #FFFFFF;
}

/********************
*********************
*******購入ボタン*****
*********************
*********************/

.buy_btn{
margin: 0 auto;
margin-top: 0vw;
margin-bottom: 2vw;
width: 100%;
text-align: center;
color: #fff;
padding-top:5vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 4vw;
background-color: #000;
padding-bottom:5vw;
border-radius: 100vh;
}

/********************
*********************
*******section********
*********************
*********************/
.section{
width: 90%;
margin: 0 auto;
margin-bottom: 20vw;
}
h1{
width: 100%;
margin: 0 auto;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 3.6vw;
text-align: center;
color: #000000;
letter-spacing: 0.1em;	
margin-bottom: 4vw;
line-height: 5vw;
}
h3{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 3.6vw;
color: #000;
letter-spacing: 0.1vw;	
padding-bottom: 4vw;
text-align: center;
line-height: 5vw;
}

.section_text{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3.3vw;
text-align: center;
color: #000000;
font-feature-settings: "palt";
line-height: 1.5em;
margin-bottom: 0vw;
}
.cap{
font-size: 1vw;
padding-top: 35px;
}
.prd_bun{
width: 100%;
margin: 0 auto;
text-align: center;
}
.img_01{
display: block;
margin: 0 auto;
width: 100%;
padding-bottom: 0vw;
}

/********************
*********************
********成分表********
*********************
*********************/
.stai{
display: block;
margin: 0 auto;
text-align: center;
width:88vw;
margin-bottom: 10vw;
}
.box_02{
width: 90%;
margin: 0 auto;
text-align: center;
padding-bottom: 5vw;
}
h2{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:bold;
font-size: 4vw;
color: #000;
letter-spacing: 0.1vw;	
padding-bottom: 5vw;
text-align: center;
}
.component_ul{
width: 100%;
margin-bottom: 5vw;
}
.component_ul::after{
content:"";
display: block;
width:30%;
}
.ex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ex_text{
width: 77%;
font-size: 3vw;
line-height:1.3em;
color: #000;
text-align: justify;
font-feature-settings: "palt";
}
.component_li{
position: relative;
width: 23%;
background-color:#000;
margin-bottom: 1vw;
margin-right: 5%;
}
.component_li::before {
content: "";
display: block;
padding-bottom: 100%;
}
.component_li_osusume{
position: relative;
width:100%;
height:83vw;
border: solid 1px #ec6d67;
border-radius: 3vw;
margin-bottom: 3vw;
margin-top: 5vw;
}
.component_li_osusumetitle{
text-align: center;	
color: #ec6d67;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.8vw;
padding-top: 5VW;
}
.component_li_osusumetext{
width: 90%;
margin:  0 auto;
text-align: justify;	
color: #ec6d67;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 1.3vw;
padding-top: 4vw;
line-height: 1.7em;
}
.component_li_text{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3.5vw;
line-height:3.8vw;
color: #fff;
font-feature-settings: "palt";
}
h4{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3vw;
line-height:1.3em;
text-align: justify;
color: #000;
font-feature-settings: "palt";
margin-bottom: 5VW;
}
h5{
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3vw;
line-height:1.em;
text-align: justify;
color: #000;
font-feature-settings: "palt";
margin-bottom: 5VW;
}
/********************
*********************
*******section2******
*********************
*********************/
.flex_ul{
width:90vw;
white-space: nowrap;
overflow-x: scroll;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 10vw;
}
.flex_li:last-of-type{
margin-right: 0%;
}
.flex_li.reco{
min-width:40vw;
height:70vw;
margin-right: 1vw;
background-color: #3f3533;
padding-bottom: 20vw; 
}
.flex_li.skn{
min-width:39vw;
height:70vw;
margin-right: 1vw;
background-color: #000;
padding-bottom: 20vw; 
}
.flex_li.day{
min-width:39vw;
height:70vw;
margin-right: 1vw;
background-color: #DF1614;
padding-bottom: 20vw; 
}
.flex_li.twelve{
min-width:39vw;
height:70vw;
margin-right: 1vw;
background-color: #B1A170;
padding-bottom: 20vw; 
}
.flex_li.bea{
min-width:39vw;
height:70vw;
margin-right: 1vw;
background-color: #ec6d67;
padding-bottom: 20vw; 
}
.flex_li.ten{
min-width:39vw;
height:70vw;
margin-right: 1vw;
background-color: #f9d100;
padding-bottom: 20vw; 
}
.flex_li.white{
min-width:39vw;
height:90vw;
margin-right: 1vw;
background-color: #AB0042;
}
.flex_li.memory{
min-width:39vw;
height:90vw;
margin-right: 1vw;
background-color: #00797E;
}

.box_img{
min-width:36vw;
display: block;
padding-left: 2vw;
padding-right: 1vw;
padding-top: 5vw;
}
.box_img_ph{
display: block;
min-width: 39vw;
padding-left: 0vw;
}
.hover:hover {
opacity: 0.8;
color: #fff;
}

/*******************
********************
******footer******
********************
********************/

.footerbottom{
width:100%;
background-color: #000;
text-align: center;
}
.img23{
width: 30vw;
padding-top: 30vw;
}
.address p{
padding-top: 10vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 3vw;
color: #fff;
line-height:5vw;
}
.address.sub{
padding-top: 3vw;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size: 2vw;
color: #fff;
line-height:3vw;
}
.img24{
padding-top: 15vw;
width: 8vw;
}
.img25{
width: 8vw;
}
.copyright{
padding-top: 5vw;
padding-bottom: 2vw;
width: 100%;
text-align: center;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
font-weight:normal;
font-size:2vw;
color: #fff;
}
}