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

/*全体に適用するマージン*/
*{
margin : 0;

}

/*トップの画像*/

@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
img[src$="images/rip8.jpg"]{
	width: 100%;
	z-index: -1;
	left: 0px;
	position: fixed;/*ウインドウを基準とした絶対位置への配置を指定。absoluteと異なり、スクロールしても同じ位置に固定。*/
	animation-name: fadeIn;
    animation-duration: 3s;
}

/*THE PUBLIC ORGANIC*/
h5{
	position: absolute;
	color: dimgray;
	padding-top: 430px;/*スクロールリンクをトップに持ってくるため、マージンではなくパディングで指定*/
    left: 27px;
	font-family: Arial, Helvetica, "sans-serif";
	letter-spacing: 0.03rem;
	font-weight: 100;
}

/*ESSENCIAL OIL COLOR LIP STICK*/
.title{
	color: dimgray;
	top: 450px;
	position: absolute;/*絶対配置*/
    left: 25px;
	font-family: Arial, Helvetica, "sans-serif";
	font-size: 28px;
	letter-spacing: 0.03rem;
	font-weight: 100;
}


/*scrol*/
h6{
	position: absolute;/*絶対配置*/
    color: dimgray;
    top: 555px;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	width: 100%;
}

/*スクロール装飾*/
img[src$="images/scrol.gif"]{
	width: 100%;
	height: 40px;
	margin-top: 573px;
}

/*リンクの装飾*/
.a{
	text-decoration: none;
}


a{
  position: relative;
  display: inline-block;
  transition: .3s;
}

a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: dimgray;
  transition: .3s;
  transform: translateX(-50%);
}

a:hover::after{
  width: 100%;
}

/*メニューを横並びにする*/
#nav ul li{ 	
    display: inline;
	width: 100%;
 }
#nav{
    	
    padding: 15px;
	margin-top: -5px;
	z-index: 99;
} 

#nav ul{
    padding: 0px; 	
    margin: 0px;
	display: flex;
	
	
} 

#nav ul li a { 
    font-family: Arial, Helvetica, "sans-serif"; 
    text-decoration: none;
    color: dimgray; 	 
} 

/*(メニューを)均等に並べるflexボックス*/
.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;/*主軸を横に設定し、Flexアイテムを横に並べます。*/
  justify-content: space-evenly;/*フレックスアイテムの主軸方向の揃え位置を指定*//* 各アイテムを均等に配置し,各アイテムの周りに同じ大きさの間隔を置く */
	}

.flex > *{
  width: 8%;
  text-align: center;
}


/*トップの画像アニメ化*/
.anime_test {
    height: 477px;                  /* 高さ指定 */
    width: 100%;                   /* 幅指定 */
	
    /* 背景色指定 */
    transition: 2s;                 /* アニメーション指定 */
	background-image: url("images/topanime.png");
	background-size:contain;
	background-repeat:  no-repeat;
	
}

.anime_test:hover {
          /* 背景色指定 */
	background-image: url("images/topanime2.png");
	background-size:contain;
	background-repeat:  no-repeat;
	
}


img[src$="images/top2.png"]{
	width: 100%;
	margin-top: -200px;
	padding-top: -100px;
}

.topnoback{
	background: rgba(245,245,245,0.9);
}

/*ポイント、カラー、シーンのタイトルのデザイン*/
h2{
	color: dimgray;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	background: rgba(245,245,245,0.9);
	padding-top: 70px;
	letter-spacing: 0.1rem;
	width: 100%;
    padding-bottom: 13px;
	font-weight: 300;
}

img[src$="images/point.jpg"]{
	width: 100%;
}

/*各タイトル直下の導入コメント用*/
p.hairi{
    padding-left: 40px;
	padding-right: 40px;
    font-size: 13px;
    font-family: Arial, Helvetica, "sans-serif";
	line-height: 25px;
	color: dimgray;
	background: rgba(245,245,245,0.9);
	padding-top: 25px;
	margin-top: -10px;
	
}

