@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&family=Noto+Serif+JP:wght@200&display=swap&text=0123456789,:');


/*共通*/
html, body{
  position: relative;
  width: 100%;
  overflow-x: hidden;
   
}

body {
    font-family:'Noto Serif JP',athelas,source-han-serif-japanese,noto-serif-extracondensed, sans-serif;
/*font-weight: 300;*/
/*font-style: bold;*/
    margin: 0px;
    font-size: 16px;
    font-weight: 500;
/*    letter-spacing: 1px;*/
    line-height: 2;
    color: #212529;
    overflow-x: hidden;
}


/*h1*/
h1 {
    font-size: 5em;
}

/*h2*/
h2 {
    font-size: 3em;
    
}

/*h3*/
h3 {
    font-size: 2em;
}

/*h4*/
h4 {
    font-size: 1.5em;
}

/*h5*/
h5 {
    font-size: 1.25em;
}

/*h6*/
h6 {
    font-size: 1em;
}


@media screen and (max-width: 500px) {

    /*h1*/
    h1 {
        font-size: 10vw;
    }

    /*h2*/
    h2 {
        font-size: 10vw;
    }

    /*h3*/
    h3 {
        font-size: 6.6vw;
    }

    /*h4*/
    h4 {
        font-size: 1.3em;
    }

    /*h5*/
    h5 {
        font-size: 4vw!important;
    }

    /*h6*/
    h6 {
        font-size: 1.1em;
    }

    p {
        font-size: 4vw;
    }
}

/**/
.mini_text{
    font-size: 0.75em!important;
    line-height: 1.4em;
}

@media screen and (max-width: 769px) {
.mini_text{
    font-size: 1em!important;
    line-height: 1.8em;
}
}

/*ヘッダータイトル*/
h1 img {
   /* margin-top: 4px;*/
    height: 70px;
    padding: 12px 0;
}

@media screen and (max-width: 769px) {
    h1 img {
        height: 50px;
    }
}

/*リンクの色*/
a {
    color: #212529;
    text-decoration: underline;
    text-decoration-color:#aaa;
    transition: 0.3s;
}

a:hover {
    transition: 0.3s;
    text-decoration-color:#aaa;
    color: #999;
}

/*リンクの色ここまで*/



/*文字を中央寄せする場合*/
.text_center {
    text-align: center !important;
}

/*左寄せにする場合*/
.text_left {
    text-align: left !important;
}

/*上の間隔を100px開ける*/
.margin_top_100 {
    margin-top: 100px!important;
}

/*上の間隔を60px開ける*/
.margin_top_60 {
    margin-top: 60px!important;
}

/*上の間隔を30px開ける*/
.margin_top_30 {
    margin-top: 30px !important;
}

/*上の間隔を20px開ける*/
.margin_top_20 {
    margin-top: 20px !important;
}

/*上の間隔を0pxにする*/
.margin_top_0 {
    margin-top: 0px !important;
}

/*下の間隔を0pxにする*/
.margin_bottom_0{
    margin-bottom: 0px!important;
}

.margin_bottom_30{
    margin-bottom: 30px!important;
}

.margin_left_20{
    margin-left: 20px;
}

/*margin-base*/
.margin_base {
    margin-bottom: 60px;
}

.padding_bottom{
    padding-bottom: 60px!important;
}

.padding_bottom_100{
    padding-bottom: 100px!important;
}

.padding_top{
    padding-top: 60px!important;
}

.padding_top_30{
    padding-top: 30px!important;
}

.padding_top_0{
    padding-top: 0px!important;
}

.padding_bottom_0{
    padding-bottom: 0px!important;
}

@media screen and (max-width: 769px) {
.sp_padding_bottom_0{
    padding-bottom: 0px!important;
}
    .sp_padding_top_0{
    padding-top: 0px!important;
}
}


