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

/*画面遷移ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*トップのイメージ画像ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

#consept-page {
    position:relative;
    margin-bottom: 100px;
}


.top-consept {
    position: relative;
    margin-top:100px;
    margin-right: 10%;
    margin-left: 10%
   
}

.top-consept img {
    width: 80vw;
    border-radius: 100px;
    box-shadow: 10px 15px rgba(124,90,122,0.5)
    
}

@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}

/*左右に揺れる*/
.top-consept2 {
    animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}




.consept-text {
    position: absolute;
    top: 25vh;
    left: 13%;
    font-size: 5em;
    line-height: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px #7b5979;
    text-align: center;
    font-family: 'Montserrat', serif;
}



@media screen and (min-width: 800px){
    
    .min-cons img {
        display: none !important;
    }
    
    
}




/*----------------------------------------------*/

/*流れる文字*/


.slider-g img {
    /*width:100%;スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider-g .slick-slide {
    margin:0 0 100px 0 ;/*スライド左右の余白調整*/
}


/*========= レイアウトのためのCSS ===============*/

.slider-g ul{
	margin:0;
	padding: 0;
	list-style: none;
}



a:hover,
a:active{
	text-decoration: none;
}


/*コンテンツ----------------------------------------------*/

#content-item {
    position: relative;
    width: 100%;
    padding: 50px 2px 900px 2px;
}

.content-area1 {
    position: absolute;
    top: 0;
    right: 55%;
   
}

.content-area2 {
    position: absolute;
    top: 50px;
    right: 50%;
    
}

.content-area3 {
    position: absolute;
    top: 40%;
    left: 50%;
    padding: 3em;
    border-radius: 30px;
    width: auto;
    line-height: 3em;
    font-size: 1.1em;
    text-align: left;
    
}


/*コンテンツ2----------------------------------------------*/

.area{
  overflow: hidden;
}
.wrap{
  display: flex;
}
.item{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-top: 50px;
}

.natural-cosme h4 {
    width: 60%;
    margin: auto;
}

.natural-list {
    margin: 50px
}
.natural-list img {
    width: 80%;
    margin: auto;
    
}
.natural-list ul {
    display: flex;
    flex-direction: row;
    padding: 2em;
    background-color: rgba(255,255,255,0.3);
   border-radius: 80px;
}

.natural-list li {
    width: 50%;
    
}

.natural-list li2 {
    text-align: left;
    margin: auto;
    font-size: 1.1em;
    border-top: dotted #7b5979;
    border-bottom: dotted #7b5979;
    padding: 2em;
   
}


/*小さい画面の設定ーーーーーーーーーーーーーーーーーー*/
@media screen and (max-width:2000px) {
   #consept-page {
    position:relative;
    margin-bottom: 100px;
}



}


/*-----------------------------------------------*/


@media screen and (max-width:1500px) {
    #consept-page {
    position:relative;
    margin-bottom: 100px;
}



}

/*-----------------------------------------------*/

@media screen and (max-width:1000px) {

#consept-page {
    position:relative;
    padding: 0;
    margin-bottom: 100px;
}


    
    .consept-text {
    position: absolute;
    top: 15vh;
    left: 13%;
    font-size: 4em;
    line-height: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px #7b5979;
    text-align: l;
    font-family: 'Montserrat', serif;
}

/*------------------*/
    
#content-item {
    position: relative;
    padding: 0 0 0 30px;
    margin-bottom: 100px;
}

.content-area1 {
    position: absolute;
    top: 0;
    right: 25%;
   width: 60%
}

.content-area2 {
    position: relative;
    width: 60%;
margin-left: 70%
}
    
    .content-area2 img {
        
    }

.content-area3 {
    position: relative;
    margin-top: 40px;
    margin-left: -40%;
    width: 80%;
    line-height: 3em;
    font-size: 1.1em;
    text-align: left;
    
}
 


 }

/*-----------------------------------------------*/


