/* =========================================================
  custom.css — サイト固有スタイル（child.cssの後に読み込み・上書き）
  全ページ共通のブランドカラー・ヘッダー/フッター・共通コンポーネントを置く。
  TOPページ専用の一点物セクション（MV等）は top.css 側（is_front_page()限定）。
========================================================= */


/* ブランドカラー */
:root {
    --c-primary:      #FF9B2B;
    --c-primary-dark: #D98425;
    --c-accent:       #328841;

    --c-blue:     #7895D6;
    --c-red:      #E7795E;
    --c-yellow:   #F0D384;
    --c-green:    #688D5E;
    --c-red-l:    #FFF2EE;
    --c-blue-l:   #F3F9FF;
    --c-yellow-l: #FDF8EA;
    --c-green-l:  #FCFEFB;
    --c-orange-l: #FEF3E7;
    --c-blue-dark:   #667FB6;
    --c-red-dark:    #C46750;
    --c-yellow-dark: #CCB370;
    --c-green-dark:  #587850;
    --c-text-brand:  #3B1A11;
}

: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;

    --font-goth: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium",
                 "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
                 "Meiryo", sans-serif;
}

.font-goth {
    font-family: var(--font-goth);
}

/* 下層ページヘッダー背景（アイキャッチ未設定時）
   投稿(.single)と固定ページ(.page)で出し分ける。
   アイキャッチが設定されたページ/投稿は-noimgクラス自体が付かず実画像に切り替わるため、
   常にアイキャッチが最優先になる（このCSSは無関係になる） */
.single .p-topArea.-noimg {
    background: linear-gradient(to right, var(--c-primary) 0%, var(--c-primary-dark) 100%);
}

/* 固定ページ共通のデフォルト（現状は色のみ）。
   共通の背景画像を敷きたくなったら下記のbackground-imageを有効化する */
.page .p-topArea.-noimg {
    background: linear-gradient(to right, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    /* background-image: url(../img/xxx.webp);
    background-size: cover;
    background-position: center; */
}

.p-topArea {
    min-height: 13vh;
}

/* 全体の背景（タイル状の繰り返しパターン画像。子テーマ同梱のassets/img/を参照） */
body {
    background-image: url(../img/bg_pat_1.webp);
    background-repeat: repeat;
}

/* 装飾のはみ出し(::before/::after等)が画面端を超えて横スクロールを作らないための安全網。
   overflow-x: hiddenだとhtml/bodyがスクロールコンテナ扱いになり、
   ヘッダーのposition: sticky（ヘッダー固定設定）が効かなくなるため、
   スクロールコンテナを作らないclipを使う */
html,
body {
    overflow-x: clip;
}

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

.l-header__body.l-container {
    max-width: 1440px;
}

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

.l-header__logo img {
    width: 240px;
    height: auto;
    max-width: none;
    object-fit: contain;
    transition: width 0.3s ease, height 0.3s ease;
}

@media (max-width: 781px) {
  .l-header__logo img {
    width: 180px;
  }
}

html[data-scrolled="true"] .l-header__logo img {
    width: auto;
    height: 100%;
}

ul.c-gnav li a {
  font-weight: 700;
}

ul.c-gnav li.menu-item-291 {
  background: var(--c-primary);
  color: var(--c-bg);
  border-radius: 8px;
  height: 36px;
  margin-left: 1rem;
  transition: opacity .25s;
}

ul.c-gnav li.menu-item-291 a {
  padding: .5rem 1.5rem;
}

/* ボタン化しているCTAナビ項目は、他のナビ項目と同じ文字色ホバー（child.css a:hover）だと
   背景色と同化してしまうため、opacityを下げるホバーに上書きする
   （transitionは変化前の状態＝上の基本ルール側に書くことで、hover解除時も滑らかに戻る） */
ul.c-gnav li.menu-item-291:hover {
  opacity: .75;
}

ul.c-gnav li.menu-item-291 a:hover {
  color: var(--c-bg);
}

.l-content__body {
  margin-bottom: 6rem;
}


/* フッター色 */
.l-footer__widgets {
  background: #ffd19c;
  color: var(--c-text);
}

.foot_nav_menu {
  line-height: 1.8;
}


/* =========================================================
  共通コンポーネント（複数ページで使用）
========================================================= */
.text_line_yellow {
    display: inline-block;
    background-image: url(../img/line_04.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
}

/* エディタの中央揃えで真ん中 */
.text_line_yellow.has-text-align-center {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* 01. CTAボタン（メール見積／LINE）: 塗りつぶし角丸＋右端に矢印アイコン。
   MVのCTA枠(.mv_cta_col)・ページ下部共通CTA(.cta_wrap)など、
   どのコンテナに置いても同じ見た目になる（コンテナ非依存のパーツ） */
.cta_btn_mail .wp-block-button__link,
.cta_btn_line .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-height: 50px;
  border-radius: 12px;
  color: #fff;
  padding: 14px 48px 14px 20px;
  font-family: var(--font-goth);
}

.cta_btn_mail .wp-block-button,
.cta_btn_line .wp-block-button {
  flex-grow: 1;
}

.cta_btn_mail .wp-block-button__link {
  background-color: var(--c-primary);
}

.cta_btn_line .wp-block-button__link {
  background-color: #06C755 !important;
}

.cta_btn_mail .wp-block-button__link::after,
.cta_btn_line .wp-block-button__link::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url(../img/icon_arrow_1.webp);
  background-repeat: no-repeat;
  background-size: contain;
}

.wp-block-buttons.cta_btn_line,
.wp-block-buttons.cta_btn_mail {
  width: 100%;
}

.rl_pad {
  padding-right: var(--st-pad--container-mid);
  padding-left: var(--st-pad--container-mid);
}

/* 02. 汎用ボタン（プライマリカラー・右端に矢印アイコン）。cta_btn_mail/lineと同じ構造の追加CSSクラス */
.c-btn-prim .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(100%, 280px);
  max-height: 50px;
  border-radius: 12px;
  color: #fff;
  padding: 14px 48px 14px 20px;
  font-family: var(--font-goth);
  background-color: var(--c-primary);
  margin: 0 auto;
}