h3{
	padding-left: 40px;
	padding-right: 40px;
	font-family: Arial, Helvetica, "sans-serif";
	color: dimgray;
	font-size: 15px;
	padding-top: 60px;
	text-align: center;
	background: rgba(245,245,245,0.9);
}

p.pointset{
    padding-left: 40px;/*本文に適用する統一マージン*/
	padding-right: 40px;
    font-size: 13px;
    font-family: Arial, Helvetica, "sans-serif";
	line-height: 25px;
	color: dimgray;
	background: rgba(245,245,245,0.9);
	padding-top: 8px;
	
}

p.set2{
	padding-top: 10px;
	padding-left: 40px;
	padding-right: 40px;
	font-size: 10px;
	color: dimgray;
	background: rgba(245,245,245,0.9);
	font-family: Arial, Helvetica, "sans-serif";
	
}

h4{
	padding-left: 285px;
	font-family: Arial, Helvetica, "sans-serif";
	color: darkgrey;
	background: rgba(245,245,245,0.9);
	padding-top: 30px;
	font-weight: 100;
	padding-bottom: 20px;
}


/*カラーの説明*/
img[src$="images/color.jpg"]{
	width: 100%;
}


img[src$="images/colorred.png"]{
	width: 100%;
	margin-left: 0px;
	padding-top: 80px;
	background: rgba(245,245,245,0.9);
	padding-bottom: 6px;
}


/*赤とピンクのタイトル用*/
div.redpink{
	padding-left: 40px;
	background: rgba(245,245,245,0.9);
	letter-spacing: 0.05rem;
	font-family: Arial, Helvetica, "sans-serif";
    color: dimgray;
    font-size: 25px;
    margin-top: -6px;
}


img[src$="images/colororange.png"]{
	width: 100%;
	margin-left: 0px;
	padding-top: 80px;
	background: rgba(245,245,245,0.9);
	padding-bottom: 6px;
}

div#orange{
	padding-left: 120px;
	background: rgba(245,245,245,0.9);
	letter-spacing: 0.05rem;
	font-family: Arial, Helvetica, "sans-serif";
    color: dimgray;
    font-size: 25px;
    margin-top: -6px;
}

img[src$="images/colorpink.png"]{
	width: 100%;
	margin-left: 0px;
	padding-top: 80px;
	background: rgba(245,245,245,0.9);
	padding-bottom: 6px;
}

/*オンラインストアと成分表示*/
p.store1{
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	color: gray;
	font-size: 10px;
	padding-top: 15px;
	background: rgba(245,245,245,0.9);
}

p.store2{
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	color: gray;
	font-size: 10px;
	padding-top: 15px;
	padding-bottom: 50px;
	background: rgba(245,245,245,0.9);
}






/*値段*/
p.priceset{
	padding-left: 40px;/*本文に適用する統一マージン*/
	padding-right: 40px;
    font-size: 13px;
    font-family: Arial, Helvetica, "sans-serif";
	line-height: 25px;
	color: rgba(100,100,100,0.9);
	background: rgba(245,245,245,0.9);
	padding-top: 30px;
	padding-bottom: 0px;
	font-weight: 100;
}

/*取り扱い企業*/
p.company{
    padding-left: 40px;/*本文に適用する統一マージン*/
	padding-right: 40px;
    font-size: 13px;
    font-family: Arial, Helvetica, "sans-serif";
	line-height: 25px;
	color: dimgray;
	background: rgba(245,245,245,0.9);
	
}




/*以下、シーン*/

img[src$="images/scene2.jpg"]{
	width: 100%;
	
}


/*シーンのバーニングレッドの並び*/
.scenetitle{
	color: dimgray;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	
	padding-top: 60px;
	letter-spacing: 0.1rem;
	width: 100%;
    padding-bottom: 13px;
	font-size: 20px;
	font-weight: 100;
	
}



.lastimage{
	background: rgba(245,245,245,0.9);
	position: relative;
	width: 100%;
	height: 635px;
}

img[src$="images/lastred1.jpg"]{
	width: 155px;
	height: 470px;
	position: absolute;
	top: 100px;
	right: 0px;
}

