@charset "UTF-8";

/* Theme Name: haru's portfolio */

/* ==================== General Styles ==================== */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
	font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	font-weight: 500;
}

p {
    font-size: 16px;
    color: #393939;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto; /* 高さを自動調整 */
}

a {
    text-decoration: none;
    color: #393939;
}

.section-ttl {
    margin-top: 128px;
    margin-bottom: 80px; /* 下余白を追加 */
    text-align: center; /* 中央寄せ */
    border-bottom: none;
    font-family: 'the Seasons', sans-serif;
    font-size: 2.4rem;
    color: #595959;
}

.section-ttl img {
    max-width: 200px; /* 画像の最大幅を調整 */
    height: auto;
    margin-bottom: 10px; /* 画像の下に余白 */
}

.subttl {
    font-size: 1.1rem;
    color: #666;
    margin-top: 0;
}

.wrapper {
    max-width: 1200px;
    padding: 0 4%;
    margin: 0 auto;
}

/* ==================== Header ==================== */
#header {
    position: relative;
    /* ヘッダー全体の背景画像と高さを設定 */
    background: url(../portfolio-haru/img/top.webp) no-repeat center center / cover; /* center center / cover に変更して画像を中央に配置し全体をカバー */
    height: 488px;
}

/* キャッチコピーのスタイル */
.header-catchcopy {
    position: absolute;
    top: 42%;
    left: 13%;
    z-index: 0;
    color: #565656;
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-size: 2.2em;
	font-weight: 600;
    text-shadow: 0 0 1px rgba(0,0,0,0.5);
    letter-spacing: 1.5px;
    line-height: 1.5;
}

/* --------------------------------------------------------header catch */
/* モバイル表示 (768px 以下) でのキャッチコピー調整 */
@media screen and (max-width: 768px) {
    .header-catchcopy {
        font-size: 1.7em; /* モバイルでは少し小さく */
        top: 32%; /* モバイルでも中央に */
        left: 54%;
        transform: translate(-50%, -50%);
        width: 90%; /* 幅を広げて、画面いっぱいに表示 */
        text-align: center;
        z-index: 10; /* そのまま */
    }
}

/* header-nav スタイル */
.header-nav {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.7); /* ←前回調整した背景色 */
    
    /* ↓↓↓ 以下を追加・修正 ↓↓↓ */
    display: flex; /* Flexboxを有効にする */
    justify-content: flex-end; /* 中身を右端に寄せる */
    align-items: center; /* 中身を垂直方向に中央揃えにする */
    padding: 0 20px; /* 上下の余白を0、左右の余白を20pxに */
    min-height: 60px; /* ヘッダーに最低限の高さを設定（お好みで調整） */
}

/* 	======================================================== */
/* .header-nav-list スタイル */
.header-nav-list {
    display: flex;
    font-size: 1.25rem;
    letter-spacing: 1px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative; 
    padding-bottom: 10px;
}

/* 動く下線のスタイル */
.header-nav-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #fff; /* 色を白に戻す（またはお好みの色に） */
    
    /* ↓↓↓ JSで制御するための変数に戻す ↓↓↓ */
    left: var(--underline-left, 0); 
    width: var(--underline-width, 0);
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* メニュー項目のスタイル調整 */
.header-nav-list li a {
    display: inline-block;
    padding: 0 15px; /* クリック領域と見た目の調整 */
    color: #fff;
    text-decoration: none;
    position: relative; /* z-indexを有効にするため */
    z-index: 1; /* 下線より手前に表示 */
}

/* ==================================================================	 */

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

/* Hamburger Menu (Mobile) */
.header__hamburger {
    display: none; /* デフォルトは非表示 */
    width: 40px;
    height: 30px;
    position: fixed; /* 画面に固定 */
    top: 15px;
    right: 15px;
    cursor: pointer;
    z-index: 1001; /* 最前面に */
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
}

/* .hamburger はおそらくHTMLで .header__hamburger とは別のクラス名が使われている可能性があるので、
    両方残しておきます。もし同じ要素を指すなら片方に統一できます。 */
.hamburger span {
    width: 100%;
    height: 3px;
    background-color: #393939;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
    border-radius: 2px;
}

.hamburger span:nth-child(2) {
    margin: 7px 0;
}

/* Hamburger Menu Animation */
.hamburger.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

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

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

/* Mobile Navigation (全画面オーバーレイメニュー) のスタイルを .header__nav に変更 */
/* FIXED: #header nav ではなく、.header__nav に変更してデスクトップナビゲーションとの競合を解消 */
.header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Menu visible */
.header__nav.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu List (モバイルメニュー内のリスト) */
.nav-items {
    list-style: none;
    padding: 0;
    text-align: center;
}

.nav-items__item {
    margin: 20px 0;
}

.nav-items__item a {
    color: #fff;
    font-size: 24px;
    text-decoration: none;
}

/* ==================== メディアクエリでPCとモバイルの切り替えを明確にする ==================== */

