/****************************************
* main.css :トップページ、各固定ページのデザインを記載
* 役割：各ページで独自で適用するデザインを記載する。
***************************************/
/* 基本カラー var(--)で呼び出し */
:root {
  /* color */

  /* brand */
  --primary-color : #16253F;
  --secondary-color : #F3EFE7;

  /* text */
  --color-text: #454545;
  --color-text-light: #666666;
  --color-text-white: #ffffff;
  --color-text-gray:#42444C;

  /* background */
  --color-bg: #ffffff;
  --color-bg-dark: #42444C;
  --color-bg-gray: #EDF4FD;
  --color-after-line:#A7BCD6;

  /* gradation */
  --color-grad1: #2e5eb4;
  --color-grad2: #3D74CC ;
  --color-grad3: #4b8ee4;
  --color-grad-tmplate:linear-gradient(183deg, var(--color-grad1) 0%, var(--color-grad3) 100%);

  /* 旧テンプレート由来の変数（未使用） */
  --ss-navy      : #16253f;
  --ss-cream     : #f3efe7;
  --ss-table-th  : #e3e8ef;
  --ss-border    : #959595;
  --ss-text-th   : #535353;
  --ss-text-td   : #42444c;
  --ss-card-bg   : #f5f5f5;
  --ss-inner     : 940px;

}

/* ══════════════════════════════════════
   トップページ（Figma 1300px 基準 / メインカラム 930px）
   ══════════════════════════════════════ */

/* ── KV ── */
/* 背景・アーチ線・ロゴ・コピー（テキスト）・さぽ太を分解して配置（位置はデザイン1300×671.5基準の%）
   家族イラストを削除し、コピーを画像からテキストへ。KVの高さを 704 → 671.5 に縮めた */
.p-top-kv {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-pink);
  /* ヘッダーのナビとアーチ線の間を詰める */
  margin-top: -30px;
}

.p-top-kv__stage {
  position: relative;
  aspect-ratio: 1300 / 671.5;
}

.p-top-kv__stage img {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
}

.p-top-kv__bg {
  top: 6.106%;
  left: 0;
  width: 100%;
}

/* アーチは SVG 側で左右対称にしてある。ここは左右の食い出しを均等にするだけ（頂点が中央に来る） */
.p-top-kv__arc {
  top: 5.361%;
  left: -0.132%;
  width: 100.264%;
}

.p-top-kv__logo {
  top: 16.233%;
  left: 23.231%;
  width: 55%;
}

/* コピーは3行とも中央ぞろえ。デザイン上の各行の中心（約747px）に合わせる。
   ここで transform は使えない（登場アニメ p-top-kv-in が transform を使うため上書きされる） */
.p-top-kv__copy {
  position: absolute;
  top: 41.102%;
  left: 34.385%;
  width: 46.154%;
  text-align: center;
}

/* ⚠ KVの文字サイズ・余白はすべて vw（デザイン基準幅1300px に対する比率）で指定する。
   位置をステージ高さの % で決めているので、文字だけ px 固定にすると
   1300px より狭い画面で縮まず、サブコピーとボタンが重なる。
   例：48px ÷ 1300px = 3.692vw。背景画像（幅100%）と同じ比率で伸縮する。

   背景写真の上でも読めるように白フチを付ける。
   paint-order で「フチ→文字」の順に描き、文字が細らないようにする（指定値の半分が外側に出る） */
.p-top-kv__lead,
.p-top-kv__title,
.p-top-kv__subcopy,
.p-top-kv__credit {
  paint-order: stroke fill;
  -webkit-text-stroke: 0.462vw var(--color-bg);
}

.p-top-kv__lead,
.p-top-kv__title {
  font-family: var(--font-meiryo);
  font-size: 3.692vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* 助詞（を・に考える・の）だけ一回り小さくして、キーワードを立たせる */
.p-top-kv__sm {
  font-size: 2.769vw;
}

.p-top-kv__lead {
  line-height: 1.27;
  color: var(--color-main);
}

.p-top-kv__title {
  margin-top: 0.462vw;
  line-height: 1.33;
  color: var(--color-sub);
}

.p-top-kv__subcopy {
  margin-top: 1.077vw;
  font-family: var(--font-meiryo);
  font-size: 1.692vw;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-body-brown);
  -webkit-text-stroke-width: 0.308vw;
}

/* さぽ太：画像の右側に焼き込まれた文字を隠すため、枠で切って中の画像を大きく表示する */
.p-top-kv__sapota {
  position: absolute;
  top: 38.272%;
  left: 18.692%;
  width: 15.462%;
  overflow: hidden;
}

.p-top-kv__sapota img {
  position: static;
  width: 145.74%;
}

/* 幅は文字に合わせる（固定幅にすると、右寄せの ©さぽ太くん がボタンの下に潜り込む） */
.p-top-kv__credit {
  position: absolute;
  top: 69.397%;
  left: 33%;
  width: max-content;
  font-family: var(--font-meiryo);
  font-size: 0.846vw;
  font-weight: 700;
  line-height: 1.27;
  color: var(--color-body-brown);
  -webkit-text-stroke-width: 0.192vw;
}

.p-top-kv__credit-mark {
  display: block;
  font-size: 0.769vw;
  text-align: right;
}

.p-top-kv__btn {
  position: absolute;
  top: 75.205%;
  left: 57.577%;
  transform: translate(-50%, -50%);
  width: 30.077vw;
  height: 4.308vw;
  border-radius: 2.154vw;
  font-family: var(--font-signika), var(--font-maru);
  font-size: 1.538vw;
  letter-spacing: 0.12em;
}
/* KV：読み込み時にロゴ→コピー→クレジットの順にふわっと表示、さぽ太はポンと出て跳ね続ける */
@keyframes p-top-kv-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes p-top-kv-btn-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 24px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes p-top-kv-pop {
  0%   { opacity: 0; transform: translateY(30px) scale(.9); }
  60%  { opacity: 1; transform: translateY(-10px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.p-top-kv__logo {
  animation: p-top-kv-in 1s cubic-bezier(0.16, 1, 0.3, 1) .1s both;
}

.p-top-kv__copy {
  animation: p-top-kv-in 1s cubic-bezier(0.16, 1, 0.3, 1) .35s both;
}

.p-top-kv__credit {
  animation: p-top-kv-in 1s cubic-bezier(0.16, 1, 0.3, 1) .6s both;
}

.p-top-kv__btn {
  animation: p-top-kv-btn-in 1s cubic-bezier(0.16, 1, 0.3, 1) .85s both;
}

/* 登場（0.2〜1.0秒）のあと、1.4秒から跳ねる。後に書いた c-bounce が優先される */
.p-top-kv__sapota {
  animation: p-top-kv-pop .8s ease-out .2s both,
             c-bounce 2.8s ease-in-out 1.4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .p-top-kv__logo,
  .p-top-kv__copy,
  .p-top-kv__credit,
  .p-top-kv__btn,
  .p-top-kv__sapota {
    animation: none;
  }
}


/* ── FOR YOU ── */
.p-top-foryou {
  padding: 70px 0 59px;
}

.p-top-foryou__sapota {
  display: block;
  width: 112px;
  height: 151px;
  margin: 0 auto -12px;
}

.p-top-foryou__title {
  margin-top: 9px;
}

.p-top-foryou__list {
  position: relative;
  display: flex;
  gap: 50px;
  margin-top: 59px;
}

.p-top-foryou__card {
  position: relative;
  width: 440px;
  min-height: 336px;
  padding: 30px 37px 26px;
  border: 2px solid var(--color-main);
  border-radius: 25px;
  background-color: var(--color-bg);
}

.p-top-foryou__card--sub {
  border-color: var(--color-sub);
}

.p-top-foryou__icon {
  display: block;
  width: 54px;
  height: 54px;
}

.p-top-foryou__card-title {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
}

.p-top-foryou__card-text {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0.08em; /* 「大切なご家族の将来に不安を感じたら、」（18文字）を1行（362px）に収める */
  /* 文節の折り返しは HTML 側の cosmos_phrases()（.u-phrase）で行う（auto-phrase は Chrome 系のみのため にやめた） */
}

.p-top-foryou__card .c-more {
  margin-top: 21px;
}

.p-top-foryou__sapota--side {
  position: absolute;
  right: -35px;
  bottom: 10px;
  z-index: 1;
  width: 106px;
  height: 127px;
}

.p-top-foryou__sapota--peek {
  position: absolute;
  top: -14px;
  right: -7px;
  z-index: 1;
  width: 103px;
  height: 144px;
}

/* ── ABOUT US ── */
.p-top-about {
  position: relative;
  padding: 79px 0 90px;
  background-color: var(--color-bg-pink);
}

/* 画像内の犬の中心（画像幅の約48%）を文字の中心＝ページ中央に合わせる */
.p-top-about__sapota {
  display: block;
  width: 117px;
  height: 151px;
  margin: 0 0 -10px calc(50% - 56px);
}

.p-top-about__intro {
  display: flex;
  gap: 50px;
  margin-top: 41px;
}

.p-top-about__img {
  flex-shrink: 0;
  width: 440px;
  height: 283px;
  border-radius: 25px;
  object-fit: cover;
}

.p-top-about__sub {
  font-size: 16px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.12em;
  color: var(--color-main);
}

.p-top-about__title {
  margin-top: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.12em;
}

.p-top-about__text {
  width: 426px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: 0.12em;
}

.p-top-about__intro .c-more {
  margin-top: 12px;
}

.p-top-about__movie {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 800px;
  max-width: 100%;
  height: 450px;
  margin: 80px auto 0;
  background-color: var(--color-bg-dummy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-link-blue);
}

.p-top-about__movie iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.p-top-about__sapota--side {
  position: absolute;
  top: 996px;
  left: calc(50% - 474px);
  width: 106px;
  height: 127px;
}

.p-top-about__gallery {
  margin-top: 79px;
  overflow: hidden;
}

.p-top-about__gallery-track {
  display: flex;
  width: max-content;
  animation: p-top-marquee 80s linear infinite;
}

.p-top-about__gallery-track img {
  flex-shrink: 0;
  width: 325px;
  height: 208px;
  object-fit: cover;
}

@keyframes p-top-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-3250px); }
}

@media (prefers-reduced-motion: reduce) {
  .p-top-about__gallery-track {
    animation: none;
  }
}

/* ── ABOUT THE SYSTEM ── */
.p-top-system {
  position: relative;
  padding: 75px 0 81px;
}

.p-top-system__sapota {
  display: block;
  width: 89px;
  height: 156px;
  margin-left: calc(50% - 47px);
}

.p-top-system__title {
  margin-top: 37px;
}

.p-top-system__lead {
  margin-top: 17px;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0.12em;
  text-align: center;
}

.p-top-system__flow {
  position: relative;
  height: 135px;
  margin-top: 47px;
}

.p-top-system__flow-line {
  position: absolute;
  top: 62px;
  left: 192px;
  width: 541px;
  height: 1px;
  background-color: var(--color-border);
}

/* さぽ太は顔まわりだけを見せて、線の端に乗せる */
.p-top-system__flow-sapota {
  position: absolute;
  top: 0;
  overflow: hidden;
}

.p-top-system__flow-sapota img {
  position: absolute;
  max-width: none;
}

.p-top-system__flow-sapota--idea {
  left: 156px;
  width: 114px;
  height: 86px;
}

.p-top-system__flow-sapota--idea img {
  top: -43.87px;
  left: -7.64px;
  width: 129.28px;
  height: 201.2px;
}

.p-top-system__flow-sapota--point {
  left: 658px;
  width: 97px;
  height: 82px;
}

.p-top-system__flow-sapota--point img {
  top: -9.95px;
  left: -8.71px;
  width: 117.56px;
  height: 168.62px;
}

.p-top-system__flow-label {
  position: absolute;
  top: 86px;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.12em;
  text-align: center;
}

.p-top-system__flow-label--main {
  left: 117px;
  width: 191px;
  color: var(--color-main);
}

.p-top-system__flow-label--sub {
  left: 614px;
  width: 185px;
  color: var(--color-sub);
}

.p-top-system__list {
  display: flex;
  gap: 50px;
  margin-top: 33px;
}

/* 「くわしく見る」を左右のカードで同じ高さ（カードの下端）にそろえる */
.p-top-system__card {
  display: flex;
  flex-direction: column;
  width: 440px;
  min-height: 605px; /* 左右のカードの高さをそろえる最小値（内容の自然な高さ 601〜602px ＋ 余白） */
  padding: 28px 33px 34px;
  border: 2px solid var(--color-main);
  border-radius: 25px;
  background-color: var(--color-bg);
  text-align: center;
}

.p-top-system__card--sub {
  border-color: var(--color-sub);
}

/* カード内のさぽ太はSPのみ表示（PCは線の上に表示） */
.p-top-system__card-sapota {
  display: none;
}

.p-top-system__pill {
  width: 294px;
  height: 43px;
  margin-inline: auto;
  border-radius: 20px;
  font-size: 24px;
  letter-spacing: 0.12em;
}

.p-top-system__card-title {
  margin-top: 15px;
  font-size: 24px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
}

.p-top-system__card-title span {
  color: var(--color-main);
}

.p-top-system__card--sub .p-top-system__card-title span {
  color: var(--color-sub);
}

.p-top-system__card-text {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0.12em;
  text-align: left;
}

.p-top-system__check {
  flex-grow: 1;
  margin-top: 34px;
  text-align: left;
}

.p-top-system__check li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 1行・2行の項目が混ざっても間隔が同じに見えるよう、高さは固定せず余白だけで空ける */
.p-top-system__check li + li {
  margin-top: 16px;
}

.p-top-system__check img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 3px;
}

/* 活動報告の内容は文節で折り返す（対応ブラウザ＝Chrome系のみ。Safari では通常の折り返し）
   ※短い文は に cosmos_phrases()（.u-phrase）へ切り替えたので、ここに残るのは長文の活動報告だけ */
.p-activity-report__works li {
  word-break: auto-phrase;
}

.p-top-system__check-text {
  margin-right: -0.1em; /* letter-spacing の行末余白を打ち消す */
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0.1em;
}

/* 法定後見カードの導入文（チェックアイコンなし） */
.p-top-system__check .p-top-system__check-lead {
  display: block;
  min-height: 0;
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0; /* 「認知症・精神障害・知的障害などによって」（19文字）を1行（374px）に収める：19px × 19 ＝ 361px（Windows の Meiryo でも余裕を持たせるため字間なし） */
  white-space: nowrap;
}

.p-top-system__card .c-more {
  margin: 24px auto 0;
}

/* ── CTA 帯 ── */
.p-top-cta {
  background-color: var(--color-sub);
}

