/*-------------------- pc --------------------*/
/*---------- デザインベースはwidth:1440px ----------*/
.main_page{
    position:relative;
}
.mv_area{
    position:relative;
    background-color:#f0f1f4;
    overflow:hidden;
    z-index:2000;

    .slick-dotted.slick-slider{
        margin:0;
    }
    .slick-dots{
        display:flex;
        gap:20px;
        bottom:137px;
        /* bottom:41px; */
        left:40px;
        width:auto;
        opacity:0;

        &.active{
            animation:slick-dots 1.2s ease-out forwards;
        }
        li{
            width:auto;
            height:auto;
            margin:0;

            button{
                width:8px;
                height:8px;
                background-color:#ffffff;
                border-radius:50%;
                opacity:0.35;

                &:before{
                    content:none;
                }
            }
            &.slick-active{
                button{
                    opacity:1;
                }
            }
        }
    }
}
@keyframes slick-dots{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

.mv_header{
    display:flex;
    justify-content: space-between;
    align-items:center;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:110px;
    padding:0 40px 0 29px;
    background:linear-gradient(rgba(0, 0, 0, 0.4), transparent);
    z-index:20;
    transform:translateY(-400px);

    &.active{
        animation:mv_header 1.2s ease-out forwards;
    }
    &:before{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:400px;
        height:400px;
        background:url('../images/top/mv_title_back.svg') top left / cover no-repeat;
        z-index:-1;
    }
    &:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:110px;
        background-color:#ffffff;
        opacity:0;
        visibility:hidden;
        transition:0.3s;
        z-index:6000;
    }
    h1{
        display:flex;
        align-items:center;
        gap:4px;
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:16px;
        line-height:53px;
        color:#ffffff;
        z-index:6000;

        img{
            width:222px;
        }
    }
}
@keyframes mv_header{
    0%{
        transform:translateY(-400px);
    }
    100%{
        transform:translateY(0);
    }
}
.mv_open_title{
    display:none;
}
.mv_link{
    display:flex;
    align-items:center;
    gap:48px;
    z-index:7000;
}
.mv_link_nav{
    display:flex;
    align-items:center;
    gap:32px;

    a{
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:16px;
        line-height:24px;
        color:#ffffff;

        &:hover{
            text-decoration:underline;
        }
    }
}
.mv_hamburger{
    position:relative;
    width:56px;
    height:56px;
    background-color:#ffffff;
    border:1px solid #cccfd1;
    border-radius:4px;
    cursor:pointer;
    transition:0.3s;
    z-index:7000;

    span{
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        width:24px;
        height:2px;
        background-color:#c50018;
        transition:0.3s;

        &.top{
            top:21px;
        }
        &.middle_top{
            top:27px;
        }
        &.middle_bottom{
            top:27px;
        }
        &.bottom{
            top:33px;
        }
    }
}
.mv_nav{
	display:block;
	position:fixed;
	top:110px;
	left:0;
	width:100%;
    height:calc(100vh - 110px);
	background:rgba(0, 0, 0, 0.6);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:5000;
}
.mv_nav_area{
    position:absolute;
    top:0;
    right:0;
    width:420px;
    height:100%;
    padding:53px 40px 56px;
    background-color:#ffffff;
    overflow:auto;
}
.mv_nav_list{
    display:grid;
    gap:45px;

    .box{
        border-bottom:1px solid #c6c9cc;
    }
}
.mv_nav_toggle{
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    padding:0 0 14px 12px;
    background:url('../images/common/red_circle_white_plus.png') top 5px right / 20px no-repeat;
    cursor:pointer;


    &.active{
        background:url('../images/common/red_circle_white_minus.png') top 5px right / 20px no-repeat;
    }
    &:before{
        content:'';
        position:absolute;
        top:3px;
        left:0;
        width:3px;
        height:20px;
        background-color:#c50018;
    }
    .ja{
        margin:0;
        font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:20px;
		line-height:30px;
    }
    .en{
        margin:0;
        font-family:"Jost", sans-serif;
		font-weight:600;
		font-size:14px;
        color:#b5b7ba;
    }
}
.mv_nav_link{
    display:none;
    
    &.active{
        display:block;
    }
    a{
        display:flex;
        align-items:center;
        gap:12px;
        padding:22px 0;
        font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:16px;
        line-height:24px;
        color:#32373e;
        background:url('../images/common/red_arrow_right.png') center right / 20px no-repeat;
        border-top:1px solid #c6c9cc;

        img{
            width:64px;
        }
    }
}
.mv_nav_container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    margin-top:48px;

    a{
        display:flex;
        align-items:center;
        gap:8px;
        height:66px;
        padding:0 16px 0 12px;
        font-family:"IBM Plex Sans JP", sans-serif;
		font-weight:600;
		font-size:14px;
        line-height:20px;
        text-align:center;
        color:#32373e;
        border:1px solid #c6c9cc;
        border-radius:4px;

        &.sm{
            font-size:12px;
            line-height:15px;
        }
        img{
            width:28px;
        }
    }
}
/*---------- mv > header-open ----------*/
body.mv_nav_open{
	overflow:hidden;

    .mv_header{
        &:after{
            opacity:1;
            visibility:visible;
        }
        h1{
            display:none;
        }
    }
    .mv_open_title{
        display:flex;
        align-items:center;
        gap:4px;
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:16px;
        line-height:53px;
        color:#32373e;
        z-index:7000;

        img{
            width:222px;
        }
    }
    .mv_link_nav{
        a{
            color:#32373e;
        }
    }
    .mv_hamburger{
        background-color:#c50018;

        span{
            background-color:#ffffff;
        }
		.top{
			opacity:0;
		}
		.middle_top{
			transform:translateX(-50%) rotate(30deg);
        }
        .middle_bottom{
            transform:translateX(-50%) rotate(-30deg);
        }
		.bottom{
			opacity:0;
		}
	}
	.mv_nav{
		opacity:1;
		visibility:visible;
	}
    .mv_area{
        z-index:5000;
    }
}

