/* ========================================
   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;
        
        /* 説明テキスト部分 */
        .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);
                }
            }
        }
    }
}


/* ========================================
   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: 2rem;
                text-align: center;
                background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(147, 112, 219, 0.1));
                
                /* プラン名 */
                .planName {
                    color: #6B46C1;
                    font-size: 1.5rem;
                    margin-bottom: 1rem;
                }
                
                /* プラン料金 */
                .planPrice {
                    display: flex;
                    justify-content: center;
                    align-items: baseline;
                    gap: 0.5rem;
                    
                    .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;
                        }
                    }
                }
            }
        }
    }
}

/* ========================================
   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/005.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: 2rem;
        position: relative;
        z-index: 1;
        
        /* 個別のプロセスステップ */
        .processStep {
            text-align: center;
            position: relative;
            
            /* ステップ番号 */
            .stepNumber {
                width: 60px;
                height: 60px;
                background: linear-gradient(135deg, #D4AF37, #9370DB);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                font-weight: bold;
                margin: 0 auto 1.5rem;
                box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
            }
            
            /* ステップコンテンツ */
            .stepContent {
                /* ステップタイトル */
                .stepTitle {
                    color: #6B46C1;
                    margin-bottom: 1rem;
                    font-size: 1.2rem;
                }
                
                /* ステップ説明 */
                .stepDescription {
                    color: #666;
                    line-height: 1.6;
                    margin: 0;
                }
            }
        }
    }
}

/* ========================================
   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%;
    }
}

/* ========================================
   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;
                            }
                        }
                    }
                }
            }
        }
    }
}