/* //////////////////////////////////////////////////

Title : about-us.scss
For   : hospis/

Created       : 2025-10-02
Last Modified : 2025-10-02

==========================================

Content

////////////////////////////////////////////////// */
/**
 * common
 */
.c-about-us__heading {
  --heading-font-weight: 500;
  justify-content: center;
  -webkit-padding-after: var(--heading-spacer, var(--heading-spacer-default));
          padding-block-end: var(--heading-spacer, var(--heading-spacer-default));
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .l-about-us__section:not(:last-of-type) {
    padding-block: 4rem;
  }
  .l-about-us__section:last-of-type {
    -webkit-padding-before: 4rem;
            padding-block-start: 4rem;
  }
  .c-about-us__heading {
    --heading-spacer-default: 3rem;
    --heading-font-size: 2.4rem;
    --heading-line-height: (35 / 24);
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .l-about-us__section {
    padding-block: 8rem;
  }
  .c-about-us__heading {
    --heading-spacer-default: 6.4rem;
    --heading-font-size: 3.4rem;
    --heading-line-height: (49 / 34);
  }
  .c-about-us__heading[data-heading=overview] {
    --heading-spacer: 0;
  }
}
/**
 * message
 */
.l-about-us__section[data-section=message] {
  background-color: var(--color-theme-pale);
}

.c-about-us-message {
  max-width: var(--container-middle);
  width: 100%;
  margin-inline: auto;
  font-weight: 500;
}
.c-about-us-message__description-title {
  color: var(--color-theme-light);
}
.c-about-us-message__description-notes {
  text-align: right;
}
.c-about-us-message__description-notes dd {
  font-weight: 600;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-about-us-message {
    padding-inline: calc(var(--global-gutter) * 2);
  }
  .c-about-us-message__description {
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
  }
  .c-about-us-message__description-title {
    font-size: 2rem;
    line-height: 1.35;
    text-align: center;
  }
  .c-about-us-message__description-details {
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
  }
  .c-about-us-message__description-message {
    font-size: 1.6rem;
    line-height: 1.6875;
  }
  .c-about-us-message__description-notes {
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
  }
  .c-about-us-message__description-notes dt {
    font-size: 1.4rem;
  }
  .c-about-us-message__description-notes dd {
    -webkit-margin-before: 0.6rem;
            margin-block-start: 0.6rem;
    font-size: 1.6rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-about-us-message__container {
    display: grid;
    grid-template-columns: 43rem 1fr;
    -moz-column-gap: 7rem;
         column-gap: 7rem;
  }
  .c-about-us-message__description {
    -webkit-padding-before: 5rem;
            padding-block-start: 5rem;
  }
  .c-about-us-message__description-title {
    font-size: 2.4rem;
    line-height: 1.125;
  }
  .c-about-us-message__description-details {
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
  }
  .c-about-us-message__description-message {
    font-size: 1.6rem;
    line-height: 1.875;
  }
  .c-about-us-message__description-notes {
    -webkit-margin-before: 8rem;
            margin-block-start: 8rem;
  }
  .c-about-us-message__description-notes dt {
    font-size: 1.4rem;
  }
  .c-about-us-message__description-notes dd {
    -webkit-margin-before: 0.6rem;
            margin-block-start: 0.6rem;
    font-size: 1.6rem;
  }
}
/**
 * overview
 */
.c-about-us-overview {
  max-width: var(--container-narrow);
  width: 100%;
  margin-inline: auto;
}
.c-about-us-overview__table dl {
  display: grid;
}
.c-about-us-overview__table dl dt {
  font-weight: 600;
}
.c-about-us-overview__table dl dd {
  font-weight: 400;
  pointer-events: none;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-about-us-overview__table {
    padding-inline: calc(var(--global-gutter) * 2);
  }
  .c-about-us-overview__table dl {
    grid-template-columns: auto 1fr;
    justify-content: center;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    font-size: 1.4rem;
    line-height: 1.9285714286;
  }
  .c-about-us-overview__table dl dt {
    -webkit-padding-start: calc(var(--global-gutter) * 1);
            padding-inline-start: calc(var(--global-gutter) * 1);
  }
  .c-about-us-overview__table dl + dl {
    -webkit-margin-before: 1em;
            margin-block-start: 1em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-about-us-overview__container {
    display: grid;
    grid-template-columns: 1fr 73rem;
    align-items: center;
  }
  .c-about-us-overview__table {
    -webkit-padding-before: 6rem;
            padding-block-start: 6rem;
    -webkit-padding-after: 5rem;
            padding-block-end: 5rem;
    padding-inline: 15rem;
    border: 1px solid var(--color-theme-light);
    border-radius: 2rem;
  }
  .c-about-us-overview__table dl {
    grid-template-columns: 1fr 26rem;
    -moz-column-gap: 6rem;
         column-gap: 6rem;
    font-size: 1.6rem;
    line-height: 1.875;
  }
  .c-about-us-overview__table dl + dl {
    -webkit-margin-before: 1em;
            margin-block-start: 1em;
  }
}
/**
 * philosophy
 */
.l-about-us__section[data-section=philosophy] {
  max-width: var(--container-narrow);
  width: 100%;
  margin-inline: auto;
}

.c-about-us-philosophy__heading {
  font-family: var(--font-combine);
  color: var(--color-theme-light);
  font-weight: 300;
}

.c-about-us-vision__heading {
  position: relative;
}
.c-about-us-vision__heading-catchcopy {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.c-about-us-vision__heading-catchcopy::before, .c-about-us-vision__heading-catchcopy::after {
  content: "";
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
}
.c-about-us-vision__heading-catchcopy::before {
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMyIgaGVpZ2h0PSIzMi4xMDIiIHZpZXdCb3g9IjAgMCAzMyAzMi4xMDIiPiA8cGF0aCBpZD0i44OR44K5XzUwNyIgZGF0YS1uYW1lPSLjg5HjgrkgNTA3IiBkPSJNLTE1MTM4LTEzOTc5LjkzN3YtMzEuMWgzMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTUxMzkgMTQwMTIuMDM5KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDVhNGQwIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=");
}
.c-about-us-vision__heading-catchcopy::after {
  bottom: 0;
  right: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMyIgaGVpZ2h0PSIzMi4xMDIiIHZpZXdCb3g9IjAgMCAzMyAzMi4xMDIiPiA8cGF0aCBpZD0i44OR44K5XzUwOCIgZGF0YS1uYW1lPSLjg5HjgrkgNTA4IiBkPSJNMCwzMS4xVjBIMzIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyIDMxLjEwMikgcm90YXRlKDE4MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQ1YTRkMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+");
}

.c-about-us-credo__list {
  counter-reset: credo-counter;
}
.c-about-us-credo__item {
  counter-increment: credo-counter;
  position: relative;
  -webkit-padding-after: var(--credo-item-spacer);
          padding-block-end: var(--credo-item-spacer);
  border-bottom: 1px solid #D3D3D3;
  letter-spacing: 0.02em;
}
.c-about-us-credo__item::before {
  content: counter(credo-counter, decimal-leading-zero);
  position: absolute;
  top: 0;
  bottom: var(--credo-item-spacer);
  left: 0;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  font-family: var(--font-combine);
  color: var(--color-theme-light);
  font-weight: 300;
  line-height: 1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .l-about-us__section[data-section=philosophy] {
    padding-inline: calc(var(--global-gutter) * 2);
  }
  .c-about-us-philosophy__heading {
    font-size: 2.4rem;
    line-height: 1.2083333333;
  }
  .c-about-us-philosophy__heading[data-heading=vision] {
    position: absolute;
    top: -0.25em;
    right: 0;
  }
  .c-about-us-vision__heading-catchcopy {
    padding-block: 4rem;
    padding-inline: 4rem;
    font-size: 2rem;
    line-height: 1.85;
  }
  .c-about-us-vision__heading-catchcopy::before, .c-about-us-vision__heading-catchcopy::after {
    width: 3.2rem;
    height: 3.2rem;
  }
  .c-about-us-vision dd {
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
    font-size: 1.6rem;
    line-height: 1.875;
  }
  .c-about-us-credo {
    -webkit-margin-before: 6rem;
            margin-block-start: 6rem;
  }
  .c-about-us-credo__list {
    display: grid;
    grid-template-columns: 100%;
    row-gap: 2rem;
    -webkit-margin-before: 3rem;
            margin-block-start: 3rem;
  }
  .c-about-us-credo__item {
    --credo-item-spacer: 2rem;
    -webkit-padding-start: 5.5rem;
            padding-inline-start: 5.5rem;
    font-size: 1.6rem;
    line-height: 1.625;
  }
  .c-about-us-credo__item::before {
    font-size: 3.5rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-about-us-philosophy__heading {
    font-size: 3.8rem;
    line-height: 1.2368421053;
  }
  .c-about-us-philosophy__heading[data-heading=vision] {
    position: absolute;
    top: 0;
    right: 0;
  }
  .c-about-us-vision__heading {
    -webkit-padding-before: 2rem;
            padding-block-start: 2rem;
  }
  .c-about-us-vision__heading-catchcopy {
    padding-block: 4.2rem;
    padding-inline: 5.6rem;
    font-size: 2.3rem;
    line-height: 1;
  }
  .c-about-us-vision__heading-catchcopy::before, .c-about-us-vision__heading-catchcopy::after {
    width: 3.2rem;
    height: 3.2rem;
  }
  .c-about-us-vision dd {
    -webkit-margin-before: 4rem;
            margin-block-start: 4rem;
    padding-inline: 8rem;
    font-size: 1.6rem;
    line-height: 1.875;
  }
  .c-about-us-credo {
    -webkit-margin-before: 16rem;
            margin-block-start: 16rem;
  }
  .c-about-us-credo__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    row-gap: 4rem;
    -webkit-margin-before: 6.4rem;
            margin-block-start: 6.4rem;
  }
  .c-about-us-credo__item {
    --credo-item-spacer: 2rem;
    -webkit-padding-start: 5.2rem;
            padding-inline-start: 5.2rem;
    font-size: 1.6rem;
    line-height: 1.875;
  }
  .c-about-us-credo__item::before {
    font-size: 3.3rem;
  }
}
/*# sourceMappingURL=about-us.css.map */