@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
    --green: #7cb342;
    --brown: #5d4037;
    --menu-eng: #c5e1a5; 
    --soft-green: #f8faf5;
    --leaf-radius: 80px 15px 80px 15px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.8;
    color: #333;
    background-color: var(--soft-green);
}

header {
position: relative;
    padding: 90px 20px;
    text-align: center;
    overflow: hidden;
    background-color: #fff;
    background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1)), url(../image_4.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
p.zyunbi {
    font-size: 1.3rem;
    text-align: center;
    margin-top: 34px;
    color: #7cb342;
}
.logo-container {
    position: relative;
    z-index: 2; /* ロゴを背景より前に出ぁE*/
}

span.captionBig {
    font-size: 31px;
    display: block;
    text-align: center;
    margin-bottom: 30px;
}
.logo-container img { max-width: 460px; width: 100%; }

/* ナビゲーションの改良 */
nav {
    background: var(--brown);
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

nav ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.nav-main { font-weight: 700; font-size: 0.9rem; }
.nav-sub { font-size: 0.6rem; color: var(--menu-eng); margin-top: 2px; }

/* 予紁E�E問い合わせ�Eタンの強調 */
.nav-btn-green {
    background: var(--green);
}

.nav-btn-green .nav-sub {
    color: #fff;
    opacity: 0.8;
}

nav ul li a:hover {
    background: #4e342e; /* 少し暗いブラウン */
}

.nav-btn-green:hover {
    background: #689f38; /* 少し暗いグリーン */
}

/* =====================================================
   グローバルアニメーション定義
===================================================== */
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes barGrow {
    from { height: 0; opacity: 0; }
    to   { height: 35px; opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

/* =====================================================
   ヘッダーアニメーション
===================================================== */
.logo-container {
    animation: fadeSlideDown 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* =====================================================
   ナビ�E�スクロール縮小エフェクト！ES制御クラス�E�E
===================================================== */
nav {
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}
nav.scrolled {
    box-shadow: 0 4px 24px rgba(93,64,55,0.25);
}
nav.scrolled ul li a {
    padding: 8px 20px;
}

/* =====================================================
   セクション�E�スクロールフェードイン
===================================================== */
section {
    max-width: 1000px;
    margin: 40px auto;
    background: #fff;
    padding: 60px 40px;
    border-radius: var(--leaf-radius);
    box-shadow: 0 10px 30px rgba(124, 179, 66, 0.05);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.3s ease;
}

/* JSが有効なときだけフェードイン初期状態を適用 */
.js-ready section:not(.visible) {
    opacity: 0;
    transform: translateY(32px);
}

section.visible {
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 16px 48px rgba(124, 179, 66, 0.1);
	border: solid 1px #d2e5b9;
}

section:hover {
    box-shadow: 0 20px 56px rgba(124, 179, 66, 0.14);
}

/* =====================================================
   h2 裁E��バ�E�E�アニメーション
===================================================== */
.bg-green-section { background: var(--green); color: #fff; }

h2 {
    color: var(--brown);
    font-size: 1.6rem;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

h2::before {
    content: "";
    width: 12px;
    height: 35px;
    background: var(--green);
    border-radius: 20px 5px;
    flex-shrink: 0;
    /* アニメーション初期状態！Eisible付与で起動！E*/
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
}

section.visible h2::before {
    transform: scaleY(1);
}

.bg-green-section h2 { color: #fff; }
.bg-green-section h2::before { background: rgba(255,255,255,0.8); }

/* 茶色背景セクション冁E�Eh2�E�屁E��E��護支援 求人惁E��など�E�E*/
.h2-white { color: #fff !important; justify-content: center; }
.h2-white::before { background: rgba(255,255,255,0.7) !important; }

/* =====================================================
   チE�Eブル行：�Eバ�EハイライチE
===================================================== */
table tr {
    transition: background 0.2s ease;
}
table tr:hover {
    background: var(--soft-green);
}

/* =====================================================
   ボタン・リンク全般�E��Eバ�E浮丁E
===================================================== */
a[href]:not(nav a):not(.btn-submit):not(.btn-back):not(.btn-confirm):not(.btn-edit) {
    transition: color 0.2s ease;
}

/* チE�Eブル冁E�E電話・メールリンク */
table td a {
    color: var(--green);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}
table td a:hover { color: var(--brown); }

/* =====================================================
   求人セクション ボタン浮丁E
===================================================== */
section[style*="background: var(--brown)"] a {
    transition: transform 0.25s cubic-bezier(0.23,1,0.32,1),
                box-shadow 0.25s ease,
                background 0.2s ease !important;
}
section[style*="background: var(--brown)"] a:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 10px 28px rgba(124,179,66,0.4) !important;
}

/* =====================================================
   空き状況カード：�Eわ�EめE
===================================================== */
section.visible [style*="border: 2px solid var(--green)"] {
    animation: float 3.5s ease-in-out infinite 0.8s;
}

/* =====================================================
   フッター�E�ウェーブ裁E��
===================================================== */
footer {
    background: var(--brown);
    color: #fff;
    text-align: center;
    padding: 56px 20px 36px;
    position: relative;
    overflow: hidden;
}

/* 背景に薁E��葉っぱ裁E�� */
footer::after {
    content: "";
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: rgba(124,179,66,0.07);
    border-radius: 60% 20% 60% 20% / 60% 20% 60% 20%;
    pointer-events: none;
}

.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* ロゴ */
.footer-logo-img {
    display: block;
    margin: 0 auto 28px;
    max-width: 300px;
    width: 70%;
    /* 白抜き化（ロゴがRGBなのでフィルターで白反転�E�E*/
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.footer-logo-img:hover { opacity: 1; }

/* 区刁E��ライン�E�葉脈風グラチE�Eション */
.footer-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2) 20%, var(--green) 50%, rgba(255,255,255,0.2) 80%, transparent);
    margin: 0 auto 28px;
}

/* ナビリンク */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    margin-bottom: 28px;
}

.footer-nav a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.78rem;
    padding: 4px 16px;
    border-right: 1px solid rgba(255,255,255,0.2);
    transition: color 0.2s ease;
    letter-spacing: 0.05em;
}
.footer-nav a:last-child { border-right: none; }
.footer-nav a:hover { color: var(--menu-eng); }

/* 連絡允E*/
.footer-contact {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 24px;
    letter-spacing: 0.05em;
}
.footer-contact a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-contact a:hover { color: var(--menu-eng); }

/* コピ�EライチE*/
.footer-copy {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.08em;
}

/* 重褁E��てぁE��古ぁEooter定義を無効匁E*/

/* =====================================================
   p タグ�E�テキスト読みめE��さ向丁E
===================================================== */
section p {
    line-height: 1.9;
    margin-bottom: 12px;
}
section p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin-top: 20px; }
table th, table td { padding: 20px; border-bottom: 1px solid #eee; }
.calendar-container { width: 100%; text-align: center; }
/* =====================================================
   ハンバ�Eガーボタン�E�ECでは非表示�E�E
   葉っぱ型�Eタン ÁE枝が育つアニメーション
===================================================== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 52px;
    height: 52px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1200;
    position: fixed;
    top: 10px;
    right: 14px;
}

/* 葉っぱ型�E背景プレーチE*/
.hamburger::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--green);
    border-radius: 60% 20% 60% 20% / 60% 20% 60% 20%;
    transition: border-radius 0.45s cubic-bezier(0.23, 1, 0.32, 1),
                background 0.3s ease,
                transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 16px rgba(124,179,66,0.4), 0 1px 4px rgba(0,0,0,0.15);
}

/* ライン3本 */
.hamburger span {
    display: block;
    position: relative;
    z-index: 1;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                opacity 0.25s ease,
                width 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center;
}

.hamburger span:nth-child(1) { width: 22px; }
.hamburger span:nth-child(2) { width: 16px; align-self: flex-start; margin-left: 15px; }
.hamburger span:nth-child(3) { width: 22px; }

/* ホバー�E�葉っぱが�Eら�E */
.hamburger:hover::before {
    transform: scale(1.08);
    background: #8bc34a;
    border-radius: 55% 25% 55% 25% / 55% 25% 55% 25%;
    box-shadow: 0 6px 22px rgba(124,179,66,0.55);
}

.hamburger:hover span:nth-child(2) {
    width: 22px;
    margin-left: 0;
}

/* 開いた状態：茶色の丸 ÁEに変形 */
.hamburger.is-open::before {
    background: var(--brown);
    border-radius: 50%;
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 4px 18px rgba(93,64,55,0.4);
}

.hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    width: 22px;
}
.hamburger.is-open span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    width: 22px;
}
@media (min-width: 900px) {
span.nav-arrow {
    display: none;
}
}
/* =====================================================
   モバイル用ドロワーメニュー
===================================================== */
@media (max-width: 900px) {
.logo-container img { width: 80%; }
    nav {
        position: sticky;
        top: 0;
        z-index: 1000;
        /* スマ�Eではnavバ�Eを最小限に�E�高さゼロで隠ぁE*/
        height: 0;
        overflow: visible;
    }

    /* ドロワー本佁E*/
    nav > ul {
        position: fixed;
        top: 0;
        right: 0;
        width: min(290px, 82vw);
        height: 100dvh;
        background: var(--brown);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 100px 0 48px;
        transform: translateX(105%);
        transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
        box-shadow: -12px 0 48px rgba(0,0,0,0.3);
        z-index: 1050;
        flex-wrap: nowrap;

        /* ドロワー冁E��に葉脈風の裁E�� */
        background-image:
            radial-gradient(ellipse 220px 340px at 150% 40%, rgba(124,179,66,0.08) 0%, transparent 70%),
            radial-gradient(ellipse 180px 260px at -10% 80%, rgba(124,179,66,0.06) 0%, transparent 70%);
    }

    /* ドロワー上部にロゴラベル */
    nav > ul::before {
        content: "地福码E;
        display: block;
        position: absolute;
        top: 34px;
        left: 28px;
        font-size: 1.05rem;
        font-weight: 700;
        color: rgba(255,255,255,0.35);
        letter-spacing: 0.15em;
        pointer-events: none;
    }

    /* ドロワー上部の緑ライン裁E�� */
    nav > ul::after {
        content: "";
        display: block;
        position: absolute;
        top: 68px;
        left: 28px;
        right: 28px;
        height: 1px;
        background: linear-gradient(90deg, var(--green), transparent);
        pointer-events: none;
    }

    nav > ul.is-open {
        transform: translateX(0);
    }

    /* 吁E��ニュー頁E���E�スライドインアニメーション */
    nav ul li {
        width: 100%;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .js-ready nav ul li {
        opacity: 0;
        transform: translateX(20px);
    }

    nav > ul.is-open li:nth-child(1) { transition-delay: 0.08s; opacity: 1; transform: none; }
    nav > ul.is-open li:nth-child(2) { transition-delay: 0.13s; opacity: 1; transform: none; }
    nav > ul.is-open li:nth-child(3) { transition-delay: 0.18s; opacity: 1; transform: none; }
    nav > ul.is-open li:nth-child(4) { transition-delay: 0.23s; opacity: 1; transform: none; }
    nav > ul.is-open li:nth-child(5) { transition-delay: 0.28s; opacity: 1; transform: none; }

    nav ul li a {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 17px 28px;
        border-bottom: none;
        position: relative;
    }

    /* 左端の緑アクセントバー�E�葉脈ライン�E�E*/
    nav ul li a::before {
        content: "";
        display: block;
        width: 3px;
        height: 0;
        background: var(--green);
        border-radius: 2px;
        flex-shrink: 0;
        transition: height 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        align-self: stretch;
        margin: 4px 0;
    }

    nav ul li a:hover::before,
    nav ul li a.nav-btn-green::before {
        height: 100%;
    }

    /* 区刁E��緁E*/
    nav ul li:not(:last-child) a::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 28px;
        right: 28px;
        height: 1px;
        background: rgba(255,255,255,0.07);
    }

    nav ul li a:hover {
        background: rgba(255,255,255,0.05);
    }

    /* アクチE��ブ�Eージは緑ハイライチE*/
    nav ul li a.nav-btn-green {
        background: rgba(124,179,66,0.15);
    }

    .nav-main {
        font-size: 0.92rem;
        font-weight: 700;
        flex: 1;
    }

    .nav-sub {
        font-size: 0.58rem;
        color: var(--menu-eng);
        opacity: 0.7;
        margin-top: 0;
        letter-spacing: 0.05em;
    }

    .nav-btn-green .nav-sub { color: #c5e1a5; opacity: 0.9; }

    /* 矢印アイコン */
    nav ul li a > .nav-arrow {
        font-size: 1rem;
        color: rgba(255,255,255,0.25);
        transition: transform 0.2s ease, color 0.2s ease;
    }

    nav ul li a:hover > .nav-arrow {
        transform: translateX(3px);
        color: var(--green);
    }

    /* ハンバ�Eガーボタン表示 */
    .hamburger {
        display: flex;
    }

    /* オーバ�Eレイ */
    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(30,20,10,0.5);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.45s ease;
    }

    .nav-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    section {
        margin: 25px 25px;
        padding: 30px 20px;
        border-radius: 40px 10px;
    }
}

