/*--------------------------------------------------------
メインイメージ
--------------------------------------------------------*/
.custom-fv {
   background: #fff3f7;
   background-image: url(../img/fv-pc.jpg);
   background-repeat: no-repeat;
   background-position: 70% 50%;
   background-size: cover;
   padding: 80px 20px;
   height: 450px;
}

@media only screen and (min-width: 1430px) {
   .custom-fv {
      background-size: contain;
   }
}

.custom-fv-in {
   max-width: 1000px;
   margin: 0 auto;
}

.custom-fv-title {
   font-size: 40px;
   font-weight: bold;
   color: #ef5179;
   line-height: 1.5;
   font-family: "mincho";
   margin-bottom: 15px;
   text-shadow: 2px 1px 1px #fff3f7;
}

.custom-fv-description {
   font-size: 20px;
   color: #ef5179;
   font-family: "mincho";
   margin-bottom: 40px;
   line-height: 1.5;
   text-shadow: 1px 1px 1px #fff3f7;
}

.custom-fv-content {
   line-height: 1.5;
   text-shadow: 1px 1px 1px #fff3f7;
}

.custom-fv-content.mb {
   padding: 20px;
   text-align: center;
   display: none;
}

@media only screen and (max-width: 600px) {
   .custom-fv {
      background-image: url(../img/fv-sp.jpg);
      padding: 65px 20px;
      height: 265px;
   }

   .custom-fv-title {
      font-size: 23px;
   }

   .custom-fv-description {
      font-size: 15px;
   }

   .custom-fv-content.pc {
      display: none;
   }

   .custom-fv-content.mb {
      display: block;
   }

   .css-br::after {
      content: "\A";
      white-space: pre;
   }
}


/*--------------------------------------------------------
検索エリア
--------------------------------------------------------*/
.custom-search__inner {
   padding: 0 20px;
   background: #fffbfc;
}

.custom-search-box {
   padding: 30px 20px;
   width: 88.8888%;
   max-width: 1200px;
   margin: 0 auto;
   background: #fff;
   box-shadow: 0px 5px 10px #dedede;
   position: relative;
   top: -45px;
   z-index: 2;
}

.custom-search-box-in {
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
}

.custom-search-title {
   font-size: 20px;
   font-weight: bold;
   padding-left: 30px;
   margin: 10px 0;
   position: relative;
}

.custom-search-title::before {
   position: absolute;
   content: '';
   width: 26px;
   height: 26px;
   top: -3px;
   left: 0;
   background-image: url(../img/icon-map.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: contain;
}

/*キーワードから探す*/
.custom-search-input {
   margin: 20px 24px 24px;
}

.custom-search-input input {
   width: 100%;
   padding: 18px 15px;
   background: #fafafa;
   border: solid 2px #e7e7e7;
   background-image: url(../img/icon-grass.png);
   background-repeat: no-repeat;
   background-position: left 24px center;
   background-size: 16px 16px;
   padding-left: 50px;
}

.custom-search-input::placeholder {
   color: #999;
}

/*店舗、施術カテゴリから探す*/
.custom-search-btn {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0;
}

.custom-search-btn[data-btn="treatment"] {
   overflow-x: auto;
   white-space: nowrap;
}

.custom-search-btn::-webkit-scrollbar {
   width: 0;
   height: 5px;
}

.custom-search-btn::-webkit-scrollbar-track {
   background: #fff;
}

.custom-search-btn::-webkit-scrollbar-thumb {
   background: #fce2e9;
   border-radius: 5px;
}

.custom-search-btn::-webkit-scrollbar-thumb:hover {
   background: #fcd4df;
}

.search-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   text-align: center;
   margin: 15px 5px;
   width: 140px;
   height: fit-content;
}

.search-btn[data-btn="tag"] {
   width: 100px;
}

.search-btn a {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 80px;
   height: 80px;
   color: #ef5179;
   font-size: 17px;
   font-weight: bold;
   background: #fff7f9;
   border-radius: 50%;
}

/*施術カテゴリから探す*/
.search-btn a span,
.search-btn a img {
   display: block;
   width: 100%;
   height: 100%;
}

