@charset "UTF-8";

/*
 * お悩みから探すページ
 * URL: /concerns/
 * body class: .page-id-449
 */

.page-id-449 .l-mainContent__inner > .post_content {
  margin: 0;
}
/* ==================================================
   メインビジュアル画像
================================================== */

@media (min-width: 1025px) {

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

	/* FV右側の画像だけ拡大 */
	.page-id-449 .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-449 .about-fv .wp-block-media-text .wp-block-media-text__content {
		position: relative;
		z-index: 1;
	}
}
/* H1：大阪の夫婦のお悩み別カウンセリング */
.page-id-449 .post_content h1.concerns-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-449 .post_content h1.concerns-page-title::before,
.page-id-449 .post_content h1.concerns-page-title::after {
  content: none;
}

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

.page-id-449 .about-fv .concerns-title-line img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 旧H1 → p：夫婦のお悩みから探す */
.page-id-449 .post_content p.concerns-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-449 .post_content h1.concerns-page-title {
    font-size: 14px !important;
  }

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

}
/* ========================================
   悩み案内：両サイドの葉
======================================== */

.concerns-most .swell-block-fullWide__inner {
  position: relative;
  overflow: hidden;
}

/* テキストを葉より前面へ */
.concerns-most
.swell-block-fullWide__inner
> .wp-block-group {
  position: relative;
  z-index: 2;
}

/* 葉の共通設定 */
.concerns-most .swell-block-fullWide__inner::before,
.concerns-most .swell-block-fullWide__inner::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 1;
  width: clamp(100px, 14vw, 190px);
  height: 90%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
  pointer-events: none;
}

/* 左側 */
.concerns-most .swell-block-fullWide__inner::before {
  left: 0;
  background-image: url("https://osaka-fufu.jp/wp-content/uploads/2026/09/leaf-left.png");
}

/* 右側 */
.concerns-most .swell-block-fullWide__inner::after {
  right: 0;
  background-image: url("https://osaka-fufu.jp/wp-content/uploads/2026/09/leaf-right.png");
}

/* スマホ */
@media (max-width: 767px) {
  .concerns-most .swell-block-fullWide__inner::before,
  .concerns-most .swell-block-fullWide__inner::after {
    width: 75px;
    height: 75%;
  }

  /* 葉と文章が重ならないようにする */
  .concerns-most
  .swell-block-fullWide__inner
  > .wp-block-group {
    padding-right: 35px;
    padding-left: 35px;
  }
	.concerns-most p{
		font-size: clamp(11px, 3.4vw, 13px) !important;
	}
}

/* ==================================================
   お悩みカード
================================================== */

.page-id-449 .concerns-grid .concerns-card {
  position: relative;
  padding: 5px 10px;
  border: 1px solid #ded5c9;
  border-radius: 8px;
}

.page-id-449 .concerns-grid .concerns-card .wp-block-media-text {
  gap: .5rem;
}

.page-id-449 .concerns-card h3 {
  margin: 0;
	margin-bottom: .5em;
  padding: 0;
  color: var(--color_text);
  font-size: clamp(23px, 1.9vw, 31px);
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

/* SWELL既存のh3装飾を非表示 */
.page-id-449 .post_content .concerns-card h3:where(
  :not([class^="swell-block-"])
  :not(.faq_q)
  :not(.p-postList__title)
)::before {
  display: none !important;
  content: none !important;
}

.page-id-449 .concerns-card .swell-block-button {
  width: auto !important;
  margin-top: 15px;
  margin-right: 0;
  margin-left: auto;
}

.page-id-449 .concerns-card .swell-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  color: var(--color_text) !important;
  background: transparent !important;
  border: 1px solid var(--color_text) !important;
  border-radius: 9999px;
  box-shadow: none !important;
  transition: opacity .25s ease, transform .25s ease;
}

@media (hover: hover) {
  .page-id-449 .concerns-card .swell-block-button__link:hover {
    opacity: .65;
    transform: translateY(-1px);
  }
}

/* ==================================================
   どのテーマにも当てはまらない方へ
================================================== */

.page-id-449 .concerns-unclear > .swell-block-columns__inner {
	align-items: center;
}
.page-id-449 .concerns-unclear .swell-block-columns__inner .no-theme{
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}


/* ==================================================
   タブレット
================================================== */

@media (max-width: 1024px) {
  .page-id-449 .concerns-grid.swell-block-columns {
    --swl-clmn-mrgn--x: .5rem;
    --swl-clmn-mrgn--y: .5rem;
  }

  .page-id-449 .concerns-grid .swell-block-columns__inner {
    justify-content: space-between;
  }

}

/* ==================================================
   スマホ
================================================== */

@media (max-width: 767px) {
  .page-id-449 .concerns-grid .swell-block-columns__inner {
    row-gap: 2rem;
  }

  .page-id-449 .concerns-grid .concerns-card {
    padding: 0;
  }
	
.page-id-449 .concerns-card h3 {
	font-size: 2em;
	text-align: center;
	margin-bottom: .5em;
}


	  /* カード本文の下に余白 */
  .page-id-449 .concerns-grid .concerns-card p {
		font-size: clamp(13px, 3.8vw, 15px) !important;
    margin-bottom: 14px !important;
  }

  /* カードボタンを中央寄せ */
  .page-id-449 .concerns-grid .concerns-card .swell-block-button {
    width: fit-content !important;
    margin: 18px auto 0 !important;
  }

	  .page-id-449 .concerns-unclear {
    clear: both;
    margin-top: 32px;
  }

  /* 外側2カラムを上下にする */
  .page-id-449 .concerns-unclear > .swell-block-columns__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: 22px;
  }

  .page-id-449 .concerns-unclear > .swell-block-columns__inner > .swell-block-column {
    width: 100% !important;
    margin-left: 0;
  }

  /* 左側：テキストを先、花瓶画像を下にする */
  .page-id-449 .concerns-unclear .wp-block-media-text.is-style-broken {
    display: flex !important;
    flex-direction: column-reverse;
    gap: 18px;
    position: static;
    overflow: visible;
  }

	  .page-id-449
  .concerns-unclear
  .wp-block-media-text.is-style-broken
  > .wp-block-media-text__content {
    position: static;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    transform: none !important;
  }


  .page-id-449 .concerns-unclear .wp-block-media-text__content,
  .page-id-449 .concerns-unclear .wp-block-media-text__media {
    width: 100%;
    position: static;
    margin: 0 auto !important;
    transform: none !important;
  }

  /* タイトルと文章の横並びを解除 */
  .page-id-449 .concerns-unclear .wp-block-media-text__content > .wp-block-group {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-id-449 .concerns-unclear .wp-block-media-text__content h2 {
    width: 100%;
		font-size: 2em;
    margin-bottom: 0 !important;
  }

  .page-id-449 .concerns-unclear .wp-block-media-text__content p {
    width: 100%;
		font-size: clamp(13px, 3.8vw, 15px) !important;
    margin: 0;
  }

  .page-id-449 .concerns-unclear .wp-block-media-text__media {
    max-width: 190px;
    margin: 0 auto;
  }

  .page-id-449 .concerns-unclear .wp-block-media-text__media img {
    display: block;
    width: 80%;
    height: auto;
		margin: auto;
  }

  /* 右側の案内文とボタン */
  .page-id-449 .concerns-unclear > .swell-block-columns__inner > .swell-block-column:last-child {
    text-align: center;
		font-size: clamp(13px, 3.8vw, 15px) !important;
  }

  .page-id-449 .concerns-unclear .swell-block-button {
    margin-inline: auto;
  }
}