@charset "UTF-8";

.blk {
  padding: 180px 0;
}

/*====================================
mainimg
===================================*/
#mainimg {
  height: 100vh;
  position: relative;
}
#mainimg #title {
  width: 44%;
  max-width: 845px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 1;
}
.mv_flame {
  display: flex;
  flex-wrap: wrap;
}
.mv_flame .mv_item {
  width: 50%;
  height: 50vh;
}
.mv_flame .mv_item img[src*="_sp"] {
  display: none;
}

/* -------------------------------------
about
------------------------------------- */
#about {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_image02.png) no-repeat right/contain,
              url(../imgs/bg_image01.png) no-repeat right/contain,
              url(../imgs/bg_leaf08.png)no-repeat left/contain,
              url(../imgs/bg_map.png)no-repeat left/contain,
              url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 15%,30%,8%,60%,cover;
  background-position: left bottom 10%,right top -2%,right 18% top 30%,left top,center bottom;
}
#about .blk_in {
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}
#about .flex {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
#about .imgbk {
  max-width: 436px;
  padding-bottom: 50px;
  width: calc((100% - 40px) * 0.62);
}
#about .note {
  width: 70%;
  max-width: 700px;
  margin: 0 auto;
}
/* -------------------------------------
origin
------------------------------------- */
#origin {
  position: relative;
  background: url(../imgs/bg_leaf_w05.png) no-repeat right/contain,
              url(../imgs/bg_leaf_w04.png) no-repeat right/contain,
              url(../imgs/bg_leaf_w8.png)no-repeat left/contain,
              url(../imgs/bg_leaf_w9.png)no-repeat left/contain,
              url(../imgs/point_bg_bk.jpg) center bottom repeat-y;
  background-size: 7%,8%,18%,17%,cover;
  background-position: left 10% bottom 30%,right 10% top 30%,right 10% top 0%,left bottom,center bottom;
}
#origin .imgbk {
  display: block;
  margin: 0 auto;
  max-width: 450px;
  padding-bottom: 50px;
  width: calc((100% - 5px) * 0.82);
}
#origin p.note {
  width: calc(50% - 30px);
  display: block;
  margin: 0 auto;
  padding-bottom: calc(20px + 6%);
}
.list_btn {
  background: #fdf7ed;
  border-radius: 9999px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto 10%;
  max-width: 400px;
  padding: 10px 25px;
  text-decoration: none;
  color: #482c2c;
  line-height: 1.8;
  transition: 0.3s ease-in-out;
  font-weight: 500;
}
.list_btn.red {
  background: #963030;
}
.list_btn.red a {
  color: #faf4ea;
}
.list_btn.brown {
  background: #462a2a;
  margin: auto 0;
}
.list_btn.white {
  margin: auto 0;
}
.list_btn.brown a {
  color: #faf4ea;
}
.list_btn a::after{
  content: '';
  position: absolute;
  top: 42%;
  right: 2rem;
  width: 6px;
  height: 6px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform: rotate(45deg);
  transition: all .3s;
}
.list_btn.red a::after{
  border-top: 2px solid #faf4ea;
  border-right: 2px solid #faf4ea;
}
.list_btn.brown a::after{
  border-top: 2px solid #faf4ea;
  border-right: 2px solid #faf4ea;
}
/* -------------------------------------
intoro-block
------------------------------------- */
#intoro-block {
  background: url(../imgs/blok01_ttl02.jpg) no-repeat center/cover;
}
#intoro-block picture {
  max-width: 30%;
  display: block;
  margin: 0 auto;
  position: relative;
  left: 10px;
}
#intoro-block__ttl {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 485px;
  height: 422px;
  top: -28%;
}
#intoro-block__tabekurabe {
  background: url(../imgs/blok01_ttl01.jpg) no-repeat center/cover;
}
#intoro-block__tabekurabe picture {
  max-width: 30%;
  display: block;
  margin: 0 auto;
  position: relative;
  left: 0.4%;
}
#intoro-block__ichiran {
  background: url(../imgs/blok01_ttl03.jpg) no-repeat center/cover;
}
#intoro-block__ichiran picture {
  max-width: 30%;
  display: block;
  margin: 0 auto;
  position: relative;
  left: 0.5%;
}
#intoro-block__ttl {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 485px;
  height: 422px;
  top: -28%;
}
/* -------------------------------------
shop
------------------------------------- */
#shop {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_ribon_02.png) no-repeat right/contain,
              url(../imgs/bg_ribon_03.png)no-repeat left/contain,
              url(../imgs/bg_ribon_01.png)no-repeat left/contain,
              url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 25%,40%,40%,cover;
  background-position: right 0% top 49%,left 0% bottom 0%,left top 2%,center bottom;
}
#shop .blk_in {
  padding: 10% 0 10%;
  position: relative;
  z-index: 2;
}
#shop .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  z-index: 5;
  gap: 0 10px;
  width: 100%;
  margin: 0 auto;
}
#shop .imgbk {
  max-width: 436px;
  padding-bottom: 50px;
  width: calc((100% - 40px) * 0.62);
}
/* -------------------------------------
card
------------------------------------- */
.card_list {
  width: 45%;
  margin-bottom: calc(10% + 2%);
  max-width: 600px;
  display: flex;
  flex-direction: column;
}
#shop .card_list {
  width: 45%;
  margin-bottom: calc(3% + 2%);
  max-width: 600px;
}
.card_ttl {
  font-size: clamp(14px, 1.84vw, 21px);
  color: #422828;
  text-align: center;
  padding-bottom: calc(10px + 3%);
}
.card_ttl.white {
  color: #fdf7ed;
}
.card_text {
  font-size: clamp(15px, 1.84vw, 23px);
  padding-bottom: calc(20px + 6%);
  color: #422828;
}
/* -------------------------------------
point
------------------------------------- */
#point {
  position: relative;
  background: url(../imgs/bg_leaf_w05.png) no-repeat right/contain,
              url(../imgs/bg_leaf_w04.png) no-repeat right/contain,
              url(../imgs/bg_leaf_w8.png)no-repeat left/contain,
              url(../imgs/bg_leaf_w9.png)no-repeat left/contain,
              url(../imgs/point_bg_bk.jpg) center bottom repeat-y;
  background-size: 7%,8%,18%,17%,cover;
  background-position: left 10% bottom 30%,right 10% top 30%,right 10% top 0%,left bottom,center bottom;
}
#product_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1240px;
  margin: 100px auto 110px;
  position: relative;
  z-index: 5;
}
#product_nav li {
  width: calc((100% - 11.2%) / 4);
  max-width: 364px;
  margin-right: 3.6%;
}
#product_nav li a:hover {
  transform: translateY(5px);
}
#product_nav li:nth-child(4) {
  margin-right: 0;
}
#point .frame {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
#point .frame .frame_in {
  padding: 0 100px;
  background: url(../imgs/sec4_process_bg_02.png) center top repeat-y;
  background-size: 100% auto;
}
#point .frame::before {
  content: "";
  width: 20%;
  padding-top: 20%;
  background: url(../imgs/sec4_textimage03.png) no-repeat center / contain;
  position: absolute;
  left: 50px;
  top: -110px;
  bottom: 100%;
  transform: translateY(18%);
}
#point .frame .frame_in .mttlbk {
  justify-content: space-between;
  position: relative;
  top: -20px;
}
#point .frame .frame_in .mttlbk .point_ttl {
  width: calc(100% - 238px);
  max-width: 650px;
  margin-top: 4%;
  min-width: 400px;
}
#point .frame .frame_in .mttlbk .president_right {
  width: calc(100% - 238px);
  max-width: 300px;
  margin-top: 10%;
}
#point .frame .frame_in .mttlbk .presiden_left {
  width: calc(100% - 238px);
  max-width: 300px;
  margin-top: 10%;
}
#point .frame .frame_in .mttlbk .president {
  max-width: 238px;
  position: absolute;
  /*bottom:-35%;*/
  top: 20%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  right: 0;
}
#point .frame .frame_in .point_list li {
  display: flex;
  justify-content: space-between;
  padding: 30px 0 50px;
  border-bottom: 2px dotted #4a2e2e;
}

