.sp{
    display: none;
}
@media screen and (max-width: 896px){
    .pc{
        display: none;
    }
    
    .sp{
        display: block;
    }
}


#breadcrumb{
    position: relative;
    z-index: 3;
}
.guesthouse *{
    box-sizing: border-box;
  font-family: "Zen Maru Gothic", serif;
    font-weight: 700;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    line-height: 
}
html{
    overflow-x: hidden;
}
body{
    background-image: url(../img/bgi.jpg);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    
}
@media screen and (max-width: 896px){
    body{
        
    }
 }


.guesthouse img{
    display: block;
    width: 100%;
}
.light{
    text-shadow: 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1, 0 0 0.4em #f7f1e1;
}
.all{
    width: 40%;
    margin-left: 10vw;
    max-width: 500px;
    padding: 100px 0 150px;
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 896px){
   .all{
    position: static;
    width: 80%;
    margin: 0 auto;
        padding: 60px 0 100px;
   }
}

.sec_kv p{
    line-height: 2;
}

.guesthouse h2,.guesthouse p,.guesthouse dl{
    font-family: "Zen Maru Gothic", serif;
   
}

.guesthouse h2{
    font-size: 24px;
    font-weight: 700;
    color: #BF4D35;
    margin: 0 auto 40px ;
    width: 100%;
    text-align: center;
    border-top: dotted 4px;
    border-bottom: dotted 4px;
    padding: 20px 0;
}
@media screen and (max-width: 896px){
    .guesthouse h2{
        font-size: 20px;
        margin-bottom: 28px;
        
    }
 }




.guesthouse .txt_bold{
    line-height: 32px;
}

.guesthouse p,.guesthouse dl{
    font-size: 16px;
    color: #A06F4A;
    line-height: 1.8;
    text-align: left;
}
@media screen and (max-width: 896px){
    .guesthouse p,.guesthouse dl{
        font-size: 16px;

    }
 }

main{
    position: relative;
}
p.mini_title{
    font-size: 18px;
    color: #BF4D35;
    margin: 16px 0 8px 0;
}

.h1_title{
    width: 100%;
    margin-bottom: 56px;
}




.right_img{
    width: 65%;
    position: fixed;
    right: 0;
    top: 50px;
    height: 100vh;
    overflow: hidden;
    z-index: 2;
}
.right_img{
    display: flex;
    align-items: center;
}

.right_img img{
    transform: translateX(5%);
}
@media screen and (max-width: 896px){
    .h1_title{
        width: 100%;
        margin: 0px 0 100vw 0;
        
    }
    .right_img{
        display: none;
    }
 }

.sp_img{
    display: none;
}

@media screen and (max-width: 896px){
    .pc_img{
        display: none;
    }
    
    .sp_img{
        display: block;
        width: 100%;
        overflow: hidden;
        padding: 8vw 0;
        position: absolute;
        top: calc(60px + 45vw);
    
    }
    .sp_img img{
        transform: scale(1.3);
    }
}



.sec_kv{
    margin-bottom: 80px;
}

@media screen and (max-width: 896px){
    
    .sec_kv{
    margin-bottom: 40px;
}
    
}
.sec{
   text-align: center;
}

video{
    width: 100%;
}



h2.h2_contents{
    margin: 80px auto 40px;
    text-align: center;
}
 
    .youtube-wrap{
    width: 100%;
    margin: 0 auto;
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;

}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
    
 
.div_video p{
    line-height: 1.6;
}

.sec_contents{
    background-color: #FFFFFA;
    width: 100%;
    padding: 48px 40px ;
    border-radius: 20px;
    margin: 0 auto 64px;
    border: dashed 2px #8C6239;
}
@media screen and (max-width: 896px){
    h2.h2_contents{
        margin: 60px auto 28px;
    }
    .sec_contents{
        padding: 32px 24px;
         margin: 0 auto 32px;
    }
 }
.sec_contents img{
   border-radius: 8px;
}

.sec_4{
    margin-bottom: 96px;
}

@media screen and (max-width: 896px){
    .sec_4{
        margin-bottom: 48px;
    }
}

.h3{
    font-size: 21px;
    color: #BF4D35;
    margin: 0 0 32px 0;
    text-align: center;
}


.h3 strong{
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    color: #fff;
    background: #BF4D35;
    line-height: 1.2;
    border-radius: 100px;
    margin-right: 0.2em;
}
@media screen and (max-width: 896px){
    .h3{
        font-size: 16px;
        
    }
 }

.div_img img{
    width: 100%;
    margin: 0 auto;
    border-radius: 8px;
}

.p_contents{
    margin: 16px 0 0;
    line-height: 24px;
}
@media screen and (max-width: 896px){
    .p_contents{
        font-size: 14px;
    }
 }

.dt_contents{
    margin: 16px 0 16px;
    text-align: center;
    font-size: 20px;
}
.guesthouse dl{
    margin: 0;
}
dd.dd_contents{
    font-size: 14px;

}
.dd_contents span{
    font-size: 110%;
}
.span_from{
    display: block;
    background: #bf4d35;
    color: #fff !important;
    width: 8em;
        margin: 0 auto;
    font-size: 16px;
    border-radius: 100px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.button{
    background-color: #FFFFFA;
    padding: 16px 20px;
    border-radius: 6px;
    border: dashed 2px #8C6239;
    margin: 0 0 72px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button a{
    font-size: 16px;
    color: #8C6239;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    line-height: 1.5;
    text-decoration: none;
}
.button img{
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 10px);
    right: 0px;
}

.guesthouse p.p_lastcontents{
    margin: 16px auto 40px;
    font-size: 18px;
    text-align: center;
}
@media screen and (max-width: 896px){
    .p_lastcontents{
        font-size: 14px;
        margin: 12px auto 32px;
    }
    .button{
        padding: 16px 16px;
        margin-bottom: 48px;
    }
    .button a{
        font-size: 14px;
    }
    .button img{
        width: 16px;
        height: 16px;
        top: calc(50% - 8px);
        }
 }

.guesthouse span{
    color: #BF4D35;
}

.text_width{
    max-width: 500px;
    margin: 0 auto 0px;
    text-align: left;
}
@media screen and (max-width: 896px){
    .text_width{
        font-size: 14px;
    }
 }

.guesthouse .p_center{
  text-align: center;
}
.message{
    background-color: #FFFFFA;
    width: 100%;
    padding: 48px 40px;
    border-radius: 20px;
    margin: 0 auto;
    border: dashed 2px #8C6239;
}
.message strong{
    font-size: 120%;
    display: block;
    text-align: center;
    color: #BF4D35;
    line-height: 1.4;
    margin-bottom: 20px;
}

@media screen and (max-width: 896px){
    
  .message{
   padding: 32px 24px;
}  
    
}

.profile{
   margin-top: 40px;
}

.profile .div_img{
    width: 80%;
    margin: 0 auto;
}
footer{
    background: #fff;
    position: relative;
    z-index: 2;
}