@charset "UTF-8";

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

@media (min-width: 1025px) {

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

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

/* ========================================
Q&A FV
   h1 左上「何でもかんでも」画像
================================================== */

.page-id-1549 .l-mainContent__inner > .post_content {
  margin: 0;
}
@media (min-width: 601px) and (max-width: 960px) {
  .page-id-1549 .qa-fv {
    padding-top: 2em !important;
  }
}
/* Q&A：タブレット〜PCの見出しを可変にする */
@media (min-width: 601px) {
  .page-id-1549 .qa-fv h1 {
    font-size: clamp(2rem, 4.3vw, 4em) !important;
    white-space: nowrap;
  }
}
.qa-fv h1 {
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.qa-fv h1::before {
  content: "" !important;
  position: absolute;

  width: clamp(84px, 9vw, 130px);
  height: clamp(84px, 9vw, 130px);

  background: url("https://osaka-fufu.jp/wp-content/uploads/2026/09/nandemokandemo.png")
    no-repeat center / contain;

  left: -25px;
  top: -45px;

  pointer-events: none;
  z-index: 1;
}

/* ========================================
   QA FV 50バッジ
======================================== */

.qa-fv .wp-block-media-text {
  overflow: visible;
}

.qa-fv .wp-block-media-text__media {
  position: relative;
  overflow: visible;
}

.qa-fv .wp-block-media-text__media::before {
  content: "";
  position: absolute;

  width: 140px;
  height: 140px;

  background: url("https://osaka-fufu.jp/wp-content/uploads/2026/09/qa-fifty.png")
    no-repeat center / contain;
  left: 0;
  bottom: 15px;

  z-index: 10;
  pointer-events: none;
}

.qa-fv .wp-block-media-text__media img {
  display: block;
}

/* ==================================================
   Q&A カテゴリーカード
   四隅切り抜き + カーブまで見える枠
================================================== */

.qa-category-card {
  --qa-color: #c96f86;

  --qa-card-bg: #fefbf7;
  --qa-cut: 8px;
  --qa-border: 1.5px;

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

  position: relative;

  border: none;
  border-radius: 0;

  padding: 24px 16px 18px !important;

  background: var(--qa-card-bg);

  /*
   四隅を内側へ丸く切り抜く
  */
  -webkit-mask:
    radial-gradient(
        circle at 0 0,
        transparent 0 var(--qa-cut),
        #000 calc(var(--qa-cut) + 0.5px)
      )
      0 0 / 51% 51% no-repeat,
    radial-gradient(
        circle at 100% 0,
        transparent 0 var(--qa-cut),
        #000 calc(var(--qa-cut) + 0.5px)
      )
      100% 0 / 51% 51% no-repeat,
    radial-gradient(
        circle at 0 100%,
        transparent 0 var(--qa-cut),
        #000 calc(var(--qa-cut) + 0.5px)
      )
      0 100% / 51% 51% no-repeat,
    radial-gradient(
        circle at 100% 100%,
        transparent 0 var(--qa-cut),
        #000 calc(var(--qa-cut) + 0.5px)
      )
      100% 100% / 51% 51% no-repeat;

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

/* ==================================================
   枠線
================================================== */

.qa-category-card::before {
  content: "";
  position: absolute;
  inset: 0;

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

  background:

    /* 左上カーブ */
    radial-gradient(
        circle at 0 0,
        transparent 0 var(--qa-cut),
        var(--qa-border-color) var(--qa-cut)
          calc(var(--qa-cut) + var(--qa-border)),
        transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
      )
      top left / calc(var(--qa-cut) + var(--qa-border) + 1px)
      calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
    /* 右上カーブ */
      radial-gradient(
        circle at 100% 0,
        transparent 0 var(--qa-cut),
        var(--qa-border-color) var(--qa-cut)
          calc(var(--qa-cut) + var(--qa-border)),
        transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
      )
      top right / calc(var(--qa-cut) + var(--qa-border) + 1px)
      calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
    /* 左下カーブ */
      radial-gradient(
        circle at 0 100%,
        transparent 0 var(--qa-cut),
        var(--qa-border-color) var(--qa-cut)
          calc(var(--qa-cut) + var(--qa-border)),
        transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
      )
      bottom left / calc(var(--qa-cut) + var(--qa-border) + 1px)
      calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
    /* 右下カーブ */
      radial-gradient(
        circle at 100% 100%,
        transparent 0 var(--qa-cut),
        var(--qa-border-color) var(--qa-cut)
          calc(var(--qa-cut) + var(--qa-border)),
        transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
      )
      bottom right / calc(var(--qa-cut) + var(--qa-border) + 1px)
      calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
    /* 上 */ linear-gradient(var(--qa-border-color), var(--qa-border-color)) top
      center / calc(100% - var(--qa-cut) - var(--qa-cut)) var(--qa-border)
      no-repeat,
    /* 下 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
      bottom center / calc(100% - var(--qa-cut) - var(--qa-cut))
      var(--qa-border) no-repeat,
    /* 左 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
      center left / var(--qa-border) calc(100% - var(--qa-cut) - var(--qa-cut))
      no-repeat,
    /* 右 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
      center right / var(--qa-border) calc(100% - var(--qa-cut) - var(--qa-cut))
      no-repeat;
}
/* ==================================================
   05 + 画像を1枚のカード風に（PCのみ）
================================================== */

@media (min-width: 768px) {
  /* ----------------------------------
   05：左側だけ切り欠き
---------------------------------- */

  .qa-category-card.is-future {
    -webkit-mask:
      radial-gradient(
          circle at 0 0,
          transparent 0 var(--qa-cut),
          #000 calc(var(--qa-cut) + 0.5px)
        )
        0 0 / 51% 51% no-repeat,
      radial-gradient(
          circle at 0 100%,
          transparent 0 var(--qa-cut),
          #000 calc(var(--qa-cut) + 0.5px)
        )
        0 100% / 51% 51% no-repeat,
      linear-gradient(#000 0 0) right / 51% 100% no-repeat;

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

  /* 05は右線なし */
  .qa-category-card.is-future::before {
    background:

		/* 左上 */
      radial-gradient(
          circle at 0 0,
          transparent 0 var(--qa-cut),
          var(--qa-border-color) var(--qa-cut)
            calc(var(--qa-cut) + var(--qa-border)),
          transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
        )
        top left / calc(var(--qa-cut) + var(--qa-border) + 1px)
        calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
      /* 左下 */
        radial-gradient(
          circle at 0 100%,
          transparent 0 var(--qa-cut),
          var(--qa-border-color) var(--qa-cut)
            calc(var(--qa-cut) + var(--qa-border)),
          transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
        )
        bottom left / calc(var(--qa-cut) + var(--qa-border) + 1px)
        calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
      /* 上 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
        top / 100% var(--qa-border) no-repeat,
      /* 下 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
        bottom / 100% var(--qa-border) no-repeat,
      /* 左 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
        left center / var(--qa-border) calc(100% - var(--qa-cut) * 2) no-repeat;
  }

  /* ==================================================
   画像側
================================================== */

  .is-image {
    --qa-color: #e9822c;
    --qa-cut: 8px;
    --qa-border: 1.5px;

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

    position: relative;

    padding:  24px 18px !important;
    background: #fefbf7;

    /* 右上・右下だけ切り欠き */
    -webkit-mask:
      linear-gradient(#000 0 0) left / 51% 100% no-repeat,
      radial-gradient(
          circle at 100% 0,
          transparent 0 var(--qa-cut),
          #000 calc(var(--qa-cut) + 0.5px)
        )
        100% 0 / 51% 51% no-repeat,
      radial-gradient(
          circle at 100% 100%,
          transparent 0 var(--qa-cut),
          #000 calc(var(--qa-cut) + 0.5px)
        )
        100% 100% / 51% 51% no-repeat;

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

    overflow: hidden;
  }

  /* 画像側の枠：右＋上下 */
  .is-image::before {
    content: "";

    position: absolute;
    inset: 0;

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

    background:

		/* 右上 */
      radial-gradient(
          circle at 100% 0,
          transparent 0 var(--qa-cut),
          var(--qa-border-color) var(--qa-cut)
            calc(var(--qa-cut) + var(--qa-border)),
          transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
        )
        top right / calc(var(--qa-cut) + var(--qa-border) + 1px)
        calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
      /* 右下 */
        radial-gradient(
          circle at 100% 100%,
          transparent 0 var(--qa-cut),
          var(--qa-border-color) var(--qa-cut)
            calc(var(--qa-cut) + var(--qa-border)),
          transparent calc(var(--qa-cut) + var(--qa-border) + 0.5px)
        )
        bottom right / calc(var(--qa-cut) + var(--qa-border) + 1px)
        calc(var(--qa-cut) + var(--qa-border) + 1px) no-repeat,
      /* 上 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
        top / 100% var(--qa-border) no-repeat,
      /* 下 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
        bottom / 100% var(--qa-border) no-repeat,
      /* 右 */ linear-gradient(var(--qa-border-color), var(--qa-border-color))
        right center / var(--qa-border) calc(100% - var(--qa-cut) * 2) no-repeat;
  }

  /* 絵を全面表示 */
  .is-image .wp-block-image {
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .is-image .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* ==================================================
   05 + 画像
   この2カラム間だけgapをなくす
================================================== */

  .qa-category-card.is-future + .is-image {
    margin-left: 0 !important;

    /* 消した0.5rem分を画像側へ足す */
    width: 33.33% !important;
    flex-basis: 33.33% !important;
  }
}

/* ----------------------------------
   カテゴリーカラー定義
---------------------------------- */

/* 01 夫婦のお悩み・相談内容：ピンク */
.qa-category-card.is-concerns {
  --qa-color: #d6788d;
}

/* 02 相談方法・予約について：ブルー */
.qa-category-card.is-reservation {
  --qa-color: #4e8fc8;
}

/* 03 夫婦関係：グリーン */
.qa-category-card.is-relationship {
  --qa-color: #7da34b;
}

/* 04 子ども・家族：パープル */
.qa-category-card.is-family {
  --qa-color: #8b73b6;
}

/* 05 離婚・再構築・これから：オレンジ */
.qa-category-card.is-future {
  --qa-color: #e9822c;
}

/* ==================================================
   カテゴリー番号
================================================== */

.qa-category-card .qa-category-number,
.qa-category-card #qa-category-number,
.qa-category-card #-qa-category-number {
  color: var(--qa-color);

  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: clamp(2.5rem, 4vw, 3.4rem) !important;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.2em !important;
}

/* ==================================================
    qa-category h3
================================================== */

.qa-category-card h3 {
  font-size: 1.6em;
}

/* ==================================================
   「10のQ&A」などカテゴリー色テキスト
================================================== */

.qa-category-card .qa-category-color-text {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  color: var(--qa-color);
  border-bottom: 1px solid var(--qa-color);
  padding-bottom: 4px;
}

/* ==================================================
   チェックリスト
================================================== */

.qa-category-card .is-style-check_list li {
  letter-spacing: 0.01em;
}

.qa-category-card .is-style-check_list li::before {
  color: #fff !important;
  background-color: var(--qa-color) !important;

  border-radius: 50%;

  width: 1.25em;
  height: 1.25em;

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

  font-size: 0.72em;
  line-height: 1;
  transform: translateY(3px);
}

/* ==================================================
   カテゴリーアイコン
================================================== */

.qa-category-card .qa-category-icon {
  position: absolute;

  top: 18px;
  right: 35px;

  width: 70px;
  max-width: 20%;

  margin: 0;

  z-index: 1;
}

.qa-category-card .qa-category-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================
   SP
================================================== */

@media (max-width: 600px) {
  .qa-category-card {
    padding: 20px 18px 16px !important;
  }

  .qa-category-card .qa-category-number,
  .qa-category-card #qa-category-number,
  .qa-category-card #-qa-category-number {
    font-size: 2.5rem !important;
  }

  .qa-category-card .qa-category-icon {
    top: 16px;
    right: 16px;
    width: 58px;
  }
}

/* ==================================================
   QA MORE
================================================== */

.qa-more {
  border: 1px solid color-mix(in srgb, var(--color_main) 40%, transparent);

  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  padding-left: 18px;
}

/* ==================================================
   右側 CTA
================================================== */

.qa-more .qa-cta {
  background: color-mix(in srgb, var(--color_main) 8%, #fff);

  border: none;
  border-radius: 8px;

  padding: 24px;
}

/* ==================================================
   スマホ表示の調整
================================================== */

@media (max-width: 767px) {
		/* FVのブロークングリッドの重なりを解除 */
	.page-id-1549 .qa-fv .wp-block-media-text.is-style-broken .wp-block-media-text__content {
		margin-top: 0 !important;
	}

  /* インラインの font-size: 4em を上書き */
  .page-id-1549 .qa-fv h1 {
    font-size: clamp(2.15rem, 10.5vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }

  /* 「何でもかんでも」の吹き出しを画面内へ収める */
  .page-id-1549 .qa-fv h1::before {
    top: -26px;
    left: 0;
    width: 84px;
    height: 84px;
  }

  /* FV右下「全部で50問」ラベルを拡大 */
  .page-id-1549 .qa-fv .wp-block-media-text__media::before {
    right: 6px;
		left: initial;
    bottom: -2px;
    width: 94px;
    height: 94px;
  }

  /* 最後の風景画像を非表示にし、不要な6枠目をなくす */
  .page-id-1549 .qa-category-card.is-image {
    display: none !important;
  }
  /* 05はPC専用の連結指定が外れるため、1〜4と同じ共通枠になる */
  /* 「まだ聞きたいことがありますか？」のコーヒー画像 */
  .page-id-1549 .qa-more .wp-block-media-text__media {
    width: min(42vw, 145px);
    margin: 14px auto 4px;
  }

  .page-id-1549 .qa-more .wp-block-media-text__media img {
    display: block;
    width: 100%;
    height: auto;
  }
}