.wp-block-button.c-btn-prim  {
  flex-grow: 1;
  width: min(100%, 280px);
}

.c-btn-prim .wp-block-button__link::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url(../img/icon_arrow_1.webp);
  background-repeat: no-repeat;
  background-size: contain;
}

/* 03. 電話番号表示パーツ（アイコン／営業時間／電話番号）。
   MVの電話ボックス(.mv_cta_tel_box)・MVのCTA行(.mv_cta_left)・
   ページ下部共通CTA(.cta_tel_box)など、どこに置いても同じ見た目になる */
.mv_tel_icon {
  max-width: 45px;
}

.time {
  margin-top: 0 !important;
  font-size: 0.8rem;
  text-align: center;
}

.telno {
  font-size: var(--fz-24-36);
  font-weight: 700;
  margin-top: -10px !important;
  text-align: center;
}

/* 04. セクション背景（ドット柄）。サービス一覧・FAQ抜粋など複数セクションで使用 */
.c-bg-dot {
  background-image: url(../img/top_service_bg.webp);
  background-repeat: repeat;
}

.c-bg-dot-inner {
  padding-top: 4rem !important;
  padding-bottom: 5rem;
}

/* 05. 見出し装飾。h2自体を箱として扱い、アイコンは箱の左右端に絶対配置で固定
   （見出しが2行に折り返しても位置が動かない）。
   h2_leaf（葉）/ h2_star（星）/ h2_clover（クローバー）で共通構造を使い回し、アイコン画像だけ差し替える */
.h2_leaf,
.h2_star,
.h2_clover,
.h3_star {
  position: relative;
  width: fit-content;
  margin: 6rem auto 4rem;
  text-align: center;
  font-size: var(--fz-26-40);
}

.h2_leaf::before,
.h2_leaf::after,
.h2_star::before,
.h2_star::after,
.h2_clover::before,
.h2_clover::after,
.h3_star::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--fz-30-60);
  height: var(--fz-30-60);
  background-repeat: no-repeat;
  background-size: contain;
}

.h2_leaf::before {
  left: -3rem;
  background-image: url(../img/icon_title_1.webp);
}

.h2_leaf::after {
  right: -3.5rem;
  background-image: url(../img/icon_title_2.webp);
}

.h2_star::before {
  left: -3rem;
  background-image: url(../img/icon_title_3.webp);
}

.h2_star::after {
  right: -3.5rem;
  background-image: url(../img/icon_title_4.webp);
}

.h2_clover::before {
  left: -3rem;
  background-image: url(../img/icon_title_5.webp);
}

