@charset "UTF-8";
/* 1440カンプ →  1200*/
:root {
  --scale: 0.0833333333vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.1633986928vw;
    --scale02: 0.2659574468vw; /* 376用 */
    --max: 10;
  }
}

/*------------------------------
concept
------------------------------*/
.concept {
  background: url(../img/concept/bg.png) repeat center top/clamp(0px, calc(560 * var(--scale)), calc(560px * var(--max)));
}
@media (max-width: 767px) {
  .concept {
    overflow-x: clip;
  }
}

.concept__heading-en { /* common */
  color: rgba(255, 255, 255, 0.79);
  letter-spacing: 0.2em;
}
@media (max-width: 767px) {
  .concept__heading-en {
    font-size: clamp(0px, calc(21 * var(--scale02)), calc(21px * var(--max)));
  }
}

/*------------------------------
fv
------------------------------*/
@media (max-width: 767px) {
  .fv {
    padding: 12% 0 1%;
  }
}

.fv__visual {
  width: clamp(0px, calc(368 * var(--scale)), calc(368px * var(--max)));
  margin: 0 auto clamp(0px, calc(6 * var(--scale)), calc(6px * var(--max)));
}
@media (max-width: 767px) {
  .fv__visual {
    margin-bottom: clamp(0px, calc(25 * var(--scale)), calc(25px * var(--max)));
  }
}

.fv__catch {
  background: #6dc6ce;
  font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  font-weight: 400;
  color: #fff;
  text-align: center;
  padding: 0.75em 0 1.1em;
}
@media (max-width: 767px) {
  .fv__catch {
    padding: 0.8em;
    padding-left: 2em;
  }
}

/*------------------------------
values
------------------------------*/
.values {
  padding-top: clamp(0px, calc(60 * var(--scale)), calc(60px * var(--max)));
}

.values__en {
  display: flex;
  align-items: center;
  gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  width: 100%;
  font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  font-weight: 500;
  color: #6dc6ce;
  text-align: center;
  position: relative;
}
.values__en::before, .values__en::after {
  content: "";
  flex: 1;
  min-width: 0;
  border-top: clamp(0px, calc(2 * var(--scale)), calc(2px * var(--max))) dashed #6dc6ce;
}

.values__heading {
  width: clamp(0px, calc(630 * var(--scale)), calc(630px * var(--max)));
  margin: 0 auto;
  margin-top: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(0px, calc(38 * var(--scale)), calc(38px * var(--max)));
  font-weight: 500;
  text-align: center;
  background: url(../img/concept/values-heading.png) no-repeat center center/100%;
  aspect-ratio: 1264/436;
}
.values__heading span {
  transform: translateY(0.5em);
}
@media (max-width: 767px) {
  .values__heading {
    width: 90%;
    margin: 0 auto;
    margin-top: 12%;
    margin-left: 7%;
    padding-bottom: 3%;
  }
}

.values__heading--en {
  margin-top: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  color: #fff;
  letter-spacing: 0.2em;
}

.values__content {
  position: relative;
}
.values__content::before {
  content: "";
  position: absolute;
  background: url(../img/concept/values01.png) no-repeat center center/100%;
  aspect-ratio: 743/724;
  transform: translate(8%, -50%);
  width: clamp(0px, calc(377 * var(--scale)), calc(377px * var(--max)));
  left: 50%;
  top: 61.2%;
  display: none;
}
.values__content > * {
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .values__content::before {
    transform: translate(-12%, -50%);
    width: 53%;
    left: 50%;
    top: 66.2%;
  }
}

.values__lead {
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  text-align: center;
  margin-bottom: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
  margin-top: 1.3em;
  line-height: 2.1;
  font-feature-settings: "halt";
}
.values__lead span {
  font-size: clamp(0px, calc(19 * var(--scale)), calc(19px * var(--max)));
  padding: 0 0.5em;
}
.values__lead em {
  padding: 0 0.5em;
}
@media (max-width: 767px) {
  .values__lead {
    margin-top: 2.1em;
    line-height: 1.8;
  }
  .values__lead span {
    display: none;
  }
}