/* デスクトップ表示 (769px 以上) */
@media screen and (min-width: 769px) {
    /* デスクトップではハンバーガーメニューを非表示 */
    .header__hamburger {
        display: none;
    }

    /* デスクトップではモバイルナビゲーションオーバーレイを非表示 */
    .header__nav {
        display: none;
    }

    /* デスクトップでは通常の .header-nav を表示 */
    .header-nav {
        display: block; /* HTMLのブロック要素として表示 */
        position: absolute; /* ヘッダーに対して絶対配置 */
        width: 100%;
        top: 0; /* ヘッダーのトップに配置 */
        z-index: 20; /* 他の要素より手前に */
        background-color: rgba(0,0,0,0.5); /* 半透明の背景 */
        padding: 10px 0; /* パディング */
    }

    .header-nav-list {
        display: flex; /* リストアイテムを横並び */
        position: absolute; /* 親要素 .header-nav に対して絶対配置 */
        top: 20px; /* ADJUSTED: ヘッダー画像の上から20pxの位置に配置 */
        right: 20px;
        font-size: 1.25rem;
        letter-spacing: 1px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

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

/* モバイル表示 (768px 以下) */
@media screen and (max-width: 768px) {
    /* モバイルではハンバーガーメニューを表示 */
    .header__hamburger {
        display: flex; /* ハンバーガーアイコンを表示 */
    }

    /* モバイルでは通常の .header-nav を非表示 (ハンバーガーメニューが代わりに表示されるため) */
    .header-nav {
        display: none;
    }
}


/* ==================== Swiper Container ==================== */
.swiper-container {
    position: relative;
    max-width: 800px; /* スライダー全体の最大幅を設定（.wrapper内でさらに制限） */
    margin: 0 auto; /* 中央揃え */
    padding: 0 60px; /* 左右に余白を追加（ナビゲーションボタン用） */
}

.swiper {
    width: 100%;
    height: auto;
}

.swiper-wrapper {
    align-items: center; /* スライド内容を縦方向中央揃え */
}

.swiper-slide {
    text-align: center;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 画像サイズの調整 */
.swiper-slide img {
    width: 100%;
    max-width: 600px; /* 画像の最大幅を制限 */
    height: auto;
    object-fit: contain; /* アスペクト比を維持 */
    border-radius: 8px; /* 角を丸く（オプション） */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 影を追加（オプション） */
}

/* ==================== Swiper Navigation ==================== */
/* 矢印ボタンをスライダー内の中央に配置 */
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #95a2ba;
    width: 44px;
    height: 44px;
}

/* 左右の余白調整 */
.swiper-button-prev {
    left: 10px;
}

.swiper-button-next {
    right: 10px;
}

/* ページネーション */
.swiper-pagination {
    position: relative;
    margin-top: 30px;
}

.swiper-pagination-bullet {
    background: #95a2ba;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #95a2ba;
}

/* ==================== レスポンシブ対応 ==================== */
/* タブレット */
@media (max-width: 768px) {
    .swiper-container {
        max-width: 90%; /* .wrapperのpadding: 0 4%と調和 */
        padding: 0 50px;
    }
    
    .swiper-slide img {
        max-width: 500px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 36px;
        height: 36px;
    }
}

/* スマートフォン */
@media (max-width: 480px) {
    #works {
        padding: 40px 0;
    }
    
    .swiper-container {
        max-width: 95%; /* .wrapperのpadding: 0 4%を考慮してさらに調整 */
        padding: 0 40px;
    }
    
    .swiper-slide img {
        max-width: 100%;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px;
        height: 32px;
    }
    
    .swiper-button-prev {
        left: 5px;
    }
    
    .swiper-button-next {
        right: 5px;
    }
}

/* ============================================================== */
/* Concept Section Styling */
.concept-section {
    padding: 80px 0; /* 上下の余白 */
    text-align: center; /* テキストを中央寄せ */
    background-color: #f9f9f9; /* 背景色（任意） */
}

.concept-section .section-ttl {
    margin-bottom: 40px; /* タイトルと本文の間の余白 */
    font-size: 2.5em; /* タイトルサイズ */
    color: #595959; /* タイトル色 */
}

.concept-text {
    max-width: 800px; /* テキストの最大幅 */
    margin: 0 auto; /* 中央寄せ */
    font-size: 1.1em; /* フォントサイズ */
    line-height: 1.8; /* 行の高さ */
    color: #555; /* テキスト色 */
}

@media (max-width: 768px) {
    .concept-section {
        padding: 50px 20px; /* モバイルでの余白 */
    }

    .concept-section .section-ttl {
        font-size: 2em;
    }

    .concept-section .concept-text {
        font-size: 1em;
    }
}
/* ============================================================ */

/* ==================== Service Section ==================== */
/* サービスリスト全体のレイアウト - 3カラム表示に調整 */
.service.service-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 56px 0;
}

