/* ========================================
   FVセクション
======================================== */
.fv {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 上から下へ、お掃除LABOらしい清潔感のあるグラデーション */
    background: linear-gradient(to bottom, 
    #D0EAF5 0%,     /* 少し濃いめの清潔な青 */
    #E0F3ED 30%,    /* 青緑の中間（爽やかさ） */
    #EDF8F2 55%,    /* 薄い新緑（柔らかさ） */
    #F7FCFA 75%,    /* ごく薄い緑がかった白 */
    #FFFFFF 90%,
    #FFFFFF 100%
);
    min-height: 667px;
    max-height: 800px;
}

@media (min-width: 1024px) {
    .fv {
        min-height: 768px;
    }
}

/* 背景の円形パターン */
.fv-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* 円の表示制御（画面サイズ別） */
/* 画像付き円は常に表示 */

/* ~375px: 装飾円は4個まで（blue-2, green-3, yellow-2, yellow-3のみ） */
/* green-3（左上画像円の右下）を表示、green-1（右下画像円近く）を非表示 */
.fv-pattern .fv-circle--blue-3,
.fv-pattern .fv-circle--green-2,
.fv-pattern .fv-circle--blue-4,
.fv-pattern .fv-circle--blue-5,
.fv-pattern .fv-circle--green-4,
.fv-pattern .fv-circle--blue-6,
.fv-pattern .fv-circle--green-5,
.fv-pattern .fv-circle--blue-7,
.fv-pattern .fv-circle--blue-8 {
    display: none !important;
}

/* 375px~: blue-4とgreen-1を追加（装飾円6個まで） */
@media (min-width: 375px) {
    .fv-pattern .fv-circle--blue-4 {
        display: flex !important;
    }
}

/* 576px~: blue-3, green-2, yellow-5を追加（装飾円9個まで） */
@media (min-width: 576px) {
    .fv-pattern .fv-circle--blue-3,
    .fv-pattern .fv-circle--green-2,
    .fv-pattern .fv-circle--yellow-5 {
        display: flex !important;
    }
}

/* 768px~: 装飾円を10個まで */
@media (min-width: 768px) {
    .fv-circle--blue-6 {
        display: flex;
    }
}

/* 1024px~: 装飾円を12個まで（全て表示） */
@media (min-width: 1024px) {
    .fv-circle--blue-3,
    .fv-circle--green-2,
    .fv-circle--blue-5,
    .fv-circle--green-4,
    .fv-circle--blue-6 {
        display: flex;
    }
}

/* 1200px~: 装飾円を14個まで */
@media (min-width: 1200px) {
    .fv-circle--green-5 {
        display: flex;
    }
}

/* 1440px~: 装飾円を16個まで */
@media (min-width: 1440px) {
    .fv-circle--blue-7,
    .fv-circle--blue-8 {
        display: flex;
    }
}

/* 円形の共通スタイル */
.fv-circle {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    opacity: 0.9;
    contain: layout style paint;
}

.fv-circle--image {
    opacity: 1.0;
}

/* 大きな円 */
.fv-circle--large {
    width: clamp(180px, 20vw, 280px);
    height: clamp(180px, 20vw, 280px);
}

/* 中サイズの円 */
.fv-circle--medium {
    width: clamp(120px, 15vw, 180px);
    height: clamp(120px, 15vw, 180px);
}

/* 小さな円 */
.fv-circle--small {
    width: clamp(60px, 8vw, 100px);
    height: clamp(60px, 8vw, 100px);
}

/* 極小の円 */
.fv-circle--tiny {
    width: clamp(30px, 4vw, 50px);
    height: clamp(30px, 4vw, 50px);
}

/* 画像付き大きな円（右下・メイン） */
.fv-circle--image-main-bottom {
    background: var(--color-primary);
    bottom: 10%;
    right: -10%; /* 475px未満のデフォルト位置（右側に少しはみ出す） */
    animation: floatCircle 20s ease-in-out infinite;
    max-width: 280px;
    max-height: 280px;

}

@media (min-width: 375px) {
    .fv-circle--image-main-bottom {
        bottom: 8%;
        right: -8%;
        max-width: 320px;
        max-height: 320px;
    };
}

/* 475px以上: 少し中央寄りに */
@media (min-width: 475px) {
    .fv-circle--image-main-bottom {
        right: 2%;
        max-width: 100%;
        max-height: 100%;

    }
}

/* 1200px以上: さらに左側に移動 */
@media (min-width: 768px) {
    .fv-circle--image-main-bottom {
        right: 10%;
    }
}

/* 1200px以上: さらに左側に移動 */
@media (min-width: 1200px) {
    .fv-circle--image-main-bottom {
        bottom: 6%;
    }
}

/* 1200px以上: さらに左側に移動 */
@media (min-width: 1200px) {
    .fv-circle--image-main-bottom {
        right: 15%;
    }
}

/* 1440px以上: より左側に */
@media (min-width: 1440px) {
    .fv-circle--image-main-bottom {
        right: 17.5%;
    }
}

/* 画像付き小さな円（左上・サブ） */
.fv-circle--image-sub-top {
    background: var(--color-secondary);
    top: 12%;
    left: 2%;
    animation: floatCircle 19s ease-in-out infinite 2.5s;
}

@media (min-width: 375px) {
    .fv-circle--image-sub-top {
        left: 3%;
    }
}

/* 475px以上: 少し中央寄りに */
@media (min-width: 475px) {
    .fv-circle--image-sub-top {
        left: 4%;
    }
}

/* 1200px以上: さらに左側に移動 */
@media (min-width: 768px) {
    .fv-circle--image-sub-top {
        left: 8%;
    }
}

/* 1200px以上: さらに左側に移動 */
@media (min-width: 1200px) {
    .fv-circle--image-sub-top {
        left: 8%;
    }
}

/* 小さい画像用の円 */
.fv-circle--small-image {
    width: clamp(170px, 18vw, 240px);
    height: clamp(170px, 18vw, 240px);
}

/* 超大サイズの円（右下用） */
.fv-circle--xlarge {
    width: clamp(360px, 35vw, 560px);
    height: clamp(360px, 35vw, 560px);
}

/* 画像付き円 */
.fv-circle--image {
    overflow: hidden;
    background: transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 4px solid var(--color-white);
    z-index: 5; /* 他の円より高く */
}

/* 円内スライダー */
.fv-circle-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.fv-circle-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.fv-circle-slide.active {
    opacity: 1;
}

.fv-circle-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.fv-circle--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fv-circle-slide img[src*="roof-05.webp"] {
    object-fit: cover;
    object-position: 70% 70%; /* 横 縦 の順 */
}

/* その他の円の配置 */
.fv-circle--blue-2 {
    background: #3A8FD9;
    top: 60%;
    left: 15%;
    animation: floatCircle 18s ease-in-out infinite 2s;
}

/* 576px未満: blue-2の位置を右側に移動してテキストに被らないようにする */
@media (max-width: 575px) {
    .fv-circle--blue-2 {
        top: 65%;
        left: auto;
        right: 25%;
    }
}

.fv-circle--blue-3 {
    background: var(--color-primary);
    top: 25%;
    left: 35%;
    animation: floatCircle 15s ease-in-out infinite 4s;
}