.values__text {
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 2;
  text-align: center;
  margin-top: 2em;
}
.values__text strong {
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  color: #ff3399;
}
@media (max-width: 767px) {
  .values__text {
    line-height: 1.6;
    margin-top: 0;
  }
}

.values__text--02 {
  margin-top: -0.3em;
}

.values__appeal {
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 500;
  line-height: 2;
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .values__appeal span:nth-child(1) {
    transform: translateX(1.4em);
  }
  .values__appeal span:nth-child(2) {
    margin-top: 0.8em;
    transform: translateX(1em);
  }
}
@media (max-width: 767px) {
  .values__appeal {
    flex-direction: column;
    align-items: center;
  }
}

/*------------------------------
kininaru
------------------------------*/
.kininaru {
  padding-top: clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max)));
}
@media (max-width: 767px) {
  .kininaru {
    padding-top: 14%;
  }
}

.kininaru__heading {
  width: clamp(0px, calc(640 * var(--scale)), calc(640px * var(--max)));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transform: translateX(-17%);
  font-size: clamp(0px, calc(38 * var(--scale)), calc(38px * var(--max)));
  line-height: 1.4210526316;
  font-weight: 500;
  background: url(../img/concept/kininaru-heading.png) no-repeat center center/100%;
  aspect-ratio: 1287/492;
  padding-left: 3.1em;
}
@media (max-width: 767px) {
  .kininaru__heading {
    position: relative;
    left: -19%;
    transform: unset;
    width: 97%;
    margin: 0;
    padding-left: 26%;
  }
}

.kininaru__content {
  width: clamp(0px, calc(700 * var(--scale)), calc(700px * var(--max)));
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max)));
  position: relative;
}

.kininaru__text {
  position: relative;
  z-index: 2;
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 1.9130434783;
  padding-left: 1.1em;
  margin-top: 3.8em;
}
.kininaru__text strong {
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  font-weight: 500;
  color: #f5a554;
  display: block;
  margin: 0.8em 0;
}
@media (max-width: 767px) {
  .kininaru__text {
    margin-top: 2.5em;
    padding-left: 2.8em;
  }
  .kininaru__text strong {
    margin-bottom: 0.5em;
  }
}

.kininaru__image {
  position: absolute;
  bottom: 0;
  right: calc(clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) * -1);
  width: clamp(0px, calc(380 * var(--scale)), calc(380px * var(--max)));
}
@media (max-width: 767px) {
  .kininaru__image {
    bottom: 19%;
    right: 0%;
    width: 56%;
  }
}

/*------------------------------
tokimeki
------------------------------*/
.tokimeki {
  padding-top: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)));
}
@media (max-width: 767px) {
  .tokimeki {
    padding-top: 0;
  }
}

.tokimeki__heading {
  width: clamp(0px, calc(670 * var(--scale)), calc(670px * var(--max)));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(20%);
  font-size: clamp(0px, calc(38 * var(--scale)), calc(38px * var(--max)));
  line-height: 1.4210526316;
  font-weight: 500;
  padding-left: clamp(0px, calc(70 * var(--scale)), calc(70px * var(--max)));
  background: url(../img/concept/tokimeki-heading.png) no-repeat center center/100%;
  aspect-ratio: 1343/548;
  padding-left: 4em;
}
.tokimeki__heading span {
  margin-left: -2em;
}
@media (max-width: 767px) {
  .tokimeki__heading {
    transform: translateX(15%);
    padding-left: 2.1em;
    padding-bottom: 0.9em;
    line-height: 1.3;
  }
  .tokimeki__heading span {
    transform: translateY(0.2em);
  }
}

.tokimeki__content {
  width: clamp(0px, calc(760 * var(--scale)), calc(760px * var(--max)));
  max-width: 100%;
  margin: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) auto 0;
  display: flex;
  align-items: flex-start;
  gap: 0 clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max)));
}
@media (max-width: 767px) {
  .tokimeki__content {
    position: relative;
    margin-top: 10%;
    gap: 0;
  }
}

