@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;300;400;500;700;900&display=swap");
@font-face {
  font-family: "POP";
  src: url(./assets/font/851麻花POP体.ttf) format("truetype");
}
@font-face {
  font-family: "PingFang SC";
  src: url(./assets/font/PingFang\ SC.ttf);
}
@font-face {
  font-family: "PingFang HK";
  src: url(./assets/font/PingFang\ HK.ttf);
}
*::before, *::after {
  position: absolute;
  content: "";
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--black);
  scroll-behavior: smooth;
}

input[type=number] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}

img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 800px) {
  :root {
    font-size: 14px;
  }
}
dt, .spe-dd {
  cursor: pointer;
}

span.nowrap {
  white-space: nowrap;
}

body {
  overflow-x: hidden;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}
body#homepage {
  margin-top: -60rem;
}

input:-internal-autofill-selected {
  background: none !important;
}

a {
  text-decoration: none;
}

h1 {
  font-weight: 700;
}

.no-scroll {
  overflow: hidden;
}

#homepage section:not(.header):not(.footer):not(.groups) {
  height: auto;
  padding-left: var(--body-pad);
  padding-right: var(--body-pad);
}

#homepage section:not(.hero):not(.header):not(.footer):not(.groups) {
  background: rgba(255, 255, 255, 0.7);
}

.title {
  width: 85%;
  margin: 6vw auto;
  position: relative;
}
.title h1 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 400;
  z-index: 2;
}
.title h4 {
  font-size: 1.2rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.25);
}
.title::after {
  content: "Building the future with you";
  z-index: -1;
  font-weight: 700;
  font-size: 4.5rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--purple1);
  opacity: 0.25;
  left: -10vw;
  top: -3.5rem;
  letter-spacing: 0;
}

:root {
  --black: hsl(0, 0%, 20%);
  --black-hsl: 0% 0% 20%;
  --blue1: hsl(215, 100%, 30%);
  --blue1-hsl: 215 100% 30%;
  --blue2: hsl(222, 58%, 49%);
  --blue2-hsl: 222 58% 49%;
  --blue3: hsl(219, 74%, 33%);
  --blue3-hsl: 219 74% 33%;
  --blue4: hsl(237, 93%, 66%);
  --blue4-hsl: 237 93% 66%;
  --blue5: hsl(232, 84%, 88%);
  --blue5-hsl: 232 84% 88%;
  --blue6: hsl(211, 100%, 64%);
  --blue8-hsl: 211 100% 64%;
  --blue7: hsl(207, 95%, 37%);
  --blue6-hsl: 207 95% 37%;
  --blue8: hsl(239, 84%, 61%);
  --blue7-hsl: 239 84% 61%;
  --blue9: hsl(235, 77%, 58%);
  --blue8-hsl: 235 77% 58%;
  --green1: hsl(169, 65%, 74%);
  --green1-hsl: 169 65% 74%;
  --green2: hsl(64, 72%, 37%);
  --green2-hsl: 64 72% 37%;
  --red1: hsl(0, 100%, 74%);
  --red1-hsl: 0 100% 74%;
  --red2: hsl(0, 59%, 51%);
  --red2-hsl: 0 59% 51%;
  --grey1: hsl(0, 0%, 80%);
  --grey1-hsl: 0 0% 80%;
  --purple1: hsl(260, 74%, 70%);
  --purple1-hsl: 260 74% 70%;
  --purple2: hsl(293, 47%, 46%);
  --purple2-hsl: 293 47% 46%;
  --purple3: hsl(265, 83%, 71%);
  --purple3-hsl: 265 83% 71%;
  --purple4: hsl(265, 100%, 77%);
  --purple4-hsl: 265 100% 77%;
  --purple5: hsl(260, 88%, 73%);
  --purple5-hsl: 260 88% 73%;
  --purple6: hsl(250, 79%, 87%);
  --purple6-hsl: 250 79% 87%;
  --e-red: hsl(358, 100%, 71%);
  --e-red-hsl: 358 100% 71%;
  --e-green: hsl(167, 56%, 67%);
  --e-green-hsl: 167 56% 67%;
  --e-cyan: hsl(190, 99%, 50%);
  --e-cyan-hsl: 190 99% 50%;
  --e-blue: hsl(211, 100%, 64%);
  --e-blue-hsl: 211 100% 64%;
  --e-purple: hsl(257, 100%, 75%);
  --e-purple-hsl: 257 100% 75%;
  --body-width: min(100vw, 80rem);
  --body-pad: calc((100vw - var(--body-width)) / 2);
  scroll-padding-top: 5rem;
}

.background {
  position: -webkit-sticky;
  position: sticky;
  z-index: -1;
  width: 100%;
  height: 60rem;
  top: 0;
  left: 0;
  overflow: hidden;
}
.background .lines, .background .blob-1, .background .blob-2 {
  z-index: -1;
}
.background #lines-blur .lines .line {
  filter: blur(5px);
}
.background .lines {
  opacity: 0.5;
  position: absolute;
  top: -1rem;
  left: clamp(5rem, 40vw, 60rem);
}
.background .lines .line {
  min-height: calc(100% + 2rem);
  position: absolute;
  --stroke-len: 100%;
  --interval: 0.5s;
  will-change: stroke-dasharray, stroke-dashoffset;
  stroke-dashoffset: calc(-1 * var(--stroke-len));
  stroke-dasharray: var(--stroke-len);
  -webkit-animation: draw calc(var(--interval) * 10) linear infinite;
          animation: draw calc(var(--interval) * 10) linear infinite;
}
.background .lines .line:nth-child(1) {
  -webkit-animation-delay: calc(var(--interval) * 0);
          animation-delay: calc(var(--interval) * 0);
}
.background .lines .line:nth-child(3) {
  -webkit-animation-delay: calc(var(--interval) * 1);
          animation-delay: calc(var(--interval) * 1);
}
.background .lines .line:nth-child(5) {
  -webkit-animation-delay: calc(var(--interval) * 2);
          animation-delay: calc(var(--interval) * 2);
}
.background .lines .line:nth-child(7) {
  -webkit-animation-delay: calc(var(--interval) * 3);
          animation-delay: calc(var(--interval) * 3);
}
.background .lines .line:nth-child(9) {
  -webkit-animation-delay: calc(var(--interval) * 4);
          animation-delay: calc(var(--interval) * 4);
}
.background .lines .line:nth-child(11) {
  -webkit-animation-delay: calc(var(--interval) * 5);
          animation-delay: calc(var(--interval) * 5);
}
.background .lines .line:nth-child(13) {
  -webkit-animation-delay: calc(var(--interval) * 6);
          animation-delay: calc(var(--interval) * 6);
}
.background .lines .line:nth-child(15) {
  -webkit-animation-delay: calc(var(--interval) * 7);
          animation-delay: calc(var(--interval) * 7);
}
.background .lines .line:nth-child(17) {
  -webkit-animation-delay: calc(var(--interval) * 8);
          animation-delay: calc(var(--interval) * 8);
}
.background .lines .line:nth-child(19) {
  -webkit-animation-delay: calc(var(--interval) * 9);
          animation-delay: calc(var(--interval) * 9);
}
.background .lines .line:nth-child(21) {
  -webkit-animation-delay: calc(var(--interval) * 10);
          animation-delay: calc(var(--interval) * 10);
}
.background .lines .line:nth-child(23) {
  -webkit-animation-delay: calc(var(--interval) * 11);
          animation-delay: calc(var(--interval) * 11);
}
@-webkit-keyframes draw {
  0% {
    stroke-dashoffset: calc(-1 * var(--stroke-len));
  }
  100% {
    stroke-dashoffset: var(--stroke-len);
  }
}
@keyframes draw {
  0% {
    stroke-dashoffset: calc(-1 * var(--stroke-len));
  }
  100% {
    stroke-dashoffset: var(--stroke-len);
  }
}
.background .blob-1, .background .blob-2 {
  position: absolute;
}
.background .blob-1 {
  --blob-size: clamp(40rem, 65vw, 55rem);
  bottom: 2.5em;
  left: calc(-5rem - 5vw);
  width: var(--blob-size);
  height: var(--blob-size);
  border-radius: 40% 50% 40% 45%/60% 70% 50% 60%;
  transform: rotate(-150deg);
  box-shadow: inset 0 0 8em 3em #fff;
  filter: contrast(150%) blur(0.25px);
  opacity: 0.75;
  background: linear-gradient(217deg, hsl(var(--e-blue-hsl)/0.75), transparent 70.71%), linear-gradient(127deg, hsl(var(--e-purple-hsl)/0.5), transparent 70.71%), linear-gradient(336deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.5) 70.7%), center/5em url("https://ph-test-11.slatic.net/p/b78a7b693d3cbbddea49601906bf0c0c.png");
  /* linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); */
  /* center / 150% url(https://grainy-gradients.vercel.app/noise.svg); */
}
.background .blob-2 {
  --blob-size: clamp(40rem, 80vw, 50rem);
  top: -20em;
  right: -40em;
  width: calc(var(--blob-size) * 2);
  height: var(--blob-size);
  border-radius: 40% 50% 40% 45%/60% 70% 50% 60%;
  transform: rotate(20deg);
  box-shadow: inset 0 0 8em 3em #fff;
  filter: contrast(150%) blur(0.25px);
  opacity: 0.75;
  background: linear-gradient(217deg, hsl(var(--e-blue-hsl)/0.75), transparent 70.71%), linear-gradient(127deg, hsl(var(--e-purple-hsl)/0.15), transparent 70.71%), linear-gradient(336deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.5) 70.7%), center/5em url("https://ph-test-11.slatic.net/p/b78a7b693d3cbbddea49601906bf0c0c.png");
}

