@charset "UTF-8";
/* CSS Document */
.wrap{
    margin:0 calc(50% - 50vw);
    width:100vw;
    display:flex;
    justify-content:space-between;
}
.mainV{
    width:50%;
    height:100vh;
    position:sticky;
    top:0;
}
.mainV .inner{
    overflow:hidden;
    position:relative;
    height:100%;
}
.mainV img{
    object-fit:cover;
    object-position: center bottom;
    width:100%;
    height:100%;
    vertical-align:bottom;
}
.mainV .title{
    position:absolute;
    top:110px;
    left:30px;
    color:#fff;
    width:fit-content;
    max-width:90%;
}
.mainV .title h2{
    font-size:5rem;
    line-height:0.8em;
}
.mainV .title h4{
    font-size:1.3rem;
    display: flex;
    align-items: center;
    margin:0 0 1em 0;
}
.mainV .title h4:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
    margin-left: 1rem;
}
.mainV .title .date{
    font-size:1.5rem;
    margin: 0 0 0.5em 0;
}
.mainV .title .date span{
    font-size:250%
}
.mainV .title h3{
    font-size:1.0rem;
}

/* ---- 959px ------- */
@media screen and (max-width: 959px) {
    .mainV .title h2{
        font-size:5rem;
    }
    .mainV .title h4{
        font-size:1.1rem;
    }
    .mainV .title .date{
        font-size:1.2rem;
        margin: 0 0 0.2em 0;
    }
    .mainV .title h3{
        font-size:0.9rem;
    }
}
/* ---- 768px ------- */
@media screen and (max-width: 768px) {
    .wrap{
        display:block;
        justify-content:unset;
    }
    .mainV{
        width:100%;
        height:100vh;
        position:sticky;
        top:0;
    }
}
/* ---- 519px ------- */
@media screen and (max-width: 519px) {
    .mainV .title h2{
        font-size:4rem;
    }
    .mainV .title h4{
        font-size:0.9rem;
    }
    .mainV .title .date{
        font-size:1.2rem;
        margin: 0 0 0.2em 0;
    }
    .mainV .title h3{
        font-size:0.8rem;
    }
}

/*-- cont -- */
.cont{
    width:50%;
    overflow:hidden;
}
.cont > .inner{
    width:96%;
    margin:0 auto 0px;
}
.cont .inner .detail{
    margin:0 0 50px 0;
}
.cont .inner .detail .sub_inner{
    width:90%;
    margin:0 auto 4em;;
}
.cont .inner .detail h2{
    font-size:1.5rem;
    margin:2em 0 0.5em 0;
}
.cont .inner .detail h5{
    font-size:0.9rem;
    margin:0 0 3em 0;
}
.cont .inner .detail h3{
    font-size:1.3rem;
    margin:0 0 1em 0;
}
.cont .inner .detail .img{
    overflow:hidden;
    aspect-ratio:1 / 0.7;
    position:relative;
}
.cont .inner .detail .img img{
    object-fit:cover;
    height:100%;
    width:100%;
}
.cont .inner .detail .img .before{
    position:absolute;
    bottom:0;
    right:0;
    width:30%;
    height:30%;
    border-top:10px solid #fff;
    border-left:10px solid #fff;
    align-items:end;
}
.cont .inner .detail .img .before dt{
    color:#fff;
    bottom:5px;
    position:absolute;
    right:5px;
    line-height:1em
}
/* ---- 768px ------- */
@media screen and (max-width: 768px) {
    .cont{
        width:100%;
        z-index:1;
        position:relative;
        padding:0 0 100vh 0;
        margin:20vh 0 0;
    }
    .cont > .inner{
        width:100%;
        margin:0 auto 0;
        background:#fff;
        padding:70px 0 0px;
    }
    .cont .inner .detail:last-child{
        margin:0 0 0 0;
    }
    .cont .inner .detail h2{
        margin:0em 0 0.5em 0;
    }
    .cont .inner .detail .img .before{
        border-top:5px solid #fff;
        border-left:5px solid #fff;
    }
}
/* ---- 519px ------- */
@media screen and (max-width: 519px) {
    .cont .inner .detail h2{
        font-size:1.3rem;
    }
    .cont .inner .detail h5{
        font-size:0.8rem;
        margin:0 0 3em 0;
    }
    .cont .inner .detail h3{
        font-size:1.2rem;
    }
}