.tokimeki__image {
  width: clamp(0px, calc(360 * var(--scale)), calc(360px * var(--max)));
}
@media (max-width: 767px) {
  .tokimeki__image {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 52%;
  }
}

.tokimeki__body {
  padding-top: 7%;
}
@media (max-width: 767px) {
  .tokimeki__body {
    padding-top: 7%;
    margin-left: auto;
    width: 58%;
    position: relative;
  }
}

.tokimeki__text {
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 1.9130434783;
  text-align: center;
}

.tokimeki__reaction {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  font-weight: 500;
  color: #ffff00;
  background: url(../img/concept/tokimeki-bubble.png) no-repeat center center/100%;
  aspect-ratio: 594/145;
  position: relative;
  margin: 1.2em 0 1em;
  width: 94%;
  transform: translateX(-4%);
  padding-left: 1.4em;
  white-space: nowrap;
}
.tokimeki__reaction::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-90%, -50%);
  background: url(../img/concept/tokimeki-icon.png) no-repeat center center/contain;
  width: clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max)));
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .tokimeki__reaction {
    margin-left: auto;
    width: 71%;
    margin-right: 7%;
  }
  .tokimeki__reaction::before {
    width: 45%;
  }
}

/*------------------------------
wakuwaku
------------------------------*/
.wakuwaku {
  padding-top: clamp(0px, calc(90 * var(--scale)), calc(90px * var(--max)));
}
@media (max-width: 767px) {
  .wakuwaku {
    padding-top: 19%;
  }
}

@media (min-width: 768px) {
  .wakuwaku__inner {
    width: clamp(0px, calc(580 * var(--scale)), calc(580px * var(--max)));
  }
}

.wakuwaku__heading {
  width: clamp(0px, calc(694 * var(--scale)), calc(694px * var(--max)));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(0px, calc(38 * var(--scale)), calc(38px * var(--max)));
  line-height: 1.4210526316;
  font-weight: 500;
  background: url(../img/concept/wakuwaku-heading.png) no-repeat center center/100%;
  aspect-ratio: 1390/645;
  transform: translateX(-28%);
  padding-top: 0.9em;
  padding-right: 1em;
}
.wakuwaku__heading span {
  margin-left: 1.5em;
}
@media (max-width: 767px) {
  .wakuwaku__heading {
    width: 108%;
    margin: 0;
    margin-left: 2%;
    padding-left: 25%;
  }
  .wakuwaku__heading span {
    margin-left: 0.8em;
  }
}

.wakuwaku__content {
  width: clamp(0px, calc(830 * var(--scale)), calc(830px * var(--max)));
  max-width: 100%;
  margin: 0 auto;
  margin-top: clamp(0px, calc(110 * var(--scale)), calc(110px * var(--max)));
  padding-bottom: clamp(0px, calc(65 * var(--scale)), calc(65px * var(--max)));
  position: relative;
}
@media (min-width: 768px) {
  .wakuwaku__content {
    margin-left: -5%;
  }
}
@media (max-width: 767px) {
  .wakuwaku__content {
    margin-top: 19%;
  }
}

.wakuwaku__body {
  position: relative;
  z-index: 2;
}
@media (max-width: 767px) {
  .wakuwaku__body {
    padding-left: 8%;
  }
}

.wakuwaku__lead {
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 1.9130434783;
}

.wakuwaku__text {
  margin-top: 2.7em;
  padding-left: clamp(0px, calc(70 * var(--scale)), calc(70px * var(--max)));
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 1.9130434783;
}
.wakuwaku__text strong {
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  color: #d708b2;
  padding: 0 0.5em;
}
@media (max-width: 767px) {
  .wakuwaku__text {
    padding-left: 0;
    margin-top: 2.7em;
    line-height: 1.7;
  }
}

