@charset "UTF-8";
/* ==================================
common
====================================== */
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    height: 100%;
}

body{
    background-color: #FDFEF8;
    font-family:
        "Noto Sans JP",
        Arial;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    color: #264341;
    margin: 0;
    height: 100%;
}

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


/* ==================================
header
====================================== */

.sp_mainVis , .sp_sabVis{
    display: none;
}

.pc_mainVis {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #FDFEF8;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
}

.pc_mainVis img:nth-of-type(1){
    width: 45%;
    object-fit: cover;
}

.pc_mainVis img:nth-of-type(2){
    width: 45%;
    object-fit: cover;
}

.pc_mainVis div{
    background: rgba(255, 255, 255, 0.70);
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: block;
    width: 20%;
}

.pc_mainVis h1{
    display: block;
    margin: auto;
    font-family: "Shippori Mincho";
    color: #264341;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    font-style: normal;
    font-weight: 600;
    line-height: 2;
    height: 100%;
    writing-mode: vertical-rl;
    padding-top: 40%;
    padding-bottom: 20%;
}

.pc_mainVis h1 p:nth-of-type(1){
    font-size: 1.94vw;
    letter-spacing: 0.6rem;
}

.pc_mainVis h1 p:nth-of-type(2){
    font-size: 1.2vw;
    letter-spacing: 0.3rem;
    margin-top: 4.41vw;
}

.sp_menu_logo{
    display: none;
}

.header_logo{
    height: 7rem;
    object-fit: cover;
}

.menu_btn{
    display: none;
}

.menu_line{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #424E2F;
    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 100;
}

.pc_menu_list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.sp_menu_list{
    display: none;
}

.pc_menu_item{
    font-family: "Shippori Mincho";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1;
    flex-direction: column;
    align-items: center;
}

.pc_menu_item hr{
    border: none;
    display: block;
    width: 3.5rem;
    border-bottom: 1px solid #CDB159;
    margin: 1rem auto 0;
} 

.pc_sabVis_item img{
    height: 100vh;
    width: 100%;
    object-fit: cover;
}


.pc_deer{
    object-position: left bottom;
}

.pc_sabVis{
    position: relative;
    margin-top: 3rem;
}

.pc_sabCopy{
    position: absolute;
    right: 0;
    top: 20vh;
    background: rgba(255, 255, 255, 0.70);
    width: 48%;
    aspect-ratio: 140 / 33;
}

.pc_sabCopy p{
    font-family: "Shippori Mincho";
    color: #264341;
    font-style: normal;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    font-weight: 600;
    font-size: 1.38vw;
    letter-spacing: 0.15rem;
    text-align: center;
    margin-top: 10%;
}