/* =====================================================
   ペ�Eジ遷移・そ�E他細部ポリチE��ュ
===================================================== */

/* ヘッダー背景パ�EラチE��ス用 */
header {
    will-change: background-position;
}

/* h3 スタイル統一 */
section h3 {
    position: relative;
    padding-left: 14px;
    margin-bottom: 10px;
}
section h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 70%;
    background: var(--green);
    border-radius: 3px;
    opacity: 0.6;
}

/* カレンダーセクションのborderアニメーション */
#calendar {
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
#calendar:hover {
    border-color: var(--brown) !important;
    box-shadow: 0 20px 56px rgba(93,64,55,0.1);
}

/* ul リスト頁E��ホバー */
section ul li {
    transition: padding-left 0.2s ease;
    padding-left: 4px;
}
section ul li:hover {
    padding-left: 10px;
}

/* チE�Eブル th アニメーション */
table th {
    text-align: left;
    color: var(--green);
    width: 30%;
    position: relative;
}

/* 空き状況バチE�� */
section .visible-badge {
    display: inline-block;
    animation: scaleIn 0.5s ease both;
}

/* スクロール後�Eナビ高さ変化 */
nav.scrolled ul li a {
    transition: padding 0.3s ease;
}

/* フォームのsection */
section.form-section {
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* モバイルでfooterパディング調整 */
@media (max-width: 600px) {
    footer {
        padding: 48px 20px;
    }
}

@media (max-width: 600px) {
    footer { padding: 44px 20px 28px; }
    .footer-logo-img { max-width: 220px; width: 65%; }
    .footer-nav a { font-size: 2.3vw;
        padding: 1vw 1.5vw;}
    .footer-contact { font-size: 2.3vw;}
}
/* 代表挨拶の特別裁E�� */
.greeting-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    background: #fff;
    border: 2px solid var(--green);
    padding: 40px;
    border-radius: 30px;
    position: relative;
}