.wakuwaku__image {
  position: absolute;
  bottom: 5%;
  right: -20%;
  width: clamp(0px, calc(390 * var(--scale)), calc(390px * var(--max)));
}
@media (max-width: 767px) {
  .wakuwaku__image {
    bottom: 5%;
    right: -3%;
    width: 60%;
  }
}

/*------------------------------
promise
------------------------------*/
.promise {
  padding: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0 clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max)));
}
@media (max-width: 767px) {
  .promise {
    padding-top: 11%;
  }
}

.promise__heading {
  width: clamp(0px, calc(637 * var(--scale)), calc(637px * var(--max)));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(0px, calc(38 * var(--scale)), calc(38px * var(--max)));
  line-height: 1.4210526316;
  font-weight: 500;
  background: url(../img/concept/promise-heading.png) no-repeat center center/100%;
  aspect-ratio: 1275/621;
  padding-top: 0.7em;
  padding-left: 0.6em;
}
@media (max-width: 767px) {
  .promise__heading {
    width: 97%;
  }
}

.promise__content {
  margin-top: 2.2%;
  position: relative;
}
.promise__content::before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: -2em;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/concept/promise-Q.png) no-repeat center center/contain;
  width: clamp(0px, calc(360 * var(--scale)), calc(360px * var(--max)));
  aspect-ratio: 738/995;
}
@media (max-width: 767px) {
  .promise__content {
    margin-top: 9.2%;
  }
}

.promise__text {
  position: relative;
  z-index: 20;
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 1.9130434783;
  text-align: center;
}
.promise__text strong {
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  font-weight: 700;
  color: #ff7477;
}
@media (max-width: 767px) {
  .promise__text {
    line-height: 1.7;
  }
}

.promise__message {
  position: relative;
  z-index: 20;
  margin-top: 1.9em;
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 400;
  line-height: 1.9130434783;
  text-align: center;
}
@media (max-width: 767px) {
  .promise__message {
    margin-top: 1.5em;
  }
}

/*------------------------------
products
------------------------------*/
.products {
  position: relative;
  padding: clamp(0px, calc(165 * var(--scale)), calc(165px * var(--max))) 0 clamp(0px, calc(265 * var(--scale)), calc(265px * var(--max)));
}
@media (max-width: 767px) {
  .products {
    padding: 39% 0 35%;
  }
}

.products__list {
  width: clamp(0px, calc(518 * var(--scale)), calc(518px * var(--max)));
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  gap: 0 clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  position: absolute;
  top: 50%;
  left: 49%;
}
.products__list--top {
  transform: translate(-50%, -160%);
}
.products__list--bottom {
  transform: translate(-50%, 160%);
}
.products__list li {
  width: calc(33.3% - clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) * 2 / 3);
}
@media (max-width: 767px) {
  .products__list--top {
    transform: translate(-50%, -150%);
  }
  .products__list--bottom {
    transform: translate(-50%, 150%);
  }
}

.products__brand {
  position: relative;
  margin-top: calc(clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) * -1);
  background: #6dc6ce;
  padding: clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max))) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
}
@media (max-width: 767px) {
  .products__brand {
    padding: 8% 0;
  }
}

.products__brand-text {
  font-size: clamp(0px, calc(32 * var(--scale)), calc(32px * var(--max)));
  font-weight: 400;
  line-height: 1.6875;
  color: #fff;
  letter-spacing: 0.05em;
}
@media (max-width: 767px) {
  .products__brand-text {
    font-size: clamp(0px, calc(17 * var(--scale02)), calc(17px * var(--max)));
  }
}

.products__brand-mark {
  width: clamp(0px, calc(138 * var(--scale)), calc(138px * var(--max)));
}
@media (min-width: 768px) {
  .products__brand-mark {
    transform: translateX(6%);
  }
}
@media (max-width: 767px) {
  .products__brand-mark {
    transform: translateX(6%);
    width: 21%;
  }
}
/*# sourceMappingURL=concept.css.map */