/* 各サービス項目のスタイル - 3カラム表示に調整 */
.service.service-menu li {
    background: #fff;
    border-radius: 12px;
    padding: 40px 30px 50px 30px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex: 0 1 calc(33.333% - 20px); /* 3カラム表示：33.333%からgapの分を引く */
    min-width: 280px; /* 最小幅を設定 */
    max-width: 350px; /* 最大幅を調整 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service.service-menu li img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 24px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* サービスタイトル */
.service_menu {
    font-size: 1.2rem;
    font-weight: bold;
    color: #4b4b4b;
    margin: 0 0 16px 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.service.service-menu li p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #666;
    text-align: left;
    flex-grow: 1;
    margin-bottom: 20px;
}

.divider {
  text-align: center;
  font-size: 4rem; 
  color: #ccc;        
  margin: 20px 0;      
  font-weight: bold;
}
/* ボタンコンテナを中央配置 */
.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    width: 100%;
}

.service-btn {
    display: inline-block;
    padding: 16px 40px;
    font-size: 24px;
    font-family: 'the Seasons', sans-serif;
    color: #fff;
    background-color: #7e7f85;
    border: solid 1px #7e7e7e;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 40px 0;
    box-shadow: 2px 2px 0 0 #5d5c5c;
    border-radius: 50px;
}

/* ====================== btn ================================ */
/* .flow-cta .flow_cta-btn {
    display: inline-block;
    padding: 16px 56px;
    background-color: #b3c1d8;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.3rem;
    font-family: 'the Seasons', sans-serif;
    font-weight: 600;
    transition: background-color 0.3s ease;
    text-shadow: 0 0 2px #9b9c9e;
}

.service-btn:hover {
    background-color: #c9cace;
} */


/* ==================== Flow Section ==================== */
.service-flow {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
}

.flow-container {
    width: 100%;
}

.flow-header {
    text-align: center;
    margin-bottom: 50px;
}

.flow-title {
	font-family: 'the Seasons', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 5px;
    color: #515151;
}

.flow-subtitle {
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
    color: #595c41;
}

.flow-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.flow-step {
    display: flex;
    background-color: #f1f3f5;
    border-radius: 4px;
    padding: 24px 32px;
    align-items: flex-start;
}

.step-left-column {
    flex-shrink: 0;
    width: 150px;
    border-right: 2px solid #bcbdc5;
    padding-right: 20px;
    margin: 0 20px;
    text-align: left;
}

.step-number {
    font-size: 18px;
    font-weight: 600;
    color: #5258a1;
    margin-bottom: 16px;
}

.step-title {
    font-size: 16px; /* フォントサイズ調整 */
    font-weight: 600;
    margin: 0; /* 余白をリセット */
    color: #45472d;
    line-height: 1.4;
}

.step-content {
    flex-grow: 1;
    padding: 0;
}

.step-description {
    font-size: 15px;
    line-height: 2;
    font-feature-settings: "palt";
}

.step-description p {
/* margin: 2 32px; */
    text-align: justify;
}

.step-description p:last-child {
    margin-bottom: 0;
}

/* Flow CTA */
/* .flow-cta {
    text-align: center;
    margin-top: 40px;
}

.flow-cta p {
    font-size: 18px;
    margin-bottom: 20px;
} */
/* .flow-cta .flow_cta-btn はコメントアウトされています */

.flow-cta .flow_cta-btn:hover {
    background-color: #94a5c1;
}

.faq-section {
            padding: 60px 20px;
            background-color: #ffffff;
        }
        .faq-container {
            max-width: 900px;
            margin: 0 auto;
        }
        .faq-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .faq-title {
            font-size: 2.5rem;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        .faq-subtitle {
            font-size: 1rem;
            color: #7f8c8d;
        }
        .faq-item {
            border-bottom: 1px solid #e0e0e0;
        }
        .faq-question {
            padding: 20px 0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.1rem;
            font-weight: bold;
        }
        .faq-question::after {
            content: '+';
            font-size: 1.5rem;
            color: #3498db;
            transition: transform 0.3s ease-in-out;
        }
        .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
            padding: 0 20px;
            color: #555;
            background-color: #f9f9f9;
	   }
        .faq-answer p {
            margin: 0;
            padding: 20px 0;
			line-height: 1.5;
			text-align: left;
		}

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .flow-step {
                flex-direction: column;
            }
            .step-left-column {
                margin-bottom: 15px;
                flex-basis: auto;
            }
        }

/* ==================== About Section ==================== */
.about {
    display: flex;
    justify-content: space-between; /* 均等配置 */
    align-items: stretch; /* 高さを揃える */
    margin-bottom: 80px;
}

.about-wrapper {
    max-width: 96%;
    margin: 0 auto;
}

.about-inner-wrapper {
    max-width: 100%; /* 横幅制限を解除 */
    margin: 0 auto;
}

#about .section-ttl {
    margin-bottom: 60px; /* 下余白を調整 */
}

/* --- ここからabout専用カラムレイアウト --- */
.about-img-col {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0;
    min-width: 0;
}