.mv_slider{
    position:relative;
    z-index:10;

    .slick-track{
        height:100vh;
        /* height:calc(100vh - 96px); */
    }
}
.mv_img{
    position:relative;

    img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .text{
        position:absolute;
        bottom:170px;
        /* bottom:74px; */
        left:40px;
        opacity:0;
        z-index:10;

        &.active{
            animation:mv_img_text 1.2s ease-out forwards;
        }
        h2{
            margin-bottom:13px;
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:52px;
            line-height:63px;
            color:#ffffff;
            text-shadow:0 0 15px rgba(0, 0, 0, 0.5);
        }
        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:20px;
            line-height:32px;
            color:#ffffff;
            text-shadow:0 0 15px rgba(0, 0, 0, 0.5);
        }
    }
    .back{
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:466px;
        /* height:280px; */
        background:linear-gradient(transparent, rgba(0, 0, 0, 0.6));
        z-index:5;
        transform:translateY(366px);
        /* transform:translateY(280px); */

        &.active{
            animation:mv_img_back 1.2s ease-out forwards;
        }
    }
}
@keyframes mv_img_text{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes mv_img_back{
    0%{
        transform:translateY(366px);
        /* transform:translateY(280px); */
    }
    100%{
        transform:translateY(0);
    }
}
.mv_scroll{
    position:absolute;
    right:50px;
    bottom:137px;
    /* bottom:41px; */
    width:1px;
    height:200px;
    opacity:0;
    z-index:15;

    &.active{
        animation:mv_scroll 1.2s ease-out forwards;
    }
}
@keyframes mv_scroll{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.mv_scroll_bar{
    position:relative;
    height:100%;
    cursor:pointer;

    span{
        display:block;
        transform:rotate(90deg);
        text-transform:uppercase;
        font-family:"Jost", sans-serif;
        font-size:16px;
        color:#ffffff;
    }
    .line{
        position:absolute;
        bottom:0;
        left:0;
        width:1px;
        height:120px;
        background:rgba(255, 255, 255, 0.25);

        &:before{
            content:'';
            position:absolute;
            top:0;
            right:0;
            width:100%;
            height:100%;
            background-color:#ffffff;
            animation:mv_scroll_bar_span 2s ease-out forwards;
            animation-iteration-count:infinite;
        }
    }
}
@keyframes mv_scroll_bar_span{
    0%{
        opacity: 0;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
    5%{
        opacity: 1;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
    59%{
        opacity: 1;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
    60%{
        opacity: 1;
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
    100%{
        opacity: 1;
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
}

.en_title{
    position:relative;
    padding:0 20px;
    font-family:"Jost", sans-serif;
    font-size:16px;
    line-height:24px;

    span{
        &.left{
            position:absolute;
            top:0;
            left:0;
            width:16px;
            height:16px;
            background:url('../images/common/brackets_left.png') center / 16px no-repeat;
            /* background-color:#c50018;
            overflow:hidden;

            &:before{
                content:'';
                position:absolute;
                top:0;
                left:0;
                width:32px;
                height:32px;
                background-color:#f0f1f4;
                border-radius:50%;
            } */
        }
        &.right{
            position:absolute;
            bottom:0;
            right:0;
            width:16px;
            height:16px;
            background:url('../images/common/brackets_right.png') center / 16px no-repeat;
            /* background-color:#c50018;
            overflow:hidden;

            &:before{
                content:'';
                position:absolute;
                bottom:0;
                right:0;
                width:32px;
                height:32px;
                background-color:#f0f1f4;
                border-radius:50%;
            } */
        }
    }
}

.whats_area{
    padding-top:134px;
}
.whats_back{
    background:url('../images/top/whats_back.webp') top 47% center / contain no-repeat;
    background-color:#f0f1f4;
}
.whats_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.whats_headline{
    display:flex;
    justify-content:center;
    margin-bottom:48px;
}
.whats_maker{
    margin-bottom:64px;

    h2{
        margin-bottom:48px;
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:48px;
        line-height:64px;
        letter-spacing:-0.96px;
        text-align:center;

        .lg{
            .red{
                color:#c50018;
            }
        }
    }
    p{
        margin:0 auto 20px;
        padding:13px 0 11px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:16px;
        line-height:24px;
        text-align:center;
        border-top:1px solid #cccfd1;
        border-bottom:1px solid #cccfd1;
    }
    ul{
        display:grid;
        grid-template-columns:repeat(5, 1fr);
        gap:18px 20px;
    }
}
.whats_container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    max-width:960px;
    margin:0 auto 48px;

    .box{
        display:grid;
        grid-template-columns:140px 1fr;
        align-items:center;
        gap:20px;
        padding:24px 20px;
        background-color:#ffffff;
        outline:1px solid #cccfd1;
        border-radius:4px;

        img{
            width:100%;
        }
        .text{
            h3{
                margin-bottom:16px;
                padding-bottom:5px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:20px;
                line-height:32px;
                border-bottom:1px solid #cccfd1;

                span{
                    display:block;
                    margin-bottom:5px;
                    font-size:14px;
                    line-height:20px;
                    color:#6b6f75;
                }
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:16px;
                line-height:24px;
            }
        }
        &:last-child{
            color:#ffffff;
            background-color:#32373e;

            .text{
                h3{
                    border-bottom:1px solid #6b6f75;

                    span{
                        color:#cccfd1;
                    }
                }
            }
        }
    }
}

.free_area{
    padding:72px 0 124px;
}
.free_wrap{
    max-width:1280px;
    margin:0 auto;
    padding:72px 20px;
    background-color:#ffffff;
    border-radius:4px;
    box-sizing:content-box;
}
.free_in_wrap{
    max-width:960px;
    margin:0 auto;

    .banner{
        margin-bottom:32px;

        img{
            width:100%;
            margin-bottom:40px;
        }
        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:16px;
            line-height:28px;
            text-align:center;
        }
    }
    .container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:40px;
        margin-bottom:40px;

        .box{
            display:grid;
            grid-template-columns:132px 1fr;
            align-items:center;
            gap:24px;
            padding:32px 0;
            background:url('../images/common/red_arrow_right.png') center right 10px / 24px no-repeat;
            background-color:#ffffff;
            border-top:1px solid #cccfd1;
            border-bottom:1px solid #cccfd1;
            transition:0.3s;

            &:hover{
                opacity:0.7;
            }
            img{
                width:100%;
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                color:#32373e;

                .lg{
                    font-size:24px;
                    line-height:32px;
                }
                .md{
                    font-size:20px;
                    line-height:30px;
                }
                .sm{
                    font-size:16px;
                    line-height:24px;
                }
                .red{
                    color:#c50018;
                }
            }
        }
    }
}

.search_area{
    padding:96px 0;
    background:url('../images/top/search_back.webp') center / cover no-repeat;
}
.search_wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.search_headline{
    display:flex;
    align-items:center;
    flex-direction:column;
    margin-bottom:48px;

    .en_title{
        color:#ffffff;
    }
    p{
        margin:24px 0 16px;
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:20px;
        line-height:30px;
        letter-spacing:-0.8px;
        color:#ffffff;
        opacity:0.7;
    }
    h2{
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:40px;
        line-height:60px;
        letter-spacing:-1.2px;
        color:#ffffff;
    }
}
.search_partition{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-bottom:48px;
    padding:32px 0;
    border-top:1px solid #646974;
    border-bottom:1px solid #646974;

    img{
        width:24px;
    }
    h3{
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:22px;
        line-height:33px;
        color:#ffffff;
    }
}
.search_container{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:24px 20px;

    a{
        display:flex;
        justify-content:center;
        align-items:center;
        height:80px;
        padding:5px 0;
        background-color:#ffffff;
        border-radius:60px;
        overflow:hidden;
        transition:0.3s;

        &:hover{
            outline:1px solid #c50018;
            opacity: 0.7;
        }
        img{
            width:100%;
            height:100%;
            object-fit:contain;
        }
    }
}
.search_toggle_btn{
    display:none;
}

.arrival_area{
    padding:96px 0;
    background:url('../images/top/arrival_back.webp') top -2px center / cover no-repeat;
    overflow:hidden;
}
.arrival_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.arrival_headline{
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:24px;
    margin-bottom:48px;

    .en_title{
        color:#ffffff;
    }
    h2{
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:40px;
        line-height:60px;
        letter-spacing:-1.2px;
        color:#ffffff;
    }
}
.arrival_slider{
    margin-bottom:48px !important;

    .slick-list{
        overflow:visible;
    }
    .slide_arrow{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:80px;
        height:64px;
		background-color:#32373e;
		cursor:pointer;
		z-index:100;
	}
    .prev_arrow{
        left:-40px;
		background:url('../images/common/slider_prev.png') center / cover no-repeat;
	}
	.next_arrow{
        right:-40px;
		background:url('../images/common/slider_next.png') center / cover no-repeat;
	}
    .slick-dots{
        display:flex;
        justify-content:center;
        gap:20px;
        position:static;
        margin-top:32px;
        
        li{
            width:auto;
            height:auto;
            margin:0;

            button{
                width:8px;
                height:8px;
                background-color:#ffffff;
                border-radius:50%;
                opacity:0.35;

                &:before{
                    content:none;
                }
            }
            &.slick-active{
                button{
                    opacity:1;
                }
            }
        }
    }
}
.arrival_box{
    margin:0 10px;
    padding:0 25px 28px;
    background-color:#ffffff;
    border:1px solid #cccfd1;
    border-radius:4px;
    transition:0.3s;

    &:hover{
        border-color:#c50018;
        opacity:0.7;

        .img{
            img{
                transform:scale(1.1);
            }
        }
    }
    .logo{
        display:flex;
        justify-content:center;

        img{
            width:140px;
        }
    }
    .img{
        margin-bottom:20px;
        border-radius:4px;
        overflow:hidden;

        img{
            width:100%;
            transition:0.3s;
        }
    }
    .detail{
        h3{
            margin-bottom:8px;
            padding-bottom:12px;
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:20px;
            line-height:30px;
            letter-spacing:-0.6px;
            color:#32373e;
            background:url('../images/common/red_arrow_right.png') top 4px right 0 / 24px no-repeat;
            border-bottom:1px solid #cccfd1;
        }
        .price_main{
            display:flex;
            align-items:baseline;
            gap:4px;
            margin-bottom:1px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:16px;
            line-height:24px;
            color:#32373e;

            span{
                font-size:24px;
                line-height:36px;
                color:#c50018;
            }
        }
        .price_sub{
            display:flex;
            gap:16px;
            margin-bottom:12px;

            /* task179 (CB 2026-08-21): 建物価格 shows to the LEFT of 土地価格. Swapped
               here and not in the markup because market-area.js fills the two <dl>s by
               position (rows[0]=土地, rows[1]=建物) and the same script also feeds
               /buy/ and the market pages, whose markup keeps 土地価格 first -- flipping
               the markup would put the land figure under the 建物価格 label everywhere
               else. Each <dl> carries its own <dt>, so reading order stays unambiguous.
               ponytail: flip markup + key the fill in market-area.js if this row ever
               grows a third entry or the other pages need the same order.
               task192 (2026-08-26): the other pages did -- .common_arrival_box carries
               its own copy of this rule in common.css. Two rules now; edit both. */
            dl:nth-child(2){
                order:-1;
            }

            dl{
                display:flex;
                align-items:center;
                gap:17px;
                margin:0;

                dt{
                    position:relative;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:14px;
                    line-height:20px;
                    color:#32373e;

                    &:before{
                        content:'';
                        position:absolute;
                        top:50%;
                        right:-8px;
                        transform:translateY(-50%);
                        width:1px;
                        height:14px;
                        background-color:#cccfd1;
                    }
                }
                dd{
                    margin:0;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:14px;
                    line-height:20px;
                    color:#32373e;
                }
            }
        }
        ul{
            display:flex;
            flex-wrap:wrap;
            gap:8px;

            li{
                padding:3px 12px 2px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:14px;
                line-height:20px;
                color:#32373e;
                border:1px solid #cccfd1;
                border-radius:16px;
            }
        }
    }
}

.about_area{
    padding-top:124px;
}
.about_wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.about_headline{
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:24px;
    margin-bottom:48px;

    h2{
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:40px;
        line-height:60px;
        letter-spacing:-1.2px;
    }
}
.about_partition{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:48px;
    padding:28px 0 25px;
    border-top:1px solid #cccfd1;
    border-bottom:1px solid #cccfd1;

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

        span{
            color:#c50018;
        }
    }
}
.about_explain{
    display:grid;
    gap:72px;
    margin-bottom:72px;
}
.about_explain_box{
    .img{
        position:relative;
        margin-bottom:28px;

        img{
            width:100%;
        }
        h3{
            display:flex;
            justify-content:center;
            align-items:baseline;
            position:absolute;
            bottom:0;
            left:50%;
            transform:translateX(-50%);
            width:100%;
            max-width:800px;
            padding:24px 0 4px;
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:32px;
            line-height:48px;
            background-color:#f0f1f4;

            .red{
                color:#c50018;
            }
            .lg{
                font-size:64px;
                line-height:64px;
            }
            .md{
                font-size:48px;
                line-height:64px;
            }
        }
    }
    > p{
        margin-bottom:32px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:16px;
        line-height:28px;
        text-align:center;
    }
    .container{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:20px;
        margin-bottom:32px;

        .box{
            display:flex;
            align-items:center;
            gap:28px;
            padding:32px 17px 32px 24px;
            background-color:#ffffff;
            border:1px solid #cccfd1;
            border-radius:4px;

            img{
                width:64px;
            }
            .text{
                position:relative;

                &:before{
                    content:'';
                    position:absolute;
                    top:50%;
                    left:-17px;
                    transform:translateY(-50%);
                    width:1px;
                    height:90px;
                    background-color:#cccfd1;
                }
                h4{
                    margin-bottom:6px;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:20px;
                    line-height:30px;

                    /* task179 (CB 2026-08-21): hanging indent. The ordinal sits at the
                       left edge and the sentence starts one --ordinal-w in, so a wrapped
                       second line lines up with the first line's text instead of tucking
                       under the number. One custom property feeds both the indent and the
                       ordinal's width -- they have to match exactly or the two lines
                       drift apart. em-based, so each breakpoint scales it by font-size. */
                    --ordinal-w:1.4em;
                    padding-left:var(--ordinal-w);
                    text-indent:calc(var(--ordinal-w) * -1);

                    span{
                        color:#c50018;
                    }
                    /* task162: the ordinal stays in the heading colour so the red
                       emphasis keeps pointing at the keyword, not the number.
                       task179: it hangs inside .text rather than outside it (which is
                       what /sumstock/need/ does) -- the card has an icon and a divider
                       rule immediately left of .text, so there is no outer margin to
                       hang into. */
                    span.about_explain_no{
                        color:#33363a;
                        display:inline-block;
                        width:var(--ordinal-w);
                        /* text-indent inherits, and inline-block makes this a block
                           container -- without the reset the numeral itself gets the
                           negative indent and paints on top of the divider rule that
                           sits immediately left of .text. */
                        text-indent:0;
                    }
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:14px;
                    line-height:20px;
                    color:#6b6f75;
                }
            }
        }
    }
}
.about_concept{
    display:grid;
    gap:69px;
}
.about_concept_box{
    .title{
        max-width:960px;
        margin:0 auto 24px;
        text-align:center;

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

            &:before{
                content:'';
                position:absolute;
                top:50%;
                left:0;
                transform:translateY(-50%);
                width:333px;
                height:1px;
                background-color:#cccfd1;
            }
            &:after{
                content:'';
                position:absolute;
                top:50%;
                right:0;
                transform:translateY(-50%);
                width:333px;
                height:1px;
                background-color:#cccfd1;
            }
        }
        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:16px;
            line-height:28px;

            .space{
                display:none;
            }
        }
    }
    .container{
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:22px;
        margin-bottom:40px;

        .box{
            padding:29px 28px 21px;
            background-color:#ffffff;
            border:1px solid #cccfd1;
            border-radius:4px;
            transition:0.3s;

            &.red{
                background-color:#fbf1f2;
            }
            &:hover{
                border-color:#c50018;
                opacity:0.7;

                .img{
                    img{
                        transform:scale(1.1);
                    }
                }
            }
            h4{
                margin-bottom:14px;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:18px;
                line-height:26px;
                text-align:center;
                color:#c50018;

                span{
                    display:block;
                    margin-bottom:5px;
                    font-size:14px;
                    line-height:18px;
                    color:#6b6f75;
                }
            }
            .img{
                margin-bottom:19px;
                overflow:hidden;

                img{
                    width:100%;
                    transition:0.3s;
                }
            }
            p{
                max-width:104px;
                margin:0 auto;
                padding-right:24px;
                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 0 / 20px no-repeat;
                box-sizing:content-box;
            }
        }
    }
}

.anshin_area{
    padding-top:124px;
}
.anshin_wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.anshin_headline{
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:24px;
    margin-bottom:48px;

    h2{
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:40px;
        line-height:60px;
        letter-spacing:-1.2px;
    }
}
.anshin_partition{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:16px;
    margin-bottom:48px;
    padding:19px 0;
    border-top:1px solid #cccfd1;
    border-bottom:1px solid #cccfd1;

    img{
        width:48px;
    }
    h3{
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:22px;
        line-height:33px;

        span{
            color:#c50018;
        }
    }
}
.anshin_img{
    margin-bottom:64px;

    img{
        width:100%;
        margin-bottom:32px;
    }
    p{
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:500;
        font-size:16px;
        line-height:28px;
        text-align:center;
    }
}
.anshin_container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-bottom:40px;

    .box{
        padding:29px 80px 21px;
        background-color:#ffffff;
        border:1px solid #cccfd1;
        border-radius:4px;

        h4{
            margin-bottom:17px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:20px;
            line-height:24px;
            text-align:center;
            color:#c50018;
        }
        img{
            width:100%;
            margin-bottom:19px;
        }
        p{
            max-width:104px;
            margin:0 auto;
            padding-right:24px;
            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 0 / 20px no-repeat;
            box-sizing:content-box;
        }
    }
}

.customer_area{
    padding-top:124px;
}
.customer_wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.customer_headline{
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:24px;
    margin-bottom:48px;

    h2{
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:40px;
        line-height:60px;
        letter-spacing:-1.2px;
    }
}
.customer_tab{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:4px;
    margin-bottom:32px;

    button{
        display:flex;
        justify-content:center;
        padding:0 0 9px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:20px;
        line-height:30px;
        background:none;
        border-bottom:4px solid #32373e;
        color: var(--premium-black);

        span{
            padding:0 28px;
        }

        &.active{
            color:#c50018;
            border-color:#c50018;

            span{
                background:url('../images/common/red_arrow_bottom.png') center right 0 / 20px no-repeat;
            }
        }
    }
}
.customer_toggle_area{
    margin-bottom:40px;
}
.customer_toggle_box{
    display:none;

    &.active{
        display:block;
    }
    .container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
        
        .box{
            display:grid;
            grid-template-columns:1fr 117px;
            padding:29px 24px 21px;
            background-color:#ffffff;
            border:1px solid #cccfd1;
            border-radius:4px;
            transition:0.3s;

            &:hover{
                border-color:#c50018;
                opacity:0.7;

                .right{
                    .img{
                        img{
                            transform:scale(1.1);
                        }
                    }
                }
            }
            .left{
                .head{
                    display:flex;
                    align-items:center;
                    gap:16px;
                    margin-bottom:13px;

                    .voice{
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:14px;
                        line-height:20px;
                        color:#c50018;
                    }
                    .user{
                        padding-left:12px;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:14px;
                        line-height:20px;
                        color:#6b6f75;
                        background:url('../images/top/customer_icon.svg') center left 0 / 8px no-repeat;
                    }
                }
                h3{
                    margin-bottom:21px;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:20px;
                    line-height:30px;
                    color:#32373e;
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:14px;
                    line-height:20px;
                    color:#6b6f75;
                }
            }
            .right{
                .img{
                    margin-bottom:23px;
                    overflow:hidden;

                    img{
                        width:100%;
                        transition:0.3s;
                    }
                }
                p{
                    padding-right:24px;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:16px;
                    line-height:24px;
                    text-align:right;
                    color:#32373e;
                    background:url('../images/common/red_circle_white_arrow.png') center right 0 / 20px no-repeat;
                }
            }
        }
    }
}