section.header {
  z-index: 5;
  margin: 0;
  padding: 1rem;
  box-sizing: border-box;
  height: 5rem;
  width: 100%;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  transition: background-color 0.3s;
}
section.header:hover {
  background-color: white;
}
section.header .liufund-logo {
  width: 10rem;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0 0.75rem;
}
section.header #menu-icon {
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--black);
  transition: all 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
section.header #menu-icon .line {
  width: 1.5rem;
  height: 0.1px;
  margin: 0.25rem 0;
  border: 1px solid var(--black);
  background: var(--black);
}

nav#side-nav {
  --nav-pad: clamp(2rem, 8vw, 5rem);
  position: fixed;
  margin: 0 auto;
  z-index: 10;
  background: white;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
  visibility: hidden;
  opacity: 0;
  transform: translateX(3rem);
}
nav#side-nav.open {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}
nav#side-nav #menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--black);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav#side-nav #menu-close .line {
  position: absolute;
  background: var(--black);
  width: 2rem;
  height: 2px;
}
nav#side-nav #menu-close .line:nth-child(1) {
  transform: rotate(45deg);
}
nav#side-nav #menu-close .line:nth-child(2) {
  transform: rotate(-45deg);
}
nav#side-nav .nav-body {
  height: calc(100% - var(--nav-pad) * 3);
  margin: var(--nav-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--nav-pad);
}
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  nav#side-nav .nav-body {
    gap: 0;
  }
  nav#side-nav .nav-body > * {
    display: block;
    margin: calc(var(--nav-pad) / 2);
  }
}
nav#side-nav .nav-body img.liufund-logo {
  width: clamp(6rem, 20vw, 10rem);
}
nav#side-nav .nav-body #side-nav-links {
  flex: 1 1 15rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: calc(100% - var(--nav-pad));
}
nav#side-nav .nav-body #side-nav-links .link-group {
  width: 15rem;
}
nav#side-nav .nav-body #side-nav-links a {
  display: block;
  padding: 0.5rem;
  white-space: nowrap;
  cursor: pointer;
}
nav#side-nav .nav-body #side-nav-links a:hover {
  background: hsl(var(--blue5-hsl)/0.25);
}
nav#side-nav .nav-body #side-nav-links a.link {
  margin-left: 2rem;
}
nav#side-nav .nav-body #side-nav-links a.dir-link {
  font-weight: 700;
  padding: 1rem;
}
nav#side-nav .nav-body #side-nav-links a.dir-link, nav#side-nav .nav-body #side-nav-links a.link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
nav#side-nav .slogan {
  display: block;
  position: absolute;
  right: var(--nav-pad);
  bottom: max(5rem, var(--nav-pad));
  text-align: right;
  font-size: 2rem;
}
nav#side-nav .slogan h3 {
  font-weight: 400;
}
@media (max-width: 950px) {
  nav#side-nav .slogan {
    font-size: 1.5rem;
  }
}
nav#side-nav .copyright {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  letter-spacing: 0;
  font-size: 0.8rem;
  font-family: "Noto Sans JP";
  font-weight: 400;
}

section.footer {
  --link-size: 5rem;
  --gap: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  padding: var(--gap) max(var(--gap), var(--body-pad));
  box-sizing: border-box;
}
section.footer a.liufund-logo {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 var(--gap) calc(var(--gap) * 2) 0;
}
section.footer a.liufund-logo img {
  width: clamp(6rem, 15vw, 10rem);
}
section.footer nav#footer-nav {
  --link-size: 5rem;
  --gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
  min-height: calc(var(--link-size) * 6);
}
section.footer nav#footer-nav .group-title a, section.footer nav#footer-nav .dir-link {
  font-weight: 500;
  font-size: 1.25rem;
}
section.footer nav#footer-nav .group-title a, section.footer nav#footer-nav .dir-link, section.footer nav#footer-nav .link {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-start;
  height: var(--link-size);
  padding: 0 1rem;
}
section.footer nav#footer-nav .group-title span.plus {
  cursor: pointer;
}
section.footer nav#footer-nav .link-group, section.footer nav#footer-nav .dir-link-group {
  border-top: 1px solid var(--black);
}
section.footer nav#footer-nav .dir-link {
  border-bottom: 1px solid var(--black);
}
section.footer nav#footer-nav .group-title a, section.footer nav#footer-nav .group-title span.plus, section.footer nav#footer-nav .links .link, section.footer nav#footer-nav .dir-link {
  cursor: pointer;
}
section.footer nav#footer-nav .group-title a:hover, section.footer nav#footer-nav .group-title span.plus:hover, section.footer nav#footer-nav .links .link:hover, section.footer nav#footer-nav .dir-link:hover {
  background: hsl(var(--blue5-hsl)/0.25);
}
section.footer nav#footer-nav .link-group {
  height: var(--link-size);
}
section.footer nav#footer-nav .link-group .link {
  visibility: hidden;
  transform: translateY(-2rem);
  opacity: 0;
  font-size: 1.15rem;
}
section.footer nav#footer-nav .link-group .group-title {
  display: flex;
}
section.footer nav#footer-nav .link-group .group-title a {
  flex: 1;
}
section.footer nav#footer-nav .link-group .group-title span.plus {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--link-size);
  width: var(--link-size);
}
section.footer nav#footer-nav .link-group .group-title span.plus::after {
  transform: rotate(90deg);
}
section.footer nav#footer-nav .link-group .group-title span.plus::before, section.footer nav#footer-nav .link-group .group-title span.plus::after {
  width: 25%;
  height: 1.25px;
  background: black;
  transition: transform 0.3s;
}
section.footer nav#footer-nav .link-group.open .link {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
  transition: visibility 0.2s, opacity 0.2s, transform 0.2s;
}
section.footer nav#footer-nav .link-group.open .link:nth-child(1) {
  transition-delay: 0.0625s;
}
section.footer nav#footer-nav .link-group.open .link:nth-child(2) {
  transition-delay: 0.125s;
}
section.footer nav#footer-nav .link-group.open .link:nth-child(3) {
  transition-delay: 0.1875s;
}
section.footer nav#footer-nav .link-group.open .link:nth-child(4) {
  transition-delay: 0.25s;
}
section.footer nav#footer-nav .link-group.open .link:nth-child(5) {
  transition-delay: 0.3125s;
}
section.footer nav#footer-nav .link-group.open .group-title span.plus::before {
  transform: rotate(90deg) rotateX(90deg);
}
section.footer nav#footer-nav .link-group.open .group-title span.plus::after {
  transform: rotate(180deg);
}

@media (min-width: 1000px) {
  section.footer {
    --link-size: 3rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: flex-start;
  }
  section.footer nav#footer-nav {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--gap);
  }
  section.footer nav#footer-nav .link-group, section.footer nav#footer-nav .dir-link-group, section.footer nav#footer-nav .dir-link {
    border: none;
  }
  section.footer nav#footer-nav .link-group {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  section.footer nav#footer-nav .link-group .links .link {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
  }
  section.footer nav#footer-nav .link-group .group-title span.plus {
    display: none;
  }
}
.footer-links {
  font-size: 0.9rem;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 2rem max(var(--body-pad), clamp(2rem, 5vw, 5rem));
}
.footer-links :first-child {
  margin-right: auto;
}
.footer-links :not(:first-child) {
  margin-left: 2rem;
}
.footer-links .footer-link {
  position: relative;
  cursor: pointer;
}
.footer-links .footer-link:active {
  color: var(--purple5);
}
.footer-links .footer-link:active::after {
  background: var(--purple5);
}
.footer-links .footer-link::after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.5px;
  background: var(--black);
}

