:root {
    --primary-green: #2e7d32; /* 深い緑：成長、信頼 */
    --accent-teal: #00897b;   /* 青緑：テック、未来 */
    --soil-brown: #5d4037;    /* 土色：土台、 About */
    --sky-blue: #e0f2f1;      /* 薄い空色：Heroの背景 */
    --text-main: #2c3e50;
    --text-light: #ffffff;
}

body { 
    font-family: 'Noto Sans JP', sans-serif; 
    line-height: 1.8; 
    color: var(--text-main); 
    margin: 0; 
    overflow-x: hidden; /* 葉っぱが画面外に出た時のスクロールバー防止 */
}

.container { width: 90%; max-width: 1100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}

/* Header - 清潔感と固定 */
header { 
    background: rgba(255, 255, 255, 0.98); 
    padding: 10px 0; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); 
}
.flex-header { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.8rem; color: var(--primary-green); margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 700; }
nav ul { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0;}
nav a { text-decoration: none; color: var(--text-main); font-weight: 500; transition: 0.3s; font-size: 0.95rem;}
nav a:hover { color: var(--accent-teal); }

/* =========================================
   【下段】Aboutセクション：種まき、土台
========================================= */
.about {
    /* 1. ベースの土色グラデーション（そのまま） */
    background: linear-gradient(to bottom, #fcfaf9 0%, #eee0d9 100%);
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

/* 2. 精密なグリッドと双葉のシルエットを追加 */
.about::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 均一なグリッドパターン */
    background-image: 
        repeating-linear-gradient(rgba(93, 64, 55, 0.01) 0px, rgba(93, 64, 55, 0.01) 2px, transparent 2px, transparent 40px),
        repeating-linear-gradient(90deg, rgba(93, 64, 55, 0.01) 0px, rgba(93, 64, 55, 0.01) 2px, transparent 2px, transparent 40px);
    pointer-events: none;
    z-index: 1;
}

/* (任意) グリッドの交点に小さな双葉のシルエットを薄く配置する（CSSだけでやる場合） */
/* .about::before {
    content: '🌱'; position: absolute; top: 0; left: 0; font-size: 10rem; opacity: 0.01; 
    transform: rotate(20deg); pointer-events: none; z-index: 0;
}

/* コンテンツが背景の線より前に来るように調整 */
.about .container {
    position: relative;
    z-index: 1;
}

/* --- (参考) Aboutカードの微調整 --- */
.about-card {
    background: #ffffff;
    /* 背景のラインに負けないよう、影を少し強調すると綺麗です */
    box-shadow: 0 20px 50px rgba(93, 64, 55, 0.12);
}

.about-page .about {
    min-height: 85vh; /* 画面に余白が出ないように */
    padding-top: 80px;
}

/* 名刺画像のコンテナ */
.about-namecard-wrapper {
    text-align: center;
    margin: 50px auto;
    max-width: 800px; /* 横幅は800px程度 */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-namecard-wrapper:hover {
    transform: translateY(-5px); /* ホバー時に少し浮く */
}

/* 名刺画像本体（双葉に合わせた影を追加） */
.namecard-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* 名刺下部のイラストと同じ、少し親しみやすいブラウン系の影 */
    box-shadow: 0 15px 40px rgba(93, 64, 55, 0.15); 
}

/* 隠しテキスト */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* =========================================
   【中段】Serviceセクション：新芽、成長
========================================= */
.services { 
    padding: 100px 0; 
    background: #fff;
    position: relative;
}
/* スポイト（茎）のような垂直ラインを背景に */
.services::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%;
    background: linear-gradient(to bottom, var(--soil-brown), var(--primary-green));
    opacity: 0.2;
}

.section-title { text-align: center; font-size: 2.3rem; margin-bottom: 60px; color: var(--primary-green); font-family: 'Montserrat', sans-serif; font-weight: 700; position: relative; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; position: relative; z-index: 10;}

.service-card { 
    background: #fff; padding: 40px; border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); border-top: 4px solid var(--primary-green);
    transition: all 0.3s ease;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 50px rgba(46, 125, 50, 0.15); }
.service-card .icon { font-size: 3.5rem; margin-bottom: 25px; opacity: 0.9;}
.service-card h4 { margin: 0 0 15px 0; color: var(--primary-green); font-size: 1.25rem;}
.service-card p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: #555;}