.h2_clover::after {
  right: -3.5rem;
  background-image: url(../img/icon_title_6.webp);
}

.h2font32 {
  font-size: var(--fz-24-32);
}

.h2font32 span {
  font-size: var(--fz-26-40);
  color: var(--c-red);
}

.h3_star {
  font-size: var(--fz-h3);
  text-align: left;
  margin: 1rem 0;
  padding-left: 2rem;
}

.h3_star::before {
  left: 0;
  background-image: url(../img/icon_title_3.webp);
  width: var(--fz-18-24);
  height: var(--fz-18-24);
}



/* 06. サービスカード（3列／4列、色違いのホバー枠）。
   TOPのサービス一覧で初出（旧top_service_3col/4col）。
   下層ページでの使い回しを見込み c-card3/c-card4 にリネーム済み */
.c-card3,
.c-card4 {
  margin-right: var(--ark-pad--container);
  margin-left: var(--ark-pad--container);
}

.c-card3-box1,
.c-card3-box2,
.c-card3-box3,
.c-card4-box1,
.c-card4-box2,
.c-card4-box3 {
  position: relative;
  border: 4px solid var(--c-red);
  border-radius: 8px;
  background-color: var(--c-red-l);
  padding: 1rem var(--st-pad--container) 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ホバー: 浮き上がり＋枠線を濃く。:has(h3 a)で「実際にリンクがある箱」だけに限定
   （リンクの無い箱は今は何も起きないが、後からh3内にリンクが付けば自動で有効になる） */
.c-card3-box1:has(h3 a):hover,
.c-card3-box2:has(h3 a):hover,
.c-card3-box3:has(h3 a):hover,
.c-card4-box1:has(h3 a):hover,
.c-card4-box2:has(h3 a):hover,
.c-card4-box3:has(h3 a):hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow4);
}

.c-card3-box1:has(h3 a):hover { border-color: var(--c-red-dark); }
.c-card3-box2:has(h3 a):hover { border-color: var(--c-blue-dark); }
.c-card3-box3:has(h3 a):hover { border-color: var(--c-green-dark); }
.c-card4-box1:has(h3 a):hover { border-color: var(--c-primary-dark); }
.c-card4-box2:has(h3 a):hover { border-color: var(--c-yellow-dark); }
.c-card4-box3:has(h3 a):hover { border-color: #A37F5D; }

/* リンクが無い箱にも同じ::afterセレクタを用意（<a>が無い間は影響せず、
   後からリンクが付けば自動で箱全体がクリック可能になる） */
.c-card3-box1 h3 a::after,
.c-card3-box2 h3 a::after,
.c-card3-box3 h3 a::after,
.c-card4-box1 h3 a::after,
.c-card4-box2 h3 a::after,
.c-card4-box3 h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.c-card4-box1,
.c-card4-box2,
.c-card4-box3 {
  padding: 1rem var(--st-pad--container) 1rem;
}

.c-card3-box2 {
  border: 4px solid var(--c-blue);
  background-color: var(--c-blue-l);
}

.c-card3-box3 {
  border: 4px solid var(--c-green);
  background-color: var(--c-green-l);
}

.c-card4-box1 {
  border: 4px solid var(--c-primary);
  background-color: var(--c-orange-l);
}

.c-card4-box2 {
  border: 4px solid var(--c-yellow);
  background-color: var(--c-yollow-l);
}

.c-card4-box3 {
  border: 4px solid #C0956D;
  background-color: var(--c-yollow-l);
}

.c-card3 .h3_line {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fz-18-24);
  background-image: url(../img/line_02.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  text-align: center;
  margin-top: 0 !important;
}

.c-card3 figure {
  width: min(60%, 200px);
  margin: 0 auto;
}

.c-card3 h3,
.c-card4 h3 {
  font-size: var(--fz-16-18);
  text-align: center;
}

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

  .grid4_2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3rem;
  }

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

/* 07. 選ばれる理由（強み紹介） */
.reason_col1,
.reason_col_box {
  border: 2px solid var(--c-red);
  border-radius: 16px;
  padding: 2rem var(--ark-pad--container);
  background-color: rgb(255 255 255 / 70%);
}

.reason_no1,
.reason_no2 {
  font-size: var(--fz-30-96);
  font-weight: 700;
  color: var(--c-red);
  line-height: 1;
}

