.text-teal {
  color: #55C5C9;
}

.text-red {
  color: #D52C2F !important;
}

/* josefin-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/josefin-sans-v26-latin-regular.woff2") format("woff2"), url("../assets/fonts/josefin-sans-v26-latin-regular.woff") format("woff");
}
/* josefin-sans-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Josefin Sans";
  font-style: italic;
  font-weight: 500;
  src: url("../assets/fonts/josefin-sans-v26-latin-500italic.woff2") format("woff2"), url("../assets/fonts/josefin-sans-v26-latin-500italic.woff") format("woff");
}
/* josefin-sans-600italic - latin */
@font-face {
  font-display: swap;
  font-family: "Josefin Sans";
  font-style: italic;
  font-weight: 600;
  src: url("../assets/fonts/josefin-sans-v26-latin-600italic.woff2") format("woff2"), url("../assets/fonts/josefin-sans-v26-latin-600italic.woff") format("woff");
}
/* josefin-sans-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Josefin Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../assets/fonts/josefin-sans-v26-latin-700italic.woff2") format("woff2"), url("../assets/fonts/josefin-sans-v26-latin-700italic.woff") format("woff");
}
a:link,
a:visited,
a:hover,
a:active,
a {
  text-decoration: none !important;
  color: inherit;
}

h1,
.h1-like {
  font-size: clamp(2.5rem, 5vw, 6.4rem);
  font-weight: 700;
  line-height: 165%;
}

h2,
.h2-like {
  font-size: clamp(4rem, 4vw, 5rem);
  font-weight: 700;
  line-height: 160%;
}

h3,
.h3-like {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
}

h4,
.h4-like {
  font-size: clamp(1.8rem, 2vw, 2rem);
  font-weight: 700;
}

.p-1216 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.p-1215 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.p-1418 {
  font-size: clamp(1.4rem, 1.4vw, 1.8rem);
}

.p-1618 {
  font-size: clamp(1.6rem, 1.6vw, 1.8rem);
}

.p-1620 {
  font-size: clamp(1.6rem, 2vw, 2rem);
}

.p-1824 {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
}

.p-2036 {
  font-size: clamp(2rem, 3vw, 3.6rem);
}

.p-2337 {
  font-size: clamp(2.3rem, 3vw, 3.7rem);
}

.p-2032 {
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.p-2430 {
  font-size: clamp(2.4rem, 2.4vw, 3rem);
}

.p-5385 {
  font-size: clamp(5.3rem, 8vw, 8.5rem);
}

.p-70100 {
  font-size: clamp(7rem, 10vw, 10rem);
}

.p-small {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}

.f-source-b {
  font-family: "source-han-sans-japanese", YuGothic, "YuGothic", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.15em;
}

.f-source-med {
  font-family: "source-han-sans-japanese", YuGothic, "YuGothic", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.15em;
}

.f-josefin-medi {
  font-family: "Josefin Sans", YuGothic, "YuGothic", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.1em;
}

.f-josefin-sbi {
  font-family: "Josefin Sans", YuGothic, "YuGothic", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.1em;
}

.f-josefin-bi {
  font-family: "Josefin Sans", YuGothic, "YuGothic", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.1em;
}

.med-to-bold {
  font-weight: 500;
}

@media screen and (min-width: 801px) {
  .med-to-bold {
    font-weight: 700;
  }
}
.center-text {
  text-align: center;
}

.bold-text {
  font-weight: 700;
}

.regular-text {
  font-weight: 400;
}

.lh140 {
  line-height: 140%;
}

.lh-200-250 {
  line-height: 200%;
}
@media screen and (min-width: 801px) {
  .lh-200-250 {
    line-height: 250%;
  }
}

.vision-landing .landing-banner {
  background: url(../img/about/vision-banner-sp.webp) center no-repeat;
  background-size: cover;
  height: clamp(300px, 60vw, 604px);
}
@media screen and (min-width: 801px) {
  .vision-landing .landing-banner {
    background: url(../img/about/vision-banner.webp) center no-repeat;
    background-size: cover;
  }
}

section.vision {
  padding: 60px 0 42px 0;
  background-color: #D52C2F;
  color: #ffffff;
}
section.vision .text-container {
  width: 88%;
  margin: 0 auto;
  padding-bottom: 55px;
  background: url(../img/about/purpose-text-w.svg) bottom 0 right 0 no-repeat;
  background-size: 60%;
}
section.vision .text-container .h2-group {
  font-size: clamp(18px, 2vw, 20px);
  margin-bottom: 1.3em;
}
section.vision .text-container .h2-group h2 {
  line-height: 140%;
}
section.vision .text-container .h2-group h3 {
  line-height: 120%;
  font-size: 1em;
}
section.vision .text-container .h2-group .spacer {
  margin-top: 1em;
  display: block;
  width: 2em;
  height: 2px;
  background-color: #ffffff;
}
section.vision .text-container h3.text-title {
  line-height: 170%;
  max-width: 80%;
  margin-bottom: 1em;
}
section.vision .text-container p.text-content {
  line-height: 200%;
  letter-spacing: 0.05em;
  max-width: 630px;
}
section.vision .img-container {
  display: block;
  width: 92%;
  max-width: 600px;
  height: clamp(327px, 88vw, 560px);
  background: url(../img/about/vision-sp-1.webp) center no-repeat;
  background-size: cover;
}
@media screen and (min-width: 1001px) {
  section.vision {
    padding: 0 0 0 0;
  }
  section.vision .content-container {
    display: flex;
    flex-direction: row;
    position: relative;
  }
  section.vision .content-container .img-container {
    position: absolute;
    height: 100%;
    height: calc(100% - clamp(50px, 6vw, 110px));
    width: 50%;
    max-width: unset;
    background: url(../img/about/vision-1.webp) center no-repeat;
    background-size: cover;
  }
  section.vision .content-container .text-container {
    width: 50%;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    margin: 0 0 0 auto;
    padding: clamp(50px, 4vw, 100px) 2em clamp(60px, 7vw, 120px) clamp(50px, 5vw, 100px);
    background-position: bottom clamp(40px, 5vw, 80px) right clamp(32px, 3vw, 50px);
  }
  section.vision .content-container .text-container .h2-group {
    width: 100%;
  }
  section.vision .content-container .text-container h3.text-title {
    max-width: 100%;
    width: 100%;
  }
  section.vision .content-container .text-container p.text-content {
    line-height: 250%;
    align-self: flex-start;
  }
}

section.purpose {
  position: relative;
  margin: 0 auto 120px auto;
}
section.purpose .content-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 1;
}
section.purpose .content-container .img-container {
  align-self: flex-end;
  width: 90%;
  height: clamp(330px, 80vw, 660px);
  max-width: 700px;
  background: url(../img/about/vision-sp-2.webp) center no-repeat;
  background-size: cover;
}
section.purpose .content-container .text-container {
  position: relative;
  width: 80%;
  max-width: 560px;
  margin: 0 auto 0 auto;
}
section.purpose .content-container .text-container .h2-group {
  font-size: clamp(18px, 2vw, 20px);
  margin: 1em 0 1.5em;
}
section.purpose .content-container .text-container .h2-group h2 {
  line-height: 120%;
}
section.purpose .content-container .text-container .h2-group .spacer {
  margin: 1em 0;
  display: block;
  width: 2em;
  height: 2px;
  background-color: #D52C2F;
}
section.purpose .content-container .text-container .h2-group h4 {
  font-size: 1em;
}
section.purpose .content-container .text-container .text-block h4 {
  margin-bottom: 1.5em;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 170%;
}
section.purpose .content-container .text-container .text-block p {
  line-height: 210%;
  letter-spacing: 0.1em;
}
section.purpose .content-container .text-container .vm-btn {
  font-size: clamp(15px, 2vw, 20px);
  width: clamp(306px, 45vw, 410px);
  max-width: 100%;
  margin: 3em 0 0 0;
  padding: 1em 2em;
}
section.purpose .content-container img.purpose-text {
  margin: 0 auto;
  transform: translate(6%, 28%);
  width: 100%;
  max-width: 540px;
}
section.purpose .bg-grey {
  position: absolute;
  display: block;
  width: 92%;
  height: calc(100% - 40px);
  bottom: 40px;
  top: 0;
  left: 0;
  background-color: #F2F2F2;
  z-index: 0;
}
section.purpose .bg-pattern {
  position: absolute;
  display: block;
  width: 100%;
  height: 46%;
  bottom: 0;
  background: url(../img/about/purpose-bg-pattern-sp.svg) center no-repeat;
  background-size: cover;
  z-index: -1;
}
@media screen and (min-width: 801px) {
  section.purpose {
    padding-bottom: clamp(35px, 5vw, 70px);
  }
  section.purpose .content-container {
    flex-direction: row-reverse;
    align-items: flex-start;
  }
  section.purpose .content-container .img-container {
    align-self: flex-start;
    width: 50%;
    max-width: 866px;
    height: clamp(400px, 50vw, 585px);
  }
  section.purpose .content-container .text-container {
    margin: 0 1em;
    width: 50%;
    max-width: 580px;
  }
  section.purpose .content-container .text-container .h2-group {
    margin: 0 0 1em 0;
  }
  section.purpose .content-container .text-container .h2-group .spacer {
    width: 3.5em;
    margin-top: clamp(60px, 10vw, 100px);
  }
  section.purpose .content-container .text-container .text-block p {
    line-height: 220%;
  }
  section.purpose .bg-grey {
    width: 82%;
    height: calc(100% - 60px);
  }
  section.purpose .bg-pattern {
    right: 0;
    width: 81%;
    height: 46%;
    background: url(../img/about/purpose-bg-pattern.svg) center no-repeat;
    background-size: cover;
  }
}
@media screen and (min-width: 1201px) {
  section.purpose .content-container .text-container {
    margin: 0 5em 0 0;
  }
  section.purpose .content-container .text-container .h2-group {
    margin: 0 0 3em 0;
  }
}
@media screen and (min-width: 1601px) {
  section.purpose .content-container img.purpose-text {
    transform: translate(-32%, 32%);
  }
}
@media screen and (min-width: 1921px) {
  section.purpose {
    max-width: calc(1920px + (100vw - 1920px) / 2);
    margin-right: auto;
    margin-left: 0;
  }
}

section.message {
  margin-bottom: clamp(160px, 20vw, 240px);
}
section.message .h2-title-group-rb {
  margin-bottom: 0;
}
section.message .content-wrapper {
  width: 100%;
  background: url(../img/about/message-bg.webp) bottom right no-repeat;
  background-size: 300vw;
  padding-top: 50px;
}
section.message .content-container {
  width: 1200px;
  max-width: 92%;
  margin: 0 auto 0 auto;
  align-items: center;
}
section.message .content-container .img-container {
  position: relative;
  width: 100%;
  max-width: 425px;
}
section.message .content-container .img-container .daihyou-details {
  width: max-content;
  max-width: 80vw;
  bottom: 0;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 120%);
}
section.message .content-container .img-container .daihyou-details h4 {
  margin-bottom: 0.5em;
}
section.message .content-container .img-container .daihyou-details p {
  line-height: 180%;
}
section.message .content-container .text-container {
  width: 100%;
  max-width: 600px;
  margin: 0 0 3em 0;
}
section.message .content-container .text-container p {
  line-height: 200%;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}
@media screen and (min-width: 801px) {
  section.message .content-wrapper {
    background-size: contain;
  }
  section.message .content-container {
    align-items: flex-end;
  }
  section.message .content-container .img-container {
    width: 40%;
    min-width: clamp(320px, 25vw, 424px);
  }
  section.message .content-container .text-container {
    margin: 0 2em 0 0;
    max-width: unset;
  }
  section.message .content-container .text-container p {
    line-height: 250%;
  }
  section.message .content-container .text-container p:last-child {
    margin-bottom: 0;
  }
}

section.mission {
  margin-bottom: 80px;
}
section.mission .h3-group {
  width: fit-content;
  max-width: 90%;
  margin: 0 auto 60px auto;
}
section.mission .h3-group h3 {
  line-height: 140%;
  letter-spacing: 0.1em;
  font-size: clamp(2rem, 3vw, 3rem);
  margin-bottom: 0.6em;
}
section.mission .h3-group h4 {
  letter-spacing: 0.15em;
  font-size: clamp(1.8rem, 2vw, 2rem);
}
section.mission .h3-group .spacer {
  display: block;
  width: 112px;
  height: 4px;
  background-color: #D52C2F;
}
section.mission .fw-content {
  position: relative;
  width: 100%;
  padding-top: 50px;
}
section.mission .fw-content .bg-grey {
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  background-color: #F7F7F7;
  width: 100%;
  height: 90%;
  z-index: -1;
}
@media screen and (min-width: 801px) {
  section.mission .fw-content .bg-grey {
    height: 100%;
  }
}
section.mission .mission-grid {
  display: grid;
  width: 1000px;
  max-width: 96%;
  margin: 0 auto 0 auto;
  padding-bottom: clamp(120px, 20vw, 195px);
  grid-template-columns: clamp(80px, 21.2vw, 212px) clamp(20px, 4vw, 40px) 1fr;
  grid-template-rows: repeat(4, auto clamp(20px, 4vw, 40px)) auto;
  padding-bottom: 2em;
}
section.mission .mission-grid .mission-box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Josefin Sans", YuGothic, "YuGothic", "Yu Gothic", "Yu Gothic Medium", Meiryo, sans-serif;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.1em;
  position: relative;
  flex-direction: column;
  width: 100%;
  height: clamp(80px, 21.2vw, 212px);
  z-index: 1;
  background-color: #D52C2F;
  color: #ffffff;
  font-size: clamp(14px, 2vw, 20px);
  grid-column: 1/2;
}
section.mission .mission-grid .mission-box .highlight {
  margin-top: 0.3em;
  font-size: clamp(37px, 9vw, 103px);
  line-height: 55%;
}
section.mission .mission-grid .mission-box.mibo-alt {
  background-color: #F87373;
}
section.mission .mission-grid .mission-box.mibo-1 {
  grid-row: 1/2;
}
section.mission .mission-grid .mission-box.mibo-2 {
  grid-row: 3/4;
}
section.mission .mission-grid .mission-box.mibo-3 {
  grid-row: 5/6;
}
section.mission .mission-grid .mission-box.mibo-4 {
  grid-row: 7/8;
}
section.mission .mission-grid .mission-box.mibo-5 {
  grid-row: 9/10;
}
section.mission .mission-grid .mission-bar {
  display: block;
  position: relative;
  width: clamp(3px, 0.8vw, 8px);
  height: 100%;
  background-color: #D52C2F;
  z-index: 0;
  margin-left: calc(clamp(80px, 21.2vw, 212px) / 2);
  grid-column: 1/2;
}
section.mission .mission-grid .mission-bar.miba-1 {
  grid-row: 1/4;
}
section.mission .mission-grid .mission-bar.miba-2 {
  grid-row: 3/6;
}
section.mission .mission-grid .mission-bar.miba-3 {
  grid-row: 5/7;
}
section.mission .mission-grid .mission-bar.miba-4 {
  grid-row: 7/9;
}
section.mission .mission-grid .mission-text {
  margin-top: 1em;
  grid-column: 3/4;
  padding-right: 1em;
}
section.mission .mission-grid .mission-text h4 {
  margin-bottom: 1em;
  line-height: 150%;
  font-size: clamp(1.6rem, 2vw, 2rem);
}
section.mission .mission-grid .mission-text p {
  line-height: 180%;
  letter-spacing: 0.1em;
}
section.mission .mission-grid .mission-text.mite-1 {
  grid-row: 1/2;
}
section.mission .mission-grid .mission-text.mite-2 {
  grid-row: 3/4;
}
section.mission .mission-grid .mission-text.mite-3 {
  grid-row: 5/6;
}
section.mission .mission-grid .mission-text.mite-4 {
  grid-row: 7/8;
}
section.mission .mission-grid .mission-text.mite-5 {
  grid-row: 9/10;
}
@media screen and (min-width: 1001px) {
  section.mission .mission-banner {
    background: url(../img/about/vision-sp-3.webp) center no-repeat;
    background-size: cover;
  }
  section.mission .mission-grid {
    margin-top: 0;
    grid-template-columns: clamp(80px, 21.2vw, 212px) 80px clamp(80px, 21.2vw, 212px) 40px 1fr;
    grid-template-rows: auto 80px auto 80px auto 80px auto 80px auto;
  }
  section.mission .mission-grid .mission-box.mibo-alt {
    grid-column: 3/4;
  }
  section.mission .mission-grid .mission-text {
    max-width: calc(485px + 1em);
    grid-column: 3/6;
  }
  section.mission .mission-grid .mission-text p {
    line-height: 250%;
  }
  section.mission .mission-grid .mission-text.alt-text {
    grid-column: 5/7;
  }
  section.mission .mission-grid .mission-bar {
    grid-column: 1/4;
    height: 8px;
    width: 420px;
    margin: 0 0 0 clamp(80px, 21.2vw, 212px);
    z-index: 0;
  }
  section.mission .mission-grid .mission-bar.miba-r {
    transform-origin: -49% 0%;
    transform: rotate(45deg);
  }
  section.mission .mission-grid .mission-bar.miba-l {
    transform-origin: 65% -50%;
    transform: rotate(-45deg) translate(-100%, 100%);
  }
  section.mission .mission-grid .mission-bar.miba-1 {
    grid-row: 1/4;
  }
  section.mission .mission-grid .mission-bar.miba-2 {
    grid-row: 3/5;
  }
  section.mission .mission-grid .mission-bar.miba-3 {
    grid-row: 4/6;
    transform-origin: -65% 0%;
    transform: rotate(46deg) translate(0%, 50%);
  }
  section.mission .mission-grid .mission-bar.miba-4 {
    grid-row: 5/7;
    transform-origin: 135% -50%;
    transform: rotate(-45deg) translate(-100%, 100%);
  }
}

/*# sourceMappingURL=about.css.map */