/* 吹き�Eし�EようなアクセンチE*/
.greeting-container::before {
    content: "Message";
    position: absolute;
    top: -15px;
    left: 30px;
    background: var(--green);
    color: #fff;
    padding: 2px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.greeting-text {
    flex: 1;
    min-width: 100%;
}

.representative-name {
    text-align: right;
    margin-top: 25px;
    font-size: 1.6rem;
    color: var(--brown);
}

.representative-name span {
    font-size: 0.8rem;
    margin-right: 10px;
}

/* --- 社会福祉士事務所ペ�Eジ 刷新チE��イン --- */

/* 1. リスト�Eークの変更�E��Eてのul liに適用�E�E*/
main ul {
    list-style: none;
    padding-left: 0;
}

.leaf-list li, .leaf-list-s li {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 8px;
    line-height: 1.6;
}

.leaf-list li::before {
    content: '🌿'; /* サイト�EチE�Eマに合わせた葉っぱ */
    position: absolute;
    left: 0;
    top: 0;
}

.leaf-list-s li::before {
    content: '🍃'; /* 小さめ�E葉っぱ */
    position: absolute;
    left: 0;
    font-size: 0.9em;
}

/* 2. サービスカード�EチE��イン */
.service-card-main {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid #f0f4eb;
}

/* 3. 番号�E�E1、E6�E��Eアイコン裁E�� */
.service-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--soft-green);
    padding-bottom: 15px;
}