/* =========================================
   【上段】Heroセクション：舞う葉、未来
========================================= */
.hero { 
    background: linear-gradient(135deg, var(--sky-blue) 0%, #ffffff 100%); 
    padding: 150px 0; 
    text-align: center;
    position: relative; /* 葉っぱの基準点 */
    overflow: hidden;    /* ここが重要！葉っぱがこのエリアからはみ出さないようにします */
    z-index: 1;
}

/* 葉っぱの親コンテナ */
.flying-leaves { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: -1; /* 文字の背後に配置 */
}

/* 葉っぱの基本（画像のサイズ設定） */

@keyframes hero-fly-upward {
    0% {
        top: 110%; /* 画面の下（見えない位置）からスタート */
        left: var(--start-x);
        transform: scale(0.6) translateX(0);
        opacity: 0;
    }
    15% {
        opacity: 0.7; /* 早めにふわっと表示 */
    }
    40% {
        /* 中盤で少し加速し、左右にふらつく */
        transform: scale(1) translateX(-60px);
    }
    70% {
        /* さらに上昇しながら逆方向へ */
        transform: scale(0.9) translateX(80px);
    }
    100% {
        top: -20%; /* 画面の上へ突き抜ける */
        left: var(--end-x);
        transform: scale(0.6) translateX(20px);
        opacity: 0;
    }
}

/* 葉っぱの基本設定を更新 */
.leaf {
    position: absolute;
    width: 45px; 
    opacity: 0;
    /* 上昇感を出すため、ease-out（後半ゆっくり）か ease-in（後半加速）でお好み調整 */
    animation: hero-fly-upward 16s infinite ease-in; 
}

/* --- 個別の動き設定：出現位置とタイミング、サイズをバラバラにする --- */
/* (HTMLのクラス名 d1, n1, l1... に合わせて調整) */


/* --- 12枚それぞれの個別設定（位置・サイズ・遅延） --- */

/* 濃い葉：手前で存在感がある */
.d1 { --start-x: 10%; --end-x: 25%; animation-duration: 12s; animation-delay: 0s; width: 65px; }
.d2 { --start-x: 60%; --end-x: 45%; animation-duration: 15s; animation-delay: 4s; width: 60px; }
.d3 { --start-x: 80%; --end-x: 95%; animation-duration: 14s; animation-delay: 9s; width: 55px; }
.d4 { --start-x: 35%; --end-x: 20%; animation-duration: 13s; animation-delay: 13s; width: 62px; }

/* 普通の葉：中距離 */
.n1 { --start-x: 20%; --end-x: 40%; animation-duration: 18s; animation-delay: 2s; width: 48px; }
.n2 { --start-x: 50%; --end-x: 70%; animation-duration: 17s; animation-delay: 6s; width: 42px; }
.n3 { --start-x: 70%; --end-x: 50%; animation-duration: 20s; animation-delay: 11s; width: 50px; }
.n4 { --start-x: 90%; --end-x: 75%; animation-duration: 19s; animation-delay: 15s; width: 45px; }

/* 薄い葉：背景 */
.l1 { --start-x: 5%;  --end-x: 15%; animation-duration: 25s; animation-delay: 1s; width: 38px; opacity: 0.4; }
.l2 { --start-x: 45%; --end-x: 60%; animation-duration: 28s; animation-delay: 8s; width: 32px; opacity: 0.3; }
.l3 { --start-x: 25%; --end-x: 10%; animation-duration: 24s; animation-delay: 14s; width: 40px; opacity: 0.5; }
.l4 { --start-x: 85%; --end-x: 95%; animation-duration: 26s; animation-delay: 18s; width: 35px; opacity: 0.4; }

/* --- Serviceカードの華やかな装飾 --- */
.service-card {
    position: relative;
    overflow: hidden; /* 装飾がはみ出さないように */
    background: #ffffff;
    padding: 50px 30px;
    border: none; /* ボーダーの代わりにシャドウと色で表現 */
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
    z-index: 1;
}

/* カードの角に「葉」をイメージしたアクセント */
.service-card::before {
    content: ''; position: absolute; top: -20px; right: -20px; 
    width: 60px; height: 60px; background: var(--primary-green);
    border-radius: 50%; opacity: 0.1; transition: 0.3s;
}

.service-card:hover::before {
    transform: scale(3);
    opacity: 0.05;
}

/* アイコンを丸い背景で囲む */
.icon-wrapper {
    width: 80px; height: 80px; 
    background: linear-gradient(135deg, var(--primary-green), var(--accent-teal));
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; margin-bottom: 25px;
    box-shadow: 0 8px 20px rgba(46, 125, 50, 0.2);
}

/* 真ん中のカードだけ少し強調する（Activeスタイル） */
.service-card.active {
    transform: scale(1.05);
    border: 2px solid var(--primary-green);
    z-index: 2;
}

.service-card h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    background: linear-gradient(to right, var(--primary-green), var(--accent-teal));
    
    /* 以下の2行をセットで記述します */
    -webkit-background-clip: text; /* Safari, Chrome用 */
    background-clip: text;         /* 標準プロパティ */
    
    -webkit-text-fill-color: transparent; /* 文字を透明にして背景のグラデーションを表示 */
    font-weight: 700;
}

