/* ========================================
   Full Wrapping Page Styles - フルラッピングページのスタイル
   ========================================
   フルラッピング専用ページのデザイン設定
======================================== */

/* ========================================
   Page Header Section - ページヘッダーセクション
   ========================================
   ページタイトルとパンくずリストの表示
======================================== */

/* ページヘッダーの基本設定：パディング、背景グラデーション */
.pageHeaderSection {
    padding: 8rem 0 4rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(147, 112, 219, 0.1));
    text-align: center;
    
    /* ページヘッダーコンテンツ */
    .pageHeaderContent {
        /* ページタイトル：大きなフォント、グラデーション文字 */
        .pageTitle {
            font-size: clamp(2rem, 5vw, 3rem);
            background: linear-gradient(135deg, #D4AF37, #9370DB);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
          margin-top: 100px;
            font-weight: 700;
        }
        
        /* ページサブタイトル */
        .pageSubtitle {
            font-size: 1.3rem;
            color: #666;
            margin-bottom: 2rem;
            font-weight: 300;
        }
        
        /* パンくずリスト：ナビゲーション補助 */
        .breadcrumb {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.9rem;
            color: #888;
            
            /* パンくずリンク */
            a {
                color: #6B46C1;
                transition: color 0.3s ease;
                
                &:hover {
                    color: #D4AF37;
                }
            }
            
            /* 区切り文字 */
            span {
                color: #888;
            }
        }
    }
}

/* ========================================
   Service Description Section - サービス説明セクション
   ========================================
   フルラッピングサービスの詳細説明
======================================== */

/* サービス説明セクションの基本設定 */
.serviceDescriptionSection {
    padding: 5rem 0;
    position: relative;
    
    /* 背景画像の設定：疑似要素で実装、カスタマイズ可能 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 背景画像URL（こちらで変更可能） */
        background-image: url('../images/106.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 画像の透明度（0.0-1.0で調整可能） */
        opacity: 0.5;
        pointer-events: none;
        z-index: -2;
    }
    
    /* 色オーバーレイの設定：疑似要素で実装、カスタマイズ可能 */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* オーバーレイ色（RGBA形式で指定、こちらで変更可能） */
        --overlay-color-1: rgba(255, 255, 255, 0.8);   /* 白色ベース */
        --overlay-color-2: rgba(212, 175, 55, 0.1);    /* 薄い金色 */
        
        /* グラデーションオーバーレイ */
        background: linear-gradient(135deg, var(--overlay-color-1), var(--overlay-color-2));
        
        /* 単色オーバーレイを使用する場合は以下のコメントアウトを外して上記をコメントアウト */
        /* background: rgba(255, 255, 255, 0.85); */
        
        pointer-events: none;
        z-index: -1;
    }
    
    /* サービス説明コンテンツ：2カラムレイアウト */
    .serviceDescriptionContent {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
        align-items: center;
        position: relative;
        z-index: 1;
        
        /* 説明テキスト部分 */
        .descriptionText {
            /* サービス概要 */
            .serviceOverview {
                font-size: 1.1rem;
                color: #555;
                line-height: 1.8;
                margin-bottom: 3rem;
            }
            
            /* サービス特徴セクション */
            .serviceFeatures {
                h3 {
                    color: #6B46C1;
                    margin-bottom: 2rem;
                    font-size: 1.5rem;
                }
                
                /* 特徴リスト：フレックスレイアウト */
                .featureList {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                    
                    /* 個別の特徴項目 */
                    li {
                        display: flex;
                        align-items: flex-start;
                        gap: 1rem;
                        
                        /* 特徴アイコン */
                        .featureIcon {
                            width: 60px;
                            height: 60px;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        
                        /* 特徴コンテンツ */
                        .featureContent {
                            h4 {
                                color: #6B46C1;
                                margin-bottom: 0.5rem;
                                font-size: 1.1rem;
                            }
                            
                            p {
                                color: #666;
                                margin: 0;
                                line-height: 1.6;
                            }
                        }
                    }
                }
            }
        }
        
        /* 説明画像部分 */
        .descriptionImage {
            figure {
                overflow: hidden;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                
                img {
                    width: 100%;
                    height: auto;
                    transition: transform 0.3s ease;
                }
                
                /* 画像キャプション */
                figcaption {
                    padding: 1rem;
                    background: #f8f9fa;
                    text-align: center;
                    color: #666;
                    font-size: 0.9rem;
                }
                
                /* ホバー時の画像拡大 */
                &:hover img {
                    transform: scale(1.05);
                }
            }
        }
    }
}


/* ========================================
   Service Description Section - サービス説明セクション2
   ========================================
   フルラッピングサービスの詳細説明
======================================== */