.news_area{
    padding-top:124px;
}
.news_wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.news_headline{
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:24px;
    margin-bottom:48px;

    h2{
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:40px;
        line-height:60px;
        letter-spacing:-1.2px;
    }
}
.news_container{
    margin-bottom:40px;
    border-bottom:1px solid #cccfd1;

    .box{
        display:flex;
        align-items:center;
        gap:90px;
        padding:48px 0 44px;
        background:url('../images/common/red_arrow_right.png') center right 16px / 24px no-repeat;
        border-top:1px solid #cccfd1;
        transition:0.3s;

        &:hover{
            opacity:0.7;
        }
        .date{
            margin:0;
            font-family:"Jost", sans-serif;
            font-size:14px;
            line-height:20px;
            color:#6b6f75;
        }
        h3{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:16px;
            line-height:24px;
            color:#32373e;
        }
    }
}

.column_area{
    padding:124px 0 144px;
    overflow:hidden;
}
.column_wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.column_headline{
    display:flex;
    align-items:center;
    flex-direction:column;
    gap:24px;
    margin-bottom:48px;

    h2{
        font-family:"Shippori Mincho B1", serif;
        font-weight:700;
        font-size:40px;
        line-height:60px;
        letter-spacing:-1.2px;
    }
}
.column_partition{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:45px;
    padding:28px 0 25px;
    border-top:1px solid #cccfd1;
    border-bottom:1px solid #cccfd1;

    h3{
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:22px;
        line-height:33px;
    }
}
.column_tab{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:4px;
    margin-bottom:32px;

    button{
        display:flex;
        justify-content:center;
        padding:0 0 9px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:20px;
        line-height:30px;
        background:none;
        border-bottom:4px solid #32373e;
        color: var(--premium-black);

        span{
            padding:0 28px;
        }

        &.active{
            color:#c50018;
            border-color:#c50018;

            span{
                background:url('../images/common/red_arrow_bottom.png') center right 0 / 20px no-repeat;
            }
        }
    }
}
.column_toggle_area{
    margin-bottom:40px;
}
.column_toggle_box{
    display:none;

    &.active{
        display:block;
    }
    .slick-dotted.slick-slider{
        margin:0;
    }
}
.column_slider{
    .slick-list{
        overflow:visible;
    }
    .slide_arrow{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        width:80px;
        height:64px;
		background-color:#32373e;
		cursor:pointer;
		z-index:100;
	}
    .prev_arrow{
        left:-40px;
		background:url('../images/common/slider_prev.png') center / cover no-repeat;
	}
	.next_arrow{
        right:-40px;
		background:url('../images/common/slider_next.png') center / cover no-repeat;
	}
    .slick-dots{
        display:flex;
        justify-content:center;
        gap:20px;
        position:static;
        margin-top:32px;
        
        li{
            width:auto;
            height:auto;
            margin:0;

            button{
                width:8px;
                height:8px;
                background-color:#32373e;
                border-radius:50%;
                opacity:0.35;

                &:before{
                    content:none;
                }
            }
            &.slick-active{
                button{
                    opacity:1;
                }
            }
        }
    }
}
.column_box{
    margin:0 10px;
    padding:24px 20px 16px;
    background-color:#ffffff;
    border:1px solid #cccfd1;
    border-radius:4px;
    transition:0.3s;

    &:hover{
        border-color:#c50018;
        opacity:0.7;

        .img{
            img{
                transform:scale(1.1);
            }
        }
    }
    .img{
        margin-bottom:20px;
        border-radius:4px;
        overflow:hidden;

        img{
            width:100%;
            transition:0.3s;
        }
    }
    .head{
        display:flex;
        align-items:center;
        gap:12px;
        margin-bottom:23px;
        
        .date{
            font-family:"Jost", sans-serif;
            font-size:14px;
            line-height:20px;
            color:#6b6f75;
        }
        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:14px;
            line-height:20px;
            color:#c50018;
        }
    }
    h4{
        margin-bottom:12px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:18px;
        line-height:26px;
        color:#32373e;
    }
    ul{
        display:flex;
        flex-wrap:wrap;
        gap:8px;

        li{
            padding:3px 12px 2px;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:14px;
            line-height:20px;
            color:#32373e;
            border:1px solid #cccfd1;
            border-radius:16px;
        }
    }
}

.sns_area{
    padding:48px 0;
    background-color:#ffffff;
}
.sns_wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:content-box;
}
.sns_container{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;

    .box{
        display:flex;
        justify-content:center;
        padding:21px 0;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:20px;
        line-height:32px;
        color:#32373e;
        border:1px solid #c0c2c4;
        border-radius:4px;
        transition:0.3s;

        &:hover{
            border-color:#c50018;
            opacity:0.7;
        }
        &:first-child{
            background:url('../images/common/insta_icon.png') center left 10px / 64px no-repeat;
        }
        &:last-child{
            background:url('../images/common/youtube_icon.png') center left 10px / 64px no-repeat;
        }
    }
}


.fixed_area{
    display:flex;
    justify-content:center;
    gap:20px;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:16px;
    background-color:rgba(223, 226, 229, 0.8);
    transform:translateY(200px);
    z-index:3000;

    &.active{
        transform:translateY(0);
        animation:fixed_area 1.2s ease-out forwards;
    }
}
@keyframes fixed_area{
    0%{
        transform:translateY(200px);
    }
    100%{
        transform:translateY(0);
    }
}
.fixed_box{
    width:100%;
    max-width:590px;

    p{
        display:none;
    }
    a{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:12px;
        padding:19px 44px 15px;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:20px;
        line-height:30px;
        color:#32373e;
        border-radius:32px;
        transition:0.3s;

        &:hover{
            opacity:0.7;
        }
        .slash{
            position:relative;
            padding:0 16px;
            font-size:16px;
            line-height:21px;

            &:before{
                content:'';
                position:absolute;
                top:9px;
                left:0;
                transform:rotate(65deg);
                width:16px;
                height:1px;
                background-color:#32373e;
            }
            &:after{
                content:'';
                position:absolute;
                top:9px;
                right:0;
                transform:rotate(-65deg);
                width:16px;
                height:1px;
                background-color:#32373e;
            }
            .red{
                color:#c50018;
            }
        }
    }
    &:nth-child(1){
        a{
            background:url('../images/common/red_circle_white_arrow.png') center right 20px / 24px no-repeat;
            background-color:#ffffff;
        }
    }
    &:nth-child(2){
        a{
            color:#ffffff;
            background:url('../images/common/white_circle_gray_arrow.png') center right 20px / 24px no-repeat;
            background-color:#32373e;

            .slash{
                &:before, &:after{
                    background-color:#ffffff;
                }
            }
        }
    }
}

.modal_area{
    display:none;
}

.loading_area{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;

    svg{
        width:100%;
        height:100%;
    }
    .hole{
        transform:scale(0);

        &.active{
            animation:loading_hole 1.3s ease-in-out forwards;
            transform-origin:center;
        }
    }
}
@keyframes loading_hole{
    0%{
        transform:scale(0);
    }
    100%{
        transform:scale(20);
    }
}