/* =========================================
   Footer
========================================= */
footer { text-align: center; padding: 30px 0; background: #2c3e50; color: white; font-size: 0.85rem; }

/* Responsive */
@media (max-width: 768px) {
    /* 1. 全体の引き（余白）を調整 */
    .hero {
        padding: 80px 0; /* 上下の余白を削ってコンパクトに */
        min-height: auto; /* 高さを固定せず、中身に合わせる */
    }

    /* 2. 文字をパソコン版のようなバランスまで小さくする */
    .catching-copy {
        font-size: 1.8rem; /* 劇的に小さくして「引き」を演出 */
        line-height: 1.4;
        margin-bottom: 15px;
        padding: 0 20px;
        word-break: keep-all; /* 単語の途中で変に改行されないように */
    }

    /* 3. 「grow your leaves」の部分も調整 */
    .catching-copy .grow {
        display: inline; /* 折り返しを許容しつつ、不自然な隙間をなくす */
    }

    /* 4. サブコピーも小さく */
    .sub-copy {
        font-size: 0.85rem;
        padding: 0 30px;
        line-height: 1.6;
    }

    /* 5. 葉っぱのサイズもさらに小さくして背景感を出す */
    .leaf {
        width: 20px; /* 小さくすることで、相対的に画面が広く見える */
    }
    .d1, .d2, .d3, .d4 { width: 25px; } /* 手前の葉も小さめに */

    /* 6. ヘッダーのロゴとナビも少し小さく */
    .logo { font-size: 1.4rem; }
    nav ul { gap: 15px; }
    nav a { font-size: 0.8rem; }
}
/* 2. サービスカードにアニメーション・グラデーション */
.service-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fdfa 100%);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Flutterのような滑らかな動き */
}

.service-card:hover {
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.12);
    border-top-color: var(--accent-teal); /* ホバー時に色が変化 */
}

/* 3. 背景に巨大な葉のシルエットを配置（装飾用） */
.services::after {
    content: '🌿'; position: absolute; bottom: -50px; right: -50px;
    font-size: 20rem; opacity: 0.03; transform: rotate(-20deg);
    pointer-events: none;
}

.about-page .about {
    min-height: 80vh; /* 画面に余白が出ないように調整 */
    padding-top: 80px;
}

.page-header {
    background: var(--soil-brown);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.back-btn {
    display: inline-block;
    padding: 10px 25px;
    background: var(--primary-green);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    transition: 0.3s;
}

.back-btn:hover {
    background: var(--accent-teal);
    transform: translateY(-2px);
}

/* ボタンのコンテナ */
.back-to-top-container {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 50px;
}

/* 戻るボタンの本体 */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background-color: var(--primary-green); /* メインの緑 */
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    border-radius: 50px; /* 丸みのあるデザイン */
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.2);
    transition: all 0.3s ease;
}

/* ホバー時の動き */
.back-btn:hover {
    background-color: var(--accent-teal); /* 青緑に変化 */
    transform: translateY(-3px); /* 少し浮く */
    box-shadow: 0 8px 25px rgba(0, 137, 123, 0.3);
}

/* 矢印アイコンの動き */
.back-btn .icon {
    transition: transform 0.3s ease;
}

.back-btn:hover .icon {
    transform: translateX(-5px); /* 矢印が左に動く */
}