.reason_no2 {
  font-size: var(--fz-30-64);
}

.reason_col1 h3,
.reason_col_box h3 {
  font-size: var(--fz-24-32);
}

p.reason_text_line {
  /* テキストの実寸に箱を合わせ、下線の長さも文字数に追従させる */
  display: inline-block;
  background-image: url(../img/line_04.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto;
}

.reason_text_1 {
  width: min(100%, 460px);
}

.reason1_wrap {
  position: relative;
}

.reason1_wrap figure {
  position: absolute;
  top: -4rem;
  right: 0;
  width: min(30vw, 360px);
}

.reason_box5 {
  position: relative;
  z-index: 5;
}

@media (max-width: 781px) {
  .reason1_wrap figure {
    width: 40vw;
  }
}

@media (max-width: 1240px) {
  .faq_grid {
    padding-right: var(--st-pad--container-mid);
    padding-left: var(--st-pad--container-mid);
  }
}

/* 08. レビュー／FAQカード（色違いの共通カードコンポーネント） */
.review_grid,
.faq_grid {
  gap: var(--st-pad--container-mid);
  margin-bottom: 5rem !important;
}

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

@media (max-width: 420px) {
  .review_grid,
  .faq_grid {
    grid-template-columns: 1fr !important;
  }
}

.top_review_box,
.faq_box {
  border: 4px solid var(--c-blue);
  border-radius: 8px;
  background: var(--c-bg);
  padding: 1.5rem var(--st-pad--container-mid);
}

.faq_box {
  border: 4px solid var(--c-green);
  background: var(--c-green-l);
}

.top_review_box .rev_star {
  color: var(--c-yellow);
  font-size: var(--fz-16-20);
}

.faq_q {
  background-image: url(../img/line_05.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto;
  padding-bottom: 1.2rem;
  font-weight: 700;
}

.faq_a {
  margin-top: .5rem !important;
}

.faq_q::before {
  content: 'Q.';
  color: var(--c-red);
  font-size: var(--fz-24-32);
  margin-right: 0.5em;
}

.faq_a::before {
  content: 'A.';
  color: var(--c-blue);
  font-size: var(--fz-24-32);
  margin-right: 0.5em;
  font-weight: 700;
}

figure.faq_chara {
  position: absolute;
  z-index: 1;
  right: 8%;
  bottom: -4rem;
  width: min(22vw, 300px);
}

@media (max-width: 781px) {
  figure.faq_chara {
    bottom: -4rem;
    right: 0;
  }
}

@media (max-width: 480px) {
  figure.faq_chara {
    bottom: -2rem;
  }
}

/* 09. バナーカード（色違いの共通カードコンポーネント、旧top_bnr_1〜4） */
.c-bnr-grid {
  gap: var(--st-pad--container-mid);
}

.c-bnr-grid figure {
  max-width: 240px;
}

.c-bnr-1,
.c-bnr-2,
.c-bnr-3,
.c-bnr-4 {
  position: relative;
  border: 4px solid var(--c-red);
  background: var(--c-red-l);
  border-radius: 16px;
  padding: .5rem;
  max-height: 180px;
  gap: 3rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ホバー: 浮き上がり＋枠線を濃く */
.c-bnr-1:hover,
.c-bnr-2:hover,
.c-bnr-3:hover,
.c-bnr-4:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow4);
}

.c-bnr-1:hover { border-color: var(--c-red-dark); }
.c-bnr-2:hover { border-color: var(--c-blue-dark); }
.c-bnr-3:hover { border-color: var(--c-green-dark); }
.c-bnr-4:hover { border-color: var(--c-yellow-dark); }

.c-bnr-1 h2 a::after,
.c-bnr-2 h2 a::after,
.c-bnr-3 h2 a::after,
.c-bnr-4 h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.c-bnr-2 {
  border: 4px solid var(--c-blue);
  background: var(--c-blue-l);
}

.c-bnr-3 {
  border: 4px solid var(--c-green);
  background: var(--c-green-l);
}
.c-bnr-4 {
  border: 4px solid var(--c-yellow);
  background: var(--c-yellow-l);
}

.c-bnr-grid h2 {
  overflow-wrap: break-word;
}

@media (max-width: 781px) {
  .c-bnr-1,
  .c-bnr-2,
  .c-bnr-3,
  .c-bnr-4 {
    flex-direction: column;
    max-height: unset;
    gap: unset;
  }
}

/* 10. ページ下部共通CTA */
.cta_wrap {
  position: relative;
  background-color: var(--c-yellow-l);
  padding: 40px var(--ark-pad--container);
  margin-bottom: 4rem;
  margin-top: 8rem !important;
}

.cta_wrap::before,
.cta_wrap::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 25px;
  background-image: url(../img/line_07.svg);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.cta_wrap::before {
  top: 0;
  transform: translateY(-50%);
}

.cta_wrap::after {
  bottom: 0;
  transform: translateY(50%) scaleY(-1);
}

.cta_grp {
  gap: var(--st-pad--container-mid);
}

.cta_inner {
  position: relative;
}

figure.cta_chara {
  position: absolute;
  top: -8rem;
  right: -16rem;
  width: min(22vw, 300px);
}

@media (max-width: 1200px) {
  figure.cta_chara {
    right: -8rem;
  }
}

@media (max-width: 781px) {
  figure.cta_chara {
    right: 0;
  }
}

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

/* 11. みずほ台専用サイトへの導線バナー（フッター付近・全ページ共通の想定） */
.mizuhodai_col {
  position: relative;
  background-color: var(--c-primary);
  padding: 1.5rem var(--ark-pad--container);
  border-radius: 8px;
  margin-bottom: 4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* ホバー: 浮き上がり＋opacityでフェード（枠線が無いため背景色の代わりにopacityで表現） */
.mizuhodai_col:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow4);
  opacity: .75;
}