.loading_img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    opacity:0;
    
    img{
        width:246px;
    }
    &.loading1{
        animation:loading1 1.2s ease-in-out forwards;
        opacity:1;
    }
    &.loading2{
        animation:loading2 1.2s ease-in-out forwards;
        opacity:0;
    }
}
@keyframes loading1{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes loading2{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}





/*-------------------- pc-spの間 --------------------*/
/*---------- base > width:1440px ----------*/
@media(max-width:1439px) and (min-width:769px){
    .main_page{
        position:relative;
    }
    .mv_area{
        position:relative;
        background-color:#f0f1f4;
        overflow:hidden;
        z-index:2000;
    
        .slick-dotted.slick-slider{
            margin:0;
        }
        .slick-dots{
            display:flex;
            gap:1.389vw;
            bottom:9.514vw;
            /* bottom:2.847vw; */
            left:2.778vw;
            width:auto;
            opacity:0;
    
            &.active{
                animation:slick-dots 1.2s ease-out forwards;
            }
            li{
                width:auto;
                height:auto;
                margin:0;
    
                button{
                    width:0.556vw;
                    height:0.556vw;
                    background-color:#ffffff;
                    border-radius:50%;
                    opacity:0.35;
    
                    &:before{
                        content:none;
                    }
                }
                &.slick-active{
                    button{
                        opacity:1;
                    }
                }
            }
        }
    }
    @keyframes slick-dots{
        0%{
            opacity:0;
        }
        100%{
            opacity:1;
        }
    }
    
    .mv_header{
        display:flex;
        justify-content: space-between;
        align-items:center;
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:7.639vw;
        padding:0 2.778vw 0 2.014vw;
        background:linear-gradient(rgba(0, 0, 0, 0.4), transparent);
        z-index:20;
        transform:translateY(-27.778vw);
    
        &.active{
            animation:mv_header 1.2s ease-out forwards;
        }
        &:before{
            content:'';
            position:absolute;
            top:0;
            left:0;
            width:27.778vw;
            height:27.778vw;
            background:url('../images/top/mv_title_back.svg') top left / cover no-repeat;
            z-index:-1;
        }
        &:after{
            content:'';
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:7.639vw;
            background-color:#ffffff;
            opacity:0;
            visibility:hidden;
            transition:0.3s;
            z-index:6000;
        }
        h1{
            display:flex;
            align-items:center;
            gap:0.278vw;
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:1.111vw;
            line-height:3.681vw;
            color:#ffffff;
            z-index:6000;
    
            img{
                width:15.417vw;
            }
        }
    }
    @keyframes mv_header{
        0%{
            transform:translateY(-27.778vw);
        }
        100%{
            transform:translateY(0);
        }
    }
    .mv_open_title{
        display:none;
    }
    .mv_link{
        display:flex;
        align-items:center;
        gap:3.333vw;
        z-index:7000;
    }
    .mv_link_nav{
        display:flex;
        align-items:center;
        gap:2.222vw;
    
        a{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.111vw;
            line-height:1.667vw;
            color:#ffffff;
    
            &:hover{
                text-decoration:underline;
            }
        }
    }
    .mv_hamburger{
        position:relative;
        width:3.889vw;
        height:3.889vw;
        background-color:#ffffff;
        border:0.069vw solid #cccfd1;
        border-radius:0.278vw;
        cursor:pointer;
        transition:0.3s;
        z-index:7000;
    
        span{
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            width:1.667vw;
            height:0.139vw;
            background-color:#c50018;
            transition:0.3s;
    
            &.top{
                top:1.458vw;
            }
            &.middle_top{
                top:1.875vw;
            }
            &.middle_bottom{
                top:1.875vw;
            }
            &.bottom{
                top:2.292vw;
            }
        }
    }
    .mv_nav{
        display:block;
        position:fixed;
        top:7.639vw;
        left:0;
        width:100%;
        height:calc(100vh - 7.639vw);
        background:rgba(0, 0, 0, 0.6);
        opacity:0;
        visibility:hidden;
        transition:0.3s;
        z-index:5000;
    }
    .mv_nav_area{
        position:absolute;
        top:0;
        right:0;
        width:29.167vw;
        height:100%;
        padding:3.681vw 2.778vw 3.889vw;
        background-color:#ffffff;
        overflow:auto;
    }
    .mv_nav_list{
        display:grid;
        gap:3.125vw;
    
        .box{
            border-bottom:0.069vw solid #c6c9cc;
        }
    }
    .mv_nav_toggle{
        display:flex;
        align-items:center;
        gap:0.833vw;
        position:relative;
        padding:0 0 0.972vw 0.833vw;
        background:url('../images/common/red_circle_white_plus.png') top 0.347vw right / 1.389vw no-repeat;
        cursor:pointer;
    
        &.active{
            background:url('../images/common/red_circle_white_minus.png') top 0.347vw right / 1.389vw no-repeat;
        }
        &:before{
            content:'';
            position:absolute;
            top:0.208vw;
            left:0;
            width:0.208vw;
            height:1.389vw;
            background-color:#c50018;
        }
        .ja{
            margin:0;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.389vw;
            line-height:2.083vw;
        }
        .en{
            margin:0;
            font-family:"Jost", sans-serif;
            font-weight:600;
            font-size:0.972vw;
            color:#b5b7ba;
        }
    }
    .mv_nav_link{
        display:none;
        
        &.active{
            display:block;
        }
        a{
            display:flex;
            align-items:center;
            gap:0.833vw;
            padding:1.528vw 0;
            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_arrow_right.png') center right / 1.389vw no-repeat;
            border-top:0.069vw solid #c6c9cc;
    
            img{
                width:4.444vw;
            }
        }
    }
    .mv_nav_container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:0.833vw;
        margin-top:3.333vw;
    
        a{
            display:flex;
            align-items:center;
            gap:0.556vw;
            height:4.583vw;
            padding:0 1.111vw 0 0.833vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:0.972vw;
            line-height:1.389vw;
            text-align:center;
            color:#32373e;
            border:0.069vw solid #c6c9cc;
            border-radius:0.278vw;
    
            &.sm{
                font-size:0.833vw;
                line-height:1.042vw;
            }
            img{
                width:1.944vw;
            }
        }
    }
    /*---------- mv > header-open ----------*/
    body.mv_nav_open{
        overflow:hidden;
    
        .mv_header{
            &:after{
                opacity:1;
                visibility:visible;
            }
            h1{
                display:none;
            }
        }
        .mv_open_title{
            display:flex;
            align-items:center;
            gap:0.278vw;
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:1.111vw;
            line-height:3.681vw;
            color:#32373e;
            z-index:7000;
    
            img{
                width:15.417vw;
            }
        }
        .mv_link_nav{
            a{
                color:#32373e;
            }
        }
        .mv_hamburger{
            background-color:#c50018;
    
            span{
                background-color:#ffffff;
            }
            .top{
                opacity:0;
            }
            .middle_top{
                transform:translateX(-50%) rotate(30deg);
            }
            .middle_bottom{
                transform:translateX(-50%) rotate(-30deg);
            }
            .bottom{
                opacity:0;
            }
        }
        .mv_nav{
            opacity:1;
            visibility:visible;
        }
        .mv_area{
            z-index:5000;
        }
    }

    .mv_slider{
        position:relative;
        z-index:10;

        .slick-track{
            height:100vh;
            /* height:calc(100vh - 6.667vw); */
        }
    }
    .mv_img{
        position:relative;
    
        img{
            width:100%;
        }
        .text{
            position:absolute;
            bottom:11.806vw;
            /* bottom:5.139vw; */
            left:2.778vw;
            opacity:0;
            z-index:10;
    
            &.active{
                animation:mv_img_text 1.2s ease-out forwards;
            }
            h2{
                margin-bottom:0.903vw;
                font-family:"Shippori Mincho B1", serif;
                font-weight:700;
                font-size:3.611vw;
                line-height:4.375vw;
                color:#ffffff;
                text-shadow:0 0 15px rgba(0, 0, 0, 0.5);
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.389vw;
                line-height:2.222vw;
                color:#ffffff;
                text-shadow:0 0 15px rgba(0, 0, 0, 0.5);
            }
        }
        .back{
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            height:25.417vw;
            /* height:19.444vw; */
            background:linear-gradient(transparent, rgba(0, 0, 0, 0.6));
            z-index:5;
            transform:translateY(25.417vw);
            /* transform:translateY(19.444vw); */
    
            &.active{
                animation:mv_img_back 1.2s ease-out forwards;
            }
        }
    }
    @keyframes mv_img_text{
        0%{
            opacity:0;
        }
        100%{
            opacity:1;
        }
    }
    @keyframes mv_img_back{
        0%{
            transform:translateY(25.417vw);
            /* transform:translateY(19.444vw); */
        }
        100%{
            transform:translateY(0);
        }
    }
    .mv_scroll{
        position:absolute;
        right:3.472vw;
        bottom:9.514vw;
        /* bottom:2.847vw; */
        width:0.069vw;
        height:13.889vw;
        opacity:0;
        z-index:50;
    
        &.active{
            animation:mv_scroll 1.2s ease-out forwards;
        }
    }
    @keyframes mv_scroll{
        0%{
            opacity:0;
        }
        100%{
            opacity:1;
        }
    }
    .mv_scroll_bar{
        position:relative;
        height:100%;
        cursor:pointer;
    
        span{
            display:block;
            transform:rotate(90deg);
            text-transform:uppercase;
            font-family:"Jost", sans-serif;
            font-size:1.111vw;
            color:#ffffff;
        }
        .line{
            position:absolute;
            bottom:0;
            left:0;
            width:0.069vw;
            height:8.333vw;
            background:rgba(255, 255, 255, 0.25);
    
            &:before{
                content:'';
                position:absolute;
                top:0;
                right:0;
                width:100%;
                height:100%;
                background-color:#ffffff;
                animation:mv_scroll_bar_span 2s ease-out forwards;
                animation-iteration-count:infinite;
            }
        }
    }
    @keyframes mv_scroll_bar_span{
        0%{
            opacity: 0;
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: top;
            transform-origin: top;
        }
        5%{
            opacity: 1;
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: top;
            transform-origin: top;
        }
        59%{
            opacity: 1;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transform-origin: top;
            transform-origin: top;
        }
        60%{
            opacity: 1;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transform-origin: bottom;
            transform-origin: bottom;
        }
        100%{
            opacity: 1;
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: bottom;
            transform-origin: bottom;
        }
    }
    
    .en_title{
        position:relative;
        padding:0 1.389vw;
        font-family:"Jost", sans-serif;
        font-size:1.111vw;
        line-height:1.667vw;
    
        span{
            &.left{
                position:absolute;
                top:0;
                left:0;
                width:1.111vw;
                height:1.111vw;
                background:url('../images/common/brackets_left.png') center / 1.111vw no-repeat;
                /* background-color:#c50018;
                overflow:hidden;
    
                &:before{
                    content:'';
                    position:absolute;
                    top:0;
                    left:0;
                    width:2.222vw;
                    height:2.222vw;
                    background-color:#f0f1f4;
                    border-radius:50%;
                } */
            }
            &.right{
                position:absolute;
                bottom:0;
                right:0;
                width:1.111vw;
                height:1.111vw;
                background:url('../images/common/brackets_right.png') center / 1.111vw no-repeat;
                /* background-color:#c50018;
                overflow:hidden;
    
                &:before{
                    content:'';
                    position:absolute;
                    bottom:0;
                    right:0;
                    width:2.222vw;
                    height:2.222vw;
                    background-color:#f0f1f4;
                    border-radius:50%;
                } */
            }
        }
    }
    
    .whats_area{
        padding-top:9.306vw;
    }
    .whats_back{
        background:url('../images/top/whats_back.webp') top 40% center / contain no-repeat;
        background-color:#f0f1f4;
    }
    .whats_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .whats_headline{
        display:flex;
        justify-content:center;
        margin-bottom:3.333vw;
    }
    .whats_maker{
        margin-bottom:4.444vw;
    
        h2{
            margin-bottom:3.333vw;
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:3.333vw;
            line-height:4.444vw;
            letter-spacing:-0.067vw;
            text-align:center;
    
            .lg{
                .red{
                    color:#c50018;
                }
            }
        }
        ul{
            display:grid;
            grid-template-columns:repeat(5, 1fr);
            gap:1.25vw 1.389vw;
        }
    }
    .whats_container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:1.389vw;
        /* max-width:66.667vw; */
        margin:0 auto 3.333vw;
    
        .box{
            display:grid;
            grid-template-columns:9.722vw 1fr;
            align-items:center;
            gap:1.389vw;
            padding:1.667vw 1.389vw;
            background-color:#ffffff;
            outline:1px solid #cccfd1;
            border-radius:0.278vw;
    
            img{
                width:100%;
            }
            .text{
                h3{
                    margin-bottom:1.111vw;
                    padding-bottom:0.347vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.389vw;
                    line-height:2.222vw;
                    border-bottom:1px solid #cccfd1;
    
                    span{
                        display:block;
                        margin-bottom:0.347vw;
                        font-size:0.972vw;
                        line-height:1.389vw;
                        color:#6b6f75;
                    }
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:1.111vw;
                    line-height:1.667vw;
                }
            }
            &:last-child{
                color:#ffffff;
                background-color:#32373e;
    
                .text{
                    h3{
                        border-bottom:1px solid #6b6f75;
    
                        span{
                            color:#cccfd1;
                        }
                    }
                }
            }
        }
    }
    
    .free_area{
        padding:5vw 0 8.611vw;
    }
    .free_wrap{
        /* max-width:88.889vw; */
        margin:0 auto;
        padding:5vw 1.389vw;
        background-color:#ffffff;
        border-radius:0.278vw;
        box-sizing:content-box;
    }
    .free_in_wrap{
        /* max-width:66.667vw; */
        margin:0 auto;
    
        .banner{
            margin-bottom:2.222vw;
    
            img{
                width:100%;
                margin-bottom:2.778vw;
            }
            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;
            grid-template-columns:repeat(2, 1fr);
            gap:2.778vw;
            margin-bottom:2.778vw;
    
            .box{
                display:grid;
                grid-template-columns:9.167vw 1fr;
                align-items:center;
                gap:1.667vw;
                padding:2.222vw 0;
                background:url('../images/common/red_arrow_right.png') center right 0.694vw / 1.667vw no-repeat;
                background-color:#ffffff;
                border-top:0.069vw solid #cccfd1;
                border-bottom:0.069vw solid #cccfd1;
                transition:0.3s;
    
                &:hover{
                    opacity:0.7;
                }
                img{
                    width:100%;
                }
                p{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    color:#32373e;
    
                    .lg{
                        font-size:1.667vw;
                        line-height:2.222vw;
                    }
                    .md{
                        font-size:1.389vw;
                        line-height:2.083vw;
                    }
                    .sm{
                        font-size:1.111vw;
                        line-height:1.667vw;
                    }
                    .red{
                        color:#c50018;
                    }
                }
            }
        }
    }
    
    .search_area{
        padding:6.667vw 0;
        background:url('../images/top/search_back.webp') center / cover no-repeat;
    }
    .search_wrap{
        /* max-width:88.889vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .search_headline{
        display:flex;
        align-items:center;
        flex-direction:column;
        margin-bottom:3.333vw;
    
        .en_title{
            color:#ffffff;
        }
        p{
            margin:1.667vw 0 1.111vw;
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:1.389vw;
            line-height:2.083vw;
            letter-spacing:-0.056vw;
            color:#ffffff;
            opacity:0.7;
        }
        h2{
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:2.778vw;
            line-height:4.167vw;
            letter-spacing:-0.083vw;
            color:#ffffff;
        }
    }
    .search_partition{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:0.556vw;
        margin-bottom:3.333vw;
        padding:2.222vw 0;
        border-top:0.069vw solid #646974;
        border-bottom:0.069vw solid #646974;
    
        img{
            width:1.667vw;
        }
        h3{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.528vw;
            line-height:2.292vw;
            color:#ffffff;
        }
    }
    .search_container{
        display:grid;
        grid-template-columns:repeat(5, 1fr);
        gap:1.667vw 1.389vw;
    
        a{
            display:flex;
            justify-content:center;
            align-items:center;
            height:5.556vw;
            padding:0.347vw 0;
            background-color:#ffffff;
            border-radius:4.167vw;
            overflow:hidden;
            transition:0.3s;
    
            &:hover{
                outline:0.069vw solid #c50018;
            }
            img{
                width:100%;
                height:100%;
                object-fit:contain;
            }
        }
    }
    .search_toggle_btn{
        display:none;
    }
    
    .arrival_area{
        padding:6.667vw 0;
        background:url('../images/top/arrival_back.webp') top -0.139vw center / cover no-repeat;
        overflow:hidden;
    }
    .arrival_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .arrival_headline{
        display:flex;
        align-items:center;
        flex-direction:column;
        gap:1.667vw;
        margin-bottom:3.333vw;
    
        .en_title{
            color:#ffffff;
        }
        h2{
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:2.778vw;
            line-height:4.167vw;
            letter-spacing:-0.083vw;
            color:#ffffff;
        }
    }
    .arrival_slider{
        margin-bottom:3.333vw !important;
    
        .slick-list{
            overflow:visible;
        }
        .slide_arrow{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:5.556vw;
            height:4.444vw;
            background-color:#32373e;
            cursor:pointer;
            z-index:100;
        }
        .prev_arrow{
            left:-2.778vw;
            background:url('../images/common/slider_prev.png') center / cover no-repeat;
        }
        .next_arrow{
            right:-2.778vw;
            background:url('../images/common/slider_next.png') center / cover no-repeat;
        }
        .slick-dots{
            display:flex;
            justify-content:center;
            gap:1.389vw;
            position:static;
            margin-top:2.222vw;
            
            li{
                width:auto;
                height:auto;
                margin:0;
    
                button{
                    width:0.556vw;
                    height:0.556vw;
                    background-color:#ffffff;
                    border-radius:50%;
                    opacity:0.35;
    
                    &:before{
                        content:none;
                    }
                }
                &.slick-active{
                    button{
                        opacity:1;
                    }
                }
            }
        }
    }
    .arrival_box{
        margin:0 0.694vw;
        padding:0 1.736vw 1.944vw;
        background-color:#ffffff;
        border:0.069vw solid #cccfd1;
        border-radius:0.278vw;
        transition:0.3s;
    
        &:hover{
            border-color:#c50018;
            opacity:0.7;
    
            .img{
                img{
                    transform:scale(1.1);
                }
            }
        }
        .logo{
            display:flex;
            justify-content:center;
    
            img{
                width:9.722vw;
            }
        }
        .img{
            margin-bottom:1.389vw;
            border-radius:0.278vw;
            overflow:hidden;
    
            img{
                width:100%;
                transition:0.3s;
            }
        }
        .detail{
            h3{
                margin-bottom:0.556vw;
                padding-bottom:0.833vw;
                font-family:"Shippori Mincho B1", serif;
                font-weight:700;
                font-size:1.389vw;
                line-height:2.083vw;
                letter-spacing:-0.042vw;
                color:#32373e;
                background:url('../images/common/red_arrow_right.png') top 0.278vw right 0 / 1.667vw no-repeat;
                border-bottom:0.069vw solid #cccfd1;
            }
            .price_main{
                display:flex;
                align-items:baseline;
                gap:0.278vw;
                margin-bottom:0.069vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                color:#32373e;
    
                span{
                    font-size:1.667vw;
                    line-height:2.5vw;
                    color:#c50018;
                }
            }
            .price_sub{
                display:flex;
                gap:1.111vw;
                margin-bottom:0.833vw;
    
                dl{
                    display:flex;
                    align-items:center;
                    gap:1.181vw;
                    margin:0;
    
                    dt{
                        position:relative;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:0.972vw;
                        line-height:1.389vw;
                        color:#32373e;
    
                        &:before{
                            content:'';
                            position:absolute;
                            top:50%;
                            right:-0.556vw;
                            transform:translateY(-50%);
                            width:0.069vw;
                            height:0.972vw;
                            background-color:#cccfd1;
                        }
                    }
                    dd{
                        margin:0;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:500;
                        font-size:0.972vw;
                        line-height:1.389vw;
                        color:#32373e;
                    }
                }
            }
            ul{
                display:flex;
                flex-wrap:wrap;
                gap:0.556vw;
    
                li{
                    padding:0.208vw 0.833vw 0.139vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:0.972vw;
                    line-height:1.389vw;
                    color:#32373e;
                    border:0.069vw solid #cccfd1;
                    border-radius:1.111vw;
                }
            }
        }
    }
    
    .about_area{
        padding-top:8.611vw;
    }
    .about_wrap{
        /* max-width:88.889vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .about_headline{
        display:flex;
        align-items:center;
        flex-direction:column;
        gap:1.667vw;
        margin-bottom:3.333vw;
    
        h2{
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:2.778vw;
            line-height:4.167vw;
            letter-spacing:-0.083vw;
        }
    }
    .about_partition{
        display:flex;
        justify-content:center;
        align-items:center;
        margin-bottom:3.333vw;
        padding:1.944vw 0 1.736vw;
        border-top:0.069vw solid #cccfd1;
        border-bottom:0.069vw solid #cccfd1;
    
        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.528vw;
            line-height:2.292vw;
    
            span{
                color:#c50018;
            }
        }
    }
    .about_explain{
        display:grid;
        gap:5vw;
        margin-bottom:5vw;
    }
    .about_explain_box{
        .img{
            position:relative;
            margin-bottom:1.944vw;
    
            img{
                width:100%;
            }
            h3{
                display:flex;
                justify-content:center;
                align-items:baseline;
                position:absolute;
                bottom:0;
                left:50%;
                transform:translateX(-50%);
                width:100%;
                /* max-width:55.556vw; */
                padding:1.667vw 0 0.278vw;
                font-family:"Shippori Mincho B1", serif;
                font-weight:700;
                font-size:2.222vw;
                line-height:3.333vw;
                background-color:#f0f1f4;
    
                .red{
                    color:#c50018;
                }
                .lg{
                    font-size:4.444vw;
                    line-height:4.444vw;
                }
                .md{
                    font-size:3.333vw;
                    line-height:4.444vw;
                }
            }
        }
        > p{
            margin-bottom:2.222vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.111vw;
            line-height:1.944vw;
            text-align:center;
        }
        .container{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:1.389vw;
            margin-bottom:2.222vw;
    
            .box{
                display:flex;
                align-items:center;
                gap:1.944vw;
                padding:2.222vw 1.181vw 2.222vw 1.667vw;
                background-color:#ffffff;
                border:0.069vw solid #cccfd1;
                border-radius:0.278vw;
    
                img{
                    width:4.444vw;
                }
                .text{
                    position:relative;
    
                    &:before{
                        content:'';
                        position:absolute;
                        top:50%;
                        left:-1.181vw;
                        transform:translateY(-50%);
                        width:0.069vw;
                        height:6.25vw;
                        background-color:#cccfd1;
                    }
                    h4{
                        margin-bottom:0.417vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.389vw;
                        line-height:2.083vw;
    
                        span{
                            color:#c50018;
                        }
                    }
                    p{
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:0.972vw;
                        line-height:1.389vw;
                        color:#6b6f75;
                    }
                }
            }
        }
    }
    .about_concept{
        display:grid;
        gap:4.792vw;
    }
    .about_concept_box{
        .title{
            /* max-width:66.667vw; */
            margin:0 auto 1.667vw;
            text-align:center;
    
            h3{
                position:relative;
                margin-bottom:2.292vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.389vw;
                line-height:2.083vw;
    
                &:before{
                    content:'';
                    position:absolute;
                    top:50%;
                    left:0;
                    transform:translateY(-50%);
                    width:23.125vw;
                    height:0.069vw;
                    background-color:#cccfd1;
                }
                &:after{
                    content:'';
                    position:absolute;
                    top:50%;
                    right:0;
                    transform:translateY(-50%);
                    width:23.125vw;
                    height:0.069vw;
                    background-color:#cccfd1;
                }
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:1.111vw;
                line-height:1.944vw;
    
                .space{
                    display:none;
                }
            }
        }
        .container{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:1.528vw;
            margin-bottom:2.778vw;
    
            .box{
                padding:2.014vw 1.944vw 1.458vw;
                background-color:#ffffff;
                border:0.069vw solid #cccfd1;
                border-radius:0.278vw;
                transition:0.3s;
    
                &.red{
                    background-color:#fbf1f2;
                }
                &:hover{
                    border-color:#c50018;
                    opacity:0.7;
    
                    .img{
                        img{
                            transform:scale(1.1);
                        }
                    }
                }
                h4{
                    margin-bottom:0.972vw;
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:600;
                    font-size:1.25vw;
                    line-height:1.806vw;
                    text-align:center;
                    color:#c50018;
    
                    span{
                        display:block;
                        margin-bottom:0.347vw;
                        font-size:0.972vw;
                        line-height:1.25vw;
                        color:#6b6f75;
                    }
                }
                .img{
                    margin-bottom:1.319vw;
                    overflow:hidden;
    
                    img{
                        width:100%;
                        transition:0.3s;
                    }
                }
                p{
                    /* max-width:7.222vw; */
                    margin:0 auto;
                    padding-right:1.667vw;
                    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 0 / 1.389vw no-repeat;
                    box-sizing:content-box;
                }
            }
        }
    }
    
    .anshin_area{
        padding-top:8.611vw;
    }
    .anshin_wrap{
        /* max-width:88.889vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .anshin_headline{
        display:flex;
        align-items:center;
        flex-direction:column;
        gap:1.667vw;
        margin-bottom:3.333vw;
    
        h2{
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:2.778vw;
            line-height:4.167vw;
            letter-spacing:-0.083vw;
        }
    }
    .anshin_partition{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:1.111vw;
        margin-bottom:3.333vw;
        padding:1.319vw 0;
        border-top:0.069vw solid #cccfd1;
        border-bottom:0.069vw solid #cccfd1;
    
        img{
            width:3.333vw;
        }
        h3{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.528vw;
            line-height:2.292vw;
    
            span{
                color:#c50018;
            }
        }
    }
    .anshin_img{
        margin-bottom:4.444vw;
    
        img{
            width:100%;
            margin-bottom:2.222vw;
        }
        p{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:500;
            font-size:1.111vw;
            line-height:1.944vw;
            text-align:center;
        }
    }
    .anshin_container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:1.389vw;
        margin-bottom:2.778vw;
    
        .box{
            padding:2.014vw 5.556vw 1.458vw;
            background-color:#ffffff;
            border:0.069vw solid #cccfd1;
            border-radius:0.278vw;
    
            h4{
                margin-bottom:1.181vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.389vw;
                line-height:1.667vw;
                text-align:center;
                color:#c50018;
            }
            img{
                width:100%;
                margin-bottom:1.319vw;
                border:0.069vw solid #cccfd1;
            }
            p{
                /* max-width:7.222vw; */
                margin:0 auto;
                padding-right:1.667vw;
                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 0 / 1.389vw no-repeat;
                box-sizing:content-box;
            }
        }
    }
    
    .customer_area{
        padding-top:8.611vw;
    }
    .customer_wrap{
        /* max-width:88.889vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .customer_headline{
        display:flex;
        align-items:center;
        flex-direction:column;
        gap:1.667vw;
        margin-bottom:3.333vw;
    
        h2{
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:2.778vw;
            line-height:4.167vw;
            letter-spacing:-0.083vw;
        }
    }
    .customer_tab{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:0.278vw;
        margin-bottom:2.222vw;
    
        button{
            display:flex;
            justify-content:center;
            padding:0 0 0.625vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.389vw;
            line-height:2.083vw;
            background:none;
            border-bottom:0.278vw solid #32373e;
    
            span{
                padding:0 1.944vw;
            }
    
            &.active{
                color:#c50018;
                border-color:#c50018;
    
                span{
                    background:url('../images/common/red_arrow_bottom.png') center right 0 / 1.389vw no-repeat;
                }
            }
        }
    }
    .customer_toggle_area{
        margin-bottom:2.778vw;
    }
    .customer_toggle_box{
        display:none;
    
        &.active{
            display:block;
        }
        .container{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:1.389vw;
            
            .box{
                display:grid;
                grid-template-columns:1fr 8.125vw;
                padding:2.014vw 1.667vw 1.458vw;
                background-color:#ffffff;
                border:0.069vw solid #cccfd1;
                border-radius:0.278vw;
                transition:0.3s;
    
                &:hover{
                    border-color:#c50018;
                    opacity:0.7;
    
                    .right{
                        .img{
                            img{
                                transform:scale(1.1);
                            }
                        }
                    }
                }
                .left{
                    .head{
                        display:flex;
                        align-items:center;
                        gap:1.111vw;
                        margin-bottom:0.903vw;
    
                        .voice{
                            font-family:"IBM Plex Sans JP", sans-serif;
                            font-weight:500;
                            font-size:0.972vw;
                            line-height:1.389vw;
                            color:#c50018;
                        }
                        .user{
                            padding-left:0.833vw;
                            font-family:"IBM Plex Sans JP", sans-serif;
                            font-weight:500;
                            font-size:0.972vw;
                            line-height:1.389vw;
                            color:#6b6f75;
                            background:url('../images/top/customer_icon.svg') center left 0 / 0.556vw no-repeat;
                        }
                    }
                    h3{
                        margin-bottom:1.458vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.389vw;
                        line-height:2.083vw;
                        color:#32373e;
                    }
                    p{
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:0.972vw;
                        line-height:1.389vw;
                        color:#6b6f75;
                    }
                }
                .right{
                    .img{
                        margin-bottom:1.597vw;
                        overflow:hidden;
    
                        img{
                            width:100%;
                            transition:0.3s;
                        }
                    }
                    p{
                        padding-right:1.667vw;
                        font-family:"IBM Plex Sans JP", sans-serif;
                        font-weight:600;
                        font-size:1.111vw;
                        line-height:1.667vw;
                        text-align:right;
                        color:#32373e;
                        background:url('../images/common/red_circle_white_arrow.png') center right 0 / 1.389vw no-repeat;
                    }
                }
            }
        }
    }
    
    .news_area{
        padding-top:8.611vw;
    }
    .news_wrap{
        /* max-width:88.889vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .news_headline{
        display:flex;
        align-items:center;
        flex-direction:column;
        gap:1.667vw;
        margin-bottom:3.333vw;
    
        h2{
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:2.778vw;
            line-height:4.167vw;
            letter-spacing:-0.083vw;
        }
    }
    .news_container{
        margin-bottom:2.778vw;
        border-bottom:0.069vw solid #cccfd1;
    
        .box{
            display:flex;
            align-items:center;
            gap:6.25vw;
            padding:3.333vw 0 3.056vw;
            background:url('../images/common/red_arrow_right.png') center right 1.111vw / 1.667vw no-repeat;
            border-top:0.069vw solid #cccfd1;
            transition:0.3s;
    
            &:hover{
                opacity:0.7;
            }
            .date{
                margin:0;
                font-family:"Jost", sans-serif;
                font-size:0.972vw;
                line-height:1.389vw;
                color:#6b6f75;
            }
            h3{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:1.111vw;
                line-height:1.667vw;
                color:#32373e;
            }
        }
    }
    
    .column_area{
        padding:8.611vw 0 10vw;
        overflow:hidden;
    }
    .column_wrap{
        /* max-width:88.889vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .column_headline{
        display:flex;
        align-items:center;
        flex-direction:column;
        gap:1.667vw;
        margin-bottom:3.333vw;
    
        h2{
            font-family:"Shippori Mincho B1", serif;
            font-weight:700;
            font-size:2.778vw;
            line-height:4.167vw;
            letter-spacing:-0.083vw;
        }
    }
    .column_partition{
        display:flex;
        justify-content:center;
        align-items:center;
        margin-bottom:3.125vw;
        padding:1.944vw 0 1.736vw;
        border-top:0.069vw solid #cccfd1;
        border-bottom:0.069vw solid #cccfd1;
    
        h3{
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.528vw;
            line-height:2.292vw;
        }
    }
    .column_tab{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:0.278vw;
        margin-bottom:2.222vw;
    
        button{
            display:flex;
            justify-content:center;
            padding:0 0 0.625vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.389vw;
            line-height:2.083vw;
            background:none;
            border-bottom:0.278vw solid #32373e;
    
            span{
                padding:0 1.944vw;
            }
    
            &.active{
                color:#c50018;
                border-color:#c50018;
    
                span{
                    background:url('../images/common/red_arrow_bottom.png') center right 0 / 1.389vw no-repeat;
                }
            }
        }
    }
    .column_toggle_area{
        margin-bottom:2.778vw;
    }
    .column_toggle_box{
        display:none;
    
        &.active{
            display:block;
        }
        .slick-dotted.slick-slider{
            margin:0;
        }
    }
    .column_slider{
        .slick-list{
            overflow:visible;
        }
        .slide_arrow{
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            width:5.556vw;
            height:4.444vw;
            background-color:#32373e;
            cursor:pointer;
            z-index:100;
        }
        .prev_arrow{
            left:-2.778vw;
            background:url('../images/common/slider_prev.png') center / cover no-repeat;
        }
        .next_arrow{
            right:-2.778vw;
            background:url('../images/common/slider_next.png') center / cover no-repeat;
        }
        .slick-dots{
            display:flex;
            justify-content:center;
            gap:1.389vw;
            position:static;
            margin-top:2.222vw;
            
            li{
                width:auto;
                height:auto;
                margin:0;
    
                button{
                    width:0.556vw;
                    height:0.556vw;
                    background-color:#32373e;
                    border-radius:50%;
                    opacity:0.35;
    
                    &:before{
                        content:none;
                    }
                }
                &.slick-active{
                    button{
                        opacity:1;
                    }
                }
            }
        }
    }
    .column_box{
        margin:0 0.694vw;
        padding:1.667vw 1.389vw 1.111vw;
        background-color:#ffffff;
        border:0.069vw solid #cccfd1;
        border-radius:0.278vw;
        transition:0.3s;
    
        &:hover{
            border-color:#c50018;
            opacity:0.7;
    
            .img{
                img{
                    transform:scale(1.1);
                }
            }
        }
        .img{
            margin-bottom:1.389vw;
            border-radius:0.278vw;
            overflow:hidden;
    
            img{
                width:100%;
                transition:0.3s;
            }
        }
        .head{
            display:flex;
            align-items:center;
            gap:0.833vw;
            margin-bottom:1.597vw;
            
            .date{
                font-family:"Jost", sans-serif;
                font-size:0.972vw;
                line-height:1.389vw;
                color:#6b6f75;
            }
            p{
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:600;
                font-size:0.972vw;
                line-height:1.389vw;
                color:#c50018;
            }
        }
        h4{
            margin-bottom:0.833vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.25vw;
            line-height:1.806vw;
            color:#32373e;
        }
        ul{
            display:flex;
            flex-wrap:wrap;
            gap:0.556vw;
    
            li{
                padding:0.208vw 0.833vw 0.139vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:0.972vw;
                line-height:1.389vw;
                color:#32373e;
                border:0.069vw solid #cccfd1;
                border-radius:1.111vw;
            }
        }
    }
    
    .sns_area{
        padding:3.333vw 0;
        background-color:#ffffff;
    }
    .sns_wrap{
        /* max-width:77.778vw; */
        margin:0 auto;
        padding:0 1.389vw;
        box-sizing:content-box;
    }
    .sns_container{
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        gap:1.389vw;
    
        .box{
            display:flex;
            justify-content:center;
            padding:1.458vw 0;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.389vw;
            line-height:2.222vw;
            color:#32373e;
            border:0.069vw solid #c0c2c4;
            border-radius:0.278vw;
            transition:0.3s;
    
            &:hover{
                border-color:#c50018;
                opacity:0.7;
            }
            &:first-child{
                background:url('../images/common/insta_icon.png') center left 0.694vw / 4.444vw no-repeat;
            }
            &:last-child{
                background:url('../images/common/youtube_icon.png') center left 0.694vw / 4.444vw no-repeat;
            }
        }
    }
    
    
    .fixed_area{
        display:flex;
        justify-content:center;
        gap:1.389vw;
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        padding:1.111vw;
        background-color:rgba(223, 226, 229, 0.8);
        transform:translateY(13.889vw);
        z-index:3000;
    
        &.active{
            transform:translateY(0);
            animation:fixed_area 1.2s ease-out forwards;
        }
    }
    @keyframes fixed_area{
        0%{
            transform:translateY(13.889vw);
        }
        100%{
            transform:translateY(0);
        }
    }
    .fixed_box{
        width:100%;
        /* max-width:40.972vw; */
    
        p{
            display:none;
        }
        a{
            display:flex;
            justify-content:center;
            align-items:center;
            gap:0.833vw;
            padding:1.319vw 3.056vw 1.042vw;
            font-family:"IBM Plex Sans JP", sans-serif;
            font-weight:600;
            font-size:1.389vw;
            line-height:2.083vw;
            color:#32373e;
            border-radius:2.222vw;
            transition:0.3s;
    
            &:hover{
                opacity:0.7;
            }
            .slash{
                position:relative;
                padding:0 1.111vw;
                font-size:1.111vw;
                line-height:1.458vw;
    
                &:before{
                    content:'';
                    position:absolute;
                    top:0.625vw;
                    left:0;
                    transform:rotate(65deg);
                    width:1.111vw;
                    height:0.069vw;
                    background-color:#32373e;
                }
                &:after{
                    content:'';
                    position:absolute;
                    top:0.625vw;
                    right:0;
                    transform:rotate(-65deg);
                    width:1.111vw;
                    height:0.069vw;
                    background-color:#32373e;
                }
                .red{
                    color:#c50018;
                }
            }
        }
        &:nth-child(1){
            a{
                background:url('../images/common/red_circle_white_arrow.png') center right 1.389vw / 1.667vw no-repeat;
                background-color:#ffffff;
            }
        }
        &:nth-child(2){
            a{
                color:#ffffff;
                background:url('../images/common/white_circle_gray_arrow.png') center right 1.389vw / 1.667vw no-repeat;
                background-color:#32373e;
    
                .slash{
                    &:before, &:after{
                        background-color:#ffffff;
                    }
                }
            }
        }
    }
    
    .modal_area{
        display:none;
    }
    
    .loading_area{
        position:fixed;
        inset:0;
        pointer-events:none;
        z-index:9999;
    
        svg{
            width:100%;
            height:100%;
        }
        .hole{
            transform:scale(0);
    
            &.active{
                animation:loading_hole 1.3s ease-in-out forwards;
                transform-origin:center;
            }
        }
    }
    @keyframes loading_hole{
        0%{
            transform:scale(0);
        }
        100%{
            transform:scale(20);
        }
    }
    
    .loading_img{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        opacity:0;
        
        img{
            width:17.083vw;
        }
        &.loading1{
            animation:loading1 1.2s ease-in-out forwards;
            opacity:1;
        }
        &.loading2{
            animation:loading2 1.2s ease-in-out forwards;
            opacity:0;
        }
    }
    @keyframes loading1{
        0%{
            opacity:0;
        }
        100%{
            opacity:1;
        }
    }
    @keyframes loading2{
        0%{
            opacity:1;
        }
        100%{
            opacity:0;
        }
    }
}