@media (max-width: 600px) {
  .footer-links {
    flex-direction: row-reverse;
    margin-bottom: 3rem;
  }
  .footer-links :not(:first-child) {
    margin-left: 0;
    margin: 1rem 1rem;
  }
  .footer-links .footer-copyright {
    text-align: center;
    width: 100%;
  }
}
section.hero {
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
}
section.hero .hero-content {
  margin: 20rem 5vw 0 5vw;
  gap: 3rem;
}
section.hero .hero-content h1, section.hero .hero-content p {
  max-width: 60rem;
  font-weight: 400;
}
section.hero .hero-content h1 {
  font-size: clamp(2.5rem, 7.5vw, 5rem);
  line-height: 1.25;
}
section.hero .hero-content p {
  font-size: 1.2rem;
  line-height: 2;
  margin-top: 2rem;
}
section.hero i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 5rem 0 0 0;
  font-style: italic;
  font-size: 1rem;
  font-weight: 300;
  position: relative;
  box-sizing: border-box;
}
section.hero i span.arrow {
  box-sizing: border-box;
  padding: 0.5rem;
  display: inline-block;
  width: 2.5rem;
  height: 100%;
  background: hsl(var(--purple1-hsl)/0.1);
}
section.hero i span.arrow img {
  width: 100%;
}
section.hero i span.arrow:last-child {
  transform: scaleX(-1);
}
section.hero i span.newsroll {
  flex: 1;
  padding: 0 0.75rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  transition: font-style 0.5s;
  background: hsl(var(--purple1-hsl)/0.1);
}
section.hero i span.newsroll span {
  margin: 0 1rem 0 0.5rem;
  font-size: 0.9em;
  font-style: normal;
  font-weight: 500;
}
section.hero i span:hover {
  cursor: pointer;
}
section.hero i span.arrow:hover {
  background: hsl(var(--purple1-hsl)/0.25);
}
section.hero i span.newsroll:hover {
  background: hsl(var(--purple1-hsl)/0.25);
}

@media screen and (max-width: 1000px) {
  section.hero .hero-content h1, section.hero .hero-content p {
    width: clamp(20rem, 85vw, 40rem);
  }
}
section.stories {
  padding: 5rem 0;
}
section.stories .story-info {
  position: relative;
}
section.stories .story-info .story-content {
  margin: 5rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
section.stories .story-info .story-content .story-slogan {
  position: relative;
  width: min(80%, 60rem);
  margin-bottom: 1.5rem;
}
section.stories .story-info .story-content .story-slogan::before {
  left: -5%;
  top: -2rem;
  width: 2rem;
  height: 2rem;
  background-image: url(./assets/img/homepage1/left-quotes.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}
section.stories .story-info .story-content .story-slogan img {
  width: 100%;
}
section.stories .story-info .story-content .story-slogan, section.stories .story-info .story-content .story-slogan span {
  font-family: shinryu, sans-serif;
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 4rem);
}
section.stories .story-info .story-content .telling {
  position: relative;
  line-height: 2;
  width: min(90%, 60rem);
}
section.stories .story-info .story-content .telling::after {
  width: 2rem;
  height: 2rem;
  right: 0;
  bottom: -8rem;
  background-image: url(./assets/img/homepage1/right-quotes.svg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
section.stories .story-info .story-content .agent {
  position: absolute;
  right: 2rem;
  bottom: -4rem;
  display: flex;
  justify-content: flex-end;
}
section.stories .story-info .story-content .agent p {
  display: flex;
  align-items: center;
  padding-right: 2rem;
  font-weight: 300;
  font-size: 1rem;
}
section.stories .story-info .story-content .agent img {
  width: 8rem;
}
section.stories .story-info .story-content .agent span {
  font-family: shinryu, sans-serif;
  line-height: 1;
  font-size: clamp(2.5rem, 3vw, 3rem);
  font-weight: 500;
}

@media screen and (max-width: 1000px) {
  section.stories .story-info .story-content {
    width: 100vw;
  }
  section.stories .story-info .story-content .story-slogan {
    flex-direction: column;
    align-items: center;
  }
  section.stories .story-info .story-content .story-slogan img:nth-child(1) {
    margin-left: 0vw;
  }
  section.stories .story-info .story-content .story-slogan img:nth-child(2) {
    margin-left: 10vw;
  }
}
section.timeline {
  position: relative;
  padding: 2rem 0;
}
section.timeline .timeline-info {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  padding: 0 7.5%;
}
section.timeline .timeline-info::after {
  width: 100%;
  height: 0.2rem;
  top: 4rem;
  background: var(--grey1);
  z-index: -1;
}
section.timeline .timeline-info .year {
  width: clamp(12rem, 25vw, 30rem);
  transition: filter 0.3s;
}
section.timeline .timeline-info .year:hover {
  filter: hue-rotate(20deg);
}
section.timeline .timeline-info .year .year-title {
  margin-bottom: 3rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--purple3);
  font-family: "Lexend", sans-serif;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: 1;
  height: 4rem;
  position: relative;
}
section.timeline .timeline-info .year .year-title::after {
  width: 100%;
  height: 0.2rem;
  bottom: -0.2rem;
  left: 0;
  background: var(--purple3);
  transition: transform 0.2s;
}
section.timeline .timeline-info .year ul li {
  margin-left: 2rem;
  position: relative;
  list-style: none;
  line-height: 1.75;
}
section.timeline .timeline-info .year ul li:not(:last-child) {
  margin-bottom: 1.5rem;
}
section.timeline .timeline-info .year ul li::before {
  left: -1.5rem;
  top: 0.4rem;
  width: 1rem;
  height: 1rem;
  background: no-repeat center/contain url(./assets/img/homepage1/timeline-p-before.svg);
}

@media (max-width: 800px) {
  section.timeline .timeline-info {
    position: relative;
    flex-direction: column;
  }
  section.timeline .timeline-info::before {
    left: calc(7.5% + 1rem);
    background: var(--purple3);
    top: 2.5%;
    width: 0.15rem;
    height: 95%;
  }
  section.timeline .timeline-info::after {
    display: none;
  }
  section.timeline .timeline-info .year {
    margin-left: 3rem;
    width: auto;
  }
  section.timeline .timeline-info .year .year-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    height: auto;
    position: relative;
  }
  section.timeline .timeline-info .year .year-title::before {
    left: -2.55rem;
    top: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 1rem;
    background: var(--purple3);
  }
  section.timeline .timeline-info .year-title::after {
    display: none;
  }
}
section.groups {
  position: relative;
  padding: 3rem 0 0;
  margin-bottom: 5rem;
  background: linear-gradient(rgba(255, 255, 255, 0.75), transparent);
}
section.groups .title {
  margin: 3rem calc((100vw - var(--body-width) * 0.85) / 2);
}
section.groups .banners {
  outline: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  display: none;
}
section.groups .banners img {
  -o-object-fit: cover;
     object-fit: cover;
  height: max(14rem, 20vw);
  width: 33.3333333333%;
}
section.groups .carousel {
  display: none;
  --slide-height: 60vw;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
  position: relative;
  width: 100%;
  height: var(--slide-height);
  overflow: hidden;
  background: lightgray;
}
section.groups .carousel .slide-toggle {
  --t-size: clamp(2rem, 4vw, 4rem);
  position: absolute;
  cursor: pointer;
  height: var(--t-size);
  width: var(--t-size);
  bottom: calc(var(--slide-height) / 2 - var(--t-size) / 2);
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
section.groups .carousel .slide-toggle .arrow {
  height: 20%;
  width: 20%;
  transform: rotate(45deg) translate(0.1vw, -0.1vw);
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}
section.groups .carousel .slide-toggle.left {
  left: 0;
}
section.groups .carousel .slide-toggle.right {
  right: 0;
  transform: rotate(180deg);
}
section.groups .carousel .slide-toggle:hover {
  background: var(--main);
}
section.groups .carousel .slide-toggle:hover .arrow {
  --arrow-color: white;
}
section.groups .carousel .slides {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  left: -100vw;
}
section.groups .carousel .slides .slide {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
section.groups .carousel .slides .slide img {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.groups .carousel .slides.shifting {
  transition: left 0.3s ease-out;
}
section.groups .auto-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
  --slide-height: clamp(15rem, 20vw, 30rem);
  --slide-width: clamp(30rem, 40vw, 60rem);
  width: 100%;
  height: calc(var(--slide-height) + 3rem);
  overflow: hidden;
  position: relative;
}
section.groups .auto-slider::before, section.groups .auto-slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 2;
  height: 100%;
  width: 20rem;
  top: 0;
}
section.groups .auto-slider::before {
  left: 0;
}
section.groups .auto-slider::after {
  right: 0;
  transform: rotateZ(180deg);
}
section.groups .auto-slider .slide-track {
  -webkit-animation: scroll 80s linear infinite;
          animation: scroll 80s linear infinite;
  display: flex;
  width: calc(var(--slide-width) * 12);
}
section.groups .auto-slider .slide-track .slide {
  height: 100%;
  width: var(--slide-width);
  display: flex;
  justify-content: center;
  align-items: center;
}
section.groups .auto-slider .slide-track .slide img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--slide-width) * -1 * 6));
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--slide-width) * -1 * 6));
  }
}

