@charset "utf-8";
.p-catch { margin-bottom: 1.6rem; font-size: 2.6rem; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
@media print, screen and (min-width: 768px) {
  .p-catch { font-size: 3.6rem; }
}
.p-story .p-story-em { margin: 2.4rem 0; padding: 2.4rem 0; border-top: .1rem solid rgb(var(--c-ink-rgb) / .9); border-bottom: .1rem solid rgb(var(--c-ink-rgb) / .2); font-size: 2.2rem; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
@media print, screen and (min-width: 768px) {
  .p-story .p-story-em { margin: 4rem 0; padding: 3.2rem 0; font-size: 3rem; }
}
.p-values .s-card h3 { font-size: 2.4rem; }
@media print, screen and (min-width: 768px) {
  .p-values .s-card h3 { font-size: 3rem; }
}
.p-mv { display: grid; gap: 5rem; }
.p-mv-item { padding-top: 3.2rem; border-top: .1rem solid rgb(var(--c-ink-rgb) / .9); }
.p-mv-item h3 { margin-bottom: 2rem; font-size: 2.1rem; font-weight: 700; line-height: 1.55; letter-spacing: .04em; }
.p-mv-item > p:last-child { font-size: 1.5rem; line-height: 2; letter-spacing: .02em; }
@media print, screen and (min-width: 768px) {
  .p-mv { gap: 6rem; }
  .p-mv-item h3 { font-size: 2.8rem; }
  .p-mv-item > p:last-child { font-size: 1.6rem; }
}
@media print, screen and (min-width: 1024px) {
  .p-mv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.p-guide { margin-top: 10rem; }
.p-guide > .s-h3 { margin-bottom: 3rem; }
@media print, screen and (min-width: 768px) {
  .p-guide { margin-top: 13rem; }
  .p-guide > .s-h3 { margin-bottom: 4rem; }
}
@media print, screen and (min-width: 1024px) {
  .p-guide .s-steps.s-row { gap: 2.4rem; }
  .p-guide .s-steps.s-row h3 { font-size: 1.7rem; }
}
.p-quality-lead { margin-bottom: 4rem; }
.p-msg-catch { margin-bottom: 3.2rem; font-size: 2.2rem; font-weight: 700; line-height: 1.65; letter-spacing: .04em; }
.p-msg-sign { display: flex; align-items: baseline; gap: 1.6rem; margin-top: 4rem; padding-top: 2.4rem; border-top: .1rem solid rgb(var(--c-ink-rgb) / .2); font-size: 2rem; font-weight: 700; letter-spacing: .08em; }
.p-msg-role { color: rgb(var(--c-accent-rgb)); font-family: var(--font-en); font-size: 1.4rem; font-weight: 600; letter-spacing: .06em; }
@media print, screen and (min-width: 768px) {
  .p-msg-catch { font-size: 2.8rem; }
  .p-msg-sign { font-size: 2.2rem; }
}
.p-future-em { margin-bottom: 2.8rem; font-size: 2.2rem; font-weight: 700; line-height: 1.6; letter-spacing: .04em; }
@media print, screen and (min-width: 768px) {
  .p-future-em { font-size: 2.8rem; }
}
.p-cta .s-wrap { padding: 6rem 0; border-top: .1rem solid rgb(var(--c-ink-rgb) / .9); border-bottom: .1rem solid rgb(var(--c-ink-rgb) / .9); }
.p-cta-ttl { font-size: 2.6rem; font-weight: 700; line-height: 1.55; letter-spacing: .04em; }
.p-cta .s-actions { margin-top: 4rem; }
@media print, screen and (min-width: 768px) {
  .p-cta .s-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem 6rem; padding: 6rem 0; }
  .p-cta .t-label { grid-column: 1 / -1; margin-bottom: 0; }
  .p-cta-ttl { font-size: 3.6rem; }
  .p-cta .s-actions { margin-top: 0; }
}
.p-msg-ph { width: 62%; max-width: 28rem; margin: 3.2rem 0 4.8rem; overflow: hidden; border: .1rem solid rgb(var(--c-ink-rgb) / .2); border-radius: 10px; }
.p-msg-ph img { display: block; width: 100%; height: auto; }
@media print, screen and (min-width: 768px) {
  .p-msg-side { position: sticky; top: 12rem; }
  .p-msg-side .t-ttl { position: static; }
  .p-msg-ph { width: 100%; max-width: 30rem; margin: 4.8rem 0 0; }
}
.s-gray + .s-sec:not(.s-gray):not(.s-sumi), .s-sumi + .s-sec:not(.s-gray):not(.s-sumi) { padding-top: 8rem; }
@media print, screen and (min-width: 768px) {
  .s-gray + .s-sec:not(.s-gray):not(.s-sumi), .s-sumi + .s-sec:not(.s-gray):not(.s-sumi) { padding-top: 13rem; }
}
@media screen and (max-width: 767px) {
  .t-ttl .t-lat.p-lat-s { font-size: 4.4rem; }
}
@media print, screen and (min-width: 1024px) {
  #ceo-message .s-split {
    grid-template-columns: 36rem minmax(0, 1fr);
    align-items: center;
    gap: 0 8rem;
  }
  #ceo-message .p-msg-side {
    display: contents;
  }
  #ceo-message .p-msg-side .t-ttl {
    grid-column: 1 / -1;
    margin-bottom: 6rem;
  }
  #ceo-message .p-msg-ph {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  #ceo-message .p-msg {
    grid-column: 2;
  }
}
#company .p-co-new { display: none; }
#company .p-co-new {
  display: block;
}
#company .p-co-links {
  margin-top: 5.6rem;
}
#company .p-co-links-h {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
#company .p-co-links-h .t-lat {
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .6;
}
#company .p-co-links-h .t-ja {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
}
#company .p-co-card {
  display: flex;
  text-decoration: none;
  color: inherit;
}
#company .p-co-name {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: .02em;
}
#company .p-co-desc {
  font-size: 1.3rem;
  line-height: 1.7;
  letter-spacing: .02em;
  opacity: .7;
}
#company .is-soon .p-co-name {
  opacity: .55;
}
#company .is-here {
  display: none;
}
#company .p-co-links ul {
  border-top: .1rem solid rgb(var(--c-ink-rgb) / .2);
}
#company .p-co-links li {
  border-bottom: .1rem solid rgb(var(--c-ink-rgb) / .2);
}
#company .p-co-card {
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.6rem;
  padding: 2rem 3.2rem 2rem 0;
  position: relative;
}
#company .p-co-name {
  font-size: 1.8rem;
}
#company a.p-co-card::after {
  content: "↗";
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  transition: transform .3s;
}
#company a.p-co-card:hover::after {
  transform: translate(.3rem, calc(-50% - .3rem));
}
#company a.p-co-card:hover .p-co-name {
  text-decoration: underline;
  text-underline-offset: .3em;
}
@media print, screen and (min-width: 1024px) {
  #company .s-dl > div { grid-template-columns: 12rem minmax(0, 1fr); }
}
#philosophy {
  padding-top: 8rem;
  color: rgb(255 255 255);
  background: rgb(var(--c-sumi-rgb));
}
#philosophy .t-ttl .t-ja {
  color: rgb(255 255 255 / .85);
}
#philosophy .p-mv {
  gap: 0;
  border-bottom: .1rem solid rgb(255 255 255 / .25);
}
#philosophy .p-mv-item {
  padding: 3.6rem 0 4rem;
  border-top-color: rgb(255 255 255 / .25);
}
#philosophy .p-mv-item .t-label {
  margin-bottom: 2rem;
}
#philosophy .p-mv-item .t-label .t-lat {
  color: rgb(var(--c-ondark-rgb));
  letter-spacing: .12em;
}
#philosophy .p-mv-item h3 {
  margin-bottom: 2rem;
  color: rgb(255 255 255);
}
#philosophy .p-mv-item > p:last-child {
  color: rgb(255 255 255 / .72);
}
#philosophy .p-guide {
  margin-top: 8rem;
}
#philosophy .p-guide > .s-h3 {
  color: rgb(255 255 255);
}
#philosophy .p-guide .s-steps > li {
  padding-left: 8rem;
  border-color: rgb(255 255 255 / .25);
}
#philosophy .p-guide .s-steps .t-no {
  top: 2.2rem;
  color: transparent;
  -webkit-text-stroke: .1rem rgb(255 255 255 / .9);
  font-size: 4.4rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