.p-top-cta__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 192px;
}

/* 福祉関係者ページのCTAと同じ白縁のさぽ太・同じ大きさ */
.p-top-cta__sapota {
  flex-shrink: 0;
  width: 90px;
  height: 93px;
  object-fit: contain;
}

.p-top-cta__body {
  width: 294px;
}

.p-top-cta__lead {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-base);
}

.p-top-cta__title {
  font-size: 29px;
  font-weight: 700;
  color: var(--color-base);
}

.p-top-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-shrink: 0;
  width: 384px;
  height: 92px;
  margin-left: 3px;
  border: 1px solid var(--color-text-white);
  font-size: 21px;
  font-weight: 500;
  color: var(--color-base);
  transition: opacity .3s;
}

.p-top-cta__btn:hover {
  opacity: .8;
}

.p-top-cta__btn img {
  width: 20px;
  height: 5px;
}

/* ── COSMOS NOW ── */
.p-top-news {
  margin-top: 0; /* KV の直下に置くため、KV との間に余白を作らない */
  padding: 44px 0 123px;
  background: url(../img/common/bg_news.png) center / cover no-repeat;
}

.p-top-news__sapota {
  display: block;
  width: 102px;
  height: 158px;
  margin-left: calc(50% - 57px);
}

.p-top-news__label {
  margin-top: 13px;
}
.p-top-news__cols {
  display: flex;
  flex-direction: column;
  gap: 55px;
  margin-top: 69px;
}

.p-top-news__col {
  width: 100%;
}

.p-top-news__head {
  display: flex;
  align-items: center;
}

.p-top-news__head-icon {
  width: 30px;
  height: 29px;
}

.p-top-news__head-title {
  margin-left: 15px;
  font-size: 24px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
  color: var(--color-main);
}

.p-top-news__head .c-more {
  margin-left: auto;
}

.p-top-news__list {
  margin-top: 27px;
}

.p-top-news__list .c-postlist__item + .c-postlist__item {
  margin-top: 27px;
}

.p-top-news__dayori {
  margin-top: 55px;
}

/* ── コラム（サムネイル付き4件） ── */
.p-top-news__column {
  margin-top: 55px;
}

.p-top-news__column-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 29px;
}

.p-top-news__column-item a {
  display: block;
  transition: opacity .3s;
}

.p-top-news__column-item a:hover {
  opacity: .7;
}

.p-top-news__column-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
}

.p-top-news__column-thumb--none {
  background-color: var(--color-bg-dummy);
}

.p-top-news__column-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.p-top-news__column-meta .c-badge {
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

.p-top-news__column-date {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-main);
}

.p-top-news__column-title {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-body);
}

.p-top-news__dayori-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 38px;
  margin-top: 29px;
}

.p-top-news__dayori-item img {
  width: 100%;
  height: 217px;
  object-fit: contain;
}

.p-top-news__dayori-img--none {
  display: block;
  height: 217px;
  background-color: var(--color-bg-dummy);
}

.p-top-news__dayori-no {
  font-size: 16px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
  text-align: center;
}

/* ── SUPPORT US ── */
.p-top-support {
  padding-top: 115px;
}

.p-top-support__sapota {
  display: block;
  width: 105px;
  height: 151px;
  margin-left: calc(50% - 49px);
}

.p-top-support__title {
  margin-top: 16px;
}

.p-top-support__list {
  display: flex;
  gap: 50px;
  margin-top: 77px;
}

.p-top-support__card {
  width: 440px;
  min-height: 217px;
  padding: 26px 39px 25px;
  border-radius: 25px;
  background-color: var(--color-bg-pink);
}

.p-top-support__card--blue {
  background-color: var(--color-bg-blue);
}

.p-top-support__head {
  display: flex;
  align-items: center;
}

.p-top-support__icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
}

.p-top-support__card-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
}

.p-top-support__card-text {
  width: 363px;
  margin-top: 6px;
  font-size: 17px;
  line-height: 23px;
  letter-spacing: 0.06em; /* 「個人・団体のみなさまを募集しています。」を1行（363px）に収める */
  /* 文節の折り返しは HTML 側の cosmos_phrases()（.u-phrase）で行う */
}

.p-top-support__card .c-more {
  margin-top: 14px;
}

/* サブページ---company */
.p-company_inner{
  margin-top: 160px;
}

.p-company_greeting-name{
  font-size: 28px;
  font-weight: bold;
  color: #42444C;
  text-align: right;
  line-height: 2.8;
}

.p-company_greeting{
  margin-bottom: 8rem;
}

.p-company_greeting-title{
  font-size: 24px;
  font-weight: bold;
  color: #42444C;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 4rem;
}

.p-company_greeting-name-title{
  font-size: 20px;
  font-weight: bold;
  color: #42444C;
  padding-right: 1rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.p-company_profile-table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 0 0 24px 0;
}
.p-company_profile{
  margin-bottom: 8rem;
}

.p-company_profile-table-th{
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 17px 25px;
  line-height: 2.2;
  border-top: 1px solid #ddd;
  border-right: none;
  border-left: none;
  font-weight: bold;
  color: #42444C;
  vertical-align: middle;
}

.p-company_profile-table-td{
  color: #42444C;
  border-top: 1px solid #ddd;
  border-right: none;
  border-left: none;
  vertical-align: middle;
  border: 1px solid #ddd;
  padding: 17px 25px;
  line-height: 2.2;
  background: #fff;
}

/* ── 事業内容ページ ── */
.p-business__section {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 80px var(--inner-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.p-business__section-title {
  font-family: var(--font-mincho);
  font-size: 32px;
  color: var(--ss-navy);
  font-weight: 400;
  margin-bottom: 24px;
}

.p-business__section-body {
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--ss-black);
  line-height: 1.9;
}

.p-business__section-img {
  border-radius: 10px 0 0 10px;
  overflow: hidden;
  margin-right: calc(-1 * (var(--inner-pad, 40px) + (100vw - min(100vw, var(--inner-max, 1200px))) / 2));
  width: calc(100% + var(--inner-pad, 40px) + (100vw - min(100vw, var(--inner-max, 1200px))) / 2);
}

.p-business__section-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-business__flow {
  background: radial-gradient(ellipse at top, #2a3f66 0%, var(--ss-navy, #1a2744) 55%, #0f1a30 100%);
  padding: 80px 0;
}

.p-business__flow__head {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  text-align: center;
  margin-bottom: 60px;
}

.p-business__flow__title {
  font-family: var(--font-mincho);
  font-size: 32px;
  color: var(--color-text-white);
  font-weight: 400;
}

.p-business__flow__sub {
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--color-text-white);
  margin-top: 10px;
}

.p-business__flow__list {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.p-business__flow__connector {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

.p-business__flow__connector::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #bbb;
}

.p-business__flow__step {
  background: #fff;
  border-radius: 10px;
  padding: 28px 40px 28px 170px;
  position: relative;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-business__flow__step-badge {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-color);;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-business__flow__step-badge img {
  width: 40px;
  height: auto;
}

.p-business__flow__step-num {
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  color: var(--ss-black);
  background: var(--secondary-color);
  border-radius: 50px;
  padding: 4px 14px;
  position: absolute;
  left: 27px;
  top: -15px;
}

.p-business__flow__step-title {
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 700;
  color: var(--ss-navy);
}

.p-business__flow__step-body {
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--ss-black);
  line-height: 1.8;
  margin-top: 10px;
}

.p-business__property {
  padding: 100px 0;
}
 
.p-business__property__head {
  text-align: center;
  margin-bottom: 60px;
}
 
.p-business__property__title {
  font-family: var(--font-mincho);
  font-size: 32px;
  color: var(--ss-navy);
  font-weight: 400;
  letter-spacing: 0.05em;
}
 
.p-business__property__sub {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--ss-black);
  margin-top: 8px;
}

/* アーカイブページ---property */
.p-property {
  padding: 100px 0;
}
 
.p-property__head {
  text-align: center;
  margin-bottom: 60px;
}
 
.p-property__title {
  font-family: var(--font-mincho);
  font-size: 32px;
  color: var(--ss-navy);
  font-weight: 400;
  letter-spacing: 0.05em;
}
 
.p-property__sub {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--ss-black);
  margin-top: 8px;
}

.p-property-archive-title {
  margin-bottom: 40px;
}
.p-property_inner {
  margin-top: 160px;
}

.p-property_text_wrapper .c-sec_title {
  text-align: center;
}

.p-property_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:80px;
  grid-auto-rows: auto;
}

.p-property_list_item {
  background: #fff;
}

.p-property_list_item a {
  display: block;
}

.p-property_list_item_inner {
  padding: 0;
}

.p-property_list_item:hover {
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
}

.p-property_image_wrapper {
  height: 260px;
  border-radius: 4px;
  overflow: hidden;
}

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

.p-property_card_body {
  padding: 16px 4px 0;
}

.p-property_title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 10px;
  border-bottom: none;
  padding: 0;
}

.p-property_text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: #555;
}

.p-property_view-more_wrapper {
  position: relative;
}

.p-property_view-more_wrapper .c-btn_view-more_wrapper {
  bottom: -120px;
  right: 50%;
  transform: translateX(50%);
}

.p-property_empty {
  text-align: center;
  font-size: 16px;
}

.p-entry__thumbnail{
  width: 100%;
  height: 556px;
  margin-bottom: 0 !important;
}

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

/* サブページ---property--single */
.p-property-single_inner {
  margin-top: 160px;
}

.p-property-single_post_header {
  margin-bottom: 2rem;
}

.p-property-single_post_header_inner {
  display: flex;
  align-items: center;
}

.p-property-single_post_title {
  font-size: 36px;
  margin: 0;
  font-weight: bold;
  color: var(--primary-color);
}

.p-property-single_post_header_inner p {
  font-size: 18px;
  padding-left: 2vw;
}

.p-property-single_inner .c-btn_view-more_wrapper {
  bottom: 60px;
  right: 50%;
  transform: translateX(50%);
  height: 66px;
  margin-top: 4rem;
}

.p-property-single_before-after {
  display: flex;
  justify-content: space-between;
  gap: 105px;
  margin: 80px 0 40px 0;
}

.p-property-single_before {
  width: 48%;
}

.p-property-single_after {
  width: 48%;
}

.p-property-single_before img,
.p-property-single_after img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

.p-property-single_before-after_label {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: var(--primary-color);
  margin-bottom: 40px;
}

.p-property-single_postkv {
  aspect-ratio: 1059 / 383;
  overflow: hidden;
  border-radius: 10px;
}

.p-property_btn-wrap {
  text-align: center;
  justify-items: center;
  margin-top: 4rem;
}

.p-property_btn-wrap .c-btn{
    width: 360px;
}

.p-property-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 0 0 24px 0;
}
.p-property_profile {
  margin-bottom: 4rem;
}

.p-property_profile-table-th {
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 17px 25px;
  line-height: 2.2;
  border-top: 1px solid #ddd;
  border-right: none;
  border-left: none;
  font-weight: bold;
  color: #42444C;
  vertical-align: middle;
}

.p-property_profile-table-td {
  color: #42444C;
  border-top: 1px solid #ddd;
  border-right: none;
  border-left: none;
  vertical-align: middle;
  border: 1px solid #ddd;
  padding: 17px 25px;
  line-height: 2.2;
  background: #fff;
}

.p-property-single_gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 80px;
  margin-bottom: 40px;
}

.p-property-single_gallery_item {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
}

.p-property-single_gallery_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-property-single_section {
  margin-top: 80px;
}

.p-property-single_section_title {
  font-size: 24px;
  font-weight: 700;
  color: #1a2b4c;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #b8a06a;
}

.p-property-single_section_text {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  margin: 0;
}

/* ── 汎用固定ページ（専用テンプレートが無いページ） ── */
.p-page {
  padding-top: 160px;
}

.p-page__body p {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-body);
}

.p-page__body p + p {
  margin-top: 32px;
}

/* ── お問い合わせ完了（見出し・本文・ボタンは404ページと同じ指定） ── */
.p-contact-complete {
  padding-top: 160px;
}

.p-contact-complete__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-body);
}

.p-contact-complete__body {
  margin-top: 60px;
  text-align: center;
}

.p-contact-complete__body p {
  font-size: 20px;
  font-weight: 500;
  line-height: 35px;
  color: var(--color-body);
}

.p-contact-complete__body p + p {
  margin-top: 32px;
}

.p-contact-complete__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 221px;
  height: 59px;
  margin: 72px auto 0;
  padding-left: 27px;
  border-radius: 999px;
  background-color: var(--color-main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-text-white);
  transition: opacity .3s;
}

.p-contact-complete__btn span {
  position: absolute;
  left: 28px;
}

.p-contact-complete__btn:hover {
  opacity: .8;
}

/* サブページ---column */

.p-sub_column_bg {
  background: var(--color-bg);
}

.p-sub_column_inner {
  display: flex;
  justify-content: space-between;
  padding: 80px 0 160px;
}

.p-sub_column_main_contents {
  width: 65%;
}

.p-sub_column_list {
  position: relative;
  margin: 0 0 2vw 0;
  background: var(--color-bg);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  overflow: hidden;
}

.p-sub_column_list a {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: center;
  padding: 2vw;
}

.p-sub_column_list_img {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
}

.p-sub_column_list_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-sub_column_list_img-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #e5e0d5;
  color: #a89f8c;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .05em;
}

.p-sub_column_cat {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: #fff;
  background: #b5834a;
  border-radius: 3px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

.p-sub_column_cat--news {
  background: #4a7ab5;
}

.p-sub_column_cat--seller {
  background: #b5834a;
}

.p-sub_column_date {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 1vw;
}

.p-sub_column_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 2;
  color: var(--primary-color);
}

.p-sub_column_excerpt {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin-top: 8px;
}

.p-sub_column_arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  font-size: 16px;
  color: var(--primary-color);
}

.p-sub_column_side_contents {
  width: 30%;
}

.p-sub_column_side_contents_item {
  position: relative;
  margin: 0 0 3vw 0;
  background: var(--color-bg);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}

.p-sub_column_side_contents_item_inner {
  padding: 2rem;
}

.p-sub_column_side_title {
  font-size: 20px;
  color: var(--primary-color);
  font-weight: bold;
  margin-bottom: 2vw
}

.p-sub_column_side_contents_list {
  list-style: none;
  margin: 0 0 1.8rem 0;
}

.p-sub_column_side_contents_list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 1vh;
}

.p-sub_column_side_date {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
}

.p-sub_column_side_cat {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  color: #fff;
  background: #b5834a;
  border-radius: 3px;
  padding: 2px 8px;
  margin: 0;
}

.p-sub_column_side_cat--news {
  background: #4a7ab5;
}

