@charset "UTF-8";


/* =========================
   ご利用案内
========================= */
.page-id-854 .l-mainContent__inner>.post_content{
	margin-top: 0;
}

/* ==================================================
   メインビジュアル画像
================================================== */

@media (min-width: 1025px) {

	/* 拡大した画像が切れないようにする */
	.page-id-854 .guide-fv,
	.page-id-854 .guide-fv .wp-block-media-text {
		overflow: visible;
	}

	/* FV右側の画像だけ拡大 */
	.page-id-854 .guide-fv .wp-block-media-text .wp-block-media-text__media {
		position: relative;
		z-index: 0;
		transform: translate(20px, -15px) scale(1.15);
		transform-origin: center;
	}

	/* テキストを画像より手前に保つ */
	.page-id-854 .guide-fv .wp-block-media-text .wp-block-media-text__content {
		position: relative;
		z-index: 1;
	}
}

/* ==================================================
   ご予約からご来室までの流れ
================================================== */

.guide-flow .swell-block-columns__inner {
	counter-reset: guide-flow-num;
}


/* 各カラム */
.guide-flow .swell-block-column {
	position: relative;
	counter-increment: guide-flow-num;
}


/* ナンバリング */
.guide-flow .swell-block-column::before {
	content: counter(guide-flow-num);

	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;
	border-radius: 50%;

	background: var(--color_main);
	color: #fff;

	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;

	z-index: 2;
}

/* カラム間の矢印 */
.guide-flow .swell-block-column::after {
	content: "▶";
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);

	color: var(--color_text);
	font-size: 16px;
	line-height: 1;

	z-index: 3;
}


/* 最後のカラムは矢印なし */
.guide-flow .swell-block-column:last-child::after {
	content: none;
}

/* ==================================================
   ご予約前確認
================================================== */
.guide-check .swell-block-column {
	background: #fff9ee;
	border-radius: 8px;
	border: 1px solid var(--color_main) !important;
	box-shadow: 0 8px 24px
		color-mix(in srgb, var(--color_main) 10%, transparent);
	padding: 24px 22px;
}
.guide-check .swell-block-column .wp-block-media-text {
	gap: 0.5rem;
}
/* ==================================================
   初回カウンセリングの流れ
================================================== */
.guide-first-flow .swell-block-columns__inner {
	counter-reset: guide-first-num;
}

.guide-first-flow .swell-block-column {
	position: relative;
	counter-increment: guide-first-num;
}

/* 左上ナンバリング */
.guide-first-flow .swell-block-column::before {
	content: counter(guide-first-num);

	position: absolute;
	top: -10px;
	left: 15px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;
	border-radius: 50%;

	background: var(--color_main);
	color: #fff;

	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;

	z-index: 4;
}

/* カラム間の矢印 */
.guide-first-flow .swell-block-column {
	position: relative;
}

.guide-first-flow .swell-block-column::after {
	content: "▶";

	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%);

	color: var(--color_text);
	font-size: 16px;
	line-height: 1;

	z-index: 3;
}

/* 最後のカラムは矢印なし */
.guide-first-flow .swell-block-column:last-child::after {
	content: none;
}
/* スマホでは偶数列矢印なし */
@media (max-width: 600px) {

	.guide-first-flow .swell-block-column:nth-child(2n)::after {
		content: none;
	}

}

.guide-first-flow .swell-block-column h3{
	letter-spacing: 0.01em;
}

/* ==================================================
   カウンセリング料金
================================================== */
/* 料金カード ＋ メッセージ枠 */
.guide-price .swell-block-column,
.guide-price-message {
	border: 1px solid var(--color_main) !important;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.2);
	padding: 20px;
	box-shadow: 0 8px 24px
		color-mix(in srgb, var(--color_main) 10%, transparent);
}
.guide-price .swell-block-column{
	padding-bottom: 0;
}