#philosophy .p-guide .s-steps h3 {
  color: rgb(255 255 255);
}
#philosophy .p-guide .s-steps p {
  color: rgb(255 255 255 / .72);
}
@media (max-width: 767px) {
  #philosophy .p-guide .s-steps > li {
    padding-left: 6.4rem;
  }
  #philosophy .p-guide .s-steps .t-no {
    top: 2.4rem;
    font-size: 3.6rem;
  }
  #philosophy .p-guide .s-steps h3 {
    font-size: 1.7rem;
  }
}
@media print, screen and (min-width: 768px) {
  #philosophy {
    padding-top: 13rem;
  }
  #philosophy .p-mv-item {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 0 4rem;
    padding: 5.6rem 0 6rem;
  }
  #philosophy .p-mv-item .t-label {
    grid-row: 1 / span 2;
    margin: 1.2rem 0 0;
  }
  #philosophy .p-mv-item h3 {
    margin-bottom: 2.4rem;
    font-size: 3.4rem;
    line-height: 1.5;
  }
  #philosophy .p-mv-item > p:last-child {
    max-width: 64rem;
  }
  #philosophy .p-guide {
    margin-top: 11rem;
  }
}
@media print, screen and (min-width: 1024px) {
  #philosophy .p-mv {
    grid-template-columns: minmax(0, 1fr);
  }
  #philosophy .p-mv-item {
    grid-template-columns: 24rem minmax(0, 1fr);
  }
  #philosophy .p-mv-item h3 {
    font-size: 4.4rem;
    letter-spacing: .03em;
  }
  #philosophy .p-guide .s-steps.s-row {
    gap: 0;
  }
  #philosophy .p-guide .s-steps.s-row > li {
    padding: .4rem 2.4rem 1.2rem;
    border-top: 0;
    border-left: .1rem solid rgb(255 255 255 / .25);
  }
  #philosophy .p-guide .s-steps.s-row > li:last-child {
    border-right: .1rem solid rgb(255 255 255 / .25);
  }
  #philosophy .p-guide .s-steps.s-row .t-no {
    margin-bottom: 3.2rem;
    font-size: 7.2rem;
    line-height: .9;
  }
  #philosophy .p-guide .s-steps.s-row h3 {
    min-height: 5.4rem;
    font-size: 1.7rem;
  }
}
#story {
  margin: 2.4rem 0 8rem;
  padding: 8rem 0 9rem;
  overflow: hidden;
  background: rgb(var(--c-sumi-rgb));
  color: rgb(255 255 255);
}
#story .s-split {
  display: block;
}
#story .t-ttl {
  position: static;
  margin-bottom: 5.6rem;
}
#story .t-ttl .t-lat {
  margin: 0 0 2rem -.04em;
  color: transparent;
  font-size: 8.4rem;
  line-height: .82;
  letter-spacing: -.02em;
  -webkit-text-stroke: .15rem rgb(var(--c-ondark-rgb) / .85);
}
#story .t-ttl .t-ja {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: rgb(var(--c-ondark-rgb));
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .08em;
}
#story .t-ttl .t-ja::before {
  content: "";
  flex: none;
  width: 3.2rem;
  height: .1rem;
  background: currentColor;
}
#story .p-story {
  color: rgb(255 255 255 / .78);
  font-size: 1.5rem;
}
#story .p-story > p + p {
  margin-top: 1.6rem;
}
#story .p-story .p-story-em {
  margin: 4.8rem 0;
  padding: 4rem 0 0;
  border: 0;
  border-top: .1rem solid rgb(255 255 255 / .9);
  color: rgb(255 255 255);
  font-size: 2.5rem;
  line-height: 1.45;
  letter-spacing: .02em;
  text-wrap: balance;
}
#story .p-story > p:last-child {
  padding-top: 2.4rem;
  border-top: .1rem solid rgb(var(--c-ondark-rgb) / .35);
  color: rgb(255 255 255 / .9);
}
@media print, screen and (min-width: 768px) {
  #story {
    margin: 4rem 0 13rem;
    padding: 12rem 0 13rem;
  }
  #story .t-ttl {
    margin-bottom: 8rem;
  }
  #story .t-ttl .t-lat {
    margin-bottom: 2.8rem;
    font-size: 19rem;
  }
  #story .t-ttl .t-ja {
    font-size: 1.6rem;
  }
  #story .p-story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 6rem;
    font-size: 1.6rem;
  }
  #story .p-story > p + p {
    margin-top: 0;
  }
  #story .p-story .p-story-em {
    grid-column: 1 / -1;
    margin: 8rem 0 6.4rem;
    padding-top: 5.6rem;
    font-size: 5.6rem;
    line-height: 1.35;
  }
  #story .p-story > p:last-child {
    grid-column: 2;
    padding-top: 3.2rem;
    font-size: 1.8rem;
    font-weight: 700;
  }
}
@media print, screen and (min-width: 1024px) {
  #story .t-ttl .t-lat {
    font-size: 24rem;
  }
  #story .p-story {
    gap: 0 8rem;
  }
  #story .p-story .p-story-em {
    font-size: 6.4rem;
  }
}
@media print, screen and (min-width: 768px) {
  #story .p-story > p:not(.p-story-em):not(:last-child) {
    grid-column: 1 / -1;
  }
  #story .p-story > p:not(.p-story-em):not(:last-child) + p:not(.p-story-em):not(:last-child) {
    margin-top: 1.2rem;
  }
}
@media print, screen and (min-width: 768px) {
  #quality .s-split .t-ttl {
    position: static;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #philosophy .p-mv-item h3 {
    font-size: 3rem;
  }
}
#quality .s-dl {
  counter-reset: abtq;
  border-top: 0;
}
#quality .s-dl > div {
  position: relative;
  padding: 2.4rem 0 2.4rem 6.4rem;
  border-bottom: .1rem solid rgb(var(--c-ink-rgb) / .2);
  counter-increment: abtq;
}
#quality .s-dl > div::before {
  content: counter(abtq, decimal-leading-zero);
  position: absolute;
  top: 2.2rem;
  left: 0;
  font-family: var(--font-en);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
