@charset "UTF-8";

/* ==================================================
   カウンセラー紹介
================================================== */
.page-id-1527 .l-mainContent__inner>.post_content {
  margin: 0;
}

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

@media (min-width: 1025px) {

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

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

/* H1：大阪夫婦相談室のカウンセラー */
.page-id-1527 .post_content .counselor-fv h1.counselor-page-title {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 .5em;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  letter-spacing: normal;
}

/* テーマ標準の見出し装飾を解除 */
.page-id-1527 .post_content .counselor-fv h1.counselor-page-title::before,
.page-id-1527 .post_content .counselor-fv h1.counselor-page-title::after {
  content: none;
}

/* H1直下のライン画像 */
.page-id-1527 .post_content .counselor-fv figure.counselor-title-line {
  float: none;
  width: 300px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  line-height: 1;
}

.page-id-1527 .post_content .counselor-fv .counselor-title-line img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 旧H1 → p：女性カウンセラー */
.page-id-1527 .post_content .counselor-fv p.counselor-fv-catch {
  font-family: "Noto Serif JP", "Yu Mincho",
    "Hiragino Mincho ProN", serif;
  font-size: 3em;
  font-weight: 700;
  line-height: 1.2;
}

/* スマホ */
@media (max-width: 767px) {
  .page-id-1527 .post_content .counselor-fv h1.counselor-page-title {
    font-size: 14px !important;
  }

  .page-id-1527 .post_content .counselor-fv p.counselor-fv-catch {
    font-size: clamp(2rem, 10vw, 2.7rem) !important;
  }

}

/* ==================================================
   counselor-about
   四隅切り抜き + メインカラー枠
================================================== */
.counselor-about :is(
  .swell-block-column,
  .counselor-all-senmon
) {
  --counselor-color: var(--color_main);
  --counselor-bg: #fefbf7;
  --counselor-cut: 8px;
  --counselor-border: 1.5px;

  --counselor-border-color: color-mix(
    in srgb,
    var(--counselor-color) 45%,
    transparent
  );

  position: relative;

  border: none;
  border-radius: 0;

  padding: 20px 16px !important;
  background: var(--counselor-bg);

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

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

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

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

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

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

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

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

/* ==================================================
   枠線
================================================== */
.counselor-about :is(
  .swell-block-column,
  .counselor-all-senmon
)::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: 5;

  background:

    /* 左上 */
    radial-gradient(
      circle at 0 0,
      transparent 0 var(--counselor-cut),
      var(--counselor-border-color)
        var(--counselor-cut)
        calc(var(--counselor-cut) + var(--counselor-border)),
      transparent
        calc(var(--counselor-cut) + var(--counselor-border) + .5px)
    ) top left /
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      no-repeat,

    /* 右上 */
    radial-gradient(
      circle at 100% 0,
      transparent 0 var(--counselor-cut),
      var(--counselor-border-color)
        var(--counselor-cut)
        calc(var(--counselor-cut) + var(--counselor-border)),
      transparent
        calc(var(--counselor-cut) + var(--counselor-border) + .5px)
    ) top right /
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      no-repeat,

    /* 左下 */
    radial-gradient(
      circle at 0 100%,
      transparent 0 var(--counselor-cut),
      var(--counselor-border-color)
        var(--counselor-cut)
        calc(var(--counselor-cut) + var(--counselor-border)),
      transparent
        calc(var(--counselor-cut) + var(--counselor-border) + .5px)
    ) bottom left /
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      no-repeat,

    /* 右下 */
    radial-gradient(
      circle at 100% 100%,
      transparent 0 var(--counselor-cut),
      var(--counselor-border-color)
        var(--counselor-cut)
        calc(var(--counselor-cut) + var(--counselor-border)),
      transparent
        calc(var(--counselor-cut) + var(--counselor-border) + .5px)
    ) bottom right /
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      calc(var(--counselor-cut) + var(--counselor-border) + 1px)
      no-repeat,

    /* 上 */
    linear-gradient(
      var(--counselor-border-color),
      var(--counselor-border-color)
    ) top center /
      calc(100% - var(--counselor-cut) * 2)
      var(--counselor-border)
      no-repeat,

    /* 下 */
    linear-gradient(
      var(--counselor-border-color),
      var(--counselor-border-color)
    ) bottom center /
      calc(100% - var(--counselor-cut) * 2)
      var(--counselor-border)
      no-repeat,

    /* 左 */
    linear-gradient(
      var(--counselor-border-color),
      var(--counselor-border-color)
    ) center left /
      var(--counselor-border)
      calc(100% - var(--counselor-cut) * 2)
      no-repeat,

    /* 右 */
    linear-gradient(
      var(--counselor-border-color),
      var(--counselor-border-color)
    ) center right /
      var(--counselor-border)
      calc(100% - var(--counselor-cut) * 2)
      no-repeat;
}
/* text-media gap小さく */
.gap-mini .wp-block-media-text{
  gap: .5rem;
}
/* text-media 画像小さく */
.image-size-mini .wp-block-media-text__media img{
  width: 75%;
  margin-left: auto;
}

/* ==================================================
   全員が専門教育・研修を修了
================================================== */

.counselor-about .counselor-all-senmon {
  --counselor-bg: var(--color_link);

  --counselor-border-color: #CFAA6A;

  background: var(--color_link);
  color: #fff;
}
/* all-senmon の金枠を内側へ */
.counselor-about .counselor-all-senmon::before {
  inset: 8px;
}

/* 見出し・本文も白 */
.counselor-about .counselor-all-senmon h2{
  color: #CFAA6A;
}
.counselor-about .counselor-all-senmon p {
  color: #fff;
}

/* ==================================================
   counselor-member
   カウンセラーカード
================================================== */

.counselor-member .swell-block-column {
  position: relative;
  border: 1px solid
    color-mix(in srgb, var(--color_main) 40%, transparent);
  border-radius: 8px;
  padding: 18px 16px;
  box-sizing: border-box;
}
.counselor-member
.swell-block-column
h3 {
  color: var(--color_link);

  font-family:
    "Noto Serif JP",
    "Hiragino Mincho ProN",
    serif;
}
.counselor-member
.wp-block-media-text__content
> p:last-of-type {
  font-size: clamp(11px, 3.4vw, 13px) !important;
}

  /* 画像枠を短い画像の比率に統一 */
  .counselor-member
  .wp-block-media-text__media {
    width: 100%;
    aspect-ratio: 11 / 12;
    overflow: hidden;
  }

  .counselor-member
  .wp-block-media-text__media img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center 35%;
  }