.p-sub_column_side_cat--seller {
  background: #b5834a;
}

.p-sub_column_side_post_title {
  flex-basis: 100%;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
}

.p-sub_column_list:hover {
  background: var(--primary-color);
  transition: all .5s cubic-bezier(0, 0, 0, 1);
}

.p-sub_column_list:hover .p-sub_column_date,
.p-sub_column_list:hover .p-sub_column_title,
.p-sub_column_list:hover .p-sub_column_excerpt,
.p-sub_column_list:hover .p-sub_column_arrow {
  color: var(--color-bg) !important;
}

.p-sub_column_list:hover .p-sub_column_list_img-noimg {
  background: rgba(255, 255, 255, .15);
  color: var(--color-bg);
}

.p-sub_column_side_contents_list:hover .p-sub_column_side_date,
.p-sub_column_side_contents_list:hover .p-sub_column_side_post_title {
  color: var(--primary-color) !important;
}

.p-sub_column_side_contents_list:hover a {
  color: var(--primary-color);
}

/* サブページ---news-single */
.p-single-column_post_wrapper {
  position: relative;
  background: var(--color-bg);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.35);
  padding: 4rem;
  border-radius: 10px;
}

.p-single-column_meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1vw;
}

.p-single-column_date {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.p-single-column_cat {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: #fff;
  background: #b5834a;
  border-radius: 3px;
  padding: 3px 10px;
}

.p-single-column_cat--news {
  background: #4a7ab5;
}

.p-single-column_cat--seller {
  background: #b5834a;
}

.p-column_btn-wrap {
  text-align: center;
  margin-top: 4rem;
}

.p-single-column_post_title {
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #707070;
  margin: 0;
  padding-bottom: 1vw;
  line-height: 2;
  margin-bottom: 2rem;
  color: var(--primary-color);
}

.p-single-column_post p {
  font-size: 16px;
  padding: 2vw 0;
  line-height: 2;
}

.p-single-column_post p a {
  display: inline;
  color: var(--primary-color);
  text-decoration: underline;
  white-space: nowrap;
}

.p-sub_column_main_contents .c-btn_view-more_wrapper {
  position: static;
  margin: 4vw 0;
  text-align: center;
}

.p-sub_column_main_contents .c-btn_view-more_wrapper a {
  display: inline-block;
}

body.column.admin-bar {
  padding-top: 0 !important;
}

.post_content h3 {
  margin: 0;
  line-height: 1.5;
}

/* サブページ---flow */
.p-flow_inner{
  margin-top: 160px;
}

.p-flow_item{
  line-height: 2.2;
}

.p-flow_item-head{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.p-flow_item-head-step{
    font-size: 24px;
    color: #fff;
    background-color: var(--primary-color);
    font-weight: bold;
    width: 17%;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-flow_item-head-title{
  margin-bottom: 0 !important;
  width: 72%;
  font-size: 24px;
  font-weight: bold;
  color:  var(--color-text);
}

.p-flow_item-content{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #707070;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
}

.p-flow_item-content-img{
  width: 20%;
}

.p-flow_item-content-img img{
  width: 100%;
  height: auto;
  display: block;
}

.p-flow_item-content-text{
  margin-bottom: 0 !important;
  width: 72%;
  font-size: 16px;
}

/* サブページ---404 */
/* ── 404 ── */
.p-404 {
  padding-top: 160px;
}

.p-404__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-body);
}

.p-404__text {
  margin-top: 60px;
  font-size: 20px;
  font-weight: 500;
  line-height: 35px;
  text-align: center;
  color: var(--color-body);
}

.p-404__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 221px;
  height: 59px;
  margin: 72px auto 0;
  /* 矢印のぶん文字を右へ寄せる（Figma：文字の中心が左端から124px） */
  padding-left: 27px;
  border-radius: 999px;
  background-color: var(--color-main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-text-white);
  transition: opacity .3s;
}

.p-404__btn span {
  position: absolute;
  left: 28px;
}

.p-404__btn:hover {
  opacity: .8;
}

/* ── 会社案内ページ ── */

/* 代表挨拶 ヒーロー */
.p-company-hero {
  position: relative;
  height: 620px;
  overflow: hidden;
}
.p-company-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-company-hero__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--ss-inner), calc(100% - 48px));
  background: var(--ss-card-bg);
  border-radius: 10px;
  box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.25);
  padding: 40px 60px;
  box-sizing: border-box;
}
.p-company-hero__card-title {
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 700;
  color: #1d1d1f;
  text-align: center;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}
.p-company-hero__card-body {
  font-size: 15px;
  color: #343434;
  line-height: 2.25;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.p-company-hero__card-name {
  text-align: right;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: 0.12em;
}
.p-company-hero__card-name-role {
  font-size: 16px;
  margin-right: 16px;
}

/* セクション共通 */
.p-company-section {
  padding: 80px 0;
  background: var(--color-bg);
}
.p-company-section__head {
  text-align: center;
  margin-bottom: 40px;
}
.p-company-section__en {
  font-family: var(--font-mincho);
  font-size: 32px;
  color: var(--ss-navy);
  letter-spacing: 0.12em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.p-company-section__ja {
  font-family: var(--font-en);
  font-size: 16px;
  color: var(--ss-navy);
}
.p-company-section__body {
  max-width: var(--ss-inner);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* 会社概要テーブル */
.p-company-table {
  width: 100%;
  border-collapse: collapse;
}
.p-company-table__th,
.p-company-table__td {
  border: 1px solid var(--ss-border);
  padding: 28px 30px;
  font-size: 16px;
  vertical-align: middle;
  line-height: 1.75;
}
.p-company-table__th {
  width: 30%;
  background: var(--ss-table-th);
  font-weight: 700;
  color: var(--ss-text-th);
}
.p-company-table__td {
  background: var(--color-bg);
  color: var(--ss-text-td);
}
.p-company-table__td a {
  display: inline;
  color: var(--ss-text-td);
  text-decoration: underline;
}

/* アクセスマップ */
.p-company-section--access {
  background: var(--color-bg);
}
.p-company-map {
  border-radius: 8px;
  overflow: hidden;
}
.p-company-map iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
}


/* ══════════════════════════════════════
   再利用コンポーネント（.c-）
══════════════════════════════════════ */

.c-voice-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.c-voice-list__item {
  background: #fff;
  border-radius: 8px;
  padding: 20px 24px;
}

.c-voice-list__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.c-voice-list__avatar {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.c-voice-list__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ss-navy);
}

.c-voice-list__text {
  font-size: 16px;
  color: var(--ss-black);
  line-height: 1.8;
}

.c-column-list {
  grid-column: 2;
  grid-row: 1 / -1;
  list-style: none;
}

.c-column-list__item {
  border-top: 1px solid #ddd6c8;
}

.c-column-list__item:last-child {
  border-bottom: 1px solid #ddd6c8;
}

.c-column-list__link {
  display: block;
  position: relative;
  padding: 20px 40px 20px 0;
  text-decoration: none;
}

.c-column-list__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.c-column-list__date {
  font-size: 14px;
  color: #999;
}

.c-column-list__cat {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #fff;
  background: #b5834a;
  border-radius: 3px;
  padding: 3px 10px;
}

.c-column-list__cat--news {
  background: #4a7ab5;
}

.c-column-list__cat--seller {
  background: #b5834a;
}

.c-column-list__title {
  font-size: 16px;
  color: var(--ss-black);
}

.c-column-list__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ss-navy);
}

.c-instagram-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.c-instagram-list__item a {
  display: block;
  aspect-ratio: 1 / 1;
}

.c-instagram-list__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease;
}

.c-instagram-list__item a:hover img {
  opacity: .85;
}

.c-btn_view-more:hover .c-btn_view-more_arrow.column circle {
  fill: #E5EEFA;
}

/* ==========================================================================
   p-aboutus  コスモスおおさかについて
========================================================================== */

/* ── 支部長挨拶 ── */
.p-aboutus-greeting {
  padding-top: 163px;
}

.p-aboutus-greeting__body {
  display: flow-root; /* 右に回り込ませた写真を本文の中に収める */
  margin-top: 50px;
  padding: 0 53px; /* 見出し「支部長挨拶」の文字の左端（花アイコン36px＋間隔17px）に本文の左端をそろえる */
}

.p-aboutus-greeting__body p {
  font-size: 20px;
  font-weight: 500;
  line-height: 36px;
}

.p-aboutus-greeting__body p + p {
  margin-top: 28px;
}

.p-aboutus-greeting__body strong {
  font-weight: 700;
}

/* 写真は旧サイトと同じく本文の右上に置き、文章を回り込ませる */
.p-aboutus-greeting__figure {
  float: right;
  width: 270px;
  margin: 0 0 24px 40px;
}

.p-aboutus-greeting__caption {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: var(--color-body);
}

/* 「__body p」の汎用指定に負けないよう優先度を上げる（名前 > 役職 の大きさにする） */
.p-aboutus-greeting p.p-aboutus-greeting__name {
  margin-top: 40px;
  font-size: 28px;
  font-weight: 700;
  line-height: 48px;
  text-align: right;
}

.p-aboutus-greeting__name-role {
  margin-right: 22px;
  font-size: 24px;
}

.p-aboutus-greeting__name-note {
  font-size: 20px;
  font-weight: 500;
}

.p-aboutus-greeting__photo {
  display: block;
  width: 270px;
  height: 345px;
  border-radius: 20px;
  object-fit: cover;
}

/* ── 組織概要 ── */
.p-aboutus-org {
  padding-top: 152px;
}

.p-aboutus-org__card {
  margin-top: 89px;
  padding: 72px 0 80px;
  border: 2px solid var(--color-sub);
  border-radius: 25px;
  background-color: var(--color-bg);
}

/* 全国 */
.p-aboutus-org__japan {
  position: relative;
  width: 940px;
  margin-inline: auto;
}

.p-aboutus-org__japan-map {
  display: block;
  width: 940px;
  height: 751px;
}

.p-aboutus-org__stats {
  position: absolute;
  top: 82px;
  left: 42px;
  width: 363px;
  height: 168px;
  padding: 25px 0 0 118px;
  border-radius: 15px;
  background-color: var(--color-bg-blue);
}

.p-aboutus-org__stats-sapota {
  position: absolute;
  top: 14px;
  left: 18px;
  width: 96px;
  height: 138px;
}

.p-aboutus-org__stats-date {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.12em;
}

.p-aboutus-org__stats-list {
  display: grid;
  grid-template-columns: 96px auto;
  align-items: center;
  gap: 13px 18px;
  margin-top: 12px;
}

.p-aboutus-org__stats-label {
  width: 96px;
  height: 28px;
  font-size: 16px;
  letter-spacing: 0.12em;
}

.p-aboutus-org__stats-value {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.12em;
}

/* 役員名簿のPDFリンク */
.p-aboutus-org__stats-pdf {
  display: inline;
  color: var(--color-sub);
  text-decoration: underline;
  transition: opacity .3s;
}

.p-aboutus-org__stats-pdf:hover {
  opacity: .7;
}

/* 大阪府支部（組織図）に置くときの統計カード。元のさぽ太と同じ位置に出す。
   ・組織図は幅1027px固定で、画面が狭まると左へ寄ってくる。カードが大きいと
     「支部長」のボックスに重なるため、組織概要のカードより一回り小さくしてある
   ・高さは固定せず、値が伸びてもあふれないようにする
   ・組織図（.p-aboutus-branch__chart）は幅1027pxの透明な箱で、HTML上このカードより
     後ろにある。z-index を上げないと、見た目は下でもクリックを組織図が奪い、
     PDFリンクが押せない */
.p-aboutus-org__stats--branch {
  top: 37px;
  left: 54px;
  width: 329px;
  height: auto;
  min-height: 146px;
  padding: 20px 16px 20px 100px;
  z-index: 1;
}

.p-aboutus-org__stats--branch .p-aboutus-org__stats-sapota {
  top: 12px;
  left: 14px;
  width: 80px;
  height: 115px;
}

.p-aboutus-org__stats--branch .p-aboutus-org__stats-date {
  font-size: 20px;
  line-height: 27px;
}

.p-aboutus-org__stats--branch .p-aboutus-org__stats-list {
  grid-template-columns: 84px auto;
  gap: 10px 14px;
  margin-top: 10px;
}

.p-aboutus-org__stats--branch .p-aboutus-org__stats-label {
  width: 84px;
  height: 24px;
  font-size: 14px;
}

.p-aboutus-org__stats--branch .p-aboutus-org__stats-value {
  font-size: 20px;
  line-height: 27px;
}

/* 大阪府内 */
.p-aboutus-org__osaka {
  display: flex;
  align-items: flex-start;
  margin-top: 77px;
  padding-left: 53px;
}

.p-aboutus-org__osaka-map {
  position: relative;
  flex-shrink: 0;
  width: 501px;
  margin-top: 85px;
}

.p-aboutus-org__osaka-map img {
  display: block;
  width: 501px;
  height: 581px;
}

.p-aboutus-org__osaka-label {
  position: absolute;
  font-size: 18px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: -0.05em;
}

.p-aboutus-org__osaka-label--north {
  top: 133px;
  left: 283px;
}

.p-aboutus-org__osaka-label--middle {
  top: 267px;
  left: 290px;
}

.p-aboutus-org__osaka-label--south {
  top: 408px;
  left: 251px;
}

.p-aboutus-org__blocks {
  width: 465px;
}

.p-aboutus-org__block + .p-aboutus-org__block {
  margin-top: 21px;
}

.p-aboutus-org__block-head {
  padding: 18px 0;
  border: .5px solid var(--color-border-gray);
  border-radius: 10px 10px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.12em;
  text-align: center;
}

.p-aboutus-org__block-head--north {
  background-color: var(--color-bg-yellow);
}

.p-aboutus-org__block-head--middle {
  background-color: var(--color-bg-blue);
}

.p-aboutus-org__block-head--south {
  background-color: var(--color-bg-pink);
}

.p-aboutus-org__block-area {
  padding: 27px 15px 28px 39px;
  border: .5px solid var(--color-border-gray);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background-color: var(--color-bg);
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.12em;
}

/* ── 大阪府支部（組織図） ── */
.p-aboutus-branch {
  padding-top: 160px;
}

.p-aboutus-branch__card {
  position: relative;
  margin-top: 76px;
  padding: 76px 0 76px;
  border: 2px solid var(--color-sub);
  border-radius: 25px;
  background-color: var(--color-bg);
}

.p-aboutus-branch__sapota {
  position: absolute;
  top: 37px;
  left: 54px;
  width: 141px;
  height: 190px;
}

.p-aboutus-branch__chart {
  position: relative;
  width: 1027px;
  margin-inline: auto;
}