#point .frame .frame_in .point_list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
#point .frame .frame_in .point_list li:nth-child(even) {
  flex-flow: row-reverse;
}
#point .frame .frame_in .point_list li .imgbk {
  width: 51.7%;
  max-width: 620px;
}
#point .frame .frame_in .point_list li:not(:nth-child(even)) .imgbk img {
  position: relative;
  left: -20px;
}
#point .frame .frame_in .point_list li .txtbk {
  color: #4a2e2e;
  width: 45.8%;
  max-width: 550px;
  padding-top: 80px;
}
#point .frame .frame_in .point_list li .txtbk dt {
  font-size: 50px;
  line-height: 1;
  margin-bottom: 50px;
  position: relative;
  color: #963030;
}
#point .frame .frame_in .point_list li .txtbk dd {
  font-size: 20px;
}
/* -------------------------------------
tabekurabe
------------------------------------- */
#tabekurabe {
  padding: 15% 0 15%;
  position: relative;
  background: url(../imgs/bg_ribon_02.png) no-repeat right/contain,
        url(../imgs/bg_ribon_03.png)no-repeat left/contain,
        url(../imgs/bg_ribon_01.png)no-repeat left/contain,
        url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 25%,40%,40%,cover;
  background-position: right 0% top 55%,left 0% bottom 0%,left top 2%,center bottom;
}
#tabekurabe .blk_in {
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}
#tabekurabe .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  z-index: 5;
  gap: 0 10px;
  width: 100%;
  margin: 0 auto;
  padding: 5% 0;
}
#tabekurabe .imgbk {
  max-width: 436px;
  padding-bottom: 50px;
  width: calc((100% - 40px) * 0.62);
}
#tabekurabe p.note {
  width: calc(50% - 30px);
  display: block;
  margin: 0 auto;
}
/* -------------------------------------
ichiran
------------------------------------- */
#ichiran {
  position: relative;
  background: url(../imgs/bg_leaf_w05.png) no-repeat right/contain,
              url(../imgs/bg_leaf_w04.png) no-repeat right/contain,
              url(../imgs/bg_leaf_w8.png)no-repeat left/contain,
              url(../imgs/bg_leaf_w9.png)no-repeat left/contain,
              url(../imgs/point_bg_bk.jpg) center bottom repeat-y;
  background-size: 7%,8%,18%,17%,cover;
  background-position: left 10% bottom 30%,right 10% top 30%,right 10% top 0%,left bottom,center bottom;
}
#ichiran .flex {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 100px auto 100px;
  position: relative;
  z-index: 5;
  gap: 0 50px;
  justify-content: center;
}
#ichiran .blk_in {
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}
#ichiran .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  z-index: 5;
  gap: 0 10px;
  width: 100%;
  margin: 0 auto;
  padding: 5% 0;
}
#ichiran .imgbk {
  max-width: 436px;
  padding-bottom: 50px;
  width: calc((100% - 40px) * 0.62);
}
#ichiran p.note {
  width: calc(50% - 30px);
  display: block;
  margin: 0 auto;
  padding-top: calc(30px + 9%);
}
/* -------------------------------------
history
------------------------------------- */
#history {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_image02.png) no-repeat right/contain,
              url(../imgs/bg_image01.png) no-repeat right/contain,
              url(../imgs/bg_leaf08.png)no-repeat left/contain,
              url(../imgs/bg_map.png)no-repeat left/contain,
              url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 10%,30%,8%,60%,cover;
  background-position: left bottom 12%,right top -2%,right 18% top 30%,left top,center bottom;
}
#history .blk_in {
  padding-bottom: 10px;
  position: relative;
  z-index: 2;
}
#history .flex {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
#history .imgbk {
  display: block;
  margin: 0 auto;
  max-width: 450px;
  padding-bottom: 50px;
  width: calc((90% - 50px) * 0.62);
}
#history .note {
  width: 70%;
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: 10%;
}
/* -------------------------------------
itemblk_common
------------------------------------- */
.blk.itemblk {
  padding-top: 20px;
}
.sec_ttl {
  width: 60%;
  max-width: 517px;
  min-width: 260px;
  margin: 0 auto 55px;
  position: relative;
}
p.sec_text {
  width: 60%;
  margin: 0 auto;
  font-size: clamp(17px, 1.63vw, 27px);
  padding-bottom: calc(2% + 3%);
  position: relative;
  color: #422828;
}
p.sec_text span{
  color: #963030;
  font-weight: 600;
}
p.sec_text.white {
  color: #f7f1e7;
}
.mcopy {
  font-family: "ten-mincho-text", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 33px);
  line-height: 1.546;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px;
  background: rgba(255, 255, 255, 0.8);
}
.mcopy span {
  display: inline-block;
}
.txtbk p {
  font-size: clamp(15px, 1.84vw, 23px);
}
 /* -------------------------------------
about
------------------------------------- */
  #about {
    padding-top: 13.5%;
  }
  #about .blk_in {
    padding-bottom: 5%;
  }
  #about .about_ttl {
    font-size: clamp(28px, 3.4vw, 43px);
  }
  #about .imgbk {
    padding-left: 0;
  }
  #about .txtbk {
    font-size: clamp(16px, 1.5vw, 20px);
  }

  /* -------------------------------------
point
------------------------------------- */
  #point .frame .frame_in .mttlbk {
    padding-left: 0;
  }
  #point .frame .frame_in .mttlbk .president {
    right: -20px;
  }
  #point .frame .frame_in .point_list li .txtbk dt {
    font-size: clamp(28px, 3.9vw, 50px);
  }
  #point .frame .frame_in .point_list li .txtbk dd {
    font-size: clamp(16px, 1.5vw, 20px);
  }
  /* -------------------------------------
	itemblk
	------------------------------------- */
  #ikura .page_l {
    margin-bottom: 13.5%;
  }
  #hotate .page_l {
    margin-bottom: 16%;
  }
  #himono .page_l {
    margin-bottom: 18%;
  }
  #other .flex {
    margin-bottom: 18%;
  }
  /* -------------------------------------
mainimg
------------------------------------- */
#mainimg #title {
    width: 80%;
    max-width: 600px;
    position: absolute;
    left: 10px;
}

  /* -------------------------------------
	itemblk
	------------------------------------- */
  .blk.itemblk {
    padding-bottom: 18%;
  }
  .sec_ttl {
    margin-bottom: 6%;
  }
  #ikura .mcopy {
    margin-bottom: 9%;
  }
  #bin .page_l {
    margin-bottom: 9%;
  }

    /* -------------------------------------
	animation
	------------------------------------- */
  .containe_chestnut {
    max-width: 80%;
    position: absolute;
    top: 8%;
    right: 0%;
}
  .containe_maron {
    max-width: 16%;
    position: absolute;
    bottom: 0%;
    left: 0%;
  }
  #history .containe_chestnut {
    top: 12%;
}
  .containe_maron {
    max-width: 16%;
    position: absolute;
    bottom: 0%;
    left: 0%;
  }
  #origin .containe_chestnut {
    max-width: 7%;
    min-width: 4%;
    position: absolute;
    top: 3%;
    right: 2%;
}
#origin .containe_maron {
  max-width: 9%;
  min-width: 5%;
  position: absolute;
  bottom: 10%;
  left: 12%;
}
  #point .containe_chestnut {
    max-width: 120px;
    min-width: 80px;
    position: absolute;
    top: 3%;
    right: 2%;
  }
  #point .containe_maron {
    max-width: 200px;
    position: absolute;
    bottom: 13%;
    left: 10%;
  }
  #ichiran .containe_chestnut {
    max-width: 7%;
    min-width: 4%;
    position: absolute;
    top: 3%;
    right: 2%;
}
  #ichiran .containe_maron {
    max-width: 8%;
    min-width: 5%;
    position: absolute;
    bottom: 13%;
    left: 10%;
  }
  #ichiran .containe_maron {
    max-width: 9%;
    min-width: 5%;
    position: absolute;
    bottom: 10%;
    left: 12%;
  }
