@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanjp.css");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
@keyframes poyon {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  15% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  30% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  50% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  70% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
@keyframes popZoom {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popup {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: 0;
  }
}
main {
  max-width: 1400px;
  margin: 0 auto;
}
main .sp-vis {
  display: none !important;
}
@media screen and (max-width: 767px) {
  main .sp-vis {
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  main .pc-vis {
    display: none !important;
  }
}
main .ship {
  font-family: YakuHanJP, "Shippori Mincho", serif;
}
main .zen {
  font-family: YakuHanJP, "Zen Maru Gothic", sans-serif;
}
main .elem-pic {
  margin: 1.429em auto;
}
main ul {
  padding-left: 0;
}
main ul li {
  list-style: none;
}
main .topics {
  background: url(/kikkoman/endoumamesyouyu/img/bg.jpg) repeat;
  font-family: YakuHanJP, "Zen Maru Gothic", sans-serif;
  padding: 30px 25px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  main .topics {
    padding: clamp(0px, 2.6075619296vw, 20px);
  }
}
main .topics .red {
  color: #FF4600;
}
main .topics .cont {
  color: #7D4E22;
}
main .topics .cont .mainttl {
  text-align: center;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 6px 4px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
  font-size: clamp(37px, 3.3vw, 45px);
  line-height: 1;
  padding: 34px 0;
}
@media screen and (max-width: 767px) {
  main .topics .cont .mainttl {
    font-size: clamp(0px, 6.7796610169vw, 52px);
    line-height: 1.3;
    padding: 0.5em 0;
  }
}
main .topics .cont .mainttl::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(185, 225, 75) 0%, rgba(144, 195, 31, 0.95) 40%, rgba(126, 180, 20, 0.6) 68%, rgba(144, 195, 31, 0) 100%);
  filter: blur(7px);
}
main .topics .cont .toptxt {
  text-align: center;
  font-size: clamp(30px, 2.6vw, 36px);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
@media screen and (max-width: 767px) {
  main .topics .cont .toptxt {
    font-size: clamp(0px, 5.2151238592vw, 40px);
  }
}
main .topics .cont .toptxt::before {
  content: "";
  width: 30px;
  aspect-ratio: 5/9;
  background: url(/kikkoman/endoumamesyouyu/img/slash.svg) no-repeat center/contain;
  display: block;
  margin-right: 8px;
}
@media screen and (max-width: 767px) {
  main .topics .cont .toptxt::before {
    width: clamp(0px, 4.1720990874vw, 32px);
    aspect-ratio: 2/7;
    background: url(/kikkoman/endoumamesyouyu/img/slash_sp.svg) no-repeat center/contain;
  }
}
main .topics .cont .toptxt::after {
  content: "";
  width: 30px;
  aspect-ratio: 5/9;
  background: url(/kikkoman/endoumamesyouyu/img/slash.svg) no-repeat center/contain;
  display: block;
  transform: scaleX(-1);
  margin-left: 8px;
}
@media screen and (max-width: 767px) {
  main .topics .cont .toptxt::after {
    width: clamp(0px, 4.1720990874vw, 32px);
    aspect-ratio: 2/7;
    background: url(/kikkoman/endoumamesyouyu/img/slash_sp.svg) no-repeat center/contain;
  }
}
main .topics .cont .topics_list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 20px auto;
}
@media screen and (max-width: 767px) {
  main .topics .cont .topics_list {
    flex-direction: column;
    gap: clamp(0px, 2.6075619296vw, 20px);
  }
}
main .topics .cont .topics_list li {
  width: 49%;
  background: #EBCE67;
  color: #7D4E22;
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  padding: 12px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  main .topics .cont .topics_list li {
    width: 100%;
    font-size: clamp(0px, 4.6936114733vw, 36px);
  }
}
main .topics .cont .point_list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  main .topics .cont .point_list {
    flex-direction: column;
    gap: clamp(0px, 3.9113428944vw, 30px);
  }
}
main .topics .cont .point_list .point {
  background: url(/kikkoman/endoumamesyouyu/img/point_bg.jpg) repeat center;
  width: 31%;
  padding: 10.33px;
  box-sizing: border-box;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 767px) {
  main .topics .cont .point_list .point {
    width: 100%;
    padding: clamp(0px, 3.9113428944vw, 30px);
  }
}
main .topics .cont .point_list .point h3 {
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  border: 4px dashed #EAC342;
  color: #85592F;
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 20px;
}
main .topics .cont .point_list .point h3 span {
  color: #90C31F;
}
@media screen and (max-width: 767px) {
  main .topics .cont .point_list .point h3 {
    font-size: clamp(0px, 4.6936114733vw, 36px);
    width: 100%;
    padding: 0.3em;
    box-sizing: border-box;
  }
}
main .topics .cont .point_list .point p {
  background: url(/kikkoman/endoumamesyouyu/img/Vector.png) no-repeat top center/contain;
  font-size: clamp(24px, 2vw, 28px);
  text-align: center;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  aspect-ratio: 1.66/1;
}
@media screen and (max-width: 767px) {
  main .topics .cont .point_list .point p {
    font-size: clamp(0px, 4.6936114733vw, 36px);
    letter-spacing: 0 !important;
    aspect-ratio: inherit;
    background-size: 100% 100%;
    padding: clamp(0px, 3.259452412vw, 25px) 0;
  }
}
main .topics .cont .point_list .point p.red, main .topics .cont .point_list .point p .red {
  font-weight: 700;
}
main .topics .cont .point_list .point:nth-child(1) p {
  text-align: right;
  font-size: 33px;
  line-height: 1.7;
  position: relative;
  font-size: clamp(30px, 2.3vw, 33px);
}
@media screen and (max-width: 767px) {
  main .topics .cont .point_list .point:nth-child(1) p {
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: clamp(0px, 4.3024771838vw, 33px);
    text-align: left;
  }
}
main .topics .cont .point_list .point:nth-child(1) p::before {
  content: "";
  background: url(/kikkoman/endoumamesyouyu/img/mame.png) no-repeat top center/contain;
  display: block;
  position: absolute;
  left: -10px;
  bottom: -50px;
  aspect-ratio: 1/1;
  width: 186px;
}
@media screen and (max-width: 767px) {
  main .topics .cont .point_list .point:nth-child(1) p::before {
    position: static;
    width: clamp(0px, 24.2503259452vw, 186px);
  }
}
main .topics .cont .point_list .point:nth-child(2) p {
  letter-spacing: -0.15em;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  main .topics .cont .point_list .point:nth-child(2) p {
    background-image: url(/kikkoman/endoumamesyouyu/img/Vector2.png);
  }
}
main .topics .cont .point_list .point:nth-child(3) p {
  letter-spacing: -0.15em;
  line-height: 1.6;
}
main .topics .bottle {
  margin-top: 40px;
}
main .topics .bottle h3 {
  color: #85592F;
  font-weight: 700;
  background: rgba(213, 235, 115, 0.5);
  font-weight: 700;
  font-size: 36px;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  line-height: 1;
  padding: 12px 20px;
  box-sizing: border-box;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-left: 30px;
}
@media screen and (max-width: 767px) {
  main .topics .bottle h3 {
    text-align: center;
    margin: 0 auto;
    font-size: clamp(0px, 5.2151238592vw, 40px);
    width: 90%;
  }
}
main .topics .bottle .inner {
  background: url(/kikkoman/endoumamesyouyu/img/point_bg.jpg) repeat center;
  padding: 30px;
  box-sizing: border-box;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  main .topics .bottle .inner {
    flex-direction: column;
    padding: clamp(0px, 3.9113428944vw, 30px);
    gap: clamp(0px, 2.6075619296vw, 20px);
  }
}
main .topics .bottle .inner .cont {
  display: flex;
  flex-direction: column;
  width: 48%;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  main .topics .bottle .inner .cont {
    width: 100%;
  }
}
main .topics .bottle .inner .cont p {
  color: #7D4E22;
  font-weight: 700;
  font-size: clamp(27px, 2.2vw, 30px);
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  main .topics .bottle .inner .cont p {
    font-size: clamp(0px, 4.6936114733vw, 36px);
  }
}
main .topics .bottle .inner .cont p .red {
  color: #FF4600;
}
main .topics .bottle .inner .cont .img {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
main .topics .bottle .inner .cont:nth-child(1) p {
  text-align: center;
}
main .topics .bottle .inner .cont:nth-child(1) .img {
  width: clamp(0px, 54.1069100391vw, 415px);
}
main .topics .bottle .inner .cont:nth-child(2) {
  flex-direction: column-reverse;
}
@media screen and (max-width: 767px) {
  main .topics .bottle .inner .cont:nth-child(2) {
    flex-direction: column;
  }
}/*# sourceMappingURL=style.css.map */