* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Helvetica Neue', Arial, sans-serif;
    }

    body {
        background-color: #f8f9fa;
        color: #333;
        line-height: 1.6;
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    header {
        background-color: white;
        color: black;
        padding: 1rem;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* PC向けのヘッダーナビゲーション */
    .header-nav {
        display: none; /* デフォルトでは非表示 */
    }
    .header-nav ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .header-nav li {
        margin-left: 20px;
    }

    .header-nav a {
        color: #333;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
    }

    .header-nav a:hover {
        color: #0097B2;
    }


    /* Logo container for flexibility */
    .logo-container {
        display: flex;
        align-items: center;
        gap: 10px; /*Space between logo and text*/
    }

    .logo-image {
        height: 40px; /*Adjust based on your logo size*/
        width: auto;
    }

    .logo {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .main-content {
        margin-top: 70px;
    }

    .header-content {
        padding-top: 10px;
    }

    /* ハンバーガーメニュー */
    .hamburger {
        display: block;
        width: 30px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    .hamburger span {
        background-color: #333;
        position: absolute;
        height: 3px;
        width: 100%;
        left: 0;
        transition: all 0.3s ease;
    }

    .hamburger span:nth-child(1) {
        top: 0;
    }

    .hamburger span:nth-child(2) {
        top: 8px;
    }

    .hamburger span:nth-child(3) {
        top: 16px;
    }

    /* ハンバーガーメニューアクティブ時 */
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg);
        top: 8px;
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg);
        top: 8px;
    }

    /* ナビゲーションメニュー */
    .nav-menu {
        position: fixed;
        top: 70px;
        right: -100%;
        width: 80%;
        background-color: white;
        height: calc(100vh - 70px);
        transition: all 0.4s ease;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        z-index: 900;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu ul {
        list-style: none;
    }

    .nav-menu li {
        border-bottom: 1px solid #eee;
    }

    .nav-menu a {
        display: block;
        padding: 15px 20px;
        color: #333;
        text-decoration: none;
        font-size: 1rem;
    }

    .nav-menu a:hover {
        background-color: #f8f9fa;
        color: #0097B2;
    }


    /* ヘッダーのお問い合わせボタン (PC表示) */
    .contact-btn-header {
        display: none; /* デフォルトは非表示 */
    }

    .contact-btn-header a {
        background-color: #0097B2;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
    }

    .contact-btn-header a:hover {
        background-color: #007A8F;
    }
    /* セクション共通スタイル */
    section {
        padding-bottom: 100px;
        border-radius: 5px;
    }

    section#contact {
        max-width: 500px;
        margin: 0 auto;
    }


    .section-wrapper {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 1200px; /* 例：最大幅を設定 */
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        color: #0097B2;
        font-size: 3rem;
        font-weight: bold;
    }

    h2 {
        color: #0097B2;
        text-align: center;
        margin-bottom: 15px;
        font-size: 2rem;
        font-weight: bold;
        border-top: 2px solid #FFA500; /* 上側にオレンジの下線 */
        padding-bottom: 5px; /* 下線とテキストの間に隙間を開ける */
        padding-top: 10px;/* 上線とテキストの間に隙間を開ける */
    }

    h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
        font-weight: bold;
    }

    h4 {
        font-size: 12px;
        margin-bottom: 1.5rem;
        font-weight: normal;
    }

    /* Main Visual Slider Styles */
    #main-visual {
        padding: 0;
        overflow: hidden;
        position: relative;
        margin: 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
    }

    /* スライダー関連の調整 */
    .main-slider {
        width: 100%;
    }
    
    .slide-content h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.4;
    }

    .main-slider .slide {
        background-size: cover;
        background-position: center;
        height: 630px;
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .main-slider .slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 0;
    }

    .slide-content {
        position: relative;
        z-index: 1;
        text-align: center;
        color: white;
        padding: 0 20px;
    }

    .slide-content h1 {
        color: white;
        font-size: 2rem;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        margin-bottom: 15px;
    }
    /* メインビジュアルのラッパー */
    .main-visual-wrapper {
    max-width: 1160px; /* section-wrapperと同じ最大幅 */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-bottom: 50px;
}

    /* Slick slider customizations */
    .slick-dots {
        position: absolute;
        bottom: 20px;
    }

    .slick-dots li button:before {
        color: white;
    }

    .slick-dots li.slick-active button:before {
        color: white;
        opacity: 1;
    }

    /* google-mapの表示 */
    .google-map {
        padding-bottom: 150px;
    }   

    .news-item {
        border-bottom: 1px solid #eee;
        padding: 15px 0;
    }

    .news-item:last-child {
        border-bottom: none;
    }

    .news-date {
        color: #777;
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    .news- {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .news-content {
        margin-top: 5px;
    }


    /* Service Section */
    .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* PC版は自動で列数を調整 */
        gap: 20px;
        margin:0;
        padding: 0;
    }
    .service-item {
        padding: 20px;
        text-align: center;
        border: 1px solid #ddd; /* 必要に応じてボーダーを追加 */
        box-sizing: border-box; /* 既存のbox-sizingを維持 */
    }

    .service-icon {
        width: 80px;
        height: auto;
        margin-bottom: 10px;
    }

    /* Price Section */
    .price-table {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 30px;
        margin-top: 20px;
        padding-bottom: 30px;
    }

    .price-table-wrapper { /* 新しいラッパークラス用スタイル */
        overflow-x: auto; /* 横スクロールが必要な場合に備えて */
    }

    .price-item {
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 5px;
        text-align: center;
        background: #d2dbdc;
    }

    .price {
        font-size: 1.3rem;
        font-weight: bold;
        color: #0097B2;
        margin: 10px 0;
    }

    .pc-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 10px;
        background: #eee;
    }
    
    .pc-table th,
    .pc-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }
    
    .pc-table th {
        background-color: #0097B2;
        color: white;
    }
    .sp-table {
        width: 80%; /* 表全体の幅 */
        margin: 20px auto; /* 中央揃えと余白 */
        border-collapse: collapse; /* セルの境界線をまとめる */
    }
        /* スマホ用テーブルのスタイル（例：リスト風） */

    .sp-table th,
    .sp-table td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    }

    .sp-table th {
        width: 40%; /* 幅の調整 */
        font-weight: bold;
    }

    /* PCではスマホ用テーブルを非表示、
    スマホではPC用テーブルを非表示
    */
    .sp-table {
        display: none; /* デフォルトで非表示 */
    }
    th, td {
        border: 1px solid #ddd; /* 境界線のスタイル */
        padding: 8px; /* セル内の余白 */
        text-align: center; /* 文字を中央揃え */
    }
    
    thead {
        background-color: #f2f2f2; /* ヘッダーの背景色 */
    }
    
    th {
        font-weight: bold; /* ヘッダーの文字を太字に */
    }
    
    tbody tr:nth-child(even) {
        background-color: #f9f9f9; /* 偶数行の背景色 */
    }
    
    .more-btn {
        display: block;
        max-width: 400px;
        background-color: #FFA500;
        color: #FFFFFF;
        text-align: center; 
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        margin:45px auto 0;
        border: 1px solid #FFA500;
    }

    .more-btn:hover {
        opacity: 0.8; /* ホバー時に少し透明にする */ 
    }

    .more-contact-btn {
        display: block;
        max-width: 400px;
        background-color: #FFA500;
        color: #FFFFFF;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        margin: 0px auto 50px; /* ← 下の余白を 50px に変更 */
        border: 1px solid #FFA500;
    }

    .more-contact-btn:hover {
        opacity: 0.8; /* ホバー時に少し透明にする */
    }

    /* About Section */

    .job- {
        font-size: 16px;
        line-height: 0.5;
        text-align: center;
        color:#007A8F
    }

    .name {
        font-size: 36px;
        text-align: center;
    }
    .profile {

        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
        align-items: center;/*PC画面で中央添えにするための措置*/
    }


    .profile-image {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }
    
    .profile-image img {
        max-width: 100%;
        height: auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .profile-image .pc-image {
        display: block;/* PCで表示 */
    }

    .profile-image .sp-image {
        display: none; /* PCで非表示 */
    }

    .profile-content {
        flex: 1;
        min-width: 280px;
        margin-bottom: 1rem;
    }

    /* プロフィールセクションのスタイル改善 */
    .profile-greeting {
        margin-bottom: 30px;
        line-height: 1.8;
    }

    .profile-greeting p {
        margin-bottom: 15px;
    }

    .profile-career h3,
    .profile-qualification h3 {
        border-left: 4px solid #0097B2;
        padding-left: 10px;
        margin: 30px 0 15px;
    }

    .qualification-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }

    .qualification-list li {
        background-color: #f5f5f5;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 12px;
    }

        /* モットーの強調 */
    .motto-text {
        display: flex;
        justify-content: center; /* 水平方向の中央揃え */
    }
    
    .motto {
        position: relative;
        display: inline-block;
        padding: 5px 15px;
        margin-bottom: 20px;
        background-color: #f8f9fa;
        color: #007A8F;
        font-size: 24px;
    
    }

    .map-container {
        text-align: center;
    }
    
    /* --------------------------------------------------------
    support.html（事業内容）
    ---------------------------------------------------------- */
    .business-support {
        display: block;
    }
    
    #business-support h3 {
        text-align: center;
        margin-bottom: 10px;
        padding: 10px;
        color: #FFFFFF;
        font-weight: bold;
        background-color: #0097B2;
    }

    .business-content {
        padding-bottom: 10px;
    }
    .business-content,
    .business-image  {
        display: flex;
        justify-content: center;
        align-items: start;
        margin: 10px 0;
    }

    .business-content p {
        width: calc(100% - 410px);
        line-height: 2.5;
        flex-grow: 1; /* <-- これを追加: 残りのスペースを埋めるように伸張 */
    }

    .business-image {
        max-width: 380px;
        height: auto;
        padding-right: 20px;
    }

    /* マップのiframeが画面からはみ出さないようにする */
    .map-container iframe {
        max-width: 100%;
        width: 100%;
        border-radius: 5px;
    }

    /* ------------------------------------------------------------
    contract-flow-form.html
    --------------------------------------------------------------*/
    /* 契約の流れページ専用スタイル */
    .flow-header {
        position: relative;
        text-align: center;
        background-color: #0097B2;
        padding: 60px 0;
        margin-bottom: 100px;
    }

    /* グラデーションやパターンを追加 */
    .flow-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%, 
                        transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, 
                        transparent 75%, transparent);
        background-size: 30px 30px; /* パターンのサイズ */
        z-index: 1;
    }

    .flow-header h1 {
        color: white;
        font-size: 3rem;
        position: relative;
        z-index: 2;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
        letter-spacing: 2px;
        display: inline-block;
        padding: 0 20px;
        border-bottom: 3px solid #fff;
    }

    .flow-detail-list, .flow-document-list ul, .service-start-info ul {
        list-style: disc;
        margin-left: 20px;
        margin-bottom: 15px;
    }

    .flow-contact-info {
        background: #f5f5f5;
        padding: 10px 15px;
        border-radius: 5px;
        margin-top: 10px;
    }

    .contract-notes {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 5px;
        margin-top: 40px;
        border-left: 3px solid #0097B2;
    }

    .contract-notes ul {
        list-style: disc;
        margin-left: 20px;
    }

    .cta-section {
        text-align: center;
        margin-top: 50px;
        padding: 30px;
        background: #edf7f8;
        border-radius: 5px;
    }

    .cta-section .contact-btn {
        display: inline-block;
        margin-top: 20px;
    }

    /* contact end */
    /* ニュースページ専用スタイル */
    .news-page-header {
        position: relative;
        text-align: center;
        background-color: #0097B2;
        padding: 60px 0;
        margin-bottom: 100px;
    }

    /* グラデーションやパターンを追加 */
    .news-page-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%, 
                        transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, 
                        transparent 75%, transparent);
        background-size: 30px 30px; /* パターンのサイズ */
        z-index: 1;
    }

    .news-page-header h1 {
        color: white;
        font-size: 3rem;
        position: relative;
        z-index: 2;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
        letter-spacing: 2px;
        display: inline-block;
        padding: 0 20px;
        border-bottom: 3px solid #fff;
    }
    .news-list {
        max-width: 800px;
        margin: 0 auto;
    }

    .news-card {
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 30px;
    }

    .news-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .news-date {
        color: #777;
        font-size: 0.9rem;
    }

    .news-category {
        background-color: #0097B2;
        color: white;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
    }

    .news- {
        font-weight: bold;
        font-size: 1.2rem;
        margin-bottom: 15px;
        color: #333;
    }

    .news-summary {
        margin-bottom: 15px;
        line-height: 1.6;
    }

    .news-read-more {
        text-align: right;
    }

    .news-read-more a {
        color: #0097B2;
        text-decoration: none;
        font-weight: bold;
    }

    .news-pagination {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .page-numbers {
        display: flex;
        list-style: none;
    }

    .page-numbers li {
        margin: 0 5px;
    }

    .page-numbers a {
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
    }

    .page-numbers a.active {
        background-color: #0097B2;
        color: white;
        border-color: #0097B2;
    }

    .news-search {
        max-width: 500px;
        margin: 0 auto 40px;
    }

    .search-form {
        display: flex;
    }

    .search-input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px 0 0 5px;
    }

    .search-btn {
        background-color: #0097B2;
        color: white;
        border: none;
        padding: 0 20px;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
    }

    .news-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 30px;
        justify-content: center;
    }

    .category-item {
        background-color: #f8f9fa;
        padding: 5px 15px;
        border-radius: 20px;
        text-decoration: none;
        color: #333;
        border: 1px solid #ddd;
    }

    .category-item:hover, .category-item.active {
        background-color: #0097B2;
        color: white;
        border-color: #0097B2;
    }

    /* profile.html 用の追加スタイル */
    /* 既存のstyle.cssに追加する内容です */

    .profile-header {
        background-color: #0097B2;
        color: white;
        padding: 50px 0;
        margin-bottom: 30px;
        text-align: center;
    }

    .profile-header h1 {
        color: white;
        font-size: 3rem;    
        margin: 0;
    }

    .profile-full {
        display: flex;
        flex-direction: column;
        gap: 30px;
        background-color: #C4EAF1; /* 背景色を指定 */
        width: 100%; /* 幅を画面いっぱいに */
        padding: 20px; /* 必要に応じて上下のpaddingを追加 (背景色の範囲を広げる) */
    box-sizing: border-box; /* paddingを含めてwidthを100%にする */
    }

    .profile-greeting {
        margin-bottom: 30px;
    }

    .profile-greeting p {
        margin-bottom: 15px;
        line-height: 1.8;
    }

    .profile-career h3,
    .profile-qualification h3 {
        color: #0097B2;
        border-left: 4px solid #0097B2;
        padding-left: 10px;
        margin: 30px 0 15px;
    }

    .career-list {
        margin-bottom: 20px;
    }

    .career-list li {
        padding: 5px 0;
        display: flex; /* flexboxを使う */
        flex-wrap: wrap; /* 折り返しを有効にする */
    }

    .year {
        display: inline-block;
        width: 110px;
        font-weight: bold;
    }

    /* 料金表ページ固有のスタイル */
    .price-header {
        position: relative;
        text-align: center;
        background-color: #0097B2;
        padding: 60px 0;
        margin-bottom: 100px;
    }

    /* グラデーションやパターンを追加 */
    .price-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%, 
                        transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, 
                        transparent 75%, transparent);
        background-size: 30px 30px; /* パターンのサイズ */
        z-index: 1;
    }

    .price-header h1 {
        color: white;
        font-size: 3rem;
        position: relative;
        z-index: 2;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
        letter-spacing: 2px;
        display: inline-block;
        padding: 0 20px;
        border-bottom: 3px solid #fff;
    }

    .price-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .price-intro {
        text-align: center;
        margin-bottom: 30px;
    }

    .price-section {
        margin-bottom: 50px;
        background-color: white;
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .price-section h2 {
        border-bottom: 2px solid #0097B2;
        padding-bottom: 10px;
        margin-bottom: 25px;
        text-align: left;
        border-top: none; /* 上側のボーダーを削除 */
    }

    .price-section h3 {
        color: #0097B2;
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .price-note {
        margin-top: 15px;
        font-size: 0.9rem;
        color: #555;
    }

    .price-table-full {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .price-table-full th,
    .price-table-full td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: center;
    }

    .price-table-full th {
        background-color: #0097B2;
        color: white;
    }

    .price-table-full tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .individual-services {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }

    .service-card {
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 20px;
        background-color: #f8f9fa;
    }

    .service-card h4 {
        color: #0097B2;
        margin-bottom: 10px;
        font-size: 1.1rem;
        font-weight: bold;
    }

    .service-price {
        font-weight: bold;
        font-size: 1.2rem;
        margin: 10px 0;
    }

    .service-memo {
        font-size: 0.9rem;
        color: #555;
    }

    .payment-section {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 5px;
        margin-top: 20px;
    }

    .payment-section h4 {
        color: #0097B2;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .bank-info {
        margin-top: 15px;
    }

    .bank-info p {
        margin-bottom: 5px;
    }

    /* Flow Section */

    .contract {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .flow-list {
        counter-reset: flow-counter;
    }

    .flow-list li {
        display: flex;
        margin-bottom: 20px;
        position: relative;
    }

    .flow-list li:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50px;
        left: 25px;
        height: calc(100% - 30px);
        width: 2px;
        background-color: #0097B2;
    }

    .flow-number {
        background-color: #0097B2;
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        margin-right: 15px;
        flex-shrink: 0;
        z-index: 1;
    }

    .flow-content {
        flex: 1;
    }

    /* コンタクトページ固有のスタイル */
    .contact-header {
        position: relative;
        text-align: center;
        background-color: #0097B2;
        padding: 60px 0;
        margin-bottom: 100px;
    }

    /* グラデーションやパターンを追加 */
    .contact-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%, 
                        transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, 
                        transparent 75%, transparent);
        background-size: 30px 30px; /* パターンのサイズ */
        z-index: 1;
    }

    .contact-header h1 {
        color: white;
        font-size: 3rem;
        position: relative;
        z-index: 2;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
        letter-spacing: 2px;
        display: inline-block;
        padding: 0 20px;
        border-bottom: 3px solid #fff;
    }
    /* ------------------------
    privacy html
    --------------------------- */
    .privacy-header {
    background-color: #0097B2;
    background-size: cover;
    background-position: center;
    padding: 60px 0; /* height: 300pxを削除し、padding: 60px 0に変更 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 100px;

    }
    .privacy-header {
    background-color: #0097B2;
    position: relative;
    overflow: hidden;
}

    /* グラデーションやパターンを追加 */
    .privacy-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%, 
                        transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, 
                        transparent 75%, transparent);
        background-size: 30px 30px; /* パターンのサイズ */
        z-index: 1;
    }

    .privacy-header h1 {
        position: relative;
        z-index: 2; /* パターンの上に表示 */
        padding: 10px 30px; /* 内側の余白を追加 */
        display: inline-block;
        border-bottom: 3px solid #fff; /* 下線を追加 */
        color: #f0f8fa;
    }

    .privacy-text p {
        margin-bottom: 25px; /* 現在より広い間隔に設定 */
        line-height: 1.8; /* 行間も少し広げる */
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0; /* 見出しの下に線を引く */
    }
    
    .privacy-text h2 {
        margin-top: 40px; /* 見出しの上の余白を増やす */
        margin-bottom: 20px; /* 見出しの下の余白も増やす */
    }
    
    .privacy-text ul {
        margin-bottom: 25px; /* リストの下にも余白を追加 */
        background-color: #f8f9fa;
        padding: 20px 20px 20px 40px;
        border-radius: 5px;
        border-left: 3px solid #0097B2; /* アクセントカラーの線 */
    }

    .privacy-text li {
        margin-bottom: 8px; /* リスト項目間の余白 */
    }

    .contact-info {
        background-color: #f0f8fa; /* 薄い青色の背景 */
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        margin: 30px 0;
    }
    
    .contact-info h3 {
        color: #0097B2;
        border-left: 4px solid #0097B2;
        padding-left: 10px;
    }

    .date {
        display: inline-block;
        margin: 30px 0;
        padding: 5px 15px;
        background-color: #f8f9fa;
        border-radius: 3px;
    }

    /*--------------------------
    Contact Form コンタクトフォーム
    -----------------------------*/
    .form-group {
        max-width: 500px;
        margin-bottom: 20px;
    }


    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }

    input, textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .form-group label
    .checkbox-label {
        display: flex;
        align-items: center; /* 縦方向中央揃え */
        margin-bottom: 15px;
    }

    /* チェックボックス用のスタイル */
    input[type="checkbox"] {
    width: auto; /* 自動幅に設定 */
    margin-right: 10px; /* 右側に余白 */
    vertical-align: middle; /* テキストとの垂直位置を合わせる */
    }

    /* 入力フィールドのフォーカス時のスタイル */
    input:focus, textarea:focus {
    outline: none;
    border-color: #0097B2;
    box-shadow: 0 0 5px rgba(0, 151, 178, 0.3);
    }

    /* エラー表示のスタイル（必要に応じて） */
    .form-error {
        color: #e74c3c;
        font-size: 0.9rem;
        margin-top: 5px;
    }

    /* カスタムチェックボックス */
    .checkbox-container {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        user-select: none;
    }

    /* 元のチェックボックスを非表示 */
    .checkbox-container input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* カスタムチェックボックス外観 */
    .checkmark {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-color: #fff;
        border: 2px solid #0097B2;
        border-radius: 3px;
        flex-shrink: 0;
    }

    /* チェック時のスタイル */
    .checkbox-container input[type="checkbox"]:checked ~ .checkmark {
        background-color: #0097B2;
    }

    /* チェックマーク */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* チェック時にチェックマークを表示 */
    .checkbox-container input[type="checkbox"]:checked ~ .checkmark:after {
        display: block;
    }

    /* フォーカス時のスタイル */
    .checkbox-container input[type="checkbox"]:focus ~ .checkmark {
        box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.3);
    }

    .contact-btn {
        display: block;
        background-color: #0097B2;
        color: white;
        text-align: center;
        padding: 15px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        margin-top: 20px;
        width: 100%;
        border: none;
        cursor: pointer;
    }

    .contact-btn:hover {
        background-color: #007A8F;
    }

    .form-group label a ,
    .form-group label span {
        color: #0097b2;
        font-weight: bold;
    }

    .form-group label a {
        text-decoration:none;
    }
    
    .form-group label a:hover {
        color: #007A8f;
        text-decoration: underline;
    }

    /* Fixed Contact Button */
    .fixed-contact-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #0097B2;
        color: white;
        text-align: center;
        padding: 15px;
        text-decoration: none;
        font-weight: bold;
        z-index: 900;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
        display: none;/*デスクトップでは非表示のまま*/
    }

        /* マップのコンテナ調整 */
        .map-container {
            width: 100%;
            overflow: hidden; /* はみ出し防止 */
        }
    
        .google-map {
            padding-bottom: 80px;
        }

    
        .price-header {
            height: 200px;
        }
        
        .price-header h1 {
            font-size: 3rem;
        }
        
        .price-section {
            padding: 20px;
        }
        
        .individual-services {
            grid-template-columns: 1fr;
        }
        
        /* スマホ表示では横スクロールできるようにする */
        .table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    

    /*--------------------------------------------
    Footer
     -------------------------------------------- */
    
    footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 50px; /*ボタンの高さ分だけフッターに余白*/
        display: flex; /* Flexboxを使用 */
        flex-direction: column; /* 要素を縦に並べる */
        align-items: center; /* 子要素を中央揃え (初期状態では横方向) */
        text-align: left; /* デフォルトのテキスト配置を左寄せ */
    }

    /* フッターのメニュー横並び */
    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 15px 0;
    }

    .footer-nav li {
        margin-bottom: 0; /* 既存の下マージンを削除 */
    }
    
    .footer-wrapper {
        background-color: #333;
        color: white;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 30px;
    }

    .footer-content {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 1200px; /* section-wrapper と同じ最大幅に */
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;/* ロゴを左寄せにするために変更 */
        text-align: left;
    }

    .footer-content > * {
        width: 100%;
    }
    
    .footer-content .office-info {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .footer-content .office-info img {
        width: auto;
        height: 1.2em;
        margin-right: 0.5em;
        vertical-align: middle;
    }
    

    footer > * { /* footer直下の全ての子要素に適用 */
        width: 100%; /* 幅を100%にして左右いっぱいに広げる */
    }

    footer .office-info { /* エマーナ社会保険労務士事務所の<p>要素にクラスを追加 */
        display: flex;
        align-items: center;
        margin-bottom: 5px; /* 他の<p>要素との間隔 */
    }
    
    footer .office-info img {
        width: auto; /* 必要に応じて調整 */
        height: 1.2em; /* テキストの高さに合わせる例 */
        margin-left: 0.5em; /* ロゴとテキストの間のスペース */
        vertical-align: middle; /* テキストとロゴの垂直方向の中央揃え */
    }
    
    footer p {
        letter-spacing: 1px; /* 各<p>要素の文字間隔を1pxに設定 */
        margin-bottom: 5px; /* 各<p>要素の間隔 */
    }

    footer .footer-nav {
        list-style: none; /* リストの点を非表示 */
        padding: 0;
        margin: 10px 0; /* 上部に少し余白を追加 */
    }
    
    footer .footer-nav li {
        margin-bottom: 5px; /* 各リスト項目の下に余白を追加 */
    }
    
    footer .footer-nav li a {
        text-decoration: none; /* リンクの下線を非表示 */
        color:white; /* リンクの色 */
        /* 必要に応じてその他のスタイル (padding, border など) を追加 */
    }
    
    /* 必要であればホバー時のスタイル */
    footer .footer-nav li a:hover {
        color: #007bff; /* ホバー時のリンクの色 */
    }    
    
    footer h4 {
        letter-spacing: 1px; /* 必要であれば<h4>要素にも適用 */
        text-align: center; /* <h4>要素のテキストを中央寄せ */
        margin-top: 20px; /* 上部に余白を追加して分離感を出す */
    }

@media screen and (min-width: 769px) {
    /* ハンバーガーメニューを非表示 */
    .hamburger {
        display: none;
    }
    
    /* ヘッダーナビゲーションを表示 */
    .header-nav {
        display: block;
    }
    
    /* fixed-contact-btnは既に非表示に設定されています */
    .fixed-contact-btn {
        /* display: none; */

    }

    .profile {
      display: flex; /* 横並びにする */
      justify-content: space-around; /* 要素を均等に配置 */
      align-items: center; /* 縦方向中央揃え */
      padding: 30px; /* 余白を大きくする */
    }

    .profile-image {
        width: 500px; /* 写真の幅（調整してください） */
        height: 400px; /* 写真の高さ（調整してください） */
        margin-bottom: 0; /* PC版では下マージンをなくす */
    }

    .profile-content {
        text-align: center;/* テキスト左揃え */
        max-width: 500px; /* テキストコンテンツの最大幅を設定 */
    }

    .profile-text {
        text-align: left;
        margin-bottom: 20px;

    }
    
    .pc-table {
        display: table; /* PCで表示 */
    }
    .sp-table {
        display: none; /* PCで非表示 */
    }

    .sp-table {
        max-width: 500px; /* 例：最大幅を 500px に設定 */
        margin-left: auto; /* 中央揃えを維持するための設定 */
        margin-right: auto;
    }

    /* プロフィール画像とグリーティングを横並びに */

    .profile-full {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 30px;
    }
    
    .profile-content {
        flex: 1; /* 残りのスペースを全て使用 */
    }
}

@media screen and (max-width: 768px) {
    .profile-image .pc-image {
        display: none; /* スマホで非表示 */
    }
    
    .profile-image .sp-image {
        display: block; /* スマホで表示 */
    }
    .business-content,
    .business-image  {
        display: block; /* スマホでブロック表示 */
        margin: 0 auto; /* 中央揃え */
    }
    .business-image {
        max-width: 80%; /* スマホでの最大幅を80%に */
        height: auto; /* 高さは自動調整 */
        padding-right: 0; /* 右の余白を削除 */
        padding-bottom: 10px; /* 下の余白を追加 */
    }
    .job-title {
        text-align: center;   
    }

    .year {
        width: 100%; /* 年号の幅を100%にする */
        margin-bottom: 5px; /* 年号と文章の間の余白 */
    }
    /* Mobile Styles */
    /* indexのアイコン大きさ調整 */
    .service-grid {
        grid-template-columns: repeat(2, 1fr); /* モバイル版は2列に固定 */

    }
    /* フッターメニューを縦に戻す */
    .footer-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .footer-nav li {
        margin-bottom: 5px; /* モバイルでは下マージンを復活 */
    }   
        

    .main-slider .slide {
        height: 630px;
    }
        
    .slide-content h1 {
        font-size: 1.7rem;
    }
        
    .profile {
        flex-direction: column;
        align-items: stretch; /* モバイルではデフォルトのストレッチに戻す */
    }

    .profile-image {
        max-width: none; /* 最大幅を削除 */
    }

    .profile-image .pc-image {
        display: none; /* モバイルで非表示 */
    }

    .profile-image .sp-image {
        display: block; /* モバイルで表示 */
    }

    /* レスポンシブ対応の強化 */
    .profile-full {
        flex-direction: column;
    }
    

    .profile-greeting {
        text-align: left;
    }

    .profile-header h1 {
        font-size: 3rem;
    }
    
    .slide-content h1 {
        font-size: 1.8rem;
    }

    .price-table {
        grid-template-columns: 1fr;
    }
    
    .pc-table {
        display: none; /* スマホで非表示 */
    }
    .sp-table {
        display: table; /* スマホで表示 */
    }

    .r {
        max-width: none; /* モバイル表示では最大幅の制限を解除 */
    }

    .pc-table thead {
        display: none;/* ヘッダー行を非表示にする */
    }

    .pc-table tr {
        display: flex;
        flex-direction: column;
        border: 1px solid #aaa; /* 行をボックスとして表示 */
        margin-bottom: 10px;
    }
    
    .pc-table td {
        display: flex;
        justify-content: space-between;
        border: none;
        padding-left: 50%; /* ラベルの位置調整 */
        position: relative;
    }
    
    .pc-table td:before {
        position: absolute;
        left: 6px;
        top: 6px;
        font-weight: bold;
        content: attr(data-label); /* カスタム属性からラベルを取得 */
    }

    .pc-table td:nth-child(odd) {
        flex: 1; /* 幅を均等に */
    }

    .pc-table td:nth-child(even) {
        flex: 1;
    }

    .sp-table {
        width: 80%; /* 表全体の幅 */
        margin: 20px auto; /* 中央揃えと余白 */
        border-collapse: collapse;  /* セルの境界線をまとめる */
    }

    th, td {
        border: 1px solid #ddd; /* 境界線のスタイル */
        padding: 8px; /* セル内の余白 */
        text-align: center; /* 文字を中央揃え */
    }

    thead {
        background-color: #f2f2f2; /* ヘッダーの背景色 */
    }

    th {
     font-weight: bold; /* ヘッダーの文字を太字に */
    }

    tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 偶数行の背景色 */
    }

        
    .profile {
        flex-direction: column;
        align-items: stretch; /* モバイルではデフォルトのストレッチに戻す */
    }

    .profile-image {
        min-width: none; /*既存のmax-widthを解除*/
        width: 100%;
        margin-bottom: 20px; /* 画像とテキストの間に余白を追加 */
    }

        .profile-image img {
        max-width: 390px;
        } 
        
        /* 768px以下の全てのモバイルデバイスで表示 */
        .fixed-contact-btn {
            display: block;
        }  

        /* business content */
        .business-content p {
            width:100%;

        }
    }

        
@media screen and (max-width: 390px) {
    .main-slider .slide {
        height: 630px;
    }
    
    .fixed-contact-btn {
        display: block;
    }
    
    footer {
        margin-bottom: 60px;
    }
    
    section {
        padding: 15px;
    }
    
    h2 {
        font-size: 1.3rem;
        text-align: center;
    }
    
    .profile {
        flex-direction: column;
    }
    .name {
        font-size: 2rem;
        color: #0097B2;
    }
    .profile-image {
        min-width: none; /*既存のmax-widthを解除*/
        width: 100%;
    }
    
    .profile-image img {
        max-width: 390px;
    }

    .profile {
        align-items: stretch; /* さらに小さい画面でもストレッチ */
    }

    .profile-image img {
        max-width: 100%; /* さらに小さい画面では親要素いっぱいに */
    }
}

@media screen and (max-width: 768px) {
    .news-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .news-category {
        margin-top: 5px;
    }
    
    .news-search {
        padding: 0 20px;
    }
}