/*-------------------- pc --------------------*/
/*---------- base > width:1440px ----------*/
:root{
    --sale_detail_font_base:"IBM Plex Sans JP", sans-serif;
    --sale_detail_font_en:"Jost", sans-serif;
    --sale_detail_font_mincho:"Shippori Mincho B1", serif;
    --sale_detail_color_text:#32373E;
    --sale_detail_color_text_light:#6B6F75;
    --sale_detail_color_text_dark:#20242a;
    --sale_detail_color_red:#C50018;
    --sale_detail_color_white:#ffffff;
    --sale_detail_color_black:#000000;
    --sale_detail_color_bg:#F0F1F4;
    --sale_detail_color_block_bg:#E2E4E7;
    --sale_detail_color_bg_light:#f7f7f7;
    --sale_detail_color_line:#CCCFD1;
    --sale_detail_color_border:#c5cbd1;
    --sale_detail_color_maker_border:#d9dde1;
    --sale_detail_color_link:#006ad4;
    --sale_detail_color_overlay_start:rgba(0, 0, 0, 0.04);
    --sale_detail_color_overlay_end:rgba(0, 0, 0, 0.48);
}

.first_area{

}
.first_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;

    .text{
        max-width:800px;
        margin:0 auto;
        text-align: center;

        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:16px;
            line-height:28px;
        }
    }
}

.l_sale_assessment_area{
    padding: 0 16px;
    margin-top: 56px;
}
.l_sale_assessment_wrap{
    max-width:1120px;
    margin:0 auto;
    box-sizing:content-box;

    .p_sale_assessment_intro{
        display: grid;
        grid-template-columns: minmax(0, 560px) minmax(0, 560px);
        align-items: center;
        justify-content: space-between;
        margin-top: 48px;

        p{
            margin: 0;
            font-family: "IBM Plex Sans JP", sans-serif;
            font-weight: 500;
            font-size: 16px;
            line-height: 28px;
            color: #32373e;
            display: block;
            padding: 0 80px;

        }
    }

    .p_sale_assessment_intro_image{
        border-radius:4px;
        overflow:hidden;

        img{
            display:block;
            width:100%;
            aspect-ratio:560 / 336;
            object-fit:cover;
        }
    }

    .p_sale_assessment_card{
        margin-top: 32px;
        padding: 61px 159px 56px;
        background-color: #ffffff;
        border: 1px solid #cccfd1;
        border-radius: 4px;

        h3{
            margin:0 0 25px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:20px;
            line-height:30px;
            text-align:center;
            color:#32373e;

            span{
                color:#c50018;
            }
        }

        p{
            margin:0;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:16px;
            line-height:28px;
            color:#32373e;
        }
    }

    .p_sale_assessment_card_center{
        margin-top: 64px;
        padding: 61px 20px 56px;
        text-align: center;
    }

    /* task166: the card reserves 159px a side for centred prose, which left the
       figure ~300px per column -- half of what the same block gets on /sumstock/.
       Both boxes pull back 119px so the figure's columns land at 420px and the two
       boxes still line up with each other. */
    .p_sale_assessment_figure,
    .p_sale_assessment_chart{
        margin: 24px -119px 0;
        padding: 40px 60px;
        border: 1px solid #cccfd1;
        border-radius: 4px;

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

    /* task166: the figure mirrors /sumstock/ .box_container (sumstock.css .sec02_wrap)
       -- same two-column split, padding and type scale, so both pages read as one
       design. Border/radius/margin still come from the shared rule above. */
    .p_sale_assessment_figure{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        align-items:center;
        gap:40px;
        padding:64px 80px;
        background-color:#ffffff;

        .text{
            h4{
                margin:0 0 25px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:20px;
                line-height:31px;
                text-align:center;
                color:#32373e;

                span{
                    color:#c50018;
                }
            }
            p{
                margin:0;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:16px;
                line-height:28px;
                color:#32373e;
            }
        }
        .img{
            img{
                width:100%;
                max-width:none;
            }
        }
    }

    .p_sale_assessment_chart{
        margin-top: 32px;
        padding: 36px 40px;
    }

    .p_sale_assessment_chart_title{
        position:relative;
        margin:0 0 33px !important;
        padding-left:20px;
        font-weight:600 !important;

        &:before{
            content:'';
            position:absolute;
            top:10px;
            left:0;
            width:8px;
            height:8px;
            border-radius:50%;
            background-color:#c50018;
        }
    }

    /* task80: source line for the 築年毎の建物価格 chart. Aligned to the chart's
       own 800px column so it reads as the chart's footnote, not body copy.
       task162: it also carried a `※事務局確認` review flag in red. The
       association confirmed the count, so flag and rule are both gone. */
    .p_sale_assessment_source{
        max-width:800px;
        margin:12px auto 0 !important;
        font-size:14px !important;
        line-height:22px !important;
        text-align:left;
        color:#6b6f75;
    }

    .p_sale_assessment_note{
        margin-top:48px !important;
    }
}

.l_sale_evaluation_area,
.l_sale_work_value_area{
    padding: 0 16px;
    margin-top: 124px;
    font-family: var(--sale_detail_font_base);
}

.l_sale_work_value_area{
    margin-top: 116px;
}

.l_sale_evaluation_wrap,
.l_sale_work_value_wrap{
    max-width:1120px;
    margin:0 auto;

    p{
        max-width: 800px;
        margin: 48px auto 0;
        color: var(--sale_detail_color_text);
        font-size: 16px;
        font-weight: 500;
        line-height: 28px;
    }
}

.sec05_area{
    padding-top:117px;
}
.sec05_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;

    .text{
        max-width:800px;
        margin:48px auto 0;

        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:16px;
            line-height:28px;
        }
    }
}
.compare_area{
    margin-top:40px;
}