.service-header .number {
    background: linear-gradient(135deg, var(--green), #9ccc65);
    color: #fff;
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 1.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-right: 20px;
    box-shadow: 0 4px 15px rgba(124, 179, 66, 0.3);
}

.service-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--brown);
}

/* 4. 死後事務の4刁E��グリチE�� */
.death-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.death-box {
    background: var(--soft-green);
    padding: 20px;
    border-radius: 15px;
    border-left: 5px solid var(--green);
}

.death-box h5 {
    color: var(--brown);
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 1rem;
}

/* 5. 裁E��用パ�EチE*/
.accent-text {
    color: var(--green);
    font-weight: bold;
    margin-top: 10px;
}

.extra-box {
    background: #f9fbf7;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    border: 1px dashed var(--green);
}

.small-info {
    font-size: 0.9rem;
    background: #fff8e1;
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
}
/* --- 共通：バチE��のチE��イン�E�やわらかめ�E�E--- */
.service-header .number {
    background: linear-gradient(135deg, #aed581, #8bc34a);
    color: #fff;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    /* 真�Eではなく少しめE��がせた形 */
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
    box-shadow: 0 5px 15px rgba(139, 195, 74, 0.2);
    margin-right: 20px;
    flex-shrink: 0;
}

/* --- 共通：🌿リスト�Eーク --- */
.leaf-list-s {
    list-style: none;
    padding-left: 0;
}
.leaf-list-s li {
    position: relative;
    padding-left: 1.6em;
    margin-bottom: 6px;
    font-size: 0.95rem;
    line-height: 1.5;
}
.leaf-list-s li::before {
    content: "🌿";
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.9em;
}

/* --- 死後事務セクション専用レイアウチE--- */
.contract-process-box {
    background-color: #fff8e1; /* 注意事頁E��少し目立たせる */
    padding: 20px;
    border-radius: 15px;
    margin: 20px 0;
    font-size: 0.95rem;
    border-left: 5px solid #ffca28;
}

.death-admin-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.death-category-card {
    background: #fff;
    border: 1px solid #e0e6d8;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.cat-header {
    color: var(--brown);
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px dashed var(--green);
    display: block;
}
/* --- 事業冁E��のカード調整 --- */
.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.feature-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 冁E��とボタンの距離を保つ */
    background: #fff;
    padding: 40px 30px;
    border-radius: var(--leaf-radius);
    border: 1px solid #eef2eb;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
}