.about-img-col img {
    width: 100%;
    max-width: 400px; /* 必要に応じて調整。画像が大きすぎる場合はここで制限 */
    height: auto;
    display: block;
}

.about-text-col {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    min-width: 0;
}

.about-text-col p {
    text-align: justify;
    line-height: 1.6;
    margin-bottom: 1em;
    margin-left: 0;
    font-size: 1.2rem;
    width: 100%;
}

/* レスポンシブ: 画面幅768px未満で縦並び */
@media (max-width: 768px) {
    .about {
        flex-direction: column;
        align-items: flex-start;
    }
    .about-img-col,
    .about-text-col {
        width: 100%;
        max-width: 100%;
        margin: 0 0 24px 0;
        flex: none;
    }
    .about-img-col {
        justify-content: flex-start;
    }
}
/* ==================== Works Section ==================== */
#works h2.section-ttl{
    margin-bottom: 60px; /* 下余白を調整 */
    border-bottom: none;
    font-family: 'the Seasons', sans-serif;align-content;
    font-size: 2.4rem;
    color: #595959;
}

#works ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 40px; /* 行間の隙間を調整 */
    column-gap: 32px; /* 列間の隙間 */
    list-style: none;
    padding: 0;
	margin-bottom: 96px;
}

/* 作品アイテムの基本スタイル */
.works-item {
    box-sizing: border-box;
    flex: 0 1 300px; /* アイテムの基本幅を調整 */
    max-width: 320px; /* アイテムの最大幅を調整 */
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5; /* グレー系の背景 */
    border: 1px solid #e0e0e0; /* 軽めのボーダー */
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ホバー効果 */
.works-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* リンクのスタイル */
.works-item a {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* 画像コンテナ */
/* ==================== Works Section ==================== */
/* ... 既存のWorks Sectionのスタイル ... */

.work-image-container {
    width: 100%;
    height: 180px; /* PCでは既存の固定高さを維持 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
}

.work-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* ★ ここから修正・追加 ★ */
@media (max-width: 768px) {
    /* works-item の既存のモバイルスタイルはそのまま */

    .work-image-container {
        height: auto; /* 高さを自動調整に変更 */
        aspect-ratio: 16 / 9; /* バナーの一般的なアスペクト比に合わせて調整 (例: 16:9, 4:3, etc.) */
                              /* 画像のアスペクト比に合わせて調整してください */
        background-color: #f0f0f0; /* 余白ができる可能性があるので、背景色を設定しておくと良い */
    }

    .work-image-container img {
        object-fit: contain; /* 画像全体がコンテナ内に収まるようにする */
    }

    /* 必要であれば、特定のカテゴリの画像のみに適用するためのセレクタ */
    /* .works-item[data-category="banner"] .work-image-container {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .works-item[data-category="banner"] .work-image-container img {
        object-fit: contain;
    } */
}
/* ★ ここまで修正・追加 ★ */
/* ============================================================================== */
/* 作品情報エリア */
.work-info {
    padding: 15px;
    text-align: left;
}

/* カテゴリ、ロールのスタイル */
.work-category,
.work-role {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
    text-align: left; /* 左寄せ */
    line-height: 1.4;
}

.work-category {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

/* テックタグのコンテナ */
.work-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

/* 個々のテックタグのスタイル */
.work-tech-tags span {
    display: inline-block;
    background-color: #e0e0e0; /* グレー系のタグ背景 */
    color: #666;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap; /* 折り返しを防ぐ */
}

/* カテゴリーボタンのスタイル */
/* ==================== Works Section ==================== */
/* ... 既存の#works h2.section-ttlや#works ulのスタイル ... */

/* カテゴリーボタンのコンテナスタイルを修正 */
.works-categories {
    text-align: center; /* 残しても良いが、flexboxでjustify-contentを使用する場合は必須ではない */
    margin-bottom: 40px;

    /* ★ ここから追加・修正 ★ */
    display: flex; /* Flexboxコンテナにする */
    flex-wrap: wrap; /* ボタンが複数行にわたって折り返すようにする */
    justify-content: center; /* 中央寄せにする */
    gap: 10px; /* ボタン間の隙間を均等に設定 (上下左右) */
    padding: 0 10px; /* 左右に少しパディングを持たせて、画面端にくっつくのを防ぐ */
    /* ★ ここまで追加・修正 ★ */
}

.works-categories .category-btn {
    background-color: #e0e0e0;
    color: #555;
    border: none;
    padding: 10px 20px;
    /* margin: 0 5px; を削除またはコメントアウト。gapで管理するため */
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    /* Flexアイテムとしてのサイズ調整（任意） */
    flex-shrink: 0; /* ボタンが縮まないようにする */
}

/* ... category-btn:hover, .category-btn.active のスタイル ... */

/* レスポンシブ対応の調整 */
@media (max-width: 768px) {
    /* works-item などの既存のモバイルスタイルはそのまま */
    .works-item {
        flex: 0 1 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .work-image-container {
        height: 150px;
    }

    /* ★ works-categories のモバイル向け調整（必要であれば） ★ */
    /* 567px以下での具体的な調整が必要な場合はここに記述 */
    @media (max-width: 567px) {
        .works-categories {
            /* gapを調整したり、paddingを増やしたりする可能性 */
            gap: 8px; /* 少し狭くするなど */
            padding: 0 5px; /* さらに狭くしたり、必要なければ削除 */
        }
        .works-categories .category-btn {
            /* フォントサイズを小さくするなどで1行に収まりやすくする */
            font-size: 14px;
            padding: 8px 15px;
        }
    }
}

/* ======================================================== */
/* ==================== Works Section ==================== */
/* ... 既存のWorks Sectionのスタイル ... */

.works-item.hidden {
    display: none;
}

/* =========================================================== */

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .works-item {
        flex: 0 1 100%; /* モバイルでは1列表示 */
        max-width: 320px; /* 中央寄せのために最大幅を設定 */
        margin: 0 auto; /* 中央寄せ */
    }

    .work-image-container {
        height: 150px; /* モバイルでの画像高さを調整 */
    }
}

/* ============================================================================ */
/* 新しく追加・修正する Works 詳細セクションのスタイル */
.works-detail-container {
    display: flex;
    max-width: 960px; /* 全体の最大幅 */
    margin: 60px auto 80px; /* 上下の余白と中央寄せ */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    flex-wrap: wrap; /* レスポンシブ対応のために折り返しを許可 */
}

.works-detail-left {
    flex: 1; /* 左側が残りのスペースを占める */
    min-width: 300px; /* 最小幅を設定 */
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.works-detail-image {
    width: 100%;
    max-width: 400px; /* 画像の最大幅 */
    margin-bottom: 20px;
}

.works-detail-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.works-detail-link-area {
    text-align: center;
    width: 100%;
    max-width: 400px; /* リンクエリアの最大幅を画像と合わせる */
}

.works-detail-link-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
    text-align: center; /* 中央寄せ */
}

.works-detail-site-link {
    display: block;
    font-size: 0.95rem;
    color: #007bff;
    word-break: break-all; /* 長いURLの折り返し */
    margin-bottom: 20px;
    text-align: center; /* 中央寄せ */
}

.works-detail-site-link:hover {
    text-decoration: underline;
}

.works-detail-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #97a2bc;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.works-detail-button:hover {
    background-color: #566571; /* ホバーで少し濃く */
    transform: translateY(-2px);
}

.works-detail-right {
    flex: 1; /* 右側が残りのスペースを占める */
    min-width: 300px; /* 最小幅を設定 */
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.works-detail-description-section,
.works-detail-info-section {
    margin-bottom: 30px;
    text-align: left; /* 各セクション内のテキストを左寄せ */
}

.works-detail-description-section:last-child,
.works-detail-info-section:last-child {
    margin-bottom: 0; /* 最後のセクションは下マージンなし */
}

.works-detail-sub-title {
    font-size: 1.2rem;
    color: #636363;
    margin-bottom: 15px;
    border-left: 5px solid #6c7a89; /* 左にアクセントライン */
    padding-left: 10px;
    line-height: 1.2;
}

.works-detail-description {
    font-size: 1rem;
    line-height: 1.3;
    color: #727272;
    text-align: justify; /* 両端揃え */
    margin-bottom: 0; /* pタグのデフォルトマージンをリセット */
}

.works-detail-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.works-detail-info-list li {
    display: flex;
    align-items: flex-start; /* アイテムの上端を揃える */
    margin-bottom: 15px;
}

.info-label {
    flex-shrink: 0; /* 縮小させない */
    font-weight: 500;
    color: #6c7a89; /* 少し強調 */
    margin-right: 15px;
    width: 80px; /* ラベルの幅を固定 */
}

.info-value {
    flex-grow: 1; /* 残りのスペースを埋める */
    color: #555;
    line-height: 1.6;
}

.info-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* タグ間の隙間 */
}

.tech-tag {
    display: inline-block;
    background-color: #e0e0e0; /* 明るいグレー系の背景 */
    color: #4a5d6e; /* 落ち着いたテキスト色 */
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #cddae7; /* わずかなボーダー */
}

/* Works一覧に戻るボタンのスタイル (re_btn) */
.re_btn_container {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 80px;
}

.re_btn {
    display: inline-block;
    padding: 16px 40px;
    font-size: 1.2rem;
    font-family: 'the Seasons', sans-serif;
    color: #fff;
    background-color: #7e7f85; /* 既存のView Allボタンと同じ色 */
    border: solid 1px #7e7e7e;
    border-radius: 50px;
    box-shadow: 2px 2px 0 0 #5d5c5c;
    transition: background-color 0.3s, transform 0.3s;
}

.re_btn:hover {
    background-color: #c9cace; /* ホバー時の色 */
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 0 #5d5c5c; /* ホバーで影を強調 */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .works-detail-container {
        flex-direction: column; /* モバイルでは縦並び */
        margin: 40px 20px 60px; /* 上下の余白と左右のパディング */
        max-width: none; /* 幅制限を解除して画面いっぱいに */
    }

    .works-detail-left,
    .works-detail-right {
        padding: 20px;
        min-width: unset; /* 最小幅をリセット */
        width: 100%;
    }

    .works-detail-link-title {
        font-size: 1rem;
    }

    .works-detail-button {
        padding: 10px 25px;
        font-size: 0.9rem;
    }

    .works-detail-sub-title {
        font-size: 1.1rem;
    }

    .works-detail-description,
    .info-label,
    .info-value {
        font-size: 0.9rem;
    }

    .info-label {
        width: 60px; /* モバイルでのラベル幅調整 */
        margin-right: 10px;
    }

    .re_btn_container {
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .re_btn {
        padding: 12px 30px;
        font-size: 1rem;
    }
}
/* =============================================================================== */


/* ==================== Price Section ==================== */
.price-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #4d4d4d;
}

/* メインタイトル */
.price-main-title {
    font-size: 3rem;
    text-align: center;
    margin: 64px 0 32px;
    color: #555;
    font-family: 'the Seasons', sans-serif;
}

.price-subtitle {
    font-size: 24px;
    color: #555;
    text-align: center; /* 中央寄せ */
    margin-bottom: 40px; /* 下余白 */
}

/* 説明文 */
.price-discription {
    text-align: center;
    font-size: 18px;
    margin: 40px 0;
    line-height: 1.6;
}

/* 共通セクションスタイル */
.section {
    margin-bottom: 80px; /* セクション間の下余白 */
} 

.area {
    padding: 20px 0;
}

/* すべての見出し共通スタイル */
.price-wrapper h2.basic_disc,
.price-wrapper h2.price-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

/* 見出しの下線装飾 */
.price-wrapper h2.basic_disc:after,
.price-wrapper h2.price-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, #aed0f8, #1154a4);
}

/* 料金プラン（カード）スタイル */
.price-container {
    display: flex;
    justify-content: center; /* 中央寄せ */
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}

.pricing-card {
    flex: 1 1 280px; /* 成長・縮小を許可し、基本幅280px */
    max-width: 350px; /* 最大幅を設定 */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 25px;
    text-align: center;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* コンテンツを上下に分散 */
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-card.main {
    border-top: 5px solid #7faadd;
}

.pricing-card.left {
    border-top: 5px solid #becee1;
}

.pricing-card.right {
    border-top: 5px solid #3275c5;
}

.pricing-card h2 {
    font-size: 22px;
    margin: 10px 0;
}

.pricing-card .p_ttl,
.pricing-card .p_ttl_center {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.pricing-card .p_ttl_center {
    color: #4a90e2;
    font-weight: bold;
}

.pricing-card .price {
    font-size: 26px;
    color: #4d4d4d;
    margin: 20px 0;
    font-weight: bold;
}

.features {
    list-style-type: none;
    padding: 0;
    margin: 20px 0; /* 上下に余白 */
    text-align: left;
    flex-grow: 1; /* 残りのスペースを埋める */
}

.features li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    position: relative;
    padding-left: 20px;
}

.features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4a90e2;
}

/* テーブルスタイル共通化 */
.price-wrapper table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 30px; /* テーブルの下に余白 */
    font-size: 15px;
}

