@charset "utf-8";
/*=================================================
共通設定
===================================================*/
html {scroll-behavior: smooth;}
body {
  position: relative;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 500;
  color: #4c423d;
  min-width: 100%;
  background: #efd0ba;
}
body::after {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  content: '';
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: url(img/webp/bg_pc.webp) no-repeat top center;
  background-attachment: fixed;
  background-size: cover;
}
img {
  width: 100%;
  height: auto;
}
.br-pc {display: inline-block;}
.br-sp {display: none;}
@media screen and (max-width: 768px) {
  .br-pc {display: none;}
  .br-sp {display: inline-block;}
}
.text, .caption {
  font-size: 1.125rem;
  line-height: 1.75;
}
.caption {
  line-height: 1.25;
}

/* Kiwi Maru
-------------------------------------------------- */
h2,h3,.navigation,.catchCopy,#footer {
  font-family: "Kiwi Maru", serif;
  font-weight: 500;
  font-style: normal;
  color: #4c423d;
}

/* Dancing Script
-------------------------------------------------- */
.lineUp h4 {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color: #4c423d;
}

/*=================================================
header
===================================================*/
.header-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: url(img/webp/main_pc.webp) no-repeat center;
  background-size: cover;
  margin-bottom: 140px;
}
.header-container::before {
  content: '';
  display: block;
  padding-top: calc(((670 / 1920) * 100%));
}
.header-container h1 {
  position: absolute;
  right: 0;
  left: 0;
  bottom: calc(((140 / 1920) * 100%) * -1);
  margin: 0 auto;
  width: calc(((600 / 1920) * 100%));
  height: auto;
}
.bgImg {display: none;}
/*=================================================
main
===================================================*/
.container,.contentsInner {
  width: 1280px;
  margin: 0 auto 140px;
}

/* overview
-------------------------------------------------- */
#overview h2 {
  font-size: 2.5rem;
  color: #fffed7;
  text-shadow: 2px 2px 10px #dc6e25 ,
              -2px 2px 10px #dc6e25 ,
               2px -2px 10px #dc6e25 ,
              -2px -2px 10px #dc6e25;
  text-align: center;
  margin-bottom: 60px;
}
#overview .text {
  text-align: center;
  color: #302724;
}
#overview .navigation {
  margin: 140px auto 0;
}
#overview .navigation-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#overview .navigation-list li {
  width: 16%;
}
#overview .navigation-list li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.375rem;
  padding: 20px 0 10px;
  border-radius: calc(infinity * 1px);
  background: #fcf6f2;
  box-shadow: 0 0 15px rgba(209, 121, 58, 50%);
  transition: all .3s;
}
#overview .navigation-list li a:hover {
  color: #fff;
  background: #d1793a;
}
.dli-chevron-down {
  margin-top: 10px;
  display: inline-block;
  vertical-align: middle;
  color: #d1793a;
  line-height: 1;
  width: 15px;
  height: 15px;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  transition: all .3s;
}
#overview .navigation-list li a:hover .dli-chevron-down {
  color: #fff;
}

/* 商品説明
-------------------------------------------------- */
.pickUp {
  padding: 60px;
  border-radius: 36px 36px 0 0;
  background: #fcf6f2;
}
.pickUp h2 {
  font-size: 2.5rem;
  color: #d1793a;
  text-align: center;
  margin-bottom: 30px;
}
.pickUp h2::before {
  display: block;
  content: '';
  width: 48px;
  height: 24px;
  margin: 0 auto 10px;
  background: url(img/png/crystal.png) no-repeat center center;
  background-size: cover;
}
.pickUp .catchCopy {
  font-size: 1.6875rem;
  text-align: center;
  margin-bottom: 90px;
}
.pickUp .ph {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(((20 / 1160) * 100%));
  margin-bottom: 60px;
}
.pickUp .ph picture {
  overflow: hidden;
  object-fit: cover;
}
.pickUp .ph picture:nth-of-type(1) {
  width: 100%;
  margin-bottom: calc(((20 / 1160) * 100%));
}
.pickUp .ph picture:nth-of-type(2) {
  width: calc(((440 / 1160) * 100%));
}
.pickUp .ph picture:nth-of-type(3) {
  width: calc(((700 / 1160) * 100%));
}