/*-------------------- sp --------------------*/
/*---------- デザインベースはwidth:375px ----------*/
@media(max-width:768px){
    .mv_area{
        &:before{
            width:64vw;
            height:64vw;
            background:url('../images/top/mv_title_back.svg') top left / 64vw no-repeat;
        }
        .slick-dots{
            gap:3.2vw;
            bottom:31.733vw;
            /* bottom:6.4vw; */
            left:4.267vw;
            
            li{
                button{
                    width:1.6vw;
                    height:1.6vw;
                }
            }
        }
    }
    .mv_header{
        height:17.867vw;
        /* padding:4.267vw 0 0; */
        padding:2.133vw 4.533vw 1.067vw 0;
        transform:translateY(-64vw);

        &:before{
            width:64vw;
            height:64vw;
        }
        &:after{
            height:17.867vw;
        }
        h1{
            gap:1.067vw;
            font-size:3.2vw;
            line-height:10.4vw;
            
            img{
                width:46.4vw;
            }
        }
    }
    @keyframes mv_header{
        0%{
            transform:translateY(-64vw);
        }
        100%{
            transform:translateY(0);
        }
    }
    .mv_link_nav{
        display:none;
    }
    .mv_hamburger{
        width:12.8vw;
        height:3.733vw;
        background:none;
        border:none;
        
        span{
            width:100%;
            height:0.533vw;
            background-color:#ffffff;
            
            &.top{
                top:0;
            }
            &.middle_top{
                top:1.6vw;
            }
            &.middle_bottom{
                top:1.6vw;
            }
            &.bottom{
                top:3.2vw;
            }
        }
    }
    .mv_nav{
        top:17.867vw;
        height:calc(100vh - 17.867vw)
    }
    .mv_nav_area{
        width:100%;
        padding:14.4vw 8.533vw 14.933vw;
    }
    .mv_nav_list{
        gap:12.267vw;
    
        .box{
            border-bottom:0.267vw solid #c6c9cc;
        }
    }
    .mv_nav_toggle{
        gap:3.2vw;
        padding:0 0 4vw 3.2vw;
        background:url('../images/common/red_circle_white_plus.png') top 1.333vw right / 5.333vw no-repeat;
    
        &.active{
            background:url('../images/common/red_circle_white_minus.png') top 1.333vw right / 5.333vw no-repeat;
        }
        &:before{
            top:0.8vw;
            width:0.8vw;
            height:4.8vw;
        }
        .ja{
            font-size:4.8vw;
            line-height:6.933vw;
        }
        .en{
            font-size:3.2vw;
        }
    }
    .mv_nav_link{
        a{
            gap:3.2vw;
            padding:5.333vw 0;
            font-size:3.733vw;
            line-height:5.333vw;
            background:url('../images/common/red_arrow_right.png') center right / 5.333vw no-repeat;
            border-top:0.267vw solid #c6c9cc;
    
            img{
                width:17.067vw;
            }
        }
    }
    .mv_nav_container{
        gap:3.2vw;
        margin-top:12.8vw;
    
        a{
            gap:0;
            height:17.6vw;
            padding:0 4.267vw 0 3.2vw;
            font-size:3.733vw;
            line-height:5.333vw;
            border:0.267vw solid #c6c9cc;
            border-radius:1.067vw;
    
            &.sm{
                font-size:3.2vw;
                line-height:4vw;
            }
            img{
                width:7.467vw;
            }
        }
    }
    body.mv_nav_open{
        .mv_open_title{
            gap:1.067vw;
            font-size:3.2vw;
            line-height:10.4vw;
    
            img{
                width:46.4vw;
            }
        }
        .mv_hamburger{
            background:none;

            span{
                background-color:#c50018;

                &.middle_top{
                    transform:translateX(-50%) rotate(20deg);
                }
                &.middle_bottom{
                    transform:translateX(-50%) rotate(-20deg);
                }
            }
        }
    }
    .mv_slider{
        .slick-list{
            height:100%;
        }
        .slick-track{
            height:100%;
            /* height:100vh; */
            /* height:calc(100vh - 25.333vw); */
        }
    }
    .mv_img{
        .text{
            bottom:38.667vw;
            /* bottom:13.333vw; */
            left:4.267vw;

            h2{
                margin-bottom:2.4vw;
                font-size:9.067vw;
                line-height:10.933vw;
                text-shadow:0 0 4vw rgba(0, 0, 0, 0.4);
            }
            p{
                font-size:3.733vw;
                line-height:6.4vw;
                text-shadow:0 0 4vw rgba(0, 0, 0, 0.4);
            }
        }
    }
    .mv_scroll{
        right:6.133vw;
        bottom:31.733vw;
        /* bottom:6.4vw; */
        height:38.933vw;
    }
    .mv_scroll_bar{
        span{
            font-size:3.2vw;
        }
        .line{
            height:21.333vw;
        }
    }

    .en_title{
        padding:0 5.333vw;
        font-size:3.733vw;
        line-height:5.333vw;

        span{
            &.left{
                width:4.267vw;
                height:4.267vw;
                background:url('../images/common/brackets_left.png') center / 4.267vw no-repeat;
                
                /* &:before{
                    width:8.533vw;
                    height:8.533vw;
                } */
            }
            &.right{
                width:4.267vw;
                height:4.267vw;
                background:url('../images/common/brackets_right.png') center / 4.267vw no-repeat;
                
                /* &:before{
                    width:8.533vw;
                    height:8.533vw;
                } */
            }
        }
    }

    .whats_area{
        padding-top:21.333vw;
    }
    .whats_back{
        background:url('../images/top/whats_back_sp.webp') top 17% center / contain no-repeat;
        background-color:#f0f1f4;
    }
    .whats_wrap{
        padding:0 4.267vw;
    }
    .whats_headline{
        margin-bottom:8.533vw;
    }
    .whats_maker{
        margin-bottom:40px;

        h2{
            font-size:28px;
            line-height:35px;
            letter-spacing:-0.56px;

            .lg{
                font-size:44px;
                line-height:63px;
                letter-spacing:-0.88px;
            }
        }
        ul{
            grid-template-columns:repeat(2, 1fr);
            gap:11px 16px;

            li{
                height:54px;
                background-color:#ffffff;
                border-radius:4px;
                overflow:hidden;

                img{
                    width:100%;
                    height:100%;
                    object-fit:contain;
                }
            }
        }
    }
    .whats_container{
        gap:2.933vw;
        margin-bottom:8.533vw;

        .box{
            grid-template-columns:1fr;
            padding:4.8vw 4.267vw 3.733vw;
            border-radius:1.067vw;

            .text{
                h3{
                    margin-bottom:1.867vw;
                    padding-bottom:0;
                    font-size:4.267vw;
                    line-height:6.4vw;
                    text-align:center;
                    border:none;

                    span{
                        margin-bottom:0.533vw;
                        font-size:2.667vw;
                        line-height:3.467vw;
                    }
                }
                img{
                    width:100%;
                    margin-bottom:3.2vw;
                }
                p{
                    font-size:3.2vw;
                    line-height:4.8vw;
                }
            }
            &:last-child{
                .text{
                    h3{
                        border:none;
                    }
                }
            }
        }
    }

    .free_area{
        padding:12.8vw 0 0;
    }
    .free_wrap{
        padding:10.667vw 8.533vw;
        border-radius:1.067vw;
    }
    .free_in_wrap{
        .banner{
            margin-bottom:6.667vw;

            img{
                margin-bottom:8.533vw;
            }
            p{
                font-size:3.733vw;
                line-height:6.4vw;
            }
        }
        .container{
            grid-template-columns:1fr;
            gap:0;
            margin-bottom:8.533vw;
            border-bottom:0.267vw solid #cccfd1;

            .box{
                grid-template-columns:26.4vw 1fr;
                gap:2.133vw;
                padding:6.4vw 0;
                background:url('../images/common/red_arrow_right.png') center right 0 / 5.333vw no-repeat;
                background-color:#ffffff;
                border-bottom:0;
                
                p{
                    .lg{
                        font-size:4.8vw;
                        line-height:6.4vw;
                    }
                    .md{
                        font-size:4.267vw;
                        line-height:6.4vw;
                    }
                    .sm{
                        font-size:3.733vw;
                        line-height:5.333vw;
                    }
                }
            }
        }
    }

    .search_area{
        padding:12.8vw 0;
    }
    .search_wrap{
        padding:0 4.267vw;
    }
    .search_headline{
        margin-bottom:10.667vw;

        p{
            margin:4.267vw 0 2.133vw;
            font-size:4.267vw;
            line-height:6.4vw;
            letter-spacing:-0.085vw;
        }
        h2{
            font-size:7.467vw;
            line-height:11.733vw;
            letter-spacing:-0.149vw;
        }
    }
    .search_partition{
        display:none;
    }
    .search_maker_area{
        margin-top:16px;
    }
	.search_container{
        display:none;
		grid-template-columns:repeat(2, 1fr);
		gap:4.267vw 2.933vw;
        margin-top:8.533vw;
	
        &.active{
            display:grid;
        }
		a{
			height:14.4vw;
			padding:1.067vw 0 0.8vw;
		}
	}

    .search_toggle_btn{
        display:flex;
        align-items:center;
        gap:3.2vw;
        width:100%;
        padding:6.933vw 10.667vw 6.667vw 4.267vw;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:4.267vw;
        line-height:6.4vw;
        background:url('../images/common/red_circle_white_plus.png') center right 4.267vw / 6.4vw no-repeat;
        background-color:#ffffff;
        border:0.267vw solid #cccfd1;
        border-radius:1.067vw;
        color: var(--premium-black);

        &.active{
            background:url('../images/common/red_circle_white_minus.png') center right 4.267vw / 6.4vw no-repeat;
            background-color:#ffffff;
        }
        img{
            width:5.333vw;
        }
    }

    .arrival_area{
        padding:12.8vw 0;
    }
    .arrival_wrap{
        padding:0 6.4vw;
    }
    .arrival_headline{
        gap:4.267vw;
        margin-bottom:8.533vw;

        h2{
            font-size:7.467vw;
            line-height:10.933vw;
            letter-spacing:-0.149vw;
        }
    }
    .arrival_slider{
        margin-bottom:8.533vw !important;

        .slide_arrow{
            width:13.333vw;
            height:10.667vw;
        }
        .prev_arrow{
            left:-4.267vw;
        }
        .next_arrow{
            right:-4.267vw;
        }
        .slick-dots{
            gap:3.2vw;
            margin-top:6.4vw;
            
            li{
                button{
                    width:1.6vw;
                    height:1.6vw;
                }
            }
        }
    }
    .arrival_box{
        margin:0 2.133vw;
        padding:0 6.4vw 5.333vw;
        border-radius:1.067vw;
        
        .logo{
            img{
                width:39.467vw;
            }
        }
        .img{
            margin-bottom:5.333vw;
            border-radius:1.067vw;
            overflow:hidden;

            img{
                width:100%;
                transition:0.3s;
            }
        }
        .detail{
            h3{
                margin-bottom:2.133vw;
                padding-bottom:2.133vw;
                font-size:4.267vw;
                line-height:6.4vw;
                letter-spacing:-0.085vw;
                background:url('../images/common/red_arrow_right.png') top 0.8vw right 0 / 5.333vw no-repeat;
            }
            .price_main{
                gap:1.067vw;
                margin-bottom:0.533vw;
                font-size:3.467vw;
                line-height:8.533vw;
                
                span{
                    font-size:6.4vw;
                    line-height:8.533vw;
                }
            }
            .price_sub{
                gap:3.733vw;
                margin-bottom:2.4vw;

                dl{
                    gap:3.2vw;
                    
                    dt{
                        font-size:3.2vw;
                        line-height:4.8vw;
                        
                        &:before{
                            right:-1.6vw;
                            width:0.267vw;
                            height:3.2vw;
                        }
                    }
                    dd{
                        font-size:3.2vw;
                        line-height:4.8vw;
                    }
                }
            }
            ul{
                gap:2.133vw;

                li{
                    padding:1.067vw 3.2vw 0.533vw;
                    font-size:3.2vw;
                    line-height:4.8vw;
                }
            }
        }
    }

    .about_area{
        padding-top:13.867vw;
    }
    .about_wrap{
        padding:0;
    }
    .about_headline{
        gap:4.267vw;
        margin-bottom:8.533vw;

        h2{
            font-size:7.467vw;
            line-height:11.733vw;
            letter-spacing:-0.149vw;
        }
    }
    .about_partition{
        margin:0 4.267vw 8.533vw;
        padding:5.6vw 0 4.8vw;
        
        p{
            font-size:4.8vw;
            line-height:7.467vw;
        }
    }
    .about_explain{
        gap:12.8vw;
        margin-bottom:12.8vw;
    }
    .about_explain_box{
        .img{
            margin-bottom:18.4vw;

            img{
                height:48vw;
                object-fit:cover;
            }
            h3{
                display:block;
                top:32vw;
                right:6.4vw;
                bottom:auto;
                left:6.4vw;
                transform:none;
                width:auto;
                padding:8.533vw 0 4.267vw;
                font-size:4.267vw;
                line-height:6.4vw;
                text-align:center;

                .lg{
                    font-size:12.8vw;
                    line-height:11.733vw;
                }
                .md{
                    font-size:8.533vw;
                    line-height:11.733vw;
                }
            }
        }
        > p{
            margin-bottom:6.667vw;
            font-size:3.733vw;
            line-height:6.4vw;
        }
        .container{
            display:grid;
            grid-template-columns:1fr;
            gap:4.267vw;
            margin-bottom:6.4vw;
            padding:0 4.267vw;

            .box{
                gap:8.8vw;
                padding:5.333vw 4.8vw 5.333vw 5.067vw;
                
                img{
                    width:17.067vw;
                }
                .text{
                    &:before{
                        left:-5.333vw;
                        height:21.867vw;
                    }
                    h4{
                        margin-bottom:1.067vw;
                        font-size:4.267vw;
                        line-height:6.4vw;

                        /* task179: no breathing room after the numeral here -- .text is
                           192px at 375 and 「①住宅履歴データベースの」 needs every one of
                           them, so a wider hang breaks 「の」 onto its own line. The
                           numeral is full-width, so 1em still hangs it clear. */
                        --ordinal-w:1em;
                    }
                    p{
                        font-size:3.2vw;
                        line-height:4.8vw;
                    }
                }
            }
        }
    }
    .about_concept{
        gap:12vw;
        padding:0 4.267vw;
    }
    .about_concept_box{
        .title{
            margin:0 auto 6.667vw;
            
            h3{
                margin-bottom:4.8vw;
                font-size:4.8vw;
                line-height:7.467vw;

                &:before{
                    width:100%;
                    z-index:1;
                }
                &:after{
                    content:none;
                }
                span{
                    display:inline-block;
                    position:relative;
                    padding:0 5.067vw;
                    background-color:#f0f1f4;
                    z-index:2;
                }
            }
            p{
                font-size:3.733vw;
                line-height:6.4vw;

                .space{
                    display:inline-block;
                }
            }
        }
        .container{
            grid-template-columns:repeat(2, 1fr);
            gap:4.267vw;
            margin-bottom:8.533vw;

            .box{
                padding:4.8vw 2.667vw;
                
                h4{
                    margin-bottom:1.6vw;
                    font-size:3.2vw;
                    line-height:4vw;
                    
                    span{
                        margin-bottom:1.333vw;
                        font-size:2.667vw;
                        line-height:3.467vw;
                    }
                }
                .img{
                    margin-bottom:3.2vw;
                }
                p{
                    max-width:21.333vw;
                    padding-right:5.333vw;
                    font-size:3.2vw;
                    line-height:4.8vw;
                    background:url('../images/common/red_circle_white_arrow.png') center right 0 / 4.267vw no-repeat;
                }
            }
        }
    }

    .anshin_area{
        padding-top:18.133vw;
    }
    .anshin_wrap{
        padding:0 4.267vw;
    }
    .anshin_headline{
        gap:4.267vw;
        margin-bottom:8.533vw;

        h2{
            font-size:7.467vw;
            line-height:11.733vw;
            letter-spacing:-0.149vw;
        }
    }
    .anshin_partition{
        gap:3.2vw;
        margin-bottom:6.4vw;
        padding:4vw 0;
        
        img{
            width:9.6vw;
        }
        h3{
            font-size:4.8vw;
            line-height:7.467vw;
        }
    }
    .anshin_img{
        margin-bottom:6.667vw;

        img{
            margin-bottom:6.4vw;
        }
        p{
            font-size:3.733vw;
            line-height:6.4vw;
            text-align:left;
        }
    }
    .anshin_container{
        gap:4vw;
        margin-bottom:8.533vw;

        .box{
            padding:4.533vw 4.267vw 4.8vw;
            
            h4{
                margin-bottom:2.133vw;
                font-size:3.733vw;
                line-height:5.333vw;
            }
            img{
                margin-bottom:3.2vw;
            }
            p{
                max-width:21.333vw;
                padding-right:5.333vw;
                font-size:3.2vw;
                line-height:4.8vw;
                background:url('../images/common/red_circle_white_arrow.png') center right 0 / 4.267vw no-repeat;
            }
        }
    }

    .customer_area{
        padding-top:17.067vw;
    }
    .customer_wrap{
        padding:0 4.267vw;
    }
    .customer_headline{
        gap:4.267vw;
        margin-bottom:9.867vw;

        h2{
            font-size:7.467vw;
            line-height:11.733vw;
            letter-spacing:-0.149vw;
        }
    }
    .customer_tab{
        gap:0.8vw;
        margin-bottom:6.4vw;

        button{
            padding:0 0 3.2vw;
            font-size:3.733vw;
            line-height:8.533vw;
            border-bottom:1.067vw solid #32373e;

            span{
                padding:0 4.8vw;
            }
            &.active{
                span{
                    background:url('../images/common/red_arrow_bottom.png') center right 0 / 2.667vw no-repeat;
                }
            }
        }
    }
    .customer_toggle_area{
        margin-bottom:8.533vw;
    }
    .customer_toggle_box{
        .container{
            grid-template-columns:1fr;
            gap:4.267vw;
            
            .box{
                grid-template-columns:1fr 21.333vw;
                gap:4.267vw;
                padding:5.867vw 6.4vw 5.333vw;
                
                .left{
                    .head{
                        gap:3.2vw;
                        margin-bottom:3.2vw;

                        .voice{
                            font-size:3.2vw;
                            line-height:4.8vw;
                        }
                        .user{
                            padding-left:2.933vw;
                            font-size:3.2vw;
                            line-height:4.8vw;
                            background:url('../images/top/customer_icon.svg') center left 0 / 1.867vw no-repeat;
                        }
                    }
                    h3{
                        margin-bottom:1.6vw;
                        font-size:4.267vw;
                        line-height:6.4vw;
                    }
                    p{
                        font-size:3.2vw;
                        line-height:4.8vw;
                    }
                }
                .right{
                    .img{
                        height:21.333vw;
                        margin-bottom:6.933vw;

                        img{
                            height:100%;
                            object-fit:cover;
                        }
                    }
                    p{
                        padding-right:5.333vw;
                        font-size:3.2vw;
                        line-height:4.8vw;
                        background:url('../images/common/red_circle_white_arrow.png') center right 0 / 4.267vw no-repeat;
                    }
                }
            }
        }
    }

    .news_area{
        padding-top:17.067vw;
    }
    .news_wrap{
        padding:0 4.267vw;
    }
    .news_headline{
        gap:4.267vw;
        margin-bottom:8.533vw;

        h2{
            font-size:7.467vw;
            line-height:11.733vw;
            letter-spacing:-0.149vw;
        }
    }
    .news_container{
        margin-bottom:8.533vw;
        
        .box{
            flex-direction:column;
            align-items:flex-start;
            gap:4.267vw;
            padding:8.533vw 8.8vw 6.933vw 0;
            background:url('../images/common/red_arrow_right.png') center right / 5.333vw no-repeat;
            
            .date{
                font-size:3.2vw;
                line-height:4.8vw;
            }
            h3{
                font-size:4.267vw;
                line-height:6.4vw;
            }
        }
    }

    .column_area{
        padding:17.067vw 0 21.333vw;
    }
    .column_wrap{
        padding:0 4.267vw;
    }
    .column_headline{
        gap:4.267vw;
        margin-bottom:8.533vw;

        h2{
            font-size:7.467vw;
            line-height:11.733vw;
            letter-spacing:-0.149vw;
            text-align:center;
        }
    }
    .column_partition{
        margin-bottom:5.6vw;
        padding:5.6vw 0 4.8vw;
        
        h3{
            font-size:4.8vw;
            line-height:7.467vw;
        }
    }
    .column_tab{
        gap:0.8vw;
        margin-bottom:6.4vw;

        button{
            padding:0 0 3.2vw;
            font-size:3.733vw;
            line-height:8.533vw;
            
            span{
                padding:0 4.8vw;
            }

            &.active{
                span{
                    background:url('../images/common/red_arrow_bottom.png') center right 0 / 2.667vw no-repeat;
                }
            }
        }
    }
    .column_toggle_area{
        margin-bottom:8.533vw;
        padding:0 2.133vw;
    }
    .column_slider{
        .slide_arrow{
            width:13.333vw;
            height:10.667vw;
        }
        .prev_arrow{
            left:-4.267vw;
        }
        .next_arrow{
            right:-4.267vw;
        }
        .slick-dots{
            gap:3.2vw;
            margin-top:6.4vw;
            
            li{
                button{
                    width:1.6vw;
                    height:1.6vw;
                }
            }
        }
    }
    .column_box{
        margin:0 2.133vw;
        padding:6.4vw 6.4vw 5.333vw;
        
        .img{
            margin-bottom:5.333vw;
        }
        .head{
            gap:3.2vw;
            margin-bottom:5.6vw;
            
            .date{
                font-size:3.2vw;
                line-height:4.8vw;
            }
            p{
                font-size:3.2vw;
                line-height:4.8vw;
            }
        }
        h4{
            margin-bottom:3.733vw;
            font-size:4.267vw;
            line-height:6.4vw;
        }
        ul{
            gap:2.133vw 1.6vw;

            li{
                padding:0.533vw 2.667vw 0;
                font-size:3.2vw;
                line-height:4.8vw;
            }
        }
    }

    .sns_area{
        padding:8.533vw 0;
    }
    .sns_wrap{
        padding:0 4.267vw;
    }
    .sns_container{
        grid-template-columns:1fr;
        gap:4.267vw;

        .box{
            padding:6.4vw 0;
            font-size:4.267vw;
            line-height:6.4vw;
            
            &:first-child{
                background:url('../images/common/insta_icon.png') center left 2.133vw / 17.067vw no-repeat;
            }
            &:last-child{
                background:url('../images/common/youtube_icon.png') center left 2.133vw / 17.067vw no-repeat;
            }
        }
    }


    .fixed_area{
        gap:2.4vw;
        padding:2.667vw 4.267vw 3.467vw;
        transform:translateY(25.333vw);
        
        &.active{
            transform:translateY(0);
            animation:fixed_area 1.2s ease-out forwards;
        }
    }
    @keyframes fixed_area{
        0%{
            transform:translateY(25.333vw);
        }
        100%{
            transform:translateY(0);
        }
    }
    .fixed_box{
        p{
            display:block;
            margin-bottom:1.067vw;
            text-align:center;
            
            .slash{
                position:relative;
                padding:0 3.2vw;
                /* task179 lengthened the right label to 内見予約・お問い合わせは, which
                   wraps in a half-width box and orphans its closing slash on line 2 while
                   the left label stays on one line. The slash decorations sit in the
                   padding, so the padding cannot shrink -- the type does. 2.7vw keeps
                   twelve characters on one line down to 320px. */
                white-space:nowrap;
                font-size:2.7vw;
                line-height:4.8vw;
    
                &:before{
                    content:'';
                    position:absolute;
                    top:2.133vw;
                    left:0;
                    transform:rotate(65deg);
                    width:3.2vw;
                    height:0.267vw;
                    background-color:#32373e;
                }
                &:after{
                    content:'';
                    position:absolute;
                    top:2.133vw;
                    right:0;
                    transform:rotate(-65deg);
                    width:3.2vw;
                    height:0.267vw;
                    background-color:#32373e;
                }
                .red{
                    color:#c50018;
                }
            }
        }
        a{
            padding:3.733vw 9.6vw 3.467vw 6.4vw;
            font-size:3.733vw;
            line-height:5.333vw;
            
            .slash{
                display:none;
            }
        }
        &:nth-child(1){
            a{
                background:url('../images/common/red_circle_white_arrow.png') center right 3.2vw / 6.4vw no-repeat;
                background-color:#ffffff;
            }
        }
        &:nth-child(2){
            a{
                background:url('../images/common/white_circle_gray_arrow.png') center right 3.2vw / 6.4vw no-repeat;
                background-color:#32373e;
            }
        }
    }

    .modal_area{
        display:block;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0, 0, 0, 0.75);
        opacity:0;
        visibility:hidden;
        transition:0.3s;
        z-index:5000;
    
        &.active{
            opacity:1;
            visibility:visible;
        }
    }
    .modal_window{
        position:relative;
        height:100%;
        padding:14.667vw 4.267vw 13.867vw;
        background-color:#ffffff;
        overflow:auto;
    }
    .modal_close{
        position:absolute;
        top:5.333vw;
        right:5.067vw;
        width:4.8vw;
        cursor:pointer;
    
        img{
            width:100%;
        }
    }
    .modal_header{
        display:flex;
        align-items:center;
        gap:2.133vw;
        margin-bottom:8.533vw;
        font-family:"IBM Plex Sans JP", sans-serif;
        font-weight:600;
        font-size:5.333vw;
        line-height:8.533vw;

        img{
            width:6.4vw;
        }
    }
    .modal_search_area{
        display:grid;
        gap:6.667vw;

        .pref{
            margin-bottom:2.4vw;
            padding-bottom:1.867vw;
            border-bottom:0.267vw solid #6b6f75;

            a{
                padding-left:6.4vw;
                font-family:"IBM Plex Sans JP", sans-serif;
                font-weight:500;
                font-size:4.267vw;
                line-height:7.467vw;
                color:#32373e;
                background:url('../images/common/red_circle_white_arrow.png') center left 0 / 4.267vw no-repeat;
            }
        }
        ul{
            display:flex;
            gap:4.267vw;

            li{
                position:relative;

                &:not(:last-child){
                    &:before{
                        content:'';
                        position:absolute;
                        top:50%;
                        right:-2.267vw;
                        transform:translateY(-50%);
                        width:0.267vw;
                        height:3.733vw;
                        background-color:#cccfd1;
                        opacity:0.3;
                    }
                }
                a{
                    font-family:"IBM Plex Sans JP", sans-serif;
                    font-weight:500;
                    font-size:3.733vw;
                    line-height:6.4vw;
                    color:#0356cb;
                    text-decoration:underline;
                    transition:0.3s;

                    &:hover{
                        opacity:0.7;
                    }
                }
            }
        }
    }
    .modal_search_maker{
        ul{
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            gap:4.267vw 2.933vw;

            li{
                height:14.4vw;
                padding:1.333vw 0;
                background-color:#ffffff;
                border:0.267vw solid #cccfd1;
                border-radius:16vw;

                img{
                    width:100%;
                    height:100%;
                    object-fit:contain;
                }
            }
        }
    }
    
}
/* task56e (2026-07-24): the scroll-reveal fixed header (header.header_top,
   base z-index 1000 in common.css) was buried under the FV (.mv_area z-index
   2000) when scrolling back up. TOP-scoped lift: above the FV, below the
   nav_open / modal layer (5000+). common.css stays untouched (shared). */