#quality .s-dl dt {
  font-size: 1.6rem;
}
@media print, screen and (min-width: 768px) {
  #quality .s-split {
    display: block;
  }
  #quality .s-split .t-ttl {
    margin-bottom: 4.8rem;
  }
  #quality .p-quality-lead {
    max-width: 82rem; 
    margin-bottom: 6.4rem;
  }
  #quality .s-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4rem;
  }
  #quality .s-dl > div {
    display: block;
    padding: 3.2rem 0 3.2rem 6.4rem;
  }
  #quality .s-dl dt {
    margin-bottom: .8rem;
  }
}
@media print, screen and (min-width: 1024px) {
  #quality .s-dl {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 3.2rem;
  }
  #quality .s-dl > div {
    padding: 3.2rem 0 0;
    border-top: .2rem solid rgb(var(--c-ink-rgb) / .9);
    border-bottom: 0;
  }
  #quality .s-dl > div::before {
    position: static;
    display: block;
    margin-bottom: 2.8rem;
    font-size: 5.6rem;
    line-height: .9;
  }
  #quality .s-dl > div:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 3.6rem;
    right: -.4rem;
    color: rgb(var(--c-accent-rgb));
    font-family: var(--font-en);
    font-size: 2.4rem;
    line-height: 1;
  }
  #quality .s-dl dt {
    min-height: 5.6rem;
    margin-bottom: 1.2rem;
    font-size: 1.7rem;
    line-height: 1.6;
  }
  #quality .s-dl dd {
    font-size: 1.4rem;
    line-height: 1.9;
  }
}
#philosophy .p-guide .s-steps > li {
  padding: 3.2rem 0;
}
#philosophy .p-guide .s-steps .t-no {
  position: static;
  display: block;
  margin-bottom: 1.6rem;
  font-size: 5.6rem;
  line-height: .9;
}
#philosophy .p-guide .s-steps h3 {
  font-size: 2rem;
}
@media print, screen and (min-width: 768px) {
  #philosophy .p-guide .s-steps.s-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  #philosophy .p-guide .s-steps.s-row > li {
    display: grid;
    grid-template-columns: 11rem 26rem minmax(0, 1fr);
    align-items: center;
    gap: 0 3.2rem;
    padding: 3.6rem 0;
    border: 0;
    border-top: .1rem solid rgb(255 255 255 / .25);
  }
  #philosophy .p-guide .s-steps.s-row > li:last-child {
    border-right: 0;
    border-bottom: .1rem solid rgb(255 255 255 / .25);
  }
  #philosophy .p-guide .s-steps.s-row .t-no {
    margin: 0;
    font-size: 6.4rem;
    line-height: .9;
  }
  #philosophy .p-guide .s-steps.s-row h3 {
    min-height: 0;
    margin: 0;
    font-size: 2.2rem;
    line-height: 1.5;
  }
  #philosophy .p-guide .s-steps.s-row p {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 1024px) {
  #philosophy .p-guide .s-steps.s-row > li {
    grid-template-columns: 16rem 38rem minmax(0, 1fr);
    gap: 0 4rem;
  }
  #philosophy .p-guide .s-steps.s-row .t-no {
    font-size: 8rem;
  }
  #philosophy .p-guide .s-steps.s-row h3 {
    font-size: 2.6rem;
  }
}
@media print, screen and (min-width: 1024px) {
  #quality .s-dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4.8rem 3.2rem;
  }
  #quality .s-dl > div:nth-child(3)::after {
    content: none;
  }
  #quality .s-dl dt {
    min-height: 0;
    white-space: nowrap;
  }
}
@media print, screen and (min-width: 1280px) {
  #quality .s-dl {
    width: min(100vw - 8rem, 152rem);
    margin-left: calc(50% - min(50vw - 4rem, 76rem));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 2.4rem;
  }
  #quality .s-dl > div:nth-child(3)::after {
    content: "→";
  }
  #quality .s-dl dt {
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 1440px) {
  #quality .s-dl dt {
    font-size: 1.7rem;
  }
}
#story .p-story .p-story-em { padding-top: 0; border-top: 0; }
@media print, screen and (min-width: 768px) {
  #story .p-story .p-story-em { padding-top: 0; }
}
#story { margin-bottom: 0; padding-bottom: 0; }
@media print, screen and (min-width: 768px) {
  #story { margin-bottom: 0; padding-bottom: 0; }
}
#company .p-co-links ul {
  display: grid;
  gap: 1.6rem;
  border-top: 0;
}
#company .p-co-links li {
  border-bottom: 0;
}
#company .p-co-links li.is-here {
  display: none;
}
#company .p-co-card {
  box-sizing: border-box;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: .8rem;
  height: 100%;
  min-height: 16rem;
  padding: 2.8rem 2.8rem 8rem;
  border: .1rem solid rgb(var(--c-ink-rgb) / .25);
  transition: background-color .3s, color .3s, border-color .3s;
}
#company .p-co-name {
  font-size: 2.2rem;
  line-height: 1.4;
}
#company a.p-co-card::after {
  top: auto;
  right: 2.4rem;
  bottom: 2.4rem;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: .1rem solid currentColor;
  border-radius: 50%;
  font-size: 1.6rem;
  transform: none;
}
#company a.p-co-card:hover {
  border-color: rgb(var(--c-sumi-rgb));
  background: rgb(var(--c-sumi-rgb));
  color: rgb(255 255 255);
}
#company a.p-co-card:hover::after {
  transform: none;
}
#company a.p-co-card:hover .p-co-name {
  text-decoration: none;
}
@media print, screen and (min-width: 768px) {
  #company .p-co-links ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
  }
  #company .p-co-card {
    min-height: 20rem;
    padding: 3.2rem 3.2rem 9rem;
  }
  #company .p-co-name {
    font-size: 2.6rem;
  }
  #company a.p-co-card::after {
    right: 3.2rem;
    bottom: 3.2rem;
    width: 5.2rem;
    height: 5.2rem;
  }
}
#story .p-story .p-story-em { margin-bottom: 2.4rem; }
#story .p-story > p:last-child {
  padding-top: 0;
  border-top: 0;
  color: rgb(255 255 255);
  font-size: 1.7rem;
  font-weight: 700;
}
@media print, screen and (min-width: 768px) {
  #story .p-story .p-story-em { margin-bottom: 3.2rem; }
  #story .p-story > p:last-child {
    grid-column: 1 / -1;
    padding-top: 0;
    font-size: 2.2rem;
  }
}
#company .p-co-name.is-ja { font-size: 1.8rem; font-weight: 600; letter-spacing: .02em; }
@media print, screen and (min-width: 768px) {
  #company .p-co-name.is-ja { font-size: 1.8rem; }
}
#company .p-co-card { min-height: 0; justify-content: center; gap: .4rem; padding: 2rem 6.4rem 2rem 2.2rem; }
#company .p-co-name { font-size: 1.9rem; }
#company .p-co-name.is-ja { font-size: 1.6rem; }
#company a.p-co-card::after,
#company a.p-co-card:hover::after { top: 50%; bottom: auto; right: 2rem; width: 3.2rem; height: 3.2rem; font-size: 1.3rem; transform: translateY(-50%); }
@media print, screen and (min-width: 768px) {
  #company .p-co-card { min-height: 10rem; padding: 2.4rem 6.8rem 2.4rem 2.8rem; }
  #company .p-co-name { font-size: 2.1rem; }
  #company .p-co-name.is-ja { font-size: 1.6rem; }
  #company a.p-co-card::after,
  #company a.p-co-card:hover::after { right: 2.4rem; width: 3.6rem; height: 3.6rem; }
}
#company .p-co-name { font-size: 1.6rem; }
@media print, screen and (min-width: 768px) {
  #company .p-co-name { font-size: 1.6rem; }
}