@charset "utf-8";
/* 見出し等カラー設定 */
.rental .tagBox{
    & h2{
        border-left:5px solid var(--yc-sub-C4);
    }
    & h3{
        color:var(--yc-sub-C5);
    }
    & ul li::marker{color:var(--yc-sub-C4);}
    & ol.kana{
        & li{
            list-style-type: katakana;
            margin: 0 0 10px 2em;
        }
    }
}
.rental .tagBox .itemList{
    border:2px solid var(--yc-sub-C3);
    width:700px;
    margin:0 auto;
    padding:1em 2em;
    & h3{
        text-align: center;
    }
    & ul{
        display:flex;
        flex-wrap:wrap;
        justify-content: center;
        margin-bottom:0;
        gap:25px;
        & > li{
            list-style-type:none;
            margin:0;
            width:calc((100% - 50px) /3);
            text-align: center;
            padding-bottom:1em;
            & img {
                display:block;}
            & > div:nth-child(2){
                width:100%;
                padding:0.3em 0;
                background-color:var(--yc-sub-C1);
                border-radius: 10px;
            }
        }
    }        
}
@media only screen and (max-width:999px) {
    .rental .tagBox .itemList{
        width:100%;
        margin:0 auto;
        padding:1em 1em;
        & ul{
            & > li{
                width:calc((100% - 25px) /2);
                padding-bottom:1em;
            }
        }        
    }
}
.rental .tagBox .titleBox{
    position:relative;
    margin:1.5em 0 0;
    border:2px solid var(--yc-sub-C4);
    padding:2em 1em 1em;
    & h3{
        color:#fff;
        background-color:var(--yc-sub-C5);
        padding:0.5em 2em;
        border-radius: 1.5em;
        line-height:1;
        display:block;
        position:absolute;
        top:-1.1em;
        left:0;
        right:0;
        width:80%;
        margin:0 auto;
        text-align: center;
    }
    & ul,& ol{
        margin-bottom:0;
        & li:last-child{
            margin-bottom:0;
        }
    }
}
@media only screen and (max-width:999px) {
    .rental .tagBox .titleBox{
        margin-top:50px;
        & h3{
            width:90%;
        }
    }    
}
.rental .tagBox .rentalFlow{
    margin-bottom:50px;
    & ul{
        display:flex;
        gap:0;
        & > li{
            list-style-type: none;
            margin:0;
            width:calc(100%/6);
            padding: 1em 1em 1em;
            position:relative;
            color:#fff;
            display:flex;
            flex-direction: column;
            align-items: center;
            &::after{
                content:"";
                display: inline-block;
                width: 39px;
                height: 45px;
                clip-path: polygon(0 0, 0 100%, 100% 50%);
                position:absolute;
                top:1em;
                right:-38px;
                z-index:1;
            }
            & > div:nth-child(1){
                display:flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width:70px;
                height:70px;
                border-radius: 50%;
                line-height:1;                
                background-color:#fff;
                margin-bottom:0.5em;
                font-weight:bold;
                & span{
                    display:block;
                    font-size:1.7em;                
                }
            }
            & > div:nth-child(2){
                writing-mode: vertical-rl;
                display:flex;
                width:100%;
                align-items: center;
                font-size:2rem;
                padding:1em 0;
            }
            &:nth-child(2n-1){
                background-color:var(--yc-sub-C4);
                &::after{
                    background-color:var(--yc-sub-C4);
                }
                & > div:nth-child(1){
                    color:var(--yc-sub-C5)
                }
            }
            &:nth-child(2n){
                background-color:var(--yc-sub-C5);
                &::after{
                    background-color:var(--yc-sub-C5);
                }
                & > div:nth-child(1){
                    color:var(--yc-sub-C4)
                }
            }
            &:nth-child(5){
                background-color:var(--years-color3);
                &::after{
                    background-color:var(--years-color3);
                }
                & > div:nth-child(1){
                    color:var(--years-color3);
                }
                & > div:nth-child(2){
                    font-size:2.5em;
                    padding:0.5em 0;
                }
            }
            &:last-child{
                &::after{display:none}
            }
        }
    }
}
@media only screen and (max-width:999px) {
    .rental .tagBox .rentalFlow{
        & ul{
            flex-direction: column;
            & > li{
                width:100%;
                padding: 2em 1em;
                display:flex;
                flex-direction:row;
                align-items: center;
                &::after{
                    width: 22px;
                    height: 19.1px;
                    clip-path: polygon(0 0, 100% 0%, 50% 100%);
                    top:auto;
                    bottom:-18px;
                    right:auto;
                    left:2.3em;
                }
                & > div:nth-child(1){
                    margin-bottom:0;
                    & span{
                        font-size:1.5em;                
                    }
                }
                & > div:nth-child(2){
                    width:calc(100% - 70px);
                    writing-mode: horizontal-tb;
                    display:flex;
                    align-items: center;
                    font-size:1.9rem;
                    padding:0 1em;
                }
                &:nth-child(5){
                    & > div:nth-child(2){
                        font-size:2.3em;
                        padding:0 0.5em;
                    }
                }
            }
        }
    }
}
.rental .tagBox .mousikomi{
    & table{
        width:700px;
        margin:0 auto;
        & caption{
            color: var(--yc-sub-C4);
            font-weight:bold;
        }
        & th{
            background-color: var(--yc-sub-C1);
            border-color: var(--yc-sub-C2);
        }
        & td{
            border-color: var(--yc-sub-C2);
            & .entry{
                display:flex;
                justify-content: space-between;
                align-items: center;
                gap:0 10px;
                > div:nth-child(1){
                    width:calc(100% - 90px);
                }
                > div:nth-child(2){
                    width:80px;
                }
            }
        }
    }   
}
@media only screen and (max-width:999px) {
    .rental .tagBox .mousikomi{
        & table{
            width:100%;
            & caption{
            }
            & td{
                & .entry{
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    gap:10px 0px;
                    > div:nth-child(1){
                        width:100%;
                    }
                    > div:nth-child(2){
                        width:80px;
                        margin:0 auto;
                    }
                }
            }
        }   
    }
}
.videoComingsoon{
    position:relative;
    width:50%;
    margin:0 auto;
    & .videoComingsoonTxt{
        position:absolute;
        width:100%;
        height:100%;
        display:flex;
        justify-content: center;
        align-items: center;
        & span{
            background-color:var(--years-color3);
            color:#fff;
            font-size:3rem;
            width:70%;
            padding:0.5em 1em;
            display:flex;
            justify-content: center;
            align-items: center;
        }
    }
    & img{
        display:block;
    }
}
@media only screen and (max-width:999px) {
    .videoComingsoon{
        width:100%;
        & .videoComingsoonTxt{
            & span{
                font-size:2rem;
            }
        }
    }
}

.videoWrap video{
    width:100%;
}
.videoWrap{
    display:flex;
    justify-content: center;
}
.videoWrap > div{
    width:80%;
}
@media only screen and (max-width:999px) {
    .videoWrap> div{
        width:100%;
    }
}