/* サービス説明セクションの基本設定 */
.serviceDescriptionSection2 {
    padding: 5rem 0;
    position: relative;
    
    /* 背景画像の設定：疑似要素で実装、カスタマイズ可能 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 背景画像URL（こちらで変更可能） */
        background-image: url('../images/102.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 画像の透明度（0.0-1.0で調整可能） */
        opacity: 0.5;
        pointer-events: none;
        z-index: -2;
    }
    
    /* 色オーバーレイの設定：疑似要素で実装、カスタマイズ可能 */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* オーバーレイ色（RGBA形式で指定、こちらで変更可能） */
        --overlay-color-1: rgba(255, 255, 255, 0.8);   /* 白色ベース */
        --overlay-color-2: rgba(212, 175, 55, 0.1);    /* 薄い金色 */
        
        /* グラデーションオーバーレイ */
        background: linear-gradient(135deg, var(--overlay-color-1), var(--overlay-color-2));
        
        /* 単色オーバーレイを使用する場合は以下のコメントアウトを外して上記をコメントアウト */
        /* background: rgba(255, 255, 255, 0.85); */
        
        pointer-events: none;
        z-index: -1;
    }
    
    /* サービス説明コンテンツ：2カラムレイアウト */
    .serviceDescriptionContent {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
        align-items: center;
        position: relative;
        z-index: 1;
        
        /* 説明テキスト部分 */
        .descriptionText {
            /* サービス概要 */
            .serviceOverview {
                font-size: 1.1rem;
                color: #555;
                line-height: 1.8;
                margin-bottom: 3rem;
            }
            
            /* サービス特徴セクション */
            .serviceFeatures {
                h3 {
                    color: #6B46C1;
                    margin-bottom: 2rem;
                    font-size: 1.5rem;
                }
                
                /* 特徴リスト：フレックスレイアウト */
                .featureList {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                    
                    /* 個別の特徴項目 */
                    li {
                        display: flex;
                        align-items: flex-start;
                        gap: 1rem;
                        
                        /* 特徴アイコン */
                        .featureIcon {
                            width: 60px;
                            height: 60px;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        
                        /* 特徴コンテンツ */
                        .featureContent {
                            h4 {
                                color: #6B46C1;
                                margin-bottom: 0.5rem;
                                font-size: 1.1rem;
                            }
                            
                            p {
                                color: #666;
                                margin: 0;
                                line-height: 1.6;
                            }
                        }
                    }
                }
            }
        }
        
        /* 説明画像部分 */
        .descriptionImage {
            figure {
                overflow: hidden;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                
                img {
                    width: 100%;
                    height: auto;
                    transition: transform 0.3s ease;
                }
                
                /* 画像キャプション */
                figcaption {
                    padding: 1rem;
                    background: #f8f9fa;
                    text-align: center;
                    color: #666;
                    font-size: 0.9rem;
                }
                
                /* ホバー時の画像拡大 */
                &:hover img {
                    transform: scale(1.05);
                }
            }
        }
    }
}



/* サービス説明セクションの基本設定 */
.serviceDescriptionSection3 {
    padding: 5rem 0;
    position: relative;
    
    /* 背景画像の設定：疑似要素で実装、カスタマイズ可能 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 背景画像URL（こちらで変更可能） */
        background-image: url('../images/139.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 画像の透明度（0.0-1.0で調整可能） */
        opacity: 0.2;
        pointer-events: none;
        z-index: -2;
    }
    
    /* 色オーバーレイの設定：疑似要素で実装、カスタマイズ可能 */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* オーバーレイ色（RGBA形式で指定、こちらで変更可能） */
        --overlay-color-1: rgba(255, 255, 255, 0.8);   /* 白色ベース */
        --overlay-color-2: rgba(212, 175, 55, 0.1);    /* 薄い金色 */
        
        /* グラデーションオーバーレイ */
        background: linear-gradient(135deg, var(--overlay-color-1), var(--overlay-color-2));
        
        /* 単色オーバーレイを使用する場合は以下のコメントアウトを外して上記をコメントアウト */
        /* background: rgba(255, 255, 255, 0.85); */
        
        pointer-events: none;
        z-index: -1;
    }
    
    /* サービス説明コンテンツ：2カラムレイアウト */
    .serviceDescriptionContent {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4rem;
        align-items: center;
        position: relative;
        z-index: 1;
      text-align: center;
        
        /* 説明テキスト部分 */
        .descriptionText {
            /* サービス概要 */
            .serviceOverview {
                font-size: 1.1rem;
                color: #555;
                line-height: 1.8;
                margin-bottom: 3rem;
              text-align: center;
            }
            
            /* サービス特徴セクション */
            .serviceFeatures {
                h3 {
                    color: #6B46C1;
                    margin-bottom: 2rem;
                    font-size: 1.5rem;
                }
                
                /* 特徴リスト：フレックスレイアウト */
                .featureList {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                    
                    /* 個別の特徴項目 */
                    li {
                        display: flex;
                        align-items: flex-start;
                        gap: 1rem;
                        
                        /* 特徴アイコン */
                        .featureIcon {
                            width: 60px;
                            height: 60px;
                            flex-shrink: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        
                        /* 特徴コンテンツ */
                        .featureContent {
                            h4 {
                                color: #6B46C1;
                                margin-bottom: 0.5rem;
                                font-size: 1.1rem;
                            }
                            
                            p {
                                color: #666;
                                margin: 0;
                                line-height: 1.6;
                            }
                        }
                    }
                }
            }
        }
        
        /* 説明画像部分 */
        .descriptionImage {
            figure {
                overflow: hidden;
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                
                img {
                    width: 100%;
                    height: auto;
                    transition: transform 0.3s ease;
                }
                
                /* 画像キャプション */
                figcaption {
                    padding: 1rem;
                    background: #f8f9fa;
                    text-align: center;
                    color: #666;
                    font-size: 0.9rem;
                }
                
                /* ホバー時の画像拡大 */
                &:hover img {
                    transform: scale(1.05);
                }
            }
        }
    }
}


/* ========================================
   Bottle Templates Section - ボトルテンプレートセクション
   ========================================
   対応ボトル形状の表示
======================================== */

