@charset "utf-8";
/*-----------------------------------------------------------------------*/
/* Welcart customize */
.site-header{
    position: relative;

    & .site-title{
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        & a{
            visibility: hidden;

            &::before{
                content: "";
                display: block;
                width: 100%;
                max-width: 370px;
                height: auto;
                aspect-ratio: 370 / 42;
                background: url(../../images/logo_black.png);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
                visibility: visible;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}
#toTop{
    bottom: 10%;
}
#secondary{
    display: none;
}
.home{
    & #primary{
        display: none;
    }
}

/*-----------------------------------------------------------------------*/
/* Common style */
html, body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* Retuen TOP */
.return-top{
    width: 100%;
    padding: 150px 0;
    text-align: center;

    & a{
        font-size: 28px;
        color: #000000;
    }
}

/*-----------------------------------------------------------------------*/
/* toppage */
.home{
    @media screen and (min-width: 62.5em) {
        #main {
            width: 100%;
            max-width: 100%;
        }
    }

    /* First View */
    .fv_img{
        margin-top: 30px;
        text-align: center;

    }
    .logo-slider{
        background: #000;
        width: 100%; 
        padding: 1em 0;

        & .slide{  
            width: fit-content;      
            color: #ffffff;
            font-size: 2.5vw;
            font-weight: bold;
            padding: 10px 1rem;
            white-space: nowrap;
        }
    }
    .intro{
        width: fit-content;
        max-width: 1280px;
        margin: 2rem auto 5rem;

        & p{
            font-size: 20px;
            line-height: 1.6;    

            & span{
                font-size: 2rem;
                font-weight: bold;
            }
        }
    }

    /* Item List */ 
    .room_container{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-top: solid 10px #000000;
        border-bottom: solid 10px #000000;
        padding: 20px 0;
        margin-bottom: 50px;

        & .profile-container{
            display: flex;
            flex-basis: 37.5%;
            max-width: 480px;
            width: 100%;
            position: relative;

            & .room_no{
                position: absolute;
                top: -20px;
                left: 0;
                transform: translateY(-50%);
                font-size: 24px;
                background: #ffffff;
                width: 140px;
                height: auto;
                aspect-ratio: 210 / 108;
                display: flex;
                justify-content: center;
                align-items: center;
                background: url(../../images/room_no.svg);
                background-size:cover;
                background-position: center;
                background-repeat: no-repeat;
                & a{
                    color: #000000;
                }
            }

            & .profile-txt{
                display: flex;
                align-items: center; 
                justify-content: flex-end;
                gap: 20px; 

                & .character-img{
                    width: 143px;
                    height: 100%;
                    max-height: 200px;
                    & img{
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        margin-top: 15px;
                    }
                }
                & .personality{
                    width: 260px;
                }
                
            }
        } 

        & .item_list{
            width: 100%;
            max-width: 800px;
            flex-basis: 62.5%;
            position: relative;
            padding-left: 30px;
            overflow: hidden;

            &:before{
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                z-index: 2;
                transform: translateY(-50%);
                display: block;
                width: 28px;
                height: 200px;
                background-image: url(../../images/room_border_left.png);
                background-repeat: no-repeat;
                background-position: left center;
                background-size: contain;
                margin: 0 28px 0 0;                
            }

            .slick-list {
                margin: 0 -20px;
            }
            .slick-slide {
                margin: 0 20px;
            }
            & .latest-item-box{
                position: relative;

                &::after{
                    content: "\2190";
                    font-size: 16px;
                    position:absolute;
                    top: 50%;
                    right: -30px;
                    transform: translateY(-50%);
                }
                & a{
                    display: block;

                    & .item-thumbnail{
                        width: 100%;
                        height: auto;
                        aspect-ratio: 4 / 3;
                        border: solid 1px #cccccc;
                        background: #ffffff;

                        & img{
                            margin: 0 auto;
                            object-fit: cover;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

    }

    /* About */
    .about{
        margin-top: -50px;

        & .about-wrapper{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
        }

        & .text-container{
            padding: 30px 60px 30px 30px;           


            & h2{
                font-size: 20px;
                font-weight: normal;
                margin-bottom: 20px;

                & .logo-black{
                    max-width: 330px;
                }            
            }
            & p{
                font-size: 18px;
                line-height: 1.8;
            }
        }
        & .door-image{
            & a{
                display: block;
                width:100%;
                height: 100%;
            }
            & img{
                height: 100%;
                max-height: 350px;
                width: auto;
                object-fit: cover;
                aspect-ratio: 425 / 463;
            }
        }
    }

    /* SNS */
    .sns{
        padding: 150px 0;
        background-image: url('../../images/soushoku.svg'), url('../../images/soushoku2.svg');
        background-repeat: repeat-x, repeat-x;          /* 横方向に繰り返す */
        background-position: top left, bottom left;     /* 1枚目は上部、2枚目は下部 */
        background-size: auto 150px, auto 150px;        /* 高さ165pxで表示 */

    & .sns-wrapper{
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 80px 30px;
        padding: 100px 0;
        position: relative;

        &::before{
            content:"";
            display: block;
            width: 400px;
            height: 280px;        
            background-image: url('../../images/checkitout.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            top: -40px;
            left: 0;
            z-index: 2;
        }

        > div{
            width: 40%;
            height: auto;
            aspect-ratio: 1 / 1;

            & a{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                & img{
                    height: 100%;
                    width: auto;
                }
            }
        }
    }
    }
}

/*-----------------------------------------------------------------------*/
/* About メゾン・ド・トアルとは */
body.about{
@media screen and (min-width: 62.5em) {
    #main {
        width: 100%;
        max-width: 100%;
    }
}

.about-orner{
    & h2{
        text-align: center;
        margin: 50px 0;        
        color: #ff0000;
        font-size: 40px;
        line-height: 1;

        & img{
            max-width: 350px;
            height: auto;
        }
    }
    & .container{
        display: flex;
        gap: 100px;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;

        & .img-contaier{
            padding-bottom: 50px;
            padding-left: 100px;            

            & a{
                display: block;

                & .heading{
                    font-weight: bold;
                    font-size: 20px;
                    margin: 4px 0;
                    text-align: center; 
                    color: #000000;
                    font-weight: bold;
                    font-size: 20px;
                    margin-bottom: 10px;                    
                }
                & .door-orner{
                    max-width: 200px;
                    height:auto;
                }
                
            }
        }        

        & .text-contaier{
            height: auto;
            display: flex;
            align-items: center;            
            font-size: 18px;
            line-height: 1.6;
            padding: 50px 50px 50px 0;
            background-image: url('../../images/orner-face.png');
            background-repeat: no-repeat;
            background-position: bottom right;
            background-size: auto 200px;

            & p{
                font-size: 18px;
                line-height: 1.8;
            }
        }
    }
    .logo-slider{
        background: #000;
        width: 100%; 
        padding: 1em 0;

        & .slide{  
            width: fit-content;      
            color: #ffffff;
            font-size: 2.5vw;
            font-weight: bold;
            padding: 10px 1rem;
            white-space: nowrap;
        }
    } 
}
.about-maison{
    padding: 100px 0 250px 0;
    background-image: url('../../images/soushoku4.svg');
    background-repeat: repeat-x;
    background-position: bottom left;
    background-size: auto 150px;

    & .about-maison-container{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 100px;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;  

        .img-container{
            width:100%;
            max-width: 260px;
            height: auto;
            aspect-ratio: 26 / 71;

            & img{
                width: 100%;
                height: auto;
            }
        }     
        .text-container{
            margin-bottom: 1em;

            & p{
                font-size: 18px;
                line-height: 2;
                margin-bottom: 1em;
            }
        }
    }
}
}

/*-----------------------------------------------------------------------*/
/* 住人の部屋 */
& h2.room-h2{
    text-align: center;
    margin: 50px 0;        
    color: #ff0000;
    font-size: 40px;
    line-height: 1;

    & img{
        max-width: 350px;
        height: auto;
    }
}
.room-detail{
    display: flex;
    gap: 100px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background-image: url('../../images/room_border_bottom.svg');        
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: auto 50px; 
    padding-bottom: 100px;

    & .room-no-container{
        margin-bottom: 100px;
        margin-left: 100px; 

        & .door{
            width: 200px;
            height:333px;
            background-image: url('../../images/door_img.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            padding-top: 39%;
            text-align: center;
            font-size: 20px;
        } 
    } 
    & .text-container{
            height: auto;
            padding: 50px 50px 50px 0;

            & h3{
                font-size:36px;
                line-height: 1;
                margin-bottom: 30px;
            }
            & p{
                font-size: 18px;
                line-height: 1.8;
            }
    }       
}
 
.room-image{
    gap: 100px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;

    & img{
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    & .modal {
        display: none; /* 最初は非表示 */
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;

        .modal-body {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            width: 100%;
            max-width: 1000px;
            height: auto;
            max-height: 100vh;
            overflow: auto;
        }
        .modal-foot{
            text-align: center;
            padding: 20px;

            & button{
                background: #000;
                color: #fff;
                font-size: 24px;
                font-weight: bold;
                text-align: center;
                border: none;
                padding: 10px 30px;
            }
        }
    }
}

.article-content{ /* Free Space */
    margin: 30px auto;
}

.room-item_select{
    width: 100%;

    & .category-list{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px 0;
        border-top: solid 10px #000000;
        border-bottom: solid 10px #000000;

        & a{
            font-size: 18px;
            text-decoration: none;
        }
    }
    & .itemList-wrapper{
        display: flex;
        flex-wrap:wrap;
        gap: 50px;
        width: 100%;
        max-width: 1000px;
        margin: 50px auto;        
    }
    & .category-container{
        /*width: 100%;*/
        /*max-width: 1000px;*/
        /*margin: 0 auto;*/
        /*padding: 50px 0;*/
        display: flex;
        gap: 50px;
        flex-wrap: wrap;
        justify-content: flex-start;
        position: relative;

        & .item-container{
            display: flex;
            gap: 50px;

            & a{
                display: flex;
                flex-flow: column;
                justify-content: center;
            }
        }
        & .item-container + p {
            position: absolute;
            bottom: 105%;   /* 画像の上に表示 */
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.75);
            color: #fff;
            padding: 6px 10px;
            border-radius: 5px;
            white-space: nowrap;
            font-size: 14px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
            /* 吹き出しの矢印 */
            pointer-events: none; /* ツールチップにマウス干渉しないように */

            &::after{
                content: "";
                position: absolute;
                top: 100%; /* ツールチップ下側に矢印 */
                left: 50%;
                transform: translateX(-50%);
                border-width: 6px;
                border-style: solid;
                border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
            }
 
        } 
        & .item-container:hover + p{
            opacity: 1;
            visibility: visible;
        }  
    }
}