.p-aboutus-branch__box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  border: 2px solid;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  color: var(--color-body);
}

.p-aboutus-branch__box--head {
  width: 172px;
  margin-inline: auto;
  border-color: var(--color-main);
  background-color: var(--color-bg-pink);
}

/* 支部長 → 副支部長 をつなぐ縦線 */
.p-aboutus-branch__box--head + .p-aboutus-branch__box--head {
  position: relative;
  margin-top: 33px;
}

.p-aboutus-branch__box--head + .p-aboutus-branch__box--head::before {
  content: "";
  position: absolute;
  /* 起点はボックスの枠線(2px)の外側 */
  bottom: calc(100% + 2px);
  left: 50%;
  width: 1px;
  height: 33px;
  background-color: var(--color-body);
}

/* 副支部長 → 横線 → 各部 */
.p-aboutus-branch__depts {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 98px;
}

/* 副支部長から横線へ下りる縦線（副支部長の下端から横線まで） */
.p-aboutus-branch__depts::before {
  content: "";
  position: absolute;
  top: -98px;
  left: 50%;
  width: 1px;
  height: 49px;
  background-color: var(--color-body);
}

/* 各部をつなぐ横線 */
.p-aboutus-branch__depts::after {
  content: "";
  position: absolute;
  top: -49px;
  left: 75px;
  width: 877px;
  height: 1px;
  background-color: var(--color-body);
}

.p-aboutus-branch__box--dept {
  position: relative;
  width: 151px;
  border-color: var(--color-sub);
  background-color: var(--color-bg-blue);
}

.p-aboutus-branch__box--dept::before {
  content: "";
  position: absolute;
  /* 起点はボックスの枠線(2px)の外側 */
  bottom: calc(100% + 2px);
  left: 50%;
  width: 1px;
  height: 49px;
  background-color: var(--color-body);
}

.p-aboutus-branch__box--dept:last-child {
  font-size: 23px;
  line-height: 28px;
}

/* ── コスモスおおさかについて ── */
.p-aboutus-about {
  margin-top: 160px;
  padding: 75px 0 120px;
  background-color: var(--color-bg-pink);
}

.p-aboutus-about__body {
  margin-top: 48px;
}

.p-aboutus-about__body p {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

/* リード文のみ段落間を1行あける */
.p-aboutus-about__body--lead p + p {
  margin-top: 32px;
}

.p-aboutus-about__heading {
  margin-top: 48px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-sub);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-sub);
}

.p-aboutus-about__heading + .p-aboutus-about__body {
  margin-top: 20px;
}

.p-aboutus-about__btn {
  gap: 22px;
  width: 265px;
  height: 59px;
  margin: 80px auto 0;
  font-size: 16px;
  letter-spacing: 0.12em;
}

.p-aboutus-about__btn img {
  width: 20px;
  height: 5px;
}

/* ── 公式キャラクターのご紹介 ── */
.p-aboutus-character {
  position: relative;
  padding: 81px 0 120px;
  background-image: url("../img/common/bg_sakura.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.p-aboutus-character .l-inner {
  position: relative;
}

.p-aboutus-character__sapota {
  position: absolute;
  top: -50px;
  right: -27px;
  width: 172px;
  height: 241px;
}

.p-aboutus-character__catch {
  margin-top: 49px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.p-aboutus-character__name {
  margin-inline: 6px;
  font-size: 48px;
  color: var(--color-main);
}

.p-aboutus-character__body {
  margin-top: 77px;
}

.p-aboutus-character__body p {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-aboutus-character__body p + p {
  margin-top: 32px;
}

/* ── アクセス ── */
.p-aboutus-access {
  padding: 160px 0 150px;
}

/* Googleマップの埋め込み（iframe） */
.p-aboutus-access__map {
  display: block;
  width: 1100px;
  max-width: 100%;
  height: 409px;
  margin-top: 95px;
  border: 0;
  border-radius: 20px;
}

.p-aboutus-access__address {
  margin-top: 60px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-aboutus-access__address-name {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 700;
}

.p-aboutus-access__photos {
  display: flex;
  gap: 35px;
  margin-top: 47px;
}

.p-aboutus-access__photos img {
  display: block;
  width: 344px;
  height: 344px;
  border-radius: 20px;
  object-fit: cover;
}
/* ==========================================================================
   p-aboutsystem  成年後見制度について
========================================================================== */

/* ── 成年後見制度について ── */
.p-aboutsystem-about {
  padding-top: 164px;
}

.p-aboutsystem-about__body {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: 42px;
}

.p-aboutsystem-about__text {
  flex-shrink: 0;
  width: 694px;
}

.p-aboutsystem-about__text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

/* デザイン上、3段落目の前だけ1行あける */
.p-aboutsystem-about__text--gap {
  margin-top: 32px;
}

.p-aboutsystem-about__img {
  flex-shrink: 0;
  width: 406px;
  height: 271px;
  margin-top: -24px;
  object-fit: contain;
}

/* ── 利用することでできること ── */
.p-aboutsystem-can {
  margin-top: 170px;
  padding: 75px 0 120px;
  background-color: var(--color-bg-pink);
}

.p-aboutsystem-can__list {
  display: flex;
  justify-content: space-between;
  margin-top: 102px;
}

.p-aboutsystem-can__item {
  width: 352px;
  min-height: 530px;
  padding: 31px 0 0;
  border-radius: 25px;
  background-color: var(--color-bg);
}

/* イラストはデザインのマスク位置に合わせて切り出す */
.p-aboutsystem-can__img {
  margin-inline: auto;
  overflow: hidden;
}

.p-aboutsystem-can__img img {
  display: block;
  max-width: none;
}

/* イラストの高さが3枚とも異なるため、上下マージンで帯の位置を揃える */
.p-aboutsystem-can__item--contract .p-aboutsystem-can__img {
  width: 273px;
  height: 207px;
  margin: 16px auto 40px;
}

.p-aboutsystem-can__item--contract .p-aboutsystem-can__img img {
  width: 310px;
  height: 207px;
  margin-left: -19px;
}

.p-aboutsystem-can__item--asset .p-aboutsystem-can__img {
  width: 270px;
  height: 191px;
  margin: 17px auto 55px;
}

.p-aboutsystem-can__item--asset .p-aboutsystem-can__img img {
  width: 287px;
  height: 191px;
  margin-left: -9px;
}

.p-aboutsystem-can__item--protect .p-aboutsystem-can__img {
  width: 240px;
  height: 191px;
  margin: 27px auto 45px;
}

.p-aboutsystem-can__item--protect .p-aboutsystem-can__img img {
  width: 290px;
  height: 194px;
  margin: -1px 0 0 -25px;
}

.p-aboutsystem-can__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 305px;
  height: 32px;
  margin-inline: auto;
  border-radius: 999px;
  background-color: var(--color-main);
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-text-white);
}

.p-aboutsystem-can__text {
  width: 296px;
  margin: 22px auto 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.12em;
}

/* ── 成年後見制度のしくみ ── */
.p-aboutsystem-flow {
  padding: 120px 0 44px;
}

.p-aboutsystem-flow__chart {
  position: relative;
  margin-top: 88px;
  padding: 64px 0;
  border: 2px solid var(--color-sub);
  border-radius: 25px;
  background-color: var(--color-bg);
}

/* 成年後見制度 */
.p-aboutsystem-flow__top {
  position: relative;
  width: 715px;
  height: 131px;
  margin-inline: auto;
  border: 2px solid var(--color-main);
  border-radius: 15px;
  background-color: #fffef6;
}

/* さぽ太は縦長の素材を顔まわりで切り出して使う */
.p-aboutsystem-flow__top-sapota {
  position: absolute;
  top: 20px;
  left: 75px;
  width: 101px;
  height: 81px;
  overflow: hidden;
}

.p-aboutsystem-flow__top-sapota img {
  position: absolute;
  top: -15.86%;
  left: -7.37%;
  width: 118.95%;
  max-width: none;
  height: 206.72%;
}

/* さぽ太まわりの装飾 */
.p-aboutsystem-flow__top-deco {
  position: absolute;
}

.p-aboutsystem-flow__top-deco--1 {
  top: 59.8px;
  left: 52.6px;
  width: 16.2px;
  height: 15.5px;
  transform: rotate(-23.3deg);
}

.p-aboutsystem-flow__top-deco--2 {
  top: 75.4px;
  left: 65px;
  width: 21.4px;
  height: 20.5px;
  transform: rotate(15deg);
}

.p-aboutsystem-flow__top-title {
  position: absolute;
  top: 20px;
  left: 200px;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.12em;
}

.p-aboutsystem-flow__top-text {
  position: absolute;
  top: 60px;
  left: 200px;
  width: 474px;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.12em;
}

/* 任意後見 / 法定後見 */
.p-aboutsystem-flow__cols {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 61px;
  margin-top: 61px;
}

/* 「成年後見制度」から各カードへ下りる線 */
.p-aboutsystem-flow__card::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  width: 1px;
  height: 61px;
  background-color: #606060;
}

.p-aboutsystem-flow__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 440px;
  min-height: 414px;
  padding: 51px 0 27px;
  border: 2px solid var(--color-main);
  border-radius: 15px;
  background-color: var(--color-bg-pink);
}

.p-aboutsystem-flow__card--sub {
  border-color: var(--color-sub);
  background-color: var(--color-bg-blue);
}

/* タイトルの白帯（左端は角ばらせる） */
.p-aboutsystem-flow__card-head {
  position: relative;
  display: flex;
  align-items: center;
  width: 254px;
  height: 47px;
  margin-left: 113px;
  padding-bottom: 3px;
  border-radius: 0 23.5px 23.5px 0;
  background-color: var(--color-bg);
}

.p-aboutsystem-flow__card-sapota {
  position: absolute;
  top: -8px;
  left: -40px;
  width: 73px;
  height: 55px;
  overflow: hidden;
}

.p-aboutsystem-flow__card-sapota img {
  position: absolute;
  top: -51.01%;
  left: -6.7%;
  width: 113.4%;
  max-width: none;
  height: 233.96%;
}

.p-aboutsystem-flow__card-sapota--point {
  top: -9px;
  width: 66px;
  height: 56px;
}

.p-aboutsystem-flow__card-sapota--point img {
  top: -12.13%;
  left: -8.98%;
  width: 121.2%;
  height: 205.64%;
}

.p-aboutsystem-flow__card-title {
  width: 208px;
  margin-left: 20px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.12em;
  color: var(--color-main);
}

.p-aboutsystem-flow__card--sub .p-aboutsystem-flow__card-title {
  color: var(--color-sub);
}

.p-aboutsystem-flow__card-text {
  width: 384px;
  margin: 30px auto 16px;
}

.p-aboutsystem-flow__card-text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.12em;
}

.p-aboutsystem-flow__btn {
  gap: 10px;
  width: 183px;
  height: 43px;
  margin: auto auto 0;
  font-size: 16px;
  letter-spacing: 0.12em;
}

/* 後見 / 保佐 / 補助 */
.p-aboutsystem-flow__types {
  position: relative;
  display: flex;
  gap: 22px;
  margin-top: 42px;
  /* 法定後見カードの真下に寄せる（ul の margin-left は common.css で !important のため padding で調整） */
  padding-left: 580px;
}

.p-aboutsystem-flow__type {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 72px;
  border: 2px solid;
  border-radius: 10px;
  background-color: var(--color-bg);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.12em;
  color: var(--color-body);
}

.p-aboutsystem-flow__type::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  width: 1px;
  height: 42px;
  background-color: #606060;
}

.p-aboutsystem-flow__type--main {
  border-color: var(--color-main);
}

.p-aboutsystem-flow__type--sub {
  border-color: var(--color-sub);
}

.p-aboutsystem-flow__type--yellow {
  border-color: var(--color-accent-yellow);
}
/* ==========================================================================
   p-activity  コスモスおおさかの取り組み
========================================================================== */

/* ── 活動概要 ── */
.p-activity-summary {
  padding-top: 163px;
}

.p-activity-summary__body {
  display: flex;
  align-items: flex-start;
  gap: 55px;
  margin-top: 50px;
}

.p-activity-summary__text {
  width: 627px;
}

.p-activity-summary__lead {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-activity-summary__list {
  margin-top: 29px;
}

.p-activity-summary__list li {
  position: relative;
  padding-left: 33px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-activity-summary__list li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: var(--color-sub);
}

.p-activity-summary__list li + li {
  margin-top: 20px;
}

.p-activity-summary__img {
  flex-shrink: 0;
  width: 421px;
  height: 271px;
  border-radius: 25px;
  object-fit: cover;
}

/* ── 活動報告 ── */
.p-activity-report {
  padding: 120px 0 163px;
}

.p-activity-report__lead {
  margin-top: 50px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-activity-report__scroll {
  margin-top: 80px;
}

.p-activity-report__table {
  width: 940px;
  margin-inline: auto;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-body);
}

.p-activity-report__table thead th:nth-child(2) {
  width: 411px;
}

.p-activity-report__table thead th:nth-child(3) {
  width: 409px;
}

.p-activity-report__table th,
.p-activity-report__table td {
  border-top: .5px solid var(--color-border-gray);
  border-left: .5px solid var(--color-border-gray);
  text-align: left;
  vertical-align: top;
}

.p-activity-report__table thead th {
  padding: 18px 0 19px 16px;
  background-color: var(--color-bg-pink);
  line-height: 22px;
  letter-spacing: 0.12em;
}

.p-activity-report__th--year {
  width: 120px;
  padding-left: 15px;
}

.p-activity-report__table tbody th,
.p-activity-report__table tbody td {
  height: 212px;
  padding: 20px 32px 20px 16px;
  background-color: var(--color-bg);
}

.p-activity-report__table tr > :last-child {
  border-right: .5px solid var(--color-border-gray);
}

.p-activity-report__table tbody tr:last-child > * {
  border-bottom: .5px solid var(--color-border-gray);
}

.p-activity-report__table thead th:first-child {
  border-top-left-radius: 10px;
}

.p-activity-report__table thead th:last-child {
  border-top-right-radius: 10px;
}

.p-activity-report__table tbody tr:last-child > :first-child {
  border-bottom-left-radius: 10px;
}

.p-activity-report__table tbody tr:last-child > :last-child {
  border-bottom-right-radius: 10px;
}

.p-activity-report__year {
  width: 120px;
  padding-left: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.p-activity-report__table tbody .p-activity-report__year {
  padding-right: 16px;
}

.p-activity-report__works li {
  position: relative;
  padding-left: 1em;
}

.p-activity-report__works li::before {
  content: "・";
  position: absolute;
  left: -0.15em;
}

/* 「最近の活動」：1行＝1イベントなので、年度表（1行212px）とは行の高さと列幅だけ変える。
   枠線・角丸・見出しの色は既存の .p-activity-report__table をそのまま使う */
.p-activity-report__subtitle {
  margin-top: 64px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-sub);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-sub);
}