section.groups .carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  height: 2rem;
  width: 100%;
}
section.groups .carousel-dots .c-dot {
  --radius: 0.5rem;
  cursor: pointer;
  height: var(--radius);
  width: var(--radius);
  background: lightgray;
  border-radius: 50%;
  margin: 0 clamp(0.5rem, 1vw, 2rem);
  border: 1px solid gray;
}
section.groups .carousel-dots .c-dot:hover, section.groups .carousel-dots .c-dot.active {
  background: gray;
}

@media (max-width: 1000px) {
  section.groups .banners img {
    width: 50%;
  }
  section.groups .banners img:nth-child(3) {
    order: 2;
  }
  section.groups .banners img:nth-child(6) {
    order: 5;
  }
}
@media (max-width: 700px) {
  section.groups .banners {
    display: none;
  }
  section.groups .carousel, section.groups .carousel-dots {
    display: flex;
  }
  section.groups .auto-slider {
    display: none;
  }
}
@media (max-width: 600px) {
  section.groups .carousel .slide-toggle, section.groups .carousel .slide-toggle:hover {
    background: transparent;
  }
  section.groups .carousel .slide-toggle .arrow {
    --arrow-color: white;
  }
}
section.contact {
  padding: 2rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
section.contact .cont-close {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1rem;
  right: 2rem;
}
section.contact .cont-close .cont-del {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--black);
  border-radius: 50%;
}
section.contact .cont-close .cont-del::before, section.contact .cont-close .cont-del::after {
  left: 1.6rem;
  top: 0.6rem;
  background: var(--black);
  width: 0px;
  height: 2rem;
  border: 1px solid;
}
section.contact .cont-close .cont-del::before {
  transform: rotate(45deg);
}
section.contact .cont-close .cont-del::after {
  transform: rotate(-45deg);
}
section.contact form {
  display: flex;
  width: 80%;
  margin: 0 auto;
  padding-top: 3rem;
}
section.contact form .logo {
  margin-left: -6rem;
}
section.contact form .logo h1 {
  font-weight: 500;
  font-size: 3rem;
}
section.contact form .logo img {
  width: 10rem;
  margin: 0 0 10rem;
}
section.contact .contact-form {
  width: 45rem;
  margin-left: 6rem;
}
section.contact .contact-form * {
  box-sizing: border-box;
}
section.contact .contact-form label {
  display: inline-block;
  position: relative;
  font-weight: 300;
  font-size: 1.4rem;
}
section.contact .contact-form .input-form {
  position: relative;
}
section.contact .contact-form .input-form input {
  width: 18rem;
  height: 3rem;
  margin-top: 1rem;
  border: 0.5px solid var(--black);
}
section.contact .contact-form .input-form .category-info {
  display: flex;
  margin-top: 1rem;
  width: 18rem;
  height: 3rem;
}
section.contact .contact-form .input-form .category-info select {
  border-left: none;
  outline: 0.5px solid var(--black);
  margin-top: 1rem;
  width: 100%;
  height: 3rem;
  -webkit-appearance: none;
  background: url(./assets/img/downarrow.svg) no-repeat 95% 50%;
  background-size: 8%;
  font-weight: 300;
  font-size: 1rem;
  padding: 0 0.5rem;
}
section.contact .contact-form .input-form #content {
  position: relative;
  margin-top: 1rem;
  width: 45rem;
  resize: none;
  height: 15rem;
  outline: 0.5px solid var(--black);
}
section.contact .contact-form .input-form #content::-moz-placeholder {
  position: absolute;
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--grey1);
  left: 10px;
  top: 5px;
}
section.contact .contact-form .input-form #content:-ms-input-placeholder {
  position: absolute;
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--grey1);
  left: 10px;
  top: 5px;
}
section.contact .contact-form .input-form #content::placeholder {
  position: absolute;
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--grey1);
  left: 10px;
  top: 5px;
}
section.contact .contact-form .info-form .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0;
}
section.contact .contact-form .info-form .info .name-input, section.contact .contact-form .info-form .info .email-input {
  display: flex;
  flex-direction: column;
}
section.contact .contact-form .info-form .info .name-input input, section.contact .contact-form .info-form .info .email-input input {
  width: 18rem;
  height: 3rem;
  margin-top: 1rem;
  outline: 0.5px solid var(--black);
  border-radius: 2px;
}
section.contact .contact-form button.cont-btn {
  transform: translate(48rem, -4rem);
}
section.contact .contact-form button.cont-btn img {
  width: 4rem;
}

.contact-footer {
  width: 90vw;
  margin-top: 2rem;
  font-weight: 400;
}
.contact-footer .copyright {
  margin-right: auto;
}
.contact-footer .pri .pri-1 {
  cursor: pointer;
}
.contact-footer h3 {
  display: inline;
  margin-right: 2rem;
  color: var(--grey1);
  text-decoration: underline;
}

