/*------------------------------------------------------------------------------
  PC or ALL 
------------------------------------------------------------------------------*/

body{
  background: url(../images/bg1.jpg) repeat center 0;
}

.header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: none;
}
.header-inner{
  align-items: start;
}
.header-logo {
  width: auto;
  padding-top: 30px;
}
.header-logo img{
  width: auto;
  height: auto;
}

.header-nav{
  padding-top: 25px;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
  & > ul {
    display: block;
    & > li {
      margin: 0 35px;
      & > ul{
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
      }
    }
    & > li > a{
      color: #fff;
      white-space: nowrap;
    }
  }
}

.mainvisual {
  margin: 0;
  .mainvisual-catch{
    bottom: 14vmin;
    left: 50%;
    transform: translate(-50%, 0);
    width: auto;
    padding: 6vmin 8vmin 7vmin;
    border: 1px solid #fff;
    text-align: center;
    .copy{
      font-weight: normal !important;
      letter-spacing: 0.2em;
      margin-bottom: 5vmin;
    }
    .sub-text{
      line-height: 2;
      font-size: 2.4rem;
    }
  }
}

.page-title{
  padding-top: 8vmin;
  background: url(../images/footer-bg.jpg) no-repeat center center / cover;
  .ja{
    color: #fff;
  }
}

.home .page-content,
.footer-top{  
  .title-type01{
    display: flex;
    gap: 20px;
    padding: 0;
    &::before{display: none;}
    &::after{
      content:"";
      display: block;
      width: 60px;
      height: 1px;
      background: #5e3c2d;
      margin-top: 3vmin;
      order: -1;
    }
    .box-h2{
      & span.en{
        font-size: 2rem;
        color: #5e3c2d;
        opacity: 1;
        font-weight: normal;
      }
    }
  }
}

.footer-top{

.sm{
  max-width: 1124px;
  padding: 0;
}

.main-con {
  .contact-type01{
    padding-top: 80px;
    .text {
      .tel{
        font-weight: normal;
      }
      .btn a{
        background: #fff;
        border-radius: 0;
        color: #1c1c1c;
        &::after{
          content:"\e85d" !important;
          color: #5e3c2d;
        }
      }
    }
    .title {
      &::before{
        content:"";
        position: static;
        display: block;
        width: 1px;
        height: 60px;
        margin: 0 auto 2vmin;
        background: #fff;
      }
      .en{
        font-size: 2rem;
      }
    }
  }
}

.main-shop{

.image-text-type02 {
  align-items: center;
  .image{
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    max-width: 500px;
    /* padding: 3vmin 0; */
    & img{
      position: static;
      min-height: auto;
    }
  }
  .text{
    flex: 1 1 auto;
    margin-left: -7vmin;
    padding: 6vmin 7vmin 6vmin 14vmin;
    background: url(../images/bg2.jpg) repeat center 0;
    &::before{display: none;}
  }
  .table-type01 table {
   & th, 
   & td{border-width: 1px;} 
   & th{
    white-space: nowrap;
   }

  }
}
}

.footer-gmap,
.footer-gmap iframe{height: 400px;}
/* footer */
}

.footer{
  background: url(../images/footer-bg.jpg) no-repeat center center / cover;
  color: #fff;
}
.footer-main{
  &::after{
    background: rgba(255,255,255,.2);
  }
  .nav ul li a{color: inherit;}
  .logo{width: auto;}
}

.fixed-footer{
  background: url(../images/fix-bg.jpg) repeat center 0;
  .contact a{
    border-radius: 0;
    font-weight: normal;
  }
  .contact2{
    margin-right: 10px;
    & a{
      background: #1c1c1c;
      &::before{
        content:"\e85d" !important;
      }
    }
  }
  & p,
  .tel a{
    font-weight: normal;
  }
}

.sphone-fixed-footer ul li.contact2 a::before{
  content:"\e85d" !important;
}

.pagetop {
  z-index: 10;
}
.pagetop a{
  background: #5e3c2d;
  border-radius: 0;
  color: #fff;
}

