:root {
  /*  */
  --mg-concept-main:calc(248 * (100vw / 375)) auto 0;
  --width-concept-contents:100%;
  --mg-concept-contents:0 auto;
  --grid-template-col-concept-contents:repeat(1,1fr);
  --gap-concept-contents:calc(30 * (100vw / 375)) 0;
  --mb-concept-contents:calc(100 * (100vw / 375));
  --pb-concept-contents:calc(80 * (100vw / 375));
  --pt-concept-text:unset;
  --fs-concept-text-heading:calc(25 * (100vw / 375));
  --ls-concept-text-heading:0.06em;
  --mb-concept-text-heading:calc(28 * (100vw / 375));
  --fs-concept-text-read:calc(12 * (100vw / 375));
  --lh-concept-text-read:2.25;
  --mb-concept-text-read:calc(36 * (100vw / 375));
  --width-concept-text-button:100%;
  --fs-concept-text-button:calc(13 * (100vw / 375));
  --pd-bl-concept-text-button:calc(14 * (100vw / 375));
  --mt-concept-img:calc(-215 * (100vw / 375));
  --width-concept-img-image:calc(100% - calc(10 * (100vw / 375)));
  --box-shadow-concept-img-image:calc(10 * (100vw / 375)) calc(10 * (100vw / 375));
}
@media screen and (min-width: 768px) {
  :root {
    /*  */
    --mg-concept-main:6.5rem auto 0;
    --width-concept-contents:100rem;
    --mg-concept-contents:0 0 0 11rem;
    --grid-template-col-concept-contents:auto 47.5rem;
    --gap-concept-contents:0 3rem;
    --mb-concept-contents:10rem;
    --pb-concept-contents:8rem;
    --pt-concept-text:10rem;
    --fs-concept-text-heading:3.2rem;
    --ls-concept-text-heading:0.08em;
    --mb-concept-text-heading:2.8rem;
    --fs-concept-text-read:1.4rem;
    --lh-concept-text-read:2.5;
    --mb-concept-text-read:7rem;
    --width-concept-text-button:24.5rem;
    --fs-concept-text-button:1.4rem;
    --pd-bl-concept-text-button:1.4rem;
    --mt-concept-img:-11rem;
    --width-concept-img-image:45.8rem;
    --box-shadow-concept-img-image:1.8rem 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --pd-concept-contents:0 calc(40 * (100vw / 375));
    --order-concept-text:2;
    --order-concept-img:1;
  }
}

.concept__main {
  margin: var(--mg-concept-main);
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(247, 237, 234) 50%, rgb(247, 237, 234) 100%);
}
.concept__contents {
  position: relative;
  max-width: var(--width-concept-contents);
  width: 100%;
  background: var(--color-primary);
  padding: var(--pd-concept-contents);
  margin: 0 auto var(--mb-concept-contents);
}
.concept__contents--grid {
  display: grid;
  grid-template-columns: var(--grid-template-col-concept-contents);
  gap: var(--gap-concept-contents);
  padding-bottom: var(--pb-concept-contents);
  margin: var(--mg-concept-contents);
}
.concept__text {
  order: var(--order-concept-text);
  padding-top: var(--pt-concept-text);
}
.concept__text--heading {
  font-family: var(--ff-zen-old-min);
  font-optical-sizing: unset;
  font-size: var(--fs-concept-text-heading);
  letter-spacing: var(--ls-concept-text-heading);
  line-height: 1.5;
  font-weight: var(--fw-medium);
  margin-bottom: var(--mb-concept-text-heading);
}
.concept__text--read {
  font-size: var(--fs-concept-text-read);
  letter-spacing: 0.1em;
  line-height: var(--lh-concept-text-read);
  margin-bottom: var(--mb-concept-text-read);
}
.concept__text--button {
  display: block;
  width: 100%;
  max-width: var(--width-concept-text-button);
  font-size: var(--fs-concept-text-button);
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 1;
  border: 1px solid var(--color-border-black);
  background: #fff;
  padding-block: var(--pd-bl-concept-text-button);
}
.concept__img {
  order: var(--order-concept-img);
  margin-top: var(--mt-concept-img);
}
.concept__img--image {
  max-width: var(--width-concept-img-image);
  box-shadow: var(--box-shadow-concept-img-image) 0 0 rgba(193, 177, 177, 0.7);
}
/*# sourceMappingURL=style_concept.css.map */