/* --- チE��インリンクボタン --- */
.btn-container {
    margin-top: 30px;
    text-align: center;
}

.styled-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 40px;
    background-color: var(--green);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 60px; /* カプセル型�EめE��らかぁE�� */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 12px rgba(124, 179, 66, 0.3);
}

/* マウスを乗せた時の動き */
.styled-link-btn:hover {
    background-color: var(--brown); /* 信頼感�Eある茶色に変化 */
    transform: translateY(-4px); /* ふわっと浮ぁE*/
    box-shadow: 0 8px 20px rgba(93, 64, 55, 0.3);
}

.btn-icon {
    font-style: normal;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.styled-link-btn:hover .btn-icon {
    transform: rotate(15deg) scale(1.2); /* アイコンが少し動く遊�E忁E*/
}
/* --- 法人概要セクションの全体裁E�� --- */
.company-info-section {
    background: #fff;
    border-radius: 30px;
    padding: 60px 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    margin-bottom: 50px;
}

.info-container {
    max-width: 900px;
    margin: 0 auto;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px; /* 沿革との間隔 */
}

.info-table th, .info-table td {
    padding: 20px;
    border-bottom: 1px solid #f0f4eb;
    text-align: left;
    vertical-align: top;
}

.info-table th {
    width: 250px;
    color: var(--green);
    font-weight: bold;
}

/* 連絡先リンク */
.contact-link {
    color: var(--green);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dashed var(--green);
}

.contact-methods {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-form-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    background-color: var(--green);
    color: #fff !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
}

.contact-form-btn:hover {
    background-color: var(--brown);
    transform: translateY(-2px);
}

/* --- 沿革のチE��イン --- */
.history-container {
    margin-top: 20px;
}

.history-container h3 {
    font-size: 1.3rem;
    color: var(--brown);
    margin-bottom: 25px;
    text-align: center;
    position: relative;
}

.history-list {
    list-style: none;
    padding-left: 0;
}

.history-list li {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px dashed #e0e6d8;
}

.history-date {
    width: 180px;
    font-weight: bold;
    color: var(--green);
    flex-shrink: 0;
}

.history-event {
    color: #444;
}

/* スマ�E対忁E*/
@media (max-width: 650px) {
    .info-table th, .info-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .info-table th { border: none; padding-bottom: 0; }
    .history-list li { flex-direction: column; }
    .history-date { margin-bottom: 5px; }
}
/* スマ�E表示の微調整 */
@media (max-width: 600px) {
    .contact-methods {
        gap: 10px;
    }
    .contact-form-btn {
        width: 100%;
        justify-content: center;
    }
}
/* スマ�E対忁E*/
@media (max-width: 600px) {
    .company-info-section {
        padding: 30px 20px;
    }
    .info-table th, .info-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    .info-table th {
        border-bottom: none;
        padding-bottom: 0;
        font-size: 0.9rem;
    }
    .info-table td {
        padding-top: 5px;
        margin-bottom: 10px;
    }
}
/* スマ�E対忁E*/
@media (max-width: 600px) {
    .feature-card {
        padding: 30px 20px;
    }
    .styled-link-btn {
        width: 100%; /* スマ�Eでは押しやすいよう横ぁE��ぱぁE�� */
    }
}
/* スマ�Eでの見栁E��調整 */
@media (max-width: 600px) {
    .death-admin-layout {
        grid-template-columns: 1fr;
    }
}
/* スマ�E対忁E*/
@media (max-width: 600px) {
    .service-card-main { padding: 25px 20px; }
    .service-header .number { width: 50px; height: 50px; font-size: 1.2rem; }
}