.sec06_area{
    padding:124px 0 0;
}
.sec06_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;

    /* task80: patent note, same treatment as /market/detail/. */
    .note{
        margin-top:32px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:500;
        font-size:14px;
        line-height:20px;
        color:#6b6f75;
    }

    .text{
        display:flex;
        justify-content:center;
        margin-top:48px;
        padding:32px 0 26px;
        background-color:#ffffff;
        border:1px solid #cccfd1;
        border-radius:4px;

        dl{
            margin:0;

            dt{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:20px;
                line-height:32px;
                text-align:center;
                color:#c50018;
            }
            dd{
                position:relative;
                margin:0;
                padding-top:27px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:18px;
                line-height:26px;

                &:before{
                    content:'=';
                    position:absolute;
                    top:-2px;
                    left:50%;
                    transform:translateX(-50%) rotate(90deg);
                    font-size:20px;
                }
            }
        }
    }
    .container{
        display:grid;
        gap:24px;
        margin-top:32px;

        dl{
            margin:0;
            border:1px solid #cccfd1;
            border-radius:4px;
            overflow:hidden;

            dt{
                display:flex;
                align-items:center;
                gap:12px;
                padding:15px 24px 11px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:16px;
                line-height:24px;
                color:#ffffff;
                background-color:#32373e;
                
                span{
                    font-size:20px;
                    line-height:30px;
                }
            }
            dd{
                margin:0;
                padding:24px 24px 16px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:16px;
                line-height:24px;
                background-color:#ffffff;
                border-top:1px solid #cccfd1;
            }
        }
    }
}


.fixed_area{
    display:flex;
    justify-content:center;
    gap:20px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:16px;
    background-color:#dfe2e5;
    z-index:3000;
}
.fixed_box{
    p{
        display:none;
    }
    a{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:12px;
        width:590px;
        padding:21px 0 19px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:16px;
        line-height:24px;
        color:#32373e;
        background:url('../images/common/red_circle_white_arrow.png') center right 28px / 24px no-repeat;
        background-color:#ffffff;
        border:1px solid #ffffff;
        border-radius:32px;
        transition:0.3s;

        span{
            font-size:14px;
            line-height:21px;
        }
        &:hover{
            color:#c50018;
            border-color:#c50018;
        }
    }
}