.price-wrapper th,
.price-wrapper td {
    padding: 15px;
    border: 1px solid #e0e0e0;
    vertical-align: middle;
    text-align: left; /* 基本を左寄せに */
}

.price-wrapper th {
    background-color: #f8f9fa;
    font-weight: bold; /* 太字に */
    width: 19%; /* ヘッダーの幅を調整 */
    text-transform: none;
}

.price-wrapper td {
    text-align: left;
}

/* 価格セルのスタイル */
.price-wrapper td.b_price {
    width: 16%; /* 価格セルの幅 */
    text-align: right; /* 価格は右寄せ */
    font-size: 16px;
    color: #333;
    white-space: nowrap; /* 折り返しなし */
}

/* 説明テキストセルのスタイル */
.price-wrapper td.b_price_txt {
    width: 50%; /* 説明セルの幅 */
    font-size: 14px;
    line-height: 1.6;
    color: #434343;
}


/* 注意事項 */
.caution {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 30px;
}

/* =============================================================================== */

/* ==================== Contact Section ==================== */
#contact { /* HTMLのセクションIDに合わせる */
    background-color: #fbfbfb; /* 背景色を追加 */
    padding: 80px 0; /* 上下の余白を調整 */
    text-align: center; /* コンテンツを中央寄せ */
}