/* 行全体をクリック可能にする。<a>自体はposition:relativeにせず、
   ::afterだけ.mizuhodai_col全体に広げる */
.mizuhodai_col a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.mizuhodai_col figure {
  margin-bottom: 0 !important;
}

/* 12. 白背景セクションラップ（旧top_works_wrap／top_works_inner）。
   新規ページでは.works_wrap/.works_innerを使うこと */
.works_wrap,
.top_works_wrap {
  background: var(--c-bg);
}

.works_inner,
.top_works_inner {
  padding-top: 4rem !important;
  padding-bottom: 5rem;
}

@media (max-width: 1240px) {
  .works_inner,
  .top_works_inner {
    padding-right: var(--st-pad--container-mid);
    padding-left: var(--st-pad--container-mid);
  }
}

/* 13. サービスの流れ（ステップ形式の箇条書き）。
   選ばれる理由(.reason_no)の丸数字とは別に、矢印でつないで「進んでいく」流れを表現する。
   カウンター採番のため<ol>の各<li>にflow_itemクラスを付けて使う（遺品整理ページで初出） */

.flow_wrap {
  margin-bottom: 5rem;
}

.flow_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  counter-reset: flow;
  list-style: none !important;
  padding-left: 0 !important;
}

.flow_item {
  counter-increment: flow;
  position: relative;
  border: 4px solid var(--c-primary);
  border-radius: 16px;
  background-color: var(--c-bg);
  padding: 2.5rem var(--st-pad--container) 1.5rem;
  text-align: center;
}

/* ステップ番号（丸バッジ、上端にかぶせる） */
.flow_item::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background-color: var(--c-primary);
  color: #fff;
  font-size: var(--fz-20-24);
  font-weight: 700;
  font-family: var(--font-goth);
  box-shadow: var(--shadow3);
}

.flow_item strong {
  display: block;
  font-size: var(--fz-18-24);
  margin-bottom: 0.5rem;
}

/* ステップ間の矢印（最後の項目には付けない） */
.flow_item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1.85rem;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent var(--c-primary);
}


/* 421px〜781pxは2列並びに切り替え。偶数番目（各行の右側）は次が改行するため下向き矢印にする */
@media (max-width: 781px) {
  .flow_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2.5rem;
  }

  .flow_item:nth-child(even):not(:last-child)::after {
    top: auto;
    right: 90%;
    bottom: -2rem;
    transform: translateX(50%) rotate(150deg);
  }
}

/* 420px以下は1列積みに戻し、すべての矢印を下向きにする */
@media (max-width: 420px) {
  .flow_list {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .flow_item:nth-child(even):not(:last-child)::after {
    right: 50%;
    transform: translateX(50%) rotate(90deg);
  }

  .flow_item:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -2rem;
    transform: translateX(50%) rotate(90deg);
  }
}