.fv-circle--blue-4 {
    background: #165ba0;
    top: 80%;
    left: 45%;
    animation: floatCircle 22s ease-in-out infinite 1s;
}

/* 576px未満: blue-4の位置を右側に移動 */
@media (max-width: 575px) {
    .fv-circle--blue-4 {
        top: 75%;
        left: auto;
        right: 8%;
    }
}

.fv-circle--blue-5 {
    background: var(--color-primary);
    top: 15%;
    left: 70%;
    animation: floatCircle 16s ease-in-out infinite 3s;
}

.fv-circle--blue-6 {
    background: #3A8FD9;
    top: 90%;
    left: 85%;
    animation: floatCircle 19s ease-in-out infinite 5s;
}

/* 緑系の円 */
.fv-circle--green-1 {
    background: var(--color-secondary);
    top: 42%;
    right: 2%;
    animation: floatCircle 17s ease-in-out infinite 1s;
    max-width: 88px;
    max-height: 88px;
    display: flex!important;
}

@media (min-width: 768px) {
    .fv-circle--green-1 {
        top: 45%;
        right: 20%;
        display: none!important;
    }
}


.fv-circle--green-2 {
    background: var(--color-tertiary);
    top: 70%;
    right: 8%;
    animation: floatCircle 21s ease-in-out infinite 3s;
}

.fv-circle--green-3 {
    background: var(--color-secondary);
    top: 20%;
    right: 35%;
    animation: floatCircle 14s ease-in-out infinite 2s;
}

/* 576px未満: green-3の位置を左上の写真円の右下に移動 */
@media (max-width: 575px) {
    .fv-circle--green-3 {
        top: 28%;
        right: auto;
        left: 38%;
    }
}

.fv-circle--green-4 {
    background: var(--color-tertiary);
    top: 85%;
    right: 60%;
    animation: floatCircle 18s ease-in-out infinite 4s;
}

/* 黄色系の円 */
.fv-circle--yellow-2 {
    background: #FFC947;
    top: 12%;
    right: 12%;
    animation: floatCircle 16s ease-in-out infinite 1s;
    max-width: 120px;
    max-height: 120px;
}

/* 576px未満: 右上の円を明るい青に変更 & 一回り小さく */
@media (max-width: 575px) {
    .fv-circle--yellow-2 {
        background: var(--color-button-lightblue);
        width: 80px;
        height: 80px;
    }
}

.fv-circle--yellow-3 {
    background: #FFD54F;
    top: 50%;
    right: 40%;
    animation: floatCircle 20s ease-in-out infinite 3s;
    max-width: 72px;
    max-height:72px ;
}

/* 576px未満: yellow-3の位置を右上の青い円の右下に配置 */
@media (max-width: 575px) {
    .fv-circle--yellow-3 {
        top: 20%;
        right: 6%;
    }
}

.fv-circle--yellow-5 {
    background: #FFC947;
    bottom: 8%;
    left: 5%;
    animation: floatCircle 18s ease-in-out infinite 2s;
}

/* 576px未満: 左下の黄色い円の位置を調整 */
@media (max-width: 575px) {
    .fv-circle--yellow-5 {
        bottom: 15%;
        left: 8%;
    }
}

/* 1200px以上で追加される円 */
.fv-circle--green-5 {
    background: var(--color-tertiary);
    top: 50%;
    left: 25%;
    animation: floatCircle 19s ease-in-out infinite 3s;
}

/* 1440px以上で追加される円 */
.fv-circle--blue-7 {
    background: #3A8FD9;
    bottom: 25%;
    right: 15%;
    animation: floatCircle 20s ease-in-out infinite 1s;
}

.fv-circle--blue-8 {
    background: var(--color-primary);
    top: 30%;
    right: 45%;
    animation: floatCircle 22s ease-in-out infinite 5s;
}

/* 円のアニメーション */
@keyframes floatCircle {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, -20px);
    }
    50% {
        transform: translate(-15px, 15px);
    }
    75% {
        transform: translate(15px, 10px);
    }
}

/* 768px未満では円の動きを控えめに */
@media (max-width: 767px) {
    @keyframes floatCircle {
        0%, 100% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(8px, -8px);
        }
        50% {
            transform: translate(-6px, 6px);
        }
        75% {
            transform: translate(6px, 4px);
        }
    }
}

/* FVコンテナ */
.fv-container {
    width: 100%;
    max-width: var(--container-width-pc);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;  /* min-height 削除 */
    position: relative;
    z-index: 2; /* .fv-pattern(1)より上 */
}

@media (min-width: 768px) {
    .fv-container {
        padding: 0 80px;
    }
}

/* テキストコンテンツエリア */
.fv-content {
    max-width: 100%;
    text-align: left;
    color: var(--color-text);
    padding: 2.5rem 2rem 2.5rem 0; /* 左パディングを0に */
    border-radius: 0 1.5rem 1.5rem 0;
    margin-top: 3rem; /* 768px未満は下にずらす */
}

@media (min-width: 768px) {
    .fv-content {
        max-width: 560px;
        padding: 3rem 2.5rem; /* 左パディングを復活 */
        margin-top: 7.5rem; /* 768px以上は元の位置 */
    }
}

@media (min-width: 1024px) {
    .fv-content {
        max-width: 600px;
        padding: 3.5rem 3rem; /* 左パディングを復活 */
    }
}

/* キャッチコピー */
.fv-catchcopy {
    /* 画面幅に応じて流動的にフォントサイズを変更 */
    /* 最小1.3rem（20.8px）、最大3rem（48px）、画面幅に応じて変化 */
    font-size: clamp(1.3rem, 0.8rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    /* gap も流動的に */
    gap: clamp(0.5rem, 0.25rem + 0.75vw, 1.25rem);
}

/* 各ブレークポイントでの微調整は不要になったので削除 */
/* @media (min-width: 475px) { ... } */
/* @media (min-width: 576px) { ... } */
/* @media (min-width: 768px) { ... } */
/* @media (min-width: 1024px) { ... } */
/* @media (min-width: 1200px) { ... } */

.fv-catchcopy-line {
    display: inline-block;
    /* パディングも流動的に */
    padding: clamp(0.375rem, 0.25rem + 0.5vw, 0.625rem) clamp(1rem, 0.75rem + 1vw, 1.5rem);
    background: rgba(255, 255, 255, 0.9); /* 0.85 → 0.9 に変更して統一 */
    border-radius: 0 50px 50px 0; /* 768px未満は左側の角丸なし */
    /* すりガラス効果はグラデーションに影響するので削除 */
    color: #5A5A5a;
    width: max-content;
    
    /* アニメーション用の初期状態 */
    opacity: 0;
    transform: translateY(30px);
    animation: slideUpFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s; /* 1行目も少し遅延 */
}

/* 2行目はさらに遅延 */
.fv-catchcopy-line:nth-child(2) {
    animation-delay: 0.7s;
}

/* 3行目はさらにゆっくり */
.fv-catchcopy-line:nth-child(3) {
    animation-delay: 1.1s;
}

@media (min-width: 768px) {
    .fv-catchcopy-line {
        border-radius: 50px; /* 768px以上は全角丸 */
    }
}

/* 以前の.fv-catchcopy-line--largeは削除（不要） */

/* グラデーションテキスト（内側） */
.fv-catchcopy-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 以前の疑似要素スタイルを削除（もう不要） */
/* .fv-catchcopy-line--large::before { ... } */

/* ========================================
   店舗情報イントロセクション
======================================== */
.store-intro-section {
    width: 100%;
    min-height: 520px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.25rem 6rem;
    overflow: hidden;
}

/* 白い背景の擬似要素 */
.store-intro-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150.67vw;
    height: 130.67vw;
    /* 真っ白な背景 */
    background: var(--color-white);
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    z-index: 1;
}