.search-treatment {
   font-size: 14px;
   line-height: 1.5;
   margin-top: 10px;
}

@media only screen and (max-width: 991px) {
   .custom-search__inner {
      padding: 0;
   }

   .custom-search-title {
      font-size: 16px;
      padding-left: 26px;
   }

   .custom-search-title::before {
      position: absolute;
      content: '';
      width: 24px;
      height: 24px;
      top: -5px;
      left: 0;
   }

   .custom-search-input {
      margin: 20px 0 24px;
   }

   .search-btn a {
      font-size: 16px;
   }
}

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

   .custom-search-box {
      padding: 20px;
      top: 0px;
   }

   .custom-search-btn[data-btn="tag"] {
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
   }

   .custom-search-btn[data-btn="treatment"] {
      grid-template-columns: repeat(2, 1fr);
      gap: 0;
      overflow-x: hidden;
   }

   .search-btn {
      margin: 15px 10px;
      width: 130px;
   }
}


/*--------------------------------------------------------
コンテンツエリア
--------------------------------------------------------*/
.content__lists__inner,
.ranking__lists__inner {
   padding: 30px 0;
}

.content__lists__inner {
   background: #fffbfc;
}

.p-blog-archive.home {
   padding: 0 0 20px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   width: 88.8888%;
   max-width: 1200px;
}

.section-header {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 35px 0;
}


/*--------------------------------------------------------
ランキング
--------------------------------------------------------*/
.p-blog-archive__item.home a:hover {
   opacity: .7;
}

/*イメージ*/
.post-ranking-img {
   aspect-ratio: 8/5;
   padding-top: 0;
   width: 100%;
}

.post-ranking-img img {
   height: 100%;
   width: 100%;
}

/*ランク*/
.post-ranking-data {
   display: flex;
   padding: 15px 15px 0;
}

.post-ranking {
   padding: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   color: #fff;
   background: #d9d9d9;
   position: relative;
}

.post-ranking::before {
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 10px transparent;
   border-left: solid 20px #d9d9d9;
}

.post-ranking::after {
   position: absolute;
   content: '';
   top: 100%;
   right: 0;
   border: none;
   border-bottom: solid 10px transparent;
   border-right: solid 20px #d9d9d9;
}

.post-ranking[data-rank="no1"] {
   background: #ab8c4b;
}

.post-ranking[data-rank="no1"]::before {
   border-left: solid 20px #ab8c4b;
}

.post-ranking[data-rank="no1"]::after {
   border-right: solid 20px #ab8c4b;
}

.post-ranking[data-rank="no2"] {
   background: #b0becc;
}

.post-ranking[data-rank="no2"]::before {
   border-left: solid 20px #b0becc;
}

.post-ranking[data-rank="no2"]::after {
   border-right: solid 20px #b0becc;
}

.post-ranking[data-rank="no3"] {
   background: #b1806e;
}

.post-ranking[data-rank="no3"]::before {
   border-left: solid 20px #b1806e;
}

.post-ranking[data-rank="no3"]::after {
   border-right: solid 20px #b1806e;
}

.post-rating-title {
   color: #333;
   margin-top: 3px;
}

/*スター*/
.rating-stars {
   display: inline-block;
   font-size: 18px;
   margin-top: 5px;
   margin-right: 3px;
   position: relative;
}

.star {
   position: relative;
   display: inline-block;
   font-size: 18px;
}

.star.full {
   color: #eaba36;
}

.star.empty,
.star.half {
   color: #ccc;
}

.star.half::before {
   content: '★';
   position: absolute;
   left: 0;
   top: 0;
   width: 50%;
   overflow: hidden;
   color: #eaba36;
}

.rating-value {
   color: #555;
}

.post-description {
   padding: 15px 15px 0;
   color: #555;
}

@media only screen and (max-width: 991px) {
   .p-blog-archive__item.home {
      margin: 0 1em;
   }

   .p-blog-archive__item.home:not(:last-child) {
      margin-bottom: 2em;
   }

   .p-blog-archive__item.home a {
      height: 100%;
      overflow: hidden;
      padding-bottom: 15px !important;
   }
}