@charset "UTF-8";
/* ===========================================
 * fonts
 * ===========================================
*/
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");

/* ===========================================
 * Variable
 * ===========================================
*/
/* -------------------------------------------
 * breakpoint
*/
/* -------------------------------------------
 * max-width
*/
/* -------------------------------------------
 * color
*/
/* -------------------------------------------
 * svg
*/
/* ===========================================
 * Utility
 * ===========================================
*/
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
/* -------------------------------------------
 * font-size
*/
/* $base-font-sizeを基準に$sizeを%で指定 */
/* $base-font-sizeを基準に$sizeをremで指定 */
/* $base-font-sizeを基準に$sizeをpxで指定 */
/* $base-font-sizeを基準に$sizeをemで指定 */
/* $base-font-sizeを基準に$sizeをvwで指定 */
/* $base-font-sizeを基準に$sizeをvhで指定 */
/* ===========================================
 * debug
 * ===========================================
*/
.show-for-logged-in,
.hide-for-logged-in {
  display: none;
  /* 最初はどちらも非表示 */
}

/* ===========================================
 * common
 * ===========================================
*/
/* selecter */
html {
  overflow-x: hidden;
}

html body {
  font-family: "kozuka-gothic-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  overflow-x: hidden;
  position: initial !important;
}

/* default font size */
p {
  font-size: clamp(14px, 1.6511867905vw, 16px);
  font-weight: normal;
  line-height: 2;
  color: #222222;
}

.__p_vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 3;
  letter-spacing: 0.25rem;
}

/* sp */
@media screen and (min-width: 991px) {
  .__sp {
    display: none;
  }
}

/* common heading */
/* パンクズリスト */
/* -------------------------------------------
 * modal
*/
.modal .modal-dialog .modal-content .modal-header,
.modal .modal-dialog .modal-content .modal-footer {
  color: #FFF;
}

.modal .modal-dialog .modal-content .modal-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.modal .modal-dialog .modal-content .modal-body a {
  background-color: #FFF;
  padding: 1rem;
  text-decoration: none;
  color: #003245;
}

.modal .modal-dialog .modal-content .modal-body .copy-text {
  width: 90%;
  font-size: 14px;
}

.modal .modal-dialog .modal-content .modal-body .btn-copy {
  width: 90%;
  padding: 0.5rem 0;
  font-size: 13px;
}

.modal .modal-dialog .modal-content .modal-body .copy-notice {
  font-size: 12px;
}

.modal .modal-dialog .modal-content .modal-body .text-notice {
  font-size: 12px;
}

/* ===========================================
 * block
 * ===========================================
*/
html body.top>.site-content {
  margin: 0;
  padding: 0;
  overflow: visible !important;
}

html body.top>.site-content>.container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ===========================================
 * お悩み解決タグ（洗練されたカードデザイン）
 * ===========================================
 */
/* --- お悩みグループ全体（ホワイトカード）の調整 --- */
.tag-group-wrapper {
  background-color: #FFFFFF;
  /* 透過なしの白でグリッドを隠してスッキリさせる */
  padding: 3rem 2rem;
  border-radius: 16px;
  /* 少し丸みを強くして親しみやすく */
  margin-bottom: 4rem;
  border: 1px solid #E0E4E7;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  /* 浮き出し感を強調 */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* --- グループ内の小見出し（h3）の中央揃えと装飾 --- */
.tag-group-wrapper h3.tag-group-title {
  text-align: center;
  /* 確実に中央へ */
  display: block;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1F3666;
  /* 事務所のメインカラー */
  margin: 0 0 2.5rem 0;
  padding: 0;
  border: none;
  /* 余計な枠線を消す */
}

/* タイトル下の装飾ライン（ゴールド） */
.tag-group-wrapper h3.tag-group-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  background-color: #D4AF37;
  /* ゴールドアクセント */
  margin: 15px auto 0;
  /* 中央に配置 */
  border-radius: 2px;
}

/* タグボタンの配置調整（3列のバランス） */
.tag-buttons {
  gap: 1.5rem;
  /* ボタン同士の距離を少し広げる */
}

/* タグボタンの微調整（よりシャープに） */
.tag-buttons .tag-button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  /* 影をより繊細に */
  border-color: #DDE2E5;
}

/* タグコンテナ：3列のグリッド */
.tag-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto 3rem;
}

/* 個別のタグ（カード）スタイル */
.tag-buttons .tag-button {
  position: relative;
  height: 64px;
  padding: 0 1.25rem 0 1.75rem;
  /* 左側にライン用の余白 */
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #444444;
  border: 1px solid #E0E4E7;
  /* 細いボーダーで清潔感を */
  border-radius: 4px;
  /* 緩やかな角丸 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* 軽い影で浮き出し */
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 左側のアクセントライン：ロゴのデザインと同期 */
.tag-buttons .tag-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #1F3666;
  /* 事務所のメインカラー */
  transition: background-color 0.3s ease;
  transform: none;
  /* 以前の丸い装飾を上書き */
  border-radius: 0;
}

/* 右側の矢印（FontAwesome） */
.tag-buttons .tag-button i {
  font-size: 0.75rem;
  color: #BBBBBB;
  transition: transform 0.3s ease, color 0.3s ease;
  position: static;
  /* 前回の絶対配置を解除 */
}

/* ホバー時の挙動：ゴールドへの変化 */
.tag-buttons .tag-button:hover {
  border-color: #D4AF37;
  background-color: #FDFBEE;
  /* 非常に薄いゴールド背景 */
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
  transform: translateY(-3px);
}

.tag-buttons .tag-button:hover::before {
  background-color: #D4AF37;
  /* ラインもゴールドに */
}

.tag-buttons .tag-button:hover i {
  color: #D4AF37;
  transform: translateX(3px);
}

/* レスポンシブ対応 */
@media screen and (max-width: 991px) {
  .tag-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .tag-buttons {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .tag-buttons .tag-button {
    height: 56px;
  }
}

.cta-saimu {
  padding: 3rem 0;
  position: relative;
  z-index: 1;
}

.cta-saimu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background-color: #eff0f3;
  z-index: -1;
}

.cta-saimu>.wp-block-group__inner-container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.cta-saimu>.wp-block-group__inner-container .__title {
  justify-content: center;
  align-items: center;
  gap: 0;
}

.cta-saimu>.wp-block-group__inner-container .__title .__word_top {
  gap: 0;
  line-height: 1;
  align-items: flex-end;
}

.cta-saimu>.wp-block-group__inner-container .__title .__word_top .__word_01 {
  font-weight: bold;
  font-size: clamp(18px, 2.0639834881vw, 20px);
  color: #0d0d0d;
}

.cta-saimu>.wp-block-group__inner-container .__title .__word_top .__word_02 {
  color: #0d0d0d;
}

.cta-saimu>.wp-block-group__inner-container .__title .__word_bottom .__word_03 {
  font-weight: bold;
  font-size: clamp(18px, 2.0639834881vw, 20px);
  color: #0d0d0d;
}

.cta-saimu>.wp-block-group__inner-container .__sub_title {
  padding: 1rem;
  background-color: #FFF;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  display: inline-block;
  border: 1px solid #CCCCCC;
  color: #0d0d0d;
}

