/* =========================================================
  custom.css
========================================================= */

/* =========================================================
  ★ ブランドカラー
========================================================= */
:root {
    --c-primary:      #49A5E2;   /* ★ メインカラー（見出しアイコン・「見守り」等） */
    --c-primary-dark: #0084B4;   /* ★ 濃いメインカラー（--c-primaryを暗くした値） */
    --c-accent:       #ED7D31;   /* ★ アクセントカラー（メールCTAボタン・「住まいの確保」等） */

    /* 青い鳥の3本柱（見守り／安否確認／住まいの確保）に対応する3色 */
    --c-pillar-blue:   #49A5E2;
    --c-pillar-green:  #92D050;
    --c-pillar-orange: #ED7D31;

    /* 上記3色の淡色バリエーション（カードの下地等） */
    --c-bg-pillar-blue:   #E3F5FB;
    --c-bg-pillar-green:  #E1EFD2;
    --c-bg-pillar-orange: #FFEBDE;

    /* セクション背景の薄ピーチ（「こんなご相談を承っています」等） */
    --c-bg-section-peach: #FFF5EE;

    /* バッジ円の背景（経済的支援／登録住宅／入居支援） */
    --c-badge-peach: #FFD6BA;

    /* フッター背景（--c-primaryとは別トーンの明るい青） */
    --c-footer-bg: #49A5E2;
}


/* =========================================================
  ★ ベースフォント
========================================================= */
:root {
    --wp--preset--font-family--sans: "Zen Maru Gothic", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;

    /* 電話番号など英数字部分で使う（functions.phpのCHILD_GOOGLE_FONTS_URLで読み込み済み） */
    --font-roboto: "Roboto", var(--wp--preset--font-family--sans);
}


/* =========================================================
  ★ ベースフォントサイズ
========================================================= */
html {
    font-size: clamp(.85rem, 3vw, 16px);
}


/* =========================================================
  common
========================================================= */
.l-content__body.l-container {
  margin-bottom: 0;
}

.h_sub {
  color: var(--c-border-ccc);
  letter-spacing: 0.2em;
  margin-bottom: 1.5rem;
}



/* =========================================================
  ボタン
========================================================= */
/* 共通ボタン（アイコン無し）。使い方: ボタンブロックに追加CSSクラス「c-btn-aoi」 */
.wp-block-button.c-btn-aoi {
  width: min(100%, 340px);
}

.wp-block-button.c-btn-aoi .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-text);
  border-radius: 0;
  background-color: var(--c-bg);
  padding: 15px 30px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.wp-block-button.c-btn-aoi .wp-block-button__link:not(.has-text-color) {
  color: var(--c-text);
}

.wp-block-button.c-btn-aoi .wp-block-button__link:hover {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}

.wp-block-button.c-btn-aoi .wp-block-button__link:hover:not(.has-text-color) {
  color: var(--c-bg);
}


/* =========================================================
  見出し
========================================================= */
/* 見出しの左に青緑の重なった丸アイコンを付ける。使い方: h要素に「h_circle」クラス */
.h_circle {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 5rem;
}

.h_circle::before,
.h_circle::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.h_circle::before {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--c-pillar-blue);
  z-index: 2;
}

.h_circle::after {
  left: 20px;
  top: 50%;
  transform: translateY(-30%);
  background-color: var(--c-pillar-green);
  z-index: 1;
}

.h_circle_1 {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--c-badge-peach);
}

.h_circle_1::before {
    content: "";
    position: absolute;
    left: .5rem;
    top: 30%;
    transform: translateY(-50%);
    width: 32px;
    height:32px;
    border-radius: 50%;
    background-color: var(--c-badge-peach);
    z-index: -1;
}


/* =========================================================
  ステップリスト（「〇〇までの流れ」等）
  使い方: 順序付きリストブロックに追加CSSクラス「flow_steps」
  ページ2「ご相談からご入居までの流れ」、ページ5「ご紹介・ご相談の流れ」等で共通利用想定
========================================================= */
.flow_steps {
  counter-reset: flow-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow_steps li {
  position: relative;
  counter-increment: flow-step;
  padding: 0 0 2rem 4rem;
}

.flow_steps li:last-child {
  padding-bottom: 0;
}

.flow_steps li::before {
  content: counter(flow-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--c-pillar-blue);
  color: var(--c-bg);
  font-family: var(--font-roboto);
  font-weight: 700;
  font-size: 14px;
  z-index: 2;
}

.flow_steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: -2rem;
  width: 2px;
  background-color: var(--c-badge-peach);
  z-index: 1;
}