@media screen and (max-width: 900px) {
  section.contact form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-top: 0;
  }
  section.contact form .logo h1 {
    display: none;
  }
  section.contact form .logo img {
    margin: 0 0 4rem;
  }
  section.contact form .contact-form {
    margin-left: 0;
    margin-bottom: 4rem;
    width: 100%;
  }
  section.contact form .contact-form .input-form {
    margin-bottom: 2rem;
  }
  section.contact form .contact-form .input-form input {
    width: 100%;
    height: 5rem;
    outline-width: 2px;
  }
  section.contact form .contact-form .input-form .category-info button.category-btn {
    width: 5rem;
    height: 5rem;
    outline-width: 2px;
  }
  section.contact form .contact-form .input-form #content {
    width: 100%;
    height: 15rem;
    outline-width: 2px;
  }
  section.contact form .contact-form .info-form {
    margin-bottom: 2rem;
  }
  section.contact form .contact-form .info-form .info {
    margin: 0;
    flex-direction: column;
    gap: 2rem;
  }
  section.contact form .contact-form .info-form .info .name-input, section.contact form .contact-form .info-form .info .email-input {
    width: 100%;
  }
  section.contact form .contact-form .info-form .info .name-input input, section.contact form .contact-form .info-form .info .email-input input {
    width: 100%;
    height: 5rem;
    outline-width: 2px;
  }
  section.contact form .contact-form button.cont-btn {
    width: 100%;
    display: flex;
    transform: translate(0, 0);
    flex-direction: row-reverse;
  }
  section.contact .contact-footer {
    width: 100vw;
  }
}
@media screen and (max-width: 1200px) {
  section.contact form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-top: 0;
  }
  section.contact form .logo h1 {
    display: none;
  }
  section.contact form .logo img {
    margin: 0 0 4rem;
  }
  section.contact form .contact-form {
    margin-left: 0;
    margin-bottom: 4rem;
  }
  section.contact form .contact-form .input-form {
    margin-bottom: 2rem;
  }
  section.contact form .contact-form .input-form input {
    width: 100%;
    height: 3rem;
    outline-width: 2px;
  }
  section.contact form .contact-form .input-form .category-info button.category-btn {
    width: 3rem;
    height: 3rem;
    outline-width: 2px;
  }
  section.contact form .contact-form .input-form #content {
    width: 100%;
    height: 15rem;
    outline-width: 2px;
  }
  section.contact form .contact-form .info-form {
    margin-bottom: 2rem;
  }
  section.contact form .contact-form .info-form .info {
    margin: 0;
    flex-direction: column;
    gap: 2rem;
  }
  section.contact form .contact-form .info-form .info .name-input, section.contact form .contact-form .info-form .info .email-input {
    width: 100%;
  }
  section.contact form .contact-form .info-form .info .name-input input, section.contact form .contact-form .info-form .info .email-input input {
    width: 100%;
    height: 3rem;
    outline-width: 2px;
  }
  section.contact form .contact-form .info-form .info #content {
    height: 5rem;
  }
  section.contact form .contact-form button.cont-btn {
    width: 100%;
    transform: translate(0, 0);
    display: flex;
    flex-direction: row-reverse;
  }
}
section.company-brief {
  position: relative;
  padding-top: 8rem;
}
section.company-brief .brief-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4vw;
}
section.company-brief .brief-div .brief-img img {
  width: 85%;
}
section.company-brief .brief-div .brief-information {
  width: 55vw;
  height: auto;
  padding: 2rem 0 2rem 5rem;
  border-top: 1px solid hsla(0deg, 0%, 20%, 0.5);
  border-bottom: 1px solid hsla(0deg, 0%, 20%, 0.5);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
section.company-brief .brief-div .brief-message {
  display: flex;
  font-size: 1.2rem;
}
section.company-brief .brief-div .brief-message h3 {
  font-weight: 400;
  width: 8rem;
  line-height: 200%;
}
section.company-brief .brief-div .brief-message p {
  font-weight: 200;
  width: 25rem;
  margin-left: 5rem;
  line-height: 200%;
}

@media screen and (max-width: 1200px) {
  section.company-brief::after {
    width: 100vw;
    left: 0;
  }
  section.company-brief .brief-div .brief-message h3 {
    margin-left: 0;
  }
  section.company-brief .brief-div .brief-message p {
    width: 18rem;
  }
}
@media screen and (max-width: 900px) {
  section.company-brief {
    width: 100vw;
  }
  section.company-brief::after {
    background: none;
  }
  section.company-brief .brief-div {
    flex-direction: column;
  }
  section.company-brief .brief-div .brief-img {
    width: 100%;
    margin-bottom: 2rem;
  }
  section.company-brief .brief-div .brief-img img {
    width: 100%;
    height: 35rem;
  }
  section.company-brief .brief-div .brief-information {
    width: 90vw;
    height: 35rem;
    border: none;
    padding: 0;
    margin-bottom: 2rem;
  }
  section.company-brief .brief-div .brief-information p {
    width: 18rem;
  }
}
section.top-message .mess-brief {
  background: linear-gradient(hsl(var(--blue5-hsl)/0.73), hsl(var(--green1-hsl)/0.73));
  height: 24rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
section.top-message .mess-brief .brief-logo {
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.16);
}
section.top-message .mess-brief .brief-logo img {
  width: 12rem;
}
section.top-message .mess-brief .brief-content {
  width: 70vw;
}
section.top-message .mess-brief .brief-content p {
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 200%;
}
section.top-message .mess-info {
  display: flex;
}
section.top-message .mess-info .info-content {
  width: 33.3333333333vw;
  height: 35rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(./assets/img/homepage2/top-mess-bg.png) no-repeat center;
  background-size: contain;
}
section.top-message .mess-info .info-content .content-text {
  text-align: center;
  height: 20rem;
}
section.top-message .mess-info .info-content .content-text .text-tit {
  transform: translateY(9rem);
  transition: all 0.5s ease-in-out;
}
section.top-message .mess-info .info-content .content-text .text-tit h2 {
  font-size: 2.4rem;
}
section.top-message .mess-info .info-content .content-text .text-tit p {
  font-size: 2rem;
  font-weight: 400;
  color: var(--grey1);
}
section.top-message .mess-info .info-content .content-text .text-tit .text-arrow {
  width: 2.4rem;
  height: 3rem;
  margin: 1rem auto 0;
  background: linear-gradient(var(--green1), var(--blue5));
  transform: rotate(90deg);
  transition: all 0.5s ease-in-out;
  -webkit-clip-path: polygon(10.5% 0%, 64.5% 50%, 10.5% 100%, 35.5% 100%, 89.5% 50%, 35.5% 0%);
          clip-path: polygon(10.5% 0%, 64.5% 50%, 10.5% 100%, 35.5% 100%, 89.5% 50%, 35.5% 0%);
}
section.top-message .mess-info .info-content .content-text span {
  display: block;
  width: 25vw;
  max-width: 50rem;
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 200%;
  text-align: left;
  margin-top: 1rem;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
section.top-message .mess-info .info-content .content-text .mid-span {
  width: 30vw;
  max-width: 50rem;
}
section.top-message .mess-info .info-content .content-text:hover .text-tit {
  transform: translateY(0rem);
}
section.top-message .mess-info .info-content .content-text:hover .text-tit h2 {
  color: var(--purple4);
}
section.top-message .mess-info .info-content .content-text:hover .text-arrow {
  transform: rotate(270deg);
  background: var(--purple4);
}
section.top-message .mess-info .info-content .content-text:hover span {
  opacity: 1;
}

@media screen and (max-width: 1200px) {
  section.top-message .mess-brief {
    height: auto;
  }
  section.top-message .mess-brief .brief-logo {
    width: 13rem;
    height: 13rem;
  }
  section.top-message .mess-brief .brief-logo img {
    width: 70%;
  }
}
@media screen and (max-width: 900px) {
  section.top-message .mess-all {
    width: 85vw;
    height: 30rem;
    margin: 0 auto;
    overflow-y: scroll;
  }
  section.top-message .mess-all .mess-brief {
    background: none;
  }
  section.top-message .mess-all .mess-brief .brief-logo {
    display: none;
  }
  section.top-message .mess-all .mess-brief .brief-content {
    width: 100vw;
  }
  section.top-message .mess-all .mess-brief .brief-content p {
    font-weight: 300;
  }
  section.top-message .mess-all .mess-info {
    flex-direction: column;
  }
  section.top-message .mess-all .mess-info .info-content {
    background: none;
    width: 100%;
    height: auto;
  }
  section.top-message .mess-all .mess-info .info-content .content-text {
    height: auto;
  }
  section.top-message .mess-all .mess-info .info-content .content-text .text-tit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    transform: translateY(0);
    margin-bottom: 2rem;
  }
  section.top-message .mess-all .mess-info .info-content .content-text .text-tit h2 {
    position: relative;
    font-size: 1.4rem;
  }
  section.top-message .mess-all .mess-info .info-content .content-text .text-tit h2::after {
    width: 0.3rem;
    height: 0.3rem;
    top: 0.8rem;
    right: -1rem;
    border-radius: 50%;
    background: var(--black);
  }
  section.top-message .mess-all .mess-info .info-content .content-text .text-tit h2::before {
    z-index: -1;
    left: -1rem;
    top: 1rem;
    width: 12rem;
    height: 1.4rem;
    border-radius: 30px;
    background: linear-gradient(to right, var(--blue5), var(--green1));
  }
  section.top-message .mess-all .mess-info .info-content .content-text .text-tit .long-tit::before {
    width: 25rem;
  }
  section.top-message .mess-all .mess-info .info-content .content-text .text-tit p {
    font-size: 1.4rem;
  }
  section.top-message .mess-all .mess-info .info-content .content-text .text-tit .text-arrow {
    display: none;
  }
  section.top-message .mess-all .mess-info .info-content .content-text span {
    width: 100%;
    opacity: 1;
    margin-bottom: 2rem;
  }
  section.top-message .mess-all .mess-info .info-content .content-text .last-span {
    position: relative;
  }
  section.top-message .mess-all .mess-info .info-content .content-text .last-span::after {
    content: "INTEGRITY";
    opacity: 0.2;
    color: var(--purple5);
    font-size: 5rem;
    left: 2rem;
    top: 0;
    z-index: -1;
  }
}
section.company-idea {
  position: relative;
}
section.company-idea::after {
  width: 100vw;
  height: 150vh;
  background: url(./assets/img/homepage2/idea-bg.svg) no-repeat;
  background-size: contain;
  top: 1rem;
  left: -5rem;
  z-index: -1;
}
section.company-idea .idea-tit {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 2rem;
}
section.company-idea .idea-tit h2 {
  font-weight: 400;
  font-size: 2.4rem;
  text-align: center;
}
section.company-idea .idea-tit .idea-tit-1 {
  position: relative;
}
section.company-idea .idea-tit .idea-tit-1::before {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--black);
  top: 1rem;
  right: -1.3rem;
}
section.company-idea .idea-tit .idea-tit-1::after {
  width: 70rem;
  height: 3rem;
  border-radius: 50px;
  background: linear-gradient(to right, var(--blue5), var(--green1));
  left: -1rem;
  top: 1.5rem;
  z-index: -1;
}
section.company-idea .idea-information {
  width: 80vw;
  margin: 3rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section.company-idea .idea-information .idea-info {
  width: 30vw;
  font-size: 1rem;
  font-weight: 300;
  line-height: 200%;
}
section.company-idea .idea-information .idea-points .points {
  padding: 0.1rem 0;
}
section.company-idea .idea-information .idea-points .points h2 {
  filter: drop-shadow(0px 0px 0px #4444dd);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--purple1);
  font-size: 4rem;
  font-weight: 700;
  text-shadow: none !important;
  transform: translate(-3.5rem, 2rem);
}
section.company-idea .idea-information .idea-points .points p {
  display: inline;
  font-size: 1.2rem;
  font-weight: 300;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 30px;
}

@media screen and (max-width: 1200px) {
  section.company-idea .idea-tit h2 {
    font-size: 1.6rem;
  }
  section.company-idea .idea-tit .idea-tit-1::after {
    width: 48rem;
    top: 1.2rem;
    height: 2rem;
  }
  section.company-idea .idea-information .idea-points .points h3 {
    font-size: 3rem;
  }
  section.company-idea .idea-information .idea-points .points p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 900px) {
  section.company-idea::after {
    top: 25rem;
    left: -15rem;
  }
  section.company-idea .idea-tit {
    width: 85%;
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-start;
  }
  section.company-idea .idea-tit .idea-tit-1::before {
    display: none;
  }
  section.company-idea .idea-tit .idea-tit-1::after {
    width: 22rem;
    left: 0;
    top: 1.2rem;
    height: 1.5rem;
  }
  section.company-idea .idea-tit .idea-tit-2 {
    position: relative;
    width: 100%;
    text-align: right;
  }
  section.company-idea .idea-tit .idea-tit-2::after {
    z-index: -1;
    right: 0rem;
    top: 1.2rem;
    width: 25rem;
    height: 1.5rem;
    border-radius: 30px;
    background: linear-gradient(to right, var(--blue5), var(--green1));
  }
  section.company-idea .idea-information {
    flex-direction: column;
    gap: 2rem;
  }
  section.company-idea .idea-information .idea-info {
    width: 100%;
    font-size: 1.4rem;
  }
  section.company-idea .idea-information .idea-points .points {
    margin-bottom: 1rem;
  }
  section.company-idea .idea-information .idea-points .points h3 {
    font-size: 1.8rem;
  }
  section.company-idea .idea-information .idea-points .points p {
    font-size: 1.2rem;
    padding: 0.2rem 1rem;
  }
}
section.team-introduction .team-card {
  background: url(./assets/img/homepage2/team-info1.jpg) no-repeat 60% 50%;
  background-size: 100%;
  height: 30rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
section.team-introduction .team-card:nth-child(3) {
  background: url(./assets/img/homepage2/team-info2.jpg) no-repeat 70% 50%;
  background-size: 100%;
  margin: 1rem 0;
}
section.team-introduction .team-card:nth-child(4) {
  background: url(./assets/img/homepage2/team-info3.jpg) no-repeat 100% 100%;
  background-size: 100%;
  margin-bottom: -1rem;
}
section.team-introduction .team-card .team-info {
  z-index: 0;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
section.team-introduction .team-card .team-info .team-tit {
  position: relative;
  font-size: 2.4rem;
  font-weight: 400;
  width: 40vw;
  height: 20rem;
  max-width: 40rem;
  padding: 0 4rem;
  color: white;
}
section.team-introduction .team-card .team-info .team-tit h2 {
  font-size: 2.4rem;
  font-weight: 400;
  color: white;
}
section.team-introduction .team-card .team-info .team-tit::before {
  width: 1rem;
  height: 4rem;
  background: white;
  left: 0rem;
}
section.team-introduction .team-card .team-info .team-content {
  position: relative;
  padding: 0 4rem;
  height: 20rem;
  width: 50vw;
  max-width: 60rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-items: center;
}
section.team-introduction .team-card .team-info .team-content p {
  font-size: 1rem;
  color: white;
  padding-bottom: 0.5rem;
  font-weight: 300;
  line-height: 200%;
}
section.team-introduction .team-card .team-info .team-content::after {
  width: 0.1rem;
  height: 15rem;
  background: white;
  left: 0;
}
section.team-introduction .team-card .team-info::after {
  z-index: -1;
  width: 100vw;
  height: 30rem;
  background: rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 1200px) {
  section.team-introduction .team-card .team-info .team-tit {
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
  }
  section.team-introduction .team-card .team-info .team-tit h2 {
    font-size: 1.4rem;
  }
  section.team-introduction .team-card .team-info .team-content {
    width: 60vw;
  }
  section.team-introduction .team-card .team-info .team-content p {
    line-height: normal;
  }
}
@media screen and (max-width: 900px) {
  section.team-introduction .team-card {
    height: 20rem;
  }
  section.team-introduction .team-card .team-info {
    flex-direction: column;
    gap: 4vw;
  }
  section.team-introduction .team-card .team-info::after {
    height: 20rem;
  }
  section.team-introduction .team-card .team-info .team-tit {
    width: 100%;
    max-width: 100rem;
    padding: 0;
    flex-direction: row;
    height: auto;
  }
  section.team-introduction .team-card .team-info .team-tit::before {
    width: 0.5rem;
    height: 1.5rem;
    left: -1rem;
    top: 0.4rem;
  }
  section.team-introduction .team-card .team-info .team-content {
    height: auto;
    width: 100%;
    max-width: 100rem;
  }
  section.team-introduction .team-card .team-info .team-content::after {
    display: none;
  }
}
section.access {
  padding-top: 5rem;
  position: relative;
  margin-bottom: 10rem;
  background-position: 20rem -40rem;
  background-size: 140%;
}
section.access .access-location {
  display: flex;
  z-index: 0;
  position: relative;
  flex-wrap: wrap;
}
section.access .access-location .access-tokyo, section.access .access-location .access-fukuoka {
  width: 50%;
  height: 30rem;
  flex: 1;
  min-width: 20rem;
}
section.access .access-location .access-tokyo {
  background-image: url(./assets/img/homepage2/access-tokyo.png);
  background-position: 50% 0%;
  background-size: cover;
}
section.access .access-location .access-fukuoka {
  background-image: url(./assets/img/homepage2/access-fukuoka.png);
}
section.access .access-location .content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 0;
}
section.access .access-location .content::before {
  width: 100%;
  height: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.3);
}
section.access .access-location .content h1 {
  font-size: clamp(2.5rem, 8vw, 3rem);
  font-weight: 700;
  color: white;
  letter-spacing: 1ch;
  padding-left: 1ch;
  margin-bottom: 2rem;
}
section.access .access-location .content i {
  color: white;
  font-size: 1.5rem;
  font-weight: 200;
}
section.access .access-location .content i.tokyo {
  letter-spacing: 0.7ch;
  padding-left: 0.375ch;
}
section.access .access-location .content i.fukuoka {
  letter-spacing: 0.225ch;
}
section.access .access-location .content i.office {
  letter-spacing: 0.5ch;
}
section.access .access-location .content .address {
  font-size: 0.8rem;
  color: white;
  text-align: center;
  margin: 2rem auto;
}
section.access .access-location .content button.access-map {
  width: 10rem;
  height: 3rem;
  right: 0;
  bottom: 0;
  border-radius: 2rem;
  position: relative;
  background: white;
  color: var(--black);
  font-size: 1.2rem;
  font-weight: 300;
  margin-top: 2rem;
}
section.access .access-location .content button.access-map::after {
  width: 2rem;
  height: 1rem;
  right: 0.5rem;
  top: 1.25rem;
  background-image: url(./assets/img/homepage2/button-arrow.svg);
  background-size: 60%;
  background-repeat: no-repeat;
}

section.bus-overview {
  z-index: -2;
  position: relative;
  padding-top: 8rem;
  margin-bottom: 5rem;
  background: url(./assets/img/background-svg/business\ –\ 1.svg) no-repeat;
}
section.bus-overview::after {
  position: absolute;
  width: 55vw;
  height: min(47rem, 100vh);
  top: 0;
  right: 0;
  z-index: -1;
  background: url(./assets/img/homepage3/bus-overview-bg.jpg) no-repeat 100% 100%;
  background-size: cover;
}
section.bus-overview .overview-inf {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
}
section.bus-overview .overview-inf .overview-content p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 200%;
  padding-bottom: 0.5rem;
  width: clamp(20rem, 30vw, 40rem);
}
section.bus-overview .overview-inf .overview-slogan h2 {
  position: relative;
  text-align: right;
  font-size: 3rem;
  font-weight: 500;
  color: white;
}
section.bus-overview .overview-inf .overview-slogan h2::after {
  width: 4rem;
  height: 4rem;
  bottom: -8rem;
  right: 1rem;
  background-image: url(./assets/img/homepage3/arrow-down.svg);
  background-repeat: no-repeat;
}

@media screen and (max-width: 1000px) {
  section.bus-overview {
    background: none;
    position: relative;
  }
  section.bus-overview::after {
    width: 100%;
    height: 20rem;
    top: 20rem;
  }
  section.bus-overview .overview-inf {
    width: 100vw;
    flex-direction: column-reverse;
  }
  section.bus-overview .overview-inf .overview-slogan {
    position: relative;
    width: 100%;
    height: 16rem;
    margin-bottom: 6rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  section.bus-overview .overview-inf .overview-slogan::after {
    width: 100%;
    height: 20rem;
    top: 0;
    left: 0;
    background-size: cover;
    z-index: -1;
  }
  section.bus-overview .overview-inf .overview-slogan h2 {
    width: 90vw;
    margin: 0 auto;
  }
  section.bus-overview .overview-inf .overview-slogan h2::after {
    display: none;
  }
  section.bus-overview .overview-inf .overview-content {
    width: 90vw;
    margin: 0 auto;
  }
  section.bus-overview .overview-inf .overview-content p {
    width: 100%;
    font-size: 1.4rem;
  }
}
section.inv-process .process-top, section.inv-process .process-bottom {
  padding: 0 4rem;
  margin: 5rem auto;
  display: flex;
  gap: 4rem;
}
section.inv-process .process-top .process-info, section.inv-process .process-bottom .process-info {
  position: relative;
  width: 15rem;
  height: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url(./assets/img/homepage3/process.svg) center center no-repeat;
  background-size: contain;
}
section.inv-process .process-top .process-info h2, section.inv-process .process-bottom .process-info h2 {
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 1rem;
}
section.inv-process .process-top .process-info p, section.inv-process .process-bottom .process-info p {
  font-size: 0.8rem;
  font-weight: 300;
  text-align: center;
  width: 8rem;
}
section.inv-process .process-top .process-info::before, section.inv-process .process-bottom .process-info::before {
  display: flex;
  justify-content: center;
  align-items: center;
  left: -2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 7rem;
  padding-bottom: 1rem;
  font-size: 8rem;
  font-weight: 500;
  background: #fff;
  color: white;
  -webkit-text-stroke: 2px var(--purple1);
  position: absolute;
}
section.inv-process .process-bottom {
  margin-top: 4rem;
  justify-content: flex-end;
}
section.inv-process .process-top .process-info:nth-child(1)::before {
  content: "0";
}
section.inv-process .process-bottom .process-info:nth-child(1)::before {
  content: "4";
}
section.inv-process .process-top .process-info:nth-child(2)::before {
  content: "1";
}
section.inv-process .process-bottom .process-info:nth-child(2)::before {
  content: "5";
}
section.inv-process .process-top .process-info:nth-child(3)::before {
  content: "2";
}
section.inv-process .process-bottom .process-info:nth-child(3)::before {
  content: "6";
}
section.inv-process .process-top .process-info:nth-child(4)::before {
  content: "3";
}
section.inv-process .process-bottom .process-info:nth-child(4)::before {
  content: "7";
}

@media screen and (max-width: 1200px) {
  section.inv-process .process-top, section.inv-process .process-bottom {
    margin-left: 2rem;
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 700px) {
  section.inv-process {
    margin: 0 auto;
    position: relative;
    background: url(./assets/img/homepage3/inv-process-bg1.svg) no-repeat;
    background-size: 120%;
    background-position: 90rem 20rem;
  }
  section.inv-process::before {
    width: 60rem;
    height: 60rem;
    left: -20rem;
    background: url(./assets/img/homepage3/inv-process-bg1.svg) no-repeat;
  }
  section.inv-process .process-top, section.inv-process .process-bottom {
    width: 85vw;
    margin: 0 auto;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
  }
  section.inv-process .process-top .process-info, section.inv-process .process-bottom .process-info {
    background: none;
    width: 100%;
  }
  section.inv-process .process-top .process-info h2, section.inv-process .process-bottom .process-info h2 {
    position: relative;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    padding: 0rem 2rem;
    border-radius: 30px;
  }
  section.inv-process .process-top .process-info h2::before, section.inv-process .process-bottom .process-info h2::before {
    width: 100%;
    height: 100%;
    opacity: 0.75;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    font-size: 8rem;
    font-weight: 500;
    color: transparent;
    z-index: -1;
    -webkit-text-stroke: 2px var(--purple1);
  }
  section.inv-process .process-top .process-info p, section.inv-process .process-bottom .process-info p {
    font-size: 1.25rem;
    width: 100%;
  }
  section.inv-process .process-top .process-info::before, section.inv-process .process-bottom .process-info::before {
    display: none;
  }
  section.inv-process .process-top {
    margin-top: 8rem;
  }
  section.inv-process .process-top .process-info:nth-child(1) h2::before {
    content: "0";
  }
  section.inv-process .process-bottom .process-info:nth-child(1) h2::before {
    content: "4";
  }
  section.inv-process .process-top .process-info:nth-child(2) h2::before {
    content: "1";
  }
  section.inv-process .process-bottom .process-info:nth-child(2) h2::before {
    content: "5";
  }
  section.inv-process .process-top .process-info:nth-child(3) h2::before {
    content: "2";
  }
  section.inv-process .process-bottom .process-info:nth-child(3) h2::before {
    content: "6";
  }
  section.inv-process .process-top .process-info:nth-child(4) h2::before {
    content: "3";
  }
  section.inv-process .process-bottom .process-info:nth-child(4) h2::before {
    content: "7";
  }
}
section.liu-history {
  position: relative;
  width: 100vw;
  margin: 6rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
}
section.liu-history .his-left {
  position: -webkit-sticky;
  position: sticky;
  top: 10rem;
  left: 5rem;
  z-index: -1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
}
section.liu-history .his-left::after {
  content: "若年起業家のための実験場";
  transform: rotate(90deg);
  right: -19rem;
  top: 15rem;
  opacity: 0.4;
  color: #fff;
  font-size: 2.6rem;
  -webkit-text-stroke: 1px var(--blue9);
}
section.liu-history .his-left img {
  width: 20rem;
}
section.liu-history .his-left h3 {
  font-size: 6rem;
  font-weight: 700;
  text-indent: -7rem;
  -webkit-text-stroke: 2px var(--purple1);
  color: white;
  opacity: 0.5;
}
section.liu-history .his-left .his-hit {
  color: var(--purple1);
}
section.liu-history .his-right {
  width: 50vw;
  margin-right: 4rem;
}
section.liu-history .his-right p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 200%;
}
section.liu-history .his-right h2 {
  position: relative;
  margin: 3rem auto 2rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
}
section.liu-history .his-right h2::after {
  width: 30vw;
  max-width: 50rem;
  height: 2rem;
  border-radius: 50px;
  background: linear-gradient(to right, var(--blue5), var(--green1));
  left: 5rem;
  top: 1.5rem;
  z-index: -1;
}
section.liu-history .his-right h2:nth-child(5)::after {
  width: 20vw;
  left: 9rem;
}
section.liu-history .his-right h2:nth-child(7)::after {
  width: 20vw;
  left: 9rem;
}
section.liu-history .his-right .ada-tit {
  display: none;
}

@media screen and (max-width: 1300px) {
  section.liu-history .his-left::after {
    display: none;
  }
  section.liu-history .his-left img {
    width: 15rem;
  }
  section.liu-history .his-left h3 {
    font-size: 5rem;
  }
  section.liu-history .his-right {
    margin-right: 2rem;
  }
}
@media screen and (max-width: 1000px) {
  section.liu-history {
    width: 90vw;
    margin: 5rem auto;
    flex-direction: column;
  }
  section.liu-history .his-left {
    position: static;
    margin-bottom: 3rem;
  }
  section.liu-history .his-left h3 {
    display: none;
  }
  section.liu-history .his-right {
    width: 100%;
    height: 60rem;
    overflow-y: scroll;
  }
  section.liu-history .his-right h2 {
    font-size: 1.2rem;
  }
  section.liu-history .his-right h2::after {
    height: 1.2rem;
    top: 0.8rem;
  }
  section.liu-history .his-right h2:nth-child(1):after {
    width: 17rem;
    left: 9rem;
  }
  section.liu-history .his-right h2:nth-child(3):after {
    width: 23rem;
    left: 6rem;
  }
  section.liu-history .his-right h2:nth-child(5):after {
    width: 16rem;
    left: 9.5rem;
  }
  section.liu-history .his-right h2:nth-child(7):after {
    width: 14rem;
    left: 10.5rem;
  }
  section.liu-history .his-right .ada-tit {
    display: block;
  }
}
section.sup-fund h2 {
  position: relative;
  font-weight: 600;
  font-size: 1.75rem;
  text-align: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
section.sup-fund h2::after {
  width: 90%;
  height: 2rem;
  border-radius: 50px;
  background: linear-gradient(to right, var(--blue5), var(--green1));
  left: 5%;
  top: 1.5rem;
  z-index: -1;
}
section.sup-fund .fund-info {
  width: 90%;
  margin: 5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
}
section.sup-fund .fund-info .fund-img {
  margin-top: 1;
}
section.sup-fund .fund-info .fund-img img {
  width: 90%;
  height: 25rem;
}
section.sup-fund .fund-info .fund-text p {
  width: 40vw;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 200%;
}

@media screen and (max-width: 1000px) {
  section.sup-fund .fund-info {
    flex-direction: column;
    width: 100%;
    margin: 4rem auto;
  }
  section.sup-fund .fund-info .fund-img {
    width: 100vw;
    height: 20rem;
    margin-bottom: 4rem;
    background-size: cover;
  }
  section.sup-fund .fund-info .fund-img img {
    width: 100%;
    height: 20rem;
  }
  section.sup-fund .fund-info .fund-text {
    width: 90vw;
    margin: 0 auto;
  }
  section.sup-fund .fund-info .fund-text p {
    width: 100%;
    font-size: 1.4rem;
  }
}
#news {
  padding-top: 8rem;
}
#news .news-list {
  --card-size: clamp(15rem, 25vw, 25rem);
  gap: 2rem;
  flex: 1;
  width: min(85%, var(--body-width));
  margin: 5rem auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 675px) {
  #news .news-list {
    gap: 3rem;
  }
}
#news .news-list .news-card {
  cursor: pointer;
  width: var(--card-size);
  position: relative;
}
#news .news-list .news-card:hover {
  background: hsl(var(--purple1-hsl)/0.1);
  color: var(--purple1);
  outline: 1rem solid hsl(var(--purple1-hsl)/0.1);
}
@media (max-width: 1215px) {
  #news .news-list .news-card {
    width: calc((100% - 2rem) / 2);
    --card-size: calc((85vw - 2rem)/2);
  }
}
@media (max-width: 675px) {
  #news .news-list .news-card {
    width: 100%;
    --card-size: 80vw;
  }
}
#news .news-list .news-card .news-head {
  height: 8.75rem;
}
#news .news-list .news-card .news-head h1, #news .news-list .news-card .news-head p {
  overflow: hidden;
}
#news .news-list .news-card .news-head h1.news-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1rem 0 1rem;
  max-height: 4rem;
}
#news .news-list .news-card .news-head p.news-desc {
  font-size: 0.9rem;
  height: 4rem;
}
#news .news-list .news-card img.thumbnail {
  width: 100%;
  height: var(--card-size);
  -o-object-fit: cover;
     object-fit: cover;
  outline: 1px solid darkgray;
}
#news .news-list .news-card img.meta-icon {
  display: inline-block;
  width: 1.25rem;
  margin-right: 0.5rem;
}
#news .news-list .news-card .news-meta {
  display: flex;
  margin: 1.5rem 0 0;
}
#news .news-list .news-card span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  margin-right: 1.5rem;
  color: gray;
}