@media screen and (max-width:800px) {
   #consept-page {
    position:relative;
    margin-bottom: 100px;
}

    #consept-page .top-consept img {
    display: none !important;
    
}
    
    .min-cons {
        position: relative;
        margin-top: 50px;
       margin-left: 10%;
       margin-right: 10%;
       width: 80%;
    }
    .min-cons img { 
       border-radius: 100px;
       box-shadow: 10px 15px rgba(124,90,122,0.5)
       
    }   
    
    
    
    
    .consept-text {
    position: absolute;
    top: 25vh;
    left: 13%;
    right: 13%;
    font-size: 4em;
    line-height: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px #7b5979;
    text-align: center;
    font-family: 'Montserrat', serif;
}
    

/*------------------*/    
    
    
#content-item {
    position: relative;
    
    margin-bottom: 100px;
}

    
    
/*------------------*/    
 .natural-list ul {
        display: flex ;
        flex-direction: column;
        border-radius: 80px;
        border-top-right-radius: 500px;
        border-top-left-radius: 500px; 
        border-bottom-right-radius: 50px;
        border-bottom-left-radius: 50px;
        
    }
       
     .natural-list img {
        width: 80%;
        margin: auto
    }
      
    .natural-list li2 {
    text-align: left;
    margin: auto;
    font-size: 1.1em;
    border-top: dotted #7b5979;
    border-bottom: dotted #7b5979;
    padding: 2em;
    margin-top: 2em;
    
   
}

        .natural-list li {
         width: 80%;
        margin: auto;
    
    
    }
     
    
    

 

 }
/*-----------------------------------------------*/

@media screen and (max-width:700px) {

  #consept-page {
    position:relative;
    margin-bottom: 100px;
}


}

/*-----------------------------------------------*/

@media screen and (max-width:600px) {

 #consept-page {
    position:relative;
    margin-bottom: 100px;
}

    
.natural-list li2 {
    text-align: left;
    font-size: 0.95em;
    border-top: dotted #7b5979;
    border-bottom: dotted #7b5979;
    padding: 2em;
    }
    
   .item{
  height: 80vh;
       
    }
 
    .natural-cosme h4 {
    width: 80%;
    margin: auto;
}


}


/*-----------------------------------------------*/

@media screen and (max-width:500px) {

 #consept-page {
    position:relative;
    margin-bottom: 100px;
}

    #consept-page .top-consept img {
    display: none !important;
    
}
    
    .min-cons {
        position: relative;
        margin-top: 50px;
       margin-left: 10%;
       margin-right: 10%;
       width: 80%;
    }
    .min-cons img { 
       border-radius: 100px;
       box-shadow: 10px 10px rgba(124,90,122,0.5)
       
    }   
    
    .consept-text {
    position: absolute;
    top: 15vh;
    left: 13%;
    right: 13%;
    font-size: 3em;
    line-height: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px #7b5979;
    text-align: center;
    font-family: 'Montserrat', serif;
}

  .content-area3 {
    position: relative;
    margin-top: 40px;
    margin-left: -52%;
    width: 100%;
    line-height: 2em;
    font-size: 0.85em;
    text-align: left;
    
}  

    


}

/*-----------------------------------------------*/


@media screen and (max-width:350px) {
    
 #consept-page {
    position:relative;
    margin-bottom: 100px;
}

    #consept-page .top-consept img {
    display: none !important;
    
}
    
    .min-cons {
        position: relative;
        margin-top: 50px;
       margin-left: 10%;
       margin-right: 10%;
       width: 80%;
    }
    .min-cons img { 
       border-radius: 100px;
       box-shadow: 10px 10px rgba(124,90,122,0.5)
       
    }   
    
    
    .consept-text {
    position: absolute;
    top: 15vh;
    left: 13%;
    right: 13%;
    font-size: 2.5em;
    line-height: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 3px 3px #7b5979;
    text-align: center;
    font-family: 'Montserrat', serif;
}


    


}