/* ボトルテンプレートセクションの基本設定 */
.bottleTemplatesSection {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(147, 112, 219, 0.05));
    
    /* テンプレートグリッド：レスポンシブ対応 */
    .templatesGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        
        /* 個別のテンプレートカード */
        .templateCard {
            background: white;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            
            /* ホバー時：上に移動、シャドウ強化 */
            &:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            }
            
            /* テンプレート画像 */
            .templateImage {
                position: relative;
                overflow: hidden;
                
                img {
                    width: 100%;
                    height: auto;
                    transition: transform 0.3s ease;
                }
                
                /* ホバー時の画像拡大 */
                &:hover img {
                    transform: scale(1.1);
                }
            }
            
            /* テンプレート情報 */
            .templateInfo {
                padding: 1.5rem;
                
                /* テンプレート名 */
                .templateName {
                    color: #6B46C1;
                    margin-bottom: 0.5rem;
                    font-size: 1.2rem;
                }
                
                /* テンプレート説明 */
                .templateDescription {
                    color: #666;
                    margin-bottom: 1rem;
                    line-height: 1.6;
                }
                
                /* テンプレート仕様 */
                .templateSpecs {
                    display: flex;
                    gap: 1rem;
                    
                    .spec {
                        background: #f8f9fa;
                        padding: 0.3rem 0.8rem;
                        border-radius: 20px;
                        font-size: 0.8rem;
                        color: #666;
                    }
                }
            }
        }
    }
}

/* ========================================
   Pattern Templates Section - パターンテンプレートセクション
   ========================================
   デザインパターンの表示
======================================== */

/* パターンテンプレートセクションの基本設定 */
.patternTemplatesSection {
    padding: 5rem 0;
    position: relative;
    
    /* 背景画像の設定：疑似要素で実装、カスタマイズ可能 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 背景画像URL（こちらで変更可能） */
        background-image: url('../images/135.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 画像の透明度（0.0-1.0で調整可能） */
        opacity: 0.8;
        pointer-events: none;
        z-index: -2;
    }
    
    /* 色オーバーレイの設定：疑似要素で実装、カスタマイズ可能 */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* オーバーレイ色（RGBA形式で指定、こちらで変更可能） */
        --overlay-color-1: rgba(255, 255, 255, 0.9);   /* 白色ベース */
        --overlay-color-2: rgba(147, 112, 219, 0.05);  /* 薄い紫色 */
        
        /* グラデーションオーバーレイ */
        background: linear-gradient(135deg, var(--overlay-color-1), var(--overlay-color-2));
        
        /* 単色オーバーレイを使用する場合は以下のコメントアウトを外して上記をコメントアウト */
        /* background: rgba(255, 255, 255, 0.9); */
        
        pointer-events: none;
        z-index: -1;
    }
    
    /* パターンカテゴリー */
    .patternCategories {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        position: relative;
        z-index: 1;
        
        /* 個別のパターンカテゴリー */
        .patternCategory {
            /* カテゴリータイトル */
            .categoryTitle {
                color: #6B46C1;
                font-size: 1.8rem;
                margin-bottom: 2rem;
                text-align: center;
                position: relative;
                
                /* タイトル下の装飾線 */
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 60px;
                    height: 3px;
                    background: linear-gradient(90deg, #D4AF37, #9370DB);
                }
            }
            
            /* パターングリッド */
            .patternsGrid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1.5rem;
                
                /* 個別のパターンカード */
                .patternCard {
                    background: white;
                    overflow: hidden;
                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
                    transition: all 0.3s ease;
                    
                    /* ホバー時：拡大、シャドウ強化 */
                    &:hover {
                        transform: scale(1.05);
                        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                    }
                    
                    /* パターン画像 */
                    .patternImage {
                        position: relative;
                        overflow: hidden;
                        
                        img {
                            width: 100%;
                            height: auto;
                            transition: transform 0.3s ease;
                        }
                    }
                    
                    /* パターン情報 */
                    .patternInfo {
                        padding: 1rem;
                        
                        /* パターン名 */
                        .patternName {
                            color: #6B46C1;
                            margin-bottom: 0.5rem;
                            font-size: 1rem;
                        }
                        
                        /* パターン説明 */
                        .patternDescription {
                            color: #666;
                            font-size: 0.9rem;
                            margin: 0;
                            line-height: 1.5;
                        }
                    }
                }
            }
        }
    }
}

/* ========================================
   Pattern Templates Section - パターンテンプレートセクション2
   ========================================
   デザインパターンの表示
======================================== */

/* パターンテンプレートセクションの基本設定 */
.patternTemplatesSection2 {
    padding: 5rem 0;
    position: relative;
    
    /* 背景画像の設定：疑似要素で実装、カスタマイズ可能 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 背景画像URL（こちらで変更可能） */

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 画像の透明度（0.0-1.0で調整可能） */
        opacity: 0.8;
        pointer-events: none;
        z-index: -2;
    }
    
    /* 色オーバーレイの設定：疑似要素で実装、カスタマイズ可能 */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* オーバーレイ色（RGBA形式で指定、こちらで変更可能） */
        --overlay-color-1: rgba(255, 255, 255, 0.9);   /* 白色ベース */
        --overlay-color-2: rgba(147, 112, 219, 0.05);  /* 薄い紫色 */
        
        /* グラデーションオーバーレイ */
        background: linear-gradient(135deg, var(--overlay-color-1), var(--overlay-color-2));
        
        /* 単色オーバーレイを使用する場合は以下のコメントアウトを外して上記をコメントアウト */
        /* background: rgba(255, 255, 255, 0.9); */
        
        pointer-events: none;
        z-index: -1;
    }
    
    /* パターンカテゴリー */
    .patternCategories {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        position: relative;
        z-index: 1;
        
        /* 個別のパターンカテゴリー */
        .patternCategory {
            /* カテゴリータイトル */
            .categoryTitle {
                color: #6B46C1;
                font-size: 1.8rem;
                margin-bottom: 2rem;
                text-align: center;
                position: relative;
                
                /* タイトル下の装飾線 */
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 60px;
                    height: 3px;
                    background: linear-gradient(90deg, #D4AF37, #9370DB);
                }
            }
            
            /* パターングリッド */
            .patternsGrid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1.5rem;
                
                /* 個別のパターンカード */
                .patternCard {
                    background: white;
                    overflow: hidden;
                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
                    transition: all 0.3s ease;
                    
                    /* ホバー時：拡大、シャドウ強化 */
                    &:hover {
                        transform: scale(1.05);
                        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                    }
                    
                    /* パターン画像 */
                    .patternImage {
                        position: relative;
                        overflow: hidden;
                        
                        img {
                            width: 100%;
                            height: auto;
                            transition: transform 0.3s ease;
                        }
                    }
                    
                    /* パターン情報 */
                    .patternInfo {
                        padding: 1rem;
                        
                        /* パターン名 */
                        .patternName {
                            color: #6B46C1;
                            margin-bottom: 0.5rem;
                            font-size: 1rem;
                        }
                        
                        /* パターン説明 */
                        .patternDescription {
                            color: #666;
                            font-size: 0.9rem;
                            margin: 0;
                            line-height: 1.5;
                        }
                    }
                }
            }
        }
    }
}