/* テキスト部分のみのボックス装飾。使い方: liのテキストを<span class="flow_step_text">で囲む */
.flow_steps li .flow_step_text {
  display: block;
  background-color: var(--c-bg-pillar-blue);
  padding: 1.5rem 1.25rem;
  border-radius: 10px;
}


/* =========================================================
  SVG
========================================================= */
.wave_svg {
  display: block;
  width: 100vw;
  height: auto;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


/* =========================================================
  ヘッダー
========================================================= */

.l-header {
  box-shadow: none;
}

html[data-scrolled="true"] .l-header {
  box-shadow: var(--shadow3);
}

/* =========================================================
  ナビゲーション
========================================================= */
.c-gnav {
  font-size: 15px;
}

.c-gnav__li > .c-gnav__a {
  font-weight: 600;
}

ul.c-gnav li.menu-item-19 span.__mainText {
  display: flex;
  align-items: center;
  gap: 12px;
}

ul.c-gnav li.menu-item-19 span.__mainText .nav_tel {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  align-items: flex-start;
  margin-bottom: -8px;
}

li.menu-item-19 .fa-solid.fa-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--c-pillar-green);
  border-radius: 50px;
  color: var(--c-bg);
  font-size: 16px;
}

li.menu-item-19 .nav_tel_text {
  font-size: 12px;
  font-weight: normal;
  margin-bottom: -5px;
}

li.menu-item-19 .nav_telno {
  font-family: var(--font-roboto);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
}

li.menu-item-17 .fa-solid.fa-envelope {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: var(--c-pillar-orange);
  border-radius: 50px;
  color: var(--c-bg);
  font-size: 16px;
}

/* =========================================================
  ドロワー（スマホメニュー）背景色
  child.css のデフォルトは --c-primary。
  異なる色にする場合はコメントを外して上書き。
========================================================= */
/* .p-drawer { background-color: var(--c-accent); } */
.p-drawer li {
  font-size: 1rem;
}

.p-drawer li.menu-item-19 .__mainText,
.p-drawer li.menu-item-17 .__mainText {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.p-drawer li.menu-item-19 .c-drawerNav__a .__mainText,
.p-drawer li.menu-item-17 .c-drawerNav__a .__mainText  {
  background: var(--c-bg);
  color: var(--c-text);
  padding: .8rem .5rem;
  border-radius: 10px;
  gap: 1rem;
}

.p-drawer li.menu-item-19 .__mainText .nav_tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.p-drawer_nav_mail {
  display: none;
}

.p-drawer li.menu-item-17 .p-drawer_nav_mail {
  display: inherit;
}

/* =========================================================
  ★ 下層ページ ヘッダー背景（画像なし時）
  画像がない固定ページのページタイトルエリアの背景。
========================================================= */
.p-topArea.-noimg {
    /* パターン①: 画像 + オーバーレイ */
    /* background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(/wp-content/uploads/xxxx/xx/image.webp);
    background-size: cover;
    background-position: center; */

    /* パターン②: グラデーションのみ */
    background: linear-gradient(to right, var(--c-primary) 0%, var(--c-primary-dark) 100%);
}

/* =========================================================
  フッター色
  child.css のデフォルトは --c-primary 背景 / --c-bg テキスト。
  TOPデザインではフッターに--c-primaryとは別トーンの青（--c-footer-bg）を使用。
========================================================= */
.l-footer { background-color: var(--c-footer-bg); color: var(--c-bg); }
.l-footer p.c-copyright { color: var(--c-bg); }


/* =========================================================
  str-table 見出し色
  child.css のデフォルトは --c-bg-soft（グレー）。
  ブランドカラーを使う場合はコメントを外して上書き。
========================================================= */
/* .str-table th {
    background: var(--c-primary);
    color: var(--c-bg);
} */


/* =========================================================
  ページ固有スタイル
========================================================= */

/* TOPページ ファーストビュー（mv） */
body.home {
    overflow-x: visible;
}

.mv {
  position: relative;
}

.wp-block-columns .wp-block-column.mv_right_col {
    position: absolute;
    width: 60%;
    height: 100%;
    right: 0;
    z-index: 0;
    margin-right: calc(50% - min(50vw, 720px)) !important;
}

.mv_right_col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mv_left_col {
  z-index: 3;
  max-width: max(50%, 600px);
}

/* TOPページ mv_point_col（経済的支援／登録住宅／入居支援） */
.mv_left_col .mv_point_col {
    gap: 0 !important;
    margin-top: 70px;
}

.mv_point_col .wp-block-column {
    position: relative;
    padding: 0 0 20px;
}

.mv_point_col .wp-block-column::before {
    content: "";
    position: absolute;
    left: .5rem;
    top: 30%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--c-badge-peach);
    z-index: 2;
}