img[src$="images/back1.png"]{
	width: 277px;
	height: 169px;
	position: absolute;
	top: 150px;
	
}

img[src$="images/lastred2.jpg"]{
	width: 200px;
	height: 390px;
	position: absolute;
	top: 240px;
}





/*シーンのオレンジの並び*/
.scenetitle{
	
	
	color: dimgray;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	
	padding-top: 60px;
	letter-spacing: 0.1rem;
	width: 100%;
    padding-bottom: 13px;
	font-size: 20px;
	font-weight: 100;
	
}

.lastimage{
	background: rgba(245,245,245,0.9);
	position: relative;
	width: 100%;
	height: 635px;
}



img[src$="images/lastorange1.jpg"]{
	width: 187px;
	height: 311px;
	position: absolute;
	top: 100px;
	right: 0px;
	
}

img[src$="images/lastorange2.jpg"]{
	width: 203px;
	height: 445px;
	position: absolute;
	top: 190px;
	left: 0px;
}

img[src$="images/back2.png"]{
	width: 246px;
	height: 196px;
	position: absolute;
	top: 350px;
	right: 0px;
}


/*シーンのピンクの並び*/
.scenetitle{
	
	
	color: dimgray;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	
	padding-top: 60px;
	letter-spacing: 0.1rem;
	width: 100%;
    padding-bottom: 13px;
	font-size: 20px;
	font-weight: 100;
	
}

.lastimage{
	background: rgba(245,245,245,0.9);
	position: relative;
	width: 100%;
	height: 635px;
}

img[src$="images/lastpink1.jpg"]{
	width: 154px;
	height: 462px;
	position: absolute;
	top: 100px;
	left: 0px;
}

img[src$="images/back3.png"]{
	width: 267px;
	height: 196px;
	position: absolute;
	top: 130px;
	right: 0px;
}

img[src$="images/lastpink2.jpg"]{
	width: 208px;
	height: 400px;
	position: absolute;
	top: 230px;
	right: 0px;
}
















h1{
	
	color: darkgrey;
	
	margin-left: 20px;

}

div#line{
	left: 50%;
    top: 583px;
    position: absolute;
}











p.set{
    padding-left: 40px;/*本文に適用する統一マージン*/
	padding-right: 40px;
    font-size: 13px;
    font-family: Arial, Helvetica, "sans-serif";
	line-height: 25px;
	color: dimgray;
	background: rgba(245,245,245,0.9);
	padding-top: 5px;
	
}


/*米印の文字サイズ*/

div#set2{
	margin-left: 0px; /*画像に適用するとういつマージン*/
	margin-right: 0px;
	
}











/*
img[src$="images/top1.jpg"]{
	width: 317px;
	height: 520px;
	padding-left: 58px;
	padding-top: 70px;
	background: rgba(245,245,245,0.9);
	padding-bottom: 100px;
}

*/









.main-header{
	background: rgba(255,255,255,0.8);
  height:55px;
	z-index: 1;
}


.main-header{position:-webkit-sticky; position:sticky; top:0;}









.saigonoline{
	background-color: dimgray;
	height: 1px;
	width: 90%;
	margin-left: 15px;
	text-align: center;
}

.saigonoback{
	height: 150px;
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	padding-top: 10px;
	background: rgba(245,245,245,0.9);
	opacity: 0.7;
}


.saigo{
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	padding-top: 30px;
	font-weight: 100;
	font-size: 13px;
}

.saigo2{
	font-family: Arial, Helvetica, "sans-serif";
	text-align: center;
	padding-top: 10px;
	font-weight: 100;
}

img[src$="images/insticon.png"]{
	width: 30px;
	padding: 10px;
	
}

img[src$="images/twicon.png"]{
	width: 30px;
	padding: 10px;
	
}







.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;/*主軸を横に設定し、Flexアイテムを横に並べます。*/
  justify-content: space-evenly;/*フレックスアイテムの主軸方向の揃え位置を指定*//* 各アイテムを均等に配置し,各アイテムの周りに同じ大きさの間隔を置く */
	}
.flex > *{
  width: 8%;
  text-align: center;
}