/* ---- yakisugi ------- */
.yakisugi{
    width:100%;
    margin:auto;
    background:#000;
    color:#fff;
    padding:0 0 30px 0;
}
.yakisugi .title{
}
.yakisugi .title .heroimage{
    width:80%;
    max-width:500px;
    position:relative;
    margin:auto;
    padding:100px 0;
}
.yakisugi .title .heroimage > img{
    object-fit:cover;
    height:100%;
    width:100%;
}
.yakisugi .title .heroimage .logo{
    width:20%;
    max-width:100px;
    height:fit-content;
    margin:0 auto 20px; 
}
.yakisugi .title > p{
    width:90%;
    max-width:500px;
    margin:50px auto;
}
.yakisugi .yaki_cont{
}
.yakisugi .yaki_cont .inner{
}
.yakisugi .yaki_cont .inner > img{
    width:100%;
}
.yakisugi .yaki_cont .inner .sub_inner{
    width:80%;
    max-width:500px;
    margin:100px auto;
}
.yakisugi .yaki_cont .inner .sub_inner h4{
    font-size:1.2rem;
    margin:0 0 1em 0;
}
/* ---- 519px ------- */
@media screen and (max-width: 519px) {
    .yakisugi .yaki_cont .inner .sub_inner h4{
        font-size:1.1rem;
    }
}


/* ---- information ------- */
.information{
	background:#f1f1ee;
    margin:0 calc(50% - 50vw);
    width:100vw;
    padding:70px 0;
}
.information .info_wrap{
    width:90%;
    max-width:1400px;
    margin:auto;
}
.information .info_wrap h3{
    font-size:1.5rem;
    display: flex;
    align-items: center;
    margin:0 0 20px 0;
}
.information .info_wrap h3:after {
    content: "";
    height: 0.5px;
    flex-grow: 1;
    background-color: #000;
    margin-left: 1rem;
}
.information .info_wrap .info_inner{
    display:flex;
    justify-content:space-between;
}
.information .info_wrap .info_inner .info{
    width:60%;
}
.information .info_wrap .info_inner .info h5{
    font-size:1.1rem;
    margin:0 0 1em 0;
}
.information .info_wrap .info_inner .info h5 span{
    display:block;
    font-size:85%;
}
.information .info_wrap .info_inner .info table{
    width:100%;
    margin:0 0 30px 0;
    border-collapse:collapse
}
.information .info_wrap .info_inner .info table tr{
    border-top:0.5px solid #666;
    line-height:1.7em;
}
.information .info_wrap .info_inner .info table td{
    padding:0.3em 0;
}
.information .info_wrap .info_inner .info table tr:last-of-type{
     border-bottom:0.5px solid #666;
}
.information .info_wrap .info_inner .map{
    width:35%;
}
.information .info_wrap .info_inner .info > p.note{
    font-size:80%;
    line-height:1.9em;
    text-indent:-1em;
    padding-left:1em;
}
/* ---- 768px ------- */
@media screen and (max-width: 768px) {
    .information .info_wrap .info_inner{
        display:block;
        justify-content:unset;
    }
    .information .info_wrap .info_inner .info{
        width:100%;
    }
    .information .info_wrap .info_inner .map{
        width:100%;
        margin:50px 0 0;
    }
}

/* ---- form ------- */
.form{
    margin:100px 0 50px;
}
.form h3{
    font-size:1.5rem;
}
.form h5{
     font-size:0.8rem;
}

/* ---- 599px ------- */
@media screen and (max-width: 599px) {

}