.mv_point_col .wp-block-column::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 8px;
    z-index: 1;
}

.mv_point_col .wp-block-column p {
    position: relative;
    z-index: 3;
    margin: 0;
    padding-left: 28px;
    font-weight: 700;
    font-size: var(--fz-lead);
    color: var(--c-text);
}

.mv_point1::after { background-color: var(--c-bg-pillar-blue); }
.mv_point2::after { background-color: var(--c-bg-pillar-green); }
.mv_point3::after { background-color: var(--c-bg-pillar-orange); }

.mv_copy {
    position: relative;
    padding: 40px var(--ark-pad--container);
}

.mv_copy::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 500 / 220;
    background-image: url('../img/mv_bg_stroke.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.9;
    z-index: -1;
}

.mv_copy_main {
  font-size: var(--fz-24-48);
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0 !important;
}

.mv_copy_sub {
  font-size: var(--fz-16-20);
}

.mv_copy_sub strong {
  color: var(--c-pillar-orange);
}

.cta_wrap {
  max-width: 940px;
  margin-top: 50px;
  margin-right: auto;
  margin-left: auto;
  box-shadow: var(--shadow4);
  background: var(--c-bg);
  z-index: 10;
  position: relative;
  padding: 35px var(--st-pad--container-mid);
}

.cta_col {
  display: flex;
  justify-content: center;
}

.cta_col_right,
.cta_col_left {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 360px;
  height: 80px;
  padding: 20px var(--st-pad--container);
  justify-content: center;
}

.cta_col_left a::after,
.cta_col_right a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cta_col_right,
.cta_col_left {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.cta_col_right:hover,
.cta_col_left:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow3);
}

.cta_col_right {
  background-color: var(--c-pillar-orange);
  color: var(--c-bg);
}

.cta_col_right:hover {
  filter: brightness(0.94);
}

.cta_col_left {
  border: 1px solid var(--c-border-ccc);
}

.cta_col_left:hover {
  background-color: var(--c-bg-pillar-green);
  border-color: var(--c-pillar-green);
}

/* CTAブロックのアイコンにナビゲーションと同じ丸背景を付ける */
.cta_col_left .fa-solid.fa-phone,
.cta_col_right .fa-solid.fa-envelope {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50px;
  color: var(--c-bg);
  font-size: 16px;
}

.cta_col_left .fa-solid.fa-phone {
  background-color: var(--c-pillar-green);
}

.cta_col_right .fa-solid.fa-envelope {
  background-color: var(--c-bg);
  color: var(--c-pillar-orange);
}

.cta_col_left .cta_tel_text {
  font-size: 12px;
  margin-bottom: -10px;
}

.cta_col_left .cta_tel {
  font-family: var(--font-roboto);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-top: 0 !important;
}

@media (max-width: 781px) {
  .mv_point_col .wp-block-column::after {
    width: max(160px, 50%);
  }

  .mv_left_col .mv_point_col {
    gap: 10px !important;
  }

  .cta_col {
    gap: 1rem !important;
  }
  
}

