@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-2150 .date-tags
.post-472 .date-tags,
.post-991 .date-tags,
.post-954 .date-tags,
.post-754 .date-tags,
.post-2134 .date-tags,
.post-2136 .date-tags,
.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;
}


/* 左カラムのメニューを追従させる */
.wp-block-columns {
  overflow: visible;
}

.sticky-menu {
  position: sticky;
  top: 100px;
}

@media screen and (max-width: 768px) {
  .sticky-menu {
    position: static;
  }
}

/* 左カラムのメニューを追従させる ここまで*/

/* アピール欄のボタンを消す */
.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でセル内改行した箇所を改行させない*/
    }
/*スマホ表示用ここまで*/
}

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

/*背景ここから */
body,
#body-in {
  background-color: #FBF4E8 !important;
  background-image: url("https://anclinic.jp/wp-content/uploads/2026/04/漆喰２.png") !important;
  background-repeat: repeat !important;
  background-size: 180px auto !important;
  background-position: top left !important;
}

#contents,
#main,
.content,
.content-in,
.main,
.main-scroll {
  background: transparent !important;
}

/*背景ここまで */

/*ラインマーカーここから */
.marker-under {
background: linear-gradient(transparent 60%, #ede3bf  60%);

}
/*ラインマーカーここまで */

/* モバイル下部フッターメニュー全体ここから */
/* モバイルフッターメニュー：黒透過 背景復活版 */
.mobile-footer-menu-buttons,
.mobile-footer-menu-buttons .menu-button {
  background-color: rgba(0, 0, 0, 0.40) !important;
}

/* 文字とアイコンを白に */
.mobile-footer-menu-buttons .menu-button,
.mobile-footer-menu-buttons .menu-button a,
.mobile-footer-menu-buttons .menu-icon,
.mobile-footer-menu-buttons .menu-caption,
.mobile-footer-menu-buttons .menu-button-caption {
  color: #ffffff !important;
}

/* アイコンがSVGや疑似要素の場合も白に寄せる */
.mobile-footer-menu-buttons svg,
.mobile-footer-menu-buttons i,
.mobile-footer-menu-buttons .fa {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* 境界線 */
.mobile-footer-menu-buttons .menu-button {
  border-color: rgba(255, 255, 255, 0.15) !important;
}
/* モバイル下部フッターメニュー全体ここまで */

/* しおりここから */
/* 右上しおりタブ全体 */
.side-bookmark-tabs {
  position: fixed;
  top: 120px;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 共通デザイン */
.side-bookmark-tabs .side-bookmark-tab {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  text-decoration: none;
  padding: 18px 9px 20px;
  border-radius: 10px 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.12em;
  line-height: 1.2;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

/* ご予約タブ */
.side-bookmark-tabs .reserve-tab {
  background: rgba(0, 0, 0, 0.62);
}

/* キャンペーンタブ */
.side-bookmark-tabs .price-tab {
  background: rgba(122, 101, 86, 0.82);
}

/* ホバー時：ご予約 */
.side-bookmark-tabs .reserve-tab:hover {
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
}

/* ホバー時：キャンペーン */
.side-bookmark-tabs .price-tab:hover {
  background: rgba(122, 101, 86, 0.95);
  color: #fff;
}

/* しおりここから */




/* スマホでは右上しおりタブを非表示ここから */
@media screen and (max-width: 768px) {
  .side-bookmark-tab {
    display: none !important;
  }
}
/* スマホでは右上しおりタブを非表示ここまで */







/* カルーセル画像を大きくする（縦幅重視） */
.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;
  }
}




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

/* リンクの下線消す ここから*/
.no-link-line a,
.no-link-line a:hover,
.no-link-line a:visited {
  text-decoration: none;
}
/* リンクの下線消す ここまで*/

/* フォント改善 ここから*/
body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  color: #3F3732;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p,
.entry-content,
.article {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 2;
}
/* フォント改善 ここまで*/

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

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

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