/*-------------------- pc --------------------*/
/*---------- base > width:1440px ----------*/
.first_area{
	
}
.first_wrap{
    max-width:1120px;
	margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
    
	.text{
		margin-top:48px;

		p{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:16px;
			line-height:28px;
			text-align:center;
		}
	}
	.container{
		display:grid;
		gap:72px;
		margin-top:48px;

		.row{
			display:grid;
			grid-template-columns:repeat(2, 1fr);
			align-items:center;

			.img{
				img{
					width:100%;
				}
			}
			.box{
				padding:0 60px;

				h3{
					margin-bottom:21px;
					font-family:"IBM Plex Sans JP", sans-serif;
					font-weight:600;
					font-size:22px;
					line-height:33px;

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

.sale_area{
    padding-top:124px;

    &.step{
        padding-top:116px;
    }
    &.pc_pt153{
        padding-top:153px;
    }
}
.sale_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;

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

        &.center{
            text-align:center;
        }
		p{
			font-family:"IBM Plex Sans JP", sans-serif;
			font-weight:500;
			font-size:16px;
			line-height:28px;
		}
	}
    .flow{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:46px;
        margin-top:40px;

        .box{
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:16px;
            position:relative;
            padding:16px 34px 23px;
            background-color:#ffffff;
            border:1px solid #cccfd1;
            border-radius:4px;

            &:not(:last-child){
                &:before{
                    content:'';
                    position:absolute;
                    top:50%;
                    right:-32px;
                    transform:translateY(-50%);
                    border-top:40px solid transparent;
                    border-bottom:40px solid transparent;
                    border-left:16px solid #cccfd1;
                }
            }
            .number{
                font-family:"Jost", sans-serif;
                font-size:24px;
                line-height:36px;
                color:#c50018;
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:18px;
                line-height:28px;
                text-align:center;
            }
        }
    }
    .container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
        margin-top:40px;

        .box{
            padding:37px 120px 32px;
            background-color:#ffffff;
            border:1px solid #cccfd1;
            border-radius:4px;

            h3{
                margin-bottom:17px;
                padding-left:42px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:20px;
                line-height:30px;
                background:url('../images/common/square_red_check.png') center left 10px / 20px no-repeat;

                img{
                    width:20px;
                }
                span{
                    color:#c50018;
                }
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:16px;
                line-height:28px;
            }
        }
    }
    .banner{
        margin-top:40px;
    
        .box{
            /* <a> is inline by default and .banner is not a grid container;
               WebKit then resolves the abs-pos h3 against the empty inline
               fragment and collapses it to a 1-char column (CB SP S7). */
            display:block;
            position:relative;
            transition:0.3s;
    
            &:hover{
                opacity:0.7;
            }
            .img{
                position:relative;
                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%;
                }
            }
            h3{
                position:absolute;
                bottom:15px;
                right:20px;
                left:20px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:20px;
                line-height:32px;
                color:#ffffff;
                background:url('../images/common/white_circle_red_arrow.png') center right / 24px no-repeat;
                z-index:2;
            }
        }
    }
    .more_link{
        margin-top:40px;
    }
}

.step_area{
    margin-top:56px;
}
.step_headline{
    position:relative;
    height:50px;

    > div{
        position:absolute;
        top:0;
        width:360px;
        height:100%;
        padding:13px 0 10px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:18px;
        line-height:26px;
        text-align:center;
        color:#ffffff;
        border-top-right-radius:4px;
        border-top-left-radius:4px;
    }
    .left{
        right:50%;
        margin-right:100px;
        background-color:#c50018;
    }
    .right{
        left:50%;
        margin-left:100px;
        background-color:#32373e;
    }
}
.step_container{
    .column{
        position:relative;

        &:not(:first-child){
            padding-top:32px;

            &:before{
                content:'';
                position:absolute;
                top:-1px;
                bottom:0;
                right:50%;
                width:360px;
                margin-right:100px;
                background-color:#c50018;
                z-index:1;
            }
            &:after{
                content:'';
                position:absolute;
                top:-1px;
                bottom:0;
                left:50%;
                width:360px;
                margin-left:100px;
                background-color:#32373e;
                z-index:1;
            }
        }
        &:last-child{
            &:before{
                width:0;
                height:32px;
                background:none;
                border-right:180px solid transparent;
                border-left:180px solid transparent;
                border-top:32px solid #c50018;
            }
            &:after{
                width:0;
                height:32px;
                background:none;
                border-right:180px solid transparent;
                border-left:180px solid transparent;
                border-top:32px solid #32373e;
            }
        }
        .title{
            position:relative;
            padding:14px 0 13px;
            font-family:"Jost", sans-serif;
            font-weight:600;
            font-size:20px;
            line-height:30px;
            text-align:center;
            color:#ffffff;
            background-color:#6b6f75;
            border:1px solid #cccfd1;
            border-top-right-radius:4px;
            border-top-left-radius:4px;
            z-index:2;
        }
        .row{
            position:relative;
            z-index:2;

            &.col2{
                display:grid;
                grid-template-columns:repeat(2, 1fr);
                gap:20px;
            }
            .box{
                padding:32px 40px 24px;
                background-color:#ffffff;
                border:1px solid #cccfd1;
                border-top:0;
                border-bottom-right-radius:4px;
                border-bottom-left-radius:4px;

                &.red{
                    background-color:#fbf1f2;
                }
                &.gray{
                    background-color:#f0f1f4;
                }
                h3{
                    margin-bottom:10px;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:20px;
                    line-height:32px;
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:16px;
                    line-height:24px;
                }
            }
        }
    }
}

.fixed_area{
    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;
            }
        }
    }
}