/*ページトップへ移動*/
#page_top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 40px;
    bottom: 40px;
    background: url(../img/link_pagetop.png);
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    border-radius: 50%;
    z-index: 100;
}

@media screen and (max-width: 769px) {
    #page_top {
        right: 20px;
        bottom: 40px;
    }
}

/*ページトップへ移動*/
#page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}

/*PC表示非表示*/
.pc_none {
    display: none!important;
}

@media screen and (max-width: 769px) {
    .pc_none {
        display: block !important;
    }

    .sp_none {
        display: none !important;
    }
}

/*文字を白くする*/
.text_white{
    color:#fff;
}

p{
    text-align: justify;
}

/*sectionの共通コード*/
section {
    padding: 120px 0em;
/*    text-align: center;*/
    position: relative;
}

/*sectionのタイトル*/
section h2 {
/*
    letter-spacing: 4px;
    line-height: 1.2;
*/
}

/*sectionの文字、リストの設定*/
section p,
section ul {
    margin: 0 0px;
/*    font-weight: bold;*/
}

@media screen and (max-width: 769px) {
    section {
        padding: 80px 1em;
    }

    section p,
    section ul {
        /*text-align: left;*/
    }
}


/*SP時タイトルを改行*/
section h2 br,
section h3 br {
    display: none;
}

@media screen and (max-width: 769px) {
    section h2 br,
    section h3 br {
        display: block;
    }
}



/*ボタンの設定*/
/*ベースボタン*/
.base_button {
    border: 2px solid #4F3837;
    font-family: 'a-otf-ud-reimin-pr6n', sans-serif;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    margin: 0 auto;
    display: inline-block;
    padding: 0.4em 4.8em;
    height: auto !important;
    cursor: pointer;
    user-select: none;
/*    font-weight: bold;*/
    text-align: center;
    max-width: 90%;
    text-decoration: none;
    border-radius: 50px;
    background: #000;
    color: #fff;
}

.base_button:hover {
    opacity: 1;
    transition: 0.2s;
    background: #fff;
    border: 2px solid #4F3837;
    color: #4F3837;
}
@media screen and (max-width: 769px) {
    .base_button {
        padding: 12px 20px;
    }
    .base_button h5{
        font-size: 1.25em!important;
    }
}

.white_button{
    border:1px solid #999;
    color: #000;
    background: #fff;
    border-radius: 4px;
    width: 90%;
    max-width: 400px;
}

.white_button:hover{
    border:1px solid #333;
    color: #fff;
    background: #333;
    border-radius: 4px;
}


.b_button{
    border:#fff solid 2px;
    display: block;
    text-align: center;
    border-radius: 10px;
    background: #000;
    color:#FFF;
    width: 180px;
    margin: 30px auto 0;
    font-size: 0.9em;
    padding:0.2em 0;
    text-decoration: none;
}

.b_button:hover{
    background: #fff;
    color: #000;
}

.b_button span{
        opacity: 1!important;
}

.w_button{
    border:#000 solid 1px;
    background: #fff;
    color: #000;
}
.w_button:hover{
    background: #000;
    color: #fff;
}


/*スマホ時ボタン内の改行*/
.base_button br {
    display: none;
}
@media screen and (max-width: 769px) {
    .base_button br {
        display: block;
    }
}

/*小さいサイズのボタンにする*/
.mini_button {
padding: 0.4em 2.8em;
}



#video {
    /*天地中央配置*/
    position: absolute;
    z-index: 15;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

/*ヒーローイメージ*/
/* 旧トップページ用の #top ルールは削除。
   新テーマでは予約ページのヒーロー(section.phero#top)に ID セレクタで
   height:100vh が勝ってしまい .phero--slim を打ち消すため。 */

.top_back{
    width: 100%;
    height:100vh;
    background: #fff;
    z-index: 99;
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 1}
75% {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 1}
    75% {opacity: 1}
    100% {opacity: 0}
}