@media (max-width: 620px) {
  .wp-block-columns .wp-block-column.mv_right_col {
    width: 75%;
  }

  .mv_copy::before {
    aspect-ratio: 500 / 250;
  }
}

@media (max-width: 420px) {
  .mv_copy::before {
    aspect-ratio: 500 / 290;
  }
}

.cont1_wrap > div {
  position: relative;
}

.cont1_left {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 5;
}

.cont1_left > div {
  max-width: min(68%, 800px);
  padding: 30px var(--st-pad--container-mid);
  background-color: rgb(255, 255, 255, .9);
}

.cont1_right {
  position: absolute;
  top: -30px;
  right: 0;
  max-width: 50%;
  height: auto;
  margin-top: 0 !important;
}

.cont1_right img {
  height: 580px;
  object-fit: cover;
}

@media (max-width: 781px) {
  .cont1_wrap {
    margin-bottom: 160px;
  }

  .cont1_right {
    max-width: 80%;
  }

  .cont1_right img {
    height: auto;
  }

  .cont1_left {
    top: 200px;
  }

  .cont1_left > div {
    max-width: 80%;
  }
}

@media (max-width: 480px) {
  .cont1_right {
    max-width: 95%;
  }
  
  .cont1_left > div {
    max-width:95%;
  }
}

.cont2_wrap {
  margin-top: 0 !important;
  background: var(--c-bg-section-peach);
  padding: 40px var(--ark-pad--container) 100px;
}

.cont2_grid_box {
  background-color: var(--c-bg);
  padding: var(--st-pad--container-mid);
}

/* 番号(01等)の右にラインを引く */
.cont2_no {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--c-border-ccc);
  font-family: var(--font-roboto);
}

.cont2_no::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--c-border-ccc);
}