/*header sp */
@media screen and (max-width: 426px) {
    .pc_mainVis , .pc_sabVis{
        display: none;
    }
    
    .sp_mainVis {
        display: block;
        position: relative;
        height: 100vh;
        background: url(../../img/sp_mainVis.jpg) no-repeat;
        background-position: 0% 35%;
        background-size: cover;
        z-index: 1000;
    }
    
    .sp_mainVis div{
        background: rgba(255, 255, 255, 0.70);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        display: block;
        width: 33%;
        height: 72%;
    }

    .sp_mainVis h1{
        display: block;
        margin: auto;
        font-family: "Shippori Mincho";
        color: #264341;
        text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
        font-style: normal;
        font-weight: 600;
        line-height: 1.7;
        height: 100%;
        writing-mode: vertical-rl;
        padding-top: 48%;
    }
    
    .sp_mainVis h1 p:nth-of-type(1){
        font-size: 2rem;
        letter-spacing: 0.6rem;
    }
    
    .sp_mainVis h1 p:nth-of-type(2){
        font-size: 1.4rem;
        letter-spacing: 0.23rem;
        margin-top: 3rem;
    }
    
    .menu_line{
        z-index: 100;
    }

    .sp_menu_item hr{
        border: none;
        display: block;
        width: 3.5rem;
        border-bottom: 1px solid #CDB159;
        margin: 1rem auto 0;
    } 

    /*レスポンシブメニュー ボタン*/

        .menu_btn{
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 3px;
            right: 10px;
            z-index: 1100;
        }

        .menu_btn span:nth-child(1){
            margin-top: 15px;
            width   : 40px;
            height  : 1px ;
            background : #FFFFFF;
        }

        .menu_btn span:nth-child(2){
            margin-top: 10px;
            margin-left: 10px;
            width   : 40px;
            height  : 1px ;
            background : #FFFFFF;
        }

        .menu_btn span:nth-child(3){
            color: #FFFFFF;
            font-family: "Noto Sans JP";
            font-size: 16px;
            font-weight: 300;
            margin-top: 7px;
            padding-left: 2.5px;
        }

        .menu_btn span:nth-child(4){
            display: none;
        }

        /* アクティブ後 */        
        .menu_btn.active{
            z-index: 1115;
        }

        .menu_btn.active span:nth-child(1){
            margin-top: 19px;
            margin-left: 4px;
            transform: rotate(-30deg);
        }

        .menu_btn.active span:nth-child(2){
            margin-top: 0px;
            margin-left: 4px;
            transform: rotate(30deg);
        }

        .menu_btn.active span:nth-child(3){
            display: none;
        }

        .menu_btn.active span:nth-child(4){
            display: block;
            color: #FFFFFF;
            font-family: "Noto Sans JP";
            font-size: 16px;
            font-weight: 300;
            margin-top: 13px;
        }
    /* ----------------------------------*/

    .nav_menu{
        background-image: url(../../img/sp_menu.png);
        background-size: cover;
        background-position: right;
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 1.0s;
    }

    .nav_menu.active {
        transform: translateX(0);
        z-index: 1110;
    }

    .pc_menu_list{
        display: none;
    }

    .sp_menu_list{
        display: flex;
        flex-direction: column;
        width: auto;
        color: #FFFFFF;
        font-family: "Shippori Mincho";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 1;
        padding-top: 7rem;
        gap: 4rem;
        justify-content: space-around;
        align-items: center;
    }
    
    .sp_menu_logo{
        display: block;
        margin: auto;
        width: 20rem;
    }

    .sp_sabVis_item img{
        height: 100vh;
        width: 100%;
        object-fit: cover;
    }
    
    .sp_teien{
        object-position: left bottom;
    }
    
    .sp_deer{
        object-position: 35% 0%;
    } 
    
    .sp_sabVis{
        display: block;
        position: relative;
        margin-top: 3rem;
    }

    .sp_sabCopy{
        position: absolute;
        right: 10%;
        top: 0;
        background: rgba(255, 255, 255, 0.70);
        width: 16%;
        height: 63%;
        margin: auto;
    }

    .sp_sabCopy h2{
        display: block;
        margin: auto;
        font-family: "Shippori Mincho";
        color: #264341;
        text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
        font-style: normal;
        font-weight: 600;
        line-height: 1.5;
        writing-mode: vertical-rl;
        letter-spacing: 0.3rem;
        padding-top: 94%;
    }
    
    .sp_sabCopy p:nth-of-type(1){
        font-size: 14px;
    }

    .sp_sabCopy p:nth-of-type(2){
        font-size: 14px;
        margin-top: 5rem;
    }
}

/* ==================================
main
====================================== */

/*charm pc */
.charm{
    color: #264341;
    margin-top: 35rem;
    position: relative;
}

.charm h2{
    font-family: "Shippori Mincho";
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 2;
    writing-mode: vertical-rl;
    letter-spacing: 0.8rem;
    position: absolute;
    right: 18%;
    top: -22rem;
}

.charm h3{
    font-family: "Shippori Mincho";
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0.8rem;
}

.charm p{
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 350;
    line-height: 2;
    margin-top: 2rem;
}

.charm img{
    width: 60%;
    object-fit: cover;
    aspect-ratio: 87 / 40;
}

.charm hr{
    border: none;
    border-bottom: 1px solid #CDB159;
}

