@charset "UTF-8";

/* ========================================
   私たちについて
======================================== */
.page-id-549 .l-mainContent__inner>.post_content {
	margin: 0;
}

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

@media (min-width: 1025px) {

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

	/* FV右側の画像だけ拡大 */
	.page-id-549 .about-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-549 .about-fv .wp-block-media-text .wp-block-media-text__content {
		position: relative;
		z-index: 1;
	}
		.fv-achievements{
		z-index: 1;
	}
}

/* ========================================
   about-values 大切にしていること6ポイント
======================================== */

.about-values .swell-block-column {
  border: 1px solid var(--color_main) !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 20px;
  box-shadow: 0 8px 24px color-mix(
    in srgb,
    var(--color_main) 10%,
    transparent
  );
}

.about-values .swell-block-columns__inner {
  counter-reset: values-number;
}


/* ----------------------------------------
   画像
---------------------------------------- */

.about-values .wp-block-media-text__media {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color_main);
  box-shadow: 0 8px 24px color-mix(
    in srgb,
    var(--color_main) 10%,
    transparent
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


/* 丸の大きさは変えず、中の画像だけ小さく */
.about-values .wp-block-media-text__media img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  border: none;
  border-radius: 50%;
}

/* ----------------------------------------
   見出し
---------------------------------------- */

.about-values h3 {
  position: relative!important;
  color: var(--color_link)!important;
  padding-left: 1.5em!important;
}


/* 1. 2. 3. ... */
.about-values h3::before {
  counter-increment: values-number;
  content: counter(values-number) "."!important;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color_link);
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
	background: none!important;
}
/* SP */

@media (max-width: 767px) {
	
.about-values h3 {
	font-size: 1.4em;
}
.about-values p {
	font-size: clamp(11px, 3.4vw, 13px) !important;

}

}
/* ========================================
   about-philosophy
======================================== */

.about-philosophy h3 {
  color:#385943!important;
}

.about-philosophy .swell-block-column p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* カラム横余白を詰める */
.about-philosophy .swell-block-columns {
  --swl-clmn-mrgn--x: 0.5rem;
}

/* SP */

@media (max-width: 767px) {
	
.about-philosophy .swell-block-column p {
	font-size: clamp(11px, 3.4vw, 13px) !important;

}

}

/* ========================================
   about-flow カウンセリングの流れ
======================================== */
.about-flow {
  background: transparent;
  border: none;
  border-radius: 0;
}

/* ナンバリング初期化 */
.about-flow .swell-block-columns__inner {
  counter-reset: flow-number;
}

.about-flow .swell-block-column {
  position: relative;
  counter-increment: flow-number;
  background: #fff !important;
  border: none !important;
  margin-top: 20px;
  padding: 28px 18px 20px;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(56, 89, 67, 0.10);
}

.post_content .about-flow .swell-block-column:first-child {
  margin-top: 20px !important;
}
/* ========================================
   ナンバリング
======================================== */
.about-flow .swell-block-column::before {
  content: counter(flow-number);
  position: absolute;
  top: 15px;
  left: 20px;
  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: 16px;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
}

/* ========================================
   メディアとタイトル
======================================== */
.about-flow .wp-block-media-text{
	gap: .5rem;
}
.about-flow .wp-block-media-text h3{
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-size: 1.5em;
	color: var(--color_link);
}
/* ========================================
   画像
======================================== */

.about-flow .wp-block-media-text__media {
  aspect-ratio: 1 / 1;

  border: 1px solid var(--color_main);
  border-radius: 50%;

  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-flow .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;

  object-fit: contain;

  border-radius: 50%;
}

/* ========================================
   カード間の「▶」
======================================== */

.about-flow .swell-block-column::after {
  content: "▶";
  position: absolute;
  top: 50%;
  right: -20px;
  width: auto;
  height: auto;

  color: var(--color_main);
  font-size: 14px;
  line-height: 1;

  transform: translateY(-50%);
  z-index: 3;
}


/* 3つ目・最後のカードには矢印なし */
.about-flow .swell-block-column:nth-child(3)::after,
.about-flow .swell-block-column:last-child::after {
  display: none;
}


/* ========================================
   TAB
======================================== */

@media (max-width: 959px) {
	
  /* 矢印を下向きへ */
  .about-flow .swell-block-column::after {
    content: "▼";
    top: auto;
    right: auto;
    bottom: -40px;
    left: 50%;

    width: auto;
    height: auto;
    border: none;

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

    transform: translateX(-50%);
  }

  /* 最後のカラムには表示しない */
  .about-flow .swell-block-column:last-child::after {
    content: none;
  }

  /* PCで消した3番目をSPでは復活 */
  .about-flow .swell-block-column:nth-child(3)::after {
    display: block;
  }

  .about-flow .swell-block-column:last-child {
    margin-bottom: 0;
  }

  .about-flow .swell-block-column:last-child::after {
    display: none;
  }
}
/* ========================================
   SP
======================================== */

@media (max-width: 767px) {

  .about-flow .swell-block-columns__inner {
    gap: 8px !important;
  }

  .about-flow .swell-block-column {
    margin-top: 25px;
    margin-bottom: 30px;

    padding: 25px 15px 18px;
  }

}