@charset "utf-8";


/* ==========================================================================
   ハンドメイドコーナー
========================================================================== */
#about_hm {
   position: relative;
   margin: 0 auto;
   padding: 72px 0 240px;
   background: url(../image/back_turf.png) top center repeat-y #b4d984;
   box-sizing: border-box;
   z-index: 200;
}

#about_hm::before {
   content: "";
   display: block;
   position: absolute;
   top: -172px;
   left: 3px;
   right: 0;
   width: 268px;
   height: 200px;
   margin: auto;
   background: url(../image/about_hm_tit.png) bottom center no-repeat;
   background-size: cover;
   z-index: 300;
}

#about_hm::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -20px;
    width: 100%;
    height: 32px;
    background: url(../image/back_wave_under.png) bottom center repeat-x;
    z-index: 400;
}

#about_hm .illust_area {
   position: absolute;
   overflow: hidden;
   top: -210px;
   width: 100%;
   height: 300px;
   z-index: 200;
 }
 
 #about_hm .illust_area img {
   display: block;
   position: absolute;
 }
 
 #about_hm .illust_area .l_tree {
   width: 148px;
   top: 72px;
   right: calc(50% + 400px); 
 }
 
 #about_hm .illust_area .l_shrub {
   width: 98px;
   top: 212px;
   right: calc(50% + 300px); 
 }
 
 #about_hm .illust_area .r_tree {
   width: 138px;
   top: 30px;
   left: calc(50% + 400px);
 }
 
 #about_hm .illust_area .r_flower {
   width: 110px;
   top: 216px;
   left: calc(50% + 294px);
 }

 #about_hm .about_hm_inr {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: calc(100% - 38px);
    max-width: 840px;
    margin: 54px auto 0;
    padding: 56px 54px;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 1px 3px 8px 1.5px rgba(0, 0, 0, 0.07);
    z-index: 300;
 }

 #about_hm .about_hm_inr .txt_area {
    width: calc(50% - 30px);
 }
 #about_hm .about_hm_inr .txt_area h2 {
   color: #5a4b94;
   font-size: 28px;
   font-weight: 700;
   margin: 6px 0 24px;
 }

 #about_hm .about_hm_inr .txt_area p {
   font-size: 18px;
   line-height: 1.5;
   margin-bottom: 15px;
}

 #about_hm .about_hm_inr .txt_area span {
   font-size: 13px;
   color: #666;
 }

 #about_hm .about_hm_inr .img_area {
   width: 50%;
 }

 #about_hm .about_hm_inr .img_area img {
    border-radius: 10px;
 }
 


@media screen and (max-width : 960px ){
   #about_hm {
      padding: 1px 0 162px;
   }

   #about_hm::before {
    width: 218px;
    height: 166px;
   }

   #about_hm .tit {
    padding-top: 23px;
   }


   #about_hm .about_hm_inr {
      padding: 7.4vw;
   }

   #about_hm .about_hm_inr .txt_area {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
  }

  #about_hm .about_hm_inr .txt_area h2 {
    margin: 0px 0 27px;
  }

  #about_hm .about_hm_inr .txt_area p {
    font-size: 17px;
    text-align: left;
  }

  #about_hm .about_hm_inr .img_area {
    width: 100%;
  }

}

@media screen and (max-width : 650px ){
   #about_hm{
      padding: 1 0 150px;
   }

   #about_hm::before {
    top: -141px;
    width: 160px;
    height: 120px;
  }

  #about_hm .tit {
    padding-top: 17px;
  }

  #about_hm .about_hm_inr .txt_area h2 {
    font-size: 24px;
  }

  #about_hm .about_hm_inr .txt_area p {
    font-size: 14px;
  }

  #about_hm .about_hm_inr .img_area img {
    border-radius: 6px;
  }


}    



