@charset "utf-8";
/*****スクロール*0509*****/
html{
    scroll-behavior: smooth;
  }
  img{
    max-width: 100%;
    height:auto;
  }
/* CSS Document */
h1 {
    font-size: 42px;
    font-weight: 600;
    color: #1a0d04;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}
h2 {
    font-size: 32px;
    font-weight: 600;
    color: #1a0d04;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}
h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a0d04;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}
p {
    font-size: 13px;
    font-weight: 500;
    color: #1a0d04;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}
li {
    font-size: 13px;
    font-weight: 600;
    color: #1a0d04;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}

.wrappar {
    max-width: 1200px;
    margin: 0 auto;
}
/* ヘッダー */
header {
    width: 100%;
    height: 30%;
    margin: 0 auto;
    background-color: #fdfcfa;
    display: flex;
    justify-content: flex-end;
    padding: 1% 3% 1% 1%; 
}
nav {
    margin: 0 34% 0 0;
    ul {
        display: flex;
        gap: 30px;
        padding: 11% 0 0 13%;
    }
}
.nav02 {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    margin-top: 5%;
}
.icon {
    ul{
    display: flex;
    gap: 20px;
    margin-top: 15%;
    }
    img{
        width: 100%;
        height: auto;
    }
}
/* スライダー */
.main {
    position: relative;
    h1 {
        position: absolute;
        top: 20%;
        left: 23%;
        z-index: 100;
    }
}
.slideBox {
    height: 830px;
    overflow: hidden;
    position: relative;
  }
  /* imgのみ */
  .slide01 {
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 30s 0s infinite;
    animation: anime 30s 0s infinite;
  }
  .slide01:nth-of-type(2) {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
  }
  .slide01:nth-of-type(3) {
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
  }
  
  /* ふわっとアニメーション */
  @keyframes anime {
    0% { opacity: 0;}
    30% { opacity: 1;}
    35% { opacity: 1;}
    50% { opacity: 0; z-index: 9;}
    100% { opacity: 0;}
  }
  
  @-webkit-keyframes anime {
    0% { opacity: 0;}
    30% { opacity: 1;}
    35% { opacity: 1;}
    50% { opacity: 0; z-index: 9;}
    100% { opacity: 0;}
  }

  /* ニュー */
  .new {
    background-color: #efeee8;
    padding: 5% 1% 8% 1%;
    h2 {
        margin: 5% 0 4% 7%;
    }
  }
  .newbox01 {
    display: flex;
    justify-content: center;
    gap: 30px;
  
  }
  .newbox {
    h3 {
        margin: 15% 0;
    }
    img {
      transition: .3s ease-in-out;
    }
    img:hover {
      filter: grayscale(100%);
    }
  }
  
/* レコメンド */
.recommend {
    background-color: #fdfcfa;
    padding: 1%;
    padding-bottom: 10%;
    h2 {
        margin: 10% 0 4% 7%;
    }
}
.reco {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.recbox {
    p {
        margin: 8% 0;
    }
}

/* ボタン */
a.btn--orange {
    color: #fff;
    background-color: #1a0d04;
    border-radius: 5px;
    /* border-bottom: 3px solid hsl(23, 37%, 24%); */
    padding: 1.3% 5%;
  }
  a.btn--orange:hover {
    /* margin-top: 4px;  */
    color: #fff;
    background: #4e2a0e;
    /* border-bottom: 3px solid hsl(23, 37%, 24%); */
  }
  a.btn--shadow {
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5%;
    margin-right: 4%;
  }

/* メッセージ */
.message {
  background-color: #efeee8;
  padding: 1%;
  padding-bottom: 15%;
  h2 {
    margin: 10% 0 4% 7%;
    }
}
.mesbox {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.messbox01 {
  background-image: url(../img/message01.png);
  width: 45%;
  height: 420px;
  h3 {
    display: flex;
    justify-content: center;
    color: #fff;
    padding: 28% 39% 5% 0;
  }
  p {
    display: flex;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
  }
}
.messbox01:hover {
  opacity: 0.8;
}
.messbox02 {
  background-image: url(../img/message02.png);
  width: 45%;
  height: 420px;
  h3 {
    display: flex;
    justify-content: center;
    color: #fff;
    padding: 28% 27% 5% 0;
  }
  p {
    display: flex;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
  }
}
.messbox02:hover {
  opacity: 0.8;
}

/* アクセス */
.access {
  background-color: #fdfcfa;
  padding: 1%;
  padding-bottom: 10%;
  h2 {
    margin: 10% 0 4% 7%;
  }  
}
.accebox01 {
  padding: 8% 0 12% 0; 
  display: flex;
  justify-content: center;
  gap: 120px;
  background-color: #1a0d04;
}
.accebox02 {
  h3 {
    margin: 0 0 18% 0;
    color: #fff;
  }
  p {
    line-height: 170%;
    color: #fff; 
  }
}
.accebox03 {
  p {
    line-height: 170%;
    color: #fff;
  }
}
.ac {
  display: flex; 
}

/* フッター */
footer {
  display: flex;
  background-color: #efeee8;
  padding: 1%;
  img {
    padding: 2% 0 1% 5%;
  }
  ul {
    display: flex;
    gap: 30px;
    padding: 5% 0 0 5%;
  }
}
.foot {
  margin:8% 0 0 36%;
}