@media (min-width: 576px) {
    .store-intro-section {
        padding: 4rem 2rem 6rem;
    }
}

@media (min-width: 768px) {
    .store-intro-section {
        min-height: 600px;
        padding: 4.5rem 2rem 8rem;
    }
    
    .store-intro-section::after {
        width: 102%; /* 元のサイズに戻す */
        height: 100%; /* 元のサイズに戻す */
        background: #FFFFFF;
    }
}

@media (min-width: 1024px) {
    .store-intro-section {
        padding-top: 6rem;
        min-height: 680px;
        padding-bottom: 10rem;
    }
    
    .store-intro-section::after {
        width: 104%; /* 元のサイズに戻す */
        height: 100%; /* 元のサイズに戻す */
        background: #FFFFFF;
    }
}

.store-intro-container {
    max-width: var(--container-width-sp);
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 3; /* .store-intro-section::after(1)より上 */
}

@media (min-width: 768px) {
    .store-intro-container {
        max-width: var(--container-width-pc);
    }
}

.store-intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .store-intro-content {
        gap: 2.5rem;
    }
}

.store-intro-circle-image {
    width: 87.5%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .store-intro-circle-image {
        max-width: 480px;
    }
}

.store-intro-circle-image img {
    width: 100%;
    height: auto;
    display: block;
}

