/*------------------------------------------------------------------
[Table of contents]

1. Modules
-------------------------------------------------------------------*/



/* ==========================================================================
   1. Modules
   ========================================================================== */

main .wrapper {
  padding-bottom: 118px;
}
main .wrapper section {
  margin-top: 60px;
}


/* Simple centered text and banner section
   ========================================================================== */
main .wrapper .section-bannertext {
  padding: 22px 0;
}
.section-bannertext-text {
  width: 43.3%;
}
.section-bannertext-banner {
  margin-left: 1.8%;
}
main .wrapper .section-bannertext-suzuka {
  padding: 12px 0;
  margin-top: 58px;
}
.section-bannertext-suzuka .section-bannertext-text {
  width: 65%;
}
.section-bannertext-suzuka .section-bannertext-banner {
  position: relative;
  top: 7px;
  width: 23.4%;
}


/* Product category section
   ========================================================================== */
main .wrapper .section-product-category-makeup {
  margin-top: 40px;
}
.section-product-category .group {
  margin-top: 2.2%;
}
.section-product-category .group:first-child {
  margin-top: 0;
}
.section-product-category > .group {
  margin-top: 40px;
}
.section-product-category-heading img {
  max-width: 358px;
}
.section-product-category-heading p {
  margin: 11px 0 28px 11px;
  font-size: 16px;
}
.product-category-content {
  padding: 0 16px 20px 16px;
}
.product-category-content p {
  font-size: 14px;
  line-height: 24px;
  margin: 7px 0 13px 0;
}


/* Product button
   ========================================================================== */
.button img {
  max-width: 173px;
}


/* Image frame
   ========================================================================== */
.img-frame {
  max-height: 118px;
  box-shadow: 0 0 0 2px #e5e5e5;
  border-radius:0.1px;
}
.img-frame img {
  position: relative;
  box-shadow: none;
  top: -15px;
}


/* Extra product lineup
   ========================================================================== */
.product-lineup-extra {
  margin-top: 41px;
}


main .wrapper .group-brands {
  margin: 0 3%;
  margin-top: 57px;
}


/*---------------------------[Mobile]------------------------------*/

/* Footer========================================================================== */	
/* Tags */	
.tag {	
display: inline-block;	
width: 100%;	
max-width: 110px;	
padding: 2px 3px 4px 3px;	
color: #fff;	
background-color: #666;	
font-family: 'ヒラギノ明朝 Std W6','Hiragino Mincho','ＭＳ Ｐ明朝','MS PMincho',serif;	
font-size: 10px;	
letter-spacing: 0.7px;	
text-align: center;	
line-height: 1;	
}	
.tag.herbal {	
background-color: #54af83;	
}	
.tag.books {	
background-color: #3e9465;	
}	
.tag.recipe {	
background-color: #01a29f;	
}	
.tag.botanist {	
background-color: #19818c;	
}	
.tag.journey {	
background-color: #026079;	
}	
/* Featured */	
.footer-featured {	
max-width: 995px;	
margin: 0 auto 0 auto;	
padding: 3px 0 10px 0;	
}	
.footer-featured-inner {	
background-color: #fff;	
}	
.footer-featured-posts {	
padding: 18px 27px 22px 27px;	
}	
.footer-featured-post {	
width: 23.4%;	
margin-left: 2.1%;	
}	
.footer-featured-post-content {	
overflow: auto;	
padding: 13px 16px 9px 16px;	
font-size: 13px;	
line-height: 1.45;	
}	
.footer-featured-post-text {	
color: #978442;	
}	
.footer-featured-post-meta {	
margin-top: 8px;	
}	
.footer-featured-post-date {	
float: right;	
text-align: right;	
width: 50%;	
font-family: 'ヒラギノ明朝 Std W6','Hiragino Mincho','ＭＳ Ｐ明朝','MS PMincho',serif;	
font-size: 12px;	
font-weight: 700;	
margin-top: 4px;	
line-height: 1;	
color: #666;	
}	
.footer-featured-post-tag {	
position: relative;	
top: -2.5px;	
float: left;	
width: 50%;	
text-align: left;	
}	