/*トップ画像の調整*/
.top_img{
    margin:0px auto 0px;
    display: flex;
    align-items:center;
    flex-direction:column;
    justify-content:center;
    height:100vh;
    z-index: 100;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
animation: fadeInlogo 1s ease 0s 1 normal;
    -webkit-animation: fadeInlogo 1s ease 0s 1 normal;
}

@keyframes fadeInlogo {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeInlogo {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}

@media screen and (max-width: 769px) {
.top_img{
    height:100%;
/*    max-height: 400px;*/
}
}

.top_img img{
    width:100px;
    height: auto;
}

.underlogo{
    opacity: 0;
animation: fadeoutlogo 7s ease 0s 1 normal;
    -webkit-animation: fadeoutlogo 7s ease 0s 1 normal;
}

@keyframes fadeoutlogo {
    0% {opacity: 1}
    95% {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes fadeoutlogo {
    0% {opacity: 1}
    95% {opacity: 1}
    100% {opacity: 0}
}



.top_text{
    width:80%;
    max-width: 300px;
    font-size: 0.8em;
    position: absolute;
    bottom: 60px;
    left: 60px;
    font-weight: bold;
}

@media screen and (max-width: 769px) {
    .top_text{
    width:45%;
    max-width:300px;
    font-size: 0.8em;
    position: absolute;
    bottom: 30px;
    left: 10px;
    }
}

.top_text hr{
    width:100%;
    background: #000;
    height: 1px;
    border:0;
    margin:10px auto;
}

.top_share{
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto;
/*    z-index: 99;*/
}


@media screen and (max-width: 769px) {
.top_share{
    position: absolute;
    top: 20px;
    right: 12px;
    width: auto;
}
}

.share_icon{
    height:2em;
    width: 2em;
}

.share_icon_sp{
    margin-right: 0.5em;
}

.top_play_movie{
    position: absolute;
    bottom: 40px;
    right: 20px;
    width: auto;
/*    z-index: 10000;*/
}

.top_play_movie img{
    width: 250px;
}

@media screen and (max-width: 769px) {
.top_play_movie{
    position: absolute;
    bottom: 26px;
    right: 10px;
    width: 60%;
}
    .top_play_movie img{
    width: 100%;
}
}


/*ヒーローイメージここまで*/

.wrap{
    position: relative;
}

.top_logo{
    position: absolute;
/*    top:1em;*/
    left: 1.5em;
}


/*横並びに並べる*/
.flex_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: flex-start;*/
    height: auto;
    margin: 60px auto 90px;
    width: 98%;
    max-width: 1200px;
}

@media screen and (max-width: 769px) {
    .flex_area {
    width: 90%;
        margin: 60px auto 0px;
}
    
}


/*横幅を揃える*/
.width_about{
/*
    width: 95%;
    max-width: 1100px;
*/
    margin: 0 auto;
    position: relative;
}

/*横幅を揃える*/
.width_all{
    width: 95%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width: 769px) {
    .width_all {
    width: 100%;
   
}
    
}

#about{
    padding-left: 0;
    padding-right: 0;
}

/*About Us*/
/**/
.about_text{
    width: 100%;
/*    max-width: 400px;*/
    margin-left: 50%;
    padding-top: 30px;
}

@media screen and (max-width: 769px) {
.about_text{
    width: 100%;
/*    max-width: 400px;*/
    margin-left: 00%;
    padding-top: 30px;
}
}

.about_text h2{
    margin: 30px 0;
    margin-left: 60px;
}

@media screen and (max-width: 769px) {
.about_text h2{
    margin: 30px 0;
    margin-left: 30px;
}
}


.about_text p{
    margin: 30px 0;
    margin-left: 60px;
}

.about_text h3{
    margin: 40px 0 30px;
    margin-left: 60px;
}

@media screen and (max-width: 769px) {
.about_text h3,.about_text p{
    margin-left: 5vw;
    margin-right: 5vw;
}
}

.about_img{
    position: absolute;
    top:0;
    left: 0px;
    width: 50%;
    height:750px;
/*    background: url(../img/about_img.jpg);*/
    background-position: center;
    background-size: cover;
}

.about_img img{
    width: 100%;
    height:750px;
    object-fit: cover;
}



@media screen and (max-width: 769px) {
    #about .width_about{
/*        height:1500px;*/
        margin-bottom: 300px;
    }  
    
.about_img{
    position: absolute;
    top:auto;
    left:auto;
    right: 0;
    bottom: -30px;
    width: 95%;
    height:0px;
    z-index: -1
}
    
    .about_img img{
    width: 100%;
    height:200px;
    object-fit: cover;
}

    
}

