@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 767px){
    
/*==========基本設定==========*/  
.pc{
    display:none;
}

.sp{
    display:block;
}

.content{
    width: 90%;
}

.sp_br{
    display:inline;
}

.pc_br{
    display:none;
}

/*==========テキスト設定==========*/ 

h2{
    font-size:  3rem;
    margin-bottom: 0.5em;
    line-height: 1.5em;
}

h3{
    font-size: 2.4rem;
    margin-bottom: 0.3em;
    line-height: 1.5em;
}
    
    p{
        margin-bottom: 2em;
    }

/*==========箱の並びの設定==========*/
.content{
    width: 90%;
}

.box{
    flex-direction: column;
}

.box .box-two,
.box .box-three,
.box .box-four,
.box .one-two,
.box .one-three{
    width: 100%;
}
    
    .box .box-three{
        margin-bottom: 1em;
    }
    
/*==========共通==========*/
    
.sec01, .sec02, .sec03, .sec04, .sec05, .bg,
.staff_box:last-child{
    margin-bottom: 15em;
}
    
.w-70{
    width: 100%;
}

    .fancy{
        margin-bottom: 3em;
    }
/*==========ヘッダーの設定==========*/    
.mv-logo img {
    width: 60%;
}

.mv-box{
    margin-bottom: 15em;
}
    
    .key{
        margin-bottom: 0;
    }
    
    .service .key{
        margin-bottom: 10em;
    }
/*==========ハンバーガーメニューの設定==========*/  
    
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 5px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;

}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #555;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
    background :#a88170;
}
.hamburger span:nth-child(2) {
  top: 20px;
    background :#a88170;
}
.hamburger span:nth-child(3) {
  top: 30px;
    background :#a88170;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#a88170;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#a88170;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
 z-index : 2;
  top  : 0;
  left : 100vw;
  color: #fff;
  background: #fff;
  text-align: center;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
  padding: 2em 5em 10em 5em;
  margin-bottom: 5em;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  margin-bottom: 3em;
  height:100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
    border-bottom: 1px dotted;
    border-color: var(--green);
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  padding: 0.7em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
　visibility: visible;
    left: 0;
    height: 100vh;
}
    
    #menu-gnavi{
        flex-direction: column;
    }
    
/*==========グローバルメニューの設定==========*/ 
    .menu-item-420,
    .menu-item-421,
    .menu-item-422{
        display: block;
    }
    
/*==========header==========*/
    .header_box h1{
        width: 30%;
        margin: 0 auto;
        padding-bottom: .5em;
    }

        header{
        margin-bottom: 10em!important;
        margin-top: 3em!important;
    }    
    
    .key h1{
        font-size: 5rem;
        margin-bottom: 1em;
    }
    
    .home header {
        margin-bottom: 25em!important;
    }
    
/*==========footer==========*/
    footer {
        padding-top: 5em;
    }
    
    .footer_logo img {
    width: 30%;
    }

    .footer_logo img {
        margin: 0 auto 1em;
    }

    footer .txt_left{
        text-align: center;
    }

    .copy{
        padding-top: 1em;
    }

    footer .box{
        align-content: center;
        flex-direction: row;
    }
    
    .footer_info .address-tel{
        padding: 3em 1em;
    }
    
    .footer_info .address-tel .box-two:first-child{
        border-right: none;
        width: 100%;
        border-bottom: 1px solid #a88170;
        padding-bottom: 1em;
    }
    
    .footer_info .address-tel .box-two{
        width: 100%;
        padding-top: 1em;
    }
    
    .footer_info .sns .txt_right {
        justify-content: center;
        margin-bottom: 1em;
    }
    
    .footer_info .sns .box-two:last-child .box {
        flex-wrap: nowrap;
    }
    
    .footer_menu .box{
        justify-content: center;
    }
    
    .footer_menu a{
        display: block;
        text-align: center;
    }
    
    .footer_info{
        margin-bottom: 0;
    }
    
    #menu-gnavi-1{
        flex-direction: column;
    }
    
    #menu-gnavi-1 li{
        padding-right: 0;
    }
    
    .footer_info .sns .right .box {
        justify-content: center;
    }
    
    .footer_info .tel a{
        text-decoration: underline;
    }

/*==========top==========*/
    .home .logo h1{
        width: 30%;
        margin: 0 auto;
    }
    
    .home .sec01 h2 {
        line-height: 1.5;
    }
 
    .home .sec01 p{
        width: 100%;
    }
    
    .home .eng p{
        margin-left: 0;
        margin-bottom: 1em;
    }
    
    .home .sec01 .img_box, .page-id-8 .bg{
        width: 100%;
        margin-left: 0;
    }
    
    .home .sec01 .img_box{
        margin-top: -180px;
    }
    
    .home .sec02 li{
        width: 100%;
    }
    
    .menu .content, .blog .content{
        margin-bottom: 15em;
    }
    
    .home .bg .left {
        width: calc(100% - -20%);
    }
    
    .home .bg .right {
        width: 70%;
        margin-left: 55%;
    }
    
    .home .sec03 .box-two {
        padding-right: 1em;
        padding-left:  0;
    }
    
    .home .sec03 .box-two:last-child {
        padding-right: 0;
        padding-left:  1em;
    }
    
    .home .sec03 .box{
        flex-direction: row;
    }
    
    .home .sec03 .tit p{
        line-height: 1.5;
        margin-bottom: 1em;
    }
    
    .home .sec04 .left,
    .home .sec04 .right,
    .home .sec04 dt,
    .home .sec04 dd{
        width: 100%;
    }
    
    .home .sec04 dt{
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .home .sec04 dd{
        padding-top: 0;
    }
    
    .home .sec04 .right{
        margin-top: 0;
    }
    
    .home .sec04 .left{
        margin-bottom: 0;
    }
    
    .reservation .btn-2{
        width: 90%;
    }
    
    .reservation{
        margin-bottom: 5em;
    }
    
    .home .thumbnail img{
    height: 200px;
}
    
/*==========about==========*/    
    .page-id-8 .bg{
        margin-top: 0;
    }
    
    .page-id-8 .sec01 ul {
        margin-bottom: 2em;
    }

    .page-id-8 .sec03 {
        display: flex;
        flex-direction: row;
    }
  
/*==========staff==========*/    
    .page-id-10 .staff_box .box-two:first-child{
        margin-bottom: 1em;
    }
    
    .page-id-10 .message, .page-id-10 .reki, .page-id-10 .shikaku, .page-id-10 .hobby{
        padding-bottom: 1em;
        margin-bottom: 1em;
    }
    
    .staff_box {
        margin-bottom: 10em;
    }
    
/*==========menu==========*/        
    .page-id-48 .left, .page-id-48 .right{
        width: 100%;
    }
    
/*==========blog==========*/        
    .archive .fancy {
        margin-bottom: 0em;
    }
    
    .archive .cat_box{
        margin-bottom: 5em;
    }
    
    .archive .ymd_cat_box,
    .single .ymd_cat_box{
        display: flex;
        flex-direction: row;
    }
    
    .single .tit_box h1{
        padding: 0.5em 0;
        font-size: 3rem;
    }
    
    .navigation {
        margin-bottom: 10em;
    }
    
    .single .post_area{
        margin-bottom: 5em;
    }
    
    .single .post_area h2{
        padding: 0.5em;
        line-height: 1.4;
    }
    
}/*end*/