#news-article {
  padding-top: 8rem;
}
#news-article .title::after {
  display: none;
}
#news-article .title, #news-article .article-meta, #news-article .article-body, #news-article .article-author, #news-article .back {
  width: min(85%, var(--body-width));
  margin: 1rem auto;
}
#news-article .article-meta {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
#news-article .article-meta .meta-item {
  display: flex;
}
#news-article .article-meta .meta-item img.meta-icon {
  display: inline-block;
  width: 1.5rem;
  margin-right: 0.5rem;
}
#news-article .article-author {
  margin: 1.5rem auto;
}
#news-article .article-body {
  margin-bottom: 3rem;
}
#news-article .article-body p {
  line-height: 2;
  margin: 2rem 0;
}
#news-article .article-body img {
  margin: clamp(1rem, 5vw, 5rem) auto;
  width: min(50rem, 100%);
}
#news-article .article-body .article-img-group {
  margin: clamp(1rem, 5vw, 5rem) auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
#news-article .article-body .article-img-group img {
  flex: 1;
  margin: 0;
  min-width: 20rem;
}
#news-article .back {
  display: flex;
}
#news-article .back a {
  margin-left: auto;
  padding: 0.5rem 1rem 0.5rem 1.75rem;
  position: relative;
  display: flex;
  align-items: center;
  background: hsl(var(--purple1-hsl)/0.1);
  border-radius: 1.5rem;
  font-size: 0.9rem;
}
#news-article .back a::after {
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid var(--purple1);
  border-left: 2px solid var(--purple1);
  transform: rotate(45deg);
  left: 0.75rem;
}
#news-article .back a:hover {
  background: hsl(var(--purple1-hsl)/0.2);
}