@media (max-width: 781px) {
  .cont2_wrap .wp-container-core-group-is-layout-0fed8f92 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .cont2_wrap .wp-container-core-group-is-layout-0fed8f92 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.home_col {
  margin-bottom: 0 !important;
  gap: 10px !important;
}

.home_box_1,
.home_box_2,
.home_box_3 {
  display: flex;
  flex-direction: column;
}

.home_box_head {
  flex-shrink: 0;
  position: relative;
  aspect-ratio: 21 / 11;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12px;
  color: var(--c-bg);
}

.home_box_head p {
  margin: 0 0 4px;
  font-size: var(--fz-h3);
  font-family: var(--font-roboto);
}

.home_box_head h3 {
  margin: 0;
  color: var(--c-bg);
  font-size: var(--fz-hero);
  font-weight: 700;
}

.home_box_text {
  flex: 1;
  padding: 30px 24px;
  margin-top: 0 !important;
}

.home_box_text figure {
  margin: 0 0 16px;
  text-align: center;
}

.home_box_1 .home_box_head { background-color: var(--c-pillar-blue); }
.home_box_1 .home_box_text { background-color: var(--c-bg-pillar-blue); }

.home_box_2 .home_box_head { background-color: var(--c-pillar-green); }
.home_box_2 .home_box_text { background-color: var(--c-bg-pillar-green); }

.home_box_3 .home_box_head { background-color: var(--c-pillar-orange); }
.home_box_3 .home_box_text { background-color: var(--c-bg-pillar-orange); }

@media (max-width: 1160px) {
  .cont3_col {
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .home_box_head {
    aspect-ratio: 21 / 14;
    clip-path: polygon(50% 0%, 120% 100%, -20% 100%);
  }
}

@media (max-width: 480px) {
  .home_col {
    flex-direction: column;
  }

  .home_box_head {
    aspect-ratio: 21 / 11;
    clip-path: polygon(50% 45%, 100% 100%, 0% 100%);
    margin-top: -60px !important;
  }
}


.cont4_col {
  gap: 0 !important;
}

.cont4_col_box > div {
  align-items: flex-end;
}

.cont4_box_inner {
  background-color: rgb(255, 255, 255, .9);
  padding: var(--st-pad--container);
}

.cont4_box_inner h3::after {
  content: "";
  display: block;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--c-border-ccc);
}

.cont4_box_inner_text {
  margin-top: 1rem !important;
}

/* cont4_col_box全体をリンク化 + ホバーで背景画像を拡大 */
.cont4_col_box {
  position: relative;
}

.cont4_col_box .wp-block-cover {
  overflow: hidden;
}

.cont4_col_box .wp-block-cover__image-background {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.cont4_col_box:hover .wp-block-cover__image-background {
  transform: scale(1.08);
}

.cont4_col_box a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cont5_col {
  border: 5px solid var(--c-pillar-blue);
  padding: 60px var(--ark-pad--container);
  background-color: #FAFEFF;
  gap: 1.5rem !important;
}

.cont5_box_left {
  border-right: 1px solid var(--c-border-ccc);
  padding-right: 1.5rem;
}

.cont5_col h2 {
  margin-bottom: 1.5rem !important;
}

.cont5_grid {
  gap: 1rem !important;
}

.cont5_grid p {
  background: var(--c-bg-pillar-orange);
  border-radius: 20px;
  padding: .5rem var(--st-pad--container);
  text-align: center;
}

@media (max-width: 480px) {
  .cont5_grid.wp-container-core-group-is-layout-28b052f3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* TOPページ お知らせ（top_news）
   1件 = カラムブロック1つ（左:日付 / 右:本文）。追加時はカラムブロックを複製して上に並べる */
.top_news_wrap .wp-block-columns {
  gap: 1.5rem;
  align-items: baseline;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 1.25rem .5rem;
  border-bottom: 1px dashed var(--c-border-ccc);
}

.top_news_wrap .wp-block-columns:first-of-type {
  border-top: 1px dashed var(--c-border-ccc);
}

/* 日付の桁数（1月/10月等）で本文の開始位置がずれないよう幅を固定 */
.top_news_wrap .wp-block-column:first-child {
  flex: 0 0 8.5rem !important;
}

.top_news_wrap .wp-block-column:last-child {
  flex: 1 1 0 !important;
}

.top_news_wrap .wp-block-column:first-child p {
  white-space: nowrap;
}

.top_news_wrap .wp-block-column:first-child p::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: .6rem;
  border-radius: 50%;
  background-color: var(--c-pillar-orange);
  vertical-align: middle;
}

.top_news_wrap .wp-block-column:last-child p {
  line-height: 1.8;
}

.top_news_wrap .wp-block-column a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.top_news_wrap .wp-block-column a:hover {
  color: var(--c-primary);
}

@media (max-width: 781px) {
  .top_news_wrap .wp-block-columns {
    gap: .25rem;
    padding: 1rem .25rem;
  }

  .top_news_wrap .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

.foot_cta_bg {
  margin-top: 100px !important;
}
.foot_cta_bg::after {
  content: "";
  display: block;
  background-color: var(--c-bg-pillar-blue);
  height: 150px;
  margin-top: -110px;
}

@media (max-width: 1024px) {
  .foot_cta_bg .cta_wrap {
    margin-right: var(--ark-pad--container);
    margin-left: var(--ark-pad--container);
  }
}

.grid_card_green,
.grid_card_blue {
  gap: 1rem;
}

.grid_card_green p,
.grid_card_blue p {
    background: var(--c-bg-pillar-green);
    padding: 1rem;
    border-radius: 20px;
    text-align: center;
}

.grid_card_blue p {
    background: var(--c-bg-pillar-blue);
    text-align: left;
}


.grid_box_bg_col {
  gap: .5rem !important;
}

.grid_box_bg_or p {
  padding: .5rem 1rem;
  background: var(--c-bg-pillar-orange);
}

.grid_box_bg_gy p {
  padding: .5rem 1rem;
  background: var(--c-bg-footer);
}

.col_box_blue > .wp-block-column {
  display: flex;
  flex-direction: column;
}

.col_box_blue h4 {
  background-color: var(--c-pillar-blue);
  padding: 1rem 1.5rem;
  color: var(--c-bg);
  text-align: center;
}

.col_box_blue p {
  flex: 1;
  background: var(--c-bg-soft);
  padding: 1rem 1.5rem;
  margin-top: .5rem !important;
}

@media (max-width: 781px) {
  .grid_card_green,
  .grid_card_blue {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .wp-container-core-group-is-layout-85a54dc3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}