.home .page-content{

margin-bottom: 0;
padding: 0;

.sm{
  max-width: 1124px;
  padding: 0;
}

.btn a{
  background: #5e3c2d;
  border-radius: 0;
}
.title-type02{
  &::before{
    position: static;
    display: block;
    width: 1px;
    height: 60px;
    margin: 0 auto 2vmin;
  }
  & span:nth-child(2){
    color: #5e3c2d;
    opacity: 1;
  }
}


.main-policy{
  &::before{
    max-width: 1440px;
    background: url(../images/bg2.jpg) repeat center 0;
    top: 19vmin;
    height: calc(100% - 19vmin);
    z-index: 0;
  }
  counter-reset: sample;
  .image-text-type01{
    display: flex;
    gap: 3vmin;
    &::after{display: none;}
    & > div{
      float: none;
    }
    .image{
      flex: 1 1 680px;
      margin: 0;
    }
    .text{
      position: relative;
      padding-left: 2vmin;
      font-family: "游明朝", YuMincho,"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
      background: url(../images/comm-li.png) no-repeat right 2vmin bottom 2vmin;
      &::before{
        content: "0" counter(sample);
        counter-increment: sample;
        position: relative;
        font-size: 12rem;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        line-height: 1;
      }
      .box-h3{
        position: relative;
        z-index: 5;
        padding-top: 6vmin;
      }
    }
    &.right .text{order: -1}
  }

  .list-number-type02 {
    & + .list-number-type02 ol{
      counter-reset: count 3;
    }
    &::after{
      display: none;
    }
    & ol li{
      &:before{
        font-family: "游明朝", YuMincho,"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
        border: none;
      }
      .box-h3{
        text-align: center;
      }
    }
  }
}

.main-enjoy{
  .swiper-pagination .swiper-pagination-bullet-active{
    background: #1c1c1c;
  }
}

.main-menu{
  position: relative;
  padding-bottom: 10vmin;
  &::before{
    content:"";
    display: block;
    width: 100%;
    height: calc(100% - 11vmin);
    background: url(../images/bg2.jpg) repeat center 0;
    position: absolute;
    top: 11vmin;
    left: 0;
    z-index: 0;
  }
  .box-h3{
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 3vmin;
    padding-bottom: 10px;
    border-bottom: 3px solid #dcc394;
    &::before{
      content:"";
      display: block;
      width: 64px;
      height: 40px;
      margin-right: 1vmin;
      background: url(../images/menu-h3.png) no-repeat center center / contain;
    }
    &::after{
      content:"";
      display: block;
      width: 100%;
      height: 1px;
      background: #dcc394;
      position: absolute;
      bottom: -8px;
      left: 0;
    }
  }
  .image-text-type03 {
    .text{
      &::before{
        clip-path: polygon(8vmin 0%, 100% 0, 100% calc(100% - 8vmin), calc(100% - 8vmin) 100%, 0 100%, 0 8vmin);
        background: #fff url(../images/menu-li.png) no-repeat right 6vmin bottom 5vmin;
      }
      .btn a{
        background: #1c1c1c;
      }
    }
  }
  .banner-type02{
    max-width: 1124px;
    margin: 0 auto;
    & ul li{
      background: #fff;
      .text{
        color: #1c1c1c;
        & h3{
          color: inherit;
        }
      }
    }
  }
}

.main-blog{}
.main-news{
  max-width: 1124px;
  margin: 0 auto;
  &::before{
    background: url(../images/bg2.jpg) repeat center 0;
    z-index: 0;
  }
  .blog-type03 ul li{
    border-color: #aeaeae;
  }
}

/* home */
}

/* 20250525 added by Fabo */

.mt-0 { margin-top: 0 !important;}
.mt-s { margin-top: 4vh !important;}
.mt-m { margin-top: 7vh !important;}
.mt-l { margin-top: 10vh !important;}

.mb-0 { margin-bottom: 0 !important;}
.mb-s { margin-bottom: 4vh !important;}
.mb-m { margin-bottom: 7vh !important;}
.mb-l { margin-bottom: 10vh !important;}

.page-content h2:not([class]),
.page-content h3:not([class]),
.page-content h4:not([class]) {
    margin-bottom: 3vh;
}

.box-color {
    margin: 0 0 6vh;
    padding: 3vh;
    background: var(--sub-color);
}
.box-color :first-child {
    margin-top: 0 !important;
}
.box-color :last-child {
    margin-bottom: 0 !important;
}

.page-content .image-text-type01 .text {
    overflow: hidden;
}
.page-content .image-text-type01 .text :first-child{
    margin-top: 0;
}
.page-content  .list-check-type01 {
    display: flex;
    justify-content: flex-start;
}

.align-center {
    text-align: center;
}


.box-table small{
  font-size: 14px;
  font-weight: normal;
}

/*------------------------------------------------------------------------------
  TABLET and SHONE
------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {

.header-logo {
  width: 180px;
  padding-top: 20px;
}
  
.mainvisual {
  margin: 0;
  .mainvisual-catch{
    width: 80vmin;
    bottom: 50%;
    transform: translate(-50%,50%);
    padding: 4vmin;
    .copy{
      font-size: 3rem;
    }
    .sub-text{
      font-size: 2rem;
    }
  }
}

.footer-top {
  .main-shop {
  .image-text-type02 {
      .text {
        margin: 0;
        padding: 4vmin;
      }
    }
  }
}



.home .page-content{
  
.bg{
  padding-left: 4vmin;
  padding-right: 4vmin;
}

.main-policy{
  background:  url(../images/bg2.jpg) repeat center 0;
  .image-text-type01{
    flex-flow: column;
    .image{
      flex: 1 1 auto;
      order: -1;
    }
    .text{
      background: url(../images/comm-li.png) no-repeat right 2vmin bottom 2vmin / 50.8vw 24.8vw;
      &::before{
        font-size: 6rem;
      }
      .box-h3{
        padding-top: 8vw;
        padding-left: 4vw;
      }
    }
  }
}

.main-menu {
  background: url(../images/bg2.jpg) repeat center 0;
  & .image-text-type03 {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
    .text {
      width: auto;
      margin: 0;
    }
  }
  .box-h3::before{
    display: none;
  }
}

.main-blog{
  padding: 8vmin 4vmin;
}

/* home */
}

}

/*------------------------------------------------------------------------------
  TABLET ONLY
------------------------------------------------------------------------------*/
@media screen and (min-width: 600px) and (max-width: 1024px) {
}

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

.footer-top{
  .main-con {
    .contact-type01{
      .title {
        &::before{
          display: none;
        }
      }
    }
  }
}

.home .page-content,
.footer-top{
  .title-type01::after{display: none;}
}
.home .page-content{
  .title-type02{
    padding-top: 8vmin;
    &::before{display: none;}
  }
}

.header-logo {
  width: 120px;
  padding-top: 10px;
}

.footer .logo{
  width: 200px;
  margin: 0 auto 8vmin;
}

}