#partner-info {
  padding-top: 8rem;
  background: no-repeat top/cover url(./assets/img/partner-info/partner-bg.svg);
  background-attachment: fixed;
  width: 100%;
}
#partner-info .partner-header {
  width: min(85%, var(--body-width));
  margin: 0 auto;
}
#partner-info .partner-header .header-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
#partner-info .partner-header .header-group p.partner-summary {
  flex: 1 0;
  min-width: min(85%, 20rem);
}
#partner-info .partner-header .header-group .keywords-nav {
  flex: 1.5 0;
  min-width: min(85%, 20rem);
}
#partner-info .partner-header .header-group .keywords-nav .keywords-top {
  display: flex;
}
#partner-info .partner-header .header-group .keywords-nav .keywords-top h3 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--purple5);
  margin-right: 1.5rem;
}
#partner-info .partner-header .header-group .keywords-nav .keywords-top p {
  letter-spacing: 0;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: 2rem;
  cursor: pointer;
}
#partner-info .partner-header .header-group .keywords-nav .keywords-top p:hover {
  background: rgba(0, 0, 0, 0.05);
}
#partner-info .partner-header .header-group .keywords-nav .keywords {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: min(100%, 21rem);
  margin: 1rem 0;
}
#partner-info .partner-header .header-group .keywords-nav .keywords .keyword {
  padding: 0.25rem 1rem;
  border-radius: 30px;
  white-space: nowrap;
  border: 1px solid var(--purple5);
  color: var(--purple5);
  cursor: pointer;
}
#partner-info .partner-header .header-group .keywords-nav .keywords .keyword:hover {
  background: hsl(var(--purple5-hsl)/0.2);
}
#partner-info .partner-header .header-group .keywords-nav .keywords .keyword.selected {
  background: var(--purple5);
  color: white;
}
#partner-info .partner-list {
  --card-size: clamp(15rem, 25vw, 25rem);
  gap: 2rem;
  flex: 1;
  width: min(85%, var(--body-width));
  margin: 5rem auto;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
}
@media (max-width: 675px) {
  #partner-info .partner-list {
    gap: 3rem;
  }
}
#partner-info .partner-list .partner-card {
  width: var(--card-size);
  position: relative;
}
@media (max-width: 1215px) {
  #partner-info .partner-list .partner-card {
    width: calc((100% - 2rem) / 2);
    --card-size: calc((85vw - 2rem)/2);
  }
}
@media (max-width: 675px) {
  #partner-info .partner-list .partner-card {
    width: 100%;
    --card-size: 80vw;
  }
}
#partner-info .partner-list .partner-card.hide {
  display: none;
}
#partner-info .partner-list .partner-card .card-label {
  width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