/* ==========================================================================
   作家紹介
========================================================================== */
#artists {
   position: relative;
 }

 #artists::before {
   content: "";
   display: block;
   position: absolute;
   top: -32px;
   left: 0;
   right: 0;
   width: 226px;
   height: 104px;
   margin: auto;
   background: url(../image/artists_tit.png) bottom center no-repeat;
   background-size: cover;
   z-index: 200;
 }

 #artists .artists_inr {
  position: relative;
  padding: 154px 0 240px;
  background: url(../image/back_stripe_blue.jpg) ;
  animation: back_anime 600s linear infinite;
 }

 #artists .artists_inr .artists_list {
   position: relative;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   width: calc(100% - 30px);
   max-width: 1080px;
   margin: 36px auto 0;
   padding: 40px 0;
   box-sizing: border-box;
   z-index: 300;
 }

 #artists .artists_inr .artists_list .artists_box {
   position: relative;
   width: 31%;
   margin: 0 3.5% 32px 0;
   padding: 10px;
   border-radius: 10px;
   background: #fff;
   box-sizing: border-box;
   box-shadow: 0 3px 4px 0 rgba(51, 51, 51, .15);
 }

 #artists .artists_inr .artists_list .artists_box:nth-child(3n) {
  margin: 0 0 26px 0;
 }

 #artists .artists_inr .artists_list .artists_box:nth-child(2),
 #artists .artists_inr .artists_list .artists_box:nth-child(5),
 #artists .artists_inr .artists_list .artists_box:nth-child(8) {
    top: 20px;
 }

 #artists .artists_inr .artists_list .artists_box .img_area img{
   border-radius: 8px;
 }

 #artists .artists_inr .artists_list .artists_box .text_area h2 {
   position: relative;
   text-align: center;
   color: #5a4b94;
   font-size: 28px;
   margin: 28px 0 14px;
 }

 #artists .artists_inr .artists_list .artists_box .text_area h2::before {
   content: "";
   display: block;
   position: absolute;
   top: -56px;
   left: 0;
   right: 0;
   width: 49px;
   height: 46px;
   margin: auto;
   background: url(../image/artists_icon.png) center center no-repeat;
   background-size: cover;
   z-index: 300;
 }

 #artists .artists_inr .artists_list .artists_box .text_area p {
    font-size: 15px;
    line-height: 1.5;
    padding: 0 10px 10px;
 }

 

 @media screen and (max-width : 960px ){
  #artists {
    padding: 0 ;
  }

  #artists::before {
    top: -13px;
    width: 179px;
    height: 82px;
  }

  #artists .artists_inr {
    padding: 104px 0 218px;
  }

  #artists .artists_inr .artists_list {
    justify-content: space-between;
  }


  #artists .artists_inr .artists_list .artists_box {
   width: 48.5%;
   margin: 0 0 18px 0;
 }

   #artists .artists_inr .artists_list .artists_box:nth-child(2),
   #artists .artists_inr .artists_list .artists_box:nth-child(5),
   #artists .artists_inr .artists_list .artists_box:nth-child(8) {
    top: unset;
  }
   
    #artists .artists_inr .artists_list .artists_box .text_area p {
    font-size: 13px;
  }


 }


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

    #artists::before {
      top: -13px;
      width: 164px;
      height: 76px;
  }

    #artists .artists_inr .artists_list {
      margin: 52px auto 0;
      padding: 0;
    }

    #artists .artists_inr .artists_list .artists_box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 18px;
    }

    #artists .artists_inr .artists_list .artists_box .img_area {
      width: 48%;
    }

    #artists .artists_inr .artists_list .artists_box .img_area figure {
      height: 100%;
    }

    #artists .artists_inr .artists_list .artists_box .img_area img {
      height: 100%;
      object-fit: cover;
    }

    #artists .artists_inr .artists_list .artists_box .text_area {
      width: calc(52% - 6px);
    }

    #artists .artists_inr .artists_list .artists_box .text_area h2 {
      font-size: 20px;
      margin: 32px 0 10px;
    }
   
    #artists .artists_inr .artists_list .artists_box .text_area h2::before {
      top: -38px;
      width: 34px;
      height: 32px;
    }
   
    #artists .artists_inr .artists_list .artists_box .text_area p {
       font-size: 2.55vw;
       padding: 0 0 10px 8px;

    }

   
  

}