.hr_b{
    width: 100%;
    height:1px;
    background:rgba(112,112,112,0.6);
    position: relative;
}

.hr_b2{
    width: 80px;
    height:4px;
    position: absolute;
    left: 60px;
    bottom: -2px;
    background:rgba(112,112,112,1);
}

@media screen and (max-width: 769px) {
 .hr_b2{
    left: 30px;
}   
}

.hr_b2_area{
    width: 95%;
    max-width: 1100px;
    height:4px;
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.hr_b2_w{
    width: 80px;
    height:4px;
    background: #fff;
}

@media screen and (max-width: 769px) {
.hr_b2_area{
    left: 30px;
}
}

.hr_b2_b{
    background: #000;
}


/*魅力*/
#attractive{
    padding-left: 0;
    padding-right: 0;
}

.attractive_area{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
/*    margin-bottom: 150px;*/
}


.attractive_box1{
    width: 20%;
    position: relative;
}
.attractive_box2{
    width: 45%;
    position: relative;
/*    font-size: 0.9em;*/
}
.attractive_box3{
    width: 35%;
    position: relative;
}


.attractive_box1 img{
    width: 100%;
    height: auto;
    padding-top: 120%;
}

.attractive_box2 img{
    width: 110%;
    height: auto;
    padding: 0 2em;
    position: absolute;
    top:0;
    z-index: 10;
}

.attractive_box2 p{
    width: 96%;
    margin: 0 auto;
   padding: 0 2em;
    position: absolute;
    padding-top:75%;
    left: 0;
    right: 0;
    z-index: 11;
}

.attractive_box3 img{
    width: 100%;
    height: auto;
    padding-top: 30%;
}



@media screen and (max-width: 769px) {
.attractive_area{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
/*    height:2500px;*/
    margin-bottom: 170px;
}
    .attractive_box1,.attractive_box2,.attractive_box3{
    width: 100%;
    position: relative;
}
    
    .attractive_box1_img{
    width: 30%!important;
    height: auto!important;
        padding: 0!important;
        position: absolute!important;
        bottom: -300px!important;
        top:130px!important;
}

.attractive_box2 img{
    width: 110%;
    height: auto;
    position: relative;
    margin-bottom: 100px;
}

.attractive_box2 p{
    width: 100%;
    position: relative;
    margin: 0 auto;
    padding: 5vw;
    padding-top: 0;
}

.attractive_box2{
/*    padding-bottom: 80%;*/
}
    
.attractive_box3 img{
    width:95%;
    margin-left:  20%;
    height: auto;
    z-index: 9;
    position: relative;
    top: -0px;
    bottom: 0px;
    padding-top:0;
}
    
    .box3_height{
       margin-bottom: 170px;
    }
    
}

@media screen and (max-width: 500px) {
.attractive_area{
    margin-bottom: 0px;
}
}
   
.guide_button{
    margin:30px auto;
    margin-right: 0;
}




/*architect*/

#architect{
    background: #000;
    padding: 0 0 30px;
    margin:60px 0 0px;
}


@media screen and (max-width: 1110px) {
#architect{
margin-top:150px;
}
}