/*-------------------- pc-spの間 --------------------*/
/*---------- base > width:1440px ----------*/
@media(max-width:1439px) and (min-width:769px){
    .first_area{

    }
    .first_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    
        .text{
            /* max-width:55.556vw; */
            margin:0 auto;
            text-align: center;
    
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.944vw;
            }
        }
    }
    
    .l_sale_assessment_area{
        padding: 0 1.111vw;
        margin-top: 3.889vw;
    }
    .l_sale_assessment_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        box-sizing:content-box;
    
        .p_sale_assessment_intro{
            display: grid;
            grid-template-columns: minmax(0, 38.889vw) minmax(0, 38.889vw);
            align-items: center;
            justify-content: center;
            margin-top: 3.333vw;
    
            p{
                margin: 0;
                font-family: "IBM Plex Sans JP", sans-serif;
                font-weight: 500;
                font-size: 1.111vw;
                line-height: 1.944vw;
                color: #32373e;
                display: block;
                padding: 0 5.556vw;
    
            }
        }
    
        .p_sale_assessment_intro_image{
            border-radius:0.278vw;
            overflow:hidden;
    
            img{
                display:block;
                width:100%;
                aspect-ratio:560 / 336;
                object-fit:cover;
            }
        }
    
        .p_sale_assessment_card{
            margin-top: 2.222vw;
            padding: 4.236vw 11.042vw 3.889vw;
            background-color: #ffffff;
            border: 0.069vw solid #cccfd1;
            border-radius: 0.278vw;
    
            h3{
                margin:0 0 1.736vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.389vw;
                line-height:2.083vw;
                text-align:center;
                color:#32373e;
    
                span{
                    color:#c50018;
                }
            }
    
            p{
                margin:0;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.944vw;
                color:#32373e;
            }
        }
    
        .p_sale_assessment_card_center{
            margin-top: 4.444vw;
            padding: 4.236vw 1.389vw 3.889vw;
            text-align: center;
        }
    
        .p_sale_assessment_figure,
        .p_sale_assessment_chart{
            margin: 1.667vw -8.264vw 0;
            padding: 2.778vw 4.167vw;
            border: 0.069vw solid #cccfd1;
            border-radius: 0.278vw;
    
            img{
                display: block;
                width: 100%;
                height: auto;
                /* max-width: 47.292vw; */
                margin: 0 auto;
            }
        }
    
        .p_sale_assessment_figure{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            align-items:center;
            gap:2.778vw;
            padding:4.444vw 5.556vw;
            background-color:#ffffff;

            .text{
                h4{
                    margin:0 0 1.736vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.389vw;
                    line-height:2.153vw;
                    text-align:center;
                    color:#32373e;

                    span{
                        color:#c50018;
                    }
                }
                p{
                    margin:0;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:1.111vw;
                    line-height:1.944vw;
                    color:#32373e;
                }
            }
            .img{
                img{
                    width:100%;
                    max-width:none;
                }
            }
        }

        .p_sale_assessment_chart{
            margin-top: 2.222vw;
            padding: 2.5vw 2.778vw;
        }
    
        .p_sale_assessment_chart_title{
            position:relative;
            margin:0 0 2.292vw !important;
            padding-left:1.389vw;
            font-weight:600 !important;
    
            &:before{
                content:'';
                position:absolute;
                top:0.694vw;
                left:0;
                width:0.556vw;
                height:0.556vw;
                border-radius:50%;
                background-color:#c50018;
            }
        }
    
        .p_sale_assessment_source{
            /* max-width:55.556vw; */
            margin:0.833vw auto 0 !important;
            font-size:0.972vw !important;
            line-height:1.528vw !important;
        }

        .p_sale_assessment_note{
            margin-top:3.333vw !important;
        }
    }
    
    .l_sale_evaluation_area,
    .l_sale_work_value_area{
        padding: 0 1.111vw;
        margin-top: 8.611vw;
        font-family: var(--sale_detail_font_base);
    }
    
    .l_sale_work_value_area{
        margin-top: 8.056vw;
    }
    
    .l_sale_evaluation_wrap,
    .l_sale_work_value_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
    
        p{
            /* max-width: 55.556vw; */
            margin: 3.333vw auto 0;
            color: var(--sale_detail_color_text);
            font-size: 1.111vw;
            font-weight: 500;
            line-height: 1.944vw;
        }
    }
    
    .sec05_area{
        padding-top:8.125vw;
    }
    .sec05_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    
        .text{
            /* max-width:55.556vw; */
            margin:3.333vw auto 0;
    
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.944vw;
            }
        }
    }
    .compare_area{
        margin-top:2.778vw;
    }
    
    .sec06_area{
        padding:8.611vw 0 0;
    }
    .sec06_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;

        .note{
            margin-top:2.222vw;
            font-size:0.972vw;
            line-height:1.389vw;
        }

        .text{
            display:flex;
            justify-content:center;
            margin-top:3.333vw;
            padding:2.222vw 0 1.806vw;
            background-color:#ffffff;
            border:0.069vw solid #cccfd1;
            border-radius:0.278vw;
    
            dl{
                margin:0;
    
                dt{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.389vw;
                    line-height:2.222vw;
                    text-align:center;
                    color:#c50018;
                }
                dd{
                    position:relative;
                    margin:0;
                    padding-top:1.875vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.25vw;
                    line-height:1.806vw;
    
                    &:before{
                        content:'=';
                        position:absolute;
                        top:-0.139vw;
                        left:50%;
                        transform:translateX(-50%) rotate(90deg);
                        font-size:1.389vw;
                    }
                }
            }
        }
        .container{
            display:grid;
            gap:1.667vw;
            margin-top:2.222vw;
    
            dl{
                margin:0;
                border:0.069vw solid #cccfd1;
                border-radius:0.278vw;
                overflow:hidden;
    
                dt{
                    display:flex;
                    align-items:center;
                    gap:0.833vw;
                    padding:1.042vw 1.667vw 0.764vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.111vw;
                    line-height:1.667vw;
                    color:#ffffff;
                    background-color:#32373e;
                    
                    span{
                        font-size:1.389vw;
                        line-height:2.083vw;
                    }
                }
                dd{
                    margin:0;
                    padding:1.667vw 1.667vw 1.111vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:1.111vw;
                    line-height:1.667vw;
                    background-color:#ffffff;
                    border-top:0.069vw solid #cccfd1;
                }
            }
        }
    }
    
    
    .fixed_area{
        display:flex;
        justify-content:center;
        gap:1.389vw;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        padding:1.111vw;
        background-color:#dfe2e5;
        z-index:3000;
    }
    .fixed_box{
        p{
            display:none;
        }
        a{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:0.833vw;
            width:40.972vw;
            padding:1.458vw 0 1.319vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.111vw;
            line-height:1.667vw;
            color:#32373e;
            background:url('../images/common/red_circle_white_arrow.png') center right 1.944vw / 1.667vw no-repeat;
            background-color:#ffffff;
            border:0.069vw solid #ffffff;
            border-radius:2.222vw;
            transition:0.3s;
    
            span{
                font-size:0.972vw;
                line-height:1.458vw;
            }
            &:hover{
                color:#c50018;
                border-color:#c50018;
            }
        }
    }
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px){
    .first_wrap{
        padding:0 4.267vw;
        
        .text{
            text-align: left;
    
            p{
                font-size:3.733vw;
                line-height:6.4vw;
            }
        }
    }
    
    .l_sale_assessment_area{
        margin-top: 10.933vw;
    }
    .l_sale_assessment_wrap{
    
        .p_sale_assessment_intro{
            grid-template-columns:1fr;
            gap:6.4vw;
            margin-top:8.533vw;
    
            p{
                font-size: 3.733vw;
                line-height: 6.4vw;
                padding: 0;
            }
        }
    
        .p_sale_assessment_card{
            margin-top: 10.933vw;
            padding: 7.733vw 4.267vw 6.667vw;
    
            h3{
                margin-bottom: 4.8vw;
                font-size: 4.267vw;
                line-height: 6.4vw;
            }
    
            p{
                font-size: 3.733vw;
                line-height: 6.4vw;
                text-align: left;
            }
        }
    
        .p_sale_assessment_card_center{
            margin-top:10.667vw;
            padding:8.533vw 4.267vw 7.733vw;
        }
    
        .p_sale_assessment_figure,
        .p_sale_assessment_chart{
            margin: 4.533vw 0 0;
            padding: 6.4vw 5.333vw 7.467vw;
        }
    
        .p_sale_assessment_figure{
            grid-template-columns:1fr;
            gap:6.4vw;
            padding:7.733vw 4.267vw 10.4vw;

            .text{
                h4{
                    margin-bottom:5.067vw;
                    font-size:4.267vw;
                    line-height:6.4vw;
                }
                p{
                    font-size:3.733vw;
                    line-height:6.4vw;
                }
            }
        }

        .p_sale_assessment_chart{
            margin-top: 6.4vw;
            padding: 4.533vw 2.4vw 3.467vw;
        }
    
        .p_sale_assessment_chart_title{
            margin-bottom: 3.733vw !important;
            padding-left: 4.267vw;
            margin-left: 1.867vw !important;
    
            &:before{
                top: 1.6vw;
            }
        }
    
        .p_sale_assessment_source{
            margin: 3.2vw auto 0 !important;
            font-size: 3.2vw !important;
            line-height: 5.333vw !important;
        }

        .p_sale_assessment_note{
            margin-top: 6.4vw !important;
        }
    }
    
    .l_sale_evaluation_area,
    .l_sale_work_value_area{
        padding: 0 4.267vw;
        margin-top: 17.067vw;
    }
    .l_sale_evaluation_wrap,
    .l_sale_work_value_wrap{
        p{
            margin-top:8.533vw;
            font-size:3.733vw;
            line-height:6.4vw;
        }
    }
    .l_sale_work_value_area{
        margin-top: 15.2vw;
    }
    
    .sec05_area{
        padding-top:15.467vw;
    }
    .sec05_wrap{
        padding:0 4.267vw;
        
        .text{
            margin:8.533vw auto 0;
    
            p{
                font-size:3.733vw;
                line-height:6.4vw;
            }
        }
    }
    .compare_area{
        margin-top:6.667vw;
    }
    
    .sec06_area{
        padding:17.067vw 0 0;
    }
    .sec06_wrap{
        padding:0 4.267vw;

        .note{
            margin-top:6.4vw;
            font-size:3.2vw;
            line-height:4.8vw;
        }

        .text{
            margin-top:8.533vw;
            padding:6.4vw 7.467vw 5.333vw;
            border:0.267vw solid #cccfd1;
            border-radius:1.067vw;
    
            dl{
                dt{
                    font-size:4.267vw;
                    line-height:6.4vw;
                }
                dd{
                    padding-top:8.8vw;
                    font-size:3.733vw;
                    line-height:5.333vw;
    
                    &:before{
                        top:1.333vw;
                        font-size:4.267vw;
                    }
                }
            }
        }
        .container{
            gap:4.267vw;
            margin-top:6.4vw;
    
            dl{
                border:0.267vw solid #cccfd1;
                border-radius:1.067vw;
                
                dt{
                    gap:3.2vw;
                    padding:3.467vw 15.2vw 2.4vw 4vw;
                    font-size:3.733vw;
                    line-height:5.333vw;
                    background:url('../images/common/white_circle_gray_plus.png') center right 4.533vw / 5.333vw no-repeat;
                    background-color:#32373e;
                    
                    &.active{
                        background:url('../images/common/white_circle_gray_minus.png') center right 4.533vw / 5.333vw no-repeat;
                        background-color:#32373e;
                    }
                    span{
                        font-size:5.333vw;
                        line-height:8.533vw;
                    }
                }
                dd{
                    display:none;
                    padding:5.333vw 4.267vw 3.467vw;
                    font-size:3.733vw;
                    line-height:5.333vw;
                    border-top:0.267vw solid #cccfd1;
    
                    &.active{
                        display:block;
                    }
                }
            }
        }
    }
    
    .fixed_area{
        padding:2.667vw 0 3.467vw;
    }
    .fixed_box{
        p{
            display:block;
            margin-bottom:1.067vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:3.2vw;
            line-height:4.8vw;
            text-align:center;
        }
        a{
            width:74.667vw;
            padding:3.733vw 0 3.467vw;
            font-size:3.733vw;
            line-height:5.6vw;
            background:url('../images/common/red_circle_white_arrow.png') center right 3.2vw / 6.4vw no-repeat;
            background-color:#ffffff;
            border-radius:8.533vw;

            span{
                display:none;
            }
        }
    }
}