/* ページコンテンツタイトル */

.h_cont_1_col {
  background: var(--c-bg);
  padding: 2rem var(--ark-pad--container);
  border-radius: 16px;
  border: 2px solid var(--c-red);
  margin-bottom: 4rem;
}

.cont_text1 {
  font-size: var(--fz-lead);
  font-weight: 700;
}

.cont_text1 span {
  display: inline-block;
  background-image: url(../img/line_04.svg);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto;
}

.h_cont_1_right {
  position: relative;
}

.h_cont_1_right figure {
  position: absolute;
  width: min(30vw, 300px);
  bottom: -5rem;
  right: 0;
}

@media (max-width: 781px) {
  .h_cont_1_col {
    margin-bottom: 6rem;
  }

  .h_cont_1_right figure {
    width: min(30vw, 180px);
    bottom: -8rem;
  }
}

.col3_img_col_box {
  border: 4px solid var(--c-blue);
  border-radius: 8px;
}

.col3_img_col_box_gr {
  margin-top: 0 !important;
  padding: 1.5rem var(--st-pad--container);
}

.bg_wh_box {
  background: var(--c-bg);
  padding: 2rem var(--ark-pad--container);
}

.price_table th {
  border-right: 2px solid var(--c-wh);
}

.price_red {
  font-size: var(--fz-18-24) !important;
  font-weight: 700;
  color: var(--c-red);
}

@media (max-width: 640px) {
  .price_table th {
    border-right: unset;
    border-bottom: 2px solid var(--c-wh);
  }
}

.after_arrow
  {
    position: relative;
  }

.after_arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1rem);
  width: 1rem;
  height: 1.4rem;
  background: var(--c-primary);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-50%, -50%);
}

@media (max-width: 781px) {
  .after_arrow {
    margin-bottom: 2rem !important;
  }

  .after_arrow::after {
    top: calc(100% + var(--st-pad--container-mid) / 2);
    left: 50%;
    width: 1.4rem;
    height: 1rem;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
}


/* contactform */
.wpcf7 {
  background: var(--c-bg);
  border: 2px solid var(--c-red);
  border-radius: 16px;
  padding: 3rem var(--ark-pad--container);
}

/* blog */
article.p-entry.post.type-post {
  background: var(--c-wh);
  padding: var(--ark-pad--container);
  border-radius: 1rem;
}

footer.p-entry__foot,
section.p-entry__related.c-bottomSection {
  border-top: 1px solid var(--c-border);
  padding-top: 2rem;
  margin-top: 2rem !important;
}

.c-widget.widget_block .wp-block-latest-posts li {
  display: flex;
  flex-direction: column;
}

.c-widget.widget_block .wp-block-latest-posts__post-category {
  font-size: .7rem;
  background: var(--c-primary);
  padding: .2rem .4rem;
  border-radius: .3rem;
  color: var(--c-wh);
  margin-bottom: .4rem;
  width: min(100%, 160px);
  text-align: center;
}


/* souzoku */
.semi_news_post time {
  font-size: 1rem;
}

.semi_news_post .wp-block-latest-posts__post-category {
  display: none;
}

.semi_news_post a {
  padding-top: 1rem !important;
  display: block;
  font-weight: bold;
  color: var(--c-green);
}

.semi_news_post a:hover {
  opacity: .8;
  transition: color .25s;
}

.semi_news_post .wp-block-latest-posts__post-excerpt {
  font-size: .9rem;
  padding: 0 1rem;
}
/* アイキャッチを左、日付・カテゴリー・タイトル・抜粋を右に並べる */
.semi_news_post li:has(.wp-block-latest-posts__featured-image) {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 1.5rem;
  align-content: start;
}

.semi_news_post .wp-block-latest-posts__featured-image {
  grid-row: 1 / span 4;
  margin: 0;
}

/* 画像はWPがstyle="max-width:150px"を付けるため、列幅（SPは80px）に合わせて縮める */
.semi_news_post .wp-block-latest-posts__featured-image img {
  width: 100%;
  height: auto;
}

.semi_news_post li > :not(.wp-block-latest-posts__featured-image) {
  grid-column: 2;
}

@media (max-width: 480px) {
  .semi_news_post li:has(.wp-block-latest-posts__featured-image) {
    grid-template-columns: 80px 1fr;
    column-gap: 1rem;
  }
}