#tabekurabe .containe_chestnut {
  max-width: 13%;
  min-width: 6%;
  position: absolute;
  top: 2%;
  left: 6%;
}
#shop .containe_chestnut {
  max-width: 13%;
  min-width: 10%;
  position: absolute;
  top: 1%;
  left: 10%;
}
  .wrapper {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
  .target {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* 栗のふわふわ*/
  .wrapper {
    animation: floating-x 1.2s ease-in-out infinite alternate-reverse;
  }
  .target {
    animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
  }
  @keyframes floating-x {
    0% {
      transform: translateX(-5%);
    }
    100% {
      transform: translateX(5%);
    }
  }
  @keyframes floating-y {
    0% {
      transform: translateY(-3%);
    }
    100% {
      transform: translateY(3%);
    }
  }


  /* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    transform-origin:left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform:translate3d(0, 20%, 0) skewY(2deg);
  opacity:0;
  }

  to {
  transform:translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

  @media screen and (max-width: 1440px) {
    #intoro-block picture {
      left: 8px;
    }
    #about {
      padding: 100px 0 0;
      position: relative;
      background: url(../imgs/bg_image02.png) no-repeat right/contain,
                  url(../imgs/bg_image01.png) no-repeat right/contain,
                  url(../imgs/bg_leaf08.png)no-repeat left/contain,
                  url(../imgs/bg_map.png)no-repeat left/contain,
                  url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
      background-size: 15%,30%,8%,60%,cover;
      background-position: left bottom 10%,right top -2%,right 18% top 30%,left top 10%,center bottom;
    }
    #point .frame .frame_in {
      padding: 0 6.5%;
    }
    #voice_use:after {
      width: 130%;
      background: transparent url(../imgs/use_bg.jpg) no-repeat center top / 130%;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
    }
    .containe_chestnut {
      max-width: 15%;
      top: 6%;
  }
  #history .containe_chestnut {
    top: 9%;
  }

  }
  
  @media screen and (max-width: 1260px) {
    #intoro-block picture {
      left: 7px;
    }
    #mainimg #title {
      width: 75%;
      max-width: 520px;
  }
    .blk {
      padding: 14.2% 0;
    }
    #voice {
      padding-top: 13.5%;
    }
    
    /* -------------------------------------
  about
  ------------------------------------- */
    #about {
      padding-top: 13.5%;
    }
    #about .blk_in {
      padding-bottom: 5%;
    }
    #about .about_ttl {
      font-size: clamp(28px, 3.4vw, 43px);
    }
    #about .imgbk {
      padding-left: 0;
    }
    #about .txtbk {
      font-size: clamp(16px, 1.5vw, 20px);
    }
  
    /* -------------------------------------
  point
  ------------------------------------- */
    #point .frame .frame_in .mttlbk {
      padding-left: 0;
    }
    #point .frame .frame_in .mttlbk .president {
      right: -20px;
    }
    #point .frame .frame_in .point_list li .txtbk dt {
      font-size: clamp(28px, 3.9vw, 50px);
    }
    #point .frame .frame_in .point_list li .txtbk dd {
      font-size: clamp(16px, 1.5vw, 20px);
    }
    /* -------------------------------------
    itemblk
    ------------------------------------- */
    #ikura .page_l {
      margin-bottom: 13.5%;
    }
    #hotate .page_l {
      margin-bottom: 16%;
    }
    #himono .page_l {
      margin-bottom: 18%;
    }
    #other .flex {
      margin-bottom: 18%;
    }
    /* -------------------------------------
  use
  ------------------------------------- */
    #use .use_ttl {
      font-size: clamp(28px, 4.2vw, 54px);
    }
  
    #use .voice_bnr {
      margin-bottom: 10%;
    }
  }
  
  @media screen and (max-width: 1060px) {
    #product_nav li {
      margin-right: 0.5%;
      width: calc((100% - 20%) / 2);
  }
  }
  
  @media screen and (max-width: 980px) {
    #intoro-block picture {
      left: 6px;
    }
    /* -------------------------------------
  mainimg
  ------------------------------------- */
    #mainimg #title {
      width: 80%;
      max-width: 400px;
    }
    .containe_chestnut {
      max-width: 13%;
      top: 3%;
    }    
    /* -------------------------------------
  point
  ------------------------------------- */
    #point .frame .frame_in .mttlbk .point_ttl {
      width: 70%;
    }
    #point .frame .frame_in .mttlbk .president_right {
      width: 30%;
    }
    #point .frame .frame_in .mttlbk .president_left {
      width: 30%;
    }
    #point .frame .frame_in .point_list li .txtbk {
      padding-top: 10%;
    }
    #point .frame .frame_in .point_list li .txtbk dt {
      margin-bottom: 10%;
    }
    #point .frame::before {
      content: "";
      width: 15%;
      padding-top: 20%;
      background: url(../imgs/sec4_textimage03.png) no-repeat center / contain;
      position: absolute;
      left: 50px;
      top: -90px;
      bottom: 100%;
      transform: translateY(18%);
    }
  
    /* -------------------------------------
    itemblk
    ------------------------------------- */
    .blk.itemblk {
      padding-bottom: 18%;
    }
    .sec_ttl {
      margin-bottom: 6%;
    }
    #ikura .mcopy {
      margin-bottom: 9%;
    }
    #bin .page_l {
      margin-bottom: 9%;
    }

    #ichiran .containe_maron {
      max-width: 9%;
      min-width: 5%;
      position: absolute;
      bottom: 5%;
      left: 12%;
  }
  }