/*---------------------------[Mobile]------------------------------*/

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


  /* ==========================================================================
     1. Modules
     ========================================================================== */

  main .wrapper {
    padding-bottom: 48px;
  }
  main .wrapper section {
    margin-top: 18px;
  }


  /* Product category section
     ========================================================================== */
  .section-product-category .content-framed-border {
    margin-left: 0;
    margin-top: 13px;
  }
  .section-product-category .content-framed-border:first-child {
    margin-top: 0;
  }
  .section-product-category .group {
    margin-top: 13px;
  }
  .section-product-category .group:first-child {
    margin-top: 0;
  }
  .section-product-category .col {
    margin-left: 0;
  }
  .section-product-category-heading {
    margin-top: 40px;
  }
  .section-product-category-heading p {
    font-size: 14px;
    margin: 11px 0 18px 0px;
  }
  .section-product-category-heading img {
    max-width: 263px;
  }
  .product-category-content {
    padding: 0 12px 12px 12px;
  }
  .product-category-content p {
    margin: 10px 0 -6px 0;
  }
  main .wrapper .section-product-category-sunscreen {
    margin-top: 0;
  }
  main .wrapper .section-product-category-supplement {
    margin-top: 0;
  }
  main .wrapper .group-brands {
    margin-top: 39px;
  }


  /* Simple centered text and banner section
     ========================================================================== */
  main .wrapper .section-bannertext {
    margin-top: 22px;
    padding: 8px 0 22px 0;
  }
  .section-bannertext-text {
    width: 100%;
    margin-bottom: 14px;
  }
  .section-bannertext-banner {
    margin-left: 1.8%;
  }
  main .wrapper .section-bannertext-suzuka {
    padding: 6px 0 20px 0;
    margin-top: 41px;
  }
  .section-bannertext-suzuka .section-bannertext-text {
    width: 100%;
    margin-bottom: 13px;
  }
  .section-bannertext-suzuka .section-bannertext-banner {
    width: 100%;
    top: 0;
  }
  .section-bannertext-suzuka .section-bannertext-banner a {
    max-width: 220px;
    margin: 0 auto;
  }


  /* Extra product lineup
     ========================================================================== */
  .product-lineup-extra {
    margin-top: 21px;
    padding-top: 13px;
  }
  .product-lineup-extra .col {
    width: 49%;
    margin-left: 2%;
  }
  .product-lineup-extra .no-margin-left {
    margin-left: 0;
  }
  .product-lineup-extra .margin-bottom {
    margin-bottom: 2.8%;
  }


  /* Image frame
     ========================================================================== */
  .img-frame {
    max-height: none;
  }
  .img-frame img {
    top: 0;
  }


  /* Framed hightlighted content
     ========================================================================== */
  .content-framed-border-highlight {
    margin-bottom: 23px;
  }


  main .wrapper .group-brands {
    margin-left: 0;
    margin-right: 0;
  }
/* Footer	
========================================================================== */	
/* Featured */	
.footer-featured {	
padding: 0 3.1%;	
margin: -8px 0 5px 0;	
}	
.footer-featured-inner {	
border: 1px solid #ccc;	
}	
.footer-featured-header-text {	
padding: 11px 16px 0 12px;	
font-size: 14px;	
line-height: 1.45;	
}	
.footer-featured-posts {	
padding: 10px 16px 26px 12px;	
}	
.footer-featured-posts .content-framed-border {	
background-color: transparent;	
box-shadow: none;	
}	
.footer-featured-post {	
position: relative;	
width: 100%;	
margin-left: 0;	
margin-bottom: 17px;	
padding-bottom: 11px;	
clear: both;	
border-bottom: 1px dotted #b3b3b3;	
}	
.footer-featured-post:first-child {	
border-top: 1px dotted #b3b3b3;	
padding-top: 16px;	
}	
.footer-featured-post:last-child {	
margin-bottom: 0;	
}	
.footer-featured-post-img {	
float: left;	
width: 50%;	
margin-right: 5%;	
overflow: hidden;	
}	
.footer-featured-post-img img {	
position: relative;	
width: 129%;	
left: -14.5%;	
}	
.footer-featured-post-content {	
padding: 0;	
float: left;	
width: 45%;	
}	
.footer-featured-post-meta {	
width: 100%;	
margin: 0 0 8px 0;	
}	
.footer-featured-post-date {	
float: none;	
width: 100%;	
margin-top: 5px;	
line-height: 1;	
font-size: 12px;	
letter-spacing: 0.7px;	
text-align: left;	
}	
.footer-featured-post-tag {	
float: none;	
width: 100%;	
text-align: left;	
}	
.footer-featured-post-tag .tag {	
padding: 5px 3px 4px 3px;	
max-width: 100%;	
box-sizing: border-box;	
}	
.footer-featured-see-more {	
max-width: 137px;	
margin: 12px auto 0 auto;	
}

}



/*---------------------------[Additional Media Queries]------------------------------*/

@media only screen and (max-width: 990px) {
  .section-company-info-links .info-section-box-text {
    min-height: 109px;
  }
}

/*---------------------------20180720スペチメイク追加追記-----------------------------*/
.content-framed-border-highlight {
    padding: 20px 28px 28px 28px;
    margin-top: 40px;
}