.contact_container { /* contact_wrapper としていたものを contact_container に変更 */
    max-width: 700px; /* フォーム全体の幅を調整 */
    margin: 0 auto;
    padding: 30px;
    background-color: #fff; /* フォームの背景色 */
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08); /* 影を追加 */
    text-align: left; /* フォーム内のテキストを左寄せに */
}

.cta_txt {
    font-size: 1.4rem;
    font-weight: 400;
    color: #595959;
    margin-bottom: 40px; /* ボタンとの間に余白 */
    line-height: 1.6;
    text-align: center; 
}

/* Contact Form 7 の基本スタイル */
.wpcf7 {
    font-family: "Noto Sans JP", Sans-Serif;
}

.wpcf7-form p {
    text-align: left; /* Contact Form 7 の p タグ内のテキストを左寄せ */
    margin-bottom: 20px; /* 各フォーム項目間の余白 */
    color: #333;
}

/* ラベルと入力欄を分けるためのスタイル */
/* Contact Form 7 のデフォルトの <label> タグに対応 */
.wpcf7-form label {
    display: block; /* ラベルをブロック要素にして入力欄の上に配置 */
    font-size: 16px;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px; /* ラベルと入力欄の間の余白 */
}

.wpcf7-form label .wpcf7-list-item-label { /* チェックボックスやラジオボタンのラベルに対応 */
    font-weight: normal; /* チェックボックス等のラベルは通常の太さに戻す */
    margin-left: 5px;
}