/* ========================================
   Pricing Section - 料金セクション
   ========================================
   料金プランの表示
======================================== */

/* 料金セクションの基本設定 */
.pricingSection {
    padding: 5rem 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(147, 112, 219, 0.05));
    
    /* 料金グリッド */
    .pricingGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        
        /* 個別の料金カード */
        .pricingCard {
            background: white;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            
            /* ホバー時：上に移動 */
            &:hover {
                transform: translateY(-10px);
            }
            
            /* 人気プラン：特別なスタイル */
            &.featured {
                border: 3px solid #D4AF37;
                transform: scale(1.05);
                
                /* 人気バッジ */
                .popularBadge {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    background: linear-gradient(135deg, #D4AF37, #9370DB);
                    color: white;
                    padding: 0.5rem 1rem;
                    border-radius: 20px;
                    font-size: 0.8rem;
                    font-weight: 600;
                }
            }
            
            /* 料金ヘッダー */
            .pricingHeader {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                text-align: center;
                background: linear-gradient(135deg, rgba(107, 70, 193, 0.05), rgba(147, 112, 219, 0.05));

                
                /* プラン名 */
                .planName {
                    color: #6B46C1;
                    font-size: 2rem;
                    margin: 2rem 0;
                    padding: 0 1rem;
                }
                
                /* プラン料金 */
                .planPrice {
                    display: flex;
                    justify-content: center;
                    align-items: baseline;
                    gap: 0.5rem;
                    margin: 0;
                    padding: 0 1rem 1rem;
                    
                    .price {
                        font-size: 2.5rem;
                        font-weight: 700;
                        color: #D4AF37;
                    }
                    
                    .unit {
                        color: #666;
                        font-size: 1rem;
                    }
                }
            }
            
            /* 料金コンテンツ */
            .pricingContent {
                padding: 2rem;
                
                /* プラン機能リスト */
                .planFeatures {
                    display: flex;
                    flex-direction: column;
                    gap: 0.8rem;
                    
                    li {
                        position: relative;
                        padding-left: 1.5rem;
                        color: #555;
                        line-height: 1.6;
                        
                        /* チェックマークアイコン */
                        &::before {
                            content: '✓';
                            position: absolute;
                            left: 0;
                            color: #D4AF37;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        
        /* サブカードのスタイル */
        .subCard {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(212, 175, 55, 0.3);
            margin: 1rem 1.5rem;
            padding: 1rem;
            transition: all 0.3s ease;
            
            &:hover {
                background: rgba(255, 255, 255, 1);
                border-color: rgba(212, 175, 55, 0.5);
                transform: translateY(-2px);
            }
            
            .subCardHeader {
                position: relative;
                padding-bottom: 2rem;
                margin-bottom: 0.5rem;
                
                .subCardTitle {
                    position: absolute;
                    top: 0;
                    left: 0;
                    color: #6B46C1;
                    font-size: 1.3rem;
                    margin: 0;
                    font-weight: 600;
                }
                
                .subCardPrice {
                    position: absolute;
                    top: 0;
                    right: 0;
                    color: #D4AF37;
                    font-weight: 700;
                    font-size: 1rem;
                }
            }
            
            .subCardContent {
                p {
                    color: #666;
                    font-size: 0.9rem;
                    margin: 0;
                    line-height: 1.5;
                }
            }
        }
    }
}



/* ========================================
   Additional Cards Section - 追加カードセクション
   ========================================
   pricingCardの下に表示される追加情報カード
======================================== */

.additionalCardsSection {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3rem;
    
    .additionalCard {
        background: white;
        border: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        
        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
            border-color: rgba(212, 175, 55, 0.4);
        }
        
        .additionalCardHeader {
            background: linear-gradient(135deg, rgba(107, 70, 193, 0.08), rgba(147, 112, 219, 0.08));
            padding: 1.5rem;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
            
            .additionalCardTitle {
                color: #6B46C1;
                font-size: 1.3rem;
                margin: 0;
                font-weight: 600;
            }
        }
        
        .additionalCardContent {
            padding: 1.5rem;
            
            p {
                color: #666;
                line-height: 1.6;
                margin: 0;
                font-size: 1rem;
            }
        }
    }

 .additionalCard2 {
        background: white;
        border: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        
        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
            border-color: rgba(212, 175, 55, 0.4);
        }
        
        .additionalCardHeader {
            background: linear-gradient(135deg, rgba(107, 70, 193, 0.08), rgba(147, 112, 219, 0.08));
            padding: 1.5rem;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
            
            .additionalCardTitle {
                color: #6B46C1;
                font-size: 1.3rem;
                margin: 0;
                font-weight: 600;
            }
        }
        
        .additionalCardContent {
            padding: 1.5rem;
            
            p {
                color: #666;
                line-height: 1.6;
                margin: 0;
                font-size: 1rem;
            }
        }
    }
  
 .additionalCard3 {
        background: white;
        border: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        overflow: hidden;
        
        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
            border-color: rgba(212, 175, 55, 0.4);
        }
        
        .additionalCardHeader {
            background: linear-gradient(135deg, rgba(107, 70, 193, 0.08), rgba(147, 112, 219, 0.08));
            padding: 1.5rem;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
            
            .additionalCardTitle {
                color: #6B46C1;
                font-size: 1.3rem;
                margin: 0;
                font-weight: 600;
            }
        }
        
        .additionalCardContent {
            padding: 1.5rem;
            
            p {
                color: #666;
                line-height: 1.6;
                margin: 0;
                font-size: 1rem;
            }
        }
    }
  
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* 横並びカードのスタイル */
    .horizontalCardsContainer {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
        
        .horizontalCard {
            flex: 1;
            background: white;
            border: 2px solid #D4AF37;
            border-radius: 6px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
            
            &:hover {
                background: #fefefe;
                border-color: #9370DB;
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(147, 112, 219, 0.3);
            }
            
            /* 最初のカードは金色、2番目のカードは紫色 */
            &:first-child {
                border-color: #D4AF37;
                
                &:hover {
                    border-color: #B8941F;
                    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
                }
            }
            
            &:last-child {
                border-color: #9370DB;
                
                &:hover {
                    border-color: #7C3AED;
                    box-shadow: 0 8px 20px rgba(147, 112, 219, 0.4);
                }
            }
            
            .horizontalCardHeader {
                background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(147, 112, 219, 0.1));
                padding: 0.8rem;
                border-bottom: 1px solid rgba(212, 175, 55, 0.3);
                
                .horizontalCardTitle {
                    color: #6B46C1;
                    font-size: 1rem;
                    margin: 0;
                    font-weight: 700;
                }
            }
            
            .horizontalCardContent {
                padding: 0.8rem;
                
                p {
                    color: #555;
                    line-height: 1.5;
                    margin: 0;
                    font-size: 0.85rem;
                    font-weight: 500;
                }
            }
        }
    }
    
    .additionalCardsSection {
        margin-top: 2rem;
        gap: 1rem;
        
        .additionalCard {
            .additionalCardHeader {
                padding: 1rem;
                
                .additionalCardTitle {
                    font-size: 1.1rem;
                }
            }
            
            .additionalCardContent {
                padding: 1rem;
                
                p {
                    font-size: 0.9rem;
                }
            }
        }
        
        /* モバイル時の横並びカード調整 */
        .horizontalCardsContainer {
            flex-direction: column;
            gap: 0.8rem;
            margin-top: 1rem;
        }
    }
}

