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

.about{
  height: 300px;
  background-image: url("../images/top/top-image02.jpg");
  background-repeat: no-repeat;
  background-position: 100% 70% ;
  background-size: cover;
  color: #363e37;
  margin-bottom:50px;
  background-color: #fff;
　width:100%; 
}
.about h2{
  font-size: 3.0rem;
  color: #363e37;
  letter-spacing: 8px;
}
.about h2 span{
  display: block;
  font-size:0.8rem;
  padding-top: 10px;
}
.top-bg{
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-discripton{
	margin: 100px auto 50px;
	max-width: 375px;
}
.about-description__flex img{
 width: 200px;
	height: auto;
	border-radius: 44% 56% 38% 62% / 58% 52% 48% 42%;
}
.about-description-bg{
	background-image: linear-gradient(90deg, rgba(228, 210, 235, 0.51) 5%, rgba(245, 247, 217, 0.61) 35%, rgba(180, 230, 183, 0.72) 73%);
   width: 100px;
	height: 100px;
	border-radius:30% 70% 51% 49% / 30% 49% 51% 70% ;
    margin-top: -60px;
	margin-left: 40px;
   animation: fluidrotate 10s ease 0s infinite;/*アニメーションの設定*/
}
@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

.about-discription__content{
	margin: 30px auto;
	padding: 30px 20px ;
	/*background-color:#D4E7D4;*/
}
.about-discription__content h3{
	font-size: 1.9rem;
	padding-bottom: 30px;
	font-weight: 300;
	color: #505B45;
}
.about-dscriprion__profile{
	line-height: 30px;
	font-size: 1.4rem;
}
.nailist-name{
	padding: 0 20px;
}

.about-greeting{
	max-width: 375px;
	margin: 0 auto 70px;
}
.about-greeting img{
	border-radius: 44% 56% 38% 62% / 58% 52% 48% 42%;
	width: 200px;
	height: auto;
}
.about-greeting-bg{
	border-radius: 78% 22% 51% 49% / 58% 49% 51% 42%  ;
	margin-left: 212px;
    width: 100px;
    height: 110px;
    margin-top: -64px;
     background-image:linear-gradient(90deg, rgba(228, 210, 235, 0.51) 5%, rgba(245, 247, 217, 0.61) 35%, rgba(180, 230, 183, 0.72) 73%);
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
}
@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}
.about-greeting__content{
	margin: 30px auto;
	padding: 30px 20px;
	/*background-color: #D4E7D4;*/
}
.about_comment{
	font-size: 1.8rem;
	line-height: 30px;
	color: #505B45;
	padding-bottom: 20px;
	font-weight: 400;
}
.comment-p{
	font-size: 1.4rem;
	line-height: 30px;
}
.about-activity{
  border: solid 1px #575757;
  margin: 30px auto;
  padding: 16px 10px;
  border-radius: 10px;
  max-width: 350px;
}
.about-activity-link{
  display: flex;
  justify-content: space-around;
  padding: 20px 10px;
}
.about-activity-link img{
  width: 40px;
}
.icon-p{
  color: #ffffff;
  padding: 8px 0 0 12px;
  letter-spacing: 2px;
  font-size: 1.3rem;
}
.blog-link,.instagram-link{
  display: flex;
  justify-content: center;
  background-color: #979f80;
  width: 150px;
  padding:12px 4px 10px 2px;
  border-radius: 6px;
 margin: 0;
}