/* 入力フィールド全般 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: calc(100% - 20px); /* パディング分を考慮して幅を調整 */
    margin-bottom: 1.5rem;
    padding: 12px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    color: #333;
    background-color: #fcfcfc; /* やや明るい背景色 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    border-color: #88BBDD; /* フォーカス時のボーダー色 */
    box-shadow: 0 0 5px rgba(136, 187, 221, 0.5); /* フォーカス時の影 */
    outline: none; /* デフォルトのアウトラインを削除 */
}

/* テキストエリア */
.wpcf7-form textarea {
    min-height: 150px; /* メッセージ欄の最小高さを設定 */
    resize: vertical; /* 縦方向のみリサイズ可能に */
}

/* 必須項目マーク */
.wpcf7-form .wpcf7-form-control-wrap {
    position: relative;
    display: block; /* wrap要素もブロック要素に */
}

.wpcf7-form label span.wpcf7-form-control-wrap::before {
    /* Contact Form 7 の span.wpcf7-form-control-wrap に直接適用されるスタイル */
    /* これ自体はラベルではないので、必須マークは label の方に移動 */
}

.wpcf7-form label.wpcf7-list-item-label::after, /* チェックボックスやラジオボタンの必須マーク */
.wpcf7-form label::after { /* 通常の必須項目ラベルに適用 */
    content: " *必須"; /* 必須マークのテキスト */
    color: #e74c3c; /* 赤色 */
    font-size: 0.7em;
    margin-left: 5px;
    font-weight: normal; /* 必須マークの太さは通常に */
}

/* 確認事項などチェックボックス・ラジオボタンのグループ */
.wpcf7-list-item {
    display: flex; /* チェックボックスとラベルを横並びに */
    align-items: center;
    margin-bottom: 5px; /* 各項目間の余白 */
    font-weight: normal; /* デフォルトの太さに戻す */
}

.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
    margin-right: 8px; /* チェックボックスとラベルの間の余白 */
    width: auto; /* 幅を自動調整 */
    height: auto; /* 高さを自動調整 */
}

/* 同意チェックボックスのスタイル調整 */
.wpcf7-acceptance {
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 14px;
    color: #666;
    text-align: left; /* 左寄せ */
}

.wpcf7-acceptance .wpcf7-list-item {
    align-items: flex-start; /* チェックボックスとテキストが上端で揃うように */
}

.wpcf7-acceptance input[type="checkbox"] {
    margin-top: 3px; /* チェックボックスの縦位置を調整 */
}

/* プライバシーポリシーへのリンク */
.wpcf7-acceptance a {
    color: #007bff; /* 青色のリンク */
    text-decoration: underline;
}

.wpcf7-acceptance a:hover {
    color: #0056b3;
}

/* 送信ボタン */
.wpcf7-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .9em 2em;
    border: 1px solid #345acb;
    border-radius: 5px;
    background-color: #fff;
    color: #345acb;
    font-size: 1em;
    text-align: center;
}

.wpcf7-submit:hover {
    border: none;
    background-color: #345acb;
    color: #fff;
    font-weight: 600;
}

.wpcf7-submit::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #345acb;
    border-right: 2px solid #345acb;
    content: '';
}

.wpcf7-submit:hover::after {
    border-color: #fff;
}

/* メッセージ（送信成功・失敗など） */
.wpcf7-response-output {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    font-size: 15px;
    text-align: center;
    word-break: break-word; /* 長いメッセージの改行 */
}

.wpcf7-response-output.wpcf7-validation-errors {
    border: 1px solid #cc5050;
    background-color: #f8d7da;
    color: #721c24;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
    border: 1px solid #28a745;
    background-color: #d4edda;
    color: #155724;
}

.wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-response-output.wpcf7-aborted,
.wpcf7-response-output.wpcf7-spam-blocked {
    border: 1px solid #ffc107;
    background-color: #fff3cd;
    color: #856404;
}