/* 2026/07/22 修正 */
.sec06_area_260722 {
    & .text {
        & dl {
            display: flex;
            align-items: center;

            & dt{

                span{
                    padding-left: 12px;
                    color: #32373E;
                }
            }

            & dd {
                padding-top: 0;
                padding-left: 12px;

                &:before {
                    content: unset;
                }
            }
        }
    }
}
@media (max-width: 1439px) and (min-width: 769px) {
    .sec06_area_260722 {
        & .text {
            & dl {
                dt {
                    font-size: 1.389vw;
                    line-height: 2.222vw;

                    span{
                        padding-left: 0.833vw;
                    }
                }
                dd {
                    margin: 0;
                    padding-top: 0;
                    padding-left: 0.833vw;
                    font-size: 1.25vw;
                    line-height: 1.806vw;
                }
            }
        }
    }
}
@media(max-width:768px){
    .sec06_area_260722 {
        & .text {
            & dl {
                align-items: flex-start;
                flex-direction: column;

                & dt{
                    font-size: 4.267vw;
                    line-height: 6.4vw;

                    span{
                        padding-left: 3.2vw;
                    }
                }

                & dd {
                    padding-top: 2.133vw;
                    padding-left: 0;
                    font-size: 3.733vw;
                    line-height: 5.333vw;

                    &:before {
                        content: unset;
                    }
                }
            }
        }
    }
}