@media (max-width: 767px) {
.counselor-member .swell-block-column {
  padding: 4px;
}
.counselor-member .swell-block-column .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content{
  padding: .5rem!important;
}

.counselor-member .swell-block-column h3{
  letter-spacing: 0.01em;
}
}
/* ==================================================
   counselor-promise
   カラム間の縦線
================================================== */

.counselor-promise .swell-block-column {
  position: relative;
}
@media (min-width: 960px) {
  .counselor-promise .swell-block-column:last-child {
    display: none;
  }
}

/* 最後の2つ以外に縦線 */
.counselor-promise
.swell-block-column:not(:nth-last-child(-n + 2))::after {
  content: "";
  position: absolute;
  top: 10%;
  right: -4px;
  width: 1px;
  height: 80%;
  background: color-mix(in srgb, var(--color_main) 45%, transparent);
}

/* 本文 */
.counselor-promise
.swell-block-column
> p {
  letter-spacing: .01em;
}

@media (max-width: 959px) {
  .counselor-promise .swell-block-column::after {
    display: none;
  }

  .counselor-promise .swell-block-column:nth-child(1)::after,
  .counselor-promise .swell-block-column:nth-child(3)::after,
  .counselor-promise .swell-block-column:nth-child(5)::after {
    content: "";
    display: block;
    position: absolute;
    top: 10%;
    right: -4px;
    width: 1px;
    height: 80%;
    background: color-mix(in srgb, var(--color_main) 45%, transparent);
  }
}

/* ==================================================
   資格カードの画像位置・比率調整
================================================== */

/* 上段2カード：35%指定を下段と同じ30%に揃える */
.page-id-1527
.counselor-about
.swell-block-columns.image-size-mini
.wp-block-media-text {
  grid-template-columns: 30% minmax(0, 1fr) !important;
}

/* margin-leftではなく左右autoで中央配置 */
.page-id-1527
.counselor-about
.image-size-mini
.wp-block-media-text__media img {
  display: block;
  margin-inline: auto;
}

/* 紺色のJMCブロック */
.page-id-1527
.counselor-about
.counselor-all-senmon
> .wp-block-media-text__media {
  width: min(100%, 150px);
  margin-inline: auto;
}

.page-id-1527
.counselor-about
.counselor-all-senmon
> .wp-block-media-text__media img {
  display: block;
  width: min(100%, 130px);
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .page-id-1527 .counselor-fv .is-style-broken .wp-block-media-text__content{
    margin-top: 0!important;
  }

  /* スマホ：資格カード画像を中央配置 */
  .page-id-1527
  .counselor-about
  .image-size-mini
  .wp-block-media-text__media {
    margin-inline: auto;
  }

  /* 紺色ブロックのロゴをさらに小さく */
  .page-id-1527
  .counselor-about
  .counselor-all-senmon
  > .wp-block-media-text__media {
    width: 115px;
    margin: 0 auto 14px !important;
  }

  .page-id-1527
  .counselor-about
  .counselor-all-senmon
  > .wp-block-media-text__media img {
    width: 105px;
    margin-inline: auto;
  }
    .page-id-1527 .counselor-member .wp-block-media-text__media{
      padding: 1rem;
    }
}