.charm_a{
    display: flex;
    flex-direction:row-reverse;
    align-items: center;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.charm_b{
    display: flex;
    align-items: center;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    margin-top: 10rem;
}

.charm_txt{
    display: inline-block;
    width: 30%;
    margin: 0 2%;
}


/*charm sp */
@media screen and (max-width: 426px) {

    .charm{
        margin-top: 25rem;
    }

    .charm h2{
        font-size: 20px;
        line-height: 1.8;
        letter-spacing: 0.6rem;
        right: 18%;
        top: -17rem;
        z-index: 1;
    }
    
    .charm h3{
        font-size: 18px;
    }
    
    .charm p{
        font-family: "Noto Sans JP";
        font-size: 12px;
        line-height: 1.7;
        margin-top: 1.2rem;
    }

    .charm img{
        width: 80%;
        object-fit: cover;
        aspect-ratio: 64 / 46;
    }

    .charm_a{
        position: relative;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
    }

    .charm_a img{
        margin-left: 0;
    }
    

    .charm_txt{
        position: absolute;
        width: 64%;
        left: 10%;
        bottom: -6rem;
    }

    .charm_b{
        flex-direction:row-reverse;
        margin-top: 12rem;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
    }

    .charm_b img{
        margin-right: 0;
    }
}


/*experience pc */

.experience{
    margin-top: 20rem;
}

.pc_ex_h2{
    color: #264341;
    font-family: "Shippori Mincho";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.sp_ex_h2{
    display: none;
}

.midashi img{
    margin-top: 1.5rem;
}

.midashi{
    margin: auto;
}

.experience .midashi{
    width: 50rem;
}

.experience h3{
    color: #FFF;
    font-family: "Shippori Mincho";
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
}

.ex_item p{
    color: #FDFEF8;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 2;
    margin-top: 3rem;
}

.pc_ex_list{
    margin-top: 8rem;
    display: flex;
}

.sp_ex_list{
    display: none;
}

.ex_item:nth-child(1){
    background-image: url(../../img/kengaku.png);
    background-size: cover;
    background-position: center;
}

.ex_item:nth-child(2){
    background-image: url(../../img/taiken_macha.png);
    background-size: cover;
    background-position: center;
}

.ex_item:nth-child(3){
    background-image: url(../../img/kadou.png);
    background-size: cover;
    background-position: left;
}

.ex_item{
    flex: 1;
    padding-left: 5%;
    padding-right: 5%;
    aspect-ratio: 6 / 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pc_ex_h4{
    font-family: "Shippori Mincho";
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.5rem;
    writing-mode: vertical-rl;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.sp_ex_h4{
    display: none;
}

.ex_dt_list{
    border-radius: 20px;
    background: #E7E2D2;
    padding: 5rem 5rem 7rem 5rem;
}

.ex_icon{
    width: 54px;
    height: 43px;
    object-fit: contain;
}

.ex_dt_item p{
    color: #43403F;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

.ex_dt_item{
    display: flex;
    align-items: center;
    gap: 5rem;
    border-bottom: 1px solid #FFFFFF;
    margin-top: 5rem;
    padding-bottom: 5rem;
}

.ex_dt_item:nth-child(1){
    margin-top: 0;
}

.ex_dt_item:nth-child(4){
    border-bottom: none;
    padding-bottom: 0;
}

.ex_detail{
    display: flex;
    justify-content: space-around;
    margin-top: 10rem;
    background: url(../../img/background__2.png) no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0 20%;
    gap: 10%;
    align-items: center;
}

.ex_dt_instagram{
    margin-top: 1.5rem;
    text-align: center;
}

.ex_dt_instagram a{
    text-decoration: underline;
}

/*charm sp */
@media screen and (max-width: 426px) {
    .pc_ex_h2{
        display: none;
    }

    .sp_ex_h2{
        display: block;
        color: #264341;
        font-family: "Shippori Mincho";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    .midashi img{
        margin-top: 1rem;
        /*vertical-align: baseline; */
        line-height: 1;
        display: block;
        /*議事要素に変更*/
    }
    
    .experience .midashi{
        width: 30rem;
    }

    .experience h2{
        font-size: 18px;
    }
    
    .ex_item p{
        font-size: 12px;
        padding: 0 20%;
    }

    .sp_ex_list{
        margin-top: 5rem;
        display: block;
        justify-content: center;
    }

    .pc_ex_list{
        display: none;
    }

    .ex_item{
        aspect-ratio: 78 / 73;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .experience h3{
        margin-top: 10rem;
    }

    .pc_ex_h4{
        display: none;
    }

    .sp_ex_h4{ 
        display: block;
        font-family: "Shippori Mincho";
        font-style: normal;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.1rem;
        text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
        font-size: 18px;
        writing-mode:horizontal-tb;
        text-align: center;
        background: url(../../img/background_2_b.png) no-repeat;
        background-size: cover;
        background-position: center;
        padding: 3rem 0;
    }

    .sp_ex_h4 p:nth-of-type(1){
        padding-right: 5rem;
    }

    .sp_ex_h4 p:nth-of-type(2){
        padding-left: 11rem;
        margin-top: 1rem;
    }

    .ex_detail{
        display: block;
        background-image: none;
        padding:0 ;
    }

    .ex_dt{
        margin-top: 3rem;
        padding: 0 8%;
    }

    .ex_icon{
        width: 30px;
        height: 30px;
        margin-bottom: 1.3rem;
    }

    .ex_dt_item p{
        font-size: 12px;
        line-height: 1.5;
    }

    .ex_dt_item{
        display: block;
        text-align: center;
        justify-content: center;
        gap: 0;
        margin-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .ex_dt_list{
        border-radius: 20px;
        background: #E7E2D2;
        padding: 3rem 5rem 5rem 5rem;
    }
    
    .ex_dt_instagram{
        margin-top: 1.5rem;
        font-size: 12px;
    }
}




/* dates pc */

.dates{
    margin-top: 18rem;
}

.dates h2{
    color: #264341;
    font-family: "Shippori Mincho";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.dates .midashi{
    width: 20rem;
}

.dates p{
    color: #264341;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 2; 
    margin-top: 3rem;
}

.googleCalender{
    width: 65%;
    margin: auto;
    margin-top: 3rem;
}

.googleCalender iframe{
    width: 100%;
    aspect-ratio: 5 / 3;
    padding: 0.5rem;
    background-color: #E7E2D2;
}

.btn{
    text-align: center;
    margin-top: 3rem;
}

.btn img{
    width: 34rem;
    height: 7rem;
}


/*dates sp */
@media screen and (max-width: 426px) {
    .dates{
        margin-top: 10rem;
    }
    
    .dates h2{
        font-size: 18px;
    }
    /* ◆h1と装飾の間に謎のスペース 解消方法とは？◆*/
    .dates .midashi{
        width: 15rem;
    }
    
    .dates p{
        font-size: 12px;
        line-height: 1.5; 
        margin-top: 2.5rem;
    }
    
    .googleCalender{
        width: 80%;
        margin-top: 2.5rem;
    }
    
    .googleCalender iframe{
        aspect-ratio: 5 / 4;
    }
    
    .btn{
        margin-top: 2.5rem;
    }
    
    .btn img{
        width: 17.3rem;
        height: 3.6rem;
    }
}

/* venue pc */

.venue{
    margin-top: 18rem;
}

.venue h2{
    color: #264341;
    font-family: "Shippori Mincho";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.venue .midashi{
    width: 20rem;
}

.venue p{
    color: #264341;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 2; 
    margin-top: 3rem;
}

address{
    color: #264341;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 2; 
    margin-top: 3rem;
}

.googleMap{
    width: 100%;
    aspect-ratio: 4 / 1;
    margin-top: 3rem;
}

/*venue sp */
@media screen and (max-width: 426px) {
    .venue{
        margin-top: 10rem;
    }
    
    .venue h2{
        font-size: 18px;
    }
    
    .venue .midashi{
        width: 15rem;
    }
    
    .venue p{
        font-size: 12px;
        line-height: 1.5; 
        margin-top: 2.5rem;
        padding: 0 10%;
    }

    address{
        font-size: 12px;
        line-height: 1.5; 
        margin-top: 2.5rem;
    }

    .googleMap{
        width: 100%;
        aspect-ratio: 4 / 3;
        margin-top: 2.5rem;
    }
}

/* message pc */

.message{
    margin-top: 18rem;
}

.message h2{
    color: #264341;
    font-family: "Shippori Mincho";
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.message .midashi{
    width: 30rem;
}

.div_message{
    display: flex;
    padding: 0 15%;
    gap:8%;
    margin-top: 5rem;
}

.pc_profile{
    object-fit: cover;
    width: 40%;
    aspect-ratio: 48 / 80;
}

.comment h3{
    color: #264341;
    font-family: "Shippori Mincho";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    padding-bottom: 2rem;
    border-bottom:1px solid #CDB159;
}

.comment_txt p{
    color: #264341;
    font-family: "Noto Sans JP";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 2; 
    padding-top: 2.5rem;
}

.comment{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 3% 0;
}

.comment_txt{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sp_comment_p{
    display: none;
}

.cv{
    background-color:#E7E2D2;
    padding: 1rem;
}

.comment h4{
    color: #43403F;
    font-family: "Shippori Mincho";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    padding-bottom: 1rem;
    border-bottom:1px solid #CDB159;
}

.cv p{
    color: #43403F;
    font-family: "Noto Sans JP";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    padding-top: 0.5rem;
}

.message a{
    text-decoration: underline;
}

/*message sp */
@media screen and (max-width: 426px) {
    .message{
        margin-top: 10rem;
    }
    
    .message h2{
        font-size: 18px;
    }
    
    .message .midashi{
        width: 20rem;
    }
    
    .messsage p{
        font-size: 12px;
        line-height: 1.5; 
        margin-top: 2.5rem;
        padding: 0 10%;
    }

    .div_message{
        display: block;
    }

    .pc_profile{
        display: none;
    }

    .comment_txt{
        background-image: url(../../img/sp_profile.jpg);
        background-size: cover;
        background-position: bottom;
        text-align: right;
        padding: 6rem 1.5rem 5rem 37%;
        height: 100vh;
        text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
    }

    .comment h3{
        color: #FFFFFF;
        font-family: "Shippori Mincho";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        padding-bottom: 2rem;
        border-bottom:1px solid #CDB159;
    }
    
    .comment_txt p{
        color: #FFFFFF;
        font-family: "Noto Sans JP";
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 2; 
        padding-top: 2.5rem;
        padding-left: 5rem;
        text-align: left;
    }
    
    .pc_comment_p{
        display: none;
    }

    .sp_comment_p{
        display: block;
    }
    
    .cv p{
        font-weight: 300;
    }

    .div_message{
        padding: 0;
    }
    
    .cv{
        margin: 0 10%;
    }

    .cv a{
        font-weight: 400;
    }
}

/* footer */
footer { 
    background: url(../../img/background_3.png) no-repeat;
    background-size: cover;
    background-color:rgba(255,255,255,0.3);
    background-blend-mode:lighten;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 12rem 30% 10rem 30%;
    margin-top: 20rem;
}

.footer_logo{
    height: 15rem;
}

.instagram img{
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

.instagram{
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #264341;
    font-family: "Noto Sans JP";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    justify-content: center;
    margin-top: 5rem;
}

.c_p{
    color: #264341;
    font-family: "Shippori Mincho";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    justify-content: center;
    margin-top: 8rem;
}

/*footer sp */
@media screen and (max-width: 426px) {
    footer {
        padding: 10rem 20% 8rem 20%; 
        margin-top: 10rem;
    }

    .instagram{
        font-size: 12px;
        margin-top: 3rem;
    }
}

.reserve_btn {
  width: 100%;
  border: none;
}
/*
@media screen and (max-width: 426px) {
  .reserve_btn {
    width: 90%!important;
  }
}
*/
.reserve_info {
  font-size: small;
}
@media screen and (max-width: 426px) {
  .reserve_info {
    font-size: x-small;
  }
}