.guide-price .counseling-label {
  --cut: 9px;

  position: relative;
  width: 230px;
  max-width: 80%;
  margin: 0 auto 16px;
  padding: 11px 20px 12px;
  color: #fff;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.08em;
  background: linear-gradient(
    90deg,
    #83520c 0%,
    #a76b11 18%,
    #c58b25 42%,
    #d1a049 52%,
    #b77b18 76%,
    #81500a 100%
  );

  /* 四隅を反対角丸＝内側に丸く切り抜く */
  -webkit-mask:
    radial-gradient(
      circle at 0 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 0 / 51% 51% no-repeat,

    radial-gradient(
      circle at 100% 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 0 / 51% 51% no-repeat,

    radial-gradient(
      circle at 0 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 100% / 51% 51% no-repeat,

    radial-gradient(
      circle at 100% 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 100% / 51% 51% no-repeat;

  mask:
    radial-gradient(
      circle at 0 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 0 / 51% 51% no-repeat,

    radial-gradient(
      circle at 100% 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 0 / 51% 51% no-repeat,

    radial-gradient(
      circle at 0 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 100% / 51% 51% no-repeat,

    radial-gradient(
      circle at 100% 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 100% / 51% 51% no-repeat;
}

.guide-price .counseling-label {
  --cut: 9px;

  position: relative;
  width: 190px;
  max-width: 80%;
  margin: 0 auto;
  padding: 11px 20px 12px;

  color: #fff;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  letter-spacing: .08em;

  background: linear-gradient(
    90deg,
    #83520c 0%,
    #a76b11 18%,
    #c58b25 42%,
    #d1a049 52%,
    #b77b18 76%,
    #81500a 100%
  );

  /* 外側の四隅を丸く切り込む */
  -webkit-mask:
    radial-gradient(circle at 0 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 100% / 51% 51% no-repeat;

  mask:
    radial-gradient(circle at 0 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%,
      transparent 0 var(--cut),
      #000 calc(var(--cut) + 1px)
    ) 100% 100% / 51% 51% no-repeat;
}


/* 白い内枠 */
.guide-price .counseling-label::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;

  background: #fff8e8;

  --cut-inner: 6px;

  -webkit-mask:
    radial-gradient(circle at 0 0,
      transparent 0 var(--cut-inner),
      #000 calc(var(--cut-inner) + 1px)
    ) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0,
      transparent 0 var(--cut-inner),
      #000 calc(var(--cut-inner) + 1px)
    ) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%,
      transparent 0 var(--cut-inner),
      #000 calc(var(--cut-inner) + 1px)
    ) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%,
      transparent 0 var(--cut-inner),
      #000 calc(var(--cut-inner) + 1px)
    ) 100% 100% / 51% 51% no-repeat;
}


/* 白枠の内側を再び金色で埋める */
.guide-price .counseling-label::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;

  background: linear-gradient(
    90deg,
    #83520c 0%,
    #a76b11 18%,
    #c58b25 42%,
    #d1a049 52%,
    #b77b18 76%,
    #81500a 100%
  );

  --cut-inner2: 5px;

  -webkit-mask:
    radial-gradient(circle at 0 0,
      transparent 0 var(--cut-inner2),
      #000 calc(var(--cut-inner2) + 1px)
    ) 0 0 / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0,
      transparent 0 var(--cut-inner2),
      #000 calc(var(--cut-inner2) + 1px)
    ) 100% 0 / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%,
      transparent 0 var(--cut-inner2),
      #000 calc(var(--cut-inner2) + 1px)
    ) 0 100% / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%,
      transparent 0 var(--cut-inner2),
      #000 calc(var(--cut-inner2) + 1px)
    ) 100% 100% / 51% 51% no-repeat;
}


.page-id-854 .guide-price .time-price{
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

.guide-price-message {
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

/* ==================================================
   ご利用案内その他
================================================== */
.guide-other .swell-block-column {
	border: 1px solid
		color-mix(in srgb, var(--color_main) 40%, transparent);
	border-radius: 8px;
	overflow: hidden;
	padding: 24px 24px 18px;
}
.guide-other .wp-block-media-text{
	gap: 0.5rem;
}

/* ==================================================
   スマホ：ご予約からご来室までの流れ
   右向き矢印をカラム下の下向き三角へ変更
================================================== */

@media (max-width: 767px) {
  .page-id-854 .guide-flow .swell-block-columns__inner {
    row-gap: 34px;
  }

  .page-id-854 .guide-flow .swell-block-column:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -10px;
    left: 50%;

    width: 0;
    height: 0;

    color: transparent;
    font-size: 0;

    border-top: 9px solid var(--color_text);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;

    content: "";
    transform: translateX(-50%);
  }
	.page-id-854 .guide-flow h3 {
		font-size: 1.4em!important;
		}

}