/* ==========================================================================
TSUNAGU static site - style.css
- クラス名は原則 tsunagu- で始める（WordPress/Lightning移植時の衝突回避）
- 色・余白・角丸は :root のカスタムプロパティで一元管理
========================================================================== */
:root {
/* palette */
--tsunagu-bg: #fffdfa;
--tsunagu-white: #ffffff;
--tsunagu-text: #38312f;
--tsunagu-text-soft: #5e5753;
--tsunagu-coral: #f26f66;
--tsunagu-coral-light: #fbe2de;
--tsunagu-teal: #18a7aa;
--tsunagu-teal-light: #dff4f3;
--tsunagu-yellow: #d9aa38;
--tsunagu-yellow-light: #fbf1cf;
--tsunagu-border: #ebe5df;
/* 文字・塗りボタン用に、白文字とのコントラストを確保した濃いめの色 */
--tsunagu-coral-deep: #d0483f;
--tsunagu-teal-deep: #0e8487;
/* type */
--tsunagu-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
--tsunagu-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
/* layout */
--tsunagu-max: 1180px;
--tsunagu-gutter: 24px;
--tsunagu-section-y: 112px;
--tsunagu-radius: 16px;
--tsunagu-radius-sm: 12px;
--tsunagu-radius-pill: 999px;
--tsunagu-shadow: 0 6px 24px rgba(56, 49, 47, 0.06);
--tsunagu-header-h: 76px;
--tsunagu-accent: var(--tsunagu-coral);
--tsunagu-accent-deep: var(--tsunagu-coral-deep);
--tsunagu-accent-light: var(--tsunagu-coral-light);
}
html { scroll-padding-top: calc(var(--tsunagu-header-h) + 16px); }
@media (max-width: 1024px) {
:root { --tsunagu-section-y: 80px; --tsunagu-header-h: 68px; }
}
@media (max-width: 768px) {
:root { --tsunagu-section-y: 56px; --tsunagu-gutter: 20px; --tsunagu-header-h: 64px; }
}
/* ---------- base（tsunagu-page 配下に限定） ---------- */
@media (max-width: 768px) { .tsunagu-page { font-size: 16px; } }
.tsunagu-page {
margin: 0;
background: var(--tsunagu-bg);
color: var(--tsunagu-text);
font-family: var(--tsunagu-font-sans);
font-size: 17px;
line-height: 1.85;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
/* 要素セレクタは :where() で詳細度0にし、tsunagu- のクラス指定が常に優先されるようにする */
:where(.tsunagu-page) *, :where(.tsunagu-page) *::before, :where(.tsunagu-page) *::after { box-sizing: border-box; }
:where(.tsunagu-page) img { max-width: 100%; height: auto; display: block; }
:where(.tsunagu-page) a { color: inherit; }
:where(.tsunagu-page) :is(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.tsunagu-page) ul { padding: 0; list-style: none; }
:where(.tsunagu-page) address { font-style: normal; }
.tsunagu-page { line-break: strict; word-break: auto-phrase; }
:where(.tsunagu-page) :is(p, li, h1, h2, h3) { text-wrap: pretty; }
/* スマホ幅（600px以下）だけ改行する
。事業所名・企業理念見出しの2行表示に使う */
.tsunagu-br-sp { display: none; }
@media (max-width: 600px) { .tsunagu-br-sp { display: inline; } }
/* スマホ幅だけ、語の途中で折り返さない事業所名（例：ケアプランセンターTSUNAGU）。PCは従来どおり */
@media (max-width: 600px) { .tsunagu-bizname { white-space: nowrap; } }
.tsunagu-page :focus-visible {
outline: 3px solid var(--tsunagu-teal-deep);
outline-offset: 3px;
border-radius: 4px;
}
.tsunagu-skip {
position: absolute; left: 12px; top: -80px; z-index: 200;
background: var(--tsunagu-text); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.tsunagu-skip:focus { top: 12px; }
.tsunagu-container { width: 100%; max-width: calc(var(--tsunagu-max) + var(--tsunagu-gutter) * 2); margin-inline: auto; padding-inline: var(--tsunagu-gutter); }
.tsunagu-section { position: relative; padding-block: var(--tsunagu-section-y); }
.tsunagu-nowrap { display: inline-block; white-space: nowrap; }
.tsunagu-c-coral { color: var(--tsunagu-coral); }
.tsunagu-c-teal { color: var(--tsunagu-teal); }
/* ---------- headings ---------- */
.tsunagu-eyebrow {
display: flex; align-items: center; justify-content: center; gap: 16px;
font-family: var(--tsunagu-font-serif); font-weight: 500;
font-size: clamp(17px, 2vw, 21px); letter-spacing: 0.08em; text-align: center;
}
.tsunagu-eyebrow::before, .tsunagu-eyebrow::after { content: ""; width: clamp(28px, 6vw, 64px); height: 1.5px; background: var(--tsunagu-coral); }
.tsunagu-eyebrow::after { background: var(--tsunagu-teal); }
.tsunagu-eyebrow--left { justify-content: flex-start; }
.tsunagu-eyebrow--left::before { display: none; }
.tsunagu-eyebrow--left::after { display: none; }
.tsunagu-eyebrow--left { gap: 0; }
.tsunagu-h2 {
font-family: var(--tsunagu-font-serif); font-weight: 500; line-height: 1.5;
font-size: clamp(30px, 4.6vw, 56px); letter-spacing: 0.02em;
}
.tsunagu-sechead { text-align: center; margin-bottom: clamp(32px, 4vw, 48px); }
/* ---------- buttons ---------- */
.tsunagu-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 28px; border-radius: var(--tsunagu-radius-pill);
border: 1.5px solid transparent; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.4;
text-decoration: none; cursor: pointer; text-align: center;
transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.tsunagu-btn::after {
content: ""; width: 7px; height: 7px; flex: none;
border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: -2px;
}
.tsunagu-btn--coral { background: var(--tsunagu-coral-deep); color: #fff; }
.tsunagu-btn--coral:hover { background: #b93c34; }
.tsunagu-btn--teal { background: var(--tsunagu-teal-deep); color: #fff; }
.tsunagu-btn--teal:hover { background: #0a6d70; }
.tsunagu-btn--white { background: #fff; color: var(--tsunagu-text); border-color: var(--tsunagu-border); box-shadow: 0 2px 10px rgba(56,49,47,.06); }
.tsunagu-btn--white:hover { border-color: var(--tsunagu-text-soft); }
.tsunagu-btn--outline-teal { background: rgba(255,255,255,.9); color: var(--tsunagu-teal-deep); border-color: var(--tsunagu-teal-deep); }
.tsunagu-btn--outline-teal:hover { background: var(--tsunagu-teal-light); }
.tsunagu-btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.tsunagu-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* text link with underline (LP「会社概要を見る」) */
.tsunagu-textlink {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
color: var(--tsunagu-teal-deep); font-weight: 700; text-decoration: none;
border-bottom: 1.5px solid var(--tsunagu-teal); padding-bottom: 2px;
}
.tsunagu-textlink::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
/* ---------- header ---------- */
.tsunagu-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255, 253, 250, 0.94); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--tsunagu-border);
}
.tsunagu-header__inner {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 28px;
min-height: var(--tsunagu-header-h); width: 100%; max-width: 1360px; margin-inline: auto; padding: 8px var(--tsunagu-gutter);
}
.tsunagu-header__logo { display: block; flex: none; line-height: 0; }
.tsunagu-header__logo img { height: 44px; width: auto; }
.tsunagu-nav__list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.tsunagu-nav__link {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; border-radius: 8px;
}
.tsunagu-nav__link:hover { color: var(--tsunagu-coral-deep); }
.tsunagu-nav__link[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--tsunagu-coral); border-radius: 0; }
.tsunagu-nav__cta { margin-left: 8px; }
.tsunagu-nav__cta .tsunagu-btn { font-size: 15px; padding: 0 22px; min-height: 44px; white-space: nowrap; }
.tsunagu-nav__cta .tsunagu-btn::after { display: none; }
.tsunagu-menu-toggle { display: none; }
/* ブレークポイント：1200px以上＝横並びナビ（PC）／1199px以下＝ハンバーガー（スマホ・タブレット） */
@media (max-width: 1199px) {
.tsunagu-js .tsunagu-menu-toggle {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-width: 44px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius-pill);
background: #fff; color: var(--tsunagu-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.tsunagu-menu-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: background .2s; }
.tsunagu-menu-toggle__bars::before, .tsunagu-menu-toggle__bars::after {
content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s;
}
.tsunagu-menu-toggle__bars::before { top: -6px; }
.tsunagu-menu-toggle__bars::after { top: 6px; }
.tsunagu-menu-toggle[aria-expanded="true"] .tsunagu-menu-toggle__bars { background: transparent; }
.tsunagu-menu-toggle[aria-expanded="true"] .tsunagu-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.tsunagu-menu-toggle[aria-expanded="true"] .tsunagu-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
.tsunagu-js .tsunagu-nav {
display: none; position: absolute; left: 0; right: 0; top: 100%;
background: var(--tsunagu-bg); border-bottom: 1px solid var(--tsunagu-border);
padding: 12px var(--tsunagu-gutter) 24px; max-height: calc(100vh - var(--tsunagu-header-h)); overflow-y: auto;
box-shadow: 0 16px 24px rgba(56,49,47,.08);
}
.tsunagu-js .tsunagu-nav.is-open { display: block; }
.tsunagu-js .tsunagu-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.tsunagu-js .tsunagu-nav__link { min-height: 54px; padding: 0 4px; font-size: 17px; border-bottom: 1px solid var(--tsunagu-border); border-radius: 0; }
.tsunagu-js .tsunagu-nav__cta { margin: 16px 0 0; }
.tsunagu-js .tsunagu-nav__cta .tsunagu-btn { width: 100%; min-height: 52px; font-size: 16px; }
.tsunagu-header__inner { position: relative; }
.tsunagu-header { position: sticky; }
}
@media (min-width: 1200px) {
.tsunagu-header__inner { flex-wrap: nowrap; gap: 0 20px; }
.tsunagu-nav { flex: 0 1 auto; min-width: 0; }
.tsunagu-nav__list { flex-wrap: nowrap; }
.tsunagu-menu-toggle, .tsunagu-js .tsunagu-menu-toggle { display: none; }
}
/* 1200〜1359px：8項目が重ならないよう、余白だけ少し詰める（文字は14px） */
@media (min-width: 1200px) and (max-width: 1359px) {
.tsunagu-header__inner { padding-inline: 24px; gap: 0 16px; }
.tsunagu-nav__list { gap: 4px 2px; }
.tsunagu-nav__link { padding: 0 8px; font-size: 14px; }
.tsunagu-nav__cta { margin-left: 4px; }
.tsunagu-nav__cta .tsunagu-btn { font-size: 14px; padding: 0 14px; }
}
/* ---------- hero ---------- */
.tsunagu-hero { position: relative; }
.tsunagu-hero__inner { position: relative; display: grid; max-width: 1680px; margin-inline: auto; background: var(--tsunagu-bg); }
.tsunagu-hero__inner > * { grid-area: 1 / 1; }
/* 手をつないだ部分が画面の横方向 約60〜65% に来るよう、写真を右寄せで配置（拡大・トリミングはしない。widthを変えても写真全体をそのまま縮尺表示）。
写真は opacity:1・filter:none。左端だけ、ページ背景になじませるマスクを使用（写真の色は変えない）。 */
.tsunagu-hero__img {
justify-self: end; width: 84%; height: auto; aspect-ratio: 1280 / 580; opacity: 1; filter: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
/* 文字が読める範囲（左側〜中央手前）だけの白いグラデーション。中央から右は完全に透明 */
.tsunagu-hero__fade {
pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.78) 25%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0) 50%);
}
.tsunagu-hero__content {
position: relative; align-self: center; z-index: 1;
width: 100%; max-width: calc(var(--tsunagu-max) + var(--tsunagu-gutter) * 2); margin-inline: auto; padding-inline: var(--tsunagu-gutter);
}
/* 文章側 約38〜40%・写真側 約60〜62%になるよう、PCでは文章の幅を少し狭めている */
.tsunagu-hero__body { max-width: min(672px, 40vw); }
.tsunagu-hero__badge, .tsunagu-hero__title, .tsunagu-hero__lead { text-shadow: 0 0 14px rgba(255,253,250,.9), 0 0 3px rgba(255,253,250,.9); }
/* ファーストビューの案内文：栃木市の訪問看護・訪問リハビリ。見出しより小さく・ゴシック・控えめな太さ */
.tsunagu-hero__badge {
display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(10px, 1.6vw, 14px);
font-family: var(--tsunagu-font-sans); font-weight: 500; letter-spacing: 0.06em;
font-size: clamp(13px, 1.15vw, 15px); color: var(--tsunagu-text-soft);
}
.tsunagu-hero__badge-mark { width: 22px; height: 2px; flex: none; border-radius: 2px; background: linear-gradient(90deg, var(--tsunagu-coral), var(--tsunagu-teal)); }
.tsunagu-hero__title {
font-family: var(--tsunagu-font-serif); font-weight: 500; line-height: 1.55; letter-spacing: 0.02em;
font-size: clamp(30px, 3.3vw, 48px);
}
.tsunagu-hero__title .tsunagu-c-coral { font-weight: 600; }
.tsunagu-hero__lead { margin-top: 14px; font-family: var(--tsunagu-font-sans); font-weight: 500; font-size: clamp(16px, 1.5vw, 19px); }
.tsunagu-hero .tsunagu-btn-row { margin-top: clamp(28px, 2vw, 32px); gap: 16px; }
@media (min-width: 961px) {
.tsunagu-hero .tsunagu-btn { padding-inline: 22px; }
/* PCでは見出しにもう少し存在感を。行の折り返し位置・写真との重なりは各幅で確認済み */
.tsunagu-hero__title { font-size: clamp(32px, 3.6vw, 52px); }
/* 採用情報ボタンは一回り控えめに（リンク先・文言は変更しない） */
.tsunagu-hero__btn--sub { padding: 0 20px; font-size: 15px; }
}
/* メインビジュアルの高さは内容に応じた自然な高さのまま。写真と文章の高さに余裕がある幅でのみ、
コンテンツを写真の下端基準で配置し、「採用情報を見る」ボタン下に一定の余白（約26px）を確保する。 */
@media (min-width: 1200px) {
.tsunagu-hero__content { align-self: end; padding-bottom: 26px; }
}
@media (max-width: 960px) {
.tsunagu-hero__inner { display: block; }
.tsunagu-hero__fade { display: none; }
.tsunagu-hero__content { padding-block: 40px 28px; }
.tsunagu-hero__body { max-width: none; }
.tsunagu-hero__badge, .tsunagu-hero__title, .tsunagu-hero__lead { text-shadow: none; }
/* スマートフォン表示のみ：見出し・説明文を中央揃えに */
.tsunagu-hero__badge { justify-content: center; }
.tsunagu-hero__title, .tsunagu-hero__lead { text-align: center; }
.tsunagu-hero__title { font-size: clamp(28px, 7.4vw, 40px); }
.tsunagu-hero__badge { font-size: 13.5px; }
.tsunagu-hero .tsunagu-btn-row { flex-direction: column; align-items: stretch; gap: 12px; }
.tsunagu-hero .tsunagu-btn { width: 100%; min-height: 52px; }
/* タブレット・スマホ：写真は上に全体表示。手を包んでいる部分（画像の中央やや左）を中心に切り出す */
.tsunagu-hero__img { border-radius: 0; width: 100%; justify-self: auto; -webkit-mask-image: none; mask-image: none; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 50%; }
}
@media (max-width: 600px) {
.tsunagu-hero__img { aspect-ratio: 5 / 4; object-position: 47% 50%; }
}
/* ---------- curve divider ---------- */
.tsunagu-curve { display: block; width: 100%; height: 120px; pointer-events: none; }
.tsunagu-curve path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.tsunagu-curve--tight { height: 84px; }
@media (max-width: 768px) { .tsunagu-curve { height: 72px; } }
/* ---------- about ---------- */
/* トップページ背景色調整：#FCFAF7（元は linear-gradient(180deg, #fff 0%, var(--tsunagu-bg) 100%)） */
.tsunagu-about { text-align: center; overflow: hidden; background: #FCFAF7; }
.tsunagu-about::before, .tsunagu-about::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.tsunagu-about::before { width: clamp(150px, 20vw, 260px); aspect-ratio: 1; right: -4%; top: 10%; background: rgba(24,167,170,.14); }
.tsunagu-about::after { width: clamp(100px, 13vw, 170px); aspect-ratio: 1; right: 12%; top: 46%; background: rgba(242,111,102,.13); }
.tsunagu-about .tsunagu-container { position: relative; z-index: 1; }
@media (max-width: 768px) {
.tsunagu-about::before { width: 110px; right: -30px; top: 4%; }
.tsunagu-about::after { width: 70px; right: 4%; top: 60%; }
}
.tsunagu-about__title { margin-top: 28px; }
.tsunagu-about__title .tsunagu-c-coral, .tsunagu-about__title .tsunagu-c-teal { font-weight: 600; }
.tsunagu-about__text { margin: 28px auto 0; max-width: 680px; font-size: clamp(16px, 1.6vw, 18px); }
.tsunagu-about__link { margin-top: 20px; }
/* ---------- features ---------- */
/* トップページ背景色調整：#FFFFFF（元は背景指定なし＝ページ背景を継承） */
.tsunagu-features { padding-top: 24px; background: #FFFFFF; }
.tsunagu-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tsunagu-feature {
background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius);
padding: 36px 32px 32px; text-align: center; box-shadow: var(--tsunagu-shadow);
}
.tsunagu-feature__icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 20px; }
.tsunagu-feature__icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tsunagu-feature--coral .tsunagu-feature__icon { background: var(--tsunagu-coral-light); color: var(--tsunagu-coral); }
.tsunagu-feature--teal .tsunagu-feature__icon { background: var(--tsunagu-teal-light); color: var(--tsunagu-teal); }
.tsunagu-feature--yellow .tsunagu-feature__icon { background: var(--tsunagu-yellow-light); color: var(--tsunagu-yellow); }
.tsunagu-feature__title { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 22px; line-height: 1.5; }
.tsunagu-feature__text { max-width: 22em; margin: 12px auto 0; text-align: center; font-size: 16px; line-height: 1.9; color: var(--tsunagu-text-soft); text-wrap: balance; }
.tsunagu-features__more { margin-top: 28px; text-align: center; }
@media (max-width: 900px) {
/* タブレット・スマホ：1列。アイコン・見出し・説明文をすべて中央揃えで、3枚とも同じ余白にする */
.tsunagu-grid-3 { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 16px; }
.tsunagu-feature { padding: 30px 24px 28px; text-align: center; }
.tsunagu-feature__icon { width: 76px; height: 76px; margin: 0 auto 16px; }
.tsunagu-feature__icon svg { width: 42px; height: 42px; }
.tsunagu-feature__title { font-size: 21px; }
.tsunagu-feature__text { max-width: 26em; margin-top: 10px; }
}
/* ---------- 専門性と医療連携（トップ・特徴ページ共通） ---------- */
.tsunagu-spec__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.tsunagu-spec__grid > li { display: flex; }
.tsunagu-spec__grid--page { margin-top: 24px; }
.tsunagu-spec-card {
flex: 1; min-width: 0; padding: 30px 24px 28px; text-align: center;
background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow);
}
.tsunagu-spec-card__icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; }
.tsunagu-spec-card__icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tsunagu-spec-card--coral .tsunagu-spec-card__icon { background: var(--tsunagu-coral-light); color: var(--tsunagu-coral); }
.tsunagu-spec-card--teal .tsunagu-spec-card__icon { background: var(--tsunagu-teal-light); color: var(--tsunagu-teal); }
.tsunagu-spec-card--yellow .tsunagu-spec-card__icon { background: var(--tsunagu-yellow-light); color: var(--tsunagu-yellow); }
.tsunagu-spec-card__title { margin: 0; font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 19px; line-height: 1.55; overflow-wrap: break-word; text-wrap: balance; }
.tsunagu-spec-card__text { margin-top: 10px; font-size: 15px; line-height: 1.9; color: var(--tsunagu-text-soft); overflow-wrap: break-word; }
.tsunagu-features__more { margin-top: clamp(28px, 4vw, 40px); }
/* トップ：特徴カード内の資格の小見出しと説明（控えめな配色。リンクなし） */
.tsunagu-feature__qual { max-width: 100%; margin: 16px auto 0; padding-top: 14px; border-top: 1px dashed var(--tsunagu-border); text-align: center; }
.tsunagu-feature__tag { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: 2px 12px; border: 1px solid transparent; border-radius: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.6; text-wrap: balance; overflow-wrap: break-word; }
.tsunagu-feature__tag--coral { background: var(--tsunagu-coral-light); border-color: #e9a29c; color: var(--tsunagu-coral-deep); }
.tsunagu-feature__tag--teal { background: #e3f2f8; border-color: #0e8487; color: #0a6d70; }
.tsunagu-feature__tag--yellow { background: var(--tsunagu-yellow-light); border-color: #e2c26a; color: #7d5d0c; }
.tsunagu-feature__qualtext { margin: 6px 0 0; font-size: 14px; line-height: 1.75; color: var(--tsunagu-text-soft); text-wrap: balance; overflow-wrap: break-word; }
.tsunagu-feature__tag + .tsunagu-feature__qualtext { margin-top: 8px; }
@media (max-width: 900px) { .tsunagu-features .tsunagu-grid-3 { grid-auto-rows: auto; } }
/* PC：3枚の「アイコン／見出し／説明／資格エリア」の各段をそろえ、区切り線とラベルを同じ高さに（固定高さは使わない） */
@media (min-width: 901px) {
.tsunagu-features .tsunagu-grid-3 { row-gap: 0; }
/* 資格エリアは説明文より少し広く取り、行数を減らして3枚の高さ差を小さくする */
.tsunagu-feature__qual { max-width: none; margin-inline: -12px; }
.tsunagu-feature__qualtext { font-size: 13.5px; }
@supports (grid-template-rows: subgrid) {
.tsunagu-features .tsunagu-grid-3 > .tsunagu-feature { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
}
/* 外部リンク（新しいタブで開く）の表示 */
.tsunagu-spec-card__link .tsunagu-textlink--ext { display: inline; min-height: 0; line-height: 1.9; padding-bottom: 1px; text-align: left; }
.tsunagu-textlink--ext::after { content: none; }
.tsunagu-extico { display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tsunagu-spec-card__link + .tsunagu-spec-card__link { margin-top: 4px; }
/* 特徴ページ：説明文が長いので左揃え。医師との連携は横長カード */
.tsunagu-spec-card--left { text-align: left; }
.tsunagu-spec-card--left .tsunagu-spec-card__icon { margin-left: 0; }
.tsunagu-spec-card--wide { display: flex; align-items: flex-start; gap: 24px; padding: 30px 32px; text-align: left; }
.tsunagu-spec-card--wide .tsunagu-spec-card__icon { margin: 0; width: 72px; height: 72px; }
.tsunagu-spec-card--wide .tsunagu-spec-card__icon svg { width: 40px; height: 40px; }
.tsunagu-spec-card__body { flex: 1; min-width: 0; }
.tsunagu-spec-card__body .tsunagu-card__tag { margin-bottom: 8px; }
.tsunagu-spec-card__link { margin-top: 8px; padding-block: 6px; }
.tsunagu-spec-card__link .tsunagu-textlink { text-align: left; }
@media (max-width: 900px) {
.tsunagu-spec__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
.tsunagu-spec-card { padding: 26px 22px 24px; }
.tsunagu-spec-card--wide { flex-direction: column; gap: 14px; padding: 26px 22px; }
.tsunagu-spec-card--wide .tsunagu-spec-card__icon { width: 64px; height: 64px; }
.tsunagu-spec-card--wide .tsunagu-spec-card__icon svg { width: 36px; height: 36px; }
}
/* 採用ページ：専門資格の一文 */
.tsunagu-recruit__learn { margin-top: 20px; color: var(--tsunagu-text-soft); text-align: center; }
/* ---------- services ---------- */
/* トップページ背景色調整：#FFFFFF（元は背景指定なし＝ページ背景を継承） */
/* トップページ セクション背景・波形調整（追加修正）：直後の「TSUNAGUの事業」との境界を波形1つだけで
つなぐため、このセクション下部の余白を元の共通値（var(--tsunagu-section-y)＝PC約112px）から
clamp(40px,6vw,64px)へ縮小。波の直前に大きな白い余白が残って境界が二重に見えるのを解消するための
もので、他ページでは使われていないセレクタのため影響なし。元に戻す場合はこの1行のpadding-bottomを
削除する（padding-topはこれまでどおり0のまま）。 */
.tsunagu-services { padding-top: 0; padding-bottom: clamp(40px, 6vw, 64px); background: #FFFFFF; }
.tsunagu-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tsunagu-grid-5 > li { display: flex; }
.tsunagu-svc {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative;
min-height: 132px; padding: 22px 16px; background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius);
text-decoration: none; text-align: center; font-weight: 700; font-size: 16px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tsunagu-svc:hover { border-color: var(--tsunagu-teal); box-shadow: var(--tsunagu-shadow); }
.tsunagu-svc svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tsunagu-svc--coral svg { color: var(--tsunagu-coral); }
.tsunagu-svc--teal svg { color: var(--tsunagu-teal); }
.tsunagu-svc__label::after {
content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; vertical-align: 1px;
border-top: 2px solid var(--tsunagu-teal); border-right: 2px solid var(--tsunagu-teal); transform: rotate(45deg);
}
.tsunagu-svc--coral .tsunagu-svc__label::after { border-color: var(--tsunagu-coral); }
@media (max-width: 1024px) { .tsunagu-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
.tsunagu-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tsunagu-grid-5 > li:last-child { grid-column: 1 / -1; }
.tsunagu-svc { min-width: 0; min-height: 112px; font-size: 15px; overflow-wrap: break-word; }
}
/* ---------- business ---------- */
/* トップページ セクション背景・波形調整：背景色は#FFF9EEのまま維持（カード＝コーラルとの重なりを避けるため）。
直前セクション（サービス紹介＝白）との境界を、直線から浅い波形へ変更。他の3か所（パンフレット／採用情報／
Instagram）の波と形が重ならないよう、それぞれ異なる波形にしている。
【再修正】以前のSVGパスの生成に誤りがあり、直線（対角線）の上に波形が重なって二重の境界に見えていたため、
パスを描き直した。あわせて実装方式も変更：波の塗り色は「このセクション自身の背景色」#FFF9EEにし、
波の形をした帯をセクション上端の外側（直前セクション側）へ negative top ではみ出させて配置する方式に
した（以前のような「相手セクションの色を波の中に塗って透明部分から自色を透かす」方式はやめた）。
これにより、波より上は実際の直前セクション（サービス紹介＝白）がそのまま見え、波より下は完全に
このセクションの#FFF9EEになる。波の下端は1px分だけこのセクションの内側に重ねて、隙間ができないように
している。波の高さは --wave-h（clamp(25px,4.2vw,50px)）＝デスクトップ幅で約40〜50px、
スマートフォン幅で約25px。padding-topは波が外側にはみ出す方式になったため0に戻した。
波はCSS ::before疑似要素＋インラインSVG（background-imageのdata URI）で実装しており、画像ファイルは
追加していない。疑似要素にはDOM上の実体がなく支援技術には元々渡らないため、aria-hidden="true"と同等の
状態になっている。元に戻す場合は下の2行（background/::before）を
`.tsunagu-business { padding-top: 0; background: #FFF9EE; }` に戻す。 */
.tsunagu-business { padding-top: 0; background: #FFF9EE; }
.tsunagu-business::before {
content: "";
position: absolute; left: 0; width: 100%;
--wave-h: clamp(25px, 4.2vw, 50px);
height: var(--wave-h);
top: calc(-1 * var(--wave-h) + 1px);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDcwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw3MCBMMTQ0MCw3MCBMMTQ0MCwyNiBDMTMxMC4wLDI2IDEzMTAuMCw0MiAxMTgwLDQyIEMxMDYwLjAsNDIgMTA2MC4wLDIwIDk0MCwyMCBDODIwLjAsMjAgODIwLjAsMzggNzAwLDM4IEM1ODAuMCwzOCA1ODAuMCwyMiA0NjAsMjIgQzM0NS4wLDIyIDM0NS4wLDM2IDIzMCwzNiBDMTE1LjAsMzYgMTE1LjAsMjQgMCwyNCBaIiBmaWxsPSIjRkZGOUVFIi8+PC9zdmc+");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.tsunagu-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tsunagu-biz {
position: relative; overflow: hidden; isolation: isolate;
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 24px;
padding: 36px 32px 36px 36px; border-radius: var(--tsunagu-radius); min-height: 340px;
}
.tsunagu-biz--coral { background: var(--tsunagu-coral-light); }
.tsunagu-biz--teal { background: var(--tsunagu-teal-light); }
.tsunagu-biz::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 240px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.55); }
.tsunagu-biz::after { content: ""; position: absolute; z-index: -1; right: 26px; bottom: 22px; width: 14px; aspect-ratio: 1; border-radius: 50%; background: var(--tsunagu-yellow); }
/* 左右カードのロゴ枠は同じ大きさ・同じ位置・同じ余白。ロゴは縦横比を保ったまま枠の中央に収める */
.tsunagu-biz__logo { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: min(240px, 100%); height: 72px; padding: 10px 16px; background: #fff; border-radius: var(--tsunagu-radius-sm); line-height: 0; overflow: hidden; }
.tsunagu-biz__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; position: relative; }
/* ロゴ画像は元画像の余白の量が違う（訪問看護は余白ほぼなし、ケアプランは周囲に余白あり）。
「見た目のロゴの高さ」が左右で同じ（約40px）になるように、画像の表示高さを個別に調整。縦横比は維持し、切り取りなし */
.tsunagu-biz__logo--homecare img { height: 40px; } /* トップ・会社概要で共通 */
.tsunagu-biz__logo--careplan img { height: 52px; left: 7px; top: 1px; } /* 元画像の絵柄が左上寄りのため、中央に見えるよう微調整 */
.tsunagu-biz__title { margin-top: 18px; font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(21px, 2.1vw, 25px); line-height: 1.5; }
.tsunagu-biz--coral .tsunagu-biz__title { color: var(--tsunagu-coral-deep); }
.tsunagu-biz--teal .tsunagu-biz__title { color: var(--tsunagu-teal-deep); }
.tsunagu-biz__text { margin-top: 10px; font-size: 16px; }
.tsunagu-biz .tsunagu-btn { margin-top: 22px; }
.tsunagu-biz__photo { position: relative; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(56,49,47,.12); }
.tsunagu-biz__photo--round { aspect-ratio: 1 / 1; border-radius: 50%; border: 6px solid #fff; }
.tsunagu-biz__photo--wide { aspect-ratio: 585 / 410; border-radius: var(--tsunagu-radius); border: 5px solid #fff; }
/* 既存のパンフレット・チラシ画像から写真部分だけをCSSで切り出して表示（画像の新規作成・加工なし） */
.tsunagu-crop { position: absolute; max-width: none; height: auto; }
.tsunagu-crop--nurse { width: 800%; left: 0; top: -322%; } /* pamphlet-homecare-outside.png：看護師と利用者の写真（正方形で切り出し） */
.tsunagu-crop--walker { width: 751.9%; left: -149.6%; top: -404.9%; } /* pamphlet-homecare-outside.png の写真部分 */
.tsunagu-crop--consult { width: 241.7%; left: -136.75%; top: -81.7%; } /* flyer-careplan.png の写真部分 */
@media (max-width: 1024px) {
.tsunagu-grid-2 { grid-template-columns: minmax(0, 1fr); }
.tsunagu-biz { min-height: 0; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
@media (max-width: 640px) {
.tsunagu-biz { grid-template-columns: 1fr; padding: 28px 24px 30px; gap: 22px; }
.tsunagu-biz__photo { order: -1; width: min(100%, 300px); margin-inline: auto; }
/* スマートフォン表示のみ：ロゴ・見出し・文章・ボタンの中心線を揃える */
.tsunagu-biz__body { text-align: center; }
.tsunagu-biz__logo { margin-inline: auto; }
}
/* ---------- pamphlet ---------- */
/* トップページ セクション背景・波形調整：背景色を#FFF9E8からわずかに濃い淡い黄色#FFF4D6に調整。
【再修正】以前の実装は、波の中に直前セクションの色（#FFF9EE）を塗って透明部分から自色を透かす方式で、
かつSVGパスの生成に誤りがあったため、直線の黄色が先に始まり、その内側に白っぽい波が別に浮いて見える
二重の境界になっていた。パスを描き直したうえで、実装方式も変更：波の塗り色は「このセクション自身の
背景色」#FFF4D6にし、波形の帯をセクション上端の外側（直前の「TSUNAGUの事業」側）へ negative top で
はみ出させて配置する方式にした。これにより、波より上は実際の直前セクション（#FFF9EE）がそのまま見え、
波より下は完全にこのセクションの#FFF4D6になり、黄色が直線で先に始まることはない。波の下端は1px分だけ
このセクションの内側に重ねて、隙間ができないようにしている。波の高さは --wave-h（clamp(25px,4.2vw,50px)）
＝デスクトップ幅で約40〜50px、スマートフォン幅で約25px。padding-topは波が外側にはみ出す方式になった
ため0に戻した。他の3か所と重ならない波形。元に戻す場合は下の2行（background/::before）を
`.tsunagu-pamphlet { padding-top: 0; background: #FFF9E8; }` に戻す。 */
.tsunagu-pamphlet { padding-top: 0; background: #FFF4D6; }
.tsunagu-pamphlet::before {
content: "";
position: absolute; left: 0; width: 100%;
--wave-h: clamp(25px, 4.2vw, 50px);
height: var(--wave-h);
top: calc(-1 * var(--wave-h) + 1px);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDcwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw3MCBMMTQ0MCw3MCBMMTQ0MCwzNCBDMTMyMC4wLDM0IDEzMjAuMCwxNiAxMjAwLDE2IEMxMDgwLjAsMTYgMTA4MC4wLDQwIDk2MCw0MCBDODYwLjAsNDAgODYwLjAsMjQgNzYwLDI0IEM2NDAuMCwyNCA2NDAuMCw0NCA1MjAsNDQgQzQwMC4wLDQ0IDQwMC4wLDIyIDI4MCwyMiBDMTQwLjAsMjIgMTQwLjAsMzggMCwzOCBaIiBmaWxsPSIjRkZGNEQ2Ii8+PC9zdmc+");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.tsunagu-pamphlet .tsunagu-sechead { margin-bottom: 20px; }
.tsunagu-pamphlet__lead { max-width: 620px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; color: var(--tsunagu-text-soft); }
.tsunagu-books { display: flex; align-items: flex-start; justify-content: center; gap: clamp(20px, 3.6vw, 48px); }
.tsunagu-book { margin: 0; text-align: center; }
.tsunagu-book__cover {
position: relative; display: block; overflow: hidden; height: clamp(200px, 30vw, 400px); margin-inline: auto;
background: #fff; border-radius: 4px 8px 8px 4px; border: 1px solid var(--tsunagu-border);
box-shadow: 4px 8px 18px rgba(56,49,47,.12), inset 5px 0 8px -5px rgba(56,49,47,.18);
}
.tsunagu-book__cover img { position: absolute; top: 0; height: 100%; width: auto; max-width: none; }
/* 三つ折りパンフレットの1面だけを見せる（元画像は2000x1414、1面はおよそ33.6%）。画像は加工しない */
.tsunagu-book--front .tsunagu-book__cover { aspect-ratio: 673 / 1414; }
.tsunagu-book--front .tsunagu-book__cover img { left: auto; right: 0; }
/* 内側パンフレットは画像全体（1920x1356）をそのまま表示する。切り取り・オーバーレイなし */
.tsunagu-book--inside .tsunagu-book__cover { aspect-ratio: 1920 / 1356; overflow: visible; }
.tsunagu-book--inside .tsunagu-book__cover img {
position: static; display: block; width: 100%; max-width: 100%; height: auto;
object-fit: contain; opacity: 1; filter: none; border-radius: inherit;
}
.tsunagu-book--flyer .tsunagu-book__cover { aspect-ratio: 1414 / 2000; }
.tsunagu-book--flyer .tsunagu-book__cover img { left: 0; width: 100%; height: 100%; object-fit: cover; }
.tsunagu-book__cap { margin-top: 14px; font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--tsunagu-text); }
.tsunagu-pamphlet__btn-row { margin-top: clamp(28px, 4vw, 40px); text-align: center; }
@media (max-width: 720px) {
.tsunagu-books { flex-direction: column; align-items: center; gap: 36px; }
.tsunagu-book { width: 100%; }
.tsunagu-book__cover { height: auto; width: min(100%, 300px); }
.tsunagu-book--inside .tsunagu-book__cover { width: min(100%, 360px); }
.tsunagu-pamphlet__btn-row .tsunagu-btn { width: 100%; min-height: 52px; }
}
/* ---------- recruit ---------- */
/* トップページ セクション背景・波形調整：背景色を#EDF9F8からわずかに濃い淡い青緑#E6F6F5に調整。
【再修正】以前の実装は、波の中に直前セクションの色を塗って透明部分から自色を透かす方式で、かつSVG
パスの生成に誤りがあったため、直線の帯の内側に白っぽい波が別に浮いて見える二重の境界になっていた。
パスを描き直したうえで、実装方式も変更：波の塗り色は「このセクション自身の背景色」#E6F6F5にし、
波形の帯をセクション上端の外側（直前の「パンフレット一覧」側）へ negative top ではみ出させて配置する
方式にした。これにより、波より上は実際の直前セクション（淡い黄色#FFF4D6）がそのまま見え、波より下は
完全にこのセクションの#E6F6F5になる。淡い黄色と淡い青緑の境目がこの1つの波だけで自然につながる。
波の下端は1px分だけこのセクションの内側に重ねて、隙間ができないようにしている。波の高さは
--wave-h（clamp(25px,4.2vw,50px)）＝デスクトップ幅で約40〜50px、スマートフォン幅で約25px。
padding-topは波が外側にはみ出す方式になったため0に戻した。他の3か所と重ならない波形。元に戻す場合は
下の2行（background/::before）を `.tsunagu-recruit { padding-top: 0; background: #EDF9F8; }` に戻す。 */
.tsunagu-recruit { padding-top: 0; background: #E6F6F5; }
.tsunagu-recruit::before {
content: "";
position: absolute; left: 0; width: 100%;
--wave-h: clamp(25px, 4.2vw, 50px);
height: var(--wave-h);
top: calc(-1 * var(--wave-h) + 1px);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDcwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw3MCBMMTQ0MCw3MCBMMTQ0MCwyMCBDMTMwMC4wLDIwIDEzMDAuMCw0MCAxMTYwLDQwIEMxMDIwLjAsNDAgMTAyMC4wLDI0IDg4MCwyNCBDNzcwLjAsMjQgNzcwLjAsNDQgNjYwLDQ0IEM1NDAuMCw0NCA1NDAuMCwxOCA0MjAsMTggQzMxMC4wLDE4IDMxMC4wLDM0IDIwMCwzNCBDMTAwLjAsMzQgMTAwLjAsMjIgMCwyMiBaIiBmaWxsPSIjRTZGNkY1Ii8+PC9zdmc+");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.tsunagu-recruit__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
/* 採用情報 小見出し調整：「採用情報」の文字をやや大きく・太くし、左に短いコーラル色の線を添えて、
このセクションの入り口だと分かりやすくした。.tsunagu-eyebrow--leftはこの「採用情報」でのみ使用して
いるため、他の見出しには影響しない。文字サイズはPCで約28〜32px・スマートフォンで約22px、
メインコピー「あなたの想いも、TSUNAGUへ。」（.tsunagu-recruit__title＝28〜44px）よりは常に小さい
範囲にとどめている。上下の余白も追加し、セクション上部の波形やタイトルとの間にゆとりを持たせた。 */
.tsunagu-recruit .tsunagu-eyebrow--left {
gap: 14px;
margin-top: clamp(4px, 1vw, 10px);
margin-bottom: clamp(8px, 1.4vw, 14px);
font-size: clamp(22px, 2.8vw, 32px);
font-weight: 700;
letter-spacing: 0.04em;
}
.tsunagu-recruit .tsunagu-eyebrow--left::before {
display: block;
width: 32px;
height: 3px;
background: var(--tsunagu-coral);
}
.tsunagu-recruit__title { font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.5; margin-top: 16px; }
.tsunagu-recruit__title .tsunagu-c-coral { font-weight: 600; }
.tsunagu-recruit__text { margin-top: 18px; color: var(--tsunagu-text-soft); }
.tsunagu-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.tsunagu-checks li {
position: relative; display: flex; align-items: center; min-height: 58px; padding: 12px 16px 12px 44px;
background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius-sm);
font-size: 16px; font-weight: 700; line-height: 1.5;
}
.tsunagu-checks li::before { content: ""; position: absolute; left: 18px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--tsunagu-teal); }
.tsunagu-checks li:nth-child(3n+1)::before { background: var(--tsunagu-coral); }
.tsunagu-checks li:nth-child(3n+3)::before { background: var(--tsunagu-yellow); }
/* 「必要なときに報告・連絡・相談ができる方」：スマホ・タブレット（〜1199px）では「必要なときに、」の直後で改行し、
「報告・連絡・相談」が途中で分かれないようにする。PC（1200px以上）は改行せず1行表示。 */
.tsunagu-checks__br--sp { display: none; }
@media (max-width: 1199px) {
.tsunagu-checks__br--sp { display: inline; }
}
.tsunagu-recruit .tsunagu-btn { margin-top: 28px; }
.tsunagu-recruit__media { position: relative; margin: 0; }
.tsunagu-frame { position: relative; }
.tsunagu-frame::before, .tsunagu-frame::after { content: ""; position: absolute; width: 56px; height: 56px; pointer-events: none; z-index: 1; }
.tsunagu-frame::before { left: -12px; top: -12px; border-top: 2px solid var(--tsunagu-coral); border-left: 2px solid var(--tsunagu-coral); border-top-left-radius: var(--tsunagu-radius); }
.tsunagu-frame::after { right: -12px; bottom: -12px; border-bottom: 2px solid var(--tsunagu-teal); border-right: 2px solid var(--tsunagu-teal); border-bottom-right-radius: var(--tsunagu-radius); }
.tsunagu-recruit__media img { width: 100%; border-radius: var(--tsunagu-radius); aspect-ratio: 1672 / 941; }
.tsunagu-note { margin-top: 12px; font-size: 14px; color: var(--tsunagu-text-soft); text-align: right; }
@media (max-width: 900px) {
.tsunagu-recruit__inner { grid-template-columns: 1fr; }
.tsunagu-recruit__media { order: -1; margin: 12px 12px 0; }
/* スマートフォン表示のみ：小見出し・見出し・説明文・ボタンを中央揃えに（チェックリストは対象外） */
.tsunagu-recruit__inner > .tsunagu-reveal { text-align: center; }
.tsunagu-recruit .tsunagu-eyebrow--left { justify-content: center; }
}
@media (max-width: 480px) { .tsunagu-checks { grid-template-columns: 1fr; } }
/* ---------- contact band ---------- */
.tsunagu-contact { position: relative; background: var(--tsunagu-teal-light); padding-block: clamp(40px, 6vw, 64px); }
/* トップページ背景色調整：#FFF1EE。.tsunagu-contact は他ページ（about・careplan等）と共通の
テンプレートパーツのため、body.home（WordPressがフロントページに自動付与するクラス）で
トップページだけに絞って上書きする。他ページの色は変更しない。
※上のposition:relativeはトップページの波形（下のコメント参照）を配置するための指定で、
位置・サイズには影響しないため、他ページの表示は変わらない。 */
body.home .tsunagu-contact { background: #FFF1EE; }
/* トップページ セクション背景・波形調整：Instagramとの境界を、直線から浅い波形へ変更。他ページ共通の
.tsunagu-contactに影響しないよう body.home に限定。波の塗り色は「このセクション自身の背景色」
#FFF1EEにし、波形の帯をセクション上端の外側（直前のInstagram側）へ negative top ではみ出させて
配置する（他の4か所の波と同じ方式）。これにより波より上は実際のInstagramセクション（#FFFCF8）が
そのまま見え、波より下は完全にこのセクションの#FFF1EEになる。波の下端は1px重ねて隙間なし。
波の高さは --wave-h（clamp(24px,4.2vw,50px)）＝デスクトップ幅で約40〜50px、スマートフォン幅で
約24px。Instagramカードとの間の余白は上のtsunagu-insta側で確保している。見出し・ボタン・
Instagramカード本体（形・下部の曲線・丸い点）は無変更。元に戻す場合はこの::beforeブロックを削除する。 */
body.home .tsunagu-contact::before {
content: "";
position: absolute; left: 0; width: 100%;
--wave-h: clamp(24px, 4.2vw, 50px);
height: var(--wave-h);
top: calc(-1 * var(--wave-h) + 1px);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDcwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw3MCBMMTQ0MCw3MCBMMTQ0MCwzMiBDMTM0MC4wLDMyIDEzNDAuMCwxOCAxMjQwLDE4IEMxMTIwLjAsMTggMTEyMC4wLDQyIDEwMDAsNDIgQzg5MC4wLDQyIDg5MC4wLDIwIDc4MCwyMCBDNjYwLjAsMjAgNjYwLjAsNDAgNTQwLDQwIEM0MjAuMCw0MCA0MjAuMCwxOCAzMDAsMTggQzE5MC4wLDE4IDE5MC4wLDM2IDgwLDM2IEM0MC4wLDM2IDQwLjAsMjYgMCwyNiBaIiBmaWxsPSIjRkZGMUVFIi8+PC9zdmc+");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.tsunagu-contact__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; }
.tsunagu-contact__title { font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.5; }
.tsunagu-contact__title .tsunagu-c-coral { font-weight: 600; }
.tsunagu-contact__box {
display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; padding: 18px 24px 18px 28px;
background: #fff; border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow);
}
.tsunagu-tel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font-family: var(--tsunagu-font-sans); font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
.tsunagu-tel__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tsunagu-coral-deep); color: #fff; flex: none; }
.tsunagu-tel__icon svg { width: 20px; height: 20px; fill: currentColor; }
.tsunagu-contact__sep { width: 1px; align-self: stretch; background: var(--tsunagu-border); }
@media (max-width: 768px) {
.tsunagu-contact__inner { flex-direction: column; align-items: stretch; text-align: center; }
.tsunagu-contact__box { flex-direction: column; padding: 20px; }
.tsunagu-contact__sep { display: none; }
.tsunagu-contact__box .tsunagu-btn, .tsunagu-tel { width: 100%; justify-content: center; }
.tsunagu-contact__box .tsunagu-btn { min-height: 52px; }
}
/* ---------- instagram ---------- */
/* トップページ セクション背景・波形調整：背景色を白/オフホワイト#FFFCF8に新規指定（元は背景指定なし＝
ページ背景を継承）。
【再修正】以前の実装は、波の中に直前セクションの色を塗って透明部分から自色を透かす方式で、かつSVG
パスの生成に誤りがあったため、直線の帯の内側に波が別に浮いて見える二重の境界になっていた。パスを
描き直したうえで、実装方式も変更：波の塗り色は「このセクション自身の背景色」#FFFCF8にし、波形の帯を
セクション上端の外側（直前の「採用情報」側）へ negative top ではみ出させて配置する方式にした。
これにより、波より上は実際の直前セクション（淡い青緑#E6F6F5）がそのまま見え、波より下は完全に
このセクションの#FFFCF8になる。波の下端は1px分だけこのセクションの内側に重ねて、隙間ができない
ようにしている。波の高さは --wave-h（clamp(25px,4.2vw,50px)）＝デスクトップ幅で約40〜50px、
スマートフォン幅で約25px。padding-topは波が外側にはみ出す方式になったため0に戻した。他の3か所と
重ならない波形。カード本体（.tsunagu-insta__box）の背景色・装飾は無変更。元に戻す場合は下の2行
（background/::before）を `.tsunagu-insta { padding-top: 0; }` に戻す。
【追加】お問い合わせセクションとの境界にも波形を追加（下のtsunagu-contactのコメント参照）。
Instagramカードと波の間に適度な白い余白（スマートフォンで約32〜40px）を保つため、このセクション
下部の余白を共通値から clamp(64px, 9vw, 100px) に調整した。カードの位置・装飾は変更していない。 */
.tsunagu-insta { padding-top: 0; padding-bottom: clamp(64px, 9vw, 100px); background: #FFFCF8; }
.tsunagu-insta::before {
content: "";
position: absolute; left: 0; width: 100%;
--wave-h: clamp(25px, 4.2vw, 50px);
height: var(--wave-h);
top: calc(-1 * var(--wave-h) + 1px);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDcwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cGF0aCBkPSJNMCw3MCBMMTQ0MCw3MCBMMTQ0MCw0MCBDMTMzMC4wLDQwIDEzMzAuMCwyMiAxMjIwLDIyIEMxMTAwLjAsMjIgMTEwMC4wLDM2IDk4MCwzNiBDODUwLjAsMzYgODUwLjAsMTggNzIwLDE4IEM2MDAuMCwxOCA2MDAuMCwzOCA0ODAsMzggQzM2MC4wLDM4IDM2MC4wLDI0IDI0MCwyNCBDMTIwLjAsMjQgMTIwLjAsNDAgMCw0MCBaIiBmaWxsPSIjRkZGQ0Y4Ii8+PC9zdmc+");
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.tsunagu-insta__box {
position: relative; overflow: hidden; isolation: isolate; text-align: center;
padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 56px); border-radius: 20px; background: var(--tsunagu-yellow-light);
}
.tsunagu-insta__box::before { content: ""; position: absolute; z-index: -1; left: -50px; top: -60px; width: 220px; aspect-ratio: 1; border-radius: 50%; background: rgba(242,111,102,.16); }
.tsunagu-insta__box::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -70px; width: 240px; aspect-ratio: 1; border-radius: 50%; background: rgba(24,167,170,.16); }
.tsunagu-insta__deco { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: 56px; pointer-events: none; }
.tsunagu-insta__deco path { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.tsunagu-insta__icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: #fff; color: var(--tsunagu-coral-deep); box-shadow: var(--tsunagu-shadow); }
.tsunagu-insta__icon svg { width: 36px; height: 36px; }
.tsunagu-insta__title { font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.5; }
.tsunagu-insta__text { max-width: 560px; margin: 14px auto 0; }
.tsunagu-insta__handle { margin-top: 6px; font-weight: 700; color: var(--tsunagu-text-soft); }
.tsunagu-insta .tsunagu-btn { margin-top: 26px; }
@media (max-width: 640px) { .tsunagu-insta .tsunagu-btn { width: 100%; min-height: 52px; } }
.tsunagu-insta__feed {
max-width: 100%;
overflow-x: hidden;
margin: 28px auto 0;
padding: clamp(14px, 3vw, 26px);
border-radius: var(--tsunagu-radius);
background: var(--tsunagu-white);
box-shadow: var(--tsunagu-shadow);
}
.tsunagu-insta__feed img,
.tsunagu-insta__feed iframe,
.tsunagu-insta__feed video {
max-width: 100%;
height: auto;
}
/* ---------- footer ---------- */
.tsunagu-footer { background: #fff; border-top: 1px solid var(--tsunagu-border); padding-block: 36px; }
.tsunagu-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
/* 基本（〜1199px。中間幅ではQRコードがロゴ下に折り返すため、犬はロゴの隣に並べて重なりを避ける） */
.tsunagu-footer__brand { display: flex; align-items: flex-end; gap: 14px; }
.tsunagu-footer__logo { line-height: 0; }
.tsunagu-footer__logo img { height: 52px; width: auto; }
.tsunagu-footer__dog { width: 150px; height: auto; }
/* 1200px以上：折り返しが起きない1行レイアウトになるため、犬をロゴ下へ重ねて配置する
（ロゴ表示幅218px、犬表示幅150px → 中心を揃える移動量は (218-150)/2 ≒ 34px） */
@media (min-width: 1200px) {
.tsunagu-footer__brand { display: block; position: relative; line-height: 0; align-self: flex-start; margin-top: 64px; }
.tsunagu-footer__dog { position: absolute; top: 100%; left: 34px; margin-top: 8px; }
}
.tsunagu-footer__info { font-size: 15px; line-height: 1.9; color: var(--tsunagu-text-soft); }
.tsunagu-footer__info a { text-decoration: none; }
.tsunagu-footer__name { font-weight: 700; color: var(--tsunagu-text); }
.tsunagu-footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 6px; }
.tsunagu-footer__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--tsunagu-teal-deep); font-weight: 700; }
.tsunagu-footer__links svg { width: 20px; height: 20px; flex: none; }
@media (max-width: 768px) { .tsunagu-footer__inner { flex-direction: column; align-items: center; } }
@media (max-width: 768px) {
/* ロゴと犬を横一列に：ロゴをやや縮小し、幅320pxでも横スクロールが出ないようにする */
.tsunagu-footer__brand { display: flex; align-items: flex-end; gap: 12px; }
.tsunagu-footer__logo img { height: 40px; }
.tsunagu-footer__dog { position: static; margin-top: 0; width: 86px; height: auto; }
/* 住所・電話番号・リンク群を中央揃えに（PCの3カラム構成には影響しない） */
.tsunagu-footer__info { text-align: center; }
.tsunagu-footer__links { justify-content: center; }
}
/* ---------- sub pages（全子ページ共通） ----------
訪問看護＝コーラル、ケアプランセンター＝青緑。body に tsunagu-theme-care を付けると青緑になる。 */
.tsunagu-theme-care {
--tsunagu-accent: var(--tsunagu-teal);
--tsunagu-accent-deep: var(--tsunagu-teal-deep);
--tsunagu-accent-light: var(--tsunagu-teal-light);
}
.tsunagu-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tsunagu-pagehead { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); text-align: center; background: linear-gradient(180deg, #fff 0%, var(--tsunagu-bg) 100%); }
.tsunagu-pagehead::before { content: ""; position: absolute; width: clamp(120px, 16vw, 210px); aspect-ratio: 1; right: 4%; top: -30px; border-radius: 50%; background: rgba(24,167,170,.13); }
.tsunagu-pagehead::after { content: ""; position: absolute; width: clamp(70px, 9vw, 120px); aspect-ratio: 1; left: 6%; bottom: 20px; border-radius: 50%; background: rgba(242,111,102,.12); }
.tsunagu-theme-care .tsunagu-pagehead::before { background: rgba(217,170,56,.16); }
.tsunagu-theme-care .tsunagu-pagehead::after { background: rgba(24,167,170,.14); }
.tsunagu-pagehead .tsunagu-container { position: relative; z-index: 1; }
.tsunagu-pagehead__title { font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(28px, 4vw, 44px); line-height: 1.5; margin-top: 14px; }
.tsunagu-pagehead__lead { margin: 14px auto 0; max-width: 680px; color: var(--tsunagu-text-soft); }
.tsunagu-breadcrumb { font-size: 14px; color: var(--tsunagu-text-soft); }
.tsunagu-breadcrumb ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none; }
.tsunagu-breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--tsunagu-text-soft); opacity: .5; }
.tsunagu-breadcrumb a { text-decoration: none; color: var(--tsunagu-teal-deep); font-weight: 500; }
.tsunagu-section--sub { padding-block: clamp(36px, 5.5vw, 68px); }
.tsunagu-section--tint { background: linear-gradient(180deg, var(--tsunagu-bg), #fff 40%, var(--tsunagu-bg)); }
.tsunagu-wrap { max-width: 960px; margin-inline: auto; }
.tsunagu-stack > * + * { margin-top: clamp(32px, 5vw, 56px); }
.tsunagu-anchor { scroll-margin-top: calc(var(--tsunagu-header-h) + 16px); }
.tsunagu-h2--sub { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(25px, 3vw, 34px); line-height: 1.5; }
.tsunagu-h2--sub::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--tsunagu-accent); }
.tsunagu-h2--center { text-align: center; }
.tsunagu-h2--center::after { margin-inline: auto; }
.tsunagu-lead { margin-top: 16px; color: var(--tsunagu-text-soft); max-width: 46em; }
.tsunagu-h2--center + .tsunagu-lead { margin-inline: auto; text-align: center; }
.tsunagu-sub-body { margin-top: clamp(22px, 3vw, 32px); }
/* cards */
.tsunagu-grid-2, .tsunagu-grid-3 { align-items: stretch; }
.tsunagu-card {
background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius);
padding: 28px 30px; box-shadow: var(--tsunagu-shadow);
}
.tsunagu-card__title { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 21px; line-height: 1.5; }
.tsunagu-card__title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--tsunagu-accent); vertical-align: 1px; }
.tsunagu-card__text { margin-top: 10px; color: var(--tsunagu-text-soft); }
.tsunagu-card__tag { display: inline-block; margin-bottom: 10px; padding: 2px 14px; border-radius: var(--tsunagu-radius-pill); background: var(--tsunagu-accent-light); color: var(--tsunagu-accent-deep); font-size: 14px; font-weight: 700; }
.tsunagu-card--accent { background: var(--tsunagu-accent-light); border-color: transparent; box-shadow: none; }
.tsunagu-list { margin-top: 12px; display: grid; gap: 6px; }
.tsunagu-list li { position: relative; padding-left: 22px; line-height: 1.75; }
.tsunagu-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 8px; height: 8px; border-radius: 50%; background: var(--tsunagu-accent); }
.tsunagu-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
@media (max-width: 720px) { .tsunagu-list--cols { grid-template-columns: minmax(0, 1fr); } .tsunagu-list--cols li { overflow-wrap: break-word; } }
.tsunagu-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.tsunagu-split--rev > :first-child { order: 2; }
@media (max-width: 900px) { .tsunagu-split { grid-template-columns: 1fr; } .tsunagu-split--rev > :first-child { order: 0; } }
.tsunagu-figure { position: relative; margin: 0; }
.tsunagu-figure .tsunagu-crop-box, .tsunagu-figure > img { border-radius: var(--tsunagu-radius); }
.tsunagu-crop-box { position: relative; overflow: hidden; aspect-ratio: 585 / 410; background: #fff; }
.tsunagu-crop-box .tsunagu-crop--consult { width: 241.7%; left: -136.75%; top: -81.7%; }
/* concept quote */
.tsunagu-quote { position: relative; padding: clamp(28px, 4vw, 44px); border-radius: var(--tsunagu-radius); background: var(--tsunagu-accent-light); text-align: center; overflow: hidden; isolation: isolate; }
.tsunagu-quote::before { content: ""; position: absolute; z-index: -1; right: -40px; top: -50px; width: 180px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.6); }
.tsunagu-quote p { font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.9; }
/* company table */
.tsunagu-dl { display: grid; grid-template-columns: 9em 1fr; gap: 0; margin: 0; }
.tsunagu-dl dt, .tsunagu-dl dd { padding: 16px 4px; border-top: 1px solid var(--tsunagu-border); margin: 0; }
.tsunagu-dl dt { font-weight: 700; }
.tsunagu-dl dt:first-of-type, .tsunagu-dl dt:first-of-type + dd { border-top: 0; }
.tsunagu-dl a { color: var(--tsunagu-teal-deep); font-weight: 700; text-decoration: none; }
@media (max-width: 600px) { .tsunagu-dl { grid-template-columns: 1fr; } .tsunagu-dl dt { padding-bottom: 0; } .tsunagu-dl dd { border-top: 0; padding-top: 2px; } .tsunagu-dl dt:first-of-type + dd { } }
.tsunagu-price { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0; }
.tsunagu-price dt { font-weight: 700; }
.tsunagu-price dd { margin: 0; font-weight: 700; color: var(--tsunagu-accent-deep); }
@media (max-width: 520px) { .tsunagu-price { grid-template-columns: 1fr; gap: 0; } .tsunagu-price dd { margin-bottom: 12px; } }
/* area chips */
.tsunagu-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tsunagu-chips li { padding: 8px 20px; border-radius: var(--tsunagu-radius-pill); background: var(--tsunagu-accent-light); color: var(--tsunagu-text); font-weight: 700; }
.tsunagu-note-line { margin-top: 14px; color: var(--tsunagu-text-soft); font-size: 15px; }
/* steps (サービスの流れ) */
.tsunagu-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.tsunagu-steps li { position: relative; counter-increment: step; padding: 56px 22px 24px; background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow); }
.tsunagu-steps li::before { content: counter(step); position: absolute; left: 22px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tsunagu-accent-deep); color: #fff; font-weight: 700; }
.tsunagu-steps h3 { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 20px; line-height: 1.5; }
.tsunagu-steps p { margin-top: 6px; color: var(--tsunagu-text-soft); font-size: 16px; }
@media (max-width: 1024px) { .tsunagu-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tsunagu-steps { grid-template-columns: 1fr; } }
/* staff */
.tsunagu-staff__role { margin-top: 2px; font-weight: 700; color: var(--tsunagu-accent-deep); }
/* worries */
.tsunagu-worries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.tsunagu-worries li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius-sm); font-weight: 500; line-height: 1.7; }
.tsunagu-worries li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tsunagu-accent); }
@media (max-width: 720px) { .tsunagu-worries { grid-template-columns: 1fr; } }
/* TODO note (compact) */
.tsunagu-todo {
margin-top: 20px; padding: 14px 18px; border: 1.5px dashed var(--tsunagu-yellow); border-radius: var(--tsunagu-radius-sm);
background: var(--tsunagu-yellow-light); font-size: 15px; color: var(--tsunagu-text);
}
.tsunagu-cta-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.tsunagu-cta-row--center { justify-content: center; }
@media (max-width: 640px) { .tsunagu-cta-row .tsunagu-btn { width: 100%; min-height: 52px; } }
/* 電話リンク（本文内） */
.tsunagu-tel--block { font-size: clamp(28px, 4vw, 40px); }
/* pamphlet detail page */
.tsunagu-docs { display: grid; gap: clamp(28px, 4vw, 44px); }
.tsunagu-doc { padding: clamp(22px, 3.4vw, 36px); background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow); }
.tsunagu-doc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.tsunagu-doc__title { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.5; }
.tsunagu-doc__title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; border-radius: 50%; background: var(--tsunagu-accent); vertical-align: 2px; }
.tsunagu-doc__desc { flex-basis: 100%; color: var(--tsunagu-text-soft); }
.tsunagu-doc__view { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius-sm); background: #fff; cursor: zoom-in; overflow: visible; }
.tsunagu-doc__view img { width: 100%; max-width: 100%; height: auto; object-fit: contain; opacity: 1; filter: none; border-radius: var(--tsunagu-radius-sm) var(--tsunagu-radius-sm) 0 0; }
.tsunagu-doc--portrait .tsunagu-doc__view { max-width: 640px; margin-inline: auto; }
/* 「クリックで拡大」は画像の上に重ねず、画像の下に置く */
.tsunagu-doc__hint { display: block; padding: 10px 16px; background: var(--tsunagu-accent-light); color: var(--tsunagu-accent-deep); font-size: 15px; font-weight: 700; text-align: center; pointer-events: none; border-radius: 0 0 var(--tsunagu-radius-sm) var(--tsunagu-radius-sm); }
/* lightbox */
.tsunagu-noscroll { overflow: hidden; }
.tsunagu-lightbox { position: fixed; inset: 0; z-index: 300; display: none; flex-direction: column; background: rgba(40,34,32,.9); }
.tsunagu-lightbox.is-open { display: flex; }
.tsunagu-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: #fff; }
.tsunagu-lightbox__title { font-weight: 700; font-size: 15px; line-height: 1.4; }
.tsunagu-lightbox__actions { display: flex; gap: 10px; flex: none; }
.tsunagu-lightbox__btn { min-height: 44px; padding: 0 18px; border: 1.5px solid #fff; border-radius: var(--tsunagu-radius-pill); background: transparent; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.tsunagu-lightbox__btn:hover { background: rgba(255,255,255,.16); }
.tsunagu-lightbox__btn--close { background: #fff; color: var(--tsunagu-text); }
.tsunagu-lightbox__btn--close:hover { background: var(--tsunagu-coral-light); }
.tsunagu-lightbox__stage { flex: 1; min-height: 0; display: flex; overflow: auto; padding: 0 3vw 16px; }
.tsunagu-lightbox__img { margin: auto; max-width: 94vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; opacity: 1; filter: none; background: #fff; }
.tsunagu-lightbox.is-zoomed .tsunagu-lightbox__img { max-width: none; max-height: none; width: var(--tsunagu-zoom-w, auto); }
.tsunagu-lightbox :focus-visible { outline-color: #fff; }
@media (max-width: 520px) { .tsunagu-lightbox__title { display: none; } .tsunagu-lightbox__bar { justify-content: flex-end; } }
/* ---------- reveal (フェードイン) ----------
待機状態（透明）は main.js が正常に動いたあとに html へ tsunagu-anim を付けたときだけ有効。
JavaScriptが無効・読み込み失敗・処理エラーの場合は、最初から全て表示される。 */
.tsunagu-anim .tsunagu-reveal {
opacity: 0; transform: translateY(20px);
transition: opacity .7s ease, transform .7s ease; transition-delay: var(--tsunagu-delay, 0s);
}
.tsunagu-anim .tsunagu-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.tsunagu-anim .tsunagu-reveal { opacity: 1; transform: none; transition: none; }
:where(.tsunagu-page) *, :where(.tsunagu-page) *::before, :where(.tsunagu-page) *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* ---------- 追加：ページ内リンクのチップ ---------- */
.tsunagu-chips--center { justify-content: center; }
.tsunagu-chips a { display: block; text-decoration: none; }
.tsunagu-chips li:has(> a) { padding: 0; }
.tsunagu-chips li > a { padding: 8px 20px; min-height: 44px; display: flex; align-items: center; border-radius: var(--tsunagu-radius-pill); color: var(--tsunagu-text); font-weight: 700; }
.tsunagu-chips li > a:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--tsunagu-accent); }
/* ================= 追加：お問い合わせ（2事業所の電話） ================= */
.tsunagu-contact__title { text-align: center; }
.tsunagu-ccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; max-width: 900px; margin: 28px auto 0; }
.tsunagu-ccard {
position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
padding: 26px 22px 24px; background: #fff; border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow);
border-top: 6px solid var(--acc);
}
.tsunagu-ccard--coral { --acc: var(--tsunagu-coral); --acc-deep: var(--tsunagu-coral-deep); --acc-light: var(--tsunagu-coral-light); }
.tsunagu-ccard--teal { --acc: var(--tsunagu-teal); --acc-deep: var(--tsunagu-teal-deep); --acc-light: var(--tsunagu-teal-light); }
.tsunagu-ccard::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 110px; aspect-ratio: 1; border-radius: 50%; background: var(--acc); opacity: .12; pointer-events: none; }
.tsunagu-ccard__label { display: inline-block; padding: 4px 16px; border-radius: 999px; background: var(--acc-light); color: var(--acc-deep); font-weight: 700; font-size: 15px; line-height: 1.6; }
.tsunagu-ccard__name { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; margin-top: 4px; }
.tsunagu-ccard .tsunagu-tel { margin-top: auto; padding-top: 8px; position: relative; z-index: 1; }
.tsunagu-tel--coral .tsunagu-tel__icon { background: var(--tsunagu-coral-deep); }
.tsunagu-tel--teal .tsunagu-tel__icon { background: var(--tsunagu-teal-deep); }
.tsunagu-tel--coral { color: var(--tsunagu-coral-deep); }
.tsunagu-tel--teal { color: var(--tsunagu-teal-deep); }
.tsunagu-contact__more { margin-top: 26px; text-align: center; }
@media (max-width: 720px) {
.tsunagu-ccards { grid-template-columns: 1fr; }
.tsunagu-contact__more .tsunagu-btn { width: 100%; min-height: 52px; }
.tsunagu-ccard .tsunagu-tel { width: 100%; justify-content: center; min-height: 52px; }
}
.tsunagu-footer__care { display: block; margin-top: 8px; }
/* ================= 追加：Instagram カルーセル（イメージ表示） ================= */
.tsunagu-carousel { position: relative; margin: 28px calc(-1 * clamp(20px, 5vw, 56px)) 0; }
.tsunagu-carousel__viewport {
overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; padding: 6px 0 10px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.tsunagu-carousel__viewport::-webkit-scrollbar { display: none; }
.tsunagu-carousel.is-auto .tsunagu-carousel__viewport { scroll-snap-type: none; }
.tsunagu-carousel__track { display: flex; gap: 16px; width: max-content; padding-inline: clamp(20px, 5vw, 56px); margin: 0; list-style: none; }
.tsunagu-igslide { flex: none; width: clamp(200px, 22vw, 250px); scroll-snap-align: start; }
.tsunagu-igcard { position: relative; display: block; text-decoration: none; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--tsunagu-shadow); border: 4px solid #fff; transition: transform .25s ease; }
.tsunagu-igcard:hover, .tsunagu-igcard:focus-visible { transform: translateY(-3px); }
.tsunagu-igcard__pic { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--tsunagu-bg); }
.tsunagu-igimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tsunagu-igcard__badge { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--tsunagu-coral-deep); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.tsunagu-igcard__badge svg { width: 20px; height: 20px; }
.tsunagu-crop--bp { width: 1052.6%; left: -734.2%; top: -265.8%; } /* 旧内側画像（現在未使用）：血圧測定の写真 */
.tsunagu-crop--rehab { width: 1063.8%; left: -404.3%; top: -615.4%; } /* 旧内側画像（現在未使用）：在宅リハビリの写真 */
.tsunagu-crop--consultsq { width: 344.9%; left: -219.5%; top: -81.7%; } /* flyer-careplan.png：相談の写真 */
.tsunagu-carousel__ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.tsunagu-carousel__ctrl[hidden] { display: none; }
.tsunagu-carousel__btn {
display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 16px; border: 2px solid var(--tsunagu-coral-deep); border-radius: 999px;
background: #fff; color: var(--tsunagu-coral-deep); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.tsunagu-carousel__btn svg { width: 22px; height: 22px; }
.tsunagu-carousel__btn:hover { background: var(--tsunagu-coral-deep); color: #fff; }
.tsunagu-insta .tsunagu-carousel + .tsunagu-insta__note { margin-top: 12px; font-size: 14px; color: var(--tsunagu-text-soft); }
.tsunagu-insta__note { max-width: 640px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .tsunagu-igcard { transition: none; } .tsunagu-carousel__viewport { scroll-behavior: auto; } }
.tsunagu-igcard__pic--round { border-radius: 50%; margin: 6px; } /* 元写真が丸形のため、丸のまま表示 */
/* ================= 追加：情報公開ページ ================= */
.tsunagu-docitems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; margin: 0; padding: 0; list-style: none; }
.tsunagu-docitem {
position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 20px; padding: 26px 26px 26px 24px;
background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow);
}
.tsunagu-docitem::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 120px; aspect-ratio: 1; border-radius: 50%; background: var(--tsunagu-coral); opacity: .10; pointer-events: none; }
.tsunagu-docitem__icon { flex: none; width: 60px; color: var(--tsunagu-coral-deep); }
.tsunagu-docitem__icon svg { display: block; width: 100%; height: auto; }
.tsunagu-docitem__body { position: relative; z-index: 1; min-width: 0; }
.tsunagu-docitem__title { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; }
.tsunagu-docitem__meta { margin-top: 6px; font-size: 15px; color: var(--tsunagu-text-soft); }
.tsunagu-docitem__action { margin-top: 16px; }
.tsunagu-docitem--open { grid-column: 1 / -1; border-top: 6px solid var(--tsunagu-coral); }
.tsunagu-docitem--soon { background: rgba(255,255,255,.7); border-style: dashed; box-shadow: none; }
.tsunagu-docitem--soon::after { background: var(--tsunagu-teal); }
.tsunagu-docitem--soon .tsunagu-docitem__icon { color: var(--tsunagu-teal-deep); opacity: .55; }
.tsunagu-docitem__soon { display: inline-block; padding: 4px 16px; border-radius: 999px; background: var(--tsunagu-teal-light); color: var(--tsunagu-teal-deep); font-size: 15px; font-weight: 700; }
@media (max-width: 720px) {
.tsunagu-docitems { grid-template-columns: 1fr; }
.tsunagu-docitem { gap: 16px; padding: 20px 18px; }
.tsunagu-docitem__icon { width: 48px; }
.tsunagu-docitem__action .tsunagu-btn { width: 100%; min-height: 52px; }
}
.tsunagu-table-wrap { overflow-x: auto; max-width: 100%; }
.tsunagu-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius-sm); }
.tsunagu-table caption { padding: 0 0 10px; text-align: left; font-weight: 700; }
.tsunagu-table th, .tsunagu-table td { padding: 14px 16px; border-top: 1px solid var(--tsunagu-border); text-align: left; vertical-align: top; }
.tsunagu-table thead th { background: var(--tsunagu-coral-light); border-top: 0; font-weight: 700; }
.tsunagu-table tbody th { font-weight: 700; }
.tsunagu-table td { white-space: nowrap; }
.tsunagu-source { margin-top: 12px; font-size: 14px; color: var(--tsunagu-text-soft); }
@media (max-width: 480px) { .tsunagu-table th, .tsunagu-table td { padding: 12px 10px; font-size: 15px; } }
/* ================= 追加：フッターの公式LINE ================= */
.tsunagu-footer__line { text-align: center; width: 100%; max-width: 232px; padding: 18px 16px 16px; background: var(--tsunagu-bg); border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); }
.tsunagu-footer__line-title { font-family: var(--tsunagu-font-sans); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--tsunagu-teal-deep); }
.tsunagu-footer__line-text { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--tsunagu-text-soft); }
/* QRコードは加工しない：角丸・切り抜き・縦横比の変更なし。白い余白も含めて正方形のまま */
.tsunagu-footer__qr { display: block; width: 176px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 12px auto 8px; border: 0; border-radius: 0; background: #fff; object-fit: contain; }
.tsunagu-footer__line-name { font-size: 13px; line-height: 1.6; color: var(--tsunagu-text-soft); }
@media (max-width: 768px) { .tsunagu-footer__line { max-width: 260px; } .tsunagu-footer__qr { width: min(100%, 200px); } }
.tsunagu-docitems { margin-top: 28px; }
/* 事業カード：文章ブロックを上端揃えにして、左右のロゴ枠の位置をそろえる（写真の位置は変更なし） */
.tsunagu-biz__body { align-self: start; }
@media (max-width: 1024px) { .tsunagu-biz__body { align-self: auto; } }
/* ================= 追加：代表メッセージ（about.html） ================= */
.tsunagu-message { max-width: 920px; margin-inline: auto; }
.tsunagu-message__panel {
position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(22px, 3vw, 32px);
display: flow-root; /* PC：写真は本文の左側に浮かせ、本文が写真の下にも回り込む（写真の下に大きな空白を作らない） */
padding: clamp(28px, 4.5vw, 52px) clamp(22px, 4.5vw, 56px) clamp(40px, 5vw, 60px);
background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow);
}
/* 淡い半透明の円（控えめ） */
.tsunagu-message__panel::before { content: ""; position: absolute; z-index: -1; right: -50px; top: -60px; width: 200px; aspect-ratio: 1; border-radius: 50%; background: rgba(24,167,170,.10); }
/* コーラルと青緑の細い曲線と、曲線上の小さな丸（下端に細く） */
.tsunagu-message__panel::after {
content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24 C250 4 500 40 750 22 S950 12 1000 20' fill='none' stroke='%23f26f66' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 31 C260 14 520 42 760 30 S960 22 1000 28' fill='none' stroke='%2318a7aa' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tsunagu-message__photo { position: relative; float: left; margin: 8px clamp(28px, 4vw, 44px) 12px 8px; width: 280px; max-width: 100%; text-align: center; }
/* 淡いコーラルの細い枠とコーナーフレーム。写真は切り抜かず、縦横比のまま全体を表示（拡大しない） */
.tsunagu-message__frame { position: relative; display: block; padding: 6px; border: 1px solid var(--tsunagu-coral-light); border-radius: 6px; background: #fff; line-height: 0; }
.tsunagu-message__frame::before, .tsunagu-message__frame::after { content: ""; position: absolute; width: 34px; height: 34px; pointer-events: none; }
.tsunagu-message__frame::before { left: -8px; top: -8px; border-left: 2px solid var(--tsunagu-coral); border-top: 2px solid var(--tsunagu-coral); border-top-left-radius: 8px; }
.tsunagu-message__frame::after { right: -8px; bottom: -8px; border-right: 2px solid var(--tsunagu-teal); border-bottom: 2px solid var(--tsunagu-teal); border-bottom-right-radius: 8px; }
.tsunagu-message__photo img { display: block; width: 100%; max-width: 300px; height: auto; margin-inline: auto; object-fit: contain; filter: none; opacity: 1; }
.tsunagu-message__photo figcaption { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--tsunagu-text-soft); }
.tsunagu-message__body { max-width: none; }
.tsunagu-message__body p { font-family: var(--tsunagu-font-sans); font-weight: 400; font-size: 17px; line-height: 2.05; text-align: left; }
.tsunagu-message__body p + p { margin-top: 1.1em; }
.tsunagu-message__body p.tsunagu-message__sign { margin-top: 1.8em; text-align: right; font-family: var(--tsunagu-font-sans); font-weight: 700; font-style: normal; line-height: 1.9; }
@media (max-width: 900px) {
/* タブレット・スマホ：1列。写真は本文の上に中央配置 */
.tsunagu-message__photo { float: none; margin: 8px auto 26px; }
.tsunagu-message__body { max-width: 34em; margin-inline: auto; }
}
@media (max-width: 600px) {
/* 行の長さを少し確保して、文節ごとの折り返しでも右端がそろいやすくする（左右の余白は同じ） */
.tsunagu-message__panel { padding-inline: 18px; }
.tsunagu-message__body p { font-size: 15.5px; line-height: 2; }
}
/* 会社概要ページの事業カード：トップページと同じロゴ枠（.tsunagu-biz__logo）を使い、
ロゴの上端・事業所名・説明文・ボタンの位置を左右のカードでそろえる */
.tsunagu-card--biz { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.tsunagu-card--biz .tsunagu-biz__logo { margin-bottom: 18px; }
.tsunagu-card--biz .tsunagu-cta-row { margin-top: auto; padding-top: 22px; }
.tsunagu-card--biz .tsunagu-card__text { margin-bottom: 0; }
.tsunagu-card--biz .tsunagu-card__title { display: flex; align-items: flex-start; overflow-wrap: anywhere; }
.tsunagu-card--biz .tsunagu-card__title::before { flex: none; margin-top: .6em; }
/* 住所：「サンライズ河合102」を途中で折り返さない */
.tsunagu-nowrap { white-space: nowrap; }
/* ごく狭い画面（〜360px）：ロゴとメニューボタンを1行に収める */
@media (max-width: 360px) {
.tsunagu-header__inner { flex-wrap: nowrap; gap: 8px; }
.tsunagu-header__logo img { height: 38px; }
.tsunagu-js .tsunagu-menu-toggle { padding: 0 10px; gap: 6px; }
}
/* ---------- プライバシーポリシー（長文ページ） ---------- */
.tsunagu-legal { max-width: 800px; margin-inline: auto; font-family: var(--tsunagu-font-sans); font-size: 17px; line-height: 2; color: var(--tsunagu-text); }
.tsunagu-legal__intro p + p { margin-top: 1em; }
.tsunagu-legal__sec { margin-top: clamp(36px, 5vw, 52px); }
.tsunagu-legal__sec h2 {
font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.6;
padding: 2px 0 2px 14px; border-left: 4px solid var(--tsunagu-coral);
}
.tsunagu-legal__sec > :not(h2) { margin-top: 14px; }
.tsunagu-legal__sec > h2 + * { margin-top: 18px; }
.tsunagu-legal .tsunagu-list { margin-top: 14px; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.tsunagu-legal .tsunagu-list li { line-height: 1.9; overflow-wrap: anywhere; }
.tsunagu-legal__contact {
display: block; padding: 20px 24px; background: #fff; border: 1px solid var(--tsunagu-border); border-left: 4px solid var(--tsunagu-teal);
border-radius: 12px; line-height: 1.95; overflow-wrap: anywhere;
}
.tsunagu-legal__org { font-weight: 700; }
.tsunagu-legal__contact a { color: var(--tsunagu-teal-deep); font-weight: 700; }
.tsunagu-legal__operator { line-height: 1.95; }
@media (max-width: 720px) {
.tsunagu-legal { font-size: 16px; line-height: 1.95; }
.tsunagu-legal__contact { padding: 16px 18px; }
}
/* フッターリンク：現在のページを示す */
.tsunagu-footer__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* ---------- 企業理念・行動指針 ---------- */
.tsunagu-philo {
position: relative; overflow: hidden; text-align: center; max-width: 760px; margin: clamp(22px, 3vw, 32px) auto 0;
padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px); background: #fff; border: 1px solid var(--tsunagu-border); border-radius: 20px;
}
.tsunagu-philo::before { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; aspect-ratio: 1; border-radius: 50%; background: rgba(217,170,56,.14); pointer-events: none; }
.tsunagu-philo::after { content: ""; position: absolute; left: -30px; bottom: -34px; width: 100px; aspect-ratio: 1; border-radius: 50%; background: rgba(24,167,170,.10); pointer-events: none; }
.tsunagu-philo > * { position: relative; z-index: 1; }
.tsunagu-philo__main { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.5; letter-spacing: .08em; color: var(--tsunagu-text); }
.tsunagu-philo__catch { margin-top: 10px; font-family: var(--tsunagu-font-sans); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.8; color: var(--tsunagu-text-soft); text-wrap: balance; }
.tsunagu-philo__deco { display: block; width: 200px; max-width: 60%; height: 20px; margin: 18px auto 0; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.tsunagu-philo__sub { margin: clamp(28px, 4vw, 40px) auto 0; text-align: center; font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 24px); }
.tsunagu-guides { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; max-width: 900px; margin: 20px auto 0; }
.tsunagu-guide { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: #fff; border: 1px solid var(--tsunagu-border); border-radius: 14px; }
.tsunagu-guide__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; font-family: var(--tsunagu-font-sans); font-size: 32px; font-weight: 700; line-height: 1; color: var(--tsunagu-coral-deep); }
.tsunagu-guide:nth-child(even) .tsunagu-guide__num { color: var(--tsunagu-teal-deep); }
.tsunagu-guide__text { font-size: 17px; line-height: 1.75; font-weight: 500; overflow-wrap: anywhere; }
.tsunagu-section--philo { padding-top: clamp(8px, 2vw, 24px); }
@media (max-width: 720px) {
.tsunagu-guides { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tsunagu-guide { padding: 16px 18px; }
}
/* トップページの企業理念 */
/* トップページ背景色調整：#FCFAF7（「私たちについて」と同色にして一続きの帯にする。元は背景指定なし＝ページ背景を継承） */
.tsunagu-homephilo { padding-block: clamp(20px, 3vw, 40px); background: #FCFAF7; }
.tsunagu-philo--home { margin-top: 0; max-width: 680px; }
.tsunagu-homephilo__title { font-family: var(--tsunagu-font-sans); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--tsunagu-teal-deep); margin-bottom: 8px; }
/* ---------- 会社概要：企業理念（1列のシンプル表示） ---------- */
.tsunagu-pl { text-align: center; margin-top: clamp(22px, 3vw, 32px); }
.tsunagu-pl__main { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.5; letter-spacing: .08em; }
.tsunagu-pl__catch { margin-top: 8px; font-family: var(--tsunagu-font-sans); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.8; color: var(--tsunagu-text-soft); text-wrap: balance; }
.tsunagu-pl__line { display: block; width: 72px; height: 3px; margin: 22px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--tsunagu-coral) 0 50%, var(--tsunagu-teal) 50% 100%); }
.tsunagu-pl__sub { margin-top: 28px; font-family: var(--tsunagu-font-sans); font-size: 16px; font-weight: 700; letter-spacing: .12em; color: var(--tsunagu-text-soft); }
.tsunagu-pl__guides { list-style: none; padding: 0; width: fit-content; max-width: 100%; margin: 14px auto 0; display: grid; gap: 6px; }
.tsunagu-pl__guides .tsunagu-guide { display: flex; align-items: baseline; gap: 12px; padding: 0; background: none; border: 0; border-radius: 0; }
.tsunagu-pl__guides .tsunagu-guide__num { width: auto; display: inline; font-size: 22px; line-height: 1.6; }
.tsunagu-pl__guides .tsunagu-guide__text { font-family: var(--tsunagu-font-sans); font-size: 18px; line-height: 1.9; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 720px) { .tsunagu-pl__guides .tsunagu-guide__text { font-size: 17px; } }
/* =====================================================================
採用ページ（改修）：募集職種・大切にしていること・連携・専門性・働きやすい環境・1日の働き方・教育・写真スライダー・求める人物像・見学
===================================================================== */
.tsunagu-rc-intro { display: grid; gap: 1.1em; max-width: 44em; margin: 0 auto clamp(36px, 5vw, 56px); position: relative; }
.tsunagu-rc-intro p { text-wrap: pretty; line-height: 2; color: var(--tsunagu-text); overflow-wrap: break-word; }
.tsunagu-rc-intro p:first-child { font-size: clamp(16px, 1.8vw, 18px); }
/* 募集案内文の右側／下：看板犬の装飾イラスト（#positions の冒頭文にのみ限定） */
.tsunagu-rc-intro__dog { display: block; height: auto; pointer-events: none; }
.tsunagu-rc-intro__dog--mobile { display: none; }
/* PC（1200px以上）：文章ブロックの右側の余白に、文章の縦中央と揃えて配置（右端に寄り過ぎないよう間隔を確保） */
.tsunagu-rc-intro__dog--pc {
position: absolute; top: 50%; left: 100%; transform: translateY(-50%);
margin-left: clamp(28px, 4vw, 56px); width: 165px;
}
/* タブレット・スマートフォン（1199px以下）：文章の横には置かず、最後の文章の下へ右寄せで配置 */
@media (max-width: 1199px) {
.tsunagu-rc-intro__dog--pc { display: none; }
.tsunagu-rc-intro__dog--mobile { display: block; justify-self: end; width: 100px; }
}
@media (max-width: 767px) {
.tsunagu-rc-intro__dog--mobile { width: 90px; }
}
/* 採用ページ 冒頭紹介文（#positions内、募集職種の前の3段落）：スマートフォン表示（767px以下）のみ
中央揃えに変更。PC・タブレット（768px以上）の配置・文字サイズ・余白は現状維持。
左右の余白：コンテナ既存の余白(20px)にこの8pxを加えて合計28px以上を確保。
段落間の余白：gapを1.1em(≒17.6px)から26pxへ広げ、24〜28pxの範囲にした。
行間：既存のline-height:2を維持（1.9〜2の範囲内）。文字サイズ：16px以上を維持（変更なし）。
「理学療法士（PT）」等の分断防止は、テーマ全体に既に設定されている
word-break:auto-phrase（.tsunagu-page）により「（PT）」「（OT）」「（ST）」のまとまりが
保たれ、区切りの「・」の位置で改行される（実機・レンダリング確認済み。word-break:keep-allは
スペースのない日本語文で改行できず横スクロールが発生したため採用しなかった）。
HTMLへのbr追加はしていない。犬のイラスト（.tsunagu-rc-intro__dog--mobile）は従来どおり
最後の行に右寄せで表示され、文章の行とは別グリッド行のため重ならない。募集条件・箇条書き・
カード内の文章（.tsunagu-pos等）は対象外で変更していない。 */
@media (max-width: 767px) {
.tsunagu-rc-intro { padding-inline: 8px; gap: 26px; }
.tsunagu-rc-intro p { text-align: center; }
}
.tsunagu-rc-prose { display: grid; gap: 1em; max-width: 42em; margin-inline: auto; }
.tsunagu-rc-prose p { text-wrap: pretty; line-height: 2; color: var(--tsunagu-text); overflow-wrap: break-word; }
.tsunagu-rc-prose .tsunagu-note-line { margin-top: 0; }
/* 採用ページ「TSUNAGUが大切にしていること」（#philosophy）：スマートフォン表示（767px以下）のみ
紹介文2段落を中央揃えに変更。見出し（.tsunagu-h2--center）と見出し下のコーラル線（::after）は
既存のCSSで元々PC・スマホともに中央揃え済みのため変更不要。強調文字『一人で抱え込まないこと』
（.tsunagu-rc-em）の色は変更していない。左右の余白はコンテナ既存の20pxにこの8pxを加えて
合計28px以上を確保し、段落自体の最大幅を340pxにして左右均等に中央配置。段落間はgapを
1em(≒16px)から26pxへ広げ、24〜28pxの範囲にした。行間は既存のline-height:2を維持
（1.9〜2の範囲内）。HTMLへのbr追加はしていない。「TSUNAGUならではの専門性」等、他のセクションの
一覧・カード（.tsunagu-values、.tsunagu-quote等）は対象外で変更していない。同じ.tsunagu-rc-prose
クラスを使う「1日の働き方」（#day）は左揃えのまま維持するため、#philosophyに限定して指定している。
PC・タブレット（768px以上）の配置は現状維持。 */
@media (max-width: 767px) {
#philosophy .tsunagu-rc-prose { gap: 26px; }
#philosophy .tsunagu-rc-prose p {
text-align: center;
max-width: 340px;
margin-inline: auto;
padding-inline: 8px;
}
}
.tsunagu-rc-em { font-weight: 700; color: var(--tsunagu-coral-deep); }
.tsunagu-rc-quote { max-width: 860px; margin: clamp(26px, 4vw, 40px) auto 0; }
/* 採用ページの囲み文は本文扱い（ゴシック体）。他ページの .tsunagu-quote には影響させない */
.tsunagu-rc-quote p { font-family: var(--tsunagu-font-sans); font-weight: 500; font-size: clamp(17px, 2vw, 21px); line-height: 2; }
.tsunagu-rc-more { margin-top: 22px; text-align: center; }
/* 1. 募集職種 */
.tsunagu-pos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.tsunagu-pos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-width: 0; padding: 28px 16px 26px; text-align: center; background: #fff; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow); }
.tsunagu-pos__badge { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; font-weight: 700; font-size: 20px; letter-spacing: .04em; line-height: 1.1; text-align: center; }
.tsunagu-pos__badge svg { width: 34px; height: 34px; fill: currentColor; }
.tsunagu-pos--coral .tsunagu-pos__badge, .tsunagu-pos__badge--coral { background: var(--tsunagu-coral-light); color: var(--tsunagu-coral-deep); }
.tsunagu-pos--teal .tsunagu-pos__badge, .tsunagu-pos__badge--teal { background: var(--tsunagu-teal-light); color: var(--tsunagu-teal-deep); }
.tsunagu-pos--yellow .tsunagu-pos__badge { background: var(--tsunagu-yellow-light); color: #7d5d0c; }
.tsunagu-pos__name { margin: 0; font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 19px; line-height: 1.55; overflow-wrap: break-word; text-wrap: balance; }
@media (max-width: 900px) { .tsunagu-pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px) {
.tsunagu-pos-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tsunagu-pos { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 16px 20px; text-align: left; }
.tsunagu-pos__badge { width: 52px; height: 52px; font-size: 18px; }
.tsunagu-pos__badge svg { width: 28px; height: 28px; }
}
/* 2. 大切にしていること */
.tsunagu-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0; list-style: none; }
.tsunagu-values li { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 26px 22px 24px; text-align: center; background: #fff; border: 1px solid var(--tsunagu-border); border-top: 5px solid var(--tsunagu-coral); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow); font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 19px; line-height: 1.7; overflow-wrap: break-word; text-wrap: balance; }
.tsunagu-values li:nth-child(2) { border-top-color: var(--tsunagu-teal); }
.tsunagu-values li:nth-child(3) { border-top-color: var(--tsunagu-yellow); }
@media (max-width: 800px) { .tsunagu-values { grid-template-columns: minmax(0, 1fr); gap: 14px; } .tsunagu-values li { padding: 20px 18px; } }
/* 3. 看護とリハビリの連携 */
.tsunagu-role { --c: var(--tsunagu-coral); --cl: var(--tsunagu-coral-light); --cd: var(--tsunagu-coral-deep); display: flex; flex-direction: column; min-width: 0; border-top: 6px solid var(--c); }
.tsunagu-role--teal { --c: var(--tsunagu-teal); --cl: var(--tsunagu-teal-light); --cd: var(--tsunagu-teal-deep); }
.tsunagu-role__head { display: flex; align-items: center; gap: 16px; }
.tsunagu-role__head .tsunagu-pos__badge { width: 58px; height: 58px; font-size: 14px; }
.tsunagu-role__head .tsunagu-pos__badge svg { width: 30px; height: 30px; }
.tsunagu-role__title { margin: 0; font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 22px; line-height: 1.4; min-width: 0; }
.tsunagu-role__sub { display: block; margin-top: 2px; font-family: var(--tsunagu-font-sans); font-weight: 500; font-size: 13.5px; line-height: 1.5; color: var(--tsunagu-text-soft); overflow-wrap: break-word; }
.tsunagu-role__text { margin-top: 16px; line-height: 1.95; color: var(--tsunagu-text-soft); overflow-wrap: break-word; }
.tsunagu-role__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.tsunagu-role__chips li { padding: 3px 14px; border-radius: var(--tsunagu-radius-pill); background: var(--cl); color: var(--cd); font-size: 14px; font-weight: 700; line-height: 1.6; }
/* 4. 専門性 */
.tsunagu-checks--odd li { overflow-wrap: break-word; }
.tsunagu-checks--odd li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tsunagu-wrap.tsunagu-sub-body > .tsunagu-checks { margin-top: 0; }
/* 5. 働きやすい環境 */
.tsunagu-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.tsunagu-perk { --c: var(--tsunagu-coral); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; min-height: 72px; padding: 16px 20px; background: #fff; border: 1px solid var(--tsunagu-border); border-left: 6px solid var(--c); border-radius: var(--tsunagu-radius-sm); box-shadow: var(--tsunagu-shadow); font-size: 17px; font-weight: 700; line-height: 1.5; overflow-wrap: break-word; }
.tsunagu-perk:nth-child(3n+2) { --c: var(--tsunagu-teal); }
.tsunagu-perk:nth-child(3n) { --c: var(--tsunagu-yellow); }
.tsunagu-perk__tag { display: inline-block; padding: 2px 12px; border: 1px solid #e2c26a; border-radius: var(--tsunagu-radius-pill); background: var(--tsunagu-yellow-light); color: #7d5d0c; font-size: 14px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
@media (max-width: 640px) { .tsunagu-perks { grid-template-columns: minmax(0, 1fr); gap: 12px; } .tsunagu-perk { min-height: 64px; padding: 14px 16px; font-size: 16px; } }
/* 6. 1日の働き方 */
.tsunagu-day { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; max-width: 980px; margin-inline: auto; }
.tsunagu-day__stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 18px; text-align: center; background: var(--tsunagu-yellow-light); border: 1px solid #ecd9a0; border-radius: var(--tsunagu-radius); }
.tsunagu-day__label { font-size: 15px; font-weight: 700; color: #7d5d0c; }
.tsunagu-day__num { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(34px, 4vw, 44px); line-height: 1.3; color: var(--tsunagu-text); white-space: nowrap; }
.tsunagu-day__num small { margin-left: 4px; font-size: .5em; font-weight: 500; }
@media (max-width: 800px) { .tsunagu-day { grid-template-columns: minmax(0, 1fr); } .tsunagu-day__stat { padding: 22px 18px; } }
/* 7. 教育・同行訪問 */
.tsunagu-train { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tsunagu-train .tsunagu-card { min-width: 0; padding: 26px 26px 28px; }
.tsunagu-train .tsunagu-card__title { font-size: 19px; }
.tsunagu-train .tsunagu-card__text { line-height: 1.95; overflow-wrap: break-word; word-break: normal; line-break: strict; }
.tsunagu-train > :nth-child(2) { --tsunagu-accent: var(--tsunagu-teal); }
.tsunagu-train > :nth-child(3) { --tsunagu-accent: var(--tsunagu-yellow); }
/* PC表示のみ：本文が細かく折り返されるのを防ぐため、文字サイズ・行間・左右余白を調整（スマートフォンは1列表示のまま変更しない） */
@media (min-width: 961px) {
.tsunagu-train .tsunagu-card { padding-inline: 16px; }
.tsunagu-train .tsunagu-card__text { font-size: 18px; line-height: 1.8; text-wrap: pretty; }
}
@media (max-width: 960px) { .tsunagu-train { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
/* 8. 写真スライダー（JSなしでは、写真が縦に並んで全て表示される） */
.tsunagu-slider { max-width: 860px; margin-inline: auto; }
.tsunagu-slider__slides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 28px 24px; }
.tsunagu-slide { margin: 0; min-width: 0; }
.tsunagu-slide__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f6f0e8; border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow); }
.tsunagu-slide__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.tsunagu-slide__caption { margin-top: 14px; text-align: center; font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--tsunagu-text); overflow-wrap: break-word; text-wrap: balance; }
/* JSが動いたときだけスライダー表示に切り替える */
.tsunagu-slider.is-enhanced .tsunagu-slider__slides { grid-template-columns: minmax(0, 1fr); gap: 0; touch-action: pan-y; }
.tsunagu-slider.is-enhanced .tsunagu-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.tsunagu-slider.is-enhanced .tsunagu-slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.tsunagu-slider__ctrl { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 6px; margin-top: 18px; }
.tsunagu-slider__ctrl[hidden] { display: none; }
.tsunagu-slider__btn { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--tsunagu-border); border-radius: 50%; background: #fff; color: var(--tsunagu-text); cursor: pointer; box-shadow: 0 2px 10px rgba(56,49,47,.06); }
.tsunagu-slider__btn:hover { border-color: var(--tsunagu-teal-deep); color: var(--tsunagu-teal-deep); }
.tsunagu-slider__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tsunagu-slider__dots { display: flex; align-items: center; justify-content: center; }
.tsunagu-slider__dot { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.tsunagu-slider__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--tsunagu-teal); transition: background-color .2s ease, transform .2s ease; }
.tsunagu-slider__dot[aria-current="true"]::before { background: var(--tsunagu-coral); border-color: var(--tsunagu-coral); transform: scale(1.25); }
.tsunagu-slider__toggle { min-height: 44px; margin-left: 10px; padding: 0 18px; border: 1.5px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius-pill); background: #fff; color: var(--tsunagu-text-soft); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tsunagu-slider__toggle:hover { border-color: var(--tsunagu-teal-deep); color: var(--tsunagu-teal-deep); }
.tsunagu-slider__toggle[hidden] { display: none; }
@media (max-width: 480px) { .tsunagu-slider__toggle { margin-left: 0; } .tsunagu-slide__caption { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .tsunagu-slider.is-enhanced .tsunagu-slide, .tsunagu-slider.is-enhanced .tsunagu-slide.is-active { transition: none; } }
/* 10. 見学・問い合わせ */
.tsunagu-visit { display: grid; gap: 1em; max-width: 40em; margin: clamp(20px, 3vw, 28px) auto 0; }
.tsunagu-visit p { text-wrap: pretty; line-height: 2; overflow-wrap: break-word; }
/* 採用ページ後半の案内部分（#visit）：スマートフォン表示（767px以下）のみ、案内文3段落
（「そのような方の職場見学も歓迎しています。」「募集職種や勤務条件は…」
「地域で暮らす利用者様と…支えてみませんか。」）を中央揃えに変更。同じ.tsunagu-visit内の
質問リスト（.tsunagu-visit__ask、吹き出し）は元々center指定のため対象外・変更なし。
この文章の後にある問い合わせカード（.tsunagu-ccard、電話リンク）は既存CSSで元々中央配置・
スマホでは幅100%表示のため変更不要。左右の余白はコンテナ既存の20pxにこの8pxを加えて
合計28px以上を確保し、段落自体の最大幅を340pxにして左右均等に中央配置。段落間はgapを
1em(≒16px)から26pxへ広げ、24〜28pxの範囲にした。行間は既存のline-height:2を維持
（1.9〜2の範囲内）。HTMLへのbr追加はしていない。PC・タブレット（768px以上）の配置は現状維持。 */
@media (max-width: 767px) {
#visit .tsunagu-visit { gap: 26px; }
#visit .tsunagu-visit > p {
text-align: center;
max-width: 340px;
margin-inline: auto;
padding-inline: 8px;
}
}
.tsunagu-visit__ask { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tsunagu-visit__ask li {
display: flex; align-items: center; justify-content: center; text-align: center;
padding: 12px 18px; background: #fff; border-radius: var(--tsunagu-radius-sm); border: 1px solid var(--tsunagu-border); font-weight: 700; line-height: 1.7; overflow-wrap: break-word;
}
/* PC版：改行を入れず1行表示に（文章が収まらない場合も通常の折返しに任せ、意図せぬ途中切れは起きない） */
@media (min-width: 769px) {
.tsunagu-visit__ask li br { display: none; }
}
.tsunagu-ccards--single { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.tsunagu-ccard__jobs { margin: 2px 0 0; font-weight: 700; color: var(--tsunagu-text-soft); }
.tsunagu-tel--rc { flex-wrap: wrap; justify-content: center; white-space: normal; }
.tsunagu-tel--rc .tsunagu-tel__text { white-space: nowrap; }
.tsunagu-tel__pre { font-size: .6em; font-weight: 700; letter-spacing: 0; }
/* =====================================================================
【Classic Preview】温かみのあるクラシックデザイン（トップページ） v3
---------------------------------------------------------------------
・tsunagu-theme-classic 専用のブロック。元の tsunagu-theme には存在しない。
・このブロックより上の CSS は元テーマの assets/css/style.css と完全に同一（無変更）。
・現段階ではトップページのみが対象。すべて body.home の内側に限定しているため、
子ページ（固定ページ）の表示には影響しない。子ページへ展開する際は、共通化する部分だけ
「body.home」を外して再利用する（トークンは 0. にまとめてある）。
・以前の「採用情報を全面チャコールにする」指定は、このブロックへ書き直した時点で削除済み。
・元に戻す場合：このコメントから末尾までを削除する（併せて README 的な注意は報告書参照）。
目次
0. デザイントークン
1. 共通部品（見出し・ボタン・テキストリンク・波形・アンカー位置）
2. ヘッダー
3. メインビジュアル
4. 私たちについて（街並み・看板犬・手書き風メッセージ）／企業理念
5. TSUNAGUの特徴／サービス紹介
6. TSUNAGUの事業
7. パンフレット一覧
8. 採用情報（明るい背景・アイコン付き条件）
9. Instagram（写真の横一列）
10. お問い合わせ
11. フッター（温かいオフホワイト）
12. スマートフォン・タブレット
===================================================================== */
/* ---------- 0. デザイントークン ---------- */
body.home {
--cl-bg: #F8F4EC; /* アイボリー（基本背景） */
--cl-bg-soft: #FFFCF8; /* オフホワイト（交互の背景） */
--cl-card: #FFFFFF;
--cl-charcoal: #3B3733; /* ボタン・細い枠・文字のみ */
--cl-charcoal-hover: #4A4540;
--cl-ivory: #F7F1E6;
--cl-ivory-soft: #E6DDCF;
--cl-gold: #C8A661; /* 罫線・見出し線・ボタン・写真フレーム */
--cl-gold-hover: #D3B574;
--cl-gold-border: #B8964F;
--cl-gold-light: #E3C98F; /* チャコール上のリンク文字 */
--cl-gold-line: rgba(200, 166, 97, 0.55);
--cl-gold-hair: rgba(200, 166, 97, 0.32);
--cl-btn-text: #2F2B27;
--cl-olive: #7E8C55; /* 補助色（落ち着いたオリーブ） */
--cl-yellow-soft: #F1D98A; /* 補助色（淡い黄色） */
--cl-teal-text: #0A6D70; /* オフホワイト上の青緑文字 */
--cl-hand: #86683A; /* 手書き風メッセージの文字色（落ち着いたゴールドブラウン） */
--cl-radius: 12px;
--cl-radius-sm: 8px;
--cl-shadow: 0 2px 12px rgba(59, 55, 51, 0.06);
--cl-wave-h: clamp(18px, 3vw, 36px);
--cl-wave-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1440,60 L1440,26 C1250,6 1080,40 880,34 C680,28 560,8 380,14 C220,19 110,40 0,30 Z' fill='%23000'/%3E%3C/svg%3E");
--cl-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1440,60 L1440,32 C1300,14 1140,12 960,26 C780,40 620,44 460,30 C300,16 150,12 0,24 Z' fill='%23000'/%3E%3C/svg%3E");
/* 既存の共通変数をトップページ内だけ置き換え（丸み・影を控えめに統一） */
--tsunagu-bg: var(--cl-bg);
--tsunagu-border: #E7DECF;
--tsunagu-radius: var(--cl-radius);
--tsunagu-radius-sm: var(--cl-radius-sm);
--tsunagu-radius-pill: var(--cl-radius-sm);
--tsunagu-shadow: var(--cl-shadow);
background: var(--cl-bg);
}
/* ---------- 1. 共通部品 ---------- */
/* セクション見出し：明朝体・左右にアンティークゴールドの細線 */
body.home .tsunagu-eyebrow:not(.tsunagu-eyebrow--left) {
gap: clamp(14px, 2vw, 22px);
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 600;
letter-spacing: 0.08em;
color: var(--tsunagu-text);
}
body.home .tsunagu-eyebrow:not(.tsunagu-eyebrow--left)::before,
body.home .tsunagu-eyebrow:not(.tsunagu-eyebrow--left)::after {
width: clamp(36px, 9vw, 120px);
height: 1px;
background: var(--cl-gold);
}
/* ボタン：角丸8px・影なし・枠線中心。
ゴールド＝全体の案内（メインビジュアル・パンフレット）
チャコール＝採用・お問い合わせ
コーラル／青緑＝各事業所（色で事業所を区別） */
body.home .tsunagu-btn {
min-height: 50px;
border-radius: var(--cl-radius-sm);
letter-spacing: 0.04em;
box-shadow: none;
}
body.home .tsunagu-hero .tsunagu-btn--coral,
body.home .tsunagu-pamphlet__btn-row .tsunagu-btn {
background: var(--cl-gold);
border-color: var(--cl-gold-border);
color: var(--cl-btn-text);
}
body.home .tsunagu-hero .tsunagu-btn--coral:hover,
body.home .tsunagu-pamphlet__btn-row .tsunagu-btn:hover { background: var(--cl-gold-hover); }
body.home .tsunagu-recruit .tsunagu-btn,
body.home .tsunagu-contact__more .tsunagu-btn {
background: var(--cl-charcoal);
border-color: var(--cl-charcoal);
color: var(--cl-ivory);
}
body.home .tsunagu-recruit .tsunagu-btn:hover,
body.home .tsunagu-contact__more .tsunagu-btn:hover { background: var(--cl-charcoal-hover); }
body.home .tsunagu-btn--white {
background: var(--cl-bg-soft);
border-color: var(--cl-gold-line);
box-shadow: none;
}
body.home .tsunagu-btn--white:hover { border-color: var(--cl-gold); background: #fff; }
/* テキストリンク：青緑の文字＋ゴールドの細い下線 */
body.home .tsunagu-textlink { color: var(--cl-teal-text); border-bottom: 1px solid var(--cl-gold); }
body.home .tsunagu-textlink:hover { border-bottom-color: var(--cl-teal-text); }
/* 緩やかな波形：各セクション上端の外側に、そのセクション自身の背景色で描く
（形はマスク画像、色は --cl-sec-bg。既存の波形指定をこの1か所で置き換え） */
body.home .tsunagu-business { --cl-sec-bg: var(--cl-bg-soft); --cl-wave: var(--cl-wave-a); }
body.home .tsunagu-pamphlet { --cl-sec-bg: var(--cl-bg); --cl-wave: var(--cl-wave-b); }
body.home .tsunagu-recruit { --cl-sec-bg: var(--cl-bg-soft); --cl-wave: var(--cl-wave-a); }
body.home .tsunagu-insta { --cl-sec-bg: var(--cl-bg); --cl-wave: var(--cl-wave-b); }
body.home .tsunagu-contact { --cl-sec-bg: var(--cl-bg-soft); --cl-wave: var(--cl-wave-a); }
body.home .tsunagu-footer { --cl-sec-bg: #F1EADF; --cl-wave: var(--cl-wave-b); } /* 波の色＝淡いグレージュ */
body.home :is(.tsunagu-business, .tsunagu-pamphlet, .tsunagu-recruit, .tsunagu-insta, .tsunagu-contact, .tsunagu-footer) {
position: relative;
background: var(--cl-sec-bg);
}
body.home :is(.tsunagu-business, .tsunagu-pamphlet, .tsunagu-recruit, .tsunagu-insta, .tsunagu-contact, .tsunagu-footer)::before {
content: "";
position: absolute; left: 0; width: 100%;
height: var(--cl-wave-h);
top: calc(-1 * var(--cl-wave-h) + 1px);
background: var(--cl-sec-bg);
-webkit-mask: var(--cl-wave) no-repeat 0 0 / 100% 100%;
mask: var(--cl-wave) no-repeat 0 0 / 100% 100%;
pointer-events: none;
}
/* アンカー移動時、見出しが固定ヘッダーの後ろに隠れないように */
body.home :is(section, [id]) { scroll-margin-top: calc(var(--tsunagu-header-h) + 16px); }
/* ---------- 2. ヘッダー ---------- */
body.home .tsunagu-header {
background: rgba(255, 252, 248, 0.96);
border-bottom: 1px solid var(--cl-gold-hair);
}
body.home .tsunagu-nav__link { font-weight: 500; }
body.home .tsunagu-nav__link:hover { color: var(--tsunagu-text); box-shadow: inset 0 -1px 0 var(--cl-gold); border-radius: 0; }
body.home .tsunagu-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cl-gold); }
body.home .tsunagu-nav__cta .tsunagu-btn { min-height: 44px; }
body.home .tsunagu-menu-toggle { border-color: var(--cl-gold-line); background: var(--cl-bg-soft); }
@media (max-width: 1199px) {
body.home .tsunagu-nav.is-open { background: var(--cl-bg-soft); border-bottom-color: var(--cl-gold-hair); }
body.home .tsunagu-nav.is-open .tsunagu-nav__link { display: flex; border-bottom-color: var(--cl-gold-hair); }
body.home .tsunagu-nav.is-open .tsunagu-nav__link:hover { box-shadow: none; color: var(--tsunagu-coral-deep); }
}
/* ---------- 3. メインビジュアル ---------- */
/* 写真は変更・加工なし。白い透過は左側の文字の下だけに弱め、手が写る中央〜右は写真の色をそのまま見せる */
body.home .tsunagu-hero { border-bottom: 1px solid var(--cl-gold-hair); }
body.home .tsunagu-hero__inner { background: var(--cl-bg); }
body.home .tsunagu-hero__fade {
background: linear-gradient(90deg, rgba(248,244,236,0.92) 0%, rgba(248,244,236,0.7) 22%, rgba(248,244,236,0.18) 36%, rgba(248,244,236,0) 44%);
}
body.home .tsunagu-hero__badge,
body.home .tsunagu-hero__title,
body.home .tsunagu-hero__lead { text-shadow: 0 0 14px rgba(248,244,236,.95), 0 0 3px rgba(248,244,236,.95); }
body.home .tsunagu-hero__badge { font-size: clamp(14px, 1.15vw, 15px); }
body.home .tsunagu-hero__badge-mark { background: var(--cl-gold); height: 1px; }
/* ---------- 4. 私たちについて／企業理念 ---------- */
body.home .tsunagu-about { background: var(--cl-bg-soft); padding-bottom: 0; }
body.home .tsunagu-about::before,
body.home .tsunagu-about::after { content: none; } /* 淡色の大きな円は使わない */
/* 手書き文字の装飾画像（PCのみ）。縦横比は width/height:auto で維持し、元画像より大きくは表示しない。
・右上：「つながる。支えあう。その人らしい暮らしのために。」（handwriting-tsunagaru.png）
・左：「ずっと、この街で。」（handwriting-zutto-konomachi.png）を街並みの犬の真上に
900px以下では非表示 */
body.home .tsunagu-about__hand { position: absolute; z-index: 1; height: auto; max-width: none; pointer-events: none; }
body.home .tsunagu-about__hand--right {
top: clamp(24px, calc(var(--tsunagu-section-y) - 40px), 80px);
right: max(24px, calc(50% - 620px));
width: clamp(180px, 17vw, 250px);
}
/* 犬（幅 clamp(104px, 11vw, 160px)・左端 max(20px, 50% − 500px)）の中心の真上に置く */
body.home .tsunagu-about__hand--left {
--cl-dog-w: clamp(104px, 11vw, 160px);
--cl-hand-w: clamp(170px, 15vw, 220px);
width: var(--cl-hand-w);
left: max(12px, calc(max(20px, calc(50% - 500px)) + var(--cl-dog-w) / 2 - var(--cl-hand-w) / 2)); /* 画面の左端からはみ出さない */
bottom: calc(9% + var(--cl-dog-w) * 1148 / 1371 - 8px);
}
@media (max-width: 900px) { body.home .tsunagu-about__hand { display: none; } }
/* 街並み：手描きの街並み画像（assets/images/townscape-handdrawn.png・2183×720・背景透過）を使用。
画像の縦横比は維持。画像内の絵柄は縦389〜667pxの範囲（上下は透明）なので、その範囲だけが見える高さの枠にし、
background-position の 88.01%（＝389÷(720−278)）で絵柄の下端を枠の下端に合わせる。
PC：横幅いっぱい（100% auto）。犬は別画像のまま、街並みの手前（z-index:1）に重ねる */
body.home .tsunagu-about__scene {
position: relative;
width: 100%;
aspect-ratio: 2183 / 278;
margin-top: clamp(8px, 1.6vw, 20px);
background: url("../images/townscape-handdrawn.png") no-repeat center 88.01% / 100% auto;
}
body.home .tsunagu-about__dog {
position: absolute; z-index: 1;
left: max(20px, calc(50% - 500px));
bottom: 9%;
width: clamp(104px, 11vw, 160px); height: auto; aspect-ratio: 1371 / 1148;
}
body.home .tsunagu-homephilo { background: var(--cl-bg); padding-top: clamp(28px, 4vw, 48px); }
body.home .tsunagu-philo--home {
background: var(--cl-card);
border: 1px solid var(--cl-gold-line);
border-radius: var(--cl-radius);
outline: 1px solid var(--cl-gold-hair);
outline-offset: -8px;
}
body.home .tsunagu-philo--home::before,
body.home .tsunagu-philo--home::after { content: none; }
body.home .tsunagu-curve { background: var(--cl-bg); opacity: 0.85; }
/* ---------- 5. TSUNAGUの特徴／サービス紹介 ---------- */
body.home .tsunagu-features { background: var(--cl-bg); padding-top: clamp(32px, 4vw, 56px); }
body.home .tsunagu-feature {
background: var(--cl-card);
border: 1px solid var(--tsunagu-border);
border-top: 3px solid var(--cl-feature-accent, var(--cl-gold));
border-radius: var(--cl-radius);
box-shadow: var(--cl-shadow);
}
body.home .tsunagu-feature--coral { --cl-feature-accent: var(--tsunagu-coral); }
body.home .tsunagu-feature--teal { --cl-feature-accent: var(--tsunagu-teal); }
body.home .tsunagu-feature--yellow { --cl-feature-accent: var(--cl-gold); }
body.home .tsunagu-feature__qual { border-top: 1px solid var(--cl-gold-hair); }
body.home .tsunagu-feature__tag { border-radius: 6px; font-size: 14.5px; }
body.home .tsunagu-feature__qualtext { font-size: 15px; }
body.home .tsunagu-services { background: var(--cl-bg); }
body.home .tsunagu-svc { background: var(--cl-card); border-color: var(--tsunagu-border); border-radius: 10px; }
body.home .tsunagu-svc:hover { border-color: var(--cl-gold); box-shadow: var(--cl-shadow); }
/* ---------- 6. TSUNAGUの事業 ---------- */
/* 写真（既存画像の既存の切り出し範囲のまま）を左、文章を右にした横長カード。色で事業所を区別 */
body.home .tsunagu-business { padding-top: clamp(56px, 7vw, 88px); }
body.home .tsunagu-biz {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
align-items: center;
gap: clamp(20px, 2.4vw, 32px);
padding: clamp(24px, 2.6vw, 34px);
background: var(--cl-card);
border: 1.5px solid var(--cl-biz-accent);
border-radius: var(--cl-radius);
box-shadow: var(--cl-shadow);
}
body.home .tsunagu-biz--coral { --cl-biz-accent: var(--tsunagu-coral); }
body.home .tsunagu-biz--teal { --cl-biz-accent: var(--tsunagu-teal); }
body.home .tsunagu-biz::before,
body.home .tsunagu-biz::after { content: none; }
body.home .tsunagu-biz__photo { order: -1; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--cl-gold-line), 0 6px 16px rgba(59,55,51,.10); }
body.home .tsunagu-biz__photo--wide { border-radius: 10px; }
/* カード内部は共通のCSS Grid：ロゴ／見出し／本文／ボタンを同じ行に置く。
本文ブロックはカード上端から同じ位置で始める（align-self: start）ので、左右のロゴ枠の上端が揃う */
body.home .tsunagu-biz__body {
align-self: stretch;
display: grid;
grid-template-rows: auto auto 1fr auto; /* ロゴ・見出し・本文・ボタン */
justify-items: start;
align-content: start;
}
body.home .tsunagu-biz__body .tsunagu-btn { align-self: end; }
/* PC（2枚横並び）：subgrid で左右カードの行の高さも共有し、ロゴ・見出し・本文・ボタンの位置を左右で完全に揃える */
@media (min-width: 1025px) {
@supports (grid-template-rows: subgrid) {
body.home .tsunagu-business .tsunagu-grid-2 { grid-template-rows: repeat(4, auto); row-gap: 0; }
body.home .tsunagu-biz { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-items: stretch; }
body.home .tsunagu-biz__photo { grid-column: 1; grid-row: 1 / -1; align-self: center; }
body.home .tsunagu-biz__body { grid-column: 2; grid-row: 1 / -1; grid-template-rows: subgrid; }
}
}
/* ロゴ枠：左右とも同じ幅・高さ・内側余白。ロゴ本体（画像内の余白を除いた絵柄）の見た目の高さを約44pxに揃える。
・訪問看護ロゴ（420×100）は画像いっぱいに絵柄がある → 画像の高さ44px
・ケアプランロゴ（368×96）は絵柄が縦72px分・左寄り → 画像の高さ58px（絵柄≒43.5px）、右へ7.5px・下へ1.5pxずらして中央に見せる
縦横比は変えず、切り取り・変形なし */
body.home .tsunagu-biz__logo {
width: min(240px, 100%); height: 76px; padding: 12px 18px;
border: 1px solid var(--tsunagu-border); overflow: hidden;
}
body.home .tsunagu-biz__logo img { max-height: none; max-width: none; width: auto; }
body.home .tsunagu-biz__logo--homecare img { height: 44px; left: 0; top: 0; }
body.home .tsunagu-biz__logo--careplan img { height: 58px; left: 7.5px; top: 1.5px; }
body.home .tsunagu-biz__title { margin-top: 14px; }
/* ---------- 7. パンフレット一覧 ---------- */
body.home .tsunagu-pamphlet { padding-top: clamp(56px, 7vw, 88px); }
body.home .tsunagu-book__cover {
border-color: var(--cl-gold-hair);
box-shadow: 3px 6px 14px rgba(59,55,51,.10), inset 5px 0 8px -5px rgba(59,55,51,.16);
}
/* ---------- 8. 採用情報 ---------- */
body.home .tsunagu-recruit { padding-block: clamp(56px, 7vw, 96px); }
body.home .tsunagu-recruit .tsunagu-eyebrow--left {
gap: 14px; margin: 0 0 clamp(6px, 1vw, 10px);
font-size: clamp(22px, 2.5vw, 30px); font-weight: 600; letter-spacing: 0.08em;
}
body.home .tsunagu-recruit .tsunagu-eyebrow--left::before,
body.home .tsunagu-recruit .tsunagu-eyebrow--left::after {
display: block; content: ""; width: 36px; height: 1px; background: var(--cl-gold);
}
@media (min-width: 901px) { body.home .tsunagu-recruit .tsunagu-eyebrow--left::after { flex: 0 1 120px; } }
/* 条件6項目：統一SVGアイコン（丸い色面＋白い線画）。HTMLの文言は無変更 */
body.home .tsunagu-recruit .tsunagu-checks { gap: 12px; }
body.home .tsunagu-recruit .tsunagu-checks li {
min-height: 66px; padding: 12px 16px 12px 70px;
background: var(--cl-card);
border: 1px solid var(--tsunagu-border);
border-radius: var(--cl-radius-sm);
font-size: 16px; color: var(--tsunagu-text);
}
body.home .tsunagu-recruit .tsunagu-checks li::before {
left: 16px; width: 40px; height: 40px; margin-top: -20px;
background: var(--cl-ic-bg, var(--tsunagu-teal));
}
body.home .tsunagu-recruit .tsunagu-checks li::after {
content: ""; position: absolute; left: 25px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
background: #fff;
-webkit-mask: var(--cl-ic) no-repeat center / contain;
mask: var(--cl-ic) no-repeat center / contain;
}
body.home .tsunagu-recruit .tsunagu-checks li:nth-child(1) { --cl-ic-bg: var(--tsunagu-coral-deep); --cl-ic: url("../icons/calendar.svg"); }
body.home .tsunagu-recruit .tsunagu-checks li:nth-child(2) { --cl-ic-bg: var(--tsunagu-teal-deep); --cl-ic: url("../icons/sun.svg"); }
body.home .tsunagu-recruit .tsunagu-checks li:nth-child(3) { --cl-ic-bg: #B08C45; --cl-ic: url("../icons/vacation.svg"); }
body.home .tsunagu-recruit .tsunagu-checks li:nth-child(4) { --cl-ic-bg: var(--cl-olive); --cl-ic: url("../icons/car.svg"); }
body.home .tsunagu-recruit .tsunagu-checks li:nth-child(5) { --cl-ic-bg: var(--tsunagu-coral-deep); --cl-ic: url("../icons/team.svg"); }
body.home .tsunagu-recruit .tsunagu-checks li:nth-child(6) { --cl-ic-bg: var(--tsunagu-teal-deep); --cl-ic: url("../icons/oncall.svg"); }
/* 写真：加工なし。ゴールドの細い縁取り＋コーラル・青緑のコーナーフレーム */
body.home .tsunagu-recruit__media img {
border-radius: 10px;
box-shadow: 0 0 0 1px var(--cl-gold-line), 0 8px 22px rgba(59,55,51,.10);
}
body.home .tsunagu-recruit .tsunagu-frame::before,
body.home .tsunagu-recruit .tsunagu-frame::after { width: 48px; height: 48px; }
body.home .tsunagu-recruit .tsunagu-frame::before { border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 10px; }
body.home .tsunagu-recruit .tsunagu-frame::after { border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 10px; }
/* ---------- 9. Instagram ---------- */
body.home .tsunagu-insta { padding-block: clamp(56px, 7vw, 88px); }
body.home .tsunagu-insta__box {
text-align: left;
padding: clamp(24px, 3.4vw, 44px);
background: var(--cl-bg-soft);
border: 1px solid var(--cl-gold-line);
border-radius: var(--cl-radius);
}
body.home .tsunagu-insta__box::after { content: none; }
/* 上端にコーラル・青緑・淡い黄色の細い帯（控えめなアクセント） */
body.home .tsunagu-insta__box::before {
content: ""; left: 24px; right: 24px; top: 0; width: auto; height: 3px; aspect-ratio: auto;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, var(--tsunagu-coral) 0 33.3%, var(--tsunagu-teal) 33.3% 66.6%, var(--cl-yellow-soft) 66.6% 100%);
}
body.home .tsunagu-insta__deco { display: none; }
body.home .tsunagu-insta__head {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 24px;
}
body.home .tsunagu-insta__icon { width: 60px; height: 60px; margin: 0; box-shadow: 0 0 0 1px var(--cl-gold-line); }
body.home .tsunagu-insta__icon svg { width: 30px; height: 30px; }
body.home .tsunagu-insta__title { font-size: clamp(22px, 2.5vw, 30px); font-weight: 600; }
body.home .tsunagu-insta__text { max-width: 40em; margin: 4px 0 0; color: var(--tsunagu-text-soft); }
body.home .tsunagu-insta .tsunagu-btn {
margin-top: 0; white-space: nowrap;
background: #fff; border: 1.5px solid var(--cl-gold-border); color: var(--tsunagu-text);
}
body.home .tsunagu-insta .tsunagu-btn:hover { background: var(--cl-bg); }
body.home .tsunagu-insta__photos {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
margin: clamp(22px, 3vw, 32px) 0 0; padding: 0; list-style: none;
}
body.home .tsunagu-insta__photo {
aspect-ratio: 4 / 3; overflow: hidden; /* 表示比率は5枚とも4:3で統一 */
border-radius: var(--cl-radius-sm);
box-shadow: 0 0 0 1px var(--cl-gold-hair);
background: var(--cl-bg);
}
body.home .tsunagu-insta__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* 縦長の写真は、人物の顔と上半身が収まる位置を表示 */
body.home .tsunagu-insta__photo--2 img { object-position: 50% 60%; }
body.home .tsunagu-insta__photo--3 img { object-position: 50% 45%; }
body.home .tsunagu-insta__photo--5 img { object-position: 50% 40%; }
/* ---------- 10. お問い合わせ ---------- */
body.home .tsunagu-contact { border-top: 0; padding-block: clamp(56px, 7vw, 88px); }
body.home .tsunagu-contact__title { font-weight: 500; }
body.home .tsunagu-ccard {
border: 1px solid var(--tsunagu-border);
border-top: 4px solid var(--acc);
border-radius: var(--cl-radius);
box-shadow: var(--cl-shadow);
}
body.home .tsunagu-ccard::after { content: none; }
body.home .tsunagu-ccard__label { border-radius: 6px; }
/* ---------- 11. フッター（温かいオフホワイト） ---------- */
/* 上部は淡いグレージュの波の帯（上下とも緩やかな波）でお問い合わせ欄と区切る。
文字は濃いブラウン、リンクと区切り線はアンティークゴールド系。構成（ロゴと犬／住所・電話／LINEカード）は無変更 */
body.home .tsunagu-footer {
--cl-footer-band: clamp(14px, 1.6vw, 22px);
background: linear-gradient(180deg, #F1EADF 0, #F1EADF var(--cl-footer-band), var(--cl-bg-soft) var(--cl-footer-band));
color: #4A4038;
border-top: 0;
padding-block: clamp(56px, 6vw, 80px) 44px;
}
body.home .tsunagu-footer::after {
content: ""; position: absolute; left: 0; width: 100%;
top: calc(var(--cl-footer-band) - var(--cl-wave-h) + 1px);
height: var(--cl-wave-h);
background: var(--cl-bg-soft);
-webkit-mask: var(--cl-wave-a) no-repeat 0 0 / 100% 100%;
mask: var(--cl-wave-a) no-repeat 0 0 / 100% 100%;
pointer-events: none;
}
body.home .tsunagu-footer__info { font-size: 16px; color: #4A4038; }
body.home .tsunagu-footer__name { color: var(--cl-charcoal); }
body.home .tsunagu-footer__care { padding-top: 10px; border-top: 1px solid var(--cl-gold-hair); margin-top: 12px; }
/* スマートフォン・タブレット（768px以下）：1列。ロゴと犬／住所・電話／LINEカードの間に十分な上下余白 */
@media (max-width: 768px) {
body.home .tsunagu-footer__inner { gap: 40px; }
}
body.home .tsunagu-footer__links { padding-top: 6px; }
body.home .tsunagu-footer__links a {
color: var(--cl-hand);
text-decoration: underline; text-decoration-color: var(--cl-gold-line); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
body.home .tsunagu-footer__links a:hover { color: var(--cl-charcoal); text-decoration-color: var(--cl-gold); }
body.home .tsunagu-footer__line {
background: #FFFFFF;
border: 1px solid var(--cl-gold-line);
border-radius: var(--cl-radius);
}
body.home .tsunagu-footer__line-text { font-size: 15px; color: #5A4F45; }
body.home .tsunagu-footer__line-name { font-size: 14px; color: #5A4F45; }
/* PC：3カラム（ロゴと犬／住所・電話／LINEカード） */
@media (min-width: 1200px) {
/* 縦の区切り線は使わず、ブロック間の余白で分ける（3カラムは維持） */
body.home .tsunagu-footer__inner { flex-wrap: nowrap; gap: 0 clamp(48px, 5vw, 80px); }
}
/* ---------- 12. スマートフォン・タブレット ---------- */
@media (max-width: 960px) {
body.home .tsunagu-hero__badge { font-size: 14px; }
}
@media (max-width: 1024px) {
body.home .tsunagu-biz { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
}
@media (max-width: 900px) {
body.home .tsunagu-recruit .tsunagu-checks { text-align: left; }
body.home .tsunagu-recruit .tsunagu-eyebrow--left { justify-content: center; }
body.home .tsunagu-recruit .tsunagu-section-kicker--left { text-align: center; }
}
@media (max-width: 768px) {
body.home .tsunagu-insta__head { grid-template-columns: auto minmax(0, 1fr); }
body.home .tsunagu-insta .tsunagu-btn { grid-column: 1 / -1; width: 100%; min-height: 52px; }
/* 写真はスマートフォンでは横スクロール（ページ全体は横スクロールしない） */
body.home .tsunagu-insta__photos {
display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch;
}
body.home .tsunagu-insta__photo { flex: 0 0 64%; scroll-snap-align: start; }
}
@media (max-width: 560px) {
body.home .tsunagu-insta__head { grid-template-columns: 1fr; }
body.home .tsunagu-insta__icon { width: 52px; height: 52px; }
body.home .tsunagu-insta__icon svg { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
body.home .tsunagu-biz { grid-template-columns: 1fr; padding: 24px 20px 26px; }
body.home .tsunagu-biz__photo { width: min(100%, 280px); }
body.home .tsunagu-biz__logo { margin-inline: auto; }
body.home .tsunagu-biz__body { justify-items: center; }
/* 写真の行を左右カード共通の高さ（240px）にして、カード上端からロゴ枠までの距離を揃える。
写真の形・切り出し範囲は既存のまま（丸写真は240px角、横長写真は幅300pxまで・行の中で上下中央） */
body.home .tsunagu-biz { grid-template-rows: 240px auto; }
body.home .tsunagu-biz__photo { align-self: center; }
body.home .tsunagu-biz__photo--round { width: 240px; }
body.home .tsunagu-biz__photo--wide { width: min(100%, 300px); }
}
@media (max-width: 900px) {
/* タブレット・スマートフォン：同じ画像を縦横比のまま、絵柄の高さが132pxになる大きさで表示し、中央付近を見せる
（132px ÷ 278 × 720 ≒ 342px が画像全体の高さ）。装飾全体の高さは132px */
body.home .tsunagu-about { padding-bottom: 0; }
body.home .tsunagu-about__scene {
aspect-ratio: auto; height: 132px; margin-top: 16px;
background-size: auto 342px;
}
body.home .tsunagu-about__dog { width: clamp(90px, 26vw, 108px); left: 20px; bottom: 12px; }
}
@media (max-width: 480px) {
body.home .tsunagu-recruit .tsunagu-checks li { min-height: 60px; }
body.home .tsunagu-recruit .tsunagu-btn { width: 100%; }
body.home .tsunagu-eyebrow:not(.tsunagu-eyebrow--left)::before,
body.home .tsunagu-eyebrow:not(.tsunagu-eyebrow--left)::after { width: 28px; }
}
/* =====================================================================
採用ページ（page-recruit.php）デザイン調整 ※Desktopの静的サイト版 recruit.html から移植
---------------------------------------------------------------------
・body に付けた .tsunagu-rcpage と、新しく追加した rc- で始まるクラスだけに適用。
他ページの表示には影響しない。
・文章は既存のまま。見出し・段落・余白・配色だけを整理している。
・元に戻す場合：このコメントから末尾までを削除し、_backup/2026-09-24_recruit の .bak を戻す。
===================================================================== */
.tsunagu-rcpage {
--rc-bg: #FFFCF8; /* 基本背景（オフホワイト） */
--rc-tint: #F8F4EC; /* 交互の背景（アイボリー） */
--rc-gold: #C8A661; /* 見出し左右の細線・写真フレーム */
--rc-gold-hair: rgba(200, 166, 97, 0.35);
--rc-line: #E7DECF; /* カードの細い罫線 */
--rc-radius: 12px;
--rc-radius-sm: 8px;
background: var(--rc-bg);
}
.tsunagu-rcpage .tsunagu-section--tint { background: var(--rc-tint); }
.tsunagu-rcpage main .tsunagu-section--sub { padding-block: clamp(48px, 6.5vw, 84px); }
/* 見出し：明朝体・中央揃え・左右にアンティークゴールドの細線（下の太い色線は使わない） */
.tsunagu-rcpage .tsunagu-h2--sub.tsunagu-h2--center {
display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 24px);
font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: .04em; text-wrap: balance;
}
.tsunagu-rcpage .tsunagu-h2--sub.tsunagu-h2--center::before,
.tsunagu-rcpage .tsunagu-h2--sub.tsunagu-h2--center::after {
content: ""; flex: 0 1 clamp(28px, 8vw, 96px); height: 1px; width: auto; margin: 0; border-radius: 0; background: var(--rc-gold);
}
/* 本文：PCで16px以上・左揃え・十分な行間 */
.tsunagu-rcpage .tsunagu-rc-intro,
.tsunagu-rcpage .tsunagu-rc-prose { max-width: 44em; gap: 1.3em; }
.tsunagu-rcpage .tsunagu-rc-intro p,
.tsunagu-rcpage .tsunagu-rc-prose p { font-size: 17px; line-height: 2.05; text-align: left; }
.tsunagu-rcpage .tsunagu-rc-intro { margin-bottom: 0; }
.tsunagu-rcpage .tsunagu-rc-em { color: var(--tsunagu-coral-deep); }
/* ボタン：丸すぎない角丸・影なし */
.tsunagu-rcpage main .tsunagu-btn { min-height: 52px; border-radius: var(--rc-radius-sm); box-shadow: none; }
/* カード共通：細い罫線・控えめな角丸・影は極めて薄く */
.tsunagu-rcpage main :is(.tsunagu-card, .tsunagu-pos, .tsunagu-perk, .tsunagu-values li, .tsunagu-checks li, .tsunagu-ccard, .tsunagu-visit__ask li) {
border-radius: var(--rc-radius-sm);
box-shadow: none;
}
/* 囲み文：淡い色面から、細いゴールド罫線の白いボックスへ（装飾の円は使わない） */
.tsunagu-rcpage .tsunagu-rc-quote { background: #fff; border: 1px solid var(--rc-gold-hair); border-radius: var(--rc-radius); overflow: hidden; }
.tsunagu-rcpage .tsunagu-rc-quote::before { content: none; }
.tsunagu-rcpage .tsunagu-card__title::before { content: none; } /* 見出し前の小さな丸は使わない */
.tsunagu-rcpage .tsunagu-ccard::after { content: none; }
/* ---------- 1. メイン部分 ---------- */
.tsunagu-rcpage .rc-hero { padding: clamp(24px, 3vw, 36px) 0 clamp(40px, 5vw, 64px); background: var(--rc-bg); }
.tsunagu-rcpage .rc-hero__inner {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center;
gap: clamp(28px, 5vw, 64px); margin-top: clamp(20px, 3vw, 32px);
}
.tsunagu-rcpage .rc-eyebrow {
display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 18px; letter-spacing: .12em; color: var(--tsunagu-text-soft);
}
.tsunagu-rcpage .rc-eyebrow::before,
.tsunagu-rcpage .rc-eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--rc-gold); }
.tsunagu-rcpage .rc-hero__title { font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.45; letter-spacing: .03em; }
.tsunagu-rcpage .rc-hero__title .tsunagu-c-coral { font-weight: 600; }
.tsunagu-rcpage .rc-hero__lead { margin-top: 18px; font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.8; color: var(--tsunagu-text); }
.tsunagu-rcpage .rc-hero__media { margin: 0; }
/* 写真：加工・切り取りなし（縦横比 1672/941）。四隅にゴールドの細いコーナーフレーム */
.tsunagu-rcpage .rc-frame { position: relative; padding: 10px; }
.tsunagu-rcpage .rc-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; border-radius: var(--rc-radius-sm); }
.tsunagu-rcpage .rc-frame::before,
.tsunagu-rcpage .rc-frame::after { content: ""; position: absolute; width: 44px; height: 44px; pointer-events: none; }
.tsunagu-rcpage .rc-frame::before { left: 0; top: 0; border-top: 1.5px solid var(--rc-gold); border-left: 1.5px solid var(--rc-gold); }
.tsunagu-rcpage .rc-frame::after { right: 0; bottom: 0; border-bottom: 1.5px solid var(--rc-gold); border-right: 1.5px solid var(--rc-gold); }
.tsunagu-rcpage .rc-hero .tsunagu-note { margin-top: 6px; padding-right: 10px; }
.tsunagu-rcpage .rc-intro-sec { padding-top: clamp(8px, 2vw, 24px) !important; }
/* ---------- 2. 大切にしていること・仕事内容 ---------- */
.tsunagu-rcpage .tsunagu-values li { border: 1px solid var(--rc-line); border-top: 3px solid var(--tsunagu-coral); background: #fff; font-size: 17px; }
.tsunagu-rcpage .tsunagu-values li:nth-child(2) { border-top-color: var(--tsunagu-teal); }
.tsunagu-rcpage .tsunagu-values li:nth-child(3) { border-top-color: var(--rc-gold); }
.tsunagu-rcpage .tsunagu-role { border: 1px solid var(--rc-line); border-top: 3px solid var(--c); background: #fff; }
.tsunagu-rcpage .tsunagu-role__text { font-size: 16px; color: var(--tsunagu-text); }
.tsunagu-rcpage .tsunagu-role__chips li { border-radius: 6px; }
.tsunagu-rcpage .tsunagu-checks li { border: 1px solid var(--rc-line); background: #fff; font-size: 16px; }
.tsunagu-rcpage .tsunagu-day__stat { background: #fff; border: 1px solid var(--rc-gold-hair); border-radius: var(--rc-radius); }
.tsunagu-rcpage .tsunagu-train .tsunagu-card { border: 1px solid var(--rc-line); border-top: 3px solid var(--tsunagu-accent); background: #fff; }
.tsunagu-rcpage .tsunagu-train .tsunagu-card__text { font-size: 16px; color: var(--tsunagu-text); }
/* ---------- 3. 働きやすい環境：アイコン付きカード（PC 4列×2段／タブレット 2列／スマートフォン 1列） ---------- */
.tsunagu-rcpage .tsunagu-perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin-top: clamp(24px, 3vw, 36px); }
.tsunagu-rcpage .tsunagu-perk {
flex-direction: column; justify-content: flex-start; text-align: center; gap: 12px;
min-height: 150px; padding: 26px 16px 22px;
border: 1px solid var(--rc-line); background: #fff; font-size: 17px; line-height: 1.6;
}
.tsunagu-rcpage .tsunagu-perk.rc-ico::before {
content: ""; flex: none; width: 60px; height: 60px; border-radius: 50%;
background: var(--c);
}
/* アイコン：丸（::before）の中央に白い線画（::after）を重ねる。
以前は assets/icons/*.svg を CSS の mask で読み込んでいたが、HTMLファイルを直接開いた場合
（file://）はブラウザの制限で mask 画像が読み込まれず、白い塗りも表示されなかった。
そのため、同じ8個のアイコン（assets/icons と同じ形・白い線）を CSS 内に埋め込み、背景画像として表示する。 */
.tsunagu-rcpage .tsunagu-perk.rc-ico { position: relative; }
.tsunagu-rcpage .tsunagu-perk.rc-ico::before { background: var(--c); }
.tsunagu-rcpage .tsunagu-perk.rc-ico::after {
content: ""; position: absolute; top: 42px; left: 50%; width: 30px; height: 30px; margin-left: -15px;
background: var(--rc-ic) no-repeat center / contain;
pointer-events: none;
}
.tsunagu-rcpage .tsunagu-perk:nth-child(4n+1) { --c: var(--tsunagu-coral-deep); }
.tsunagu-rcpage .tsunagu-perk:nth-child(4n+2) { --c: var(--tsunagu-teal-deep); }
.tsunagu-rcpage .tsunagu-perk:nth-child(4n+3) { --c: #B08C45; }
.tsunagu-rcpage .tsunagu-perk:nth-child(4n) { --c: #7E8C55; }
.tsunagu-rcpage .rc-ico--calendar { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4M7.5 13h2M11 13h2M14.5 13h2M7.5 16.5h2M11 16.5h2'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .rc-ico--sun { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .rc-ico--vacation { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12.5' rx='2'/%3E%3Cpath d='M9 7.5V5.5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5.5v2M3 12.5h18M10.5 12.5v2h3v-2'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .rc-ico--home { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 9 6.5l5.5 4.5V19h-11z'/%3E%3Cpath d='M7.5 19v-4h3v4'/%3E%3Cpath d='M15.5 8.5h5M18 6l2.5 2.5L18 11'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .rc-ico--car { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5v-3.2l2-4.6A2 2 0 0 1 7.3 7.5h9.4a2 2 0 0 1 1.8 1.2l2 4.6v3.2a1 1 0 0 1-1 1H4.5a1 1 0 0 1-1-1z'/%3E%3Cpath d='M3.5 13.3h17'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .rc-ico--tablet { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .rc-ico--team { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.5' r='3'/%3E%3Cpath d='M6.5 19.5c0-3.3 2.4-5.5 5.5-5.5s5.5 2.2 5.5 5.5'/%3E%3Ccircle cx='5' cy='10' r='2.2'/%3E%3Cpath d='M1.8 18.5c0-2.4 1.4-4.2 3.4-4.4'/%3E%3Ccircle cx='19' cy='10' r='2.2'/%3E%3Cpath d='M22.2 18.5c0-2.4-1.4-4.2-3.4-4.4'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .rc-ico--oncall { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4.2-2 1.4a11 11 0 0 0 5.3 5.3l1.4-2 4.2 1.4v2.6a2 2 0 0 1-2.2 2A16 16 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z'/%3E%3Cpath d='M15 3.5a6 6 0 0 1 5.5 5.5M15 7a2.5 2.5 0 0 1 2 2'/%3E%3C/svg%3E"); }
.tsunagu-rcpage .tsunagu-perk--note { flex-wrap: nowrap; }
.tsunagu-rcpage .tsunagu-perk__tag { border-radius: 6px; }
/* ---------- 4. 募集職種 ---------- */
.tsunagu-rcpage .tsunagu-pos-grid { margin-top: clamp(24px, 3vw, 36px); }
.tsunagu-rcpage .tsunagu-pos { background: #fff; border: 1px solid var(--rc-line); }
/* ---------- 5. 職場の様子：写真を横並び（切り取らず全体表示） ---------- */
.tsunagu-rcpage .rc-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tsunagu-rcpage .rc-photo { margin: 0; min-width: 0; }
/* 縦長・横長の写真が混在するため、正方形の枠に全体を収める（切り取りなし） */
.tsunagu-rcpage .rc-photo .tsunagu-slide__frame { aspect-ratio: 1 / 1; background: #F3EEE4; border: 1px solid var(--rc-line); border-radius: var(--rc-radius-sm); box-shadow: none; }
.tsunagu-rcpage .rc-photo .tsunagu-slide__caption { font-size: 16px; }
/* ---------- 6. 見学・お問い合わせ ---------- */
.tsunagu-rcpage .rc-visit { position: relative; background: var(--rc-bg); padding: clamp(56px, 7vw, 88px) 0 0; border-top: 1px solid var(--rc-gold-hair); }
.tsunagu-rcpage .rc-visit__title {
display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 24px);
font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.5; text-align: center; text-wrap: balance;
}
.tsunagu-rcpage .rc-visit__title::before,
.tsunagu-rcpage .rc-visit__title::after { content: ""; flex: 0 1 clamp(28px, 8vw, 96px); height: 1px; background: var(--rc-gold); }
.tsunagu-rcpage .rc-visit__sub { margin-top: 14px; text-align: center; font-family: var(--tsunagu-font-serif); font-weight: 500; font-size: clamp(19px, 2vw, 22px); line-height: 1.6; }
.tsunagu-rcpage .tsunagu-visit p { font-size: 17px; line-height: 2; }
.tsunagu-rcpage .tsunagu-visit__ask li { border: 1px solid var(--rc-line); }
.tsunagu-rcpage .tsunagu-ccard { border: 1px solid var(--rc-line); border-top: 3px solid var(--acc); }
.tsunagu-rcpage .rc-visit__btns { margin-top: 28px; }
.tsunagu-rcpage .rc-visit__btns .tsunagu-btn { min-width: 280px; }
/* 街並み（既存の手描き画像）＋看板犬。ページ内ではここだけで使用 */
.tsunagu-rcpage .rc-scene {
position: relative; width: 100%; aspect-ratio: 2183 / 278; margin-top: clamp(24px, 4vw, 48px);
background: url("../images/townscape-handdrawn.png") no-repeat center 88.01% / 100% auto;
}
.tsunagu-rcpage .rc-scene__dog {
position: absolute; left: max(20px, calc(50% - 520px)); bottom: 12%;
width: clamp(96px, 10vw, 140px); height: auto; aspect-ratio: 1371 / 1148;
}
/* ---------- レスポンシブ ---------- */
@media (max-width: 1024px) {
.tsunagu-rcpage .tsunagu-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsunagu-rcpage .rc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.tsunagu-rcpage .rc-hero__inner { grid-template-columns: minmax(0, 1fr); }
.tsunagu-rcpage .rc-hero__text { text-align: center; }
.tsunagu-rcpage .rc-eyebrow { justify-content: center; }
.tsunagu-rcpage .rc-scene { aspect-ratio: auto; height: 110px; background-size: auto 285px; }
.tsunagu-rcpage .rc-scene__dog { width: 88px; left: 20px; bottom: 10px; }
}
@media (max-width: 600px) {
.tsunagu-rcpage .tsunagu-perks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tsunagu-rcpage .tsunagu-perk { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; text-align: left; min-height: 76px; padding: 14px 18px; gap: 16px; }
.tsunagu-rcpage main .tsunagu-cta-row .tsunagu-btn { padding-inline: 16px; }
.tsunagu-rcpage .tsunagu-perk.rc-ico::before { width: 48px; height: 48px; }
.tsunagu-rcpage .tsunagu-perk.rc-ico::after { top: 50%; left: 30px; width: 26px; height: 26px; margin: -13px 0 0; }
.tsunagu-rcpage .tsunagu-perk--note { flex-wrap: wrap; padding-left: 82px; }
.tsunagu-rcpage .tsunagu-perk--note::before { position: absolute; left: 18px; top: 50%; margin-top: -24px; }
.tsunagu-rcpage .rc-gallery { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.tsunagu-rcpage .rc-photo .tsunagu-slide__frame { aspect-ratio: 4 / 3; }
.tsunagu-rcpage .tsunagu-rc-intro p,
.tsunagu-rcpage .tsunagu-rc-prose p,
.tsunagu-rcpage .tsunagu-visit p { font-size: 16px; line-height: 1.95; }
.tsunagu-rcpage .rc-visit__btns .tsunagu-btn { min-width: 0; width: 100%; }
}
/* WordPress版のみ：既存テーマにある採用ページ用のスマートフォン中央揃え指定（#philosophy・#visit）を、
静的サイト版の新デザインに合わせて「長い本文は左揃え」に上書きする（.tsunagu-rcpage 内だけ） */
@media (max-width: 767px) {
.tsunagu-rcpage #philosophy .tsunagu-rc-prose p,
.tsunagu-rcpage #visit .tsunagu-visit > p { text-align: left; max-width: none; margin-inline: 0; padding-inline: 0; }
}
/* 共通フッター・スマートフォン表示（768px以下）：全ページ共通で、フッター内の犬のイラストを非表示にし、ロゴを中央に配置。
（以前は採用ページのみに限定していた指定を全ページへ広げたもの）
ページ下部の街並みの犬（.rc-scene__dog／.ab-scene__dog／トップページの .tsunagu-about__dog）は対象外で、そのまま表示。
住所・電話番号・リンク、PC表示（769px以上）のフッターは変更なし。 */
@media (max-width: 768px) {
.tsunagu-footer .tsunagu-footer__dog { display: none; }
.tsunagu-footer .tsunagu-footer__brand { justify-content: center; align-self: center; width: 100%; }
}
/* =====================================================================
「私たちについて」ページ（page-about.php）デザイン調整
---------------------------------------------------------------------
・body の .tsunagu-aboutpage（functions.php でこのページだけに付与）の内側だけに適用。
トップページ・採用情報ページ・他の子ページ、共通ヘッダー・フッターには影響しない。
・文章・見出し・画像・リンク・企業情報は無変更。配色・余白・罫線・角丸だけを、
トップページ／採用情報ページ（.tsunagu-rcpage）と同じルールにそろえている。
・元に戻す場合：このコメントから末尾までを削除し、_backup/2026-09-24_about の .bak を戻す。
===================================================================== */
.tsunagu-aboutpage {
--ab-bg: #FFFCF8;
--ab-tint: #F8F4EC;
--ab-gold: #C8A661;
--ab-gold-hair: rgba(200, 166, 97, 0.35);
--ab-line: #E7DECF;
--ab-radius: 12px;
--ab-radius-sm: 8px;
background: var(--ab-bg);
}
.tsunagu-aboutpage main .tsunagu-section--sub { padding-block: clamp(48px, 6.5vw, 84px); }
.tsunagu-aboutpage .tsunagu-section--tint { background: var(--ab-tint); }
/* ---------- ページ上部：見出し・パンくず（シンプル版） ----------
背景はオフホワイト。以前の子ページデザインの大きな淡い円・コーラル／青緑の二重曲線は使わない。
パンくずは上部に控えめに、「私たちについて」は中央に左右の短いゴールド線つきで配置。
上部の短い説明文は、直後の本文（想いをつなぎ、暮らしを支える。）と内容が重なるため表示しない
（HTMLには残し、CSSで非表示。本文側の文章はそのまま）。 */
.tsunagu-aboutpage .tsunagu-pagehead {
background: var(--ab-bg); overflow: visible;
padding: clamp(20px, 2.6vw, 28px) 0 clamp(8px, 1.6vw, 16px);
}
.tsunagu-aboutpage .tsunagu-pagehead::before,
.tsunagu-aboutpage .tsunagu-pagehead::after { content: none; }
.tsunagu-aboutpage .tsunagu-breadcrumb { font-size: 13.5px; }
.tsunagu-aboutpage .tsunagu-pagehead__title {
display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 22px);
margin-top: clamp(14px, 2vw, 22px); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: .06em;
}
.tsunagu-aboutpage .tsunagu-pagehead__title::before,
.tsunagu-aboutpage .tsunagu-pagehead__title::after { content: ""; flex: 0 0 clamp(28px, 5vw, 56px); height: 1px; background: var(--ab-gold); }
.tsunagu-aboutpage .tsunagu-pagehead__lead { display: none; }
.tsunagu-aboutpage main > .tsunagu-curve { display: none; }
/* ---------- 見出し：明朝体・中央・左右にゴールドの細線（採用情報ページと同じ） ---------- */
.tsunagu-aboutpage .tsunagu-h2--sub.tsunagu-h2--center {
display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 24px);
font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: .04em; text-wrap: balance;
}
.tsunagu-aboutpage .tsunagu-h2--sub.tsunagu-h2--center::before,
.tsunagu-aboutpage .tsunagu-h2--sub.tsunagu-h2--center::after {
content: ""; flex: 0 1 clamp(28px, 8vw, 96px); height: 1px; width: auto; margin: 0; border-radius: 0; background: var(--ab-gold);
}
/* ---------- 想いをつなぎ、暮らしを支える。（トップページの「私たちについて」と同じ世界観） ---------- */
.tsunagu-aboutpage .ab-intro { background: var(--ab-bg); padding-top: clamp(28px, 4vw, 52px) !important; }
.tsunagu-aboutpage .ab-intro .tsunagu-h2--sub { font-weight: 500; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.5; letter-spacing: .03em; }
.tsunagu-aboutpage .ab-intro .tsunagu-h2--sub::after { content: none; }
.tsunagu-aboutpage .ab-intro .tsunagu-h2--sub :is(.tsunagu-c-coral, .tsunagu-c-teal) { font-weight: 600; }
.tsunagu-aboutpage .ab-intro .tsunagu-lead { margin-top: 20px; font-size: 17px; line-height: 2; color: var(--tsunagu-text); }
.tsunagu-aboutpage .ab-intro .tsunagu-quote {
background: #fff; border: 1px solid var(--ab-gold-hair); border-radius: var(--ab-radius);
outline: 1px solid rgba(200, 166, 97, .18); outline-offset: -8px; overflow: hidden;
}
.tsunagu-aboutpage .ab-intro .tsunagu-quote::before { content: none; }
.tsunagu-aboutpage .ab-intro .tsunagu-quote p { font-size: clamp(18px, 2vw, 22px); line-height: 2; }
/* 街並みと看板犬：ページ最下部（お問い合わせ欄のあと・共通フッターの直前）に1か所だけ。
背景はお問い合わせ欄と同じ色で続け、画像の大きさ・縦横比は従来どおり */
.tsunagu-aboutpage .ab-scene {
position: relative; width: 100%; aspect-ratio: 2183 / 278; margin-top: 0;
background: var(--ab-tint) url("../images/townscape-handdrawn.png") no-repeat center 88.01% / 100% auto;
}
.tsunagu-aboutpage .ab-scene__dog {
position: absolute; left: max(20px, calc(50% - 520px)); bottom: 12%;
width: clamp(96px, 10vw, 140px); height: auto; aspect-ratio: 1371 / 1148;
}
/* ---------- 企業理念・行動指針 ---------- */
.tsunagu-aboutpage #philosophy { background: var(--ab-tint); }
.tsunagu-aboutpage .tsunagu-pl__line { background: var(--ab-gold); height: 1px; border-radius: 0; }
.tsunagu-aboutpage .tsunagu-pl__catch { color: var(--tsunagu-text); }
.tsunagu-aboutpage .tsunagu-pl__sub { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 20px; letter-spacing: .1em; color: var(--tsunagu-text); }
.tsunagu-aboutpage .tsunagu-pl__guides { gap: 10px; margin-top: 18px; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide {
align-items: center; padding: 12px 24px; background: #fff; border: 1px solid var(--ab-line); border-radius: var(--ab-radius-sm);
}
/* ---------- 代表メッセージ ---------- */
.tsunagu-aboutpage #message { background: var(--ab-bg); }
.tsunagu-aboutpage .tsunagu-message__panel { background: #fff; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); box-shadow: none; }
.tsunagu-aboutpage .tsunagu-message__panel::before,
.tsunagu-aboutpage .tsunagu-message__panel::after { content: none; }
.tsunagu-aboutpage .tsunagu-message__frame { border-color: var(--ab-gold-hair); }
.tsunagu-aboutpage .tsunagu-message__frame::before { border-width: 1.5px; }
.tsunagu-aboutpage .tsunagu-message__frame::after { border-width: 1.5px; }
.tsunagu-aboutpage .tsunagu-message__photo figcaption { font-size: 15px; }
/* ---------- TSUNAGUの事業：白いカード＋上端の色線（コーラル／青緑）で事業所を区別 ---------- */
.tsunagu-aboutpage .tsunagu-card--biz {
background: #fff; border: 1px solid var(--ab-line); border-top: 3px solid var(--tsunagu-accent);
border-radius: var(--ab-radius); box-shadow: none;
}
.tsunagu-aboutpage .tsunagu-card--biz .tsunagu-biz__logo { border: 1px solid var(--ab-line); }
.tsunagu-aboutpage .tsunagu-card__title::before { content: none; } /* 見出し前の小さな丸は使わない */
.tsunagu-aboutpage .tsunagu-card--biz .tsunagu-card__text { font-size: 16px; }
/* ---------- 会社概要 ---------- */
.tsunagu-aboutpage #overview .tsunagu-card { background: #fff; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); box-shadow: none; }
.tsunagu-aboutpage .tsunagu-dl dt, .tsunagu-aboutpage .tsunagu-dl dd { font-size: 16px; border-top-color: var(--ab-line); }
.tsunagu-aboutpage .tsunagu-source { font-size: 15px; }
/* ---------- ボタン・お問い合わせ欄（採用情報ページと同じ形） ---------- */
.tsunagu-aboutpage main .tsunagu-btn { min-height: 52px; border-radius: var(--ab-radius-sm); box-shadow: none; }
.tsunagu-aboutpage .tsunagu-contact { background: var(--ab-tint); border-top: 1px solid var(--ab-gold-hair); }
.tsunagu-aboutpage .tsunagu-contact::before { content: none; }
.tsunagu-aboutpage .tsunagu-ccard { border: 1px solid var(--ab-line); border-top: 3px solid var(--acc); border-radius: var(--ab-radius-sm); box-shadow: none; }
.tsunagu-aboutpage .tsunagu-ccard::after { content: none; }
.tsunagu-aboutpage .tsunagu-ccard__label { border-radius: 6px; }
/* ---------- スマートフォン・タブレット ---------- */
@media (max-width: 900px) {
.tsunagu-aboutpage .ab-intro .tsunagu-split > .tsunagu-reveal:first-child { text-align: center; }
.tsunagu-aboutpage .ab-scene { aspect-ratio: auto; height: 110px; background-size: auto 285px; }
.tsunagu-aboutpage .ab-scene__dog { width: 88px; left: 20px; bottom: 10px; }
}
@media (max-width: 600px) {
.tsunagu-aboutpage .tsunagu-pagehead__lead { font-size: 16px; padding-inline: 4px; }
.tsunagu-aboutpage .ab-intro .tsunagu-lead { font-size: 16px; text-align: left; }
.tsunagu-aboutpage .ab-intro .tsunagu-quote p { font-size: 17px; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide { padding: 12px 16px; }
.tsunagu-aboutpage .tsunagu-card--biz .tsunagu-btn { width: 100%; }
}
/* 「TSUNAGUの事業」2枚のカード：スマートフォン表示（640px以下）のみ
ロゴ・事業所名・説明文・ボタンを中央揃え、上下左右の余白を2枚で統一、ボタンは中央・同じ幅（最大280px）。
トップページ（body.home）と「私たちについて」ページ（.tsunagu-aboutpage）の事業カードだけが対象。
文章・リンク先・PC表示は変更なし。 */
@media (max-width: 640px) {
.tsunagu-aboutpage .tsunagu-card--biz {
align-items: center; text-align: center; padding: 28px 22px;
}
.tsunagu-aboutpage .tsunagu-card--biz .tsunagu-biz__logo { margin-inline: auto; }
.tsunagu-aboutpage .tsunagu-card--biz .tsunagu-card__title { justify-content: center; overflow-wrap: normal; word-break: auto-phrase; text-wrap: balance; }
.tsunagu-aboutpage .tsunagu-card--biz .tsunagu-cta-row { width: 100%; justify-content: center; }
.tsunagu-aboutpage .tsunagu-card--biz .tsunagu-btn,
body.home .tsunagu-biz .tsunagu-btn { width: 100%; max-width: 280px; margin-inline: auto; }
body.home .tsunagu-biz { padding: 28px 22px; }
body.home .tsunagu-biz__body { justify-items: center; text-align: center; }
}
/* =====================================================================
【Classic Preview】共通：藍色の配色・見出し・藍色フッター・看板犬の移行スペース
---------------------------------------------------------------------
・全ページ共通（tsunagu-theme-classic のみ）。既存の行・採用ページ／私たちについて専用CSSは変更せず、
ここで必要な部分だけを上書きしている（詳細度を少し上げて確実に適用）。
・藍色 #263B4A は「見出し・ナビ文字・一部の主要ボタン・カードの見出し・細いアクセント・フッター背景」に限定。
ページ全体の背景には使わない。訪問看護＝コーラル、ケアプランセンター＝青緑の色分けは変更しない。
・元に戻す場合：このコメントから末尾までを削除し、footer.php を _backup/2026-09-24_indigo から戻す。
===================================================================== */
:root {
--tg-indigo: #263B4A;
--tg-indigo-hover: #33505F;
--tg-gold: #C8A661;
--tg-gold-light: #E3C98F;
--tg-ivory: #F7F1E6;
--tg-ivory-soft: #E6DDCF;
--tg-coral-on-indigo: #F59A92;
--tg-teal-on-indigo: #6FD3D5;
}
/* ---------- 1. 見出し：明朝体・藍色 ---------- */
body.tsunagu-page.tsunagu-page :is(
.tsunagu-pagehead__title, .tsunagu-h2, .tsunagu-h2--sub, .tsunagu-eyebrow,
.rc-hero__title, .rc-visit__title, .tsunagu-recruit__title, .tsunagu-contact__title,
.tsunagu-insta__title, .tsunagu-about__title, .tsunagu-philo__main, .tsunagu-pl__main, .tsunagu-pl__sub, .tsunagu-philo__sub
) { color: var(--tg-indigo); }
/* カードの見出し（事業所ごとの色がついた見出し .tsunagu-biz__title は対象外で、コーラル／青緑のまま） */
body.tsunagu-page.tsunagu-page :is(
.tsunagu-card__title, .tsunagu-feature__title, .tsunagu-spec-card__title, .tsunagu-role__title,
.tsunagu-pos__name, .tsunagu-ccard__name, .tsunagu-doc__title, .tsunagu-steps h3, .tsunagu-dl dt
) { color: var(--tg-indigo); }
/* ページ上部の見出し：中央・左右に細いアンティークゴールドの短い線（全子ページで統一） */
body.tsunagu-page.tsunagu-page .tsunagu-pagehead__title {
display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 22px); text-wrap: balance;
}
body.tsunagu-page.tsunagu-page .tsunagu-pagehead__title::before,
body.tsunagu-page.tsunagu-page .tsunagu-pagehead__title::after { content: ""; flex: 0 0 clamp(28px, 5vw, 56px); height: 1px; background: var(--tg-gold); }
@media (max-width: 640px) {
/* スマホ：見出しが2行になっても窮屈にならないよう、左右の線をやめて下に短い線を1本 */
body.tsunagu-page.tsunagu-page .tsunagu-pagehead__title { display: block; text-align: center; }
body.tsunagu-page.tsunagu-page .tsunagu-pagehead__title::before { content: none; }
body.tsunagu-page.tsunagu-page .tsunagu-pagehead__title::after { display: block; width: 40px; margin: 14px auto 0; }
}
/* セクション見出し（中央）：左右に細いゴールド線（以前のコーラルの太い下線は使わない） */
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub.tsunagu-h2--center {
display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 24px); text-wrap: balance;
}
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub.tsunagu-h2--center::before,
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub.tsunagu-h2--center::after {
content: ""; display: block; flex: 0 1 clamp(28px, 8vw, 96px); width: auto; height: 1px; margin: 0; border-radius: 0; background: var(--tg-gold);
}
/* セクション見出し（左揃え・1行）：見出しの右横に細いゴールド線 */
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub:not(.tsunagu-h2--center):not(:has(br)) { display: flex; align-items: center; gap: 18px; }
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub:not(.tsunagu-h2--center):not(:has(br))::after {
content: ""; display: block; flex: 0 0 56px; width: 56px; height: 1px; margin: 0; border-radius: 0; background: var(--tg-gold);
}
/* セクション見出し（左揃え・2行）：見出しのすぐ下に細いゴールドの短い線 */
body.tsunagu-page.tsunagu-page:not(.tsunagu-aboutpage) .tsunagu-h2--sub:not(.tsunagu-h2--center):has(br)::after {
width: 48px; height: 1px; border-radius: 0; background: var(--tg-gold);
}
/* トップページの見出し（.tsunagu-eyebrow）の左右の線もゴールドの細線に統一済み。色だけ藍色へ */
body.home.home .tsunagu-eyebrow { color: var(--tg-indigo); }
/* ---------- 2. ヘッダーのナビゲーション文字 ---------- */
body.tsunagu-page.tsunagu-page .tsunagu-nav__link { color: var(--tg-indigo); }
body.tsunagu-page.tsunagu-page .tsunagu-menu-toggle { color: var(--tg-indigo); }
/* ---------- 3. 一部の主要ボタン（藍色）：共通お問い合わせ欄の「お問い合わせ・ご相談」、トップページの採用ボタン ---------- */
body.tsunagu-page.tsunagu-page .tsunagu-contact__more .tsunagu-btn,
body.home.home .tsunagu-recruit .tsunagu-btn {
background: var(--tg-indigo); border-color: var(--tg-indigo); color: #fff;
}
body.tsunagu-page.tsunagu-page .tsunagu-contact__more .tsunagu-btn:hover,
body.home.home .tsunagu-recruit .tsunagu-btn:hover { background: var(--tg-indigo-hover); border-color: var(--tg-indigo-hover); }
/* ---------- 4. 淡い半透明の円：子ページ上部の左右端に2つだけ（淡い青緑・淡い黄色、小さめ・文字に重ねない）
「私たちについて」ページは、ご指定により上部の円を使わない設定のまま ---------- */
body.tsunagu-page:not(.tsunagu-aboutpage) .tsunagu-pagehead::before {
width: clamp(90px, 11vw, 150px); right: 2%; top: -40px; background: rgba(24, 167, 170, .08);
}
body.tsunagu-page:not(.tsunagu-aboutpage) .tsunagu-pagehead::after {
width: clamp(56px, 7vw, 90px); left: 3%; bottom: 8px; background: rgba(241, 217, 138, .22);
}
/* ---------- 5. 看板犬の移行スペース（フッター直前・明るい背景）----------
街並み＋白い犬があるページ（トップ・採用情報・私たちについて）では footer.php で出力しない。
画像（footer-dog-sunflower.png・背景透過）は加工せず、縦横比 362:428 のまま小さく表示。
右端近くから顔を出すように、下側の一部を移行スペースの下端で隠している */
.tsunagu-prefooter {
position: relative; height: clamp(80px, 8vw, 104px); overflow: hidden;
background: #FFFCF8; border-top: 1px solid rgba(200, 166, 97, .25);
}
.tsunagu-prefooter__dog {
position: absolute; right: max(20px, calc(50% - 560px)); bottom: -22px;
width: clamp(80px, 8.4vw, 108px); height: auto; aspect-ratio: 362 / 428; max-width: none;
}
@media (max-width: 768px) {
.tsunagu-prefooter { height: 72px; }
.tsunagu-prefooter__dog { width: 72px; right: 18px; bottom: -16px; }
}
/* ---------- 6. 藍色のフッター ---------- */
body.tsunagu-page.tsunagu-page .tsunagu-footer {
--cl-sec-bg: var(--tg-indigo); /* トップページの上端の波形も藍色に */
background: var(--tg-indigo); color: var(--tg-ivory-soft); border-top: 0;
padding-block: clamp(48px, 5vw, 64px) 44px;
}
body.home.home .tsunagu-footer::after { content: none; } /* トップページの淡いグレージュの帯は使わない */
/* ロゴ（画像はそのまま）：白地のロゴが藍色に浮かないよう、温かいアイボリーの小さな台に載せる */
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo {
display: inline-block; padding: 10px 16px; background: var(--tg-ivory); border-radius: 8px; line-height: 0;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__info { color: var(--tg-ivory-soft); }
body.tsunagu-page.tsunagu-page .tsunagu-footer__name { color: #fff; }
/* 事業所名の前に小さな色の目印：訪問看護＝コーラル、ケアプランセンター＝青緑 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__info > .tsunagu-footer__name { padding-left: 10px; border-left: 3px solid var(--tsunagu-coral); }
body.tsunagu-page.tsunagu-page .tsunagu-footer__care .tsunagu-footer__name { padding-left: 10px; border-left: 3px solid var(--tsunagu-teal); }
body.tsunagu-page.tsunagu-page .tsunagu-footer__care { border-top: 1px solid rgba(227, 201, 143, .25); padding-top: 12px; margin-top: 12px; }
/* 電話番号（タップで発信）：訪問看護＝淡いコーラル、ケアプランセンター＝淡い青緑 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__info > a[href^="tel:"] { color: var(--tg-coral-on-indigo); font-weight: 700; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__care a[href^="tel:"] { color: var(--tg-teal-on-indigo); font-weight: 700; }
/* リンク：淡いゴールド */
body.tsunagu-page.tsunagu-page .tsunagu-footer__links a {
color: var(--tg-gold-light);
text-decoration: underline; text-decoration-color: rgba(227, 201, 143, .45); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__links a:hover { color: #fff; text-decoration-color: var(--tg-gold-light); }
/* 公式LINE：QRコードが読み取りやすいよう白いカードのまま（細いゴールド枠） */
body.tsunagu-page.tsunagu-page .tsunagu-footer__line { background: #fff; border: 1px solid var(--tg-gold); border-radius: 12px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line-title { color: var(--tsunagu-teal-deep); }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line-text,
body.tsunagu-page.tsunagu-page .tsunagu-footer__line-name { color: #5A4F45; }
body.tsunagu-page.tsunagu-page .tsunagu-footer :focus-visible { outline-color: var(--tg-ivory); }
/* スマートフォン（768px以下）：中央揃え。ロゴ → 事業所情報 → リンク → LINE の順（既存の並びのまま） */
@media (max-width: 768px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__inner { gap: 32px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__info { text-align: center; padding-inline: 4px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__care { width: min(100%, 320px); margin-inline: auto; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__links { justify-content: center; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line { width: min(100%, 280px); margin-inline: auto; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__qr { width: min(100%, 200px); }
}
/* =====================================================================
Classic Preview：藍色フッター LP風レイアウト（2026-09-24）
---------------------------------------------------------------------
・藍色 #263B4A の背景・配色・掲載内容はそのまま。大きなカードが並ぶ印象を弱め、
「ロゴ ／ 事業所情報・リンク ／ 公式LINE」の3エリアを余白でつなぐ一体的な構成にする。
・上端は全ページ共通の緩やかな波形（藍色）。
・下部に既存の街並み素材を CSS マスクで淡い単色にした飾り。画像ファイル自体は加工しない。
・看板犬（footer-dog-watercolor.png）はフッター内のロゴの下に全ページ1回だけ表示（PC：足元が街並みに少し重なる位置／
スマートフォン：ロゴの下に中央揃え）。以前の「街並み＋白い犬があるページでは出さない」条件は廃止。
・手書き文言（つながる。支えあう。…）はページ上部と意味が重なるためフッターには表示しない。
・淡い半透明の円（コーラル・青緑・淡い黄色、透明度 0.08〜0.16）は余白だけに配置（ページ本文側の円はこの後の節）。
・元に戻す場合：このコメントから末尾までを削除し、footer.php とともに _backup/2026-09-24_footer-lp から戻す。
===================================================================== */
:root {
--tg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L1440,60 L1440,32 C1300,14 1140,12 960,26 C780,40 620,44 460,30 C300,16 150,12 0,24 Z' fill='%23000'/%3E%3C/svg%3E");
--tg-wave-h: clamp(18px, 3vw, 36px);
--tg-card-bg: #FFFEFB; /* ロゴ台と公式LINEカードの共通背景（温かいオフホワイト） */
}
/* ---- フッター本体 ---- */
body.tsunagu-page.tsunagu-page .tsunagu-footer {
position: relative; z-index: 1;
border-top: 0;
padding-block: clamp(52px, 5.6vw, 72px) 0;
background:
radial-gradient(circle closest-side, rgba(239, 127, 116, .11) 0 98%, transparent 100%) no-repeat left -96px bottom -40px / 170px 170px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .12) 0 98%, transparent 100%) no-repeat left 22px bottom 104px / 52px 52px,
radial-gradient(circle closest-side, rgba(42, 168, 170, .12) 0 98%, transparent 100%) no-repeat right -70px top 26px / 120px 120px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .10) 0 98%, transparent 100%) no-repeat right 24px top 18px / 40px 40px,
var(--tg-indigo);
}
/* 上端の緩やかな波形（藍色）。トップページの既存の波形指定もこの形にそろえる */
body.tsunagu-page.tsunagu-page .tsunagu-footer::before {
content: "";
position: absolute; left: 0; width: 100%;
height: var(--tg-wave-h);
top: calc(-1 * var(--tg-wave-h) + 1px);
background: var(--tg-indigo);
-webkit-mask: var(--tg-wave) no-repeat 0 0 / 100% 100%;
mask: var(--tg-wave) no-repeat 0 0 / 100% 100%;
pointer-events: none;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer::after { content: none; }
/* 3エリア（PC）：ロゴ ／ 事業所情報・リンク ／ 公式LINE */
@media (min-width: 1024px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__inner {
display: grid;
grid-template-columns: minmax(200px, 236px) minmax(0, 1fr) 200px;
gap: 0 clamp(40px, 5vw, 72px);
align-items: start;
}
}
@media (min-width: 769px) and (max-width: 1023px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 200px;
gap: 28px 40px;
align-items: start;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand { grid-column: 1; grid-row: 1; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__info { grid-column: 1; grid-row: 2; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line { grid-column: 2; grid-row: 1 / span 2; }
/* タブレット：リンクが左列に来るため、円は画面端（左下・右上）の2つだけにして文字に重ねない */
body.tsunagu-page.tsunagu-page .tsunagu-footer {
background:
radial-gradient(circle closest-side, rgba(239, 127, 116, .11) 0 98%, transparent 100%) no-repeat right -70px bottom -60px / 150px 150px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .12) 0 98%, transparent 100%) no-repeat right 30px bottom 40px / 44px 44px,
var(--tg-indigo);
}
}
/* 1024〜1365px：右側の余白が狭く LINE カードに近づくため、右上の青緑の円は出さない（青緑はフッター直前の円で使用） */
@media (min-width: 1024px) and (max-width: 1365px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer {
background:
radial-gradient(circle closest-side, rgba(239, 127, 116, .11) 0 98%, transparent 100%) no-repeat right -70px bottom -50px / 160px 160px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .12) 0 98%, transparent 100%) no-repeat right 36px bottom 60px / 46px 46px,
var(--tg-indigo);
}
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand { margin: 4px 0 0; align-self: start; }
/* ロゴ：背景透過版がないため元画像（白地の logo-homecare.png）はそのまま使い、台を LINE カードと同じ温かいオフホワイト・
細い淡いゴールド枠・同じ角丸にして、余白を小さくする（画像の加工・色の変更はしない） */
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo {
display: inline-block; line-height: 0;
padding: 6px 10px;
background: var(--tg-card-bg);
border: 1px solid rgba(200, 166, 97, .6);
border-radius: 10px;
box-shadow: none;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo img { height: 50px; width: auto; }
/* 事業所情報：カードで囲まず、細いコーラル線／青緑線で区別 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__info {
font-style: normal;
font-size: 14.5px; line-height: 1.75;
color: var(--tg-ivory-soft);
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__biz,
body.tsunagu-page.tsunagu-page .tsunagu-footer__care {
display: block;
padding: 2px 0 2px 16px;
border-left: 2px solid var(--tg-coral-on-indigo);
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__care {
margin-top: 18px; padding-top: 2px;
border-top: 0;
border-left-color: var(--tg-teal-on-indigo);
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__info .tsunagu-footer__name {
display: inline-block; margin-bottom: 2px;
padding: 0; border: 0;
font-size: 15px; color: #fff; letter-spacing: .02em;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__biz a[href^="tel:"] { color: var(--tg-coral-on-indigo); font-weight: 600; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__care a[href^="tel:"] { color: var(--tg-teal-on-indigo); font-weight: 600; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__info a[href^="tel:"]:hover { text-decoration: underline; text-underline-offset: 4px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__links {
margin-top: 18px; padding-top: 10px;
border-top: 1px solid rgba(227, 201, 143, .22);
gap: 0 24px;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__links a { min-height: 40px; font-size: 14px; }
/* 公式LINE：白いカードを少し小さく。QRコードは読み取れる大きさと白い余白を確保し、装飾は重ねない */
body.tsunagu-page.tsunagu-page .tsunagu-footer__line {
width: 200px; max-width: 100%;
padding: 14px 14px 12px;
background: var(--tg-card-bg);
border: 1px solid rgba(200, 166, 97, .6);
border-radius: 10px;
box-shadow: none;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__line-title { font-size: 16px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line-text { font-size: 12.5px; line-height: 1.55; margin-top: 2px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__qr { width: 148px; margin: 8px auto 6px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line-name { font-size: 11.5px; line-height: 1.5; }
/* 下部の飾り：街並み（淡いゴールドの単色シルエット） */
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco {
display: flex; align-items: flex-end; justify-content: flex-start; gap: 12px;
margin-top: clamp(24px, 3vw, 36px);
pointer-events: none;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__town {
display: block;
flex: 0 1 620px; min-width: 0;
aspect-ratio: 2183 / 360;
background: var(--tg-gold-light);
opacity: .22;
-webkit-mask: url("../images/townscape-handdrawn.png") no-repeat 50% 100% / 100% auto;
mask: url("../images/townscape-handdrawn.png") no-repeat 50% 100% / 100% auto;
}
/* 看板犬（footer-dog-watercolor.png・ひまわりを付けた犬の透過PNG。加工なし）
ロゴの下に置き、PC では足元（水彩の影）が下部の街並みに少し重なる位置。背景・枠は付けず、縦横比はそのまま。
街並み・円の装飾より手前（z-index）。 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__mascot {
display: block; flex: none;
width: 160px; max-width: 100%; height: auto;
aspect-ratio: 1247 / 1261; object-fit: contain;
background: none; border: 0; border-radius: 0; box-shadow: none;
position: relative; z-index: 2;
pointer-events: none;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand {
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
position: relative; z-index: 2;
line-height: 0;
}
@media (min-width: 1024px) {
/* ロゴと犬をひとまとまりで左列の下側にそろえ、犬の足元を街並みの上部へ少し重ねる */
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand {
align-self: stretch; justify-content: flex-end;
margin: 0 0 -56px;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__mascot { margin-left: 36px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco { margin-top: 16px; }
}
@media (min-width: 769px) and (max-width: 1023px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__mascot { width: 150px; margin-left: 30px; }
}
/* ---- スマートフォン・タブレット（768px以下）：1列・中央揃え ---- */
@media (max-width: 768px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer {
padding-top: 44px;
background:
radial-gradient(circle closest-side, rgba(42, 168, 170, .14) 0 98%, transparent 100%) no-repeat right -58px top 18px / 100px 100px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .12) 0 98%, transparent 100%) no-repeat left -30px top 64px / 60px 60px,
var(--tg-indigo);
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand { margin: 0; align-self: center; justify-content: center; width: auto; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo img { height: 42px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__info { text-align: center; padding-inline: 0; width: 100%; line-height: 1.7; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__biz,
body.tsunagu-page.tsunagu-page .tsunagu-footer__care {
width: min(100%, 320px); margin-inline: auto;
padding: 0; border: 0;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__biz::before,
body.tsunagu-page.tsunagu-page .tsunagu-footer__care::before {
content: ""; display: block; width: 28px; height: 2px; margin: 0 auto 10px;
background: var(--tg-coral-on-indigo);
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__care::before { background: var(--tg-teal-on-indigo); }
body.tsunagu-page.tsunagu-page .tsunagu-footer__care { margin-top: 20px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__links { justify-content: center; gap: 0 20px; margin-top: 16px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line { width: min(100%, 240px); margin-inline: auto; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__qr { width: min(100%, 156px); }
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco { gap: 6px; margin-top: 24px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__town { flex: 1 1 auto; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand { align-items: center; gap: 10px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__mascot { width: 120px; margin: 0; }
}
/* =====================================================================
ページ本文の余白に置く淡い半透明の円（トップページ・各子ページ共通）
---------------------------------------------------------------------
・大きさの異なる円を2〜3個重ねた1組を、1セクションにつき1組まで。画面端で一部が見切れる配置。
・セクション内の ::after に背景として描くため横スクロールは発生しない。isolation と z-index:-1 で
本文（文字・見出し・写真・ボタン）より必ず後ろに置き、pointer-events:none でリンク操作を妨げない。
・透明度は 0.08〜0.16。スマートフォンでは小さくする。
===================================================================== */
body.tsunagu-page :where(
.tsunagu-features, .tsunagu-pamphlet, .tsunagu-contact,
.ab-intro, .rc-intro-sec, [id="environment"],
.tsunagu-section--tint
) { position: relative; isolation: isolate; }
body.tsunagu-page :where(
.tsunagu-features, .tsunagu-pamphlet, .tsunagu-contact,
.ab-intro, .rc-intro-sec, [id="environment"],
.tsunagu-section--tint:not(.tsunagu-section--tint ~ .tsunagu-section--tint)
)::after {
content: "";
position: absolute; z-index: -1;
top: var(--tg-dots-top, 18%);
width: 190px; height: 190px;
pointer-events: none;
}
/* 右端の組：青緑（大）＋淡い黄色（中）＋コーラル（小） */
body.tsunagu-page :where(.tsunagu-pamphlet, .rc-intro-sec, .tsunagu-section--tint:not(.tsunagu-section--tint ~ .tsunagu-section--tint))::after {
right: 0; left: auto;
background:
radial-gradient(circle closest-side, rgba(42, 168, 170, .12) 0 98%, transparent 100%) no-repeat right -64px top 10px / 140px 140px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .16) 0 98%, transparent 100%) no-repeat right 50px top 104px / 54px 54px,
radial-gradient(circle closest-side, rgba(239, 127, 116, .10) 0 98%, transparent 100%) no-repeat right 58px top 2px / 24px 24px;
}
/* 左端の組：コーラル（大）＋淡い黄色（小）＋青緑（小） */
body.tsunagu-page :where(.tsunagu-features, .ab-intro, [id="environment"], .tsunagu-contact)::after {
left: 0; right: auto;
background:
radial-gradient(circle closest-side, rgba(239, 127, 116, .10) 0 98%, transparent 100%) no-repeat left -70px top 24px / 150px 150px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .16) 0 98%, transparent 100%) no-repeat left 44px top 0 / 50px 50px,
radial-gradient(circle closest-side, rgba(42, 168, 170, .10) 0 98%, transparent 100%) no-repeat left 60px top 132px / 30px 30px;
}
/* お問い合わせ欄は下端寄り、トップページのお問い合わせは右端 */
body.tsunagu-page :where(.tsunagu-contact, .ab-intro, .tsunagu-section--tint)::after { top: auto; bottom: 16px; }
body.home .tsunagu-contact::after {
left: auto; right: 0;
background:
radial-gradient(circle closest-side, rgba(239, 127, 116, .10) 0 98%, transparent 100%) no-repeat right -70px top 24px / 150px 150px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .16) 0 98%, transparent 100%) no-repeat right 44px top 0 / 50px 50px,
radial-gradient(circle closest-side, rgba(42, 168, 170, .10) 0 98%, transparent 100%) no-repeat right 60px top 132px / 30px 30px;
}
.tsunagu-features { --tg-dots-top: 2%; }
.tsunagu-pamphlet { --tg-dots-top: 8%; }
.ab-intro { --tg-dots-top: 10%; }
.rc-intro-sec { --tg-dots-top: 8%; }
[id="environment"] { --tg-dots-top: 40%; }
/* 個別の位置調整：採用情報のお問い合わせ欄は下端に街並みの犬があるため上端寄り／パンフレットは本文末の注記を避けて上端寄り */
body.tsunagu-rcpage .tsunagu-contact::after,
body.tsunagu-page .tsunagu-section--tint:has(.tsunagu-note-line)::after { top: 24px; bottom: auto; }
/* 「私たちについて」冒頭：画面幅 1365px 以下では左右の余白が狭く見出しに近づくため表示しない */
@media (min-width: 769px) and (max-width: 1365px) {
body.tsunagu-page.tsunagu-page .ab-intro.ab-intro::after { content: none; }
}
/* スマートフォン・タブレット（1023px以下）：円を小さく、見切れる量を増やす */
@media (max-width: 1023px) {
body.tsunagu-page :is(
.tsunagu-features, .tsunagu-pamphlet, .tsunagu-contact,
.ab-intro, .rc-intro-sec, [id="environment"],
.tsunagu-section--tint:not(.tsunagu-section--tint ~ .tsunagu-section--tint)
)::after { width: 64px; height: 96px; top: auto; bottom: 4px; }
body.tsunagu-page :is(.tsunagu-pamphlet, .rc-intro-sec, .tsunagu-section--tint:not(.tsunagu-section--tint ~ .tsunagu-section--tint))::after,
body.home.tsunagu-page .tsunagu-contact::after {
background:
radial-gradient(circle closest-side, rgba(42, 168, 170, .12) 0 98%, transparent 100%) no-repeat right -36px top 6px / 76px 76px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .16) 0 98%, transparent 100%) no-repeat right 18px top 62px / 28px 28px;
}
body.tsunagu-page:not(.home) .tsunagu-contact::after,
body.tsunagu-page :is(.tsunagu-features, .ab-intro, [id="environment"])::after {
background:
radial-gradient(circle closest-side, rgba(239, 127, 116, .10) 0 98%, transparent 100%) no-repeat left -36px top 6px / 76px 76px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .16) 0 98%, transparent 100%) no-repeat left 18px top 62px / 28px 28px;
}
body.tsunagu-rcpage.tsunagu-rcpage.tsunagu-rcpage .tsunagu-contact.tsunagu-contact::after,
body.home.home.home .tsunagu-features.tsunagu-features::after { top: 6px; bottom: auto; }
body.tsunagu-page.tsunagu-page .tsunagu-section--tint:has(.tsunagu-note-line)::after { content: none; }
}
/* =====================================================================
フッター調整（2026-09-25）：PC のロゴ位置／スマートフォンのロゴと犬の横並び／藍色部分の水玉
・元に戻す場合：このコメントから末尾までを削除する（_backup/2026-09-25_footer-layout に変更前の style.css）。
===================================================================== */
/* 水玉による横スクロール防止（上端の波形は上方向にはみ出すため、横方向だけ切り取る） */
body.tsunagu-page.tsunagu-page .tsunagu-footer { overflow-x: clip; }
/* ---- 1. PC：ロゴの上端を中央の事業所情報の上端にそろえ、犬はロゴの下（中央そろえ）で足元を街並みに少し重ねる ---- */
@media (min-width: 1024px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand {
align-self: stretch;
align-items: center;
justify-content: space-between;
margin: 2px 0 -36px;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__mascot { width: 170px; margin-left: 0; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco { margin-top: 8px; }
}
/* ---- 3. 藍色部分の水玉（塗りの半透明円・枠線なし）：PC は右上付近と中央下部、スマートフォンはロゴと犬の周辺 ---- */
body.tsunagu-page.tsunagu-page .tsunagu-footer {
background:
/* 中央下部：コーラル（大）＋淡い黄色（中）＋青緑（小） */
radial-gradient(circle closest-side, rgba(239, 127, 116, .12) 0 98%, transparent 100%) no-repeat left calc(50% + 60px) bottom 8px / 84px 84px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .14) 0 98%, transparent 100%) no-repeat left calc(50% + 132px) bottom 52px / 40px 40px,
radial-gradient(circle closest-side, rgba(42, 168, 170, .14) 0 98%, transparent 100%) no-repeat left calc(50% + 24px) bottom 70px / 22px 22px,
var(--tg-indigo);
}
/* 右上付近（LINE 枠の上の余白）：青緑（中）＋淡い黄色（小）＋コーラル（極小） */
body.tsunagu-page.tsunagu-page .tsunagu-footer::after {
content: "";
position: absolute; z-index: 0;
top: 6px;
right: calc(max(var(--tsunagu-gutter), (100% - var(--tsunagu-max)) / 2) + 96px);
width: 120px; height: 46px;
pointer-events: none;
-webkit-mask: none; mask: none; border: 0;
background:
radial-gradient(circle closest-side, rgba(42, 168, 170, .15) 0 98%, transparent 100%) no-repeat right 0 top 0 / 44px 44px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .14) 0 98%, transparent 100%) no-repeat right 34px top 16px / 28px 28px,
radial-gradient(circle closest-side, rgba(239, 127, 116, .14) 0 98%, transparent 100%) no-repeat right 76px top 8px / 16px 16px;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer > .tsunagu-container { position: relative; z-index: 1; }
/* 画面の右端に余白が十分ある幅では、右上の端に大きめの青緑の円を1つ（見切れる配置） */
@media (min-width: 1366px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer {
background:
radial-gradient(circle closest-side, rgba(42, 168, 170, .10) 0 98%, transparent 100%) no-repeat right -70px top 40px / 120px 120px,
radial-gradient(circle closest-side, rgba(239, 127, 116, .12) 0 98%, transparent 100%) no-repeat left calc(50% + 60px) bottom 8px / 84px 84px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .14) 0 98%, transparent 100%) no-repeat left calc(50% + 132px) bottom 52px / 40px 40px,
radial-gradient(circle closest-side, rgba(42, 168, 170, .14) 0 98%, transparent 100%) no-repeat left calc(50% + 24px) bottom 70px / 22px 22px,
var(--tg-indigo);
}
}
/* ---- 2. スマートフォン：ロゴ（左）と犬（右）を横並びのひとまとまりにして中央に配置 ---- */
@media (max-width: 768px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand {
flex-direction: row; align-items: center; justify-content: center;
gap: 10px;
width: 100%; max-width: 336px; margin-inline: auto;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 96px); }
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo img { width: 205px; max-width: 100%; height: auto; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__mascot { flex: none; width: clamp(76px, 24vw, 92px); height: auto; margin: 0; }
/* 水玉：ロゴと犬の周辺（上の余白）に小さな円を3つだけ */
body.tsunagu-page.tsunagu-page .tsunagu-footer {
background:
radial-gradient(circle closest-side, rgba(239, 127, 116, .14) 0 98%, transparent 100%) no-repeat left 22px top 12px / 18px 18px,
var(--tg-indigo);
}
body.tsunagu-page.tsunagu-page .tsunagu-footer::after {
top: 4px; right: 18px; width: 64px; height: 36px;
background:
radial-gradient(circle closest-side, rgba(42, 168, 170, .15) 0 98%, transparent 100%) no-repeat right 0 top 0 / 34px 34px,
radial-gradient(circle closest-side, rgba(241, 217, 138, .14) 0 98%, transparent 100%) no-repeat right 26px top 14px / 22px 22px;
}
}
/* =====================================================================
フッター：2事業所のロゴカード＋看板犬の配置（2026-09-25）
・訪問看護／ケアプランセンターの正式ロゴ（logo-homecare.png / logo-careplan.png、加工なし）を同じ大きさのカードに縦並び。
元画像の余白の違い（ケアプランは画像の周囲に白い余白あり）を、表示の高さと位置で補正して見た目の大きさをそろえる。
・PC（1200px以上）：左から「ロゴ2枚」「事業所情報」「犬」「公式LINE」の4つのまとまり。
・タブレット／スマートフォン：ロゴ2枚（縦）と犬を横並びのひとつのグループにして中央へ。
・元に戻す場合：このコメントから末尾までを削除し、footer.php とともに _backup/2026-09-25_footer-logos から戻す。
===================================================================== */
body.tsunagu-page.tsunagu-page .tsunagu-footer__logos {
display: flex; flex-direction: column; gap: 18px;
position: relative; z-index: 2;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__logos .tsunagu-footer__logo {
--card-w: 340px; --card-h: 94px; --logo-h: 64px;
display: flex; align-items: center; justify-content: center;
width: var(--card-w); height: var(--card-h); max-width: none;
flex: none; box-sizing: border-box;
padding: 0; overflow: hidden;
background: var(--tg-card-bg);
border: 1px solid rgba(200, 166, 97, .6);
border-radius: 10px;
box-shadow: none;
line-height: 0;
}
/* 訪問看護ロゴ：画像いっぱいにロゴがあるので、そのままの高さで表示 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo--homecare img {
width: auto; height: var(--logo-h); max-width: calc(100% - 16px);
object-fit: contain;
}
/* ケアプランセンターロゴ：画像内のロゴ部分（368×96 中の約 310×73）が訪問看護ロゴと同じ高さに見えるよう拡大し、
画像内の左寄りの配置を中央へ補正（画像自体は変形・切り抜きしない） */
body.tsunagu-page.tsunagu-page .tsunagu-footer__logo--careplan img {
width: auto; height: calc(var(--logo-h) * 96 / 73); max-width: none;
object-fit: contain;
transform: translate(calc(var(--logo-h) * 13 / 73), calc(var(--logo-h) * 2.5 / 73));
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand .tsunagu-footer__mascot {
position: relative; z-index: 2;
height: auto; aspect-ratio: 1247 / 1261; object-fit: contain;
}
/* ---- PC（1200px以上）：4つのまとまり ---- */
@media (min-width: 1200px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__inner {
display: grid;
grid-template-columns: 340px minmax(0, 1fr) 208px 200px;
gap: 0 clamp(28px, 2.6vw, 36px);
align-items: start;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand { display: contents; }
/* 上の訪問看護ロゴは位置そのまま。下のケアプランセンターロゴは、中央の「ケアプランセンターTSUNAGU」欄の上端にそろう間隔 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__logos { grid-column: 1; grid-row: 1; margin-top: 2px; gap: 32px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__info { grid-column: 2; grid-row: 1; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand .tsunagu-footer__mascot {
grid-column: 3; grid-row: 1; align-self: start;
width: 208px; margin: 24px 0 0;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__line { grid-column: 4; grid-row: 1; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco { margin-top: clamp(24px, 3vw, 36px); }
}
/* ---- タブレット（769〜1199px）：ロゴ2枚と犬の横並びグループ／その下に事業所情報、右に公式LINE ---- */
@media (min-width: 769px) and (max-width: 1199px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) 200px;
gap: 32px 40px;
align-items: start;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand {
grid-column: 1; grid-row: 1;
display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
gap: 16px; margin: 0; align-self: start;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__info { grid-column: 1; grid-row: 2; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__line { grid-column: 2; grid-row: 1 / span 2; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__logos { gap: 14px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__logos .tsunagu-footer__logo { --card-w: 280px; --card-h: 78px; --logo-h: 52px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand .tsunagu-footer__mascot { width: 150px; margin: 0; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco { margin-top: clamp(24px, 3vw, 36px); }
}
/* ---- スマートフォン（768px以下）：ロゴ2枚（左・縦並び）＋犬（右）をひとつの横並びグループにして中央へ。
狭い画面では同じ比率で縮小（ロゴカード幅を基準に、高さ・ロゴ・犬を連動） ---- */
@media (max-width: 768px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand {
--sp-card-w: min(205px, calc((100vw - 50px) * .66));
display: flex; flex-direction: row; align-items: center; justify-content: center;
gap: 10px;
width: auto; max-width: calc(100vw - 40px); margin: 0 auto;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__logos { gap: 8px; }
body.tsunagu-page.tsunagu-page .tsunagu-footer__logos .tsunagu-footer__logo {
--card-w: var(--sp-card-w);
--card-h: calc(var(--sp-card-w) * 60 / 205);
--logo-h: calc(var(--sp-card-w) * 38 / 205);
min-width: 0;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__brand .tsunagu-footer__mascot {
flex: none; width: calc(var(--sp-card-w) * 104 / 205); margin: 0;
}
}
/* =====================================================================
ケアプランセンターTSUNAGU「重要事項・情報公開」セクション（2026-09-28、page-careplan.php の追加セクション専用）
・PDF の URL が登録されるまでは、セクション自体を出力しないため表示されない。
・元に戻す場合：このコメントから末尾までを削除し、page-careplan.php を _backup/2026-09-28_careplan-disclosure から戻す。
===================================================================== */
/* page-careplan.php の追加セクション専用。既存 style.css の末尾へ追記 */
.tsunagu-careplan-disclosure__intro,.tsunagu-careplan-disclosure__note{text-align:center;max-width:720px;margin:1.5rem auto;color:#263B4A;line-height:1.9}
.tsunagu-careplan-disclosure__list{list-style:none;margin:2rem auto 0;padding:0;max-width:780px;display:grid;gap:1rem}
.tsunagu-careplan-disclosure__item{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.3rem 1.5rem;border:1px solid #E3C98F;border-radius:12px;background:#FFFCF8}
.tsunagu-careplan-disclosure__name{font-weight:700;color:#263B4A}
@media(max-width:480px){.tsunagu-careplan-disclosure__item{align-items:stretch;flex-direction:column}.tsunagu-careplan-disclosure__item .tsunagu-btn{text-align:center}}
/* =====================================================================
お知らせ（NEWS）：トップページの最新3件・お知らせ一覧（page-news.php）・個別のお知らせ（single-post.php）（2026-09-30）
・WordPress の「投稿」を表示する。デザインは Classic（アイボリー・藍色・アンティークゴールド）に合わせる。
・元に戻す場合：このコメントから末尾までを削除し、front-page.php を _backup/2026-09-30_news から戻し、
page-news.php・single-post.php・template-parts/news-item.php を削除する。
===================================================================== */
/* トップページ：企業理念の直後。背景は企業理念と同じアイボリーで続ける */
body.home .tsunagu-news {
background: var(--cl-bg);
padding-block: clamp(28px, 4vw, 48px) clamp(40px, 5vw, 64px);
}
body.home .tsunagu-news .tsunagu-sechead { margin-bottom: clamp(20px, 2.6vw, 32px); }
/* 一覧（トップ・お知らせ一覧で共通） */
.tsunagu-news__list {
list-style: none; margin: 0 auto; padding: 0;
max-width: 880px;
border-top: 1px solid rgba(200, 166, 97, .45);
}
.tsunagu-news__item { margin: 0; border-bottom: 1px solid rgba(200, 166, 97, .45); }
.tsunagu-news__link {
position: relative;
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 24px;
padding: 18px 44px 18px 12px;
color: var(--tsunagu-text); text-decoration: none;
transition: background-color .2s ease;
}
.tsunagu-news__link::after {
content: ""; position: absolute; right: 16px; top: 50%;
width: 8px; height: 8px; margin-top: -4px;
border-top: 1.5px solid var(--tg-gold); border-right: 1.5px solid var(--tg-gold);
transform: rotate(45deg);
}
.tsunagu-news__link:hover { background: rgba(255, 252, 248, .9); }
.tsunagu-news__link:hover .tsunagu-news__ttl { color: var(--tsunagu-teal-deep); text-decoration: underline; text-underline-offset: 4px; }
.tsunagu-news__link:focus-visible { outline: 2px solid var(--tg-indigo); outline-offset: 2px; }
.tsunagu-news__meta { display: flex; align-items: center; gap: 12px; margin: 0; white-space: nowrap; }
.tsunagu-news__date {
font-size: 15px; letter-spacing: .04em; color: var(--tsunagu-text-soft);
font-variant-numeric: tabular-nums;
}
.tsunagu-news__cat {
display: inline-block; min-width: 6.5em;
padding: 2px 10px;
font-size: 12.5px; line-height: 1.6; text-align: center;
color: var(--tg-indigo);
background: #fff;
border: 1px solid rgba(200, 166, 97, .75);
border-radius: 999px;
}
.tsunagu-news__ttl {
font-size: 16px; line-height: 1.7; font-weight: 500;
color: var(--tg-indigo);
overflow-wrap: anywhere;
}
.tsunagu-news__more { margin: clamp(20px, 2.6vw, 28px) 0 0; text-align: center; }
.tsunagu-news__empty { text-align: center; color: var(--tsunagu-text-soft); }
/* ページ送り（お知らせ一覧） */
.tsunagu-news__pager { margin-top: clamp(28px, 3.6vw, 40px); }
.tsunagu-news__pager ul.page-numbers {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
list-style: none; margin: 0; padding: 0;
}
.tsunagu-news__pager .page-numbers li { margin: 0; }
.tsunagu-news__pager a.page-numbers,
.tsunagu-news__pager span.page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; padding: 0 12px;
border: 1px solid rgba(200, 166, 97, .75); border-radius: 999px;
background: #fff; color: var(--tg-indigo); text-decoration: none; font-size: 15px;
}
.tsunagu-news__pager span.page-numbers.current { background: var(--tg-indigo); border-color: var(--tg-indigo); color: #fff; }
.tsunagu-news__pager span.page-numbers.dots { border: 0; background: none; min-width: 24px; }
.tsunagu-news__pager a.page-numbers:hover { border-color: var(--tg-indigo); }
/* 個別のお知らせ */
.tsunagu-news-article__body {
max-width: 820px; margin: 0 auto;
padding: clamp(24px, 4vw, 48px);
background: #fff;
border: 1px solid rgba(200, 166, 97, .45);
border-radius: 12px;
}
.tsunagu-news-article__head {
margin-bottom: clamp(20px, 3vw, 32px);
padding-bottom: clamp(16px, 2vw, 20px);
border-bottom: 1px solid rgba(200, 166, 97, .45);
}
.tsunagu-news-article__title {
margin: 12px 0 0;
font-family: var(--tsunagu-font-serif); font-weight: 600;
font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5;
color: var(--tg-indigo);
overflow-wrap: anywhere;
}
.tsunagu-news-article__content { font-size: 16px; line-height: 1.95; color: var(--tsunagu-text); overflow-wrap: anywhere; }
.tsunagu-news-article__content > * + * { margin-top: 1.1em; }
.tsunagu-news-article__content h2 {
margin-top: 1.8em; padding-left: 12px;
font-family: var(--tsunagu-font-serif); font-size: clamp(19px, 2vw, 22px); line-height: 1.6; color: var(--tg-indigo);
border-left: 3px solid var(--tg-gold);
}
.tsunagu-news-article__content h3 { margin-top: 1.6em; font-size: 18px; line-height: 1.6; color: var(--tg-indigo); }
.tsunagu-news-article__content ul,
.tsunagu-news-article__content ol { padding-left: 1.5em; }
.tsunagu-news-article__content ul { list-style: disc; }
.tsunagu-news-article__content ol { list-style: decimal; }
.tsunagu-news-article__content li + li { margin-top: .4em; }
.tsunagu-news-article__content a { color: var(--tsunagu-teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.tsunagu-news-article__content img,
.tsunagu-news-article__content video,
.tsunagu-news-article__content iframe { max-width: 100%; height: auto; }
.tsunagu-news-article__content figure { margin-inline: 0; }
.tsunagu-news-article__content figcaption { font-size: 14px; color: var(--tsunagu-text-soft); text-align: center; }
.tsunagu-news-article__content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.tsunagu-news-article__content th,
.tsunagu-news-article__content td { padding: 8px 12px; border: 1px solid rgba(200, 166, 97, .45); }
.tsunagu-news-article__content .aligncenter { display: block; margin-inline: auto; }
.tsunagu-news-article__pn {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
max-width: 820px; margin: clamp(24px, 3vw, 32px) auto 0;
}
.tsunagu-news-article__pn a {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 18px;
background: #fff; border: 1px solid rgba(200, 166, 97, .45); border-radius: 10px;
color: var(--tsunagu-text); text-decoration: none;
}
.tsunagu-news-article__pn a:hover { border-color: var(--tg-indigo); }
.tsunagu-news-article__next { grid-column: 2; text-align: right; }
.tsunagu-news-article__pnlabel { font-size: 13px; color: var(--tsunagu-text-soft); }
.tsunagu-news-article__pnttl { font-size: 15px; line-height: 1.6; color: var(--tg-indigo); overflow-wrap: anywhere; }
/* 投稿の本文・タイトルは入力内容が長くなりやすいため、サイト共通の文節単位の改行（word-break: auto-phrase）ではなく
通常の改行にして、行の途中で極端に短く折り返さないようにする（長いURLは overflow-wrap で折り返す） */
.tsunagu-news-article__title,
.tsunagu-news-article__content,
.tsunagu-news-article__content :is(p, li, h2, h3, td, th, figcaption) { word-break: normal; }
/* スマートフォン：日付・カテゴリーの下にタイトル。前後のお知らせは縦並び */
@media (max-width: 640px) {
.tsunagu-news__link { grid-template-columns: minmax(0, 1fr); padding: 14px 36px 14px 4px; }
.tsunagu-news__link::after { right: 10px; }
.tsunagu-news__date { font-size: 14px; }
.tsunagu-news__ttl { font-size: 15.5px; }
.tsunagu-news-article__pn { grid-template-columns: minmax(0, 1fr); }
.tsunagu-news-article__next { grid-column: auto; text-align: left; }
}
/* =====================================================================
お知らせ（NEWS）余白微調整（2026-09-30 / ChatGPT）
・トップページのみ：企業理念→お知らせ、お知らせ見出し→記事の縦余白を少しコンパクトにする。
・一覧/個別ページ、料金シミュレーター、ケアプラン等には影響しない。
・元に戻す場合：この追記を削除するか、_backup/2026-09-30_news-spacing-chatgpt/style.css.bak を戻す。
===================================================================== */
body.home .tsunagu-news {
padding-top: clamp(18px, 2.5vw, 30px);
padding-bottom: clamp(36px, 4.5vw, 56px);
}
body.home .tsunagu-news .tsunagu-sechead {
margin-bottom: clamp(14px, 2vw, 24px);
}
@media (max-width: 720px) {
body.home .tsunagu-news {
padding-top: 22px;
padding-bottom: 40px;
}
body.home .tsunagu-news .tsunagu-sechead {
margin-bottom: 16px;
}
}
/* =====================================================================
トップページ お知らせ中央揃え（2026-09-30 / ChatGPT）
・PC/スマホ共通：トップページのお知らせのみ、日付・カテゴリー・タイトルを中央配置。
・中央レイアウトに合わせ、トップページのお知らせ行の右矢印は非表示。
・お知らせ一覧/個別ページ、料金シミュレーター、ケアプラン等には影響しない。
===================================================================== */
body.home .tsunagu-news__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 20px;
text-align: center;
}
@media (min-width: 641px) {
body.home .tsunagu-news__link::after { display: none; }
}
body.home .tsunagu-news__meta {
justify-content: center;
white-space: normal;
}
body.home .tsunagu-news__ttl {
width: 100%;
text-align: center;
}
@media (max-width: 640px) {
body.home .tsunagu-news__link {
padding: 14px 12px;
gap: 7px;
}
}
/* =====================================================================
トップページ 英字サブ見出し + NEWS PC横一列（2026-09-30 / ChatGPT）
・主要セクションの日本語見出し上に、小さな英字ラベルを追加。
・NEWS：PCは日付・カテゴリー・タイトルを中央で横一列、スマホは従来の中央2段。
・企業理念の独自デザイン、下層ページ、料金シミュレーター、ケアプランには影響しない。
===================================================================== */
body.home .tsunagu-section-kicker {
margin: 0 0 7px;
color: var(--tsunagu-teal-deep, #0e8487);
font-family: var(--tsunagu-font-sans, sans-serif);
font-size: clamp(11px, .9vw, 13px);
font-weight: 700;
line-height: 1.3;
letter-spacing: .16em;
text-align: center;
text-transform: uppercase;
}
body.home .tsunagu-section-kicker--left {
text-align: left;
}
body.home .tsunagu-section-kicker + .tsunagu-eyebrow {
margin-top: 0;
}
/* PC：NEWS 1件を横一列のまま中央へ */
@media (min-width: 641px) {
body.home .tsunagu-news__link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 18px;
padding: 18px 20px;
text-align: center;
}
body.home .tsunagu-news__meta {
flex: 0 0 auto;
justify-content: center;
white-space: nowrap;
}
body.home .tsunagu-news__ttl {
width: auto;
flex: 0 1 auto;
text-align: center;
}
}
/* スマホ：現在の中央2段レイアウトを維持 */
@media (max-width: 640px) {
body.home .tsunagu-section-kicker {
margin-bottom: 6px;
font-size: 10.5px;
letter-spacing: .14em;
}
body.home .tsunagu-section-kicker--left {
text-align: left;
}
body.home .tsunagu-news__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
padding: 14px 36px;
text-align: center;
}
body.home .tsunagu-news__link::after { right: 14px; }
body.home .tsunagu-news__meta {
justify-content: center;
white-space: normal;
}
body.home .tsunagu-news__ttl {
width: 100%;
text-align: center;
}
}
/* =========================================================
About page refinement — 2026-09-30
ABOUT US eyebrow + centered intro copy
========================================================= */
.tsunagu-pagehead__eyebrow {
margin: 0 0 14px;
color: #0e8487;
font-family: sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
line-height: 1.4;
text-align: center;
}
.ab-intro .tsunagu-split > .tsunagu-reveal {
text-align: center;
}
.ab-intro .tsunagu-split > .tsunagu-reveal .tsunagu-h2--sub,
.ab-intro .tsunagu-split > .tsunagu-reveal .tsunagu-lead {
text-align: center;
}
@media (max-width: 767px) {
.tsunagu-pagehead__eyebrow {
margin-bottom: 10px;
font-size: 0.72rem;
}
}
/* About page — move ABOUT US slightly closer to the Japanese page title */
.tsunagu-pagehead__eyebrow {
margin-top: 24px;
}
@media (max-width: 767px) {
.tsunagu-pagehead__eyebrow {
margin-top: 18px;
}
}
/* ==========================================================
TOP ABOUT story redesign — 2026-10-02
Scope: ABOUT only. Hero / philosophy / news / features /
services / business / footer retain their existing markup.
========================================================== */
body.home .tg-story-about{
position:relative;
display:grid;
grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
min-height:clamp(500px, 48vw, 690px);
padding:0 0 clamp(105px, 10vw, 150px);
overflow:hidden;
background:#fffcf8;
}
body.home .tg-story-about__visual{
position:relative;
min-height:clamp(390px, 40vw, 590px);
overflow:hidden;
clip-path:polygon(0 0, 100% 0, 95% 82%, 74% 85%, 52% 82%, 27% 87%, 0 84%);
}
body.home .tg-story-about__visual img:not(.tg-story-about__hand){
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
body.home .tg-story-about__visual-fade{
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(255,252,248,0) 54%, rgba(255,252,248,.24) 70%, rgba(255,252,248,.92) 96%, #fffcf8 100%);
pointer-events:none;
}
body.home .tg-story-about__hand{
position:absolute;
z-index:2;
left:9%;
top:16%;
width:clamp(118px, 12vw, 190px);
height:auto;
object-fit:contain;
}
body.home .tg-story-about__copy{
position:relative;
z-index:3;
align-self:center;
max-width:570px;
padding:clamp(54px, 6vw, 90px) clamp(34px, 6vw, 100px) clamp(80px, 7vw, 110px) clamp(30px, 4vw, 70px);
}
body.home .tg-story-about__copy .tsunagu-section-kicker{
margin:0 0 10px;
text-align:left;
}
body.home .tg-story-about__jp{
margin:0 0 18px;
font-size:14px;
letter-spacing:.14em;
color:#6d7e86;
}
body.home .tg-story-about__title{
margin:0;
font-family:"Noto Serif JP", serif;
font-size:clamp(36px, 3.25vw, 58px);
line-height:1.55;
font-weight:500;
color:#263b4a;
letter-spacing:.035em;
}
body.home .tg-story-about__text{
max-width:520px;
margin:22px 0 0;
font-size:clamp(15px, 1.2vw, 17px);
line-height:2;
}
body.home .tg-story-about__link{ margin:22px 0 0; }
body.home .tg-story-line{
position:absolute;
z-index:4;
left:0;
bottom:0;
width:100%;
height:clamp(150px, 16vw, 230px);
overflow:visible;
pointer-events:none;
}
body.home .tg-story-line__path{
fill:none;
stroke:url(#tgStoryGradient);
stroke-width:2.2;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
body.home .tg-story-line__dot{ vector-effect:non-scaling-stroke; }
body.home .tg-story-line__dot--coral{ fill:#f26f66; }
body.home .tg-story-line__dot--teal{ fill:#18a7aa; }
@media (max-width: 900px){
body.home .tg-story-about{
display:block;
min-height:0;
padding-bottom:110px;
}
body.home .tg-story-about__visual{
min-height:360px;
clip-path:polygon(0 0,100% 0,100% 88%,70% 94%,40% 90%,0 96%);
}
body.home .tg-story-about__visual-fade{
background:linear-gradient(180deg, rgba(255,252,248,0) 58%, rgba(255,252,248,.9) 94%, #fffcf8 100%);
}
body.home .tg-story-about__copy{
max-width:680px;
margin:0 auto;
padding:18px 24px 75px;
text-align:center;
}
body.home .tg-story-about__copy .tsunagu-section-kicker{ text-align:center; }
body.home .tg-story-about__text{ margin-left:auto; margin-right:auto; }
body.home .tg-story-about__hand{ left:7%; top:12%; width:125px; }
body.home .tg-story-line{ height:150px; }
}
@media (max-width: 560px){
body.home .tg-story-about__visual{ min-height:280px; }
body.home .tg-story-about__hand{ width:100px; }
body.home .tg-story-about__title{ font-size:clamp(30px, 9vw, 40px); }
body.home .tg-story-about__text{ line-height:1.85; }
body.home .tg-story-line{ height:125px; }
}
/* =====================================================================
TSUNAGU フッター最下部装飾 最終調整（2026-10-02）
---------------------------------------------------------------------
・フッター本体（ロゴ／住所／犬／LINE）は変更しない
・既存の townscape-handdrawn.png を左右いっぱいに表示
・街並みの上に、参考イメージのような細いコーラル〜ゴールドの線と小さなハートを重ねる
・この追記を削除すれば元の表示に戻る
===================================================================== */
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco {
position: relative;
display: block;
width: 100%;
height: clamp(92px, 10vw, 145px);
margin-top: clamp(20px, 2.5vw, 32px);
overflow: hidden;
pointer-events: none;
}
/* 街並み：左だけで終わらせず、フッターの横幅いっぱいに */
body.tsunagu-page.tsunagu-page .tsunagu-footer__town {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
width: 100%;
max-width: none;
height: clamp(70px, 8vw, 118px);
aspect-ratio: auto;
background: #E3C98F;
opacity: .48;
-webkit-mask: url("../images/townscape-handdrawn.png") repeat-x left bottom / auto 100%;
mask: url("../images/townscape-handdrawn.png") repeat-x left bottom / auto 100%;
}
/* 街並みをつなぐ一本線＋中央寄りの小さなハート */
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco::after {
content: "";
position: absolute;
z-index: 3;
left: 0;
right: 0;
bottom: clamp(23px, 2.7vw, 39px);
height: clamp(34px, 4vw, 56px);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23f26f66'/%3E%3Cstop offset='.48' stop-color='%23e59a4f'/%3E%3Cstop offset='1' stop-color='%23c8a661'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 50 C160 45 275 57 405 48 C520 40 610 43 700 48 C770 52 805 52 835 42 C850 37 852 27 844 19 C836 11 823 14 820 25 C817 14 804 11 796 19 C787 28 791 38 806 47 C850 67 955 53 1040 48 C1160 40 1290 44 1440 48' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat center / 100% 100%;
}
/* スマホ：街並みと線を少し低く・コンパクトに */
@media (max-width: 768px) {
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco {
height: 88px;
margin-top: 20px;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__town {
height: 68px;
opacity: .46;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco::after {
bottom: 20px;
height: 34px;
}
}
/* =====================================================================
公開前 最終修正 — 2026-10-02 / ChatGPT
1) TOP ABOUT下の大きな装飾ラインを完全に非表示
2) フッター最下部だけ、街並み＋細いライン＋小さなハートに整理
3) ファーストビュー／特徴／サービス／NEWS等は変更しない
===================================================================== */
/* ABOUT下に出ていた巨大ラインは使わない */
body.home .tg-story-line {
display: none !important;
}
/* ラインを消した分だけABOUT下の余白も自然に戻す */
body.home .tg-story-about {
padding-bottom: clamp(44px, 5vw, 72px) !important;
}
body.home .tg-story-about__copy {
padding-bottom: clamp(46px, 5vw, 72px) !important;
}
/* フッター最下部：装飾専用エリア */
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco {
position: relative !important;
display: block !important;
width: 100% !important;
height: clamp(92px, 9vw, 128px) !important;
margin-top: clamp(22px, 3vw, 36px) !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 街並み：端から端まで。元画像を繰り返して自然につなぐ */
body.tsunagu-page.tsunagu-page .tsunagu-footer__town {
position: absolute !important;
z-index: 1 !important;
left: 0 !important;
right: 0 !important;
bottom: -1px !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: clamp(58px, 6.7vw, 92px) !important;
min-width: 0 !important;
aspect-ratio: auto !important;
background: #E3C98F !important;
opacity: .42 !important;
-webkit-mask: url("../images/townscape-handdrawn.png") repeat-x left bottom / auto 100% !important;
mask: url("../images/townscape-handdrawn.png") repeat-x left bottom / auto 100% !important;
}
/* 街並みの少し上を通る、細くて控えめな一本線 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco::after {
content: "" !important;
position: absolute !important;
z-index: 2 !important;
left: 0 !important;
right: 0 !important;
bottom: clamp(42px, 4.8vw, 66px) !important;
height: 26px !important;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 36' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23f26f66'/%3E%3Cstop offset='.50' stop-color='%23e68f43'/%3E%3Cstop offset='1' stop-color='%23c8a661'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 22 C170 19 285 27 430 21 C570 15 690 18 790 22 C930 28 1050 16 1170 18 C1280 19 1360 20 1440 22' fill='none' stroke='url(%23g)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
no-repeat center / 100% 100% !important;
}
/* 参考画像のような「小さな♡」をライン上に独立して配置 */
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco::before {
content: "♡" !important;
position: absolute !important;
z-index: 3 !important;
left: 54% !important;
bottom: clamp(51px, 5.25vw, 72px) !important;
transform: translateX(-50%) rotate(-7deg) !important;
color: #ef8b38 !important;
font-family: Arial, sans-serif !important;
font-size: clamp(28px, 2.3vw, 38px) !important;
font-weight: 400 !important;
line-height: 1 !important;
background: transparent !important;
border: 0 !important;
}
/* スマホも同じ考え方でコンパクトに */
@media (max-width: 768px) {
body.home .tg-story-about {
padding-bottom: 38px !important;
}
body.home .tg-story-about__copy {
padding-bottom: 38px !important;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco {
height: 82px !important;
margin-top: 18px !important;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__town {
height: 58px !important;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco::after {
bottom: 40px !important;
height: 22px !important;
}
body.tsunagu-page.tsunagu-page .tsunagu-footer__deco::before {
left: 54% !important;
bottom: 47px !important;
font-size: 27px !important;
}
}
/* =====================================================================
TOP ABOUT US：「つながるライン」（2026-10-03）
・装飾素材「01 つながるライン（メイン）」を参考にした SVG（コーラル → ゴールド → ティール、途中で線がハートを描く）。
・.tg-story-about の下端に absolute で重ねる。ABOUT の高さ・余白・写真・文章・2カラムは変更しない。
・旧ライン（.tg-story-line・非表示指定）とは別のクラス名で、既存の指定と競合しない。
・元に戻す場合：このコメントから末尾までを削除し、front-page.php を _backup/2026-10-03_about-line から戻す。
===================================================================== */
body.home .tg-about-line {
position: absolute;
z-index: 1;
left: 0; bottom: 4px;
display: block;
width: 100%;
height: min(10.42vw, 150px);
overflow: visible; /* viewBox の外へ伸ばした線で画面の両端まで届かせる（セクション側の overflow: hidden で切り取り） */
pointer-events: none;
}
body.home .tg-about-line--sp { display: none; }
body.home .tg-about-line__path {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
body.home .tg-about-line__dot--coral { fill: #f26f66; }
body.home .tg-about-line__dot--teal { fill: #18a7aa; }
@media (max-width: 900px) {
body.home .tg-about-line--pc { display: none; }
body.home .tg-about-line--sp {
display: block;
height: min(18.33vw, 72px);
bottom: 2px;
}
body.home .tg-about-line--sp .tg-about-line__path { stroke-width: 1.8; }
}
/* =====================================================================
TOP：ファーストビューと ABOUT US の境界（2026-10-03・改訂3）
・「手の写真 → 緩やかな波 → 青空」：手の写真の下端を緩やかな波で切り、波の下からは ABOUT の青空写真がそのまま見える。
白いグラデーション・ぼかしは使わない（波の輪郭はくっきり、ただし緩やか）。
・しくみ
- ファーストビュー：セクションの下端だけを波形のマスクで切り抜く（波の深さは文字・ボタン下の余白より浅い）。
ファーストビューの高さ・写真・文字・ボタンは変えない。
- ABOUT：セクションを波の深さぶん（--tg-cut）だけ上へ重ね、同じ量の上余白で中身の位置を戻す。
写真の枠だけを上へ --tg-cut 延ばし、波の下に青空が見えるようにする（文章・2カラム・手書き文字・下端の形・ハートラインの位置は従来どおり）。
・元に戻す場合：このコメントから末尾までを削除する（_backup/2026-10-03_hero-about-wave-v3 に変更前の style.css）。
===================================================================== */
body.home {
--tg-cut: clamp(18px, 3vw, 36px); /* 波を描く帯の高さ（ファーストビュー下端から上へ）。波の形・深さはフッター上端と同じ */
/* フッター上端（--tg-wave）と同じ形・深さ・周期の波。フッターは波の下側を塗り、こちらは波の上側（手の写真）を残す */
--tg-cut-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,32 C1300,14 1140,12 960,26 C780,40 620,44 460,30 C300,16 150,12 0,24 Z' fill='%23000'/%3E%3C/svg%3E");
}
/* 961〜1199px は、ファーストビュー下端が写真ではなくボタンの並ぶ位置になるため、波は付けず従来どおりの境目にする */
@media (min-width: 961px) and (max-width: 1199px) {
body.home { --tg-cut: 0px; }
}
body.home.home .tsunagu-hero {
border-bottom: 0;
z-index: 1; /* ファーストビューを ABOUT の上に重ねる */
}
/* ファーストビュー全体の下端だけを波形のマスクで切り抜く（波より下は透けて ABOUT の写真が見える）。
波の深さは文字・ボタンの下の余白より浅いため、文字・ボタンは切れない。ぼかし・白いグラデーションは使わない */
body.home.home .tsunagu-hero {
background: var(--cl-bg); /* 1680px より広い画面の左右の余白も、従来と同じ色（ページ背景と同じ）で塗る */
-webkit-mask:
linear-gradient(#000, #000) left top / 100% calc(100% - var(--tg-cut) + 1px) no-repeat,
var(--tg-cut-mask) left bottom / 100% var(--tg-cut) no-repeat;
mask:
linear-gradient(#000, #000) left top / 100% calc(100% - var(--tg-cut) + 1px) no-repeat,
var(--tg-cut-mask) left bottom / 100% var(--tg-cut) no-repeat;
}
/* ABOUT：波の深さぶん上へ重ね、上余白で中身の位置を戻す（セクションの下端・高さの見え方は従来どおり） */
body.home.home .tg-story-about {
margin-top: calc(-1 * var(--tg-cut));
padding-top: var(--tg-cut);
min-height: calc(clamp(500px, 48vw, 690px) + var(--tg-cut));
}
/* 写真の枠だけ上へ延ばす（波の下に青空を見せる）。下端の切り抜き形・手書き文字の位置は従来と同じ位置になるよう補正 */
body.home.home .tg-story-about__visual {
margin-top: calc(-1 * var(--tg-cut));
clip-path: none;
}
body.home.home .tg-story-about__hand { top: calc(16% + .84 * var(--tg-cut)); }
/* 写真の下端は切り落とさず、下側 約40px だけをアイボリーへ自然に溶かす（ぼかしは使わず、グラデーションのみ） */
body.home.home .tg-story-about__visual::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(255,252,248,0) 0%, rgba(255,252,248,.55) 55%, #fffcf8 100%);
}
@media (max-width: 900px) {
body.home.home .tg-story-about { min-height: 0; }
body.home.home .tg-story-about__visual {
clip-path: none; /* スマホ・タブレットは従来のフェード（.tg-story-about__visual-fade）で下端を溶かす */
}
body.home.home .tg-story-about__visual::after { display: none; }
body.home.home .tg-story-about__hand { top: calc(12% + .88 * var(--tg-cut)); }
/* スマートフォン・タブレット：写真枠の高さ（従来は写真の縦横比 1540:1021 か最小高さ）に --tg-cut を足し、写真で枠を満たす */
body.home.home .tg-story-about__visual { min-height: calc(max(360px, 100vw * 1021 / 1540) + var(--tg-cut)); }
body.home.home .tg-story-about__visual img:not(.tg-story-about__hand) { position: absolute; inset: 0; }
}
@media (max-width: 560px) {
body.home.home .tg-story-about__visual { min-height: calc(max(280px, 100vw * 1021 / 1540) + var(--tg-cut)); }
}
/* ===== 2026-10-03 ファーストビュー最下段ボタンと下側の波の間の余白を約20px拡大 =====
※ 上側の文章・ボタン同士の間隔、波の形・位置、ABOUT US は変更しない（ヒーロー下端側の余白のみ加算） */
@media (min-width: 1200px) {
.tsunagu-hero .tsunagu-hero__content { padding-bottom: 46px; } /* 26px → 46px */
/* 余白を足した結果、文章側が写真より高くなる幅（約1200〜1300px）で写真の下にアイボリーの細い帯ができないよう、写真を下端まで満たす */
.tsunagu-hero .tsunagu-hero__img { aspect-ratio: auto; height: 100%; object-fit: cover; object-position: right center; }
}
@media (min-width: 961px) and (max-width: 1199px) {
.tsunagu-hero .tsunagu-hero__content { padding-bottom: 20px; } /* 0px → 20px（この幅は波なし） */
}
@media (max-width: 960px) {
.tsunagu-hero .tsunagu-hero__content { padding-block-end: 48px; } /* 28px → 48px */
}
/* ===== 2026-10-03 ABOUT US 街並み写真の下端（タブレット・スマホ）を波形導入前の見え方に戻す =====
写真は枠いっぱいに引き伸ばさず、従来どおり縦横比 1540:1021 の高さで表示（枠が写真より高いときは下側がアイボリーのまま平らに終わる）。
上端側は波の深さ（--tg-cut）ぶんだけ延ばしてあるので、写真の下端位置は従来と同じ。波・上端・右側フェード・文章・配置は変更しない */
@media (max-width: 900px) {
body.home.home .tg-story-about__visual img:not(.tg-story-about__hand) {
inset: 0 0 auto 0;
height: calc(100vw * 1021 / 1540 + var(--tg-cut));
}
}
/* ===== 2026-10-03 情報公開ページ「書類一覧」：PCは2列（左右同じ大きさ）、スマートフォンは1列 =====
※ カードの見た目・文言・リンクは変更せず、配置のみ。このページの書類一覧（.tsunagu-docitems--duo）だけに効く */
.tsunagu-docitems--duo .tsunagu-docitem--open { grid-column: auto; } /* 従来は全幅1列。2列に並べる */
.tsunagu-docitems--duo { align-items: stretch; } /* 同じ段の左右のカードは高さをそろえる */
.tsunagu-docitems--duo .tsunagu-docitem__body { flex: 1 1 auto; } /* スマートフォンで全カードの「PDFを開く」ボタンの幅をそろえる */
/* ==========================================================================
2026-10-07 モバイル表示の調整（Local）
- サービスの流れ：丸数字と ol 標準番号の二重表示を解消（PC・SP共通）
- それ以外はすべて max-width:767px 内のみ（PC表示には影響しない）
========================================================================== */
.tsunagu-steps { list-style: none; padding-left: 0; }
@media (max-width: 767px) {
/* 1. 2行に折り返す見出し：左右の装飾線を短く固定し、画面端まで伸びないようにする */
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub.tsunagu-h2--center,
.tsunagu-aboutpage .tsunagu-h2--sub.tsunagu-h2--center,
.tsunagu-rcpage .tsunagu-h2--sub.tsunagu-h2--center { gap: 12px; }
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub.tsunagu-h2--center::before,
body.tsunagu-page.tsunagu-page .tsunagu-h2--sub.tsunagu-h2--center::after,
.tsunagu-aboutpage .tsunagu-h2--sub.tsunagu-h2--center::before,
.tsunagu-aboutpage .tsunagu-h2--sub.tsunagu-h2--center::after,
.tsunagu-rcpage .tsunagu-h2--sub.tsunagu-h2--center::before,
.tsunagu-rcpage .tsunagu-h2--sub.tsunagu-h2--center::after { flex: 0 0 16px; }
.tsunagu-h2--sub.tsunagu-h2--center { overflow-wrap: anywhere; }
/* 2. 小さすぎる文字（10.5〜11.5px）を12px以上に */
body.home .tsunagu-section-kicker,
.tsunagu-pagehead__eyebrow,
body.tsunagu-page.tsunagu-page .tsunagu-pagehead__eyebrow,
body.tsunagu-page.tsunagu-page .tsunagu-footer__line-name { font-size: 12px; }
/* 3. フッターのタップ領域（見た目はほぼ変えず約44px） */
body.tsunagu-page.tsunagu-page .tsunagu-footer__links a { min-height: 44px; }
.tsunagu-footer__info a[href^="tel:"] { display: inline-block; padding: 14px 6px; margin: -14px -6px; }
/* 4. トップ「対象サービスエリア」：矢印を文字の右端に固定して単独で改行させない */
.tsunagu-svc__label { position: relative; display: inline-block; padding-right: 18px; }
.tsunagu-svc__label::after { position: absolute; right: 4px; top: 50%; margin: -5px 0 0; vertical-align: baseline; }
/* 6. 情報公開：事業所名を折り返す */
.tsunagu-office-name { min-width: 0; }
.tsunagu-office-name > span:not(.tsunagu-office-dot) { min-width: 0; overflow-wrap: anywhere; }
/* 10. トップ「採用情報」：RECRUIT を見出しと同じ中央揃えに */
body.home .tsunagu-section-kicker--left { text-align: center; }
}
/* ==========================================================================
2026-10-07 採用情報ページ スマホ表示 第1段階（Local）
本文・カードの文字サイズ／行間／余白を調整し、縦長感と不自然な折り返しを軽減する。
.tsunagu-rcpage（採用ページ）かつ 767px 以下のみ。PC・トップ・他ページ・HTML（br含む）は変更なし。
ヒーロー・ギャラリーは対象外。word-break:auto-phrase は iPhone Safari 非対応の可能性あり（実機確認待ち）。
========================================================================== */
@media (max-width: 767px) {
.tsunagu-rcpage .tsunagu-section--sub { padding-block: 40px; }
/* 通常本文：16px / 行間1.75 / 段落間18px。導入文は左右paddingを0にして文字幅を広げる */
.tsunagu-rcpage .tsunagu-rc-intro { padding-inline: 0; gap: 18px; }
.tsunagu-rcpage .tsunagu-rc-prose,
.tsunagu-rcpage #philosophy .tsunagu-rc-prose,
.tsunagu-rcpage #visit .tsunagu-visit { gap: 18px; }
.tsunagu-rcpage .tsunagu-rc-intro p,
.tsunagu-rcpage .tsunagu-rc-prose p,
.tsunagu-rcpage .tsunagu-visit p { font-size: 16px; line-height: 1.75; }
/* 囲み文 */
.tsunagu-rcpage .tsunagu-rc-quote { padding: 22px 18px; }
.tsunagu-rcpage .tsunagu-rc-quote p { font-size: 16px; line-height: 1.8; }
/* 「訪問看護が初めての方へ」カード */
.tsunagu-rcpage .tsunagu-train .tsunagu-card { padding: 22px 18px 24px; }
.tsunagu-rcpage .tsunagu-train .tsunagu-card__text { font-size: 16px; line-height: 1.75; }
/* 「看護とリハビリが連携する職場」カード */
.tsunagu-rcpage .tsunagu-role { padding: 24px 18px; }
.tsunagu-rcpage .tsunagu-role__text { font-size: 16px; line-height: 1.75; }
/* 「私たちが一緒に働きたい方」ほか一覧カード */
.tsunagu-rcpage .tsunagu-checks li { line-height: 1.6; padding: 12px 12px 12px 42px; }
/* 質問リスト・問い合わせカード */
.tsunagu-rcpage .tsunagu-visit__ask li { font-size: 16px; padding: 10px 14px; }
.tsunagu-rcpage .tsunagu-ccard { padding: 22px 16px; }
/* 文節単位の折り返し（Chrome系のみ有効。iPhone Safariでは効かない可能性あり） */
.tsunagu-rcpage .tsunagu-train .tsunagu-card__text,
.tsunagu-rcpage .tsunagu-role__text,
.tsunagu-rcpage .tsunagu-checks li { word-break: auto-phrase; text-wrap: pretty; }
}
/* ==========================================================================
2026-10-07 トップページ Instagram写真：横スワイプのカルーセル（Local）
・スマホ（〜767px）：約2枚＋次の写真が少し見える／タブレット（768〜1024px）：約3枚＋次／PC（1025px〜）：約4枚＋次＋左右の矢印
・写真は4:3・トリミング位置は従来どおり（.tsunagu-insta__photo の既存指定は変更しない）。写真自体にリンクは付けない。
・枚数が増減しても、li の幅は列の幅と下の変数から計算されるため CSS の変更は不要。
・右端の薄いフェード：列の右に「フェード幅と同じ余白」を持たせてあり、最後の写真までスクロールしても写真に重ならない。
・.tsunagu-insta__photos 周辺のみ。他セクション・他ページには影響しない。
========================================================================== */
body.home .tsunagu-insta__carousel {
--insta-gap: 10px; /* 写真どうしの間隔 */
--insta-n: 2.35; /* 同時に見える枚数（端数の分だけ次の写真が見える） */
--insta-gaps: 2; /* 完全に見える枚数ぶんの間隔の数 */
--insta-fade: 28px; /* 右端フェードの幅（列の右余白と同じ） */
position: relative;
margin: clamp(22px, 3vw, 32px) 0 0;
}
body.home .tsunagu-insta__photos {
display: flex; grid-template-columns: none;
gap: var(--insta-gap);
margin: 0; padding: 2px var(--insta-fade) 2px 1px;
overflow-x: auto; overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
body.home .tsunagu-insta__photos::-webkit-scrollbar { display: none; }
body.home .tsunagu-insta__photos:focus-visible { outline: 2px solid var(--tsunagu-teal); outline-offset: 2px; border-radius: var(--cl-radius-sm); }
body.home .tsunagu-insta__photo {
flex: 0 0 calc((100% - var(--insta-gap) * var(--insta-gaps)) / var(--insta-n));
scroll-snap-align: start;
}
/* 右端のごく薄いフェード（続きがあることを示す。クリックは通す） */
body.home .tsunagu-insta__carousel::after {
content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--insta-fade);
background: linear-gradient(90deg, rgba(255, 252, 248, 0), rgba(255, 252, 248, 0.78));
pointer-events: none;
}
/* PC用の矢印ボタン（スマホ・タブレットでは表示しない） */
body.home .tsunagu-insta__nav { display: none; }
@media (min-width: 768px) {
body.home .tsunagu-insta__carousel { --insta-n: 3.3; --insta-gaps: 3; }
}
@media (min-width: 1025px) {
body.home .tsunagu-insta__carousel { --insta-n: 4.3; --insta-gaps: 4; --insta-gap: 12px; }
body.home .tsunagu-insta__nav:not([hidden]) {
position: absolute; z-index: 2; top: 50%; width: 44px; height: 44px; margin-top: -22px;
display: grid; place-items: center; padding: 0; cursor: pointer;
border: 1px solid var(--cl-gold-line); border-radius: 50%;
background: #fff; color: var(--tsunagu-teal-deep);
box-shadow: 0 2px 8px rgba(38, 59, 74, 0.14);
}
body.home .tsunagu-insta__nav--prev { left: -22px; }
body.home .tsunagu-insta__nav--next { right: -22px; }
body.home .tsunagu-insta__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.home .tsunagu-insta__nav:hover:not(:disabled) { background: var(--cl-bg); }
body.home .tsunagu-insta__nav:focus-visible { outline: 2px solid var(--tsunagu-teal); outline-offset: 2px; }
body.home .tsunagu-insta__nav:disabled { opacity: 0.35; cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
body.home .tsunagu-insta__photos { scroll-behavior: auto; }
}
/* 2026-10-07 トップページ Instagram：スマホ（767px以下）のみ、小見出し（INSTAGRAM）・見出し・説明文を中央揃え
（Instagram専用の指定。小見出しの文字サイズはLocalの表示に合わせて12px。行間・文言は変更なし） */
@media (max-width: 767px) {
body.home .tsunagu-insta__intro .tsunagu-section-kicker--left { text-align: center; font-size: 12px; }
body.home .tsunagu-insta__title,
body.home .tsunagu-insta__text { text-align: center; }
}
/* ==========================================================================
2026-10-07 トップページ「パンフレット一覧」：スマホ（720px以下・縦並び）の1枚目を、2枚目と同じカード・同じ画像表示方法に（Local）
・縦長の表紙1面だけの切り出し表示はやめ、1枚目の画像（2000x1414・横長の見開き）をそのまま全体表示する。切り取りなし、縦横比のまま。
・カード幅は2枚目と同じ min(100%,360px)。画像はカード幅いっぱい（2枚目と同じ width:100%・height:auto）。
・「クリックで拡大」の帯・文字は表示しない（1枚目・2枚目とも同じ仕様）。リンク（タップでパンフレットページへ）は従来どおり。見出しはカードの外（下）。
・2枚目・3枚目、PC・タブレット（721px以上）は変更なし。
========================================================================== */
@media (max-width: 720px) {
.tsunagu-book--front .tsunagu-book__cover {
width: min(100%, 360px); height: auto; aspect-ratio: auto; overflow: hidden;
}
.tsunagu-book--front .tsunagu-book__cover img {
position: static; display: block; width: 100%; max-width: 100%; height: auto;
object-fit: contain; opacity: 1; filter: none;
}
}
/* ==========================================================================
2026-10-07 採用情報ページ スマホ表示の調整（Local）
・「街並み＋左側から覗いている犬」の装飾帯（.rc-scene）をスマホ（767px以下）で非表示にし、
問い合わせボタン下から濃紺フッターへ自然につながるよう下の余白を確保。
濃紺フッター内の右側の犬（.tsunagu-footer__mascot）は対象外で、そのまま表示。
・PC・タブレット（768px以上）は変更なし。
・「私たちが一緒に働きたい方」の「必要なときに、報告・連絡・相談ができる方」は、スマホで
「必要なときに、報告・連絡・相談が／できる方」の2行に（1行目は16文字ぶん。狭い画面では文字サイズを少しだけ下げて収める）。
========================================================================== */
@media (max-width: 767px) {
.tsunagu-rcpage .tsunagu-checks li:has(.tsunagu-checks__br--sp) { font-size: min(16px, calc((100vw - 96px) / 16)); }
/* 実際のリスト幅（コンテナ幅）基準で文字サイズを決め、折返しを禁止して
の位置だけで改行する（途中切れを防ぐ） */
.tsunagu-rcpage .tsunagu-checks { container-type: inline-size; }
.tsunagu-rcpage .tsunagu-checks li:has(.tsunagu-checks__br--sp) {
white-space: nowrap; text-wrap: nowrap; word-break: keep-all;
font-size: min(16px, calc((100cqw - 60px) / 16.2));
}
.tsunagu-rcpage .rc-scene { display: none; }
.tsunagu-rcpage .rc-visit { padding-bottom: 56px; }
}
/* ==========================================================================
2026-10-07 採用情報ページ「まずは職場を見に来ませんか？」3カード：スマホ（767px以下）は短い文言（案B）で1行表示（Local）
・PC・タブレット（768px以上）は従来の文言・表示のまま（.rc-ask__sp は非表示）。
・375〜430pxは16px。320pxなど狭い画面のみ、リスト幅に合わせて必要最小限だけ縮小（3枚とも同じ文字サイズ）。
========================================================================== */
.tsunagu-rcpage .rc-ask__sp { display: none; }
@media (max-width: 767px) {
.tsunagu-rcpage .rc-ask__pc { display: none; }
.tsunagu-rcpage .rc-ask__sp { display: inline; white-space: nowrap; }
.tsunagu-rcpage .tsunagu-visit__ask { container-type: inline-size; }
.tsunagu-rcpage .tsunagu-visit__ask li { font-size: min(16px, calc((100cqw - 34px) / 16.2)); }
}
/* ==========================================================================
2026-10-07 採用情報ページ スマホ表示（767px以下）の文字配置（Local）
・冒頭の紹介文／「TSUNAGUが大切にしていること」の説明文／「1日の働き方」の説明文／「訪問看護が初めての方へ」の各カード／
「まずはお気軽にご相談ください」の3カードより下の説明文：中央揃え。
・『一人で抱え込まないこと』は途中で改行しない（.tsunagu-rc-em を nowrap）。
・「そして、一緒に働くスタッフも大切にすること」はスマホで「そして、一緒に働く／スタッフも大切にすること」の2行・中央揃え（br は767px以下のみ有効）。
・文字サイズは変更しない。文節単位の折返し（word-break:auto-phrase）は Chrome系のみ有効（iPhone Safariは非対応の可能性）。
・PC・タブレット（768px以上）は変更なし。「4～6件程度」のカード、「私たちが一緒に働きたい方」、「まずは職場を見に来ませんか？」のカードは対象外。
========================================================================== */
.rc-br--sp { display: none; }
@media (max-width: 767px) {
.tsunagu-rcpage .tsunagu-rc-intro p,
.tsunagu-rcpage #philosophy .tsunagu-rc-prose p,
.tsunagu-rcpage #day .tsunagu-rc-prose p,
.tsunagu-rcpage #visit .tsunagu-visit > p {
text-align: center; max-width: none; margin-inline: 0; padding-inline: 0;
word-break: auto-phrase; text-wrap: pretty;
}
.tsunagu-rcpage #philosophy .tsunagu-rc-em { white-space: nowrap; }
.tsunagu-rcpage .tsunagu-values li:last-child { text-align: center; }
.tsunagu-rcpage .tsunagu-values li:last-child .rc-br--sp { display: inline; }
.tsunagu-rcpage .tsunagu-values li:last-child { white-space: nowrap; }
.tsunagu-rcpage #training .tsunagu-card__title,
.tsunagu-rcpage #training .tsunagu-card__text { text-align: center; word-break: auto-phrase; text-wrap: pretty; }
}
/* ==========================================================================
2026-10-07 採用情報ページ スマホ（767px以下）の改行位置の固定（Local）
・「看護とリハビリが連携する職場」の説明文：「TSUNAGUには、看護師・／PT・OT・STが在籍しています。」の2行・中央揃え。
・「採用・見学のお問い合わせ」カードの事業所名：「訪問看護リハビリ／ステーションTSUNAGU」の2行・中央揃え（単語途中で改行しない）。
・文字サイズは変更しない。br はスマホのみ有効（.rc-br--sp は767px以下の下記指定でだけ表示）。768px以上は変更なし。
========================================================================== */
@media (max-width: 767px) {
.tsunagu-rcpage #collaboration .tsunagu-lead,
.tsunagu-rcpage .tsunagu-ccard__name { text-align: center; white-space: nowrap; }
.tsunagu-rcpage #collaboration .tsunagu-lead .rc-br--sp,
.tsunagu-rcpage .tsunagu-ccard__name .rc-br--sp { display: inline; }
}
/* ==========================================================================
2026-10-08 スマホ（767px以下）の見出しの折り返し調整（Local）
・トップ「事業所紹介」カードの見出し／情報公開ページの事業所名／サービス紹介「在宅リハビリテーション」：
単語の途中や「ン」だけの1文字残りで折り返さないよう、（HTMLで入れた区切り位置）以外では折り返さない（word-break:keep-all）。
・「在宅リハビリテーション」は1行に収まるよう、狭い画面（約375px未満）でのみ文字サイズを少し下げる（最大21px）。
・事業所名は画面幅に合わせて文字サイズを少しだけ調整（最大21px＝PCと同じ、最小16px）。
・PC・タブレット（768px以上）は変更なし（はPCでは見た目に影響しない）。
========================================================================== */
@media (max-width: 767px) {
body.home .tsunagu-biz__title,
.tsunagu-biz__title { word-break: keep-all; overflow-wrap: anywhere; letter-spacing: .02em; font-size: clamp(16px, 4.8vw, 21px); }
/* 事業所名はスマホで2行（訪問看護リハビリステーション／TSUNAGU）・中央揃え。語の途中では折り返さない */
:is(.tsunagu-biz__title, .tsunagu-card__title, .tsunagu-ccard__name, .tsunagu-footer__name, .tsunagu-footer__line-name, .tsunagu-linebox__name) { text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.tsunagu-office-name > span:not(.tsunagu-office-dot) { word-break: keep-all; overflow-wrap: anywhere; letter-spacing: .02em; font-size: clamp(16px, 4.7vw, 21px); }
.tsunagu-title--keep { word-break: keep-all; overflow-wrap: anywhere; letter-spacing: .02em; font-size: min(21px, calc((100vw - 130px) / 12.6)); }
}
/* ==========================================================================
2026-10-08 サービス紹介「対象サービスエリア」見出し：320px前後でのわずかな横はみ出しを解消（Local）
・対象は #area-title のみ（他の見出し・他ページは変更なし）。359px以下の狭い画面でだけ文字サイズを少し下げる。
========================================================================== */
@media (max-width: 359px) {
#area-title.tsunagu-h2--sub { font-size: 22px; gap: 12px; }
}
/* ==========================================================================
2026-10-08 パンフレットページ：画像下の「クリックで拡大」の帯を非表示（Local）
・帯の表示だけを消す（画像・画像の縦横比・タップで拡大する機能 data-lightbox は変更なし）。
・1枚目・2枚目は横向き、3枚目（ケアプランのチラシ）は縦向きのまま。
========================================================================== */
.tsunagu-doc__hint { display: none; }
.tsunagu-doc__view img { border-radius: var(--tsunagu-radius-sm); } /* 帯がなくなるため画像の四隅をすべて丸める */
/* ==========================================================================
2026-10-09 サービス紹介ページ スマホ（767px以下）：「対象者」カードと「主なサービス内容」カードの改行・赤丸の位置・余白（Local）
・対象は body に #target-title と #menu-title がある（＝サービス紹介ページ）の中だけ。PC・タブレット（768px以上）、他ページは変更なし。
・長い箇条書きは、意味のまとまり（.tsunagu-ph）ごとに折り返し、「方」だけの行や文節の途中での改行を避ける。文章の内容は変更しない。
・箇条書きの赤丸は1行目の文字の高さの中央に合わせる。見出しの赤丸と箇条書きの赤丸は同じ縦線（文字の開始位置22px）にそろえる。
・サービス内容の見出しは、赤丸を横に固定（flex）して、折り返しても文字が赤丸の下にもぐり込まない。文字サイズは画面幅に合わせて最大21pxまで。
========================================================================== */
@media (max-width: 767px) {
body.tsunagu-page:has(#target-title):has(#menu-title) .tsunagu-ph { display: inline-block; }
body.tsunagu-page:has(#target-title):has(#menu-title) :is(#target, #menu) .tsunagu-list { gap: 8px; }
body.tsunagu-page:has(#target-title):has(#menu-title) :is(#target, #menu) .tsunagu-list li { padding-left: 22px; line-height: 1.7; overflow-wrap: anywhere; }
body.tsunagu-page:has(#target-title):has(#menu-title) :is(#target, #menu) .tsunagu-list li::before { left: 1px; top: calc(.85em - 4px); }
body.tsunagu-page:has(#target-title):has(#menu-title) #menu .tsunagu-card__title {
display: flex; align-items: flex-start; word-break: keep-all; overflow-wrap: anywhere; letter-spacing: .02em;
font-size: min(21px, calc((100vw - 130px) / 12.6));
}
body.tsunagu-page:has(#target-title):has(#menu-title) #menu .tsunagu-card__title::before { flex: none; margin-right: 12px; margin-top: calc(.75em - 5px); }
}
/* Mobile-only TSUNAGU feature navigation; desktop untouched */
.tg-mobile-feature-links {display:none;}
@media(max-width:767px){
.tsunagu-features .tsunagu-grid-3,.tsunagu-features .tsunagu-features__more{display:none!important;}
.tg-mobile-feature-links{display:grid;gap:12px;margin:18px 0 0;}
.tg-mobile-feature-link{display:grid;grid-template-columns:46px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:16px 14px;background:#fff;border:1px solid #eee4dd;border-radius:16px;text-decoration:none!important;color:#293f45!important;box-shadow:0 3px 12px rgba(40,50,50,.04);min-height:78px;}
.tg-mobile-feature-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fbe9e5;color:#d77e79;font-size:22px;}
.tg-mobile-feature-link:nth-child(2) .tg-mobile-feature-icon{background:#e8f4f1;color:#248e89;}
.tg-mobile-feature-link:nth-child(3) .tg-mobile-feature-icon{background:#fff2d9;color:#bb923c;}
.tg-mobile-feature-link:nth-child(4) .tg-mobile-feature-icon{background:#e9f1f5;color:#547d90;}
.tg-mobile-feature-link strong{display:block;font-size:15px;line-height:1.5;}
.tg-mobile-feature-link small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:#69777a;}
.tg-mobile-feature-arrow{color:#198780;font-size:19px;}
}
/* 2026-10 Local review: concise feature navigation, clear actions, careplan shortcut */
.tg-feature-links-all {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1040px;margin:26px auto 0;}
.tg-feature-links-all .tg-mobile-feature-link {display:grid;grid-template-columns:58px minmax(0,1fr) 24px;align-items:center;gap:16px;padding:23px;background:#fff;border:1px solid #e9e0d7;border-radius:17px;text-decoration:none!important;color:#293f45!important;min-height:118px;box-shadow:0 4px 16px rgba(40,50,50,.055);transition:transform .18s,box-shadow .18s;}
.tg-feature-links-all .tg-mobile-feature-link:hover {transform:translateY(-3px);box-shadow:0 8px 22px rgba(40,50,50,.11);}
.tg-feature-links-all .tg-mobile-feature-icon {display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fbe9e5;color:#d77e79;font-size:25px;}
.tg-feature-links-all .tg-mobile-feature-link:nth-child(2) .tg-mobile-feature-icon {background:#e8f4f1;color:#248e89;}
.tg-feature-links-all .tg-mobile-feature-link:nth-child(3) .tg-mobile-feature-icon {background:#fff2d9;color:#bb923c;}
.tg-feature-links-all .tg-mobile-feature-link:nth-child(4) .tg-mobile-feature-icon {background:#e9f1f5;color:#547d90;}
.tg-feature-links-all strong {display:block;font-size:19px;line-height:1.5;}
.tg-feature-links-all small {display:block;margin-top:5px;font-size:14px;color:#69777a;}
.tg-feature-links-all .tg-mobile-feature-arrow {color:#198780;font-size:22px;}
.tsunagu-features .tsunagu-grid-3,.tsunagu-features .tsunagu-features__more {display:none!important;}
.tsunagu-spec-card__link .tg-clear-action {display:inline-flex!important;align-items:center;justify-content:center;max-width:100%;min-height:48px!important;padding:10px 18px!important;border-radius:9px;background:#117e7d!important;color:#fff!important;text-decoration:none!important;font-size:15px;font-weight:700;line-height:1.6!important;box-shadow:0 3px 9px rgba(0,90,88,.12);}
.tsunagu-spec-card__link .tg-clear-action:hover,.tsunagu-spec-card__link .tg-clear-action:focus-visible {background:#096765!important;color:#fff!important;}
.tsunagu-spec-card__link .tg-clear-action .tsunagu-extico {stroke:#fff!important;}
.tg-careplan-shortcut {display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:10px 14px;border:1px solid #168783;border-radius:9px;color:#126e6c!important;background:#eef8f6;text-decoration:none!important;font-weight:700;font-size:13px;white-space:nowrap;}
.tg-careplan-shortcut:hover {background:#dff2ee;}
.tg-careplan-nav-shortcut {display:none;}
@media(max-width:900px){
.tg-feature-links-all {grid-template-columns:1fr;gap:12px;margin:18px 0 0;}
.tg-feature-links-all .tg-mobile-feature-link {grid-template-columns:46px minmax(0,1fr) 20px;gap:12px;padding:16px 14px;min-height:78px;}
.tg-feature-links-all .tg-mobile-feature-icon {width:44px;height:44px;font-size:22px;}
.tg-feature-links-all strong {font-size:15px;}
.tg-feature-links-all small {font-size:12px;margin-top:3px;}
.tg-careplan-shortcut {display:none;}
.tg-careplan-nav-shortcut {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 14px;padding:14px 16px;border-radius:9px;background:#e7f4f1;color:#116c69!important;font-weight:700;text-decoration:none!important;}
}
@media(min-width:901px) and (max-width:1150px){.tg-careplan-shortcut{font-size:12px;padding:8px 10px;}}
/* TSUNAGU feature cards: consistent vector line icons */
.tg-feature-links-all .tg-feature-line-icon { width:26px; height:26px; display:block; flex-shrink:0; }
/* 2026-10 Local: careplan header CTA – teal fill, house outline, larger label */
.tsunagu-nav__cta .tsunagu-btn,
body.home .tsunagu-nav__cta .tsunagu-btn,
body.tsunagu-page.tsunagu-page .tsunagu-nav__cta .tsunagu-btn {
display:inline-flex; align-items:center; justify-content:center; gap:9px;
background:#087f83!important; border:1px solid #087f83!important; color:#fff!important;
border-radius:10px; padding:0 16px; min-height:46px; font-size:16px; font-weight:700;
box-shadow:0 2px 7px rgba(0,80,80,.12); text-decoration:none; white-space:nowrap;
}
.tsunagu-nav__cta .tsunagu-btn::before {
content:""; display:inline-block; flex:none; width:20px; height:20px;
background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7'/%3E%3Cpath d='M5 9v12h14V9'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E");
}
.tsunagu-nav__cta .tsunagu-btn:hover,.tsunagu-nav__cta .tsunagu-btn:focus-visible {background:#06696d!important;color:#fff!important;}
.tsunagu-nav__cta .tsunagu-btn::after {display:none!important;}
@media(max-width:1199px){.tsunagu-js .tsunagu-nav__cta .tsunagu-btn {font-size:17px;min-height:52px;} .tg-careplan-nav-shortcut {display:none!important;}}
/* ==========================================================================
2026-10-09 「TSUNAGUの特徴」ページの再構成（Local）
・対象は .tg-ft（特徴ページの本文）の中だけ。ヘッダー・フッター・他ページには影響しない。
・白基調、ティール／淡いピンク／淡いイエローをアクセントに。アイコンは最小限（リンクボタンの外部リンク印とPT/OT/STの頭文字のみ）。
・リンクボタン .tg-ft-btn はすべて同じデザイン（ティール背景・白文字・同じ角丸／高さ／文字サイズ・右端に同じアイコン）。
========================================================================== */
.tg-ft { --ft-teal: #0e8487; --ft-teal-bg: #eef9f8; --ft-teal-line: #cfe9e7; --ft-pink-bg: #fdf1ef; --ft-pink-line: #f6d6d1; --ft-yel-bg: #fcf6e0; --ft-yel-line: #efe0a8; --ft-ink: #263b4a;
padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.tg-ft * { box-sizing: border-box; }
.tg-ft-sec { position: relative; margin: 0 0 24px; padding: 22px 18px 24px; background: #fff; border: 1px solid var(--ft-teal-line); border-radius: 20px; box-shadow: 0 6px 24px rgba(40, 70, 70, .06); }
.tg-ft-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "title" "lead"; justify-items: center; align-items: center; gap: 10px; text-align: center; margin-bottom: 20px; }
.tg-ft-head .tg-ft-num { grid-area: num; } .tg-ft-head .tg-ft-title { grid-area: title; } .tg-ft-head .tg-ft-lead { grid-area: lead; margin-top: 0; }
.tg-ft-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ft-teal-bg); border: 1px solid var(--ft-teal-line); color: var(--ft-teal); font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 22px; line-height: 1; }
.tg-ft-title { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(22px, 6vw, 30px); line-height: 1.45; color: var(--ft-ink); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.tg-ft-title--center { text-align: center; margin-bottom: 16px; }
.tg-ft-lead { margin-top: 8px; font-size: 16px; line-height: 1.8; color: var(--tsunagu-text-soft); }
.tg-ft-heart { display: none; }
.tg-ft-h3 { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 18px; line-height: 1.55; color: var(--ft-ink); word-break: keep-all; overflow-wrap: anywhere; }
.tg-ft-h3--bar { padding-left: 12px; border-left: 4px solid var(--tsunagu-teal); font-family: var(--tsunagu-font-sans); font-weight: 700; font-size: 17px; }
.tg-ft-text { margin-top: 8px; font-size: 16px; line-height: 1.8; }
.tg-ft-note { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--tsunagu-text-soft); }
.tg-ft-note--center { text-align: center; }
/* 01 */
.tg-ft-grid1 { display: grid; gap: 14px; }
.tg-ft-col { display: grid; gap: 14px; align-content: start; }
.tg-ft-tile { padding: 18px 16px; border-radius: 14px; border: 1px solid; }
.tg-ft-tile--pink { background: var(--ft-pink-bg); border-color: var(--ft-pink-line); }
.tg-ft-tile--teal { background: var(--ft-teal-bg); border-color: var(--ft-teal-line); }
.tg-ft-tile .tg-ft-btn { margin-top: 14px; }
.tg-ft-career { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tg-ft-career li { position: relative; padding-left: 20px; word-break: keep-all; overflow-wrap: anywhere; font-size: 16px; line-height: 1.7; }
.tg-ft-career li::before { content: ""; position: absolute; left: 2px; top: calc(.85em - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--tsunagu-teal); }
.tg-ft-stat { padding: 20px 16px; text-align: center; border-radius: 14px; background: var(--ft-teal-bg); border: 1px solid var(--ft-teal-line); }
.tg-ft-stat__label { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 18px; color: var(--ft-ink); }
.tg-ft-stat__num { margin-top: 4px; line-height: 1.1; color: var(--ft-teal); font-family: var(--tsunagu-font-serif); font-weight: 600; }
.tg-ft-stat__n { font-size: 60px; letter-spacing: .02em; }
.tg-ft-stat__u { margin-left: 6px; font-size: 24px; }
.tg-ft-stat__period { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--tsunagu-text-soft); }
.tg-ft-flag { margin-top: 12px; padding: 10px 12px; text-align: left; font-size: 13px; line-height: 1.7; color: #7a5b00; background: var(--ft-yel-bg); border: 1px dashed #d9aa38; border-radius: 10px; }
/* リンクボタン（全ページ内のリンクボタンを同じ見た目に統一） */
.tg-ft-btn { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; max-width: 360px; min-height: 60px; padding: 8px 16px 8px 20px; border-radius: 12px; background: var(--ft-teal); color: #fff !important; font-size: 15px; font-weight: 700; line-height: 1.45; text-align: center; text-decoration: none; box-shadow: 0 2px 8px rgba(14, 132, 135, .22); transition: background-color .2s, transform .2s; }
.tg-ft-btn:hover, .tg-ft-btn:focus-visible { background: #096765; transform: translateY(-1px); }
.tg-ft-btn:focus-visible { outline: 3px solid #f6c85f; outline-offset: 2px; }
.tg-ft-btn__label { display: block; }
.tg-ft-ph { display: inline-block; word-break: keep-all; overflow-wrap: anywhere; }
.tg-ft-extico { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 02 */
.tg-ft-roles { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.tg-ft-roles li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--tsunagu-border); }
.tg-ft-roles__mark { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 19px; }
.tg-ft-roles__mark--teal { background: var(--ft-teal-bg); color: var(--ft-teal); border: 1px solid var(--ft-teal-line); }
.tg-ft-roles__mark--pink { background: var(--ft-pink-bg); color: #c2473f; border: 1px solid var(--ft-pink-line); }
.tg-ft-roles__mark--yellow { background: var(--ft-yel-bg); color: #8a6a0e; border: 1px solid var(--ft-yel-line); }
.tg-ft-roles__name { font-weight: 700; font-size: 16px; line-height: 1.5; }
.tg-ft-roles__sub { font-size: 14px; line-height: 1.5; color: var(--tsunagu-text-soft); }
.tg-ft-diseases { margin-bottom: 18px; }
.tg-ft-dgrid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.tg-ft-dgrid li { padding: 12px 14px; border-radius: 12px; background: var(--ft-teal-bg); border: 1px solid var(--ft-teal-line); }
.tg-ft-dgrid strong { display: block; font-size: 16px; line-height: 1.6; color: var(--ft-ink); }
.tg-ft-dgrid span { display: block; font-size: 15px; line-height: 1.7; color: var(--tsunagu-text-soft); overflow-wrap: anywhere; }
.tg-ft-lsvt { display: grid; gap: 14px; padding: 18px 16px; border-radius: 14px; background: var(--ft-yel-bg); border: 1px solid var(--ft-yel-line); }
.tg-ft-lsvt__btns { display: grid; gap: 10px; align-content: center; }
/* 03 */
.tg-ft-trio { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.tg-ft-trio li { padding: 12px 16px; border-radius: 12px; border: 1px solid; }
.tg-ft-trio strong { display: block; font-size: 17px; line-height: 1.6; color: var(--ft-ink); }
.tg-ft-trio span { display: block; font-size: 15px; line-height: 1.7; color: var(--tsunagu-text-soft); }
.tg-ft-trio li.tg-ft-trio__pink { background: var(--ft-pink-bg); border-color: var(--ft-pink-line); }
.tg-ft-trio li.tg-ft-trio__teal { background: var(--ft-teal-bg); border-color: var(--ft-teal-line); }
.tg-ft-trio li.tg-ft-trio__yellow { background: var(--ft-yel-bg); border-color: var(--ft-yel-line); }
.tg-ft-split { display: grid; gap: 14px; align-items: center; }
.tg-ft-split .tg-ft-text { margin-top: 0; }
/* 04 */
.tg-ft-sec--support { background: #fbfdfd; }
.tg-ft-support { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.tg-ft-support li { padding: 14px 16px; text-align: center; border-radius: 12px; background: var(--ft-pink-bg); border: 1px solid var(--ft-pink-line); }
.tg-ft-support li:nth-child(2) { background: var(--ft-teal-bg); border-color: var(--ft-teal-line); }
.tg-ft-support strong { font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: 18px; color: var(--ft-ink); }
.tg-ft-sec--support .tsunagu-cta-row { margin-top: 18px; }
/* PC・タブレット */
@media (min-width: 768px) {
.tg-ft-sec { padding: 32px 32px 34px; margin-bottom: 30px; }
.tg-ft-head { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "num title" ". lead"; justify-items: stretch; text-align: left; gap: 8px 20px; margin-bottom: 22px; }
.tg-ft-num { width: 64px; height: 64px; font-size: 26px; }
.tg-ft-title { font-size: clamp(24px, 2.6vw, 30px); }
.tg-ft-lead { font-size: 17px; max-width: 760px; }
.tg-ft-heart { display: block; position: absolute; right: 0; top: -6px; width: 56px; height: 50px; fill: none; stroke: #f26f66; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.tg-ft-grid1 { gap: 20px; }
.tg-ft-col { gap: 20px; }
.tg-ft-tile { padding: 22px 24px; }
.tg-ft-stat { padding: 26px 24px; }
.tg-ft-stat__n { font-size: 72px; }
.tg-ft-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tg-ft-roles li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; padding: 16px 12px; }
.tg-ft-roles__mark { grid-row: auto; margin-bottom: 4px; }
.tg-ft-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tg-ft-lsvt { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px; padding: 22px 24px; align-items: center; }
.tg-ft-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tg-ft-trio li { text-align: center; padding: 16px 14px; }
.tg-ft-split { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 28px; }
.tg-ft-support { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tg-ft-btn { font-size: 15px; }
}
@media (min-width: 1000px) { .tg-ft-grid1 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .tg-ft-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359px) { .tg-ft-sec { padding: 18px 14px 20px; } .tg-ft-head { gap: 10px; } .tg-ft-num { width: 44px; height: 44px; font-size: 19px; } .tg-ft-btn { padding-left: 14px; padding-right: 12px; font-size: 14px; } .tg-ft-stat__n { font-size: 52px; } }
/* ==========================================================================
2026-10-09 情報公開ページ「職員体制」：大見出しは「職員体制」のみ、事業所名は2行・中央揃えで表の上に配置（Local）
・訪問看護：「訪問看護リハビリステーション」／「TSUNAGU」、居宅：「ケアプランセンター」／「TSUNAGU」（各行は途中で折り返さない）。
・事業所名の文字サイズは画面幅に合わせて最大24px（1行目が収まる大きさ）。表のキャプション（重複見出し）は画面に出さず、読み上げ用に残す。
・クラス .tsunagu-staff-office / .tsunagu-staff-next は情報公開ページにしかないので、他ページへの影響なし。
========================================================================== */
.tsunagu-staff-office {
margin: 0 0 18px; text-align: center; font-family: var(--tsunagu-font-serif); font-weight: 600; line-height: 1.5; letter-spacing: .02em;
font-size: min(24px, calc((100vw - 64px) / 14.6)); color: var(--tg-indigo, var(--tsunagu-text));
}
.tsunagu-staff-office > span { display: block; white-space: nowrap; }
.tsunagu-staff-next { margin-top: 56px; }
@media (min-width: 768px) { .tsunagu-staff-office { font-size: 26px; margin-bottom: 22px; } .tsunagu-staff-next { margin-top: 64px; } }
/* ==========================================================================
2026-10-09 特徴ページ 最終調整（Local）：リンクボタンの表記（スマホは短く）と高さの統一、「連携」の説明文とボタンの余白
・対象は .tg-ft（特徴ページの本文）の中だけ。PC（768px以上）のボタン表記は従来どおり。
========================================================================== */
.tg-ft-l-sp { display: none; }
.tg-ft-btn { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 767px) {
.tg-ft-l-pc { display: none; }
.tg-ft-l-sp { display: block; white-space: nowrap; }
.tg-ft-btn { font-size: clamp(13px, 3.9vw, 15px); }
.tg-ft-split { gap: 16px; padding-top: 16px; border-top: 1px dashed var(--ft-teal-line); }
.tg-ft-trio { margin-bottom: 18px; }
}
@media (max-width: 359px) { .tg-ft-btn { padding-left: 10px; padding-right: 10px; gap: 6px; } }
@media (min-width: 768px) { .tg-ft-split { align-items: center; } .tg-ft-trio { margin-bottom: 20px; } }
/* ==== 2026-10-10 特徴ページ：在宅看取り実績カードを文章中心に／ケアプランセンター「こんなお悩み」の文言と折り返し（Localのみ） ==== */
.tg-ft-stat { padding: 24px 18px 18px; }
.tg-ft-stat__label { margin: 0; font-size: clamp(19px, 5.6vw, 22px); line-height: 1.55; letter-spacing: .04em; text-align: center; text-wrap: balance; }
.tg-ft-stat__body { margin-top: 14px; text-align: left; }
.tg-ft-stat__body p { margin: 0; font-size: 16px; line-height: 1.9; color: var(--tsunagu-text); text-wrap: pretty; }
.tg-ft-stat__body p + p { margin-top: 14px; }
.tg-ft-stat__foot { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--ft-teal-line); text-align: center; font-size: 13px; line-height: 1.7; color: var(--tsunagu-text-soft); }
.tg-ft-stat__foot p { margin: 0; }
.tg-ft-stat__foot p + p { margin-top: 2px; }
@media (min-width: 900px) { .tg-ft-stat { padding: 30px 28px 20px; } .tg-ft-stat__label { font-size: 22px; } }
.tsunagu-wph { display: inline-block; overflow-wrap: anywhere; }
@media (max-width: 720px) {
body.tsunagu-page:has(#worry-title) .tsunagu-worries li { gap: 10px; padding: 16px 14px 16px 16px; font-size: 16px; }
}
.tsunagu-worry__t { display: block; min-width: 0; }
/* ==== 2026-10-10 看取り実績カード：本文を中央揃え／人数行をティール色に（Localのみ） ==== */
.tg-ft-stat__body { text-align: center; }
.tg-ft-stat__body p { text-wrap: balance; }
.tg-ft-stat__foot p:first-child { color: var(--ft-teal); }
/* ==========================================================================
2026-10-10 トップページ「企業理念」カード：カード全体を企業理念ページへのリンクにし、ホバー／フォーカス／タップで反応する
・通常時は従来どおり（白背景・ゴールド系の枠線）。カーソルを置く・キーボードでフォーカスする・タップすると、背景がティールに、文字と右矢印が白に。
・右矢印は常時表示。ホバー時は少し右へ動く。スマホ（ホバー不可）は押している間にティールになる。
・対象はトップページの .tsunagu-philo--link だけ。他のページ・他のカードは変更なし。
========================================================================== */
body.home a.tsunagu-philo--link { display: block; color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.home a.tsunagu-philo--link { transition: background-color .28s ease, border-color .28s ease, outline-color .28s ease; }
.tsunagu-anim body.home a.tsunagu-philo--link.tsunagu-reveal {
transition: opacity .7s ease, transform .7s ease, background-color .28s ease, border-color .28s ease, outline-color .28s ease;
transition-delay: var(--tsunagu-delay, 0s), var(--tsunagu-delay, 0s), 0s, 0s, 0s;
}
.tsunagu-philo--link .tsunagu-homephilo__title,
.tsunagu-philo--link .tsunagu-philo__main,
.tsunagu-philo--link .tsunagu-philo__catch { transition: color .28s ease; }
.tsunagu-philo__go { position: absolute; z-index: 1; right: clamp(14px, 4.5vw, 30px); top: 50%; display: flex; margin-top: -12px; color: var(--tsunagu-teal-deep); transition: color .28s ease; }
.tsunagu-philo__go svg { display: block; transition: transform .28s ease; }
/* タップ中だけティール（:active）。離すと通常（白）に戻る。タップ後に緑が残らないよう、:focus-visible はマウス/キーボード環境に限定 */
body.home a.tsunagu-philo--link:active { background: var(--tsunagu-teal-deep); border-color: var(--tsunagu-teal-deep); outline-color: rgba(255, 255, 255, .4); }
body.home a.tsunagu-philo--link:active :is(.tsunagu-homephilo__title, .tsunagu-philo__main, .tsunagu-philo__catch, .tsunagu-philo__go) { color: #fff; }
body.home a.tsunagu-philo--link:active .tsunagu-philo__go svg { transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) {
body.home a.tsunagu-philo--link:focus-visible { background: var(--tsunagu-teal-deep); border-color: var(--tsunagu-teal-deep); outline: 3px solid #f6c85f; outline-offset: 3px; }
body.home a.tsunagu-philo--link:focus-visible :is(.tsunagu-homephilo__title, .tsunagu-philo__main, .tsunagu-philo__catch, .tsunagu-philo__go) { color: #fff; }
body.home a.tsunagu-philo--link:focus-visible .tsunagu-philo__go svg { transform: translateX(6px); }
}
@media (hover: hover) {
body.home a.tsunagu-philo--link:hover { background: var(--tsunagu-teal-deep); border-color: var(--tsunagu-teal-deep); outline-color: rgba(255, 255, 255, .4); }
body.home a.tsunagu-philo--link:hover :is(.tsunagu-homephilo__title, .tsunagu-philo__main, .tsunagu-philo__catch, .tsunagu-philo__go) { color: #fff; }
body.home a.tsunagu-philo--link:hover .tsunagu-philo__go svg { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
body.home a.tsunagu-philo--link, .tsunagu-philo--link :is(.tsunagu-homephilo__title, .tsunagu-philo__main, .tsunagu-philo__catch, .tsunagu-philo__go, svg) { transition: none !important; }
}
/* ==========================================================================
2026-10-10 トップページ「TSUNAGUの特徴」4枚のカード（淡い色分け・右端の矢印・ホバー）／「特徴」ページの新セクション「訪問看護」
・トップ：既存の .tg-feature-links-all を、カード全体がリンクの淡い色分けカードにする（PC 2列×2段・スマホ 1列）。
・特徴ページ：#home-nursing（02 訪問看護）の紹介文と「主な支援内容」4枚のカード。
========================================================================== */
.tg-feature-links-all .tg-mobile-feature-link { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(1) { background: #fdf1ef; border-color: #f6d6d1; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(2) { background: #eef9f8; border-color: #cfe9e7; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(3) { background: #fcf6e0; border-color: #efe0a8; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(4) { background: #eef4f8; border-color: #d6e4ec; }
.tg-feature-links-all .tg-mobile-feature-arrow { display: block; font-size: 22px; line-height: 1; color: var(--tsunagu-teal-deep); transition: transform .25s ease; }
.tg-feature-links-all .tg-mobile-feature-link:active { transform: scale(.985); box-shadow: 0 2px 8px rgba(40, 50, 50, .12); }
.tg-feature-links-all .tg-mobile-feature-link:focus-visible { outline: 3px solid #f6c85f; outline-offset: 3px; }
@media (hover: hover) {
.tg-feature-links-all .tg-mobile-feature-link:nth-child(1):hover { background: #fbe6e2; border-color: #efbdb6; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(2):hover { background: #e0f3f1; border-color: #b4dcd9; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(3):hover { background: #faefc8; border-color: #e6cf84; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(4):hover { background: #e1ecf3; border-color: #b8cfdc; }
.tg-feature-links-all .tg-mobile-feature-link:hover { box-shadow: 0 10px 26px rgba(40, 70, 70, .14); }
.tg-feature-links-all .tg-mobile-feature-link:hover .tg-mobile-feature-arrow { transform: translateX(5px); }
}
.tg-feature-links-all strong { word-break: keep-all; overflow-wrap: anywhere; }
.tg-feature-links-all small { word-break: keep-all; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .tg-feature-links-all .tg-mobile-feature-link, .tg-feature-links-all .tg-mobile-feature-arrow { transition: none; } }
.tg-ft-lead--catch { text-align: center; font-family: var(--tsunagu-font-serif); font-weight: 600; font-size: clamp(16px, 4.4vw, 20px); line-height: 1.7; color: var(--ft-teal); }
.tg-ft-intro { margin-top: 0; text-align: center; }
.tg-ft-nw { white-space: nowrap; }
@media (min-width: 768px) {
.tg-ft-intro { text-align: left; }
.tg-ft-lead--catch { text-align: left; font-size: 22px; }
}
@media (max-width: 359px) { .tsunagu-philo__go { right: 8px; } .tsunagu-philo__go svg { width: 20px; height: 20px; } }
/* 特徴ページ 02 訪問看護：英語見出し・疾患一覧（既存の .tg-ft-dgrid と同じデザイン）を2列、セクション最後のリンク */
.tg-ft-head .tg-ft-titlebox { grid-area: title; min-width: 0; }
.tg-ft-en { margin: 0 0 2px; font-family: var(--tsunagu-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--ft-teal); }
@media (min-width: 768px) { .tg-ft-en { font-size: 13px; } }
@media (min-width: 1000px) { .tg-ft-dgrid.tg-ft-dgrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-ft-nursing-link { margin-top: 20px; }
@media (min-width: 768px) { .tg-ft-nursing-link { display: flex; justify-content: center; } .tg-ft-nursing-link .tg-ft-btn { min-width: 340px; } }
.tg-ft-intro + .tg-ft-diseases { margin-top: 20px; }
.tg-ft-dgrid.tg-ft-dgrid--two + .tg-ft-note { margin-top: 12px; }
/* ==========================================================================
2026-10-10 TOP「心を繋ぐ」カード：スマホ(767px以下)のみ下部リンク帯（中央揃え）
・帯はカード()内の装飾要素。別リンクではなく、カード全体が1つのリンク
・PC(768px以上)は帯を表示せず、従来のホバー(ティール)のまま
・スマホのタップ中(:active)は帯が少し濃くなるだけ。離すと元に戻る
========================================================================== */
.tsunagu-philo__band { display: none; }
@media (max-width: 767px) {
body.home a.tsunagu-philo--link { --px: clamp(20px, 4vw, 40px); padding-bottom: 0; }
.tsunagu-philo__go { display: none; }
.tsunagu-philo__band {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 20px calc(var(--px) * -1) 0; min-height: 44px; padding: 0 var(--px);
background: #eaf5f3; color: var(--tsunagu-teal-deep);
font-family: var(--tsunagu-font-sans); font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.4;
transition: background-color .2s ease, color .28s ease;
}
.tsunagu-philo__band-t { white-space: nowrap; }
.tsunagu-philo__band svg { flex: none; display: block; transition: transform .28s ease; }
/* タップ中：カード全体は白のまま、帯だけ少し濃く */
body.home a.tsunagu-philo--link:active { background: var(--cl-card, #fff); border-color: var(--cl-gold-line); outline-color: var(--cl-gold-hair); }
body.home a.tsunagu-philo--link:active :is(.tsunagu-homephilo__title) { color: var(--tsunagu-teal-deep); }
body.home a.tsunagu-philo--link:active .tsunagu-philo__main { color: var(--tsunagu-text); }
body.home a.tsunagu-philo--link:active .tsunagu-philo__catch { color: var(--tsunagu-text-soft); }
body.home a.tsunagu-philo--link:active .tsunagu-philo__band { background: #d4eae7; }
body.home a.tsunagu-philo--link:active .tsunagu-philo__band svg { transform: translateX(3px); }
}
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
body.home a.tsunagu-philo--link:hover .tsunagu-philo__band,
body.home a.tsunagu-philo--link:focus-visible .tsunagu-philo__band { background: rgba(255, 255, 255, .16); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .tsunagu-philo__band, .tsunagu-philo__band svg { transition: none !important; } }
/* ==========================================================================
2026-10-10 特徴ページ：疾患・状態の一覧（02 訪問看護／03 リハビリ）をカード型から
シンプルな情報一覧へ。PC・スマホとも2列×3段、中央揃え、各項目の下に薄いグレーの区切り線。
・背景・枠・角丸・影なし。リンクに見える装飾（矢印・ホバー・ポインター）なし
・文章・見出し・ボタンは変更なし
========================================================================== */
.tg-ft-dgrid.tg-ft-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; margin-top: 8px; }
@media (max-width: 479px) { .tg-ft-dgrid.tg-ft-dgrid { grid-template-columns: minmax(0, 1fr); } }
.tg-ft-dgrid.tg-ft-dgrid li { padding: 16px 4px; background: none; border: 0; border-bottom: 1px solid #e5e7eb; border-radius: 0; box-shadow: none; text-align: left; cursor: default; }
.tg-ft-dgrid.tg-ft-dgrid strong { color: #333333; font-size: 16px; line-height: 1.6; text-wrap: balance; }
.tg-ft-dgrid.tg-ft-dgrid span { margin-top: 2px; color: #666666; font-size: 14px; line-height: 1.7; text-wrap: balance; }
@media (min-width: 768px) {
.tg-ft-dgrid.tg-ft-dgrid { column-gap: 40px; }
.tg-ft-dgrid.tg-ft-dgrid li { padding: 20px 12px; text-align: center; }
.tg-ft-dgrid.tg-ft-dgrid span { font-size: 15px; }
}
@media (max-width: 359px) {
.tg-ft-dgrid.tg-ft-dgrid { column-gap: 8px; }
.tg-ft-dgrid.tg-ft-dgrid li { padding-inline: 0; }
}
/* ==========================================================================
2026-10-10 特徴ページ：疾患一覧／連携先一覧の表示幅（PCは最大720pxで中央）と 04 他機関との連携
・PC(768px以上)は見出し・一覧・注意書きを最大720pxの中央にまとめる。スマホは変更なし
・02/03 はスマホ2列×3段のまま、04 はスマホ1列・PC3列
・連携先（事業所名＋公式サイトを見る）は設定でオンにしたときだけ表示。リンク部分だけが下線付きのティール
========================================================================== */
@media (min-width: 768px) { .tg-ft-diseases { max-width: 720px; margin-left: auto; margin-right: auto; } }
.tg-ft-dgrid.tg-ft-dgrid.tg-ft-dgrid--three { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tg-ft-dgrid.tg-ft-dgrid.tg-ft-dgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; } }
.tg-ft-dgrid.tg-ft-dgrid .tg-ft-partner { margin-top: 12px; padding-top: 0; }
.tg-ft-dgrid.tg-ft-dgrid .tg-ft-partner__name { margin: 0; color: #333333; font-size: 15px; font-weight: 700; line-height: 1.6; }
.tg-ft-dgrid.tg-ft-dgrid .tg-ft-partner__a { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--ft-teal); font-size: 14px; font-weight: 700; line-height: 1.6; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tg-ft-dgrid.tg-ft-dgrid .tg-ft-partner__t { display: inline; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.tg-ft-partner__ico { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tg-ft-dgrid.tg-ft-dgrid .tg-ft-partner__a:hover { text-decoration-thickness: 2px; }
.tg-ft-dgrid.tg-ft-dgrid .tg-ft-partner__a:focus-visible { outline: 3px solid #f6c85f; outline-offset: 3px; border-radius: 3px; }
.tg-ft-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 359px) { .tg-ft-en { font-size: 10.5px; letter-spacing: .06em; } }
/* 2026-10-10 04 他機関との連携：タブレット幅（768〜899px）でも3列を保つため、列間と左右余白だけを調整（文字サイズは変更なし） */
@media (min-width: 768px) and (max-width: 899px) {
.tg-ft-dgrid.tg-ft-dgrid.tg-ft-dgrid--three { column-gap: 12px; }
.tg-ft-dgrid.tg-ft-dgrid.tg-ft-dgrid--three li { padding-left: 4px; padding-right: 4px; }
}
/* ==========================================================================
2026-10-10 特徴ページ 01 医師との連携・終末期ケア：白背景＋ティールのアクセント、余白と細い区切り線で整理
・主な支援内容（PC 2列×2段／スマホ 1列）、連携医師紹介、お看取り実績（設定でオンのときだけ表示）
・「終末期ケア専門士が在籍」は 02 に移動（.tg-ft-rule は区切り線つきのブロック）
========================================================================== */
.tg-ft-sup { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.tg-ft-sup li { padding: 16px 2px; border-bottom: 1px solid #e5e7eb; }
.tg-ft-sup strong { display: block; font-size: 16px; line-height: 1.6; color: #333333; }
.tg-ft-sup span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.8; color: #666666; }
@media (min-width: 768px) {
.tg-ft-sup { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.tg-ft-sup li { padding: 20px 4px; }
}
.tg-ft-rule { margin-top: 28px; padding-top: 24px; border-top: 1px solid #e5e7eb; }
.tg-ft-doctor__clinic { margin: 14px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.6; color: var(--ft-teal); }
.tg-ft-doctor__name { margin: 2px 0 0; font-size: 22px; font-weight: 700; line-height: 1.5; color: #333333; }
.tg-ft-doctor__text { margin-top: 10px; }
.tg-ft-doctor__links { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
@media (min-width: 768px) { .tg-ft-doctor__links { flex-direction: row; flex-wrap: wrap; gap: 12px; } }
.tg-ft-mitori { text-align: center; }
.tg-ft-mitori__h { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; color: #333333; }
.tg-ft-mitori__n { margin: 10px 0 0; font-size: 17px; font-weight: 700; line-height: 1.7; color: var(--ft-teal); }
.tg-ft-mitori__p { margin: 2px 0 0; font-size: 15px; line-height: 1.7; color: #666666; }
.tg-ft-sup li:last-child { border-bottom: 0; }
@media (min-width: 768px) {
.tg-ft-sup li:nth-last-child(-n+2) { border-bottom: 0; }
.tg-ft-doctor__links .tg-ft-btn { flex: 1 1 260px; max-width: 354px; }
}
/* ==========================================================================
2026-10-10 特徴ページ 01〜04：見出し・余白・リンクの統一（大きなデザイン変更なし）
・見出し：番号の丸＋英語の小見出し＋日本語の大見出し＋キャッチ＋本文を 01〜04 で共通化
・リンク：サイト内の詳細ページは緑のボタン（.tg-ft-btn）／外部サイトは控えめなテキストリンク（.tg-ft-extlink ＋ ↗）
========================================================================== */
.tg-ft-sec .tg-ft-diseases { margin-bottom: 0; }
.tg-ft-intro + .tg-ft-roles, .tg-ft-intro + .tg-ft-diseases { margin-top: 20px; }
.tg-ft-roles { margin-bottom: 20px; }
.tg-ft-diseases + .tg-ft-lsvt { margin-top: 20px; }
.tg-ft-rule { margin-top: 24px; padding-top: 20px; }
/* 01 主な支援内容：見出しの帯と一覧の左端をそろえる */
.tg-ft-sup li { padding-left: 0; padding-right: 0; }
@media (min-width: 768px) { .tg-ft-sup li { padding-left: 0; padding-right: 0; } }
/* 01 連携医師：コンパクトに */
.tg-ft-doctor__clinic { margin-top: 10px; }
.tg-ft-doctor__name { font-size: 20px; margin-top: 0; }
.tg-ft-doctor__text { margin-top: 6px; }
.tg-ft-doctor__links { margin-top: 8px; gap: 4px 24px; }
/* 外部サイトへのリンク（控えめなテキストリンク） */
.tg-ft-extlink { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--ft-teal); font-size: 15px; font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tg-ft-extlink:hover { text-decoration-thickness: 2px; }
.tg-ft-extlink:focus-visible { outline: 3px solid #f6c85f; outline-offset: 2px; border-radius: 3px; }
.tg-ft-extlink__t { display: inline; }
.tg-ft-extlink__ico { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tg-ft-doctor__links { flex-direction: row; flex-wrap: wrap; align-items: center; }
/* 03 LSVT：黄色の紹介エリアは維持し、本文の下にリンクを並べる */
.tg-ft-lsvt, .tg-ft-lsvt.tg-ft-lsvt { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.tg-ft-lsvt__btns { display: flex; flex-wrap: wrap; gap: 0 24px; align-content: flex-start; }
.tg-ft-lsvt .tg-ft-h3 { margin-bottom: 0; }
/* 04 連携先のリンク（公式サイトを見る）も同じ控えめなリンクに */
.tg-ft-dgrid.tg-ft-dgrid .tg-ft-partner__a { font-size: 15px; }
/* 2026-10-10 特徴ページ 01〜04 微調整：01支援リスト末尾の余白／注意書きの折り返し */
.tg-ft-sup li:last-child { padding-bottom: 4px; }
.tg-ft-sec .tg-ft-note { text-wrap: balance; }
/* 2026-10-10 特徴ページ 02：「終末期ケア専門士が在籍」を 03 のLSVT紹介と同じ黄色枠デザインに統一 */
.tg-ft-lsvt--eol { margin-top: 20px; }
.tg-ft-lsvt--eol + .tg-ft-nursing-link { margin-top: 20px; }
/* 2026-10-10 特徴ページ 05：「24時間電話対応／緊急時急変対応」を、色付き角丸ボックスからチェックアイコン＋テキストの案内表示へ（リンク・ボタンではないためホバー等の装飾なし） */
.tg-ft-support { list-style: none; margin: 0 auto 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; }
.tg-ft-support li, .tg-ft-support li:nth-child(2) { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 8px; text-align: left; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: default; }
.tg-ft-support li + li, .tg-ft-support li:nth-child(2) { border-top: 1px solid #e5e7eb; }
.tg-ft-support li::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8487' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' stroke-width='1.8'/%3E%3Cpath d='m7.5 12.5 3 3 6-6.5'/%3E%3C/svg%3E"); }
.tg-ft-support strong { font-family: inherit; font-weight: 700; font-size: 17px; line-height: 1.5; color: #333333; }
@media (min-width: 768px) {
.tg-ft-support { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: 640px; }
.tg-ft-support li, .tg-ft-support li:nth-child(2) { padding: 8px 16px; }
.tg-ft-support li + li, .tg-ft-support li:nth-child(2) { border-top: 0; border-left: 1px solid #e5e7eb; }
.tg-ft-support strong { font-size: 18px; }
}
/* 2026-10-10 ボタン・情報ラベルの統一
・クリックできるもの（ページ内リンク／パンフレットのリンク）＝ 緑背景＋白文字（既存の丸みは維持）
・クリックできない情報表示 ＝ 白背景＋文字＋細い区切り線（疾患一覧と同じ考え方。角丸・ホバー・矢印なし） */
.tsunagu-chips li:has(> a) { padding: 0; background: none; }
.tsunagu-chips li > a { gap: 8px; max-width: 100%; padding: 8px 20px; min-height: 44px; background: var(--tsunagu-teal-deep); color: #fff; font-size: 15px; line-height: 1.5; text-decoration: none; transition: background-color .15s ease; }
.tsunagu-chips li > a::after { content: ""; flex: 0 0 12px; width: 12px; height: 12px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); }
.tsunagu-chips li > a:hover { background: #0a6d70; box-shadow: none; color: #fff; }
.tsunagu-chips li > a:focus-visible { outline: 3px solid #f6c85f; outline-offset: 2px; }
.tsunagu-infolist { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; max-width: 720px; }
.tsunagu-infolist li { padding: 14px 4px; text-align: center; border-bottom: 1px solid #e5e7eb; background: none; border-radius: 0; box-shadow: none; color: #333333; font-size: 17px; font-weight: 700; line-height: 1.6; cursor: default; }
@media (min-width: 768px) { .tsunagu-infolist--area { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } .tsunagu-infolist li { padding: 16px 4px; font-size: 18px; } }
.tsunagu-role__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 20px; gap: 0 20px; margin-top: 16px; }
.tsunagu-role .tsunagu-role__chips li { padding: 9px 2px; border-radius: 0; box-shadow: none; background: none; color: #333333; font-size: 15px; font-weight: 600; border-bottom: 1px solid #e5e7eb; cursor: default; }
.tsunagu-perk__tag { padding: 0 12px 0 0; border: 0; border-right: 1px solid #d1d5db; border-radius: 0; background: none; color: #7d5d0c; }
/* 2026-10-10 特徴ページ 05：サポート体制の2項目をひとまわり大きく（デザインは変更せず、サイズ・間隔のみ） */
.tg-ft-support li, .tg-ft-support li:nth-child(2) { gap: 14px; padding: 20px 8px; }
.tg-ft-support li::before { flex: 0 0 26px; width: 26px; height: 26px; }
.tg-ft-support strong { font-size: 20px; white-space: nowrap; }
@media (min-width: 768px) {
.tg-ft-support li, .tg-ft-support li:nth-child(2) { padding: 14px 16px; }
.tg-ft-support strong { font-size: 21px; }
}
/* 2026-10-10 サービス紹介ページ上部：ページ内ナビを白背景のカード型（アイコン付き）に。CSSのみでホバー／タップ(:active)／フォーカスに反応 */
.tsunagu-navcards { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tsunagu-navcards .tsunagu-navcard:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2); }
.tsunagu-navcard { --nc-ico: var(--tsunagu-coral-deep); --nc-hover: var(--tsunagu-coral-light); --nc-press: #f8d2cd; min-width: 0; }
.tsunagu-navcard--teal { --nc-ico: var(--tsunagu-teal-deep); --nc-hover: var(--tsunagu-teal-light); --nc-press: #c3e7e5; }
.tsunagu-navcards .tsunagu-navcard > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; height: 100%; padding: 14px 8px; background: #fff; border: 1px solid var(--tsunagu-border); border-radius: 14px; color: var(--tsunagu-text); text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, border-color .18s ease, transform .12s ease; }
.tsunagu-navcard__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nc-hover); color: var(--nc-ico); transition: background-color .18s ease; }
.tsunagu-navcard__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tsunagu-navcard__t { font-size: 15px; font-weight: 700; line-height: 1.45; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) { .tsunagu-navcards .tsunagu-navcard > a:hover { background: var(--nc-hover); border-color: var(--nc-ico); } .tsunagu-navcard > a:hover .tsunagu-navcard__ico { background: #fff; } }
.tsunagu-navcards .tsunagu-navcard > a:active { background: var(--nc-press); border-color: var(--nc-ico); transform: scale(.98); transition-duration: .06s; }
.tsunagu-navcard > a:active .tsunagu-navcard__ico { background: #fff; }
.tsunagu-navcards .tsunagu-navcard > a:focus-visible { outline: 3px solid var(--tsunagu-teal-deep); outline-offset: 2px; background: var(--nc-hover); }
@media (min-width: 640px) { .tsunagu-navcards { grid-template-columns: repeat(6, minmax(0, 1fr)); } .tsunagu-navcards .tsunagu-navcard { grid-column: span 2; } .tsunagu-navcards .tsunagu-navcard:nth-child(4) { grid-column: 2 / span 2; } .tsunagu-navcards .tsunagu-navcard:nth-child(5), .tsunagu-navcards .tsunagu-navcard:last-child { grid-column: 4 / span 2; width: auto; justify-self: stretch; } }
@media (min-width: 960px) { .tsunagu-navcards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .tsunagu-navcards .tsunagu-navcard, .tsunagu-navcards .tsunagu-navcard:nth-child(n) { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .tsunagu-navcards a, .tsunagu-navcard__ico { transition: none; } .tsunagu-navcards .tsunagu-navcard > a:active { transform: none; } }
@media (max-width: 359px) { .tsunagu-navcards .tsunagu-navcard > a { padding: 14px 4px; } .tsunagu-navcard__t { font-size: 14px; } }
/* 2026-10-10 「私たちについて」「採用情報」：ページ下部の街並み＋ワンちゃんの横長装飾を非表示（HTML・画像ファイルは残してあり、この2行を削除すれば再表示できる）。フッターの看板犬・フッターの街並みは対象外 */
.tsunagu-aboutpage .ab-scene,
.tsunagu-rcpage .rc-scene { display: none !important; }
/* 採用情報：装飾帯がなくなった分、最後のボタンとフッターの波形の間に余白を確保（768px以上。スマホは元々帯なしで変更なし） */
@media (min-width: 768px) { .tsunagu-rcpage section:has(> .rc-scene) { padding-bottom: 56px; } }
/* 2026-10-10 TOPページ：PC（マウス操作・幅901px以上）のみの色の変化。スマホ／タブレット／タッチ端末は現状維持（色付き背景のまま・ホバー色は出ない） */
/* ① サービス紹介カード：ホバーで淡い背景（コーラル／水色） */
.tsunagu-svc { transition: border-color .2s, box-shadow .2s, transform .2s, background-color .25s ease; }
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
body.home .tsunagu-svc--coral:hover { background: #fdf1ef; }
body.home .tsunagu-svc--teal:hover { background: #eef9f8; }
}
/* ② TSUNAGUの特徴 4カード：PCの通常時は白背景、ホバーで各カードの色（淡いコーラル／水色／黄色／ブルーグレー）に変化 */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
.tg-feature-links-all .tg-mobile-feature-link:nth-child(n) { background: #fff; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(1):hover { background: #fdf1ef; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(2):hover { background: #eef9f8; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(3):hover { background: #fcf6e0; }
.tg-feature-links-all .tg-mobile-feature-link:nth-child(4):hover { background: #eef4f8; }
}
/* 2026-10-10 TOPページ サービス紹介：「主なサービス内容」カードだけ黄色・ゴールド系（「TSUNAGUの特徴」03リハビリと同じ色味）。アイコン・矢印を黄色に、PCホバー背景を淡い黄色に。通常時の背景は白のまま */
.tsunagu-svc--yellow svg { color: #bb923c; }
.tsunagu-svc--yellow .tsunagu-svc__label::after { border-color: #bb923c; }
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
body.home .tsunagu-svc--yellow:hover { background: #fcf6e0; border-color: #e6cf84; }
}
/* 2026-10-10 TOP「心を繋ぐ」カード：スマホ(767px以下)のみ、下部の水色の帯を非表示にし、矢印「→」をカード内の右端・上下中央に配置。
文字の中央揃えは維持するため左右の余白は同じ値にし、矢印の分の幅を確保（320px／390pxで重ならない）。カード全体が1つのリンクである点・PC表示は変更なし */
@media (max-width: 767px) {
body.home a.tsunagu-philo--link { padding: clamp(28px, 6vw, 44px) 40px; }
.tsunagu-philo__band { display: none !important; }
.tsunagu-philo__go { display: flex; right: 12px; top: 50%; margin-top: -11px; color: var(--tsunagu-teal-deep); }
.tsunagu-philo__go svg { width: 22px; height: 22px; }
body.home a.tsunagu-philo--link:active { background: #f1f9f8; }
body.home a.tsunagu-philo--link:active .tsunagu-philo__go { color: var(--tsunagu-teal-deep); }
body.home a.tsunagu-philo--link:active .tsunagu-philo__go svg { transform: translateX(3px); }
}
@media (max-width: 359px) { body.home a.tsunagu-philo--link { padding-left: 46px; padding-right: 46px; } .tsunagu-philo__go { right: 10px; } }
/* 2026-10-10 サービス紹介ページ上部のナビ：TOPページ「サービス紹介」の5カード（.tsunagu-svc）と同じデザインに統一。
TOPは body.home 限定の指定を使っているため、同じ値をこのナビ（.tsunagu-svcnav）にだけ指定する。TOP側のCSS・マークアップは変更しない */
.tsunagu-svcnav { max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.tsunagu-svcnav .tsunagu-svc { background: #fff; border-color: #ebe5df; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.tsunagu-svcnav .tsunagu-svc:hover { border-color: #C8A661; box-shadow: 0 2px 12px rgba(59, 55, 51, 0.06); }
.tsunagu-svcnav .tsunagu-svc--yellow svg { color: #bb923c; }
.tsunagu-svcnav .tsunagu-svc--yellow .tsunagu-svc__label::after { border-color: #bb923c; }
.tsunagu-svcnav .tsunagu-svc:focus-visible { outline: 3px solid #f6c85f; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
.tsunagu-svcnav .tsunagu-svc--coral:hover { background: #fdf1ef; }
.tsunagu-svcnav .tsunagu-svc--teal:hover { background: #eef9f8; }
.tsunagu-svcnav .tsunagu-svc--yellow:hover { background: #fcf6e0; border-color: #e6cf84; }
}
/* タブレット幅（601〜1024px）：3列＋下段2枚を中央に */
@media (min-width: 601px) and (max-width: 1024px) {
.tsunagu-svcnav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tsunagu-svcnav > li { grid-column: span 2; }
.tsunagu-svcnav > li:nth-child(4) { grid-column: 2 / span 2; }
.tsunagu-svcnav > li:nth-child(5) { grid-column: 4 / span 2; }
}
/* 2026-10-10 特徴ページ 01：連携医師を 02「終末期ケア専門士が在籍」・03「LSVT」と同じ淡い黄色の枠に統一（リンクの見た目・配置は03と同じ下線テキストリンク） */
.tg-ft-lsvt--eol .tg-ft-lsvt__body .tg-ft-text + .tg-ft-text { margin-top: 6px; }
.tg-ft-lsvt--eol .tg-ft-lsvt__body .tg-ft-h3 + .tg-ft-text { margin-top: 6px; }
/* ==== 2026-10-10 連携医師紹介ページ（page-doctor.php） ==== */
.dr{color:#3a3a3a;background:#fff;overflow-x:hidden}
.dr-eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.18em;color:#0e8487}
.dr-hero{background:linear-gradient(180deg,#fbf6ee 0%,#fff 100%);padding:16px 0 48px}
.dr-hero__crumb{margin-bottom:20px}
.dr-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.dr-hero__title{margin:0 0 14px;font-size:15px;font-weight:700;color:#0e8487;letter-spacing:.08em}
.dr-hero__name{margin:0;font-size:40px;font-weight:700;line-height:1.3;color:#2b2b2b}
.dr-hero__clinic{margin:8px 0 20px;font-size:17px;color:#0e8487;font-weight:700}
.dr-hero__lead{margin:0;font-size:16px;line-height:2;max-width:32em}
.dr-hero__photo{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 10px 30px rgba(14,132,135,.15);border:6px solid #fff;max-width:420px;justify-self:center;width:100%}
.dr-hero__photo img{display:block;width:100%;height:auto}
.dr-sec{padding:64px 0}
.dr-sec--tint{background:#fbf6ee}
.dr-wrap{max-width:860px;margin:0 auto}
.dr-wrap--wide{max-width:1000px}
.dr-h2{margin:0 0 32px;font-size:28px;line-height:1.4;color:#2b2b2b;text-align:center}
.dr-sec .dr-eyebrow{text-align:center}
.dr-h3{margin:0 0 14px;font-size:18px;color:#0e8487;padding-left:12px;border-left:4px solid #0e8487;line-height:1.4}
.dr-h3--center{text-align:center;border:0;padding:0;margin:8px 0 18px}
.dr-profile{background:#fff;border:1px solid #e9e1d3;border-radius:20px;padding:28px 32px;margin-bottom:24px;background:#fffdf9}
.dr-dl{margin:0 0 24px}
.dr-dl>div{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid #eee6d8}
.dr-dl dt{flex:0 0 9em;font-weight:700;color:#0e8487;font-size:14px}
.dr-dl dd{margin:0;font-size:15px;line-height:1.7}
.dr-list,.dr-check{list-style:none;margin:0 0 8px;padding:0}
.dr-list li,.dr-check li{padding:11px 0 11px 24px;border-bottom:1px solid #eee6d8;position:relative;font-size:15px;line-height:1.7}
.dr-list li::before{content:"";position:absolute;left:4px;top:1.2em;width:8px;height:8px;border-radius:50%;background:#0e8487}
.dr-check li::before{content:"";position:absolute;left:2px;top:.95em;width:14px;height:8px;border-left:3px solid #0e8487;border-bottom:3px solid #0e8487;transform:rotate(-45deg) scale(.8);transform-origin:center}
.dr-note{margin:8px 0 18px;font-size:12px;color:#777}
.dr-text{margin:0 0 12px;font-size:15px;line-height:2}
.dr-text--em{font-weight:700;color:#0e8487}
.dr-videos{display:flex;justify-content:center;gap:24px;margin-bottom:40px}
.dr-video{margin:0;flex:0 1 260px;min-width:0}
.dr-video video{display:block;width:100%;height:auto;aspect-ratio:480/854;background:#222;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.dr-video figcaption{margin-top:8px;text-align:center;font-size:13px;color:#555}
.dr-gallery{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:6px 4px 14px;scrollbar-width:thin;scrollbar-color:#0e8487 #eee6d8}
.dr-gallery:focus-visible{outline:3px solid #f6c85f;outline-offset:2px}
.dr-gallery::-webkit-scrollbar{height:8px}
.dr-gallery::-webkit-scrollbar-track{background:#eee6d8;border-radius:4px}
.dr-gallery::-webkit-scrollbar-thumb{background:#0e8487;border-radius:4px}
.dr-gallery__track{display:flex;gap:16px;list-style:none;margin:0;padding:0;width:max-content;min-width:100%;justify-content:center}
.dr-gallery__item{flex:0 0 auto;scroll-snap-align:center;margin:0}
.dr-gallery__item img{display:block;height:300px;width:auto;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.dr-gallery__hint{margin:6px 0 0;text-align:center;font-size:12px;color:#888}
.dr-clinic{background:#fbf6ee;border-radius:20px;padding:28px 32px;text-align:center}
.dr-clinic__name{margin:0 0 10px;font-size:20px;color:#2b2b2b}
.dr-back{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:40px}
@media (max-width:767px){
.dr-hero{padding:8px 0 36px}
.dr-hero__grid{grid-template-columns:1fr;gap:24px}
.dr-hero__photo{order:-1;max-width:300px}
.dr-hero__text{text-align:center}
.dr-hero__name{font-size:30px}
.dr-hero__clinic{font-size:15px}
.dr-hero__lead{font-size:14px;line-height:1.9;text-align:left;margin:0 auto}
.dr-sec{padding:44px 0}
.dr-h2{font-size:22px;margin-bottom:24px}
.dr-profile{padding:20px 18px}
.dr-dl>div{flex-direction:column;gap:2px}
.dr-dl dt{flex:none}
.dr-videos{gap:12px}
.dr-video{flex:1 1 0}
.dr-gallery__track{justify-content:flex-start}
.dr-gallery__item img{height:220px}
.dr-clinic{padding:22px 16px}
.dr-back{flex-direction:column;align-items:stretch}
.dr-back .tsunagu-btn{text-align:center;justify-content:center}
}
/* ==== 2026-10-10 恵川先生ページ：スマホのみ微調整 ==== */
@media (max-width:767px){
.dr-hero__lead{font-size:16px;line-height:1.8;text-align:center;padding-left:8px;padding-right:8px;max-width:none}
.dr-clinic .tg-ft-extlink{color:#008c8c;min-height:44px;display:inline-flex;align-items:center;padding:10px 6px}
.dr-clinic .tg-ft-extlink .tg-ft-extlink__t{color:#008c8c;text-decoration:underline}
.dr-clinic .tg-ft-extlink .tg-ft-extlink__ico{color:#008c8c;stroke:#008c8c}
}
/* ==== 2026-10-10 恵川先生ページ：PC版の余白・文字・幅・リンク調整（768px以上） ==== */
@media (min-width:768px){
.dr-hero{padding:6px 0 34px}
.dr-hero__crumb{margin-bottom:8px}
.dr-hero__grid{gap:40px}
.dr-hero__photo{max-width:380px}
.dr-hero__title{font-size:16px;margin-bottom:10px}
.dr-hero__clinic{font-size:18px;margin:6px 0 16px}
.dr-hero__lead{font-size:17px;line-height:1.8}
.dr-sec{padding:46px 0}
.dr-h2{font-size:24px;margin-bottom:24px}
.dr-h3{font-size:20px}
.dr-h3--center{margin:4px 0 16px}
.dr-wrap{max-width:980px}
.dr-wrap--wide{max-width:1080px}
.dr-profile{padding:28px 36px;margin-bottom:20px}
.dr-dl dt{flex-basis:10em;font-size:16px}
.dr-dl dd,.dr-list li,.dr-check li,.dr-text{font-size:16.5px;line-height:1.8}
.dr-note{font-size:13px}
.dr-videos{margin-bottom:32px}
.dr-clinic{padding:28px 40px}
.dr-clinic__name{font-size:22px}
.dr-back{margin-top:32px}
}
.dr-clinic .tg-ft-extlink{color:#008c8c}
.dr-clinic .tg-ft-extlink:active{color:#006b6b}
@media (hover:hover) and (pointer:fine){
.dr-clinic .tg-ft-extlink{transition:color .2s}
.dr-clinic .tg-ft-extlink:hover{color:#005f5f;text-decoration-thickness:2px;background:rgba(0,140,140,.08);border-radius:4px}
.dr-clinic .tg-ft-extlink:hover .tg-ft-extlink__ico{transform:translate(2px,-2px)}
.dr-clinic .tg-ft-extlink__ico{transition:transform .2s}
}
/* ==== 2026-10-10 恵川先生ページ：PC最上部を中央寄せ（768px以上のみ） ==== */
@media (min-width:768px){
.dr-hero__grid{grid-template-columns:minmax(0,540px) minmax(0,380px);justify-content:center;column-gap:clamp(40px,5.6vw,72px)}
.dr-hero__text{justify-self:start}
.dr-hero__photo{justify-self:end;max-width:none;width:100%}
}
/* ==== 2026-10-10 恵川先生ページ：冒頭の紹介文の折り返し調整 ==== */
.dr-hero__lead{max-width:none;word-break:auto-phrase;text-wrap:pretty;overflow-wrap:anywhere}
@media (min-width:768px){
.dr-hero__grid{grid-template-columns:minmax(0,640px) minmax(0,380px)}
.dr-hero__clinic{margin:8px 0 18px}
}
@media (max-width:767px){
.dr-hero__clinic{margin:6px 0 16px}
}
/* ==== 2026-10-10 TSUNAGUの特徴①：恵川先生の黄色ボックスの折り返し（スマホのみ） ==== */
@media (max-width:767px){
.tg-ft-lsvt.tg-ft-lsvt--eol{margin-left:-8px;margin-right:-8px;padding-left:14px;padding-right:14px}
.tg-ft-lsvt--eol .tg-ft-lsvt__body .tg-ft-text{max-width:none;word-break:auto-phrase;text-wrap:pretty}
}
/* ==== 2026-10-10 恵川先生ページ：取り組みカード下部（スマホのみ中央揃え） ==== */
@media (max-width:767px){
.dr-profile--care .dr-check{margin-bottom:18px}
.dr-profile--care .dr-text{text-align:center;line-height:1.9;margin:0 0 10px;word-break:auto-phrase;text-wrap:pretty}
.dr-profile--care .dr-text--em{line-height:1.8;margin-bottom:0}
}
/* ==== 2026-10-10 恵川先生ページ：愛犬の水彩イラスト（PC・1024px以上のみ／スマホ・タブレットは非表示） ==== */
.dr-mascot{display:none}
@media (min-width:1024px){
.dr-wrap--wide{position:relative}
.dr-mascot{display:block;position:absolute;top:-6px;right:0;width:170px;height:auto;pointer-events:none;user-select:none}
}
@media (min-width:1024px) and (max-width:1279px){ .dr-mascot{right:20px} }
/* ==== 2026-10-10 恵川先生ページ：愛犬イラストをスマホ・タブレット(1023px以下)でも表示（見出しの下・「動画」の上に中央配置） ==== */
@media (max-width:1023px){
.dr-wrap--wide{display:flex;flex-direction:column}
.dr-wrap--wide>*{order:2;min-width:0}
.dr-wrap--wide>.dr-eyebrow,.dr-wrap--wide>.dr-h2{order:0}
.dr-wrap--wide>.dr-h2{margin-bottom:8px}
.dr-wrap--wide>.dr-mascot{display:block;order:1;position:static;width:140px;height:auto;margin:0 auto 4px;align-self:center;pointer-events:none;user-select:none}
}
/* ==== 2026-10-10 恵川先生ページ：スマホ(767px以下)は寝顔の「Lazy Days」、それ以外は「Good Boy」 ==== */
.dr-mascot--sp{display:none}
@media (max-width:767px){
.dr-wrap--wide>.dr-mascot:not(.dr-mascot--sp){display:none}
.dr-wrap--wide>.dr-mascot--sp{display:block;order:1;position:static;width:160px;height:auto;margin:2px auto 6px;align-self:center;pointer-events:none;user-select:none}
}
@media (min-width:768px){
.dr-wrap--wide>.dr-mascot.dr-mascot--sp{display:none}
}
/* ==== 2026-10-10 恵川先生ページ：動画が増えたときの並び（PC=2列、スマホ=画面幅に合わせて2列。横向き動画は1列分の幅いっぱい） ==== */
.dr-videos{flex-wrap:wrap}
.dr-video--wide{flex:0 0 100%}
@media (min-width:768px){
.dr-videos{max-width:544px;margin-left:auto;margin-right:auto}
}
@media (max-width:767px){
.dr-video{flex:0 0 calc(50% - 6px)}
.dr-video--wide{flex:0 0 100%}
}
/* ==== 2026-10-10 採用情報ページ：横スクロール式の写真ギャラリー（職場の様子の下。写真が0枚なら出力されない） ==== */
.tsunagu-rcpage .rc-hgal { margin-top: 36px; }
.tsunagu-rcpage .rc-hgal__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: #C9B99E #F3EEE4; }
.tsunagu-rcpage .rc-hgal__scroller:focus-visible { outline: 3px solid #f6c85f; outline-offset: 2px; }
.tsunagu-rcpage .rc-hgal__scroller::-webkit-scrollbar { height: 8px; }
.tsunagu-rcpage .rc-hgal__scroller::-webkit-scrollbar-track { background: #F3EEE4; border-radius: 4px; }
.tsunagu-rcpage .rc-hgal__scroller::-webkit-scrollbar-thumb { background: #C9B99E; border-radius: 4px; }
.tsunagu-rcpage .rc-hgal__track { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
/* 1枚の幅：PCは約3枚、タブレットは約2枚、スマホは1枚＋次の写真が少し見える（割合は表示エリアの幅に対する値） */
.tsunagu-rcpage .rc-hgal__item { flex: 0 0 calc((100% - 36px) / 3.15); min-width: 0; scroll-snap-align: start; margin: 0; }
@media (max-width: 1023px) { .tsunagu-rcpage .rc-hgal__item { flex-basis: calc((100% - 18px) / 2.2); } }
@media (max-width: 767px) { .tsunagu-rcpage .rc-hgal { margin-top: 28px; } .tsunagu-rcpage .rc-hgal__track { gap: 14px; } .tsunagu-rcpage .rc-hgal__item { flex-basis: 82%; } }
.tsunagu-rcpage .rc-hgal__frame { aspect-ratio: 4 / 3; background: #F3EEE4; border: 1px solid var(--rc-line); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tsunagu-rcpage .rc-hgal__frame img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.tsunagu-rcpage .rc-hgal__cap { margin: 10px 0 0; text-align: center; font-size: 15px; line-height: 1.7; color: inherit; overflow-wrap: anywhere; text-wrap: pretty; }
/* ==== 2026-10-10 「私たちについて」行動指針：PC（768px以上）は白い角丸カードをやめ、中央揃えのシンプルな文字一覧に ==== */
@media (min-width: 768px) {
.tsunagu-aboutpage .tsunagu-pl__guides { width: min(100%, 640px); gap: 0; margin: 22px auto 0; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide { justify-content: center; align-items: baseline; gap: 16px; padding: 20px 8px; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide + .tsunagu-guide { border-top: 1px solid #DCCFB8; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide__num { font-size: 25px; line-height: 1.5; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide__text { font-size: 25px; line-height: 1.6; letter-spacing: .04em; font-weight: 500; }
}
/* ==== 2026-10-10 「私たちについて」行動指針（再修正）：PC・スマホ共通の「番号＋文章＋細い区切り線」。4項目全体を中央に置き、番号と文章の開始位置を揃える ==== */
.tsunagu-aboutpage .tsunagu-pl__guides { width: fit-content; max-width: 100%; margin: 22px auto 0; padding: 0; gap: 0; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide {
display: grid; grid-template-columns: var(--gd-num, 28px) minmax(0, 1fr); column-gap: 10px; align-items: baseline; justify-content: start;
padding: 16px 4px; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: left;
}
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide + .tsunagu-guide { border-top: 1px solid #DCCFB8; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide__num { display: block; width: auto; font-size: clamp(20px, 5.4vw, 22px); line-height: 1.5; text-align: left; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide__text { font-size: clamp(16px, 4.9vw, 20px); line-height: 1.6; letter-spacing: .02em; font-weight: 500; overflow-wrap: anywhere; }
@media (min-width: 768px) {
.tsunagu-aboutpage .tsunagu-pl__guides { --gd-num: 34px; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide { column-gap: 14px; padding: 20px 8px; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide__num { font-size: 25px; }
.tsunagu-aboutpage .tsunagu-pl__guides .tsunagu-guide__text { font-size: 25px; letter-spacing: .04em; }
}
/* ==== 2026-10-10 採用情報「職場の様子」：採用スライダー＋写真ギャラリーを1つの横スライダーに統合（矢印ボタン／高さ・説明文の統一） ==== */
.tsunagu-rcpage .rc-hgal { position: relative; }
.tsunagu-rcpage .rc-hgal__cap { min-height: 3.4em; }
.tsunagu-rcpage .rc-hgal__btn { position: absolute; top: calc(4px + (100% - 18px - 51px - 10px) / 2); transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--rc-line); background: rgba(255, 255, 255, .96); color: #2F6F6F; box-shadow: 0 2px 8px rgba(60, 45, 20, .18); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 30px; line-height: 1; font-family: inherit; transition: background-color .2s, box-shadow .2s; }
.tsunagu-rcpage .rc-hgal__btn span { display: block; margin-top: -3px; }
.tsunagu-rcpage .rc-hgal__btn:hover { background: #fff; box-shadow: 0 3px 12px rgba(60, 45, 20, .28); }
.tsunagu-rcpage .rc-hgal__btn:focus-visible { outline: 3px solid #f6c85f; outline-offset: 2px; }
.tsunagu-rcpage .rc-hgal__btn--prev { left: -12px; }
.tsunagu-rcpage .rc-hgal__btn--next { right: -12px; }
.tsunagu-rcpage .rc-hgal__btn[hidden] { display: none; }
@media (max-width: 767px) { .tsunagu-rcpage .rc-hgal__btn { display: none !important; } .tsunagu-rcpage .rc-hgal__cap { min-height: 3.4em; } }
@media (hover: none) and (pointer: coarse) { .tsunagu-rcpage .rc-hgal__btn { display: none !important; } }
/* ==== 2026-10-10 採用情報「働きやすい環境」「募集職種」：白いカード枠をなくし、アイコン＋文字のシンプルな並びに（色・文言・アイコンは変更なし） ==== */
.tsunagu-rcpage .tsunagu-perks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; max-width: 1040px; }
.tsunagu-rcpage .tsunagu-perk {
background: none; border: 0; border-radius: 0; box-shadow: none; cursor: default;
min-height: 0; padding: 0 6px; gap: 14px; justify-content: flex-start; align-items: center;
flex-direction: column; flex-wrap: nowrap; text-align: center;
font-size: 17px; font-weight: 700; line-height: 1.6; text-wrap: balance;
}
.tsunagu-rcpage .tsunagu-perk.rc-ico::before { width: 68px; height: 68px; }
.tsunagu-rcpage .tsunagu-perk.rc-ico::after { top: 17px; left: 50%; width: 34px; height: 34px; margin: 0 0 0 -17px; }
.tsunagu-rcpage .tsunagu-perk--note { flex-wrap: nowrap; padding: 0 6px; gap: 6px; }
.tsunagu-rcpage .tsunagu-perk--note::before { margin-bottom: 8px; }
.tsunagu-rcpage .tsunagu-perk--note .tsunagu-perk__tag { padding: 0 10px; border: 0; border-radius: 6px; background: var(--tsunagu-yellow-light); font-size: 13px; line-height: 1.7; }
.tsunagu-rcpage .tsunagu-pos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; max-width: 960px; margin-inline: auto; }
.tsunagu-rcpage .tsunagu-pos { background: none; border: 0; border-radius: 0; box-shadow: none; cursor: default; padding: 0 6px; gap: 14px; flex-direction: column; justify-content: flex-start; text-align: center; }
.tsunagu-rcpage .tsunagu-pos__badge { width: 72px; height: 72px; font-size: 22px; }
.tsunagu-rcpage .tsunagu-pos__badge svg { width: 36px; height: 36px; }
.tsunagu-rcpage .tsunagu-pos__name { font-size: 18px; line-height: 1.55; }
@media (max-width: 767px) {
.tsunagu-rcpage .tsunagu-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; max-width: 460px; }
.tsunagu-rcpage .tsunagu-perk { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; text-align: center; min-height: 0; padding: 0 4px; gap: 10px; font-size: 15px; line-height: 1.55; }
.tsunagu-rcpage .tsunagu-perk.rc-ico::before { width: 58px; height: 58px; }
.tsunagu-rcpage .tsunagu-perk.rc-ico::after { top: 14px; left: 50%; width: 30px; height: 30px; margin: 0 0 0 -15px; }
.tsunagu-rcpage .tsunagu-perk--note { flex-wrap: nowrap; padding: 0 4px; }
.tsunagu-rcpage .tsunagu-perk--note::before { position: static; margin: 0 0 4px; }
.tsunagu-rcpage .tsunagu-perk--note .tsunagu-perk__tag { font-size: 12px; }
.tsunagu-rcpage .tsunagu-pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; max-width: 420px; }
.tsunagu-rcpage .tsunagu-pos { flex-direction: column; justify-content: flex-start; text-align: center; padding: 0 4px; gap: 10px; }
.tsunagu-rcpage .tsunagu-pos__badge { width: 60px; height: 60px; font-size: 20px; }
.tsunagu-rcpage .tsunagu-pos__badge svg { width: 30px; height: 30px; }
.tsunagu-rcpage .tsunagu-pos__name { font-size: 15px; }
}
@media (max-width: 359px) { .tsunagu-rcpage .tsunagu-pos__name { font-size: 13.5px; letter-spacing: -.02em; } .tsunagu-rcpage .tsunagu-perk { font-size: 14px; } }
/* ==== 2026-10-10 採用情報「職場の様子」スライダー調整：スクロールバー非表示／写真枠の目立たない台紙／説明文を大きく・位置統一／矢印位置 ==== */
.tsunagu-rcpage .rc-hgal__scroller { scrollbar-width: none; -ms-overflow-style: none; padding: 2px 2px 0; }
.tsunagu-rcpage .rc-hgal__scroller::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tsunagu-rcpage .rc-hgal__frame { background: #F4EEE2; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(160, 138, 100, .14); }
.tsunagu-rcpage .rc-hgal__cap { margin: 12px 0 0; padding: 0 4px; min-height: 3.2em; font-size: 17px; line-height: 1.6; text-align: center; text-wrap: balance; }
.tsunagu-rcpage .rc-hgal__btn { top: calc(2px + (100% - 2px - 12px - 54.4px) / 2); }
.tsunagu-rcpage .rc-hgal__btn--prev { left: -16px; }
.tsunagu-rcpage .rc-hgal__btn--next { right: -16px; }
@media (max-width: 1099px) { .tsunagu-rcpage .rc-hgal__btn--prev { left: -8px; } .tsunagu-rcpage .rc-hgal__btn--next { right: -8px; } }
@media (max-width: 767px) {
.tsunagu-rcpage .rc-hgal__frame { border-radius: 12px; }
.tsunagu-rcpage .rc-hgal__cap { margin-top: 10px; font-size: 16px; min-height: 3.2em; }
}
/* ==== 2026-10-10 恵川先生ページ写真ギャラリー：スクロールバー非表示＋矢印ボタン／写真の拡大表示（採用情報ページと共通） ==== */
.dr-hs { position: relative; }
.dr-gallery { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px; }
.dr-gallery::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dr-gallery__open, .rc-hgal__open { display: block; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.dr-gallery__open { border-radius: 14px; }
.dr-gallery__open:focus-visible, .rc-hgal__open:focus-visible { outline: 3px solid #f6c85f; outline-offset: 3px; }
.dr-gallery__hint { font-size: 13px; line-height: 1.6; padding: 0 12px; }
.dr-hs__btn { position: absolute; top: 156px; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid #E7DECF; background: rgba(255, 255, 255, .96); color: #2F6F6F; box-shadow: 0 2px 8px rgba(60, 45, 20, .18); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 30px; line-height: 1; font-family: inherit; }
.dr-hs__btn span { display: block; margin-top: -3px; }
.dr-hs__btn:hover { background: #fff; box-shadow: 0 3px 12px rgba(60, 45, 20, .28); }
.dr-hs__btn:focus-visible { outline: 3px solid #f6c85f; outline-offset: 2px; }
.dr-hs__btn[hidden] { display: none; }
.dr-hs__btn--prev { left: -8px; }
.dr-hs__btn--next { right: -8px; }
@media (max-width: 767px) { .dr-hs__btn { display: none !important; } }
@media (hover: none) and (pointer: coarse) { .dr-hs__btn { display: none !important; } }
.tsunagu-rcpage .rc-hgal__open { width: 100%; height: 100%; }
.tsunagu-rcpage .rc-hgal__open img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pv { position: fixed; inset: 0; z-index: 400; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 16px; background: rgba(32, 27, 24, .92); }
.pv.is-open { display: flex; }
.pv__fig { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
.pv__img { display: block; max-width: min(96vw, 1100px); max-height: calc(100vh - 56px - 16px - 70px); max-height: calc(100dvh - 56px - 16px - 70px); width: auto; height: auto; object-fit: contain; border-radius: 8px; background: #fff; }
.pv__cap { max-width: min(92vw, 760px); margin: 0; color: #fff; font-size: 17px; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.pv__cap[hidden] { display: none; }
.pv__close { position: absolute; top: 8px; right: 10px; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #333; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pv__close:hover { background: #f4e7e3; }
.pv__close:focus-visible { outline: 3px solid #f6c85f; outline-offset: 2px; }
@media (max-width: 767px) { .pv { padding: 60px 8px 12px; } .pv__img { max-width: 98vw; max-height: calc(100dvh - 60px - 12px - 80px); } .pv__cap { font-size: 16px; } }
/* ==== 2026-10-10 クリックできない情報表示の枠を整理：トップ「採用情報」／採用情報ページ／ケアプランセンター「スタッフのご紹介」 ==== */
/* ケアプランセンター：スタッフ紹介を2つにしたので2列・中央寄せ（スマホは1列） */
.tsunagu-grid-3.tsunagu-grid-3--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
@media (max-width: 767px) { .tsunagu-grid-3.tsunagu-grid-3--two { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
/* ① トップ「採用情報」の6項目：白い枠をなくし、色付きアイコン＋文字だけに */
body.home .tsunagu-recruit .tsunagu-checks li { background: none; border: 0; border-radius: 0; box-shadow: none; min-height: 56px; padding: 8px 8px 8px 56px; }
body.home .tsunagu-recruit .tsunagu-checks li::before { left: 4px; }
body.home .tsunagu-recruit .tsunagu-checks li::after { left: 13px; }
body.home .tsunagu-recruit .tsunagu-checks { gap: 8px 16px; }
@media (max-width: 480px) { body.home .tsunagu-recruit .tsunagu-checks li { min-height: 52px; } }
/* 採用情報ページ ②「私たちが一緒に働きたい方」③「TSUNAGUならではの専門性」：枠なしの点リスト（細い区切り線のみ） */
.tsunagu-rcpage .tsunagu-checks li { background: none; border: 0; border-bottom: 1px solid var(--rc-line); border-radius: 0; box-shadow: none; padding: 12px 8px 12px 34px; }
.tsunagu-rcpage .tsunagu-checks li::before { left: 10px; }
.tsunagu-rcpage .tsunagu-checks { column-gap: 32px; row-gap: 0; }
@media (max-width: 480px) { .tsunagu-rcpage .tsunagu-checks li { padding: 11px 6px 11px 32px; } }
/* ④「まずはお気軽にご相談ください」の3行：枠なし・中央揃えの文章＋細い区切り線 */
.tsunagu-rcpage .tsunagu-visit__ask { gap: 0; }
.tsunagu-rcpage .tsunagu-visit__ask li { background: none; border: 0; border-bottom: 1px solid var(--rc-line); border-radius: 0; padding: 14px 8px; }
.tsunagu-rcpage .tsunagu-visit__ask li:last-child { border-bottom: 0; }
/* ⑤「TSUNAGUが大切にしていること」の3つ：色付きの線だけ残し、カード枠・影・白背景をなくす／囲み文は上下の細い線のみ */
.tsunagu-rcpage .tsunagu-values { gap: 28px; }
.tsunagu-rcpage .tsunagu-values li { background: none; border: 0; border-top: 3px solid var(--tsunagu-coral); border-radius: 0; box-shadow: none; padding: 18px 10px 4px; }
.tsunagu-rcpage .tsunagu-values li:nth-child(2) { border-top-color: var(--tsunagu-teal); }
.tsunagu-rcpage .tsunagu-values li:nth-child(3) { border-top-color: var(--rc-gold); }
.tsunagu-rcpage .tsunagu-rc-quote { background: none; border: 0; border-top: 1px solid var(--rc-gold-hair); border-bottom: 1px solid var(--rc-gold-hair); border-radius: 0; padding: 26px 12px; }
@media (max-width: 800px) { .tsunagu-rcpage .tsunagu-values { gap: 20px; } .tsunagu-rcpage .tsunagu-values li { padding: 16px 8px 2px; } .tsunagu-rcpage .tsunagu-rc-quote { padding: 22px 8px; } }
/* ⑥「訪問看護が初めての方へ」の3つ：色付きの線＋見出し＋本文（枠なし） */
.tsunagu-rcpage .tsunagu-train { gap: 32px; }
.tsunagu-rcpage .tsunagu-train .tsunagu-card { background: none; border: 0; border-top: 3px solid var(--tsunagu-accent); border-radius: 0; box-shadow: none; padding: 20px 6px 0; }
@media (max-width: 960px) { .tsunagu-rcpage .tsunagu-train { gap: 28px; } }
@media (max-width: 767px) { .tsunagu-rcpage .tsunagu-train .tsunagu-card { padding: 18px 2px 0; } }
/* ⑦「看護とリハビリが連携する職場」の2つ／「1日の訪問件数の目安」：枠・白背景をなくし、上の色線と区切り線で整理 */
.tsunagu-rcpage .tsunagu-role { background: none; border: 0; border-top: 3px solid var(--c); border-radius: 0; box-shadow: none; padding: 22px 4px 0; }
.tsunagu-rcpage .tsunagu-grid-2.tsunagu-sub-body { gap: 40px; }
@media (max-width: 767px) { .tsunagu-rcpage .tsunagu-role { padding: 20px 2px 0; } .tsunagu-rcpage .tsunagu-grid-2.tsunagu-sub-body { gap: 32px; } }
.tsunagu-rcpage .tsunagu-day__stat { background: none; border: 0; border-left: 4px solid #E3C36A; border-radius: 0; padding: 8px 18px; }
@media (max-width: 800px) { .tsunagu-rcpage .tsunagu-day__stat { padding: 6px 16px; } }
/* ==== 2026-10-10 採用情報「募集職種」ST：淡いグリーン背景＋濃いグリーン文字／お問い合わせ「ケアマネジャー・医療機関の方へ」：カードをやめてシンプルな中央揃えの文章に ==== */
.tsunagu-rcpage .tsunagu-pos:nth-child(4) .tsunagu-pos__badge { background: #E6EEDA; color: #4F6A2A; }
#professional.tsunagu-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 8px 0 0; text-align: center; }
#professional .tsunagu-card__title { margin: 0 0 12px; font-size: 26px; line-height: 1.5; text-align: center; }
#professional .tsunagu-card__title::before { content: none; }
#professional .tsunagu-card__text { margin: 0; text-align: center; }
@media (max-width: 767px) { #professional.tsunagu-card { padding-top: 4px; } #professional .tsunagu-card__title { font-size: 22px; margin-bottom: 10px; } }
@media (max-width: 359px) { #professional .tsunagu-card__title { font-size: 19px; } }
/* ==== 2026-10-10 クリックできない情報表示の整理（⑧特徴ページ PT/OT/ST ⑨サービス紹介 ⑩ケアプランセンター） ==== */
/* ⑧ TSUNAGUの特徴：PT・OT・ST（枠なし。丸いバッジ＋文字は維持） */
.tg-ft-roles li { background: none; border: 0; border-radius: 0; box-shadow: none; }
@media (min-width: 768px) { .tg-ft-roles { gap: 20px; } .tg-ft-roles li { padding: 12px 10px; } }
@media (max-width: 767px) {
.tg-ft-roles { gap: 0; }
.tg-ft-roles li { padding: 14px 4px; border-bottom: 1px solid #e5e7eb; }
.tg-ft-roles li:last-child { border-bottom: 0; }
}
/* ⑨ サービス紹介：「主なサービス内容」7項目＝カードをやめ、上の細い線＋小見出し＋リスト */
#menu .tsunagu-grid-2 { column-gap: 56px; row-gap: 14px; }
#menu .tsunagu-card { background: none; border: 0; border-top: 1px solid #ddd3c1; border-radius: 0; box-shadow: none; padding: 20px 4px 12px; }
@media (max-width: 767px) { #menu .tsunagu-grid-2 { row-gap: 8px; } #menu .tsunagu-card { padding: 18px 2px 10px; } }
/* 「サービスの流れ」4項目＝番号の丸＋見出し・文章（枠・影なし） */
#flow .tsunagu-steps { gap: 28px 24px; }
#flow .tsunagu-steps li { background: none; border: 0; border-top: 1px solid #ddd3c1; border-radius: 0; box-shadow: none; padding: 18px 4px 6px 52px; }
#flow .tsunagu-steps li::before { left: 4px; top: 16px; width: 36px; height: 36px; font-size: 17px; }
@media (max-width: 767px) { #flow .tsunagu-steps { gap: 18px; } #flow .tsunagu-steps li { padding: 16px 2px 4px 50px; } #flow .tsunagu-steps li::before { left: 2px; top: 14px; } }
/* ⑩ ケアプランセンター */
section[aria-labelledby="what-title"] .tsunagu-card--accent { background: none; border: 0; border-top: 3px solid var(--tsunagu-accent); border-radius: 0; box-shadow: none; padding: 20px 6px 4px; }
section[aria-labelledby="what-title"] .tsunagu-grid-2 { gap: 40px; }
section[aria-labelledby="cpfeat-title"] .tsunagu-card { background: none; border: 0; border-top: 1px solid #ddd3c1; border-radius: 0; box-shadow: none; padding: 20px 6px 4px; }
section[aria-labelledby="cpfeat-title"] .tsunagu-grid-3 { gap: 36px; }
@media (max-width: 900px) { section[aria-labelledby="what-title"] .tsunagu-grid-2 { gap: 28px; } section[aria-labelledby="cpfeat-title"] .tsunagu-grid-3 { gap: 22px; } }
/* 「こんなお悩みをお持ちの方へ」：枠なしのリスト（点＋文章＋細い区切り線） */
body.tsunagu-page:has(#worry-title) .tsunagu-worries { column-gap: 40px; row-gap: 0; }
body.tsunagu-page:has(#worry-title) .tsunagu-worries li { background: none; border: 0; border-bottom: 1px solid #e5ded0; border-radius: 0; box-shadow: none; padding: 16px 4px; }
@media (max-width: 720px) { body.tsunagu-page:has(#worry-title) .tsunagu-worries li { padding: 14px 2px; } }
/* 「スタッフのご紹介」：2名表示のまま、影を控えめに */
#staff .tsunagu-card { box-shadow: 0 1px 6px rgba(60, 45, 20, .06); }
/* ==== 2026-10-10 ①特徴ページのST配色を採用情報と統一／②サービス紹介「対象者」「対象サービスエリア」の枠をなくす／③「主なサービス内容」の階層表現 ==== */
/* ① ST：淡いグリーン背景＋濃いグリーン文字（採用情報ページのSTと同じ色） */
.tg-ft-roles__mark--yellow { background: #E6EEDA; color: #4F6A2A; border-color: #d3e0bf; }
/* ② 対象者／対象サービスエリア：白カードをやめ、ページ背景になじむ表示に */
#target .tsunagu-card, #area .tsunagu-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
#target .tsunagu-list--cols { column-gap: 56px; row-gap: 14px; margin-top: 4px; }
#target .tsunagu-list li { line-height: 1.8; }
#area .tsunagu-card { text-align: center; }
#area .tsunagu-infolist { margin-inline: auto; }
#area .tsunagu-note-line { text-align: center; margin-top: 20px; }
@media (max-width: 767px) {
#target .tsunagu-list--cols { row-gap: 12px; }
#area .tsunagu-infolist--area { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
/* ③ 主なサービス内容：大項目＝ティールの丸＋太めの文字／詳細項目＝控えめな「・」を字下げ（PC・スマホ共通） */
#menu .tsunagu-card__title { font-weight: 700; font-size: 20px; line-height: 1.5; }
#menu .tsunagu-card__title::before { background: var(--tsunagu-teal); }
#menu .tsunagu-list { margin-top: 10px; gap: 4px; margin-left: 20px; }
#menu .tsunagu-list li { padding-left: 1.15em; font-size: 16px; line-height: 1.8; color: var(--tsunagu-text); }
body.tsunagu-page #menu .tsunagu-list li::before, #menu .tsunagu-list li::before { content: "・"; left: 0 !important; top: 0 !important; transform: none; width: auto; height: auto; border-radius: 0; background: none; color: #8b8274; font-size: inherit; line-height: inherit; }
@media (max-width: 767px) {
#menu .tsunagu-card__title { font-size: 19px; }
#menu .tsunagu-list { margin-left: 16px; }
#menu .tsunagu-list li { font-size: 15.5px; line-height: 1.75; }
}
/* ==== 2026-10-10 LINEでのお問い合わせ導線：PC（769px以上）とスマホ（768px以下）の表示切り替え／LINEボタン／お問い合わせページ「LINEでのご相談」 ==== */
@media (max-width: 768px) { .tsunagu-only-pc { display: none !important; } }
@media (min-width: 769px) { .tsunagu-only-sp { display: none !important; } }
.tsunagu-btn--line { background: #05A648; color: #fff; border-color: #05A648; min-height: 52px; }
.tsunagu-btn--line:hover { background: #048a3b; border-color: #048a3b; }
.tsunagu-btn--line:focus-visible { outline: 3px solid rgba(5, 166, 72, .4); outline-offset: 2px; }
.tsunagu-linebox { margin-top: 56px; }
.tsunagu-linebox__card { max-width: 420px; margin: 24px auto 0; padding: 28px 24px 24px; text-align: center; background: var(--tsunagu-white); border: 1px solid var(--tsunagu-border); border-radius: var(--tsunagu-radius); box-shadow: var(--tsunagu-shadow); }
.tsunagu-linebox__text { line-height: 1.8; }
.tsunagu-linebox__qr { display: block; width: 200px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 16px auto 8px; background: #fff; object-fit: contain; }
.tsunagu-linebox__name { font-size: 14px; line-height: 1.6; color: #5A4F45; }
.tsunagu-linebox__btn { margin-top: 16px; }
@media (max-width: 768px) {
.tsunagu-linebox { margin-top: 44px; }
.tsunagu-linebox__card { padding: 22px 18px 22px; }
.tsunagu-linebox__btn .tsunagu-btn { width: 100%; }
.tsunagu-contact__more .tsunagu-btn--line { width: 100%; max-width: 360px; }
}
/* 共通お問い合わせエリアのLINEボタン：トップ・下層ページの既存ボタン配色より優先してLINEの緑にする */
body.home .tsunagu-contact__more .tsunagu-btn.tsunagu-btn--line,
body.tsunagu-page.tsunagu-page .tsunagu-contact__more .tsunagu-btn.tsunagu-btn--line { background: #05A648; border-color: #05A648; color: #fff; }
body.home .tsunagu-contact__more .tsunagu-btn.tsunagu-btn--line:hover,
body.tsunagu-page.tsunagu-page .tsunagu-contact__more .tsunagu-btn.tsunagu-btn--line:hover { background: #048a3b; border-color: #048a3b; color: #fff; }
/* ==== 2026-10-11 LINE配置の最終調整：共通お問い合わせエリアのLINEボタンを訪問看護カード内へ／お問い合わせページで公式LINEを明示 ==== */
.tsunagu-ccard__line { width: 100%; max-width: 320px; min-height: 52px; margin: 16px auto 0; padding-inline: 14px; font-size: 16px; }
.tsunagu-linebox__name { font-weight: 700; font-size: 16px; line-height: 1.6; color: var(--tsunagu-text); }
.tsunagu-linebox__text { margin-top: 6px; font-size: 15px; }
.tsunagu-linebox__qr { margin-top: 14px; margin-bottom: 0; }
@media (max-width: 768px) { .tsunagu-linebox__btn { margin-top: 16px; } .tsunagu-linebox__name { font-size: 15px; } }
.tsunagu-linebox__card { max-width: 480px; }
.tsunagu-linebox__name, .tsunagu-linebox__text { text-wrap: balance; }
@media (max-width: 359px) { .tsunagu-ccard__line, .tsunagu-linebox__btn .tsunagu-btn { font-size: 14.5px; padding-inline: 10px; gap: 6px; } }
/* ==== 2026-10-11 料金ページ上部「このページの項目」(8項目ナビ)：ページ移動用ボタンの統一デザイン（白背景＋細いティール枠＋ティール文字＋右の「›」。PCはホバーでティール背景＋白文字、スマホは通常時から矢印を表示しタップで色が変わる）。#tsgfee-root（料金表プラグイン）の中だけに適用。プラグインのファイルは変更しない ==== */
@media screen {
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a {
gap: 8px; padding: 8px 18px 8px 22px; min-height: 46px;
background: #fff; color: var(--tsunagu-teal-deep, #0e8487);
border: 1px solid var(--tsunagu-teal, #18a7aa); box-shadow: none;
white-space: nowrap; line-height: 1.4; font-size: 15px;
-webkit-tap-highlight-color: transparent;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a::after {
content: ""; flex: none; width: 7px; height: 7px; margin-left: -2px;
border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a:active {
background: var(--tsunagu-teal-deep, #0e8487); color: #fff; border-color: var(--tsunagu-teal-deep, #0e8487); box-shadow: none;
}
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a:focus-visible {
outline: 3px solid rgba(24, 167, 170, .4); outline-offset: 2px;
}
}
@media screen and (hover: hover) and (pointer: fine) {
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a:hover {
background: var(--tsunagu-teal-deep, #0e8487); color: #fff; border-color: var(--tsunagu-teal-deep, #0e8487); box-shadow: none;
}
}
@media screen and (hover: none), screen and (pointer: coarse) {
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a:hover { background: #fff; color: var(--tsunagu-teal-deep, #0e8487); border-color: var(--tsunagu-teal, #18a7aa); }
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a:active { background: var(--tsunagu-teal-deep, #0e8487); color: #fff; border-color: var(--tsunagu-teal-deep, #0e8487); }
}
@media screen and (max-width: 767px) {
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips { gap: 8px; }
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips li > a { padding: 8px 14px 8px 16px; min-height: 44px; font-size: 14.5px; gap: 6px; }
}
@media screen and (min-width: 768px) {
div#tsgfee-root.tsgfee .tsgfee-feeprice__toc .tsgfee-chips { max-width: 720px; margin-inline: auto; }
}
/* ==== 2026-10-11 医師ページ冒頭：「連携訪問診療医」をTSUNAGUの強みとして大きく表示（ティール）。先生のお名前・クリニック名・紹介文・DOCTORの表記は現状のまま ==== */
.dr .dr-hero__title { margin: 0 0 8px; font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; color: #0e8487; white-space: nowrap; }
@media (max-width: 767px) { .dr .dr-hero__title { font-size: clamp(22px, 7vw, 28px); margin-bottom: 6px; letter-spacing: .04em; } }
/* ==========================================================================
2026-10-12 スマホ：右下の「ページ上部へ戻る」ボタン
・出力元は、プラグイン VK All in One Expansion Unit の （テーマのコードではない）。プラグインは編集せず、ここで見た目だけ上書きする
・スマホ（767px以下）のみ：サイズ 40x38 → 36px の丸形、黒 → サイトのティール（濃いめ）で控えめに、角の二重枠をやめて薄い影に、位置は少し内側へ（ノッチ・ホームバー対応）
・機能（スクロールで表示・クリックで先頭へ・フェード）はプラグインのまま。タップ範囲は透明な余白で44pxを確保。PC・タブレットは変更なし
========================================================================== */
@media (max-width: 767px) {
body .page_top_btn {
right: max(12px, env(safe-area-inset-right));
bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
width: 36px; height: 36px; border-radius: 50%;
background-color: rgba(14, 132, 135, .82); background-size: 42% auto;
box-shadow: 0 2px 8px rgba(40, 70, 70, .2);
}
body .page_top_btn::before { content: ""; position: absolute; inset: -4px; }
}
/* ==========================================================================
2026-10-12 特徴ページ：「疼痛・症状の管理」の「疼」だけ字体が違って見える（iPhone Safari）への対処
・原因：本番にはプラグイン Easy Google Fonts があり、サイト全体の p・h1〜h6・ul/li・footer・table に「Sawarabi Mincho」（太さ400のみの明朝）を
インラインCSS（#egf-frontend-styles）で強制している。Local にはこのプラグインが無いため Local では再現しない。
そのため特徴ページの一覧（li／strong／span）と本文（p）が Noto Sans JP ではなく Sawarabi Mincho になり、太字は擬似ボールド（太さ700の実体が無い）、
珍しい字（疼）はWebフォントの分割配信（unicode-range）のうち別ファイルが必要で、読み込み前後・iOSの字形選択で別フォント（ゴシック）に落ちて見える
・対処：特徴ページ（.tg-ft）の本文・一覧は、テーマの標準フォント（Noto Sans JP → Hiragino Sans 等）に統一。太さ700は実体のあるNoto Sans JPを使うため擬似ボールドも解消
・見出し・番号・英語見出し・キャッチコピーなど、テーマが明朝（Noto Serif JP）等を個別指定している要素は対象外。PC・スマホ共通（フォント指定のみ）
========================================================================== */
.tg-ft :is(p, ul, li):not(.tg-ft-lead--catch, .tg-ft-en, .tg-ft-stat__label, .tg-ft-stat__num) { font-family: var(--tsunagu-font-sans); }
/* ==== 2026-10-12 特徴ページ：黄色い案内カード（終末期ケア専門士・LSVT）の本文を、スマホで横幅いっぱいに自然に折り返す（スマホのみ。PCは変更なし） ==== */
/* ・LSVTカードの左右の余白・幅を、終末期ケア専門士カードに揃える（左右とも14px）
・本文は左揃えのまま、文節ごとの折り返し（auto-phrase）をやめ、行の右端まで文字を使う（語の途中で切れたくない語は PHP 側で .tg-ft-nw を指定） */
@media (max-width:767px){
.tg-ft-lsvt#tsunagu-specialty{margin-left:-8px;margin-right:-8px;padding-left:14px;padding-right:14px}
.tg-ft-lsvt#end-of-life-care .tg-ft-lsvt__body .tg-ft-text,
.tg-ft-lsvt#tsunagu-specialty .tg-ft-lsvt__body .tg-ft-text{max-width:none;word-break:normal;text-wrap:pretty}
}
/* ==========================================================================
2026-10-13 ケアプランセンターページ：スマホ（767px以下）の見出し・説明文の調整
・水色の「●」（カード見出し前の丸）はスマホだけ非表示。PC（768px以上）は今までどおり表示。
・見出しは中央揃え。語句のまとまり（.tsunagu-cp-nw）の途中では折り返さず、
「案」「る」「す」のような最後の1文字だけが次の行に残らないようにする。
・「ケアプランセンターってどんなところ？」の2項目は、説明文も中央揃え（短い文章のため）。
特徴・スタッフ紹介の説明文は、長いので今までどおり左揃え。
・「ってどんなところ？」セクション右端の飾りの丸は、スマホだけ非表示（長い説明文の3行目に重なるため）。PCは今までどおり表示。
・このページ（body.post-name-careplan）だけに効く。PCの見た目・ほかのページは変更なし。
========================================================================== */
@media (max-width: 767px) {
body.post-name-careplan .tsunagu-card__title::before { display: none; }
body.post-name-careplan .tsunagu-cp-nw { white-space: nowrap; }
body.post-name-careplan .tsunagu-staff .tsunagu-card__title { margin-top: 8px; } /* 丸を消した分、役職名と見出しの間を少し空ける */
body.post-name-careplan .tsunagu-h2--center,
body.post-name-careplan .tsunagu-card__title,
body.post-name-careplan .tsunagu-cp-ttl { text-align: center; text-wrap: balance; }
body.post-name-careplan section[aria-labelledby="what-title"] .tsunagu-card__text { text-align: center; text-wrap: balance; }
body.post-name-careplan section[aria-labelledby="what-title"]::after { content: none; } /* 右端の飾りの丸が説明文に重なるため、スマホだけ消す */
}
/* 320px前後の狭い画面だけ、見出し「ケアプランセンターって／どんなところ？」が数px はみ出さないよう文字を少し小さくする */
@media (max-width: 359px) {
body.post-name-careplan .tsunagu-h2--center { font-size: 22px; }
}
/* ==========================================================================
2026-10-14 ケアプランセンター：iPhone Safari での不自然な改行を解消（スマホ767px以下のみ・このページだけ）
原因：サイト共通の word-break:auto-phrase（文節ごとの改行）は iPhone Safari では効かず、
さらに Safari は text-wrap の行そろえで行の長さを均す。そのため「ケアプランセン／ター」「何からは／じめたら」
のように単語の途中で折り返されていた。
対策：改行位置を HTML 側の文節（.tsunagu-cp-nw）で指定し、文節の途中では折り返さない。
文節どうしの境目では、ブラウザに関係なく折り返せるよう word-break を通常に戻す。
・「特徴」3項目の説明文：中央揃え／スタッフ紹介：役職名・見出し・経歴すべて中央揃え
・ページ上部の淡い黄色の飾りの丸：スマホだけ非表示（文章に重なるため）
・PC（768px以上）・ほかのページ・スタッフ情報・PDF公開設定は変更なし。
========================================================================== */
@media (max-width: 767px) {
body.post-name-careplan :is(.tsunagu-pagehead, .tsunagu-section) * { word-break: normal; }
body.post-name-careplan .tsunagu-pagehead::after { content: none; } /* ページ上部の淡い黄色の飾りの丸が「暮らしに寄り添って…」の行に重なるため、スマホだけ消す（PCは今までどおり） */
body.post-name-careplan .tsunagu-pagehead__title,
body.post-name-careplan .tsunagu-pagehead__lead { text-align: center; text-wrap: balance; }
body.post-name-careplan section[aria-labelledby="cpfeat-title"] .tsunagu-card__text { text-align: center; text-wrap: balance; }
body.post-name-careplan section[aria-labelledby="cpfeat-title"] .tsunagu-grid-3 { grid-auto-rows: auto; } /* 説明文の行数が項目ごとに違っても、余白が不ぞろいにならないよう各項目を内容の高さに */
/* スタッフ紹介：役職名・見出し・経歴をすべて中央揃えにし、2名のカードで余白・行間をそろえる */
body.post-name-careplan .tsunagu-staff { padding: 26px 20px; }
body.post-name-careplan #staff .tsunagu-grid-3 { grid-auto-rows: auto; }
body.post-name-careplan .tsunagu-staff__role { text-align: center; font-size: 15px; line-height: 1.5; margin-top: 0; }
body.post-name-careplan .tsunagu-staff .tsunagu-card__title { margin-top: 6px; line-height: 1.5; }
body.post-name-careplan .tsunagu-staff .tsunagu-card__text { text-align: center; text-wrap: balance; margin-top: 14px; line-height: 1.85; font-size: 16px; }
}