/* task144 -- 関連ページ block. Ported verbatim from buy.css (.relation_area /
   .relation_wrap, same component, same class vocabulary); only the column count
   differs: four cards use the 2x2 grid /sumstock/ sec08 already uses for four. */
.relation_area{
	padding-top:124px
}
.relation_wrap{
	max-width:1120px;
	margin:0 auto;
	padding:0 20px;
	box-sizing:content-box;

	.container{
		display:grid;
		grid-template-columns:repeat(3, 1fr);
		gap:20px;
		margin-top:48px;

		.box{
			position:relative;
			transition:0.3s;

			&:hover{
				opacity:0.7;
			}
			.img{
				position:relative;
				/* task144: buy's three images share 3:2 so its base block could rely on
				   the source ratio. Ours do not -- pin the box, let the image cover. */
				aspect-ratio:3 / 2;
				border-radius:4px;
				overflow:hidden;

				&:before{
					content:'';
					position:absolute;
					top:0;
					left:0;
					width:100%;
					height:100%;
					background:linear-gradient(transparent, #32373e);
					opacity:0.5;
					z-index:1;
				}
				img{
					width:100%;
					height:100%;
					object-fit:cover;
				}
			}
			h3{
				position:absolute;
				bottom:8px;
				right:16px;
				left:16px;
				font-family:"IBM Plex Sans JP", sans-serif;
				font-weight:600;
				font-size:20px;
				line-height:30px;
				color:#ffffff;
				background:url('../images/common/white_circle_red_arrow.png') center right / 24px no-repeat;
				z-index:2;
			}
		}
	}
}

@media(max-width:1439px) and (min-width:769px){
	.relation_area{
		padding-top:8.611vw
	}
	.relation_wrap{
		/* max-width:77.778vw; */
		margin:0 auto;
		padding:0 1.389vw;
		box-sizing:content-box;
	
		.container{
			display:grid;
			grid-template-columns:repeat(3, 1fr);
			gap:1.389vw;
			margin-top:3.333vw;
	
			.box{
				position:relative;
				transition:0.3s;
	
				&:hover{
					opacity:0.7;
				}
				.img{
					position:relative;
					border-radius:0.278vw;
					overflow:hidden;
	
					&:before{
						content:'';
						position:absolute;
						top:0;
						left:0;
						width:100%;
						height:100%;
						background:linear-gradient(transparent, #32373e);
						opacity:0.5;
						z-index:1;
					}
					img{
						width:100%;
					}
				}
				h3{
					position:absolute;
					bottom:0.556vw;
					right:1.111vw;
					left:1.111vw;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:1.389vw;
					line-height:2.083vw;
					color:#ffffff;
					background:url('../images/common/white_circle_red_arrow.png') center right / 1.667vw no-repeat;
					z-index:2;
				}
			}
		}
	}
}

@media(max-width:768px){
	.relation_area{
		padding-top:17.067vw;
	}
	.relation_wrap{
		padding:0 4.267vw;
	
		.container{
			grid-template-columns:1fr;
			gap:6.4vw;
	
			.box{
				.img{
					height:32vw;
	
					img{
						width:100%;
						height:100%;
						object-fit:cover;
					}
				}
				h3{
					bottom:1.6vw;
					right:4.267vw;
					left:4.267vw;
					font-size:4.267vw;
					line-height:6.4vw;
					background:url('../images/common/white_circle_red_arrow.png') center right / 5.333vw no-repeat;
				}
			}
		}
	}
}


/* task183 (2026-08-25): /sale/detail/ gets the same fixed CTA bar as /sale/.
   The page already carried .fixed_area/.fixed_box rules for a bar it never had any
   markup for; those stay untouched and unused. What ships here is /sale/'s pair --
   .fixed_area + .fixed_container -- copied verbatim from sale.css so the two pages
   cannot drift, and placed after the old rules so the translucent background and the
   two-button grid win. */
.fixed_area{
    display:block;   /* the page's older, never-built .fixed_area sets flex */
    gap:normal;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:16px;
    background-color:rgba(223, 226, 229, 0.8);
    z-index:3000;
}
.fixed_container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    max-width:1200px;
    margin:0 auto;

    .box{
        display:flex;
        justify-content:center;
        align-items:center;
        padding:21px 0 19px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:16px;
        line-height:24px;
        outline:1px solid #c0c2c4;
        border-radius:32px;
        transition:0.3s;

        &:first-child{
            color:#32373e;
            background:url('../images/common/red_circle_white_arrow.png') center right 20px / 24px no-repeat;
            background-color:#ffffff;

            &:hover{
                color:#c50018;
                border-color:#c50018;
            }
        }
        &:last-child{
            color:#ffffff;
            background:url('../images/common/white_circle_gray_arrow.png') center right 20px / 24px no-repeat;
            background-color:#32373e;

            &:hover{
                opacity:0.7;
            }
        }
    }
}
@media(max-width:1439px) and (min-width:769px){
    .fixed_area{
    display:block;   /* the page's older, never-built .fixed_area sets flex */
    gap:normal;
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            padding:1.111vw;
            background-color:rgba(223, 226, 229, 0.8);
            z-index:3000;
        }
    .fixed_container{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:1.389vw;
            /* max-width:83.333vw; */
            margin:0 auto;
    
            .box{
                display:flex;
                justify-content:center;
                align-items:center;
                padding:1.458vw 0 1.319vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                outline:0.069vw solid #c0c2c4;
                border-radius:2.222vw;
                transition:0.3s;
    
                &:first-child{
                    color:#32373e;
                    background:url('../images/common/red_circle_white_arrow.png') center right 1.389vw / 1.667vw no-repeat;
                    background-color:#ffffff;
    
                    &:hover{
                        color:#c50018;
                        border-color:#c50018;
                    }
                }
                &:last-child{
                    color:#ffffff;
                    background:url('../images/common/white_circle_gray_arrow.png') center right 1.389vw / 1.667vw no-repeat;
                    background-color:#32373e;
    
                    &:hover{
                        opacity:0.7;
                    }
                }
            }
        }
}
@media(max-width:768px){
    .fixed_area{
    display:block;   /* the page's older, never-built .fixed_area sets flex */
    gap:normal;
            padding:3.2vw 4.267vw;
        }
    .fixed_container{
            gap:2.4vw;

            .box{
                height:12.8vw;
                font-size:3.2vw;
                line-height:4.533vw;
                text-align:center;
            
                &:first-child{
                    padding:2.133vw 17.867vw 1.333vw 11.733vw;
                    background:url('../images/common/red_circle_white_arrow.png') center right 3.2vw / 6.4vw no-repeat;
                    background-color:#ffffff;
                }
                &:last-child{
                    padding:2.133vw 11.733vw 1.333vw 7.2vw;
                    background:url('../images/common/white_circle_gray_arrow.png') center right 3.2vw / 6.4vw no-repeat;
                    background-color:#32373e;
                }
            }
        }
}