header.header_top {
    z-index: 2500;
}

/* task56f rev2 (2026-07-24): the FV carries its own designed header
   (.mv_header inside .mv_area) — while the viewport is inside the FV the
   GLOBAL fixed header must stay hidden (v1 made it transparent, which
   stacked two headers). Past the FV the shared white reveal header takes
   over. Same translateY as the shared .hide rule so the slide-in matches. */
header.header_top.over_fv {
    transform: translateY(-100px);
    /* rev4: no slide-out race on FV re-entry — snap instantly so the global
       header never coexists with the FV header (red-team defect #1). The
       reveal outside the FV keeps the shared 0.3s transition (.hide path). */
    transition: none;
}

/* task56f rev3 (2026-07-24): "transparent header follows inside the FV" —
   .mv_header is the designed transparent header (dark gradient + white logo);
   while the viewport is inside the FV it switches to fixed so it follows the
   scroll. Geometry is identical (mv_area starts at page top, same top/left/
   right). Past the FV it reverts to absolute and scrolls away; the global
   white reveal header takes over (over_fv on header.header_top unchanged). */
.mv_header.follow_fv {
    position: fixed;
}

/* task56f rev4: while following, strengthen the header scrim so FV hero text
   passing underneath is masked instead of colliding white-on-white with the
   header tagline (user-lens HIGH). Rest state (scrollY<=10) keeps the
   original FV look — this applies only while scrolled. */
