@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

.kv {
  position: relative;
}

.kv .kv-img {
  display: block;
  width: 100%;
}

.kv p {
  position: absolute;
  color: white;
}

@media screen and (min-width: 768px) {
  .kv p {
    top: 20%;
    left: 5%;
    font-size: clamp(18px, 3vw, 40px);
    line-height: 1.3;
  }
}

@media screen and (max-width: 767px) {
  .kv p {
    top: 7%;
    left: 9%;
    font-size: 5vw;
    width: 61%;
  }
}

.selection {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .selection {
    max-width: 1392px;
    margin: 32px auto;
    width: 72.5;
  }
}

@media screen and (max-width: 767px) {
  .selection {
    width: 95%;
    margin: 2% auto 2%;
  }
}

@media screen and (min-width: 768px) {
  .selection .button {
    max-width: 336px;
    width: 23.8%;
    margin: 8px auto;
  }
}

@media screen and (max-width: 767px) {
  .selection .button {
    width: 48%;
    margin: 1% auto;
  }
}

.selection .button img {
  cursor: pointer;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .selection .button img:hover {
    filter: brightness(80%);
  }
}

@media screen and (max-width: 767px) {
  section {
    margin-bottom: 0;
  }
}

section .inner {
  width: 100%;
}

@media screen and (min-width: 768px) {
  section .inner {
    padding: 79px 0 64px;
    max-width: 1200px;
    margin: auto;
  }
}

@media screen and (max-width: 767px) {
  section .inner {
    margin: auto;
    padding-bottom: 8%;
  }
}

section .inner .title {
  text-align: center;
}

@media screen and (min-width: 768px) {
  section .inner .title {
    font-size: 64px;
    margin-bottom: 56px;
  }
}

@media screen and (max-width: 767px) {
  section .inner .title {
    font-size: 8.7vw;
    padding: 10% 0 5%;
  }
}

section .inner .open,
section .inner .close {
  cursor: pointer;
  margin-left: auto;
  color: #b30620;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(25%) rotate(135deg);
}

@media screen and (max-width: 767px) {

  section .inner .open,
  section .inner .close {
    width: 4vw;
    height: 4vw;
  }
}

.works {
  width: 100%;
  background-color: #b30620;
}

@media screen and (max-width: 767px) {
  .works .inner {
    padding-bottom: 10%;
  }
}

.works .inner .title {
  color: white;
}

@media screen and (max-width: 767px) {
  .works .inner .title {
    margin-bottom: -6%;
  }
}

.works .inner .show {
  opacity: 0;
  transition: 1s;
  position: relative;
  top: 50px;
}

.works .inner .active {
  opacity: 1;
  top: 0;
}

.works .inner .step {
  background: white;
  margin: 0 auto;
  border-radius: 20px;
}