@media screen and (max-width: 1000px) {
#architect{
margin-top:210px;
}
}

@media screen and (max-width: 850px) {
#architect{
margin-top:290px;
}
}


@media screen and (max-width: 769px) {
#architect{
    margin:120px 0 0px;
}

}

.architect_img{
/*
    background: url(../img/architect_img.jpg);
    background-position: center;
    background-size: cover;
*/
    width: 100%;
/*    height:400px;*/
    position: relative;
}

.gradient{
    position: absolute;
    width: 100%;
    height: 60%;
    top:40%;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.9));
}

.architect_img img{
    width: 100%;
     height: 500px;
    object-fit: cover;
}

@media screen and (max-width: 769px) {
    .architect_img img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
    
.architect_img img{
    width: 100%;
    height: 200px;
    object-fit: cover;
}
}


#architect h2{
    margin: 30px auto;
/*    margin-left: 30px;*/
    color: #fff;
}

@media screen and (max-width: 769px) {
  #architect h2{
    margin: 30px 0;
margin-left: 30px;
}
  
    
}

#architect h4{
    height:200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
}



/*横並びの大きさ調整*/
.box_area div {
    width: 23%;
    max-width: 600px;
    margin: 0% 1% 2% 1%;
    padding: 1.5% 1.5% 1.5% 1.5%;
    border: 1px solid #999;
    border-radius: 10px;
    background: #fff;
}

.box_area div h4{
    line-height: 1.8em;
    margin-bottom: 20px;
     margin-top: 0px;
}

.box_area div h4 span{
    font-size: 0.4em;
}

.box_area div p{
    font-size: 0.8em;
    text-align: center;
}



/*SP時は1列にする*/
@media screen and (max-width: 769px) {
    .box_area div {
        width: 100%;
        margin: 0% 0% 30px 0%;
    padding: 20px 10px 20px;
    }
}

/*ボックス内の画像の大きさ調整*/
.box_area img {
    width: 120px;
    height: 120px;
    margin: 30px auto 30px;
    display: block;
}
/*About Usここまで*/


.stay_message{
    text-align: center;
    margin: 40px auto 0;
    color: #fff;
    width: 90%;
}

.stay_message h2{
    margin:0 auto!important;
}

@media screen and (max-width: 769px) {
.stay_message p{
    text-align: justify;
}
}

/*3カラム*/
.box_area_2{
    margin-bottom: 160px;
}

/*横並びの大きさ調整*/
.box_area_2 .column_3 {
    width: 31%;
    height:350px;
    max-width: 600px;
    margin: 0% 1% 2% 1%;
/*    padding: 1.5% 1.5% 1.5% 1.5%;*/
/*     border: 1px solid #999;*/
    border-radius: 10px;
}

.stay_back_all{
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url("../img/stay_back.jpg");
      background-repeat: no-repeat,
      no-repeat;
  background-size:cover;
}

.shop_back_all{
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url("../img/shop_back.jpg");
      background-repeat: no-repeat,
      no-repeat;
  background-size:cover;
}

.tree_back{
    background: url("../img/tree_back.jpg");
    background-size: cover;
    height:100%;
    width: 100%;
    border-radius: 10px;
    position: relative;
    background-size: cover;
}

.zen_back{
    background: url("../img/zen_back.jpg");
    background-size: cover;
}

.holiday_back{
    background: url("../img/holiday_back.jpg");
    background-size: cover;
}

.pudding_back{
    background: url("../img/shop_pudding.jpg");
    background-size: cover;
}