.store-intro-greeting {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

@media (min-width: 768px) {
    .store-intro-greeting {
        gap: 2rem;
        text-align: center;
    }
}

.store-intro-text {
    font-size: 1.2rem;
    line-height: var(--body-line-height-sp);
    color: var(--color-text);
    letter-spacing: var(--body-letter-spacing);
    font-weight: 500;
}

@media (min-width: 768px) {
    .store-intro-text {
        font-size: 1.25rem;
        line-height: var(--body-line-height-pc);
    }
}

@media (min-width: 1024px) {
    .store-intro-text {
        font-size: 1.375rem;
    }
}

@media (min-width: 1200px) {
    .store-intro-text {
        font-size: 1.425rem;
    }
}

.store-intro-button-wrapper {
    display: flex;
    justify-content: center;
}

/* ========================================
   サービスグループ（タイトルを上に、横並びコンテンツを下に）
======================================== */
.services-group {
    background: transparent;
    position: relative;
    z-index: 2;
}

/* 各サービスセクション */
.service-section {
    width: 100%;
}

/* ハウスクリーニングセクション（青背景） */
.service-section--housecleaning {
    background: var(--color-section-light-blue);
    border-radius: 0 var(--border-radius-section) 0 0;
    z-index: 1;
}

/* 左右のエリアを囲む親要素 */
.service-halves-wrapper {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    /* ハウスクリーニングセクション（青背景） */
    .service-halves-wrapper {
        flex-direction: row;
        align-items: stretch; /* 子要素の高さを揃える */
    }
}

/* 左右のエリア */
.service-half {
    width: 100%;
}

@media (min-width: 1024px) {
    .service-half {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 左側エリア */
.service-section--housecleaning .service-half--left {
    background: var(--color-section-light-blue);
    padding: 4rem 1.25rem;
    border-radius: 0 var(--border-radius-section) 0 0;
    width: 100%;
}

@media (min-width: 576px) {
    .service-section--housecleaning .service-half--left {
        padding: 4rem 2rem;
    }
}

@media (min-width: 768px) {
    .service-section--housecleaning .service-half--left {
        padding: 4.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .service-section--housecleaning .service-half--left {
        padding: 6rem 2rem 10rem;
        border-radius: 0 var(--border-radius-section) 0 0;
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    .service-section--housecleaning .service-half--left {
        padding: 6rem 4rem 10rem;
    }
}

/* 右側エリア */
.service-section--housecleaning .service-half--right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-button-blue);
    padding: 4rem 1.25rem 8rem;
    border-radius: 0;
}

@media (min-width: 576px) {
    .service-section--housecleaning .service-half--right {
        padding: 4rem 2rem 8rem;
    }
}

@media (min-width: 768px) {
    .service-section--housecleaning .service-half--right {
        padding: 4.5rem 2rem 9rem;
    }
}

@media (min-width: 1024px) {
    .service-section--housecleaning .service-half--right {
        border-radius: 0 var(--border-radius-section) 0 0;
        display: flex;
        padding: 6rem 2rem 12rem;
    }
    
    .service-section--housecleaning .service-half--right .service-image {
        width: 100%;
        border-radius: 1rem;
        overflow: hidden;
    }
    
    .service-section--housecleaning .service-half--right .service-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 1200px) {
    .service-section--housecleaning .service-half--right {
        padding: 6rem 4rem 12rem;
    }
}

.housecleaning-section-container {
    width: 100%;
}

.metalwork-section-container {
    width: 100%;
    max-width: 100%; /* 初期状態 */
}

/* 建築板金セクション（緑背景） */
.service-section--metalwork {
    margin-top: -4rem;
    background: transparent; /* SP/タブレットは透明（子要素が背景を持つ） */
    border-radius: var(--border-radius-section) 0 0 var(--border-radius-section);
    z-index: 2;
    position: relative;
}

@media (min-width: 768px) {
    .service-section--metalwork {
        margin-top: -4.5rem;
    }
}

@media (min-width: 1024px) {
    .service-section--metalwork {
        margin-top: -5rem;
        /* background: transparent; のまま（子要素が背景を持つ） */
    }
}

/* 建築板金セクションの左側（画像エリア） */
.service-section--metalwork .service-half--left {
    background: var(--color-button-green);
    padding: 4rem 1.25rem;
    border-radius: 0 0 0 var(--border-radius-section);
    order: 2; /* SP/タブレット時は下側に配置 */
}

@media (min-width: 576px) {
    .service-section--metalwork .service-half--left {
        padding: 4rem 2rem;
    }
}

@media (min-width: 768px) {
    .service-section--metalwork .service-half--left {
        padding: 4.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .service-section--metalwork .service-half--left {
        border-radius: var(--border-radius-section) 0 0 var(--border-radius-section);
        display: flex;
        flex-direction: column; /* キャッチコピーと画像を縦並びに */
        justify-content: center; /* 上詰めで配置 */
        align-items: center; /* 左寄せ */
        padding: 6rem 2rem;
        order: 0; /* PC時は通常の順序（左側） */
    }
}

@media (min-width: 1200px) {
    .service-section--metalwork .service-half--left {
        padding: 6rem 4rem;

    }

}

/* 建築板金セクションの右側（コンテンツエリア） */
.service-section--metalwork .service-half--right {
    background: var(--color-section-light-green); /* 薄い緑 */
    padding: 4rem 1.25rem;
    border-radius: var(--border-radius-section) 0 0 0;
    order: 1; /* SP/タブレット時は上側に配置 */
    width: 100%;
}

.housecleaning-left-wrapper{
    max-width: var(--section-content-width-sm);
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .housecleaning-left-wrapper {
        max-width: var(--section-content-width-md);
    }
}

@media (min-width: 1024px) {
    .housecleaning-left-wrapper {
        max-width: 100%;
    }
}

.metalwork-right-wrapper{
    max-width: var(--section-content-width-sm);
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .metalwork-right-wrapper {
        max-width: var(--section-content-width-md);
    }
}

@media (min-width: 576px) {
    .service-section--metalwork .service-half--right {
        padding: 4rem 2rem;
    }
}

@media (min-width: 768px) {
    .service-section--metalwork .service-half--right {
        padding: 4.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .service-section--metalwork .service-half--right {
        padding: 6rem 2rem;
        border-radius: 0;
        order: 0; /* PC時は通常の順序（右側） */
        width: 50%; /* 横幅いっぱいに背景を表示 */
        max-width: none; /* max-widthの制限を解除 */
    }
    
    /* コンテンツの幅は内側のコンテナで制御 */
    .service-section--metalwork .metalwork-section-container {
        max-width: 100%;
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .service-section--metalwork .service-half--right {
        padding: 6rem 4rem;
    }
}


/* タイトルラッパー（セクション全体の直下） */
.service-section > .service-title-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .service-section > .service-title-wrapper {
        padding: 0 2rem;
        margin-bottom: 3rem;
    }
}

/* 建築板金セクションのタイトルは右寄せ */
.service-section--metalwork > .service-title-wrapper {
    align-items: flex-end;
}

/* コンテナ（タイトルの下に横並びで配置） */
.service-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .service-container {
        flex-direction: row;
        align-items: center;
        gap: 3rem;
    }
}

@media (min-width: 1024px) {
    .service-container {
        gap: 4rem;
    }
}

/* テキストコンテンツ */
.service-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .service-content {
        flex: 1;
    }
}

/* ハウスクリーニングセクションのボタンは常時右側配置 */
.service-section--housecleaning .service-content {
    align-items: flex-end;
}

/* 建築板金セクションのボタンは常時左側配置 */
.service-section--metalwork .service-content {
    align-items: flex-start;
}

/* テキストは左寄せに戻す */
.service-content .service-text {
    align-self: stretch;
}

/* バッジは左寄せに戻す */
.service-content .service-badges {
    align-self: stretch;
}

/* 英語タイトル */
.service-title-en {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-family: var(--font-en);
    font-weight: 400;
    letter-spacing: 0.1em;
    position: relative;
    padding-left: 1rem;
}

/* 左側に丸い装飾を追加 */
.service-title-en::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-53%);
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* 緑背景セクションの英語タイトルを緑に */
.section-title-en--green,
.service-section--metalwork .service-title-en {
    color: var(--color-tertiary);
}

.section-title-en--green::before,
.service-section--metalwork .service-title-en::before {
    background: var(--color-tertiary);
}

@media (min-width: 768px) {
    .service-title-en {
        font-size: 1rem;
    }
}

/* 日本語タイトル */
.service-title-ja {
    color: var(--color-text);
    font-size: 1.75rem;
    font-family: var(--font-ja);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .service-title-ja {
        font-size: 2rem;
    }
}

@media (min-width: 1024px) {
    .service-title-ja {
        font-size: 2.25rem;
    }
}

/* FAQセクションの英語タイトルも緑に */
.faq-intro-section .section-title-en {
    color: var(--color-tertiary);
}

.faq-intro-section .section-title-en::before {
    background: var(--color-tertiary);
}

/* テキスト */
.service-text {
    font-size: var(--body-font-size-sp);
    line-height: var(--body-line-height-sp);
    color: var(--color-text);
    margin-bottom: 1.5rem;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .service-text {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
        margin-bottom: 2rem;
    }
}

/* 対応範囲バッジコンテナ */
.service-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .service-badges {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .service-badges {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* バッジ */
.service-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(46, 123, 181, 0.1); /* --color-primaryの薄い背景 */
    border: 2px solid var(--color-primary);
    padding: 0.625rem 1rem;
    border-radius: 0 1rem 1rem 1rem; /* 左上以外が角丸 */
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .service-badge {
        padding: 0.75rem 1.25rem;
    }
}

/* バッジアイコン */
.service-badge-icon {
    font-size: 1rem;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .service-badge-icon {
        font-size: 1.125rem;
    }
}

/* バッジテキスト */
.service-badge-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .service-badge-text {
        font-size: 0.95rem;
    }
}

/* 建築板金バッジ（全角丸・緑色） */
.service-badge--metalwork {
    background: rgba(102, 193, 142, 0.1); /* --color-secondaryの薄い背景 */
    border: 2px solid var(--color-secondary);
    border-radius: 1rem; /* 全角丸 */
}

.service-badge--metalwork .service-badge-icon {
    color: var(--color-secondary);
}

.service-badge--metalwork .service-badge-text {
    color: var(--color-secondary);
}

/* 画像 */
.service-image {
    flex: 1;
    border-radius: 1rem;
    overflow: hidden;
    margin: 0 auto;
    max-width: var(--section-content-width-sm);
}

@media (min-width: 768px) {
    .service-image {
        max-width: var(--section-content-width-md);
        flex: 1;
    }
}

.service-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (min-width: 768px) {
    .service-image img {
        aspect-ratio: 1 / 1;
    }
}

/* ========================================
   選ばれる三つの理由セクション（カード型）
======================================== */
.reasons-section {
    background: var(--color-section-light-blue);
    padding: var(--section-padding-top-sp) 0 var(--section-padding-bottom-sp);
    border-radius: 0 var(--border-radius-section) var(--border-radius-section) 0;
    position: relative;
    z-index: 2;
    padding: 4rem 1.25rem;
}

@media (min-width: 576px) {
    .reasons-section {
        padding: 4rem 2rem;
    }
}

@media (min-width: 768px) {
    .reasons-section {
        padding: 4.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .reasons-section {
        padding: 6rem 2rem;
    }
}

/* 1200px以上の時だけ最大幅の制限を解除 */
@media (min-width: 1200px) {
    .reasons-section {
        padding: 6rem 4rem; /* 上下6rem、左右4rem */
    }
    
    .reasons-section .section-container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}




/* コンテナ */
.reasons-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .reasons-container {
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem;
    }
}

/* タイトルエリア */
.reasons-title-area {
    width: 100%;
}

@media (min-width: 1024px) {
    .reasons-title-area {
        width: 35%;
        flex-shrink: 0;
        position: sticky;
        top: calc(var(--header-height-lg) + 2rem);
        transition: top 0.1s linear;
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

/* 装飾ドット（PC時のみ表示） */
.reasons-decoration {
    display: none;
}

@media (min-width: 1024px) {
    .reasons-decoration {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
        align-self: center; /* 上下中央配置 */
    }
}

.decoration-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-gray);
    opacity: 1; /* 常時表示 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* POINT 01が表示されている時（1番目のドットが青） */
.decoration-dot[data-point="01"].is-active {
    background: var(--color-primary);
    transform: scale(1.3);
}

/* POINT 02が表示されている時（2番目のドットが緑） */
.decoration-dot[data-point="02"].is-active {
    background: var(--color-button-green);
    transform: scale(1.3);
}

/* POINT 03が表示されている時（3番目のドットが青） */
.decoration-dot[data-point="03"].is-active {
    background: var(--color-primary);
    transform: scale(1.3);
}

.decoration-line {
    width: 2px;
    height: 20px;
    background: var(--color-gray);
    opacity: 1;
}

/* テキストコンテナ */
.reasons-text-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.reasons-title-area .section-title-wrapper {
    text-align: center;
}

@media (min-width: 1024px) {
    .reasons-title-area .section-title-wrapper {
        text-align: left;
        align-items: flex-start;
    }
}

/* 理由説明文 */
.reasons-description {
    font-size: var(--body-font-size-sp);
    line-height: var(--body-line-height-sp);
    color: var(--color-text);
    letter-spacing: var(--body-letter-spacing);
    text-align: left;
}

@media (min-width: 768px) {
    .reasons-description {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
        text-align: center;
    }
}

@media (min-width: 1024px) {
    .reasons-description {
        text-align: left;
    }
}

/* カードコンテナ */
.reasons-cards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .reasons-cards-container {
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .reasons-cards-container {
        width: 65%;
    }
}

/* 理由カード */
.reason-card {
    background: transparent; /* 初期状態は透明 */
    border-radius: 0 1.5rem 1.5rem 1.5rem; /* 左上以外角丸 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0); /* 初期状態は影なし */
    border: 2px solid transparent; /* 初期状態は透明な枠線 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 0.5s→0.3sに短縮 */
    overflow: hidden; /* 画像がカードからはみ出さないように */
}

/* スクロールアニメーション表示状態 */
.reason-card.is-visible {
    background: var(--color-white); /* 白背景 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 影を表示 */
}

/* POINT 01と03の枠線は青に変わる */
.reason-card[data-reason="01"].is-visible,
.reason-card[data-reason="03"].is-visible {
    border-color: var(--color-primary); /* 青の枠線 */
}

/* POINT 02の枠線は緑に変わる */
.reason-card[data-reason="02"].is-visible {
    border-color: var(--color-button-green); /* 緑の枠線 */
}

/* カード画像 */
.reason-card-image {
    width: 100%;
    aspect-ratio: 16 / 9; 
    overflow: hidden;
    position: relative;
}

.reason-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* カード内部 */
.reason-card-inner {
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    position: relative; /* アイコンの絶対位置の基準 */
}

/* カード右上のアイコン背景 */
.reason-card-icon-bg {
    position: absolute;
    top: 2rem;          /* reason-card-innerのpadding-topと一致 */
    right: 1.25rem;     /* reason-card-innerのpadding-rightと一致 */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(46, 123, 181, 0.08); /* 初期状態は透明度の低い青 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

@media (min-width: 375px) {
    .reason-card-icon-bg {
        width: 60px;
        height: 60px;
    }
}

@media (min-width: 475px) {
    .reason-card-icon-bg {
        width: 64px;
        height: 64px;
    }
}

@media (min-width: 576px) {
    .reason-card-icon-bg {
        top: 2rem;      /* padding: 2rem と一致 */
        right: 2rem;    /* padding: 2rem と一致 */
    }
}

@media (min-width: 768px) {
    .reason-card-icon-bg {
        width: 64px;
        height: 64px;
        top: 2.5rem;    /* padding: 2.5rem 2rem のtopと一致 */
        right: 2rem;    /* padding: 2.5rem 2rem のrightと一致 */
    }
}

@media (min-width: 1024px) {
    .reason-card-icon-bg {
        width: 80px;
        height: 80px;
        top: 3rem;      /* padding: 3rem 2.5rem のtopと一致 */
        right: 2.5rem;  /* padding: 3rem 2.5rem のrightと一致 */
    }
}

@media (min-width: 1440px) {
    .reason-card-icon-bg {
        width: 64px;
        height: 64px;
        top: 3.5rem;    /* padding: 3.5rem 3rem のtopと一致 */
        right: 3rem;    /* padding: 3.5rem 3rem のrightと一致 */
    }
}

/* アイコン */
.reason-card-icon-bg i {
    font-size: 1.375rem;
    color: rgba(46, 123, 181, 0.3); /* 初期状態は透明度の低い青 */
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 375px) {
    .reason-card-icon-bg i {
        font-size: 1.5rem;
    }
}

@media (min-width: 475px) {
    .reason-card-icon-bg i {
        font-size: 1.625rem;
    }
}

@media (min-width: 768px) {
    .reason-card-icon-bg i {
        font-size: 1.625rem;  /* 64pxに合わせたサイズ */
    }
}

@media (min-width: 1024px) {
    .reason-card-icon-bg i {
        font-size: 2rem;  /* 80pxに合わせたサイズ */
    }
}

@media (min-width: 1440px) {
    .reason-card-icon-bg i {
        font-size: 1.625rem;  /* 64pxに合わせたサイズ */
    }
}

/* POINT 01と03のアイコンは青に変わる */
.reason-card[data-reason="01"].is-visible .reason-card-icon-bg,
.reason-card[data-reason="03"].is-visible .reason-card-icon-bg {
    background: rgba(46, 123, 181, 0.12); /* 青の背景 */
}

.reason-card[data-reason="01"].is-visible .reason-card-icon-bg i,
.reason-card[data-reason="03"].is-visible .reason-card-icon-bg i {
    color: rgba(46, 123, 181, 0.7); /* 青（控えめな透明度） */
}

/* POINT 02のアイコンは緑に変わる */
.reason-card[data-reason="02"].is-visible .reason-card-icon-bg {
    background: rgba(90, 175, 125, 0.12); /* 緑の背景 */
}

.reason-card[data-reason="02"].is-visible .reason-card-icon-bg i {
    color: rgba(90, 175, 125, 0.7); /* 緑（控えめな透明度） */
}

@media (min-width: 576px) {
    /* 理由カード - 768px以上1024px未満：横並びレイアウト（画像右） */
    .reason-card-inner {
        padding: 2rem;
    }

}

@media (min-width: 768px) {
    /* 理由カード - 768px以上1024px未満：横並びレイアウト（画像右） */
    .reason-card {
        border: 3px solid transparent; /* 初期状態は透明な枠線 */
        display: flex;
        flex-direction: row-reverse; /* 画像を右側に配置 */
        align-items: stretch;
    }

    .reason-card-image {
        width: 50%; /* 画像を半分に */
        aspect-ratio: 1 / 1; /* 正方形に近い比率 */
        flex-shrink: 0;
    }

    .reason-card-inner {
        width: 50%; /* コンテンツエリアも半分に */
        padding: 2.5rem 2rem;
        gap: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center; /* 縦方向中央揃え */
    }
}

@media (min-width: 1024px) {
    /* 1024px以上1200px未満：縦並びに戻す */
    .reason-card {
        display: block;
    }

    .reason-card-image {
        width: 100%;
        aspect-ratio: 2 / 1;
    }

    .reason-card-inner {
        width: 100%;
        padding: 3rem 2.5rem;
        gap: 1.125rem;
    }
}

/* 1440px以上：再び横並びレイアウト（画像右） */
@media (min-width: 1440px) {
    .reason-card {
        display: flex;
        flex-direction: row-reverse; /* 画像を右側に配置 */
        align-items: stretch;
    }

    .reason-card-image {
        width: 50%; /* 画像を半分に */
        aspect-ratio: 4 / 3;
        flex-shrink: 0;
    }

    .reason-card-inner {
        width: 50%; /* コンテンツエリアも半分に */
        padding: 3.5rem 3rem;
        gap: 1.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* カード番号（バッジ） */
.reason-card-number {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-en);
    color: var(--color-white);
    background: var(--color-gray); /* 初期状態はグレー */
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    border-radius: 0 0.75rem 0.75rem 0.75rem; /* 左上以外角丸 */
    display: inline-block;
    width: fit-content;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 0.5s→0.3sに短縮 */
}

@media (min-width: 768px) {
    .reason-card-number {
        font-size: 1rem;
        padding: 0.625rem 1.25rem;
        border-radius: 0 1rem 1rem 1rem;
    }
}

/* POINT 01と03は青に変わる */
.reason-card[data-reason="01"].is-visible .reason-card-number,
.reason-card[data-reason="03"].is-visible .reason-card-number {
    background: var(--color-primary); /* 青 */
}

/* POINT 02は緑に変わる */
.reason-card[data-reason="02"].is-visible .reason-card-number {
    background: var(--color-button-green); /* 緑 */
}

/* カードタイトル */
.reason-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-gray); /* 初期状態はグレー */
    line-height: 1.6;
    letter-spacing: 0.05em;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 0.5s→0.3sに短縮 */
}

@media (min-width: 768px) {
    .reason-card-title {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .reason-card-title {
        font-size: 1.625rem;
    }
}

/* POINT 01と03のタイトルは青に変わる */
.reason-card[data-reason="01"].is-visible .reason-card-title,
.reason-card[data-reason="03"].is-visible .reason-card-title {
    color: var(--color-primary); /* 青 */
}

/* POINT 02のタイトルは緑に変わる */
.reason-card[data-reason="02"].is-visible .reason-card-title {
    color: var(--color-button-green); /* 緑 */
}

/* カード説明文 */
.reason-card-text {
    font-size: 1.05rem;
    line-height: var(--body-line-height-sp);
    color: var(--color-text);
    letter-spacing: var(--body-letter-spacing);
}

@media (min-width: 576px) {
    .reason-card-text {
        font-size: var(--body-font-size-sp);
    }
}

@media (min-width: 768px) {
    .reason-card-text {
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
    }
}

/* ========================================
   よくある質問導入セクション
======================================== */
.faq-intro-section {
    background: var(--color-section-light-green);
    padding: 4rem 1.25rem 4rem;
    border-radius: var(--border-radius-section) var(--border-radius-section) var(--border-radius-section) var(--border-radius-section);
    position: relative;
    z-index: 2;
}



/* 1024px以上でも縦並びを維持 */
.faq-intro-section .section-inner {
    display: block;
}

@media (min-width: 576px) {

    .faq-intro-section {
        padding: 4rem 2rem;
    }
}

@media (min-width: 768px) {

    .faq-intro-section {
        padding: 4.5rem 2rem;
    }
}

@media (min-width: 1024px) {
    .faq-intro-section .section-inner {
        display: block;
    }

    .faq-intro-section {
        padding: 6rem 2rem;
    }
}

.faq-intro-description {
    text-align: left;
    font-size: var(--body-font-size-sp);
    line-height: var(--body-line-height-sp);
    color: var(--color-text);
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .faq-intro-description {
        text-align: center;
        font-size: var(--body-font-size-pc);
        line-height: var(--body-line-height-pc);
        margin-bottom: 3rem;
    }
}

/* よくある質問ページリンクのスタイリング */
.faq-intro-description a {
    color: var(--color-tertiary);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-intro-description a:hover {
    color: var(--color-secondary);
}

/* 質問カードグリッド */
.faq-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
    align-items: start;
}

.faq-cards-grid > * {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    .faq-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        margin-bottom: 3rem;
    }
}

/* 質問カード */
.faq-card {
    background: var(--color-white);
    text-align: center;
    border-radius: 0 0 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* カード上部（アイコンと質問）- 常に表示 */
.faq-card-top {
    background: var(--color-white);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .faq-card-top {
        padding: 2rem 1.5rem;
    }
}

/* カードアイコン */
.faq-card-icon {
    width: 60px;
    height: 60px;
    background: var(--color-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .faq-card-icon {
        width: 70px;
        height: 70px;
    }
}

.faq-card-icon i {
    font-size: 1.75rem;
    color: var(--color-white);
}

@media (min-width: 768px) {
    .faq-card-icon i {
        font-size: 2rem;
    }
}

/* カード質問テキスト */
.faq-card-question {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .faq-card-question {
        font-size: 1.25rem;
    }
}

/* カード下部（緑背景エリア） */
.faq-card-bottom {
    background: var(--color-tertiary);
    padding: 1.5rem;
    border-radius: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: gap 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    .faq-card-bottom {
        padding: 1.75rem 2rem;
    }
}

/* 開いているときはギャップを追加 */
.faq-card.is-open .faq-card-bottom {
    gap: 1.5rem;
}

/* --- メインFAQ 回答エリアの修正 --- */

.faq-card-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* transition時間を0.45sに統一し、サブと動きを合わせます */
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 【重要】ここから max-height: 500px; を削除しました */
/* これがあるとJSの計算と競合してガタつきの原因になります */
.faq-card.is-open .faq-card-answer {
    opacity: 1;
}

/* テキストボックスのスタイル調整 */
.faq-answer-text {
    display: block; /* 高さを正確に測るため */
    width: auto;
    font-size: 0.95rem;
    line-height: var(--body-line-height-sp);
    color: var(--color-text);
    text-align: left;
    background: var(--color-white);
    padding: 1.25rem;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* 狭い画面でのテキスト突き抜け防止 */
    word-break: break-all;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .faq-answer-text {
        font-size: 0.975rem;
        line-height: var(--body-line-height-pc);
        padding: 1.5rem;
    }
}

/* 回答の「A.」ラベル */
.answer-label {
    color: var(--color-tertiary); /* 緑色 */
    font-weight: 700;
}

/* 回答を見るボタン */
.faq-card-toggle {
    width: 100%;
    background: var(--color-white);
    color: var(--color-tertiary);
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    .faq-card-toggle {
        padding: 0.875rem 1.5rem;
        font-size: 1.05rem;
    }
}

.faq-card-toggle:hover {
    background: var(--color-light-green-bg);
}

.faq-card-toggle:active {
    transform: scale(0.98);
}

.faq-toggle-icon {
    font-size: 0.875rem;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 開いている状態 */
.faq-card.is-open .faq-toggle-icon {
    transform: rotate(180deg);
}

/* ボタンエリア */
.faq-intro-button {
    text-align: center;
}

@media (min-width: 768px) {
    .faq-intro-button {
        margin-top: 0.5rem;
    }
}



/* ========================================
   セクション区切り
======================================== */
.section-divider {
    width: 100%;
    height: 360px;
    position: relative;
    background: transparent;
    z-index: 1;
}

@media (min-width: 768px) {
    .section-divider {
        height: 560px;
    }
}

@media (min-width: 1024px) {
    .section-divider {
        height: 640px;
    }
}

@media (min-width: 1200px) {
    .section-divider {
        height: 680px;
    }
}

@media (min-width: 1440px) {
    .section-divider {
        height: 720px;
    }
}

/* 各区切りに個別のスタイルを設定可能 */
.section-divider-01 {
    /* FVとサービスグループの間 */
    margin-top: -18rem; /* -288px */
    margin-bottom: -3.5rem;
    /* FVと同じprimaryとsecondaryの2色グラデーション */
    background: var(--gradient-divider-01);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: -1;
    /* -18rem(288px) + 視認したい高さ320px = 608px */
    height: 608px;
    /* 視認領域の中央に配置するため、隠れている部分(288px)分だけ下に移動 */
    padding-top: 224px;
}

@media (min-width: 768px) {
    .section-divider-01 {
        /* -18rem(288px) + 視認したい高さ400px = 688px */
        height: 738px;
        padding-top: 224px;
        margin-bottom: -6.5rem;
    }
}

@media (min-width: 1024px) {
    .section-divider-01 {
        /* -18rem(288px) + 視認したい高さ480px = 768px */
        height: 818px;
        padding-top: 180px;
    }
}

@media (min-width: 1200px) {
    .section-divider-01 {
        /* -18rem(288px) + 視認したい高さ480px = 768px */
        height: 858px;
    }
}

@media (min-width: 1440px) {
    .section-divider-01 {
        /* -18rem(288px) + 視認したい高さ480px = 768px */
        height: 898px;
    }
}

.section-divider-02 {
    /* サービスグループと理由グループの間 - 濃い青グラデーション */
    background: var(--gradient-divider-02);
    margin-top: -3.5rem;
    margin-bottom: -3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .section-divider-02 {
        margin-top: -6.5rem;
        margin-bottom: -6.5rem;
    }
}

.section-divider-03 {
    /* 理由グループとよくある質問セクションの間 - 濃い緑グラデーション */
    background: var(--gradient-divider-03);
    margin-top: -3.5rem;
    margin-bottom: -3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .section-divider-03 {
        margin-top: -6.5rem;
        margin-bottom: -6.5rem;
    }
}

.section-divider-04 {
    /* 背景画像を指定 */
    background-image: url('../images/divider-bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    
    margin-top: -3.5rem;
    margin-bottom: -3.5rem;
    
    /* テキスト表示用 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 桃色フィルターとグラデーションオーバーレイ */
    position: relative;
}

.section-divider-04::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* サイトカラーと桜を調和させたグラデーションオーバーレイ */
    background: linear-gradient(
        135deg, 
        rgb(46, 123, 181) 0%,        /* サイトカラー（青）- 春の空 */
        rgb(151, 153, 187) 20%,      /* 青とピンクの中間色 - 薄紫 */
        rgb(255, 182, 193) 40%,      /* 淡いピンク - 桜 */
        rgb(255, 192, 203) 60%,      /* 柔らかいピンク - 桜の中心 */
        rgb(179, 193, 173) 80%,      /* ピンクと緑の中間色 - ミントグリーン */
        rgb(102, 193, 142) 100%      /* サイトカラー（緑）- 新緑 */
    );
    opacity: 0.275;
    pointer-events: none;
    z-index: 1;
}

.section-divider-04 .section-divider-content {
    position: relative;
    z-index: 2;
}

.sectioin-divider-04 .section-divider-content .section-divider-ja {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sectioin-divider-04 .section-divider-content .section-divider-en {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) {
    .section-divider-04 {
        margin-top: -6.5rem;
        margin-bottom: -5.5rem;
    }
}

/* セクション区切りコンテンツ */
.section-divider-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .section-divider-content {
        gap: 0.75rem;
    }
}

/* 英語タイトル */
.section-divider-en {
    color: var(--color-contact-bg);
    font-size: 2rem;
    font-family: var(--font-en);
    font-weight: 700;
    letter-spacing: 0.1em;
}

@media (min-width: 768px) {
    .section-divider-en {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .section-divider-en {
        font-size: 4rem;
    }
}

/* 日本語サブタイトル */
.section-divider-ja {
    color: var(--color-contact-bg);
    font-size: 0.975rem;
    font-family: var(--font-ja);
    font-weight: 500;
    letter-spacing: 0.1em;
}

@media (min-width: 768px) {
    .section-divider-ja {
        font-size: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .section-divider-ja {
        font-size: 1.425rem;
    }
}

/* 日本語サブタイトルの横棒（疑似要素） */
.section-divider-ja::before,
.section-divider-ja::after {
    content: '';
    display: inline-block;
    width: 0; /* 初期状態は幅0 */
    height: 2px;
    background: var(--color-contact-bg);
    vertical-align: middle;
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    /* 日本語サブタイトルの横棒（疑似要素） */
.section-divider-ja::before,
.section-divider-ja::after {
    height: 3px;
    border-radius: 3px;
}
}

/* スクロールアニメーション表示状態 */
.section-divider.is-visible .section-divider-ja::before,
.section-divider.is-visible .section-divider-ja::after {
    width: 24px; /* スマホサイズ */
}

@media (min-width: 768px) {
    .section-divider.is-visible .section-divider-ja::before,
    .section-divider.is-visible .section-divider-ja::after {
        width: 32px; /* タブレットサイズ */
    }
}

@media (min-width: 1024px) {
    .section-divider.is-visible .section-divider-ja::before,
    .section-divider.is-visible .section-divider-ja::after {
        width: 40px; /* PCサイズ */
    }
}

.section-divider-ja::before {
    margin-right: 0.75rem;
}

.section-divider-ja::after {
    margin-left: 0.75rem;
}

/* ========================================
   ハウスクリーニング キャッチコピー（レスポンシブ＆FVアニメ継承）
   ======================================== */

.housecleaning-catchcopy {
    container-type: inline-size;
    width: 100%;
    max-width: var(--section-content-width-sm);
    margin: 0 auto 2rem;
    box-sizing: border-box;
}

.housecleaning-catchcopy-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2cqi;
    width: 100%;
}

.housecleaning-catchcopy-box {
    flex: 1; 
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    padding: 0.4rem 0.1rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
    
    /* 初期状態：FVと同じく下に30pxずらして透明に */
    opacity: 0;
    transform: translateY(30px);
}

/* スクロール監視クラスが付与されたら作動 */
.housecleaning-catchcopy.is-visible .housecleaning-catchcopy-box {
    animation: slideUpFadeIn 0.8s ease-out forwards;
}

/* アニメーション遅延：画面侵入後0.5s + FVリズム */
.housecleaning-catchcopy.is-visible .housecleaning-catchcopy-box:nth-child(1) { animation-delay: 0s; }
.housecleaning-catchcopy.is-visible .housecleaning-catchcopy-box:nth-child(2) { animation-delay: 0.3s; }
.housecleaning-catchcopy.is-visible .housecleaning-catchcopy-box:nth-child(3) { animation-delay: 0.6s; }

.housecleaning-catchcopy-text {
    display: block;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.2;
    color: #5A5A5A;
    text-align: center;
    /* 320px〜374px */
    font-size: clamp(0.65rem, 3.2cqi, 0.8rem);
}

/* --- 375px以上のブレークポイント --- */
@media (min-width: 375px) {
    .housecleaning-catchcopy-box { padding: 0.5rem 0.2rem; }
    .housecleaning-catchcopy-text { font-size: clamp(0.8rem, 3.4cqi, 1.0rem); }
}

/* --- 768px以上のブレークポイント --- */
@media (min-width: 768px) {
    .housecleaning-catchcopy { max-width: var(--section-content-width-md); }
    .housecleaning-catchcopy-box { padding: 0.6rem 0.5rem; }
    .housecleaning-catchcopy-text { font-size: clamp(1.0rem, 4cqi, 1.5rem); }
}

/* --- 1024px以上のブレークポイント --- */
@media (min-width: 1024px) {
    .housecleaning-catchcopy { max-width: 100%;}
    .housecleaning-catchcopy-box { padding: 0.55rem 0.5rem; }
    .housecleaning-catchcopy-text { font-size: clamp(0.9rem, 3.5cqi, 1.35rem); }
}

/* ハウスクリーニング用のアクセントカラーがあればここを調整 */
.housecleaning-catchcopy-gradient {
    color: var(--color-button-blue); /* 板金と同じ緑を使用 */
}

/* ========================================
   建築板金キャッチコピー（FVアニメーション継承版）
   ======================================== */

   .metalwork-catchcopy {
    container-type: inline-size;
    width: 100%;
    max-width: var(--section-content-width-sm);
    margin: 0 auto 2rem;
    box-sizing: border-box;
}

.metalwork-catchcopy-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.2cqi;
    width: 100%;
}

.metalwork-catchcopy-box {
    flex: 1; 
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    padding: 0.4rem 0.1rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    box-sizing: border-box;
    
    /* 初期状態：FVと同じく下に30pxずらして透明に */
    opacity: 0;
    transform: translateY(30px);
}

/* 画面内に入って .is-visible クラスがついたらアニメーション開始 */
.metalwork-catchcopy.is-visible .metalwork-catchcopy-box {
    /* FVと同じ slideUpFadeIn アニメーションを使用 */
    animation: slideUpFadeIn 0.8s ease-out forwards;
}

/* アニメーション遅延：
   画面侵入後の待機(0.5s) + FVの各行ディレイ(0.3s / 0.7s / 1.1s)
*/
.metalwork-catchcopy.is-visible .metalwork-catchcopy-box:nth-child(1) { 
    animation-delay: 0s; 
}
.metalwork-catchcopy.is-visible .metalwork-catchcopy-box:nth-child(2) { 
    animation-delay: 0.3s; 
}
.metalwork-catchcopy.is-visible .metalwork-catchcopy-box:nth-child(3) { 
    animation-delay: 0.6s; 
}

/* --- スタイル維持（フォントサイズ等） --- */
.metalwork-catchcopy-text {
    display: block;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.2;
    color: #5A5A5A;
    text-align: center;
    font-size: clamp(0.65rem, 3.2cqi, 0.8rem);
}

@media (min-width: 375px) {
    .metalwork-catchcopy-box { padding: 0.5rem 0.2rem; }
    .metalwork-catchcopy-text { font-size: clamp(0.8rem, 3.4cqi, 1.0rem); }
}

@media (min-width: 768px) {
    .metalwork-catchcopy { max-width: var(--section-content-width-md); }
    .metalwork-catchcopy-box { padding: 0.6rem 0.5rem; }
    .metalwork-catchcopy-text { font-size: clamp(1.0rem, 4cqi, 1.5rem); }
}

@media (min-width: 1024px) {
    .metalwork-catchcopy { max-width: 100%;}
    .metalwork-catchcopy-box { padding: 0.55rem 0.5rem; }
    .metalwork-catchcopy-text { font-size: clamp(0.9rem, 3.5cqi, 1.35rem); }
}

.metalwork-catchcopy-gradient {
    color: var(--color-button-green);
}

/* アニメーション定義（FVと同じものがある場合は共通でOK） */
@keyframes slideUpFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   建築板金画像グリッド (2x2)
======================================== */
.metalwork-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    width: 100%;
    max-width: var(--section-content-width-sm);
    margin: 0 auto;
}

@media (min-width: 475px) {
    .metalwork-image-grid {
        gap: 1rem;
    }
}



@media (min-width: 576px) {
    .metalwork-image-grid {
        gap: 1.25rem;
    }
}


@media (min-width: 768px) {
    .metalwork-image-grid {
        max-width: var(--section-content-width-md);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .metalwork-image-grid {
        max-width: 100%;
        gap: 1.5rem;
    }
}

/* グリッドアイテム */
.metalwork-grid-item {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--color-white); /* 白い枠線を追加 */
}

@media (min-width: 1024px) {
    .metalwork-grid-item {
        border-radius: 1rem;
        aspect-ratio: 4 / 3;
    }
}

.metalwork-grid-item:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.metalwork-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================================
   ハウスクリーニング画像スライダー
======================================== */
.housecleaning-slider-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: var(--section-content-width-sm);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .housecleaning-slider-wrapper {
        gap: 1.5rem;
        max-width: var(--section-content-width-md);
    }
}

@media (min-width: 1024px) {
    .housecleaning-slider-wrapper {
        max-width: 100%;
    }
}

/* 各スライダー行 */
.housecleaning-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0.5rem 0; /* 上下にパディングを追加してホバー時の拡大に対応 */
}

/* スライダートラック */
.housecleaning-slider-track {
    display: flex;
    align-items: center; /* 画像を中央配置 */
    gap: 1rem;
    width: fit-content;
}

@media (min-width: 768px) {
    .housecleaning-slider-track {
        gap: 1.5rem;
    }
}

/* 左から右へのアニメーション */
.housecleaning-slider-track--ltr {
    animation: slideLeftToRight 40s linear infinite;
}

/* 右から左へのアニメーション */
.housecleaning-slider-track--rtl {
    animation: slideRightToLeft 40s linear infinite;
}

/* スライダーアイテム */
.housecleaning-slider-item {
    flex-shrink: 0;
    width: 200px;
    height: 150px;
    border-radius: 0 0.75rem 0.75rem 0.75rem; /* 左上以外が角丸 */
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--color-white); /* 白い枠線を追加 */
}

@media (min-width: 768px) {
    .housecleaning-slider-item {
        width: 240px;
        height: 180px;
        border-radius: 0 1rem 1rem 1rem; /* 左上以外が角丸 */
    }
}

@media (min-width: 1024px) {
    .housecleaning-slider-item {
        width: 280px;
        height: 210px;
    }
}

.housecleaning-slider-item:hover {
    transform: scale(1.03); /* 拡大率を小さくして見切れを防止 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* 偶数番目の画像を少し小さく */
.housecleaning-slider-item:nth-child(even) {
    width: 180px;
    height: 135px;
}

@media (min-width: 768px) {
    .housecleaning-slider-item:nth-child(even) {
        width: 220px;
        height: 165px;
    }
}

@media (min-width: 1024px) {
    .housecleaning-slider-item:nth-child(even) {
        width: 260px;
        height: 195px;
    }
}

.housecleaning-slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* 画像の中央を基準にトリミング */
    display: block;
    min-width: 100%; /* 横幅を必ず100%に */
    min-height: 100%; /* 縦幅を必ず100%に */
}

/* アニメーション定義 */
@keyframes slideLeftToRight {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}