@media screen and (min-width:600px){
	.about-discripton{
	margin: 130px auto 50px;
		max-width: 750px;
}
	.about-description__flex{
		display: flex;
		justify-content: space-around;
	}
	.about-discripton img{
		width: 200px;
		height: auto;
	}
	.about-description-bg {
    margin-left: 165px;
    width: 151px;
    height: 160px;
    margin-top: -86px;
	}
	.about-description-imgs{
		width: 40%;
	}
	.about-discription__content{
		width: 60%;
		margin-left: 20px;
	}
  .about-discription__content h3,.about_comment{
    font-size: 2.0rem;
    line-height: 34px;
  }
  .about-dscriprion__profile,.comment-p{
    font-size: 1.6rem;
    line-height: 34px;
  }
	.about-discription__content h3,.about-discription__content p,.about_comment,.about-greeting__content p{
		text-align: left;
	}
	.about-discription__content {
    margin: 48px 0 0 20px;
		padding: 41px 46px;
	}
	.about-greeting{
		max-width: 750px;
		margin: 130px auto 70px;
	}
	.about-greeting__flex{
		display: flex;
		flex-direction: row-reverse;
	}
	.about-greeting img{
		width: 200px;
		height: auto;
	}
  .comment-br{
    padding-left: 100px;
  }
	.about-greeting-bg {
       margin-left: -19px;
    width: 148px;
    height: 128px;
    margin-top: -56px;
	}
	.about-greeting-imgs{
		width: 40%;
		margin-left: 20px;
	}
	.about-greeting__content{
		width: 60%;
		margin: 48px 0 0 0 ;
    padding: 47px 44px;
	}
  .about-activity{
  margin: 30px auto 50px;
  padding: 30px 10px;
  border-radius: 10px;
  max-width: 600px;
}
.about-activity-link{
  padding: 20px 10px 10px;
}

.icon-p{
  color: #ffffff;
  padding: 8px 0 0 12px;
  letter-spacing: 2px;
  font-size: 1.6rem;
}
.blog-link,.instagram-link{
  display: flex;
  /*justify-content: center;*/
  background-color: #979f80;
  width: 180px;
  padding:12px 4px 10px 2px;
  border-radius: 6px;
}
  .br-sp{
    display: none;
  }
}

@media screen and (min-width:960px){
	.about{
		max-width: 1440px;
		margin: 0 auto;
	}
	
	.about-discripton{
	margin: 130px auto 150px;
		max-width: 1440px;
}
	.about-description__flex{
		display: flex;
		justify-content: space-around;
	}
	.about-discripton img{
		width: 250px;
		height: auto;
	}
	.about-description-bg {
    margin-left: 50%;
    width: 164px;
    height: 187px;
    margin-top: -87px;
	}
	.about-description-imgs{
		width: 40%;
	}
	.about-discription__content{
		width: 60%;
		margin-left: 20px;
	}
	.about-discription__content h3,.about-greeting__content h3{
	font-size: 2.4rem;
	padding-bottom: 50px;
	line-height: 46px;
}
.about-dscriprion__profile,.about-greeting__content p{
	line-height: 36px;
	font-size: 1.8rem;
}
	
	.about-discription__content {
    margin: 0px 0 0 20px;
		padding: 63px 50px;
		
	}
	.about-greeting{
		max-width: 1440px;
		margin: 0 auto 110px;
	}
	.about-greeting__flex{
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-around;
	}
	.about-greeting img{
		
		width: 250px;
		height: auto;
	}
	.about-greeting-bg {
     margin-left: -10px;
    width: 184px;
    height: 209px;
    margin-top: -115px;
	}
	.about-greeting-imgs{
		width: 40%;
		margin-left: 20px;
	}
	.about-greeting__content{
		width: 60%;
		margin: 26px 0 0 0 ;
    padding: 47px 110px;
	}
	.comment-br{
		display: block;
		padding-left: 24%;
	}
  .about-activity{
  max-width: 800px;
    margin-bottom:80px;
      
    }

.about-activity-link{
  padding: 20px 10px 10px;
  justify-content: center;
}

.icon-p{
  color: #ffffff;
  padding: 8px 0 0 12px;
  letter-spacing: 2px;
  font-size: 1.6rem;
}
  .blog-link{
  margin-right: 50px;  
}
  .instagram-link{
    margin-left: 50px;
  }
}