/* ========================================
   Order Process Section - 注文プロセスセクション
   ========================================
   注文の流れの表示
======================================== */

/* 注文プロセスセクションの基本設定 */
.orderProcessSection {
    padding: 5rem 0;
    position: relative;
    
    /* 背景画像の設定：疑似要素で実装、カスタマイズ可能 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 背景画像URL（こちらで変更可能） */
        background-image: url('../images/172.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 画像の透明度（0.0-1.0で調整可能） */
        opacity: 0.25;
        pointer-events: none;
        z-index: -2;
    }
    
    /* 色オーバーレイの設定：疑似要素で実装、カスタマイズ可能 */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* オーバーレイ色（RGBA形式で指定、こちらで変更可能） */
        --overlay-color-1: rgba(255, 255, 255, 0.85);  /* 白色ベース */
        --overlay-color-2: rgba(212, 175, 55, 0.08);   /* 薄い金色 */
        
        /* グラデーションオーバーレイ */
        background: linear-gradient(135deg, var(--overlay-color-1), var(--overlay-color-2));
        
        /* 単色オーバーレイを使用する場合は以下のコメントアウトを外して上記をコメントアウト */
        /* background: rgba(255, 255, 255, 0.88); */
        
        pointer-events: none;
        z-index: -1;
    }
    
    /* プロセスステップ */
    .processSteps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        position: relative;
        z-index: 1;
        
        /* 個別のプロセスステップ */
        .processStep {
            text-align: center;
            position: relative;
            
            /* ステップ番号 */
            .stepNumber {
                width: 250px;
                height: 250px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 1.5rem;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(10px);
                transition: all 0.3s ease;
                
                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
                }
                
                /* 画像のスタイル */
                img {
                    width: 220px;
                    height: 220px;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
                }
                
                /* ホバー時の画像拡大効果 */
                &:hover img {
                    transform: scale(1.2);
                }
            }
            
            /* ステップコンテンツ */
            .stepContent {
                /* ステップタイトル */
                .stepTitle {
                    color: #6B46C1;
                    margin-bottom: 1rem;
                    font-size: 1.2rem;
                }
                
                /* ステップ説明 */
                .stepDescription {
                    color: #666;
                    line-height: 1.6;
                    margin: 0;
                }
            }
        }
    }
}