.mv_header.follow_fv {
    background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.45) 65%, transparent 100%);
}

/* task112 · CMS-fed cards are as tall as their text.
   The drop sized these for one line of title, so once WordPress fills them a
   row of five goes ragged. Same recipe the 新着物件 slider on this page already
   uses (the inline block in index.html): the track is a flex row, the card is
   height:auto inside it, and the title takes the slack so the tag row stays on
   the same line across the row.
   `height:100%` was tried first and is wrong -- it pins the card to the slide
   box and the text spills out of it (measured: 1079px of content in a 485px
   card). The image gets the drop's own ratio (640x426) so five different
   uploads still line up. */
.column_slider .slick-track {
    display: flex;
    align-items: stretch;
}
.column_box {
    height: auto;
    display: flex;
    flex-direction: column;
}
.column_box h4 {
    flex: 1 1 auto;
}
.column_box .img {
    aspect-ratio: 640 / 426;
}
.column_box .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.customer_toggle_area .container {
    align-items: stretch;
}
.customer_toggle_area .container .box {
    height: auto;
}

/*---------- task178: TOP 追従 event banner ----------*/
/* The banner is a child of .fixed_area, so `bottom:100%` pins it to the top
   edge of the fixed CTA bar at every width -- no height math, and it inherits
   the bar's hide-while-scrolling behaviour. Assets are 2x exports (the SP file
   is 420px wide on a 375px artboard), so every size below is intrinsic / 2. */