@media screen and (min-width: 768px) {
  .works .inner .step {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .step {
    width: 96%;
    margin: auto;
  }
}

.works .inner .image {
  margin: 5% auto;
}

@media screen and (min-width: 768px) {
  .works .inner .image {
    width: 158px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .image {
    transform: translateY(40%);
  }
}

.works .inner .image img {
  display: block;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .works .inner .one-image {
    width: 158.32px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .one-image {
    width: 25%;
  }
}

@media screen and (min-width: 768px) {
  .works .inner .two-image {
    width: 93px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .two-image {
    width: 15.3%;
  }
}

@media screen and (min-width: 768px) {
  .works .inner .three-image {
    width: 135px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .three-image {
    width: 20.8%;
  }
}

@media screen and (min-width: 768px) {
  .works .inner .four-image {
    width: 103px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .four-image {
    width: 15.2%;
  }
}

@media screen and (min-width: 768px) {
  .works .inner .five-image {
    width: 79.14px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .five-image {
    width: 10.4%;
  }
}

.works .inner .content {
  width: 80%;
}

@media screen and (max-width: 767px) {
  .works .inner .content {
    margin: auto;
    width: 88%;
    padding-bottom: 5%;
  }
}

@media screen and (min-width: 768px) {
  .works .inner .content .c-title {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .content .c-title {
    font-size: 3.8vw;
  }
}

.works .inner .content .red-text {
  color: #b30620;
  margin: 1% 0;
}

@media screen and (min-width: 768px) {
  .works .inner .content .red-text {
    font-size: 32px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .content .red-text {
    font-size: 5vw;
  }
}

.works .inner .content .explain {
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .works .inner .content .explain {
    font-size: 16px;
    width: 90.5%;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .content .explain {
    font-size: 3.8vw;
    width: 100%;
  }
}

.works .inner .next {
  background-color: white;
  -webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

@media screen and (min-width: 768px) {
  .works .inner .next {
    width: 58px;
    height: 35px;
    margin: -1px auto 16px;
  }
}

@media screen and (max-width: 767px) {
  .works .inner .next {
    margin: -1% auto 1%;
    width: 9vw;
    height: 6vw;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .inner {
    padding-bottom: 7%;
  }
}

.efficacy .inner .s-title {
  color: #202124;
}

@media screen and (min-width: 768px) {
  .efficacy .contents {
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .efficacy img {
    width: 100%;
    margin-bottom: 2%;
  }
}

@media screen and (min-width: 768px) {
  .efficacy .l-content {
    width: 65%;
  }
}

@media screen and (min-width: 768px) {
  .efficacy .l-content .content {
    width: 100%;
    margin: auto;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .l-content .content {
    width: 100%;
    margin: auto;
  }
}

.efficacy .l-content .content .flex {
  display: flex;
  align-items: center;
  border-bottom: solid 1.8px #b30620;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .efficacy .l-content .content .flex {
    width: 95%;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .l-content .content .flex {
    width: 96%;
    margin: auto;
    padding-bottom: 1%;
    margin-bottom: 2%;
  }
}

.efficacy .l-content .content .flex .number {
  color: #b30620;
  text-align: center;
  border: solid 1.8px #b30620;
}

@media screen and (min-width: 768px) {
  .efficacy .l-content .content .flex .number {
    width: 18px;
    padding: 4px;
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .l-content .content .flex .number {
    font-size: 3.9vw;
    width: 4.5vw;
    padding: 0.3vw;
  }
}

.efficacy .l-content .content .flex .e-title {
  color: #b30620;
}

@media screen and (min-width: 768px) {
  .efficacy .l-content .content .flex .e-title {
    font-size: 18px;
    margin-left: 10px;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .l-content .content .flex .e-title {
    font-size: 5vw;
    margin-left: 3%;
  }
}

@media screen and (min-width: 768px) {
  .efficacy .l-content .content .flex .open {
    margin-bottom: 2%;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .l-content .content .flex .open {
    margin-right: 1.5%;
    margin-bottom: 4%;
  }
}

@media screen and (min-width: 768px) {
  .efficacy .l-content .content .flex .close {
    margin-bottom: 1%;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .l-content .content .flex .close {
    margin-right: 1.5%;
    margin-bottom: 2%;
  }
}

.efficacy .l-content .content .explain {
  margin: 2% 0;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .efficacy .l-content .content .explain {
    width: 95%;
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .efficacy .l-content .content .explain {
    width: 96%;
    margin: auto;
    font-size: 3.8vw;
  }
}

.efficacy .images {
  width: 440px;
}

.efficacy .images .middle {
  margin: 15px 0;
}

.efficacy .images img {
  width: 100%;
}

.consume {
  background-color: #ededed;
}

.consume .inner {
  padding-bottom: 22.54px;
}

@media screen and (max-width: 767px) {
  .consume .inner img {
    display: block;
    width: 100%;
  }
}

.consume .inner .contents {
  display: flex;
}

@media screen and (min-width: 768px) {
  .consume .inner .contents {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 767px) {
  .consume .inner .contents {
    margin: 3% auto;
  }
}

.consume .inner .contents img {
  display: block;
  max-width: 650px;
  width: 50%;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .consume .inner .contents .content {
    width: 50%;
    margin-right: 10px;
  }
}

@media screen and (max-width: 767px) {
  .consume .inner .contents .content {
    width: 96%;
    margin: auto;
  }
}

.consume .inner .contents .content .c-title {
  color: white;
  background-color: #b30620;
}

@media screen and (min-width: 768px) {
  .consume .inner .contents .content .c-title {
    font-size: 18px;
    padding: 12px 0;
    padding-left: 14px;
  }
}

@media screen and (max-width: 767px) {
  .consume .inner .contents .content .c-title {
    font-size: 5vw;
    padding: 1vw 0;
    padding-left: 2vw;
  }
}

.consume .inner .contents .content .explain {
  font-size: 16px;
  width: 98%;
  line-height: 1.5;
  margin-top: 7px;
}

@media screen and (max-width: 767px) {
  .consume .inner .contents .content .explain {
    font-size: 3.8vw;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .title {
    padding-bottom: 3% !important;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner {
    width: 96%;
    margin: auto;
  }
}

@media screen and (min-width: 768px) {

  .ingredient .inner .text,
  .ingredient .inner .texts {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {

  .ingredient .inner .text,
  .ingredient .inner .texts {
    font-size: 3.8vw;
  }
}

@media screen and (min-width: 768px) {
  .ingredient .inner .text {
    margin: 25px 0;
    line-height: 1.5;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner .text {
    margin: 2% 0;
  }
}

.ingredient .inner .contents {
  display: flex;
  width: 100%;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .ingredient .inner .contents {
    gap: 0 1%;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner .contents {
    gap: 0 3%;
  }
}

.ingredient .inner .contents .content {
  width: 50%;
}

.ingredient .inner .contents .texts {
  width: 100%;
  margin: auto;
  display: flex;
}

@media screen and (min-width: 768px) {
  .ingredient .inner .contents .texts {
    padding: 7px 0;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner .contents .texts {
    align-items: center;
    padding: 2% 0;
  }
}

.ingredient .inner .contents .texts:nth-child(odd) {
  background-color: #ececec;
}

.ingredient .inner .contents .texts .capacity {
  margin-left: auto;
}

@media screen and (min-width: 768px) {
  .ingredient .inner .contents .texts .capacity {
    margin-right: 16px;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner .contents .texts .capacity {
    margin-right: 3%;
    font-size: 3.3vw;
  }
}

.ingredient .inner .contents .texts .whitespace {
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .ingredient .inner .contents .texts .name {
    margin-left: 20px;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner .contents .texts .name {
    width: 68%;
    margin-left: 3%;
    font-size: 3.3vw;
  }
}

.ingredient .inner .images {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .ingredient .inner .images {
    gap: 19px;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner .images {
    gap: 0.5%;
    justify-content: flex-start;
    margin: 2% auto 0;
  }
}

.ingredient .inner .images img {
  display: block;
}

@media screen and (min-width: 768px) {
  .ingredient .inner .images img {
    width: 13%;
    max-width: 155px;
  }
}

@media screen and (max-width: 767px) {
  .ingredient .inner .images img {
    width: 24.6%;
    margin: 0.5% 0;
  }
}

.m-environment {
  background-color: #ededed;
}

.m-environment .images {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}

.m-environment .images img {
  display: block;
  width: 50%;
}

.m-environment .text {
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .m-environment .text {
    font-size: 20px;
  }
}

@media screen and (max-width: 767px) {
  .m-environment .text {
    width: 96%;
    margin: auto;
    font-size: 3.8vw;
  }
}

@media screen and (max-width: 767px) {
  .faq .inner {
    padding-bottom: 0;
  }
}

.faq .content {
  width: 100%;
  background-color: #f3f3f3;
}

.faq .content:nth-child(even) {
  background-color: #fafafa;
}

.faq .content .text {
  line-height: 1.5;
  margin-left: 10px;
}

@media screen and (min-width: 768px) {
  .faq .content .text {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  .faq .content .text {
    font-size: 4.8vw;
  }
}

.faq .content .q {
  cursor: pointer;
  display: flex;
  margin: auto;
}

@media screen and (min-width: 768px) {
  .faq .content .q {
    align-items: center;
    padding: 25px 0;
    width: 92%;
  }
}

@media screen and (max-width: 767px) {
  .faq .content .q {
    align-items: flex-start;
    width: 96%;
    padding: 2% 0;
  }

  .faq .content .q:nth-child(3) {
    align-items: center;
  }
}

.faq .content .q .number {
  color: white;
  width: 14px;
  font-size: 18px;
  padding: 4px;
  text-align: center;
  border: solid 1.8px #b30620;
  background-color: #b30620;
}

@media screen and (max-width: 767px) {
  .faq .content .q .number {
    font-size: 3.9vw;
    width: 5vw;
    padding: 0.2vw;
  }
}

.faq .content .q .text {
  color: #b30620;
}

@media screen and (max-width: 767px) {
  .faq .content .q .text {
    width: 78%;
  }
}

@media screen and (min-width: 768px) {
  .faq .content .q .open {
    margin-bottom: 1%;
  }
}

@media screen and (max-width: 767px) {
  .faq .content .q .open {
    margin-right: 4.5%;
    margin-bottom: 4%;
    align-self: center;
  }
}

@media screen and (min-width: 768px) {
  .faq .content .q .close {
    margin-bottom: 0%;
  }
}

@media screen and (max-width: 767px) {
  .faq .content .q .close {
    margin-right: 4.5%;
    margin-bottom: 2%;
    align-self: center;
  }
}

.faq .content .answer {
  margin: auto;
  display: flex;
  align-items: flex-start;
}

@media screen and (min-width: 768px) {
  .faq .content .answer {
    width: 92%;
    margin: -15px auto 0;
    padding-bottom: 25px;
  }
}

@media screen and (max-width: 767px) {
  .faq .content .answer {
    width: 96%;
    margin: -1% auto 0;
    padding-bottom: 2%;
  }
}

.faq .content .answer .a {
  width: 14px;
  color: #b30620;
  font-size: 18px;
  padding: 5px;
  text-align: center;
  border: solid 1.8px #b30620;
  background-color: white;
}

@media screen and (max-width: 767px) {
  .faq .content .answer .a {
    font-size: 3.9vw;
    width: 5vw;
    padding: 0.2vw;
  }
}

@media screen and (min-width: 768px) {
  .faq .content .answer .text {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .faq .content .answer .text {
    font-size: 3.8vw;
    width: 90%;
  }
}

.precautions {
  background-color: #ededed;
}

.precautions .content {
  width: 100%;
  margin: auto;
  background-color: #ffffff;
}

@media screen and (max-width: 767px) {
  .precautions .content {
    width: 96%;
  }
}

@media screen and (min-width: 768px) {
  .precautions .content .c-inner {
    padding: 35px;
  }
}

@media screen and (max-width: 767px) {
  .precautions .content .c-inner {
    padding: 5%;
  }
}

@media screen and (min-width: 768px) {
  .precautions .content .p-title {
    font-size: 32px;
  }
}

@media screen and (max-width: 767px) {
  .precautions .content .p-title {
    font-size: 5vw;
  }
}

.precautions .content .text {
  font-size: 16px;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .precautions .content .text {
    font-size: 3.8vw;
  }
}

@media screen and (min-width: 768px) {
  .precautions .content .l-text {
    padding: 30px 0;
  }
}

@media screen and (max-width: 767px) {
  .precautions .content .l-text {
    padding: 2% 0;
  }
}

@media screen and (min-width: 768px) {
  .precautions .content .f-text {
    padding: 30px 0;
  }
}

@media screen and (max-width: 767px) {
  .precautions .content .f-text {
    padding: 2% 0;
  }
}

.distributor .flex {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .distributor .flex {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
    margin-bottom: 50px;
  }
}

@media screen and (min-width: 768px) {
  .distributor .flex .content {
    width: 49%;
  }
}

@media screen and (max-width: 767px) {
  .distributor .flex .content {
    width: 96%;
    margin: auto;
  }
}

.distributor .flex .country {
  position: relative;
}

@media screen and (min-width: 768px) {
  .distributor .flex .country {
    font-size: 32px;
    margin-bottom: 22px;
  }
}

@media screen and (max-width: 767px) {
  .distributor .flex .country {
    font-size: 5vw;
    margin-bottom: 5%;
  }
}

.distributor .flex .is-2cLine::before,
.distributor .flex .is-2cLine::after {
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  bottom: -10px;
  left: 0;
}

.distributor .flex .is-2cLine::before {
  width: 100%;
  background: #d8d8d8;
}

.distributor .flex .is-2cLine::after {
  width: 50px;
  background: #bf273d;
}

.distributor .flex .c-flex {
  width: 100%;
  display: flex;
}

.distributor .flex .c-flex .info {
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .distributor .flex .c-flex .info {
    width: 60%;
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .distributor .flex .c-flex .info {
    width: 66%;
    font-size: 3.8vw;
  }
}

@media screen and (max-width: 767px) {
  .distributor .flex .c-flex .sp-small-font {
    font-size: 3.3vw;
  }
}

.distributor .flex .c-flex img {
  display: block;
}

@media screen and (min-width: 768px) {
  .distributor .flex .c-flex img {
    width: 260px;
  }
}

@media screen and (max-width: 767px) {
  .distributor .flex .c-flex img {
    width: 36%;
    height: 100%;
  }
}

footer {
  width: 100%;
  background-color: #b30620;
  color: white;
  text-align: center;
  padding: 7px 0 6px;
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  footer {
    font-size: 2vw;
  }
}

.language_nav {
  background: #526548;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

@media screen and (max-width: 767px) {
  .language_nav {
    padding: 1%;
  }
}

.language_nav li {
  padding: 0 4%;
}

@media screen and (max-width: 767px) {
  .language_nav li {
    font-size: 4.5vw;
    padding: 0 2%;
  }
}

.language_nav a {
  color: #fff;
}