@charset "UTF-8";

.page-message {
  background: transparent;
  color: #000;
}

/* Match the shared RELATED CONTENTS layout. */
@media (min-width: 1024px) {
  .page-message .philosophy {
    padding-top: 114.984375px;
  }

  .page-message .philosophy h2,
  .page-message .related h2 {
    height: 61px;
    font-family: var(--font-ja);
    font-size: 36px;
    font-weight: 500;
    line-height: 60.4px;
    letter-spacing: 0;
    white-space: nowrap;
    transform: none;
  }

  .page-message .related h2 br {
    display: none;
  }

  .page-message .philosophy > .message-container > .message-en-label,
  .page-message .related > .message-container > .message-en-label {
    height: 24px;
    margin-top: 17px;
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
    transform: none;
  }

  .page-message .related__grid {
    grid-template-columns: repeat(3, 361px);
    justify-content: space-between;
    gap: 0;
    width: 100%;
    margin-top: 50.964px;
    transform: none;
  }

  .page-message .related-card {
    width: 361px;
    height: 275.134px;
    min-height: 0;
    padding: 0;
  }

  .page-message .related-card__accent {
    top: 33.291px;
    left: 30.5px;
    width: 5px;
    height: 50px;
  }

  .page-message .related-card h3 {
    position: absolute;
    top: 25.157px;
    left: 50.625px;
    margin: 0;
    font-family: var(--font-ja);
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 2.092px;
    white-space: nowrap;
  }

  .page-message .related-card__en {
    position: absolute;
    top: 68.098px;
    left: 50.625px;
    margin: 0;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
  }

  .page-message .related-card > p:not(.related-card__en) {
    position: absolute;
    top: 109.806px;
    left: 30.5px;
    width: 300px;
    margin: 0;
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: 1px;
  }

  .page-message .related-card__more,
  .page-message .related-card:nth-child(n) .related-card__more {
    right: 26px;
    bottom: 20.277px;
    width: 122px;
    font-size: 17.879px;
    font-weight: 400;
    line-height: 35.758px;
  }
}

.page-message .related-card {
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .12);
}

@media (max-width: 1023px) {
  .page-message .philosophy {
    padding-top: 69.4375px;
  }

  .page-message .philosophy h2,
  .page-message .related h2 {
    width: auto;
    font-family: var(--font-ja);
    font-size: 25px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
    transform: none;
  }

  .page-message .related h2 br {
    display: block;
  }

  .page-message .philosophy > .message-container > .message-en-label,
  .page-message .related > .message-container > .message-en-label {
    height: 19px;
    margin-top: 13.183px;
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
    transform: none;
  }

  .page-message .related__grid {
    grid-template-columns: minmax(0, 336px);
    justify-content: center;
    gap: 24.5px;
    width: 100%;
    margin-top: 33px;
  }

  .page-message .related-card {
    position: relative;
    width: 100%;
    height: 242.5px;
    min-height: 0;
    padding: 0;
    border-radius: 20px;
  }

  .page-message .related-card__accent {
    top: 34.314px;
    left: 25.18px;
    width: 4px;
    height: 43.94px;
  }

  .page-message .related-card h3 {
    position: absolute;
    top: 26.349px;
    left: 43.926px;
    margin: 0;
    font-family: var(--font-ja);
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 2.092px;
    white-space: nowrap;
  }

  .page-message .related-card__en {
    position: absolute;
    top: 68.25px;
    left: 43.926px;
    margin: 0;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1px;
  }

  .page-message .related-card > p:not(.related-card__en) {
    position: absolute;
    top: 101.251px;
    left: 25.18px;
    width: min(285.644px, calc(100% - 50.36px));
    margin: 0;
    font-family: var(--font-ja);
    font-size: 14px;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 1px;
  }

  .page-message .related-card__more,
  .page-message .related-card:nth-child(n) .related-card__more {
    right: 25.178px;
    bottom: 21.487px;
    width: 108px;
    font-size: 16px;
    font-weight: 400;
    line-height: 35.758px;
  }

}

.message-container {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.message-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  height: 100px;
  pointer-events: none;
}

.message-header a {
  pointer-events: auto;
}

.message-header__home {
  position: fixed;
  top: 10px;
  left: max(20px, calc((100vw - 1304px) / 2));
  width: 46px;
  height: 58px;
}

.message-header__home img {
  width: 100%;
  height: 100%;
}