/*
.stay_title{
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
    padding: 10px;
    background: #000;
    border-radius: 10px;
    color:#FFF;
    line-height: 1.2;
}
*/
.stay_title {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
    padding: 10px;
    background: #000;
    border-radius: 10px;
    color: #FFF;
    line-height: 1.2;
    border: 3px solid transparent; /* 枠線を設定 */
    animation: border-glow 4.5s linear infinite; /* 輝く枠線のアニメーション */
    overflow: hidden; /* 擬似要素のはみ出し防止 */
}
/*アニメーションここから*/
@keyframes border-glow {
    0% {
        border-radius: 10px;        
        border-color: transparent;
    }
    50% {
        border-radius: 10px;        
        border-color: white yellow white;
    }
    100% {
        border-radius: 10px;        
        border-color: transparent;
    }
}
/*アニメーションここまで*/


.box_area_2 div h3 span{
    font-size: 0.5em;
    display: block;
}



/*SP時は1列にする*/
@media screen and (max-width: 769px) {
    .box_area_2 .column_3 {
        width: 100%;
        margin: 0% 0% 80px 0%;
    padding: 20px 10px 20px;
    }
}

/*ボックス内の画像の大きさ調整*/
/*
.box_area_2 img {
    width: 120px;
    height: 120px;
    margin: 30px auto 30px;
    display: block;
}
*/
/*3カラムここまで*/


.state_img_area{
/*    background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/starts_back.jpg");*/
    background:linear-gradient(rgba(50,50,50, 1), rgba(50,50,50, 1)), url("../img/starts_back.jpg");
    background-position: center,center;
    background-size: cover,cover;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.contact_img_area{
/*    background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/starts_back.jpg");*/
    background:linear-gradient(rgba(65,65,65, 1), rgba(65,65,65, 1));
    background-position: center,center;
    background-size: cover,cover;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}


.state_img{
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
    padding: 30px 30px;
    display: block;
    opacity: 1;
    transition: 0.3s;
}

.state_img_area:hover{
    opacity: 0.7;
    transition: 0.3s;
}

.social_area{
    width: 96%;
    max-width: 1100px;
    padding: 60px;
    margin: 90px auto;
    background: url(../img/social.jpg);
    background-position: top;
    background-size: cover;
    text-align: center;
    display: flex;
    flex-direction: column;
   justify-content: center;
    align-items: center;
    color: #fff;
}

@media screen and (max-width: 769px) {
.social_area{
    width: 90%;
    padding:10px;
    margin: 60px auto;
/*    margin-bottom: 0;*/
    background: url(../img/social_sp.jpg);
    background-size: cover;
     background-position: top;
    height: 200px;
}
}



.social_area p{
    padding-bottom: 30px;
}

@media screen and (max-width: 769px) {

.social_area p{
    padding-bottom: 10px;
}
}


.social_area img{
width: 80%;
    max-width: 320px;
    height: auto;
    margin:0 auto;
    display: block;
}
@media screen and (max-width: 769px) {
.social_area img{
width: 100%;
    max-width: 260px;
    height: auto;
}
}
    

.new_back{
     background: #F8F5EF;
    padding-top: 1px;
}



/*PHOTO*/
#photo {   
    padding-top:0px;
}

@media screen and (max-width: 769px) {
    #photo {   
    padding:80px 0;
        margin:60px auto;
}
}
    
#photo h2{
    margin: 30px 0;
/*    margin-left: 30px;*/
}

@media screen and (max-width: 769px) {
    #photo h2{
    margin: 30px 0;
margin-left: 30px;
}
}

.photo_slide{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.photo_slide img{
    margin-top: 60px;
    object-fit: cover;
    display: block;
    width: 100%;
    max-width: 1100px;
    height: 300px;
}

/*PHOTO*/



/*NEWS*/
#news {   
    padding-top:60px;
}

@media screen and (max-width: 769px) {
    #news {   
    padding:80px 0;
}
}
    
#news h2{
    margin: 30px 0;
/*    margin-left: 30px;*/
}

@media screen and (max-width: 769px) {
    #news h2{
    margin: 30px 0;
margin-left: 30px;
}
}

.news_list{
    margin:0 auto;
    padding:30px 2%;
    width: 96%;
    max-width: 1100px;
    
}
.news_list span:first-child{
    margin-right: 90px;
}