/*-------------------- 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;
        
        .text{
            margin-top:3.333vw;
    
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.944vw;
                text-align:center;
            }
        }
        .container{
            display:grid;
            gap:5vw;
            margin-top:3.333vw;
    
            .row{
                display:grid;
                grid-template-columns:repeat(2, 1fr);
                align-items:center;
    
                .img{
                    img{
                        width:100%;
                    }
                }
                .box{
                    padding:0 4.167vw;
    
                    h3{
                        margin-bottom:1.458vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.528vw;
                        line-height:2.292vw;
    
                        span{
                            color:#c50018;
                        }
                    }
                    p{
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:1.111vw;
                        line-height:1.944vw;
                    }
                }
            }
        }
    }
    
    .sale_area{
        padding-top:8.611vw;
    
        &.step{
            padding-top:8.056vw;
        }
        &.pc_pt153{
            padding-top:10.625vw;
        }
    }
    .sale_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
    
        .text{
            /* max-width:55.556vw; */
            margin:3.333vw auto 0;
    
            &.center{
                text-align:center;
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.944vw;
            }
        }
        .flow{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:3.194vw;
            margin-top:2.778vw;
    
            .box{
                display:flex;
                flex-direction:column;
                align-items:center;
                gap:1.111vw;
                position:relative;
                padding:1.111vw 2.361vw 1.597vw;
                background-color:#ffffff;
                border:0.069vw solid #cccfd1;
                border-radius:0.278vw;
    
                &:not(:last-child){
                    &:before{
                        content:'';
                        position:absolute;
                        top:50%;
                        right:-2.222vw;
                        transform:translateY(-50%);
                        border-top:2.778vw solid transparent;
                        border-bottom:2.778vw solid transparent;
                        border-left:1.111vw solid #cccfd1;
                    }
                }
                .number{
                    font-family:"Jost", sans-serif;
                    font-size:1.667vw;
                    line-height:2.5vw;
                    color:#c50018;
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.25vw;
                    line-height:1.944vw;
                    text-align:center;
                }
            }
        }
        .container{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:1.389vw;
            margin-top:2.778vw;
    
            .box{
                padding:2.569vw 8.333vw 2.222vw;
                background-color:#ffffff;
                border:0.069vw solid #cccfd1;
                border-radius:0.278vw;
    
                h3{
                    margin-bottom:1.181vw;
                    padding-left:2.917vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.389vw;
                    line-height:2.083vw;
                    background:url('../images/common/square_red_check.png') center left 0.694vw / 1.389vw no-repeat;
    
                    img{
                        width:1.389vw;
                    }
                    span{
                        color:#c50018;
                    }
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.111vw;
                    line-height:1.944vw;
                }
            }
        }
        .banner{
            margin-top:2.778vw;
        
            .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:1.042vw;
                    right:1.389vw;
                    left:1.389vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.389vw;
                    line-height:2.222vw;
                    color:#ffffff;
                    background:url('../images/common/white_circle_red_arrow.png') center right / 1.667vw no-repeat;
                    z-index:2;
                }
            }
        }
        .more_link{
            margin-top:2.778vw;
        }
    }
    
    .step_area{
        margin-top:3.889vw;
    }
    .step_headline{
        position:relative;
        height:3.472vw;
    
        > div{
            position:absolute;
            top:0;
            width:25vw;
            height:100%;
            padding:0.903vw 0 0.694vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.25vw;
            line-height:1.806vw;
            text-align:center;
            color:#ffffff;
            border-top-right-radius:0.278vw;
            border-top-left-radius:0.278vw;
        }
        .left{
            right:50%;
            margin-right:6.944vw;
            background-color:#c50018;
        }
        .right{
            left:50%;
            margin-left:6.944vw;
            background-color:#32373e;
        }
    }
    .step_container{
        .column{
            position:relative;
    
            &:not(:first-child){
                padding-top:2.222vw;
    
                &:before{
                    content:'';
                    position:absolute;
                    top:-0.069vw;
                    bottom:0;
                    right:50%;
                    width:25vw;
                    margin-right:6.944vw;
                    background-color:#c50018;
                    z-index:1;
                }
                &:after{
                    content:'';
                    position:absolute;
                    top:-0.069vw;
                    bottom:0;
                    left:50%;
                    width:25vw;
                    margin-left:6.944vw;
                    background-color:#32373e;
                    z-index:1;
                }
            }
            &:last-child{
                &:before{
                    width:0;
                    height:2.222vw;
                    background:none;
                    border-right:12.5vw solid transparent;
                    border-left:12.5vw solid transparent;
                    border-top:2.222vw solid #c50018;
                }
                &:after{
                    width:0;
                    height:2.222vw;
                    background:none;
                    border-right:12.5vw solid transparent;
                    border-left:12.5vw solid transparent;
                    border-top:2.222vw solid #32373e;
                }
            }
            .title{
                position:relative;
                padding:0.972vw 0 0.903vw;
                font-family:"Jost", sans-serif;
                font-weight:600;
                font-size:1.389vw;
                line-height:2.083vw;
                text-align:center;
                color:#ffffff;
                background-color:#6b6f75;
                border:0.069vw solid #cccfd1;
                border-top-right-radius:0.278vw;
                border-top-left-radius:0.278vw;
                z-index:2;
            }
            .row{
                position:relative;
                z-index:2;
    
                &.col2{
                    display:grid;
                    grid-template-columns:repeat(2, 1fr);
                    gap:1.389vw;
                }
                .box{
                    padding:2.222vw 2.778vw 1.667vw;
                    background-color:#ffffff;
                    border:0.069vw solid #cccfd1;
                    border-top:0;
                    border-bottom-right-radius:0.278vw;
                    border-bottom-left-radius:0.278vw;
    
                    &.red{
                        background-color:#fbf1f2;
                    }
                    &.gray{
                        background-color:#f0f1f4;
                    }
                    h3{
                        margin-bottom:0.694vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.389vw;
                        line-height:2.222vw;
                    }
                    p{
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:1.111vw;
                        line-height:1.667vw;
                    }
                }
            }
        }
    }
    
    .fixed_area{
        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;
                }
            }
        }
    }
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px){
    .first_area{
	
    }
    .first_wrap{
        padding:0 4.267vw;
        
        .text{
            margin-top:8.533vw;
    
            p{
                font-size:3.733vw;
                line-height:6.4vw;
                text-align:left;
            }
        }
        .container{
            gap:10.667vw;
            margin-top:12.8vw;
    
            .row{
                grid-template-columns:1fr;
                gap:6.4vw;
                
                .img{
                    order:1;
                }
                .box{
                    order:2;
                    padding:0;
    
                    h3{
                        margin-bottom:4vw;
                        font-size:4.8vw;
                        line-height:6.933vw;
                    }
                    p{
                        font-size:4.267vw;
                        line-height:7.467vw;
                    }
                }
            }
        }
    }
    
    .sale_area{
        padding-top:17.067vw;
    
        &.step{
            padding-top:15.2vw;
        }
        &.sp_pt83{
            padding-top:22.133vw;
        }
        &.sp_pt91{
            padding-top:24.267vw;
        }
    }
    .sale_wrap{
        padding:0 4.267vw;
    
        .text{
            margin:8.533vw auto 0;
    
            &.center{
                text-align:left;
            }
            p{
                font-size:3.733vw;
                line-height:6.4vw;
            }
        }
        .flow{
            grid-template-columns:1fr;
            gap:8.533vw;
            margin-top:4.533vw;
    
            .box{
                flex-direction:unset;
                align-items:baseline;
                gap:3.733vw;
                padding:6.4vw 4.267vw 4.267vw;
                
                &:not(:last-child){
                    &:before{
                        top:auto;
                        right:auto;
                        bottom:-6.4vw;
                        left:50%;
                        transform:translateX(-50%);
                        border-top:4.267vw solid #cccfd1;
                        border-right:10.667vw solid transparent;
                        border-bottom:0;
                        border-left:10.667vw solid transparent;
                    }
                }
                .number{
                    font-size:5.333vw;
                    line-height:8vw;
                }
                p{
                    font-size:4.267vw;
                    line-height:6.4vw;
                    text-align:left;
                }
            }
        }
        .container{
            grid-template-columns:1fr;
            gap:4.267vw;
            margin-top:8.533vw;
    
            .box{
                padding:6.4vw 4.267vw 4.533vw;
                
                h3{
                    margin-bottom:2.133vw;
                    padding-left:8.533vw;
                    font-size:4.8vw;
                    line-height:6.933vw;
                    background:url('../images/common/square_red_check.png') top left / 5.333vw no-repeat;
    
                    img{
                        width:5.333vw;
                    }
                }
                p{
                    font-size:3.733vw;
                    line-height:5.333vw;
                }
            }
        }
        .banner{
            margin-top:6.667vw;
        
            .box{
                .img{
                    height:32vw;
                    overflow:hidden;

                    
                    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;
                }
            }
        }
        .more_link{
            margin-top:8.533vw;
        }
    }
    
    .step_area{
        position:relative;
        margin:6.667vw calc(50% - 50vw) 0;
        padding:0 2.667vw 0 4.267vw;

        &:after{
            content:'';
            position:absolute;
            bottom:0;
            left:0;
            right:0;
            height:8.533vw;
            background:linear-gradient(transparent, #f0f1f4);
            z-index:10;
        }
    }
    .step_headline{
        height:10.133vw;

        > div{
            width:26.667vw;
            padding:2.4vw 0 2.133vw;
            font-size:3.733vw;
            line-height:5.333vw;
        }
        .left{
            margin-right:10.667vw;
        }
        .right{
            margin-left:10.667vw;
        }
    }
    .step_container{
        padding:0 2.667vw 4.267vw 0;
        height:96.533vw;
        overflow:auto;
        
        &::-webkit-scrollbar{
            width:1.067vw;
            height:1.067vw;
        }
        &::-webkit-scrollbar-thumb{
            background:#c50018;
            border-radius:1.067vw;
        }
        &::-webkit-scrollbar-track{
            background:#cccfd1;
            border-radius:1.067vw;
        }
        .column{
            &:not(:first-child){
                padding-top:6.4vw;
    
                &:before{
                    width:26.667vw;
                    right:calc(50% - 1.867vw);
                    margin-right:10.667vw;
                }
                &:after{
                    width:26.667vw;
                    left:calc(50% + 1.867vw);
                    margin-left:10.667vw;
                }
            }
            &:last-child{
                &:before{
                    width:0;
                    height:6.4vw;
                    border-right:13.333vw solid transparent;
                    border-left:13.333vw solid transparent;
                    border-top:6.4vw solid #c50018;
                }
                &:after{
                    width:0;
                    height:6.4vw;
                    border-right:13.333vw solid transparent;
                    border-left:13.333vw solid transparent;
                    border-top:6.4vw solid #32373e;
                }
            }
            .title{
                display:flex;
                flex-direction:column;
                padding:2.667vw 0 1.6vw;
                font-size:5.333vw;
                line-height:5.333vw;

                span{
                    font-size:2.667vw;
                    line-height:2.667vw;
                }
            }
            .row{
                &.col2{
                    gap:1.867vw;
                }
                .box{
                    padding:6.4vw 4.267vw 4.533vw;
                    
                    h3{
                        margin-bottom:2.133vw;
                        font-size:4.267vw;
                        line-height:6.4vw;
                    }
                    p{
                        font-size:3.733vw;
                        line-height:5.333vw;
                    }
                }
            }
        }
    }

    .fixed_area{
        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;
            }
        }
    }
    
    /* .first_area{
	
    }
    .first_wrap{
        padding:0 16px;
        
        .text{
            margin-top:32px;
    
            p{
                font-size:14px;
                line-height:24px;
                text-align:left;
            }
        }
        .container{
            gap:40px;
            margin-top:48px;
    
            .row{
                grid-template-columns:1fr;
                gap:24px;
                
                .img{
                    order:1;
                }
                .box{
                    order:2;
                    padding:0;
    
                    h3{
                        margin-bottom:15px;
                        font-size:18px;
                        line-height:26px;
                    }
                    p{
                        font-size:16px;
                        line-height:28px;
                    }
                }
            }
        }
    }
    
    .sale_area{
        padding-top:64px;
    
        &.step{
            padding-top:57px;
        }
        &.sp_pt83{
            padding-top:83px;
        }
        &.sp_pt91{
            padding-top:91px;
        }
    }
    .sale_wrap{
        padding:0 16px;
    
        .text{
            margin:32px auto 0;
    
            &.center{
                text-align:left;
            }
            p{
                font-size:14px;
                line-height:24px;
            }
        }
        .flow{
            grid-template-columns:1fr;
            gap:32px;
            margin-top:17px;
    
            .box{
                flex-direction:unset;
                align-items:baseline;
                gap:14px;
                padding:24px 16px 16px;
                
                &:not(:last-child){
                    &:before{
                        top:auto;
                        right:auto;
                        bottom:-24px;
                        left:50%;
                        transform:translateX(-50%);
                        border-top:16px solid #cccfd1;
                        border-right:40px solid transparent;
                        border-bottom:0;
                        border-left:40px solid transparent;
                    }
                }
                .number{
                    font-size:20px;
                    line-height:30px;
                }
                p{
                    font-size:16px;
                    line-height:24px;
                    text-align:left;
                }
            }
        }
        .container{
            grid-template-columns:1fr;
            gap:16px;
            margin-top:32px;
    
            .box{
                padding:24px 16px 17px;
                
                h3{
                    margin-bottom:8px;
                    padding-left:32px;
                    font-size:18px;
                    line-height:26px;
                    background:url('../images/common/square_red_check.png') top left / 20px no-repeat;
    
                    img{
                        width:20px;
                    }
                }
                p{
                    font-size:14px;
                    line-height:20px;
                }
            }
        }
        .banner{
            margin-top:25px;
        
            .box{
                .img{
                    height:120px;
                    overflow:hidden;

                    
                    img{
                        width:100%;
                        height:100%;
                        object-fit:cover;
                    }
                }
                h3{
                    bottom:6px;
                    right:16px;
                    left:16px;
                    font-size:16px;
                    line-height:24px;
                    background:url('../images/common/white_circle_red_arrow.png') center right / 20px no-repeat;
                }
            }
        }
        .more_link{
            margin-top:32px;
        }
    }
    
    .compare_area{
        margin-top:25px;
    }
    .compare_headline{
        grid-template-columns:1fr 88px 88px;
        margin-bottom:16px;
        
        > div{
            display:flex;
            justify-content:center;
            align-items:center;
            padding:17px 0 14px;
            font-size:12px;
            line-height:18px;
        }
        .black{
            padding-left:16px;
        }
    }
    .compare_container{
        gap:16px;
    
        .box{
            .top{
                grid-template-columns:1fr 88px 88px;
                
                > div{
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    padding:0;
                    font-size:14px;
                    line-height:20px;
                }
                .black{
                    padding:16px 16px 9px;
                    font-size:14px;
                    line-height:20px;
                }
            }
            .center{
                padding:9px 0;
                font-size:14px;
                line-height:20px;
                
                span{
                    padding-right:20px;
                    background:url('../images/common/gray_circle_white_plus.png') top 2px right 0 / 16px no-repeat;
                }
                &.active{
                    span{
                        background:url('../images/common/gray_circle_white_minus.png') top 2px right 0 / 16px no-repeat;
                    }
                }
            }
            .bottom{
                display:none;
                padding:16px 16px 9px;
                font-size:14px;
                line-height:20px;

                &.active{
                    display:block;
                }
            }
        }
    }
    
    .step_area{
        position:relative;
        margin:25px calc(50% - 50vw) 0;
        padding:0 10px 0 16px;

        &:after{
            content:'';
            position:absolute;
            bottom:0;
            left:0;
            right:0;
            height:32px;
            background:linear-gradient(transparent, #f0f1f4);
            z-index:10;
        }
    }
    .step_headline{
        height:38px;

        > div{
            width:100px;
            padding:9px 0 8px;
            font-size:14px;
            line-height:20px;
        }
        .left{
            margin-right:40px;
        }
        .right{
            margin-left:40px;
        }
    }
    .step_container{
        padding:0 10px 16px 0;
        height:362px;
        overflow:auto;
        
        &::-webkit-scrollbar{
            width:4px;
            height:4px;
        }
        &::-webkit-scrollbar-thumb{
            background:#c50018;
            border-radius:4px;
        }
        &::-webkit-scrollbar-track{
            background:#cccfd1;
            border-radius:4px;
        }
        .column{
            &:not(:first-child){
                padding-top:24px;
    
                &:before{
                    width:100px;
                    right:calc(50% - 7px);
                    margin-right:40px;
                }
                &:after{
                    width:100px;
                    left:calc(50% + 7px);
                    margin-left:40px;
                }
            }
            &:last-child{
                &:before{
                    width:0;
                    height:24px;
                    border-right:50px solid transparent;
                    border-left:50px solid transparent;
                    border-top:24px solid #c50018;
                }
                &:after{
                    width:0;
                    height:24px;
                    border-right:50px solid transparent;
                    border-left:50px solid transparent;
                    border-top:24px solid #32373e;
                }
            }
            .title{
                display:flex;
                flex-direction:column;
                padding:10px 0 6px;
                font-size:20px;
                line-height:20px;

                span{
                    font-size:10px;
                    line-height:10px;
                }
            }
            .row{
                &.col2{
                    gap:7px;
                }
                .box{
                    padding:24px 16px 17px;
                    
                    h3{
                        margin-bottom:8px;
                        font-size:16px;
                        line-height:24px;
                    }
                    p{
                        font-size:14px;
                        line-height:20px;
                    }
                }
            }
        }
    }

    .fixed_area{
        padding:12px 16px;
    }
    .fixed_container{
        gap:9px;

        .box{
            height:48px;
            font-size:12px;
            line-height:17px;
            text-align:center;
            
            &:first-child{
                padding:8px 67px 5px 44px;
                background:url('../images/common/red_circle_white_arrow.png') center right 12px / 24px no-repeat;
                background-color:#ffffff;
            }
            &:last-child{
                padding:8px 44px 5px 27px;
                background:url('../images/common/white_circle_gray_arrow.png') center right 12px / 24px no-repeat;
                background-color:#32373e;
            }
        }
    } */
}

/* task119 -- the header is position:fixed, so an anchor landing drops the section
   title behind it. Same treatment and same value as the faq anchors (ledger B17).
   Every 買取サービス menu item on the site jumps here: /sale/#kaitori-service. */
#kaitori-service {
    scroll-margin-top: calc(var(--sumstock-header-h, 100px) + 24px);
}

/* task179 (CB 2026-08-21): the fallback has to track the header, and the header is not
   a constant -- common.css sizes it 100px at >=1440 (its own .hide transform), 6.944vw
   across the fluid range (same), and 17.867vw at SP (.header_wrap height). Measured:
   100 / 83.3@1200 / 67@375. The flat 100px therefore overshot by 17px at 1200 and 33px
   at 375. --sumstock-header-h is only ever published by search-app.js, which neither
   page loads, so the fallback is what actually runs here -- keep the var in front so a
   page that ever does publish it still wins. */
@media(max-width:1439px) and (min-width:769px){
    #kaitori-service {
        scroll-margin-top: calc(var(--sumstock-header-h, 6.944vw) + 24px);
    }
}
@media(max-width:768px){
    #kaitori-service {
        scroll-margin-top: calc(var(--sumstock-header-h, 17.867vw) + 24px);
    }
}