/* --- 基本設定 (既存サイトに合わせて調整してください) --- */
    :root {
        --primary-green: #08a597; /* サイトのキーカラー */
        --bg-beige: #EDF2F2;      /* サイトの背景ベージュ */
        --text-dark: #333333;     /* メインテキスト */
        --text-gray: #666666;     /* サブテキスト */
    }

    body {
        font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
        color: var(--text-dark);
        line-height: 1.8;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
    }

    /* --- 共通クラス --- */
    .section-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 60px 20px;
    }

    .text-center { text-align: center; }
    .text-green { color: var(--primary-green); }
    
    /* 見出しスタイル */
    .main-title {
        font-size: 28px;
        margin-bottom: 10px;
        letter-spacing: 0.05em;
    }
    .sub-title {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 40px;
        display: inline-block;
        border-bottom: 2px solid var(--primary-green);
        padding-bottom: 5px;
    }
    
    /* --- 1. イントロダクション --- */
    .intro-section {
        text-align: center;
        margin-bottom: 60px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .intro-text {
        max-width: 800px;
        margin: 0 auto;
        text-align: left;
        font-size: 16px;
    }

    /* --- 2. 大切にしていること (3カラム) --- */
    .values-section {
        background-color: #fff;
        margin-bottom: 80px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .values-title {
        text-align: center;
        font-size: 24px;
        margin-bottom: 40px;
        color: var(--text-dark);
    }
    .values-grid {
        display: flex;
        justify-content: space-between;
        gap: 30px;
    }
    .value-card {
        flex: 1;
        background: #fff;
        border: 1px solid #eee; /* 薄い枠線で清潔感を */
        padding: 30px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
        text-align: center;
    }
    .value-icon {
        font-size: 24px;
        color: var(--primary-green);
        margin-bottom: 15px;
        display: block;
    }
    .value-head {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        color: var(--primary-green);
    }
    .value-desc {
        font-size: 14px;
        text-align: left;
    }

    /* --- 3. サービス内容 (背景ベージュ) --- */
    .services-wrapper {
        background-color: var(--bg-beige); /* デザイン内のベージュエリアを再現 */
    }
    .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2列 */
        gap: 30px;
    }
    .service-item {
        background: #fff;
        padding: 30px;
        border-radius: 8px;
    }
    .service-head {
        font-size: 18px;
        font-weight: bold;
        color: var(--text-dark);
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }
    .service-head::before {
        content: '●';
        color: var(--primary-green);
        margin-right: 10px;
        font-size: 14px;
    }
    .service-content {
        font-size: 15px;
        color: var(--text-gray);
        padding-left: 1.2em;
    }
    .service-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .service-list li {
        position: relative;
        padding-left: 1em;
    }
    .service-list li::before {
        content: "・";
        position: absolute;
        left: 0;
    }
    /* 最後の奇数個目のアイテムを中央寄せ等にしたい場合 */
    .service-item:last-child {
        /* 必要であれば grid-column: span 2; など */
    }

    /* --- 4. クロージング (地域に根ざす) --- */
    .closing-section {
        padding: 80px 20px;
        text-align: center;
        background: #fff;
        position: relative;
    }
    /* 雰囲気を出すための背景装飾（オプション） */
    .closing-section::before {
        content: '';
        display: block;
        width: 60px;
        height: 2px;
        background: var(--primary-green);
        margin: 0 auto 30px;
    }
    .closing-title {
        font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", serif; /* 情緒的な明朝体 */
        font-size: 22px;
        color: var(--primary-green);
        margin-bottom: 30px;
        line-height: 1.6;
    }
    .closing-text {
        font-size: 16px;
        line-height: 2.2;
        max-width: 800px;
        margin: 0 auto;
    }
    .closing-icon {
        font-size: 30px;
        margin-bottom: 10px;
        display: block;
    }

    /* --- メディアクエリ (レスポンシブ対応) --- */

    /* Tablet & Small Desktop (1024px以下) */
    @media (max-width: 1024px) {
        .section-container {
            padding: 40px 20px;
        }
        .values-grid {
            gap: 20px;
        }
        .value-card {
            padding: 20px 15px;
        }
    }

    /* Mobile (599px以下) */
    @media (max-width: 599px) {
        .main-title {
            font-size: 22px;
        }
        .sub-title {
            font-size: 16px;
        }
        
        /* 大切にしていること：1列に */
        .values-grid {
            flex-direction: column;
        }
        
        /* サービス内容：1列に */
        .services-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .closing-title {
            font-size: 20px;
            text-align: left; /* スマホは左寄せの方が読みやすい場合あり */
        }
        .closing-text {
            text-align: left;
        }
        .intro-text {
            text-align: left;
        }
    }
    
/* 2025/11/21 */

.hananoki .mainSlide .home-slide .inner h2{
  color: #08a597;
  text-shadow: 0 0 10px #FFF, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}

.intro-section .mb-50{
  margin-bottom: 50px;
}

.intro-section .ta-c{
  text-align: center;
}

.hananoki .under-slide .slidewrap .uk-slidenav-position:after {
    padding-top: 65%;
    content: '';
    display: block;
}

@media screen and (max-width:1024px) {
.mainSlide .home-slide .inner h2 {
    font-size: 22px;
}
}

@media screen and (max-width:599px) {
.hananoki .ta-l-sp{
  text-align: left;
} 

.hananoki .intro-section{
  padding-bottom: 0px;
}
}

/* 2026/01/30 */

.hananoki .tarumi1 .tbox .inn h3{
  border-bottom: 1px solid #b0cf76;
  color: #b0cf76; 
}

.hananoki .tarumi1 .tbox .inn2 dt {
  color: #b0cf76;
}

.hananoki .tarumi1 .tbox .inn2 {
  background-color: #fcfff2;
}

.hananoki .text-green {
    color: #b0cf76;
}

.hananoki .sub-title{
    border-bottom: 2px solid #b0cf76;
}

.hananoki .h3h .d {
    border-bottom: 2px dashed #b0cf76
}

.hananoki .value-icon{
  color: #b0cf76; 
}

.hananoki .value-head{
  color: #b0cf76; 
}

.hananoki .services-wrapper {
    background-color: #fcfff2;
}

.hananoki .service-head::before{
    color: #b0cf76;
}

.hananoki #footer{
  background: #b0cf76;
}

.hananoki #reserve{
  background-color: #b0cf76;
}

.hananoki .mainSlide .home-slide .inner h2{
  color: #b0cf76;
}

.hananoki .mainSlide{
  background: #b0cf76;
}

.hananoki .mainSlide .slidewrap .uk-slideshow:after {
    background: -webkit-linear-gradient(left, #b0cf76 0%, rgba(125, 190, 70, 0) 100%);
    background: -webkit-gradient(linear, left top, right top, from(#b0cf76), to(rgba(125, 190, 70, 0)));
    background: linear-gradient(to right, #b0cf76 0%, rgba(125, 190, 70, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0cf76', endColorstr='#007dbe46', GradientType=1);
}