@media screen and (max-width: 769px) {
.news_list span{
    margin-right: 0px;
    display: block;
}
}

.news_list li{
    margin:30px 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
}

@media screen and (max-width: 769px) {
.news_list li{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: center;
    align-items: flex-start;
}
}

/*footerの設定*/
/*フッターの色、大きさ調整*/
footer {
    padding: 90px 0 0;
    text-align: left;
    font-family:source-han-serif-japanese,noto-serif-extracondensed, sans-serif;
    background: #000;
    color: #fff;
}
@media screen and (max-width: 769px) {
footer {
    background: #000;
    padding: 90px 0 0;
}
}



footer .flex_area{
    margin:0 auto 90px;
}

footer .column_3{
    height:auto!important;
}

.footer_logo_area{
    width: 40%!important;
}

@media screen and (max-width: 769px) {
.footer_logo_area{
    width: 100%!important;
    text-align: center;
}
    .footer_logo_area p{
    width: 100%!important;
    text-align: center;
}
}

.footer_logo{
    width:240px;
}

.footer_logo_area .share_icon{
    margin-top:10px;
}

.footer_menu{
    width: 25%!important;
}

@media screen and (max-width: 769px) {
.footer_menu{
    width: 80%!important;
    margin: 0% 0% 0px 0%!important;
}
}

.footer_list{
    list-style: disc;
    margin-left: 20px;
}

.footer_list li{
    margin:16px 0;
}

.footer_list li a{
    color: #fff;
    text-decoration: none;
}

.footer_list li a:hover{
    text-decoration: underline;
}

/*copyright用*/
small {
    margin-top: 70px;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background: #000;
    width: 100%;
    display: block;
    padding: 10px;
    text-align: center;
}



/*CONTACT*/
#form {   
    padding-top:60px;
}

@media screen and (max-width: 769px) {
    #form {   
    padding:80px 0;
}
}
    
#form h2{
    margin: 30px 0;
/*    margin-left: 30px;*/
}

@media screen and (max-width: 769px) {
    #form h2{
    margin: 30px 0;
margin-left: 30px;
}
}


form{
    background: #fff;
    padding: 30px 60px 60px;
    width: 96%;
    max-width: 1100px;
    margin: 0 auto;
}

@media screen and (max-width: 769px) {
    form{
        width:90%;
     padding: 30px 20px 60px;
}
}


/*フォームの調整*/
#form form{
margin-top:60px;
}
    
@media screen and (max-width: 769px) {
#form form{
    width:90%;
     padding: 10px 20px 60px;
   margin-left: auto;
    margin-right: auto;
}
}

form p span{
    color: #ff0000;
    margin-left: 0px;
}

form div{
margin:30px auto;
}


/*フォームのインプット調整*/
#form input[type="text"], input[type="email"], #form input[type="number"],#form input[type="tel"],textarea {
    width: 100%;
    font-size: 1.1em;
}

/*テキストの高さ調整*/
.row-n {
  height: 200px;
}

/*フォームのデザイン調整*/
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select {
    margin: 4px auto;
    padding: 4px 8px;
    height: 48px;
    border:1px solid #333;
}

/*送信ボタン調整*/
#form .base_button{
    font-size: 1.4em;
    margin: 40px auto 0;
    display: block;
}

@media screen and (max-width: 769px) {
#form .base_button{
    font-size: 1.1em;
    padding:12px 46px;
}
}

/*送信ボタン調整 ミニ*/
#form .mini_button{
    font-size: 1.0em;
    margin: 40px auto 0;
    display: block;
}

@media screen and (max-width: 769px) {
#form .mini_button{
    font-size: 0.9em;
    padding:6px 46px;
}
}

.mail_text{
    padding-left: 1em;
}

.msg{
    text-align: center;
    margin:60px auto;
}