.orderProcessSection2 {
    padding: 1rem 0;
    position: relative;
    
    /* 背景画像の設定：疑似要素で実装、カスタマイズ可能 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 背景画像URL（こちらで変更可能） */
        background-image: url('../images/172.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        /* 画像の透明度（0.0-1.0で調整可能） */
        opacity: 0.25;
        pointer-events: none;
        z-index: -2;
    }
    
    /* 色オーバーレイの設定：疑似要素で実装、カスタマイズ可能 */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* オーバーレイ色（RGBA形式で指定、こちらで変更可能） */
        --overlay-color-1: rgba(255, 255, 255, 0.85);  /* 白色ベース */
        --overlay-color-2: rgba(212, 175, 55, 0.08);   /* 薄い金色 */
        
        /* グラデーションオーバーレイ */
        background: linear-gradient(135deg, var(--overlay-color-1), var(--overlay-color-2));
        
        /* 単色オーバーレイを使用する場合は以下のコメントアウトを外して上記をコメントアウト */
        /* background: rgba(255, 255, 255, 0.88); */
        
        pointer-events: none;
        z-index: -1;
    }
    
    /* プロセスステップ */
    .processSteps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        position: relative;
        z-index: 1;
        
        /* 個別のプロセスステップ */
        .processStep {
            text-align: center;
            position: relative;
            
            /* ステップ番号 */
            .stepNumber {
                width: 180px;
                height: 180px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 1.5rem;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(10px);
                transition: all 0.3s ease;
                
                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
                }
                
                /* 画像のスタイル */
                img {
                    width: 140px;
                    height: 140px;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
                    border-radius: 8px;
                }
                
                /* ホバー時の画像拡大効果 */
                &:hover img {
                    transform: scale(1.05);
                }
            }
            
            /* ステップコンテンツ */
            .stepContent {
                /* ステップタイトル */
                .stepTitle {
                    color: #6B46C1;
                    margin-bottom: 1rem;
                    font-size: 1.2rem;
                }
                
                /* ステップ説明 */
                .stepDescription {
                    color: #666;
                    line-height: 1.6;
                    margin: 0;
                }
            }
        }
    }
}


/* ========================================
   System2 Section - システム2セクション
   ========================================
   注文プロセス内の料金表示部分
======================================== */