.p-activity-report__subtitle + .p-activity-report__scroll {
  margin-top: 32px;
}

/* 列幅は既存表と同じ nth-child で指定する（クラス単体だと詳細度が足りず 411px/409px に負ける）。
   940 = 年度120 + 日付100 + カテゴリ210 + イベント名510
   カテゴリは「無料相談会・イベント」の10文字が入る幅を確保する（Windows のメイリオは文字幅が広い） */
.p-activity-report__table--log thead th:nth-child(2) {
  width: 100px;
}

.p-activity-report__table--log thead th:nth-child(3) {
  width: 210px;
}

.p-activity-report__table--log tbody th,
.p-activity-report__table--log tbody td {
  height: auto;
  padding: 14px 16px;
  line-height: 26px;
  /* 長い固有名詞でも枠から出さない */
  overflow-wrap: anywhere;
}

.p-activity-report__table--log .p-activity-report__date {
  white-space: nowrap;
}

/* 年度は rowspan でまとめているため、最後の年度のセルが表の左下の角になる。
   「最終行の最初のセル」を前提にした既存の指定が効かないので、ここで付け替える */
.p-activity-report__table--log tbody tr:last-child > :first-child {
  border-bottom-left-radius: 0;
}

.p-activity-report__year--last {
  border-bottom: .5px solid var(--color-border-gray);
  border-bottom-left-radius: 10px;
}

/* ── 最近の活動（SP）：年度ごとのアコーディオン ──
   80件を横スクロールの表で読ませると辛いので、SPはこちらを表示する。
   開閉の作りは p-faq と同じ（grid-template-rows の 0fr → 1fr） */
.p-activity-log {
  margin-top: 28px;
}

.p-activity-log__item + .p-activity-log__item {
  margin-top: 12px;
}

.p-activity-log__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: .5px solid var(--color-border-gray);
  border-radius: 10px;
  background-color: var(--color-bg-pink);
  text-align: left;
  cursor: pointer;
}

.p-activity-log__year {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-body);
}

.p-activity-log__count {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-light);
}

.p-activity-log__icon {
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
  width: 14px;
  height: 14px;
}

.p-activity-log__icon::before,
.p-activity-log__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background-color: var(--color-sub);
  transform: translateY(-50%);
}

.p-activity-log__icon::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform .3s;
}

.p-activity-log__item.is-open .p-activity-log__icon::after {
  transform: translateY(-50%) rotate(0);
}

.p-activity-log__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s;
}

.p-activity-log__item.is-open .p-activity-log__body {
  grid-template-rows: 1fr;
}

.p-activity-log__inner {
  overflow: hidden;
}

.p-activity-log__row {
  padding: 12px 4px;
  border-bottom: .5px solid var(--color-border-gray);
}

.p-activity-log__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.p-activity-log__date {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-sub);
  white-space: nowrap;
}

.p-activity-log__cat {
  font-size: 12px;
  line-height: 22px;
  color: var(--color-text-light);
}

.p-activity-log__name {
  margin-top: 2px;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-body);
  overflow-wrap: anywhere;
}

/* 過去の活動（SP）：年度ごとに「主な取り組み」と「主な活動場所」を畳む */
.p-activity-log__block {
  padding: 12px 4px;
  border-bottom: .5px solid var(--color-border-gray);
}

.p-activity-log__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.08em;
  color: var(--color-sub);
}

.p-activity-log__works {
  margin-top: 4px;
}

.p-activity-log__works li {
  position: relative;
  padding-left: 1em;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-body);
}

.p-activity-log__works li::before {
  content: "・";
  position: absolute;
  left: -0.15em;
}

.p-activity-log__places {
  margin-top: 4px;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-body);
  overflow-wrap: anywhere;
}
/* ==========================================================================
   p-nini  任意後見制度について
========================================================================== */

/* ── 任意後見制度について ── */
.p-nini-about {
  padding-top: 164px;
}

.p-nini-about__body {
  display: flex;
  align-items: flex-start;
  margin-top: 40px;
}

.p-nini-about__text {
  flex-shrink: 0;
  width: 694px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-nini-about__img {
  flex-shrink: 0;
  width: 428px;
  height: 285px;
  /* 見出し脇まで持ち上げる */
  margin-top: -49px;
  object-fit: contain;
}

/* ── 対象の詳細 ── */
.p-nini-target {
  padding-top: 103px;
}

.p-nini-target__card {
  position: relative;
  min-height: 685px;
  margin-top: 88px;
  padding: 80px 0 78px;
  border: 2px solid var(--color-main);
  border-radius: 25px;
  background-color: var(--color-bg);
}

.p-nini-target__sapota {
  position: absolute;
  top: 446px;
  left: 970px;
  width: 189px;
  height: 227px;
}

.p-nini-target__table {
  width: 941px;
  margin-left: 60px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.12em;
  color: var(--color-body);
}

.p-nini-target__table th,
.p-nini-target__table td {
  border-top: .5px solid var(--color-border-gray);
  border-left: .5px solid var(--color-border-gray);
  text-align: left;
  vertical-align: middle;
}

.p-nini-target__table th {
  width: 344px;
  padding: 24px 20px 24px 25px;
  background-color: var(--color-bg-pink);
  font-weight: 500;
  line-height: 22px;
}

.p-nini-target__table td {
  padding: 24px 40px 24px 30px;
  border-right: .5px solid var(--color-border-gray);
  background-color: var(--color-bg);
}

/* デザインどおり2行目を高くとる */
.p-nini-target__table tr:last-child th,
.p-nini-target__table tr:last-child td {
  height: 154px;
  border-bottom: .5px solid var(--color-border-gray);
}

.p-nini-target__table tr:first-child th {
  border-top-left-radius: 15px;
}

.p-nini-target__table tr:first-child td {
  border-top-right-radius: 15px;
}

.p-nini-target__table tr:last-child th {
  border-bottom-left-radius: 15px;
}

.p-nini-target__table tr:last-child td {
  border-bottom-right-radius: 15px;
}

/* このような方が対象です */
.p-nini-target__label {
  position: relative;
  display: flex;
  align-items: center;
  width: 316px;
  height: 47px;
  margin: 64px 0 0 94px;
  padding-left: 46px;
  border-radius: 0 23.5px 23.5px 0;
  background-color: var(--color-bg-pink);
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.07em;
}

.p-nini-target__label-sapota {
  position: absolute;
  top: -9px;
  left: -34px;
  width: 66px;
  height: 56px;
  overflow: hidden;
}

.p-nini-target__label-sapota img {
  position: absolute;
  top: -12.13%;
  left: -8.98%;
  width: 121.2%;
  max-width: none;
  height: 205.64%;
}

/* ul の margin-left は common.css で !important 指定のため padding で寄せる */
.p-nini-target__list {
  margin-top: 36px;
  padding-left: 165px;
}

.p-nini-target__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.p-nini-target__list li + li {
  margin-top: 22px;
}

.p-nini-target__list img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}

.p-nini-target__list span {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

/* ── 手続きの流れ ── */
.p-nini-flow {
  padding: 165px 0 150px;
}

.p-nini-flow__list {
  width: 939px;
  margin: 88px auto 0;
}

.p-nini-flow__list > li {
  position: relative;
}

.p-nini-flow__list > li + li {
  margin-top: 50px;
}

/* ステップ間の下向き矢印 */
.p-nini-flow__list > li + li::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 13px);
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -11px;
  border-right: 11px solid transparent;
  border-bottom: 0;
  border-left: 11px solid transparent;
  border-top: 19px solid var(--color-main);
}

/* 注意帯の前だけ矢印を出さない */
.p-nini-flow__notice::before {
  display: none;
}

.p-nini-flow__step {
  padding: 21px 35px 24px 85px;
  border: 2px solid var(--color-main);
  border-radius: 10px;
  background-color: var(--color-bg);
  box-shadow: 1px 3px 6px 0 rgba(0, 0, 0, .06);
}

.p-nini-flow__step-title {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-main);
}

.p-nini-flow__step-num {
  position: absolute;
  top: 3px;
  left: -53px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: var(--color-main);
  font-size: 16px;
  color: var(--color-text-white);
}

.p-nini-flow__step-body {
  margin-top: 12px;
}

.p-nini-flow__step-body li {
  position: relative;
  padding-left: 1em;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
}

.p-nini-flow__step-body li::before {
  content: "・";
  position: absolute;
  left: -0.15em;
}

/* 判断能力に低下が見られたら */
.p-nini-flow__notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 51px;
  min-height: 131px;
  margin-top: 28px;
  border-radius: 10px;
  background-color: var(--color-bg-blue);
}

.p-nini-flow__notice img {
  width: 76px;
  height: 110px;
  object-fit: contain;
}

.p-nini-flow__notice p {
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.p-nini-flow__notice + .p-nini-flow__step {
  margin-top: 56px;
}
/* ==========================================================================
   p-houtei  法定後見制度について
========================================================================== */

/* ── 法定後見制度について ── */
.p-houtei-about {
  padding-top: 165px;
}

.p-houtei-about__body {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 41px;
}

.p-houtei-about__text {
  flex-shrink: 0;
  width: 694px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-houtei-about__img {
  flex-shrink: 0;
  width: 379px;
  height: 253px;
  margin-top: -46px;
  object-fit: contain;
}

/* ── 3つの種類（類型） ── */
.p-houtei-type {
  margin-top: 150px;
  padding: 77px 0 120px;
  background-color: var(--color-bg-pink);
}

.p-houtei-type__list {
  display: flex;
  justify-content: space-between;
  margin-top: 79px;
}

/* 本文の行数が違っても「くわしく見る」が3枚とも同じ高さになるよう、縦並びの flex にして本文を伸ばす */
.p-houtei-type__item {
  display: flex;
  flex-direction: column;
  width: 352px;
  min-height: 481px;
  padding-bottom: 41px;
  border: 2px solid;
  border-radius: 25px;
  background-color: var(--color-bg);
  text-align: center;
}

.p-houtei-type__item--main {
  border-color: var(--color-main);
}

.p-houtei-type__item--sub {
  border-color: var(--color-sub);
}

.p-houtei-type__item--yellow {
  border-color: var(--color-accent-yellow);
}

/* イラストはデザインのマスク位置に合わせて切り出す */
.p-houtei-type__img {
  margin-inline: auto;
  overflow: hidden;
}

.p-houtei-type__img img {
  display: block;
  max-width: none;
}

.p-houtei-type__item--main .p-houtei-type__img {
  width: 206px;
  height: 157px;
  margin-top: 40px;
}

.p-houtei-type__item--main .p-houtei-type__img img {
  width: 235px;
  height: 157px;
  margin-left: -21px;
}

.p-houtei-type__item--sub .p-houtei-type__img {
  width: 169px;
  height: 171px;
  margin-top: 35px;
}

.p-houtei-type__item--sub .p-houtei-type__img img {
  width: 169px;
  height: 176px;
}

.p-houtei-type__item--yellow .p-houtei-type__img {
  width: 138px;
  height: 172px;
  margin-top: 34px;
}

.p-houtei-type__item--yellow .p-houtei-type__img img {
  width: 138px;
  height: 208px;
  margin-top: -8px;
}

.p-houtei-type__name {
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.12em;
  color: var(--color-body);
}

.p-houtei-type__item--main .p-houtei-type__name {
  margin-top: 47px;
}

.p-houtei-type__item--sub .p-houtei-type__name,
.p-houtei-type__item--yellow .p-houtei-type__name {
  margin-top: 38px;
}

.p-houtei-type__text {
  width: fit-content; /* 文章の幅に合わせて中央に置き、左右の余白をそろえる */
  max-width: 280px; /* 14文字の行（約277px）に合わせる。補助カードの折り返し行も同じ幅に収まる */
  margin: 10px auto 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.1em; /* 「多くの手続きや契約について、」（14文字）を1行に収める */
  text-align: left;
  /* 文節の折り返しは HTML 側の cosmos_phrases()（.u-phrase）で行う */
  flex-grow: 1;
}

.p-houtei-type__btn {
  gap: 10px;
  width: 183px;
  height: 43px;
  margin: 30px auto 0;
  font-size: 16px;
  letter-spacing: 0.12em;
}

.p-houtei-type__item--sub .p-houtei-type__btn {
  background-color: var(--color-sub);
}

.p-houtei-type__item--yellow .p-houtei-type__btn {
  background-color: var(--color-accent-yellow);
}

/* ── 法定後見制度の詳細 ── */
.p-houtei-detail {
  padding-top: 121px;
}

.p-houtei-detail__block {
  position: relative;
  min-height: 727px;
  margin-top: 82px;
  padding: 120px 0 80px;
  border: 2px solid;
  border-radius: 25px;
  background-color: var(--color-bg);
}

.p-houtei-detail__block + .p-houtei-detail__block {
  margin-top: 80px;
}

.p-houtei-detail__block--main {
  border-color: var(--color-main);
}

.p-houtei-detail__block--sub {
  border-color: var(--color-sub);
}

.p-houtei-detail__block--yellow {
  border-color: var(--color-accent-yellow);
}

/* 左上のタブ */
.p-houtei-detail__tab {
  position: absolute;
  top: -2px;
  left: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 203px;
  height: 80px;
  border-radius: 25px 0 25px 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
  color: var(--color-text-white);
}

.p-houtei-detail__block--main .p-houtei-detail__tab {
  background-color: var(--color-main);
}

.p-houtei-detail__block--sub .p-houtei-detail__tab {
  background-color: var(--color-sub);
}

.p-houtei-detail__block--yellow .p-houtei-detail__tab {
  background-color: var(--color-accent-yellow);
}

.p-houtei-detail__table {
  width: 940px;
  margin-left: 80px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.12em;
  color: var(--color-body);
}

.p-houtei-detail__table th,
.p-houtei-detail__table td {
  border-top: .5px solid var(--color-border-gray);
  border-left: .5px solid var(--color-border-gray);
  text-align: left;
  vertical-align: middle;
}

.p-houtei-detail__table th {
  width: 344px;
  padding: 24px 20px 24px 25px;
  font-weight: 500;
  line-height: 22px;
}

.p-houtei-detail__table td {
  padding: 24px 46px 24px 30px;
  border-right: .5px solid var(--color-border-gray);
  background-color: var(--color-bg);
}

.p-houtei-detail__table tr:first-child th,
.p-houtei-detail__table tr:first-child td {
  height: 98px;
}

.p-houtei-detail__table tr:last-child th,
.p-houtei-detail__table tr:last-child td {
  height: 184px;
  border-bottom: .5px solid var(--color-border-gray);
}

.p-houtei-detail__table tr:first-child th {
  border-top-left-radius: 15px;
}

.p-houtei-detail__table tr:first-child td {
  border-top-right-radius: 15px;
}

.p-houtei-detail__table tr:last-child th {
  border-bottom-left-radius: 15px;
}

.p-houtei-detail__table tr:last-child td {
  border-bottom-right-radius: 15px;
}

.p-houtei-detail__block--main .p-houtei-detail__table th {
  background-color: var(--color-bg-pink);
}

.p-houtei-detail__block--sub .p-houtei-detail__table th {
  background-color: var(--color-bg-blue);
}

.p-houtei-detail__block--yellow .p-houtei-detail__table th {
  background-color: var(--color-bg-yellow);
}

/* 補助のみ本文が長いため、デザインどおり右余白を詰めて行数を揃える */
.p-houtei-detail__block--yellow .p-houtei-detail__table td {
  padding-right: 22px;
}

/* このような方が対象です */
.p-houtei-detail__label {
  position: relative;
  display: flex;
  align-items: center;
  width: 316px;
  height: 47px;
  margin: 34px 0 0 116px;
  padding-left: 44px;
  border-radius: 0 23.5px 23.5px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.07em;
}

.p-houtei-detail__block--main .p-houtei-detail__label {
  background-color: var(--color-bg-pink);
}

.p-houtei-detail__block--sub .p-houtei-detail__label {
  background-color: var(--color-bg-blue);
}

.p-houtei-detail__block--yellow .p-houtei-detail__label {
  background-color: var(--color-bg-yellow);
}

.p-houtei-detail__label-sapota {
  position: absolute;
  top: -9px;
  left: -36px;
  width: 66px;
  height: 56px;
  overflow: hidden;
}

.p-houtei-detail__label-sapota img {
  position: absolute;
  top: -12.13%;
  left: -8.98%;
  width: 121.2%;
  max-width: none;
  height: 205.64%;
}

/* ul の margin-left は common.css で !important 指定のため padding で寄せる */
.p-houtei-detail__list {
  margin-top: 36px;
  padding-left: 185px;
}

.p-houtei-detail__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.p-houtei-detail__list li + li {
  margin-top: 22px;
}

.p-houtei-detail__list img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}

.p-houtei-detail__list span {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

/* ── 手続きの流れ ── */
.p-houtei-flow {
  padding: 161px 0 160px;
}

.p-houtei-flow__list {
  width: 940px;
  margin: 88px auto 0;
}

.p-houtei-flow__list > li {
  position: relative;
}

.p-houtei-flow__list > li + li {
  margin-top: 45px;
}

/* ステップ間の下向き矢印 */
.p-houtei-flow__list > li + li::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 13px);
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -11px;
  border-right: 11px solid transparent;
  border-left: 11px solid transparent;
  border-top: 19px solid var(--color-sub);
}

