@charset "UTF-8";

/* ====== 共通 ====== */
.block-genre-page--sub.block-readmore-contents.js-readmore-contents {
  display: none;
}

h1.block-genre-page--header  {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.block-genre-page-head {
  padding: 0 20px;
}

.block-genre-page--sub {
  display: none;
}

#insect_repellent {
  max-width: 900px;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  padding: 30px 20px 20px;
  background: #FFD27B;
}

#insect_repellent .pc {
  display: none;
}

#insect_repellent .sp {
  display: block;
}

#insect_repellent p, #insect_repellent a {
  font-family: "Noto Sans JP", sans-serif;
}

#insect_repellent p {
  color: #533939;
  line-height: 1.7rem;
  letter-spacing: 0.1rem;
  font-size: 14px;
}

#insect_repellent img {
  width: 100%;
  height: auto;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: cover;
}

#insect_repellent a {
  text-decoration: none;
  cursor: pointer;
}

#insect_repellent ul, #insect_repellent li {
  list-style: none;
}

#insect_repellent li {
  letter-spacing: 0.05rem;
  line-height: 1.5rem;
}

#insect_repellent section {
  padding-bottom: 40px;
}

/* ====== h2 見出し ====== */
#insect_repellent h2 {
  margin: 0 -20px 20px;
  text-align: center;
  background: #533939;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 7px 20px;
}

/* ====== リンク ====== */
#insect_repellent .link_list {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 450px;
  margin: 0 auto;
}

#insect_repellent .link_list li {
  width: calc(100% / 2 - 10px);
}

#insect_repellent .link_list li a {
  background: #fff;
  border: #533939 4px solid;
  border-radius: 14px;
  padding: 6px 6px 10px;
  display: block;
  text-align: center;
  height: 110px;
}

#insect_repellent .link_list li a img {
  width: 70px;
}

#insect_repellent .link_list li a:hover img, #insect_repellent .link_list li a:active img {
  animation: katakata 0.3s steps(1) infinite alternate;
}

@keyframes katakata {
  0% {
    transform: rotate(-6deg);
  }

  50% {
    transform: rotate(6deg);
  }

  100% {
    transform: rotate(-6deg);
  }
}

#insect_repellent .link_list li a p {
  font-weight: 500;
  line-height: 0.95rem;
  letter-spacing: 0.01rem;
}

#insect_repellent .link_list li a p span {
  font-size: 12px;
}

/* ====== 害虫の種類で選ぶ ====== */
#insect_repellent .insects .link_list li:last-of-type a {
  padding: 8px 4px;
}

#insect_repellent .insects .link_list li:last-of-type img {
  width: 120px;
}

/* ====== タイプで選ぶ ====== */
#insect_repellent .type .link_list li a {
  height: 120px;
}

/* ====== テキストのみのリンクリスト ====== */
#insect_repellent .text_only li a {
  height: 80px;
  padding: 10px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

#insect_repellent .text_only li a p {
  line-height: 1.2rem;
}

#insect_repellent .text_only li a:hover p, #insect_repellent .text_only li a:active p {
  animation: katakata02 0.3s steps(1) infinite alternate;
}

@keyframes katakata02 {
  0% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }

  100% {
    transform: rotate(-2deg);
  }
}

/* ====== 画面サイズが340px以上の表示 ====== */
@media screen and (min-width:340px) {
  /* ====== タイプで選ぶ ====== */
  #insect_repellent .type .link_list li:first-of-type a img {
    margin-bottom: 5px;
  }
}

/* ====== 画面サイズが768px以上の表示 ====== */
@media screen and (min-width:768px) {
  /* ====== 共通 ====== */
  .block-genre-page-head {
    padding: 0;
    margin-bottom: 0;
  }

  #insect_repellent {
    width: 100%;
    padding: 40px 40px 20px;
  }

  #insect_repellent .pc {
    display: block;
  }

  #insect_repellent .sp {
    display: none;
  }

  #insect_repellent p {
    font-size: 16px;
  }

  #insect_repellent section {
    padding-bottom: 60px;
  }

  /* ====== h2 見出し ====== */
  #insect_repellent h2 {
    margin: 0 -40px 30px;
    font-size: 22px;
    padding: 10px 40px;
  }

  /* ====== リンク ====== */
  #insect_repellent .link_list {
    max-width: 100%;
  }
  
  #insect_repellent .link_list li {
    width: calc(100% / 4 - 20px);
  }

  #insect_repellent .text_only li a p {
    line-height: 1.4rem;
  }
}