/* システム2コンテナの基本設定 */
.system2 {
    margin-top: 3rem;
    padding: 0;
    text-align: left;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
    
    /* システム2コメントのスタイル */
    .system2comment {
        color: #6B46C1;
        font-size: clamp(1.5rem, 3vw, 2.2rem);
        font-weight: 1200;
        margin-top: 40px;
        text-align: left;
        
        /* テキストにグラデーション効果を追加 */
        background: linear-gradient(135deg, #D4AF37, #9370DB);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* ========================================
   Responsive Design for System2 - System2のレスポンシブデザイン
   ========================================
   モバイル端末向けの調整
======================================== */

/* タブレット・スマートフォン向けの調整（768px以下） */
@media (max-width: 768px) {
    .system2 {
        margin-top: 2rem;
        padding-left: 15px;
        padding-right: 15px;
        
        .system2comment {
            font-size: 1.5rem;
        }
    }
}

/* スマートフォン向けの追加調整（480px以下） */
@media (max-width: 480px) {
    .system2 {
        margin-top: 1.5rem;
        padding-left: 10px;
        padding-right: 10px;
        
        .system2comment {
            font-size: 12px;
        }
    }
}

/* ========================================
   Contact CTA Section - お問い合わせCTAセクション
   ========================================
   お問い合わせへの誘導
======================================== */

/* お問い合わせCTAセクションの基本設定 */
.contactCtaSection {
    padding: 5rem 0;
    background: linear-gradient(135deg, #6B46C1, #9370DB);
    color: white;
    text-align: center;
    
    /* CTAコンテンツ */
    .ctaContent {
        /* CTAタイトル */
        .ctaTitle {
            font-size: clamp(2rem, 4vw, 3rem);
            margin-bottom: 1rem;
            color: white;
        }
        
        /* CTA説明 */
        .ctaDescription {
            font-size: 1.2rem;
            margin-bottom: 3rem;
            opacity: 0.9;
            line-height: 1.6;
        }
        
        /* CTAボタン */
        .ctaButtons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
            
            /* CTAボタンの基本スタイル */
            .ctaButton {
                padding: 1rem 2rem;
                font-weight: 500;
                text-align: center;
                transition: all 0.3s ease;
                min-width: 200px;
                font-size: 1rem;
                
                /* プライマリボタン */
                &.primary {
                    background: white;
                    color: #6B46C1;
                    
                    &:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3);
                    }
                }
                
                /* セカンダリボタン */
                &.secondary {
                    border: 2px solid white;
                    color: white;
                    background: transparent;
                    
                    &:hover {
                        background: white;
                        color: #6B46C1;
                        transform: translateY(-3px);
                    }
                }
            }
        }
    }
}

/* ========================================
   Active Navigation Link - アクティブナビゲーションリンク
   ========================================
   現在のページを示すナビゲーションスタイル
======================================== */

/* アクティブなナビゲーションリンクのスタイル */
.navLink.active {
    color: #6B46C1;
    font-weight: 600;
    
    /* アクティブリンクの下線 */
    &::after {
        width: 100%;
    }
}

/* ========================================
   Order Process Section 2 Mobile - 注文プロセスセクション2 モバイル対応
   ======================================== */

@media (max-width: 768px) {
    .orderProcessSection2 {
        .system2 {
            .system2comment {
                font-size: 1.1rem;
                line-height: 1.6;
                margin-bottom: 1rem;
            }
        }
    }
}

@media (max-width: 480px) {
    .orderProcessSection2 {
        .system2 {
            .system2comment {
                font-size: 1.2rem;
                line-height: 1.7;
                margin-bottom: 1.2rem;
                font-weight: 600;
            }
        }
    }
}

/* ========================================
   Mobile Responsive - モバイル対応
   ========================================
   768px以下での表示調整
======================================== */

@media (max-width: 768px) {
    .pageHeaderSection {
        padding: 8rem 0 3rem;
        
        .pageTitle {
            font-size: 2rem;
        }
        
        .pageSubtitle {
            font-size: 1rem;
        }
    }
    
    .templatesGrid,
    .patternsGrid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .templateCard,
    .patternCard {
        .templateInfo,
        .patternInfo {
            padding: 1rem;
                    .subCardHeader {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 0.5rem;
                        
                        .subCardTitle {
                            font-size: 1.1rem;
                            font-weight: 600;
                            text-decoration: underline;
                            text-decoration-color: #D4AF37;
                            text-underline-offset: 3px;
                        }
                        
                        .subCardPrice {
                            display: none;
                        }
                    }
                    
            
            h3,
            h4 {
                font-size: 1.1rem;
            }
            
            p {
                font-size: 0.9rem;
            }
        }
    }
    
    .patternCategory {
        .categoryTitle {
            font-size: 1.3rem;
        }
    }
    
    /* Pricing System Mobile Styles */
    .pricingSection {
        padding: 3rem 0;
        
        .sectionHeader {
            margin-bottom: 2rem;
            
            .sectionTitle {
                font-size: 1.8rem;
                line-height: 1.3;
                margin-bottom: 1rem;
            }
            
            .sectionSubtitle {
                font-size: 1rem;
                line-height: 1.6;
                padding: 0 1rem;
            }
        }
        
        .pricingGrid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            
            .pricingCard {
                margin: 0 0.5rem;
                
                .pricingHeader {
                    .planName {
                        font-size: 1.2rem;
                        line-height: 1.4;
                        padding: 1rem;
                        margin-bottom: 1rem;
                    }
                    
                    .subCard {
                        margin-bottom: 1rem;
                        
                        .subCardHeader {
                            .subCardTitle {
                                font-size: 1rem;
                                line-height: 1.4;
                                padding: 0.8rem;
                            }
                            
                            .subCardPrice {
                                font-size: 0.8rem;
                                line-height: 1.3;
                                padding: 0.5rem;
                                min-width: auto;
                                white-space: nowrap;
                            }
                        }
                        
                        .subCardContent {
                            padding: 0.8rem;
                            
                            p {
                                font-size: 0.9rem;
                                line-height: 1.5;
                                margin: 0;
                            }
                        }
                    }
                }
            }
        }
        
        .additionalCardsSection {
            margin-top: 2rem;
            
            .additionalCard,
            .additionalCard2,
            .additionalCard3 {
                margin-bottom: 1.5rem;
                margin-left: 0.5rem;
                margin-right: 0.5rem;
                
                .additionalCardHeader {
                    .additionalCardTitle {
                        font-size: 1.1rem;
                        line-height: 1.4;
                        padding: 1rem;
                    }
                }
                
                .additionalCardContent {
                    padding: 1rem;
                    
                    p {
                        font-size: 0.9rem;
                        line-height: 1.6;
                        margin-bottom: 1rem;
                    }
                    
                    .horizontalCardsContainer {
                        flex-direction: column;
                        gap: 1rem;
                        
                        .horizontalCard {
                            .horizontalCardContent {
                                padding: 0.8rem;
                                
                                p {
                                    font-size: 0.85rem;
                                    line-height: 1.5;
                                    margin: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    .orderProcessSection {
        padding: 3rem 0;
        
        .processSteps {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            
            .processStep {
                .stepNumber {
                    width: 200px;
                    height: 200px;
                    
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                
                .stepContent {
                    .stepTitle {
                        font-size: 1.3rem;
                        margin-top: 1rem;
                        font-weight: 600;
                        color: #6B46C1;
                    }
                }
            }
        }
    }
    
    .orderProcessSection2 {
        padding: 2rem 0;
        
        .system2 {
            padding: 1rem;
            
            .system2comment {
                font-size: 1rem;
                line-height: 1.5;
                margin-bottom: 0.8rem;
                padding: 0.5rem;
            }
        }
    }
}

/* ========================================
   Small Mobile Responsive - 小画面モバイル対応
   ========================================
   480px以下での追加調整
======================================== */

@media (max-width: 480px) {
    .pageHeaderSection {
        .pageHeaderContent {
            .pageTitle {
                font-size: 1.5rem;
            }
            
            .pageSubtitle {
                font-size: 0.85rem;
            }
        }
    }
    
    .pricingSection {
        .sectionHeader {
            .sectionTitle {
                font-size: 1.5rem;
            }
            
            .sectionSubtitle {
                font-size: 0.9rem;
                padding: 0 0.5rem;
            }
        }
        
        .pricingGrid {
            .pricingCard {
                margin: 0 0.25rem;
                
                .pricingHeader {
                    .planName {
                        font-size: 1rem;
                        padding: 0.8rem;
                    }
                    
                    .subCard {
                        .subCardHeader {
                            flex-direction: column;
                            align-items: flex-start;
                            gap: 0.5rem;
                            
                            .subCardTitle {
                                font-size: 0.85rem;
                                padding: 0.6rem;
                            }
                            
                            .subCardPrice {
                              display: none;
                                font-size: 0.75rem;
                                padding: 0.4rem;
                                text-align: center;
                            }
                        }
                        
                        .subCardContent {
                            padding: 0.6rem;
                            
                            p {
                                font-size: 0.8rem;
                            }
                        }
                    }
                }
            }
        }
        
        .additionalCardsSection {
            .additionalCard,
            .additionalCard2,
            .additionalCard3 {
                margin-left: 0.25rem;
                margin-right: 0.25rem;
                
                .additionalCardHeader {
                    .additionalCardTitle {
                        font-size: 1rem;
                        padding: 0.8rem;
                    }
                }
                
                .additionalCardContent {
                    padding: 0.8rem;
                    
                    p {
                        font-size: 0.8rem;
                    }
                }
            }
            
            .additionalCard2 {
                .horizontalCardsContainer {
                    flex-direction: column;
                    gap: 1rem;
                    
                    .horizontalCard {
                        .horizontalCardContent {
                            p {
                                font-size: 0.8rem;
                            }
                        }
                    }
                }
            }
        }
    }
    
    .orderProcessSection {
        .processSteps {
            grid-template-columns: 1fr;
            gap: 2rem;
            
            .processStep {
                .stepNumber {
                    width: 200px;
                    height: 200px;
                    
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                
                .stepContent {
                    .stepTitle {
                        font-size: 1.4rem;
                        margin-top: 1rem;
                        font-weight: 600;
                    }
                }
            }
        }
    }
    
    .orderProcessSection2 {
        .system2 {
            .system2comment {
                font-size: 0.8rem;
            }
        }
    }
}


@media (max-width: 1100px) {
    .pageHeaderSection {
        .pageHeaderContent {
            .pageTitle {
                font-size: 1.5rem;
            }
            
            .pageSubtitle {
                font-size: 0.85rem;
            }
        }
    }
    
    .pricingSection {
        .sectionHeader {
            .sectionTitle {
                font-size: 1.5rem;
            }
            
            .sectionSubtitle {
                font-size: 0.9rem;
                padding: 0 0.5rem;
            }
        }
        
        .pricingGrid {
            .pricingCard {
                margin: 0 0.25rem;
                
                .pricingHeader {
                    .planName {
                        font-size: 1rem;
                        padding: 0.8rem;
                    }
                    
                    .subCard {
                        .subCardHeader {
                            flex-direction: column;
                            align-items: flex-start;
                            gap: 0.5rem;
                            
                            .subCardTitle {
                                font-size: 0.85rem;
                                padding: 0.6rem;
                            }
                            
                            .subCardPrice {
                              display: none;
                                font-size: 0.75rem;
                                padding: 0.4rem;
                                text-align: center;
                            }
                        }
                        
                        .subCardContent {
                            padding: 0.6rem;
                            
                            p {
                                font-size: 0.8rem;
                            }
                        }
                    }
                }
            }
        }
        
        .additionalCardsSection {
            .additionalCard,
            .additionalCard2,
            .additionalCard3 {
                margin-left: 0.25rem;
                margin-right: 0.25rem;
                
                .additionalCardHeader {
                    .additionalCardTitle {
                        font-size: 1rem;
                        padding: 0.8rem;
                    }
                }
                
                .additionalCardContent {
                    padding: 0.8rem;
                    
                    p {
                        font-size: 0.8rem;
                    }
                }
            }
            
            .additionalCard2 {

                    
                    .horizontalCard {
                        .horizontalCardContent {
                            p {
                                font-size: 0.8rem;
                        }
                    }
                }
            }
        }
    }
    
    .orderProcessSection {
        .processSteps {
            grid-template-columns: 1fr;
            gap: 2rem;
            
            .processStep {
                .stepNumber {
                    width: 200px;
                    height: 200px;
                    
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                
                .stepContent {
                    .stepTitle {
                        font-size: 1.4rem;
                        margin-top: 1rem;
                        font-weight: 600;
                    }
                }
            }
        }
    }
    
    .orderProcessSection2 {
        .system2 {
            .system2comment {
                font-size: 1.5rem;
              margin-left: 1rem;
            }
        }
    }
}




/* 768px以下でのステップカード改善 */
@media (max-width: 768px) {
    .orderProcessSection {
        .processSteps {
                    .subCardHeader {
                        .subCardTitle {
                            font-size: 1.2rem;
                            font-weight: 700;
                            text-decoration: underline;
                            text-decoration-color: #D4AF37;
                            text-decoration-thickness: 2px;
                            text-underline-offset: 4px;
                        }
                        
                        .subCardPrice {
                            display: none;
                        }
                    }
                    
            .processStep {
                .stepNumber {
                    width: 180px;
                    height: 180px;
                    
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                
                .stepContent {
                    .stepTitle {
                        font-size: 1.3rem;
                        margin-top: 1rem;
                        font-weight: 600;
                        color: #6B46C1;
                    }
                }
            }
        }
    }
}

/* ========================================
   Responsive Design - レスポンシブデザイン
   ========================================
   各画面サイズでの表示調整
======================================== */

/* タブレット・スマートフォン向けの調整（768px以下） */
@media (max-width: 768px) {
    /* ページヘッダー：パディング調整 */
    .pageHeaderSection {
        padding: 6rem 0 3rem;
    }
    
    /* サービス説明：1カラムレイアウト */
    .serviceDescriptionSection {
        .serviceDescriptionContent {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
    }
    
    /* ボトルテンプレート：最小幅調整 */
    .bottleTemplatesSection {
        .templatesGrid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    }
    
    /* パターンテンプレート：最小幅調整 */
    .patternTemplatesSection {
        .patternCategories {
            .patternCategory {
                .patternsGrid {
                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                }
            }
        }
    }
    
    /* 料金：最小幅調整 */
    .pricingSection {
        .pricingGrid {
            grid-template-columns: 1fr;
            
            .pricingCard.featured {
                transform: none;
            }
        }
    }
    
    /* 注文プロセス：最小幅調整 */
    .orderProcessSection {
        .processSteps {
            grid-template-columns: 1fr;
        }
    }
    
    /* CTAボタン：縦並び */
    .contactCtaSection {
        .ctaContent {
            .ctaButtons {
                flex-direction: column;
                align-items: center;
                
                .ctaButton {
                    width: 100%;
                    max-width: 300px;
                }
            }
        }
    }
}

/* スマートフォン向けの追加調整（480px以下） */
@media (max-width: 480px) {
    /* ページヘッダー：さらにパディング調整 */
    .pageHeaderSection {
        padding: 5rem 0 2rem;
        
        .pageHeaderContent {
            .pageTitle {
                font-size: 2.5rem;
            }
            
            .pageSubtitle {
                font-size: 1.1rem;
            }
        }
    }
    
    /* 特徴リスト：縦並び調整 */
    .serviceDescriptionSection {
        .serviceDescriptionContent {
            .descriptionText {
                .serviceFeatures {
                    .featureList {
                        li {
                            flex-direction: column;
                            text-align: center;
                            
                            .featureIcon {
                                align-self: center;
                            }
                        }
                    }
                }
            }
        }
    }
}