/* 注意事項の前だけ矢印を出さない */
.p-houtei-flow__step--notice::before {
  display: none;
}

.p-houtei-flow__step {
  padding: 21px 35px 24px 86px;
  border: 2px solid var(--color-sub);
  border-radius: 10px;
  background-color: var(--color-bg);
  box-shadow: 1px 3px 6px 0 rgba(0, 0, 0, .06);
}

.p-houtei-flow__step--notice {
  margin-top: 29px;
  border-color: var(--color-main);
}

.p-houtei-flow__step-title {
  position: relative;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: var(--color-sub);
}

.p-houtei-flow__step--notice .p-houtei-flow__step-title {
  color: var(--color-main);
}

.p-houtei-flow__step-num {
  position: absolute;
  top: 3px;
  left: -53px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: var(--color-sub);
  font-size: 16px;
  color: var(--color-text-white);
}

/* 注意事項は画像アイコンをそのまま置く */
.p-houtei-flow__step--notice .p-houtei-flow__step-num {
  background-color: transparent;
}

.p-houtei-flow__step-body {
  margin-top: 13px;
}

.p-houtei-flow__step-body li {
  position: relative;
  padding-left: 1em;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
}

.p-houtei-flow__step-body li::before {
  content: "・";
  position: absolute;
  left: -0.15em;
}

/* 項目が複数行になっても区切りが分かるよう、項目の間をあける */
.p-houtei-flow__step-body li + li {
  margin-top: 8px;
}
/* ==========================================================================
   p-muryousoudan  無料相談会
========================================================================== */

/* ── 開催のご案内 ── */
.p-muryousoudan-intro {
  padding-top: 166px;
}

.p-muryousoudan-intro__body {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  margin-top: 42px;
}

.p-muryousoudan-intro__text {
  flex-shrink: 0;
  width: 694px;
}

.p-muryousoudan-intro__text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-muryousoudan-intro__img {
  flex-shrink: 0;
  width: 352px;
  height: 234px;
  /* 見出し脇まで持ち上げる */
  margin-top: -49px;
  object-fit: contain;
}

/* ── 相談会の様子（マーキー） ── */
.p-muryousoudan-gallery {
  margin-top: 129px;
  overflow: hidden;
}

.p-muryousoudan-gallery__track {
  display: flex;
  width: max-content;
  animation: p-muryousoudan-marquee 64s linear infinite;
}

/* 写真ごとに元の縦横比のまま並べる（細長の写真もそのまま） */
.p-muryousoudan-gallery__track img {
  flex-shrink: 0;
  width: auto;
  height: 208px;
}

/* 同じ写真を2周分並べているので、半分（1周分）動かすと継ぎ目なくつながる */
@keyframes p-muryousoudan-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .p-muryousoudan-gallery__track {
    animation: none;
  }
}

/* ── 予約フォーム ── */
.p-muryousoudan-reserve {
  padding: 127px 0 150px;
}

.p-muryousoudan-reserve__lead {
  position: relative;
  margin-top: 106px;
}

.p-muryousoudan-reserve__lead p {
  font-size: 24px;
  font-weight: 700;
  line-height: 37px;
  text-align: center;
  color: var(--color-body);
}

.p-muryousoudan-reserve__sapota {
  position: absolute;
  top: -64px;
  right: 54px;
  width: 144px;
  height: 207px;
}

.p-muryousoudan-reserve__cards {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 106px;
}

.p-muryousoudan-reserve__card {
  width: 446px;
  min-height: 324px;
  padding: 34px 0 0;
  border: 2px solid var(--color-main);
  border-radius: 10px;
  background-color: var(--color-bg);
  text-align: center;
}

.p-muryousoudan-reserve__card--sub {
  border-color: var(--color-sub);
}

.p-muryousoudan-reserve__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 308px;
  height: 53px;
  margin-inline: auto;
  border-radius: 30px;
  background-color: var(--color-main);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text-white);
}

.p-muryousoudan-reserve__label--sub {
  background-color: var(--color-sub);
}

/* アイコンは白い丸に載せる（画像を丸く切り抜かないよう、丸は span 側で作る） */
.p-muryousoudan-reserve__label-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: var(--color-bg);
}

.p-muryousoudan-reserve__label-icon img {
  display: block;
  width: 21.36px;
  height: 21.36px;
}

.p-muryousoudan-reserve__tel {
  display: block;
  margin-top: 31px;
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-body);
}

.p-muryousoudan-reserve__hours {
  margin-top: 27px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-body);
}

.p-muryousoudan-reserve__note {
  margin-top: 48px;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: var(--color-body);
}

.p-muryousoudan-reserve__btn {
  gap: 10px;
  width: 206px;
  height: 43px;
  margin: 45px auto 0;
  background-color: var(--color-sub);
  font-size: 16px;
  letter-spacing: 0.12em;
}
/* ==========================================================================
   p-gohonnin  ご本人・ご家族のみなさまへ
========================================================================== */

/* ── お困りごと ── */
.p-gohonnin-worry {
  padding: 166px 0 120px;
}

.p-gohonnin-worry__card {
  position: relative;
  min-height: 359px;
  margin-top: 88px;
  padding: 48px 0 44px;
  border: 2px solid var(--color-main);
  border-radius: 25px;
  background-color: var(--color-bg);
}

.p-gohonnin-worry__sapota {
  position: absolute;
  top: 139px;
  left: 943px;
  width: 141px;
  height: 190px;
}

/* ul の margin-left は common.css で !important 指定のため padding で寄せる */
.p-gohonnin-worry__list {
  padding-left: 99px;
}

.p-gohonnin-worry__list li {
  display: flex;
  align-items: flex-start;
  gap: 17px;
}

.p-gohonnin-worry__list li + li {
  margin-top: 33px;
}

.p-gohonnin-worry__list img {
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  margin-top: 6px;
}

.p-gohonnin-worry__list span {
  font-size: 24px;
  font-weight: 500;
  line-height: 40px;
}

/* 項目の補足（※〜） */
.p-gohonnin-worry__note {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 28px;
}

.p-gohonnin-worry__text {
  margin-top: 80px;
}

.p-gohonnin-worry__text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 37px;
}

.p-gohonnin-worry__text p + p {
  margin-top: 37px;
}

/* ── 制度について知りたい方へ ── */
.p-gohonnin-cta {
  padding-bottom: 148px;
}

.p-gohonnin-cta__inner {
  display: flex;
  align-items: center;
  gap: 23px;
  width: 940px;
  height: 129px;
  margin-inline: auto;
  padding: 0 91px 0 103px;
  border-radius: 96px;
  background-color: var(--color-sub);
}

.p-gohonnin-cta__sapota {
  flex-shrink: 0;
  width: 90px;
  height: 93px;
  object-fit: contain;
}

.p-gohonnin-cta__body {
  margin-right: auto;
  color: var(--color-base);
}

.p-gohonnin-cta__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.p-gohonnin-cta__title {
  margin-top: 4px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.p-gohonnin-cta__btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 221px;
  height: 59px;
  border-radius: 999px;
  background-color: var(--color-bg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-sub);
  transition: opacity .3s;
}

.p-gohonnin-cta__btn:hover {
  opacity: .8;
}

/* ==========================================================================
   p-hukushi  福祉関係者のみなさまへ
========================================================================== */

/* 実例コラムへの誘導（お悩みカードの下：区切り線の下に、左に見出し＋補足・右にボタン。チェックリストと左端をそろえ、さぽ太の手前まで） */
.p-gohonnin-worry__example,
.p-hukushi-worry__example {
  display: flex;
  align-items: flex-end; /* ボタンは補足文の行に高さを合わせる */
  justify-content: space-between;
  gap: 32px;
  width: 820px; /* さぽ太（left: 943px）の 24px 手前まで */
  max-width: calc(100% - 99px); /* 画面が狭いときはカードの右端で止める */
  margin: 36px 0 0 99px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.p-hukushi-worry__example {
  width: 880px; /* さぽ太（left: 1004px）の 24px 手前まで */
  max-width: calc(100% - 97px);
  margin-left: 97px; /* 福祉関係者ページのチェックリストの左端に合わせる */
}

.p-gohonnin-worry__example-body,
.p-hukushi-worry__example-body {
  flex: 1;
  min-width: 0;
}

.p-gohonnin-worry__example-title,
.p-hukushi-worry__example-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-main);
}

.p-gohonnin-worry__example-text,
.p-hukushi-worry__example-text {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  /* SPで「ご相／談」と語の途中で折れないよう、HTML 側の cosmos_phrases()（.u-phrase）で文節ごとに区切っている */
}

.p-gohonnin-worry__btn,
.p-hukushi-worry__btn {
  flex-shrink: 0;
  gap: 10px;
  width: 206px;
  height: 43px;
  margin-bottom: calc((26px - 16px) / 2); /* ボタンの下端を補足文の文字の下端に合わせる（行高26px と文字16px の差の半分だけ上げる） */
  font-size: 16px;
  letter-spacing: 0.12em;
}

/* ── 福祉の現場でのお悩み ── */
.p-hukushi-worry {
  padding: 166px 0 120px;
}

.p-hukushi-worry__card {
  position: relative;
  margin-top: 80px;
  padding: 48px 0 44px; /* 高さは固定せず中身に合わせる（ご本人・ご家族ページのカードと同じ余白） */
  border: 2px solid var(--color-main);
  border-radius: 25px;
  background-color: var(--color-bg);
}

.p-hukushi-worry__sapota {
  position: absolute;
  bottom: 15px; /* カードの高さが変わっても下端からの位置を保つ（旧 top: 248px と同じ位置） */
  left: 1004px;
  width: 138px;
  height: 167px;
}

/* ul の margin-left は common.css で !important 指定のため padding で寄せる */
.p-hukushi-worry__list {
  padding-left: 97px;
}

.p-hukushi-worry__list li {
  display: flex;
  align-items: flex-start;
  gap: 17px;
}

.p-hukushi-worry__list li + li {
  margin-top: 36px;
}

.p-hukushi-worry__list img {
  flex-shrink: 0;
  width: 29px;
  height: 29px;
  margin-top: 6px;
}

.p-hukushi-worry__list span {
  font-size: 24px;
  font-weight: 500;
  line-height: 37px;
}

.p-hukushi-worry__text {
  margin-top: 82px;
}

.p-hukushi-worry__text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 37px;
}

.p-hukushi-worry__text p + p {
  margin-top: 37px;
}

/* ── 制度について知りたい方へ ── */
.p-hukushi-cta {
  padding-bottom: 161px;
}

.p-hukushi-cta__inner {
  display: flex;
  align-items: center;
  gap: 23px;
  width: 940px;
  height: 129px;
  margin-inline: auto;
  padding: 0 91px 0 103px;
  border-radius: 96px;
  background-color: var(--color-sub);
}

.p-hukushi-cta__sapota {
  flex-shrink: 0;
  width: 90px;
  height: 93px;
  object-fit: contain;
}

.p-hukushi-cta__body {
  margin-right: auto;
  color: var(--color-base);
}

.p-hukushi-cta__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.p-hukushi-cta__title {
  margin-top: 4px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.p-hukushi-cta__btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 221px;
  height: 59px;
  border-radius: 999px;
  background-color: var(--color-bg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-sub);
  transition: opacity .3s;
}

.p-hukushi-cta__btn:hover {
  opacity: .8;
}

/* ==========================================================================
   p-shigyou  士業のみなさまへ
========================================================================== */

/* ── 専門職との連携 ── */
.p-shigyou-lead {
  padding: 168px 0 120px;
}

.p-shigyou-lead__body {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 39px;
}

.p-shigyou-lead__text {
  flex-shrink: 0;
  width: 694px;
  max-width: 100%;
}