/* SP用の調整 */
@media (max-width: 768px) {
    #contact {
        padding: 60px 0;
    }

    .cta_txt {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .contact_container {
        padding: 20px;
        max-width: 90%; /* モバイルでのフォーム幅を調整 */
    }

    /* フォーム項目全般 */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form textarea {
        padding: 10px 8px;
        font-size: 15px;
    }

    .wpcf7-form label {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .wpcf7-form label::after {
        font-size: 0.8em;
    }

    .wpcf7-list-item {
        font-size: 15px;
    }

    .wpcf7-acceptance {
        font-size: 13px;
    }

    /* 送信ボタン */
    .wpcf7-submit {
        max-width: 250px; /* モバイルでのボタン最大幅 */
        padding: 12px 20px;
        font-size: 16px;
        margin-top: 25px;
    }

    .contact_container::before {
        font-size: 13px;
        margin-bottom: 20px;
    }
}

/* ==================== Footer ==================== */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 30px 0;
    margin-top: 80px; /* セクションとの間に余白 */
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* 折り返しを許可 */
}

.footer-nav li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-nav li a:hover {
    color: #aaa;
}

.copyright {
    font-size: 12px;
    color: #bbb;
}

/* ==================== Custom Button Styles (追加/修正部分) ==================== */

/* ボタンを中央配置にするための汎用的なラッパー */
.button-center-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px; /* 必要に応じて調整 */
    margin-bottom: 40px; /* 必要に応じて調整 */
}

/* 共通ボタンスタイル */
/* 共通ボタンスタイル */
.custom-button, .flow_cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif !important;
    font-size: 1.6rem;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative; 
    z-index: 2; /* ★ここを z-index: 2; に変更！ */
    overflow: hidden; /* ★これはそのまま残す★ */

    background-color: #2c3e50; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease; 
}

/* ホバー時に表示される背景（疑似要素） */
.custom-button::before, .flow_cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(135deg, #8ab0dd 0%, #3e556b 100%); 
    
    opacity: 0; 
    visibility: hidden; 
    transform: translateX(-100%); 
    
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;
    z-index: -1; /* ★ここを z-index: -1; に戻す！ */
}

/* ホバー時に疑似要素をスライドインして表示 */
.custom-button:hover::before, .flow_cta-btn:hover::before {
    transform: translateX(0); 
    opacity: 1; 
    visibility: visible; 
}

/* ボタン内のテキスト（<a>タグの中身）を疑似要素より手前に表示させる */
/* span には z-index は不要になります（親の a タグが z-index を持つため） */
.custom-button span, .flow_cta-btn span { 
    position: relative; /* 必要であれば残す */
    /* z-index: 2; <-- これは削除！ */
    color: #fff; 
}

/* ボタンの矢印（任意で追加する場合） */
/* 矢印にも z-index は不要になります */
.custom-button.with-arrow::after {
    content: '→';
    margin-left: 10px;
    font-size: 1.2em;
    position: relative; /* 必要であれば残す */
    /* z-index: 2; <-- これは削除！ */
    color: #fff; 
    transition: transform 0.3s ease;
}

.custom-button.with-arrow:hover::after {
    transform: translateX(5px);
}

/* 以下は前回の修正で問題ない部分なのでそのまま */
.custom-button:hover, .flow_cta-btn:hover {
    transform: translateY(-3px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.custom-button:active, .flow_cta-btn:active { 
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* WorksセクションのView Allボタン */
#works .btn-wrapper {
    /* 中央配置のためにflexを適用し、marginは個々のボタンに任せる */
    display: flex;
    justify-content: center;
    margin-top: 60px; /* 既存のCSSから調整 */
    margin-bottom: 80px; /* 必要であれば追加 */
}

#works .works-btn {
    /* custom-button クラスに置き換えるため、既存のスタイルは削除または上書き */
    /* 例: display: inline-block; padding: ...; background-color: ...; border: ...; cursor: ...; transition: ...; margin: ...; box-shadow: ...; border-radius: ...; */
    /* これらは custom-button で定義されるため、ここでは不要になります。 */
    /* もし個別に調整したい場合はここに記述してください。 */
}

/* Serviceセクションの詳細はこちらボタン */
#service .btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 60px; /* 既存のCSSから調整 */
    margin-bottom: 80px; /* 必要であれば追加 */
}

#service .service-btn {
    /* custom-button クラスに置き換えるため、既存のスタイルは削除または上書き */
    /* font-size: 24px; の部分は custom-button の font-size: 20px; で上書きされますが、24pxを維持したい場合はここに再度指定 */
}

/* ContactセクションのContactボタン */
#contact .cta-btn_center {
    display: flex;
    justify-content: center;
    margin-top: 40px; /* 既存のCSSから調整 */
    margin-bottom: 40px; /* 必要であれば追加 */
}

#contact .cta-btn {
    color: #fff;
}