.pickUp h3 {
  font-size: 2.25rem;
  color: #d1793a;
  margin-bottom: 20px;
}
.pickUp h3 .underLine {
  background-image: linear-gradient(90deg, #d1793a, #d1793a);
  background-position: left bottom 0.25rem;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.pickUp .productName {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 50px;
}
.pickUp h3 .text {
  color: #302724;
}

/* Line UP
-------------------------------------------------- */
.lineUp {
  padding: 60px 90px;
  background: #e9e3e0;
  border-radius: 0 0 36px 36px;
}
.lineUp h4 {
  font-size: 2.625rem;
  text-align: center;
  margin-bottom: 60px;
}
.lineUp .lineUpList {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(4, 1fr);
}
.lineUp .lineUpList li a {
  display: inline-block;
  position: relative;
}
.lineUp .lineUpList li a .phWrapp {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 10px;
}
.lineUp .lineUpList li a .phWrapp img {
  transition: all .7s;
}
.lineUp .lineUpList li a:hover .phWrapp img {
  transform: scale(1.06);
}
.lineUp .lineUpList li a .caption {
  display: inline;
  color: #302724;
  background-image: linear-gradient(90deg, #333, #333); /* 線の色 */
  background-position: left 1.2rem; /* 線の起点を左・下に設定 */
  background-repeat: no-repeat;
  background-size: 0 1px; /* 線の横幅を0、縦幅を1pxに */
  padding-bottom: 6px; /* 下線を下にズラす */
  transition: background-size .7s; /* 変形をアニメーション化 */
}
.lineUp .lineUpList li a:hover .caption {
  background-size: 100% 1px;
}

/*=================================================
footer
===================================================*/
#footer {
  width: min(88%, 1280px);
  text-align: center;
  margin: 0 auto;
  padding-bottom: 100px;
}
#footer a {
  display: inline-block;
  font-size: 1.25rem;
  background-image: linear-gradient(90deg, #4c423d, #4c423d);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
#footer a::before {
  display: block;
  content: '';
  width: 24px;
  height: 12px;
  background: url(img/png/triangle.png) no-repeat center center;
  background-size: cover;
  margin: 0 auto 10px;
}

/*=================================================
タブレット（1024px）
===================================================*/
body {
  color: #4c423d !important;
}
@media screen and (max-width:1024px) {
  /*=================================================
  main
  ===================================================*/
  .container,.contentsInner {
    margin: 0 auto 60px;
  }
  .container {width: 88%;}
  .contentsInner {width: 100%;}

  /*=================================================
  header
  ===================================================*/
  .header-container {
    margin-bottom: 60px;
  }
  /* overview
  -------------------------------------------------- */
  #overview .navigation-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  #overview .navigation-list li {
    width: 100%;
  }
  #overview .navigation {
  margin: 60px auto 0;
  }

}

/*=================================================
スマートフォン（768px）
===================================================*/
@media screen and (max-width:768px) {
  body::after {
    background: url(img/webp/bg_sp.webp) no-repeat top center;
    background-size: 200% auto;
  }
  .text, .caption {
    font-size: 0.9375rem;
  }
  /*=================================================
  header
  ===================================================*/
  .header-container {
    width: 100%;
    height: 60.45vh;
    background: none;
  }
  .header-container h1 {
    bottom: 0;
    width: 226px;
    height: 165px;
  }
  .header-container .bgImg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    background-size: cover;
    animation: bgAnime 24s infinite;
  }
  .header-container .src1 {
  background-image: url('img/webp/main1_sp.webp');
  }
  .header-container .src2 {
    background-image: url('img/webp/main2_sp.webp');
    animation-delay: 8s;
  }
  .header-container .src3 {
    background-image: url('img/webp/main3_sp.webp');
    animation-delay: 16s;
  }
  @keyframes bgAnime {
    0% { opacity: 0; }
    15% { opacity: 1; }
    30% { opacity: 1; }
    45% { opacity: 0; }
  100% { opacity: 0; }
  }

  /* overview
  -------------------------------------------------- */
  #overview h2 {
    font-size: 1.375rem;
    margin-bottom: 0;
  }
  #overview .text {
    margin-top: 30px;
    text-align: center;
    /*color: #4c423d;*/
  }
  #overview .navigation-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: center;
  }
  #overview .navigation-list li {
    width: 100%;
  }
  #overview .navigation-list li a {
    font-size: 1.125rem;
    padding: 10px 0;
    transition: none;
  }
  #overview .navigation-list li a:hover {
    color: #4c423d;
    background: #fcf6f2;
  }
  #overview .navigation-list li a:hover .dli-chevron-down {
    color: #d1793a;
  }
  .dli-chevron-down {
    margin-top: 5px;
    width: 8px;
    height: 8px;
    transition: none;
  }
  /* 商品説明
  -------------------------------------------------- */
  .pickUp {
    padding: 40px 6%;
    border-radius: 18px 18px 0 0;
    background: #fcf6f2;
  }
  .pickUp h2 {
    font-size: 1.625rem;
    margin-bottom: 15px;
  }
  .pickUp h2::before {
    display: block;
    content: '';
    width: 30px;
    height: 15px;
  }
  .pickUp .catchCopy {
    font-size: 1rem;
    margin-bottom: 45px;
  }
  .pickUp .ph {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
  }
  .pickUp .ph picture:nth-of-type(2) {
    width: 100%;
    height: auto;
  }
  .pickUp .ph picture:nth-of-type(3) {
    width: 100%;
    height: auto;
  }
  .pickUp h3 {
    font-size: 1.375rem;
    margin-bottom: 10px;
  }
  .pickUp h3 .underLine {
    background-position: left bottom 0.15rem;
  }
  .pickUp .productName {
    font-size: 0.875rem;
    margin-bottom: 25px;
  }
  /*
  .pickUp h3 .text {
    color: #4c423d;
  }
  */

  /* Line UP
  -------------------------------------------------- */
  .lineUp {
    padding: 30px 6%;
    border-radius: 0 0 18px 18px;
  }
  .lineUp h4 {
    font-size: 1.5625rem;
    margin-bottom: 30px;
  }
  .lineUp .lineUpList {
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .lineUp .lineUpList li a {
    display: block;
    position: static;
  }
  .lineUp .lineUpList li a .phWrapp {
    margin-bottom: 5px;
  }
  .lineUp .lineUpList li a .phWrapp img {
    transition: none;
  }
  .lineUp .lineUpList li a:hover .phWrapp img {
    transform: none;
  }
  .lineUp .lineUpList li a .caption {
    display: block;
    line-height: 1.5;
    background: none;
  }
  .lineUp .lineUpList li a:hover .caption {
    background: none;
  }

  /*=================================================
  footer
  ===================================================*/
  #footer {
    padding-bottom: 50px;
  }
  #footer a {
    font-size: 1rem;
  }
  #footer a::before {
    width: 20px;
    height: 10px;
    margin: 0 auto 5px;
  }
}