/* 画像は法定後見ページと同じく、見出しの高さから本文の右に置く */
.p-shigyou-lead__img {
  flex-shrink: 0;
  width: 377px;
  height: 251px;
  margin-top: -46px;
  object-fit: contain;
}

.p-shigyou-lead__text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

/* ── 制度について知りたい方へ ── */
.p-shigyou-cta {
  padding-bottom: 158px;
}

.p-shigyou-cta__inner {
  display: flex;
  align-items: center;
  gap: 23px;
  width: 940px;
  height: 129px;
  margin-inline: auto;
  padding: 0 91px 0 103px;
  border-radius: 96px;
  background-color: var(--color-sub);
}

.p-shigyou-cta__sapota {
  flex-shrink: 0;
  width: 90px;
  height: 93px;
  object-fit: contain;
}

.p-shigyou-cta__body {
  margin-right: auto;
  color: var(--color-base);
}

.p-shigyou-cta__lead {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.p-shigyou-cta__title {
  margin-top: 4px;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.p-shigyou-cta__btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 221px;
  height: 59px;
  border-radius: 999px;
  background-color: var(--color-bg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-sub);
  transition: opacity .3s;
}

.p-shigyou-cta__btn:hover {
  opacity: .8;
}

/* ==========================================================================
   p-sanjokaiin  賛助会員募集
========================================================================== */

.p-sanjokaiin {
  padding: 167px 0 159px;
}

/* ── リード文＋イラスト ── */
.p-sanjokaiin-intro {
  position: relative;
  margin-top: 39px;
}

.p-sanjokaiin-intro__text {
  width: 694px;
  max-width: 100%;
}

.p-sanjokaiin-intro__text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
}

.p-sanjokaiin-intro__img {
  position: absolute;
  top: -22px;
  right: -40px;
  width: 428px;
  height: 285px;
  object-fit: contain;
}

/* ── 募集要項テーブル ── */
.p-sanjokaiin-table {
  position: relative;
  width: 940px;
  max-width: 100%;
  margin: 160px auto 0;
}

.p-sanjokaiin-table__body {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0.12em;
  color: var(--color-body);
}

.p-sanjokaiin-table__body th,
.p-sanjokaiin-table__body td {
  border-top: .5px solid var(--color-border-gray);
  border-left: .5px solid var(--color-border-gray);
  text-align: left;
  vertical-align: top;
}

.p-sanjokaiin-table__body th {
  width: 169px;
  padding: 37px 0 30px 25px;
  background-color: var(--color-bg-pink);
  font-weight: 500;
}

.p-sanjokaiin-table__body td {
  padding: 37px 40px 30px 40px;
  border-right: .5px solid var(--color-border-gray);
  background-color: var(--color-bg);
}

.p-sanjokaiin-table__body tr:nth-child(1) th,
.p-sanjokaiin-table__body tr:nth-child(1) td {
  height: 537px;
}

.p-sanjokaiin-table__body tr:nth-child(2) th,
.p-sanjokaiin-table__body tr:nth-child(2) td {
  height: 121px;
}

.p-sanjokaiin-table__body tr:nth-child(3) th,
.p-sanjokaiin-table__body tr:nth-child(3) td {
  height: 327px;
}

.p-sanjokaiin-table__body tr:last-child th,
.p-sanjokaiin-table__body tr:last-child td {
  border-bottom: .5px solid var(--color-border-gray);
}

.p-sanjokaiin-table__body tr:first-child th {
  border-top-left-radius: 15px;
}

.p-sanjokaiin-table__body tr:first-child td {
  border-top-right-radius: 15px;
}

.p-sanjokaiin-table__body tr:last-child th {
  border-bottom-left-radius: 15px;
}

.p-sanjokaiin-table__body tr:last-child td {
  border-bottom-right-radius: 15px;
}

.p-sanjokaiin-table__lead {
  margin-bottom: 14px;
}

/* common.css の ul, li { list-style: none !important } を避けるため counter で採番 */
/* 数字の左に10pxの余白をつくり、数字と本文の間は詰める（10 + 15 = 25px） */
.p-sanjokaiin-table__ol {
  counter-reset: sanjo;
  padding-left: 25px;
}

.p-sanjokaiin-table__ol > li {
  counter-increment: sanjo;
  text-indent: -15px;
}

.p-sanjokaiin-table__ol > li::before {
  display: inline-block;
  width: 15px;
  content: counter(sanjo) ".";
}

.p-sanjokaiin-table__note {
  display: block;
  text-indent: 0;
}

/* 「・」の位置と本文の左端を上の番号リストに揃える */
.p-sanjokaiin-table__ul {
  padding-left: 10px;
}

.p-sanjokaiin-table__ul > li {
  padding-left: 15px;
  text-indent: -15px;
}

.p-sanjokaiin-table__ul > li::before {
  content: "・";
}

.p-sanjokaiin-table__address {
  margin-top: 11px;
}

.p-sanjokaiin-table__caution {
  margin-top: 15px;
}

.p-sanjokaiin-table__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 255px;
  height: 43px;
  margin-top: 29px;
  border-radius: 999px;
  background-color: var(--color-main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-body-white);
  transition: opacity .3s;
}

.p-sanjokaiin-table__btn:hover {
  opacity: .8;
}

.p-sanjokaiin-table__sapota {
  position: absolute;
  top: 822px;
  left: 845px;
  width: 138px;
  height: 167px;
}

/* ==========================================================================
   p-privacy  プライバシーポリシー
========================================================================== */

.p-privacy {
  padding: 163px 0 160px;
}

.p-privacy__lead {
  width: 940px;
  max-width: 100%;
  margin: 0 auto 69px;
  font-size: 20px;
  line-height: 29px;
  color: var(--color-body);
}

.p-privacy__block {
  width: 940px;
  max-width: 100%;
  margin-inline: auto;
}

.p-privacy__block + .p-privacy__block {
  margin-top: 40px;
}

.p-privacy__heading {
  position: relative;
  padding-left: 7px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 22px;
  font-weight: 500;
  line-height: 31px;
  color: var(--color-body);
}

.p-privacy__heading::before {
  position: absolute;
  top: 10px;
  left: 0;
  width: 2px;
  height: 17px;
  background-color: var(--color-main);
  content: "";
}

.p-privacy__text {
  width: 928px;
  max-width: 100%;
  margin-top: 13px;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-body);
}

.p-privacy__item {
  padding-left: 20px;
}

.p-privacy__text a {
  /* common.css の a { display: block } を打ち消す */
  display: inline;
  color: var(--color-body);
  text-decoration: none;
}

.p-privacy__text a:hover {
  opacity: .7;
}

/* ==========================================================================
   p-faq  よくあるご質問
========================================================================== */

.p-faq {
  padding: 168px 0 170px;
}

.p-faq__list {
  width: 940px;
  max-width: 100%;
  margin-inline: auto;
}

.p-faq__item {
  border-radius: 10px;
  background-color: var(--color-bg);
}

.p-faq__item + .p-faq__item {
  margin-top: 40px;
}

/* ── 質問（開閉ボタン） ── */
.p-faq__q {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 84px;
  padding: 20px 24px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.p-faq__mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-main);
  border-radius: 5px;
  font-family: var(--font-mincho);
  font-size: 24px;
  line-height: 1;
  color: var(--color-main);
}

.p-faq__q-text {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-body);
}

.p-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-left: auto;
}

.p-faq__icon::before,
.p-faq__icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 1px;
  background-color: var(--color-main);
  transition: transform .3s;
  content: "";
}

.p-faq__icon::after {
  transform: rotate(90deg);
}

.p-faq__item.is-open .p-faq__icon::after {
  transform: rotate(0);
}

/* ── 回答 ── */
.p-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s;
}

.p-faq__item.is-open .p-faq__a {
  grid-template-rows: 1fr;
}

.p-faq__a-body {
  overflow: hidden;
}

.p-faq__a-inner {
  margin: 0 25px 0 26px;
  padding: 25px 50px 25px 54px;
  border-top: 1px solid var(--color-border-light);
  font-size: 16px;
  line-height: 28px;
  color: var(--color-body);
}

/* 回答が複数段落のときの段落間 */
.p-faq__a-inner p + p {
  margin-top: 14px;
}

/* ==========================================================================
   p-contact  お問い合わせ
========================================================================== */

.p-contact {
  padding: 163px 0 0;
}

/* ── リード文＋さぽ太 ── */
.p-contact-lead {
  position: relative;
}

.p-contact-lead__text {
  font-size: 24px;
  font-weight: 700;
  line-height: 37px;
  color: var(--color-body);
  text-align: center;
}

.p-contact-lead__sapota {
  position: absolute;
  top: -67px;
  right: 55px;
  width: 144px;
  height: 207px;
}

/* ── 電話カード ── */
.p-contact-cards {
  display: flex;
  justify-content: center;
  width: 600px;
  max-width: 100%;
  margin: 106px auto 0;
}

.p-contact-card {
  flex: 1;
  padding: 40px 0 44px;
  border: 2px solid var(--color-main);
  border-radius: 10px;
  background-color: var(--color-bg);
  text-align: center;
}

.p-contact-card__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 374px;
  max-width: calc(100% - 40px);
  height: 53px;
  margin-inline: auto;
  border-radius: 30px;
  background-color: var(--color-main);
  font-size: 24px;
  font-weight: 500;
  color: var(--color-base);
}

.p-contact-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 35px;
  border-radius: 50%;
  background-color: var(--color-bg);
}

.p-contact-card__icon img {
  width: 21px;
  height: 21px;
}

.p-contact-card__tel {
  margin-top: 31px;
  font-size: 52px;
  font-weight: 700;
  color: var(--color-body);
}

.p-contact-card__tel a {
  display: inline;
  color: inherit;
}

.p-contact-card__hours {
  margin-top: 13px;
  font-size: 20px;
  font-weight: 500;
  color: var(--color-body);
}

/* ── フォームセクション ── */
.p-contact-form-sec {
  padding: 163px 0 160px;
}

/* 見出しとの余白は活動報告ページ（見出し→説明文 50px）に合わせる */
.p-contact-form-sec__note {
  margin-top: 50px;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
  text-align: center;
  color: var(--color-body);
}

.p-contact-form {
  margin-top: 80px;
}

.p-contact-form__card {
  padding: 100px 80px 101px 116px;
  border-radius: 10px;
  background-color: var(--color-bg);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.p-contact-form__row {
  display: flex;
  align-items: flex-start;
}

.p-contact-form__row + .p-contact-form__row {
  margin-top: 36px;
}

.p-contact-form__label {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 34px;
  width: 361px;
  min-height: 60px;
  font-size: 20px;
  color: var(--color-body);
}

.p-contact-form__badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 31px;
  border-radius: 5px;
  background-color: var(--color-main);
  font-size: 16px;
  color: var(--color-base);
}

.p-contact-form__field {
  flex: 1;
}

.p-contact-form__field input,
.p-contact-form__field textarea {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 23px;
  border: 1px solid var(--color-border-input);
  border-radius: 5px;
  background-color: var(--color-bg);
  font-family: inherit;
  font-size: 20px;
  color: var(--color-body);
}

.p-contact-form__field textarea {
  height: 363px;
  padding: 15px 23px;
  line-height: 32px;
  resize: vertical;
}

.p-contact-form__field ::placeholder {
  color: var(--color-placeholder);
}

/* ── 同意・送信 ── */
.p-contact-form__foot {
  margin-top: 138px;
  text-align: center;
}

.p-contact-form__agree-lead {
  font-size: 15px;
  line-height: 22px;
  color: var(--color-body);
}

.p-contact-form__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin-top: 22px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-body);
  cursor: pointer;
}

/* チェックボックスはブラウザ標準の見た目を使う */
.p-contact-form__agree input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.p-contact-form__recaptcha {
  margin-top: 22px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-body);
}

/* 文中のリンク（個人情報保護方針・Googleのプライバシーポリシー／利用規約） */
.p-contact-form__agree-lead a,
.p-contact-form__recaptcha a {
  display: inline;
  color: var(--color-main);
}

.p-contact-form__agree-lead a:hover,
.p-contact-form__recaptcha a:hover {
  text-decoration: underline;
}

.p-contact-form__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 221px;
  height: 59px;
  margin: 80px auto 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--color-main);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-base);
  cursor: pointer;
  transition: opacity .3s;
}

.p-contact-form__submit span {
  position: absolute;
  right: 25px;
}

.p-contact-form__submit:hover {
  opacity: .8;
}

.p-contact-form__submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Contact Form 7 の出力に合わせる ── */
.p-contact-form .wpcf7-form-control-wrap {
  display: block;
}

/* 同意チェック：[acceptance] は label が span の中に入る */
.p-contact-form__agree label {
  display: flex;
  align-items: center;
  gap: 17px;
  cursor: pointer;
}

.p-contact-form__agree .wpcf7-list-item {
  display: block;
  margin: 0;
}

/* 送信ボタン：[submit] は input になるため矢印は外側で描く */
.p-contact-form__submit-wrap {
  position: relative;
  width: 221px;
  margin: 80px auto 0;
}

.p-contact-form__submit-wrap .p-contact-form__submit {
  width: 100%;
  margin: 0;
}

.p-contact-form__submit-wrap::after {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-base);
  pointer-events: none;
  content: "→";
}

.p-contact-form__submit-wrap .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 100%;
  margin: 0 0 0 12px;
  transform: translateY(-50%);
}

/* 入力エラー */
.p-contact-form .wpcf7-not-valid {
  border-color: var(--color-main);
}

.p-contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--color-main);
}

/* 送信結果メッセージ（CF7 標準の枠色をサイトの色に統一） */
.p-contact-form-sec .p-contact-form .wpcf7 form .wpcf7-response-output {
  margin: 32px 0 0;
  padding: 14px 20px;
  border: 1px solid var(--color-main);
  border-radius: 5px;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  color: var(--color-body);
}

/* ==========================================================================
   p-column  コラム一覧
========================================================================== */

.p-column {
  padding: 163px 0 147px;
}

.p-column__inner {
  display: flex;
  align-items: flex-start;
  gap: 90px;
}

.p-column__main {
  flex: 1;
  min-width: 0;
}

.p-column__side {
  flex-shrink: 0;
  width: 287px;
  padding-top: 6px;
}

/* ── 記事カード ── */
.p-column-card {
  min-height: 100px;
  border-radius: 10px;
  background-color: var(--color-bg);
}

.p-column-card + .p-column-card {
  margin-top: 40px;
}

.p-column-card__link {
  display: block;
  padding: 6px 26px 18px;
  transition: opacity .3s;
}

a.p-column-card__link:hover {
  opacity: .7;
}

.p-column-card__meta {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 40px;
}

.p-column-card__date {
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--color-main);
}