.message-header__contact {
  --ui-arrow-color: #fff;
  position: fixed;
  z-index: 50;
  top: 37px;
  right: max(20px, calc((100vw - 1332px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 177px;
  height: 59px;
  padding: 0 15px 0 43px;
  border-radius: 29.5px;
  background: linear-gradient(154.658deg, #94fbff 14.163%, #3f4fff 86.821%);
  box-shadow: 0 1.873px 4.683px rgba(0, 0, 0, .15),
    0 0 7px rgba(255, 255, 255, .72),
    inset -.937px -.937px 3.746px rgba(255, 255, 255, .45),
    inset 1.873px 1.873px 3.746px rgba(255, 255, 255, .6);
  color: #fff;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

.message-story {
  position: relative;
  min-height: 1811px;
  overflow: clip;
  background: transparent;
}

.message-story__title {
  position: absolute;
  z-index: 2;
  top: 123px;
  left: max(20px, calc((100vw - 1136px) / 2));
}

.message-story__title h1 {
  font-family: "gotham", sans-serif;
  font-size: 83px;
  font-weight: 200;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0px;
}

.message-story__label {
  position: relative;
  margin-top: 8px;
  padding-left: 25px;
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
}

.message-story__label::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f9ca70, #f08696);
  box-shadow: inset 1px 1.5px 3px rgba(255, 255, 255, .9);
}

.message-intro {
  display: grid;
  grid-template-columns: 678.698px 515px;
  column-gap: 16.302px;
  width: min(1301px, calc(100% - 40px));
  margin-inline: auto;
  padding-top: 199.592px;
  align-items: stretch;
}

.message-intro__portrait-column {
  min-width: 0;
}

.message-intro__portrait-sticky {
  position: sticky;
  top: 70px;
  height: 671.909px;
}

.message-portrait {
  position: relative;
  z-index: 1;
  width: 678.698px;
  height: 671.909px;
  margin: 0;
}

.message-portrait__image {
  position: absolute;
  top: 59.673px;
  left: 90.521px;
  width: 523.342px;
  height: 552.563px;
  overflow: visible;
}

.message-portrait__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.message-portrait__svg--sp {
  display: none;
}

.message-portrait__liquid-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.message-portrait__image.is-liquid-ready .message-portrait__svg {
  visibility: hidden;
}

.message-portrait__image.is-liquid-ready .message-portrait__liquid-canvas {
  opacity: 1;
}


.message-portrait figcaption {
  position: absolute;
  top: 550.408px;
  left: 118px;
  width: 150px;
  margin: 0;
  letter-spacing: 1px;
}

.message-portrait figcaption span,
.message-portrait figcaption strong {
  display: block;
}

.message-portrait figcaption span {
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
}

.message-portrait figcaption strong {
  font-size: 20px;
  line-height: 36px;
}

.message-copy {
  position: relative;
  z-index: 2;
  width: 515px;
  margin-top: 79.408px;
  color: rgba(0, 0, 0, .3);
}

.message-copy h2 {
  margin: 0 0 38px 0;
  color: #000;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-size: 36px;
  font-weight: 500;
  font-style: normal;
  line-height: 58px;
  letter-spacing: 0px;
}

.message-copy h2 span {
  display: block;
}

.message-copy h2 span + span {
  padding-left: 0;
}

.message-copy__body {
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: justify;
}

.message-copy__lead .message-copy__body {
  color: #000;
}

.message-copy__body p + p {
  margin-top: 22px;
}

.message-copy__lead .message-copy__body p:first-child + p {
  margin-top: 0;
}

.message-copy__section {
  margin-top: 43px;
}

.message-copy__section:nth-of-type(3) {
  margin-top: 49px;
}

.message-copy__section:nth-of-type(4) {
  margin-top: 49px;
}

.message-copy__section h3 {
  margin: 0 0 18px 4px;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -.03em;
}

.message-lower {
  position: relative;
  overflow: hidden;
  background: transparent;
}

.philosophy {
  min-height: 958px;
  padding-top: 171px;
}

.philosophy h2,
.related h2 {
  font-size: 36px;
  font-weight: 500;
  line-height: 36.4px;
  letter-spacing: 0;
}

.message-en-label {
  margin-top: 8px;
  color: #939393;
  font-family: var(--font-en);
  font-size: 20px;
  line-height: 30px;
  letter-spacing: .05em;
}

.philosophy__visual {
  position: relative;
  width: 955.47px;
  height: 354.255px;
  margin: 66.141px auto 0;
}

.philosophy > .message-container > .message-en-label {
  margin-top: 22.453px;
  line-height: 24px;
  letter-spacing: 0;
}

.philosophy__rings-base,
.philosophy__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 1201px) {
  .philosophy__rings-base,
  .philosophy__rings {
    inset: auto;
    top: 0;
    left: 0;
    width: 955.47px;
    height: 354.034px;
  }

  .philosophy__rings {
    top: .221px;
  }
}

.philosophy__icon {
  position: absolute;
  display: block;
  overflow: visible;
}

.philosophy__icon img {
  position: absolute;
  display: block;
  max-width: none;
  inset: var(--icon-inset-y, 0) var(--icon-inset-x, 0);
  width: calc(100% - (2 * var(--icon-inset-x, 0px)));
  height: calc(100% - (2 * var(--icon-inset-y, 0px)));
}

.philosophy__icon--service {
  top: 68.495px;
  left: 127.351px;
  width: 99.16px;
  height: 125.037px;
}

.philosophy__icon--communication {
  --icon-inset-x: -.74%;
  --icon-inset-y: -1.11%;
  top: 86.042px;
  left: 410.696px;
  width: 134.238px;
  height: 89.943px;
}

.philosophy__icon--people {
  --icon-inset-x: -.83%;
  --icon-inset-y: -.92%;
  top: 67.796px;
  right: 117.468px;
  width: 122.348px;
  height: 108.189px;
}

.philosophy__visual-title {
  position: absolute;
  z-index: 2;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 2px;
  text-align: center;
  white-space: nowrap;
}

.philosophy__visual-title--service {
  top: 199.397px;
  left: 78.93px;
  width: 196px;
}

.philosophy__visual-title--communication {
  top: 199.397px;
  left: 383.61px;
  width: 196px;
}

.philosophy__visual-title--people {
  top: 199.397px;
  right: 82.469px;
  width: 174px;
}

.philosophy__details {
  display: grid;
  grid-template-columns: repeat(3, 249.7px);
  justify-content: start;
  column-gap: 59.857px;
  margin-top: 42.573px;
  margin-left: 131.908px;
  padding: 0;
  list-style: none;
}

.philosophy__details li {
  position: relative;
}

.philosophy__details li:nth-child(3) {
  transform: translateX(3.598px);
}

.philosophy__details p {
  font-family: "Arimo", Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
  text-align: justify;
}

.philosophy__number {
  display: none;
}

.philosophy__detail-icon {
  display: none;
}

.philosophy-title__break-sp {
  display: none;
}

.philosophy-communication__break-pc {
  display: block;
}

.related {
  position: relative;
  z-index: 1;
  padding-top: 61.454px;
}

.related h2 {
  transform: translateX(-2.5px);
}

.related > .message-container > .message-en-label {
  margin-top: 18.407px;
  line-height: 24px;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 361px);
  gap: 18px;
  width: 1119px;
  margin-top: 38.675px;
  transform: translateX(-1.5px);
}

.related-card {
  --ui-arrow-color: #f18d78;
  position: relative;
  display: block;
  height: 275.134px;
  padding: 33.157px 30.5px 20.328px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 19px rgba(0, 0, 0, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}

.related-card__accent {
  position: absolute;
  top: 41.291px;
  left: 30.5px;
  width: 5px;
  height: 50px;
  border-radius: 1.5px;
  background: linear-gradient(180deg, #f9ca70, #f08696);
}

.related-card h3,
.related-card__en {
  margin-left: 22.544px;
}

.related-card h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: 2.092px;
}

.related-card__en {
  margin-top: -1.059px;
  color: #939393;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.related-card > p:not(.related-card__en) {
  width: 300px;
  margin-top: 17.708px;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 1px;
}

.related-card:first-child > p:not(.related-card__en) {
  line-height: 32px;
}

.related-card__more {
  position: absolute;
  right: 26.5px;
  bottom: 20.328px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 122px;
  color: transparent;
  background: linear-gradient(180deg, #f9ca70, #f08696);
  background-clip: text;
  -webkit-background-clip: text;
  font-family: var(--font-en);
  font-size: 17.879px;
  font-weight: 500;
  line-height: 35.758px;
}

.related-card__more .ui-arrow {
  flex: 0 0 auto;
  background: linear-gradient(180deg, #f9ca70, #f08696);
}

.related-card:first-child .related-card__more {
  right: 26px;
}

.related-card:nth-child(2) .related-card__more {
  right: 27px;
}

.related-card:nth-child(3) .related-card__more {
  right: 16px;
}

@media (max-width: 1200px) {
  .message-intro {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .message-intro__portrait-column,
  .message-intro__portrait-sticky {
    display: contents;
  }

  .message-intro__portrait-sticky {
    position: static;
    top: auto;
    height: auto;
  }

  .message-portrait {
    position: absolute;
  }

  .message-copy {
    margin-top: 0;
    padding-top: 271px;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .message-story {
    min-height: 1900px;
  }

  .message-portrait {
    left: -35px;
    transform: scale(.83);
    transform-origin: left top;
  }

  .message-copy {
    width: min(48vw, 515px);
    margin-left: 49%;
  }

  .message-copy h2 {
    font-size: 31px;
  }

  .philosophy__visual {
    width: min(956px, 94vw);
    height: auto;
    aspect-ratio: 955.47 / 354.034;
  }

  .philosophy__icon,
  .philosophy__visual-title {
    transform: scale(.86);
  }

  .related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .message-container {
    width: calc(100% - 40px);
  }

  .message-header__home {
    top: 0;
    left: 26px;
    width: 33px;
    height: 49px;
  }

  .message-header__contact {
    top: 20px;
    right: 19px;
    width: 138px;
    height: 41px;
    padding: 0 6px 0 31px;
    border-radius: 20.7px;
    font-size: 12px;
  }

  .message-story {
    min-height: 2165px;
  }

  .message-story__title {
    top: 92.63px;
    left: 15px;
  }

  .message-story__title h1 {
    font-size: 52px;
    line-height: 52px;
    letter-spacing: .12em;
  }

  .message-story__label {
    margin-top: 8px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 27px;
  }

  .message-story__label::before {
    top: 10px;
    width: 8px;
    height: 8px;
  }

  .message-portrait {
    top: 147.223px;
    left: -35.626px;
    width: 429.295px;
    height: 425px;
  }

  .message-portrait__image {
    top: 52.098px;
    left: 48.309px;
    width: 343.028px;
    height: 395.801px;
  }

  .message-portrait__svg--pc {
    display: none;
  }

  .message-portrait__svg--sp {
    display: block;
  }

  .message-portrait figcaption {
    position: absolute;
    top: 354.777px;
    right: 38.669px;
    left: auto;
    width: 100px;
    margin: 0;
    text-align: right;
  }

  .message-portrait figcaption span {
    font-size: 13px;
    line-height: 28px;
  }

  .message-portrait figcaption strong {
    font-size: 16px;
    line-height: 30px;
  }

  .message-copy {
    width: calc(100% - 40px);
    margin: 0 20px -19px;
    padding-top: 562px;
    color: #000;
  }

  .message-copy h2 {
    margin: 0 0 30px 0;
    font-size: 27px;
    line-height: 40px;
    letter-spacing: 0;
  }

  .message-copy__body {
    font-size: 14px;
    line-height: 30px;
  }

  .message-copy__body p + p {
    margin-top: 12px;
  }

  .message-copy__section {
    margin-top: 20px;
  }

  .message-copy__section:nth-of-type(3),
  .message-copy__section:nth-of-type(4) {
    margin-top: 30px;
  }

  .message-copy__section h3 {
    margin: 0 0 17px 1px;
    font-size: 18px;
    line-height: 36.4px;
    letter-spacing: -.02em;
  }

  .philosophy {
    padding-top: 146px;
  }

  .philosophy h2,
  .related h2 {
    font-size: 27px;
    line-height: 42px;
    letter-spacing: 0;
  }

  .philosophy h2 {
    width: 240px;
    transform: translateY(9px);
  }

  .philosophy-title__break-sp {
    display: block;
  }

  .philosophy-communication__break-pc {
    display: none;
  }

  .philosophy > .message-container > .message-en-label {
    margin-top: 6px;
    line-height: 24px;
    letter-spacing: .04em;
    transform: translateY(9px);
  }

  .message-en-label {
    margin-top: 6px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .04em;
  }

  .philosophy__visual {
    width: 620px;
    height: 230px;
    margin: 244px 0 0 50%;
    transform: translateX(-50%) rotate(90deg);
  }

  .philosophy__icon {
    transform: rotate(-90deg);
  }

  .philosophy__icon--service {
    top: calc(50% - 42.77725px);
    left: 39.85px;
    width: 67.8468px;
    height: 85.5545px;
  }

  .philosophy__icon--communication {
    --icon-inset-x: -1.01%;
    --icon-inset-y: -1.5%;
    top: calc(50% - 31.15945px);
    left: 233.6px;
    width: 92.1154px;
    height: 62.3189px;
  }

  .philosophy__icon--people {
    --icon-inset-x: -1.115%;
    --icon-inset-y: -1.24%;
    top: calc(50% - 36.93125px);
    right: auto;
    left: 429.3px;
    width: 83.3172px;
    height: 73.8625px;
  }

  .philosophy__visual-title {
    width: 170px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 1px;
    transform: rotate(-90deg);
  }

  .philosophy__visual-title--service {
    top: 93px;
    left: 66.1391px;
  }

  .philosophy__visual-title--communication {
    top: 93px;
    left: 260.4125px;
  }

  .philosophy__visual-title--people {
    top: 82px;
    right: auto;
    left: 468.4828px;
  }

  .philosophy__details {
    display: block;
    width: 100%;
    margin-top: 207.5px;
    margin-left: 0;
    transform: none;
  }

  .philosophy__details li:nth-child(3) {
    transform: none;
    border-bottom: 0;
  }

  .philosophy__details li {
    --detail-ring-gradient: linear-gradient(135deg, #c594e6, #80d9f7);
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    padding: 24.5px 0 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  .philosophy__details li:nth-child(2) {
    --detail-ring-gradient: linear-gradient(90deg, #b9df7a, #f3c86d);
  }

  .philosophy__details li:nth-child(3) {
    --detail-ring-gradient: linear-gradient(90deg, #f48c9f, #f5bd6c);
  }

  .philosophy__details li::before {
    content: "";
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
    width: 56px;
    height: 56px;
    padding: 3px;
    border-radius: 50%;
    background: var(--detail-ring-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .philosophy__details li:first-child::before {
    transform: translateY(3.5px);
  }

  .philosophy__details p {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: -1px;
    margin-top: -6.5px;
    transform: none;
  }

  .philosophy__number {
    display: none;
  }

  .philosophy__detail-icon {
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 56px;
    height: 56px;
    padding: 4px;
    border: 3px solid transparent;
    border-radius: 50%;
    object-fit: contain;
  }

  .philosophy__details li:first-child .philosophy__detail-icon {
    padding: 7.9px;
    transform: translateY(3.5px);
  }

  .philosophy__details li:nth-child(2) .philosophy__detail-icon {
    padding: 4.21px;
    object-position: center calc(50% - 1px);
  }

  .philosophy__details li:nth-child(3) .philosophy__detail-icon {
    padding: 7.36px;
  }

  .related {
    z-index: 1;
    padding-top: 35px;
  }

  .related h2 {
    width: 270px;
    transform: none;
  }

  .related > .message-container > .message-en-label {
    margin-top: 8px;
    line-height: 30px;
  }

  .related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: max-content;
    margin-top: 39px;
    transform: none;
  }

  .related-card {
    height: auto;
    min-height: 243px;
    padding: 27px 25px 23px;
    border-radius: 16px;
  }

  .related-card__accent {
    top: 34px;
    left: 25px;
    width: 4px;
    height: 44px;
  }

  .related-card h3,
  .related-card__en,
  .related-card:nth-child(2) h3,
  .related-card:nth-child(2) .related-card__en,
  .related-card:nth-child(3) h3,
  .related-card:nth-child(3) .related-card__en {
    margin-left: 20px;
  }

  .related-card h3 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 2px;
  }

  .related-card__en {
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
  }

  .related-card > p:not(.related-card__en) {
    width: auto;
    margin-top: 18px;
    font-size: 14px;
    line-height: 28px;
  }

  .related-card:first-child > p:not(.related-card__en) {
    line-height: 28px;
  }

  .related-card__more,
  .related-card:first-child .related-card__more,
  .related-card:nth-child(2) .related-card__more,
  .related-card:nth-child(3) .related-card__more {
    right: 25px;
    bottom: 17px;
    font-size: 16px;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
  .message-portrait {
    left: calc(50% - 216px);
    transform: none;
  }

  .message-copy {
    width: min(600px, calc(100% - 80px));
    margin-inline: auto;
  }

  .message-portrait figcaption {
    right: clamp(0px, calc(155.033px - 15.151vw), 38.669px);
  }

  .message-container {
    width: calc(100% - 80px);
  }

  .related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .related-card:last-child {
    grid-column: 1 / 3;
  }
}

@media (max-width: 360px) {
  .message-header__home {
    left: 18px;
  }

  .message-header__contact {
    right: 12px;
    width: 126px;
    padding-left: 25px;
  }

  .message-story__title {
    left: 12px;
  }

  .message-story__title h1 {
    font-size: 52px;
  }

  .message-portrait {
    top: 152.365px;
    left: -45px;
    width: 387.515px;
    height: 383.634px;
  }

  .message-portrait__image {
    top: 47.027px;
    left: 43.607px;
    width: 309.635px;
    height: 357.276px;
  }

  .message-portrait figcaption {
    top: 334.635px;
    right: 32.515px;
  }

  .message-copy,
  .message-container {
    width: calc(100% - 32px);
    margin-inline: 16px;
  }

  .message-copy h2 {
    font-size: 27px;
  }

  .message-copy__body {
    font-size: 14px;
    line-height: 30px;
  }

  .message-copy__section h3 {
    font-size: 16px;
    line-height: 32px;
  }
}

/* Keep the approved 375px / 1440px layouts while smoothing tablet widths. */
@media (min-width: 376px) and (max-width: 767px) {
  .page-message .message-story__title {
    left: clamp(15px, calc(-8.85px + 6.36vw), 40px);
  }

  .message-portrait {
    left: clamp(-35.626px, calc(-229.876px + 51.8vw), 168px);
  }

  .message-copy {
    width: clamp(335px, 78.125vw, 600px);
    margin-inline: auto;
  }

  .message-container {
    width: calc(100% - clamp(40px, 10.416vw, 80px));
  }

  .page-message .related .related__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(18px, 3vw, 24px);
  }

  .page-message .related .related-card {
    width: 100%;
  }

  .page-message .related .related-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1023px) {
  .message-portrait {
    left: 50%;
    transform: translateX(-51.205%);
  }

  .message-story {
    min-height: 0;
    padding-bottom: clamp(20px, calc(-59.029px + 15.741vw), 102px);
  }

  .message-copy {
    margin-bottom: 0;
  }

  .philosophy {
    padding-top: clamp(120px, calc(161.046px - 4.012vw), 146px);
  }

}

@media (min-width: 768px) and (max-width: 1023px) {
  .message-header__home {
    width: clamp(33px, calc(1.9px + 4.05vw), 43px);
    height: clamp(49px, calc(27.9px + 2.75vw), 56px);
  }

  .message-header__contact {
    width: clamp(138px, calc(41.6px + 12.55vw), 170px);
    height: clamp(41px, calc(-4.2px + 5.88vw), 56px);
    padding-right: clamp(6px, 1.4vw, 14px);
    padding-left: clamp(31px, 4vw, 41px);
    border-radius: clamp(20.7px, 2.75vw, 28px);
    font-size: clamp(12px, calc(3px + 1.18vw), 15px);
  }

  .message-story {
    min-height: 0;
    padding-bottom: clamp(72px, 10vw, 102px);
  }

  .page-message .message-story__title {
    left: clamp(32px, 5.2vw, 54px);
  }

  .message-portrait {
    transform-origin: center top;
  }

  .message-copy {
    width: min(calc(100% - 80px), clamp(600px, 78.125vw, 720px));
    margin-inline: auto;
    padding-top: clamp(547px, calc(327px + 28.65vw), 620px);
  }

  .message-copy h2 {
    font-size: clamp(27px, calc(12px + 1.96vw), 32px);
    line-height: clamp(40px, calc(16px + 3.14vw), 48px);
  }

  .message-copy__body {
    font-size: clamp(14px, calc(11px + .39vw), 15px);
    line-height: clamp(30px, calc(24px + .78vw), 32px);
  }

  .message-copy__section h3 {
    font-size: clamp(18px, calc(12px + .78vw), 20px);
    line-height: clamp(36.4px, calc(25.5px + 1.42vw), 40px);
  }

  .philosophy {
    min-height: 0;
    padding-top: clamp(88px, 12vw, 120px);
    padding-bottom: 0;
  }

  .page-message .philosophy h2,
  .page-message .related h2 {
    font-size: clamp(25px, calc(4px + 2.74vw), 32px);
    line-height: clamp(40px, calc(4px + 4.7vw), 52px);
  }

  .page-message .philosophy__details p {
    font-size: clamp(14px, calc(11px + .39vw), 15px);
  }

  .page-message .related .related__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(18px, 2.35vw, 24px);
  }

  .page-message .related .related-card {
    width: 100%;
    height: clamp(243px, calc(146px + 12.55vw), 275px);
  }

  .page-message .related .related-card:last-child {
    grid-column: 1 / -1;
  }

  .page-message .related-card h3 {
    font-size: clamp(20px, calc(14px + .78vw), 22px);
  }

  .page-message .related-card > p:not(.related-card__en) {
    font-size: clamp(14px, calc(8px + .78vw), 16px);
    line-height: clamp(28px, calc(16px + 1.57vw), 32px);
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .message-story {
    min-height: 0;
    padding-bottom: clamp(96px, 11vw, 132px);
  }

  .page-message .message-story__title {
    left: clamp(40px, 7vw, 84px);
  }

  .message-story__title h1 {
    font-size: clamp(64px, 7vw, 78px);
  }

  .message-portrait {
    top: 280px;
    left: clamp(20px, 3.5vw, 44px);
    transform: scale(.68);
    transform-origin: left top;
  }

  .message-copy {
    width: min(48vw, 515px);
    margin-left: 49%;
    padding-top: 270px;
  }

  .message-copy h2 {
    font-size: clamp(29px, 3vw, 34px);
    line-height: 1.65;
  }

  .philosophy {
    min-height: 0;
    padding-bottom: clamp(96px, 11vw, 132px);
  }

  .philosophy__visual {
    width: min(955.47px, 92vw);
  }

  .philosophy__details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(28px, 5vw, 58px);
    width: 100%;
    margin-left: 0;
  }

  .page-message .related .related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 18px);
    width: 100%;
    justify-content: stretch;
  }

  .page-message .related .related-card {
    width: 100%;
  }

  .page-message .related-card > p:not(.related-card__en) {
    width: calc(100% - 61px);
  }
}

/* Keep the CEO portrait sticky whenever it sits beside the message copy. */
@media (min-width: 1024px) {
  .philosophy__visual-title {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all;
  }

  .page-message .message-story__title {
    top: clamp(88.889px, 8.681vw, 125px);
  }

  .message-intro {
    display: grid;
    grid-template-columns:
      minmax(0, clamp(482px, 47.132vw, 678.698px))
      minmax(0, clamp(366.222px, 35.764vw, 515px));
    column-gap: clamp(12px, 1.132vw, 16.302px);
    align-items: stretch;
    width: min(1301px, calc(100% - (2 * var(--page-inline-gutter, 20px))));
    margin-inline: auto;
    padding-top: clamp(166px, calc(83.324px + 8.073vw), 199.592px);
  }

  .message-intro__portrait-column {
    display: block;
    min-width: 0;
  }

  .message-intro__portrait-sticky {
    position: sticky;
    top: clamp(15px, calc(4.862vw - 35px), 35px);
    display: block;
    height: auto;
  }

  .message-portrait {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, clamp(482px, 47.132vw, 678.698px));
    height: auto;
    aspect-ratio: 678.698 / 671.909;
    transform: none;
  }

  .message-portrait__image {
    top: 8.881%;
    left: 13.337%;
    width: 77.111%;
    height: 82.239%;
  }

  .message-portrait__svg--pc {
    display: block;
  }

  .message-portrait__svg--sp {
    display: none;
  }

  .message-portrait figcaption {
    top: 81.919%;
    right: auto;
    left: 17.386%;
    width: clamp(106px, 10.417vw, 150px);
    text-align: left;
  }

  .message-portrait figcaption span {
    font-size: clamp(13px, .972vw, 14px);
    line-height: clamp(28px, 2.222vw, 32px);
  }

  .message-portrait figcaption strong {
    font-size: clamp(16px, 1.389vw, 20px);
    line-height: clamp(30px, 2.5vw, 36px);
  }

  .message-copy {
    width: 100%;
    margin-top: clamp(60px, 5.514vw, 79.408px);
    margin-left: 0;
    padding-top: 0;
    /* 最後の文章が写真の下端を通過してから、写真の固定を解除する。 */
    padding-bottom: clamp(140px, 14vw, 200px);
  }
}

/* CEO portrait and its liquid canvas scale continuously inside each layout mode. */
@media (max-width: 767px) {
  .message-portrait {
    width: clamp(387.515px, calc(10.658vw + 347.548px), 429.295px);
    height: auto;
    aspect-ratio: 387.515 / 383.634;
  }

  .message-portrait__image {
    top: 11.6%;
    left: 3%;
    width: 96%;
    height: 112%;
  }

  .message-portrait figcaption {
    top: calc(100% + 20px);
  }

  .message-copy {
    padding-top: 622px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .message-portrait {
    top: clamp(163.223px, calc(157.2px + .784vw), 165.223px);
    width: clamp(429.295px, calc(20.668vw + 270.55px), 482px);
    height: auto;
    aspect-ratio: 429.295 / 425;
  }

  .message-copy {
    padding-top: clamp(622px, calc(450.376px + 22.353vw), 679px);
  }

  .message-portrait__image {
    top: 12.258%;
    left: 11.252%;
    width: 79.906%;
    height: 93.13%;
  }
}

@media (min-width: 376px) and (max-width: 767px) {
  .message-portrait {
    top: clamp(147.223px, calc(131.876px + 4.082vw), 163.223px);
  }

  .message-copy {
    padding-top: clamp(622px, calc(564.602px + 15.306vw), 682px);
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .philosophy {
    padding-top: clamp(146.755px, calc(49.77px + 9.471vw), 171px);
  }

  .philosophy__visual {
    width: clamp(820px, calc(278.16px + 52.918vw), 955.47px);
    height: auto;
    margin-top: clamp(56.765px, calc(19.26px + 3.663vw), 66.141px);
    aspect-ratio: 955.47 / 354.255;
  }

  .philosophy__rings-base,
  .philosophy__rings {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .philosophy__icon,
  .philosophy__visual-title {
    transform: none;
  }

  .philosophy__icon--service {
    top: 19.334%;
    left: 13.329%;
    width: 10.378%;
    height: 35.298%;
  }

  .philosophy__icon--communication {
    top: 24.288%;
    left: 42.984%;
    width: 14.05%;
    height: 25.389%;
  }

  .philosophy__icon--people {
    top: 19.137%;
    right: 12.294%;
    width: 12.805%;
    height: 30.539%;
  }

  .philosophy__visual-title {
    font-size: clamp(17.164px, calc(5.82px + 1.108vw), 20px);
    line-height: clamp(25.746px, calc(8.73px + 1.662vw), 30px);
    letter-spacing: clamp(1.716px, calc(.58px + .111vw), 2px);
  }

  .philosophy__visual-title--service {
    top: 60.237%;
    left: 8.261%;
    width: 20.514%;
  }

  .philosophy__visual-title--communication {
    top: 56.292%;
    left: 40.149%;
    width: 20.514%;
  }

  .philosophy__visual-title--people {
    top: 56.292%;
    right: 8.631%;
    width: 18.211%;
  }

  .philosophy__details {
    grid-template-columns: repeat(3, clamp(214.29px, calc(72.66px + 13.832vw), 249.7px));
    column-gap: clamp(51.371px, calc(17.43px + 3.315vw), 59.857px);
    width: max-content;
    margin-top: clamp(36.538px, calc(12.4px + 2.357vw), 42.573px);
    margin-right: auto;
    margin-left: auto;
    transform: translateX(clamp(5.42px, calc(1.84px + .35vw), 6.315px));
  }

  .page-message .philosophy__details p {
    font-size: clamp(12.873px, calc(4.365px + .831vw), 15px);
    line-height: clamp(25.746px, calc(8.73px + 1.662vw), 30px);
  }
}

@media (min-width: 1440px) {
  .philosophy__details {
    width: max-content;
    margin-right: auto;
    margin-left: auto;
    transform: translateX(6.315px);
  }
}

/* OUR PHILOSOPHY details: keep the SP layout fluid through the tablet range. */
@media (min-width: 376px) and (max-width: 1023px) {
  .philosophy__details {
    margin-top: clamp(207.5px, calc(177.118px + 8.102vw), 260px);
  }

  .philosophy__details li {
    grid-template-columns:
      clamp(88px, calc(67.167px + 5.556vw), 124px)
      minmax(0, 1fr);
    padding-top: clamp(24.5px, calc(17.844px + 1.775vw), 36px);
    padding-bottom: clamp(16px, calc(11.37px + 1.235vw), 24px);
  }

  .philosophy__details li::before,
  .philosophy__detail-icon {
    width: clamp(56px, calc(44.426px + 3.086vw), 76px);
    height: clamp(56px, calc(44.426px + 3.086vw), 76px);
  }

  .philosophy__details li::before {
    padding: clamp(3px, calc(2.421px + 0.154vw), 4px);
  }

  .philosophy__details li:first-child::before,
  .philosophy__detail-icon:first-child {
    transform: translateY(clamp(3.5px, calc(2.632px + 0.232vw), 5px));
  }

  .philosophy__detail-icon {
    padding: clamp(4px, calc(3.132px + 0.231vw), 5.5px);
  }

  .philosophy__details li:first-child .philosophy__detail-icon {
    padding: clamp(7.9px, calc(6.395px + 0.401vw), 10.5px);
  }

  .philosophy__details li:nth-child(2) .philosophy__detail-icon {
    padding: clamp(4.21px, calc(3.348px + 0.23vw), 5.7px);
  }

  .philosophy__details li:nth-child(3) .philosophy__detail-icon {
    padding: clamp(7.36px, calc(5.948px + 0.377vw), 9.8px);
  }

  .philosophy__details p,
  .page-message .philosophy__details p {
    font-size: clamp(14px, calc(13.421px + 0.154vw), 15px);
    line-height: clamp(30px, calc(28.843px + 0.309vw), 32px);
    letter-spacing: clamp(-1px, calc(-1.579px + 0.154vw), 0px);
    margin-top: clamp(-6.5px, calc(-10.262px + 1.003vw), 0px);
    transform: none;
  }
}

/* Use the shared 45px right-gap breakpoint instead of a viewport breakpoint. */
.page-message .philosophy h2[data-responsive-title-break],
.page-message .related h2[data-responsive-title-break] {
  width: fit-content;
  max-width: 100%;
}

.page-message .philosophy h2.is-responsive-title-wrapped .section-title-group__responsive-line,
.page-message .related h2.is-responsive-title-wrapped .section-title-group__responsive-line {
  display: block;
}

/* 更新した図内見出しを円の内側に収める。 */
@media(min-width:1024px){
  .philosophy__visual-title--service,
  .philosophy__visual-title--people{letter-spacing:1.5px}
}