#partner-info .partner-list .partner-card .card-label .business, #partner-info .partner-list .partner-card .card-label .product {
  white-space: nowrap;
}
#partner-info .partner-list .partner-card .card-label .business {
  margin-right: auto;
  font-weight: 500;
  letter-spacing: 0.05ch;
  font-size: 1rem;
}
#partner-info .partner-list .partner-card .card-label .product {
  margin-left: 1.5rem;
  font-size: 0.9rem;
  color: darkgray;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 675px) {
  #partner-info .partner-list .partner-card .card-label {
    margin-bottom: 1rem;
  }
  #partner-info .partner-list .partner-card .card-label .business {
    font-size: 1.25rem;
  }
  #partner-info .partner-list .partner-card .card-label .product {
    font-size: 1rem;
  }
}
#partner-info .partner-list .partner-card img {
  width: 100%;
  height: var(--card-size);
  -o-object-fit: cover;
     object-fit: cover;
  outline: 1px solid darkgray;
}
#partner-info .partner-list .partner-card .prod-desc {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--card-size);
  padding: 1.5rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.5333333333);
  color: white;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s;
  overflow: auto;
}
#partner-info .partner-list .partner-card:hover .prod-desc {
  visibility: visible;
  opacity: 1;
}

.modal {
  box-sizing: border-box;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  --move: 3rem;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  transform: translateY(0);
  transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
}
.modal.open {
  visibility: visible;
  opacity: 1;
  transform: translateY(calc(-1 * var(--move)));
}
.modal .backdrop {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: calc(100% + var(--move));
  left: 0;
  top: 0;
}
.modal .modal-content {
  position: absolute;
  background: white;
  overflow: auto;
  top: calc((100% - var(--modal-h)) / 2 + var(--move));
  left: calc((100% - var(--modal-w)) / 2);
  height: var(--modal-h);
  width: var(--modal-w);
  padding: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}
.modal.privacy .modal-content {
  --modal-w: min(calc(100% - 4rem), 60rem);
  --modal-h: min(calc(100% - 4rem), 60rem);
}
.modal.privacy .modal-content > ul, .modal.privacy .modal-content ol {
  padding: 0.5rem 0 0.5rem 2rem;
}
.modal.privacy .modal-content li {
  padding-left: 0.5rem;
}
.modal.privacy .modal-content li > p {
  margin: 0 0 1rem;
}
.modal.privacy .modal-content ol > ol {
  counter-reset: sublist;
}
.modal.privacy .modal-content ol > ol li {
  display: block;
  padding: 0.5rem 0;
  padding-left: 1rem;
}
.modal.privacy .modal-content ol > ol li::before {
  content: counter(sublist) "）";
  counter-increment: sublist;
  display: inline-block;
  width: 2em;
  margin-left: -1.75em;
}
.modal.privacy .modal-content h1 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  margin: 0.5rem 0 3rem;
}
.modal.privacy .modal-content h3 {
  margin: 1.5rem auto 0.5rem;
  font-weight: 500;
}
.modal.privacy .modal-content h4 {
  margin: 0.25rem auto;
}
.modal.privacy .modal-content .legal-info {
  margin: 1rem 0;
}
.modal.privacy .modal-content .legal-info p {
  margin: 0.5rem auto;
}
.modal.contact .modal-content {
  --modal-w: min(calc(100% - 4rem), 20rem);
  height: auto;
  top: 20%;
}
.modal.contact .modal-content p {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.75;
}
.modal.contact .modal-content p.email {
  font-weight: 500;
}/*# sourceMappingURL=style.css.map */