.p-column-card__title {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-body);
}

/* ── サムネイル付きカード（コラム一覧） ── */
.p-column-card--thumb .p-column-card__link {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
}

.p-column-card__thumb {
  display: block;
  flex-shrink: 0;
  width: 220px;
  height: auto;
  aspect-ratio: 220 / 140; /* 参考サイトと同じ 220×140 */
  border-radius: 6px;
  object-fit: cover;
}

.p-column-card__thumb--none {
  background-color: var(--color-bg-dummy);
}

.p-column-card__body {
  flex: 1;
  min-width: 0;
}

.p-column-card--thumb .p-column-card__meta {
  height: auto;
}

.p-column-card--thumb .p-column-card__title {
  margin-top: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-gray);
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
}

.p-column-card__excerpt {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-body);
}

/* ── 記事が無いとき ── */
.p-column__empty {
  font-size: 16px;
  line-height: 28px;
  color: var(--color-body);
}

/* ── サイドバー ── */
.p-column-side {
  padding: 35px 31px 36px;
  border-radius: 10px;
  background-color: var(--color-bg);
}

.p-column-side--archive {
  margin-top: 29px;
  padding: 35px 31px 36px;
}

.p-column-side__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 29px;
  color: var(--color-body);
}

.p-column-side__cats {
  margin-top: 21px;
}

.p-column-side__cats li + li {
  margin-top: 14px;
}

.p-column-side__cat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-body);
  transition: opacity .3s;
}

.p-column-side__cat:hover {
  opacity: .7;
}

.p-column-side__cat.is-current {
  font-weight: 700;
}

.p-column-side__archive {
  margin-top: 21px;
}

.p-column-side__archive li + li {
  margin-top: 8px;
}

.p-column-side__archive a,
.p-column-side__archive span {
  display: block;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-body);
  transition: opacity .3s;
}

.p-column-side__archive a:hover {
  opacity: .7;
}

/* ==========================================================================
   p-single-column  コラム詳細
========================================================================== */

.p-column--single {
  padding: 163px 0 154px;
}

.p-column--single .p-column__side {
  padding-top: 0;
}

.p-single-column {
  padding: 34px 36px 29px;
  border-radius: 10px;
  background-color: var(--color-bg);
}

.p-single-column__meta {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 27px;
}

.p-single-column__date {
  font-size: 16px;
  color: var(--color-main);
}

.p-single-column__title {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-body);
}

.p-single-column__body {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--color-border-light);
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-body);
}

.p-single-column__body p + p {
  margin-top: 26px;
}

/* 記事のアイキャッチ（本文の上） */
.p-single-column__body .p-single-column__thumb {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 26px;
  border-radius: 10px;
}

.p-single-column__body a {
  display: inline;
  color: var(--color-main);
  text-decoration: underline;
}

.p-single-column__body img {
  height: auto;
  margin-top: 26px;
}

/* ══════════════════════════════════════════
   記事本文のスタイル（お知らせ・コラム共通）
   投稿側では「見出し2」「リスト」「表」を選ぶだけでここが効く。
   タグだけでは表せないもの（囲み・チェックリスト・ポイント）は
   ブロックの「高度な設定 → 追加CSSクラス」に c-post-* を入れて使う。
   ══════════════════════════════════════════ */

/* ── 見出し ── */
.p-single-column__body h2 {
  margin-top: 56px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-sub);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-sub);
}

.p-single-column__body h3 {
  position: relative;
  margin-top: 36px;
  padding-left: 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-body);
}

.p-single-column__body h3::before {
  content: "";
  position: absolute;
  top: .3em;
  left: 0;
  width: 4px;
  height: 1.1em;
  border-radius: 2px;
  background-color: var(--color-main);
}

.p-single-column__body h4 {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-sub);
}

.p-single-column__body h2 + *,
.p-single-column__body h3 + *,
.p-single-column__body h4 + * {
  margin-top: 14px;
}

/* ── 箇条書き ── */
.p-single-column__body ul,
.p-single-column__body ol {
  margin-top: 20px;
  padding-left: 1.3em;
}

.p-single-column__body ul > li {
  position: relative;
  list-style: none;
  padding-left: .2em;
}

.p-single-column__body ul > li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: -.9em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-main);
}

.p-single-column__body ol > li {
  list-style: decimal;
}

.p-single-column__body li + li {
  margin-top: 8px;
}

/* ── 表（対象者／家族背景、担当／対応内容 など） ── */
.p-single-column__body table {
  width: 100%;
  margin-top: 24px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 17px;
  line-height: 1.7;
}

.p-single-column__body th,
.p-single-column__body td {
  padding: 14px 16px;
  border-top: .5px solid var(--color-border-gray);
  border-left: .5px solid var(--color-border-gray);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.p-single-column__body tr > :last-child {
  border-right: .5px solid var(--color-border-gray);
}

/* 角丸と下線は「表全体の最初の行・最後の行」だけに付ける。
   ブロックエディタの表は <table><thead>…</thead><tbody>…</tbody></table> の形 */
.p-single-column__body table > tr:last-child > *,
.p-single-column__body tbody:last-child > tr:last-child > *,
.p-single-column__body thead:last-child > tr:last-child > * {
  border-bottom: .5px solid var(--color-border-gray);
}

/* 1列目が項目名の表（1列目を見出し扱いにする） */
.p-single-column__body th {
  width: 30%;
  background-color: var(--color-bg-pink);
  font-weight: 700;
}

.p-single-column__body thead th {
  width: auto;
  letter-spacing: 0.06em;
}

/* 見出し行のある表は全列が均等割りになり、項目名の列（「定期訪問」など）が
   間延びするため、1列目だけ狭くする。
   table-layout:fixed では1行目のセル幅がそのまま列幅になるので thead を指定する。 */
.p-single-column__body thead th:first-child {
  width: 24%;
}

.p-single-column__body table > tr:first-child > :first-child,
.p-single-column__body table > :first-child > tr:first-child > :first-child {
  border-top-left-radius: 10px;
}

.p-single-column__body table > tr:first-child > :last-child,
.p-single-column__body table > :first-child > tr:first-child > :last-child {
  border-top-right-radius: 10px;
}

.p-single-column__body table > tr:last-child > :first-child,
.p-single-column__body table > :last-child > tr:last-child > :first-child {
  border-bottom-left-radius: 10px;
}

.p-single-column__body table > tr:last-child > :last-child,
.p-single-column__body table > :last-child > tr:last-child > :last-child {
  border-bottom-right-radius: 10px;
}

/* 表の下の余白。
   段落には margin-top が無いため（p + p のときしか付かない）、表のすぐ下に
   本文が来ると隙間が0になる。表の側に下余白を持たせて補う。
   見出しが続くときは見出しの margin-top（h2:56px / h3:36px）と相殺されるので、
   見出しまわりの間隔はこれまでどおり変わらない。 */
.p-single-column__body .wp-block-table {
  margin-bottom: 26px;
}

/* 実例の表だけ項目名の地色を薄い青にする（制度改正のお知らせと同じ色）
   お知らせ・コラムの表はピンクのままにするため --example で絞っている */
.p-single-column--example .p-single-column__body th {
  background-color: var(--color-bg-blue);
}

/* ── c-post-subtitle：記事タイトルの下のサブタイトル ── */
.p-single-column__body .c-post-subtitle {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-sub);
}

/* ── c-post-lead：タイトル下のリード（〜…〜） ── */
.p-single-column__body .c-post-lead {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text-light);
}

/* サブタイトルのすぐ下に来るリードは間を詰める */
.p-single-column__body .c-post-subtitle + .c-post-lead {
  margin-top: 6px;
}

/* ── c-post-label：事例1 のような通し番号ラベル ── */
.p-single-column__body .c-post-label {
  display: inline-block;
  margin-top: 48px;
  padding: 4px 18px;
  border-radius: 999px;
  background-color: var(--color-sub);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-white);
}

/* ── c-post-note：囲み（成果のまとめ、考えてみましょう） ── */
.p-single-column__body .c-post-note {
  margin-top: 28px;
  padding: 24px 28px;
  border: 1px solid var(--color-bg-cream);
  border-radius: 12px;
  background-color: var(--color-base);
  font-size: 17px;
  line-height: 1.9;
}

.p-single-column__body .c-post-note > :first-child {
  margin-top: 0;
}

.p-single-column__body .c-post-note strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  color: var(--color-sub);
}

/* ── c-post-check：☐ のチェックリスト ── */
.p-single-column__body .c-post-check {
  margin-top: 20px;
  padding-left: 0;
}

.p-single-column__body .c-post-check > li {
  position: relative;
  list-style: none;
  padding: 12px 16px 12px 46px;
  border: 1px solid var(--color-border-gray);
  border-radius: 8px;
  font-size: 17px;
  line-height: 1.8;
}

.p-single-column__body .c-post-check > li::before {
  content: "";
  position: absolute;
  top: 1.05em;
  left: 16px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-sub);
  border-radius: 3px;
  background: none;
}

.p-single-column__body .c-post-check > li + li {
  margin-top: 10px;
}

/* ── c-post-point：ポイント1〜4 の見出し ── */
.p-single-column__body .c-post-point {
  margin-top: 32px;
  padding: 10px 18px;
  border-left: 5px solid var(--color-main);
  border-radius: 0 8px 8px 0;
  background-color: var(--color-bg-pink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-body);
}

.p-single-column__body .c-post-point::before {
  display: none;
}

/* ══════════════════════════════════════════
   実例の記事パーツ
   c-post-box     : 段落をまとめる囲み（薄い青）
   c-post-point--num : 番号付きのポイント見出し
   c-post-message : 締めくくり（さぽ太くん入り）
   ══════════════════════════════════════════ */

/* ── c-post-box：段落をまとめる囲み ──
   ひな形のグループに付く c-post-box と、
   ブロックの「スタイル → 囲み（薄い青）」で付く is-style-cosmos-box の両方に効かせる */
.p-single-column__body .c-post-box,
.p-single-column__body .is-style-cosmos-box {
  margin-top: 28px;
  padding: 24px 28px;
  border-radius: 10px;
  background-color: var(--color-bg-blue);
}

/* 囲みの中の最初の要素は、囲み自身の余白と二重にならないよう上を詰める。
   グループブロックは WordPress の版によって中に .wp-block-group__inner-container が
   1枚入ることがあるため、その1つ内側も指定しておく */
.p-single-column__body .c-post-box > :first-child,
.p-single-column__body .c-post-box > * > :first-child,
.p-single-column__body .is-style-cosmos-box > :first-child,
.p-single-column__body .is-style-cosmos-box > * > :first-child {
  margin-top: 0;
}

/* 囲みの中の見出しは、青地に青線だと沈むので線を消して色を濃くする */
.p-single-column__body .c-post-box h3 {
  padding-left: 0;
  color: var(--color-sub);
}

.p-single-column__body .c-post-box h3::before {
  display: none;
}

/* ── c-post-point--num：番号付きのポイント見出し ──
   番号は CSS のカウンタで出すので、記事側に数字を書かなくてよい。
   見出しを1つ削除すると残りが自動で振り直される。 */
.p-single-column__body {
  counter-reset: cosmos-point;
}

.p-single-column__body .c-post-point--num {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 0 0 12px;
  border-left: none;
  border-bottom: 2px solid var(--color-bg-blue);
  border-radius: 0;
  background-color: transparent;
  font-size: 19px;
  color: var(--color-sub);
  counter-increment: cosmos-point;
}

.p-single-column__body .c-post-point--num::before {
  content: counter(cosmos-point);
  /* h3::before の position:absolute / top / left が効いたままだと
     丸が見出しの先頭2文字に重なるので、必ず打ち消す */
  position: static;
  top: auto;
  left: auto;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-sub);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-white);
}

/* ── c-post-message：締めくくり ── */
.p-single-column__body .c-post-message {
  position: relative;
  /* さぽ太くん（180px）が短い文章のとき囲みの上にはみ出さない高さ */
  min-height: 196px;
  margin-top: 28px;
  padding: 32px 190px 32px 32px;
  border-radius: 14px;
  background-color: var(--color-bg-pink);
  font-size: 17px;
  line-height: 1.9;
}

.p-single-column__body .c-post-message > :first-child,
.p-single-column__body .c-post-message > * > :first-child {
  margin-top: 0;
}

.p-single-column__body .c-post-message::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 125px;
  height: 180px;
  background-image: url(../img/common/common_sapota_point.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}

.p-single-column__back {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 221px;
  height: 59px;
  margin: 72px auto 0;
  /* 矢印のぶん文字を右へ寄せる（404のボタンと同じ） */
  padding-left: 27px;
  border-radius: 999px;
  background-color: var(--color-main);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-text-white);
  transition: opacity .3s;
}

.p-single-column__back span {
  position: absolute;
  left: 28px;
}

.p-single-column__back:hover {
  opacity: .8;
}

/* ── コスモスおおさかだより（一覧・詳細） ── */
.p-letter {
  padding: 163px 0 147px;
}

.p-letter__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 156px));
  justify-content: space-between;
  gap: 40px 38px;
  margin-top: 50px;
}

.p-letter__item.is-hidden {
  display: none;
}

.p-letter__link {
  display: block;
  transition: opacity .3s;
}

.p-letter__link:hover {
  opacity: .7;
}

.p-letter__img {
  display: block;
  width: 100%;
  height: 217px;
  object-fit: contain;
}

.p-letter__img--none,
.p-single-letter__img--none {
  background-color: var(--color-bg-dummy);
}

.p-letter__no {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-body);
}

.p-single-letter {
  text-align: center;
}

.p-single-letter__cover {
  display: block;
  width: 460px;
  max-width: 100%;
  margin: 0 auto;
}

a.p-single-letter__cover {
  transition: opacity .3s;
}

a.p-single-letter__cover:hover {
  opacity: .8;
}

.p-single-letter__img {
  display: block;
  width: 100%;
  height: auto;
}

.p-single-letter__img--none {
  aspect-ratio: 210 / 297;
}

.p-single-letter__title {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-body);
}


/* ── フッター前お問い合わせまでの余白（トップ以外の最後のセクション） ── */
.p-aboutsystem-flow,
.p-houtei-flow,
.p-nini-flow,
.p-aboutus-access,
.p-activity-report,
.p-contact-form-sec,
.p-faq,
.p-gohonnin-cta,
.p-hukushi-cta,
.p-shigyou-cta,
.p-muryousoudan-reserve,
.p-privacy,
.p-column,
.p-column--single,
.p-letter,
.p-contact-complete,
.p-recruit,
.p-404,
.p-index {
  padding-bottom: 44px;
}

.p-sanjokaiin {
  padding-bottom: 47px;
}