.cta-saimu>.wp-block-group__inner-container .__sub_title::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #CCCCCC;
  position: absolute;
  top: calc(100% - 0.5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.cta-saimu>.wp-block-group__inner-container .__sub_title::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 0.9rem solid transparent;
  border-right: 0.9rem solid transparent;
  border-top: 0.9rem solid #FFF;
  position: absolute;
  top: calc(100% - 0.5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.cta-saimu>.wp-block-group__inner-container .__btn_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin-top: 0.5rem;
}

.cta-saimu>.wp-block-group__inner-container .__btn .ys-icon svg {
  width: 2em;
  height: 2em;
}

.cta-saimu>.wp-block-group__inner-container .__btn a {
  padding: 0.75rem;
  width: 100%;
}

.cta-saimu>.wp-block-group__inner-container .__btn a .ystdb-button__link-content {
  gap: 0;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__tel a {
  background-color: #ff8e3c;
  box-shadow: 0 4px 0 #672b00;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text {
  position: relative;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text::after {
  content: "受付時間：10:00〜18:00";
  display: block;
  font-size: 0.75em;
  margin-top: 0.25em;
  color: #FFF;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__web {
  margin-top: 0.5rem;
  flex-grow: 1;
  flex-shrink: 0;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__web a {
  background-color: #d9376e;
  border: 2px solid #d9376e;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-saimu>.wp-block-group__inner-container .__btn.__web a .ystdb-button__text {
  position: relative;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__web a .ystdb-button__text::after {
  content: "24時間受付中!";
  display: block;
  font-size: 0.75em;
  margin-top: 0.25em;
  color: #FFF;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__web a:hover {
  background-color: #FFF;
  color: #71C4C4;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__web a:hover .ystdb-button__text {
  color: #71C4C4;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__web a:hover .ystdb-button__text::after {
  color: #d9376e;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__form {
  margin-top: 0.5rem;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__form a {
  background-color: #FFF;
  border: 2px solid #d9376e;
  color: #d9376e;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-saimu>.wp-block-group__inner-container .__btn.__form a .ystdb-button__text {
  position: relative;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__form a:hover {
  background-color: #d9376e;
  color: #FFF;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text {
  color: #FFF;
}

.cta-saimu>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text::after {
  color: #FFF;
}

.cta-saimu>.wp-block-group__inner-container .__line_container {
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-top: 1rem;
}

.cta-saimu>.wp-block-group__inner-container .__line_container .__copy {
  font-size: 12px;
  font-weight: bold;
  color: #06C755;
  margin: 0;
  padding: 0 2rem;
  border: 2px solid #06C755;
  border-radius: 100px;
  background-color: #FFF;
  position: relative;
  z-index: 2;
}

.cta-saimu>.wp-block-group__inner-container .__line_container .__btn {
  z-index: 1;
  margin-top: -2.5rem;
}

.cta-saimu>.wp-block-group__inner-container .__line_container .__btn.__line {
  width: 100%;
}

.cta-saimu>.wp-block-group__inner-container .__line_container .__btn.__line a {
  background-color: #06C755;
  box-shadow: 0 4px 0 #006e2d;
}

.cta-saimu>.wp-block-group__inner-container .__line_container .__btn.__line a .ystdb-button__text {
  position: relative;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__catchphrase {
  text-align: center;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__catchphrase span {
  color: #0d0d0d;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn_container_pc {
  margin-top: 0.5rem;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__tel a {
  width: 100%;
  background: unset;
  color: #0d0d0d;
  font-size: clamp(32px, 4.1279669763vw, 40px);
  box-shadow: unset;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text {
  position: relative;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text::after {
  color: #0d0d0d;
  font-size: 0.4em;
  margin-top: 0;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__link-content {
  gap: 0;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__tel a .ys-icon svg {
  width: 1.5em;
  height: 1.5em;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__web {
  width: 280px;
  flex-grow: unset;
  flex-shrink: unset;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__web a {
  background-color: #ff8e3c;
  border: 2px solid #ff8e3c;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__web a .ystdb-button__text {
  position: relative;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__web a:hover {
  background-color: #FFF;
  color: #ff8e3c;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__web a:hover .ystdb-button__text {
  color: #ff8e3c;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__web a:hover .ystdb-button__text::after {
  color: #ff8e3c;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__form {
  width: 280px;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__form a {
  background-color: #FFF;
  border: 2px solid #ff8e3c;
  color: #ff8e3c;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__form a .ystdb-button__text {
  position: relative;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__form a .ystdb-button__text::after {
  content: "まずはメールで無料相談♪";
  display: block;
  font-size: 0.75em;
  margin-top: 0.25em;
  color: #ff8e3c;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__form a:hover {
  background-color: #ff8e3c;
  color: #FFF;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text {
  color: #FFF;
}

.cta-saimu.__pc>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text::after {
  color: #FFF;
}

.cta-retirement-agency {
  padding: 3rem 0;
  position: relative;
  z-index: 1;
}

.cta-retirement-agency::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background-color: #FCF5EF;
  z-index: -1;
}

.cta-retirement-agency>.wp-block-group__inner-container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.cta-retirement-agency>.wp-block-group__inner-container .__title {
  justify-content: center;
  align-items: center;
  gap: 0;
}

.cta-retirement-agency>.wp-block-group__inner-container .__title .__word_top {
  gap: 0;
  line-height: 1;
  align-items: flex-end;
}

.cta-retirement-agency>.wp-block-group__inner-container .__title .__word_top .__word_01 {
  font-weight: bold;
  font-size: clamp(18px, 2.0639834881vw, 20px);
  color: #310a0a;
}

.cta-retirement-agency>.wp-block-group__inner-container .__title .__word_top .__word_02 {
  color: #310a0a;
}

.cta-retirement-agency>.wp-block-group__inner-container .__title .__word_bottom .__word_03 {
  color: #310a0a;
  font-weight: bold;
  font-size: clamp(18px, 2.0639834881vw, 20px);
}

.cta-retirement-agency>.wp-block-group__inner-container .__sub_title {
  padding: 1rem;
  background-color: #FFF;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  display: inline-block;
  border: 1px solid #CCCCCC;
}

.cta-retirement-agency>.wp-block-group__inner-container .__sub_title::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid #CCCCCC;
  position: absolute;
  top: calc(100% - 0.5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.cta-retirement-agency>.wp-block-group__inner-container .__sub_title::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 0.9rem solid transparent;
  border-right: 0.9rem solid transparent;
  border-top: 0.9rem solid #FFF;
  position: absolute;
  top: calc(100% - 0.5px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin-top: 0.5rem;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn .ys-icon svg {
  width: 2em;
  height: 2em;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn a {
  padding: 0.75rem;
  width: 100%;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn a .ystdb-button__link-content {
  gap: 0;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__tel a {
  background-color: #FF311D;
  box-shadow: 0 4px 0 #af2b2b;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text {
  position: relative;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text::after {
  content: "受付時間：10:00〜18:00";
  display: block;
  font-size: 0.75em;
  margin-top: 0.25em;
  color: #FFF;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__line {
  flex-grow: 1;
  flex-shrink: 0;
  margin-top: 0.5rem;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__line a {
  background-color: #06C755;
  border: 2px solid #06C755;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__line a:hover {
  background-color: #FFF;
  color: #06C755;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__line a:hover .ystdb-button__text {
  color: #06C755;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__line a:hover .ystdb-button__text::after {
  color: #06C755;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__form {
  margin-top: 0.5rem;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__form a {
  background-color: #FFF;
  border: 2px solid #E88900;
  color: #E88900;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__form a .ystdb-button__text {
  position: relative;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__form a .ystdb-button__text::after {
  content: "メールで無料相談♪";
  display: block;
  font-size: 0.75em;
  margin-top: 0.25em;
  color: #E88900;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__form a:hover {
  background-color: #E88900;
  color: #FFF;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text {
  color: #FFF;
}

.cta-retirement-agency>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text::after {
  color: #FFF;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__catchphrase {
  text-align: center;
  color: #310a0a;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn_container_pc {
  margin-top: 0.5rem;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__tel a {
  width: 100%;
  background: unset;
  color: #310a0a;
  font-size: clamp(32px, 4.1279669763vw, 40px);
  box-shadow: unset;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text {
  position: relative;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__text::after {
  color: #310a0a;
  font-size: 0.4em;
  margin-top: 0;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__tel a .ystdb-button__link-content {
  gap: 0;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__tel a .ys-icon svg {
  width: 1.5em;
  height: 1.5em;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__form {
  width: 280px;
  flex-grow: unset;
  flex-shrink: unset;
  margin-top: 0;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__form a {
  background-color: #FF311D;
  border: 2px solid #FF311D;
  color: #FFF;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__form a .ystdb-button__text {
  position: relative;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__form a .ystdb-button__text::after {
  display: none;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__form a:hover {
  background-color: #FFF;
  color: #FF311D;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text {
  color: #FF311D;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__form a:hover .ystdb-button__text::after {
  color: #FF311D;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__line {
  margin-top: 0;
  flex-grow: unset;
  flex-shrink: unset;
  width: 280px;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__line a {
  background-color: #FFF;
  border: 2px solid #06C755;
  color: #06C755;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__line a .ystdb-button__text {
  position: relative;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__line a:hover {
  background-color: #06C755;
  color: #FFF;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__line a:hover .ystdb-button__text {
  color: #FFF;
}

.cta-retirement-agency.__pc>.wp-block-group__inner-container .__btn.__line a:hover .ystdb-button__text::after {
  color: #FFF;
}

/* ===========================================
 * Home
 * ===========================================
*/
.top .content__main {
  max-width: 100% !important;
}

.top [class*=sec-] {
  margin: 0;
  padding: 4rem 0;
}

.top [class*=sec-] .section-heading {
  text-align: center;
  position: relative;
  padding: 40px 0;
}

.top [class*=sec-] .section-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 40px;
  background-color: #25447F;
  transform: translateX(-50%);
  border-radius: 3px;
}

.top [class*=sec-] .section-heading h2 {
  font-size: clamp(22px, 2.8895768834vw, 28px);
  font-weight: bold;
  color: #25447F;
  margin: 15px 0 10px;
}

.top [class*=sec-] .section-heading p {
  font-size: 16px;
  color: #4A4A4A;
}

@media screen and (max-width: 767px) {
  .top [class*=sec-] .section-heading p {
    padding: 0 20px;
  }
}

/* ===========================================
 * 決定版：FV（メインビジュアル）クリーン刷新
 * ===========================================
*/
.top .sec-fv {
  background: #FFFFFF;
  /* 背景を白にして清潔感を */
  padding: 6rem 0 !important;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #E0E4E7;
}

/* 背後に薄いゴールドの装飾を追加して「品格」を演出 */
.top .sec-fv::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -5%;
  width: 40%;
  height: 120%;
  background-color: #F8F9FA;
  /* 非常に薄いグレー */
  transform: skewX(-15deg);
  z-index: 1;
}

.top .sec-fv .__container {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

/* 左側：テキストエリア */
.top .sec-fv .__left_container {
  flex: 0 0 55%;
  padding-right: 30px;
}

.top .sec-fv .__catchcopy .__sub_title {
  display: inline-block;
  color: #D4AF37 !important;
  /* ゴールドで強調 */
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-left: 15px;
  border-left: 3px solid #D4AF37;
  letter-spacing: 0.05em;
}

.top .sec-fv .__catchcopy .__main_title {
  color: #1F3666 !important;
  /* ネイビーに変更して視認性向上 */
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 900;
  line-height: 1.3;
  margin: 0 0 2rem 0;
  letter-spacing: -0.02em;
}

.top .sec-fv .__office_logo {
  margin-bottom: 2rem;
}

.top .sec-fv .__office_logo img {
  max-width: 280px !important;
  height: auto;
}

.top .sec-fv .__text p {
  color: #334155 !important;
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
  margin: 0;
}

/* 右側：画像エリア */
.top .sec-fv .__right_container {
  flex: 0 0 35%;
  text-align: right;
}

.top .sec-fv .__right_container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  /* 少し角を丸めて柔らかく */

}

/* レスポンシブ調整（スマホ） */
@media screen and (max-width: 991px) {
  .top .sec-fv {
    padding: 4rem 1.5rem !important;
  }

  .top .sec-fv .__container {
    flex-direction: column;
    /* スマホでは画像を上に、テキストを下に */
    text-align: center;
  }

  .top .sec-fv .__left_container,
  .top .sec-fv .__right_container {
    flex: 0 0 100%;
    padding: 0;
  }

  .top .sec-fv .__right_container {
    margin-bottom: 3rem;
    margin-top: 2rem;
  }

  .top .sec-fv .__catchcopy .__sub_title {
    border-left: none;
    padding-left: 0;
  }

  .top .sec-fv .__office_logo img {
    margin: 0 auto;
  }
}

/* ===========================================
 * Mobile: FVタイトルの改行崩れ修正（1行に収める）
 * ===========================================
 */
@media screen and (max-width: 767px) {
  .top .sec-fv .__catchcopy .__main_title {
    /* 1行に収まるようにサイズを微調整 */
    font-size: 1.85rem !important;
    white-space: nowrap !important;
    /* 強制的に1行にする */
    letter-spacing: -0.02em !important;
    /* わずかに文字間を詰め、収まりを良くする */
  }
}

/* 小さな画面（iPhone SEなど）でも収まるようにさらに調整 */
@media screen and (max-width: 375px) {
  .top .sec-fv .__catchcopy .__main_title {
    font-size: 7.8vw !important;
    /* 画面幅に応じた可変サイズ */
  }
}


/* ===========================================
 * 人気記事ランキング：最終装飾（ドットのみ・事務所ネイビー仕様）
 * ===========================================
 */

/* 背景：明るいドットパターン */
.top .__swiper-top-ranking {
  background: radial-gradient(#d1d5db 1px, transparent 1px), #f9fafb;
  background-size: 25px 25px;
  padding: 4rem 0 !important;
  position: relative;
  z-index: 1;
}

/* カード：角丸 12px とシャドウ */
.top .__swiper-top-ranking .__swiper_card {
  background: #FFFFFF;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: block;
  text-decoration: none;
  height: 100%;
  transition: transform 0.3s ease;
}

.top .__swiper-top-ranking .__swiper_card:hover {
  transform: translateY(-5px);
}

.top .__swiper-top-ranking .__thumbnail {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

/* カテゴリーバッジ：事務所ネイビー */
.top .__swiper-top-ranking .__category {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #1F3666 !important;
  background-color: #F0F2F5;
  padding: 4px 12px;
  border-radius: 4px;
  margin-left: 1.25rem;
  margin-top: 1.25rem;
}

/* タイトル：事務所ネイビー（3行制限） */
.top .__swiper-top-ranking .__title {

  font-weight: 700;
  line-height: 1.2;
  padding: 0.5rem 1.25rem 1.25rem;
  height: 4.5em;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  /* 最大3行まで表示 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 4.5em !important;
  /* 1〜2行の場合も高さを揃えてガタつきを防止 */
  font-size: 1.1rem !important;
  margin-bottom: 15px !important;
}

/* ナビゲーション：黒丸ボタン（事務所ネイビー） */
.top .__swiper-top-ranking .swiper-button-prev,
.top .__swiper-top-ranking .swiper-button-next {
  background-color: #1F3666 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  color: #FFFFFF !important;
  z-index: 20;
  top: 45% !important;
}

.top .__swiper-top-ranking .swiper-button-prev:after,
.top .__swiper-top-ranking .swiper-button-next:after {
  font-size: 14px !important;
  font-weight: bold;
}

/* ページネーション（ドット）：右下配置 */
.top .__swiper-top-ranking .__swiper-footer {
  display: flex;
  align-items: center;

  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding-right: 40px;
}

.top .__swiper-top-ranking .swiper-pagination-bullets {
  position: static !important;
  width: auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  /* 改行を禁止して1段にする */
  gap: 8px;
}

.top .__swiper-top-ranking .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #d1d5db !important;
  opacity: 1;
}

.top .__swiper-top-ranking .swiper-pagination-bullet-active {
  background: #D4AF37 !important;
  /* アクティブはゴールド */
  width: 25px !important;
  border-radius: 5px !important;
}

/* ===========================================
 * sec-onayami (お悩みセクション)
 * 青山北町法律事務所・詐欺返金特化仕様
 * ===========================================
*/
/* --- メイン見出し（手口別の解決方法）の再構築 --- */
.top .sec-onayami h2 {
  text-align: center !important;
  /* 強制的に中央揃え */
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: #1F3666;
  /* 事務所のロイヤルネイビー */
  margin-top: 4rem;
  margin-bottom: 10px;
  position: relative;
}

/* 見出しの上のネイビーバー（yStandardのトーンを洗練させて継承） */
.top .sec-onayami h2::before {
  content: "";
  display: block;
  width: 8px;
  height: 28px;
  background-color: #D4AF37;
  margin: 0 auto 20px;
  border-radius: 2px;
}

/* メイン見出しの下のテキスト（お悩み別に解決方法を...） */
.top .sec-onayami p {
  text-align: center !important;
  /* 中央揃え */
  color: #666;
  font-size: 16px;
  margin-bottom: 4rem;
}

/* ===========================================
 * sec-saimu (詐欺被害カテゴリーボタン)
 * 青山北町法律事務所・詐欺返金特化仕様
 * ===========================================
*/
.top .sec-saimu {
  background-color: #F8F9FA;
  /* 明るいグレーに変更して清潔感を */
}

@media screen and (max-width: 991px) {
  .top .sec-saimu {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .top .sec-saimu {
    background-color: #FFF;
  }
}

/* セクションの見出し：以前の債務整理用アイコンを削除・調整 */
.top .sec-saimu .section-heading {
  position: relative;
  margin-bottom: 3rem;
}




/* --- メイン見出し（手口別の解決方法）の再構築 --- */
.top .sec-saimu h2 {
  text-align: center !important;
  /* 強制的に中央揃え */
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: #1F3666;
  /* 事務所のロイヤルネイビー */
  margin-top: 4rem;
  margin-bottom: 10px;
  position: relative;
}

/* 見出しの上のネイビーバー（yStandardのトーンを洗練させて継承） */
.top .sec-saimu h2::before {
  content: "";
  display: block;
  width: 8px;
  height: 28px;
  background-color: #D4AF37;
  margin: 0 auto 20px;
  border-radius: 2px;
}

/* メイン見出しの下のテキスト（お悩み別に解決方法を...） */
.top .sec-saimu p {
  text-align: center !important;
  /* 中央揃え */
  color: #666;
  font-size: 16px;
  margin-bottom: 4rem;
}

/* 以前の債務整理アイコンを非表示にする */
.top .sec-saimu .section-heading::after {
  display: none !important;
}

/* ボタンコンテナ：3列の綺麗なグリッドに変更 */
.top .sec-saimu .category-buttons-container {
  max-width: 1000px;
  margin: 0 auto;
}

.top .sec-saimu .category-square-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3列構成 */
  gap: 2rem;
}

/* 共通ボタン基本スタイル：ロイヤルネイビー基調 */
.top .sec-saimu .category-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: #FFFFFF;
  border-radius: 12px;
  background-color: #1F3666;
  /* ロイヤルネイビー */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 2rem 1rem;
  height: 220px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 装飾用の背景斜めカット：以前のスタイルを継承しつつ色を調整 */
.top .sec-saimu .category-square::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  transition: all 0.3s ease;
  z-index: 1;
}

/* アイコンとテキストの配置 */
.top .sec-saimu .category-square .category-img,
.top .sec-saimu .category-square .category-icon-fa {
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
  color: #FFFFFF;
  transition: all 0.3s ease;
}

.top .sec-saimu .category-text {
  text-align: center;
  position: relative;
  z-index: 2;
  font-size: 16px;
  line-height: 1.4;
}

/* ホバーアクション：ゴールドへの変化 */
.top .sec-saimu .category-button:hover {
  transform: translateY(-8px);
  background-color: #162a52;
  /* 少し濃いネイビー */
  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.15);
  border-color: #D4AF37;
  /* ゴールドの枠線 */
}

.top .sec-saimu .category-button:hover .category-icon-fa {
  color: #D4AF37;
  /* アイコンをゴールドに */
  transform: scale(1.1);
}

.top .sec-saimu .category-button:hover .category-text {
  color: #D4AF37;
}

/* 以前の横長ボタン(category-wide)関連は不要になったため、既存の定義を無効化・削除済み */

/* レスポンシブ対応：タブレット・スマホ */
@media screen and (max-width: 991px) {
  .top .sec-saimu .category-square-group {
    grid-template-columns: repeat(2, 1fr);
    /* 2列に変更 */
    gap: 1.5rem;
  }

  .top .sec-saimu .category-button {
    height: 180px;
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {
  .top .sec-saimu .category-square-group {
    grid-template-columns: 1fr;
    /* スマホでは1列でしっかり見せる */
    gap: 1rem;
  }

  .top .sec-saimu .category-button {
    height: 140px;
    flex-direction: row;
    /* スマホでは横並びにアイコンと文字を配置してもOK */
    justify-content: flex-start;
    padding-left: 2rem;
  }

  .top .sec-saimu .category-square .category-icon-fa {
    margin-bottom: 0;
    margin-right: 1.5rem;
    font-size: 2rem;
  }
}

.top .sec-free-shindan {
  position: relative;
  background-color: #71C4C4;
  z-index: 1;
}

.top .sec-free-shindan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background-color: #FFF;
  z-index: -1;
}

@media screen and (max-width: 991px) {
  .top .sec-free-shindan::before {
    background-color: #E2F1FF;
  }
}

.top .sec-free-shindan::after {
  content: "";
  position: absolute;
  top: 40%;
  left: -3%;
  width: 100%;
  height: 55%;
  background-image: url("../img/bg-free-shindan.png");
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  background-color: #71C4C4;
  z-index: -2;
}

@media screen and (max-width: 991px) {
  .top .sec-free-shindan::after {
    top: 32%;
    left: -18%;
  }
}

@media screen and (max-width: 480px) {
  .top .sec-free-shindan::after {
    top: 27%;
    left: 0;
  }
}

.top .sec-free-shindan .__container {
  max-width: 860px;
  margin: 0 auto;
}

@media screen and (max-width: 991px) {
  .top .sec-free-shindan .__container {
    padding-left: 1rem;
    padding-right: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.top .sec-free-shindan .__container .__left_container .__text_01 {
  font-size: clamp(18px, 2.1671826625vw, 21px);
}

.top .sec-free-shindan .__container .__left_container .__text_02 {
  margin: 0;
  font-size: clamp(22px, 3.9215686275vw, 38px);
  color: #71C4C4;
  letter-spacing: 4px;
}

.top .sec-free-shindan .__container .__left_container .__text_03 {
  margin: 0;
  font-size: clamp(13px, 1.5479876161vw, 15px);
  line-height: 2.4;
}

.top .sec-free-shindan .__container .__left_container .__text_04_group {
  margin-top: 5rem;
}

@media screen and (max-width: 991px) {
  .top .sec-free-shindan .__container .__left_container .__text_04_group {
    display: none;
  }
}

.top .sec-free-shindan .__container .__left_container .__text_04_group .__gengaku {
  font-size: clamp(18px, 2.1671826625vw, 21px);
  letter-spacing: 2px;
  color: #FFF;
  border-top: 5px solid #FFF;
  border-bottom: 5px solid #FFF;
}

.top .sec-free-shindan .__container .__left_container .__text_04_group .__shindan {
  position: relative;
  font-size: clamp(64px, 7.3271413829vw, 71px);
  color: #FCFBD5;
}

.top .sec-free-shindan .__container .__left_container .__text_04_group .__shindan::before {
  content: " •••• ";
  font-size: 72px;
  color: #FCFBD5;
  letter-spacing: 44px;
  position: absolute;
  top: -5rem;
  left: 10%;
  width: 100%;
}

.top .sec-free-shindan .wp-block-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 860px;
  margin: 2rem auto 0;
}

@media screen and (max-width: 991px) {
  .top .sec-free-shindan .wp-block-buttons {
    max-width: 312px;
  }
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button {
  position: relative;
  display: block;
  width: 100%;
  transition: all 0.3s ease;
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background-color: #629595;
  border-radius: 8px;
  z-index: 0;
  transition: all 0.3s ease;
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button .wp-block-button__link {
  position: relative;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  background-color: #FFF;
  border: 2px solid #25447F;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #25447F;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 1;
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button .wp-block-button__link::after {
  content: "▶";
  font-size: 14px;
  margin-left: 10px;
  color: #25447F;
  position: absolute;
  right: 1rem;
}

@media screen and (max-width: 991px) {
  .top .sec-free-shindan .wp-block-buttons .wp-block-button .wp-block-button__link::after {
    margin-left: 0;
    right: 0.5rem;
  }
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button:hover {
  top: 6px;
  left: 6px;
  transition: all 0.3s ease;
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button:hover::before {
  opacity: 0;
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button:hover .wp-block-button__link {
  border: 2px solid #2E72D9;
}

.top .sec-free-shindan .wp-block-buttons .wp-block-button:hover .wp-block-button__link::after {
  color: #2E72D9;
}

/* ===========================================
 * 新着コラム（詐欺返金対策ガイド）
 * ===========================================
 */

/* --- メイン見出し（手口別の解決方法）の再構築 --- */
.top .sec-post h2 {
  text-align: center !important;
  /* 強制的に中央揃え */
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: #1F3666;
  /* 事務所のロイヤルネイビー */
  margin-top: 4rem;
  margin-bottom: 10px;
  position: relative;
}

/* 見出しの上のネイビーバー（yStandardのトーンを洗練させて継承） */
.top .sec-post h2::before {
  content: "";
  display: block;
  width: 8px;
  height: 28px;
  background-color: #D4AF37;
  margin: 0 auto 20px;
  border-radius: 2px;
}

/* メイン見出しの下のテキスト（お悩み別に解決方法を...） */
.top .sec-post p {
  text-align: center !important;
  /* 中央揃え */
  color: #666;
  font-size: 16px;
  margin-bottom: 4rem;
}

.top .sec-post .custom-posts {
  max-width: 1100px;
  /* 幅を広げる */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3列にして情報量を増やす */
  gap: 30px;
}

.top .sec-post .custom-posts .custom-post-item {
  background-color: #FFF;
  border-bottom: none;
  /* 下線を消してカード型に */
  transition: all 0.3s ease;
}

.top .sec-post .custom-posts .custom-post-item a {
  display: block;
  overflow: hidden;
}

.top .sec-post .custom-posts .custom-post-item a img {
  border-radius: 8px;
  /* 角丸で洗練された印象に */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.top .sec-post .custom-posts .custom-post-item a img:hover {
  transform: scale(1.05);
}

.top .sec-post .custom-posts .custom-post-item p {
  font-size: 1rem;
  font-weight: bold;
  margin-top: 1rem;
  text-align: left;
  line-height: 1.2;
}

.top .sec-post .custom-posts .custom-post-item p a {
  color: #1F3666 !important;
  /* 事務所ネイビー */
  font-size: 1.0rem;
  line-height: 1.5;
}

.top .sec-post .custom-posts .custom-post-item p a:hover {
  text-decoration: underline;
}

/* 新着コラムのバッジスタイル */
.top .sec-post .custom-post-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 左揃え */
}

/* カテゴリーバッジの調整（functions.phpのスラッグに対応） */
.top .sec-post .custom-posts .custom-post-item .__category {
  margin-top: 15px;
  /* サムネイルとの間隔 */
  margin-bottom: 5px;
  /* タイトルとの間隔 */
  background-color: #D4AF37;
  /* 事務所ゴールド */
  color: #FFF;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

/* --- カテゴリーバッジの色分け設定 --- */

/* 1. 占い詐欺：神秘的なイメージのディープパープル */
.top .sec-post .custom-post-item .__category.fortune-telling-fraud {
  background-color: #4B4E6D !important;
}

/* 2. 公営ギャンブル予想詐欺：勝負事を連想させるディープグリーン */
.top .sec-post .custom-post-item .__category.gambling-prediction-fraud {
  background-color: #2D5A27 !important;
}

/* 3. 情報商材・副業詐欺：ビジネス・デジタルを連想させるスチールブルー */
.top .sec-post .custom-post-item .__category.side-business-fraud {
  background-color: #3E606F !important;
}

/* 4. 出会い系サイト：対人トラブルを想起させるローズマダー */
.top .sec-post .custom-post-item .__category.dating-site-scam {
  background-color: #935E60 !important;
}

/* 5. 支援金詐欺：優しさを装う手口を想起させるテラコッタ */
.top .sec-post .custom-post-item .__category.support-money-fraud {
  background-color: #A67D65 !important;
}

/* 6. 利用者の声：解決と成功を象徴する事務所ゴールド */
.top .sec-post .custom-post-item .__category.testimonials {
  background-color: #D4AF37 !important;
  /* 事務所のアクセントカラー */
  color: #1F3666 !important;
  /* ゴールド背景時は文字をネイビーにして可読性を確保 */
}

.top .sec-post .custom-posts .custom-post-item .post-meta {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.top .sec-post .custom-posts .custom-post-item .post-meta .__date,
.top .sec-post .custom-posts .custom-post-item .post-meta .__modified {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  margin: 0;
}

.top .sec-post .custom-posts .custom-post-item .post-meta .__date i,
.top .sec-post .custom-posts .custom-post-item .post-meta .__modified i {
  font-size: 12px;
}

.top .sec-post .custom-posts .custom-post-item .post-meta .__date {
  color: #1F3666;
}

.top .sec-post .custom-posts .custom-post-item .post-meta .__modified {
  color: #919BA5;
}

@media screen and (max-width: 991px) {
  .top .sec-post .custom-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .top .sec-post .custom-posts {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
}

/* ===========================================
 * 利用者の声（口コミ）セクション
 * 青山北町法律事務所・詐欺返金仕様
 * ===========================================
 */
/* ===========================================
 * 利用者の声（口コミ）セクション：洗練ツートン版
 * ===========================================
 */

.top .sec-reviews {
  background-color: #F4F7FA;
  padding: 6rem 0;
}


/* --- メイン見出し（手口別の解決方法）の再構築 --- */
.top .sec-reviews h2 {
  text-align: center !important;
  /* 強制的に中央揃え */
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: #1F3666;
  /* 事務所のロイヤルネイビー */
  margin-top: 4rem;
  margin-bottom: 10px;
  position: relative;
}

/* 見出しの上のネイビーバー（yStandardのトーンを洗練させて継承） */
.top .sec-reviews h2::before {
  content: "";
  display: block;
  width: 8px;
  height: 28px;
  background-color: #D4AF37;
  margin: 0 auto 20px;
  border-radius: 2px;
}

/* メイン見出しの下のテキスト（お悩み別に解決方法を...） */
.top .sec-reviews p {
  text-align: center !important;
  /* 中央揃え */
  color: #666;
  font-size: 16px;
  margin-bottom: 4rem;
}


/* --- カード本体： */
.top .sec-reviews .review-posts-item {
  background-color: #bce2e8;
  /* 画像から抽出したグリーン */
  border-radius: 18px;
  /* 角丸を強めに */
  overflow: hidden;
  position: relative;
  padding: 2rem 2rem 2.5rem;
  /* 余白を調整 */
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.1);
  height: auto;
  color: #bbb;
  /* 全体の文字色を白に */
}

/* --- カード上部：オレンジの波型背景 --- */
.top .sec-reviews .review-posts-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 58%;
  /* 高さを調整して波の位置を決める */
  background-color: #EFC070;
  /* 画像から抽出したオレンジ */
  /* 楕円を使って波のような曲線を再現 */
  clip-path: ellipse(140% 90% at 10% 0%);
  z-index: 1;
}

/* --- ラベル（被害ジャンル） --- */
.top .sec-reviews .review-posts .review-posts-item .category {
  position: absolute;
  top: 20px;
  left: 25px;
  font-size: 22px;
  /* フォントサイズを大きく */
  color: #FFFFFF !important;
  background-color: transparent !important;
  font-weight: 800;
  z-index: 2;
  margin: 0;
  letter-spacing: 0.05em;
}

/* --- ユーザー情報エリア --- */
.top .sec-reviews .review-posts .review-posts-item .customer-info {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  margin-top: 3rem;
  /* 上の余白を調整して配置 */
  padding-bottom: 0;
  border-bottom: none;
}

/* アイコン */
.top .sec-reviews .customer-info .__left_container img {
  width: 100px;
  /* サイズを少し大きく */
  height: 100px;
  border-radius: 50%;
  border: 5px solid #FFFFFF;
  /* 白い枠線を太く */
  background-color: #FFFFFF;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  object-fit: cover;
}

/* 右側のテキストコンテナ */
.top .sec-reviews .customer-info .__right_container {
  padding-left: 1.5rem;
  flex: 1;
  /* 残りの幅を埋める */
}

/* 職業 */
.top .sec-reviews .customer-info .__occupation {
  font-size: 20px !important;
  /* サイズアップ */
  font-weight: 800 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  letter-spacing: 0.05em;
}

/* 名前と属性 */
.top .sec-reviews .customer-info .__customer {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  /* 横並びを整理 */
  align-items: baseline;
  /* ベースラインで揃える */
  flex-wrap: wrap;
  /* スマホでの折り返し対策 */
}

/* 名前部分（下線を追加） */
.top .sec-reviews .customer-info .__customer .customer-name {
  font-size: 24px;
  /* 名前を強調 */
  margin-right: 0.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  /* 白い下線 */
  padding-bottom: 2px;
  display: inline-block;
}

/* 年齢・性別 */
.top .sec-reviews .customer-info .__customer span:not(.customer-name) {
  font-size: 16px;
  opacity: 0.95;
}

/* --- 本文 --- */
.top .sec-reviews .review-posts-item .revew-content {
  position: relative;
  z-index: 3;
  color: #FFFFFF !important;
  /* 文字色を白に */
  font-size: 16px;
  line-height: 1.9;
  font-weight: 500;
  margin-top: 2rem;
  padding: 0 0.5rem;
  letter-spacing: 0.02em;
}

/* ===========================================
 * お知らせセクション
 * 青山北町法律事務所・詐欺返金仕様
 * ===========================================
 */

/* --- メイン見出し（手口別の解決方法）の再構築 --- */
.top .sec-news h2 {
  text-align: center !important;
  /* 強制的に中央揃え */
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: #1F3666;
  /* 事務所のロイヤルネイビー */
  margin-top: 4rem;
  margin-bottom: 10px;
  position: relative;
}

/* 見出しの上のネイビーバー（yStandardのトーンを洗練させて継承） */
.top .sec-news h2::before {
  content: "";
  display: block;
  width: 8px;
  height: 28px;
  background-color: #D4AF37;
  margin: 0 auto 20px;
  border-radius: 2px;
}

/* メイン見出しの下のテキスト*/
.top .sec-news .heading p {
  text-align: center !important;
  /* 中央揃え */
  color: #666;
  font-size: 16px;
  margin-bottom: 4rem;
}

.top .sec-news {
  background-color: #F8F9FA;
  /* 落ち着いた背景色 */
  border-top: 1px solid #EEE;
}

.top .sec-news .section-heading {
  text-align: center;
  margin-bottom: 30px;
}

.top .sec-news .section-heading h2 {
  font-size: 28px;
  font-weight: bold;
  color: #1E3A8A;
}

.top .sec-news .section-heading p {
  font-size: 16px;
  color: #555;
}

.top .sec-news .custom-posts {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}

.top .sec-news .custom-posts .custom-post-item {
  border-bottom: 1px dotted #CCC;
  /* 点線で上品に */
  padding: 20px 0;
  flex-direction: row;
  /* 日付とタイトルを横並びに */
  gap: 20px;
  align-items: center;
}

.top .sec-news .custom-posts .custom-post-item:last-child {
  border-bottom: none;
}

.top .sec-news .custom-posts .custom-post-item p {
  margin: 0;
  font-weight: normal;
  /* ニュースはあえて細身の文字でスッキリと */
}

.top .sec-news .custom-posts .custom-post-item p a {
  text-decoration: none;
  color: inherit;
}

.top .sec-news .custom-posts .custom-post-item p a:hover {
  text-decoration: underline;
}

.top .sec-news .custom-posts .custom-post-item .post-meta {
  color: #555;
}

.top .sec-news .custom-posts .custom-post-item .post-meta .__date {
  min-width: 120px;
  font-family: 'Arial', sans-serif;
  color: #1F3666;
  /* 事務所ネイビー */
  font-weight: bold;
}

.top .sec-news .custom-posts .custom-post-item .post-meta .__date i {
  display: none;
}

.top .sec-news .custom-posts .custom-post-item .post-meta .__modified {
  display: none;
}

@media screen and (max-width: 991px) {
  .top .sec-news .sec-news {
    padding: 40px 15px;
  }

  .top .sec-news .custom-posts {
    max-width: 100%;
    padding: 0 20px;
  }
}

/* ===========================================
 * Archive Common
 * ===========================================
*/

.archive .site-content .archive__main .archive__container .archive__item .archive__text {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
}

.archive .site-content .archive__main .archive__container .archive__item .archive__text .archive__title {
  color: #465175;
}

.archive .site-content .archive__main .archive__tag_list {

  padding: 1rem;
}

/* 見出し：サイドバーの見出しデザインと同期 */
.archive__tag_list h2 {
  position: relative;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1F3666 !important;
  /* 事務所ネイビー */
  padding: 0 0 15px 1.2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #DDE2E5;
}

/* 縦ライン（ネイビー） */
.archive__tag_list h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 1.6rem;
  background-color: #1F3666;
}

/* 下ライン（ゴールド） */
.archive__tag_list h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 4px;
  background-color: #D4AF37;
  border-radius: 2px;
}

.archive .site-content .archive__main .archive__tag_list .tag-buttons {
  max-width: unset;
  margin-top: 2rem;
}

/* ===========================================
 * Single
 * ===========================================
*/
.single .breadcrumbs {
  margin-top: 1rem;
}

.single .site-content .content__main .singular-header .singular-header__title {
  color: #1F3666;
  border-bottom: 3px solid #1F3666;
  font-weight: 800;
  padding: 1rem 0.6rem;
  line-height: 1.4;
}

/* タイトル直下のタグエリアのみを非表示にする */
.single .singular-header .entry-tags {
  display: none !important;
}


.single .site-content .content__main .singular-header .entry-categories a {
  color: #FFFFFF;
  font-size: 13px;
  ;
  text-decoration: none;
  background-color: #D4AF37;
  padding: 0.4rem 1.2rem;
  border-radius: 4px;
  white-space: nowrap;
}

.single .site-content .content__main .singular-header .entry-categories a i {
  padding-right: 0.25rem;
}

.single .site-content .content__main .singular-header .date-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.single .site-content .content__main .singular-header .date-container .entry-date {
  color: #7C8391;
  font-size: 12px;
}

.single .site-content .content__main .singular-header .singular-header__thumbnail {
  margin-top: 0.25rem;
}

.single .site-content .content__main .entry-content {
  overflow: hidden;
}

@media screen and (max-width: 991px) {
  .single .site-content .content__main .entry-content {
    overflow: initial;
  }
}

/* ===========================================
 * 投稿ページ（single）：監修者セクション修正（画像サイズ調整版）
 * ===========================================
 */

/* 1. コンテナ全体 */
.single .site-content .content__main .entry-content .supervisor-container {
  display: flex !important;
  align-items: center !important;
  padding: 2rem !important;
  background-color: #F8F9FA !important;
  border-radius: 4px !important;
  border: 1px solid #DDE2E5 !important;
  border-left: 6px solid #1F3666 !important;
  /* 事務所ネイビー */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  gap: 2rem !important;
  /* 画像とテキストの間隔を広めに確保 */
}

/* 2. 画像のサイズを固定し、潰れないように設定 */
.single .site-content .content__main .entry-content .supervisor-container img {
  width: 200px !important;
  /* デスクトップでの画像サイズを200pxに固定 */
  height: 200px !important;
  flex-shrink: 0 !important;
  /* 画像が他の要素に押されて潰れるのを防ぐ */
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* 3. 右側テキストエリア：残りの幅をすべて使用 */
.single .site-content .content__main .entry-content .supervisor-container .__right_container {
  flex: 1 !important;
  /* 1を指定することで、画像以外の残り幅をすべて専有させる */
  border-left: 1px solid #D4AF37 !important;
  /* ゴールドのライン */
  padding-left: 2rem !important;
}

/* スマホ表示（767px以下） */
@media screen and (max-width: 767px) {
  .single .site-content .content__main .entry-content .supervisor-container {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem !important;
  }

  /* スマホでは画像を少し小さく（150px程度）調整 */
  .single .site-content .content__main .entry-content .supervisor-container img {
    width: 140px !important;
    height: 140px !important;
    margin-bottom: 1rem !important;
  }

  .single .site-content .content__main .entry-content .supervisor-container .__right_container {
    border-top: 1px solid #D4AF37 !important;
    border-left: none !important;
    padding-top: 1.5rem !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  .single .site-content .content__main .entry-content .supervisor-container .__right_container .__text {
    font-size: 11px !important;
    color: #333333 !important;
    line-height: 1.7 !important;
    text-align: justify;
  }
}

/* テキスト要素の微調整（以前の指定を継承） */
.single .site-content .content__main .entry-content .supervisor-container .__right_container .__company {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #D4AF37 !important;
  margin-bottom: 5px !important;
}

.single .site-content .content__main .entry-content .supervisor-container .__right_container .__sc {
  color: #D4AF37 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  margin-top: -10px !important;
  margin-bottom: 10px !important;
}

.single .site-content .content__main .entry-content .supervisor-container .__right_container .__text {
  font-size: 14px;
  color: #333333 !important;
  line-height: 1.7 !important;
  text-align: justify;
  /* 文章の右端を揃える */
}

.single .site-content .content__main .entry-content .supervisor-container .__right_container .__link {
  font-size: 14px;
  text-align: right;
}

.single .site-content .content__main .entry-content .supervisor-container .__left_container .__supervisor {
  color: #FFFFFF;
  font-size: 13px;
  text-decoration: none;
  font-weight: 800;
  background-color: #D4AF37;
  padding: 0.1rem 1rem;
  border-radius: 2px;
  white-space: nowrap;
  text-align: center;
  margin-top: -1.5rem;
  position: relative;
  /* z-indexを有効にするために必要 */
  z-index: 10;
}

/* ===========================================
 * 投稿ページ（single）：この記事で解決できるお悩みリスト
 * ===========================================
 */

/* 1. コンテナ：色を事務所ネイビーへ、タグが並ぶように調整 */
.single .site-content .content__main .entry-content .tag-list {
  display: flex;
  flex-direction: row;
  /* タグを横並び（折り返しあり）に変更 */
  flex-wrap: wrap;
  align-items: center !important;
  position: relative;
  border: 2px solid #1F3666 !important;
  /* ネイビーの細めの線で知的に */
  background-color: #F8F9FA !important;
  /* 清潔感のある薄グレー */
  border-radius: 0 10px 10px 10px;
  margin-top: 5rem;
  /* 上にラベルが来るので余白を広めに */
  margin-bottom: 4rem;
  padding: 18px 9px 9px;
  gap: 4px !important;
  /* タグ同士の隙間 */
}

/* 2. 中のタグ：タイトル下のような「#~~」形式で小型化 */
.single .site-content .content__main .entry-content .tag-list a {
  display: inline-block;
  font-size: 11px;
  /* 小さめに設定 */
  color: #4B5563;
  /* 落ち着いたダークグレー */
  font-weight: 700 !important;
  padding: 4px 4px !important;
  cursor: default;
  pointer-events: none !important;
  transition: none;
}

/* ハッシュタグを追加 */
.single .site-content .content__main .entry-content .tag-list a::before {
  content: "#" !important;
  color: #D4AF37 !important;
  /* ハッシュだけゴールドにしてアクセントに */
  margin-right: 4px;
}

/* 3. ラベル：文言を変更し、ネイビーで統一 */
.single .site-content .content__main .entry-content .tag-list::before {
  content: "この記事で解決できるお悩み" !important;
  position: absolute;
  top: 0;
  left: -2px;
  /* 枠線に合わせる */
  background-color: #1F3666;
  /* ネイビー */
  color: white !important;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 18px;
  border-radius: 5px 5px 0 0;
  transform: translateY(-100%);
  white-space: nowrap;
}

/* 4. 矢印装飾：お気に入りの要素をそのまま維持 */
.single .site-content .content__main .entry-content .tag-list::after {
  content: "";
  position: absolute;
  bottom: -25px;
  right: 40px;
  width: 50px;
  height: 30px;
  background: url("../img/tag-list-arrow.svg") no-repeat center;
  background-size: contain;
  z-index: 1;
}

/* ===========================================
 * 投稿ページ（single):見出し2
 * ===========================================
 */

.single .site-content .content__main .entry-content h2 {
  position: relative;
  color: #003245 !important;
  /* テキスト色 */
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.6rem);
  padding: 1.5rem 1rem 0.8rem 1.25rem;
  /* 右側に本の画像用の余白を確保 */
  background-color: #F8F9FA !important;
  /* 清潔感のある薄いグレー */
  border-bottom: 2px solid #1F3666 !important;
  /* ネイビーの下線 */
  border-left: none;
  margin-top: 5rem;
  margin-bottom: 2.5rem;
  text-align: left;
  z-index: 2;
  min-height: 76px;
}

/* 左側のゴールドの縦線 */
.single .site-content .content__main .entry-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5px;
  height: 100%;
  /* 背景の高さに合わせる */
  background-color: #D4AF37;
  /* ゴールド */
  border-radius: 2px;
  z-index: 1;
}

/* 右側の本の画像 */
.single .site-content .content__main .entry-content h2::after {


  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(21.38deg);
  /* 中央配置 + 回転 */
  width: 120px;
  height: 84px;
  background-image: url('../img/h2-bg.svg');
  /* SVGファイルのパスを指定してください */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
  z-index: -1;
}

/* ===========================================
 * 投稿ページ（single):見出し３
 * ===========================================
 */
.single .site-content .content__main .entry-content h3 {
  position: relative;
  font-weight: 800;
  color: #1F3666;
  /* 事務所ネイビー */
  background-color: transparent;
  /* 背景色をなくしてスッキリさせる */
  padding: 0.75rem 0 0.75rem 1rem;
  border-bottom: 1.3px dotted #D4AF37;
  /* 下線はネイビー */
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  z-index: 1;
  overflow: visible;
}

.single .site-content .content__main .entry-content h3::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #1F3666;
  border-radius: 2px;
}

/* ===========================================
 * 投稿ページ（single):見出し４
 * ===========================================
 */
.single .site-content .content__main .entry-content h4 {
  position: relative;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1F3666;
  /* 事務所ネイビー */

  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 2px solid #D4AF37;
  /* アクセントのゴールド縦線 */
  border-bottom: 1.3px dotted #DDE2E5;
  /* 控えめなドットの下線 */
  border-radius: 0;
  /* 角丸をなくしてシャープに */
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  overflow: visible;
}



/* ===========================================
 * 投稿ページ（single):見出し５
 * ===========================================
 */
.single .site-content .content__main .entry-content h5 {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  color: #1F3666;
  /* 事務所ネイビー */
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border: none !important;
}

.single .site-content .content__main .entry-content h5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #D4AF37;
  /* アクセントのゴールド */
  border-radius: 1px;
}

/* ===========================================
 * 投稿ページ（single)：説明リスト
 * ===========================================
 */
/* 1. ボックス本体：クリーンな配色と適切な余白 */
.single .site-content .content__main .entry-content .ystdtb-dl {
  padding: 0.5rem !important;
  margin: 2rem 0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* 2. 見出し（ystdtb-dt）：事務所ネイビーとゴールドのアクセント */
.single .site-content .content__main .entry-content .ystdtb-dl .ystdtb-dt {
  font-weight: 600;
  color: #1F3666;
  /* 事務所ネイビー */
  font-size: clamp(14px, 1.6511867905vw, 16px);
  padding: 0.5rem 0.5rem;
  position: relative;
  border-bottom: 1px dotted #1F3666;
  /* 下線をネイビーに */

}

/* 以前の丸ドットを、知的なゴールドの縦線へ変更 */
.single .site-content .content__main .entry-content .ystdtb-dl .ystdtb-dt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.7px;
  height: 100% !important;
  background-color: #D4AF37 !important;
  /* アクセントのゴールド */
  border-radius: 1px !important;
  transform: none !important;
}

/* 3. 説明文（ystdtb-dd）の微調整 */
.single .site-content .content__main .entry-content .ystdtb-dl .ystdtb-dd-box {
  color: #334155 !important;
  padding: 0 0.5rem;
  font-size: 0.8rem !important;
}

/* ===========================================
 * 投稿ページ（single)：引用
 * ===========================================
 */

/* 1. 引用ブロック全体の装飾 */
.single .site-content .content__main .entry-content .wp-block-quote {
  position: relative;
  background-color: #F8F9FA !important;
  /* 清潔感のある薄グレー */
  border-left: 2px solid #1F3666 !important;
  /* 事務所ネイビーの力強い縦線 */
  padding: 2.5rem 2rem 1.5rem 3.5rem !important;
  /* 左側にアイコン用の余白 */
  margin: 3rem 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}


/* 3. 引用文（段落）のテキスト */
.single .site-content .content__main .entry-content .wp-block-quote p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
  font-weight: normal;

}

/* 4. 出典元（cite）：ゴールドで強調 */
.single .site-content .content__main .entry-content .wp-block-quote cite {
  display: block;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: normal;
  color: #D4AF37;
  /* アクセントゴールド */
  text-align: right;
  margin-top: 1rem;
}

.single .site-content .content__main .entry-content .wp-block-quote cite::before {
  content: "出典元：";
  color: #64748B;
  font-weight: normal;
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .single .site-content .content__main .entry-content .wp-block-quote {
    padding: 2rem 1.25rem 1.25rem 2.5rem !important;
  }
}

/* ===========================================
 * 投稿ページ（single)：用語解説ボックス
 * ===========================================
 */

/* 1. ボックス本体：背景と枠線のみのシンプルな構成 */
.single .site-content .content__main .entry-content .container-yougo {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding: 1.5rem !important;
  border: 1px solid #DDE2E5 !important;
  /* 全体を囲む薄い枠線 */
  border-radius: 4px !important;
  z-index: 0;
}

.container-yougo .conteiner-yougo__title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: 12px;
  padding: 10px;
  font-size: 1rem;
  background: #fdfdfd;
  border: solid 1px #fdfdfd;
  border-radius: 4px;
  color: #D4AF37;
  font-weight: bolder;
}

.conteiner-yougo__title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("../img/h2-bg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}

/* 3. タイトル（用語解説）：アイコンと並列に配置 */
.single .site-content .content__main .entry-content .container-yougo p.__title {
  align-items: center;
  /* アイコンと文字を中央揃え */
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1F3666 !important;
  /* 事務所ネイビー */
  margin-bottom: 1rem;
  margin-top: 0.6rem;
}


/* ===========================================
 * 投稿ページ（single):メリデメ
 * ===========================================
 */
/* --- 1. メリット（Merit）：事務所ネイビー基調 --- */
.single .site-content .content__main .entry-content .container-merit {
  position: relative;
  border: 2px solid #1F3666 !important;
  /* 5pxから2pxへ。知的な細めの線に変更 */
  background-color: #FFFFFF !important;
  /* 白背景でスッキリと */
  border-radius: 0 10px 10px 10px;
  margin-top: 4.5rem;
  margin-bottom: 3.5rem;
  padding: 1.5rem 1rem;
}

.single .site-content .content__main .entry-content .container-merit::before {
  content: "メリット";
  position: absolute;
  top: -2px;
  /* 枠線に合わせる */
  left: -2px;
  background-color: #1F3666 !important;
  /* 事務所ネイビー */
  color: white !important;
  font-weight: bold;
  padding: 6px 20px !important;
  border-radius: 5px 5px 0 0;
  transform: translateY(-100%);
  font-size: 0.95rem;
}

/* メリットのリスト装飾 */
.single .site-content .content__main .entry-content .container-merit ul li {
  padding: 1rem 0 !important;
  border-bottom: 1px solid #EEEEEE !important;
  color: #334155 !important;
  font-weight: 600;
}

.single .site-content .content__main .entry-content .container-merit ul li::before {
  content: "\f058" !important;
  /* チェック入りサークルに変更 */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
  font-weight: 900;
  color: #1F3666 !important;
  /* ネイビー */
  padding-right: 0.75rem;
}

/* --- 2. デメリット（Demerit）：アクセントゴールド基調 --- */
.single .site-content .content__main .entry-content .container-demerit {
  position: relative;
  border: 2px solid #D4AF37 !important;
  /* ゴールドに変更 */
  background-color: #FFFFFF !important;
  border-radius: 0 10px 10px 10px;
  margin-top: 4.5rem;
  margin-bottom: 3.5rem;
  padding: 1.5rem 1rem !important;
}

.single .site-content .content__main .entry-content .container-demerit::before {
  content: "デメリット・注意点";
  /* 文言をより丁寧に */
  position: absolute;
  top: -2px;
  left: -2px;
  background-color: #D4AF37 !important;
  /* アクセントゴールド */
  color: white !important;
  font-weight: bold;
  padding: 6px 20px !important;
  border-radius: 5px 5px 0 0;
  transform: translateY(-100%);
  font-size: 0.95rem;
}

/* デメリットのリスト装飾 */
.single .site-content .content__main .entry-content .container-demerit ul li {
  padding: 1rem 0 !important;
  border-bottom: 1px solid #EEEEEE !important;
  color: #334155 !important;
  font-weight: 600;
}

.single .site-content .content__main .entry-content .container-demerit ul li::before {
  content: "\f06a" !important;
  /* 警告サークルに変更 */
  font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important;
  font-weight: 900;
  color: #D4AF37 !important;
  /* ゴールド */
  padding-right: 0.75rem;
}

/* ===========================================
 * 投稿ページ（single):ステップ
 * ===========================================
 */

/* 1. コンテナ：余白と背景の調整 */
.single .site-content .content__main .entry-content .container-step {
  position: relative;
  padding: 2.5rem 1.5rem !important;
  background-color: #FFFFFF !important;
  /* 白背景で清潔感を */
  border: 1px solid #DDE2E5 !important;
  border-radius: 8px !important;
  margin: 3rem 0 !important;
}

/* 2. 縦のライン：事務所ゴールドで「導き」を表現 */
.single .site-content .content__main .entry-content .container-step .wp-block-list {
  counter-reset: step-counter;
  list-style: none !important;
  padding-left: 0 !important;
  position: relative;
}

.single .site-content .content__main .entry-content .container-step .wp-block-list::before {
  content: "";
  position: absolute;
  top: 2.5rem;
  left: 12px;
  /* 中央に合わせる */
  width: 1px;
  height: calc(100% - 4.5rem);
  /* 最後の項目の下まで届かないよう調整 */
  background-color: #D4AF37;
  /* アクセントゴールド */
  z-index: 1;
}

/* 3. 各ステップの項目と番号 */
.single .site-content .content__main .entry-content .container-step .wp-block-list li {
  display: flex;
  align-items: flex-start !important;
  /* 上揃えに変更 */
  flex-wrap: wrap;
  position: relative;
  padding: 1.5rem 1rem 1.5rem 3.5rem !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #1F3666 !important;
  /* 事務所ネイビー */
}

/* 番号の丸：事務所ネイビー */
.single .site-content .content__main .entry-content .container-step .wp-block-list li::before {
  counter-increment: step-counter;
  content: counter(step-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px !important;
  height: 25px !important;
  background-color: #1F3666;
  /* ネイビー */
  color: #FFFFFF !important;
  font-size: 1.25rem !important;
  font-weight: 900;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 1.5rem;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 4. ステップ内の補足説明（入れ子リスト）の調整 */
.single .site-content .content__main .entry-content .container-step .wp-block-list li ul {
  width: 100%;
  list-style: none !important;
  margin: 1rem 0 0 !important;
  padding: 1rem 0 0 !important;
  border-top: 1px dotted #DDE2E5 !important;
  border-left: none !important;
  background: none !important;
}

/* 不要な疑似要素の削除 */
.single .site-content .content__main .entry-content .container-step .wp-block-list li ul::before {
  display: none !important;
}

/* リストアイテム（li）：Flexboxでドットと文字を中央揃えに */
.single .site-content .content__main .entry-content .container-step .wp-block-list li ul li {
  color: #4B5563 !important;
  border: none !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0 !important;
  /* 上下の余白を微調整 */
  background: none !important;
  /* 卵のような背景を消去 */
  /* Flexboxを適用して垂直方向を中央揃えにする */
  display: flex !important;
  align-items: center !important;
}

/* 子要素のドット（::before）：シンプルなゴールドドットとして再定義 */
.single .site-content .content__main .entry-content .container-step .wp-block-list li ul li::before {
  content: "" !important;
  /* 文字ではなく図形として描画 */
  display: inline-block !important;
  width: 6px !important;
  /* ドットのサイズ */
  height: 6px !important;
  background-color: #D4AF37 !important;
  /* ゴールドの塗りつぶし */
  border-radius: 50% !important;
  /* 完全な丸にする */
  margin-right: 10px !important;
  /* テキストとの間隔 */

  /* 以下、テーマのデフォルトスタイルを打ち消すための強力なリセット */
  position: static !important;
  border: none !important;
  top: auto !important;
  left: auto !important;
  box-shadow: none !important;
  /* 影を消去 */
  transform: none !important;
}



/* ===========================================
 * 投稿ページ（single):表デザイン
 * ===========================================
 */

/* 1. テーブル全体の器：角丸を適用し、隙間（spacing）をなくしてモダンに */
.single .site-content .content__main .entry-content .wp-block-table table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #DDE2E5 !important;
  border-radius: 8px !important;
  overflow: hidden;
  width: 100%;
  margin: 2.5rem 0 !important;
  font-size: 15px;
}

/* 2. ヘッダー（th）：事務所ネイビーで信頼感を演出 */
.single .site-content .content__main .entry-content .wp-block-table table th {
  background-color: #1F3666 !important;
  /* ロイヤルネイビー */
  color: #FFFFFF !important;
  padding: 1.25rem !important;
  font-weight: 700;
  text-align: center;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* 縦に薄い境界線 */
}

.single .site-content .content__main .entry-content .wp-block-table table th:last-child {
  border-right: none !important;
}

/* 3. セル（td）：中央揃えを廃止し、左揃えで読みやすさを向上 */
.single .site-content .content__main .entry-content .wp-block-table table td {
  padding: 1.25rem !important;
  background-color: #FFFFFF !important;
  color: #334155 !important;
  line-height: 1.7;
  border: none !important;
  border-bottom: 1px solid #EEEEEE !important;
  text-align: left !important;
  /* 基本は左揃え。数字などは適宜中央が良いですが、基本は左が読みやすいです */
  vertical-align: middle;
}

/* 4. ゼブラ（シマ模様）：1行おきに色を変えて視線移動をサポート */
.single .site-content .content__main .entry-content .wp-block-table table tr:nth-child(even) td {
  background-color: #F8F9FA !important;
  /* 非常に薄いグレー */
}

.single .site-content .content__main .entry-content .wp-block-table table tr:last-child td {
  border-bottom: none !important;
}

/* 5. スマホ対応：横に長い表でもレイアウトが崩れない設定 */
@media screen and (max-width: 767px) {
  .single .site-content .content__main .entry-content .wp-block-table {
    overflow-x: auto !important;
    display: block !important;
    border-radius: 8px;
  }

  .single .site-content .content__main .entry-content .wp-block-table table {
    min-width: 500px !important;
    /* スマホでもこの幅を保ってスクロールさせる */
  }

  .single .site-content .content__main .entry-content .wp-block-table table td,
  .single .site-content .content__main .entry-content .wp-block-table table th {
    padding: 1rem !important;
    font-size: 14px;
  }
}

/* ===========================================
 * About
 * ===========================================
*/
.about .singular-header {
  display: none;
}

.about .content__main {
  max-width: 969px;
  margin: 0 auto;
}

.about .sec-about h2 {
  position: relative !important;
  color: #1F3666 !important;
  /* 事務所ネイビー */
  font-weight: 800 !important;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem) !important;
  padding: 1.25rem 1.5rem 1.25rem 2.5rem !important;
  background-color: #F8F9FA !important;
  /* 薄グレー背景 */
  border-left: 8px solid #1F3666 !important;
  /* ネイビーの縦線 */
  border-bottom: 1px solid #DDE2E5 !important;
  margin-top: 5rem !important;
  margin-bottom: 2.5rem !important;
  text-align: left !important;
  /* 以前のベタ塗りと斜めカットを強制解除 */
  background-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

.about .sec-about h2 i {
  margin-right: 0.5rem;
}

.about .sec-about p {
  color: #334155 !important;
  line-height: 2 !important;
  margin-bottom: 2rem !important;
  font-size: 16px;
}

/* ===========================================
 * Contact
 * ===========================================
*/
.contact .singular-header {
  display: none;
}

.contact .content__main {
  max-width: 969px;
  margin: 0 auto;
}

.contact h2 {
  font-family: futura-pt, sans-serif;
  font-size: clamp(24px, 4.1279669763vw, 40px);
  color: #0171E3;
  display: block;
  border-top: 1px solid #BABFBF;
  border-bottom: 1px solid #BABFBF;
  padding: 0.5rem 0;
  letter-spacing: -1px;
}

.contact .__sub_title {
  font-size: 12px;
  color: #2F2F2F;
  margin-top: 1rem;
}

.contact .__lead {
  font-weight: bold;
  font-size: clamp(18px, 2.4767801858vw, 24px);
  color: #25447F;
}

.contact .__lead strong {
  color: #71C4C4;
}

.contact .__text {
  color: #797676;
  font-size: 14px;
  margin-bottom: 3rem;
}

.contact .contact-form {
  width: 100%;
  margin: 0 auto;
}

.contact .contact-form dl {
  margin-bottom: 2rem;
}

.contact .contact-form dt,
.contact .contact-form dd {
  font-weight: normal;
}

.contact .contact-form dt p {
  margin-bottom: 0;
}

.contact .contact-form dd {
  margin-left: 0;
}

.contact .contact-form span.required {
  color: red;
  display: inline-block;
  margin-left: 1rem;
}

.contact .contact-form .__flex_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.contact .contact-form label {
  display: block;
  font-weight: bold;
  margin: 10px 0 5px;
  color: #333;
}

.contact .contact-form input,
.contact .contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 5px;
  font-size: 16px;
  background: white;
  transition: border-color 0.3s;
  background-color: #F4F8FE;
  border-color: #D4DDE7;
}

.contact .contact-form input:focus,
.contact .contact-form textarea:focus {
  border-color: #0072DC;
  outline: none;
}

.contact .contact-form textarea {
  height: 150px;
  resize: vertical;
}

.contact .contact-form .name-fields {
  display: flex;
  gap: 10px;
}

.contact .contact-form .name-fields label,
.contact .contact-form .name-fields input {
  flex: 1;
}

.contact .contact-form .privacy-policy {
  margin: 20px 0;
  font-size: 14px;
  color: #666;
}

.contact .contact-form .privacy-policy .__flex_container {
  justify-content: flex-start;
  gap: 0;
}

.contact .contact-form .privacy-policy span.required {
  margin-left: 0;
}

.contact .contact-form .privacy-policy a {
  color: #0072DC;
  text-decoration: none;
  font-weight: bold;
}

.contact .contact-form .privacy-policy a:hover {
  text-decoration: underline;
}

.contact .contact-form .privacy-policy .wpcf7-list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.contact .contact-form .privacy-policy .wpcf7-list-item input[type=checkbox] {
  margin-right: 10px;
}

.contact .contact-form .privacy-policy .wpcf7-list-item .wpcf7-list-item-label {
  white-space: nowrap;
}

.contact .contact-form .submit-button {
  text-align: center;
}

.contact .contact-form .submit-button input[type=submit] {
  background: #0072DC;
  color: white;
  font-size: 18px;
  padding: 12px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: bold;
}

.contact .contact-form .submit-button input[type=submit]:hover {
  background: #005BB5;
}


/* ===========================================
 * お問合せフォーム（詐欺相談専用）
 * ===========================================
 */
.fraud-contact-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: #FFFFFF;
  border: 1px solid #E0E4E7;
}

.fraud-contact-form .form-group {
  margin-bottom: 2rem;
}

/* ラベルの装飾：事務所ネイビー */
.fraud-contact-form label {
  display: block;
  font-weight: 700;
  color: #1F3666;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.fraud-contact-form label span {
  background: #D4AF37;
  /* ゴールドの「必須」バッジ */
  color: #FFF;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 10px;
  vertical-align: middle;
}

/* 入力フィールドの洗練 */
.fraud-contact-form input[type="text"],
.fraud-contact-form input[type="email"],
.fraud-contact-form input[type="tel"],
.fraud-contact-form select,
.fraud-contact-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #DDE2E5;
  border-radius: 4px;
  background-color: #F9FAFB;
  font-size: 16px;
  /* スマホでのズーム防止 */
  transition: all 0.3s ease;
}

.fraud-contact-form input:focus,
.fraud-contact-form textarea:focus {
  border-color: #1F3666;
  background-color: #FFF;
  box-shadow: 0 0 0 4px rgba(31, 54, 102, 0.1);
  outline: none;
}

/* 送信ボタン：強力なコンバージョン導線 */
.fraud-contact-form .form-submit {
  text-align: center;
  margin-top: 3rem;
}

.fraud-contact-form .wpcf7-submit {
  background: linear-gradient(135deg, #D4AF37 0%, #B6922E 100%);
  /* 高級感のあるゴールド */
  color: #FFF !important;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 18px 60px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}

.fraud-contact-form .wpcf7-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
}

.fraud-contact-form .privacy-note {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 1.5rem;
}

/* ===========================================
 * Sitemap
 * ===========================================
*/
.sitemap .singular-header {
  display: none;
}

.sitemap .content__main {
  max-width: 969px;
  margin: 0 auto;
}

.sitemap .sec-sitemap h2 {
  font-size: clamp(18px, 2.4767801858vw, 24px);
  font-weight: bold;
  background-color: #25447F;
  color: #FFF;
  display: block;
  margin-top: 0;
  padding: 1rem 2rem;
}

.sitemap .sec-sitemap h2 i {
  margin-right: 0.5rem;
}

.sitemap .sec-sitemap .__container .__list_container {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 2rem;
}

@media screen and (max-width: 767px) {
  .sitemap .sec-sitemap .__container .__list_container {
    grid-template-columns: 1fr;
  }
}

.sitemap .sec-sitemap .__container .__list_container .__list h3 {
  font-size: clamp(14px, 1.6511867905vw, 16px);
  font-weight: bold;
  margin: 0;
  margin-bottom: 0.5rem;
  padding: 0;
  border-bottom: 1px solid #25447F;
}

.sitemap .sec-sitemap .__container .__list_container .__list h3 i {
  margin-right: 0.5rem;
}

.sitemap .sec-sitemap .__container .__list_container .__list .category-list,
.sitemap .sec-sitemap .__container .__list_container .__list .tag-list,
.sitemap .sec-sitemap .__container .__list_container .__list .post-list {
  list-style: none;
}

.sitemap .sec-sitemap .__container .__list_container .__list .category-list li,
.sitemap .sec-sitemap .__container .__list_container .__list .tag-list li,
.sitemap .sec-sitemap .__container .__list_container .__list .post-list li {
  padding: 0.5rem 0;
}

.sitemap .sec-sitemap .__container .__list_container .__list .category-list li a,
.sitemap .sec-sitemap .__container .__list_container .__list .tag-list li a,
.sitemap .sec-sitemap .__container .__list_container .__list .post-list li a {
  text-decoration: none;
  font-size: clamp(12px, 1.4447884417vw, 14px);
}

.sitemap .sec-sitemap .__container .__list_container .__list .category-list li a:hover,
.sitemap .sec-sitemap .__container .__list_container .__list .tag-list li a:hover,
.sitemap .sec-sitemap .__container .__list_container .__list .post-list li a:hover {
  text-decoration: underline;
}

.sitemap .sec-sitemap .__container .__list_container .__list .category-list li ul,
.sitemap .sec-sitemap .__container .__list_container .__list .tag-list li ul,
.sitemap .sec-sitemap .__container .__list_container .__list .post-list li ul {
  list-style: none;
}


/* ===========================================
 * Site Header
 * 青山北町法律事務所・詐欺返金特化仕様
 * ===========================================
*/

/* --- ヘッダーレイアウトの再定義 --- */
.site-header {
  background-color: #FFF;
  border-bottom: 1px solid #E0E4E7;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.site-header>.container {
  max-width: 100% !important;
  margin: 0;
  padding: 0;
}

.site-header>.container .site-header__content {
  display: flex;
  flex-direction: column;
  /* ロゴエリアとナビを縦に並べる */
}

/* --- ロゴと連絡先エリア（PC） --- */
/* ロゴとコンタクトを横並びにし、上下中央に揃える */
.site-header>.container .site-header__content .site-branding {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  /* これで上下中央を同期 */
  height: 120px;
  /* 高さを少し広げ、余裕を持たせる */
  padding: 0 40px;
  border-bottom: 1px solid #F0F2F5;

}

@media screen and (max-width: 991px) {
  .site-header>.container .site-header__content .site-branding {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* 垂直方向の中央揃え */
    height: 74px !important;
    /* ヘッダーの高さを少し広げて安定させる */
    padding: 0 15px !important;
  }
}

.site-header>.container .site-header__content .site-branding .site-title {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

.site-header>.container .site-header__content .site-branding .site-title .custom-logo {
  width: 320px;
  /* ロゴサイズ調整 */
  height: auto;
}

@media screen and (max-width: 991px) {
  .site-header>.container .site-header__content .site-branding .site-title .custom-logo {
    width: 260px !important;
    /* ボタンと並んでも苦しくないサイズに縮小 */
    height: auto;
    margin: 0 !important;
  }
}

/* --- ヘッダー右側：連絡先パーツ --- */
.site-header>.container .site-header__content .site-branding .site-contact {
  display: flex;
  align-items: center;
  margin: 0;
}

.site-header>.container .site-header__content .site-branding .site-contact .__contact_list {
  display: flex;
  align-items: center;
  /* TELとLINEボタンの頭を揃える */
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header>.container .site-header__content .site-branding .site-contact .__contact_list .__tel {
  line-height: 1.2;
}

.site-header>.container .site-header__content .site-branding .site-contact .__contact_list .__tel .__label {
  display: block;
  font-size: 10px;
  color: #1F3666;
  /* ロイヤルネイビー */
  font-weight: bold;
  line-height: 1.2;
}

.site-header>.container .site-header__content .site-branding .site-contact .__contact_list .__tel a {
  text-decoration: none;
  color: #1F3666;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

/* LINE相談ボタン（CSS装飾） */
.line-btn {
  background-color: #06C755;
  color: #FFF !important;
  padding: 8px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  box-shadow: 0 4px 0 #05a346;
  transition: all 0.2s;
}

.line-btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #05a346;
}

/* --- グローバルナビゲーション --- */
.site-header>.container .site-header__content .global-nav {
  background-color: #FFF !important;
  /* 濃紺の帯を廃止 */
  padding: 0;
}

.site-header>.container .site-header__content .global-nav__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  /* メニューを中央揃えにして美しく */
}

.site-header>.container .site-header__content .global-nav__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header>.container .site-header__content .global-nav__menu>.menu-item a {
  color: #1F3666 !important;
  /* 事務所ネイビーに変更 */
  font-size: 15px;
  font-weight: 700;
  padding: 20px 30px;
  /* 余白を広げてスッキリ */
  width: auto;
  /* 幅固定を解除して自然に */
  border-right: none !important;
  /* 縦線を廃止して開放感を */
  position: relative;
  transition: color 0.3s ease;
}

.site-header>.container .site-header__content .global-nav__menu>.menu-item:hover {
  background-color: transparent !important;
}

.site-header>.container .site-header__content .global-nav__menu>.menu-item a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #D4AF37;
  /* ゴールドのアクセント */
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.site-header>.container .site-header__content .global-nav__menu>.menu-item:hover a {
  color: #D4AF37 !important;
}

.site-header>.container .site-header__content .global-nav__menu>.menu-item:hover a::after {
  width: 40px;
  /* ホバー時にゴールドの線が中央から広がる */
}

/* --- スマホメニュー --- */
@media screen and (max-width: 991px) {

  /* 1. メニュー全体のコンテナ設定 */
  .global-nav {
    display: none;
    /* 初期状態は非表示（JSでスライド開閉するため） */
    position: absolute;
    top: 70px;
    /* ヘッダーの高さに合わせる */
    left: 0;
    width: 100%;
    background-color: #FFFFFF !important;
    z-index: 999;
    padding: 0 !important;
  }

  /* 2. メニューリストを縦並びに変更 */
  .global-nav__menu {
    display: flex !important;
    flex-direction: column !important;
    /* 横並びから縦並びに強制変更 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 3. 各メニュー項目（li）のスタイル調整 */
  .global-nav__menu>.menu-item {
    width: 100% !important;
    border-bottom: 1px solid #EEEEEE;
    /* 項目間の区切り線 */
    border-right: none !important;
    /* PC用の右線を消去 */
  }

  /* 4. メニュー内リンク（a）のスタイル調整 */
  .global-nav__menu>.menu-item a {
    display: block !important;
    width: 100% !important;
    padding: 1.25rem 1.5rem !important;
    /* 押しやすい高さと余白 */
    color: #1F3666 !important;
    /* 事務所ネイビー */
    font-size: 16px !important;
    font-weight: 700;
    text-align: left !important;
    /* 左揃え */
    background-color: transparent !important;
  }

  /* ホバー（タップ）時の色変化 */
  .global-nav__menu>.menu-item a:active,
  .global-nav__menu>.menu-item a:hover {
    background-color: #F8F9FA !important;
    color: #D4AF37 !important;
    /* ゴールド */
  }

  /* 以前のPC用アンダーライン装飾をSPでは無効化 */
  .global-nav__menu>.menu-item a::after {
    display: none !important;
  }

  /* 3. トグルボタン（ハンバーガー）の視認性と位置 */
  .global-nav__toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent !important;
    /* 背景は透明に */
    border: none !important;
    height: 70px !important;
    /* ロゴと同じ高さにする（これで段差が解消） */
    width: 60px !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1001;
    cursor: pointer;
  }

  /* アイコン（三本線）と「menu」テキストの色をネイビーに */
  .global-nav__toggle .ys-icon,
  .global-nav__toggle .global-nav__toggle-label {
    color: #1F3666 !important;
    /* 事務所ネイビーで視認性を確保 */
    fill: #1F3666 !important;
    transition: color 0.3s ease;
  }

  /* 展開時（×ボタン時）の視認性 */
  .global-nav__toggle.is-active .ys-icon,
  .global-nav__toggle.is-active .global-nav__toggle-label {
    color: #1F3666 !important;
    /* 閉じる時もネイビーで見えるようにする */
  }

  .global-nav__toggle .global-nav__toggle-label {
    font-size: 10px !important;
    font-weight: 700;
    margin-top: 2px;
  }

  /* 4. メニュー展開位置の調整 */
  .global-nav {
    top: 70px !important;
    /* ヘッダーの高さ分下げる */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
}

/* ===========================================
 * ハンバーガーメニュー内：追加コンテンツ（最終版）
 * ===========================================
 */

/* 1. メニュー上部の空白解消 */
@media screen and (max-width: 991px) {
  .global-nav {
    padding-top: 62px !important;
    /* 上部の巨大な余白を削除 */
    background-color: #FFFFFF !important;
  }

  .global-nav .menu {
    margin-top: 0 !important;
    padding-top: 50px !important;
    /* 閉じるボタン(×)との間隔 */
  }
}

/* 追加コンテンツ全体のコンテナ */
.__container_sp {
  padding: 2rem 1.5rem;
  background-color: #FFFFFF;
  /* メニュー項目と区別するための薄いグレー */
  border-top: 1px solid #dee2e6;
}

/* 2. 違和感バナーエリア */
.__container_sp .__sp_menu_banner {
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.__container_sp .__sp_menu_banner img {
  width: 100%;
  /* バナーを横幅いっぱいに */
  height: auto;
  display: block;
}

/* 3. 電話エリア：事務所ネイビー */
.__container_sp .__tel {
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background-color: #FFFFFF;
  border: 2px solid #1F3666;
  /* 事務所ネイビー */
  border-radius: 12px;
}

.__container_sp .__tel .__label {
  display: block;
  font-size: 12px;
  color: #1F3666;
  font-weight: 700;
  margin-bottom: 5px;
}

.__container_sp .__tel .__number {
  display: block;
  font-size: 24px;
  font-weight: 900;
  color: #1F3666 !important;
  text-decoration: none;
}

/* 4. LINEエリア：CSSボタン設計 */
.__container_sp .__line_btn_sp {
  text-align: center;
}

/* 画像の代わりにCSSで組むLINEボタン */
.btn-line-css {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #06C755;
  /* LINE公式グリーン */
  color: #FFFFFF !important;
  padding: 14px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(6, 199, 85, 0.2);
}

.btn-line-css i {
  font-size: 24px;
}

.__container_sp .__line_btn_sp .__line_caption {
  font-size: 11px;
  color: #666;
  margin-top: 10px;
  font-weight: 600;
}

/* --- メインビジュアル（FV）の改修 --- */
.site-header .site-header-image .__h1_container h1 {
  color: #1F3666;
  background-color: rgba(255, 255, 255, 0.95);
  border: 4px solid #D4AF37;
  /* ゴールドの枠線で高級感と信頼感 */
  padding: 2rem 5rem;
  border-radius: 0;
  /* 直角にして硬派な法律事務所のイメージに */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.site-header .site-header-image .__h1_container h1::before,
.site-header .site-header-image .__h1_container h1::after {
  display: none;
  /* 以前の「虫眼鏡」や「吹き出しの丸」を削除 */
}

/* パンくず */
.breadcrumbs .breadcrumbs__list .breadcrumbs__item::before {
  content: ">";
  margin: 0 8px;
  color: #999;
}

/* ===========================================
 * Contents Header
 * ===========================================
*/
/* page common */
/* ===========================================
 * footer
 * ===========================================
*/
.entry-footer .footer-contact {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #1F3666;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100;
  display: none;
}

.entry-footer .footer-contact .__contact_list {
  list-style: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
}

.entry-footer .footer-contact .__contact_list .__line {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.entry-footer .footer-contact .__contact_list .__line a {
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
}

.site-footer .footer-main {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.site-footer .footer-main .site-info {
  margin: 0;
  padding: 0.5rem 0;
}

.site-footer .footer-main .site-info p {
  font-size: 12px;
  color: #FFF;
}

.site-footer .__footer_container {
  width: 100%;
  height: 100%;
  background-color: #1F3666;
  /* ロイヤルネイビー */
}

.site-footer .__footer_container .__inner_container {
  max-width: 821px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.site-footer .__footer_container .__inner_container .__title_container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid #94A0BF;
  margin-bottom: 2rem;
}

.site-footer .__footer_container .__inner_container .__title_container .__title,
.site-footer .__footer_container .__inner_container .__title_container i {
  font-size: clamp(16px, 2.0639834881vw, 20px);
  color: #94A0BF;
  margin: 0;
  padding: 0;
}

.site-footer .__footer_container .__inner_container .__list_rows {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

@media screen and (max-width: 767px) {
  .site-footer .__footer_container .__inner_container .__list_rows {
    flex-direction: column;
  }
}

.site-footer .__footer_container .__inner_container .__list_rows .__title {
  font-size: clamp(14px, 1.6511867905vw, 16px);
  font-weight: bold;
  color: #FFF;
  margin: 0;
  border-left: 3px solid #D4AF37;
  /* 見出し横にゴールドのライン */
  padding-left: 10px;
  margin-bottom: 1.5rem;
}

.site-footer .__footer_container .__inner_container .__list_rows .__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .__footer_container .__inner_container .__list_rows .__list li {
  margin: 0;
  padding: 0;
  position: relative;
}

.site-footer .__footer_container .__inner_container .__list_rows .__list li a:hover {
  color: #D4AF37 !important;
  /* ホバー時はゴールドに */
  text-decoration: underline;
}

.site-footer .__footer_container .__inner_container .__list_rows .__list li::before {
  position: absolute;
  content: "";
  width: 0.5rem;
  height: 1px;
  top: 50%;
  left: 0;
  background-color: #FFF;
  transform: translateY(-50%);
  margin-right: 0.25rem;
}

.site-footer .__footer_container .__inner_container .__list_rows .__list li a {
  text-decoration: none;
  color: #FFF;
  font-size: clamp(12px, 1.4447884417vw, 14px);
  padding-left: 1rem;
}

.site-footer .__footer_container .__inner_container .__list_rows .__other_01 li a,
.site-footer .__footer_container .__inner_container .__list_rows .__other_02 li a {
  padding-left: 0;
}

.site-footer .__footer_container .__inner_container .__list_rows .__other_01 li::before,
.site-footer .__footer_container .__inner_container .__list_rows .__other_02 li::before {
  display: none;
}

.site-footer .__footer_container .__inner_container .__footer_logo {
  width: 100%;
  margin: 2rem 0;
}

.site-footer .__footer_container .__inner_container .__footer_logo img {
  width: 100%;
  height: 100%;
}

.site-footer .__footer_container .__inner_container .__info_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

@media screen and (max-width: 767px) {
  .site-footer .__footer_container .__inner_container .__info_container {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}

.site-footer .__footer_container .__inner_container .__info_container .__company_info {
  color: #FFF;
  margin: 0;
  padding: 0;
}

.site-footer .__footer_container .__inner_container .__info_container .__company_info p {
  font-size: 12px;
  font-weight: normal;
  color: #FFFFFF;
  opacity: 0.8;
  margin: 0;
  padding: 0;
}

.site-footer .__footer_container .__inner_container .__info_container .__company_info p.__name {
  font-weight: bold;
  font-size: 1.2rem;
  opacity: 1;
  color: #D4AF37 !important;
  /* 事務所名はゴールドで強調 */
}

.site-footer .__footer_container .__inner_container .__info_container .__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .__footer_container .__inner_container .__info_container .__list li {
  margin: 0;
  padding: 0;
}

.site-footer .__footer_container .__inner_container .__info_container .__list li a {
  text-decoration: none;
  color: #FFF;
  font-size: 12px;
}

.footer-main {
  background-color: #1F3666 !important;
}

button#back-to-top {
  right: 3vh;
  bottom: 3vh;
}

@media screen and (max-width: 767px) {
  button#back-to-top {
    bottom: 5vh;
  }
}

.__fix_bnr {
  position: fixed;
  top: 50%;
  right: 1rem;
  width: 176px;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100;
}

.__fix_bnr a {
  display: block;
  width: 100%;
  height: 100%;
}

.__fix_bnr a img {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .__fix_bnr {
    display: none;
  }
}

/* --- フッターコピーライトエリアの装飾 --- */
.site-info {
  background-color: #1a2e56;
  /* フッターより一段暗いネイビー */
  padding: 1.5rem 0;
  text-align: center;
}

.footer-copy {
  font-size: 12px;
  /* 上品な小さめサイズ */
  color: rgba(255, 255, 255, 0.6) !important;
  /* 控えめな透過白 */
  letter-spacing: 0.05em;
  font-weight: normal;
}

/* --- フッターロゴのコンパクト化 --- */
.site-footer .__footer_container .__inner_container .__footer_logo {
  width: 100%;
  margin: 3rem 0 2rem;

}

.site-footer .__footer_container .__inner_container .__footer_logo a {
  display: inline-block;
  /* リンクの当たり判定をロゴに合わせる */
  transition: opacity 0.3s ease;
}

.site-footer .__footer_container .__inner_container .__footer_logo a:hover {
  opacity: 0.7;
  /* ホバー時に少し薄くしてクリックできることを伝えます */
}

.site-footer .__footer_container .__inner_container .__footer_logo img {
  width: auto;
  max-width: 320px;
  /* ここで「コンパクトさ」を調整します（例: 280px〜350px程度） */
  height: auto;
}

@media screen and (max-width: 767px) {
  .site-footer .__footer_container .__inner_container .__footer_logo img {
    max-width: 240px;
    /* スマホではさらに一回り小さく */
  }
}

/* ===========================================
 * Sidebar (青山北町法律事務所 詐欺返金仕様)
 * ===========================================
 */

/* 1. 検索ウィジェットの調整 */
aside.sidebar .widget_search form .wp-block-search__label {
  display: none;
  /* ラベル非表示 */
}

aside.sidebar .widget_search form .wp-block-search__inside-wrapper {
  border: 2px solid #DDE2E5;
  border-radius: 4px;
  overflow: hidden;
}

aside.sidebar .widget_search form .wp-block-search__inside-wrapper .wp-block-search__input {
  padding: 10px 12px;
  border: none;
  font-size: 14px;
}

aside.sidebar .widget_search form .wp-block-search__inside-wrapper .wp-block-search__button {
  background-color: #1F3666;
  /* 事務所ネイビー */
  color: #FFFFFF;
  border: none;
  padding: 0 15px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

aside.sidebar .widget_search form .wp-block-search__inside-wrapper .wp-block-search__button:hover {
  background-color: #D4AF37;
  /* ホバーでゴールドに */
}

/* 2. ウィジェット見出しのデザイン（共通） */
/* 通常のウィジェットタイトルとブロック見出しの両方に対応 */
aside.sidebar .widget-title,
aside.sidebar .widget_block p.sidebar-header {
  position: relative;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1F3666 !important;
  padding: 0 0 10px 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #DDE2E5;
  display: block;
}

/* ロゴの装飾と同期させた左ラインと下ライン */
aside.sidebar .widget-title::before,
aside.sidebar .widget_block p.sidebar-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 1.5rem;
  background-color: #1F3666;
  /* 事務所ネイビー */
}

aside.sidebar .widget-title::after,
aside.sidebar .widget_block p.sidebar-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #D4AF37;
  /* ゴールドアクセント */
}

/* 3. 最新記事リストの調整（日付を下に、文字を読みやすく） */
aside.sidebar .widget_block .wp-block-latest-posts__list {
  margin-top: 1rem;
  padding-left: 0;
  list-style: none;
}

aside.sidebar .widget_block .wp-block-latest-posts__list li {
  display: flex;
  flex-direction: column-reverse;
  /* 日付をタイトルの下に配置 */
  padding: 12px 0;
  border-bottom: 1px dotted #DDE2E5;
}

aside.sidebar .widget_block .wp-block-latest-posts__list li a {
  color: #333;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  margin-bottom: 5px;
}

aside.sidebar .widget_block .wp-block-latest-posts__list li a:hover {
  color: #D4AF37;
}

aside.sidebar .widget_block .wp-block-latest-posts__list li time {
  color: #919BA5;
  font-size: 12px;
  font-weight: normal;
}

/* 4. カスタムバナーウィジェット（追加） */
.sidebar-link-banner {
  display: block;
  background-color: #FFFFFF;
  border: 1px solid #DDE2E5;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.sidebar-link-banner:hover {
  border-color: #D4AF37;
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.1);
}

.sidebar-link-banner .__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1F3666;
  font-weight: 700;
}

.sidebar-link-banner .__label i {
  color: #D4AF37;
}


/* ---20260119追記開始 --- */
/* ===========================================
 * 固定ページ・アーカイブ共通：ヘッダーエリア刷新
 * ===========================================
 */

/* 1. 以前の「site-header-image」に関連する古い装飾を完全にリセット */
.site-header-image,
.site-header-image .__bg,
.site-header-image .__h1_container {
  display: none !important;
  /* 古いアイコンやSVG背景を物理的に消去 */
}

/* 2. 新しい固定ページ用ヘッダーのデザイン */
.page-header-clean {
  background-color: #F8F9FA !important;
  /* 清潔感のある薄グレー */
  padding: 2.5rem 0 2rem !important;
  text-align: center;
  border-bottom: 1px solid #E0E4E7;

}

/* 3. アーカイブ側（archive-header-new）と固定ページ側のタイトルの見た目を統一 */
.page-header-clean .page-title-main,
.archive-header-new .archive-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1F3666 !important;
  /* 事務所ネイビー */
  margin: 0;
  display: inline-block;
  position: relative;
  padding-bottom: 15px;
}

/* タイトル下のゴールドライン */
.page-header-clean .page-title-main::after,
.archive-header-new .archive-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #D4AF37;
  /* ゴールドアクセント */
  border-radius: 2px;
}

/* 4. イラスト（女性）などが疑似要素で残っている場合への最終対策 */
.site-header::before,
.site-header::after,
.site-header-image::before {
  content: none !important;
  display: none !important;
}

/* ===========================================
 * アーカイブヘッダー最終デザイン
 * ===========================================
 */

.archive-header-new {
  background-color: #F8F9FA !important;
  /* 清潔感のあるグレー */
  padding: 2.5rem 0 2rem !important;
  text-align: center;
  border-bottom: 2px solid #D4AF37;
  /* ゴールドのライン */
  margin-bottom: 4rem;
}

/* タイトルの装飾 */
.archive-header-new .archive-title {
  font-size: 2rem;
  font-weight: 700;
  color: #1F3666 !important;
  line-height: 1.4;
  word-break: keep-all;
  /* 単語の途中での改行を防ぐ */
  overflow-wrap: break-word;
}

/* カテゴリー名部分の指定 */
.archive-header-new .archive-name {
  display: inline-block;
  /* まとまりとして扱う */
  white-space: nowrap;
  /* カテゴリー名自体は絶対に改行させない */
  color: #1F3666;
}

/* 767px以下のデバイス（スマホ）での調整 */
@media screen and (max-width: 911px) {
  .archive-header-new .archive-title {
    /* 画面幅に合わせて文字サイズを縮小（1.5rem程度が目安） */
    font-size: 1.4rem !important;
    padding-left: 10px;
    padding-right: 10px;
  }

  .archive-header-new .archive-name {
    /* 長いカテゴリー名でも入り切るように、さらに微調整が必要な場合はここで行う */
    white-space: normal;
    /* 非常に長い名前の場合はスマホのみ改行を許可する場合 */
  }
}

/* 説明文の装飾 */
.archive-header-new .archive-description {
  font-size: 1rem;
  color: #666;
  max-width: 800px;
  margin: 1rem auto 0;
  line-height: 1.8;
}

/* パンくずリストの中央寄せ */
.archive-header-new .breadcrumb {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem !important;
  font-size: 0.85rem;
}

/* ===========================================
 * Mobile Menu: 重なり順の修正（最前面へ）
 * ===========================================
 */

/* メニュー本体を最前面へ（数値は十分に高く設定） */
#ys-drawer,
.ys-drawer,
.ys-mobile-nav-container,
.ys-mobile-nav {
  z-index: 99999 !important;
}

/* メニューを開いた時の背景オーバーレイ（暗幕）もFVより上に設定 */
.ys-drawer-overlay,
.ys-mobile-nav-overlay {
  z-index: 99998 !important;
}

/* ヘッダー自体のz-indexも念のため確保（ハンバーガーボタン用） */
.site-header {
  z-index: 10000 !important;
}


/* ===========================================
 * Blog Parts: 記事下CTA（修正・ブラッシュアップ版）
 * ===========================================
 */
/* ==========================================================
   CTA Section Styles (Modern Refined Design)
========================================================== */

/* ベースのカードデザイン */
.cta-consultation {
  position: relative;
  border-radius: 4px;
  /* 24px */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid #f1f5f9;
  padding: 3rem 1.5rem 2.5rem;
  margin: 8rem auto;
  max-width: 48rem;
  /* 768px */
  font-family: sans-serif;
  color: #1e293b;
  box-sizing: border-box;
  /*overflow: hidden;*/
  /* 必須：イラストがボックスからはみ出さないようにカット */
  z-index: 1;
  /* 必須：スタックコンテキストを作成 */
}

/* --- イラスト共通の設定 --- */
.cta-consultation::before,
.cta-consultation::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  /* 必須：イラストがクリックやテキスト選択の邪魔をしない */

  /* --- 透過度の設定 ---
     提供画像のように背景になじませるため、不透明度を 10% 程度にします。
     お好みで調整してください（例：0.05〜0.15）。 */
  opacity: 0.3;

  /* テキストやボタンの背面に配置（親の背景とテキストの間に潜り込ませる） */
  z-index: -1;
}

/* --- 右上の人物イラスト (::before) --- */
.cta-consultation::before {
  /* 準備された人物SVGのパスに書き換えてください */
  background-image: url("../img/22923719.svg");

  /* 配置：右上ギリギリ */
  top: 5%;
  right: 0;

  /* サイズ（画像に合わせて調整してください） */
  width: 45%;
  height: 45%;
  background-position: top right;
}

/* --- 左下のスマホを持つ手イラスト (::after) --- */
.cta-consultation::after {
  /* 準備されたスマホSVGのパスに書き換えてください */
  background-image: url("../img/26097477.svg");

  /* 配置：左下ギリギリ */
  bottom: 0;
  left: 0;

  /* サイズ（画像に合わせて調整してください） */
  width: 55%;
  height: 55%;
  background-position: bottom left;
}


.cta-content {
  max-width: 42rem;
  margin: 0px auto;
}

/* バッジ (あれ...もしかして？！) */
.cta-badge-wrapper {
  position: absolute;
  top: -1.25rem;
  right: 5%;
  white-space: nowrap;
}

.cta-badge {
  display: inline-block;
  position: relative;
  /* 親要素を基準にするために必須 */
  background: linear-gradient(to right, #1F3666, #365caf);
  color: #ffffff;
  padding: 0.625rem 1.2rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 6px -1px rgba(30, 41, 59, 0.2);
}

.cta-badge::after {
  content: "";
  position: absolute;
  bottom: -10px;
  /* バッジの下側に飛び出す距離 */
  right: 5%;
  /* 右端からの位置（お好みで調整） */

  /* 三角形の作成 */
  border-width: 10px 10px 0 0;
  /* 直角三角形の向き */
  border-style: solid;
  /* グラデーションの右端の色（#334155）を指定して一体感を出す */
  border-color: #334155 transparent transparent transparent;
}

.cta-content .cta-lead {
  display: block;
  margin: 0 0.1px;
  padding: 0.1rem;
}

.cta-content .cta-lead .lead {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 140%;
}

.cta-content .cta-lead .lead span {
  color: #E11D48;
  /* 以前のハイライトでも使ったパキッとした赤 */
  font-weight: bold;
  /* 赤にするなら太字にするとより強調されます */
}

.cta-content .cta-lead .chusyaku {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 140%;
}


.cta-midashi {
  text-align: center;
  /* ブロック内の要素を中央寄せ */
  margin: 1.5rem 0 2rem 0;
  /* 前後の余白を調整 */
}

.cta-midashi p {
  /* フォントの指定（クォーテーションで囲みます） */
  font-family: '03SmartFontUI', sans-serif !important;

  /* 文字の大きさ：思い切って大きくします */
  font-size: clamp(1.2rem, 7vw, 2rem);
  white-space: nowrap;

  /* その他の装飾 */
  font-weight: bold;
  line-height: 1.2;
  color: #00081a;
  /* 事務所ネイビーで引き締め */
  margin: 0;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

}

/* スマホ用の微調整（画面幅に合わせて文字サイズを少し落とす） */
@media screen and (max-width: 480px) {}

/* ハイライトタグ (24時間受付可能など) */
.cta-service-highlights {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 10px);
  margin-bottom: 2rem;
  flex-wrap: nowrap;
}

.highlight-item {
  background-color: #1F3666;
  color: #FFF;
  font-weight: bold;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  /* --- clampによる文字サイズの自動調整 ---
     最小: 10px（これ以上小さくしない）
     推奨: 3.2vw（画面幅の3.2%）
     最大: 14px（これ以上大きくしない）
  */
  font-size: clamp(12px, 3.4vw, 16px) !important;

  /* パディングも文字に合わせて伸縮させるとバランスが崩れません */
  padding: clamp(2px, 1vw, 4px) clamp(4px, 2vw, 10px) !important;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ボタン共通設定 */
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cta-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  transition: all 0.3s ease;
  padding: 1rem;
}

.cta-btn:hover {
  transform: translateY(-2px);
}

.cta-btn:active {
  transform: translateY(0);
}

/* LINEボタン */
.btn-line {
  background-color: #06C755;
  color: #ffffff;
  gap: 0.75rem;
}

.btn-line:hover {
  background-color: #05B34C;
  box-shadow: 0 10px 15px -3px rgba(6, 199, 85, 0.3), 0 4px 6px -4px rgba(6, 199, 85, 0.3);
}

.btn-line .icon-line::before {
  content: "";
  display: block;
  width: 55px;
  height: 20px;
  background-image: url("../img/line.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-line .btn-text {
  font-size: 1.125rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* WEB & TEL ボタングループ */
.cta-btn-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.btn-web,
.btn-tel {
  background-color: #1F3666;
  color: #ffffff;
  gap: 1rem;
}

.btn-web:hover,
.btn-tel:hover {
  background-color: #0f172a;
  box-shadow: 0 4px 6px -1px rgba(30, 41, 59, 0.2);
}

.btn-web .icon-mail,
.btn-tel .icon-tel {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.btn-web:hover .icon-mail,
.btn-tel:hover .icon-tel {
  opacity: 1;
}

.btn-web .icon-mail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-tel .icon-tel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.btn-text-main {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.btn-tel .btn-text-main {
  font-size: 1.125rem;
  letter-spacing: 0.05em;
}

.btn-text-sub {
  font-size: 0.65rem;
  font-weight: 500;
  color: #94a3b8;
  transition: color 0.3s;
}

.btn-web:hover .btn-text-sub,
.btn-tel:hover .btn-text-sub {
  color: #cbd5e1;
}

/* 画面幅が広い場合 (PC・タブレット) のレイアウト調整 */
@media (min-width: 640px) {
  .cta-consultation {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .cta-badge {
    font-size: 1.125rem;
  }

  .cta-check-list li {
    font-size: 1.25rem;
  }

  .cta-service-highlights {
    gap: 1rem;
  }

  .highlight-item {
    font-size: 1rem;
  }

  .cta-lead {
    font-size: 1rem;
  }

  .sp-br {
    display: none;
  }

  .btn-line .btn-text {
    font-size: 1.25rem;
  }

  /* ==========================================================
PC表示のフレーム調整
*/
  .cta-btn-group {
    grid-template-columns: 1fr;
  }

  /* ==========================================================
   BACKUP: 2026-03-25 電話番号削除前
   以下のブロックは現在使用していません。
   
    .cta-btn-group {
    grid-template-columns: 1fr 1fr;
  } 
    ----------------------------------------------------------
   BACKUP END
   ========================================================== */

  .btn-text-main {
    font-size: 1.125rem;
  }

  .btn-tel .btn-text-main {
    font-size: 1.25rem;
  }

  .btn-text-sub {
    font-size: 0.75rem;
  }
}


/* 記事コンテンツ内のスタイル */

/* === frame-box ===理解を深めよう */
.frame-box-konokiji {
  position: relative;
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
  border: solid 1px #D9D9D9;
  border-radius: 4px;
  padding: 1.2em 2em 2em 1.2em;

}

.frame-box-konokiji .frame-box-konokiji__title {
  position: absolute;
  display: inline-block;
  top: -20px;
  left: 12px;
  padding: 10px;
  font-size: 0.9rem;
  background: #fdfdfd;
  border: solid 1px #fdfdfd;
  border-radius: 4px;
  color: #4d4d4d;
  font-weight: bolder;
}

.frame-box-konokiji__title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../img/24695041.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}

.frame-box-konokiji::after {
  content: "";
  position: absolute;
  right: -40px;
  /* 右端からの距離 */
  bottom: -10px;
  /* 下端にピッタリ合わせる、または少しはみ出させるなら負の数 */

  /* 人物のサイズ（デザインに合わせて調整してください） */
  width: 120px;
  height: 140px;

  /* 画像の設定 */
  background-image: url("../img/236241951.svg");
  /* ここを実際のパスに */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;

  z-index: 1;
  pointer-events: none;
  /* テキスト選択の邪魔をしない */
}



.frame-box-konokiji p {

  font-size: 0.9rem;
  line-height: 1rem;
}

/* === frame-box ===豆知識 */
.frame-box-mamechishiki {
  position: relative;
  margin: 3rem 0 !important;
  border: solid 1px #1F3666;
  border-radius: 8px;
  padding: 1.2em 2em 2em 1.2em;

}

.frame-box-mamechishiki .frame-box-mamechishiki__title {
  position: absolute;
  display: inline-block;
  top: -30px;
  right: 10px;
  padding: 8px;
  font-size: 0.8rem;
  background: #fdfdfd;
  border: solid 1px #fdfdfd;
  border-radius: 4px;
  color: #4d4d4d;
  font-weight: bolder;
}

.frame-box-mamechishiki .frame-box-mamechishiki__title::before {
  content: "" "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(https://aokita-law.com/fraud-consult/wp-content/uploads/2026/03/23978246-1.jpg) no-repeat;
  background-size: contain;
  margin-right: 8px;
  margin-bottom: -5px;
}

.frame-box-mamechishiki p {

  font-size: 0.95rem;
  line-height: 1.4rem;
}


/* === frame-box === 結論ボックス */
.conclusion-box {
  position: relative;
  width: 100%;
  margin-top: 4rem !important;
  margin-bottom: 2rem !important;
  border: 2px solid #d4af37;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
  z-index: 1;
}

.conclusion-box::before {
  /* 人物画像 */
  content: '';
  position: absolute;
  left: 11px;
  top: -48px;
  width: 60px;
  height: 65px;
  background-image: url('../img/keturonfukidashi.svg');
  background-size: cover;
  z-index: 2;
}


/* ===========================================
 * 投稿ページ（single)：あなたは悪くない
 * ===========================================
 */

/* 1. ボックス本体：背景と枠線のみのシンプルな構成 */
.single .site-content .content__main .entry-content .container-yougo {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding: 1.5rem !important;
  border: 1px solid #DDE2E5 !important;
  /* 全体を囲む薄い枠線 */
  border-radius: 4px !important;
  z-index: 0;
}

.container-yougo .conteiner-yougo__title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: 12px;
  padding: 10px;
  font-size: 1rem;
  background: #fdfdfd;
  border: solid 1px #fdfdfd;
  border-radius: 4px;
  color: #D4AF37;
  font-weight: bolder;
}

.conteiner-yougo__title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url("../img/h2-bg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}

/* 3. タイトル（用語解説）：アイコンと並列に配置 */
.single .site-content .content__main .entry-content .container-yougo p.__title {
  align-items: center;
  /* アイコンと文字を中央揃え */
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1F3666 !important;
  /* 事務所ネイビー */
  margin-bottom: 1rem;
  margin-top: 0.6rem;
}


/* === frame-box === 押さえておこう */
.frame-box-osaeteokou {
  position: relative;
  margin: 3rem 0 !important;
  border: solid 1.3px rgba(255, 235, 138, 0.5);
  border-radius: 8px;
  padding: 1.6em 2em 2em 1.2em;
  background: rgba(255, 235, 138, 0.2);
  z-index: 1;
}

.frame-box-osaeteokou .frame-box-osaeteokou__title {
  position: absolute;
  display: inline-block;
  top: -20px;
  left: 12px;
  padding: 4px;
  font-size: 0.8rem;
  background: rgba(255, 235, 138, 0.5);
  border-radius: 4px;
  color: #1f1f1f;
  font-weight: bolder;
}

.frame-box-osaeteokou .frame-box-osaeteokou__title::before {
  content: "" "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("../img/1336316.svg");
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 16px;
  margin-left: 8px;
  margin-bottom: -13px;
}

.single .site-content .content__main .entry-content .frame-box-osaeteokou p.__title {
  align-items: center;
  /* アイコンと文字を中央揃え */
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f1f1f;
  margin-bottom: 1rem;
  margin-top: 0.6rem;
}

.frame-box-osaeteokou p {

  font-size: 0.95rem;
  line-height: 1.6rem;
  color: #1f1f1f;
}

.frame-box-osaeteokou::after {
  content: "";
  position: absolute;
  opacity: 0.3;
  transform: translateY(-5%) rotate(0deg);
  right: 20px;
  /* 右端からの距離 */
  bottom: 0px;
  /* 下端にピッタリ合わせる、または少しはみ出させるなら負の数 */

  /* 人物のサイズ（デザインに合わせて調整してください） */
  width: 160px;
  height: 240px;


  /* 画像の設定 */
  background-image: url("../img/22948717.svg");
  /* ここを実際のパスに */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;

  z-index: -1;
  pointer-events: none;
  /* テキスト選択の邪魔をしない */
}


/* === frame-box ===ワンモアポイント */
/* 外枠（グループブロック） */
.frame-box-onemore {
  position: relative;
  margin: 4rem 0 3rem 0 !important;
  border: solid 2px #d4af37;
  border-radius: 4px;
  padding: 3rem 1.5rem 1.5rem !important;
  /* タイトル分、上を広く */
  background-color: #ffff;
}

/* 先生の顔（画像ブロック） */
.frame-box-onemore .frame-box-icon {
  position: absolute;
  top: -33px;
  /* 枠より上に出す */
  right: 10px;
  width: 62px;
  /* サイズ固定 */
  height: auto;
  margin: 0;
  z-index: 2;
}

.frame-box-onemore .frame-box-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* タイトル（段落ブロック） */
.frame-box-onemore .frame-box-onemore__title {
  position: absolute !important;
  top: -20px;
  right: 60px;
  /* 画像の横に来るように調整 */
  margin: 0;
  padding: 4px 15px;
  font-size: 1rem;
  border-radius: 4px;
  background-color: #d4af37;
  font-weight: bold;
  color: #FFFFFF;
  z-index: 1;
}

/* 本文の微調整 */
.frame-box-onemore p:not(.frame-box-onemore__title) {
  margin-top: 0;
  font-size: 0.9rem;

}