.event_banner{
    position:absolute;
    right:24px;
    bottom:100%;
    width:280px;
    opacity:0;
    visibility:hidden;
    transform:translateY(16px);
    transition:opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;

    &.is_visible{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
}
.event_banner_link{
    display:block;
    transition:0.3s;

    &:hover{
        opacity:0.7;
    }
    img{
        display:block;
        width:100%;
        height:auto;
    }
}
.event_banner_close{
    position:absolute;
    top:-18px;
    right:-18px;
    width:36px;
    height:36px;
    padding:0;
    border:none;
    background:url('../images/event/close-btn.svg') center / contain no-repeat;
    cursor:pointer;
    transition:0.3s;

    &:hover{
        opacity:0.7;
    }
}
@media(max-width:1439px) and (min-width:769px){
    .event_banner{
        right:1.667vw;
        width:19.444vw;
        transform:translateY(1.111vw);
    }
    .event_banner_close{
        top:-1.25vw;
        right:-1.25vw;
        width:2.5vw;
        height:2.5vw;
    }
}
@media(max-width:768px){
    .event_banner{
        right:5.333vw;
        width:56vw;
        transform:translateY(4.267vw);
    }
    .event_banner_close{
        top:-4.8vw;
        right:-4.8vw;
        width:9.6vw;
        height:9.6vw;
    }
}
@media(prefers-reduced-motion:reduce){
    .event_banner,
    .event_banner.is_visible{
        transform:none;
        transition:none;
    }
}