.movetext{opacity:0;}
.movetext span{opacity:0;}

.top_share_z{
    z-index: 1010;
}


/*動画再生用*/
/*
#player {
 	position: absolute; 
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
 	z-index: -10;
 }*/

/*reCAPTCHAの右下バッジは表示する（動作確認のため）。
  非表示に戻す場合は下の行のコメントを外す。
  ※非表示にする場合は「このサイトはreCAPTCHAによって保護され…」の文言表示が必須（Google規約）*/
/* .grecaptcha-badge { visibility: hidden; } */


.slideshow_top {
  height: 100vh;
  margin: 0;
}
.slideshow_top div{height: 100vh;width:100wh;
}

.none_item{
    display: none!important;
}
.block_item{
    display: block!important;
}

.breadcrumbs h1 {
    font-size: 1em!important;
    display: inline;
    font-weight: 100!important;
}

.top_title_area{
    margin-left: 10vw;
}

@media screen and (max-width: 769px) {
.top_title_area{
	 margin-left: 0vw;
    margin-left: 0 4vw;
}
}

.pan_area {
    width: 100%;
    background: #fff;
    z-index: 3;
    padding: 20px 0 20px;
    position: relative;
}

.top_padding_0{
    padding-top: 0!important;
}




p.comingsoon {
    text-align: center;
    color: #fff;
    margin-top: 32px;
    /* font-size: 1.5em; */
    /*font-weight: bold;*/
}

.footer_stay{
    padding: 1em 0 0.1em;
}

.footer_stay_box{
    margin-bottom: 90px;
}


.tree_back{
    background: url(https://bonmal.jp/wp-content/uploads/2022/05/K85_1663.jpg);
    background-size: cover;
background-position: center;
}

.zen_back{
    background: url(https://bonmal.jp/wp-content/uploads/2022/05/K85_9294.jpg);
    background-size: cover;
background-position: center;
}

.holiday_back{
    background: url(https://bonmal.jp/wp-content/uploads/2022/05/holiday.jpg);
    background-size: cover;
background-position: center;
}

.pudding_back{
    background: url(https://bonmal.jp/wp-content/uploads/2022/05/K85_6804.jpg);
    background-size: cover;
background-position: center;
}
/*フローター*/
.floater{
    position:fixed ;
    bottom:100px;
    right: 24px;
    height:86px;
    width: 86px;
    border-radius: 100%;
    z-index: 2000;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	font-size: 1em;
    text-align: center;
/*	background: #FFF0F5;
    color:#000;
    border: solid 1px #ccc;
*/
    background: #ff6bae;
    color:#fff;
    border: solid 1px #fff;
    box-shadow: 0 1px 20px 3px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 1px 20px 3px rgba(0, 0, 0, 0.05);
    transition: 0s!important;
    text-decoration:none;
    font-weight: normal;

}

.floater img {
 width: 0px;
    height: auto;
    margin-bottom: 4px;
}

.floater:hover{
    opacity: 0.8!important;
    transition: 0.2s;
    color: #000;
}

@media screen and (max-width: 769px) {
.floater{
        position: fixed;
        bottom: 96px;
                right: 6px;
        height: 80px;
        width: 80px;
        border-radius: 100%;
        /* transform: scale(0.75); */
}

 .floater img{
    /*display: none!important;*/
}
}

@media screen and (max-width: 500px) {
    .floater{
bottom: 94px;
        right: 10px;
        height: 70px;
        width: 70px;
        font-size: 4vw;
    }
}

.green_text_mini{
font-size: 0.8em; 
}

.hidden{
    display: none;
}

.remove{
    position: fixed ;
   bottom: 190px;
    right: 16px;
	z-index: 1000;
	cursor:pointer;
}
.remove img{
   width:20px;
}
.none_area{
    display: none;
}

@media screen and (max-width: 1023px) {
.remove{
    display: none;
}
}