@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap");
/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
/* この汎用リセットはページ内のカートフォーム側も前提として依存している可能性が高いため、
   #lp_contents へのスコープを外し、元通りページ全体に効くようにする。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  background-color: transparent;
  color: inherit;
  border-width: 0;
  padding: 0;
  cursor: pointer;
}

figure {
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0;
}

ul, ol, dl, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
}

cite {
  font-style: normal;
}

fieldset {
  border-width: 0;
  padding: 0;
  margin: 0;
}

/* base
------------------------------------ */
/* 元の html { font-size: 62.5%; } は 16px * 62.5% = 10px 基準の rem 計算のため。
   グローバル(html/body)への指定はページ全体（カートエリア含む）に影響するので、
   #lp_contents に閉じ込め、rem は 10px=1rem 換算の px 値に置き換えている。 */
#lp_contents {
  color: #2b2b2b;
  font-family: "BIZ UDPGothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS PGothic", Sans-Serif;
  font-size: 22px; /* 旧: body { font-size: 2.2rem; } (2.2rem = 22px @10px基準) */
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 750px;
  overflow-x: hidden;
}

#lp_contents a {
  transition: 0.3s;
}

#lp_contents img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (min-width: 767px) {
  #lp_contents a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
  }
}
@media screen and (max-width: 767px) {
  #lp_contents {
    font-size: max(2200vw / 750, 15px); /* 旧: 1.5rem = 15px @10px基準 */
  }
}
/* main
------------------------------------ */
#lp_contents .full h2, #lp_contents .full h3, #lp_contents .full h4, #lp_contents .full h5, #lp_contents .full p, #lp_contents .full ul, #lp_contents .full li, #lp_contents .full dl, #lp_contents .full dt, #lp_contents .full dd {
  margin: 0;
  line-height: 0;
}

#lp_contents video {
  display: block;
  height: auto;
  width: 100%;
}

/* lp_cv
----------------------------------- */
#lp_contents .lp_cv {
  background: #eeba71;
}
#lp_contents .lp_cv .lp_note {
  padding: 1.5em 2em 2.5em;
}
#lp_contents .lp_cv .lp_note h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 1em;
}
#lp_contents .lp_cv .lp_note ul li {
  font-size: 24px;
  line-height: 1.6;
  margin-bottom: .5em;
}
@media screen and (max-width: 767px) {
  #lp_contents .lp_cv .lp_note h3 {
    font-size: calc(2400vw / 750);
  }
  #lp_contents .lp_cv .lp_note ul li {
    font-size: calc(2400vw / 750);
  }
}

/* lp_recipe
----------------------------------- */
#lp_contents #lp_recipe .lp_mov {
  padding: 8% 5.2%;
}
#lp_contents #lp_recipe .lp_mov div {
  aspect-ratio: 16 / 9;
  width: 100%;
}
#lp_contents #lp_recipe .lp_mov div iframe {
  height: 100%;
  width: 100%;
}

/* lp_voice
----------------------------------- */
#lp_contents #lp_voice {
  background: url("https://dogfoodkoubou.net/lp/t_r/assets/img/voice_bg.png") left bottom no-repeat;
  background-size: 100% auto;
}
#lp_contents #lp_voice h2 {
  margin: 0;
  line-height: 0;
}
#lp_contents #lp_voice .slide_review {
  position: relative;
}
#lp_contents #lp_voice .slide_review .slide-arrow {
  cursor: pointer;
  height: 60px;
  position: absolute;
  width: 60px;
  z-index: 10;
}
#lp_contents #lp_voice .slide_review .slide-arrow.prev-arrow {
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}
#lp_contents #lp_voice .slide_review .slide-arrow.next-arrow {
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  #lp_contents #lp_voice .slide_review .slide-arrow {
    height: calc(6000vw / 750);
    width: calc(6000vw / 750);
  }
  #lp_contents #lp_voice .slide_review .slide-arrow.prev-arrow {
    left: calc(1500vw / 750);
  }
  #lp_contents #lp_voice .slide_review .slide-arrow.next-arrow {
    right: calc(1500vw / 750);
  }
}

#lp_contents .slk_dots {
  display: flex;
  justify-content: center;
  padding: 1.5em 0;
}
#lp_contents .slk_dots li {
  background: rgba(133, 101, 81, 0.3);
  border-radius: 50%;
  cursor: pointer;
  height: 21px;
  margin: 0 10px;
  width: 21px;
}
#lp_contents .slk_dots li:hover, #lp_contents .slk_dots li.slick-active {
  background: #856551;
}
#lp_contents .slk_dots li button {
  appearance: none;
  background-color: transparent;
  border: none;
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  padding: 0;
}
@media screen and (max-width: 767px) {
  #lp_contents .slk_dots li {
    height: calc(2100vw / 750);
    margin: 0 calc(1000vw / 750);
    width: calc(2100vw / 750);
  }
}