@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/*日付を消す*/

.post-771 .date-tags,
.post-671 .date-tags,
.post-387 .date-tags,
.post-97 .date-tags,
.post-37 .date-tags,
.post-85 .date-tags,
.post-100 .date-tags,
.post-22 .date-tags,
.post-88 .date-tags,
.post-226 .date-tags,
.post-253 .date-tags,
.post-301 .date-tags,
.post-3 .date-tags {
display: none;
}


/* 例：表のセル(td)の背景色を変える */
table td {
  background-color: #ffffff;
}


/* アピール欄のボタンを消す */
.appeal-content {
	display: none;
}
/* アピール欄を消す */
.page-id-97 .appeal {
display:none;
}

/*テーブルをレスポンシブ化する */ 
.agn-center{
  text-align: center;/*thはセンター揃えなので中央揃えにしたいthセルに適用*/
}
.pc-tablehead th{
  white-space: nowrap;/*セル内で改行しない*/
}
/*スマホ表示用*/
  @media screen and (max-width: 480px) {
    .pc-tablehead{
      display: none;/*【1】PCで1行目に表示されているタイトルを非表示に*/
    }
    .vertical-table th{
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの一列目を縦積みにする*/
      width: 100%;
    }
    .vertical-table td {
      border-bottom: none;/*【2】上下の枠線が二重になるのを防止*/
      display: block;/*【3】PCの2列目以降も縦積みにする*/
      width: 100%;
    }
      .last td:last-child {
        border-bottom: solid 1px #FFFFFF;/*【4】表の一番下になるセルだけ下線を引く*/
     }
    .vertical-table td:before {
      content: attr(aria-label);/*【5】aria-labelで指定した値を表示させる*/
      display: inline-block;
      font-weight: bold;
      float: center;
      text-align: center;
      padding-right: 1em;
      white-space: nowrap;
    }
    .label br {
      display: none;/*【6】PCでセル内改行した箇所を改行させない*/
    }
/*スマホ表示用ここまで*/
}

/*テーブルをレスポンシブ化するここまで */




/* カルーセル画像を大きくする（縦幅重視） */
.carousel-box {
  .carousel-item {
    a {
      height: 100px; /* ★お好みの高さに変更してください */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 画像を枠に合わせてトリミング */
    }
  }
}


/* 施術の流れ */

.flow-steps {
  position: relative;
  margin: 40px 0;
}

.flow-step {
  display: flex;
  align-items: center; /* ←これにすると完全に横一直線 */
  position: relative;
  padding-bottom: 50px;
}

.flow-step:last-child {
  padding-bottom: 0;
}

.flow-step-number {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: #8d8766;
  color: #fff;
  text-align: center;
  margin-right: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.flow-step-number span {
  font-size: 10px;
  letter-spacing: 0.05em;
}

.flow-step-number strong {
  font-size: 28px;
  font-weight: 700;
}

.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 56px;
  width: 1px;
  height: calc(100% - 20px);
  background: #ddd;
}

.flow-step-content {
  flex: 1;
  padding-top: 6px;
}

.flow-step-content h3 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: #222;
}

.flow-step-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: #444;
}

@media (max-width: 767px) {
  .flow-step {
    gap: 16px;
    padding-bottom: 36px;
  }

  .flow-step-number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin-right: 0;
  }

  .flow-step-number strong {
    font-size: 22px;
  }

  .flow-step:not(:last-child)::after {
    left: 23px;
    top: 48px;
  }

  .flow-step-content h6 {
    font-size: 22px;
  }

  .flow-step-content p {
    font-size: 15px;
  }
}




/* 施術の流れ ここまで*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}