@media screen and (max-width: 880px) {
  /* -------------------------------------
about
------------------------------------- */
#about {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_image02.png) no-repeat right/contain,
              url(../imgs/bg_image01.png) no-repeat right/contain,
              url(../imgs/bg_leaf08.png)no-repeat left/contain,
              url(../imgs/bg_map.png)no-repeat left/contain,
              url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 15%,30%,8%,80%,cover;
  background-position: left bottom 10%,right top -2%,right 18% top 30%,left -20% top,center bottom;
}
#about .flex {
  display: block;
  margin: 50px 0 10px;
  max-width: 100%;
}
#about .flex > * {
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
}
  #about .note {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 5%;
}
  #ichiran .containe_chestnut {
    top: 1%;
    right: 2%;
}
  /* -------------------------------------
	itemblk
	------------------------------------- */
  .mcopy {
    font-size: clamp(16px, 2.97vw, 19px);
    margin-bottom: 6% !important;
  }
  #origin p.note {
    width: calc(70% - 10px);
}
  #tabekurabe p.note {
    width: calc(70% - 10px);
}
  #ichiran p.note {
    width: calc(70% - 10px);
}
  #p.note {
    width: calc(70% - 10px);
}
}
@media screen and (max-width: 768px) {
  #about {
    padding: 100px 0 0;
    position: relative;
    background: url(../imgs/bg_image02.png) no-repeat right/contain,
                url(../imgs/bg_image01.png) no-repeat right/contain,
                url(../imgs/bg_leaf08.png)no-repeat left/contain,
                url(../imgs/bg_map.png)no-repeat left/contain,
                url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
    background-size: 15%,30%,8%,70%,cover;
    background-position: left bottom 10%,right top -2%,right 18% top 30%,left top 12%,center bottom;
  }
  #shop {
    padding: 100px 0 0;
    position: relative;
    background: url(../imgs/bg_ribon_02.png) no-repeat right/contain,
              url(../imgs/bg_ribon_03.png)no-repeat left/contain,
              url(../imgs/bg_ribon_01.png)no-repeat left/contain,
              url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
    background-size: 25%,40%,40%,cover;
    background-position: right 0% top 48%,left 0% bottom 0%,left top 2%,center bottom;
}
  /* -------------------------------------
mainimg
------------------------------------- */
  .mv_flame .mv_item img[src*="_pc"] {
    display: none;
  }
  .mv_flame .mv_item img[src*="_sp"] {
    display: block;
  }

  /* -------------------------------------
	point
	------------------------------------- */
  #point .frame .frame_in .point_list {
    max-width: 600px;
    margin: 0 auto;
  }
  #point .frame .frame_in .point_list li {
    display: block;
  }
  #point .frame .frame_in .point_list li .imgbk {
    width: 100%;
    padding-right: 3.2%;
  }
  #point .frame .frame_in .point_list li:not(:nth-child(even)) .imgbk img {
    left: 0;
  }
  #point .frame .frame_in .point_list li .txtbk {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  #point .frame .frame_in .point_list li .txtbk dt {
    /*margin-bottom: 5%;*/
  }
  #point .frame .frame_in .point_list li .txtbk dt .p-icon {
    width: 36%;
    top: -50%;
  }
}
@media screen and (max-width: 640px) {
.sec_ttl {
    width: 70%;
}
  /* -------------------------------------
about
------------------------------------- */
#about {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_image02.png) no-repeat right/contain,
              url(../imgs/bg_image01.png) no-repeat right/contain,
              url(../imgs/bg_leaf08.png)no-repeat left/contain,
              url(../imgs/bg_map.png)no-repeat left/contain,
              url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 15%,40%,8%,100%,cover;
  background-position: left bottom 5%,right top -2%,right 18% top 30%,left top 10%,center bottom;
}
#history {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_image02.png) no-repeat right/contain,
            url(../imgs/bg_image01.png) no-repeat right/contain,
            url(../imgs/bg_leaf08.png)no-repeat left/contain,
            url(../imgs/bg_map.png)no-repeat left/contain,
            url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 15%,40%,8%,100%,cover;
  background-position: left bottom 20%,right top -2%,right 18% top 30%,left -50px top 50%,center bottom;
}
.wrapper {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}
.containe_chestnut {
  max-width: 18%;
  top: 3%;
} 
.containe_maron {
  max-width: 20%;
  bottom: 1%;
}
#origin .containe_maron {
  max-width: 12%;
  min-width: 10%;
  position: absolute;
  bottom: 8%;
  left: 8%;
}
  #history .containe_chestnut {
    max-width: 18%;
    top: 5%;
  } 
  #history .containe_maron  {
    max-width: 20%;
    bottom: 28%;
  } 
  p.sec_text {
    width: 90%;
  }
  /* -------------------------------------
point
------------------------------------- */
  #point #product_nav {
    margin-bottom: 10%;
  }
  #point .frame .frame_in .mttlbk {
    display: block;
    padding-top: 10px;
    position: relative;
    top: 0;
  }
  #point .frame .frame_in .mttlbk .point_ttl {
    width: 100%;
    margin-bottom: 20px;
  }
  #point .frame .frame_in .mttlbk .president {
    width: 45%;
    margin: 0 auto;
    position: static;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    -ms-transform: none;
    -o-transform: none;
  }
  /* -------------------------------------
	itemblk
	------------------------------------- */
  #hotate .product_frame .product_list {
    flex-direction: column;
    align-items: center;
  }
  #hotate .product_list .product_item:nth-child(2) {
    width: 100%;
  }
  #other .flex .imgbk {
    height: 20vw;
  }
}
@media screen and (max-width: 540px) {
  /* -------------------------------------
about
------------------------------------- */
  #about .about_ttl span {
    padding: 0 7px;
  }
  #about .about_ttl span:nth-child(1) {
    padding-right: 7px;
  }
  #about .about_ttl span:nth-child(2) {
    padding-left: 7px;
  }
  .list_btn {
    max-width: 200px;
    padding: 5px 15px;
}
.list_btn a {
  max-width: 200px;
  padding: 5px 15px;
  white-space: nowrap;
}
  .list_btn a::after {
    display: none;
}
#origin {
  position: relative;
  background: url(../imgs/bg_leaf_w05.png) no-repeat right/contain,
            url(../imgs/bg_leaf_w04.png) no-repeat right/contain,
            url(../imgs/bg_leaf_w8.png)no-repeat left/contain,
            url(../imgs/bg_leaf_w9.png)no-repeat left/contain,
            url(../imgs/point_bg_bk.jpg) center bottom repeat-y;
  background-size: 7%,8%,25%,23%,cover;
  background-position: left 10% bottom 20%,right 5% top 32%,right 10% top 0%,left bottom,center bottom;
}
#origin .containe_chestnut {
  max-width: 10%;
  min-width: 6%;
  position: absolute;
  top: 2%;
  right: 2%;
}
#ichiran .containe_chestnut {
  max-width: 10%;
  min-width: 6%;
  position: absolute;
  top: 2%;
  right: 2%;
}
#ichiran {
  position: relative;
  background: url(../imgs/bg_leaf_w05.png) no-repeat right/contain,
            url(../imgs/bg_leaf_w04.png) no-repeat right/contain,
            url(../imgs/bg_leaf_w8.png)no-repeat left/contain,
            url(../imgs/bg_leaf_w9.png)no-repeat left/contain,
            url(../imgs/point_bg_bk.jpg) center bottom repeat-y;
  background-size: 7%,8%,25%,23%,cover;
  background-position: left 10% bottom 25%,right 5% top 32%,right 10% top 0%,left bottom,center bottom;
}
.sec_ttl {
  margin-top: 10%;
}
#shop {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_ribon_02.png) no-repeat right/contain,
            url(../imgs/bg_ribon_03.png)no-repeat left/contain,
            url(../imgs/bg_ribon_01.png)no-repeat left/contain,
            url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 30%,50%,60%,cover;
  background-position: right 0% top 46%,left 0% bottom 0%,left top 2%,center bottom;
}
#tabekurabe {
  padding: 100px 0 0;
  position: relative;
  background: url(../imgs/bg_ribon_02.png) no-repeat right/contain,
      url(../imgs/bg_ribon_03.png)no-repeat left/contain,
      url(../imgs/bg_ribon_01.png)no-repeat left/contain,
      url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
  background-size: 28%,50%,60%,cover;
  background-position: right 0% top 60%,left 0% bottom 0%,left top 2%,center bottom;
}
#tabekurabe .blk_in {
  padding: 7% 0 10%;
  position: relative;
  z-index: 2;
}
#shop .containe_chestnut {
  max-width: 20%;
  min-width: 10%;
  position: absolute;
  top: 1%;
  left: 10%;
}
#tabekurabe .containe_chestnut {
  max-width: 20%;
  min-width: 10%;
  position: absolute;
  top: 1%;
  left: 10%;
}
}
@media screen and (max-width: 500px) {
  #mainimg #title {
    left: 5px;
}
  #intoro-block picture {
    left: 1px;
  }
  #intoro-block__tabekurabe picture {
    left: 2.5%;
}
  #history {
    padding: 100px 0 0;
    position: relative;
    background: url(../imgs/bg_image02.png) no-repeat right/contain,
              url(../imgs/bg_image01.png) no-repeat right/contain,
              url(../imgs/bg_leaf08.png)no-repeat left/contain,
              url(../imgs/bg_map.png)no-repeat left/contain,
              url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
    background-size: 15%,40%,8%,100%,cover;
    background-position: left bottom 20%,right top -2%,right 18% top 30%,left -50px top 55%,center bottom;
  }
  /* -------------------------------------
	itemblk
	------------------------------------- */
  .product_frame .product_ttl {
    width: 58%;
    max-width: 250px;
    min-width: 210px;
  }
  .product_frame .product_list .product_item {
    padding-bottom: 47px;
  }
  .product_frame .product_list .product_item:nth-child(n + 3) {
    width: 48%;
    margin-bottom: 8%;
  }

  .product_btn {
    width: 100%;
    max-width: 130px;
  }

  #hotate .imgmain .pc {
    display: none;
  }
  #hotate .imgmain .sp {
    display: block;
  }
  #intoro-block {
    background: url(../imgs/blok01_ttl02_sp.jpg) no-repeat center/cover;
}
#intoro-block__tabekurabe {
  background: url(../imgs/blok01_ttl01_sp.jpg) no-repeat center/cover;
}
#intoro-block__ichiran {
  background: url(../imgs/blok01_ttl03_sp.jpg) no-repeat center/cover;
}
}
@media screen and (max-width: 420px) {
  #about {
    padding: 100px 0 0;
    position: relative;
    background: url(../imgs/bg_image02.png) no-repeat right/contain,
                url(../imgs/bg_image01.png) no-repeat right/contain,
                url(../imgs/bg_leaf08.png)no-repeat left/contain,
                url(../imgs/bg_map.png)no-repeat left/contain,
                url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
    background-size: 15%,50%,8%,100%,cover;
    background-position: left bottom 5%,right -5% top -2%,right 18% top 30%,left top 25%,center bottom;
}
  #history {
    padding: 100px 0 0;
    position: relative;
    background: url(../imgs/bg_image02.png) no-repeat right/contain,
                url(../imgs/bg_image01.png) no-repeat right/contain,
                url(../imgs/bg_leaf08.png)no-repeat left/contain,
                url(../imgs/bg_map.png)no-repeat left/contain,
                url(../imgs/about_bg_bk.jpg) center bottom repeat-y;
    background-size: 15%,50%,8%,90%,cover;
    background-position: left bottom 30%,right -5% top -2%,right 18% top 30%,left -30px  top 60%,center bottom;
  }
  #origin {
    position: relative;
    background: url(../imgs/bg_leaf_w05.png) no-repeat right/contain,
            url(../imgs/bg_leaf_w04.png) no-repeat right/contain,
            url(../imgs/bg_leaf_w8.png)no-repeat left/contain,
            url(../imgs/bg_leaf_w9.png)no-repeat left/contain,
            url(../imgs/point_bg_bk.jpg) center bottom repeat-y;
    background-size: 7%,8%,25%,23%,cover;
    background-position: left 5% bottom 20%,right 3% top 37%,right 10% top 0%,left bottom,center bottom;
}
#ichiran {
  position: relative;
  background: url(../imgs/bg_leaf_w05.png) no-repeat right/contain,
          url(../imgs/bg_leaf_w04.png) no-repeat right/contain,
          url(../imgs/bg_leaf_w8.png)no-repeat left/contain,
          url(../imgs/bg_leaf_w9.png)no-repeat left/contain,
          url(../imgs/point_bg_bk.jpg) center bottom repeat-y;
  background-size: 7%,8%,25%,23%,cover;
  background-position: left 10% bottom 20%,right 3% top 37%,right 10% top 0%,left bottom,center bottom;
}
  .containe_chestnut {
    max-width: 25%;
    top: 3%;
  } 
  .containe_maron {
    max-width: 25%;
    bottom: 1%;
  }
  #history .containe_chestnut {
    max-width: 25%;
    top: 7%;
  } 
  #ichiran .containe_maron {
    bottom: 8%;
    left: 12%;
}
  #history .containe_maron  {
    max-width: 20%;
    bottom: 20%;
  } 
  #origin p.note {
    width: calc(90% - 10px);
}
  #tabekurabe p.note {
    width: calc(90% - 10px);
}
  #ichiran p.note {
    width: calc(90% - 10px);
}
  #p.note {
    width: calc(90% - 10px);
}
p.sec_text {
  width: 100%;
}
#intoro-block picture {
  max-width: 50%;
}
#intoro-block__tabekurabe picture {
  max-width: 50%;
}#intoro-block__ichiran picture {
  max-width: 50%;
}
}